/* ======================================================================
   style.css  |  Futuristic Eco-Minimal Theme (Tetrad Palette)
   TailwindCSS is already loaded – these styles extend & enhance it.
   ====================================================================== */

/* ---------------------------  CSS VARIABLES  -------------------------- */
:root{
  /* Tetrad palette */
  --clr-primary: #07b4f5;  /* Green (Sustainability)            */
  --clr-primary-d: #802115;  /* Darker primary                     */
  --clr-secondary: #0ea5e9;  /* Cyan-Blue (Technology)             */
  --clr-secondary-d:#0369a1;
  --clr-accent-1:  #f97316;  /* Orange (Energy / Momentum)         */
  --clr-accent-1-d:#c2410c;
  --clr-accent-2:  #a855f7;  /* Purple (Innovación)                */
  --clr-accent-2-d:#7e22ce;
  --clr-bg-light:  #f9fafb;  /* Very light background              */
  --clr-bg-dark:   #111827;  /* Dark background                    */

  --radius-sm: 8px;
  --radius-lg: 24px;

  --font-head: "Oswald", sans-serif;
  --font-body: "Nunito", sans-serif;

  --transition-fast: .25s cubic-bezier(.4,0,.2,1);
  --transition-slow: .6s cubic-bezier(.4,0,.2,1);
}

/* ---------------------------  GLOBAL RESET  -------------------------- */
*,*::before,*::after{box-sizing:border-box;}
body{
  font-family:var(--font-body);
  line-height:1.7;
  color:#333;
  background-color:var(--clr-bg-light);
}
h1,h2,h3,h4,h5,h6{
  font-family:var(--font-head);
  font-weight:600;
  color:#222;
  text-shadow:1px 1px 3px rgba(0,0,0,.15);
}
section{position:relative;}
img{max-width:100%;height:auto;display:block;}
a{color:var(--clr-secondary);transition:color var(--transition-fast);}
a:hover{color:var(--clr-secondary-d);text-decoration:underline;}
.read-more{font-weight:700;position:relative;padding-right:1.5rem;}
.read-more::after{content:"›";position:absolute;right:.25rem;top:0;transition:transform var(--transition-fast);}
.read-more:hover::after{transform:translateX(.25rem);}

/* -------------------------  BUTTON COMPONENT  ------------------------ */
.btn,
button,
input[type='submit']{
  display:inline-block;
  padding:.75rem 2rem;
  border-radius:9999px;
  font-weight:700;
  color:#fff;
  background:var(--clr-primary);
  transition:background var(--transition-fast),transform var(--transition-fast),box-shadow var(--transition-fast);
  box-shadow:0 6px 18px -6px rgba(34,197,94,.45);
}
.btn:hover,
button:hover,
input[type='submit']:hover{
  background:var(--clr-primary-d);
  transform:translateY(-2px);
  box-shadow:0 8px 24px -8px rgba(34,197,94,.6);
}
.btn--secondary{background:var(--clr-secondary);}
.btn--secondary:hover{background:var(--clr-secondary-d);}
.btn--accent{background:var(--clr-accent-1);}
.btn--accent:hover{background:var(--clr-accent-1-d);}

/* ---------------------------  HEADER  -------------------------------- */
header{transition:background var(--transition-fast),box-shadow var(--transition-fast);}
header.scrolled{background:rgba(255,255,255,.9);box-shadow:0 2px 8px rgba(0,0,0,.05);}

/* ----------------------------  HERO  --------------------------------- */
.hero-section{color:#fff;text-align:center;}
.hero-section h1,
.hero-section p{color:#fff;}
.hero-section::before{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,.55));
  z-index:0;
}
.hero-section>*{position:relative;z-index:2;}

/* --------------------------  PARALLAX  ------------------------------- */
.parallax{
  background-size:cover;
  background-repeat:no-repeat;
  background-attachment:fixed;
}
@supports (-webkit-touch-callout: none){ /* disable fixed on iOS */
  .parallax{background-attachment:scroll;}
}

/* ---------------------------  CARD  ---------------------------------- */
.card{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  border-radius:var(--radius-sm);
  background:#fff;
  overflow:hidden;
}
.card-image,
.image-container{width:100%;height:200px;overflow:hidden;}
.card-image img,
.image-container img{
  width:100%;height:100%;object-fit:cover;margin:0 auto;
}
.card-content{padding:1.5rem;flex:1;}
/* Special glassmorphism cards (events) */
.card.glassy{
  background:rgba(255,255,255,.15);
  backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.2);
  color:#fff;
}

/* ---------------------------  GRID HELPERS --------------------------- */
.grid-responsive{display:grid;gap:1.5rem;}
@media(min-width:768px){.grid-responsive{grid-template-columns:repeat(2,1fr);}}
@media(min-width:1024px){.grid-responsive--3{grid-template-columns:repeat(3,1fr);}}

/* ----------------------  NON-LINEAR ANIMATIONS  ---------------------- */
@keyframes floatY{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-12px);}
}
@keyframes floatX{
  0%,100%{transform:translateX(0);}
  50%{transform:translateX(8px);}
}
.animate-floatY{animation:floatY 6s ease-in-out infinite;}
.animate-floatX{animation:floatX 5s ease-in-out infinite alternate;}

/* --------------------------  SUCCESS PAGE  --------------------------- */
.page-success{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  text-align:center;
  background:var(--clr-bg-light);
}

/* --------------------------  LEGAL PAGES  ---------------------------- */
.page-legal{padding-top:100px;}

/* -----------------------  SOCIAL TEXT LINKS  ------------------------ */
.social-link{font-weight:600;}
.social-link:hover{color:var(--clr-accent-2);text-decoration:none;}

/* ----------------------------  FOOTER  ------------------------------- */
footer{
  background:var(--clr-bg-dark);
  color:#e5e7eb;
}
footer h3{color:#fff;text-shadow:none;margin-bottom:1rem;}
footer a{color:var(--clr-accent-1);}
footer a:hover{color:var(--clr-accent-1-d);}

/* -------------------------  COOKIES POPUP  --------------------------- */
#cookiePopup{
  font-size:.875rem;
}
#cookiePopup button{
  background:var(--clr-accent-2);
}
#cookiePopup button:hover{
  background:var(--clr-accent-2-d);
}

/* ----------------------  READABILITY UTILITIES ----------------------- */
.text-shadow{
  text-shadow:1px 1px 2px rgba(0,0,0,.25);
}
.bg-gradient-dark{
  background:linear-gradient(rgba(0,0,0,.6),rgba(0,0,0,.6));
}

/* ----------------------  HOVER SCALE UTILITY ------------------------ */
.hover-scale{transition:transform var(--transition-fast);}
.hover-scale:hover{transform:scale(1.05);}

/* ---------------------------  NAV DRAWER  --------------------------- */
#nav.hidden{display:none;}
@media(min-width:1024px){#nav.hidden{display:flex!important;}}

/* ---------------------------  MISC  ---------------------------------- */
::-webkit-scrollbar{width:8px;}
::-webkit-scrollbar-thumb{background:var(--clr-primary);border-radius:9999px;}