body{
margin:0;
font-family:Roboto;
background:#0b0f11;
color:white;
line-height:1.6;
}

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

/* NAVBAR */

.navbar{
background:#0b0f11;
padding:18px 0;
border-bottom:1px solid #1c2428;
position:sticky;
top:0;
}

.nav-content{
display:flex;
justify-content:space-between;
align-items:center;
}

.logo{
height:40px;
}

nav a{
margin-left:22px;
color:white;
text-decoration:none;
font-size:14px;
opacity:.85;
}

nav a:hover{
opacity:1;
}

/* HERO */

.hero{

padding:160px 0;
background:
radial-gradient(circle at 20% 10%, rgba(2,189,197,0.15), transparent 50%),
radial-gradient(circle at 80% 80%, rgba(1,115,128,0.12), transparent 50%);
}

.hero-grid{

display:grid;
grid-template-columns:1fr 1fr;
align-items:center;
gap:60px;

}

.hero-text h1{

font-size:48px;
line-height:1.2;
margin-bottom:20px;

}

.hero-text p{

max-width:500px;
margin-bottom:30px;
opacity:.85;

}

.hero-buttons{

display:flex;
gap:16px;

}

.btn-outline{

border:1px solid #02bdc5;
padding:14px 28px;
border-radius:8px;
color:#02bdc5;
text-decoration:none;

}

/* BOTÓN */

.btn{
background:#02bdc5;
padding:14px 28px;
border-radius:8px;
text-decoration:none;
color:white;
transition:all .25s ease;
}

.btn:hover{
transform:translateY(-2px);
box-shadow:0 6px 18px rgba(2,189,197,0.25);
}

/* SECCIONES */

.section{
padding:110px 0;
}

.section h2{
font-size:34px;
margin-bottom:20px;
}

/* GRID SERVICIOS */

.grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;
margin-top:40px;
}

/* CARDS */

.card{
background:#12181c;
padding:35px;
border-radius:12px;
border:1px solid #1c2428;
}

.card h3{
margin-top:0;
margin-bottom:10px;
}

.card p{
opacity:.75;
}

/* SECCIÓN OSCURA */

.dark{
background:#12181c;
}

/* LISTA BENEFICIOS */

.dark ul{
margin-top:25px;
padding-left:20px;
}

.dark li{
margin-bottom:10px;
opacity:.85;
}

/* CONTACTO */

.contact{
max-width:500px;
}

.contact form{
display:flex;
flex-direction:column;
gap:15px;
margin-top:30px;
}

input, textarea{
padding:12px;
border-radius:6px;
border:none;
background:#1b2226;
color:white;
}

textarea{
min-height:120px;
}

/* FOOTER */

footer{
padding:45px 0;
text-align:center;
background:#12181c;
font-size:14px;
opacity:.8;
}

/* HERO GRID */

.hero{
padding:150px 0;
background:
radial-gradient(circle at top,#01738022,transparent 60%);
}

.hero-grid{
display:grid;
grid-template-columns:1fr 1fr;
align-items:center;
gap:60px;
}

.hero-text h1{
font-size:46px;
margin-bottom:20px;
}

.hero-text p{
max-width:500px;
margin-bottom:30px;
opacity:.85;
}

/* BOTONES */

.hero-buttons{
display:flex;
gap:15px;
}

.btn-outline{
border:1px solid #02bdc5;
padding:14px 30px;
border-radius:8px;
color:#02bdc5;
text-decoration:none;
}

/* GRÁFICO HERO */

.hero-graphic{
display:flex;
justify-content:center;
}

.graphic-box{
width:320px;
height:320px;
background:
linear-gradient(135deg,#017380,#02bdc5);
border-radius:20px;
opacity:.25;
}

/* RESPONSIVE */

@media(max-width:900px){

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

.hero-text p{
margin:auto;
margin-bottom:30px;
}

.hero-buttons{
justify-content:center;
}

.hero-graphic{
margin-top:40px;
}

}

/* GRID SERVICIOS */

.services-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;
margin-top:50px;
}

/* CARD SERVICIO */

.service-card{

background:#12181c;
padding:35px;
border-radius:12px;
border:1px solid #1c2428;
transition:all .3s ease;

}

/* HOVER */

.service-card:hover{

transform:translateY(-6px);
border-color:#02bdc5;

}

/* ICONO */

.icon{

font-size:30px;
margin-bottom:15px;

}

/* TEXTO */

.service-card h3{

margin-bottom:10px;

}

.service-card p{

opacity:.8;

}

/* RESPONSIVE */

@media(max-width:900px){

.services-grid{

grid-template-columns:1fr;

}

}



/* TECNOLOGÍAS */

.tech{

background:#0f1417;

}

.tech-intro{

max-width:600px;
margin-bottom:40px;
opacity:.8;

}

.tech-grid{

display:grid;
grid-template-columns:repeat(3,1fr);
gap:20px;
margin-top:20px;

}

.tech-item{

background:#12181c;
border:1px solid #1c2428;
padding:18px;
border-radius:10px;
text-align:center;
font-weight:500;
transition:all .3s ease;

}

.tech-item:hover{

border-color:#02bdc5;
transform:translateY(-4px);

}

/* RESPONSIVE */

@media(max-width:900px){

.tech-grid{

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

}

}

/* INTRO SECCIÓN */

.intro{
max-width:650px;
margin-bottom:40px;
opacity:.8;
}

/* =========================
   POR QUÉ FUREL / BENEFITS
========================= */

.benefits-grid{

display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;

margin-top:50px;

}

/* CARD */

.benefit-card{

background:#12181c;
border:1px solid #1c2428;
border-radius:14px;

padding:40px;
text-align:center;

transition:all .35s ease;

/* animación al cargar */

opacity:0;
transform:translateY(30px);
animation:fadeUp .7s ease forwards;

}

/* aparición en cascada */

.benefit-card:nth-child(1){
animation-delay:.1s;
}

.benefit-card:nth-child(2){
animation-delay:.25s;
}

.benefit-card:nth-child(3){
animation-delay:.4s;
}

/* hover */

.benefit-card:hover{

transform:translateY(-6px);
border-color:#02bdc5;
box-shadow:0 12px 30px rgba(2,189,197,.15);

}

/* ICONO */

.benefit-icon{

width:64px;
height:64px;

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

margin:0 auto 22px auto;

background:#0f1417;
border:1px solid #1c2428;
border-radius:14px;

font-size:30px;
color:#02bdc5;

transition:.3s ease;

}

/* animación icono */

.benefit-card:hover .benefit-icon{

transform:scale(1.1);
border-color:#02bdc5;

}

/* TITULO */

.benefit-card h3{

font-size:20px;
margin-bottom:12px;

}

/* TEXTO */

.benefit-card p{

opacity:.85;
line-height:1.6;

}

/* ANIMACIÓN */

@keyframes fadeUp{

to{
opacity:1;
transform:translateY(0);
}

}

/* RESPONSIVE */

@media(max-width:900px){

.benefits-grid{

grid-template-columns:1fr;

}

}


/* PROCESO */

.process{
background:#0f1417;
}

.process-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:30px;
margin-top:40px;
}

.process-step{
background:#12181c;
border:1px solid #1c2428;
padding:30px;
border-radius:12px;
transition:.3s;
}

.process-step:hover{
border-color:#02bdc5;
transform:translateY(-5px);
}

/* NUMERO */

.step-number{
width:36px;
height:36px;
background:#02bdc5;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-weight:600;
margin-bottom:12px;
}

/* RESPONSIVE */

@media(max-width:900px){

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

}

/* CTA PRINCIPAL */

.cta-block{
padding:120px 0;
background:
linear-gradient(135deg,#015a63,#017380);
text-align:center;
}

.cta-content{
max-width:700px;
}

.cta-block h2{
font-size:36px;
margin-bottom:20px;
}

.cta-block p{
opacity:.9;
margin-bottom:30px;
}

/* CONTACTO */

.contact-section{
background:#0f1417;
}

.contact-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:60px;
align-items:start;
}

/* INFO */

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

.contact-email{
font-weight:500;
}

/* FORMULARIO */

.contact-form{
background:#12181c;
border:1px solid #1c2428;
padding:35px;
border-radius:12px;
}

/* GRUPO */

.form-group{
display:flex;
flex-direction:column;
margin-bottom:18px;
}

.form-group label{
margin-bottom:6px;
font-size:14px;
opacity:.8;
}

/* INPUTS */

input, textarea{
padding:12px;
border-radius:6px;
border:none;
background:#1b2226;
color:white;
}

textarea{
min-height:120px;
}

/* RESPONSIVE */

@media(max-width:900px){

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

}

/* FOOTER */

.footer{
background:#0b0f11;
border-top:1px solid #1c2428;
padding:70px 0 20px 0;
}

.footer-grid{
display:grid;
grid-template-columns:2fr 1fr 1fr 1fr;
gap:40px;
}

.footer-logo{
height:40px;
margin-bottom:15px;
}

.footer-links h4{
margin-bottom:15px;
font-size:16px;
}

.footer-links a{
display:block;
margin-bottom:8px;
text-decoration:none;
color:white;
opacity:.75;
}

.footer-links a:hover{
opacity:1;
}

.footer-links p{
margin-bottom:8px;
opacity:.75;
}

.footer-bottom{
margin-top:40px;
text-align:center;
opacity:.6;
font-size:14px;
}

/* RESPONSIVE */

@media(max-width:900px){

.footer-grid{
grid-template-columns:1fr;
gap:30px;
text-align:center;
}

}

.service-icon{

width:60px;
height:60px;
display:flex;
align-items:center;
justify-content:center;
margin:0 auto 20px auto;
background:#0f1417;
border-radius:10px;
padding:12px;

}

.service-card{

background:#12181c;
padding:40px 35px;
border-radius:12px;
border:1px solid #1c2428;
transition:all .35s ease;
text-align:center;
position:relative;

}

.service-card:hover{

transform:translateY(-8px);
border-color:#02bdc5;
box-shadow:0 10px 30px rgba(2,189,197,0.15);

}

.service-card:hover{

transform:translateY(-8px);
border-color:#02bdc5;
box-shadow:0 10px 30px rgba(2,189,197,0.15);

}

.service-icon{

width:60px;
height:60px;
display:block;
margin:0 auto 20px auto;
transition:all .3s ease;

}

.hero-graphic{

position:relative;
height:350px;

}

.tech-circle{

position:absolute;
width:280px;
height:280px;
border-radius:50%;
background:linear-gradient(135deg,#017380,#02bdc5);
opacity:.15;
top:20px;
right:40px;

}

.tech-circle.small{

width:160px;
height:160px;
opacity:.2;
bottom:40px;
left:40px;

}

@media(max-width:900px){

.hero-grid{

grid-template-columns:1fr;
text-align:center;

}

.hero-text p{

margin:auto;
margin-bottom:30px;

}

.hero-buttons{

justify-content:center;

}

.hero-graphic{

display:none;

}

}

.hero{
position:relative;
overflow:hidden;
}

#particles-js{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:0;
}

.hero-grid{
position:relative;
z-index:2;
}

/* Estado inicial */

.hero-title,
.hero-subtitle,
.hero-cta{
opacity:0;
transform:translateY(25px);
animation:heroFade 0.8s ease forwards;
}

/* Secuencia */

.hero-title{
animation-delay:0.2s;
}

.hero-subtitle{
animation-delay:0.6s;
}

.hero-cta{
animation-delay:1s;
}

/* Keyframes */

@keyframes heroFade{

to{
opacity:1;
transform:translateY(0);
}

}

.hero-image{

width:100%;
max-width:520px;
opacity:.85;
filter:drop-shadow(0 0 30px rgba(2,189,197,.25));

}

.hero-graphic{

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

}

/* Animación flotante */

.floating{
animation:floatingAnimation 6s ease-in-out infinite;
}

@keyframes floatingAnimation{

0%{
transform:translateY(0px);
}

50%{
transform:translateY(-15px);
}

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

}

.hero-image{

width:100%;
max-width:520px;
opacity:.9;
filter:drop-shadow(0 0 30px rgba(2,189,197,.25));
transition:all .3s ease;

}

/* SECCIÓN TECNOLOGÍAS */

.tech-section{
background:#0f1417;
}

.tech-description{
max-width:600px;
opacity:.8;
margin-bottom:40px;
}

/* GRID STACK */

.tech-stack{
display:flex;
flex-wrap:wrap;
gap:18px;
margin-top:20px;
}

/* CHIP TECNOLÓGICO */

.tech-chip{

padding:12px 20px;
background:#12181c;
border:1px solid #1c2428;
border-radius:30px;
font-size:14px;
font-weight:500;
transition:all .3s ease;

}

/* HOVER */

.tech-chip:hover{

border-color:#02bdc5;
transform:translateY(-2px);
box-shadow:0 6px 18px rgba(2,189,197,.15);

}

.tech-section{
background:#0f1417;
}

.tech-description{
max-width:620px;
opacity:.8;
margin-bottom:40px;
}

.tech-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:22px;
margin-top:30px;
}

.tech-card{

display:flex;
align-items:center;
gap:12px;

padding:14px 18px;

background:#12181c;
border:1px solid #1c2428;
border-radius:12px;

/* animación inicial */
opacity:0;
transform:translateY(30px);

transition:all .6s ease;

}

#tecnologias.visible .tech-card{

opacity:1;
transform:translateY(0);

}

#tecnologias.visible .tech-card:nth-child(1){transition-delay:.1s;}
#tecnologias.visible .tech-card:nth-child(2){transition-delay:.2s;}
#tecnologias.visible .tech-card:nth-child(3){transition-delay:.3s;}
#tecnologias.visible .tech-card:nth-child(4){transition-delay:.4s;}
#tecnologias.visible .tech-card:nth-child(5){transition-delay:.5s;}
#tecnologias.visible .tech-card:nth-child(6){transition-delay:.6s;}


.tech-card img{
width:26px;
height:26px;
}

.tech-card span{
font-size:15px;
font-weight:500;
}

.tech-card:hover{

border-color:#02bdc5;
transform:translateY(-4px);
box-shadow:0 10px 25px rgba(2,189,197,.18);

}


@media(max-width:900px){

.tech-grid{
grid-template-columns:repeat(2,1fr);
}

}

.tech-icon{

font-size:50px;
color:#02bdc5;

}

#form-message{
margin-top:15px;
font-size:14px;
color:#02bdc5;
}


/* BOTÓN VOLVER ARRIBA */

#backToTop{

position:fixed;
bottom:30px;
right:30px;

width:48px;
height:48px;

border:none;
border-radius:50%;

background:#02bdc5;
color:#fff;

font-size:20px;
cursor:pointer;

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

box-shadow:0 8px 20px rgba(0,0,0,.3);

opacity:0;
visibility:hidden;

transition:all .3s ease;

z-index:999;

}

#backToTop.show{

opacity:1;
visibility:visible;

}

#backToTop:hover{

transform:translateY(-3px);
box-shadow:0 12px 25px rgba(2,189,197,.4);

}

/* =========================
   ANIMACIÓN SECCIÓN SERVICIOS
========================= */

#servicios{

opacity:0;
transform:translateY(40px);
transition:all .8s cubic-bezier(.25,.8,.25,1);

}

/* cuando entra en pantalla */

#servicios.visible{

opacity:1;
transform:translateY(0);

}


/* =========================
   ANIMACIÓN TECNOLOGÍAS
========================= */

#tecnologias{

opacity:0;
transform:translateY(40px);
transition:all .8s cubic-bezier(.25,.8,.25,1);

}

#tecnologias.visible{

opacity:1;
transform:translateY(0);

}

#tecnologias.visible .tech-card:nth-child(1){transition-delay:.1s;}
#tecnologias.visible .tech-card:nth-child(2){transition-delay:.2s;}
#tecnologias.visible .tech-card:nth-child(3){transition-delay:.3s;}
#tecnologias.visible .tech-card:nth-child(4){transition-delay:.4s;}


/* =========================
   PARALLAX TECNOLOGÍA
========================= */

.parallax-tech{

height:320px;

background-image:url("../assets/images/tech-parallax.svg");
background-size:cover;
background-position:center;

background-attachment:fixed;

position:relative;

}

/* overlay oscuro para integrarlo con el diseño */

.parallax-tech::after{

content:"";

position:absolute;
top:0;
left:0;

width:100%;
height:100%;

background:rgba(0,0,0,0.45);

}

/* ======= Ajustes responsivos: móvil ======= */
/* breakpoint: móviles / tablets pequeñas */
@media (max-width: 900px) {

  /* 1) Hero: esconder la columna gráfica y la imagen */
  .hero-graphic,
  .hero-image {
    display: none !important;    /* oculta la ilustración del hero en móvil */
    visibility: hidden !important;
    height: 0 !important;
    width: 0 !important;
  }

  /* reduce padding del hero para móvil (mejor legibilidad) */
  .hero {
    padding: 80px 0 !important;
    background-position: center top;
  }

  .hero-text h1 {
    font-size: 28px !important;
    line-height: 1.15 !important;
  }

  .hero-text p {
    font-size: 15px !important;
    max-width: 100% !important;
  }

  /* 2) Partículas: ocultar el canvas de particles (si está presente) */
  #particles-js {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    width: 0 !important;
  }

  /* 3) Parallax: reemplazar parallax por fondo estático / ocultarlo */
  .parallax-tech {
    background-attachment: scroll !important; /* evita fixed en móviles (mejora rendimiento y evita glitches) */
    height: 180px !important;                 /* menor altura en móvil */
  }

  .parallax-tech::after {
    background: rgba(0,0,0,0.55) !important;  /* más overlay para legibilidad en pantallas pequeñas */
  }

  /* si prefieres ocultar totalmente la franja parallax en móvil, descomenta:
  .parallax-tech { display: none !important; visibility: hidden !important; height: 0 !important; }
  */

  /* Asegura que el layout de hero quede 1-columna */
  .hero-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  /* Botones más grandes y centrados */
  .hero-buttons { justify-content: center !important; }
  .btn, .btn-outline { padding: 12px 20px !important; font-size: 15px !important; }

}

@media (max-width:900px){

.parallax-tech{
background-attachment:scroll;
}

}