/*
 * ESTILOS GLOBALES
 * Diseño de Cabecera (Header) Transparente con Split Menu (Escritorio)
 */

.site-header-transparent {
    background-color: rgba(0, 0, 0, 0.4); 
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    position: fixed;
    width: 100%;
    z-index: 999;
    top: 0;
    left: 0;
}

.custom-split-menu-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 20px 0;
    max-width: 1200px; 
    margin: 0 auto; 
}

/* Alineación y estilo del Título central 'Nativa' (Escritorio) */
.site-branding-custom-center {
    flex-grow: 1;
    text-align: center; 
    margin: 0 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.site-branding-custom-center .site-title,
.site-branding-custom-center .custom-logo-link {
    margin: 0; 
    line-height: 1;
}

.site-branding-custom-center .site-title a {
    color: #FFFFFF;
    font-size: 32px; 
    text-decoration: none;
    font-weight: normal; 
}

/* Estilos de los menús izquierdo y derecho */
.main-navigation-left,
.main-navigation-right {
    display: block; 
    background: transparent;
}

.nav-menu-left,
.nav-menu-right {
    display: flex; 
    list-style: none; 
    margin: 0;
    padding: 0;
}

.nav-menu-left li {
    position: relative;
    margin-right: 25px; 
}

.nav-menu-right li {
    position: relative;
    margin-left: 25px; 
}

.nav-menu-left a,
.nav-menu-right a {
    color: #FFFFFF; 
    text-decoration: none;
    font-size: 16px;
    padding: 5px 0;
    display: block;
    transition: color 0.2s;
}

/* HOVER Y ELEMENTO ACTIVO del Menú Principal */
.nav-menu-left a:hover,
.nav-menu-right a:hover,
.nav-menu-left li.current-menu-item a,
.nav-menu-right li.current-menu-item a {
    color: #ff8605; 
}

/*
 * AJUSTE DE LOGO LLAMA JUNTO AL TÍTULO (ESCRITORIO)
 */

.custom-header-logo-llama {
    width: 32px; 
    height: 32px; 
    margin-right: 12px; 
    line-height: 1; 
}

.custom-header-logo-llama img {
    width: 100%;
    height: 100%;
    object-fit: contain; 
}

/*
 * ESTILOS Y CORRECCIÓN DE SUBMENÚS (DROPDOWNS)
 */

#site-navigation-left .sub-menu,
#site-navigation-right .sub-menu {
    display: none !important; 
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    z-index: 9999 !important;

    background-color: rgba(0, 0, 0, 0.7) !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px); 
    min-width: 250px !important;
    margin: 0 !important;
    padding-left: 0 !important; 
    list-style: none !important;
    
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}

#site-navigation-left li:hover > .sub-menu,
#site-navigation-right li:hover > .sub-menu {
    display: block !important;
    opacity: 1;
    transform: translateY(0);
}

#site-navigation-left .sub-menu li,
#site-navigation-right .sub-menu li {
    display: block !important; 
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
}

#site-navigation-left .sub-menu a,
#site-navigation-right .sub-menu a {
    padding: 8px 20px !important;
    color: #CCCCCC !important; 
    font-size: 15px !important; 
}

/* HOVER del Submenú */
#site-navigation-left .sub-menu a:hover,
#site-navigation-right .sub-menu a:hover {
    background-color: rgba(255, 134, 5, 0.2) !important; 
    color: #ff8605 !important;
}

/*
 * MARGEN UNIVERSAL DEL CONTENIDO
 * Ajuste para despejar el header fijo.
 */
#content,
.site-content {
    margin-top: 120px !important; 
}

/*
 * ESTILOS DEL FOOTER
 */

.site-footer {
    padding-top: 60px; 
    padding-bottom: 40px; 
    background-color: #000000; 
}

/* Layout de columnas */
.site-footer .guten-container {
    display: flex;
    justify-content: space-between; 
    align-items: flex-start; 
}

/* Encabezados y Texto */
.site-footer h6.guten-element {
    color: #FFFFFF; 
    font-size: 18px;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1); 
    padding-bottom: 5px;
}

.site-footer p, 
.site-footer a {
    color: #CCCCCC; 
    font-size: 15px;
    line-height: 1.6;
    text-decoration: none;
}

.site-footer a:hover {
    color: #ff8605; 
}

/* Columna de Logos (Páginas de interés) */
.site-footer .guten-qD2pbL {
    text-align: center; 
}

.site-footer .guten-qD2pbL figure {
    margin: 10px 0 20px;
}

/* Sistema de pestañas (Ubicación Nativa) */
.site-footer .guten-tabs .tab-heading-item {
    background-color: #333333; 
    color: #FFFFFF;
    padding: 8px 15px;
    border-radius: 4px;
    margin-right: 5px;
    transition: background-color 0.2s;
}

.site-footer .guten-tabs .tab-heading-item:hover,
.site-footer .guten-tabs .tab-heading-item.active {
    background-color: #ff8605; 
    color: #000000;
}

/* Créditos */
.site-footer #site-generator {
    text-align: center; 
}

.site-footer .site-info {
    padding-top: 15px;
    color: #AAAAAA; 
    font-size: 14px;
}
.site-footer .site-info a {
    color: #ff8605; 
    text-decoration: none;
}

/*
 * PÁGINA "NUESTRAS MARCAS" - CUADRÍCULA REACTIVA (ESCRITORIO)
 */

.marcas-carrusel-bg {
    padding-left: 20px;
    padding-right: 20px;
    background-color: #000;
    overflow: hidden;
}

.marcas-carrusel-bg .guten-container {
    display: flex; 
    justify-content: center; 
    gap: 40px; 
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    padding: 20px 0;
}

.marca-card-interactive {
    flex: 0 0 450px; 
    height: 380px; 
    text-align: center;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    z-index: 1 !important;
    
    background-color: #1a1a1a;
    border: 1px solid rgba(255, 255, 255, 0.05);
    
    /* ESTADO DE REPOSO: Desenfoque y opacidad reducida */
    filter: blur(1px) grayscale(80%); 
    opacity: 0.7;
    transform: scale(0.95);
    
    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
}

.marca-card-interactive::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-size: cover;
    background-position: center center;
    z-index: 1 !important;
    filter: brightness(0.6);
    transition: filter 0.5s;
}

.marca-alpaca-terra::before {
    background-image: url('https://nativa.pe/wp-content/uploads/2025/09/fiber-6193207_1280.jpg'); 
}

.marca-monasterio::before {
    background-image: url('https://nativa.pe/wp-content/uploads/2025/09/fabric-3506846_1920.jpg'); 
}

.marca-card-interactive .guten-column-wrapper {
    position: relative;
    z-index: 5;
    padding: 40px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.marca-card-interactive img {
    max-width: 200px; 
    height: auto;
    margin: 0 auto 30px;
}

/* ESTADO DE HOVER */
.marca-card-interactive:hover {
    filter: blur(0px) grayscale(0%);
    opacity: 1;
    transform: scale(1.05) translateY(-5px);
    z-index: 1 !important;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6), 0 0 0 4px #ff8605; 
    border-color: #ff8605; 
}

.marca-card-interactive:hover::before {
    filter: brightness(0.6); 
}

/* Estilos de Botones */
.marca-card-interactive a {
    display: inline-block;
    padding: 12px 30px;
    margin: 0 10px;
    color: #000 !important;
    background-color: #ff8605;
    border-radius: 8px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1px;
    transition: background-color 0.2s;
}

.marca-card-interactive a:hover {
    background-color: #e57500;
}
.page .entry-content,
.page .content-area {
    margin: 0 !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}


/*
 * MEDIA QUERIES
 */

@media screen and (min-width: 1024px) {
    /* Ocultar elementos móviles en escritorio */
    .menu-toggle {
        display: none !important;
    }
    .site-header-main .template-parts-navigation-nav-full-screen-menu {
        display: none !important;
    }
}

@media screen and (max-width: 1023px) {
    
    /* ----------------------------------------------------- */
    /* MÓVIL: AJUSTES DE CABECERA (Header) */
    /* ----------------------------------------------------- */
    
    /* Ocultar navegación de escritorio */
    #site-navigation-left,
    #site-navigation-right,
    .main-navigation-left,
    .main-navigation-right {
        display: none;
    }

    /* Barra de Cabecera Móvil (Nativa) - Centrado */
    .site-branding-custom-center {
        display: block !important;
        position: fixed;
        top: 0;
        left: 0;
        
        margin: 0 !important;
        width: 100vw; 
        
        text-align: center; 
        padding: 10px 0;
        
        background-color: rgba(0, 0, 0, 0.4);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        
        z-index: 1000;
    }
    
    .site-branding-custom-center .site-title a {
        font-size: 24px !important; 
        line-height: 1;
        text-decoration: none; 
        color: #FFFFFF !important;
    }
    
    /* Ocultar logo en cabecera móvil */
    .branding-wrapper-llama .custom-logo-link {
        display: none !important; 
    }
    
    /* Margen para el contenido (debajo de la barra superior) */
    #content,
    .site-content {
        margin-top: 50px !important; 
        z-index: 1 !important; /* Bajo z-index para el contenido principal */
    }
    
    /* Mostrar Botón de Menú Hamburguesa */
    .menu-toggle {
        display: block !important;
        position: fixed;
        top: 5px; 
        left: 10px;
        z-index: 1001;
    }

    /* Estilo general del Header */
    .site-header-transparent {
        position: relative;
        background-color: #000;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
    
    /* ----------------------------------------------------- */
    /* MÓVIL: AJUSTES DE HERO (Portada) */
    /* ----------------------------------------------------- */

    /* Altura de la sección hero */
    .custom-header, 
    .custom-header-media {
        height: 60vh !important;
        max-height: 450px !important;
    }
    
    /* Ajuste de imagen (llama) */
    .custom-header-media img {
        height: 100% !important; 
        width: 100% !important;
        object-fit: cover !important;
        /* Prioriza la izquierda (donde está la llama) */
        object-position: left center !important; 
    }

    .custom-header-overlay { 
        height: 100% !important;
    }
    
    /* Posicionamiento y alineación del texto del Hero (Alineación a la izquierda) */
    .custom-header-content {
        position: absolute; 
        
        /* Posiciona a la izquierda y centra verticalmente */
        left: 20px !important; 
        right: auto !important; 
        top: 50%;
        transform: translateY(-50%) !important; 
        
        width: calc(100% - 40px) !important; 
        text-align: left !important; /* Alineación a la izquierda */
        padding: 0;
    }

    /* Ajuste de fuentes del Hero */
    .custom-header-content .entry-header h1,
    .custom-header-content .entry-header h1 a {
        font-size: 38px !important; 
        text-align: left !important;
        margin-bottom: 5px;
        color: #FFFFFF !important;
    }
    
    .custom-header-content .site-header-text p {
        font-size: 18px !important; 
        text-align: left !important;
        line-height: 1.3;
        margin-top: 5px;
    }

    /* ----------------------------------------------------- */
    /* MÓVIL: AJUSTES DE FOOTER */
    /* ----------------------------------------------------- */
    
    .site-footer .guten-container {
        display: block; 
    }

    /* Espacio entre las secciones del footer apiladas */
    .site-footer .guten-element.guten-column {
        margin-bottom: 40px !important; 
        padding-top: 10px;
        padding-bottom: 10px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }

    /* Última columna sin separador */
    .site-footer .guten-k8AKja {
        margin-bottom: 0 !important;
        border-bottom: none !important;
    }
    
    /* Forzar que los logos se vean alineados a la izquierda y con espacio */
    .site-footer .guten-qD2pbL {
        text-align: left;
    }

    /* Ajuste de imágenes de logo para que se apilen horizontalmente */
    .site-footer .guten-qD2pbL figure {
        display: inline-block;
        margin-right: 20px;
    }
    
    /* ----------------------------------------------------- */
    /* MÓVIL: AJUSTES DE Z-INDEX (Solución de Superposición) */
    /* ----------------------------------------------------- */
    
    /* Z-INDEX alto para el menú de pantalla completa */
    .full-screen-menu-primary, 
    .full-screen-menu-wrapper {
        z-index: 99999 !important; 
    }
    
    /* Z-INDEX para botones fijos (Menú hamburguesa y WhatsApp) */
    .menu-toggle, 
    #menu-button, 
    .whatsapp-button, 
    .scroll-up {
        z-index: 9999 !important;
    }
    .scroll-down {
        z-index: 1 !important;
    }
    
    .content-area .wp-block-gutenverse-section.seccion-destacada-3col {
        display: block;
    }
    
    .seccion-destacada-3col .guten-container {
        display: block;
    }
    
    .seccion-destacada-3col img {
        /*
        * CAMBIO CRÍTICO: 
        * 'contain' asegura que la imagen se vea completa.
        * 'auto' permite que la altura se ajuste a la relación de aspecto.
        */
        height: auto !important; /* Permitir que la altura se ajuste automáticamente */
        object-fit: contain !important; /* Muestra la imagen completa sin cortar */
        background-color: #000; /* Añade un fondo si queda espacio vacío por 'contain' */
    }
    
    .seccion-destacada-3col .guten-column:not(:last-child) {
        margin-bottom: 10px; 
    }
    
    
}

@media screen and (max-width: 768px) {
    
    /* ----------------------------------------------------- */
    /* MÓVIL PEQUEÑO: AJUSTES DE MARCAS */
    /* ----------------------------------------------------- */
    
    .contenedor-de-marcas-flex { /* Reemplaza con el selector real del contenedor flex */
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: center !important;
    }
    
    /* 2. Ajustar las tarjetas de marca (marca-card-interactive) */
    .marca-card-interactive {
        /* CAMBIO CRÍTICO: Permitir que la tarjeta ocupe todo el ancho disponible */
        flex: 0 0 100% !important; 
        width: 100% !important; 
        max-width: 350px !important; /* Opcional: Limita el ancho para que no se vea gigantesca en tablet */
        height: auto !important; /* Permite que la altura se ajuste a su contenido */
        margin-bottom: 20px; /* Añade espacio entre las tarjetas apiladas */
        
        /* Ajustar estilos visuales (si el blur o la opacidad son muy fuertes) */
        filter: blur(0) grayscale(50%) !important; /* Suaviza el efecto en móvil */
        opacity: 1 !important; /* Aumenta la visibilidad */
        transform: scale(1) !important;
    }
    
    /* Opcional: Si las imágenes dentro de la tarjeta son demasiado grandes */
    .marca-card-interactive img {
        max-width: 100%;
        height: auto;
    }
}