.portada {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  overflow: clip;
  background: var(--color-obsidiana);
}

.portada__medio { position: absolute; inset: 0; z-index: 0; }
.portada__poster,
.portada__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 40%;
}
.portada__video { opacity: 0; transition: opacity var(--motion-slow) var(--ease-out); }
.portada__medio.reproduciendo .portada__video { opacity: 1; }
.portada__velo { position: absolute; inset: 0; background: var(--velo); }

.portada__texto {
  position: relative;
  z-index: 1;
  align-self: end;
  padding: calc(var(--encabezado-alto) + var(--space-5)) var(--margen) var(--space-4);
}
@media (max-width: 767px) and (orientation: portrait) {
  .portada__texto { align-self: center; }
}
.portada__puerta { color: var(--color-cantera-clara); }
.portada__titulo {
  margin-top: var(--space-2);
  max-width: 9.5em;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--text-56);
  line-height: 1.05;
  letter-spacing: 0;
  color: var(--color-cantera);
  text-wrap: balance;
}
.portada__sub {
  margin-top: var(--space-3);
  max-width: 24em;
  font-size: var(--text-20);
  line-height: 1.5;
  color: var(--color-cantera-clara);
  text-wrap: balance;
}
.portada__acciones { margin-top: var(--space-4); display: flex; flex-wrap: wrap; gap: var(--space-2); }
.portada__boton { width: 100%; padding-inline: var(--space-1); }
.portada__secundario { width: 100%; padding-inline: var(--space-1); border-color: var(--color-cantera-clara); color: var(--color-cantera-clara); }
.portada__pruebas { margin-top: var(--space-3); display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); font-size: var(--text-16); line-height: 1.5; color: var(--color-cantera-clara); }
.portada__pruebas .etiqueta { font-size: var(--text-16); color: var(--color-piedra); }

.portada__pie {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: 0 var(--margen) var(--space-3);
}
.portada__pausa {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--space-2);
  margin-right: calc(var(--space-2) * -1);
  font-size: var(--text-16);
  font-weight: 500;
  letter-spacing: var(--espaciado-mayusculas);
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--color-cantera-clara);
}
.portada__pausa[hidden] { display: none; }
.portada__pausa:hover { text-decoration: underline; text-underline-offset: 6px; }

@media (min-width: 768px) {
  .portada__titulo { font-size: var(--text-96); }
  .portada__sub { font-size: var(--text-24); }
  .portada__boton, .portada__secundario { width: auto; padding-inline: var(--space-3); }
  .portada__texto { padding-bottom: var(--space-5); }
  .portada__pie { padding-bottom: var(--space-4); }
}
@media (min-width: 1200px) {
  .portada__titulo { font-size: var(--text-120); }
  .portada__texto { max-width: calc(var(--margen) * 2 + 8 * (100vw - var(--margen) * 2) / 12); }
}

@keyframes portada-sube {
  from { opacity: 0; transform: translateY(var(--space-3)); }
}
@media (prefers-reduced-motion: no-preference) {
  .portada__puerta { animation: portada-sube var(--motion-slow) var(--ease-out) both; }
  .portada__titulo { animation: portada-sube 600ms var(--ease-out) 80ms both; }
  .portada__sub { animation: portada-sube var(--motion-slow) var(--ease-out) 200ms both; }
  .portada__acciones { animation: portada-sube var(--motion-slow) var(--ease-out) 320ms both; }
  .portada__pruebas { animation: portada-sube var(--motion-slow) var(--ease-out) 440ms both; }

    @supports (animation-timeline: view()) {
    .portada { view-timeline-name: --portada; }
    .portada__medio {
      animation: portada-medio linear both;
      animation-timeline: --portada;
      animation-range: exit 0% exit 100%;
    }
    .portada__texto, .portada__pie {
      animation: portada-texto linear both;
      animation-timeline: --portada;
      animation-range: exit 0% exit 70%;
    }
  }
}
@media (prefers-reduced-motion: no-preference) {
  .con-intro .portada__puerta { animation-delay: 1650ms; }
  .con-intro .portada__titulo { animation-delay: 1730ms; }
  .con-intro .portada__sub { animation-delay: 1850ms; }
  .con-intro .portada__acciones { animation-delay: 1970ms; }
  .con-intro .portada__pruebas { animation-delay: 2090ms; }
  .con-intro.intro-corta .portada__puerta { animation-delay: 0ms; }
  .con-intro.intro-corta .portada__titulo { animation-delay: 80ms; }
  .con-intro.intro-corta .portada__sub { animation-delay: 200ms; }
  .con-intro.intro-corta .portada__acciones { animation-delay: 320ms; }
  .con-intro.intro-corta .portada__pruebas { animation-delay: 440ms; }
}
@keyframes portada-medio { to { transform: translateY(30%); } }
@keyframes portada-texto { to { opacity: 0; transform: translateY(-12%); } }


.escena__capa, .escena__palabra { display: none; }
.manifiesto {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: center;
  padding: var(--space-6) var(--margen);
  background: radial-gradient(closest-side at 50% 45%, var(--luz-central), var(--color-obsidiana));
}
.manifiesto__texto { width: 100%; max-width: 1200px; margin-inline: auto; text-align: center; }
.manifiesto__titulo {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--text-40);
  line-height: 1.1;
  max-width: 12em;
  margin-inline: auto;
  color: var(--color-cantera);
  text-wrap: balance;
  overflow-wrap: normal;
}
.manifiesto__sigue {
  margin: var(--space-4) auto 0;
  max-width: 30em;
  font-size: var(--text-20);
  line-height: 1.55;
  color: var(--color-cantera-clara);
  text-wrap: balance;
}
@media (min-width: 768px) {
  .manifiesto__titulo { font-size: var(--text-72); }
  .manifiesto__sigue { font-size: var(--text-24); }
}
@media (min-width: 1200px) {
  .manifiesto__titulo { font-size: var(--text-96); }
}

.portada__titulo > div,
.manifiesto__titulo > div,
.manifiesto__sigue > div,
[data-renglones] > div { padding-block: 0.14em; margin-block: -0.14em; }

.escena--viva { position: relative; isolation: isolate; height: 100svh; overflow: clip; background: var(--color-obsidiana); }
.escena--viva > .portada,
.escena--viva > .manifiesto { position: absolute; inset: 0; min-height: 0; height: 100%; }
.escena--viva > .portada { z-index: auto; }
.escena--viva .escena__capa { display: block; position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; }
.escena--viva .escena__palabra { display: block; position: absolute; z-index: 3; left: 50%; top: 0; height: auto; pointer-events: none; opacity: 0; will-change: transform, opacity; }
.escena--viva > .manifiesto { z-index: 4; background: none; opacity: 0; pointer-events: none; }
.escena--viva > .manifiesto.manifiesto--activo { pointer-events: auto; }
.escena--viva .portada__pie { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; }
.escena--viva .portada { isolation: auto; }
.escena--viva .portada__medio,
.escena--viva .portada__texto,
.escena--viva .portada__pie { animation: none; }
.escena__velo { display: none; }
.escena--viva .escena__velo { display: block; position: absolute; inset: 0; z-index: 6; background: var(--color-obsidiana-profunda); opacity: 0; pointer-events: none; }
.escena--viva .portada__texto { padding-bottom: calc(var(--space-4) + 44px + var(--space-3)); }
@media (min-width: 768px) {
  .escena--viva .portada__texto { padding-bottom: calc(var(--space-5) + 44px + var(--space-4)); }
}

.manifiesto__enlace {
  display: inline-block;
  margin-top: var(--space-4);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--text-16);
  letter-spacing: var(--espaciado-mayusculas);
  text-transform: uppercase;
  color: var(--color-laton);
  background-size: 100% 1px;
  padding-block: var(--space-1);
}
.manifiesto__enlace:hover, .manifiesto__enlace:focus-visible { color: var(--color-cantera); }

@media (min-width: 1200px) and (max-height: 999px) {
  .portada__titulo { font-size: var(--text-96); }
}
@media (min-width: 768px) {
  .escena--viva .portada__texto { padding-top: calc(var(--encabezado-alto) + var(--space-4)); }
}
@media (max-width: 767px) and (max-height: 760px) {
    .portada__titulo { font-size: var(--text-40); }
  .portada__sub { margin-top: var(--space-2); font-size: var(--text-18); }
  .portada__acciones { margin-top: var(--space-3); gap: var(--space-1); }
  .portada__boton, .portada__secundario { min-height: 48px; }
  .portada__pruebas { margin-top: var(--space-2); }
  .escena--viva .portada__texto { padding-top: calc(var(--encabezado-alto) + var(--space-2)); padding-bottom: calc(var(--space-3) + 44px + var(--space-2)); }
}

.portada__titulo--largo { max-width: 14em; font-size: var(--text-34); line-height: 1.12; }
@media (min-width: 768px) { .portada__titulo--largo { font-size: var(--text-56); } }
@media (min-width: 1200px) { .portada__titulo--largo { font-size: var(--text-64); } }
@media (min-width: 1200px) and (max-height: 999px) { .portada__titulo--largo { font-size: var(--text-56); } }
@media (max-width: 767px) and (max-height: 760px) { .portada__titulo--largo { font-size: var(--text-28); } }

.manifiesto__lema { margin-bottom: var(--space-2); color: var(--color-piedra); }
@media (max-width: 767px) and (max-height: 640px) { .manifiesto__lema { margin-bottom: var(--space-1); } }

.manifiesto__quien {
  margin: var(--space-4) auto 0;
  max-width: 34em;
  font-size: var(--text-18);
  line-height: 1.5;
  color: var(--color-cantera-clara);
  text-wrap: pretty;
}
@media (min-width: 768px) { .manifiesto__quien { font-size: var(--text-20); } }
@media (max-width: 767px) and (max-height: 760px) { .manifiesto__quien { margin-top: var(--space-3); font-size: var(--text-16); } }
@media (max-width: 767px) and (max-height: 640px) {
  .portada__titulo--largo { font-size: var(--text-24); line-height: 1.15; }
  .portada__sub { margin-top: var(--space-1); font-size: var(--text-16); }
  .portada__acciones { margin-top: var(--space-2); }
}
@media (max-width: 380px) {
  .portada__boton, .portada__secundario { letter-spacing: 0.12em; white-space: nowrap; }
}

.portada--relieve .portada__velo { background: rgb(22 25 27 / 0.35); }
@media (max-width: 767px) { .portada__titulo { font-size: var(--text-40); } }
@media (max-width: 767px) and (max-height: 640px) { .portada__titulo { font-size: var(--text-34); } }