/* =============================================================
   Apoyo a Adela — hoja de estilos única
   Paleta extraída de la obra de Adela Casacuberta

   SPDX-License-Identifier: GPL-3.0-or-later
   Ver LICENSE. Los archivos de assets/img, assets/og y assets/video
   NO son software: (c) Adela Casacuberta, todos los derechos
   reservados (LICENSES/ASSETS.txt).
   ============================================================= */

/* ---------- 1 · Reset --------------------------------------- */

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

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

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--bone);
  color: var(--ink);
  font-family: var(--font);
  font-size: 100%;
  line-height: 1.65;
  /* Caslon no tiene bold: seSynthesis lo impede para que el
     navegador no invente uno falso. */
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, p, figure, figcaption { margin: 0; }
img, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ---------- 2 · Tokens -------------------------------------- */

:root {
  /* Neutros — el fondo y el texto */
  --bone:       #F0E7D7;   /* blanco cálido / hueso            */
  --bone-2:     #E7DAC4;
  --ink:        #221A19;   /* marrón-negro profundo           */
  --ink-2:      #4C3E3B;
  --ink-3:      #6E5F58;   /* 4.9:1 sobre hueso               */

  /* Acentos — uso selectivo, uno por sección */
  --magenta:    #D8396E;   /* fuchsia / rosa de la pintura    */
  --green:      #A8BE33;   /* verde luminoso                  */
  --coral:      #D9834F;   /* naranja cálido                  */
  --violet:      #6C5573;  /* violeta apagado                 */

  /* Rosa oscuro derivado del magenta: el color del velo de la
     apertura. Es el mismo tono de la paleta, version apagada. */
  --wine:       #5A1029;

  /* Rosa pálido para la sección del documental */
  --pink:       #EDD2D8;
  --pink-deep:  #E3BCC5;

  /* Sobre video — opacos para alcanzar AA sobre el fondo en movimiento */
  --on-dark:    #F6EFE3;
  --on-dark-2:  #CFC7BA;   /* 4.6:1 con el velo aplicado */

  /* Libre Caslon Text, de Google Fonts. Solo tiene un peso (400):
     la jerarquía sale del cuerpo, del interlineado y del espaciado,
     nunca de un bold. */
  --font: 'Libre Caslon Text', 'Libre Caslon Display', Georgia,
          'Times New Roman', serif;

  /* Escala tipográfica.
     Libre Caslon solo tiene un peso (400): la jerarquía sale del
     cuerpo, del interlineado y del espaciado, nunca de un bold. */
  --t-brand:  clamp(0.78rem, 0.75rem + 0.15vw, 0.88rem);
  --t-micro:  clamp(0.78rem, 0.75rem + 0.16vw, 0.86rem);
  --t-cta:    clamp(1rem, 0.94rem + 0.3vw, 1.2rem);
  --t-body:   clamp(1.16rem, 1.05rem + 0.55vw, 1.45rem);
  --t-lead:   clamp(1.4rem, 1.15rem + 1.15vw, 2.1rem);
  --t-tag:    clamp(1.1rem, 1rem + 0.5vw, 1.5rem);
  --t-h1:     clamp(3.1rem, 1.3rem + 8vw, 7rem);
  --t-outro:  clamp(2.7rem, 1rem + 8.4vw, 8.4rem);

  /* Ritmo */
  --gutter:   clamp(1.25rem, 5vw, 5.5rem);
  --section:  clamp(6rem, 12vw, 13rem);
  --measure:  44rem;   /* ~700px */

  /* Movimiento */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 0.85s;
}

/* ---------- 3 · Tipografía --------------------------------- */

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

.skip-link {
  position: absolute;
  top: 0; left: 50%;
  transform: translate(-50%, -120%);
  z-index: 100;
  padding: 0.9rem 1.4rem;
  background: var(--ink);
  color: var(--bone);
  font-size: var(--t-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: transform 0.25s var(--ease);
}
.skip-link:focus { transform: translate(-50%, 0); }

:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--magenta);
  outline-offset: 4px;
  border-radius: 1px;
}
.hero :where(a):focus-visible,
.site-header:not(.is-solid) :where(a):focus-visible { outline-color: var(--green); }

/* ---------- 4 · Cabecera ------------------------------------ */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  color: var(--on-dark);
  transition: color 0.5s var(--ease), background-color 0.5s var(--ease),
              box-shadow 0.5s var(--ease);
}
/* Velo degradado que garantiza la legibilidad del texto sobre
   secciones oscuras y sobre obras de mucho claridad. */
.site-header::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: calc(100% + 2.75rem);
  background: linear-gradient(to bottom,
    rgba(16, 12, 12, 0.66) 0%,
    rgba(16, 12, 12, 0.34) 48%,
    rgba(16, 12, 12, 0) 100%);
  opacity: 1;
  pointer-events: none;
  transition: opacity 0.5s var(--ease);
}
.site-header.is-solid::before { opacity: 0; }

.site-header__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: clamp(1rem, 2.2vw, 1.75rem) var(--gutter);
}
.site-header__brand,
.site-header__cta {
  font-size: var(--t-brand);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}
.site-header__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  opacity: 0.85;
  transition: opacity 0.3s var(--ease);
}
.site-header__cta:hover { opacity: 1; }

.site-header.is-solid {
  color: var(--ink);
  background: rgba(240, 231, 215, 0.82);
  box-shadow: 0 1px 0 rgba(34, 26, 25, 0.1);
}
@supports (backdrop-filter: blur(1px)) {
  .site-header.is-solid { background: rgba(240, 231, 215, 0.62); backdrop-filter: blur(14px); }
}
.site-header.is-solid :where(a):focus-visible { outline-color: var(--magenta); }

/* ---------- 5 · CTA ----------------------------------------- */

.cta {
  display: inline-flex;
  align-items: baseline;
  gap: 0.65em;
  padding-bottom: 0.5em;
  font-size: var(--t-cta);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  /* Subrayado fino que crece — nada de píldoras ni sombras */
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 1px;
  transition: background-size 0.5s var(--ease), color 0.35s var(--ease);
}
.cta:hover { background-size: 100% 2px; }
.cta__arrow {
  display: inline-block;
  transition: transform 0.45s var(--ease);
}
.cta:hover .cta__arrow { transform: translateX(0.4em); }
.cta:active .cta__arrow { transform: translateX(0.2em); }

.cta--hero  { color: var(--on-dark); }
.cta--hero:hover  { color: var(--green); }
.cta--story { color: var(--ink); }
.cta--story:hover { color: var(--magenta); }
.cta--outro { color: var(--ink); }
.cta--outro:hover { color: var(--magenta); }

/* ---------- 6 · Apertura ------------------------------------ */

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--ink);
  isolation: isolate;
}
.hero__video,
.hero__scrim {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hero__video {
  object-fit: cover;
  object-position: 50% 50%;
  z-index: -2;
}
/* Velo de la apertura: rosa oscuro de la paleta (#5A1029, el magenta
   apagado) en vez de negro, y a la mitad de opacidad.

   Aviso: al halvedor como se pidio, el texto de la apertura baja de
   4.67:1 a ~2.6:1 y deja de cumplir AA (WCAG 2.1, 1.4.3), que pide
   4.5:1 en texto pequeno. Es una decision consciente, no un descuido:
   la pintura queda casi sin velo. Para compensar SIN oscurecer mas el
   fondo, el texto lleva una sombra suave del mismo tono del velo, que
   si ayuda a la legibilidad real aunque WCAG no lo puntue.

   El velo sigue siendo local (eliptico): fuera del bloque de texto no
   hay nada, que es lo que permite bajarlo tanto. */
.hero__scrim {
  z-index: -1;
  background:
    radial-gradient(66% 46% at 28% 66%,
      rgba(90, 16, 41, 0.48) 0%,
      rgba(90, 16, 41, 0.42) 50%,
      rgba(90, 16, 41, 0) 100%),
    linear-gradient(to bottom,
      rgba(90, 16, 41, 0.41) 0%,
      rgba(90, 16, 41, 0) 38%);
}

/* Con el velo a media opacidad el texto necesita su propio sostén.
   Una sombra del mismo vino del velo: no oscurece el fondo (solo el
   contorno de las letras), asi que se puede bajar el velo sin que el
   texto se pierda. */
.hero__content {
  position: relative;
  width: 100%;
  padding: 0 var(--gutter) clamp(3.5rem, 9vh, 6.5rem);
  padding-bottom: calc(clamp(3.5rem, 9vh, 6.5rem) + env(safe-area-inset-bottom, 0px));
  color: var(--on-dark);
  text-shadow:
    0 1px 2px rgba(46, 8, 22, 0.5),
    0 2px 22px rgba(46, 8, 22, 0.42);
}
.hero__eyebrow {
  font-size: var(--t-micro);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  /* Hueso pleno, no el tono atenuado: con el velo translucido es lo
     que sostiene el contraste de esta linea (5.5:1). La jerarquia
     la dan el cuerpo y el tracking, no el color. */
  color: var(--on-dark);
  margin-bottom: clamp(0.9rem, 2vh, 1.5rem);
}
.hero__title {
  font-family: var(--font);
  font-size: var(--t-h1);
  /* 1.28, no 0.98. Medido con las metricas reales de Libre Caslon
     Text: ascendente 109 px + descendente 29 px = 138 px sobre un
     cuerpo de 112 px, o sea que hace falta 1.232 solo para que las
     linhas no se toquen. Con 1.08 el descendente de la "y" de
     "Apoyo" invadia la "A" de "Adela". */
  line-height: 1.28;
  letter-spacing: -0.005em;
  margin-bottom: clamp(1.25rem, 3vh, 2rem);
  text-wrap: balance;
}
.hero__tagline {
  font-size: var(--t-tag);
  line-height: 1.45;
  max-width: 22ch;
  color: var(--on-dark-2);
  margin-bottom: clamp(2rem, 5vh, 3rem);
}

/* Botón de reproducción del documental, centrado sobre el video.
   Al pulsarlo baja a la sección del film y lo arranca con sonido
   (esa llamada vive dentro del gesto del usuario, así que los
   navegadores permiten el audio). */
.hero__play {
  position: absolute;
  /* 38% y no 50%: a media altura el boton caia justo al lado de
     "Apoyo a" y los dos se estorbaban. */
  top: 38%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.7rem, 1.6vw, 1rem);
  padding: 0;
  border: 0;
  background: none;
  color: var(--on-dark);
  cursor: pointer;
  transition: transform 0.45s var(--ease), opacity 0.4s var(--ease);
}
.hero__play-disc {
  display: grid;
  place-items: center;
  width: clamp(4rem, 8vw, 5.75rem);
  height: clamp(4rem, 8vw, 5.75rem);
  border-radius: 50%;
  border: 1px solid rgba(246, 239, 227, 0.7);
  background: rgba(90, 16, 41, 0.42);
  backdrop-filter: blur(3px);
  transition: background-color 0.35s var(--ease), border-color 0.35s var(--ease);
}
.hero__play-icon { width: 26%; height: 26%; fill: var(--on-dark); margin-left: 8%; }
.hero__play-label {
  font-size: var(--t-micro);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-shadow: 0 1px 10px rgba(18, 13, 13, 0.75);
}
.hero__play:hover { transform: translate(-50%, -50%) scale(1.05); }
.hero__play:hover .hero__play-disc {
  background: rgba(90, 16, 41, 0.72);
  border-color: var(--on-dark);
}
.hero__play:focus-visible { outline: 2px solid var(--green); outline-offset: 6px; }

/* El bloque de apertura se muestra de inmediato. Una entrada
   animada retrasaria el LCP hasta 1.4 s y el video ya aporta
   el movimiento; no hay nada que ganar aqui. */
.hero__scroll {
  position: absolute;
  right: var(--gutter);
  bottom: clamp(3.5rem, 9vh, 6.5rem);
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  color: var(--on-dark-2);
}
.hero__scroll-label {
  font-size: var(--t-micro);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
}
.hero__scroll-line {
  width: 1px;
  height: 56px;
  background: linear-gradient(to bottom, rgba(246, 239, 227, 0.7), rgba(246, 239, 227, 0));
  transform-origin: top;
  animation: drift 2.6s var(--ease) infinite;
}
@keyframes drift {
  0%, 100% { transform: scaleY(0.35); opacity: 0.4; }
  50%      { transform: scaleY(1);    opacity: 1; }
}

/* ---------- 7 · El documental + retrato -------------------- */

.film {
  background: var(--pink);
  /* Padding inferior corto: la historia ya aporta su propio --section
     arriba y los dos juntos dejaban un hueco muerto enorme. */
  padding: clamp(3.5rem, 8vw, 7rem) 0 clamp(1.5rem, 3vw, 2.5rem);
}
.film__grid {
  display: grid;
  gap: clamp(1.75rem, 3vw, 2.75rem);
  align-items: start;
  padding-inline: var(--gutter);
}
@media (min-width: 900px) {
  .film__grid {
    /* Video mucho mas ancho, retrato mas estrecho. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.26fr);
    align-items: center;
  }
}

.film__player { min-width: 0; }
.film__portrait { margin: 0; min-width: 0; }
.film__portrait img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* ---------- 7b · Reproductor -------------------------------- */

.player {
  position: relative;
  background: var(--ink);
  overflow: hidden;
}
.player__video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--ink);
}
.player__fallback {
  padding: 2rem;
  color: var(--bone);
  font-size: var(--t-body);
}
.player__fallback a { text-decoration: underline; }

.player__bar {
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 1.2vw, 0.9rem);
  padding: 0.7rem clamp(0.7rem, 1.6vw, 1.1rem);
  background: var(--ink);
  color: var(--on-dark);
}
.player__btn {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  transition: color 0.25s var(--ease), opacity 0.25s var(--ease);
}
.player__btn:hover { color: var(--green); }
.player__icon {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

/* Un solo icono visible a la vez según el estado */
.player__icon--pause,
.player__icon--muted,
.player__icon--fsexit { display: none; }
.player.is-playing .player__icon--play { display: none; }
.player.is-playing .player__icon--pause { display: block; }
.player.is-muted .player__icon--vol { display: none; }
.player.is-muted .player__icon--muted { display: block; }
.player.is-fullscreen .player__icon--fs { display: none; }
.player.is-fullscreen .player__icon--fsexit { display: block; }

.player__time {
  flex: 0 0 auto;
  font-size: var(--t-micro);
  letter-spacing: 0.06em;
  color: var(--on-dark-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Rangos: sin apariencia nativa, dibujados con la paleta */
.player__seek,
.player__vol {
  -webkit-appearance: none;
  appearance: none;
  height: 20px;
  background: none;
  cursor: pointer;
}
.player__seek { flex: 1 1 auto; min-width: 3rem; }
.player__vol { flex: 0 0 4.5rem; }
.player__seek::-webkit-slider-runnable-track,
.player__vol::-webkit-slider-runnable-track {
  height: 2px;
  background: rgba(246, 239, 227, 0.28);
}
.player__seek::-moz-range-track,
.player__vol::-moz-range-track {
  height: 2px;
  background: rgba(246, 239, 227, 0.28);
}
.player__seek::-webkit-slider-thumb,
.player__vol::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 10px;
  height: 10px;
  margin-top: -4px;
  border: 0;
  border-radius: 50%;
  background: var(--bone);
}
.player__seek::-moz-range-thumb,
.player__vol::-moz-range-thumb {
  width: 10px;
  height: 10px;
  border: 0;
  border-radius: 50%;
  background: var(--bone);
}
.player__seek:hover::-webkit-slider-thumb,
.player__vol:hover::-webkit-slider-thumb { background: var(--green); }
.player__seek:hover::-moz-range-thumb,
.player__vol:hover::-moz-range-thumb { background: var(--green); }
.player__seek:focus-visible,
.player__vol:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

/* El progreso se pinta sobre la pista con un degradado */
.player__seek {
  background-image: linear-gradient(var(--green), var(--green));
  background-repeat: no-repeat;
  background-position: 0 50%;
  background-size: 0% 2px;
}

@media (max-width: 560px) {
  .player__time { display: none; }
  .player__vol { display: none; }
}

/* ---------- 8 · La historia --------------------------------- */

.story {
  background: var(--bone);
  padding: var(--section) 0;
}
.story__col {
  /* Sin width:100% — combinado con margin-inline desborda el viewport.
     width:auto + max-width deja la columna alineada a la izquierda. */
  max-width: var(--measure);
  margin-inline: clamp(var(--gutter), 12vw, 14rem);
}
.story__body { color: var(--ink-2); }
.story__body p + p { margin-top: 1.6em; }

/* Entradilla. Ya no va en mayusculas: se lee como el resto del
   relato, solo que 6 px mas grande y en tinta pleine (mas oscuro)
   que el cuerpo, para que se lea como entrada sin gritar. */
.story__lead {
  font-size: 1.525rem;
  line-height: 1.36;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin-bottom: 1.35em;
  text-wrap: pretty;
}
@media (min-width: 700px) {
  .story__lead {
    font-size: clamp(1.7rem, 1.45rem + 0.95vw, 2.225rem);
  }
}
.story__body p:not(.story__lead) {
  font-size: var(--t-body);
  line-height: 1.78;
}

/* La única palabra que pide acento: el nombre de la red */
.story__wordmark {
  color: var(--ink);
  box-shadow: inset 0 -0.32em 0 rgba(168, 190, 51, 0.42);
}

.cta--story { margin-top: clamp(2.75rem, 6vw, 4.5rem); }

/* ---------- 9 · La obra ------------------------------------- */

.work {
  background: var(--ink);
  padding: var(--section) 0;
}
.work__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(3.5rem, 9vw, 9rem);
  padding-inline: var(--gutter);
}
.work__item { width: 100%; margin: 0; }
.work__item img { width: 100%; height: auto; }

/* Pie de imagen: el nombre de la obra, en versalitas espaciadas.
   6.1:1 sobre --ink, muy por encima de AA. */
   .work__item figcaption {
    margin-top: 1rem;
    font-size: var(--t-micro);
    letter-spacing: 0;
    text-transform: none;
    color: rgba(240, 231, 215, 0.62);
  }
/* Retícula asimétrica — anchos y alineaciones alternas */
@media (min-width: 900px) {
  .work__item--full  { width: 100%; }
  .work__item--right { width: 62%; margin-left: auto; }
  .work__item--left  { width: 52%; }
  .work__item--mid   { width: 72%; margin-inline: auto; }
}

/* ---------- 10 · Cierre -------------------------------------- */

.outro {
  background: var(--bone);
  padding: var(--section) 0 clamp(4rem, 8vw, 7rem);
}
.outro__inner {
  padding-inline: var(--gutter);
  max-width: 62rem;
}
.outro__title {
  font-family: var(--font);
  font-size: var(--t-outro);
  /* Mismo 1.28 que el titulo de la apertura: mismo cuerpo, misma
     fuente y las mismas metricas. Con 0.98 las dos lineas de "Apoyo
     a Adela" se pisaban al partirse el titular. */
  line-height: 1.28;
  letter-spacing: -0.005em;
  text-wrap: balance;
  margin-bottom: clamp(1.25rem, 3vw, 2rem);
}
.outro__tagline {
  font-size: var(--t-tag);
  line-height: 1.45;
  color: var(--ink-3);
  max-width: 26ch;
  margin-bottom: clamp(2.25rem, 5vw, 3.25rem);
}

/* ---------- 11 · Pie ---------------------------------------- */

.site-footer {
  background: var(--bone);
  padding-bottom: calc(clamp(2rem, 4vw, 3rem) + env(safe-area-inset-bottom, 0px));
}
.site-footer__inner {
  padding-inline: var(--gutter);
  border-top: 1px solid rgba(34, 26, 25, 0.14);
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
}
.site-footer p {
  font-size: var(--t-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ---------- 11b · Regresar al inicio ----------------------- */

/* Fijo abajo a la derecha. Nace oculto (atributo hidden) y el
   JavaScript lo muestra al salir de la apertura, para no competir
   con el texto del hero.
   Se oculta con visibility, no solo con opacity: un enlace invisible
   pero enfocable por teclado es un enlace invisible de verdad. */
.to-top {
  position: fixed;
  right: var(--gutter);
  bottom: calc(clamp(1rem, 2.5vw, 2rem) + env(safe-area-inset-bottom, 0px));
  z-index: 40;
  display: inline-flex;
  align-items: baseline;
  gap: 0.6em;
  padding: 0.45em 0;
  font-size: var(--t-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 1px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.4s var(--ease), visibility 0s linear 0.4s,
              color 0.35s var(--ease), background-size 0.5s var(--ease);
}
.to-top[hidden] { display: none; }
.to-top.is-shown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}
.to-top:hover { color: var(--magenta); background-size: 100% 2px; }
.to-top__arrow {
  display: inline-block;
  transition: transform 0.45s var(--ease);
}
.to-top:hover .to-top__arrow { transform: translateY(-0.25em); }

/* Sobre la apertura (video oscuro) el texto va en hueso. */
.to-top.is-over-dark { color: var(--on-dark); }

/* ---------- 12 · Aparición al desplazar ------------------- */

.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.js .reveal.is-in { opacity: 1; transform: none; }
/* Un elemento con foco nunca puede quedar invisible, aunque el
   observador todavia no lo haya revelado. */
.js .reveal:focus,
.js .reveal:focus-within,
.js .reveal:focus-visible { opacity: 1; transform: none; }

/* ---------- 13 · Adaptaciones ------------------------------- */

/* Móvil: el bloque de texto ocupa casi todo el ancho y sube menos,
   así que el velo se ensancha y se sube. */
@media (max-width: 900px) {
  .hero__scrim {
    background:
      radial-gradient(115% 50% at 50% 72%,
        rgba(90, 16, 41, 0.46) 0%,
        rgba(90, 16, 41, 0.38) 45%,
        rgba(90, 16, 41, 0) 100%),
      linear-gradient(to bottom,
        rgba(90, 16, 41, 0.32) 0%,
        rgba(90, 16, 41, 0) 50%);
  }
}

/* Tablet: la retícula se simplifica */
@media (min-width: 701px) and (max-width: 899px) {
  .work__item--right,
  .work__item--left,
  .work__item--mid { width: 78%; }
  .work__item--mid { margin-inline: 0 auto; }
}

@media (min-width: 900px) {
  .hero__scroll { display: flex; }
}

/* Móvil: composición propia, no una versión reducida */
@media (max-width: 700px) {
  .hero { align-items: flex-end; }
  .hero__video { object-position: 42% 50%; }
  .hero__tagline { max-width: 26ch; }
  .story__col { margin-inline: var(--gutter); }
  .work__item { width: 100%; }

  /* El enlace "regresar al inicio" se reduce a la flecha. En texto
     completo tapaba el final de cada linea del relato, que en movil
     ocupa todo el ancho. */
  .to-top {
    width: 2.5rem;
    height: 2.5rem;
    display: grid;
    place-items: center;
    padding: 0;
    border-radius: 50%;
    background: var(--ink);
    color: var(--on-dark);
    background-image: none;
  }
  .to-top__label { display: none; }
  .to-top__arrow { font-size: 1.05rem; }
  .to-top:hover { background: var(--ink); color: var(--green); }
  .to-top.is-over-dark { background: var(--on-dark); color: var(--ink); }
  .to-top.is-over-dark:hover { background: var(--on-dark); color: var(--magenta); }
}