/* Sitio público de Yesid Rengifo (portada y textos legales).
   Estilo editorial-financiero: azul marino profundo, latón como acento,
   marfil para las secciones claras. IBM Plex Serif para titulares, Plex Sans
   para texto y Plex Mono para cifras. Sin cuadrícula: profundidad con la
   fotografía real, degradados radiales suaves y grano fino. Móvil primero.
   Independiente del build de Tailwind. */
:root {
    --navy-950: #061224;
    --navy-900: #08162b;
    --navy: #0b1b33;
    --navy-700: #13294a;
    --navy-600: #1c3a63;
    --oro: #c9a46a;
    --oro-claro: #e2c896;
    --oro-osc: #85652f;
    --marfil: #f7f4ee;
    --marfil-2: #efe9de;
    --tinta: #152238;
    --suave: #4d5a6e;
    --tenue: #6b7689;
    --linea: #e2dbcd;
    --linea-osc: rgba(255, 255, 255, .12);
    --sube: #5fd39a;
    --baja: #ff8f8f;
    --sube-claro: #0f7a47;
    --baja-claro: #b42318;
    --radio: 10px;
    --ancho: 1200px;
    --serif: "IBM Plex Serif", Georgia, "Times New Roman", serif;
    --sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
    --grano: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    --cab-alto: 64px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--cab-alto) + 12px); }
body.sitio {
    margin: 0; background: #fff; color: var(--tinta);
    font-family: var(--sans); font-size: 16px; line-height: 1.65;
    -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
    overflow-x: hidden;
}
h1, h2, h3 { margin: 0; line-height: 1.15; color: var(--navy); }
h1, h2 { font-family: var(--serif); font-weight: 500; letter-spacing: -.012em; }
h3 { font-weight: 600; letter-spacing: -.005em; }
p { margin: 0; }
a { color: var(--navy-600); }
img { max-width: 100%; height: auto; display: block; }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cont { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 16px; position: relative; }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
    outline: 2px solid var(--oro); outline-offset: 3px; border-radius: 3px;
}
.saltar { position: absolute; left: 8px; top: -60px; z-index: 200; padding: 8px 12px; background: #fff; color: var(--navy); border-radius: 6px; }
.saltar:focus { top: 8px; }

/* ── Botones ─────────────────────────────────────────────────── */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 48px; padding: 12px 22px;
    font: 500 15px/1.2 var(--sans); letter-spacing: .01em;
    text-decoration: none; border-radius: 999px; border: 1px solid transparent; cursor: pointer;
    transition: background-color .2s, border-color .2s, color .2s, transform .2s, box-shadow .2s;
    white-space: nowrap;
}
.btn-oro { background: var(--oro); color: var(--navy-900); box-shadow: 0 10px 30px -12px rgba(201, 164, 106, .7); }
.btn-oro:hover { background: var(--oro-claro); transform: translateY(-1px); }
.btn-linea { color: #fff; border-color: rgba(255, 255, 255, .38); background: transparent; }
.btn-linea:hover { border-color: #fff; background: rgba(255, 255, 255, .07); }
.btn-navy { background: var(--navy); color: #fff; }
.btn-navy:hover { background: var(--navy-600); transform: translateY(-1px); }
.btn[disabled] { opacity: .65; cursor: progress; transform: none; }

/* ── Ticker ──────────────────────────────────────────────────── */
.ticker {
    position: relative; z-index: 60;
    display: flex; align-items: stretch;
    background: var(--navy-950); color: #dfe6f1;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    font: 400 12.5px/1 var(--mono); height: 36px; overflow: hidden;
}
.ticker-pista { flex: 1; overflow: hidden; display: flex; mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent); }
.ticker-lista {
    display: flex; flex: none; align-items: center; margin: 0; padding: 0 0 0 8px; list-style: none;
    animation: ticker 48s linear infinite;
}
.ticker-pista:hover .ticker-lista, .ticker-pista:focus .ticker-lista, .ticker-pista:focus-within .ticker-lista { animation-play-state: paused; }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-100%); } }
.ticker-item { display: flex; align-items: center; gap: 8px; padding: 0 22px; white-space: nowrap; border-right: 1px solid rgba(255, 255, 255, .1); cursor: default; }
.ticker-rotulo { color: #9fb0c8; text-transform: uppercase; letter-spacing: .06em; font-size: 11px; }
.ticker-valor { color: #fff; font-weight: 500; }
.ticker-cambio { display: inline-flex; gap: 4px; align-items: center; }
.ticker-cambio.sube { color: var(--sube); }
.ticker-cambio.baja { color: var(--baja); }
.ticker-cambio.igual { color: #b6c2d4; }
.ticker-nota { flex: none; display: none; align-items: center; padding: 0 14px; color: #9fb0c8; font-size: 11px; border-left: 1px solid rgba(255, 255, 255, .1); background: var(--navy-950); }
.ticker-nota a { color: #dfe6f1; }

/* ── Cabecera ────────────────────────────────────────────────── */
.cab { position: sticky; top: 0; z-index: 50; background: rgba(8, 22, 43, .97); border-bottom: 1px solid rgba(255, 255, 255, .08); color: #fff; }
.cab-fila { display: flex; align-items: center; gap: 16px; height: var(--cab-alto); }
.marca { display: flex; flex-direction: column; text-decoration: none; color: #fff; margin-right: auto; line-height: 1.2; }
.marca-nombre { font: 500 1.2rem/1.1 var(--serif); letter-spacing: -.01em; }
.marca-sub { display: none; font-size: .64rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--oro); margin-top: 3px; }
.cab-nav { display: none; }
.btn-ingresar { min-height: 38px; padding: 8px 18px; font-size: 14px; }

/* ── Portada ─────────────────────────────────────────────────── */
.hero {
    position: relative; overflow: hidden; isolation: isolate;
    color: #fff; background: var(--navy-900);
    padding: 0 0 48px;
}
.hero::before { /* profundidad: halos radiales */
    content: ""; position: absolute; inset: 0; z-index: -2;
    background:
        radial-gradient(60% 50% at 18% 30%, rgba(28, 58, 99, .9), transparent 70%),
        radial-gradient(45% 40% at 85% 80%, rgba(201, 164, 106, .16), transparent 70%),
        linear-gradient(180deg, var(--navy) 0%, var(--navy-900) 100%);
}
.hero::after { /* grano fino */
    content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
    background-image: var(--grano); opacity: .06; mix-blend-mode: overlay;
}
.hero-foto { position: relative; height: 380px; overflow: hidden; z-index: -1; }
.hero-foto img { position: absolute; left: 0; top: -8%; width: 100%; height: 116%; object-fit: cover; object-position: 50% 12%; will-change: transform; }
.hero-foto::after { /* velo azul para contraste AA */
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(8, 22, 43, .25) 0%, rgba(8, 22, 43, .35) 55%, var(--navy-900) 100%);
}
.hero-trazo { display: none; position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 16%; z-index: 0; pointer-events: none; opacity: .5; }
.hero-trazo path { fill: none; stroke: var(--oro); stroke-width: 1.2; vector-effect: non-scaling-stroke; stroke-dasharray: 2400; stroke-dashoffset: 2400; animation: trazo 2.6s .4s cubic-bezier(.4, 0, .2, 1) forwards; }
.hero-trazo path.tenue { stroke: rgba(255, 255, 255, .22); animation-delay: .7s; }
@keyframes trazo { to { stroke-dashoffset: 0; } }
.hero-cont { z-index: 3; margin-top: -120px; }
.sobre { font: 500 .74rem/1.3 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--oro-osc); margin-bottom: 14px; display: flex; align-items: center; gap: 12px; }
.sobre::before { content: ""; width: 28px; height: 1px; background: currentColor; flex: none; }
.sobre-claro { color: var(--oro); }
.hero h1 { color: #fff; font-size: clamp(2.3rem, 9vw, 4.6rem); line-height: 1.04; letter-spacing: -.02em; max-width: 13ch; }
.hero h1 em { font-style: italic; color: var(--oro-claro); }
.hero-lead { margin-top: 22px; font-size: 1.05rem; line-height: 1.7; color: rgba(255, 255, 255, .84); max-width: 54ch; }
.hero-acciones { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px; }
.hero-acciones .btn { flex: 1 1 220px; }
.hero-cifras { margin: 40px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--linea-osc); }
.hero-cifras > div { padding: 18px 10px 0 0; display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 4px; }
.hero-cifras > div + div { padding-left: 14px; border-left: 1px solid var(--linea-osc); }
.hero-cifras dt { font-size: .76rem; line-height: 1.35; color: rgba(255, 255, 255, .7); }
.hero-cifras dd { margin: 0; font: 500 clamp(1.7rem, 6vw, 2.6rem)/1 var(--serif); color: #fff; }
.hero-cifras dd .num { font-family: var(--serif); letter-spacing: -.02em; }

/* ── Secciones ───────────────────────────────────────────────── */
.seccion { padding: 72px 0; position: relative; }
.seccion-cab { margin-bottom: 36px; max-width: 680px; }
.seccion-cab h2 { font-size: clamp(1.85rem, 6vw, 2.9rem); }
.seccion-lead { margin-top: 14px; color: var(--suave); font-size: 1.03rem; }

/* Perfil */
.perfil { background: var(--marfil); }
.perfil-grid { display: grid; gap: 40px; }
.perfil-foto { margin: 0; position: relative; max-width: 420px; }
.perfil-foto img { width: 100%; border-radius: var(--radio); box-shadow: 0 30px 60px -30px rgba(11, 27, 51, .55); }
/* En el celular el retrato ya está en la portada: aquí solo el pie. */
.perfil-foto picture { display: none; }
.perfil-foto figcaption { margin-top: 0 !important; padding-left: 14px; border-left: 2px solid var(--oro); }
@media (min-width: 720px) { .perfil-foto picture { display: block; } .perfil-foto figcaption { margin-top: 26px !important; padding-left: 0; border-left: 0; } }
.perfil-foto picture { position: relative; isolation: isolate; }
.perfil-foto picture::before { content: ""; position: absolute; inset: 16px -16px -16px 16px; border: 1px solid var(--oro); border-radius: var(--radio); z-index: -1; }
.perfil-foto figcaption { margin-top: 26px; font-size: .88rem; color: var(--suave); }
.perfil-foto figcaption strong { display: block; color: var(--navy); font: 500 1.08rem/1.3 var(--serif); }
.perfil-cita { margin: 0 0 26px; }
.perfil-cita p { font: italic 500 clamp(1.5rem, 4.6vw, 2.2rem)/1.3 var(--serif); color: var(--navy); }
.perfil-texto p + p { margin-top: 14px; }
.perfil-texto > div p { color: #33405a; }
.etiquetas { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.etiquetas li { font-size: .82rem; padding: 6px 12px; border: 1px solid var(--linea); border-radius: 999px; background: #fff; color: var(--navy); }

/* Servicios */
.servicios { display: grid; gap: 16px; }
.srv {
    position: relative; display: flex; flex-direction: column; gap: 12px;
    background: #fff; border: 1px solid var(--linea); border-radius: var(--radio);
    padding: 26px 22px; transition: transform .3s cubic-bezier(.2, .7, .2, 1), box-shadow .3s, border-color .3s;
}
.srv:hover { transform: translateY(-4px); box-shadow: 0 24px 48px -28px rgba(11, 27, 51, .45); border-color: #d2c7b3; }
.srv h3 { font: 500 1.35rem/1.25 var(--serif); }
.srv p { color: var(--suave); }
.srv-n { font-size: .76rem; color: var(--oro-osc); letter-spacing: .02em; }
.srv-enlace { margin-top: auto; padding-top: 8px; font-weight: 500; color: var(--navy); text-decoration: none; display: inline-flex; gap: 6px; }
.srv-enlace:hover { text-decoration: underline; text-underline-offset: 3px; }
.srv-principal { background: var(--navy); border-color: var(--navy); color: #fff; overflow: hidden; isolation: isolate; }
.srv-principal::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(70% 60% at 100% 0%, rgba(201, 164, 106, .22), transparent 70%); }
.srv-principal h3 { color: #fff; font-size: 1.7rem; }
.srv-principal p { color: rgba(255, 255, 255, .8); }
.srv-principal .srv-n { color: var(--oro); }
.srv-principal .srv-enlace { color: var(--oro-claro); }
.srv-principal:hover { border-color: var(--navy); box-shadow: 0 28px 56px -26px rgba(6, 18, 36, .8); }
.srv-datos { list-style: none; margin: 6px 0 0; padding: 0; display: grid; border-top: 1px solid var(--linea-osc); }
.srv-datos li { display: grid; grid-template-columns: 90px 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--linea-osc); font-size: .94rem; }
.srv-datos span { color: rgba(255, 255, 255, .62); font-size: .82rem; }
.srv-espana { background: var(--marfil); }
.srv-par { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: .95rem; color: var(--navy) !important; }
.srv-par .num { padding: 4px 10px; border: 1px solid var(--linea); border-radius: 6px; background: #fff; }
.srv-flecha { color: var(--oro-osc); }
.srv-tasa { font-size: .82rem; color: var(--suave); }

/* Franja con foto (parallax) */
.franja { position: relative; overflow: hidden; isolation: isolate; color: #fff; padding: 88px 0; background: var(--navy-900); }
.franja-fondo { position: absolute; inset: 0; z-index: -2; }
.franja-fondo img { position: absolute; left: 0; top: -15%; width: 100%; height: 130%; object-fit: cover; object-position: 50% 40%; filter: saturate(.75) blur(1px); will-change: transform; }
.franja::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgba(8, 22, 43, .96) 0%, rgba(8, 22, 43, .88) 55%, rgba(8, 22, 43, .72) 100%); }
.franja::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: var(--grano); opacity: .05; mix-blend-mode: overlay; }
.franja-cita { font: italic 500 clamp(1.45rem, 4.4vw, 2.3rem)/1.3 var(--serif); max-width: 30ch; }
.franja-pasos { list-style: none; margin: 36px 0 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--linea-osc); }
.franja-pasos li { display: flex; gap: 14px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--linea-osc); color: rgba(255, 255, 255, .88); }
.franja-pasos .num { color: var(--oro); font-size: .85rem; }

/* Simulador */
.simulador-sec { background: #fff; }
.sim { display: grid; border: 1px solid var(--linea); border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 30px 70px -40px rgba(11, 27, 51, .45); }
.sim-controles { padding: 26px 22px; display: grid; gap: 26px; }
.sim-fila { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.sim-fila label { font-weight: 500; color: var(--navy); }
.sim-fila output { font-size: 1.15rem; color: var(--navy); font-weight: 500; }
.sim-limites { display: flex; justify-content: space-between; font-size: .76rem; color: var(--tenue); margin-top: 6px; }
.sim input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; background: transparent; cursor: pointer; --p: 50%; }
.sim input[type=range]::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--navy) var(--p), var(--marfil-2) var(--p)); }
.sim input[type=range]::-moz-range-track { height: 4px; border-radius: 4px; background: var(--marfil-2); }
.sim input[type=range]::-moz-range-progress { height: 4px; border-radius: 4px; background: var(--navy); }
.sim input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -9px; border-radius: 50%; background: #fff; border: 2px solid var(--navy); box-shadow: 0 2px 8px rgba(11, 27, 51, .25); }
.sim input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 2px solid var(--navy); }
.sim-tasa { font-size: .88rem; color: var(--suave); padding-top: 14px; border-top: 1px dashed var(--linea); }
.sim-tasa strong { color: var(--navy); font-weight: 500; }
.sim-resultado { background: var(--navy); color: #fff; padding: 26px 22px; position: relative; isolation: isolate; }
.sim-resultado::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(80% 70% at 100% 0%, rgba(201, 164, 106, .2), transparent 70%); }
.sim-etq { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--oro); }
.sim-cuota { font-size: clamp(2.1rem, 8vw, 3rem); font-weight: 500; margin-top: 6px; line-height: 1.1; }
.sim-detalle { margin: 18px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding-top: 16px; border-top: 1px solid var(--linea-osc); }
.sim-detalle dt { font-size: .78rem; color: rgba(255, 255, 255, .68); }
.sim-detalle dd { margin: 2px 0 0; font-size: 1.02rem; }
.sim-grafica { width: 100%; height: 80px; margin-top: 22px; overflow: visible; }
.sim-grafica path { fill: none; stroke: var(--oro); stroke-width: 2; vector-effect: non-scaling-stroke; transition: d .4s; }
.sim-grafica .eje { stroke: rgba(255, 255, 255, .25); stroke-width: 1; vector-effect: non-scaling-stroke; }
.sim-grafica-etq { display: flex; justify-content: space-between; font-size: .74rem; color: rgba(255, 255, 255, .62); margin-top: 6px; }
.sim-aviso { margin-top: 16px; font-size: .84rem; color: var(--suave); max-width: 80ch; }
.sim-aviso strong { color: var(--navy); }

/* Indicadores */
.indicadores-sec { background: var(--marfil); }
.indicadores { display: grid; gap: 14px; }
.ind { background: #fff; border: 1px solid var(--linea); border-radius: var(--radio); padding: 20px; display: flex; flex-direction: column; gap: 6px; }
.ind-nombre { font: 500 .78rem/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--suave); }
.ind-valor { font-size: 1.9rem; font-weight: 500; color: var(--navy); line-height: 1.15; }
.ind-valor small { font-size: .8rem; color: var(--tenue); margin-left: 6px; letter-spacing: 0; }
.ind-cambio { font-size: .84rem; color: var(--suave); }
.ind-cambio.sube { color: var(--sube-claro); }
.ind-cambio.baja { color: var(--baja-claro); }
.ind-ayuda { font-size: .88rem; color: var(--suave); margin-top: 4px; }
.ind-fuente { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--linea); font-size: .76rem; color: var(--tenue); }
.ind-fuente a { color: var(--suave); }

/* Trayectoria */
.tray-grid { display: grid; gap: 8px; }
.linea-tiempo { list-style: none; margin: 0; padding: 0 0 0 22px; border-left: 1px solid var(--linea); display: grid; gap: 34px; }
.linea-tiempo li { position: relative; }
.linea-tiempo li::before { content: ""; position: absolute; left: -28px; top: 6px; width: 11px; height: 11px; border-radius: 50%; background: #fff; border: 2px solid var(--oro); }
.lt-fecha { font-size: .82rem; color: var(--oro-osc); margin-bottom: 4px; }
.linea-tiempo h3 { font: 500 1.25rem/1.3 var(--serif); margin-bottom: 6px; }
.linea-tiempo p:not(.lt-fecha) { color: var(--suave); }

/* Consejos */
.consejos-sec { background: var(--navy-900); color: #fff; overflow: hidden; isolation: isolate; }
.consejos-sec::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(50% 60% at 0% 0%, rgba(28, 58, 99, .8), transparent 70%), radial-gradient(40% 50% at 100% 100%, rgba(201, 164, 106, .12), transparent 70%); }
.consejos-sec h2 { color: #fff; }
.consejos-sec .sobre { color: var(--oro); }
.consejos-sec .seccion-lead { color: rgba(255, 255, 255, .75); }
.consejos { list-style: none; margin: 0; padding: 0; counter-reset: c; display: grid; gap: 0; border-top: 1px solid var(--linea-osc); }
.consejos li { counter-increment: c; display: grid; align-content: start; grid-template-columns: 48px 1fr; gap: 4px 12px; padding: 22px 0; border-bottom: 1px solid var(--linea-osc); }
.consejos li::before { content: counter(c, decimal-leading-zero); grid-row: 1 / span 2; font: 400 .9rem/1.6 var(--mono); color: var(--oro); }
.consejos h3 { color: #fff; font: 500 1.15rem/1.35 var(--serif); }
.consejos p { color: rgba(255, 255, 255, .74); font-size: .96rem; }

/* FAQ */
.faq-grid { display: grid; gap: 8px; }
.faq { border-top: 1px solid var(--linea); }
.faq details { border-bottom: 1px solid var(--linea); }
.faq summary { list-style: none; cursor: pointer; padding: 18px 36px 18px 0; position: relative; font-weight: 500; color: var(--navy); font-size: 1.04rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 10px; height: 10px; border-right: 1.5px solid var(--oro-osc); border-bottom: 1.5px solid var(--oro-osc); transform: translateY(-70%) rotate(45deg); transition: transform .25s; }
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq details p { padding: 0 0 20px; color: var(--suave); max-width: 70ch; }

/* Contacto */
.contacto-sec { background: var(--navy); color: #fff; overflow: hidden; isolation: isolate; }
.contacto-sec::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 50% at 0% 100%, rgba(201, 164, 106, .14), transparent 70%), radial-gradient(50% 60% at 100% 0%, rgba(28, 58, 99, .9), transparent 70%); }
.contacto-sec::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: var(--grano); opacity: .05; mix-blend-mode: overlay; }
.contacto-grid { display: grid; gap: 40px; }
.contacto-intro h2 { color: #fff; font-size: clamp(2rem, 6vw, 3rem); }
.contacto-intro > p { margin-top: 14px; color: rgba(255, 255, 255, .8); max-width: 46ch; }
.canales { list-style: none; margin: 28px 0 0; padding: 0; border-top: 1px solid var(--linea-osc); }
.canales li { display: grid; gap: 2px; padding: 14px 0; border-bottom: 1px solid var(--linea-osc); }
.canal-tipo { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--oro); }
.canal-valor { font-size: 1.12rem; color: #fff; text-decoration: none; word-break: break-word; }
a.canal-valor:hover { text-decoration: underline; text-underline-offset: 3px; }

.formulario { background: #fff; color: var(--tinta); border-radius: 14px; padding: 24px 18px; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .6); }
#form-contacto { display: grid; gap: 16px; }
.campo { display: grid; gap: 6px; min-width: 0; }
.campo label, .campo-grupo legend { font-size: .88rem; font-weight: 500; color: var(--navy); }
abbr[title] { text-decoration: none; color: var(--baja-claro); }
.formulario input[type=text], .formulario input[type=email], .formulario input[type=tel], .formulario select, .formulario textarea {
    width: 100%; min-height: 46px; padding: 10px 12px; font: 400 15px/1.4 var(--sans); color: var(--tinta);
    background: #fff; border: 1px solid #c9cfd9; border-radius: 8px; transition: border-color .15s, box-shadow .15s;
}
.formulario textarea { resize: vertical; min-height: 104px; }
.formulario input:focus, .formulario select:focus, .formulario textarea:focus { outline: none; border-color: var(--navy-600); box-shadow: 0 0 0 3px rgba(28, 58, 99, .18); }
.formulario [aria-invalid=true] { border-color: var(--baja-claro); }
.tel { display: grid; grid-template-columns: 104px 1fr; gap: 8px; }
.campo-grupo { margin: 0; padding: 14px; border: 1px solid var(--linea); border-radius: 10px; display: grid; gap: 12px; background: var(--marfil); }
.campo-grupo[hidden] { display: none; }
.campo-grupo legend { padding: 0 6px; }
.opciones { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.opcion { display: flex; gap: 10px; align-items: flex-start; font-size: .94rem; cursor: pointer; }
.opcion input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--navy); flex: none; }
.sub-etq { font-size: .84rem; color: var(--suave); }
.autoriza { padding: 14px; border-radius: 10px; background: var(--marfil); border: 1px solid var(--linea); font-size: .9rem; }
.autoriza.con-error { border-color: var(--baja-claro); }
.campo-error { font-size: .82rem; color: var(--baja-claro); }
.form-error { padding: 12px 14px; border-radius: 8px; background: #fdf0ef; border: 1px solid #f1c3bf; color: var(--baja-claro); font-size: .9rem; }
.form-pie { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.form-pie p { font-size: .8rem; color: var(--tenue); }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-ok { padding: 10px 4px; display: grid; gap: 12px; justify-items: start; }
.form-ok h3 { font: 500 1.6rem/1.25 var(--serif); }
.form-ok p { color: var(--suave); }

/* ── Pie ─────────────────────────────────────────────────────── */
.pie { background: var(--navy-950); color: rgba(255, 255, 255, .72); padding: 56px 0 0; font-size: .93rem; }
.pie-grid { display: grid; gap: 32px; padding-bottom: 36px; }
.pie-marca { color: #fff; font: 500 1.35rem/1.2 var(--serif); }
.pie-lema { margin-top: 6px; color: var(--oro); font-style: italic; font-family: var(--serif); }
.pie-texto { margin-top: 12px; max-width: 36ch; }
.pie-col { display: flex; flex-direction: column; gap: 9px; align-items: flex-start; }
.pie-titulo { font: 500 .72rem/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .55); margin-bottom: 4px; }
.pie a, .pie-boton { color: rgba(255, 255, 255, .85); text-decoration: none; }
.pie a:hover, .pie-boton:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.pie-boton { font: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
.pie-legal { border-top: 1px solid rgba(255, 255, 255, .08); padding-top: 18px; padding-bottom: 130px; font-size: .8rem; color: rgba(255, 255, 255, .55); display: grid; gap: 4px; }

/* ── Textos legales ──────────────────────────────────────────── */
.legal-cab { position: relative; overflow: hidden; isolation: isolate; background: var(--navy-900); color: #fff; padding: 48px 0 40px; }
.legal-cab::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 80% at 10% 0%, rgba(28, 58, 99, .9), transparent 70%), radial-gradient(40% 60% at 100% 100%, rgba(201, 164, 106, .14), transparent 70%); }
.legal-cab::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: var(--grano); opacity: .05; mix-blend-mode: overlay; }
.legal-cab h1 { color: #fff; font-size: clamp(1.8rem, 6vw, 2.7rem); max-width: 24ch; }
.legal-cab p { margin-top: 12px; color: rgba(255, 255, 255, .72); font-size: .92rem; }
.legal-cuerpo { display: grid; gap: 32px; padding-top: 36px; padding-bottom: 72px; }
.legal-indice { font-size: .9rem; border: 1px solid var(--linea); border-radius: var(--radio); padding: 18px 20px; background: var(--marfil); align-self: start; }
.legal-indice h2 { font: 500 .74rem/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--suave); margin-bottom: 10px; }
.legal-indice ol { margin: 0; padding-left: 20px; display: grid; gap: 5px; }
.legal-indice a { color: var(--tinta); text-decoration: none; }
.legal-indice a:hover { color: var(--navy-600); text-decoration: underline; }
.legal-texto { max-width: 72ch; }
.legal-texto h2 { font-size: 1.45rem; margin: 40px 0 12px; scroll-margin-top: calc(var(--cab-alto) + 16px); }
.legal-texto h2:first-child { margin-top: 0; }
.legal-texto h3 { font-size: 1.04rem; margin: 22px 0 6px; }
.legal-texto p, .legal-texto li { color: #2b374b; }
.legal-texto p + p { margin-top: 12px; }
.legal-texto ul, .legal-texto ol { padding-left: 22px; margin: 10px 0; }
.legal-texto li + li { margin-top: 6px; }
.legal-texto table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: .9rem; display: block; overflow-x: auto; }
.legal-texto th, .legal-texto td { text-align: left; vertical-align: top; padding: 9px 10px; border: 1px solid var(--linea); }
.legal-texto th { background: var(--marfil); font-weight: 600; color: var(--navy); }
.legal-texto code { font-family: var(--mono); font-size: .86em; background: var(--marfil); padding: 1px 5px; border-radius: 3px; }
.legal-texto .btn-pri { background: var(--navy); color: #fff; }
.legal-recuadro { border: 1px solid var(--linea); border-left: 3px solid var(--oro); border-radius: var(--radio); padding: 14px 16px; background: var(--marfil); margin: 14px 0; }
.legal-recuadro dl { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; }
.legal-recuadro dt { color: var(--suave); }
.legal-recuadro dd { margin: 0; font-weight: 500; word-break: break-word; }

/* ── Revelado al hacer scroll (solo con JS y sin movimiento reducido) ── */
html.js .rv { opacity: 0; transform: translateY(18px); transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1); }
html.js .rv.is-in { opacity: 1; transform: none; }

/* ── Tableta ─────────────────────────────────────────────────── */
@media (min-width: 720px) {
    .cont { padding: 0 32px; }
    .marca-sub { display: block; }
    .ticker-nota { display: flex; }
    .hero-foto { height: 460px; }
    .servicios { grid-template-columns: repeat(2, 1fr); }
    .srv-principal { grid-column: 1 / -1; }
    .indicadores { grid-template-columns: repeat(2, 1fr); }
    .sim { grid-template-columns: 1.15fr 1fr; }
    .sim-controles, .sim-resultado { padding: 32px; }
    .franja-pasos { grid-template-columns: repeat(4, 1fr); border-top: 0; gap: 20px; }
    .franja-pasos li { flex-direction: column; gap: 6px; border-bottom: 0; border-top: 1px solid rgba(201, 164, 106, .5); padding-top: 16px; }
    .consejos { grid-template-columns: repeat(2, 1fr); column-gap: 40px; }
    .formulario { padding: 32px; }
    #form-contacto { grid-template-columns: 1fr 1fr; column-gap: 16px; }
    .campo-ancho { grid-column: 1 / -1; }
    #campos-credito { grid-template-columns: 1fr 1fr; }
    #campos-credito legend { grid-column: 1 / -1; }
    .pie-grid { grid-template-columns: 1.5fr 1fr 1fr 1.2fr; }
    .pie-legal { padding-bottom: 28px; display: flex; justify-content: space-between; gap: 24px; }
}

/* ── Escritorio ──────────────────────────────────────────────── */
@media (min-width: 960px) {
    .hero-trazo { display: block; }
    .cab-nav { display: flex; gap: 28px; margin-right: 24px; }
    .cab-nav a { color: rgba(255, 255, 255, .8); text-decoration: none; font-size: .92rem; position: relative; padding: 4px 0; }
    .cab-nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -2px; height: 1px; background: var(--oro); transition: right .25s; }
    .cab-nav a:hover { color: #fff; }
    .cab-nav a:hover::after { right: 0; }

    .hero { padding: 0; min-height: min(820px, calc(100vh - 100px)); display: flex; align-items: center; }
    .hero-foto { position: absolute; top: 0; right: 0; bottom: 0; width: 50%; height: auto; }
    .hero-foto img { object-position: 50% 8%; }
    .hero-foto::after { background:
        linear-gradient(90deg, var(--navy-900) 0%, rgba(8, 22, 43, .55) 30%, rgba(8, 22, 43, .1) 65%, rgba(8, 22, 43, .3) 100%),
        linear-gradient(180deg, transparent 60%, rgba(8, 22, 43, .7) 100%); }
    .hero-cont { margin-top: 0; padding-top: 64px; padding-bottom: 96px; }
    .hero-texto { max-width: 660px; }
    .hero h1 { font-size: clamp(2.8rem, 4.6vw, 4.2rem); max-width: 15ch; }
    .hero-lead { margin-top: 18px; }
    .hero-cifras { margin-top: 44px !important; }
    .hero-acciones .btn { flex: 0 0 auto; }
    .hero-cifras { max-width: 560px; margin-top: 56px; }

    .seccion { padding: 112px 0; }
    .perfil-grid { grid-template-columns: 400px 1fr; gap: 88px; align-items: center; }
    .servicios { grid-template-columns: repeat(6, 1fr); gap: 20px; }
    .srv { grid-column: span 2; padding: 30px 28px; }
    .srv-principal { grid-column: span 4; grid-row: span 1; padding: 40px; }
    .srv-espana { grid-column: span 2; }
    .srv-principal .srv-datos { grid-template-columns: repeat(3, 1fr); gap: 16px; border-top: 0; }
    .srv-principal .srv-datos li { grid-template-columns: 1fr; gap: 2px; border-bottom: 0; border-top: 1px solid var(--linea-osc); }

    .franja { padding: 128px 0; }
    .sim-grid .seccion-cab { max-width: 720px; }
    .indicadores { grid-template-columns: repeat(4, 1fr); }
    .tray-grid, .faq-grid { grid-template-columns: 1fr 1.4fr; gap: 80px; align-items: start; }
    .tray-grid .seccion-cab, .faq-grid .seccion-cab { position: sticky; top: calc(var(--cab-alto) + 32px); }
    .consejos { grid-template-columns: repeat(3, 1fr); column-gap: 48px; }
    .contacto-grid { grid-template-columns: .9fr 1.3fr; gap: 72px; align-items: start; }
    .contacto-intro { position: sticky; top: calc(var(--cab-alto) + 32px); }
    .legal-cuerpo { grid-template-columns: 260px 1fr; gap: 64px; padding-top: 56px; }
    .legal-indice { position: sticky; top: calc(var(--cab-alto) + 16px); }
}

/* ── Movimiento reducido: sin parallax, sin ticker animado, sin revelado ── */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .ticker-lista { animation: none; }
    .ticker-lista[aria-hidden=true] { display: none; }
    .ticker-pista { overflow-x: auto; mask-image: none; }
    .hero-trazo path { animation: none; stroke-dashoffset: 0; }
    html.js .rv { opacity: 1; transform: none; transition: none; }
    .btn, .srv, .cab-nav a::after, .faq summary::after { transition: none; }
    .srv:hover, .btn:hover { transform: none; }
    [data-parallax] { transform: none !important; }
}
@media print {
    .ticker, .cab, .pie, .legal-indice, .cc, .hero-trazo { display: none !important; }
    .legal-cab { background: none; color: #000; }
    .legal-cab h1 { color: #000; }
    html.js .rv { opacity: 1; transform: none; }
}

/* ── Perfil: panel gráfico (reemplaza el segundo retrato) ────────── */
.perfil-arte { margin: 0; max-width: 420px; }
.arte-panel { position: relative; border-radius: var(--radio); overflow: hidden; box-shadow: 0 30px 60px -30px rgba(11, 27, 51, .55); isolation: isolate; }
.arte-panel::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background-image: var(--grano); opacity: .05; mix-blend-mode: overlay; }
.arte-panel::after { content: ""; position: absolute; inset: 14px -16px -16px 14px; border: 1px solid var(--oro); border-radius: var(--radio); z-index: -1; }
.arte-svg { display: block; width: 100%; height: auto; aspect-ratio: 600 / 520; }
/* Foto real de escena financiera (Perfil), con duotono navy para integrarla a la paleta.
   El marco dorado (.arte-panel::after) y el grano (.arte-panel::before) se conservan. */
.arte-foto picture { display: block; position: relative; }
.arte-foto img { display: block; width: 100%; height: 100%; aspect-ratio: 600 / 520; object-fit: cover; }
.arte-foto picture::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(150deg, rgba(11, 27, 51, .46) 0%, rgba(28, 86, 173, .20) 45%, rgba(20, 184, 166, .12) 100%); }
.arte-linea { stroke-dasharray: 1200; stroke-dashoffset: 1200; }
.arte-panel.is-in .arte-linea, html:not(.js) .arte-linea { animation: arte-dibuja 2s .3s cubic-bezier(.4, 0, .2, 1) forwards; }
.arte-punto { opacity: 0; }
.arte-panel.is-in .arte-punto, html:not(.js) .arte-punto { animation: arte-aparece .4s 2.1s forwards; }
@keyframes arte-dibuja { to { stroke-dashoffset: 0; } }
@keyframes arte-aparece { to { opacity: 1; } }
.arte-pie { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 18px 20px; color: #fff; font-size: .86rem; background: linear-gradient(0deg, rgba(6, 18, 36, .92), transparent); }
.arte-pie strong { display: block; font: 500 1.08rem/1.3 var(--serif); }

/* ── Noticias de economía ───────────────────────────────────────── */
.noticias-sec { background: var(--marfil); }
.noticias-grid { display: grid; gap: 28px; }
.noticias-col { display: grid; gap: 12px; align-content: start; }
.noticias-tit { display: flex; align-items: center; gap: 10px; font: 500 .78rem/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--suave); padding-bottom: 10px; border-bottom: 1px solid var(--linea); }
.noticias-punto { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.noticias-punto.colombia { background: var(--oro-osc); }
.noticias-punto.mundo { background: var(--navy-600); }
.noticias-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.noticia-liga {
    display: block; text-decoration: none; background: #fff; border: 1px solid var(--linea);
    border-radius: var(--radio); padding: 16px 18px;
    transition: transform .25s cubic-bezier(.2, .7, .2, 1), box-shadow .25s, border-color .25s;
}
.noticia-liga:hover { transform: translateY(-3px); box-shadow: 0 18px 36px -22px rgba(11, 27, 51, .5); border-color: #d2c7b3; }
.noticia-titulo { font: 500 1.04rem/1.35 var(--serif); color: var(--navy); }
.noticia-liga:hover .noticia-titulo { color: var(--navy-600); }
.noticia-desc { margin-top: 6px; font-size: .9rem; color: var(--suave); }
.noticia-meta { margin-top: 10px; display: flex; align-items: center; gap: 8px; font-size: .78rem; color: var(--tenue); }
.noticia-fuente { font-weight: 600; color: var(--oro-osc); letter-spacing: .02em; }
.noticia-flecha { margin-left: auto; color: var(--tenue); }
.noticias-nota { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .8rem; color: var(--tenue); }
.noticias-act { color: var(--suave); }

/* ── Botón flotante de WhatsApp ─────────────────────────────────── */
.wa-flotante {
    position: fixed; right: 16px; bottom: 16px; z-index: 70;
    display: inline-flex; align-items: center; gap: 0;
    text-decoration: none; color: #fff;
}
.wa-circulo {
    display: grid; place-items: center; flex: none;
    width: 52px; height: 52px; border-radius: 50%;
    background: #25D366; color: #fff;
    box-shadow: 0 8px 22px -6px rgba(5, 38, 20, .55), 0 2px 6px rgba(0, 0, 0, .2);
    transition: transform .2s ease, box-shadow .2s ease;
}
.wa-rotulo {
    max-width: 0; overflow: hidden; white-space: nowrap;
    font: 500 14px/1 var(--sans); color: #0b3b22;
    background: #fff; border-radius: 999px;
    box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .4);
    opacity: 0; transform: translateX(8px);
    transition: max-width .3s ease, opacity .2s ease, transform .3s ease, padding .3s ease;
    padding: 0;
}
.wa-flotante:hover .wa-rotulo, .wa-flotante:focus-visible .wa-rotulo {
    max-width: 160px; opacity: 1; transform: none; padding: 10px 16px; margin-right: 10px;
}
.wa-flotante:hover .wa-circulo, .wa-flotante:focus-visible .wa-circulo { transform: scale(1.06); }
.wa-flotante:focus-visible { outline: none; }
.wa-flotante:focus-visible .wa-circulo { outline: 3px solid var(--oro); outline-offset: 3px; }
/* Pulso tenue en reposo */
.wa-circulo::after {
    content: ""; position: absolute; width: 52px; height: 52px; border-radius: 50%;
    border: 2px solid #25D366; animation: wa-pulso 2.6s ease-out infinite; pointer-events: none;
}
@keyframes wa-pulso { 0% { transform: scale(1); opacity: .6; } 70%, 100% { transform: scale(1.5); opacity: 0; } }
/* Mientras el aviso de cookies está abierto en móvil ocupa todo el borde
   inferior: se oculta el botón para no taparlo. Al elegir, reaparece. */
body:has(#cc-aviso:not([hidden])) .wa-flotante { opacity: 0; visibility: hidden; pointer-events: none; }

@media (min-width: 720px) {
    .noticias-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
    .wa-flotante { right: 24px; bottom: 24px; }
    .wa-circulo { width: 60px; height: 60px; }
    .wa-circulo::after { width: 60px; height: 60px; }
    .wa-circulo svg { width: 34px; height: 34px; }
    /* En escritorio el aviso es una barra centrada: el botón no lo tapa. */
    body:has(#cc-aviso:not([hidden])) .wa-flotante { opacity: 1; visibility: visible; pointer-events: auto; bottom: 24px; right: 24px; }
}
@media (prefers-reduced-motion: reduce) {
    .wa-circulo::after { animation: none; display: none; }
    .wa-circulo, .wa-rotulo, .noticia-liga { transition: none; }
    .arte-linea { stroke-dashoffset: 0; animation: none; }
    .arte-punto { opacity: 1; animation: none; }
}
@media print { .wa-flotante { display: none !important; } }