/* ==========================================================================
   ORTIZ CONTADORES - HOJA DE ESTILOS
   --------------------------------------------------------------------------
   COMO CAMBIAR COLORES: edite solo los valores de ":root" (la linea de abajo).
   Todo el sitio usa esas variables:
     --azul-oscuro / --azul-medio : azules profundos (portada, titulos, pie de pagina)
     --celeste / --celeste-oscuro : celeste de botones y detalles
     --acento : celeste claro de resaltes sobre fondos oscuros
     --negro : letras del pie de pagina
     --verde / --verde-fondo : verde del monto "Neto a recibir" en la calculadora
   Las secciones del archivo siguen el mismo orden que index.html.
   ========================================================================== */
:root{--celeste-claro:#cfe9f9;--negro:#0b1117;--verde:#0a7a3d;--verde-fondo:#e8f7ee;--azul-oscuro:#0b3b60;--azul-medio:#0e5a91;--celeste:#0b72b5;--celeste-oscuro:#085a91;--acento:#8fd3f7;--bg:#f3f8fc;--ink:#14243a;--mut:#5a6a7e;--line:#dfe6ee;--white:#fff}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:110px}
body{font-family:Inter,system-ui,sans-serif;color:var(--ink);background:var(--white);line-height:1.65;font-size:16px}
h1,h2,h3,h4,.logo{font-family:Manrope,sans-serif}
a{color:inherit;text-decoration:none}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
svg{display:block}
/* top bar + header */
.top{background:#0a639c;color:#e3f2fc;font-size:.8rem}
.top .wrap{display:flex;justify-content:space-between;align-items:center;height:38px;gap:16px}
.top a{color:#fff;font-weight:500}
.top .l{display:flex;gap:22px;align-items:center}
.top svg{width:14px;height:14px;display:inline-block;vertical-align:-2px;margin-right:6px;stroke:var(--acento);fill:none;stroke-width:2}
header{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:72px;gap:20px}
.logo{display:flex;align-items:center;gap:12px;color:var(--azul-oscuro);font-weight:800;font-size:1.2rem;line-height:1.1;letter-spacing:-.01em}
.logo small{display:block;font-family:Inter;font-size:.62rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--celeste);margin-top:3px}
nav ul{display:flex;gap:30px;list-style:none;font-weight:500;font-size:.92rem;color:var(--ink)}
nav a{position:relative;padding:6px 0}
nav a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--celeste);transition:.25s}
nav a:hover::after{width:100%}
.btn{display:inline-flex;align-items:center;gap:8px;padding:13px 26px;border-radius:6px;font-weight:600;font-size:.94rem;border:1.5px solid transparent;cursor:pointer;font-family:inherit;transition:.2s;background:var(--celeste);color:#fff}
.btn:hover{background:var(--celeste-oscuro)}
.btn.sm{padding:10px 20px;font-size:.86rem}
.btn.line{background:transparent;border-color:#ffffff55;color:#fff}.btn.line:hover{background:#ffffff14}
.btn.navy{background:var(--celeste)}.btn.navy:hover{background:var(--celeste-oscuro)}
.menu{display:none;border:1px solid var(--line);background:#fff;border-radius:6px;padding:6px 12px;font-size:1.2rem;cursor:pointer}
/* hero */
.hero{background:linear-gradient(110deg,var(--azul-medio) 0%,#1269a8 45%,#4db4ea 100%);color:#fff;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(#ffffff08 1px,transparent 1px),linear-gradient(90deg,#ffffff08 1px,transparent 1px);background-size:56px 56px;-webkit-mask:linear-gradient(90deg,transparent,#000 70%);mask:linear-gradient(90deg,transparent,#000 70%)}
.hero .wrap{position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center;padding-top:84px;padding-bottom:96px}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#fff}
.eyebrow::before{content:"";width:34px;height:2px;background:var(--acento)}
.hero h1{font-size:clamp(2.2rem,4.6vw,3.5rem);line-height:1.1;font-weight:800;letter-spacing:-.02em;margin:18px 0 20px}
.hero p{font-size:1.1rem;color:#f0f8fd;max-width:540px;margin-bottom:32px}
.hero .btns{display:flex;gap:12px;flex-wrap:wrap}
.trust{display:flex;gap:26px;margin-top:38px;flex-wrap:wrap;font-size:.85rem;color:#e8f3fb}
.trust span{display:flex;gap:8px;align-items:center}
.trust svg{width:18px;height:18px;stroke:var(--acento);fill:none;stroke-width:2}
.dash{background:#fff;color:var(--ink);border-radius:14px;padding:26px;box-shadow:0 30px 70px #00000055}
.dash .h{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.dash .h b{font-family:Manrope;font-size:1rem}.dash .h span{font-size:.72rem;color:var(--mut);background:var(--bg);padding:3px 10px;border-radius:20px}
.kp{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:18px}
.kp div{background:var(--bg);border-radius:10px;padding:12px 14px}
.kp small{display:block;color:var(--mut);font-size:.72rem}.kp b{font-family:Manrope;font-size:1.15rem;color:var(--azul-oscuro)}
.kp .up{color:var(--celeste);font-size:.72rem;font-weight:600}
.dash svg{width:100%;height:auto}
.dash .ft{display:flex;gap:8px;align-items:center;font-size:.72rem;color:var(--mut);margin-top:12px}
.dash .ft i{width:8px;height:8px;border-radius:50%;background:var(--celeste)}
/* stats */
.stats{border-bottom:1px solid var(--line);background:#fff}
.stats .wrap{display:grid;grid-template-columns:repeat(4,1fr)}
.stat{padding:28px 20px;border-right:1px solid var(--line);display:flex;gap:14px;align-items:center}
.stat:last-child{border:0}
.stat svg{flex:none;width:34px;height:34px;stroke:var(--celeste);fill:none;stroke-width:1.5}
.stat b{display:block;font-family:Manrope;color:var(--azul-oscuro);font-size:.98rem}.stat span{font-size:.82rem;color:var(--mut)}
section{padding:88px 0}
.alt{background:var(--bg)}
.head{max-width:680px;margin-bottom:46px}
.head.c{margin-left:auto;margin-right:auto;text-align:center}
.kick{font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--celeste);display:block;margin-bottom:10px}
h2.t{font-size:clamp(1.7rem,3.2vw,2.4rem);line-height:1.18;color:var(--azul-oscuro);font-weight:800;letter-spacing:-.015em}
.lead{color:var(--mut);margin-top:12px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:32px 30px;transition:.25s;position:relative}
.card::after{content:"";position:absolute;left:0;top:0;width:100%;height:3px;background:var(--celeste);transform:scaleX(0);transform-origin:left;transition:.3s;border-radius:12px 12px 0 0}
.card:hover{box-shadow:0 18px 40px #0b3b601a;transform:translateY(-4px)}
.card:hover::after{transform:scaleX(1)}
.ic{width:52px;height:52px;border-radius:10px;background:#e3f2fc;display:grid;place-items:center;margin-bottom:20px}
.ic svg{width:26px;height:26px;stroke:var(--celeste);fill:none;stroke-width:1.7}
.card h3{font-size:1.1rem;color:var(--azul-oscuro);margin-bottom:8px}
.card p{font-size:.93rem;color:var(--mut)}
.more{display:flex;justify-content:center;margin-top:36px}
/* process */
.proc{display:grid;grid-template-columns:repeat(3,1fr);gap:0;position:relative}
.proc .s{padding:0 30px 0 0;position:relative}
.proc .n{width:52px;height:52px;border-radius:50%;background:var(--celeste);color:#fff;font-family:Manrope;font-weight:800;display:grid;place-items:center;margin-bottom:18px;position:relative;z-index:1;border:4px solid var(--bg)}
.proc .s::before{content:"";position:absolute;top:26px;left:52px;right:0;height:2px;background:var(--line)}
.proc .s:last-child::before{display:none}
.proc h3{color:var(--azul-oscuro);margin-bottom:6px;font-size:1.08rem}.proc p{color:var(--mut);font-size:.93rem}
/* about */
.about{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:center}
.panel{background:linear-gradient(150deg,var(--azul-medio),#1269a8);border-radius:14px;padding:48px 40px;color:#fff;position:relative;overflow:hidden}
.panel::after{content:"";position:absolute;right:-60px;bottom:-60px;width:240px;height:240px;border-radius:50%;border:40px solid #ffffff0a}
.seal{width:104px;height:104px;border:2px solid var(--acento);border-radius:50%;display:grid;place-items:center;margin-bottom:24px;position:relative}
.seal::before{content:"";position:absolute;inset:6px;border:1px solid #8fd3f777;border-radius:50%}
.seal b{font-family:Manrope;font-size:1.7rem;color:var(--acento);letter-spacing:.04em}
.panel h3{font-size:1.4rem;margin-bottom:10px}
.panel p{color:#f0f8fd;font-size:.95rem}
.vals{margin-top:26px;display:grid;grid-template-columns:1fr 1fr;gap:14px 20px;font-size:.88rem;position:relative;z-index:1}
.vals div{display:flex;gap:8px;align-items:center;color:#fff}
.vals svg{width:16px;height:16px;stroke:var(--acento);fill:none;stroke-width:2.4;flex:none}
.list{list-style:none;display:grid;gap:16px;margin:26px 0 32px}
.list li{display:flex;gap:14px}
.list svg{flex:none;width:22px;height:22px;stroke:var(--celeste);fill:none;stroke-width:2.2;margin-top:3px}
.list b{display:block;color:var(--azul-oscuro);font-family:Manrope;font-size:.98rem}
.list span{color:var(--mut);font-size:.9rem}
/* calc */
.cbox{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start}
form,.res{background:#fff;border:1px solid var(--line);border-radius:12px;padding:32px;box-shadow:0 10px 30px #0b3b600d}
label{display:block;font-size:.84rem;font-weight:600;margin:16px 0 6px;color:var(--azul-oscuro)}
form>label:first-child{margin-top:0}
input,select,textarea{width:100%;padding:12px 14px;border:1px solid #cfd8e3;border-radius:6px;font:inherit;background:#fff;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--celeste);box-shadow:0 0 0 3px #0f7cc026}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.chk{display:flex!important;gap:10px;align-items:center;font-weight:500!important;margin-top:18px}
.chk input{width:auto}
.hidden{display:none}
form .btn{margin-top:24px;width:100%;justify-content:center}
.res h3{color:var(--azul-oscuro);font-size:1.15rem;margin-bottom:14px;padding-bottom:12px;border-bottom:2px solid var(--azul-oscuro)}
.res table{width:100%;border-collapse:collapse;font-size:.92rem}
.res td{padding:10px 0;border-bottom:1px solid var(--line)}
.res td:last-child{text-align:right;font-weight:600;font-variant-numeric:tabular-nums}
.res tr.sub td{color:var(--mut);font-weight:500;font-size:.85rem}
.res tr.tot td{border:0;background:var(--verde-fondo);color:var(--azul-oscuro);font-family:Manrope;font-size:1.15rem;padding:16px 16px}
.res tr.tot td:last-child{color:var(--verde)}
.empty{color:var(--mut);font-size:.94rem}
.note{font-size:.78rem;color:var(--mut);margin-top:16px;line-height:1.5}
.err{color:#b3261e;font-size:.85rem;margin-top:10px}
/* faq */
.faq{max-width:820px;margin:0 auto;display:grid;gap:12px}
details{background:#fff;border:1px solid var(--line);border-radius:10px;padding:0 24px}
summary{cursor:pointer;list-style:none;font-family:Manrope;font-weight:700;color:var(--azul-oscuro);padding:20px 0;display:flex;justify-content:space-between;gap:16px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--celeste);font-size:1.4rem;line-height:1}
details[open] summary::after{content:"−"}
details p{color:var(--mut);padding-bottom:20px;font-size:.94rem}
/* contact */
.contact{background:linear-gradient(110deg,var(--azul-medio) 0%,#1269a8 45%,#4db4ea 100%);color:#fff}
.contact h2.t{color:#fff}.contact .lead{color:#f0f8fd}
.cgrid{display:grid;grid-template-columns:1fr 1.1fr;gap:56px;align-items:start}
.crow{display:flex;gap:16px;margin-top:26px;align-items:center}
.crow .i{flex:none;width:48px;height:48px;border-radius:10px;background:#ffffff12;display:grid;place-items:center}
.crow svg{width:22px;height:22px;stroke:var(--acento);fill:none;stroke-width:1.8}
.crow small{display:block;color:#e8f3fb;font-size:.78rem}
.crow a,.crow b{color:#fff;font-weight:600}
.contact form{color:var(--ink)}
footer{background:var(--azul-medio);color:#d3e9f8;font-size:.86rem}
footer .wrap{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;padding-top:56px;padding-bottom:40px}
footer h4{color:#fff;margin-bottom:14px;font-size:.9rem}
footer ul{list-style:none;display:grid;gap:9px}
footer a:hover{color:var(--celeste-oscuro)}
footer .logo{color:#fff}
.copy{border-top:1px solid #ffffff14;text-align:center;padding:18px;font-size:.78rem}
.fab{position:fixed;right:20px;bottom:20px;width:58px;height:58px;border-radius:50%;background:#25d366;display:grid;place-items:center;box-shadow:0 8px 22px #0004;z-index:60;transition:.2s}
.fab:hover{transform:scale(1.07)}
.fab svg{width:30px;height:30px;fill:#fff}
@media(max-width:960px){
 .top .l span.hide{display:none}
 nav{position:absolute;top:72px;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);display:none;padding:16px 24px}
 nav.open{display:block}nav ul{flex-direction:column;gap:14px}
 .menu{display:block}.nav>.btn{display:none}
 .hero .wrap,.about,.cbox,.cgrid,footer .wrap{grid-template-columns:1fr}
 .hero .wrap{padding-top:56px;padding-bottom:64px}
 .grid3,.proc{grid-template-columns:1fr}
 .proc .s{padding:0 0 28px}.proc .s::before{display:none}
 .stats .wrap{grid-template-columns:1fr 1fr}.stat{border-bottom:1px solid var(--line)}
}
@media(max-width:520px){.top .r{display:none}.stats .wrap{grid-template-columns:1fr}.vals{grid-template-columns:1fr}}

/* ---- Utilidades (reemplazan estilos escritos dentro del HTML) ---- */
.dash .ft i.d2{background:var(--azul-oscuro)}
.dash .ft i.d3{background:var(--acento)}
.kick-gold{color:#fff}
.foot-about{margin-top:14px;max-width:320px}
.note a{color:var(--celeste);font-weight:600}
.wrap.e404{grid-template-columns:1fr;text-align:center;padding-top:120px;padding-bottom:120px;display:block}
.e404-p{margin:0 auto 28px}

/* ---- Selector de fechas (día / mes / año) ---- */
.fechas{margin-top:18px;display:grid;gap:14px}
fieldset.fecha{border:1.5px solid #cfd8e3;border-radius:10px;padding:10px 14px 14px;background:#fff;transition:.2s}
fieldset.fecha.completa{border-color:var(--celeste);background:#eef7fd}
fieldset.fecha legend{font-size:.84rem;font-weight:600;color:var(--azul-oscuro);padding:0 6px}
.fecha .selects{display:grid;grid-template-columns:.8fr 1.5fr 1fr;gap:8px}
.fecha select{padding:11px 8px;cursor:pointer}
.fecha .hoy{margin-top:10px;background:none;border:0;color:var(--celeste);font:inherit;font-size:.84rem;font-weight:600;cursor:pointer;padding:0;text-decoration:underline}
.fecha .hoy:hover{color:var(--celeste-oscuro)}
.periodo{font-size:.86rem;padding:10px 14px;border-radius:8px;background:var(--bg);color:var(--mut)}
.periodo.bien{background:#e3f2fc;color:var(--celeste-oscuro);font-weight:600}
.periodo.mal{background:#fdecea;color:#b3261e;font-weight:600}

/* Boton principal de la portada: blanco para contrastar con el fondo celeste */
.hero .btn:not(.line){background:#fff;color:var(--azul-oscuro)}
.hero .btn:not(.line):hover{background:var(--acento)}

/* Textos sobre fondos celeste */
.crow svg{stroke:#fff}
.contact .crow .i{background:#ffffff26}

/* Mejora de legibilidad (contraste minimo 4.5:1) */
.eyebrow::before{background:var(--acento)}
.seal b{color:#fff}
.top svg{stroke:var(--acento)}

/* En celular el texto ocupa todo el ancho: fondo celeste un poco mas profundo para que se lea bien */
@media(max-width:960px){.hero,.contact{background:linear-gradient(160deg,var(--azul-medio) 0%,#1269a8 100%)}}

/* Pie de pagina: celeste profundo con letras claras; solo el telefono va en verde */
footer,footer a,footer li,footer p,footer .copy{color:#d3e9f8}
footer h4,footer .logo{color:#fff}
footer .logo small{color:#d3e9f8}
footer .copy{border-top:1px solid #ffffff26}
footer [data-tel-text]{color:#86f0ae;font-weight:800}
footer a:hover{color:#fff}

/* Telefono de la barra superior en verde claro (se lee sobre el celeste) */
.top .r a{color:#86f0ae;font-weight:700}

/* Boton "Enviar consulta por WhatsApp" en verde */
#cf .btn{background:var(--verde);color:#fff}
#cf .btn:hover{background:#075f2f}

/* ---- Calculadora de prestamos ---- */
.ayuda{font-size:.82rem;color:var(--mut);background:var(--bg);border-left:3px solid var(--celeste);padding:10px 12px;border-radius:0 8px 8px 0;margin-top:8px;line-height:1.5}
details.extra{margin-top:16px;border:1px solid var(--line);border-radius:10px;padding:0 16px;background:#fff}
details.extra summary{padding:12px 0;font-size:.88rem}
details.extra[open]{padding-bottom:16px}
.res details.extra{margin:16px 0 0}
.amort-wrap{max-height:340px;overflow:auto;border:1px solid var(--line);border-radius:8px}
.amort{width:100%;border-collapse:collapse;font-size:.76rem}
.res .amort th{position:sticky;top:0;background:var(--azul-oscuro);color:#fff;font-family:Manrope,sans-serif;font-weight:700;padding:8px 10px;text-align:right;white-space:nowrap}
.res .amort th:first-child,.res .amort td:first-child{text-align:center}
.res .amort td{padding:6px 10px;text-align:right;font-weight:500;white-space:nowrap;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums}
.res .amort tbody tr:nth-child(even){background:var(--bg)}

/* ---- Instituciones financieras ---- */
.filtros{display:grid;grid-template-columns:1fr 1fr auto;gap:16px;align-items:end;max-width:760px;margin:0 auto 28px}
.filtros label{margin-top:0}
.conteo{font-size:.84rem;color:var(--mut);padding-bottom:12px}
.inst-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.inst{background:#fff;border:1px solid var(--line);border-radius:12px;padding:22px;display:flex;flex-direction:column;gap:12px}
.inst-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.inst h3{font-size:1.05rem;color:var(--azul-oscuro)}
.tipo-tag{font-size:.7rem;color:var(--mut);background:var(--bg);padding:3px 10px;border-radius:20px;white-space:nowrap}
.sis{align-self:flex-start;font-size:.78rem;font-weight:700;padding:5px 12px;border-radius:20px}
.sis.ok{background:#e8f7ee;color:var(--verde)}
.sis.pc{background:#fff4d6;color:#7a5a00}
.inst dl{display:grid;gap:8px;font-size:.85rem}
.inst dl div{display:flex;justify-content:space-between;gap:12px;border-bottom:1px dashed var(--line);padding-bottom:6px}
.inst dt{color:var(--mut)}
.inst dd{font-weight:600;text-align:right}
.inst dd .pc{color:#7a5a00;font-weight:500}
.inst-acc{display:flex;gap:14px;align-items:center;margin-top:auto;flex-wrap:wrap}
.inst-acc .enlace{color:var(--celeste);font-weight:600;font-size:.86rem;text-decoration:underline}
.aviso-inst{max-width:760px;margin:26px auto 0;font-size:.8rem;color:var(--mut);text-align:center}
@media(max-width:960px){.inst-grid{grid-template-columns:1fr}.filtros{grid-template-columns:1fr}.conteo{padding:0}}
.inst-nota{font-size:.78rem;color:var(--mut);background:var(--bg);border-radius:8px;padding:10px 12px;line-height:1.5}