/* Introducción */
.intro-section {
  text-align: center;
  margin: 20px auto 25px auto;
  padding: 0 15px;
}
.intro-section h2 { font-size: clamp(2.8rem, 4vw, 3.4rem);
  font-weight: 900;
  color: #004080;
  margin-bottom: 26px;
  letter-spacing: 1.4px;
  line-height: 1.15;
  text-shadow:
    1px 2px 6px rgba(0,0,0,0.18),
    0 0 12px rgba(0,114,255,0.18); 
  }

.intro-section p { 
  font-size: 1.3rem;
  color: #1f1f1f;
  line-height: 1.9;
  max-width: 880px;
  margin: 0 auto;
  font-weight: 500;
  opacity: 0.95;
}

/* Carrusel */
.carousel { width:90%; max-width:1100px; height:560px; margin:20px auto; overflow:hidden; border-radius:12px; box-shadow:0 5px 20px rgba(0,0,0,0.2); }
.carousel-images { display:flex; transition: transform 0.6s ease-in-out; }
.carousel-images img { width:100%; height:280px; object-fit:cover; flex-shrink:0; }



/* Regiones */
/* 🔹 CAMBIO PEDIDO: quitar fondo completo */
.regiones-bg { 
  background: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding:30px 15px; 
  border-radius:20px; 
  margin-bottom:40px; 
}

.regiones-container { display:flex; flex-wrap:wrap; justify-content:center; gap:25px; }

.region-card { display:flex; flex-direction:column; align-items:center; }

/* Recuadros internos siguen traslúcidos */
.region { 
  width:180px; height:180px; 
  background: rgba(255,255,255,0.20);
  backdrop-filter: blur(15px);             
  -webkit-backdrop-filter: blur(15px);
  border-radius:15px; 
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  cursor:pointer; 
  box-shadow:0 6px 18px rgba(0,0,0,0.2); 
  transition: transform 0.3s ease, box-shadow 0.3s ease; 
  margin-bottom:12px; 
}

.region-img { width:130px; height:130px; object-fit:contain; margin-bottom:10px; }

.regiones { font-size:1.3rem; font-weight:700; color:#004080; text-align:center; }

/* Provincias */
.provincias-list { 
  display:flex; flex-wrap:wrap; justify-content:center; gap:12px; 
  max-height:0; opacity:0; overflow:hidden; 
  transition:max-height 0.6s ease, opacity 0.6s ease; 
}

.provincias-list.visible { max-height:400px; opacity:1; }

/* Las burbujas siguen traslúcidas */
.provincia-bubble { 
  display:flex; align-items:center; gap:6px; 
  background: rgba(255,255,255,0.20);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius:50px; 
  padding:8px 15px; 
  font-size:1rem; 
  font-weight:600; 
  color:#333; 
  text-decoration:none; 
  box-shadow:0 2px 5px rgba(0,0,0,0.1); 
  transition:all 0.3s ease-in-out; 
}

.provincia-bubble:hover { 
  background:#004080; 
  color:#fff; 
  transform:scale(1.05); 
  box-shadow:0 4px 10px rgba(0,0,0,0.2);
}

.provincia-bubble i { color:#004080; font-size:1.2rem; }
.provincia-bubble:hover i { color:#fff; }

/* Beneficios */
/* 🔹 CAMBIO PEDIDO: quitar fondo completo */
.beneficios { 
  text-align:center; 
  padding:40px 20px; 
  background: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-radius:20px; 
  margin-bottom:40px; 
}

.beneficios h2 { color:#004080; margin-bottom:30px; font-size:2.4rem; }

.beneficios-grid { display:flex; flex-wrap:wrap; justify-content:center; gap:40px; }

/* Tarjetas internas siguen traslúcidas */
.beneficios-grid div { 
  max-width:220px; 
  text-align:center; 
  padding:20px; 
  background: rgba(255,255,255,0.20);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius:15px; 
  box-shadow:0 6px 20px rgba(0,0,0,0.1); 
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.beneficios-grid div:hover { 
  transform:translateY(-5px); 
  box-shadow:0 12px 25px rgba(0,0,0,0.2);
}

.beneficios-grid i { font-size:2rem; color:#004080; margin-bottom:10px; }
.beneficios-grid h4 { margin:10px 0; font-size:1.2rem; }
.beneficios-grid p { font-size:1rem; color:#333; line-height:1.5; }

/* ============================
   RESPONSIVE BENEFICIOS
============================ */

/* Tablets grandes */
@media (max-width: 1024px) {
  .beneficios {
    padding: 35px 18px;
  }

  .beneficios h2 {
    font-size: 2.1rem;
  }

  .beneficios-grid {
    gap: 30px;
  }

  .beneficios-grid div {
    max-width: 200px;
    padding: 18px;
  }
}

/* Tablets y móviles */
@media (max-width: 768px) {
  .beneficios {
    padding: 30px 15px;
  }

  .beneficios h2 {
    font-size: 1.9rem;
  }

  .beneficios-grid {
    gap: 25px;
  }

  .beneficios-grid div {
    max-width: 100%;
    width: 90%;
  }

  .beneficios-grid i {
    font-size: 1.8rem;
  }

  .beneficios-grid h4 {
    font-size: 1.1rem;
  }

  .beneficios-grid p {
    font-size: 0.95rem;
  }
}

/* Móviles pequeños */
@media (max-width: 480px) {
  .beneficios {
    padding: 25px 12px;
  }

  .beneficios h2 {
    font-size: 1.7rem;
  }

  .beneficios-grid {
    gap: 20px;
  }

  .beneficios-grid div {
    padding: 16px;
    border-radius: 14px;
  }

  .beneficios-grid p {
    font-size: 0.9rem;
  }
}


/* --------------------------- */
/* NUESTROS PLANES (Traslúcido) */
/* --------------------------- */

.planes-bg {
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  padding: 35px 20px;
  border-radius: 20px;
  margin-bottom: 45px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}

.plan-card {
  background: rgba(255,255,255,0.20);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 25px;
  border-radius: 18px;
  text-align: center;
  box-shadow: 0 6px 18px rgba(0,0,0,0.15);
  margin-bottom: 20px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.plan-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.22);
}

.plan-tag {
  display: inline-block;
  background: rgba(255,255,255,0.20);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 6px 15px;
  border-radius: 50px;
  font-weight: 700;
  margin-bottom: 12px;
  box-shadow: 0 3px 12px rgba(0,0,0,0.15);
}

/* Mapa */
#map { width:90%; max-width:1000px; height:450px; margin:30px auto; border-radius:15px; box-shadow:0 5px 20px rgba(0,0,0,0.2); }

/* Responsive */
@media (max-width:768px){
  .region { width:140px; height:140px; }
  .region-img { width:100px; height:100px; }
  .beneficios-grid { flex-direction:column; gap:25px; }
}