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

:root {
    --primario: #083f77;
    --primario-oscuro: #062d55;
    --secundario: #54769b;
    --acento: #f8ae00;
    --acento-suave: #fff4d6;
    --fondo: #f4f7fa;
    --superficie: #fff;
    --texto: #172536;
    --texto-suave: #637083;
    --borde: #dce4ec;
    --exito: #147a62;
    --peligro: #a83a31;
    --sombra: 0 16px 45px rgba(8, 47, 84, .09);
    --radio: 20px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--fondo); color: var(--texto); font-family: 'DM Sans', system-ui, sans-serif; line-height: 1.5; }
button, input, select { font: inherit; }
button, select { cursor: pointer; }
.contenedor { width: min(1120px, calc(100% - 40px)); margin-inline: auto; }

.cabecera-sitio { position: relative; overflow: hidden; color: #fff; background: linear-gradient(125deg, var(--primario-oscuro), var(--primario) 63%, #12598e); }
.cabecera-sitio::after { position: absolute; right: -90px; bottom: -170px; width: 480px; height: 480px; border: 80px solid rgba(255,255,255,.035); border-radius: 50%; content: ''; }
.barra-marca { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; padding-block: 22px; border-bottom: 1px solid rgba(255,255,255,.13); }
.marca { display: inline-flex; align-items: center; gap: 12px; color: #fff; text-decoration: none; }
.marca-simbolo { display: grid; width: 46px; height: 46px; place-items: center; border-radius: 12px; background: var(--acento); color: var(--primario-oscuro); font-family: Montserrat, sans-serif; font-size: 1.35rem; font-weight: 800; }
.marca strong, .marca small { display: block; }
.marca strong { font-family: Montserrat, sans-serif; font-size: 1.16rem; letter-spacing: .2em; line-height: 1.1; }
.marca small { margin-top: 5px; color: #b9cce0; font-size: .57rem; font-weight: 700; letter-spacing: .18em; }
.distintivo { padding: 8px 13px; border: 1px solid rgba(255,255,255,.22); border-radius: 999px; background: rgba(255,255,255,.08); color: #dce8f4; font-size: .83rem; }
.presentacion { position: relative; z-index: 1; display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; padding-block: 62px 82px; }
.presentacion-texto { max-width: 740px; }
.etiqueta-seccion { display: inline-block; margin-bottom: 17px; color: var(--acento); font-size: .75rem; font-weight: 800; letter-spacing: .2em; }
.presentacion h1 { margin: 0 0 17px; font-family: Montserrat, sans-serif; font-size: clamp(2rem, 4vw, 3.45rem); line-height: 1.08; letter-spacing: -.04em; }
.presentacion p { max-width: 680px; margin: 0; color: #d2e0ed; font-size: 1.08rem; }
.etiqueta-actualizacion { display: inline-flex; margin-top: 24px; padding: 7px 12px; border: 1px solid rgba(248,174,0,.45); border-radius: 999px; background: rgba(248,174,0,.12); color: #ffd675; font-size: .8rem; font-weight: 700; }
.etiqueta-actualizacion.pendiente { border-color: rgba(255,255,255,.28); background: rgba(255,255,255,.08); color: #dce8f4; }
.ruta-calculo { display: flex; min-width: max-content; align-items: center; gap: 12px; padding: 17px 19px; border: 1px solid rgba(255,255,255,.15); border-radius: 16px; background: rgba(2,31,58,.35); }
.ruta-calculo span { font-size: .76rem; font-weight: 700; }
.ruta-calculo b { color: var(--acento); }

.contenido-principal { position: relative; z-index: 2; margin-top: -32px; padding-bottom: 65px; }
.estado-tasa { display: grid; grid-template-columns: 1fr 1fr auto 150px; align-items: center; gap: 18px; min-height: 80px; margin-bottom: 22px; padding: 15px 20px; border: 1px solid #b9dfd5; border-radius: 14px; background: #f1faf7; box-shadow: 0 7px 22px rgba(68,55,13,.05); }
.estado-tasa > div { display: flex; flex-direction: column; }
.estado-tasa span, .estado-tasa label { color: #397565; font-size: .73rem; font-weight: 700; }
.estado-tasa strong { color: #075d49; font-size: 1rem; }
.estado-tasa select { min-height: 42px; padding: 0 35px 0 12px; border: 1px solid #a9d1c6; border-radius: 9px; background: #fff; color: #174f42; font-weight: 700; }
.estado-tasa > p { display: none; grid-column: 1 / -1; margin: -5px 0 0; color: #7b3d00; font-size: .86rem; font-weight: 700; }
.estado-tasa.sin-configuracion { border-color: #f1d587; background: #fffaf0; }
.estado-tasa.sin-configuracion span, .estado-tasa.sin-configuracion label, .estado-tasa.sin-configuracion strong { color: #765400; }
.estado-tasa.sin-configuracion > p { display: block; }

.grilla-calculadora { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr); align-items: start; gap: 25px; }
.tarjeta-panel { overflow: hidden; border: 1px solid rgba(211,222,232,.85); border-radius: var(--radio); background: var(--superficie); box-shadow: var(--sombra); }
.encabezado-panel { display: flex; align-items: center; gap: 14px; padding: 25px 28px; border-bottom: 1px solid var(--borde); }
.numero-paso { display: grid; flex: 0 0 42px; height: 42px; place-items: center; border-radius: 12px; background: var(--acento-suave); color: #956600; font-family: Montserrat, sans-serif; font-size: .78rem; font-weight: 800; }
.encabezado-panel h2 { margin: 0; font-family: Montserrat, sans-serif; font-size: 1.08rem; }
.encabezado-panel p { margin: 3px 0 0; color: var(--texto-suave); font-size: .84rem; }
.cuerpo-formulario { padding: 28px; }
.selector-metodo { display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 28px; padding: 4px; border-radius: 11px; background: #edf2f7; }
.selector-metodo button { min-height: 46px; padding: 9px; border: 0; border-radius: 8px; background: transparent; color: var(--texto-suave); font-size: .76rem; font-weight: 800; text-transform: uppercase; transition: .18s ease; }
.selector-metodo button.activo { background: #fff; color: var(--primario); box-shadow: 0 3px 12px rgba(8,47,84,.1); }
.selector-metodo button:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible { outline: 3px solid rgba(248,174,0,.55); outline-offset: 2px; }
.etiqueta-campo { display: block; margin-bottom: 8px; font-weight: 700; }
.campo-moneda { display: flex; overflow: hidden; border: 1px solid #a9bacb; border-radius: 11px; background: #fff; transition: border-color .18s, box-shadow .18s; }
.campo-moneda:focus-within { border-color: var(--secundario); box-shadow: 0 0 0 .2rem rgba(8,63,119,.11); }
.campo-moneda span { display: grid; min-width: 52px; place-items: center; background: var(--primario); color: #fff; font-size: 1.15rem; font-weight: 700; }
.campo-moneda input { width: 100%; min-width: 0; height: 58px; padding: 0 17px; border: 0; outline: 0; color: var(--primario-oscuro); font-size: 1.4rem; font-weight: 700; }
.campo-moneda input:disabled { background: #edf1f4; cursor: not-allowed; }
.cuerpo-formulario small { color: var(--texto-suave); font-size: .78rem; }
.ejemplos-rapidos { margin-top: 24px; }
.ejemplos-rapidos > span { display: block; margin-bottom: 8px; color: var(--texto-suave); font-size: .75rem; font-weight: 700; text-transform: uppercase; }
.ejemplos-rapidos > div { display: flex; flex-wrap: wrap; gap: 7px; }
.ejemplos-rapidos button { padding: 7px 10px; border: 1px solid #d4dee7; border-radius: 8px; background: #f8fafc; color: var(--primario); font-size: .76rem; font-weight: 700; }
.ejemplos-rapidos button:hover { border-color: var(--primario); background: #edf4fa; }
.ejemplos-rapidos button:disabled { opacity: .5; cursor: not-allowed; }
.mensaje-calculo { min-height: 22px; margin: 16px 0 0; color: var(--peligro); font-size: .83rem; font-weight: 600; }
.acciones-formulario { display: flex; gap: 10px; margin-top: 12px; }
.acciones-formulario button { flex: 1; min-height: 48px; padding: 10px 18px; border-radius: 10px; font-weight: 700; }
.boton-secundario { border: 1px solid #bac7d3; background: #fff; color: var(--primario); }
.boton-primario { border: 1px solid var(--primario); background: var(--primario); color: #fff; }
.boton-primario:hover:not(:disabled) { background: var(--primario-oscuro); }
button:disabled { opacity: .55; cursor: not-allowed; }

.resultado-fijo { position: sticky; top: 18px; }
.resultado-encabezado { border-bottom-color: rgba(255,255,255,.12); background: var(--primario); color: #fff; }
.resultado-encabezado .numero-paso { background: var(--acento); color: var(--primario-oscuro); }
.resultado-encabezado p { color: #c3d5e5; }
.resultado-vacio { display: flex; min-height: 350px; flex-direction: column; align-items: center; justify-content: center; padding: 35px; text-align: center; }
.resultado-vacio > span { display: grid; width: 76px; height: 76px; margin-bottom: 20px; place-items: center; border-radius: 50%; background: #edf3f8; color: var(--secundario); font-size: 1.75rem; font-weight: 700; }
.resultado-vacio h3 { margin: 0 0 6px; font-size: 1rem; }
.resultado-vacio p { max-width: 290px; margin: 0; color: var(--texto-suave); font-size: .85rem; }
.resultado-detalle { min-height: 350px; padding: 27px; }
.resultado-destacado { display: flex; flex-direction: column; margin-bottom: 22px; padding: 20px; border-radius: 14px; background: var(--primario); color: #fff; }
.resultado-destacado span { margin-bottom: 5px; color: #c9daea; font-size: .78rem; font-weight: 600; }
.resultado-destacado strong { font-family: Montserrat, sans-serif; font-size: clamp(1.55rem, 3vw, 2.05rem); }
.resultado-detalle dl { margin: 0; }
.resultado-detalle dl > div { display: flex; justify-content: space-between; gap: 15px; padding: 11px 2px; border-bottom: 1px solid var(--borde); font-size: .88rem; }
.resultado-detalle dt { color: #4e5e70; font-weight: 500; }
.resultado-detalle dd { margin: 0; font-weight: 700; }
.resultado-detalle .fila-liquido { border-bottom: 0; }
.detalle-periodo { margin: 18px 0 0; padding-top: 15px; border-top: 1px dashed #cbd6df; color: var(--texto-suave); font-size: .76rem; text-align: center; }

.bloque-informativo { margin-top: 28px; overflow: hidden; border: 1px solid var(--borde); border-radius: var(--radio); background: #fff; box-shadow: var(--sombra); }
.titulo-bloque { display: flex; align-items: center; gap: 13px; padding: 23px 26px; border-bottom: 1px solid var(--borde); }
.titulo-bloque > span { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 11px; background: #eaf1f7; color: var(--primario); font-family: serif; font-size: 1.2rem; font-weight: 700; }
.titulo-bloque h2 { margin: 0; font-family: Montserrat, sans-serif; font-size: 1rem; }
.titulo-bloque p { margin: 2px 0 0; color: var(--texto-suave); font-size: .8rem; }
.grilla-conceptos { display: grid; grid-template-columns: repeat(3, 1fr); }
.grilla-conceptos article { padding: 25px; border-right: 1px solid var(--borde); }
.grilla-conceptos article:last-child { border-right: 0; }
.grilla-conceptos strong { color: var(--acento); font-size: .73rem; }
.grilla-conceptos h3 { margin: 5px 0 8px; color: var(--primario); font-size: .93rem; }
.grilla-conceptos p { margin: 0; color: var(--texto-suave); font-size: .82rem; }
.tasa-informativa { margin: 0; padding: 15px 25px; background: #eef7f4; color: #17634f; font-size: .84rem; font-weight: 700; text-align: center; }
.advertencia { display: flex; align-items: flex-start; gap: 9px; margin: 0; padding: 15px 25px; background: #fffbef; color: #735a17; font-size: .78rem; }
.advertencia span { display: grid; flex: 0 0 20px; height: 20px; place-items: center; border-radius: 50%; background: var(--acento); color: var(--primario-oscuro); font-weight: 800; }

.bloque-comercial { position: relative; margin-top: 30px; overflow: hidden; padding: clamp(35px, 5vw, 58px); border-radius: var(--radio); background: linear-gradient(145deg, #061f38, var(--primario-oscuro) 55%, #0b477b); box-shadow: 0 22px 55px rgba(5,35,63,.18); color: #fff; text-align: center; }
.bloque-comercial::before { position: absolute; top: -150px; right: -130px; width: 390px; height: 390px; border: 68px solid rgba(255,255,255,.035); border-radius: 50%; content: ''; }
.bloque-comercial > * { position: relative; z-index: 1; }
.comercial-etiqueta { color: var(--acento); font-size: .7rem; font-weight: 800; letter-spacing: .17em; }
.bloque-comercial h2 { max-width: 810px; margin: 14px auto 18px; font-family: Montserrat, sans-serif; font-size: clamp(1.65rem, 3vw, 2.5rem); line-height: 1.18; letter-spacing: -.035em; }
.bloque-comercial p { max-width: 800px; margin: 0 auto 24px; color: #c8d8e7; font-size: .96rem; }
.bloque-comercial hr { max-width: 800px; margin: 34px auto 25px; border: 0; border-top: 1px solid rgba(255,255,255,.13); }
.bloque-comercial .texto-secundario { font-size: .86rem; }
.boton-comercial { display: inline-flex; min-height: 47px; align-items: center; justify-content: center; padding: 11px 20px; border: 2px solid var(--acento); border-radius: 9px; font-size: .75rem; font-weight: 800; letter-spacing: .035em; text-decoration: none; text-transform: uppercase; }
.boton-comercial.principal { background: var(--acento); color: var(--primario-oscuro); }
.boton-comercial.secundario { border-color: rgba(255,255,255,.65); color: #fff; }
.boton-comercial:hover { transform: translateY(-2px); }
.pie-sitio { padding: 30px 0; background: #071e34; color: #c5d4e1; }
.pie-contenido { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.pie-contenido strong, .pie-contenido span { display: block; }
.pie-contenido span { margin-top: 3px; color: #839caf; font-size: .75rem; }
.pie-contenido a { color: #b9cce0; font-size: .8rem; }

@media (max-width: 860px) {
    .presentacion { align-items: flex-start; flex-direction: column; }
    .grilla-calculadora { grid-template-columns: 1fr; }
    .resultado-fijo { position: static; }
    .estado-tasa { grid-template-columns: 1fr 1fr; }
    .estado-tasa label { align-self: end; }
}

@media (max-width: 600px) {
    .contenedor { width: min(100% - 28px, 1120px); }
    .distintivo { display: none; }
    .marca strong { font-size: .98rem; }
    .marca small { font-size: .48rem; }
    .presentacion { padding-block: 42px 62px; }
    .presentacion h1 { font-size: 2rem; }
    .ruta-calculo { width: 100%; justify-content: center; }
    .estado-tasa { grid-template-columns: 1fr; gap: 12px; }
    .estado-tasa label { align-self: auto; margin-bottom: -8px; }
    .estado-tasa > p { grid-column: 1; }
    .encabezado-panel, .cuerpo-formulario { padding-right: 19px; padding-left: 19px; }
    .selector-metodo { grid-template-columns: 1fr; }
    .ejemplos-rapidos > div { display: grid; grid-template-columns: 1fr 1fr; }
    .acciones-formulario { flex-direction: column; }
    .grilla-conceptos { grid-template-columns: 1fr; }
    .grilla-conceptos article { border-right: 0; border-bottom: 1px solid var(--borde); }
    .grilla-conceptos article:last-child { border-bottom: 0; }
    .pie-contenido { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: no-preference) {
    .tarjeta-panel { animation: entrada .45s ease both; }
    @keyframes entrada { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
}