@charset "UTF-8";

:root {
  --lienzo: #FBFBFA;
  --superficie: #FFFFFF;
  --banda: #F7F6F3;
  --borde: #EAEAEA;
  --tinta: #0E1116;
  --texto: #2F3437;
  --meta: #6F6E6A;
  --teal: #07777A;
  --teal-fondo: #E4F2F2;
  --marca-cian: #12D3D9;
  --marca-azul: #3F69CB;
  --marca-violeta: #6A2FD9;
  --violeta-fondo: #EEE8FB;
  --degradado-marca: linear-gradient(100deg, var(--marca-cian) 0%, var(--marca-azul) 45%, var(--marca-violeta) 100%);
  --rojo: #9F2F2D;      --rojo-fondo: #FDEBEC;
  --ambar: #956400;     --ambar-fondo: #FBF3DB;
  --verde: #346538;     --verde-fondo: #EDF3EC;
  --azul: #1F6C9F;      --azul-fondo: #E1F3FE;
  --sans: 'SF Pro Display', 'Geist Sans', 'Helvetica Neue', 'Switzer', sans-serif;
  --serif: 'Newsreader', 'Lyon Text', 'Georgia', serif;
  --mono: 'Geist Mono', 'SF Mono', 'JetBrains Mono', monospace;
  --ancho: 64rem;
  --curva: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 4.5rem; }
body {
  margin: 0;
  /* La textura de las bandas se extiende 4rem más allá del viewport para que su paralaje no
     deje bordes: sin esto, la página medía 1344 px de ancho en un viewport de 1280 y se podía
     desplazar de lado. Puesto en el body, el valor se propaga al viewport y el body no se
     convierte en contenedor de scroll, así que la barra fija sigue fija. */
  overflow-x: hidden;
  background: var(--lienzo);
  color: var(--texto);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  padding-inline: clamp(1rem, 5vw, 2.5rem);
}
a { color: inherit; }
::selection { background: #CDEFF0; color: var(--tinta); }
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--tinta);
  outline-offset: 3px;
  border-radius: 4px;
}
h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 400;
  color: var(--tinta);
  text-wrap: balance;
  margin: 0;
}
p { margin: 0; }
.contenido { max-width: var(--ancho); margin-inline: auto; }
.seccion { padding-block: 6rem; }
@media (min-width: 900px) { .seccion { padding-block: 8rem; } }

.ojal {
  font-family: var(--mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--teal);
  display: block;
  margin-bottom: 1.25rem;
}
.titulo {
  font-size: clamp(2rem, 4.2vw, 3rem);
  line-height: 1.12;
  letter-spacing: -0.025em;
  max-width: 22ch;
}
.entrada {
  max-width: 62ch;
  font-size: 1.125rem;
  color: var(--texto);
  margin-top: 1.5rem;
}
.cabecera { margin-bottom: 3.5rem; }

/* Botones */
.boton {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--tinta);
  color: #FFFFFF;
  font-family: var(--sans);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  padding: 0.8rem 1.25rem;
  border-radius: 6px;
  border: 1px solid var(--tinta);
  transition: background-color 200ms var(--curva), transform 200ms var(--curva);
}
.boton:hover { background: #333333; border-color: #333333; }
.boton:active { transform: scale(0.98); }
.boton--secundario {
  background: linear-gradient(var(--lienzo), var(--lienzo)) padding-box, var(--degradado-marca) border-box;
  border-color: transparent;
  color: var(--teal);
}
.boton--secundario:hover {
  background: linear-gradient(#FFFFFF, #FFFFFF) padding-box, var(--degradado-marca) border-box;
  border-color: transparent;
  color: var(--marca-violeta);
}
.enlace-quieto {
  font-size: 0.9375rem;
  color: var(--texto);
  text-decoration: underline;
  text-decoration-color: var(--borde);
  text-underline-offset: 0.3em;
  transition: text-decoration-color 200ms var(--curva);
}
.enlace-quieto:hover { text-decoration-color: var(--tinta); }

/* Etiquetas */
.capsula {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1;
  padding: 0.4em 0.7em;
  border-radius: 9999px;
  white-space: nowrap;
}
.capsula--teal  { background: var(--teal-fondo);  color: var(--teal); }
.capsula--rojo  { background: var(--rojo-fondo);  color: var(--rojo); }
.capsula--ambar { background: var(--ambar-fondo); color: var(--ambar); }
.capsula--verde { background: var(--verde-fondo); color: var(--verde); }
.capsula--azul  { background: var(--azul-fondo);  color: var(--azul); }
.capsula--violeta { background: var(--violeta-fondo); color: var(--marca-violeta); }
.capsula--gris  { background: var(--banda); color: var(--meta); border: 1px solid var(--borde); }

/* Barra */
.barra {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(251, 251, 250, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 0;
  transition: background-color 400ms var(--curva);
  margin-inline: calc(-1 * clamp(1rem, 5vw, 2.5rem));
  padding-inline: clamp(1rem, 5vw, 2.5rem);
}
.barra__fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: 4rem;
}
.marca {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: var(--tinta);
}
.marca__logo { display: block; height: 2.125rem; width: auto; }
.marca__producto {
  margin-left: 0.65rem;
  padding-left: 0.65rem;
  border-left: 1px solid var(--borde);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--marca-violeta);
  white-space: nowrap;
}
.barra__enlaces {
  display: none;
  gap: 1.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.barra__enlaces a {
  font-size: 0.9rem;
  text-decoration: none;
  color: var(--texto);
  transition: color 200ms var(--curva);
}
.barra__enlaces a:hover { color: var(--marca-violeta); }
@media (min-width: 760px) { .barra__enlaces { display: flex; } }
.boton--barra { padding: 0.55rem 0.95rem; font-size: 0.875rem; }

/* Fondo ambiental */
.ambiente {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
.ambiente::before, .ambiente::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.ambiente::before {
  width: 70vw;
  height: 70vw;
  max-width: 900px;
  max-height: 900px;
  left: 40%;
  top: -20%;
  background: radial-gradient(circle, var(--marca-cian) 0%, transparent 65%);
  opacity: 0.05;
  animation: deriva 32s ease-in-out infinite alternate;
}
.ambiente::after {
  width: 50vw;
  height: 50vw;
  max-width: 700px;
  max-height: 700px;
  left: 62%;
  top: 12%;
  background: radial-gradient(circle, var(--marca-violeta) 0%, transparent 65%);
  opacity: 0.035;
  animation: deriva 44s ease-in-out infinite alternate-reverse;
}
@keyframes deriva {
  from { transform: translate(0, 0); }
  to   { transform: translate(-12%, 10%); }
}

/* Portada */
.portada { padding-block: 6rem 5rem; position: relative; }
@media (min-width: 900px) { .portada { padding-block: 8rem 6rem; } }
.portada h1 {
  font-size: clamp(2.5rem, 6.4vw, 4.5rem);
  line-height: 1.05;
  letter-spacing: -0.035em;
  max-width: 16ch;
}
.portada .entrada { font-size: 1.1875rem; margin-top: 2rem; max-width: 56ch; }
.portada__acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
  margin-top: 2.5rem;
}
/* El isotipo grande: el SVG, y en su mismo sitio la nube de puntos que `particulas.js` dibuja en
   un canvas cuando puede. Los dos comparten lugar y tamaño; el canvas desborda su caja mientras
   los puntos llegan, y no captura el puntero: `particulas.js` lo escucha en la ventana */
.portada__isotipo, .portada__particulas {
  display: none;
  position: absolute;
  right: -1.5rem;
  top: 5.5rem;
  width: 21rem;
  pointer-events: none;
}
.portada__isotipo { height: auto; opacity: 0.08; }
.portada__particulas { aspect-ratio: 276 / 314; z-index: 1; }
.portada__particulas canvas { position: absolute; display: block; }
@media (min-width: 1000px) { .portada__isotipo, .portada__particulas { display: block; } }
.portada--puntos .portada__isotipo { display: none; }
.portada__nota {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--meta);
  margin-top: 2.25rem;
  letter-spacing: 0.02em;
}

/* Ventana */
.ventana {
  position: relative;
  margin-top: 4.5rem;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}
.ventana::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--degradado-marca);
  z-index: 1;
}
.ventana__barra {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--borde);
  background: #FFFFFF;
}
.semaforo { display: flex; gap: 0.4rem; }
.semaforo span {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #E3E2DF;
}
.ventana__ruta {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--meta);
  flex: 1;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ventana__cuerpo { overflow-x: auto; }
.matriz {
  width: 100%;
  min-width: 860px;
  border-collapse: collapse;
  font-size: 0.875rem;
}
.matriz th {
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--meta);
  text-align: left;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--borde);
  background: #FBFBFA;
}
.matriz td {
  padding: 1rem;
  border-bottom: 1px solid var(--borde);
  vertical-align: top;
  color: var(--texto);
}
.matriz tr:last-child td { border-bottom: 0; }
.matriz .escenario { color: var(--tinta); font-weight: 500; max-width: 26ch; }
.matriz .delito {
  display: block;
  font-family: var(--mono);
  font-size: 0.6875rem;
  color: var(--meta);
  margin-top: 0.3rem;
  font-weight: 400;
  letter-spacing: 0.01em;
}
.matriz .control { max-width: 30ch; }
.matriz .num { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* Tarjetas y rejilla */
.rejilla {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}
.tarjeta {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 10px;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  transition: box-shadow 200ms var(--curva), transform 200ms var(--curva);
}
.tarjeta:hover { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); }
.tarjeta h3 {
  font-size: 1.5rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.tarjeta .pregunta {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.125rem;
  color: var(--tinta);
}
.tarjeta p { font-size: 0.9375rem; }
.tarjeta .ojal { margin-bottom: 0; }
.tarjeta__cabeza {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
@media (min-width: 760px) {
  .rejilla--ciclo { grid-template-columns: repeat(6, 1fr); }
  .rejilla--ciclo > :nth-child(1) { grid-column: span 3; }
  .rejilla--ciclo > :nth-child(2) { grid-column: span 3; }
  .rejilla--ciclo > :nth-child(3) { grid-column: span 4; }
  .rejilla--ciclo > :nth-child(4) { grid-column: span 2; }
  .rejilla--ciclo > :nth-child(5) { grid-column: span 6; }
  .rejilla--trabajo { grid-template-columns: repeat(3, 1fr); }
  .rejilla--trabajo > :nth-child(1) { grid-column: span 2; }
  .rejilla--trabajo > :nth-child(4) { grid-column: span 3; }
  .rejilla--modulos { grid-template-columns: repeat(5, 1fr); }
  .rejilla--modulos > :nth-child(1) { grid-column: span 3; }
  .rejilla--modulos > :nth-child(2) { grid-column: span 2; }
  .rejilla--modulos > :nth-child(3) { grid-column: span 5; }
}
.tarjeta--apetito, .rejilla--modulos > :nth-child(3) {
  background: var(--banda);
}
.tarjeta--filete { position: relative; overflow: hidden; }
.tarjeta--filete::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--degradado-marca);
}
@media (min-width: 760px) {
  .tarjeta--ancha {
    flex-direction: row;
    align-items: flex-start;
    gap: 3rem;
  }
  .tarjeta--ancha > div { flex: 1; display: flex; flex-direction: column; gap: 0.9rem; }
}

/* Ley: filas */
.ley {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--borde);
}
.ley li {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  padding-block: 2rem;
  border-bottom: 1px solid var(--borde);
}
@media (min-width: 760px) {
  .ley li { grid-template-columns: 3rem 1fr 1fr; gap: 2.5rem; }
}
.ley .numero {
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--marca-violeta);
  padding-top: 0.35rem;
}
.ley .exige {
  font-family: var(--serif);
  font-size: 1.25rem;
  line-height: 1.35;
  color: var(--tinta);
  letter-spacing: -0.01em;
}
.ley .cubre { font-size: 0.9375rem; }
.ley .cubre strong { font-weight: 500; color: var(--tinta); }

/* Banda con textura */
.banda {
  background: var(--banda);
  margin-inline: calc(-1 * clamp(1rem, 5vw, 2.5rem));
  padding-inline: clamp(1rem, 5vw, 2.5rem);
  border-top: 1px solid var(--borde);
  border-bottom: 1px solid var(--borde);
  position: relative;
}
.banda::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(to right, rgba(14, 17, 22, 0.035) 1px, transparent 1px);
  background-size: 3rem 100%;
  mask-image: linear-gradient(to bottom, transparent, black 25%, black 75%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 25%, black 75%, transparent);
}
.banda > * { position: relative; }

/* Entregables */
.entrega {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--borde);
  counter-reset: entrega;
}
.entrega li {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.35rem 2rem;
  padding-block: 1.4rem;
  border-bottom: 1px solid var(--borde);
}
@media (min-width: 760px) { .entrega li { grid-template-columns: 22rem 1fr; } }
.entrega .que { font-family: var(--serif); font-size: 1.25rem; color: var(--tinta); letter-spacing: -0.01em; }
.entrega .para { font-size: 0.9375rem; }

/* Preguntas */
.preguntas { border-top: 1px solid var(--borde); }
.preguntas details { border-bottom: 1px solid var(--borde); }
.preguntas summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 2rem;
  padding-block: 1.5rem;
  font-family: var(--serif);
  font-size: 1.375rem;
  letter-spacing: -0.015em;
  color: var(--tinta);
}
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary::after {
  content: "+";
  font-family: var(--mono);
  font-size: 1.25rem;
  color: var(--meta);
  flex-shrink: 0;
  transition: transform 200ms var(--curva);
}
.preguntas details[open] summary::after { transform: rotate(45deg); color: var(--marca-violeta); }
.preguntas .respuesta {
  max-width: 62ch;
  padding-bottom: 1.75rem;
  font-size: 1rem;
}

/* Cierre */
.cierre {
  border: 1px solid var(--borde);
  border-radius: 12px;
  background: var(--superficie);
  padding: clamp(2.5rem, 6vw, 4.5rem);
  position: relative;
  overflow: hidden;
}
.cierre::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 85% 0%, var(--marca-cian) 0%, transparent 45%),
    radial-gradient(circle at 5% 100%, var(--marca-violeta) 0%, transparent 45%);
  opacity: 0.07;
  pointer-events: none;
}
.cierre::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--degradado-marca);
}
.cierre > * { position: relative; }
.cierre h2 { font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -0.03em; line-height: 1.08; max-width: 18ch; }
.cierre .entrada { margin-top: 1.25rem; }
.cierre__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; margin-top: 2.25rem; }
.cierre__correo { font-family: var(--mono); font-size: 0.875rem; color: var(--texto); }

/* Pie */
.pie {
  border-top: 1px solid var(--borde);
  padding-block: 2.5rem 3rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem 2rem;
  font-size: 0.8125rem;
  color: var(--meta);
}
.pie__marca { display: inline-flex; align-items: center; gap: 0.6rem; }
.pie__isotipo { width: 1.125rem; height: auto; display: block; }
.pie__lema {
  flex-basis: 100%;
  order: 3;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.0625rem;
  color: var(--teal);
}
.pie a { text-decoration: none; }
.pie a:hover { color: var(--tinta); }
.pie ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 1.5rem; }

/* Franja de tres afirmaciones */
.franja {
  margin-top: 3rem;
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--borde);
  border-bottom: 1px solid var(--borde);
}
.franja > div { padding: 1.5rem 0; border-top: 1px solid var(--borde); }
.franja > div:first-child { border-top: 0; }
@media (min-width: 760px) {
  .franja { grid-template-columns: repeat(3, 1fr); }
  .franja > div { padding: 1.75rem 2rem; border-top: 0; border-left: 1px solid var(--borde); }
  .franja > div:first-child { padding-left: 0; border-left: 0; }
  .franja > div:last-child { padding-right: 0; }
}
.franja h3 { font-size: 1.375rem; letter-spacing: -0.02em; line-height: 1.2; }
.franja p { font-size: 0.9375rem; margin-top: 0.5rem; }

@media (min-width: 760px) { .rejilla--como { grid-template-columns: repeat(2, 1fr); } }

/* Pilares: sin cajas, solo un filete arriba */
.pilares {
  list-style: none;
  margin: 0;
  padding: 2.5rem 0 0;
  display: grid;
  gap: 2.5rem;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--borde);
}
@media (min-width: 760px) { .pilares { grid-template-columns: repeat(3, 1fr); gap: 3rem; } }
.pilares h3 { font-size: 1.5rem; letter-spacing: -0.02em; line-height: 1.2; margin-bottom: 0.75rem; }
.pilares p { font-size: 0.9375rem; }

/* ============================================================ */
/* Movimiento                                                    */
/* Entradas y revelados: translate + opacity + filter.           */
/* Puntero (hover, magnetismo, inclinación): transform.          */
/* ============================================================ */

:root { --degradado-marca-vertical: linear-gradient(180deg, var(--marca-cian), var(--marca-violeta)); }

/* --- Barra: el filete se traza, la marca y los enlaces entran --- */
.barra::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: var(--degradado-marca);
  transform-origin: left;
}
.js .barra::after { transform: scaleX(0); animation: trazar 1400ms var(--curva) 150ms forwards; }
@keyframes trazar { to { transform: scaleX(1); } }
.barra--compacta { background: rgba(251, 251, 250, 0.92); }
.marca__logo { transition: height 400ms var(--curva); }
.barra--compacta .marca__logo { height: 1.875rem; }
.js .marca { opacity: 0; animation: entrar-izquierda 800ms var(--curva) 200ms forwards; }
.js .barra__enlaces li { opacity: 0; animation: bajar 700ms var(--curva) forwards; animation-delay: calc(340ms + var(--i, 0) * 60ms); }
.js .boton--barra { opacity: 0; animation: bajar 700ms var(--curva) 700ms forwards; }
@keyframes entrar-izquierda {
  from { opacity: 0; translate: -10px 0; }
  to   { opacity: 1; translate: 0 0; }
}
@keyframes bajar {
  from { opacity: 0; translate: 0 -8px; }
  to   { opacity: 1; translate: 0 0; }
}
.barra__enlaces a { position: relative; padding-bottom: 2px; }
.barra__enlaces a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: var(--degradado-marca);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 350ms var(--curva);
}
.barra__enlaces a:hover::after, .barra__enlaces a.activo::after { transform: scaleX(1); transform-origin: left; }
.barra__enlaces a.activo { color: var(--tinta); }

/* --- Portada: cada elemento sube con un desenfoque que se disipa --- */
.js .sube {
  opacity: 0;
  animation: subir 900ms var(--curva) forwards;
  animation-delay: calc(250ms + var(--i, 0) * 110ms);
}
@keyframes subir {
  from { opacity: 0; translate: 0 18px; filter: blur(6px); }
  to   { opacity: 1; translate: 0 0; filter: none; }
}
.js .portada .ojal.sube { animation-name: subir-ojal; animation-duration: 1200ms; }
@keyframes subir-ojal {
  from { opacity: 0; translate: 0 18px; filter: blur(6px); letter-spacing: 0.22em; }
  to   { opacity: 1; translate: 0 0; filter: none; letter-spacing: 0.08em; }
}

/* Titulares palabra por palabra, con máscara de línea */
.palabra {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding: 0.1em 0.04em 0.16em;
  margin: -0.1em -0.04em -0.16em;
}
.js .palabra__interior {
  display: inline-block;
  translate: 0 125%;
  transition: translate 1100ms var(--curva);
  transition-delay: calc(var(--retardo, 0ms) + var(--p, 0) * 45ms);
}
.js .visible .palabra__interior { translate: 0 0; }
.js .palabras:not(.visible) { opacity: 0; }

/* Franja de tres afirmaciones, una tras otra */
.js .franja > div { opacity: 0; animation: subir 800ms var(--curva) forwards; animation-delay: calc(1050ms + var(--f, 0) * 120ms); }
.franja > div:nth-child(2) { --f: 1; }
.franja > div:nth-child(3) { --f: 2; }

/* --- Ventana: filas que entran, semáforo que toma la marca, revisión en vivo --- */
.js .matriz tbody td { opacity: 0; animation: subir-celda 700ms var(--curva) forwards; animation-delay: calc(1000ms + var(--f, 0) * 110ms); }
@keyframes subir-celda {
  from { opacity: 0; translate: 0 8px; }
  to   { opacity: 1; translate: 0 0; }
}
.matriz tbody tr { transition: background-color 250ms var(--curva); }
.matriz tbody td:first-child {
  background-image: var(--degradado-marca-vertical);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 0 100%;
  transition: background-size 350ms var(--curva);
}
.semaforo span { transition: background-color 450ms var(--curva); }
.semaforo span:nth-child(2) { transition-delay: 70ms; }
.semaforo span:nth-child(3) { transition-delay: 140ms; }
.capsula--vivo { display: inline-flex; align-items: center; gap: 0.45em; }
.capsula--vivo::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--marca-violeta);
  box-shadow: 0 0 0 0 rgba(106, 47, 217, 0.45);
  animation: latido 2.4s ease-out infinite;
}
@keyframes latido {
  0%   { box-shadow: 0 0 0 0 rgba(106, 47, 217, 0.45); }
  70%  { box-shadow: 0 0 0 7px rgba(106, 47, 217, 0); }
  100% { box-shadow: 0 0 0 0 rgba(106, 47, 217, 0); }
}

/* --- Isotipo de la portada. Con JavaScript lo dibuja `particulas.js`: una nube de puntos en un
   canvas que llega desde los bordes de la pantalla, respira en su sitio y al pasar el mouse toma
   el degradado de marca y se aparta del puntero. Lo de aquí abajo es el SVG, que queda para
   quien no tenga JavaScript o cuando el canvas no pudo inicializarse: nace entero en tinta y se
   enciende con la marca al pasar el mouse, pieza por pieza —primero se levanta la columna, desde
   abajo; las tres barras crecen desde ella hacia la derecha, de abajo hacia arriba y solapadas;
   al final se traza el visto—. `--b` (en el HTML) es el turno de cada barra. --- */
.portada__particulas {
  translate: 0 calc(var(--desplazamiento, 0) * 0.14px);   /* el mismo paralaje que el resto de la portada */
  will-change: translate;
}
.portada__particulas canvas { transition: filter 600ms var(--curva); }
.portada__particulas--encendido canvas { filter: drop-shadow(0 0 26px rgba(63, 105, 203, 0.28)); }
.portada__isotipo {
  opacity: 0.1;
  filter: blur(1.5px);
  z-index: 1; /* por encima del texto, que al terminar su entrada crea contextos de apilamiento */
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(var(--escala, 1));
  transform-origin: center;
  transition: opacity 600ms var(--curva), filter 600ms var(--curva), transform 700ms var(--curva);
}
/* Cada pieza se escala contra su propia caja, no contra el viewBox */
.portada__isotipo .isotipo__columna { transform-box: fill-box; transform-origin: center bottom; }
.portada__isotipo .isotipo__barra   { transform-box: fill-box; transform-origin: left center; }
.portada__isotipo .isotipo__visto   { stroke-dasharray: 130; }
@keyframes nacer-columna { from { transform: scaleY(0); } to { transform: none; } }
@keyframes nacer-barra   { from { transform: scaleX(0); } to { transform: none; } }
@keyframes trazar-visto  { from { stroke-dashoffset: 130; } to { stroke-dashoffset: 0; } }

.portada__isotipo .isotipo__base { pointer-events: auto; cursor: default; transition: opacity 400ms var(--curva) 120ms; }
.portada__isotipo .isotipo__base rect { fill: var(--tinta); }
.portada__isotipo .isotipo__base path { stroke: var(--tinta); }

/* Al pasar el mouse: la capa de color está apagada y entera; se enciende de golpe y sus piezas
   nacen en orden: columna de 0 a 460 ms, barras desde los 300, 390 y 480 ms (400 ms cada una),
   visto de los 620 a los 1100 ms. Al salir, las animaciones se retiran —las piezas quedan
   enteras— y la capa se apaga en 300 ms mientras la tinta vuelve. */
.portada__isotipo .isotipo__color { opacity: 0; transition: opacity 300ms var(--curva); }
.portada__isotipo .isotipo__destello rect { opacity: 0; }
@media (hover: hover) and (pointer: fine) {
  .portada__isotipo:hover {
    opacity: 1;
    --escala: 1.03;
    filter: blur(0) drop-shadow(0 0 18px rgba(18, 211, 217, 0.35)) drop-shadow(0 0 44px rgba(106, 47, 217, 0.28));
  }
  /* La tinta se apaga rápido y sin espera: si siguiera a la vista, las barras de color
     crecerían sobre barras grises ya enteras y nada parecería nacer. Al salir vuelve con
     la transición de arriba (400 ms tras 120 ms), que es la del estado de llegada. */
  .portada__isotipo:hover .isotipo__base { opacity: 0; transition-duration: 160ms; transition-delay: 0ms; }
  .portada__isotipo:hover .isotipo__color { opacity: 1; transition-duration: 0ms; }
  .portada__isotipo:hover .isotipo__color .isotipo__columna { animation: nacer-columna 460ms var(--curva) both; }
  .portada__isotipo:hover .isotipo__color .isotipo__barra {
    animation: nacer-barra 400ms var(--curva) both;
    animation-delay: calc(300ms + var(--b, 0) * 90ms);
  }
  .portada__isotipo:hover .isotipo__color .isotipo__visto { animation: trazar-visto 480ms var(--curva) 620ms both; }
  /* El barrido de luz pasa cuando la E ya está entera (las barras terminan a los 880 ms) */
  .portada__isotipo:hover .isotipo__destello rect { animation: barrido 1100ms cubic-bezier(0.4, 0, 0.2, 1) 900ms forwards; }
}
@keyframes barrido {
  from { opacity: 1; translate: 0 0; }
  to   { opacity: 1; translate: 560px 0; }
}

/* --- Fondo ambiental: sigue al puntero y al scroll --- */
.ambiente::before { translate: calc(var(--mx, 0) * 36px) calc(var(--my, 0) * 28px + var(--desplazamiento, 0) * -0.05px); }
.ambiente::after  { translate: calc(var(--mx, 0) * -28px) calc(var(--my, 0) * -20px + var(--desplazamiento, 0) * -0.08px); }

/* --- Revelado al hacer scroll --- */
.js .aparece {
  opacity: 0;
  translate: 0 22px;
  filter: blur(6px);
  transition:
    opacity 900ms var(--curva),
    translate 900ms var(--curva),
    filter 900ms var(--curva),
    transform 500ms var(--curva),
    box-shadow 400ms var(--curva),
    border-color 400ms var(--curva);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.js .aparece.visible { opacity: 1; translate: 0 0; filter: none; }
.js .aparece.visible:hover { transition-delay: 0ms; }
.js .cabecera .ojal { letter-spacing: 0.22em; transition: letter-spacing 1200ms var(--curva); }
.js .cabecera.visible .ojal { letter-spacing: 0.08em; }

/* Filas de la ley y de los entregables: la línea se dibuja bajo cada fila */
.js .ley li, .js .entrega li { position: relative; border-bottom-color: transparent; }
.js .ley li::after, .js .entrega li::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: var(--borde);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1200ms var(--curva);
  transition-delay: calc(var(--i, 0) * 90ms + 250ms);
}
.js .ley li.visible::after, .js .entrega li.visible::after { transform: scaleX(1); }

/* La cifra del catálogo cuenta hasta llegar */
.cuenta { display: inline-block; min-width: 3ch; font-variant-numeric: tabular-nums; }

/* Textura de las bandas, con un ligero paralaje */
.banda::before { left: -4rem; right: -4rem; translate: var(--textura, 0px) 0; will-change: translate; }

/* --- Tarjetas: un foco de luz que sigue al puntero --- */
.tarjeta { position: relative; overflow: hidden; isolation: isolate; }
.tarjeta::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 500ms var(--curva);
  background: radial-gradient(320px circle at var(--x, 50%) var(--y, 50%), rgba(18, 211, 217, 0.14), rgba(106, 47, 217, 0.06) 45%, transparent 70%);
}
@media (hover: hover) and (pointer: fine) {
  .tarjeta:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 34px -14px rgba(14, 17, 22, 0.14), 0 2px 6px rgba(14, 17, 22, 0.04);
    border-color: rgba(106, 47, 217, 0.28);
  }
  .tarjeta:hover::after { opacity: 1; }
  .ventana:hover .semaforo span:nth-child(1) { background: var(--marca-cian); }
  .ventana:hover .semaforo span:nth-child(2) { background: var(--marca-azul); }
  .ventana:hover .semaforo span:nth-child(3) { background: var(--marca-violeta); }
  .matriz tbody tr:hover { background: #FBFBFA; }
  .matriz tbody tr:hover td:first-child { background-size: 3px 100%; }
}

/* --- Botones magnéticos --- */
.boton {
  transform: translate(var(--bx, 0px), var(--by, 0px));
  transition: background-color 200ms var(--curva), transform 600ms var(--curva), box-shadow 300ms var(--curva);
}
.boton:active { transform: translate(var(--bx, 0px), var(--by, 0px)) scale(0.97); }
.boton:not(.boton--secundario):hover { box-shadow: 0 10px 22px -12px rgba(14, 17, 22, 0.55); }

/* --- Preguntas: la respuesta se despliega con altura animada --- */
.preguntas summary::after { transition: transform 450ms var(--curva), color 250ms var(--curva); }
.preguntas summary:hover::after { color: var(--tinta); }
.preguntas .respuesta { overflow: hidden; }

/* --- Cierre: las luces respiran y suben al pasar el mouse --- */
.cierre::before { transition: opacity 800ms var(--curva); animation: respirar 14s ease-in-out infinite alternate; }
@keyframes respirar {
  from { transform: scale(1) translate(0, 0); }
  to   { transform: scale(1.18) translate(-2%, 3%); }
}
.cierre:hover::before { opacity: 0.13; }

/* --- Pie: el isotipo también se enciende --- */
.pie__isotipo { transition: filter 400ms var(--curva), transform 400ms var(--curva); }
.pie__marca:hover .pie__isotipo { filter: drop-shadow(0 0 6px rgba(18, 211, 217, 0.6)); transform: scale(1.12); }

/* --- Menos movimiento --- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .aparece, .js .sube, .js .marca, .js .barra__enlaces li, .js .boton--barra,
  .js .matriz tbody td, .js .franja > div, .js .palabras:not(.visible) {
    opacity: 1; translate: none; filter: none; animation: none; transition: none;
  }
  .js .palabra__interior { translate: none; transition: none; }
  .js .barra::after { animation: none; transform: none; }
  .js .cabecera .ojal { letter-spacing: 0.08em; transition: none; }
  .js .ley li::after, .js .entrega li::after { transform: none; transition: none; }
  /* El isotipo queda quieto; al pasar el mouse, solo un fundido entre la tinta y el color. Los
     puntos del canvas nacen en su sitio y no derivan: eso lo decide `particulas.js` */
  .portada__particulas { translate: none; will-change: auto; }
  .portada__isotipo:hover .isotipo__color .isotipo__barra,
  .portada__isotipo:hover .isotipo__color .isotipo__columna,
  .portada__isotipo:hover .isotipo__color .isotipo__visto { animation: none; }
  .portada__isotipo { transition: opacity 300ms; transform: none !important; filter: none; }
  .portada__isotipo:hover .isotipo__color { transition-duration: 300ms; }
  .portada__isotipo:hover .isotipo__destello rect { animation: none; }
  .ambiente::before, .ambiente::after { animation: none; translate: none; }
  .cierre::before { animation: none; }
  .capsula--vivo::before { animation: none; }
  .tarjeta, .boton { transition: none; transform: none !important; }
  .banda::before { translate: none; }
  .marca__logo { transition: none; }
}

/* Página no encontrada (404.html) */
.pagina-corta { min-height: 52vh; display: grid; align-content: center; }