/* ================================
   VARIABLES
================================ */

:root{

--black:#0b0b0b;
--black-deep:#050505;

--green:#0b0b0b;
--green-soft:#44572e;

--pink:#EF7CD2;
--blue:#2EC5FF;

--white:#ffffff;

--glass:rgba(255,255,255,.04);
--border:rgba(255,255,255,.08);
--border-glass:rgba(255,255,255,.12);

}

/* ================================
RESET
================================ */

*{
box-sizing:border-box;
}

body{

margin:0;

font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial;

background:

radial-gradient(1200px 600px at 10% 10%,rgba(46,197,255,.12),transparent 55%),

radial-gradient(900px 500px at 90% 30%,rgba(239,124,210,.12),transparent 55%),

radial-gradient(900px 700px at 40% 90%,var(--green-soft),transparent 60%),

var(--green);

color:var(--white);

}

a{
color:inherit;
text-decoration:none;
}

.container{
max-width:1100px;
margin:0 auto;
padding:0 20px;
}

img{
max-width:100%;
display:block;
}

/* ================================
CYBER GRID BACKGROUND
================================ */

#cyber-grid{

position:fixed;

top:0;
left:0;

width:100%;
height:100%;

z-index:-2;

opacity:.25;

pointer-events:none;

}

/* ================================
NAVBAR
================================ */

.nav{

position:sticky;
top:0;

z-index:20;

background:var(--green-soft);

border-bottom:1px solid rgba(255,255,255,.12);

}


.nav-inner{

display:flex;
justify-content:space-between;
align-items:center;

padding:16px 0;

}

.brand{
  display:flex;
  align-items:center;
  height:65px;   /* aumenta el espacio del logo */
}

.brand-logo{
  height:100%;
  width:auto;
  transform:scale(1.6);   /* agranda el logo */
  transform-origin:left center;
}

.brand:hover .brand-logo{

filter:invert(1) drop-shadow(0 0 6px rgba(95, 221, 143, 0.5));

}

/* MENU */

.menu{

display:flex;
gap:16px;

}

.menu a{

font-family:'Space Grotesk', sans-serif;

font-weight:700;

font-size:16px;

letter-spacing:.6px;

text-transform:uppercase;

padding:12px 16px;

border-radius:10px;

color:white;

position:relative;

transition:.25s ease;

}

.menu a:hover{

color:var(--blue);

text-shadow:0 0 8px rgba(156, 219, 177, 0.6);

}

.menu a::after{

content:"";

position:absolute;

left:0;
bottom:-4px;

width:0;
height:2px;

background:linear-gradient(
90deg,
var(--pink),
var(--blue)
);

transition:.3s ease;

}

.menu a:hover::after{

width:100%;

}

/* ================================
HERO
================================ */

.hero{

position:relative;

padding:120px 0;

overflow:hidden;

}

/* glow background */

.hero::before{

content:"";

position:absolute;
inset:0;

background:

radial-gradient(
800px 420px at 20% 20%,
rgba(239,124,210,.18),
transparent 60%
),

radial-gradient(
800px 420px at 80% 30%,
rgba(46,197,255,.18),
transparent 60%
);

pointer-events:none;

}

.hero-grid{

position:relative;
z-index:1;

display:grid;

grid-template-columns:1.2fr .8fr;

gap:40px;

align-items:center;

}

@media(max-width:900px){

.hero-grid{
grid-template-columns:1fr;
}

}

/* kicker */

.kicker{

display:inline-flex;
align-items:center;
gap:10px;

padding:8px 14px;

border-radius:999px;

background:rgba(255,255,255,.05);

border:1px solid rgba(255,255,255,.12);

font-size:13px;

}

.dot{

width:8px;
height:8px;

border-radius:50%;

background:var(--blue);

box-shadow:0 0 18px rgba(46,197,255,.9);

}

/* title */

.hero-title{

font-size:clamp(38px,5vw,64px);

font-weight:900;

line-height:1.05;

margin:16px 0;

}

.glow-text{

background:linear-gradient(
135deg,
var(--green-soft),
var(--blue)
);

-webkit-background-clip:text;

background-clip:text;

color:transparent;

filter:drop-shadow(0 0 12px rgba(239,124,210,.35));

}

.subtitle{

max-width:52ch;

font-size:18px;

color:rgba(255,255,255,.82);

}

/* buttons */

.cta-row{

display:flex;

gap:14px;

margin-top:22px;

flex-wrap:wrap;

}

.btn{

padding:14px 20px;

border-radius:16px;

font-weight:800;

font-size:15px;

display:inline-flex;

align-items:center;

cursor:pointer;

}

.btn-primary{

background:linear-gradient(
135deg,
var(--blue),
var(--blue)
);

color:#000;

box-shadow:
0 14px 40px rgba(239,124,210,.45);

transition:.25s;

}

.btn-primary:hover{

transform:translateY(-2px);

box-shadow:0 24px 55px rgba(239,124,210,.55);

}

.btn-ghost{

background:rgba(255,255,255,.06);

border:1px solid rgba(255,255,255,.14);

color:white;

}

/* ================================
TERMINAL CYBER
================================ */

.terminal-box{

background:#0b0b0b;

border:1px solid rgba(255,255,255,.08);

border-radius:14px;

padding:22px;

font-family:"JetBrains Mono",monospace;

box-shadow:0 30px 70px rgba(0,0,0,.5);

}

.terminal-header{

display:flex;
gap:8px;

margin-bottom:16px;

}

.terminal-header span{

width:12px;
height:12px;

border-radius:50%;

}

.terminal-header span:nth-child(1){
background:#ff5f56;
}

.terminal-header span:nth-child(2){
background:#ffbd2e;
}

.terminal-header span:nth-child(3){
background:#27c93f;
}

.terminal-body p{

margin:4px 0;

color:#cfcfcf;

font-size:14px;

}

.prompt{
color:#45ff9a;
}

.cursor{

color:#45ff9a;

animation:blink 1s infinite;

}

@keyframes blink{

0%{opacity:1}
50%{opacity:0}
100%{opacity:1}

}



/* =========================
   HERO IMPACT BAR
========================= */

.hero-impact-bar{

margin-top:40px;

display:flex;

justify-content:center;

align-items:center;

gap:60px;

padding:28px 32px;

border-radius:22px;

background:rgba(255,255,255,.06);

border:1px solid rgba(255,255,255,.08);

backdrop-filter:blur(12px);

}

/* items */

.impact-item{
text-align:center;
}

.impact-item strong{

display:block;

font-size:32px;

font-weight:900;

}

.impact-item span{

font-size:16px;

color:rgba(255,255,255,.85);

}

/* divider */

.impact-divider{

width:1px;

height:48px;

background:rgba(255,255,255,.18);

}

/* =========================
   RESPONSIVE
========================= */

@media (max-width:900px){

.hero-impact-bar{

gap:30px;

padding:22px;

}

.impact-item strong{
font-size:26px;
}

}

@media (max-width:600px){

.hero-impact-bar{

flex-direction:column;

gap:20px;

padding:26px;

}

.impact-divider{

width:60px;
height:1px;

}

}

/* =========================
   PARA QUIÉN ES
========================= */

.steps-section{

padding:100px 0;

background:
linear-gradient(
135deg,
#44572e,
#3f4c28
);

color:white;

}

.steps-grid{

display:grid;

grid-template-columns:1fr 1.2fr;

gap:60px;

align-items:center;

}

@media(max-width:900px){

.steps-grid{
grid-template-columns:1fr;
}

}

/* header izquierda */

.steps-header h2{

font-size:42px;

font-weight:900;

margin-bottom:12px;

}

.steps-header p{

font-size:17px;

color:rgba(255,255,255,.85);

max-width:420px;

line-height:1.6;

}

/* cards */

.steps-list{

display:grid;

gap:20px;

}

/* base */

.step-card{

position:relative;

padding:26px 28px 26px 80px;

border-radius:24px;

background:white;

color:#1a1a1a;

box-shadow:0 25px 60px rgba(0,0,0,.35);

transition:.35s cubic-bezier(.22,1,.36,1);

}

/* hover elegante */

.step-card:hover{

transform:translateY(-6px);

box-shadow:0 35px 80px rgba(0,0,0,.45);

}

/* numero */

.step-index{

position:absolute;

left:24px;
top:50%;

transform:translateY(-50%);

font-size:42px;

font-weight:900;

opacity:.18;

}

/* highlight card */

.step-highlight{

background:linear-gradient(
140deg,
var(--green-soft),
var(--blue)
);

color:rgb(255, 255, 255);

}

/* texto */

.step-card h3{

margin-bottom:6px;

font-size:20px;

font-weight:700;

}

.step-card p{

font-size:15px;

line-height:1.6;

}



/* =========================
   WHAT WE DO SECTION
========================= */

.what-we-do-section{

padding:110px 0;

background:var(--green);

text-align:center;

}

/* titulo */

.what-title{

font-size:42px;

font-weight:900;

margin-bottom:14px;

}

/* subtitulo */

.what-subtitle{

max-width:640px;

margin:auto;

margin-bottom:70px;

font-size:17px;

line-height:1.6;

color:rgba(255,255,255,.85);

}

/* grid */

.what-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:50px;

}

@media(max-width:900px){

.what-grid{
grid-template-columns:1fr;
gap:60px;
}

}

/* cards */

.what-item{

padding:32px;

border-radius:24px;

background:var(--green-soft);

border:1px solid rgba(255,255,255,.12);

backdrop-filter:blur(12px);

transition:.35s cubic-bezier(.22,1,.36,1);

}

/* hover */

.what-item:hover{

transform:translateY(-8px);

box-shadow:0 30px 80px rgba(0,0,0,.35);

}

/* icon */

.what-icon{

width:90px;
height:90px;

margin:auto auto 22px;

border-radius:24px;

background:linear-gradient(
135deg,
var(--blue),
var(--green-soft)
);

display:flex;

align-items:center;
justify-content:center;

box-shadow:0 25px 50px rgba(179, 207, 192, 0.35);

}

.what-icon img{

width:42px;
height:42px;

filter:brightness(0) invert(1);

}

/* title */

.what-item h3{

font-size:22px;

font-weight:800;

margin-bottom:10px;

}

/* text */

.what-item p{

font-size:16px;

line-height:1.6;

color:rgba(255,255,255,.9);

}


/* =========================
   PARTNERS / ALLIES TECH
========================= */

.partners-section{
  position: relative;
  padding: 110px 0;
  background:
    radial-gradient(700px 220px at 20% 20%, rgba(46,197,255,.10), transparent 60%),
    radial-gradient(700px 220px at 80% 10%, rgba(239,124,210,.10), transparent 60%),
    linear-gradient(180deg, #080808 0%, #3f4b27 100%);
  overflow: hidden;
}

.partners-header{
  text-align: center;
  margin-bottom: 56px;
}

.partners-badge{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  margin-bottom: 18px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.86);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.partners-title{
  font-size: clamp(30px, 4vw, 42px);
  font-weight: 900;
  margin: 0 0 12px;
  color: #fff;
}

.partners-subtitle{
  max-width: 700px;
  margin: 0 auto;
  color: rgba(255,255,255,.82);
  font-size: 17px;
  line-height: 1.7;
}

/* Carrusel */
.partners-carousel{
  position: relative;
  overflow: hidden;
  padding: 10px 0;
}

/* Fades laterales */
.partners-fade{
  position: absolute;
  top: 0;
  bottom: 0;
  width: 120px;
  z-index: 2;
  pointer-events: none;
}

.partners-fade-left{
  left: 0;
  background: linear-gradient(90deg, #44572e 0%, rgba(68,87,46,0) 100%);
}

.partners-fade-right{
  right: 0;
  background: linear-gradient(270deg, #44572e 0%, rgba(68,87,46,0) 100%);
}

/* Pista */
.partners-track{
  display: flex;
  align-items: center;
  gap: 28px;
  width: max-content;
  animation: partnersScroll 24s linear infinite;
}

.partners-carousel:hover .partners-track{
  animation-play-state: paused;
}

/* Card individual */
.partner-card{
  width: 260px;
  height: 165px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
  border-radius: 24px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(10px);
  box-shadow:
    0 18px 40px rgba(0,0,0,.20),
    inset 0 0 0 1px rgba(255,255,255,.02);
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}

.partner-card img{
  max-width: 85%;
  max-height: 290px;
  object-fit: contain;
  opacity: .82;
  filter: grayscale(1) brightness(1.1);
  transition: transform .35s ease, opacity .35s ease, filter .35s ease;
}

.partner-card:hover{
  transform: translateY(-8px);
  border-color: rgba(46,197,255,.35);
  box-shadow:
    0 24px 60px rgba(0,0,0,.28),
    0 0 26px rgba(46,197,255,.12);
}

.partner-card:hover img{
  opacity: 1;
  filter: grayscale(0) brightness(1);
  transform: scale(1.05);
}

/* Animación infinita */
@keyframes partnersScroll{
  0%{
    transform: translateX(0);
  }
  100%{
    transform: translateX(calc(-50% - 14px));
  }
}

/* Responsive */
@media (max-width: 900px){
  .partners-section{
    padding: 90px 0;
  }

  .partners-subtitle{
    font-size: 16px;
  }

  .partner-card{
    width: 200px;
    height: 130px;
    padding: 18px;
  }

  .partner-card img{
    max-height: 500px;
  }

  .partners-fade{
    width: 60px;
  }

  .partners-track{
    gap: 18px;
    animation-duration: 20s;
  }
}
@media (max-width:900px){

.menu{
position:absolute;
top:70px;
right:0;
background:#0b0b0b;
flex-direction:column;
width:220px;
padding:20px;
display:none;
}

.menu.open{
display:flex;
}

.hamburger{
display:flex;
flex-direction:column;
gap:5px;
cursor:pointer;
}

}


/* =========================
   EVENTO DESTACADO
========================= */

.highlight-event{

position:relative;

padding:100px 0;

text-align:center;

background:

radial-gradient(
600px 300px at 50% 20%,
rgba(239,124,210,.18),
transparent 70%
),

linear-gradient(
180deg,
#44572e,
#3f4b27
);

overflow:hidden;

}

/* glow */

.highlight-event-glow{

position:absolute;

inset:0;

background:

radial-gradient(
500px 250px at 50% 40%,
rgba(123, 180, 202, 0.18),
transparent 70%
);

pointer-events:none;

}

.highlight-event-content{

position:relative;

z-index:2;

}

/* badge */

.event-badge{

display:inline-block;

padding:8px 16px;

border-radius:999px;

font-size:13px;

font-weight:700;

background:rgba(255,255,255,.08);

border:1px solid rgba(255,255,255,.15);

margin-bottom:16px;

}

/* titulo */

.event-title{

font-size:36px;

font-weight:900;

margin-bottom:16px;

}

/* info */

.event-info{

display:flex;

justify-content:center;

gap:24px;

margin-bottom:28px;

font-size:16px;

color:rgba(255,255,255,.85);

}

.event-info i{

margin-right:6px;

color:var(--blue);

}

/* countdown */

.event-countdown{

display:flex;

justify-content:center;

gap:16px;

margin-bottom:32px;

}

.countdown-box{

background:rgba(255,255,255,.08);

border:1px solid rgba(255,255,255,.12);

border-radius:14px;

padding:16px 20px;

min-width:80px;

}

.countdown-box span{

display:block;

font-size:28px;

font-weight:900;

}

.countdown-box small{

font-size:12px;

opacity:.8;

}

/* botón */

.event-btn{

font-size:17px;

padding:16px 30px;

border-radius:18px;

box-shadow:

0 20px 50px rgba(239,124,210,.45);

}

.event-btn:hover{

transform:translateY(-3px);

box-shadow:

0 30px 70px rgba(239,124,210,.6);

}

/* ================================
FOOTER
================================ */

.footer{

padding:28px 0;

margin-top:60px;

border-top:1px solid rgba(255,255,255,.08);

text-align:center;

font-size:15px;

color:rgba(255,255,255,.65);

}

.footer-socials{

display:flex;
justify-content:center;

gap:18px;

margin:16px 0;

}

.footer-socials a{

font-size:24px;

transition:.25s;

}

.footer-socials a:hover{

color:var(--pink);

transform:translateY(-2px);

text-shadow:0 0 10px rgba(239,124,210,.6);

}

/* ================================
MOBILE NAV
================================ */

.hamburger{

display:none;

background:none;

border:none;

cursor:pointer;

}

.hamburger span{

display:block;

width:26px;
height:3px;

background:white;

margin:5px 0;

border-radius:3px;

}

@media(max-width:900px){

.hamburger{
display:block;
}

.menu{

position:fixed;

top:0;
right:-100%;

width:75%;

max-width:320px;

height:100vh;

background:var(--green-soft);

display:flex;

flex-direction:column;

padding:100px 24px;

gap:18px;

transition:right .35s;

}

.menu.open{
right:0;
}

}

/* =========================
ABOUT HERO
========================= */

.about-hero{

position:relative;

min-height:90vh;

display:flex;

align-items:center;

justify-content:center;

overflow:hidden;

background:linear-gradient(180deg,#050505,#0b0b0b);

}


/* =========================
COMMUNITY WALL
========================= */


.community-wall-wrapper{

position:absolute;

inset:0;

overflow:hidden;

z-index:1;

}

.community-wall{

display:grid;

grid-template-columns:repeat(8,1fr);

gap:14px;

width:160%;

animation:wallMove 35s linear infinite;

opacity:.35;

}

.community-wall img{

width:100%;

height:180px;

object-fit:cover;

border-radius:14px;

filter:grayscale(.3);

transition:.4s ease;

}

.community-wall img:hover{

transform:scale(1.05);

filter:grayscale(0);

}


/* movimiento */

@keyframes wallMove{

0%{
transform:translateX(0);
}

100%{
transform:translateX(-25%);
}

}


/* =========================
TEXTO CENTRAL
========================= */

.hero-center{

position:relative;

z-index:5;

background:var(--green-soft);

backdrop-filter:blur(14px);

padding:40px 60px;

border-radius:24px;

border:1px solid rgba(255,255,255,.08);

text-align:center;

max-width:650px;

}

.about-kicker{

display:inline-block;

padding:8px 16px;

border-radius:999px;

background:rgba(255,255,255,.05);

border:1px solid rgba(255,255,255,.15);

font-size:17px;

margin-bottom:14px;

}

.about-center-title{

font-size:clamp(60px,8vw,110px);

font: weight 900px;

background:linear-gradient(90deg,var(--green),var(--blue));

background-clip:text;

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}

.about-hero-subtitle{

font-size:24px;

color:rgba(255,255,255,.8);

margin-top:10px;

}




/* =========================
RESPONSIVE
========================= */

@media(max-width:900px){

.community-wall{

grid-template-columns:repeat(4,1fr);

}

.community-wall img{

height:120px;

}

.hero-center{

padding:30px;

}

}



/* =================================
ABOUT SECTION
================================= */


.about-section{

padding:100px 0;

background: var(--green);

}

.about-title{

text-align:center;

font-size:36px;

margin-bottom:18px;

}

.about-intro{

max-width:720px;

margin:0 auto 60px;

text-align:center;

font-size:18px;

line-height:1.7;

color:rgba(255,255,255,.8);

}


/* GRID */

.about-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:24px;

}

@media(max-width:900px){

.about-grid{

grid-template-columns:1fr;

}

}


/* CARDS */

.about-card{

background:rgba(17,18,19,.6);

border:1px solid rgba(255,255,255,.12);

border-radius:22px;

padding:28px;

box-shadow:0 20px 60px rgba(0,0,0,.45);

transition:.35s ease;

}

.about-card:hover{

transform:translateY(-6px);

border-color:var(--pink);

box-shadow:

0 20px 60px rgba(239,124,210,.25);

}

.about-card h3{

margin-bottom:10px;

font-size:22px;

}

.about-card p{

color:rgba(255,255,255,.75);

line-height:1.6;

}


/* =================================
VALORES
================================= */

.about-values{

padding:100px 0;

background: var(--green-soft)

}

.values-grid{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:22px;

margin-top:50px;

}

@media(max-width:900px){

.values-grid{

grid-template-columns:1fr;

}

}

.value-card{

text-align:center;

padding:30px;

border-radius:20px;

background:rgba(255,255,255,.04);

border:1px solid rgba(255,255,255,.12);

transition:.35s ease;

}

.value-card:hover{

transform:translateY(-4px);

border-color:var(--blue);

box-shadow:0 0 30px rgba(46,197,255,.25);

}

.value-card h3{

margin-bottom:8px;

}

.value-card p{

font-size:15px;

color:rgba(255,255,255,.75);

}


/* =================================
TEAM / FOUNDERS
================================= */

.founders-carousel{
padding:100px 0;
background:var(--green);
}

.founders-title{
text-align:center;
font-size:34px;
margin-bottom:10px;
}

.founders-intro{
text-align:center;
max-width:720px;
margin:0 auto 50px;
color:rgba(255,255,255,.8);
}

/* CAROUSEL
   .carousel-wrapper  → fila: [btn] [viewport] [btn]
   .carousel-viewport → overflow:hidden  (el clip va AQUÍ)
   .carousel-track    → se mueve con transform, sin overflow
*/

.carousel-wrapper{
display:flex;
align-items:center;
gap:12px;
}

.carousel-viewport{
flex:1;
min-width:0;
overflow:hidden;
}

.carousel-track{
display:flex;
gap:24px;
transition:transform .4s ease;
will-change:transform;
}

/* CARD */

.carousel-card{
width:260px;
flex-shrink:0;
background:rgba(17,18,19,.7);
border:1px solid rgba(255,255,255,.12);
border-radius:22px;
padding:24px;
text-align:center;
transition:.35s ease;
position:relative;
}

.carousel-card:hover{
transform:translateY(-8px);
border-color:var(--blue);
box-shadow:0 20px 50px rgba(0,0,0,.4);
}

/* BOTONES */

.carousel-btn{
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.15);
color:white;
font-size:26px;
width:44px;
height:44px;
border-radius:50%;
cursor:pointer;
transition:.25s;
flex-shrink:0;
display:flex;
align-items:center;
justify-content:center;
}

.carousel-btn:hover{
background:rgba(46,197,255,.2);
border-color:var(--blue);
}

@media(max-width:600px){
.carousel-btn{ width:36px; height:36px; font-size:20px; }
.carousel-card{ width:calc(100vw - 120px); min-width:0; padding:20px 16px; }
}


/* CARD */

.carousel-card{

width:260px;

background:rgba(17,18,19,.7);

border:1px solid rgba(255,255,255,.12);

border-radius:22px;

padding:24px;

text-align:center;

transition:.35s ease;

position:relative;

}

.carousel-card:hover{

transform:translateY(-8px);

border-color:var(--blue);

box-shadow:0 20px 50px rgba(0,0,0,.4);

}


/* FOTO */

.member-photo{

position:relative;

width:120px;

height:120px;

margin:0 auto 14px;

border-radius:50%;

overflow:hidden;

}

.member-photo img{

width:100%;
height:100%;

object-fit:cover;

border-radius:50%;
object-position:center 20%;

border:3px solid rgba(255,255,255,.2);

transition:.4s ease;

/* ZOOM */
transform:scale(1.3);

}

.carousel-card:hover img{

transform:scale(1.05);

}


/* LINKEDIN ICON */

.linkedin-icon{

position:absolute;

bottom:0;
right:0;

width:34px;
height:34px;

display:flex;

align-items:center;
justify-content:center;

border-radius:50%;

background:#0077b5;

color:white;

font-size:15px;

opacity:0;

transform:scale(.6);

transition:.3s ease;

}

.carousel-card:hover .linkedin-icon{

opacity:1;

transform:scale(1);

}


/* TEXTO */

.carousel-card h3{

margin:6px 0 4px;

font-size:18px;

}

.carousel-card span{

display:inline-block;

margin-top:6px;

font-size:13px;

padding:5px 12px;

border-radius:20px;

}


/* ROLES */

.role-founder{

background:rgba(239,124,210,.2);

color:var(--pink);

}

.role-core{

background:rgba(46,197,255,.2);

color:var(--blue);

}

.role-member{

background:rgba(52, 153, 211, 0.25);

color:var(white);

}


/* BOTONES */

.carousel-btn{

background:rgba(255,255,255,.06);

border:1px solid rgba(255,255,255,.15);

color:white;

font-size:30px;

width:48px;

height:48px;

border-radius:50%;

cursor:pointer;

transition:.25s;

}

.carousel-btn:hover{

background:rgba(46,197,255,.15);

}


/* =================================
SCROLL REVEAL
================================= */

.reveal{

opacity:0;

transform:translateY(24px);

transition:all .8s ease;

}

.reveal.active{

opacity:1;

transform:translateY(0);

}

/* =========================
BLOG SECTION
========================= */

.blog-section{

padding:70px 0;

}

.section-title{

text-align:center;

font-size:34px;

margin-bottom:10px;

}

.blog-section .subtitle{

text-align:center;

max-width:650px;

margin:0 auto 40px;

color:rgba(255,255,255,.8);

}


/* =========================
BLOG CONTROLS
========================= */

.blog-controls{

display:flex;

justify-content:space-between;

align-items:center;

gap:20px;

flex-wrap:wrap;

margin-bottom:40px;

}

#blog-search{

padding:12px 16px;

border-radius:12px;

border:1px solid rgba(255,255,255,.1);

background:rgba(255,255,255,.05);

color:white;

width:240px;

outline:none;

}

#blog-search::placeholder{

color:rgba(255,255,255,.5);

}

.blog-filters button.active{
background:var(--pink);
color:black;
}

.blog-filters button{

background:rgba(255,255,255,.06);

border:1px solid rgba(255,255,255,.1);

padding:8px 16px;

border-radius:20px;

color:white;

cursor:pointer;

transition:.25s;

}

.blog-filters button.active,
.blog-filters button:hover{

background:var(--pink);

color:black;

}


/* =========================
FEATURED POST
========================= */

.blog-featured{
display:grid;
grid-template-columns:1fr 1fr;
gap:30px;
align-items:stretch;
}

.featured-image{
height:100%;
overflow:hidden;
}

.blog-featured img{
width:100%;
height:100%;
object-fit:cover;
display:block;
}

.featured-content{

padding:30px;

display:flex;

flex-direction:column;

justify-content:center;

}

.featured-content h3{

font-size:28px;

margin:10px 0;

}

.featured-content p{

color:rgba(255,255,255,.75);

line-height:1.6;

}


/* =========================
BLOG GRID
========================= */

.blog-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:24px;

}

.blog-card{

background:rgba(17,18,19,.7);

border:1px solid rgba(255,255,255,.1);

border-radius:18px;

overflow:hidden;

transition:.35s ease;

box-shadow:0 20px 40px rgba(0,0,0,.4);

}

.blog-card:hover{

transform:translateY(-8px);

border-color:var(--pink);

box-shadow:0 20px 50px rgba(239,124,210,.25);

}

.blog-card img{

width:100%;

height:160px;

object-fit:cover;

}

.blog-content{

padding:18px;

}

.blog-content h3{

margin:10px 0;

}

.blog-content p{

color:rgba(255,255,255,.75);

font-size:15px;

}


/* =========================
BLOG LINKS
========================= */

.blog-read{

display:inline-block;

margin-top:10px;

font-weight:600;

color:var(--blue);

text-decoration:none;

transition:.25s;

}

.blog-read:hover{

color:var(--pink);

}


/* =========================
RESPONSIVE
========================= */

@media(max-width:900px){

.blog-featured{

grid-template-columns:1fr;

}

.blog-grid{

grid-template-columns:1fr;

}

.blog-controls{

flex-direction:column;

align-items:flex-start;

}

#blog-search{

width:100%;

}

}

/* =========================
BLOG VIDEOS
========================= */

.blog-videos{

padding:100px 0;

background:#050505;

}


/* GRID RESPONSIVE */

.videos-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(320px,1fr));

gap:30px;

margin-top:40px;

}


/* CARD */

.video-card{

background:rgba(17,18,19,.75);

border:1px solid rgba(255,255,255,.08);

border-radius:18px;

overflow:hidden;

transition:.35s ease;

backdrop-filter:blur(8px);

}

.video-card:hover{

transform:translateY(-8px);

border-color:var(--blue);

box-shadow:

0 20px 60px rgba(0,0,0,.5),
0 0 25px rgba(46,197,255,.25);

}


/* VIDEO WRAPPER */

.video-wrapper{

position:relative;

width:100%;

padding-top:56.25%; /* 16:9 */

overflow:hidden;

background:#000;

}

.video-wrapper iframe{

position:absolute;

top:0;

left:0;

width:100%;

height:100%;

border:0;

}


/* TEXT */

.video-card h3{

padding:18px 20px 6px;

font-size:18px;

font-weight:600;

}

.video-card p{

padding:0 20px 22px;

font-size:14px;

line-height:1.6;

color:rgba(255,255,255,.75);

}


/* MOBILE */

@media(max-width:768px){

.blog-videos{

padding:70px 0;

}

.video-card h3{

font-size:16px;

}

}

/* RESPONSIVE */

@media(max-width:900px){

.videos-grid{

grid-template-columns:1fr;

}

}


body{
font-family:Arial;
background:#0c0c0c;
color:white;
margin:0;
}

.container{
width:90%;
max-width:1100px;
margin:auto;
}

.hero-events{
text-align:center;
margin:60px 0;
}

.featured-card{
background:var(--green-soft);
padding:40px;
border-radius:20px;
text-align:center;
margin-bottom:40px;
}

.countdown{
display:flex;
justify-content:center;
gap:15px;
}

.count-box{
background:#1a1a1a;
padding:15px;
border-radius:10px;
min-width:70px;
}

.count-box span{
font-size:24px;
display:block;
}

.count-box span.update{
transform:scale(1.2);
color:#ff4db8;
transition:.3s;
}


.calendar-container{
background:var(--green-soft);
padding:30px;
border-radius:20px;
margin-bottom:80px;
}

.calendar-header{
display:flex;
justify-content:center;
align-items:center;
gap:20px;
margin-bottom:30px;
font-size:22px;
font-weight:600;
letter-spacing:.5px;
}

.calendar-header button{

background:rgba(255,255,255,.08);

border:none;

width:36px;
height:36px;

border-radius:8px;

color:white;

font-size:18px;

cursor:pointer;

transition:.25s;

}

.calendar-header button:hover{

background:#ff4db8;

transform:scale(1.1);

box-shadow:0 0 10px rgba(221, 220, 220, 0.5);

}
.event-count{
position:absolute;
top:4px;
right:6px;
background:#ff2e88;
color:white;
font-size:12px;
border-radius:50%;
padding:2px 6px;
}

.event-item{
border-bottom:1px solid #ddd;
padding:15px 0;
}

.speaker-img{
width:60px;
border-radius:50%;
margin:8px 0;
}

.register-btn{
display:inline-block;
margin-top:8px;
background:#ff2e88;
color:white;
padding:6px 12px;
border-radius:6px;
text-decoration:none;
}

.calendar-grid{
display:grid;
grid-template-columns:repeat(7,1fr);
gap:10px;
}

.day-label{
text-align:center;
opacity:.6;
}

.date{

background:linear-gradient(
180deg,
rgba(25,25,25,.95),
rgba(15,15,15,.95)
);

padding:16px;

border-radius:12px;

text-align:center;

cursor:pointer;

border:1px solid rgba(255,255,255,.05);

box-shadow:
0 4px 12px rgba(0,0,0,.6);

transition:.25s;

font-weight:500;

}

.date:hover{

transform:translateY(-4px);

border-color:#00ff9c;

box-shadow:
0 6px 20px rgba(0,0,0,.8),
0 0 10px rgba(0,255,156,.5);

color:#00ff9c;

}
.event-day{

border:1px solid #ff4db8;

box-shadow:
0 0 8px rgba(255,77,184,.6),
0 0 20px rgba(255,77,184,.2);

position:relative;

}

.event-day::after{

content:"●";

position:absolute;

top:6px;
right:10px;

color:#ff4db8;

font-size:10px;

}
.day-label{

text-align:center;

opacity:.6;

font-size:12px;

letter-spacing:2px;

font-weight:600;

margin-bottom:10px;

}
.date.empty{
background:none;
pointer-events:none;
}



.event-modal{
display:none;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,.8);
justify-content:center;
align-items:center;
}

.modal-content{

background:#000000;

padding:40px;

border-radius:20px;

text-align:center;

width:420px;

max-height:80vh;

overflow-y:auto;

position:relative;

}

.modal-close{
position:absolute;
top:10px;
right:15px;
cursor:pointer;
font-size:25px;
}
.event-item h3{
color:#ff4db8;
margin-bottom:5px;
}

.speaker-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:30px;
margin-bottom:80px;
}

.speaker-card{

background:rgba(20,20,20,.95);

border:1px solid rgba(255,77,184,.2);

box-shadow:
0 0 15px rgba(255,77,184,.08);

padding:30px;

border-radius:18px;

transition:.3s;

}

.speaker-card:hover{

transform:translateY(-6px);

border-color:#dae7e2;

box-shadow:
0 15px 40px rgba(0,0,0,.7),
0 0 25px rgba(0,255,156,.25);

}

.speaker-card img{

width:110px;

height:110px;

border-radius:50%;

border:3px solid #00ff9c;

object-fit:cover;

margin-bottom:15px;

}

.footer{
text-align:center;
padding:40px;
opacity:.6;
}
/* =========================
MATRIX BACKGROUND
========================= */

#matrix-bg{

position:fixed;

top:0;
left:0;

width:100%;
height:100%;

z-index:-1;

background:black;

}


/* para que el contenido quede encima */

body{

position:relative;

z-index:1;

}


/* efecto glass para secciones */

.calendar-container,
.featured-card,
.modal-content,
.speaker-card{

background:var(--green);

backdrop-filter:blur(6px);

}

/* RESPONSIVE */

@media(max-width:900px){

.featured-events{
grid-template-columns:1fr;
}

.calendar-grid{
gap:6px;
}

.date{
padding:12px 8px;
font-size:13px;
}

}
/* =========================
COUNTDOWN CARDS PRO
========================= */

.countdown{
display:flex;
justify-content:center;
gap:20px;
margin-top:25px;
flex-wrap:wrap;
}

.count-box{

background:linear-gradient(
180deg,
rgba(36, 179, 119, 0.753),
rgba(10,10,10,.9)
);

padding:22px 28px;

border-radius:16px;

text-align:center;

min-width:90px;

border:1px solid rgba(255,255,255,.06);

box-shadow:
0 10px 30px rgba(0,0,0,.6),
inset 0 1px 0 rgba(255,255,255,.04);

transition:.3s ease;

position:relative;

}


/* GLOW MATRIX */

.count-box::before{

content:"";

position:absolute;

inset:0;

border-radius:16px;

opacity:0;

transition:.3s;

box-shadow:
0 0 15px #00ff9c,
0 0 40px rgba(0,255,156,.5);

}


/* HOVER */

.count-box:hover{

transform:translateY(-6px);

border-color:#00ff9c;

}

.count-box:hover::before{

opacity:1;

}


/* NÚMEROS */

.count-box span{

font-size:34px;

font-weight:700;

letter-spacing:1px;

font-family:monospace;

color:#ffffff;

display:block;

}


/* TEXTO */

.count-box small{

font-size:13px;

opacity:.6;

letter-spacing:.5px;

}

/* =================================
CONTACT HERO
================================= */

.contact-hero{
text-align:center;
margin:80px auto 40px;
max-width:700px;
}

.contact-hero h1{
font-size:clamp(32px,4vw,46px);
margin-bottom:12px;
letter-spacing:.5px;
}

.contact-hero p{
max-width:620px;
margin:auto;
opacity:.85;
line-height:1.6;
}


/* =================================
GRID LAYOUT
================================= */

.contact-grid{

display:grid;

grid-template-columns:1.2fr .8fr;

gap:40px;

margin-top:40px;

}

@media(max-width:900px){

.contact-grid{
grid-template-columns:1fr;
}

}


/* =================================
FORM CARD
================================= */

.contact-form-card{

background:rgba(17,18,19,.85);

padding:42px;

border-radius:20px;

border:1px solid rgba(15, 17, 14, 0.08);

box-shadow:
0 20px 50px rgba(0,0,0,.55),
0 0 20px rgba(0,255,156,.05);

transition:.3s;

}

.contact-form-card:hover{

border-color:rgba(0,255,156,.25);

}


/* =================================
FORM
================================= */

.form-row{

display:grid;

grid-template-columns:1fr 1fr;

gap:20px;

}

@media(max-width:700px){

.form-row{
grid-template-columns:1fr;
}

}


.form-group{
margin-top:16px;
display:flex;
flex-direction:column;
gap:6px;
}

.form-group label{
font-size:13px;
opacity:.7;
}


/* INPUTS */

.input,
textarea,
select{

width:100%;

padding:12px 14px;

border-radius:10px;

border:1px solid rgba(255,255,255,.12);

background:rgba(255,255,255,.03);

color:white;

font-size:14px;

transition:.25s;

}

textarea{
min-height:120px;
resize:vertical;
}


/* focus UX */

.input:focus,
textarea:focus,
select:focus{

outline:none;

border-color:#00ff9c;

box-shadow:
0 0 0 1px #00ff9c,
0 0 12px rgba(0,255,156,.25);

}


/* =================================
CONTACT INFO CARD
================================= */

.contact-info{

background:var(--green-soft);

padding:32px;

border-radius:20px;

border:1px solid rgba(255,255,255,.08);

height:fit-content;

}

.contact-item{

display:flex;

gap:16px;

align-items:flex-start;

margin-top:22px;

}

.contact-item i{

font-size:20px;

color:var(--pink);

margin-top:3px;

min-width:24px;

}

.contact-item strong{
display:block;
margin-bottom:2px;
}


/* =================================
TERMINAL STYLE
================================= */

.terminal-box{

background:#060606;

border-radius:14px;

padding:22px;

margin-top:20px;

border:1px solid rgba(0,255,156,.35);

box-shadow:
0 0 20px rgba(0,255,156,.18),
inset 0 0 10px rgba(0,255,156,.05);

font-family:monospace;

color:#00ff9c;

min-height:70px;

position:relative;

letter-spacing:.3px;

}

/* terminal prompt */

.terminal-box::before{

content:"HackHers@terminal:~$";

display:block;

font-size:13px;

opacity:.6;

margin-bottom:8px;

}

/* cursor */

#terminal-text::after{

content:"_";

animation:blink 1s infinite;

margin-left:4px;

}


/* cursor animation */

@keyframes blink{

0%{opacity:1;}
50%{opacity:0;}
100%{opacity:1;}

}
/* TERMINAL RESPONSE */

.terminal-response{

margin-top:18px;

background:#060606;

border-radius:12px;

padding:18px;

border:1px solid rgba(0,255,156,.35);

box-shadow:
0 0 15px rgba(0,255,156,.2);

font-family:monospace;

color:#00ff9c;

min-height:40px;

opacity:0;

transition:.3s;

}

.terminal-response.active{
opacity:1;
}

.terminal-line{
margin:4px 0;
}