/* =========================================================================
   NOEMA · Hoja de estilos del sitio
   Proyecto de graduación · Dana Michelle Durán Portillo · Universidad del Istmo

   ORDEN DEL ARCHIVO
   01 · Tipografías
   02 · Fichas (variables del sistema)
   03 · Base y retícula de papel
   04 · Tipografía aplicada
   05 · Componentes
   06 · Navegación
   07 · Secciones
   08 · Puntos de corte
   ========================================================================= */


/* 01 · TIPOGRAFÍAS ======================================================== */
/* Gambetta y Clash Grotesk reales, servidas por Fontshare.
   Si algún día no hay internet, caen a Playfair Display y Space Grotesk,
   que son las sustitutas ya declaradas en el manual. */
/* En Fontshare, el sufijo 1 es la cursiva: 401 = 400 cursiva, 701 = 700 cursiva.
   Se cargan porque la cursiva de Gambetta es la que destaca el concepto. */
@import url('https://api.fontshare.com/v2/css?f%5B%5D=clash-grotesk@400,500,600,700&f%5B%5D=clash-display@600,700&f%5B%5D=gambetta@400,401,500,600,700,701&display=swap');

/* Los íconos son Material Symbols Rounded de Google, pedidos por nombre para
   que el archivo pese lo mínimo. Se cargan con un <link> en el head del HTML.
   PARA AÑADIR UN ÍCONO: agrégalo a la lista `icon_names=` de esa URL. */


/* 02 · FICHAS ============================================================= */
:root {
  /* --- Primitivas del manual --------------------------------------------
     Grafito: el manual imprime "#161616" pero su RGB (38,38,38) y su CMYK
     (0/0/0/85) dan #262626. Se usa #262626. Corregir el hex en el .ai. */
  --papel:            #FCFAF5;
  --grafito:          #262626;
  --blanco:           #FFFFFF;

  /* --- LAS CINCO PALETAS (11-08-2026) -----------------------------------
     Fuente: 02_Diseno/07_Sistema_de_paletas.md, valores finales aprobados.
     Si cambia alli, cambia aqui.

     Los tres pasos NO son claro, medio y oscuro: son tres trabajos.
       Profundo  fondo de pieza, seccion invertida, estado presionado.
                 Lleva papel encima, nunca grafito.
       Pleno     el color de marca: figura, FICHA DE NAVEGACION, grafico.
                 El texto que admite lo dice la tabla, no se decide a ojo.
       Claro     lo que salta: resaltado, contraforma, BOTON, marcador.
                 Lleva grafito encima, nunca papel.

     Se llama CARMIN y no rojo: es un rojo con sesgo al magenta, y quien lo
     reproduzca leyendo solo el nombre va a imprimir un rojo bombero. */
  --carmin-profundo:  #5C1336;  --carmin-pleno:  #D61E61;  --carmin-claro:  #FFC8DD;
  --ambar-profundo:   #5D1900;  --ambar-pleno:   #FF9724;  --ambar-claro:   #F7EF8A;
  --azul-profundo:    #252967;  --azul-pleno:    #2867EA;  --azul-claro:    #A8E1E9;
  --verde-profundo:   #223521;  --verde-pleno:   #317D55;  --verde-claro:   #C1E54E;
  --purpura-profundo: #440366;  --purpura-pleno: #5D67E2;  --purpura-claro: #FEC5FF;

  /* --- La rampa neutra del grafito (15-08-2026) --------------------------
     NO es una sexta paleta. Es el propio grafito extendido a los dos
     escalones que le faltaban, para que la base pueda comportarse como
     paleta en el unico sitio que lo necesita: la ficha de Sobre.

     Sobre no es una seccion del proceso, es el sitio hablando de si mismo,
     asi que no consume ninguna de las cinco. Los dos grises no se
     inventaron: se calcularon a la misma luminosidad que las filas del
     sistema y con croma cero.

       grafito        L* 15,2   hace de Profundo (ya existia)
       grafito-medio  L* 48,0   hace de Pleno   · la fila esta en 46,9-48,9
       grafito-claro  L* 86,0   hace de Claro   · la fila esta en 86 exacto  */
  --grafito-medio:    #727272;
  --grafito-claro:    #D7D7D7;

  /* Texto sobre Pleno · consultado, no decidido (punto 2 de la fuente) */
  --sobre-carmin-pleno:  var(--papel);    /* 4,8:1  */
  --sobre-ambar-pleno:   var(--grafito);  /* 7,0:1 · papel NO llega */
  --sobre-azul-pleno:    var(--papel);    /* 4,8:1  */
  --sobre-verde-pleno:   var(--papel);    /* 4,8:1  */
  --sobre-purpura-pleno: var(--papel);    /* 4,47:1 · 0,03 bajo AA, asumido */
  --sobre-grafito-medio: var(--papel);    /* 4,61:1 · pasa AA */

  /* Secundarios · soporte a la interfaz */  /* --- Semánticas (lo único que usan las pantallas) --------------------- */
  --fondo-pagina:            var(--papel);
  --fondo-superficie:        var(--blanco);
  --fondo-inverso:           var(--grafito);
  --texto-principal:         var(--grafito);
  --texto-secundario:        #555049;
  --texto-inverso:           var(--papel);
  --texto-inverso-suave:     rgba(252, 250, 245, .72);
  --borde-sutil:             rgba(38, 38, 38, .12);
  --borde-fuerte:            rgba(38, 38, 38, .32);
  /* Regla de maquetación: tiene que pesar más que la trama del papel,
     o se lee como una línea más de la cuadrícula y deja de ser estructura. */
  --regla:                   rgba(38, 38, 38, .22);
  --borde-inverso:           rgba(252, 250, 245, .18);
  /* El boton vive en la fila CLARO, que es la de «lo que salta», y por eso
     lleva grafito. Sus estados salen de su propia paleta: reposo Claro,
     puntero Pleno, presionado Profundo. */
  --accion-primaria-fondo:   var(--carmin-claro);
  --accion-primaria-texto:   var(--grafito);        /* 10,5:1 */
  --accion-primaria-puntero: var(--carmin-pleno);
  --accion-primaria-activo:  var(--carmin-profundo);
  --accion-acento:           var(--purpura-pleno);   /* senal-ia */
  --accion-avanzar:          var(--verde-pleno);
  --foco-anillo:             var(--carmin-pleno);
  /* Apagado: el control no se esconde, se ve que esta y se ve que aun no.
     Vive aqui y no en la hoja de cada pagina, para que el siguiente boton
     apagado no se vuelva a inventar. */
  --accion-apagada-fondo:    rgba(38, 38, 38, .10);
  --accion-apagada-texto:    var(--texto-secundario);
  /* Dos superficies neutras sobre papel, en dos pasos de grafito. No son de
     una accion concreta: las usa todo lo que no tiene paleta propia, hoy el
     boton secundario y el chip. Antes cada uno tenia su rgba suelto y no
     coincidian entre si (.04 y .05) sin que nadie lo hubiera decidido.
     El tercer paso es --accion-apagada-fondo, al 10 %. */
  --superficie-tenue:   rgba(38, 38, 38, .04);
  --superficie-marcada: rgba(38, 38, 38, .08);
  /* Las mismas dos superficies, pero del lado oscuro: papel rebajado sobre
     grafito. Las usa el campo del boletin, que es la unica entrada del
     sitio que vive sobre fondo oscuro. */
  --superficie-inversa: rgba(252, 250, 245, .08);
  --texto-inverso-tenue: rgba(252, 250, 245, .45);

  /* Retícula de papel: textura, no maquetación.
     Vive SOLO en el body, así la trama es continua de arriba abajo y no
     vuelve a empezar en cada sección.
     Es --azul-pleno rebajado al 10 %, no un celeste suelto: sobre papel
     rinde #E8ECF4, prácticamente el mismo tono que el #84BDFF del sistema
     viejo, pero construido con un color que sí existe en el sistema. La
     opacidad es lo que lo vuelve textura; el hex nunca se usa entero. */
  --reticula-linea:      rgba(40, 103, 234, .10);
  --reticula-paso:       24px;

  /* Maquetación */
  --contenido:  1312px;
  --margen:     64px;
  --alto-nav:   72px;
  --medianil:   24px;
  --lectura:    860px;   /* la columna larga nunca pasa de 8 columnas */

  /* Espacio · múltiplos de 4 */
  --e1: 4px;  --e2: 8px;  --e3: 12px; --e4: 16px; --e5: 24px;
  --e6: 32px; --e7: 48px; --e8: 64px; --e9: 96px; --e10: 128px;

  /* Radios */
  --r-boton: 999px;   /* pastilla */
  --r-s: 4px; --r-m: 8px; --r-l: 16px;

  /* Elevación · SOLO la barra de navegación lleva sombra, y solo cuando
     el contenido pasa por debajo. Todo lo demás se apoya en el papel sin
     levantarse: el cambio de blanco a papel ya separa las piezas. */
  --elev-flotante:  0 16px 44px rgba(38, 38, 38, .18);   /* menus y hojas */

  /* --- Movimiento (15-08-2026) -------------------------------------------
     Antes de esto el sitio tenía TRECE duraciones distintas escritas a mano
     y tres formas de escribir dos curvas casi iguales. No era una decisión,
     era deriva: cada regla eligió su número al escribirse.

     La escala es de cinco pasos y el salto mayor al consolidar fue de 40 ms,
     que no se percibe. La curva se unificó en una sola: las dos que había
     estaban a cinco centésimas y ninguna respondía a un criterio escrito.

     El bloque de movimiento reducido no usa estos tokens a propósito: tiene
     que poder apagarlo todo de un golpe. */
  --dur-0: 60ms;      /* retardo, nunca duración */
  --dur-1: 140ms;     /* lo más pequeño: color, borde, opacidad */
  --dur-2: 200ms;     /* un elemento chico que cambia de estado */
  --dur-3: 280ms;     /* la ficha, la casilla, el ícono */
  --dur-4: 320ms;     /* el barrido de la etiqueta, el chip, entrar una pantalla */
  --dur-5: 380ms;     /* la barra de progreso */
  --dur-respiro: 2600ms;  /* el latido de la pantalla de espera. Es el único
                             movimiento en bucle del sitio y va lento a
                             propósito: es Calm Technology, no un cargador */
  --curva: cubic-bezier(.2, .75, .2, 1);

  /* Tipos */
  --serif: 'Gambetta', 'Playfair Display', Georgia, 'Times New Roman', serif;
  --grot:  'Clash Grotesk', 'Space Grotesk', -apple-system, BlinkMacSystemFont,
           'Segoe UI', Roboto, sans-serif;
  /* Clash Display se usa SOLO para el logotipo, no para interfaz.
     La interfaz entera va en Clash Grotesk. */
  --logotipo: 'Clash Display', 'Clash Grotesk', 'Space Grotesk', sans-serif;
}


/* 03 · BASE Y RETÍCULA DE PAPEL ========================================== */
*, *::before, *::after { box-sizing: border-box; }

/* `hidden` tiene que ganar SIEMPRE. Cualquier regla con `display` (flex,
   grid, inline-flex) lo pisa, porque el navegador lo aplica con la
   especificidad más baja que hay. En este sitio ya mordió tres veces: la
   etapa sin herramientas, el estado vacío y el formulario del boletín
   necesitaban cada uno su propia línea para esconderse.
   Una sola regla lo cierra para todos, y para los que vengan. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background-color: var(--fondo-pagina);
  color: var(--texto-principal);
  font-family: var(--grot);
  font-size: 16px;
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* UNA sola retícula, pintada en el body. Ninguna sección dibuja la suya:
   si cada una pintara la propia, la trama volvería a empezar en su borde
   y las líneas saltarían de una sección a otra. Las secciones que no deben
   llevarla la TAPAN con un fondo opaco (.liso o .inverso). */
.papel-reticulado {
  background-image:
    repeating-linear-gradient(to right,  var(--reticula-linea) 0 1px, transparent 1px var(--reticula-paso)),
    repeating-linear-gradient(to bottom, var(--reticula-linea) 0 1px, transparent 1px var(--reticula-paso));
  background-position: 0 0;
}

/* Sección de papel sin trama. Alterna con las que sí la dejan ver y es lo
   que le da respiración a una página de 11.000 px. */
.liso { background-color: var(--fondo-pagina); }

/* Las franjas oscuras no llevan retícula: son el silencio de la página. */
.inverso {
  background-color: var(--fondo-inverso);
  color: var(--texto-inverso);
}
.inverso .antetitulo { color: var(--azul-claro); }
.inverso .parrafo,
.inverso .texto-secundario { color: var(--texto-inverso-suave); }

img, svg { max-width: 100%; }

/* Enlace de salto: primero en el orden de tabulación */
.salto {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--grafito); color: var(--papel);
  padding: 12px 20px; border-radius: 0 0 var(--r-m) 0;
  font-family: var(--grot); font-weight: 500;
}
.salto:focus { left: 0; }

/* Foco de teclado: anillo rosa de 2 px. Señal distinta a la del puntero. */
:where(a, button, input, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--foco-anillo);
  outline-offset: 3px;
  border-radius: var(--r-s);
}

/* --- Nadie se queda solo al final de un parrafo ------------------------
   `pretty` evita que la ultima linea quede con una palabra suelta: el
   navegador reparte el final del bloque. `balance` es para titulares, que
   son cortos: iguala el largo de sus lineas.
   Los titulares del heroe quedan fuera porque llevan sus cortes a mano. */
p, li, figcaption,
.parrafo, .parrafo-m, .parrafo-s, .micro, .glosa, .cotejo {
  text-wrap: pretty;
}
h1, h2, h3,
.display-l, .display-xl, .titular-m, .titular-s, .cita {
  text-wrap: balance;
}
.titular, .marca-seccion .palabra { text-wrap: normal; }

/* Solo para lectores de pantalla */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}

/* Envolturas */
.franja { position: relative; }
/* Un ancla no puede dejar el titular tapado por la barra */
.franja[id], .seccion[id] { scroll-margin-top: calc(var(--alto-nav) + var(--e5)); }
.contenido {
  width: 100%;
  max-width: calc(var(--contenido) + var(--margen) * 2);
  margin-inline: auto;
  padding-inline: var(--margen);
}
.columna-lectura { max-width: var(--lectura); }


/* 04 · TIPOGRAFÍA APLICADA =============================================== */
/* Regla del manual: Gambetta solo en titulares y subtítulos, nunca en
   bloques de texto. Clash Grotesk es la fuente de trabajo. */

.display-xxl, .display-xl, .display-l, .titular-m, .titular-s, .cita {
  font-family: var(--serif);
  font-weight: 700;
  margin: 0;
}

.display-xxl {
  /* El tamaño lo fija la línea más larga en cada corte, para que el
     titular caiga siempre en tres líneas. Ver .corte-ancho / .corte-angosto. */
  font-size: clamp(32px, 10vw, 112px);
  line-height: .90;
  letter-spacing: -.02em;
  text-transform: uppercase;
}
.display-xl {
  font-size: clamp(38px, 4.6vw, 66px);
  line-height: .96;
  letter-spacing: -.015em;
}
.display-l {
  /* Subidos el 11-08: se leen mejor con mas cuerpo. */
  font-size: clamp(36px, 4.3vw, 62px);
  line-height: 1.02;
  letter-spacing: -.01em;
}
.titular-m { font-size: clamp(28px, 3vw, 44px); line-height: 1.06; }
.titular-s { font-size: clamp(20px, 1.7vw, 25px); line-height: 1.18; }

.cita { font-weight: 400; font-size: 24px; line-height: 1.4; }

/* La cursiva de Gambetta se reserva para el concepto dentro del texto. */
.concepto { font-style: italic; }

/* El titular lleva un solo corte fijo: LA IDEA / ANTES QUE LA / HERRAMIENTA.
   Tres líneas en todos los anchos, sin dejar «la» sola en una cuarta. */

/* Antetítulo de sección: azul, como las etiquetas del manual */
.antetitulo {
  font-family: var(--grot);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--azul-profundo);   /* texto de color = Profundo */
  margin: 0 0 var(--e5);
  display: block;
}

.parrafo {
  font-family: var(--grot);
  font-size: 19px;
  line-height: 1.62;
  color: var(--texto-secundario);
  margin: 0;
}
.parrafo-m { font-size: 17px; line-height: 1.6; }
.parrafo-s { font-size: 15px; line-height: 1.55; }

/* El resalte dentro de un párrafo. Regla del sistema, no una decisión por
   caso: un párrafo de dos oraciones o más lleva UN fragmento en semibold, el
   que sostiene la afirmación. Nunca dos, y nunca el arranque del párrafo.
   El 600 no es nuevo: es el mismo «semibold, nunca negrita» que ya se aplica
   a las pistas del héroe. Con 700 la grotesca se cierra y el resalte pasa de
   énfasis a grito.
   El color sube a principal porque .parrafo vive en secundario: engordar sin
   subir el tono se nota poco y el resalte no haría su trabajo. */
.parrafo strong, .parrafo-m strong, .parrafo-s strong {
  font-weight: 600;
  color: var(--texto-principal);
}
/* Sobre franja oscura el párrafo va al 72 % de opacidad, así que el resalte
   sube a papel entero. */
.inverso .parrafo strong,
.inverso .parrafo-m strong,
.inverso .parrafo-s strong { color: var(--texto-inverso); }
.micro {
  font-family: var(--grot);
  font-size: 13px;
  line-height: 1.5;
  color: var(--texto-secundario);
}
.interfaz-h3 {
  font-family: var(--grot);
  font-size: 21px; font-weight: 600; line-height: 1.35;
  margin: 0;
}

/* Las cifras NUNCA van en serif. La serif es la voz humana,
   la grotesca es el dato y la máquina. */
.dato {
  font-family: var(--grot);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.03em;
  line-height: 1;
}
.dato-xxl { font-size: clamp(64px, 8vw, 116px); }
.dato-l   { font-size: clamp(40px, 4vw, 56px); }

.texto-secundario { color: var(--texto-secundario); }


/* 05 · COMPONENTES ======================================================= */

/* --- Botones · pastilla, nunca rectángulo de radio 4 -------------------- */
.boton {
  font-family: var(--grot);
  font-size: 16px; font-weight: 500;
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--e3);
  min-height: 56px; padding: 0 var(--e6);
  border-radius: var(--r-boton);
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--dur-1) ease, background-color var(--dur-1) ease, border-color var(--dur-1) ease;
}
.boton:hover { transform: translateY(-1px); }
.boton:active { transform: translateY(0); }

.boton-primario {
  background: var(--accion-primaria-fondo);
  color: var(--accion-primaria-texto);   /* grafito, 5.5:1 · nunca blanco */
}
.boton-primario:hover {
  background: var(--accion-primaria-puntero);
  color: var(--papel);              /* 4,8:1 sobre carmin pleno */
}
.boton-primario:active {
  background: var(--accion-primaria-activo);
  color: var(--papel);              /* 12,6:1 sobre carmin profundo */
}

.boton-secundario {
  background: transparent;
  color: var(--texto-principal);
  border-color: var(--borde-fuerte);
}
.boton-secundario:hover  { border-color: var(--grafito); background: var(--superficie-tenue); }
.boton-secundario:active { border-color: var(--grafito); background: var(--superficie-marcada); }

.inverso .boton-secundario { color: var(--texto-inverso); border-color: var(--borde-inverso); }
.inverso .boton-secundario:hover { border-color: var(--papel); background: rgba(252,250,245,.08); }

.boton-m { min-height: 46px; font-size: 15px; padding: 0 var(--e5); }

/* Apagado · es un estado del sistema, no de una pagina. Gana sobre las
   variantes porque va despues, y anula el levantamiento del puntero. */
.boton[disabled],
.boton[aria-disabled="true"] {
  background: var(--accion-apagada-fondo);
  border-color: transparent;
  color: var(--accion-apagada-texto);
  cursor: not-allowed;
}
.boton[disabled]:hover,
.boton[aria-disabled="true"]:hover {
  background: var(--accion-apagada-fondo);
  transform: none;
}

/* Fila de acciones. En móvil los botones se apilan a ancho completo: dos
   pastillas partidas a mitad de palabra se leen como un error. */
.hero-acciones { display: flex; flex-wrap: wrap; gap: var(--e4); }
@media (max-width: 767px) {
  .hero-acciones { flex-direction: column; align-items: stretch; }
  .hero-acciones .boton { justify-content: center; }
}

/* Círculo de avance */
/* El botón de avance no tenía estados: solo existía su reposo. Se cerraron
   el 16-08-2026 al dibujarlo como componente.
   La progresión no es reposo Pleno → puntero Profundo, que era lo primero
   que salía, porque ese par es el más flojo de la paleta verde: 2,62:1, y
   el cambio de estado casi no se veía. Va por inversión, igual que la ficha
   de la barra: al puntero se enciende y al presionar se apaga. Así el salto
   al presionar es de 9,12:1. */
.avanzar {
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--accion-avanzar); color: var(--papel);
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer;
  transition: background-color var(--dur-2) ease, color var(--dur-2) ease;
}
.avanzar:hover  { background: var(--verde-claro);    color: var(--grafito); }  /* 10,5:1 */
.avanzar:active { background: var(--verde-profundo); color: var(--papel);   }  /* 12,6:1 */
.avanzar:focus-visible { outline: 2px solid var(--foco-anillo); outline-offset: 3px; }

/* --- Marcador · elipse amarilla que pasa POR DEBAJO de la palabra ------- */
.marcador {
  position: relative;
  display: inline-block;
  isolation: isolate;
}
.marcador::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -.045em; right: -.045em;
  top: 21%; bottom: 11%;
  background: var(--ambar-claro);
  opacity: .85;                 /* al 85 % para que la palabra respire */
  border-radius: 3px;
  transform: rotate(-.45deg);
}
.marcador-verde::before { background: var(--verde-claro); opacity: .9; }
/* En texto corrido el trazo es más bajo, como un subrayado de marcador */
.parrafo .marcador::before,
.parrafo-m .marcador::before { top: 46%; bottom: 4%; }

/* --- Etiqueta resaltada (las del manual, con fondo azul claro) --------- */
.etiqueta-clara {
  display: inline-block;
  font-family: var(--grot);
  font-size: 12px; font-weight: 600; letter-spacing: .04em;
  color: var(--grafito);
  background: var(--azul-claro);
  padding: 3px 8px;
  border: 1px solid rgba(38,38,38,.28);
  border-radius: var(--r-s);
}

/* --- Íconos · Material Symbols Rounded de Google ------------------------ */
.ms {
  font-family: 'Material Symbols Rounded';
  font-weight: normal; font-style: normal;
  line-height: 1;
  letter-spacing: normal; text-transform: none;
  display: inline-block; white-space: nowrap; word-wrap: normal;
  direction: ltr;
  font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
  -webkit-font-smoothing: antialiased;
  font-size: 20px;
  user-select: none;
}
.ms-s  { font-size: 16px; }
.ms-xs { font-size: 14px; }
.ms-relleno { font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24; }

/* Ícono con caja: trazo azul dentro de un cuadro redondeado celeste */
.icono {
  width: 30px; height: 30px; flex: 0 0 30px;
  border-radius: 8px;
  background: var(--azul-claro);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--azul-profundo);
}
.icono .ms { font-size: 18px; }
/* Variante en grafito, para bloques que no tienen paleta asignada. */
.icono-grafito { background: var(--grafito); color: var(--papel); }

/* --- Bocadillo · el mentor que habla ------------------------------------ */
.bocadillo {
  position: relative;
  background: var(--grafito);
  color: var(--papel);
  border-radius: var(--r-m);
  padding: var(--e5) var(--e5) var(--e5);
  max-width: 340px;
}
.bocadillo::after {
  content: "";
  position: absolute;
  left: 28px; bottom: -14px;
  width: 0; height: 0;
  border-top: 16px solid var(--grafito);
  border-right: 22px solid transparent;
}
.bocadillo p { margin: 0; }

/* --- Superficie · blanca sobre papel, borde de 1 px, plana ------------- */
/* Las tarjetas no llevan contorno. La separacion con el papel la da el
   cambio de blanco a papel, igual que en la barra. Una linea alrededor de
   cada caja llena la pagina de rectangulos. */
.superficie {
  background: var(--fondo-superficie);
  border: 0;
  border-radius: var(--r-l);
  padding: var(--e6);
}
/* .superficie se declara después de .inverso, así que hay que devolverle
   el fondo oscuro cuando se combinan. Sin esto el bloque sale ilegible. */
.superficie.inverso { background-color: var(--fondo-inverso); border-color: transparent; }

/* La tarjeta "en negativo": no lleva relleno blanco, pero tampoco puede
   leerse como algo sin terminar. Fondo tenue y borde sólido. */
.tarjeta-hoy {
  background: var(--superficie-tenue);
}

/* Barra de color que indica el área de contenido */
/* Quitada el 11-08: la pastilla de color sobre cada tarjeta metia una
   pieza mas en una pagina que se quiere quieta. */
.barra-area { display: none; }

/* --- Tarjeta con pestaña · la carpeta ---------------------------------- */
.carpeta { position: relative; margin-top: 34px; }
.carpeta > .pestana {
  position: absolute; top: -30px; left: 0;
  height: 30px; padding: 0 var(--e5) 0 var(--e4);
  display: inline-flex; align-items: center; gap: var(--e2);
  border-radius: var(--r-m) var(--r-m) 0 0;
  font-family: var(--grot); font-size: 11px; font-weight: 600;
  letter-spacing: .10em; text-transform: uppercase;
}
.carpeta > .cuerpo {
  background: var(--fondo-superficie);
  border-radius: 0 var(--r-l) var(--r-l) var(--r-l);
  box-shadow: none;
  padding: var(--e6);
}

/* --- Casilla del checklist --------------------------------------------- */
.casilla {
  width: 18px; height: 18px; flex: 0 0 18px;
  border: 1.5px solid var(--borde-fuerte);
  border-radius: var(--r-s);
  background: transparent;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background-color var(--dur-3) ease, border-color var(--dur-3) ease;
}
/* La paloma solo se ve cuando la casilla esta marcada */
.casilla .ms { opacity: 0; }
.casilla-hecha .ms { opacity: 1; }
.casilla-hecha {           /* verde claro = confirmación y avance */
  background: var(--verde-claro);
  border-color: var(--verde-pleno);
  color: var(--grafito);
}
.casilla .ms { font-size: 14px; }

/* --- Etapa del plan · la barra de color dice de quién es la etapa ------ */
.etapa {
  display: flex; align-items: center; gap: var(--e4);
  padding: var(--e3) var(--e4);
  border-radius: var(--r-m);
  border: 0;
  background: var(--fondo-superficie);
}
.etapa + .etapa { margin-top: var(--e2); }
.etapa .marca-etapa { width: 5px; align-self: stretch; min-height: 26px; border-radius: 3px; }
.etapa .num {
  font-family: var(--grot); font-size: 12px; font-weight: 600;
  color: var(--texto-secundario); font-variant-numeric: tabular-nums;
}
.etapa .nombre { font-family: var(--grot); font-size: 15px; font-weight: 500; min-width: 0; }
.etapa .apunte { margin-left: auto; white-space: nowrap; }
@media (max-width: 767px) {
  .etapa { flex-wrap: wrap; }
  .etapa .apunte { margin-left: 0; width: 100%; padding-left: 41px; }
}

/* --- Chip ---------------------------------------------------------------*/
/* Unificado el 15-08-2026. Estaba declarado dos veces, aqui y otra vez en
   el bloque H6, y la segunda ganaba en todo el sitio sin estar acotada a
   su seccion. Se conserva el aspecto que ya se estaba viendo: sin borde y
   con fondo grafito al 5 %. */
.chip {
  font-family: var(--grot); font-size: 13px; font-weight: 500;
  padding: 7px 14px; border-radius: var(--r-boton);
  border: 0;
  background: var(--superficie-tenue);
  color: var(--texto-secundario);
  display: inline-block;
  transition: background-color var(--dur-4) ease, color var(--dur-4) ease;
}
/* El chip tampoco tenía puntero: se quedaba igual al pasar por encima y no
   se leía como algo que se pueda pulsar. Cerrado el 16-08-2026. */
button.chip:hover, a.chip:hover {
  background: var(--superficie-marcada);
  color: var(--texto-principal);
}
.chip:focus-visible { outline: 2px solid var(--foco-anillo); outline-offset: 2px; }
.chip-activo {
  background: var(--carmin-pleno); color: var(--papel);
}
.chip[disabled], .chip[aria-disabled="true"] {
  background: var(--accion-apagada-fondo);
  color: var(--accion-apagada-texto);
  cursor: not-allowed;
}

/* --- Reparto humano / IA ------------------------------------------------*/
.reparto { display: flex; height: 34px; border-radius: var(--r-s); overflow: hidden; }
.reparto span { font-variant-numeric: tabular-nums; white-space: nowrap; }
.reparto span {
  display: flex; align-items: center; justify-content: center;
  font-family: var(--grot); font-size: 11px; font-weight: 600; letter-spacing: .04em;
}
.reparto .humano { background: var(--grafito); color: var(--papel); flex: 0 0 62%; }
/* La parte de la maquina va en purpura: es la paleta de la IA. */
.reparto .maquina { background: var(--purpura-pleno); color: var(--papel); flex: 1; }

/* --- Estado vacío -------------------------------------------------------
   Qué se ve cuando un filtro no devuelve nada. Devolver una lista en blanco
   se leería como un error de la página, y no lo es.

   OJO CON LA DIFERENCIA. Este componente es para el vacío ACCIDENTAL: la
   combinación de filtros que no encuentra nada. No hay que confundirlo con
   `.etapa-sin-herramientas`, que se le parece a propósito pero dice algo
   distinto: ahí el vacío es el ARGUMENTO, porque las etapas 03 y 04 no
   admiten ninguna herramienta y decirlo es la tesis puesta donde se puede
   comprobar. Uno es un aviso, el otro es una afirmación.

   Por eso este lleva salida (un botón que limpia el filtro) y aquel no. */
.estado-vacio {
  display: grid; justify-items: start; gap: var(--e3);
  padding: var(--e8);
  border: 1.5px dashed var(--borde-fuerte);
  border-radius: var(--r-l);
  max-width: 62ch;
}
.estado-vacio[hidden] { display: none; }
.estado-vacio .ms { color: var(--texto-secundario); }
.estado-vacio p { margin: 0; }
.estado-vacio .boton { margin-top: var(--e2); }

/* --- Marcas de correcto e incorrecto -----------------------------------*/
.marca-si, .marca-no {
  width: 18px; height: 18px; flex: 0 0 18px;
  display: inline-flex; align-items: center; justify-content: center;
}
.marca-si { color: var(--verde-profundo); }
.marca-no { color: var(--carmin-profundo); }
.marca-si .ms, .marca-no .ms { font-size: 18px; }

/* --- Rejillas -----------------------------------------------------------*/
.rejilla { display: grid; gap: var(--medianil); align-items: stretch; }
.rejilla-2 { grid-template-columns: repeat(2, 1fr); }
.rejilla-3 { grid-template-columns: repeat(3, 1fr); }
/* Las tarjetas de una misma fila terminan a la misma altura */
.rejilla > .carpeta { display: flex; flex-direction: column; }
.rejilla > .carpeta > .cuerpo { flex: 1; }

/* --- Lista con íconos ---------------------------------------------------*/
.lista-limpia { list-style: none; margin: 0; padding: 0; }
.lista-limpia li { display: flex; gap: var(--e3); align-items: flex-start; }
.lista-limpia li + li { margin-top: var(--e4); }


/* 06 · NAVEGACIÓN ======================================================== */
/* Barra blanca anclada al borde superior, ángulos inferiores a 20 px, sin
   contorno. La separación con el papel la da el cambio de blanco a papel. */
/* La barra flota sobre el papel: caja blanca con los cuatro ángulos
   redondeados, separada de los bordes y SIN contorno. La separación con el
   papel la da el cambio de blanco a papel, no una línea. */
.nav {
  position: sticky; top: 0; z-index: 100;
  padding: 0 24px 0;      /* pegada al borde: sin aire arriba */
}
/* La caja se separa 24 px del borde, pero su relleno interno de 40 px
   devuelve el contenido a la retícula: 24 + 40 = 64, el margen del sistema. */
.nav-caja {
  max-width: calc(var(--contenido) + 80px);
  margin-inline: auto;
  padding-inline: 40px;
  background: var(--blanco);
  border-radius: 0 0 20px 20px;   /* arriba recto, abajo redondeado */
  transition: box-shadow var(--dur-2) ease;
}
.nav.desplazado .nav-caja { box-shadow: 0 6px 24px rgba(38,38,38,.10); }

.nav-fila {
  position: relative;
  height: 72px;
  display: flex; align-items: center; justify-content: space-between;
}

/* Logotipo provisional: Clash Display Bold, caja alta, tracking cerrado. */
.marca {
  font-family: var(--logotipo);
  font-weight: 700;
  font-size: 24px;
  letter-spacing: -.005em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--texto-principal);
  text-decoration: none;
}

/* El grupo va centrado en el ancho TOTAL de la barra, no repartido entre
   la marca y el botón: al quitarse el botón de boletín la derecha se
   aligeró y un centrado "entre extremos" se ve corrido. */
.nav-enlaces {
  position: absolute; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: var(--e5);
}

/* El enlace: la ficha y la etiqueta, pegadas y sin redondeo.
   Medidas como proporción del alto H = 34 px. */
/* El identificador de sección tiene que leerse, no gritar: la ficha es
   más chica que el alto del enlace y el texto conserva su cuerpo. */
.enlace {
  --H: 28px;
  position: relative;
  display: flex; align-items: stretch; height: var(--H);
  text-decoration: none; color: var(--texto-principal);
}
.enlace .ficha {
  width: calc(var(--H) * .72);
  background: var(--seccion);
  display: flex; align-items: center; justify-content: center;
  transition: background-color var(--dur-3) var(--curva);
}
/* El punto es un círculo, no un cuadrado redondeado. */
.enlace .ficha i {
  width: calc(var(--H) * .43); height: calc(var(--H) * .43);
  border-radius: 50%;
  background: var(--punto);
  transition: background-color var(--dur-3) var(--curva);
}
.enlace .etiqueta {
  position: relative;
  display: flex; align-items: center; gap: 4px;
  padding-left: 11px;
  padding-right: 11px;
  font-family: var(--grot);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  transition: color var(--dur-2) ease var(--dur-0);
}
/* El relleno de la etiqueta se estira desde la ficha hacia la derecha.
   Es una capa que escala, no un cambio de fondo: por eso se lee como que
   el bloque de color crece. */
.enlace .etiqueta::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--seccion-llena, var(--seccion));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-4) var(--curva);
}
.enlace .etiqueta > * { position: relative; }

/* Con el puntero encima la ficha se invierte: el recuadro toma el color del
   punto y el punto toma el color del recuadro. La geometría no cambia, así
   que los enlaces vecinos no se mueven. */
.enlace:hover .ficha,
.enlace:focus-visible .ficha { background: var(--punto); }
.enlace:hover .ficha i,
.enlace:focus-visible .ficha i { background: var(--seccion-llena, var(--seccion)); }
.enlace:hover .etiqueta::before,
.enlace:focus-visible .etiqueta::before { transform: scaleX(1); }
.enlace:hover .etiqueta,
.enlace:focus-visible .etiqueta { color: var(--texto-sobre-seccion); }
.enlace:focus-visible { outline-offset: 2px; }

/* --- El quinto estado: la sección en la que ya estás ---------------------
   La especificación de navegación define cuatro estados (reposo, puntero,
   foco y fija al desplazar). Este es el quinto. Se resuelve con la MITAD
   del estado de puntero, solo la ficha invertida: llenar también la
   etiqueta dejaría un enlace encendido de forma permanente y la barra
   perdería su quietud.

   SUBIDO AQUÍ DESDE `sobre.css` EL 18-08-2026. Vivía en la hoja de una
   página, así que un estado declarado como del sistema funcionaba en una
   sola de las trece. Es una regla de la barra y la barra es del sistema.

   ACEPTA LOS DOS VALORES, y la diferencia importa:
     `page` cuando el enlace apunta a la página en la que estás.
     `true` cuando apunta a su sección y estás en una hija, como la página
            de área o la ficha de una herramienta. Decir `page` ahí sería
            afirmar que ese enlace lleva a donde ya estás, y no es cierto. */
.enlace[aria-current="page"] .ficha,
.enlace[aria-current="true"] .ficha { background: var(--punto); }
.enlace[aria-current="page"] .ficha i,
.enlace[aria-current="true"] .ficha i { background: var(--seccion-llena, var(--seccion)); }

/* Codificación cromática de la barra, con las cinco paletas.
   Cada tono hace el trabajo que le asigna el sistema, no uno inventado:

     --seccion        PLENO      la ficha en reposo
     --punto          CLARO      el circulo dentro de la ficha
     --seccion-llena  PLENO      la etiqueta con el puntero encima
     --seccion-activa PROFUNDO   la etiqueta al presionar

   Es la regla 5 del sistema de paletas: reposo Claro, puntero Pleno,
   presionado Profundo. Y el texto no se decide, se consulta: papel sobre
   los cuatro Plenos y grafito sobre el ambar, que es el unico que no
   sostiene papel.

   El reparto de secciones sale del significado de cada paleta:
     Fundamentos     azul     la estructura y el sistema
     Herramientas    purpura  la intervencion de la IA
     Actualizaciones verde    el contexto y la investigacion
     Recursos        ambar    la construccion hecha a mano
     Sobre           grafito  no es una seccion del proceso

   El carmin NO esta aqui: ya vive en la barra como el boton de empezar un
   plan, que usa sus tres escalones. Es la paleta de la intencion, y la
   intencion se declara en el filtro y en el plan, no en Sobre. Darselo
   tambien a Sobre ponia la misma paleta a dos cosas distintas en la misma
   barra.

   Sobre usa la rampa neutra del grafito por la misma razon que la linea del
   vinculo es grafito y no lleva color propio: no es una de las cinco. */
.s-fundamentos     { --seccion: var(--azul-pleno);    --punto: var(--azul-claro);
                     --seccion-activa: var(--azul-profundo);
                     --texto-sobre-seccion: var(--sobre-azul-pleno); }
.s-herramientas    { --seccion: var(--purpura-pleno); --punto: var(--purpura-claro);
                     --seccion-activa: var(--purpura-profundo);
                     --texto-sobre-seccion: var(--sobre-purpura-pleno); }
.s-actualizaciones { --seccion: var(--verde-pleno);   --punto: var(--verde-claro);
                     --seccion-activa: var(--verde-profundo);
                     --texto-sobre-seccion: var(--sobre-verde-pleno); }
.s-recursos        { --seccion: var(--ambar-pleno);   --punto: var(--ambar-claro);
                     --seccion-activa: var(--ambar-profundo);
                     --texto-sobre-seccion: var(--sobre-ambar-pleno); }
/* LA VUELTA AL PLAN.
   Va en carmín porque es la paleta del motor A, y este enlace es el único de
   la biblioteca que devuelve al plan. El color dice a dónde lleva antes de
   leerlo. Relleno suave y no botón: compite con la acción principal de la
   pantalla solo lo justo (17-08-2026). */
.volver-plan {
  display: inline-flex; align-items: center; gap: 7px;
  margin-bottom: var(--e4);
  padding: 7px 14px 7px 11px;
  border-radius: var(--r-boton);
  background: rgba(214, 30, 97, .10);
  font-family: var(--grot); font-size: 14px; font-weight: 500;
  color: var(--carmin-profundo);
  text-decoration: none;
}
.volver-plan[hidden] { display: none; }
.volver-plan:hover { background: rgba(214, 30, 97, .17); }
.volver-plan b { font-weight: 700; }

/* La etapa a la que se acaba de volver se señala un momento, para que quien
   regresa sepa dónde aterrizó sin tener que buscarlo. */
.etapa-plan[data-recien-vuelto="si"] {
  animation: aterrizaje 2.4s ease-out 1;
}
@keyframes aterrizaje {
  0%, 45% { background: rgba(214, 30, 97, .09); }
  100%    { background: transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .etapa-plan[data-recien-vuelto="si"] { animation: none; }
}

.s-sobre           { --seccion: var(--grafito-medio); --punto: var(--grafito-claro);
                     --seccion-activa: var(--grafito);
                     --texto-sobre-seccion: var(--sobre-grafito-medio); }

/* Presionado: la etiqueta baja a Profundo, que siempre lleva papel */
.enlace:active .etiqueta::before { background: var(--seccion-activa); }
.enlace:active .etiqueta { color: var(--papel); }

/* Desplegable de Actualizaciones: el único enlace con menú */
.con-menu { position: relative; }
.menu {
  position: absolute; top: calc(100% + 10px); left: 0;
  min-width: 300px;
  background: var(--blanco);
  border-radius: var(--r-l);
  box-shadow: var(--elev-flotante);
  padding: var(--e2);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity var(--dur-1) ease, transform var(--dur-1) ease, visibility var(--dur-1);
}
.con-menu:hover .menu,
.con-menu:focus-within .menu { opacity: 1; visibility: visible; transform: translateY(0); }
.menu a {
  display: flex; gap: var(--e3); align-items: flex-start;
  padding: var(--e3) var(--e4); border-radius: var(--r-m);
  text-decoration: none; color: var(--texto-principal);
}
.menu a:hover { background: var(--papel); }
.menu .punto { width: 10px; height: 10px; border-radius: 3px; margin-top: 6px; flex: 0 0 10px; }
.menu strong { font-family: var(--grot); font-size: 15px; font-weight: 600; display: block; }
.menu span { font-size: 13px; color: var(--texto-secundario); }

.nav-boton { min-height: 50px; padding: 0 var(--e5); font-size: 15px; }

/* Botón de menú en móvil */
.nav-menu-boton {
  display: none;
  width: 46px; height: 46px; border-radius: var(--r-boton);
  border: 1px solid var(--borde-sutil); background: var(--papel);
  align-items: center; justify-content: center; cursor: pointer;
}
.hoja-menu { display: none; }


/* 07 · SECCIONES ========================================================= */

.seccion { padding-block: var(--e10); }
.seccion-corta { padding-block: var(--e9); }

/* --- H1 · HÉROE «el camino» -------------------------------------------
   Calcado del Figma de Dana (frame 1440 × 900). Todo se posiciona en % de
   un escenario de proporción fija y se dimensiona en cqw (1 cqw = 1 % del
   ancho del escenario), así la composición escala entera sin recolocar.
   La entrada la anima noema-hero.js con GSAP. */
.hero { padding: 0; }
/* La barra flota SOBRE el escenario, como en el Figma: alli el titular
   arranca a 179 px del borde de la pagina, no a 179 px por debajo de la
   barra. Por eso el heroe se sube el alto de la barra. */
@media (min-width: 760px) {
  .hero { margin-top: calc(var(--alto-nav) * -1); }
}
.escenario {
  position: relative;
  container-type: inline-size;
  width: 100%; max-width: 1440px;
  margin-inline: auto;
  aspect-ratio: 1440 / 900;
}

.camino { position: absolute; inset: 0; width: 100%; height: 100%; }
.camino-linea {
  stroke: rgba(38, 38, 38, .56);
  stroke-width: 1;
  stroke-dasharray: 8 8;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.titular {
  position: absolute;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 4.9cqw;
  line-height: 1;
  letter-spacing: -.02em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--texto-principal);
  margin: 0;
}
/* El bloque de texto se alinea al margen del sistema (64), no al 80 del
   Figma, para que caiga sobre el mismo eje que el resto de la página. */
.t1 { left: 4.44%; top: 19.9%; }
.t2 { left: 35.4%; top: 85.3%; }
.t2 em { font-style: italic; }

.escenario .parrafo {
  position: absolute; left: 4.44%; top: 36%;
  width: 41.7%;
  font-size: max(1.25cqw, 13px); line-height: 1.55;
}
.escenario .cta {
  position: absolute; left: 37.6%; top: 55.2%;
  min-height: max(3.9cqw, 42px); padding-inline: max(2cqw, 20px); font-size: max(1.11cqw, 13px);
}
/* Antetitulo: ya no va en azul. El rotulo en gris y el dato en VERDE,
   que es el color de Actualizaciones, que es adonde lleva el enlace. */
.escenario .eyebrow {
  position: absolute; left: 65.3%; top: 80.9%;
  font-family: var(--grot); font-weight: 600;
  font-size: max(.9cqw, 10px); letter-spacing: .06em; text-transform: uppercase;
  text-decoration: none;
  /* Sin nowrap: con el suelo de 10 px, a 760 de ancho la linea se salia
     de la pagina. Aqui envuelve dentro de su caja del Figma. */
  width: 30%;
}
.escenario .eyebrow .rot { color: var(--texto-secundario); }
.escenario .eyebrow .val { color: var(--verde-profundo); }
.escenario .eyebrow:hover .val { text-decoration: underline; text-underline-offset: 3px; }

/* Stickers · posiciones y tamaños tomados del Figma */
.sticker {
  position: absolute; display: block;
  transform-origin: 50% 60%;
  transition: transform var(--dur-2) var(--curva);
}
.sticker img { display: block; width: 100%; height: auto; }
.sticker[tabindex] { cursor: help; }
.sticker[tabindex]:focus-visible { outline: 2px solid var(--foco-anillo); outline-offset: 6px; border-radius: 4px; }
.sticker[tabindex]:hover { transform: scale(1.08) rotate(-3deg); }

.st-bombilla       { left: 46.94%; top: 20.33%; width: 2.68%; }
.st-cabeza         { left: 84.24%; top: 38.89%; width: 3.92%; }
.st-diamante-verde { left:  3.40%; top: 73.11%; width: 3.26%; }
.st-diamante-rosa  { left: 31.53%; top: 85.33%; width: 4.17%; }
.st-burbuja        { left: 62.99%; top: 63.11%; width: 7.57%; }
.st-tag            { left: 58.40%; top: 67.22%; width: 8.40%; }
.st-robot          { left: 53.40%; top: 76.78%; width: 6.46%; }

/* --- LAS PISTAS DE LOS STICKERS ----------------------------------------
   No estan siempre visibles: salen con el puntero o con el foco.
   HAY TRES ESTILOS. Se cambia uno en el HTML, en data-pista del escenario:
     data-pista="globo"       burbuja grafito con cola, el bocadillo del manual
     data-pista="calcomania"  pastilla girada en color de marca
     data-pista="nota"        texto suelto, sin caja
   ----------------------------------------------------------------------- */
.pista {
  position: absolute; width: 9.8%;
  font-family: var(--grot);
  font-size: max(.97cqw, 11px); line-height: 1.35;
  opacity: 0;
  transition: opacity var(--dur-2) ease, transform var(--dur-2) var(--curva);
  pointer-events: none;
  z-index: 4;
  /* Reparte las lineas para que la ultima palabra no quede sola */
  text-wrap: balance;
  text-align: center;
}
.pista b { font-weight: 600; }   /* semibold, nunca negrita */

/* El color de cada globo es el de su sticker */
.pi-bombilla       { --burbuja: var(--ambar-pleno);  --sobre-burbuja: var(--grafito); }
.pi-cabeza         { --burbuja: var(--azul-pleno);   --sobre-burbuja: var(--papel);   }
.pi-diamante-verde { --burbuja: var(--verde-pleno);  --sobre-burbuja: var(--papel);   }
/* Rosa: en el manual es el color de la interaccion y de los llamados a la
   accion. Con grafito da 5.5:1, la misma regla que el boton. */
.pi-diamante-rosa  { --burbuja: var(--carmin-pleno); --sobre-burbuja: var(--papel);   }
.sticker:hover + .pista,
.sticker:focus-visible + .pista { opacity: 1; }

/* A · GLOBO (por defecto). Es el bocadillo que ya existe en el manual.
   Cada globo toma el color de SU sticker, no un negro para todos. Sin
   sombra: el color pleno ya lo separa del papel. */
[data-pista="globo"] .pista {
  background: var(--burbuja);
  color: var(--sobre-burbuja);
  padding: .6em .9em;
  border-radius: var(--r-m);
  /* Se ajusta al texto en vez de ocupar un ancho fijo: con ancho fijo y
     el texto centrado quedaba un hueco a los lados. */
  width: fit-content;
  max-width: 12.5%;
  transform: translateY(6px) scale(.96);
}
[data-pista="globo"] .pista b { color: inherit; font-weight: 600; }
[data-pista="globo"] .pista::after {
  content: ""; position: absolute;
  left: 18%; bottom: -7px;
  width: 0; height: 0;
  border-top: 8px solid var(--burbuja);
  border-right: 11px solid transparent;
}
[data-pista="globo"] .sticker:hover + .pista,
[data-pista="globo"] .sticker:focus-visible + .pista { transform: none; }

/* B · CALCOMANIA. Pastilla girada, del lenguaje de las piezas editoriales. */
[data-pista="calcomania"] .pista {
  background: var(--burbuja);
  color: var(--sobre-burbuja);
  padding: .55em .95em;
  border-radius: var(--r-boton);
  width: fit-content; max-width: 15%;
  transform: rotate(-3deg) scale(.9);
  font-weight: 400;
}
[data-pista="calcomania"] .pista b { font-weight: 600; }
[data-pista="calcomania"] .sticker:hover + .pista,
[data-pista="calcomania"] .sticker:focus-visible + .pista { transform: rotate(-3deg) scale(1); }

/* C · NOTA. Texto suelto sobre el papel, sin caja. Lo mas silencioso. */
[data-pista="nota"] .pista {
  color: var(--texto-secundario);
  transform: translateY(4px);
}
[data-pista="nota"] .pista b { color: var(--texto-principal); font-weight: 600; }
[data-pista="nota"] .pista { --burbuja: none; }
[data-pista="nota"] .sticker:hover + .pista,
[data-pista="nota"] .sticker:focus-visible + .pista { transform: none; }

.pi-bombilla       { left: 50.63%; top: 15.5%; }
.pi-diamante-verde { left:  7.50%; top: 71.5%; }
.pi-diamante-rosa  { left: 29%;    top: 74.5%; }
/* La cabeza tiene su pista a la IZQUIERDA, asi que se ancla por la derecha:
   crezca lo que crezca el estilo, nunca se monta sobre el sticker. */
/* Sube y se acerca al sticker para que la cola salga de el */
.pi-cabeza { right: 14%; top: 31.5%; }
/* Anclada por la derecha, la caja se pega a su borde derecho */
.pi-cabeza { margin-left: auto; }
[data-pista="globo"] .pi-cabeza::after {
  left: auto; right: 18%;
  border-right: 0; border-left: 11px solid transparent;
}
[data-pista="calcomania"] .pi-cabeza { transform: rotate(3deg) scale(.9); }
[data-pista="calcomania"] .sticker:hover + .pi-cabeza,
[data-pista="calcomania"] .sticker:focus-visible + .pi-cabeza { transform: rotate(3deg) scale(1); }

/* Arranque: lo que se anima parte oculto. La clase .js la pone el guion,
   así que sin JavaScript se ve todo igual. */
.js .titular, .js .escenario .entra, .js .sticker { opacity: 0; }
.js .camino-linea { visibility: hidden; }

@media (prefers-reduced-motion: reduce) {
  .js .titular, .js .escenario .entra, .js .sticker { opacity: 1; }
  .js .camino-linea { visibility: visible; }
}

/* --- Marca de sección · el titular gigante recortado por el borde ------ */
/* Es el recurso de firma del manual: la palabra enorme cortada abajo. */
.marca-seccion {
  overflow: hidden;
  padding-top: var(--e8);
  user-select: none;
}
/* Cada palabra lleva su propio tamaño para llenar el ancho del contenido,
   como en las láminas del manual: el rótulo ocupa la caja, no un cuerpo fijo.
   Se declara con --cuerpo en cada uso. */
.marca-seccion .palabra {
  font-family: var(--serif);
  font-weight: 700;
  font-size: var(--cuerpo, clamp(96px, 21vw, 310px));
  line-height: .78;
  letter-spacing: -.035em;
  margin: 0;
  /* Recorta la palabra contra el borde. Es el recurso de firma del manual,
     así que la palabra TIENE que seguir tocando el borde: si deja de tocarlo
     pasa a ser un titular grande y se pierde el gesto. A -.19em se comía la
     mitad de la caja alta y costaba leerla; a -.12em asoma una línea de
     letra más y sigue cortada. */
  margin-bottom: -.12em;
  white-space: nowrap;
  color: var(--texto-principal);
}
.marca-seccion .apunte {
  max-width: 440px;
  margin: 0 0 var(--e7);
}

/* --- H2 · Evidencia ----------------------------------------------------- */
/* El hallazgo se dibuja, no solo se afirma: una línea de tiempo del proyecto
   con los primeros 30 minutos marcados en MORADA, que en el sistema es
   exactamente «donde entra la herramienta». La sección deja de ser una frase
   grande con tres números debajo.
   (Este comentario decía «naranja». Era el color con el que la herramienta se
   marcaba antes; desde que morada es la que marca la IA, la regla de abajo usa
   --purpura-pleno y el texto se quedó atrás.) */
.evidencia .par {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--e8); align-items: center;
}
.evidencia .cifra-madre { display: flex; align-items: baseline; gap: var(--e3); }
.evidencia .cifra-madre .dato { font-size: clamp(72px, 8vw, 128px); }

.linea-tiempo { padding-left: var(--e3); }
.lt-barra {
  position: relative;
  height: 56px; border-radius: var(--r-s);
  background: rgba(252, 250, 245, .10);
  display: flex; overflow: hidden;
}
.lt-tramo {
  width: 22%;
  background: var(--purpura-pleno);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--grot); font-size: 12px; font-weight: 600;
  color: var(--papel);
}
.lt-marca {
  position: absolute; left: 22%; top: -12px; height: 80px;
  width: 2px; background: var(--papel);
}
.lt-escala {
  display: flex; justify-content: space-between;
  margin-top: var(--e4);
  font-family: var(--grot); font-size: 12px;
  color: var(--texto-inverso-suave);
}
.lt-escala span:nth-child(2) { position: absolute; left: 22%; transform: translateX(-50%); }
.lt-pie { position: relative; }
.lt-nota { margin: var(--e5) 0 0; max-width: 620px; }

/* Fila de datos con reglas, sobre oscuro */
/* La fila de datos de la muestra se quito el 11-08: revelaba el origen
   academico del proyecto en la primera pantalla. Esa informacion vive
   ahora en la pagina «acerca de», adonde lleva el enlace de abajo. */

/* Enlace de texto sobre la franja oscura. Sin forma de boton: en todo el
   sitio la unica accion con forma de boton es «Empezar un plan», y esa
   exclusividad es lo que la hace inconfundible. */
.enlace-leer {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: var(--e9);
  font-family: var(--grot); font-size: 16px; font-weight: 500;
  color: var(--texto-inverso);
  text-decoration: none;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--borde-inverso);
  transition: border-color var(--dur-2) ease, gap var(--dur-2) ease;
}
.enlace-leer:hover { border-bottom-color: var(--papel); gap: 13px; }
.enlace-leer:focus-visible { outline-offset: 6px; }
/* Variante alineada al margen derecho, sin contenedor extra: el enlace sigue
   siendo inline-flex para que el subrayado mida el texto y no la columna. */
.enlace-leer-derecha { display: flex; width: fit-content; margin-left: auto; }

/* --- H3 · Reencuadre ---------------------------------------------------- */
/* Sin contorno, dos tarjetas de alto distinto se notan mas: estiran. */
.reencuadre .par { display: grid; grid-template-columns: 1fr 1fr; gap: var(--medianil); align-items: stretch; }
.tarjeta-hoy .titular-s { color: var(--texto-secundario); }

/* Los tres movimientos al pie de la tarjeta de la derecha. Las dos tarjetas
   miden lo mismo por `align-items: stretch`, y la derecha tenía dos piezas
   menos que la izquierda, así que todo el sobrante caía junto al final y se
   leía como algo sin terminar. `margin-top: auto` ancla el bloque abajo y el
   aire vuelve a repartirse. */
.reencuadre .par > article { display: flex; flex-direction: column; }
.movimientos {
  list-style: none;
  margin: auto 0 0; padding: var(--e6) 0 0;
  border-top: 1px solid var(--borde-sutil);
  display: grid; gap: var(--e4);
}
.movimientos li {
  display: flex; align-items: center; gap: var(--e3);
  font-family: var(--grot); font-size: 15px; font-weight: 500;
  color: var(--texto-principal);
}

/* --- H4 · Cómo funciona ------------------------------------------------- */
/* La vista previa tiene alto fijo para que los tres titulares
   caigan en la misma línea. */
.paso { display: flex; flex-direction: column; }
.paso .vista {
  background: var(--papel);
  border: 0;
  border-radius: var(--r-m);
  padding: var(--e4);
  height: 172px;
  overflow: hidden;
  display: flex; flex-direction: column; justify-content: center; gap: var(--e3);
}
.paso .num-paso {
  font-family: var(--grot); font-weight: 700;
  font-size: 40px; line-height: 1; letter-spacing: -.03em;
  color: var(--texto-principal);
  display: block; margin-bottom: var(--e5);
}
/* En la vista previa el resalte no cambia de color de golpe: es una sola
   pastilla que VIAJA de una opcion a la otra. Por eso los chips van sin
   relleno y con un aro: lo que se rellena es la pastilla que se mueve. */
.vista-chips { display: flex; flex-wrap: wrap; gap: 6px; position: relative; }
.vista-chips .chip {
  position: relative; z-index: 1;
  font-size: 11px; padding: 5px 10px;
  background: transparent;
  box-shadow: inset 0 0 0 1px rgba(38, 38, 38, .16);
  transition: color var(--dur-3) ease;
}
.vista-chips .chip.chip-activo {
  background: transparent; box-shadow: none;
  color: var(--papel);
}
.chip-foco {
  position: absolute; z-index: 0; top: 0; left: 0;
  border-radius: var(--r-boton);
  background: var(--carmin-pleno);
  pointer-events: none;
}
.vista-linea { height: 9px; border-radius: 5px; background: rgba(38,38,38,.10); }

/* --- H5 · Anatomía del plan ---------------------------------------------
   Una sola pieza: el documento con sus anotaciones al margen, como las
   laminas del manual. Antes eran dos, y la lista de la derecha describia
   lo que la hoja ya enseñaba. */
.plan-anotado .cuerpo { padding: var(--e7) var(--e7) var(--e6); }

.plan-cab {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--e6); flex-wrap: wrap;
  padding-bottom: var(--e6);
}
.plan-cab .nombre-proyecto {
  font-family: var(--serif); font-weight: 700; font-size: 26px;
  margin: 6px 0 0;
}
.plan-sellos { display: flex; gap: 6px; }

.fila-anotada {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: var(--e8);
  padding-block: var(--e7);
}
.fila-anotada:last-child { padding-bottom: var(--e4); }
.fila-anotada aside h3 {
  font-family: var(--serif); font-weight: 700; font-size: 19px;
  margin: 0 0 4px;
}
.fila-anotada aside h3 ~ h3 { margin-top: var(--e5); }
.fila-anotada aside .parrafo-s { margin: 0; }

.cita-intencion {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(20px, 1.9vw, 27px); line-height: 1.4;
  margin: 0; max-width: 24em;
}

/* La nota que cuelga de una etapa: dice que trae o que no trae */
.etapa-nota {
  margin: 4px 0 var(--e3) 41px;
  font-family: var(--grot); font-size: 13px;
  color: var(--texto-secundario);
}

/* El pie del plan: las dos vias de entrega, cada una con su condicion.
   Se lee como el pie de un documento, no como etiquetas sueltas. */
.plan-entrega { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e5) var(--e7); }
.plan-entrega .via { display: flex; align-items: flex-start; gap: var(--e4); }
.plan-entrega .via > .ms {
  flex: 0 0 34px; width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9px;
  background: var(--papel);
  color: var(--texto-principal);
  font-size: 18px;
}
.plan-entrega .via-rot {
  font-family: var(--grot); font-size: 16px; font-weight: 500;
  margin: 5px 0 2px;
}
.plan-entrega .via-rot b { font-weight: 600; }
.plan-entrega .via-cond {
  font-family: var(--grot); font-size: 13px;
  color: var(--texto-secundario); margin: 0;
}

.leyenda-color {
  display: flex; flex-wrap: wrap; gap: var(--e2) var(--e5);
  margin-top: var(--e5);
}
.leyenda-color span { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--texto-secundario); }
.leyenda-color i { width: 10px; height: 10px; border-radius: 3px; }

/* --- H5 · VERSIÓN B · TEMPORAL · la lámina con llamadas numeradas -------- */
/* Cuando Dana decida, se borra esta sección o la de arriba, y estas reglas
   con ella. Todo va prefijado con .plan-lamina o .llamada para no tocar
   nada de la versión que ya existe. */

/* El número de referencia. Es lo mismo que la numeración al margen de una
   lámina del manual: un círculo pequeño, en grafito, que no compite con
   ningún color de paleta porque no significa una fase. */
.llamada {
  flex: 0 0 22px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--grafito); color: var(--papel);
  font-family: var(--grot); font-size: 12px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center;
  line-height: 1;
}

.plan-lamina .cuerpo { padding: var(--e7) var(--e7) var(--e6); }

/* El bloque cuelga de su número: el número vive en el margen izquierdo de la
   hoja y el contenido corre a su derecha, sin que el número robe ancho al
   contenido. Por eso posición absoluta y no una columna de rejilla. */
.lamina-bloque {
  position: relative;
  padding-left: var(--e7);
  padding-block: var(--e6);
  border-top: 1px solid var(--borde-sutil);
}
.lamina-bloque > .llamada {
  position: absolute; left: 0; top: var(--e6);
}
/* Las notas de etapa llevan su propio número, en línea con el texto. */
.lamina-bloque .etapa-nota { display: flex; align-items: center; gap: var(--e3); }
.lamina-bloque .etapa-nota .llamada { flex: 0 0 20px; width: 20px; height: 20px; font-size: 11px; }

/* La clave, al pie y fuera de la hoja: la hoja enseña, la clave explica. */
.clave-lamina {
  list-style: none; margin: var(--e7) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--e6) var(--e5);
}
.clave-lamina li { display: flex; gap: var(--e3); align-items: flex-start; }
.clave-lamina h3 {
  font-family: var(--serif); font-weight: 700; font-size: 17px;
  margin: 0 0 4px; line-height: 1.25;
}
.clave-lamina .parrafo-s { margin: 0; }

/* --- H6 · La biblioteca ------------------------------------------------- */
.bloque-biblioteca .cuerpo { display: flex; flex-direction: column; height: 100%; }
.bloque-biblioteca .ver {
  margin-top: auto; padding-top: var(--e5);
  font-family: var(--grot); font-weight: 600; font-size: 15px;
  text-decoration: none; display: inline-flex; align-items: center; gap: 6px;
}
.mini-lista {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: var(--e5) 0 var(--e5);
  padding: var(--e4);
  background: var(--papel);
  border-radius: var(--r-m);
}
/* El chip vive en el bloque 05 · COMPONENTES. Aqui solo se ajusta su
   tamano dentro de la mini lista, que si es una variacion de esta seccion. */
.mini-lista p { margin: 0; width: 100%; }
.mini-lista p + p { margin-top: 6px; }
.mini-lista .chip { font-size: 12px; padding: 5px 11px; }

/* --- H7 · Tabla comparativa -------------------------------------------- */
.tabla-envoltura { overflow-x: auto; }
.tabla {
  width: 100%; border-collapse: separate; border-spacing: 0;
  font-family: var(--grot); font-size: 15px;
  min-width: 900px;
}
.tabla th, .tabla td { padding: 18px var(--e5); text-align: left; }
.tabla tbody th { width: 38%; }
.tabla thead th:not(:first-child), .tabla tbody td { width: 15.5%; white-space: nowrap; }
.tabla thead th {
  font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--texto-secundario);
  border-bottom: 1px solid var(--borde-sutil);
}
.tabla tbody td { border-bottom: 1px solid var(--borde-sutil); color: var(--texto-secundario); }
.tabla tbody th {
  font-weight: 500; color: var(--texto-principal);
  border-bottom: 1px solid var(--borde-sutil);
}
/* La columna de Noema es el argumento de la sección: tiene que verse. */
.tabla .col-noema {
  background: var(--fondo-superficie);
  color: var(--texto-principal);
  font-weight: 600;
}
.tabla thead .col-noema {
  color: var(--texto-principal);
  border-top: 5px solid var(--carmin-pleno);
  border-radius: var(--r-m) var(--r-m) 0 0;
  font-size: 13px; letter-spacing: .10em;
}
.tabla tbody tr:last-child .col-noema { border-radius: 0 0 var(--r-m) var(--r-m); }
.tabla th, .tabla td { vertical-align: middle; }
.tabla .col-noema .marca-si { display: inline-flex; vertical-align: -3px; margin-right: 8px; }
.tabla-resumen-movil { display: none; }

/* --- H7 · En que se diferencia --------------------------------------
   Tercera version. Cada categoria se nombra UNA vez con su limite, y el
   bloque de Noema recoge las seis. Tres apagadas y una encendida. */
.contraste {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--medianil);
  margin-top: var(--e8);
}
.contraste article {
  background: rgba(38, 38, 38, .045);
  border-radius: var(--r-l);
  padding: var(--e6);
}
/* El ícono es lo único sólido de la tarjeta y por eso puede con el fondo
   tenue. Mismo tamaño que en el resto del sitio: no se agranda aquí. */
.contraste .icono { margin-bottom: var(--e5); }
/* El h3 pasa a .titular-s en el HTML. Aquí solo queda su margen: una
   categoría en 12 px versalitas se leía como etiqueta de formulario. */
.contraste h3 { margin: 0 0 var(--e4); }
/* El párrafo vuelve al texto principal. La atenuación de estas tres tarjetas
   la hace el fondo, no el cuerpo de texto: apagar las dos cosas a la vez es
   lo que las sacaba del sistema. */
.contraste p {
  margin: 0;
  font-size: 17px; line-height: 1.55;
  color: var(--texto-principal);
}

.contraste-noema {
  display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
  gap: var(--e8);
  margin-top: var(--medianil);
  padding: var(--e7) var(--e6);
  background: var(--fondo-superficie);
  border-radius: var(--r-l);
  border-top: 5px solid var(--carmin-pleno);
}
.contraste-noema .marca-min {
  display: block;
  font-family: var(--logotipo); font-weight: 700;
  font-size: 26px; text-transform: uppercase; letter-spacing: -.005em;
  margin-bottom: 6px;
}
.seis {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--e4) var(--e7);
}
.seis li {
  display: flex; align-items: flex-start; gap: var(--e3);
  font-family: var(--grot); font-size: 17px; line-height: 1.4;
}
/* En una linea de grotesca, la cursiva de la serif abre huecos a los lados.
   El enfasis va con la cursiva de la propia grotesca. */
.seis li em { font-style: italic; font-weight: 600; }

/* --- H7 · el bloque de Noema -------------------------------------------- */
/* Aquí vivieron dos variaciones temporales para comparar. Resuelto el
   20-08-2026: no competían, cada una resolvía un eje distinto, así que se
   quedan las dos combinadas. El panel invertido resuelve el contraste con
   las tres tarjetas de papel; la glosa resuelve que seis palomas sueltas
   son seis afirmaciones sin prueba. Detalle en el comentario de index.html. */

/* Panel invertido. El contraste con las tres tarjetas de arriba deja de ser
   un filete de 5 px y pasa a ser el bloque entero. */
.contraste-noema-inverso {
  background: var(--fondo-inverso);
  color: var(--texto-inverso);
  border-top: 0;
}
.contraste-noema-inverso .micro { color: var(--texto-inverso-suave); }
/* La paloma sube a Verde claro: sobre grafito, el Profundo desaparece.
   Sigue siendo verde porque en el sistema el verde es lo que avanza. */
.contraste-noema-inverso .marca-si { color: var(--verde-claro); }

/* La glosa: cada punto con su frase. El lead en semibold y la frase debajo,
   en una sola columna de texto para que el ojo no salte.
   Los colores de aquí son los de papel, porque .seis-glosada tiene que poder
   usarse fuera del panel invertido. La reasignación para grafito va abajo. */
.seis-glosada { gap: var(--e5) var(--e7); }
.seis-glosada li { align-items: flex-start; }
.seis-glosada li > span:last-child { display: block; }
.seis-glosada b {
  display: block;
  font-weight: 600;
  margin-bottom: 4px;
  color: var(--texto-principal);
}
.seis-glosada li {
  font-size: 15px; line-height: 1.5;
  color: var(--texto-secundario);
}
.seis-glosada .marca-si { margin-top: 1px; }

/* Glosa SOBRE GRAFITO. Sin esto el lead queda grafito sobre grafito, es
   decir invisible, y la frase pierde el contraste que la hace legible a
   15 px. Medido sobre #262626: el lead en papel da 14,5:1 y la frase en
   Suave da 8,2:1, las dos por encima del 4,5:1 que exige texto normal. */
.contraste-noema-inverso .seis-glosada b  { color: var(--texto-inverso); }
.contraste-noema-inverso .seis-glosada li { color: var(--texto-inverso-suave); }

/* --- H8 · Para quién es ------------------------------------------------- */
.para-quien .par { display: grid; grid-template-columns: 1fr 1fr; gap: var(--medianil); }

/* --- H9 · Transparencia ------------------------------------------------- */
.capas { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--medianil); position: relative; }
.capa .sello {
  display: inline-flex; align-items: center; gap: var(--e2);
  font-family: var(--grot); font-size: 11px; font-weight: 600;
  letter-spacing: .10em; text-transform: uppercase;
  margin-bottom: var(--e4);
}
.capa .sello i { width: 14px; height: 14px; border-radius: 50%; }

/* --- H10 · De dónde salió ----------------------------------------------- */
.origen .disposicion { display: grid; grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr); gap: var(--medianil); align-items: start; }
.enlace-texto {
  font-family: var(--grot); font-weight: 600;
  color: var(--azul-profundo); text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px;
}
.enlace-texto:hover { text-decoration: underline; }

/* --- H11 · Preguntas frecuentes ----------------------------------------- */
/* El único acordeón del sitio. Se justifica porque aquí se busca una
   respuesta puntual, no se lee de corrido. */
.faq { columns: 2; column-gap: var(--medianil); }
.faq details {
  break-inside: avoid;
  background: var(--fondo-superficie);
  border: 0;
  border-radius: var(--r-l);
  margin-bottom: var(--medianil);
  overflow: hidden;
}
.faq summary {
  list-style: none; cursor: pointer;
  padding: var(--e5) var(--e6);
  display: flex; align-items: center; justify-content: space-between; gap: var(--e4);
  font-family: var(--grot); font-size: 17px; font-weight: 500;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .signo {
  flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%;
  background: var(--papel);
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform var(--dur-1) ease, background-color var(--dur-1) ease;
}
.faq summary .signo .ms { font-size: 18px; }
.faq details[open] summary .signo { transform: rotate(45deg); background: var(--papel); }
.faq details p { margin: 0; padding: 0 var(--e6) var(--e6); }

/* --- H12 · Cierre ------------------------------------------------------- */
.cierre h2 { max-width: 1000px; }
.cierre .boletin {
  margin-top: var(--e8); padding-top: var(--e7);
  border-top: 1px solid var(--borde-inverso);
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--e8); align-items: end;
}
.campo {
  display: flex; gap: var(--e2);
  background: var(--superficie-inversa);
  border: 1px solid var(--borde-inverso);
  border-radius: var(--r-boton);
  padding: 6px 6px 6px var(--e5);
}
.campo input {
  flex: 1; background: transparent; border: 0; color: var(--texto-inverso);
  font-family: var(--grot); font-size: 16px; min-width: 0;
}
.campo input::placeholder { color: var(--texto-inverso-tenue); }
.campo input:focus { outline: none; }
.campo:focus-within { border-color: var(--carmin-pleno); }

/* --- H13 · Pie ---------------------------------------------------------- */
/* El contenido cabe dentro de la retícula de 1312: antes se salía del lienzo. */
.pie { padding-block: var(--e9) var(--e7); }
.pie-columnas {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr));
  gap: var(--e8);
}
.pie h2 {
  font-family: var(--logotipo); font-weight: 700;
  font-size: 26px; letter-spacing: -.005em; text-transform: uppercase;
  margin: 0 0 var(--e4);
}
.pie h3 {
  font-family: var(--grot); font-size: 12px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--azul-claro); margin: 0 0 var(--e4);
}
.pie ul { list-style: none; margin: 0; padding: 0; }
.pie li + li { margin-top: var(--e3); }
.pie a { color: var(--texto-inverso); text-decoration: none; font-size: 15px; }
.pie a:hover { text-decoration: underline; }
.pie-legal {
  margin-top: var(--e8); padding-top: var(--e5);
  border-top: 1px solid var(--borde-inverso);
  display: flex; justify-content: space-between; gap: var(--e5); flex-wrap: wrap;
}
.pie-legal p { margin: 0; color: var(--texto-inverso-suave); font-size: 12px; max-width: 640px; }


/* --- Entrada por desplazamiento ----------------------------------------
   Solo una vez, solo hacia arriba, sin bucle. La clase la pone el guion,
   asi que sin JavaScript no se oculta nada. */
/* Arranque: las tarjetas y el contenido de sus vistas previas parten
   ocultos. La clase .js la pone el guion, asi que sin JavaScript se ve
   todo igual. */
.js [data-entra] > *,
.js [data-entra] .vista > * { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .js [data-entra] > *,
  .js [data-entra] .vista > * { opacity: 1; }
}


/* 07b · LO QUE TRAJO EL REPLANTEO DEL INICIO · 04-09-2026 =================
   La página pasó de catorce franjas a ocho. Ninguna sección se borró: seis
   se fundieron de dos en dos. Lo de aquí abajo es lo que hizo falta para
   esas fusiones, y nada más. Ninguna regla de las de arriba se tocó.

   El razonamiento completo, con lo que se midió y las referencias que lo
   sostienen, está en
   `Master Folder/02_Diseno/18_Replanteo_de_la_estructura_del_inicio.md`.
   ========================================================================= */

/* --- 00b · Sumario ------------------------------------------------------
   La fila numerada bajo el héroe. Declara el recorrido antes de empezarlo,
   que es el trabajo que antes hacían los dos rótulos de motor y lo hacían
   a mitad de página. Referencia: Causal, vía Mobbin.

   VA EN GRIS Y EN CUERPO PEQUEÑO A PROPÓSITO. Orienta, no compite: si pesa
   más que el titular o que la única acción, se convierte en un segundo menú
   a cuatro centímetros del primero. */
.sumario { padding-top: var(--e6); }
.sumario .contenido {
  display: flex; align-items: baseline; gap: var(--e5) var(--e7);
  flex-wrap: wrap;
  border-top: 1px solid var(--borde-sutil);
  padding-top: var(--e5);
}
.sumario-rot { margin: 0; flex: 0 0 auto; color: var(--texto-secundario); }
.sumario-lista {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--e3) var(--e6);
}
.sumario-lista a {
  display: inline-flex; align-items: baseline; gap: 8px;
  font-family: var(--grot); font-size: 15px; font-weight: 500;
  color: var(--texto-secundario); text-decoration: none;
  padding-bottom: 2px; border-bottom: 1px solid transparent;
}
.sumario-lista a:hover {
  color: var(--texto-principal); border-bottom-color: var(--borde-fuerte);
}
.sumario-lista .n {
  font-size: 12px; font-variant-numeric: tabular-nums;
  color: var(--azul-profundo);
}

/* --- 01 · La tira del método -------------------------------------------
   El método deja de ser dos tarjetas y pasa a ser el pie del hallazgo, que
   es como se lee el método en una lámina de investigación: primero la
   figura, después de qué está hecha. Seis unidades pasan a ser una.

   Va sobre la franja oscura, así que el texto usa los tonos inversos y el
   filete usa el borde inverso. */
.metodo-tira {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--e8);
  align-items: start;
  margin-top: var(--e9);
  padding-top: var(--e7);
  border-top: 1px solid var(--borde-inverso);
}
/* El enlace de leer nace con 96 px de aire encima, que es lo que necesita
   cuando cierra una franja entera. Aquí cierra una columna. */
.metodo-tira .enlace-leer { margin-top: var(--e6); }
.metodo-lista {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--e5) var(--e6);
}
.metodo-lista li {
  position: relative; padding-left: var(--e5);
  font-family: var(--grot); font-size: 15px; line-height: 1.5;
  color: var(--texto-inverso-suave);
}
.metodo-lista li::before {
  content: ""; position: absolute; left: 0; top: .5em;
  width: 8px; height: 8px; border-radius: var(--r-s);
  background: var(--verde-pleno);
}

/* --- 03 · Las dos puertas ----------------------------------------------
   Sustituyen a los dos rótulos gigantes, que eran dos franjas completas.
   EL RECURSO DE FIRMA NO SE PIERDE: la palabra enorme del manual sigue
   estando, ahora a la medida de la caja de cada puerta.

   A esta medida la palabra CABE en la caja y no la corta el borde, que es
   distinto de la marca de sección: allí el recorte es el gesto, aquí sería
   un accidente en una tarjeta de 640 px. El overflow oculto está por si un
   ancho intermedio la deja rozando el borde. Sigue en nowrap: partida en dos
   líneas deja de ser una palabra rótulo y pasa a ser un titular.

   Referencias: Maze y Deel, vía Mobbin. */
.puertas .par {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--medianil); align-items: stretch;
}
.puerta { display: flex; flex-direction: column; overflow: hidden; }
.puerta > .parrafo { max-width: 40ch; }
.puerta .palabra {
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(38px, 5.4vw, 78px);
  line-height: .88; letter-spacing: -.035em;
  white-space: nowrap;
  margin: var(--e7) 0 var(--e6);
  color: var(--texto-principal);
}
/* Las dos acciones terminan a la misma altura aunque el texto de arriba
   mida distinto. */
.puerta > :last-child { margin-top: auto; align-self: flex-start; }

/* --- 04 · Las pestañas del plan ----------------------------------------
   Funden «cómo funciona» con la lámina, que eran las dos secciones más
   altas de la página y la segunda repetía la primera.

   EL CONTROL NO ES NUEVO: es el mismo que el filtro de Fundamentos, de
   Herramientas y de Actualizaciones, con su azul lleno para la opción
   activa. Inventar aquí un botón distinto habría metido un cuarto control
   en un sitio que ya tiene tres iguales.

   Referencias de estructura: Framer y Dropbox Brand Guidelines, vía Mobbin. */
.pestanas-plan {
  display: flex; gap: var(--e2); flex-wrap: wrap;
  margin-bottom: var(--e6);
}
.pestanas-plan button {
  font-family: var(--grot); font-size: 15px; font-weight: 500;
  display: inline-flex; align-items: baseline; gap: 8px;
  padding: 11px 18px;
  border-radius: var(--r-boton);
  border: 1px solid var(--borde-sutil);
  background: var(--fondo-superficie);
  color: var(--texto-secundario);
  cursor: pointer;
}
.pestanas-plan button:hover {
  border-color: var(--borde-fuerte); color: var(--texto-principal);
}
.pestanas-plan button .n { font-size: 12px; font-variant-numeric: tabular-nums; opacity: .7; }
/* Azul lleno con papel encima: 8,1:1. Es el mismo par que usa la barra. */
.pestanas-plan button[aria-selected="true"] {
  background: var(--azul-pleno); border-color: var(--azul-pleno); color: var(--papel);
}
.pestanas-plan button[aria-selected="true"] .n { opacity: .85; }

.panel-plan:focus-visible { outline-offset: 6px; }
/* EL PANEL ES UNA TARJETA, no la vista suelta al lado del texto. La vista
   previa tiene fondo papel, el mismo del sitio: fuera de una superficie se
   queda sin caja y los chips flotan sobre la página. */
.panel-par {
  display: grid; grid-template-columns: minmax(0, 520px) minmax(0, 1fr);
  gap: var(--e7); align-items: center;
  padding: var(--e7);
}
/* La vista previa mide 172 px de alto y no crece: estirada a media página
   deja de parecer una interfaz y pasa a parecer una banda de color. */
.panel-par .paso { max-width: 520px; }
.panel-par > div:last-child > .parrafo { max-width: 46ch; }

/* --- 05 · Y así se mantiene --------------------------------------------
   Las tres capas editoriales, ahora pegadas a lo que garantizan. Estaban a
   dos secciones de distancia de la biblioteca, con dos bloques ajenos en
   medio, y repetían literal una frase de la carpeta de Actualizaciones. */
.mantiene {
  margin-top: var(--e9);
  padding-top: var(--e7);
  border-top: 1px solid var(--borde-sutil);
}
.mantiene > .titular-s { margin: 0 0 var(--e5); }

/* --- 06 · Lo que Noema no es -------------------------------------------
   Cada tarjeta de categoría dice ahora dos cosas: qué es esa categoría y a
   quién le sirve más que esto. La segunda frase venía de «no es para ti
   si…», que era una sección aparte diciendo lo mismo desde el otro lado.
   El filete es lo que separa las dos voces dentro de la misma tarjeta. */
.no-es .si-buscas {
  margin-top: var(--e5);
  padding-top: var(--e4);
  border-top: 1px solid var(--borde-sutil);
  font-size: 15px; line-height: 1.5;
  color: var(--texto-secundario);
}
/* La cuarta línea de la antigua lista, la de dejar de usar IA, no tiene
   categoría a la que pertenecer y va suelta. */
.no-es .suelta { margin: var(--e6) 0 0; color: var(--texto-secundario); }

/* Lo que queda del acordeón: tres preguntas de ocho. Las otras cinco ya
   estaban contestadas más arriba en la misma página. Con tres, una columna
   por pregunta y se leen todas de un vistazo. */
.faq-corto {
  margin-top: var(--e9);
  padding-top: var(--e7);
  border-top: 1px solid var(--borde-sutil);
}
.faq-corto > .titular-s { margin: 0 0 var(--e5); }
.faq-corto .faq { columns: 3; }

/* Cortes propios de estos bloques. Los generales siguen abajo, y a las tres
   capas ya las apila la regla de `.capas` que hay allí. */
@media (max-width: 1023px) {
  .metodo-tira { grid-template-columns: 1fr; gap: var(--e6); }
  .panel-par { grid-template-columns: 1fr; gap: var(--e6); }
  .panel-par .paso { max-width: none; }
  .faq-corto .faq { columns: 2; }
}

@media (max-width: 767px) {
  .sumario .contenido { gap: var(--e4); }
  .sumario-lista { gap: var(--e3) var(--e5); }
  .puertas .par { grid-template-columns: 1fr; }
  .metodo-lista { grid-template-columns: 1fr; gap: var(--e4); }
  .faq-corto .faq { columns: 1; }
  /* Tres pestañas en 342 px caben en tres líneas y se leen como una lista.
     Ocupando el ancho entero cada una, se leen como lo que son. */
  .pestanas-plan { flex-direction: column; align-items: stretch; }
  .pestanas-plan button { justify-content: flex-start; }
}


/* 08 · PUNTOS DE CORTE =================================================== */

/* Portátil · 1200 */
@media (max-width: 1279px) {
  :root { --margen: 48px; }
  .nav-enlaces { gap: var(--e3); padding: 6px 10px; }
}

/* Los cinco enlaces con su etiqueta necesitan 994 px. Por debajo de eso
   pasan al menú, aunque el resto de la maquetación siga en tres columnas. */
@media (max-width: 1119px) {
  .nav-enlaces { display: none; }
  .nav-menu-boton { display: inline-flex; }
  .nav-derecha { display: flex; align-items: center; gap: var(--e3); }

  /* El panel abierto es una hoja bajo la barra, no una pantalla completa:
     salir tiene que seguir siendo barato. Comparte la caja flotante. */
  .hoja-menu {
    display: block;
    max-width: calc(var(--contenido) + 80px);
    margin: 8px auto 0;
    background: var(--blanco);
    border-radius: 20px;
    box-shadow: var(--elev-flotante);
    max-height: 0; overflow: hidden;
    transition: max-height var(--dur-2) ease;
  }
  .hoja-menu[data-abierta="si"] { max-height: 620px; }
  .hoja-menu .interior { padding: var(--e5) 40px var(--e6); }
  .hoja-menu .enlace { margin-bottom: var(--e3); }
  .hoja-menu .sub { padding-left: 38px; }
  .hoja-menu .sub a {
    display: block; padding: 10px 0; text-decoration: none;
    color: var(--texto-principal); font-size: 15px;
  }
}

/* Por debajo de 900 px el escenario deja de ser un cuadro y se apila: el
   camino y los stickers se retiran, el mensaje se queda entero. */
@media (max-width: 759px) {
  .escenario {
    aspect-ratio: auto; container-type: normal;
    padding: var(--e8) var(--margen) var(--e9);
    display: flex; flex-direction: column; align-items: flex-start; gap: var(--e5);
  }
  .camino, .sticker, .pista { display: none; }
  .escenario > * { position: static !important; width: auto !important; }
  .titular { font-size: clamp(34px, 8.6vw, 66px); white-space: normal; }
  .t2 { margin-top: calc(var(--e4) * -1); }
  .escenario .parrafo { font-size: 17px; max-width: 46ch; }
  .escenario .cta { min-height: 52px; padding-inline: var(--e6); font-size: 16px; }
  .escenario .eyebrow { font-size: 12px; order: -1; }
}

/* Tableta · 834 */
@media (max-width: 1023px) {
  :root { --margen: 40px; --e10: 96px; --e9: 72px; }

  .evidencia .par { grid-template-columns: 1fr; gap: var(--e7); }

  .origen .disposicion { grid-template-columns: 1fr; }
  .fila-anotada { grid-template-columns: 1fr; gap: var(--e5); }
  .plan-entrega { grid-template-columns: 1fr; }
  .plan-anotado .cuerpo { padding: var(--e5); }
  .rejilla-3, .capas { grid-template-columns: 1fr; }
  .contraste { grid-template-columns: 1fr; }
  .contraste-noema { grid-template-columns: 1fr; gap: var(--e5); }
  .seis { grid-template-columns: 1fr; }
  /* Cinco columnas de clave no caben por debajo de 1024 */
  .clave-lamina { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plan-lamina .cuerpo { padding: var(--e5); }
  .lamina-bloque { padding-left: var(--e6); }
  .evidencia .cifras { grid-template-columns: 1fr 1fr; gap: var(--e6); }
  .pie-columnas { grid-template-columns: 1fr 1fr; gap: var(--e7); }
  .cierre .boletin { grid-template-columns: 1fr; gap: var(--e5); }

  /* En móvil la tabla no se traslada: cinco columnas en 390 px son
     ilegibles. Se sustituye por la lista de lo que sí hace Noema. */
  .tabla-envoltura { display: none; }
  .tabla-resumen-movil { display: block; }
}

/* Móvil · 390 */
@media (max-width: 767px) {
  :root { --margen: 24px; --e10: 80px; --e9: 64px; }

  .nav { padding: 12px 16px 0; }
  .nav-caja { padding-inline: 20px; }
  .hoja-menu .interior { padding: var(--e5) 20px var(--e6); }
  .nav-fila { height: 64px; }
  /* Con 342 px el botón con etiqueta dejaba la marca pegada. El circular
     respira y es el mismo recurso de las piezas de redes. */
  .nav-boton-texto { display: none; }
  .nav-boton { width: 50px; padding: 0; }

  .reencuadre .par,
  .para-quien .par,
  .rejilla-2 { grid-template-columns: 1fr; }
  .evidencia .cifras { grid-template-columns: 1fr; gap: var(--e5); }
  .faq { columns: 1; }
  .pie-columnas { grid-template-columns: 1fr; gap: var(--e6); }
  .campo { flex-wrap: wrap; border-radius: var(--r-l); padding: var(--e4); gap: var(--e3); }
  .campo input { width: 100%; flex: 1 0 100%; }
  .campo .boton { width: 100%; }
  .superficie { padding: var(--e5); }
  .marca-seccion .palabra { font-size: clamp(64px, 26vw, 140px); }
  .clave-lamina { grid-template-columns: 1fr; gap: var(--e5); }
  /* En 390 el número no cabe al margen sin comerse el texto: se sube. */
  .lamina-bloque { padding-left: 0; padding-top: var(--e7); }
  .lamina-bloque > .llamada { top: var(--e5); }
}

/* Zona de toque mínima de 44 × 44 px en cualquier corte táctil */
@media (pointer: coarse) {
  .enlace, .menu a, .faq summary { min-height: 44px; }
}


/* 09 · IMPRESIÓN, BASE DEL SISTEMA =======================================
   Puesta el 18-08-2026. Ocho páginas tenían hoja de impresión propia y tres
   no tenían ninguna, así que al imprimirlas salía la barra, el pie y la
   trama del papel. Era una regla del sistema viviendo en las hojas de las
   páginas, el mismo error que tenía el estado de barra.

   Esto es solo la BASE: lo que vale para cualquier página del sitio. Cada
   hoja de página añade lo suyo después y gana en los conflictos, porque va
   más abajo en el orden de carga.

   La trama del papel se quita siempre. En pantalla es la textura de la
   marca; en papel es una cuadrícula gris que se come el tóner y compite con
   el texto. */
@media print {
  @page { margin: 18mm 16mm; }

  .nav, .hoja-menu, .salto, .pie, .menu { display: none !important; }
  .papel-reticulado { background-image: none !important; }
  body { background: none !important; font-size: 11pt; }

  /* Las franjas oscuras a sangre gastan un cartucho entero y dejan gris
     sobre gris en casi cualquier impresora doméstica. En papel se invierten
     y conservan la separación con un filete. */
  .inverso, .superficie.inverso {
    background: none !important;
    color: #000 !important;
    border: 1px solid #ccc;
  }
  .inverso .parrafo, .inverso .parrafo-m, .inverso .micro,
  .inverso .antetitulo { color: #000 !important; }

  .contenido { max-width: none; padding-inline: 0; }

  /* Nada que se lea junto se parte entre dos hojas. */
  .superficie, .carpeta, .bocadillo { break-inside: avoid; }
  h1, h2, h3 { break-after: avoid; }
}