/* ============================================================
   DOÑA CLARA — Casa de Comidas
   Sistema visual · tokens, tipografía, componentes, scroll FX
   ============================================================ */

:root{
  /* paleta de marca (no inventar otra) */
  --primary:        #00503C;   /* verde logo */
  --primary-dark:   #14503C;
  --primary-deep:   #06382B;   /* verde aún más profundo p/ degradés */
  --primary-light:  #E8F5F0;
  --accent:         #DCB478;   /* dorado terracota */
  --accent-dark:    #B8914A;
  --accent-soft:    #F0E2C8;
  --cream:          #FDF8F3;
  --card:           #FFFFFF;
  --ink:            #1A1A1A;
  --muted:          #6B7280;
  --danger:         #C0392B;
  --dark:           #141414;

  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-bounce: cubic-bezier(.34,1.56,.64,1);

  --maxw: 1200px;
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 26px;
  --shadow-card: 0 1px 2px rgba(20,30,25,.04), 0 8px 28px -12px rgba(20,40,30,.18);
  --shadow-pop: 0 24px 60px -24px rgba(6,40,30,.45);

  --font-display: "Playfair Display", Georgia, serif;
  --font-body: "Inter", system-ui, sans-serif;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--cream);
  line-height:1.55;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; }
:focus-visible{ outline:3px solid var(--accent); outline-offset:3px; border-radius:4px; }

h1,h2,h3{ font-family:var(--font-display); font-weight:600; line-height:1.05; margin:0; letter-spacing:-.01em; }
.serif-italic{ font-family:var(--font-display); font-style:italic; font-weight:500; }

.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 24px; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ---------- scroll progress bar ---------- */
.scroll-progress{
  position:fixed; top:0; left:0; height:3px; width:0%;
  background:linear-gradient(90deg,var(--accent),var(--accent-dark));
  z-index:120; transition:width .08s linear;
}

/* ---------- eyebrow + flourish + script decorator ---------- */
.eyebrow{
  font-family:var(--font-body); font-weight:600; font-size:.74rem;
  letter-spacing:.28em; text-transform:uppercase; color:var(--accent-dark);
  display:inline-flex; align-items:center; gap:.6rem;
}
.eyebrow.on-dark{ color:var(--accent); }
.flourish{ display:block; margin:14px auto 0; color:var(--accent); }
.section-head{ text-align:center; max-width:640px; margin:0 auto 52px; }
.section-head h2{ font-size:clamp(2rem,4.4vw,3.2rem); margin-top:14px; color:var(--primary); }
.section-head.on-dark h2{ color:#fff; }
.section-head p{ color:var(--muted); margin:16px 0 0; font-size:1.06rem; }
.section-head.on-dark p{ color:rgba(255,255,255,.7); }

/* Parisienne dorado — decoración de sección */
.section-script{
  display:block;
  font-family:'Parisienne', cursive;
  font-size:clamp(2rem,5vw,3rem); color:var(--accent);
  line-height:1.1; margin-bottom:6px; letter-spacing:.01em;
  text-shadow:0 2px 18px rgba(184,145,74,.22);
}
.section-script.on-dark{ color:var(--accent); }
.section-script--sm{ font-size:clamp(1.5rem,3.5vw,2.2rem); }

/* ============================================================
   NAVBAR
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:48px 76px; transition:padding .35s var(--ease-out), background .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.nav.compact{
  padding:14px 76px; background:rgba(0,80,60,.96);
  backdrop-filter:blur(14px) saturate(1.2);
  box-shadow:0 1px 0 rgba(0,0,0,.15), 0 12px 30px -22px rgba(0,0,0,.5);
}
.nav__brand{ display:flex; align-items:center; gap:12px; color:#fff; transition:color .35s; margin-right:auto; }
.nav__status{
  /* Desktop: en el flujo normal del flex del nav (nunca se superpone con
     nada, brand a la izquierda vía margin-right:auto y esto queda pegado
     antes de los links, con su propio margen). En mobile (media query más
     abajo) pasa a flotar centrado, porque ahí los links están ocultos
     detrás del burger y no hay riesgo de pisarlos. */
  display:inline-flex; align-items:center; gap:8px; height:42px; padding:0 15px; margin-right:18px;
  box-sizing:border-box; border:1px solid rgba(255,255,255,.22); border-radius:99px;
  background:rgba(255,255,255,.08); backdrop-filter:blur(6px);
  color:#fff; font-size:.8rem; font-weight:600; white-space:nowrap; flex:none;
  -webkit-appearance:none; appearance:none; font-family:inherit; cursor:pointer;
  transition:background .25s var(--ease-out), border-color .25s var(--ease-out), transform .35s var(--ease-out);
}
.nav__status:hover{ background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.4); }
.nav__status:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.nav__status[aria-expanded="true"]{ animation:status-settle .42s var(--ease-out); }
@keyframes status-settle{
  0%{ transform:scale(1); }
  45%{ transform:scale(.97); }
  100%{ transform:scale(1); }
}
.nav.compact .nav__status{ color:#fff; border-color:rgba(255,255,255,.25); background:rgba(255,255,255,.1); }
.nav.compact .nav__status:hover{ background:rgba(255,255,255,.18); }
.nav.compact .nav__brand{ color:#fff; }
.nav__logo{ height:42px; width:auto; object-fit:contain; flex:none; filter:drop-shadow(0 4px 12px rgba(0,0,0,.3)); transition:transform .35s var(--ease-out); }
.nav.compact .nav__logo{ height:42px; }
.nav__brand:hover .nav__logo{ transform:scale(1.05); }
.nav__name{ font-family:var(--font-display); font-style:italic; font-weight:700; font-size:1.32rem; line-height:1; }
.nav__name small{ display:block; font-family:var(--font-body); font-style:normal; font-weight:600; font-size:.52rem; letter-spacing:.34em; opacity:.8; margin-top:3px; }
.nav__links{ display:flex; align-items:center; gap:6px; }
.nav__links a{
  font-size:.86rem; font-weight:500; color:#fff; padding:9px 14px; border-radius:99px;
  transition:background .25s, color .25s; position:relative;
}
.nav.compact .nav__links a{ color:rgba(255,255,255,.85); }
.nav__links a:hover{ background:rgba(255,255,255,.16); }
.nav.compact .nav__links a:hover{ background:rgba(255,255,255,.15); color:#fff; }
.nav__links a.active,.nav__links a.nav__active{ color:var(--accent); }
.nav.compact .nav__links a.active,.nav.compact .nav__links a.nav__active{ color:var(--accent); background:rgba(255,255,255,.12); }
.nav__cta{
  background:var(--accent); color:var(--primary-dark)!important; font-weight:700!important;
  padding:10px 18px!important; box-shadow:0 8px 20px -8px rgba(184,145,74,.7);
}
.nav__cta:hover{ background:var(--accent-dark); transform:translateY(-1px); }
.nav__burger{ display:none; width:44px; height:44px; border-radius:12px; align-items:center; justify-content:center; color:#fff; }
.nav.compact .nav__burger{ color:#fff; }

/* Vista limpia del hero: mientras la sección hero está en pantalla, se
   ocultan el logo chico y las tres rayas del menú (sin nav de fondo, no
   hace falta el peso visual); reaparecen suave apenas empieza la segunda
   sección. El estado abierto del menú mobile siempre se respeta. */
.nav__brand, .nav__burger{ transition:opacity .4s var(--ease-out), transform .4s var(--ease-out); }
.nav.nav--in-hero .nav__brand,
.nav.nav--in-hero .nav__burger{
  opacity:0;
  transform:translateY(-8px);
  pointer-events:none;
}
.nav.nav--in-hero:has(#navLinks.open) .nav__brand,
.nav.nav--in-hero:has(#navLinks.open) .nav__burger{
  opacity:1; transform:none; pointer-events:auto;
}
@media (prefers-reduced-motion: reduce){
  .nav__brand, .nav__burger{ transition:opacity .15s linear; transform:none!important; }
}

/* ============================================================
   HERO + INTRO ANIMADA
   ============================================================ */
.hero{
  position:relative; z-index:1; min-height:100svh; display:flex; align-items:center;
  padding-top:clamp(90px,12vh,150px); padding-bottom:120px;
  /* Fondo crema: visible en las esquinas redondeadas inferiores y cuando el parallax
     desplaza las fotos dejando al descubierto el fondo. El scrim oscuro cubre el fondo
     en la parte superior, por lo que visualmente luce correcto en todo momento. */
  background:var(--cream);
}
/* Wrapper que contiene el parallax sin afectar el compositing del hero */
.hero__clip{ position:absolute; inset:0; overflow:hidden; z-index:0; }
.hero__bg{ position:absolute; inset:0; }
.hero__bg image-slot, .hero__bg .hero__fallback, .hero__bg .hero__photo{
  position:absolute; inset:0; width:100%; height:100%;
}
.hero__slider{ position:absolute; inset:0; z-index:1; }
/* La foto del hero trae su propio título/logo "horneados" en la imagen
   (arriba) y las bandejas de comida abajo. En mobile (Doñaclara-HERO.png)
   el recorte casi no toca nada porque el aspect-ratio del archivo ya está
   pensado para pantalla angosta. En PC (DC_fondo_PC.png) el hero es mucho
   más ancho que la foto, así que object-fit:cover recorta arriba/abajo —
   con el foco bajo, hacia abajo, se comía el título; subido, se ve entero. */
.hero__bg .hero__photo{ object-fit:cover; object-position:50% 42%; z-index:1; opacity:0; transition:opacity 1.6s ease; }
.hero__bg .hero__photo.is-active{ opacity:1; }
@media (min-width:761px){
  /* El logo/cartel "Doña Clara" en la foto está pegado casi al borde superior
     de la imagen original — con cualquier recorte de arriba mayor a unos
     pocos px ya se corta. Object-position en 0% ancla el tope de la imagen
     al tope del hero, así el recorte (inevitable en pantallas anchas) se
     come solo de abajo, nunca del cartel/título de arriba. */
  .hero__bg .hero__photo{ object-position:50% 0%; }
}
.hero__bg .hero__fallback{ z-index:0; }
.hero__fallback{
  background:
    radial-gradient(120% 90% at 70% 10%, rgba(220,180,120,.18), transparent 55%),
    linear-gradient(160deg,#14503C 0%, #00503C 55%, #0c3d2d 100%);
}
.hero__scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(6,40,30,.42) 0%, rgba(6,40,30,.22) 45%, rgba(6,40,30,.04) 100%),
    radial-gradient(140% 110% at 28% 40%, transparent 30%, rgba(5,35,26,.1) 100%);
}
.hero__grain{ position:absolute; inset:0; z-index:2; opacity:.09; pointer-events:none; mix-blend-mode:overlay; }
.hero__content{
  position:relative; z-index:5; width:100%;
  /* El logo flotante va más arriba, justo debajo del título que ya trae
     "horneado" la foto de fondo (que está en la mitad superior).
     OJO: usar "top" acá y NO "transform" — un transform en un ancestro
     cambia el contenedor de referencia de position:fixed en los
     descendientes, y el logo se pone position:fixed al agarrarlo para
     arrastrarlo/lanzarlo (rompía el rebote contra los bordes/el botón). */
  top:clamp(-132px,-13vh,-52px);
}
/* hero--alt sin transform — título y botones permanecen fijos al cambiar la imagen */
.hero--alt .hero__content{ transform:none; }
@media (max-width:760px){ .hero--alt .hero__content{ transform:none; } }
.hero .wrap{ display:flex; flex-direction:column; align-items:center; text-align:center; }

/* CTA anclado al fondo del hero */
.hero__cta{
  position:absolute; bottom:clamp(52px,8vh,100px);
  left:50%; transform:translateX(-50%);
  white-space:nowrap; display:flex; flex-wrap:nowrap; gap:20px;
  z-index:6;
}

.hero__status{
  display:inline-flex; align-items:center; gap:9px; padding:8px 16px 8px 12px;
  border:1px solid rgba(255,255,255,.22); border-radius:99px;
  background:rgba(255,255,255,.06); backdrop-filter:blur(6px);
  color:#fff; font-size:.82rem; font-weight:500; margin-bottom:26px;
}
.led{ width:9px; height:9px; border-radius:50%; background:#37d67a; box-shadow:0 0 0 0 rgba(55,214,122,.7); animation:led 2s infinite; flex:none; }
.led.closed{ background:#e06a5b; box-shadow:0 0 0 0 rgba(224,106,91,.6); animation:led-closed 2.5s infinite; }
@keyframes led{ 0%{ box-shadow:0 0 0 0 rgba(55,214,122,.65);} 70%{ box-shadow:0 0 0 9px rgba(55,214,122,0);} 100%{ box-shadow:0 0 0 0 rgba(55,214,122,0);} }
@keyframes led-closed{ 0%{ box-shadow:0 0 0 0 rgba(224,106,91,.65);} 70%{ box-shadow:0 0 0 9px rgba(224,106,91,0);} 100%{ box-shadow:0 0 0 0 rgba(224,106,91,0);} }

/* ===== Panel de horarios (la isla se abre) — fondo translúcido ===== */
.hours-pop{
  position:fixed; z-index:1200; min-width:248px; max-width:calc(100vw - 24px);
  padding:14px 16px 16px; box-sizing:border-box;
  background:rgba(253,248,243,.78); color:var(--ink,#063d2c);
  -webkit-backdrop-filter:blur(16px) saturate(1.2); backdrop-filter:blur(16px) saturate(1.2);
  border:1px solid rgba(220,180,120,.5); border-radius:18px;
  box-shadow:0 24px 50px -18px rgba(6,61,44,.45), 0 1px 0 rgba(255,255,255,.5) inset;
  transform-origin:top left; opacity:0; transform:translateY(-8px) scale(.94);
  transition:opacity .22s var(--ease-out), transform .26s var(--ease-out);
  pointer-events:none;
}
.hours-pop.open{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
.hours-pop::before{
  content:""; position:absolute; top:-7px; left:var(--arrow-x,24px); transform:translateX(-50%) rotate(45deg);
  width:13px; height:13px; background:rgba(253,248,243,.78);
  -webkit-backdrop-filter:blur(16px) saturate(1.2); backdrop-filter:blur(16px) saturate(1.2);
  border-left:1px solid rgba(220,180,120,.5); border-top:1px solid rgba(220,180,120,.5);
  border-top-left-radius:3px;
}
.hours-pop__live{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  font-family:var(--font-display,"Playfair Display",serif); font-size:1.02rem; font-weight:700;
  color:#00503C; padding-bottom:11px; margin-bottom:10px;
  border-bottom:1px solid rgba(220,180,120,.35);
}
.hours-pop__live .led{ width:8px; height:8px; }
.hours-pop__live-sub{ font-family:var(--font-body,inherit); font-weight:600; font-size:.82rem; color:#5f7268; }
.hours-pop__list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; }
.hours-pop__row{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  padding:7px 10px; border-radius:10px; font-size:.86rem;
}
.hours-pop__day{ font-weight:600; color:#063d2c; display:inline-flex; align-items:center; gap:7px; white-space:nowrap; }
.hours-pop__slots{ color:#33473d; font-variant-numeric:tabular-nums; text-align:right; }
.hours-pop__today{
  font-size:.6rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:#7a5a16; background:rgba(220,180,120,.32); padding:2px 7px; border-radius:99px;
}
.hours-pop__row--today{ background:rgba(220,180,120,.22); box-shadow:inset 3px 0 0 var(--accent,#DCB478); }
.hours-pop__row--closed{ opacity:.5; }
.hours-pop__row--closed .hours-pop__slots{ font-style:italic; }
/* entrada en cascada de las filas */
.hours-pop.open .hours-pop__row{ animation:hours-row-in .34s var(--ease-out) backwards; }
.hours-pop.open .hours-pop__row:nth-child(1){ animation-delay:.05s; }
.hours-pop.open .hours-pop__row:nth-child(2){ animation-delay:.09s; }
.hours-pop.open .hours-pop__row:nth-child(3){ animation-delay:.13s; }
.hours-pop.open .hours-pop__row:nth-child(4){ animation-delay:.17s; }
@keyframes hours-row-in{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:translateY(0); } }
@media (prefers-reduced-motion: reduce){
  .hours-pop{ transition:opacity .12s linear; transform:none; }
  .hours-pop.open{ transform:none; }
  .hours-pop.open .hours-pop__row{ animation:none; }
  .nav__status[aria-expanded="true"]{ animation:none; }
}

.hero__eyebrow{ color:var(--accent); font-weight:600; letter-spacing:.3em; text-transform:uppercase; font-size:.76rem; margin-bottom:18px; }

/* wordmark letter-by-letter */
.wordmark{ font-family:var(--font-display); font-style:italic; font-weight:700; color:#fff;
  font-size:clamp(2.7rem,8.4vw,7.6rem); line-height:.95; margin:0 0 clamp(80px,16vh,160px); letter-spacing:-.02em;
  display:flex; flex-wrap:nowrap; align-items:baseline; gap:0 .3em; white-space:nowrap;
  text-shadow:0 0 40px rgba(255,255,255,.18), 0 4px 24px rgba(0,0,0,.7), 0 8px 48px rgba(0,0,0,.5); }
.wordmark .line{ display:inline-block; overflow:hidden; border-bottom:none; padding:0; background:none; border:none; box-shadow:none; }
.wordmark .ch{ display:inline-block; }
.wordmark .ch.space{ width:.28em; }
.wordmark .accent{ color:var(--accent); }
.hero__logo-wrap{
  position:relative;
  margin:0 0 22px;
  display:inline-block;
  isolation:isolate;
}
.hero__logo-wrap::after{
  /* Sombra de "piso" que crece/encoge en contrafase con el flote del logo —
     el truco clásico que hace que un elemento se sienta realmente flotando. */
  content:"";
  position:absolute; left:50%; bottom:-6px; z-index:-1;
  width:58%; height:16px; border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(0,0,0,.4), transparent 72%);
  transform:translateX(-50%);
  animation:dc-hero-logo-shadow 4.8s ease-in-out infinite;
}
.hero__logo{
  display:block; width:clamp(100px,11vw,160px); height:auto;
  filter:drop-shadow(0 18px 30px rgba(0,0,0,.5)) drop-shadow(0 0 0 rgba(220,180,120,0));
  animation:dc-hero-logo-float 4.8s ease-in-out infinite;
  transition:filter .55s cubic-bezier(.34,1.56,.64,1), transform .55s cubic-bezier(.34,1.56,.64,1);
  will-change:transform;
  cursor:grab;
  -webkit-user-drag:none;
  user-select:none;
}
.hero__logo-wrap:hover .hero__logo{
  animation-play-state:paused;
  transform:translateY(-10px) scale(1.1) rotate(-3deg);
  filter:drop-shadow(0 26px 42px rgba(0,0,0,.55)) drop-shadow(0 0 38px rgba(220,180,120,.6));
}
.hero__logo-wrap:hover::after{ animation-play-state:paused; }
@keyframes dc-hero-logo-float{
  0%,100%{ transform:translateY(0) rotate(0deg); }
  50%{ transform:translateY(-12px) rotate(-1.4deg); }
}
@keyframes dc-hero-logo-shadow{
  0%,100%{ transform:translateX(-50%) scale(1); opacity:.5; }
  50%{ transform:translateX(-50%) scale(.7); opacity:.28; }
}
@media (prefers-reduced-motion: reduce){
  .hero__logo{ animation:none; }
  .hero__logo-wrap::after{ animation:none; }
}

/* ── Logo arrastrable: agarrar, lanzar y rebotar (pointer + física) ── */
#heroLogo{ touch-action:none; }
#heroLogo.is-flying{ transition:none; }
#heroLogo.is-flying .hero__logo{ animation-play-state:paused; cursor:grabbing; }
#heroLogo.is-flying::after{ animation-play-state:paused; }

/* Globito de diálogo — aparece cada 5 tiradas, cuando el logo vuelve a
   quedar quieto. Clickeable: manda directo a hacer el pedido. */
.hero__logo-bubble{
  position:absolute;
  bottom:calc(100% + 16px);
  left:50%;
  width:max-content; max-width:min(230px,72vw);
  text-align:center;
  background:#fdf8f3;
  color:#073527;
  font-family:var(--font-body);
  font-weight:600;
  font-size:.86rem;
  line-height:1.3;
  padding:11px 16px;
  border-radius:16px;
  box-shadow:0 16px 34px -12px rgba(0,0,0,.5);
  cursor:pointer;
  z-index:20;
  opacity:0;
  transform:translate(-50%, 8px) scale(.9);
  transition:opacity .32s cubic-bezier(.34,1.56,.64,1), transform .32s cubic-bezier(.34,1.56,.64,1);
  pointer-events:none;
}
.hero__logo-bubble::after{
  content:"";
  position:absolute; top:100%; left:50%; transform:translateX(-50%);
  border:8px solid transparent;
  border-top-color:#fdf8f3;
}
.hero__logo-bubble.show{
  opacity:1;
  transform:translate(-50%, 0) scale(1);
  pointer-events:auto;
}

.hero__sub{ display:flex; align-items:center; gap:14px; margin:8px 0 22px; }
.hero__sub .tag{ font-family:var(--font-body); font-weight:600; letter-spacing:.34em; text-transform:uppercase; font-size:.72rem; color:rgba(255,255,255,.78); }
.hero__sub .rule{ height:1px; width:54px; background:linear-gradient(90deg,var(--accent),transparent); }

.hero__lede{ color:rgba(255,255,255,.82); font-size:clamp(1.05rem,1.6vw,1.32rem); max-width:480px; margin:26px auto 30px; }
.hero__lede em{ color:var(--accent-soft); }

.hero__cta{ display:flex; flex-wrap:wrap; gap:20px; margin-top:0; justify-content:center; }

.btn{
  display:inline-flex; align-items:center; gap:10px; font-weight:600; font-size:.98rem;
  padding:15px 24px; border-radius:99px; transition:transform .25s var(--ease-out), background .25s, box-shadow .25s, color .25s;
}
.btn svg{ transition:transform .25s var(--ease-out); vertical-align:middle; display:block; }
.btn [data-ic]{ display:inline-flex; align-items:center; line-height:1; }
.btn:hover{ transform:translateY(-2px); }
.btn:hover svg{ transform:translateX(6px); }
.btn--gold{ background:var(--accent); color:var(--primary-dark); box-shadow:0 14px 30px -12px rgba(184,145,74,.8); }
.btn--gold:hover{ background:#e7c690; }
.btn--ghost{ border:1.5px solid rgba(255,255,255,.4); color:#fff; }
.btn--ghost:hover{ background:rgba(255,255,255,.12); border-color:#fff; }

/* "Prendido" del botón Pedir Ahora cuando el logo lo golpea al rebotar —
   se rellena sólido con glow/neon que irradia desde el punto exacto del
   golpe (--hit-x) y se apaga solo, volviendo al estilo ghost normal. */
.hero-btn-pedir{ position:relative; --hit-x:50%; }
.hero-btn-pedir::before{
  content:"";
  position:absolute; left:var(--hit-x); top:50%;
  width:0; height:0; border-radius:50%;
  background:radial-gradient(circle, rgba(255,227,168,.95), rgba(220,180,120,0) 70%);
  transform:translate(-50%,-50%);
  opacity:0;
  pointer-events:none;
}
.hero-btn-pedir.cta-hit::before{ animation:dc-cta-shock 750ms ease-out; }
.hero-btn-pedir.cta-hit{ animation:dc-cta-ignite 750ms ease-out; }
@keyframes dc-cta-ignite{
  0%{
    background:transparent; border-color:rgba(255,255,255,.4); color:#fff;
    box-shadow:0 0 0 rgba(220,180,120,0);
  }
  28%{
    background:radial-gradient(circle at var(--hit-x) 50%, #ffe9c2 0%, #DCB478 45%, #c9a05a 100%);
    border-color:#ffe9c2; color:#01140e;
    box-shadow:0 0 0 6px rgba(220,180,120,.28), 0 0 44px 10px rgba(220,180,120,.9), 0 0 90px 26px rgba(220,180,120,.5);
  }
  100%{
    background:transparent; border-color:rgba(255,255,255,.4); color:#fff;
    box-shadow:0 0 0 rgba(220,180,120,0);
  }
}
@keyframes dc-cta-shock{
  0%{ width:0; height:0; opacity:.95; }
  100%{ width:240px; height:240px; opacity:0; }
}
@media (prefers-reduced-motion: reduce){
  .hero-btn-pedir.cta-hit{ animation:none; }
  .hero-btn-pedir.cta-hit::before{ animation:none; }
}
.btn--outline-white{ border:2px solid rgba(255,255,255,.55); color:#fff; background:transparent; }
.btn--outline-white:hover{ background:rgba(255,255,255,.1); border-color:#fff; }
.btn--green{ background:var(--primary); color:#fff; box-shadow:0 14px 30px -12px rgba(0,80,60,.6); }
.btn--green:hover{ background:var(--primary-dark); }

/* wrapper de altura cero exactamente en la costura hero/sección */
.section-seam{
  position:relative; height:0; z-index:20;
}
/* Cuando el seam vive dentro del hero, lo anclamos al fondo del hero */
.hero__seam{
  position:absolute; bottom:24px; left:0; width:100%;
}
/* scroll cue — centrado sobre la línea de corte */
.scroll-cue{
  position:absolute; left:50%; top:0;
  transform:translate(-50%, -50%);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  font-size:.66rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--primary);
  pointer-events:none;
  white-space:nowrap;
}
/* Dentro del hero el cue queda completamente por encima del fondo del hero */
.hero__seam .scroll-cue{
  top:0;
  transform:translate(-50%, -100%);
}
.scroll-cue .track{ width:22px; height:36px; border:2px solid rgba(0,80,60,.35); border-radius:99px; position:relative; }
.scroll-cue .track::after{ content:""; position:absolute; top:6px; left:50%; width:4px; height:7px; border-radius:99px; background:var(--primary); transform:translateX(-50%); animation:cue 1.7s var(--ease-out) infinite; }
@keyframes cue{ 0%{opacity:0; transform:translate(-50%,0);} 30%{opacity:1;} 100%{opacity:0; transform:translate(-50%,12px);} }

/* hero intro: WAAPI-driven in app.js; content visible by default */

/* ============================================================
   MENÚ DEL DÍA
   ============================================================ */
.dia{
  position:relative; z-index:2;
  margin-top:-72px; padding:104px 0 90px;
  border-radius:38px 38px 0 0;
  box-shadow:0 -22px 50px -22px rgba(6,40,30,.5);
  background:
    radial-gradient(ellipse 70% 40% at 50% -5%, rgba(0,80,60,.07) 0%, transparent 60%),
    radial-gradient(ellipse 35% 25% at 95% 85%, rgba(220,180,120,.09) 0%, transparent 55%),
    radial-gradient(ellipse 25% 20% at 5% 90%, rgba(0,80,60,.05) 0%, transparent 50%),
    var(--cream);
}
@media (max-width:760px){ .dia{ margin-top:-48px; padding:80px 0 70px; border-radius:28px 28px 0 0; } }
.dia__head{
  display:flex; flex-direction:column; align-items:center;
  text-align:center; gap:20px; margin-bottom:36px;
}
.dia__star{ display:inline-flex; align-items:center; gap:8px; background:var(--primary-light); color:var(--primary); font-weight:700; font-size:.8rem; padding:7px 14px; border-radius:99px; letter-spacing:.04em; }
.dia__title{ font-size:clamp(1.9rem,4vw,3rem); color:var(--primary); margin-top:14px; }
.dia__title span{ color:var(--accent-dark); font-style:italic; }
.days{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
.day-pill{ padding:9px 16px; border-radius:99px; border:1.5px solid #e7ded2; background:#fff; color:var(--muted); font-weight:600; font-size:.86rem; transition:all .2s; }
.day-pill:hover{ border-color:var(--accent); color:var(--accent-dark); }
.day-pill.active{ background:var(--primary); color:#fff; border-color:var(--primary); }
.day-pill:disabled,.day-pill.inactive{ opacity:.32; cursor:not-allowed; pointer-events:none; }
.day-pill:disabled:hover,.day-pill.inactive:hover{ border-color:#e7ded2; color:var(--muted); }
.dia__grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(252px,1fr)); gap:16px; }

/* Diferenciación visual de la sección menú del día en catálogo */
.cat-dia{
  background:
    radial-gradient(ellipse 80% 60% at 50% -10%, rgba(0,80,60,.09) 0%, transparent 65%),
    linear-gradient(180deg, #EDF5F0 0%, var(--cream) 60%);
  border-radius:0;
  border-top:3px solid rgba(0,80,60,.18);
  border-bottom:3px solid rgba(0,80,60,.18);
  box-shadow:0 8px 40px -12px rgba(0,80,60,.1), 0 -8px 40px -12px rgba(0,80,60,.1);
  margin-top:0;
  padding:80px 0 72px;
}

/* ============================================================
   LA CARTA — categorías + nav
   ============================================================ */
.carta{
  position:relative; z-index:1; padding:80px 0 120px;
  background:
    radial-gradient(58% 46% at 50% 2%, rgba(0,80,60,.07), transparent 60%),
    radial-gradient(42% 32% at 90% 10%, rgba(220,180,120,.12), transparent 60%),
    linear-gradient(180deg,#fff 0%, var(--cream) 55%, #f3ebdf 100%);
}
.catnav{ position:sticky; top:64px; z-index:60; padding:10px 0; margin-bottom:28px; display:flex; justify-content:center; }
.catnav__inner{ display:flex; gap:8px; overflow-x:auto; padding:8px; background:rgba(255,255,255,.82); backdrop-filter:blur(12px); border:1px solid #efe7da; border-radius:99px; box-shadow:var(--shadow-card); scrollbar-width:none; width:fit-content; max-width:100%; }
.catnav__inner::-webkit-scrollbar{ display:none; }
.catnav a{ white-space:nowrap; padding:9px 16px; border-radius:99px; font-weight:600; font-size:.86rem; color:var(--muted); transition:all .2s; flex:none; }
.catnav a:hover{ color:var(--primary); background:var(--primary-light); }
.catnav a.active{ background:var(--primary); color:var(--accent); }

.cat{ scroll-margin-top:130px; padding-top:34px; }
.cat__head{ display:flex; align-items:center; gap:18px; margin-bottom:24px; cursor:pointer; user-select:none; transition:margin-bottom .42s var(--ease-out); }
.cat__head:focus-visible{ outline:2px solid var(--primary); outline-offset:6px; border-radius:8px; }
.cat__cta{ flex:none; display:inline-flex; align-items:center; gap:9px; padding:9px 16px; border-radius:99px; background:var(--primary-light); color:var(--primary); font-weight:700; font-size:.82rem; transition:background .22s, color .22s; }
.cat__toggle::after{ content:"Ver platos"; }
.cat:not(.collapsed) .cat__toggle::after{ content:"Ocultar"; }
.cat__head:hover .cat__cta, .cat__head:focus-visible .cat__cta{ background:var(--primary); color:#fff; }
.cat__chevron{ flex:none; width:9px; height:9px; border-right:2.5px solid currentColor; border-bottom:2.5px solid currentColor; transform:rotate(225deg); transition:transform .35s var(--ease-out); margin-top:-3px; }
.cat.collapsed .cat__chevron{ transform:rotate(45deg); margin-top:0; }
/* Toggle instantáneo de altura (el "wow" lo dan las cards escalonadas); así el
   anti-salto del scroll-scan es exacto: el rect refleja el estado final al toque. */
/* Panel colapsable con animación de altura suave (grid-template-rows 1fr↔0fr) */
.cat__panel{ display:grid; grid-template-rows:1fr; transition:grid-template-rows .42s var(--ease-out); }
.cat.collapsed .cat__panel{ grid-template-rows:0fr; }
.cat__panel > .grid{ overflow:hidden; min-height:0; transition:opacity .35s ease; }
.cat.collapsed .cat__panel > .grid{ opacity:0; }

/* Entrada escalonada de las cards al abrir una categoría (efecto escaneo) */
/* Scale Reveal (patrón scroll-storyteller): pop con back-out easing al abrir categoría */
@keyframes scan-card{ from{ opacity:0; transform:translateY(18px) scale(.94); } to{ opacity:1; transform:none; } }
.cat.just-opened .grid > *{ animation:scan-card .55s var(--ease-bounce) both; will-change:transform, opacity; }
.cat.just-opened .grid > *:nth-child(1){ animation-delay:.03s; }
.cat.just-opened .grid > *:nth-child(2){ animation-delay:.08s; }
.cat.just-opened .grid > *:nth-child(3){ animation-delay:.13s; }
.cat.just-opened .grid > *:nth-child(4){ animation-delay:.18s; }
.cat.just-opened .grid > *:nth-child(5){ animation-delay:.23s; }
.cat.just-opened .grid > *:nth-child(6){ animation-delay:.28s; }
.cat.just-opened .grid > *:nth-child(n+7){ animation-delay:.33s; }
.cat.collapsed .cat__head{ margin-bottom:0; }
.cat{ padding-bottom:8px; transition:padding-bottom .4s ease; }
.carta .section-head h2{ font-size:clamp(2rem,4.4vw,3.2rem); }
.cat__num{ display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; flex:none; border-radius:50%; background:var(--primary); color:#fff; font-family:var(--font-display); font-style:italic; font-weight:700; font-size:1rem; box-shadow:0 8px 18px -8px rgba(0,80,60,.6); transition:box-shadow .4s var(--ease-out), transform .4s var(--ease-out); }
.cat__titlewrap{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.cat__title{ font-size:clamp(1.6rem,3.4vw,2.4rem); color:var(--primary); line-height:1.05; }
.cat__rule{ flex:1; height:1px; background:linear-gradient(90deg,#e7ded2,transparent); }
.cat__note{ font-size:.84rem; color:var(--muted); }

/* Categoría activa (scroll-scan): número con glow dorado */
.cat.is-active .cat__num{ box-shadow:0 0 0 4px rgba(220,180,120,.28), 0 10px 22px -8px rgba(0,80,60,.65); transform:scale(1.04); }
.cat.is-active .cat__cta{ background:var(--primary); color:#fff; }

.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:20px;
}
/* Cards igual-altura: .reveal (grid item) como flex column → .dish llena la altura completa */
.grid > .reveal{ display:flex; flex-direction:column; }
.grid > .reveal > .dish{ flex:1; }

/* ---- dish card con imagen ---- */
.dish{
  position:relative; display:flex; flex-direction:column; overflow:hidden;
  background:var(--card); border-radius:var(--r-lg);
  box-shadow:0 2px 12px rgba(20,80,60,.07), 0 0 0 1px rgba(0,80,60,.06);
  transition:transform .35s var(--ease-out), box-shadow .35s;
}
.dish:hover{ transform:translateY(-6px); box-shadow:0 22px 44px -18px rgba(20,80,60,.32), 0 0 0 1px rgba(220,180,120,.3); }

/* Imagen */
.dish__fig{
  /* Reset browser default figure margin (1em 40px) que desplazaba la imagen */
  margin:0; padding:0; display:block;
  width:100%; aspect-ratio:4/3; overflow:hidden; flex:none;
  background:linear-gradient(135deg, var(--primary-light) 0%, #e2efe8 100%);
  position:relative;
}
.dish__fig img{
  width:100%; height:100%; object-fit:cover; display:block;
  object-position:center 30%; /* muestra más del plato en la parte superior */
  transition:transform .5s var(--ease-out);
}
.dish:hover .dish__fig img{ transform:scale(1.07); }
.dish__fig.no-img{ background:linear-gradient(135deg,var(--primary-light),var(--accent-soft)); }

/* Color-only fallback (sin imagen) */
.dish__fig--color{
  width:100%; aspect-ratio:4/3; flex:none;
  background:linear-gradient(135deg,var(--primary-light) 0%,var(--accent-soft) 100%);
}

/* Cuerpo */
.dish__body{ display:flex; flex-direction:column; flex:1; padding:16px 18px 18px; }
.dish__top{ flex:1; }
.dish__tags{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:6px; }
.dish__name{ font-weight:700; font-size:1rem; color:var(--ink); line-height:1.3; }
.dish__desc{ color:var(--muted); font-size:.84rem; margin:6px 0 0; line-height:1.55; }
.dish__pasta-hint{
  display:inline-flex; align-items:center; gap:5px;
  font-size:.75rem; font-weight:600; color:var(--primary); margin-top:8px;
  background:var(--primary-light); padding:4px 10px; border-radius:99px;
}
.dish__foot{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:14px; }
.dish__price{ font-family:var(--font-body); font-weight:700; color:var(--accent-dark); font-size:1.05rem; line-height:1.1; }
.dish__price small{ display:block; font-weight:400; color:var(--muted); font-size:.68rem; margin-top:1px; }
.tag-sig{ font-size:.62rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--primary); background:var(--primary-light); padding:3px 8px; border-radius:99px; white-space:nowrap; }
.tag-out{ font-size:.62rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#fff; background:var(--danger); padding:3px 9px; border-radius:99px; }

/* ---- MODAL SALSAS — wow edition ---- */
.salsa-modal{
  position:fixed; inset:0; z-index:500;
  display:flex; align-items:flex-end; justify-content:center;
  pointer-events:none; opacity:0;
  transition:opacity .32s var(--ease-out);
}
.salsa-modal.open{ pointer-events:all; opacity:1; }

.salsa-modal__scrim{
  position:absolute; inset:0;
  background:rgba(0,15,10,.82);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

.salsa-modal__panel{
  position:relative; z-index:1;
  width:100%; max-width:540px;
  background:#FDF8F0;
  border-radius:32px 32px 0 0;
  overflow:hidden;
  display:flex; flex-direction:column; max-height:92vh;
  transform:translateY(100%);
  transition:transform .42s cubic-bezier(.16,1,.3,1);
  box-shadow:0 -24px 80px rgba(0,0,0,.38);
}
.salsa-modal.open .salsa-modal__panel{ transform:translateY(0); }

/* Drag pill — ahora vive dentro del hero (sobre el verde) */
.salsa-modal__pill{
  width:40px; height:4px; border-radius:99px;
  background:rgba(255,255,255,.3); margin:12px auto 0;
  display:block;
}

/* ── Header verde con Parisienne dorado ── */
.salsa-modal__hero{
  position:relative; overflow:hidden; flex:none;
  background:linear-gradient(145deg, #00503C 0%, #063d2c 100%);
  padding:0 24px 26px;
  border-radius:32px 32px 0 0;
}
.salsa-modal__hero::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse 80% 90% at 5% 60%, rgba(220,180,120,.16) 0%, transparent 55%),
    radial-gradient(ellipse 55% 55% at 95% 10%, rgba(0,130,80,.3) 0%, transparent 52%),
    radial-gradient(ellipse 40% 40% at 50% 110%, rgba(0,0,0,.35) 0%, transparent 60%);
}
/* Comilla decorativa gigante */
.salsa-modal__hero::after{
  content:"\201C";
  position:absolute; top:-14px; right:20px;
  font-family:'Parisienne', cursive;
  font-size:9rem; line-height:1;
  color:rgba(220,180,120,.10);
  pointer-events:none; user-select:none;
}
.salsa-modal__script{
  font-family:'Parisienne', cursive;
  font-size:1.6rem; color:var(--accent);
  line-height:1.1; display:block; margin-bottom:2px;
  position:relative; z-index:1;
  text-shadow:0 2px 14px rgba(0,0,0,.28);
  letter-spacing:.01em;
}
.salsa-modal__item-name{
  font-family:var(--font-display); font-size:1.55rem; font-weight:700;
  color:#fff; line-height:1.15; position:relative; z-index:1;
}
.salsa-modal__subtitle{
  font-size:.8rem; color:rgba(255,255,255,.58);
  margin-top:5px; position:relative; z-index:1; letter-spacing:.03em;
}
.salsa-modal__close{
  position:absolute; top:16px; right:18px; z-index:2;
  width:34px; height:34px; border-radius:50%;
  background:rgba(255,255,255,.12); color:#fff;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,.18); cursor:pointer;
  transition:background .2s, transform .2s;
}
.salsa-modal__close:hover{ background:rgba(255,255,255,.26); transform:scale(1.08); }

/* ── Lista de opciones ── */
.salsa-modal__body{
  overflow-y:auto; flex:1;
  padding:18px 18px 4px;
  scrollbar-width:thin; scrollbar-color:rgba(0,80,60,.15) transparent;
}
.salsa-modal__options{ display:flex; flex-direction:column; gap:9px; }

.salsa-opt{
  display:flex; align-items:center; gap:13px;
  padding:13px 16px; border-radius:16px;
  border:2px solid #EDE8E0; background:#fff;
  cursor:pointer; text-align:left; width:100%;
  transition:border-color .22s, background .22s, transform .18s, box-shadow .22s;
  position:relative; overflow:hidden;
}
/* shimmer de selección */
.salsa-opt::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(135deg,rgba(0,80,60,.06) 0%,rgba(220,180,120,.08) 100%);
  opacity:0; transition:opacity .22s;
}
.salsa-opt:hover{ border-color:rgba(0,80,60,.28); transform:translateX(3px); box-shadow:0 4px 16px rgba(0,80,60,.08); }
.salsa-opt:hover::before{ opacity:1; }
.salsa-opt.selected{
  border-color:var(--primary);
  background:linear-gradient(135deg,#e8f5ef 0%,#f3fbf7 100%);
  box-shadow:0 4px 22px rgba(0,80,60,.13);
}
.salsa-opt.selected::before{ opacity:1; }

/* Checkbox circular */
.salsa-opt__check{
  flex:none; width:24px; height:24px; border-radius:50%;
  border:2px solid #ccc; background:#fff;
  display:flex; align-items:center; justify-content:center;
  transition:border-color .2s, background .2s, transform .25s var(--ease-bounce);
  position:relative; z-index:1;
}
.salsa-opt.selected .salsa-opt__check{
  background:var(--primary); border-color:var(--primary);
  transform:scale(1.1);
}
.salsa-opt__check svg{ opacity:0; transition:opacity .18s; }
.salsa-opt.selected .salsa-opt__check svg{ opacity:1; }

.salsa-opt__emoji{
  font-size:1.9rem; flex:none; line-height:1;
  position:relative; z-index:1;
  transition:transform .3s var(--ease-bounce);
}
.salsa-opt:hover .salsa-opt__emoji, .salsa-opt.selected .salsa-opt__emoji{ transform:scale(1.15); }

.salsa-opt__info{ flex:1; min-width:0; position:relative; z-index:1; }
.salsa-opt__name{ font-weight:700; color:var(--ink); font-size:.95rem; line-height:1.2; }
.salsa-opt__desc{ color:var(--muted); font-size:.79rem; margin-top:2px; }
.salsa-opt__price{
  font-weight:700; color:var(--accent-dark); font-size:.88rem;
  white-space:nowrap; flex:none; position:relative; z-index:1;
  background:var(--accent-soft); border-radius:99px;
  padding:3px 10px;
}

/* ── Footer con botón confirmar ── */
.salsa-modal__foot{
  flex:none; padding:14px 18px 28px;
  border-top:1px solid rgba(0,0,0,.07);
  background:#FDF8F0;
}
.salsa-modal__selection{
  font-size:.82rem; color:var(--muted);
  min-height:1.3em; margin-bottom:12px;
  transition:color .2s;
}
.salsa-modal__selection b{ color:var(--primary); }
.salsa-modal__selection em{
  font-family:'Parisienne', cursive;
  font-size:1.05rem; color:var(--accent);
  font-style:normal; letter-spacing:.02em;
}

.salsa-modal__confirm{
  width:100%; padding:15px 24px;
  border-radius:99px; border:none; cursor:pointer;
  background:linear-gradient(135deg,#00503C 0%,#00724F 100%);
  color:#fff; font-weight:700; font-size:1rem; letter-spacing:.01em;
  display:flex; align-items:center; justify-content:center; gap:10px;
  transition:transform .25s var(--ease-bounce), box-shadow .25s, opacity .2s, background .25s;
  box-shadow:0 8px 28px -8px rgba(0,80,60,.55);
  position:relative; overflow:hidden;
}
.salsa-modal__confirm::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.08) 50%,transparent 100%);
  transform:translateX(-100%); transition:transform .55s ease;
}
.salsa-modal__confirm:hover:not(:disabled)::before{ transform:translateX(100%); }
.salsa-modal__confirm:hover:not(:disabled){
  transform:translateY(-2px);
  box-shadow:0 14px 36px -10px rgba(0,80,60,.65);
}
.salsa-modal__confirm:active:not(:disabled){ transform:scale(.97); }
.salsa-modal__confirm:disabled{
  background:#c9bfae; box-shadow:none; cursor:not-allowed;
}

@media (min-width:600px){
  .salsa-modal{ align-items:center; }
  .salsa-modal__panel{ border-radius:28px; }
  .salsa-modal__pill{ display:none; }
}

/* ============================================================
   DESTACADOS — CARRUSEL HOME
   ============================================================ */
.destacados{
  padding:48px 0 0; background:var(--cream);
  position:relative; z-index:3;
  margin-top:0;
}
/* mobile: no changes needed */
.destacados .section-head{ margin-bottom:48px; }
.destacados .section-head p{ color:var(--muted); max-width:52ch; margin:12px auto 0; }

.dest-track-wrap{
  overflow:hidden;
  padding:12px 0 32px;
  /* permite que el track se extienda más allá del wrap */
  width:100%;
}
.dest-track{
  display:flex;
  gap:22px;
  padding:0 max(24px, calc((100vw - 1280px)/2 + 24px));
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  cursor:grab;
  user-select:none;
}
.dest-track::-webkit-scrollbar{ display:none; }
.dest-track.is-dragging{ cursor:grabbing; scroll-snap-type:none; }

.dest-card{
  flex:none;
  width:300px;
  scroll-snap-align:start;
  background:var(--bg-card);
  border-radius:20px;
  overflow:hidden;
  box-shadow:var(--shadow-card);
  border:1px solid #efe7da;
  transition:transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
  text-decoration:none;
  color:inherit;
  display:flex;
  flex-direction:column;
}
.dest-card:hover{ transform:translateY(-6px); box-shadow:0 20px 48px -12px rgba(0,0,0,.16); }
.dest-card__fig{
  width:100%; height:200px; overflow:hidden; flex:none; cursor:zoom-in;
  position:relative;
}
.dest-card__fig::after{
  content:''; position:absolute; top:10px; left:10px; z-index:3;
  width:34px; height:34px;
  background:url('/assets/img/logodc.png') center/contain no-repeat;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.55));
  pointer-events:none;
}
.dest-card__fig img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .45s var(--ease-out);
}
.dest-card:hover .dest-card__fig img{ transform:scale(1.05); }
.dest-card__fig--color{ width:100%; height:200px; background:linear-gradient(135deg,#e8f5ef,#d4ede3); }
.dest-card__body{ padding:18px 20px 20px; display:flex; flex-direction:column; flex:1; }
.dest-card__cat{ font-size:.68rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--primary); margin-bottom:6px; }
.dest-card__name{ font-family:var(--font-display); font-size:1.15rem; font-weight:700; color:var(--ink); line-height:1.25; margin-bottom:6px; }
.dest-card__desc{ font-size:.82rem; color:var(--muted); line-height:1.5; flex:1; }
.dest-card__foot{ display:flex; align-items:center; justify-content:space-between; margin-top:14px; }
.dest-card__price{ font-size:1.05rem; font-weight:800; color:var(--accent-dark); }
.dest-card__cta{
  font-size:.78rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--primary); opacity:.75;
  transition:opacity .2s;
}
.dest-card:hover .dest-card__cta{ opacity:1; }

.dest-cta{ display:flex; flex-direction:column; align-items:center; gap:14px; padding:40px 0 100px; text-align:center; }
.dest-cta__btn{ font-size:1.05rem; padding:16px 36px; display:inline-flex; align-items:center; gap:10px; }
.dest-cta__sub{ font-size:.82rem; color:var(--muted); letter-spacing:.04em; }

/* ============================================================
   RESEÑAS DE GOOGLE
   ============================================================ */
.resenas{
  position:relative; z-index:2;
  margin-top:-50px;
  border-radius:44px 44px 0 0;
  padding:72px 0 96px; color:#fff;
  overflow:hidden; isolation:isolate;
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%, rgba(220,180,120,.10) 0%, transparent 55%),
    linear-gradient(160deg,#0c3d2d 0%, #00503C 55%, #06382b 100%);
  box-shadow:0 -20px 60px rgba(0,0,0,.35);
}
/* Pill border highlight */
.resenas::before{
  content:"";
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:80px; height:3px; border-radius:0 0 99px 99px;
  background:linear-gradient(90deg, transparent, var(--accent), transparent);
  pointer-events:none; z-index:1;
}
.resenas .wrap{ position:relative; z-index:1; }
.resenas__head{ text-align:center; max-width:680px; margin:0 auto 44px; }
.gbadge{ display:inline-flex; align-items:center; gap:12px; background:rgba(255,255,255,.96); border-radius:99px; padding:10px 20px 10px 14px; box-shadow:0 16px 34px -14px rgba(0,0,0,.55); margin-bottom:24px; }
.gbadge__txt{ text-align:left; line-height:1.1; }
.gbadge__score{ font-family:var(--font-display); font-weight:700; font-size:1.5rem; color:#1a1a1a; display:flex; align-items:center; gap:8px; }
.gstars{ color:#FBBC05; font-size:1rem; letter-spacing:1px; }
.gbadge__count{ font-size:.8rem; color:#5f6368; font-weight:600; }
.resenas .dia__title{ color:#fff; }
.resenas .dia__title span{ color:var(--accent); font-style:italic; }
.resenas__sub{ color:rgba(255,255,255,.82); margin-top:14px; font-size:1.05rem; }
.resenas__chips{
  display:flex; flex-wrap:wrap; gap:8px;
  justify-content:center; align-items:center;
  margin-top:28px; max-width:560px; margin-left:auto; margin-right:auto;
}
.rchip{
  display:inline-flex; align-items:center; gap:5px;
  font-size:.78rem; font-weight:600; color:rgba(255,255,255,.9);
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18);
  padding:7px 14px 7px 10px; border-radius:99px;
  line-height:1; white-space:nowrap;
  backdrop-filter:blur(4px);
  transition:background .2s, border-color .2s;
}
.rchip:hover{ background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.35); }
.rchip .rstar{ color:#DCB478; font-size:.82rem; line-height:1; flex-shrink:0; }

/* ---- Card Stack (style: CodePen shshaw/KzYXvP) ---- */
.rstack-wrap{ position:relative; max-width:520px; margin:0 auto; padding-top:28px; }

.rstack{
  position:relative;
  list-style:none;
  padding:0; margin:0;
}

/* Every card sits absolutely stacked at the same origin */
.rcard{
  position:absolute;
  top:0; left:0; right:0;
  z-index:2;
  background:#fff;
  border-radius:20px;
  padding:28px 28px 24px;
  box-shadow:0 8px 30px rgba(0,0,0,.22);
  transition:transform .6s cubic-bezier(.8,.2,.1,.8) .1s, box-shadow .4s linear;
  cursor:pointer;
  user-select:none;
  overflow:hidden;
  text-align:left;
}

/* Cards inactivas (ni current, ni next, ni animándose) se ocultan
   para que no tapen los dots/botones de abajo */
.rstack .rcard:not(.rcard--current):not(.rcard--next):not(.rcard--out){
  display:none;
}

/* Decorative quote mark */
.rcard::before{ content:"\201C"; position:absolute; top:2px; right:16px; font-family:var(--font-display); font-size:5.2rem; line-height:1; color:var(--accent); opacity:.12; pointer-events:none; }

/* "Next" card peeks rotated behind the current one */
.rcard--next{
  z-index:5;
  transform:translateY(-22px) rotate(4deg) translateX(16px);
}

/* Card-out: the fly-away animation when advancing */
@keyframes rcard-out{
  0%  { z-index:20; transform:translateY(0) rotate(-4deg); }
  50% { transform:translateY(-120%) rotate(-5deg) translateX(-40px); }
  80% { z-index:1; }
  100%{ transform:translateY(-50px) rotate(8deg) translateX(55px) scale(.95); }
}
.rcard--out{
  animation:rcard-out .6s cubic-bezier(.8,.2,.1,.8) forwards;
  pointer-events:none;
}

/* Animación rebobinar (flecha izquierda — vuela hacia la derecha) */
@keyframes rcard-out-back{
  0%  { z-index:20; transform:translateY(0) rotate(4deg); }
  50% { transform:translateY(-120%) rotate(5deg) translateX(40px); }
  80% { z-index:1; }
  100%{ transform:translateY(-50px) rotate(-8deg) translateX(-55px) scale(.95); }
}
.rcard--out-back{
  animation:rcard-out-back .6s cubic-bezier(.8,.2,.1,.8) forwards;
  pointer-events:none;
}

/* Current card: flows in document, sets container height */
.rcard--current{
  cursor:auto;
  user-select:auto;
  position:relative;
  z-index:10;
  transform:none !important;
  box-shadow:0 14px 44px rgba(0,0,0,.28);
}

/* Card content */
.rcard__top{ display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.rcard__avatar{ width:44px; height:44px; border-radius:50%; color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700; font-size:1.1rem; flex:none; box-shadow:0 0 0 2px rgba(0,0,0,.06); }
.rcard__meta{ flex:1; min-width:0; }
.rcard__name{ font-weight:700; color:#1a1a1a; font-size:.95rem; }
.rcard__stars{ color:#FBBC05; font-size:.82rem; letter-spacing:1px; margin-top:2px; }
.rcard__glogo{ flex:none; width:22px; height:22px; margin-left:auto; opacity:.9; }
.rcard__text{ color:#3c4043; font-size:.96rem; line-height:1.6; margin:0; position:relative; z-index:1; }

/* Dot indicators — z-index mayor que todas las cards */
.rstack-dots{
  display:flex; gap:8px; justify-content:center; margin-top:22px;
  position:relative; z-index:30;
}
.rstack-dot{
  width:8px; height:8px; border-radius:50%;
  background:rgba(255,255,255,.3);
  border:none; padding:0; cursor:pointer;
  transition:background .25s, transform .25s;
}
.rstack-dot.is-active{ background:#fff; transform:scale(1.25); }

/* Prev / Next buttons — z-index mayor que todas las cards */
.rstack-nav{
  display:flex; justify-content:center; gap:12px; margin-top:14px;
  position:relative; z-index:30;
}
.rstack-btn{
  width:40px; height:40px; border-radius:50%;
  border:2px solid rgba(255,255,255,.35);
  background:rgba(255,255,255,.08);
  color:#fff; font-size:1rem; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .2s, border-color .2s;
  line-height:1;
}
.rstack-btn:hover{ background:rgba(255,255,255,.2); border-color:rgba(255,255,255,.6); }

.resenas__cta{ text-align:center; margin-top:36px; }

@media (max-width:580px){
  .resenas{ padding:72px 0 64px; clip-path:inset(-80px 0 0 0); }
  .rstack-wrap{ max-width:calc(100vw - 48px); padding-top:24px; }
  .rcard{ padding:22px 20px 20px; border-radius:16px; }
}
@media (prefers-reduced-motion:reduce){
  .rcard, .rcard--out{ animation:none !important; transition:none !important; }
  .rstack .rcard:not(.rcard--current){ display:none; }
}

.add-btn{
  flex:none; width:42px; height:42px; border-radius:50%; background:var(--primary); color:#fff;
  display:flex; align-items:center; justify-content:center; transition:transform .25s var(--ease-bounce), background .2s, box-shadow .2s;
  box-shadow:0 6px 16px -6px rgba(0,80,60,.6);
  border:none;
}
.dish:hover .add-btn{ background:var(--accent-dark); box-shadow:0 8px 20px -6px rgba(184,145,74,.65); }
.add-btn:hover{ transform:scale(1.12) rotate(90deg); }
.add-btn:active{ transform:scale(.88); }
.dish.out{ opacity:.55; }
.dish.out .add-btn{ background:#c9bfae; box-shadow:none; pointer-events:none; }

/* ============================================================
   NOSOTROS
   ============================================================ */
.about{
  position:relative; z-index:4; color:#fff; overflow:hidden;
  /* z-index:4 > destacados(3) para que los bordes redondeados sean visibles */
  margin-top:-50px;
  border-radius:44px 44px 0 0;
  padding:72px 0 110px;
  background-color:#063d2c;
  background-image:
    radial-gradient(110% 70% at 50% -8%, rgba(220,180,120,.12), transparent 55%),
    radial-gradient(80% 60% at 88% 18%, rgba(46,140,104,.22), transparent 60%),
    radial-gradient(120% 120% at 50% 118%, rgba(0,0,0,.5), transparent 62%);
  box-shadow:0 -28px 60px rgba(0,0,0,.3), inset 0 0 180px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.05);
}
.about__grain{ position:absolute; inset:0; opacity:.08; pointer-events:none; }
.about__grid{ position:relative; display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:stretch; }
.about__text h2{ font-size:clamp(2rem,4.2vw,3.2rem); margin:16px 0 0; }
.about__text h2 em{ color:var(--accent); }
.about__text h2 .script{ font-family:'Parisienne', cursive; font-weight:400; font-size:1.4em; line-height:1; color:var(--accent); display:inline-block; padding-right:.06em; }
.about__text p{ color:rgba(255,255,255,.74); font-size:1.05rem; margin:20px 0 0; max-width:50ch; text-wrap:pretty; }
.about__quote{ font-family:var(--font-display); font-style:italic; font-size:1.5rem; color:#fff; margin:30px 0 0; padding-left:20px; border-left:3px solid var(--accent); }
.metrics{
  display:grid; grid-template-columns:repeat(3,1fr);
  margin-top:44px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:20px; overflow:hidden;
  background:rgba(255,255,255,.04);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.metric{
  padding:26px 18px 22px; text-align:center;
  position:relative;
  border-right:1px solid rgba(255,255,255,.1);
  transition:background .3s;
}
.metric:last-child{ border-right:none; }
/* Línea dorada superior */
.metric::before{
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:36px; height:2px; background:linear-gradient(90deg, transparent, var(--accent), transparent);
  border-radius:0 0 4px 4px;
}
.metric:hover{ background:rgba(255,255,255,.06); }
.metric .n{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(1.8rem,4vw,2.6rem); color:var(--accent);
  line-height:1; display:block;
}
.metric .l{
  font-size:.72rem; color:rgba(255,255,255,.55); margin-top:10px;
  text-transform:uppercase; letter-spacing:.1em; display:block; line-height:1.4;
}

.about__media{ position:relative; display:flex; flex-direction:column; }
.about__media image-slot{ width:100%; flex:1; min-height:480px; border-radius:var(--r-lg); box-shadow:var(--shadow-pop); transition:transform .55s var(--ease-out), box-shadow .55s var(--ease-out); will-change:transform; cursor:pointer; }
.about__media image-slot:hover{ transform:translateY(-8px) scale(1.02); box-shadow:0 34px 64px -22px rgba(0,0,0,.55), 0 0 0 1px rgba(220,180,120,.35); }
@media (prefers-reduced-motion: reduce){
  .about__media image-slot{ transition:box-shadow .3s ease; }
  .about__media image-slot:hover{ transform:none; }
}
.stamp{
  position:absolute; right:-22px; bottom:-22px; width:128px; height:128px; border-radius:50%;
  background:var(--accent); color:var(--primary-dark); display:grid; place-items:center; text-align:center;
  font-weight:700; transform:rotate(-12deg); box-shadow:0 16px 36px -14px rgba(0,0,0,.6);
  border:3px solid rgba(255,255,255,.5);
}
.stamp span{ display:block; }
.stamp .est{ font-size:.6rem; letter-spacing:.2em; }
.stamp .yr{ font-family:var(--font-display); font-size:1.7rem; line-height:1; margin:2px 0; }
.stamp .ct{ font-size:.56rem; letter-spacing:.14em; }

/* ============================================================
   CÓMO PEDIR / HORARIOS
   ============================================================ */
.order{
  position:relative; z-index:3;
  margin-top:-50px;
  border-radius:44px 44px 0 0;
  background:
    radial-gradient(ellipse 65% 80% at 8% 35%, rgba(0,110,75,.55) 0%, transparent 58%),
    radial-gradient(ellipse 55% 65% at 92% 75%, rgba(0,55,38,.5) 0%, transparent 55%),
    radial-gradient(ellipse 80% 45% at 48% 105%, rgba(0,70,50,.4) 0%, transparent 48%),
    radial-gradient(ellipse 38% 38% at 62% 8%, rgba(220,180,120,.07) 0%, transparent 50%),
    #000f0a;
  color:#fff;
  padding:80px 0 100px;
  overflow:hidden;
  box-shadow:0 -20px 60px rgba(0,0,0,.4);
}
.order__grain{ position:absolute; inset:0; opacity:.07; pointer-events:none; }
.order__grid{ position:relative; display:grid; grid-template-columns:1.2fr 1fr; gap:56px; align-items:start; }
.steps{ display:flex; flex-direction:column; gap:14px; }
.step{ display:flex; gap:18px; align-items:flex-start; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:var(--r-md); padding:22px; transition:background .25s, transform .25s; }
.step:hover{ background:rgba(255,255,255,.1); transform:translateX(4px); }
.step__n{ flex:none; width:52px; height:52px; border-radius:50%; background:var(--accent); color:var(--primary-dark); font-family:var(--font-display); font-weight:700; font-size:1.6rem; display:grid; place-items:center; }
.step h4{ margin:0; font-size:1.16rem; font-weight:600; }
.step p{ margin:6px 0 0; color:rgba(255,255,255,.72); font-size:.94rem; }

/* Mapa */
.order__map{ position:relative; margin-top:56px; }
.order__map-label{
  display:inline-flex; align-items:center; gap:8px;
  margin-bottom:14px;
  font-size:.88rem; font-weight:500; letter-spacing:.04em; text-transform:uppercase;
  color:var(--accent); opacity:.9;
}
.order__map-frame{
  width:100%; height:360px; border:none;
  border-radius:var(--r-lg);
  box-shadow:0 20px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.07);
  filter:saturate(.85) brightness(.92);
  display:block;
}

.info-card{ background:#fff; color:var(--ink); border-radius:var(--r-lg); padding:30px; box-shadow:var(--shadow-pop); }
.info-card .status-row{ display:flex; align-items:center; gap:10px; padding-bottom:18px; border-bottom:1px solid #eee; margin-bottom:18px; }
.info-card .status-row .led{ box-shadow:none; }
.info-card .status-row > div{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; }
.info-card .status-txt{ font-weight:600; }
.info-card .status-sub{ color:var(--muted); font-size:.84rem; }
.hours{ list-style:none; margin:0 0 22px; padding:0; }
.hours li{ display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px dashed #eee; font-size:.92rem; }
.hours li.today{ font-weight:700; color:var(--primary); }
.hours li span:last-child{ color:var(--muted); }
.hours li.today span:last-child{ color:var(--primary); }
.hours li.hours--closed{ opacity:.45; }
.contact-row{ display:flex; align-items:center; gap:12px; padding:12px 0; }
.contact-row svg{ flex:none; color:var(--primary); }
.contact-row b{ display:block; }
.contact-row small{ color:var(--muted); }

/* ============================================================
   CATÁLOGO — VISTA LISTA
   ============================================================ */
/* Toggle de vista */
.view-toggle{
  display:flex; gap:6px; align-items:center;
  justify-content:flex-end; margin-bottom:16px;
}
.view-btn{
  display:flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:8px; border:1.5px solid #ddd;
  background:#fff; color:var(--muted); cursor:pointer;
  transition:all .18s;
}
.view-btn:hover{ border-color:var(--primary); color:var(--primary); }
.view-btn.active{ background:var(--primary); border-color:var(--primary); color:#fff; }

/* Lista: el host tiene la clase, el .grid dentro se adapta */
.carta--list .grid{
  display:flex; flex-direction:column; gap:0;
}
.carta--list .grid > .reveal{
  display:block;
}
/* ── LISTA: contenedor ── */
.carta--list .grid > .reveal > .dish,
.carta--list .dish{
  display:flex; flex-direction:row; align-items:stretch;
  border-radius:0; box-shadow:none; transform:none!important;
  border-bottom:1px solid #efe7da;
  background:var(--bg-card);
  min-height:108px;
  position:relative;
  transition:background .18s;
}
.carta--list .dish:hover{ background:#f7f2eb; }
.carta--list .grid > .reveal:first-child > .dish,
.carta--list .dish:first-child{ border-radius:16px 16px 0 0; }
.carta--list .grid > .reveal:last-child > .dish,
.carta--list .dish:last-child{ border-radius:0 0 16px 16px; border-bottom:none; }

/* ── LISTA: imagen ── */
.carta--list .dish__fig{
  order:2; flex:none; width:130px;
  align-self:stretch; overflow:hidden; position:relative;
}
.carta--list .dish__fig::after{
  content:''; position:absolute; top:7px; left:7px; z-index:3;
  width:26px; height:26px;
  background:url('/assets/img/logodc.png') center/contain no-repeat;
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.55));
  pointer-events:none;
}
.carta--list .dish__fig img{
  width:100%; height:100%; object-fit:cover;
  object-position:center; transition:transform .4s;
}
.carta--list .dish:hover .dish__fig img{ transform:scale(1.05); }
.carta--list .dish__fig--color{
  order:2; width:130px; flex:none; align-self:stretch;
}

/* ── LISTA: body — nombre a la izquierda, precio a la derecha ── */
.carta--list .dish__body{
  order:1; flex:1; min-width:0;
  padding:14px 18px;
  display:flex; flex-direction:row; align-items:center; gap:20px;
}
.carta--list .dish__top{
  flex:1; min-width:0;
}
.carta--list .dish__name{ font-size:.97rem; line-height:1.3; }
.carta--list .dish__desc{
  font-size:.82rem; margin-top:4px;
  overflow:hidden; display:-webkit-box;
  -webkit-box-orient:vertical; -webkit-line-clamp:2;
}

/* ── LISTA: precio — solo precio, botón sale del flujo ── */
.carta--list .dish__foot{
  display:flex; flex-direction:column; align-items:flex-end;
  gap:2px; margin-top:0; flex-shrink:0;
}
.carta--list .dish__price{
  font-size:1.05rem; font-weight:700;
  color:var(--accent-dark); white-space:nowrap; text-align:right;
}
.carta--list .dish__price small{
  display:block; font-size:.68rem; font-weight:400;
  color:var(--muted); text-align:right; margin-top:1px;
}

/* ── LISTA: botón + sobre la imagen, esquina inferior derecha ── */
.carta--list .add-btn{
  position:absolute; bottom:10px; right:10px; z-index:3;
  box-shadow:0 4px 14px -4px rgba(0,0,0,.35);
}
.carta--list .dish:hover .add-btn{
  background:var(--accent-dark);
  box-shadow:0 8px 20px -6px rgba(184,145,74,.65);
}

/* ── LISTA: cursor en imagen clicable ── */
.carta--list .dish__fig{ cursor:zoom-in; }

/* ── LISTA: panel border-radius ── */
.carta--list .cat__panel > .grid{
  border-radius:16px; overflow:hidden;
  box-shadow:var(--shadow-card); border:1px solid #efe7da;
}
@media(max-width:600px){
  .carta--list .dish__fig{ width:90px; }
  .carta--list .dish__body{ padding:12px 14px; gap:12px; }
}

/* ============================================================
   IMAGE MODAL — lightbox con blur de fondo
   ============================================================ */
#imgModal{
  position:fixed; inset:0; z-index:9000;
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  background:rgba(0,0,0,0);
  pointer-events:none;
  transition:background .3s;
}
#imgModal.open{
  background:rgba(0,0,0,.75);
  pointer-events:all;
}
/* blur sobre el contenido de la página */
body.modal-blur > *:not(#imgModal){
  filter:blur(6px) brightness(.7);
  transition:filter .3s;
}
body:not(.modal-blur) > *:not(#imgModal){
  filter:none;
  transition:filter .3s;
}

.img-modal__inner{
  position:relative; max-width:min(90vw,740px); max-height:88vh;
  border-radius:20px; overflow:hidden;
  box-shadow:0 40px 80px -20px rgba(0,0,0,.7);
  opacity:0; transform:scale(.92);
  transition:opacity .3s, transform .3s;
}
#imgModal.open .img-modal__inner{
  opacity:1; transform:scale(1);
}
.img-modal__img{
  display:block; width:100%; height:100%;
  object-fit:contain; max-height:88vh;
  border-radius:20px;
}
/* Logo Doña Clara — esquina superior izquierda */
.img-modal__logo{
  position:absolute; top:14px; left:16px;
  height:40px; width:auto;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.6));
  pointer-events:none;
}
/* Botón cerrar — esquina superior derecha */
.img-modal__close{
  position:absolute; top:12px; right:12px;
  width:36px; height:36px; border-radius:50%;
  background:rgba(0,0,0,.55); backdrop-filter:blur(6px);
  border:none; cursor:pointer; color:#fff;
  display:flex; align-items:center; justify-content:center;
  transition:background .2s, transform .2s;
}
.img-modal__close:hover{ background:rgba(0,0,0,.8); transform:scale(1.1); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{
  position:relative; color:rgba(255,255,255,.7); padding:64px 0 30px;
  background-color:#063d2c;
  background-image:
    radial-gradient(90% 60% at 50% -6%, rgba(220,180,120,.10), transparent 58%),
    radial-gradient(70% 55% at 12% 6%, rgba(46,140,104,.20), transparent 60%),
    radial-gradient(120% 120% at 50% 120%, rgba(0,0,0,.5), transparent 62%);
  box-shadow:inset 0 0 180px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.05);
}
.footer__top{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:40px; align-items:flex-start; }
.footer__brand{ display:flex; align-items:center; gap:14px; }
.footer__brand img{ width:auto; height:64px; object-fit:contain; }
.footer__brand .nm{ font-family:var(--font-display); font-style:italic; font-weight:700; color:#fff; font-size:1.5rem; }
.footer__brand small{ display:block; font-family:var(--font-body); font-style:normal; letter-spacing:.3em; font-size:.56rem; margin-top:3px; }
.footer__cols{ display:flex; gap:56px; flex-wrap:wrap; }
.footer__col h5{ color:#fff; font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; margin:0 0 14px; }
.footer__col a, .footer__col p{ display:block; font-size:.92rem; margin:0 0 9px; color:rgba(255,255,255,.66); transition:color .2s; }
.footer__col a:hover{ color:var(--accent); }
.footer__strip{ height:1px; background:repeating-linear-gradient(90deg,var(--accent) 0 14px, transparent 14px 26px); opacity:.4; margin:40px 0 22px; }
.footer__legal{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:.78rem; color:rgba(255,255,255,.5); }
.footer__legal-links{ display:flex; align-items:center; gap:10px; }
.legal-link{ background:none; border:none; padding:0; color:rgba(255,255,255,.5); font-size:.78rem; cursor:pointer; text-decoration:underline; text-underline-offset:3px; transition:color .2s; }
.legal-link:hover{ color:var(--accent); }

/* ── Texto legal dentro del modal ── */
.legal-body{
  padding:22px 24px 12px;
  scrollbar-width:thin; scrollbar-color:rgba(0,80,60,.18) transparent;
}
.legal-body h3{
  font-size:.75rem; font-weight:700; color:var(--primary);
  text-transform:uppercase; letter-spacing:.1em;
  margin:24px 0 6px;
  padding-bottom:6px;
  border-bottom:1px solid rgba(0,80,60,.1);
}
.legal-body h3:first-child{ margin-top:0; }
.legal-body p{
  font-size:.9rem; color:#444; line-height:1.7; margin:0 0 6px;
}
.legal-body a{ color:var(--primary); text-decoration:underline; text-underline-offset:2px; }

/* Footer pill in legal modals: compact, cream bg */
.legal-body + .salsa-modal__foot{
  background:#F5F0E8;
  border-top:1px solid rgba(0,80,60,.08);
  padding:16px 24px 30px;
}
.legal-body + .salsa-modal__foot .salsa-modal__confirm{
  background:var(--primary);
  box-shadow:0 6px 20px -6px rgba(0,80,60,.4);
  font-size:.95rem;
  padding:13px 24px;
}

/* ============================================================
   CARRITO — FAB + drawer
   ============================================================ */
.fab{
  position:fixed; right:42px; bottom:42px; z-index:90; display:flex; align-items:center; gap:12px;
  background:var(--primary); color:#fff; padding:14px 20px 14px 16px; border-radius:99px;
  box-shadow:var(--shadow-pop); transform:translateY(120px); opacity:0;
  transition:transform .4s var(--ease-bounce), opacity .3s, background .25s;
}
.fab.show{ transform:translateY(0); opacity:1; }
.fab:hover{ background:var(--primary-dark); }
.fab__ic{ position:relative; display:grid; place-items:center; }
/* Ring pulsante detrás del FAB cuando está visible */
.fab.show::before{
  content:''; position:absolute; inset:0; border-radius:99px;
  background:var(--primary);
  animation:fab-ring 2.2s ease-out infinite;
  z-index:-1; pointer-events:none;
}
@keyframes fab-ring{
  0%  { transform:scale(1);    opacity:.55; }
  70% { transform:scale(1.32); opacity:0;   }
  100%{ transform:scale(1.32); opacity:0;   }
}

.fab__count{
  position:absolute; top:-9px; right:-11px; min-width:20px; height:20px; padding:0 5px;
  border-radius:99px; background:var(--accent); color:var(--primary-dark);
  font-size:.72rem; font-weight:800; display:grid; place-items:center;
}
.fab__meta{ display:flex; flex-direction:column; line-height:1.1; text-align:left; }
.fab__meta small{ font-size:.66rem; opacity:.7; }

/* El carrito (FAB + drawer) es exclusivo del catálogo: en el home no hay
   botones de "agregar", así que no tiene sentido mostrarlo ahí. Siguen
   existiendo en el DOM (para que el app.js compartido no rompa), solo se
   ocultan visualmente en la home. */
body.page-home #fab,
body.page-home #drawer,
body.page-home .drawer-scrim{ display:none!important; }
.fab__meta b{ font-size:1rem; }

.drawer-scrim{ position:fixed; inset:0; background:rgba(8,30,22,.5); backdrop-filter:blur(3px); z-index:130; opacity:0; pointer-events:none; transition:opacity .35s; }
.drawer-scrim.open{ opacity:1; pointer-events:auto; }
.drawer{
  position:fixed; top:0; right:0; bottom:0; width:min(430px,92vw); background:var(--cream); z-index:131;
  display:flex; flex-direction:column; transform:translateX(100%); transition:transform .42s var(--ease-out);
  box-shadow:-30px 0 60px -30px rgba(0,0,0,.5); will-change:transform; overflow:hidden;
}
.drawer.open{ transform:translateX(0); }
.drawer__pill{ display:none; }

/* Cabecera */
.drawer__head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:24px 22px 16px; border-bottom:1px solid #eadfd0; background:linear-gradient(180deg,#fffdfa,var(--cream)); }
.drawer__titles{ min-width:0; }
.drawer__script{ display:block; font-family:'Parisienne', cursive; font-size:2.1rem; line-height:1; color:var(--accent-dark); }
.drawer__sub{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-top:4px; }
.drawer__head .count{ color:var(--muted); font-size:.84rem; font-weight:600; font-family:var(--font-body); }
.drawer__head-actions{ flex:none; display:flex; align-items:center; gap:6px; }
.drawer__clear{
  flex:none; display:inline-flex; align-items:center; gap:6px;
  font-size:.78rem; font-weight:600; color:var(--muted);
  padding:8px 12px; border-radius:99px; border:1px solid #eadfd0; background:#fff;
  transition:color .2s, background .2s, border-color .2s;
}
.drawer__clear svg{ flex:none; }
.drawer__clear:hover{ color:#c0392b; border-color:#f3c9c2; background:#fdf3f1; }
.drawer__clear.is-armed{ color:#fff; background:#c0392b; border-color:#c0392b; }
.drawer__close{ flex:none; width:42px; height:42px; border-radius:50%; display:grid; place-items:center; color:var(--ink); transition:background .2s; }
.drawer__close:hover{ background:#eadfd0; }

/* Cuerpo + lineas */
.drawer__body{ flex:1; overflow-y:auto; padding:14px 18px; -webkit-overflow-scrolling:touch; }
.drawer__empty{ text-align:center; color:var(--muted); padding:54px 20px; }
.drawer__empty-ic{ color:#bfae90; margin:0 auto 16px; display:grid; place-items:center; width:74px; height:74px; border-radius:50%; background:#f3ead9; }
.drawer__empty h4{ font-family:var(--font-display); color:var(--primary); font-size:1.2rem; margin:0 0 6px; }
.drawer__empty p{ font-size:.9rem; margin:0 0 18px; }
.drawer__empty .btn-empty{ display:inline-flex; align-items:center; gap:8px; padding:11px 22px; border-radius:99px; background:var(--primary); color:#fff; font-weight:600; font-size:.9rem; }
.drawer__empty .btn-empty:hover{ background:var(--primary-dark); }

.line{ display:flex; gap:0; padding:0; margin-bottom:10px; background:#fff; border:1px solid #efe6d7; border-radius:16px; box-shadow:var(--shadow-card); overflow:hidden; }
.line__fig{ flex:none; width:80px; align-self:stretch; position:relative; overflow:hidden; border-radius:15px 0 0 15px; }
.line__fig img{ width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
.line__fig--empty{ display:grid; place-items:center; font-family:var(--font-display); font-weight:700; font-size:1.25rem; color:var(--primary-dark); background:linear-gradient(145deg,#f6e8cb,var(--accent)); box-shadow:inset 0 1px 0 rgba(255,255,255,.55); }
.line__body{ flex:1; min-width:0; padding:13px 13px 13px 12px; }
.line__name{ font-weight:600; font-size:.96rem; line-height:1.25; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.line__cat{ display:inline-block; font-size:.66rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--accent-dark); background:var(--accent-soft); padding:2px 8px; border-radius:99px; margin-top:5px; }
.line__note{ width:100%; margin-top:9px; border:1px solid #e3d8c8; border-radius:9px; padding:7px 10px; font-size:.82rem; font-family:inherit; background:#fdfaf4; resize:none; max-height:96px; overflow-y:auto; transition:border-color .2s, background .2s; text-align:center; }
.line__note:focus{ outline:2px solid var(--accent); border-color:transparent; background:#fff; }
.line__right{ display:flex; flex-direction:column; align-items:flex-end; justify-content:space-between; gap:10px; padding:13px 13px 13px 0; flex:none; }
.line__price{ font-weight:800; color:var(--accent-dark); font-size:1rem; font-variant-numeric:tabular-nums; }
.line__price.is-bumped{ animation:tot-bump .4s var(--ease-bounce); }
.line__unit{ font-size:.66rem; color:var(--muted); margin-top:-7px; }
.qty{ display:flex; align-items:center; gap:2px; background:#fff; border:1px solid #e3d8c8; border-radius:99px; padding:3px; }
.qty button{ width:34px; height:34px; min-width:34px; border-radius:50%; display:grid; place-items:center; color:var(--primary); font-weight:700; transition:background .15s, color .15s, transform .1s; }
.qty button:hover{ background:var(--primary-light); }
.qty button:active{ transform:scale(.88); }
.qty .qty__del{ color:#c0392b; }
.qty .qty__del:hover{ background:#fbe9e7; }
.qty span{ min-width:24px; text-align:center; font-weight:700; font-size:.92rem; font-variant-numeric:tabular-nums; }

/* Pie */
.drawer__foot{ padding:16px 22px calc(20px + env(safe-area-inset-bottom)); border-top:1px solid #eadfd0; background:#fff; }
.drawer__mode{ display:flex; gap:6px; padding:4px; background:#f0e9dc; border-radius:99px; margin-bottom:14px; }
.drawer__mode-btn{ flex:1; padding:9px 0; border-radius:99px; font-size:.84rem; font-weight:700; color:var(--muted); transition:color .2s, background .2s, box-shadow .2s; }
.drawer__mode-btn.is-active{ color:var(--primary); background:#fff; box-shadow:var(--shadow-card); }

/* "¿Cómo lo recibís?" — título centrado arriba del toggle Retiro/Delivery */
.dc-field--mode .dc-label{ display:block; text-align:center; }
.totrow{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px; }
.totrow .t{ color:var(--muted); font-size:.9rem; }
.totrow .v{ font-family:var(--font-display); font-weight:700; font-size:clamp(1.4rem,6vw,1.8rem); color:var(--primary); font-variant-numeric:tabular-nums; }
.totrow .v.is-bumped{ animation:tot-bump .4s var(--ease-bounce); }

/* Envío + total completo (M-7) — debajo del "Total estimado", solo cuando
   hay zona de delivery elegida. El envío sigue sin sumarse al pedido en sí
   (se abona aparte a la moto); esto es únicamente un resumen informativo. */
.dc-envio-total{ margin:2px 0 10px; padding-top:8px; border-top:1px dashed #eadfd0; }
.dc-envio-total__row{ display:flex; justify-content:space-between; align-items:baseline; font-size:.82rem; color:var(--muted); padding:2px 0; }
.dc-envio-total__row--grand{ font-weight:700; font-size:.95rem; color:var(--primary); }
.dc-envio-total__row--grand span:last-child{ font-variant-numeric:tabular-nums; }
@keyframes tot-bump{ 0%{ transform:scale(1); } 40%{ transform:scale(1.13); color:var(--accent-dark); } 100%{ transform:scale(1); } }
.foot-note{ font-size:.74rem; color:var(--muted); margin:0 0 14px; }
.foot-note--closed{ display:flex; align-items:center; gap:6px; color:#c0392b; font-weight:600; background:rgba(192,57,43,.08); border:1px solid rgba(192,57,43,.25); border-radius:10px; padding:8px 10px; margin:-4px 0 14px; }
.btn-wa{ position:relative; width:100%; justify-content:center; gap:10px; background:#25D366; color:#0a3d2d; font-weight:700; overflow:hidden; }
.btn-wa:hover{ background:#1fc35d; }
.btn-wa[disabled]{ background:#cfe7d6; color:#6b8a76; pointer-events:none; }
.btn-wa__arrow{ display:inline-grid; place-items:center; transition:transform .25s var(--ease-out); }
.btn-wa:hover .btn-wa__arrow{ transform:translateX(4px); }
/* ── Botón de acción al elegir Mercado Pago: toma la identidad AZUL de MP ── */
.btn-wa__mp{ display:none; align-items:center; }
.btn-wa.is-mp{ background:linear-gradient(180deg,#00a5e6,#0089cc); color:#fff; box-shadow:0 6px 18px rgba(0,158,227,.35); }
.btn-wa.is-mp:hover{ background:linear-gradient(180deg,#0aa9e8,#0080c2); }
.btn-wa.is-mp[disabled]{ background:#8fcbe8; color:#eaf7ff; box-shadow:none; }
.btn-wa.is-mp [data-ic="wa"]{ display:none; }
.btn-wa.is-mp .btn-wa__mp{ display:inline-flex; filter:drop-shadow(0 1px 2px rgba(0,0,0,.15)); }
.btn-wa.is-mp .btn-wa__arrow{ color:#fff; }
.btn-wa.is-mp.is-loading::before{ content:""; width:18px; height:18px; border:2.5px solid rgba(255,255,255,.45); border-top-color:#fff; border-radius:50%; animation:dc-mp-spin .7s linear infinite; flex:none; }
@keyframes dc-mp-spin{ to{ transform:rotate(360deg); } }

/* ── Pantalla de confirmación de pago con Mercado Pago ── */
.drawer__success.is-mp{ background:radial-gradient(120% 80% at 50% -10%, #fffef9 0%, var(--cream) 70%); justify-content:flex-start; padding:38px 26px 26px; overflow-y:auto; }
.drawer__success.is-mp #waConfirm{ display:none; }
.drawer__success:not(.is-mp) #mpConfirm{ display:none !important; }
#mpConfirm[hidden]{ display:none; }
#mpConfirm{ display:flex; flex-direction:column; align-items:center; gap:12px; width:100%; max-width:360px; margin:0 auto; }
.mpc-brand{ font-family:var(--font-display); font-style:italic; font-size:1.02rem; color:#B8914A; letter-spacing:.02em; }
.mpc-icon{ margin-top:4px; animation:mpc-pop .5s var(--ease-out) both; filter:drop-shadow(0 8px 18px rgba(0,80,60,.22)); }
@keyframes mpc-pop{ from{ opacity:0; transform:scale(.7); } to{ opacity:1; transform:scale(1); } }
.mpc-title{ font-family:var(--font-display); color:var(--primary); font-size:1.5rem; margin:2px 0 0; text-align:center; line-height:1.15; }
.mpc-sub{ color:var(--muted); font-size:.9rem; margin:0; text-align:center; max-width:290px; line-height:1.45; }
.mpc-amount{ display:flex; flex-direction:column; align-items:center; gap:2px; background:#fff; border:1px solid #ecdfc9; border-radius:16px; padding:12px 26px; margin:6px 0 2px; box-shadow:0 4px 14px rgba(0,80,60,.06); }
.mpc-amount__lbl{ font-size:.7rem; text-transform:uppercase; letter-spacing:.09em; color:var(--muted); font-weight:700; }
.mpc-amount__val{ font-family:var(--font-display); font-size:1.7rem; color:var(--primary); font-weight:700; }
.mpc-pay{ width:100%; margin-top:6px; min-height:52px; display:flex; flex-direction:column; align-items:center; }
.drawer__success #mpWalletBox{ width:100%; }
.drawer__success #mpWallet{ width:100%; }
/* Skeleton mientras carga el botón oficial */
.mpc-skeleton{ width:100%; height:52px; border-radius:14px; background:#e9e2d6; overflow:hidden; position:relative; }
.mpc-skeleton[hidden]{ display:none; }
.mpc-skeleton span{ position:absolute; inset:0; background:linear-gradient(100deg,transparent,rgba(255,255,255,.75),transparent); transform:translateX(-100%); animation:mpc-shim 1.15s ease-in-out infinite; }
@keyframes mpc-shim{ to{ transform:translateX(100%); } }
/* Botón directo (sandbox / fallback) con identidad MP */
.mpc-mpbtn{ display:flex; align-items:center; justify-content:center; gap:9px; width:100%; height:52px; border-radius:14px; background:linear-gradient(180deg,#00a5e6,#0089cc); color:#fff; font-weight:700; font-size:.98rem; text-decoration:none; box-shadow:0 6px 18px rgba(0,158,227,.38); transition:filter .2s, transform .1s; }
.mpc-mpbtn[hidden]{ display:none; }
.mpc-mpbtn:hover{ filter:brightness(1.05); }
.mpc-mpbtn:active{ transform:translateY(1px); }
.mpc-mpbtn__logo{ display:inline-flex; filter:drop-shadow(0 1px 2px rgba(0,0,0,.15)); }
.mpc-trust{ display:inline-flex; align-items:center; gap:6px; font-size:.78rem; color:#0089cc; margin-top:4px; }
.mpc-trust b{ color:#0089cc; }
.mpc-cancel{ background:none; border:none; color:var(--muted); font-size:.82rem; text-decoration:underline; text-underline-offset:2px; margin-top:2px; cursor:pointer; padding:6px; }
.mpc-cancel:hover{ color:var(--primary); }

/* ── Medios de pago aceptados (logos oficiales de MP) al elegir Mercado Pago ── */
.mp-methods{ margin:2px 0 12px; display:flex; flex-direction:column; align-items:center; gap:8px; animation:mpm-in .3s var(--ease-out) both; }
.mp-methods[hidden]{ display:none; }
.mp-methods__cards{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px; }
.mp-methods__cards img{ height:24px; width:auto; border-radius:4px; background:#fff; padding:2px 4px; border:1px solid #ecebe6; }
.mp-methods__sec{ display:flex; justify-content:center; align-items:center; gap:6px; font-size:.74rem; color:#0089cc; text-align:center; line-height:1.2; }
.mp-methods__sec svg{ flex:none; }
.mp-methods__sec b{ color:#0089cc; }
@keyframes mpm-in{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:none; } }

/* Identidad de Mercado Pago en la opción "Forma de pago" + logo oficial en los botones */
.dc-pay__mp{ display:inline-flex; align-items:center; }
.dc-pay__mp img{ height:17px; width:auto; vertical-align:-4px; }
.dc-pay__opt--mp.is-active{ border-color:#009ee3; background:#eff9fe; color:#0077b3; box-shadow:0 5px 14px -8px rgba(0,158,227,.7); }
.btn-wa__mp img{ height:24px; width:auto; display:block; }
.mpc-mpbtn__logo img{ height:24px; width:auto; display:block; }

/* Efecto latido (heartbeat) para el botón de Mercado Pago */
@keyframes dc-mp-beat{ 0%,45%,100%{ transform:scale(1); } 12%{ transform:scale(1.05); } 24%{ transform:scale(1); } 33%{ transform:scale(1.028); } }
.btn-wa.is-mp{ transform-origin:center; animation:dc-mp-beat 2.4s ease-in-out infinite; }
.btn-wa.is-mp.is-loading{ animation:none; }
.drawer__success #mpWalletBox, .mpc-mpbtn{ transform-origin:center; animation:dc-mp-beat 2.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce){
  .btn-wa.is-mp, .drawer__success #mpWalletBox, .mpc-mpbtn{ animation:none; }
}
.btn-wa:not([disabled])::after{ content:""; position:absolute; top:0; left:-60%; width:38%; height:100%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent); transform:skewX(-18deg); animation:wa-sheen 3.6s ease-in-out infinite; }
@keyframes wa-sheen{ 0%,100%{ left:-60%; } 55%,80%{ left:135%; } }

/* Entrada escalonada de lineas (solo al abrir) */
.drawer.is-opening .line{ animation:line-in .42s var(--ease-out) both; animation-delay:calc(var(--i,0) * .045s); }
@keyframes line-in{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }

/* Fly-to-cart */
.fly-chip{ position:fixed; z-index:200; width:42px; height:42px; border-radius:50%; background:var(--primary); color:#fff; display:grid; place-items:center; box-shadow:var(--shadow-pop); pointer-events:none; }

/* ============================================================
   CHECKOUT WIZARD — 2 pasos (pedido → tus datos)
   ============================================================ */
.drawer__head .drawer__titles{ flex:1; }
/* el atributo [hidden] debe ganarle a display:flex/grid de estos elementos */
.dc-field[hidden], .drawer__success[hidden], .drawer__back[hidden]{ display:none !important; }
.drawer__back{ flex:none; width:38px; height:38px; margin:-2px 2px -2px -4px; border-radius:50%; display:grid; place-items:center; color:var(--primary); transition:background .2s; }
.drawer__back:hover{ background:#eadfd0; }

/* indicador de pasos */
.drawer__steps{ display:flex; align-items:center; justify-content:center; gap:9px; padding:12px 22px 2px; flex:none; }
.drawer__step{ width:9px; height:9px; border-radius:50%; background:#e0d4c1; transition:background .3s, transform .3s; }
.drawer__step.is-active{ background:var(--accent-dark); transform:scale(1.2); }
.drawer__step-line{ width:36px; height:2px; border-radius:2px; background:#e0d4c1; overflow:hidden; }
.drawer__step-line i{ display:block; height:100%; background:var(--accent-dark); transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease-out); }
.drawer__step-line.is-filled i{ transform:scaleX(1); }

/* track deslizante (patrón carrusel: track = ancho del drawer, cada screen 100%) */
.drawer__track{ flex:1; min-height:0; display:flex; transform:translateX(0); transition:transform .42s var(--ease-out); }
.drawer__track[data-step="2"]{ transform:translateX(-100%); }
.drawer__screen{ flex:0 0 100%; min-width:0; display:flex; flex-direction:column; min-height:0; }

/* formulario "Tus datos" */
.drawer__form{ display:flex; flex-direction:column; gap:15px; }
.dc-field{ display:flex; flex-direction:column; gap:6px; }
.dc-field label, .dc-field .dc-label{ font-size:.82rem; font-weight:700; color:var(--primary); }
.dc-req{ color:#c0392b; }
.dc-opt{ color:var(--muted); font-weight:500; font-size:.76rem; }
.dc-field input, .dc-field textarea, .dc-field select{ width:100%; box-sizing:border-box; padding:12px 14px; border:1.5px solid #e3d8c8; border-radius:13px; background:#fff; font-family:inherit; font-size:.95rem; color:var(--ink); transition:border-color .2s, box-shadow .2s; }
.dc-field input::placeholder, .dc-field textarea::placeholder{ color:#b3a890; }
.dc-field input:focus, .dc-field textarea:focus, .dc-field select:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(220,180,120,.22); }
.dc-field textarea{ resize:none; min-height:46px; }
.dc-field__note{ margin:6px 0 0; font-size:.76rem; color:var(--muted); line-height:1.4; }

/* select de zona de envío (M-7) — mismo look que los inputs, con flecha propia
   (appearance:none saca la flecha nativa del navegador) + tipografía más
   marcada para que se lea bien de un vistazo */
.dc-field select{
  appearance:none; -webkit-appearance:none;
  padding-right:38px; cursor:pointer;
  font-size:.9rem; font-weight:600; color:var(--ink); letter-spacing:.01em;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23B8914A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center;
}
.dc-field select option{ font-weight:500; }

/* reveal de dirección (solo delivery)
   NOTA: max-height animado + overflow:hidden dentro de un padre transform
   congela la animación en iOS Safari WebKit (bug conocido). Se usa solo
   opacity + translateY para compatibilidad cross-browser. */
.dc-field--addr:not([hidden]){ animation:addr-reveal .34s var(--ease-out); }
@keyframes addr-reveal{ from{ opacity:0; transform:translateY(-8px); } to{ opacity:1; transform:none; } }

/* chips de forma de pago */
.dc-pay{ display:flex; flex-wrap:wrap; gap:8px; }
.dc-pay__opt{ flex:1 1 30%; padding:10px 8px; border-radius:12px; border:1.5px solid #e3d8c8; background:#fff; font-weight:600; font-size:.82rem; color:var(--muted); cursor:pointer; transition:border-color .18s, background .18s, color .18s, box-shadow .18s; }
.dc-pay__opt.is-active{ border-color:var(--accent); background:#fff7ea; color:var(--primary); box-shadow:0 5px 14px -8px rgba(184,145,74,.7); }

.dc-error{ color:#c0392b !important; font-weight:600; }

/* botón Continuar (paso 1) */
.btn-continue{ position:relative; width:100%; justify-content:center; gap:9px; background:var(--primary); color:#fff; font-weight:700; }
.btn-continue:hover{ background:var(--primary-dark); }
.btn-continue[disabled]{ background:#cdd8d1; color:#7d8c83; pointer-events:none; }
.btn-continue__arrow{ display:inline-grid; place-items:center; transition:transform .25s var(--ease-out); }
.btn-continue:not([disabled]):hover .btn-continue__arrow{ transform:translateX(4px); }

/* botón WA en estado enviando */
.btn-wa.is-loading{ pointer-events:none; opacity:.85; }

/* overlay de éxito */
.drawer__success{ position:absolute; inset:0; z-index:6; background:linear-gradient(180deg,#fffdfa,var(--cream)); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; text-align:center; padding:30px; opacity:0; transition:opacity .3s; }
.drawer__success.show{ opacity:1; }
.drawer__success h4{ font-family:var(--font-display); color:var(--primary); font-size:1.55rem; margin:0; }
.drawer__success p{ color:var(--muted); font-size:.92rem; margin:0; max-width:290px; line-height:1.5; }
.dcs-circle{ stroke:var(--primary); stroke-width:3; stroke-dasharray:151; stroke-dashoffset:151; }
.dcs-tick{ stroke:var(--primary); stroke-width:4; stroke-dasharray:44; stroke-dashoffset:44; }
.drawer__success.show .dcs-circle{ animation:dcs-circle .5s var(--ease-out) forwards; }
.drawer__success.show .dcs-tick{ animation:dcs-tick .35s .44s var(--ease-out) forwards; }
@keyframes dcs-circle{ to{ stroke-dashoffset:0; } }
@keyframes dcs-tick{ to{ stroke-dashoffset:0; } }

@media (prefers-reduced-motion: reduce){
  .drawer__track{ transition:none; }
  .dc-field--addr:not([hidden]){ animation:none; }
  .drawer__step, .drawer__step-line i{ transition:none; }
  .drawer__success.show .dcs-circle, .drawer__success.show .dcs-tick{ animation:none; stroke-dashoffset:0; }
}

/* Bottom-sheet en mobile */
@media (max-width:599px){
  .drawer{ top:auto; left:0; right:0; bottom:0; width:auto; max-height:92dvh; border-radius:26px 26px 0 0; transform:translateY(100%); box-shadow:0 -24px 70px -20px rgba(0,0,0,.5); }
  .drawer.open{ transform:translateY(0); }
  .drawer__pill{ display:block; width:42px; height:5px; border-radius:99px; background:#d9cdba; margin:10px auto 0; flex:none; touch-action:none; }
  .drawer__head{ padding-top:10px; touch-action:none; }
}

/* ============================================================
   REVEAL ON SCROLL
   ============================================================ */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.reveal.in{ opacity:1; transform:translateY(0); }
.reveal-1{ transition-delay:.06s; } .reveal-2{ transition-delay:.12s; }
.reveal-3{ transition-delay:.18s; } .reveal-4{ transition-delay:.24s; }
.reveal-5{ transition-delay:.30s; } .reveal-6{ transition-delay:.36s; }
.scale-in{ opacity:0; transform:scale(1.08); transition:opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.scale-in.in{ opacity:1; transform:scale(1); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:980px){
  .about__grid{ grid-template-columns:1fr; gap:40px; }
  .about__media{ width:100%; max-width:560px; margin:0; }
  .about__media image-slot{ width:100%; }
  .order__grid{ grid-template-columns:1fr; gap:36px; }
  .info-card{ width:100%; box-sizing:border-box; }
  .order__map-frame{ height:260px; }
  .stamp{ width:108px; height:108px; }
}
/* ── Tablet (hasta 1024px) ── */
@media (max-width:1024px){
  .dia__head{ flex-direction:column; align-items:flex-start; gap:14px; }
  .dia__grid{ grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); }
  .grid{ grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); }
}

/* ── Tablet (761 – 1060px) ── */
@media (min-width:761px) and (max-width:1060px){
  .hero{
    padding-top: clamp(140px,18vh,210px);
    padding-bottom: 200px; /* espacio extra para que CTA no choque con scroll-cue */
  }
  .wordmark{
    font-size: clamp(2.7rem,7vw,5.6rem);
    margin-bottom: clamp(36px,5.5vh,68px);
  }
  .hero__lede{ display:none; }
  .hero__sub{ display:none; }
  .scroll-cue{ display:none; }
}

/* ── Mobile (hasta 760px) ── */
@media (max-width:760px){
  .nav{ padding:30px 26px; }
  .nav.compact{ padding:12px 26px; }
  .nav__logo{ height:38px; width:auto; }
  .nav.compact .nav__logo{ height:38px; }
  .nav__status{ position:absolute; top:50%; left:50%; margin:0; transform:translate(-50%,-50%); height:38px; font-size:.7rem; padding:0 12px; }
  .nav__status[aria-expanded="true"]{ animation:status-settle-mobile .42s var(--ease-out); }
  @keyframes status-settle-mobile{
    0%{ transform:translate(-50%,-50%) scale(1); }
    45%{ transform:translate(-50%,-50%) scale(.97); }
    100%{ transform:translate(-50%,-50%) scale(1); }
  }
  .hero__content{ top:clamp(-64px,-7vh,-26px); }
  /* hero */
  .hero{ padding-top:clamp(80px,14vh,130px); min-height:100svh; }
  .hero__status{ margin-bottom:16px; }
  .hero__eyebrow{ letter-spacing:.16em; font-size:.64rem; margin-bottom:14px; }
  .hero__sub{ display:none; }
  .hero__lede{ display:none; }
  .wordmark{ margin-bottom:clamp(28px,4vh,48px); }
  .hero__cta{ bottom:36px; gap:0; }
  .hero__scrim{ background:linear-gradient(180deg,rgba(6,40,30,.4) 0%,rgba(6,40,30,.2) 45%,rgba(6,40,30,.04) 100%); }
  .scroll-cue{ display:none; }
  .hero-btn-pedir{ justify-content:center; padding:16px 40px; font-size:1.05rem; }
  .nav__links{ position:fixed; inset:0 auto 0 0; width:min(300px,82vw); background:var(--cream); flex-direction:column; align-items:stretch; justify-content:flex-start; padding:90px 20px 30px; gap:6px; transform:translateX(-100%); transition:transform .4s var(--ease-out); box-shadow:20px 0 50px -20px rgba(0,0,0,.4); z-index:99; }
  .nav__links.open{ transform:translateX(0); }
  .nav__links a{ color:var(--ink); padding:14px 16px; }
  .nav__burger{ display:flex; z-index:101; }
  .nav__cta{ text-align:center; }
  .dia__head{ flex-direction:column; align-items:flex-start; }
  .catnav{ top:58px; }
  .cat__note{ display:none; }
  .cat__head{ gap:12px; }
  .metrics{ gap:24px; }
}
@media (max-width:600px){
  .dia__grid{ grid-template-columns:repeat(2,1fr); gap:12px; }
  .grid{ grid-template-columns:repeat(2,1fr); gap:12px; }
}
@media (max-width:430px){
  .wrap{ padding:0 16px; }
  .dia__grid, .grid{ grid-template-columns:1fr; gap:12px; }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation:none!important; }
  .reveal,.scale-in,.hero__eyebrow,.hero__sub,.hero__lede,.hero__cta{ opacity:1!important; transform:none!important; transition:none!important; }
  .hero .ch{ transform:none!important; }
  .led{ animation:none!important; }
}

/* fin styles.css */





/* ============================================================
   COACHMARKS — ayuda contextual con atenuado + spotlight
   (sistema coach.js · window.dcCoach.show)
   ============================================================ */
.dc-coach{ position:fixed; inset:0; z-index:480; pointer-events:none; }
.dc-coach__spot,
.dc-coach__bubble{ pointer-events:auto; }

/* Spotlight: un hueco con sombra gigante que atenúa todo lo demás.
   pointer-events:none → el elemento resaltado (ej. el +/-) sigue usable. */
.dc-coach__spot{
  position:fixed; pointer-events:none;
  box-shadow:0 0 0 9999px rgba(4,18,12,.85);
  border-radius:14px;
  opacity:0; transition:opacity .25s ease, box-shadow .25s ease, border-radius .15s ease;
  /* halo pulsante que atrae la mirada (mejora) */
  outline:2px solid rgba(220,180,120,.9);
  outline-offset:2px;
}
.dc-coach__spot::after{
  content:""; position:absolute; inset:-2px; border-radius:inherit;
  box-shadow:0 0 0 0 rgba(220,180,120,.55);
  animation:dcCoachPulse 1.8s ease-out infinite;
}
.dc-coach__spot--nodim{ box-shadow:none; }
.dc-coach--in .dc-coach__spot{ opacity:1; }
.dc-coach--out .dc-coach__spot{ opacity:0; }

@keyframes dcCoachPulse{
  0%   { box-shadow:0 0 0 0 rgba(220,180,120,.5); }
  70%  { box-shadow:0 0 0 14px rgba(220,180,120,0); }
  100% { box-shadow:0 0 0 0 rgba(220,180,120,0); }
}

/* Globo del mensaje */
.dc-coach__bubble{
  position:fixed; box-sizing:border-box;
  background:linear-gradient(150deg,#00503C 0%,#063d2c 100%);
  color:#FDF8F3; border-radius:16px;
  padding:14px 16px 12px;
  box-shadow:0 16px 44px -12px rgba(0,0,0,.6);
  border:1px solid rgba(220,180,120,.25);
  opacity:0; transform:translateY(6px) scale(.98);
  transition:opacity .26s ease, transform .26s cubic-bezier(.16,1,.3,1);
}
.dc-coach--in .dc-coach__bubble{ opacity:1; transform:none; }
.dc-coach--out .dc-coach__bubble{ opacity:0; transform:translateY(4px); }

.dc-coach__text{
  margin:0 0 10px; font-size:.92rem; line-height:1.4;
  font-family:var(--font-body, system-ui, sans-serif);
}
.dc-coach__text b{ color:var(--accent,#DCB478); }

.dc-coach__ok{
  display:inline-flex; align-items:center; gap:6px;
  background:linear-gradient(135deg,#DCB478 0%,#c9a05e 100%);
  color:#1a1a1a; font-weight:700; font-size:.82rem;
  border:none; border-radius:99px; padding:7px 16px; cursor:pointer;
  box-shadow:0 4px 14px rgba(220,180,120,.3);
  transition:transform .18s ease, box-shadow .18s ease;
}
.dc-coach__ok:hover{ transform:translateY(-1px); box-shadow:0 7px 18px rgba(220,180,120,.4); }
.dc-coach__ok:active{ transform:scale(.96); }

/* Flecha del globo (cuadradito rotado) */
.dc-coach__arrow{
  position:absolute; width:14px; height:14px;
  background:#063d2c; border:1px solid rgba(220,180,120,.25);
  transform:rotate(45deg); left:24px;
  border-top:none; border-left:none;
  top:auto; bottom:-7px;            /* globo arriba del target → flecha abajo */
}
.dc-coach__bubble--below .dc-coach__arrow{
  bottom:auto; top:-7px;            /* globo debajo del target → flecha arriba */
  background:#00503C;
  border:1px solid rgba(220,180,120,.25);
  border-bottom:none; border-right:none;
}

.dc-coach--noanim .dc-coach__spot,
.dc-coach--noanim .dc-coach__bubble{ transition:none; }
.dc-coach--noanim .dc-coach__spot::after{ animation:none; }
@media (prefers-reduced-motion: reduce){
  .dc-coach__spot::after{ animation:none; }
}

/* fin coach css */

/* ================================================================
   TRANSFER CARD — datos bancarios para pago por transferencia
================================================================ */
.dc-transfer {
  background: #fff;
  border: 1.5px solid rgba(0,80,60,.16);
  border-radius: 16px;
  padding: 16px;
  margin-top: 4px;
  animation: card-reveal .3s cubic-bezier(.16,1,.3,1);
  box-shadow: 0 2px 12px rgba(0,80,60,.07);
}
@keyframes card-reveal {
  from { opacity:0; transform:translateY(-8px) scale(.98); }
  to   { opacity:1; transform:none; }
}

.dc-transfer__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(0,80,60,.10);
}
.dc-transfer__dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #00503C;
  flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(0,80,60,.12);
}
.dc-transfer__bank {
  font-size: .8rem;
  font-weight: 700;
  color: #002a1e;
  letter-spacing: .01em;
}
.dc-transfer__holder {
  font-size: .72rem;
  color: #4a6a5e;
  margin-top: 1px;
}
.dc-transfer__badge {
  margin-left: auto;
  font-size: .63rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 3px 9px;
  border-radius: 99px;
  background: #00503C;
  color: #DCB478;
  border: none;
  flex-shrink: 0;
}

.dc-transfer__rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dc-transfer__row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f5f9f7;
  border-radius: 10px;
  padding: 9px 12px;
  border: 1px solid rgba(0,80,60,.08);
}
.dc-transfer__key {
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: #4a7a63;
  flex-shrink: 0;
  min-width: 38px;
}
.dc-transfer__val {
  font-size: .82rem;
  color: #111;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dc-transfer__mono {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: .75rem;
  letter-spacing: .06em;
  color: #002a1e;
}
.dc-transfer__alias {
  font-weight: 700;
  letter-spacing: .02em;
  color: #002a1e;
}
.dc-transfer__copy {
  background: rgba(0,80,60,.08);
  border: 1px solid rgba(0,80,60,.14);
  border-radius: 8px;
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  color: #00503C;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .18s, transform .14s;
}
.dc-transfer__copy:hover { background: rgba(0,80,60,.14); }
.dc-transfer__copy:active { transform: scale(.9); }
.dc-transfer__notes {
  font-size: .72rem;
  color: #4a7a63;
  margin: 10px 0 0;
  font-style: italic;
  text-align: center;
}
.dc-transfer__empty {
  color: #778;
  font-size: .82rem;
  text-align: center;
  padding: 12px 0;
}
.dc-transfer__hint {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #E8F5F0;
  color: var(--primary-dark, #14503C);
  font-size: .78rem;
  line-height: 1.45;
}
.dc-transfer__hint svg { flex: none; width: 15px; height: 15px; margin-top: 1px; color: #25D366; }
.dc-transfer__hint b { font-weight: 700; }

/* ================================================================
   DESCUENTO EN EFECTIVO — fila destacada en el drawer
================================================================ */
.dc-discount-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(90deg, #eef7f2 0%, #fdf8ee 100%);
  border: 1.5px solid rgba(0,80,60,.18);
  border-radius: 10px;
  padding: 9px 12px;
  margin: 4px 0 6px;
  animation: disc-in .28s cubic-bezier(.16,1,.3,1);
}
/* el atributo [hidden] debe ganarle a display:flex (mismo caso que .dc-field) */
.dc-discount-row[hidden]{ display:none !important; }
@keyframes disc-in {
  from { opacity:0; transform:translateY(-4px); }
  to   { opacity:1; transform:none; }
}
.dc-disc-badge {
  flex-shrink: 0;
}
.dc-disc-pct {
  display: inline-block;
  font-size: .72rem;
  font-weight: 800;
  background: #00503C;
  color: #DCB478;
  padding: 3px 8px;
  border-radius: 99px;
  letter-spacing: .04em;
}
.dc-disc-lbl {
  font-size: .8rem;
  color: #2a4a38;
  flex: 1;
}
.dc-disc-price {
  font-size: .95rem;
  font-weight: 700;
  color: #00503C;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

/* ── Descuento pill en botón Efectivo ── */
.dc-pay__opt { position: relative; }
.dc-discount-pill {
  position: absolute;
  top: -6px; right: -6px;
  font-size: .58rem;
  font-weight: 800;
  background: #00503C;
  color: #DCB478;
  border: 1.5px solid rgba(220,180,120,.4);
  border-radius: 99px;
  padding: 2px 5px;
  pointer-events: none;
  line-height: 1;
  letter-spacing: .03em;
  animation: pill-pop .3s cubic-bezier(.34,1.56,.64,1);
}
@keyframes pill-pop {
  from { transform: scale(0); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

/* ================================================================
   TOAST — notificaciones fugaces (copy confirmado, etc.)
================================================================ */
.dc-toast {
  position: fixed;
  bottom: 84px; /* arriba del FAB */
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: #00503C;
  color: #fff;
  font-size: .83rem;
  font-weight: 600;
  padding: 10px 18px;
  border-radius: 99px;
  box-shadow: 0 4px 24px rgba(0,0,0,.35);
  z-index: 9998;
  opacity: 0;
  transition: opacity .22s ease, transform .22s cubic-bezier(.16,1,.3,1);
  pointer-events: none;
  white-space: nowrap;
  border: 1px solid rgba(220,180,120,.25);
}
.dc-toast--show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.dc-toast--error {
  background: #C0392B;
  border-color: rgba(255,100,100,.3);
}




/* ============================================================
   Logo interactivo reubicado en el header (antes vivía centrado
   en el hero). Misma animación de flote/arrastre/lanzamiento —
   solo que ahora vive fijo y chico, arriba a la izquierda, y
   siempre visible (no se oculta al hacer scroll ni durante el hero).
   ============================================================ */
#heroLogo{
  margin:0 auto 0 0;
  flex:none;
  isolation:isolate;
}
#heroLogo .hero__logo{
  width:auto;
  height:46px;
  filter:drop-shadow(0 4px 12px rgba(0,0,0,.35));
}
#heroLogo:hover .hero__logo{
  filter:drop-shadow(0 10px 22px rgba(0,0,0,.4)) drop-shadow(0 0 22px rgba(220,180,120,.5));
}
#heroLogo::after{
  width:56%;
  height:7px;
  bottom:-3px;
}
.nav.compact #heroLogo .hero__logo{ height:42px; }
@media (max-width:900px){
  #heroLogo .hero__logo{ height:38px; }
  .nav.compact #heroLogo .hero__logo{ height:36px; }
}
@media (max-width:480px){
  #heroLogo .hero__logo{ height:34px; }
}