/* Compio · sistema visual basado en el rediseño "Calma moderna" de Justio, con la identidad de Compio */
@font-face{font-family:"Outfit";src:url("Outfit-400.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Outfit";src:url("Outfit-600.ttf") format("truetype");font-weight:500 700;font-display:swap}

:root{
  --violeta:#2B006B;--violeta-2:#3D1A85;--violeta-ink:#1F004F;
  --lila-25:#FAF8FD;--lila-50:#F2EEFA;--lila-100:#E0D7F3;
  --menta:#93E5B5;--verde:#1E9E68;--verde-bg:#E9F7EF;--verde-line:#C3E9D3;--verde-ink:#0F5C3B;
  --ambar:#9A5B00;--ambar-bg:#FEF4E2;--ambar-line:#F3D9A6;
  --rojo:#B3261E;--rojo-bg:#FCECEA;--rojo-line:#F3C9C4;
  --ground:#F8F7F3;--surface:#FFFFFF;--line:#E9E6EF;--line-strong:#D8D2E4;
  --text:#1A1A1A;--text-2:#4E4A5C;--text-3:#5C586A;
  --on-violeta:#FFFFFF;--on-violeta-2:#D6CCF0;--on-violeta-line:rgba(255,255,255,.2);
  --r-sm:12px;--r-md:16px;--r-lg:24px;--r-xl:32px;--pill:999px;
  --shadow-card:0 1px 2px rgba(43,0,107,.06),0 16px 40px -24px rgba(43,0,107,.3);
  --shadow-cta:0 12px 24px -12px rgba(43,0,107,.55);
  --font:"Outfit",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font);font-size:17px;line-height:1.6;color:var(--text);background:var(--ground);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--violeta);text-decoration:none}
a:hover{color:var(--violeta-2)}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,label.opcion:focus-within{outline:2px solid var(--verde);outline-offset:2px}
h1,h2,h3{font-weight:600;color:var(--violeta);margin:0;overflow-wrap:anywhere;text-wrap:balance}
h1{font-size:clamp(2.6rem,6vw,4.5rem);line-height:1.02;letter-spacing:-.035em}
h2{font-size:clamp(2rem,4vw,3rem);line-height:1.08;letter-spacing:-.03em}
h3{font-size:1.4rem;line-height:1.2;letter-spacing:-.015em}
p{margin:0}
.contenedor{width:100%;max-width:1232px;margin:0 auto;padding:0 24px}
.angosto{max-width:800px}
.oculto{display:none !important}
.ico{flex:none}

/* Botones */
.boton{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:56px;padding:0 28px;border-radius:var(--pill);border:1px solid var(--violeta);background:var(--violeta);color:var(--on-violeta);font:600 1.06rem/1 var(--font);white-space:nowrap;cursor:pointer;box-shadow:var(--shadow-cta);transition:background .15s,transform .15s}
.boton:hover{background:var(--violeta-2);color:var(--on-violeta)}
.boton:active{transform:translateY(1px)}
.boton.secundario{background:var(--surface);color:var(--violeta);border-color:var(--lila-100);box-shadow:none}
.boton.secundario:hover{background:var(--lila-25)}
.boton.menta{background:var(--menta);border-color:var(--menta);color:var(--violeta-ink);box-shadow:none}
.boton.menta:hover{background:#82DCA8}
.boton.chico{min-height:48px;padding:0 24px;font-size:.95rem;box-shadow:none}
.boton.ancho{width:100%}
.boton[disabled]{opacity:.5;cursor:not-allowed;box-shadow:none}

/* ===== Home ===== */
.hero-wrap{padding:16px 16px 0}
.hero-panel{border-radius:var(--r-xl);background:var(--lila-50);padding:24px 24px 96px}
.hero-panel > .contenedor{padding:0 80px}
@media (max-width:1100px){.hero-panel > .contenedor{padding:0 8px}}
.nav-pill{display:flex;align-items:center;justify-content:space-between;gap:16px;height:64px;padding:0 8px 0 24px;border-radius:var(--pill);border:1px solid var(--line);background:var(--surface)}
.nav-pill .marca{display:flex;align-items:center;gap:16px;height:44px}
.nav-pill .marca img{height:34px;width:auto}
.nav-pill .marca .sep{width:1px;height:24px;background:var(--line-strong)}
.nav-pill .marca .sub{font-size:15px;font-weight:600;color:var(--violeta);white-space:nowrap}
.nav-pill .links{display:flex;gap:40px}
.nav-pill .links a{font-size:15px;font-weight:500;color:var(--text)}
.nav-pill .links a:hover{color:var(--violeta)}
@media (max-width:960px){.nav-pill .links,.nav-pill .marca .sep,.nav-pill .marca .sub{display:none}}

.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center;padding-top:72px}
.hero .texto{display:flex;flex-direction:column;gap:24px}
.hero .bajada{max-width:30em;font-size:1.25rem;line-height:1.6;color:var(--text-2)}
.acciones{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.confianza{display:flex;flex-wrap:wrap;gap:12px 24px;padding-top:24px;border-top:1px solid var(--line-strong);font-size:15px;font-weight:500;color:var(--text-2)}
.confianza span{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.hero .lado{position:relative;padding:32px 40px 48px}
.chip-flotante{position:absolute;display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 16px;border-radius:var(--pill);background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-card);font-size:14px;font-weight:600;color:var(--violeta);white-space:nowrap}
.chip-flotante.arriba{left:0;top:0}
.chip-flotante.abajo{right:0;bottom:0}
.test-card{display:flex;flex-direction:column;gap:16px;padding:32px;border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--shadow-card)}
.test-card .cab{display:flex;justify-content:space-between;font-size:14px;font-weight:600}
.test-card .cab .a{color:var(--verde)}
.test-card .cab .b{color:var(--text-3)}
.test-card h2{font-size:clamp(1.6rem,2.6vw,2rem);letter-spacing:-.02em;line-height:1.15;color:var(--text);margin-top:8px}
.opcion-link{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:64px;padding:12px 20px 12px 24px;border-radius:var(--r-md);border:1px solid var(--line-strong);background:var(--surface);font-size:17px;font-weight:600;color:var(--violeta);transition:border-color .15s,background .15s}
.opcion-link:hover{border-color:var(--violeta);background:var(--lila-25)}
.test-card .pie-card{font-size:14px;color:var(--text-3)}
@media (max-width:960px){.hero{grid-template-columns:1fr;gap:40px;padding-top:48px}.hero .lado{padding:24px 0 32px}.chip-flotante{display:none}}

.franja{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px;margin-top:72px;padding-top:28px;border-top:1px solid var(--line-strong);font-size:15px;font-weight:500;color:var(--violeta)}
.franja span{display:inline-flex;align-items:center;gap:24px}
.franja span + span::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--line-strong);margin-right:0}

.seccion{padding:120px 0}
.seccion + .seccion{border-top:1px solid var(--line)}
.encabezado{max-width:640px;display:flex;flex-direction:column;gap:16px;margin-bottom:56px}
.encabezado p{font-size:1.15rem;color:var(--text-2)}
@media (max-width:760px){.seccion{padding:80px 0}.encabezado{margin-bottom:36px}}

/* bento */
.bento{display:grid;grid-template-columns:1.4fr 1fr;gap:16px}
.bento .col{display:grid;gap:16px}
.card{display:flex;flex-direction:column;gap:12px;padding:40px;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line)}
.card p{color:var(--text-2)}
.card.oscura{background:var(--violeta);border-color:var(--violeta);color:var(--on-violeta)}
.card.oscura h3{color:var(--on-violeta);font-size:1.8rem}
.card.oscura p{color:var(--on-violeta-2)}
.card.oscura .divisor{border-top:1px solid var(--on-violeta-line);margin:auto 0 0;padding-top:20px}
.num{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:var(--lila-50);color:var(--violeta);font-size:14px;font-weight:600}
.card.oscura .num{background:var(--surface);color:var(--violeta)}
.lista-check{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.lista-check li{display:flex;gap:12px;align-items:flex-start;line-height:1.45}
.lista-check svg{margin-top:2px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;height:36px;padding:0 14px;border-radius:var(--pill);border:1px solid var(--line-strong);font-size:14px;font-weight:600;color:var(--violeta)}
.mini-label{font-size:14px;font-weight:600;color:var(--text-3)}
@media (max-width:960px){.bento{grid-template-columns:1fr}.card{padding:28px}}

/* dos columnas con filas */
.dos-col{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:80px;align-items:start}
.dos-col .izq{display:flex;flex-direction:column;gap:20px;position:sticky;top:32px}
.dos-col .izq p{font-size:1.15rem;color:var(--text-2)}
.filas{border-top:1px solid var(--line-strong)}
.fila{padding:24px 0;border-bottom:1px solid var(--line-strong);display:flex;flex-direction:column;gap:6px}
.fila h3{font-size:1.3rem;color:var(--text)}
.fila p{color:var(--text-2)}
.nota-fecha{margin-top:24px;padding:20px 24px;border-radius:var(--r-md);background:var(--lila-50);color:var(--text-2);font-size:15px}
@media (max-width:960px){.dos-col{grid-template-columns:1fr;gap:40px}.dos-col .izq{position:static}}

.grilla{display:grid;gap:16px}
.grilla.cuatro{grid-template-columns:repeat(4,1fr)}
.grilla.tres{grid-template-columns:repeat(3,1fr)}
@media (max-width:1060px){.grilla.cuatro{grid-template-columns:repeat(2,1fr)}}
@media (max-width:760px){.grilla.cuatro,.grilla.tres{grid-template-columns:1fr}}
.card.compacta{padding:28px}
.card.compacta h3{font-size:1.2rem}

/* banda violeta */
.banda{margin:0 16px;border-radius:var(--r-xl);background:var(--violeta);color:var(--on-violeta);padding:96px 0}
.banda h2{color:var(--on-violeta)}
.banda .encabezado p{color:var(--on-violeta-2)}
.banda .card{background:rgba(255,255,255,.06);border-color:var(--on-violeta-line)}
.banda .card h3{color:var(--on-violeta)}
.banda .card p{color:var(--on-violeta-2)}

/* FAQ */
.faq{display:flex;flex-direction:column;gap:12px}
.faq details{border-radius:var(--r-md);background:var(--surface);border:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:64px;padding:16px 24px;font-size:1.1rem;font-weight:600;color:var(--violeta)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:24px;height:24px;background:no-repeat center/18px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232B006B' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 24px 22px;color:var(--text-2)}

/* CTA final */
.cta-final{text-align:center;display:flex;flex-direction:column;align-items:center;gap:20px}
.cta-final p{font-size:1.15rem;color:var(--text-2);max-width:34em}

/* Footer */
.pie{padding:64px 0 40px;border-top:1px solid var(--line);margin-top:120px;font-size:15px;color:var(--text-2)}
.pie .contenedor{display:flex;flex-wrap:wrap;justify-content:space-between;gap:24px;align-items:flex-start}
.pie img{height:34px;width:auto}
.pie .legal{width:100%;padding-top:24px;border-top:1px solid var(--line);font-size:14px;color:var(--text-3)}

/* ===== App shell (quiz / diagnóstico) ===== */
.app{min-height:100vh;background:var(--ground)}
.app-bar{position:sticky;top:0;z-index:10;background:var(--surface);border-bottom:1px solid var(--line)}
.app-bar .fila-bar{display:grid;grid-template-columns:48px 1fr 48px;align-items:center;height:60px;max-width:720px;margin:0 auto;padding:0 12px}
.app-bar .fila-bar .centro{display:flex;justify-content:center}
.app-bar .fila-bar .centro img{height:28px;width:auto}
.app-bar .contador{justify-self:end;font-size:14px;font-weight:600;color:var(--text-3);white-space:nowrap}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;border:0;background:transparent;color:var(--violeta);cursor:pointer}
.icon-btn:hover{background:var(--lila-50)}
.linea-progreso{height:3px;background:var(--line)}
.linea-progreso span{display:block;height:100%;width:0;background:var(--violeta);transition:width .3s}
.app-main{max-width:720px;margin:0 auto;padding:40px 24px 160px}
.app-main h1{font-size:clamp(2rem,5vw,2.6rem);line-height:1.08;letter-spacing:-.03em}
.app-main .sub{margin-top:12px;font-size:1.05rem;color:var(--text-2)}
.eyebrow{font-size:14px;font-weight:600;color:var(--verde);margin-bottom:12px}
.app-footer{position:fixed;left:0;right:0;bottom:0;background:var(--surface);border-top:1px solid var(--line);padding:12px 24px 16px}
.app-footer .dentro{max-width:672px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:10px}
.seguro{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--text-3)}

.opciones{display:flex;flex-direction:column;gap:12px;margin-top:28px}
.opcion{display:flex;align-items:center;gap:14px;min-height:60px;padding:14px 20px;border-radius:var(--r-md);border:1px solid var(--line-strong);background:var(--surface);cursor:pointer;font-size:17px;font-weight:500;color:var(--text);transition:border-color .15s,background .15s}
.opcion:hover{border-color:#B7ACD3}
.opcion input{appearance:none;-webkit-appearance:none;flex:none;width:22px;height:22px;margin:0;border:2px solid #9C96AB;border-radius:50%;background:var(--surface);display:grid;place-content:center}
.opcion input[type=checkbox]{border-radius:6px}
.opcion input:checked{border-color:var(--violeta);background:var(--violeta)}
.opcion input[type=radio]:checked::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--surface)}
.opcion input[type=checkbox]:checked::after{content:"";width:11px;height:6px;border-left:2.5px solid #fff;border-bottom:2.5px solid #fff;transform:rotate(-45deg) translate(1px,-1px)}
.opcion:has(input:checked){border-color:var(--violeta);background:var(--lila-25);box-shadow:0 0 0 1px var(--violeta) inset}

fieldset.pregunta{border:0;margin:0 0 40px;padding:0;min-width:0}
fieldset.pregunta legend{padding:0;font-size:1.2rem;font-weight:600;color:var(--text);line-height:1.3}
fieldset.pregunta .opciones{margin-top:16px}
.ayuda{margin-top:6px;font-size:.95rem;color:var(--text-3)}
.campo{margin-bottom:24px}
.campo label{display:block;font-weight:600;margin-bottom:8px;color:var(--text)}
.obligatorio{color:var(--rojo)}
input[type=text],input[type=email],input[type=tel],textarea,select{width:100%;min-height:56px;padding:14px 16px;border-radius:var(--r-md);border:1px solid var(--line-strong);background:var(--surface);font:400 1.05rem var(--font);color:var(--text)}
textarea{min-height:120px;resize:vertical}
input:focus,textarea:focus,select:focus{border-color:var(--violeta)}
.aceptar{display:flex;gap:12px;align-items:flex-start;margin-top:8px;font-size:.95rem;color:var(--text-2)}
.aceptar input{flex:none;margin-top:3px;width:20px;height:20px;accent-color:var(--violeta)}
.error-msg{margin-top:16px;padding:14px 16px;border-radius:var(--r-sm);background:var(--rojo-bg);border:1px solid var(--rojo-line);color:var(--rojo);font-size:.95rem}
.aviso{margin-top:24px;padding:20px 24px;border-radius:var(--r-md);background:var(--lila-50);color:var(--text-2);font-size:.98rem}
.aviso strong{color:var(--violeta)}

/* Resultado */
.filas-resultado{margin-top:28px;border-top:1px solid var(--line-strong)}
.fila-res{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 0;border-bottom:1px solid var(--line-strong);font-size:1rem}
.estado{display:inline-flex;align-items:center;gap:6px;font-size:.95rem;font-weight:600;white-space:nowrap}
.estado.ok{color:var(--verde-ink)}
.estado.medio{color:var(--ambar)}
.estado.falta{color:var(--rojo)}
.nivel{display:inline-flex;align-items:center;height:36px;padding:0 14px;border-radius:var(--pill);font-size:14px;font-weight:600}
.nivel.alto{background:var(--rojo-bg);color:var(--rojo);border:1px solid var(--rojo-line)}
.nivel.medio{background:var(--ambar-bg);color:var(--ambar);border:1px solid var(--ambar-line)}
.nivel.bajo{background:var(--verde-bg);color:var(--verde-ink);border:1px solid var(--verde-line)}
.tarjeta-blanca{margin-top:24px;padding:28px;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line);display:flex;flex-direction:column;gap:12px}
.tarjeta-blanca h3{font-size:1.3rem}
.tarjeta-blanca p{color:var(--text-2)}
.brechas{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.brechas li{display:flex;gap:12px;align-items:flex-start;color:var(--text-2);line-height:1.5}
.brechas .num{flex:none}
.brechas strong{color:var(--text)}
.exito{text-align:center;display:flex;flex-direction:column;align-items:center;gap:16px;padding-top:24px}
.exito p{color:var(--text-2)}

/* Texto legal */
.legal-texto{padding:56px 24px 0}
.legal-texto h1{font-size:clamp(2rem,4vw,2.8rem);margin-bottom:12px}
.legal-texto h2{font-size:1.4rem;letter-spacing:-.01em;margin:40px 0 12px}
.legal-texto p,.legal-texto li{color:var(--text-2)}
.legal-texto p{margin-bottom:12px}
.legal-texto ul{padding-left:1.2em}
.legal-texto li{margin-bottom:6px}
.barra-simple{background:var(--surface);border-bottom:1px solid var(--line)}
.barra-simple .contenedor{display:flex;align-items:center;justify-content:space-between;height:64px}
.barra-simple img{height:30px;width:auto}