@charset "UTF-8";
/* =====================================================================
   ADELAAR STROOPWAFELS DUTCH — sistema de diseño
   Derivado del "Brand Design Bible" (documento rector, 25 páginas).

   Cada token de abajo tiene una página de origen. Si algo se cambia aquí,
   se está cambiando la marca, no la hoja de estilos.

   · Paleta oficial y gradientes autorizados ......... pág. 9
   · Proporción de color 55/25/15/5 .................. pág. 10
   · Combinaciones de contraste permitidas ........... pág. 11
   · Familia y pesos tipográficos .................... pág. 12
   · Escala tipográfica y ritmo ...................... pág. 13
   · Retícula de 6 columnas, márgenes 8%, medianil 2.5% pág. 16
   · Patrones de composición ......................... pág. 17

   EL SELLO: la costura de caramelo. Un stroopwafel son dos obleas unidas
   por caramelo. La costura va de naranja #F6A722 a chocolate #623827:
   es el caramelo cuando se cuece, con dos colores de la paleta. Es el
   único recurso gráfico recurrente y hace tres trabajos reales: separar
   familias, subrayar la tarjeta enfocada y marcar el filtro activo.
   No se usa para decorar nada más.
   ===================================================================== */

/* ---------------------------------------------------------------- TOKENS */
:root {
  /* PALETA OFICIAL — entregada por el cliente el 28/08/2026.
     Sustituye a la del Brand Design Bible: desaparece el rojo #D30808, que
     el manual definia como la firma, y entra un azul institucional que el
     manual no contemplaba. Valida, eso si, el azul marino que ya usaba el
     menu impreso.

     La regla que acompana la entrega: domina AZUL + BLANCO/CREMA; el
     naranja SOLO en acentos y llamadas a la accion; el chocolate a
     cuentagotas y unicamente en lo gastronomico. */
  --azul:      #123D5A;   /* primario — superficies institucionales */
  --naranja:   #F6A722;   /* acento y llamada a la accion */
  --texto:     #1D1D1B;   /* negro calido — cuerpo de texto */
  --crema:     #E6DDD1;   /* fondo secundario */
  --blanco:    #FFFFFF;   /* fondo principal */
  --chocolate: #623827;   /* acento gastronomico */

  /* Tintas derivadas. No son colores nuevos: son el mismo tono aclarado u
     oscurecido para estados y separadores. */
  --azul-alto:   #1B5479;
  --azul-hondo:  #0C2C41;
  --crema-honda: #D8CBB9;
  --crema-suave: #F3EEE7;
  --texto-70:    #5C5C58;
  --texto-40:    #9B9B96;
  --linea:       rgba(29, 29, 27, .13);
  --linea-suave: rgba(29, 29, 27, .07);
  --sobre-azul:  rgba(255, 255, 255, .80);

  /* La costura: naranja a chocolate. Es literalmente el caramelo cuando se
     cuece, y usa solo dos colores de la paleta. */
  --costura: linear-gradient(90deg, var(--naranja), var(--chocolate));

  /* El precio va en azul institucional, como en el menu impreso. */
  --precio: var(--azul);

  /* Tipografía — págs. 12 y 13. Source Sans, cuatro pesos, sin serif ni
     script. Los tamaños fluyen entre el mínimo y el máximo de la escala. */
  --fuente: "Source Sans 3", "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --display: clamp(2.6rem, 6.2vw, 4.5rem);
  --h1:      clamp(1.9rem, 3.6vw, 2.6rem);
  --h2:      clamp(1.22rem, 2vw, 1.5rem);
  --h3:      1.05rem;
  --body:    1rem;
  --label:   .78rem;

  /* Ritmo — pág. 13: interlineado display 0.95–1.05, cuerpo 1.25–1.40. */
  --lh-display: .95;
  --lh-titulo:  1.08;
  --lh-cuerpo:  1.38;

  /* Retícula — pág. 16 */
  --ancho:    1240px;
  --margen:   clamp(1.25rem, 8vw, 5rem);
  --medianil: clamp(1rem, 2.5vw, 2rem);

  /* Espaciado vertical: múltiplos de media línea de cuerpo (pág. 13) */
  --e1: .5rem;  --e2: 1rem;   --e3: 1.5rem;  --e4: 2.25rem;
  --e5: 3.5rem; --e6: 5rem;   --e7: 7rem;

  --radio:  10px;
  --sombra: 0 1px 2px rgba(18, 61, 90, .06), 0 8px 24px rgba(18, 61, 90, .08);
  --transicion: 180ms cubic-bezier(.2, .7, .3, 1);
}

/* ------------------------------------------------------------- CIMIENTOS */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--blanco);
  color: var(--texto);
  font-family: var(--fuente);
  font-size: var(--body);
  font-weight: 400;
  line-height: var(--lh-cuerpo);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }
a   { color: inherit; }

h1, h2, h3, h4 { margin: 0; line-height: var(--lh-titulo); font-weight: 700; }

button, input, select, textarea { font: inherit; color: inherit; }

/* El manual pide legibilidad antes que decoración; un foco visible es
   parte de eso. */
:focus-visible {
  outline: 3px solid var(--naranja);
  outline-offset: 3px;
  border-radius: 3px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

.oculto-visual {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------- ENVASES */
.envase {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--margen);
}

/* Retícula maestra de 6 columnas — pág. 16. Las clases .col-N reproducen
   los anchos funcionales que el manual declara. */
.reticula {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--medianil);
}
.col-6 { grid-column: span 6; }
.col-4 { grid-column: span 4; }
.col-3 { grid-column: span 3; }
.col-2 { grid-column: span 2; }

@media (max-width: 900px) {
  .col-4, .col-3 { grid-column: span 6; }
  .col-2 { grid-column: span 3; }

  /* Excepcion: cuando la reticula es de dos columnas DESIGUALES —un col-4
     ancho junto a un col-2 estrecho, como el resumen del pedido o la foto
     de las paginas editoriales— la columna menor tiene que seguir a la
     mayor hasta el ancho completo.

     Con el `span 3` generico se quedaba a media pantalla y dejaba hasta
     420 px vacios al lado, que es como se veia el checkout entre 561 y
     900 px. El `span 3` sigue siendo correcto donde hay VARIOS col-2
     iguales (el pie, las tres tarjetas): ahi se reparten de dos en dos. */
  .reticula:has(> .col-4) > .col-2,
  .reticula:has(> .col-3) > .col-2 { grid-column: span 6; }
}
@media (max-width: 560px) {
  .col-2 { grid-column: span 6; }
}

.seccion      { padding-block: var(--e6); }
.seccion--alta{ padding-block: var(--e7); }
.seccion--baja{ padding-block: var(--e5); }

/* ---------------------------------------------------- EL SELLO: LA COSTURA */
/* Separa familias. Es el mismo gesto de la barra ámbar del menú impreso. */
.costura {
  height: 5px;
  border: 0;
  margin: 0;
  background: var(--costura);
  border-radius: 3px;
}
.costura--fina { height: 3px; }

/* ---------------------------------------------------------- TIPOGRAFÍA */
.display {
  font-size: var(--display);
  font-weight: 900;
  line-height: var(--lh-display);
  letter-spacing: -.022em;
  text-wrap: balance;
}
.titulo-1 { font-size: var(--h1); font-weight: 900; letter-spacing: -.015em; text-wrap: balance; }
.titulo-2 { font-size: var(--h2); font-weight: 700; }
.titulo-3 { font-size: var(--h3); font-weight: 700; }

/* El "kicker" naranja en versalitas: es la firma tipográfica del menú
   impreso, presente en todas sus páginas interiores. */
.kicker {
  display: block;
  font-size: var(--label);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--chocolate);
  margin-bottom: var(--e2);
}
.kicker--carbon { color: var(--texto-70); }

.bajada {
  max-width: 58ch;               /* pág. 13: 55–70 caracteres por línea */
  color: var(--texto-70);
  margin: var(--e2) 0 0;
}

.nota {
  font-size: var(--label);
  line-height: 1.45;
  color: var(--chocolate);
}
/* Sobre el azul la nota necesita aclararse: el chocolate ahi no se lee. */
.bloque-oscuro .nota, .portada .nota { color: rgba(255, 255, 255, .72); }

/* --------------------------------------------------------------- BOTONES */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  padding: .8em 1.6em;
  border: 2px solid transparent;
  border-radius: 999px;
  font-size: var(--label);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transicion), color var(--transicion),
              border-color var(--transicion), transform var(--transicion);
}
.boton:active { transform: translateY(1px); }

/* Rojo = 5% de la paleta (pág. 10). Se reserva para la acción principal de
   la página. Si aparece dos veces en una pantalla, algo está mal. */
.boton--primario { background: var(--naranja); color: var(--texto); }
.boton--primario:hover { background: #E09612; }

.boton--carbon { background: var(--azul); color: var(--crema); }
.boton--carbon:hover { background: var(--azul-hondo); }

.boton--linea { border-color: var(--texto); color: var(--texto); }
.boton--linea:hover { background: var(--azul); color: var(--crema); }

.boton--claro { border-color: var(--crema); color: var(--crema); }
.boton--claro:hover { background: var(--crema); color: var(--texto); }

.boton[disabled] { opacity: .4; cursor: not-allowed; }

/* ---------------------------------------------------------- ENCABEZADO */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linea-suave);
}
.cabecera__fila {
  display: flex;
  align-items: center;
  gap: var(--e3);
  min-height: 72px;
}
.cabecera__logo { flex: none; }
.cabecera__logo img { width: 116px; }

.navegacion {
  display: flex;
  gap: var(--e3);
  margin-inline-start: auto;
  align-items: center;
}
.navegacion a {
  position: relative;
  font-size: var(--label);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  padding-block: .4rem;
}
/* La costura también marca la página en la que estás. */
.navegacion a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  border-radius: 2px;
  background: var(--costura);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transicion);
}
.navegacion a:hover::after,
.navegacion a[aria-current="page"]::after { transform: scaleX(1); }

.cabecera__acciones { display: flex; align-items: center; gap: var(--e2); }

.boton-pedido {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .55em;
  border: 2px solid var(--azul);
  background: transparent;
  border-radius: 999px;
  padding: .55em 1.1em;
  font-size: var(--label);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--transicion), color var(--transicion);
}
.boton-pedido:hover { background: var(--azul); color: var(--crema); }
.boton-pedido__cuenta {
  min-width: 1.5em;
  padding: 0 .35em;
  border-radius: 999px;
  background: var(--naranja);
  color: var(--texto);        /* blanco sobre naranja daba 2,01:1 */
  font-size: .72rem;
  line-height: 1.5em;
  text-align: center;
}
.boton-pedido[data-vacio="si"] .boton-pedido__cuenta { display: none; }

.menu-movil { display: none; }

@media (max-width: 880px) {
  .navegacion {
    position: fixed;
    inset: 72px 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--crema);
    border-bottom: 1px solid var(--linea);
    padding: var(--e2) var(--margen) var(--e4);
    transform: translateY(-120%);
    transition: transform var(--transicion);
    box-shadow: var(--sombra);
  }
  .navegacion[data-abierto="si"] { transform: translateY(0); }
  .navegacion a { padding-block: .9rem; border-bottom: 1px solid var(--linea-suave); }
  .navegacion a::after { display: none; }
  .menu-movil {
    display: inline-flex;
    margin-inline-start: auto;
    background: none;
    border: 0;
    cursor: pointer;
    padding: .5rem;
  }
  .cabecera__acciones { margin-inline-start: 0; }
}

/* -------------------------------------------------------------- PORTADA */
/* Patrón FULL BLEED (pág. 17): sólo cuando la fotografía soporta texto.
   La foto no se aclara con opacidad —eso apagaba el producto y aun así
   dejaba el texto peleando con el fondo—. Se usa un degradado de
   protección lateral: el texto cae sobre carbón sólido a la izquierda y la
   comida queda a plena saturación a la derecha. Es la "protección de
   lectura" que pide el manual en la pág. 11. */
.portada { position: relative; background: var(--azul); overflow: hidden; }
.portada__foto {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 62% center;
}
.portada::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(100deg,
              rgba(18, 61, 90,.94) 0%,
              rgba(18, 61, 90,.86) 34%,
              rgba(18, 61, 90,.42) 60%,
              rgba(18, 61, 90,.10) 100%);
}
.portada__contenido {
  position: relative;
  z-index: 1;
  padding-block: clamp(5rem, 16vh, 9rem);
  color: var(--crema);
}
.portada .display { color: var(--crema); max-width: 15ch; }
.portada .kicker  { color: var(--naranja); }
.portada__pie {
  color: var(--crema);
  opacity: .84;
  margin: var(--e3) 0 var(--e4);
  max-width: 46ch;
}
.portada__acciones { display: flex; flex-wrap: wrap; gap: var(--e2); }

@media (max-width: 700px) {
  /* En móvil no hay lado libre: el degradado pasa a ser vertical. */
  .portada::after {
    background: linear-gradient(180deg,
                rgba(18, 61, 90,.62) 0%,
                rgba(18, 61, 90,.88) 55%,
                rgba(18, 61, 90,.94) 100%);
  }
  .portada__foto { object-position: center 30%; }
}

/* ------------------------------------------------------ CHIPS DE FAMILIA */
.filtros {
  position: sticky;
  top: 71px;
  z-index: 40;
  background: var(--crema);
  border-bottom: 1px solid var(--linea-suave);
  padding-block: var(--e2);
}
.filtros__pista {
  display: flex;
  gap: .5rem;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.filtros__pista::-webkit-scrollbar { display: none; }

.chip {
  position: relative;
  flex: none;
  border: 1px solid var(--linea);
  background: transparent;
  border-radius: 999px;
  padding: .5em 1.1em;
  font-size: var(--label);
  font-weight: 600;
  letter-spacing: .06em;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transicion), border-color var(--transicion);
}
.chip:hover { border-color: var(--texto); }
.chip[aria-pressed="true"] { background: var(--azul); color: var(--crema); border-color: var(--texto); }
/* Tercer trabajo de la costura: marcar el filtro activo. */
.chip[aria-pressed="true"]::after {
  content: "";
  position: absolute;
  left: 18%; right: 18%; bottom: -7px;
  height: 3px; border-radius: 2px;
  background: var(--costura);
}

/* ------------------------------------------------------ FAMILIA DEL MENÚ */
.familia { scroll-margin-top: 140px; }
.familia + .familia { margin-top: var(--e6); }
.familia__cabeza { margin-bottom: var(--e4); }
.familia__costura { margin-bottom: var(--e4); max-width: 120px; }

/* ------------------------------------------- TARJETA (familias con foto) */
/* Patrón CARDS (pág. 17). Se usa sólo donde hay fotografía real: el manual
   prohíbe repetir escena y una tarjeta sin foto se ve rota. */
.parrilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: var(--medianil) var(--medianil);
}

/* Fila de cuatro para los destacados del inicio. Se declara aparte de
   .parrilla para que no compita con el 2+2+2 que viene justo debajo: dos
   filas de tres seguidas se leen como la misma sección repetida. */
.parrilla--cuatro { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1040px) { .parrilla--cuatro { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .parrilla--cuatro { grid-template-columns: 1fr; } }

.tarjeta {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  overflow: hidden;
  box-shadow: var(--sombra);
  transition: transform var(--transicion), box-shadow var(--transicion);
}
.tarjeta:hover { transform: translateY(-2px); border-color: rgba(18, 61, 90, .22);
                 box-shadow: 0 2px 4px rgba(18, 61, 90, .07), 0 16px 36px rgba(18, 61, 90, .13); }

.tarjeta__marco {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--crema-honda);
  overflow: hidden;
}
.tarjeta__marco img { width: 100%; height: 100%; object-fit: cover; }
/* Segundo trabajo de la costura: subrayar la tarjeta enfocada. */
.tarjeta__marco::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 4px;
  background: var(--costura);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transicion);
}
.tarjeta:hover .tarjeta__marco::after,
.tarjeta:focus-within .tarjeta__marco::after { transform: scaleX(1); }

.tarjeta__badge {
  position: absolute;
  top: .75rem; left: .75rem;
  background: var(--naranja);
  color: var(--texto);        /* blanco sobre naranja daba 2:1 */
  border-radius: 999px;
  padding: .35em .85em;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.tarjeta__cuerpo {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--e3);
  gap: var(--e1);
}
.tarjeta__kicker {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--chocolate);
}
.tarjeta__nombre { font-size: 1.12rem; font-weight: 700; }
.tarjeta__desc {
  font-size: .92rem;
  line-height: 1.42;
  color: var(--texto-70);
  margin: 0;
}
.tarjeta__nota { padding-top: var(--e1); }

.tarjeta__pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e2);
  margin-top: auto;
  padding-top: var(--e2);
  border-top: 1px solid var(--linea-suave);
}
.precio {
  font-weight: 900;
  font-size: 1.3rem;
  color: var(--precio);
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}
.precio__moneda { font-size: .78em; font-weight: 700; opacity: .6; margin-right: .06em; }
.precio--desde::before {
  content: "desde ";
  font-size: .55em;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .55;
}

.boton-agregar {
  border: 2px solid var(--azul);
  background: transparent;
  border-radius: 999px;
  padding: .5em 1.1em;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transicion), color var(--transicion);
}
.boton-agregar:hover { background: var(--azul); color: var(--crema); }
.boton-agregar[data-estado="puesto"] { background: var(--naranja); border-color: var(--naranja); color: var(--texto); }

.tarjeta[data-agotado="si"] { opacity: .55; }
.tarjeta[data-agotado="si"] .boton-agregar { pointer-events: none; }

/* ------------------------------------------- LISTA (familias sin foto) */
/* Café y bebidas son 32 de los 51 productos y casi ninguno tiene foto
   propia. El menú impreso los resuelve como lista tipográfica con los
   precios alineados a la derecha; aquí se hace igual. Forzarlos a
   tarjetas dejaría dos tercios de la parrilla con el hueco de una imagen
   que no existe. */
/* Dos columnas, como la página de café del menú impreso. A todo el ancho
   el nombre queda a la izquierda y el precio a 1100 px de distancia: el ojo
   tiene que cruzar la página entera para emparejarlos. Partido en dos, cada
   renglón mide lo que debe medir. */
.lista-columnas {
  columns: 2;
  column-gap: calc(var(--medianil) * 2.5);
}
@media (max-width: 900px) { .lista-columnas { columns: 1; } }

.lista-grupo {
  break-inside: avoid;
  margin-bottom: var(--e4);
}
.lista-grupo__titulo {
  font-size: var(--label);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--chocolate);
  padding-bottom: var(--e1);
  border-bottom: 1px solid var(--linea);
  margin-bottom: var(--e2);
}

.renglon {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: baseline;
  gap: var(--e2);
  padding-block: .7rem;
  border-bottom: 1px solid var(--linea-suave);
}
.renglon__nombre { font-weight: 700; }
.renglon__desc {
  display: block;
  font-size: .88rem;
  font-weight: 400;
  color: var(--texto-70);
  margin-top: .15rem;
}
/* El riel de precios: todos los precios de una familia caen en la misma
   vertical, como en el menú impreso. */
.renglon__precios {
  display: flex;
  gap: var(--e2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.renglon__precio { font-weight: 700; color: var(--precio); }
.renglon__precio small {
  display: block;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--texto-70);
}
.renglon .boton-agregar { padding: .4em .9em; font-size: .68rem; }

@media (max-width: 560px) {
  .renglon { grid-template-columns: 1fr auto; }
  .renglon .boton-agregar { grid-column: 2; }
}

/* ------------------------------------------------------ RECOMENDACIONES */
/* El menú impreso cierra café y bebidas con un recuadro de maridajes.
   Es su mecanismo de ticket promedio, así que se conserva. */
.maridajes {
  border: 1px solid var(--naranja);
  border-radius: var(--radio);
  padding: var(--e3);
  margin-top: var(--e4);
  max-width: 46rem;             /* si no, el precio queda a media pagina */
  background: rgba(246, 167, 34, .10);
}
.maridajes__titulo {
  font-size: var(--label);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--chocolate);
  margin-bottom: var(--e2);
}
.maridajes__lista {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  gap: .55rem;
}
.maridajes__lista li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e2);
  font-size: .94rem;
}
.maridajes__lista b { font-weight: 700; }
.maridajes__lista span { color: var(--texto-70); }
.maridajes__lista .precio { font-size: 1rem; }

/* ------------------------------------------------------------- EDITORIAL */
/* Patrón EDITORIAL 2+4 y SPLIT 3+3 (pág. 17). */
.editorial { align-items: center; }
.editorial__foto { border-radius: var(--radio); overflow: hidden; box-shadow: var(--sombra); }
.editorial__foto img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }

.bloque-oscuro { background: var(--azul); color: var(--crema); }
.bloque-oscuro .kicker { color: var(--naranja); }
.bloque-oscuro .bajada { color: rgba(255, 255, 255, .78); }

/* ------------------------------------------------------------- ATRIBUTOS */
.atributos {
  list-style: none;
  margin: var(--e3) 0 0;
  padding: 0;
  display: grid;
  gap: .6rem;
}
.atributos li {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  font-size: .95rem;
}
.atributos li::before {
  content: "";
  flex: none;
  width: 9px; height: 9px;
  margin-top: .45em;
  border-radius: 50%;
  background: var(--naranja);
}

/* ----------------------------------------------------------- PASOS (1–4) */
/* Numerados porque el Club SÍ es una secuencia: escanear → guardar →
   acumular → canjear. El manual la define así en la pág. 10 del menú. */
.pasos {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--medianil);
  counter-reset: paso;
}
.pasos li { counter-increment: paso; }
.pasos li::before {
  content: counter(paso, decimal-leading-zero);
  display: block;
  font-size: 1.6rem;
  font-weight: 900;
  color: var(--naranja);
  line-height: 1;
  margin-bottom: .5rem;
}
.pasos b { display: block; margin-bottom: .2rem; }
.pasos p { margin: 0; font-size: .92rem; color: var(--texto-70); }

/* ------------------------------------------------------- CAJÓN DE PEDIDO */
.velo {
  position: fixed;
  inset: 0;
  background: rgba(18, 61, 90, .45);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transicion);
  z-index: 90;
}
.velo[data-abierto="si"] { opacity: 1; pointer-events: auto; }

.cajon {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(440px, 100%);
  background: var(--crema);
  z-index: 100;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--transicion);
  box-shadow: -12px 0 40px rgba(18, 61, 90,.18);
}
.cajon[data-abierto="si"] { transform: translateX(0); }

.cajon__cabeza {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e2);
  padding: var(--e3);
  border-bottom: 1px solid var(--linea);
}
.cajon__cerrar {
  background: none; border: 0; cursor: pointer;
  font-size: 1.5rem; line-height: 1; padding: .25rem .5rem;
}
.cajon__cuerpo { flex: 1; overflow-y: auto; padding: var(--e3); }
.cajon__pie {
  border-top: 1px solid var(--linea);
  padding: var(--e3);
  background: var(--blanco);
}

.cajon__vacio { text-align: center; padding-block: var(--e5); color: var(--texto-70); }

.linea {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .35rem var(--e2);
  padding-block: var(--e2);
  border-bottom: 1px solid var(--linea-suave);
}
.linea__nombre { font-weight: 700; font-size: .95rem; }
.linea__detalle { font-size: .82rem; color: var(--texto-70); grid-column: 1 / -1; margin: 0; }
.linea__precio { font-weight: 700; font-variant-numeric: tabular-nums; }
.linea__mandos { display: flex; align-items: center; gap: .5rem; grid-column: 1 / -1; }
.linea__mandos button {
  width: 28px; height: 28px;
  border: 1px solid var(--linea);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  line-height: 1;
}
.linea__mandos button:hover { border-color: var(--texto); }
.linea__cantidad { min-width: 2ch; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.linea__quitar {
  margin-inline-start: auto;
  background: none; border: 0; cursor: pointer;
  font-size: var(--label); color: var(--texto-70);
  text-decoration: underline; text-underline-offset: 3px;
}
.linea__quitar:hover { color: var(--chocolate); }

.totales { display: grid; gap: .4rem; margin-bottom: var(--e2); }
.totales div { display: flex; justify-content: space-between; font-size: .92rem; }
.totales .total { font-size: 1.15rem; font-weight: 900; padding-top: .5rem; border-top: 1px solid var(--linea); }
.totales .total span:last-child { font-variant-numeric: tabular-nums; }

/* -------------------------------------------------------- FORMULARIOS */
.campo { display: block; margin-bottom: var(--e2); }
.campo > span {
  display: block;
  font-size: var(--label);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: .35rem;
}
.campo input, .campo select, .campo textarea {
  width: 100%;
  padding: .7em .9em;
  border: 1px solid var(--linea);
  border-radius: 8px;
  background: var(--blanco);
  transition: border-color var(--transicion);
}
.campo input:hover, .campo select:hover, .campo textarea:hover { border-color: var(--texto-70); }
.campo textarea { min-height: 7em; resize: vertical; }
.campo--error input, .campo--error select, .campo--error textarea { border-color: var(--naranja); }
.campo__error { display: block; font-size: .8rem; font-weight: 600; color: var(--chocolate); margin-top: .3rem; }

.opciones-grupo { margin-bottom: var(--e3); }
.opciones-grupo__titulo { font-size: var(--label); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin-bottom: .2rem; }
.opciones-grupo__ayuda { font-size: .82rem; color: var(--texto-70); margin: 0 0 .6rem; }
.opciones-lista { display: flex; flex-wrap: wrap; gap: .45rem; }
.opcion {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  border: 1px solid var(--linea);
  border-radius: 999px;
  padding: .45em .9em;
  font-size: .86rem;
  cursor: pointer;
  transition: border-color var(--transicion), background var(--transicion);
}
.opcion:hover { border-color: var(--texto); }
.opcion input { position: absolute; opacity: 0; width: 0; height: 0; }
.opcion:has(input:checked) { background: var(--azul); color: var(--crema); border-color: var(--texto); }
.opcion:has(input:focus-visible) { outline: 3px solid var(--naranja); outline-offset: 2px; }
.opcion__precio { font-size: .78rem; opacity: .75; }

.segmentado { display: flex; gap: .4rem; }
.segmentado label {
  flex: 1;
  text-align: center;
  border: 1px solid var(--linea);
  border-radius: 999px;
  padding: .55em .8em;
  font-size: .86rem;
  font-weight: 600;
  cursor: pointer;
}
.segmentado input { position: absolute; opacity: 0; width: 0; height: 0; }
.segmentado label:has(input:checked) { background: var(--azul); color: var(--crema); border-color: var(--texto); }

/* -------------------------------------------------------------- DIÁLOGO */
.dialogo {
  border: 0;
  border-radius: var(--radio);
  padding: 0;
  width: min(520px, calc(100vw - 2rem));
  background: var(--crema);
  color: var(--texto);
  box-shadow: 0 24px 60px rgba(18, 61, 90,.28);
}
.dialogo::backdrop { background: rgba(18, 61, 90, .5); }
.dialogo__cabeza { display: flex; gap: var(--e2); padding: var(--e3); border-bottom: 1px solid var(--linea); }
.dialogo__foto { width: 92px; aspect-ratio: 1; object-fit: cover; border-radius: 8px; flex: none; }
.dialogo__cuerpo { padding: var(--e3); max-height: 52vh; overflow-y: auto; }
.dialogo__pie { display: flex; align-items: center; justify-content: space-between; gap: var(--e2); padding: var(--e3); border-top: 1px solid var(--linea); }

/* ------------------------------------------------------------------ PIE */
.pie { background: var(--azul); color: var(--crema); padding-block: var(--e6) var(--e4); }
.pie a { text-decoration: none; }
.pie a:hover { text-decoration: underline; text-underline-offset: 3px; }
.pie__logo { width: 150px; margin-bottom: var(--e3); }
.pie__titulo {
  font-size: var(--label);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--naranja);   /* sobre azul: 5,69:1, se lee bien */
  margin-bottom: var(--e2);
}
.pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; font-size: .93rem; }
.pie__legal {
  margin-top: var(--e5);
  padding-top: var(--e3);
  border-top: 1px solid rgba(255, 255, 255, .18);
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
  justify-content: space-between;
  font-size: .82rem;
  opacity: .72;
}

/* --------------------------------------------------------------- AVISO */
.aviso {
  background: var(--naranja);
  color: var(--texto);
  text-align: center;
  padding: .6rem var(--margen);
  font-size: .84rem;
  font-weight: 600;
}

/* -------------------------------------------------------- BRINDIS/TOAST */
.brindis {
  position: fixed;
  left: 50%;
  bottom: 1.5rem;
  transform: translate(-50%, 200%);
  background: var(--azul);
  color: var(--crema);
  padding: .85em 1.4em;
  border-radius: 999px;
  font-size: .9rem;
  font-weight: 600;
  z-index: 120;
  box-shadow: var(--sombra);
  transition: transform var(--transicion);
}
.brindis[data-visible="si"] { transform: translate(-50%, 0); }

/* =====================================================================
   MOVIMIENTO
   El manual pide "estetica sin ruido" y prohibe el "ornamento sin
   funcion" (pags. 15 y 23). Asi que aqui hay tres efectos, no diez, y
   cada uno hace un trabajo:

   · la portada rota y respira, porque el producto es lo que vende;
   · la foto de una tarjeta se acerca al pasar el raton, que es la senal
     de "esto se puede pedir";
   · los bloques entran al aparecer, para que la lectura tenga ritmo.

   Todo se apaga entero con prefers-reduced-motion.
   ===================================================================== */

/* -------------------------------------------------- PORTADA QUE ROTA */
.portada__fotos { position: absolute; inset: 0; overflow: hidden; }

.portada__foto {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 62% center;
  opacity: 0;
  transition: opacity 1400ms ease-in-out;
  will-change: opacity;
}
.portada__foto[data-visible="si"] {
  opacity: 1;
  /* Respira despacio mientras esta a la vista: 14 s de un extremo a otro.
     Mas rapido que esto se nota como un efecto y distrae del titular. */
  animation: respirar 14s ease-out forwards;
}

@keyframes respirar {
  from { transform: scale(1); }
  to   { transform: scale(1.07); }
}

/* Puntos para saber cuantas fotos hay y en cual vas. */
.portada__puntos {
  position: absolute; z-index: 2;
  left: var(--margen); bottom: 1.75rem;
  display: flex; gap: .5rem;
}
.portada__punto {
  width: 30px; height: 3px;
  border: 0; padding: 0; border-radius: 2px;
  background: rgba(255, 255, 255, .32);
  cursor: pointer;
  transition: background var(--transicion);
}
.portada__punto:hover { background: rgba(255, 255, 255, .6); }
.portada__punto[aria-current="true"] { background: var(--costura); }

/* ------------------------------------------------ FOTO QUE SE ACERCA */
.tarjeta__marco img,
.editorial__foto img {
  transition: transform 700ms cubic-bezier(.2, .7, .3, 1);
}
.tarjeta:hover .tarjeta__marco img,
.tarjeta:focus-within .tarjeta__marco img { transform: scale(1.06); }
.editorial__foto:hover img { transform: scale(1.03); }

/* El renglon de las listas tambien responde: en el menu de cafe son 32
   filas y sin esto cuesta seguir en cual esta el raton. */
.renglon { transition: background var(--transicion); border-radius: 6px; }
.renglon:hover { background: rgba(246, 167, 34, .13); }

.maridajes__lista li { transition: color var(--transicion); }
.maridajes__lista li:hover { color: var(--texto); }

/* ------------------------------------------------- RITMO DE SUPERFICIES */
/* Sobre blanco, un velo radial calido se ve como una mancha. El ritmo de la
   pagina lo da alternar superficies —blanco y crema—, que es exactamente lo
   que pide la regla de la paleta: que domine azul + blanco/crema. */
.seccion, .seccion--baja, .seccion--alta { position: relative; }

.seccion--crema { background: var(--crema-suave); }
.seccion--crema + .seccion--crema { padding-top: 0; }

/* Solo el bloque azul lleva luz, para que esa masa oscura no quede plana. */
.bloque-oscuro::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(52rem 28rem at 88% 0%,  rgba(246, 167, 34, .14), transparent 60%),
    radial-gradient(40rem 24rem at 4% 100%, rgba(98, 56, 39, .34), transparent 62%);
}
.bloque-oscuro > * { position: relative; }


/* ------------------------------------------------ ENTRADA AL APARECER */
/* La entrada escala desde 0.98 en vez de desplazarse hacia abajo. Un
   translateY empuja la tarjeta fuera de los limites de su familia mientras
   espera a ser revelada, y eso alarga la pagina por abajo; un escalado
   hacia dentro nunca desborda. */
.revelar {
  opacity: 0;
  transform: scale(.982);
  transition: opacity 620ms ease-out, transform 620ms cubic-bezier(.2, .7, .3, 1);
}
.revelar[data-visto="si"] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .portada__foto[data-visible="si"] { animation: none; }
  .revelar { opacity: 1; transform: none; transition: none; }
  .tarjeta:hover .tarjeta__marco img,
  .editorial__foto:hover img { transform: none; }
}

/* ----------------------------------------------- FOTO A LA ALTURA DEL TEXTO */
/* Antes la figura se centraba y quedaba flotando pequena junto a una
   columna de texto mucho mas alta. Estirandola, la fila se lee como un
   bloque y no como dos piezas sueltas. */
.editorial { align-items: stretch; }
.editorial__foto { display: flex; }
.editorial__foto img {
  width: 100%;
  height: 100%;
  min-height: 320px;
  aspect-ratio: auto;
  object-fit: cover;
}
@media (max-width: 900px) {
  .editorial__foto img { min-height: 260px; }
}

/* =====================================================================
   MODULOS NUEVOS — 28/08/2026
   Lo nuevo (blog) · opiniones · redes · barra movil
   ===================================================================== */

/* ------------------------------------------------- TARJETA ENLAZADA */
/* En el blog la tarjeta entera es el enlace. Un "Leer mas" suelto obliga a
   apuntar a un texto de 40 px en una tarjeta de 300. */
.tarjeta__enlace {
  display: flex; flex-direction: column;
  height: 100%; text-decoration: none; color: inherit;
}
.tarjeta__mas {
  margin-top: auto; padding-top: var(--e2);
  font-size: var(--label); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--azul);
}
.tarjeta__enlace:hover .tarjeta__mas { color: var(--chocolate); }
.tarjeta__mas::after { content: " →"; }

.vacio-blog {
  grid-column: 1 / -1; text-align: center;
  padding-block: var(--e6); color: var(--texto-70);
  border: 1px dashed var(--linea); border-radius: var(--radio);
}

/* --------------------------------------------------- NOTA DEL BLOG */
.volver {
  font-size: var(--label); font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  text-decoration: none; color: var(--texto-70);
}
.volver:hover { color: var(--azul); }

.nota-figura { margin: var(--e4) 0; border-radius: var(--radio); overflow: hidden; }
.nota-figura img { width: 100%; height: auto; display: block; }

.nota-cuerpo { font-size: 1.05rem; line-height: 1.65; }
.nota-cuerpo p { margin: 0 0 var(--e3); }
.nota-cuerpo .atributos { margin-bottom: var(--e3); }

/* --------------------------------------------------------- OPINIONES */
.estrellas { display: inline-flex; gap: 2px; line-height: 1; }
.estrellas svg { width: 1em; height: 1em; }
.estrellas__llena { fill: var(--naranja); }
.estrellas__vacia { fill: rgba(255, 255, 255, .28); }

.resumen-google {
  display: flex; align-items: center; gap: var(--e3);
  flex-wrap: wrap; margin-bottom: var(--e4);
}
.resumen-google__nota {
  font-size: 3rem; font-weight: 900; line-height: 1;
  letter-spacing: -.02em;
}
.resumen-google__de { font-size: .9rem; opacity: .8; }

.opiniones { display: grid; gap: var(--medianil); grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .opiniones { grid-template-columns: 1fr; } }

.opinion {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--radio);
  padding: var(--e3);
  display: flex; flex-direction: column; gap: .7rem;
}
.opinion__texto { margin: 0; font-size: .96rem; line-height: 1.55; }
.opinion__autor {
  margin-top: auto; padding-top: .4rem;
  font-size: var(--label); font-weight: 700;
  letter-spacing: .06em;
}
.opinion__fuente {
  display: block; font-weight: 400; letter-spacing: 0;
  text-transform: none; opacity: .66; font-size: .78rem;
}

/* -------------------------------------------------------------- REDES */
/* Maximo tres, como pidio el cliente: un guino, no un muro. */
/* Rejilla de tres columnas, como el perfil de Instagram. Se mantiene en tres
   tambien en movil: es la lectura que la gente ya tiene aprendida, y con
   cuadrados pequenos sigue funcionando porque la tarjeta entera es el enlace. */
.redes-tira { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
@media (max-width: 700px) { .redes-tira { gap: .35rem; } }

.red-item {
  position: relative; display: block;
  aspect-ratio: 1; border-radius: var(--radio); overflow: hidden;
  background: var(--crema); text-decoration: none;
}
.red-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms cubic-bezier(.2,.7,.3,1); }
.red-item:hover img { transform: scale(1.06); }
.red-item__velo {
  position: absolute; inset: auto 0 0 0;
  padding: 2.4rem .9rem .8rem;
  background: linear-gradient(to top, rgba(18,61,90,.88), transparent);
  color: #fff; font-size: .84rem; font-weight: 600; line-height: 1.3;
}
.red-item__red {
  position: absolute; top: .6rem; right: .6rem;
  background: rgba(255,255,255,.92); color: var(--azul);
  border-radius: 999px; padding: .25em .7em;
  font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}

/* ------------------------------------------------ LLAMADA DEL CLUB */
/* El cliente pidio que "Unete gratis" se viera mas. Se le da tamano, el
   naranja de llamada y el dato que quita el miedo: que es gratis. */
.club-llamada {
  display: inline-flex; flex-direction: column; align-items: flex-start; gap: .35rem;
}
.club-llamada .boton { font-size: .92rem; padding: 1em 2.2em; }
.club-llamada small {
  font-size: .8rem; color: var(--texto-70);
}
.bloque-oscuro .club-llamada small { color: rgba(255,255,255,.7); }

/* ------------------------------------------------------- BARRA MOVIL */
/* Siempre a mano y sin tapar nada: solo aparece por debajo de 760 px, que
   es donde el boton "Pedido" de la cabecera queda lejos del pulgar. */
.barra-movil { display: none; }

@media (max-width: 760px) {
  .barra-movil {
    position: fixed; z-index: 80;
    left: 0; right: 0; bottom: 0;
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--linea);
    border-top: 1px solid var(--linea);
    box-shadow: 0 -6px 20px rgba(18, 61, 90, .10);
    /* Respeta la franja del iPhone. */
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .barra-movil a {
    display: flex; align-items: center; justify-content: center; gap: .5em;
    padding: .95rem .5rem;
    background: var(--blanco); color: var(--azul);
    font-size: .82rem; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase;
    text-decoration: none;
  }
  .barra-movil a.es-principal { background: var(--naranja); color: var(--texto); }
  .barra-movil svg { width: 17px; height: 17px; flex: none; }

  /* Sin esto la barra tapa el final de la pagina y del cajon de pedido. */
  body { padding-bottom: 3.6rem; }
  .cajon { bottom: 3.6rem; }
}

/* ------------------------------------------ AJUSTES FINOS EN MOVIL */
@media (max-width: 560px) {
  /* Objetivos tactiles: 44 px es el minimo comodo para un pulgar. */
  .boton, .boton-agregar, .chip { min-height: 44px; }
  .boton-agregar { padding-inline: 1.1em; }
  .linea__mandos button { width: 34px; height: 34px; }

  /* La portada no necesita ser tan alta en un telefono. */
  .portada__contenido { padding-block: clamp(3.5rem, 12vh, 6rem); }

  /* El precio y el boton de cada renglon, sin apretarse. */
  .renglon { gap: .5rem var(--e2); padding-block: .9rem; }
}

/* ------------------------------------------------ PROTAGONISMO DEL PRODUCTO */
/* En la portada la tarjeta se estira a vertical: la foto gana casi el doble
   de superficie y el producto pesa mas que el texto, que es lo que pidio el
   cliente. En el menu se queda en 4/3, donde importa comparar y no seducir. */
.parrilla--producto .tarjeta__marco { aspect-ratio: 4 / 5; }

@media (max-width: 700px) {
  .parrilla--producto .tarjeta__marco { aspect-ratio: 4 / 3; }
}

/* ------------------------------------------------ LLAMADA DEL CLUB */
/* El cliente pidio que "Unete gratis" se viera mas. Se le da tamano, el
   naranja de llamada y el dato que quita el miedo: que es gratis. */
.club-llamada {
  display: inline-flex; flex-direction: column; align-items: flex-start; gap: .35rem;
}
.club-llamada .boton { font-size: .92rem; padding: 1em 2.2em; }
.club-llamada small {
  font-size: .8rem; color: var(--texto-70);
}
.bloque-oscuro .club-llamada small { color: rgba(255,255,255,.7); }

/* ------------------------------------------------------- BARRA MOVIL */
/* Siempre a mano y sin tapar nada: solo aparece por debajo de 760 px, que
   es donde el boton "Pedido" de la cabecera queda lejos del pulgar. */
.barra-movil { display: none; }

@media (max-width: 760px) {
  .barra-movil {
    position: fixed; z-index: 80;
    left: 0; right: 0; bottom: 0;
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--linea);
    border-top: 1px solid var(--linea);
    box-shadow: 0 -6px 20px rgba(18, 61, 90, .10);
    /* Respeta la franja del iPhone. */
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .barra-movil a {
    display: flex; align-items: center; justify-content: center; gap: .5em;
    padding: .95rem .5rem;
    background: var(--blanco); color: var(--azul);
    font-size: .82rem; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase;
    text-decoration: none;
  }
  .barra-movil a.es-principal { background: var(--naranja); color: var(--texto); }
  .barra-movil svg { width: 17px; height: 17px; flex: none; }

  /* Sin esto la barra tapa el final de la pagina y del cajon de pedido. */
  body { padding-bottom: 3.6rem; }
  .cajon { bottom: 3.6rem; }
}

/* ------------------------------------------ AJUSTES FINOS EN MOVIL */
@media (max-width: 560px) {
  /* Objetivos tactiles: 44 px es el minimo comodo para un pulgar. */
  .boton, .boton-agregar, .chip { min-height: 44px; }
  .boton-agregar { padding-inline: 1.1em; }
  .linea__mandos button { width: 34px; height: 34px; }

  /* La portada no necesita ser tan alta en un telefono. */
  .portada__contenido { padding-block: clamp(3.5rem, 12vh, 6rem); }

  /* El precio y el boton de cada renglon, sin apretarse. */
  .renglon { gap: .5rem var(--e2); padding-block: .9rem; }
}

/* ------------------------------------------------ PROTAGONISMO DEL PRODUCTO */
/* En la portada la tarjeta se estira a vertical: la foto gana casi el doble
   de superficie y el producto pesa mas que el texto, que es lo que pidio el
   cliente. En el menu se queda en 4/3, donde importa comparar y no seducir. */
.parrilla--producto .tarjeta__marco { aspect-ratio: 4 / 5; }

@media (max-width: 700px) {
  .parrilla--producto .tarjeta__marco { aspect-ratio: 4 / 3; }
}

/* --------------------------------------------------------- TIRA DE ANTOJO */
/* Una banda a sangre completa, sin texto encima: caramelo, chocolate, cafe y
   empaque en primer plano. Es la seccion que mas producto muestra por pixel.
   En movil se desliza con el dedo en vez de encogerse hasta no verse. */
.tira-antojo {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2px;
  background: var(--linea);
}
.tira-antojo figure {
  position: relative;
  margin: 0;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--crema);
}
.tira-antojo img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 900ms cubic-bezier(.2,.7,.3,1);
}
.tira-antojo figure:hover img { transform: scale(1.05); }

/* El pie aparece al pasar por encima: sin el, la banda es solo fotografia. */
.tira-antojo figcaption {
  position: absolute; inset: auto 0 0 0;
  padding: 2.2rem .85rem .8rem;
  background: linear-gradient(to top, rgba(18,61,90,.90), transparent);
  color: #fff;
  font-size: .8rem; font-weight: 600;
  letter-spacing: .04em;
  opacity: 0; transform: translateY(6px);
  transition: opacity 300ms ease, transform 300ms ease;
}
.tira-antojo figure:hover figcaption,
.tira-antojo figure:focus-within figcaption { opacity: 1; transform: none; }

@media (max-width: 860px) {
  .tira-antojo {
    grid-template-columns: repeat(5, 62vw);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .tira-antojo::-webkit-scrollbar { display: none; }
  .tira-antojo figure { scroll-snap-align: center; aspect-ratio: 4 / 5; }
  /* En pantalla tactil no hay hover: el pie va siempre visible. */
  .tira-antojo figcaption { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .tira-antojo img { transition: none; }
  .tira-antojo figure:hover img { transform: none; }
}

/* ------------------------------------------- OBJETIVOS TACTILES EN MOVIL */
/* Medido sobre el sitio en vivo: varios mandos se quedaban por debajo de los
   44 px que necesita un pulgar. Se agranda el AREA de toque sin agrandar el
   dibujo, para no engordar la interfaz. */
@media (max-width: 760px) {

  /* El boton de pedido de la cabecera medía 35 px. */
  .boton-pedido { min-height: 44px; }

  /* La X del cajon medía 32. */
  .cajon__cerrar { min-width: 44px; min-height: 44px; }

  /* Los puntos del carrusel: el punto sigue midiendo 3 px, pero se toca en
     un area de 44. Sin esto hay que acertarle a un pixel. */
  .portada__puntos { gap: 0; }
  .portada__punto {
    position: relative;
    background-clip: content-box;
    padding-block: 20px;
  }
  .portada__punto::after {
    content: "";
    position: absolute;
    inset: -14px -8px;
  }

  /* Los enlaces del pie median 21 px y van uno pegado a otro: es donde mas
     se falla el toque. Se separan y se les da alto. */
  .pie li { margin-bottom: 2px; }
  .pie li a {
    display: inline-block;
    padding-block: .55rem;
    min-height: 44px;
    line-height: 1.4;
  }
}

/* ----------------------------------------------- CARRUSEL DE PRODUCTO */
/* El movimiento lo hace el scroll nativo, no un transform: asi funciona el
   dedo, la rueda del raton, el trackpad y el teclado sin escribir codigo
   para cada uno, y el navegador se encarga de la inercia. Las flechas solo
   llaman a scrollBy(). */
.carrusel-producto {
  position: relative;
  background: var(--linea);
}

.carrusel__pista {
  display: grid;
  grid-auto-flow: column;
  /* En escritorio se asoma la quinta foto: sin ese recorte nadie sabe que
     hay mas y el carrusel parece una rejilla. */
  grid-auto-columns: calc((100% - 4 * 2px) / 4.4);
  gap: 2px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.carrusel__pista::-webkit-scrollbar { display: none; }
.carrusel__pista:focus-visible { outline: 3px solid var(--naranja); outline-offset: -3px; }

.carrusel__pieza {
  position: relative;
  margin: 0;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--crema);
  scroll-snap-align: start;
}
.carrusel__pieza img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 900ms cubic-bezier(.2,.7,.3,1);
}
.carrusel__pieza:hover img { transform: scale(1.05); }

.carrusel__pieza figcaption {
  position: absolute; inset: auto 0 0 0;
  padding: 2.2rem .85rem .8rem;
  background: linear-gradient(to top, rgba(18,61,90,.90), transparent);
  color: #fff;
  font-size: .8rem; font-weight: 600; letter-spacing: .04em;
  /* Solo opacidad. Un translateY hacia abajo empujaba la caja 6 px por
     debajo del borde: se veia bien —el padre recorta— pero la seccion
     crecia esos 6 px. */
  opacity: 0;
  transition: opacity 300ms ease;
}
.carrusel__pieza:hover figcaption,
.carrusel__pieza:focus-within figcaption { opacity: 1; }

/* --- flechas --- */
.carrusel__flecha {
  position: absolute; top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border: 0; border-radius: 999px;
  background: rgba(255, 255, 255, .93);
  color: var(--azul);
  box-shadow: 0 2px 10px rgba(18, 61, 90, .22);
  cursor: pointer;
  transition: background 200ms ease, opacity 200ms ease, transform 200ms ease;
}
.carrusel__flecha svg { width: 22px; height: 22px; }
.carrusel__flecha:hover { background: #fff; }
.carrusel__flecha:focus-visible { outline: 3px solid var(--naranja); outline-offset: 3px; }
.carrusel__flecha--antes { left: 14px; }
.carrusel__flecha--luego { right: 14px; }

/* Cuando ya no hay a donde ir, la flecha se apaga y deja de recibir el
   raton: un boton que no hace nada es peor que ninguno. */
.carrusel__flecha[disabled] {
  opacity: 0; pointer-events: none;
}

@media (max-width: 860px) {
  .carrusel__pista { grid-auto-columns: 62vw; }
  .carrusel__pieza { aspect-ratio: 4 / 5; }
  /* En pantalla tactil no hay hover: el pie va siempre visible, y las
     flechas sobran porque se arrastra con el dedo. */
  .carrusel__pieza figcaption { opacity: 1; }
  .carrusel__flecha { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .carrusel__pista { scroll-behavior: auto; }
  .carrusel__pieza img { transition: none; }
  .carrusel__pieza:hover img { transform: none; }
}

/* --------------------------------------------------------------- REDES */
/* Una fila de iconos, no una linea de texto separada por puntos. Los
   enlaces a redes se buscan con la vista, no se leen: un icono reconocible
   se encuentra antes que su nombre escrito. */
/* `ul.redes-fila` y no `.redes-fila` a secas: el pie define
   `.pie ul { display: grid }`, que empata en especificidad y ganaba por ir
   antes. Nombrar la etiqueta desempata sin recurrir a !important. */
ul.redes-fila {
  display: flex;
  gap: .6rem;
  flex-wrap: wrap;
  align-items: center;
  list-style: none;
  margin: 0; padding: 0;
}
.redes-fila a {
  display: grid; place-items: center;
  width: 44px; height: 44px;          /* el minimo comodo para un pulgar */
  border-radius: 999px;
  border: 1px solid currentColor;
  color: inherit;
  text-decoration: none;
  transition: background 200ms ease, color 200ms ease, transform 200ms ease;
}
.redes-fila svg { width: 20px; height: 20px; }
.redes-fila a:hover { transform: translateY(-2px); }

/* En el pie, sobre azul */
.pie .redes-fila a { border-color: rgba(255,255,255,.35); }
.pie .redes-fila a:hover { background: var(--naranja); border-color: var(--naranja); color: var(--texto); }

/* En claro */
.seccion .redes-fila a { border-color: var(--linea); color: var(--azul); }
.seccion .redes-fila a:hover { background: var(--azul); border-color: var(--azul); color: #fff; }

/* Version grande, para la seccion "Siguenos" */
.redes-fila--grande a { width: 54px; height: 54px; }
.redes-fila--grande svg { width: 24px; height: 24px; }

.redes-arroba {
  font-weight: 700;
  letter-spacing: .06em;
  margin-inline-start: .3rem;
}

/* --------------------------------------------------- BUZON DE SUGERENCIAS */
/* La caja se apoya en la costura de la marca por arriba, para que no se lea
   como un recuadro genérico de formulario. */
.sugerencias__caja {
  position: relative;
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: var(--e5) var(--e4);
  box-shadow: 0 2px 6px rgba(18, 61, 90, .06), 0 18px 44px rgba(18, 61, 90, .10);
  overflow: hidden;
}
.sugerencias__caja::before {
  content: "";
  position: absolute; inset: 0 0 auto 0;
  height: 5px;
  background: var(--costura);
}

@media (max-width: 560px) {
  .sugerencias__caja { padding: var(--e4) var(--e3); }
}

/* --- estrellas ---
   Son radios de verdad, no divs con onclick: asi funcionan con teclado y un
   lector de pantalla las anuncia como lo que son, una eleccion entre cinco.
   El radio se esconde de la vista pero NO del arbol de accesibilidad. */
.estrellas-elegir {
  display: flex;
  gap: .15rem;
  flex-wrap: wrap;
  border: 0; padding: 0; margin: 0 0 var(--e3);
}
.estrellas-elegir legend {
  float: left; width: 100%;
  font-size: var(--label); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--chocolate);
  margin-bottom: .5rem;
}
.estrellas-elegir input {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
}
.estrellas-elegir label {
  cursor: pointer;
  line-height: 1;
  padding: .2rem;
  color: var(--crema-honda);
  transition: color 140ms ease, transform 140ms ease;
}
.estrellas-elegir svg { width: 42px; height: 42px; display: block; fill: currentColor; }

/* Las estrellas van en orden natural 1..5 en el documento. Antes se
   invertian con row-reverse para poder pintar "las anteriores" con el
   combinador ~, pero eso rompia el teclado: las flechas siguen el orden del
   documento, no el visual, y ArrowLeft movia hacia la derecha. Ahora ambos
   ordenes coinciden y el relleno lo hace :has(), que si mira hacia atras.

   Sin :has() (navegador viejo) solo se pinta la estrella elegida: se ve
   peor, pero se entiende y se puede usar igual. */
.estrellas-elegir input:checked + label { color: var(--naranja); }
.estrellas-elegir label:has(~ input:checked) { color: var(--naranja); }

/* Vista previa al pasar por encima: la senalada y todas las anteriores. */
.estrellas-elegir label:hover { color: var(--naranja); }
.estrellas-elegir label:has(~ label:hover) { color: var(--naranja); }

.estrellas-elegir input:focus-visible + label {
  outline: 3px solid var(--azul);
  outline-offset: 2px;
  border-radius: 4px;
}
.estrellas-elegir label:active { transform: scale(.92); }

/* Texto que dice en palabras lo que se eligió: un icono naranja no basta
   para quien no distingue el color. */
.estrellas-dicho {
  display: block;
  margin-top: .4rem;
  font-size: .9rem;
  color: var(--texto-70);
  min-height: 1.3em;
}

@media (prefers-reduced-motion: reduce) {
  .estrellas-elegir label { transition: none; }
  .estrellas-elegir label:active { transform: none; }
}

.sugerencias__gracias {
  text-align: center;
  padding: var(--e4) var(--e2);
}
.sugerencias__gracias p { margin: 0 auto; max-width: 46ch; }

/* El tic dentro de un círculo naranja: cierra el gesto sin necesitar texto. */
.gracias__marca {
  width: 34px; height: 34px;
  padding: 12px;
  box-sizing: content-box;
  border-radius: 999px;
  background: var(--naranja);
  color: var(--texto);
}

/* ------------------------------------------------- CAJON: LINEA NUEVA */
/* La linea recien agregada se enciende un momento. Con tres productos ya
   dentro, ver la lista cambiar no dice CUAL se agrego. */
.linea--nueva {
  animation: entra-linea 1400ms ease-out;
}
@keyframes entra-linea {
  0%   { background: rgba(246, 167, 34, .38); }
  60%  { background: rgba(246, 167, 34, .22); }
  100% { background: transparent; }
}

/* La marca del cajon: sin esto se abre un panel sin dueno.
   El logo y el titulo van juntos a la izquierda y la X al otro extremo; si
   se reparten los tres por igual, el titulo queda flotando en el medio. */
.cajon__marca {
  display: block;
  height: 40px; width: auto;
  flex: none;
}
.cajon__cabeza {
  align-items: center;
  gap: .7rem;
}
.cajon__cabeza .titulo-2 { margin-right: auto; }

@media (prefers-reduced-motion: reduce) {
  .linea--nueva { animation: none; background: rgba(246, 167, 34, .16); }
}