/* =========================================================
   Archivo : ./style.css
   Tema    : FYA – Consultoría Financiera en Argentina
   Fuente  : Oswald (headers) & Nunito (body)
   Diseño  : Neomorfismo + Asimetría + Analog Colors + Morph
   ========================================================= */

/* ------------------ 1. VARIABLES DE TEMA ------------------ */
:root{
    /* Paleta Analog (azules turquesa) */
    --color-primary:#0077b6;
    --color-secondary:#0096c7;
    --color-accent:#00b4d8;
    --color-bg:#f1f5f9;
    --color-surface:#e9edf1;
    --color-text:#333333;
    --color-dark:#222222;
    --color-light:#ffffff;
    --shadow-light: 8px 8px 16px rgba(0,0,0,0.1);
    --shadow-dark: -8px -8px 16px rgba(255,255,255,0.7);

    /* Tipografías */
    --ff-heading:'Oswald', sans-serif;
    --ff-body:'Nunito', sans-serif;

    /* Neomorphism */
    --neo: var(--shadow-light), var(--shadow-dark);

    /* Radius y Duraciones */
    --radius:12px;
    --transition:.35s cubic-bezier(.4,0,.2,1);
}

/* ------------------ 2. RESET COMPLEMENTARIO ------------------ */
*,
*::before,
*::after{ box-sizing:border-box; }

body{
    margin:0;
    font-family:var(--ff-body);
    font-size:1rem;
    line-height:1.6;
    color:var(--color-text);
    background:var(--color-bg);
    overflow-x:hidden;
}

img{ max-width:100%; display:block; }

/* ------------------ 3. ESTRUCTURA GENERAL ------------------ */
.container{
    width:90%;
    max-width:1200px;
    margin-inline:auto;
}

.section-title{
    font-family:var(--ff-heading);
    font-size:clamp(1.8rem,3vw,2.5rem);
    text-align:center;
    color:var(--color-dark);
    margin-bottom:1.5rem;
    text-shadow:1px 1px 3px rgba(0,0,0,.25);
}

/* Asymmetric balance helper */
.asymmetric{
    position:relative;
}
.asymmetric::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(135deg,rgba(255,255,255,.0) 0%,rgba(0,0,0,.05) 100%);
    transform:skewY(-2deg);
    z-index:-1;
}

/* Parallax backgrounds */
.parallax{
    background-attachment:fixed;
    background-size:cover;
    background-repeat:no-repeat;
    background-position:center;
    color:var(--color-light);
}
.parallax .section-title{ color:#ffffff; }

/* ------------------ 4. HEADER & NAVEGACIÓN ------------------ */
.header{
    position:sticky;
    top:0;
    width:100%;
    background:var(--color-surface);
    box-shadow:var(--neo);
    z-index:1000;
}
.header .container{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:.75rem 0;
}
.brand{
    font-family:var(--ff-heading);
    font-size:1.5rem;
    color:var(--color-primary);
    text-decoration:none;
}
.nav-desktop ul{
    display:flex;
    gap:1.2rem;
    list-style:none;
    margin:0;
    padding:0;
}
.nav-desktop a{
    text-decoration:none;
    font-weight:600;
    color:var(--color-text);
    position:relative;
}
.nav-desktop a::after{
    content:"";
    position:absolute;
    left:0; bottom:-4px;
    width:0%;
    height:2px;
    background:var(--color-accent);
    transition:width var(--transition);
}
.nav-desktop a:hover::after{ width:100%; }

.burger{
    display:none;
    flex-direction:column;
    gap:4px;
    background:none;
    border:none;
    cursor:pointer;
}
.burger span{
    width:24px; height:3px;
    background:var(--color-text);
    border-radius:2px;
}
/* Mobile nav */
.nav-mobile{
    background:var(--color-surface);
    position:absolute;
    top:100%; right:0;
    width:240px;
    box-shadow:var(--neo);
    padding:1rem 1.2rem;
}
.nav-mobile ul{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:.8rem;
}
.nav-mobile a{ color:var(--color-text); text-decoration:none; }

/* ------------------ 5. HERO ------------------ */
.hero-section{
    min-height:60vh;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    background-size:cover;
    background-repeat:no-repeat;
    position:relative;
}
.hero-title{
    font-family:var(--ff-heading);
    font-size:clamp(2.2rem,5vw,3.5rem);
    color:#ffffff;
    margin-bottom:.75rem;
}
.hero-text{
    color:#ffffff;
    max-width:720px;
    margin-inline:auto 2rem;
    margin-bottom:1.5rem;
}

/* ------------------ 6. BOTONES GLOBALES ------------------ */
.btn,
button,
input[type='submit']{
    --btn-bg:var(--color-primary);
    --btn-shadow:0 8px 16px rgba(0,0,0,.15);
    display:inline-block;
    padding:.75rem 1.6rem;
    font-family:var(--ff-heading);
    font-size:1rem;
    color:#ffffff;
    background:var(--btn-bg);
    border:none;
    border-radius:var(--radius);
    cursor:pointer;
    transition:all var(--transition);
    box-shadow:var(--btn-shadow);
    text-decoration:none;
    text-align:center;
}
.btn-primary{ --btn-bg:var(--color-accent); }
button:hover,
.btn:hover,
input[type='submit']:hover{
    transform:translateY(-2px);
    box-shadow:0 12px 24px rgba(0,0,0,.2);
}
button:active,
.btn:active,
input[type='submit']:active{
    transform:translateY(0);
}

/* ------------------ 7. TARJETAS, CARDS & FLEX HELPERS ------------------ */
.cards-wrapper{
    display:grid;
    gap:1.5rem;
}
@media(min-width:768px){
    .cards-wrapper{
        grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    }
}
.card{
    background:var(--color-surface);
    box-shadow:var(--neo);
    border-radius:var(--radius);
    padding:1.5rem;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    transition:transform var(--transition);
}
.card:hover{ transform:translateY(-6px); }
.card-image{
    width:100%;
    height:180px;
    overflow:hidden;
    border-radius:var(--radius);
    margin-bottom:1rem;
    display:flex;
    align-items:center;
    justify-content:center;
}
.card-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    margin:0 auto;
}
.card-content p{ margin-bottom:.5rem; }

.image-left{
    flex-direction:row;
    text-align:left;
}
.image-left .card-image{
    width:300px; height:200px;
    margin-right:1.5rem;
}
@media(max-width:768px){
    .image-left{
        flex-direction:column;
        text-align:center;
    }
    .image-left .card-image{
        width:100%; margin:0 0 1rem 0;
    }
}

/* ------------------ 8. ACCORDION ------------------ */
.accordion-item{
    margin-bottom:.8rem;
    border-radius:var(--radius);
    box-shadow:var(--neo);
    overflow:hidden;
}
.accordion-header{
    width:100%;
    background:var(--color-primary);
    color:#ffffff;
    border:none;
    padding:.8rem 1.2rem;
    text-align:left;
    font-family:var(--ff-heading);
    cursor:pointer;
}
.accordion-body{
    background:var(--color-surface);
    padding:1rem 1.2rem;
    display:none;
}
.accordion-item.active .accordion-body{ display:block; }

/* ------------------ 9. STATISTICS ------------------ */
.stats-grid{
    display:grid;
    gap:1.5rem;
}
@media(min-width:600px){
    .stats-grid{
        grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
    }
}
.stat-number{
    font-family:var(--ff-heading);
    font-size:2.5rem;
    color:var(--color-primary);
    margin:0 0 .5rem;
}
progress{
    width:100%;
    height:6px;
    border:none;
    border-radius:3px;
    background:var(--color-bg);
}
progress::-webkit-progress-value{
    background:var(--color-accent);
    border-radius:3px;
}

/* ------------------ 10. FORMULARIO DE CONTACTO ------------------ */
.contact-form{
    max-width:700px;
    margin-inline:auto;
    background:var(--color-surface);
    padding:2rem;
    box-shadow:var(--neo);
    border-radius:var(--radius);
}
.form-group{
    margin-bottom:1.2rem;
    display:flex;
    flex-direction:column;
}
label{
    font-weight:600;
    margin-bottom:.4rem;
}
input[type='text'],
input[type='email'],
textarea{
    font-family:var(--ff-body);
    padding:.75rem 1rem;
    border:2px solid transparent;
    border-radius:var(--radius);
    background:var(--color-bg);
    box-shadow:inset var(--shadow-light);
    transition:border var(--transition);
}
input:focus,
textarea:focus{
    outline:none;
    border-color:var(--color-accent);
}

/* ------------------ 11. FOOTER ------------------ */
.footer{
    background:var(--color-surface);
    box-shadow:var(--neo);
    padding:2.5rem 0 1.5rem;
    margin-top:4rem;
    color:var(--color-text);
}
.footer-grid{
    display:grid;
    gap:1.5rem;
}
.footer-col h3{
    font-family:var(--ff-heading);
    font-size:1.2rem;
    margin-bottom:.8rem;
}
.footer-col ul{ list-style:none; padding:0; margin:0; }
.footer-col a{
    text-decoration:none;
    color:var(--color-text);
    transition:color var(--transition);
}
.footer-col a:hover{ color:var(--color-accent); }
.social-links a{
    margin-right:.6rem;
}
.social-links a:hover{ text-decoration:underline; }
#year{ font-weight:700; }

/* ------------------ 12. READ MORE LINKS ------------------ */
.read-more{
    font-weight:700;
    color:var(--color-secondary);
    text-decoration:none;
    position:relative;
}
.read-more::after{
    content:'';
    position:absolute;
    bottom:-2px; left:0;
    width:100%; height:2px;
    background:var(--color-secondary);
    transform:scaleX(0);
    transform-origin:left;
    transition:transform var(--transition);
}
.read-more:hover::after{ transform:scaleX(1); }

/* ------------------ 13. PÁGINAS ESPECIALES ------------------ */
.success-page{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg,var(--color-primary),var(--color-accent));
    color:#ffffff;
    text-align:center;
}
.legal-page{ padding-top:100px; }

/* ------------------ 14. UTILIDADES ------------------ */
.neomorph{ box-shadow:var(--neo); }
.text-center{ text-align:center; }
.is-two-thirds{ max-width:66%; }

/* ------------------ 15. ANIMACIONES MORPHING ------------------ */
@keyframes morph{
    0%  { border-radius:40% 60% 65% 35% / 60% 40% 60% 40%; }
    50% { border-radius:60% 40% 30% 70% / 50% 50% 30% 70%; }
    100%{ border-radius:40% 60% 65% 35% / 60% 40% 60% 40%; }
}
.morph{
    animation:morph 12s ease-in-out infinite;
}

/* ------------------ 16. MEDIA QUERIES ------------------ */
@media(max-width:992px){
    .nav-desktop{ display:none; }
    .burger{ display:flex; }
}
@media(min-width:993px){
    .nav-mobile{ display:none!important; }
}