/* ==========================================================================
   CÓDIGO CSS MAESTRO - SIXTINA LUXURY (FRONTEND & GUTENBERG)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. CABECERA: LOGOTIPO SOBRE LAS RESTRICCIONES DE BLOCKSY
   -------------------------------------------------------------------------- */
header img.custom-logo,
.site-branding img,
[data-id="logo"] img {
    max-height: 120px !important;
    width: auto !important;
    z-index: 99999 !important;
    position: relative !important;
    object-fit: contain !important;
}

/* --------------------------------------------------------------------------
   2. ANCHO COMPLETO INTERNO: SECCIÓN LÍNEA HOTELERA (OPTIMIZADO)
   -------------------------------------------------------------------------- */

/* 1. Contenedor principal: Forzar altura y evitar recortes */
[data-block-id="fc5c69c"],
.stk-fc5c69c {
    width: 100vw !important;
    max-width: 100vw !important;
    position: relative !important;
    left: calc(-50vw + 50%) !important;
    
    /* 💡 Forzamos la altura del contenedor para que coincida con la imagen */
    height: 682px !important; 
    overflow: visible !important; 
}

/* 2. Limpieza de contenedores internos de Stackable */
.stk-fc5c69c .stk-container,
.stk-fc5c69c .stk-row {
    max-width: 100% !important;
    width: 100% !important;
    height: 100% !important;
}

/* 3. La Imagen: Técnica de Ajuste Total sin Recorte */
[data-block-id="fc5c69c"] img,
.stk-fc5c69c img {
    width: 100% !important;
    min-width: 100% !important;
    
    /* 💡 Cambiamos 'cover' por 'fill' o mantenemos 'cover' con anclaje estricto */
    height: 100% !important;
    object-fit: fill !important; /* 👈 Esto estirará la imagen para que encaje EXACTO en los 682px sin cortar nada */
    
    display: block !important;
}

/* 💡 OPCIONAL: Si 'fill' deforma mucho las sábanas, usa esta alternativa abajo:
   object-fit: cover !important;
   object-position: center bottom !important; 
*/

/* --------------------------------------------------------------------------
   3. SECCIÓN NEWSLETTER: GRADIENTE ELEGANTE DE PROTECCIÓN DE TEXTO
   -------------------------------------------------------------------------- */
.stk-513f88f {
    position: relative !important;
}

.stk-513f88f::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.3) 40%, rgba(0, 0, 0, 0) 100%) !important;
    z-index: 1 !important;
    pointer-events: none !important;
}

/* Asegurar que las letras queden por encima de la sombra */
.stk-513f88f-column {
    position: relative !important;
    z-index: 2 !important;
}

/* --------------------------------------------------------------------------
   4. ANCHO COMPLETO INTERNO: SECCIÓN SHOP TIENDA
   -------------------------------------------------------------------------- */
/* 1. Resetear fondos del header de Blocksy en la Tienda */
.archive.post-type-archive-product #header,
.archive.post-type-archive-product .ct-sticky-container,
.archive.post-type-archive-product [data-row="middle"] {
    background-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* 2. Posicionamiento absoluto para que la imagen suba */
.archive.post-type-archive-product #header {
    position: absolute !important;
    width: 100% !important;
    top: 0 !important;
    z-index: 99 !important;
}

/* 3. Ajuste del Hero Section para que ocupe todo el ancho y alto */
.archive.post-type-archive-product .hero-section {
    margin-top: 0 !important;
    padding-top: 120px !important; /* Espacio para que el menú no tape el logo */
    width: 100vw !important;
    left: calc(-50vw + 50%) !important;
    position: relative !important;
    min-height: 682px !important;
}
/* Forzar logo blanco en la página de Catálogo / Shop */
.archive.post-type-archive-product .site-branding img {
    /* Esta técnica invierte el color del logo verde para que se vea blanco 
       sin necesidad de cargar un archivo nuevo */
    filter: brightness(0) invert(1) !important;
}

/* Si prefieres que el logo mantenga un tono más natural o ya tienes 
   el CSS de transparencia aplicado, asegúrate de que el contenedor 
   no le aplique ninguna opacidad extra */
.archive.post-type-archive-product .custom-logo-link {
    opacity: 1 !important;
}