/* =============================================================================
   I3ES · portada de apertura
   Una sola vista: la firma se arma, dice el campo y deja una dirección.

   Hereda el mundo del `Manual de Marca I3ES` sin inventar nada: cinco colores
   con un oficio cada uno, esquina viva, sin sombras, sin gradientes, sin
   transparencia en texto, sin iconos.

   Diferencia deliberada con la portada completa: aquí caben **tres** familias
   —Schibsted titula, Newsreader habla, Plex Mono clasifica— y ninguna más. El
   manual permite un máximo de tres por página, así que esta hoja cumple la
   norma que el sitio completo tiene abierta.

   La coreografía es la de `Signo I3ES · Nombre largo`, con sus dos curvas
   —easeOutQuart al entrar, easeInOutCubic al trazar— comprimida de 11,8 s a
   unos 4,7 s: once segundos son una cabecera de vídeo, no una página que
   alguien abre para encontrar un correo.
   ============================================================================= */

:root {
  color-scheme: light;

  /* Las dos curvas del original. Dentro de @keyframes van literales: una
     `var()` no resuelve en un fotograma clave y el navegador cae al `ease`. */
  --ease-entra: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-traza: cubic-bezier(0.65, 0, 0.35, 1);

  --signo: clamp(96px, 13vw, 168px);
  --aire: clamp(20px, 3.4vw, 40px);
}

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

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

body {
  margin: 0;
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr;
  background: var(--surface-page);
  color: var(--text-body);
  font-family: var(--font-body);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, p { margin: 0; }

/* Las superficies que no dibujé también son del sistema. */
::selection {
  background: var(--i3es-agua-palida);
  color: var(--i3es-abisal);
}

a {
  color: var(--text-link);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
a:hover { color: var(--i3es-abisal); }

:focus-visible {
  outline: 1px solid var(--i3es-abisal);
  outline-offset: 3px;
}

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

/* La regla de laboratorios: tres tramos iguales de 3 px, en el orden del
   signo. Único adorno que el manual permite en pantalla. */
.lab-rule {
  display: flex;
  height: var(--lab-rule-height);
}
.lab-rule i { flex: 1; }
.lab-rule i:nth-child(1) { background: var(--i3es-agua-oscura); }
.lab-rule i:nth-child(2) { background: var(--i3es-agua); }
.lab-rule i:nth-child(3) { background: var(--i3es-terracota); }

/* ------------------------------------------------------------- Escena ---- */

.portada {
  display: grid;
  place-items: center;
  padding: clamp(32px, 7vw, 80px) clamp(22px, 6vw, 64px);
  min-height: 0;
}

.firma {
  display: flex;
  flex-direction: column;
  gap: clamp(30px, 5vw, 52px);
  max-width: 940px;
  width: 100%;
}

/* --- La marca: signo · regla · nombre ------------------------------------ */

.marca {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: var(--aire);
}

/* Reglas de construcción: se trazan a lo ancho de la pantalla, sostienen el
   signo mientras se arma y se retiran. Son andamio, y por eso son lo único de
   la página que usa opacidad —nunca hay texto en ellas. */
.reglas {
  position: absolute;
  left: calc(50% - 50vw);
  width: 100vw;
  top: 0;
  height: var(--signo);
  pointer-events: none;
}
.reglas i {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--i3es-agua);
  clip-path: inset(0 100% 0 0);
}
/* Al centro exacto de cada barra del signo: 20+6, 44+6, 68+6 por ciento. */
.reglas i:nth-child(1) { top: 26%; }
.reglas i:nth-child(2) { top: 50%; }
.reglas i:nth-child(3) { top: 74%; }

.signo {
  position: relative;
  flex: none;
  width: var(--signo);
  height: var(--signo);
  background: var(--brand-sign-ground);
  clip-path: inset(0 0 100% 0);
}
.signo i {
  position: absolute;
  left: 20%;
  height: 12%;
  width: 0;
  background: var(--brand-sign-bar);
}
.signo i:nth-child(1) { top: 20%; }
.signo i:nth-child(2) { top: 44%; }
.signo i:nth-child(3) { top: 68%; }

.marca__regla {
  flex: none;
  width: 1px;
  background: var(--i3es-agua);
  transform: scaleY(0);
  transform-origin: top center;
}

.nombre {
  align-self: center;
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: clamp(1.625rem, 4.4vw, 3.125rem);
  line-height: 1.14;
  letter-spacing: -0.022em;
  color: var(--i3es-abisal);
  text-wrap: balance;
}
/* Cada línea sube desde debajo de su propia caja. Nada de opacidad en texto. */
.nombre span {
  display: block;
  overflow: hidden;
}
.nombre span > b {
  display: block;
  font-weight: inherit;
  transform: translateY(104%);
}

/* --- La voz: el campo ---------------------------------------------------- */

/* Newsreader itálica, y aquí sí en terracota: sobre cal el par es legal
   (4,70:1) y es el oficio que el manual le da a esta familia. En la portada
   completa la misma frase va sobre abisal, donde terracota no puede leerse. */
.campo {
  overflow: hidden;
  border-top: 1px solid var(--rule-hairline);
  padding-top: clamp(22px, 3vw, 32px);
}
.campo p {
  font-family: var(--font-voice);
  font-style: italic;
  font-weight: var(--weight-regular);
  font-optical-sizing: auto;
  font-size: clamp(1.125rem, 2.1vw, 1.5625rem);
  line-height: 1.44;
  color: var(--text-quote);
  max-width: 54ch;
  text-wrap: pretty;
  transform: translateY(104%);
}

/* --- El pie: metadato ---------------------------------------------------- */

.pie {
  display: flex;
  flex-wrap: wrap;
  gap: 10px clamp(20px, 4vw, 44px);
  align-items: baseline;
  border-top: 1px solid var(--rule-hairline);
  padding-top: clamp(18px, 2.4vw, 26px);
  font-family: var(--font-mono);
  font-size: var(--type-label-size);
  line-height: 1.4;
  letter-spacing: var(--type-label-ls);
  text-transform: uppercase;
  color: var(--text-data);
}
.pie > * { overflow: hidden; }
/* El correo es la única acción de la página: su zona de toque llega a 44 px
   sin mover la línea de base ni engordar el metadato. */
.pie a {
  display: inline-block;
  padding-block: 15px;
  margin-block: -15px;
}
.pie > * > span { display: block; transform: translateY(110%); }
.pie__estado { margin-left: auto; color: var(--text-meta); }

/* ---------------------------------------------------------- Coreografía -- */

/* Un solo momento, orquestado: la misma secuencia del original —retícula,
   cuadrado, barras, numeral, nombre, pie— comprimida a la escala de una
   página web. Nada entra dos veces y nada se mueve después. */

/* Se trazan de izquierda a derecha, sostienen el signo mientras se arma, y se
   retiran por el mismo lado cuando las barras ocupan su sitio. Dejarlas puestas
   las convertiría en decoración que además corta el nombre. */
/* Una sola pista, no dos: dos animaciones sobre `clip-path` harían que la
   segunda arrancara desde el valor base y la regla saltara a invisible antes
   de retirarse. Trazo, sostén y retirada viven en los mismos fotogramas. */
.firma--corre .reglas i { animation: regla 1900ms var(--ease-traza) forwards; }
.firma--corre .reglas i:nth-child(1) { animation-delay: 100ms; }
.firma--corre .reglas i:nth-child(2) { animation-delay: 190ms; }
.firma--corre .reglas i:nth-child(3) { animation-delay: 280ms; }
@keyframes regla {
  0%   { clip-path: inset(0 100% 0 0) }
  33%  { clip-path: inset(0 0 0 0) }
  60%  { clip-path: inset(0 0 0 0) }
  100% { clip-path: inset(0 0 0 100%) }
}

.firma--corre .signo { animation: baja-cuadro 420ms var(--ease-entra) 820ms forwards; }
@keyframes baja-cuadro { to { clip-path: inset(0 0 0 0) } }

.firma--corre .signo i { animation: crece-barra 380ms var(--ease-entra) forwards; }
.firma--corre .signo i:nth-child(1) { animation-delay: 1240ms; }
.firma--corre .signo i:nth-child(3) { animation-delay: 1360ms; }
@keyframes crece-barra { to { width: 60% } }

/* El numeral nace como las otras, se retira al 45,2 % y toma terracota de
   golpe: en el original es un corte, no una transición de color. */
.firma--corre .signo i:nth-child(2) {
  animation: crece-barra 380ms var(--ease-entra) 1300ms forwards,
             numeral 420ms var(--ease-traza) 1720ms forwards;
}
@keyframes numeral {
  0%   { left: 20%; width: 60%; background: var(--brand-sign-bar) }
  0.1% { left: 20%; width: 60%; background: var(--brand-sign-numeral) }
  100% { left: 45.2%; width: 34.8%; background: var(--brand-sign-numeral) }
}

.firma--corre .marca__regla { animation: traza-vertical 380ms var(--ease-traza) 2120ms forwards; }
@keyframes traza-vertical { to { transform: scaleY(1) } }
@keyframes traza-horizontal { to { transform: scaleX(1) } }

.firma--corre .nombre span > b { animation: sube 520ms var(--ease-traza) forwards; }
.firma--corre .nombre span:nth-child(1) > b { animation-delay: 2260ms; }
.firma--corre .nombre span:nth-child(2) > b { animation-delay: 2390ms; }
.firma--corre .nombre span:nth-child(3) > b { animation-delay: 2520ms; }

.firma--corre .campo p { animation: sube 560ms var(--ease-traza) 3060ms forwards; }
.firma--corre .pie > * > span { animation: sube 460ms var(--ease-traza) forwards; }
.firma--corre .pie > *:nth-child(1) > span { animation-delay: 3600ms; }
.firma--corre .pie > *:nth-child(2) > span { animation-delay: 3720ms; }
.firma--corre .pie > *:nth-child(3) > span { animation-delay: 3840ms; }

@keyframes sube { to { transform: translateY(0) } }

/* ------------------------------------------------------------- Reflujo --- */

@media (max-width: 720px) {
  .marca {
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(18px, 4vw, 26px);
  }
  /* La regla cambia de eje, no desaparece: sigue separando signo y nombre. */
  .marca__regla {
    width: 100%;
    height: 1px;
    transform: scaleX(0);
    transform-origin: left center;
  }
  .firma--corre .marca__regla { animation-name: traza-horizontal; }
  .nombre { align-self: stretch; }
  .pie__estado { margin-left: 0; }
}

/* --------------------------------------------------------- Sin motivos --- */

/* A quien pide menos movimiento se le entrega la firma ya armada: es la pieza
   terminada, no una versión degradada. */
@media (prefers-reduced-motion: reduce) {
  .firma * { animation: none !important; }
  .reglas { display: none; }
  .signo { clip-path: none; }
  .signo i { width: 60%; }
  .signo i:nth-child(2) { left: 45.2%; width: 34.8%; background: var(--brand-sign-numeral); }
  .marca__regla { transform: none; }
  .nombre span > b,
  .campo p,
  .pie > * > span { transform: none; }
}

/* ------------------------------------------------------------ Imprenta --- */

@media print {
  body { background: #fff; }
  .firma * { animation: none !important; }
  .reglas { display: none; }
  .signo { clip-path: none; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .signo i { width: 60%; }
  .signo i:nth-child(2) { left: 45.2%; width: 34.8%; background: var(--brand-sign-numeral); }
  .marca__regla { transform: none; }
  .nombre span > b, .campo p, .pie > * > span { transform: none; }
  .lab-rule { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}