/* ============================================================
   FTD — Design System Gozzi (dark premium / gold). Mobile-first.
   Fuentes self-hosted (Playfair Display + Montserrat) con fallback.
   ============================================================ */

/* Fuentes self-hosted del handoff FTD (data-URI convertidos a woff2 reales;
   font-src 'self' de la CSP no admite data:). Pesos estáticos: el resto se sintetiza. */
@font-face {
    font-family: 'Playfair Display';
    src: url('/assets/fonts/playfair-display.woff2') format('woff2');
    font-weight: 700; font-display: swap;
}
@font-face {
    font-family: 'Montserrat';
    src: url('/assets/fonts/montserrat.woff2') format('woff2');
    font-weight: 400; font-display: swap;
}

:root {
    /* ===== Marca FTD — Concepto 1a "La Ruta $" (petróleo + oro). Paleta única. ===== */
    --ftd-fondo:#062226;
    --ftd-superficie:#0A2F35;
    --ftd-acento:#C9A84C;
    --ftd-acento-claro:#E8C97A;
    --ftd-acento-oscuro:#A07830;
    --ftd-texto:#F1EEE3;
    --ftd-texto-suave:#9DB4B4;

    /* ===== Tokens semánticos — tema por defecto = identidad 1a (petróleo) ===== */
    --bg-0:var(--ftd-fondo); --bg-1:#08282D; --bg-2:var(--ftd-superficie); --bg-3:#0E3B42;
    --gold:var(--ftd-acento); --gold-hi:var(--ftd-acento-claro); --gold-lo:var(--ftd-acento-oscuro);
    --txt:var(--ftd-texto); --txt-2:var(--ftd-texto-suave); --txt-3:#82A0A0;
    --ok:#4CB886; --warn:#E8B84C; --err:#E06A5A; --info:#5AA0E0;
    --line:rgba(201,168,76,.20);
    --card-grad:linear-gradient(160deg,#0B333A 0%,#082A2F 100%);
    --radius:16px; --radius-sm:10px;
    --shadow:0 10px 40px rgba(0,0,0,.45);
    --serif:'Playfair Display',Georgia,'Times New Roman',serif;
    --sans:'Montserrat',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
    margin:0; font-family:var(--sans); background:var(--bg-0); color:var(--txt);
    font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
}
h1,h2,h3,h4{font-family:var(--serif); font-weight:700; line-height:1.2; margin:0 0 .5em}
h1{font-size:clamp(1.9rem,6vw,3.2rem)}
h2{font-size:clamp(1.5rem,4vw,2.2rem)}
h3{font-size:1.25rem}
a{color:var(--gold-hi); text-decoration:none}
a:hover{text-decoration:underline}
p{margin:0 0 1rem}
img{max-width:100%; height:auto}
small{color:var(--txt-2)}

.container{width:100%; max-width:1120px; margin:0 auto; padding:0 18px}
.container-narrow{max-width:640px}

/* ---------- Botones ---------- */
.btn{
    display:inline-flex; align-items:center; justify-content:center; gap:.5em;
    font-family:var(--sans); font-weight:600; font-size:1rem; cursor:pointer;
    padding:.85em 1.5em; border-radius:var(--radius-sm); border:1px solid transparent;
    transition:transform .12s ease,box-shadow .2s ease,background .2s; text-decoration:none;
    line-height:1;
}
.btn:hover{text-decoration:none; transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-gold{
    background:linear-gradient(135deg,var(--gold-hi),var(--gold)); color:#1A1400;
    box-shadow:0 6px 20px rgba(201,168,76,.28);
}
.btn-gold:hover{box-shadow:0 8px 26px rgba(201,168,76,.42)}
.btn-ghost{background:transparent; border-color:var(--line); color:var(--txt)}
.btn-ghost:hover{border-color:var(--gold); color:var(--gold-hi)}
.btn-danger{background:transparent; border-color:rgba(224,106,90,.5); color:var(--err)}
.btn-danger:hover{background:rgba(224,106,90,.12)}
.btn-sm{padding:.5em .9em; font-size:.85rem}
.btn-block{width:100%}
.btn:disabled{opacity:.5; cursor:not-allowed; transform:none}

/* ---------- Cards ---------- */
.card{
    background:var(--card-grad); border:1px solid var(--line); border-radius:var(--radius);
    padding:24px; box-shadow:var(--shadow); position:relative;
}
.card-pad-lg{padding:32px}
.card + .card{margin-top:18px}

/* ---------- Forms ---------- */
label{display:block; font-size:.85rem; font-weight:600; color:var(--txt-2); margin:0 0 .4em}
input,select,textarea{
    width:100%; font-family:var(--sans); font-size:1rem; color:var(--txt);
    background:var(--bg-2); border:1px solid var(--line); border-radius:var(--radius-sm);
    padding:.8em .9em; transition:border-color .15s,box-shadow .15s;
}
input:focus,select:focus,textarea:focus{
    outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(201,168,76,.15);
}
input::placeholder,textarea::placeholder{color:var(--txt-3)}
textarea{resize:vertical; min-height:96px}
select{appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),linear-gradient(135deg,var(--gold) 50%,transparent 50%);
    background-position:calc(100% - 20px) 55%,calc(100% - 15px) 55%; background-size:5px 5px,5px 5px; background-repeat:no-repeat}
.field{margin-bottom:16px}
.field-error input,.field-error select,.field-error textarea{border-color:var(--err)}
.error-text{color:var(--err); font-size:.8rem; margin-top:.3em}
.help-text{color:var(--txt-3); font-size:.8rem; margin-top:.3em}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:16px}
@media(max-width:560px){.grid-2{grid-template-columns:1fr}}

/* ---------- Chips / badges ---------- */
.badge{display:inline-block; padding:.28em .7em; border-radius:999px; font-size:.72rem; font-weight:600; letter-spacing:.02em}
.badge-gold{background:rgba(201,168,76,.15); color:var(--gold-hi); border:1px solid var(--line)}
.badge-ok{background:rgba(76,203,134,.14); color:var(--ok)}
.badge-warn{background:rgba(232,184,76,.14); color:var(--warn)}
.badge-err{background:rgba(224,106,90,.14); color:var(--err)}
.badge-info{background:rgba(90,160,224,.14); color:var(--info)}
.badge-muted{background:var(--bg-3); color:var(--txt-2)}

/* ---------- Alerts / flash ---------- */
.alert{padding:14px 16px; border-radius:var(--radius-sm); margin-bottom:16px; border:1px solid; font-size:.92rem}
.alert-ok{background:rgba(76,203,134,.1); border-color:rgba(76,203,134,.35); color:#9fe3bd}
.alert-err{background:rgba(224,106,90,.1); border-color:rgba(224,106,90,.35); color:#f0a99e}
.alert-warn{background:rgba(232,184,76,.1); border-color:rgba(232,184,76,.35); color:#f0d79b}
.alert-info{background:rgba(90,160,224,.1); border-color:rgba(90,160,224,.35); color:#a8cef0}

/* ---------- Header público ---------- */
.site-header{position:sticky; top:0; z-index:50; background:rgba(6,34,38,.82); backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
.site-header .container{display:flex; align-items:center; justify-content:space-between; height:64px}
.brand{display:flex; align-items:center; gap:10px; font-family:var(--serif); font-size:1.25rem; font-weight:700; color:var(--txt)}
.brand:hover{text-decoration:none}
.brand .dot{width:10px; height:10px; border-radius:50%; background:linear-gradient(135deg,var(--gold-hi),var(--gold-lo)); box-shadow:0 0 12px var(--gold)}
.nav-links{display:flex; gap:20px; align-items:center}
.nav-links a{color:var(--txt-2); font-size:.9rem; font-weight:500}
.nav-links a:hover{color:var(--gold-hi); text-decoration:none}
@media(max-width:720px){.nav-links a:not(.btn){display:none}}

/* ---------- Hero ---------- */
.hero{position:relative; padding:64px 0 48px; overflow:hidden}
.hero::before{content:''; position:absolute; top:-30%; right:-10%; width:600px; height:600px;
    background:radial-gradient(circle,rgba(201,168,76,.14),transparent 65%); pointer-events:none}
.hero .eyebrow{color:var(--gold); font-weight:600; letter-spacing:.15em; text-transform:uppercase; font-size:.78rem; margin-bottom:12px}
.hero h1 span{background:linear-gradient(135deg,var(--gold-hi),var(--gold-lo)); -webkit-background-clip:text; background-clip:text; color:transparent}
.hero .lead{font-size:1.1rem; color:var(--txt-2); max-width:520px}
.hero-cta{display:flex; gap:12px; flex-wrap:wrap; margin-top:24px}

/* ---------- Secciones ---------- */
.section{padding:56px 0}
.section-title{text-align:center; margin-bottom:36px}
.section-title p{color:var(--txt-2); max-width:560px; margin:8px auto 0}
.steps{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:18px}
.step{background:var(--card-grad); border:1px solid var(--line); border-radius:var(--radius); padding:22px}
.step .n{font-family:var(--serif); font-size:2rem; color:var(--gold); line-height:1}
.step h3{margin:.4em 0 .3em; font-size:1.05rem}
.step p{color:var(--txt-2); font-size:.9rem; margin:0}

/* ---------- Simulador ---------- */
.simulador{display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:start}
@media(max-width:820px){.simulador{grid-template-columns:1fr}}
.sim-result{text-align:center}
.sim-cuota{font-family:var(--serif); font-size:2.6rem; color:var(--gold-hi); margin:.2em 0}
.sim-line{display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--line); font-size:.92rem}
.sim-line:last-child{border-bottom:none}
.sim-line .k{color:var(--txt-2)}
.sim-line .v{font-weight:600}
.cft-highlight{background:rgba(201,168,76,.08); border:1px dashed var(--line); border-radius:var(--radius-sm); padding:12px; margin-top:14px; font-size:.82rem; color:var(--txt-2)}
.cft-highlight b{color:var(--gold-hi)}

/* ---------- FAQ ---------- */
.faq-item{border-bottom:1px solid var(--line); padding:16px 0}
.faq-item summary{cursor:pointer; font-weight:600; list-style:none}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::before{content:'+'; color:var(--gold); margin-right:10px; font-weight:700}
.faq-item[open] summary::before{content:'–'}
.faq-item p{color:var(--txt-2); margin:12px 0 0}

/* ---------- Wizard ---------- */
.wizard-steps{display:flex; gap:6px; margin-bottom:24px}
.wizard-steps .ws{flex:1; height:5px; border-radius:3px; background:var(--bg-3)}
.wizard-steps .ws.active{background:linear-gradient(90deg,var(--gold-hi),var(--gold-lo))}
.wizard-steps .ws.done{background:var(--gold-lo)}
.step-label{color:var(--gold); font-size:.78rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; margin-bottom:6px}
.passenger-row{display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; margin-bottom:10px}
@media(max-width:560px){.passenger-row{grid-template-columns:1fr}}
.clickwrap{background:var(--bg-2); border:1px solid var(--line); border-radius:var(--radius-sm); padding:16px; max-height:280px; overflow-y:auto; font-size:.82rem; color:var(--txt-2); white-space:pre-wrap; margin-bottom:14px}
.check-row{display:flex; gap:10px; align-items:flex-start; margin:12px 0}
.check-row input{width:auto; margin-top:3px}
.check-row label{margin:0; color:var(--txt); font-weight:500}

/* ---------- Tablas ---------- */
.table-wrap{overflow-x:auto; border-radius:var(--radius); border:1px solid var(--line)}
table.data{width:100%; border-collapse:collapse; font-size:.9rem; min-width:520px}
table.data th{background:var(--bg-2); color:var(--txt-2); text-align:left; padding:12px 14px; font-weight:600; font-size:.78rem; text-transform:uppercase; letter-spacing:.03em; white-space:nowrap}
table.data td{padding:12px 14px; border-top:1px solid var(--line)}
table.data tr:hover td{background:rgba(201,168,76,.04)}
table.data .num{text-align:right; font-variant-numeric:tabular-nums}

/* ---------- WhatsApp flotante ---------- */
.wa-float{position:fixed; right:18px; bottom:18px; z-index:60; width:56px; height:56px; border-radius:50%;
    background:#25D366; display:flex; align-items:center; justify-content:center; box-shadow:0 8px 24px rgba(0,0,0,.4)}
.wa-float:hover{transform:scale(1.06)}
.wa-float svg{width:30px; height:30px; fill:#fff}

/* ---------- Footer ---------- */
.site-footer{border-top:1px solid var(--line); padding:32px 0; margin-top:48px; color:var(--txt-3); font-size:.85rem}
.site-footer a{color:var(--txt-2)}
.legal-note{font-size:.72rem; color:var(--txt-3); margin-top:12px}

/* ---------- Utilidades ---------- */
.text-center{text-align:center}.text-right{text-align:right}
.muted{color:var(--txt-2)}.gold{color:var(--gold-hi)}
.mt-0{margin-top:0}.mt-1{margin-top:8px}.mt-2{margin-top:16px}.mt-3{margin-top:24px}
.mb-0{margin-bottom:0}.mb-2{margin-bottom:16px}.mb-3{margin-bottom:24px}
.flex{display:flex}.flex-between{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap}
.gap{gap:12px}.wrap{flex-wrap:wrap}
.hidden{display:none}
.pill-copy{cursor:pointer; user-select:all}

/* ============================================================
   TEMAS — negro (default), blanco y blue. data-theme en <html>.
   ============================================================ */
html[data-theme="light"]{
    --bg-0:#F6F4EF; --bg-1:#FFFFFF; --bg-2:#EFECE4; --bg-3:#E4E0D6;
    --gold:#A07830; --gold-hi:#8A6420; --gold-lo:#C9A84C;
    --txt:#1C1B20; --txt-2:#54525C; --txt-3:#8B8993;
    --line:rgba(160,120,48,.28);
    --card-grad:linear-gradient(160deg,#FFFFFF 0%,#F5F2EA 100%);
    --shadow:0 10px 30px rgba(60,45,10,.10);
}
html[data-theme="light"] .hero::before{background:radial-gradient(circle,rgba(160,120,48,.14),transparent 65%)}
html[data-theme="light"] .btn-gold{background:linear-gradient(135deg,#C9A84C,#A07830); color:#1A1400; box-shadow:0 6px 20px rgba(160,120,48,.30)}
html[data-theme="light"] .site-header{background:rgba(246,244,239,.88)}
html[data-theme="light"] .alert-ok{color:#1e7a46}
html[data-theme="light"] .alert-err{color:#a33325}
html[data-theme="light"] .alert-warn{color:#8a6414}
html[data-theme="light"] .alert-info{color:#2a6099}
html[data-theme="light"] .badge-ok{color:#1e7a46}
html[data-theme="light"] .badge-err{color:#a33325}
html[data-theme="light"] .badge-warn{color:#8a6414}
html[data-theme="light"] .badge-info{color:#2a6099}

html[data-theme="blue"]{
    --bg-0:#050B1A; --bg-1:#0A1226; --bg-2:#101C38; --bg-3:#182750;
    --gold:#5AA0E0; --gold-hi:#8CC3F0; --gold-lo:#2E6DA8;
    --txt:#E8EDF6; --txt-2:#A6B2C8; --txt-3:#66738C;
    --line:rgba(90,160,224,.22);
    --card-grad:linear-gradient(160deg,#0E1830 0%,#0A1122 100%);
    --shadow:0 10px 40px rgba(0,10,40,.55);
}
html[data-theme="blue"] .hero::before{background:radial-gradient(circle,rgba(90,160,224,.16),transparent 65%)}
html[data-theme="blue"] .btn-gold{background:linear-gradient(135deg,#8CC3F0,#3E7DBE); color:#031126; box-shadow:0 6px 20px rgba(90,160,224,.30)}
html[data-theme="blue"] .site-header{background:rgba(5,11,26,.85)}
html[data-theme="blue"] .brand .dot{background:linear-gradient(135deg,#8CC3F0,#2E6DA8); box-shadow:0 0 12px #5AA0E0}
html[data-theme="blue"] .cft-highlight{background:rgba(90,160,224,.08)}
html[data-theme="blue"] .badge-gold{background:rgba(90,160,224,.15)}

/* Selector de tema: tres circulitos, discreto */
.theme-switch{display:inline-flex; gap:7px; align-items:center; padding:4px 6px; border:1px solid var(--line); border-radius:999px; background:var(--bg-2)}
.theme-switch button{width:16px; height:16px; border-radius:50%; padding:0; cursor:pointer; border:1px solid rgba(128,128,128,.5); flex-shrink:0; transition:transform .12s}
.theme-switch button:hover{transform:scale(1.2)}
.theme-switch button:focus-visible{outline:2px solid var(--gold); outline-offset:2px}

/* Selector de idioma: banderitas */
.lang-switch{display:inline-flex; gap:2px; align-items:center}
.lang-switch a{font-size:1.05rem; text-decoration:none; padding:2px 4px; border-radius:6px; line-height:1; opacity:.55; filter:grayscale(35%)}
.lang-switch a:hover{opacity:1; filter:none; text-decoration:none}
.lang-switch a.active{opacity:1; filter:none; background:rgba(128,128,128,.15)}

/* Franja "para todos" (mensaje inclusivo del landing) */
.para-todos{border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--bg-1); padding:26px 0; text-align:center}
.para-todos p{max-width:760px; margin:0 auto; font-family:var(--serif); font-size:clamp(1.05rem,2.6vw,1.35rem); color:var(--txt); line-height:1.5}
.para-todos p b{color:var(--gold-hi)}

/* ============================================================
   MARCA FTD — Concepto 1a "La Ruta $": isotipo, lockup y reveal.
   Keyframes y timings exactos del handoff (design_handoff_branding).
   ============================================================ */
@keyframes march{to{stroke-dashoffset:-450}}
@keyframes drop{0%{opacity:0;transform:translateY(-30px)}65%{opacity:1;transform:translateY(4px)}100%{opacity:1;transform:translateY(0)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes pop{0%{opacity:0;transform:scale(0)}70%{opacity:1;transform:scale(1.14)}100%{opacity:1;transform:scale(1)}}

/* Isotipo (svg inline reutilizable). Estado estático = fotograma final. */
.ftd-icon{display:block; width:auto}
.ftd-icon .ftd-pin,.ftd-icon .ftd-route,.ftd-icon .ftd-origin{transform-box:fill-box; transform-origin:center}

/* Reveal: la clase .ftd-anim dispara la secuencia (README §Interacciones).
   pin drop → ruta fadeUp + marcha infinita → origen pop. */
.ftd-anim .ftd-pin{animation:drop .7s cubic-bezier(.2,.9,.3,1.2) .25s both}
.ftd-anim .ftd-route{animation:fadeUp .7s ease .05s both, march 225s linear infinite}
.ftd-anim .ftd-origin{animation:pop .5s cubic-bezier(.2,.9,.3,1.2) .6s both}

/* Lockup horizontal (icono + wordmark + bajada) — README §Lockup. */
.ftd-lockup{display:inline-flex; align-items:center; gap:12px}
.ftd-lockup .ftd-icon{height:40px; flex-shrink:0}
.ftd-lockup-text{display:flex; flex-direction:column; line-height:1}
.ftd-wordmark{font-family:var(--serif); font-weight:700; font-size:1.15rem; color:var(--txt); line-height:1.05}
.ftd-wordmark span{color:var(--gold-hi)}
.ftd-tagline{font-size:.5rem; letter-spacing:.26em; text-transform:uppercase; color:var(--txt-2); margin-top:5px}
@media(max-width:480px){
    .ftd-lockup .ftd-icon{height:34px}
    .ftd-wordmark{font-size:1.02rem}
    .ftd-tagline{display:none}
}

/* Reveal del hero: icono grande, clic/Enter para repetir. */
.ftd-hero-brand{display:inline-flex; align-items:center; gap:14px; margin-bottom:22px; padding:6px; border:0; background:none; border-radius:14px; cursor:pointer; color:inherit}
.ftd-hero-brand .ftd-icon{height:132px}
.ftd-hero-brand:focus-visible{outline:2px solid var(--gold); outline-offset:3px}
.ftd-replay-hint{font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--txt-3); opacity:0; transition:opacity .2s ease; user-select:none; white-space:nowrap}
.ftd-hero-brand:hover .ftd-replay-hint,.ftd-hero-brand:focus-visible .ftd-replay-hint{opacity:1}
@media(max-width:560px){.ftd-hero-brand .ftd-icon{height:104px}}

/* Movimiento reducido: mostrar el estado final sin animar (README §Interacciones). */
@media (prefers-reduced-motion: reduce){
    .ftd-anim .ftd-pin,.ftd-anim .ftd-route,.ftd-anim .ftd-origin{animation:none}
    .ftd-replay-hint{display:none}
}