/* =====================================================
   VARIABLES
   ===================================================== */
:root{
    --font-heading:'Manrope', sans-serif;
    --font-body:'Rubik', sans-serif;

    /* Neutral / Gray palette */
    --clr-bg:#f1f3f5;
    --clr-surface:#e9ecef;
    --clr-border:#d1d9e0;
    --clr-text:#333333;
    --clr-heading:#222222;

    /* Accents */
    --clr-primary:#00C48C;
    --clr-primary-dark:#009e72;
    --clr-secondary:#4D9EF6;
    --clr-gradient-1:#8BC6EC;
    --clr-gradient-2:#9599E2;

    /* Shadows for neumorphism */
    --shadow-light:8px 8px 16px rgba(0,0,0,0.08);
    --shadow-dark:-8px -8px 16px rgba(255,255,255,0.8);

    /* Radius & Spacing */
    --radius:14px;
    --gap:1.5rem;

    /* Animation */
    --duration:0.4s;
}

/* =====================================================
   RESET / BASE
   ===================================================== */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
    margin:0;
    font-family:var(--font-body);
    color:var(--clr-text);
    background:var(--clr-bg);
    line-height:1.6;
}
img{max-width:100%;height:auto;display:block;}
h1,h2,h3,h4,h5,h6{
    font-family:var(--font-heading);
    color:var(--clr-heading);
    line-height:1.2;
    margin:0 0 .5em 0;
    text-align:center;
}
p{margin:0 0 1em 0;}
ul{list-style:none;padding:0;margin:0;}
a{
    color:var(--clr-primary-dark);
    text-decoration:none;
    transition:color var(--duration) ease;
}
a:hover{color:var(--clr-secondary);}
.container{
    width:min(1200px,90%);
    margin-inline:auto;
    padding-block:3rem;
}

/* =====================================================
   UTILITY
   ===================================================== */
.d-flex{display:flex;}
.grid{display:grid;gap:var(--gap);}
.center{display:flex;justify-content:center;align-items:center;}
.text-center{text-align:center;}
.mt-2{margin-top:2rem;}
.hidden{opacity:0;transform:translateY(40px);transition:opacity .6s ease,transform .6s ease;}
.show{opacity:1;transform:none;}

/* =====================================================
   BUTTONS
   ===================================================== */
.btn,
button,
input[type='submit']{
    appearance:none;
    border:none;
    font-family:var(--font-heading);
    padding:.9rem 2.2rem;
    font-weight:600;
    border-radius:var(--radius);
    color:#fff;
    background:var(--clr-primary);
    box-shadow:var(--shadow-light), var(--shadow-dark);
    cursor:pointer;
    transition:all var(--duration) ease;
}
.btn:hover,
button:hover,
input[type='submit']:hover{
    background:var(--clr-primary-dark);
    transform:translateY(-2px);
    box-shadow:0 12px 20px rgba(0,0,0,.12);
}

/* =====================================================
   HEADER
   ===================================================== */
.header{
    position:sticky;top:0;z-index:1000;
    background:var(--clr-bg);
    box-shadow:0 4px 10px rgba(0,0,0,.05);
}
.header .container{
    display:flex;align-items:center;justify-content:space-between;
    padding-block:1rem;
}
.logo{font-family:var(--font-heading);font-weight:700;font-size:1.5rem;color:var(--clr-heading);}
.nav ul{
    display:flex;gap:1.2rem;
}
.nav a{font-weight:500;}
.burger{background:none;border:none;display:none;flex-direction:column;gap:5px;}
.burger span{width:24px;height:3px;background:var(--clr-heading);border-radius:2px;}

/* Responsive Nav */
@media(max-width:768px){
    .nav{position:fixed;inset:0 0 0 auto;width:250px;background:var(--clr-bg);transform:translateX(100%);transition:transform var(--duration) ease;}
    .nav.open{transform:none;}
    .nav ul{flex-direction:column;padding:4rem 1.5rem;}
    .burger{display:flex;}
}

/* =====================================================
   HERO
   ===================================================== */
.hero{
    position:relative;
    background-image:
        linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.5)),
        url('../image/hero-inversiones-buenosaires.jpg');
    background-size:cover;
    background-repeat:no-repeat;
    background-attachment:fixed;
    color:#fff;
}
.hero-overlay{position:absolute;inset:0;}
.hero-content{
    position:relative;
    padding:6rem 0;
    text-align:center;
}
.hero h1{font-size:clamp(2.2rem,6vw,3.5rem);color:#fff;}
.hero p{max-width:700px;margin-inline:auto 2rem;font-size:1.15rem;color:#e0e0e0;}

/* =====================================================
   STATS
   ===================================================== */
.stats .stats-grid{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--gap);
    text-align:center;
}
.stat{background:var(--clr-surface);padding:2rem;border-radius:var(--radius);box-shadow:var(--shadow-light),var(--shadow-dark);}
.stat-number{font-family:var(--font-heading);font-size:2rem;color:var(--clr-primary);display:block;margin-bottom:.3rem;}

/* =====================================================
   PROCESS
   ===================================================== */
.process-steps{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--gap);
}
.step{
    background:var(--clr-surface);padding:2rem;border-radius:var(--radius);
    box-shadow:var(--shadow-light),var(--shadow-dark);
    text-align:center;
}
.step .icon{
    width:60px;height:60px;margin-inline:auto;margin-bottom:1rem;
    background:var(--clr-primary);mask:url('data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjZmZmIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNOSAxNnYyaDEwdi0ySDl6bTAtNmgxMFYxSDl2MTR6Ii8+PC9zdmc+');mask-size:contain;mask-repeat:no-repeat;
}
.progress-wrapper{margin-top:2rem;text-align:center;}
progress[value]{width:100%;height:12px;border-radius:6px;appearance:none;overflow:hidden;}
progress[value]::-webkit-progress-bar{background:var(--clr-border);}
progress[value]::-webkit-progress-value{background:var(--clr-secondary);}

/* =====================================================
   CARD GENERIC
   ===================================================== */
.card{
    display:flex;flex-direction:column;align-items:center;text-align:center;
    background:var(--clr-surface);
    border-radius:var(--radius);
    box-shadow:var(--shadow-light),var(--shadow-dark);
    overflow:hidden;
    transition:transform var(--duration) ease;
}
.card:hover{transform:translateY(-6px);}
.card-image{width:100%;height:240px;overflow:hidden;}
.card-image img{width:100%;height:100%;object-fit:cover;margin:0 auto;}
.card-content{padding:1.5rem;}

/* =====================================================
   SUCCESS STORIES
   ===================================================== */
.stories-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--gap);}

/* =====================================================
   RESOURCES
   ===================================================== */
.resources-list li+li{margin-top:.6rem;}
.resources-list a{
    display:inline-block;padding:.4rem 1rem;border-radius:var(--radius);
    background:linear-gradient(135deg,var(--clr-gradient-1),var(--clr-gradient-2));
    color:#fff;font-weight:500;
    transition:background var(--duration) ease;
}
.resources-list a:hover{background:linear-gradient(135deg,var(--clr-gradient-2),var(--clr-gradient-1));}

/* =====================================================
   FAQ
   ===================================================== */
details{background:var(--clr-surface);border-radius:var(--radius);padding:1.2rem;margin-bottom:1rem;box-shadow:var(--shadow-light),var(--shadow-dark);}
summary{cursor:pointer;font-weight:600;}

/* =====================================================
   BLOG
   ===================================================== */
.blog-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--gap);}
.blog-grid .card-content a{
    display:inline-block;margin-top:1rem;color:var(--clr-primary);font-weight:600;
}
.blog-grid .card-content a:hover{color:var(--clr-secondary);}

/* =====================================================
   PARTNERS
   ===================================================== */
.partners-logos{
    display:flex;flex-wrap:wrap;justify-content:center;gap:2rem;align-items:center;
}
.partners-logos img{
    filter:grayscale(100%);opacity:.6;transition:opacity var(--duration) ease,filter var(--duration) ease;
    height:80px;width:auto;
}
.partners-logos img:hover{filter:none;opacity:1;}

/* =====================================================
   CONTACT
   ===================================================== */
.contact-form{
    max-width:600px;margin-inline:auto;
    display:grid;gap:1rem;
}
.field{display:flex;flex-direction:column;}
.field label{font-weight:500;margin-bottom:.4rem;}
.field input,.field textarea{
    padding:1rem;border-radius:var(--radius);
    border:1px solid var(--clr-border);
    background:var(--clr-surface);
    font-family:var(--font-body);
}
.field input:focus,.field textarea:focus{outline:2px solid var(--clr-primary);}

/* =====================================================
   FOOTER
   ===================================================== */
.footer{
    background:var(--clr-heading);
    color:#f8f8f8;
    padding-block:3rem 1rem;
}
.footer-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
    gap:var(--gap);
    margin-bottom:2rem;
}
.footer a{color:#f8f8f8;}
.footer a:hover{text-decoration:underline;}
.footer-copy{text-align:center;font-size:.9rem;}

/* Social text links */
.footer-col ul li{margin-bottom:.4rem;}

/* =====================================================
   SUCCESS PAGE
   ===================================================== */
.success-page{
    min-height:100vh;
    display:flex;justify-content:center;align-items:center;
    background:linear-gradient(135deg,var(--clr-gradient-1),var(--clr-gradient-2));
    color:#fff;text-align:center;
}
.success-page h1{color:#fff;}

/* =====================================================
   LEGAL PAGES
   ===================================================== */
.legal-page{padding-top:100px;}

/* =====================================================
   PARTICLE ANIMATION
   ===================================================== */
@keyframes float{
    0%{transform:translateY(0) translateX(0);}
    50%{transform:translateY(-30px) translateX(15px);}
    100%{transform:translateY(0) translateX(0);}
}
.particle-bg{
    position:absolute;inset:0;overflow:hidden;z-index:-1;
}
.particle-bg span{
    position:absolute;display:block;
    width:6px;height:6px;border-radius:50%;
    background:rgba(255,255,255,0.6);
    box-shadow:0 0 8px rgba(255,255,255,0.8);
    animation:float calc(6s + (var(--i) * .3s)) ease-in-out infinite;
}
.particle-bg span:nth-child(odd){background:rgba(255,255,255,0.3);}

/* =====================================================
   MEDIA QUERIES
   ===================================================== */
@media(max-width:480px){
    .hero-content{padding:4rem 0;}
    .stats .stats-grid{grid-template-columns:repeat(2,1fr);}
    .burger{margin-left:auto;}
}
img{
    object-fit: cover;
}

/* =====================================================
   END
   ===================================================== */