/* =============================================================
   LEFEUR · Pedidos — hoja de estilos única
   Dirección: cacao oscuro + dulce de leche. Instrument Serif / Inter.
   1 Tokens · 2 Reset · 3 Utilidades · 4 Tipografía · 5 Componentes
   6 Secciones · 7 Efectos · 8 Responsive · 9 Movimiento reducido
   ============================================================= */

/* ============================ 1. TOKENS ============================ */
:root{
  --bg:        #14100C;
  --bg-2:      #1A1510;
  --panel:     #221B14;
  --panel-2:   #2B2119;
  --panel-3:   #362A20;

  --cream:     #F3EADB;
  --cream-2:   #D6C8B2;
  --cream-3:   #9A8B75;

  --dulce:     #E2A756;
  --dulce-2:   #C4863A;
  --dulce-3:   #7A5626;
  --pedido:    #A92D3F;
  --pedido-2:  #C23B50;
  --frambuesa: #C9596C;
  --pistacho:  #A9BE86;
  --wa:        #25B37D;

  --line:      rgba(243,234,219,.11);
  --line-2:    rgba(243,234,219,.20);

  --barra-h:   62px;
  --rieles-h:  58px;
  --wrap:      1240px;
  --radio:     16px;
  --radio-sm:  10px;

  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --ease:      cubic-bezier(.16, 1, .3, 1);
  --ease-soft: cubic-bezier(.25, .46, .45, .94);

  --sombra:    0 2px 6px rgba(0,0,0,.28), 0 16px 40px rgba(0,0,0,.34);
  --sombra-lg: 0 8px 20px rgba(0,0,0,.36), 0 32px 70px rgba(0,0,0,.46);
}

/* ============================ 2. RESET ============================ */
*, *::before, *::after{ box-sizing:border-box; margin:0; }
html{ -webkit-text-size-adjust:100%; tab-size:2; overflow-x:clip; scroll-behavior:smooth; }
body{
  background:var(--bg); color:var(--cream);
  font-family:var(--sans); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:clip; overscroll-behavior-y:none;
}
img, svg{ display:block; max-width:100%; }
img{ height:auto; }
button{ font:inherit; color:inherit; cursor:pointer; border:0; background:none; }
input, textarea, select{ font:inherit; color:inherit; }
a{ color:inherit; text-decoration:none; }
p{ text-wrap:pretty; }
ul, ol{ list-style:none; padding:0; }
fieldset{ border:0; padding:0; min-width:0; }
legend{ padding:0; }
::selection{ background:var(--dulce); color:var(--bg); }
:focus-visible{ outline:2px solid var(--dulce); outline-offset:3px; border-radius:4px; }

/* ============================ 3. UTILIDADES ============================ */
.skip-link{
  position:fixed; top:-100px; left:16px; z-index:200;
  padding:.7rem 1.1rem; background:var(--cream); color:var(--bg);
  border-radius:8px; font-weight:600;
}
.skip-link:focus{ top:16px; }
[hidden]{ display:none !important; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:20px; }

/* Rótulos editoriales (encabezados de zona, hero). Van en la serif para hablar
   el mismo idioma que los títulos. Los rótulos de interfaz —carrito, ventana de
   opciones, pie— siguen en la sans, que a tamaño chico se lee mejor. */
.kicker{
  font-family:var(--serif); font-weight:600;
  font-size:.76rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--dulce); margin-bottom:.9rem;
}

/* ============================ 4. TIPOGRAFÍA ============================ */
/* Playfair tiene más contraste y astas más altas que la anterior: pide algo
   más de interlínea y medio peso extra para no adelgazarse sobre el cacao. */
h1, h2, h3{
  font-family:var(--serif); font-weight:500;
  line-height:1.08; letter-spacing:-.015em; text-wrap:balance;
}
h1{ font-size:clamp(2.5rem, 7.4vw, 4.6rem); }
h2{ font-size:clamp(1.95rem, 5vw, 3.1rem); }
h3{ font-family:var(--sans); font-weight:600; letter-spacing:-.005em; }
em{ font-style:italic; color:var(--dulce); }

/* ============================ 5. COMPONENTES ============================ */

/* --- Botones --- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  min-height:50px; padding:0 1.55rem; border-radius:999px;
  font-weight:600; font-size:.97rem; letter-spacing:.005em;
  border:1.5px solid transparent; white-space:nowrap;
  transition:background-color .28s var(--ease), color .28s var(--ease),
             border-color .28s var(--ease), transform .18s var(--ease),
             box-shadow .28s var(--ease);
}
.btn:active{ transform:translateY(1px); }
.btn-primario{ background:var(--dulce); color:#20170C; }
.btn-primario:hover{ background:#EEB868; box-shadow:0 10px 30px rgba(226,167,86,.24); }
.btn-pedido{ background:var(--pedido); color:#FFF7EF; border-color:rgba(255,247,239,.06); }
.btn-pedido:hover{ background:var(--pedido-2); color:#fff; box-shadow:0 10px 30px rgba(169,45,63,.28); }
.btn-linea{ border-color:var(--line-2); color:var(--cream); }
.btn-linea:hover{ border-color:var(--dulce); color:var(--dulce); }
.btn-wa{ background:var(--wa); color:#05261A; width:100%; }
.btn-wa:hover{ background:#2FCB8F; box-shadow:0 10px 30px rgba(37,179,125,.26); }
.btn:disabled{ opacity:.42; cursor:not-allowed; transform:none; box-shadow:none; }

/* --- Barra superior --- */
.barra{
  position:sticky; top:0; z-index:60;
  background:color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
@supports not (backdrop-filter: blur(14px)){ .barra{ background:var(--bg); } }
.barra-in{
  width:100%; max-width:var(--wrap); margin-inline:auto; padding:0 20px;
  min-height:var(--barra-h); display:flex; align-items:center; gap:1rem;
}
/* La marca es la caligrafía real de Lefeur, recoloreada a crema con fondo
   transparente (la genera tools/preparar-fotos.py desde el logo original). */
.marca{ display:flex; align-items:center; margin-right:auto; }
.marca img{
  height:44px; width:auto;
  transition:opacity .28s var(--ease);
}
.marca:hover img{ opacity:.78; }

.estado{ display:none; align-items:center; gap:.5rem; font-size:.82rem; color:var(--cream-2); }
.estado-punto{
  width:7px; height:7px; border-radius:50%; background:var(--cream-3); flex:0 0 auto;
}
.estado.es-abierto .estado-punto{ background:var(--pistacho); box-shadow:0 0 0 4px rgba(169,190,134,.16); }
.estado.es-cerrado .estado-punto{ background:var(--frambuesa); box-shadow:0 0 0 4px rgba(201,89,108,.14); }

.carrito-btn{
  display:inline-flex; align-items:center; gap:.6rem;
  min-height:42px; padding:0 .7rem 0 1.05rem; border-radius:999px;
  border:1.5px solid var(--line-2); font-size:.9rem; font-weight:600;
  transition:border-color .28s var(--ease), background-color .28s var(--ease);
}
.carrito-btn:hover{ border-color:var(--dulce); }
.carrito-btn.tiene{ border-color:var(--dulce); background:rgba(226,167,86,.1); }
.carrito-cuenta{
  display:grid; place-items:center; min-width:26px; height:26px; padding:0 .4rem;
  border-radius:999px; background:var(--panel-3); color:var(--cream);
  font-size:.78rem; font-weight:700; font-variant-numeric:tabular-nums;
  transition:background-color .28s var(--ease), color .28s var(--ease);
}
.carrito-btn.tiene .carrito-cuenta{ background:var(--dulce); color:#20170C; }

/* --- Ficha de producto ---
   La foto va limpia: sin velo oscuro encima. El velo existía sólo para que se
   leyera el chip de precio apoyado sobre la foto; con el precio abajo, al lado
   del "+", la foto se ve entera y con su propio color. El cuadro es cuadrado
   (antes 4:5): la ficha entra más corta y se recorre menos la pantalla.
   --------------------------------------------------------------------------- */
.prods{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:11px;
}
.prod{
  position:relative; display:flex; flex-direction:column;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radio);
  overflow:hidden;
  transition:border-color .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease);
}
.prod:hover{ transform:translateY(-3px); box-shadow:var(--sombra); border-color:var(--line-2); }

.prod-foto{ position:relative; aspect-ratio:4/5; overflow:hidden; background:var(--panel-2); }
/* --foto-y lo pone main.js foto por foto (ver "encuadre de las fotos"): las
   cenitales van al centro, las sostenidas con la mano anclan abajo. El valor de
   reserva es el centro, que es lo correcto si el script no llega a correr. */
.prod-foto img{
  width:100%; height:100%; object-fit:cover;
  object-position:center var(--foto-y, 50%);
  filter:saturate(1.06) brightness(1.07);
  transition:transform .7s var(--ease), filter .5s var(--ease);
}
.prod:hover .prod-foto img{ transform:scale(1.05); filter:saturate(1.12) brightness(1.13); }

/* Sello tipográfico para los productos que todavía no tienen foto: la cantidad
   ("12", "200 g") o la marca. Es una ficha a propósito, no un hueco. */
.prod-foto.es-sello{
  display:grid; place-items:center;
  background:
    radial-gradient(76% 64% at 50% 40%, rgba(226,167,86,.20), transparent 74%),
    linear-gradient(160deg, var(--panel-3), var(--panel));
}
.prod-foto.es-sello .sello-txt{
  font-family:var(--serif); font-size:clamp(2rem, 4.6vw, 3rem); font-style:italic;
  color:var(--dulce); opacity:.62; letter-spacing:.01em; line-height:1;
}

/* Fondo oscuro sólido, no un tinte translúcido: estos chips caen encima de
   fotos que pueden ser casi blancas (platos, mármol) y un tinte al 18% los
   dejaba ilegibles. El color va en el texto y el borde. */
/* Contenedor de los cartelitos: pueden convivir más de uno (veggie + más
   pedido), así que el que se posiciona es el contenedor, no cada chip. */
.prod-etqs{
  position:absolute; right:8px; top:8px; z-index:2;
  display:flex; flex-direction:column; align-items:flex-end; gap:.32rem;
}
.prod-etq{
  padding:.24rem .52rem; border-radius:999px;
  font-size:.62rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  background:rgba(18,14,10,.82);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.prod-etq.veg{ color:var(--pistacho); border:1px solid rgba(169,190,134,.42); }
/* Sin espaciado extra: en un número "-10%" el letter-spacing separa el signo y
   parece un error de tipeo. */
.prod-etq.off{ color:#F2A9B4; border:1px solid rgba(201,89,108,.48);
  letter-spacing:0; font-variant-numeric:tabular-nums; }
.prod-etq.popular{ color:var(--dulce); border:1px solid rgba(226,167,86,.48); }

.prod-txt{ padding:8px 9px 0; flex:1 1 auto; }
.prod-txt h3{ font-size:.86rem; line-height:1.22; }

/* El nombre es un botón; su ::after cubre la ficha entera para que se pueda
   tocar en cualquier parte y abrir la ventana del producto. El "+" de abajo
   queda por encima (z-index 2) y sigue funcionando. */
.prod-abrir{
  font:inherit; color:inherit; text-align:left; padding:0;
  transition:color .25s var(--ease);
}
.prod-abrir::after{ content:""; position:absolute; inset:0; z-index:1; border-radius:var(--radio); }
.prod:hover .prod-abrir{ color:var(--dulce); }
.prod-abrir:focus-visible{ outline:none; }
.prod-abrir:focus-visible::after{ outline:2px solid var(--dulce); outline-offset:-3px; }
.prod-txt p{
  margin-top:.2rem; font-size:.71rem; line-height:1.32; color:var(--cream-3);
  display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.prod-nota{ margin-top:.28rem; font-size:.67rem; color:var(--dulce); }

/* --- Pie de la ficha: el precio y el "+" comparten una sola línea --- */
.prod-pie{
  display:flex; align-items:center; justify-content:space-between; gap:.4rem;
  margin-top:auto; padding:8px 9px 9px;
}
.prod-precio{
  display:flex; flex-direction:column; align-items:flex-start; min-width:0;
  line-height:1.14; font-variant-numeric:tabular-nums; letter-spacing:-.01em;
}
.prod-precio i{ font-style:normal; font-size:.67rem; font-weight:500; color:var(--cream-3); text-decoration:line-through; }
.prod-precio b{ font-size:.98rem; font-weight:700; color:var(--cream); }
/* "desde" arriba y en chico: en una columna de 150 px una sola línea
   "desde $9.500" empuja al "+" fuera de la ficha. */
.prod-precio.es-desde b::before{
  content:"desde"; display:block;
  font-size:.6rem; font-weight:600; letter-spacing:.11em; text-transform:uppercase;
  color:var(--cream-3); text-decoration:none;
}
.prod-accion{ position:relative; z-index:2; flex:0 0 auto; }

/* --- Firma de la página: el "+" se convierte en contador --- */
.add{
  position:relative;
  display:grid; place-items:center;
  width:40px; height:40px; padding:0; border-radius:50%;
  border:1.5px solid rgba(226,167,86,.42); background:rgba(226,167,86,.13);
  color:var(--dulce); font-size:1.4rem; font-weight:400; line-height:1;
  transition:background-color .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease), transform .25s var(--ease);
}
.add:hover{ background:var(--dulce); border-color:var(--dulce); color:#20170C; transform:scale(1.07); }
.add:active{ transform:scale(.94); }
/* Con variedades el "+" abre la ventana; la burbuja dice cuántas ya hay en el
   pedido, que antes era un texto largo que no entra al lado del precio. */
.add.tiene-n{ border-color:var(--dulce); }
.add-n{
  position:absolute; top:-6px; right:-6px; min-width:19px; height:19px; padding:0 4px;
  border-radius:999px; background:var(--dulce); color:#20170C;
  font-size:.66rem; font-weight:700; line-height:19px; text-align:center;
  font-variant-numeric:tabular-nums; box-shadow:0 0 0 2px var(--panel);
}
/* Marca fija de "hay que elegir" (tamaño/sabor) antes de sumar al carrito --
   sin ella este botón es un "+" idéntico al de agregado directo. Se reemplaza
   por .add-n en cuanto hay unidades, nunca aparecen juntas. */
.add-marca{
  position:absolute; top:-6px; right:-6px; min-width:19px; height:19px; padding:0 3px;
  border-radius:999px; background:var(--panel-3); color:var(--dulce);
  font-size:.72rem; font-weight:700; line-height:17px; text-align:center;
  border:1.5px solid var(--dulce-3); box-shadow:0 0 0 2px var(--panel);
}
/* "A consultar" no tiene precio que mostrar: el botón se estira y lo dice él. */
.prod-pie.es-consulta{ justify-content:stretch; }
.prod-pie.es-consulta .prod-accion{ flex:1 1 auto; }
.add.es-consulta{
  width:100%; height:auto; min-height:40px; border-radius:999px; padding:.3rem .7rem;
  border-style:dashed; border-color:var(--line-2); background:transparent;
  color:var(--cream-2); font-size:.8rem; font-weight:600; line-height:1.2;
}
.add.es-consulta:hover{ border-style:solid; border-color:var(--dulce); background:transparent; color:var(--dulce); transform:none; }

.paso-cant{
  display:flex; align-items:center; gap:0;
  min-height:40px; padding:0 .1rem;
  border-radius:999px; border:1.5px solid var(--dulce); background:rgba(226,167,86,.12);
  animation:brotar .34s var(--ease);
}
@keyframes brotar{ from{ transform:scale(.92); opacity:.4; } to{ transform:scale(1); opacity:1; } }
.paso-cant button{
  width:32px; height:32px; border-radius:50%; display:grid; place-items:center;
  color:var(--dulce); font-size:1.1rem; line-height:1;
  transition:background-color .25s var(--ease);
}
.paso-cant button:hover{ background:rgba(226,167,86,.18); }
.paso-cant .n{ min-width:17px; text-align:center; font-size:.88rem; font-weight:700; font-variant-numeric:tabular-nums; }

/* Categoría de un solo producto: la ficha ocupa el ancho completo y se acuesta,
   así no queda una tarjeta suelta con tres huecos al lado. */
.prods.es-unica{ grid-template-columns:1fr; }
.prods.es-unica .prod-foto{ aspect-ratio:16/10; }
/* Acá sí hay velo: la foto se funde con el panel de texto que tiene pegado. */
.prods.es-unica .prod-foto::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, transparent 55%, rgba(14,11,8,.5) 100%);
}

/* Brasa: la ficha que ya está en el pedido queda encendida. */
.prod.en-pedido{ border-color:rgba(226,167,86,.5); }
.prod.en-pedido::before{
  content:""; position:absolute; inset:-30% -20% auto -20%; height:70%; z-index:0;
  background:radial-gradient(50% 60% at 50% 100%, rgba(226,167,86,.22), transparent 72%);
  pointer-events:none;
}

/* ============================ 6. SECCIONES ============================ */

/* --- Hero --- */
.hero{
  position:relative; isolation:isolate; overflow:hidden;
  min-height:clamp(620px, calc(100svh - var(--barra-h) - 96px), 820px);
  padding:0;
  background:#14100C;
}
.hero::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:url("assets/img/ambiente/frente-local-lefeur.jpg") center top / cover no-repeat;
}
.hero::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(20,16,12,.06) 0%, rgba(20,16,12,.08) 28%, rgba(20,16,12,.74) 68%, var(--bg) 100%),
    linear-gradient(90deg, rgba(20,16,12,.78) 0%, rgba(20,16,12,.40) 46%, rgba(20,16,12,.22) 100%);
}
.hero-in{
  position:relative; z-index:2;
  width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:20px;
  min-height:inherit; padding-block:clamp(9rem, 26vh, 14rem) clamp(1.5rem, 4vw, 2.7rem);
  display:grid; gap:clamp(1.1rem, 2.4vw, 1.6rem); align-content:end; justify-items:start;
}
.hero-txt{ max-width:min(690px, 100%); text-shadow:0 2px 18px rgba(0,0,0,.45); }
.hero h1{ margin-bottom:1.1rem; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.6rem; }
.hero-txt .kicker{ max-width:100%; line-height:1.45; color:#F4B756; }

@media (max-width: 539px){
  .hero::after{
    background-image:url("assets/img/ambiente/frente-local-lefeur-noche.jpg");
    background-position:center bottom;
    background-size:auto 106%;
    background-repeat:no-repeat;
  }
  .hero::before{
    background:
      linear-gradient(180deg, rgba(20,16,12,.18) 0%, rgba(20,16,12,.12) 30%, rgba(20,16,12,.58) 62%, rgba(20,16,12,.72) 100%),
      linear-gradient(90deg, rgba(20,16,12,.62) 0%, rgba(20,16,12,.28) 50%, rgba(20,16,12,.42) 100%);
  }
  .hero-txt .kicker{
    display:inline-block; max-width:35ch;
    font-size:.68rem; line-height:1.45; letter-spacing:.105em;
    text-shadow:
      0 1px 2px rgba(0,0,0,.95),
      0 4px 12px rgba(0,0,0,.9),
      0 0 22px rgba(0,0,0,.72);
  }
}

/* Vuelve el diseño original de la ficha de horario (la que a Facundo le
   gustaba): caja con borde + degradé sutil, etiqueta chica en versalitas
   arriba (con el punto verde/rojo de abierto-cerrado) y un valor grande en
   serif abajo. Ahora las 3 fichas del hero (horario, Google, Instagram)
   comparten ESE mismo look, en una sola fila de 3 columnas iguales — antes
   era una pill genérica de borde redondeado 999px, se sacó por completo. */
/* min-width:0 en el grid y en cada ficha: sin esto, un token largo sin
   espacios (p. ej. "@lefeurbakery") fuerza un ancho mínimo mayor al
   contenedor y las 3 columnas se desbordan del hero en mobile (gotcha ya
   conocido del proyecto: grid no encoge más allá del min-content de sus
   hijos por defecto). overflow-wrap permite que ese token corte si hace
   falta, en vez de estirar la columna. */
.hero-social{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:9px;
  margin-top:9px; max-width:460px; min-width:0;
  /* align-items por defecto (stretch): las 3 tarjetas quedan del mismo alto
     aunque una tenga una línea más de texto (p. ej. "Cerrado · abre..."),
     para que la fila se vea simétrica. */
}
.hero-social-item{
  display:block; min-width:0; padding:.8rem .8rem;
  border:1px solid var(--line); border-radius:var(--radio-sm);
  background:linear-gradient(155deg, rgba(226,167,86,.06), transparent 68%);
  text-decoration:none; cursor:pointer; overflow-wrap:anywhere;
  transition:border-color .25s var(--ease), background-color .25s var(--ease);
}
a.hero-social-item:hover,
a.hero-social-item:focus-visible{
  border-color:var(--dulce);
  background:linear-gradient(155deg, rgba(226,167,86,.12), transparent 68%);
}
.hd-label{
  display:flex; align-items:center; gap:.35rem;
  font-family:var(--serif); font-weight:600;
  font-size:.62rem; letter-spacing:.09em; text-transform:uppercase;
  color:var(--cream-3);
  /* Igual que .hd-valor: nunca cortar a mitad de palabra ("GOOGL-E"). A este
     tamaño de columna (1/3 de la fila) ya entran las etiquetas cortas que
     usamos (Dom/Lun/Mié…, Google, IG); si en algún momento se necesita una
     más larga, que desborde levemente antes que partirse fea. */
  overflow-wrap:normal;
}
.hd-label svg{ width:12px; height:12px; flex:0 0 auto; color:var(--dulce); }
.hd-punto{ width:6px; height:6px; border-radius:50%; background:var(--cream-3); flex:0 0 auto; }
.hs-horario.es-abierto .hd-punto{ background:var(--pistacho); box-shadow:0 0 0 3px rgba(169,190,134,.16); }
.hs-horario.es-cerrado .hd-punto{ background:var(--frambuesa); box-shadow:0 0 0 3px rgba(201,89,108,.15); }
.hd-valor{
  display:block; margin-top:.36rem;
  font-family:var(--serif); font-weight:500; font-size:clamp(.95rem, 2.6vw, 1.16rem);
  line-height:1.2; letter-spacing:-.005em; color:var(--cream);
  /* @lefeurbakery no entra en una columna de 1/3 sin cortarse — en vez de
     dejar que overflow-wrap:anywhere (heredado de .hero-social-item) lo
     parta en cualquier lado ("lefeurbak-ery"), el HTML tiene un espacio de
     ancho cero después de "lefeur" y acá se vuelve a exigir un corte solo
     en límites de palabra/ese punto, nunca a mitad de sílaba arbitraria. */
  overflow-wrap:normal;
}
.hd-extra{ display:block; margin-top:.22rem; font-size:.72rem; color:var(--cream-3); }

/* --- La ficha de horario es un <details>: mismo look de arriba, ahora
   clickeable/tappeable para desplegar la semana completa. El navegador
   maneja el toggle — sin JS propio, con foco y teclado nativos. --- */
.hs-horario > summary{ cursor:pointer; list-style:none; }
.hs-horario > summary::-webkit-details-marker{ display:none; }
.hs-horario > summary::marker{ content:""; }
.hs-horario > summary:focus-visible{ outline:2px solid var(--dulce); outline-offset:3px; border-radius:4px; }
/* Abierta, la ficha pasa a ocupar las 3 columnas: la lista de 7 días
   necesita más ancho del que da 1/3 de la fila, si no los nombres de los
   días se cortan a mitad de palabra igual que le pasaba a las etiquetas
   antes de acortarlas. Cerrada, vuelve a ocupar 1 sola columna y la fila
   sigue simétrica. */
.hs-horario{ grid-column:1 / 2; }
.hs-horario[open]{ grid-column:1 / -1; border-color:var(--dulce); }
.hs-chev{
  width:11px; height:11px; flex:0 0 auto; margin-left:auto; color:var(--cream-3);
  transition:transform .25s var(--ease);
}
.hs-horario[open] .hs-chev{ transform:rotate(180deg); }

/* Panel que se despliega debajo, con la semana completa. */
.hero-horario-panel{
  margin-top:.6rem; padding-top:.6rem; border-top:1px solid var(--line);
  animation:aparecer .28s var(--ease);
}
.hero-horario-lista{ display:grid; }
.hero-horario-lista li{
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  padding:.32rem 0; border-bottom:1px solid var(--line);
  font-size:.78rem; color:var(--cream-2);
}
.hero-horario-lista li:last-child{ border-bottom:0; }
.hero-horario-lista li .cerrado{ color:var(--cream-3); }
.hero-horario-lista li.es-hoy{ color:var(--dulce); font-weight:600; }

/* --- Rieles de categorías --- */
.rieles{
  position:sticky; top:var(--barra-h); z-index:50;
  background:color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
@supports not (backdrop-filter: blur(12px)){ .rieles{ background:var(--bg); } }
.rieles-in{
  width:100%; max-width:var(--wrap); margin-inline:auto;
  display:flex; gap:.4rem; align-items:center;
  min-height:var(--rieles-h); padding:0 20px;
  overflow-x:auto; overflow-y:visible;
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.rieles-in::-webkit-scrollbar{ display:none; }
.riel{
  flex:0 0 auto; padding:.44rem .9rem; border-radius:999px;
  border:1px solid var(--line); font-size:.84rem; font-weight:500; color:var(--cream-2);
  transition:border-color .28s var(--ease), color .28s var(--ease), background-color .28s var(--ease);
}
.riel:hover{ color:var(--cream); border-color:var(--line-2); }
.riel.es-activo{ background:var(--dulce); border-color:var(--dulce); color:#20170C; font-weight:600; }
.riel-sep{ flex:0 0 auto; width:1px; height:20px; background:var(--line-2); margin-inline:.35rem; }

/* --- Zonas --- */
.zona{ padding:clamp(2.6rem, 6vw, 4.4rem) 0 clamp(1.6rem, 4vw, 2.6rem); }
/* La vitrina no lleva encabezado propio: arranca directo bajo el riel de categorías. */
.zona-directa{ padding-top:clamp(1.5rem, 3.4vw, 2.4rem); }
.zona-encargos{ background:var(--bg-2); border-top:1px solid var(--line); }
.zona-cab{
  width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:20px;
  margin-bottom:clamp(1.8rem, 4vw, 2.6rem);
}
.zona-cab h2{ margin-bottom:.7rem; }
.zona-sub{ max-width:56ch; color:var(--cream-3); font-size:.92rem; }

.cat{
  width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:20px;
  margin-bottom:clamp(2.4rem, 5vw, 3.6rem);
  scroll-margin-top:calc(var(--barra-h) + var(--rieles-h) + 12px);
}
.cat-cab{
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  padding-bottom:.8rem; margin-bottom:1.2rem; border-bottom:1px solid var(--line);
}
.cat-cab h2{ font-size:clamp(1.6rem, 3.6vw, 2.2rem); }
.cat-cab p{ font-size:.83rem; color:var(--cream-3); text-align:right; max-width:30ch; }

.aviso{
  width:100%; max-width:var(--wrap); margin:0 auto clamp(1.8rem, 4vw, 2.4rem);
  padding:.9rem 20px;
}
.aviso span{
  display:block; padding:.9rem 1.1rem; border-radius:var(--radio-sm);
  border:1px dashed rgba(226,167,86,.36); background:rgba(226,167,86,.07);
  font-size:.86rem; color:var(--cream-2);
}

/* --- Torta personalizada --- */
.medida{ padding:clamp(2.8rem, 6vw, 4.8rem) 0; border-top:1px solid var(--line); }
.medida-in{
  width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:20px;
  display:grid; gap:clamp(1.6rem, 4vw, 3rem); align-items:center;
}
.medida-foto{ border-radius:var(--radio); overflow:hidden; box-shadow:var(--sombra); }
.medida-foto img{ width:100%; aspect-ratio:4/3; object-fit:cover; }
.medida-txt h2{ margin-bottom:.9rem; }
.medida-txt p{ color:var(--cream-2); max-width:54ch; margin-bottom:1.4rem; }
.medida-actions{ display:flex; flex-wrap:wrap; gap:.75rem; }
.medida-actions .btn{ white-space:normal; text-align:center; }
.medida-pasos{
  display:grid; gap:1px; overflow:hidden; border:1px solid var(--line);
  border-radius:8px; background:var(--line);
}
.medida-pasos li{
  display:grid; grid-template-columns:38px minmax(0,1fr); gap:.9rem;
  padding:1rem; background:var(--bg-2);
}
.medida-pasos span{
  display:grid; place-items:center; width:34px; height:34px; border-radius:999px;
  background:rgba(226,167,86,.12); color:var(--dulce);
  font-size:.86rem; font-weight:700; font-variant-numeric:tabular-nums;
}
.medida-pasos h3{ font-size:.98rem; margin-bottom:.15rem; }
.medida-pasos p{ color:var(--cream-3); font-size:.84rem; line-height:1.45; }
.medida-galeria{
  scroll-margin-top:calc(var(--barra-h) + var(--rieles-h) + 12px);
  border-top:1px solid var(--line); padding-top:clamp(1.8rem, 4vw, 2.6rem);
}
.medida-galeria-cab{
  display:grid; gap:.8rem; margin-bottom:1.1rem;
}
.medida-galeria-cab .kicker{ margin-bottom:.5rem; }
.medida-galeria-cab h3{
  font-family:var(--serif); font-weight:500; font-size:clamp(1.5rem, 3.8vw, 2.25rem);
}
.medida-galeria-cab h3 span{
  font-family:var(--sans); font-size:.78rem; font-weight:700; color:var(--cream-3);
  vertical-align:middle; margin-left:.45rem; letter-spacing:0;
}
.medida-galeria-cab p{ color:var(--cream-3); max-width:46ch; font-size:.9rem; }
.medida-grid{ column-count:2; column-gap:10px; }
.medida-grid figure{
  break-inside:avoid; margin:0 0 10px; overflow:hidden;
  border-radius:8px; background:var(--panel-2); border:1px solid var(--line);
}
.medida-grid img{
  width:100%; height:auto; display:block;
  transition:transform .55s var(--ease), filter .55s var(--ease);
}
.medida-grid figure:hover img{ transform:scale(1.04); filter:saturate(1.06) brightness(1.03); }
.medida-cierre{
  display:grid; gap:.9rem; align-items:center;
  margin-top:clamp(1.2rem, 3vw, 1.8rem); padding-top:1.2rem; border-top:1px solid var(--line);
}
.medida-cierre p{ color:var(--cream-2); }
.medida-cierre .btn{ white-space:normal; text-align:center; }

/* --- Pie --- */
.pie{ border-top:1px solid var(--line); background:var(--bg-2); padding:clamp(2.6rem,5vw,3.6rem) 0 1.6rem; }
.pie-in{
  width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:20px;
  display:grid; gap:2.4rem;
}
.pie-logo{ height:82px; width:auto; margin-bottom:1.1rem; }
.pie-marca p{ color:var(--cream-3); font-size:.88rem; }
.pie-redes{ display:flex; gap:1.1rem; margin-top:1.1rem; }
.pie-redes a{ font-size:.84rem; color:var(--cream-2); border-bottom:1px solid var(--line-2); padding-bottom:2px; }
.pie-redes a:hover{ color:var(--dulce); border-color:var(--dulce); }
.pie-bloque h3{ font-size:.7rem; letter-spacing:.15em; text-transform:uppercase; color:var(--dulce); margin-bottom:.9rem; }
.pie-h3-2{ margin-top:1.6rem; }
.pie-mascotas{ display:flex; align-items:flex-start; gap:.6rem; }
.pie-mascotas svg{ flex:none; width:1.15rem; height:1.15rem; margin-top:.12rem; fill:var(--dulce); }
.pie-bloque p{ font-size:.88rem; color:var(--cream-2); }
.pie-link{ color:var(--cream-2); border-bottom:1px solid var(--line-2); padding-bottom:2px; font-size:.85rem; }
.pie-link:hover{ color:var(--dulce); border-color:var(--dulce); }
.pie-horarios li{
  display:flex; justify-content:space-between; gap:1rem;
  padding:.38rem 0; font-size:.86rem; color:var(--cream-2);
  border-bottom:1px solid var(--line);
}
.pie-horarios li:last-child{ border-bottom:0; }
.pie-horarios .cerrado{ color:var(--cream-3); }
.pie-horarios li.es-hoy{ color:var(--dulce); font-weight:600; }
.pie-legal{
  width:100%; max-width:var(--wrap); margin:2.6rem auto 0; padding:1.3rem 20px 0;
  border-top:1px solid var(--line); font-size:.76rem; color:var(--cream-3);
}

/* --- Botón flotante (sólo en teléfono: en pantallas grandes ya está el
       botón de la barra, y acá lo que suma es tener el total a mano) --- */
body.con-flotante{ padding-bottom:88px; }
.flotante{
  position:fixed; left:16px; right:16px; bottom:16px; z-index:55;
  display:flex; align-items:center; gap:.7rem;
  min-height:54px; padding:0 1.1rem; border-radius:999px;
  background:var(--dulce); color:#20170C; font-weight:700; font-size:.95rem;
  box-shadow:0 10px 34px rgba(0,0,0,.44);
  animation:subir .34s var(--ease);
}
@keyframes subir{ from{ transform:translateY(90px); opacity:0; } to{ transform:none; opacity:1; } }
.flotante-cuenta{
  display:grid; place-items:center; min-width:26px; height:26px; padding:0 .4rem;
  border-radius:999px; background:rgba(32,23,12,.86); color:var(--dulce);
  font-size:.8rem; font-variant-numeric:tabular-nums;
}
.flotante-total{ margin-left:auto; font-variant-numeric:tabular-nums; }

/* --- Burbuja de consulta por WhatsApp ---
   Queda debajo del botón de "Ver mi pedido" (z-index 55) y del velo del carrito
   (80): cuando el carrito está abierto, la burbuja no compite con él.

   Se repliega mientras se baja por el catálogo y vuelve al subir: fija en la
   esquina inferior derecha choca con el "+" de la ficha de la columna derecha,
   y ese "+" se repite a lo largo de toda la página (ver initWhatsapp en
   main.js). */
.wa-flot{
  position:fixed; z-index:54;
  right:max(16px, env(safe-area-inset-right));
  bottom:max(16px, env(safe-area-inset-bottom));
  width:54px; height:54px; display:grid; place-items:center;
  border-radius:50%; background:var(--wa); color:#fff;
  box-shadow:0 6px 16px rgba(0,0,0,.4), 0 16px 36px rgba(37,179,125,.22);
  transition:bottom .28s var(--ease), transform .26s var(--ease),
             opacity .2s var(--ease), background-color .22s var(--ease);
}
.wa-flot svg{ width:27px; height:27px; display:block; }
.wa-flot:hover{ background:#1E9A6B; transform:translateY(-2px); }
.wa-flot:active{ transform:scale(.95); }
.wa-flot:focus-visible{ outline:2px solid var(--dulce); outline-offset:4px; }
.wa-flot.se-esconde{ transform:translateY(96px) scale(.85); opacity:0; pointer-events:none; }

/* Con el pedido empezado, la barra de "Ver mi pedido" ocupa el borde de abajo:
   la burbuja se corre arriba de ella en vez de pisarla. */
/* --- Seguimiento de pedido web: dentro de la confirmación y, luego, flotante --- */
.carro-exito-eta{
  font-weight:600; color:var(--dulce); margin:.2rem 0 0;
}
.seguimiento{
  background:var(--panel); border:1.5px solid var(--line-2); border-radius:var(--radio-sm, 12px);
  padding:.9rem 1rem 1rem; text-align:left;
}
.seguimiento-flot{
  position:fixed; z-index:56;
  top:calc(var(--barra-h) + 12px); right:16px; left:16px; max-width:400px; margin-left:auto;
  box-shadow:0 10px 34px rgba(0,0,0,.44);
  animation:subir .34s var(--ease);
}
.seguimiento-en-exito{ width:100%; max-width:360px; margin:.45rem 0 .1rem; background:var(--panel-2); }
.seguimiento-cerrar{
  position:absolute; top:.4rem; right:.5rem; width:28px; height:28px;
  border:0; background:transparent; color:var(--cream-3); font-size:1.3rem; line-height:1; cursor:pointer;
}
.seguimiento-cerrar:hover{ color:var(--cream); }
.seguimiento-cabecera{ display:flex; align-items:flex-start; justify-content:space-between; gap:.75rem; }
.seguimiento-eyebrow{ display:block; margin-bottom:.12rem; color:var(--cream-3); font-size:.66rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase; }
.seguimiento-codigo{ margin:0; font-size:.85rem; color:var(--cream-2); }
.seguimiento-codigo b{ color:var(--dulce); }
.seguimiento-actualizar{ min-height:44px; padding:0 .75rem; border:1px solid var(--line-2); border-radius:999px; color:var(--cream-2); font-size:.7rem; font-weight:700; }
.seguimiento-actualizar:hover{ border-color:var(--dulce); color:var(--dulce); }
.seguimiento-actualizar:disabled{ cursor:wait; opacity:.58; }
.seguimiento-estado{ margin:.65rem 0 .7rem; color:var(--cream); font-size:.84rem; font-weight:700; }
.seguimiento.es-cargando .seguimiento-estado{ color:var(--cream-2); }
.seguimiento.es-error .seguimiento-estado{ color:#F2A9B4; }
.seguimiento-pasos{
  list-style:none; margin:0; padding:0; display:flex; justify-content:space-between; gap:.4rem;
}
.seguimiento-pasos li{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:.35rem;
  font-size:.72rem; color:var(--cream-3); text-align:center;
}
.seguimiento-pasos li [data-paso-label]{ line-height:1.2; }
.seguimiento-punto{
  width:14px; height:14px; border-radius:50%; background:var(--panel-3); border:1.5px solid var(--line-2);
}
.seguimiento-pasos li.hecho{ color:var(--cream-2); }
.seguimiento-pasos li.hecho .seguimiento-punto{ background:var(--dulce); border-color:var(--dulce); }
.seguimiento-pasos li.activo{ color:var(--dulce); font-weight:700; }
.seguimiento-pasos li.activo .seguimiento-punto{ background:var(--dulce); border-color:var(--dulce); box-shadow:0 0 0 3px rgba(226,167,86,.25); }
.seguimiento-actualizado{ margin:.65rem 0 0; color:var(--cream-3); font-size:.68rem; text-align:center; }
.seguimiento-cabify{ display:block; margin-top:.8rem; text-align:center; }

@media (max-width: 719px){
  body.con-flotante .wa-flot{ bottom:86px; }
}

/* --- Velo --- */
.velo{
  position:fixed; inset:0; z-index:80; background:rgba(8,6,4,.66);
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  animation:aparecer .28s var(--ease);
}
@keyframes aparecer{ from{ opacity:0; } to{ opacity:1; } }

/* --- Carrito (panel) --- */
.carro{
  position:fixed; z-index:90; inset:auto 0 0 0; max-height:92dvh;
  display:flex; flex-direction:column;
  background:var(--panel); border-top:1px solid var(--line-2);
  border-radius:20px 20px 0 0; box-shadow:var(--sombra-lg);
  animation:entrar-abajo .38s var(--ease);
}
@keyframes entrar-abajo{ from{ transform:translateY(100%); } to{ transform:none; } }
.carro-cab{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.1rem 1.2rem; border-bottom:1px solid var(--line); flex:0 0 auto;
}
.carro-cab h2{ font-size:1.6rem; }
.carro-x{ font-size:1.7rem; line-height:1; width:40px; height:40px; border-radius:50%; color:var(--cream-3); }
.carro-x:hover{ color:var(--cream); background:var(--panel-2); }

/* --- Pasos del pedido (wizard: Pedido / Datos / Confirmación) ---
   Mismo patrón que usaba landing-menu-grilla (barra de 3 columnas, círculo
   numerado + estado activo/hecho) pero con la paleta cacao del sitio. Se
   oculta con la misma condición que el formulario (carrito vacío = nada que
   pasear entre pasos). El [hidden] necesita !important porque .carro-pasos
   define display:grid — un empate de especificidad con la regla [hidden] del
   navegador se resuelve por orden de aparición, no por "quién es más
   específico", así que sin !important el navegador podría mostrarlo igual. */
.carro-pasos{
  display:grid; grid-template-columns:repeat(3,1fr); gap:.3rem;
  padding:.8rem 1.2rem; border-bottom:1px solid var(--line);
  background:var(--panel-2); flex:0 0 auto;
}
.carro-pasos[hidden]{ display:none !important; }
.carro-paso-ind{
  display:flex; align-items:center; justify-content:center; gap:.35rem;
  min-width:0; color:var(--cream-3); font-size:.66rem; letter-spacing:.02em;
}
.carro-paso-ind b{
  flex:0 0 auto; width:20px; height:20px; display:grid; place-items:center;
  border:1px solid var(--line-2); border-radius:50%; background:var(--panel);
  font-size:.64rem; font-weight:700; color:var(--cream-2);
  transition:border-color .25s var(--ease), background-color .25s var(--ease), color .25s var(--ease);
}
.carro-paso-ind em{ font-style:normal; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.carro-paso-ind.es-activo{ color:var(--dulce); }
.carro-paso-ind.es-activo b{ border-color:var(--dulce); background:var(--dulce); color:#20170C; }
.carro-paso-ind.es-hecho{ color:var(--cream-2); }
.carro-paso-ind.es-hecho b{ border-color:var(--pistacho); background:rgba(169,190,134,.14); color:var(--pistacho); }

.carro-cuerpo{ flex:1 1 auto; overflow-y:auto; padding:1.1rem 1.2rem; -webkit-overflow-scrolling:touch; }

/* Pantalla de cada paso. Mismo gotcha que arriba: .carro-paso no debería
   necesitar display propio, pero por si alguna regla futura le pone
   display:grid/flex, el [hidden] va con !important para no depender del
   orden de aparición en la hoja. */
.carro-paso[hidden]{ display:none !important; }
.carro-paso-titulo{ font-family:var(--serif); font-weight:600; font-size:1.22rem; margin-bottom:.85rem; }
.carro-paso-eyebrow{
  display:block; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--dulce); margin:-.55rem 0 1rem;
}
.carro-vacio{ padding:2.4rem 0; text-align:center; color:var(--cream-3); font-size:.92rem; }
.carro-vacio a{ color:var(--dulce); border-bottom:1px solid var(--dulce-3); }

.carro-lista li{
  display:grid; grid-template-columns:1fr auto; gap:.5rem 1rem;
  padding:.95rem 0; border-bottom:1px solid var(--line);
}
.ci-nombre{ font-size:.92rem; font-weight:600; line-height:1.34; }
.ci-detalle{ font-size:.78rem; color:var(--cream-3); margin-top:.2rem; }
.ci-precio{ font-size:.9rem; font-weight:700; font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap; }
.ci-pie{ grid-column:1 / -1; display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.ci-cant{ display:flex; align-items:center; gap:.15rem; border:1px solid var(--line-2); border-radius:999px; padding:.1rem; }
.ci-cant button{ width:30px; height:30px; border-radius:50%; display:grid; place-items:center; color:var(--dulce); }
.ci-cant button:hover{ background:var(--panel-2); }
.ci-cant .n{ min-width:24px; text-align:center; font-size:.85rem; font-weight:700; font-variant-numeric:tabular-nums; }
.ci-quitar{ font-size:.78rem; color:var(--cream-3); border-bottom:1px solid var(--line-2); }
.ci-quitar:hover{ color:var(--frambuesa); border-color:var(--frambuesa); }

/* .carro-form ya no tiene los fieldsets como hijos directos: cada paso
   ("datos", "confirmacion") es un .carro-paso que agrupa los suyos, así que
   el gap vertical entre fieldsets vive en .carro-paso y no acá arriba. */
.carro-form{ margin-top:1.6rem; }
.carro-form > .carro-paso{ display:grid; gap:1.5rem; }
.carro-form legend{
  font-size:.68rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--dulce); margin-bottom:.75rem;
}
.campo{ display:grid; gap:.35rem; margin-bottom:.75rem; }
.campo > span{ font-size:.8rem; color:var(--cream-2); }
.campo > span i{ font-style:normal; color:var(--cream-3); }
.campo small{ font-size:.74rem; color:var(--cream-3); }
.campo input, .campo textarea, .campo select{
  width:100%; min-height:46px; padding:.7rem .85rem;
  background:var(--bg-2); border:1.5px solid var(--line); border-radius:var(--radio-sm);
  transition:border-color .25s var(--ease), background-color .25s var(--ease);
}
.campo textarea{ min-height:auto; resize:vertical; }
.campo select{ color:var(--cream); font:inherit; color-scheme:dark; }
.campo select:disabled{ color:var(--cream-3); opacity:.7; cursor:not-allowed; }
.campo input::placeholder, .campo textarea::placeholder{ color:var(--cream-3); opacity:.7; }
.campo input:focus, .campo textarea:focus, .campo select:focus{ outline:none; border-color:var(--dulce); background:var(--panel-2); }
.campo input[aria-invalid="true"], .campo select[aria-invalid="true"]{ border-color:var(--frambuesa); }
.campo-fila{ display:grid; grid-template-columns:1fr 1fr; gap:.75rem; }
.campo-cupon{ margin-top:.15rem; }
.cupon-fila{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:.55rem; }
.cupon-fila .btn{ min-height:46px; padding:.65rem 1rem; }
.cupon-fila .btn.es-quitar{ border-color:var(--line); color:var(--cream-2); }
.cupon-estado{ min-height:1.1rem; margin:.15rem 0 0; font-size:.76rem; line-height:1.4; color:var(--cream-3); }
.cupon-estado.es-ok{ color:var(--pistacho); }
.cupon-estado.es-error{ color:var(--frambuesa); }
.ayuda-reserva{ margin:-.35rem 0 .8rem; padding:.55rem .7rem; border:1px dashed var(--line); border-radius:var(--radio-sm); font-size:.76rem; line-height:1.4; color:var(--cream-2); }
.cotiza-envio{ display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; }
.cotiza-envio .btn{ padding:.55rem 1rem; font-size:.86rem; min-height:auto; }
.cotiza-estado{ margin:0; font-size:.82rem; color:var(--cream-3); }
.cotiza-estado.es-cargando{ color:var(--cream-2); }
.cotiza-estado.es-ok{ color:var(--pistacho); }
.cotiza-estado.es-error{ color:var(--frambuesa); }
.btn-link{
  background:none; border:none; padding:0; margin:0;
  font:inherit; font-size:.82rem; color:var(--dulce);
  text-decoration:underline; cursor:pointer; width:100%; text-align:left;
}
.btn-link:hover{ color:var(--cream); }

.campo-titulo{ font-size:.8rem; color:var(--cream-2); margin-bottom:.4rem; }
.ayuda-encargo{
  margin:-.35rem 0 .85rem; padding:.6rem .75rem;
  border:1px dashed rgba(226,167,86,.36); border-radius:var(--radio-sm);
  background:rgba(226,167,86,.07); font-size:.78rem; color:var(--cream-2);
}
.opta{ display:grid; grid-template-columns:1fr 1fr; gap:.55rem; margin-bottom:.85rem; }
.opta-op{ position:relative; }
.opta-op input{ position:absolute; opacity:0; width:0; height:0; }
.opta-op span{
  display:grid; place-items:center; min-height:46px; padding:.5rem .7rem; text-align:center;
  border:1.5px solid var(--line); border-radius:var(--radio-sm);
  font-size:.85rem; color:var(--cream-2);
  transition:border-color .25s var(--ease), background-color .25s var(--ease), color .25s var(--ease);
}
.opta-op input:checked + span{ border-color:var(--dulce); background:rgba(226,167,86,.12); color:var(--dulce); font-weight:600; }
.opta-op.es-bloqueada span{ opacity:.4; cursor:not-allowed; }
.opta-op input:focus-visible + span{ outline:2px solid var(--dulce); outline-offset:2px; }
/* Forma de pago: 3 opciones, una pastilla ancha por fila (2 columnas queda muy
   apretado con "Transferencia" + el "10% off" en su propia línea). */
.opta-pago{ grid-template-columns:1fr; }
.opta-pago .opta-op span i{ display:block; font-style:normal; font-size:.72rem; color:var(--dulce); margin-top:.1rem; }
.opta-pago .opta-op input:checked + span i{ color:inherit; }

/* --- Paso 3: resumen de confirmación (total / forma de pago / entrega),
   pintado por pintarResumenConfirmacion() en main.js cada vez que se entra
   a este paso. --- */
.carro-resumen{ display:grid; gap:.75rem; }
.carro-resumen-fila{
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  padding:.7rem 0; border-bottom:1px solid var(--line);
}
.carro-resumen-fila:last-child{ border-bottom:0; }
.carro-resumen-fila span{ font-size:.76rem; letter-spacing:.06em; text-transform:uppercase; color:var(--cream-3); }
.carro-resumen-fila strong{ font-size:.94rem; font-weight:600; text-align:right; }
.carro-resumen-fila small{ display:block; font-size:.76rem; color:var(--cream-3); font-weight:400; margin-top:.15rem; }
.carro-resumen-editar{
  margin-top:1.1rem; font-size:.8rem; color:var(--dulce); border-bottom:1px solid var(--dulce-3);
}
.carro-resumen-editar:hover{ color:var(--cream); border-color:var(--cream-3); }

/* Compactada 2026-08-23: el pie empujaba los ítems del carrito fuera de
   pantalla en mobile. El botón mantiene min-height:50px (.btn) como objetivo
   táctil real — sólo se recortan paddings/márgenes decorativos alrededor. */
.carro-pie{ flex:0 0 auto; padding:.7rem 1.2rem calc(.7rem + env(safe-area-inset-bottom)); border-top:1px solid var(--line); background:var(--panel-2); }
.carro-desglose{ margin-bottom:.35rem; }
.carro-desglose-fila{ display:flex; align-items:baseline; justify-content:space-between; font-size:.76rem; color:var(--cream-3); }
.carro-desglose-fila+.carro-desglose-fila{ margin-top:.1rem; }
.carro-desglose-fila.es-descuento{ color:var(--pistacho); }
.carro-total{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:.3rem; }
.carro-total span{ font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; color:var(--cream-3); }
.carro-total b{ font-family:var(--serif); font-weight:600; font-size:1.6rem; font-variant-numeric:tabular-nums; }
.carro-descuento{ font-size:.76rem; color:var(--pistacho); margin:-.1rem 0 .35rem; }
.carro-nota{ font-size:.73rem; color:var(--cream-3); margin-bottom:.55rem; }

/* Grupo de botones del pie, uno por paso — sólo el del paso activo está
   visible. Mismo gotcha de [hidden] que .carro-pasos/.carro-paso arriba. */
.carro-pie-acciones{ display:flex; flex-direction:column; gap:.5rem; }
.carro-pie-acciones[hidden]{ display:none !important; }
/* Fila de 2 botones (Volver / Continuar). "Volver..." no encoge (texto corto,
   fijo); "Continuar/Revisar..." sí tiene que poder encoger y — en pantallas
   angostas — partirse en 2 líneas en vez de forzar scroll horizontal: sin
   min-width:0 un hijo flex nunca encoge más allá de su propio contenido,
   aunque el padre no tenga espacio (mismo gotcha que ya pasó en este sitio
   con la vitrina en mobile). */
.carro-pie-acciones-doble{ flex-direction:row; align-items:stretch; gap:.5rem; }
.carro-pie-acciones-doble > .btn-linea{ flex:0 0 auto; padding-inline:.9rem; }
.carro-pie-acciones-doble > .btn-primario{
  flex:1 1 auto; min-width:0; padding-inline:.9rem;
  white-space:normal; text-align:center; line-height:1.2;
}
.carro-pie-acciones-final{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:.45rem; }
.carro-pie-acciones-final .btn-mp{ margin-top:0; }

.carro-error{ margin-top:.5rem; font-size:.8rem; color:var(--frambuesa); text-align:center; }

.btn-mp{ background:var(--dulce); color:#20170C; width:100%; margin-top:.45rem; }
.btn-mp:hover{ background:#EEBB79; box-shadow:0 10px 30px rgba(226,167,86,.28); }
.btn-mp:disabled{ opacity:.5; cursor:not-allowed; box-shadow:none; }

/* ---- Panel de éxito: mismo cuerpo del carrito, cambia el contenido ---- */
.carro-exito{
  flex:1 1 auto; min-height:0; display:flex; flex-direction:column; align-items:center;
  justify-content:flex-start; overflow-y:auto; text-align:center; padding:1.5rem 1.4rem; gap:.55rem;
}
.carro-exito-check{
  width:52px; height:52px; border-radius:50%; display:grid; place-items:center;
  background:rgba(169,190,134,.14); border:1.5px solid var(--pistacho); color:var(--pistacho);
  font-size:1.5rem; margin-bottom:.3rem;
}
.carro-exito h3{ font-family:var(--serif); font-weight:600; font-size:1.35rem; }
.carro-exito p{ font-size:.85rem; color:var(--cream-2); max-width:34ch; }
.carro-exito-codigo{
  margin:.5rem 0; padding:.55rem 1.1rem; border:1px dashed var(--line-2); border-radius:999px;
  font-family:var(--serif); font-size:1.05rem; letter-spacing:.03em; color:var(--dulce);
}
.carro-exito-siguiente{
  margin-top:.2rem; padding:.85rem 1rem; border-left:3px solid var(--dulce);
  background:rgba(226,167,86,.07); font-size:.8rem; color:var(--cream-2); text-align:left; max-width:34ch;
}
.carro-exito .btn{ margin-top:.7rem; width:100%; max-width:280px; }
.carro-exito .seguimiento-cabify{ max-width:none; }

/* --- Ventana de producto ---
   Mismo formato que la página vieja: precio arriba del título, cada grupo de
   opciones en su propia caja con borde y las opciones adentro con redondel o
   casilla, y abajo la cantidad más un botón que dice qué falta o cuánto sale.
   La foto NO va con bandas grises al costado: llena el cuadro (object-fit
   cover, encuadrada por --foto-y) y el botón ⛶ la muestra entera.
   --------------------------------------------------------------------------- */
.modal{
  /* margin:auto es lo que centra un <dialog> nativo. Hay que reponerlo porque
     el reset de arriba pone margin:0 en todo. */
  margin:auto;
  width:min(560px, calc(100vw - 24px)); max-height:88dvh; padding:0;
  background:var(--panel); color:var(--cream);
  border:1px solid var(--line-2); border-radius:var(--radio);
  box-shadow:var(--sombra-lg); overflow:hidden;
}
.modal::backdrop{ background:rgba(8,6,4,.72); backdrop-filter:blur(3px); }
.modal[open]{ display:flex; flex-direction:column; animation:brotar-modal .3s var(--ease); }
@keyframes brotar-modal{ from{ transform:scale(.96); opacity:0; } to{ transform:none; opacity:1; } }
.modal-cerrar-form{ position:absolute; right:8px; top:8px; z-index:3; }
.modal-cerrar{
  width:38px; height:38px; border-radius:50%; font-size:1.6rem; line-height:1;
  background:rgba(20,16,12,.7); color:var(--cream);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.modal-cerrar:hover{ background:var(--panel-3); }
.modal-cuerpo{ flex:1 1 auto; overflow-y:auto; overscroll-behavior:contain; }

.modal-foto{ position:relative; width:100%; aspect-ratio:1/1; overflow:hidden; background:var(--panel-2); }
/* Mismo encuadre que las fichas de la grilla: main.js pone --foto-y para que el
   plato no quede cortado (ver "encuadre de las fotos"). */
.modal-foto img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center var(--foto-y, 50%);
}
/* Con cover la foto se recorta; este botón la abre entera. */
.modal-ampliar{
  position:absolute; left:10px; bottom:10px; z-index:2;
  width:40px; height:40px; display:grid; place-items:center; border-radius:50%;
  background:rgba(20,16,12,.72); color:var(--cream); font-size:1.05rem; line-height:1;
  border:1px solid var(--line-2);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  transition:background-color .25s var(--ease), color .25s var(--ease);
}
.modal-ampliar:hover{ background:var(--panel-3); color:var(--dulce); }

.modal-txt{ padding:1.15rem 1.25rem 1.25rem; }

/* Precio arriba del título, como en la página vieja. */
.modal-cab-precio{
  display:flex; align-items:center; flex-wrap:wrap; gap:.5rem;
  font-variant-numeric:tabular-nums; margin-bottom:.5rem;
}
.modal-cab-precio:empty{ display:none; }
.modal-cab-precio b{ font-size:1.35rem; font-weight:700; letter-spacing:-.01em; color:var(--cream); }
.modal-cab-precio .mo-antes{
  font-style:normal; font-size:.88rem; font-weight:600; color:var(--cream-3);
  text-decoration:line-through; text-decoration-thickness:1.5px;
}
.modal-cab-precio .mo-desde{
  font-style:normal; font-size:.68rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--cream-3);
}
.modal-cab-precio .mo-off{
  display:inline-flex; align-items:center; min-height:23px; padding:0 .55rem;
  border-radius:999px; font-size:.72rem; font-weight:700; letter-spacing:0;
  color:#F2A9B4; border:1px solid rgba(201,89,108,.48); background:rgba(201,89,108,.12);
}

.modal-txt h2{ font-size:1.7rem; line-height:1.1; margin-bottom:.4rem; }
.modal-desc{ font-size:.87rem; color:var(--cream-3); line-height:1.45; }
.modal-desc:empty{ display:none; }
[data-modal-campos]{ display:grid; gap:.75rem; margin-top:1.25rem; }

/* --- Un grupo de opciones = una caja --- */
.mo-grupo{ border:1px solid var(--line); border-radius:var(--radio-sm); background:var(--panel-2); overflow:hidden; }
.mo-grupo-cab{
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  padding:.7rem .85rem .6rem; border-bottom:1px solid var(--line);
}
.mo-grupo-cab h3{ font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--dulce); }
.mo-grupo-cab h3 label{ cursor:pointer; }
.mo-grupo-cab span{
  font-size:.68rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--cream-3); font-variant-numeric:tabular-nums; white-space:nowrap;
}

/* --- Una opción --- */
.mo-op{
  position:relative;
  display:flex; align-items:center; gap:.7rem;
  padding:.62rem .85rem; border-bottom:1px solid var(--line);
  cursor:pointer; transition:background-color .22s var(--ease);
}
.mo-op:last-child{ border-bottom:0; }
.mo-op:hover{ background:var(--panel-3); }
/* El input real cubre toda la fila y es invisible: el teclado y el lector de
   pantalla ven un radio/checkbox de verdad, el redondel de al lado es el dibujo. */
.mo-op input[type="radio"],
.mo-op input[type="checkbox"]{
  position:absolute; inset:0; z-index:2; width:100%; height:100%; margin:0;
  opacity:0; cursor:pointer;
}
.mo-marca{
  position:relative; z-index:1; flex:0 0 auto;
  width:21px; height:21px; border-radius:50%;
  border:2px solid var(--cream-3); background:transparent;
  transition:border-color .2s var(--ease), background-color .2s var(--ease), box-shadow .2s var(--ease);
}
.mo-op input[type="checkbox"] ~ .mo-marca{ border-radius:6px; }
.mo-op input:checked ~ .mo-marca{
  border-color:var(--dulce); background:var(--dulce);
  box-shadow:inset 0 0 0 3.5px var(--panel-2);
}
.mo-op input:focus-visible ~ .mo-marca{ outline:2px solid var(--dulce); outline-offset:3px; }
.mo-op:has(input:checked){ background:rgba(226,167,86,.11); }

/* 46 px era muy chico para reconocer un sabor: a 60 se distingue. */
.mo-op-foto{ position:relative; z-index:1; width:60px; height:60px; border-radius:8px; object-fit:cover; flex:0 0 auto; }
.mo-op-txt{ position:relative; z-index:1; flex:1 1 auto; min-width:0; display:grid; gap:.1rem; }
.mo-op-nom{ font-size:.92rem; font-weight:600; line-height:1.25; }
.mo-op-desc{ font-size:.76rem; color:var(--cream-3); line-height:1.32; }
.mo-op-extra{
  position:relative; z-index:1; flex:0 0 auto;
  font-size:.85rem; font-weight:600; color:var(--cream-2);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.mo-op input:checked ~ .mo-op-extra{ color:var(--dulce); }

/* Fila con contador ("elegí 3 sabores"): no lleva redondel, lleva − n +. */
.mo-op.es-contador{ cursor:default; }
.mo-op.es-contador:hover{ background:transparent; }
.mo-op.es-contador.es-elegida{ background:rgba(226,167,86,.11); }
.mo-op-cant{ display:flex; align-items:center; gap:.1rem; flex:0 0 auto; }
.mo-op-cant .n{ min-width:22px; text-align:center; font-size:.88rem; font-weight:700; font-variant-numeric:tabular-nums; }
.mo-op-cant button{
  width:32px; height:32px; border-radius:50%; display:grid; place-items:center;
  color:var(--dulce); font-size:1.05rem; line-height:1;
  border:1px solid var(--line-2);
  transition:background-color .22s var(--ease), border-color .22s var(--ease);
}
.mo-op-cant button:hover:not(:disabled){ background:rgba(226,167,86,.18); border-color:var(--dulce); }
.mo-op-cant button:disabled{ opacity:.3; cursor:not-allowed; }

/* --- Nota del cliente para este producto --- */
/* El único encabezado que no va en versalitas: "COMENTARIO PARA ESTE PRODUCTO"
   en mayúsculas y con letter-spacing se va a dos líneas y pesa más que las
   opciones, que es lo que hay que mirar. En minúscula entra en una línea. */
.mo-nota .mo-grupo-cab h3{
  font-size:.86rem; font-weight:600; letter-spacing:0; text-transform:none; color:var(--cream);
}
.mo-nota textarea{
  display:block; width:100%; border:0; background:transparent; color:var(--cream);
  font:inherit; font-size:.87rem; line-height:1.45; resize:vertical;
  padding:.7rem .85rem; min-height:66px;
}
.mo-nota textarea::placeholder{ color:var(--cream-3); }
.mo-nota textarea:focus{ outline:none; background:var(--panel-3); }
.mo-nota:focus-within{ border-color:var(--line-2); }

/* --- Pie: cantidad + el botón que dice qué falta --- */
.modal-pie{
  flex:0 0 auto; display:flex; align-items:center; gap:.7rem;
  padding:.85rem 1.25rem calc(.85rem + env(safe-area-inset-bottom));
  border-top:1px solid var(--line); background:var(--panel-2);
}
.modal-cant{
  display:flex; align-items:center; gap:.1rem; flex:0 0 auto;
  border:1.5px solid var(--line-2); border-radius:999px; padding:.15rem;
}
.modal-cant[hidden]{ display:none; }
.modal-cant button{ width:34px; height:34px; border-radius:50%; display:grid; place-items:center; color:var(--dulce); font-size:1.1rem; }
.modal-cant button:hover{ background:rgba(226,167,86,.16); }
.modal-cant button:disabled{ opacity:.32; cursor:not-allowed; }
.modal-cant .n{ min-width:26px; text-align:center; font-size:.95rem; font-weight:700; font-variant-numeric:tabular-nums; }
.modal-cta{
  flex:1 1 auto; min-width:0; min-height:48px; padding-inline:.9rem;
  justify-content:center; text-align:center;
  font-size:.95rem; font-variant-numeric:tabular-nums;
}
/* Deshabilitado no es un botón roto: es el estado "todavía falta elegir", y el
   propio texto lo dice. Por eso se ve apagado pero LEGIBLE — sin el opacity de
   .btn:disabled, que lo dejaba casi invisible justo cuando hay que leerlo. */
.modal-cta:disabled{
  opacity:1; background:var(--panel-3); color:var(--cream-2);
  border-color:var(--line-2); box-shadow:none; cursor:not-allowed;
}
.modal-cta:disabled:hover{ background:var(--panel-3); box-shadow:none; }

/* El dialog nativo bloquea el foco, pero Safari móvil todavía puede mover el
   documento que queda detrás. La clase la administra main.js al abrir/cerrar. */
html.modal-producto-open,
html.modal-producto-open body{
  overflow:hidden; overscroll-behavior:none;
}

/* Producto con opciones (sabor, tamaño, relleno): en teléfono la foto pasa a
   ser una banda. Antes ocupaba un cuadrado del ancho completo y empujaba el
   primer grupo debajo del borde: había que bajar para descubrir que había algo
   que elegir. Ahora el precio, el título y el primer grupo entran juntos. */
@media (max-width: 719px){
  .modal.con-opciones .modal-foto{ aspect-ratio:4/3; max-height:32dvh; }
  .modal.con-opciones .modal-txt{ padding-top:.95rem; }
  .modal.con-opciones .modal-txt h2{ font-size:1.3rem; line-height:1.18; }
  .modal.con-opciones .modal-cab-precio b{ font-size:1.2rem; }
  .modal.con-opciones .modal-desc{ font-size:.81rem; }
  .modal.con-opciones [data-modal-campos]{ margin-top:.95rem; }
}

/* --- Visor: la foto entera, sin recortar --- */
.visor{
  margin:auto; width:min(760px, calc(100vw - 24px)); max-height:92dvh; padding:0;
  background:transparent; border:0; overflow:visible;
}
.visor::backdrop{ background:rgba(8,6,4,.9); backdrop-filter:blur(4px); }
.visor[open]{ display:grid; place-items:center; }
.visor-foto{
  display:block; max-width:100%; max-height:92dvh;
  object-fit:contain; border-radius:var(--radio-sm);
}
.visor-cerrar{
  position:absolute; right:-4px; top:-46px;
  width:40px; height:40px; border-radius:50%; font-size:1.6rem; line-height:1;
  background:var(--panel-2); color:var(--cream); border:1px solid var(--line-2);
}
.visor-cerrar:hover{ background:var(--panel-3); }

/* ============================ 7. EFECTOS ============================ */
/* El fundido de entrada sólo existe si el navegador ejecuta JavaScript (clase
   .js en <html>). Sin JS nada se esconde. Además la animación de seguridad
   revela todo a los 5 s aunque el observador nunca llegue a dispararse: nunca
   puede quedar contenido invisible. */
.js .rev{
  opacity:0; transform:translateY(22px);
  transition:opacity .7s var(--ease-soft), transform .7s var(--ease-soft);
  animation:revSeguro .01s 5s forwards;
}
.js .rev.visible{ animation:none; opacity:1; transform:none; }
@keyframes revSeguro{ to{ opacity:1; transform:none; } }

/* ============================ 8. RESPONSIVE ============================ */
@media (min-width: 540px){
  .prods{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px; }
  .prod-foto{ aspect-ratio:4/5; }
  .prod-txt{ padding:12px 12px 0; }
  .prod-txt h3{ font-size:.95rem; }
  .prod-txt p{ font-size:.78rem; }
  .prod-pie{ padding:12px; }
  .prod-precio b{ font-size:1.05rem; }
  .add{ width:42px; height:42px; }
  .flotante{ left:auto; right:20px; width:auto; min-width:290px; }
  .campo-fila{ grid-template-columns:1fr 1fr; }
  .medida-grid{ column-count:3; column-gap:12px; }
  .medida-grid figure{ margin-bottom:12px; }
}

@media (min-width: 720px){
  .barra-in, .hero-in, .zona-cab, .cat, .medida-in, .pie-in, .pie-legal, .rieles-in, .aviso{ padding-inline:32px; }
  .estado{ display:inline-flex; }
  .marca img{ height:50px; }
  .carrito-btn{ padding-left:1.2rem; }
  .flotante{ display:none !important; }
  body.con-flotante{ padding-bottom:0; }

  /* Altura fija en la ficha: si no, la foto manda su proporción original y la
     tarjeta se estira medio metro. */
  .prods.es-unica .prod{ flex-direction:row; height:264px; }
  .prods.es-unica .prod-foto{ flex:0 0 34%; aspect-ratio:auto; height:100%; }
  .prods.es-unica .prod-foto::after{ background:linear-gradient(90deg, transparent 50%, rgba(14,11,8,.55) 100%); }
  .prods.es-unica .prod-txt{
    flex:1 1 auto; display:flex; flex-direction:column; justify-content:center;
    padding:1.5rem 1.7rem;
  }
  .prods.es-unica .prod-txt h3{ font-size:1.3rem; }
  .prods.es-unica .prod-txt p{ font-size:.9rem; margin-top:.5rem; max-width:52ch; -webkit-line-clamp:3; line-clamp:3; }
  /* Acostada, el precio y el "+" se apilan a la derecha en vez de compartir una
     línea angosta: hay alto de sobra y el precio puede ir en grande. */
  .prods.es-unica .prod-pie{
    flex:0 0 auto; flex-direction:column; align-items:flex-end; justify-content:center;
    gap:.9rem; margin-top:0; padding:1.5rem 1.7rem 1.5rem .4rem;
  }
  .prods.es-unica .prod-precio{ align-items:flex-end; }
  .prods.es-unica .prod-precio b{ font-family:var(--serif); font-weight:600; font-size:1.6rem; }
  .prods.es-unica .prod-precio.es-desde b::before{ text-align:right; }
  .prods.es-unica .add{ width:48px; height:48px; font-size:1.6rem; }
  .prods.es-unica .prod-pie.es-consulta{ flex:0 0 232px; }
  .prods.es-unica .paso-cant{ min-height:44px; }
  .medida-in{ grid-template-columns:.9fr 1.1fr; gap:2rem 3rem; }
  .medida-txt{ align-self:end; }
  .medida-foto{ grid-column:2; grid-row:1 / span 2; align-self:stretch; }
  .medida-foto img{ height:100%; min-height:420px; }
  .medida-pasos{ align-self:start; }
  .medida-galeria{ grid-column:1 / -1; }
  .medida-galeria-cab{ grid-template-columns:minmax(0,1fr) minmax(260px,.55fr); align-items:end; }
  .medida-cierre{ grid-template-columns:minmax(0,1fr) auto; }
  .pie-in{ grid-template-columns:1.2fr 1fr 1fr; gap:3rem; }
  .carro{
    inset:0 0 0 auto; width:min(430px, 100vw); max-height:none;
    border-radius:0; border-top:0; border-left:1px solid var(--line-2);
    animation:entrar-lado .4s var(--ease);
  }
  @keyframes entrar-lado{ from{ transform:translateX(100%); } to{ transform:none; } }
  /* Escritorio: foto a la izquierda en vertical (4:5, la proporción de las
     fotos) y el texto al lado. Entra completa y el modal queda más bajo. */
  .modal{ width:min(800px, calc(100vw - 24px)); }
  .modal-cuerpo{ display:grid; grid-template-columns:318px minmax(0,1fr); }
  /* La columna de la foto acompaña el alto del texto: si no, queda un hueco
     debajo cuando la lista de variedades es larga. */
  .modal-foto{ position:sticky; top:0; align-self:stretch; aspect-ratio:auto; min-height:398px; }
  .modal-txt{ padding:1.4rem 1.5rem; }
}

@media (min-width: 960px){
  :root{ --barra-h:70px; }
  .marca img{ height:58px; }
  .prods{ grid-template-columns:repeat(4, minmax(0,1fr)); gap:18px; }
  .prod-txt h3{ font-size:1rem; }
  .prod-precio b{ font-size:1.1rem; }
  .medida-grid{ column-count:4; column-gap:14px; }
  .medida-grid figure{ margin-bottom:14px; }
}

@media (min-width: 1280px){
  .barra-in, .hero-in, .zona-cab, .cat, .medida-in, .pie-in, .pie-legal, .rieles-in, .aviso{ padding-inline:40px; }
  .prods{ gap:20px; }
  .medida-grid{ column-gap:16px; }
  .medida-grid figure{ margin-bottom:16px; }
}

/* ============================ PEDIDO EN TELÉFONO ============================
   Grilla de 2 columnas con tarjeta completa (foto arriba, precio + "+" abajo)
   en TODAS las categorías — es como se veía hasta el 21/08, y la misma que
   Tortas enteras/Tartas individuales conservaron cuando ese día se probó una
   versión en fila para el resto del catálogo. Facundo la vio en el teléfono
   real y pidió volver a la tarjeta en todos lados; no vale la pena mantener
   dos formatos. Ficha de producto a pantalla completa con un solo scroller de
   opciones y carrito full-screen con total persistente. */
@media (max-width: 719px){
  .cat{ margin-bottom:2rem; }
  .cat-cab{
    align-items:flex-start; gap:.7rem; margin-bottom:.75rem; padding-bottom:.65rem;
  }
  .cat-cab h2{ font-size:1.45rem; line-height:1.08; }
  .cat-cab p{ max-width:19ch; font-size:.75rem; line-height:1.35; }

  /* Catálogo: tarjeta con foto arriba (1:1), texto y precio/"+" abajo. */
  .prods{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; }
  .prod{
    display:flex; flex-direction:column; align-items:stretch;
    min-height:0; padding:0; gap:0; border-radius:var(--radio);
  }
  .prod:hover{ transform:none; box-shadow:none; }
  .prod-foto{ width:100%; height:auto; aspect-ratio:4/5; border-radius:0; }
  .prods.es-unica .prod-foto{ aspect-ratio:16/10; }
  .prod-etqs{ top:4px; right:4px; gap:.24rem; }
  .prod-etq{ padding:.18rem .4rem; font-size:.56rem; }
  .prod-txt{ padding:9px 10px 0; }
  .prod-txt h3{ font-size:.88rem; }
  .prod-txt p{ font-size:.71rem; }
  .prod-nota{ margin-top:.25rem; font-size:.66rem; }
  .prod-pie{
    width:auto; margin-top:auto; padding:9px 10px 10px;
    flex-direction:row; align-items:center; justify-content:space-between; gap:.35rem;
  }
  .prod-precio{ align-items:flex-start; }
  .prod-precio.es-desde b::before{ text-align:left; }
  .add{ width:44px; height:44px; font-size:1.4rem; }
  .paso-cant{ min-height:42px; }
  .paso-cant button{ width:34px; height:34px; }
  .prod-pie.es-consulta{ width:auto; }
  .add.es-consulta{ min-height:44px; padding:.35rem .55rem; font-size:.72rem; }

  /* Carrito: ocupa todo el viewport. Sólo el cuerpo scrollea; encabezado y
     total/WhatsApp permanecen disponibles aun con un pedido largo. */
  .carro{
    inset:0; width:100%; height:100dvh; max-height:none;
    border:0; border-radius:0;
  }
  .carro-cab{ padding:calc(.85rem + env(safe-area-inset-top)) 1rem .85rem; }
  .carro-x{ width:44px; height:44px; }
  .carro-cuerpo{ min-height:0; padding:1rem; overscroll-behavior:contain; }
  .carro-pie{ padding:.6rem 1rem calc(.6rem + env(safe-area-inset-bottom)); }
  .ci-cant button{ width:44px; height:44px; }
  .ci-quitar{ min-height:44px; display:inline-flex; align-items:center; }

  /* Ficha: viewport completo y cuatro zonas lógicas. La foto y el encabezado
     quedan quietos; las variedades son el único scroller; el CTA vive fuera. */
  .modal{
    inset:0; width:100%; max-width:none; height:100dvh; max-height:none;
    margin:0; border:0; border-radius:0;
  }
  .modal[open]{ animation:entrar-abajo .32s var(--ease); }
  .modal-cerrar-form{ top:calc(8px + env(safe-area-inset-top)); right:8px; }
  .modal-cerrar{ width:44px; height:44px; }
  .modal-cuerpo{
    display:grid; grid-template-columns:minmax(0,1fr);
    grid-template-rows:auto minmax(0,1fr);
    min-width:0; min-height:0; overflow:hidden;
  }
  .modal-foto{
    grid-column:1; grid-row:1; width:100%; height:clamp(280px,42dvh,390px);
    min-height:0; aspect-ratio:auto;
  }
  .modal.con-opciones .modal-foto{
    height:clamp(320px,46dvh,390px); max-height:none; aspect-ratio:auto;
  }
  .modal-txt{
    grid-column:1; grid-row:2; min-width:0; min-height:0;
    display:flex; flex-direction:column; overflow:hidden;
    padding:.95rem 1rem 0;
  }
  .modal.con-opciones .modal-txt{ padding-top:.85rem; }
  [data-modal-campos]{
    flex:1 1 auto; min-height:0; display:flex; flex-direction:column;
    align-items:stretch; gap:.75rem; overflow-y:auto; overscroll-behavior:contain;
    margin-top:.8rem; padding:0 .1rem 1rem 0;
    scrollbar-gutter:stable;
    -webkit-overflow-scrolling:touch;
  }
  [data-modal-campos] .mo-grupo{ flex:0 0 auto; }
  .modal.con-opciones [data-modal-campos]{ margin-top:.75rem; }
  .mo-op{ min-height:52px; }
  .mo-op-cant button{ width:44px; height:44px; }
  .modal-pie{
    min-width:0; padding:.75rem 1rem calc(.75rem + env(safe-area-inset-bottom));
  }
  .modal-cant button{ width:44px; height:44px; }
}

/* iPhone SE y equivalentes: se preserva ancho para el nombre y alto para las
   opciones sin achicar los objetivos táctiles principales. */
@media (max-width: 379px){
  .prod-txt h3{ font-size:.84rem; }
  .prod-txt p{ font-size:.69rem; }
  .prod-precio b{ font-size:.88rem; }
  .prod-precio i{ font-size:.61rem; }
  .modal-txt{ padding-inline:.85rem; }
  .modal-pie{ padding-inline:.85rem; gap:.5rem; }
  .modal-cant{ gap:0; }
  .modal-cant .n{ min-width:22px; }
  .modal-cta{ padding-inline:.65rem; font-size:.88rem; }
}

@media (max-width: 719px) and (max-height: 700px){
  .modal.con-opciones .modal-foto{ height:clamp(230px,34dvh,260px); }
  .modal.con-opciones .modal-desc{
    display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:1;
    line-clamp:1; overflow:hidden;
  }
}

/* En pantallas altas y anchas el hero respira más. */
@media (min-width: 960px) and (min-height: 800px){
  .hero{ padding-top:clamp(3.4rem, 6vw, 6rem); }
}

/* ============================ 9. MOVIMIENTO REDUCIDO ============================
   Sólo se apagan los efectos intrusivos. Los micro-gestos (hover, contador,
   fundidos) se mantienen: Windows trae esta preferencia activada de fábrica
   en muchas instalaciones y desactivarlo todo dejaría la página muerta.
   ============================================================================== */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .carro, .flotante, .modal[open]{ animation:none; }
  .wa-flot{ transition:opacity .2s var(--ease); }
  .wa-flot.se-esconde{ transform:none; opacity:0; }
  .rev{ transition-duration:.25s; }
}