/* One-pager de módulo con membrete de Goal Praxis. Se lee en pantalla como una hoja A4 y se
   imprime o guarda en PDF tal cual (una página). Tokens del estilo aprobado el 16-09-2026. */
:root{
  --indigo:#3D5AFE;--indigo-hondo:#2A43D6;--indigo-claro:#7B8CFF;--noche:#0A0E2A;
  --niebla:#F0F2FF;--niebla-linea:#D9DEF7;--tinta:#0A0E2A;--tinta-media:#4A5178;
  --oro:#D4A017;--turquesa:#0EAEB8;
  --f:'DM Sans','Helvetica Neue',Arial,sans-serif;--m:'IBM Plex Mono',ui-monospace,Consolas,monospace;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:#DDE1F3;color:var(--tinta);font-family:var(--f);font-size:13.5px;line-height:1.5;-webkit-font-smoothing:antialiased}
h1,h2,h3,p{margin:0}
.barra{max-width:210mm;margin:18px auto 10px;display:flex;gap:10px;align-items:center;justify-content:space-between;padding:0 4px;font-size:13.5px}
.barra a{color:var(--indigo-hondo);text-decoration:none;font-weight:500}
.barra .b-i{color:#fff}
.barra .acciones{display:flex;gap:8px}
.b{display:inline-flex;align-items:center;gap:7px;font:700 13.5px var(--f);border-radius:8px;padding:9px 14px;text-decoration:none;cursor:pointer;border:1px solid transparent}
.b-i{background:var(--indigo);color:#fff}
.b-i:hover{background:var(--indigo-hondo)}
.b-l{background:#fff;color:var(--tinta);border-color:var(--niebla-linea)}
.b-w{background:#fff;color:var(--tinta);border-color:var(--niebla-linea)}
.b-w svg{color:#25D366}
.b:focus-visible,.barra a:focus-visible{outline:2px solid var(--indigo);outline-offset:2px}

.hoja{width:210mm;min-height:297mm;margin:0 auto 30px;background:#fff;box-shadow:0 20px 60px rgba(10,14,42,.18);display:flex;flex-direction:column}

/* Membrete */
.membrete{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:13mm 14mm 6mm;border-bottom:2px solid var(--indigo)}
.membrete .logo{display:flex;align-items:center;gap:9px;color:var(--tinta)}
.membrete .logo svg{width:30px;height:30px}
.membrete .logo b{font-size:22px;font-weight:500;letter-spacing:-.04em}
.membrete .logo b span{font-weight:300}
.membrete .datos{text-align:right;font-size:9.5px;line-height:1.5;color:var(--tinta-media)}
.membrete .datos strong{color:var(--tinta);font-weight:600;letter-spacing:.02em}

.cuerpo{padding:6mm 14mm 0;flex:1;display:flex;flex-direction:column;gap:4.5mm}
.titular{display:grid;grid-template-columns:1fr 62mm;gap:8mm;align-items:center}
.eyebrow{font-family:var(--m);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--tinta-media);display:flex;align-items:center;gap:7px}
.eyebrow i{width:9px;height:9px;border-radius:2px;background:var(--marca)}
.titular h1{font-size:40px;line-height:1;letter-spacing:-.03em;margin-top:8px}
.titular h1 small{display:block;font-size:15px;font-weight:300;letter-spacing:0;color:var(--tinta-media);margin-top:6px}
.titular .promesa{margin-top:12px;font-size:15px;line-height:1.4;font-weight:500}
.titular .problema{margin-top:8px;color:var(--tinta-media)}
.titular figure{margin:0;border-radius:12px;overflow:hidden;background:#EEF0F6;border-top:4px solid var(--marca)}
.titular figure img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover}

.beneficios{display:grid;grid-template-columns:repeat(3,1fr);gap:4mm}
.beneficio{border:1px solid var(--niebla-linea);border-radius:10px;padding:10px 12px;background:var(--niebla)}
.beneficio b{display:block;font-size:13px;margin-bottom:3px}
.beneficio span{font-size:11.5px;color:var(--tinta-media);line-height:1.4;display:block}

.detalle{display:grid;grid-template-columns:1fr 1fr;gap:5mm;align-items:stretch}
.detalle figure{margin:0;border-radius:10px;overflow:hidden;position:relative;background:var(--noche)}
.detalle figure img{display:block;width:100%;height:100%;max-height:48mm;object-fit:cover}
.detalle figure figcaption{position:absolute;left:8px;bottom:8px;font-family:var(--m);font-size:9px;letter-spacing:.08em;color:#fff;background:rgba(10,14,42,.75);padding:3px 7px;border-radius:5px}
.flujo{display:flex;flex-direction:column;justify-content:center;gap:6px;border:1px solid var(--niebla-linea);border-radius:10px;padding:8px 10px}
.flujo .et{font-family:var(--m);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--tinta-media)}
.flujo ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:6px;counter-reset:f}
.flujo li{text-align:center;counter-increment:f}
.flujo li img{display:block;width:100%;max-width:60px;margin:0 auto;aspect-ratio:1;object-fit:contain;animation:flota 4s ease-in-out infinite;animation-delay:calc(var(--i) * .6s)}
.flujo li b{display:block;font-size:11.5px}
.flujo li span{display:block;font-size:10px;color:var(--tinta-media);line-height:1.3}
@keyframes flota{50%{transform:translateY(-4px)}}
@media (prefers-reduced-motion:reduce){.flujo li img{animation:none}}

/* Calculadora */
.calculo{display:grid;grid-template-columns:.9fr 1.1fr;gap:6mm;border:1px solid var(--niebla-linea);border-radius:12px;padding:5mm;background:linear-gradient(180deg,#fff,var(--niebla))}
.calculo h2{font-size:17px;letter-spacing:-.01em}
.calculo .sub{font-size:11px;color:var(--tinta-media);margin-top:2px}
#calc{display:grid;grid-template-columns:1fr 1fr;gap:6px 10px;margin-top:10px}
#calc:has(label:nth-child(5)){grid-template-columns:repeat(3,1fr);gap:5px 8px}
#calc:has(label:nth-child(5)) input{padding:5px 7px}
#calc label{display:flex;flex-direction:column;gap:3px;font-size:10.5px;color:var(--tinta-media);font-weight:500}
#calc input{font:500 13px var(--m);color:var(--tinta);background:#fff;border:1px solid var(--niebla-linea);border-radius:7px;padding:6px 8px;width:100%}
#calc input:focus{outline:none;border-color:var(--indigo);box-shadow:0 0 0 3px rgba(61,90,254,.15)}
.resultado{display:flex;flex-direction:column}
.cifras{display:flex;gap:14px;align-items:flex-end}
.cifras div span{display:block;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--tinta-media);font-family:var(--m)}
.cifras .grande b{font-size:30px;letter-spacing:-.03em;color:var(--indigo-hondo);font-variant-numeric:tabular-nums;line-height:1.05}
.cifras .chica b{font-size:16px;font-variant-numeric:tabular-nums}
#calc-partes{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:2px;font-size:11px}
#calc-partes li{display:flex;justify-content:space-between;gap:10px;color:var(--tinta-media)}
#calc-partes b{color:var(--tinta);font-family:var(--m);font-weight:500}
#grafico{width:100%;height:auto;max-height:56mm;display:block;margin-top:2px}
.formula{font-family:var(--m);font-size:9.5px;color:var(--tinta-media);border-top:1px dashed var(--niebla-linea);padding-top:5px}
.supuesto{font-size:9.5px;color:var(--tinta-media);margin-top:6px}

.pie{margin-top:auto;padding:5mm 14mm 9mm;display:flex;justify-content:space-between;align-items:center;gap:14px;border-top:1px solid var(--niebla-linea);font-size:10px;color:var(--tinta-media)}
.pie .cta{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--tinta)}
.pie .cta b{color:var(--indigo-hondo)}

@media screen and (max-width:840px){
  .hoja{width:auto;min-height:0;margin:0 10px 20px}
  .titular,.detalle,.calculo{grid-template-columns:1fr}
  .beneficios{grid-template-columns:1fr}
  .membrete{flex-direction:column;align-items:flex-start}
  .membrete .datos{text-align:left}
  .barra{padding:0 12px;flex-wrap:wrap}
}
@page{size:A4;margin:0}
@media print{
  body{background:#fff}
  .barra{display:none}
  .hoja{box-shadow:none;margin:0;width:210mm;height:297mm;overflow:hidden}
  .flujo li img{animation:none}
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}