@import url("/assets/fonts/fonts-32662a54.css");

/* ==========================================================================
   Alicia Sevilla — sistema de diseño
   Negro profundo · rojo amapola · oro · crema
   ========================================================================== */

:root {
  /* superficies */
  --ink:        #0a0708;
  --ink-2:      #100b0c;
  --ink-3:      #17100f;
  --ink-4:      #1e1514;

  /* acentos */
  --red:        #c2101c;
  --red-lit:    #e01b26;
  --red-deep:   #6b0a11;
  --gold:       #d7a44c;
  --gold-lit:   #eccb8f;

  /* texto */
  --cream:      #f4efe9;
  --cream-dim:  #cec4bb;
  --muted:      #968b84;

  /* líneas */
  --line:       rgba(244, 239, 233, 0.14);
  --line-soft:  rgba(244, 239, 233, 0.07);

  /* tipografía */
  --f-display: "Playfair Display", "Iowan Old Style", Georgia, serif;
  --f-body:    "EB Garamond", Georgia, "Times New Roman", serif;
  --f-ui:      "Jost", "Helvetica Neue", system-ui, sans-serif;

  /* ritmo */
  --wrap:      1200px;
  --gutter:    clamp(1.25rem, 5vw, 3.5rem);
  --section-y: clamp(4.5rem, 10vw, 9rem);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* -------------------------------------------------------------------------- */
/* base                                                                       */
/* -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--cream-dim);
  font-family: var(--f-body);
  font-size: clamp(1.115rem, 1.03rem + 0.32vw, 1.28rem);
  line-height: 1.72;
  font-feature-settings: "kern" 1, "liga" 1;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

h1, h2, h3, h4 {
  font-family: var(--f-display);
  color: var(--cream);
  font-weight: 400;
  line-height: 1.1;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--gold-lit); text-decoration: none; }

::selection { background: var(--red); color: #fff; }

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

/* grano sutil sobre los grandes campos de negro */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 900;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* -------------------------------------------------------------------------- */
/* utilidades de composición                                                  */
/* -------------------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-width: 760px; }
.wrap--mid    { max-width: 940px; }

.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: clamp(3rem, 6vw, 5.5rem); }
.section--raised { background: var(--ink-2); }
.section--edge { border-top: 1px solid var(--line-soft); }

/* resplandor amapola: el motivo floral del dossier traducido a luz */
.glow { position: relative; overflow: clip; }
.glow::before {
  content: "";
  position: absolute;
  inset: auto auto -20% -12%;
  width: min(60vw, 620px);
  aspect-ratio: 1;
  background: radial-gradient(circle at 30% 70%,
              rgba(194, 16, 28, 0.34), rgba(194, 16, 28, 0.08) 45%, transparent 68%);
  pointer-events: none;
}
.glow--tr::after {
  content: "";
  position: absolute;
  inset: -18% -14% auto auto;
  width: min(48vw, 480px);
  aspect-ratio: 1;
  background: radial-gradient(circle at 70% 30%,
              rgba(215, 164, 76, 0.14), transparent 66%);
  pointer-events: none;
}

.eyebrow {
  font-family: var(--f-ui);
  font-weight: 400;
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 1.25rem;
  display: block;
}
.eyebrow--red { color: var(--red-lit); }

.lede {
  font-size: clamp(1.2rem, 1.05rem + 0.7vw, 1.55rem);
  line-height: 1.6;
  color: var(--cream);
}

.dim { color: var(--muted); }
.center { text-align: center; }

h2.h-section {
  font-size: clamp(1.95rem, 1.3rem + 2.6vw, 3.3rem);
  letter-spacing: 0.005em;
}
h3.h-card {
  font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.55rem);
}

/* filete decorativo con rombo */
.rule {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin: 2rem 0;
}
.rule::before,
.rule::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line), transparent);
}
.rule i {
  width: 6px;
  height: 6px;
  background: var(--red-lit);
  transform: rotate(45deg);
  flex: none;
}
.rule--left::before { display: none; }
.rule--left::after { background: linear-gradient(90deg, var(--line), transparent); }
.rule--left { justify-content: flex-start; }

/* -------------------------------------------------------------------------- */
/* botones                                                                    */
/* -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  font-family: var(--f-ui);
  font-size: 0.82rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 1.05em 1.9em;
  border: 1px solid var(--line);
  color: var(--cream);
  background: transparent;
  cursor: pointer;
  transition: background-color 0.4s var(--ease), border-color 0.4s var(--ease),
              color 0.4s var(--ease), transform 0.4s var(--ease);
}
.btn:hover,
.btn:focus-visible {
  background: var(--cream);
  border-color: var(--cream);
  color: var(--ink);
}
.btn svg { flex: none; }

.btn--red {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}
.btn--red:hover,
.btn--red:focus-visible {
  background: var(--red-lit);
  border-color: var(--red-lit);
  color: #fff;
  transform: translateY(-2px);
}

.btn--ghost { border-color: rgba(244, 239, 233, 0.28); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-top: 2.2rem;
}
.btn-row--center { justify-content: center; }

/* enlace con flecha */
.arrow-link {
  font-family: var(--f-ui);
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
}
.arrow-link::after {
  content: "";
  width: 1.6em;
  height: 1px;
  background: currentColor;
  transition: width 0.35s var(--ease);
}
.arrow-link:hover::after { width: 2.6em; }

/* -------------------------------------------------------------------------- */
/* cabecera + menú hamburguesa                                                */
/* -------------------------------------------------------------------------- */

.site-head {
  position: fixed;
  inset: 0 0 auto;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: clamp(0.9rem, 2vw, 1.6rem) var(--gutter);
  transition: background-color 0.5s var(--ease), backdrop-filter 0.5s var(--ease),
              border-color 0.5s var(--ease), padding 0.5s var(--ease);
  border-bottom: 1px solid transparent;
}
.site-head.is-scrolled {
  background: rgba(10, 7, 8, 0.82);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--line-soft);
  padding-block: 0.75rem;
}

body.nav-open .site-head {
  background: transparent;
  backdrop-filter: none;
  border-bottom-color: transparent;
}

/* En la portada la firma ya aparece enorme sobre el héroe: la de la cabecera
   se mantiene oculta hasta que el visitante deja atrás esa primera pantalla.
   Sin JS (html.no-js) nunca se oculta, para no perder el enlace al inicio. */
html:not(.no-js) .site-head--overlay .brand {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.45s var(--ease), visibility 0.45s, transform 0.45s var(--ease);
}
html:not(.no-js) body.past-hero .site-head--overlay .brand,
html:not(.no-js) body.nav-open .site-head--overlay .brand {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.brand { display: block; line-height: 0; }
.brand img {
  width: clamp(132px, 20vw, 196px);
  filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.6));
  transition: opacity 0.3s var(--ease);
}
.brand:hover img { opacity: 0.78; }

/* botón hamburguesa */
.burger {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  background: none;
  border: 0;
  padding: 0.4rem 0;
  cursor: pointer;
  color: var(--cream);
  font-family: var(--f-ui);
  font-size: 0.7rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}
.burger-label { display: none; }
@media (min-width: 620px) { .burger-label { display: block; } }

.burger-box {
  position: relative;
  width: 30px;
  height: 14px;
  flex: none;
}
.burger-box span {
  position: absolute;
  left: 0;
  height: 1px;
  width: 100%;
  background: var(--cream);
  transition: transform 0.42s var(--ease), opacity 0.25s var(--ease), width 0.42s var(--ease);
}
.burger-box span:nth-child(1) { top: 0; }
.burger-box span:nth-child(2) { top: 6px; width: 70%; }
.burger-box span:nth-child(3) { top: 12px; }
.burger:hover .burger-box span:nth-child(2) { width: 100%; }

body.nav-open .burger-box span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
body.nav-open .burger-box span:nth-child(2) { opacity: 0; }
body.nav-open .burger-box span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* panel del menú */
.nav-panel {
  position: fixed;
  inset: 0;
  z-index: 1050;
  display: grid;
  grid-template-columns: 1fr;
  background: var(--ink);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s var(--ease), visibility 0.5s;
}
body.nav-open .nav-panel { opacity: 1; visibility: visible; }

.nav-panel__inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 6.5rem var(--gutter) 2.5rem;
  position: relative;
  overflow-y: auto;
}
/* sin imagen, el panel es una sola columna: se limita y centra el contenido */
.nav-panel__inner { align-items: center; }
.nav-panel__inner > * {
  width: 100%;
  max-width: 46rem;
}
.nav-panel__inner::before {
  content: "";
  position: absolute;
  inset: auto auto -10% -10%;
  width: min(70vw, 560px);
  aspect-ratio: 1;
  background: radial-gradient(circle at 30% 70%,
              rgba(194, 16, 28, 0.3), transparent 65%);
  pointer-events: none;
}

.nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}
.nav-list li {
  border-bottom: 1px solid var(--line-soft);
  opacity: 0;
  transform: translateY(16px);
}
.nav-list li:first-child { border-top: 1px solid var(--line-soft); }
body.nav-open .nav-list li {
  animation: navIn 0.6s var(--ease) forwards;
  animation-delay: calc(var(--i) * 60ms + 120ms);
}
@keyframes navIn { to { opacity: 1; transform: none; } }

.nav-list a {
  display: flex;
  align-items: baseline;
  gap: clamp(0.9rem, 3vw, 2rem);
  padding: clamp(0.7rem, 2vw, 1.1rem) 0;
  font-family: var(--f-display);
  font-size: clamp(1.75rem, 1rem + 5vw, 3.4rem);
  color: var(--cream);
  transition: color 0.35s var(--ease);
}
.nav-list a:hover,
.nav-list a[aria-current="page"] { color: var(--gold-lit); }
.nav-list .num {
  font-family: var(--f-ui);
  font-size: 0.92rem;
  letter-spacing: 0.2em;
  color: var(--gold-lit);
  flex: none;
  width: 2.2em;
}

.nav-meta {
  margin-top: clamp(2rem, 5vw, 3.5rem);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  font-family: var(--f-ui);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  color: var(--muted);
}
.nav-meta a { color: var(--cream-dim); }
.nav-meta a:hover { color: var(--gold-lit); }

/* selector de idioma — la única vía para cambiar de idioma, dentro del menú */
.nav-lang {
  margin-top: clamp(1.4rem, 3.5vw, 2rem);
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  font-family: var(--f-ui);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.nav-lang > [aria-current] { color: var(--gold-lit); }
.nav-lang > a { color: var(--muted); text-decoration: none; }
.nav-lang > a:hover { color: var(--cream); }
.nav-lang > .nav-lang__sep { color: var(--line); }

/* -------------------------------------------------------------------------- */
/* héroe                                                                      */
/* -------------------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: end;
  overflow: clip;
  isolation: isolate;
}
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media picture,
.page-hero__media picture { display: block; width: 100%; height: 100%; }
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 8%;
  animation: heroDrift 26s ease-in-out infinite alternate;
}
@keyframes heroDrift {
  from { transform: scale(1.015); }
  to   { transform: scale(1.08); }
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(10, 7, 8, 0.62) 0%, rgba(10, 7, 8, 0.05) 26%,
                    rgba(10, 7, 8, 0.62) 74%, var(--ink) 100%);
}

.hero__body {
  padding: 7rem var(--gutter) clamp(4rem, 9vh, 7rem);
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
}

.hero__sig {
  width: min(84vw, 460px);
  margin: 0 0 clamp(1.1rem, 2.6vw, 1.8rem);
  filter: drop-shadow(0 6px 30px rgba(0, 0, 0, 0.85));
}

/* En pantallas anchas el retrato se ancla a la derecha y su borde se disuelve
   en el negro de la página: sin costuras, sin recortes forzados. */
@media (min-width: 820px) {
  .hero__media { left: clamp(26%, 30%, 34%); }
  .hero__media img {
    object-position: 50% 10%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 36%);
            mask-image: linear-gradient(90deg, transparent 0%, #000 36%);
  }
  .hero::before {
    background:
      radial-gradient(46% 46% at 2% 92%, rgba(194, 16, 28, 0.24), transparent 72%),
      linear-gradient(180deg, rgba(10, 7, 8, 0.45) 0%, transparent 26%,
                      rgba(10, 7, 8, 0.4) 78%, var(--ink) 100%);
  }
  .hero__body { padding-bottom: clamp(5rem, 12vh, 8.5rem); }
  .hero__tagline { max-width: 24ch; }
}

/* Variante espejo: retrato a la izquierda y texto a la derecha. Es la que hay que
   usar si el retrato mira hacia la derecha, para que la mirada entre en el texto
   en vez de salirse de la pantalla. Basta con añadir la clase en el <section>. */
@media (min-width: 820px) {
  .hero--mirror .hero__media { left: 0; right: clamp(26%, 30%, 34%); }
  .hero--mirror .hero__media img {
    -webkit-mask-image: linear-gradient(270deg, transparent 0%, #000 36%);
            mask-image: linear-gradient(270deg, transparent 0%, #000 36%);
  }
  .hero--mirror::before {
    background:
      radial-gradient(46% 46% at 98% 92%, rgba(194, 16, 28, 0.24), transparent 72%),
      linear-gradient(180deg, rgba(10, 7, 8, 0.45) 0%, transparent 26%,
                      rgba(10, 7, 8, 0.4) 78%, var(--ink) 100%);
  }
  .hero--mirror .hero__body { text-align: right; }
  .hero--mirror .hero__sig { display: block; margin-left: auto; }
  .hero--mirror .hero__tagline { margin-left: auto; }
}

/* En móvil el retrato ocupa toda la pantalla y la falda roja queda justo detrás
   de la firma: el velo inferior se refuerza para que el texto siga legible. */
@media (max-width: 819px) {
  .hero--mirror::before {
    background: linear-gradient(180deg, rgba(10, 7, 8, 0.62) 0%, rgba(10, 7, 8, 0.05) 24%,
                rgba(10, 7, 8, 0.5) 56%, rgba(10, 7, 8, 0.86) 80%, var(--ink) 100%);
  }
}

.hero__name {
  font-size: clamp(2.5rem, 1rem + 9vw, 5.6rem);
  letter-spacing: 0.02em;
  color: var(--cream);
  margin: 0 0 1rem;
}

.hero__tagline {
  font-family: var(--f-display);
  font-size: clamp(1.15rem, 0.9rem + 1.6vw, 2.05rem);
  line-height: 1.32;
  color: var(--cream);
  font-style: italic;
  margin: 0;
  max-width: 22ch;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.85);
}

.hero__role {
  font-family: var(--f-ui);
  font-size: clamp(0.66rem, 0.6rem + 0.3vw, 0.8rem);
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 clamp(1.4rem, 4vw, 2.4rem);
}

.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 1.6rem;
  translate: -50% 0;
  width: 1px;
  height: clamp(38px, 6vh, 64px);
  background: linear-gradient(180deg, transparent, var(--cream-dim));
  opacity: 0.6;
  overflow: hidden;
}
.scroll-cue::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gold-lit);
  animation: cue 2.6s var(--ease) infinite;
}
@keyframes cue {
  0%   { transform: translateY(-100%); }
  60%  { transform: translateY(100%); }
  100% { transform: translateY(100%); }
}

/* héroe de página interior */
.page-hero {
  position: relative;
  min-height: min(66svh, 620px);
  display: grid;
  align-items: end;
  overflow: clip;
  isolation: isolate;
}
.page-hero__media { position: absolute; inset: 0; z-index: -2; }
.page-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pos, 50% 25%);
}
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg,
    rgba(10, 7, 8, 0.8) 0%, rgba(10, 7, 8, 0.3) 35%,
    rgba(10, 7, 8, 0.85) 80%, var(--ink) 100%);
}
/* con un retrato vertical hace falta más alto para que la figura se lea, y
   menos velo encima: la foto ya es de por sí muy oscura */
.page-hero--portrait { min-height: min(84svh, 820px); }
.page-hero--portrait::before {
  background: linear-gradient(180deg,
    rgba(10, 7, 8, 0.55) 0%, rgba(10, 7, 8, 0.12) 38%,
    rgba(10, 7, 8, 0.8) 80%, var(--ink) 100%);
}
/* en escritorio, un velo lateral garantiza que el titular siempre se lea
   sobre cualquiera de los retratos */
@media (min-width: 900px) {
  .page-hero::before {
    background:
      linear-gradient(90deg, rgba(10, 7, 8, 0.88) 0%, rgba(10, 7, 8, 0.4) 44%,
                      transparent 70%),
      linear-gradient(180deg, rgba(10, 7, 8, 0.6) 0%, transparent 30%,
                      rgba(10, 7, 8, 0.8) 80%, var(--ink) 100%);
  }
}

.page-hero__body {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding: 8rem var(--gutter) clamp(2.5rem, 6vw, 4.5rem);
}
.page-hero h1 {
  font-size: clamp(2.4rem, 1rem + 7vw, 4.6rem);
  margin: 0;
}
.page-hero__sub {
  margin: 1.1rem 0 0;
  max-width: 48ch;
  font-size: clamp(1.1rem, 1rem + 0.6vw, 1.4rem);
  color: var(--cream-dim);
}

/* -------------------------------------------------------------------------- */
/* tarjetas y cuadrículas                                                     */
/* -------------------------------------------------------------------------- */

.grid { display: grid; gap: clamp(1.25rem, 3vw, 2.25rem); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.grid--pair { grid-template-columns: repeat(auto-fit, minmax(min(100%, 430px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }

/* tarjeta-portal con foto */
.portal {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: clamp(340px, 34vw, 480px);
  padding: clamp(1.4rem, 3vw, 2.2rem);
  overflow: hidden;
  border: 1px solid var(--line-soft);
  isolation: isolate;
  color: var(--cream-dim);
}
.portal img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pos, 50% 30%);
  filter: saturate(0.88) brightness(0.82);
  transition: transform 1.1s var(--ease), filter 0.9s var(--ease);
}
.portal::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(10, 7, 8, 0.22) 0%, rgba(10, 7, 8, 0.78) 46%, rgba(10, 7, 8, 0.97) 100%);
  transition: opacity 0.6s var(--ease);
}
.portal:hover img { transform: scale(1.06); filter: saturate(1) brightness(0.9); }
.portal h3 { margin: 0.35rem 0 0.6rem; }
.portal p { font-size: 0.98rem; line-height: 1.6; margin-bottom: 1.1rem; }
.portal .arrow-link { margin-top: auto; }

/* tarjeta plana */
.card {
  background: var(--ink-3);
  border: 1px solid var(--line-soft);
  padding: clamp(1.4rem, 3vw, 2.1rem);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.card--flush { padding: 0; overflow: hidden; }
.card__figure { margin: 0; background: var(--ink-4); }
.card__figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: var(--pos, 50% 50%); }
.card__body { padding: clamp(1.2rem, 2.5vw, 1.7rem); }
.card h3 { line-height: 1.25; }
.card p { font-size: 0.98rem; line-height: 1.62; }

.kicker {
  font-family: var(--f-ui);
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
}

/* cifras / hitos */
.stats {
  display: grid;
  gap: 1px;
  background: var(--line-soft);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 178px), 1fr));
  border: 1px solid var(--line-soft);
}
.stat {
  background: var(--ink);
  padding: clamp(1.6rem, 3.5vw, 2.4rem) clamp(1.2rem, 2.5vw, 1.8rem);
  text-align: center;
}
.stat img { width: 40px; margin: 0 auto 1rem; opacity: 0.9; }
.stat__n {
  font-family: var(--f-display);
  font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.35rem);
  color: var(--gold-lit);
  letter-spacing: 0.02em;
  display: block;
  margin-bottom: 0.5rem;
}
.stat p { font-size: 0.9rem; line-height: 1.55; color: var(--muted); margin: 0; }

/* citas */
.quote {
  position: relative;
  background: linear-gradient(160deg, rgba(107, 10, 17, 0.32), rgba(23, 16, 15, 0.5));
  border: 1px solid rgba(194, 16, 28, 0.22);
  padding: clamp(1.7rem, 4vw, 2.6rem);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.quote::before {
  content: "“";
  position: absolute;
  top: 0.1rem;
  left: 0.7rem;
  font-family: var(--f-display);
  font-size: 5rem;
  line-height: 1;
  color: var(--red-lit);
  opacity: 0.55;
}
.quote blockquote {
  margin: 0;
  font-size: clamp(1.05rem, 1rem + 0.35vw, 1.25rem);
  font-style: italic;
  line-height: 1.6;
  color: var(--cream);
  position: relative;
}
.quote figcaption {
  font-family: var(--f-ui);
  font-size: 0.74rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: auto;
}

/* pareja texto + imagen */
.duo {
  display: grid;
  gap: clamp(1.8rem, 5vw, 4rem);
  align-items: center;
}
@media (min-width: 860px) {
  .duo { grid-template-columns: 1fr 1fr; }
  .duo--wide-text { grid-template-columns: 1.15fr 0.85fr; }
  .duo--flip > :first-child { order: 2; }
  /* al invertir el orden, la columna estrecha queda a la izquierda */
  .duo--wide-text.duo--flip { grid-template-columns: 0.85fr 1.15fr; }
}
.duo figure { margin: 0; position: relative; }
.duo figure img { width: 100%; }
.framed { position: relative; }
.framed::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--line);
  translate: 14px 14px;
  pointer-events: none;
}
/* retrato recortado en vertical dentro del marco */
.framed--crop img {
  display: block;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 22%;
}
/* banda panorámica: en pantallas estrechas sale de los márgenes y ocupa todo
   el ancho, recortada por los lados para que el sello no quede en una franja */
.framed--band img { display: block; }
@media (max-width: 700px) {
  .framed--band {
    margin-inline: calc(var(--gutter) * -1);
    width: calc(100% + var(--gutter) * 2);
  }
  /* a sangre, el marco desplazado del resto de figuras estorba */
  .framed--band::after { display: none; }
  .framed--band img {
    aspect-ratio: 16 / 10;
    object-fit: cover;
    object-position: 60% 50%;
  }
}
figcaption.credit {
  font-family: var(--f-ui);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 0.9rem;
}

/* listas de datos */
.dl {
  margin: 0;
  display: grid;
  gap: 0;
}
.dl > div {
  display: grid;
  grid-template-columns: minmax(8rem, 32%) 1fr;
  gap: 0.6rem 1.2rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--line-soft);
}
.dl dt {
  font-family: var(--f-ui);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  padding-top: 0.2em;
}
.dl dd { margin: 0; font-size: 0.98rem; }

.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.ticks li {
  position: relative;
  padding-left: 1.6rem;
  font-size: 0.99rem;
  line-height: 1.6;
}
.ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 6px;
  background: var(--red-lit);
  transform: rotate(45deg);
}

/* -------------------------------------------------------------------------- */
/* línea de vida serpenteante (bio)                                            */
/* -------------------------------------------------------------------------- */

.timeline { position: relative; }

.timeline__track {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  translate: -50% 0;
  width: 260px;
  z-index: 0;
  pointer-events: none;
  display: none;
}
.timeline__track svg {
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.8s var(--ease);
}
.timeline__track[data-drawn] svg { opacity: 1; }
/* sin JS: un hilo recto discreto en lugar de la curva */
.timeline__track:not([data-drawn])::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 50%;
  width: 1px;
  translate: -50% 0;
  background: linear-gradient(180deg, transparent, var(--red) 8%,
              var(--gold) 50%, var(--red) 92%, transparent);
  opacity: 0.55;
}

.timeline__items {
  display: grid;
  gap: 0;
  position: relative;
  z-index: 1;
}
@media (max-width: 899px) {
  .timeline__items::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 1px;
    background: linear-gradient(180deg, transparent, var(--red) 4%,
                var(--gold) 50%, var(--red) 96%, transparent);
    opacity: 0.65;
  }
  .tl-item { border-left: 0; }
}

.tl-item {
  position: relative;
  padding: clamp(1.6rem, 3vw, 2.2rem) 0 clamp(1.6rem, 3vw, 2.2rem) 2.6rem;
  border-left: 1px solid var(--line-soft);
}
.tl-item::before { /* punto sobre la línea */
  content: "";
  position: absolute;
  left: -5px;
  top: calc(clamp(1.6rem, 3vw, 2.2rem) + 0.55em);
  width: 9px;
  height: 9px;
  background: var(--red-lit);
  transform: rotate(45deg);
  box-shadow: 0 0 20px 3px rgba(224, 27, 38, 0.6);
}
.tl-item__year {
  font-family: var(--f-ui);
  font-size: 0.72rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold);
  display: block;
  margin-bottom: 0.6rem;
}
.tl-item h3 { font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.6rem); margin-bottom: 0.6rem; }
.tl-item p { font-size: 0.99rem; line-height: 1.66; }
.tl-item figure { margin: 1.1rem 0 0; }
.tl-item figure img {
  width: auto;
  max-width: min(100%, 340px);
  max-height: 210px;
  object-fit: cover;
  border: 1px solid var(--line-soft);
}
.tl-item__tag {
  display: inline-block;
  align-self: flex-start;
  margin-top: 1rem;
  font-family: var(--f-ui);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--red-lit);
  border: 1px solid rgba(224, 27, 38, 0.4);
  padding: 0.35em 0.8em;
}

@media (min-width: 900px) {
  .timeline__track { display: block; }
  .timeline__items {
    grid-template-columns: 1fr 260px 1fr;
    /* filas de altura natural; la curva se traza a partir de la posición
       real de cada rombo */
    grid-auto-rows: auto;
  }
  .tl-item {
    border-left: 0;
    padding: clamp(1.5rem, 3vw, 2.4rem) 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    grid-row: var(--row);
  }
  .tl-item::before {
    top: 50%;
    translate: 0 -50%;
  }
  /* impares a la izquierda, pares a la derecha */
  .tl-item:nth-child(odd) {
    grid-column: 1;
    text-align: right;
    padding-right: clamp(1.6rem, 3vw, 2.6rem);
    align-items: flex-end;
  }
  .tl-item:nth-child(odd)::before { left: auto; right: -134.5px; }
  .tl-item:nth-child(even) {
    grid-column: 3;
    padding-left: clamp(1.6rem, 3vw, 2.6rem);
  }
  .tl-item:nth-child(even)::before { left: -134.5px; }
  .tl-item p, .tl-item figure { max-width: 44ch; }
  .tl-item figure img { max-height: 210px; width: auto; object-fit: cover; }
  .tl-item:nth-child(odd) figure img { margin-left: auto; }
  .tl-item:nth-child(odd) .tl-item__tag { align-self: flex-end; }
  .tl-item:nth-child(even) .tl-item__tag { align-self: flex-start; }
}

/* -------------------------------------------------------------------------- */
/* obra / discografía                                                         */
/* -------------------------------------------------------------------------- */

/* fichas desplegables: una obra por caja, cerradas de partida */
.stories {
  display: grid;
  gap: 0.9rem;
  max-width: 62rem;
  margin-inline: auto;
}
.story {
  border: 1px solid var(--line-soft);
  background: var(--ink-2);
  transition: border-color 0.4s var(--ease), background-color 0.4s var(--ease);
}
.story:hover { border-color: var(--line); }
.story[open] { border-color: var(--gold); }

.story > summary {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: clamp(1rem, 3vw, 2rem);
  padding: clamp(1.05rem, 2.4vw, 1.5rem) clamp(1.2rem, 3vw, 2rem);
  cursor: pointer;
  list-style: none;
}
.story > summary::-webkit-details-marker { display: none; }
.story__meta {
  display: block;
  font-family: var(--f-ui);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.45rem;
}
.story__title {
  display: block;
  font-family: var(--f-display);
  font-size: clamp(1.15rem, 1rem + 0.7vw, 1.6rem);
  line-height: 1.15;
  color: var(--cream);
  transition: color 0.35s var(--ease);
}
.story > summary:hover .story__title,
.story > summary:focus-visible .story__title { color: var(--gold-lit); }

/* el signo «+» gira hasta convertirse en «×» al abrir la ficha */
.story__sign {
  position: relative;
  width: 1.15rem;
  height: 1.15rem;
  flex: none;
  transition: rotate 0.45s var(--ease);
}
.story__sign::before,
.story__sign::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  translate: -50% -50%;
  background: var(--red-lit);
}
.story__sign::before { width: 100%; height: 1px; }
.story__sign::after { width: 1px; height: 100%; }
.story[open] .story__sign { rotate: 135deg; }

.story__body { padding: 0 clamp(1.2rem, 3vw, 2rem) clamp(1.3rem, 3vw, 1.9rem); }
.story__body p {
  font-size: 0.97rem;
  line-height: 1.68;
  color: var(--cream-dim);
  max-width: 68ch;
}
.story__body p + p { margin-top: 0.85rem; }
.story__body .arrow-link { margin-top: 0.4rem; }

/* despliegue animado donde el navegador lo permite; donde no, abre sin más */
@supports selector(::details-content) {
  .stories { interpolate-size: allow-keywords; }
  .story::details-content {
    block-size: 0;
    overflow: hidden;
    transition: block-size 0.5s var(--ease), content-visibility 0.5s var(--ease) allow-discrete;
  }
  .story[open]::details-content { block-size: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .story::details-content { transition: none; }
}

.platforms { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.4rem; }
.platforms a {
  font-family: var(--f-ui);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cream-dim);
  border: 1px solid var(--line);
  padding: 0.5em 0.9em;
  transition: all 0.35s var(--ease);
}
.platforms a:hover { color: var(--ink); background: var(--gold-lit); border-color: var(--gold-lit); }

/* reproductor diferido de YouTube */
.player {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  background: #000;
  border: 1px solid var(--line-soft);
  overflow: hidden;
  cursor: pointer;
  display: block;
  padding: 0;
}
.player img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.66;
  transition: opacity 0.5s var(--ease), transform 1s var(--ease);
}
.player:hover img { opacity: 0.82; transform: scale(1.03); }
.player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.player.is-loaded { cursor: default; }
.player--square { aspect-ratio: 1; }
/* portada que lleva fuera del sitio: sin botón de play, la imagen se ve más nítida */
.player--out img { opacity: 0.8; }
.player--out:hover img { opacity: 0.95; }
/* el vídeo de «Obra de Amor y Gracia» está rodado en formato panorámico;
   en pantallas estrechas quedaría una franja demasiado baja, así que se
   recorta a 16/9 (la pianista sigue dentro del encuadre) */
.player--cine { aspect-ratio: 2.35; }
@media (max-width: 640px) {
  .player--cine { aspect-ratio: 16 / 9; }
}
.player__btn {
  position: absolute;
  inset: 50% auto auto 50%;
  translate: -50% -50%;
  width: clamp(62px, 9vw, 88px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(244, 239, 233, 0.55);
  background: rgba(10, 7, 8, 0.42);
  backdrop-filter: blur(3px);
  display: grid;
  place-items: center;
  transition: background-color 0.4s var(--ease), border-color 0.4s var(--ease), scale 0.4s var(--ease);
}
.player:hover .player__btn,
.player:focus-visible .player__btn {
  background: var(--red);
  border-color: var(--red);
  scale: 1.08;
}
.player__btn::before {
  content: "";
  width: 0;
  height: 0;
  border-left: 15px solid var(--cream);
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  margin-left: 4px;
}
.player__caption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 1.4rem clamp(1rem, 3vw, 1.8rem);
  background: linear-gradient(0deg, rgba(10, 7, 8, 0.9), transparent);
  font-family: var(--f-ui);
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cream);
  text-align: left;
}

/* álbumes con reproductor propio */
.albums { display: grid; gap: clamp(2.5rem, 6vw, 4.5rem); }

.album {
  display: grid;
  gap: clamp(1.4rem, 4vw, 3rem);
  align-items: start;
}
.album__media { margin: 0; }
@media (min-width: 780px) {
  /* todas las carátulas van a la izquierda: una sola columna de reproductores,
     todos del mismo tamaño y alineados entre sí */
  .album { grid-template-columns: minmax(0, 42%) 1fr; }
  /* la carátula acompaña a la lista de pistas mientras se recorre */
  .album__media {
    position: sticky;
    top: clamp(5rem, 9vh, 6.5rem);
  }
}
.album__body { display: flex; flex-direction: column; gap: 0.9rem; }

/* las carátulas ya llevan texto impreso: el rótulo necesita su propio fondo */
.album .player__caption {
  background: linear-gradient(0deg, rgba(10, 7, 8, 0.96) 0%,
              rgba(10, 7, 8, 0.86) 45%, transparent 100%);
  padding-top: 2.6rem;
}
.album__meta {
  font-family: var(--f-ui);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
}
.album h3 {
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.5rem);
  line-height: 1.05;
}
.album__count {
  font-family: var(--f-ui);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.album p { font-size: 1rem; line-height: 1.62; }
.album .platforms { margin-top: 0.5rem; }

/* aviso de que el reproductor es externo, junto al primer álbum */
.album__note {
  font-size: 0.88rem;
  color: var(--muted);
  font-style: italic;
}

/* -------------------------------------------------------------------------- */
/* lista de pistas seleccionables                                             */
/* -------------------------------------------------------------------------- */

.tracks {
  list-style: none;
  margin: 0.5rem 0 0.2rem;
  padding: 0;
  border-top: 1px solid var(--line-soft);
}
.tracks li { border-bottom: 1px solid var(--line-soft); }

.track {
  width: 100%;
  display: grid;
  grid-template-columns: 2.1em 1fr 1.1em;
  align-items: center;
  gap: 0.8rem;
  margin: 0;
  padding: 0.58rem 0.25rem;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.35s var(--ease), padding-left 0.35s var(--ease),
              color 0.35s var(--ease);
}
.track:hover,
.track:focus-visible {
  background: rgba(215, 164, 76, 0.07);
  padding-left: 0.7rem;
  color: var(--cream);
}
.track__num {
  font-family: var(--f-ui);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  color: var(--red-lit);
}
.track__name {
  font-size: 0.99rem;
  line-height: 1.45;
}
.track.is-playing {
  color: var(--gold-lit);
  background: rgba(215, 164, 76, 0.12);
  box-shadow: inset 2px 0 0 var(--gold);
}
.track.is-playing .track__num { color: var(--gold); }

/* triángulo de reproducción; al sonar, se convierte en un vúmetro */
.track__icon {
  position: relative;
  width: 11px;
  height: 12px;
  opacity: 0;
  transition: opacity 0.35s var(--ease);
}
.track:hover .track__icon,
.track:focus-visible .track__icon,
.track.is-playing .track__icon { opacity: 1; }
.track__icon::before {
  content: "";
  position: absolute;
  inset: 1px auto auto 1px;
  border-left: 8px solid currentColor;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}
.track.is-playing .track__icon::before,
.track.is-playing .track__icon::after {
  content: "";
  position: absolute;
  inset: auto auto 0 0;
  width: 3px;
  height: 100%;
  border: 0;
  background: currentColor;
  transform-origin: bottom;
  animation: eq 0.85s var(--ease) infinite alternate;
}
.track.is-playing .track__icon::after {
  left: 6px;
  height: 62%;
  animation-delay: 0.28s;
}
@keyframes eq { from { transform: scaleY(0.35); } to { transform: scaleY(1); } }

/* las pistas entran escalonadas al aparecer la lista */
.tracks.reveal { opacity: 1; transform: none; }
.tracks.reveal li { opacity: 0; transform: translateY(10px); }
.tracks.reveal.is-in li {
  animation: trackIn 0.55s var(--ease) forwards;
  animation-delay: calc(var(--i) * 45ms);
}
@keyframes trackIn { to { opacity: 1; transform: none; } }
.no-js .tracks li { opacity: 1; transform: none; }

/* vídeos de proyectos audiovisuales */
.vgrid {
  display: grid;
  gap: clamp(1.5rem, 3.5vw, 2.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}
.vcard { display: flex; flex-direction: column; gap: 0.9rem; }
.vcard > div { display: flex; flex-direction: column; flex: 1; }
.vcard .player { border-color: var(--line-soft); }
.vcard h3 { line-height: 1.25; }
.vcard__meta {
  font-size: 0.92rem;
  color: var(--muted);
  line-height: 1.5;
}
.vcard__track {
  margin-top: auto;
  padding-top: 0.7rem;
  font-family: var(--f-ui);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
}

/* -------------------------------------------------------------------------- */
/* formatos de concierto                                                      */
/* -------------------------------------------------------------------------- */

.format {
  border: 1px solid var(--line-soft);
  background: var(--ink-2);
  padding: clamp(1.5rem, 3vw, 2.2rem);
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  position: relative;
  transition: border-color 0.5s var(--ease), transform 0.5s var(--ease);
}
.format:hover { border-color: rgba(215, 164, 76, 0.45); transform: translateY(-4px); }
.format--feature { background: linear-gradient(170deg, rgba(107, 10, 17, 0.26), var(--ink-2)); border-color: rgba(194, 16, 28, 0.3); }
.format__tag {
  position: absolute;
  top: -1px;
  right: -1px;
  background: var(--red);
  color: #fff;
  font-family: var(--f-ui);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 0.45em 0.8em;
}
.format h3 { font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.75rem); }
.format__lead { font-size: 0.98rem; color: var(--cream); font-style: italic; }

/* historial de conciertos */
.log { border-top: 1px solid var(--line-soft); }
.log__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.2rem 1.5rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--line-soft);
  align-items: baseline;
}
.log__date {
  font-family: var(--f-ui);
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}
.log__venue { font-family: var(--f-display); color: var(--cream); font-size: 1.1rem; }
.log__place { font-size: 0.92rem; color: var(--muted); }
.log__badge {
  font-family: var(--f-ui);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--red-lit);
  border: 1px solid rgba(224, 27, 38, 0.45);
  padding: 0.25em 0.6em;
  justify-self: start;
  white-space: nowrap;
}
@media (min-width: 720px) {
  .log__row { grid-template-columns: 10rem 1fr 1fr auto; }
  /* las filas comparten las columnas del contenedor: la sala se ajusta a su
     texto más largo y el lugar queda alineado en todas las filas */
  @supports (grid-template-columns: subgrid) {
    .log { display: grid; grid-template-columns: 10rem auto 1fr auto; }
    .log__row { grid-column: 1 / -1; grid-template-columns: subgrid; }
  }
}

/* -------------------------------------------------------------------------- */
/* llamada final                                                              */
/* -------------------------------------------------------------------------- */

.closer {
  position: relative;
  text-align: center;
  padding-block: clamp(5rem, 12vw, 10rem);
  overflow: clip;
  isolation: isolate;
}
.closer__media { position: absolute; inset: 0; z-index: -2; }
.closer__media img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 30%); }
.closer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, var(--ink) 0%, rgba(10, 7, 8, 0.86) 40%,
              rgba(10, 7, 8, 0.9) 62%, var(--ink) 100%);
}
.closer h2 {
  font-size: clamp(1.9rem, 1.2rem + 3.4vw, 3.6rem);
  max-width: 24ch;
  margin-inline: auto;
}
.closer p { max-width: 52ch; margin-inline: auto; }
.closer .btn-row { justify-content: center; }

.manifesto {
  font-family: var(--f-display);
  font-size: clamp(1.4rem, 1rem + 2.4vw, 2.6rem);
  line-height: 1.35;
  color: var(--cream);
  font-style: italic;
  text-align: center;
  max-width: 30ch;
  margin-inline: auto;
}
.manifesto em { color: var(--gold-lit); font-style: italic; }

/* -------------------------------------------------------------------------- */
/* pie                                                                        */
/* -------------------------------------------------------------------------- */

.site-foot {
  border-top: 1px solid var(--line-soft);
  background: var(--ink-2);
  padding-block: clamp(3rem, 7vw, 5rem) 2rem;
}
.foot-grid {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  grid-template-columns: 1fr;
}
@media (min-width: 780px) {
  .foot-grid { grid-template-columns: 1.4fr 1fr 1fr; }
}
.site-foot img.sig { width: 190px; margin-bottom: 1.2rem; opacity: 0.92; }
.site-foot h4 {
  font-family: var(--f-ui);
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1rem;
  font-weight: 400;
}
.foot-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.foot-list a, .foot-list span { color: var(--cream-dim); font-size: 0.96rem; }
.foot-list a:hover { color: var(--gold-lit); }
.foot-bottom {
  margin-top: clamp(2.5rem, 6vw, 4rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--line-soft);
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.5rem;
  justify-content: space-between;
  font-family: var(--f-ui);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--muted);
}

/* -------------------------------------------------------------------------- */
/* revelado al hacer scroll                                                   */
/* -------------------------------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }
.reveal[data-d="1"] { transition-delay: 0.1s; }
.reveal[data-d="2"] { transition-delay: 0.2s; }
.reveal[data-d="3"] { transition-delay: 0.3s; }
.reveal[data-d="4"] { transition-delay: 0.4s; }

.no-js .reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 2000;
  background: var(--cream);
  color: var(--ink);
  padding: 0.6em 1em;
  font-family: var(--f-ui);
  font-size: 0.8rem;
  transform: translateY(-200%);
  transition: transform 0.2s var(--ease);
}
.skip-link:focus { transform: none; }