/* -------------------------------------------------
  FY&A | style.css
  Diseño Futurista + Biormorfo · Monocromático
------------------------------------------------- */

/* ---------- VARIABLES DE TEMA ---------- */
:root{
  /* Paleta Monocromática */
  --primary-900:#0a0a0a;
  --primary-700:#222222;
  --primary-500:#333333;
  --primary-300:#555555;
  --primary-100:#f5f5f5;

  /* Acento Neón Sutil */
  --accent-500:#00e6ff;

  /* Tipografías */
  --font-head:'Poppins', sans-serif;
  --font-body:'Work Sans', sans-serif;

  /* Radius & Shadows */
  --radius-m:12px;
  --radius-full:50%;
  --shadow-3d:0 10px 25px rgba(0,0,0,.25);

  /* Transiciones */
  --fast:.3s ease;
}

/* ---------- RESET & BASE ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--primary-100);
  background:var(--primary-900);
  line-height:1.6;
  overflow-x:hidden;
}
h1,h2,h3,h4,h5,h6{
  font-family:var(--font-head);
  color:var(--primary-100);
  font-weight:600;
  text-shadow:1px 1px 3px rgba(0,0,0,.5);
}

/* Asegura contraste texto ↔ fondo */
.section{padding:3.5rem 1.5rem;}
.has-background-light{background:var(--primary-100);color:var(--primary-700);}
.has-background-light h2{color:var(--primary-700);text-shadow:none;}

/* ---------- NAVBAR ---------- */
.navbar{
  background:rgba(0,0,0,.6);
  backdrop-filter:blur(10px);
}
.navbar-item{font-weight:500;}
.navbar-burger span{background:var(--accent-500);}

/* ---------- BOTONES GLOBALES ---------- */
.button,
.btn,
input[type='submit']{
  font-family:var(--font-head);
  border:none;
  border-radius:var(--radius-m);
  padding:.75rem 2rem;
  background:linear-gradient(135deg,var(--primary-500),var(--primary-700));
  color:#fff;
  cursor:pointer;
  transition:transform var(--fast),box-shadow var(--fast),background var(--fast);
}
.button.is-dark{background:var(--accent-500);color:var(--primary-900);}
.button.is-white.is-outlined{border:2px solid #fff;background:transparent;}
.button:hover,
.btn:hover,
input[type='submit']:hover{
  transform:translateY(-3px) scale(1.03);
  box-shadow:0 8px 20px rgba(0,0,0,.4);
}

/* ---------- HERO ---------- */
#hero{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:#fff;
}
#hero .title,#hero .subtitle{color:#fff;}
#hero::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(45deg,transparent 0%,rgba(0,0,0,.6) 100%);
  z-index:-1;
}

/* ---------- TIMELINE ---------- */
.timeline .timeline-marker{
  box-shadow:0 0 0 4px var(--accent-500);
  background:var(--primary-700);
}
.timeline .timeline-content{
  background:rgba(255,255,255,.07);
  backdrop-filter:blur(8px);
  border-radius:var(--radius-m);
  padding:1rem 1.5rem;
}

/* ---------- TARJETAS / CARD ---------- */
.card{
  display:flex;
  flex-direction:column;
  align-items:center;
  background:rgba(255,255,255,.05);
  border-radius:var(--radius-m);
  overflow:hidden;
  box-shadow:var(--shadow-3d);
  transition:transform var(--fast),box-shadow var(--fast);
}
.card:hover{transform:translateY(-6px) rotateX(4deg);box-shadow:0 15px 35px rgba(0,0,0,.45);}
.card-image,
.image-container{
  width:100%;
  height:260px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}
.card-image img,
.image-container img{
  width:100%;
  height:100%;
  object-fit:cover;
  margin:0 auto;
}
.card-content{padding:1.5rem;text-align:center;color:var(--primary-100);}

/* ---------- ESTADÍSTICAS ---------- */
#stats .column{font-size:1.1rem;color:var(--primary-700);}
#stats strong{font-size:3rem;color:var(--primary-900);}

/* ---------- WORKSHOP / STORIES / TESTIMONIAL ---------- */
blockquote{
  position:relative;
  padding-left:2rem;
  color:var(--primary-700);
}
blockquote::before{
  content:'“';
  position:absolute;
  left:0;top:-10px;
  font-size:4rem;
  color:var(--accent-500);
}

/* ---------- PARALLAX BACKGROUND ---------- */
.parallax,
[style*="background-attachment:fixed"]{
  background-size:cover!important;
  background-repeat:no-repeat!important;
  background-attachment:fixed!important;
}

/* ---------- EFECTOS 3D & ANIMACIONES ---------- */
@keyframes fadeInUp{
  from{opacity:0;transform:translate3d(0,40px,0);}
  to{opacity:1;transform:none;}
}
[data-animate]{opacity:0;transform:translate3d(0,40px,0);}
[data-animate].is-visible{animation:fadeInUp .8s forwards;}

/* ---------- ENLACES “Leer más” ---------- */
.read-more{
  color:var(--accent-500);
  font-weight:600;
  position:relative;
}
.read-more::after{
  content:'';
  position:absolute;
  right:-1.2rem;top:50%;
  width:8px;height:8px;
  border-top:2px solid var(--accent-500);
  border-right:2px solid var(--accent-500);
  transform:translateY(-50%) rotate(45deg);
  transition:transform var(--fast);
}
.read-more:hover::after{transform:translateY(-50%) rotate(90deg);}

/* ---------- FORM CONTACT ---------- */
form.box{
  border-radius:var(--radius-m);
  box-shadow:var(--shadow-3d);
}
textarea,input{color:var(--primary-700);}
label{font-weight:500;color:var(--primary-700);}

/* ---------- COOKIES POPUP ---------- */
#cookie-popup{
  font-size:.9rem;
}
#accept-cookie{
  margin-left:1rem;
}

/* ---------- FOOTER ---------- */
footer{
  font-size:.9rem;
}
footer a{color:var(--accent-500);transition:color var(--fast);}
footer a:hover{color:#fff;text-decoration:underline;}

/* ---------- PAGE ESPECÍFICAS ---------- */
.success-page{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  background:var(--primary-900);
  color:var(--primary-100);
}
.legal-page{padding-top:100px;}

/* ---------- UTILIDADES ---------- */
.text-center{text-align:center;}
.mt-2{margin-top:2rem;}
.hidden{display:none!important;}
.glass{
  background:rgba(255,255,255,.05);
  backdrop-filter:blur(12px);
  border-radius:var(--radius-m);
}
/* ---------- MEDIA QUERIES ---------- */
@media (max-width:768px){
  .navbar-menu{background:rgba(0,0,0,.9);}
  h1{font-size:1.8rem;}
  h2{font-size:1.5rem;}
  #stats strong{font-size:2.2rem;}
}