@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. El gradiente #FFD98F → #FEAF10 es el único autorizado por
   el manual y el menú impreso ya lo usa como barra divisoria. Aquí 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 — pág. 9. No se añaden colores nuevos. */
  --rojo:        #D30808;
  --naranja:     #F5A623;
  --caramelo:    #FFD98F;
  --ambar:       #FEAF10;
  --carbon:      #29292E;
  --blanco:      #FFFFFF;
  --dorado:      #B88746;
  --oro-claro:   #FDF5A6;

  /* Tintas derivadas. El manual permite tintas claras (pág. 9 y 11) pero
     advierte que "las tintas no se convierten en nuevos colores de marca".
     --crema es la que ya usa el menú impreso como fondo de página. */
  --crema:       #FFF6E5;
  --crema-honda: #F7E9CE;
  --carbon-70:   #6D6D72;
  --carbon-15:   rgba(41, 41, 46, .15);
  --carbon-08:   rgba(41, 41, 46, .08);

  /* Gradiente autorizado — pág. 9. El único del sitio. */
  --costura: linear-gradient(90deg, var(--caramelo), var(--ambar));

  /* El precio va en carbón, no en el azul marino del menú impreso.
     Ese #274B7A no existe en la paleta oficial; ver LEEME-DISENO.md.
     Para adoptarlo, se cambia sólo esta línea. */
  --precio: var(--carbon);

  /* 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(41,41,46,.05), 0 8px 24px rgba(41,41,46,.06);
  --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(--crema);
  color: var(--carbon);
  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(--ambar);
  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; }
}
@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(--naranja);
  margin-bottom: var(--e2);
}
.kicker--carbon { color: var(--carbon-70); }

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

.nota {
  font-size: var(--label);
  line-height: 1.45;
  color: var(--dorado);
}

/* --------------------------------------------------------------- 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(--rojo); color: var(--blanco); }
.boton--primario:hover { background: #B00707; }

.boton--carbon { background: var(--carbon); color: var(--crema); }
.boton--carbon:hover { background: #000; }

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

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

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

/* ---------------------------------------------------------- ENCABEZADO */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(255, 246, 229, .93);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--carbon-08);
}
.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(--carbon);
  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(--carbon); color: var(--crema); }
.boton-pedido__cuenta {
  min-width: 1.5em;
  padding: 0 .35em;
  border-radius: 999px;
  background: var(--rojo);
  color: var(--blanco);
  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(--carbon-15);
    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(--carbon-08); }
  .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(--carbon); 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(41,41,46,.94) 0%,
              rgba(41,41,46,.86) 34%,
              rgba(41,41,46,.42) 60%,
              rgba(41,41,46,.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(--caramelo); }
.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(41,41,46,.62) 0%,
                rgba(41,41,46,.88) 55%,
                rgba(41,41,46,.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(--carbon-08);
  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(--carbon-15);
  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(--carbon); }
.chip[aria-pressed="true"] { background: var(--carbon); color: var(--crema); border-color: var(--carbon); }
/* 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-radius: var(--radio);
  overflow: hidden;
  box-shadow: var(--sombra);
  transition: transform var(--transicion), box-shadow var(--transicion);
}
.tarjeta:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(41,41,46,.06), 0 16px 36px rgba(41,41,46,.10); }

.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(--rojo);
  color: var(--blanco);
  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(--naranja);
}
.tarjeta__nombre { font-size: 1.12rem; font-weight: 700; }
.tarjeta__desc {
  font-size: .92rem;
  line-height: 1.42;
  color: var(--carbon-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(--carbon-08);
}
.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(--carbon);
  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(--carbon); color: var(--crema); }
.boton-agregar[data-estado="puesto"] { background: var(--rojo); border-color: var(--rojo); color: var(--blanco); }

.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(--naranja);
  padding-bottom: var(--e1);
  border-bottom: 1px solid var(--carbon-15);
  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(--carbon-08);
}
.renglon__nombre { font-weight: 700; }
.renglon__desc {
  display: block;
  font-size: .88rem;
  font-weight: 400;
  color: var(--carbon-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(--carbon-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(255, 217, 143, .16);
}
.maridajes__titulo {
  font-size: var(--label);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--naranja);
  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(--carbon-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(--carbon); color: var(--crema); }
.bloque-oscuro .kicker { color: var(--caramelo); }
.bloque-oscuro .bajada { color: rgba(255, 246, 229, .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(--ambar);
}

/* ----------------------------------------------------------- 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(--ambar);
  line-height: 1;
  margin-bottom: .5rem;
}
.pasos b { display: block; margin-bottom: .2rem; }
.pasos p { margin: 0; font-size: .92rem; color: var(--carbon-70); }

/* ------------------------------------------------------- CAJÓN DE PEDIDO */
.velo {
  position: fixed;
  inset: 0;
  background: rgba(41, 41, 46, .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(41,41,46,.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(--carbon-15);
}
.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(--carbon-15);
  padding: var(--e3);
  background: var(--blanco);
}

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

.linea {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .35rem var(--e2);
  padding-block: var(--e2);
  border-bottom: 1px solid var(--carbon-08);
}
.linea__nombre { font-weight: 700; font-size: .95rem; }
.linea__detalle { font-size: .82rem; color: var(--carbon-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(--carbon-15);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  line-height: 1;
}
.linea__mandos button:hover { border-color: var(--carbon); }
.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(--carbon-70);
  text-decoration: underline; text-underline-offset: 3px;
}
.linea__quitar:hover { color: var(--rojo); }

.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(--carbon-15); }
.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(--carbon-15);
  border-radius: 8px;
  background: var(--blanco);
  transition: border-color var(--transicion);
}
.campo input:hover, .campo select:hover, .campo textarea:hover { border-color: var(--carbon-70); }
.campo textarea { min-height: 7em; resize: vertical; }
.campo--error input, .campo--error select, .campo--error textarea { border-color: var(--rojo); }
.campo__error { display: block; font-size: .8rem; color: var(--rojo); 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(--carbon-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(--carbon-15);
  border-radius: 999px;
  padding: .45em .9em;
  font-size: .86rem;
  cursor: pointer;
  transition: border-color var(--transicion), background var(--transicion);
}
.opcion:hover { border-color: var(--carbon); }
.opcion input { position: absolute; opacity: 0; width: 0; height: 0; }
.opcion:has(input:checked) { background: var(--carbon); color: var(--crema); border-color: var(--carbon); }
.opcion:has(input:focus-visible) { outline: 3px solid var(--ambar); 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(--carbon-15);
  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(--carbon); color: var(--crema); border-color: var(--carbon); }

/* -------------------------------------------------------------- DIÁLOGO */
.dialogo {
  border: 0;
  border-radius: var(--radio);
  padding: 0;
  width: min(520px, calc(100vw - 2rem));
  background: var(--crema);
  color: var(--carbon);
  box-shadow: 0 24px 60px rgba(41,41,46,.28);
}
.dialogo::backdrop { background: rgba(41, 41, 46, .5); }
.dialogo__cabeza { display: flex; gap: var(--e2); padding: var(--e3); border-bottom: 1px solid var(--carbon-15); }
.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(--carbon-15); }

/* ------------------------------------------------------------------ PIE */
.pie { background: var(--carbon); 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(--caramelo);
  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, 246, 229, .18);
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
  justify-content: space-between;
  font-size: .82rem;
  opacity: .72;
}

/* --------------------------------------------------------------- AVISO */
.aviso {
  background: var(--ambar);
  color: var(--carbon);
  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(--carbon);
  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, 246, 229, .32);
  cursor: pointer;
  transition: background var(--transicion);
}
.portada__punto:hover { background: rgba(255, 246, 229, .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(255, 217, 143, .22); }

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

/* ---------------------------------------------------- FONDO CON LUZ */
/* Una luz de caramelo muy tenue detras del contenido: quita la sensacion
   de fondo plano sin introducir un color nuevo, porque es la misma tinta
   de la paleta a muy baja opacidad. */
.seccion, .seccion--baja, .seccion--alta { position: relative; }
.seccion::before, .seccion--baja::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(60rem 30rem at 12% 0%,  rgba(255, 217, 143, .30), transparent 62%),
    radial-gradient(48rem 26rem at 92% 78%, rgba(254, 175, 16,  .12), transparent 60%);
}
.seccion > *, .seccion--baja > * { position: relative; }

/* En el bloque oscuro la luz va al reves: calida y por detras del texto. */
.bloque-oscuro::before {
  background:
    radial-gradient(52rem 28rem at 88% 0%, rgba(254, 175, 16, .16), transparent 60%),
    radial-gradient(40rem 24rem at 5% 100%, rgba(184, 135, 70, .14), transparent 62%);
}

/* ------------------------------------------------ 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; }
}