/* ==================================================
   BLINDAJE DEL MENÚ SUPERIOR (Todas las pantallas)
   Evita que la palabra NOUS lo tape, respetando la carga
================================================== */

#navbar {
    z-index: 998 !important;
}

/* ================================================== */
@media (max-width: 767px) {


  .hero-nous {
    padding-top: 420px !important;
    /* Garantiza que jamás falte fondo abajo y le da zoom extra al libro */
    background-size: auto 110% !important; 
    /* Anclamos el foco en el libro */
    background-position: 60% center !important; 
  }

  /* Le bajamos los humos a la caja del NOUS gigante para que respete al logo */
  .hero-nous .z-10 {
    z-index: 1 !important;
  }

  /* --- ORDEN PERFECTO DE TEXTOS EN CELULAR --- */
  .hero-nous-text {
    position: relative !important;
    top: 75px !important; /* Altura perfecta unificada */
    z-index: 1 !important;
    display: flex !important;
    flex-direction: column !important; 
  }

.hero-nous-tag-wrap {
    display: none !important; /* Oculta la frase solo en celulares para limpiar el diseño */
  }

  .hero-nous-title {
    order: 2 !important; /* Segundo: Exploradores del Nous */
    font-size: 40px !important; 
    line-height: 1 !important;
    letter-spacing: -1px !important;
    margin-bottom: 10px !important; 
  }

  /* TERCERO: El subtítulo. */
  .hero-nous-text h2 {
    order: 3 !important; 
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  .hero-nous-tag {
    font-size: 15px !important;
    line-height: 1.35 !important;
    max-width: 92vw !important;
    white-space: normal !important;
  }

  .hero-nous-big {
    margin-top: 165px !important;
    font-size: 105px !important;
    opacity: 0.55 !important;
  }
} /* <--- CIERRE DEL BLOQUE DE CELULAR */


/* ==================================================
   2. REGLAS PARA COMPUTADORAS (Más de 768px)
================================================== */
@media (min-width: 768px) {
  
  .hero-nous {
    /* zoom perfecto, sin forzar la posición para que quede natural */
    background-size: 140% !important; 
  }

}

/* ==================================================
   Exploradores del Nous - Banner Videos
   Desktop usa template original.
   Mobile tiene ajuste propio.
================================================== */
/* ==================================================
   2. REGLAS PARA TABLETS (De 768px a 1024px)
================================================== */
@media (min-width: 768px) and (max-width: 1024px) {
  
  .hero-nous {
    padding-top: 300px !important;
    background-size: cover !important; 
    background-position: 70% center !important; 
  }

  .hero-nous .z-10 {
    z-index: 1 !important;
  }

  .hero-nous-text {
    position: relative !important;
    top: 40px !important; 
    z-index: 1 !important;
    display: flex !important;
    flex-direction: column !important; 
  }

.hero-nous-tag-wrap {
    display: none !important; /* Oculta la frase solo en celulares para limpiar el diseño */
  }


  .hero-nous-tag-wrap {
    order: 1 !important; 
    margin-bottom: 12px !important; 
  }

  .hero-nous-title {
    order: 2 !important; 
    font-size: 55px !important; 
    line-height: 1 !important;
    margin-bottom: 10px !important; 
  }

  .hero-nous-text h2 {
    order: 3 !important; 
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  /* ---> LA MAGIA PARA QUE ENTRE LA PALABRA "NOUS" <--- */
  .hero-nous-big {
    font-size: 13vw !important; 
    margin-top: 100px !important; 
  }
}

/* ==================================================
   DOMANDO AL IPAD PRO 
   Hasta 1100px forzamos la vista móvil en el menú
================================================== */
@media (max-width: 1100px) {
    
    /* 1. Ocultar TODO el bloque de PC del encabezado (links y botón redondo) */
    #navbar .lg\:flex {
        display: none !important;
    }

    /* 2. Forzar a que se vea la hamburguesa de 3 rayitas (móvil) en la barra */
    #navbar .lg\:hidden {
        display: block !important;
    }

    /* 3. LA SOLUCIÓN AL MISTERIO: Hacemos visibles los links ADENTRO del menú lateral */
    /* Tailwind los estaba escondiendo por el tamaño del iPad Pro */
    .sidebar-modal .lg\:hidden {
        display: block !important;
    }
}

/* Fondo visible para Territorios del Nous */
.nous-section-glow {
    position: relative;
    overflow: hidden;
}

.nous-section-glow::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 190px;
    height: 520px;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(
            ellipse at center,
            rgba(255, 45, 160, 0.42) 0%,
            rgba(176, 0, 255, 0.30) 26%,
            rgba(22, 195, 201, 0.12) 48%,
            rgba(0, 0, 0, 0) 72%
        );
    filter: blur(12px);
}

/* Separación especial para hero Diógenes en móvil */
@media (max-width: 767px) {

    .diogenes-hero {
        margin-top: 140px !important;
    }

}

@media (min-width: 768px) {

    .diogenes-hero {
        margin-top: 0 !important;
    }

}

/* ==================================================
   BANNERS INTERNOS (Celulares)
   Evita que el título se meta debajo del logo
================================================== */
@media (max-width: 767px) {
    
    .mobile-nous-banner,
    .page-banner {
        padding-top: 210px !important; /* Subimos a 210px para bajar el texto apenas un poco más */
    }

}

/* ==================================================
   BANNERS INTERNOS (Tablets)
   Bajamos los títulos exclusivamente de 768px a 1024px
================================================== */
@media (min-width: 768px) and (max-width: 1024px) {
    
    .mobile-nous-banner,
    .page-banner {
        padding-top: 250px !important; /* Podés subir o bajar este número a gusto */
    }

}

/* ==================================================
   BANNERS INTERNOS (iPad Pro 13 - Escudo táctico)
   Atrapa a la tablet gigante sin tocar la computadora
================================================== */
@media (min-width: 1025px) and (max-width: 1100px) {
    
    .mobile-nous-banner,
    .page-banner {
        /* Le damos el mismo empujón que a las otras tablets */
        padding-top: 250px !important; 
    }

}

/* ==================================================
   PRELOADER: BRÚJULA DEL NOUS
================================================== */
.brujula {
    width: 60px;
    height: 60px;
    border: 3px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    position: relative;
}

/* La aguja de la brújula */
.brujula::before {
    content: "";
    position: absolute;
    top: 10px;
    left: 50%;
    width: 4px;
    height: 40px;
    margin-left: -2px;
    /* Mitad de un color (ej. tu cyan) y mitad blanca/gris */
    background: linear-gradient(to bottom, #16c3c9 50%, #ffffff 50%);
    border-radius: 4px;
    animation: buscar-norte 1.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;
}

/* El eje central */
.brujula::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    margin-top: -5px;
    margin-left: -5px;
    background-color: #16c3c9;
    border-radius: 50%;
}

/* Animación con efecto de rebote magnético */
@keyframes buscar-norte {
    0% { transform: rotate(0deg); }
    50% { transform: rotate(180deg); }
    100% { transform: rotate(360deg); }
}

/* Ocultar el badge de reCAPTCHA SOLO en dispositivos móviles (hasta 768px) */
@media screen and (max-width: 768px) {
    .grecaptcha-badge {
        visibility: hidden !important;
        opacity: 0 !important;
    }
}

/* ==================================================
   JERARQUÍA DEL MENÚ MÓVIL Y SU SOMBRA
================================================== */
.backdrop {
    z-index: 999 !important; /* La sombra se queda atrás */
}

.sidebar-modal {
    z-index: 1000 !important; /* El menú pasa al frente absoluto, iluminado y clickeable */
}

/* ==================================================
   REBORDE / SOMBRA PARA EL TEXTO DEL PORTAL
================================================== */
.hero-nous-text h2 {
    text-shadow: 1px 1px 3px rgba(0,0,0,0.9), 
                 -1px -1px 3px rgba(0,0,0,0.9), 
                 0px 0px 10px rgba(0,0,0,1) !important;
}