/* =========================================================================
   Araant — web pública. Sistema visual: Mercury adaptado (ver DESIGN.md).
   Oscuro, sin sombras, un único color de acción (cobalto) por vista.
   ========================================================================= */

/* --- Fuentes (autoalojadas) --------------------------------------------- */
@font-face {
  font-family: "Inter";
  src: url("/sitio/fuentes/inter.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("/sitio/fuentes/archivo.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

/* --- Tokens --------------------------------------------------------------- */
:root {
  --onyx: #171721;
  --grafito: #1e1e2a;
  --obsidiana: #272735;
  --slate: #70707d;
  --mist: #e2e3ed;
  --ash: #c3c3cc;
  --ivory: #ededf3;
  --cobalto: #5266eb;
  --cobalto-claro: #6476ef;
  --blanco: #ffffff;
  --linea: rgba(237, 237, 243, 0.12);
  --linea-fuerte: rgba(237, 237, 243, 0.26);
  --velo: rgba(23, 23, 33, 0.72);

  --f-texto: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-titular: "Archivo", "Inter", ui-sans-serif, system-ui, sans-serif;
  --ancho-titular: 116%;

  --ancho: 1440px;
  --margen: clamp(16px, 4vw, 64px);
  --hueco: clamp(16px, 2vw, 32px);
  --seccion: clamp(64px, 8vw, 128px);
  --barra: 72px;

  --r: 4px;
  --r-tarjeta: 12px;
  --r-control: 32px;
  --r-pildora: 40px;

  --curva: cubic-bezier(0.2, 0.7, 0.2, 1);
  --curva-suave: cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- Base ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html {
  background: var(--onyx);
  color: var(--ivory);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--barra) + 16px);
}
html.sin-scroll { overflow: hidden; }
body {
  margin: 0;
  font-family: var(--f-texto);
  font-size: 16px;
  line-height: 1.5;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  background: var(--onyx);
  overflow-x: clip;
}
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--f-titular);
  font-weight: 480;
  font-stretch: var(--ancho-titular);
  color: var(--ivory);
  text-wrap: balance;
}
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--ivory); color: var(--onyx); }
:focus-visible { outline: 2px solid var(--ivory); outline-offset: 3px; border-radius: 4px; }
.cifra { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

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

/* --- Tipografía ----------------------------------------------------------- */
.display {
  font-size: clamp(42px, 5.6vw, 76px);
  line-height: 1.04;
  font-weight: 500;
  letter-spacing: 0;
}
.titular-xl { font-size: clamp(34px, 4.2vw, 56px); line-height: 1.08; letter-spacing: 0.005em; }
.titular { font-size: clamp(28px, 3vw, 42px); line-height: 1.12; letter-spacing: 0.01em; }
.titular-s { font-size: clamp(22px, 2.2vw, 28px); line-height: 1.2; letter-spacing: 0.015em; }
.subtitulo { font-family: var(--f-titular); font-stretch: var(--ancho-titular); font-weight: 480; font-size: 21px; line-height: 1.3; letter-spacing: 0.02em; }
.entradilla { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.45; color: var(--ash); font-weight: 360; max-width: 46ch; }
.texto-l { font-size: 18px; line-height: 1.5; color: var(--ash); }
.texto-s { font-size: 14px; line-height: 1.5; color: var(--ash); }
.atenuado { color: var(--ash); }
.etiqueta {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12px; line-height: 1; font-weight: 480; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ash);
}
.indice {
  font-family: var(--f-texto); font-size: 13px; font-weight: 420;
  letter-spacing: 0.08em; color: var(--ash); font-variant-numeric: tabular-nums;
}
.medida { max-width: 64ch; }
.prosa p { color: var(--ash); font-size: 17px; line-height: 1.6; }
.prosa p strong { color: var(--ivory); font-weight: 480; }
.prosa h2 { font-size: clamp(24px, 2.4vw, 32px); line-height: 1.2; margin: 1.6em 0 0.6em; }
.prosa h3 { font-size: 20px; line-height: 1.3; margin: 1.4em 0 0.5em; }
.prosa ul { margin: 0 0 1em; display: grid; gap: 8px; }
.prosa li { position: relative; padding-left: 20px; color: var(--ash); }
.prosa li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 8px; height: 1px; background: var(--ash); }
.prosa a { color: var(--ivory); }

/* --- Disposición ---------------------------------------------------------- */
.contenedor {
  width: 100%;
  max-width: calc(var(--ancho) + 2 * var(--margen));
  margin-inline: auto;
  padding-inline: var(--margen);
}
.reticula { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--hueco); row-gap: 40px; }
.seccion { position: relative; padding-block: var(--seccion); }
.seccion--grafito { background: var(--grafito); }
.seccion--filete { border-top: 1px solid var(--linea); }
.filete { height: 1px; background: var(--linea); border: 0; margin: 0; }

/* Cabecera de sección: índice + titular a la izquierda, texto a la derecha. */
.cabecera-seccion {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--hueco);
  row-gap: 24px;
  align-items: end;
  margin-bottom: clamp(40px, 5vw, 72px);
}
.cabecera-seccion__marca { grid-column: 1 / -1; display: flex; gap: 20px; align-items: center; padding-bottom: 20px; border-bottom: 1px solid var(--linea); }
.cabecera-seccion__titulo { grid-column: 1 / span 7; }
.cabecera-seccion__texto { grid-column: 9 / span 4; color: var(--ash); font-size: 17px; }
.cabecera-seccion--ancha .cabecera-seccion__titulo { grid-column: 1 / span 9; }

/* --- Botones y enlaces ---------------------------------------------------- */
.boton {
  --alto: 48px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: var(--alto); padding: 0 24px;
  border-radius: var(--r-control); border: 1px solid transparent;
  font-size: 16px; font-weight: 420; line-height: 1; letter-spacing: 0;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color 0.2s var(--curva), color 0.2s var(--curva), border-color 0.2s var(--curva), transform 0.15s var(--curva);
}
.boton:active { transform: scale(0.98); }
.boton--primario { background: var(--cobalto); color: var(--blanco); }
.boton--primario:hover { background: var(--cobalto-claro); }
.boton--fantasma { background: transparent; color: var(--ivory); border-color: var(--ivory); }
.boton--fantasma:hover { background: var(--ivory); color: var(--onyx); }
.boton--s { --alto: 40px; padding: 0 18px; font-size: 15px; }
.boton[disabled], .boton[aria-busy="true"] { opacity: 0.7; cursor: progress; }

.enlace-flecha {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--ivory); text-decoration: none; font-weight: 420;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  padding-bottom: 4px;
  transition: background-size 0.35s var(--curva);
}
.enlace-flecha::after { content: "→"; transition: transform 0.35s var(--curva); }
.enlace-flecha:hover { background-size: 100% 1px; }
.enlace-flecha:hover::after { transform: translateX(4px); }

/* --- Etiquetas de estado (monocromo) -------------------------------------- */
.estado {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 26px; padding: 0 12px; border-radius: var(--r-pildora);
  font-size: 12px; font-weight: 480; letter-spacing: 0.01em; line-height: 1; white-space: nowrap;
  border: 1px solid transparent;
}
.estado--disponible { background: var(--ivory); color: var(--onyx); }
.estado--demostracion { border-color: var(--ivory); color: var(--ivory); }
.estado--desarrollo { border: 1px dashed var(--slate); color: var(--ash); }
.estado--previsto { color: var(--ash); padding-left: 0; }
.estado--previsto::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--ash); }
.estado--ilustrativo { border: 1px solid var(--linea-fuerte); color: var(--ash); }

/* --- Héroe ----------------------------------------------------------------- */
.heroe {
  position: relative; min-height: 100svh; display: flex; align-items: flex-end;
  overflow: hidden; isolation: isolate;
}
.heroe--pagina { min-height: max(620px, 82svh); }
.medio-fondo { position: absolute; inset: 0; z-index: -2; overflow: hidden; background: var(--onyx); }
.medio-fondo video, .medio-fondo img { width: 100%; height: 100%; object-fit: cover; }
.velo {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(23, 23, 33, 0.9) 0%, rgba(23, 23, 33, 0.55) 48%, rgba(23, 23, 33, 0.2) 100%),
    linear-gradient(0deg, var(--onyx) 0%, rgba(23, 23, 33, 0) 38%);
}
.heroe__contenido { width: 100%; padding-top: calc(var(--barra) + 64px); padding-bottom: clamp(48px, 7vw, 104px); }
.heroe__texto { max-width: 920px; }
.heroe .etiqueta { margin-bottom: 28px; }
.heroe .display, .heroe .titular-xl { margin-bottom: 28px; }
.heroe__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 36px; }
.heroe__nota { margin-top: 20px; font-size: 13px; color: var(--ash); }
.heroe__pie {
  margin-top: clamp(40px, 6vw, 88px); padding-top: 20px; border-top: 1px solid var(--linea);
  display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; color: var(--ash); font-size: 13px;
}
.desplazar { display: inline-flex; align-items: center; gap: 12px; color: var(--ash); text-decoration: none; }
.desplazar i { width: 1px; height: 28px; background: var(--linea-fuerte); position: relative; overflow: hidden; }
.desplazar i::after { content: ""; position: absolute; left: 0; top: -100%; width: 1px; height: 100%; background: var(--ivory); animation: caer 2.2s var(--curva) infinite; }
@keyframes caer { to { top: 100%; } }

/* Migas de pan */
.migas { margin-bottom: 32px; }
.migas ol { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13px; color: var(--ash); }
.migas li + li::before { content: "/"; margin-right: 8px; color: var(--slate); }
.migas a { color: var(--ash); text-decoration: none; }
.migas a:hover { color: var(--ivory); }

/* --- Formularios ------------------------------------------------------------ */
.pildora-correo { display: flex; max-width: 520px; width: 100%; }
.pildora-correo input {
  flex: 1; min-width: 0; height: 52px; padding: 0 20px;
  background: rgba(23, 23, 33, 0.35); border: 1px solid var(--ivory); border-right: 0;
  border-radius: var(--r-control) 0 0 var(--r-control); color: var(--ivory); font-size: 16px;
}
.pildora-correo input::placeholder { color: var(--ash); }
.pildora-correo .boton { height: 52px; border-radius: 0 var(--r-control) var(--r-control) 0; padding: 0 26px; }
.formulario { display: grid; gap: 20px; }
.formulario__fila { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.campo { display: grid; gap: 8px; }
.campo label, .campo legend { font-size: 13px; color: var(--ash); font-weight: 420; }
.campo input, .campo select {
  height: 52px; padding: 0 20px; border-radius: var(--r-control);
  background: transparent; border: 1px solid var(--linea-fuerte); color: var(--ivory); font-size: 16px;
  transition: border-color 0.2s var(--curva);
}
.campo select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ash) 50%), linear-gradient(135deg, var(--ash) 50%, transparent 50%); background-position: calc(100% - 26px) 50%, calc(100% - 21px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 48px; }
.campo select option { background: var(--grafito); color: var(--ivory); }
.campo input:hover, .campo select:hover { border-color: var(--ash); }
.campo input:focus, .campo select:focus { border-color: var(--ivory); outline: none; }
.campo input[aria-invalid="true"] { border-color: var(--ivory); border-style: dashed; }
.campo__error { font-size: 13px; color: var(--ivory); min-height: 0; }
.perfiles { border: 0; padding: 0; margin: 0; display: grid; gap: 10px; }
.perfiles__opciones { display: flex; flex-wrap: wrap; gap: 8px; }
.perfiles input { position: absolute; opacity: 0; pointer-events: none; }
.perfiles label {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: var(--r-pildora);
  border: 1px solid var(--linea-fuerte); color: var(--ash); cursor: pointer; font-size: 15px;
  transition: background-color 0.2s var(--curva), color 0.2s var(--curva), border-color 0.2s var(--curva);
}
.perfiles input:checked + label { background: var(--ivory); color: var(--onyx); border-color: var(--ivory); }
.perfiles input:focus-visible + label { outline: 2px solid var(--ivory); outline-offset: 3px; }
.trampa { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.mensaje { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; color: var(--ivory); }
.mensaje:empty { display: none; }
.mensaje::before { content: ""; flex: none; width: 18px; height: 18px; margin-top: 2px; border-radius: 50%; border: 1px solid currentColor; }
.mensaje--ok::before { background: var(--ivory); box-shadow: inset 0 0 0 4px var(--onyx); }
.mensaje--error::before { border-style: dashed; }
.formulario__legal { font-size: 13px; color: var(--ash); }
.formulario__legal a { color: var(--ash); }

/* --- Tarjetas, listas y tablas --------------------------------------------- */
.tarjeta {
  background: var(--grafito); border-radius: var(--r-tarjeta); padding: clamp(24px, 2.4vw, 32px);
  transition: background-color 0.2s var(--curva);
}
.seccion--grafito .tarjeta { background: var(--obsidiana); }
a.tarjeta { display: block; text-decoration: none; }
a.tarjeta:hover, .tarjeta--viva:hover { background: var(--obsidiana); }
.seccion--grafito a.tarjeta:hover { background: #303041; }
.tarjeta h3 { font-size: 22px; line-height: 1.2; letter-spacing: 0.015em; margin-bottom: 12px; }
.tarjeta p { color: var(--ash); }

.modulos { border-top: 1px solid var(--linea); }
.modulo {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr) minmax(0, 2fr);
  gap: var(--hueco); padding: 24px 0; border-bottom: 1px solid var(--linea); align-items: baseline;
}
.modulo h3 { font-size: 19px; line-height: 1.25; letter-spacing: 0.015em; }
.modulo p { color: var(--ash); margin: 0; }
.modulo .estado { justify-self: end; }
.modulo a { text-decoration: none; }
.modulo a:hover { text-decoration: underline; }

.tabla-envoltorio { overflow-x: auto; }
.tabla { width: 100%; border-collapse: collapse; font-size: 15px; }
.tabla th { text-align: left; font-size: 12px; font-weight: 480; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ash); padding: 0 16px 14px 0; border-bottom: 1px solid var(--linea-fuerte); }
.tabla td { padding: 18px 16px 18px 0; border-bottom: 1px solid var(--linea); vertical-align: top; color: var(--ash); }
.tabla td:first-child { color: var(--ivory); }
.tabla a { color: var(--ivory); }

.lista-numerada { counter-reset: n; display: grid; }
.lista-numerada li {
  counter-increment: n; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 16px;
  padding: 22px 0; border-bottom: 1px solid var(--linea);
}
.lista-numerada li::before { content: counter(n, decimal-leading-zero); font-variant-numeric: tabular-nums; color: var(--ash); font-size: 14px; padding-top: 3px; }
.lista-numerada strong { display: block; font-weight: 480; font-size: 18px; margin-bottom: 4px; }
.lista-numerada span { color: var(--ash); }

.pildoras { display: flex; flex-wrap: wrap; gap: 10px; }
.pildoras li { min-height: 40px; display: inline-flex; align-items: center; padding: 0 18px; border: 1px solid var(--linea-fuerte); border-radius: var(--r-pildora); color: var(--ash); font-size: 15px; }

/* Cita de documento: fragmento con su procedencia */
.cita { border-left: 1px solid var(--ivory); padding: 4px 0 4px 24px; }
.cita blockquote { margin: 0 0 14px; font-size: 18px; line-height: 1.5; color: var(--ivory); }
.cita figcaption { font-size: 13px; color: var(--ash); display: flex; flex-wrap: wrap; gap: 6px 16px; }

/* Bloques editoriales */
.dos-columnas { columns: 2 320px; column-gap: calc(var(--hueco) * 2); color: var(--ash); font-size: 17px; line-height: 1.6; }
.dos-columnas p { break-inside: avoid; }
.partido { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 48px var(--hueco); align-items: start; }
.partido__a { grid-column: 1 / span 5; }
.partido__b { grid-column: 7 / span 6; }
.partido--invertido .partido__a { grid-column: 8 / span 5; order: 2; }
.partido--invertido .partido__b { grid-column: 1 / span 6; order: 1; }
.pegado { position: sticky; top: calc(var(--barra) + 32px); }
.rejilla-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--hueco); }
.rejilla-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--hueco); }
.rejilla-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--hueco); }
.columna-texto h3 { font-size: 20px; line-height: 1.25; margin-bottom: 10px; }
.columna-texto p { color: var(--ash); }

/* Banda de medio a sangre con texto */
.banda { position: relative; min-height: 80svh; display: flex; align-items: center; overflow: hidden; isolation: isolate; }
.banda .velo { background: linear-gradient(90deg, rgba(23, 23, 33, 0.92) 0%, rgba(23, 23, 33, 0.6) 55%, rgba(23, 23, 33, 0.35) 100%); }
.banda__texto { max-width: 760px; padding-block: var(--seccion); }

/* --- Maquetas de producto (ilustrativas) ---------------------------------- */
.maqueta {
  background: #12121a; border: 1px solid var(--linea); border-radius: var(--r-tarjeta);
  overflow: hidden; font-size: 13px; color: var(--ash);
}
.maqueta__barra {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px; border-bottom: 1px solid var(--linea); background: var(--grafito);
}
.maqueta__barra strong { color: var(--ivory); font-weight: 480; font-size: 13px; }
.maqueta__cuerpo { display: grid; grid-template-columns: 180px minmax(0, 1fr); min-height: 320px; }
.maqueta__lateral { border-right: 1px solid var(--linea); padding: 14px 10px; display: grid; align-content: start; gap: 2px; }
.maqueta__lateral span { padding: 8px 10px; border-radius: 6px; }
.maqueta__lateral .is-activo { background: var(--obsidiana); color: var(--ivory); }
.maqueta__contenido { padding: 18px; display: grid; gap: 14px; align-content: start; }
.maqueta__titulo { color: var(--ivory); font-size: 15px; font-weight: 480; display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.maqueta__fila { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1.2fr); gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--linea); align-items: center; }
.maqueta__fila--cabecera { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--slate); padding-top: 0; }
.maqueta__fila b { color: var(--ivory); font-weight: 420; }
.punto { display: inline-flex; align-items: center; gap: 8px; }
.punto::before { content: ""; width: 7px; height: 7px; border-radius: 50%; border: 1px solid var(--ash); }
.punto--lleno::before { background: var(--ivory); border-color: var(--ivory); }
.punto--discontinuo::before { border-style: dashed; }
.tablero { display: grid; grid-template-columns: repeat(6, minmax(140px, 1fr)); gap: 10px; overflow-x: auto; padding-bottom: 4px; }
.tablero__columna { background: var(--grafito); border-radius: 8px; padding: 10px; display: grid; align-content: start; gap: 8px; min-height: 220px; }
.tablero__columna > span { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--slate); padding: 2px 2px 6px; }
.tablero__ficha { background: var(--obsidiana); border-radius: 6px; padding: 10px; display: grid; gap: 6px; }
.tablero__ficha b { color: var(--ivory); font-weight: 420; }

/* --- Pestañas ----------------------------------------------------------------- */
.pestanas__lista {
  position: relative; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none;
  border-bottom: 1px solid var(--linea); margin-bottom: 40px;
}
.pestanas__lista::-webkit-scrollbar { display: none; }
.pestana {
  position: relative; flex: none; background: none; border: 0; cursor: pointer;
  padding: 18px 20px 20px; color: var(--ash); font-size: 16px; font-weight: 420; min-height: 44px;
  transition: color 0.2s var(--curva);
}
.pestana[aria-selected="true"], .pestana:hover { color: var(--ivory); }
.pestana__progreso { position: absolute; left: 20px; right: 20px; bottom: -1px; height: 1px; background: var(--linea-fuerte); transform-origin: left; transform: scaleX(0); }
.pestanas__indicador { position: absolute; left: 0; bottom: -1px; height: 2px; background: var(--ivory); width: 0; transition: transform 0.45s var(--curva-suave), width 0.45s var(--curva-suave); }
.panel-pestana[hidden] { display: none; }
.panel-pestana.is-entrando { animation: entrar 0.5s var(--curva-suave); }
@keyframes entrar { from { opacity: 0; transform: translateY(12px); } }
.area { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 40px var(--hueco); align-items: start; }
.area__texto { grid-column: 1 / span 5; }
.area__texto h3 { font-size: clamp(26px, 2.6vw, 36px); line-height: 1.12; margin-bottom: 16px; }
.area__texto > p { color: var(--ash); font-size: 17px; }
.area__lista { margin: 24px 0 28px; border-top: 1px solid var(--linea); }
.area__lista li { display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--linea); font-size: 15px; }
.area__visual { grid-column: 7 / span 6; position: relative; border-radius: var(--r-tarjeta); overflow: hidden; isolation: isolate; padding: clamp(20px, 3vw, 40px); min-height: 460px; display: flex; align-items: flex-end; }
.area__visual .velo { background: rgba(23, 23, 33, 0.45); }
.area__visual .maqueta { width: 100%; }

/* --- Línea de tiempo movida por el scroll ------------------------------------- */
.pasos { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 40px var(--hueco); }
.pasos__lista { grid-column: 1 / span 6; position: relative; padding-left: 40px; }
.pasos__riel { position: absolute; left: 7px; top: 8px; bottom: 8px; width: 1px; background: var(--linea-fuerte); }
.pasos__relleno { position: absolute; inset: 0; background: var(--ivory); transform-origin: top; transform: scaleY(0); }
.paso { position: relative; padding: 0 0 40px; opacity: 0.45; transition: opacity 0.4s var(--curva); }
.paso::before { content: ""; position: absolute; left: -38px; top: 7px; width: 11px; height: 11px; border-radius: 50%; background: var(--onyx); border: 1px solid var(--ash); transition: background-color 0.3s; }
.paso.is-hecho, .paso.is-activo { opacity: 1; }
.paso.is-hecho::before, .paso.is-activo::before { background: var(--ivory); border-color: var(--ivory); }
.paso h3 { font-size: 20px; line-height: 1.3; margin-bottom: 6px; }
.paso p { color: var(--ash); margin: 0; }
.paso .indice { display: block; margin-bottom: 8px; }
.pasos__tarjeta { grid-column: 8 / span 5; }
.estado-paso { display: grid; gap: 12px; }
.estado-paso__fila { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--linea); font-size: 14px; }
.estado-paso__fila b { color: var(--ivory); font-weight: 420; }
.estado-paso [data-vista] { display: none; }
.estado-paso [data-vista].is-visible { display: block; animation: entrar 0.45s var(--curva-suave); }

/* --- Acordeón ----------------------------------------------------------------- */
.acordeon { border-top: 1px solid var(--linea); }
.acordeon details { border-bottom: 1px solid var(--linea); }
.acordeon summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 24px; align-items: center;
  padding: 26px 0; font-family: var(--f-titular); font-stretch: var(--ancho-titular); font-weight: 480;
  font-size: clamp(18px, 1.6vw, 22px); line-height: 1.3;
}
.acordeon summary::-webkit-details-marker { display: none; }
.acordeon summary::after { content: ""; flex: none; width: 14px; height: 14px; background: linear-gradient(var(--ivory), var(--ivory)) center / 14px 1px no-repeat, linear-gradient(var(--ivory), var(--ivory)) center / 1px 14px no-repeat; transition: transform 0.3s var(--curva); }
.acordeon details[open] summary::after { transform: rotate(45deg); }
.acordeon__cuerpo { padding: 0 0 28px; max-width: 72ch; color: var(--ash); font-size: 17px; line-height: 1.6; }
.acordeon__cuerpo a { color: var(--ivory); }

/* --- Datos vivos del catálogo -------------------------------------------------- */
.datos { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 40px var(--hueco); align-items: start; }
.datos__cifra { grid-column: 1 / span 5; }
.datos__numero { font-family: var(--f-titular); font-stretch: 112%; font-weight: 480; font-size: clamp(64px, 9vw, 132px); line-height: 0.95; letter-spacing: -0.01em; color: var(--ivory); display: block; margin: 16px 0 12px; text-decoration: none; }
.datos__numero:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.datos__lista { grid-column: 7 / span 6; border-top: 1px solid var(--linea); }
.datos__lista li { border-bottom: 1px solid var(--linea); }
.datos__lista a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 24px; padding: 18px 0; text-decoration: none; }
.datos__lista a:hover strong { text-decoration: underline; }
.datos__lista strong { font-weight: 420; color: var(--ivory); line-height: 1.4; }
.datos__lista span { color: var(--ash); font-size: 13px; }
.datos__lista time { grid-row: 1 / span 2; grid-column: 2; color: var(--ivory); font-size: 14px; white-space: nowrap; }
.esqueleto { display: block; height: 14px; border-radius: 4px; background: linear-gradient(90deg, var(--grafito), var(--obsidiana), var(--grafito)); background-size: 200% 100%; animation: brillo 1.4s linear infinite; }
@keyframes brillo { to { background-position: -200% 0; } }

/* --- Llamada final -------------------------------------------------------------- */
.cierre { position: relative; min-height: 88svh; display: flex; align-items: center; overflow: hidden; isolation: isolate; }
.cierre .velo { background: linear-gradient(90deg, rgba(23, 23, 33, 0.94) 0%, rgba(23, 23, 33, 0.7) 50%, rgba(23, 23, 33, 0.4) 100%); }
.cierre__interior { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 40px var(--hueco); padding-block: var(--seccion); align-items: end; }
.cierre__texto { grid-column: 1 / span 6; }
.cierre__formulario { grid-column: 8 / span 5; background: rgba(30, 30, 42, 0.82); border: 1px solid var(--linea); border-radius: var(--r-tarjeta); padding: clamp(24px, 3vw, 40px); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }

/* --- Animaciones de entrada (solo con JS listo y sin movimiento reducido) ------- */
.animado:not(.fallo) [data-revela] { opacity: 0; transform: translateY(24px); }
.animado:not(.fallo) [data-descubre] { clip-path: inset(0 0 100% 0); }
.animado:not(.fallo) [data-lineas] { visibility: hidden; }
.animado:not(.fallo) [data-lineas].is-partido { visibility: visible; }
.linea-mascara { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.linea-mascara > span { display: block; }

/* --- Adaptación ------------------------------------------------------------------- */
@media (max-width: 960px) {
  .cabecera-seccion__titulo, .cabecera-seccion__texto, .cabecera-seccion--ancha .cabecera-seccion__titulo { grid-column: 1 / -1; }
  .partido__a, .partido__b, .partido--invertido .partido__a, .partido--invertido .partido__b { grid-column: 1 / -1; order: initial; }
  .pegado { position: static; }
  .area__texto, .area__visual { grid-column: 1 / -1; }
  .area__visual { min-height: 380px; }
  .pasos__lista, .pasos__tarjeta { grid-column: 1 / -1; }
  .datos__cifra, .datos__lista { grid-column: 1 / -1; }
  .cierre__texto, .cierre__formulario { grid-column: 1 / -1; }
  .rejilla-3, .rejilla-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .modulo { grid-template-columns: minmax(0, 1fr) auto; }
  .modulo p { grid-column: 1 / -1; grid-row: 2; }
  .maqueta__cuerpo { grid-template-columns: 1fr; }
  .maqueta__lateral { display: none; }
}
@media (max-width: 640px) {
  :root { --barra: 64px; }
  .rejilla-2, .rejilla-3, .rejilla-4, .formulario__fila { grid-template-columns: 1fr; }
  .heroe__contenido { padding-bottom: 40px; }
  .pildora-correo { flex-direction: column; gap: 10px; }
  .pildora-correo input { border-right: 1px solid var(--ivory); border-radius: var(--r-control); }
  .pildora-correo .boton { border-radius: var(--r-control); width: 100%; }
  .heroe__acciones .boton { width: 100%; }
  .area__visual { padding: 12px; min-height: 0; }
  .maqueta__fila { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
  .maqueta__fila > :nth-child(3) { display: none; }
  .datos__lista a { grid-template-columns: 1fr; }
  .datos__lista time { grid-row: auto; grid-column: auto; }
  .lista-numerada li { grid-template-columns: 44px minmax(0, 1fr); }
  .tablero { grid-template-columns: repeat(6, 160px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  .animado [data-revela], .animado [data-descubre], .animado [data-lineas] { opacity: 1 !important; transform: none !important; clip-path: none !important; visibility: visible !important; }
}

/* --- Lenis, parallax y acordeón ------------------------------------------------- */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
.medio-fondo > [data-parallax] { position: absolute; left: 0; top: -6%; width: 100%; height: 112%; }
.acordeon__cuerpo { overflow: hidden; }

/* --- Ajustes tras la primera revisión ------------------------------------------- */
.perfiles legend { font-size: 13px; color: var(--ash); font-weight: 420; padding: 0; margin-bottom: 10px; }
.area__visual .maqueta__lateral { display: none; }
.area__visual .maqueta__cuerpo { grid-template-columns: 1fr; min-height: 0; }
.area__visual .tablero { grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: visible; }
.area__visual .tablero__columna:nth-child(n+5) { display: none; }
.area__visual .tablero__columna { min-height: 180px; }
@media (max-width: 640px) {
  .pildora-correo input { flex: none; height: 52px; }
  .area__visual .tablero { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .area__visual .tablero__columna:nth-child(n+3) { display: none; }
}

/* --- Aviso legal (texto procedente de legal.php) -------------------------------- */
.legal { padding-top: calc(var(--barra) + 40px); padding-bottom: var(--seccion); }
.legal .container { max-width: 880px; padding: 0; margin: 0; }
.legal .section { padding: 48px 0; border-top: 1px solid var(--linea); background: none; }
.legal .page-hero { border-top: 0; padding-top: 8px; }
.legal h1 { font-size: clamp(34px, 4.2vw, 56px); line-height: 1.08; margin: 12px 0 20px; }
.legal h2 { font-size: clamp(24px, 2.4vw, 32px); line-height: 1.2; margin: 8px 0 20px; }
.legal h3 { font-size: 19px; line-height: 1.3; margin: 24px 0 8px; }
.legal p, .legal li, .legal dd { color: var(--ash); font-size: 16px; line-height: 1.65; }
.legal a { color: var(--ivory); }
.legal .section__eyebrow { font-size: 12px; font-weight: 480; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ash); margin: 0; }
.legal .chiprow { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.legal .chip { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border: 1px solid var(--linea-fuerte); border-radius: var(--r-pildora); font-size: 14px; text-decoration: none; color: var(--ivory); }
.legal .chip:hover { background: var(--ivory); color: var(--onyx); }
.legal .glosario { display: grid; margin: 16px 0 0; border-top: 1px solid var(--linea); }
.legal .glosario__item { display: grid; grid-template-columns: minmax(0, 240px) minmax(0, 1fr); gap: 8px 24px; padding: 16px 0; border-bottom: 1px solid var(--linea); }
.legal dt { color: var(--ivory); font-weight: 480; }
.legal dd { margin: 0; }
.legal ul { display: grid; gap: 6px; margin-bottom: 1em; }
@media (max-width: 640px) { .legal .glosario__item { grid-template-columns: 1fr; } }

/* --- Qué hace Araant: seis capacidades, claras y enlazadas --------------------- */
.capacidades { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--linea); border-left: 1px solid var(--linea); }
.capacidades li { border-right: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }
.capacidades a { display: flex; flex-direction: column; gap: 12px; height: 100%; padding: clamp(24px, 2.6vw, 36px); text-decoration: none; transition: background-color 0.25s var(--curva); }
.capacidades a:hover { background: var(--grafito); }
.capacidades strong { font-family: var(--f-titular); font-stretch: var(--ancho-titular); font-weight: 480; font-size: clamp(20px, 1.7vw, 24px); line-height: 1.2; letter-spacing: 0.01em; }
.capacidades a > span:last-child { color: var(--ash); font-size: 16px; line-height: 1.55; }
.capacidades a::after { content: "→"; margin-top: auto; padding-top: 8px; color: var(--ash); transition: transform 0.3s var(--curva), color 0.3s; }
.capacidades a:hover::after { transform: translateX(4px); color: var(--ivory); }
@media (max-width: 960px) { .capacidades { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .capacidades { grid-template-columns: 1fr; } }

/* --- Más movimiento: progreso de lectura y filetes que se dibujan --------- */
.progreso { position: fixed; left: 0; top: 0; z-index: 85; width: 100%; height: 2px; pointer-events: none; }
.progreso span { display: block; height: 100%; background: var(--ivory); transform-origin: left; transform: scaleX(0); }
.cabecera-seccion__marca { position: relative; border-bottom-color: transparent; }
.cabecera-seccion__marca::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--linea); transform-origin: left; transform: scaleX(var(--trazo, 1)); }
@media (prefers-reduced-motion: reduce) { .progreso { display: none; } }
/* --- Convocatorias (catálogo) con el sistema nuevo ---------------------------- */
.cv-heroe { min-height: max(560px, 74svh); }
.cv-heroe .entradilla { max-width: 62ch; }
.cv-heroe .entradilla b { color: var(--ivory); font-weight: 480; }
.cv-busca { display: flex; max-width: 760px; margin-top: 32px; }
.cv-busca input { flex: 1; min-width: 0; height: 56px; padding: 0 24px; background: rgba(23, 23, 33, 0.5); border: 1px solid var(--ivory); border-right: 0; border-radius: var(--r-control) 0 0 var(--r-control); color: var(--ivory); font-size: 16px; }
.cv-busca input::placeholder { color: var(--ash); }
.cv-busca .boton { height: 56px; border-radius: 0 var(--r-control) var(--r-control) 0; padding: 0 30px; }
.cv-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 20px; }
.cv-chips__sep { width: 1px; height: 22px; background: var(--linea-fuerte); margin: 0 6px; }
.cv-chip { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border: 1px solid var(--linea-fuerte); border-radius: var(--r-pildora); color: var(--ash); text-decoration: none; font-size: 14px; transition: background-color 0.2s var(--curva), color 0.2s var(--curva), border-color 0.2s var(--curva); }
.cv-chip:hover { color: var(--ivory); border-color: var(--ivory); }
.cv-chip.is-activo { background: var(--ivory); color: var(--onyx); border-color: var(--ivory); }
.cv { padding-top: 56px; }
.cv__rejilla { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 48px var(--hueco); align-items: start; }
.cv-filtros { position: sticky; top: calc(var(--barra) + 24px); }
.cv-filtros__plegable { background: var(--grafito); border-radius: var(--r-tarjeta); padding: 24px; }
.cv-filtros__boton { list-style: none; cursor: pointer; font-family: var(--f-titular); font-stretch: var(--ancho-titular); font-weight: 480; font-size: 20px; display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.cv-filtros__boton::-webkit-details-marker { display: none; }
.cv-filtros__boton b { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 12px; background: var(--ivory); color: var(--onyx); font-family: var(--f-texto); font-size: 12px; }
.cv-filtros form { display: grid; gap: 14px; }
.cv-filtros .campo select { height: 46px; }
.cv-filtros__sep { margin-top: 12px; padding-top: 16px; border-top: 1px solid var(--linea); }
.cv-check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--ash); cursor: pointer; }
.cv-check input { accent-color: var(--ivory); width: 16px; height: 16px; margin-top: 2px; }
.cv-filtros__acc { display: flex; align-items: center; gap: 16px; margin-top: 8px; }
.cv-filtros__mas { display: block; margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--linea); font-size: 14px; color: var(--ash); text-decoration: none; }
.cv-filtros__mas b { color: var(--ivory); font-weight: 420; display: block; margin-top: 4px; }
.cv-res__cab { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 8px 24px; padding-bottom: 20px; border-bottom: 1px solid var(--linea); }
.cv-res__n { font-size: clamp(24px, 2.4vw, 32px); line-height: 1.15; }
.cv-res__n b { font-weight: 480; }
.cv-res__cab .texto-s { grid-column: 1; margin: 0; }
.cv-orden { grid-column: 2; grid-row: 1 / span 2; display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ash); }
.cv-orden select { height: 42px; padding: 0 40px 0 18px; border-radius: var(--r-control); background-color: transparent; border: 1px solid var(--linea-fuerte); color: var(--ivory); appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ash) 50%), linear-gradient(135deg, var(--ash) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.cv-orden select option { background: var(--grafito); }
.cv-lista { display: grid; }
.cv-item { display: grid; grid-template-columns: 88px minmax(0, 1fr) auto; gap: 24px; padding: 28px 0; border-bottom: 1px solid var(--linea); align-items: start; transition: background-color 0.25s var(--curva); }
.cv-item:hover { background: linear-gradient(90deg, rgba(237, 237, 243, 0.03), transparent); }
.cv-item__plazo { display: grid; justify-items: center; align-content: center; gap: 2px; min-height: 80px; border: 1px solid var(--linea-fuerte); border-radius: var(--r-tarjeta); }
.cv-item__plazo b { font-family: var(--f-titular); font-stretch: 112%; font-weight: 480; font-size: 28px; line-height: 1; }
.cv-item__plazo span { font-size: 12px; color: var(--ash); }
.cv-item__plazo.is-urgente { background: var(--ivory); border-color: var(--ivory); }
.cv-item__plazo.is-urgente b, .cv-item__plazo.is-urgente span { color: var(--onyx); }
.cv-item__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 13px; color: var(--ash); margin-bottom: 10px; }
.cv-item__tit { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.3; letter-spacing: 0.01em; margin-bottom: 8px; }
.cv-item__tit a { text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size 0.35s var(--curva); }
.cv-item__tit a:hover { background-size: 100% 1px; }
.cv-item__desc { color: var(--ash); font-size: 15px; line-height: 1.55; margin-bottom: 12px; }
.cv-item__datos, .cv-item__factores { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; font-size: 13px; color: var(--ash); margin: 0; }
.cv-item__datos b, .cv-item__factores b { color: var(--ivory); font-weight: 480; }
.cv-item__factores { margin-top: 8px; }
.cv-item__bdns { color: var(--slate); }
.cv-item__nota { display: grid; justify-items: end; gap: 2px; min-width: 88px; }
.cv-item__nota span { font-family: var(--f-titular); font-stretch: 112%; font-size: 32px; line-height: 1; }
.cv-item__nota small, .cv-item__nota em { font-size: 12px; color: var(--ash); font-style: normal; }
.cv-item__ir { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--linea-fuerte); border-radius: 50%; text-decoration: none; color: var(--ivory); transition: background-color 0.2s, color 0.2s, transform 0.3s var(--curva); }
.cv-item:hover .cv-item__ir { background: var(--ivory); color: var(--onyx); transform: translateX(4px); }
.cv-vacio { margin-top: 24px; }
.cv-vacio h3 { margin-bottom: 8px; }
.cv-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 40px; }
.cv-pager ol { display: flex; flex-wrap: wrap; gap: 6px; }
.cv-pager__n, .cv-pager__salto { display: inline-grid; place-items: center; min-width: 44px; height: 44px; padding: 0 16px; border: 1px solid var(--linea-fuerte); border-radius: var(--r-pildora); text-decoration: none; color: var(--ivory); font-size: 15px; transition: background-color 0.2s, color 0.2s; }
.cv-pager__n:hover, .cv-pager__salto:hover { background: var(--ivory); color: var(--onyx); }
.cv-pager__n.is-actual { background: var(--ivory); color: var(--onyx); border-color: var(--ivory); }
.cv-pager__salto.is-off { opacity: 0.35; pointer-events: none; }
.cv-pager__hueco { display: inline-grid; place-items: center; min-width: 24px; color: var(--ash); }
@media (max-width: 960px) {
  .cv__rejilla { grid-template-columns: 1fr; }
  .cv-filtros { position: static; }
}
@media (max-width: 640px) {
  .cv-busca { flex-direction: column; gap: 10px; }
  .cv-busca input { border-right: 1px solid var(--ivory); border-radius: var(--r-control); }
  .cv-busca .boton { border-radius: var(--r-control); }
  .cv-item { grid-template-columns: 64px minmax(0, 1fr); }
  .cv-item__nota, .cv-item__ir { grid-column: 2; justify-self: start; }
  .cv-res__cab { grid-template-columns: 1fr; }
  .cv-orden { grid-column: 1; grid-row: auto; }
}