/* =======================================================
   Conecta Finanzas – style.css
   Diseño: “Creativo” + Block UI · Bootstrap 5
======================================================= */

/* ------------------------------- 
            Variables
--------------------------------*/
:root{
    /* Neutrals */
    --clr-bg: #f8f9fa;
    --clr-surface: #ffffff;
    --clr-dark: #222222;
    --clr-muted: #666666;

    /* Brand */
    --clr-primary: #4a6cf7;
    --clr-primary-dark: #3955c7;
    --clr-accent: #f7b84a;
    --clr-accent-dark: #d99d36;

    /* Gradients */
    --grad-primary: linear-gradient(135deg,#4a6cf7 0%,#3955c7 100%);
    --grad-accent: linear-gradient(135deg,#f7b84a 0%,#d99d36 100%);

    /* Shadows & Radius */
    --radius: .75rem;
    --shadow-sm: 0 2px 8px rgba(0,0,0,.05);
    --shadow-lg: 0 10px 30px rgba(0,0,0,.15);
}

/* ------------------------------- 
            Base
--------------------------------*/
html{scroll-behavior:smooth;}
body{
    font-family:'Lato',sans-serif;
    color:var(--clr-dark);
    background-color:var(--clr-bg);
    line-height:1.6;
}
h1,h2,h3,h4,h5,h6{
    font-family:'Roboto',sans-serif;
    font-weight:700;
    color:var(--clr-dark);
    line-height:1.2;
    margin-bottom:.75rem;
    text-align:center;
    text-shadow:1px 1px 3px rgba(0,0,0,.1);
}

/* Utility */
.text-shadow{ text-shadow:1px 1px 4px rgba(0,0,0,.6); }
.bg-gradient-primary{ background:var(--grad-primary) !important; }
.bg-gradient-accent{ background:var(--grad-accent) !important; }
.parallax{ background-attachment:fixed; background-size:cover; background-repeat:no-repeat; }

.container-wide{max-width:1440px;margin-inline:auto;}
.flex-center{display:flex;align-items:center;justify-content:center;}
.grid-center{display:grid;place-items:center;}
.glass{
    background:rgba(255,255,255,.1);
    backdrop-filter:blur(10px);
    box-shadow:var(--shadow-lg);
}

/* ------------------------------- 
            Navbar
--------------------------------*/
.navbar-brand{font-weight:700;}
.nav-link{
    font-weight:600;
    color:var(--clr-dark);
    transition:color .3s ease;
}
.nav-link:hover,
.nav-link:focus{color:var(--clr-primary);}

/* ------------------------------- 
            Hero
--------------------------------*/
#hero{
    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
    padding:4rem 1rem;
    color:#ffffff;
}
#hero h1{color:#ffffff;}
#hero p{color:#eaeaea;}
#hero .btn{box-shadow:var(--shadow-lg);}

/* ------------------------------- 
            Buttons & Inputs
--------------------------------*/
.btn,
button,
input[type='submit']{
    font-weight:600;
    border:none;
    border-radius:var(--radius);
    padding:.75rem 2.25rem;
    transition:all .35s cubic-bezier(.25,.46,.45,1.4);
}
.btn-primary{
    background:var(--grad-primary);
    color:#fff;
}
.btn-primary:hover,
.btn-primary:focus{
    transform:translateY(-3px) scale(1.02);
    background:var(--clr-primary-dark);
    color:#fff;
}
.btn-success{
    background:var(--grad-accent);
    color:#fff;
}
.btn-success:hover{background:var(--clr-accent-dark);}
.btn-warning{
    background:#ffbf00;
    color:#222;
}
.btn-warning:hover{background:#d9a400;color:#222;}

.form-control{
    border-radius:var(--radius);
    border:1px solid #ced4da;
}
.form-control:focus{
    border-color:var(--clr-primary);
    box-shadow:0 0 0 .25rem rgba(74,108,247,.25);
}

/* ------------------------------- 
            Card Components
--------------------------------*/
.card{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    border:none;
    border-radius:var(--radius);
    background-color:var(--clr-surface);
    box-shadow:var(--shadow-sm);
    transition:transform .35s cubic-bezier(.25,.46,.45,1.4);
}
.card:hover{
    transform:translateY(-6px);
    box-shadow:var(--shadow-lg);
}
.card-image,
.image-container{
    width:100%;
    height:250px;
    overflow:hidden;
    border-top-left-radius:var(--radius);
    border-top-right-radius:var(--radius);
}
.card-image img,
.image-container img{
    width:100%;
    height:100%;
    object-fit:cover;
    margin:0 auto;
}

/* Press Card override to allow varied height images */
#press .card-image{height:300px;}

/* ------------------------------- 
            Sections
--------------------------------*/
section{padding:4rem 0;}
.bg-light{background-color:#f1f1f3 !important;}
section.bg-white{background-color:#ffffff;}

#services .card-content,
#pricing .card-content{padding:2rem;}

#calendar .gallery img{
    border-radius:var(--radius);
    box-shadow:var(--shadow-sm);
    transition:transform .3s ease;
}
#calendar .gallery img:hover{transform:scale(1.05);}

/* Mission text width */
#about p{max-width:800px;margin-inline:auto;}

/* ------------------------------- 
            Pricing
--------------------------------*/
#pricing .card{
    border:2px solid transparent;
    transition:border-color .3s ease;
}
#pricing .card:hover{border-color:var(--clr-primary);}

/* ------------------------------- 
            Accolades
--------------------------------*/
#accolades img{
    border-radius:50%;
    box-shadow:var(--shadow-sm);
    transition:transform .4s cubic-bezier(.175,.885,.32,1.275);
}
#accolades img:hover{transform:scale(1.15);}

/* ------------------------------- 
            Cookie Popup
--------------------------------*/
#cookiePopup a{color:var(--clr-accent);}
#cookiePopup button{
    padding:.35rem 1.25rem;
    font-size:.875rem;
}

/* ------------------------------- 
            Read More Links
--------------------------------*/
a.read-more{
    color:var(--clr-primary);
    font-weight:600;
    position:relative;
    transition:color .3s ease;
}
a.read-more::after{
    content:'';
    position:absolute;
    left:0; bottom:-3px;
    width:100%;
    height:2px;
    background:var(--clr-primary);
    transform:scaleX(0);
    transform-origin:left;
    transition:transform .35s cubic-bezier(.25,.46,.45,1.4);
}
a.read-more:hover{color:var(--clr-primary-dark);}
a.read-more:hover::after{transform:scaleX(1);}

/* ------------------------------- 
            Footer
--------------------------------*/
footer{
    background:#111;
    color:#ccc;
    font-size:.9rem;
}
footer a{
    color:#ccc;
    transition:color .3s ease;
}
footer a:hover{color:#fff;}

/* Social link pseudo-icons */
footer a::before{
    content:'';
    display:inline-block;
    width:.6rem;
    height:.6rem;
    border-radius:50%;
    background:var(--clr-primary);
    margin-right:.4rem;
}

/* ------------------------------- 
            Success Page
--------------------------------*/
.page-success{
    min-height:100vh;
}
.page-success .wrapper{
    height:100%;
    display:grid;
    place-items:center;
    text-align:center;
}

/* ------------------------------- 
            Legal Pages
--------------------------------*/
.legal-page{
    padding-top:100px;
}

/* ------------------------------- 
        Keyframes & Animations
--------------------------------*/
@keyframes spring-in{
    0%{opacity:0;transform:translateY(50px);}
    80%{opacity:1;transform:translateY(-10px);}
    100%{transform:translateY(0);}
}
[data-aos]{animation:spring-in .8s cubic-bezier(.175,.885,.32,1.275) both;}

/* ------------------------------- 
        Responsive Tweaks
--------------------------------*/
@media (max-width: 767.98px){
    h1{font-size:2rem;}
    #hero{padding:3rem 1rem;}
    section{padding:3rem 0;}
    .card-image{height:200px;}
}