/* =====================================================
   style.css  |  Tema: “Eco-Minimalismo Creativo”
   Tipografía: Archivo Black (headings) & Roboto (body)
   Framework  : TailwindCSS (utilities) + Custom Rules
   ===================================================== */

/* ----------  VARIABLES DE TEMA (TRIADA)  ---------- */
:root{
  --clr-primary: #1B5E20;        /* Verde Bosque */
  --clr-primary-dark:#104011;
  --clr-secondary:#FF8F00;       /* Naranja Amanecer */
  --clr-secondary-dark:#C56000;
  --clr-tertiary:#2979FF;        /* Azul Cielo */
  --clr-tertiary-dark:#0050CB;

  --clr-light:#FFFFFF;
  --clr-dark:#333333;

  --grad-primary:linear-gradient(135deg,var(--clr-primary) 0%,var(--clr-tertiary) 100%);
  --grad-overlay:linear-gradient(rgba(0,0,0,0.55),rgba(0,0,0,0.55));

  --radius:.5rem;
  --shadow-md:0 4px 10px rgba(0,0,0,.15);
  --shadow-lg:0 8px 20px rgba(0,0,0,.2);
  --transition:all .3s ease-in-out;

  --glass-bg:rgba(255,255,255,.15);
  --glass-backdrop:blur(10px);
}

/* ----------  RESETEO LIGERO  ---------- */
*,
*::before,
*::after{box-sizing:border-box;margin:0;padding:0;}

html{scroll-behavior:smooth;}
body{
  font-family:'Roboto',Arial,Helvetica,sans-serif;
  color:var(--clr-dark);
  line-height:1.6;
  background-color:#F5F8F4;
  -webkit-font-smoothing:antialiased;
}

/* ----------  TIPOGRAFÍA  ---------- */
h1,h2,h3,h4,h5,h6{
  font-family:'Archivo Black',Impact,sans-serif;
  letter-spacing:.5px;
  color:#222222;
  text-shadow:1px 1px 3px rgba(0,0,0,0.25);
}

/* ----------  UTILIDADES GENERALES  ---------- */
.bg-cover{background-size:cover;background-repeat:no-repeat;background-position:center;}
.parallax{background-attachment:fixed;}
.glass{
  background:var(--glass-bg);
  backdrop-filter:var(--glass-backdrop);
  border-radius:var(--radius);
}
.read-more{
  color:var(--clr-tertiary);
  font-weight:600;
  position:relative;
  transition:var(--transition);
}
.read-more::after{
  content:'';
  position:absolute;
  left:0;bottom:-2px;
  width:0;
  height:2px;
  background:var(--clr-tertiary);
  transition:var(--transition);
}
.read-more:hover{color:var(--clr-tertiary-dark);}
.read-more:hover::after{width:100%;}

/* ----------  BOTONES GLOBALES  ---------- */
.btn,
button,
input[type='submit']{
  display:inline-block;
  background:var(--clr-secondary);
  color:var(--clr-light);
  padding:.75rem 2rem;
  border:none;
  border-radius:9999px;
  font-weight:700;
  cursor:pointer;
  box-shadow:var(--shadow-md);
  transition:var(--transition);
}
.btn-primary{background:var(--clr-secondary);}
.btn-secondary{background:var(--clr-primary);}
.btn-accent{background:var(--clr-tertiary);}
.btn:hover,
button:hover,
input[type='submit']:hover{
  transform:translateY(-2px) scale(1.02);
  box-shadow:var(--shadow-lg);
  background-color:var(--clr-secondary-dark);
}
.btn:active,
button:active,
input[type='submit']:active{transform:scale(.98);}

/* ----------  NAV / HEADER  ---------- */
header{
  backdrop-filter:blur(6px);
}
#burger span{
  transition:var(--transition);
}
#burger:hover span{background:var(--clr-secondary);}
nav a{transition:color .2s;}
nav a:hover{color:var(--clr-secondary);}

/* ----------  HERO  ---------- */
#hero{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:var(--clr-light);
}
#hero h1,
#hero p{color:var(--clr-light);}
#hero .btn{background:var(--clr-secondary);}
#hero .btn:hover{background:var(--clr-secondary-dark);}

/* ----------  SECCIONES GENERALES  ---------- */
section{padding-top:4rem;padding-bottom:4rem;}
section h2{text-align:center;margin-bottom:3rem;}

/* ----------  CARD UNIVERSAL  ---------- */
.card,
.item,
.testimonial,
.team-member,
.product-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:1rem;
  background:var(--clr-light);
  border-radius:var(--radius);
  padding:1.5rem;
  box-shadow:var(--shadow-md);
  transition:var(--transition);
}
.card:hover,
.item:hover,
.team-member:hover,
.product-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-4px);}
.card-image,
.image-container{width:100%;height:180px;overflow:hidden;border-radius:var(--radius);}
.card-image img,
.image-container img{width:100%;height:100%;object-fit:cover;display:block;margin:0 auto;}

/* ----------  SLIDER PERSONALIZADO  ---------- */
#mediaSlider{will-change:transform;}
#prevSlide,#nextSlide{
  opacity:.85;
  transition:var(--transition);
}
#prevSlide:hover,#nextSlide:hover{opacity:1;transform:scale(1.1);}

/* ----------  PROGRESS BARS  ---------- */
progress,
.progress{
  appearance:none;
  width:100%;
  height:1rem;
  border-radius:var(--radius);
  overflow:hidden;
  background:#E0E0E0;
}
progress::-webkit-progress-bar{background:#E0E0E0;}
progress::-webkit-progress-value{background:var(--clr-primary);}
.progress-bar{
  height:100%;
  background:var(--grad-primary);
  border-radius:var(--radius);
  transition:width 1.2s cubic-bezier(.34,1.56,.64,1);
}

/* ----------  LISTA DE PREMIOS / ACCOLADES  ---------- */
.accolade-box{
  background:var(--grad-primary);
  color:var(--clr-light);
  padding:2rem;
  border-radius:var(--radius);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}

/* ----------  FOOTER  ---------- */
footer{
  color:var(--clr-light);
}
footer a{
  color:#C8E6C9;
  transition:var(--transition);
}
footer a:hover{color:var(--clr-secondary);}
footer ul{list-style:none;}
.social-link{
  display:inline-block;
  margin-right:1rem;
  font-weight:600;
}

/* ----------  SUCCES PAGE  ---------- */
body.success-page{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--grad-primary);
  color:var(--clr-light);
}

/* ----------  PÁGINAS PRIVACY & TERMS  ---------- */
body.legal-page{padding-top:100px;}

/* ----------  ANIMACIONES “UPRUGIAS”  ---------- */
@keyframes bounce-in{
  0%{opacity:0;transform:scale(.8);}
  60%{opacity:.95;transform:scale(1.05);}
  100%{opacity:1;transform:scale(1);}
}
@keyframes float{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-6px);}
}
.bounce-in{animation:bounce-in .8s cubic-bezier(.34,1.56,.64,1) both;}
.float{animation:float 3.5s ease-in-out infinite;}

/* ----------  COOKIES POPUP  ---------- */
#cookiePopup{
  font-size:.875rem;
}
#acceptCookie{
  cursor:pointer;
}

/* ----------  GLOSARIO DE CLASES ESPECIALES  ---------- */
.shadow-hover:hover{box-shadow:var(--shadow-lg);}
.grid-gap{display:grid;gap:2rem;}
.flex-center{display:flex;align-items:center;justify-content:center;}
.text-shadow{ text-shadow:1px 1px 2px rgba(0,0,0,.4);}
@media (max-width: 768px) {
  #nav, #burger{
    display: none;
  }

}