/* ==========================================================================
   CSS RESPONSIVE ULTRA-OPTIMIZADO PARA MÓVIL Y TABLET
   Manteniendo 100% intacta la versión de escritorio.
   Breakpoints cubiertos: 320px, 360px, 375px, 390px, 414px, 430px, 768px, 991px
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. PROTECCIÓN GENERAL CONTRA OVERFLOW HORIZONTAL (Todo el sitio)
   -------------------------------------------------------------------------- */
html, body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
  position: relative;
}

*, *::before, *::after {
  box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   2. REGLAS RESPONSIVE PARA TABLETS Y PANTALLAS MEDIANAS (max-width: 1080px)
   -------------------------------------------------------------------------- */
@media screen and (max-width: 1080px) {
  .programs-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px !important;
  }

  .trust-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
  }

  .hero-title {
    font-size: clamp(2.4rem, 4vw, 3rem) !important;
  }
}

/* --------------------------------------------------------------------------
   3. REGLAS RESPONSIVE PARA MENÚ Y ESTRUCTURA TABLET/MÓVIL (max-width: 991px)
   -------------------------------------------------------------------------- */
@media screen and (max-width: 991px) {
  .top-bar {
    display: none !important;
  }

  .mobile-menu-toggle {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-sm, 8px);
    background: var(--gray-100, #f1f5f9);
    font-size: 1.4rem;
    color: var(--dark, #0b132b);
    border: none;
    cursor: pointer;
  }

  .nav-menu {
    position: fixed !important;
    top: 72px !important;
    left: -100% !important;
    width: 310px !important;
    max-width: 85vw !important;
    height: calc(100vh - 72px) !important;
    background: #ffffff !important;
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 24px 20px !important;
    box-shadow: 10px 0 30px rgba(0, 0, 0, 0.18) !important;
    transition: left 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
    overflow-y: auto !important;
    z-index: 9999 !important;
    gap: 12px !important;
  }

  .nav-menu.active {
    left: 0 !important;
  }

  .nav-item {
    width: 100% !important;
  }

  .nav-link {
    display: block !important;
    padding: 10px 12px !important;
    font-size: 1rem !important;
    border-radius: 6px;
  }

  .dropdown-menu {
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    box-shadow: none !important;
    background: var(--gray-50, #f8fafc) !important;
    margin-top: 6px !important;
    padding: 6px 10px !important;
    display: none !important;
    border: 1px solid var(--gray-200, #e2e8f0) !important;
    border-radius: 8px !important;
  }

  .has-dropdown.open .dropdown-menu {
    display: block !important;
  }

  .dropdown-menu li a {
    padding: 9px 12px !important;
    font-size: 0.88rem !important;
  }

  .btn-actualizar {
    text-align: center !important;
    margin-top: 10px !important;
    display: block !important;
  }

  .hero-grid {
    grid-template-columns: 1fr !important;
    text-align: center !important;
    gap: 40px !important;
  }

  .hero-subtitle {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .hero-cta-group {
    justify-content: center !important;
  }

  .hero-stats {
    justify-content: center !important;
  }

  .hero-floating-badge {
    left: 15px !important;
    bottom: 15px !important;
  }

  .hero-img-card img {
    height: 360px !important;
  }

  .fast-contact-grid {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }

  .footer-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 30px !important;
  }
}

/* --------------------------------------------------------------------------
   4. OPTIMIZACIÓN EXCLUSIVA PARA MÓVILES (max-width: 768px)
   Contenido centrado, títulos elásticos, cards perfectas, sin desbordamiento
   -------------------------------------------------------------------------- */
@media screen and (max-width: 768px) {

  /* --- CONTENEDORES Y ESPACIOS LATERALES SEGUROS --- */
  .container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* --- TÍTULOS Y ENCABEZADOS RESPONSIVE Y CENTRADOS --- */
  h1, h2, h3, h4, h5, h6,
  .hero-title,
  .section-title,
  .entry-title,
  .fast-contact-text h2,
  .section-desc,
  .hero-subtitle {
    text-align: center !important;
    max-width: 100% !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
  }

  .hero-title {
    font-size: clamp(1.85rem, 6.8vw, 2.45rem) !important;
    line-height: 1.2 !important;
    letter-spacing: -0.5px !important;
    margin-bottom: 16px !important;
  }

  .section-title {
    font-size: clamp(1.65rem, 5.8vw, 2.1rem) !important;
    line-height: 1.25 !important;
    margin-bottom: 12px !important;
  }

  .hero-subtitle,
  .section-desc,
  .fast-contact-text p {
    font-size: clamp(0.95rem, 3.2vw, 1.05rem) !important;
    line-height: 1.55 !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .hero-badge,
  .section-pill {
    display: table !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }

  .section-header {
    text-align: center !important;
    margin-bottom: 35px !important;
    padding: 0 4px !important;
  }

  /* --- HERO SECTION CENTRADO --- */
  .modern-hero {
    padding: 45px 0 60px !important;
    text-align: center !important;
  }

  .hero-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }

  .hero-cta-group {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    gap: 12px !important;
  }

  .hero-cta-group a,
  .hero-cta-group button {
    width: 100% !important;
    max-width: 340px !important;
    text-align: center !important;
    justify-content: center !important;
    padding: 13px 20px !important;
    font-size: 0.96rem !important;
  }

  .hero-stats {
    width: 100% !important;
    max-width: 360px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 12px !important;
    margin-top: 30px !important;
    padding-top: 20px !important;
    text-align: center !important;
  }

  .stat-item h4 {
    font-size: 1.5rem !important;
  }

  .stat-item p {
    font-size: 0.78rem !important;
  }

  .hero-visual {
    width: 100% !important;
    max-width: 380px !important;
    margin: 0 auto !important;
  }

  .hero-img-card img {
    height: 310px !important;
    object-fit: cover !important;
  }

  .hero-floating-badge {
    position: static !important;
    margin: 14px auto 0 !important;
    width: 100% !important;
    max-width: 320px !important;
    justify-content: center !important;
    text-align: left !important;
    animation: none !important;
  }

  /* --- TARJETAS / CARDS ADAPTABLES Y CENTRADAS (1 Columna en móvil) --- */
  .programs-grid {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 24px !important;
    width: 100% !important;
  }

  .program-card {
    width: 100% !important;
    max-width: 440px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    border-radius: var(--radius-md, 14px) !important;
  }

  .program-content {
    padding: 22px 18px !important;
    text-align: center !important;
    align-items: center !important;
  }

  .program-title {
    text-align: center !important;
    font-size: 1.25rem !important;
    width: 100% !important;
  }

  .program-meta {
    justify-content: center !important;
    width: 100% !important;
    gap: 14px !important;
  }

  .program-excerpt {
    text-align: center !important;
    font-size: 0.9rem !important;
  }

  .program-actions {
    width: 100% !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding-top: 10px !important;
  }

  /* --- BARRA DE CONFIANZA / TRUST BAR (Centrada) --- */
  .trust-bar {
    padding: 24px 0 !important;
  }

  .trust-grid {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 16px !important;
    width: 100% !important;
  }

  .trust-card {
    width: 100% !important;
    max-width: 360px !important;
    text-align: left !important;
    margin: 0 auto !important;
  }

  /* --- FORMULARIO RÁPIDO DE CONTACTO (Centrado) --- */
  .section-fast-contact {
    padding: 55px 0 !important;
  }

  .fast-contact-grid {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 35px !important;
    width: 100% !important;
  }

  .fast-contact-text {
    text-align: center !important;
    width: 100% !important;
    max-width: 480px !important;
  }

  .fast-contact-text > div {
    align-items: center !important;
  }

  .fast-contact-box {
    width: 100% !important;
    max-width: 460px !important;
    padding: 26px 18px !important;
    margin: 0 auto !important;
  }

  .fast-contact-box h3 {
    text-align: center !important;
    font-size: 1.3rem !important;
  }

  .btn-submit-modern {
    padding: 13px 18px !important;
    font-size: 0.95rem !important;
  }

  /* --- FOOTER CENTRADO EN MÓVIL --- */
  .site-footer-custom {
    padding-top: 50px !important;
    text-align: center !important;
  }

  .footer-grid {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 32px !important;
  }

  .footer-col {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
    max-width: 380px !important;
  }

  .social-links {
    justify-content: center !important;
  }

  .footer-col ul li a {
    justify-content: center !important;
  }

  .col-contacto p {
    justify-content: center !important;
    text-align: center !important;
  }

  .footer-bottom .container {
    flex-direction: column !important;
    gap: 8px !important;
    text-align: center !important;
  }

  /* --- BOTONES Y ENLACES ACCESIBLES EN MÓVIL --- */
  button, .btn, .btn-primary, .btn-secondary, a.elementor-button {
    max-width: 100% !important;
    word-break: break-word !important;
  }

  /* --- IMÁGENES RESPONSIVE SIN SCROLL LATERAL --- */
  img, svg, video, iframe {
    max-width: 100% !important;
    height: auto !important;
  }

  /* --- WHATSAPP FLOTANTE DISCRETO EN MÓVIL --- */
  .floating-whatsapp {
    bottom: 20px !important;
    right: 20px !important;
    width: 54px !important;
    height: 54px !important;
    font-size: 27px !important;
  }

  .whatsapp-tooltip {
    display: none !important;
  }
}

/* --------------------------------------------------------------------------
   5. REGLAS ULTRA-ESPECÍFICAS PARA PANTALLAS EXTRA PEQUEÑAS (max-width: 480px / 390px / 360px / 320px)
   -------------------------------------------------------------------------- */
@media screen and (max-width: 480px) {

  /* Ajustes para 320px - 390px */
  .container {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .brand-name {
    font-size: 1.05rem !important;
  }

  .brand-tagline {
    font-size: 0.65rem !important;
  }

  .brand-logo-img {
    height: 40px !important;
  }

  .hero-title {
    font-size: 1.8rem !important;
  }

  .hero-stats {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }

  .stat-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
    padding-bottom: 10px !important;
  }

  .stat-item:last-child {
    border-bottom: none !important;
  }

  .program-card {
    width: 100% !important;
    max-width: 100% !important;
  }

  .program-img-wrapper {
    height: 190px !important;
  }

  .fast-contact-box {
    padding: 22px 14px !important;
  }

  .form-control {
    font-size: 0.9rem !important;
    padding: 11px 14px !important;
  }
}

/* --------------------------------------------------------------------------
   6. MODAL / POPUP DE BIENVENIDA (Completamente Responsive y Centrado)
   -------------------------------------------------------------------------- */
.modal,
.popup,
.modal-dialog,
.welcome-modal,
.dialog-lightbox-widget-content,
.elementor-popup-modal .dialog-message {
  width: calc(100% - 24px) !important;
  max-width: 520px !important;
  max-height: 90vh !important;
  overflow-y: auto !important;
  margin: auto !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  position: fixed !important;
  box-sizing: border-box !important;
  padding: 24px 18px !important;
  border-radius: var(--radius-md, 14px) !important;
  text-align: center !important;
}

.modal img,
.popup img,
.welcome-modal img {
  max-width: 100% !important;
  height: auto !important;
  margin: 0 auto 15px !important;
}

/* --------------------------------------------------------------------------
   7. CONTROL DE ICONOS SVG GIGANTES (Icon-Box & Swiper Arrows)
   -------------------------------------------------------------------------- */
.elementor-icon-box-icon svg,
.elementor-icon svg,
.elementor-widget-icon-box svg,
.elementor-icon-box-wrapper svg {
  max-width: 52px !important;
  max-height: 52px !important;
  width: 48px !important;
  height: 48px !important;
  display: inline-block !important;
  fill: #0052cc !important;
}

.elementor-icon-box-wrapper {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  background: #ffffff !important;
  padding: 16px 22px !important;
  border-radius: var(--radius-md, 14px) !important;
  border: 1px solid var(--gray-200, #e2e8f0) !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05) !important;
  margin: 10px auto !important;
  max-width: 380px !important;
}

.elementor-icon-box-icon {
  margin-bottom: 0 !important;
  flex-shrink: 0 !important;
}

.elementor-icon-box-title {
  margin: 0 0 4px 0 !important;
  font-size: 1.1rem !important;
  font-weight: 800 !important;
  color: var(--dark, #0b132b) !important;
}

.elementor-icon-box-description {
  margin: 0 !important;
  font-size: 0.95rem !important;
  color: var(--gray-600, #475569) !important;
  line-height: 1.4 !important;
}

/* Control para SVGs del carrusel / flechas */
.elementor-swiper-button svg,
.elementor-swiper-button-prev svg,
.elementor-swiper-button-next svg {
  width: 22px !important;
  height: 22px !important;
  max-width: 22px !important;
  max-height: 22px !important;
  fill: #ffffff !important;
}

.elementor-swiper-button {
  background: rgba(11, 19, 43, 0.75) !important;
  width: 42px !important;
  height: 42px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.elementor-swiper-button:hover {
  background: #0052cc !important;
}

/* --------------------------------------------------------------------------
   8. SISTEMA DE PESTAÑAS (TABS) - ULTRA MODERNO Y COMPLETAMENTE INTERACTIVO
   -------------------------------------------------------------------------- */
.elementor-tabs {
  background: #ffffff !important;
  border-radius: var(--radius-lg, 20px) !important;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08) !important;
  border: 1px solid var(--gray-200, #e2e8f0) !important;
  overflow: hidden !important;
  margin: 35px auto !important;
  max-width: 980px !important;
}

.elementor-tabs-wrapper {
  display: flex !important;
  background: #f8fafc !important;
  border-bottom: 2px solid var(--gray-200, #e2e8f0) !important;
  padding: 0 !important;
}

.elementor-tab-desktop-title {
  flex: 1 !important;
  text-align: center !important;
  padding: 18px 24px !important;
  font-family: var(--font-heading, inherit) !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: #64748b !important;
  cursor: pointer !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 3px solid transparent !important;
  transition: all 0.25s ease !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

.elementor-tab-desktop-title:hover {
  color: #0052cc !important;
  background: #f1f5f9 !important;
}

.elementor-tab-desktop-title.elementor-active {
  color: #0052cc !important;
  background: #ffffff !important;
  border-bottom: 3px solid #f59e0b !important;
  font-weight: 800 !important;
}

.elementor-tabs-content-wrapper {
  padding: 35px 35px !important;
  background: #ffffff !important;
}

.elementor-tab-content {
  color: #334155 !important;
  font-size: 1rem !important;
  line-height: 1.8 !important;
}

.elementor-tab-content[hidden] {
  display: none !important;
}

.elementor-tab-content:not([hidden]) {
  display: block !important;
  animation: tabFadeIn 0.3s ease !important;
}

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

.elementor-tab-content ul {
  padding-left: 20px !important;
  margin: 15px 0 !important;
}

.elementor-tab-content ul li {
  margin-bottom: 10px !important;
  position: relative !important;
  line-height: 1.7 !important;
}

.elementor-tab-content p {
  margin-bottom: 12px !important;
}

@media screen and (max-width: 767px) {
  .elementor-tabs-wrapper {
    display: none !important;
  }

  .elementor-tab-mobile-title {
    display: block !important;
    background: #f1f5f9 !important;
    color: var(--dark, #0b132b) !important;
    font-weight: 800 !important;
    padding: 14px 18px !important;
    border-bottom: 1px solid var(--gray-200, #e2e8f0) !important;
    cursor: pointer !important;
    font-size: 0.92rem !important;
    text-align: center !important;
  }

  .elementor-tab-mobile-title.elementor-active {
    background: #0052cc !important;
    color: #ffffff !important;
  }

  .elementor-tabs-content-wrapper {
    padding: 20px 16px !important;
  }
}