/* Monitor SEACE - portada publica.

   VA EN OSCURO SIEMPRE, igual que /entrar y por el mismo motivo: son las dos
   superficies publicas, la cara de la marca, y Avista es teal sobre pizarra.
   El producto de dentro (/app, /admin) sigue el tema del sistema como
   siempre -- el contraste entre la puerta oscura y el taller claro dice
   "estas dentro" sin gastar texto en decirlo.

   Esta hoja YA NO copia los tokens de static/styles.css. Los copiaba, y por
   eso esta pagina y la aplicacion se movian juntas; ahora son dos registros
   distintos a proposito, asi que copiarlos solo servia para que un cambio
   alla rompiera el contraste aqui. Los colores de abajo salen del icono:
   #2ae3d7 (el teal), #3e494f y #646f75 (la pizarra) estan contados sobre los
   pixeles de avista-icono.png.

   Contraste medido sobre --bg #05100f:
     --ink    #e6f4f2  -> 15,8:1      --ink-2 #9fb8b6 -> 8,3:1
     --ink-3  #7d9694  -> 5,5:1       --accent #2ae3d7 -> 11,8:1
   El teal se usa como TEXTO (el eyebrow, la palabra del titular, los
   enlaces) y como FONDO del boton primario con tinta oscura encima: en los
   dos sentidos pasa AA de sobra. */
:root{
  --bg:#05100f; --bg-2:#030b0b;
  --surface:#0a1a1a; --surface-2:#0d2120; --border:#1d3634; --border-2:#28524e;
  --ink:#e6f4f2; --ink-2:#9fb8b6; --ink-3:#7d9694;
  --accent:#2ae3d7; --accent-2:#7cf0e7; --accent-ink:#04201d;
  --good:#34d399; --good-bg:#07271d;
  --warn:#fbbf24; --warn-bg:#2a1f07;
  --crit:#ff9b9b; --crit-bg:#3a1a1c; --crit-line:#5f2a2d;
  /* SIN desenfoque ancho. Una sombra negra de 50 px sobre un fondo casi
     negro no da profundidad: lo que hace es oscurecer un area grande cuyo
     borde SI se ve, y el panel acaba rodeado de un rectangulo redondeado
     mas oscuro que el resto. En una pagina oscura la profundidad la dan el
     filete y que el panel sea mas claro que el fondo, no la sombra. */
  --shadow:0 1px 2px rgba(0,0,0,.55);
  /* Desenfoque ancho y MUY tenue. A .10 sobre 70px el degradado llegaba a
     tener borde visible y se leia como un rectangulo gris alrededor del
     panel, no como un resplandor. */
  /* Ceñido a la forma, sin desplazamiento vertical: con 90px y un
     desplazamiento, el resplandor se separaba del panel y se leia como una
     segunda caja detras en vez de como un borde encendido. */
  --glow:0 0 0 1px rgba(42,227,215,.13), 0 0 42px rgba(42,227,215,.07);
  --radius:14px;
  --sans:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --top-h:64px;
  --ease:cubic-bezier(.4,0,.2,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
/* 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.6;-webkit-font-smoothing:antialiased}
h1,h2,h3{margin:0;font-weight:750;letter-spacing:-.025em;text-wrap:balance}
p{margin:0}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%}
ul{margin:0;padding:0;list-style:none}
.tnum{font-variant-numeric:tabular-nums}
/* EL ATRIBUTO `hidden` TIENE QUE GANAR, SIEMPRE.
   Lo pone el navegador con `display:none` desde su hoja de usuario-agente,
   que pierde contra CUALQUIER regla de autor con `display`. Y esta hoja
   tiene una: `.btn{display:inline-flex}`.

   Consecuencia real, y llevaba ahi desde que existe esta pagina: el boton
   "Crear mi cuenta" del heroe nace con `hidden` y solo lo destapa
   portada.js cuando hay algun plan publicado -- porque sin planes
   registro.alta contesta 400 y ofrecer el alta seria prometer lo que la API
   rechaza. Pero `.btn` anulaba ese `hidden` y el boton se ha estado viendo
   SIEMPRE, con la tabla `planes` vacia. La prueba que lo cubre comprueba
   que el atributo este ESCRITO en el documento, no que llegue a ocultar
   algo, asi que pasaba en verde mientras el boton se veia.
   Las otras dos hojas del proyecto (static y static-admin) ya traian esta
   regla; esta era la unica que no. */
[hidden]{display:none !important}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:8px}

/* ---- movimiento --------------------------------------------------------
   Una sola pieza automatica: la entrada escalonada del heroe al cargar, que
   pasa una vez. Mas el radar del panel, que es el unico bucle de la pagina y
   se explica en su propio comentario.

   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. */
/* EL ESTADO VISIBLE ES EL DE LA REGLA, NO EL DEL FINAL DE LA ANIMACION.
   Antes esto ponia `opacity:0` en la regla base y lo deshacia con
   `forwards`: el contenido solo existia SI la animacion llegaba a correr y
   a terminar. El guardian de `html.js` cubria "no hay JavaScript", pero no
   cubre "la animacion no corrio" -- y ahi el heroe entero se queda en
   negro. Se vio en un render sin cabeza: titular, texto, botones y panel,
   todo invisible.

   Con `backwards` el elemento toma el estado de `from` SOLO durante el
   retraso y vuelve a su estado natural -- opacidad 1, sin desplazar -- al
   acabar, porque el final ya no lo fija nadie. Mismo efecto exacto a la
   vista, y el modo de fallo pasa de "invisible" a "visible sin animar",
   que es el unico modo de fallo aceptable para una portada. */
.js .anim{animation:entra .55s cubic-bezier(.22,.61,.36,1) backwards;
  animation-delay:var(--d,0ms)}
@keyframes entra{from{opacity:0;transform:translateY(14px)}}

/* Quien pidio menos movimiento en su sistema lo pidio por algo. Se queda el
   estado final, no el camino -- y se queda VISIBLE, que es lo que importa. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .anim{opacity:1;transform:none;animation:none}
  .hero::before,.r-barrido,.barra i,.punto{animation:none}
  .topbar{transition:none}
}

/* ---- barra superior ---- */
.topbar{position:sticky;top:0;z-index:20;height:var(--top-h);
  transition:height .2s var(--ease),background .2s ease,border-color .2s ease;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:0 clamp(16px,4vw,48px);
  background:color-mix(in srgb,var(--bg-2) 82%,transparent);
  backdrop-filter:blur(14px);border-bottom:1px solid transparent}
/* Al bajar, la barra se despega con un filete: dice "ya no estas arriba" sin
   ocupar sitio para decirlo. */
.topbar.abajo{height:56px;border-bottom-color:var(--border)}
.topbar.abajo .brand img{width:26px;height:26px}
.brand{display:flex;align-items:center;gap:11px;font-weight:700;font-size:17px;
  letter-spacing:-.02em}
.brand img{object-fit:contain;transition:width .2s var(--ease),height .2s var(--ease)}

/* ---- botones ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  border:1px solid var(--border-2);background:transparent;color:var(--ink);
  padding:13px 26px;border-radius:999px;font-weight:650;font-size:15px;
  font-family:inherit;cursor:pointer;white-space:nowrap;
  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}
.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);
  box-shadow:0 8px 28px color-mix(in srgb,var(--accent) 30%,transparent)}
.btn.primary:hover{box-shadow:0 12px 38px color-mix(in srgb,var(--accent) 42%,transparent)}
.btn.ghost{background:color-mix(in srgb,var(--surface) 70%,transparent)}
.btn.ancho{width:100%}
.flecha{font-size:1.05em;line-height:1}
@media (prefers-reduced-motion:reduce){.btn:hover{transform:none}}

main{max-width:1320px;margin:0 auto;padding:0 clamp(16px,4vw,48px) 96px}
section{padding:80px 0}
section h2{font-size:clamp(28px,3.6vw,44px);margin-bottom:26px;line-height:1.1}

/* ---- heroe ----
   Ocupa la pantalla: al abrir no se ve nada mas. `svh` y no `vh` -- en un
   movil `vh` cuenta con la barra del navegador retraida y deja el heroe mas
   alto que la pantalla real. */
.hero{position:relative;display:grid;gap:48px;align-content:center;align-items:center;
  min-height:calc(100svh - var(--top-h));padding:48px 0}
@media (min-width:1000px){.hero{grid-template-columns:1fr 1.08fr;gap:56px}}

/* El resplandor y los anillos del fondo. Pesan cero -- son degradados, no
   imagenes -- y los anillos no son adorno generico: son el icono de Avista
   ampliado, el mismo radar que da nombre a la marca. Van en ::before para
   que ninguna de las dos piezas necesite un elemento en el HTML. */
.hero::before{content:"";position:absolute;inset:-20% -50% -10%;z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(42% 52% at 72% 38%, color-mix(in srgb,var(--accent) 16%,transparent), transparent 68%),
    radial-gradient(38% 44% at 18% 30%, color-mix(in srgb,var(--accent) 9%,transparent), transparent 70%),
    radial-gradient(60% 60% at 50% 100%, var(--bg-2), transparent 70%);
  filter:blur(30px);
  animation:aurora 16s ease-in-out infinite alternate}
@keyframes aurora{
  from{transform:scale(1)}
  to  {transform:scale(1.1) translateY(-16px)}
}
/* Los anillos concentricos, detras del panel. `repeating-radial-gradient` y
   no un SVG: un filete de un pixel cada 90 px, sin un solo nodo en el
   documento y sin nada que descargar por el tunel. */
.hero::after{content:"";position:absolute;z-index:-1;pointer-events:none;
  right:-22%;top:50%;width:min(1100px,105vw);aspect-ratio:1;
  transform:translateY(-50%);border-radius:50%;
  background:repeating-radial-gradient(circle at center,
    transparent 0 88px,
    color-mix(in srgb,var(--accent) 9%,transparent) 88px 89px);
  -webkit-mask-image:radial-gradient(circle at center,#000 30%,transparent 72%);
  mask-image:radial-gradient(circle at center,#000 30%,transparent 72%)}
@media (max-width:1000px){.hero::after{display:none}}

/* El eyebrow va en versalitas ANCHAS. Es el unico sitio de la pagina donde
   se usan mayusculas, y aqui se ganan el sitio: es la etiqueta de categoria
   que dice de que va esto antes de que el titular te pida atencion. */
.eyebrow{font-size:12.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.16em;color:var(--accent);margin-bottom:22px}
.hero h1{font-size:clamp(34px,5.4vw,60px);line-height:1.06;letter-spacing:-.035em;
  font-weight:800}
/* La palabra en teal es la unica que se destaca en toda la pagina, y es la
   palabra del producto: "oportunidades". <em> y no <span>: un lector de
   pantalla tambien la enfatiza. */
.hero h1 em{color:var(--accent);font-style:normal}
.lead{margin-top:20px;font-size:clamp(15.5px,1.3vw,17.5px);color:var(--ink-2);max-width:52ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}

/* ---- el panel de ejemplo ----
   Es el producto en una imagen. Va marcado como ejemplo (ver el comentario
   en index.html): lleva punto verde y "SEACE conectado", que dicen "ahora",
   y no hay ninguna ruta publica que sirva estas cifras. */
.panel-demo{background:linear-gradient(160deg,var(--surface),var(--bg-2));
  border:1px solid var(--border-2);border-radius:20px;padding:18px;
  box-shadow:var(--shadow),var(--glow);display:flex;flex-direction:column;gap:14px}

.pd-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pd-nombre{font-weight:700;letter-spacing:-.02em;font-size:15.5px;margin-right:auto}
.pd-estado{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;
  color:var(--good);background:var(--good-bg);border:1px solid color-mix(in srgb,var(--good) 30%,transparent);
  border-radius:999px;padding:4px 11px}
.punto{width:7px;height:7px;border-radius:50%;background:var(--good);flex:none;
  animation:late 2.4s ease-in-out infinite}
@keyframes late{0%,100%{opacity:1}50%{opacity:.3}}
/* La marca de ejemplo. Discreta pero legible -- no es letra pequena de
   descargo, es parte de lo que la tarjeta dice. */
.pd-ejemplo{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;
  color:var(--ink-3);border:1px solid var(--border);border-radius:999px;padding:3px 10px}

.pd-scan{display:flex;align-items:center;gap:16px;background:var(--surface-2);
  border:1px solid var(--border);border-radius:14px;padding:16px}
.pd-scan-txt{min-width:0;flex:1}
.pd-tit{font-weight:700;font-size:16px;letter-spacing:-.02em}
.pd-sub{font-size:13px;color:var(--ink-2);margin-top:3px}
.barra{height:4px;border-radius:3px;background:var(--border);margin-top:12px;overflow:hidden}
.barra i{display:block;height:100%;width:55%;border-radius:3px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  animation:progresa 3.4s var(--ease) infinite}
@keyframes progresa{0%{width:12%}55%{width:72%}100%{width:12%}}

/* El radar. UNICO bucle de la pagina, y esta aqui porque no decora: el icono
   de Avista es este dibujo, el nombre de la marca es lo que hace, y el
   producto literalmente barre y avisa. Un solo movimiento que significa algo
   vale mas que seis fundidos repartidos. */
.radar{flex:none;width:96px;height:96px}
.radar svg{width:100%;height:100%;overflow:visible}
.r-anillo{fill:none;stroke:var(--border-2);stroke-width:1.2}
.r-eje{stroke:var(--border-2);stroke-width:1;opacity:.55}
.r-barrido{transform-origin:60px 60px;animation:barre 4s linear infinite}
.r-barrido path{fill:var(--accent);opacity:.20}
@keyframes barre{to{transform:rotate(360deg)}}
.r-nodo{fill:var(--accent);opacity:.35}
.r-nodo.n1{animation:pinta 4s linear infinite .45s}
.r-nodo.n2{animation:pinta 4s linear infinite 2.1s}
.r-nodo.n3{animation:pinta 4s linear infinite 3.2s}
/* Cada nodo se enciende cuando el barrido le pasa por encima y se apaga
   despacio, como en un radar de verdad. Los retrasos son las posiciones. */
@keyframes pinta{0%{opacity:1}35%,100%{opacity:.3}}
.r-centro{fill:var(--accent)}

.pd-cifras{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.pd-dato{display:flex;flex-direction:column;background:var(--surface-2);
  border:1px solid var(--border);border-radius:14px;padding:14px}
.pd-ico{width:22px;height:22px;fill:none;stroke:var(--accent);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;margin-bottom:10px}
.pd-n{font-size:28px;font-weight:780;letter-spacing:-.035em;line-height:1.1}
.pd-q{font-size:12px;color:var(--ink-2);margin-top:3px;line-height:1.35}
.pd-cuando{font-size:11px;color:var(--ink-3);margin-top:5px}

.pd-pie{display:flex;flex-wrap:wrap;gap:14px 24px;align-items:center;
  background:var(--surface-2);border:1px solid var(--border);border-radius:14px;padding:14px 16px}
.pd-act{display:flex;align-items:center;gap:10px;margin-right:auto}
.pd-act svg{width:20px;height:20px;flex:none;fill:none;stroke:var(--ink-3);
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.pd-act-lbl{display:block;font-size:11.5px;color:var(--ink-3)}
.pd-act-val{display:block;font-size:13px;font-weight:650}
.pd-checks{display:grid;gap:5px}
.pd-checks li{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-2)}
/* El palote en CSS y no un <svg> por cada linea: son tres, iguales, y
   meterlos en el documento solo alarga lo que hay que leer. */
.pd-checks li::before{content:"";width:11px;height:6px;flex:none;
  border-left:2px solid var(--good);border-bottom:2px solid var(--good);
  transform:rotate(-45deg) translate(1px,-2px)}

@media (max-width:560px){
  .pd-cifras{grid-template-columns:1fr}
  .pd-scan{flex-direction:column;align-items:flex-start;gap:12px}
  .radar{width:72px;height:72px}
}

/* ---- cifras reales ----
   Un panel, no dos filetes al aire. Son las unicas cifras comprobables de
   la pagina (el panel del heroe va marcado como ejemplo) y encerrarlas las
   presenta como lo que son: el respaldo, no un adorno entre secciones. */
.cifras-sec{padding:0}
.cifras{display:grid;grid-template-columns:1fr 1fr 1.18fr;
  background:linear-gradient(160deg,var(--surface),var(--bg-2));
  border:1px solid var(--border-2);border-radius:18px;
  box-shadow:var(--shadow),var(--glow)}
.dato{display:flex;align-items:center;gap:18px;padding:26px 30px}
/* El filete VA ENTRE celdas, con border-left en las que no son la primera:
   asi no sobra uno al final y desaparece solo cuando se apilan. */
.dato + .dato{border-left:1px solid var(--border)}
.dato-ico{width:30px;height:30px;flex:none;fill:none;stroke:var(--accent);
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.dato-txt{min-width:0}
.dato .n{display:block;font-size:32px;font-weight:780;letter-spacing:-.03em;
  color:var(--accent);line-height:1.15}
.dato .q{display:block;font-size:13px;color:var(--ink-2);margin-top:2px}
@media (max-width:900px){
  .cifras{grid-template-columns:1fr}
  .dato + .dato{border-left:none;border-top:1px solid var(--border)}
}

/* ---- como funciona ---- */
/* El titulo con la segunda palabra en teal y su filete debajo. Mismo recurso
   que el titular del heroe y usado con la misma disciplina: UNA palabra, la
   que nombra la accion. <em> y no <span> -- un lector de pantalla tambien la
   enfatiza. */
.como h2 em{color:var(--accent);font-style:normal}
.como h2{margin-bottom:14px}
.como h2::after{content:"";display:block;width:52px;height:3px;border-radius:2px;
  background:var(--accent);margin-top:14px}

.pasos{list-style:none;margin:36px 0 0;padding:0;display:grid;gap:28px 60px;
  grid-template-columns:repeat(auto-fit,minmax(270px,1fr))}
.pasos li{position:relative;display:block;
  background:linear-gradient(165deg,var(--surface),var(--bg-2));
  border:1px solid color-mix(in srgb,var(--accent) 22%,var(--border));
  border-radius:18px;padding:26px;
  box-shadow:var(--shadow);
  transition:transform .18s ease,border-color .18s ease}
.pasos li:hover{transform:translateY(-2px);border-color:var(--accent)}
@media (prefers-reduced-motion:reduce){.pasos li:hover{transform:none}}

/* LAS FLECHAS ENTRE TARJETAS. No son adorno: la seccion es una secuencia de
   dependencia real -- no se avisa de lo que no se ha juzgado, ni se juzga lo
   que no se ha bajado -- y la flecha es lo que dice que el orden importa.
   Van en el hueco de la rejilla, con `left:100%`, asi que no hay ni un nodo
   de mas en el documento. El dibujo entero (linea, punto y galon) es un SVG
   en el propio CSS por lo de siempre: esta pagina se sirve por el tunel y un
   archivo externo que no cargue deja el hueco vacio. */
@media (min-width:900px){
  .pasos li:not(:last-child)::after{
    content:"";position:absolute;top:63px;left:100%;width:60px;height:14px;
    transform:translateY(-50%);pointer-events:none;
    background:no-repeat center/contain
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='14' viewBox='0 0 60 14'%3E%3Cpath d='M2 7h20M28 7h20' fill='none' stroke='%232ae3d7' stroke-opacity='.5' stroke-width='1.2' stroke-linecap='round'/%3E%3Ccircle cx='25' cy='7' r='2.4' fill='%232ae3d7'/%3E%3Cpath d='m52 2.5 4.5 4.5L52 11.5' fill='none' stroke='%232ae3d7' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
}

.paso-cab{display:flex;align-items:center;gap:18px;margin-bottom:22px}
/* El numero en circulo perfilado, no en cuadrado macizo: al lado de la
   insignia redonda del icono, un cuadrado se lee como otra cosa distinta en
   vez de como su pareja. */
.pasos .num{width:34px;height:34px;border-radius:50%;display:grid;flex:none;
  place-items:center;border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);
  background:color-mix(in srgb,var(--accent) 9%,transparent);
  color:var(--accent);font-weight:700;font-size:14.5px}
.pasos h3{font-size:19px;margin:0;letter-spacing:-.02em}
.pasos h3 em{color:var(--accent);font-style:normal}
.pasos p{font-size:14.5px;color:var(--ink-2);margin-top:10px}

/* Los iconos de "como funciona". Cada uno ensena su propio paso: la lupa
   recorre las convocatorias, el embudo descarta cuatro y deja pasar una,
   el avion se va. Van en SVG dentro del CSS a proposito: esta pagina se
   sirve por el tunel y un archivo externo que no cargue deja el cuadro
   vacio. */
.ico-caja{display:grid;place-items:center;width:84px;height:84px;flex:none;
  border-radius:50%;overflow:hidden;
  background:radial-gradient(circle at 50% 42%,
    color-mix(in srgb,var(--accent) 13%,transparent), transparent 70%);
  border:1px solid color-mix(in srgb,var(--accent) 32%,transparent);
  box-shadow:0 0 22px color-mix(in srgb,var(--accent) 12%,transparent)}
/* 58 y no 84: el dibujo tiene que caber DENTRO del circulo con su animacion.
   La lupa llega a x=59 de las 64 unidades del viewBox y las gotas salen por
   abajo -- a tamaño completo, la insignia redonda les cortaria el recorrido
   justo donde se explica el paso. El trazo se adelgaza en la misma
   proporcion para que se vea del mismo grosor que el resto de iconos. */
.ico{width:58px;height:58px;fill:none;stroke:var(--accent);stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round}
.ico .lineas{stroke:var(--ink-2);opacity:.55}
.ico .lupa{animation:barre 7s ease-in-out infinite}
@keyframes barre{
  0%,4%{transform:translate(17px,18px)}
  26%{transform:translate(43px,18px)}
  34%,38%{transform:translate(19px,31px)}
  60%{transform:translate(50px,31px)}
  68%,72%{transform:translate(17px,44px)}
  92%,100%{transform:translate(35px,44px)}
}
.ico .gota{fill:var(--ink-2);stroke:none;opacity:0}
.ico .g1{animation:descarta-izq 4.4s ease-in infinite}
.ico .g2{animation:descarta-der 4.4s ease-in infinite .55s}
.ico .g4{animation:descarta-izq 4.4s ease-in infinite 1.65s}
.ico .g3{fill:var(--accent);animation:aprueba 4.4s ease-in infinite 1.1s}
@keyframes descarta-izq{
  0%{transform:translateY(-16px);opacity:0}
  18%{opacity:1}
  46%{transform:translateY(13px);opacity:1}
  72%,100%{transform:translate(-20px,27px);opacity:0}
}
@keyframes descarta-der{
  0%{transform:translateY(-16px);opacity:0}
  18%{opacity:1}
  46%{transform:translateY(13px);opacity:1}
  72%,100%{transform:translate(20px,27px);opacity:0}
}
@keyframes aprueba{
  0%{transform:translateY(-16px);opacity:0}
  18%{opacity:1}
  50%{transform:translateY(16px);opacity:1}
  88%{transform:translateY(50px);opacity:1}
  100%{transform:translateY(56px);opacity:0}
}
.ico .avion{animation:vuela 4s ease-in-out infinite}
@keyframes vuela{
  0%,12%{transform:translate(0,0);opacity:1}
  62%{transform:translate(7px,-6px);opacity:1}
  82%{transform:translate(24px,-20px);opacity:0}
  83%{transform:translate(-18px,15px);opacity:0}
  100%{transform:translate(0,0);opacity:1}
}
.ico .estela{stroke:var(--accent);opacity:.35;animation:estela 4s ease-in-out infinite}
@keyframes estela{0%,12%{opacity:0}40%{opacity:.5}82%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){
  .ico .lupa,.ico .gota,.ico .avion,.ico .estela{animation:none}
  .ico .gota{opacity:1}
  .ico .g1{transform:translate(-14px,20px)}
  .ico .g2{transform:translate(14px,20px)}
  .ico .g3{transform:translateY(34px)}
  .ico .g4{transform:translate(-20px,8px)}
  .ico .lupa{transform:translate(43px,31px)}
}

/* ---- planes ---- */
/* La cabecera: a la izquierda lo que se elige, a la derecha lo que trae
   cualquiera de los tres. Las tres ventajas NO son de un plan -- son de la
   plataforma -- y por eso van fuera de las tarjetas: repetidas dentro,
   invitarian a configurarlas distinto en cada una. */
.planes-cab{display:grid;gap:36px;margin-bottom:44px;align-items:center}
@media (min-width:1000px){.planes-cab{grid-template-columns:.92fr 1.08fr;gap:48px}}
.planes-cab .eyebrow{margin-bottom:14px}
.planes-cab h2{margin-bottom:16px}
.planes-cab h2 em{color:var(--accent);font-style:normal}
.planes-cab .lead{margin-top:0;font-size:16px}

.ventajas{display:grid;gap:22px}
@media (min-width:560px){.ventajas{grid-template-columns:repeat(3,1fr);gap:0}}
.ventajas li{display:flex;gap:12px;align-items:flex-start;padding:0 16px}
/* Filete entre ventajas, no alrededor: separa sin encajonar, y se va solo
   cuando se apilan. */
@media (min-width:560px){.ventajas li + li{border-left:1px solid var(--border)}}
.ventajas li:first-child{padding-left:0}
.ventajas svg{width:26px;height:26px;flex:none;fill:none;stroke:var(--accent);
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.ventajas b{display:block;font-size:14px;font-weight:700;letter-spacing:-.01em}
.ventajas span{display:block;font-size:12.5px;color:var(--ink-2);margin-top:3px}

.planes-grid{display:grid;gap:22px;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.plan-card{position:relative;
  background:linear-gradient(165deg,var(--surface),var(--bg-2));
  border:1px solid color-mix(in srgb,var(--accent) 22%,var(--border));
  border-radius:18px;padding:26px;box-shadow:var(--shadow);
  display:flex;flex-direction:column;gap:16px;
  transition:transform .18s ease,border-color .18s ease}
.plan-card:hover{transform:translateY(-3px);border-color:var(--accent)}
@media (prefers-reduced-motion:reduce){.plan-card:hover{transform:none}}

/* EL DESTACADO. Mas grande, el borde encendido y el boton macizo: tres
   señales, no solo el color, porque la insignia de arriba tiene que poder
   faltar -- ninguna tarjeta es destacada de fabrica. Lo marca la columna
   `destacado` (migracion 0027) y como mucho lo lleva UNA. */
.plan-card.destacado{border-color:var(--accent);
  box-shadow:var(--shadow),0 0 0 1px var(--accent),0 0 48px color-mix(in srgb,var(--accent) 22%,transparent)}
@media (min-width:1000px){.plan-card.destacado{transform:scale(1.035)}
  .plan-card.destacado:hover{transform:scale(1.035) translateY(-3px)}}
@media (prefers-reduced-motion:reduce){
  .plan-card.destacado,.plan-card.destacado:hover{transform:none}}
.popular{position:absolute;top:16px;right:16px;display:inline-flex;
  align-items:center;gap:6px;background:var(--accent);color:var(--accent-ink);
  border-radius:999px;padding:5px 13px;font-size:12px;font-weight:700}
.popular .estrella{width:13px;height:13px;fill:currentColor;stroke:none}

.plan-cab{display:flex;align-items:center;gap:14px;
  /* Sitio para la insignia, y SOLO en esta fila: reservarlo en todo el
     bloque le robaba el ancho a la descripcion y la partia en tres lineas
     dentro de una columna estrecha, justo en la tarjeta que mas se mira. */
  padding-right:104px}
.plan-card:not(.destacado) .plan-cab{padding-right:0}
.plan-ico{display:grid;place-items:center;width:52px;height:52px;flex:none;
  border-radius:14px;
  background:color-mix(in srgb,var(--accent) 11%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 30%,transparent)}
.plan-ico svg{width:26px;height:26px;fill:none;stroke:var(--accent);
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.plan-card h3{font-size:22px;letter-spacing:-.025em}
.plan-card .descripcion{font-size:13.5px;color:var(--ink-2);margin:-6px 0 0}

/* El precio, encerrado: es lo que se compara entre tarjetas y encerrarlo lo
   separa del resto del texto sin gritarlo. */
.plan-card .precio{font-size:34px;font-weight:780;letter-spacing:-.035em;
  background:var(--surface-2);border:1px solid var(--border);
  border-radius:12px;padding:14px 18px}
.plan-card .precio small{font-size:14px;font-weight:600;color:var(--ink-3);
  letter-spacing:0}

.plan-card ul{list-style:none;margin:0;padding:0;display:grid;gap:11px;
  font-size:14px;color:var(--ink-2)}
.plan-card li{display:flex;align-items:flex-start;gap:11px}
/* El palote en un circulo, en CSS: son cuatro como mucho y meter un <svg>
   por renglon solo alarga lo que hay que leer en el JavaScript. */
.plan-card li::before{content:"";flex:none;width:19px;height:19px;margin-top:1px;
  border-radius:50%;background:color-mix(in srgb,var(--accent) 16%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19 19'%3E%3Cpath d='m5.5 9.7 2.6 2.6 5.4-5.6' fill='none' stroke='%232ae3d7' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}

/* El boton se ancla abajo. Con descripciones de largo distinto -- los planes
   reales miden 35, 130 y 61 caracteres -- 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 con menos renglones que las otras. */
.plan-card .btn{margin-top:auto}
/* En las que no destacan, el boton va perfilado: el macizo se reserva para
   la que el socio humano quiere que se elija. */
.plan-card:not(.destacado) .btn.primary{background:transparent;
  color:var(--ink);border-color:var(--border-2);box-shadow:none}
.plan-card:not(.destacado) .btn.primary:hover{border-color:var(--accent);
  color:var(--accent)}

/* El lema del cierre. Filetes a los lados en vez de una caja: cierra la
   seccion sin añadir otro recuadro a una pagina que ya tiene varios. */
.lema{display:flex;align-items:center;justify-content:center;gap:11px;
  margin-top:52px;font-size:12.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.14em;color:var(--ink-3)}
.lema svg{width:18px;height:18px;flex:none;fill:none;stroke:var(--accent);
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.lema::before,.lema::after{content:"";height:1px;flex:1;max-width:190px;
  background:linear-gradient(90deg,transparent,var(--border))}
.lema::after{background:linear-gradient(90deg,var(--border),transparent)}

/* ---- 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(--accent-2);
  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}

/* ---- pie ---- */
footer{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}

@media (max-width:560px){
  section{padding:44px 0}
  section h2{font-size:22px}
  .hero-cta .btn{flex:1 1 100%}
  /* En un movil el texto y el panel van apilados. El heroe deja de exigir
     la pantalla entera: con las dos piezas una encima de otra no caben, y
     forzarlo solo consigue que lo primero que se vea sea media frase
     cortada. Se deja crecer y que se desplace. */
  .hero{min-height:auto}
  .hero{padding:24px 0;gap:22px}
  .lead{font-size:15.5px;margin-top:14px}
  .hero-cta{margin-top:20px;gap:10px}
  .panel-demo{padding:14px;gap:12px;border-radius:16px}
  .pd-scan,.pd-pie,.pd-dato{padding:12px}
  /* El pie del panel es lo primero que sobra cuando falta sitio: sus tres
     palotes repiten lo que el resto de la pagina ya cuenta entero. */
  .pd-pie{display:none}
}
/* 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}
}