/* =====================================================================
   Cafetería Gabo · Estilos de la página
   Usa los valores de tokens.css. Dirección visual A · "Rótulo".
   ===================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: var(--e-4);
}
@media (prefers-reduced-motion: no-preference) {
  html:not(.movimiento-reducido) { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--f-texto);
  font-size: var(--t-base);
  line-height: var(--lh-texto);
  overflow-wrap: break-word;
}

h1, h2, h3 {
  font-family: var(--f-titulo);
  font-weight: 400;
  line-height: var(--lh-titulo);
  margin: 0;
  text-wrap: balance;
}
p { margin: 0; text-wrap: pretty; }
svg { display: block; }

:focus-visible {
  outline: 3px solid var(--foco);
  outline-offset: 3px;
}

.contenedor {
  width: 100%;
  max-width: var(--ancho-max);
  margin-inline: auto;
  padding-inline: var(--margen-lateral);
}

/* Enlace para saltar al contenido (visible al usar el teclado) */
.saltar {
  position: absolute;
  left: var(--e-4);
  top: var(--e-2);
  z-index: 10;
  padding: var(--e-2) var(--e-4);
  background: var(--c-anil);
  color: var(--c-blanco);
  font-weight: 700;
  border-radius: var(--radio);
  transform: translateY(-200%);
}
.saltar:focus { transform: none; }

/* Datos que faltan: siempre visibles */
.pendiente {
  display: inline-block;
  max-width: var(--medida);
  margin-top: var(--e-3);
  padding: var(--e-2) var(--e-3);
  border: var(--borde-fino) dashed var(--c-anil);
  border-radius: var(--radio);
  background: var(--c-nixtamal);
  color: var(--c-anil);
  font-size: var(--t-pequeno);
  line-height: 1.45;
}

/* ---------- Logo (rótulo de texto) ---------- */
.logo {
  display: inline-block;
  text-align: center;
  line-height: 1;
  color: var(--c-rojo);
  text-decoration: none;
  font-size: 2rem;
  padding: var(--e-1) 0;
}
.logo__cafeteria {
  display: block;
  font-family: var(--f-manuscrita);
  font-size: 0.36em;
  color: var(--c-anil);
  transform: rotate(-4deg);
  margin-bottom: 0.04em;
}
.logo__nombre {
  display: block;
  font-family: var(--f-titulo);
  letter-spacing: 0.02em;
  text-shadow: var(--sombra-texto-rotulo);
}

/* ---------- Botones ---------- */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  min-height: var(--tactil-min);
  padding: var(--e-3) var(--e-5);
  border: var(--borde-grueso) solid var(--borde);
  border-radius: var(--radio);
  background: var(--accion);
  color: var(--accion-texto);
  font: 700 var(--t-mediano) / 1.1 var(--f-texto);
  text-decoration: none;
  text-align: center;
  box-shadow: var(--sombra-solida);
  transition:
    transform var(--dur-rapida) var(--ease-salida),
    box-shadow var(--dur-rapida) var(--ease-salida);
}
/* El "levantarse" al pasar el mouse solo en equipos con mouse (en el celular no hay hover) */
@media (hover: hover) and (pointer: fine) {
  .boton:hover {
    transform: translate(-2px, -2px);
    box-shadow: var(--sombra-solida-hover);
  }
}
.boton:active {
  transform: translate(4px, 4px);
  box-shadow: 0 0 0 var(--c-anil);
  background: var(--c-rojo-hondo);
}
.boton--chico {
  font-size: var(--t-pequeno);
  padding: var(--e-2) var(--e-4);
}

.enlace {
  display: inline-flex;
  align-items: center;
  min-height: var(--tactil-min);
  color: var(--c-anil);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}
.enlace:hover { text-decoration-thickness: 4px; }

/* ---------- Encabezado ---------- */
.encabezado {
  background: var(--fondo-marca);
  border-bottom: var(--borde-grueso) solid var(--borde);
}
.encabezado__fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  padding-block: var(--e-2);
}

/* ---------- Hero ---------- */
.hero {
  background: var(--fondo-marca);
  border-bottom: var(--borde-grueso) solid var(--borde);
  padding-block: var(--e-6) var(--e-7);
}
.hero__rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e-6);
  align-items: center;
}
.hero h1 {
  font-size: var(--t-h1);
  max-width: 14ch;
}
.hero__bajada {
  margin-top: var(--e-5);
  max-width: var(--medida);
  font-size: var(--t-mediano);
}
.hero__acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-4) var(--e-5);
  margin-top: var(--e-6);
}
.horario {
  display: inline-flex;
  flex-wrap: wrap;
  column-gap: 0.3em;
  margin-top: var(--e-5);
  padding: var(--e-2) var(--e-3);
  background: var(--fondo-oscuro);
  color: var(--texto-invertido);
  font-weight: 700;
  border-radius: var(--radio);
}
.hero .pendiente { display: block; width: fit-content; }
.hero__ilustracion { justify-self: center; width: 100%; max-width: 15rem; }
.olla { width: 100%; height: auto; overflow: visible; }

@media (min-width: 56rem) {
  .hero { padding-block: var(--e-8) var(--e-9); }
  .hero__rejilla { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .hero__ilustracion { max-width: 24rem; justify-self: end; }
  .logo { font-size: 2.4rem; }
  .boton--chico { font-size: var(--t-base); }
}

/* ---------- Encabezados de sección ---------- */
.menu h2,
.cafe h2,
.razones h2 {
  font-size: var(--t-h2);
  max-width: 18ch;
}

/* ---------- Menú ---------- */
.menu {
  padding-block: var(--e-seccion);
}
.menu__intro {
  margin-top: var(--e-4);
  max-width: var(--medida);
  font-size: var(--t-mediano);
}
.menu__grupos {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e-7) var(--e-6);
  margin-top: var(--e-7);
}
@media (min-width: 48rem) {
  .menu__grupos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 64rem) {
  .menu__grupos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.grupo h3 {
  font-size: var(--t-h3);
  color: var(--c-rojo);
  margin-top: var(--e-5);
  padding-bottom: var(--e-3);
  border-bottom: var(--borde-grueso) solid var(--borde);
}
.grupo__lista {
  list-style: none;
  margin: 0;
  padding: 0;
}
.grupo__lista li {
  padding-block: var(--e-4);
  border-bottom: var(--borde-fino) dotted var(--c-anil);
}
.grupo__lista strong {
  display: block;
  font-size: var(--t-mediano);
  line-height: 1.3;
}
.pendiente--linea {
  display: block;
  width: fit-content;
  margin-top: var(--e-2);
}
.enlace--chico {
  min-height: var(--tactil-min);
  font-size: var(--t-pequeno);
  margin-left: var(--e-1);
}

/* Espacio reservado para fotos reales: mantiene su proporción para que la página no salte */
.foto-pendiente {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  padding: var(--e-4);
  background:
    repeating-linear-gradient(-45deg, rgba(27, 42, 74, 0.06) 0 10px, transparent 10px 20px),
    var(--c-blanco);
  border: var(--borde-grueso) dashed var(--c-anil);
  border-radius: var(--radio);
  text-align: center;
  font-size: var(--t-pequeno);
  font-weight: 700;
}

/* ---------- Café de olla ---------- */
.cafe {
  padding-block: var(--e-seccion);
  border-top: var(--borde-grueso) solid var(--borde);
}
.cafe__intro {
  margin-top: var(--e-4);
  max-width: var(--medida);
  font-size: var(--t-mediano);
}
.cafe__rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e-6);
  margin-top: var(--e-7);
}
.cafe__olla {
  justify-self: center;
  width: 100%;
  max-width: 13rem;
}
.cafe__pasos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--e-5);
}
.paso {
  padding: var(--e-5);
  background: var(--c-blanco);
  border: var(--borde-grueso) solid var(--borde);
  border-radius: var(--radio);
}
.paso h3 {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  font-size: var(--t-h3);
}
.paso p { margin-top: var(--e-3); max-width: var(--medida); }
.paso__numero {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 2.4rem;
  height: 2.4rem;
  background: var(--fondo-marca);
  border: var(--borde-grueso) solid var(--borde);
  border-radius: 50%;
  font-size: 1.15rem;
}

@media (min-width: 56rem) {
  .cafe__rejilla {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: var(--e-8);
    align-items: start;
  }
  /* La olla acompaña mientras bajas: se queda a la vista, sin bloquear el scroll */
  .cafe__olla {
    position: sticky;
    top: 12vh;
    max-width: 24rem;
  }
  .cafe__pasos { gap: 22vh; padding-block: 4vh 16vh; }
}

/* Variantes */
.versiones {
  margin-top: var(--e-7);
  padding-top: var(--e-6);
  border-top: var(--borde-grueso) solid var(--borde);
}
.versiones__titulo { font-size: var(--t-h3); }
.versiones__lista {
  list-style: none;
  margin: var(--e-5) 0 var(--e-6);
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e-4);
}
.versiones__lista li { max-width: var(--medida); }
.versiones__lista strong {
  display: block;
  font-family: var(--f-titulo);
  font-weight: 400;
  font-size: var(--t-mediano);
  color: var(--c-rojo);
}
@media (min-width: 48rem) {
  .versiones__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-6); }
}

/* ---------- Por qué Gabo ---------- */
.razones {
  background: var(--fondo-oscuro);
  color: var(--texto-invertido);
  padding-block: var(--e-seccion);
}
.razones h2 { color: var(--c-mostaza); }
.razones__lista {
  list-style: none;
  margin: var(--e-7) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e-6) var(--e-7);
}
@media (min-width: 48rem) {
  .razones__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.razon {
  padding-top: var(--e-4);
  border-top: var(--borde-grueso) solid var(--c-mostaza);
}
.razon h3 {
  font-size: var(--t-h3);
  color: var(--c-nixtamal);
}
.razon p {
  margin-top: var(--e-3);
  max-width: var(--medida);
}

/* ---------- Cómo pedir ---------- */
.pedir {
  background: var(--fondo-marca);
  border-bottom: var(--borde-grueso) solid var(--borde);
  padding-block: var(--e-seccion);
}
.pedir h2 {
  font-size: var(--t-h2);
  max-width: 18ch;
}
.pedir__intro {
  margin-top: var(--e-4);
  max-width: var(--medida);
  font-size: var(--t-mediano);
}
.pedir__pasos {
  list-style: none;
  margin: var(--e-7) 0 var(--e-7);
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e-6);
}
@media (min-width: 56rem) {
  .pedir__pasos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-5); }
}
.paso-pedido {
  position: relative;
  padding: var(--e-7) var(--e-5) var(--e-5);
  background: var(--c-nixtamal);
  border: var(--borde-grueso) solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra-solida);
}
/* El número como rótulo: rojo con sombra añil (texto grande, contraste suficiente) */
.paso-pedido__numero {
  position: absolute;
  top: -0.55em;
  left: var(--e-4);
  font-family: var(--f-titulo);
  font-size: 3.5rem;
  line-height: 1;
  color: var(--c-rojo);
  text-shadow: var(--sombra-texto-rotulo);
}
.paso-pedido h3 { font-size: var(--t-h3); }
.paso-pedido p { margin-top: var(--e-3); }
.paso-pedido .pendiente { margin-top: var(--e-4); background: var(--c-blanco); }

/* ---------- Opiniones ---------- */
.opiniones {
  padding-block: var(--e-seccion);
}
.opiniones h2 {
  font-size: var(--t-h2);
  max-width: 18ch;
}
.opiniones__aviso {
  margin-top: var(--e-4);
  max-width: var(--medida);
  padding: var(--e-3) var(--e-4);
  border-left: 6px solid var(--c-rojo);
  background: var(--c-blanco);
}
.opiniones__lista {
  list-style: none;
  margin: var(--e-7) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e-5);
}
@media (min-width: 56rem) {
  .opiniones__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* Ligero desorden, como notas pegadas en el mostrador */
  .opinion:nth-child(2) { margin-top: var(--e-6); }
}
.opinion {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--e-3);
  padding: var(--e-5);
  background: var(--c-blanco);
  border: var(--borde-grueso) solid var(--borde);
  border-radius: var(--radio);
}
.opinion blockquote {
  margin: 0;
  font-size: var(--t-mediano);
  line-height: 1.45;
}
.opinion blockquote p::before { content: "“"; }
.opinion blockquote p::after { content: "”"; }
.opinion__autor {
  margin-top: auto;
  font-weight: 700;
  font-size: var(--t-pequeno);
}
.etiqueta-ejemplo {
  display: inline-block;
  padding: var(--e-1) var(--e-3);
  background: var(--c-anil);
  color: var(--c-nixtamal);
  font-size: var(--t-pequeno);
  font-weight: 700;
  border-radius: var(--radio);
}

/* ---------- Ilustraciones del menú ---------- */
.ilustracion-menu {
  aspect-ratio: 4 / 3;
  background: var(--c-mostaza);
  border: var(--borde-grueso) solid var(--borde);
  border-radius: var(--radio);
  overflow: hidden;
}
.ilustracion-menu svg { width: 100%; height: 100%; }

/* ---------- Preguntas frecuentes ---------- */
.preguntas {
  padding-block: var(--e-seccion);
  border-top: var(--borde-grueso) solid var(--borde);
}
.preguntas__rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e-6);
}
@media (min-width: 56rem) {
  .preguntas__rejilla { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--e-8); align-items: start; }
}
.preguntas h2 { font-size: var(--t-h2); max-width: 14ch; }
.preguntas__lista { border-top: var(--borde-grueso) solid var(--borde); }
.preguntas details { border-bottom: var(--borde-fino) solid var(--borde); }
.preguntas summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  min-height: var(--tactil-min);
  padding-block: var(--e-4);
  font-weight: 700;
  font-size: var(--t-mediano);
  cursor: pointer;
  list-style: none;
}
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary::after {
  content: "+";
  flex: none;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: var(--borde-fino) solid var(--borde);
  border-radius: 50%;
  font-family: var(--f-titulo);
  line-height: 1;
  transition: transform var(--dur-base) var(--ease-salida);
}
.preguntas details[open] summary::after { transform: rotate(45deg); }
.preguntas details p { padding-bottom: var(--e-5); max-width: var(--medida); }

/* ---------- Ubicación ---------- */
.ubicacion {
  padding-block: var(--e-seccion);
  border-top: var(--borde-grueso) solid var(--borde);
  background: var(--c-blanco);
}
.ubicacion__rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e-6);
  align-items: center;
}
@media (min-width: 56rem) {
  .ubicacion__rejilla { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--e-8); }
}
.ubicacion h2 { font-size: var(--t-h2); }
.ubicacion__datos { margin: var(--e-5) 0 0; }
.ubicacion__datos dt { font-weight: 700; margin-top: var(--e-4); }
.ubicacion__datos dd { margin: var(--e-1) 0 0; font-size: var(--t-mediano); }
.ubicacion__datos .etiqueta-ejemplo { vertical-align: middle; margin-left: var(--e-2); }
.ubicacion__mapa {
  width: 100%;
  height: auto;
  border: var(--borde-grueso) solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra-solida);
}

/* ---------- Llamada final ---------- */
.cierre {
  background: var(--fondo-marca);
  border-top: var(--borde-grueso) solid var(--borde);
  padding-block: var(--e-seccion);
  text-align: center;
}
.cierre h2 { font-size: var(--t-h1); margin-inline: auto; max-width: 14ch; }
.cierre p { margin: var(--e-4) auto var(--e-6); max-width: var(--medida); font-size: var(--t-mediano); }

/* ---------- Pie ---------- */
.pie {
  border-top: var(--borde-grueso) solid var(--c-mostaza);
  background: var(--fondo-oscuro);
  color: var(--texto-invertido);
  padding-block: var(--e-7) var(--e-6);
}
.pie__rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e-6);
}
@media (min-width: 48rem) {
  .pie__rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.pie__nombre {
  font-family: var(--f-titulo);
  font-size: var(--t-h3);
  color: var(--c-mostaza);
  margin-bottom: var(--e-2);
}
.pie__titulo {
  font-family: var(--f-texto);
  font-weight: 700;
  font-size: var(--t-base);
  color: var(--c-mostaza);
  margin: var(--e-4) 0 var(--e-1);
}
.pie__titulo:first-child { margin-top: 0; }
.pie__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-2); }
.pie__enlace {
  display: inline-flex;
  align-items: center;
  min-height: var(--tactil-min);
  color: var(--c-nixtamal);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.pie .pendiente { margin-top: 0; }
.pie :focus-visible { outline-color: var(--c-mostaza); }
.pie__aviso {
  margin-top: var(--e-6);
  padding-top: var(--e-4);
  border-top: 1px solid rgba(255, 246, 220, 0.3);
  font-size: var(--t-pequeno);
}

/* ---------- Página 404 ---------- */
.no-encontrada {
  min-height: 70vh;
  display: grid;
  align-content: center;
  padding-block: var(--e-seccion);
  background: var(--fondo-marca);
}
.no-encontrada h1 { font-size: var(--t-h1); max-width: 14ch; }
.no-encontrada p { margin: var(--e-5) 0 var(--e-6); max-width: var(--medida); font-size: var(--t-mediano); }

/* ---------- Animación de la olla (solo si el JavaScript la activa) ----------
   Sin JavaScript, o con movimiento reducido, la olla se ve completa y quieta. */
.olla-animada .olla__ingrediente,
.olla-animada .olla__vapor {
  opacity: 0;
  transform: translateY(-18px);
  transform-box: fill-box;
  transform-origin: center bottom;
  transition:
    opacity var(--dur-entrada) var(--ease-salida),
    transform var(--dur-entrada) var(--ease-salida);
}
.olla-animada .olla__ingrediente.visible,
.olla-animada .olla__vapor.visible {
  opacity: 1;
  transform: none;
}
.olla-animada .paso__numero {
  transition: transform var(--dur-base) var(--ease-salida);
}
.olla-animada .paso.activo .paso__numero { transform: scale(1.15); }

/* Prueba manual de movimiento reducido: añade ?motion=reduce a la dirección */
.movimiento-reducido *,
.movimiento-reducido *::before,
.movimiento-reducido *::after {
  transition-duration: 0ms !important;
  animation-duration: 0ms !important;
  animation-iteration-count: 1 !important;
}