*{margin:0;padding:0;box-sizing:border-box;font-family:'Segoe UI',sans-serif}
body {
  font-family: 'Poppins', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  overflow-x: hidden;
  width: 100%;
}
.navbar{
  position:sticky;
  top:0;
  z-index:999;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 50px;
  background:linear-gradient(135deg, #003d5c 0%, #004d73 100%);
  box-shadow:0 4px 12px rgba(0,0,0,0.15);
  transition:padding 0.3s ease, background 0.3s ease;
  flex-wrap:wrap;
  gap:15px;
}


@media (max-width:1024px){
  .navbar{padding:12px 30px}
}
@media (max-width:768px){
  .navbar{
    padding:12px 20px;
    flex-direction:row; 
    justify-content:space-between; 
    align-items:center
  }
  .navbar ul{display:none}  /* Ocultar menú de navegación */
  .btn-cta{display:none}    /* Ocultar botón CTA */
}
@media (max-width:480px){
  .navbar{padding:10px 15px;gap:10px}
}

.navbar.scrolled{
  padding:12px 50px;
  background:linear-gradient(135deg, rgba(0,61,92,0.95), rgba(0,77,115,0.95));
  backdrop-filter:blur(10px);
}

.logo{
  display:flex;
  align-items:center;
  gap:12px;
  font-family:'Montserrat', sans-serif;
  font-weight:700;
  color:#fff;
  font-size:1.1rem;
  text-transform:uppercase;
  letter-spacing:1.2px;
  cursor:pointer;
  transition:transform 0.3s ease, filter 0.3s ease;
}

@media (max-width:768px){
  .logo{font-size:1rem;gap:10px}
}

@media (max-width:480px){
  .logo{font-size:0.85rem;gap:8px}
}

.logo:hover{
  transform:scale(1.05);
  filter:brightness(1.15);
}

.logo img{
  width:40px;
  height:40px;
  object-fit:contain;
  border-radius:6px;
  background:rgba(255,255,255,0.1);
  padding:4px;
  transition:transform 0.3s ease;
}

@media (max-width:768px){
  .logo img{width:35px;height:35px;padding:3px}
}

@media (max-width:480px){
  .logo img{width:30px;height:30px;padding:2px}
}

.logo:hover img{
  transform:rotate(5deg);
}

.navbar ul{
  display:flex;
  list-style:none;
  gap:40px;
  margin:0;
  padding:0;
  flex:1;
  margin-left:60px;
}

@media (max-width:1024px){
  .navbar ul{gap:30px;margin-left:40px}
}

@media (max-width:768px){
  .navbar ul{gap:15px;margin-left:0}
}

.nav-link{
  position:relative;
  color:#fff;
  text-decoration:none;
  font-weight:500;
  font-size:0.95rem;
  transition:color 0.3s ease;
  padding-bottom:6px;
}

.nav-link::after{
  content:"";
  position:absolute;
  bottom:0;
  left:0;
  width:0;
  height:2px;
  background:#00d4ff;
  transition:width 0.3s ease;
}

.nav-link:hover{
  color:#00d4ff;
  transform: translateY(-2px);
}

.nav-link:hover::after{
  width:100%;
}

.nav-link.active{
  color:#00d4ff;
}

.nav-link.active::after{
  width:100%;
}

.btn-cta{
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 20px;
  border-radius:30px;
  border:none;
  background:linear-gradient(135deg, #25d366, #20ba5a);
  color:#fff;
  font-size:0.9rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.5px;
  cursor:pointer;
  transition:all 0.3s ease-in-out;
  box-shadow:0 4px 15px rgba(37,211,102,0.3);
  white-space:nowrap;
  font-family:inherit;
}

.btn-cta:hover{
  background:linear-gradient(135deg, #20ba5a, #1da854);
  transform:translateY(-2px);
  box-shadow:0 8px 25px rgba(37,211,102,0.5);
}

.btn-cta svg{
  transition:transform 0.3s ease;
}

.btn-cta:hover svg{
  transform:scale(1.1);
}

.hero{
  position:relative;
  height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  padding-left:60px;
  overflow:hidden;
}

@media (max-width:768px){
  .hero{padding-left:30px;padding-right:30px;align-items:center;text-align:center}
}

@media (max-width:480px){
  .hero{padding-left:16px;padding-right:16px;padding-top:20px}
}

.hero-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:0;
  /* Optimizaciones para Safari móvil */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  will-change: transform;
}

/* Fallback para cuando el video no se reproduce */
.video-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #003d5c 0%, #004d73 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: -1;
}

.video-fallback img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, rgba(2, 30, 70, 0.10) 0%, rgba(2, 30, 70, 0.06) 55%, rgba(2, 30, 70, 0.08) 100%);
  z-index:1;
  pointer-events:none;
}

.hero-content{
  position:relative;
  z-index:2;
  color:#fff;
  max-width:520px;
  animation:slideInLeft 0.8s ease-out;
  background:rgba(0,0,0,0.25);
  padding:40px;
  border-radius:16px;
  backdrop-filter:blur(8px);
  width:100%;
  word-wrap:break-word;
  overflow-wrap:break-word;
}

@media (max-width:768px){
  .hero-content{padding:25px 20px;max-width:100%;border-radius:12px;width:calc(100% - 40px)}
}

@media (max-width:480px){
  .hero-content{padding:18px 14px;max-width:100%;border-radius:10px;width:calc(100% - 28px)}
}

.hero h1{
  font-size:3.2rem;
  margin-bottom:20px;
  font-weight:900;
  line-height:1.3;
  text-shadow:0 2px 8px rgba(0,0,0,0.4);
  word-break:break-word;
  animation: fadeInUp 1s ease-out 0.3s backwards;
}

@media (max-width:768px){
  .hero h1{font-size:1.85rem;margin-bottom:12px;line-height:1.2}
}

@media (max-width:480px){
  .hero h1{font-size:1.5rem;margin-bottom:10px;line-height:1.15}
}

.hero-subtitle{
  font-size:1rem;
  margin-bottom:25px;
  font-weight:500;
  line-height:1.6;
  animation:fadeInUp 1s ease-out 0.6s backwards;
  text-shadow:0 1px 4px rgba(0,0,0,0.3);
  word-break:break-word;
}

@media (max-width:768px){
  .hero-subtitle{font-size:0.9rem;margin-bottom:15px;line-height:1.4}
}

@media (max-width:480px){
  .hero-subtitle{font-size:0.75rem;margin-bottom:12px;line-height:1.3}
}

.check{
  color:#00d4ff;
  margin-right:12px;
  font-weight:700;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  background:rgba(0,212,255,0.15);
  border-radius:50%;
  flex-shrink:0;
  animation:scaleIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@media (max-width:480px){
  .check{width:24px;height:24px;margin-right:8px}
}

.check svg{
  width:18px;
  height:18px;
  stroke-linecap:round;
  stroke-linejoin:round;
}

@media (max-width:480px){
  .check svg{width:14px;height:14px}
}

.hero-subtitle .check:nth-child(1){ animation-delay:0.3s }
.hero-subtitle .check:nth-child(3){ animation-delay:0.4s }
.hero-subtitle .check:nth-child(5){ animation-delay:0.5s }

@keyframes scaleIn{
  from{
    opacity:0;
    transform:scale(0);
  }
  to{
    opacity:1;
    transform:scale(1);
  }
}

.hero-search{
  width:100%;
  padding:14px 20px;
  border-radius:30px;
  border:none;
  font-size:0.95rem;
  background:#fff;
  color:#003366;
  min-height:44px;
  transition:box-shadow 0.3s ease;
  animation:fadeIn 1s ease-out 0.5s both;
  box-sizing:border-box;
}

@media (max-width:768px){
  .hero-search{font-size:0.85rem;padding:10px 15px;min-height:38px}
}

@media (max-width:480px){
  .hero-search{font-size:0.8rem;padding:10px 12px;min-height:36px}
}

.hero-search::placeholder{
  color:#999;
}

.hero-search:focus{
  outline:none;
  box-shadow:0 0 20px rgba(0,212,255,0.4);
}

.search-container{
  display:flex;
  align-items:center;
  width:100%;
  margin-bottom:18px;
  animation:fadeIn 1s ease-out 0.5s both;
}

.btn-search{
  padding:12px 24px;
  border-radius:30px;
  border:none;
  background:linear-gradient(135deg, #003d5c, #004d73);
  color:#fff;
  font-size:0.9rem;
  font-weight:600;
  cursor:pointer;
  transition:all 0.3s ease;
  margin-left:10px;
  min-height:44px;
  animation:fadeIn 1s ease-out 0.7s both;
  flex-shrink:0;
}

.btn-search:hover{
  background:linear-gradient(135deg, #004d73, #005d8a);
  transform:translateY(-2px);
  box-shadow:0 4px 15px rgba(0,77,115,0.3);
}

@media (max-width:768px){
  .search-container{margin-bottom:12px}
  .btn-search{font-size:0.8rem;padding:10px 20px;min-height:38px;margin-left:8px}
}

@media (max-width:480px){
  .search-container{margin-bottom:10px}
  .btn-search{font-size:0.75rem;padding:8px 16px;min-height:36px;margin-left:6px}
}
.hero-buttons{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  width:100%;
  animation:fadeInUp 1s ease-out 0.9s backwards;
}

@media (max-width:768px){
  .hero-buttons{gap:10px}
}

@media (max-width:480px){
  .hero-buttons{gap:8px;flex-direction:column}
  .hero-buttons .btn{flex:1;width:100%}
}

.btn{
  padding:12px 24px;
  border-radius:30px;
  border:none;
  font-size:0.9rem;
  font-weight:600;
  cursor:pointer;
  transition:all 0.3s ease-in-out;
  text-transform:uppercase;
  letter-spacing:0.5px;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  box-shadow:0 4px 15px rgba(0,0,0,0.2);
  flex:1;
  min-width:160px;
}

@media (max-width:768px){
  .btn{padding:11px 20px;font-size:0.85rem;min-height:40px}
}

@media (max-width:480px){
  .btn{padding:10px 14px;font-size:0.8rem;min-width:auto;min-height:40px}
}

.btn-primary{
  background:linear-gradient(135deg, #0077aa, #004d73);
  color:#fff;
}

.btn-primary:hover{
  background:linear-gradient(135deg, #0099dd, #006699);
  box-shadow:0 8px 25px rgba(0,119,170,0.4);
  transform:translateY(-2px);
}

.btn-secondary{
  background:#fff;
  color:#0077aa;
  border:2px solid #0077aa;
}

.btn-secondary:hover{
  background:#0077aa;
  color:#fff;
  box-shadow:0 8px 25px rgba(0,119,170,0.3);
  transform:translateY(-2px);
}

/* Imagen lateral decorativa (carro 3D) */
.hero-side{
  position:absolute;
  right:-50px;
  top:250px;
  z-index:3;
  pointer-events:none;
  overflow:visible;
}

.hero-side img{
  width:600px;
  height:auto;
  display:block;
  animation:float 6s ease-in-out infinite;
  filter:drop-shadow(0 20px 40px rgba(0,0,0,0.3));
  transition:filter 0.3s ease;
}

.hero-side:hover img{
  filter:drop-shadow(0 30px 50px rgba(0,0,0,0.4));
  animation:floatHover 0.6s ease-out forwards;
}

/* Animaciones */
@keyframes slideInLeft{
  from{
    opacity:0;
    transform:translateX(-50px);
  }
  to{
    opacity:1;
    transform:translateX(0);
  }
}

@keyframes fadeIn{
  from{ opacity:0; }
  to{ opacity:1; }
}

@keyframes float{
  0%{ transform:translateY(0); }
  50%{ transform:translateY(-8px); }
  100%{ transform:translateY(0); }
}

@keyframes floatHover{
  from{ transform:translateY(0); }
  to{ transform:translateY(-12px); }
}

/* Responsive */
@media (max-width:1024px){
  .hero-side{
    right:-30px;
    bottom:-60px;
  }
  .hero-side img{
    width:350px;
  }
}

@media (max-width:768px){
  .hero-side{
    display:none;
  }
}

@media (max-width:480px){
  .hero-side{
    display:none;
  }
}





/* capa de degradado ligera para legibilidad sobre el video */
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(rgba(2, 30, 70, 0.12), rgba(2, 30, 70, 0.06));
  z-index:1;
}



section{padding:0px 60px}

/* Mobile-first responsive base */
@media (max-width:1200px){
  section{padding:60px 40px}
}

@media (max-width:768px){
  section{padding:40px 30px}
  h2{font-size:2rem;margin-bottom:35px}
}

@media (max-width:480px){
  section{padding:30px 20px}
  h2{font-size:1.6rem;margin-bottom:25px}
}
h2{text-align:center;margin-bottom:50px;font-size:2.5rem}

#marcas {
  overflow: hidden;
  padding: 50px 50px;
  background:#f8f9fa;
  text-align:center;
}

@media (max-width:1024px){
  #marcas{padding:50px 30px}
}

@media (max-width:768px){
  #marcas{padding:40px 20px}
}

.section-header h2 {
  font-size:2.8rem;
  font-weight:900;
  color:#003366;
  margin-bottom:10px;
}

/* Contenedor del carrusel */
.carousel-wrapper {
  position:relative;
  overflow:hidden;
  margin-bottom:30px;
  padding:20px 0;
}

.brand-grid {
  display:flex;
  gap:20px;
  width:max-content;
  will-change:transform;
}

/* Pausa al hover */
/* Manejado por JavaScript con requestAnimationFrame */

/* Tarjetas */
.brand-card {
  background:#fff;
  border-radius:18px;
  padding:25px 20px;
  box-shadow:0 4px 12px rgba(0,0,0,0.08);
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  width:150px;
  height:120px;
  border:1px solid rgba(0,0,0,0.05);
  transition:all 0.3s ease-in-out;
  cursor:pointer;
  animation: slideInUp 0.6s ease-out backwards;
}

.brand-card:hover {
  transform:scale(1.05);
  box-shadow:0 8px 20px rgba(0,119,170,0.15);
  border-color:rgba(0,119,170,0.1);
}

.brand-card img {
  max-height:70px;
  max-width:130px;
  width:auto;
  height:auto;
  object-fit:contain;
  display:block;
  transition:transform 0.3s ease;
}

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

/* Stagger animation for brand cards */
.brand-card:nth-child(1) { animation-delay: 0.1s; }
.brand-card:nth-child(2) { animation-delay: 0.2s; }
.brand-card:nth-child(3) { animation-delay: 0.3s; }
.brand-card:nth-child(4) { animation-delay: 0.4s; }
.brand-card:nth-child(5) { animation-delay: 0.5s; }
.brand-card:nth-child(6) { animation-delay: 0.6s; }
.brand-card:nth-child(7) { animation-delay: 0.7s; }
.brand-card:nth-child(8) { animation-delay: 0.8s; }
.brand-card:nth-child(9) { animation-delay: 0.9s; }
.brand-card:nth-child(10) { animation-delay: 1.0s; }
.brand-card:nth-child(11) { animation-delay: 1.1s; }
.brand-card:nth-child(12) { animation-delay: 1.2s; }
.brand-card:nth-child(13) { animation-delay: 1.3s; }
.brand-card:nth-child(14) { animation-delay: 1.4s; }
.brand-card:nth-child(15) { animation-delay: 1.5s; }
.brand-card:nth-child(16) { animation-delay: 1.6s; }
.brand-card:nth-child(17) { animation-delay: 1.7s; }
.brand-card:nth-child(18) { animation-delay: 1.8s; }
.brand-card:nth-child(19) { animation-delay: 1.9s; }
.brand-card:nth-child(20) { animation-delay: 2.0s; }

@media (max-width:1024px){
  .brand-card{width:130px;height:100px;padding:20px 15px}
@media (max-width:480px){
  .brand-card{width:100px;height:80px;padding:12px 10px}
  .brand-card img{max-height:50px;max-width:90px}
}
}

@media (max-width:768px){
  .brand-card{width:120px;height:90px;padding:15px 12px}
  .brand-card img{max-height:60px}
}

/* Texto al pie */
.carousel-footer {
  font-size:1.05rem;
  color:#003366;
  font-weight:600;
  margin-top:40px;
  padding:20px 30px;
  background:linear-gradient(135deg, rgba(0,119,170,0.08), rgba(0,212,255,0.05));
  border-radius:12px;
  border-left:4px solid #00d4ff;
  letter-spacing:0.5px;
  text-transform:uppercase;
  box-shadow:0 4px 15px rgba(0,119,170,0.1);
  display:inline-block;
  margin-left:auto;
  margin-right:auto;
  display:flex;
  justify-content:center;
  width:100%;
  animation:fadeInUp 0.8s ease-out;
}

@keyframes fadeInUp {
  from {
    opacity:0;
    transform:translateY(20px);
  }
  to {
    opacity:1;
    transform:translateY(0);
  }
}

@media (max-width:768px){
  .carousel-footer {
    font-size:0.95rem;
    padding:15px 20px;
    margin-top:30px;
  }
}

@media (max-width:480px){
  .carousel-footer{
    font-size:0.85rem;
    padding:12px 15px;
    margin-top:20px;
  }
}

/* SECCIÓN TIPOS */
.types-section {
  padding:50px 50px;
  padding-top: 0px;
  background:#f8f9fa;
}

@media (max-width:1024px){
  .types-section{padding:50px 30px;padding-top:0}
}

@media (max-width:768px){
  .types-section{padding:40px 20px;padding-top:0}
}

.types-section .section-header {
  text-align:center;
  margin-bottom:50px;
}

.types-section .section-header h2 {
  font-size:2.8rem;
  font-weight:900;
  color:#003366;
  margin-bottom:15px;
}

.types-section .section-subtitle {
  font-size:1.1rem;
  color:#10b0c5f3;
  font-weight:500;
}

/* Grid de tipos */
.types-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
  gap:30px;
  max-width:1000px;
  margin:0 auto;
  position:relative;
}

@media (max-width:1024px){
  .types-grid{grid-template-columns:repeat(auto-fit, minmax(140px, 1fr));gap:25px}
}

@media (max-width:768px){
  .types-grid{grid-template-columns:repeat(auto-fit, minmax(120px, 1fr));gap:20px}
}

.type-card {
  background:#fff;
  border-radius:16px;
  padding:25px 15px;
  box-shadow:0 4px 12px rgba(0,0,0,0.08);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  cursor:pointer;
  transition:all 0.3s ease;
  border:1px solid rgba(0,0,0,0.05);
  text-align:center;
  position:relative;
  min-height:140px;
  overflow:visible;
  animation: bounceIn 0.8s ease-out backwards;
}

.type-card span {
  font-size:2.2rem;
  display:block;
  line-height:1;
}

.type-card p {
  font-size:0.9rem;
  color:#003366;
  font-weight:600;
  margin:0;
  text-transform:uppercase;
  letter-spacing:0.5px;
}

.type-card:hover {
  transform:translateY(-8px);
  box-shadow:0 12px 30px rgba(0,119,170,0.15);
}

/* Stagger for type cards */
.type-card:nth-child(1) { animation-delay: 0.1s; }
.type-card:nth-child(2) { animation-delay: 0.2s; }
.type-card:nth-child(3) { animation-delay: 0.3s; }
.type-card:nth-child(4) { animation-delay: 0.4s; }
.type-card:nth-child(5) { animation-delay: 0.5s; }

/* Subcategorías */
.category-main {
  position: relative;
  z-index: 1;
}

.category-main:hover,
.category-main.active {
  z-index: 10010;
}

.subcategories {
  position:absolute;
  top:100%;
  left:50%;
  transform:translateX(-50%);
  background:#fff;
  border-radius:8px;
  box-shadow:0 10px 30px rgba(0,0,0,0.2);
  padding:10px 0;
  min-width:180px;
  z-index:10011;
  border:2px solid #00d4ff;
  display:none;
  margin-top:8px;
  white-space:nowrap;
}

.category-main:hover .subcategories,
.category-main.active .subcategories {
  display:block;
}

.subcategory-item {
  padding:10px 18px;
  font-size:0.85rem;
  color:#003366;
  font-weight:500;
  cursor:pointer;
  text-align:left;
  transition:all 0.2s ease;
  border-left:3px solid transparent;
  animation: fadeInLeft 0.4s ease-out backwards;
}

.subcategory-item:hover {
  background:rgba(0,212,255,0.1);
  border-left-color:#00d4ff;
  color:#0077aa;
  padding-left:22px;
}

/* Stagger for subcategory items */
.subcategory-item:nth-child(1) { animation-delay: 0.1s; }
.subcategory-item:nth-child(2) { animation-delay: 0.2s; }
.subcategory-item:nth-child(3) { animation-delay: 0.3s; }
.subcategory-item:nth-child(4) { animation-delay: 0.4s; }
.subcategory-item:nth-child(5) { animation-delay: 0.5s; }

/* Responsive */
@media (max-width:768px) {
  .types-section {
    padding:60px 30px;
  }

  .types-section .section-header h2 {
    font-size:2rem;
  }

  .types-grid {
    grid-template-columns:repeat(auto-fit, minmax(120px, 1fr));
    gap:20px;
  }

  .type-card {
    padding:20px 12px;
  }

  .subcategories {
    min-width:150px;
  }

  .subcategory-item {
    padding:8px 14px;
    font-size:0.8rem;
  }
}

@media (max-width:480px) {
  .types-grid {
    grid-template-columns:repeat(2, 1fr);
  }

  .subcategories {
    min-width:120px;
  }
}

/* Sección Institucional */
.institucional {
  padding: 50px 60px;
  background: linear-gradient(135deg, #003d5c 0%, #004d73 100%);
  border-top: 1px solid rgba(0, 212, 255, 0.2);
  border-bottom: 1px solid rgba(0, 212, 255, 0.2);
}

@media (max-width:1024px){
  .institucional{padding:50px 40px}
}

@media (max-width:768px){
  .institucional{padding:40px 25px}
}

.institucional-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  max-width: 1200px;
  margin: 0 auto;
  align-items: center;
}

@media (max-width:1024px){
  .institucional-container{gap:60px}
}

@media (max-width:768px){
  .institucional-container{grid-template-columns:1fr;gap:40px}
}

.institucional-left {
  order: -1;
}

.institucional-left h3 {
  font-size: 2rem;
  font-weight: 900;
  color: #fff;
  margin-bottom: 25px;
  line-height: 1.3;
  font-family: 'Montserrat', sans-serif;
}

.institucional-left p {
  font-size: 1rem;
  color: #e0e0e0;
  line-height: 1.8;
  font-weight: 400;
}

.benefits-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-top: 30px;
}

.benefits-list li {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  font-size: 1rem;
  color: #fff;
  font-weight: 500;
  line-height: 1.5;
}

.check-icon {
  width: 28px;
  height: 28px;
  color: #00d4ff;
  flex-shrink: 0;
  stroke-linecap: round;
  stroke-linejoin: round;
  animation: iconPulse 2s ease-in-out infinite;
}

.benefits-list li:nth-child(1) .check-icon { animation-delay: 0s; }
.benefits-list li:nth-child(2) .check-icon { animation-delay: 0.1s; }
.benefits-list li:nth-child(3) .check-icon { animation-delay: 0.2s; }
.benefits-list li:nth-child(4) .check-icon { animation-delay: 0.3s; }
.benefits-list li:nth-child(5) .check-icon { animation-delay: 0.4s; }
.benefits-list li:nth-child(6) .check-icon { animation-delay: 0.5s; }

@keyframes iconPulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.08);
  }
}

.institucional-right {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 500px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0, 212, 255, 0.2);
  background: rgba(0, 0, 0, 0.2);
}

.institucional-right video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Responsive - Tablet */
@media (max-width: 768px) {
  .institucional {
    padding: 70px 40px;
  }

  .institucional-container {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .institucional-left h3 {
    font-size: 1.8rem;
  }

  .benefits-list {
    gap: 24px;
    margin-top: 25px;
  }

  .benefits-list li {
    font-size: 0.95rem;
    gap: 16px;
  }

  .institucional-right {
    height: 350px;
  }
}

/* Responsive - Mobile */
@media (max-width: 480px) {
  .institucional {
    padding: 50px 25px;
  }

  .institucional-container {
    gap: 35px;
  }

  .institucional-left h3 {
    font-size: 1.5rem;
    margin-bottom: 18px;
  }

  .institucional-left p {
    font-size: 0.9rem;
    line-height: 1.7;
  }

  .benefits-list {
    gap: 18px;
    margin-top: 20px;
  }

  .benefits-list li {
    font-size: 0.85rem;
    gap: 12px;
  }

  .check-icon {
    width: 24px;
    height: 24px;
  }

  .institucional-right {
    height: 250px;
  }
}
/* SECCIÓN INSTALACIÓN */
.instalacion {
  padding: 30px 60px;
  background: #f9fbfc;
}

@media (max-width:1024px){
  .instalacion{padding:60px 40px}
}

@media (max-width:768px){
  .instalacion{padding:50px 25px}
}

.instalacion-header {
  text-align: center;
  margin-bottom: 30px;
  animation: fadeInDown 0.8s ease-out;
}

.instalacion h2 {
  margin-bottom: 12px;
  font-size: 2.5rem;
  color: #003366;
  font-weight: 700;
  letter-spacing: -0.5px;
}

.instalacion-subtitle {
  font-size: 1rem;
  color: #0077aa;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.instalacion-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 80px;
  max-width: 1400px;
  margin: 0 auto;
}

@media (max-width:1024px){
  .instalacion-container{gap:60px}
}

@media (max-width:768px){
  .instalacion-container{flex-direction:column;gap:40px}
}

.video-wrapper {
  flex: 1;
  min-width: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeInLeft 0.9s ease-out 0.2s backwards;
}

@media (max-width:1024px){
  .video-wrapper video{max-width:400px}
}

@media (max-width:768px){
  .video-wrapper{width:100%}
  .video-wrapper video{max-width:100%;width:100%}
}

.video-wrapper video {
  width: 55%;
  max-width: 550px;
  height: auto;
  border-radius: 20px;
  box-shadow: 0 20px 50px rgba(0, 77, 115, 0.25);
  object-fit: cover;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease;
}

.video-wrapper video:hover {
  transform: scale(1.02);
  box-shadow: 0 30px 70px rgba(0, 77, 115, 0.35);
}

.instalacion-text-container {
  flex: 1;
  min-width: 320px;
  text-align: left;
  animation: fadeInRight 0.9s ease-out 0.2s backwards;
}

.instalacion-text {
  font-size: 1.3rem;
  line-height: 1.7;
  color: #1a1a1a;
  margin-bottom: 40px;
  font-weight: 600;
  letter-spacing: -0.3px;
}

.servicios-wrapper {
  margin-bottom: 35px;
}

.servicios-label {
  font-size: 0.9rem;
  color: #666;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 15px;
  display: block;
}

.servicios-list {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.servicio-chip {
  background: #f0f4f8;
  color: #003d5c;
  padding: 10px 18px;
  border-radius: 6px;
  font-weight: 500;
  font-size: 0.95rem;
  border: 1px solid #d4e2f0;
  transition: all 0.3s ease;
  cursor: default;
  letter-spacing: 0.3px;
}

.servicio-chip:hover {
  background: #f0f4f8;
  border-color: #d4e2f0;
}

.btn-instalacion {
  background: linear-gradient(135deg, #0077aa, #004d73);
  color: #fff;
  padding: 14px 32px;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 8px 24px rgba(0, 77, 115, 0.25);
  text-transform: uppercase;
  animation: fadeInUp 0.9s ease-out 0.4s backwards;
}

.btn-instalacion:hover {
  background: linear-gradient(135deg, #0099dd, #006699);
  box-shadow: 0 12px 36px rgba(0, 77, 115, 0.35);
  transform: translateY(-2px);
}

.btn-instalacion:active {
  transform: translateY(0);
}

/* Animaciones */
@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Media queries responsivas para instalacion */
@media (max-width: 1024px) {
  .instalacion {
    padding: 90px 40px;
  }

  .instalacion-container {
    gap: 60px;
  }

  .video-wrapper video {
    max-width: 450px;
  }

  .instalacion-text {
    font-size: 1.1rem;
  }
}

@media (max-width: 768px) {
  .instalacion {
    padding: 80px 30px;
  }

  .instalacion-header {
    margin-bottom: 50px;
  }

  .instalacion h2 {
    font-size: 2rem;
  }

  .instalacion-container {
    flex-direction: column;
    gap: 50px;
  }

  .video-wrapper {
    width: 100%;
  }

  .video-wrapper video {
    max-width: 100%;
    width: 100%;
  }

  .instalacion-text-container {
    text-align: center;
    width: 100%;
  }

  .servicios-list {
    justify-content: center;
  }

  .instalacion-text {
    font-size: 1.15rem;
  }

  .btn-instalacion {
    width: 100%;
    padding: 14px 20px;
  }
}

@media (max-width: 480px) {
  .instalacion {
    padding: 70px 20px;
  }

  .instalacion-header {
    margin-bottom: 40px;
  }

  .instalacion h2 {
    font-size: 1.6rem;
  }

  .instalacion-subtitle {
    font-size: 0.85rem;
    margin-top: 8px;
  }

  .instalacion-text {
    font-size: 1rem;
    margin-bottom: 30px;
  }

  .servicios-label {
    font-size: 0.8rem;
    margin-bottom: 12px;
  }

  .servicio-chip {
    font-size: 0.85rem;
    padding: 8px 14px;
  }

  .btn-instalacion {
    width: 100%;
    font-size: 0.9rem;
    padding: 12px 18px;
  }
}

/* SECCIÓN UBICACIÓN */
.ubicacion {
  padding: 10px 60px;
  background: #f9fbfc;
}

@media (max-width:1024px){
  .ubicacion{padding:60px 40px}
}

@media (max-width:768px){
  .ubicacion{padding:50px 25px}
}

.ubicacion-header {
  text-align: center;
  margin-bottom: 60px;
  animation: fadeInDown 0.8s ease-out;
}

.ubicacion h2 {
  margin-bottom: 15px;
  font-size: 2.5rem;
  color: #003366;
  font-weight: 700;
  letter-spacing: -0.5px;
}

.ubicacion-subtitle {
  font-size: 1rem;
  color: #0077aa;
  font-weight: 500;
  letter-spacing: 0.5px;
}

.ubicacion-container {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 60px;
  max-width: 1400px;
  margin: 0 auto;
}

@media (max-width:1024px){
  .ubicacion-container{gap:40px}
}

@media (max-width:768px){
  .ubicacion-container{flex-direction:column;gap:30px}
}

/* COLUMNA INFORMACIÓN */
.ubicacion-info {
  flex: 1;
  min-width: 300px;
  animation: fadeInLeft 0.9s ease-out 0.2s backwards;
}

.info-item {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 38px;
  padding-bottom: 35px;
  border-bottom: 1px solid rgba(0, 77, 115, 0.1);
  transition: transform 0.3s ease;
}

.info-item:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.info-item:hover {
  transform: translateX(8px);
}

.info-icon {
  font-size: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  flex-shrink: 0;
  line-height: 1;
}

.info-item > div {
  flex: 1;
}

.info-item h3 {
  font-size: 1.4rem;
  color: #003366;
  font-weight: 700;
  margin-bottom: 6px;
  letter-spacing: -0.3px;
}

.info-item h4 {
  font-size: 1rem;
  color: #003366;
  font-weight: 600;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.info-item p {
  font-size: 0.95rem;
  color: #666;
  line-height: 1.6;
  font-weight: 400;
}

.info-item a {
  color: #0077aa;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.3s ease;
}

.info-item a:hover {
  color: #00d4ff;
}

/* COLUMNA MAPA */
.ubicacion-mapa {
  flex: 1;
  min-width: 300px;
  animation: fadeInRight 0.9s ease-out 0.2s backwards;
  display: flex;
  flex-direction: column;
}

.mapa-container {
  flex: 1;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0, 77, 115, 0.15);
  margin-bottom: 20px;
  min-height: 450px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mapa-container iframe {
  width: 100%;
  height: 100%;
  border: none;
}

.btn-mapa {
  background: linear-gradient(135deg, #0077aa, #004d73);
  color: #fff;
  padding: 14px 32px;
  border-radius: 8px;
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 8px 24px rgba(0, 77, 115, 0.25);
  display: inline-block;
  animation: fadeInUp 0.9s ease-out 0.4s backwards;
}

.btn-mapa:hover {
  background: linear-gradient(135deg, #0099dd, #006699);
  box-shadow: 0 12px 36px rgba(0, 77, 115, 0.35);
  transform: translateY(-2px);
}

.btn-mapa:active {
  transform: translateY(0);
}

/* Media queries para ubicación */
@media (max-width: 1024px) {
  .ubicacion {
    padding: 90px 40px;
  }

  .ubicacion-container {
    gap: 50px;
  }

  .mapa-container {
    min-height: 380px;
  }
}

@media (max-width: 768px) {
  .ubicacion {
    padding: 80px 30px;
  }

  .ubicacion-header {
    margin-bottom: 50px;
  }

  .ubicacion h2 {
    font-size: 2rem;
  }

  .ubicacion-container {
    flex-direction: column;
    gap: 40px;
  }

  .ubicacion-info {
    order: 1;
  }

  .ubicacion-mapa {
    order: 2;
  }

  .info-item {
    margin-bottom: 30px;
    padding-bottom: 30px;
  }

  .mapa-container {
    min-height: 350px;
  }
}

@media (max-width: 480px) {
  .ubicacion {
    padding: 70px 20px;
  }

  .ubicacion-header {
    margin-bottom: 40px;
  }

  .ubicacion h2 {
    font-size: 1.6rem;
  }

  .ubicacion-subtitle {
    font-size: 0.9rem;
  }

  .info-icon {
    font-size: 1.8rem;
    width: 45px;
    height: 45px;
  }

  .info-item h3 {
    font-size: 1.1rem;
  }

  .info-item h4 {
    font-size: 0.9rem;
  }

  .info-item p {
    font-size: 0.9rem;
  }

  .info-item {
    margin-bottom: 25px;
    padding-bottom: 25px;
    gap: 14px;
  }

  .mapa-container {
    min-height: 300px;
  }

  .btn-mapa {
    width: 100%;
    padding: 12px 20px;
    font-size: 0.9rem;
  }
}

/* Footer principal (banner final) */
.about-inner{max-width:920px;margin:0 auto;padding:40px 20px}

.about-container{
  display:flex;
  gap:40px;
  align-items:flex-start;
  max-width:920px;
  margin:0 auto;
}

.about-logo{
  flex-shrink:0;
  width:240px;
  height:240px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.about-logo img{
  width:100%;
  height:auto;
  object-fit:contain;
  border-radius:8px;
  background:linear-gradient(135deg, #003d5c 0%, #004d73 100%);
  padding:12px;
  box-shadow:0 4px 12px rgba(0,0,0,0.1);
  transition:transform 0.3s ease;
  animation:logoFloat 4s ease-in-out infinite;
}

.about-logo img:hover{
  transform:scale(1.05);
  animation-play-state:paused;
}

@keyframes logoFloat{
  0%, 100%{
    transform:translateY(0) rotate(0deg);
  }
  25%{
    transform:translateY(-8px) rotate(1deg);
  }
  50%{
    transform:translateY(-12px) rotate(2deg);
  }
  75%{
    transform:translateY(-8px) rotate(1deg);
  }
}

.about-content{
  flex:1;
  max-width:780px;
  color:#123244;
  line-height:1.85;
  font-size:1.05rem;
}

.about-content p{margin-bottom:20px;color:#0f2f46}
.about .fade-in{animation:fadeIn 0.9s ease-out both}
.about h2{margin-bottom:18px;color: #003366;}

@media (max-width:1024px){
  .about-inner{padding:30px 30px}
  .about-container{gap:30px}
  .about-logo{width:200px;height:200px}
}

@media (max-width:768px){
  .about-inner{padding:25px 20px}
  .about-container{flex-direction:column;align-items:center;text-align:center}
  .about-logo{width:180px;height:180px;margin:0 auto}
  .about-content{font-size:1rem;max-width:100%}
}

@media (max-width:480px){
  .about-inner{padding:20px 15px}
  .about-container{gap:20px}
  .about-logo{width:160px;height:160px}
  .about-content{font-size:0.95rem;line-height:1.7}
  .about h2{margin-bottom:15px}
}

.site-footer{
  background:linear-gradient(135deg, #003d5c 0%, #004d73 100%);
  color:#fff;
  padding:70px 60px;
}
.footer-container{
  max-width:1200px;
  margin:0 auto;
  display:flex;
  gap:40px;
  align-items:flex-start;
}

@media (max-width:1024px){
  .footer-container{gap:30px}
}

@media (max-width:768px){
  .footer-container{flex-direction:column;text-align:center;gap:20px;align-items:center}
}
.footer-col{
  flex:1;
  min-width:180px;
  animation: fadeInUp 0.8s ease-out backwards;
}

.footer-col:nth-child(1) { animation-delay: 0.1s; }
.footer-col:nth-child(2) { animation-delay: 0.2s; }
.footer-col:nth-child(3) { animation-delay: 0.3s; }
.footer-title{
  font-size:0.95rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:1px;
  margin-bottom:12px;
  color:#fff;
}
.footer-text{
  color:#eaf6ff;
  font-weight:500;
  line-height:1.6;
  margin:0;
}
.social-list{
  display:flex;
  gap:12px;
  align-items:center;
}
.social-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border-radius:50%;
  background:#fff;
  color:#003d5c;
  text-decoration:none;
  transition:all 0.18s ease-in-out;
  flex-shrink:0;
}
.social-btn svg{width:18px;height:18px;display:block}
.social-btn:hover,.social-btn:focus{
  background:#003d5c;
  color:#fff;
  transform:translateY(-3px);
  outline:none;
}
.footer-divider{
  height:1px;
  background:rgba(255,255,255,0.08);
  margin:28px auto;
  max-width:1100px;
}
.footer-bottom{
  text-align:center;
  padding:18px 0 0 0;
  color:rgba(255,255,255,0.95);
  font-size:0.95rem;
  font-weight:500;
}

@media (max-width:768px){
  .site-footer{padding:60px 24px}
  .footer-container{flex-direction:column;text-align:center;gap:20px;align-items:center}
  .footer-col{width:100%}
  .social-list{justify-content:center}
  .social-btn{width:46px;height:46px}
  .footer-divider{margin:18px 0}
}

@media (max-width:480px){
  .site-footer{padding:40px 16px}
  .footer-col{width:100%}
  .footer-title{font-size:0.85rem}
  .footer-text{font-size:0.9rem}
  .social-btn{width:40px;height:40px}
  .social-btn svg{width:16px;height:16px}
}

/* Botón flotante de WhatsApp (esquina inferior izquierda) */
.whatsapp{
  position:fixed;
  right:20px;
  left:auto;
  bottom:20px;
  width:56px;
  height:56px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,#25d366,#1fad4a);
  color:#fff;
  text-decoration:none;
  box-shadow:0 8px 20px rgba(37,211,102,0.15);
  z-index:10000;
  transition:transform .18s ease, box-shadow .18s ease, opacity .18s ease;
  -webkit-tap-highlight-color: transparent;
  will-change:transform;
  animation:whatsappFloat 3s ease-in-out infinite;
}
.whatsapp img{display:block;width:26px;height:26px}
.whatsapp:hover,.whatsapp:focus{transform:translateY(-6px) scale(1.02);box-shadow:0 14px 30px rgba(37,211,102,0.22)}

@keyframes whatsappFloat{
  0%{transform:translateY(0)}
  50%{transform:translateY(-6px)}
  100%{transform:translateY(0)}
}

/* Reduce tamaño en móviles para no obstruir contenido */
@media (max-width:480px){
  .whatsapp{right:14px;left:auto;bottom:14px;width:48px;height:48px}
  .whatsapp img{width:22px;height:22px}
}

/* Ocultar en impresión */
@media print{.whatsapp{display:none}}

/* ANIMACIONES ADICIONALES */
@keyframes bounceIn {
  0% { transform: scale(0.3); opacity: 0; }
  50% { transform: scale(1.05); }
  70% { transform: scale(0.9); }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes slideInUp {
  from { transform: translateY(50px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}