/* ================================================
   ARCHIVO: assets/css/components/about-overlay.css
   Estilos para el overlay de About - SIN BACKGROUNDS - POINTER EVENTS RESPONSIVE
================================================ */

.about-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 9999;
    opacity: 1;
    visibility: visible;
    overflow-x: hidden;
}

.about-overlay.hidden {
    opacity: 0;
    visibility: hidden;
}

.overlay-content {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 9999;
}
.about-page-overlay .bloque-primario > p:first-child,
.about-page-overlay .bloque-secundario > p:first-child  {
    margin-block-end: 0 !important;
    margin-top: 0 !important;
}

.about-page-overlay .bloque-primario > p:last-child,
.about-page-overlay .bloque-secundario > p:last-child  {
    margin-block-end: 0 !important;
    margin-bottom: 0 !important;
}

/* Solo en desktop quitar pointer-events */
@media (min-width: 769px) {
    .about-overlay {
        pointer-events: none !important;
    }
    body.page-template-carousel-template .about-overlay .grid-about {
        background-color: transparent !important;
    }
    .about-overlay .overlay-content {
        pointer-events: none !important;
    }

}

/* En móvil mantener pointer-events normales */
@media (max-width: 768px) {
    .about-overlay {
        pointer-events: auto !important;
    }

    .about-overlay .overlay-content {
        pointer-events: auto !important;
    }
}

/* Estilos para el contenido de About dentro del overlay */
.about-overlay .template-fullwidth {
    height: 100vh;
    overflow-y: auto;
}

/* El header del sitio principal mantiene su z-index original */
header,
.site-header,
.main-navigation {
    z-index: 10000 !important;
}

/* DESKTOP - Asegurar que el grid funcione dentro del overlay */
.about-overlay .grid-about {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--grid-gap);
    width: 100%;
    position: absolute;
    top: 10px;
    left: 0;
    right: 0;
    z-index: 9999;
    background-color:white;
}

.about-overlay .bloque-primario {
    font-size: var(--font-size-base);
    grid-column: 7 / 11;
    grid-row: 1;
}

.about-overlay .bloque-secundario {
    font-size: var(--font-size-base);
    grid-column: 11 / 13;
    grid-row: 1;
}

/* Prevenir scroll del body cuando About está abierto */
body.about-open {
    overflow: hidden;
}

/* Botón Close para móvil */
.close-about-mobile {
    display: none;
    background: none;
    border: none;
    font-size: var(--font-size-base);
    color: var(--color-text-dark);
    cursor: pointer;
    z-index: 10001;
}

/* MÓVIL - Todo el sistema overlay en móvil */
@media (max-width: 768px) {
    /* Mostrar botón close */
    .close-about-mobile {
        display: block;
        position: absolute;
        bottom: 0;
        right: 0;
        margin: 0;
        padding: 0;
        color: #a3a3a3;
    }
    
    /* Overlay en móvil - comportamiento de página completa */
    .about-overlay {
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        width: 100%;
        max-width: 100%;
    }
    
    .about-overlay .overlay-content {
        height: auto;
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
        box-sizing: border-box;
        background-color:white;
    }
    
    .about-overlay .template-fullwidth {
        height: auto;
        overflow-y: visible;
        overflow-x: hidden;
        padding: 10px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        width: 100%;
        max-width: 100%;
    }
    
    /* Header dentro del overlay - parte superior */
    .about-overlay .site-header {
        position: relative !important;
        display: block !important;
        width: calc(100% - 0px) !important; /* Ajustar al contenedor con padding */
        max-width: 100% !important;
        padding: 0 !important;
        margin-bottom: 20px;
        background: none !important;
        flex-shrink: 0;
        overflow-x: hidden;
        box-sizing: border-box;
        background-color:white;
    }
    
    .about-overlay .grid-container {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow-x: hidden;
        box-sizing: border-box;
    }
    
    .about-overlay .site-branding {
        grid-column: unset;
        margin-bottom: 10px;
        text-align: left;
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
        box-sizing: border-box;
    }
    
    .about-overlay .main-navigation {
        grid-column: unset;
        grid-row: unset;
        width: 100%;
        max-width: 100%;
        margin-bottom: 30px; /* Más espacio después de navegación */
        overflow-x: hidden;
        box-sizing: border-box;
    }
    
    .about-overlay .main-navigation ul {
        display: flex !important;
        flex-wrap: wrap;
        width: 100%;
        max-width: 100%;
        margin: 0 !important;
        padding: 0 !important;
        overflow-x: hidden;
        box-sizing: border-box;
    }
    
    .about-overlay .menu-toggle {
        display: none !important;
    }
    
    /* Main content area - flex grow */
    .about-overlay .dos-bloques-full {
        flex: 1;
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
        box-sizing: border-box;
        margin-top: 90px; /* Espacio antes del contenido */
    }
    
    /* Contenido del about - flujo natural */
    .about-overlay .grid-about {
        position: relative !important;
        display: block !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        grid-template-columns: none !important;
        gap: 0 !important;
        overflow-x: hidden;
        box-sizing: border-box;
    }
    
    .about-overlay .entry-content {
        display: block !important;
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
        box-sizing: border-box;
    }
    
    /* Bloques apilados y más juntos */
    .about-overlay .bloque-primario {
        grid-column: unset !important;
        grid-row: unset !important;
        width: 100%;
        max-width: 100%;
        margin-bottom: 10px;
        display: block;
        font-size: var(--font-size-base);
        line-height: var(--line-height-base);
        overflow-x: hidden;
        box-sizing: border-box;
        word-wrap: break-word;
        overflow-wrap: break-word;
        word-break: break-all; /* Rompe palabras agresivamente */
        hyphens: auto;
    }
    
    .about-overlay .bloque-secundario {
        grid-column: unset !important;
        grid-row: unset !important;
        width: 100%;
        max-width: 100%;
        margin-bottom: 0; /* Sin margen inferior */
        display: block;
        font-size: var(--font-size-base);
        line-height: var(--line-height-base);
        overflow-x: hidden;
        box-sizing: border-box;
        word-wrap: break-word;
        overflow-wrap: break-word;
        word-break: break-all;
        hyphens: auto;
        position: relative; /* Para posicionar el botón close */
    }
    
    /* Botón close alineado con última línea del segundo bloque */
    .close-about-mobile {
        display: block;
        position: absolute;
        bottom: 0;
        right: 0;
        margin: 0;
        padding: 0;
    }
    
    /* Resetear cualquier estilo de párrafo que pueda interferir */
    .about-overlay .bloque-primario p,
    .about-overlay .bloque-secundario p {
        margin-block-start: 0em;
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
        box-sizing: border-box;
        word-wrap: break-word;
        overflow-wrap: break-word;
        word-break: break-all; /* Rompe palabras agresivamente */
        hyphens: auto;
    }
        

    /* Control específico para texto y enlaces largos */
    .about-overlay p,
    .about-overlay span,
    .about-overlay a,
    .about-overlay div {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        word-break: break-word !important; /* Más suave que break-all */
        max-width: 100% !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }
    
    /* Asegurar que elementos largos se rompan */
    .about-overlay * {
        max-width: 100% !important;
        box-sizing: border-box !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }

    .about-page-overlay .bloque-primario > p:first-child,
    .about-page-overlay .bloque-secundario > p:first-child {
        margin-block-end: 0 !important;
        margin-top: 0 !important;
    }

    .about-page-overlay .bloque-primario > p:last-child,
    .about-page-overlay .bloque-secundario > p:last-child  {
        margin-block-end: 0 !important;
        margin-bottom: 0 !important;
    }
}