/* Landing pública (templates/sitio/portada.html). Lo grueso del sitio ya está en gia.css ("public site");
   aquí van los ajustes porque la plantilla usa enlaces donde el prototipo usaba botones, y los estilos en línea del prototipo. */
html{scroll-padding-top:64px}
.site .sec{scroll-margin-top:0} /* gia.css le da 60px; con el scroll-padding de arriba se sumaban */
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{background:var(--surface)}
.snav .logo,.snav .links a,.sfoot a{text-decoration:none}
.snav .logo img{display:block;height:21px;width:auto}
.snav .links a{padding:8px 10px;color:var(--fg-2);font-size:14px;border-radius:7px}
.snav .links a:hover{background:var(--sunk);color:var(--fg)}
.sfoot img{display:block;height:16px;width:auto}
.sfoot a{color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.sfoot a:hover{color:var(--fg)}

/* .top también es la barra de la app (gia.css): en las tarjetas de plan solo es la fila del título */
.plan .top{position:static;z-index:auto;padding:0;background:none;border:0}

.st-min{min-width:0}
/* Ritmo vertical: menos aire que el prototipo (96px por lado) y línea entre secciones que se tocan */
.site .sec{padding-block:80px}
.site .sec.hero{padding-block:64px 88px}
.site .statement .sec{padding-block:64px}
.site .sec.st-pegado{padding-top:0}
#como{border-top:1px solid var(--line)}
@media (max-width:600px){
  .site .sec{padding-block:56px}
  .site .sec.hero{padding-block:40px 64px}
  .site .statement .sec{padding-block:48px}
  .site .sec.st-pegado{padding-top:0}
}
/* Contraste AA en la landing: grises y estados sobre los fondos grises de los mocks */
.site{--muted:#666666}
.site .pill.ok{color:#22704A}
.site .pill.warn{color:#7F5409}
.site .pill.bad{color:#A5352B}
.mock-hd .st-av,.st-av{color:#2A2A2A}
/* Títulos de los ejemplos con el nivel correcto (h3 y párrafo) y el estilo de .cdet h4 / .jevbox h5 de gia.css */
.cdet .st-cdet-h{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:600}
.jevbox .st-jev-h{font-size:15px;font-weight:600}
/* Fondo de puntos del hero (static/js/fondo_puntos.js): ocupa todo el ancho y se desvanece hacia las orillas */
.st-hero{position:relative;isolation:isolate;overflow:hidden}
.st-fondo{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;
  -webkit-mask-image:radial-gradient(ellipse 75% 85% at 62% 50%,#000 35%,transparent 100%);
  mask-image:radial-gradient(ellipse 75% 85% at 62% 50%,#000 35%,transparent 100%)}
.st-push{margin-left:auto}
.st-av{background:#DCDCDC;color:#2A2A2A}
.st-g{flex:none;margin-top:2px;height:auto}
.st-g-blanco{filter:invert(1)}
.st-pegado{padding-top:0}
.st-linea{border-top:1px solid var(--line)}
.st-fg{color:var(--fg)}
.st-trans{max-height:none}
.st-wrap{flex-wrap:wrap}
.st-dot-warn{background:var(--warn)}
.st-eyebrow-osc{color:#8A8A8A}
.st-sec-h-corta{margin-bottom:20px}
.st-h2-chico{font-size:clamp(24px,2.6vw,32px)}
.st-medida{font-size:30px;line-height:1.3}
.st-final-h{max-width:18ch}
.st-final-sub{max-width:52ch}
.st-final-cta{margin-top:6px}
.st-btn-claro,.st-btn-claro:hover{background:#fff;color:#111;border-color:#fff}
.st-btn-oscuro{background:transparent;color:#fff;border-color:#555}
.st-btn-oscuro:hover{background:#222}
a.btn.st-btn-claro{color:#111}
a.btn.st-btn-oscuro{color:#fff}

/* Sin JS no hay cómo cambiar de precio: se muestra el mensual con IA incluida y se esconden los selectores */
html:not(.js) .price-ctl{display:none}

/* El prototipo escondía "Entrar" en móvil, pero los vendedores entran desde el celular */
@media (max-width:600px){
  .snav .r .btn.ghost{display:inline-flex}
  .snav .sin{gap:10px}
}

/* ---------- barra superior viva (sitio.js) ---------- */
.snav{transition:box-shadow .2s}
.snav .sin{transition:padding .2s}
.snav.compacta{box-shadow:0 6px 24px -18px rgba(0,0,0,.35)}
.snav.compacta .sin{padding-block:8px}
.snav .links a[aria-current]{color:var(--fg);box-shadow:inset 0 -2px 0 var(--fg);border-radius:0}

/* ---------- aparición al hacer scroll (sitio.js) ---------- */
.revelar-activo [data-revelar]{opacity:0;transform:translateY(12px);transition:opacity .55s cubic-bezier(.2,.8,.2,1) var(--retraso,0ms),transform .55s cubic-bezier(.2,.8,.2,1) var(--retraso,0ms)}
.revelar-activo [data-revelar].visible{opacity:1;transform:none}

/* ---------- chat del hero que se escribe solo (hero_chat.js) ---------- */
.mock > *{animation:none}
.mock [data-oculto]{display:none}
.mock{transition:opacity .4s;align-content:start}
.mock.st-saliendo > :not(.mock-hd){opacity:0;transition:opacity .4s}
.st-entra{animation:rise .35s cubic-bezier(.2,.8,.2,1) both}
.st-escribiendo{display:inline-flex;gap:4px;align-items:center;width:max-content;padding:12px 14px}
.st-escribiendo i{width:6px;height:6px;border-radius:50%;background:var(--muted);animation:st-punto 1s infinite ease-in-out}
.st-escribiendo i:nth-child(2){animation-delay:.15s}
.st-escribiendo i:nth-child(3){animation-delay:.3s}
@keyframes st-punto{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}

/* ---------- demo jugable (_demo.html, demo_jugable.js) ---------- */
/* Sin JS: una columna y la calificación dentro de cada <details>. Con JS (.dj-viva): chat con las respuestas
   a la izquierda y panel de calificación a la derecha, las dos del mismo alto. */
.dj{border-top:1px solid var(--line)}
.dj-caja{display:grid;gap:16px;max-width:760px}
.dj-chat{border:1px solid var(--line);border-radius:18px;background:var(--sunk);padding:18px;display:grid;gap:10px;align-content:start;min-width:0}
.dj-hilo{display:grid;gap:10px}
.dj-hilo:empty{display:none}
.dj-opciones{display:grid;gap:8px;margin-top:6px;padding-top:14px;border-top:1px solid var(--line)}
.dj-op{border:1px solid var(--line-2);border-radius:12px;background:var(--surface);transition:border-color .15s,box-shadow .15s}
.dj-op[open]{border-color:var(--fg);box-shadow:0 0 0 1px var(--fg)}
.dj-op summary{list-style:none;cursor:pointer;display:flex;gap:12px;align-items:flex-start;padding:12px 14px;font-size:14px;line-height:1.45;border-radius:12px}
.dj-op summary::-webkit-details-marker{display:none}
@media (hover:hover){.dj-op:not([open]) summary:hover{background:var(--bg)}}
.dj-letra{flex:none;width:22px;height:22px;border-radius:50%;border:1px solid var(--line-2);display:grid;place-items:center;font-family:var(--mono);font-size:11px;color:var(--fg-2)}
.dj-op[open] .dj-letra{background:var(--fg);border-color:var(--fg);color:#fff}
.dj-res{display:grid;gap:12px;padding:0 14px 14px}
.dj-crit{display:flex;gap:8px;flex-wrap:wrap}
.dj-crit .cchip{width:auto}
.dj-cliente{font-size:14px;color:var(--fg-2)}
.dj-otra{justify-self:start}
.dj-panel{display:none}
.dj-cta{margin-top:20px;font-size:15px;color:var(--fg-2)}
.dj-cta a{color:var(--fg);font-weight:600;text-underline-offset:3px}

.dj-viva.dj-caja{max-width:none;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch}
.dj-viva .dj-op .dj-res{display:none}
.dj-viva .dj-panel{display:grid;align-content:start;gap:16px;border:1px solid var(--line);border-radius:18px;background:var(--surface);padding:22px;min-width:0}
.dj-viva .dj-panel .dj-res{padding:0;gap:14px}
.dj-viva .dj-espera{display:none}
.dj-viva .dj-paso{animation:rise .35s cubic-bezier(.2,.8,.2,1) both}
.dj-viva [data-respuesta-cliente]{display:none}
.dj-vacio{align-self:stretch;align-content:center;display:grid;justify-items:center;gap:8px;text-align:center;padding:32px 16px;border:1px dashed var(--line-2);border-radius:12px;color:var(--muted)}
.dj-viva .dj-panel:has(.dj-vacio){grid-template-rows:auto 1fr}
.dj-vacio-ic{width:40px;height:40px;border-radius:50%;background:var(--sunk);display:grid;place-items:center;color:var(--fg)}
.dj-vacio-t{font-size:15px;font-weight:600;color:var(--fg)}
.dj-vacio-s{font-size:13.5px}

/* ---------- cómo funciona (_como_funciona.html, como_funciona.js) ---------- */
.cf{display:grid;gap:20px}
.cf-paso{display:grid;gap:10px;align-content:start;border-top:2px solid var(--fg);padding-top:20px}
.cf-paso .n{font-family:var(--mono);font-size:12px;color:var(--muted)}
.cf-paso h3{font-size:19px;font-weight:600;letter-spacing:-.015em}
.cf-paso p{color:var(--fg-2);font-size:15px;line-height:1.55;max-width:46ch}
.cf-pantalla{border:1px solid var(--line);border-radius:18px;background:var(--sunk);padding:18px;display:grid;gap:12px;align-content:start;margin-bottom:28px;box-shadow:0 40px 70px -48px rgba(0,0,0,.35)}
.cf-archivos{display:grid;gap:8px}
.cf-archivos span{display:flex;gap:10px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-family:var(--mono);font-size:12.5px}
.cf-archivos small{margin-left:auto;color:var(--muted)}
.cf-flecha{display:flex;gap:8px;align-items:center;font-size:12.5px;color:var(--muted)}
.cf-clientes{display:grid;gap:8px}
.cf-clientes > div{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto auto;column-gap:10px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.cf-clientes .av{grid-row:span 2}
.cf-clientes b{font-size:13.5px}
.cf-clientes small{grid-column:2;color:var(--muted);font-size:12px}
.cf-clientes .pill{grid-column:3;grid-row:1 / span 2}
.cf-barras{display:grid;gap:9px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:14px}
.cf-barras span{display:grid;grid-template-columns:110px minmax(0,1fr) 28px;gap:10px;align-items:center;font-size:12.5px}
.cf-barras i{font-style:normal;color:var(--fg-2)}
.cf-barras b{height:8px;border-radius:99px;background:linear-gradient(90deg,var(--fg) var(--v),var(--sunk) var(--v))}
.cf-barras em{font-style:normal;font-family:var(--mono);text-align:right}
/* Escritorio con JS: la pista mide ~2.4 pantallas y la sección (.cf) se queda fija mientras pasa; el scroll
   elige el paso. Los pasos van compactos en las filas 2-4 y las filas 1fr de arriba y abajo absorben el alto
   de la pantalla de la derecha, así no quedan huecos entre pasos. */
@media (min-width:961px) and (min-height:700px){
  .cf-pista.cf-vivo{height:240vh}
  .cf-vivo .cf{position:sticky;top:max(84px,calc(50vh - 230px));grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);grid-template-rows:1fr auto auto auto 1fr;column-gap:64px;row-gap:6px}
  .cf-vivo .cf-paso{grid-column:1;position:relative;border-top:0;padding:14px 0 14px 22px;border-left:2px solid var(--line);gap:6px;cursor:pointer}
  .cf-vivo .cf-paso::before{content:"";position:absolute;left:-2px;top:0;width:2px;height:calc(var(--avance,0) * 100%);background:var(--fg)}
  .cf-vivo .cf-paso[data-paso="1"]{grid-row:2}
  .cf-vivo .cf-paso[data-paso="2"]{grid-row:3}
  .cf-vivo .cf-paso[data-paso="3"]{grid-row:4}
  .cf-vivo .cf-paso h3{color:var(--muted);transition:color .25s}
  .cf-vivo .cf-paso.on h3{color:var(--fg)}
  .cf-vivo .cf-paso p{max-height:0;opacity:0;overflow:hidden;transition:max-height .35s ease,opacity .25s}
  .cf-vivo .cf-paso.on p{max-height:140px;opacity:1}
  @media (hover:hover){.cf-vivo .cf-paso:not(.on):hover h3{color:var(--fg-2)}}
  .cf-vivo .cf-pantalla{grid-column:2;grid-row:1 / 6;align-self:center;margin:0;opacity:0;transform:translateY(10px) scale(.98);transition:opacity .35s,transform .35s;pointer-events:none}
  .cf-vivo .cf-pantalla.on{opacity:1;transform:none}
}


/* ---------- calculadora como frase editable (_calculadora.html, calculadora.js, numero_editable.js) ---------- */
html:not(.js) .calc{display:none}
.calc{border-top:1px solid var(--line)}
.calc-caja{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--surface)}
.calc-frase{display:grid;gap:22px;align-content:center;padding:36px 40px}
.calc-texto{font-size:clamp(20px,2vw,25px);line-height:1.75;letter-spacing:-.015em;color:var(--fg-2);text-wrap:pretty}
/* Número dentro de la frase: se ve como texto subrayado; al pasar el mouse invita a arrastrar */
.calc-num{font:inherit;font-family:var(--mono);font-weight:600;letter-spacing:-.02em;color:var(--fg);background:var(--sunk);border:0;border-bottom:2px solid var(--fg);border-radius:6px 6px 2px 2px;padding:0 .2em;margin:0 .1em;min-width:2ch;text-align:center;font-variant-numeric:tabular-nums;transition:background .15s,box-shadow .15s}
.calc-num:focus{outline:none;background:var(--surface);box-shadow:0 0 0 2px var(--fg)}
@media (hover:hover) and (pointer:fine){.calc-num{cursor:ew-resize}.calc-num:hover{background:var(--accent-soft)}.calc-num:focus{cursor:text}}
.calc-arrastrando,.calc-arrastrando *{cursor:ew-resize!important;user-select:none!important}
.calc-pesos{white-space:nowrap;color:var(--fg);font-weight:600}
.calc-pesos .calc-num{margin-left:.05em}
.calc-mejora{border:0;margin:0;padding:14px 16px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;border-radius:12px;background:var(--sunk);font-size:16px;color:var(--fg-2)}
.calc-mejora legend{float:left;padding:0;font-weight:600;color:var(--fg)}
.calc-pista{display:none}
@media (hover:hover) and (pointer:fine){.calc-pista{display:inline}}
.calc-mejora-op{display:inline-flex;align-items:center;gap:10px;white-space:nowrap}
.calc-seg{display:inline-flex;background:var(--surface);border:1px solid var(--line-2);border-radius:10px;padding:3px;gap:2px}
.calc-seg label{cursor:pointer}
.calc-seg input{position:absolute;opacity:0;pointer-events:none}
.calc-seg span{display:block;padding:6px 14px;border-radius:7px;font-family:var(--mono);font-weight:600;font-size:15px;color:var(--fg-2);transition:background .15s,color .15s}
.calc-seg input:checked + span{background:var(--fg);color:#fff}
.calc-seg input:focus-visible + span{outline:2px solid var(--accent);outline-offset:2px}
.calc-atajos{display:flex;gap:6px;flex-wrap:wrap;align-items:center;font-size:13px;color:var(--muted)}
.calc-atajos button{border:1px solid var(--line-2);background:var(--surface);border-radius:99px;padding:5px 12px;font-size:13px;color:var(--fg-2)}
@media (hover:hover){.calc-atajos button:hover{border-color:var(--fg);color:var(--fg)}}
.calc-atajos button.on{background:var(--fg);border-color:var(--fg);color:#fff}

.calc-res{display:grid;gap:10px;align-content:center;padding:32px 36px;background:#111;color:#F2F2F2}
.calc-res .lbl{color:#9A9A9A}
.calc-grande{display:block;font-size:clamp(38px,4.2vw,56px);font-weight:650;letter-spacing:-.035em;line-height:1;font-variant-numeric:tabular-nums}
.calc-explica{font-size:15px;color:#CFCFCF}
/* Una sola barra: el tramo gris es lo de hoy, el blanco lo que suma Gia */
.calc-barra{height:10px;border-radius:99px;background:#fff;overflow:hidden;margin-top:6px}
.calc-barra b{display:block;height:100%;background:#4A4A4A;border-right:2px solid #111;transition:width .35s cubic-bezier(.2,.8,.2,1)}
.calc-hoy{display:flex;justify-content:space-between;gap:12px;font-size:12.5px;color:#9A9A9A}
.calc-hoy b{font-family:var(--mono);font-weight:500;color:#E6E6E6;margin-left:4px}
.calc-plan{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:8px;padding-top:14px;border-top:1px solid #2E2E2E}
.calc-plan > div{display:grid;gap:2px}
.calc-plan b{font-size:16px;font-weight:600}
.calc-plan small{font-size:12.5px;color:#9A9A9A}
.calc-precio{text-align:right;justify-items:end}
.calc-precio b{font-family:var(--mono);font-size:18px;font-variant-numeric:tabular-nums}
.calc-retorno{font-size:13px;color:#BDBDBD}
a.btn.calc-cta{justify-content:center;background:#fff;color:#111;border-color:#fff;margin-top:6px}
a.btn.calc-cta:hover{background:#E9E9E9}
.calc-nota{font-size:11.5px;color:#8A8A8A}

/* ---------- preguntas (_faq.html): título y contacto a la izquierda, preguntas a la derecha ---------- */
.faq-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:64px;align-items:start}
.faq-lado{position:sticky;top:96px;display:grid;gap:28px}
.faq-lado .sec-h{margin-bottom:0}
.faq-grid .faq{max-width:none}
.faq-contacto{display:grid;gap:8px;justify-items:start;padding:20px;border:1px solid var(--line);border-radius:14px;background:var(--sunk);font-size:14px;color:var(--fg-2)}
.faq-contacto-t{font-size:16px;font-weight:600;color:var(--fg)}
.faq-contacto .btn{margin-top:6px}
@media (max-width:960px){
  .faq-grid{grid-template-columns:minmax(0,1fr);gap:28px}
  .faq-lado{display:contents}
  .faq-grid .faq{order:1}
  .faq-contacto{order:2}
}

/* ---------- frase que rota (sitio.js) ---------- */
.rot{white-space:nowrap;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.16em} /* subrayado solo bajo las letras: el ancho reservado (sitio.js) no se marca */
.rot::after{content:"";display:inline-block;width:2px;height:.9em;margin-left:2px;background:var(--fg);vertical-align:-.08em;animation:st-cursor 1s steps(1) infinite}
@keyframes st-cursor{50%{opacity:0}}

@media (max-width:960px){
  .dj-viva.dj-caja,.calc-caja{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:600px){
  .calc-frase,.calc-res{padding:24px 20px}
  .calc-texto{line-height:1.85}
  .cf-barras span{grid-template-columns:96px minmax(0,1fr) 26px}
}

/* ---------- resultado de ejemplo (_resultado.html, apps/sitio/resultado.py) ---------- */
/* Las dos tarjetas del mismo alto. Cada criterio es un radio: el elegido muestra su detalle y resalta sus
   mensajes con :has(), sin JS. Reglas para los criterios 1 a 6 (resultado.py::MAX_CRITERIOS). */
.rs-ej{align-items:stretch}
.rs-ej > .card{display:flex;flex-direction:column}
.rs-ej .trans{flex:1;align-content:start}
.rs-criterios{border:0;margin:0;padding:16px 16px 4px;min-width:0;display:grid;gap:10px}
.rs-criterios legend{float:left;width:100%;padding:0;margin-bottom:10px}
.rs-ej .crit-sc{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));overflow:visible}
.rs-ej .cchip{cursor:pointer;width:auto;transition:border-color .15s,box-shadow .15s}
.rs-pie{margin:auto 16px 0;padding:14px 0 16px}
@media (hover:hover){.rs-ej .cchip:hover{border-color:var(--line-2);background:var(--bg)}}
.rs-ej .cchip:has(input:checked){border-color:var(--fg);box-shadow:0 0 0 1px var(--fg);background:var(--surface)}
.rs-ej .cchip:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.rs-ej .cdet{display:none}
.rs-ej .msg{transition:border-color .2s,box-shadow .2s,opacity .2s}
.rs-ej:has(input[value="1"]:checked) [data-detalle="1"],
.rs-ej:has(input[value="2"]:checked) [data-detalle="2"],
.rs-ej:has(input[value="3"]:checked) [data-detalle="3"],
.rs-ej:has(input[value="4"]:checked) [data-detalle="4"],
.rs-ej:has(input[value="5"]:checked) [data-detalle="5"],
.rs-ej:has(input[value="6"]:checked) [data-detalle="6"]{display:grid;animation:rise .3s cubic-bezier(.2,.8,.2,1) both}
.rs-ej:has(input[value="1"]:checked) .msg[data-crit~="1"],
.rs-ej:has(input[value="2"]:checked) .msg[data-crit~="2"],
.rs-ej:has(input[value="3"]:checked) .msg[data-crit~="3"],
.rs-ej:has(input[value="4"]:checked) .msg[data-crit~="4"],
.rs-ej:has(input[value="5"]:checked) .msg[data-crit~="5"],
.rs-ej:has(input[value="6"]:checked) .msg[data-crit~="6"]{border-color:var(--fg);box-shadow:0 0 0 3px var(--accent-soft)}
.st-dot-ok{background:var(--ok)}
.st-dot-partial{background:var(--warn)}
.st-dot-fail{background:var(--bad)}
/* Navegadores sin :has(): se ven todos los detalles, uno debajo de otro */
@supports not selector(:has(a)){.rs-ej .cdet{display:grid;border-top:1px solid var(--line)}}