/* ==========================================================================
   KAIROSIG S.A.S. - RESPONSIVE MOBILE OFFCANVAS (EDICIÓN BLANCA & EJECUTIVA)
   Adaptabilidad 100% garantizada, cero desbordamiento horizontal.
   ========================================================================== */

/* ==========================================================================
   PANTALLAS INTERMEDIAS & TABLETS (< 1024px)
   ========================================================================== */
@media (max-width: 1024px) {
  .hero-grid-white {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .dossier-layout {
    grid-template-columns: 1fr;
    gap: 3.5rem;
  }

  .dossier-worker-card {
    order: 2;
  }

  .metrics-strip-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }

  .eduqairos-open-layout {
    grid-template-columns: 1fr;
    gap: 3.5rem;
  }

  .eduqairos-clean-worker-card {
    order: 2;
    max-width: 100%;
  }

  .eduqairos-clean-worker-card img {
    max-height: 380px;
  }

  .campus-box-white {
    flex-direction: column;
    text-align: center;
    gap: 2rem;
  }

  .campus-box-left {
    flex-direction: column;
  }

  .corp-footer-clean-grid {
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
  }

  .avales-strip-row {
    gap: 3rem;
  }

  .team-grid-enterprise {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.75rem;
  }
}

/* Pantallas Medianas / Laptops / Vista Previa de WordPress (993px - 1200px) */
@media (min-width: 993px) and (max-width: 1200px) {
  .corp-navbar {
    gap: 0.75rem;
  }
  .corp-nav-links {
    gap: 0.15rem;
  }
  .corp-nav-link {
    font-size: 0.85rem;
    padding: 0.45rem 0.65rem;
  }
  .corp-btn-campus-nav {
    font-size: 0.82rem;
    padding: 0.5rem 0.95rem;
  }
}

/* ==========================================================================
   MÓVILES Y TABLETS (< 992px)
   ========================================================================== */
@media (max-width: 992px) {
  html, body {
    overflow-x: hidden !important;
    width: 100% !important;
    position: relative;
  }

  /* Desactivar transformaciones y filtros en header móvil para garantizar que no atrape elementos fijos en iOS WebKit */
  .corp-header,
  .corp-header.scrolled,
  .corp-header.header-visible,
  .corp-header.header-hidden,
  body.nav-open .corp-header {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: #FFFFFF !important;
    will-change: auto !important;
    transform: none !important;
    z-index: 1050 !important;
  }

  body.nav-open .corp-header {
   z-index: 99999 !important; /* Eleva el menú por encima del fondo oscuro */
  }

  /* 1. OCULTA LA BARRA SUPERIOR GRIS (S.A.S, Capacitación, Teléfono, etc.) EN MÓVILES */
  .corp-top-bar,
  header.corp-top-bar,
  .top-bar {
    display: none !important;
  }

  /* 2. CUANDO EL NAVBAR ESTÁ ABIERTO: ENFOQUE 100% EN EL MENÚ (Oculta cookies y fondos) */
  body.nav-open .corp-top-bar,
  body.nav-open .top-bar,
  body.nav-open .corp-cookie-banner,
  body.nav-open #corpCookieBanner {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .corp-mobile-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* 3. MENÚ MÓVIL PERFECTO: VA DESDE ARRIBA DEL TODO (top: 0) HASTA ABAJO (bottom: 0) */
  .corp-nav-links {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: min(350px, 88vw) !important;
    height: 100% !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    background: #FFFFFF !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 4.75rem 1.4rem 2rem !important;
    box-shadow: -12px 0 40px rgba(11, 37, 69, 0.22) !important;
    border-left: 1px solid rgba(11, 37, 69, 0.08) !important;
    border-radius: 0 !important;
    transform: translateX(105%) !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.28s ease !important;
    z-index: 999999 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 0.45rem !important;
  }

  .corp-nav-links.active {
    transform: translateX(0) !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  /* Encabezado elegante de sección dentro del menú */
  .corp-nav-links::before {
    content: "Menú Institucional";
    display: block !important;
    width: 100% !important;
    font-family: var(--font-display, 'Outfit', sans-serif) !important;
    font-size: 0.74rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: #94A3B8 !important;
    padding-bottom: 0.65rem !important;
    margin-bottom: 0.35rem !important;
    border-bottom: 1px solid #F1F5F9 !important;
  }

  /* Pie corporativo al fondo del menú móvil que aprovecha el espacio en blanco */
  .corp-nav-links::after {
    content: "KAIROSIG S.A.S. • Manta, Ecuador\A+593 96 422 1339\AFormación 100% Online Avalada";
    white-space: pre-wrap !important;
    display: block !important;
    width: 100% !important;
    margin-top: auto !important;
    padding-top: 1.5rem !important;
    font-family: var(--font-body, 'Plus Jakarta Sans', sans-serif) !important;
    font-size: 0.76rem !important;
    line-height: 1.6 !important;
    color: #94A3B8 !important;
    text-align: center !important;
    border-top: 1px dashed #E2E8F0 !important;
  }

  /* Cada elemento ocupa el 100% del ancho */
  .corp-nav-links li {
    width: 100% !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  /* Backdrop Oscuro Sin Borrosidad */
  /* Backdrop Oscuro (Detrás del menú para no bloquear los clics) */
  .nav-backdrop {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(15, 23, 42, 0.45) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease, visibility 0.25s ease;
    z-index: 9990 !important; /* Por debajo del menú */
  }

  .nav-backdrop.active {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  /* Botón de cierre circular */
  .corp-nav-close {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
    top: 1.15rem !important;
    right: 1.15rem !important;
    width: 42px !important;
    height: 42px !important;
    background: #F8FAFC !important;
    border: 1px solid #E2E8F0 !important;
    font-size: 1.65rem !important;
    color: #1E293B !important;
    cursor: pointer !important;
    line-height: 1 !important;
    border-radius: 50% !important;
    transition: all 0.2s ease !important;
    z-index: 20 !important;
  }

  .corp-nav-close:hover {
    color: #FFFFFF !important;
    background: var(--corp-navy, #0B2545) !important;
    border-color: var(--corp-navy, #0B2545) !important;
  }

  /* Pestañas y Enlaces Móviles Claros y Definidos */
  .corp-nav-link {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0.95rem 1.25rem !important;
    border-radius: var(--radius-sm) !important;
    border-bottom: 1px solid var(--border-hairline) !important;
    color: var(--text-primary) !important;
    font-family: var(--font-display) !important;
    font-size: 1.05rem !important;
    font-weight: 600 !important;
    transition: background 0.18s ease, color 0.18s ease !important;
  }

  .corp-nav-link::after {
    display: none !important;
  }

  .corp-nav-link:hover {
    color: var(--corp-navy) !important;
    background: var(--bg-surface-soft) !important;
  }

  .corp-nav-link.active {
    color: var(--corp-navy) !important;
    background: rgba(11, 37, 69, 0.08) !important;
    border-left: 4px solid var(--corp-gold) !important;
    font-weight: 700 !important;
  }

  .corp-btn-campus-nav {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-top: 0.85rem !important;
    padding: 0.95rem 1.25rem !important;
    font-size: 0.98rem !important;
    border-radius: var(--radius-pill) !important;
  }

  .contact-cards-grid-white {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .bento-grid-white {
    grid-template-columns: 1fr;
  }

  .hero-headline-curved {
    font-size: 2.75rem;
  }

  .team-card-clean {
    flex: 0 1 calc(50% - 1.5rem);
    max-width: 300px;
  }
}

/* ==========================================================================
   PANTALLAS COMPACTAS (< 768px): HERO, COOKIES Y MODAL LEGAL
   ========================================================================== */
@media (max-width: 768px) {
  /* Apilado vertical de botones del Hero para que Brochure nunca se corte a la derecha */
  .hero-buttons-row {
    flex-direction: column !important;
    width: 100% !important;
    gap: 0.75rem !important;
  }

  .hero-buttons-row .btn-corp {
    width: 100% !important;
    justify-content: center !important;
  }

  /* 4. BANNER DE PRIVACIDAD & COOKIES PERFECTO EN MÓVILES (Nunca se corta a los lados) */
  .corp-cookie-banner {
    left: 14px !important;
    right: 14px !important;
    bottom: 14px !important;
    width: auto !important;
    max-width: 520px !important;
    margin: 0 auto !important;
    transform: translateY(35px) !important;
    padding: 1.15rem 1.25rem !important;
    border-radius: 18px !important;
    box-shadow: 0 12px 40px rgba(11, 37, 69, 0.28) !important;
    z-index: 9990 !important;
  }

  .corp-cookie-banner.visible {
    transform: translateY(0) !important;
  }

  .corp-cookie-header-title h4 {
    font-size: 0.96rem !important;
  }

  .corp-cookie-text {
    font-size: 0.82rem !important;
    line-height: 1.55 !important;
  }

  .corp-cookie-actions {
    flex-direction: column-reverse !important;
    align-items: stretch !important;
    gap: 0.65rem !important;
    margin-top: 0.5rem !important;
  }

  .corp-cookie-btn-accept {
    width: 100% !important;
    text-align: center !important;
    padding: 0.78rem 1rem !important;
    font-size: 0.90rem !important;
  }

  .corp-cookie-btn-link {
    width: 100% !important;
    text-align: center !important;
    padding: 0.4rem !important;
    font-size: 0.84rem !important;
  }

  /* 5. MODAL DE TÉRMINOS & CONDICIONES (LOPDP) FLUIDO Y ADAPTABLE EN CELULARES */
  .corp-legal-modal-backdrop {
    padding: 0.85rem !important;
    z-index: 1000000 !important;
  }

  .corp-legal-modal-card {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 88vh !important;
    max-height: 88dvh !important;
    border-radius: 18px !important;
  }

  .corp-legal-modal-header {
    padding: 1rem 1.15rem !important;
  }

  .corp-legal-modal-header h3 {
    font-size: 0.98rem !important;
  }

  .corp-legal-modal-close {
    width: 36px !important;
    height: 36px !important;
    font-size: 1.6rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    background: #F1F5F9 !important;
    color: #0F172A !important;
  }

  .corp-legal-modal-body {
    padding: 1.15rem !important;
    font-size: 0.84rem !important;
    line-height: 1.65 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .corp-legal-modal-body h4 {
    font-size: 0.92rem !important;
    margin-top: 0.75rem !important;
  }

  .corp-legal-modal-footer {
    padding: 0.85rem 1.15rem !important;
    border-top: 1px solid #F1F5F9 !important;
  }

  .corp-legal-modal-footer .corp-cookie-btn-accept {
    width: 100% !important;
    padding: 0.78rem 1rem !important;
    font-size: 0.90rem !important;
  }

  .hero-headline-curved {
    font-size: 2.35rem;
  }

  .dossier-heading {
    font-size: 2rem;
  }

  .section-dossier-white,
  .section-mission-white,
  .section-brochure-white,
  .section-contact-white,
  .section-avales-strip {
    padding: 3.5rem 0;
  }

  .avales-strip-row {
    gap: 2.25rem;
  }

  .avale-strip-item img {
    max-height: 52px;
    max-width: 175px;
  }

  .corp-carousel-standalone {
    max-width: 100%;
  }

  .carousel-viewport {
    height: 500px;
  }

  .hero-clean-worker-card {
    max-width: 100%;
    margin-top: 1.5rem;
  }

  .hero-clean-worker-card img {
    max-height: 420px;
  }

  .dossier-worker-card {
    max-width: 100%;
    margin-top: 1.75rem;
  }

  .dossier-worker-card img {
    max-height: 420px;
  }

  .campus-worker-visual {
    display: none;
  }

  .map-clean-box {
    height: 330px;
    margin-top: 2.5rem;
  }

  .corp-footer-clean-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .corp-footer-bottom-clean {
    flex-direction: column;
    text-align: center;
    gap: 1.25rem;
  }

  .corp-footer-social {
    justify-content: center;
    order: 2;
  }

  .team-leader-clean-card {
    flex-direction: column;
    max-width: 420px;
    margin-bottom: 2.5rem;
  }

  .team-leader-clean-photo {
    width: 100%;
    height: 280px;
    border-right: none;
    border-bottom: 1px solid var(--border-hairline);
  }

  .team-leader-clean-info {
    padding: 1.75rem 1.5rem;
    text-align: center;
    align-items: center;
  }

  .team-leader-name {
    font-size: 1.65rem;
  }
}

/* ==========================================================================
   DISPOSITIVOS MÓVILES (< 480px)
   ========================================================================== */
@media (max-width: 480px) {
  .container {
    padding: 0 1.15rem;
  }

  .avales-strip-row {
    flex-direction: column;
    gap: 1.75rem;
  }

  .avale-strip-item img {
    max-height: 46px;
    max-width: 190px;
  }

  .corp-navbar {
    padding: 0.75rem 0;
  }

  .corp-logo-img {
    height: 36px;
  }

  .hero-white-enterprise {
    padding: 3.5rem 0 3rem;
  }

  .hero-headline-curved {
    font-size: 2.05rem;
    line-height: 1.18;
  }

  .hero-subhead-clean {
    font-size: 0.98rem;
    line-height: 1.65;
    margin-bottom: 1.75rem;
  }

  .btn-corp {
    width: 100%;
    font-size: 0.84rem;
    padding: 0.8rem 1rem;
  }

  .corp-carousel-standalone {
    max-width: 100%;
  }

  .carousel-viewport {
    height: 420px;
    min-height: 360px;
    border-radius: var(--radius-md, 16px) !important;
  }

  .carousel-badge-glass {
    top: 10px;
    left: 10px;
    font-size: 0.7rem;
    padding: 0.35rem 0.75rem;
  }

  .team-grid-enterprise {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .carousel-arrow {
    width: 34px;
    height: 34px;
    font-size: 0.78rem;
  }

  .carousel-arrow-prev {
    left: 8px;
  }

  .carousel-arrow-next {
    right: 8px;
  }

  .metrics-strip-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .metric-big-num {
    font-size: 2.1rem;
  }

  .bento-card-white {
    padding: 2rem 1.25rem;
  }

  .bento-card-white h3 {
    font-size: 1.25rem;
  }

  .contact-card-white {
    padding: 2rem 1.15rem;
  }

  .contact-card-white h3 {
    font-size: 1.25rem;
  }

  .contact-card-white p {
    font-size: 0.9rem;
    margin-bottom: 1.25rem;
  }

  .btn-email-main-white {
    font-size: 0.82rem;
    padding: 0.75rem 0.5rem;
  }

  .btn-subtool-white {
    font-size: 0.75rem;
    padding: 0.5rem 0.35rem;
  }

  .statement-box-white {
    padding: 2rem 1.25rem;
  }

  .statement-box-white h4 {
    font-size: 1.35rem;
  }

  .statement-box-white p {
    font-size: 0.92rem;
  }

  .hero-clean-worker-card img {
    max-height: 340px;
  }

  .dossier-worker-card img {
    max-height: 340px;
  }

  .team-card-clean {
    flex: 0 1 100%;
    max-width: 320px;
  }

  .team-leader-clean-card {
    max-width: 100%;
  }
}