*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 16px; color-scheme: light; }
body.diseno-c {
margin: 0; font-family: var(--font-text); font-size: 16px; line-height: 1.5;
background: var(--bg); color: var(--ink); -webkit-font-smoothing: antialiased; overflow-x: clip;
overflow-wrap: break-word;
}
:where(.diseno-c) :where(h1, h2, h3, p, ul, ol) { margin: 0; }
:where(.diseno-c) :where(a) { color: inherit; text-decoration: none; }
:where(.diseno-c) :where(button, input, select) { font: inherit; color: inherit; }
:where(.diseno-c) :where(b, strong) { font-weight: 700; }
.diseno-c :focus-visible { outline: 3px solid var(--violet); outline-offset: 3px; }
.panel :focus-visible { outline-color: var(--ink); }
.sec, .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad-x); }
.h2d { font-family: var(--font-display); font-weight: 700; font-size: clamp(26px, 2.5vw, 36px); line-height: 1.1; letter-spacing: -0.035em; }
.solo-lectores { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: 0; translate: 0 -120%; left: 16px; z-index: 99; padding: 12px 18px; border-radius: var(--r-pill); background: var(--ink); color: #fff !important; font-weight: 700; }
.skip-link:focus { translate: 0 16px; }
.btn {
display: inline-flex; align-items: center; justify-content: center; min-height: var(--h-control); padding: 6px 30px;
border-radius: var(--r-pill); font-weight: 700; font-size: 17px; text-align: center;
}
.btn-violet { background: var(--violet); color: #fff !important; }
.btn-borde { border: 2px solid var(--ink); }
.btn-tinta { background: var(--ink); color: #fff !important; align-self: flex-start; margin-top: 10px; }
.c-nav-in {
position: relative; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad-x);
min-height: var(--h-nav); display: flex; flex-wrap: wrap; align-items: center; gap: 8px 36px;
}
.c-brand { display: flex; align-items: center; gap: 12px; margin-right: auto; min-width: 0; font-family: var(--font-display); font-weight: 700; font-size: 17px; line-height: 1.15; letter-spacing: -0.02em; overflow-wrap: break-word; }
.c-brand svg { flex: none; }
.c-brand span { min-width: 0; }
.c-menu { display: flex; align-items: center; gap: 36px; font-size: 16px; font-weight: 600; white-space: nowrap; }
.c-nav-cta { display: inline-flex; align-items: center; min-height: 46px; padding: 4px 24px; border-radius: var(--r-pill); background: var(--ink); color: #fff !important; font-size: 16px; font-weight: 600; }
.c-menu-movil { display: none; }
.c-menu-movil summary {
list-style: none; cursor: pointer; display: inline-flex; align-items: center; min-height: 46px; padding: 4px 20px;
border: 2px solid var(--ink); border-radius: var(--r-pill); font-weight: 600;
}
.c-menu-movil summary::-webkit-details-marker { display: none; }
.c-menu-movil-lista {
position: absolute; right: var(--pad-x); top: calc(100% - 5px); z-index: 20; min-width: 240px; max-width: calc(100% - 2 * var(--pad-x));
display: flex; flex-direction: column; padding: 8px; border-radius: var(--r-xs);
background: #fff; border: 2px solid var(--line);
}
.c-menu-movil-lista a { padding: 12px 14px; border-radius: 10px; font-weight: 600; }
.c-menu-movil-lista a:hover { background: var(--tint); }
@media (max-width: 919px) {
.c-menu { display: none; }
.c-menu-movil { display: block; }
.c-nav-in { gap: 8px 10px; min-height: 72px; }
}
@media (max-width: 479px) {
.c-brand { gap: 8px; font-size: 15px; }
.c-nav-cta, .c-menu-movil summary { min-height: 42px; padding-inline: 14px; font-size: 15px; }
.c-brand svg { width: 30px; height: 30px; }
}
@media (max-width: 639px) {
.c-nav-cta { display: none; }
}
@media (max-width: 389px) {
.c-brand span { width: min-content; }
}
.c-hero {
min-height: 640px; padding-top: 40px; padding-bottom: 64px;
display: grid; grid-template-columns: minmax(0, 1fr) 480px; gap: 72px; align-items: center;
}
.c-hero-copy { display: flex; flex-direction: column; gap: 28px; }
.c-hero h1 { font-family: var(--font-display); font-weight: 700; font-size: clamp(32px, 3.75vw, 54px); line-height: 1.08; letter-spacing: -0.04em; }
.c-hero-sub { font-size: clamp(18px, 1.46vw, 21px); line-height: 1.5; color: var(--ink-2); max-width: 600px; }
.c-hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; }
.c-hero-trust { font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.c-hero-trust a:hover, .c-hero-trust a:focus-visible { text-decoration: underline; }
.c-hero-card {
height: 440px; border-radius: var(--r-xl); background: var(--violet); color: #fff; padding: 36px;
display: flex; flex-direction: column; justify-content: space-between;
}
.c-hero-card-top { display: flex; flex-direction: column; gap: 12px; }
.c-hero-card-label { font-size: 16px; color: var(--on-violet); }
.c-hero-card-total { font-family: var(--font-display); font-weight: 700; font-size: min(50px, 9.4vw); overflow-wrap: anywhere; letter-spacing: -0.045em; line-height: 1; color: var(--orange-on-violet); font-variant-numeric: tabular-nums; }
.c-hero-card-mid { display: flex; flex-direction: column; gap: 14px; }
.c-hero-card .c-fila { font-size: 17px; }
.c-hero-card .c-fila span { color: var(--on-violet); }
.c-hero-card-nota { font-size: 14px; line-height: 1.5; color: var(--on-violet); }
.c-fila { display: flex; justify-content: space-between; gap: 16px; }
.c-fila, .fila, .breakdown-item, .res-bloque-cab { flex-wrap: wrap; }
:is(.c-fila, .fila, .breakdown-item) > :first-child { flex: 1 1 0; min-width: min(100%, 6em); }
:is(.c-fila, .fila, .breakdown-item, .res-bloque-cab) > :last-child { flex: none; max-width: 100%; }
.res-bloque-cab > * { min-width: 0; }
.barra { display: flex; height: 12px; border-radius: 6px; overflow: hidden; background: rgba(255, 255, 255, .18); }
.barra-hero { height: 14px; border-radius: 7px; background: rgba(255, 255, 255, .2); }
.barra-indem { background: var(--mint); }
.barra-finiq { background: var(--orange); }
@media (max-width: 1279px) {
.c-hero { grid-template-columns: minmax(0, 1fr) 400px; gap: 48px; }
.c-hero-card { padding: 32px; }
}
@media (max-width: 959px) {
.c-hero { grid-template-columns: minmax(0, 1fr); gap: 40px; min-height: 0; padding-top: 24px; padding-bottom: 48px; }
.c-hero-card { height: auto; min-height: 320px; gap: 28px; max-width: 640px; }
}
@media (max-width: 599px) {
.c-hero-copy { gap: 22px; }
.c-hero-card { padding: 28px; border-radius: var(--r-lg); min-height: 0; }
.c-hero-ctas .btn { flex: 1 1 auto; padding: 0 22px; }
}
.c-caso { min-height: 640px; padding-top: 16px; padding-bottom: 60px; display: flex; flex-direction: column; }
.paneles { display: flex; gap: 16px; height: 460px; margin-top: 36px; }
.panel {
position: relative; flex: 1 1 0; border-radius: var(--r-panel); overflow: hidden; padding: 40px;
transition: flex-grow var(--t-panel) var(--ease-panel); cursor: pointer;
}
.panel-naranja { background: var(--orange); }
.panel-menta { background: var(--mint); }
.panel-titulo { font-family: var(--font-display); font-weight: 700; font-size: clamp(24px, 2.22vw, 32px); line-height: 1.12; letter-spacing: -0.03em; max-width: 320px; }
.panel-detalle {
position: absolute; left: 40px; bottom: 40px; width: 540px; max-width: calc(100% - 80px);
display: flex; flex-direction: column; gap: 12px;
opacity: 0; pointer-events: none; transition: opacity var(--t-detail);
}
.panel-detalle p { font-size: 19px; line-height: 1.5; }
.panel.is-exp { flex-grow: 2.2; }
.panel.is-exp .panel-detalle { opacity: 1; pointer-events: auto; }
@media (hover: hover) {
.paneles:hover .panel { flex-grow: .7; }
.paneles:hover .panel .panel-detalle { opacity: 0; pointer-events: none; }
.paneles .panel:hover { flex-grow: 2.2; }
.paneles .panel:hover .panel-detalle { opacity: 1; pointer-events: auto; }
}
.paneles:focus-within .panel { flex-grow: .7; }
.paneles:focus-within .panel .panel-detalle { opacity: 0; }
.paneles .panel:focus-within { flex-grow: 2.2; }
.paneles .panel:focus-within .panel-detalle { opacity: 1; pointer-events: auto; }
@media (min-width: 900px) {
@supports (container-type: inline-size) and selector(:has(a)) {
.paneles { display: block; position: relative; container-type: inline-size; --u: calc(100cqw - 176px); }
.panel {
position: absolute; top: 0; bottom: 0; left: 0; width: calc(80px + var(--u) * .7586); --v: .3125; --rec: calc(var(--u) * (.7586 - var(--v)));
clip-path: inset(0 var(--rec) 0 0 round var(--r-panel)); transition: clip-path var(--t-panel) var(--ease-panel);
}
.panel + .panel { left: auto; right: 0; clip-path: inset(0 0 0 var(--rec) round var(--r-panel)); }
.panel + .panel > * { transform: translateX(var(--rec)); transition: transform var(--t-panel) var(--ease-panel), opacity var(--t-detail); }
.panel-titulo { max-width: min(320px, calc(var(--u) * var(--v))); }
.panel-detalle { max-width: calc(var(--u) * .6875); }
.panel.is-exp { --v: .6875; }
.paneles:hover .panel, .paneles:focus-within .panel { flex-grow: 0; }
@media (hover: hover) {
.paneles:has(.panel:hover) .panel { --v: .2414; }
.paneles .panel.panel:hover { --v: .7586; }
.paneles:hover:not(:has(.panel:hover)) .panel.is-exp .panel-detalle { opacity: 1; pointer-events: auto; }
}
.paneles:focus-within .panel { --v: .2414; }
.paneles .panel.panel:focus-within { --v: .7586; }
.paneles:focus-within .panel:not(:focus-within) .panel-detalle { pointer-events: none; }
}
}
@media (max-width: 899px) {
.c-caso { min-height: 0; padding-bottom: 48px; }
.paneles { flex-direction: column; height: auto; margin-top: 24px; }
.panel, .paneles:hover .panel, .paneles:focus-within .panel, .panel.is-exp { flex: none; cursor: auto; padding: 28px; border-radius: var(--r-lg); }
.panel .panel-detalle, .paneles:hover .panel .panel-detalle, .paneles:focus-within .panel .panel-detalle {
position: static; width: auto; max-width: none; opacity: 1; pointer-events: auto; margin-top: 20px;
}
.panel-detalle p { font-size: 17px; }
}
.c-calc { padding-top: 60px; padding-bottom: 60px; display: flex; flex-direction: column; gap: 24px; }
.c-calc-card {
background: #fff; border-radius: var(--r-xl); padding: 40px;
display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: 48px; align-items: start;
}
.c-form { display: flex; flex-direction: column; gap: 20px; }
.fila3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.fila2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.campo { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.lbl { font-size: 14px; font-weight: 700; }
.fld {
width: 100%; height: var(--h-control); padding: 0 16px; border-radius: var(--r-input);
border: 2px solid var(--field-border); background: #fff; font-size: 17px; color: var(--ink);
}
.fld:hover { border-color: var(--field-border-hover); }
.fld:focus, .fld:focus-visible { border-color: var(--violet); outline: none; box-shadow: 0 0 0 1px var(--violet); }
.fld[aria-invalid="true"] { border-color: var(--ink); }
.fld::placeholder { color: var(--ink-3); opacity: .85; }
.ayuda { font-size: 14px; line-height: 1.5; color: var(--ink-3); }
.aviso { font-size: 14px; line-height: 1.45; color: var(--ink); background: var(--peach); border-radius: 10px; padding: 8px 12px; }
.aviso[hidden] { display: none; }
.chip-antiguedad {
min-height: 52px; padding: 13px 18px; border-radius: var(--r-input); background: var(--mint);
display: flex; align-items: center; font-size: 16px; font-weight: 700; line-height: 1.4;
}
.chip-antiguedad[hidden] { display: none; }
.filete { border: 0; height: 1px; background: var(--line); margin: 6px 0; }
.subd { font-family: var(--font-display); font-size: 16px; font-weight: 600; letter-spacing: -0.02em; }
@media (max-width: 1199px) {
.c-calc-card { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}
@media (max-width: 767px) {
.c-calc { padding-top: 40px; padding-bottom: 40px; gap: 20px; }
.c-calc-card { padding: 20px; border-radius: var(--r-md); }
.fila3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fila3 .campo:first-child { grid-column: 1 / -1; }
}
@media (max-width: 479px) {
.fila2 { grid-template-columns: minmax(0, 1fr); }
}
.c-res { display: flex; flex-direction: column; gap: 16px; }
.res-total { background: var(--ink); color: #fff; border-radius: var(--r-md); padding: 28px; display: flex; flex-direction: column; gap: 14px; }
.res-total-label { font-size: 15px; font-weight: 400; color: var(--on-ink); }
.res-total-cifra { font-family: var(--font-display); font-weight: 700; font-size: min(40px, 8.6vw); overflow-wrap: anywhere; letter-spacing: -0.045em; line-height: 1; color: var(--orange); font-variant-numeric: tabular-nums; }
.res-vacio { font-size: 15px; color: var(--on-ink); }
.res-total-cifra.cifra-larga, .c-hero-card-total.cifra-larga { font-size: min(34px, 6.2vw); }
.res-total .c-fila { font-size: 15px; }
.res-total .c-fila span { color: var(--on-ink); }
.c-res[data-state="idle"] .res-total-cifra,
.c-res[data-state="idle"] .res-total .barra,
.c-res[data-state="idle"] .res-total .c-fila,
.c-res[data-state="idle"] .res-bloque { display: none; }
.res-bloque { border-radius: var(--r-sm); padding: 22px 24px; display: flex; flex-direction: column; gap: 8px; }
.res-menta { background: var(--mint); }
.res-crema { background: var(--cream); }
.res-bloque-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.res-bloque-cab h3 { font-size: 17px; font-weight: 700; }
.res-bloque-cifra { font-family: var(--font-display); font-weight: 700; font-size: 18px; letter-spacing: -0.03em; }
.filas { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.fila { display: flex; justify-content: space-between; gap: 16px; font-size: 15px; line-height: 1.4; }
.res-nota { font-size: 13px; line-height: 1.45; color: var(--note-on-mint); }
.res-crema .res-nota { color: var(--ink-2); }
.res-nota:empty { display: none; }
.res-tope { background: var(--tint); padding: 20px 24px; gap: 10px; }
.res-tope-titulo { font-size: 14px; font-weight: 700; }
.barra-tope { height: 10px; border-radius: 5px; background: var(--lilac); }
.barra-tope i { display: block; height: 10px; background: var(--violet); }
.res-tope-texto { font-size: 14px; color: var(--ink-2); }
@media (max-width: 479px) {
.res-total { padding: 24px 22px; }
.res-bloque, .res-tope { padding: 18px; }
.res-bloque-cab { flex-wrap: wrap; row-gap: 2px; }
.fila { font-size: 14px; }
}
.c-irpf { background: var(--peach); border-radius: var(--r-md); padding: 24px 30px; display: flex; flex-direction: column; gap: 6px; }
.c-irpf h3 { font-family: var(--font-display); font-weight: 700; font-size: 18px; letter-spacing: -0.03em; line-height: 1.25; }
.c-irpf p { font-size: 16px; line-height: 1.5; }
.c-orientativo { font-size: 15px; line-height: 1.5; color: var(--ink-2); }
@media (max-width: 599px) { .c-irpf { padding: 22px; } }
.diseno-c .ad-slot {
display: flex; align-items: center; justify-content: center; margin: 30px auto;
border: 2px dashed var(--ad-border); border-radius: var(--r-xs);
}
.diseno-c .ad-slot:not(:has(ins)) { display: none; }
.diseno-c .ad-slot:has(ins[data-ad-status="unfilled"]) { display: none; }
.diseno-c .ad-slot > .adsbygoogle { display: block; width: 100%; }
.diseno-c .ad-label { font-size: 15px; color: var(--ink-3); }
.diseno-c .ad-leaderboard { width: 100%; max-width: 970px; min-height: 306px; }
.diseno-c .ad-incontent { width: 100%; max-width: 336px; min-height: 310px; }
.h2d-grande { font-size: clamp(28px, 2.78vw, 40px); letter-spacing: -0.04em; max-width: 900px; }
.c-entradilla { margin-top: 16px !important; font-size: clamp(17px, 1.32vw, 19px); line-height: 1.5; color: var(--ink-2); max-width: 760px; }
.c-white { background: #fff; } .c-orange { background: var(--orange); } .c-mint { background: var(--mint); }
.c-violet { background: var(--violet); color: #fff; } .c-lilac { background: var(--lilac); } .c-cream { background: var(--cream); }
.c-como { padding-top: 60px; padding-bottom: 60px; }
.c-como .h2d { max-width: 800px; }
.pasos { list-style: none; padding: 0; margin: 40px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-cards); }
.paso { min-height: 280px; border-radius: var(--r-lg); padding: 32px; display: flex; flex-direction: column; gap: 14px; }
.paso-num { width: 44px; height: 44px; border-radius: 22px; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; color: var(--ink); }
.paso-num-naranja { background: var(--orange); } .paso-num-menta { background: var(--mint); } .paso-num-blanco { background: #fff; }
.paso h3 { font-family: var(--font-display); font-weight: 600; font-size: 21px; line-height: 1.2; letter-spacing: -0.03em; }
.paso p { font-size: 17px; line-height: 1.5; color: var(--ink-2); }
.paso.c-violet p { color: var(--on-violet); }
.paso.c-orange p { color: var(--ink); }
.csa { padding-block: 60px; overflow-wrap: anywhere; }
.csa-g { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-cards); margin-top: 36px; }
.csa-c { border-radius: var(--r-lg); padding: 32px; background: #fff; }
.csa-con { background: var(--ink); color: #fff; }
.csa-c h3 { font-family: var(--font-display); font-weight: 600; font-size: 21px; line-height: 1.2; letter-spacing: -.03em; }
.csa-c ul { list-style: none; padding: 0; margin-top: 18px; display: grid; gap: 14px; }
.csa-c li { font-size: 17px; line-height: 1.5; color: var(--ink-2); padding-left: 30px; position: relative; }
.csa-c li::before { content: "?"; content: "?" / ""; position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border-radius: 50%; background: var(--lilac); color: var(--ink); font-size: 13px; font-weight: 700; line-height: 20px; text-align: center; }
.csa-con li { color: var(--on-ink); }
.csa-con li::before { content: "✓"; content: "✓" / ""; background: var(--mint); }
.csa-con b { color: #fff; }
.csa-pie { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.csa-pie span { font-size: 15px; color: var(--ink-2); max-width: 520px; }
@media (max-width: 767px) { .csa-g { grid-template-columns: minmax(0, 1fr); } .csa-c { padding: 24px; } }
.tiles { list-style: none; padding: 0; margin: 44px 0 0; display: grid; gap: var(--gap-cards); }
.tiles-tipos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tile { position: relative; display: grid; min-height: 300px; border-radius: var(--r-md); transition: transform var(--t-tile); }
.tile .ta, .tile .tb { grid-area: 1 / 1; min-width: 0; display: flex; flex-direction: column; padding: 28px; overflow-wrap: anywhere; transition: opacity var(--t-tile), transform var(--t-tile), visibility var(--t-tile); }
.tile .ta { justify-content: space-between; gap: 16px; }
.tile .tb { justify-content: flex-start; gap: 12px; opacity: 0; transform: translateY(10px); visibility: hidden; }
.tile-icono { width: 56px; height: 56px; border-radius: 16px; background: rgba(255, 255, 255, .55); display: flex; align-items: center; justify-content: center; }
.tile.c-white .tile-icono { background: var(--lilac); }
.tile-pie { display: flex; flex-direction: column; gap: 8px; }
.tile-titulo { font-family: var(--font-display); font-size: 20px; font-weight: 600; line-height: 1.2; letter-spacing: -0.03em; text-align: left; }
.tile-sel { position: absolute; inset: 0; z-index: 1; padding: 0; background: none; border: 0; border-radius: inherit; cursor: pointer; color: inherit; }
.tile-regla { font-size: 16px; font-weight: 600; }
.tile .tb h3, .tile .tb .tile-titulo { font-family: var(--font-display); font-size: 18px; font-weight: 600; line-height: 1.2; letter-spacing: -0.03em; }
.tile .tb p { font-size: 16px; line-height: 1.5; }
.badge { display: inline-flex; align-self: flex-start; padding: 8px 14px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .7); color: var(--ink); font-size: 14px; font-weight: 700; }
.c-white .badge { background: var(--tint); }
.tile-guia { position: relative; z-index: 2; align-self: flex-start; font-weight: 700; font-size: 16px; text-decoration: underline !important; text-underline-offset: .2em; }
.tile:focus-within .ta, .tile.is-open .ta { opacity: 0; transform: translateY(-10px); visibility: hidden; }
.tile:focus-within .tb, .tile.is-open .tb { opacity: 1; transform: none; visibility: visible; }
.tile:focus-within, .tile.is-open { transform: scale(1.015); }
@media (hover: hover) {
.tile:hover { transform: scale(1.015); }
.tile:hover .ta { opacity: 0; transform: translateY(-10px); visibility: hidden; }
.tile:hover .tb { opacity: 1; transform: none; visibility: visible; }
}
.tile-sel:focus-visible { outline: none; }
.tile:has(.tile-sel:focus-visible) { outline: 3px solid var(--violet); outline-offset: 3px; }
.tile-herr:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.tile-guia:focus-visible { outline-color: var(--ink); }
.tile.c-violet .tile-guia:focus-visible { outline-color: #fff; }
html:not(.js) .tile-tipo .ta, html:not(.js) .tile-tipo .tb { grid-area: auto; opacity: 1; transform: none; visibility: visible; }
html:not(.js) .tile-tipo .ta { padding-bottom: 0; }
html:not(.js) .tile-tipo button.tile-sel { display: none; }
.c-tipos { padding-top: 100px; padding-bottom: 100px; }
.c-plazos { padding-top: 60px; padding-bottom: 60px; display: flex; flex-direction: column; gap: 20px; }
.plazos-fila { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--gap-cards); min-height: 280px; }
.plazo-principal { background: var(--peach); border-radius: var(--r-lg); padding: 36px; display: flex; flex-direction: column; gap: 14px; }
.plazo-principal h3 { font-family: var(--font-display); font-weight: 700; font-size: 20px; line-height: 1.25; letter-spacing: -0.03em; }
.plazo-principal p { font-size: 18px; line-height: 1.55; }
.plazo-cifra { background: var(--mint); border-radius: var(--r-lg); padding: 36px; display: flex; flex-direction: column; justify-content: space-between; gap: 20px; }
.plazo-20 { font-family: var(--font-display); font-weight: 700; font-size: 96px; letter-spacing: -0.06em; line-height: 1; }
.plazo-20-texto { font-size: 20px; font-weight: 700; }
.plazos-enlaces { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-cards); min-height: 200px; }
.tarjeta-enlace-c { background: #fff; border-radius: var(--r-md); padding: 28px 32px; display: flex; flex-direction: column; gap: 10px; }
.tarjeta-enlace-c h3 { font-family: var(--font-display); font-weight: 600; font-size: 19px; line-height: 1.25; letter-spacing: -0.03em; }
.tarjeta-enlace-c p { font-size: 16px; line-height: 1.5; color: var(--ink-2); }
.tarjeta-enlace-c a { margin-top: auto; font-weight: 700; font-size: 16px; color: var(--violet); }
.tarjeta-enlace-c a:hover { text-decoration: underline; }
.c-herr { background: var(--ink); color: #fff; }
.c-herr > .sec { padding-top: 100px; padding-bottom: 100px; }
.c-herr .c-entradilla { color: var(--on-ink); max-width: 700px; }
.tiles-herr { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tile-herr { min-height: 200px; color: var(--ink); cursor: default; }
.tile-herr.c-violet { color: #fff; }
.tile-herr .tile-icono { color: var(--ink); }
.tile-herr .tile-titulo { max-width: 320px; }
.tile-herr .tb p:not(.tile-titulo) { font-size: 17px; max-width: 460px; }
.ancho2 { grid-column: span 2; }
.et-proximamente { display: inline-flex; align-self: flex-start; padding: 5px 12px; border-radius: var(--r-pill); background: var(--ink); color: #fff; font-size: 13px; font-weight: 700; }
.tile-herr.c-violet .et-proximamente { background: #fff; color: var(--ink); }
.c-faq { padding-top: 80px; padding-bottom: 80px; display: grid; grid-template-columns: 400px minmax(0, 1fr); gap: 80px; }
.c-faq-cab .c-entradilla { font-size: 18px; }
.c-faq-lista { display: flex; flex-direction: column; gap: 12px; }
.faq-item { background: #fff; border-radius: var(--r-faq); transition: background .2s; }
.faq-item summary {
list-style: none; cursor: pointer; padding: 22px 26px; display: flex; justify-content: space-between; align-items: center; gap: 16px; overflow-wrap: anywhere;
font-family: var(--font-display); font-weight: 600; font-size: 17px; line-height: 1.3; letter-spacing: -0.02em; border-radius: var(--r-faq);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-size: 24px; line-height: 1; flex: none; }
.faq-item[open] summary::after { content: "−"; }
.faq-item:hover { background: var(--tint); }
.faq-item[open] { background: var(--orange); }
.faq-answer { padding: 0 26px 22px; margin-top: -8px; }
.faq-answer p { font-size: 17px; line-height: 1.55; }
.faq-answer a { font-weight: 700; text-decoration: underline; }
.faq-item[open] summary:focus-visible { outline-color: var(--ink); }
@media (max-width: 1099px) {
.tiles-herr { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.c-faq { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}
@media (max-width: 899px) {
.pasos, .tiles-tipos, .plazos-fila, .plazos-enlaces { grid-template-columns: minmax(0, 1fr); }
.paso { min-height: 0; }
.c-tipos, .c-herr > .sec { padding-top: 60px; padding-bottom: 60px; }
.c-faq { padding-top: 60px; padding-bottom: 60px; }
.plazo-20 { font-size: 72px; }
}
@media (max-width: 599px) {
.tiles-herr { grid-template-columns: minmax(0, 1fr); }
.ancho2 { grid-column: auto; }
.tile-tipo { min-height: 320px; }
.paso, .plazo-principal, .plazo-cifra, .tarjeta-enlace-c { padding: 24px; }
.faq-item summary { padding: 18px 20px; }
.faq-answer { padding: 0 20px 18px; }
}
.diseno-c .site-footer { background: var(--ink); color: #fff; }
.diseno-c .footer-inner { min-height: 340px; padding-top: 64px; padding-bottom: 64px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 40px 80px; }
.diseno-c .footer-col { display: flex; flex-direction: column; gap: 18px; justify-content: space-between; }
.diseno-c .footer-col:last-child { justify-content: flex-start; }
.diseno-c .footer-brand { font-family: var(--font-display); font-weight: 700; font-size: 24px; line-height: 1.2; letter-spacing: -0.035em; max-width: 380px; }
.diseno-c .footer-legal { font-size: 15px; line-height: 1.6; color: var(--on-ink); max-width: 420px; }
.diseno-c .footer-guides-title { font-size: 17px; font-weight: 700; }
.diseno-c .footer-guides { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.footer-col, .footer-guides li { min-width: 0; }
.diseno-c .footer-guides a { display: inline-block; padding: 12px 18px; border-radius: var(--r-pill); color: var(--ink); font-size: 16px; font-weight: 600; }
.diseno-c .footer-guides a:hover { text-decoration: underline; }
.pastilla-mint { background: var(--mint); } .pastilla-orange { background: var(--orange); } .pastilla-lilac { background: var(--lilac); }
.diseno-c .footer-nav { display: flex; flex-wrap: wrap; gap: 12px 28px; font-size: 15px; margin-top: auto; padding-top: 12px; }
.diseno-c .footer-nav a { color: var(--on-ink); }
.diseno-c .footer-nav a:hover, .diseno-c .footer-nav a[aria-current="page"] { color: #fff; text-decoration: underline; }
.diseno-c .site-footer :focus-visible { outline-color: #fff; }
@media (max-width: 899px) {
.diseno-c .footer-inner { grid-template-columns: minmax(0, 1fr); min-height: 0; padding-top: 48px; padding-bottom: 48px; }
}
.ejemplo-barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.ejemplo-barra[hidden] { display: none; }
.pastilla-ejemplo { display: inline-flex; align-items: center; padding: 6px 14px; border-radius: var(--r-pill); background: var(--lilac); font-size: 14px; font-weight: 700; }
.btn-ejemplo { min-height: 40px; padding: 2px 18px; border-radius: var(--r-pill); border: 2px solid var(--ink); background: #fff; font-size: 15px; font-weight: 700; cursor: pointer; }
html:not(.js) .btn-ejemplo { visibility: hidden; }
.manual summary { cursor: pointer; font-size: 15px; font-weight: 700; color: var(--violet); width: fit-content; }
.manual summary:hover { text-decoration: underline; }
.manual[open] summary { margin-bottom: 14px; }
.manual .ayuda { margin-top: 10px; }
.res-fuentes { font-size: 13px; line-height: 1.5; color: var(--ink-2); margin-top: -6px; padding-inline: 4px; }
.res-fuentes a { color: var(--violet); font-weight: 700; text-decoration: underline; text-underline-offset: .15em; }
.res-legal { font-size: 13px; line-height: 1.45; color: var(--ink-2); padding-inline: 4px; }
@media (max-width: 767px) {
.portada-arriba { display: flex; flex-direction: column; }
.portada-arriba > .c-hero, .c-hero-copy, .c-hero-ctas { display: contents; }
.c-hero h1, .c-hero-sub, .c-hero-trust, .c-hero-ctas .btn, .c-hero-card { margin-inline: var(--pad-x); }
.c-hero h1 { order: 1; padding-top: 16px; font-size: 30px; }
.c-hero-ctas .btn-violet { order: 2; margin-top: 16px; }
.portada-arriba > #calculadora { order: 3; padding-top: 28px; }
.portada-arriba > .wrap { order: 4; }
.portada-arriba > #caso { order: 5; padding-top: 40px; }
.c-hero-sub { order: 6; }
.c-hero-trust { order: 7; margin-top: 16px; }
.c-hero-ctas .btn-borde { order: 8; margin-top: 20px; }
.c-hero-card { order: 9; margin-top: 28px; margin-bottom: 20px; }
.c-calc .h2d { font-size: 24px; }
.c-calc-card { padding: 18px 16px; }
.pastilla-ejemplo { padding: 5px 10px; font-size: 13px; }
.btn-ejemplo { min-height: 36px; padding: 2px 14px; font-size: 14px; }
.c-form { gap: 16px; }
}
.c-pagina { width: 100%; max-width: var(--maxw); margin-inline: auto; padding: 24px var(--pad-x) 72px; }
.c-pagina > * { max-width: 820px; }
.c-pagina > .table-wrap, .c-pagina .prose > .table-wrap, .c-pagina > .relacionadas, .c-pagina > .guide-cards { max-width: 1000px; }
.breadcrumb ol { list-style: none; padding: 0; margin: 0 0 20px; display: flex; flex-wrap: wrap; gap: 6px; font-size: 14px; color: var(--ink-2); }
.breadcrumb li + li::before { content: "/"; margin-right: 6px; color: var(--ink-3); }
.breadcrumb a { color: var(--violet); font-weight: 600; }
.breadcrumb a:hover { text-decoration: underline; }
.guide-header { display: flex; flex-direction: column; gap: 18px; padding-bottom: 36px; margin-bottom: 36px; border-bottom: 1px solid var(--line); }
.c-pagina h1 { font-family: var(--font-display); font-weight: 700; font-size: clamp(30px, 3.3vw, 48px); line-height: 1.1; letter-spacing: -0.04em; }
.guide-lead { font-size: clamp(18px, 1.4vw, 21px); line-height: 1.5; color: var(--ink-2); }
.guide-meta { font-size: 14px; color: var(--ink-3); }
.guide-jump a, .cta-btn, .cta-btn-outline, .cite-badge, .chip-antiguedad, .footer-guides a { overflow-wrap: anywhere; }
.guide-jump a { display: inline-flex; align-items: center; min-height: 52px; padding: 12px 26px; border-radius: var(--r-pill); background: var(--violet); color: #fff; font-weight: 700; font-size: 16px; }
.guide-jump a:hover { background: var(--violet-text); }
.prose, .c-pagina.legal { font-size: 17px; line-height: 1.65; }
.prose > * + *, .c-pagina.legal > * + * { margin-top: 16px; }
.prose h2, .c-pagina.legal h2 { margin-top: 48px; font-family: var(--font-display); font-weight: 700; font-size: clamp(23px, 2vw, 30px); line-height: 1.15; letter-spacing: -0.035em; }
.prose h3, .c-pagina.legal h3 { margin-top: 32px; font-family: var(--font-display); font-weight: 600; font-size: 19px; line-height: 1.25; letter-spacing: -0.03em; }
.prose ul, .prose ol, .c-pagina.legal ul, .c-pagina.legal ol { padding-left: 1.3em; }
.prose li + li, .c-pagina.legal li + li { margin-top: 8px; }
.prose a, .c-pagina.legal a, .faq-answer a { color: var(--violet); font-weight: 600; text-decoration: underline; text-underline-offset: .18em; }
.prose a:hover, .c-pagina.legal a:hover { color: var(--violet-text); }
.c-pagina.legal > h1 { margin-bottom: 8px; }
.tipo-rule { background: var(--mint); border-radius: var(--r-xs); padding: 16px 20px; }
.tipo-base { display: block; margin-top: 4px; font-size: 14px; color: var(--note-on-mint); }
p.tipo-base { background: none; padding: 0; color: var(--ink-2); }
.example { background: #fff; border-radius: var(--r-md); padding: 28px; }
.example > * + * { margin-top: 12px; }
.example-title { font-family: var(--font-display); font-weight: 600; font-size: 18px; letter-spacing: -0.03em; }
.example-case { font-size: 16px; color: var(--ink-2); }
.breakdown { list-style: none; padding: 0 !important; }
.breakdown-item { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 16px; margin: 0 !important; }
.bd-value { font-weight: 700; text-align: right; }
.breakdown-item.is-total { border-top: 2px solid var(--ink); font-weight: 700; }
.breakdown-item.is-cap { background: var(--tint); margin-inline: -12px !important; padding-inline: 12px; border-radius: 10px; }
.result-note { font-size: 15px; color: var(--ink-2); }
.result-source { font-size: 14px; }
.cite-badge { display: inline-flex; align-items: center; gap: 6px; margin: 4px 6px 0 0; padding: 6px 12px; border-radius: var(--r-pill); background: var(--tint); color: var(--ink) !important; font-size: 13px; font-weight: 700; text-decoration: none !important; }
.cite-badge:hover { background: var(--lilac); }
.cite-badge-kicker { font-size: 11px; color: var(--violet-text); }
.table-wrap { overflow-x: auto; background: #fff; border-radius: var(--r-sm); }
.compare-table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.45; }
.compare-table th { text-align: left; font-family: var(--font-display); font-weight: 600; font-size: 14px; letter-spacing: -0.02em; background: var(--tint); }
.compare-table th, .compare-table td { padding: 14px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
.compare-table tr:last-child td { border-bottom: 0; }
.notice { background: var(--peach); border-radius: var(--r-md); padding: 28px; }
.notice > * + * { margin-top: 10px; }
.notice h3 { margin-top: 0; font-family: var(--font-display); font-weight: 700; font-size: 19px; letter-spacing: -0.03em; }
.strong-warn { font-weight: 700; }
.plazos-list { padding-left: 1.3em; }
.cta-calc { margin: 48px 0 24px; background: var(--violet); color: #fff; border-radius: var(--r-lg); padding: 32px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; }
.cta-calc p { min-width: 0; max-width: 520px; font-size: 18px; line-height: 1.5; color: var(--on-violet); }
.cta-calc p strong { color: #fff; }
.cta-btn, .cta-btn-outline { display: inline-flex; align-items: center; min-height: 56px; padding: 12px 28px; border-radius: var(--r-pill); font-weight: 700; font-size: 17px; }
.c-pagina a.cta-btn, .c-pagina a.cta-btn-outline { text-decoration: none; font-weight: 700; }
.c-pagina a.cta-btn { background: #fff; color: var(--ink); }
.c-pagina a.cta-btn-outline { border: 2px solid #fff; color: #fff; }
.c-pagina a.cta-btn:hover, .c-pagina a.cta-btn-outline:hover { text-decoration: underline; }
.cta-calc :focus-visible { outline-color: #fff; }
.error-links { display: flex; flex-wrap: wrap; gap: 12px; }
.disclaimer { font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.guide-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-cards); }
.guide-cards .tipo { background: #fff; border-radius: var(--r-md); padding: 24px 28px; }
.guide-cards .tipo > * + * { margin-top: 10px; }
.guide-cards .tipo h3 { margin-top: 0; }
.tipo-cta { color: var(--violet); font-weight: 700; }
.c-pagina .faq-item + .faq-item { margin-top: 12px; }
.c-pagina .faq-item summary { font-size: 17px; }
.relacionadas { margin-top: 56px; }
.relacionadas-titulo { font-family: var(--font-display); font-weight: 700; font-size: clamp(23px, 2vw, 30px); letter-spacing: -0.035em; }
.relacionadas-lista { list-style: none; padding: 0; margin-top: 20px !important; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-cards); }
.tarjeta { background: #fff; border-radius: var(--r-md); padding: 24px; display: flex; flex-direction: column; gap: 8px; position: relative; }
.tarjeta-enlace { font-family: var(--font-display); font-weight: 600; font-size: 18px; letter-spacing: -0.03em; color: var(--ink); }
.tarjeta-enlace::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.tarjeta:hover { background: var(--tint); }
.tarjeta-enlace:focus-visible { outline: none; }
.tarjeta:has(.tarjeta-enlace:focus-visible) { outline: 3px solid var(--violet); outline-offset: 3px; }
.tarjeta-texto { font-size: 15px; line-height: 1.5; color: var(--ink-2); }
@media (max-width: 899px) {
.relacionadas-lista, .guide-cards { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 599px) {
.c-pagina { padding-top: 16px; padding-bottom: 48px; }
.example, .notice, .cta-calc { padding: 22px; }
.breakdown-item { flex-direction: column; flex-wrap: nowrap; gap: 2px; }
.breakdown-item > :first-child { flex: none; }
.bd-value { text-align: left; }
.cta-btn, .cta-btn-outline { width: 100%; justify-content: center; }
}
html.revelar-activo [data-reveal]:not(.revelado) { opacity: 0; translate: 0 var(--mov-subida); }
html.revelar-activo [data-reveal].revelando {
transition: opacity var(--mov-lento) var(--curva-suave), translate var(--mov-lento) var(--curva-suave);
}
@media (prefers-reduced-motion: reduce) {
html.revelar-activo [data-reveal] { opacity: 1 !important; translate: none !important; }
}
@media print {
[data-reveal] { opacity: 1 !important; translate: none !important; }
}
.c-cinta{ padding-top:56px }
.cinta{ display:flex; flex-wrap:wrap; gap:12px; list-style:none; margin:0; padding:0 var(--pad-x) }
.cinta li{ display:flex; align-items:center; gap:10px; min-height:52px; padding:8px 22px; border-radius:var(--r-pill); font-weight:600; overflow-wrap:anywhere }
.cinta li:not([class]){ background:#fff }
.cinta svg{ flex:none; width:22px; height:22px }
@media (prefers-reduced-motion:no-preference){
html.js:not(.ahorro) .cinta-pista{ overflow-x:auto; scrollbar-width:none }
html.js:not(.ahorro) .cinta{ flex-wrap:nowrap; white-space:nowrap; padding:0 12px 0 0 }
html.js:not(.ahorro) .cinta-mueve{ display:flex; width:max-content }
.anda{ overflow:hidden!important }
.anda .cinta-mueve{ animation:cinta var(--cinta-t) linear infinite }
.parada .cinta-mueve{ animation-play-state:paused }
}
@keyframes cinta{ to{ transform:translateX(var(--cinta-x)) } }
.cinta-pausa{ display:none; margin:12px var(--pad-x) 0 auto; min-height:44px; padding:4px 18px; border:2px solid var(--ink); border-radius:var(--r-pill); background:none; font-weight:600; cursor:pointer }
.cinta-pausa[aria-pressed=true]{ background:var(--ink); color:#fff }
@media (prefers-reduced-motion:no-preference){
html.js:not(.ahorro) .cinta-pausa{ display:block; visibility:hidden }
.anda ~ .cinta-pausa{ visibility:visible!important }
}
.c-cinta + .c-faq{ padding-top:40px }
.esq, .esq ul, .esq li:not(.eq){ display:flex; flex-direction:column; gap:var(--eg); min-width:0; margin:0; padding:0; list-style:none }
.esq{ --eg:28px; margin-top:44px }
.eq{ position:relative; display:block; min-width:0; padding:22px 24px; border-radius:var(--r-sm); background:var(--lilac); color:var(--ink); font-size:17px; line-height:1.4 }
a.eq{ background:var(--violet); color:#fff }
a.eq:hover b{ text-decoration:underline }
a.eq:focus-visible{ outline-color:#fff }
li.eq{ background:var(--mint) }
li.eq + li.eq{ background:var(--cream) }
.eq b, .eq i{ display:block; margin-bottom:6px }
.eq b{ font-family:var(--font-display); font-weight:600; font-size:18px; line-height:1.2; letter-spacing:-.03em }
.eq i{ font-style:normal; font-weight:700; font-size:14px }
.eq svg{ display:block; width:28px; height:28px; margin-bottom:12px }
.eq:not(p)::before{ content:""; position:absolute; z-index:1; left:32px; top:calc(-14px - var(--eg)); width:12px; height:calc(var(--eg) + 28px); border-radius:6px; background:inherit; opacity:.7; transform-origin:50% 0; transition:transform .2s var(--curva-suave) }
li.eq::before{ transition-delay:.1s }
li.eq + li.eq::before{ transition-delay:.2s }
html.revelar-activo .esq:not(.revelado) .eq::before{ transform:scale(0) }
.esq + .c-entradilla{ margin-top:44px!important }
@media (max-width:959px){
.esq li + li > a.eq::before{ display:none }
}
@media (min-width:960px){
.esq{ --eg:40px }
.esq li:not(.eq), .esq li li > ul{ flex-direction:row }
.esq > li > ul{ flex:1; gap:20px }
.esq li li > ul{ flex:1 }
.esq p.eq{ flex:0 0 calc((100% - 3*var(--eg))/4) }
.esq a.eq{ flex:0 0 calc((100% - 2*var(--eg))/3) }
li.eq{ flex:1 }
.eq:not(p)::before{ left:calc(-14px - var(--eg)); top:calc(50% - 6px); width:calc(var(--eg) + 28px); height:12px; transform-origin:0 50% }
}
@media (prefers-reduced-motion: no-preference) {
html:focus-within { scroll-behavior: smooth; }
}
@media (prefers-reduced-motion: reduce) {
.diseno-c *, .diseno-c *::before, .diseno-c *::after { transition: none !important; animation: none !important; }
}
.paso-ilu{align-self:flex-end;margin-top:-58px}
.plazo-ilu{align-self:flex-end;margin-bottom:-116px}
.ilu-b{display:block;margin-bottom:20px}
.c-nec{padding-block:60px}
.nec{list-style:none;padding:0;margin-top:40px;display:grid;gap:20px;grid-template-columns:repeat(4,minmax(0,1fr))}
.nec ul{list-style:none;padding:0;margin-top:auto}
.nec a{display:block;padding:7px 0}
.nec .tile-icono{background:var(--lilac)}
@media (max-width:1099px){.nec{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:599px){.nec{grid-template-columns:minmax(0,1fr)}}
.tile-ilu{position:absolute;top:24px;right:24px;pointer-events:none}
.tile-tipo .tb h3{padding-right:112px;min-height:104px}
.efectos .gc{filter:grayscale(1);transition:filter .3s}
.efectos :is(.tile,.tarjeta,.tarjeta-enlace-c):is(:hover,:focus-within,.en-color) .gc{filter:none}
@media (min-width:1024px){.paso-ilu{width:160px;height:160px}}
@media (min-width:1200px){.paso-ilu{width:176px;height:176px}.plazo-ilu{width:160px;height:160px}}
@media (min-width:900px) and (max-width:1199px){.plazo-ilu{width:96px;height:96px}}
@media (max-width:899px){.plazo-ilu{margin-bottom:-92px}}