/* =====================================================
   YPF Argentina – style.css
   Diseño: Minimalista + Dinámicos Gradientes (Tetrada)
   Tipografía: Raleway (titulares) / Open Sans (texto)
   ===================================================== */

/* ---------------- GOOGLE FONTS ---------------------- */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600&family=Raleway:wght@400;600;700&display=swap');

/* ---------------- ROOT VARIABLES -------------------- */
:root{
    /* Tetradic palette */
    --clr-primary:#004c97;          /* Azul profundo */
    --clr-secondary:#ff6b00;        /* Naranja vibrante */
    --clr-tertiary:#8ac926;         /* Verde lima */
    --clr-quaternary:#ec407a;       /* Rosa energético */

    /* Derived shades */
    --clr-primary-dark:#002b5c;
    --clr-secondary-dark:#cc5600;
    --clr-gray-100:#f8f9fa;
    --clr-gray-700:#495057;
    --clr-gray-900:#212529;

    /* Gradients */
    --grad-main:linear-gradient(135deg,var(--clr-primary),var(--clr-quaternary));
    --grad-alt:linear-gradient(135deg,var(--clr-secondary),var(--clr-tertiary));

    /* Typography */
    --ff-heading:'Raleway',sans-serif;
    --ff-body:'Open Sans',sans-serif;

    /* Radius & Transition */
    --radius-lg:1rem;
    --transition:all .3s ease-in-out;
}

/* ---------------- RESET / GENERAL ------------------- */
*,
*::before,
*::after{box-sizing:border-box;margin:0;padding:0;}
body{
    font-family:var(--ff-body);
    color:var(--clr-gray-900);
    background-color:var(--clr-gray-100);
    line-height:1.6;
    scroll-behavior:smooth;
}
h1,h2,h3,h4,h5,h6{
    font-family:var(--ff-heading);
    color:var(--clr-primary-dark);
    text-align:center;
    margin-bottom:1rem;
    text-shadow:1px 1px 3px rgba(0,0,0,.15);
}
section{padding:60px 0;}
a{color:var(--clr-primary);text-decoration:none;transition:var(--transition);}
a:hover,a:focus{color:var(--clr-secondary-dark);text-decoration:underline;}

/* ---------------- NAVBAR ---------------------------- */
.navbar{
    transition:background .4s ease-in-out;
    backdrop-filter:saturate(180%) blur(12px);
}
.navbar-dark .navbar-nav .nav-link{
    font-weight:600;
    letter-spacing:.5px;
}
.navbar-dark .navbar-nav .nav-link:hover{
    color:var(--clr-secondary);
}

/* ---------------- HERO ------------------------------ */
#hero{
    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
    color:#fff;
}
#hero h1,#hero p{color:#fff;}
#hero .btn{box-shadow:0 4px 12px rgba(0,0,0,.3);}

/* Parallax helper */
.parallax-bg{
    background-attachment:fixed;
    background-size:cover;
    background-repeat:no-repeat;
    position:relative;
}

/* ---------------- BUTTONS --------------------------- */
.btn,
button,
input[type='submit']{
    font-family:var(--ff-heading);
    font-weight:600;
    border:none;
    border-radius:50px;
    padding:.75rem 2rem;
    cursor:pointer;
    transition:var(--transition);
}
.btn-primary,
button.btn-primary,
input[type='submit'].btn-primary{
    background:var(--grad-alt);
    color:#fff;
}
.btn-outline-primary{
    border:2px solid var(--clr-primary);
    color:var(--clr-primary);
    background:transparent;
}
.btn:hover,.btn:focus{
    transform:translateY(-2px) scale(1.02);
    box-shadow:0 8px 20px rgba(0,0,0,.2);
}

/* ---------------- CARDS & FLEX CENTER --------------- */
.card,
.item,
.testimonial,
.team-member,
.product-card{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    border:none;
    border-radius:var(--radius-lg);
    overflow:hidden;
    background:#fff;
    box-shadow:0 2px 10px rgba(0,0,0,.05);
    transition:var(--transition);
}
.card:hover{
    transform:translateY(-6px);
    box-shadow:0 12px 24px rgba(0,0,0,.12);
}

/* Image containers */
.card-image,
.image-container{
    width:100%;
    height:260px;
    overflow:hidden;
}
.card-image img,
.image-container img{
    width:100%;
    height:100%;
    object-fit:cover;
    margin:0 auto;
}

/* ---------------- ACCORDIONS ------------------------ */
.accordion-button{
    font-weight:600;
    color:var(--clr-primary-dark);
}
.accordion-button:not(.collapsed){
    background:var(--grad-main);
    color:#fff;
}
.accordion-body{color:var(--clr-gray-700);}

/* ---------------- LINKS "LEER MÁS" ------------------ */
.link-more{
    display:inline-block;
    font-weight:600;
    margin-top:.5rem;
    color:var(--clr-secondary);
    position:relative;
}
.link-more::after{
    content:'';
    position:absolute;
    left:0;
    bottom:-2px;
    width:100%;
    height:2px;
    background:var(--clr-secondary);
    transform:scaleX(0);
    transform-origin:left;
    transition:var(--transition);
}
.link-more:hover::after{transform:scaleX(1);}

/* ---------------- COMMUNITY BADGE ------------------ */
.badge-community{
    background:var(--clr-tertiary);
    color:#fff;
    padding:.35rem .75rem;
    border-radius:20px;
    font-size:.75rem;
}

/* ---------------- FOOTER ---------------------------- */
footer{
    color:#fff;
}
footer a{
    color:#fff;
    font-weight:600;
    position:relative;
}
footer a:hover{
    color:var(--clr-tertiary);
}
footer a::after{
    content:'';
    position:absolute;
    width:100%;
    height:2px;
    background:var(--clr-tertiary);
    left:0;
    bottom:-4px;
    transform:scaleX(0);
    transition:var(--transition);
}
footer a:hover::after{transform:scaleX(1);}

/* Social "icon" text */
.social-link{
    font-weight:700;
    letter-spacing:.5px;
    padding:0 .25rem;
}

/* ---------------- GLASSMORPHISM --------------------- */
.glass{
    background:rgba(255,255,255,.15);
    backdrop-filter:blur(10px) saturate(180%);
    border:1px solid rgba(255,255,255,.25);
    border-radius:var(--radius-lg);
}

/* ---------------- MORPHING ANIMATION --------------- */
@keyframes blobMorph{
    0%  {border-radius:60% 40% 30% 70% / 60% 30% 70% 40%;}
    50% {border-radius:30% 60% 70% 40% / 50% 60% 30% 60%;}
    100%{border-radius:60% 40% 30% 70% / 60% 30% 70% 40%;}
}
.morph{
    animation:blobMorph 10s infinite ease-in-out;
}

/* Example usage */
.bg-blob{
    width:200px;
    height:200px;
    background:var(--grad-alt);
    position:absolute;
    z-index:-1;
    opacity:.2;
}

/* ---------------- PARALLAX UTIL --------------------- */
.parallax{
    background-attachment:fixed;
    background-size:cover;
    background-repeat:no-repeat;
}

/* ---------------- CONTACT FORM ---------------------- */
#contactForm .form-control{
    border-radius:var(--radius-lg);
    border:2px solid var(--clr-primary);
    transition:var(--transition);
}
#contactForm .form-control:focus{
    border-color:var(--clr-secondary);
    box-shadow:0 0 0 .25rem rgba(255,107,0,.25);
}
#contactForm .btn{
    width:100%;
}

/* ---------------- PAGES LAYOUT ---------------------- */
.page-padding-top{padding-top:100px;} /* privacy & terms */
#success-page{
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:column;
    text-align:center;
}

/* ---------------- COOKIE POPUP ---------------------- */
#cookiePopup{
    font-size:.875rem;
}
#cookiePopup button{
    padding:.5rem 1.5rem;
    border-radius:var(--radius-lg);
    background:var(--clr-secondary);
    color:#fff;
}

/* ---------------- UTILITIES ------------------------- */
.text-shadow{text-shadow:1px 1px 3px rgba(0,0,0,.6);}
.is-two-thirds{flex:0 0 66.666%;max-width:66.666%;}
/* Soft gradient backgrounds */
.bg-gradient-main{background:var(--grad-main);color:#fff;}
.bg-gradient-alt{background:var(--grad-alt);color:#fff;}