/* RESET Y GLOBAL */
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Segoe UI',sans-serif; background:#222; color:#f2f2f2; font-weight:600; line-height:1.6; scroll-behavior:smooth; text-align:center;}
a { text-decoration:none; color:inherit;}
img { max-width:100%; display:block; }
.section-padding { padding:4rem 2rem; }

/* NAVBAR */
.navbar { display:flex; justify-content:space-between; align-items:center; padding:1rem 2rem; background:rgba(20,20,20,0.9); backdrop-filter:blur(8px); position:sticky; top:0; z-index:1000;}
.logo { font-size:1.8rem; font-weight:700;}
.nav-links { display:flex; gap:2rem;}
.nav-links a { color:#f2f2f2; font-weight:600; transition:color 0.3s;}
.nav-links a:hover { color:#00bfff;}
.hamburger { display:none; cursor:pointer; font-size:1.5rem;}
@media(max-width:900px){ .nav-links { display:none; flex-direction:column; background:#111; position:absolute; top:100%; right:0; width:200px;} .nav-links.active { display:flex;} .hamburger { display:block;} }

/* SLIDER */
.slider { height:100vh; position:relative; overflow:hidden;}
.slides, .slide { position:absolute; inset:0; width:100%; height:100%;}
.slide { background-size:cover; background-position:center; opacity:0; transition:opacity 1s ease-in-out, transform 1s ease-in-out;}
.slide.active { opacity:1; transform:scale(1);}
.overlay { background:rgba(0,0,0,0.55); display:flex; flex-direction:column; justify-content:center; align-items:center; height:100%; text-align:center; padding:2rem;}
.overlay h1 { font-size:3rem; font-weight:700; margin-bottom:1rem;}
.overlay p { font-size:1.3rem; max-width:700px; margin:auto;}
.slider-dots { position:absolute; bottom:20px; width:100%; display:flex; justify-content:center; gap:10px;}
.slider-dots span { width:12px; height:12px; background:#555; border-radius:50%; cursor:pointer; transition:background 0.3s;}
.slider-dots .active { background:#00bfff; }

/* ABOUT */
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:2rem; align-items:center;}
.about-text p { margin-bottom:1rem;}
.about-image img { border-radius:15px;}
@media(max-width:900px){ .about-grid { grid-template-columns:1fr; }}

/* SERVICIOS */
.servicios-grid { display:grid; gap:2rem; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); margin-top:2rem;}
.card { background:#2a2a2a; border-radius:15px; overflow:hidden; box-shadow:0 8px 20px rgba(0,0,0,0.4); transition:transform 0.4s ease, box-shadow 0.4s ease; text-align:center; padding-bottom:1rem;}
.card img { width:100%; display:block;}
.card h3 { font-size:1.3rem; margin:1rem 0; font-weight:700;}
.card p { padding:0 1rem 1rem; }
.card:hover { transform:translateY(-8px) scale(1.03); box-shadow:0 12px 30px rgba(0,0,0,0.6); }

/* SERVICIO WEB */
.servicio-web { display:grid; grid-template-columns:1fr 1fr; gap:2rem; background:#2b2b2b; border-radius:15px; padding:2rem; align-items:center; margin-bottom:2rem;}
.servicio-web-left { display:flex; justify-content:center; align-items:center;}
.servicio-web-right h3 { font-size:1.5rem; margin-bottom:1rem;}
.servicio-web-right p { margin-bottom:1.5rem; text-align:left;}
.servicio-web-right .btn-primary { align-self:flex-start;}

/* CARRUSEL DE LOGOS */
.logos-carousel { display:flex; justify-content:center; align-items:center; gap:2rem; flex-wrap:wrap; margin-top:2rem;}
.logo-item { width:150px; height:80px; background:#fff; border-radius:10px;}

/* MINI CASOS */
.mini-casos-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:2rem; margin-top:2rem;}
.mini-caso { background:#2a2a2a; padding:1.5rem; border-radius:12px; text-align:center;}
.mini-caso h3 { margin-bottom:1rem; font-size:1.2rem; font-weight:700;}

/* TESTIMONIOS */
.testimonios-carousel { position:relative; overflow:hidden; max-width:700px; margin:auto;}
.testimonio { opacity:0; transition:opacity 0.8s ease-in-out; }
.testimonio.active { opacity:1;}
.testimonio p { font-style:italic; font-size:1.1rem; margin-bottom:1rem;}
.testimonio h4 { color:#00bfff; font-weight:600; }
.carousel-dots { display:flex; justify-content:center; margin-top:1rem; gap:.5rem; }
.carousel-dots span { width:10px; height:10px; background:#555; border-radius:50%; cursor:pointer; transition:background 0.3s; }
.carousel-dots .active { background:#00bfff; }

/* CTA */
.cta img { margin-bottom:2rem; border-radius:15px;}
.cta .btn-primary { margin-top:1rem;}

/* FORMULARIO */
.formulario-moderno { max-width:600px; margin:0 auto; display:flex; flex-direction:column; gap:1.5rem;}
.formulario-moderno .form-group { position:relative; display:flex; align-items:center; background:#2a2a2a; border-radius:12px; padding:0.8rem 1rem; transition: transform 0.3s ease, box-shadow 0.3s ease;}
.formulario-moderno .form-group i { color:#00bfff; margin-right:0.8rem; font-size:1.2rem;}
.formulario-moderno input, .formulario-moderno textarea { background:transparent; border:none; outline:none; color:#f2f2f2; font-size:1rem; flex:1; }
.formulario-moderno input::placeholder, .formulario-moderno textarea::placeholder { color:#aaa; }
.formulario-moderno .form-group:focus-within { box-shadow:0 0 10px rgba(0,191,255,0.7); transform:scale(1.02);}
.formulario-moderno textarea { resize:vertical; min-height:120px; }
.formulario-moderno .btn-primary { align-self:center; padding:1rem 2rem; font-size:1.1rem; border-radius:50px; box-shadow:0 0 15px rgba(0,191,255,0.6); transition: transform 0.3s ease, box-shadow 0.3s ease; }
.formulario-moderno .btn-primary:hover { transform:scale(1.05); box-shadow:0 0 25px rgba(0,191,255,0.9); }

/* FOOTER */
.footer { background:#111; color:#ccc; padding:4rem 2rem 2rem; }
.footer-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:2rem; margin-bottom:2rem; }
.footer-grid h4 { margin-bottom:1rem; }
.footer-grid a { display:block; color:#ccc; margin-bottom:0.5rem; transition:color 0.3s; }
.footer-grid a:hover { color:#00bfff; }
.footer-social a { margin-right:1rem; font-size:1.2rem; }
.footer-bottom { text-align:center; font-size:0.9rem; }

/* ANIMACIONES */
.reveal { opacity:0; transform:translateY(30px); transition:all 0.8s ease; }
.reveal.show { opacity:1; transform:translateY(0);}