/* ==========================================================================
   RETAMARES · SISTEMA v2
   Capa de sistema. Se carga DESPUÉS de style.css y manda sobre ella.

   Existe porque el sitio tenía plantilla, no sistema: un único hero para
   nueve páginas, H1 de 87,84 px en todas, 20 clases de botón, 20 duraciones
   de transición y 9 curvas distintas.

   Cuatro capas:
     1. Tokens          — movimiento, tipografía, espaciado, elevación
     2. Niveles de página — A portada · B destino · C utilidad
     3. Componentes     — botón, campo, acordeón, chip, índice
     4. Movimiento      — un solo gesto de entrada, escalonado

   Regla de oro: nada se anima con `all`, y solo se animan propiedades
   compuestas (transform / opacity / color). Nada que dispare layout.
   ========================================================================== */

/* ==========================================================================
   1 · TOKENS
   ========================================================================== */
:root {
  /* ---- Movimiento: 3 duraciones, 3 curvas. Y ya. ------------------------
     Antes había 20 duraciones (320ms ×79, 280ms ×51, 360, 260, 240, 220…)
     y 9 easings. Nada coordinado = sensación de "poco fluido". */
  --t-fast:  180ms;   /* estados inmediatos: foco, cambio de color */
  --t-base:  280ms;   /* UI con recorrido: nav, dropdown, acordeón */
  --t-slow:  620ms;   /* entrada de contenido */
  --t-btn:   440ms;   /* el barrido del botón: es superficie grande, pide calma */

  /* La curva de antes, cubic-bezier(.17,.84,.29,1), recorría el 84% del camino
     en el primer 17% del tiempo: se percibía como un tirón. Esta reparte el
     movimiento y frena al final, que es lo que se lee como suave. */
  --e-out:   cubic-bezier(.33, .78, .35, 1);   /* decelera. El 90% de los casos */
  --e-inout: cubic-bezier(.62, .02, .28, 1);   /* ida y vuelta */
  --e-soft:  cubic-bezier(.33, 1, .68, 1);     /* revelados largos */
  --e-btn:   cubic-bezier(.25, .6, .3, 1);     /* barrido del botón, sin tirón */

  /* ---- Tipografía -------------------------------------------------------
     Antes: 88px → 16px sin nada en medio. El rango 19-40px es el que hace
     que un texto respire en vez de gritar o susurrar. */
  --fs-display: clamp(44px, 6.4vw, 92px);   /* Nivel A. Solo portada. */
  --fs-h1-b:    clamp(34px, 4.4vw, 60px);   /* Nivel B. Páginas destino. */
  --fs-h1-c:    clamp(28px, 3.2vw, 42px);   /* Nivel C. Páginas de utilidad. */
  --fs-h2:      clamp(26px, 2.9vw, 40px);
  --fs-h3:      clamp(19px, 1.5vw, 23px);
  --fs-lede:    clamp(17px, 1.15vw, 19px);
  --fs-body:    16px;
  --fs-sm:      14px;
  --fs-meta:    12px;

  --lh-tight: 1.05;
  --lh-snug:  1.25;
  --lh-body:  1.65;
  --tr-meta:  0.16em;   /* tracking de los uppercase pequeños */

  /* ---- Espaciado: escala de 8, sin números sueltos ---------------------- */
  --sp-1: 4px;  --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;  --sp-5: 24px;
  --sp-6: 32px; --sp-7: 48px;  --sp-8: 64px;  --sp-9: 96px;  --sp-10: 128px;

  /* ---- Superficie ------------------------------------------------------- */
  --line:      var(--bone-20);
  --line-soft: var(--bone-10);
  --ring:      0 0 0 2px var(--bone-00), 0 0 0 4px var(--azul);
}

@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 1ms; --t-base: 1ms; --t-slow: 1ms; }
}

/* ==========================================================================
   2 · FOCO — 95 reglas :hover contra 7 :focus-visible. Se arregla aquí.
   ========================================================================== */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--azul);
  outline-offset: 3px;
  border-radius: 1px;
}
body:not([data-tier="c"]) .hero :focus-visible,
.faq-cta :focus-visible,
.dossier-band :focus-visible,
.nav:not(.scrolled) :focus-visible,
.on-dark :focus-visible { outline-color: #fff; }

/* ==========================================================================
   3 · NIVELES DE PÁGINA
   --------------------------------------------------------------------------
   A · Portada  → Home, Bodas. Hero a pantalla completa, tipografía display.
   B · Destino  → Espacios, Gastronomía, Empresa, Privados. Hero de 58vh.
   C · Utilidad → Galería, Preguntas, Contacto, legales. Sin hero fotográfico:
                  banda compacta y el contenido empieza arriba.
   ========================================================================== */

/* ---- Nivel B ------------------------------------------------------------ */
body[data-tier="b"] .hero { min-height: 58vh; }
body[data-tier="b"] .hero-inner { padding-bottom: var(--sp-8); align-items: end; }
body[data-tier="b"] .hero h1 {
  font-size: var(--fs-h1-b);
  max-width: 15ch;
  line-height: var(--lh-tight);
}
body[data-tier="b"] .hero .side p {
  font-size: var(--fs-lede);
  line-height: var(--lh-body);
  margin-bottom: var(--sp-6);
}
@media (max-width: 900px) {
  body[data-tier="b"] .hero { min-height: 66vh; }
}

/* ---- Nivel C: la banda ---------------------------------------------------
   El cambio estructural del sistema. Preguntas pasa de 612 px de ceremonia
   antes de la primera pregunta a ~250 px. En Galería, la primera fila de
   fotos ES el hero. */
body[data-tier="c"] .hero {
  min-height: 0;
  padding: 140px 0 0;
  display: block;
  overflow: visible;
  background: var(--bone-05);
  color: var(--ink-90);
  border-bottom: 1px solid var(--line-soft);
}
body[data-tier="c"] .hero video.bg,
body[data-tier="c"] .hero .bg-fallback,
body[data-tier="c"] .hero::after,
body[data-tier="c"] .hero-foot { display: none !important; }

body[data-tier="c"] .hero-inner {
  grid-template-columns: minmax(0, 1fr) minmax(0, 34ch);
  gap: var(--sp-5) var(--sp-9);
  align-items: end;
  padding-bottom: var(--sp-7);
}
body[data-tier="c"] .hero .eyebrow {
  color: var(--ink-40);
  margin-bottom: var(--sp-4);
  font-size: var(--fs-meta);
  letter-spacing: var(--tr-meta);
}
body[data-tier="c"] .hero h1 {
  font-size: var(--fs-h1-c);
  line-height: var(--lh-snug);
  letter-spacing: -0.015em;
  color: var(--ink-90);
  max-width: 20ch;
}
body[data-tier="c"] .hero h1 em { color: var(--ink-40); }
body[data-tier="c"] .hero .side { max-width: none; padding-bottom: 0; }
body[data-tier="c"] .hero .side p {
  color: var(--ink-60);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  margin: 0;
}
/* En nivel C el CTA del hero sobra casi siempre: es un botón para bajar. */
body[data-tier="c"] .hero .side .cta { display: none; }

@media (max-width: 900px) {
  body[data-tier="c"] .hero { padding-top: 112px; }
  body[data-tier="c"] .hero-inner { grid-template-columns: 1fr; padding-bottom: var(--sp-6); }
  body[data-tier="c"] .hero .side p { font-size: var(--fs-sm); }
}

/* La sección que sigue a una banda C no necesita 128px de aire por arriba. */
body[data-tier="c"] .hero + section.s { padding-top: var(--sp-8); }

/* Los H2 de nivel B y C bajan de 64px a 40px: dejan de competir con el H1.
   Nivel A (Home, Bodas) conserva su escala: ahí el titular sí es el gesto. */
body[data-tier="b"] .sec-head h2,
body[data-tier="c"] .sec-head h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  max-width: 24ch;
}
body[data-tier="b"] .sec-head,
body[data-tier="c"] .sec-head { margin-bottom: var(--sp-7); }

/* ---- El acento azul: regla, no tic --------------------------------------
   Estaba en 9 de 9 titulares, y varias veces sobre preposiciones
   ("y lo que incluye", "y logística"). Un acento en todas partes no acentúa.
   En nivel C se apaga: el color lo aporta el contenido, no el titular. */
body[data-tier="c"] .sec-head h2 em,
body[data-tier="c"] .sec-head h2 em.acc { color: var(--ink-40) !important; }

/* ==========================================================================
   4 · BOTONES — 3 variantes en lugar de 20 clases sueltas
   --------------------------------------------------------------------------
   .btn            base
   .btn--solid     relleno azul
   .btn--line      contorno
   .btn--quiet     sin caja, con subrayado que crece
   + .btn--sm / .btn--lg / .btn--on-dark
   Debajo, los 20 nombres heredados apuntan a estas mismas reglas.
   ========================================================================== */
.btn,
.btn-primary, .btn-ghost,
.sec-head .head-cta, .intro .left .head-cta, .head-cta,
.hero .side .cta, .nav .cta,
.gastro-cta, .mapa-cta, .btn-descarga,
.faq-cta-btn, .visita-cta-primary, .visita-cta-secondary,
.nav-mobile-cta, .dossier-form button, .submit-bar button, .visita-form-submit {
  --btn-h: 50px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: var(--btn-h);
  padding: 0 26px;
  margin: 0;
  font-family: var(--sans);
  font-weight: 500;
  font-size: var(--fs-meta);
  letter-spacing: var(--tr-meta);
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: 0;
  background-color: transparent;
  overflow: hidden;
  isolation: isolate;
  transition: color var(--t-btn) var(--e-btn),
              border-color var(--t-btn) var(--e-btn);
}

/* El barrido: una capa que sube desde abajo. Sustituye al salto de color. */
.btn::before,
.btn-primary::before, .btn-ghost::before,
.sec-head .head-cta::before, .intro .left .head-cta::before,
.hero .side .cta::before, .nav .cta::before,
.gastro-cta::before, .mapa-cta::before, .btn-descarga::before,
.faq-cta-btn::before, .visita-cta-primary::before, .visita-cta-secondary::before,
.nav-mobile-cta::before, .dossier-form button::before, .submit-bar button::before, .visita-form-submit::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform var(--t-btn) var(--e-btn);
}

.btn > *, .btn-primary > *, .btn-ghost > *,
.head-cta > *, .hero .side .cta > *, .nav .cta > * { position: relative; }

/* Flecha: se mueve sola, no espera al color */
.btn .arrow, .btn-primary .arrow, .btn-ghost .arrow, .head-cta .arrow,
.nav .cta .arrow, .gastro-cta .arrow, .mapa-cta .arrow,
.faq-cta-btn .arrow, .nav-mobile-cta .arrow, .submit-bar button .arrow, .visita-form-submit .arrow {
  display: inline-block;
  transition: transform var(--t-btn) var(--e-btn);
}
.btn:hover .arrow, .btn-primary:hover .arrow, .btn-ghost:hover .arrow,
.head-cta:hover .arrow, .nav .cta:hover .arrow,
.gastro-cta:hover .arrow, .mapa-cta:hover .arrow, .faq-cta-btn:hover .arrow,
.nav-mobile-cta:hover .arrow, .submit-bar button:hover .arrow, .visita-form-submit:hover .arrow {
  transform: translateX(3px);
}

/* ---- Sólido -------------------------------------------------------------- */
.btn--solid,
.btn-primary, .faq-cta-btn, .visita-cta-primary,
.dossier-form button, .submit-bar button, .visita-form-submit {
  background-color: var(--azul);
  border-color: var(--azul);
  color: #fff;
}
.btn--solid::before,
.btn-primary::before, .faq-cta-btn::before, .visita-cta-primary::before,
.dossier-form button::before, .submit-bar button::before, .visita-form-submit::before { background-color: var(--azul-d); }
.btn--solid:hover::before,
.btn-primary:hover::before, .faq-cta-btn:hover::before, .visita-cta-primary:hover::before,
.dossier-form button:hover::before, .submit-bar button:hover::before, .visita-form-submit:hover::before { transform: scaleY(1); }
.btn--solid:hover,
.btn-primary:hover, .faq-cta-btn:hover, .visita-cta-primary:hover,
.dossier-form button:hover, .submit-bar button:hover, .visita-form-submit:hover { color: #fff; border-color: var(--azul-d); }

/* ---- Contorno ------------------------------------------------------------ */
.btn--line,
.btn-ghost, .sec-head .head-cta, .intro .left .head-cta,
.gastro-cta, .mapa-cta, .btn-descarga, .visita-cta-secondary {
  border-color: var(--azul);
  color: var(--azul);
}
.btn--line::before,
.btn-ghost::before, .sec-head .head-cta::before, .intro .left .head-cta::before,
.gastro-cta::before, .mapa-cta::before,
.btn-descarga::before, .visita-cta-secondary::before { background-color: var(--azul); }
.btn--line:hover,
.btn-ghost:hover, .sec-head .head-cta:hover, .intro .left .head-cta:hover,
.gastro-cta:hover, .mapa-cta:hover,
.btn-descarga:hover, .visita-cta-secondary:hover { color: #fff; border-color: var(--azul); }
.btn--line:hover::before,
.btn-ghost:hover::before, .sec-head .head-cta:hover::before, .intro .left .head-cta:hover::before,
.gastro-cta:hover::before, .mapa-cta:hover::before,
.btn-descarga:hover::before, .visita-cta-secondary:hover::before { transform: scaleY(1); }

/* ---- Discreto: sin caja, subrayado que crece desde la izquierda ---------- */
.btn--quiet {
  height: auto;
  padding: 0 0 6px;
  border: 0;
  overflow: visible;
  color: var(--azul);
  isolation: auto;
}
.btn--quiet::before { display: none; }
.btn--quiet::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-base) var(--e-out);
}
.btn--quiet:hover::after { transform: scaleX(1); }

/* ---- Tamaños ------------------------------------------------------------- */
.btn--sm { --btn-h: 40px; padding: 0 18px; font-size: 11px; }
.btn--lg { --btn-h: 58px; padding: 0 34px; }
.btn--block { display: flex; width: 100%; }

/* ---- Sobre fondo oscuro -------------------------------------------------- */
.btn--on-dark.btn--line, .hero .side .cta {
  border-color: rgba(255, 255, 255, .5);
  color: #fff;
  background-color: transparent;
}
.btn--on-dark.btn--line::before, .hero .side .cta::before { background-color: #fff; }
.btn--on-dark.btn--line:hover, .hero .side .cta:hover {
  color: var(--ink-90);
  border-color: #fff;
}
.btn--on-dark.btn--line:hover::before, .hero .side .cta:hover::before { transform: scaleY(1); }

.btn--on-dark.btn--solid {
  background-color: #fff;
  border-color: #fff;
  color: var(--ink-90);
}
.btn--on-dark.btn--solid::before { background-color: var(--bone-10); }
.btn--on-dark.btn--solid:hover { color: var(--ink-90); border-color: var(--bone-10); }
.btn--on-dark.btn--solid:hover::before { transform: scaleY(1); }

/* El CTA del nav hereda el color del nav (blanco sobre hero, tinta al scroll) */
.nav .cta { --btn-h: 40px; padding: 0 20px; border-color: currentColor; color: inherit; }
.nav .cta::before { background-color: var(--azul); }
.nav .cta:hover { color: #fff; border-color: var(--azul); }
.nav .cta:hover::before { transform: scaleY(1); }

.nav-mobile-cta { border-color: rgba(255, 255, 255, .32); color: var(--bone-00); }
.nav-mobile-cta::before { background-color: var(--azul); }
.nav-mobile-cta:hover { color: #fff; border-color: var(--azul); }
.nav-mobile-cta:hover::before { transform: scaleY(1); }

/* Estado activo: un empujón mínimo. Da sensación de tecla física. */
.btn:active, .btn-primary:active, .btn-ghost:active, .head-cta:active,
.faq-cta-btn:active, .submit-bar button:active {
  transform: translateY(1px);
  transition: transform 90ms var(--e-out);
}

/* Deshabilitado y en curso */
.btn[disabled], .submit-bar button[disabled], .btn[aria-busy="true"] {
  opacity: .55;
  cursor: not-allowed;
  pointer-events: none;
}

/* ==========================================================================
   5 · CAMPOS DE FORMULARIO
   --------------------------------------------------------------------------
   El ancho lo dicta el contenido, no el hueco que sobra. Antes: Teléfono
   1174 px y Nombre 567 px. Rejilla de 12 columnas y cada campo pide las suyas.
   ========================================================================== */
.fgrid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--sp-5) var(--sp-5);
}
.fgrid > .fld { grid-column: span 12; }
.f-3  { grid-column: span 3 !important; }
.f-4  { grid-column: span 4 !important; }
.f-5  { grid-column: span 5 !important; }
.f-6  { grid-column: span 6 !important; }
.f-7  { grid-column: span 7 !important; }
.f-8  { grid-column: span 8 !important; }
.f-12 { grid-column: span 12 !important; }

@media (max-width: 720px) {
  .fgrid > .fld,
  .f-3, .f-4, .f-5, .f-6, .f-7, .f-8 { grid-column: span 12 !important; }
}

/* ---- El campo ------------------------------------------------------------ */
.fld { position: relative; display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.fld > label {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-40);
  transition: color var(--t-fast) var(--e-out);
}
.fld > label .opt { text-transform: none; letter-spacing: 0; font-weight: 400; opacity: .8; }
.fld > label .req { color: var(--azul); margin-left: 3px; }
.fld:focus-within > label { color: var(--azul); }

.fld input, .fld select, .fld textarea {
  width: 100%;
  min-width: 0;
  font-family: var(--sans);
  font-size: var(--fs-body);
  color: var(--ink-90);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: 12px 0;
  transition: border-color var(--t-base) var(--e-out);
  appearance: none;
  -webkit-appearance: none;
}
.fld textarea { resize: none; line-height: var(--lh-body); }
.fld input::placeholder, .fld textarea::placeholder { color: var(--ink-20); }

/* La línea que crece: el foco se ve sin recuadros ni sombras */
.fld::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--azul);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-base) var(--e-out);
  pointer-events: none;
}
.fld:focus-within::after { transform: scaleX(1); }
.fld input:focus, .fld select:focus, .fld textarea:focus { outline: none; }
.fld:hover input, .fld:hover select, .fld:hover textarea { border-bottom-color: var(--ink-40); }

.fld .help {
  font-size: 12px;
  color: var(--ink-40);
  line-height: 1.5;
}
.fld .err {
  font-size: 12px;
  color: var(--error);
  display: none;
  align-items: center;
  gap: 6px;
}
.fld.is-error::after { background: var(--error); transform: scaleX(1); }
.fld.is-error input, .fld.is-error select, .fld.is-error textarea { border-bottom-color: var(--error); }
.fld.is-error > label { color: var(--error); }
.fld.is-error .err { display: flex; }
.fld.is-error .help { display: none; }

/* Select con su flecha, sin la nativa del sistema */
.fld select {
  padding-right: 28px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%2375706A' stroke-width='1.4'><path d='M1 1.5 6 6.5 11 1.5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 2px center;
  background-size: 12px 8px;
  cursor: pointer;
}

/* Contador de caracteres del textarea */
.fld .count {
  position: absolute;
  right: 0;
  bottom: -20px;
  font-size: 11px;
  color: var(--ink-20);
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   6 · NAV
   --------------------------------------------------------------------------
   Se esconde al bajar y vuelve al subir: devuelve alto en páginas de lectura.
   El fondo entra con desenfoque en vez de cambiar de golpe.
   ========================================================================== */
.nav {
  transition: transform var(--t-base) var(--e-out),
              background-color var(--t-base) var(--e-out),
              color var(--t-base) var(--e-out),
              border-color var(--t-base) var(--e-out);
  will-change: transform;
}
.nav.scrolled {
  background: rgba(251, 248, 243, .84);
  backdrop-filter: saturate(1.7) blur(16px);
  -webkit-backdrop-filter: saturate(1.7) blur(16px);
  border-bottom: 1px solid var(--line-soft);
}
.nav.scrolled .nav-inner { padding-top: 14px; padding-bottom: 14px; }
.nav-inner { transition: padding var(--t-base) var(--e-out); }
.nav.is-hidden { transform: translateY(-100%); }
.nav.menu-open.is-hidden { transform: none; }

/* Subrayado del nav: nace a la izquierda, muere a la derecha */
.nav ul a::after { transition: transform var(--t-base) var(--e-out); }
.nav ul a:hover::after, .nav ul a:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}
.nav .logo .logo-svg { transition: filter var(--t-base) var(--e-out); }

/* Dropdown: aparece con recorrido, no con un salto de display */
.submenu {
  transition: opacity var(--t-fast) var(--e-out),
              transform var(--t-fast) var(--e-out),
              visibility 0s linear var(--t-fast);
}
.has-submenu:hover .submenu,
.has-submenu:focus-within .submenu,
.has-submenu.open .submenu {
  transition-delay: 0s;
}

/* ==========================================================================
   7 · MOVIMIENTO DE ENTRADA
   --------------------------------------------------------------------------
   Antes: todo con translateY(16px) durante 700ms y todo a la vez.
   Ahora: recorrido más corto, curva más suave y un compás por bloque.
   ========================================================================== */
html.js-reveal .reveal:not(.in) { opacity: 0; transform: translateY(10px); }
html.js-reveal .reveal.in { animation: rvIn var(--t-slow) var(--e-soft) both; }
@keyframes rvIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
html.js-reveal .reveal.in.d1 { animation-delay: 90ms; }
html.js-reveal .reveal.in.d2 { animation-delay: 180ms; }
html.js-reveal .reveal.in.d3 { animation-delay: 270ms; }

/* Lo que ya se ve al cargar no se anima: animarlo retrasa el LCP y se nota. */
html.js-reveal .reveal.rv-now { animation: none !important; opacity: 1; transform: none; }

/* Escalonado por posición dentro de una lista */
html.js-reveal .rv-stagger > * { animation-delay: calc(var(--rv-i, 0) * 70ms); }

/* Los medios entran con un barrido, no deslizándose.
   OJO: el recorte va en el HIJO, nunca en el elemento observado. Al aplicarlo
   al propio elemento, Chromium deja de considerarlo intersectante, así que el
   IntersectionObserver no dispara nunca, no llega la clase .in y la foto se
   queda invisible para siempre. Círculo vicioso. */
html.js-reveal .rv-media { clip-path: none !important; }
html.js-reveal .rv-media:not(.in) > * { clip-path: inset(0 0 100% 0); }
html.js-reveal .rv-media.in > * { animation: rvWipe 860ms var(--e-soft) both; }
@keyframes rvWipe {
  from { clip-path: inset(0 0 100% 0); }
  to   { clip-path: inset(0 0 0 0); }
}

@media (prefers-reduced-motion: reduce) {
  html.js-reveal .reveal:not(.in) { opacity: 1; transform: none; }
  html.js-reveal .rv-media:not(.in) > * { clip-path: none; }
  html.js-reveal .reveal.in, html.js-reveal .rv-media.in { animation: none; }
  .nav.is-hidden { transform: none; }
}

/* ==========================================================================
   8 · PIEZAS COMPARTIDAS
   ========================================================================== */

/* ---- Antetítulo ---------------------------------------------------------- */
.kicker, .sec-head .num, .sec-head .tag, .sec-head .eb, .eyebrow {
  font-variant-numeric: tabular-nums;
}

/* ---- Acordeón ------------------------------------------------------------ */
.faq-body-wrap, .catering-body-wrap {
  transition: grid-template-rows var(--t-base) var(--e-inout);
}
.faq-trigger, .catering-header {
  transition: color var(--t-fast) var(--e-out), background-color var(--t-fast) var(--e-out);
}
.faq-icon, .catering-icon { transition: transform var(--t-base) var(--e-inout); }

/* ---- Chip / filtro -------------------------------------------------------- */
.chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 16px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-60);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--t-fast) var(--e-out),
              border-color var(--t-fast) var(--e-out),
              background-color var(--t-fast) var(--e-out);
}
.chip:hover { border-color: var(--ink-40); color: var(--ink-90); }
.chip[aria-pressed="true"], .chip.on {
  background: var(--azul);
  border-color: var(--azul);
  color: #fff;
}
.chip .n {
  font-variant-numeric: tabular-nums;
  opacity: .6;
  font-size: 11px;
}

/* ---- Buscador ------------------------------------------------------------- */
.search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  transition: border-color var(--t-base) var(--e-out);
}
.search:focus-within { border-bottom-color: var(--azul); }
.search svg { flex: none; color: var(--ink-40); transition: color var(--t-fast) var(--e-out); }
.search:focus-within svg { color: var(--azul); }
.search input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  font-family: var(--sans);
  font-size: var(--fs-lede);
  color: var(--ink-90);
  padding: 14px 0;
}
.search input:focus { outline: none; }
.search input::placeholder { color: var(--ink-20); }
.search .clear {
  flex: none;
  border: 0;
  background: transparent;
  color: var(--ink-40);
  cursor: pointer;
  padding: 4px;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-fast) var(--e-out), color var(--t-fast) var(--e-out);
}
.search.has-value .clear { opacity: 1; pointer-events: auto; }
.search .clear:hover { color: var(--ink-90); }

/* ---- Índice lateral pegajoso ---------------------------------------------- */
.side-index { position: sticky; top: 120px; align-self: start; }
.side-index ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.side-index a {
  position: relative;
  display: block;
  padding: 10px 0 10px 18px;
  font-family: var(--sans);
  font-size: var(--fs-sm);
  color: var(--ink-40);
  transition: color var(--t-fast) var(--e-out);
}
.side-index a::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 1px; height: 0;
  background: var(--azul);
  transform: translateY(-50%);
  transition: height var(--t-base) var(--e-out);
}
.side-index a:hover { color: var(--ink-90); }
.side-index a[aria-current="true"] { color: var(--azul); }
.side-index a[aria-current="true"]::before { height: 22px; }

/* ---- Estado vacío --------------------------------------------------------- */
.empty {
  padding: var(--sp-8) 0;
  text-align: center;
  color: var(--ink-40);
  font-size: var(--fs-body);
}
.empty strong { color: var(--ink-90); font-weight: 500; }

/* ==========================================================================
   9 · UTILIDADES
   ========================================================================== */
.u-meta {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-40);
}
.u-lede { font-size: var(--fs-lede); line-height: var(--lh-body); color: var(--ink-60); }
.u-nums { font-variant-numeric: tabular-nums; }
.u-hide { display: none !important; }
@media (max-width: 720px) { .u-hide\@m { display: none !important; } }

/* El FAB no puede taparle el botón de enviar a nadie. */
.fab-wrap.is-parked { opacity: 0; pointer-events: none; transform: translateY(12px); }
#fabWrap { transition: opacity var(--t-base) var(--e-out), transform var(--t-base) var(--e-out); }

/* ==========================================================================
   10 · PÁGINA /sistema — solo el andamiaje del catálogo interno.
        No se usa en ninguna página pública.
   ========================================================================== */
body[data-active="sistema"] .sys-wrap { padding-top: var(--sp-8); }
.sys-layout {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: var(--sp-9);
  align-items: start;
}
@media (max-width: 1000px) {
  .sys-layout { grid-template-columns: 1fr; gap: var(--sp-6); }
  .sys-nav { display: none; }
}
.sys-nav-title { padding-bottom: var(--sp-3); border-bottom: 1px solid var(--line-soft); margin-bottom: var(--sp-2); }

.sys-sec { padding-bottom: var(--sp-10); scroll-margin-top: 120px; }
.sys-sec:last-child { padding-bottom: var(--sp-8); }
.sys-head { margin-bottom: var(--sp-7); }
.sys-head h2 {
  font-family: var(--serif); font-weight: 300;
  font-size: var(--fs-h2); line-height: var(--lh-snug);
  letter-spacing: -0.015em;
  margin: var(--sp-2) 0 var(--sp-4);
  max-width: 20ch;
}
.sys-head .u-lede { max-width: 62ch; }
.sys-note {
  margin-top: var(--sp-6);
  padding: var(--sp-4) var(--sp-5);
  background: var(--bone-05);
  border-left: 2px solid var(--azul);
  font-size: var(--fs-sm);
  color: var(--ink-60);
  line-height: var(--lh-body);
}
.sys-note strong { color: var(--ink-90); font-weight: 500; }
code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.88em;
  color: var(--azul);
  background: rgba(54, 81, 121, .07);
  padding: 1px 5px;
}

/* ---- Niveles ------------------------------------------------------------- */
.tier-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
@media (max-width: 900px) { .tier-grid { grid-template-columns: 1fr; } }
.tier { border: 1px solid var(--line-soft); background: #fff; }
.tier-demo {
  position: relative; height: 210px; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: var(--sp-4);
}
.tier-demo--a { background: linear-gradient(180deg, #2c3a4f 0%, #46618C 100%); }
.tier-demo--b { background: linear-gradient(180deg, #3b4a5e 0%, #5b7196 100%); height: 150px; }
.tier-demo--c { background: var(--bone-05); justify-content: flex-start; padding-top: var(--sp-6); }
.tier-badge {
  position: absolute; top: 12px; right: 12px;
  font-family: var(--sans); font-size: 10px; font-weight: 500;
  letter-spacing: 0.18em; color: #fff;
  border: 1px solid rgba(255,255,255,.45);
  padding: 3px 8px;
}
.tier-demo--c .tier-badge { color: var(--ink-40); border-color: var(--line); }
.tier-fake { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.tf-eyebrow { display: block; height: 5px; width: 64px; background: rgba(255,255,255,.5); }
.tf-h1 { display: block; background: rgba(255,255,255,.9); }
.tf-h1--a { height: 26px; width: 82%; box-shadow: 0 34px 0 rgba(255,255,255,.9); margin-bottom: 34px; }
.tf-h1--b { height: 17px; width: 68%; box-shadow: 0 23px 0 rgba(255,255,255,.9); margin-bottom: 23px; }
.tf-h1--c { height: 12px; width: 56%; box-shadow: 0 17px 0 var(--ink-90); margin-bottom: 17px; background: var(--ink-90); }
.tier-demo--c .tf-eyebrow { background: var(--ink-20); }
.tf-btn { display: block; height: 16px; width: 88px; border: 1px solid rgba(255,255,255,.6); margin-top: 6px; }
.tier-content { display: flex; flex-direction: column; gap: 9px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line-soft); }
.tier-content span { display: block; height: 7px; background: var(--bone-20); }
.tier-content span:nth-child(1) { width: 92%; }
.tier-content span:nth-child(2) { width: 78%; }
.tier-content span:nth-child(3) { width: 85%; }
.tier-body { padding: var(--sp-5); border-top: 1px solid var(--line-soft); }
.tier-body h3 { font-family: var(--serif); font-weight: 400; font-size: var(--fs-h3); margin: 0 0 var(--sp-2); }
.tier-body p { font-size: var(--fs-sm); color: var(--ink-60); line-height: var(--lh-body); margin: 0 0 var(--sp-4); }
.tier-specs { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.tier-specs > div { display: flex; gap: var(--sp-3); font-size: 12px; padding-top: 6px; border-top: 1px solid var(--line-soft); }
.tier-specs dt { color: var(--ink-40); min-width: 60px; letter-spacing: .06em; text-transform: uppercase; font-size: 10px; padding-top: 2px; }
.tier-specs dd { margin: 0; color: var(--ink-90); }

/* ---- Especímenes tipográficos -------------------------------------------- */
.spec-list { display: flex; flex-direction: column; }
.spec {
  display: grid; grid-template-columns: 190px minmax(0, 1fr);
  gap: var(--sp-6); align-items: baseline;
  padding: var(--sp-5) 0; border-top: 1px solid var(--line-soft);
}
@media (max-width: 760px) { .spec { grid-template-columns: 1fr; gap: var(--sp-2); } }
.spec-meta { display: flex; flex-direction: column; gap: 4px; }
.spec-meta .u-nums { font-size: 11px; color: var(--ink-40); letter-spacing: .08em; }
.spec p { margin: 0; }
.sp-display { font-family: var(--serif); font-weight: 300; font-size: var(--fs-display); line-height: var(--lh-tight); letter-spacing: -.02em; }
.sp-h1b { font-family: var(--serif); font-weight: 300; font-size: var(--fs-h1-b); line-height: var(--lh-tight); letter-spacing: -.02em; }
.sp-h1c { font-family: var(--serif); font-weight: 300; font-size: var(--fs-h1-c); line-height: var(--lh-snug); letter-spacing: -.015em; }
.sp-h2  { font-family: var(--serif); font-weight: 300; font-size: var(--fs-h2); line-height: var(--lh-snug); }
.sp-h3  { font-family: var(--serif); font-weight: 400; font-size: var(--fs-h3); }
.sp-lede { font-size: var(--fs-lede); line-height: var(--lh-body); color: var(--ink-60); max-width: 46ch; }
.sp-body { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-60); max-width: 60ch; }
.sp-sm  { font-size: var(--fs-sm); color: var(--ink-60); }
.sp-meta { font-size: var(--fs-meta); letter-spacing: var(--tr-meta); text-transform: uppercase; color: var(--ink-40); font-weight: 500; }

/* ---- Color ---------------------------------------------------------------- */
.sw-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); margin-bottom: var(--sp-7); }
@media (max-width: 860px) { .sw-grid { grid-template-columns: repeat(2, 1fr); } }
.sw { display: flex; flex-direction: column; gap: 3px; }
.sw-chip { display: block; height: 64px; margin-bottom: var(--sp-2); }
.sw-chip--line { border: 1px solid var(--line); }
.sw b { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; font-weight: 500; }
.sw code { background: none; padding: 0; color: var(--ink-40); font-size: 11px; }
.sw small { font-size: 11px; color: var(--ink-40); }

.rule { padding: var(--sp-5); border: 1px solid var(--line-soft); margin-top: var(--sp-4); }
.rule--bad { background: rgba(169, 59, 50, .04); border-color: rgba(169, 59, 50, .2); }
.rule--good { background: rgba(54, 81, 121, .04); border-color: rgba(54, 81, 121, .18); }
.rule-tag {
  font-family: var(--sans); font-size: 10px; font-weight: 500;
  letter-spacing: var(--tr-meta); text-transform: uppercase; margin-bottom: var(--sp-3);
}
.rule--bad .rule-tag { color: var(--error); }
.rule--good .rule-tag { color: var(--azul); }
.rule p { margin: 0; font-size: var(--fs-sm); line-height: var(--lh-body); color: var(--ink-60); }
.rule strong { color: var(--ink-90); font-weight: 500; }
.rule .ex { font-family: var(--serif); font-size: 17px; color: var(--ink-90); white-space: nowrap; }
.rule .ex em { font-style: normal; color: var(--azul); }

/* ---- Botones (demo) -------------------------------------------------------- */
.demo-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); }
@media (max-width: 960px) { .demo-row { grid-template-columns: 1fr; } }
.demo-cell { display: flex; flex-direction: column; gap: var(--sp-4); }
.demo-items { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }
.demo-note { font-size: 12px; color: var(--ink-40); line-height: 1.6; margin: 0; max-width: 58ch; }
.demo-dark { background: var(--ink-90); padding: var(--sp-6); margin-top: var(--sp-7); display: flex; flex-direction: column; gap: var(--sp-4); }

/* ---- Formulario (demo) ----------------------------------------------------- */
.demo-form { border: 1px solid var(--line-soft); background: #fff; padding: var(--sp-7); }
@media (max-width: 720px) { .demo-form { padding: var(--sp-5); } }
.demo-form-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-5); flex-wrap: wrap;
  margin-top: var(--sp-8); padding-top: var(--sp-5);
  border-top: 1px solid var(--line-soft);
}
.grid-ruler { display: grid; grid-template-columns: 7fr 5fr; gap: var(--sp-5); margin-top: var(--sp-3); }
.grid-ruler span {
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-40); text-align: center;
  border-top: 1px solid var(--line); padding-top: 6px;
}
@media (max-width: 720px) { .grid-ruler { display: none; } }

/* ---- Movimiento (demo) ------------------------------------------------------ */
.motion-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
@media (max-width: 860px) { .motion-grid { grid-template-columns: 1fr; } }
.motion {
  display: flex; flex-direction: column; gap: 6px; align-items: flex-start;
  text-align: left; padding: var(--sp-5);
  border: 1px solid var(--line-soft); background: #fff; cursor: pointer;
  transition: border-color var(--t-fast) var(--e-out);
}
.motion:hover { border-color: var(--azul); }
.motion-track { position: relative; width: 100%; height: 2px; background: var(--bone-10); margin-bottom: var(--sp-4); }
.motion-dot { position: absolute; top: -3px; left: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--azul); }
.motion[data-motion="fast"].run .motion-dot { animation: motionRun 150ms var(--e-out) both; }
.motion[data-motion="base"].run .motion-dot { animation: motionRun 280ms var(--e-out) both; }
.motion[data-motion="slow"].run .motion-dot { animation: motionRun 620ms var(--e-soft) both; }
@keyframes motionRun { from { left: 0; } to { left: calc(100% - 8px); } }
.motion b { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; font-weight: 500; }
.motion code { background: none; padding: 0; font-size: 11px; color: var(--ink-40); }
.motion small { font-size: 12px; color: var(--ink-60); line-height: 1.55; }

.curve-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); margin-top: var(--sp-5); }
@media (max-width: 860px) { .curve-grid { grid-template-columns: 1fr; } }
.curve { display: flex; flex-direction: column; gap: 4px; padding-top: var(--sp-3); border-top: 1px solid var(--line-soft); }
.curve b { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; font-weight: 500; }
.curve code { background: none; padding: 0; font-size: 11px; color: var(--ink-40); }
.curve small { font-size: 12px; color: var(--ink-60); }

/* ---- Piezas ------------------------------------------------------------------ */
.piece { display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--sp-5) 0; border-top: 1px solid var(--line-soft); }

/* ---- Reglas ------------------------------------------------------------------ */
.rules-list { margin: 0 0 var(--sp-6); padding: 0; list-style: none; counter-reset: r; }
.rules-list li {
  counter-increment: r;
  position: relative; padding: var(--sp-4) 0 var(--sp-4) 44px;
  border-top: 1px solid var(--line-soft);
  font-size: var(--fs-sm); color: var(--ink-60); line-height: var(--lh-body);
}
.rules-list li::before {
  content: counter(r, decimal-leading-zero);
  position: absolute; left: 0; top: var(--sp-4);
  font-size: 11px; color: var(--ink-20); font-variant-numeric: tabular-nums;
}
.rules-list b { color: var(--ink-90); font-weight: 500; }
.gestures { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3) var(--sp-5); margin-top: var(--sp-4); }
@media (max-width: 860px) { .gestures { grid-template-columns: 1fr; } }
.gestures > div { display: flex; flex-direction: column; gap: 2px; padding-top: var(--sp-2); border-top: 1px solid rgba(54,81,121,.15); }
.gestures b { font-family: var(--serif); font-weight: 400; font-size: 16px; color: var(--ink-90); }
.gestures span { font-size: 12px; color: var(--ink-60); line-height: 1.5; }

/* ==========================================================================
   11 · PREGUNTAS — gesto propio: buscador e índice, cero ceremonia.
   ========================================================================== */
body[data-active="preguntas"] .faq-search-bar {
  position: sticky; top: 0; z-index: 30;
  background: rgba(251, 248, 243, .92);
  backdrop-filter: saturate(1.7) blur(14px);
  -webkit-backdrop-filter: saturate(1.7) blur(14px);
  border-bottom: 1px solid var(--line-soft);
  padding: var(--sp-3) 0;
}
body[data-active="preguntas"] .faq-search-bar .wrap {
  display: flex; align-items: center; gap: var(--sp-5); flex-wrap: wrap;
}
body[data-active="preguntas"] .faq-search-bar .search {
  flex: 1 1 340px; max-width: 560px; border-bottom-color: transparent;
}
body[data-active="preguntas"] .faq-search-bar .search input { padding: 10px 0; font-size: var(--fs-body); }
.faq-status { margin: 0; font-size: 12px; color: var(--ink-40); }

body[data-active="preguntas"] .faq-wrap { padding-top: var(--sp-8); }
.faq-layout {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: var(--sp-9);
  align-items: start;
}
@media (max-width: 1000px) {
  .faq-layout { grid-template-columns: 1fr; gap: 0; }
  .faq-index { display: none; }
}
.faq-index-title { padding-bottom: var(--sp-3); border-bottom: 1px solid var(--line-soft); margin-bottom: var(--sp-2); }
.faq-index-cta { margin-top: var(--sp-5); font-size: 11px; }

.faq-group + .faq-group { margin-top: var(--sp-8); }
.faq-group-title {
  font-family: var(--serif); font-weight: 300;
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  color: var(--ink-40);
  margin: 0 0 var(--sp-2);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--line-soft);
  letter-spacing: 0;
}
body[data-active="preguntas"] .faq-item { border-bottom: 1px solid var(--line-soft); }
body[data-active="preguntas"] .faq-trigger { padding: var(--sp-5) 0; }
body[data-active="preguntas"] .faq-q { font-size: var(--fs-lede); }

.empty p { margin: 0 0 var(--sp-3); }
.empty .empty-sub { font-size: var(--fs-sm); }
.empty .btn--quiet { margin-left: 6px; }

.faq-close {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-6); flex-wrap: wrap;
  margin-top: var(--sp-9); padding-top: var(--sp-6);
  border-top: 1px solid var(--line);
}
.faq-close-text { display: flex; flex-direction: column; gap: 6px; max-width: 46ch; }
.faq-close-text .k {
  font-family: var(--sans); font-size: 10px; font-weight: 500;
  letter-spacing: var(--tr-meta); text-transform: uppercase; color: var(--ink-40);
}
.faq-close-text .t {
  font-family: var(--serif); font-weight: 300;
  font-size: var(--fs-h3); line-height: var(--lh-snug); color: var(--ink-90);
}

/* ==========================================================================
   12 · CORRECCIONES DE NIVEL C
   ========================================================================== */

/* El nav nace en blanco porque está pensado sobre una foto de hero. En nivel C
   no hay foto: sobre la banda crema quedaba blanco sobre blanco, invisible.
   Hay que igualar la especificidad de la regla de style.css que fuerza #fff
   (body[data-active] .nav:not(.scrolled) .nav-links > li > a[data-key]),
   por eso estos selectores son igual de largos y no más cortos. */
body[data-tier="c"] .nav:not(.menu-open) { color: var(--ink-90); }
body[data-tier="c"] .nav:not(.menu-open) .logo .logo-svg { filter: none; }
body[data-tier="c"] .nav:not(.scrolled):not(.menu-open) .nav-links > li > a[data-key],
body[data-tier="c"] .nav:not(.scrolled):not(.menu-open) .submenu-trigger[data-key],
body[data-tier="c"] .nav:not(.scrolled):not(.menu-open) a.cta { color: var(--ink-90); }

/* La página activa sí se marca en azul: sobre crema el azul se lee.
   Las de nivel C que salen en el nav son estas tres. */
body[data-active="galeria"][data-tier="c"] .nav:not(.scrolled):not(.menu-open) .nav-links > li > a[data-key="galeria"],
body[data-active="contacto"][data-tier="c"] .nav:not(.scrolled):not(.menu-open) .nav-links > li > a[data-key="contacto"],
body[data-active="preguntas"][data-tier="c"] .nav:not(.scrolled):not(.menu-open) .nav-links > li > a[data-key="preguntas"] { color: var(--azul); }

body[data-tier="c"] .nav:not(.scrolled):not(.menu-open) a.cta { border-color: var(--ink-20); }
body[data-tier="c"] .nav:not(.scrolled):not(.menu-open) a.cta:hover { color: #fff; border-color: var(--azul); }
body[data-tier="c"] .nav:not(.menu-open) :focus-visible { outline-color: var(--azul); }
body[data-tier="c"] .nav:not(.menu-open) .nav-burger { color: var(--ink-90); }

/* ---- Preguntas: compactar la lista ---------------------------------------
   12 preguntas no necesitan 3.000 px. Las filas eran más altas que su texto. */
body[data-active="preguntas"] .faq-trigger { padding: 18px 0; }
body[data-active="preguntas"] .faq-q { font-size: var(--fs-body); }
body[data-active="preguntas"] .faq-group + .faq-group { margin-top: var(--sp-7); }
body[data-active="preguntas"] .faq-group-title { margin-bottom: 0; }
body[data-active="preguntas"] .faq-list { border-bottom: 0; }
body[data-active="preguntas"] .faq-item:last-child { border-bottom: 0; }
body[data-active="preguntas"] .faq-close { margin-top: var(--sp-7); }

/* El enlace del índice no puede pesar igual que el rótulo del índice */
.faq-index-cta {
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--fs-sm);
  font-weight: 400;
}

/* En móvil el número se comía 62 px de ancho y partía preguntas de una línea
   en dos. Con 26 px sigue leyéndose y el texto respira. */
@media (max-width: 720px) {
  body[data-active="preguntas"] .faq-trigger {
    grid-template-columns: 26px 1fr 28px;
    column-gap: 12px;
  }
  body[data-active="preguntas"] .faq-num { letter-spacing: 0.06em; font-size: 10px; }
}

/* ==========================================================================
   13 · AJUSTES DE LA HOME (rev. jul 2026)
   ========================================================================== */

/* ---- A · Botones: quitar el efecto doble ---------------------------------
   style.css cambia `background` en :hover en nueve botones distintos. Como
   system.css nunca declaraba background-color en hover, esa regla seguía
   aplicándose: el botón hacía un cambio de fondo Y el barrido a la vez, dos
   animaciones peleándose. Eso es lo que se percibía como poco fluido.
   Aquí se fija el fondo explícitamente para que mande solo el barrido. */
.btn--line:hover,
.btn-ghost:hover, .sec-head .head-cta:hover, .intro .left .head-cta:hover,
.gastro-cta:hover, .mapa-cta:hover, .btn-descarga:hover,
.visita-cta-secondary:hover { background-color: transparent; }

.btn--solid:hover,
.btn-primary:hover, .faq-cta-btn:hover, .visita-cta-primary:hover,
.dossier-form button:hover, .submit-bar button:hover {
  background-color: var(--azul);
  color: #fff;
}
.nav .cta:hover { background-color: transparent; }
.nav-mobile-cta:hover { background-color: transparent; }
.hero .side .cta:hover { background-color: transparent; }
.btn--on-dark.btn--solid:hover { background-color: #fff; color: var(--ink-90); }

/* Con un solo efecto en juego, 400ms es el punto donde se lee como gesto
   y no como espera. */
:root { --t-btn: 400ms; }

/* ---- B · Scrim del hero en color de marca, no en negro -------------------
   El negro puro apaga y ensucia. Se usa el azul profundo del propio hero
   (#161B24) y se monta de abajo arriba, que es donde está el texto. */
.hero::after {
  background:
    linear-gradient(to top,
      rgba(22,27,36,.90) 0%,
      rgba(22,27,36,.78) 20%,
      rgba(22,27,36,.50) 40%,
      rgba(22,27,36,.22) 60%,
      rgba(22,27,36,.05) 80%,
      rgba(22,27,36,0) 100%),
    linear-gradient(to bottom,
      rgba(22,27,36,.58) 0%,
      rgba(22,27,36,.20) 14%,
      rgba(22,27,36,0) 30%);
}

/* ---- C · Lightbox sin pies de foto --------------------------------------
   El pie competía con la foto y no aportaba nada. */
.lb-slide figcaption { display: none !important; }

/* ---- D · Gastronomía: menos recorte -------------------------------------
   La caja era 21/9 (2,33) para fotos de 3/2 (1,5): se tiraba el 36% del alto
   y los platos quedaban descentrados. Con 2/1 se conserva el 75%. */
.gastro-slideshow .ss-stage { aspect-ratio: 2 / 1; }
.gastro-slideshow .ss-stage > picture:nth-of-type(1) img { object-position: 50% 58%; }
.gastro-slideshow .ss-stage > picture:nth-of-type(2) img { object-position: 50% 48%; }
.gastro-slideshow .ss-stage > picture:nth-of-type(3) img { object-position: 50% 43%; }

/* ---- E · Tipo de evento: una columna en móvil ---------------------------
   `repeat(2, 1fr)` daba columnas de 169 y 148px porque 1fr no baja de
   min-content, y la rejilla se salía hasta x=376 en una pantalla de 375.
   En móvil van apilados: cuatro opciones se leen mejor en fila que en cuadro. */
.ftype-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) {
  .ftype-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .ftype { padding: 14px 18px; }
}
@media (max-width: 720px) {
  .ftype-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   14 · MODAL DE VISITA (estructura de Miravalle, estilo Retamares)
   ========================================================================== */
.vm {
  position: fixed; inset: 0; z-index: 90;
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-5);
  background: rgba(22, 27, 36, .62);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden;
  transition: opacity var(--t-base) var(--e-out), visibility 0s linear var(--t-base);
}
.vm.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }

.vm-card {
  position: relative;
  width: min(640px, 100%);
  max-height: min(88vh, 860px);
  background: var(--bone-00);
  box-shadow: 0 30px 90px rgba(22, 27, 36, .28);
  transform: translateY(14px) scale(.985);
  transition: transform var(--t-slow) var(--e-soft);
  outline: none;
  overflow: hidden;
}
.vm.is-open .vm-card { transform: none; }
.vm-scroll { max-height: inherit; overflow-y: auto; padding: var(--sp-8) var(--sp-8) var(--sp-7); }
@media (max-width: 640px) { .vm-scroll { padding: var(--sp-7) var(--sp-5) var(--sp-6); } }

.vm-close {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: transparent; color: var(--ink-40); cursor: pointer;
  transition: color var(--t-fast) var(--e-out);
}
.vm-close:hover { color: var(--ink-90); }

.vm-eb { color: var(--azul); }
.vm-title {
  font-family: var(--serif); font-weight: 300;
  font-size: var(--fs-h2); line-height: var(--lh-snug); letter-spacing: -.015em;
  margin: var(--sp-2) 0 var(--sp-3);
}
.vm-sub { font-size: var(--fs-sm); line-height: var(--lh-body); color: var(--ink-60); margin: 0 0 var(--sp-6); max-width: 52ch; }
.vm-step { color: var(--ink-40); display: block; margin-bottom: var(--sp-4); }

/* Dos pasos: solo uno visible a la vez */
.vm-s2 { display: none; }
.vm.is-step2 .vm-s1 { display: none; }
.vm.is-step2 .vm-s2 { display: block; }
.vm-next, .vm-send { margin-top: var(--sp-6); width: 100%; }

.vm-top { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.vm-back {
  width: 32px; height: 32px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); background: transparent; color: var(--ink-60); cursor: pointer;
  transition: border-color var(--t-fast) var(--e-out), color var(--t-fast) var(--e-out);
}
.vm-back:hover { border-color: var(--azul); color: var(--azul); }
.vm-top .vm-step { margin-bottom: 0; }

/* ---- Calendario ---------------------------------------------------------- */
.vm-cal { border: 1px solid var(--line-soft); padding: var(--sp-4); }
.vm-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-3); }
.vm-mes { font-family: var(--serif); font-weight: 400; font-size: 18px; }
.vm-nav {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); background: transparent; color: var(--ink-60); cursor: pointer;
  transition: border-color var(--t-fast) var(--e-out), color var(--t-fast) var(--e-out);
}
.vm-nav:hover:not(:disabled) { border-color: var(--azul); color: var(--azul); }
.vm-nav:disabled { opacity: .3; cursor: not-allowed; }

.vm-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.vm-dow {
  text-align: center; font-family: var(--sans); font-size: 10px; font-weight: 500;
  letter-spacing: .16em; color: var(--ink-40); padding-bottom: 6px;
}
.vm-day {
  aspect-ratio: 1; min-height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--sans); font-size: 13px; font-variant-numeric: tabular-nums;
  color: var(--ink-90); background: transparent; border: 1px solid transparent;
  cursor: pointer;
  transition: background-color var(--t-fast) var(--e-out), color var(--t-fast) var(--e-out), border-color var(--t-fast) var(--e-out);
}
.vm-day:hover:not(:disabled) { border-color: var(--azul); }
.vm-day:disabled { color: var(--ink-20); cursor: not-allowed; }
.vm-day.is-out { pointer-events: none; }
.vm-day.is-today { font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.vm-day.is-sel { background: var(--azul); border-color: var(--azul); color: #fff; }

.vm-elegido {
  margin: var(--sp-4) 0 var(--sp-3);
  font-family: var(--serif); font-size: 17px; color: var(--ink-90);
  min-height: 22px;
}
.vm-horas { display: flex; flex-wrap: wrap; gap: 8px; }
.vm-hora {
  min-width: 74px; height: 40px; padding: 0 14px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--sans); font-size: 13px; font-variant-numeric: tabular-nums;
  color: var(--ink-90); background: transparent; border: 1px solid var(--line);
  cursor: pointer;
  transition: border-color var(--t-fast) var(--e-out), background-color var(--t-fast) var(--e-out), color var(--t-fast) var(--e-out);
}
.vm-hora:hover { border-color: var(--azul); }
.vm-hora.is-sel { background: var(--azul); border-color: var(--azul); color: #fff; }
.vm-horas.is-allday { display: block; }
.vm-nota {
  margin: 0; padding: var(--sp-4);
  background: var(--bone-05); border-left: 2px solid var(--azul);
  font-size: var(--fs-sm); color: var(--ink-60); line-height: var(--lh-body);
}

.vm-err { margin: var(--sp-4) 0 0; font-size: 13px; color: var(--error); min-height: 18px; }
.vm-ok { display: none; text-align: center; padding: var(--sp-7) 0 var(--sp-4); color: var(--azul); }
.vm-ok h4 {
  font-family: var(--serif); font-weight: 300; font-size: 26px;
  color: var(--ink-90); margin: var(--sp-4) 0 var(--sp-2);
}
.vm-ok p { font-size: var(--fs-sm); color: var(--ink-60); line-height: var(--lh-body); margin: 0; max-width: 40ch; margin-inline: auto; }
body.modal-open { overflow: hidden; }

/* ==========================================================================
   15 · CAMPOS CON CAJA
   --------------------------------------------------------------------------
   La línea inferior sola no se lee como «aquí se escribe»: parece decoración.
   Con caja cerrada el campo se ve, se entiende dónde pinchar y el área táctil
   es toda la caja, no solo el renglón.
   ========================================================================== */
.fld input, .fld select, .fld textarea,
.fld .is-boxed {
  border: 1px solid var(--line);
  background: #fff;
  padding: 13px 14px;
  transition: border-color var(--t-base) var(--e-out), box-shadow var(--t-base) var(--e-out);
}
.fld input:hover, .fld select:hover, .fld textarea:hover { border-color: var(--ink-40); }
.fld input:focus, .fld select:focus, .fld textarea:focus {
  border-color: var(--azul);
  box-shadow: inset 0 0 0 1px var(--azul);
}
/* La línea que crecía por debajo sobra: ya lo dice el borde */
.fld::after { display: none; }
.fld.is-error input, .fld.is-error select, .fld.is-error textarea { border-color: var(--error); }
.fld select { background-position: right 12px center; padding-right: 34px; }
.fld textarea { min-height: 96px; }

/* El bloque de Visitas contaba que hay que pedir cita pero no daba forma de
   pedirla. Ahora lleva su propia acción, que abre el modal del calendario. */
.vias-visita { margin-top: 10px; font-size: 11px; }

/* ==========================================================================
   16 · COMPARADOR ANTES / DURANTE (Bodas)
   --------------------------------------------------------------------------
   Se veía borroso en pantalla retina, pero las fotos no están desenfocadas:
   gal-5 y gal-9 tienen 95% y 108% de la nitidez media del proyecto. El borrón
   venía del tamaño: a 1256 px de ancho una pantalla retina pide 2512 px y el
   original solo tiene 1600. Cambiar de foto no arreglaría nada porque ninguna
   del proyecto pasa de 1600.
   Acotando el comparador a 860 px, 1600 cubre el 93% de lo necesario, que ya
   no se distingue de nítido. La solución de fondo es pedir originales a 2500 px.
   ========================================================================== */
body[data-active="bodas"] .ba-slider {
  max-width: 860px;
  margin-inline: auto;
}
body[data-active="bodas"] .ba-hint { text-align: center; }

/* ==========================================================================
   17 · BODAS
   ========================================================================== */

/* Entre el capítulo I y el formulario del final había 7.000 px sin una sola
   llamada a la acción: quien se convencía a mitad de página no tenía dónde ir. */
.bodas-puente {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-5);
  text-align: center;
  padding: var(--sp-8) 0 var(--sp-9);
}
.bodas-puente-t {
  font-family: var(--serif); font-weight: 300;
  font-size: var(--fs-h3); line-height: var(--lh-snug);
  color: var(--ink-90); margin: 0; max-width: 28ch;
}

/* Las fotos de los capítulos entran con barrido, no deslizándose */
body[data-active="bodas"] .cap-photo { overflow: hidden; }
body[data-active="bodas"] .cap-photo img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
body[data-active="bodas"] .cap-photo picture { display: block; aspect-ratio: 3 / 4; }

/* El cierre de la galería es banda oscura: los botones van en su versión clara */
body[data-active="bodas"] .gal-end-cta { margin-top: var(--sp-8); }

/* ==========================================================================
   18 · BODAS · reconstrucción jul 2026
   --------------------------------------------------------------------------
   La página anterior era un relato de cuatro capítulos sin anclar a nada:
   34% del alto en ficción, cero datos, cero personas, cero prueba social.
   Ahora responde en orden lo que una pareja pregunta de verdad.
   ========================================================================== */

/* ---- Banda de prueba bajo el hero --------------------------------------- */
.hero-prueba {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  background: rgba(22, 27, 36, .55);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255, 255, 255, .14);
}
.hero-prueba .wrap {
  display: flex; align-items: center; gap: var(--sp-7); flex-wrap: wrap;
  padding-top: var(--sp-5); padding-bottom: var(--sp-5);
}
.prueba-item { display: flex; flex-direction: column; gap: 2px; }
.prueba-n {
  font-family: var(--serif); font-weight: 300; font-size: 26px;
  line-height: 1; color: #fff;
}
.prueba-n small { font-size: 14px; opacity: .6; }
.prueba-l {
  font-family: var(--sans); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(255, 255, 255, .68);
}
.prueba-fuente {
  margin-left: auto;
  font-family: var(--sans); font-size: 11px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255, 255, 255, .8);
  display: inline-flex; align-items: center; gap: 8px;
  transition: color var(--t-fast) var(--e-out);
}
.prueba-fuente:hover { color: #fff; }
.prueba-fuente .arrow { transition: transform var(--t-base) var(--e-out); }
.prueba-fuente:hover .arrow { transform: translateX(3px); }
@media (max-width: 900px) {
  .hero-prueba { position: static; background: var(--ink-90); backdrop-filter: none; }
  .hero-prueba .wrap { gap: var(--sp-5) var(--sp-6); }
  .prueba-n { font-size: 22px; }
  .prueba-fuente { margin-left: 0; width: 100%; }
}
body[data-active="bodas"] .hero-inner { padding-bottom: var(--sp-9); }
@media (max-width: 900px) { body[data-active="bodas"] .hero-inner { padding-bottom: var(--sp-8); } }

/* ---- 02 · Razones -------------------------------------------------------- */
.razones {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-8) var(--sp-7);
}
@media (max-width: 1000px) { .razones { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .razones { grid-template-columns: 1fr; gap: var(--sp-6); } }
.razon { display: flex; flex-direction: column; gap: var(--sp-2); }
.razon h3 {
  font-family: var(--serif); font-weight: 400;
  font-size: var(--fs-h3); line-height: var(--lh-snug);
  margin: var(--sp-2) 0 0; max-width: 22ch;
}
.razon p { margin: 0; font-size: var(--fs-sm); line-height: var(--lh-body); color: var(--ink-60); max-width: 40ch; }

/* ---- 03 · El día --------------------------------------------------------- */
body[data-active="bodas"] .dia-wrap { background: var(--bone-05); }
.dia-lista { display: flex; flex-direction: column; gap: var(--sp-9); }
.dia-paso {
  display: grid; grid-template-columns: 82px minmax(0, 1fr) minmax(0, 46%);
  gap: var(--sp-6); align-items: center;
}
.dia-paso.reverse { grid-template-columns: minmax(0, 46%) 82px minmax(0, 1fr); }
.dia-paso.reverse .dia-foto { order: -1; }
@media (max-width: 900px) {
  .dia-paso, .dia-paso.reverse { grid-template-columns: 1fr; gap: var(--sp-4); }
  .dia-paso.reverse .dia-foto { order: 0; }
}
.dia-hora {
  font-family: var(--sans); font-weight: 500; font-size: 12px;
  letter-spacing: .16em; color: var(--azul);
  align-self: start; padding-top: 6px;
}
.dia-texto h3 {
  font-family: var(--serif); font-weight: 300;
  font-size: var(--fs-h2); line-height: var(--lh-snug);
  margin: 0 0 var(--sp-2);
}
.dia-donde {
  font-family: var(--sans); font-size: 13px; color: var(--ink-40);
  margin: 0 0 var(--sp-3);
}
.dia-donde strong { color: var(--azul); font-weight: 500; }
.dia-sep { opacity: .45; margin: 0 6px; }
.dia-texto p:last-child { margin: 0; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-60); max-width: 44ch; }
.dia-foto { margin: 0; overflow: hidden; }
.dia-foto picture { display: block; aspect-ratio: 4 / 3; }
.dia-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- Los cuatro salones -------------------------------------------------- */
.salones { margin-top: var(--sp-10); padding-top: var(--sp-7); border-top: 1px solid var(--line); }
.salones-head { margin-bottom: var(--sp-6); }
.salones-head h3 { font-family: var(--serif); font-weight: 300; font-size: var(--fs-h3); margin: 0 0 4px; }
.salones-head p { margin: 0; font-size: 13px; color: var(--ink-40); }
.salones-lista {
  list-style: none; margin: 0 0 var(--sp-6); padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5);
}
@media (max-width: 900px) { .salones-lista { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .salones-lista { grid-template-columns: 1fr; } }
.salon {
  display: flex; flex-direction: column; gap: 4px;
  padding-top: var(--sp-3); border-top: 2px solid var(--azul);
}
.salon-n { font-family: var(--serif); font-weight: 300; font-size: 34px; line-height: 1; letter-spacing: -.02em; }
.salon b { font-family: var(--sans); font-weight: 500; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; }
.salon-d { font-size: 12px; color: var(--ink-40); line-height: 1.5; }

.ba-intro { margin: var(--sp-10) 0 var(--sp-5); text-align: center; }
.ba-intro h3 { font-family: var(--serif); font-weight: 300; font-size: var(--fs-h3); margin: 0 0 4px; }
.ba-intro p { margin: 0; font-size: 13px; color: var(--ink-40); }

/* ---- 04 · La cocina ------------------------------------------------------ */
.lineas { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); }
@media (max-width: 1000px) { .lineas { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .lineas { grid-template-columns: 1fr; } }
.linea {
  display: flex; flex-direction: column; gap: var(--sp-2);
  padding: var(--sp-5); background: #fff; border: 1px solid var(--line-soft);
}
.linea--destacada { border-color: var(--azul); box-shadow: inset 0 2px 0 var(--azul); }
.linea h3 { font-family: var(--serif); font-weight: 400; font-size: 19px; line-height: var(--lh-snug); margin: 0; }
.linea p { margin: 0; font-size: 13px; line-height: var(--lh-body); color: var(--ink-60); }
.cocina-nota {
  margin: var(--sp-6) 0 0; padding: var(--sp-4) var(--sp-5);
  background: var(--bone-05); border-left: 2px solid var(--azul);
  font-size: var(--fs-sm); color: var(--ink-60); line-height: var(--lh-body); max-width: 70ch;
}

/* ---- 05 · Equipo y opiniones --------------------------------------------- */
body[data-active="bodas"] .equipo-wrap { background: var(--bone-05); }
.equipo-grid {
  display: grid; grid-template-columns: 210px minmax(0, 1fr);
  gap: var(--sp-8); align-items: start; margin-bottom: var(--sp-9);
}
@media (max-width: 760px) { .equipo-grid { grid-template-columns: 1fr; gap: var(--sp-5); } }
.equipo-persona { margin: 0; display: flex; flex-direction: column; gap: var(--sp-4); }
.equipo-avatar {
  width: 128px; height: 128px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid var(--line); color: var(--ink-20);
}
.equipo-avatar svg { width: 76px; height: 76px; }
.equipo-persona figcaption { display: flex; flex-direction: column; gap: 3px; }
.equipo-nombre { font-family: var(--serif); font-weight: 400; font-size: 19px; color: var(--ink-90); }
.equipo-rol { font-family: var(--sans); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-40); }
.equipo-lede { font-family: var(--serif); font-weight: 300; font-size: var(--fs-h3); line-height: var(--lh-snug); color: var(--ink-90); margin: 0 0 var(--sp-5); max-width: 34ch; }
.equipo-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.equipo-lista li {
  padding: var(--sp-3) 0 var(--sp-3) var(--sp-5); border-top: 1px solid var(--line-soft);
  font-size: var(--fs-sm); color: var(--ink-60); position: relative;
}
.equipo-lista li::before {
  content: ""; position: absolute; left: 0; top: 21px;
  width: 10px; height: 1px; background: var(--azul);
}

.opiniones { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
@media (max-width: 860px) { .opiniones { grid-template-columns: 1fr; } }
.opinion { margin: 0; padding: var(--sp-5); background: #fff; border: 1px solid var(--line-soft); }
.opinion blockquote {
  margin: 0 0 var(--sp-4);
  font-family: var(--serif); font-weight: 300; font-size: 19px;
  line-height: var(--lh-snug); color: var(--ink-90);
}
.opinion blockquote::before { content: "“"; color: var(--azul); margin-right: 2px; }
.opinion blockquote::after  { content: "”"; color: var(--azul); }
.opinion figcaption { display: flex; flex-direction: column; gap: 2px; }
.opinion figcaption b { font-family: var(--sans); font-size: 13px; font-weight: 500; }
.opinion figcaption span { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-40); }
.opiniones-fuente { margin-top: var(--sp-5); }

/* ---- 06 · Instagram ------------------------------------------------------ */
.ig-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3);
}
@media (max-width: 560px) { .ig-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-2); } }
.ig-tile { aspect-ratio: 1; }
.ig-ph {
  display: block; width: 100%; height: 100%;
  background:
    repeating-linear-gradient(45deg, var(--bone-05) 0 10px, var(--bone-10) 10px 20px);
  border: 1px solid var(--line-soft);
}
.ig-todo { margin-bottom: var(--sp-5); }

/* ---- 07 · Suites --------------------------------------------------------- */
body[data-active="bodas"] .suites-wrap { background: var(--bone-05); }
.suites-inner {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 48%);
  gap: var(--sp-8); align-items: center;
}
@media (max-width: 900px) { .suites-inner { grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); } }
.suites-texto h2 {
  font-family: var(--serif); font-weight: 300;
  font-size: var(--fs-h2); line-height: var(--lh-snug);
  margin: var(--sp-2) 0 var(--sp-4);
}
.suites-texto p { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-60); margin: 0 0 var(--sp-4); max-width: 46ch; }
.suites-foto { margin: 0; overflow: hidden; }
.suites-foto picture { display: block; aspect-ratio: 4 / 3; }
.suites-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- Marcador de pendiente ----------------------------------------------- */
.mod-todo {
  display: inline-block;
  font-family: var(--sans); font-size: 11px; font-weight: 500;
  letter-spacing: .06em; line-height: 1.5;
  color: #6B5200; background: #FFF3C4; border: 1px dashed #D9B300;
  padding: 5px 10px; margin-top: var(--sp-2);
}

/* Puntos de conversión repartidos: antes había uno solo en 11.000px de página. */
.cta-banda {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-5); flex-wrap: wrap;
  margin-top: var(--sp-9); padding: var(--sp-6) var(--sp-7);
  background: var(--ink-90); color: var(--bone-00);
}
.cta-banda p {
  margin: 0; max-width: 46ch;
  font-family: var(--serif); font-weight: 300;
  font-size: var(--fs-h3); line-height: var(--lh-snug);
}
.cta-banda .btn--solid { background-color: #fff; border-color: #fff; color: var(--ink-90); }
.cta-banda .btn--solid::before { background-color: var(--bone-10); }
.cta-banda .btn--solid:hover { color: var(--ink-90); border-color: var(--bone-10); background-color: #fff; }

/* La variante suave va sobre crema, sin banda oscura, para no repetir el gesto */
.cta-banda--suave {
  background: transparent; color: var(--ink-90);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: var(--sp-6) 0; margin-top: var(--sp-8);
}
@media (max-width: 700px) {
  .cta-banda { flex-direction: column; align-items: flex-start; padding: var(--sp-5); }
  .cta-banda--suave { padding: var(--sp-5) 0; }
}

/* ==========================================================================
   19 · BODAS · revisión de Miguel (jul 2026)
   Fuera: el bloque del día, el comparador antes/durante, el CTA intermedio y
   toda mención a bodas.net, que es competencia directa.
   ========================================================================== */

/* ---- Razones: la foto manda, el número se apoya en ella ------------------ */
.razones { gap: 0; }
.razon {
  gap: var(--sp-3);
  padding: var(--sp-6) var(--sp-6) var(--sp-7) 0;
  border-top: 1px solid var(--line);
}
@media (min-width: 641px) and (max-width: 1000px) { .razon:nth-child(-n+2) { border-top-color: var(--line); } }
@media (min-width: 1001px) { .razon { padding-right: var(--sp-7); } }
/* Montadas como una lámina: paspartú blanco y filete fino. A hueso sobre el
   crema eran seis rectángulos sin más, que es justo lo que sobraba. */
.razon-foto {
  --mat: 10px;
  position: relative; margin: 0 0 var(--sp-2); overflow: hidden;
  aspect-ratio: 4 / 3; padding: var(--mat);
  background: #fff; border: 1px solid var(--line);
}
.razon-foto picture { display: block; width: 100%; height: 100%; overflow: hidden; }
.razon-foto img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform var(--t-slow) var(--e-soft);
}
.razon:hover .razon-foto img { transform: scale(1.045); }
@media (prefers-reduced-motion: reduce) { .razon:hover .razon-foto img { transform: none; } }

/* ---- Salones: foto por espacio, y se abre en el visor ------------------- */
.salones-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4);
}
@media (max-width: 1100px) { .salones-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px)  { .salones-grid { grid-template-columns: 1fr; } }
.salon-card { margin: 0; cursor: pointer; }
.salon-card .f { position: relative; overflow: hidden; aspect-ratio: 3 / 4; }
.salon-card picture { display: block; width: 100%; height: 100%; }
.salon-card img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform var(--t-slow) var(--e-soft);
}
.salon-card:hover img { transform: scale(1.04); }
.salon-lupa {
  position: absolute; right: 12px; bottom: 12px;
  width: 34px; height: 34px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.9); color: var(--ink-90);
  opacity: 0; transform: translateY(6px);
  transition: opacity var(--t-base) var(--e-out), transform var(--t-base) var(--e-out);
}
.salon-lupa svg { width: 16px; height: 16px; }
.salon-card:hover .salon-lupa, .salon-card:focus-within .salon-lupa { opacity: 1; transform: none; }
.salon-card figcaption { padding-top: var(--sp-3); display: flex; flex-direction: column; gap: 3px; }
.salon-top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); }
.salon-top b { font-family: var(--sans); font-weight: 500; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; }
.salon-card .salon-n { font-family: var(--serif); font-weight: 300; font-size: 26px; line-height: 1; color: var(--azul); }
.salon-card .salon-d { font-size: 12px; color: var(--ink-40); line-height: 1.5; }

/* ---- Cocinas con foto ---------------------------------------------------- */
.linea { padding: 0; overflow: hidden; }
.linea-foto { margin: 0; overflow: hidden; aspect-ratio: 4 / 3; }
.linea-foto picture { display: block; width: 100%; height: 100%; }
.linea-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.linea-txt { padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-2); }

/* ---- Galería mixta: fotos, vídeos y GIF --------------------------------- */
.mix-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 200px; gap: var(--sp-3);
}
@media (max-width: 1000px) { .mix-grid { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 170px; } }
@media (max-width: 620px)  { .mix-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; } }
.mix { position: relative; }
.mix--alta  { grid-row: span 2; }
.mix--ancha { grid-column: span 2; }
/* En 3 columnas los spans dejan huecos: las nueve piezas cuadran en 3×3 planas.
   Va DESPUÉS de las dos reglas de arriba: una media query no suma especificidad,
   así que si se declara antes pierde por orden de cascada. */
@media (max-width: 1000px) and (min-width: 621px) {
  .mix--alta  { grid-row: span 1; }
  .mix--ancha { grid-column: span 1; }
}
.mix-ph, .mix-tile .mix-ph {
  display: block; width: 100%; height: 100%;
  background: repeating-linear-gradient(45deg, var(--bone-05) 0 10px, var(--bone-10) 10px 20px);
  border: 1px solid var(--line-soft);
}
.mix-tag {
  position: absolute; left: 10px; top: 10px;
  font-family: var(--sans); font-size: 10px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  padding: 4px 8px; background: rgba(255,255,255,.92); color: var(--ink-60);
}
.mix--video .mix-tag { background: var(--azul); color: #fff; }
.mix--gif   .mix-tag { background: var(--ink-90); color: #fff; }

/* ---- Galería de suites --------------------------------------------------- */
.suites-inner .suites-galeria { grid-template-columns: repeat(2, 1fr); margin-top: 0; }
.suites-galeria {
  list-style: none; margin: var(--sp-7) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3);
}
@media (max-width: 700px) { .suites-inner .suites-galeria { grid-template-columns: repeat(2, 1fr); margin-top: 0; }
.suites-galeria { grid-template-columns: repeat(2, 1fr); } }
.suite-tile { aspect-ratio: 3 / 4; }

/* ---- Formulario en tonos claros -----------------------------------------
   Estaba sobre una tarjeta ink-90. Para una boda pesa demasiado: se pasa a
   crema con la tinta habitual, y los campos ya llevan su caja blanca. */
body[data-active="bodas"] .visita-grid,
body[data-active="bodas"] .visita-card,
body[data-active="bodas"] .visita-panel { background: var(--bone-00) !important; color: var(--ink-90) !important; }
body[data-active="bodas"] .visita-wrap .num,
body[data-active="bodas"] .visita-wrap h2,
body[data-active="bodas"] .visita-wrap h3,
body[data-active="bodas"] .visita-wrap p { color: inherit; }
body[data-active="bodas"] .visita-checks { color: var(--ink-60); }
body[data-active="bodas"] .visita-checks li::before { background: var(--azul); }
body[data-active="bodas"] .visita-form .fld label { color: var(--ink-40); }
body[data-active="bodas"] .visita-form .fld input,
body[data-active="bodas"] .visita-form .fld select,
body[data-active="bodas"] .visita-form .fld textarea {
  background: #fff !important; color: var(--ink-90) !important;
  border: 1px solid var(--line) !important;
}
body[data-active="bodas"] .visita-form .fld input::placeholder,
body[data-active="bodas"] .visita-form .fld textarea::placeholder { color: var(--ink-20) !important; }
body[data-active="bodas"] .visita-form-submit {
  background: var(--azul) !important; color: #fff !important; border-color: var(--azul) !important;
}
body[data-active="bodas"] .visita-fallback,
body[data-active="bodas"] .visita-fallback a { color: var(--ink-60); }
body[data-active="bodas"] .visita-fallback a:hover { color: var(--azul); }

.opiniones-nota { margin: var(--sp-5) 0 0; font-size: 12px; color: var(--ink-40); }

/* ==========================================================================
   20 · MARCADORES DE CONTENIDO PENDIENTE
   --------------------------------------------------------------------------
   El rayado diagonal anterior no decía nada: parecía un fallo de carga. Estos
   dicen con todas las letras que son un marcador y de qué tipo, para que
   nadie los confunda con contenido real ni se cuelen en producción.
   ========================================================================== */
.phx-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.phx {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px;
  width: 100%; height: 100%;
  /* Iban en ink-20 sobre crema: 1,6:1, prácticamente invisibles. Un marcador
     que no se ve no avisa de nada, que es justo para lo que existe. */
  background: rgba(54, 81, 121, .05);
  border: 1.5px dashed rgba(54, 81, 121, .32);
  color: var(--azul);
  text-align: center; padding: var(--sp-3);
  transition: background-color var(--t-fast) var(--e-out), border-color var(--t-fast) var(--e-out);
}
.phx:hover { background: rgba(54, 81, 121, .09); border-color: rgba(54, 81, 121, .5); }
.phx-i { width: 38px; height: 38px; flex: none; opacity: .75; }
.phx-t {
  font-family: var(--sans); font-size: 10px; font-weight: 600;
  letter-spacing: var(--tr-meta); text-transform: uppercase;
  color: var(--azul);
}
.phx-k {
  font-family: var(--sans); font-size: 12px;
  color: var(--ink-60); line-height: 1.3;
}
/* En casillas pequeñas el texto no cabe: se queda solo el icono */
.ig-tile .phx-k, .suite-tile .phx-k { display: none; }
@media (max-width: 620px) {
  .phx-i { width: 26px; height: 26px; }
  .phx-t { font-size: 9px; letter-spacing: .12em; }
  .phx-k { display: none; }
}

/* La etiqueta de tipo de la galería ya la lleva el propio marcador */
.mix-tag { display: none; }

/* ==========================================================================
   21 · AIRE ENTRE MÓDULOS (Bodas)
   --------------------------------------------------------------------------
   Medido: la banda de prueba iba a 16px de padding, las razones a 32/48 y el
   bloque de salones arrancaba a 32px de la sección anterior. Todo junto se
   leía apelotonado. Se abre sin tocar el ritmo de 128px de las secciones,
   que ese ya estaba bien.
   ========================================================================== */

/* Razones: más respiración dentro de cada módulo y entre columnas */
.razones { column-gap: var(--sp-8); }
.razon { padding: var(--sp-7) 0 var(--sp-8); }
@media (min-width: 1001px) { .razon { padding-right: var(--sp-8); } }
.razon-foto { margin-bottom: var(--sp-4); }
.razon h3 { margin-top: var(--sp-3); }
.razon p { margin-top: var(--sp-1); }

/* El bloque de salones no puede empezar a 32px de lo anterior */
body[data-active="bodas"] .salones-wrap { padding-top: var(--sp-10); }
.salones-grid { gap: var(--sp-5); }
.salon-card figcaption { padding-top: var(--sp-4); }

/* Cocinas y opiniones: separar las tarjetas entre sí */
.lineas { gap: var(--sp-5); }
.linea-txt { padding: var(--sp-6) var(--sp-5) var(--sp-7); }
.opiniones { gap: var(--sp-5); }
.opinion { padding: var(--sp-6); }

/* Galerías: el hueco entre casillas era de 12px, se queda corto en pantallas
   grandes donde las piezas son de 200px */
.mix-grid { gap: var(--sp-4); }
.ig-grid { gap: var(--sp-4); }
.suites-inner .suites-galeria { grid-template-columns: repeat(2, 1fr); margin-top: 0; }
.suites-galeria { gap: var(--sp-4); margin-top: var(--sp-8); }
.suites-inner .suites-galeria { margin-top: 0; }

/* Y aire entre el aviso amarillo y la rejilla que describe */
.mod-todo { margin-bottom: var(--sp-5); }

/* Los marcadores que sustituyen a una foto tienen que ocupar su mismo hueco */
.salon-card .f .phx,
.linea-foto .phx,
.razon-foto .phx,
.suites-foto .phx { position: absolute; inset: 0; }
.salon-card .f, .linea-foto, .razon-foto, .suites-foto { position: relative; }
.linea-foto, .razon-foto { display: block; }
.suites-foto { aspect-ratio: 4 / 3; }
/* El marcador va dentro del paspartú, no encima del marco */
.razon-foto .phx { inset: var(--mat); }

/* ---- Instagram con material real ----------------------------------------- */
.ig-tile a { display: block; position: relative; width: 100%; height: 100%; overflow: hidden; }
.ig-tile picture { display: block; width: 100%; height: 100%; }
.ig-tile img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform var(--t-slow) var(--e-soft), filter var(--t-base) var(--e-out);
}
.ig-tile a:hover img { transform: scale(1.05); filter: brightness(.9); }
/* Icono de tipo, arriba a la derecha, como en la propia app */
.ig-tipo {
  position: absolute; top: 8px; right: 8px;
  width: 22px; height: 22px; color: #fff;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.5));
  pointer-events: none;
}
.ig-tipo svg { width: 100%; height: 100%; }

/* ==========================================================================
   22 · HERO DE BODAS · foto de la pareja en el campo
   --------------------------------------------------------------------------
   La composición tiene a la pareja abajo a la derecha y cielo abierto arriba
   a la izquierda, que es justo donde va el titular. El scrim se rebaja para
   no apagarla, y se ancla el encuadre al pie para que la pareja no se pierda
   al recortar en pantallas altas o en móvil.
   ========================================================================== */
body[data-active="bodas"] .hero .bg-fallback {
  background-position: center bottom;
}
/* Tres capas, cada una con su trabajo. El cielo de esta foto es muy claro y
   con el scrim anterior el antetítulo se quedaba en 2,3:1 y el titular en 3,6.
   La clave es oscurecer por la IZQUIERDA, que es donde está el texto, y dejar
   limpia la derecha, que es donde va la pareja. */
body[data-active="bodas"] .hero::after {
  background:
    /* 1 · lateral: protege titular y antetítulo */
    linear-gradient(to right,
      rgba(18,22,30,.74) 0%,
      rgba(18,22,30,.60) 26%,
      rgba(18,22,30,.30) 48%,
      rgba(18,22,30,.08) 66%,
      rgba(18,22,30,0) 80%),
    /* 2 · de abajo arriba: asienta el pie y la banda de datos */
    linear-gradient(to top,
      rgba(18,22,30,.70) 0%,
      rgba(18,22,30,.42) 20%,
      rgba(18,22,30,.16) 42%,
      rgba(18,22,30,0) 68%),
    /* 3 · arriba: para que el logo y el menú se lean sobre cielo */
    linear-gradient(to bottom,
      rgba(18,22,30,.46) 0%,
      rgba(18,22,30,.14) 14%,
      rgba(18,22,30,0) 28%);
}
/* En móvil el texto ocupa todo el ancho, así que el lateral no vale:
   ahí manda el degradado de abajo arriba, más cargado. */
/* En móvil el texto ocupa del 35% al 80% del alto del hero: no queda zona
   limpia que respetar, así que el velo tiene que cubrir casi todo. Medido
   antes: antetítulo 2,3:1 y titular 2,4:1, ilegibles sobre el cielo. */
@media (max-width: 900px) {
  body[data-active="bodas"] .hero::after {
    background:
      linear-gradient(to top,
        rgba(16,20,28,.90) 0%,
        rgba(16,20,28,.86) 22%,
        rgba(16,20,28,.80) 44%,
        rgba(16,20,28,.72) 62%,
        rgba(16,20,28,.60) 78%,
        rgba(16,20,28,.44) 90%,
        rgba(16,20,28,.30) 100%);
  }
  /* Con el velo tan cargado, la foto pide encuadre más cerrado para que la
     pareja siga leyéndose */
  body[data-active="bodas"] .hero .bg-fallback { background-position: 68% bottom; }
}
/* El titular ocupa la mitad izquierda: así no se cruza con la pareja */
@media (min-width: 901px) {
  body[data-active="bodas"] .hero h1 { max-width: 13ch; }
}
/* En móvil el recorte es muy vertical y la pareja queda en el borde:
   se desplaza el encuadre para que entre entera. */
@media (max-width: 900px) {
  body[data-active="bodas"] .hero .bg-fallback { background-position: 72% bottom; }
}


/* La foto tiene el espacio negativo a la izquierda (cielo) y el sujeto a la
   derecha (la pareja). Con el hero a dos columnas, el lede y el botón caían
   justo encima de ellos: 2,5:1 de contraste y la pareja tapada. Aquí el hero
   pasa a una sola columna a la izquierda y la derecha queda para la foto. */
@media (min-width: 901px) {
  body[data-active="bodas"] .hero-inner {
    grid-template-columns: minmax(0, 52ch);
    gap: 0;
  }
  body[data-active="bodas"] .hero .side {
    max-width: 46ch;
    padding-bottom: 0;
    margin-top: var(--sp-5);
  }
  body[data-active="bodas"] .hero .side p { margin-bottom: var(--sp-5); }
  body[data-active="bodas"] .hero h1 { max-width: 15ch; }
}

/* ==========================================================================
   23 · CORRECCIONES DE REVISIÓN (Bodas)
   ========================================================================== */

/* ---- Salones: alinear con el contenido, no con la rejilla a sangre -------
   .gal-grid es un componente pensado para ir a sangre y trae su propio
   padding lateral. Aquí las tarjetas empezaban 40px más adentro que el
   titular de la sección. */
.salones-grid { padding-left: 0; padding-right: 0; max-width: none; margin-inline: 0; }

/* ---- Suites: el texto y la foto estaban demasiado separados -------------- */
.suites-inner { gap: var(--sp-6); align-items: stretch; }
.suites-texto { display: flex; flex-direction: column; justify-content: center; }
.suites-texto p:last-of-type { margin-bottom: 0; }
.suites-foto { min-height: 340px; }
@media (max-width: 900px) {
  .suites-inner { gap: var(--sp-5); }
  .suites-foto { min-height: 260px; }
}

/* ---- Galería mixta en móvil ---------------------------------------------
   Con 2 columnas, las piezas «alta» y «ancha» dejaban huecos en la rejilla.
   En móvil todas pasan a ocupar una celda y las anchas ocupan la fila. */
@media (max-width: 620px) {
  .mix-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 46vw; }
  .mix--alta  { grid-row: span 1; }
  .mix--ancha { grid-column: span 2; grid-row: span 1; }
}
@media (max-width: 400px) {
  .mix-grid { grid-auto-rows: 44vw; }
}

/* ==========================================================================
   24 · CONTACTO
   ========================================================================== */

/* El hero de nivel C va sobre crema, no sobre foto. La regla de style.css:445
   pone los <strong> en blanco porque se escribió para heros oscuros, y aquí
   dejaba «menos de 24 horas laborables» en 1,12:1, o sea invisible. */
body[data-tier="c"] .hero .side p strong { color: var(--ink-90); }

/* Tres vías, tres columnas. La cuarta casilla era «Visitas», que ya tiene su
   propio bloque en Encontrarnos y además contradecía el titular. */
.intro-contacto dl { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .intro-contacto dl { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .intro-contacto dl { grid-template-columns: 1fr; } }

/* ==========================================================================
   26 · RED DE SEGURIDAD TIPOGRÁFICA
   --------------------------------------------------------------------------
   Ha pasado dos veces: un bloque sin regla propia (.cubierto en Cómo
   trabajamos, .salones-cta en el cierre) deja su titular sin estilo, y el
   navegador lo pinta en Supreme negrita. Como es la única sans en negrita del
   sitio, canta a un kilómetro y parece otra tipografía metida a propósito.

   Con esto, lo peor que puede pasar es que un titular salga sin afinar de
   tamaño. Nunca con otra fuente. El selector es de elemento, así que
   cualquier regla con clase lo sigue pisando sin tocar nada.
   ========================================================================== */
h1, h2, h3, h4, h5, h6 { font-family: var(--serif); font-weight: 400; }

/* ==========================================================================
   A · EL REGISTRO
   ========================================================================== */
.pa-muestras { background: var(--bone-05); padding: var(--sp-5) 0 0; margin-bottom: var(--sp-9); }
.pa-muestras .pa-mini { margin-bottom: var(--sp-3); }
.pa-tira {
  list-style: none; margin: 0; padding: 0; display: flex;
  overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
}
.pa-tira::-webkit-scrollbar { display: none; }
.pa-tira li {
  flex: 0 0 170px; height: 220px; scroll-snap-align: start;
  border-right: 1px solid var(--bone-10);
  transition: flex-basis 320ms cubic-bezier(.22, 1, .36, 1);
}
.pa-tira li:hover { flex-basis: 214px; }
.pa-tira picture { display: block; width: 100%; height: 100%; }
.pa-tira img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }

/* La retícula del registro: una sola variable para rótulos y filas, que es lo
   que garantiza que las casillas cuadren en vertical. */
.pa-reg { --reg: 264px 1fr 1.5fr 148px; }
.pa-rot, .pa-fila { display: grid; grid-template-columns: var(--reg); column-gap: var(--sp-7); }
.pa-rot {
  height: 44px; align-items: center;
  border-top: 1px solid var(--ink-90); border-bottom: 1px solid var(--bone-10);
}
.pa-rot span {
  font-family: var(--sans); font-size: 10.5px; font-weight: 500;
  letter-spacing: var(--tr-meta); text-transform: uppercase; color: var(--ink-40);
}
.pa-fila {
  padding: var(--sp-7) 0; min-height: 208px;
  border-bottom: 1px solid var(--bone-10);
  transition: background-color var(--t-fast) var(--e-out);
}
.pa-fila:hover { background: var(--bone-05); }
.pa-fila:hover .pa-n { color: var(--azul); }
.pa-fila:target { box-shadow: inset 2px 0 0 var(--azul); }

.pa-n { display: block; margin-bottom: var(--sp-3);
  font-family: var(--sans); font-size: 11px; font-weight: 500;
  letter-spacing: var(--tr-meta); color: var(--ink-40);
  transition: color var(--t-fast) var(--e-out); }
.pa-nom {
  margin: 0 0 var(--sp-2); font-family: var(--serif); font-weight: 300;
  font-size: clamp(26px, 2.8vw, 36px); line-height: 1.08; letter-spacing: -.02em;
}
.pa-desc {
  font-family: var(--sans); font-size: 12px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-40);
}
/* Los micro-rótulos de celda solo hacen falta cuando la fila de cabecera
   desaparece. En escritorio se duplicaban con ella. */
.pa-c2 .pa-mini, .pa-c3 .pa-mini:first-of-type { display: none; }
@media (max-width: 900px) {
  .pa-c2 .pa-mini, .pa-c3 .pa-mini:first-of-type { display: block; margin-bottom: var(--sp-3); }
}
.pa-firma b {
  display: block; font-family: var(--serif); font-weight: 400;
  font-size: 20px; color: var(--ink-90); margin-bottom: var(--sp-3);
  padding-bottom: var(--sp-3); border-bottom: 1px solid var(--bone-10);
}
.pa-firma span { font-size: 13.5px; line-height: var(--lh-body); color: var(--ink-60); max-width: 34ch; display: block; }
/* La única casilla con caja del módulo: es el único documento formal que existe. */
.pa-firma--cert { border: 1px solid var(--azul); padding: var(--sp-4); }
.pa-firma--cert b { border-bottom-color: var(--bone-20); }

.pa-elige {
  margin: 0 0 var(--sp-5); font-family: var(--serif); font-weight: 400;
  font-size: 19px; line-height: 1.45; color: var(--ink-90); max-width: 30ch;
}
.pa-mini--baja { padding-top: var(--sp-4); border-top: 1px solid var(--bone-10); max-width: 32px; }
.pa-prueba { margin: var(--sp-3) 0 0; font-size: 12px; line-height: 1.6; color: var(--ink-40); }

.pa-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--sans); font-size: 12px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--azul);
  text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px;
}
.pa-link .arrow { transition: transform var(--t-fast) var(--e-out); }
.pa-link:hover .arrow { transform: translateX(4px); }

.pa-comun {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-6);
  border-top: 1px solid var(--ink-90); padding: var(--sp-6) 0; margin-top: 0;
}
.pa-comun p { margin: 0; font-size: var(--fs-sm); color: var(--ink-60); }

.pa-cita { margin: var(--sp-9) 0 0; padding-left: 312px; }
.pa-cita blockquote {
  margin: 0 0 var(--sp-4); font-family: var(--serif); font-weight: 300;
  font-size: 28px; line-height: 1.35; color: var(--ink-90); max-width: 46ch;
}
.pa-cita figcaption {
  font-family: var(--sans); font-size: 12px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-40);
}

@media (max-width: 900px) {
  .pa-rot { display: none; }
  .pa-fila { grid-template-columns: 1fr; gap: var(--sp-5); padding: var(--sp-6) 0; }
  .pa-fila > div { padding-bottom: var(--sp-5); border-bottom: 1px solid var(--bone-10); }
  .pa-fila > div:last-child { border-bottom: 0; padding-bottom: 0; }
  .pa-cita { padding-left: 0; }
  .pa-cita blockquote { font-size: 22px; }
  .pa-comun { flex-direction: column; gap: var(--sp-3); }
  .pa-tira li { flex-basis: 128px; height: 156px; }
  .pa-tira li:hover { flex-basis: 128px; }
}

/* ==========================================================================
   B · LA MESA LARGA
   ========================================================================== */
.pb-cinta { background: var(--bone-05); overflow-x: auto; scrollbar-width: none; margin-bottom: var(--sp-3); }
.pb-cinta::-webkit-scrollbar { display: none; }
.pb-cinta ul { list-style: none; margin: 0; padding: 0; display: flex; min-width: max-content; }
.pb-cinta li { height: 320px; scroll-snap-align: start; }
.pb-cinta picture { display: block; height: 100%; }
/* Alto fijo y ancho automático: así cada plato conserva su proporción real y
   la cinta se lee como una mesa continua, no como una rejilla recortada. */
.pb-cinta img { height: 100%; width: auto; display: block; object-fit: cover; object-position: top; }
.pb-pie {
  margin: 0 0 var(--sp-8); text-align: right;
  font-family: var(--sans); font-size: 11px; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; color: var(--ink-40);
}

.pb-cuadro { display: grid; grid-template-columns: 168px minmax(0, 1fr); }
.pb-rail, .pb-cols > .pb-col { display: grid; grid-template-rows: subgrid; grid-row: span 4; }
.pb-cuadro { grid-template-rows: repeat(4, auto); }
.pb-rail > span {
  display: flex; align-items: flex-start; padding: var(--sp-5) var(--sp-5) var(--sp-5) 0;
  border-top: 1px solid var(--bone-10);
  font-family: var(--sans); font-size: 10.5px; font-weight: 500;
  letter-spacing: var(--tr-meta); text-transform: uppercase; color: var(--ink-40);
}
.pb-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-row: span 4; grid-template-rows: subgrid; }
.pb-celda {
  padding: var(--sp-5) var(--sp-5) var(--sp-5) var(--sp-5);
  border-top: 1px solid var(--bone-10); border-left: 1px solid var(--bone-10);
}
.pb-celda--nom h3 {
  margin: 0 0 var(--sp-3); font-family: var(--serif); font-weight: 300;
  font-size: clamp(22px, 2.2vw, 30px); line-height: 1.1; letter-spacing: -.02em;
}
.pb-desc {
  display: block; padding-top: var(--sp-3); border-top: 1px solid var(--bone-10); max-width: 28px;
  font-family: var(--sans); font-size: 11px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-40);
  max-width: none;
}
.pb-celda--elige p { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 18px; line-height: 1.4; color: var(--ink-90); }
.pb-celda--firma p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink-60); }
.pb-celda--prueba .pb-mini { margin-bottom: var(--sp-3); }
.pb-celda--prueba ul { list-style: none; margin: 0; padding: 0; }
.pb-celda--prueba li {
  font-size: 12.5px; line-height: 1.7; color: var(--ink-60);
  padding-left: 18px; position: relative;
}
.pb-celda--prueba li::before {
  content: ''; position: absolute; left: 0; top: .68em;
  width: 10px; height: 1px; background: var(--bone-20);
}
/* Al pasar por una columna, las otras tres bajan de tono. Nada crece ni se
   mueve: en un cuadro de comparación el movimiento rompe la lectura. */
.pb-cols:hover .pb-col:not(:hover) { color: var(--ink-40); }
.pb-cols:hover .pb-col:not(:hover) h3,
.pb-cols:hover .pb-col:not(:hover) p,
.pb-cols:hover .pb-col:not(:hover) li { color: var(--ink-40); transition: color 160ms var(--e-out); }

.pb-pieCuadro {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-6);
  border-top: 1px solid var(--ink-90); padding: var(--sp-6) 0;
}
.pb-pieCuadro p { margin: 0; font-size: var(--fs-sm); color: var(--ink-60); }

@media (max-width: 900px) {
  .pb-cinta li { height: 210px; }
  /* El cuadro NO se rompe en cuatro fichas: se desliza. La lectura horizontal
     es la razón de ser del módulo y tiene que sobrevivir en móvil. */
  .pb-cuadro { grid-template-columns: 120px minmax(0, 1fr); }
  .pb-cols { overflow-x: auto; scroll-snap-type: x mandatory; grid-template-columns: repeat(4, 78vw); }
  .pb-col { scroll-snap-align: start; }
  .pb-rail { position: sticky; left: 0; z-index: 1; background: var(--bone-00); }
  .pb-pieCuadro { flex-direction: column; gap: var(--sp-4); }
}

/* ==========================================================================
   C · CUATRO FIRMAS
   ========================================================================== */
.pc-indice {
  display: flex; overflow-x: auto; scrollbar-width: none;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  margin-bottom: var(--sp-8);
}
.pc-indice::-webkit-scrollbar { display: none; }
.pc-indice a {
  flex: 1 0 auto; padding: var(--sp-5) var(--sp-6); text-align: center; white-space: nowrap;
  border-right: 1px solid var(--bone-20);
  font-family: var(--sans); font-size: 12px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-60);
  transition: color var(--t-fast) var(--e-out), background-color var(--t-fast) var(--e-out);
}
.pc-indice a:last-child { border-right: 0; }
.pc-indice a:hover { color: var(--azul); background: var(--bone-05); }

.pc-comun { margin: 0 0 var(--sp-8); font-size: var(--fs-lede); line-height: var(--lh-body); color: var(--ink-60); max-width: 46ch; }

/* La espina: un filete vertical que recorre las cuatro bandas sin cortarse.
   Es lo que convierte cuatro bloques en un solo documento. */
.pc-banda { display: grid; grid-template-columns: 7rem minmax(0, 1fr); column-gap: var(--sp-5); }
.pc-esp { border-right: 1px solid var(--bone-20); }
.pc-esp span {
  font-family: var(--sans); font-size: 11px; font-weight: 500;
  letter-spacing: var(--tr-meta); color: var(--ink-40);
  transition: color var(--t-fast) var(--e-out);
}
.pc-banda:target .pc-esp span, .pc-banda:hover .pc-esp span { color: var(--azul); }
.pc-cuerpo { padding: clamp(40px, 6vw, 96px) 0; display: grid; gap: var(--sp-6); }
.pc-cab { max-width: 52ch; }
.pc-nom {
  margin: 0 0 var(--sp-2); font-family: var(--serif); font-weight: 300;
  font-size: clamp(30px, 3.4vw, 46px); line-height: 1.05; letter-spacing: -.025em;
}
.pc-desc {
  display: block; margin-bottom: var(--sp-5);
  font-family: var(--sans); font-size: 12px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-40);
}
.pc-elige { margin: var(--sp-2) 0 0; font-size: 15px; line-height: 1.55; color: var(--ink-90); max-width: 52ch; }

/* El artefacto propio de cada banda */
.pc-decl { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: var(--sp-5) 0; max-width: 46ch; }
.pc-decl p { margin: 0 0 var(--sp-3); font-family: var(--serif); font-weight: 300; font-size: clamp(20px, 2vw, 26px); line-height: 1.3; }
.pc-meta { display: grid; gap: var(--sp-2); border-top: 1px solid var(--line); padding-top: var(--sp-4); max-width: 38ch; }
.pc-meta span {
  font-family: var(--sans); font-size: 11px; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; color: var(--azul);
}
.pc-comp { list-style: none; margin: 0; padding: 0; max-width: 34ch; }
.pc-comp li { padding: var(--sp-3) 0; border-top: 1px solid var(--bone-10); font-size: 14px; color: var(--ink-60); }
.pc-cita { margin: 0; padding-left: clamp(0px, 4vw, 64px); }
.pc-cita blockquote { margin: 0 0 var(--sp-3); font-family: var(--serif); font-weight: 400; font-size: clamp(22px, 2.4vw, 30px); line-height: 1.3; max-width: 42ch; }
.pc-cita figcaption { font-family: var(--sans); font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-40); }
.pc-cert { border: 1px solid var(--azul); padding: var(--sp-5); max-width: 40ch; }
.pc-cert-t { display: block; font-family: var(--sans); font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-90); }
.pc-cert-s { display: block; margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--bone-20); font-size: 14px; color: var(--ink-60); }
.pc-celebra { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--sp-6); max-width: 46ch; }
.pc-celebra li { padding: var(--sp-3) 0; border-top: 1px solid var(--bone-10); font-size: 15px; color: var(--ink-90); }
.pc-pie { margin: 0; font-size: 12px; color: var(--ink-40); }
.pc-pie .pc-mini { display: inline; margin-right: var(--sp-3); }

.pc-coda { background: var(--bone-05); padding: var(--sp-9) 0; margin-top: var(--sp-9); }
.pc-coda-t { margin: 0 0 var(--sp-7); font-family: var(--serif); font-weight: 300; font-size: 26px; }
.pc-coda-tira {
  list-style: none; margin: 0 0 var(--sp-5); padding: 0 var(--sp-6);
  display: flex; align-items: flex-end; gap: var(--sp-7);
  overflow-x: auto; scrollbar-width: none; justify-content: center;
}
.pc-coda-tira::-webkit-scrollbar { display: none; }
.pc-coda-tira li { flex: 0 0 auto; height: 300px; }
.pc-coda-tira picture { display: block; height: 100%; }
/* contain, no cover: en la coda los platos se ven enteros, no recortados. */
.pc-coda-tira img { height: 100%; width: auto; display: block; object-fit: contain; }

@media (max-width: 900px) {
  .pc-banda { grid-template-columns: 3rem minmax(0, 1fr); column-gap: var(--sp-4); }
  .pc-indice { position: sticky; top: 56px; z-index: 5; background: var(--bone-00); }
  .pc-indice a { flex: 0 0 auto; padding: var(--sp-4) var(--sp-5); }
  .pc-celebra { grid-template-columns: 1fr; }
  .pc-cita { padding-left: var(--sp-4); }
  .pc-coda-tira { justify-content: flex-start; }
  .pc-coda-tira li { height: 200px; }
}

/* ==========================================================================
   29 · PRELOADER SIMPLIFICADO
   --------------------------------------------------------------------------
   Tenía cinco elementos (antetítulo, contador arriba, logo, «MMXXVI · Madrid»
   y barra abajo repartidos en tres filas). Se queda en tres, centrados: logo,
   barra y porcentaje.

   La opacidad del logo la escribe el JS en --pl-op según la carga real, así
   que el logo es el indicador principal y la barra solo lo confirma.
   ========================================================================== */

.pre-inner {
  grid-template-rows: auto auto;
  align-content: center; justify-items: center;
  gap: var(--sp-8);
  padding: var(--sp-8) var(--gutter);
}

.pre-logo {
  /* Fuera la animación de entrada: ahora la opacidad la manda el progreso. */
  animation: none;
  transform: none;
  opacity: var(--pl-op, .12);
  transition: opacity 140ms linear;
}
.pre-logo img { width: clamp(180px, 20vw, 280px); }

.pre-bottom {
  flex-direction: row; align-items: center; justify-content: center;
  gap: var(--sp-4);
}
.pre-bar { flex: none; width: clamp(160px, 24vw, 260px); max-width: none; }
.pre-count {
  color: rgba(255, 255, 255, .72);
  font-size: 11px; letter-spacing: .16em;
  min-width: 4ch; text-align: right;
}

@media (max-width: 720px) {
  .pre-bottom { flex-direction: row; align-items: center; gap: var(--sp-4); }
  .pre-bar { width: 180px; }
}
@media (prefers-reduced-motion: reduce) {
  .pre-logo { opacity: 1; transition: none; }
}

/* ==========================================================================
   31 · GASTRONOMÍA · arquitectura Scalaura con estilo Retamares
   --------------------------------------------------------------------------
   Seis secciones y cero dependencias. Lo que en la plantilla hace GSAP aquí
   lo hacen: keyframes (marquesina), IntersectionObserver (entradas, ya
   existía) y animation-timeline bajo @supports (paralaje del hero).
   ========================================================================== */

.prov-aviso {
  position: relative; z-index: 3;
  background: #FBF4D8; border-bottom: 1px solid #E8D9A0;
  padding: 10px var(--gutter); text-align: center;
  font-family: var(--sans); font-size: 12px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: #6B5A1E;
}
.prov {
  margin: 0 0 var(--sp-6); padding: var(--sp-3) var(--sp-4);
  background: #FBF4D8; border-left: 2px solid #D8C475;
  font-size: 13px; color: #6B5A1E;
}

/* ---- 01 · Hero a sangre ------------------------------------------------- */
.gh {
  position: relative; isolation: isolate;
  min-height: 92vh; display: flex; align-items: flex-end;
  padding: var(--sp-9) 0 var(--sp-8); overflow: hidden;
  color: var(--bone-00);
}
.gh-media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.gh-media picture { display: block; width: 100%; height: 100%; }
.gh-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Paralaje sin JS. Donde no hay soporte simplemente no se mueve. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    @keyframes ghDeriva { from { transform: scale(1.12) translateY(-2%); } to { transform: scale(1.12) translateY(4%); } }
    .gh-media img { animation: ghDeriva linear both; animation-timeline: view(); }
  }
}
.gh-velo {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, rgba(18,26,38,.86) 0%, rgba(18,26,38,.36) 44%, rgba(18,26,38,.04) 74%),
    linear-gradient(to top right, rgba(18,26,38,.5) 0%, rgba(18,26,38,0) 58%),
    linear-gradient(rgba(40,61,92,.18), rgba(40,61,92,.18));
}
.gh-in { position: relative; z-index: 1; width: 100%; }
.gh-eyebrow {
  display: block; margin-bottom: var(--sp-5);
  font-family: var(--sans); font-size: var(--fs-meta); font-weight: 500;
  letter-spacing: var(--tr-meta); text-transform: uppercase; color: rgba(251,248,243,.72);
}
.gh-tit {
  margin: 0 0 var(--sp-9); max-width: 18ch;
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(38px, 5.6vw, 86px); line-height: 1.02; letter-spacing: -.03em;
}
.gh-tit em { font-style: normal; color: rgba(251,248,243,.62); }
.gh-pie { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-6); flex-wrap: wrap; }
.gh-minis { list-style: none; display: flex; gap: var(--sp-3); margin: 0; padding: 0; }
.gh-minis li {
  width: 92px; height: 116px; overflow: hidden;
  border: 1px solid rgba(251,248,243,.28);
}
.gh-minis picture { display: block; width: 100%; height: 100%; }
.gh-minis img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gh-firma { text-align: right; }
.gh-firma span {
  display: block; font-family: var(--sans); font-size: var(--fs-meta); font-weight: 500;
  letter-spacing: var(--tr-meta); text-transform: uppercase; color: rgba(251,248,243,.6);
}
.gh-firma b {
  font-family: var(--serif); font-weight: 300; font-size: clamp(20px, 2vw, 28px);
  color: var(--bone-00);
}
/* La tarjeta flotante de la plantilla, en versión Retamares: filete, no sombra. */
.gh-tarjeta {
  position: absolute; z-index: 2; top: var(--sp-9); right: var(--gutter);
  width: min(300px, 40vw); padding: var(--sp-5);
  background: rgba(251,248,243,.94); color: var(--ink-90);
  border: 1px solid rgba(251,248,243,.5);
}
.gh-tarjeta-k {
  display: block; margin-bottom: var(--sp-3);
  font-family: var(--sans); font-size: var(--fs-meta); font-weight: 500;
  letter-spacing: var(--tr-meta); text-transform: uppercase; color: var(--azul);
}
.gh-tarjeta p { margin: 0 0 var(--sp-4); font-size: var(--fs-sm); line-height: var(--lh-body); color: var(--ink-60); }
.gh-tarjeta-b {
  display: inline-flex; align-items: center; gap: 8px;
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--sans); font-size: 12px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--azul);
  text-decoration: underline; text-underline-offset: 6px;
}
.gh-tarjeta-b .arrow { transition: transform var(--t-fast) var(--e-out); }
.gh-tarjeta-b:hover .arrow { transform: translateX(4px); }
@media (max-width: 900px) {
  .gh { min-height: 86vh; }
  .gh-tarjeta { position: static; width: auto; margin: var(--sp-6) var(--gutter) 0; }
  .gh-tit { margin-bottom: var(--sp-7); }
  .gh-minis li { width: 72px; height: 92px; }
  .gh-firma { text-align: left; }
}

/* ---- 02 · Marquesina ---------------------------------------------------- */
.marq { padding: var(--sp-7) 0; border-bottom: 1px solid var(--line); overflow: hidden; }
.marq-rotulo {
  margin: 0 0 var(--sp-5);
  font-family: var(--sans); font-size: var(--fs-meta); font-weight: 500;
  letter-spacing: var(--tr-meta); text-transform: uppercase; color: var(--ink-40);
}
/* Dos listas idénticas desplazándose el 50%: el bucle no tiene costura. */
.marq-tira { display: flex; width: max-content; animation: marqCorre 42s linear infinite; }
.marq-tira:hover { animation-play-state: paused; }
@keyframes marqCorre { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .marq-tira { animation: none; }
  .marq { overflow-x: auto; }
}
.marq-lista { list-style: none; display: flex; margin: 0; padding: 0; }
.marq-lista li { padding: 0 var(--sp-8); border-right: 1px solid var(--bone-20); }
.marq-logo {
  font-family: var(--serif); font-weight: 300; font-size: clamp(20px, 2vw, 28px);
  line-height: 1; white-space: nowrap; color: var(--ink-40);
  transition: color var(--t-base) var(--e-out);
}
.marq-lista li:hover .marq-logo { color: var(--azul); }

/* ---- 03 · Declaración + Instagram --------------------------------------- */
.decl-wrap { background: var(--bone-05); }
.decl { display: grid; gap: var(--sp-8); }
@media (min-width: 941px) { .decl { grid-template-columns: 1.5fr 1fr; gap: var(--sp-10); align-items: start; } }
.decl-mini {
  margin: 0 0 var(--sp-4);
  font-family: var(--sans); font-size: var(--fs-meta); font-weight: 500;
  letter-spacing: var(--tr-meta); text-transform: uppercase; color: var(--ink-40);
}
.decl-tit {
  margin: 0 0 var(--sp-6);
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(28px, 3.6vw, 54px); line-height: 1.1; letter-spacing: -.025em;
  max-width: 20ch;
}
.decl-p { margin: 0; font-size: var(--fs-lede); line-height: var(--lh-body); color: var(--ink-60); max-width: 48ch; }

.decl-ig { background: #fff; border: 1px solid var(--line); padding: var(--sp-5); }
.decl-ig-cab { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.decl-ig-ico {
  width: 38px; height: 38px; flex: none; color: var(--azul);
  border: 1px solid var(--line); display: grid; place-items: center;
}
.decl-ig-ico svg { width: 20px; height: 20px; }
.decl-ig-txt b { display: block; font-family: var(--sans); font-size: 14px; font-weight: 500; color: var(--ink-90); }
.decl-ig-txt span { font-size: 12px; color: var(--ink-40); }
.decl-ig-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.decl-ig-grid a { display: block; aspect-ratio: 1; overflow: hidden; }
.decl-ig-grid picture { display: block; width: 100%; height: 100%; }
.decl-ig-grid img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform var(--t-base) var(--e-out), filter var(--t-base) var(--e-out);
}
.decl-ig-grid a:hover img { transform: scale(1.06); filter: brightness(.92); }

/* ---- 04 · Mosaico de platos --------------------------------------------
   Cuatro formas y colocación explícita: ancha 2×1, grande 2×2, alta 1×2 y
   chica 1×1. El módulo de cuatro filas se repite dos veces. */
.mo {
  display: grid; grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: clamp(200px, 20vw, 288px); gap: var(--sp-4);
}
.mo-b { position: relative; overflow: hidden; min-width: 0; margin: 0; cursor: zoom-in; background: var(--bone-10); }
.mo-b picture { display: block; width: 100%; height: 100%; }
.mo-b img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 900ms var(--e-soft);
}
.mo-b:hover img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) { .mo-b:hover img { transform: none; } }

.mo-b1  { grid-column: 1 / 3; grid-row: 1; }
.mo-b2  { grid-column: 3 / 5; grid-row: 1; }
.mo-b3  { grid-column: 1 / 3; grid-row: 2; }
.mo-b4  { grid-column: 3 / 5; grid-row: 2 / 4; }
.mo-b5  { grid-column: 1;     grid-row: 3 / 5; }
.mo-b6  { grid-column: 2;     grid-row: 3; }
.mo-b7  { grid-column: 2;     grid-row: 4; }
.mo-b8  { grid-column: 3 / 5; grid-row: 4; }
.mo-b9  { grid-column: 1 / 3; grid-row: 5; }
.mo-b10 { grid-column: 3 / 5; grid-row: 5; }
.mo-b11 { grid-column: 1 / 3; grid-row: 6; }
.mo-b12 { grid-column: 3 / 5; grid-row: 6 / 8; }
.mo-b13 { grid-column: 1;     grid-row: 7 / 9; }
.mo-b14 { grid-column: 2;     grid-row: 7; }
.mo-b15 { grid-column: 2;     grid-row: 8; }
.mo-b16 { grid-column: 3 / 5; grid-row: 8; }

/* En dos columnas NADA ocupa dos: una pieza ancha obliga a esperar a que las
   dos queden libres y `dense` acaba dejando el hueco al final. */
@media (max-width: 1100px) {
  .mo {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: clamp(112px, 26vw, 300px);
    grid-auto-flow: row dense; gap: var(--sp-3);
  }
  .mo-b { grid-column: span 1; grid-row: span 1; }
  .mo-b4, .mo-b12, .mo-b5, .mo-b13 { grid-row: span 2; }
}

/* ---- 05 · Las cuatro líneas -------------------------------------------- */
.lx-set { display: grid; gap: 0; border-top: 1px solid var(--line); }
.lx {
  display: grid; gap: var(--sp-3);
  padding: var(--sp-7) 0; border-bottom: 1px solid var(--line);
  transition: background-color var(--t-fast) var(--e-out);
}
@media (min-width: 861px) { .lx { grid-template-columns: 64px 300px minmax(0, 1fr); gap: var(--sp-7); align-items: baseline; } }
.lx:hover { background: var(--bone-05); }
.lx:hover .lx-n { color: var(--azul); }
.lx-n {
  font-family: var(--sans); font-size: 11px; font-weight: 500;
  letter-spacing: var(--tr-meta); color: var(--ink-40);
  transition: color var(--t-fast) var(--e-out);
}
.lx h3 {
  margin: 0; font-family: var(--serif); font-weight: 300;
  font-size: clamp(26px, 2.8vw, 38px); line-height: 1.05; letter-spacing: -.02em;
}
.lx-tag {
  font-family: var(--sans); font-size: var(--fs-meta); font-weight: 500;
  letter-spacing: var(--tr-meta); text-transform: uppercase; color: var(--ink-40);
}
@media (min-width: 861px) { .lx-tag { grid-column: 2; } .lx p { grid-column: 3; grid-row: 1 / 3; } }
.lx p { margin: 0; font-size: var(--fs-sm); line-height: var(--lh-body); color: var(--ink-60); max-width: 52ch; }

/* ---- 06 · Reconocimientos ---------------------------------------------- */
.pr-wrap { background: var(--bone-05); }
.pr { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.pr-item {
  display: grid; gap: var(--sp-2);
  padding: var(--sp-6) 0; border-bottom: 1px solid var(--line);
}
@media (min-width: 721px) { .pr-item { grid-template-columns: 100px minmax(0, 1fr) auto; gap: var(--sp-6); align-items: baseline; } }
.pr-anio { font-family: var(--sans); font-size: 12px; font-weight: 500; letter-spacing: .18em; color: var(--ink-40); }
.pr-tit { font-family: var(--serif); font-weight: 300; font-size: clamp(20px, 2.2vw, 30px); line-height: 1.1; color: var(--ink-90); }
.pr-cat { font-size: var(--fs-sm); color: var(--ink-60); }

/* ==========================================================================
   32 · BIBLIOTECA · HEADERS (H1-H6)
   --------------------------------------------------------------------------
   Seis maneras de abrir una página. La escala tipográfica sube respecto al
   resto del sitio a propósito: el reproche era que los heros salían tímidos,
   y un titular de apertura tiene que mandar sobre todo lo demás.
   ========================================================================== */

.hd { position: relative; isolation: isolate; }
.hd-k {
  display: block; margin-bottom: var(--sp-4);
  font-family: var(--sans); font-size: var(--fs-meta); font-weight: 500;
  letter-spacing: var(--tr-meta); text-transform: uppercase;
}
.hd-t {
  margin: 0; font-family: var(--serif); font-weight: 300;
  line-height: .98; letter-spacing: -.035em;
  font-size: clamp(40px, 6.6vw, 104px);
}

/* ---- H1 · a sangre ------------------------------------------------------ */
.hd1 {
  min-height: 88vh; display: flex; align-items: flex-end;
  padding: var(--sp-9) 0 var(--sp-8); overflow: hidden; color: var(--bone-00);
}
.hd1 .hd-media { position: absolute; inset: 0; z-index: -2; }
.hd1 .hd-media picture { display: block; width: 100%; height: 100%; }
.hd1 .hd-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hd1 .hd-velo {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, rgba(16,22,32,.9) 0%, rgba(16,22,32,.4) 46%, rgba(16,22,32,.05) 78%),
    linear-gradient(rgba(40,61,92,.2), rgba(40,61,92,.2));
}
.hd1 .hd-in { position: relative; width: 100%; }
.hd1 .hd-k { color: rgba(251,248,243,.72); }
.hd1 .hd-t { max-width: 16ch; }
.hd1 .hd-pie {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--sp-7); margin-top: var(--sp-7); flex-wrap: wrap;
}
.hd1 .hd-pie p { margin: 0; max-width: 42ch; font-size: var(--fs-lede); line-height: var(--lh-body); color: rgba(251,248,243,.86); }

/* ---- H2 · partido ------------------------------------------------------- */
/* A pantalla completa en escritorio; en móvil se apila y manda el contenido. */
.hd2 { display: grid; min-height: 78vh; }
@media (min-width: 901px) { .hd2 { min-height: 100vh; } }
@media (min-width: 901px) { .hd2 { grid-template-columns: 1fr 1fr; } }
.hd2-txt {
  background: var(--bone-05);
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--sp-9) clamp(var(--gutter), 5vw, 88px);
}
.hd2-txt .hd-k { color: var(--azul); }
.hd2-txt .hd-t { font-size: clamp(38px, 4.6vw, 76px); max-width: 12ch; }
.hd2-txt p { margin: var(--sp-6) 0 var(--sp-7); max-width: 40ch; font-size: var(--fs-lede); line-height: var(--lh-body); color: var(--ink-60); }
.hd2-txt .btn { align-self: flex-start; }
.hd2-media { min-height: 46vh; overflow: hidden; }
.hd2-media picture { display: block; width: 100%; height: 100%; }
.hd2-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- H4 · con índice ---------------------------------------------------- */
.hd4 { background: var(--bone-00); padding: var(--sp-10) 0 var(--sp-9); border-bottom: 1px solid var(--line); }
.hd4-in { display: grid; gap: var(--sp-8); }
@media (min-width: 941px) { .hd4-in { grid-template-columns: 1.5fr 1fr; gap: var(--sp-10); align-items: end; } }
.hd4 .hd-k { color: var(--azul); }
.hd4 .hd-t { font-size: clamp(38px, 5.2vw, 84px); }
.hd4-in > div > p { margin: var(--sp-6) 0 0; max-width: 42ch; font-size: var(--fs-lede); line-height: var(--lh-body); color: var(--ink-60); }
.hd4-idx ol { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.hd4-idx a {
  display: flex; align-items: baseline; gap: var(--sp-4);
  padding: var(--sp-4) 0; border-bottom: 1px solid var(--line);
  font-family: var(--serif); font-weight: 300; font-size: 22px; color: var(--ink-90);
  transition: color var(--t-fast) var(--e-out), padding-left var(--t-base) var(--e-out);
}
.hd4-idx a span { font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: var(--tr-meta); color: var(--ink-40); }
.hd4-idx a:hover { color: var(--azul); padding-left: var(--sp-3); }
.hd4-idx a:hover span { color: var(--azul); }

@media (max-width: 900px) {
  .hd1 { min-height: 78vh; }
  .hd1 .hd-pie { flex-direction: column; align-items: flex-start; gap: var(--sp-5); }
}

/* ==========================================================================
   33 · BIBLIOTECA · GALERÍAS (G1-G5)
   ========================================================================== */

/* ---- G1 · mosaico ------------------------------------------------------- */
.g1 {
  display: grid; grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: clamp(200px, 20vw, 288px); gap: var(--sp-4);
}
.g1-b { position: relative; overflow: hidden; min-width: 0; margin: 0; cursor: zoom-in; background: var(--bone-10); }
.g1-b picture { display: block; width: 100%; height: 100%; }
.g1-b img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 900ms var(--e-soft); }
.g1-b:hover img { transform: scale(1.04); }
.g1-b1 { grid-column: 1 / 3; grid-row: 1; }
.g1-b2 { grid-column: 3 / 5; grid-row: 1; }
.g1-b3 { grid-column: 1 / 3; grid-row: 2; }
.g1-b4 { grid-column: 3 / 5; grid-row: 2 / 4; }
.g1-b5 { grid-column: 1;     grid-row: 3 / 5; }
.g1-b6 { grid-column: 2;     grid-row: 3; }
.g1-b7 { grid-column: 2;     grid-row: 4; }
.g1-b8 { grid-column: 3 / 5; grid-row: 4; }
/* En dos columnas nada ocupa dos: una pieza ancha obliga a esperar a que las
   dos queden libres y `dense` acaba dejando el hueco al final. */
@media (max-width: 1100px) {
  .g1 { grid-template-columns: repeat(2, 1fr); grid-auto-rows: clamp(112px, 26vw, 300px); grid-auto-flow: row dense; gap: var(--sp-3); }
  .g1-b { grid-column: span 1; grid-row: span 1; }
  .g1-b4, .g1-b5 { grid-row: span 2; }
}

/* ---- G2 · tira a sangre ------------------------------------------------- */
.g2-wrap { padding: var(--sp-8) 0; }
.g2 { background: var(--bone-05); overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; }
.g2::-webkit-scrollbar { display: none; }
.g2 ul { list-style: none; margin: 0; padding: 0; display: flex; width: max-content; }
.g2 li { height: clamp(220px, 26vw, 340px); scroll-snap-align: center; }
.g2 picture { display: block; height: 100%; }
/* Alto fijo y ancho automático: cada plato conserva su proporción real y la
   cinta se lee continua, no como una rejilla recortada. */
.g2 img { height: 100%; width: auto; display: block; }
.g2-pie {
  margin: var(--sp-4) 0 0; text-align: right;
  font-family: var(--sans); font-size: 11px; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; color: var(--ink-60);
}

/* ---- G3 · rejilla uniforme --------------------------------------------- */
.g3 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); }
@media (max-width: 700px) { .g3 { grid-template-columns: repeat(2, 1fr); } }
.g3 figure { margin: 0; aspect-ratio: 1; overflow: hidden; background: var(--bone-10); cursor: zoom-in; }
.g3 picture { display: block; width: 100%; height: 100%; }
.g3 img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 700ms var(--e-soft), opacity var(--t-base) var(--e-out);
}
/* Al entrar en la rejilla las demás bajan de tono: destaca sin mover nada. */
.g3:hover figure:not(:hover) img { opacity: .42; }
.g3 figure:hover img { transform: scale(1.05); }
@media (prefers-reduced-motion: reduce) {
  .g3:hover figure:not(:hover) img { opacity: 1; }
  .g3 figure:hover img, .g1-b:hover img { transform: none; }
}


/* ==========================================================================
   34 · BIBLIOTECA · TESTIMONIOS (T1-T4)
   ========================================================================== */

/* ---- T2 · tres en fila -------------------------------------------------- */
.t2 { display: grid; gap: 0; border-top: 1px solid var(--line); }
@media (min-width: 861px) { .t2 { grid-template-columns: repeat(3, 1fr); gap: var(--sp-8); } }
.t2-item { margin: 0; padding: var(--sp-7) 0; border-bottom: 1px solid var(--line); }
@media (min-width: 861px) { .t2-item { border-bottom: 0; } }
.t2-item blockquote {
  margin: 0 0 var(--sp-5); font-family: var(--serif); font-weight: 300;
  font-size: clamp(20px, 1.9vw, 26px); line-height: 1.3; color: var(--ink-90);
}
.t2-item figcaption b { display: block; font-family: var(--sans); font-size: 14px; font-weight: 500; color: var(--ink-90); }
.t2-item figcaption span {
  font-family: var(--sans); font-size: var(--fs-meta); font-weight: 500;
  letter-spacing: var(--tr-meta); text-transform: uppercase; color: var(--ink-60);
}
.t2-pie { margin: var(--sp-6) 0 0; padding-top: var(--sp-5); border-top: 1px solid var(--line); font-size: 12px; color: var(--ink-60); }



/* ---- T4 · con nota global ---------------------------------------------- */
.t4-wrap { background: var(--bone-05); }
.t4 { display: grid; gap: var(--sp-8); }
@media (min-width: 941px) { .t4 { grid-template-columns: 300px minmax(0, 1fr); gap: var(--sp-10); align-items: start; } }
.t4-cifra {
  display: block; font-family: var(--serif); font-weight: 300;
  font-size: clamp(72px, 9vw, 132px); line-height: .86; letter-spacing: -.04em; color: var(--azul);
}
.t4-sobre { display: block; margin-top: var(--sp-2); font-family: var(--serif); font-size: 22px; color: var(--ink-60); }
.t4-meta {
  display: block; margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--line);
  font-family: var(--sans); font-size: var(--fs-meta); font-weight: 500;
  letter-spacing: var(--tr-meta); text-transform: uppercase; color: var(--ink-60);
}
.t4-citas { list-style: none; margin: 0; padding: 0; }
.t4-citas li { padding: var(--sp-5) 0; border-top: 1px solid var(--line); }
.t4-citas li:last-child { border-bottom: 1px solid var(--line); }
.t4-citas blockquote { margin: 0 0 var(--sp-3); font-family: var(--serif); font-weight: 300; font-size: clamp(19px, 1.8vw, 24px); line-height: 1.35; color: var(--ink-90); }
.t4-citas cite {
  font-style: normal; font-family: var(--sans); font-size: var(--fs-meta); font-weight: 500;
  letter-spacing: var(--tr-meta); text-transform: uppercase; color: var(--ink-60);
}

/* ==========================================================================
   35 · BIBLIOTECA · CONTENIDOS (C1-C5)
   ========================================================================== */

/* ---- C1 · texto y foto alternados --------------------------------------- */
.c1 { display: grid; gap: var(--sp-9); }
.c1-fila { display: grid; gap: var(--sp-6); align-items: center; }
@media (min-width: 901px) {
  .c1-fila { grid-template-columns: 1.1fr 1fr; gap: var(--sp-9); }
  /* Invertir con `order` y no reordenando el HTML: el orden de lectura se
     mantiene para quien navega con teclado o lector de pantalla. */
  .c1-fila--inv .c1-media { order: 2; }
}
.c1-media { overflow: hidden; aspect-ratio: 4 / 3; }
.c1-media picture { display: block; width: 100%; height: 100%; }
.c1-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.c1-k {
  display: block; margin-bottom: var(--sp-3);
  font-family: var(--sans); font-size: var(--fs-meta); font-weight: 500;
  letter-spacing: var(--tr-meta); text-transform: uppercase; color: var(--azul);
}
.c1-txt h3 {
  margin: 0 0 var(--sp-4); font-family: var(--serif); font-weight: 300;
  font-size: clamp(28px, 3.2vw, 46px); line-height: 1.06; letter-spacing: -.025em;
}
.c1-txt p { margin: 0; font-size: var(--fs-lede); line-height: var(--lh-body); color: var(--ink-60); max-width: 42ch; }

/* ---- C2 · declaración --------------------------------------------------- */
.c2-wrap { background: var(--bone-05); }
.c2 { max-width: 24ch; }
.c2-k {
  margin: 0 0 var(--sp-6);
  font-family: var(--sans); font-size: var(--fs-meta); font-weight: 500;
  letter-spacing: var(--tr-meta); text-transform: uppercase; color: var(--ink-60);
}
.c2-t {
  margin: 0 0 var(--sp-7); font-family: var(--serif); font-weight: 300;
  font-size: clamp(28px, 4vw, 62px); line-height: 1.12; letter-spacing: -.03em; color: var(--ink-90);
  max-width: none;
}
.c2-firma {
  margin: 0; padding-top: var(--sp-5); border-top: 1px solid var(--line);
  font-family: var(--sans); font-size: var(--fs-meta); font-weight: 500;
  letter-spacing: var(--tr-meta); text-transform: uppercase; color: var(--ink-60);
}

/* ---- C3 · texto con ficha de datos -------------------------------------- */
.c3 { display: grid; gap: var(--sp-8); }
@media (min-width: 941px) { .c3 { grid-template-columns: 1.2fr 1fr; gap: var(--sp-10); align-items: start; } }
.c3-k {
  display: block; margin-bottom: var(--sp-3);
  font-family: var(--sans); font-size: var(--fs-meta); font-weight: 500;
  letter-spacing: var(--tr-meta); text-transform: uppercase; color: var(--azul);
}
.c3-txt h3 { margin: 0 0 var(--sp-5); font-family: var(--serif); font-weight: 300; font-size: clamp(26px, 2.8vw, 40px); line-height: 1.08; letter-spacing: -.02em; }
.c3-txt p { margin: 0; font-size: var(--fs-sm); line-height: var(--lh-body); color: var(--ink-60); max-width: 46ch; }
.c3-datos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; margin: 0; border-top: 1px solid var(--line); }
.c3-datos > div { padding: var(--sp-5) 0; border-bottom: 1px solid var(--line); }
.c3-datos > div:nth-child(odd) { padding-right: var(--sp-5); }
.c3-datos dt {
  margin-bottom: var(--sp-2);
  font-family: var(--sans); font-size: var(--fs-meta); font-weight: 500;
  letter-spacing: var(--tr-meta); text-transform: uppercase; color: var(--ink-60);
}
.c3-datos dd { margin: 0; font-family: var(--serif); font-weight: 300; font-size: clamp(24px, 2.4vw, 34px); line-height: 1; color: var(--ink-90); }
.c3-datos small { display: block; margin-top: 6px; font-family: var(--sans); font-size: 12px; color: var(--ink-60); }

/* ---- C4 · lista numerada ------------------------------------------------ */
.c4 { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
@media (min-width: 861px) { .c4 { grid-template-columns: repeat(2, 1fr); column-gap: var(--sp-9); } }
.c4-item { padding: var(--sp-7) 0; border-bottom: 1px solid var(--line); }
.c4-n {
  display: block; margin-bottom: var(--sp-4);
  font-family: var(--serif); font-weight: 300; font-size: clamp(40px, 4.4vw, 68px);
  line-height: .9; letter-spacing: -.03em; color: var(--azul);
}
.c4-item h3 { margin: 0 0 var(--sp-3); font-family: var(--serif); font-weight: 400; font-size: var(--fs-h3); line-height: var(--lh-snug); }
.c4-item p { margin: 0; font-size: var(--fs-sm); line-height: var(--lh-body); color: var(--ink-60); max-width: 38ch; }

/* ---- C5 · banda oscura con cifras --------------------------------------- */
.c5-wrap { background: var(--ink-90); color: var(--bone-00); padding: clamp(56px, 8vw, 104px) 0; }
.c5 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-7); }
@media (min-width: 761px) { .c5 { grid-template-columns: repeat(4, 1fr); gap: var(--sp-6); } }
.c5-n {
  display: block; font-family: var(--serif); font-weight: 300;
  font-size: clamp(48px, 6vw, 92px); line-height: .88; letter-spacing: -.04em;
}
.c5-t {
  display: block; margin-top: var(--sp-3); padding-top: var(--sp-3);
  border-top: 1px solid rgba(251,248,243,.24);
  font-family: var(--sans); font-size: var(--fs-meta); font-weight: 500;
  letter-spacing: var(--tr-meta); text-transform: uppercase; color: rgba(251,248,243,.72);
}

/* ==========================================================================
   36 · BIBLIOTECA · REDES (R1-R3) Y CONTACTO (K1-K3)
   ========================================================================== */

/* ---- R1 · rejilla con perfil -------------------------------------------- */
.r1-cab { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5); margin-bottom: var(--sp-6); flex-wrap: wrap; }
.r1-perfil { display: flex; align-items: center; gap: var(--sp-4); }
.r1-ico { width: 46px; height: 46px; flex: none; color: var(--azul); border: 1px solid var(--line); display: grid; place-items: center; }
.r1-ico svg { width: 22px; height: 22px; }
.r1-perfil b { display: block; font-family: var(--sans); font-size: 16px; font-weight: 500; color: var(--ink-90); }
.r1-perfil span span { font-size: 13px; color: var(--ink-60); }
.r1-seguir {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--sans); font-size: 12px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--azul);
  text-decoration: underline; text-underline-offset: 6px;
}
.r1-seguir .arrow { transition: transform var(--t-fast) var(--e-out); }
.r1-seguir:hover .arrow { transform: translateX(4px); }
.r1-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
@media (min-width: 861px) { .r1-grid { grid-template-columns: repeat(3, 1fr); max-width: 700px; } }
.r1-grid a { display: block; aspect-ratio: 1; overflow: hidden; background: var(--bone-10); }
.r1-grid picture { display: block; width: 100%; height: 100%; }
.r1-grid img, .r2 img, .r3-fotos img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform var(--t-base) var(--e-out), filter var(--t-base) var(--e-out);
}
.r1-grid a:hover img { transform: scale(1.06); filter: brightness(.9); }

/* ---- R2 · tira a sangre ------------------------------------------------- */
.r2-wrap { padding: var(--sp-8) 0; }
.r2-cab { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-5); margin-bottom: var(--sp-5); }
.r2-rot { font-family: var(--sans); font-size: var(--fs-meta); font-weight: 500; letter-spacing: var(--tr-meta); text-transform: uppercase; color: var(--ink-60); }
.r2 { overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; }
.r2::-webkit-scrollbar { display: none; }
.r2 ul { list-style: none; margin: 0; padding: 0 var(--gutter); display: flex; gap: var(--sp-3); width: max-content; }
.r2 li { flex: 0 0 220px; scroll-snap-align: start; }
.r2 a { display: block; aspect-ratio: 1; overflow: hidden; background: var(--bone-10); }
.r2 picture { display: block; width: 100%; height: 100%; }
.r2 a:hover img { transform: scale(1.06); }

/* ---- R3 · banda oscura compacta ---------------------------------------- */
.r3-wrap { background: var(--ink-90); color: var(--bone-00); padding: clamp(48px, 6vw, 80px) 0; }
.r3 { display: grid; gap: var(--sp-6); align-items: center; }
@media (min-width: 861px) { .r3 { grid-template-columns: 1fr 1.2fr; gap: var(--sp-8); } }
.r3-k { display: block; margin-bottom: var(--sp-3); font-family: var(--sans); font-size: var(--fs-meta); font-weight: 500; letter-spacing: var(--tr-meta); text-transform: uppercase; color: rgba(251,248,243,.6); }
.r3-txt p { margin: 0 0 var(--sp-4); font-family: var(--serif); font-weight: 300; font-size: clamp(22px, 2.4vw, 32px); line-height: 1.2; }
.r3-link { display: inline-flex; align-items: center; gap: 8px; font-family: var(--sans); font-size: 13px; font-weight: 500; letter-spacing: .1em; color: var(--bone-00); text-decoration: underline; text-underline-offset: 6px; }
.r3-link .arrow { transition: transform var(--t-fast) var(--e-out); }
.r3-link:hover .arrow { transform: translateX(4px); }
.r3-fotos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); }
.r3-fotos a { display: block; aspect-ratio: 1; overflow: hidden; }
.r3-fotos picture { display: block; width: 100%; height: 100%; }
.r3-fotos a:hover img { transform: scale(1.06); }

/* ---- K1 · vías directas ------------------------------------------------- */
.k1 { display: grid; gap: var(--sp-7); margin: 0; }
@media (min-width: 561px) { .k1 { grid-template-columns: repeat(2, 1fr); gap: var(--sp-7); } }
@media (min-width: 1001px) { .k1 { grid-template-columns: repeat(4, 1fr); gap: var(--sp-8); } }
.k1 > div { padding-top: var(--sp-5); border-top: 1px solid var(--line); }
.k1-ico { display: block; width: 22px; height: 22px; margin-bottom: var(--sp-4); color: var(--azul); }
.k1-ico svg { width: 100%; height: 100%; }
.k1 dt { margin-bottom: var(--sp-2); font-family: var(--sans); font-size: var(--fs-meta); font-weight: 500; letter-spacing: var(--tr-meta); text-transform: uppercase; color: var(--ink-60); }
.k1 dd { margin: 0; }
.k1 dd a { font-family: var(--serif); font-weight: 300; font-size: clamp(20px, 1.9vw, 26px); color: var(--ink-90); }
.k1 dd a:hover { color: var(--azul); }
.k1 dd small { display: block; margin-top: var(--sp-2); font-family: var(--sans); font-size: 12px; color: var(--ink-60); }

/* ---- K2 · formulario con foto ------------------------------------------ */
.k2-wrap { background: var(--bone-05); }
.k2 { display: grid; gap: var(--sp-7); align-items: stretch; }
@media (min-width: 901px) { .k2 { grid-template-columns: 1fr 1.15fr; gap: var(--sp-8); } }
.k2-media { overflow: hidden; min-height: 320px; }
.k2-media picture { display: block; width: 100%; height: 100%; }
.k2-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.k2-form { background: #fff; border: 1px solid var(--line); padding: clamp(24px, 3vw, 44px); }
.k2-k { display: block; margin-bottom: var(--sp-3); font-family: var(--sans); font-size: var(--fs-meta); font-weight: 500; letter-spacing: var(--tr-meta); text-transform: uppercase; color: var(--azul); }
.k2-form h3 { margin: 0 0 var(--sp-6); font-family: var(--serif); font-weight: 300; font-size: clamp(24px, 2.4vw, 32px); line-height: 1.1; letter-spacing: -.02em; }
/* El nombre a todo el ancho: es el dato más largo de los tres. */
.k2-form .fld { margin-bottom: var(--sp-5); }
.k2-par { display: grid; gap: var(--sp-5); }
@media (min-width: 561px) { .k2-par { grid-template-columns: 1fr 1fr; } }
.k2-pie { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5); flex-wrap: wrap; padding-top: var(--sp-5); border-top: 1px solid var(--bone-10); }
.k2-pie span { font-size: 12px; color: var(--ink-60); max-width: 30ch; }

/* ---- K3 · banda de cierre ---------------------------------------------- */
.k3-wrap { background: var(--ink-90); color: var(--bone-00); padding: clamp(56px, 7vw, 96px) 0; }
.k3 { display: grid; gap: var(--sp-6); align-items: center; }
@media (min-width: 761px) { .k3 { grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-8); } }
.k3-k { display: block; margin-bottom: var(--sp-3); font-family: var(--sans); font-size: var(--fs-meta); font-weight: 500; letter-spacing: var(--tr-meta); text-transform: uppercase; color: rgba(251,248,243,.6); }
.k3 h3 { margin: 0; font-family: var(--serif); font-weight: 300; font-size: clamp(26px, 3.2vw, 46px); line-height: 1.06; letter-spacing: -.025em; max-width: 18ch; }
.k3 h3 em.acc { font-style: normal; color: rgba(251,248,243,.62); }

/* Nota al pie de la sección de líneas en gastronomía */
.lin-nota { margin: var(--sp-6) 0 0; padding-top: var(--sp-4); border-top: 1px solid var(--line); font-size: 12px; color: var(--ink-60); }

/* Los marcadores ocupan el hueco entero de la foto que sustituyen */
.hd2-media, .c1-media, .k2-media { position: relative; }
.hd2-media .phx, .c1-media .phx, .k2-media .phx { position: absolute; inset: 0; }

/* ==========================================================================
   37 · ESPACIOS · alinear con el sistema
   --------------------------------------------------------------------------
   El nombre del salón iba a 56px y peso 400, cuando la escala de la
   biblioteca pone los H3 de sección a 46px y peso 300. Era el único titular
   del sitio fuera de escala, y encima más grande que su propio H2 de sección.
   ========================================================================== */
.salon-name {
  font-size: clamp(30px, 3.4vw, 46px);
  font-weight: 300;
  letter-spacing: -.025em;
}

/* ==========================================================================
   38 · ESPACIOS · la banda de datos del salón
   --------------------------------------------------------------------------
   Estaba a 112px del contenido (80 de gap + 32 de padding) sin nada que la
   atara al salón: cuatro cifras sueltas justo antes del siguiente salón, y
   ninguna señal de a cuál de los dos pertenecían.

   Tres cambios:
     · Filete superior y menos aire → la banda cierra la ficha, no flota.
     · La cifra sube de 24px a 36 y baja a peso 300, que es la escala de la
       biblioteca. Es el dato que la gente viene a buscar; iba en cuerpo de
       pie de foto.
     · Filete vertical entre columnas y cifras tabulares, para que 1.000, 650,
       220 y 400 se lean como una tabla y no como cuatro frases.
   ========================================================================== */

/* El gap de 80px es para separar foto de texto; entre el texto y su propia
   ficha de datos sobra la mitad. */
.salones-wrap .salon { row-gap: var(--sp-7); }

.salon-data {
  padding-top: var(--sp-6);
  border-top: 1px solid var(--line);
  gap: var(--sp-5) 0;
}
.salon-data > div {
  gap: var(--sp-2);
  padding-left: var(--sp-6);
  border-left: 1px solid var(--line);
}
.salon-data > div:nth-child(5n + 1) { padding-left: 0; border-left: 0; }

.salon-data dt { letter-spacing: var(--tr-meta); color: var(--ink-40); }
.salon-data dd {
  font-size: clamp(26px, 2.8vw, 36px);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.salon-data dd small { margin-top: var(--sp-2); line-height: 1.4; color: var(--ink-40); }

/* Por debajo de 700px las cuatro columnas dejan de caber sin partir palabras:
   pasan a dos, y el filete vertical se recalcula para las nuevas cabeceras
   de fila (1 y 3 en lugar de solo 1). */
/* Cinco datos por salón desde que el dossier corporativo añadió el aforo de
   conferencia. Los cortes recalculan qué celda abre fila, que es la única que
   va sin filete a la izquierda; el rango cerrado del tramo intermedio evita
   que su regla siga mandando por debajo de 700. */
.salon-data { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1000px) and (min-width: 701px) {
  .salon-data { grid-template-columns: repeat(3, 1fr); gap: var(--sp-6) 0; }
  .salon-data > div:nth-child(3n + 1) { padding-left: 0; border-left: 0; }
  .salon-data > div:nth-child(3n + 2),
  .salon-data > div:nth-child(3n) { padding-left: var(--sp-5); }
}
@media (max-width: 700px) {
  .salon-data { grid-template-columns: repeat(2, 1fr); gap: var(--sp-6) 0; }
  .salon-data > div:nth-child(2n + 1) { padding-left: 0; border-left: 0; }
  .salon-data > div:nth-child(2n) { padding-left: var(--sp-5); border-left: 1px solid var(--line); }
}

/* ---- G3 en espacios: tres columnas -------------------------------------
   Del club solo hay seis fotos que no se repitan entre sí (gal-2 y gal-hall
   son el mismo fichero; gal-detalle y photo-banquete, la misma mesa). Seis en
   rejilla de cuatro deja dos huecos al final; en tres cierra dos filas
   completas y además las fotos ganan tamaño, que es lo que pide un edificio. */
.g3--tres { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 700px) { .g3--tres { grid-template-columns: repeat(2, 1fr); } }

/* ==========================================================================
   39 · ESPACIOS · el icono de cada salón
   --------------------------------------------------------------------------
   Vienen del dossier corporativo de julio 2026, uno por salón: la espiral de
   Panorama, el sol naciente de Horizonte, la cumbre y el agua del Lago. Son
   los vectores originales del PDF, no un calco. Todos comparten el punto
   suelto, que es lo que los hace familia.
   ========================================================================== */
.salon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.salon-ico { display: block; color: var(--azul); }
.salon-ico svg { display: block; width: 46px; height: 46px; }
@media (max-width: 900px) { .salon-ico svg { width: 38px; height: 38px; } }

/* El icono ya separa visualmente de lo de arriba: la etiqueta se le pega. */
.salon-info { gap: var(--sp-4); }
.salon-ico + .salon-num { margin-top: calc(var(--sp-2) - var(--sp-4)); }

/* ==========================================================================
   40 · EMPRESA · las cuatro salas
   --------------------------------------------------------------------------
   Cuatro tarjetas enlazadas a su ficha de /espacios. La foto va arriba, el
   icono del salón cae sobre ella para que la marca de cada sala se lea antes
   que el nombre, y la cifra que manda es el aforo en conferencia, que es lo
   que busca quien organiza una jornada.
   ========================================================================== */
.salas-grid { display: grid; gap: var(--sp-6) var(--sp-5); grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .salas-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .salas-grid { grid-template-columns: 1fr; } }

.sala-card {
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
  border-top: 1px solid var(--line); padding-top: var(--sp-5);
}
/* Más alta que ancha: en 4:3 las salas se veían apaisadas y planas, y lo que
   vende un salón de ocho metros es precisamente la altura. */
.sala-foto {
  display: block; position: relative; order: -1;
  aspect-ratio: 3 / 4; overflow: hidden; background: var(--bone-10);
  margin-bottom: var(--sp-5);
}
@media (max-width: 560px) { .sala-foto { aspect-ratio: 4 / 3; } }
.sala-foto picture { display: block; width: 100%; height: 100%; }
.sala-foto img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 620ms var(--e-out);
}
.sala-card:hover .sala-foto img { transform: scale(1.04); }

/* Probé el icono montado sobre la foto y se perdía: estas imágenes tienen
   demasiado detalle en el borde inferior. Va debajo, sobre el crema, donde
   siempre se lee. */
.sala-ico { display: block; margin-bottom: var(--sp-4); color: var(--azul); }
.sala-ico svg { display: block; width: 36px; height: 36px; }

.sala-nombre {
  font-family: var(--serif); font-weight: 300; font-size: 28px;
  line-height: 1; letter-spacing: -.02em; color: var(--ink-90);
}
.sala-kicker {
  margin-top: var(--sp-2); font-family: var(--sans); font-size: 11px;
  font-weight: 500; letter-spacing: var(--tr-meta); text-transform: uppercase;
  color: var(--ink-40);
}
.sala-cifra {
  display: flex; align-items: baseline; gap: var(--sp-3);
  margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--line);
  font-family: var(--sans); font-size: 12px; color: var(--ink-60);
}
.sala-cifra b {
  font-family: var(--serif); font-weight: 300; font-size: 34px;
  line-height: 1; letter-spacing: -.02em; color: var(--ink-90);
}
.sala-texto {
  margin-top: var(--sp-4); font-family: var(--sans); font-size: 14px;
  line-height: var(--lh-body); color: var(--ink-60);
}

/* El icono sube a azul más vivo y la tarjeta marca su borde al pasar */
.sala-card { transition: border-color var(--t-base) var(--e-out); }
.sala-card:hover { border-top-color: var(--ink-90); }

@media (prefers-reduced-motion: reduce) {
  .sala-card:hover .sala-foto img { transform: none; }
}

/* Las casillas de la rejilla mixta nacieron con marcadores, que ya traían
   width/height al 100%. Al meter fotos de verdad, el <picture> se quedaba a su
   tamaño natural y dejaba el resto de la celda en blanco: eso eran los huecos
   de las piezas altas. */
.mix > picture { display: block; width: 100%; height: 100%; }
.mix > picture img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mix[data-lb] { cursor: zoom-in; overflow: hidden; }
.mix[data-lb] img { transition: transform 620ms var(--e-out); }
.mix[data-lb]:hover img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) { .mix[data-lb]:hover img { transform: none; } }

/* El botón del plano llevaba un filete debajo que lo hacía parecer un enlace
   subrayado suelto al final de la ficha. La flecha y el signo ya dicen que se
   pulsa. */
.salon-plano-toggle { border-bottom: 0; }
.salon-plano-toggle:hover { border-bottom-color: transparent; }

/* ==========================================================================
   41 · BODAS · el antetítulo del hero
   --------------------------------------------------------------------------
   Llevaba 2,81:1 sobre un cielo en rgb(127,130,135), cuando 11px exigen 4,5.
   Probé lo contrario de lo que pedía el encargo (quitar el scrim) y con esta
   foto no hay versión que se lea: sin él, el titular cae a 1,15 y el CTA a
   1,91, porque el cielo justo debajo del texto está en rgb(239,239,237).

   Mínimo que pasa los cuatro elementos, medido a base de barrer valores:
   antetítulo en blanco puro y el gradiente lateral 0,12 más hondo. Solo se
   oscurece la izquierda, que es donde va el texto; la pareja, a la derecha,
   queda igual.
     antetítulo 4,89 · titular 5,25 · párrafo 6,50 · CTA 14,68
   ========================================================================== */
body[data-active="bodas"] .hero .eyebrow { color: #fff; }
body[data-active="bodas"] .hero::after {
  background:
    linear-gradient(to right,
      rgba(18,22,30,.86) 0%,
      rgba(18,22,30,.72) 26%,
      rgba(18,22,30,.37) 48%,
      rgba(18,22,30,.08) 66%,
      rgba(18,22,30,0) 80%),
    linear-gradient(to top,
      rgba(18,22,30,.70) 0%,
      rgba(18,22,30,.42) 20%,
      rgba(18,22,30,.16) 42%,
      rgba(18,22,30,.04) 62%,
      rgba(18,22,30,0) 78%);
}

/* ---- Suites · el hueco de la foto grande pasa a llamada ------------------
   La única foto de suite que trae el dossier venía a 960×540 y se veía blanda
   al ocupar media pantalla. En su sitio va lo que de verdad hace falta ahí:
   qué se hace con las habitaciones. Las cuatro pequeñas siguen abajo. */
/* ---- Suites · texto a un lado, las cuatro fotos al otro ----------------
   La versión anterior apilaba texto, una caja de CTA medio vacía y las fotos
   sueltas debajo: tres bloques en vertical con mucho aire muerto entre ellos.
   Ahora el texto ocupa una columna y la rejilla de fotos la otra, a la misma
   altura, y la llamada remata el texto en lugar de vivir en su propia caja. */
.suites-nota {
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
  color: var(--ink-90) !important;
}
.suites-texto .btn { align-self: flex-start; margin-top: var(--sp-5); }

/* ---- Bloque de confianza · debajo de cada formulario --------------------
   Las tres dudas que frenan a alguien con el dedo sobre "enviar": si le
   contesta un robot, cuándo, y si al preguntar ya se compromete. Van justo
   ahí, no en otra sección, porque es donde aparecen. */
.mod-confianza { margin-top: var(--sp-6); padding-top: var(--sp-6); border-top: 1px solid var(--line); }
.k2 .mod-confianza, .visita-card .mod-confianza { grid-column: 1 / -1; }

/* ---- Formulario · aire entre bloques de campos -------------------------
   Dentro de un mismo paso, un campo suelto y una pareja de campos quedaban
   pegados: medido, 0px entre el nombre y la fila de correo y teléfono. El
   .fpair solo separaba sus propias columnas, y el .fgroup no separaba nada. */
.fgroup > .fld + .fld,
.fgroup > .fld + .fpair,
.fgroup > .fpair + .fld,
.fgroup > .fpair + .fpair { margin-top: var(--sp-6); }

/* Las tres vías de contacto abren la página directamente bajo el hero, que ya
   las anuncia. Sin titular de sección delante, la sección necesita su propio
   aire por arriba. */
body[data-active="contacto"] #vias { padding-top: var(--sp-9); }

/* ==========================================================================
   42 · AUDITORÍA PRE-BETA · unificación
   --------------------------------------------------------------------------
   Cierra los hallazgos de los cinco informes de auditoría (jul 2026):
   jerarquía de H1 por nivel, una sola firma de antetítulo, titulares de
   formulario iguales en todo el sitio, y los remates de ritmo y foco.
   ========================================================================== */

/* ---- Jerarquía de H1: A > B > C, sin excepciones -----------------------
   Empresas (B) titulaba a 95px, más grande que la portada (88). La portada
   pasa a consumir su token de display y los headers hd-* se ordenan debajo. */
.hero h1 { font-size: var(--fs-display); }
.hd1 .hd-t { font-size: clamp(38px, 5.6vw, 84px); }
.hd4 .hd-t { font-size: clamp(32px, 4vw, 58px); }
/* El titular de Espacios pasó a ser una frase larga ("cuatro formas de
   configurar tu evento"): a 72px se partía en cuatro líneas y dejaba una
   palabra huérfana. A 58 entra en las dos que marca su <br>. */

/* ---- Antetítulos: una sola firma ---------------------------------------
   Convivían 11px/0.22em (legado), 12px/0.16em (módulos) y 11px/0.2em (hero C).
   Manda la tokenizada. :is() iguala la especificidad del legado. */
:is(.sec-head .num, .sec-head .eb, .num, .eb, .eyebrow) {
  font-size: var(--fs-meta);
  letter-spacing: var(--tr-meta);
}

/* La .num de suites iba a 16px sentence-case: vuelve a la firma común */
.suites-texto .num {
  font-size: var(--fs-meta);
  letter-spacing: var(--tr-meta);
  text-transform: uppercase;
}

/* ---- Titular de formulario: idéntico en las 6 páginas ------------------
   Convivían 44 (visita-card), 40 (contacto) y 32 (k2). Manda --fs-h2. */
.visita-card h2, .visita-text h2 { font-size: var(--fs-h2); }
.k2-form h3 { font-size: var(--fs-h2); }

/* Bodas es nivel A: la sección de suites titula como sus hermanas (64), no
   como un módulo (40) */
body[data-tier="a"] .suites-texto h2 { font-size: clamp(36px, 5vw, 64px); }

/* ---- Contacto: los dos huecos más grandes del sitio se cierran ---------
   Vías→form medía 345px de aire texto a texto (el par estándar es ~256). */
body[data-active="contacto"] #vias { padding-bottom: var(--sp-8); }
body[data-active="contacto"] .form-inner { padding-top: var(--sp-7); }

/* ---- La única esquina redondeada del sitio ------------------------------ */
.visita-card { border-radius: 0; }

/* ---- El botón de suites no puede desbordar su columna en móvil ---------- */
@media (max-width: 560px) {
  .suites-cta .btn {
    white-space: normal;
    height: auto;
    min-height: var(--btn-h);
    padding-block: 14px;
    line-height: 1.35;
    text-align: left;
  }
}

/* ---- Las figuras de galería ahora son botones: anillo de foco ----------- */
[data-lb]:focus-visible {
  outline: 2px solid var(--azul);
  outline-offset: 3px;
}

/* ---- Huecos de reduced-motion que quedaban fuera ------------------------ */
@media (prefers-reduced-motion: reduce) {
  .salon-plano-inner { animation: none !important; }
  .salon-plano-zoom:hover img,
  .ig-tile:hover img,
  .sala-card:hover .sala-foto img,
  .g3 figure:hover img,
  .g1-b:hover img { transform: none !important; }
  .hd4-idx a:hover { padding-left: 0; }
}

/* Las vías de contacto son 4 desde que entró "Agendar visita": la regla de
   4 columnas de style.css perdía contra la base .intro por especificidad. */
@media (min-width: 1001px) { .intro-contacto .right dl { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 561px) and (max-width: 1000px) { .intro-contacto .right dl { grid-template-columns: repeat(2, 1fr); } }