/* ===========================================================================
   moneta-tipografia.css
   Capa de TIPOGRAFIA, DIMENSIONES y LOGO. Nada mas.
   No toca ni un color: tu azul, tu vino, tu malva y tu modo oscuro siguen
   exactamente como estaban. Tampoco toca iconos, imagenes ni estructura.

   Se carga DESPUES del <style> de cada pagina, asi que sobrescribe solo
   lo que aqui se declara. Para quitarlo, borra la linea <link> y todo
   vuelve a estar como antes.

   Los valores son los del sistema de Klar, medidos sobre su CSS de
   produccion (klar-2-0-jonny.webflow.shared.css, 791 KB).
   =========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@300;400;500;600;700;800&display=swap');

:root{
  /* --- la unica familia -------------------------------------------------- */
  /* Klar usa Sharp Sans en 1970 elementos y ninguna otra. Sharp Sans es de
     licencia comercial; Figtree es la libre mas cercana en forma. */
  --f:'Figtree','Sharpsans',Arial,sans-serif;

  /* --- escala tipografica (Klar) ----------------------------------------- */
  --t-tiny:.75rem;      /* 12px */
  --t-small:.875rem;    /* 14px */
  --t-base:1rem;        /* 16px */
  --t-medium:1.125rem;  /* 18px */
  --t-large:1.25rem;    /* 20px  = h6 */
  --t-h5:1.5rem;        /* 24px */
  --t-h4:2rem;          /* 32px */
  --t-h3:2.25rem;       /* 36px */
  --t-h2:3rem;          /* 48px */
  --t-h1:3.25rem;       /* 52px */
  --t-xl:3.5rem;        /* 56px */
  --t-display:4rem;     /* 64px */

  /* --- escala de espaciado (11 pasos, sin valores sueltos) ---------------- */
  --s-tiny:.25rem; --s-xxsmall:.5rem; --s-xsmall:1rem; --s-small:1.5rem;
  --s-medium:2rem; --s-large:3rem;   --s-xlarge:4rem;  --s-xxlarge:5rem;
  --s-huge:6rem;   --s-xhuge:7rem;   --s-xxhuge:10rem;

  /* --- padding vertical de seccion --------------------------------------- */
  --sec-small:3rem; --sec-medium:5rem; --sec-large:7rem;

  /* --- contenedores ------------------------------------------------------- */
  --ancho:95rem;        /* 1520px */
  --ancho-md:64rem;     /* 1024px */
  --ancho-sm:48rem;     /*  768px */
  --margen:5%;          /* porcentual, no pixeles fijos */
}

/* Klar reduce la escala en dos escalones. Breakpoints: 991 / 767 / 479 */
@media(max-width:991px){
  :root{
    --t-h1:2.5rem; --t-h2:2.25rem; --t-h3:2rem; --t-xl:2.5rem; --t-display:3rem;
    --s-large:2.5rem; --s-xlarge:3.5rem; --s-xxlarge:4.5rem;
    --s-huge:5rem; --s-xhuge:6rem; --s-xxhuge:7.5rem;
    --sec-medium:4rem; --sec-large:6rem;
  }
}
@media(max-width:767px){
  :root{ --t-h2:2rem; --sec-small:2rem; --sec-medium:3rem; --sec-large:4rem; }
}


/* ===========================================================================
   1 · TIPOGRAFIA
   Una sola familia, cuatro pesos, cinco tamanos de texto y seis de titular.
   Klar no usa 800 ni 900 en ningun sitio: todos sus titulares son 600.
   Tampoco aprieta las letras: letter-spacing normal siempre.
   =========================================================================== */

body,button,input,select,textarea,
.btn,.simTab,.simGSelect,.cform input,.cform textarea,.cform select{
  font-family:var(--f);
}
body{font-size:var(--t-base);line-height:1.5}

h1,h2,h3,h4,h5,h6,
.credsTitle,.calcTop output,.calcHero strong,.numBig,.rate .big,.proofpanel .fq,
.kn,.simRightMain strong,.simBig,.simItem b,.simSliderTop output,.simRow2 b,
.mvTitle,.curvNum,.kpH1,.kpH2,.kpFactNum,.prod .big,.impact .num .n{
  font-family:var(--f);
  font-weight:600;
  line-height:1.2;
  letter-spacing:normal;
}

/* --- titulares --------------------------------------------------------- */
.hero h1,.kpH1                         {font-size:var(--t-h1)}
.shead h2,.calcIntro h2,.ctablock h2,
.kpH2,.impact h2                       {font-size:var(--t-h2)}
.prod h3,.mvTitle                      {font-size:var(--t-h3)}
.svcLeft h3,.numInfo h3,.kstep h3,
.curvStep h3,.reqCol h3                {font-size:var(--t-h4);line-height:1.3}
.credsTitle,.feat h3,.infoCard h3,
.kpIco h3,.kpAdv h3,.nosCard h3,
.nosSapi summary,.step h3,.gcard h4,
.faq summary,.simLegal summary,
.proofpanel .fq,.tcQuote p             {font-size:var(--t-h5);line-height:1.4}
.hpCard h3,.cred .lockup,.prod .tag,
.simItem b,.simRow2 b                  {font-size:var(--t-large);line-height:1.4}

/* --- cifras grandes ---------------------------------------------------- */
.numBig,.kn,.rate .big                 {font-size:var(--t-display);line-height:1.2}
.calcHero strong,.impact .num .n,
.simRightMain strong,.simBig,
.kpFactNum,.prod .big,.calcTop output  {font-size:var(--t-h2);line-height:1.2}

/* --- texto ------------------------------------------------------------- */
.hero p.sub,.shead p,.calcIntro p,.kpLead,.kstep p,.curvStep p,.mvText,
.kpUsesTitle,.kpUses li,.ctablock p,.nosSub{font-size:var(--t-medium);line-height:1.5}

.feat p,.infoCard p,.prod p,.svcItem span,.numInfo p,.step p,.gcard p,
.tcard .q,.faq .a,.reqList li,.kpReqs li,.kpAdv p,.kpIco p,.kpFact p,
.nosCard p,.nosSapi p,.hpCard p,.impact .num .l,.impact .foot,
.calcNotes li,.calcKv,.calcFixed,.simRow2,.simRightRow,.simLegalRow,
.simNote,.simHint,.simCta p,.contactInfo .ci b,.contactInfo .ci span,
.contactInfo .socialRow a,.prodLegalRow,.tcard .st,.rate .lab,
.details.step .stepbody p,.step .n,.numCta,.prod .go,.hpNum,
footer,footer h4,footer .brandcol p,footer .antifraud,
.pill,.hero .pill,.topbar,nav .links a,.btn,.simTab,.simGSelect,
.shead .k,.heroKick,.impact .k,.numTag,.simLabel,.simRightKicker,
.kpEyebrow,.cred .cap,.calcTop label,.calcHero span,.simSliderTop label,
.cform label,.tcName,.proofpanel .fw,.tcard .who,.reqCol .sub,
.prodLegal summary,.kpFactName,.shotchip .v{font-size:var(--t-base);line-height:1.5}

.navTag,.credsNote,.calcFine,.calcLims,.calcLeg,.numFine,.prod .disc,
.simFine,.simRightFine,.prodLegalFine,.tcRole,.simItem span,
.simRightMain span,.cookieBanner p,.cookieBanner .btn,.shotchip .t,
footer .legal,.gcard p{font-size:var(--t-small);line-height:1.5}

/* --- pesos: Klar solo usa 400 / 500 / 600 ------------------------------- */
.btn,.numCta,.prod .go,.simTab,.simCtaBtn,
nav .links a,.pill,.topbar b,footer h4,
.calcKv b,.simRow2 b,.simRightRow b,.simLegalRow b,.reqList b,.kpReqs b,
.tcName,.tcard .who,.proofpanel .fw,.cform label,.calcTop label,
.calcHero span,.simSliderTop label,.contactInfo .socialRow a,
.kpFactName,.numTag,.simLabel,.simRightKicker,.shotchip .v,
.prodLegal summary,.faq summary,.simLegal summary,
details.nosCard summary,.nosSapi summary,.step .n,.hpNum{font-weight:600}

.shead .k,.heroKick,.impact .k,.kpEyebrow,.navTag,
.cred .cap,.simItem span,.tcRole,.credsNote{font-weight:400}

/* Klar no pone versalitas ni aprieta el interletraje en las antetitulos */
.shead .k,.heroKick,.impact .k,.numTag,.simLabel,.simRightKicker,
.kpEyebrow,.mvTitle{text-transform:none;letter-spacing:normal}

/* los signos + de los desplegables, al tamano del titular que acompanan */
.faq summary::after,details.step summary::after,details.reqCol summary::after,
details.nosCard summary::after,.nosSapi summary::after,
.prodLegal summary::after{font-size:var(--t-h4);font-weight:400;line-height:1}

/* ===========================================================================
   2 · DIMENSIONES: contenedores, margenes y ritmo vertical
   =========================================================================== */

.wrap{max-width:var(--ancho);margin-left:auto;margin-right:auto;
      padding-left:var(--margen);padding-right:var(--margen)}
section{padding-top:var(--sec-large);padding-bottom:var(--sec-large)}
.kpSec{padding-top:var(--sec-large);padding-bottom:var(--sec-large)}
.kpSec.tight{padding-top:var(--sec-medium)}
.calc .wrap,.impact .wrap{padding-top:var(--sec-large);padding-bottom:var(--sec-large)}
.hero{padding-top:var(--sec-medium);padding-bottom:var(--sec-medium)}
footer{padding-top:var(--sec-medium);padding-bottom:var(--s-medium)}

.shead{max-width:52rem;margin-bottom:var(--s-large)}
.shead.wide{max-width:var(--ancho-md)}
.shead p{margin-top:var(--s-xsmall)}

.credsCard{max-width:var(--ancho)}
.credsRow,.credsNote{max-width:var(--ancho-md)}
.svcList,.numList,.nosCards,.misionVision,.simCard{max-width:var(--ancho-md)}
.hero .split{max-width:var(--ancho-md)}

/* separaciones entre bloques, tomadas de la escala */
.feats,.gar,.prods,.tcards,.steps{gap:var(--s-xsmall)}
.infoGrid,.reqGrid,.svcList,.cform{gap:var(--s-small)}
.calcGrid,.kpGrid,.contactGrid,.kpAdvGrid,.kpIcoGrid,.stepsband,.garband{gap:var(--s-large)}
.credsRow,.impact .nums,.simRow,.kpFacts{gap:var(--s-medium)}

.calcCard,.simLeft,.simRight,.proofpanel,.reqCol,.nosCard,
.infoCard,.feat,.gcard,.step,.tcard,.prod,.svcRow{padding:var(--s-medium)}
@media(min-width:992px){
  .calcCard,.simLeft,.simRight,.proofpanel{padding:var(--s-large)}
  .credsCard{padding:var(--s-xlarge) var(--s-large)}
  .kpBand .kpInner{padding:var(--sec-medium) var(--s-large)}
}

/* botones: la medida de Klar */
.btn{padding:.75rem 1.5rem;line-height:1.5}
.btn.is-small,.cookieBanner .btn{padding:.5rem 1.25rem}
.numCta,.prod .go,.simTab{padding:.75rem 1.5rem}

/* ===========================================================================
   3 · LOGO
   Era tres piezas con tres tamanos y dos colores: simbolo de 30 px, palabra
   de 19 y el lema en gris debajo. Ahora simbolo y palabra van compensados
   (26 y 20) con el hueco cerrado a 8, y sin lema al lado: ni Klar ni Stori
   ponen lema en la barra. El lema se conserva, pero en el pie.
   =========================================================================== */

.logo{display:inline-flex;align-items:center;gap:8px}
.logo .lmark{height:26px;width:auto;aspect-ratio:1091/873;flex:none}
.logo .lword{height:20px;width:auto;aspect-ratio:1639/451;flex:none}
.brand{display:block}
nav .navTag{display:none}
footer .logo .lmark{height:32px}
footer .logo .lword{height:24px}

/* ===========================================================================
   4 · OPCIONAL — un solo radio
   Klar usa 30 px en todo, y 100% en lo circular. Tu sitio mezcla 10, 12, 13,
   14, 16, 18, 20, 24, 26, 28, 30, 32 y 999. Unificar es la mitad de la
   sensacion de orden. Si no lo quieres, borra este bloque entero y ya.
   =========================================================================== */

.feat,.gcard,.infoCard,.calcCard,.prod,.svcRow,.step,.tcard,.reqCol,
.nosCard,.nosSapi,.credsCard,.simCard,.proofpanel,.carousel,.heroShot,
.stepspic,.garpic,.proofpic,.misionVision,.ctablock,.kpBand,.hpCard,
.faq details,.cookieBanner,.tcPhoto{border-radius:30px}

.btn,.numCta,.prod .go,.simTab,.prod .tag,.kpFactName,.shotchip,
.simGSelect,.cform input,.cform select{border-radius:30px}
.cform textarea{border-radius:30px}

.step .n,.hpNum,.tcArrow,.hpArrow,.waFloat,.kpIcoFig,.tcDot{border-radius:100%}
.tcDot.active{border-radius:30px}

/* el lema, ahora en el pie */
footer .lema{font-size:var(--t-base);margin:0 0 .75rem;opacity:.7}

/* ===========================================================================
   5 · PESO E INTERLINEADO DE LOS TITULARES
   Se repiten aqui los selectores exactos del CSS original porque alli llevan
   mas especificidad que una regla de elemento suelta. Klar no usa 800 ni 900
   en ningun titular: todos son 600, con interlineado 1.2.
   =========================================================================== */

.hero h1,.shead h2,.calcIntro h2,.impact h2,.ctablock h2,.kpH1,.kpH2,
.prod h3,.mvTitle,.numBig,.kn,.rate .big,.calcHero strong,.calcTop output,
.impact .num .n,.simRightMain strong,.simBig,.kpFactNum,.prod .big,
.curvNum,.simSliderTop output{
  font-weight:600;line-height:1.2;letter-spacing:normal;
}

.svcLeft h3,.numInfo h3,.kstep h3,.curvStep h3,.reqCol h3,.kpAdv h3,
.hpCard h3,.kpIco h3{font-weight:600;line-height:1.3;letter-spacing:normal}

.credsTitle,.feat h3,.infoCard h3,.nosCard h3,.step h3,.gcard h4,
.cred .lockup,.proofpanel .fq,.tcQuote p,.faq summary,.simLegal summary,
details.nosCard summary,.nosSapi summary,.simItem b,.simRow2 b,
.numPrice,.tcName,.kpFactName,.hpNum,.step .n,.numCta,.prod .go,
.prodLegal summary{font-weight:600;letter-spacing:normal}

.credsTitle,.feat h3,.infoCard h3,.nosCard h3,.step h3,.gcard h4,
.proofpanel .fq,.tcQuote p,.faq summary{line-height:1.4}

/* el cuerpo respira a 1.5, como en Klar */
.hero p.sub,.shead p,.calcIntro p,.kpLead,.kstep p,.curvStep p,.mvText,
.feat p,.infoCard p,.prod p,.numInfo p,.step p,.faq .a,.tcard .q,
.kpAdv p,.kpIco p,.kpFact p,.nosCard p,.nosSapi p,.hpCard p,
.impact .num .l,.impact .foot,.reqList li,.kpReqs li,.svcItem span,
.kpUses li,.ctablock p,.footer .brandcol p{line-height:1.5}

/* Tercer escalon: celular. Mismas proporciones, tamanos comodos de leer en 375-430 px. */
@media(max-width:599px){
  :root{
    --t-h1:1.875rem;  /* 30px */
    --t-h2:1.625rem;  /* 26px */
    --t-h3:1.5rem;    /* 24px */
    --t-h4:1.25rem;   /* 20px */
    --t-h5:1.125rem;  /* 18px */
    --t-large:1.0625rem; /* 17px */
    --t-medium:1rem;  /* 16px */
    --t-xl:2rem;      /* 32px */
    --t-display:2.25rem; /* 36px */
    --s-medium:1.5rem; --s-large:2rem; --s-xlarge:2.5rem; --s-xxlarge:3rem;
    --sec-small:1.75rem; --sec-medium:2.5rem; --sec-large:3rem;
  }
  .btn,.numCta,.prod .go,.simTab{font-size:var(--t-small);padding:.7rem 1.25rem}
}