:root {
  --blanco: #ffffff;
  --azul-oscuro: #00171f;
  --azul-medio: #003459;
  --azul-brillante: #007ea7;
  --azul-claro: #00a8e8;
  --verde-wsp: #25D366;
}

* {margin:0;padding:0;box-sizing:border-box;}
body {
  font-family:'Segoe UI',sans-serif;
  background:var(--blanco);
  color:var(--azul-oscuro);
  overflow-x:hidden;
  scroll-behavior:smooth;
}

/* HEADER */
header {
  background:linear-gradient(135deg,var(--azul-oscuro),var(--azul-medio));
  padding:1rem 0;
  position:fixed;
  width:100%;
  top:0;
  z-index:1000;
  box-shadow:0 4px 20px rgba(0,23,31,.4);
  transition:.3s;
}
header.scrolled {padding:.5rem 0;box-shadow:0 6px 30px rgba(0,23,31,.6);}
nav {
  max-width:1400px;
  margin:0 auto;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:0 2rem;
  position:relative;
}
.logo {display:flex;align-items:center;gap:1rem;color:#fff;text-decoration:none;z-index:1001;}
.logo i {font-size:2.5rem;color:var(--azul-claro);}
.logo-text h1 {font-size:1.8rem;font-weight:700;}
.logo-text p {font-size:.85rem;color:var(--azul-claro);}

/* MENÚ HAMBURGUESA */
.hamburger {
  display:none;
  flex-direction:column;
  gap:5px;
  background:transparent;
  border:none;
  cursor:pointer;
  padding:10px;
  z-index:1001;
  transition:.3s;
}
.hamburger span {
  width:30px;
  height:3px;
  background:var(--azul-claro);
  border-radius:3px;
  transition:all .3s ease;
}
.hamburger.active span:nth-child(1) {
  transform:translateY(8px) rotate(45deg);
}
.hamburger.active span:nth-child(2) {
  opacity:0;
}
.hamburger.active span:nth-child(3) {
  transform:translateY(-8px) rotate(-45deg);
}

.nav-links {display:flex;gap:2rem;list-style:none;align-items:center;}
.nav-links a {color:#fff;text-decoration:none;font-weight:500;position:relative;transition:.3s;}
.nav-links a::after {
  content:'';position:absolute;bottom:-5px;left:0;width:0;height:2px;
  background:var(--azul-claro);transition:.3s;
}
.nav-links a:hover::after {width:100%;}
.login-btn {
  background:linear-gradient(135deg,var(--azul-brillante),var(--azul-claro));
  color:#fff!important;padding:.7rem 2rem;border-radius:50px;font-weight:600;text-decoration:none;
  box-shadow:0 4px 15px rgba(0,168,232,.3);
}
.login-btn:hover {
  transform:translateY(-2px);
  box-shadow:0 6px 20px rgba(0,168,232,.5);
}

/* RESPONSIVE MENU */
@media (max-width: 968px) {
  .hamburger {
    display:flex;
  }
  
  .nav-links {
    position:fixed;
    top:0;
    right:-100%;
    width:300px;
    height:100vh;
    background:linear-gradient(180deg,var(--azul-oscuro),var(--azul-medio));
    flex-direction:column;
    justify-content:center;
    gap:2rem;
    padding:2rem;
    box-shadow:-5px 0 25px rgba(0,0,0,.3);
    transition:right .4s ease;
  }
  
  .nav-links.active {
    right:0;
  }
  
  .nav-links li {
    width:100%;
    text-align:center;
  }
  
  .nav-links a {
    display:block;
    padding:1rem;
    font-size:1.2rem;
  }
  
  .login-btn {
    display:inline-block;
    width:auto;
  }
  
  .logo-text h1 {
    font-size:1.5rem;
  }
  
  .logo-text p {
    font-size:.75rem;
  }
  
  .logo i {
    font-size:2rem;
  }
}

@media (max-width: 480px) {
  nav {
    padding:0 1rem;
  }
  
  .nav-links {
    width:250px;
  }
  
  .logo-text h1 {
    font-size:1.3rem;
  }
  
  .logo i {
    font-size:1.8rem;
  }
}

/* HERO */
.hero {
  margin-top: 80px;
  padding: 4rem 2rem 8rem;
  text-align: center;
  position: relative;
  background: linear-gradient(135deg, var(--azul-oscuro), var(--azul-medio), var(--azul-brillante));
  color: #fff;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="rgba(0,168,232,0.1)" d="M0,96L48,112C96,128,192,160,288,160C384,160,480,128,576,122.7C672,117,768,139,864,149.3C960,160,1056,160,1152,138.7C1248,117,1344,75,1392,53.3L1440,32L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>') no-repeat bottom;
  background-size: cover;
  opacity: 0.3;
}
.hero-content {
  position: relative;
  z-index: 2;
  max-width: 900px;
  margin: 0 auto 3rem;
}
.hero h2 { 
  font-size: 3rem; 
  margin-bottom: 1rem;
  text-shadow: 2px 2px 10px rgba(0,0,0,0.3);
}
.hero p { 
  font-size: 1.2rem; 
  color: var(--azul-claro);
  text-shadow: 1px 1px 5px rgba(0,0,0,0.2);
}

/* BOTONES CTA */
.cta-buttons {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  margin-top: 2rem;
  flex-wrap: wrap;
}
.cta-btn {
  padding: 1rem 2.5rem;
  border-radius: 50px;
  text-decoration: none;
  font-weight: 600;
  font-size: 1.1rem;
  transition: all 0.3s ease;
}
.cta-primary {
  background: linear-gradient(135deg, var(--azul-claro), var(--azul-brillante));
  color: #fff;
  box-shadow: 0 6px 20px rgba(0, 168, 232, 0.4);
}
.cta-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 30px rgba(0, 168, 232, 0.6);
}
.cta-secondary {
  background: transparent;
  color: #fff;
  border: 2px solid var(--azul-claro);
}
.cta-secondary:hover {
  background: rgba(0, 168, 232, 0.15);
  transform: translateY(-3px);
}

/* CAROUSEL MODERNO 3D */
.carousel-container {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem 0 6rem;
  z-index: 2;
}

.carousel-wrapper {
  position: relative;
  width: 100%;
  height: 500px;
  perspective: 1500px;
  overflow: hidden;
}

.carousel-track {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-style: preserve-3d;
}

.carousel-slide {
  position: absolute;
  width: 70%;
  max-width: 650px;
  height: 400px;
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 0;
  transform: translateX(100%) scale(0.8) rotateY(45deg);
  pointer-events: none;
}

.carousel-slide.active {
  opacity: 1;
  transform: translateX(0) scale(1) rotateY(0deg);
  z-index: 10;
  pointer-events: auto;
}

.carousel-slide.prev {
  opacity: 0.5;
  transform: translateX(-120%) scale(0.85) rotateY(-30deg);
  z-index: 5;
  filter: brightness(0.7);
}

.carousel-slide.next {
  opacity: 0.5;
  transform: translateX(120%) scale(0.85) rotateY(30deg);
  z-index: 5;
  filter: brightness(0.7);
}

.slide-content {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
  background: #000;
}

.slide-content img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}

.carousel-slide.active .slide-content img {
  transform: scale(1.05);
}

.slide-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 2rem;
  background: linear-gradient(to top, rgba(0, 23, 31, 0.95), transparent);
  transform: translateY(100%);
  transition: transform 0.4s ease;
}

.carousel-slide.active .slide-overlay {
  transform: translateY(0);
}

.slide-overlay h3 {
  font-size: 1.8rem;
  color: var(--azul-claro);
  margin-bottom: 0.5rem;
}

.slide-overlay p {
  font-size: 1.1rem;
  color: #fff;
}

/* CONTROLES DEL CAROUSEL */
.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, var(--azul-brillante), var(--azul-claro));
  color: #fff;
  font-size: 1.5rem;
  cursor: pointer;
  z-index: 20;
  transition: all 0.3s ease;
  box-shadow: 0 6px 20px rgba(0, 126, 167, 0.4);
}

.carousel-btn:hover {
  transform: translateY(-50%) scale(1.1);
  box-shadow: 0 8px 30px rgba(0, 126, 167, 0.6);
}

.prev-btn {
  left: 10px;
}

.next-btn {
  right: 10px;
}

/* INDICADORES */
.carousel-indicators {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.8rem;
  z-index: 15;
}

.carousel-indicators span {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: all 0.3s ease;
  border: 2px solid transparent;
}

.carousel-indicators span.active {
  background: var(--azul-claro);
  border-color: #fff;
  transform: scale(1.3);
  box-shadow: 0 0 10px rgba(0, 168, 232, 0.8);
}

/* MINIATURAS */
.carousel-thumbnails {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 2rem;
  flex-wrap: wrap;
}

.thumbnail {
  width: 80px;
  height: 60px;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  border: 3px solid transparent;
  transition: all 0.3s ease;
  opacity: 0.6;
}

.thumbnail:hover {
  opacity: 1;
  transform: translateY(-5px);
}

.thumbnail.active {
  border-color: var(--azul-claro);
  opacity: 1;
  box-shadow: 0 5px 20px rgba(0, 168, 232, 0.5);
}

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

/* RESPONSIVE CAROUSEL */
@media (max-width: 1024px) {
  .carousel-wrapper {
    height: 400px;
  }
  
  .carousel-slide {
    width: 80%;
    height: 320px;
  }
  
  .carousel-btn {
    width: 50px;
    height: 50px;
    font-size: 1.2rem;
  }
  
  .slide-overlay h3 {
    font-size: 1.5rem;
  }
  
  .slide-overlay p {
    font-size: 1rem;
  }
}

@media (max-width: 768px) {
  .hero h2 {
    font-size: 2.2rem;
  }
  
  .carousel-wrapper {
    height: 350px;
  }
  
  .carousel-slide {
    width: 90%;
    height: 280px;
  }
  
  .carousel-slide.prev,
  .carousel-slide.next {
    display: none;
  }
  
  .carousel-btn {
    width: 45px;
    height: 45px;
    font-size: 1.1rem;
  }
  
  .prev-btn {
    left: 5px;
  }
  
  .next-btn {
    right: 5px;
  }
  
  .thumbnail {
    width: 60px;
    height: 45px;
  }
  
  .slide-overlay {
    padding: 1.5rem;
  }
  
  .slide-overlay h3 {
    font-size: 1.3rem;
  }
  
  .slide-overlay p {
    font-size: 0.9rem;
  }
}

@media (max-width: 480px) {
  .hero {
    padding: 3rem 1rem 6rem;
  }
  
  .hero h2 {
    font-size: 1.8rem;
  }
  
  .hero p {
    font-size: 1rem;
  }
  
  .cta-btn {
    padding: 0.8rem 1.8rem;
    font-size: 1rem;
  }
  
  .carousel-wrapper {
    height: 280px;
  }
  
  .carousel-slide {
    width: 95%;
    height: 220px;
  }
  
  .carousel-btn {
    width: 40px;
    height: 40px;
    font-size: 1rem;
  }
  
  .carousel-thumbnails {
    gap: 0.5rem;
  }
  
  .thumbnail {
    width: 50px;
    height: 38px;
  }
  
  .slide-overlay {
    padding: 1rem;
  }
  
  .slide-overlay h3 {
    font-size: 1.1rem;
  }
  
  .slide-overlay p {
    font-size: 0.85rem;
  }
}

/* BENEFICIOS */
.benefits{padding:6rem 2rem;background:#f9f9f9;text-align:center;}
.benefits h2{font-size:2.5rem;margin-bottom:2rem;}
.benefits-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2rem;}
.benefit{padding:2rem;background:#fff;border-radius:15px;box-shadow:0 10px 25px rgba(0,0,0,.05);transition:.3s;}
.benefit i{font-size:2rem;color:var(--azul-claro);margin-bottom:1rem;}
.benefit:hover{transform:translateY(-8px);}

/* SERVICIOS */
.services{padding:6rem 2rem;max-width:1400px;margin:0 auto;}
.section-title{text-align:center;margin-bottom:4rem;}
.section-title h2{font-size:2.8rem;color:var(--azul-oscuro);}
.services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2rem;}
.service-card{background:#fff;padding:2rem;border-radius:15px;box-shadow:0 10px 25px rgba(0,0,0,.08);transition:.3s;text-align:center;}
.service-icon{
  width:70px;height:70px;border-radius:15px;
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 1rem;
  color: var(--azul-claro);
  font-size:2rem;
  background: rgba(0,168,232,0.1);
  transition:.3s;
}
.service-card:hover{transform:translateY(-8px);box-shadow:0 12px 30px rgba(0,0,0,.12);}
.service-card:hover .service-icon{background:var(--azul-claro);color:#fff;}

/* TESTIMONIOS */
.testimonials{padding:6rem 2rem;background:#f9f9f9;text-align:center;}
.testimonials h2{font-size:2.5rem;margin-bottom:2rem;}
.testimonial-carousel{max-width:700px;margin:0 auto;position:relative;}
.testimonial{display:none;}
.testimonial.active{display:block;animation:fade 1s;}
.testimonial p{font-size:1.2rem;margin-bottom:1rem;}
@keyframes fade{from{opacity:0;}to{opacity:1;}}

/* PORTAFOLIO */
.portfolio{padding:6rem 2rem;text-align:center;}
.portfolio h2{font-size:2.5rem;margin-bottom:2rem;}
.portfolio-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem;}
.portfolio-item{border-radius:15px;overflow:hidden;box-shadow:0 8px 20px rgba(0,0,0,.1);}
.portfolio-item img{width:100%;display:block;transition:.3s;}
.portfolio-item:hover img{transform:scale(1.05);}

/* CONTACTO */
.contact{padding:6rem 2rem;background:#f4f6f8;}
.contact-container{max-width:800px;margin:0 auto;}
.form-group{margin-bottom:1.5rem;}
.form-group label{display:block;margin-bottom:.5rem;color:var(--azul-oscuro);font-weight:600;}
.form-group input,.form-group textarea{
  width:100%;padding:1rem;border:2px solid #ddd;border-radius:10px;
  font-size:1rem;transition:.3s;font-family:inherit;
}
.form-group input:focus,.form-group textarea:focus{
  outline:none;border-color:var(--azul-claro);
  box-shadow:0 0 0 3px rgba(0,168,232,.2);
}
.form-group textarea{resize:vertical;min-height:150px;}
.submit-btn{
  background:linear-gradient(135deg,var(--azul-medio),var(--azul-claro));
  color:#fff;padding:1rem 3rem;border:none;border-radius:50px;
  font-size:1.1rem;font-weight:600;cursor:pointer;width:100%;
  box-shadow:0 6px 20px rgba(0,23,31,.3);
}
.submit-btn:hover{transform:translateY(-2px);box-shadow:0 8px 30px rgba(0,23,31,.4);}

/* FOOTER */
footer{background:var(--azul-oscuro);color:#fff;text-align:center;padding:3rem 1rem;}
.social-links{margin-top:1.5rem;display:flex;justify-content:center;gap:1rem;}
.social-links a{
  width:45px;height:45px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.1);color:var(--azul-claro);transition:.3s;
}
.social-links a:hover{background:var(--azul-claro);color:#fff;transform:translateY(-3px);}

/* BOTONES FLOTANTES */
.floating-buttons{
  position:fixed;bottom:30px;right:30px;
  display:flex;flex-direction:column;gap:1rem;z-index:999;
}
.float-btn{
  width:60px;height:60px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:1.8rem;text-decoration:none;
  box-shadow:0 6px 20px rgba(0,0,0,0.3);transition:.3s;
}
.whatsapp-btn{background:linear-gradient(135deg,#25D366,#128C7E);}
.phone-btn{background:linear-gradient(135deg,var(--azul-brillante),var(--azul-claro));}
.float-btn:hover{transform:scale(1.1);box-shadow:0 8px 30px rgba(0,0,0,.4);}