/* ==========================================================================
   SITIO — Don Camarón. Landing pública.
   Estilo: "Exaggerated Minimalism" (styles.csv) llevado a lujo — negro,
   oro, tipografía enorme y mucho espacio negativo. Sin fotografía:
   el peso visual lo cargan el tipo y las líneas doradas.
   ========================================================================== */

/* ===================== APARICIÓN AL HACER SCROLL ===================== */
/* Empiezan invisibles solo si JS va a poder mostrarlas. La clase .js la
   pone sitio.js al arrancar; sin JS el contenido se ve completo. */
.js .revelar {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--dur-lenta) var(--ease-suave),
              transform var(--dur-lenta) var(--ease-suave);
}
.js .revelar.visible { opacity: 1; transform: none; }

/* ===================== NAVEGACIÓN ===================== */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  transition: background var(--dur-media) var(--ease-suave),
              border-color var(--dur-media) var(--ease-suave),
              backdrop-filter var(--dur-media) var(--ease-suave);
  border-bottom: 1px solid transparent;
}
.nav--pegada {
  background: rgba(1, 26, 56, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--color-border);
}

.nav__interior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  min-height: 5rem;
}

.nav__marca {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.nav__marca-linea   { color: var(--color-foreground); opacity: 0.65; }
.nav__marca-fuerte  { color: var(--gold); margin-left: 0.28em; }

.nav__enlaces {
  display: flex;
  gap: clamp(1.25rem, 2.6vw, 2.5rem);
  font-size: var(--text-sm);
  letter-spacing: 0.05em;
}
.nav__enlaces a {
  position: relative;
  color: var(--color-muted-foreground);
  padding-block: var(--space-2);
  transition: color var(--dur-rapida) var(--ease-suave);
}
.nav__enlaces a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--dur-media) var(--ease-suave);
}
.nav__enlaces a:hover { color: var(--color-foreground); }
.nav__enlaces a:hover::after { transform: scaleX(1); transform-origin: left; }

.nav__acciones { display: flex; align-items: center; gap: var(--space-3); }
.nav__acciones .boton { min-height: 42px; padding-inline: var(--space-6); font-size: var(--text-xs); }

.nav__hamburguesa {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 48px; height: 48px;
  align-items: center;
  justify-content: center;
}
.nav__barra {
  display: block;
  width: 22px; height: 1.5px;
  background: var(--color-foreground);
  transition: transform var(--dur-media) var(--ease-suave),
              opacity var(--dur-rapida) var(--ease-suave);
}
.nav__hamburguesa[aria-expanded="true"] .nav__barra:nth-child(2) { transform: translateY(6.5px) rotate(45deg); }
.nav__hamburguesa[aria-expanded="true"] .nav__barra:nth-child(3) { opacity: 0; }
.nav__hamburguesa[aria-expanded="true"] .nav__barra:nth-child(4) { transform: translateY(-6.5px) rotate(-45deg); }

.menu-movil {
  background: var(--color-background);
  border-top: 1px solid var(--color-border);
}
.menu-movil nav { display: flex; flex-direction: column; padding: var(--space-4) clamp(1.25rem, 5vw, 3rem) var(--space-8); }
.menu-movil a {
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-lg);
  color: var(--color-muted-foreground);
}
.menu-movil a:hover { color: var(--gold); }
.menu-movil__cta {
  margin-top: var(--space-6);
  border: 1px solid var(--gold) !important;
  border-radius: var(--radius);
  text-align: center;
  color: var(--gold) !important;
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  font-size: var(--text-sm) !important;
}

/* ===================== HERO ===================== */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-block: 8rem 5rem;
  overflow: hidden;
}

.hero__fondo { position: absolute; inset: 0; pointer-events: none; }

.hero__olas {
  position: absolute;
  left: 50%; bottom: -4%;
  width: 160%; height: 78%;
  transform: translateX(-50%);
  opacity: 0.5;
  animation: derivar 26s ease-in-out infinite alternate;
}
@keyframes derivar {
  from { transform: translateX(-50%) translateY(0)     scaleY(1); }
  to   { transform: translateX(-52%) translateY(-14px) scaleY(1.06); }
}

/* Halo dorado detrás del título: da profundidad sin usar una sola foto */
.hero__brillo {
  position: absolute;
  top: 28%; left: 50%;
  width: min(1000px, 118vw);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(211, 168, 87, 0.18) 0%, rgba(211, 168, 87, 0) 62%);
}

.hero__interior { position: relative; z-index: 1; }

.hero__eyebrow {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--space-8);
}

.hero__titulo {
  font-size: var(--text-hero);
  line-height: 0.86;
  letter-spacing: -0.035em;
  margin-bottom: var(--space-8);
}
.hero__linea { display: block; }
.hero__linea--oro {
  color: var(--gold);
  padding-left: clamp(1.5rem, 9vw, 9rem);
  font-style: italic;
}

.hero__bajada {
  font-size: clamp(1.0625rem, 0.9rem + 0.7vw, 1.375rem);
  font-weight: 300;
  color: var(--color-muted-foreground);
  max-width: 46ch;
  margin-bottom: var(--space-12);
}

.hero__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-bottom: var(--space-20);
}

.hero__datos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
  gap: var(--space-8);
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-border);
  max-width: 900px;
}
.hero__datos dt {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--space-2);
}
.hero__datos dd { font-size: var(--text-sm); color: var(--color-foreground); }
.hero__datos a { border-bottom: 1px solid var(--gold-dim); transition: border-color var(--dur-rapida); }
.hero__datos a:hover { border-bottom-color: var(--gold); }

.hero__scroll {
  position: absolute;
  bottom: var(--space-8);
  left: 50%;
  transform: translateX(-50%);
}
.hero__scroll-linea {
  display: block;
  width: 1px; height: 56px;
  background: linear-gradient(to bottom, transparent, var(--gold));
  animation: bajar 2.4s var(--ease-suave) infinite;
}
@keyframes bajar {
  0%, 100% { opacity: 0.25; transform: scaleY(0.55); transform-origin: top; }
  50%      { opacity: 1;    transform: scaleY(1);    transform-origin: top; }
}

/* 18-oct-2026: los estilos de la franja, la casa, el menú destacado, la mesa,
   reservar, visítanos y el pie se mudaron a css/lujo.css (rediseño new rich).
   La versión anterior está en ../respaldos/2026-10-18-antes-de-rediseno-completo/. */

@media (max-width: 860px) {
  .nav__enlaces,
  .nav__acciones { display: none; }
  .nav__hamburguesa { display: flex; }
  .nav { background: rgba(1, 26, 56, 0.96); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }

  .hero { min-height: auto; padding-block: 7.5rem 4rem; }
  .hero__scroll { display: none; }
  .hero__acciones { margin-bottom: var(--space-12); }
  .hero__acciones .boton { flex: 1 1 auto; }
  .hero__linea--oro { padding-left: clamp(1rem, 6vw, 3rem); }
}

/* ===================== IMPRESIÓN ===================== */
@media print {
  .nav, .menu-movil, .hero__fondo, .hero__scroll, .pie__enlaces { display: none; }
  body { background: #fff; color: #000; }
}

/* ==========================================================================
   ÁREAS TÁCTILES EN MÓVIL
   La revisión en 375px encontró enlaces de 19-25px de alto: el pie, los
   teléfonos y la marca de la nav. Con el pulgar eso se falla seguido, y la
   regla de la base es 44px mínimo. Se agranda el área sin mover el diseño:
   el texto se ve igual, lo que crece es la zona que responde al dedo.
   Los enlaces que van DENTRO de un párrafo (el crédito de Nova Web) quedan
   fuera a propósito — WCAG los exime, y agrandarlos rompería el renglón.
   ========================================================================== */
@media (max-width: 860px) {
  .pie__enlaces a,
  .hero__datos a,
  .visitanos__datos a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* El pie ya tenía separación entre renglones; con el área más alta se
     compensa para que no quede el doble de aire. */
  .pie__enlaces { gap: 0; }

  .nav__marca {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* ==========================================================================
   CAPA DE MARCA — 28 de agosto de 2026

   Todo lo de aquí abajo es lo que cambió al pasar de "negro y oro elegante"
   a la estética del logo: camarón coronado, azul marino, rojo y oro.
   Se dejó en un bloque aparte a propósito, para que se vea de un vistazo
   qué es de la marca nueva y qué es estructura que ya estaba probada
   (responsive, áreas táctiles, aparición al hacer scroll).
   ========================================================================== */

/* --- La barra: el camarón del logo junto al nombre ----------------------- */
.nav__marca { display: inline-flex; align-items: center; gap: var(--space-3); }
.nav__logo {
  width: 44px; height: 44px;
  border-radius: 10px;
  flex-shrink: 0;
  /* El logo ya trae su propio borde blanco; una sombra corta lo despega del
     azul de la barra sin ensuciarlo. */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}
.nav__marca-linea  { opacity: 0.75; }
.nav__marca-fuerte { color: var(--oro); }

/* La barra va azul SIEMPRE. Antes era transparente sobre un hero negro; con
   el hero azul, dejarla transparente dejaba el texto azul sobre azul —
   invisible los primeros 80px de la página. */
/* El fondo se declara aquí, al final del archivo, y no en cada media query.
   Antes el color de la barra salía de tres reglas distintas —una general y
   dos dentro de media queries— y cuál ganaba dependía del ancho. Con una
   sola declaración al final el resultado es el mismo en cualquier pantalla,
   que es lo que hay que poder asegurar antes de enseñárselo a un cliente. */
.nav {
  background: var(--azul);
  border-bottom: 1px solid transparent;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.nav--pegada {
  background: rgba(1, 26, 56, 0.96);
  border-bottom-color: var(--gold-dim);
  box-shadow: 0 6px 24px -12px rgba(0, 0, 0, 0.7);
}
.menu-movil { background: var(--azul); border-top: 1px solid var(--gold-dim); }

/* --- El hero: ahora el protagonista es el logo, no la tipografía --------- */
.hero { text-align: center; }
.hero__interior { display: grid; justify-items: center; }

.hero__titulo { margin-bottom: var(--space-6); max-width: 100%; }
.hero__logo {
  display: block;
  width: min(460px, 78vw);
  height: auto;
  /* Sombra proyectada siguiendo el contorno del dibujo, no una caja. */
  filter: drop-shadow(0 24px 34px rgba(0, 0, 0, 0.55));
  animation: flotar 7s ease-in-out infinite alternate;
}
@keyframes flotar {
  from { transform: translateY(0); }
  to   { transform: translateY(-12px); }
}

.hero__eyebrow { color: var(--oro); }
.hero__bajada  { margin-inline: auto; font-weight: 400; }
.hero__acciones { justify-content: center; }
.hero__datos   { width: 100%; text-align: left; }

/* El atardecer del logo, detrás del camarón. Reemplaza al halo dorado. */
/* 17-oct-2026: el resplandor era naranja porque salia del atardecer del logo
   anterior. El logo R2 es oro sobre negro; el naranja lo volvia cafe. Ahora es oro. */
.hero__brillo {
  background:
    radial-gradient(circle at 50% 45%, rgba(211, 168, 87, 0.20) 0%, rgba(211, 168, 87, 0) 58%),
    radial-gradient(circle at 50% 62%, rgba(211, 168, 87, 0.22) 0%, rgba(211, 168, 87, 0) 66%);
}

/* --- Títulos: Bebas Neue es mayúsculas y condensada ---------------------- */
/* La base dice "Bebas Neue for large headlines only". Se le da aire entre
   letras porque en tamaños grandes se apelmaza, y se le quita el interletrado
   negativo que traía la fuente anterior. */
.hero__eyebrow, .titulo-seccion, .reservar__titulo, .franja__punto h2 {
  letter-spacing: 0.01em;
}
.titulo-seccion, .reservar__titulo { line-height: var(--leading-tight); }

/* --- Nadie se marea: se respeta quien pidió menos movimiento ------------- */
@media (prefers-reduced-motion: reduce) {
  .hero__logo { animation: none; }
}

/* ==========================================================================
   CAPA PREMIUM — 29 de agosto de 2026

   QUÉ SE PIDIÓ: "más premium y elegante, pero con la misma marca".

   EL PROBLEMA, DICHO CLARO
   El logo de Don Camarón es escandaloso a propósito: camarón con corona y
   puro, en un Lamborghini verde. No se puede hacer elegante ESE logo sin
   traicionar la marca.

   LA SALIDA: callar todo lo demás. El logo pasa a ser lo ÚNICO fuerte de la
   página. La tipografía se adelgaza (Cormorant), el espacio entre secciones
   casi se duplica, el oro deja de ser relleno y se vuelve línea de un pixel,
   y el rojo se guarda para UN solo botón en toda la página. Un logo ruidoso
   rodeado de silencio caro se lee como premium; el mismo logo rodeado de
   bloques de color se lee como taquería.

   DESVIACIÓN DOCUMENTADA de ui-ux-pro-max: la base recomienda para
   "Restaurant/Food Service" el estilo "Vibrant & Block-based" — bloques
   grandes de color saturado. Eso es lo que había hasta ayer y funcionaba.
   Se sale de ahí por pedido explícito del cliente. Lo que NO se negocia y se
   respeta igual: los mínimos de contraste, las áreas táctiles de 44px y el
   orden de secciones del patrón Hero-Centric.
   ========================================================================== */

/* --- Etiquetas de sección: versalitas muy separadas, en oro -------------- */
.etiqueta {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--gold);
}

/* --- Títulos: serif fino y grande ---------------------------------------- */
.titulo-seccion,
.reservar__titulo,
.hero__eyebrow {
  letter-spacing: 0;
}
.titulo-seccion {
  font-weight: 300;   /* Cormorant Light: el trazo fino es el gesto caro */
  max-width: 22ch;
}
.reservar__titulo { font-weight: 300; }
/* Una palabra en cursiva dentro del título — recurso editorial de toda la
   vida, y aquí sale gratis porque Cormorant tiene una cursiva preciosa. */
.titulo-seccion em { font-style: italic; color: var(--gold); }

/* --- El hero respira ----------------------------------------------------- */
.hero__logo {
  width: min(400px, 70vw);
  filter: drop-shadow(0 30px 50px rgba(0, 0, 0, 0.5));
  /* Se quita el rebote. Un logo brincando se ve de página de descuentos. */
  animation: none;
}
.hero__eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  margin-bottom: var(--space-12);
  /* Una línea fina de oro a cada lado del texto. */
  display: inline-flex;
  align-items: center;
  gap: var(--space-5);
}
.hero__eyebrow::before,
.hero__eyebrow::after {
  content: "";
  width: clamp(28px, 7vw, 74px);
  height: 1px;
  background: var(--gold-dim);
}
.hero__bajada {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 1rem + 1.3vw, 2rem);
  font-weight: 300;
  font-style: italic;
  line-height: 1.5;
  color: #DCE6F2;
  max-width: 30ch;
  margin-bottom: var(--space-16);
}
.hero__datos dt { font-family: var(--font-body); letter-spacing: var(--tracking-wide); }
.hero__datos dd { font-size: var(--text-base); }

/* --- La carta: los precios en serif, en oro ----------------------------- */
.grupo__titulo { font-family: var(--font-body); letter-spacing: var(--tracking-wider); }
.platillo__nombre { font-weight: 500; }
.platillo__precio {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
}

/* --- Botones: el relleno se reserva para UNO --------------------------- */
/* Regla de la página: un solo botón sólido a la vista. Los demás son línea.
   Lo sólido llama la atención; si todo llama la atención, nada llama. */
.boton {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
}
.boton--linea { border-color: var(--gold-dim); color: var(--color-foreground); }
.boton--linea:hover:not(:disabled) { border-color: var(--gold); color: var(--gold); background: transparent; }

/* En la barra de arriba, hasta el botón de reservar va de línea: es
   navegación, no la llamada principal de la página. */
.nav__acciones .boton--oro {
  background: transparent;
  border: 1px solid var(--oro);
  color: var(--oro);
}
.nav__acciones .boton--oro:hover:not(:disabled) { background: var(--oro); color: var(--azul); }

/* --- La barra: más fina y con una línea de oro -------------------------- */
.nav__interior { min-height: 4.5rem; }
.nav__logo { width: 38px; height: 38px; border-radius: var(--radius-marca); }
.nav__marca {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  letter-spacing: 0.01em;
}
.nav__enlaces {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.nav { border-bottom: 1px solid var(--gold-dim); }

/* ==========================================================================
   DISEÑO D — "entra elegante, vende claro"        6 de septiembre de 2026

   Raúl escogió esto entre cuatro maquetas. La regla que lo decide:

     · ARRIBA (hero) manda la elegancia — negro, oro, el logo con su halo.
       Es lo que se ve en los primeros dos segundos y lo que hace que el
       sitio parezca caro.
     · ABAJO (la carta) manda la claridad — fondo crema, tarjetas blancas,
       precio grande y un botón para pedir. Aquí la gente LEE y DECIDE, y
       una carta sobre negro, en un celular, en la calle y con sol, no se
       lee. Eso no es opinión: es la razón por la que casi ningún
       restaurante deja su menú en oscuro.

   El hero pasó de estar CENTRADO (el logo solo, enorme) a DOS COLUMNAS:
   el mensaje y los botones a la izquierda, el logo a la derecha. Se ganó
   sitio para tres cosas que antes obligaban a hacer scroll: el horario,
   que contestamos siempre, y que hay servicio a domicilio.
   ========================================================================== */

.hero--dos-columnas .hero__interior {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
  text-align: left;
  justify-items: stretch;
}
.hero--dos-columnas { text-align: left; }
.hero--dos-columnas .hero__titulo { margin-bottom: var(--space-6); }
.hero--dos-columnas .hero__bajada { margin-inline: 0; margin-bottom: var(--space-8); }
.hero--dos-columnas .hero__acciones { justify-content: flex-start; margin-bottom: var(--space-8); }

/* El logo, con el atardecer del propio logo detrás en vez de una caja. */
.hero__marca { position: relative; display: grid; place-items: center; }
.hero__marca::before {
  content: "";
  position: absolute;
  width: min(30rem, 96%);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(211, 168, 87, 0.14) 0%, rgba(211, 168, 87, 0) 62%),
    radial-gradient(circle, rgba(211, 168, 87, 0.20) 0%, rgba(211, 168, 87, 0) 70%);
}
.hero--dos-columnas .hero__logo {
  width: min(430px, 100%);
  position: relative;
}

/* Los tres motivos para llamar, arriba del doblez. */
.hero__sellos {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.25rem, 3vw, 2.25rem);
  list-style: none;
  margin: 0 0 var(--space-6);
  padding: 0;
}
.hero__sellos li {
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  color: var(--color-muted-foreground);
  text-transform: uppercase;
}
.hero__sellos b {
  display: block;
  font-family: var(--fuente-titulos, inherit);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--gold);
  margin-bottom: 0.15rem;
}

/* La tira de datos sale del bloque de dos columnas y cruza todo el ancho. */
.hero--dos-columnas .hero__datos {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-border);
  position: relative;
  z-index: 1;
}

/* Botón rojo: el color de las letras del logo, para la acción principal. */
.boton--rojo {
  background: var(--rojo);
  border-color: var(--rojo);
  color: #FFFFFF;
  box-shadow: 0 12px 30px -12px rgba(215, 22, 5, 0.95);
}
.boton--rojo:hover:not(:disabled) {
  background: var(--rojo-hondo);
  border-color: var(--rojo-hondo);
  color: #FFFFFF;
  box-shadow: 0 16px 34px -12px rgba(215, 22, 5, 0.8);
}

/* En celular no hay dos columnas: el logo va arriba y el texto abajo, que es
   el orden en que se entiende una marca que todavía no conoces. */
@media (max-width: 880px) {
  .hero--dos-columnas .hero__interior { grid-template-columns: 1fr; gap: var(--space-8); }
  .hero--dos-columnas .hero__marca { order: -1; }
  .hero--dos-columnas .hero__logo { width: min(320px, 76vw); }
  .hero__sellos { gap: var(--space-5); }
}

/* ── Correcciones del hero D, vistas en la primera captura ────────────────
   Tres cosas se rompieron al pasar de una columna a dos, y las tres tienen
   la misma raíz: el hero estaba escrito para UN solo hijo centrado.

   1. `.hero` es `display:flex`. Al meterle un segundo hijo (la tira de
      datos), el flex los puso LADO A LADO en vez de uno debajo del otro.
   2. `--text-hero` está calculado para un título a todo el ancho. En media
      columna, las palabras se salían de su lado y se encimaban con el logo.
   3. La sangría en italic de `--oro` empujaba la segunda línea hasta
      debajo del logo.                                                      */
.hero--dos-columnas {
  display: block;               /* (1) el flex del hero original no aplica aquí */
  padding-block: 7rem 3.5rem;
}
.hero--dos-columnas .hero__titulo {
  /* (2) ~40% más chico que el hero de una columna: cabe en su mitad. */
  font-size: clamp(2.5rem, 1.6rem + 3.4vw, 4.5rem);
  line-height: 0.98;
  letter-spacing: -0.02em;
}
.hero--dos-columnas .hero__linea--oro {
  padding-left: 0;              /* (3) sin sangría: aquí no hay ancho que la aguante */
  font-style: italic;
}
/* Los sellos, en fila y con su separador. Se apilaban porque cada uno pedía
   más ancho del que hay en media columna. */
.hero--dos-columnas .hero__sellos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, auto));
  justify-content: start;
  gap: clamp(1rem, 2.2vw, 2rem);
}
.hero--dos-columnas .hero__sellos li { font-size: 0.6875rem; line-height: 1.45; }
.hero--dos-columnas .hero__sellos b { font-size: 0.9375rem; }

@media (max-width: 880px) {
  .hero--dos-columnas .hero__sellos { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 460px) {
  .hero--dos-columnas .hero__sellos { grid-template-columns: 1fr; }
}

/* ── Alineación fina del hero D, medida en el navegador ──────────────────
   Medido con el sitio abierto a 1440px, no a ojo:

     título    empieza en x=141, ancho 563
     tira      empezaba en x=263, ancho 900   ← 122px corrida y 258 más corta
     hueco     88px de nada entre los sellos y la tira

   La tira venía del hero centrado, donde salir estrecha y centrada era lo
   correcto. En dos columnas tiene que arrancar donde arranca el título y
   cruzar todo el ancho, o se lee como si estuviera suelta. */
.hero--dos-columnas .hero__datos {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  justify-content: stretch;
  width: 100%;
  margin-top: clamp(1.5rem, 2.5vw, 2.25rem);   /* era ~4rem: sobraba hueco */
}
/* El "Zamora, Michoacán · Desde 1998" trae dos rayitas decorativas a los
   lados. En media columna ya no cabía y se partía en dos renglones. */
.hero--dos-columnas .hero__eyebrow { white-space: nowrap; }
@media (max-width: 700px) {
  .hero--dos-columnas .hero__eyebrow { white-space: normal; }
  .hero--dos-columnas .hero__datos { grid-template-columns: 1fr; }
}

/* La tira ahora vive dentro de la rejilla del hero y cruza las dos columnas,
   así arranca exactamente donde arranca el título. */
.hero--dos-columnas .hero__datos {
  grid-column: 1 / -1;
  max-width: none;
  padding-inline: 0;
  margin-inline: 0;
}