*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:'Poppins',sans-serif;
}

body{
  background:#000;
  color:#fff;
  overflow-x:hidden;
	padding-bottom:70px;
}

/* VIDEO */
#bg-video{
  position:fixed;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:-2;
}

/* OVERLAY */
body::after{
  content:"";
  position:fixed;
  inset:0;
  background:linear-gradient(
    to top,
    rgba(0,0,0,0.55),
    rgba(0,0,0,0.30),
    rgba(0,0,0,0.10)
  );
  z-index:-1;
}

/* NAV */
.nav{
  position:fixed;
  top:0;
  width:100%;

  background:#000;
  backdrop-filter:none;

  z-index:20;
	border-bottom:0.5px solid rgba(0,198,255,0.35);
}

/* ESTE ES EL BUENO */
.nav nav{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:15px 5%;
}


.logo{
  height:50px;
  object-fit:contain;
}

/* MENU PRO */
.menu{
  display:flex;
  gap:10px;
  background:rgba(255,255,255,0.05);
  padding:6px;
  border-radius:14px;
  backdrop-filter:blur(10px);
}

.menu a{
  padding:10px 16px;
  border-radius:10px;
  text-decoration:none;
  color:rgba(255,255,255,0.7);
  font-size:14px;
  transition:all 0.3s ease;
}

/* HOVER elegante */
.menu a:hover{
  color:#fff;
  background:rgba(255,255,255,0.08);
  transform:translateY(-2px);
}

/* ACTIVO */
.menu a.activo{
  background:rgba(255,255,255,0.15);
  color:#fff;
}

/* HERO */
.hero{
  min-height:100vh;
  display:flex;
  align-items:flex-start; /* 🔥 clave */
  justify-content:center;
  text-align:center;

  padding:90px 20px 40px; /* 🔥 sube o baja aquí */
}

@media(min-width:769px){

  .hero{
    min-height:auto;
    padding:90px 20px 140px;
  }

}


.hero-content{
  max-width:900px;
  margin-top:-20px;
}

.hero-texto{
  max-width:700px;
  margin:auto;
}

.hero-interno h1{
  margin-bottom:10px;
}

.hero-interno p{
  opacity:0.7;
  margin-bottom:0;
}

.logo-central{
  width:100%;
  max-width:350px;
  margin-bottom:20px;

  animation:glow 2s infinite alternate;
}

@keyframes glow{
  from{
    filter:drop-shadow(0 0 10px #00C6FF);
  }
  to{
    filter:drop-shadow(0 0 35px #007BFF);
  }
}

.hero h1{
  font-size:clamp(20px,3.5vw,34px);
  margin-bottom:10px;
  white-space:nowrap;
}


.hero p{
  opacity:.8;
}

/* BOTONES */
.donar{
  margin-top:25px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:center;
}

.donar button{
  padding:12px 18px;
  border:none;
  border-radius:10px;

  background:linear-gradient(135deg,#00C6FF,#007BFF);

  color:#fff;
  cursor:pointer;

  box-shadow:0 10px 25px rgba(0,123,255,0.5);

  transition:.3s;
}

.donar button:hover{
  transform:translateY(-3px) scale(1.05);
  box-shadow:0 20px 40px rgba(0,123,255,0.8);
}

/* IMPACTO */
.impacto{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:25px;

  padding:20px 20px 40px; /* 🔥 lo sube más cerca */
  margin-top:-150px;       /* 🔥 lo acerca al hero */
}

@media(min-width:769px){

  .impacto{
    padding-bottom:120px;
  }

}

.impacto-box h2{
  color:#ff2a2a;
  text-shadow:0 0 15px rgba(255,0,0,0.5);
}


.impacto-box{
  min-width:220px;
  max-width:220px;
  flex:0 0 220px;
  text-align:center;
}

.impacto-box span{
  display:block;
  margin-top:8px;
}




body{
  padding-bottom:80px;
}

.otro{
  background:linear-gradient(135deg,#00E0A3,#00C6FF);
}

/* IMPACTO */

/* HERO INTERNO */
.hero-interno{
  min-height:60vh; /* 🔥 antes 80vh */
  display:flex;
  align-items:flex-start; /* 🔥 clave */
  justify-content:center;
  text-align:center;

  padding:30px 20px 20px; /* 🔥 menos espacio */
}

.hero-interno h1{
  font-size:clamp(16px,2.2vw,26px);
  white-space:normal;
  line-height:1.2;
  padding:0 20px;
}

/* HISTORIA */
.historia{
  padding:20px 20px 60px;
  margin-top:-220px; /* 🔥 este es el ajuste clave */
}

.historia-wrap{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:40px;
  max-width:1100px;
  margin:auto;
}

.historia-img img{
  width:100%;
  max-width:350px;
  border-radius:12px;
  box-shadow:0 20px 40px rgba(0,0,0,0.6);
}

.historia-texto{
  flex:1;
  min-width:260px;
}

.historia-texto h2{
  margin-bottom:15px;
  font-size:28px;
}

.historia-texto p{
  margin-bottom:10px;
  opacity:.85;
}

/* FRASE */
.frase{
  padding:20px 20px 60px; /* 🔥 reduce espacio arriba */
  margin-top:-80px;       /* 🔥 lo sube */
  text-align:center;
}

.frase h2{
  font-size:clamp(22px,4vw,34px);
  color:#ff1e1e;
}

/* GALERÍA */
.galeria{
  padding:60px 20px;
}

.galeria-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:20px;
  max-width:1100px;
  margin:auto;
}

.card{
  position:relative;
  overflow:hidden;
  border-radius:12px;
}

.card img{
  width:100%;
  height:220px; /* 🔥 CONTROL DE ALTURA */
  object-fit:cover;
  transition:0.5s;
}

.card{
  height:220px;
}

.card:hover img{
  transform:scale(1.1);
}

/* OVERLAY */
.overlay{
  position:absolute;
  bottom:0;
  width:100%;
  padding:10px;
  background:rgba(0,0,0,0.6);
  text-align:center;
  font-size:14px;
}

/* TEXTO */
.inst-texto{
  text-align:center;
  padding:40px 20px;
  max-width:800px;
  margin:auto;
  opacity:0.8;
}


/* CONTACTO */
.contacto{
  padding:60px 20px;
}

.contacto-wrap{
  display:flex;
  flex-wrap:wrap;
  gap:40px;
  max-width:1100px;
  margin:auto;
  justify-content:center;
  align-items:center;
}

/* FORM */
.form-pro{
  flex:1;
  min-width:260px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.form-pro input,
.form-pro textarea{
  padding:12px;
  border-radius:8px;
  border:none;
}

.form-pro textarea{
  min-height:100px;
}

.form-pro button{
  padding:12px;
  background:#ff1e1e;
  border:none;
  color:#fff;
  border-radius:8px;
  cursor:pointer;
  transition:.3s;
}

.form-pro button:hover{
  transform:scale(1.05);
}

/* INFO */
.contacto-info{
  flex:1;
  min-width:260px;
  text-align:center;
}

.contacto-info h2{
  margin-bottom:15px;
}

.contacto-info p{
  margin-bottom:8px;
  opacity:.8;
}

/* CTA */
.cta{
  text-align:center;
  padding:60px 20px;
}

.btn-cta{
  display:inline-block;
  margin-top:15px;
  padding:12px 20px;
  background:#ff1e1e;
  color:#fff;
  text-decoration:none;
  border-radius:8px;
}


/* DERECHA */

/* HAMBURGUESA */
.hamburguesa{
  display:none;
  font-size:28px;
  cursor:pointer;
  color:#fff;
}

	.footer-pro{
  position:fixed;
  bottom:0;
  left:0;
  width:100%;

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

  padding:10px 25px;

  background:#000;

  font-size:11px;
  color:rgba(255,255,255,0.6);

  z-index:999;
		
border-top:0.5px solid rgba(0,198,255,0.35);
		
		
}

/* IZQUIERDA */
.footer-left{
  text-align:left;
}

/* CENTRO */
.footer-center{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  text-align:center;
  width:max-content;
}

/* DERECHA */
.footer-right{
  text-align:right;
}

/* LINKS */
.footer-right a{
  color:#4da6ff;
  text-decoration:none;
}

.footer-right a:hover{
  text-decoration:underline;
}



	/* FONDO SECCIONES INTERNAS */
body.interno{
  background: radial-gradient(
    circle at 50% 18%,
    #2a2a2a 0%,
    #151515 38%,
    #050505 70%,
    #000000 100%
  );
}


/* HERO QUIENES */
.hero-quienes h1{
  font-size:clamp(28px,4vw,46px);
  line-height:1.2;
  text-shadow:0 0 20px rgba(0,198,255,0.4);
}

.hero-quienes .sub{
  margin-top:10px;
  opacity:0.8;
  font-size:16px;
}

/* HISTORIA NUEVA */
.historia.nueva{
  margin-top:-150px;
}

.historia-texto.card{
  background:rgba(255,255,255,0.04);
  padding:25px;
  border-radius:14px;

  backdrop-filter:blur(10px);

  box-shadow:0 20px 40px rgba(0,0,0,0.6);
  border:1px solid rgba(0,198,255,0.2);
}

/* TEXTO */
.historia-texto.card h2{
  margin-bottom:15px;
  font-size:26px;
  color:#00C6FF;
}

.historia-texto.card p{
  margin-bottom:12px;
  opacity:0.85;
}

.historia-texto .resaltado{
  margin-top:10px;
  color:#00C6FF;
  font-weight:600;
}

/* EFECTO GLOW IMAGEN */
.efecto-glow img{
  filter:drop-shadow(0 0 25px rgba(0,198,255,0.6));
}

/* FRASE FINAL */
.impacto-final{
  margin-top:-60px;
  padding:40px 20px;
}

.impacto-final h2{
  font-size:clamp(26px,4vw,40px);
  color:#ff2a2a;

  text-shadow:
    0 0 10px rgba(255,0,0,0.4),
    0 0 25px rgba(255,0,0,0.2);
}


/* CONTACTO NUEVO */
.contacto.nuevo{
  margin-top:-120px;
}

/* WRAP */
.contacto-wrap{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:50px;
  max-width:1100px;
  margin:auto;
  flex-wrap:wrap;
}

/* IMAGEN */
.contacto-img img{
  max-width:320px;
}

/* TARJETA */
.contacto-card{
  display:flex;
  gap:30px;
  flex-wrap:wrap;

  background:rgba(255,255,255,0.04);
  padding:25px;
  border-radius:16px;

  backdrop-filter:blur(12px);

  box-shadow:0 20px 40px rgba(0,0,0,0.6);
  border:1px solid rgba(0,198,255,0.2);
}

/* FORM */
.form-pro{
  flex:1;
  min-width:260px;
}

.form-pro h2{
  margin-bottom:15px;
  color:#00C6FF;
}

.form-pro input,
.form-pro textarea{
  width:100%;
  margin-bottom:10px;
  background:rgba(255,255,255,0.05);
  color:#fff;
}

/* BOTÓN */
.form-pro button{
  background:linear-gradient(135deg,#00C6FF,#007BFF);
}

/* INFO */
.contacto-info{
  flex:1;
  min-width:220px;
}

.contacto-info h2{
  color:#00C6FF;
  margin-bottom:10px;
}

/* GLOW IMAGEN */
.contacto-img{
  filter:drop-shadow(0 0 25px rgba(0,198,255,0.6));
}



/* HERO CONTACTO */
.hero-interno h1{
  font-size:clamp(28px,4vw,46px);
  line-height:1.2;

  text-shadow:0 0 20px rgba(0,198,255,0.4);
}

.hero-interno p{
  margin-top:10px;
  opacity:0.85;
  font-size:16px;

  text-shadow:0 0 10px rgba(0,198,255,0.2);
}


/* CTA CONTACTO */
.cta.impacto-final h2{
  font-size:clamp(26px,4vw,40px);

  color:#ff2a2a;

  text-shadow:
    0 0 10px rgba(255,0,0,0.5),
    0 0 25px rgba(255,0,0,0.3);
}

/* BOTÓN MÁS PRO */
.btn-cta{
  margin-top:15px;

  background:linear-gradient(135deg,#00C6FF,#007BFF);

  box-shadow:0 10px 25px rgba(0,198,255,0.5);
}

.btn-cta:hover{
  transform:scale(1.05);
  box-shadow:0 20px 40px rgba(0,198,255,0.8);
}


/* RESPONSIVE */
@media(max-width:768px){

 .menu{
  position:absolute;
  top:78px;
  right:5%;

  flex-direction:column;
  width:240px;

  background:linear-gradient(
    135deg,
    rgba(0,198,255,0.96),
    rgba(0,123,255,0.96)
  );

  border-radius:18px;

  padding:20px;

  backdrop-filter:blur(18px);

  box-shadow:
    0 20px 45px rgba(0,0,0,0.45),
    0 0 25px rgba(0,198,255,0.35);

  opacity:0;
  pointer-events:none;

  transform:translateY(-25px) scale(0.96);

  transition:
    opacity .45s ease,
    transform .45s ease;
}

.menu.activo{
  opacity:1;
  pointer-events:auto;

  transform:
    translateY(0)
    scale(1);
}

  .hamburguesa{
    display:block;
  }
	.footer{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
  padding:20px 40px;
  font-size:12px;
  background:#000;
  color:#fff;
}

.footer a{
  color:#00cfff;
  text-decoration:none;
}

.footer-left{
  flex:1;
}

.footer-center{
  flex:1;
  text-align:center;
}

.footer-right{
  flex:1;
  text-align:right;
}

/* RESPONSIVE */
@media(max-width:768px){
  .footer{
    flex-direction:column;
    text-align:center;
  }

  .footer-left,
  .footer-center,
  .footer-right{
    text-align:center;
  }
}
	
/* HERO QUIENES */
.hero-quienes h1{
  font-size:clamp(28px,4vw,46px);
  line-height:1.2;
  text-shadow:0 0 20px rgba(0,198,255,0.4);
}

.hero-quienes .sub{
  margin-top:10px;
  opacity:0.8;
  font-size:16px;
}

/* HISTORIA NUEVA */
.historia.nueva{
  margin-top:-150px;
}

.historia-texto.card{
  background:rgba(255,255,255,0.04);
  padding:25px;
  border-radius:14px;

  backdrop-filter:blur(10px);

  box-shadow:0 20px 40px rgba(0,0,0,0.6);
  border:1px solid rgba(0,198,255,0.2);
}

/* TEXTO */
.historia-texto.card h2{
  margin-bottom:15px;
  font-size:26px;
  color:#00C6FF;
}

.historia-texto.card p{
  margin-bottom:12px;
  opacity:0.85;
}

.historia-texto .resaltado{
  margin-top:10px;
  color:#00C6FF;
  font-weight:600;
}

/* EFECTO GLOW IMAGEN */
.efecto-glow img{
  filter:drop-shadow(0 0 25px rgba(0,198,255,0.6));
}

/* FRASE FINAL */
.impacto-final{
  margin-top:-60px;
  padding:40px 20px;
}

.impacto-final h2{
  font-size:clamp(26px,4vw,40px);
  color:#ff2a2a;

  text-shadow:
    0 0 10px rgba(255,0,0,0.4),
    0 0 25px rgba(255,0,0,0.2);
}
	
	
	/* =========================
   INSTALACIONES PRO (SOLO PC)
========================= */
@media(min-width:769px){

/* HERO MÁS IMPACTO */
.hero-interno h1{
  text-shadow:0 0 25px rgba(0,198,255,0.35);
}

.hero-interno p{
  opacity:0.8;
}

/* GALERÍA PRO */
.galeria{
  margin-top:-120px;
  padding:40px 20px 60px;
}

.galeria-grid{
  gap:30px;
}

/* CARD PRO */
.card{
  border-radius:16px;
  overflow:hidden;

  background:rgba(255,255,255,0.03);
  backdrop-filter:blur(10px);

  border:1px solid rgba(0,198,255,0.15);

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

  transition:all .35s ease;
}

/* IMAGEN */
.card img{
  transition:transform .5s ease;
}

/* HOVER */
.card:hover{
  transform:translateY(-8px) scale(1.02);

  border:1px solid rgba(0,198,255,0.35);

  box-shadow:
    0 25px 60px rgba(0,0,0,0.8),
    0 0 25px rgba(0,198,255,0.25);
}

.card:hover img{
  transform:scale(1.08);
}

/* OVERLAY PRO */
.overlay{
  background:linear-gradient(
    to top,
    rgba(0,0,0,0.85),
    rgba(0,0,0,0.2)
  );

  font-size:15px;
  font-weight:500;
  letter-spacing:.5px;
}

/* TEXTO FINAL PRO */
.inst-texto{
  margin-top:-30px;
  font-size:18px;

  opacity:0.85;

  text-shadow:0 0 10px rgba(0,198,255,0.15);
}

}
	
	/* =========================
   GALERÍA TOP PRO (SOLO PC)
========================= */
@media(min-width:769px){

.galeria-top{
  margin-top:-80px;
  padding:20px 20px 10px;
}

.galeria-top-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
  max-width:1200px;
  margin:auto;
}

/* CARD */
.top-card{
  border-radius:14px;
  overflow:hidden;

  border:1px solid rgba(0,198,255,0.15);

  box-shadow:0 15px 30px rgba(0,0,0,0.6);

  transition:all .35s ease;
}

.top-card img{
  width:100%;
  height:100%;
  object-fit:cover;

  transition:transform .5s ease;
}

/* HOVER */
.top-card:hover{
  transform:translateY(-6px) scale(1.02);

  border:1px solid rgba(0,198,255,0.35);

  box-shadow:
    0 20px 50px rgba(0,0,0,0.8),
    0 0 25px rgba(0,198,255,0.25);
}

.top-card:hover img{
  transform:scale(1.08);
}

}

	
	
	
	/* FIX SOLO INSTALACIONES */
.galeria-top{
  margin-top:40px !important;
}

.galeria{
  margin-top:40px !important;
}
	
}

/* FIX BANNER INSTALACIONES */
.hero-interno{
  max-height:280px;
  overflow:hidden;
}

.hero-interno img{
  width:100%;
  height:100%;
  object-fit:cover;
}
/* FIX FINAL GALERÍA TOP INSTALACIONES - PC */
@media(min-width:769px){

  .galeria-top{
    margin-top:-120px !important;
    padding:20px 20px 10px !important;
  }

  .galeria-top-grid{
    display:grid !important;
    grid-template-columns:repeat(4, 1fr) !important;
    gap:20px !important;
    max-width:1100px !important;
    margin:0 auto !important;
  }

.top-card{
  height:220px !important;
  border-radius:16px !important;
  overflow:hidden !important;
  transition:all .35s ease !important;
}

.top-card img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  display:block !important;
  transition:transform .5s ease !important;
}
	
.top-card{
  position:relative;
}
	.top-card:hover img{
  transform:scale(1.08) !important;
}
}	
	
	@media screen and (max-width:1200px){

  .impacto{
    gap:10px !important;
    margin-top:-120px !important;
  }

  .impacto-box{
    min-width:160px !important;
    max-width:180px !important;
  }

  .impacto-box h2{
    font-size:28px !important;
  }

  .impacto-box span{
    font-size:18px !important;
  }
	
}

/* REDES SOCIALES FLOTANTES */

.social-floating{
position:fixed;
left:10px;
top:32%;
transform:translateY(-50%);
z-index:999999;
display:flex;
flex-direction:column;
gap:10px;
}

.social-floating a{
width:50px;
height:50px;
display:flex;
align-items:center;
justify-content:center;
background:#000;
color:#fff;
text-decoration:none;
font-size:22px;
border-radius:0 12px 12px 0;
transition:0.3s;
box-shadow:0 0 10px rgba(0,0,0,.4);
}

.social-floating a:hover{
transform:translateX(5px);
background:#e10600;
}

@media(max-width:768px){

.social-floating{
left:0;
}

.social-floating a{
width:42px;
height:42px;
font-size:18px;
}	
	
}

@media(max-width:768px){

.galeria-top-grid{
  display:flex !important;
  flex-direction:column !important;
  gap:20px !important;
}

.top-card{
  position:relative !important;
  overflow:hidden !important;
  border-radius:16px !important;
  height:220px !important;
  margin-bottom:0 !important;
width:88% !important;
margin-left:auto !important;
margin-right:auto !important;
}

.top-card img{
  width:100% !important;
  height:220px !important;
  object-fit:cover !important;
  display:block !important;
}

.top-card .overlay{
  position:absolute !important;
  bottom:0 !important;
  left:0 !important;
  width:100% !important;
  background:rgba(0,0,0,0.6) !important;
}

}
/* =========================
   HOME MOBILE FIX
========================= */
@media(max-width:768px){

.hero{
  padding:110px 15px 140px !important;
}

.logo-central{
  max-width:240px !important;
  margin-bottom:15px !important;
}

/* TÍTULO */
.hero h1{
  font-size:clamp(18px,6vw,30px) !important;
  line-height:1.2 !important;
  white-space:normal !important;
  padding:0 10px !important;
}

/* SUBTEXTO */
.hero p{
  font-size:15px !important;
  line-height:1.5 !important;
  padding:0 15px !important;
}

/* BOTONES DONAR */
.donar{
  gap:8px !important;
  margin-top:20px !important;
}

.donar button{
  padding:10px 12px !important;
  font-size:14px !important;
  border-radius:8px !important;
}

/* FOOTER */
.footer-pro{
  flex-direction:column !important;
  gap:6px !important;
  text-align:center !important;
  padding:12px 10px !important;
  font-size:10px !important;
}

.footer-left,
.footer-center,
.footer-right{
  position:static !important;
  transform:none !important;
  width:100% !important;
  text-align:center !important;
}

}

/* =========================
   TICKER AVISOS HEADER
========================= */

.ticker-box{

  flex:1;

  max-width:340px;
  min-height:58px;

  margin:0 25px;

  overflow:hidden;

  border-radius:12px;

  background:rgba(0,198,255,0.10);

  border:1px solid rgba(0,198,255,0.25);

  backdrop-filter:blur(10px);

  position:relative;

  display:flex;
  align-items:center;

  box-shadow:
    0 0 15px rgba(0,198,255,0.12),
    inset 0 0 10px rgba(255,255,255,0.03);

}

/* TEXTO */

.ticker-text{

  position:absolute;

  width:100%;

  text-align:center;

  color:#fff;

  font-size:13px;
  font-weight:600;

  line-height:1.3;

  padding:0 12px;

  white-space:normal;

  

}

/* ANIMACIÓN */

@keyframes tickerVertical{

  0%{
    transform:translateY(100%);
    opacity:0;
  }

  10%{
    transform:translateY(0%);
    opacity:1;
  }

  40%{
    transform:translateY(0%);
    opacity:1;
  }

  50%{
    transform:translateY(-100%);
    opacity:0;
  }

  100%{
    transform:translateY(-100%);
    opacity:0;
  }

}

/* MOBILE */

@media(max-width:768px){

.ticker-box{

  max-width:180px;

  min-height:58px;

    margin:0 10px;

  }

.ticker-text{

  font-size:11px;

  line-height:1.2;

  padding:0 10px;

}

}