/* hero-revista.css - Arquitectura Mixta */



:root {

    --hero-bg-fallback: #000000;

    --hero-gold-primary: #d4af37; 

    --hero-text-light: #ffffff;

    --hero-font-serif: 'Comprehension', 'Times New Roman', Times, serif; 

    --hero-font-sans: 'DM Sans', sans-serif; 

}



/* --- Contenedor Principal (Desktop) --- */

.hero-revista-block {

    background-color: var(--hero-bg-fallback);

    color: var(--hero-text-light);

    overflow: hidden;

    position: relative;

    width: 100%;

    min-height: 85vh; /* Aumentado ligeramente para mayor longitud vertical */

    display: flex;

    align-items: center; 

    margin-top: 0 !important;

    background-size: cover; 

    background-position: right center; 

    background-repeat: no-repeat;

}



.hero-revista-block.alignfull {

    width: 100vw;

    position: relative;

    left: 50%;

    right: 50%;

    margin-left: -50vw;

    margin-right: -50vw;

    margin-top: 0 !important; 

}



/* Degradado Negro */

.hero-revista__overlay {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: linear-gradient(90deg, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.7) 45%, rgba(0,0,0,0) 100%);

    z-index: 1;

}



.hero-revista__container {

    max-width: 1200px;

    margin: 0 auto;

    width: 100%;

    position: relative;

    z-index: 2;

    padding: 4rem 2rem 6rem 2rem;

}



.hero-revista__content {

    max-width: 800px; /* Aumentado para mayor longitud horizontal en desktop */

    width: 100%;

    text-align: left;

}



/* Imagen Móvil (Oculta en Desktop) */

.hero-revista__mobile-image {

    display: none;

}



/* Tipografía */

.hero-revista__subtitle {

    font-family: var(--hero-font-sans);

    font-weight: 500;

    font-size: 23px;

    line-height: 1; 

    letter-spacing: 0;

    text-transform: uppercase;

    color: #C39D5C;

    display: block;

    margin-bottom: 1.2rem;

    vertical-align: middle;

    border-bottom: 1px solid rgba(195, 157, 92, 0.4); /* Línea dorada inferior */

    padding-bottom: 0.8rem;

    width: fit-content;

}



.hero-revista__title {

    font-family: var(--hero-font-serif);

    font-weight: 700;

    font-size: 40px; 

    line-height: 1.15; 

    text-transform: uppercase;

    color: #ffffff;

    margin-bottom: 1.5rem;

}



.hero-revista__title span,

.hero-revista__title .highlight {

    color: var(--hero-gold-primary);

}



.hero-revista__description {

    font-family: var(--hero-font-sans);

    font-weight: 400;

    font-size: 23px; 

    line-height: 1.5; 

    color: #e0e0e0;

    margin-bottom: 2.5rem;

}



/* --- Botón con luz recorriendo el borde y tu diseño original --- */
.hero-revista__btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 244px;
    height: 48px; 
    border-radius: 6px;
    
    /* Mantenemos tu borde y tu sombra original de la imagen */
    border: 1px solid #F4C26E;
    box-shadow: 0px 0px 17px 0px rgba(244, 194, 110, 0.8); 
    
    background: transparent;
    color: #ffffff;
    text-transform: uppercase;
    text-decoration: none;
    font-family: var(--hero-font-sans);
    font-weight: 700;
    font-size: 14px;
    
    /* Configuración necesaria para la luz animada en el borde */
    position: relative;
    z-index: 1;
    overflow: hidden;
    transition: all 0.3s ease;
}

/* --- La luz en movimiento constante alrededor del borde --- */
.hero-revista__btn::before {
    content: '';
    position: absolute;
    /* Se posiciona cubriendo exactamente el borde */
    inset: -2px;
    border-radius: inherit;
    
    /* Un haz de luz brillante que recorre el contorno */
    background: conic-gradient(
        from 0deg at 50% 50%, 
        transparent 0deg, 
        transparent 300deg, 
        rgba(255, 255, 255, 0.9) 330deg, 
        #F4C26E 360deg
    );
    
    /* Animación continua de rotación */
    animation: rotarLuzBorde 4s linear infinite;
    
    z-index: -1; /* Detrás del texto del botón */
}

/* --- Capa interna para asegurar que el centro del botón no se opaque --- */
.hero-revista__btn::after {
    content: '';
    position: absolute;
    inset: 1px; /* Respeta el grosor del borde de 1px */
    border-radius: 5px;
    background: #000000; /* Fondo negro de tu botón para el contraste */
    z-index: -1;
}

/* --- Definición de la animación del giro --- */
@keyframes rotarLuzBorde {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* --- Tu estado Hover original intacto --- */
.hero-revista__btn:hover {
    background: rgba(244, 194, 110, 0.1);
    box-shadow: 0px 0px 25px 0px rgba(244, 194, 110, 1);
    color: #F4C26E;
    transform: translateY(-2px);
}

/* Opcional: Si quieres que la luz corra más rápido al hacer hover */
.hero-revista__btn:hover::before {
    animation-duration: 1.5s;
}



/* --- Responsive para Móviles --- */

@media (max-width: 992px) {

    .hero-revista-block {

        /* Desactivamos la imagen de fondo en móvil para que no choque con la imagen inline */

        background-image: none !important; 

        min-height: auto;

    }

    

    .hero-revista__overlay {

        display: none; /* Quitamos el degradado porque ya no hay imagen de fondo */

    }

    

    .hero-revista__container {

        padding: 1rem 1.5rem 1rem 0.5rem;

    }

    

    .hero-revista__content {

        max-width: 100%;

        text-align: center;

    }



    /* Mostramos la imagen en el centro exacto */

    .hero-revista__mobile-image {

        display: block;

        width: 100%;

        max-width: 500px;

        margin: -3.0rem auto auto auto;

    }



    .hero-revista__mobile-image img {

        width: 100%;

        height: auto;

        object-fit: contain;

        filter: drop-shadow(0px 15px 25px rgba(0,0,0,0.6));

    }

    

    /* Ajustes precisos de tipografía para móvil */

    .hero-revista__subtitle {

        margin: 0 auto 1.5rem auto; /* Centra el subtítulo y la línea dorada */

        font-size: 18px;

    }

    

    .hero-revista__title {

        font-size: 20px;

        line-height: 1.2;
        position:relative;
z-index:2;
        
        margin-bottom: 0; /* Quitamos el margen inferior porque ahora le sigue la imagen */

    }

    

    .hero-revista__description {

        font-size: 17px;

        margin-bottom: 2rem;

    }

    

    .hero-revista__btn {

        margin: 0 auto;

    }

}