/* ==========================================================================
   CUSTOM-RESPONSIVE.CSS
   Capa adicional sobre Webflow. No sobreescribe clases base a menos que
   sea necesario para responsividad o el efecto de scroll del navbar.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. NAVBAR — SCROLL EFFECT (transparente → blanco)
   --------------------------------------------------------------------------
   Estado por defecto en index.html: fondo transparente, texto blanco.
   Al hacer scroll (JS agrega .navbar--scrolled): fondo blanco, texto oscuro.
   En páginas internas (.navbar-custom.white): ya arranca blanco,
   el JS solo agrega sombra al scrollear.
   -------------------------------------------------------------------------- */

/* Transición suave para todos los cambios */
.navbar-custom {
    transition: background-color 0.35s ease, box-shadow 0.35s ease;
}

.navbar-custom .nav-link-custom {
    transition: color 0.35s ease;
}

/* --- Estado TRANSPARENTE (solo index.html, sin clase .white) --- */
.navbar-custom:not(.white) {
    background-color: transparent;
    box-shadow: none;
}

.navbar-custom:not(.white) .nav-link-custom {
    color: #fff;
}

/* --- Estado SCROLLED (JS agrega esta clase) --- */
.navbar-custom.navbar--scrolled {
    background-color: #fff !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.navbar-custom.navbar--scrolled .nav-link-custom {
    color: #222 !important;
}

.navbar-custom.navbar--scrolled .nav-link-custom:hover,
.navbar-custom.navbar--scrolled .nav-link-custom.w--current {
    color: #5514b4 !important;
}

/* Logo swap: en index.html hay dos logos (color y blanco).
   Por defecto mostramos el blanco; al scrollear mostramos el color. */
.navbar-custom:not(.white) .logo-image {
    display: none;
}

.navbar-custom:not(.white) .logo-image-white {
    display: block;
}

.navbar-custom.navbar--scrolled .logo-image {
    display: block !important;
}

.navbar-custom.navbar--scrolled .logo-image-white {
    display: none !important;
}

/* Páginas internas (.white) — solo agregar sombra al scrollear */
.navbar-custom.white.navbar--scrolled {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}


/* --------------------------------------------------------------------------
   2. MENÚ HAMBURGUESA — Mejora mobile
   -------------------------------------------------------------------------- */
.w-nav-button {
    position: relative;
    z-index: 999;
    padding: 12px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

/* Overlay del menú móvil */
@media screen and (max-width: 991px) {
    .w-nav-menu {
        background-color: #fff;
        padding: 20px 24px;
        border-radius: 0 0 12px 12px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    }

    .w-nav-menu .nav-link-custom {
        color: #222 !important;
        padding: 12px 0;
        border-bottom: 1px solid #f0f0f0;
        font-size: 1rem;
    }

    .w-nav-menu .nav-link-custom:last-child {
        border-bottom: none;
    }

    .w-nav-menu .nav-link-custom:hover,
    .w-nav-menu .nav-link-custom.w--current {
        color: #5514b4 !important;
    }
}


/* --------------------------------------------------------------------------
   3. RESPONSIVE — MOBILE (max-width: 768px)
   -------------------------------------------------------------------------- */
@media screen and (max-width: 768px) {

    /* --- Contenedores globales: reducir padding lateral --- */
    .w-container {
        padding-left: 16px;
        padding-right: 16px;
    }

    /* --- Hero (index.html) --- */
    .section-hero {
        min-height: 80vh;
    }

    .section-hero .heading {
        font-size: 2rem;
        line-height: 1.15;
    }

    .section-hero .heading-26 {
        font-size: 1.1rem;
    }

    .section-hero .image-3 {
        width: 120px;
        height: auto;
    }

    /* --- Secciones: reducir padding vertical --- */
    .section-content,
    .section-about,
    .section-publications,
    .section-2,
    .section-3,
    .section-7 {
        padding-top: 48px;
        padding-bottom: 48px;
    }

    /* --- Grillas: forzar 1 columna en mobile --- */
    .w-layout-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 24px !important;
    }

    /* Grid-2 (about section) — logo debajo del texto */
    .grid-2 .about-logo {
        max-width: 160px;
        margin: 0 auto;
    }

    /* Grid-6 (misión: Estudiar / Visibilizar / Incidir) */
    .grid-6 {
        text-align: center;
    }

    /* Grid-7 (identidad logo) */
    .grid-7 {
        align-items: center;
    }

    .grid-7>img {
        max-width: 180px;
        margin: 0 auto 16px;
    }

    /* Grid-4 (footer) */
    .grid-4 {
        text-align: center;
    }

    /* Grid-8 (recursos: sidebar + lista) */
    .grid-8 {
        gap: 16px !important;
    }

    .filter-sidebar {
        width: 100% !important;
    }


    /* --- Tarjetas dinámicas (Firebase) --- */
    .investigation-card {
        width: 100% !important;
        margin-bottom: 16px;
    }

    .investigation-card .card-image-background {
        height: 180px;
        border-radius: 8px 8px 0 0;
    }

    .investigation-card .card-content {
        padding: 16px;
    }

    .investigation-card .heading-20 {
        font-size: 1.1rem;
    }

    .investigation-card .paragraph-18 {
        font-size: 0.85rem;
        line-height: 1.5;
    }

    /* Tarjetas de equipo */
    .team-card {
        width: 100% !important;
    }

    /* Collection lists: 1 columna */
    .collection-list,
    .collection-list-2,
    .collection-list-3 {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px;
    }

    /* --- Slider de publicaciones --- */
    .slider {
        padding: 0;
    }

    .slider .w-slide {
        padding: 0 4px !important;
    }

    .slider-arrow {
        display: none;
    }

    /* --- Headings: escalar tipografía --- */
    h1 {
        font-size: 2rem;
    }

    h2 {
        font-size: 1.6rem;
    }

    h3 {
        font-size: 1.2rem;
    }

    /* --- Botones: full width en mobile --- */
    .button-primary {
        display: block;
        width: 100%;
        text-align: center;
        padding: 14px 24px;
    }

    /* --- Footer --- */
    .footer {
        padding: 32px 0;
    }

    /* --- Nosotros: info-box cards --- */
    .info-box {
        padding: 16px;
    }

    /* --- Recursos: search input --- */
    .jetboost-list-search-input-vnx5 {
        width: 100%;
        font-size: 1rem;
        padding: 12px 16px;
    }

    /* --- Paginación --- */
    .pagination-wrapper {
        flex-direction: row;
        gap: 8px;
        padding: 16px;
        justify-content: center;
        flex-wrap: wrap;
    }

    .pagination-wrapper .button-primary {
        width: auto;
        min-width: 120px;
    }
}


/* --------------------------------------------------------------------------
   4. RESPONSIVE — TABLET (769px – 991px)
   -------------------------------------------------------------------------- */
@media screen and (min-width: 769px) and (max-width: 991px) {

    .w-layout-grid {
        gap: 20px !important;
    }

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

    .section-hero .heading {
        font-size: 2.6rem;
    }
}


/* --------------------------------------------------------------------------
   5. MICRO-INTERACCIONES GLOBALES
   -------------------------------------------------------------------------- */

/* Hover lift en tarjetas */
.investigation-card,
.team-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-radius: 8px;
    overflow: hidden;
}

.investigation-card:hover,
.team-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(85, 20, 180, 0.12);
}

/* Botones: hover suave */
.button-primary {
    transition: background-color 0.25s ease, transform 0.2s ease;
}

.button-primary:hover {
    transform: translateY(-2px);
}

/* Links del navbar: underline animado */
@media screen and (min-width: 992px) {
    .nav-link-custom {
        position: relative;
    }

    .nav-link-custom::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        width: 0;
        height: 2px;
        background-color: #5514b4;
        transition: width 0.3s ease, left 0.3s ease;
    }

    .nav-link-custom:hover::after,
    .nav-link-custom.w--current::after {
        width: 100%;
        left: 0;
    }
}

/* Filter tags (recursos.html) */
.filter-tag {
    transition: background-color 0.2s ease, color 0.2s ease;
}

.filter-tag:hover,
.filter-tag.jetboost-filter-active {
    background-color: #5514b4;
    color: #fff;
}


/* --------------------------------------------------------------------------
   6. UTILIDADES
   -------------------------------------------------------------------------- */

/* Smooth scroll global */
html {
    scroll-behavior: smooth;
}

/* Evitar overflow horizontal en mobile */
body {
    overflow-x: hidden;
}

/* Imágenes responsivas por defecto */
img {
    max-width: 100%;
    height: auto;
}

/* ==========================================================================
   REGLAS MAESTRAS FINAL (Alineación Natural, HTML ya está curado)
   ========================================================================== */

/* 1. Ocultar el logo blanco por completo */
.logo-image-white {
    display: none !important;
}

/* 2. ALINEACIÓN NATURAL DEL CONTENEDOR (El fix de la posición) */
.w-nav-brand {
    display: block !important;
    float: left !important;
    /* Esto lo ancla a la izquierda, en línea con el menú */
    width: 50px !important;
    margin-top: 5px !important;
    /* Un pequeño respiro superior para centrarlo con las letras */
    opacity: 1 !important;
    visibility: visible !important;
}

/* 3. El logo morado fluye naturalmente dentro de su caja de 50px */
.logo-image {
    display: block !important;
    width: 100% !important;
    height: auto !important;
}

/* 4. Textos oscuros en fondos blancos */
.navbar-custom.white .nav-link-custom,
.navbar-custom.navbar--scrolled .nav-link-custom {
    color: #1a1a1a !important;
}

/* 5. Fondos y sombras al scrollear */
.navbar-custom.white,
.navbar-custom.navbar--scrolled {
    background-color: #ffffff !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08) !important;
}

/* 6. CONTROL DE LA SOMBRA NEGRA (Borde original de Webflow) */
.navbar-shadow {
    display: none !important;
    opacity: 0 !important;
}

.navbar-custom.white:not(.navbar--scrolled) .navbar-shadow {
    display: block !important;
    opacity: 1 !important;
}

/* ==========================================================================
   BLINDAJE MÓVIL (Tablets y Celulares - max-width: 991px)
   ========================================================================== */
@media screen and (max-width: 991px) {

    /* 1. Ordenar el logo y el botón de hamburguesa (Flexbox al rescate) */
    .navbar-custom .container-3 {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
        padding-right: 15px !important;
        /* Respiro para el botón */
    }

    /* 2. Quitar el float del logo para que flexbox lo controle suavemente */
    .w-nav-brand {
        float: none !important;
        margin-top: 0 !important;
    }

    /* 3. Forzar que el ícono de hamburguesa se vuelva OSCURO en fondo blanco */
    .navbar-custom.white .w-nav-button,
    .navbar-custom.navbar--scrolled .w-nav-button {
        color: #1a1a1a !important;
    }

    .w-icon-nav-menu {
        color: inherit !important;
    }

    /* 4. Darle un fondo blanco fijo y sombra al menú DESPLEGABLE cuando se abre */
    .w-nav-menu {
        background-color: #ffffff !important;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1) !important;
    }

    /* 5. Asegurar que las letras del menú móvil se lean perfectamente */
    .w-nav-menu .nav-link-custom {
        color: #1a1a1a !important;
        padding: 15px 20px !important;
        border-bottom: 1px solid #f0f0f0 !important;
        /* Líneas separadoras elegantes */
        display: block !important;
    }
}