/* SEACE Monitor - portada publica (Tarea 7 de la Fase B).

   Los tokens de :root/@media/[data-theme] de aqui abajo son una copia
   literal de static/styles.css -- mismo patron que static-admin/styles.css
   (su propio comentario lo dice: "copia literal de static/styles.css").
   Es la paleta que el cliente ya conoce del login y de la barra del panel;
   copiarla en vez de enlazar el fichero evita atar esta pagina, que vive en
   su propio Mount, al de la aplicacion del cliente ("/app"). */
:root{
  /* MEDIDOS UNO A UNO SOBRE LA MAQUETA DEL SOCIO HUMANO (2026-09-24), no
     elegidos a ojo: se saco el relleno del trazo de cada pieza -- el 5% mas
     oscuro de su recorte, que es lo que queda cuando se descuenta el
     suavizado de bordes -- y esos son los valores de aqui abajo.
     El fondo NO es blanco puro: es #fafbfd, un blanco apenas frio. Se nota
     al lado de una tarjeta blanca de verdad, que es lo que le da relieve. */
  --bg:#fafbfd; --surface:#ffffff; --surface-2:#f4f6fa; --border:#e4e8ef;
  --ink:#081225; --ink-2:#4f5971; --ink-3:#6e7890;
  /* Los tres oros de la maqueta, que son tres y no uno: el del titular, el
     del relleno de los botones y el de los acentos finos (el subrayado del
     menu activo, la raya del antetitulo, los iconos). */
  --accent:#dea21e; --accent-2:#e9ae2b; --accent-3:#eca900;
  --accent-ink:#081225;
  --oro-suave:#fdf4de; --oro-borde:#f3dda4;
  /* EL ORO QUE SE LEE, que no es el oro que se ve. El de la marca da 2,1:1
     sobre blanco y 1,9:1 sobre --oro-suave: sirve de RELLENO, donde lo que
     hay que leer es el texto oscuro de encima (8,3:1), y no sirve para un
     trazo fino ni para una letra. Este da 5,2:1 sobre --oro-suave.
     Regla: rellenos con --accent; trazos y letras con este. */
  --oro-texto:#8a5f08;
  --navy:#0e1b33; --navy-2:#17263f; --navy-ink:#e8eef7;
  /* EL ANILLO DE FOCO, Y SOLO EL, NO ES EL ORO DE LA MAQUETA.
     Medido sobre este fondo: el oro del titular da 2,18:1 y WCAG 2.2 (1.4.11)
     pide 3:1 para un indicador de foco. Este da 4,69:1.
     No cambia NADA de lo que se ve: un anillo de foco solo aparece cuando
     alguien navega con el teclado, y ahi la unica pregunta es si se ve o no.
     El resto de la pagina lleva el oro de la maqueta tal cual. */
  --foco:#96690a;
  /* --foco: el color del anillo de foco, y NO es --accent-2.
     Medido: --accent-2 (#12a3d6) sobre blanco da 2,9:1 y sobre el fondo de la
     pagina 2,58:1 -- por debajo del 3:1 que WCAG 2.2 (1.4.11) pide para un
     indicador de foco. En oscuro ese mismo token da 8,4:1, que es de donde
     venia: se eligio mirando el tema oscuro. En claro el que cumple es
     --accent (5,86:1 sobre blanco, 5,21:1 sobre el fondo), y en oscuro el que
     se ve es --accent-2. Por eso son dos valores y no uno.
     Se toca aqui, en el token, y no en cada regla: los anillos de foco de
     este fichero salen todos de --foco. */
  --good:#15803d; --good-bg:#dcfce7; --warn:#b45309; --warn-bg:#fef3c7;
  --crit:#b91c1c; --crit-bg:#fee2e2; --neutral:#475569; --neutral-bg:#e2e8f0;
  --info:#1d4ed8; --info-bg:#dbeafe;
  --shadow:0 1px 2px rgba(15,27,45,.06),0 8px 24px rgba(15,27,45,.08);
  --radius:12px;
  --sans:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
}
/* AQUI NO HAY NINGUNA CONSULTA POR EL TEMA DEL SISTEMA. La habia, copiada
   igual que el resto de los tokens, y hacia que la portada se abriera oscura
   para quien tiene el sistema en oscuro. (No se cita tal cual porque
   test_portada.py vigila que esa consulta no vuelva a este fichero.) El :root de arriba es el tema CLARO y es
   el que vale de fabrica: esta es la primera pantalla de un desconocido y se
   le enseña tal y como esta pensada. El oscuro se pide -- con el boton de la
   barra, que guarda `seaceTema` y lo escribe en [data-theme] (ver el script
   del <head> de index.html). Las dos aplicaciones (/app y /admin) siguen
   respetando el sistema: ahi ya hay una sesion y un habito. */
:root[data-theme="light"]{
  --bg:#fafbfd; --surface:#ffffff; --surface-2:#f4f6fa; --border:#e4e8ef;
  --ink:#081225; --ink-2:#4f5971; --ink-3:#6e7890;
  --accent:#dea21e; --accent-2:#e9ae2b; --accent-3:#eca900; --accent-ink:#081225;
  --oro-suave:#fdf4de; --oro-borde:#f3dda4; --oro-texto:#8a5f08;
  --navy:#0e1b33; --navy-2:#17263f; --navy-ink:#e8eef7; --foco:#96690a;
}
:root[data-theme="dark"]{
  --bg:#0b1220; --surface:#131c2e; --surface-2:#0f1726; --border:#26344a;
  --ink:#e8eef7; --ink-2:#a9b8cc; --ink-3:#7889a0;
  /* Sobre oscuro se invierte el reparto: el oro vivo YA se lee (10,04:1
     sobre el fondo), asi que aqui --accent es el vivo y el apagado no pinta
     nada. No es un descuido de simetria -- es que el problema que obliga a
     tener dos oros solo existe sobre claro. */
  --accent:#eeb43c; --accent-2:#f0b429; --accent-3:#ffc94d; --accent-ink:#1a1206;
  --oro-suave:#2a2008; --oro-borde:#4a3a12;
  /* Sobre oscuro el oro vivo ya se lee, asi que aqui es el mismo. */
  --oro-texto:var(--accent);
  --navy:#0f1726; --navy-2:#1a2740; --navy-ink:#e8eef7;
  --foco:var(--accent-2); --good:#4ade80; --good-bg:#0e2a1a; --warn:#fbbf24; --warn-bg:#2a1f07;
  --crit:#f87171; --crit-bg:#2a1212; --neutral:#94a3b8; --neutral-bg:#1e293b; --info:#60a5fa; --info-bg:#0f1e3a;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 30px rgba(0,0,0,.35);
}

/* ---- la transicion entre paginas ----------------------------------------
   El salto de "/" a "/soluciones" era una navegacion completa: el navegador
   tira el DOM y lo reconstruye, asi que habia destello blanco, el scroll
   saltaba al tope y la barra se repintaba desde cero -- aunque acabara
   identica. No era lentitud de descarga: la hoja y el script salen de la
   cache.

   Esta regla le dice al navegador que ANIME la navegacion en vez de
   cortarla. Las dos de mas abajo (en la barra y en el pie) le dicen ademas
   que esas piezas son LA MISMA en las dos paginas: con nombre propio no las
   funde, las mantiene quietas y anima solo lo que hay alrededor.

   Lo que cuesta: nada. Sin JavaScript, sin paso de compilacion y sin tocar
   una sola prueba. Donde el navegador no lo soporte, la navegacion se
   comporta exactamente como antes -- que era la alternativa.

   EL NOMBRE TIENE QUE SER UNICO EN EL DOCUMENTO. Si algun dia hay dos
   elementos con el mismo, el navegador se planta y no hace ninguna
   transicion, sin decir nada en ningun sitio. */
@view-transition{navigation:auto}

*{box-sizing:border-box}

/* EL ATRIBUTO `hidden` GANA A CUALQUIER `display` DE AUTOR, y aqui faltaba.
   Es la regla que ya tienen static/styles.css y static-admin/styles.css, y
   esta hoja era la unica de las tres sin ella.
   Lo que rompia, en orden de gravedad:
     - `#heroAlta` es un <a class="btn"> con `hidden`, y `.btn` declara
       display:inline-flex. O sea que el boton "Crear mi cuenta" del heroe
       SE VEIA SIEMPRE, tambien cuando no hay planes publicados y el alta
       esta cerrada -- justo lo que test_sin_planes_la_portada_no_ofrece_
       crear_la_cuenta cree estar impidiendo. Esa prueba mira el atributo en
       el HTML, y el atributo estaba: lo que no estaba era el efecto.
     - el aviso flotante de "revisa tu correo" (display:flex), que nacia
       visible y no se cerraba al Aceptar.
   Un `hidden` que no esconde es peor que no tenerlo: se escribe, se prueba
   la cadena, y nadie mira la pantalla. */
[hidden]{display:none !important}
/* Barras de desplazamiento con el estilo de la marca: la misma pastilla
   dorada sobre riel suave que la barra del tablero de Mis procesos. */
html{scroll-behavior:smooth;scrollbar-color:var(--accent) var(--oro-suave)}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:var(--oro-suave)}
::-webkit-scrollbar-thumb{background:var(--accent);border-radius:999px;
  border:3px solid var(--oro-suave)}
::-webkit-scrollbar-thumb:hover{background:var(--accent-3)}
/* NADA se sale por los lados. `clip` y no `hidden` a proposito: `hidden`
   convertiria el documento en contenedor de desplazamiento y rompe el
   `position:sticky` de la barra superior. */
html,body{overflow-x:clip;max-width:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);
  font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
h1,h2,h3{margin:0;font-weight:680;letter-spacing:-.02em;text-wrap:balance}
p{margin:0}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%}
.tnum{font-variant-numeric:tabular-nums}
:focus-visible{outline:2px solid var(--foco);outline-offset:3px;border-radius:8px}

/* ---- movimiento --------------------------------------------------------
   Dos piezas: la entrada del heroe (al cargar, escalonada) y el fundido de
   cada seccion al llegar a ella. Los numeros salen de la base del skill:
   350ms y 12px de desplazamiento, "para que se lea como un fundido y no como
   un deslizamiento".

   Todo cuelga de `html.js`, que pone el propio documento en su primera linea.
   Sin JavaScript no hay clase, y sin clase estas reglas no existen: la pagina
   se ve entera y quieta. Una portada que se queda en blanco porque fallo un
   script no es una portada. */
.js .anim{opacity:0;transform:translateY(14px);
  animation:entra .5s cubic-bezier(.22,.61,.36,1) forwards;animation-delay:var(--d,0ms)}
@keyframes entra{to{opacity:1;transform:none}}

.js .reveal{opacity:0;transform:translateY(12px);
  transition:opacity .35s ease-out,transform .35s ease-out}
.js .reveal.dentro{opacity:1;transform:none}

/* ---- barra superior ---- */
:root{--top-h:76px}
/* Al bajar, la barra se aprieta y se despega con una sombra: dice "ya no estas
   arriba" sin ocupar sitio para decirlo. */
.topbar.abajo{height:62px;box-shadow:0 6px 20px rgba(2,8,20,.10);
  background:color-mix(in srgb,var(--surface) 92%,transparent);
  backdrop-filter:blur(10px)}
.topbar.abajo .brand img{width:34px;height:34px}
.topbar.abajo .brand img.logo{height:34px;width:auto}
/* SIN FONDO Y SIN LINEA (peticion del socio humano, 2026-09-24). En la
   maqueta la barra no es una franja: los controles flotan sobre la pagina y
   el heroe pasa por debajo sin que nada lo corte. Un fondo translucido con
   desenfoque y una linea inferior la convertian en un elemento mas, y
   partian en dos la cuna dorada que baja desde la esquina.
   Sigue siendo `sticky`: al bajar se despega con sombra Y AHI SI se pone
   fondo, porque sin el las letras de la barra se cruzarian con el texto que
   pasa por debajo. Arriba no hay nada debajo con lo que chocar; abajo si. */
.topbar{view-transition-name:barra;
  position:sticky;top:0;z-index:20;height:var(--top-h);
  transition:height .2s var(--ease,ease),box-shadow .2s ease,background .2s ease;
  display:flex;align-items:center;
  justify-content:space-between;gap:28px;padding:14px 40px;
  background:transparent;border-bottom:0}
/* Mas grande (peticion del socio humano, 2026-09-24). En la maqueta la marca
   mide ~70 px sobre una barra de ~85: ocupa casi todo el alto, que es lo que
   la convierte en el ancla de la pagina en vez de en un icono mas. */
.brand{display:flex;align-items:center;gap:12px;letter-spacing:-.03em;
  font-size:33px;font-weight:800;color:var(--ink);line-height:1}
.brand img{border-radius:8px;object-fit:contain;transition:width .2s ease,height .2s ease}
/* "Pro" EN ORO, medido en la maqueta: su pixel mas saturado es #eeaa00, o
   sea el mismo oro de acento del resto de la pagina. "Tender" va en tinta
   (#02081f medido), que es la misma --ink.
   Es el reparto del propio logotipo -- T azul, P dorada -- repetido en la
   palabra. */
.brand .pro{color:var(--accent-3)}
/* El logotipo oficial (2026-09-30): tinta azul en claro, blanca en oscuro.
   Se alternan con [data-theme], el mismo interruptor que los tokens. */
img.logo{display:block;width:auto;border-radius:0;object-fit:contain}
img.logo-oscuro{display:none}
:root[data-theme="dark"] img.logo-claro{display:none}
:root[data-theme="dark"] img.logo-oscuro{display:block}
.brand img.logo{height:44px;width:auto}
.topbar nav:not(.navlinks){display:flex;align-items:center;gap:18px}

/* ---- LOS ENLACES DE SECCION (.navlinks) ---------------------------------
   Todo lo suyo vive AQUI: la forma ancha y, dentro del @media de abajo, la
   del panel de la hamburguesa. Estuvo repartido en cuatro sitios del
   fichero, y no por descuido sino por una pelea que nadie habia visto:

   `.topbar nav` se escribio para los botones de la derecha, pero la lista de
   enlaces TAMBIEN es un <nav>, asi que la alcanzaba -- y con mas peso que
   `.navlinks` (0,1,1 contra 0,1,0). Le imponia su `gap:18px`, su
   `align-items:center` y su `flex:none`. Consecuencias:
     - el `gap` que se escribia aqui no llegaba nunca: se pidio mas
       separacion dos veces y las dos se quedo en 18px sin que nada fallara;
     - en el panel movil los enlaces salian centrados y del ancho de su
       texto, y se arreglo con un parche al final del fichero con
       `.topbar .menu .navlinks` delante, para ganar por peso;
     - y un `.navlinks{min-width:0}` suelto, que con `flex:none` no hacia
       nada.
   Arreglado en la raiz: las reglas de la barra dicen ahora
   `nav:not(.navlinks)`, y esta lista se manda sola. Si una regla nueva de la
   barra tiene que tocar los <nav>, que diga a cual.
   ---------------------------------------------------------------------- */
/* Viven en su propia lista porque en pantalla estrecha pasan al panel y los
   botones de la derecha no: quien llega desde un movil necesita entrar o
   crear cuenta, no saltar a una seccion que tiene tres dedos mas abajo. */
/* 54px: lo que pidio el socio humano ("mas separacion entre los botones
   centrales"). Estuvo escrito asi desde entonces y no se aplico nunca hasta
   la reorganizacion de este bloque -- ver arriba. */
.navlinks{display:flex;align-items:center;gap:54px;margin:0 auto;flex:none}
.navlinks a{position:relative;color:var(--ink-2);font-size:15px;font-weight:600;
  padding:6px 0;text-decoration:none;transition:color .16s ease}
.navlinks a:hover{color:var(--ink)}
/* El subrayado del activo es un pseudoelemento y no un border-bottom: asi no
   mueve el texto un pixel al entrar y salir. */
.navlinks a.activo{color:var(--ink)}
.navlinks a.activo::after{content:"";position:absolute;left:0;right:0;bottom:0;
  height:3px;border-radius:2px;background:var(--accent-3)}
.navlinks .chev{width:14px;height:14px;stroke:currentColor;stroke-width:2.2;
  fill:none;stroke-linecap:round;stroke-linejoin:round;margin-left:5px;
  vertical-align:-2px}
/* En el panel de la hamburguesa: lista vertical a todo el ancho, cada enlace
   una fila entera pulsable, y el activo marcado con una barra a la izquierda
   -- el subrayado no se lee en una columna. */
@media (max-width:1100px){
  .navlinks{flex-direction:column;align-items:stretch;gap:0;margin:0;
    width:100%}
  .navlinks a{display:block;width:100%;text-align:left;padding:11px 12px;
    border-radius:9px;font-size:16px}
  .navlinks a:hover{background:var(--surface-2)}
  .navlinks a.activo{padding-left:16px}
  .navlinks a.activo::after{left:0;right:auto;top:8px;bottom:8px;
    width:3px;height:auto}
}

/* ---- el menu, y la hamburguesa ------------------------------------------
   Hasta el 2026-09-24 esto no existia: por debajo de 1100 px los enlaces de
   seccion se ESCONDIAN y ya. En un movil la barra se quedaba con la marca y
   dos botones, y no habia forma de llegar a "Como funciona" ni a "Planes"
   mas que desplazandose a ciegas. Un menu que desaparece no es un menu
   responsivo: es un menu que falta. */
.menu{display:flex;align-items:center;flex:1;gap:28px;
  justify-content:space-between}

/* La hamburguesa: escondida en ancho, que es donde el menu se ve entero. */
.hamb{display:none;flex:none;width:44px;height:44px;padding:0;
  border:1px solid color-mix(in srgb,var(--ink) 18%,transparent);
  border-radius:11px;background:var(--surface);cursor:pointer;
  place-items:center}
.hamb-rayas{display:grid;gap:4px;width:19px}
.hamb-rayas i{display:block;height:2px;border-radius:1px;background:var(--ink);
  transition:transform .18s ease,opacity .18s ease}
/* Abierta, las rayas se cruzan en aspa. La de en medio se va; las otras dos
   giran sobre el centro. Dice "esto ahora cierra" sin una segunda pieza. */
.hamb[aria-expanded="true"] .hamb-rayas i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.hamb[aria-expanded="true"] .hamb-rayas i:nth-child(2){opacity:0}
.hamb[aria-expanded="true"] .hamb-rayas i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

@media (max-width:1100px){
  .hamb{display:grid}
  /* El panel. Absoluto y no empujando la barra: la barra es `sticky` y si
     creciera al abrirse taparia media pantalla en un movil apaisado.
     Nace cerrado con `display:none` -- y no con opacidad 0 -- porque un
     panel transparente sigue tragandose los toques de lo que hay debajo. */
  .menu{position:absolute;top:100%;right:14px;left:14px;display:none;
    flex-direction:column;align-items:stretch;gap:6px;
    background:var(--surface);border:1px solid var(--border);
    border-radius:14px;padding:12px;
    box-shadow:0 18px 44px -12px rgba(9,20,40,.26)}
  .menu.abierto{display:flex}
  .topbar nav:not(.navlinks){flex-direction:column;align-items:stretch;
    gap:8px;border-top:1px solid var(--border);padding-top:10px;margin-top:4px}
  .temabtn{justify-content:flex-start;height:42px}
  .temabtn .lbl{position:static;width:auto;height:auto;margin:0;
    clip-path:none;overflow:visible}
  .btn.ghost,#navAlta{width:100%;padding:12px 18px}
}

/* En un movil la marca a 33 px con su logotipo de 46 se come la barra entera
   y deja a la hamburguesa sin sitio. */
@media (max-width:640px){
  .topbar{padding:12px 16px;gap:12px}
  .brand{font-size:24px;gap:9px}
  .brand img{width:36px;height:36px}
  .topbar.abajo .brand img{width:30px;height:30px}
  .brand img.logo{height:32px;width:auto}
  .topbar.abajo .brand img.logo{height:28px;width:auto}
  .menu{right:10px;left:10px}
}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  border:1.5px solid var(--border);background:var(--surface-2);color:var(--ink);
  padding:11px 22px;border-radius:10px;font-weight:700;font-size:15px;
  font-family:inherit;cursor:pointer;
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease,background .16s ease}
.btn:hover{text-decoration:none;border-color:var(--accent);transform:translateY(-1px)}
.btn:active{transform:none}
/* RELLENO ORO VIVO CON TINTA ENCIMA (8,72:1), no oro apagado. Es el unico
   sitio de la pagina donde el oro de la marca sale a su brillo real, y puede
   porque aqui no es texto: es fondo. */
.btn.primary{background:linear-gradient(180deg,#ebb236,#daa023);
  color:var(--accent-ink);border-color:#daa023;
  box-shadow:0 8px 22px color-mix(in srgb,var(--accent-2) 42%,transparent)}
.btn.primary:hover{background:linear-gradient(180deg,#f0ba45,#e0a829);
  border-color:#e0a829;
  box-shadow:0 12px 30px color-mix(in srgb,var(--accent-2) 50%,transparent)}
/* El contorno de "Iniciar sesion": borde de tinta, no de linea gris. En la
   barra compite con un boton oro relleno, y un borde gris al lado de ese se
   lee como deshabilitado. */
/* FONDO BLANCO (peticion del socio humano, 2026-09-24), y no transparente.
   Se llama `ghost` por la maqueta anterior, cuando la barra tenia su propio
   fondo y un boton transparente se recortaba contra el igual. Desde que la
   barra no tiene fondo, transparente significa "del color de la pagina", y
   al lado del boton oro relleno eso se leia como un hueco con borde en vez
   de como un boton. Blanco sobre el fondo #fafbfd de la pagina si tiene
   cuerpo propio -- que es como sale en la maqueta. */
.btn.ghost{background:var(--surface);
  border-color:color-mix(in srgb,var(--ink) 22%,transparent)}
.btn.ghost:hover{border-color:var(--ink);background:var(--surface)}
.btn.grande{padding:15px 30px;font-size:16px;border-radius:12px}
/* El boton del video: blanco con el triangulo en un disco oro. El disco es
   parte del boton y no un icono suelto -- da el punto de color sin
   convertirlo en una segunda llamada a la accion que compita con la de al
   lado. */
.btn .play{display:grid;place-items:center;width:30px;height:30px;flex:none;
  border-radius:50%;background:var(--accent-2)}
.btn .play svg{width:12px;height:12px;fill:var(--accent-ink);stroke:none;
  margin-left:2px}
.btn .btn-sub{color:var(--ink-3);font-weight:600}
.btn.ancho{width:100%;padding:12px 18px}

/* ---- el botón de alta, mientras no se sabe si hay alta ------------------
   `visibility` y NO `hidden`, y no es un capricho: es la diferencia entre
   que la barra se mueva sola y que no.

   Los dos botones de alta -- el de la barra y el del heroe -- no se pueden
   ensenar hasta saber si hay algun plan publicado, y eso lo contesta el
   API: dos `fetch` que vuelven bastante despues del primer pintado. Con
   `hidden` el boton ocupa CERO hasta ese momento y, al aparecer, empuja a
   todos sus vecinos -- en la barra eso recoloca de golpe los enlaces del
   centro, que estan centrados respecto a el. El efecto es un salto en la
   cabecera en cada carga, y se nota el doble al cambiar de pagina, que es
   cuando se esta mirando ahi.

   `visibility:hidden` guarda el sitio desde el primer pixel: el boton ya
   mide lo que va a medir, asi que cuando se destapa no se mueve nada.

   Y no se pierde ni una garantia de las que daba `hidden`: un elemento con
   visibilidad oculta no se ve, no se puede pulsar, no entra en el orden de
   tabulacion y no existe para un lector de pantalla. O sea que sigue sin
   ofrecerse nada mientras no se sepa -- que es lo que esas pruebas vigilan.

   Si la respuesta es que NO hay alta, ahi si se le pone `hidden` y el hueco
   se cierra: un boton invisible reservando sitio para siempre deja un vacio
   en la barra que no significa nada. Ese si mueve cosas, pero solo en el
   caso raro y una vez. */
.esperando{visibility:hidden}
@media (prefers-reduced-motion:reduce){.btn:hover{transform:none}}

/* ---- boton del tema ---- */
.temabtn{display:inline-flex;align-items:center;gap:8px;flex:none;
  height:36px;padding:0 14px;border-radius:20px;
  border:1px solid var(--border);background:var(--surface-2);color:var(--ink-2);
  font-family:inherit;font-size:12.5px;font-weight:650;cursor:pointer;
  transition:color .16s ease,border-color .16s ease}
.temabtn:hover{color:var(--ink);border-color:var(--accent)}
.temabtn svg{width:16px;height:16px;fill:none;stroke:currentColor;
  stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
/* Se ensena lo que vas a OBTENER al pulsar, no lo que ya tienes. Icono y
   palabra cambian juntos porque comparten la clase. */
.temabtn .ico-sol{display:none}
:root[data-theme="dark"] .temabtn .ico-luna{display:none}
:root[data-theme="dark"] .temabtn svg.ico-sol{display:block}
:root[data-theme="dark"] .temabtn span.ico-sol{display:inline}
/* Estrecho: se va la palabra, no el nombre accesible (vive en el aria-label). */
@media (max-width:560px){
  .temabtn{padding:0 10px}
  .temabtn .lbl{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
    overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}

/* En pantalla tactil, 44 de alto. Crece el area, no la caja: subir el boton
   lo sacaria de una barra que mide 56 y se condensa a 48 al bajar.
   `pointer:coarse` y no un ancho -- lo que manda es con que se toca. */
@media (pointer:coarse){
  .temabtn{position:relative}
  /* `min-width` y no `right:0`: por debajo de 560px la etiqueta se retira y la
     pildora baja a ~38px de ancho -- crecer solo en alto la dejaba corta en el
     otro eje justo en la pantalla donde se toca con el dedo. */
  .temabtn::after{content:"";position:absolute;top:50%;left:50%;
    transform:translate(-50%,-50%);width:100%;min-width:44px;height:44px}
}

main{max-width:1120px;margin:0 auto;padding:0 20px 72px}
section{padding:64px 0}
section h2{font-size:26px;margin-bottom:22px}

/* ---- heroe --------------------------------------------------------------
   El fondo son dos discos concentricos a la derecha, no una imagen: pesan
   cero, salen de los tokens de marca (ni un hex suelto) y se adaptan solos al
   tema -- en oscuro los mismos color-mix dan un resplandor en vez de una
   mancha clara.

   Discos y no el desenfoque de antes: con `blur` grande el navegador pinta
   una capa enorme en cada fotograma y se nota al desplazar en un movil; unas
   paradas duras de degradado radial cuestan lo mismo que un color plano. */
.hero{position:relative;display:grid;gap:40px;align-content:center;
  align-items:center;min-height:calc(100svh - var(--top-h));padding:40px 0}

.hero::before,.hero::after{content:"";position:absolute;z-index:-1;
  pointer-events:none;border-radius:50%}
/* El disco grande, mas cargado por dentro y desvanecido en el borde. */
.hero::before{top:-30%;right:-24vw;width:min(1020px,88vw);aspect-ratio:1;
  background:radial-gradient(circle at 58% 42%,
    color-mix(in srgb,var(--accent)   40%,transparent) 0 28%,
    color-mix(in srgb,var(--accent)   22%,transparent) 28% 48%,
    color-mix(in srgb,var(--accent-2) 13%,transparent) 48% 70%,
    color-mix(in srgb,var(--accent-2)  5%,transparent) 70% 100%);
  /* 16s: la pagina se lee, no se mira. El movimiento tiene que notarse solo
     si te quedas parado. */
  animation:respira 16s ease-in-out infinite alternate}
/* El arco claro que cruza por detras, el que le da la profundidad. */
.hero::after{top:-52%;right:2vw;width:min(760px,64vw);aspect-ratio:1;
  border:1px solid color-mix(in srgb,var(--accent) 16%,transparent);
  background:radial-gradient(circle,
    color-mix(in srgb,var(--accent-2) 7%,transparent) 0 72%,transparent 73%)}
@keyframes respira{from{transform:scale(1)}to{transform:scale(1.07)}}

@media (min-width:900px){.hero{grid-template-columns:1.02fr .98fr;gap:48px}}

.eyebrow{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;
  color:var(--accent);margin-bottom:16px}
.hero h1{font-size:clamp(32px,5.6vw,52px);line-height:1.06;font-weight:760;
  letter-spacing:-.03em}
.lead{margin-top:20px;font-size:16.5px;color:var(--ink-2);max-width:52ch}
.hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin-top:30px}
/* "Ver como funciona" es el camino de al lado, no la otra mitad de una
   pareja: en el momento en que lleva recuadro compite con "Crear mi cuenta"
   y la pantalla deja de tener una sola respuesta obvia. */
.btn.plano{border-color:transparent;background:transparent;color:var(--ink-2);
  padding:10px 6px}
.btn.plano:hover{border-color:transparent;color:var(--ink);text-decoration:underline}

/* ---- el tablero de ejemplo ---------------------------------------------
   Es el producto en una imagen: lo que ve quien entra al panel el martes por
   la manana. Va con `aria-hidden` y con su etiqueta "Ejemplo" a la vista:
   las cifras de aqui dentro son inventadas para ensenar la forma, y ni un
   lector de pantalla ni un visitante tienen que tomarlas por datos reales.
   Esa etiqueta no es decoracion -- es la diferencia entre ilustrar y
   mentir. */
.tablero{display:flex;flex-direction:column;gap:0}
.tablero-cab{display:flex;align-items:center;gap:9px;margin-bottom:12px;
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;
  color:var(--ink-3)}
.pill-ej{text-transform:none;letter-spacing:0;font-size:10.5px;font-weight:700;
  background:var(--neutral-bg);color:var(--neutral);border-radius:20px;padding:2px 9px}

.graf{background:var(--surface);border:1px solid var(--border);border-radius:16px;
  box-shadow:var(--shadow);padding:15px 16px 11px}
.graf-cab{display:flex;align-items:center;justify-content:space-between;gap:10px;
  font-size:12px;font-weight:650;color:var(--ink-2);margin-bottom:12px}
.graf-chip{flex:none;font-size:10.5px;font-weight:700;color:var(--accent);
  background:color-mix(in srgb,var(--accent) 12%,transparent);
  border-radius:20px;padding:2px 9px}
.spark{display:block;width:100%;height:96px}
/* Las dos series. Azul de marca lo revisado, verde lo que pasa el filtro:
   el mismo verde que el panel usa para "relevante", no un color de adorno.
   Y la leyenda de al lado no sobra -- quien no distingue el verde del azul
   se queda con dos lineas iguales. */
.spark .s-rev-0{stop-color:var(--accent);stop-opacity:.22}
.spark .s-rev-1{stop-color:var(--accent);stop-opacity:0}
.spark .s-rel-0{stop-color:var(--good);stop-opacity:.20}
.spark .s-rel-1{stop-color:var(--good);stop-opacity:0}
.spark .a-rev{fill:url(#gRev)}
.spark .a-rel{fill:url(#gRel)}
.spark .l-rev,.spark .l-rel{fill:none;stroke-width:2;stroke-linecap:round;
  stroke-linejoin:round}
.spark .l-rev{stroke:var(--accent)}
.spark .l-rel{stroke:var(--good)}
.graf-ley .c-rev{background:var(--accent)}
.graf-ley .c-rel{background:var(--good)}
.graf-pie{display:flex;justify-content:space-between;margin-top:7px;
  font-size:10px;color:var(--ink-3)}
.graf-ley{display:flex;gap:14px;margin-top:9px;font-size:10.5px;color:var(--ink-3)}
.graf-ley span{display:flex;align-items:center;gap:5px}
.graf-ley i{width:9px;height:3px;border-radius:2px;display:block}

/* Las tarjetas se montan sobre el grafico, como en el panel de verdad: lo que
   importa tapa a lo que da contexto. Solo en pantalla ancha -- apiladas en un
   movil, el solapamiento se come la primera linea. */
.oport{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;
  background:var(--surface);border:1px solid var(--border);border-radius:16px;
  box-shadow:var(--shadow);padding:11px}
@media (min-width:900px){
  .oport{margin:-30px 0 0 auto;width:92%;position:relative;z-index:1}
}
.op{display:flex;align-items:center;gap:11px}
.op-ico{flex:none;width:30px;height:30px;border-radius:9px;display:grid;
  place-items:center;background:color-mix(in srgb,var(--accent) 12%,transparent);
  color:var(--accent)}
.op-ico svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.op-txt{flex:1;min-width:0}
.op-tit{font-size:12.5px;font-weight:650;line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.op-fec{font-size:11px;color:var(--ink-3);margin-top:2px}
.op-rel{flex:none;text-align:right}
.op-n{display:block;font-size:19px;font-weight:760;line-height:1;color:var(--good)}
.op-l{display:block;font-size:9.5px;text-transform:uppercase;letter-spacing:.07em;
  color:var(--ink-3);margin-top:3px}

.tablero-pie{margin-top:11px;background:var(--surface-2);border:1px solid var(--border);
  border-radius:12px;padding:11px 14px;font-size:12.5px;color:var(--ink-2)}
.tablero-pie b{color:var(--ink);font-weight:700}

/* Las tarjetas llegan en orden, como llegarian los avisos de verdad. Es el
   unico efecto de esta pagina que cuenta algo en vez de decorar. */
.js .op{opacity:0;animation:llega .45s cubic-bezier(.22,.61,.36,1) forwards}
.js .op:nth-child(1){animation-delay:.70s}
.js .op:nth-child(2){animation-delay:1.00s}
.js .op:nth-child(3){animation-delay:1.30s}
@keyframes llega{from{opacity:0;transform:translateY(9px) scale(.98)}
                 to  {opacity:1;transform:none}}

/* ---- cifras reales ---- */
.cifras{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 34px;
  padding:22px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.dato{display:flex;align-items:baseline;gap:9px;padding:4px 0}
/* El filete entre datos, no alrededor de cada uno: separa sin encajonar, y
   desaparece solo cuando se envuelven en un movil. */
.dato + .dato{border-left:1px solid var(--border);padding-left:34px;margin-left:0}
@media (max-width:640px){.dato + .dato{border-left:none;padding-left:0}
  .cifras{flex-direction:column;align-items:flex-start;gap:8px}}
.dato .n{font-size:22px;font-weight:750;letter-spacing:-.03em;color:var(--accent)}
.dato .q{font-size:13.5px;color:var(--ink-2)}

/* ---- planes -------------------------------------------------------------
   La tarjeta de la maqueta (2026-09-19): checks arriba, topes debajo, la
   prueba y el boton. Uno de los planes puede llevar la insignia
   "Recomendado", y en la base como mucho hay uno (indice unico parcial de la
   migracion 0027), asi que aqui no hay nada que desempatar.

   TODAS LAS TARJETAS MIDEN LO MISMO, y eso hay que pedirlo. Con
   `align-items:start` cada una crecia lo que pedia su contenido: Basic tiene
   un check y Pro tiene dos, asi que la fila quedaba escalonada y se veia mal
   -- que es lo que hay que mirar, porque el numero de checks lo decide el
   socio humano desde su panel y va a cambiar. `stretch` (el valor por
   defecto de la rejilla, aqui escrito para que se vea que es a proposito)
   las iguala a la mas alta, y el `margin-top:auto` del boton se come el
   sobrante por abajo: el hueco queda ENTRE la prueba y el boton, no partiendo
   la lista, y los tres botones quedan a la misma altura.

   El `padding-top` es el sitio de la insignia del recomendado, que sale
   media pildora por encima del borde de su tarjeta. Sin el, en la primera
   fila se subiria encima del titulo de la seccion. Va en la rejilla y no en
   la tarjeta: un margen en la tarjeta la desalinearia de las otras dos, que
   es justo lo que se viene a arreglar. */
.planes-grid{display:grid;gap:18px;align-items:stretch;padding-top:20px;
  grid-template-columns:repeat(auto-fit,minmax(255px,1fr))}
.plan-card{position:relative;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:22px;box-shadow:var(--shadow);
  display:flex;flex-direction:column;gap:10px;
  transition:transform .18s ease,border-color .18s ease}
.plan-card:hover{transform:translateY(-3px);border-color:var(--accent)}
.plan-card h3{font-size:18px}

/* EL DIBUJO DE LA TARJETA (migracion 0036). Sale del catalogo de
   iconos-plan.js segun la clave que el operador elige en su panel; un plan
   sin icono no deja hueco, porque no se pinta nada. */
.plan-ico{width:46px;height:46px;flex:none;border-radius:13px;display:grid;
  place-items:center;background:var(--oro-suave);
  border:1px solid var(--oro-borde);margin-bottom:2px}
.plan-ico svg{display:block;width:23px;height:23px;fill:none;
  stroke:var(--oro-texto);stroke-width:1.85;stroke-linecap:round;
  stroke-linejoin:round}
/* En la tarjeta destacada el circulo se invierte: el fondo ya es oro tenue,
   asi que un cuadro oro tenue encima no se distingue de el. */
.plan-card.destacado .plan-ico{background:var(--surface);
  border-color:var(--oro-borde)}

/* "A medida" ocupa el sitio del precio y pesa lo mismo, pero no es una
   cifra: sin `tabular-nums` y algo mas pequeño, para que no se lea como un
   numero borroso al recorrer la fila de tarjetas de reojo. */
.plan-card .precio.a-medida{font-size:24px;letter-spacing:-.025em}

/* El boton del asesor es un <a> y no un <button>: lleva fuera del sitio.
   `.ancho` ya le da el ancho completo; esto le devuelve el centrado que un
   enlace no trae. */
.plan-card a.btn.ancho{display:inline-flex;align-items:center;
  justify-content:center;gap:9px;text-decoration:none}
.plan-card a.btn.ancho:hover{text-decoration:none}
.plan-card a.btn.ancho svg{width:17px;height:17px;flex:none;fill:none;
  stroke:currentColor;stroke-width:1.8;stroke-linecap:round;
  stroke-linejoin:round}
/* El precio "antes", tachado, encima del de verdad (columna precio_antes,
   migracion 0035). Solo sale si el plan lo trae; sin el, la tarjeta queda
   exactamente como estaba.

   <s> y no solo un text-decoration: el tachado ES el mensaje -- "esto ya no
   cuesta esto" -- y un lector de pantalla tiene que poder decirlo. La
   palabra "antes:" va fuera del tachado a proposito: tachar la etiqueta
   ademas del numero es ruido. */
.plan-card .precio-antes{font-size:14px;font-weight:600;color:var(--ink-3);
  margin-bottom:-2px}
.plan-card .precio-antes s{text-decoration-thickness:2px}
/* "ahora:" mas pequeño que la cifra: la cifra es lo que se mira. */
.plan-card .precio .ahora{font-size:14px;font-weight:600;color:var(--ink-3)}
.plan-card .precio{font-size:28px;font-weight:750;letter-spacing:-.02em}
.plan-card .precio small{font-size:13px;font-weight:600;color:var(--ink-3)}
.plan-card .descripcion{font-size:13.5px;color:var(--ink-2)}
.plan-card ul{list-style:none;margin:0;padding:0;display:grid;gap:7px;
  font-size:13.5px;color:var(--ink-2)}

/* Los checks: los escribe el socio humano en su panel, uno por linea.
   El palote va en un SVG y no en un caracter "✓" tecleado dentro del texto
   -- que es como estaban antes, metidos en la descripcion --: asi el color y
   el tamano son los mismos en las tres tarjetas, no dependen de la fuente
   que tenga instalada quien mira, y el lector de pantalla lee la frase sin
   un simbolo suelto por delante. */
.plan-card .checks{margin-top:4px}
.plan-card .checks li{display:flex;align-items:flex-start;gap:8px;line-height:1.4}
/* min-width:0 porque un elemento flex no baja de su contenido por defecto, y
   una palabra kilometrica (una URL pegada en el panel) desbordaba la tarjeta;
   con overflow-x:clip en el documento eso no da scroll, RECORTA el texto
   contra el borde redondeado. Asi se parte. */
.plan-card .checks li span{min-width:0;overflow-wrap:anywhere}
.plan-card .checks svg{flex:none;width:15px;height:15px;margin-top:2px;
  fill:none;stroke:var(--good);stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round}

/* Los dos topes, separados de los checks por un filete: no son ventajas que
   se venden, son los limites del plan, y mezclarlos con los checks hace que
   "Hasta 1 rubro" se lea como una virtud. */
/* El filete SOLO cuando hay checks encima: existe para separarlos de los
   topes, y en un plan sin ninguno acababa separando el precio de los topes
   -- una raya que nadie pidio y que parece un fallo de maquetacion. Un plan
   sin checks es alcanzable: la columna nace vacia y el textarea del panel se
   puede dejar en blanco. */
.plan-card .topes{margin-top:2px}
.plan-card .checks + .topes{padding-top:11px;border-top:1px solid var(--border)}
/* `/ ""` es el texto alternativo del contenido generado: el punto se ve y
   no se lee. Sin el, un lector de pantalla dice "punto medio" delante de
   cada tope -- el mismo simbolo suelto que se quito de los checks. */
.plan-card .topes li::before{content:"·" / "";color:var(--accent);
  font-weight:900;margin-right:8px}

/* La insignia de dias gratis: verde, discreta, y con su propio nombre para no
   chocar con la seccion de cifras de arriba. */
.plan-card .prueba{align-self:flex-start;background:var(--good-bg);color:var(--good);
  border-radius:20px;padding:3px 11px;font-size:12px;font-weight:700}
/* El boton se ancla abajo. Con listas de largo distinto cada tarjeta lo
   dejaba a una altura y la fila se veia torcida. Va en el boton y no en la
   lista porque asi tambien aguanta una tarjeta sin insignia de prueba
   (dias_prueba = 0). */
.plan-card .btn{margin-top:auto}

/* ---- el plan recomendado ----
   Se levanta, se le cambia el borde y se le cuelga la insignia encima. El
   `margin-top` deja sitio para la pildora, que sale fuera de la tarjeta: sin
   el, en la primera fila se comeria el titulo de la seccion.

   El color de la insignia NO es un dorado nuevo: es --warn, el ambar que ya
   usan los plazos en el panel. Una marca mas en la paleta es una marca que
   alguien tiene que mantener. */
/* Sin `margin-top`: lo tenia, para hacerle sitio a la insignia, y era
   justo lo que lo dejaba 14px mas bajo que sus dos vecinos. El sitio lo pone
   ahora el `padding-top` de la rejilla, que no descuadra a nadie. Lo que
   distingue al recomendado es el borde, la sombra y la pildora -- no medir
   distinto. */
.plan-card.destacado{border-color:var(--accent);
  /* var(--shadow) y no el rgba de siempre copiado: ese literal ES el valor
     claro del token, asi que en oscuro el destacado perdia su sombra -- justo
     la tarjeta que mas tiene que destacar. */
  box-shadow:var(--shadow),0 14px 38px color-mix(in srgb,var(--accent) 20%,transparent)}
.plan-card.destacado:hover{border-color:var(--accent)}
.plan-insignia{position:absolute;top:0;left:50%;transform:translate(-50%,-50%);
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  background:var(--ink);color:var(--surface);
  border-radius:20px;padding:5px 13px;font-size:12px;font-weight:700;
  box-shadow:0 4px 14px rgba(2,8,20,.22)}
/* currentColor y no --warn. Medido: el ambar sobre --ink da 3,38:1 en claro
   (pasa raspando) y 1,45:1 en OSCURO, donde la pildora se invierte y queda
   casi blanca -- la medalla desaparecia y quedaba un hueco antes de la
   palabra. --warn esta calibrado para ir sobre --warn-bg, no sobre --ink.
   Heredando el color del texto son 17:1 y 14:1. */
.plan-insignia svg{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* Solo para lectores de pantalla: se lee y no ocupa sitio. `clip-path` y no
   `display:none`, que lo sacaria tambien del arbol de accesibilidad. */
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap}

/* ---- alta ---- */
.alta{max-width:520px;margin:0 auto}
#altaForm{display:grid;gap:14px;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:22px;box-shadow:var(--shadow);margin-top:16px}
.field{display:flex;flex-direction:column;gap:5px}
.field label{font-size:11.5px;font-weight:650;color:var(--ink-2);
  text-transform:uppercase;letter-spacing:.05em}
.field input,.field select{width:100%;padding:11px 12px;border:1px solid var(--border);
  border-radius:10px;background:var(--surface-2);color:var(--ink);font-size:15px;
  font-family:inherit}
.field input:focus,.field select:focus{outline:2px solid var(--foco);
  outline-offset:-1px;border-color:var(--accent)}
.opcional{text-transform:none;letter-spacing:0;color:var(--ink-3);font-weight:500}
.altaerr{background:var(--crit-bg);color:var(--crit);border:1px solid var(--crit);
  border-radius:10px;padding:10px 12px;font-size:13.5px}
.kwnote{font-size:13.5px;color:var(--ink-3);max-width:60ch}

/* ---- el aviso de "revisa tu correo" ----
   Es un <dialog> abierto con showModal(). No hay `.velo` ni z-index: un
   dialogo modal vive en la CAPA SUPERIOR del navegador, por encima de todo
   el documento sin competir con nadie, y su fondo es ::backdrop.

   El centrado tambien es del navegador: la hoja de estilos del agente pone
   `left:0;right:0;margin:auto` e `inset-block:0` para `dialog:modal`, que es
   centrado vertical y horizontal sin transform. Por eso aqui solo se dice el
   ancho. */
.avisoflotante::backdrop{background:rgba(2,8,20,.55);backdrop-filter:blur(2px)}
.avisoflotante{
  width:min(420px,calc(100vw - 32px));
  /* La del agente es calc(100% - 6px - 2em) y recortaria el ancho de arriba
     por unos pocos pixeles en pantallas estrechas. El `width` ya se acota
     solo contra el viewport. */
  max-width:none;
  background:var(--surface);
  /* La hoja del agente pone `color:canvastext` en el dialogo, que GANA al
     color heredado del body. Sin esta linea, en tema oscuro el aviso sale
     con texto negro sobre fondo oscuro. */
  color:var(--ink);
  border:1px solid var(--border);
  border-radius:var(--radius);box-shadow:var(--shadow);
  padding:24px;
  /* La direccion de correo es el CONTENIDO de este aviso: existe para que
     la persona cace la errata antes de ir a buscarlo. A 375px quedan 295px
     de texto, y una direccion de contratacion publica de verdad
     (administracion.contrataciones@corporacionconstructoraandina.com.pe) mide
     mas. Sin esto no parte y el final se pierde por el borde de la pantalla.
     `anywhere` y no `break-word` porque en una direccion no hay donde partir
     por palabras. */
  overflow-wrap:anywhere;
  /* Con el texto al 200% (WCAG 1.4.4) el aviso se sale por arriba y por
     abajo del viewport, y sin esto no hay forma de desplazarlo. */
  max-height:calc(100dvh - 32px);overflow:auto;
  scrollbar-width:thin;scrollbar-color:var(--accent) var(--oro-suave)}
/* EL display SOLO CON [open], y es la misma leccion que la del `hidden`: la
   hoja del agente esconde el dialogo cerrado con `dialog:not([open])
   {display:none}`, que es una regla de AGENTE -- cualquier `display` de aqui
   le gana y el aviso se veria siempre, que es exactamente lo que pasaba con
   el <div> y `[hidden]`. Colgado de [open] no hay nada que ganarle. */
.avisoflotante[open]{display:flex;flex-direction:column;gap:12px}
/* El fondo no se desplaza mientras el aviso esta abierto. `inert` no lo
   impide: hace el contenido inaccesible, no inmovil, asi que con la rueda o
   el dedo la portada seguia rodando por detras. */
body:has(.avisoflotante[open]){overflow:hidden}
.avisoflotante h3{font-size:19px}
.avisoflotante p{font-size:14px;color:var(--ink-2);line-height:1.5}
.avisoflotante .kwnote{font-size:12.5px}
.avisoflotante .btn{margin-top:4px}

/* ---- pie ---- */
footer{view-transition-name:pie;
  border-top:1px solid var(--border);padding:24px 20px;display:flex;
  flex-wrap:wrap;align-items:center;gap:12px;justify-content:center;
  color:var(--ink-3);font-size:13px}
footer img{border-radius:6px;object-fit:contain}
footer img.logo{height:20px;width:auto;border-radius:0}
/* El enlace del pie heredaba el dorado de relleno: 2,18:1 a 13 px. El dorado
   de TEXTO pasa de 4,5:1 en los dos temas (revision 2026-09-29). */
footer a{color:var(--oro-texto);font-weight:650}

/* =========================================================================
   EL REDISENO DE 2026-09-23
   =========================================================================
   Va AL FINAL y en un bloque propio, no repartido por el fichero de arriba,
   y hay un motivo de cascada: todo lo de aqui abajo son reglas que GANAN a
   las de la maqueta anterior con la misma especificidad. Meterlas arriba
   obligaria a subir selectores o a borrar las viejas una por una, y lo
   segundo se lleva por delante los comentarios que explican por que cada
   pieza es como es -- que es justamente lo que este repositorio no quiere
   perder.

   Lo unico que tiene que quedar DEBAJO de esto es el freno de movimiento.
   Si anades una `animation:` o una `transition:` aqui, va ANTES de ese
   bloque o deja de frenarse (test_el_freno_de_movimiento_va_despues_de_lo_
   que_frena). Y si es una animacion nueva, anadela tambien a la lista que
   ese bloque apaga.
   ------------------------------------------------------------------------ */

main{max-width:1240px}
section{padding:72px 0}

/* ---- heroe ---- */
/* Ocupa la pantalla menos la barra, que es pegajosa y mide --top-h.
   Es `min-height` y no `height` a proposito: en pantallas bajas el
   contenido crece y empuja en vez de recortarse. La unidad es `svh`
   y no `vh` porque en movil `vh` mide la ventana SIN la barra del
   navegador, y eso deja el heroe mas alto que lo que se ve. */
.hero{min-height:calc(100svh - var(--top-h));padding:56px 0 40px}

/* El escape vive DESPUES de la regla que escapa, y no es estilo: las dos
   son `.hero`, misma especificidad, asi que gana la ultima. Puesto antes
   -- que es donde estaba -- la media-query no frena nada.
   test_el_escape_de_pantalla_baja_va_despues_del_heroe_a_pantalla_entera. */
/* Pantalla baja (un portatil de 13" con la barra de marcadores, o un movil
   apaisado): el heroe deja de exigir la pantalla entera antes que empujar su
   propio contenido fuera. */
@media (max-height:620px){
  .hero{min-height:auto;padding:32px 0}
}
@media (min-width:900px){.hero{grid-template-columns:.92fr 1.28fr;gap:28px}}

/* El antetitulo, con su raya. La raya es un pseudoelemento y no un guion
   escrito: un "—" dentro del texto lo lee un lector de pantalla, y ahi no
   dice nada. */
.eyebrow{display:flex;align-items:center;gap:16px;font-size:12.5px;
  letter-spacing:.2em;color:var(--ink-2);font-weight:700}
.eyebrow::after{content:"";height:2px;width:46px;flex:none;border-radius:1px;
  background:var(--accent-3)}

.hero h1{font-size:clamp(34px,4.6vw,58px);line-height:1.08;font-weight:800;
  letter-spacing:-.035em;margin:18px 0 0}
/* EL ORO DE LOS TITULARES. Sin ancestro, y eso es lo importante.
   -------------------------------------------------------------------------
   Token APAGADO (--accent, no el oro vivo): en un titular esto es TEXTO
   GRANDE y le basta 3:1, que da 3,66. El oro vivo daria 1,86 -- se leeria
   lavado sobre el blanco justo en la frase que la pagina quiere que te
   lleves.

   Esta regla ha estado ACOTADA POR ANCESTRO dos veces y las dos veces se
   rompio en silencio:
     1. Atada a `.hero`: en /planes el mismo <span class="oro"> salia negro.
        Se arreglo anadiendo `.planes-heroe h1 .oro`.
     2. Esa lista de dos: al escribir los titulares del MCP y de "Como
        funciona" (2026-09-25) el span volvio a no pintar nada. Lo reporto el
        socio humano; ninguna prueba lo vio.
   El fallo no es de ninguna de las dos listas: es de acotar por ancestro una
   clase que existe para pintar. Cada titular nuevo exigia acordarse de venir
   aqui, y no acordarse no rompia nada visible.

   Ahora vale donde se ponga. La condicion que SI hay que respetar -- que el
   trozo sea texto grande, o el 3,66:1 deja de bastar -- la vigila
   test_el_oro_solo_se_usa_en_titulares. */
.oro{color:var(--accent)}
.lead{margin-top:22px;font-size:17.5px;line-height:1.62;color:var(--ink-2);max-width:46ch}
.hero-cta{margin-top:34px;gap:14px}

/* ---- el montaje del heroe, ya como imagen -------------------------------
   Aqui vivian ~150 lineas de portatil, panel y tarjetas flotantes. Lo hace
   ahora un .webp recortado de la maqueta (ver index.html).

   LO QUE IMPORTA DE ESTE BLOQUE NO ES LA IMAGEN, ES QUE NO SE VEA QUE HAY
   UNA. La primera version la puso tal cual y quedo un rectangulo con cuatro
   aristas duras plantado en medio de una pagina blanca: se leia como una
   captura de pantalla pegada, que es exactamente lo que era.

   Tres cosas lo arreglan, y las tres hacen falta:
     1. SANGRA por la derecha hasta pasarse del ancho de la pagina, asi que
        ese borde no existe -- se va fuera.
     2. Las otras tres aristas se DESVANECEN con una mascara. El degradado
        no recorta: hace que los pixeles del borde se vuelvan transparentes,
        y debajo esta el fondo de la pagina. Donde antes habia una linea
        recta ahora hay un final que nadie ve empezar.
     3. El recorte llega al borde de la maqueta por arriba y por la derecha,
        para que lo que se desvanece sea cielo y fondo, no un trozo de
        portatil cortado.

   `mask-composite` combina las dos mascaras QUEDANDOSE CON LO QUE LAS DOS
   dejan pasar. Sin esa palabra, la segunda sustituye a la primera y solo se
   desvanece uno de los dos lados. Va con el prefijo de WebKit al lado
   porque Safari se quedo con la sintaxis vieja (`source-in`), y sin ella
   ahi la imagen sale con sus aristas de siempre. */
.hero-demo{position:relative;padding:0}
/* SIN MASCARA. La version anterior desvanecia tres bordes con un degradado,
   y hacia falta porque la imagen era un RECORTE RECTANGULAR de la maqueta:
   traia consigo el cielo y el fondo, y habia que disimular donde acababan.
   Esta imagen viene ya recortada, con canal alfa: el portatil acaba donde
   acaba el portatil. Un degradado encima solo se comeria su propia esquina.
   (El .png de origen NO traia alfa -- el damero de transparencia venia
   pintado como pixeles grises de verdad. Se quito buscando el patron del
   damero, que alterna dos grises cada 10 px, y quedandose despues con la
   mayor region conectada: el portatil es una sola pieza y todo lo opaco que
   no este pegado a el son motas que el detector dejo.) */
/* El marco lleva la sangria y las tarjetas se posicionan contra EL, no
   contra la columna: la imagen mide mas que su columna, asi que un % medido
   sobre la columna descolocaria las tarjetas justo en las pantallas anchas,
   que es donde se ven. */
.heroe-marco{position:relative;
  /* Nunca mas ancho que el margen que queda hasta el borde de la ventana
     (revision 2026-09-29): con 11vw a secas, a 1366 px las tarjetas
     flotantes se salian ~26 px por la derecha y el recorte cortaba sus
     textos. main mide 1240 px con 20 px de relleno. */
  width:calc(100% + min(11vw, max(0px, (100vw - 1240px) / 2 + 4px)))}
.heroe-img{display:block;height:auto;width:100%}

/* ---- las tres tarjetas flotantes de la maqueta -------------------------
   En HTML y no recortadas de ella: ahi cada una mide unos 250x110 px y a
   ese tamano el texto sale borroso en cuanto se amplia. Aqui es texto de
   verdad, sale de los mismos tokens que el resto de la pagina y no se queda
   vieja el dia que cambie la marca.

   TODAS SUS MEDIDAS SALEN DE --u, una unidad propia, y esto es lo que les
   permite encoger en vez de desaparecer (peticion del socio humano,
   2026-09-24). Antes se ocultaban enteras por debajo de 900 px.

   Se hizo con una variable y no de otras tres formas que parecian mas
   faciles:
     - Con `transform:scale()` bastaria un numero, pero el navegador
       rasteriza el texto a su tamano original y lo estira: en una tarjeta
       cuyo texto ya mide 9 px, eso se ve.
     - Con `em` encadenados, cada hijo multiplica al padre y cambiar el
       tamano de un titulo mueve el de su punto verde.
     - Con px sueltos por cada punto de ruptura habria que tocar veinte
       declaraciones para encoger una tarjeta, y la vigesimoprimera se
       olvida.
   Con --u hay un solo numero por tamano de pantalla y nada compone.

   SIN ANIMACION, a diferencia de la primera version, que las hacia flotar
   en bucle. Nadie la pidio, y una animacion en bucle en la primera pantalla
   se paga dos veces: hay que acordarse de frenarla bajo
   prefers-reduced-motion, y de ponerla donde la prueba que vigila ese freno
   sepa encontrarla.

   Cada <svg> lleva medidas propias. Uno sin ellas mide 300x150 px por
   defecto, que es lo que reviento dos botones el 2026-09-23. */
.flota{--u:1px;position:absolute;z-index:2;background:var(--surface);
  border:1px solid var(--border);
  border-radius:calc(var(--u)*14);padding:calc(var(--u)*11) calc(var(--u)*14);
  box-shadow:0 calc(var(--u)*14) calc(var(--u)*34) calc(var(--u)*-10) rgba(9,20,40,.22)}
.flota .rot{display:block;font-size:calc(var(--u)*11.5);font-weight:650;
  color:var(--ink-2);margin-bottom:calc(var(--u)*4);white-space:nowrap}

/* NINGUNA LLEVA YA UN DESPLAZAMIENTO NEGATIVO, y ese era el fallo de la
   primera colocacion. El marco al que se anclan SANGRA 11vw por la derecha,
   o sea que su borde derecho esta FUERA de la ventana; un `right:-5%` sobre
   el las empujaba todavia mas afuera y se cortaban por la mitad. Con
   valores positivos se miden hacia dentro desde ese mismo borde, que es lo
   unico que garantiza que caigan en pantalla.

   1) Cuanto ha entrado hoy. Arriba a la izquierda, mordiendo la esquina del
      portatil como en la maqueta. */
.flota-hoy{top:4%;left:0}
.flota-hoy .fila{display:flex;align-items:flex-end;gap:calc(var(--u)*9)}
.flota-hoy .n{font-size:calc(var(--u)*31);font-weight:800;letter-spacing:-.04em;
  line-height:.9;color:var(--ink)}
.flota-hoy .sube{font-size:calc(var(--u)*11.5);font-weight:750;color:var(--good);
  padding-bottom:calc(var(--u)*2)}
/* Las barras son divs con altura distinta. Un SVG aqui seria una pieza mas
   que mantener para decir "sube". */
.barritas{display:flex;align-items:flex-end;gap:calc(var(--u)*3);
  height:calc(var(--u)*27);margin-left:calc(var(--u)*5)}
.barritas i{width:calc(var(--u)*5);border-radius:calc(var(--u)*2);
  background:var(--accent-2);display:block}

/* 2) Lo que acaba de entrar. Arriba a la derecha. */
.flota-alerta{top:7%;right:5%;max-width:calc(var(--u)*252);display:flex;
  gap:calc(var(--u)*11);align-items:flex-start}
.flota-alerta .camp{width:calc(var(--u)*31);height:calc(var(--u)*31);flex:none;
  border-radius:50%;display:grid;place-items:center;background:var(--oro-suave)}
.flota-alerta .camp svg{width:calc(var(--u)*16);height:calc(var(--u)*16);
  fill:none;stroke:var(--accent-3);stroke-width:1.9;stroke-linecap:round;
  stroke-linejoin:round}
.flota-alerta .txt{min-width:0}
.flota-alerta .tit{display:flex;align-items:center;gap:calc(var(--u)*8);
  font-size:calc(var(--u)*13);font-weight:750;color:var(--ink)}
.flota-alerta .punto{width:calc(var(--u)*7);height:calc(var(--u)*7);
  border-radius:50%;flex:none;background:var(--good)}
.flota-alerta p{margin:calc(var(--u)*3) 0 0;font-size:calc(var(--u)*11.5);
  line-height:1.45;color:var(--ink-2)}

/* 3) Por donde va lo tuyo. Abajo a la derecha. Ocupa poco mas de la mitad
      del ancho (left:52%) y no dos tercios: con cuatro pasos y cuatro
      palabras cortas, estirarla solo separa los discos entre si y la hace
      parecer una barra de progreso de la pagina en vez de una tarjeta. */
.flota-pasos{bottom:2%;right:5%;left:52%}
.pasos-prop{display:flex;justify-content:space-between;position:relative;
  margin-top:calc(var(--u)*9)}
/* La linea va DETRAS de los discos y de un extremo a otro: partirla en tres
   trozos obligaria a recalcular anchos en cada punto de ruptura. */
.pasos-prop::before{content:"";position:absolute;top:calc(var(--u)*17);
  left:13%;right:13%;height:2px;background:var(--border)}
.pasos-prop .pp{position:relative;z-index:1;display:flex;flex-direction:column;
  align-items:center;gap:calc(var(--u)*7);flex:1}
.pasos-prop .disco{width:calc(var(--u)*35);height:calc(var(--u)*35);
  border-radius:50%;display:grid;place-items:center;background:var(--accent-2);
  border:calc(var(--u)*3) solid var(--surface)}
.pasos-prop .disco svg{width:calc(var(--u)*16);height:calc(var(--u)*16);
  fill:none;stroke:var(--accent-ink);stroke-width:1.9;stroke-linecap:round;
  stroke-linejoin:round}
.pasos-prop .pp:last-child .disco{background:var(--surface-2);
  border-color:var(--surface)}
.pasos-prop .pp:last-child .disco svg{stroke:var(--ink-3)}
.pasos-prop .et{font-size:calc(var(--u)*10.5);font-weight:650;color:var(--ink-2);
  text-align:center;line-height:1.2;white-space:nowrap}

/* Y aqui esta el premio de la unidad: encoger las tres tarjetas es UN numero
   por tamano de pantalla. Dejan de verse enteras solo si el portatil
   tampoco se ve. */
@media (max-width:1100px){
  .flota{--u:.84px}
  .flota-hoy{left:0;top:2%}
  .flota-alerta{right:2%}
  .flota-pasos{right:2%;left:46%}
}
@media (max-width:900px){
  .heroe-marco{width:100%}
  .flota{--u:.72px}
  .flota-pasos{left:40%}
}
@media (max-width:640px){
  .flota{--u:.58px}
  .flota-pasos{left:34%}
}
@media (max-width:420px){
  .flota{--u:.48px}
  .flota-pasos{left:30%}
}


/* ---- la fila de capacidades -------------------------------------------- */
/* Cruza las dos columnas del heroe, que es donde vive ahora. Sin el
   `grid-column` entraria como tercera celda de la rejilla. */
.capacidades{display:grid;gap:26px 30px;padding:8px 0 0;
  grid-column:1/-1;
  grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
.cap{display:grid;grid-template-columns:auto 1fr;gap:4px 13px}
.cap .disco{grid-row:span 2;width:40px;height:40px;border-radius:50%;
  display:grid;place-items:center;background:var(--oro-suave);
  border:1px solid var(--oro-borde)}
.cap .disco svg{width:19px;height:19px;fill:none;stroke:var(--accent-3);
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cap h3{margin:0;font-size:15.5px;font-weight:750;letter-spacing:-.015em;
  color:var(--ink);align-self:center}
.cap p{margin:0;font-size:13.5px;line-height:1.5;color:var(--ink-2)}

/* ---- la franja de cifras ----------------------------------------------- */
.cifras{gap:0;border-top:1px solid var(--border);padding:34px 0 0;margin-top:26px;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  justify-content:initial}
.dato{display:grid;grid-template-columns:auto 1fr;align-items:center;
  gap:2px 14px;padding:4px 26px;border-left:1px solid var(--border)}
.dato:first-child{border-left:0;padding-left:0}
/* La regla de arriba de la maqueta anterior ponia el borde con `.dato + .dato`
   y padding-left fijo. Con la rejilla nueva eso deja la linea a la izquierda
   del primero de cada fila cuando se parte en dos: el borde va en TODOS y se
   le quita al primero, que es lo que aguanta el reflujo. */
.dato + .dato{padding-left:26px;margin-left:0}
.dato .ico-dato{grid-row:span 2;width:34px;height:34px;flex:none}
.dato .ico-dato svg{width:34px;height:34px;fill:none;stroke:var(--accent-3);
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.dato .n{font-size:27px;font-weight:800;letter-spacing:-.035em;color:var(--ink);
  line-height:1.1}
.dato .q{font-size:13px;color:var(--ink-2);line-height:1.35}

/* ---- ARREGLOS DE LA PRIMERA PASADA EN PANTALLA (2026-09-23) -------------

   UN <svg> EN LINEA SIN width/height MIDE 300x150 PX. No es un caso raro:
   es el tamano por defecto que manda la especificacion cuando el elemento
   no lleva medidas ni se las da el CSS, y el viewBox NO cuenta como medida.

   Los dos iconos nuevos de los botones -- la flecha de "Comienza gratis" y
   la persona de "Crear cuenta" -- se quedaron sin regla, salieron a 300x150,
   y dentro de un flex empujaron el texto hasta partirlo en dos lineas. El
   boton de la barra crecio tanto que se salio de la barra.

   Por eso la regla va sobre `.btn svg` y no sobre las dos clases sueltas:
   el siguiente icono que alguien meta en un boton ya nace con medidas. Una
   regla por clase habria arreglado estos dos y dejado la trampa puesta.

   Y no se ve en ningun test ni en ningun error: el HTML es valido, el CSS es
   valido, la suite pasa entera. Solo se ve mirando la pantalla. */
.btn svg{width:19px;height:19px;flex:none;fill:none;stroke:currentColor;
  stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
/* El disco del play es la excepcion: ahi el triangulo va RELLENO y mas
   pequeno, dentro de su circulo. Va despues para ganar a la de arriba. */
.btn .play svg{width:12px;height:12px;fill:var(--accent-ink);stroke:none}
/* Ni un boton parte su texto en dos lineas. Si no cabe, lo que sobra es
   sitio -- y eso se arregla en el contenedor, no dejando que la etiqueta se
   rompa por la mitad. */
.btn{white-space:nowrap}

/* La barra: la marca y los controles no se encogen, los enlaces del medio
   si. Sin esto los tres competian por el ancho y el que cedia era el boton
   de la derecha, que es el que no puede ceder. */
.topbar .brand{flex:none}
.topbar nav:not(.navlinks){flex:none}

/* Rejilla: una columna de `1fr` NO baja de su ancho minimo de contenido, asi
   que sin esto la del portatil empuja a la otra y se desborda por la
   derecha. `min-width:0` es lo que le da permiso a encogerse. */
.hero-copy,.hero-demo{min-width:0}

/* ---- el portatil, afinado ---- */
/* Mas marco abajo que arriba: es donde esta la barbilla en un portatil de
   verdad, y sin ella el marco se lee como un borde y no como un aparato. */
.portatil{padding:12px 12px 22px}
/* La muesca de la camara. Dos pixeles que hacen que el marco se lea. */
.portatil::before{content:"";position:absolute;top:5px;left:50%;
  transform:translateX(-50%);width:34px;height:3px;border-radius:2px;
  background:color-mix(in srgb,#fff 16%,transparent)}
/* La base, mas ancha y mas plana: antes era un pico estrecho que parecia un
   error de dibujo. */
.portatil::after{border-bottom-width:9px;border-left-width:58px;
  border-right-width:58px}

/* Aqui habia OTRO juego de posiciones para .flota-hoy, .flota-alerta y
   .flota-pasos, sobrante de cuando el portatil se dibujaba en HTML. No
   estorbaba: ganaba.

   Las reglas de verdad estan varios cientos de lineas mas arriba, y estas
   venian DESPUES: misma especificidad, gana la ultima. O sea que colocar
   las tarjetas alli no hacia absolutamente nada, y las tres seguian con los
   desplazamientos negativos de esta copia -- que era justo lo que las
   sacaba de la pantalla por la derecha.

   El aviso, porque esto vuelve a pasar: cuando una pieza se rehace, lo que
   hay que buscar no son sus elementos en el HTML (esos ya no estan y no
   fallan), sino sus SELECTORES en la hoja. Un selector huerfano no da error
   ni sale en ningun test; el dia que alguien vuelva a usar ese nombre, se
   encuentra con reglas que no escribio ganando a las suyas. */

/* ---- EL PORTATIL EN PERSPECTIVA (segunda pasada, 2026-09-24) ------------
   La maqueta no ensena el portatil de frente: lo ensena girado, como un
   objeto que esta sobre una mesa. De frente se lee como una captura de
   pantalla con un borde; girado se lee como un aparato, que es lo que hace
   que la pagina parezca un producto y no una plantilla.

   Se gira el MARCO y no el bloque entero a proposito: las tres tarjetas
   flotantes son hermanas, no hijas, asi que se quedan planas y encima. Es
   justo el efecto de la maqueta -- el aparato en perspectiva, las tarjetas
   de la interfaz flotando de frente sobre el.

   Angulos cortos (9 grados) y no los 20 que pediria el dibujo: el texto de
   dentro es texto de verdad, y a partir de ahi el navegador lo rasteriza
   girado y se ve sucio. La maqueta puede permitirselo porque es una imagen;
   esto no lo es. */
.hero-demo{perspective:2000px}
.portatil{transform:rotateY(-9deg) rotateX(2.5deg) rotateZ(-.8deg);
  transform-origin:70% 50%;
  box-shadow:-28px 34px 70px -22px rgba(9,20,40,.48),
             0 2px 0 rgba(255,255,255,.12) inset}
/* La base del portatil: el trapecio de antes era un pico. Esto es la bandeja
   del teclado, mas ancha por delante que por detras, con la misma
   inclinacion que la tapa para que las dos piezas parezcan una. */
.portatil::after{content:"";position:absolute;left:-3%;right:-3%;top:100%;
  width:auto;height:14px;border:0;border-radius:0 0 12px 12px;
  background:linear-gradient(180deg,var(--navy-2),#0c1526);
  clip-path:polygon(2.5% 0,97.5% 0,100% 100%,0 100%);
  filter:drop-shadow(0 12px 16px rgba(9,20,40,.3))}
/* La muesca del cierre, en el centro de la bandeja. */
.portatil-base-muesca{position:absolute;left:50%;top:calc(100% + 1px);
  transform:translateX(-50%);width:66px;height:4px;border-radius:0 0 5px 5px;
  background:rgba(255,255,255,.10);z-index:1}

/* ---- el fondo del heroe: la cuna angular de la maqueta ------------------
   La maqueta pone detras del portatil una cuna dorada que baja desde la
   esquina y un circulo crema grande. Los discos que habia eran redondos y
   suaves; esto tiene aristas, que es lo que le da el aire de la maqueta.
   Van en el mismo elemento que ya existia para no anadir mas capas que
   pintar al desplazar. */
.hero-demo::before{content:"";position:absolute;z-index:-1;pointer-events:none;
  top:-16%;right:-34vw;width:70vw;height:126%;
  background:linear-gradient(200deg,
    color-mix(in srgb,var(--accent-2) 34%,transparent) 0%,
    color-mix(in srgb,var(--accent-2) 14%,transparent) 44%,
    transparent 72%);
  clip-path:polygon(28% 0,100% 0,100% 100%,0 100%)}

/* ---- la cabecera del panel ---- */
.mini-campana{position:relative;flex:none;color:var(--ink-3)}
.mini-campana svg{width:14px;height:14px;fill:none;stroke:currentColor;
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;display:block}
.mini-campana i{position:absolute;top:0;right:0;width:5px;height:5px;
  border-radius:50%;background:var(--crit)}
.mini-titulo{display:flex;align-items:baseline;justify-content:space-between;
  gap:10px;margin-top:2px}
.mini-titulo b{font-size:13.5px;font-weight:780;letter-spacing:-.02em;color:var(--ink)}
.vertodas{font-size:10px;font-weight:650;color:var(--ink-3);flex:none}

/* ---- las tarjetas de oportunidad ----
   Una tarjeta por convocatoria, no una fila: la maqueta las separa porque
   cada una lleva cuatro datos de tres clases distintas -- que es, de que
   entidad, cuanto vale y cuanto queda -- y en una fila eso se lee como una
   lista de la compra. */
.oport{background:none;border:0;box-shadow:none;padding:0;gap:8px}
.op{display:block;background:var(--surface);border:1px solid var(--border);
  border-radius:10px;padding:9px 11px 8px}
.op-cab{display:flex;align-items:center;justify-content:space-between;gap:8px}
.op-tag{font-size:7.5px;font-weight:800;letter-spacing:.07em;
  border-radius:4px;padding:2px 5px;line-height:1.35}
/* Los tres estados del CRM, con los mismos colores de estado que ya usa el
   resto del producto -- info, bueno, aviso -- y no tres colores nuevos. */
.t-conv{background:var(--info-bg);color:var(--info)}
.t-eval{background:var(--good-bg);color:var(--good)}
.t-nuevo{background:var(--warn-bg);color:var(--warn)}
.op-marca{flex:none;color:var(--ink-3)}
.op-marca svg{width:11px;height:11px;fill:none;stroke:currentColor;
  stroke-width:1.8;stroke-linejoin:round;display:block}
.op-tit{margin:5px 0 0;font-size:10.5px;font-weight:720;line-height:1.3;
  color:var(--ink)}
.op-ent{margin:2px 0 0;font-size:9.5px;color:var(--ink-2)}
.op-pie{display:flex;align-items:flex-end;justify-content:space-between;
  gap:8px;margin-top:6px}
.op-cod{font-size:8.5px;color:var(--ink-3);background:var(--surface-2);
  border-radius:4px;padding:2px 5px;font-family:var(--mono)}
.op-val{display:flex;flex-direction:column;align-items:flex-end;margin-left:auto}
.op-val b{font-size:11.5px;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.op-val i{font-style:normal;font-size:7.5px;color:var(--ink-3)}
.op-cierre{font-size:8.5px;color:var(--ink-3);flex:none}
.op-cierre b{color:var(--ink-2);font-weight:750}

/* ---- sombra de marca en las tarjetas de plan y en los pasos ------------- */
.plan-card.destacado{border-color:var(--accent-2);
  box-shadow:0 14px 40px -14px color-mix(in srgb,var(--accent-2) 55%,transparent)}
.plan-insignia{background:var(--accent-2);color:var(--accent-ink)}

/* =========================================================================
   LA PAGINA DE SOLUCIONES (/soluciones, 2026-09-24)
   =========================================================================
   Vive en esta MISMA hoja y no en una propia, y es una decision con coste:
   quien solo abre la portada se descarga tambien estos estilos. Se acepta
   porque el reparto real es otro -- las dos paginas comparten barra, menu,
   botones, tipografia, tokens y pie, que es la mayor parte del fichero -- y
   partirlo en dos obligaria a mantener DOS numeros de version y a acordarse
   de subir los dos. El repositorio ya tiene una prueba que existe solo
   porque alguien se olvido de subir uno.
   ------------------------------------------------------------------------ */

/* El heroe de /soluciones ocupa la pantalla, y las cinco tarjetas van
   DENTRO de el (2026-09-25). Antes era al reves: el heroe no pedia la
   pantalla para no esconder las tarjetas bajo el pliegue. Metidas dentro,
   ese reparo desaparece -- son la parte de abajo de la misma pantalla.

   El escape de pantalla baja va JUSTO DETRAS, y no es estilo: `.hero-sol` y
   el `.hero` del escape general tienen la misma especificidad y gana la que
   va ultima. Como esta regla va despues de aquel escape, sin uno propio en
   un portatil bajo el heroe seguiria exigiendo la pantalla entera. */
.hero-sol{min-height:calc(100svh - var(--top-h));padding:32px 0 28px;
  align-content:center}
@media (max-height:620px){
  .hero-sol{min-height:auto;padding:32px 0}
}

/* ---- las cinco tarjetas ----
   Cada una con su color, como en la maqueta, y los cinco salen de los
   tokens de estado que el producto ya usa (info, aviso, bueno, critico) mas
   uno para la cuarta. Asi el tema oscuro los apaga solos, sin una segunda
   tabla de colores que mantener. */
/* Cruza las dos columnas del heroe, donde vive ahora. Sin relleno inferior:
   ya no es una seccion, y el que queda lo pone el heroe. */
.soluciones{display:grid;gap:16px;padding:8px 0 0;grid-column:1/-1;
  grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
.sol{--t:var(--info);--tbg:var(--info-bg);
  display:flex;flex-direction:column;gap:9px;
  background:color-mix(in srgb,var(--tbg) 55%,var(--surface));
  border:1px solid color-mix(in srgb,var(--t) 16%,transparent);
  border-radius:16px;padding:20px}
.s-busca{--t:var(--info);--tbg:var(--info-bg)}
.s-bases{--t:var(--warn);--tbg:var(--warn-bg)}
.s-alertas{--t:var(--good);--tbg:var(--good-bg)}
/* El morado es el unico que no estaba: las cuatro familias de estado del
   producto son info, aviso, bueno y critico, y aqui hacen falta cinco. Se
   declara aqui y no como token global a proposito -- fuera de estas
   tarjetas no significa nada, y un token de marca que no quiere decir nada
   es el que acaba pintando un boton. */
.s-propuestas{--t:#6d4aff;--tbg:#efeaff}
.s-reportes{--t:var(--crit);--tbg:var(--crit-bg)}
:root[data-theme="dark"] .s-propuestas{--t:#a58cff;--tbg:#1e1740}

.sol-ico{width:46px;height:46px;border-radius:13px;display:grid;
  place-items:center;background:var(--surface);
  box-shadow:0 2px 8px rgba(9,20,40,.07)}
.sol-ico svg{width:22px;height:22px;fill:none;stroke:var(--t);
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.sol h2{font-size:16.5px;font-weight:780;letter-spacing:-.02em;
  color:var(--ink);margin:6px 0 0}
.sol p{margin:0;font-size:13.5px;line-height:1.5;color:var(--ink-2)}


/* ---- el detalle de una solucion ----
   Tres columnas en pantalla ancha: lo que es, como se ve, para que sirve.
   La del medio es la mas ancha porque es la que hay que mirar. */
.sol-detalle{display:grid;gap:30px;padding:56px 0;align-items:center}
@media (min-width:1080px){
  .sol-detalle{grid-template-columns:.82fr 1.35fr .83fr;gap:26px}
}
.sol-txt h2{font-size:clamp(25px,3vw,33px);line-height:1.12;font-weight:800;
  letter-spacing:-.03em;margin:14px 0 0;color:var(--ink)}
.sol-txt .lead{font-size:15.5px;margin-top:16px;max-width:40ch}
.sol-txt .btn{margin-top:24px}

/* La maqueta del buscador, en HTML. Su texto es texto: se ve nitido a
   cualquier densidad y sigue al tema oscuro sin una segunda imagen. */
.buscador{background:var(--surface);border:1px solid var(--border);
  border-radius:18px;box-shadow:0 20px 50px -20px rgba(9,20,40,.24);
  padding:14px;font-size:12px}
.busc-cab{display:flex;gap:10px;align-items:center;margin-bottom:12px}
.busc-campo{flex:1;display:flex;align-items:center;gap:9px;min-width:0;
  padding:9px 13px;border:1px solid var(--border);border-radius:10px;
  background:var(--surface-2);color:var(--ink-3);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.busc-campo svg{width:13px;height:13px;flex:none;fill:none;
  stroke:currentColor;stroke-width:2}
.busc-btn{flex:none;padding:9px 20px;border-radius:10px;background:var(--navy);
  color:var(--navy-ink);font-weight:700}
.busc-cuerpo{display:grid;grid-template-columns:145px 1fr;gap:12px}
.busc-filtros{display:flex;flex-direction:column;gap:7px}
/* DESPUES de la regla base (revision 2026-09-29): antes iba delante, la base
   la anulaba, los filtros se seguian viendo y la Solucion 01 medía 411 px en
   una pista de 320 -- el boton Buscar y los importes salian cortados. */
@media (max-width:620px){.busc-cuerpo{grid-template-columns:1fr}
  .busc-filtros{display:none}}
.busc-tit{margin:0 0 3px;font-weight:750;color:var(--ink)}
.busc-filtros label{display:flex;flex-direction:column;gap:4px;
  font-size:10.5px;color:var(--ink-2);font-weight:600}
.busc-sel{padding:7px 9px;border:1px solid var(--border);border-radius:8px;
  background:var(--surface);color:var(--ink-3);font-weight:500}
/* El deslizador del monto: la barra, el tramo elegido y los dos tiradores.
   Tres divs y ni un SVG -- lo unico que tiene que decir es "hay un rango". */
.busc-rango{position:relative;display:block;height:4px;border-radius:2px;
  background:var(--border);margin:6px 2px 0}
.busc-rango i{position:absolute;left:8%;right:30%;top:0;bottom:0;
  border-radius:2px;background:var(--accent-2)}
.busc-rango b{position:absolute;top:50%;width:12px;height:12px;
  transform:translate(-50%,-50%);border-radius:50%;background:var(--surface);
  border:3px solid var(--accent-2)}
.busc-rango b:first-of-type{left:8%}
.busc-rango b:last-of-type{left:70%}
.busc-rango-txt{font-size:10px;color:var(--ink-3);text-align:center;
  display:block;margin-top:5px}

.busc-res-cab{display:flex;align-items:center;justify-content:space-between;
  gap:10px;margin-bottom:8px}
.busc-res-cab b{font-size:13px;color:var(--ink)}
.busc-orden{font-size:10.5px;color:var(--ink-3);border:1px solid var(--border);
  border-radius:8px;padding:5px 9px}
.busc-lista{list-style:none;margin:0;padding:0;display:flex;
  flex-direction:column;gap:8px}
.busc-lista li{display:flex;gap:10px;align-items:flex-start;
  border:1px solid var(--border);border-radius:11px;padding:9px 11px}
.busc-ico{width:30px;height:30px;flex:none;border-radius:9px;display:grid;
  place-items:center}
.busc-ico svg{width:15px;height:15px;fill:none;stroke:currentColor;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.i-azul{background:var(--info-bg);color:var(--info)}
.i-verde{background:var(--good-bg);color:var(--good)}
.i-rojo{background:var(--crit-bg);color:var(--crit)}
.busc-cuerpo-op{flex:1;min-width:0}
.busc-op-tit{margin:4px 0 0;font-size:12px;font-weight:720;line-height:1.3;
  color:var(--ink)}
.busc-op-ent{margin:2px 0 0;font-size:10.5px;color:var(--ink-2)}
.busc-op-cod{display:inline-block;margin-top:5px;font-size:9px;
  font-family:var(--mono);color:var(--ink-3);background:var(--surface-2);
  border-radius:4px;padding:2px 6px}
.busc-op-val{flex:none;text-align:right;display:flex;flex-direction:column;
  gap:1px}
.busc-op-val b{font-size:12.5px;font-weight:800;letter-spacing:-.02em;
  color:var(--ink)}
.busc-op-val i{font-style:normal;font-size:9.5px;color:var(--ink-3)}
.busc-op-cierre{font-size:9px;color:var(--ink-3);margin-top:3px}

/* ---- las cuatro ventajas ---- */
.ventajas{list-style:none;margin:0;padding:0;display:flex;
  flex-direction:column;gap:22px}
.ventajas li{display:flex;gap:14px;align-items:flex-start}
.vent-ico{width:42px;height:42px;flex:none;border-radius:50%;display:grid;
  place-items:center;background:var(--oro-suave);
  border:1px solid var(--oro-borde)}
.vent-ico svg{width:20px;height:20px;fill:none;stroke:var(--accent-3);
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ventajas b{display:block;font-size:15px;font-weight:750;color:var(--ink);
  letter-spacing:-.015em}
.ventajas p{margin:3px 0 0;font-size:13.5px;line-height:1.5;color:var(--ink-2)}

/* ---- el boton del tema, dentro del panel ---------------------------------
   Aqui abajo, y con `.topbar .menu` delante, porque tiene que ganarle al
   bloque de 560 px, que esconde la etiqueta para la barra estrecha.
   (Este bloque llevaba tambien un parche para los enlaces del panel. Se
   fue cuando se arreglo la causa: esta explicado en el bloque de .navlinks,
   arriba del todo.) */
@media (max-width:1100px){
  /* La etiqueta del boton del tema. La escondia el bloque de 560 px --
     escrito para la barra, donde compite por el ancho con "Entrar" -- y en
     el panel dejaba una pildora ancha con una luna dentro y nada mas. Aqui
     hay sitio de sobra. */
  .topbar .menu .temabtn{justify-content:flex-start}
  .topbar .menu .temabtn .lbl{position:static;width:auto;height:auto;
    margin:0;clip-path:none;overflow:visible;white-space:nowrap}
}

/* ---- menos movimiento ---------------------------------------------------
   Quien lo pidio en su sistema lo pidio por algo. Se queda el estado final,
   no el camino -- y se queda VISIBLE, que es lo que importa.

   VA AL FINAL DEL FICHERO, Y ESO NO ES ORDEN NI ESTILO. Estaba arriba del
   todo, junto a las animaciones que declara frenar, y con la MISMA
   especificidad gana la regla que viene despues: el disco del heroe seguia
   latiendo en bucle, las tarjetas seguian entrando escalonadas y la barra
   seguia encogiendo con transicion. Tres de las cuatro no hacian nada, y
   nadie lo veia porque la unica que si funcionaba -- la de los iconos -- es
   la unica que ya estaba detras de las suyas.

   Si algun dia se anade una animacion por debajo de esta linea, este bloque
   deja de frenarla. La prueba de test_portada.py lo vigila comparando la
   posicion de este bloque con la de la ultima `animation:` del fichero. */
/* =========================================================================
   LA PAGINA DE PLANES (/planes, 2026-09-24)
   =========================================================================
   Misma hoja que la portada y /soluciones, por el mismo motivo escrito
   arriba: las tres comparten barra, menu, botones, tipografia, tokens y
   pie, que es la mayor parte del fichero.

   Lo que esta pagina NO trae, y es deliberado: el conmutador
   Mensual / Anual de la maqueta. El catalogo solo guarda `precio_mensual`
   -- no hay ninguna tarifa anual que ensenar -- y el fondo con la foto del
   Congreso, que no esta en el repositorio. El motivo largo, en planes.html.
   ------------------------------------------------------------------------ */

/* ---- el titular ----
   Dos columnas en pantalla ancha: el mensaje a la izquierda y las tres
   garantias a la derecha, que es donde la maqueta pone la foto. Debajo
   estan las tarjetas, que son el motivo de entrar aqui, asi que este bloque
   no pide la pantalla entera -- mismo criterio que el heroe de
   /soluciones. */
.planes-heroe{display:grid;gap:30px 40px;padding:40px 0 24px;
  align-items:center;
  /* Lo que `.hero` trae y aqui estorba. `min-height` le pide la pantalla
     entera, y debajo estan las tarjetas, que son el motivo de entrar aqui.
     `grid-template-columns` se desactiva porque .hero la fija a dos columnas
     a partir de 900px y esta seccion no las quiere hasta 1080: entre medias
     saldria un titular estrecho al lado de tres garantias apretadas. Las dos
     reglas van DESPUES de .hero en el fichero, que es lo que las hace
     valer. */
  min-height:auto;grid-template-columns:1fr}
/* Dos columnas solo cuando la de la derecha da para las tres garantias en
   fila. Con el reparto de antes (1,15 / 0,85) la tercera bajaba de linea y
   quedaba una fila de dos y una de una, que es peor que las tres debajo. */
@media (min-width:1080px){
  .planes-heroe{grid-template-columns:1.05fr 1fr;align-items:center}
}
/* SIN REGLA PROPIA PARA EL <h1> NI PARA EL .lead, y es deliberado.
   Tenian una -- 30-46px y margen cero -- y por eso el titular de esta
   pagina salia mas pequeño y mas pegado al antetitulo que los de / y
   /soluciones, que comparten `.hero h1` (34-58px, margen 18px arriba).
   Borrarlas es mas fuerte que copiar sus numeros: dos reglas con los mismos
   valores se separan en cuanto alguien toque una, y aqui la seccion ya
   lleva la clase `hero`. Lo unico que queda debajo es lo que de verdad
   distingue a esta pagina del resto. */

/* Las tres garantias, EN FILA y separadas por un filete vertical -- que es
   como estan en la maqueta. Estuvieron apiladas en vertical un rato y no era
   lo mismo: en fila se leen de un vistazo como tres sellos de confianza, y
   en columna se leen como una lista de tres cosas que hay que ir leyendo.

   El filete es un borde del hermano y no un elemento: asi el ultimo no lo
   lleva sin tener que marcarlo en el HTML.

   `flex:1 1 0` con `min-width`: las tres columnas miden IGUAL mientras
   quepan, y cuando dejan de caber la tercera baja de linea en vez de
   aplastar a las otras dos. */
/* SOBRE UNA TARJETA, y no sueltas sobre el fondo. Los discos dorados del
   heroe pasan justo por aqui, y medido sobre el mas cargado de ellos
   (#efd7a4) esto es lo que quedaba:

     subtitulo (--ink-3)      3,14:1  -- WCAG 1.4.3 pide 4,5:1
     circulo del icono        1,28:1  -- o sea, invisible

   El titulo aguantaba (13,3:1) porque es casi negro; lo demas no. Una
   tarjeta de --surface devuelve a cada pieza el contraste con el que se
   diseño, y de paso separa las tres garantias del titular, que es lo que
   hace que se lean como un bloque y no como texto flotando.

   La sombra, muy abierta y muy tenue: levanta la tarjeta del fondo lo justo
   para que no parezca un recorte pegado encima. */
.ph-garantias{list-style:none;margin:0;
  display:flex;flex-wrap:wrap;align-items:stretch;
  background:var(--surface);border:1px solid var(--border);
  border-radius:18px;padding:12px 6px;
  box-shadow:0 18px 40px -26px rgba(9,20,40,.42)}
.ph-garantias li{flex:1 1 0;min-width:150px;
  display:flex;align-items:center;gap:11px;padding:2px 14px}
.ph-garantias li + li{border-left:1px solid var(--border)}

/* En un telefono la fila no cabe de ninguna manera: tres columnas de 158px
   son 474, y ahi la pantalla mide 360. Se apilan, y el filete pasa a ser
   horizontal -- un borde izquierdo en una lista vertical deja tres rayitas
   sueltas a la izquierda que no separan nada. */
@media (max-width:620px){
  .ph-garantias{display:grid;gap:0;padding:6px 14px}
  .ph-garantias li{padding:13px 0}
  .ph-garantias li + li{border-left:none;border-top:1px solid var(--border)}
}

.ph-ico{width:38px;height:38px;flex:none;border-radius:50%;display:grid;
  place-items:center;background:var(--oro-suave);
  border:1px solid var(--oro-borde)}
/* `display:block` en el <svg>: sin el es un elemento en linea y se apoya en
   la linea base del texto, que en una caja sin texto deja un hueco debajo y
   sube el dibujo unos pixeles. Con display:grid en el padre normalmente no
   pasa -- el hijo se convierte en bloque --, pero escribirlo cuesta una
   palabra y quita la duda para siempre.
   El trazo en el oro OSCURO y no en el de la marca: sobre el relleno palido
   del circulo, --accent-3 da 1,9:1 y un dibujo de linea fina a ese contraste
   se ve como una mancha clara. Este da 5,2:1, y el circulo sigue dorado. */
.ph-ico svg{display:block;width:19px;height:19px;fill:none;
  stroke:var(--oro-texto);stroke-width:1.9;stroke-linecap:round;
  stroke-linejoin:round}
.ph-garantias b{display:block;font-size:13.5px;font-weight:750;color:var(--ink);
  letter-spacing:-.015em;line-height:1.25}
/* `li > div span` y NO `.ph-garantias span`, que es lo que habia.
   El circulo del icono TAMBIEN es un <span> dentro de .ph-garantias, asi
   que aquella regla le llegaba -- y con mas especificidad (0,1,1 contra el
   0,1,0 de `.ph-ico`). Le ponia `display:block`, y sin rejilla el
   `place-items:center` del circulo no hace nada: el <svg> se iba a la
   esquina de arriba a la izquierda de sus 38px. Se veia como un icono
   descentrado, que es lo que parecia -- y no lo estaba el dibujo, lo estaba
   la caja.
   El `> div` deja fuera al circulo, que cuelga directamente del <li>. */
/* --ink-2 y no --ink-3. Medido sobre la tarjeta blanca, --ink-3 da 4,42:1
   -- por debajo del 4,5:1 de WCAG 1.4.3, y esto es texto de 11,5px, de lo
   mas pequeño de la pagina. --ink-2 da 7,0:1. El gris claro valia cuando
   este texto era una nota al pie; aqui es la mitad de lo que dice cada
   garantia. */
.ph-garantias li > div span{display:block;font-size:11.5px;color:var(--ink-2);
  margin-top:3px;line-height:1.3}

/* Sin el relleno de arriba de `section`: el titular ya deja aire, y con los
   64px de la regla general las tarjetas caian fuera de la primera pantalla
   en un portatil -- que es exactamente lo que nadie quiere de una pagina de
   precios. */
.planes-sec{padding-top:0}

/* ---- la comparativa y las cifras, en la misma fila ----
   Tres cuartos para la tabla y el cuarto restante para las cifras, en
   vertical (peticion del socio humano, 2026-09-24).

   `3fr 1fr` y no `75% 25%`: con porcentajes, el `gap` se suma POR ENCIMA del
   100% y la fila se sale del contenedor. Con `fr` el hueco se descuenta
   antes de repartir, que es lo que hace que la suma cuadre siempre.

   SIN `align-items`, o sea estirando: la caja de cifras mide lo mismo que
   la tabla de al lado (peticion del socio humano, 2026-09-24). Las dos
   columnas acaban a la misma altura y la fila se lee como un solo bloque en
   vez de como una tabla con una nota flotando arriba a la derecha.

   Lo que manda es el alto de la TABLA, y por eso el <h2> esta fuera de su
   columna: dentro, la izquierda mediria titulo + tabla y la caja se
   estiraria hasta ahi, quedando mas alta que aquello que acompaña.

   Dos columnas solo a partir de 1000px. Por debajo, la tabla ya necesita
   560px de ancho minimo para no aplastar las columnas, y un cuarto de 900px
   son 225: la caja de cifras saldria con el texto en columnas de dos
   palabras. */
.compara-fila{display:grid;gap:26px}
/* `min-width:0` en las dos columnas. Un hijo de rejilla nace con
   `min-width:auto`, o sea "no te encojas por debajo de tu contenido", y el
   contenido de la izquierda es una tabla de 560px de ancho minimo: sin esta
   linea la columna se niega a encoger y empuja la fila entera a lo ancho de
   la pagina. Es el mismo arreglo que ya lleva `.hero-copy,.hero-demo` en
   este fichero, por el mismo motivo. */
.compara-fila > *{min-width:0}
@media (min-width:1000px){
  .compara-fila{grid-template-columns:3fr 1fr}
  /* El titulo, cruzando las dos columnas. */
  .compara-fila > h2{grid-column:1/-1}
}
/* El <h2> ya no cuelga de un <section>, asi que la regla general no le
   llega. Es el mismo tamano, escrito donde ahora hace falta. El margen de
   abajo lo pone el `gap` de la rejilla, no el titulo. */
.compara-fila > h2{font-size:26px;margin:0}

/* Las cifras, en columna y dentro de una caja. La franja de la portada es
   horizontal y con filete a la izquierda entre datos; aqui el filete pasa a
   ser horizontal -- un borde izquierdo en una lista vertical deja tres
   rayitas sueltas que no separan nada -- y la caja les da el mismo peso que
   la tabla de al lado. */
.cifras-col{display:grid;grid-template-columns:1fr;gap:0;
  margin:0;padding:0;border:1px solid var(--border);border-radius:16px;
  background:var(--surface);
  /* Tres franjas iguales que reparten el alto que les da la tabla. Sin
     esto, los tres datos se apilan arriba y el resto de la caja queda
     vacio -- que es peor que no estirarla. */
  grid-template-rows:repeat(3,1fr)}
.cifras-col .dato{padding:16px 18px;border-left:0;
  grid-template-columns:auto 1fr;gap:2px 13px;
  /* Centrado dentro de su franja: los textos miden una o dos lineas y sin
     esto el de una linea se queda pegado arriba de su tercio. */
  align-content:center}
.cifras-col .dato + .dato{padding-left:18px;
  border-top:1px solid var(--border)}
.cifras-col .dato:first-child{padding-left:18px}
/* Algo mas pequeño que en la portada: ahi la franja ocupa el ancho entero y
   aqui vive en un cuarto de el. */
.cifras-col .dato .ico-dato,
.cifras-col .dato .ico-dato svg{width:28px;height:28px}
.cifras-col .dato .n{font-size:23px}
.cifras-col .dato .q{font-size:12.5px}

/* ---- la comparativa ----
   Envoltorio con scroll horizontal: con cinco planes publicados la tabla no
   cabe en un telefono, y sin esto empuja la pagina entera a lo ancho. El
   `min-width` la mantiene legible dentro del envoltorio en vez de
   aplastarle las columnas. */
.compara-caja{overflow-x:auto;scrollbar-width:thin;scrollbar-color:var(--accent) var(--oro-suave);border:1px solid var(--border);
  border-radius:16px;background:var(--surface)}
.compara-tabla{width:100%;min-width:560px;border-collapse:collapse;
  font-size:13.5px}
.compara-tabla th,.compara-tabla td{padding:12px 16px;text-align:center;
  border-bottom:1px solid var(--border);vertical-align:middle}
.compara-tabla tbody tr:last-child th,
.compara-tabla tbody tr:last-child td{border-bottom:none}
/* La primera columna, a la izquierda y pegada: es la que dice DE QUE habla
   cada fila, y al desplazar la tabla a lo ancho es lo primero que se pierde.
   Con el fondo puesto, porque una celda pegada y transparente deja pasar por
   debajo lo que se desplaza. */
.compara-tabla thead th:first-child,
.compara-tabla tbody th{position:sticky;left:0;z-index:1;
  text-align:left;font-weight:650;color:var(--ink-2);
  background:var(--surface);max-width:280px}
.compara-tabla thead th{background:var(--surface-2);font-weight:750;
  color:var(--ink);font-size:13px;white-space:nowrap}
.compara-tabla thead th:first-child{background:var(--surface-2)}
/* La columna del plan recomendado, con el mismo oro tenue que su tarjeta:
   quien baja desde las tarjetas sigue la misma columna sin volver a leer
   los nombres. */
.compara-tabla .destacada{background:var(--oro-suave)}
.compara-tabla thead th.destacada{background:var(--oro-borde)}
.marca{display:inline-grid;place-items:center;font-weight:700;font-size:15px}
.marca.si{color:var(--good)}
.marca.si svg{width:17px;height:17px;fill:none;stroke:currentColor;
  stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.marca.no{color:var(--ink-3)}

/* ---- las preguntas ----
   <details> del navegador: el abrir y cerrar, el teclado, el foco y el
   Ctrl+F dentro de una respuesta cerrada vienen dados. Un acordeon de
   JavaScript pierde las cuatro cosas. */
.preg-lista{display:grid;gap:10px;max-width:820px}
.preg-lista details{border:1px solid var(--border);border-radius:14px;
  background:var(--surface);overflow:hidden}
.preg-lista summary{display:flex;align-items:center;gap:12px;
  padding:15px 18px;font-weight:700;font-size:14.5px;color:var(--ink);
  cursor:pointer;list-style:none}
/* El triangulo que pinta cada navegador a su manera se quita y se pone uno
   propio, que gira al abrir y es el mismo en todos. */
.preg-lista summary::-webkit-details-marker{display:none}
.preg-lista summary::after{content:"";margin-left:auto;flex:none;
  width:9px;height:9px;border-right:2px solid var(--ink-3);
  border-bottom:2px solid var(--ink-3);transform:rotate(45deg);
  transition:transform .18s ease}
.preg-lista details[open] summary::after{transform:rotate(-135deg)}
.preg-lista summary:hover{background:var(--surface-2)}
.preg-lista summary:focus-visible{outline:2px solid var(--foco);
  outline-offset:-2px}
.preg-lista details p{margin:0;padding:0 18px 17px;font-size:14px;
  line-height:1.6;color:var(--ink-2);max-width:68ch}

/* ---- la cabecera de seccion ----
   La comparten "Como funciona" y la seccion del MCP. Es lo unico que queda
   del "Como funciona" del 2026-09-24; el resto se sustituyo por el diseño de
   como funciona.png y sus reglas se fueron con el. */
.como-cab{max-width:720px;margin-bottom:38px}
.como-cab .eyebrow{margin:0}
.como-cab h2{font-size:clamp(28px,3.6vw,40px);line-height:1.1;font-weight:800;
  letter-spacing:-.035em;margin:16px 0 0}
.como-cab .lead{margin:12px 0 0;font-size:15.5px;line-height:1.62;
  color:var(--ink-2);max-width:60ch}

/* =========================================================================
   EL MCP -- replica de MCP.png
   =========================================================================
   Tres columnas en pantalla ancha: las cuatro ventajas, el diagrama y la
   conversacion de ejemplo. Por debajo de 1080px cae a una sola columna y el
   diagrama se tumba en horizontal, que es lo unico que cabe sin encoger la
   letra por debajo de lo legible.

   El diagrama y la conversacion van con `aria-hidden`: son ilustracion, y lo
   que cuentan ya esta escrito al lado. Un lector de pantalla que los leyera
   soltaria tres filas de cifras inventadas sin contexto ninguno.
   ------------------------------------------------------------------------ */

.mcp .como-cab{max-width:760px}
.mcp-planes{margin:14px 0 0;display:inline-flex;align-items:center;gap:9px;
  padding:7px 14px;border-radius:999px;background:var(--oro-suave);
  border:1px solid var(--oro-borde);font-size:12.5px;font-weight:700;
  color:var(--oro-texto)}

/* LA SECCION, EN BLOQUE. Cabecera, puente y franja, uno debajo de otro y a
   todo el ancho.

   Aqui vivia una rejilla de dos columnas que repartia .mcp-principal,
   .mcp-chat, .mcp-flujo y .mcp-ejemplos. La maqueta mcpv2 se llevo por
   delante esas cuatro clases, PERO LA REJILLA SE QUEDO: sin hijos que
   reconocer, metio la cabecera en la columna 1 y el puente en la 2, y el
   nucleo del MCP salio como una tira vertical. Un montaje viejo sobrevive a
   su propio HTML y no falla nada -- solo se ve mal. Es el mismo tropiezo que
   ya dieron los `.flota-*` del heroe.

   De aquel bloque se queda lo que sigue valiendo: apretar la cabecera. El
   hueco entre ella y lo de abajo eran DOS margenes sumandose. */
.mcp .como-cab{margin-bottom:0}
@media (min-width:1000px){
  .mcp .como-cab h2{font-size:clamp(26px,2.9vw,34px)}
  .mcp .como-cab .lead{margin-top:10px;font-size:14.5px;line-height:1.55}
  .mcp-planes{margin-top:12px;padding:6px 13px;font-size:12px}
}

/* La conversacion vive en el heroe de /soluciones, en la columna del
   montaje. Tope de ancho y centrada en su columna: a lo ancho un chat no
   parece un chat. */
.mcp-chat{width:100%}
.hero-sol .mcp-chat{max-width:560px;justify-self:center}

/* Una sola columna SIEMPRE: las cuatro ventajas arriba y el flujo debajo,
   como pidio el socio humano el 2026-09-25. Estuvieron un rato en paralelo,
   ventajas a la izquierda y flujo a la derecha. */
.mcp-cuerpo{display:grid;gap:26px;margin-top:34px;align-items:start}

/* ---- las cuatro ventajas ---- */
.mcp-listas{list-style:none;margin:0;padding:0;display:grid;gap:12px}
@media (min-width:600px){
  .mcp-listas{grid-template-columns:1fr 1fr}
}
.mcp-item{display:grid;grid-template-columns:auto 1fr;gap:12px;
  align-content:center;padding:15px 16px;border-radius:16px;
  background:var(--surface);border:1px solid var(--border)}
.mcp-item h3{margin:0;font-size:14.5px;font-weight:760;letter-spacing:-.025em;
  color:var(--ink);line-height:1.25}
.mcp-item p{margin:5px 0 0;font-size:13px;line-height:1.5;color:var(--ink-2)}
.mcp-ico{width:38px;height:38px;flex:none;border-radius:11px;display:grid;
  place-items:center}
.mcp-ico svg{width:19px;height:19px;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
/* Cuatro tintes, uno por ventaja, como la maqueta. El trazo de cada uno se
   eligio contra SU fondo, no contra el blanco: los cuatro pasan 4,5:1. */
.i-rayo{background:var(--oro-suave)}      .i-rayo svg{stroke:#8a6407}
.i-doc{background:#e7ecfb}                .i-doc svg{stroke:#37499b}
.i-graf{background:#e4f5e9}               .i-graf svg{stroke:#1d6b38}
.i-tuerca{background:#fbe6e6}             .i-tuerca svg{stroke:#9c3535}

/* ---- el diagrama ---- */
.mcp-flujo{display:grid;justify-items:center;gap:0;padding:22px 16px;
  border-radius:18px;background:var(--surface);border:1px solid var(--border)}
/* Caja arriba, pie debajo. `1fr auto` hace que la CAJA absorba el alto
   sobrante, asi que los tres pies quedan a la misma altura aunque las cajas
   tengan contenidos de alturas distintas -- la de los asistentes lleva tres
   filas y las otras una. */
.flujo-paso{display:grid;grid-template-rows:1fr auto;justify-items:center;
  width:100%;max-width:210px}
/* En horizontal el tope de 210px sobra: cada paso tiene su columna `1fr` y
   lo que se quiere es que la llene. Con el tope puesto, en cuanto la columna
   daba mas de 210 las tres cajas se quedaban estrechas y con aire muerto a
   los lados; y cuando daba menos, el tope no hacia nada. Se quita y se deja
   que la rejilla reparta, que para eso se hizo `1fr auto 1fr auto 1fr`. */
@media (min-width:600px){
  .flujo-paso{max-width:none}
}
.flujo-caja{width:100%;display:grid;justify-items:center;align-content:center;
  gap:9px;padding:20px 16px;border-radius:16px;background:var(--surface);
  border:1px solid var(--border)}
.flujo-logo{display:block;height:auto;max-width:100%}
.flujo-caja.es-mcp{background:var(--oro-suave);border-color:var(--oro-borde)}
.flujo-mcp{font-size:22px;font-weight:840;letter-spacing:-.045em;
  color:var(--ink)}
/* El logotipo del MCP, el oficial (lo dio el socio humano el 2026-09-25).
   Va DESNUDO sobre la caja dorada, como en la maqueta: la pastilla azul que
   tenia el dibujo anterior sobraba en cuanto el trazo dejo de ser dorado. */
.flujo-marca{width:48px;height:48px;display:grid;place-items:center}
.flujo-marca img{width:100%;height:100%;object-fit:contain;display:block}
.flujo-caja.es-ias{gap:7px;padding:14px}
.flujo-ia{display:flex;align-items:center;gap:10px;width:100%;
  padding:8px 11px;border-radius:11px;font-size:13px;
  font-weight:720;color:var(--ink);background:var(--surface-2);
  border:1px solid var(--border)}
.flujo-otros{color:var(--ink-2);font-weight:650}

/* ---- las marcas de los asistentes ----
   Dibujadas en SVG, no recortadas de la maqueta. Son citas nominativas: la
   pagina dice con QUE habla, no se hace pasar por ninguno de ellos.

   Fidelidad, dicho aqui para que nadie lo descubra tarde: la rafaga de
   Claude son doce rayos ahusados generados por calculo y se parece; el nudo
   de OpenAI es una figura de seis lazos entrelazados que a mano no sale, asi
   que lo que hay es una forma hexagonal reconocible, no su logotipo. El dia
   que haya permiso para usar los ficheros oficiales, esto se sustituye. */
.ia-marca{width:26px;height:26px;flex:none;border-radius:8px;display:grid;
  place-items:center}
.ia-marca svg{width:15px;height:15px}
/* Claude y ChatGPT van con SUS ficheros, que los dio el socio humano el
   2026-09-25. Antes eran dibujos a mano: la rafaga de Claude se parecia, el
   nudo de OpenAI no -- era un hexagono reconocible solo por ir al lado de la
   palabra. Con los oficiales sobra el reparo.
   Pasados a .webp de 128 px (3,0 y 3,9 KB, contra los 31 y 5,6 de origen):
   se pintan a 18 px, asi que 128 cubre de sobra una pantalla a 3x.
   El `alt` va vacio y el bloque entero con `aria-hidden`: lo que hay que
   leer es el nombre escrito al lado, no el logotipo. */
.ia-marca img{width:100%;height:100%;object-fit:contain;display:block}
.m-claude{background:#f6ece4;padding:4px}
.m-gpt{background:#e3f3ec;padding:4px}
.m-otros{background:var(--oro-suave)}
.m-otros svg{fill:#8a6407;stroke:none}
.flujo-pie{margin:10px 0 0;font-size:12px;line-height:1.5;text-align:center;
  color:var(--ink-3)}
.flujo-pie b{color:var(--ink-2);font-weight:750}
.flujo-flecha{display:grid;place-items:center;height:34px}
.flujo-flecha svg{width:22px;height:22px;fill:none;stroke:var(--accent);
  stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
  transform:rotate(90deg)}
/* En ancho el diagrama se tumba: las flechas vuelven a apuntar a la derecha
   y cada caja lleva su pie debajo. */
/* En horizontal son CINCO hijos para cinco columnas -- paso, flecha, paso,
   flecha, paso -- asi que no hace falta colocar nada a mano: cada uno cae en
   su celda por orden. Esa es la razon de agrupar cada paso con su pie.

   Y cada paso hereda las filas del padre con `subgrid`. Sin eso, agrupar
   traia su propio desorden: cada .flujo-paso era una rejilla INDEPENDIENTE,
   asi que la fila del padre medía caja MAS pie y pasaban dos cosas a la vez
     - la flecha se centraba sobre ese total, o sea por debajo del centro de
       las cajas, apuntando a la altura de los pies;
     - y los pies empezaban a alturas distintas, porque uno tiene una linea,
       otro dos y otro tres.
   Con `subgrid` las tres cajas comparten la fila 1 (mismo alto) y los tres
   pies la fila 2 (misma linea de salida), y la flecha se centra en la fila 1,
   que es donde estan las cajas.

   Si algun navegador no lo soporta, cae en el reparto de antes: descuadrado,
   pero legible. */
@media (min-width:600px){
  .mcp-flujo{grid-template-columns:1fr auto 1fr auto 1fr;
    grid-template-rows:auto auto;align-items:stretch;column-gap:12px}

  /* CADA HIJO A SU COLUMNA, a mano. No es redundante: en cuanto se le da
     `grid-row` a unos hijos y no a otros, la autocolocacion deja de ir en
     orden -- coloca primero los que tienen fila fija y mete los demas en el
     primer hueco libre. Eso mando las dos flechas al principio de la fila y
     empujo las tres cajas a la derecha. Con las cinco columnas escritas no
     queda nada que adivinar.
     Cinco reglas por cinco hijos; si algun dia se anade un paso, hay que
     anadir su linea. */
  .mcp-flujo > :nth-child(1){grid-column:1}
  .mcp-flujo > :nth-child(2){grid-column:2}
  .mcp-flujo > :nth-child(3){grid-column:3}
  .mcp-flujo > :nth-child(4){grid-column:4}
  .mcp-flujo > :nth-child(5){grid-column:5}

  .mcp-flujo .flujo-paso{grid-row:1/span 2;grid-template-rows:subgrid;
    row-gap:0}
  .mcp-flujo .flujo-flecha{grid-row:1;align-self:center;height:auto}
  .mcp-flujo .flujo-flecha svg{transform:none}
}

:root[data-theme="dark"] .nucleo-logo img{filter:invert(1)}

/* ---- la conversacion ---- */
.mcp-chat{display:grid;gap:10px;padding:18px;border-radius:18px;
  background:var(--surface);border:1px solid var(--border);
  box-shadow:0 1px 2px rgba(8,18,37,.04),0 18px 40px -26px rgba(8,18,37,.35)}
.chat-cab{display:flex;align-items:center;gap:9px;font-size:13.5px;
  font-weight:760;color:var(--ink);padding-bottom:12px;
  border-bottom:1px solid var(--border)}
.chat-punto{width:16px;height:16px;border-radius:50%;background:var(--accent)}
/* El chip de conexion: lo enseñan todos los clientes que hablan MCP, y aqui
   es lo que dice de un vistazo de que va la seccion. */
.chat-conectado{margin-left:auto;display:inline-flex;align-items:center;
  gap:6px;padding:3px 9px;border-radius:999px;background:#e4f5e9;
  color:#1d6b38;font-size:10.5px;font-weight:700;letter-spacing:.01em}
.chat-conectado::before{content:"";width:6px;height:6px;border-radius:50%;
  background:#1d6b38}

.chat-burbuja{margin:0;padding:10px 13px;border-radius:14px;font-size:12.5px;
  line-height:1.5}
.chat-tu{justify-self:end;max-width:88%;background:var(--surface-2);
  color:var(--ink);border-bottom-right-radius:5px}
/* La respuesta NO va a todo el ancho: una burbuja que cruza el panel entero
   no parece una respuesta, parece un cartel. */
.chat-ia{justify-self:start;max-width:88%;background:var(--oro-suave);
  color:var(--ink);border-bottom-left-radius:5px}

/* La llamada a la herramienta, que es lo que mas delata a un cliente MCP de
   verdad: antes de contestar enseña QUE ha invocado. El nombre es el real
   (mcp/herramientas.py), no un adorno. */
.chat-uso{margin:2px 0 0;display:inline-flex;align-items:center;gap:7px;
  align-self:start;padding:5px 10px;border-radius:8px;
  background:var(--surface-2);border:1px solid var(--border);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:10.5px;color:var(--ink-2)}
.chat-uso svg{width:13px;height:13px;flex:none;fill:none;stroke:var(--accent-3);
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.chat-res{list-style:none;margin:0;padding:0;display:grid;gap:8px}
/* La fila de un resultado, como la pintaria el asistente de verdad: titulo,
   entidad debajo, y el pie con el plazo a la izquierda y la nota a la
   derecha. Antes eran tres columnas con la entidad colgada arriba a la
   derecha, lejos de su titulo, y la nota partida en tres lineas ("92", "%",
   "relevancia") -- ningun cliente de chat enseña un dato asi. */
.chat-res li{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;
  padding:10px 12px;border-radius:12px;background:var(--surface-2);
  border:1px solid var(--border)}
.res-ico{grid-row:span 3;align-self:start;width:30px;height:30px;
  border-radius:9px;display:grid;place-items:center;background:var(--surface);
  border:1px solid var(--border)}
.res-ico svg{width:15px;height:15px;fill:none;stroke:var(--ink-3);
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.res-tit{font-size:12.5px;font-weight:740;color:var(--ink);line-height:1.35}
.res-ent{font-size:11px;color:var(--ink-3);line-height:1.35}
.res-pie{display:flex;align-items:center;justify-content:space-between;
  gap:10px;margin-top:5px}
.res-plazo{display:inline-flex;align-items:center;gap:5px;font-size:11px;
  font-weight:600;color:var(--ink-2)}
.res-plazo svg{width:12px;height:12px;flex:none;fill:none;stroke:var(--ink-3);
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.res-nota{flex:none;padding:3px 9px;border-radius:999px;background:#e4f5e9;
  color:#1d6b38;font-size:10.5px;font-weight:750;letter-spacing:-.01em}
.chat-campo{display:flex;align-items:center;gap:10px;margin-top:2px;
  padding:9px 9px 9px 15px;border-radius:999px;background:var(--surface-2);
  border:1px solid var(--border)}
.chat-campo > span:first-child{flex:1;font-size:12px;color:var(--ink-3)}
.chat-enviar{width:32px;height:32px;flex:none;border-radius:50%;display:grid;
  place-items:center;background:var(--accent)}
.chat-enviar svg{width:16px;height:16px;fill:none;stroke:var(--accent-ink);
  stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

/* ---- LA CONVERSACION, ACTUANDO ----------------------------------------
   Teclean, el asistente piensa y luego contesta. Arranca cuando la seccion
   entra en pantalla: portada.js le pone `.dentro` a todo lo que lleva
   `.reveal`, y de ahi cuelga el guion entero. Sin JavaScript no hay `.js` en
   el <html> y la conversacion se ve entera y quieta, que es el estado bueno.

   Los tiempos, en un sitio, para poder moverlos sin recalcular a mano:
     0,0 - 1,7   se teclea la pregunta en el campo
     1,8         sale la burbuja y el campo vuelve a su texto gris
     2,2         aparece la llamada a la herramienta y se pone a pensar
     3,5         deja de pensar y contesta
     3,8 4,0 4,2 caen los tres resultados
   ------------------------------------------------------------------------ */
.js .mcp-chat .chat-tu,
.js .mcp-chat .chat-uso,
.js .mcp-chat .chat-ia,
.js .mcp-chat .chat-res li{opacity:0}

/* El texto que se teclea tapa al gris del campo mientras dura. `steps` con
   tantos pasos como letras es lo que lo hace parecer tecleo y no un
   deslizamiento. */
.chat-teclea{position:absolute;left:15px;top:50%;transform:translateY(-50%);
  width:0;max-width:calc(100% - 67px);white-space:nowrap;overflow:hidden;
  font-size:12px;line-height:1.4;color:var(--ink)}
.chat-teclea::after{content:"";display:inline-block;width:1.5px;height:12px;
  margin-left:1px;vertical-align:-2px;background:var(--accent)}
.chat-campo{position:relative}

.js .mcp-chat.dentro .chat-teclea{animation:chat-teclea 1.7s steps(56) .25s both,
  chat-borra .01s linear 1.95s forwards}
.js .mcp-chat.dentro .chat-teclea::after{animation:chat-cursor .75s steps(1) .25s 3}
/* Una sola animacion: con `both`, durante su espera ya aplica el fotograma
   inicial (opacidad 0), asi que el gris desaparece mientras se teclea y
   vuelve al soltar la burbuja. Dos animaciones sobre `opacity` se pisan. */
.js .mcp-chat.dentro .chat-ph{animation:chat-vuelve .3s ease 1.95s both}

.js .mcp-chat.dentro .chat-tu{animation:chat-entra .4s cubic-bezier(.2,.7,.3,1) 1.8s both}
.js .mcp-chat.dentro .chat-uso{animation:chat-entra .4s cubic-bezier(.2,.7,.3,1) 2.2s both}
.js .mcp-chat.dentro .chat-ia{animation:chat-entra .4s cubic-bezier(.2,.7,.3,1) 3.5s both}
.js .mcp-chat.dentro .chat-res li:nth-child(1){animation:chat-entra .4s cubic-bezier(.2,.7,.3,1) 3.8s both}
.js .mcp-chat.dentro .chat-res li:nth-child(2){animation:chat-entra .4s cubic-bezier(.2,.7,.3,1) 4s both}
.js .mcp-chat.dentro .chat-res li:nth-child(3){animation:chat-entra .4s cubic-bezier(.2,.7,.3,1) 4.2s both}

/* Los tres puntos de "pensando". Solo viven entre que sale la herramienta y
   que llega la respuesta: un indicador que se queda puesto despues de
   contestar no indica nada. */
.chat-puntos{display:inline-flex;gap:3px;margin-left:2px}
.chat-puntos i{width:4px;height:4px;border-radius:50%;background:var(--ink-3)}
.js .mcp-chat .chat-puntos{opacity:0}
.js .mcp-chat.dentro .chat-puntos{animation:chat-vuelve .2s ease 2.35s both,
  chat-oculta .25s ease 3.4s forwards}
.js .mcp-chat.dentro .chat-puntos i{animation:chat-piensa .9s ease-in-out 2.4s 2}
.js .mcp-chat.dentro .chat-puntos i:nth-child(2){animation-delay:2.55s}
.js .mcp-chat.dentro .chat-puntos i:nth-child(3){animation-delay:2.7s}

@keyframes chat-entra{from{opacity:0;transform:translateY(7px)}
                      to{opacity:1;transform:none}}
@keyframes chat-teclea{from{width:0}to{width:calc(100% - 67px)}}
@keyframes chat-borra{to{opacity:0;visibility:hidden}}
@keyframes chat-cursor{50%{opacity:0}}
@keyframes chat-oculta{to{opacity:0}}
@keyframes chat-vuelve{from{opacity:0}to{opacity:1}}
@keyframes chat-piensa{0%,100%{transform:none;opacity:.45}
                       40%{transform:translateY(-3px);opacity:1}}

/* =========================================================================
   EL PUENTE DEL MCP -- replica de mcpv2.png (2026-09-25)
   =========================================================================
   Tres paneles encadenados por dos flechas: de donde salen los datos, por
   donde pasan, y a donde llegan. Debajo, cuatro ventajas en franja.

   Cinco hijos para cinco columnas, y CADA UNO CON SU COLUMNA ESCRITA. Es la
   misma leccion que el diagrama anterior: en cuanto se mezcla colocacion
   automatica con `grid-row` explicito, la rejilla reparte a su aire y las
   flechas acaban al principio de la fila.
   ------------------------------------------------------------------------ */
.mcp-puente{display:grid;gap:14px;margin-top:28px;align-items:stretch}
@media (min-width:1000px){
  /* Sin hueco entre panel y conector: las lineas tienen que TOCAR las
     tarjetas. Con los 10px de antes quedaba un vacio a cada lado del
     corchete y los brazos parecian flotar. */
  .mcp-puente{grid-template-columns:1fr auto 1.06fr auto 1fr;gap:0}
  .mcp-puente > :nth-child(1){grid-column:1}
  .mcp-puente > :nth-child(2){grid-column:2}
  .mcp-puente > :nth-child(3){grid-column:3}
  .mcp-puente > :nth-child(4){grid-column:4}
  .mcp-puente > :nth-child(5){grid-column:5}
}

.pnl{position:relative;z-index:1;padding:18px 18px;border-radius:20px;
  background:var(--surface);border:1px solid var(--border);
  box-shadow:0 1px 2px rgba(8,18,37,.04),0 18px 40px -28px rgba(8,18,37,.35)}

/* ---- panel 1: de donde salen los datos ---- */
.pnl-marca{display:flex;align-items:center;justify-content:center;gap:9px;
  padding:2px 0 14px;font-size:21px;font-weight:800;letter-spacing:-.03em;
  line-height:1;color:var(--ink)}
.pnl-marca img{width:34px;height:34px;border-radius:7px;object-fit:contain}
.pnl-marca img.logo{height:34px;width:auto;border-radius:0}
.pnl-marca .pro{color:var(--accent-3)}
.pnl-lista{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.pnl-lista li{display:grid;grid-template-columns:auto 1fr;gap:1px 11px;
  align-items:center;padding:10px 12px;border-radius:13px;
  background:var(--surface-2);border:1px solid var(--border)}
.pnl-ico{grid-row:span 2;width:36px;height:36px;border-radius:11px;
  display:grid;place-items:center}
.pnl-ico svg{width:18px;height:18px;fill:none;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
/* Cada trazo elegido contra SU pastilla, no contra el blanco. */
.i-conv{background:#e7ecfb}   .i-conv svg{stroke:#37499b}
.i-filtro{background:#e4f5e9} .i-filtro svg{stroke:#1d6b38}
.i-alerta{background:var(--oro-suave)} .i-alerta svg{stroke:#8a6407}
.pnl-t{font-size:14.5px;font-weight:780;letter-spacing:-.02em;color:var(--ink)}
.pnl-s{font-size:12.5px;line-height:1.4;color:var(--ink-2)}

/* ---- LOS CONECTORES: lineas con informacion pasando ------------------
   Las lineas son adorno. Lo que cuenta son los tres puntos que las recorren:
   dicen que por ahi PASA algo, que es justo lo que un diagrama de conexion
   tiene que contar y una flecha quieta no cuenta.

   Los puntos viajan con `offset-path`, no animando `cx`: el camino es una
   recta aqui, pero si manana se curva, `offset-path` sigue valiendo sin
   tocar la animacion.

   Nacen INVISIBLES y es la animacion la que los enseña. Asi, sin JavaScript
   -- o con el freno de movimiento puesto -- no quedan tres bolas paradas en
   la esquina: no se ven, y las lineas solas siguen leyendose como conexion.
   ---------------------------------------------------------------------- */
.pnl-enlace{position:relative;display:grid;place-items:center;
  align-self:stretch;min-height:76px}
@media (min-width:1000px){.pnl-enlace{width:104px}}
/* 4px de mas por cada lado: los extremos se meten BAJO el borde de la
   tarjeta en vez de acabar a ras. A ras, el antialiasing deja una rendija de
   medio pixel que se ve como un corte. Por eso las tarjetas van por encima
   (z-index) y tapan la punta. */
.enlace-tr{position:absolute;top:0;bottom:0;left:-4px;right:-4px;
  width:calc(100% + 8px);height:100%;overflow:visible}
.enlace-tr .ln{fill:none;stroke-width:1.5;stroke-linecap:round;
  vector-effect:non-scaling-stroke}
.enlace-tr .pt{opacity:0}
.e-oro .ln{stroke:var(--oro-borde)}   .e-oro .pt{fill:var(--accent)}
.e-azul .ln{stroke:#c6d6f8}           .e-azul .pt{fill:#3a63d8}

/* Cada punto recorre SU brazo del corchete, no una recta comun: por el de
   arriba y por el de abajo a la vez, y los dos desembocan en el tallo. Eso
   es lo que dibuja la maqueta -- dos fuentes que confluyen a la izquierda, y
   una salida que se abre en dos a la derecha.
   Los caminos son los MISMOS trazos que se ven, partidos por donde pasa el
   punto: si se retoca el corchete en el HTML, hay que retocarlos aqui. */
.js .enlace-tr .pt{animation:pnl-viaja 2.8s linear infinite}
.e-oro .pt.a{offset-path:path("M0 33 C22 33 40 45 40 63 V100 H100")}
.e-oro .pt.b{offset-path:path("M0 167 C22 167 40 155 40 137 V100 H100")}
.e-azul .pt.a{offset-path:path("M0 100 H60 V63 C60 45 78 33 100 33")}
.e-azul .pt.b{offset-path:path("M0 100 H60 V137 C60 155 78 167 100 167")}
/* Escalonados, y los de abajo a contratiempo de los de arriba: si salen a la
   vez parecen una pareja moviendose, no un flujo. */
.js .enlace-tr .a2{animation-delay:1.4s}
.js .enlace-tr .b1{animation-delay:.7s}
.js .enlace-tr .b2{animation-delay:2.1s}
@keyframes pnl-viaja{
  0%{offset-distance:0%;opacity:0}
  14%{opacity:1}
  86%{opacity:1}
  100%{offset-distance:100%;opacity:0}
}
/* Apilados, el conector no tiene sitio para lineas: se queda la flecha, que
   ya gira hacia abajo. */
@media (max-width:999px){.enlace-tr{display:none}}

/* ---- las flechas del encadenado ---- */
.pnl-flecha{position:relative;align-self:center;justify-self:center;
  width:42px;height:42px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:var(--surface);border:1px solid var(--border);
  box-shadow:0 4px 12px -6px rgba(8,18,37,.35)}
.pnl-flecha svg{width:18px;height:18px;fill:none;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round}
.f-oro svg{stroke:var(--accent)}
.f-azul svg{stroke:#3a63d8}
/* Apiladas, la secuencia baja: la flecha tiene que bajar con ella. */
@media (max-width:999px){.pnl-flecha svg{transform:rotate(90deg)}}

/* ---- panel 2: el nucleo ---- */
.pnl-nucleo{display:grid;justify-items:center;text-align:center;
  overflow:hidden;border-color:var(--oro-borde);
  background:linear-gradient(180deg,#fffcf4,var(--oro-suave))}
/* El resplandor de detras del logotipo. Pintado, no una imagen. */
.nucleo-halo{position:absolute;top:2%;left:50%;width:min(280px,90%);
  aspect-ratio:1;transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(circle,rgba(233,174,43,.38),transparent 62%)}
.nucleo-logo{position:relative;width:62px;height:62px;display:grid;
  place-items:center;margin-top:2px}
.nucleo-logo img{width:100%;height:100%;object-fit:contain}
.nucleo-txt{position:relative;margin-top:2px;font-size:clamp(25px,2.6vw,31px);
  font-weight:840;letter-spacing:-.05em;color:var(--ink)}
.nucleo-pie{position:relative;margin:9px 0 0;font-size:12.5px;line-height:1.5;
  color:var(--ink-2)}
.nucleo-sellos{position:relative;list-style:none;margin:15px 0 0;padding:0;
  width:100%;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.nucleo-sellos li{display:grid;justify-items:center;gap:1px;padding:10px 6px;
  border-radius:13px;background:var(--surface);border:1px solid var(--border)}
.nucleo-sellos li > span{width:27px;height:27px;border-radius:9px;display:grid;
  place-items:center;margin-bottom:4px}
.nucleo-sellos svg{width:14px;height:14px;fill:none;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.nucleo-sellos b{font-size:11.5px;font-weight:770;color:var(--ink);
  line-height:1.2}
.nucleo-sellos i{font-style:normal;font-size:11px;color:var(--ink-2);
  line-height:1.2}
.s-oauth > span{background:#e4f5e9}  .s-oauth svg{stroke:#1d6b38}
.s-acceso > span{background:#e7ecfb} .s-acceso svg{stroke:#37499b}
.s-datos > span{background:#efe9fb}  .s-datos svg{stroke:#5a3fa8}

/* ---- panel 3: a donde llega ---- */
.pnl-ias h3{margin:0;font-size:clamp(17px,1.6vw,19px);font-weight:800;
  letter-spacing:-.03em;color:var(--ink);line-height:1.25}
.pnl-lead{margin:10px 0 0;font-size:13px;line-height:1.55;color:var(--ink-2)}
.ias-lista{list-style:none;margin:15px 0 0;padding:0;display:grid;gap:8px}
.ias-lista li{display:flex;align-items:center;gap:11px;padding:9px 12px;
  border-radius:13px;background:var(--surface-2);border:1px solid var(--border)}
.ia-pas{width:38px;height:38px;flex:none;padding:5px;border-radius:11px;
  display:grid;place-items:center}
.ia-pas img{width:100%;height:100%;object-fit:contain;display:block}
.p-claude{background:#f6ece4}
/* La pastilla de ChatGPT es negra en la maqueta y el fichero es el logotipo
   OSCURO: invertido da blanco sobre negro, que es lo que se ve ahi. */
.p-gpt{background:#0d0d0d}
.p-gpt img{filter:invert(1)}
.p-otros{background:var(--oro-suave)}
.p-otros svg{width:19px;height:19px;fill:#8a6407;stroke:none}
.ia-nom{flex:1;font-size:15px;font-weight:770;letter-spacing:-.02em;
  color:var(--ink)}
.pnl-chev{width:16px;height:16px;flex:none;fill:none;stroke:var(--ink-3);
  stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* ---- la franja de cuatro ---- */
.mcp-ventajas{list-style:none;margin:30px 0 0;padding:0;display:grid;
  gap:24px 0;grid-template-columns:1fr}
@media (min-width:640px){.mcp-ventajas{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.mcp-ventajas{grid-template-columns:repeat(4,1fr)}}
.mcp-ventajas li{display:grid;grid-template-columns:auto 1fr;gap:3px 14px}
.mcp-ventajas h3{margin:0;font-size:14.5px;font-weight:780;
  letter-spacing:-.02em;color:var(--ink)}
.mcp-ventajas p{margin:0;font-size:12.5px;line-height:1.5;color:var(--ink-2)}
.vt-ico{grid-row:span 2;width:42px;height:42px;border-radius:13px;display:grid;
  place-items:center}
.vt-ico svg{width:21px;height:21px;fill:none;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.v-charla{background:var(--oro-suave)} .v-charla svg{stroke:#8a6407}
.v-doc{background:#e4f5e9}             .v-doc svg{stroke:#1d6b38}
.v-rayo{background:#e7ecfb}            .v-rayo svg{stroke:#37499b}
.v-tuerca{background:#efe9fb}          .v-tuerca svg{stroke:#5a3fa8}
/* Las rayas solo cuando van los cuatro en UNA fila. En dos filas la del
   tercero abre fila y queda colgando del borde; ya paso una vez. */
@media (min-width:1000px){
  .mcp-ventajas li{padding:0 22px}
  .mcp-ventajas li:first-child{padding-left:0}
  .mcp-ventajas li + li{border-left:1px solid var(--border)}
}

/* ---- EL HEROE DE /soluciones, EN UNA PANTALLA -------------------------
   Titular, conversacion y cinco tarjetas tienen que caber en lo que se ve.
   Medido con Chromium antes de tocar nada: a 1920x1080 cabia justo, a
   1440x900 se pasaba 62px y a 1366x768, 194px. Lo que mandaba era el chat,
   556px de alto por si solo.

   Por eso las medidas van con `vh` ademas de con `vw`: lo que falta en una
   pantalla baja es ALTO, y una regla que solo mira el ancho encoge la
   letra de un monitor ancho y bajo igual que la de uno ancho y alto.
   ---------------------------------------------------------------------- */
.hero-sol h1{font-size:clamp(30px,min(4.4vw,6.4vh),58px)}
.hero-sol .lead{margin-top:clamp(12px,2vh,22px)}

/* La conversacion, apretada solo aqui: en /soluciones comparte pantalla con
   el titular y las tarjetas. */
.hero-sol .mcp-chat{gap:clamp(6px,1vh,10px);padding:clamp(12px,1.8vh,18px)}
.hero-sol .chat-cab{padding-bottom:clamp(7px,1.1vh,12px)}
.hero-sol .chat-res{gap:clamp(5px,.8vh,8px)}
.hero-sol .chat-res li{padding:clamp(6px,1vh,10px) 12px}
.hero-sol .res-pie{margin-top:clamp(2px,.5vh,5px)}
/* En una pantalla baja el tercer resultado no cabe con lo demas. Con dos ya
   se entiende la conversacion; con el tercero, las tarjetas se salen. */
@media (max-height:820px){.hero-sol .chat-res li:nth-child(3){display:none}}

/* Las tarjetas, con el icono al lado del titulo y no encima: son 50px de
   alto que no se leen mejor por ir apilados. */
/* `align-content:center` y no `align-items:center`: con items centrados,
   cada fila se estiraba a lo alto de la tarjeta y entre el titulo y el
   texto quedaba un hueco que variaba de tarjeta a tarjeta. Asi titulo y
   texto van juntos, y es el BLOQUE el que se centra. */
.hero-sol .sol{display:grid;grid-template-columns:auto 1fr;gap:3px 12px;
  align-items:start;align-content:center;padding:clamp(13px,1.8vh,18px) 16px}
.hero-sol .sol-ico{grid-row:span 2;align-self:center;width:40px;height:40px;
  border-radius:12px}
.hero-sol .sol-ico svg{width:20px;height:20px}
.hero-sol .sol h2{margin:0;font-size:15px;line-height:1.25}
.hero-sol .sol p{font-size:12.5px;line-height:1.45}

/* =========================================================================
   COMO FUNCIONA -- replica de "como funciona.png" (2026-09-25)
   =========================================================================
   Una pantalla, cabecera incluida. Todo lo que da alto -- rellenos, huecos,
   la letra de la ilustracion -- va con `clamp(... vh ...)`: lo que falta en
   una pantalla baja es ALTO, y una medida que solo mira el ancho no encoge
   donde hace falta. Las prefijo `cf-` para no chocar con nada viejo: el
   "Como funciona" anterior dejo reglas huerfanas que ganaban la cascada.
   ------------------------------------------------------------------------ */
.como{padding:clamp(20px,3.2vh,44px) 0}
@media (min-width:1000px){
  .como{min-height:calc(100svh - var(--top-h));display:flex;
    flex-direction:column;justify-content:center}
}
.cf-cab{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:16px 28px}
.como .como-cab{margin-bottom:0}
.como .como-cab h2{font-size:clamp(26px,min(3.4vw,4.6vh),44px)}
.como .como-cab .lead{margin-top:clamp(6px,1vh,12px);font-size:clamp(13.5px,1.6vh,16px)}
.cf-nota{margin:0;display:flex;align-items:center;gap:14px;padding:14px 20px;
  border-radius:16px;background:var(--oro-suave);border:1px solid var(--oro-borde);
  font-size:14px;font-weight:700;line-height:1.45;color:var(--ink)}
.cf-nota-ico{width:40px;height:40px;flex:none;border-radius:50%;display:grid;
  place-items:center;background:var(--surface)}
.cf-nota-ico svg{width:20px;height:20px;fill:none;stroke:var(--accent-3);
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

.cf-pasos{list-style:none;margin:clamp(16px,2.8vh,34px) 0 0;padding:0;display:grid;gap:22px}
@media (min-width:1000px){.cf-pasos{grid-template-columns:repeat(3,minmax(0,1fr));gap:42px}}

.cf-paso{position:relative;display:flex;flex-direction:column;
  padding:clamp(14px,2vh,24px) clamp(16px,1.5vw,22px) clamp(12px,1.8vh,20px);
  border-radius:22px;background:var(--surface);border:1px solid var(--border);
  box-shadow:0 1px 2px rgba(8,18,37,.04),0 16px 36px -26px rgba(8,18,37,.3)}
.cf-2{background:linear-gradient(180deg,var(--surface) 55%,color-mix(in srgb,var(--accent) 6%,var(--surface)))}
.cf-3{background:linear-gradient(180deg,var(--surface) 55%,color-mix(in srgb,var(--good) 5%,var(--surface)))}

/* La flecha entre tarjeta y tarjeta: en el hueco, centrada en alto. */
@media (min-width:1000px){
  .cf-paso:not(:last-child)::after{content:"";position:absolute;z-index:2;
    top:34%;right:-38px;width:34px;height:34px;border-radius:50%;
    background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23dea21e' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6'/%3E%3C/svg%3E") center/16px no-repeat;
    border:1.5px solid var(--oro-borde)}
}

.cf-tit{display:flex;align-items:center;gap:14px}
.cf-n{width:clamp(36px,4.6vh,46px);height:clamp(36px,4.6vh,46px);flex:none;
  border-radius:50%;display:grid;place-items:center;font-size:clamp(16px,2vh,20px);
  font-weight:820;color:var(--accent-ink);
  background:radial-gradient(circle at 35% 30%,#f7c948,var(--accent) 70%);
  box-shadow:0 0 0 5px var(--oro-suave)}
.cf-tit h3{margin:0;font-size:clamp(16px,2.1vh,20px);font-weight:800;
  letter-spacing:-.03em;color:var(--ink);line-height:1.2}
.cf-desc{margin:clamp(6px,1vh,12px) 0 0;font-size:clamp(12.5px,1.55vh,14.5px);
  line-height:1.5;color:var(--ink-2)}

/* ---- la ilustracion de cada paso ---- */
/* El hueco de debajo va en la ILUSTRACION y no en los checks: los checks
   llevan `margin-top:auto` para bajar al fondo de la tarjeta y quedar a la
   misma altura en las tres. Un margen fijo encima los anclaba arriba y las
   dos tarjetas mas cortas se quedaban con un vacio debajo. */
.cf-arte{margin:clamp(10px,1.5vh,16px) 0 clamp(10px,1.5vh,16px);display:grid;
  gap:clamp(6px,1vh,10px);
  font-size:clamp(11px,1.35vh,12.5px)}
.cf-arte b{font-weight:760;color:var(--ink)}
.cf-arte i{font-style:normal;color:var(--ink-3)}
.cf-ico{width:clamp(28px,3.6vh,36px);height:clamp(28px,3.6vh,36px);flex:none;
  border-radius:10px;display:grid;place-items:center}
.cf-ico svg{width:55%;height:55%;fill:none;stroke-width:1.9;stroke-linecap:round;
  stroke-linejoin:round}
.t-azul{background:#e7ecfb} .t-azul svg{stroke:#37499b}
.t-oro{background:var(--oro-suave)} .t-oro svg{stroke:#8a6407}
.t-lila{background:#efe9fb} .t-lila svg{stroke:#5a3fa8}

.cf-fuentes{list-style:none;margin:0;padding:clamp(4px,.7vh,8px) 12px;border-radius:14px;
  background:var(--surface);border:1px solid var(--border)}
.cf-fuentes li{display:grid;grid-template-columns:auto 1fr auto;gap:1px 11px;
  align-items:center;padding:clamp(6px,1vh,10px) 0}
.cf-fuentes li + li{border-top:1px solid var(--border)}
.cf-fuentes .cf-ico{grid-row:span 2}
.cf-fuentes i{grid-column:2}
.cf-activo{grid-row:1/span 2;grid-column:3;font-style:normal;display:inline-flex;
  align-items:center;gap:6px;padding:3px 10px;border-radius:999px;
  background:#e4f5e9;color:#1d6b38;font-weight:720;font-size:.92em}
.cf-activo::before{content:"";width:6px;height:6px;border-radius:50%;background:#1d6b38}
.cf-cifras{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;
  padding:clamp(7px,1.1vh,11px) 12px;border-radius:14px;
  background:color-mix(in srgb,var(--info) 7%,var(--surface))}
.cf-cifras span{display:grid;grid-template-columns:auto 1fr;gap:0 7px;align-items:center}
.cf-cifras svg{grid-row:span 2;width:18px;height:18px;fill:none;stroke:#37499b;
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.cf-cifras b{font-size:1.12em;letter-spacing:-.02em}
.cf-cifras i{font-size:.86em;line-height:1.25}

.cf-analisis{display:grid;gap:clamp(6px,1vh,10px);padding:clamp(9px,1.3vh,14px) 13px;
  border-radius:14px;background:var(--surface);border:1px solid var(--border)}
.cf-an-cab{display:flex;align-items:center;gap:10px}
.cf-an-cab b{flex:1}
.cf-pct{font-style:normal;padding:4px 10px;border-radius:999px;background:#e4f5e9;
  color:#1d6b38;font-weight:760}
.cf-crit{margin:0;display:grid;gap:clamp(3px,.6vh,6px)}
.cf-crit div{display:grid;grid-template-columns:7em 1fr;align-items:center}
.cf-crit dt{font-weight:700;color:var(--ink)}
.cf-crit dd{margin:0;display:flex;align-items:center;gap:8px;color:var(--ink-2)}
.cf-crit dd::before{content:"";width:13px;height:13px;flex:none;border-radius:50%;
  background:#1d9a50 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 5 5L19 7'/%3E%3C/svg%3E") center/8px no-repeat}
.cf-motivo{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;
  padding:clamp(7px,1.1vh,11px) 12px;border-radius:12px;
  background:color-mix(in srgb,var(--info) 7%,var(--surface))}
.cf-motivo-ico{grid-row:span 2;align-self:start;margin-top:1px}
.cf-motivo-ico svg{width:18px;height:18px;fill:#3a63d8}
.cf-motivo p{margin:0;color:var(--ink-2);line-height:1.45}

.cf-aviso{display:grid;grid-template-columns:auto 1fr auto;gap:0 10px;align-items:center;
  padding:clamp(6px,1vh,10px) 12px;border-radius:13px;background:var(--surface);
  border:1px solid var(--border)}
.cf-aviso .cf-ico{grid-row:span 2}
.cf-aviso i{grid-column:2;color:#1d6b38}
.cf-aviso em{grid-row:1;grid-column:3;font-style:normal;color:var(--ink-3);font-size:.9em}
.cf-conv{position:relative;display:grid;gap:clamp(5px,.9vh,9px);
  padding:clamp(8px,1.2vh,12px) 12px;border-radius:14px;background:var(--surface);
  border:1px solid var(--border)}
.cf-tag{justify-self:start;padding:2px 8px;border-radius:6px;background:#efe9fb;
  color:#5a3fa8;font-size:.82em;font-weight:780;letter-spacing:.04em}
.cf-conv-top{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center}
.cf-conv-top div{display:grid;gap:1px;min-width:0}
.cf-pct-g{font-style:normal;display:grid;justify-items:center;padding:5px 9px;
  border-radius:10px;background:#e4f5e9;color:#1d6b38;font-size:1.25em;
  font-weight:820;line-height:1.05}
.cf-pct-g small{font-size:.58em;font-weight:680}
.cf-conv-datos{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.cf-conv-datos span{display:grid;grid-template-columns:auto 1fr;gap:0 6px;align-items:center}
.cf-conv-datos svg{grid-row:span 2;width:17px;height:17px;fill:none;stroke:var(--ink-3);
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.cf-conv-datos i{font-size:.86em}
.cf-conv-bot{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cf-conv-bot span{display:flex;align-items:center;justify-content:center;gap:6px;
  padding:clamp(5px,.8vh,8px) 8px;border-radius:10px;font-weight:720}
.cf-conv-bot svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.cf-b1{background:var(--surface);border:1px solid var(--border);color:var(--ink)}
.cf-b2{background:var(--accent);color:var(--accent-ink)}
.cf-bot{display:grid;grid-template-columns:auto 1fr;gap:1px 10px;
  padding:clamp(6px,1vh,10px) 12px;border-radius:13px;background:var(--surface);
  border:1px solid var(--border)}
.cf-bot i{font-weight:500;margin-left:5px}
.cf-bot p{margin:0;grid-column:2;color:var(--ink-2);line-height:1.4}
.cf-tg{grid-row:span 2;width:32px;height:32px;border-radius:50%;display:grid;
  place-items:center;background:#28a8e8}
.cf-tg svg{width:16px;height:16px;fill:none;stroke:#fff;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}

/* ---- los tres checks, abajo del todo ---- */
.cf-checks{list-style:none;margin:clamp(10px,1.5vh,16px) 0 0;
  padding:clamp(8px,1.3vh,14px) 16px;display:grid;gap:clamp(4px,.8vh,9px);
  border-radius:14px;background:color-mix(in srgb,var(--accent) 12%,var(--surface));margin-top:auto}
.cf-3 .cf-checks{background:color-mix(in srgb,var(--good) 10%,var(--surface))}
.cf-checks li{position:relative;padding-left:26px;font-size:clamp(12.5px,1.55vh,14px);
  color:var(--ink);line-height:1.4}
.cf-checks li::before{content:"";position:absolute;left:0;top:.1em;width:17px;
  height:17px;border-radius:50%;background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23081225' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 5 5L19 7'/%3E%3C/svg%3E") center/10px no-repeat}
.cf-3 .cf-checks li::before{background-color:#1d9a50;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 5 5L19 7'/%3E%3C/svg%3E")}

/* En pantalla baja se cae lo que menos cuenta, por orden: el mensaje del
   bot repite lo que ya dice el aviso, y los botones de la convocatoria son
   adorno. */
@media (min-width:1000px) and (max-height:900px){.cf-bot{display:none}}
@media (min-width:1000px) and (max-height:800px){.cf-conv-bot,.cf-motivo{display:none}}

/* =========================================================================
   LAS SOLUCIONES EN CARRUSEL (/soluciones, 2026-09-25)
   =========================================================================
   `scroll-snap` sobre un contenedor que desplaza en horizontal. No es un
   carrusel de `transform`: asi el dedo, la rueda y el teclado funcionan sin
   una linea de JS. Las flechas solo mandan desplazar; donde se queda lo
   decide el snap.
   ------------------------------------------------------------------------ */
.sol-carrusel{position:relative;padding:24px 0 24px;scroll-margin-top:var(--top-h)}
.car-pista{display:flex;overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none}
.car-pista::-webkit-scrollbar{display:none}
.car-pista:focus-visible{outline:2px solid var(--foco);outline-offset:6px;
  border-radius:12px}
/* Cada diapositiva mide la pista entera. El relleno lateral deja sitio a las
   flechas, que van superpuestas en los bordes. */
.car-diap{flex:0 0 100%;scroll-snap-align:start;scroll-snap-stop:always;
  padding:8px 4px}
.sol-carrusel .sol-detalle{padding:8px 4px}

.car-ctrl{display:flex;align-items:center;justify-content:center;gap:18px;
  margin-bottom:14px}
.car-flecha{width:46px;height:46px;border-radius:50%;display:grid;
  place-items:center;cursor:pointer;background:var(--surface);
  border:1px solid var(--oro-borde);color:var(--accent-3);
  box-shadow:0 6px 16px -8px rgba(8,18,37,.35);transition:transform .15s ease,
  opacity .15s ease}
.car-flecha svg{width:20px;height:20px;fill:none;stroke:currentColor;
  stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.car-flecha:hover:not([aria-disabled="true"]){transform:translateY(-1px)}
.car-flecha:focus-visible{outline:2px solid var(--foco);outline-offset:3px}
/* En el extremo la flecha se apaga pero no desaparece: si se escondiera, el
   control cambiaria de sitio al llegar al final. */
.car-flecha[aria-disabled="true"]{opacity:.35;cursor:default;box-shadow:none}
.car-puntos{display:flex;gap:8px}
.car-puntos i{width:8px;height:8px;border-radius:999px;background:var(--border);
  transition:width .2s ease,background .2s ease}
.car-puntos i.on{width:24px;background:var(--accent)}

/* La tarjeta del heroe que corresponde a la diapositiva a la vista. El color
   es el de SU tarjeta (--t), no el oro: son cinco soluciones con cinco
   colores, y resaltar una en oro la haria parecer otra. */
.sol{transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.sol.activa{border-color:var(--t);transform:translateY(-3px);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--t) 20%,transparent),
             0 14px 30px -16px color-mix(in srgb,var(--t) 55%,transparent)}

/* La tarjeta entera es el enlace a su diapositiva. El enlace es el titulo
   (lo que lee un lector de pantalla) y su ::after cubre la tarjeta para que
   el clic valga en cualquier punto de ella. */
.soluciones .sol{position:relative}
.sol-enlace{color:inherit;text-decoration:none;outline:0}
.sol-enlace::after{content:"";position:absolute;inset:0;border-radius:inherit}
.sol:has(.sol-enlace){cursor:pointer}
.sol:has(.sol-enlace):hover{border-color:var(--t)}
.sol:has(.sol-enlace:focus-visible){outline:2px solid var(--foco);outline-offset:3px}
.sol-carrusel{scroll-margin-top:var(--top-h)}

/* ---- la ilustracion de la Solucion 02 ---- */
/* Tres paneles dentro de la ilustracion (documentos, PDF, asistente) no caben
   en la columna central de la Solucion 01, pensada para UN buscador: los
   textos se partian en cuatro lineas. Esta diapositiva le da mas ancho al
   centro a costa de los lados. */
@media (min-width:1080px){
  #sol-02.sol-detalle{grid-template-columns:.62fr 1.9fr .7fr;gap:22px}
}
.bases{display:grid;grid-template-columns:.8fr 1fr 1.15fr;gap:10px;padding:12px;
  border-radius:20px;background:var(--surface);border:1px solid var(--border);
  box-shadow:0 20px 50px -20px rgba(9,20,40,.24);font-size:11.5px}
.bases b{font-weight:740;color:var(--ink)}
.bases em{font-style:normal}
.bd-ico{width:26px;height:26px;flex:none;border-radius:8px;display:grid;place-items:center}
.bd-ico svg{width:14px;height:14px;fill:none;stroke-width:1.9;stroke-linecap:round;
  stroke-linejoin:round}
.b-rojo{background:#fde7e2} .b-rojo svg{stroke:#b3401f}
.b-azul{background:#e7ecfb} .b-azul svg{stroke:#37499b}
.b-verde{background:#e4f5e9} .b-verde svg{stroke:#1d6b38}
.b-rosa{background:#fbe6ee} .b-rosa svg{stroke:#a3345c}
.b-lila{background:#efe9fb} .b-lila svg{stroke:#5a3fa8}
.b-oro{background:var(--oro-suave)} .b-oro svg{stroke:#8a6407}

.bases-docs{display:grid;align-content:start;gap:6px}
.bases-tit{margin:2px 2px 4px;font-weight:720;color:var(--ink);font-size:12px}
.bd{display:grid;grid-template-columns:auto 1fr;gap:0 8px;align-items:center;
  padding:8px;border-radius:10px;border:1px solid var(--border);background:var(--surface)}
.bd .bd-ico{grid-row:span 2}
.bd em{grid-column:2;color:var(--ink-3);font-size:.9em}
.bd-on{background:var(--oro-suave);border-color:var(--oro-borde)}

.bases-pdf{display:grid;grid-template-rows:auto auto 1fr;border-radius:12px;
  overflow:hidden;border:1px solid var(--border);background:var(--surface-2)}
.pdf-barra{padding:8px 10px;background:#2f3a4d;color:#e8eef7;font-weight:600}
.pdf-barra span{display:flex;align-items:center;gap:6px}
.pdf-barra svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2}
.pdf-herr{display:flex;justify-content:space-between;align-items:center;
  padding:6px 10px;color:var(--ink-2);border-bottom:1px solid var(--border)}
.pdf-zoom{padding:2px 8px;border:1px solid var(--border);border-radius:6px;
  background:var(--surface);font-weight:700;color:var(--ink)}
.pdf-hoja{margin:10px;padding:14px 14px 10px;background:#fff;border-radius:4px;
  box-shadow:0 2px 8px rgba(9,20,40,.1);text-align:center;color:#1b2333}
.pdf-hoja p{margin:0}
.pdf-ent{font-size:.85em;letter-spacing:.02em}
.pdf-h{margin-top:8px !important;font-weight:800;font-size:1.1em}
.pdf-caja{margin:8px 0 !important;padding:7px;background:#e9ecf1;font-weight:700;
  font-size:.92em;line-height:1.35}
.pdf-obj{font-weight:700;font-size:1.05em;line-height:1.3}
.pdf-sec{margin-top:12px !important;text-align:left;font-weight:800;font-size:.85em}
.pdf-l{display:block;height:5px;margin:6px 0 0 14px;border-radius:3px;background:#dfe3ea}
.pdf-l.corta{width:60%}

.bases-ia{display:grid;align-content:start;gap:8px;padding:10px;border-radius:12px;
  border:1px solid var(--border);background:var(--surface)}
.bia-cab{display:flex;align-items:center;gap:8px}
.bia-cab b{flex:1;font-size:12.5px}
.bia-ok{display:inline-flex;align-items:center;gap:5px;padding:3px 8px;
  border-radius:999px;background:#e4f5e9;color:#1d6b38;font-weight:700;font-size:.9em}
.bia-ok::before{content:"";width:6px;height:6px;border-radius:50%;background:#1d6b38}
.bia-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.bia-tabs span{padding:5px 2px;text-align:center;border-radius:7px;color:var(--ink-2);
  border:1px solid var(--border);font-size:.92em}
.bia-tabs .on{background:#fff6e0;border-color:var(--oro-borde);color:var(--ink);
  font-weight:720;box-shadow:inset 0 -2px 0 var(--accent)}
.bia-res{padding:8px 10px;border-radius:10px;border:1px solid var(--border)}
.bia-res p{margin:3px 0 0;color:var(--ink-2);line-height:1.45}
.bia-datos{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.bia-datos span{display:grid;grid-template-columns:auto 1fr;gap:0 7px;align-items:center;
  padding:7px;border-radius:10px;border:1px solid var(--border)}
.bia-datos .bd-ico{grid-row:span 2}
.bia-datos em{color:var(--ink-3);font-size:.9em}
.bia-fin{display:grid;gap:5px;padding:9px 10px;border-radius:10px;
  background:color-mix(in srgb,var(--good) 10%,var(--surface))}
.bia-fin-cab{display:flex;justify-content:space-between;align-items:center;gap:6px}
.bia-fin-cab em{padding:2px 8px;border-radius:999px;background:#d3f0dc;color:#1d6b38;
  font-weight:760}
.bia-fin span{position:relative;padding-left:20px;color:var(--ink);line-height:1.35}
.bia-fin span::before{content:"";position:absolute;left:0;top:1px;width:14px;height:14px;
  border-radius:50%;background:#1d9a50 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 5 5L19 7'/%3E%3C/svg%3E") center/8px no-repeat}
/* Estrecho: el visor del PDF es lo primero que sobra -- lo que cuenta es lo
   que el asistente saca de el. */
@media (max-width:760px){
  .bases{grid-template-columns:1fr}
  .bases-docs,.bases-pdf{display:none}
}

/* ---- la ilustracion de la Solucion 03 ----
   El panel de alertas y el movil que recibe el aviso. Mismo reparto de
   columnas que la 02: el centro necesita el ancho de dos piezas. */
@media (min-width:1080px){
  #sol-03.sol-detalle{grid-template-columns:.62fr 1.9fr .7fr;gap:22px}
}
.alertas{display:grid;grid-template-columns:1.35fr .85fr;gap:18px;
  align-items:stretch;font-size:11.5px}
.alertas b{font-weight:740;color:var(--ink)}
.alertas em{font-style:normal;color:var(--ink-3)}

.al-panel{display:grid;gap:10px;padding:14px;border-radius:20px;
  background:var(--surface);border:1px solid var(--border);
  box-shadow:0 20px 50px -20px rgba(9,20,40,.24)}
.al-cab{display:flex;justify-content:space-between;align-items:center;gap:8px}
.al-cab > b{font-size:14px}
.al-conf{display:inline-flex;align-items:center;gap:5px;color:var(--ink-2)}
.al-conf svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round}
.al-lista{list-style:none;margin:0;padding:0;display:grid}
.al-lista li{display:grid;grid-template-columns:auto 1fr auto auto;gap:10px;
  align-items:center;padding:9px 2px;border-top:1px solid var(--border)}
.al-lista li:first-child{border-top:0}
.al-lista .bd-ico{width:32px;height:32px;border-radius:9px;align-self:start}
.al-lista .bd-ico svg{width:16px;height:16px}
.al-op{display:grid;gap:1px;min-width:0}
.al-op b{line-height:1.3}
.al-op code{justify-self:start;margin-top:3px;font:9px var(--mono);color:var(--ink-3);
  background:var(--surface-2);border-radius:4px;padding:2px 6px}
.al-tag{justify-self:start;margin-bottom:2px;padding:1px 7px;border-radius:5px;
  font-size:9px;font-weight:760;letter-spacing:.04em;text-transform:uppercase}
.at-oro{background:var(--oro-suave);color:var(--oro-texto)}
.at-verde{background:var(--good-bg);color:var(--good)}
.at-rojo{background:var(--crit-bg);color:var(--crit)}
.al-val{display:grid;gap:2px;text-align:right;white-space:nowrap}
.al-val b{font-size:12.5px;letter-spacing:-.02em}
.al-val em{font-size:.88em}
.al-rel{display:grid;place-items:center;min-width:54px;padding:5px 4px;
  border-radius:9px;font-size:8.5px;line-height:1.2}
.al-rel b{font-size:14px;font-weight:800;color:inherit}
.r-alta{background:var(--good-bg);color:var(--good)}
.r-media{background:var(--oro-suave);color:var(--oro-texto)}

.al-config{display:grid;gap:2px;padding:11px;border-radius:14px;
  background:var(--surface-2);border:1px solid var(--border)}
.al-config > b{font-size:12.5px}
.al-cfg{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-top:8px}
.al-cfg span{display:grid;gap:6px;align-content:start;padding:9px;border-radius:10px;
  background:var(--surface);border:1px solid var(--border);color:var(--ink);
  font-weight:650;line-height:1.3}

/* El movil. El marco es oscuro en los dos temas, como un telefono de verdad. */
.al-movil{position:relative;display:grid;padding-top:50px}
.al-toast{position:absolute;z-index:1;top:0;right:-14px;left:18px;display:flex;
  align-items:center;gap:9px;padding:9px 11px;border-radius:14px;
  background:var(--surface);border:1px solid var(--border);
  box-shadow:0 14px 30px -12px rgba(9,20,40,.35);transform:rotate(-3deg)}
.al-toast div{flex:1;display:grid;line-height:1.3}
.al-toast small{align-self:start;color:var(--ink-3);font-size:9px}
.movil{display:grid;grid-template-rows:auto auto 1fr;min-height:0;border:7px solid #151a22;
  border-radius:32px;overflow:hidden;background:var(--surface);
  box-shadow:0 24px 50px -18px rgba(9,20,40,.45)}
.movil-estado{display:flex;justify-content:space-between;align-items:center;
  padding:7px 16px 3px;font-size:10px}
.movil-isla{width:62px;height:16px;border-radius:999px;background:#151a22}
.movil-bat{width:18px;height:8px;border-radius:2px;border:1.5px solid var(--ink)}
.tg-cab{display:flex;align-items:center;gap:8px;padding:7px 10px 8px;
  border-bottom:1px solid var(--border)}
.tg-cab div{display:grid;line-height:1.25}
.tg-atras{width:15px;height:15px;fill:none;stroke:#2a8bd8;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round}
.tg-avatar{width:30px;height:30px;flex:none;border-radius:50%;display:grid;
  place-items:center;background:#2a9fd8}
.tg-avatar svg{width:15px;height:15px;fill:#fff;stroke:#fff;stroke-width:1;
  stroke-linejoin:round}
.tg-chat{display:flex;flex-direction:column;justify-content:flex-end;gap:8px;
  min-height:0;overflow:hidden;padding:10px 9px 12px;background:color-mix(in srgb,#2a9fd8 9%,var(--surface-2))}
.tg-burbuja{padding:9px 10px 6px;border-radius:12px 12px 12px 4px;
  background:var(--surface);box-shadow:0 1px 2px rgba(9,20,40,.12);
  font-size:10.5px;line-height:1.45;color:var(--ink)}
.tg-burbuja p{margin:0}
.tg-sep{margin-top:7px !important}
.tg-burbuja code{font:9.5px var(--mono);color:var(--ink-2)}
.tg-rel{margin-top:7px !important;padding:6px 8px;border-radius:8px;
  background:var(--good-bg);color:var(--good)}
.tg-sep:last-child{display:flex;justify-content:space-between;align-items:end}
.tg-enlace{color:#2a8bd8;text-decoration:underline;font-weight:650}
.tg-burbuja small{color:var(--ink-3);font-size:9px}
/* El aviso anterior, que asoma cortado por arriba: asi se ve un chat con
   historial, en vez de un mensaje flotando en un hueco. */
.tg-burbuja.tg-previa{flex:none;opacity:.75}

/* ---- la ilustracion de la Solucion 04 ----
   "Mis procesos" como tablero, con las notas, el estado y la fecha limite
   flotando delante, como en la maqueta. */
@media (min-width:1080px){
  #sol-04.sol-detalle{grid-template-columns:.62fr 1.9fr .7fr;gap:22px}
}
.propuestas{position:relative;display:grid;padding-top:40px;font-size:11px}
.propuestas b{font-weight:740;color:var(--ink)}
.propuestas em{font-style:normal;color:var(--ink-3)}
.pr-resumen{position:absolute;z-index:2;top:0;right:18px;display:flex;
  align-items:center;gap:14px;padding:10px 14px;border-radius:14px;
  background:var(--surface);border:1px solid var(--border);
  box-shadow:0 14px 30px -14px rgba(9,20,40,.35)}
.pr-resumen div{display:grid;line-height:1.25}
.pr-resumen b{font-size:15px;letter-spacing:-.02em}
.pr-app{border-radius:18px;background:var(--surface);border:1px solid var(--border);
  box-shadow:0 20px 50px -20px rgba(9,20,40,.24);overflow:hidden}
.pr-cab{display:flex;align-items:center;gap:18px;padding:11px 14px;
  border-bottom:1px solid var(--border)}
.pr-logo{display:inline-flex;align-items:center;gap:5px;font-weight:800;
  font-size:13px;color:var(--ink);letter-spacing:-.02em}
.pr-logo i{font-style:normal;color:var(--accent)}
.pr-logo img.logo{height:14px;width:auto}
.pr-tabs{flex:1;display:flex;gap:14px;color:var(--ink-2)}
.pr-tabs .on{color:var(--ink);font-weight:700;box-shadow:0 13px 0 -11px var(--accent)}
.pr-yo,.pr-pie u{display:grid;place-items:center;border-radius:50%;
  font-weight:750;text-decoration:none}
.pr-yo{width:26px;height:26px;background:var(--info);color:#fff;font-size:10px}
.pr-tablero{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;
  padding:10px 10px 64px}
.pr-col{display:grid;align-content:start;gap:7px}
.pr-col-cab{display:flex;align-items:center;gap:6px;margin:0;padding:8px 9px;
  border-radius:10px;background:color-mix(in srgb,var(--c) 10%,var(--surface));
  font-weight:720;color:var(--ink)}
.pr-col-cab i{width:8px;height:8px;border-radius:50%;background:var(--c)}
.pr-col-cab b{margin-left:auto;font-size:.95em;color:var(--ink-2)}
.c-azul{--c:#3b82f6} .c-oro{--c:var(--accent)} .c-lila{--c:#8b5cf6} .c-verde{--c:#16a34a}
.pr-op{display:grid;grid-template-columns:auto 1fr;gap:2px 8px;padding:9px;
  border-radius:11px;border:1px solid var(--border);background:var(--surface)}
.pr-op .bd-ico{grid-row:span 1;width:26px;height:26px}
.pr-op b{align-self:center;line-height:1.28;font-size:10.5px}
.pr-op strong,.pr-op em,.pr-pie{grid-column:1/-1}
.pr-op strong{margin-top:5px;font-size:12px;font-weight:800;color:var(--ink);
  letter-spacing:-.02em}
.pr-pie{display:flex;justify-content:space-between;align-items:center;
  margin-top:4px;color:var(--ink-3);font-size:.92em}
.pr-pie u{width:20px;height:20px;background:var(--surface-2);color:var(--ink-2);
  border:1px solid var(--border);font-size:8.5px}

.pr-flotan{display:grid;grid-template-columns:1fr 1.1fr .8fr;gap:14px;
  align-items:end;margin:-56px 6px 0;position:relative;z-index:1}
.pr-flotan > div{border-radius:14px;background:var(--surface);
  border:1px solid var(--border);box-shadow:0 16px 34px -14px rgba(9,20,40,.38)}
.pr-notas{display:grid;gap:4px;padding:10px 12px;transform:rotate(-3deg)}
.pr-notas p{margin:0;color:var(--ink-2);line-height:1.45}
.pr-notas small{color:var(--ink-3);font-size:9px}
.pr-hecho{display:flex;align-items:center;gap:10px;padding:11px 13px;
  border-color:color-mix(in srgb,var(--good) 35%,var(--border)) !important}
.pr-hecho div{display:grid;gap:1px;line-height:1.3}
.pr-hecho b{color:var(--good)}
.pr-check{width:30px;height:30px;flex:none;border-radius:50%;display:grid;
  place-items:center;background:var(--good)}
.pr-check svg{width:16px;height:16px;fill:none;stroke:#fff;stroke-width:3;
  stroke-linecap:round;stroke-linejoin:round}
.pr-limite{display:flex;align-items:center;gap:10px;padding:10px 12px;
  transform:rotate(5deg);background:color-mix(in srgb,var(--crit) 6%,var(--surface)) !important}
.pr-limite div{display:grid;line-height:1.25}
.pr-limite b{font-size:14px}
.pr-limite small{color:var(--ink-3);font-size:9.5px}

@media (max-width:1080px){
  .propuestas{max-width:720px;margin:0 auto;width:100%}
}
@media (max-width:760px){
  .pr-tabs,.pr-col:nth-child(n+3){display:none}
  .pr-tablero{grid-template-columns:1fr 1fr}
  .pr-flotan{grid-template-columns:1fr;margin-top:-40px}
  .pr-notas,.pr-limite{transform:none}
  .pr-resumen{position:static;margin-bottom:10px}
  .propuestas{padding-top:0}
}

/* Las cinco ventajas, ensartadas en una linea como en la maqueta. Cinco no
   caben con el hueco de las cuatro de las otras diapositivas. */
.al-ventajas{position:relative;gap:16px}
.al-ventajas::before{content:"";position:absolute;left:20px;top:21px;bottom:21px;
  border-left:2px dotted var(--oro-borde)}
.al-ventajas .vent-ico{position:relative;background:var(--surface)}

@media (max-width:1080px){
  .alertas{max-width:640px;margin:0 auto;width:100%}
}
@media (max-width:760px){
  .alertas{grid-template-columns:1fr}
  .al-panel{display:none}
  .al-movil{max-width:300px;margin:0 auto;width:100%}
}

/* ---- la banda de ejemplos ---- */
.mcp-ejemplos{list-style:none;margin:26px 0 0;padding:26px 30px;display:grid;
  gap:26px 0;border-radius:18px;background:var(--oro-suave);
  border:1px solid var(--oro-borde);
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.mcp-ejemplos li{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;
  align-items:start;padding:0 26px}
/* El icono va DESNUDO, sin pastilla detras: en la maqueta es el trazo dorado
   sobre la banda, y la pastilla blanca le quitaba tamano y lo encajonaba. */
.mcp-ejemplos .ej-ico{grid-row:span 2;display:grid;place-items:start center;
  padding-top:1px}
.mcp-ejemplos .ej-ico svg{width:26px;height:26px;fill:none;
  stroke:var(--accent-3);stroke-width:1.75;stroke-linecap:round;
  stroke-linejoin:round}
/* La raya que separa uno de otro. Va en el hermano y no en el propio `li`
   para que el primero de cada FILA no la lleve: con `auto-fit`, cuando la
   rejilla envuelve, un `:not(:first-child)` dejaria una raya suelta al
   principio de la segunda fila. */
.mcp-ejemplos li + li{border-left:1px solid var(--oro-borde)}
.mcp-ejemplos li:first-child{padding-left:0}
.mcp-ejemplos h3{margin:0;font-size:14px;font-weight:760;color:var(--ink)}
.mcp-ejemplos p{margin:0;font-size:12.5px;line-height:1.55;color:var(--ink-2)}
/* En una sola columna la raya vertical no separa nada: estorba. */
@media (max-width:620px){
  .mcp-ejemplos{padding:22px;gap:20px 0}
  .mcp-ejemplos li{padding:0}
  .mcp-ejemplos li + li{border-left:0}
}

/* ---- la franja de cifras, ahora como banda dorada ---- */
.cifras{border:1px solid var(--oro-borde);border-radius:18px;
  background:var(--oro-suave);padding:24px 30px;margin-top:34px;
  grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
.cifras .dato + .dato{border-left:1px solid var(--oro-borde)}
.cifras .dato:first-child{border-left:0}
@media (max-width:760px){
  .cifras{padding:20px 22px}
  .cifras .dato + .dato{border-left:0;padding-left:0}
}

/* EL MOVIL ESTRECHO, DESPUES DE SUS REGLAS BASE (revision 2026-09-29). Vivia
   hacia la linea 780, y `main`, `.hero` y `.lead` se volvian a definir mas
   abajo: a 560 px nunca se aplicaban ni el relleno de las secciones ni el del
   heroe ni el tamaño del texto de entrada. Mismo peso, gana la ultima. */
@media (max-width:560px){
  section{padding:44px 0}
  section h2{font-size:22px}
  .hero-cta .btn{flex:1 1 100%}
  /* En un movil copia y ejemplo van apilados, y los dos tienen que caber en
     la misma pantalla: si el heroe se pasa de alto, lo primero que ve quien
     llega es media frase cortada. Se aprieta el conjunto en vez de dejar que
     empuje. El padding NO se sube aqui -- lo fija el min-height de arriba. */
  .hero{padding:24px 0;gap:22px}
  .lead{font-size:15.5px;margin-top:14px}
  .hero-cta{margin-top:20px;gap:10px}
  .graf{padding:12px 13px 9px}
  .spark{height:74px}
  .graf-ley{display:none}        /* con dos lineas y poco alto, sobra el mapa */
  .oport{padding:9px;gap:7px}
  .op-tit{font-size:12px}
  /* La tercera tarjeta sobra cuando falta sitio: el ejemplo ya se entiende
     con dos, y el heroe entero tiene que caber en la primera pantalla. */
  .op:nth-child(3){display:none}
  .tablero-pie{font-size:11.5px;padding:9px 12px}
}

/* ---- revision de codigo, 2026-09-29 ---- */
/* Texto solo para lectores de pantalla (el aviso del carrusel). */
.solo-lector{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.car-diap:focus{outline:none}
.car-diap:focus-visible{outline:2px solid var(--foco);outline-offset:4px;border-radius:12px}
/* En movil cada diapositiva mide lo suyo (antes todas heredaban los 1400 px
   de la mas alta) y ningun hijo de la rejilla puede ensanchar la pista: un
   elemento de rejilla trae min-width:auto y la Solucion 01 se salia 91 px. */
@media (max-width:760px){
  .car-pista{align-items:flex-start}
  .car-diap,.sol-detalle>*{min-width:0}
  .sol-detalle{grid-template-columns:minmax(0,1fr)}
  .alertas,.al-panel,.al-movil{min-width:0;max-width:100%}
  /* El aviso flotante sobresalia 14 px a la derecha a proposito, y en movil
     eso ensanchaba la diapositiva 11 px mas que la pista. */
  .al-toast{right:0}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .anim,.js .reveal,.js .op{opacity:1;transform:none;animation:none;transition:none}
  .hero::before{animation:none}
  /* La transicion entre paginas. Es la unica animacion de este fichero que
     no la dispara la pagina sino el NAVEGADOR, al navegar, asi que hay que
     apagarla por su propia familia de pseudoelementos: el comodin cubre la
     barra, el pie y el fundido del resto de una vez.
     `!important` porque la pone la hoja del navegador, que pesa mas que una
     regla de autor.
     Y va aqui arriba, no al final del bloque: la prueba que vigila este
     freno lo recorta buscando el cierre de la regla que viene justo debajo,
     y una `animation:` escrita despues de esa linea le parece codigo suelto
     aunque este dentro de estas mismas llaves. */
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*){animation:none !important}
  /* El galon de las preguntas frecuentes de /planes, que gira al abrir.
     Quien pidio menos movimiento no pidio menos en unas animaciones y no en
     otras.
     ARRIBA de .topbar y no al final del bloque, por lo mismo que explica el
     comentario de la transicion entre paginas: la prueba que vigila este
     freno recorta el bloque buscando el cierre de .topbar, y una
     `transition:` escrita despues de esa linea le parece codigo suelto
     aunque este dentro de estas mismas llaves. */
  .preg-lista summary::after{transition:none}
  /* LA CONVERSACION DEL MCP. Se queda en su estado FINAL, entera y a la
     vista: quien pide menos movimiento quiere leer lo mismo, no menos.
     El texto que se teclea y los tres puntos de "pensando" solo significan
     algo mientras algo se mueve, asi que ahi no se enseñan -- un cursor
     parado en mitad de un campo y unos puntos suspensivos quietos son ruido.
     ARRIBA de .topbar por lo que explican los dos comentarios de aqui
     encima: la prueba que vigila este freno recorta el bloque buscando el
     cierre de .topbar. */
  .js .mcp-chat .chat-tu,.js .mcp-chat .chat-uso,.js .mcp-chat .chat-ia,
  .js .mcp-chat .chat-res li,.js .mcp-chat .chat-ph{opacity:1;transform:none;
    animation:none}
  .js .mcp-chat .chat-teclea,.js .mcp-chat .chat-puntos{display:none}
  /* Los puntos que recorren los conectores del MCP. Parar la animacion los
     deja en su estado inicial, que es invisible -- y ahi esta bien: las
     lineas solas siguen diciendo que los paneles estan conectados. */
  .js .enlace-tr .pt{animation:none}
  /* El carrusel salta en vez de deslizar, y la tarjeta resaltada cambia
     sin levantarse: el resalte sigue, que es lo que informa. */
  .car-pista{scroll-behavior:auto}
  .sol,.car-flecha,.car-puntos i{transition:none}
  .sol.activa{transform:none}
  .topbar{transition:none}
  /* Estaba en un bloque propio pegado a la regla de .plan-card:hover, y la
     reescritura de la tarjeta se lo llevo por delante. Vive aqui, con los
     demas, que es donde la cascada lo hace valer. */
  .plan-card:hover{transform:none}
}
.alta-chk{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;line-height:1.5;margin:4px 0 12px;color:var(--ink-2,inherit);cursor:pointer}
.alta-chk input{margin-top:3px;flex:none;width:16px;height:16px;accent-color:var(--oro,#dea21e)}
.alta-chk a{color:var(--oro-texto);font-weight:650}