/* =================================================================
   Asesor-IA — Sitio público (www.asesor-ia.com.ar)
   Sitio estático, sin build ni dependencias — mismo criterio que la
   aplicación (index.html + js/*): HTML/CSS/JS clásico, portable, fácil de
   editar a mano. Paleta idéntica a la app (index.html) para que el
   pasaje sitio → app no se sienta como otro producto.
   ================================================================= */
:root{
  --bg-primary:#0A192F;
  --bg-secondary:rgba(23,42,69,0.6);
  --text-slate:#8892B0;
  --text-white:#E6F1FF;
  --gold:#D4AF37;
  --gold-soft:#E9C965;
  --cyan:#38C6D9;
  --cyan-soft:#7FE3EE;
  --purple:#9C7CFF;
  --purple-soft:#B49CFF;
  --border:rgba(148,163,184,0.28);
  --maxw:1100px;
  --glass-bg:rgba(23,42,69,0.42);
  --glass-border:rgba(148,163,184,0.22);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:linear-gradient(180deg,var(--bg-primary) 0%, #0d1f38 100%);
  background-attachment:fixed;
  color:var(--text-white);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.55;
  overflow-x:hidden;
}
a{color:inherit;}
img{max-width:100%;display:block;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px;}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:50;background:rgba(10,25,47,0.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--border);}
/* El header necesita más ancho que el resto de las secciones (8 links +
   2 botones no entran cómodos en los 1100px de --maxw) -- por eso tiene su
   propio max-width, en vez de compartir .wrap con el contenido. */
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:12px;padding-bottom:12px;max-width:1320px;}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0;}
.brand img{width:34px;height:34px;object-fit:contain;}
.brand-name{font-weight:800;font-size:17px;letter-spacing:.2px;}
.brand-sub{display:block;font-size:9.5px;color:var(--text-slate);text-transform:uppercase;letter-spacing:1px;}

.nav-toggle{display:none;}
.nav-toggle-label{display:none;cursor:pointer;padding:8px;}
.nav-toggle-label span, .nav-toggle-label span::before, .nav-toggle-label span::after{
  display:block;width:22px;height:2px;background:var(--text-white);position:relative;transition:.2s;
}
.nav-toggle-label span::before, .nav-toggle-label span::after{content:"";position:absolute;left:0;}
.nav-toggle-label span::before{top:-7px;}
.nav-toggle-label span::after{top:7px;}

/* Sin flex-wrap a propósito: por encima del breakpoint de hamburguesa
   (ver media query al final) el nav siempre entra en una sola fila -- si
   hiciera falta wrap, es que la ventana ya debería mostrar el menú
   hamburguesa en su lugar, nunca una fila cortada a la mitad. */
nav.site-nav{display:flex;align-items:center;gap:18px;flex:1;justify-content:flex-end;}
nav.site-nav a{font-size:13.5px;color:var(--text-slate);text-decoration:none;white-space:nowrap;}
nav.site-nav a:hover, nav.site-nav a.active{color:var(--text-white);}
nav.site-nav a.nav-cta{padding:8px 16px;border-radius:10px;font-weight:700;}
nav.site-nav a.nav-cta.outline{background:rgba(148,163,184,0.14);color:var(--text-white);border:1px solid var(--border);}
nav.site-nav a.nav-cta.gold{background:linear-gradient(135deg,var(--gold),var(--gold-soft));color:#0A192F;}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 18px;border-radius:12px;font-weight:700;font-size:13.5px;text-decoration:none;border:none;cursor:pointer;white-space:nowrap;}
.btn-gold{background:linear-gradient(135deg,var(--gold),var(--gold-soft));color:#0A192F;box-shadow:0 8px 22px rgba(212,175,55,.32);}
.btn-outline{background:rgba(148,163,184,0.14);color:var(--text-white);border:1px solid var(--border);}
.btn-cyan{background:linear-gradient(135deg,var(--cyan-soft),var(--cyan));color:#052A30;}
.btn-purple{background:linear-gradient(135deg,var(--purple),var(--purple-soft));color:#1A1030;box-shadow:0 8px 22px rgba(156,124,255,.32);}
.btn-block{width:100%;}
.btn-lg{padding:14px 26px;font-size:15px;border-radius:14px;}

/* ---------- Hero / secciones genéricas ---------- */
.hero{padding:64px 0 48px 0;text-align:center;}
.hero h1{font-size:clamp(28px,5vw,44px);margin:0 0 14px 0;font-weight:800;line-height:1.15;}
.hero .accent{background:linear-gradient(135deg,var(--cyan-soft),var(--purple-soft));-webkit-background-clip:text;background-clip:text;color:transparent;}
.hero p.lead{font-size:clamp(14px,2vw,18px);color:var(--text-slate);max-width:620px;margin:0 auto 26px auto;}
.hero-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}

section{padding:52px 0;}
section.alt{background:rgba(255,255,255,0.02);border-top:1px solid var(--border);border-bottom:1px solid var(--border);}
h2.section-title{font-size:clamp(22px,3.4vw,30px);margin:0 0 8px 0;text-align:center;font-weight:800;}
p.section-lead{text-align:center;color:var(--text-slate);max-width:560px;margin:0 auto 34px auto;font-size:14.5px;}
.eyebrow{font-size:11.5px;text-transform:uppercase;letter-spacing:1.6px;color:var(--cyan-soft);font-weight:700;text-align:center;display:block;margin-bottom:8px;}

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px;}
/* Modificador para grillas de 6 tarjetas (ej. Beneficios): fuerza 3
   columnas parejas en vez de dejar que auto-fit calce 4+2 en pantallas
   anchas -- se agrega solo donde hace falta, no cambia las grillas de 4
   tarjetas que ya calzan bien solas (Qué es, Para quién es). */
.grid.grid-3{grid-template-columns:repeat(3,1fr);}
@media (max-width:820px){.grid.grid-3{grid-template-columns:repeat(2,1fr);}}
@media (max-width:520px){.grid.grid-3{grid-template-columns:1fr;}}
/* Modificador para una cantidad de tarjetas que NO es múltiplo prolijo de
   la grilla (ej. Cómo funciona, 7 tarjetas: con auto-fit normal da 4+3 con
   la fila de 3 pegada a la izquierda y un hueco vacío a la derecha, se ve
   descuidado). Flexbox en vez de grid a propósito acá: a diferencia de
   grid, flex SÍ centra una fila incompleta dentro del espacio sobrante --
   mismo ancho de tarjeta que .grid normal (230-260px), mismo gap. */
.grid.grid-cycle{display:flex;flex-wrap:wrap;justify-content:center;}
.grid.grid-cycle .card{flex:1 1 230px;max-width:260px;}
.card{background:var(--glass-bg);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);border:1px solid var(--glass-border);border-radius:16px;padding:22px;}
.card .ico{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,rgba(56,198,217,.22),rgba(156,124,255,.16));margin-bottom:14px;font-size:20px;}
/* Alterna celeste/violeta/dorado entre tarjetas consecutivas de una misma grilla -- nunca todo del mismo color, ni predominio del dorado (criterio de marca: celeste/violeta primero, dorado como acento puntual). */
.grid .card:nth-child(3n+2) .ico{background:linear-gradient(135deg,rgba(156,124,255,.24),rgba(56,198,217,.12));}
.grid .card:nth-child(3n) .ico{background:linear-gradient(135deg,rgba(212,175,55,.22),rgba(156,124,255,.10));}
.card h3{margin:0 0 8px 0;font-size:16px;}
.card p{margin:0;color:var(--text-slate);font-size:13.5px;}

/* flex, no grid, a propósito (mismo criterio que .grid-cycle más abajo): con
   7 pasos (Inicio), grid dejaba la fila de 3 pegada a la izquierda con un
   hueco vacío a la derecha -- flex + justify-content:center sí centra una
   fila incompleta. */
.steps{counter-reset:paso;display:flex;flex-wrap:wrap;justify-content:center;gap:20px;}
.step{position:relative;padding-left:44px;flex:1 1 200px;max-width:230px;}
.step::before{counter-increment:paso;content:counter(paso);position:absolute;left:0;top:0;width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--cyan-soft),var(--purple-soft));color:#0A192F;font-weight:800;display:flex;align-items:center;justify-content:center;font-size:14px;}
.step h3{margin:0 0 6px 0;font-size:15px;}
.step p{margin:0;color:var(--text-slate);font-size:13.5px;}

/* ---------- Diagrama de flujo (Clientes → ... → Acciones) ---------- */
.flow-chain{display:flex;flex-wrap:nowrap;align-items:center;justify-content:center;gap:0;margin:0 auto;max-width:100%;}
.flow-chain .flow-node{background:var(--glass-bg);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--glass-border);border-radius:999px;padding:9px 14px;font-size:12.5px;font-weight:700;color:var(--text-white);white-space:nowrap;}
.flow-chain .flow-node:nth-child(4n+1){border-color:rgba(56,198,217,.45);}
.flow-chain .flow-node:nth-child(4n+2){border-color:rgba(156,124,255,.45);}
.flow-chain .flow-node:nth-child(4n+3){border-color:rgba(212,175,55,.4);}
.flow-chain .flow-arrow{color:var(--text-slate);font-size:14px;padding:0 4px;flex-shrink:0;}
/* Por debajo de 1024px ya no entran los 7 nodos + 6 flechas en una sola
   fila sin achicar el texto de forma ilegible -- se apila verticalmente
   en vez de dejar un nodo suelto colgando en una segunda fila despareja. */
@media (max-width:1024px){
  .flow-chain{flex-wrap:wrap;flex-direction:column;gap:6px;}
  .flow-chain .flow-arrow{transform:rotate(90deg);padding:2px 0;}
}

/* ---------- Ejemplos de consulta a la IA (representación visual) ---------- */
.ia-examples{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;max-width:1020px;margin:0 auto;}
@media (max-width:820px){.ia-examples{grid-template-columns:repeat(2,1fr);}}
@media (max-width:520px){.ia-examples{grid-template-columns:1fr;}}
.ia-bubble{background:var(--glass-bg);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);border:1px solid var(--glass-border);border-radius:16px 16px 16px 4px;padding:16px 18px;font-size:13.5px;color:var(--text-white);position:relative;}
.ia-bubble::before{content:"💬";margin-right:8px;}

/* ---------- Etiqueta de estado (demo / próximamente) ---------- */
.demo-badge{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;padding:5px 12px;border-radius:999px;background:rgba(156,124,255,.16);color:var(--purple-soft);border:1px solid rgba(156,124,255,.35);}
.demo-note{text-align:center;max-width:640px;margin:0 auto 30px auto;background:rgba(156,124,255,.08);border:1px solid rgba(156,124,255,.28);border-radius:14px;padding:14px 18px;font-size:12.5px;color:var(--text-slate);}

/* ---------- Planes ---------- */
/* minmax en 190px (no 220px) a propósito: dentro de --maxw (1100px) es lo
   que hace falta para que las 5 tarjetas de planes de empresa (EMPRESA
   5/10/25/50 + ENTERPRISE) entren en una sola fila -- con 220px quedaba
   4+1 (ENTERPRISE solo). Las grillas de 4 tarjetas (planes individuales)
   siguen viéndose igual de bien con este mínimo. */
.planes-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:18px;}
.plan-card{background:var(--glass-bg);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);border:1px solid var(--glass-border);border-radius:18px;padding:24px 20px;text-align:center;}
.plan-card.destacado{border-color:var(--purple);box-shadow:0 0 0 1px var(--purple) inset,0 12px 30px rgba(156,124,255,.16);}
.plan-card .plan-nombre{font-weight:800;font-size:17px;margin-bottom:4px;}
.plan-card .plan-tagline{font-size:12px;color:var(--cyan-soft);font-weight:600;margin-bottom:10px;}
.plan-card .plan-precio{font-size:12.5px;color:var(--text-slate);margin-bottom:14px;}
.plan-card ul{list-style:none;padding:0;margin:0 0 16px 0;text-align:left;font-size:13px;color:var(--text-slate);}
.plan-card li{padding:5px 0;border-bottom:1px dashed rgba(255,255,255,.06);}
.plan-card li:last-child{border-bottom:none;}
.plan-nota{text-align:center;color:var(--text-slate);font-size:12.5px;margin-top:26px;}

/* ---------- Planes: progresión visible ---------- */
/* Personas: FREE → PLUS → MAX → PRO. Las tarjetas NO se estiran a la misma altura (align-items:start): cada nivel muestra más contenido que el anterior
   (lo heredado aparece como etiquetas chicas y lo que suma cada plan, como lista destacada) y el énfasis visual crece con el nivel. */
.planes-grid.progresion{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));align-items:start;}
.plan-card{position:relative;}
/* En anchos medios 4 tarjetas no entran en una fila: 2 + 2 (nunca 3 + una suelta), y en celular una debajo de otra. */
@media (max-width:940px){.planes-grid.progresion{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.planes-grid.progresion{grid-template-columns:1fr;}}
.plan-card.progresion-1{border-color:var(--glass-border);}
.plan-card.progresion-2{border-color:rgba(56,198,217,.38);}
.plan-card.progresion-3{border-color:rgba(156,124,255,.5);box-shadow:0 8px 24px rgba(156,124,255,.10);}
.plan-card.progresion-4{border-color:var(--purple);box-shadow:0 0 0 1px var(--purple) inset,0 14px 36px rgba(156,124,255,.22);}
.plan-nivel{display:flex;gap:4px;justify-content:center;margin-bottom:12px;}
.plan-nivel i{display:block;width:26px;height:5px;border-radius:3px;background:rgba(148,163,184,.22);}
.plan-nivel i.on{background:linear-gradient(90deg,var(--cyan),var(--purple));}
.plan-etiqueta{display:inline-block;font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;color:var(--gold-soft);border:1px solid rgba(212,175,55,.4);border-radius:999px;padding:2px 10px;margin-bottom:8px;}
.plan-bloque-titulo{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.7px;color:var(--text-slate);text-align:left;margin:4px 0 8px 0;}
.plan-bloque-titulo.suma{color:var(--cyan-soft);}
.plan-heredado{margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.07);}
.plan-chips{display:flex;flex-wrap:wrap;gap:5px;text-align:left;}
.plan-chips span{font-size:11px;line-height:1.25;padding:3px 8px;border-radius:999px;background:rgba(148,163,184,.10);border:1px solid rgba(148,163,184,.18);color:var(--text-slate);}
.plan-card ul.plan-suma li{position:relative;padding-left:20px;color:var(--text-white);}
.plan-card ul.plan-suma li::before{content:"✓";position:absolute;left:0;top:5px;color:var(--cyan-soft);font-weight:800;font-size:12px;}
.plan-card ul.plan-suma li.destaca{font-weight:700;}
.plan-card .btn{margin-top:4px;}
.plan-nota + .plan-nota{margin-top:8px;}

/* Empresas: una fila por nivel. Cada fila dice PARA QUÉ sirve el nivel y qué capacidad suma, no solo cuántos usuarios tiene. */
.niveles-empresa{display:grid;gap:14px;}
.nivel-empresa{display:grid;grid-template-columns:230px 1fr;gap:22px;background:var(--glass-bg);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);border:1px solid var(--glass-border);border-radius:18px;padding:20px 22px;}
.nivel-empresa.n2{border-color:rgba(56,198,217,.34);}
.nivel-empresa.n3{border-color:rgba(156,124,255,.42);}
.nivel-empresa.n4{border-color:rgba(156,124,255,.6);box-shadow:0 8px 26px rgba(156,124,255,.14);}
.nivel-empresa.n5{border-color:var(--purple);box-shadow:0 0 0 1px var(--purple) inset,0 12px 30px rgba(156,124,255,.18);}
.nivel-empresa .plan-nombre{font-weight:800;font-size:18px;margin:0 0 2px 0;}
.nivel-empresa .plan-tagline{margin-bottom:10px;}
.nivel-empresa .plan-nivel{justify-content:flex-start;margin-bottom:10px;}
.nivel-empresa .plan-nivel i{width:20px;}
.plan-metricas{display:flex;flex-wrap:wrap;gap:6px;}
.plan-metricas span{font-size:12px;color:var(--text-white);background:rgba(56,198,217,.10);border:1px solid rgba(56,198,217,.28);border-radius:999px;padding:3px 10px;}
.plan-metricas span b{color:var(--cyan-soft);}
.nivel-empresa ul{list-style:none;padding:0;margin:0;font-size:13px;columns:2;column-gap:26px;}
.nivel-empresa li{position:relative;padding:4px 0 4px 20px;break-inside:avoid;color:var(--text-white);}
.nivel-empresa li::before{content:"✓";position:absolute;left:0;top:4px;color:var(--cyan-soft);font-weight:800;font-size:12px;}
.nivel-empresa .plan-heredado{border-bottom:none;padding-bottom:0;margin-bottom:8px;}
.nivel-empresa .plan-texto{font-size:13.5px;color:var(--text-slate);margin:0;}
@media (max-width:760px){
  .nivel-empresa{grid-template-columns:1fr;gap:12px;padding:18px;}
  .nivel-empresa ul{columns:1;}
}
/* Bloque "qué es una organización" -- 6 tarjetas, mismo problema y misma
   solución que .grid-3 (Beneficios): con auto-fit libre quedaba 5+1 en
   desktop (el mínimo de 200px permite calzar 5 columnas en --maxw). Fijo en
   3/2/1 según ancho -- siempre filas completas, nunca una tarjeta suelta. */
.org-pilares{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:0 0 30px 0;}
@media (max-width:820px){.org-pilares{grid-template-columns:repeat(2,1fr);}}
@media (max-width:520px){.org-pilares{grid-template-columns:1fr;}}
.org-pilares .card{padding:16px 18px;}
.org-pilares .card h3{font-size:14.5px;margin-bottom:5px;}
.org-pilares .card p{font-size:12.5px;}

/* ---------- FAQ (nativo, sin JS) ---------- */
.faq-list{max-width:760px;margin:0 auto;}
.faq-item{border-bottom:1px solid var(--border);padding:6px 0;}
.faq-item summary{cursor:pointer;font-weight:700;font-size:14.5px;padding:12px 4px;list-style:none;display:flex;justify-content:space-between;align-items:center;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:"+";font-size:20px;color:var(--gold);}
.faq-item[open] summary::after{content:"–";}
.faq-item p{margin:0 4px 14px 4px;color:var(--text-slate);font-size:13.5px;}

/* ---------- Formularios simples (auth-relay / contacto) ---------- */
.narrow{max-width:460px;margin:0 auto;}
.panel{background:var(--glass-bg);backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);border:1px solid var(--glass-border);border-radius:18px;padding:28px 24px;}
.choice-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
@media (max-width:520px){.choice-row{grid-template-columns:1fr;}}
.choice-card{display:block;background:var(--glass-bg);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--glass-border);border-radius:14px;padding:20px 16px;text-align:center;text-decoration:none;transition:.15s;}
.choice-card:hover{border-color:var(--cyan);}
.choice-card .ico{font-size:28px;margin-bottom:8px;}
.choice-card h3{margin:0 0 6px 0;font-size:15px;color:var(--text-white);}
.choice-card p{margin:0;font-size:12.5px;color:var(--text-slate);}

/* ---------- Footer ---------- */
footer.site-footer{border-top:1px solid var(--border);padding:34px 0;color:var(--text-slate);font-size:12.5px;}
footer.site-footer .wrap{display:flex;flex-direction:column;gap:14px;}
footer.site-footer .footer-top{display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between;align-items:flex-start;}
footer.site-footer nav{display:flex;gap:16px;flex-wrap:wrap;}
footer.site-footer nav.footer-legal{border-top:1px solid var(--border);padding-top:14px;justify-content:space-between;width:100%;font-size:11.5px;}
footer.site-footer a{text-decoration:none;color:var(--text-slate);}
footer.site-footer a:hover{color:var(--text-white);}

/* ---------- Responsive: menú hamburguesa por debajo de 1180px ----------
   El breakpoint quedó en 1180px (no 860px) a propósito: 8 links + 2 botones
   necesitan ese ancho para entrar en una sola fila sin cortarse -- entre
   860 y 1180px antes se veía un link (Crear cuenta) saltando solo a una
   segunda línea. Mejor mostrar el menú compacto un poco antes que dejar
   una fila rota. */
@media (max-width:1180px){
  nav.site-nav{
    display:none;position:absolute;top:100%;left:0;right:0;
    background:#0A192F;flex-direction:column;align-items:flex-start;
    padding:14px 20px 20px 20px;border-bottom:1px solid var(--border);gap:14px;
  }
  .nav-toggle:checked ~ nav.site-nav{display:flex;}
  .nav-toggle-label{display:block;}
  .site-header{position:relative;}
  nav.site-nav a.nav-cta{width:100%;text-align:center;}
}
@media (min-width:1181px){
  .nav-toggle-label{display:none;}
}

/* ---------- Foco visible (navegación por teclado) ----------
   El navegador ya mostraba su propio foco por defecto (nunca se le sacó
   con outline:none) -- esto solo lo hace consistente con la marca en vez
   del azul genérico del navegador, sobre un fondo oscuro donde ese azul
   por defecto queda poco integrado. */
a:focus-visible, button:focus-visible, summary:focus-visible, .choice-card:focus-visible, input:focus-visible{
  outline:2px solid var(--cyan-soft);
  outline-offset:2px;
  border-radius:4px;
}