/* Reset básico: quita márgenes/rellenos por defecto del navegador
   y fuerza box-sizing consistente para que padding/border no rompan anchos */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ============================================
   VARIABLES DE DISEÑO
   Centralizamos la paleta y tipografías aquí para no repetir
   valores "mágicos" por todo el archivo (fácil de mantener/cambiar).
   ============================================ */
:root {
  --color-bg: #000000;              /* Negro puro: fondo principal */

  /* Paleta oficial de marca: Naranja Fuego -> Rojo Naranja */
  --color-primary-start: #FF8C00;   /* Naranja Fuego */
  --color-primary-end: #FF3300;     /* Rojo Naranja vibrante */

  /* Gradiente del botón CTA "Ver Menú" del hero a pantalla completa.
     45deg es intencional: distinto al 135deg que usaban las tarjetas
     del hero anterior (ya retirado por completo de HTML y CSS). */
  --gradient-cta: linear-gradient(45deg, var(--color-primary-start), var(--color-primary-end));

  --color-on-primary: #FFFFFF;      /* Texto sobre el gradiente y sobre el hero: blanco puro */
  --color-text-primary: #F5F5F5;    /* Texto general sobre negro (body) */
  --color-text-secondary: #FFFFFF;  /* Texto del nav inactivo: blanco puro para contraste con el negro */
  --color-surface: #1A1A1A;         /* Gris carbón: fondo del menú desplegable en móvil */

  --color-header-bg: rgba(0, 0, 0, 0.75); /* Negro semitransparente: fondo del header fijo */
  --overlay-hero: rgba(0, 0, 0, 0.6);     /* Capa oscura sobre la foto de fondo del hero */

  /* Alto del header fijo (72px en móvil, ver .site-header): se reutiliza
     como scroll-margin-top en las secciones ancla nuevas para que el
     header flotante no les tape contenido al navegar desde el menú. Se
     redefine a 104px en el breakpoint de escritorio (ver media query al
     final del archivo). */
  --header-offset: 72px;

  --shadow-cta: 0 8px 24px rgba(0, 0, 0, 0.45);          /* Sombra base del botón CTA (profundidad) */
  --shadow-cta-hover: 0 0 32px rgba(255, 140, 0, 0.85);  /* Glow naranja intenso al pasar el mouse */

  --font-logo: 'Playfair Display', Georgia, serif; /* Sin uso actual: el logo hoy es una imagen */
  --font-body: 'Poppins', 'Segoe UI', sans-serif;
  --font-title: 'Rye', Georgia, serif;  /* Solo para el <h1> del hero: look rústico/artesanal */

  /* Dorado/amarillo de las estrellas en "Reseñas de Clientes" (#resenas):
     color intencionalmente FUERA de la paleta naranja-fuego de marca -las
     estrellas imitan el patrón visual estándar de reseñas (Google Maps y
     similares), que siempre son doradas, nunca del color de marca del
     sitio que las muestra-. */
  --color-star: #FFC107;
}

/* ============================================
   BASE
   ============================================ */
body {
  background-color: var(--color-bg);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  /* -webkit-font-smoothing mejora la legibilidad del texto claro sobre negro */
  -webkit-font-smoothing: antialiased;
}

a {
  text-decoration: none;
}

ul {
  list-style: none;
}

/* ============================================
   HEADER
   position: fixed: el header queda flotando SOBRE el hero de pantalla
   completa, con fondo negro semitransparente + blur para que el menú
   siga siendo legible al hacer scroll sobre la foto de fondo.
   Mobile-first: en móvil solo vemos logo + botón hamburguesa.
   El menú completo aparece desde 1024px (ver media query al final).
   ============================================ */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 72px;
  padding: 0 1.25rem;
  background-color: var(--color-header-bg);
  /* Difumina lo que se ve detrás del header al hacer scroll (la foto del
     hero), reforzando el contraste del texto blanco del menú */
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px); /* prefijo requerido por Safari */
}

.site-header__logo {
  /* Se conserva el mismo tamaño que ya tenía: 60px de alto, ancho automático
     para no deformar el logo. */
  height: 60px;
  width: auto;
}

/* --- Truco de checkbox para el menú móvil (sin JavaScript) --- */
.nav-toggle {
  /* Ocultamos el checkbox real pero lo mantenemos accesible por teclado */
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.nav-toggle-label {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 32px;
  height: 32px;
  cursor: pointer;
}

.nav-toggle-label span {
  display: block;
  height: 2px;
  width: 100%;
  background-color: var(--color-text-primary);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

/* Cuando el checkbox está marcado, transformamos las 3 líneas en una "X" */
.nav-toggle:checked ~ .nav-toggle-label span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-toggle:checked ~ .nav-toggle-label span:nth-child(2) {
  opacity: 0;
}
.nav-toggle:checked ~ .nav-toggle-label span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Menú desplegable en móvil: usamos max-height para animar la apertura
   (max-height: 0 -> valor grande) en lugar de display, así la transición es suave */
.main-nav {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  overflow: hidden;
  max-height: 0;
  background-color: var(--color-bg);
  border-bottom: 1px solid var(--color-surface);
  transition: max-height 0.3s ease;
}

.nav-toggle:checked ~ .main-nav {
  max-height: 320px;
}

.main-nav ul {
  display: flex;
  flex-direction: column;
  /* width: 100% explícito: deja claro que el bloque a centrar es TODO el
     ancho del header -.main-nav ya va de left:0 a right:0-, no un
     contenedor angosto pegado a la izquierda. */
  width: 100%;
  /* align-items: center evita el stretch por defecto: cada <li> se encoge
     a su contenido y se centra como CAJA dentro de ese ancho completo. */
  align-items: center;
  gap: 1.25rem;
  padding: 1.5rem 1.25rem;
}

.main-nav a {
  font-family: var(--font-body);
  font-weight: 500;
  color: var(--color-text-secondary);
  /* Respaldo del centrado: si el texto de algún link llega a partirse en
     dos líneas, se mantiene centrado en vez de alinearse a la izquierda */
  text-align: center;
  transition: color 0.2s ease;
}

.main-nav a:hover,
.main-nav a:focus-visible {
  color: var(--color-primary-start);
}

.main-nav a.is-active {
  color: var(--color-on-primary);
}

/* ============================================
   CANVAS DE BRASAS — GLOBAL (cubre TODA la página)
   Vive en el HTML como hijo directo de <body>, hermano de <header> y
   <main> (justo entre ambos). Antes estaba anidado dentro de .hero con
   position: absolute, así que solo cubría esa sección; el usuario pidió que
   las brasas se vieran en toda la página, no solo en el hero.

   position: fixed (en vez de absolute) + top/left: 0 + 100vw/100vh: lo
   ancla al VIEWPORT en vez de a un contenedor con position: relative, así
   que cubre la pantalla completa sin importar cuánto se haga scroll ni en
   qué sección esté el usuario -si viviera dentro de algún contenedor
   posicionado, su stacking quedaría atrapado ahí y no taparía el resto de
   la página, por eso también se sacó de .hero en el HTML-.

   DECISIÓN DE Z-INDEX: se eligió z-index: 50 -por ENCIMA de todas las
   secciones del <main> (fotos, tarjetas, texto, que no declaran z-index
   propio) pero por DEBAJO del header fijo (.site-header, z-index: 100)-.
   Se prefirió esto a intentar intercalar el canvas "detrás del contenido
   pero encima de cada fondo" sección por sección: eso habría exigido
   rediseñar el stacking de .about, .stats, .menu, etc. una por una. Queda
   por debajo del header a propósito: así el menú de navegación se ve 100%
   limpio y legible, sin brasas cruzando encima de los links. Que las
   partículas floten por encima del contenido no estorba la lectura porque
   son pequeñas/dispersas y, sobre todo, por el pointer-events: none de
   abajo: nunca bloquean un clic, así que un botón "debajo" de una brasa
   sigue siendo 100% clicable.

   width/height en vw/vh (no %): al ya no tener un padre con tamaño propio
   (100% de <body> podría no cubrir toda la altura si el contenido es corto),
   vw/vh amarran el tamaño directamente al viewport. */
#brasa-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 50;
}

/* ============================================
   HERO — Pantalla completa (Full-width Hero / Landing)
   Reemplaza por completo el hero anterior de 2 columnas (tarjetas + foto).
   100vh + imagen de fondo a pantalla completa + overlay oscuro + contenido
   centrado vertical/horizontal con Flexbox. Al ser fluido con clamp(), no
   necesita un breakpoint de escritorio propio (ver media query al final:
   ahí solo se ajusta el header, no el hero).
   ============================================ */
.hero {
  position: relative;
  min-height: 100vh; /* 100vh pedido por diseño; min- evita recortar contenido si algún día crece */
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  /* BUGFIX: el título quedaba tapado por el header fijo (.site-header) en
     viewports bajos (celular en horizontal, laptop con la ventana no
     maximizada): al centrar .hero__content en TODO el 100vh, el header
     -que flota encima, position: fixed- llegaba a encimarse con la parte
     superior del <h1>. Solución: padding-top reserva el alto real del
     header (--header-offset: 72px en móvil, 104px desde 1024px, la misma
     variable que ya usan .about/.menu/etc. para su scroll-margin-top) +
     2rem de aire propio del hero, así el centrado ocurre SIEMPRE por
     debajo del header. Si el contenido llegara a necesitar más alto del
     disponible, .hero simplemente crece más allá de 100vh (gracias a
     min-height, ver arriba) en vez de volver a encimarse con nada.
     padding-bottom se queda en 2rem: no hay ningún elemento fijo flotando
     debajo que haga falta compensar. */
  padding: calc(var(--header-offset) + 2rem) 1.5rem 2rem;

  background-color: var(--color-bg); /* negro base: fallback mientras carga la imagen */

  /* Antes esta propiedad traía DOS capas (gradiente plano + foto) para que
     el overlay oscuro saliera "gratis" sin un elemento extra en el DOM. Se
     separó a una sola capa (solo la foto) porque en su momento el canvas de
     brasas (#brasa-canvas) necesitaba quedar entre la foto y el overlay: con
     las dos capas fundidas en un solo background-image eso era imposible.
     El canvas ahora vive fuera de .hero (cubre toda la página, ver más
     abajo), pero el overlay se queda igual en .hero::before: sigue sirviendo
     para que el texto del hero se lea bien sobre la foto, es independiente
     del canvas. */
  background-image: url("images/GENERAL/NO%20BIRRIA%20NO%20LIFE.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Overlay oscuro: pseudo-elemento en vez de un <div> extra en el HTML, para
   no ensuciar el markup solo por una capa de color plano. position: absolute
   + inset a 0 lo estira exactamente sobre .hero (que ya es position:
   relative, así que este es su bloque contenedor). z-index: 2 lo coloca
   DEBAJO del contenido de texto (.hero__content, z-index: 3). Ya no compite
   en stacking con el canvas de brasas -ese ahora vive fuera de .hero, cubre
   toda la página con position: fixed y su propio z-index alto, ver más
   abajo-. La foto de fondo no necesita z-index propio: al ser
   background-image de .hero mismo, el navegador siempre la pinta por debajo
   de cualquier descendiente posicionado, sin importar el valor de z-index de
   estos. */
.hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--overlay-hero);
  z-index: 2;
}

.hero__content {
  /* position: relative + z-index explícito: sin esto, al ser un elemento
     "normal" (sin position), el navegador lo pintaría POR DEBAJO de
     .hero::before aunque este tenga z-index más bajo -así funciona el orden
     de pintado en CSS: los descendientes posicionados con z-index siempre
     van encima de los no posicionados-. */
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  max-width: 64rem; /* que el título tenga aire; el párrafo se acota aparte, más angosto */
}

.hero__title {
  /* Rye: mismo slab serif rústico ya usado antes, ahora a tamaño de
     protagonista absoluto porque el hero ocupa la pantalla completa
     (ya no vive dentro de una columna de 5/12). */
  font-family: var(--font-title);
  font-weight: 400; /* Rye solo existe en 400; forzar 700 daría un bold falso */
  font-style: italic; /* itálico sintetizado por el navegador (Rye no trae cursiva real) */
  color: var(--color-on-primary);
  font-size: clamp(2.75rem, 9vw, 7rem);
  letter-spacing: 0.04em;
  line-height: 1.15;
  /* Sombra sutil: separa el título de zonas claras de la foto de fondo */
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.6);
}

.hero__description {
  font-family: var(--font-body);
  color: var(--color-on-primary); /* antes vivía en una tarjeta naranja; ahora blanco puro directo */
  font-weight: 500;
  font-size: clamp(1rem, 2.2vw, 1.25rem);
  line-height: 1.6;
  max-width: 42rem; /* ancho de lectura cómodo, más angosto que el título */
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}

.btn-cta {
  margin-top: 0.5rem;
  border: none;
  border-radius: 999px; /* forma píldora, consistente con el resto del sitio */
  padding: 1.1rem 2.75rem;
  background: var(--gradient-cta);
  color: var(--color-on-primary);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.05em;
  text-transform: uppercase; /* el HTML lleva "Ver Menú"; esto lo muestra en mayúsculas */
  box-shadow: var(--shadow-cta);
  cursor: pointer;
  transition: box-shadow 0.25s ease, transform 0.2s ease;
}

.btn-cta:hover,
.btn-cta:focus-visible {
  /* "Brillar": glow naranja intenso en vez de solo aclarar el gradiente */
  box-shadow: var(--shadow-cta-hover);
  transform: translateY(-2px);
}

/* ============================================
   BREAKPOINT DESKTOP (1024px+)
   A partir de aquí: header muestra el menú completo (sin hamburguesa).
   El hero NO tiene reglas propias aquí: clamp() + Flexbox ya lo hacen
   fluido en todos los tamaños de pantalla, sin necesitar un layout distinto.
   ============================================ */
@media (min-width: 1024px) {
  .site-header {
    /* El header crece un poco para acompañar al logo agrandado (84px) */
    min-height: 104px;
    padding: 0 4rem;
    gap: 2rem;
  }

  .site-header__logo {
    height: 84px;
  }

  .nav-toggle-label {
    display: none;
  }

  .main-nav {
    position: static;
    max-height: none;
    overflow: visible;
    background-color: transparent;
    border-bottom: none;
  }

  .main-nav ul {
    flex-direction: row;
    /* width: auto revierte el width: 100% del bloque mobile */
    width: auto;
    align-items: center;
    gap: 2.5rem;
    padding: 0;
  }
}

/* ============================================
   PLACEHOLDER DE IMAGEN (reutilizable)
   Marca el hueco de cada foto real pendiente de mandar. Respeta el
   aspect-ratio del hueco donde vive (se define inline por instancia, ej.
   style="aspect-ratio: 4/3;"). Los números son correlativos y NO cuentan
   el logo ni la foto de fondo del hero, que ya existen aparte.
   ============================================ */
.img-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  height: 100%;
  background-color: var(--color-surface);
  border: 1px dashed rgba(255, 255, 255, 0.25);
  border-radius: 0.75rem;
  padding: 1.5rem;
  text-align: center;
}

.img-placeholder__number {
  font-family: var(--font-body);
  font-weight: 700;
  color: var(--color-on-primary);
  font-size: 1rem;
}

.img-placeholder__desc {
  font-family: var(--font-body);
  color: var(--color-text-secondary);
  font-size: 0.875rem;
  max-width: 20rem;
}

/* ============================================
   ENCABEZADOS DE SECCIÓN (reutilizables)
   Mismo lenguaje visual del <h1> del hero (fuente Rye, itálica) pero a
   escala menor, para que las secciones nuevas se sientan parte del mismo
   sitio sin duplicar reglas dentro de .hero.
   ============================================ */
.section-eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-primary-start);
  margin-bottom: 0.5rem;
}

.section-title {
  font-family: var(--font-title);
  font-weight: 400;
  font-style: italic;
  color: var(--color-on-primary);
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 1.2;
  margin-bottom: 1rem;
}

/* ============================================
   SECCIÓN "NOSOTROS" (about, id="nosotros")
   Texto real de marca (historia/misión/visión) en 3 bloques dentro de la
   misma sección: 1) .about__intro centrada, con la frase gancho en
   degradado de marca (mismo recurso que .stats__number: background-clip:
   text); 2) .about__container, foto + "Nuestra Historia" en 2 columnas,
   mobile-first -> 1024px (layout heredado, imagen sin tocar; cierra con
   el texto narrativo largo que antes vivía en Misión/Visión); 3)
   .about__pillars, Misión, Visión (versión corta) y Valores (chips) como
   tarjetas lado a lado, 2 columnas desde 768px -> 3 desde 1024px
   (variante propia de .highlight-card).
   ============================================ */
.about {
  padding: 5rem 1.5rem;
  scroll-margin-top: var(--header-offset);
}

.about__intro {
  max-width: 52rem;
  margin: 0 auto 3.5rem;
  text-align: center;
}

/* Frase gancho (Bloque 1): mismo tratamiento de "relleno" con el gradiente
   de marca que .stats__number, pero en texto corrido en vez de una cifra
   suelta. font-weight 600 + tamaño grande para que se lea como statement,
   no como un párrafo más. */
.about__statement {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: clamp(1.5rem, 3.4vw, 2.25rem);
  line-height: 1.4;
  margin-top: 0.5rem;
  background: var(--gradient-cta);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.about__container {
  display: grid;
  gap: 2.5rem;
  max-width: 72rem;
  margin: 0 auto;
}

/* Foto real dentro de .about__media (reemplaza al .img-placeholder de
   antes). A diferencia de .menu-item__img, aquí NO se fuerza un
   aspect-ratio ni object-fit: cover -PARILLA.jpg es una foto vertical y
   ese recorte 4:3 le comía buena parte del encuadre-: con solo width:100%
   + height:auto, la imagen se ve completa, a su proporción real, sin
   recortarse. */
.about__img {
  width: 100%;
  height: auto;
  border-radius: 0.75rem;
}

/* display: flex + gap en vez de márgenes sueltos entre párrafos: mismo
   patrón que .menu__feature-body, para separar el subtítulo y los 3
   párrafos de "Nuestra Historia" de forma consistente. */
.about__content {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.about__content-title {
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--color-on-primary);
  font-size: 1.4rem;
}

.about__text {
  font-family: var(--font-body);
  color: var(--color-text-primary);
  font-size: 1rem;
  line-height: 1.7;
}

/* Bloque colapsable de "Nuestra Historia" (Leer más / Leer menos): los 2
   primeros párrafos (arriba) quedan siempre visibles como gancho; estos 4
   -mismo texto verbatim, nada se acorta- arrancan ocultos aquí dentro.
   Mismo truco de max-height + overflow hidden + transition que ya usa
   .main-nav para el menú móvil, pero la clase "is-expanded" la pone/quita
   un <button> real vía classList.toggle() en script.js, no un checkbox.
   display: flex + mismo gap que .about__content para que los párrafos
   internos guarden el mismo ritmo visual al abrirse. */
.about__text-extra {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}

.about__text-extra.is-expanded {
  /* 60rem: igual de espíritu que los 320px de .main-nav, un valor
     cómodamente mayor al contenido real (no hace falta medirlo en px
     exactos para que la transición funcione) */
  max-height: 60rem;
}

/* Botón "Leer más" / "Leer menos": acento naranja de marca como texto/
   enlace pequeño, no un .btn-cta -no debe competir con el CTA real del
   hero-. align-self: flex-start evita que, al ser hijo de un flex column,
   se estire a lo ancho del contenedor (comportamiento por defecto de los
   <button> dentro de un flex item). */
.about__toggle {
  align-self: flex-start;
  border: none;
  background: none;
  padding: 0;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--color-primary-start);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: color 0.2s ease;
}

.about__toggle:hover,
.about__toggle:focus-visible {
  color: var(--color-primary-end);
}

/* Misión, Visión y Valores: variante propia de .highlight-card -mismo
   --color-surface y radio de 0.75rem- pero alineada a la izquierda y sin
   ícono, porque cada tarjeta lleva texto corrido (o una lista de chips,
   en el caso de Valores) en vez de una frase corta centrada. La franja
   superior con el gradiente de marca sustituye al ícono naranja como
   acento de marca. */
.about__pillars {
  display: grid;
  gap: 1.75rem;
  max-width: 72rem;
  margin: 4rem auto 0;
}

.pillar-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 2.25rem 1.75rem;
  background-color: var(--color-surface);
  border-radius: 0.75rem;
}

.pillar-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--gradient-cta);
}

.pillar-card__title {
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--color-on-primary);
  font-size: 1.3rem;
}

.pillar-card__text {
  font-family: var(--font-body);
  color: var(--color-text-primary);
  font-size: 0.95rem;
  line-height: 1.7;
}

/* Lista de Valores (tarjeta "Nuestros Valores"): a diferencia de
   .pillar-card__text, aquí el contenido no es un párrafo largo sino 8
   palabras/frases sueltas, así que se presentan como chips (mismo
   lenguaje visual que .menu__weight-list) en vez de forzarlas dentro de
   un <p>. El fondo propio y sutil (blanco muy transparente) evita que se
   confundan con el fondo de la tarjeta, que ya usa --color-surface. */
.pillar-card__values {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.pillar-card__value {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--color-on-primary);
  background-color: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  padding: 0.5rem 1.1rem;
}

@media (min-width: 768px) {
  .about__pillars {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1024px) {
  .about__container {
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 4rem;
  }

  /* De 2 a 3 columnas: ya cabe Misión + Visión + Valores en una sola fila */
  .about__pillars {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ============================================
   SECCIÓN DE DESTACADOS (5 pilares)
   Grid de 1 columna en móvil -> 3 columnas desde 768px (3+2, la 4ª y 5ª
   tarjeta caen en una segunda fila) -> 5 columnas desde 1200px. Los
   íconos son SVG inline con stroke="currentColor" para heredar el
   naranja de marca.
   ============================================ */
.highlights {
  padding: 4rem 1.5rem 5rem;
  scroll-margin-top: var(--header-offset);
}

.highlights__intro {
  max-width: 40rem;
  margin: 0 auto 2.5rem;
  text-align: center;
}

/* Frase textual del negocio ("La Barbacha no busca parecerse..."): texto
   introductorio simple antes de las 5 tarjetas. A diferencia de
   .about__statement no lleva degradado: aquí no es una frase-gancho, es
   una frase de transición hacia la lista de pilares. */
.highlights__statement {
  font-family: var(--font-body);
  color: var(--color-text-primary);
  font-size: 1rem;
  line-height: 1.6;
  margin-top: 0.5rem;
}

.highlights__grid {
  display: grid;
  gap: 2rem;
  max-width: 72rem;
  margin: 0 auto;
}

.highlight-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  text-align: center;
  padding: 2rem 1.5rem;
  background-color: var(--color-surface);
  border-radius: 0.75rem;
}

.highlight-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  color: var(--color-primary-start);
}

.highlight-card__icon svg {
  width: 100%;
  height: 100%;
}

.highlight-card__title {
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--color-on-primary);
  font-size: 1.1rem;
}

.highlight-card__text {
  font-family: var(--font-body);
  color: var(--color-text-primary);
  font-size: 0.9rem;
  line-height: 1.6;
}

@media (min-width: 768px) {
  .highlights__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1200px) {
  .highlights__grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

/* ============================================
   SECCIÓN "RESERVA TU MESA → WHATSAPP" (id="reservas")
   Mismo look que ya tenía la vieja "Reservar" (fondo degradado gris-a-
   negro, contenedor ancho y centrado, eyebrow + párrafo, grid a 2
   columnas desde 640px, inputs con borde completo redondeado): la única
   diferencia real está en el formulario (4 campos en vez de 6, ver HTML)
   y en la función de envío (WhatsApp en vez de alert(), ver script.js).
   ============================================ */
.reservas {
  padding: 5rem 1.5rem;
  background: linear-gradient(160deg, #1a1a1a 0%, #000000 65%);
  border-top: 1px solid var(--color-surface);
  border-bottom: 1px solid var(--color-surface);
  scroll-margin-top: var(--header-offset);
}

.reservas__container {
  max-width: 56rem;
  margin: 0 auto;
  text-align: center;
}

.reservas__text {
  font-family: var(--font-body);
  color: var(--color-text-primary);
  font-size: 1rem;
  line-height: 1.6;
  max-width: 36rem;
  margin: 0 auto;
}

.reservas__form {
  display: grid;
  gap: 1.25rem;
  margin-top: 2.5rem;
  text-align: left;
}

.reservas__field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.reservas__field label {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.875rem;
  color: var(--color-on-primary);
}

.reservas__field input {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-on-primary);
  background-color: var(--color-surface);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 0.5rem;
  padding: 0.85rem 1rem;
  /* color-scheme: dark corrige el ícono nativo (oscuro por defecto y casi
     invisible sobre fondo oscuro) de los inputs date/time */
  color-scheme: dark;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.reservas__field input::placeholder {
  color: var(--color-text-primary);
  opacity: 0.5;
}

.reservas__field input:focus-visible {
  outline: none;
  border-color: var(--color-primary-start);
  box-shadow: 0 0 0 3px rgba(255, 140, 0, 0.25);
}

.reservas__form .btn-cta {
  margin-top: 0.5rem;
  justify-self: center;
  width: 100%;
  max-width: 20rem;
}

@media (min-width: 640px) {
  .reservas__form {
    grid-template-columns: 1fr 1fr;
  }

  .reservas__form .btn-cta {
    grid-column: 1 / -1;
  }
}

/* ============================================
   OFFSET DE SCROLL PARA SECCIONES ANCLA (1024px+)
   El header fijo pasa de 72px a 104px de alto en este breakpoint (ver
   .site-header más arriba). No se toca ninguna regla del header: solo se
   actualiza aquí la variable que ya usan .about/.highlights/.reservas.
   ============================================ */
@media (min-width: 1024px) {
  :root {
    --header-offset: 104px;
  }
}

/* ============================================
   SECCIÓN "VIVE LA EXPERIENCIA" (id="experiencia")
   No está en el <nav>: es contenido de apoyo entre Destacados y Menú.
   Mobile-first: pasos y cuadrícula de fotos apilados en una columna; desde
   1024px pasan a 2 columnas lado a lado con CSS Grid (mismo patrón que
   .about__container, con clases propias para no acoplar ambas secciones).
   ============================================ */
.experience {
  padding: 5rem 1.5rem;
  scroll-margin-top: var(--header-offset);
}

.experience__container {
  display: grid;
  gap: 3rem;
  max-width: 72rem;
  margin: 0 auto;
}

.experience__steps {
  /* list-style: none es obligatorio aquí: el reset global de arriba solo
     le quita los bullets a <ul>, no a <ol> (usamos <ol> porque los pasos
     sí tienen un orden real que conviene declarar semánticamente) */
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  margin-top: 2rem;
}

.experience__step {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
}

.experience__step-badge {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--gradient-cta);
  color: var(--color-on-primary);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.1rem;
}

.experience__step-body {
  /* flex: 1 + min-width: 0 evitan el desbordamiento típico de un texto
     largo sin cortes dentro de un hijo flex junto a un elemento de ancho
     fijo (la insignia numerada) */
  flex: 1;
  min-width: 0;
}

.experience__step-label {
  display: block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primary-start);
  margin-bottom: 0.25rem;
}

.experience__step-title {
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--color-on-primary);
  font-size: 1.05rem;
  margin-bottom: 0.4rem;
}

.experience__step-text {
  font-family: var(--font-body);
  color: var(--color-text-primary);
  font-size: 0.9rem;
  line-height: 1.6;
}

.experience__media {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
}

/* Fotos reales dentro de la cuadrícula 2x2 (reemplazan los .img-placeholder
   de antes). Mismo patrón que .menu-item__img: aspect-ratio cuadrado +
   object-fit: cover. */
.experience__img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 0.75rem;
}

@media (min-width: 1024px) {
  .experience__container {
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 4rem;
  }
}

/* ============================================
   SECCIÓN "CIFRAS" (id="cifras")
   Tampoco está en el <nav>. Fondo: la misma foto del hero, oscurecida con
   un overlay más fuerte para que los números resalten (no se toca .hero:
   el archivo de imagen se reutiliza en una regla nueva e independiente).
   Los números son placeholders (00): data-number queda listo como gancho
   para que el agente web-logica-datos anime el conteo en otra tarea; por
   ahora se muestran estáticos, sin ningún JavaScript de por medio.
   ============================================ */
.stats {
  padding: 4.5rem 1.5rem;
  scroll-margin-top: var(--header-offset);

  background-color: var(--color-bg);
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)),
    url("images/GENERAL/NO%20BIRRIA%20NO%20LIFE.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.stats__container {
  display: grid;
  gap: 2.5rem;
  max-width: 60rem;
  margin: 0 auto;
  text-align: center;
}

.stats__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.stats__number {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(2.5rem, 6vw, 3.5rem);
  line-height: 1;
  /* "Relleno" con el gradiente de marca en vez de un color plano: mismo
     recurso que .btn-cta pero aplicado al texto (background-clip: text).
     El prefijo -webkit- sigue siendo necesario en Safari para este efecto. */
  background: var(--gradient-cta);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.stats__label {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

@media (min-width: 768px) {
  .stats__container {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ============================================
   SECCIÓN "NUESTRO MENÚ" (id="menu")
   Sí está en el <nav>. Un único bloque con pestañas (tabs) controladas por
   script.js: togglea la clase .is-active en botón y panel, sin plugin de
   terceros (equivalente casero al data-bs-toggle="tab" de Bootstrap).
   Mobile-first: grid de 1 columna dentro de cada panel -> 3 columnas desde
   768px.
   ============================================ */
.menu {
  padding: 5rem 1.5rem;
  scroll-margin-top: var(--header-offset);
}

.menu__intro {
  max-width: 40rem;
  margin: 0 auto 2.5rem;
  text-align: center;
}

.menu__container {
  max-width: 72rem;
  margin: 0 auto;
}

.menu__tabs {
  display: flex;
  /* Con 8 pestañas ya no caben en una sola línea en móvil: en vez de dejar
     que se encimen o rompan el layout con flex-wrap, se activa scroll
     horizontal. -webkit-overflow-scrolling da inercia al swipe en iOS.
     Desde 768px sí sobra espacio, así que se revierte a wrap + center (ver
     media query más abajo). */
  flex-wrap: nowrap;
  justify-content: flex-start;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  gap: 0.75rem;
  margin-bottom: 2.5rem;
  padding-bottom: 0.5rem;
}

.menu__tab {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.03em;
  color: var(--color-text-primary);
  background-color: var(--color-surface);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 999px;
  padding: 0.75rem 1.5rem;
  cursor: pointer;
  /* flex-shrink: 0: cada botón conserva su ancho natural dentro del scroll
     horizontal en móvil, en vez de comprimirse para caber */
  flex-shrink: 0;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.menu__tab:hover,
.menu__tab:focus-visible {
  border-color: var(--color-primary-start);
  color: var(--color-on-primary);
}

.menu__tab.is-active {
  background: var(--gradient-cta);
  border-color: transparent;
  color: var(--color-on-primary);
}

/* Oculto por defecto: script.js agrega/quita .is-active para mostrar solo
   el panel de la pestaña elegida */
.menu__panel {
  display: none;
}

.menu__panel.is-active {
  display: block;
}

.menu__grid {
  display: grid;
  gap: 1.75rem;
}

.menu-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  text-align: center;
}

.menu-item__name {
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--color-on-primary);
  font-size: 1rem;
}

/* Foto real dentro de cada .menu-item (reemplaza al .img-placeholder de
   antes). aspect-ratio cuadrado + overflow hidden + object-fit: cover para
   que fotos de proporciones distintas se recorten limpio sin deformarse. */
.menu-item__media {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 0.75rem;
}

.menu-item__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ============================================
   BLOQUE DESTACADO (pestaña "Presentaciones")
   Un solo platillo (Birria de Res) con sus presentaciones por peso: foto +
   texto en un bloque único, no en grid, porque es un solo producto y no una
   lista de platillos distintos. Mobile-first: apilado en columna; desde
   768px pasa a foto + texto lado a lado (mismo patrón que
   .about__container, con clases propias para no acoplar ambas secciones).
   ============================================ */
.menu__feature {
  display: grid;
  gap: 1.75rem;
}

.menu__feature-media {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 0.75rem;
}

.menu__feature-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.menu__feature-body {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.menu__feature-name {
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--color-on-primary);
  font-size: 1.3rem;
}

.menu__weight-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.menu__weight-list li {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--color-on-primary);
  background-color: var(--color-surface);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 999px;
  padding: 0.5rem 1.1rem;
}

.menu__note {
  font-family: var(--font-body);
  color: var(--color-text-secondary);
  font-size: 0.85rem;
  font-style: italic;
}

/* Imagen de cabecera de pestaña (usada en "Extras"): franja ancha, distinta
   de .menu-item__media (cuadrada, para grid de platillos) porque aquí es
   una sola foto de ambientación, no un platillo puntual. */
.menu__header-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 0.75rem;
  margin-bottom: 1.75rem;
}

.menu__header-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Lista de texto simple para platillos sin foto propia: usada para el
   listado completo de "Extras" (línea suelta, sin viñetas: el reset global
   ya le quita los bullets a <ul>) */
.menu__text-list {
  color: var(--color-text-primary);
  font-size: 0.95rem;
  line-height: 2;
}

/* "También disponible: ...": cierre de texto simple al final de una
   pestaña con grid, para los platillos que todavía no tienen foto propia */
.menu__also {
  margin-top: 2.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--color-text-primary);
  font-size: 0.95rem;
  line-height: 1.7;
}

.menu__also-label {
  font-weight: 600;
  color: var(--color-on-primary);
}

@media (min-width: 768px) {
  /* Desde acá ya sobra ancho para las 8 pestañas: se revierte el scroll
     horizontal mobile-first de más arriba y vuelven a envolver centradas */
  .menu__tabs {
    flex-wrap: wrap;
    overflow-x: visible;
    justify-content: center;
    padding-bottom: 0;
  }

  .menu__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .menu__feature {
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 2.5rem;
  }
}

/* ============================================
   SECCIÓN "GALERÍA" (id="galeria")
   Sí está en el <nav>. Carrusel horizontal "drag-to-scroll": se arrastra
   con el mouse (o el dedo en touch), NO con scroll-snap ni flechas -esos
   dos enfoques ya se probaron antes y fallaron por el tamaño de las
   fotos-. Esta vez el tamaño de cada foto es un valor FIJO en px
   (.galeria-item), no vw/%/clamp, precisamente para no repetir ese
   problema. */
.gallery {
  padding: 5rem 1.5rem;
  scroll-margin-top: var(--header-offset);
}

.gallery__intro {
  max-width: 40rem;
  margin: 0 auto 2.5rem;
  text-align: center;
}

/* Solo centra el carrusel y limita su ancho máximo dentro de la sección;
   el que de verdad se desplaza es .galeria-track de adentro. */
.galeria-wrapper {
  max-width: 72rem;
  margin: 0 auto;
}

/* overflow-x: hidden es intencional: no queremos la barra de scroll nativa
   del navegador ni que el usuario arrastre el scrollbar directamente -el
   desplazamiento lo controla por completo script.js, escribiendo a mano en
   scrollLeft-. cursor: grab avisa visualmente que esto se arrastra. */
.galeria-track {
  display: flex;
  gap: 20px;
  overflow-x: hidden;
  cursor: grab;
  /* Evita que, al arrastrar, el navegador seleccione texto/imágenes de
     alrededor como si fuera un drag de selección normal. */
  user-select: none;
}

/* Clase que agrega script.js mientras el botón del mouse sigue presionado
   y en movimiento, para dar feedback visual de "agarrando" la foto. */
.galeria-track.is-dragging {
  cursor: grabbing;
}

/* Tamaño FIJO pedido explícitamente (no vw/%/clamp): 300x400 mantiene a
   las 9 fotos en un orden de magnitud razonable sin que ninguna intente
   llenar la pantalla. flex-shrink: 0 evita que flexbox las achique para
   que "quepan" todas -romperíamos el tamaño fijo si lo dejáramos en 1-. */
.galeria-item {
  width: 300px;
  height: 400px;
  flex-shrink: 0;
  object-fit: cover;
  border-radius: 15px;
  display: block;
  /* Apaga el "fantasma" de imagen que Chrome/Safari arrastran por defecto
     al hacer mousedown+mousemove sobre un <img>: sin esto compite con
     nuestro drag manual en script.js. */
  -webkit-user-drag: none;
  user-drag: none;
}

/* ============================================
   SECCIÓN "UBICACIÓN" (id="ubicacion")
   Sí está en el <nav> y cierra el <main>. Mobile-first: info y bloque de
   mapa apilados en columna; desde 1024px pasan a 2 columnas lado a lado
   (mismo patrón que .about__container, con clases propias).
   ============================================ */
.location {
  padding: 5rem 1.5rem;
  scroll-margin-top: var(--header-offset);
  background: linear-gradient(160deg, #1a1a1a 0%, #000000 65%);
  border-top: 1px solid var(--color-surface);
}

.location__container {
  display: grid;
  gap: 3rem;
  max-width: 72rem;
  margin: 0 auto;
}

.location__detail {
  margin-top: 1.75rem;
}

.location__detail-title {
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--color-primary-start);
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 0.4rem;
}

.location__detail-text {
  font-family: var(--font-body);
  color: var(--color-text-primary);
  font-size: 1rem;
  line-height: 1.6;
}

.location__social {
  display: flex;
  gap: 1rem;
  margin-top: 2rem;
}

.location__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background-color: var(--color-surface);
  color: var(--color-text-secondary);
  border: 1px solid rgba(255, 255, 255, 0.15);
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.location__social-link svg {
  width: 1.25rem;
  height: 1.25rem;
}

.location__social-link:hover,
.location__social-link:focus-visible {
  background: var(--gradient-cta);
  border-color: transparent;
  color: var(--color-on-primary);
}

/* Mapa real, técnica "capa invisible / overlay link": el iframe de abajo
   se ve pero no se puede interactuar (pointer-events: none), y encima va
   un <a> absoluto que cubre toda la caja (z-index: 10) para que el clic
   -en cualquier punto del mapa- abra Google Maps en pestaña nueva. Altura
   fija en vez del aspect-ratio 4/3 del placeholder anterior, para que
   combine con la altura visual del bloque de texto (dirección + horario +
   redes) de la columna vecina en el layout de 2 columnas desde 1024px. */
.mapa-clickable {
  position: relative;
  width: 100%;
  height: 320px;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 0 15px rgba(255, 140, 0, 0.2);
}

/* Capa superior invisible: cubre TODO el mapa y es lo único clicable
   (z-index por encima del iframe). Sin esto, el iframe capturaría el
   clic e intentaría interactuar con Google Maps en vez de navegar. */
.mapa-enlace {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  cursor: pointer;
}

/* pointer-events: none desactiva zoom/arrastre del mapa embebido: todos
   los clics "atraviesan" el iframe y los recoge .mapa-enlace de arriba. */
.mapa-clickable iframe {
  width: 100%;
  height: 100%;
  border: 0;
  pointer-events: none;
}

@media (min-width: 480px) {
  .mapa-clickable {
    height: 400px;
  }
}

@media (min-width: 1024px) {
  .location__container {
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 4rem;
  }
}

/* ============================================
   SECCIÓN "RESEÑAS DE CLIENTES" (id="resenas")
   NO está en el <nav> (mismo criterio que .highlights/.experience/.stats:
   franja de apoyo, no destino propio de navegación). Fondo negro puro
   (var(--color-bg), ya es #000000) para separarla visualmente del
   degradado gris-a-negro de .location justo arriba. 5 reseñas reales
   copiadas del perfil de Google Maps del negocio (ver el comentario largo
   en el HTML, junto a esta sección). Carrusel "drag-to-scroll" en vez del
   grid original de 3 columnas -mismo patrón que .galeria-track, ver esa
   sección más arriba y su comentario en .reviews-track más abajo-.
   ============================================ */
.reviews {
  padding: 5rem 1.5rem;
  scroll-margin-top: var(--header-offset);
  background-color: var(--color-bg);
}

.reviews__intro {
  max-width: 40rem;
  margin: 0 auto 2.5rem;
  text-align: center;
}

/* Mismo patrón "drag-to-scroll" que .galeria-wrapper/.galeria-track (ver
   sección Galería más arriba): .reviews-wrapper solo centra y limita el
   ancho máximo, .reviews-track es el flex que de verdad se arrastra -su
   overflow-x: hidden apaga la barra nativa a propósito, el desplazamiento
   real lo hace enableDragScroll() en script.js escribiendo en scrollLeft-. */
.reviews-wrapper {
  max-width: 72rem;
  margin: 0 auto;
}

.reviews-track {
  display: flex;
  gap: 20px;
  overflow-x: hidden;
  cursor: grab;
  user-select: none;
}

.reviews-track.is-dragging {
  cursor: grabbing;
}

/* padding-bottom más alto que el resto de la tarjeta: deja aire propio
   para el sello "Vía Google", que se posiciona absoluto en la esquina
   inferior derecha y no debe encimarse con el texto de la reseña. Ancho
   fijo + flex-shrink: 0 (mismo criterio que .galeria-item): dentro de un
   track en fila, sin esto flexbox encogería las tarjetas para que "quepan"
   todas. */
.review-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  width: 320px;
  flex-shrink: 0;
  background-color: #111111;
  border-radius: 15px;
  padding: 25px;
  padding-bottom: 2.75rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Sombra de "fuego" sutil (mismo tono naranja que --shadow-cta-hover, pero
   mucho más tenue) en vez de una sombra neutra: refuerza la identidad
   visual del sitio incluso en una tarjeta que, por lo demás, imita un
   patrón genérico de reseñas. */
.review-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(255, 140, 0, 0.2);
}

.review-card__header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* Sin foto de perfil real que mostrar (las reseñas se copiaron como texto,
   no las fotos de cuenta de cada cliente): en vez del círculo gris vacío
   de antes, muestra la inicial del nombre sobre el degradado de marca
   -mismo recurso que usa Google/Gmail cuando un contacto no tiene avatar-. */
.review-card__avatar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--gradient-cta);
  color: var(--color-on-primary);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.1rem;
}

.review-card__identity {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.review-card__name {
  font-family: var(--font-body);
  font-weight: 700;
  color: var(--color-on-primary);
  font-size: 1rem;
}

.review-card__time {
  font-family: var(--font-body);
  color: var(--color-text-primary);
  opacity: 0.6;
  font-size: 0.8rem;
}

.review-card__stars {
  color: var(--color-star);
  font-size: 1.1rem;
  letter-spacing: 0.15em;
}

/* Cursiva: tratamiento tipográfico normal de una cita textual (la reseña
   del cliente), no una marca de contenido pendiente. */
.review-card__text {
  flex: 1;
  font-family: var(--font-body);
  font-style: italic;
  color: #cccccc;
  font-size: 0.9rem;
  line-height: 1.6;
}

/* Sello "pequeño y discreto" pedido: opacity reducida + mayúsculas +
   tamaño pequeño para que se lea como metadato, no como parte del
   comentario del cliente. position: absolute lo ancla a la esquina
   inferior derecha de la tarjeta (.review-card ya es position: relative). */
.review-card__badge {
  position: absolute;
  right: 20px;
  bottom: 14px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-primary);
  opacity: 0.5;
}