/* 1. VARIABLES Y FUENTES */
:root {
    --primary-purple: #9b82f3; /* Color aproximado del navbar original */
    --dark-purple: #7349f2;
    --text-dark: #0a152b;
    --blue-con: #1b2c44;
}

body {
    font-family: 'Barlow', sans-serif;
    color: var(--text-dark);
}

h1, h2, h3 {
    font-family: 'Hind', sans-serif;
    text-transform: uppercase; /* Opcional, según diseño original */
    font-weight: 700;
}

/* 2. NAVBAR PERSONALIZADO */
.custom-navbar {
    background-color: var(--blue-con) !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

/* Asegurar que los logos se vean bien alineados */
.logos-wrapper {
    display: flex;
    align-items: center;
    gap: 15px;
}
.comp-share-text{
    display: none;
}
/* Ajuste del menú móvil en Bulma para que coincida con el color */
@media screen and (max-width: 1023px) {
    .navbar-menu {
        background-color: var(--blue-con);
    }
    .navbar-item {
        color: white !important;
        padding: 0px!important;
    }
    .navbar-end .navbar-item{
        padding: 1rem!important;
    }
    .navbar-item .elceo{
        width: 100px!important;
    }
    main .container{
        padding: 2rem 1.5rem!important;
    }
    .comp-share-text{
        display: block!important;
    }

}

/* 3. HERO / PORTADA RESPONSIVA */
.hero-container {
    position: relative;
    overflow: hidden;
}

/* Contenedor de la imagen de fondo */
.hero-background-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

/* Estilo para la etiqueta IMG dentro de PICTURE */
.cover-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Clave: Hace que la imagen cubra todo sin deformarse */
    object-position: center top;
}

/* Overlay negro transparente para que el texto blanco resalte */
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(10, 21, 43, 0.4); /* Un tinte azul oscuro/negro */
    z-index: 1;
}

/* El cuerpo del texto debe estar por encima de la imagen */
.hero-body {
    position: relative;
    z-index: 2;
}

.main-title {
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
    margin-bottom: 1rem !important;
}

.subtitle {
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

/* 4. CONTENIDO */
.dropcap::first-letter {
    font-size: 3.5rem;
    font-weight: bold;
    float: left;
    line-height: 0.8;
    margin-right: 0.1em;
    color: var(--text-dark);
}

/* Fix para el sticky navbar de Bulma (Agrega padding al body automáticamente) */
body.has-navbar-fixed-top {
    padding-top: 3.25rem;
}  
/* ESTILOS PARALLAX FULL SCREEN */
.parallax-section {
    /* Ruta de tu imagen */
    background-image: url('./assets/imagen3_facutureras.webp');
    
    /* ALTO AL 100% DEL VIEWPORT */
    min-height: 100vh; 
    
    /* LA MAGIA DEL PARALLAX */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    
    /* Flexbox para centrar el contenido vertical y horizontalmente */
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* Sombra interior para que el texto blanco se lea mejor */
    box-shadow: inset 0 0 100px rgba(0,0,0,0.6);
}

/* CAJA DE TEXTO (QUOTE) */
.parallax-box {
    background-color: rgba(255, 255, 255, 0.95) !important;
    max-width: 700px;
    padding: 3rem !important; /* Más espacio interno */
    margin: 0 20px; /* Margen lateral para que no pegue en bordes de celular */
    border-left: 8px solid var(--dark-purple);
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

/* OPTIMIZACIÓN PARA MÓVILES */
@media only screen and (max-width: 1024px) {
    .parallax-section {
        /* En móviles desactivamos el efecto fixed para evitar saltos */
        background-attachment: scroll;
        
        /* Usamos svh para descontar la barra del navegador en móviles */
        min-height: 100svh; 
    }
}

/* Ajuste fino para lectura larga */
        .reportaje-body {
            font-size: 1.15rem;
            line-height: 1.8;
        }
        .author-section {
            border-top: 1px solid #eee;
            border-bottom: 1px solid #eee;
            padding: 1rem 0;
        }
        figcaption {
            font-style: italic;
            border-left: 3px solid #3273dc;
            padding-left: 1rem;
        }

.container {
    margin: unset!important;
}

.content figure {
    margin-left: 0px!important;;
    margin-right: 0px!important;;
}
/* Fuerza el centrado horizontal de la caja principal */
.container {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Opcional: Si quieres que el texto no se pegue a los bordes en tablets */
.reportaje-container {
    margin: 0 auto; 
}