:root{
    --navy:#1B2A4A;
    --navy-deep:#101c33;
    --gold:#C9A44C;
    --gold-soft:#e8d5a3;
    --paper:#F6F4EF;
    --ink:#1B2A4A;
    --line:rgba(27,42,74,0.15);
}

*{box-sizing:border-box;}

html{scroll-behavior:smooth;}

@media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    *{transition-duration:.01ms !important;}
}

body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:'Inter',-apple-system,'Segoe UI',sans-serif;
    -webkit-font-smoothing:antialiased;
    padding-bottom:56px; /* espacio para el sticky CTA */
}

h1,h2,h3{
    font-family:'Barlow Condensed','Arial Narrow',sans-serif;
    text-transform:uppercase;
    letter-spacing:0.02em;
    margin:0;
}

a{color:inherit;}

:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}

/* ---------- TOPBAR ---------- */

.topbar{
    position:fixed;
    top:0;left:0;right:0;
    z-index:100;
    background:rgba(16,28,51,0.94);
    backdrop-filter:blur(6px);
}

.topbar-inner{
    max-width:1100px;
    margin:0 auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:12px 24px;
}

.brand{
    display:flex;
    align-items:center;
    gap:10px;
    text-decoration:none;
    color:#fff;
}

.brand img{height:32px;border-radius:4px;}

.brand span{
    font-family:'Barlow Condensed',sans-serif;
    font-weight:700;
    letter-spacing:0.06em;
    font-size:15px;
}

.main-nav{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    justify-content:flex-end;
    gap:6px 20px;
}

.main-nav a{
    color:#dfe4ee;
    text-decoration:none;
    font-size:13px;
}

.main-nav a:hover{color:#fff;}

.nav-cta{
    background:var(--gold);
    color:var(--navy-deep) !important;
    padding:8px 14px;
    border-radius:2px;
    font-weight:700;
    font-size:12px !important;
    letter-spacing:.03em;
    text-transform:uppercase;
}

/* ---------- HERO ---------- */

.hero{
    position:relative;
    min-height:100vh;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    background:
        linear-gradient(180deg, rgba(16,28,51,0.35) 0%, rgba(16,28,51,0.92) 78%),
        url('../assets/hero-foto.jpg') center/cover;
    color:#fff;
    padding:100px 24px 48px;
}

.placeholder-tag{
    position:absolute;top:76px;left:16px;right:16px;
    max-width:1052px;
    margin:0 auto;
    font-family:monospace;font-size:11px;color:var(--gold-soft);
    background:rgba(16,28,51,0.55);border:1px dashed var(--gold);
    padding:8px 10px;border-radius:4px;line-height:1.4;
}

.hero-content{
    max-width:1100px;
    margin:0 auto;
    width:100%;
}

.eyebrow{
    color:var(--gold);
    font-size:12px;
    font-weight:700;
    letter-spacing:0.15em;
    text-transform:uppercase;
    margin-bottom:10px;
}

.hero h1{
    font-size:40px;
    line-height:1.05;
    font-weight:600;
}

.hero h1 span{color:var(--gold);}

.hero p{
    font-size:14px;
    line-height:1.5;
    color:#dfe4ee;
    margin:14px 0 20px;
    max-width:34ch;
}

.btn-row{display:flex;gap:10px;flex-wrap:wrap;}

.btn{
    display:inline-block;
    padding:13px 20px;
    font-size:13px;
    font-weight:700;
    letter-spacing:0.03em;
    text-transform:uppercase;
    border-radius:2px;
    text-decoration:none;
    cursor:pointer;
}

.btn-primary{background:var(--gold);color:var(--navy-deep);}
.btn-ghost{border:1px solid rgba(255,255,255,0.4);color:#fff;}

/* ---------- SECTION GENERIC ---------- */

section{
    padding:44px 24px;
    border-bottom:1px solid var(--line);
    max-width:1100px;
    margin:0 auto;
}

.kicker{
    font-size:11px;font-weight:700;letter-spacing:0.15em;
    color:var(--gold);text-transform:uppercase;margin-bottom:8px;
}

.section-title{font-size:26px;color:var(--navy);margin-bottom:4px;}

.lede{font-size:14px;color:#4b5670;line-height:1.55;margin-top:10px;max-width:38ch;}

/* ---------- QUIENES SOMOS ---------- */

.quienes{background:#fff;}

.quienes p{font-size:14.5px;line-height:1.6;color:#33405e;margin-top:12px;max-width:60ch;}

.badges{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px;}

.badge{
    font-size:11px;font-weight:600;color:var(--navy);
    background:var(--paper);border:1px solid var(--line);
    padding:6px 10px;border-radius:20px;
}

/* ---------- CAPACIDADES ---------- */

.capacidades{background:var(--navy);color:#fff;max-width:100%;}
.capacidades > *{max-width:1100px;margin-left:auto;margin-right:auto;}
.capacidades .kicker{color:var(--gold-soft);}
.capacidades h2{color:#fff;}
.capacidades .lede{color:#c3cbdc;}

.cap-grid{display:flex;flex-direction:column;gap:14px;margin-top:24px;max-width:1100px;margin-left:auto;margin-right:auto;}

.cap-card{
    background:rgba(255,255,255,0.06);
    border:1px solid rgba(255,255,255,0.14);
    border-radius:6px;
    padding:18px;
    position:relative;
    overflow:hidden;
}

.cap-card .tag{
    font-size:10px;font-weight:700;letter-spacing:0.12em;
    color:var(--gold);text-transform:uppercase;
}

.cap-card .num{
    font-family:'Barlow Condensed',sans-serif;
    font-size:38px;font-weight:700;line-height:1;margin:6px 0 4px;
}

.cap-card .num small{font-size:16px;font-weight:500;color:#c3cbdc;}

.cap-card .desc{font-size:12.5px;color:#c3cbdc;line-height:1.5;}

.bridge{
    margin-top:20px;padding:16px;border-left:3px solid var(--gold);
    background:rgba(201,164,76,0.08);font-size:13px;line-height:1.55;
    color:#f1e7cf;font-style:italic;
    max-width:1100px;margin-left:auto;margin-right:auto;
}

/* ---------- HUB DIFERENCIAL ---------- */

.hub{background:var(--paper);}

.hub-visual{
    margin-top:20px;border-radius:6px;overflow:hidden;
    border:1px dashed var(--gold);
    background:repeating-linear-gradient(135deg,#e9e2d1 0,#e9e2d1 10px,#f1ebdd 10px,#f1ebdd 20px);
    padding:26px 16px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:18px;
    flex-wrap:wrap;
    text-align:center;
}

.transbordo{display:flex;flex-direction:column;align-items:center;gap:4px;}

.tb-num{font-family:'Barlow Condensed',sans-serif;font-size:34px;color:var(--navy);font-weight:700;line-height:1;}

.tb-num-alt{color:#8a6d2e;}

.tb-label{font-size:11px;color:#7a5f22;font-weight:600;letter-spacing:.03em;text-transform:uppercase;}

.tb-arrow-wrap{display:flex;flex-direction:column;align-items:center;gap:4px;}

.tb-arrow{color:var(--gold);font-size:26px;line-height:1;}

.tb-hub{font-family:monospace;font-size:10px;color:#7a5f22;letter-spacing:.05em;}

.hub p.lede{margin-top:14px;}

/* ---------- VERTICALES ---------- */

.verticales{background:#fff;}

.chip-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px;}

.chip{
    font-size:12px;font-weight:600;color:var(--navy);
    border:1px solid var(--line);padding:9px 14px;border-radius:4px;
    background:var(--paper);
}

/* ---------- COMO OPERAMOS ---------- */

.operamos{background:var(--paper);}

.steps{margin-top:22px;display:flex;flex-direction:column;gap:0;}

.step{display:flex;gap:14px;padding:14px 0;border-top:1px solid var(--line);}

.step:first-child{border-top:none;}

.step .idx{
    font-family:'Barlow Condensed',sans-serif;font-size:22px;font-weight:700;
    color:var(--gold);min-width:28px;
}

.step .txt h3{font-size:13.5px;color:var(--navy);font-weight:700;text-transform:none;}

.step .txt p{font-size:12.5px;color:#5a6580;margin:4px 0 0;line-height:1.5;}

/* ---------- CONTACTO ---------- */

.contacto{background:var(--navy-deep);color:#fff;max-width:100%;padding-bottom:52px;}
.contacto > *{max-width:640px;margin-left:auto;margin-right:auto;}
.contacto .kicker{color:var(--gold-soft);}
.contacto h2{color:#fff;}
.contacto .lede{color:#c3cbdc;}

form{margin-top:22px;display:flex;flex-direction:column;gap:10px;max-width:640px;margin-left:auto;margin-right:auto;}

form input, form textarea{
    background:rgba(255,255,255,0.07);
    border:1px solid rgba(255,255,255,0.18);
    color:#fff;padding:12px;border-radius:3px;font-size:13px;font-family:inherit;
}

form input::placeholder, form textarea::placeholder{color:#8a93ab;}

form input:focus, form textarea:focus{border-color:var(--gold);}

form button{
    margin-top:4px;background:var(--gold);color:var(--navy-deep);
    border:none;padding:14px;font-weight:700;letter-spacing:0.03em;
    text-transform:uppercase;font-size:13px;border-radius:3px;cursor:pointer;
}

form button:hover{background:var(--gold-soft);}

.team{
    max-width:640px;
    margin:36px auto 0;
    display:flex;
    flex-direction:column;
    gap:12px;
    border-top:1px solid rgba(255,255,255,.12);
    padding-top:24px;
}

.team div{
    display:flex;
    flex-direction:column;
    gap:2px;
    font-size:12.5px;
}

.team strong{
    color:var(--gold-soft);
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.05em;
}

.team span{color:#c3cbdc;}

.team a{color:#c3cbdc;text-decoration:none;}
.team a:hover{color:var(--gold-soft);}

/* ---------- FOOTER ---------- */

footer{
    text-align:center;
    padding:24px;
    font-size:11.5px;
    color:#8a93ab;
    background:var(--navy-deep);
}

/* ---------- STICKY CTA ---------- */

.sticky-cta{
    position:fixed;bottom:0;left:0;right:0;
    background:var(--gold);color:var(--navy-deep);
    padding:14px 20px;text-align:center;font-weight:700;
    font-size:13px;letter-spacing:0.03em;text-transform:uppercase;
    box-shadow:0 -4px 16px rgba(0,0,0,0.15);
    z-index:200;cursor:pointer;
    text-decoration:none;
    display:block;
}

.sticky-cta:hover{background:var(--gold-soft);}

/* ---------- DESKTOP ---------- */

@media(min-width:760px){

    .hero-content{max-width:640px;}
    .hero h1{font-size:56px;}
    .hero p{font-size:16px;max-width:42ch;}

    .cap-grid{flex-direction:row;}
    .cap-card{flex:1;}

    .steps{
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:0 40px;
    }

    .step{border-top:1px solid var(--line);}
    .step:nth-child(2){border-top:none;}

    form{flex-direction:row;flex-wrap:wrap;}
    form input{flex:1 1 45%;}
    form textarea{flex:1 1 100%;}
    form button{flex:1 1 100%;}

    .team{
        flex-direction:row;
        flex-wrap:wrap;
        gap:24px;
    }

    .team div{flex:1 1 40%;}
}

@media(min-width:1024px){
    .hero h1{font-size:64px;}
}