@font-face {
    font-family: 'MiTipografia1';
    src: url(../font/Montreal-Bold.ttf);
}
@font-face {
    font-family: 'MiTipografia2';
    src: url(../Font/Montreal-Regular.ttf);
}
@font-face {
    font-family: 'MiTipografia3';
    src: url(../font/Syne-VariableFont_wght.ttf);
}

@font-face {
    font-family: 'MiTipografia4';
    src: url(../font/PPNeueMontreal-Bold.otf);
}
@font-face {
    font-family: 'MiTipografia5';
    src: url(../font/PPNeueMontreal-Book.otf);
}
@font-face {
    font-family: 'MiTipografia6';
    src: url(../font/PPNeueMontreal-Italic.otf);
}
@font-face {
    font-family: 'MiTipografia7';
    src: url(../font/PPNeueMontreal-Medium.otf);
}
@font-face {
    font-family: 'MiTipografia8';
    src: url(../font/PPNeueMontreal-SemiBolditalic.otf);
}
@font-face {
    font-family: 'MiTipografia9';
    src: url(../font/PPNeueMontreal-Thin.otf);
}
 @font-face {
    font-family: 'Manrope';
    src: url(../font/Manrope-VariableFont_wght.ttf);
}
@font-face {
    font-family: 'Oswald';
    src: url(../font/Oswald-VariableFont_wght.ttf);
}

.contenido-mentalidad {
    font-family: 'MiTipografia5';
    background-color: #000;
    color: white;
    padding-top: 200px;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
}

/*titulo con subrayado*/
.titulo-mentalidad {
    font-family: 'MiTipografia9';
    font-size: clamp(2.2rem, 6.5vw, 6.8rem);;
    width: 75%;
    margin: 0 auto;
    line-height: 1.5;
    opacity: 0; /* Empieza invisible */
    transform: translateY(50px); /* Empieza desplazado hacia abajo */
    transition: transform 0.5s, opacity 0.5s; /* Transiciones suaves */
    margin-bottom: 40px;
    text-align: center;
}

.titulo-mentalidad.visible {
    opacity: 1; /* Se hace visible */
    transform: translateY(0); /* Se desplaza hacia su posición original */
}

.subrayado {
    text-decoration: none; /* Eliminamos el subrayado normal */
    position: relative;
}

.subrayado::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 4px; /* Grosor del subrayado */
    background-color: white; /* Color del subrayado */
    bottom: 0; /* Posicionamiento */
    left: 0; /* Posicionamiento */
    transform: rotate(-2deg); /* Inclinación del subrayado */
}
/**/

/* texto, imagenes de contenido detallado */
.contenido-detallado {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 80%; /* Define el ancho del contenido-detallado */
    margin: 0 auto; /* Centra horizontalmente */
    padding: 0; /* Elimina cualquier padding interno adicional */
    overflow: hidden; /* Asegura que la imagen no se salga del contenedor */
    position: relative; /* Necesario para la posición absoluta de la imagen */
}

.texto-izquierda h3 {
    font-size: clamp(2.5rem, 6.9vw, 7.5rem);
    font-family: 'MiTipografia9';
    margin: 0; /* Elimina márgenes superiores e inferiores */
}

.texto-izquierda {
    font-family: 'MiTipografia9';
    text-align: left;
    flex: 1;
    padding: 0 10px; /* Ajusta el padding lateral */
    margin: 0; /* Elimina márgenes superiores e inferiores */
    z-index: 2; /* Asegura que la imagen esté detrás del texto */
}

.parrafo-derecha {
    font-family: 'MiTipografia9';
    text-align: justify;
    flex: 1;
    padding: 0 10px; /* Ajusta el padding lateral */
    margin: 0; /* Elimina márgenes superiores e inferiores */
    font-size: 1.75rem;
    z-index: 2; /* Asegura que la imagen esté detrás del texto */
}

.imagen-centro {
    flex: 1;
    text-align: left;
    padding: 0; /* Elimina padding interno adicional */
    position: relative; /* Necesario para el posicionamiento absoluto de la imagen */
}

.imagen-centro img {
    max-width: 70%;
    height: auto;
    margin: 0; /* Elimina márgenes superiores e inferiores */
    position: absolute; /* Permite mover la imagen */
    top: 50%;
    border-radius: 10px;
    left: 50%;
     transform: translate(-50%, -50%) scale(1); /* Agrega zoom inicial */
    transition: transform 0.1s ease-out; /* Transición suave para el movimiento */
    z-index: 1; /* Asegura que la imagen esté detrás del texto */
}
/**/

/*hr*/
.styled-hr {
    width: 0;
    height: 4px; /* Grosor del hr */
    background-color: white; /* Color del hr */
    border: none; /* Sin borde */
    margin: 0 auto;
    opacity: 0;
    transform-origin: left center;
    transition: width 1s ease-out, opacity 1s ease-out;
}

.styled-hr.visible {
    width: 80%; /* Mismo ancho que .contenido-detallado */
    opacity: 1;
}





/******************************************MEDIA QUERIE PARA 480px*******************************/
@media (max-width: 480px) {
    .contenido-detallado {
        flex-direction: row; /* Cambia a dirección de fila para colocar los elementos uno al lado del otro */
        width: 80%;
        align-items: center;
    }

    .texto-izquierda,
    .imagen-centro,
    .parrafo-derecha {
        padding: 10px;
        font-size: 16px !important;
        text-align: left;
    }

    .texto-izquierda {
        width: 50%; /* Ajusta el ancho para que ocupe la mitad del contenedor */
        order: 1;
    }

    .texto-izquierda h3{
        font-size: 25px;
    }

    .imagen-centro {
        width: 30%; /* Ajusta el ancho para que ocupe la otra mitad del contenedor */
        order: 2;
    }

    .parrafo-derecha {
        order: 3;
    }

    .styled-hr {
        width: 100%;
    }
}