/* =============================================================
   CALLE .35 · Food & Grill
   Colores tomados del manual de marca de illa Brand Studio:
   #922C29 rojo · #2D2B2F carbón · #E8B349 ámbar · #D1D3D2 gris · #FFFFFF
   ============================================================= */

/* 1. Tokens
   ------------------------------------------------------------- */
:root{
  --rojo:#922C29;
  --rojo-cl:#B4382F;
  --carbon:#2D2B2F;
  --ambar:#E8B349;
  --gris:#D1D3D2;
  --blanco:#FFFFFF;

  --bg:#1A181B;              /* carbón oscurecido, nunca negro puro */
  --bg-2:#221F23;
  --bg-3:var(--carbon);
  --crema:#F4F1EC;           /* texto sobre oscuro, nunca blanco puro */
  --crema-2:#C9C4BD;
  --crema-3:#8C8781;
  --linea:rgba(244,241,236,.13);

  --sans:"Montserrat",system-ui,-apple-system,"Segoe UI",sans-serif;
  --display:"Oswald","Arial Narrow",Impact,sans-serif;

  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-soft:cubic-bezier(.25,.46,.45,.94);
  --radio:14px;
  --gut:clamp(1.15rem,4vw,3.5rem);
  --max:1240px;
}

@property --giro{ syntax:"<angle>"; inherits:false; initial-value:0deg }

/* 2. Reset & base
   ------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; margin:0 }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:76px }
body{
  font-family:var(--sans); font-size:16px; line-height:1.6;
  background:var(--bg); color:var(--crema);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:clip; overscroll-behavior-y:none;
}
img,svg,video{ display:block; max-width:100% }
img{ height:auto }
button{ font:inherit; color:inherit; cursor:pointer; border:0; background:none }
a{ color:inherit; text-decoration:none }
p{ text-wrap:pretty }
h1,h2,h3{ text-wrap:balance; line-height:1.02; letter-spacing:-.01em; font-weight:600 }
ul{ list-style:none; padding:0 }
::selection{ background:var(--ambar); color:var(--carbon) }
:focus-visible{ outline:2px solid var(--ambar); outline-offset:3px; border-radius:4px }

.skip-link{ position:fixed; top:-100px; left:1rem; padding:.6rem 1rem;
  background:var(--ambar); color:var(--carbon); z-index:9999; border-radius:8px; font-weight:600 }
.skip-link:focus{ top:1rem }

/* 3. Tipografía de marca
   ------------------------------------------------------------- */
.kicker{
  font-family:var(--display); font-weight:500; font-size:.78rem;
  letter-spacing:.24em; text-transform:uppercase; color:var(--crema-3);
}
.kicker-amber{ color:var(--ambar) }

.sec-head{ max-width:var(--max); margin:0 auto; padding:0 var(--gut) }
.sec-head h2{
  font-family:var(--display); font-weight:600; text-transform:uppercase;
  font-size:clamp(2.1rem,6.2vw,4rem); line-height:.95; margin-top:.5rem;
}
.sec-sub{ color:var(--crema-3); margin-top:.9rem; max-width:46ch; font-size:.98rem }

/* 4. Botones
   ------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:var(--display); font-weight:500; font-size:.95rem;
  letter-spacing:.1em; text-transform:uppercase;
  padding:1rem 1.9rem; border-radius:999px;
  transition:transform .45s var(--ease-out), background .35s var(--ease-out),
             color .35s var(--ease-out), box-shadow .45s var(--ease-out);
}
.btn-primary{ background:var(--rojo); color:var(--blanco); box-shadow:0 12px 34px -14px var(--rojo) }
.btn-primary:hover{ background:var(--rojo-cl); transform:translateY(-3px); box-shadow:0 20px 44px -14px var(--rojo) }
.btn-ghost{ border:1px solid var(--linea); color:var(--crema) }
.btn-ghost:hover{ border-color:var(--ambar); color:var(--ambar); transform:translateY(-3px) }
.btn-wa{ background:var(--ambar); color:var(--carbon); width:100%; font-size:1rem; padding:1.15rem }
.btn-wa:hover{ background:#F2C468; transform:translateY(-2px) }

.btn-add{
  font-family:var(--display); font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  padding:.6rem 1.15rem; border-radius:999px; border:1px solid var(--linea); color:var(--crema-2);
  transition:all .4s var(--ease-out); white-space:nowrap;
}
.btn-add:hover{ background:var(--ambar); border-color:var(--ambar); color:var(--carbon) }
.btn-add.puesto{ background:var(--rojo); border-color:var(--rojo); color:#fff }
.btn-add.sm{ padding:.45rem .9rem; font-size:.72rem }
/* Plato que hoy no toca: el botón queda apagado y dice qué día sí. */
.btn-add[disabled]{
  /* el bloque ya va atenuado al .62, así que aquí poco más o no se lee el día */
  opacity:.9; cursor:not-allowed; border-style:dashed;
  border-color:rgba(244,241,236,.22); color:var(--crema-3);
}
.btn-add[disabled]:hover{ background:none; border-color:rgba(244,241,236,.22); color:var(--crema-3) }
.dia-cerrado{ opacity:.62 }
.dia-cerrado .op,.dia-cerrado .plato-p{ color:var(--crema-3) }
.hoy-tag{
  display:inline-block; vertical-align:middle; margin-left:.6rem;
  font-family:var(--display); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase;
  background:var(--rojo); color:#fff; padding:.2rem .55rem; border-radius:999px;
}
.grupo-finde .hoy-tag{ background:var(--carbon); color:var(--ambar) }
.cinta-cerrado{
  /* va fija arriba y empuja la barra de navegación, que también es fija */
  position:fixed; top:0; left:0; right:0; z-index:950;
  display:flex; flex-wrap:wrap; gap:.25rem .6rem;
  align-items:baseline; justify-content:center; text-align:center;
  padding:.7rem clamp(1rem,4vw,2rem); background:var(--rojo); color:#fff;
  font-size:.9rem; line-height:1.4;
}
.cinta-cerrado strong{ font-family:var(--display); letter-spacing:.08em; text-transform:uppercase }
.cinta-cerrado span{ color:rgba(255,255,255,.86) }
.es-lunes .nav{ top:var(--cinta,0px) }

.panel-aviso{
  margin:0 0 1rem; padding:.8rem 1rem; border-radius:12px; font-size:.88rem; line-height:1.45;
  background:rgba(146,44,41,.18); border:1px solid rgba(180,56,47,.45); color:var(--crema-2);
}

/* 5. Splash
   ------------------------------------------------------------- */
.splash{
  position:fixed; inset:0; z-index:9998; background:var(--bg);
  display:grid; place-items:center;
  transition:opacity .7s var(--ease-out), visibility .7s;
}
.splash-mark img{ width:min(30vw,150px); animation:latir 1.5s var(--ease-soft) infinite }
@keyframes latir{ 0%,100%{ transform:scale(1); opacity:.75 } 50%{ transform:scale(1.07); opacity:1 } }
.splash.fuera{ opacity:0; visibility:hidden; pointer-events:none }

/* 6. Nav
   ------------------------------------------------------------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:900;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.85rem var(--gut);
  transition:background .5s var(--ease-out), backdrop-filter .5s, border-color .5s, padding .5s var(--ease-out);
  border-bottom:1px solid transparent;
}
.nav.pegado{ background:rgba(26,24,27,.9); backdrop-filter:blur(14px); border-bottom-color:var(--linea); padding-top:.55rem; padding-bottom:.55rem }
.nav-logo img{ width:52px; transition:width .5s var(--ease-out) }
.nav.pegado .nav-logo img{ width:44px }
.nav-links{ display:none; gap:2rem }
.nav-links a{
  font-family:var(--display); font-size:.86rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--crema-2); position:relative; padding:.3rem 0;
}
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:0; height:1.5px; width:0; background:var(--ambar);
  transition:width .45s var(--ease-out);
}
.nav-links a:hover{ color:var(--crema) } .nav-links a:hover::after{ width:100% }
.nav-cart{
  display:flex; align-items:center; gap:.55rem;
  font-family:var(--display); font-size:.8rem; letter-spacing:.12em; text-transform:uppercase;
  border:1px solid var(--linea); border-radius:999px; padding:.55rem 1.05rem; color:var(--crema-2);
  transition:all .4s var(--ease-out);
}
.nav-cart:hover{ border-color:var(--ambar); color:var(--ambar) }
.nav-cart b{ background:var(--rojo); color:#fff; min-width:20px; height:20px; border-radius:999px;
  display:grid; place-items:center; font-size:.72rem; padding:0 5px }
.nav-cart span{ display:none }

/* 7. Hero
   ------------------------------------------------------------- */
.hero{ position:relative; min-height:100svh; display:flex; align-items:flex-end; overflow:hidden; isolation:isolate }
.hero-bg{ position:absolute; inset:0; z-index:-3 }
.hero-bg img{ width:100%; height:100%; object-fit:cover; object-position:center 38%; filter:saturate(1.05) contrast(1.04) }
.hero-tint{ position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(26,24,27,.72) 0%, rgba(26,24,27,.42) 32%, rgba(26,24,27,.88) 78%, var(--bg) 100%) }
.hero-mesh{
  position:absolute; inset:-25%; z-index:-2; pointer-events:none; opacity:.5;
  background:
    radial-gradient(closest-side at 28% 32%, rgba(146,44,41,.62), transparent 72%),
    radial-gradient(closest-side at 74% 66%, rgba(232,179,73,.34), transparent 72%);
  filter:blur(72px);
  animation:derivar 22s var(--ease-soft) infinite alternate;
}
@keyframes derivar{ from{ transform:translate3d(-3%,-2%,0) scale(1) } to{ transform:translate3d(4%,3%,0) scale(1.16) } }

/* círculos del sistema gráfico de la marca */
.hero-circles{ position:absolute; inset:0; z-index:-1; pointer-events:none; overflow:hidden }
.hero-circles i{ position:absolute; display:block; border-radius:50% }
.hero-circles .c-red{ width:46vmax; height:46vmax; left:-22vmax; bottom:-24vmax; background:var(--rojo); opacity:.16 }
.hero-circles .c-amber{ width:17vmax; height:17vmax; right:-6vmax; top:12vh; background:var(--ambar); opacity:.15 }
.hero-circles .c-arc{ width:11vmax; height:11vmax; right:16vw; bottom:26vh;
  border:2.5px solid var(--ambar); border-color:var(--ambar) transparent transparent var(--ambar);
  opacity:.55; transform:rotate(24deg) }

.hero-inner{ position:relative; width:100%; max-width:var(--max); margin:0 auto; padding:0 var(--gut) 15vh }
.hero-meta{ display:flex; align-items:center; gap:.6rem; font-family:var(--display);
  font-size:.78rem; letter-spacing:.22em; text-transform:uppercase; color:var(--crema-2); margin-bottom:1.4rem }
.hero-meta .dot{ width:8px; height:8px; border-radius:50%; background:var(--crema-3); flex:0 0 auto }
.hero-meta .dot.abierto{ background:#4ADE80; box-shadow:0 0 0 0 rgba(74,222,128,.6); animation:pulso 2.4s infinite }
@keyframes pulso{ 70%{ box-shadow:0 0 0 9px rgba(74,222,128,0) } 100%{ box-shadow:0 0 0 0 rgba(74,222,128,0) } }

.hero-title{
  font-family:var(--display); font-weight:600; text-transform:uppercase;
  font-size:clamp(2.9rem,12.5vw,8.2rem); line-height:.86; letter-spacing:-.015em;
}
.hero-title span{ display:block }
.hero-title .l2{ color:var(--rojo-cl) }
.hero-title .l3{ font-weight:400; font-size:.44em; letter-spacing:.06em; color:var(--crema-2); margin-top:.5rem }
.hero-sub{ color:var(--crema-2); max-width:44ch; margin:1.5rem 0 2.2rem; font-size:clamp(.97rem,2.2vw,1.1rem) }
.hero-actions{ display:flex; flex-wrap:wrap; gap:.85rem }
.hero-foot{ margin-top:2rem; font-size:.83rem; color:var(--crema-3); letter-spacing:.04em }

.hero-scroll{ position:absolute; left:50%; bottom:2.4rem; transform:translateX(-50%); z-index:2 }
.hero-scroll span{ display:block; width:1px; height:52px;
  background:linear-gradient(180deg,transparent,var(--ambar)); animation:bajar 2.2s var(--ease-soft) infinite }
@keyframes bajar{ 0%{ transform:scaleY(0); transform-origin:top } 45%{ transform:scaleY(1); transform-origin:top }
  55%{ transform:scaleY(1); transform-origin:bottom } 100%{ transform:scaleY(0); transform-origin:bottom } }

/* 8. Destacados
   ------------------------------------------------------------- */
.destacados{ padding:clamp(4.5rem,11vw,8rem) 0 clamp(3rem,7vw,5rem) }
.dest-grid{ max-width:var(--max); margin:clamp(2.2rem,5vw,3.4rem) auto 0; padding:0 var(--gut);
  display:grid; gap:clamp(1.1rem,2.6vw,1.9rem); grid-template-columns:1fr }
.dest{ background:var(--bg-2); border:1px solid var(--linea); border-radius:var(--radio); overflow:hidden;
  transition:transform .6s var(--ease-out), border-color .6s var(--ease-out), box-shadow .6s var(--ease-out) }
.dest:hover{ transform:translateY(-7px); border-color:rgba(232,179,73,.42);
  box-shadow:0 26px 56px -30px rgba(0,0,0,.95) }
.dest-foto{ aspect-ratio:4/3; overflow:hidden; background:var(--bg-3) }
.dest-foto img{ width:100%; height:100%; object-fit:cover;
  transition:transform 1s var(--ease-out), filter .7s var(--ease-out) }
.dest:hover .dest-foto img{ transform:scale(1.07); filter:saturate(1.15) }
.dest-txt{ padding:1.35rem 1.4rem 1.5rem }
.dest-txt h3{ font-family:var(--display); font-weight:600; text-transform:uppercase;
  font-size:1.45rem; letter-spacing:.01em }
.dest-txt p{ color:var(--crema-3); font-size:.92rem; margin-top:.5rem; min-height:2.6em }
.dest-pie{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-top:1.15rem }
.precio{ font-family:var(--display); font-weight:600; font-size:1.5rem; color:var(--ambar) }

/* 9. Marquee
   ------------------------------------------------------------- */
.marquee{ overflow:hidden; border-top:1px solid var(--linea); border-bottom:1px solid var(--linea);
  padding:1.1rem 0; background:var(--bg-2) }
.marquee-row{ display:flex; gap:2.2rem; width:max-content; animation:correr 34s linear infinite }
.marquee-row span{ font-family:var(--display); font-weight:500; text-transform:uppercase;
  letter-spacing:.16em; font-size:.92rem; color:var(--crema-3); white-space:nowrap }
.marquee-row i{ color:var(--rojo-cl); font-style:normal }
@keyframes correr{ to{ transform:translateX(-50%) } }

/* 10. Ofertas
   ------------------------------------------------------------- */
.ofertas{ padding:clamp(4rem,10vw,7rem) var(--gut); position:relative; overflow:hidden }
.ofertas-inner{ max-width:var(--max); margin:0 auto; background:var(--carbon);
  border-radius:calc(var(--radio) + 8px); padding:clamp(2rem,5.5vw,3.6rem); position:relative; overflow:hidden }
.ofertas-inner::before{ content:""; position:absolute; width:34vmax; height:34vmax; border-radius:50%;
  background:var(--rojo); opacity:.2; right:-14vmax; top:-16vmax; pointer-events:none }
.ofertas-head{ position:relative; max-width:52ch }
.ofertas-head h2{ font-family:var(--display); font-weight:600; text-transform:uppercase;
  font-size:clamp(2rem,5.6vw,3.5rem); line-height:.95; margin-top:.45rem; color:var(--ambar) }
.ofertas-bajada{ color:var(--crema-2); margin-top:.9rem; font-size:.98rem }
.ofertas-grid{ position:relative; display:grid; gap:clamp(1.6rem,4vw,2.8rem); margin-top:clamp(2rem,4vw,2.8rem) }
.oferta-dia h3{ font-family:var(--display); font-weight:600; text-transform:uppercase;
  font-size:1.15rem; letter-spacing:.16em; color:var(--crema); padding-bottom:.7rem;
  border-bottom:1px solid rgba(244,241,236,.16) }
.oferta-dia li{ display:flex; align-items:center; gap:.75rem; flex-wrap:wrap;
  padding:.95rem 0; border-bottom:1px solid rgba(244,241,236,.07) }
.oferta-dia .on{ flex:1 1 12ch; font-weight:500; font-size:.97rem }
.oferta-dia .oa{ font-size:.85rem; color:var(--crema-3); text-decoration:line-through }
.oferta-dia .op{ font-family:var(--display); font-weight:600; font-size:1.32rem; color:var(--ambar) }
.ofertas-nota{ position:relative; margin-top:1.8rem; font-size:.9rem; color:var(--crema-3); font-style:italic }

/* 11. Carta
   ------------------------------------------------------------- */
.carta{ padding:clamp(4rem,10vw,7rem) 0 }
.carta-tabs{ display:flex; gap:.55rem; overflow-x:auto; scrollbar-width:none;
  padding:0 var(--gut); margin:clamp(1.8rem,4vw,2.6rem) auto 0; max-width:var(--max);
  scroll-snap-type:x proximity }
.carta-tabs::-webkit-scrollbar{ display:none }
.carta-tab{ scroll-snap-align:start; white-space:nowrap; flex:0 0 auto;
  font-family:var(--display); font-size:.84rem; letter-spacing:.13em; text-transform:uppercase;
  padding:.68rem 1.25rem; border-radius:999px; border:1px solid var(--linea); color:var(--crema-3);
  transition:all .4s var(--ease-out) }
.carta-tab:hover{ color:var(--crema); border-color:var(--crema-3) }
.carta-tab[aria-selected="true"]{ background:var(--rojo); border-color:var(--rojo); color:#fff }

.carta-cuerpo{ max-width:var(--max); margin:clamp(1.8rem,4vw,2.6rem) auto 0; padding:0 var(--gut) }
.grupo{ display:none }
.grupo.activo{ display:grid; gap:clamp(1.5rem,4vw,3rem); grid-template-columns:1fr }
.grupo-foto{ border-radius:var(--radio); overflow:hidden; aspect-ratio:16/10; background:var(--bg-3) }
.grupo-foto img{ width:100%; height:100%; object-fit:cover }
.grupo-nota{ color:var(--crema-3); font-size:.94rem; margin-bottom:1.4rem }
.grupo-finde{ display:inline-block; font-family:var(--display); font-size:.72rem; letter-spacing:.16em;
  text-transform:uppercase; background:var(--ambar); color:var(--carbon);
  padding:.32rem .8rem; border-radius:999px; margin-bottom:.9rem }
.plato{ display:flex; align-items:center; gap:.85rem; padding:.95rem 0; border-bottom:1px solid var(--linea) }
.plato-n{ font-weight:600; font-size:1.02rem }
.plato-n em{ display:block; font-style:normal; font-weight:400; font-size:.85rem; color:var(--crema-3); margin-top:.12rem }
.plato-pt{ flex:1; border-bottom:1px dotted rgba(244,241,236,.2); transform:translateY(-4px); min-width:14px }
.plato-p{ font-family:var(--display); font-weight:600; font-size:1.2rem; color:var(--ambar); white-space:nowrap }

/* 12. Local
   ------------------------------------------------------------- */
.local{ display:grid; gap:clamp(2rem,5vw,3.5rem); max-width:var(--max); margin:0 auto;
  padding:clamp(3rem,8vw,6rem) var(--gut) clamp(4rem,9vw,7rem); grid-template-columns:1fr }
.local-foto{ border-radius:var(--radio); overflow:hidden; aspect-ratio:4/3 }
.local-foto img{ width:100%; height:100%; object-fit:cover }
.local-txt h2{ font-family:var(--display); font-weight:600; text-transform:uppercase;
  font-size:clamp(1.8rem,5vw,2.9rem); line-height:1; margin-top:.5rem }
.local-dir{ color:var(--crema-3); margin-top:.8rem }
.local-datos{ display:grid; gap:1.5rem; margin:2.2rem 0; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)) }
.local-datos dt{ font-family:var(--display); font-size:.74rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--crema-3); margin-bottom:.4rem }
.local-datos dd{ font-size:.94rem; line-height:1.5 }
.local-datos dd em{ color:var(--crema-3); font-style:normal; font-size:.86rem }
.local-datos a{ border-bottom:1px solid var(--linea); transition:border-color .4s var(--ease-out) }
.local-datos a:hover{ border-color:var(--ambar); color:var(--ambar) }

/* 13. Pie
   ------------------------------------------------------------- */
.pie{ border-top:1px solid var(--linea); padding:clamp(2.5rem,6vw,4rem) var(--gut) 7rem; text-align:center }
.pie-mark img{ width:78px; margin:0 auto }
.pie-lema{ font-family:var(--display); font-size:.82rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--crema-3); margin-top:1.1rem }
.pie-legal{ font-size:.78rem; color:var(--crema-3); opacity:.6; margin-top:1.4rem }

/* 14. Carrito flotante
   ------------------------------------------------------------- */
.fab{ position:fixed; left:50%; transform:translateX(-50%) translateY(140%); bottom:1.1rem; z-index:880;
  display:flex; align-items:center; gap:.85rem; background:var(--rojo); color:#fff;
  padding:.9rem 1.35rem; border-radius:999px; box-shadow:0 18px 40px -14px rgba(0,0,0,.9);
  font-family:var(--display); letter-spacing:.1em; text-transform:uppercase; font-size:.88rem;
  transition:transform .6s var(--ease-out), background .4s var(--ease-out); width:calc(100% - 2.2rem); max-width:420px;
  justify-content:space-between }
.fab.visible{ transform:translateX(-50%) translateY(0) }
.fab:hover{ background:var(--rojo-cl) }
.fab-n{ background:rgba(0,0,0,.28); min-width:26px; height:26px; border-radius:999px;
  display:grid; place-items:center; font-size:.8rem; padding:0 6px }
.fab-p{ font-weight:600 }

/* 15. Panel del pedido
   ------------------------------------------------------------- */
.panel{ position:fixed; inset:0; z-index:960 }
.panel[hidden]{ display:none }
.panel-fondo{ position:absolute; inset:0; background:rgba(10,9,10,.72); backdrop-filter:blur(4px);
  opacity:0; transition:opacity .5s var(--ease-out) }
.panel.abierto .panel-fondo{ opacity:1 }
.panel-caja{ position:absolute; right:0; top:0; bottom:0; width:min(460px,100%);
  background:var(--bg-2); border-left:1px solid var(--linea);
  display:flex; flex-direction:column; overflow-y:auto;
  transform:translateX(100%); transition:transform .55s var(--ease-out) }
.panel.abierto .panel-caja{ transform:translateX(0) }
.panel-head{ display:flex; align-items:center; justify-content:space-between;
  padding:1.35rem var(--gut); border-bottom:1px solid var(--linea); position:sticky; top:0;
  background:var(--bg-2); z-index:2 }
.panel-head h2{ font-family:var(--display); font-weight:600; text-transform:uppercase;
  font-size:1.25rem; letter-spacing:.08em }
.panel-x{ font-size:2rem; line-height:1; color:var(--crema-3); padding:0 .35rem }
.panel-x:hover{ color:var(--ambar) }

.panel-items{ padding:0 var(--gut) }
.linea{ display:flex; align-items:center; gap:.8rem; padding:1rem 0; border-bottom:1px solid var(--linea) }
.linea-n{ flex:1; font-size:.93rem; font-weight:500 }
.linea-n small{ display:block; color:var(--crema-3); font-weight:400; font-size:.8rem }
.linea-cant{ display:flex; align-items:center; gap:.45rem }
.linea-cant button{ width:28px; height:28px; border-radius:50%; border:1px solid var(--linea);
  display:grid; place-items:center; color:var(--crema-2); font-size:1rem; line-height:1;
  transition:all .35s var(--ease-out) }
.linea-cant button:hover{ border-color:var(--ambar); color:var(--ambar) }
.linea-cant b{ min-width:20px; text-align:center; font-family:var(--display); font-size:1rem }
.linea-p{ font-family:var(--display); font-weight:600; min-width:64px; text-align:right; color:var(--ambar) }

.panel-vacio{ padding:3rem var(--gut); text-align:center; color:var(--crema-3) }
.panel-vacio .btn{ margin-top:1.2rem }

.panel-form{ padding:1.5rem var(--gut) 2.5rem; display:grid; gap:1rem }
.panel-total{ display:flex; align-items:center; justify-content:space-between;
  padding:1rem 0 1.2rem; border-bottom:1px solid var(--linea); margin-bottom:.4rem }
.panel-total span{ font-family:var(--display); letter-spacing:.16em; text-transform:uppercase; font-size:.85rem; color:var(--crema-3) }
.panel-total b{ font-family:var(--display); font-weight:600; font-size:1.7rem; color:var(--ambar) }
.panel-form label{ display:grid; gap:.4rem; font-size:.83rem; color:var(--crema-3);
  font-family:var(--display); letter-spacing:.1em; text-transform:uppercase }
.panel-form label em{ font-style:normal; text-transform:none; letter-spacing:0; opacity:.7 }
.panel-form input[type=text]{ font-family:var(--sans); font-size:.95rem; letter-spacing:0; text-transform:none;
  background:var(--bg); border:1px solid var(--linea); color:var(--crema);
  border-radius:10px; padding:.85rem .95rem; transition:border-color .35s var(--ease-out) }
.panel-form input[type=text]:focus{ border-color:var(--ambar); outline:none }
.panel-form input::placeholder{ color:var(--crema-3); opacity:.65 }

.panel-entrega{ display:flex; gap:.6rem }
.radio{ flex:1; display:flex !important; align-items:center; justify-content:center; gap:.45rem;
  border:1px solid var(--linea); border-radius:10px; padding:.8rem .5rem; cursor:pointer;
  font-size:.78rem !important; transition:all .35s var(--ease-out) }
.radio input{ accent-color:var(--ambar) }
.radio:has(input:checked){ border-color:var(--ambar); color:var(--ambar) }

.btn-ubi{ display:flex; align-items:center; justify-content:center; gap:.55rem; width:100%;
  border:1px dashed var(--linea); border-radius:10px; padding:.85rem;
  font-family:var(--display); font-size:.82rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--crema-2); margin-top:.85rem; transition:all .4s var(--ease-out) }
.btn-ubi:hover{ border-color:var(--ambar); color:var(--ambar) }
.btn-ubi.ok{ border-style:solid; border-color:#4ADE80; color:#4ADE80 }
.btn-ubi-i{ font-size:1.05rem }
.panel-ayuda{ font-size:.76rem; color:var(--crema-3); line-height:1.45; margin-top:.5rem }
.panel-ayuda.center{ text-align:center }

/* 16. Reveals
   ------------------------------------------------------------- */
[data-reveal]{ opacity:0; transform:translateY(26px);
  transition:opacity .9s var(--ease-out), transform .9s var(--ease-out) }
[data-reveal].dentro{ opacity:1; transform:none }
.is-ready [data-reveal]{ will-change:opacity,transform }

/* 17. Responsive
   ------------------------------------------------------------- */
@media (min-width:540px){
  .dest-grid{ grid-template-columns:repeat(2,1fr) }
  .nav-cart span{ display:inline }
  .fab{ width:auto; min-width:300px }
}
@media (min-width:720px){
  .ofertas-grid{ grid-template-columns:repeat(2,1fr) }
  .grupo.activo{ grid-template-columns:1fr 1.15fr; align-items:start }
  .grupo-foto{ position:sticky; top:96px }
  .local{ grid-template-columns:1fr 1fr; align-items:center }
}
@media (min-width:960px){
  .nav-links{ display:flex }
  .dest-grid{ grid-template-columns:repeat(4,1fr) }
  .dest-txt p{ min-height:3.9em }
  .hero-inner{ padding-bottom:18vh }
}

/* 18. Movimiento reducido — solo lo intrusivo
   ------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .hero-mesh{ animation:none }
  .marquee-row{ animation:none }
  .hero-scroll span{ animation:none }
  .splash-mark img{ animation:none }
  .hero-meta .dot.abierto{ animation:none }
}