/* ---------------------------------------------------
   Roca Finanzas – style.css
   Diseño: Glassmorphism + Neo-Brutalism
   Tipografía: Roboto (heading) & Lato (body)
--------------------------------------------------- */

/* ---------- ROOT THEME ---------- */
:root{
    /* Brand Palette (Additional/Complementary) */
    --primary:#1e88e5;
    --primary-dark:#0d47a1;
    --secondary:#ff7043;
    --secondary-dark:#bf360c;
    --accent:#00c48c;
    --bg:#f2f6ff;
    --surface:#ffffff;
    --surface-glass:rgba(255,255,255,.25);
    --glass-border:rgba(255,255,255,.18);
    --text-primary:#222222;
    --text-light:#fafafa;

    /* Typography */
    --font-heading:'Roboto',sans-serif;
    --font-body:'Lato',sans-serif;

    /* Radius & Shadows */
    --radius:12px;
    --shadow-xs:0 2px 6px rgba(0,0,0,.04);
    --shadow-sm:0 4px 10px rgba(0,0,0,.06);
    --shadow-md:0 10px 20px rgba(0,0,0,.08);
    --shadow-lg:0 20px 32px rgba(0,0,0,.12);

    /* Transition */
    --transition:.35s cubic-bezier(.4,0,.2,1);
}

/* ---------- RESET / BASE ---------- */
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
    font-family:var(--font-body);
    color:var(--text-primary);
    background:var(--bg);
    line-height:1.7;
    -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5,h6{
    font-family:var(--font-heading);
    color:var(--text-primary);
    font-weight:700;
    line-height:1.25;
}
p{margin-bottom:1em;}
img{display:block;max-width:100%;height:auto;}

/* ---------- GLOBAL UTILS ---------- */
.container{
    width:90%;
    max-width:1200px;
    margin-inline:auto;
}
.flex{display:flex;gap:1rem;}
.center{text-align:center;}
.is-two-thirds{width:66.666%;}
.alt-bg{background:#ffffff;}
.section{padding:4.5rem 0;}
.section-title{
    font-size:clamp(1.8rem,4vw,2.4rem);
    text-align:center;
    margin-bottom:2.5rem;
    position:relative;
}
/* subtle underline for titles */
.section-title::after{
    content:'';
    width:80px;height:4px;
    background:var(--accent);
    display:block;
    margin:1rem auto 0;
    border-radius:2px;
}

/* ---------- BUTTONS ---------- */
.btn,
button,
input[type="submit"]{
    display:inline-block;
    background:var(--primary);
    color:#fff;
    padding:.9rem 2.2rem;
    border:none;
    border-radius:var(--radius);
    font-family:var(--font-heading);
    font-weight:700;
    cursor:pointer;
    transition:background var(--transition),transform .2s;
    text-decoration:none;
}
.btn-primary{background:var(--primary);}
.btn:hover,
button:hover,
input[type="submit"]:hover{
    background:var(--secondary);
    transform:translateY(-2px);
}
.btn:active{transform:translateY(0);}

/* Read-more links */
.btn-link{
    color:var(--primary);
    font-weight:700;
    position:relative;
    padding-bottom:2px;
    transition:color var(--transition);
}
.btn-link::after{
    content:'';
    width:100%;height:2px;
    background:var(--primary);
    position:absolute;
    left:0;bottom:0;
    transition:transform var(--transition);
    transform-origin:right;
    transform:scaleX(0);
}
.btn-link:hover{color:var(--secondary);}
.btn-link:hover::after{
    background:var(--secondary);
    transform-origin:left;
    transform:scaleX(1);
}

/* ---------- HEADER ---------- */
.site-header{
    position:fixed;
    top:0;left:0;
    width:100%;
    background:rgba(255,255,255,.65);
    backdrop-filter:saturate(180%) blur(14px);
    border-bottom:1px solid var(--glass-border);
    z-index:999;
    transition:background var(--transition);
}
.site-header .container{align-items:center;justify-content:space-between;}
.logo{
    font-family:var(--font-heading);
    font-size:1.6rem;
    font-weight:900;
    color:var(--primary-dark);
}
.logo span{color:var(--secondary-dark);}
.main-nav ul{
    list-style:none;
    display:flex;
    gap:1.2rem;
}
.main-nav a{
    font-weight:600;
    color:var(--primary-dark);
    transition:color var(--transition);
}
.main-nav a:hover{color:var(--secondary);}
/* Burger (mobile) */
.burger{
    width:34px;height:24px;
    display:none;
    flex-direction:column;
    justify-content:space-between;
    background:transparent;
}
.burger span{
    display:block;
    height:3px;width:100%;
    background:var(--primary-dark);
    border-radius:2px;
}
/* Mobile nav */
@media(max-width:880px){
    .burger{display:flex;}
    .main-nav{
        position:fixed;top:0;right:-100%;
        width:240px;height:100vh;
        background:var(--surface);
        flex-direction:column;
        padding-top:120px;
        transition:right var(--transition);
    }
    .main-nav ul{flex-direction:column;text-align:center;}
    .main-nav.active{right:0;}
}

/* ---------- HERO ---------- */
.hero{
    position:relative;
    color:var(--text-light);
    padding:180px 0 140px;
    background-size:cover;
    background-repeat:no-repeat;
    background-position:center;
}
.hero::before{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(rgba(0,0,0,0.4),rgba(0,0,0,0.6));
}
.hero-content{
    position:relative;
    z-index:2;
    text-align:center;
    max-width:900px;
    margin:auto;
    padding:0 1rem;
}
.hero .lead{
    font-size:1.25rem;
    margin:1.2rem 0 2.2rem;
}
.stats-widget{
    margin-top:3rem;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:2rem;
}
.stat strong{
    font-size:2rem;
    display:block;
    font-family:var(--font-heading);
}
.stat span{opacity:.85;}

/* ---------- GLASS SECTION ---------- */
.glass{
    background:var(--surface-glass);
    border:1px solid var(--glass-border);
    box-shadow:0 8px 28px rgba(31,38,135,.15);
    backdrop-filter:blur(12px) saturate(160%);
    -webkit-backdrop-filter:blur(12px) saturate(160%);
    border-radius:var(--radius);
}

/* ---------- NEO-BRUTALISM SECTION ---------- */
.neo{
    background:var(--surface);
    border:4px solid #000;
    box-shadow:8px 8px 0 #000;
}

/* ---------- CARDS ---------- */
.card{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    background:var(--surface);
    border-radius:var(--radius);
    padding:1.6rem;
    box-shadow:var(--shadow-sm);
    transition:transform var(--transition),box-shadow var(--transition);
}
.card:hover{
    transform:translateY(-6px);
    box-shadow:var(--shadow-md);
}
.card-image{
    width:100%;
    height:180px;
    overflow:hidden;
    border-radius:var(--radius);
    margin-bottom:1rem;
}
.card-image img{
    width:100%;height:100%;
    object-fit:cover;
    margin:0 auto;
}
.card-content h3{margin-bottom:.6rem;}

/* ---------- TEAM GRID ---------- */
.team-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:2rem;
}

/* ---------- INSIGHTS GRID ---------- */
.insights-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:2rem;
}

/* ---------- PARTNERS ---------- */
.partners-logos{
    flex-wrap:wrap;
    justify-content:center;
    gap:2rem;
}
.partners-logos .card{width:200px;}

/* ---------- PROGRESS BARS ---------- */
.progress-group{flex-direction:column;gap:1.4rem;margin-top:2rem;}
@media(min-width:700px){.progress-group{flex-direction:row;}}
.progress-item span{font-weight:600;display:block;margin-bottom:.4rem;}
.progress{
    width:100%;
    background:#e0e0e0;
    border-radius:8px;
    overflow:hidden;
    height:12px;
}
.progress-bar{
    height:100%;
    background:var(--primary);
    transition:width 1.2s ease;
}
.progress-bar.secondary{background:var(--secondary);}
.progress-bar.accent{background:var(--accent);}

/* ---------- SLIDER ---------- */
.slider{position:relative;}
.slides{
    display:flex;
    overflow:hidden;
}
.slide{flex:0 0 100%;}
.slider-prev,
.slider-next{
    position:absolute;top:50%;
    transform:translateY(-50%);
    width:46px;height:46px;
    background:var(--primary);
    border:none;color:#fff;
    font-size:2rem;
    border-radius:50%;
    cursor:pointer;
    transition:background var(--transition);
    z-index:5;
}
.slider-prev:hover,
.slider-next:hover{background:var(--secondary);}
.slider-prev{left:-1.6rem;}
.slider-next{right:-1.6rem;}

/* ---------- CONTACT FORM ---------- */
.contact-form{
    margin-top:2.5rem;
    display:grid;
    gap:1.4rem;
}
.form-group{
    display:flex;
    flex-direction:column;
}
label{font-weight:600;margin-bottom:.4rem;}
input,textarea{
    border:2px solid #ccc;
    border-radius:var(--radius);
    padding:.8rem 1rem;
    font-family:var(--font-body);
    transition:border-color var(--transition),box-shadow var(--transition);
}
input:focus,textarea:focus{
    outline:none;
    border-color:var(--primary);
    box-shadow:0 0 0 3px rgba(30,136,229,.2);
}

/* ---------- FOOTER ---------- */
.site-footer{
    background:#161616;
    color:#e4e4e4;
    padding:4rem 0 2rem;
}
.site-footer .container{
    flex-wrap:wrap;
    justify-content:space-between;
    gap:2rem;
}
.footer-col h3{
    color:#ffffff;
    margin-bottom:1rem;
}
.footer-col ul{list-style:none;}
.footer-col a{
    color:#e4e4e4;
    transition:color var(--transition);
}
.footer-col a:hover{color:var(--accent);}
.sub-footer{
    margin-top:2.5rem;
    font-size:.9rem;
    opacity:.8;
}
/* Social links styled as text */
.footer-col ul li{
    margin-bottom:.4rem;
}

/* ---------- SUCCESS PAGE ---------- */
.page-success{
    min-height:100vh;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    padding:2rem;
}
.page-success h1{margin-bottom:1rem;color:var(--primary);}
.page-success a.btn{margin-top:1.5rem;}

/* ---------- PAGES (privacy / terms) ---------- */
.page-legal{
    padding-top:100px;
}

/* ---------- MEDIA QUERIES ---------- */
@media(max-width:640px){
    .stats-widget{gap:1.2rem;}
    .hero{padding:140px 0 100px;}
}