/* Mon Rêve Don Carlos · vitrina de productos que redirige a Uber Eats
   Identidad: chocolate, crema, caramelo y glaseado (colores oficiales). */
:root{
  --chocolate:#4A2E19; --espresso:#26160C; --crema:#FDF8EE; --caramelo:#C58F49; --glaseado:#F4DCD0;
  --linea:#26160C26; --suave:#6B5444;
  --display:'Outfit',ui-sans-serif,system-ui,sans-serif;
  --body:'Manrope',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --gutter:clamp(20px,6.5vw,120px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px}
body{margin:0;background:var(--crema);color:var(--espresso);font-family:var(--body);overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
a,button{-webkit-tap-highlight-color:transparent}
a:focus-visible,button:focus-visible{outline:3px solid var(--caramelo);outline-offset:4px;border-radius:6px}
::selection{background:var(--chocolate);color:var(--crema)}
h1,h2,h3{color:var(--chocolate);text-wrap:balance}
.skip{position:fixed;left:20px;top:-80px;z-index:100;padding:14px 18px;background:var(--crema);border-radius:8px}
.skip:focus{top:15px}
.grain{pointer-events:none;position:fixed;inset:0;opacity:.05;z-index:20;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 150 150' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.8' filter='url(%23n)'/%3E%3C/svg%3E")}
.progress{height:3px;background:var(--caramelo);position:fixed;top:0;left:0;z-index:40;width:100%;transform:scaleX(0);transform-origin:left}

/* Botones */
.btn{display:inline-flex;align-items:center;gap:12px;background:var(--caramelo);color:var(--espresso);font-weight:800;font-size:15px;padding:16px 26px;border-radius:999px;transition:transform .25s,background .25s}
.btn:hover{transform:translateY(-2px);background:#d39f5a}
.btn span{font-size:18px;transition:transform .3s}
.btn:hover span{transform:translate(3px,-3px)}

/* Navegación */
nav{position:sticky;top:0;z-index:30;background:var(--chocolate);color:var(--crema);height:84px;padding:0 var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:12px}
.mark{width:52px;height:52px;padding:3px;background:#fff;border-radius:12px;object-fit:contain}
.brand-text{font:700 21px/.95 var(--display);letter-spacing:-.5px;color:var(--crema)}
.brand-text small{display:block;font:600 10px var(--body);letter-spacing:3px;margin-top:6px;text-transform:uppercase;opacity:.85}
.navlinks{display:flex;align-items:center;gap:40px;font-size:13px;font-weight:700}
.navlinks a:not(.btn){position:relative;padding:10px 0}
.navlinks a:not(.btn):after{content:"";position:absolute;bottom:4px;left:0;right:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .3s}
.navlinks a:not(.btn):hover:after{transform:scaleX(1)}
.navlinks .btn{padding:12px 20px;font-size:13px}

/* Portada: fondo crema, titular Yeseva One, foto circular con el logo como sello */
.hero{--h-bg:var(--crema);--h-titulo:var(--chocolate);--h-acento:#B8456B;--h-texto:var(--suave);--h-anillo:var(--glaseado);--h-linea:#E6CFC2;
  background:var(--h-bg);display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;padding:clamp(48px,6vw,96px) var(--gutter) clamp(56px,7vw,110px)}
.hero>*{min-width:0}
.hero-eyebrow{font:600 clamp(24px,2.2vw,30px)/1 'Caveat','Segoe Script',cursive;color:var(--h-acento);margin:0}
.hero h1{font:400 clamp(40px,5.4vw,76px)/1.05 'Yeseva One','Didot',Georgia,serif;color:var(--h-titulo);margin:.3em 0 .4em;letter-spacing:0}
.hero-lead{font-size:clamp(16px,1.3vw,18px);line-height:1.6;color:var(--h-texto);max-width:32em;margin:0 0 30px}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px}
.hero-btn{display:inline-flex;align-items:center;gap:10px;background:var(--h-titulo);color:var(--crema);font-weight:800;font-size:16px;padding:14px 22px;border-radius:999px;transition:transform .15s}
.hero-btn:hover{transform:translateY(-2px)}
.hero-btn.ghost{background:transparent;color:var(--h-titulo);box-shadow:inset 0 0 0 2px var(--h-titulo)}
.hero-art{position:relative;justify-self:center;width:min(100%,430px)}
.hero-plate{width:100%;aspect-ratio:1;border-radius:50%;overflow:hidden;box-shadow:0 0 0 10px var(--h-anillo),0 0 0 11px var(--h-linea),0 30px 60px -30px #26160C99}
.hero-plate img{width:100%;height:100%;object-fit:cover}
.hero-badge{position:absolute;left:-6%;bottom:-4%;width:40%;aspect-ratio:1;border-radius:50%;background:#fff;display:grid;place-items:center;overflow:hidden;box-shadow:0 0 0 5px var(--h-bg),0 12px 24px -12px #26160C80}
.hero-badge img{width:90%;height:auto}

/* Cinta */
.ribbon{display:flex;overflow:hidden;padding:20px 0;background:var(--chocolate);color:var(--crema);font:800 clamp(26px,3vw,40px) var(--display);letter-spacing:-1.2px}
.ribbon-track{display:flex;align-items:center;gap:44px;padding-right:44px;white-space:nowrap;animation:marquee 30s linear infinite;flex-shrink:0}
.ribbon-track span{font-size:.7em;color:var(--caramelo)}
@keyframes marquee{to{transform:translateX(-100%)}}

/* Carta */
.collection{padding:clamp(72px,9vw,140px) var(--gutter) clamp(60px,7vw,110px)}
.section-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px}
.section-head h2{font:800 clamp(48px,5.2vw,100px)/.95 var(--display);letter-spacing:-.065em;margin:0}
.intro{max-width:420px;margin:0;font-size:15px;line-height:1.7;color:var(--suave)}
.filters{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:40px 0 36px}
.filters button{padding:10px 18px;background:transparent;border:1px solid var(--linea);border-radius:999px;color:var(--espresso);font-size:13px;font-weight:700;transition:background .2s,border-color .2s}
.filters button:hover{border-color:var(--chocolate)}
.filters button[aria-pressed=true]{background:var(--chocolate);border-color:var(--chocolate);color:var(--crema)}
.filters button .n{opacity:.6;margin-left:6px;font-variant-numeric:tabular-nums}
.filters .more{margin-left:auto;font-size:13px;font-weight:800;border-bottom:1px solid var(--espresso);padding-bottom:4px}
.products{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:48px 30px}
.product{display:flex;flex-direction:column;min-width:0}
.product[hidden]{display:none}
.product-photo{overflow:hidden;aspect-ratio:1;background:var(--glaseado);border-radius:999px 999px 14px 14px;max-width:100%}
.product:nth-child(3n+2) .product-photo{border-radius:14px 14px 999px 999px}
.product:nth-child(3n) .product-photo{border-radius:50%}
.product-photo img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.6,.2,1)}
.product:hover .product-photo img{transform:scale(1.06) rotate(-2deg)}
.product h3{font:700 23px/1.1 var(--display);letter-spacing:-.6px;margin:22px 0 8px}
.product .tag{display:inline-block;font:700 10px var(--body);letter-spacing:1.5px;text-transform:uppercase;color:var(--chocolate);background:var(--glaseado);padding:4px 10px;border-radius:999px;margin-bottom:8px;align-self:flex-start}
.product p{font-size:13px;line-height:1.65;margin:0;color:var(--suave);flex:1}
.product-bottom{margin-top:18px;padding-top:14px;border-top:1px solid var(--linea);display:flex;justify-content:space-between;align-items:center;gap:10px}
.price{font:700 20px var(--display);letter-spacing:-.3px;font-variant-numeric:tabular-nums;color:var(--chocolate)}
.order{font-size:12px;font-weight:800;padding:8px 0;display:inline-flex;align-items:center;gap:8px}
.order span{font-size:16px;transition:transform .3s}
.order:hover span{transform:translate(3px,-3px)}
.note{margin:48px 0 0;font-size:12px;color:var(--suave)}

/* Esencia */
.manifesto{position:relative;padding:clamp(90px,10vw,150px) var(--gutter);text-align:center;overflow:hidden;background:var(--glaseado)}
.mini{font-size:11px;font-weight:700;letter-spacing:3px;text-transform:uppercase;margin-bottom:36px}
.manifesto h2{font:800 clamp(46px,6vw,120px)/1 var(--display);letter-spacing:-.065em;margin:0;position:relative;z-index:1}
.manifesto h2 em{font-style:italic}
.manifesto p{font-size:15px;line-height:1.8;max-width:480px;margin:32px auto 0}
.flower{position:absolute;width:320px;height:320px;border:1px solid var(--chocolate);border-radius:50%;right:-140px;top:40px;opacity:.35}
.flower:before,.flower:after{content:"";position:absolute;inset:20px;border:1px solid var(--chocolate);border-radius:50%;transform:translate(-90px,40px)}
.flower:after{transform:translate(-50px,130px)}

/* Llamado a pedir */
.cta-band{background:var(--espresso);color:var(--crema);padding:clamp(80px,9vw,140px) var(--gutter);display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(40px,6vw,100px);align-items:center}
.cta-band>*{min-width:0}
.cta-band h2{color:var(--crema);font:800 clamp(52px,6.4vw,130px)/.92 var(--display);letter-spacing:-.06em;margin:0 0 26px}
.cta-band h2 em{color:var(--caramelo);font-style:italic}
.cta-band p{max-width:440px;font-size:16px;line-height:1.75;opacity:.88;margin:0 0 34px}
.cta-photos{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:end}
.cta-photos img{width:100%;aspect-ratio:.85;object-fit:cover;border-radius:999px 999px 14px 14px}
.cta-photos img:nth-child(2){aspect-ratio:.72}

/* Visítanos */
.visit{padding:clamp(80px,9vw,130px) var(--gutter);display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,7vw,100px);align-items:center}
.visit>*{min-width:0}
.visit h2{font:800 clamp(56px,6vw,115px)/.93 var(--display);letter-spacing:-.06em;margin:0 0 28px}
.visit h2 em{font-style:italic}
.visit p{font-size:16px;line-height:1.75;max-width:400px;color:var(--suave);margin:0 0 8px}
.visit .address{font:700 20px/1.35 var(--display);color:var(--chocolate);margin:20px 0 26px}
.map{background:var(--glaseado);min-height:400px;position:relative;overflow:hidden;border-radius:220px 220px 14px 14px;display:flex;align-items:flex-end;padding:40px}
.map-grid{position:absolute;inset:0;background:repeating-linear-gradient(20deg,transparent 0 70px,#FDF8EE70 70px 79px,transparent 79px 140px),repeating-linear-gradient(110deg,transparent 0 110px,#FDF8EE70 110px 123px,transparent 123px 170px);transform:scale(1.5)}
.map-pin{position:absolute;top:34%;left:50%;transform:translate(-50%,-50%) rotate(-45deg);width:92px;height:92px;border-radius:50% 50% 50% 0;background:var(--chocolate);box-shadow:-6px 10px 20px #26160C26;display:grid;place-items:center}
.map-pin span{transform:rotate(45deg);color:var(--crema);font:800 22px var(--display)}
.map-label{position:relative}
.map-label strong{display:block;font:700 26px/1.1 var(--display);color:var(--chocolate)}
.map-label small{display:block;font:500 13px var(--body);margin-top:8px}

/* Pie */
footer{background:var(--chocolate);color:var(--crema);padding:clamp(60px,7vw,90px) var(--gutter) 34px;overflow:hidden}
.footer-title{font:800 clamp(64px,13vw,250px)/.88 var(--display);letter-spacing:-.07em;margin:0 0 56px}
.footer-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:20px 30px;font-size:12px;border-top:1px solid #FDF8EE50;padding-top:26px}
.footer-row .brand-text{font-size:18px}
.footer-top{width:52px;height:52px;border-radius:50%;border:1px solid var(--crema);display:grid;place-items:center;font-size:22px}

@media(max-width:760px){
  .hero{grid-template-columns:1fr;text-align:center;padding-top:40px}
  .hero-lead{margin-inline:auto}
  .hero-actions{justify-content:center}
  .hero-art{order:-1;width:min(82%,320px)}
  .hero-badge{left:-4%}
}
@media(max-width:900px){
  .navlinks{gap:18px}.navlinks a:not(.btn){display:none}
  .cta-band,.visit{grid-template-columns:1fr}
  .map{min-height:340px}
}
@media(max-width:600px){
  nav{height:72px}
  .mark{width:40px;height:40px;border-radius:10px}
  .brand-text{font-size:17px}.brand-text small{letter-spacing:2px}
  .navlinks .btn{padding:10px 15px;font-size:12px}
  .filters .more{margin-left:0;width:100%}
  .products{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 16px}
  .product h3{font-size:18px;margin-top:16px}
  .product p{font-size:12px}
  .price{font-size:17px}
  .product-bottom{flex-direction:column;align-items:flex-start;gap:2px}
  .manifesto h2{font-size:clamp(40px,12vw,60px)}
  .cta-photos{gap:10px}
  .footer-title{font-size:clamp(52px,17vw,80px)}
}
@media(max-width:360px){.products{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{animation:none!important;transition:none!important}
}