/* base.css — la hoja unica del sitio.
 *
 * Los NOMBRES de los testigos y las reglas del armazon (cabecera, marca, idiomas, saltar,
 * contenido, pie, botones) son los mismos que en ai-act-test a proposito: son dos sitios de la
 * misma casa y comparten estructura. Lo que cambia es la paleta y el ritmo — alli papel calido y
 * serifa porque el lector es una pyme leyendo un informe; aqui blanco frio y una pagina de
 * CONVERSION porque el lector es un dev decidiendo si un boilerplate de seguridad merece su dinero.
 *
 * Tema claro por decision, con DOS superficies oscuras (--prueba-*): la tarjeta del banco de
 * ataques en el hero y la banda de cierre. No es un tema, son dos piezas. Se les mide el contraste
 * aparte porque una paleta oscura dentro de una pagina clara es exactamente lo que se cuela sin
 * revisar — tests/prueba_contraste.php lo vigila, y exige que cada clase que pinte fondo --prueba
 * este en la regla que aclara el anillo de foco. Por eso el banco pinta su fondo en UNA regla de
 * una clase simple y ningun descendiente suyo repite `background:var(--prueba)`.
 *
 * La monoespaciada es la letra del SISTEMA: payloads, codigos (LLM01, G01), numeros de seccion y
 * etiquetas en mayusculas con tracking. Manrope es la letra de la CONVERSACION: titulares, cuerpo,
 * navegacion, precios y botones. Un cromo entero en mono suena a terminal y se descarto; unas
 * etiquetas en mono son lo que le dice al lector que eso es un dato y no prosa.
 *
 * Cero tokens de color nuevos desde la Fase 20: cada par frente/fondo que se use tiene su entrada
 * en contenido/contraste.json, y una superficie o un texto nuevo se pintan con lo que ya hay.
 *
 * Las tipografias son propias (assets/css/tipos.css, generada por scripts/traer_tipografias.py);
 * nada se carga de fuera, que es tambien lo que permite la CSP estricta de lib/http.php. */

:root{
  /* superficies claras */
  --fondo:#ffffff;--sup:#f5f6f9;--sup2:#eaecf2;--raya:#d9dce4;--raya2:#edeff3;
  /* El borde de un campo IDENTIFICA el componente: WCAG 1.4.11 le pide 3:1, no lo que da --raya,
     que es una separacion decorativa y no tiene que cumplir nada. Tambien es el borde del boton
     secundario, por lo mismo. */
  --campo-raya:#868e9c;
  /* tinta. --tenue se eligio midiendolo sobre las TRES superficies claras en las que puede caer
     (blanco 5,44:1 · --sup 5,03:1 · --sup2 4,60:1). El valor que proponia el panel pasaba sobre
     blanco y se quedaba en 4,21:1 sobre --sup, que es justo el descuido que esta hoja ya cometio. */
  --tinta:#0d1017;--media:#454b59;--tenue:#636a78;
  /* accion. Mas saturado que el indigo anterior: es un color de ACCION, no de institucion. */
  --acento:#2f3ad9;--acento-fuerte:#1f288f;--acento-fondo:#eef0ff;--sobre-acento:#ffffff;
  --acento-claro:#8b93ff;  /* solo sobre superficie oscura */
  /* semanticos */
  --grave:#b3261e;--grave-fondo:#fdeeed;--grave-raya:#f0d2cd;--grave-tinta:#7d1c17;
  --grave-claro:#ff8a80;   /* solo sobre superficie oscura: el payload del banco */
  --conforme:#1f6b46;--conforme-fondo:#edf5f0;--conforme-raya:#cfe3d8;
  --conforme-claro:#4ade80; /* solo sobre superficie oscura: el sello del banco */
  /* El ambar aparece UNA vez en toda la pagina, en el estado parcial. Si sale dos veces, deja de
     significar «mira esto» y pasa a ser decoracion. */
  --destaque:#9e4907;--destaque-fondo:#fdf3e2;
  --destaque-claro:#f0b357; /* el mismo ambar sobre superficie oscura; hoy sin uso, con su par medido */
  /* superficie de prueba: el banco y el cierre */
  --prueba:#0e1220;--prueba-sup:#171c2e;--prueba-raya:#262d44;--prueba-texto:#d7dbe8;--prueba-tenue:#8a93ab;
  /* tipografia */
  --sans:"Manrope",-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --t-xs:0.875rem;--t-s:0.9375rem;--t-base:1.0625rem;--t-m:1.25rem;--t-ml:1.5rem;
  --t-l:clamp(1.75rem,1.2rem + 1.9vw,2.5rem);
  --t-xl:clamp(2.25rem,-1.6rem + 5.4vw,3.25rem);
  --t-cifra:2.75rem;
  /* espacio: base de 4px y ningun valor intermedio */
  --e1:4px;--e2:8px;--e3:12px;--e4:16px;--e6:24px;--e8:32px;--e12:48px;--e16:64px;--e24:96px;
  --margen:2rem;
  /* forma */
  --curva:12px;--curva-s:8px;--curva-l:16px;--curva-p:999px;
  /* --columna es la medida de lectura; --columna-ancha la de los bloques que llevan lista o
     titulo propio (equivale a los 68ch que tenian de respaldo). --ancho es el contenedor: 72rem
     porque el hero de dos columnas y la rejilla de tres tarjetas piden 1152px. */
  --ancho:72rem;--columna:40rem;--columna-ancha:36rem;
  /* Lo que la cabecera pegada tapa al saltar a un ancla, mas aire. Sin esto, las llamadas a #lista
     aterrizaban con el titular ENTERO debajo de la cabecera: se llegaba a un campo de texto sin el
     encabezado que dice de que va. Medido: cabecera 65px (el boton de 40 mas 12 de relleno por
     lado y el filete). */
  --anclaje:84px;
  /* Dos niveles de elevacion. La alta es SOLO para tres piezas: la tarjeta del banco, el plan
     destacado y el formulario; todo lo demas se separa con filete o con regla izquierda. */
  --sombra:0 1px 2px rgba(13,16,23,0.05),0 8px 24px -12px rgba(13,16,23,0.14);
  --sombra-alta:0 1px 2px rgba(13,16,23,0.06),0 24px 48px -24px rgba(13,16,23,0.35);
}
*{box-sizing:border-box;}
body{margin:0;background:var(--fondo);color:var(--tinta);font:var(--t-base)/1.6 var(--sans);}
a{color:var(--acento);text-decoration:none;}
a:hover{color:var(--acento-fuerte);text-decoration:underline;}
:focus-visible{outline:2px solid var(--acento);outline-offset:2px;}
/* El foco sobre superficie oscura: el anillo por defecto (--acento) cae ahi a 2,42:1, por debajo
   del 3:1 que 1.4.11 pide a un indicador. UNA regla agrupada, y la PRIMERA de la hoja con
   outline-color, porque la guarda de prueba_contraste lee esa y solo esa. Cualquier superficie
   --prueba que se annada va aqui, y su par a contraste.json. */
.banco :focus-visible,.cierre :focus-visible{outline-color:var(--acento-claro);}
code{font-family:var(--mono);font-size:0.85em;}
h1,h2,h3{letter-spacing:-0.015em;text-wrap:balance;}

/* ---------------------------------------------------------------- armazon */
/* La cabecera se queda pegada arriba: en una pagina de conversion la llamada tiene que estar
   siempre a un clic, y es lo que sustituye a repetir el formulario cuatro veces. */
.cabecera{position:sticky;top:0;z-index:20;border-bottom:1px solid var(--raya);background:var(--fondo);}
.cabecera-env,.pie-env,.sangrado-env{max-width:var(--ancho);margin:0 auto;padding-inline:var(--margen);}
.cabecera-env{display:flex;align-items:center;justify-content:space-between;gap:var(--e6);padding-block:var(--e3);}
/* La marca en tinta, no en acento: el acento es el color de la ACCION, y la marca no es una. */
.marca{display:inline-flex;align-items:center;gap:var(--e2);font:800 var(--t-s)/1 var(--sans);color:var(--tinta);letter-spacing:-0.01em;white-space:nowrap;}
.marca:hover{color:var(--tinta);text-decoration:none;}
.marca-icono{width:26px;height:26px;border-radius:var(--curva-s);background:var(--acento);color:var(--sobre-acento);display:inline-flex;align-items:center;justify-content:center;flex:none;}
.principal{margin-left:auto;display:flex;gap:var(--e6);font:600 var(--t-s)/1 var(--sans);}
.principal a{color:var(--media);padding-block:var(--e1);}
.principal a:hover{color:var(--acento);text-decoration:none;}
.idiomas{display:flex;gap:var(--e1);font:600 12px/1 var(--sans);}
.idiomas a{padding:var(--e1) var(--e2);border:1px solid var(--raya);border-radius:var(--curva-s);color:var(--media);}
.idiomas a[aria-current="true"]{background:var(--acento);border-color:var(--acento);color:var(--sobre-acento);}
.saltar{position:absolute;left:-999px;top:var(--e2);z-index:30;padding:var(--e3) var(--e4);background:var(--acento);color:var(--sobre-acento);border-radius:var(--curva-s);font:600 14px/1 var(--sans);}
.saltar:focus{left:var(--e2);outline:2px solid var(--sobre-acento);outline-offset:2px;}
/* El menu bajo 60rem, sin JavaScript: un <details> nativo. El summary es un boton de verdad para
   el teclado y el lector de pantalla, y en cada ancho solo hay UNA copia del nav en el arbol de
   accesibilidad (display:none saca la otra). Lo que no hace, y se asume: cerrarse solo al pulsar
   un ancla o con Escape, asi que al saltar a una seccion se queda abierto encima de ella. Por
   eso el panel es tan estrecho como sus enlaces y va pegado a la derecha: tapa el final de las
   lineas del titulo, nunca su numero ni su arranque, y un toque en «Site» lo cierra. El chevron
   se dibuja con bordes y no con un glifo: un glifo en ::after lo lee NVDA en voz alta. */
.menu{display:none;position:relative;}
.menu summary{list-style:none;display:inline-flex;align-items:center;gap:var(--e2);padding:var(--e2) 0;font:600 var(--t-s)/1 var(--sans);color:var(--media);cursor:pointer;}
.menu summary::-webkit-details-marker{display:none;}
.menu summary::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);}
.menu[open] summary::after{transform:translateY(2px) rotate(-135deg);}
.menu-panel{position:absolute;right:0;top:calc(100% + var(--e3));width:max-content;max-width:calc(100vw - 2 * var(--margen));padding:var(--e2) var(--e4);background:var(--fondo);border:1px solid var(--raya);border-radius:var(--curva);box-shadow:var(--sombra-alta);}
.menu-panel a{display:block;padding:var(--e3) 0;border-bottom:1px solid var(--raya2);font:600 var(--t-s)/1.2 var(--sans);color:var(--media);}
.menu-panel a:last-child{border-bottom:0;}
.menu-panel a:hover{color:var(--acento);text-decoration:none;}

/* El contenido es una rejilla de tres columnas para que una seccion pueda ocupar el ancho COMPLETO
   sin recurrir a 100vw: `vw` incluye la barra de scroll y produce un desbordamiento horizontal de
   unos pocos pixeles que solo se ve en Windows. La columna del medio es el ancho de lectura; una
   seccion con .sangrado se estira de borde a borde y recupera el margen con .sangrado-env. */
.contenido{display:grid;grid-template-columns:1fr min(var(--ancho),100% - var(--margen) * 2) 1fr;padding-block:var(--e12) var(--e16);}
.contenido > *{grid-column:2;}
.contenido > .sangrado{grid-column:1 / -1;}
/* La landing compone su propio ritmo vertical seccion a seccion, y numera sus secciones con un
   contador: el orden de lectura es informacion, y asi no hay que retocar la vista al reordenar. */
.contenido-landing{padding-block:0;counter-reset:seccion;}
.captacion,.seccion,.cierre,.aviso-error{scroll-margin-top:var(--anclaje);}
.pie{border-top:1px solid var(--raya);color:var(--tenue);font:400 var(--t-xs)/1.5 var(--sans);background:var(--sup);}
.pie-env{display:flex;justify-content:space-between;align-items:center;gap:var(--e4);flex-wrap:wrap;padding-block:var(--e6);}
.pie-legal{display:flex;gap:var(--e4);flex-wrap:wrap;}
.pie code{color:var(--tenue);}
.pie-autoria{flex-basis:100%;margin:0;color:var(--tenue);}

/* --------------------------------------------------------------- botones */
/* 48px de alto: es el tamano que se puede pulsar con el pulgar y el que se VE en el pliegue. El
   secundario lleva el borde del campo (3,3:1), no el filete decorativo: un boton que solo se
   identifica por su borde tiene que cumplir 1.4.11 como un campo. */
.boton,.boton-secundario{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:var(--e2) var(--e6);border-radius:var(--curva-s);font:700 var(--t-s)/1.2 var(--sans);cursor:pointer;border:1px solid var(--acento);text-align:center;transition:background-color 150ms,border-color 150ms,color 150ms;}
.boton{background:var(--acento);color:var(--sobre-acento);}
.boton:hover{background:var(--acento-fuerte);border-color:var(--acento-fuerte);color:var(--sobre-acento);text-decoration:none;}
.boton-secundario{background:transparent;border-color:var(--campo-raya);color:var(--tinta);}
.boton-secundario:hover{background:var(--sup);border-color:var(--tinta);color:var(--tinta);text-decoration:none;}
.boton-mini{min-height:40px;padding:var(--e1) var(--e4);}
/* La llamada repetida: botones ancla al UNICO formulario. No son varios formularios, y es una
   perdida asumida — dos widgets de captcha y dos `label for` duplicadas romperian la accesibilidad
   y el degradado sin JavaScript, que en esta pagina no son negociables. */
.llamada{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--e4);margin:var(--e16) 0 0;text-align:center;}
.llamada span{color:var(--media);font-size:var(--t-m);max-width:30em;}

/* --------------------------------------------------------------- portada */
/* Dos columnas: la promesa y las dos acciones a la izquierda, el banco de ataques a la derecha
   como la captura de producto que esta pagina no tiene. minmax(0,Nfr) y no Nfr a secas: `1fr` es
   `minmax(auto,1fr)` y un track no encoge por debajo de su contenido; el payload mas largo
   desbordaria la columna en vez de reflujar. Sin min-height en vh: el alto lo pone el contenido. */
.portada{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,6fr);gap:var(--e12);align-items:center;padding-block:var(--e8) var(--e12);}
.portada-sobre{display:inline-block;margin:0 0 var(--e4);padding:var(--e1) var(--e3);border-radius:var(--curva-p);background:var(--acento-fondo);color:var(--acento);font:600 var(--t-xs)/1.6 var(--mono);letter-spacing:0.02em;}
.portada-titulo{margin:0;font:800 var(--t-xl)/1.06 var(--sans);letter-spacing:-0.025em;}
.portada-texto{margin:var(--e4) 0 0;font-size:var(--t-m);line-height:1.5;color:var(--media);max-width:32em;}
.portada-acciones{display:flex;flex-wrap:wrap;gap:var(--e3);margin:var(--e6) 0 0;}
/* El precio en la primera pantalla, compuesto de lo que ya existe (nombres de plan, catalogo,
   «one-time») y con el matiz del IVA enlazado a la seccion que lo explica. */
.portada-precio{margin:var(--e6) 0 0;font:600 var(--t-s)/1.6 var(--sans);color:var(--tinta);}
.portada-precio b{font:800 var(--t-m)/1 var(--sans);letter-spacing:-0.02em;font-variant-numeric:tabular-nums;}
.portada-precio a{white-space:nowrap;}
.portada-banco{min-width:0;}
.portada-nota{margin:0 0 var(--e3);font:500 var(--t-s)/1.5 var(--sans);color:var(--tenue);}

/* ---- El banco de ensayo -------------------------------------------------------------------
   Los tres ataques como tarjeta oscura en el hero. Las pestanas son radios con :checked y CERO
   JavaScript: el sitio no sirve ni un script, el formulario funciona sin el, y unas pestanas no
   son motivo para estrenar esa dependencia en un kit de seguridad. El radio se oculta sin
   display:none ni visibility, que lo sacarian del orden de tabulacion: se mueve fuera de la vista
   pero sigue siendo enfocable y recorrible con las flechas.
   El fondo oscuro se pinta AQUI y solo aqui (ver la cabecera de la hoja): las cajas de dentro
   usan --prueba-sup o nada. */
.banco{position:relative;border:1px solid var(--prueba-raya);border-radius:var(--curva-l);background:var(--prueba);color:var(--prueba-texto);box-shadow:var(--sombra-alta);overflow:hidden;}
.banco-radio{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip-path:inset(50%);}
.banco-cabeza{display:flex;align-items:center;justify-content:space-between;gap:var(--e3);padding:var(--e3) var(--e4);background:var(--prueba-sup);border-bottom:1px solid var(--prueba-raya);}
.banco-suite{font:600 var(--t-xs)/1.4 var(--mono);letter-spacing:0.08em;text-transform:uppercase;color:var(--prueba-tenue);}
/* Tres columnas fijas, nunca tres filas: a 375px una pestana parte su etiqueta en dos lineas
   antes que caer debajo de las otras. La inactiva se identifica por su borde (--prueba-tenue,
   6:1), no solo por el relleno de la activa. */
.banco-pestanas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--e1);padding:var(--e3) var(--e4) 0;}
.banco-pestana{display:block;padding:var(--e2) var(--e1);border:1px solid var(--prueba-tenue);border-radius:var(--curva-s);font:500 var(--t-xs)/1.3 var(--mono);color:var(--prueba-texto);text-align:center;cursor:pointer;overflow-wrap:anywhere;hyphens:auto;transition:background-color 150ms,color 150ms;}
.banco-pestana:hover{color:var(--fondo);border-color:var(--prueba-texto);}
/* El panel activo en columna: lo que entra, el tope que lo para, lo que hace el guardarrail. El
   payload REFLUYE (pre-wrap) en vez de desplazarse: en una columna de 500px o en un movil un
   payload de 70 caracteres se lee entero o no se lee, y una caja que se desplaza necesitaba ser
   parada de teclado sin ser un control. Ya no lo es. */
.ensayo{display:none;gap:var(--e3);padding:var(--e4);}
.ensayo-panel{min-width:0;}
.ensayo-eti{margin:0 0 var(--e2);font:600 var(--t-xs)/1.4 var(--mono);letter-spacing:0.08em;text-transform:uppercase;color:var(--prueba-tenue);}
.ensayo-payload{margin:0;padding:var(--e3) var(--e4);border-left:2px solid var(--grave-claro);border-radius:var(--curva-s);background:var(--prueba-sup);color:var(--grave-claro);font:400 14px/1.55 var(--mono);white-space:pre-wrap;overflow-wrap:anywhere;}
.ensayo-nota{margin:var(--e3) 0 0;font-size:var(--t-s);line-height:1.55;color:var(--prueba-tenue);}
.ensayo-tope{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e2) var(--e3);padding:var(--e3) 0;border-block:1px solid var(--prueba-raya);}
.ensayo-guarda{font:700 var(--t-s)/1.35 var(--sans);color:var(--fondo);}
/* El sello mas grande que el payload: en la tarjeta el ojo tiene que leer la PARADA, no el ataque. */
.ensayo-sello{font:600 1rem/1.4 var(--mono);letter-spacing:0.08em;text-transform:uppercase;color:var(--conforme-claro);}
.ensayo-etapa{margin-left:auto;font:500 var(--t-xs)/1.4 var(--mono);color:var(--prueba-tenue);}
.ensayo-efecto{margin:0;padding:0 0 0 var(--e4);border-left:2px solid var(--conforme-claro);color:var(--prueba-texto);font-size:var(--t-s);line-height:1.6;}
/* Que pestana manda y que panel se ve. Se enumeran los tres a mano porque el selector necesita
   casar el id con su panel; el cuarto y el quinto ataque viven en /proof, y si alguna vez entran
   aqui piden su propia linea, en la vista y en esta hoja. La regla de foco delegada va con el
   atajo `outline:` a proposito: escrita con outline-color secuestraria la guarda de contraste,
   que solo lee la primera regla que lo declare. */
#ensayo-1:checked~.banco-pestanas .banco-pestana[for="ensayo-1"],#ensayo-2:checked~.banco-pestanas .banco-pestana[for="ensayo-2"],#ensayo-3:checked~.banco-pestanas .banco-pestana[for="ensayo-3"]{background:var(--acento-claro);border-color:var(--acento-claro);color:var(--prueba);font-weight:600;}
#ensayo-1:focus-visible~.banco-pestanas .banco-pestana[for="ensayo-1"],#ensayo-2:focus-visible~.banco-pestanas .banco-pestana[for="ensayo-2"],#ensayo-3:focus-visible~.banco-pestanas .banco-pestana[for="ensayo-3"]{outline:2px solid var(--acento-claro);outline-offset:2px;}
#ensayo-1:checked~.ensayo-1,#ensayo-2:checked~.ensayo-2,#ensayo-3:checked~.ensayo-3{display:grid;}

/* ---- La banda de evidencia ----------------------------------------------------------------
   Bajo el hero: el nombre de la tabla OWASP como sujeto, sus tres cifras con etiqueta y el
   enlace a la prueba. Cifras de COBERTURA, no de ataques parados: un «4/5» grande junto a un
   sello de STOPPED se lee como marcador, y eso es justo lo que esta pagina no puede dar a
   entender. Nada de lo que dice se repite en la seccion de debajo. */
.evidencia{background:var(--sup);border-block:1px solid var(--raya);}
.evidencia-env{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e4) var(--e8);padding-block:var(--e6);}
.evidencia-cifras{display:flex;flex-wrap:wrap;gap:var(--e6);margin:0;padding:0;list-style:none;}
.evidencia-cifra{display:flex;flex-direction:column;gap:var(--e1);font:600 var(--t-xs)/1.3 var(--sans);color:var(--media);letter-spacing:0.04em;text-transform:uppercase;}
.evidencia-cifra b{font:800 var(--t-cifra)/1 var(--sans);letter-spacing:-0.03em;color:var(--tinta);font-variant-numeric:tabular-nums;}
.evidencia-titulo{margin:0;font:600 var(--t-xs)/1.4 var(--mono);letter-spacing:0.08em;text-transform:uppercase;color:var(--tenue);max-width:12em;}
.evidencia-enlace{margin-left:auto;font:700 var(--t-m)/1.3 var(--sans);}

/* ---------------------------------------------------------------- bloques */
/* El ritmo: filete arriba, o banda a sangre en --sup, y aire simetrico. Las secciones de texto van
   en rejilla editorial —numero y titulo a la izquierda, pegados; el cuerpo a la derecha— para que
   el 40% derecho de la pantalla deje de estar vacio; las anchas (tabla, rejilla, precios) llevan
   la cabecera arriba. */
.seccion{padding-block:var(--e16);border-top:1px solid var(--raya);}
.sangrado + .seccion,.seccion.sangrado{border-top:0;}
.banda{background:var(--sup);}
.seccion-env{display:grid;grid-template-columns:minmax(0,17rem) minmax(0,1fr);gap:var(--e8) var(--e12);}
.seccion-ancha .seccion-env{grid-template-columns:minmax(0,1fr);gap:var(--e8);}
/* align-self:start o el sticky no tiene recorrido: un item de rejilla se estira a la fila. */
.seccion-cab{position:sticky;top:var(--anclaje);align-self:start;}
.seccion-ancha .seccion-cab{position:static;}
.seccion-cuerpo{min-width:0;}
.seccion-titulo{margin:0 0 var(--e3);font:800 var(--t-l)/1.12 var(--sans);letter-spacing:-0.02em;}
/* El numero de seccion: contador CSS, sin marcado. La segunda declaracion de content lleva texto
   alternativo vacio para que el lector de pantalla no lo verbalice; la primera es el respaldo
   para navegadores sin esa sintaxis. */
.seccion-titulo::before{display:block;margin:0 0 var(--e3);font:600 var(--t-xs)/1 var(--mono);letter-spacing:0.08em;color:var(--acento);counter-increment:seccion;content:counter(seccion,decimal-leading-zero);content:counter(seccion,decimal-leading-zero) / "";}
.seccion-entrada{margin:0;color:var(--media);font-size:var(--t-base);line-height:1.55;max-width:var(--columna);}
/* Los bloques de texto con titulo propio: regla izquierda, sin fondo ni radio. La tarjeta
   (radio grande y sombra alta) se reserva a tres piezas, y asi una pagina con muchos bloques no
   parece una plantilla. */
.antes,.dan,.licencia,.aiact,.comparativa-col,.quien{padding:0 0 0 var(--e4);border-left:2px solid var(--tinta);max-width:var(--columna-ancha);}
.aiact{border-left-color:var(--acento);}

/* ---- Estado: que se ha ejecutado y que no ---------------------------------------------------
   Lo que NO se ha medido va con el mismo tamano y en el mismo bloque que lo que si. Bajarlo a
   letra pequena seria convertir en descargo lo que aqui es el argumento: es la seccion que compra
   la credibilidad del resto de la pagina, asi que pesa como el precio, no como una nota al pie. */
.estado{display:flex;flex-direction:column;gap:var(--e4);max-width:var(--columna-ancha);}
.estado p{margin:0;color:var(--media);font-size:var(--t-s);line-height:1.6;}
.estado .estado-corrido,.estado .estado-nombre{color:var(--tinta);font-weight:600;}
.estado-no-medido{padding-top:var(--e4);border-top:1px solid var(--raya);}
/* Los cuatro compromisos. Numerados porque son una secuencia declarada, no una lista de ventajas:
   el lector cuenta cuatro y puede volver a contarlas el dia que se publiquen. */
.antes{margin-top:var(--e8);}
.antes-titulo{margin:0 0 var(--e4);font:700 var(--t-ml)/1.2 var(--sans);}
.antes-lista{margin:0;padding-left:var(--e6);display:flex;flex-direction:column;gap:var(--e3);font-size:var(--t-s);line-height:1.55;color:var(--media);}
.antes-lista li::marker{color:var(--acento);font-weight:700;font-variant-numeric:tabular-nums;}
.antes-nota{margin:var(--e4) 0 0;font-size:var(--t-xs);line-height:1.55;color:var(--tenue);}
.antes-enlace{margin:var(--e2) 0 0;font-size:var(--t-xs);line-height:1.55;}

/* ---- Cobertura OWASP ----------------------------------------------------------------------
   El hueco donde una SaaS pondria logos de clientes, ocupado con codigos publicos que el lector
   puede comprobar sin fiarse de nosotros. Banda clara, no oscura: se probo oscura y se quito por
   decision del propietario, porque partia la pagina en dos mundos. La unica tabla que queda: el
   contenedor lleva el scroll para que en movil se desplace la TABLA y no la pagina entera. */
.tabla-env{overflow-x:auto;}
.tabla{width:100%;border-collapse:collapse;font-size:var(--t-s);}
.tabla th,.tabla td{text-align:left;padding:var(--e3) var(--e4);vertical-align:top;border-bottom:1px solid var(--raya);color:var(--media);}
.tabla thead th{font:600 var(--t-xs)/1.6 var(--mono);letter-spacing:0.08em;text-transform:uppercase;color:var(--tenue);white-space:nowrap;}
.celda-codigo{font:600 var(--t-xs)/1.6 var(--mono);color:var(--tenue);white-space:nowrap;font-variant-numeric:tabular-nums;}
.celda-nombre{font:600 var(--t-s)/1.4 var(--sans);color:var(--tinta);}
.celda-larga{max-width:34em;}
.pastilla{display:inline-block;font:600 var(--t-xs)/1.7 var(--mono);letter-spacing:0.05em;text-transform:uppercase;padding:0 var(--e3);border:1px solid;border-radius:var(--curva-p);white-space:nowrap;}
.pastilla-cubierto{color:var(--conforme);background:var(--conforme-fondo);border-color:var(--conforme-raya);}
.pastilla-parcial{color:var(--destaque);background:var(--destaque-fondo);border-color:var(--destaque-fondo);}
.pastilla-fuera{color:var(--tenue);background:var(--fondo);border-color:var(--raya);}
.marcos{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--e2) var(--e3);margin:var(--e6) 0 0;font-size:var(--t-s);}
.marcos-titulo{color:var(--tenue);font-weight:600;}
.marco{padding:var(--e1) var(--e3);border:1px solid var(--campo-raya);border-radius:var(--curva-p);color:var(--media);font-weight:600;}
.nota-fuente{margin:var(--e6) 0 0;font-size:var(--t-xs);line-height:1.5;color:var(--tenue);max-width:var(--columna);}

/* ---- Que te llevas: nueve tarjetas de guardarrail ------------------------------------------
   Rejilla en vez de tabla: se escanea. La insignia es el identificador (G01) en mono, no un icono
   dibujado: nueve simbolos desiguales convierten la seccion en un tema de WordPress, y el codigo
   es lo que el lector puede buscar en el kit. Mismo bucle, mismas claves que la tabla anterior. */
.guardas{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,19rem),1fr));gap:var(--e4);list-style:none;margin:0;padding:0;}
.guarda{display:flex;flex-direction:column;gap:var(--e2);padding:var(--e6);border:1px solid var(--raya);border-radius:var(--curva-s);background:var(--fondo);}
.guarda-cab{display:flex;align-items:center;gap:var(--e3);}
.guarda-id{display:inline-flex;align-items:center;justify-content:center;min-width:2.5rem;padding:var(--e1) var(--e2);border-radius:var(--curva-s);background:var(--acento-fondo);color:var(--acento);font:600 var(--t-xs)/1.4 var(--mono);letter-spacing:0.04em;}
.guarda-etapa{font:600 var(--t-xs)/1.4 var(--mono);letter-spacing:0.06em;text-transform:uppercase;color:var(--tenue);}
.guarda h3{margin:var(--e2) 0 0;font:700 var(--t-ml)/1.2 var(--sans);letter-spacing:-0.015em;}
.guarda p{margin:0;font-size:var(--t-s);line-height:1.55;color:var(--media);flex:1;}
.guarda .pastilla{align-self:flex-start;margin-top:var(--e2);}

/* ------------------------------------------------------ que es / que no */
.comparativa{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--e12);}
.comparativa-col h3{margin:0 0 var(--e4);font:700 var(--t-ml)/1.2 var(--sans);}
.comparativa-col > p{margin:0 0 var(--e6);color:var(--media);font-size:var(--t-s);}
.lista-es,.lista-no{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--e4);}
.lista-es li,.lista-no li{display:flex;gap:var(--e3);font-size:var(--t-s);line-height:1.55;color:var(--media);}
.lista-es li::before{content:"";flex:none;width:18px;height:18px;margin-top:2px;border-radius:var(--curva-p);background:var(--conforme-fondo);border:1.5px solid var(--conforme);}
.lista-no li::before{content:"";flex:none;width:18px;height:18px;margin-top:2px;border-radius:var(--curva-p);background:var(--sup2);border:1.5px solid var(--tenue);}
.lista-no h4{margin:0 0 var(--e1);font:700 var(--t-s)/1.3 var(--sans);color:var(--tinta);}
.lista-no li > div{min-width:0;}

/* -------------------------------------------------------------- ai act */
.aiact p{margin:0;color:var(--media);font-size:var(--t-base);line-height:1.6;}
.aiact-descargo{margin-top:var(--e3);color:var(--tenue);font-size:var(--t-xs);}

/* ---------------------------------------------------------------- precio */
/* Las tarjetas primero: la cifra ya se vio en el hero y el lector llega aqui con la pagina leida,
   asi que lo que compara es un plan con el otro, no la cifra con el vacio. Debajo, lo que se
   lleva y lo que dice la licencia, en dos columnas. */
.precios{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,19rem),1fr));gap:var(--e6);list-style:none;margin:0;padding:0;max-width:56rem;}
.plan{position:relative;display:flex;flex-direction:column;gap:var(--e3);padding:var(--e8);background:var(--fondo);border:1px solid var(--raya);border-radius:var(--curva-l);}
.plan-destacado{border:1.5px solid var(--acento);box-shadow:var(--sombra-alta);}
.plan h2,.plan h3{margin:0;font:700 var(--t-s)/1.3 var(--sans);}
.plan-cifra{margin:0;font:800 var(--t-cifra)/1 var(--sans);letter-spacing:-0.03em;font-variant-numeric:tabular-nums;}
.plan-cifra span{font:600 var(--t-xs)/1 var(--sans);color:var(--tenue);letter-spacing:0.02em;}
.plan ul{margin:0;padding-left:var(--e4);list-style:disc;font-size:var(--t-s);line-height:1.7;color:var(--media);flex:1;}
.plan .boton{margin-top:var(--e3);}
.plan-pildora{position:absolute;top:calc(var(--e3) * -1);right:var(--e6);padding:var(--e1) var(--e3);border-radius:var(--curva-p);background:var(--acento);color:var(--sobre-acento);font:700 11px/1.6 var(--sans);letter-spacing:0.04em;text-transform:uppercase;}
.precio-estado{display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:var(--e2) var(--e3);margin:var(--e6) 0 0;padding:var(--e2) var(--e4);border-radius:var(--curva-s);background:var(--acento-fondo);font-size:var(--t-s);color:var(--media);}
.precio-estado strong{color:var(--destaque);}
.precio-detalle{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--e12);margin:var(--e12) 0 0;max-width:56rem;}
.dan-titulo,.licencia-titulo{margin:0 0 var(--e3);font:700 var(--t-ml)/1.2 var(--sans);}
.dan-entrada{margin:0 0 var(--e4);font-size:var(--t-s);line-height:1.6;color:var(--media);}
.dan-lista,.licencia-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--e3);font-size:var(--t-s);line-height:1.55;color:var(--media);}
.licencia-nota{margin:var(--e4) 0 0;padding-top:var(--e4);border-top:1px solid var(--raya);font-size:var(--t-xs);line-height:1.55;color:var(--tenue);}
/* IVA y upgrade pegados a las cifras: son parte del precio, no una nota legal al pie. */
.precio-fino{margin:var(--e3) 0 0;font-size:var(--t-s);line-height:1.55;color:var(--media);max-width:56rem;}

/* ------------------------------------------------------------ formulario */
/* La tarjeta del formulario: la elevacion no es adorno, es lo unico que separa la peticion del
   resto de la banda. El titulo y los pasos van a la izquierda, FUERA del formulario; la nota de
   consentimiento se queda dentro, junto a la casilla y el boton, que es donde tiene sentido. */
.captacion{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,34rem);gap:var(--e8) var(--e12);align-items:start;}
.captacion-pasos{margin:var(--e4) 0 0;font-size:var(--t-s);line-height:1.55;color:var(--tenue);max-width:var(--columna-ancha);}
.espera{margin:0;padding:var(--e8);background:var(--fondo);border:1px solid var(--raya);border-radius:var(--curva-l);box-shadow:var(--sombra-alta);}
.campo{display:flex;flex-direction:column;gap:var(--e2);margin-bottom:var(--e4);}
.campo-pista{margin:0;font-size:var(--t-xs);line-height:1.55;color:var(--tenue);}
.campo label{font:600 var(--t-s)/1.3 var(--sans);}
/* TODO campo de un .campo, no solo el de correo. El de GitHub es type="text" y se quedaba con la
   caja por defecto del navegador —estrecha y sin borde— en las dos paginas donde mas importa: la de
   comprar y la de rescate, que es donde alguien que YA ha pagado va a arreglar su usuario. El senuelo
   no se ve afectado: vive en .senuelo, fuera del flujo. */
.campo input[type="email"],.campo input[type="text"]{width:100%;min-height:48px;padding:var(--e3) var(--e4);border:2px solid var(--campo-raya);border-radius:var(--curva-s);font:400 16px/1.3 var(--sans);color:var(--tinta);background:var(--fondo);}
.campo input[type="email"]:focus,.campo input[type="text"]:focus{border-color:var(--acento);outline:none;}
.consentimiento{display:flex;gap:var(--e3);align-items:flex-start;margin-bottom:var(--e4);font-size:var(--t-s);line-height:1.55;color:var(--media);}
.consentimiento input{margin-top:3px;width:18px;height:18px;flex:none;accent-color:var(--acento);}
/* El senuelo: un campo real que ningun humano ve y casi todo robot rellena. `hidden` no vale
 * -algunos robots lo respetan-, asi que sale del flujo con posicion y se retira de la
 * accesibilidad. La etiqueta existe porque un input sin etiqueta es un fallo de a11y aunque no se
 * vea, y `tabindex="-1"` lo saca del recorrido con el teclado. */
.senuelo{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
/* El reto de Turnstile solo existe cuando hay claves configuradas, asi que en local sin ellas estas
 * reglas no pintan nada.
 *
 * El `max-width` no es cosmetico: Turnstile mide su CONTENEDOR y se estira a lo que le den. Dentro
 * de un formulario de 600px dibujaba una banda gris de 600 para decir una frase, y el logotipo se
 * iba al otro extremo. Acotado a su tamano natural (300x65) queda como el resto de los campos, y
 * comprobado que no recorta nada: el widget mide dentro lo mismo que fuera. */
.cf-turnstile{max-width:300px;overflow-x:auto;margin-bottom:var(--e4);}
/* A 360px el contenedor son 286 y el widget 300 fijos: SI se pierden 14px por la derecha —la marca
   de Cloudflare y sus enlaces—, recuperables desplazando. La parte interactiva esta a la izquierda,
   asi que el envio no se bloquea. Se dice aqui porque el comentario anterior afirmaba lo contrario. */
.espera .boton{width:100%;}
.espera-nota{margin:var(--e4) 0 0;font-size:var(--t-xs);line-height:1.55;color:var(--tenue);}
.aviso-error{padding:var(--e3) var(--e4);border-radius:var(--curva-s);font-size:var(--t-s);margin-bottom:var(--e4);background:var(--grave-fondo);border:1px solid var(--grave-raya);color:var(--grave-tinta);}

/* ------------------------------------------------------------------- faq */
/* Acordeon nativo. El marcador «+»/«−» se dibuja con dos trazos, no con un caracter en ::after:
   un caracter ahi lo lee el lector de pantalla nueve veces, una por pregunta. */
.faq{max-width:var(--columna);}
.faq details{border-bottom:1px solid var(--raya);padding-block:var(--e4);}
.faq summary{position:relative;padding-right:var(--e8);font:600 var(--t-base)/1.4 var(--sans);cursor:pointer;list-style:none;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary:hover{color:var(--acento);}
.faq summary::before,.faq summary::after{content:"";position:absolute;right:var(--e1);top:calc(0.7em - 1px);width:14px;height:2px;background:var(--acento);transition:transform 150ms;}
.faq summary::after{transform:rotate(90deg);}
.faq details[open] summary::after{transform:rotate(0);}
.faq p{margin:var(--e3) 0 0;color:var(--media);font-size:var(--t-s);}

/* ---------------------------------------------------------------- quien */
.quien-nombre{margin:0 0 var(--e2);font:800 var(--t-ml)/1.2 var(--sans);}
.quien-texto{margin:0 0 var(--e4);font-size:var(--t-s);line-height:1.6;color:var(--media);}
.quien-nota{margin:0;padding-top:var(--e4);border-top:1px solid var(--raya);font-size:var(--t-s);line-height:1.6;color:var(--media);}

/* --------------------------------------------------------------- cierre */
/* Ancla, no un segundo formulario. Ver el comentario de .llamada. Sin margen arriba: va entre
   dos bandas claras y el corte lo da el propio color. */
.cierre{background:var(--prueba);color:var(--prueba-texto);padding-block:var(--e16);text-align:center;}
.cierre-titulo{margin:0 0 var(--e3);font:800 var(--t-l)/1.12 var(--sans);color:var(--fondo);}
.cierre-texto{margin:0 auto var(--e8);color:var(--prueba-tenue);max-width:34em;}
.cierre .boton{background:var(--acento-claro);border-color:var(--acento-claro);color:var(--prueba);}
.cierre .boton:hover{background:var(--fondo);border-color:var(--fondo);color:var(--prueba);}
.cierre-confianza{margin:var(--e6) 0 0;font-size:var(--t-xs);color:var(--prueba-tenue);}

/* ------------------------------------------------------------- documento */
/* Paginas legales y acuses: una columna de texto, sin adornos y legible sin JavaScript. */
.documento{max-width:var(--columna);}
.documento h1{margin:0 0 var(--e2);font:800 clamp(1.8rem,4vw,2.4rem)/1.1 var(--sans);}
.documento h2{margin:var(--e12) 0 var(--e3);font:700 var(--t-m)/1.3 var(--sans);}
.documento p,.documento li{color:var(--media);}
.documento li{margin-bottom:var(--e2);}
.documento .actualizado{font:600 var(--t-xs)/1.4 var(--sans);color:var(--tenue);}

/* ------------------------------------------------------------- pruebas */
/* La pagina que ensena la evidencia. Cada ataque es un bloque con su veredicto arriba y las citas
   dentro; las citas son texto del kit y van como consola —sobre la superficie oscura elevada, en
   mono— para que se lea que NO son nuestra prosa, sino lo que el atacante escribe y lo que el
   grabador anoto. Superficie --prueba-sup, no --prueba: no es un contenedor con foco dentro. */
.prueba{margin:var(--e8) 0 0;padding:0 0 0 var(--e4);border-left:3px solid var(--raya);}
.prueba h3{margin:0 0 var(--e1);font:700 var(--t-m)/1.3 var(--sans);}
.prueba-meta{font:600 var(--t-xs)/1.4 var(--sans);color:var(--tenue);text-transform:lowercase;}
.prueba-etiqueta{margin:var(--e4) 0 var(--e1);font:600 var(--t-xs)/1.4 var(--mono);letter-spacing:0.04em;color:var(--tenue);}
.prueba blockquote{margin:0;padding:var(--e3) var(--e4);background:var(--prueba-sup);border-radius:var(--curva-s);color:var(--prueba-texto);font:400 var(--t-xs)/1.6 var(--mono);white-space:pre-wrap;overflow-wrap:anywhere;}
.pie-producto{display:flex;gap:var(--e4);flex-wrap:wrap;}

/* Dos puntos de corte y no mas. 60rem: el hero y las secciones se apilan, el nav se pliega en el
   menu. 40rem: la cabecera se queda con la marca, el menu y el idioma; los botones del hero a
   ancho completo. */
@media (max-width:60rem){
  :root{--margen:1.5rem;}
  .principal{display:none;}
  .menu{display:block;margin-left:auto;}
  .portada{grid-template-columns:minmax(0,1fr);gap:var(--e8);padding-block:var(--e8);}
  .seccion-env,.comparativa,.precio-detalle,.captacion{grid-template-columns:minmax(0,1fr);gap:var(--e8);}
  .seccion-cab{position:static;}
  .evidencia-enlace{margin-left:0;}
  .pie-env{flex-direction:column;align-items:flex-start;}
}
@media (max-width:40rem){
  :root{--margen:1.25rem;}
  /* La cabecera en una fila a 360px: marca, «Site» y el idioma caben; el boton no, y el hero lleva
     el mismo destino a 200px. */
  .cabecera-env{gap:var(--e3);}
  .boton-mini{display:none;}
  .portada-sobre{border-radius:var(--curva-s);}
  .portada-acciones .boton{flex:1 1 100%;}
  .ensayo-etapa{margin-left:0;flex-basis:100%;}
  .banco-pestana{padding-inline:0;}
  .evidencia-env{flex-direction:column;align-items:flex-start;gap:var(--e4);}
  .espera{padding:var(--e4);}
  .llamada{margin-top:var(--e12);}
}
@media (prefers-reduced-motion:reduce){
  .boton,.boton-secundario,.banco-pestana,.faq summary::before,.faq summary::after{transition:none;}
}
/* Con colores forzados (alto contraste de Windows) los rellenos desaparecen y la pestana activa
   se veria igual que las otras dos: el estado se marca con un contorno del color del sistema. */
@media (forced-colors:active){
  #ensayo-1:checked~.banco-pestanas .banco-pestana[for="ensayo-1"],#ensayo-2:checked~.banco-pestanas .banco-pestana[for="ensayo-2"],#ensayo-3:checked~.banco-pestanas .banco-pestana[for="ensayo-3"]{outline:2px solid CanvasText;outline-offset:-2px;}
}