/* ========================================================
   FUTURISTIC DESIGN SYSTEM : “CURVED GRID” THEME
   Compatible with Bulma 0.9.x
   Author: —
   ======================================================== */

/* ----------  1. ROOT THEME VARIABLES  ---------- */
:root{
  /* Tetrad Palette */
  --clr-primary:      #00e0ff;
  --clr-primary-dark: #00b2cc;

  --clr-secondary:      #ff007c;
  --clr-secondary-dark: #cc0064;

  --clr-tertiary:      #ffb400;
  --clr-tertiary-dark: #cc9000;

  --clr-quaternary:      #4bff00;
  --clr-quaternary-dark: #3acc00;

  /* Neutral & Surfaces */
  --clr-bg:          #0b0e1a;
  --clr-bg-light:    #14192b;
  --clr-surface:     rgba(255,255,255,.06);
  --clr-glass:       rgba(255,255,255,.12);
  --clr-text:        #e5e7ef;
  --clr-muted:       #9fa4c4;
  --clr-border:      rgba(255,255,255,.12);

  /* Typography */
  --ff-heading:"Space Grotesk",sans-serif;
  --ff-body:"DM Sans",sans-serif;

  /* Generic */
  --radius: .75rem;
  --shadow: 0 8px 24px rgba(0,0,0,.35);
  --ease-elastic:cubic-bezier(.645,-.055,.265,1.55);
  --duration:.6s;
}

/* ----------  2. RESET / GLOBAL  ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--ff-body);
  background:var(--clr-bg);
  color:var(--clr-text);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5,h6{
  font-family:var(--ff-heading);
  font-weight:700;
  line-height:1.15;
  color:var(--clr-text);
}
a{color:var(--clr-primary);transition:color .2s ease;}
a:hover{color:var(--clr-secondary);}
.img-fluid{max-width:100%;height:auto;display:block;}

/* ----------  3. UTILITIES  ---------- */
.flex-center{display:flex;justify-content:center;align-items:center;}
.text-center{text-align:center;}
.grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2rem;}
.pt-100{padding-top:100px;}          /* used on privacy / terms */
.parallax{
  background-attachment:fixed;
  background-size:cover;
  background-repeat:no-repeat;
  background-position:center;
}
.glass{
  backdrop-filter:blur(16px) saturate(120%);
  background:var(--clr-glass);
  border:1px solid var(--clr-border);
  border-radius:var(--radius);
}

/* ----------  4. BUTTONS (GLOBAL)  ---------- */
.btn,
button,
input[type='submit']{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding:.8rem 2.2rem;
  font:600 1rem/1 var(--ff-heading);
  color:#fff;
  background:linear-gradient(135deg,var(--clr-primary) 0%,var(--clr-secondary) 100%);
  border:none;
  border-radius:var(--radius);
  cursor:pointer;
  transition:transform .3s var(--ease-elastic),box-shadow .3s;
  box-shadow:0 0 0 rgba(0,0,0,0);
}
.btn:hover,
button:hover,
input[type='submit']:hover{
  transform:translateY(-3px);
  box-shadow:0 10px 20px rgba(0,0,0,.4);
}
.btn:active{transform:translateY(0);}
.button.is-primary{background:var(--clr-primary);color:#fff;} /* Bulma override */

/* Read-more links */
.read-more{
  position:relative;
  font-weight:600;
  color:var(--clr-primary);
  padding-right:1.2rem;
}
.read-more::after{
  content:'→';
  position:absolute;
  right:0;
  transition:transform .3s;
}
.read-more:hover::after{transform:translateX(4px);}

/* ----------  5. NAVBAR  ---------- */
.navbar{
  backdrop-filter:blur(14px) saturate(140%);
  background:rgba(10,12,25,.6);
  border-bottom:1px solid var(--clr-border);
}
.navbar-item,
.navbar-link{font-weight:600;}
.navbar-burger span{background:var(--clr-primary);}

/* ----------  6. HERO  ---------- */
#hero{
  position:relative;
  min-height:100vh;
  padding:6rem 1rem 4rem;
  color:#fff;
}
#hero::before{
 
}
#hero .hero-body{position:relative;z-index:1;}
#hero h1{font-size:clamp(2.5rem,5vw,4.5rem);}
#hero p{font-size:clamp(1rem,2vw,1.25rem);max-width:680px;margin:1rem auto 2rem;}

/* ----------  7. SECTIONS  ---------- */
section{padding:4rem 1.2rem;}
section.section-dark{background:var(--clr-bg-light);}
section .title{margin-bottom:2rem;}

/* Innovation & Community backgrounds */
#innovacion,#comunidad{
  background-size:cover;
  background-repeat:no-repeat;
  background-position:center;
}
#comunidad{color:#fff;}
#comunidad::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(rgba(0,0,0,.4),rgba(0,0,0,.4));
  z-index:0;
}

/* ----------  8. CARDS & LIST ITEMS  ---------- */
.card,
.item,
.testimonial,
.team-member,
.product-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  background:var(--clr-surface);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
  transition:transform .3s var(--ease-elastic);
}
.card:hover,
.item:hover,
.product-card:hover{transform:translateY(-6px);}
.card-image,
.img-container{
  width:100%;
  height:220px;
  overflow:hidden;
  position:relative;
}
.card-image img,
.img-container img{
  width:100%;
  height:100%;
  object-fit:cover;
  margin:0 auto;
}
.card-content{padding:1.5rem;}

/* ----------  9. EVENTS TABLE  ---------- */
.table-wrapper{overflow-x:auto;}
table{
  background:var(--clr-surface);
  border-radius:var(--radius);
  overflow:hidden;
}
th,td{color:var(--clr-text);}
thead{background:var(--clr-primary-dark);}
tbody tr:nth-child(even){background:rgba(255,255,255,.04);}
tbody tr:hover{background:rgba(0,224,255,.08);}

/* ---------- 10. FAQ  ---------- */
#faq ul{list-style:none;padding:0;max-width:840px;margin:0 auto;}
#faq li{
  background:var(--clr-surface);
  border-left:4px solid var(--clr-primary);
  margin-bottom:1rem;
  padding:1rem 1.25rem;
  border-radius:var(--radius);
}

/* ---------- 11. CONTACT FORM  ---------- */
#contacto form.box{
  background:var(--clr-surface);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
textarea,input[type="text"],input[type="email"]{
  background:var(--clr-bg-light);
  border:1px solid var(--clr-border);
  color:var(--clr-text);
}
input::placeholder,textarea::placeholder{color:var(--clr-muted);}

/* ---------- 12. FOOTER  ---------- */
footer.footer{
  background:var(--clr-bg-light);
  color:var(--clr-muted);
  padding:3rem 1rem;
  font-size:.9rem;
}
footer a{color:var(--clr-primary);margin:0 .25rem;font-weight:600;}
footer a:hover{color:var(--clr-secondary);}
.social-links{
  display:inline-flex;
  gap:1rem;
  margin-top:.5rem;
}
.social-links a{
  position:relative;
  font-weight:700;
  text-transform:uppercase;
  font-size:.8rem;
}
.social-links a::after{
  content:'';
  position:absolute;
  left:0;
  bottom:-2px;
  width:100%;
  height:2px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .3s var(--ease-elastic);
}
.social-links a:hover::after{transform:scaleX(1);}

/* ---------- 13. PAGE-SPECIFIC  ---------- */
/* Success page */
body.success{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}
/* Privacy / Terms pages */
body.static-page{padding-top:100px;}

/* ---------- 14. ANIMATIONS  ---------- */
@keyframes float{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-10px);}
}
@keyframes bounceIn{
  0%{opacity:0;transform:scale(.3);}
  50%{transform:scale(1.05);}
  70%{transform:scale(.9);}
  100%{opacity:1;transform:scale(1);}
}
[data-sr]{opacity:1;}
[data-sr].is-revealed{animation:bounceIn var(--duration) var(--ease-elastic) forwards;}

/* ---------- 15. CURVED GRID DECORATION  ---------- */
.curved-grid{
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse at center,rgba(255,255,255,.08) 0%,transparent 70%);
  mask-image:radial-gradient(circle at center,rgba(0,0,0,.9) 20%,transparent 80%);
  pointer-events:none;
  z-index:-1;
}

/* ---------- 16. PLACEHOLDER CLASSES FOR THEME COLORS ---------- */
.bg-primary{background:var(--clr-primary)!important;color:#fff;}
.bg-secondary{background:var(--clr-secondary)!important;color:#fff;}
.bg-tertiary{background:var(--clr-tertiary)!important;color:#fff;}
.bg-quaternary{background:var(--clr-quaternary)!important;color:#000;}
.text-primary{color:var(--clr-primary)!important;}
.text-secondary{color:var(--clr-secondary)!important;}
.text-tertiary{color:var(--clr-tertiary)!important;}
.text-quaternary{color:var(--clr-quaternary)!important;}