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

html {

  scroll-padding-top: calc(var(--p-nav-h-posada) + var(--p-s-6));

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

  background: var(--p-pilares-fondo-plano);
}
html.fondo-claro { background: var(--p-papel-secciones) }

body {
  font-family: var(--p-font-ui);
  font-size: var(--p-t-body);
  font-weight: var(--p-peso-claro);
  line-height: var(--p-lh);
  letter-spacing: var(--p-track);
  color: var(--p-ink);

  background: transparent;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100% }
a { color: inherit }
::selection { background: var(--p-ink); color: var(--p-paper) }

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

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

.carril {
  width: 100%;
  max-width: var(--p-carril);
  margin-inline: auto;
  padding-inline: var(--p-margen);
  position: relative;
}

.rotulo {
  display: block;
  font-family: var(--p-font-mono);
  font-size: var(--p-t-label);
  font-weight: var(--p-peso-fuerte);
  letter-spacing: var(--p-track-mono);
  text-transform: uppercase;
  color: var(--p-ink-muted);
}

.display {
  font-family: var(--p-font-ui);
  font-weight: var(--p-peso-fino);
  letter-spacing: var(--p-track-hero);
  line-height: var(--p-lh-tight);
}

.display em,
em { font-style: normal; font-weight: var(--p-peso-medio) }

[data-sube] { transition: opacity var(--p-m-escena) var(--p-ease),
                          transform var(--p-m-escena) var(--p-ease) }
.js [data-sube] { opacity: 0; transform: translateY(34px) }
.js [data-sube].dentro { opacity: 1; transform: none }

.js [data-sube="1"] { transition-delay: .08s }
.js [data-sube="2"] { transition-delay: .16s }
.js [data-sube="3"] { transition-delay: .24s }
.js [data-sube="4"] { transition-delay: .32s }

[data-telon] { display: block; overflow: hidden }
[data-telon] > .telon-hoja { display: block;
  transition: transform var(--p-m-escena-2) var(--p-ease-tela) }
.js [data-telon] > .telon-hoja { transform: translateY(105%) }
.js [data-telon].dentro > .telon-hoja { transform: none }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-delay: 0ms !important;
    transition-duration: .001ms !important;
  }

  .js [data-sube], .js [data-telon] > .telon-hoja { opacity: 1; transform: none }
}

@media print {
  .js [data-sube], .js [data-telon] > .telon-hoja {
    opacity: 1 !important; transform: none !important;
  }
}

section[data-fondo="claro"]:has(+ section[data-fondo="claro"]) {
  padding-bottom: clamp(56px, 8vh, 110px);
}
section[data-fondo="claro"] + section[data-fondo="claro"] {
  padding-top: clamp(48px, 7vh, 95px);
}