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

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

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--color-fondo);
    color: var(--color-texto);
    font-family: 'DM Sans', system-ui, sans-serif;
    line-height: 1.5;
}

.cabecera-sitio {
    position: relative;
    overflow: hidden;
    color: #fff;
    background: linear-gradient(125deg, var(--color-primario-oscuro), var(--color-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-top: 22px;
    padding-bottom: 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(--color-acento); color: var(--color-primario-oscuro); font-size: 1.35rem; }
.marca strong { display: block; font-family: Montserrat, sans-serif; font-size: 1.16rem; letter-spacing: .2em; line-height: 1.1; }
.marca small { display: block; 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; }
.distintivo i { color: var(--color-acento); }

.presentacion { position: relative; z-index: 1; display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; padding-top: 64px; padding-bottom: 82px; }
.presentacion-texto { max-width: 720px; }
.etiqueta-seccion { display: inline-block; margin-bottom: 17px; color: var(--color-acento); font-size: .75rem; font-weight: 800; letter-spacing: .2em; }
.presentacion h1 { max-width: 680px; margin: 0 0 17px; font-family: Montserrat, sans-serif; font-size: clamp(2rem, 4vw, 3.45rem); font-weight: 800; line-height: 1.08; letter-spacing: -.04em; }
.presentacion p { max-width: 650px; margin: 0; color: #d2e0ed; font-size: 1.08rem; }
.nota-referencial { display: inline-flex; align-items: center; gap: 7px; margin-top: 24px; color: #aec3d7; font-size: .88rem; }
.ruta-calculo { display: flex; align-items: center; gap: 13px; min-width: max-content; padding: 17px 19px; border: 1px solid rgba(255,255,255,.15); border-radius: 16px; background: rgba(2,31,58,.35); backdrop-filter: blur(8px); }
.ruta-calculo span { display: flex; flex-direction: column; align-items: center; gap: 5px; font-size: .72rem; font-weight: 600; }
.ruta-calculo span i { color: var(--color-acento); font-size: 1.25rem; }
.ruta-calculo > i { color: #7695b2; }

.contenido-principal { position: relative; z-index: 2; margin-top: -32px; padding-bottom: 65px; }
.alerta-configuracion { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 22px; padding: 15px 18px; border: 1px solid #f1d587; border-radius: 14px; background: #fffaf0; box-shadow: 0 7px 22px rgba(68,55,13,.05); }
.alerta-configuracion > i { margin-top: 2px; color: #be7d00; }
.alerta-configuracion strong { display: block; color: #6f4b00; font-size: .93rem; }
.alerta-configuracion p { margin: 2px 0 0; color: #86661d; font-size: .86rem; }
.alerta-configuracion.configuracion-aprobada { align-items: center; border-color: #b9dfd5; background: #f1faf7; }
.alerta-configuracion.configuracion-aprobada > i { color: var(--color-exito); }
.alerta-configuracion.configuracion-aprobada strong { color: #075d49; }
.alerta-configuracion.configuracion-aprobada p { color: #397565; }
.selector-periodo { display: flex; min-width: 245px; align-items: center; gap: 10px; margin-left: auto; }
.selector-periodo label { min-width: max-content; color: #397565; font-size: .72rem; font-weight: 700; }
.selector-periodo .form-select { min-height: 36px; border-color: #a9d1c6; background-color: #fff; color: #174f42; font-weight: 600; }

.tarjeta-panel { overflow: hidden; border: 1px solid rgba(211,222,232,.85); border-radius: var(--radio-panel); background: var(--color-superficie); box-shadow: var(--sombra-panel); }
.encabezado-panel { display: flex; align-items: center; gap: 14px; padding: 25px 28px; border-bottom: 1px solid var(--color-borde); }
.numero-paso { display: grid; flex: 0 0 42px; height: 42px; place-items: center; border-radius: 12px; background: var(--color-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; font-weight: 800; }
.encabezado-panel p { margin: 3px 0 0; color: var(--color-texto-suave); font-size: .84rem; }
.tarjeta-formulario form { padding: 26px 28px 30px; }

.bloque-destacado { margin-bottom: 29px; padding: 21px; border: 1px solid #d9e3ed; border-radius: 15px; background: linear-gradient(140deg, #f7fafc, #fff); }
.bloque-destacado .form-label { font-size: .96rem; font-weight: 700; }
.bloque-destacado .input-group-text { border-color: var(--color-primario); background: var(--color-primario); color: #fff; font-weight: 700; }
.bloque-destacado .form-control { border-color: #a9bacb; color: var(--color-primario-oscuro); font-size: 1.35rem; font-weight: 700; }
.form-text { color: var(--color-texto-suave); font-size: .78rem; }
fieldset { margin: 0 0 28px; padding: 0; border: 0; }
fieldset + fieldset { padding-top: 25px; border-top: 1px solid var(--color-borde); }
legend { float: none; width: auto; margin-bottom: 17px; color: var(--color-primario); font-family: Montserrat, sans-serif; font-size: .8rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.form-label { margin-bottom: 7px; font-size: .84rem; font-weight: 600; }
.form-label > span[aria-hidden] { color: var(--color-peligro); }
.form-control, .form-select, .input-group-text { min-height: 45px; border-color: #ced8e2; border-radius: 9px; }
.form-control:focus, .form-select:focus { border-color: var(--color-secundario); box-shadow: 0 0 0 .2rem rgba(8,63,119,.11); }
.input-group > :not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.input-group > :not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.subpanel-isapre { margin: 1px 0 0; padding: 14px 10px 15px; border-radius: 12px; background: #f3f7fa; }
.etiqueta-no-imponible { display: inline-block; margin-left: 4px; padding: 2px 6px; border-radius: 5px; background: #e7f5f1; color: var(--color-exito); font-size: .62rem; font-weight: 700; }
.acciones-formulario { display: flex; gap: 10px; padding-top: 2px; }
.acciones-formulario .btn { min-height: 48px; padding-right: 22px; padding-left: 22px; border-radius: 10px; font-weight: 700; }
.btn-primary { border-color: var(--color-primario); background: var(--color-primario); }
.btn-primary:hover, .btn-primary:focus { border-color: var(--color-primario-oscuro); background: var(--color-primario-oscuro); }
.btn-calcular { flex: 1; }

.resultado-fijo { position: sticky; top: 18px; }
.resultado-encabezado { color: #fff; border-bottom-color: rgba(255,255,255,.12); background: var(--color-primario); }
.resultado-encabezado .numero-paso { background: var(--color-acento); color: var(--color-primario-oscuro); }
.resultado-encabezado p { color: #c3d5e5; }
.resultado-vacio { display: flex; min-height: 430px; flex-direction: column; align-items: center; justify-content: center; padding: 35px; text-align: center; }
.icono-resultado { display: grid; width: 76px; height: 76px; margin-bottom: 20px; place-items: center; border-radius: 50%; background: #edf3f8; color: var(--color-secundario); font-size: 1.75rem; }
.resultado-vacio h3 { font-size: 1rem; font-weight: 700; }
.resultado-vacio p { max-width: 270px; color: var(--color-texto-suave); font-size: .85rem; }
#resultadoDetalle { padding: 21px 25px 25px; }
.grupo-resultado { margin-bottom: 20px; }
.grupo-resultado h3 { margin: 0 0 8px; color: var(--color-secundario); font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.grupo-resultado dl { margin: 0; }
.grupo-resultado dl > div { display: flex; justify-content: space-between; gap: 15px; padding: 6px 0; color: #4e5e70; font-size: .81rem; }
.grupo-resultado dt { font-weight: 500; }
.grupo-resultado dd { margin: 0; color: var(--color-texto); font-weight: 600; }
.grupo-resultado .fila-total { margin-top: 4px; padding-top: 9px; border-top: 1px dashed #cbd6df; color: var(--color-texto); }
.grupo-resultado .fila-total dt, .grupo-resultado .fila-total dd { font-weight: 800; }
.grupo-resultado .fila-haberes { color: var(--color-primario); }
.liquido-destacado { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin: 4px -6px 16px; padding: 18px; border-radius: 13px; background: var(--color-primario); color: #fff; }
.liquido-destacado span { font-size: .8rem; font-weight: 600; }
.liquido-destacado strong { font-family: Montserrat, sans-serif; font-size: 1.45rem; }
.comparacion { padding: 3px 11px 11px; }
.comparacion div { display: flex; justify-content: space-between; padding: 4px 0; color: var(--color-texto-suave); font-size: .76rem; }
.comparacion strong { color: var(--color-texto); }
.costo-empresa { margin-top: 10px; padding: 15px; border: 1px solid #e4d4a8; border-radius: 11px; background: #fffbef; }
.costo-empresa div { display: flex; justify-content: space-between; gap: 10px; color: #60490c; font-size: .78rem; }
.costo-empresa small { display: block; margin-top: 5px; color: #887131; font-size: .65rem; line-height: 1.4; }

.seccion-parametros { margin-top: 28px; overflow: hidden; border: 1px solid var(--color-borde); border-radius: var(--radio-panel); background: #fff; box-shadow: var(--sombra-panel); }
.titulo-parametros { display: flex; align-items: center; gap: 13px; padding: 22px 25px; border-bottom: 1px solid var(--color-borde); }
.titulo-parametros > span { display: grid; width: 39px; height: 39px; place-items: center; border-radius: 10px; background: #eaf1f7; color: var(--color-primario); }
.titulo-parametros h2 { margin: 0; font-size: 1rem; font-weight: 800; }
.titulo-parametros p { margin: 2px 0 0; color: var(--color-texto-suave); font-size: .78rem; }
.grilla-parametros { display: grid; grid-template-columns: repeat(3, 1fr); }
.grilla-parametros > div { min-width: 0; padding: 18px 24px; border-right: 1px solid var(--color-borde); border-bottom: 1px solid var(--color-borde); }
.grilla-parametros > div:nth-child(3n) { border-right: 0; }
.grilla-parametros > div:nth-last-child(-n+3) { border-bottom: 0; }
.grilla-parametros span, .grilla-parametros strong { display: block; }
.grilla-parametros span { margin-bottom: 5px; color: var(--color-texto-suave); font-size: .72rem; }
.grilla-parametros strong { font-size: .88rem; }
.dato-pendiente { color: #a16400 !important; font-size: .75rem !important; font-weight: 700; }
.revision-parametros { display: flex; align-items: flex-start; justify-content: space-between; gap: 30px; padding: 18px 24px; background: #f8fafc; }
.revision-parametros > div { display: flex; flex-direction: column; gap: 2px; color: var(--color-exito); font-size: .77rem; }
.revision-parametros > div span { color: var(--color-texto-suave); font-size: .7rem; }
.revision-parametros details { max-width: 65%; font-size: .76rem; }
.revision-parametros summary { cursor: pointer; color: var(--color-primario); font-weight: 700; text-align: right; }
.revision-parametros ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px 18px; margin: 12px 0 0; padding-left: 18px; }
.revision-parametros a { color: var(--color-secundario); text-decoration: none; }
.revision-parametros a:hover { color: var(--color-primario); text-decoration: underline; }

.bloque-comercial {
    position: relative;
    margin-top: 30px;
    overflow: hidden;
    padding: clamp(34px, 5vw, 58px);
    border-radius: var(--radio-panel);
    background: linear-gradient(145deg, #061f38 0%, var(--color-primario-oscuro) 55%, #0b477b 100%);
    box-shadow: 0 22px 55px rgba(5, 35, 63, .18);
    color: #fff;
}
.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: '';
}
.comercial-presentacion { position: relative; z-index: 1; max-width: 810px; margin: 0 auto; text-align: center; }
.comercial-etiqueta { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 15px; color: var(--color-acento); font-size: .7rem; font-weight: 800; letter-spacing: .17em; }
.comercial-presentacion h2 { margin: 0 0 18px; font-family: Montserrat, sans-serif; font-size: clamp(1.65rem, 3vw, 2.5rem); font-weight: 800; letter-spacing: -.035em; }
.comercial-presentacion p { margin: 7px auto; color: #c8d8e7; font-size: .96rem; line-height: 1.65; }
.comercial-presentacion strong { color: #fff; }
.flujo-comercial { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 8px; margin: 30px auto 0; color: #dbe7f1; font-size: .7rem; font-weight: 700; }
.flujo-comercial span { padding: 7px 9px; border: 1px solid rgba(255,255,255,.13); border-radius: 7px; background: rgba(255,255,255,.06); }
.flujo-comercial i { color: var(--color-acento); }
.comercial-frase { position: relative; z-index: 1; margin: 28px 0 19px; color: #fff; font-family: Montserrat, sans-serif; font-size: 1rem; font-weight: 700; text-align: center; }
.tarjetas-comerciales { position: relative; z-index: 1; }
.tarjetas-comerciales > div { display: flex; }
.tarjeta-comercial { display: flex; width: 100%; min-height: 390px; flex-direction: column; align-items: flex-start; padding: 29px; border: 1px solid rgba(255,255,255,.15); border-radius: 16px; background: rgba(255,255,255,.96); box-shadow: 0 14px 30px rgba(1,22,41,.18); color: var(--color-texto); }
.tarjeta-actualizacion { background: #f2f7fb; }
.comercial-icono { display: grid; width: 50px; height: 50px; margin-bottom: 20px; place-items: center; border-radius: 13px; background: var(--color-primario); color: #fff; font-size: 1.35rem; }
.tarjeta-actualizacion .comercial-icono { background: var(--color-acento); color: var(--color-primario-oscuro); }
.tipo-producto { margin-bottom: 7px; color: var(--color-secundario); font-size: .62rem; font-weight: 800; letter-spacing: .14em; }
.tarjeta-comercial h3 { margin: 0 0 13px; color: var(--color-primario-oscuro); font-family: Montserrat, sans-serif; font-size: 1.25rem; font-weight: 800; }
.tarjeta-comercial > p { margin: 0 0 17px; color: #59697b; font-size: .85rem; line-height: 1.62; }
.tarjeta-comercial ul { margin: 0 0 24px; padding: 0; list-style: none; color: #425467; font-size: .8rem; }
.tarjeta-comercial li + li { margin-top: 7px; }
.tarjeta-comercial li i { margin-right: 6px; color: var(--color-exito); }
.tarjeta-comercial .opcional-programa { margin-bottom: 24px; padding: 10px 12px; border-left: 3px solid var(--color-acento); border-radius: 0 7px 7px 0; background: var(--color-acento-suave); color: #6b510f; font-size: .77rem; font-weight: 700; }
.btn-comercial { display: inline-flex; min-height: 46px; align-items: center; justify-content: center; gap: 9px; width: 100%; margin-top: auto; padding: 11px 15px; border: 2px solid var(--color-primario); border-radius: 9px; font-size: .72rem; font-weight: 800; letter-spacing: .035em; text-align: center; text-decoration: none; text-transform: uppercase; transition: transform .18s ease, background-color .18s ease, color .18s ease; }
.btn-comercial:hover { transform: translateY(-2px); }
.btn-comercial-primario { background: var(--color-primario); color: #fff; }
.btn-comercial-primario:hover { border-color: var(--color-primario-oscuro); background: var(--color-primario-oscuro); color: #fff; }
.btn-comercial-secundario { background: transparent; color: var(--color-primario); }
.btn-comercial-secundario:hover { background: var(--color-primario); color: #fff; }

.pie-sitio { padding: 38px 0 23px; background: #071e34; color: #c5d4e1; }
.advertencia-legal { display: flex; align-items: flex-start; gap: 12px; max-width: 950px; }
.advertencia-legal i { color: var(--color-acento); }
.advertencia-legal p { margin: 0; font-size: .76rem; line-height: 1.65; }
.pie-marca { display: flex; justify-content: space-between; margin-top: 29px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.1); color: #839caf; font-size: .7rem; }

@media (max-width: 991.98px) {
    .presentacion { align-items: flex-start; flex-direction: column; padding-top: 48px; padding-bottom: 65px; }
    .ruta-calculo { align-self: flex-start; }
    .resultado-fijo { position: static; }
    .grilla-parametros { grid-template-columns: repeat(2, 1fr); }
    .grilla-parametros > div, .grilla-parametros > div:nth-child(3n) { border-right: 1px solid var(--color-borde); border-bottom: 1px solid var(--color-borde); }
    .grilla-parametros > div:nth-child(2n) { border-right: 0; }
    .grilla-parametros > div:nth-last-child(-n+2) { border-bottom: 0; }
    .alerta-configuracion.configuracion-aprobada { align-items: flex-start; flex-wrap: wrap; }
    .selector-periodo { width: 100%; margin-left: 30px; }
    .flujo-comercial { flex-wrap: wrap; }
}

@media (max-width: 575.98px) {
    .barra-marca { padding-right: 15px; padding-left: 15px; }
    .marca strong { font-size: .96rem; }
    .marca small { font-size: .48rem; }
    .marca-simbolo { width: 40px; height: 40px; }
    .distintivo { display: none; }
    .presentacion { padding: 39px 16px 58px; }
    .presentacion h1 { font-size: 2rem; }
    .presentacion p { font-size: .96rem; }
    .ruta-calculo { width: 100%; justify-content: space-around; }
    .contenido-principal { padding-right: 12px; padding-left: 12px; }
    .alerta-configuracion { padding: 13px; }
    .selector-periodo { min-width: 0; align-items: stretch; flex-direction: column; margin-left: 0; }
    .encabezado-panel, .tarjeta-formulario form { padding-right: 19px; padding-left: 19px; }
    .bloque-destacado { padding: 16px; }
    .acciones-formulario { flex-direction: column; }
    .acciones-formulario .btn { width: 100%; }
    .grilla-parametros { grid-template-columns: 1fr; }
    .grilla-parametros > div, .grilla-parametros > div:nth-child(2n), .grilla-parametros > div:nth-child(3n), .grilla-parametros > div:nth-last-child(-n+2) { border-right: 0; border-bottom: 1px solid var(--color-borde); }
    .grilla-parametros > div:last-child { border-bottom: 0; }
    .revision-parametros { flex-direction: column; gap: 12px; }
    .revision-parametros details { max-width: 100%; }
    .revision-parametros summary { text-align: left; }
    .revision-parametros ul { grid-template-columns: 1fr; }
    .bloque-comercial { padding: 33px 18px 20px; }
    .flujo-comercial { align-items: stretch; flex-direction: column; text-align: center; }
    .flujo-comercial > i { transform: rotate(90deg); }
    .comercial-frase { margin-top: 25px; font-size: .9rem; }
    .tarjeta-comercial { min-height: 0; padding: 24px 21px; }
    .btn-comercial { margin-top: 5px; }
    .pie-marca { align-items: flex-start; flex-direction: column; gap: 6px; }
}

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