/* ============================================================
   PICCOLA REGINA · Casa Gastronómica — v2
   Paleta medida sobre el logotipo del cliente.
   Voz tipográfica: serif itálica de alto contraste en todo el
   texto de lectura; el palo seco queda solo para interfaz.
   CSS de autor. Sin framework. Sin dependencias de JS.
   ============================================================ */

/* ---------- 1 · TOKENS ------------------------------------ */
:root {
  /* Medidos del logotipo oficial (fotograma 1080p, RGB crudo) */
  --hueso:      #f3ede1;
  --rojo:       #c10010;
  --tinta:      #080500;

  /* Derivados de la fotografía nocturna de la casa */
  --noche:      #14100e;
  --noche-2:    #1c1613;
  --vino:       #3b0d10;
  --ambar:      #e2a75c;
  --ambar-alto: #f0c48b;

  /* Roles — claro */
  --fondo:        var(--hueso);
  --fondo-alt:    #ece3d2;
  --texto:        #191411;
  --texto-suave:  #574b41;
  --regla:        #d7cab4;

  /* Roles — oscuro */
  --fondo-osc:      var(--noche);
  --texto-osc:      #f6f1e8;
  --texto-osc-suave:#c9bdae;
  --regla-osc:      #3d332c;

  /* Tipografía */
  --display: "Cormorant Garamond", "Cormorant respaldo", "Iowan Old Style", Georgia, serif;
  --sans:    "Jost", "Avenir Next", "Segoe UI", system-ui, sans-serif;

  /* Escala fluida */
  --t-hero:  clamp(2.7rem, 1.1rem + 6.6vw, 6.6rem);
  --t-h2:    clamp(2.1rem, 1.25rem + 3.4vw, 4.1rem);
  --t-h3:    clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem);
  --t-cifra: clamp(3.4rem, 1.7rem + 6.4vw, 6.6rem);
  --t-lead:  clamp(1.2rem, 1.02rem + 0.72vw, 1.65rem);
  --t-cuerpo:clamp(1.08rem, 0.99rem + 0.36vw, 1.3rem);
  --t-micro: 0.8rem;

  /* Ritmo */
  --aire: clamp(4.75rem, 2.4rem + 8.8vw, 9.5rem);
  --ancho: 74rem;
  --ancho-texto: 42rem;
  --radio: 3px;

  --curva: cubic-bezier(0.22, 0.61, 0.36, 1);
  --curva-suave: cubic-bezier(0.65, 0, 0.35, 1);
}

/* ---------- 1.b · RESPALDO DE MÉTRICA -----------------------
   Medido en el propio sitio con la cadena de titulares: Cormorant
   Garamond ocupa 85.74 % de Georgia en redonda y 77.35 % en cursiva.
   Con el respaldo ajustado el texto ocupa las mismas líneas antes y
   después de que llegue la fuente, y el héroe deja de saltar.
   Todos los line-height del sitio son adimensionales, así que basta
   con size-adjust: no hace falta tocar ascent/descent.
   ------------------------------------------------------------ */
@font-face {
  font-family: "Cormorant respaldo";
  src: local("Georgia");
  font-style: normal;
  size-adjust: 85.74%;
}
@font-face {
  font-family: "Cormorant respaldo";
  src: local("Georgia Italic"), local("Georgia");
  font-style: italic;
  size-adjust: 77.35%;
}

/* ---------- 2 · BASE -------------------------------------- */
@layer base {
  *, *::before, *::after { box-sizing: border-box; }

  html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

  body {
    margin: 0;
    background: var(--fondo-osc);
    color: var(--texto-osc);
    /* La voz del sitio: serif itálica de alto contraste. */
    font-family: var(--display);
    font-style: italic;
    font-size: var(--t-cuerpo);
    font-weight: 400;
    line-height: 1.66;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
  }

  h1, h2, h3, h4 {
    font-family: var(--display);
    font-weight: 300;
    font-style: normal;
    line-height: 1.05;
    letter-spacing: -0.017em;
    margin: 0;
    text-wrap: balance;
  }

  p { margin: 0 0 1.05em; text-wrap: pretty; }
  p:last-child { margin-bottom: 0; }

  a { color: inherit; text-decoration: none; }

  img, video, svg { display: block; max-width: 100%; }
  img, video { height: auto; }

  ul, ol { margin: 0; padding: 0; list-style: none; }

  button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

  strong { font-weight: 600; font-style: normal; }

  :focus-visible { outline: 2px solid var(--ambar); outline-offset: 3px; border-radius: 2px; }
}

/* ---------- 3 · COMPOSICIÓN ------------------------------- */
.envoltura { width: min(100% - 2.5rem, var(--ancho)); margin-inline: auto; }
@media (min-width: 45rem) { .envoltura { width: min(100% - 5rem, var(--ancho)); } }

.seccion { padding-block: var(--aire); position: relative; overflow-x: clip; }

.claro {
  background: var(--fondo);
  color: var(--texto);
  --texto-osc: var(--texto);
  --texto-osc-suave: var(--texto-suave);
  --regla-osc: var(--regla);
  --ambar: var(--rojo);
  --ambar-alto: var(--rojo);
}
.claro-alt { background: var(--fondo-alt); }
.vino { background: var(--vino); }

/* Luz de ambiente muy tenue en las zonas claras: profundidad sin ruido */
.claro::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 18% 22%, rgba(193,0,16,0.035), transparent 42%),
    radial-gradient(circle at 82% 78%, rgba(120,90,40,0.05), transparent 46%);
}
.claro > * { position: relative; }

/* ---------- 4 · PIEZAS TIPOGRÁFICAS ----------------------- */
.pildora {
  display: inline-flex;
  align-items: center;
  gap: 0.85em;
  font-family: var(--sans);
  font-style: normal;
  font-size: var(--t-micro);
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ambar);
  margin-bottom: 1.7rem;
}
.pildora::before, .pildora::after {
  content: "";
  width: clamp(1.4rem, 4vw, 2.6rem);
  height: 1px;
  background: linear-gradient(to right, transparent, currentColor);
  opacity: 0.75;
}
.pildora::after { background: linear-gradient(to left, transparent, currentColor); }

.titulo { font-size: var(--t-h2); }
.titulo em { font-style: italic; color: var(--ambar); font-weight: 300; }

.lead {
  font-size: var(--t-lead);
  line-height: 1.55;
  color: var(--texto-osc-suave);
  max-width: var(--ancho-texto);
}

.centrado { text-align: center; }
.centrado .lead { margin-inline: auto; }

/* ---------- 5 · BOTONES ----------------------------------- */
.boton {
  --b-fondo: var(--rojo);
  --b-texto: #fff;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  padding: 1.08rem 2.2rem;
  min-height: 3.1rem;
  background: var(--b-fondo);
  color: var(--b-texto);
  font-family: var(--sans);
  font-style: normal;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-radius: 100px;
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.4s var(--curva), box-shadow 0.4s var(--curva), background-color 0.4s var(--curva);
  box-shadow: 0 8px 26px -12px rgba(193, 0, 16, 0.9);
}
/* Reflejo especular que cruza el botón */
.boton::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,0.32) 50%, transparent 62%);
  translate: -130% 0;
  transition: translate 0.75s var(--curva);
}
.boton:hover, .boton:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 16px 38px -14px rgba(193, 0, 16, 0.95);
  background: #d40a1c;
}
.boton:hover::after, .boton:focus-visible::after { translate: 130% 0; }
.boton:active { transform: translateY(0); }

.boton--fantasma {
  --b-fondo: transparent;
  --b-texto: var(--texto-osc);
  border: 1px solid color-mix(in srgb, currentColor 36%, transparent);
  box-shadow: none;
}
.boton--fantasma:hover, .boton--fantasma:focus-visible {
  background: color-mix(in srgb, currentColor 9%, transparent);
  box-shadow: none;
  border-color: currentColor;
}

@media (prefers-reduced-motion: reduce) {
  .boton, .boton:hover { transform: none; transition: background-color 0.2s; }
  .boton::after { display: none; }
}

/* ---------- 6 · NAVEGACIÓN -------------------------------- */
.nav {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0.85rem clamp(1.25rem, 4vw, 2.5rem);
  background: color-mix(in srgb, var(--noche) 90%, transparent);
  backdrop-filter: blur(16px) saturate(1.25);
  border-block-end: 1px solid var(--regla-osc);
  color: var(--texto-osc);
  transform: translateY(0);
}
@supports (animation-timeline: scroll()) {
  .nav {
    transform: translateY(-102%);
    animation: nav-entra linear both;
    animation-timeline: scroll();
    animation-range: 88vh 104vh;
  }
  @keyframes nav-entra { from { transform: translateY(-102%); } to { transform: translateY(0); } }
  @media (prefers-reduced-motion: reduce) { .nav { animation: none; transform: translateY(0); } }
}

.nav__marca { display: flex; align-items: center; gap: 0.7rem; flex-shrink: 0; padding-block: 0.55rem; min-width: 2.75rem; }
.nav__marca svg { width: 2rem; height: auto; color: var(--texto-osc); }
.nav__marca span {
  font-family: var(--sans);
  font-style: normal;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  white-space: nowrap;
}

.nav__enlaces {
  display: none;
  gap: clamp(1.1rem, 2.2vw, 2.1rem);
  font-family: var(--sans);
  font-style: normal;
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
@media (min-width: 62rem) { .nav__enlaces { display: flex; } }
.nav__enlaces a { position: relative; padding-block: 0.85rem; color: var(--texto-osc-suave); transition: color 0.3s var(--curva); }
.nav__enlaces a::after {
  content: ""; position: absolute; inset-inline: 0; inset-block-end: 0.5rem;
  height: 1px; background: var(--ambar); scale: 0 1; transform-origin: left;
  transition: scale 0.35s var(--curva);
}
.nav__enlaces a:hover, .nav__enlaces a:focus-visible { color: var(--texto-osc); }
.nav__enlaces a:hover::after, .nav__enlaces a:focus-visible::after { scale: 1 1; }

.nav__acciones { display: flex; align-items: center; gap: 0.6rem; flex-shrink: 0; }
.nav__cta { padding: 0.75rem 1.45rem; min-height: 2.8rem; font-size: 0.75rem; }

/* ---------- 7 · MENÚ DE TELÉFONO (sin JS) ----------------- */
.menu { position: relative; }
@media (min-width: 62rem) { .menu { display: none; } }
.menu > summary {
  display: grid; place-items: center;
  width: 2.9rem; height: 2.9rem;
  border: 1px solid color-mix(in srgb, var(--texto-osc) 30%, transparent);
  border-radius: 100px; cursor: pointer; list-style: none;
  transition: border-color 0.3s var(--curva);
}
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary:hover { border-color: var(--ambar); }
.menu__barras, .menu__barras::before, .menu__barras::after {
  display: block; width: 1.1rem; height: 1.5px; background: currentColor; border-radius: 2px;
  transition: transform 0.3s var(--curva), opacity 0.2s var(--curva);
}
.menu__barras { position: relative; }
.menu__barras::before, .menu__barras::after { content: ""; position: absolute; inset-inline-start: 0; }
.menu__barras::before { transform: translateY(-5px); }
.menu__barras::after  { transform: translateY(5px); }
.menu[open] .menu__barras { background: transparent; }
.menu[open] .menu__barras::before { transform: rotate(45deg); }
.menu[open] .menu__barras::after  { transform: rotate(-45deg); }

.menu__panel {
  position: absolute; inset-block-start: calc(100% + 0.75rem); inset-inline-end: 0; z-index: 70;
  display: grid; min-width: 15.5rem; padding: 0.5rem;
  background: color-mix(in srgb, var(--noche-2) 97%, transparent);
  border: 1px solid var(--regla-osc); border-radius: 5px;
  box-shadow: 0 24px 60px -20px rgba(0,0,0,0.95);
  backdrop-filter: blur(16px);
}
.menu__panel a {
  padding: 0.85rem 1rem; min-height: 2.9rem; display: flex; align-items: center;
  font-family: var(--sans); font-style: normal; font-size: 0.82rem; font-weight: 400;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--texto-osc-suave);
  border-radius: 3px; transition: background-color 0.25s var(--curva), color 0.25s var(--curva);
}
.menu__panel a:hover, .menu__panel a:focus-visible { background: color-mix(in srgb, var(--texto-osc) 8%, transparent); color: var(--texto-osc); }
.menu__panel a:last-child { margin-block-start: 0.35rem; border-block-start: 1px solid var(--regla-osc); color: var(--ambar); }
@media (prefers-reduced-motion: reduce) { .menu__barras, .menu__barras::before, .menu__barras::after { transition: none; } }
@media (max-width: 26rem) { .nav__cta { padding-inline: 1rem; letter-spacing: 0.1em; } .nav__marca span { display: none; } }

/* ---------- 8 · HÉROE ------------------------------------- */
.heroe {
  position: relative; min-height: 100svh; display: grid; align-items: end;
  overflow: clip; background: var(--noche); isolation: isolate;
}
.heroe__medio { position: absolute; inset: 0; z-index: -2; }
.heroe__medio img, .heroe__medio video { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; }
.heroe__velo {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, var(--noche) 3%, color-mix(in srgb, var(--noche) 82%, transparent) 30%, color-mix(in srgb, var(--noche) 55%, transparent) 62%, color-mix(in srgb, var(--noche) 68%, transparent) 100%),
    radial-gradient(120% 85% at 50% 108%, rgba(226,167,92,0.14), transparent 62%);
}
.heroe__cuerpo {
  position: relative;
  padding-block: clamp(6rem, 12vh, 9rem) clamp(3.5rem, 9vh, 6rem);
  display: grid; gap: 1.5rem; justify-items: start; max-width: 56rem;
}
.heroe__antetitulo {
  font-family: var(--sans); font-style: normal; font-size: var(--t-micro); font-weight: 400;
  letter-spacing: 0.34em; text-transform: uppercase; color: var(--ambar);
}
.heroe__titulo { font-size: var(--t-hero); line-height: 0.98; letter-spacing: -0.026em; }
.heroe__titulo em { display: block; font-style: italic; color: var(--ambar); letter-spacing: -0.012em; }
.heroe__pie { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.4rem; margin-block-start: 0.6rem; }
.heroe__nota { font-size: 0.98rem; color: var(--texto-osc-suave); }

.sello {
  position: absolute; z-index: 3;
  inset-block-start: clamp(5.5rem, 11vh, 8rem);
  inset-inline-end: clamp(1.25rem, 4vw, 3.5rem);
  width: clamp(7.5rem, 12vw, 10rem); aspect-ratio: 1;
  display: grid; place-items: center; border-radius: 50%;
  background: color-mix(in srgb, var(--hueso) 96%, transparent);
  color: var(--tinta);
  box-shadow: 0 18px 48px -20px rgba(0,0,0,0.92);
}
.sello__texto { position: absolute; inset: 0; animation: gira 30s linear infinite; }
.sello__texto text {
  font-family: var(--sans); font-style: normal; font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; fill: var(--rojo);
}
.sello__centro { font-family: var(--display); font-size: clamp(1.6rem, 2.7vw, 2.4rem); font-style: italic; line-height: 1; color: var(--tinta); }
@keyframes gira { to { rotate: 360deg; } }
@media (prefers-reduced-motion: reduce) { .sello__texto { animation: none; } }
@media (max-width: 34rem) { .sello { display: none; } }

/* ---------- 9 · DECLARACIÓN ------------------------------- */
.declaracion { text-align: center; }
.declaracion__lineas {
  font-family: var(--display); font-style: normal;
  font-size: clamp(1.7rem, 0.9rem + 3.2vw, 3.5rem);
  line-height: 1.24; letter-spacing: -0.015em; max-width: 47rem; margin-inline: auto;
}
.declaracion__lineas .tachada {
  display: block; color: var(--texto-osc-suave); position: relative;
  width: max-content; max-width: 100%; margin-inline: auto;
}
.declaracion__lineas .tachada::after {
  content: ""; position: absolute; inset-block-start: 54%; inset-inline-start: -0.1em;
  width: calc(100% + 0.2em); height: 2px; background: var(--rojo);
  transform-origin: left; scale: 0 1;
}
@supports (animation-timeline: view()) {
  .declaracion__lineas .tachada::after {
    animation: tacha linear both; animation-timeline: view(); animation-range: entry 42% cover 38%;
  }
  @keyframes tacha { to { scale: 1 1; } }
}
@supports not (animation-timeline: view()) { .declaracion__lineas .tachada::after { scale: 1 1; } }
@media (prefers-reduced-motion: reduce) { .declaracion__lineas .tachada::after { animation: none; scale: 1 1; } }
.declaracion__lineas .afirma { display: block; margin-block-start: 0.5em; color: var(--texto-osc); }
.declaracion__lineas .afirma em { font-style: italic; color: var(--ambar); }

/* ---------- 10 · CIFRAS ----------------------------------- */
.cifras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
  gap: 0;
  border-block: 1px solid var(--regla-osc);
}
.cifra {
  position: relative;
  text-align: center;
  min-width: 0;
  padding: clamp(2.5rem, 5vw, 3.75rem) clamp(1rem, 2vw, 1.75rem);
  transition: background-color 0.5s var(--curva);
}
/* Filete divisorio entre columnas */
.cifra + .cifra::before {
  content: "";
  position: absolute;
  inset-block: 20%;
  inset-inline-start: 0;
  width: 1px;
  background: linear-gradient(to bottom, transparent, var(--regla-osc) 22%, var(--regla-osc) 78%, transparent);
}
.cifra:hover { background: color-mix(in srgb, var(--ambar) 5%, transparent); }

.cifra__n {
  font-family: var(--display);
  font-style: normal;
  font-weight: 300;
  font-size: var(--t-cifra);
  line-height: 0.86;
  color: var(--ambar);
  display: block;
  letter-spacing: -0.03em;
}
.cifra__t {
  display: block;
  margin-block-start: 1.05rem;
  font-family: var(--sans);
  font-style: normal;
  font-size: 0.79rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--texto-osc-suave);
}
.cifra__d {
  display: block;
  margin-block-start: 0.55rem;
  font-size: 1rem;
  line-height: 1.42;
  color: var(--texto-osc-suave);
  opacity: 0.88;
}
.estrellas { display: inline-flex; gap: 0.2em; margin-block-start: 0.8rem; }
.estrellas svg { width: 0.9rem; height: 0.9rem; fill: var(--ambar); }
.estrellas .media { opacity: 0.4; }

/* ---------- 11 · REJILLAS Y TARJETAS ---------------------- */
.rejilla { display: grid; gap: clamp(1.25rem, 2.6vw, 2rem); grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr)); }
@media (min-width: 58rem) { .rejilla--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.tarjeta {
  position: relative;
  min-width: 0;
  padding: clamp(1.9rem, 3.2vw, 2.6rem);
  background: color-mix(in srgb, var(--texto-osc) 3.5%, transparent);
  border: 1px solid var(--regla-osc);
  border-radius: var(--radio);
  overflow: hidden;
  transition: border-color 0.45s var(--curva), transform 0.45s var(--curva), background-color 0.45s var(--curva);
}
.claro .tarjeta { background: rgba(255,255,255,0.55); }
/* Filete de luz que recorre el borde superior al pasar el puntero */
.tarjeta::before {
  content: "";
  position: absolute;
  inset-block-start: 0; inset-inline: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--ambar), transparent);
  scale: 0 1;
  transition: scale 0.6s var(--curva);
}
.tarjeta:hover { border-color: color-mix(in srgb, var(--ambar) 48%, transparent); transform: translateY(-4px); }
.tarjeta:hover::before { scale: 1 1; }
@media (prefers-reduced-motion: reduce) { .tarjeta:hover { transform: none; } }

.tarjeta__n {
  font-family: var(--display);
  font-size: 1.15rem;
  font-style: italic;
  color: var(--ambar);
  display: block;
  margin-block-end: 1rem;
  letter-spacing: 0.06em;
}
.tarjeta h3 { font-size: var(--t-h3); margin-block-end: 0.75rem; }
.tarjeta p { color: var(--texto-osc-suave); font-size: 1.06rem; line-height: 1.6; }

/* ---------- 12 · PAR IMAGEN + TEXTO ----------------------- */
.par { display: grid; gap: clamp(1.75rem, 3.6vw, 3.4rem); align-items: center; grid-template-columns: 1fr; }
@media (min-width: 56rem) {
  .par { grid-template-columns: 1fr 1fr; }
  .par--invertido > .par__medio { order: 2; }
}
.par__medio { min-width: 0; position: relative; }
.par__medio img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radio); }
.par__texto { min-width: 0; max-width: 35rem; }

/* ---------- 13 · GALERÍA MOSAICO -------------------------- */
.mosaico { display: grid; gap: clamp(0.6rem, 1.4vw, 1rem); grid-template-columns: repeat(2, 1fr); grid-auto-flow: dense; }
@media (min-width: 52rem) { .mosaico { grid-template-columns: repeat(4, 1fr); } }
.mosaico figure { margin: 0; min-width: 0; overflow: clip; border-radius: var(--radio); }
.mosaico img { width: 100%; height: 100%; object-fit: cover; transition: scale 0.9s var(--curva); }
.mosaico figure:hover img { scale: 1.045; }
@media (prefers-reduced-motion: reduce) { .mosaico figure:hover img { scale: 1; } }
.mosaico .alta { grid-row: span 2; }
.mosaico .alta img { aspect-ratio: 3 / 4; }
.mosaico .baja img { aspect-ratio: 3 / 2; }
@media (max-width: 52rem) {
  .mosaico .alta { grid-row: span 1; }
  .mosaico .alta img, .mosaico .baja img { aspect-ratio: 1 / 1; }
}

/* ---------- 14 · GALERÍA DE ARTE -------------------------- */
.obras { display: grid; gap: clamp(1.1rem, 2.4vw, 1.9rem); grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); }
.obra { margin: 0; min-width: 0; }
/* Passe-partout real: la moldura rodea la obra, no la cruza */
.obra__marco {
  position: relative;
  overflow: clip;
  border-radius: 2px;
  padding: clamp(0.5rem, 1.1vw, 0.85rem);
  background: linear-gradient(160deg, color-mix(in srgb, var(--hueso) 15%, transparent), color-mix(in srgb, var(--hueso) 5%, transparent));
  box-shadow: 0 22px 50px -26px rgba(0,0,0,0.95);
}
.obra__marco img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 1px; transition: scale 1s var(--curva); }
.obra:hover .obra__marco img { scale: 1.04; }
@media (prefers-reduced-motion: reduce) { .obra:hover .obra__marco img { scale: 1; } }
.obra figcaption { margin-block-start: 1rem; font-size: 1.02rem; line-height: 1.45; color: var(--texto-osc-suave); }
.obra figcaption b {
  display: block;
  font-style: normal;
  font-weight: 400;
  font-size: 0.79rem;
  font-family: var(--sans);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ambar);
  margin-block-end: 0.4rem;
}

/* ---------- 15 · CARTA ------------------------------------ */
.carta { display: grid; gap: clamp(2.4rem, 4.6vw, 3.75rem); }
@media (min-width: 56rem) { .carta { grid-template-columns: repeat(2, 1fr); } }

.carta__grupo { min-width: 0; }
.carta__titulo {
  font-size: var(--t-h3);
  padding-block-end: 0.9rem;
  margin-block-end: 1.5rem;
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  border-block-end: 1px solid var(--regla-osc);
  position: relative;
}
.carta__titulo::after {
  content: ""; position: absolute; inset-block-end: -1px; inset-inline-start: 0;
  width: 3.5rem; height: 1px; background: var(--ambar);
}
.carta__titulo span {
  font-family: var(--sans); font-style: normal; font-size: var(--t-micro);
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--ambar); flex-shrink: 0;
}

.plato { display: grid; gap: 0.35rem; padding-block: 1.15rem; border-block-end: 1px dashed color-mix(in srgb, var(--regla-osc) 68%, transparent); }
.plato:last-child { border-block-end: 0; }
.plato__n { font-family: var(--display); font-style: normal; font-size: 1.34rem; line-height: 1.25; }
.plato__d { font-size: 1.04rem; color: var(--texto-osc-suave); line-height: 1.55; }

.etiqueta {
  display: inline-block; margin-inline-start: 0.45em;
  padding: 0.16em 0.7em;
  font-family: var(--sans); font-style: normal; font-size: 0.76rem; font-weight: 400;
  letter-spacing: 0.11em; text-transform: uppercase;
  border: 1px solid color-mix(in srgb, currentColor 38%, transparent);
  border-radius: 100px; color: var(--texto-osc-suave); vertical-align: 0.16em;
}

.muestra {
  margin-block-start: 1.75rem;
  padding: 1.1rem 1.3rem;
  border: 1px dashed color-mix(in srgb, var(--ambar) 52%, transparent);
  border-radius: var(--radio);
  font-size: 1rem; line-height: 1.55; color: var(--texto-osc-suave);
  background: color-mix(in srgb, var(--ambar) 6%, transparent);
}
.muestra strong { color: var(--texto-osc); }

/* ---------- 16 · PASOS + LA REINA CAMINANDO --------------- */
.pasos { counter-reset: paso; display: grid; gap: clamp(1.75rem, 3.2vw, 2.5rem); grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); }
.paso { min-width: 0; position: relative; padding-block-start: 3.9rem; }
.paso::before {
  counter-increment: paso;
  content: counter(paso, decimal-leading-zero);
  position: absolute; inset-block-start: 0; inset-inline-start: 0;
  font-family: var(--display); font-style: italic; font-size: 3.1rem; line-height: 1;
  color: var(--ambar); opacity: 0.9;
}
.paso h3 { font-size: var(--t-h3); margin-block-end: 0.6rem; }
.paso p { color: var(--texto-osc-suave); font-size: 1.06rem; }

/* La pequeña reina recorre la sección. No es una imagen que se
   desliza: lleva cabeceo, balanceo y la pizza responde con
   retardo — acción secundaria, como en animación clásica. */
.camino {
  position: relative;
  height: clamp(8.5rem, 14vw, 12rem);
  margin-block-start: clamp(3rem, 5.5vw, 4.5rem);
  overflow: clip;
}
.camino__suelo {
  position: absolute;
  inset-block-end: 1rem; inset-inline: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--regla-osc) 12%, var(--regla-osc) 88%, transparent);
}
.reina-anda {
  position: absolute;
  inset-block-end: 1rem;
  inset-inline-start: 0;
  width: clamp(6rem, 10.5vw, 8.5rem);
  color: var(--ambar);
}
.reina-anda svg { width: 100%; height: auto; overflow: visible; }
.reina-anda .cuerpo, .reina-anda .pizza { fill: currentColor; }
.reina-anda .pizza { transform-origin: 455px 800px; }
.reina-anda .figura { transform-origin: 50% 100%; transform-box: fill-box; }

@media (prefers-reduced-motion: no-preference) {
  .reina-anda        { animation: anda-x 19s ease-in-out infinite; }
  .reina-anda .figura{ animation: anda-y 0.66s ease-in-out infinite, anda-tilt 1.32s ease-in-out infinite; }
  .reina-anda .pizza { animation: pizza-mece 1.32s ease-in-out infinite; }
}
/* Va, se gira y vuelve: nunca camina de espaldas */
@keyframes anda-x {
  0%   { translate: -14% 0; scale: 1 1; }
  44%  { translate: calc(100% + 78vw) 0; scale: 1 1; }
  50%  { translate: calc(100% + 78vw) 0; scale: -1 1; }
  94%  { translate: -14% 0; scale: -1 1; }
  100% { translate: -14% 0; scale: 1 1; }
}
@keyframes anda-y    { 0%,100% { translate: 0 0; }        50% { translate: 0 -5.5%; } }
@keyframes anda-tilt { 0%,100% { rotate: -1.7deg; }       50% { rotate: 1.7deg; } }
@keyframes pizza-mece{ 0%,100% { rotate: -5deg; }         50% { rotate: 6deg; } }

/* ---------- 17 · ACORDEÓN --------------------------------- */
.faq { max-width: 50rem; margin-inline: auto; }
.faq details { border-block-end: 1px solid var(--regla-osc); }
.faq details:first-child { border-block-start: 1px solid var(--regla-osc); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding-block: 1.5rem; min-height: 3rem;
  font-family: var(--display); font-style: normal; font-weight: 400;
  font-size: clamp(1.22rem, 1rem + 0.66vw, 1.62rem); line-height: 1.3;
  cursor: pointer; list-style: none;
  transition: color 0.3s var(--curva);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--ambar); }
.faq summary::after {
  content: ""; flex-shrink: 0; width: 0.8rem; height: 0.8rem;
  border-inline-end: 1.5px solid currentColor; border-block-end: 1.5px solid currentColor;
  rotate: 45deg; translate: 0 -0.2rem;
  transition: rotate 0.4s var(--curva), translate 0.4s var(--curva);
}
.faq details[open] summary { color: var(--ambar); }
.faq details[open] summary::after { rotate: -135deg; translate: 0 0.15rem; }
.faq__cuerpo {
  padding-block-end: 1.7rem;
  padding-inline-start: 1.4rem;
  border-inline-start: 1px solid color-mix(in srgb, var(--ambar) 40%, transparent);
  margin-inline-start: 0.15rem;
  color: var(--texto-osc-suave);
  font-size: 1.12rem; line-height: 1.62;
  max-width: 44rem;
}

/* ---------- 18 · VISITARNOS: PLANO Y REDES ---------------- */
.datos { display: grid; gap: 1.9rem; }
.dato { min-width: 0; }
.dato__t {
  font-family: var(--sans); font-style: normal; font-size: var(--t-micro);
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--texto-osc-suave); margin-block-end: 0.45rem;
}
.dato__v { font-family: var(--display); font-style: normal; font-size: 1.42rem; line-height: 1.4; }
.dato__v a {
  display: inline-block; padding-block: 0.55rem; line-height: 1.5;
  border-block-end: 1px solid color-mix(in srgb, var(--ambar) 55%, transparent);
  transition: border-color 0.3s, color 0.3s;
}
.dato__v a:hover { color: var(--ambar); border-color: var(--ambar); }

/* Plano dibujado para esta casa, no un mapa gris de terceros */
.plano {
  /* Isla oscura dentro de una sección clara: recupera sus tokens,
     o el enlace hereda el rojo de la zona clara y cae a 2,9:1. */
  --texto-osc: #f6f1e8;
  --texto-osc-suave: #c9bdae;
  --ambar: #e2a75c;
  --ambar-alto: #f0c48b;
  position: relative;
  border-radius: var(--radio);
  overflow: clip;
  background: var(--noche);
  box-shadow: 0 26px 60px -30px rgba(0,0,0,0.9);
  border: 1px solid color-mix(in srgb, var(--hueso) 14%, transparent);
}
.plano svg { width: 100%; height: auto; display: block; }
.plano__pie {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.25rem;
  padding: 1rem 1.25rem;
  border-block-start: 1px solid color-mix(in srgb, var(--hueso) 12%, transparent);
  background: color-mix(in srgb, var(--noche) 94%, transparent);
  font-size: 0.98rem; color: #c9bdae;
}
.plano__pie a {
  font-family: var(--sans); font-style: normal; font-size: 0.79rem; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--ambar-alto); border-block-end: 1px solid currentColor; padding-block-end: 2px;
  transition: opacity 0.3s;
}
.plano__pie a:hover { opacity: 0.72; }

/* Latido del marcador */
@media (prefers-reduced-motion: no-preference) {
  .plano .pulso { animation: pulso 3.4s ease-out infinite; transform-origin: center; }
  @keyframes pulso {
    0%   { r: 10; opacity: 0.55; }
    70%  { r: 42; opacity: 0; }
    100% { r: 42; opacity: 0; }
  }
}

/* Botones de red — cápsula de vidrio oscuro con reflejo especular.
   Funciona igual sobre hueso y sobre noche: se pinta a sí misma. */
.redes { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-block-start: 0.5rem; }
.red {
  position: relative;
  display: inline-flex; align-items: center; gap: 0.65rem;
  padding: 0.9rem 1.45rem 0.9rem 1.15rem;
  min-height: 3.2rem;
  border-radius: 100px;
  overflow: hidden;
  isolation: isolate;
  font-family: var(--sans); font-style: normal; font-size: 0.78rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: #f6f1e8;
  background: linear-gradient(168deg, #342c26 0%, #1a1512 58%, #14100e 100%);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.22),
    inset 0 -1px 0 rgba(0,0,0,0.5),
    0 10px 26px -14px rgba(0,0,0,0.75);
  transition: transform 0.4s var(--curva), box-shadow 0.4s var(--curva), border-color 0.4s var(--curva);
}
/* La luz que cae por arriba, como el vidrio de un icono */
.red::before {
  content: "";
  position: absolute; inset: 1px 1px auto 1px; height: 52%;
  z-index: -1; border-radius: 100px 100px 40% 40% / 100px 100px 18% 18%;
  background: linear-gradient(to bottom, rgba(255,255,255,0.17), rgba(255,255,255,0.02) 72%, transparent);
}
/* El destello que cruza al pasar el puntero */
.red::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.26) 50%, transparent 60%);
  translate: -130% 0;
  transition: translate 0.8s var(--curva);
}
.red:hover, .red:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(255,255,255,0.3);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.3),
    inset 0 -1px 0 rgba(0,0,0,0.5),
    0 16px 34px -16px rgba(0,0,0,0.8);
}
.red:hover::after, .red:focus-visible::after { translate: 130% 0; }
.red svg { width: 1.4rem; height: 1.4rem; flex-shrink: 0; }
.red--tt svg { fill: #f6f1e8; }
.red--wa svg { fill: #25d366; }
@media (prefers-reduced-motion: reduce) { .red, .red:hover { transform: none; } .red::after { display: none; } }

/* ---------- 19 · CIERRE Y PIE ----------------------------- */
.cierre { text-align: center; position: relative; overflow: clip; }

/* La reina del cierre: respira, saluda con la pizza y te mira. */
.reina-cierre {
  width: clamp(8rem, 15vw, 13rem);
  margin: 0 auto 2.6rem;
  color: var(--hueso);
  transition: transform 0.8s var(--curva-suave);
}
.reina-cierre svg { width: 100%; height: auto; overflow: visible; }
.reina-cierre .cuerpo, .reina-cierre .pizza { fill: currentColor; }
.reina-cierre .pizza { transform-origin: 455px 800px; }
.reina-cierre .figura { transform-origin: 50% 100%; transform-box: fill-box; }
.reina-cierre .destello { transform-origin: 300px 400px; transform-box: view-box; }

@media (prefers-reduced-motion: no-preference) {
  .reina-cierre .figura   { animation: cierre-respira 6s ease-in-out infinite; }
  .reina-cierre .pizza    { animation: cierre-saluda 6s ease-in-out infinite; }
  .reina-cierre .destello { animation: destella 6s ease-in-out infinite; }
}
@keyframes cierre-respira {
  0%, 100% { rotate: 0deg;    translate: 0 0;     scale: 1 1; }
  28%      { rotate: -3.4deg; translate: 0 -1.8%; scale: 1.014 0.993; }
  50%      { rotate: 1.8deg;  translate: 0 0;     scale: 1 1; }
  74%      { rotate: -1.1deg; translate: 0 -0.8%; scale: 1.006 0.998; }
}
@keyframes cierre-saluda {
  0%, 100% { rotate: 0deg; }
  20%      { rotate: -17deg; }
  32%      { rotate: 10deg; }
  44%      { rotate: -6deg; }
  56%      { rotate: 2.5deg; }
  68%      { rotate: 0deg; }
}
@keyframes destella {
  0%, 14%, 44%, 100% { opacity: 0; scale: 0.55; }
  24%                { opacity: 0.9; scale: 1.2; }
  32%                { opacity: 0.3; scale: 1; }
}
/* Se inclina hacia quien la mira */
.cierre:hover .reina-cierre { transform: rotate(-2.2deg) translateY(-5px); }
@media (prefers-reduced-motion: reduce) { .cierre:hover .reina-cierre { transform: none; } }

.pie { border-block-start: 1px solid var(--regla-osc); padding-block: 3rem 2.25rem; font-size: 1rem; color: var(--texto-osc-suave); }
.pie__fila { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem 2rem; }
.pie__redes { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; }
.pie__redes a { padding-block: 0.7rem; transition: color 0.3s; }
.pie__redes a:hover { color: var(--ambar); }
.pie__legal { font-size: 0.92rem; opacity: 0.72; max-width: 42rem; }

/* ---------- 20 · REVELADO LIGADO AL SCROLL ---------------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .revela {
      animation: revela linear both;
      animation-timeline: view();
      animation-range: cover 2% cover 28%;
    }
    @keyframes revela { from { opacity: 0; translate: 0 26px; } to { opacity: 1; translate: 0 0; } }
  }
}

/* ---------- 21 · ACCESORIOS ------------------------------- */
.saltar {
  position: absolute; inset-block-start: 0.5rem; inset-inline-start: 0.5rem; z-index: 100;
  padding: 0.85rem 1.1rem; background: var(--hueso); color: var(--tinta);
  font-family: var(--sans); font-style: normal; font-size: 0.8rem; border-radius: var(--radio);
  translate: 0 -160%; transition: translate 0.25s var(--curva);
}
.saltar:focus { translate: 0 0; }

.flotante {
  position: fixed; z-index: 55;
  inset-block-end: clamp(1rem, 3vw, 1.75rem); inset-inline-end: clamp(1rem, 3vw, 1.75rem);
  width: 3.4rem; height: 3.4rem; display: grid; place-items: center; border-radius: 50%;
  background: #25d366; color: #08331a; box-shadow: 0 10px 30px -10px rgba(0,0,0,0.8);
  transition: transform 0.35s var(--curva);
}
.flotante:hover { transform: scale(1.07); }
.flotante svg { width: 1.7rem; height: 1.7rem; }
@media (prefers-reduced-motion: reduce) { .flotante:hover { transform: none; } }

/* ---------- 22 · ANCLAS BAJO LA BARRA FIJA ---------------- */
[id] { scroll-margin-top: 5.75rem; }
#inicio { scroll-margin-top: 0; }

/* ---------- 23 · RÓTULOS DEL PLANO (fuera del SVG) -------- */
/* Dentro del SVG, el texto escala con el dibujo: en teléfono
   caía a 5,6 px. En HTML mantiene su tamaño en píxeles. */
.plano__lienzo { position: relative; }
.plano__lienzo svg { width: 100%; height: auto; display: block; }

.rot {
  position: absolute;
  font-family: var(--sans);
  font-style: normal;
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #a89b8c;
  white-space: nowrap;
  pointer-events: none;
  text-shadow: 0 1px 3px rgba(0,0,0,0.85);
}
.rot--vert { transform: rotate(-90deg); transform-origin: left center; }
.rot--parque { color: #7d8f73; letter-spacing: 0.2em; }
.rot--norte { color: #b6aa9c; font-size: 0.8rem; letter-spacing: 0.1em; }

.rot--aqui {
  left: 50%;
  top: 58%;
  translate: -50% 0;
  text-align: center;
  text-transform: none;
  letter-spacing: 0.13em;
  font-size: 0.8rem;
  color: #bcb0a2;
  display: grid;
  gap: 0.25rem;
}
.rot--aqui b {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.4rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--hueso);
}
@media (max-width: 30rem) {
  .rot { font-size: 0.78rem; letter-spacing: 0.07em; }
  .rot--aqui b { font-size: 1.15rem; }
}

/* ---------- B · MOLDURA DE MUSEO -------------------------- */
/* Marco de tres cuerpos: madera dorada, filete oscuro y
   passe-partout. La obra queda dentro, nunca cruzada por nada. */
.obra__marco {
  position: relative;
  border-radius: 2px;
  padding: clamp(0.55rem, 1.3vw, 1rem);
  background:
    linear-gradient(145deg, #6b5327 0%, #a3823f 14%, #d9bd77 30%, #8e6f34 48%,
                            #c8a75f 66%, #7a5f2c 84%, #5c4720 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.22),
    inset 0 0 0 clamp(0.55rem, 1.3vw, 1rem) rgba(0,0,0,0.34),
    0 26px 58px -28px rgba(0,0,0,0.95),
    0 6px 14px -8px rgba(0,0,0,0.6);
  overflow: hidden;
  transition: box-shadow 0.6s var(--curva), transform 0.6s var(--curva);
}
/* Passe-partout: la cartulina entre moldura y obra */
.obra__paspartu {
  position: relative;
  padding: clamp(0.5rem, 1.2vw, 0.95rem);
  background: linear-gradient(160deg, #efe7d8, #ded2bd);
  box-shadow: inset 0 2px 5px rgba(0,0,0,0.28);
}
.obra__paspartu img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  box-shadow: 0 2px 10px -2px rgba(0,0,0,0.55);
  transition: scale 1.1s var(--curva);
}
.obra:hover .obra__marco { transform: translateY(-4px); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.3), inset 0 0 0 clamp(0.55rem,1.3vw,1rem) rgba(0,0,0,0.34), 0 34px 68px -28px rgba(0,0,0,0.95); }
.obra:hover .obra__paspartu img { scale: 1.035; }
@media (prefers-reduced-motion: reduce) {
  .obra:hover .obra__marco { transform: none; }
  .obra:hover .obra__paspartu img { scale: 1; }
}

/* Cartela: la plaquita de latón del museo */
.cartela {
  margin-block-start: 1.1rem;
  padding-block-start: 0.85rem;
  border-block-start: 1px solid color-mix(in srgb, var(--ambar) 34%, transparent);
  display: grid;
  gap: 0.3rem;
  text-align: center;
}
.cartela b {
  font-family: var(--sans);
  font-style: normal;
  font-weight: 400;
  font-size: 0.79rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ambar);
}
.cartela span { font-size: 1.04rem; line-height: 1.4; color: var(--texto-osc-suave); }

/* ---------- C · NÚMERO ROMANO ---------------------------- */
/* Cifra en versalitas romanas, con filetes a los lados —
   como la numeración de un frontispicio. */
.romano {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-block-end: 1.5rem;
  color: var(--ambar);
}
.romano i {
  font-family: var(--display);
  font-style: normal;
  font-weight: 400;
  font-size: clamp(1.5rem, 1.15rem + 1.35vw, 2.3rem);
  line-height: 1;
  letter-spacing: 0.12em;
  padding-inline-end: 0.12em;
  font-variant: small-caps;
}
.romano::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, currentColor, transparent);
  opacity: 0.42;
}
.tarjeta:hover .romano::after { opacity: 0.75; }
.romano::after { transition: opacity 0.5s var(--curva); }

/* Rombo entre la cifra y el filete */
.romano em {
  width: 4px; height: 4px;
  rotate: 45deg;
  background: currentColor;
  opacity: 0.65;
  flex-shrink: 0;
}

/* ---------- D · DESPLIEGUE DE TEXTO ----------------------- */
/* El texto no aparece pegado: se desvela por línea al entrar.
   Ligado al scroll, sin JavaScript. Si el navegador no lo
   entiende, el texto simplemente ya está ahí. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .desvela {
      animation: desvela linear both;
      animation-timeline: view();
      animation-range: cover 3% cover 30%;
    }
    @keyframes desvela {
      from { opacity: 0; translate: 0 1.1rem; clip-path: inset(0 0 100% 0); filter: blur(3px); }
      60%  { opacity: 1; }
      to   { opacity: 1; translate: 0 0;      clip-path: inset(0 0 -12% 0); filter: blur(0); }
    }

    /* Hijos que entran en cascada: cada uno en su propio tramo */
    .escalona > * {
      animation: sube linear both;
      animation-timeline: view();
    }
    @keyframes sube { from { opacity: 0; translate: 0 2rem; } to { opacity: 1; translate: 0 0; } }
    .escalona > *:nth-child(1) { animation-range: cover 2%  cover 26%; }
    .escalona > *:nth-child(2) { animation-range: cover 5%  cover 29%; }
    .escalona > *:nth-child(3) { animation-range: cover 8%  cover 32%; }
    .escalona > *:nth-child(4) { animation-range: cover 11% cover 35%; }
    .escalona > *:nth-child(5) { animation-range: cover 14% cover 38%; }
    .escalona > *:nth-child(6) { animation-range: cover 17% cover 41%; }
    .escalona > *:nth-child(7) { animation-range: cover 20% cover 44%; }
    .escalona > *:nth-child(8) { animation-range: cover 23% cover 47%; }
      }
}

/* ---------- E · REALEZA ----------------------------------- */
/* Los pasos llevan corona en vez de número desnudo. */
.paso--regio { padding-block-start: 4.6rem; }
.paso--regio::before { content: none; }
.paso__corona {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--ambar);
}
.paso__corona svg { width: 2.1rem; height: auto; fill: currentColor; }
.paso__corona i {
  font-family: var(--display);
  font-style: normal;
  font-size: 1.5rem;
  letter-spacing: 0.14em;
  font-variant: small-caps;
}

/* Guarda de esquina: dos filetes que insinúan un marco */
.guarda { position: relative; }
.guarda::before, .guarda::after {
  content: "";
  position: absolute;
  width: clamp(1.5rem, 3vw, 2.4rem);
  height: clamp(1.5rem, 3vw, 2.4rem);
  border: 1px solid color-mix(in srgb, var(--ambar) 42%, transparent);
  pointer-events: none;
}
.guarda::before { inset-block-start: 0; inset-inline-start: 0; border-inline-end: 0; border-block-end: 0; }
.guarda::after  { inset-block-end: 0;  inset-inline-end: 0;  border-inline-start: 0; border-block-start: 0; }

/* ---------- F · LA CARTA, COMO UNA MINUTA ----------------- */
.carta__grupo { position: relative; }

.plato { position: relative; }
/* Punto de guía al pasar el puntero — la mano del maître */
.plato::before {
  content: "";
  position: absolute;
  inset-block-start: 1.55rem;
  inset-inline-start: -1.05rem;
  width: 5px; height: 5px;
  rotate: 45deg;
  background: var(--ambar);
  opacity: 0;
  transition: opacity 0.4s var(--curva), translate 0.4s var(--curva);
  translate: -0.4rem 0;
}
.plato:hover::before { opacity: 0.9; translate: 0 0; }
@media (max-width: 40rem) { .plato::before { display: none; } }

/* ---------- H · ACORDEÓN CON NUMERACIÓN ------------------- */
.faq summary { gap: 1.1rem; align-items: baseline; }
.faq__n {
  flex-shrink: 0;
  width: 2.4rem;
  font-family: var(--display);
  font-style: normal;
  font-size: 0.95rem;
  font-variant: small-caps;
  letter-spacing: 0.14em;
  color: var(--ambar);
  opacity: 0.75;
  transition: opacity 0.35s var(--curva);
}
.faq__q { flex: 1; }
.faq details[open] .faq__n { opacity: 1; }
.faq__cuerpo { margin-inline-start: 2.55rem; }
@media (max-width: 34rem) {
  .faq__n { width: 1.9rem; font-size: 0.88rem; }
  .faq__cuerpo { margin-inline-start: 0; padding-inline-start: 1.1rem; }
}
/* Un filete de luz recorre la pregunta abierta */
.faq details { position: relative; }
.faq details::after {
  content: "";
  position: absolute;
  inset-block-end: -1px; inset-inline-start: 0;
  height: 1px; width: 100%;
  background: linear-gradient(to right, var(--ambar), transparent 62%);
  scale: 0 1;
  transform-origin: left;
  transition: scale 0.55s var(--curva);
}
.faq details[open]::after { scale: 1 1; }
/* ============================================================
   PICCOLA REGINA · SISTEMA ORNAMENTAL
   Volutas, cenefas, molduras y luz. Todo dibujado a medida
   para esta marca. Nada de iconos sueltos.
   ============================================================ */

/* ---------- 1 · MOLDURA DE GALERÍA ------------------------ */
/* Marco de cuatro cuerpos, como una moldura tallada:
   canto exterior, gola dorada, filete oscuro y passe-partout. */
.moldura {
  position: relative;
  padding: clamp(0.75rem, 1.7vw, 1.4rem);
  border-radius: 3px;
  background:
    linear-gradient(145deg,
      #4a3818 0%, #8a6c30 8%, #d8bd7c 20%, #f0dcae 26%, #a68445 38%,
      #6d5426 52%, #c9a962 68%, #eddcb0 74%, #8f7135 86%, #4a3818 100%);
  box-shadow:
    /* canto exterior */
    0 0 0 1px rgba(0,0,0,0.55),
    inset 0 0 0 1px rgba(255,245,214,0.5),
    /* gola: sombra que hunde la moldura hacia dentro */
    inset 0 0 clamp(0.5rem,1vw,0.9rem) clamp(0.2rem,0.4vw,0.35rem) rgba(60,40,10,0.55),
    /* peso */
    0 30px 66px -30px rgba(0,0,0,0.95),
    0 8px 18px -10px rgba(0,0,0,0.7);
}
/* Filete interior oscuro, entre moldura y passe-partout */
.moldura__filete {
  position: relative;
  padding: clamp(0.45rem, 1.1vw, 0.9rem);
  background: linear-gradient(160deg, #efe7d7, #ddd0b9 60%, #cdbfa4);
  box-shadow:
    inset 0 0 0 1px rgba(90,70,30,0.45),
    inset 0 3px 9px rgba(0,0,0,0.3);
}
.moldura__filete > img,
.moldura__filete > picture > img {
  display: block;
  width: 100%;
  height: auto;
  box-shadow: 0 3px 14px -3px rgba(0,0,0,0.6);
}

/* Volutas en las cuatro esquinas de la moldura */
.moldura__voluta {
  position: absolute;
  width: clamp(1.6rem, 3.4vw, 2.9rem);
  height: auto;
  color: #f2ddab;
  opacity: 0.92;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.6));
  pointer-events: none;
  z-index: 2;
}
.moldura__voluta svg { width: 100%; height: auto; fill: currentColor; }
.moldura__voluta--ne { inset-block-start: -2px; inset-inline-end: -2px; }
.moldura__voluta--no { inset-block-start: -2px; inset-inline-start: -2px; scale: -1 1; }
.moldura__voluta--se { inset-block-end: -2px; inset-inline-end: -2px; scale: 1 -1; }
.moldura__voluta--so { inset-block-end: -2px; inset-inline-start: -2px; scale: -1 -1; }

/* Brillo que recorre el dorado al pasar el puntero */
.moldura::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 3px;
  background: linear-gradient(112deg, transparent 36%, rgba(255,248,222,0.4) 48%, transparent 60%);
  opacity: 0;
  transition: opacity 0.5s var(--curva), translate 1.1s var(--curva);
  translate: -35% 0;
  pointer-events: none;
  z-index: 3;
  mix-blend-mode: screen;
}
.obra:hover .moldura::after, .pieza-mayor:hover .moldura::after { opacity: 1; translate: 35% 0; }
@media (prefers-reduced-motion: reduce) { .moldura::after { display: none; } }

/* ---------- 2 · PIEZA MAYOR (obra principal) --------------- */
.pieza-mayor {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: center;
  margin-block-end: clamp(3rem, 6vw, 4.5rem);
}
@media (min-width: 58rem) { .pieza-mayor { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); } }
.pieza-mayor__texto { min-width: 0; max-width: 32rem; }
.pieza-mayor__marco { min-width: 0; }
.pieza-mayor .moldura__filete > img { aspect-ratio: 1; object-fit: cover; }

/* Cartela de latón, con su tornillo */
.cartela-museo {
  margin-block-start: 1.4rem;
  margin-inline: auto;
  width: fit-content;
  max-width: 100%;
  padding: 0.7rem 1.5rem;
  text-align: center;
  border-radius: 2px;
  background: linear-gradient(160deg, #c8ab63, #8e7434 55%, #b59a53);
  color: #241a06;
  box-shadow: inset 0 1px 0 rgba(255,248,214,0.6), 0 6px 16px -8px rgba(0,0,0,0.8);
}
.cartela-museo b {
  display: block;
  font-family: var(--sans);
  font-style: normal;
  font-weight: 500;
  font-size: 0.74rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.cartela-museo span {
  display: block;
  margin-block-start: 0.25rem;
  font-size: 0.98rem;
  font-style: italic;
  opacity: 0.86;
}

/* ---------- 3 · CENEFA DE ARABESCOS ----------------------- */
/* Separador de acto: dos volutas afrontadas y un rombo. */

/* ---------- 5 · FILIGRANA DE FONDO ------------------------ */
/* Marca de agua heráldica, tono sobre tono. Nunca compite. */
.filigrana {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  translate: -50% -50%;
  width: min(56rem, 92%);
  color: var(--ambar);
  opacity: 0.045;
  pointer-events: none;
  z-index: 0;
}
.filigrana svg { width: 100%; height: auto; fill: currentColor; }
.claro .filigrana { opacity: 0.05; }

/* ---------- 6 · TITULARES CON LUZ ------------------------- */
/* La cursiva del titular recibe un brillo que la recorre muy
   despacio, como el reflejo del pan de oro. */
.titulo em, .heroe__titulo em {
  /* El gradiente NO puede usar currentColor: con color:transparent
     en el mismo elemento, currentColor vale transparente y el
     acento desaparece. Va el token literal. */
  background-image: linear-gradient(100deg,
    var(--ambar) 0%, var(--ambar) 38%,
    color-mix(in srgb, #fff6e0 90%, var(--ambar)) 47%,
    var(--ambar) 56%, var(--ambar) 100%);
  background-size: 260% 100%;
  background-position: 120% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
@media (prefers-reduced-motion: no-preference) {
  .titulo em, .heroe__titulo em { animation: lustre 9s ease-in-out 1.5s infinite; }
  @keyframes lustre {
    0%, 62%, 100% { background-position: 120% 0; }
    86%           { background-position: -30% 0; }
  }
}
@media (prefers-reduced-motion: reduce) {
  .titulo em, .heroe__titulo em {
    background: none; -webkit-text-fill-color: currentColor; color: var(--ambar);
  }
}

/* ---------- 7 · TEXTO QUE ENTRA POR PALABRAS -------------- */
/* Cada palabra sube con su propio retardo, ligado al scroll.
   Sin JS: las palabras se envuelven en el HTML. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
/* Con `entry` el rango dura LO QUE MIDE la pieza: un titular de 69 px
   despliega en 69 px de scroll, que se percibe como un parpadeo. `cover`
   mide alto de pieza + alto de pantalla, así que el despliegue dura casi
   lo mismo mida lo que mida. Los porcentajes se quedan bajos (24-40 %)
   para que nada del pie de página se quede a medias: una pieza al final
   del documento nunca llega a recorrer su `cover` entero. */
    .porpalabras > span {
      display: inline-block;
      animation: palabra linear both;
      animation-timeline: view();
    }
    @keyframes palabra {
      from { opacity: 0; translate: 0 0.5em; rotate: -1.4deg; filter: blur(4px); }
      to   { opacity: 1; translate: 0 0;     rotate: 0deg;    filter: blur(0); }
    }
    .porpalabras > span:nth-child(1)  { animation-range: cover 2%  cover 22%; }
    .porpalabras > span:nth-child(2)  { animation-range: cover 4%  cover 24%; }
    .porpalabras > span:nth-child(3)  { animation-range: cover 6%  cover 26%; }
    .porpalabras > span:nth-child(4)  { animation-range: cover 8%  cover 28%; }
    .porpalabras > span:nth-child(5)  { animation-range: cover 10% cover 30%; }
    .porpalabras > span:nth-child(6)  { animation-range: cover 12% cover 32%; }
    .porpalabras > span:nth-child(7)  { animation-range: cover 14% cover 34%; }
    .porpalabras > span:nth-child(8)  { animation-range: cover 16% cover 36%; }
    .porpalabras > span:nth-child(9)  { animation-range: cover 18% cover 38%; }
    .porpalabras > span:nth-child(n+10) { animation-range: cover 18% cover 38%; }
  }
}

/* ---------- 8 · PARALAJE SUAVE ---------------------------- */
/* Las imágenes de los pares respiran al pasar por pantalla. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .respira {
      animation: respira linear both;
      animation-timeline: view();
      animation-range: cover;
    }
    @keyframes respira {
      from { translate: 0 2.2%; scale: 1.045; }
      to   { translate: 0 -2.2%; scale: 1.045; }
    }
  }
}

/* ---------- 9 · REGLA ORNADA DE LA CARTA ------------------ */
.carta__titulo { border-block-end: 0; padding-block-end: 1.1rem; }
.carta__titulo::after { content: none; }
.regla-ornada {
  display: block;
  width: 100%;
  height: 12px;
  margin-block-end: 1.5rem;
  color: var(--ambar);
  opacity: 0.72;
}
.regla-ornada svg { width: 100%; height: 100%; }
.regla-ornada path { stroke: currentColor; stroke-width: 1.1; fill: none; }
.regla-ornada circle { fill: currentColor; }

/* ---------- 10 · NÚMERO ROMANO ORLADO --------------------- */
.romano {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-block-end: 1.4rem;
  padding: 0.3rem 0.95rem 0.34rem;
  color: var(--ambar);
  border-radius: 2px;
  border: 1px solid color-mix(in srgb, currentColor 32%, transparent);
  background: color-mix(in srgb, currentColor 7%, transparent);
  position: relative;
}
.romano::after { content: none; }
.romano i {
  font-family: var(--display);
  font-style: normal;
  font-weight: 500;
  font-size: clamp(1.05rem, 0.95rem + 0.45vw, 1.4rem);
  line-height: 1;
  letter-spacing: 0.16em;
  padding-inline-start: 0.08em;
}
.romano em {
  width: 3.5px; height: 3.5px; rotate: 45deg;
  background: currentColor; opacity: 0.8; flex-shrink: 0;
}
/* Filete superior del cartucho: no cruza la cifra */
.romano::before {
  content: "";
  position: absolute;
  inset-inline: 22%;
  inset-block-start: -1px;
  height: 1px;
  background: linear-gradient(to right, transparent, currentColor, transparent);
  opacity: 0.85;
}
.tarjeta:hover .romano { background: color-mix(in srgb, currentColor 13%, transparent); border-color: color-mix(in srgb, currentColor 55%, transparent); }
.romano { transition: background-color 0.45s var(--curva), border-color 0.45s var(--curva); }

/* ---------- 11 · CORONA DE LOS PASOS ---------------------- */
.paso__corona { gap: 0.55rem; }
.paso__corona svg { width: 1.75rem; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.25)); }
.paso__corona i { font-size: 1.35rem; font-weight: 500; letter-spacing: 0.16em; }
/* Un halo tenue detrás de la corona */
.paso__corona::before {
  content: "";
  position: absolute;
  inset-block-start: -0.55rem;
  inset-inline-start: -0.7rem;
  width: 3.1rem; height: 3.1rem;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--ambar) 22%, transparent), transparent 68%);
  z-index: -1;
}
.paso__corona { position: absolute; }

/* ---------- 12 · VIÑETA FINAL DEL PIE --------------------- */
.pie__orn {
  display: block;
  width: clamp(8rem, 22vw, 14rem);
  margin: 0 auto 2rem;
  color: var(--ambar);
  opacity: 0.55;
}
.pie__orn svg { width: 100%; height: auto; stroke: currentColor; fill: none; stroke-width: 1.1; }
.pie__orn .lleno { fill: currentColor; stroke: none; }

/* ---------- 13 · EL ACENTO ES UNA UNIDAD ------------------ */
/* No se parte en palabras: `background-clip:text` no sobrevive a
   hijos inline-block y el acento quedaba invisible. El <em>
   entero entra como una pieza, y conserva su lustre. */
.porpalabras > em {
  display: inline-block;
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .porpalabras > em {
      animation: palabra linear both;
      animation-timeline: view();
      animation-range: cover 14% cover 34%;
    }
  }
}
.heroe__titulo em { animation: lustre 9s ease-in-out 1.5s infinite; }

/* ============================================================
   12 · TALLER ORNAMENTAL
   Todas las piezas salen del mismo taller: un motivo se dibuja
   UNA vez y se rota N veces sobre un centro. La simetría es
   aritmética, no pulso — por eso los rosetones cierran.
   Piezas: rosetón · medalla · esquinera · divisor · regla ·
   nodo · corona. Se instancian con <use>; el trazo no escala,
   así la filigrana se lee igual a 40 px que a 600 px.
   ============================================================ */
svg.orn { display: block; fill: none; stroke: currentColor; stroke-width: 1.15; }
svg.orn .lleno { fill: currentColor; stroke: none; }
svg.orn path, svg.orn circle { vector-effect: non-scaling-stroke; }

/* ---------- 12.1 · MARCO REAL DE SECCIÓN ------------------- */
/* Cuatro esquineras (cuarto de rosetón + brazo de acanto) y dos
   nodos laterales. Es decoración pura: aria-hidden y sin ratón. */
.seccion > .marco-real {
  position: absolute;
  inset: clamp(0.7rem, 1.9vw, 2rem) clamp(0.55rem, 1.5vw, 1.9rem);
  pointer-events: none;
  z-index: 0;
  /* --ambar vale rojo dentro de .claro y ambar en las bandas oscuras:
     un solo token y el ornamento se lee en las dos caras. */
  color: var(--ambar);
}
.marco-real__e {
  position: absolute;
  width: clamp(4.6rem, 10vw, 9.5rem);
  aspect-ratio: 1;
  opacity: 0.42;
}
.seccion:not(.claro) > .marco-real .marco-real__e { opacity: 0.30; }
.seccion:not(.claro) > .marco-real .marco-real__lado { opacity: 0.28; }
.marco-real__e--no { inset-block-start: 0; inset-inline-start: 0; }
.marco-real__e--ne { inset-block-start: 0; inset-inline-end: 0; scale: -1 1; }
.marco-real__e--so { inset-block-end: 0; inset-inline-start: 0; scale: 1 -1; }
.marco-real__e--se { inset-block-end: 0; inset-inline-end: 0; scale: -1 -1; }

/* Nodo lateral: la línea la pone el CSS, el ornamento el SVG.
   Así el motivo nunca se deforma por muy alta que sea la sección. */
.marco-real__lado {
  position: absolute;
  inset-block: 22%;
  width: clamp(1.6rem, 2.4vw, 2.6rem);
  display: none;
  opacity: 0.40;
}
.marco-real__lado::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: calc(50% - 0.5px);
  width: 1px;
  background: linear-gradient(to bottom, transparent, currentColor 18%, currentColor 82%, transparent);
}
.marco-real__lado svg {
  position: absolute;
  inset-block-start: 50%;
  inset-inline: 0;
  translate: 0 -50%;
  width: 100%;
  height: auto;
}
.marco-real__lado--i { inset-inline-start: 0; }
.marco-real__lado--d { inset-inline-end: 0; }
@media (min-width: 78rem) { .marco-real__lado { display: block; } }
@media (max-width: 46rem) { .marco-real__e { opacity: 0.24; width: 3.9rem; } }

/* Las esquineras se despliegan al entrar la sección: giran un
   grado y medio hacia su sitio mientras aparecen. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .marco-real__e {
      animation: esquina-entra linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 26%;
    }
    @keyframes esquina-entra {
      from { opacity: 0; translate: 0 1.1rem; }
      to   { opacity: var(--op-esq, 0.42); translate: 0 0; }
    }
  }
}

/* ---------- 12.2 · DIVISOR Y REGLA ------------------------- */
.divisor {
  display: block;
  width: min(100%, 34rem);
  margin: clamp(3.4rem, 6vw, 5.5rem) auto 0;
  color: var(--ambar);
  opacity: 0.85;
}

.divisor svg { width: 100%; height: auto; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .divisor {
      animation: divisor-abre linear both;
      animation-timeline: view();
      animation-range: cover 3% cover 32%;
    }
    @keyframes divisor-abre {
      from { opacity: 0; scale: 0.72 1; }
      to   { opacity: 0.85; scale: 1 1; }
    }
  }
}

.regla-ornada {
  display: block;
  width: min(100%, 20rem);
  margin-block-start: 0.85rem;
  color: var(--ambar);
  opacity: 0.8;
}
.regla-ornada svg { width: 100%; height: auto; }

/* ---------- 12.3 · ROSETÓN DE FONDO ------------------------ */
/* Marca de agua: gira un cuarto de vuelta a lo largo del scroll
   de su sección. Es el único movimiento continuo del fondo. */
.filigrana {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  translate: -50% -50%;
  width: min(120vw, 58rem);
  aspect-ratio: 1;
  color: var(--ambar);
  opacity: 0.055;
  pointer-events: none;
  z-index: 0;
}
.seccion:not(.claro) .filigrana { opacity: 0.11; }
.filigrana svg { width: 100%; height: 100%; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .filigrana {
      animation: roseton-gira linear both;
      animation-timeline: view();
      animation-range: cover;
    }
    @keyframes roseton-gira {
      from { rotate: -11deg; }
      to   { rotate: 11deg; }
    }
  }
}

/* ---------- 12.4 · CORONA DE LOS PASOS --------------------- */
.paso__corona svg { width: 2.05rem; height: auto; }

/* ============================================================
   13 · LOS SEIS ACTOS  (sección «La experiencia»)
   Deja de ser una rejilla de fichas: seis actos colgados de un
   eje que se dibuja conforme se baja, cada uno con su medalla
   de rosetón y su cifra romana. El eje va al centro en pantalla
   ancha y al costado en teléfono.
   ============================================================ */
.actos {
  --medalla: clamp(3.6rem, 7.2vw, 5.6rem);
  list-style: none;
  position: relative;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(2.2rem, 4.4vw, 3.4rem);
}
/* El eje: un filete que crece de arriba abajo con el scroll. */
.actos::before {
  content: "";
  position: absolute;
  inset-block: calc(var(--medalla) * 0.5) calc(var(--medalla) * 0.5);
  inset-inline-start: calc(var(--medalla) * 0.5);
  width: 1px;
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--ambar) 62%, transparent),
    color-mix(in srgb, var(--ambar) 26%, transparent));
  transform-origin: top;
}
.acto {
  display: grid;
  grid-template-columns: var(--medalla) minmax(0, 1fr);
  gap: clamp(1.1rem, 2.6vw, 1.9rem);
  align-items: start;
}
.acto__eje { grid-column: 1; }
.acto__ficha { grid-column: 2; min-width: 0; }

.acto__medalla {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--medalla);
  aspect-ratio: 1;
  color: var(--ambar);
  background: var(--fondo);
  border-radius: 50%;
}

.acto__medalla svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.acto__medalla i {
  position: relative;
  font-family: var(--display);
  font-style: normal;
  font-size: clamp(0.95rem, 1.7vw, 1.32rem);
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1;
  color: var(--ambar);
  padding-inline-start: 0.06em;   /* compensa el espaciado a la derecha */
}
.acto__t {
  font-size: var(--t-h3);
  line-height: 1.12;
  margin-block-end: 0.6rem;
}
.acto__p { color: var(--texto-osc-suave); font-size: 1.08rem; line-height: 1.6; max-width: 34rem; }
.acto__filete {
  display: block;
  width: 3.2rem;
  height: 1px;
  margin-block: 0.95rem 0;
  background: linear-gradient(to right, color-mix(in srgb, var(--ambar) 70%, transparent), transparent);
}

@media (min-width: 62rem) {
  .actos { gap: clamp(2.6rem, 3.6vw, 3.8rem); }
  .actos::before {
    inset-inline-start: calc(50% - 0.5px);
  }
  .acto {
    grid-template-columns: minmax(0, 1fr) var(--medalla) minmax(0, 1fr);
    gap: 0 clamp(1.6rem, 3.4vw, 3.2rem);
    align-items: center;
  }
  .acto__eje { grid-column: 2; grid-row: 1; }
  .acto:nth-child(odd) .acto__ficha  { grid-column: 1; grid-row: 1; text-align: right; }
  .acto:nth-child(even) .acto__ficha { grid-column: 3; grid-row: 1; }
  .acto:nth-child(odd) .acto__p { margin-inline-start: auto; }
  .acto:nth-child(odd) .acto__filete { margin-inline-start: auto; background: linear-gradient(to left, color-mix(in srgb, var(--ambar) 70%, transparent), transparent); }
}

/* La medalla gira mientras el acto cruza la pantalla, y la ficha
   entra desde su lado. Todo colgado del scroll: cero JavaScript. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .actos::before {
      scale: 1 0;
      animation: eje-crece linear both;
      animation-timeline: view();
      animation-range: cover 2% cover 78%;
    }
    @keyframes eje-crece { to { scale: 1 1; } }

    .acto__medalla svg {
      animation: medalla-gira linear both;
      animation-timeline: view();
      animation-range: cover;
    }
    @keyframes medalla-gira { from { rotate: -34deg; } to { rotate: 34deg; } }

    .acto__medalla {
      animation: medalla-entra linear both;
      animation-timeline: view();
      animation-range: cover 2% cover 27%;
    }
    @keyframes medalla-entra {
      from { opacity: 0; scale: 0.55; }
      to   { opacity: 1; scale: 1; }
    }

    .acto__ficha {
      animation: ficha-entra linear both;
      animation-timeline: view();
      animation-range: cover 4% cover 31%;
    }
    @keyframes ficha-entra {
      from { opacity: 0; translate: 1.4rem 0; filter: blur(3px); }
      to   { opacity: 1; translate: 0 0;      filter: blur(0); }
    }
    .acto:nth-child(odd) .acto__ficha { animation-name: ficha-entra-izq; }
    @media (max-width: 61.99rem) {
      .acto__ficha, .acto:nth-child(odd) .acto__ficha { animation-name: ficha-entra-abajo; }
      @keyframes ficha-entra-abajo {
        from { opacity: 0; translate: 0 1.1rem; filter: blur(3px); }
        to   { opacity: 1; translate: 0 0;      filter: blur(0); }
      }
    }
    @keyframes ficha-entra-izq {
      from { opacity: 0; translate: -1.4rem 0; filter: blur(3px); }
      to   { opacity: 1; translate: 0 0;       filter: blur(0); }
    }
    .acto__filete {
      animation: filete-tira linear both;
      animation-timeline: view();
      animation-range: cover 9% cover 36%;
      transform-origin: left center;
    }
    .acto:nth-child(odd) .acto__filete { transform-origin: right center; }
    @keyframes filete-tira { from { scale: 0 1; } to { scale: 1 1; } }
  }
}
@supports not (animation-timeline: view()) {
  .actos::before { scale: 1 1; }
}
.acto__medalla:hover svg { color: var(--ambar); }

/* ---------- 14 · LUSTRE SOSTENIDO EN LOS TÍTULOS ----------- */
/* Cada acento recorre su pan de oro cada 11 s, desfasado por
   sección para que no latan todos a la vez. */
@media (prefers-reduced-motion: no-preference) {
  .titulo em { animation: lustre 11s ease-in-out 2s infinite; }
  .seccion:nth-of-type(even) .titulo em { animation-delay: 5.5s; }
}