/* Vive tu Crédito — estilos del sitio. Fuente de verdad: vtc-diseno-aprobado/propuesta.html (v16). */
@font-face{font-family:'Hanken Grotesk';font-weight:300;font-style:normal;font-display:swap;src:url(/assets/fonts/hanken-grotesk-300.woff2) format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-weight:700;font-style:normal;font-display:swap;src:url(/assets/fonts/hanken-grotesk-700.woff2) format('woff2')}
@font-face{font-family:'Karrik';font-weight:400;font-style:normal;font-display:swap;src:url(/assets/fonts/karrik-regular.woff2) format('woff2'),url(/assets/fonts/karrik-regular.woff) format('woff')}
@font-face{font-family:'Delicious Handrawn';font-weight:400;font-style:normal;font-display:swap;src:url(/assets/fonts/delicious-handrawn-regular.woff2) format('woff2'),url(/assets/fonts/delicious-handrawn-regular.woff) format('woff')}
:root{--dark:#062F31;--med:#015448;--green:#6CC072;--light:#CFEAE2;--q:#455A64;--q2:#263238;--bar:86px;color-scheme:light}
@media (min-width:901px){:root{--bar:120px}}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--bar) + 8px)}
body{margin:0;background:#ffffff;color:var(--dark);font-family:'Hanken Grotesk',system-ui,sans-serif;font-weight:300;font-size:18px;line-height:1.5;-webkit-text-size-adjust:100%}
a{color:inherit}
button,input{font-family:inherit}
img{max-width:100%}
:focus-visible{outline:3px solid var(--green);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.gut{padding-inline:max(16px,min(5vw,80px))}
.wrap{max-width:1280px;margin:0 auto}
h1,h2,h3{margin:0;font-weight:700}
.h2{font-size:clamp(34px,5vw,64px);line-height:1.05;letter-spacing:-0.02em;text-wrap:balance}
.k{font-family:'Karrik','Hanken Grotesk',sans-serif;font-weight:400}
.cta{display:inline-block;background:var(--dark);color:var(--light);font-weight:700;font-size:clamp(18px,2vw,24px);padding:16px 36px;border-radius:999px;text-decoration:none;border:0;cursor:pointer}
.cta:hover{background:var(--med)}
.cta.g{background:var(--green);color:var(--dark)}
.cta.o{background:transparent;border:2px solid var(--light);color:var(--light)}

/* barra de menú */
.bar{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:var(--dark);height:var(--bar);display:flex;align-items:center;justify-content:space-between;gap:16px;padding-right:max(16px,min(5vw,80px))}
.logo-pill{align-self:stretch;background:var(--med);border-radius:0 999px 999px 0;padding:0 clamp(28px,3.4vw,52px) 0 max(16px,min(5vw,80px));display:flex;align-items:center}
.logo-pill img{display:block;width:96px;height:auto}
@media (min-width:901px){.logo-pill img{width:160px}}
.nav{display:none;align-items:center;gap:6px 32px}
@media (min-width:901px){.nav{display:flex}}
.nav a{color:var(--light);opacity:.7;text-decoration:none;font-size:20px}
.nav a.ctn{opacity:1;background:var(--green);color:var(--dark);font-weight:700;padding:8px 22px;border-radius:999px}
.nav a:hover{opacity:1;font-weight:700}
.mm{display:block;position:relative}
@media (min-width:901px){.mm{display:none}}
.mm summary{list-style:none;cursor:pointer;color:var(--light);font-size:18px;border:2px solid var(--light);border-radius:999px;padding:8px 20px}
.mm summary::-webkit-details-marker{display:none}
.mm div{position:absolute;right:0;top:calc(100% + 12px);background:var(--dark);border:1px solid var(--med);border-radius:20px;padding:12px;display:flex;flex-direction:column;min-width:230px}
.mm a{color:var(--light);text-decoration:none;padding:12px 16px;font-size:18px}

/* hero */
.hero{position:relative;overflow:hidden;background:var(--light)}
.track{display:flex;transition:transform .4s cubic-bezier(.25,1,.5,1)}
.slide{flex:0 0 100%;min-width:0}
.slide img{display:block;width:100%;height:auto;aspect-ratio:1920/946;object-fit:cover;object-position:top}
@media (min-width:901px){.slide img{height:clamp(420px,calc(100vh - var(--bar)),900px);aspect-ratio:auto}}
.dots{position:absolute;left:0;right:0;bottom:12px;display:flex;justify-content:center;gap:2px}
.dots button{width:24px;height:24px;border:0;background:transparent;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center}
.dots button::before{content:"";width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.8);transition:transform .2s,background .2s}
.dots button[aria-current="true"]::before{background:var(--dark);transform:scale(1.4)}

/* bancos */
.banks{background:var(--light);padding-block:56px 64px}
.banks .t{display:flex;justify-content:center;margin-bottom:36px}
.banks .t span{background:var(--med);color:var(--light);font-size:clamp(20px,2.2vw,30px);padding:12px 36px;border-radius:999px}
.marq{overflow:hidden;--iw:200px}
@media (max-width:1024px){.marq{--iw:33.333vw}}
.mtrack{display:flex;width:max-content;animation:marq 24s linear infinite}
@media (max-width:1024px){.mtrack{animation-duration:15s}}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(calc(var(--iw) * -7))}}
.mtrack .b{flex:0 0 var(--iw);height:48px;display:flex;align-items:center;justify-content:center;padding-inline:20px}
.mtrack img{display:block;max-width:100%;max-height:34px;width:auto;height:auto}
@media (prefers-reduced-motion:reduce){.mtrack{animation:none}.marq{overflow-x:auto}}

/* somos */
.somos .sm{display:flex;flex-wrap:wrap;align-items:stretch}
.somos .tx{flex:1 1 460px;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:22px;padding:88px max(16px,min(5vw,80px)) 88px clamp(24px,5vw,72px)}
.somos .tx h2{font-size:clamp(34px,4.6vw,64px);line-height:.98;letter-spacing:-0.02em}
.somos .tx p{margin:0;font-size:clamp(19px,1.7vw,24px);line-height:1.55}
.blk{display:grid}
.blk p{grid-area:1/1;opacity:0;pointer-events:none;transition:opacity .3s}
.blk p.on{opacity:1;pointer-events:auto}
.ctl2{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;margin-top:6px}
.arrows{display:flex;gap:10px}
.arrow{width:40px;height:40px;border-radius:50%;border:1.5px solid var(--q);background:transparent;color:var(--q);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.arrow:hover{background:var(--dark);border-color:var(--dark);color:var(--light)}
.somos .im{flex:1 1 480px;min-width:0;display:flex}
.somos .im img{display:block;width:100%;height:auto;min-height:420px;object-fit:cover;flex:1}

/* opiniones */
.ops{background:var(--med);padding-block:88px;color:var(--light)}
.ops h2{text-align:center;margin-bottom:36px;font-family:'Karrik','Hanken Grotesk',sans-serif;font-weight:400;font-size:clamp(22px,2.4vw,30px);letter-spacing:0;color:var(--light);opacity:.95}
.cv{overflow:hidden}
.ctrack{display:flex;transition:transform .5s cubic-bezier(.25,1,.5,1)}
.cslide{flex:0 0 50%;min-width:0;padding-inline:12px}
@media (max-width:1024px){.cslide{flex-basis:100%}}
.pill{height:350px;background:var(--light);color:var(--dark);border-radius:175px;padding:28px clamp(36px,6vw,80px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center}
@media (max-width:640px){.pill{border-radius:16px;height:500px;padding:32px 26px}}
.pill blockquote{margin:0;font-family:'Karrik',sans-serif;font-size:clamp(15px,1.2vw,17px);line-height:1.45}
.pill img{display:block;width:52px;height:auto}
.pill cite{font-style:normal;font-weight:700;font-size:15px;color:var(--med)}

/* servicios */
.srv{padding-block:96px}
.srv h2{margin-bottom:48px}
.sgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
@media (max-width:1100px){.sgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.sgrid{grid-template-columns:minmax(0,1fr)}}
.sc{background:var(--dark);border-radius:24px;overflow:hidden;display:flex;flex-direction:column}
.sc .ph{position:relative;aspect-ratio:4/3;overflow:hidden}
.sc .ph img{width:100%;height:100%;object-fit:cover;display:block}
.sc .ov{position:absolute;inset:0;background:rgba(1,84,72,.8);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--light);padding:20px;font-size:16px;line-height:1.5;opacity:0;pointer-events:none;transition:opacity .25s;overflow:auto}
.sc.open .ov{opacity:1;pointer-events:auto}
.sc .ft{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px 18px}
.sc h3{font-family:'Karrik',sans-serif;font-weight:400;font-size:18px;line-height:1.2;color:var(--light)}
.sc button{flex:0 0 44px;width:44px;height:44px;border-radius:50%;border:2px solid var(--green);background:transparent;color:var(--green);font-size:26px;line-height:1;cursor:pointer;transition:transform .2s}
.sc.open button{transform:rotate(45deg);background:var(--green);color:var(--dark)}

/* simulador */
.sim{background:var(--dark);padding-block:96px;color:var(--light)}
.sim .wrap{display:flex;flex-wrap:wrap;gap:56px;align-items:flex-start}
.sim .in{flex:1 1 340px;min-width:0;display:flex;flex-direction:column;gap:20px}
.sim .in h2{color:#fff}
.sim .in p{margin:0;font-size:22px;max-width:460px}
.hand{font-family:'Delicious Handrawn','Hanken Grotesk',cursive;font-weight:400;font-size:32px;line-height:1;color:var(--green)}
.box{flex:1 1 460px;min-width:0;background:#fff;color:var(--dark);border-radius:32px;padding:clamp(22px,3.4vw,40px);display:flex;flex-direction:column;gap:22px}
.steps{display:flex;flex-wrap:wrap;gap:10px 24px}
.st{display:flex;align-items:center;gap:8px;font-size:15px;color:#5f7a7a}
.st i{font-style:normal;width:28px;height:28px;border-radius:50%;border:2px solid var(--light);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px}
.st.on{color:var(--dark);font-weight:700}.st.on i{background:var(--dark);border-color:var(--dark);color:#fff}
.st.done i{background:var(--green);border-color:var(--green);color:var(--dark)}
.stack{display:flex;flex-direction:column;gap:20px}
.chips{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.chip{flex:0 1 calc(25% - 9px);min-width:200px;border:2px solid var(--light);background:#fff;color:var(--dark);padding:14px 16px;border-radius:18px;cursor:pointer;text-align:left;font-size:17px;font-weight:700;display:flex;flex-direction:column;gap:2px}
.chip{box-sizing:border-box}
@media (max-width:560px){.chip{flex:1 1 100%}}
.chip small{font-weight:300;color:#4a6a6b;font-size:14px}
.chip.on{border-color:var(--green);background:var(--light)}
.pl{border:2px solid var(--light);background:#fff;color:var(--dark);padding:11px 22px;border-radius:999px;cursor:pointer;font-size:17px;font-weight:700}
.pl.on{border-color:var(--green);background:var(--light)}
.field{width:100%;border:2px solid var(--light);border-radius:16px;padding:13px 16px;font-size:19px;color:var(--dark);background:#fff;font-weight:300}
.field:focus{border-color:var(--med);outline:none}
label.l,.l{display:block;font-weight:700;margin-bottom:8px}
.sum{display:flex;flex-wrap:wrap;gap:8px 32px;background:#EAF5F1;border-radius:16px;padding:16px 20px;font-size:17px}
.row2{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px}
.res{background:var(--dark);color:#fff;border-radius:24px;padding:28px;display:flex;flex-direction:column;gap:16px}
.res .big{font-size:clamp(42px,6vw,60px);font-weight:700;letter-spacing:-0.02em;line-height:1.05;font-variant-numeric:tabular-nums}
.res dl{margin:0;font-variant-numeric:tabular-nums}
.res dl div{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-top:1px solid #1B4A4C}
.res dl div:last-child{border-bottom:1px solid #1B4A4C}
.res dt{color:#BFD9D4}.res dd{margin:0;font-weight:700;text-align:right}
.note{margin:0;font-size:14px;color:#9FBDB8}
.btn2{background:var(--dark);color:#fff;border:0;font-size:19px;font-weight:700;padding:15px 30px;border-radius:999px;cursor:pointer}
.btn2:disabled{background:#B9CDCA;cursor:not-allowed}
.btn3{background:transparent;color:var(--dark);border:2px solid var(--light);font-size:17px;font-weight:700;padding:11px 24px;border-radius:999px;cursor:pointer}
[hidden]{display:none!important}

/* faqs */
.faq{background:var(--light)}
.faq .fq{display:flex;flex-wrap:wrap;align-items:stretch}
.faq .im{flex:1 1 480px;min-width:0;display:flex}
.faq .im img{display:block;width:100%;height:auto;min-height:320px;object-fit:cover;flex:1}
.faq .li{flex:1 1 480px;min-width:0;padding:96px max(16px,min(5vw,80px)) 96px clamp(24px,5vw,72px)}
.faq h2{margin-bottom:28px}
#faqList{max-height:330px;overflow-y:auto;padding-right:14px;scrollbar-width:thin;scrollbar-color:var(--med) transparent}
details.q{border-bottom:2px solid var(--dark);padding:18px 0}
details.q summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;font-weight:700;font-size:clamp(18px,1.6vw,20px);color:var(--q)}
details.q[open] summary{color:var(--q2)}
details.q summary::-webkit-details-marker{display:none}
details.q summary b{font-size:30px;line-height:1;color:var(--med);transition:transform .2s}
details.q[open] summary b{transform:rotate(45deg)}
details.q p{margin:12px 0 0;font-size:clamp(16px,1.4vw,18px);line-height:1.55}

/* pie */
.foot{background:var(--med);color:var(--light);padding-block:72px 36px}
.foot .wrap{display:flex;flex-direction:column;gap:44px}
.foot .top{display:flex;flex-wrap:wrap;gap:40px;justify-content:space-between;align-items:flex-start}
.foot .lg{flex:1 1 300px;min-width:0}
.foot .lg img{display:block;width:130px;height:auto}
.foot .cols{flex:1 1 380px;display:flex;flex-wrap:wrap;gap:32px;min-width:0}
.foot .cols>div{flex:1 1 180px;display:flex;flex-direction:column;gap:9px;font-size:17px;min-width:0}
.foot .wabtn{align-self:flex-start;margin-top:8px;background:var(--green);color:var(--dark);font-weight:700;padding:12px 24px;border-radius:999px}
.foot .soc{display:flex;gap:28px;margin-top:6px}.foot .soc a{display:block;line-height:0}
.ct{position:fixed;inset:0;z-index:110;background:rgba(6,47,49,.55);overflow-y:auto;display:grid;place-items:center;padding:16px}
.ctw{width:min(1000px,100%);background:var(--light);border-radius:32px;padding:clamp(20px,3.4vw,44px);display:flex;flex-direction:column;gap:24px;margin:auto}
.ctw .pvh h2{font-size:clamp(26px,3vw,34px)}
.ctw .pvx{width:44px;height:44px}
.ctf{background:var(--dark);color:#fff;border-radius:28px;padding:clamp(20px,3vw,40px);display:flex;flex-direction:column;gap:24px}
.ctr{display:grid;grid-template-columns:1fr 1fr;gap:12px 20px}
.ctc{display:flex;flex-direction:column;gap:10px;min-width:0}
.ctf legend{padding:0}
.ctc label,.ctf legend{font-weight:700;font-size:18px}
.ctc input{border:0;border-radius:999px;background:var(--med);height:42px;padding:0 18px;color:#fff;font:inherit;font-size:17px;min-width:0}
.ctc input:focus-visible{outline:2px solid var(--green)}
.ctf fieldset{border:0;padding:0;margin:0;display:flex;flex-direction:column;gap:14px;min-width:0}
.ckg{display:grid;grid-template-columns:1fr 1fr;gap:14px 40px}
.ck,.ak{display:flex;gap:14px;align-items:flex-start;font-size:17px;line-height:1.35;cursor:pointer;font-weight:300}
.ck input,.ak input{position:absolute;opacity:0;width:0;height:0}
.ck i,.ak input+span::before{content:"";flex:none}
.ck i{width:22px;height:22px;border-radius:6px;background:var(--med);margin-top:1px;display:grid;place-items:center}
.ck input:checked+i::after{content:"";width:11px;height:6px;border-left:3px solid var(--green);border-bottom:3px solid var(--green);transform:rotate(-45deg) translate(1px,-1px)}
.ck input:focus-visible+i{outline:2px solid var(--green)}
.ak{font-size:15px;align-items:center}.ak input{position:static;opacity:1;width:18px;height:18px;accent-color:#6CC072}.ak a{color:var(--green)}
.ctm{font-weight:700;color:var(--green)}
.ctb{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center}
.ctb p{font-weight:700;font-size:17px;flex:1 1 320px;min-width:0}
.ctg{display:inline-flex;gap:10px;align-items:center;border:0;border-radius:999px;background:var(--green);color:var(--dark);font:inherit;font-weight:700;font-size:18px;padding:13px 28px;cursor:pointer}
.ctg:disabled{background:#6f908b;color:#d8e6e3;cursor:not-allowed}
@media (max-width:640px){.ctr,.ckg{grid-template-columns:1fr}.ctw{border-radius:24px}}
.pv{position:fixed;inset:0;z-index:120;background:var(--light);overflow-y:auto;padding:clamp(16px,4vw,70px)}
.pvw{max-width:1280px;margin:0 auto;display:flex;flex-direction:column;gap:28px}
.pvh{display:flex;justify-content:space-between;align-items:center;gap:16px}
.pvh h2{font-size:clamp(28px,3.4vw,44px);text-decoration:underline;text-underline-offset:5px;color:var(--dark)}
.pvx{flex:none;width:56px;height:56px;border-radius:50%;border:0;background:var(--dark);cursor:pointer;display:grid;place-items:center}
.pvc{background:var(--dark);color:#fff;border-radius:40px;padding:clamp(24px,5vw,80px);display:flex;flex-direction:column;gap:36px}
.pvt{display:flex;flex-direction:column;gap:8px}
.pvt h3{font-size:clamp(22px,2.2vw,32px);line-height:1.15;font-weight:700;margin-top:26px}
.pvt h3:first-child{margin-top:0}
.pvt p{font-size:clamp(16px,1.5vw,20px);line-height:1.6;font-weight:300}
.pvd{align-self:flex-start;display:inline-flex;gap:10px;align-items:center;background:var(--green);color:var(--dark);font-weight:700;padding:14px 26px;border-radius:999px;text-decoration:none}
@media (max-width:560px){.pvc{border-radius:24px}}
.foot strong{color:#fff;font-size:18px;font-weight:700}
.foot a{text-decoration:none}.foot a:hover{text-decoration:underline}
.foot .bt{border-top:1px solid #1B6B5E;padding-top:20px;display:flex;flex-wrap:wrap;gap:10px 28px;justify-content:space-between;font-size:15px;color:#BFD9D4}
/* <picture> (WebP + respaldo) no debe alterar el layout de la propuesta: la <img> se comporta como hija directa */
picture{display:contents}

/* ---- Agregados para páginas internas (no están en la propuesta; reutilizan sus estilos) ---- */
/* Título de cada tarjeta de servicio enlaza a su página; se ve igual que en la propuesta */
.sc h3 a{color:inherit;text-decoration:none}
.sc h3 a:hover{text-decoration:underline;text-underline-offset:3px}
/* Página de servicio: H1 con el mismo estilo que "Somos Vive Tu Crédito" */
.somos .tx h1{font-size:clamp(34px,4.6vw,64px);line-height:.98;letter-spacing:-0.02em}
.somos .tx p a{color:var(--med);font-weight:700}
/* Página del aviso de privacidad: mismo contenido y estilo que la ventana, sin fijarse a la pantalla */
.pvp{background:var(--light);padding-block:clamp(16px,4vw,70px)}
.pvh h1{font-size:clamp(28px,3.4vw,44px);text-decoration:underline;text-underline-offset:5px;color:var(--dark)}
/* Ventana Contáctanos: 24px entre "Selecciona los servicios…" y las casillas (aprobado por Marco 2026-10-16).
   El gap del fieldset no aplica a <legend>, por eso va como margen. */
.ctf legend{margin-bottom:24px}
/* Página del aviso: subtítulos como H2 (orden correcto de títulos), con el mismo estilo que los H3 de la ventana */
.pvt h2{font-size:clamp(22px,2.2vw,32px);line-height:1.15;font-weight:700;margin-top:26px}
.pvt h2:first-child{margin-top:0}