/* =======================================================
   YPF Argentina • style.css
   Diseño: Neomorfismo + Eco-Minimalismo
   Tipografía: Inter (titulares) & IBM Plex Sans (texto)
   ======================================================= */

/* ---------- Variables de Tema ---------- */
:root{
    /* Paleta Brillante y Ecológica */
    --color-primary:#00C853;          /* Verde vibrante */
    --color-primary-dark:#009624;
    --color-secondary:#FF9100;        /* Naranja energía */
    --color-secondary-dark:#C56200;
    --color-accent:#2979FF;           /* Azul enfocado */
    --color-bg:#F8FFF8;               /* Fondo eco-ligero */
    --color-surface:#FFFFFF;
    --color-text:#333333;
    --color-heading:#111111;
    --color-muted:#666666;

    /* Neomorfismo (claridad) */
    --shadow-light: -8px -8px 16px rgba(255,255,255,0.7);
    --shadow-dark:  8px  8px 16px rgba(0,0,0,0.1);

    /* Tipografía */
    --font-heading:'Inter',sans-serif;
    --font-body:'IBM Plex Sans',sans-serif;

    /* Radio y Transiciones */
    --radius: 16px;
    --transition: all .3s ease-in-out;
}

/* ---------- Reset adicional / Box-Sizing ---------- */
*,*::before,*::after{box-sizing:border-box;}

/* ---------- Elementos Globales ---------- */
body{
    margin:0;
    font-family:var(--font-body);
    color:var(--color-text);
    background:var(--color-bg);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
}

h1,h2,h3,h4,h5,h6{
    font-family:var(--font-heading);
    color:var(--color-heading);
    margin:0 0 .5rem;
    text-align:center;
    text-shadow:1px 1px 3px rgba(0,0,0,0.05);
}

p{margin:0 0 1rem;}

.container{
    width:90%;
    max-width:1200px;
    margin:0 auto;
}

/* Utility */
.text-center{text-align:center;}
.is-two-thirds{max-width:66.666%;margin-left:auto;margin-right:auto;}

/* ---------- Header ---------- */
.main-header{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    background:var(--color-surface);
    box-shadow:var(--shadow-light),var(--shadow-dark);
    z-index:1000;
    padding:.5rem 0;
}
.logo{font-size:1.5rem;font-weight:700;}
.nav-desktop ul{list-style:none;padding:0;margin:0;display:flex;gap:1rem;}
.nav-desktop a{
    color:var(--color-text);
    text-decoration:none;
    font-weight:500;
    position:relative;
    transition:var(--transition);
}
.nav-desktop a::after{
    content:"";
    position:absolute;
    left:0;bottom:-2px;
    width:0;height:2px;
    background:var(--color-primary);
    transition:width .25s ease;
}
.nav-desktop a:hover::after{width:100%;}
.burger{
    display:none;
    flex-direction:column;
    gap:4px;
    background:none;border:none;
    cursor:pointer;
}
.burger span{
    display:block;
    width:24px;height:2px;
    background:var(--color-text);
    transition:var(--transition);
}

/* ---------- Hero ---------- */
.hero-section{
    position:relative;
    background-size:cover;
    background-repeat:no-repeat;
    background-position:center;
    color:#FFFFFF;
    text-align:center;
    padding:140px 1rem 100px;
}
.hero-section::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.5));
}
.hero-section > .container{
    position:relative;
    z-index:1;
}
.hero-section h2{font-size:2.5rem;margin-bottom:1rem;}
.hero-section p{max-width:600px;margin:0 auto 2rem;color:#FFFFFF;}
/* ---------- Botones ---------- */
.btn,
button,
input[type='submit']{
    font-family:var(--font-heading);
    background:var(--color-primary);
    color:#FFFFFF;
    border:none;
    padding:.75rem 2.5rem;
    border-radius:var(--radius);
    cursor:pointer;
    box-shadow:var(--shadow-light),var(--shadow-dark);
    transition:var(--transition);
    text-decoration:none;
    display:inline-block;
}
.btn:hover,
button:hover,
input[type='submit']:hover{
    background:var(--color-primary-dark);
    transform:translateY(-2px);
}
.btn:active,
button:active,
input[type='submit']:active{
    transform:translateY(0);
}

/* ---------- Section Titles ---------- */
.section-title{
    font-size:2rem;
    margin-bottom:2rem;
    position:relative;
}
.section-title::after{
    content:"";
    width:60px;height:4px;
    background:var(--color-secondary);
    display:block;
    margin:1rem auto 0;
    border-radius:2px;
}

/* ---------- Generic Sections ---------- */
section{padding:4rem 0;}

/* ---------- Cards ---------- */
.card{
    background:var(--color-surface);
    border-radius:var(--radius);
    box-shadow:var(--shadow-light),var(--shadow-dark);
    overflow:hidden;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    transition:var(--transition);
    margin:1rem 0;
}
.card:hover{transform:translateY(-4px);}
.card-image{
    width:100%;
    height:200px;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
}
.card-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    margin:0 auto;
}
.card-content{padding:1rem 1.5rem;}

/* ---------- Gallery ---------- */
.gallery{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:1.5rem;
}
.image-container{
    width:100%;
    height:250px;
    overflow:hidden;
    border-radius:var(--radius);
    box-shadow:var(--shadow-light),var(--shadow-dark);
}
.image-container img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

/* ---------- Carousel (simple horizontal scroll) ---------- */
.carousel{
    display:flex;
    gap:1.5rem;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    padding-bottom:1rem;
}
.carousel .card{min-width:300px;scroll-snap-align:center;}

/* ---------- Switcher ---------- */
.switch{position:relative;display:inline-block;width:48px;height:24px;margin-right:.5rem;}
.switch input{opacity:0;width:0;height:0;}
.slider{
    position:absolute;cursor:pointer;
    top:0;left:0;right:0;bottom:0;
    background:#ccc;border-radius:24px;
    transition:var(--transition);
}
.slider:before{
    content:"";
    position:absolute;height:18px;width:18px;
    left:3px;bottom:3px;
    background:var(--color-surface);
    border-radius:50%;
    transition:var(--transition);
}
input:checked + .slider{background:var(--color-accent);}
input:checked + .slider:before{transform:translateX(24px);}

/* ---------- External Links Section ---------- */
.external-links{
    list-style:none;
    padding:0;
    margin:0;
    display:flex;
    flex-direction:column;
    gap:.5rem;
}
.external-links a{
    color:var(--color-accent);
    text-decoration:none;
    font-weight:500;
}
.external-links a:hover{text-decoration:underline;}

/* ---------- Formulario de Contacto ---------- */
.contact-section form{
    display:grid;
    gap:1rem;
}
.form-group{
    display:flex;
    flex-direction:column;
}
.form-group input,
.form-group textarea{
    padding:.75rem 1rem;
    border-radius:var(--radius);
    border:none;
    box-shadow:inset var(--shadow-light),inset var(--shadow-dark);
    background:var(--color-surface);
    transition:var(--transition);
}
.form-group input:focus,
.form-group textarea:focus{outline:none;box-shadow:0 0 0 3px rgba(41,121,255,.3);}

/* ---------- Footer ---------- */
.main-footer{
    background:var(--color-surface);
    text-align:center;
    padding:2rem 1rem;
    box-shadow:var(--shadow-light),var(--shadow-dark);
}
.main-footer nav{margin-bottom:1rem;}
.main-footer a{
    color:var(--color-secondary-dark);
    text-decoration:none;
    margin:0 .25rem;
    transition:var(--transition);
}
.main-footer a:hover{color:var(--color-secondary);text-decoration:underline;}

/* Social Text Links */
.social-list a{font-weight:600;}

/* ---------- Success Page ---------- */
.success-page{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    text-align:center;
    padding:2rem;
}

/* ---------- Privacy & Terms Pages ---------- */
.legal-page{padding-top:100px;padding-bottom:3rem;}
.legal-page h2{text-align:left;}
.legal-page p{max-width:800px;margin-left:auto;margin-right:auto;}

/* ---------- Hero Texto blanco global ---------- */
.hero-section h1,
.hero-section h2,
.hero-section p{color:#FFFFFF;}

/* ---------- Read More Links ---------- */
.read-more{
    color:var(--color-accent);
    font-weight:600;
    text-decoration:none;
    position:relative;
    padding-right:1.25rem;
}
.read-more::after{
    content:"→";
    position:absolute;
    right:0;top:0;
    transition:transform .2s;
}
.read-more:hover::after{transform:translateX(4px);}

/* ---------- Responsive ---------- */
@media(max-width:768px){
    .nav-desktop{display:none;}
    .burger{display:flex;}
    section{padding:3rem 0;}
    .hero-section{padding:120px 1rem 80px;}
}

/* ---------- Scroll-Dependent Animations Placeholder ---------- */
/* AOS maneja la visibilidad, pero añadimos suave transición */
[data-aos]{opacity:0;transition:opacity .6s ease,transform .6s ease;}
[data-aos].aos-animate{opacity:1;}

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

/* ---------- Utilidades ---------- */
.shadow-neo{box-shadow:var(--shadow-light),var(--shadow-dark);}
.bg-gradient{
    background:linear-gradient(135deg,var(--color-primary)0%,var(--color-secondary)100%);
    color:#FFFFFF;
}
.burger{
    display: none;
}