/* ──────────────────────────────────────────
   style.css  |  YPF Argentina
   Diseño Brutalista + Asimetría Balanceada
   Complementa Tailwind 3.x
────────────────────────────────────────── */

/* 1. VARIABLES DE TEMA
–––––––––––––––––––––––––––––––––––––––––– */
:root{
  /* Neutrales */
  --clr-bg:#f6f6f6;
  --clr-surface:#ffffff;
  --clr-border:#d4d4d4;
  --clr-text:#222222;

  /* Principales */
  --clr-primary:#111111;
  --clr-primary-dark:#000000;
  --clr-accent:#0066ff;
  --clr-accent-dark:#0047b3;

  /* Gradientes */
  --grad-dark:linear-gradient(rgba(0,0,0,.65),rgba(0,0,0,.65));
  --grad-light:linear-gradient(rgba(255,255,255,.85),rgba(255,255,255,.85));

  /* Tipografía */
  --ff-heading:"Montserrat",sans-serif;
  --ff-body:"Merriweather",serif;

  /* 3D & Efectos */
  --btn-depth:0 6px 0 0 var(--clr-primary-dark);
  --card-depth:0 10px 30px -10px rgba(0,0,0,.35);
}

/* 2. RESETEO BÁSICO
–––––––––––––––––––––––––––––––––––––––––– */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--clr-bg);
  color:var(--clr-text);
  font-family:var(--ff-body);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

/* 3. TEXTO & TIPOGRAFÍA
–––––––––––––––––––––––––––––––––––––––––– */
h1,h2,h3,h4,h5,h6{
  font-family:var(--ff-heading);
  font-weight:800;
  line-height:1.2;
  text-wrap:balance;
  text-shadow:1px 1px 3px rgba(0,0,0,.15);
}
h2{text-align:center;margin-bottom:1.75rem;}
p{margin:0 0 1.25rem 0;}

/* 4. BOTONES GLOBALES
–––––––––––––––––––––––––––––––––––––––––– */
button,
.btn,
input[type="submit"]{
  display:inline-block;
  padding:.9rem 2.5rem;
  font-family:var(--ff-heading);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.05em;
  background:var(--clr-primary);
  color:#fff;
  border:none;
  border-radius:.5rem;
  cursor:pointer;
  box-shadow:var(--btn-depth);
  transition:transform .2s cubic-bezier(.2,.6,.2,1),box-shadow .2s;
}
button:hover,
.btn:hover,
input[type="submit"]:hover{
  transform:translateY(-4px) rotateX(10deg);
  box-shadow:0 10px 0 0 var(--clr-primary-dark);
}
button:active,
.btn:active,
input[type="submit"]:active{
  transform:translateY(0);
  box-shadow:var(--btn-depth);
}

/* 5. ENLACES
–––––––––––––––––––––––––––––––––––––––––– */
a{color:var(--clr-accent);text-decoration:none;transition:color .2s;}
a:hover{text-decoration:underline;color:var(--clr-accent-dark);}
.link-more{font-weight:600;text-decoration:underline;color:var(--clr-primary);}

/* 6. SECCIÓN HERO
–––––––––––––––––––––––––––––––––––––––––– */
#hero{
  position:relative;
  color:#ffffff; /* CONTRASTE ALTO */
  text-align:center;
  perspective:1200px;
}
#hero .btn{background:#ffffff;color:var(--clr-primary);}
#hero .btn:hover{color:var(--clr-primary-dark);}

/* 7. CARTAS GENERALES
–––––––––––––––––––––––––––––––––––––––––– */
.card,
.item,
.testimonial,
.team-member,
.product-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:1rem;
  background:var(--clr-surface);
  border:2px solid var(--clr-border);
  border-radius:.75rem;
  box-shadow:var(--card-depth);
  overflow:hidden;
}
.card-image,
.image-container{
  width:100%;
  height:250px;
  overflow:hidden;
  position:relative;
}
.card-image img,
.image-container img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  margin:0 auto;
}

/* 8. MODALES
–––––––––––––––––––––––––––––––––––––––––– */
.modal{
  backdrop-filter:blur(4px);
  animation:fadeIn .35s ease-out;
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* 9. PARALLAX & GRADIENT OVERLAYS
–––––––––––––––––––––––––––––––––––––––––– */
.parallax{
  background-attachment:fixed;
  background-size:cover;
  background-repeat:no-repeat;
}
.overlay-dark{background:var(--grad-dark);}
.overlay-light{background:var(--grad-light);}

/* 10. BARRA DE NAVEGACIÓN
–––––––––––––––––––––––––––––––––––––––––– */
header{
  transition:background .3s,box-shadow .3s;
}
header.sticky{background:rgba(255,255,255,.85);box-shadow:0 2px 6px rgba(0,0,0,.1);}

/* 11. ANIMACIONES 3D
–––––––––––––––––––––––––––––––––––––––––– */
@keyframes floatY{
  0%,100%{transform:translateY(0) rotateX(0deg);}
  50%{transform:translateY(-10px) rotateX(4deg);}
}
.float{animation:floatY 6s ease-in-out infinite;}

@keyframes tilt{
  0%{transform:rotateY(-5deg);}
  50%{transform:rotateY(5deg);}
  100%{transform:rotateY(-5deg);}
}
.tilt{animation:tilt 8s ease-in-out infinite;}

/* 12. PRIVACY & TERMS OFFSET
–––––––––––––––––––––––––––––––––––––––––– */
.page-legal{padding-top:100px;}

/* 13. SUCCESS PAGE
–––––––––––––––––––––––––––––––––––––––––– */
.success-wrapper{
  min-height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  flex-direction:column;
  gap:2rem;
  background:var(--clr-bg);
}

/* 14. FOOTER
–––––––––––––––––––––––––––––––––––––––––– */
footer{
  background:var(--clr-primary);
  color:#eee;
}
footer a{color:#eee;}
footer a:hover{color:#fff;text-decoration:underline;}
.social-link{font-weight:700;letter-spacing:.03em;}

/* 15. COOKIES POPUP
–––––––––––––––––––––––––––––––––––––––––– */
#cookiePopup{
  font-family:var(--ff-body);
}
#cookiePopup a{color:#fff;text-decoration:underline;}
#cookiePopup button:hover{background:#e5e5e5;}

/* 16. UTILIDADES Y COMPLEMENTOS
–––––––––––––––––––––––––––––––––––––––––– */
.shadow-deep{box-shadow:0 20px 40px -10px rgba(0,0,0,.35);}
.glasmor{background:rgba(255,255,255,.25);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.35);}
.z-top{z-index:9999;}