/* =========================================================
   style.css  |  YPF Argentina – Diseño Neomórfico + Biomórfico
   ========================================================= */

/* ---------- 1. VARIABLES DE TEMA (TETRADA) -------------- */
:root{
  /* Paleta base – Tetrada (azul, naranja, verde, púrpura) */
  --clr-primary: #0066FF;         /* Azul vibrante (YPF)   */
  --clr-secondary: #FF6B00;       /* Naranja intenso       */
  --clr-tertiary: #00B578;        /* Verde brillante       */
  --clr-accent: #7A28FF;          /* Púrpura eléctrico     */

  /* Variaciones oscuras para hover/focus */
  --clr-primary-dark: #0054cc;
  --clr-secondary-dark: #d95a00;
  --clr-tertiary-dark: #00955f;
  --clr-accent-dark: #611fd1;

  /* Tonos neutros */
  --clr-bg: #F2F4F8;
  --clr-surface: #FFFFFF;
  --clr-text: #333333;
  --clr-text-light: #FFFFFF;

  /* Sombra Neomórfica */
  --shadow-inset: inset 6px 6px 12px rgba(0,0,0,0.07),
                  inset -6px -6px 12px rgba(255,255,255,0.6);
  --shadow-out:   6px 6px 12px rgba(0,0,0,0.07),
                  -6px -6px 12px rgba(255,255,255,0.6);

  /* Transiciones */
  --transition-fast: all .25s ease;
  --transition-slow: all .45s ease;
}

/* ---------- 2. RESET/BASE --------------------------------*/
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:"Merriweather",serif;
  color:var(--clr-text);
  background:var(--clr-bg);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5,h6{
  font-family:"Montserrat",sans-serif;
  color:var(--clr-text);
  text-shadow:1px 1px 3px rgba(0,0,0,0.15);
}
section{padding:4rem 0;}
a{text-decoration:none;transition:var(--transition-fast);}
a:hover{opacity:.85;}
img{max-width:100%;display:block;}

/* ---------- 3. COMPONENTES GLOBALES ----------------------*/
/* 3.1 Botones */
.btn,
button,
input[type="submit"]{
  font-family:"Montserrat",sans-serif;
  padding:.8rem 2.5rem;
  border:none;
  border-radius:50px;
  cursor:pointer;
  font-weight:600;
  letter-spacing:.5px;
  transition:var(--transition-fast);
  display:inline-block;
  position:relative;
  color:var(--clr-text-light);
  background:var(--clr-primary);
  box-shadow:var(--shadow-out);
}
.btn:hover,
button:hover,
input[type="submit"]:hover{
  background:var(--clr-primary-dark);
  box-shadow:0 8px 16px rgba(0,0,0,.15);
  transform:translateY(-2px);
}
.btn:active{transform:translateY(0);}

/* Variantes */
.btn-secondary{background:var(--clr-secondary);}
.btn-secondary:hover{background:var(--clr-secondary-dark);}
.btn-tertiary{background:var(--clr-tertiary);}
.btn-tertiary:hover{background:var(--clr-tertiary-dark);}
.btn-accent{background:var(--clr-accent);}
.btn-accent:hover{background:var(--clr-accent-dark);}

/* 3.2 Cards centradas */
.card,
.item,
.testimonial,
.team-member,
.product-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  background:var(--clr-surface);
  border-radius:20px;
  box-shadow:var(--shadow-out);
  transition:var(--transition-fast);
}
.card:hover{box-shadow:0 10px 24px rgba(0,0,0,0.12);}
.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;
}

/* 3.3 Timeline */
.timeline{border-left:4px solid var(--clr-primary);position:relative;}
.timeline-item{position:relative;padding-left:1.5rem;}
.timeline-item::before{
  content:'';
  position:absolute;
  left:-12px;
  top:4px;
  width:16px;
  height:16px;
  background:var(--clr-surface);
  border:3px solid var(--clr-primary);
  border-radius:50%;
}

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

/* 3.5 Hover efecto “read-more” */
.link-readmore{
  color:var(--clr-accent);font-weight:600;position:relative;
}
.link-readmore::after{
  content:'';position:absolute;left:0;bottom:-2px;
  width:0;height:2px;background:var(--clr-accent);
  transition:var(--transition-fast);
}
.link-readmore:hover::after{width:100%;}

/* ---------- 4. SECCIONES ESPECÍFICAS --------------------*/
/* 4.1 HERO */
#hero{color:var(--clr-text-light);text-align:center;}
#hero h1,#hero p{color:var(--clr-text-light);}
#hero .btn{background:var(--clr-secondary);}
#hero .btn:hover{background:var(--clr-secondary-dark);}

/* 4.2 WORKSHOPS & CAROUSELES */
.carousel-item{padding:1rem;}
.carousel-control-prev-icon,
.carousel-control-next-icon{filter:invert(100%);}

/* 4.3 COMUNIDAD */
#comunidad{background-size:cover;background-repeat:no-repeat;color:#FFF;}
#comunidad .text-shadow{text-shadow:2px 2px 6px rgba(0,0,0,0.75);}

/* 4.4 CONTACTO */
#contacto .form-control{
  border-radius:12px;
  padding:.75rem 1rem;
  border:none;
  box-shadow:var(--shadow-inset);
  transition:var(--transition-fast);
}
#contacto .form-control:focus{
  box-shadow:0 0 0 3px rgba(0,102,255,.25);
}

/* ---------- 5. FOOTER ------------------------------------*/
footer{font-family:"Montserrat",sans-serif;}
footer a{color:#DDD;transition:var(--transition-fast);}
footer a:hover{color:#FFF;text-decoration:underline;}
/* Social links estilo texto */
footer a:not(:last-child){margin-right:1rem;}

/* ---------- 6. PÁGINAS SECUNDARIAS -----------------------*/
.success-wrapper{min-height:100vh;display:flex;justify-content:center;align-items:center;}
.legal-page{padding-top:100px;}  /* privacy.html & terms.html */

/* ---------- 7. MICROANIMACIONES --------------------------*/
@keyframes float {
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-6px);}
}
.floaty{animation:float 4s ease-in-out infinite;}

@keyframes fadeInUp{
  from{opacity:0;transform:translateY(20px);}
  to{opacity:1;transform:translateY(0);}
}
.fade-in-up{animation:fadeInUp .8s ease forwards;opacity:0;}

/* ---------- 8. UTILIDADES -------------------------------*/
.text-shadow{ text-shadow:1px 1px 3px rgba(0,0,0,0.4); }
.rounded-4{border-radius:1.5rem !important;}
.bg-primary-gradient{
  background:linear-gradient(135deg,var(--clr-primary) 0%,var(--clr-secondary) 100%);
  color:#FFF;
}
.bg-soft{
  background:var(--clr-surface);
  box-shadow:var(--shadow-inset);
  border-radius:20px;
  padding:1.5rem;
}
.cursor-pointer{cursor:pointer;}
/* Parallax overlay (para texto legible) */
.overlay-dark-50{
  background:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5));
}
/* Ocultar scrollbar en carouseles opcional */
.no-scrollbar::-webkit-scrollbar{display:none;}

/* ---------- 9. RESPONSIVE --------------------------------*/
@media (max-width:991.98px){
  h1{font-size:2rem;}
  #hero{padding:6rem 2rem;}
}
/* ========================================================= */