/* C:\xampp\htdocs\ulsaoaxacaweb\assestsIndexPosgrado\fuente\fuentes.css */
/* Importación de fuentes */
@import "/assestsIndexPosgrado/fuente/fuentes.css";

html,
body {
    padding: 0px;
    margin: 0px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    padding-right: 0px !important;
}

.escritorio {
    display: block;
    padding: 0px;
}

.escritorio img {
    width: 100%;
}

.movil {
    display: none;
}

/* Maestria */
.descripcion {
    margin-block: 2%;
}
.img-descripcion {
    width: 100%;
}

.div-text-descripcion h2 {
    font-family: "INDIVISA DISPLAY HEAVY";
    color: #C30212;
}

.div-text-descripcion p {
    font-family: "INDIVISA TEXT SANS REGULAR";
    font-size: 1.7rem;
}


/* Objetivos */
.objetivo {
    margin-block: 2%;
}

.img-objetivo {
    width: 100%;
}

.div-text-objetivo h2 {
    font-family: "INDIVISA DISPLAY HEAVY";
    color: #C30212;
}

.div-text-objetivo p {
    font-family: "INDIVISA TEXT SANS REGULAR";
    font-size: 1.7rem;
}

/* ==========================================================================
   PERFIL DE INGRESO: ESTILOS BASE (Móviles y Tabletas por igual)
   ========================================================================== */
.escritorio-perfil {
    display: none;
    /* Por defecto oculto para móviles y tablets */
    padding: 0;
}


.movil-perfil {
    display: flex;
    flex-direction: column;
    padding: 0px;
    width: 100%;
}

.container-perfil-movil {
    position: relative;
    width: 100%;
    background-image: url('../img/p-egreso-100.jpg');
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 50px 20px;
    /* Aire arriba y abajo para que respire el diseño */
    box-sizing: border-box;
}

.container-perfil-movil img {
    display: none;
}

.text-ingreso {
    position: relative;
    width: 85%;
    max-width: 690px;
    height: 100%;

    /* Evita que se estire demasiado en pantallas horizontales */
    box-sizing: border-box;
    left: auto;
    right: auto;
    top: auto;
    transform: none;
    margin: 0 auto;
}

.text-ingreso-extra {
    position: relative;
    width: 100%;
    max-width: 50%;
    /* Evita que se estire demasiado en pantallas horizontales */
    box-sizing: border-box;
    left: auto;
    right: auto;
    top: auto;
    transform: none;
    margin: 0 auto;
}

.text-ingreso-extra h3 {
    color: #FFFFFF;
    font-size: 2rem;
    font-family: "INDIVISA TEXT SANS BLACKITALIC";
    margin-bottom: 0px;
}

.text-ingreso-extra h2 {
    color: #C30212;
    font-size: 3rem;
    font-family: "INDIVISA TEXT SANS BLACKITALIC";
    margin-bottom: 10px;
}

.text-ingreso-extra p,
.text-ingreso-extra ul {
    color: #FFFFFF;
    font-size: 1.3rem;
    line-height: 1;
    font-family: "INDIVISA TEXT SANS REGULAR";
}

.text-ingreso-extra ul {
    padding-left: 20px;
    list-style-position: inside !important;
}

.text-ingreso-extra li {
    list-style-type: disc !important;
}

.text-ingreso h3 {
    color: #FFFFFF;
    font-size: 2.5rem;
    font-family: "INDIVISA TEXT SANS BLACKITALIC";
    margin-bottom: 0px;
    /* line-height: 1.1; */
}

.text-ingreso h2 {
    color: #C30212;
    font-size: 3.5rem;
    font-family: "INDIVISA TEXT SANS BLACKITALIC";
    margin-bottom: 10px;
}

.text-ingreso p,
.text-ingreso ul {
    color: #FFFFFF;
    font-size: 1.4rem;
    line-height: 1.3;
    font-family: "INDIVISA TEXT SANS REGULAR";
}

.text-ingreso ul {
    padding-left: 20px;
    list-style-position: inside !important;
}

.text-ingreso li {
    list-style-type: disc !important;
}

/* perfil egresado */
.perfil-egreso {
    margin-block: 2%;
}

.img-egreso {
    width: 55%;
}

.div-title-egreso h3 {
    color: #212121;
    font-family: "INDIVISA TEXT SANS BLACKITALIC";
    font-size: 2.5rem;
}

.div-title-egreso h2 {
    color: #C30212;
    font-family: "INDIVISA DISPLAY HEAVY";
    font-size: 3.5rem;
    line-height: 1.1;
}

.title-egresados {
    font-family: "INDIVISA DISPLAY HEAVY";
    /* margin-left: 4%; */
    color: #C30212;
    font-size: 2.5rem;
}

.list-egreso {
    font-family: "INDIVISA TEXT SANS REGULAR";
    font-size: 1.6rem;
    list-style-position: inside !important;
}

.list-egreso li {
    list-style-type: disc !important;
}

/* Asignaturas */
.asignaturas {
    background-color: #212121;
}

.div-flecha-asignaturas {
    display: flex;
    justify-content: center;
}

.div-flecha-asignaturas img {
    margin-top: -40px;
}

.div-title-asignaturas {
    color: #FFFFFF !important;
    text-align: center;
    margin-bottom: 2%;
}

.div-title-asignaturas h2 {
    font-family: "INDIVISA DISPLAY HEAVY";
    font-size: 3rem;
    margin-top: 20px;
    margin-bottom: 2px;
    color: #FFFFFF !important;
}

.div-title-asignaturas h3 {
    font-family: "INDIVISA TEXT BOLD ITALIC";
    font-size: 3rem;
    margin-top: 0px;
    margin-bottom: 0px;
    color: #FFFFFF !important;
}

/* Espaciado para que las tarjetas no se peguen al romperse en filas */
.margin-card {
    margin-bottom: 30px;
}

/* Cuerpo principal de la tarjeta artificial */
.custom-card {
    background-color: #26272b;
    /* Gris oscuro del interior */
    border-radius: 15px;
    /* Bordes redondeados */
    overflow: hidden;
    /* Evita que el contenido interno se salga de las esquinas */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    /* Sombra sutil para dar volumen */
    /* height: 100%; */
    min-height: 280px;
    /* Recomendado si usas flexbox para igualar alturas */
}

/* Línea decorativa roja en la parte superior */
.card-line-top {
    height: 4px;

    width: 100%;
    background: #FF0000;
    /* Fallback para navegadores antiguos */
    background: linear-gradient(to right, #FF0000, #8D0F0E);
}

/* Espaciado interno del texto */
.card-content {
    padding: 30px 20px;
    text-align: center;
    /* Centra títulos y listas como en tu imagen */
}

/* Título del Cuatrimestre */
.card-title {
    color: #C30212;
    /* Color rojo para destacar */
    font-family: "INDIVISA DISPLAY HEAVY";
    font-size: 1.8rem;
    letter-spacing: 1px;
    margin-top: 0;
    margin-bottom: 20px;
}

/* Lista de asignaturas */
.card-list {
    list-style: none;
    /* Quitamos las viñetas por defecto */
    padding: 0;
    margin: 0;
}

.card-list li {
    color: #FFFFFF;
    font-family: "INDIVISA TEXT SANS REGULAR";
    font-size: 1.5rem;
    line-height: 1.5;
    margin-bottom: 12px;
}

/* Añade un guion o punto medio antes de cada materia simulando tu diseño */
.card-list li::before {
    content: "• ";
    color: #FFFFFF;
    margin-right: 5px;
}

.card-list li:last-child {
    margin-bottom: 0;
    /* Limpia el margen del último elemento */
}

.div-rvoe {
    display: flex;
    justify-content: space-between;
    color: #FFFFFF;
    font-family: "INDIVISA TEXT SANS REGULAR";
    padding-bottom: 2%;
}

.div-rvoe p {

    color: #FFFFFF;
    font-size: 1.4rem;
    font-family: "INDIVISA TEXT SANS REGULAR";

}

.proceso {
    background-color: #212121;
}

.procesoFondo {
    /* C:\xampp\htdocs\ulsaoaxacaweb\posgrado\maestrias\assets\img\Proceso_admin.png */
    background-image: url("../img/Proceso_admin.png");
    background-color: #212121;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    min-height: 550px;
    max-height: 550px;
}

.contenedorProceso {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    /* IMPORTANTE */
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
}

.beneficios {
    position: absolute;
    bottom: -250px;
    right: -25px;
    /* más alineado a la card */
    background: #e30613;
    color: #fff;
    padding: 12px 20px;
    border-radius: 8px;
    font-size: 14px;
    /* height: 40px; */
    max-width: 620px;
}

.movil-proceso {
    display: none;
}

.div-img-admision {
    position: absolute;
    bottom: -500px;
    right: 80px;
}

.tBeneficios {
    font-size: 28px;
    font-family: "INDIVISA TEXT SANS BLACKITALIC";
    color: #fff;
    text-align: right;
    line-height: 1.2;
    /* margin: 0px; */
}

.txtBeneficios {
    font-size: 18px;
    font-family: "INDIVISA TEXT SANS REGULAR";
    color: #fff;
    /* margin: 5px; */
}
.txtProceso {
    font-size: 23px;
    font-family: "INDIViSA TEXT SANS REGULAR"
}

.txtProceso strong {
    font-family: "INDIVISA TEXT SANS";
    color: #c30212
}


/* ==========================================================================
   MEDIA QUERY: AJUSTE EXCLUSIVO PARA SMARTPHONES (Pantallas muy chicas)
   ========================================================================== */
@media screen and (max-width: 600px) {
    .escritorio {
        display: none;
    }

    .movil {
        display: flex;
        flex-direction: column;
        padding: 0px;
        width: 100%;
    }

    .movil img {
        height: auto;
        width: 100%;
    }

    /* descripcion */

    .img-descripcion {
        display: none;
    }

    .div-text-descripcion h2 {
        text-align: center;
        font-size: 2rem;
    }

    .div-text-descripcion p {
        padding-inline: 5%;
    }

    /* objetivo */

    .img-objetivo {
        display: none;
    }

    .div-text-objetivo h2 {
        text-align: center;
        font-size: 2rem;
    }

    .div-text-objetivo p {
        padding-inline: 5%;
    }

    /* Fuentes un poco más compactas solo en teléfonos pequeños */
    .text-ingreso h3 {
        font-size: 2.5rem;
        text-align: center;
    }

    .text-ingreso h2 {
        font-size: 3rem;
        text-align: center
    }

    .text-ingreso p,
    .text-ingreso ul {
        font-size: 1.5rem;
    }

    /* perfil egreso */

    .div-img-egreso {
        text-align: center;
    }

    .perfil-egreso {
        margin-block: 10%;
    }

    .img-egreso{
        display: none;
    }

    .div-title-egreso h3 {
        color: #212121;
        font-family: "INDIVISA TEXT SANS BLACKITALIC";
        font-size: 2.5rem;
    }

    .div-title-egreso h2 {
        color: #C30212;
        font-family: "INDIVISA DISPLAY HEAVY";
        font-size: 3.5rem;
        line-height: 1.1;
    }

    .div-text-egreso {
        padding-inline: 10%;
    }

    .procesoFondo {
        display: none;
    }

    .movil-proceso {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .imgPro{
        height: 7vh;
    }

    .beneficio-movil {
        background: #e30613;
        color: #fff;
        padding: 12px 20px;
        border-radius: 8px;
        font-size: 14px;
        max-width: 620px;
        margin: 4%;
    }

    .movil-admision {
        background-color: #fff;
        border-radius: 4px;
        padding: 4%;
        margin: 4%;
    }
}

@media (min-width: 760px) and (max-width: 920px) {

    .div-img-descripcion{
        text-align: center;
    }
    
    .img-descripcion{
        width: 50%;
    }

    .div-img-objetivo{
        text-align: center;
    }
    
    .img-objetivo{
        width: 50%;
    }

    /* perfil egreso */

    .div-img-egreso{
        text-align: center;
    }

    .img-egreso {
        width: 40%;
    }

    .procesoFondo {
        display: none;
    }

    .movil-proceso {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .beneficio-movil {
        background: #e30613;
        color: #fff;
        /* padding: 12px 20px; */
        padding: 2%;
        border-radius: 8px;
        font-size: 14px;
        max-width: 620px;
        margin: 4%;
    }

    .movil-admision {
        background-color: #fff;
        border-radius: 4px;
        padding: 4%;
        margin: 4%;
    }
}

@media (min-width: 1000px) and (max-width: 1120px) {
    .div-img-descripcion{
        text-align: center;
    }
    
    .img-descripcion{
        width: 50%;
    }

    .div-img-objetivo{
        text-align: center;
    }
    
    .img-objetivo{
        width: 50%;
    }

     /* perfil egreso */

    .div-img-egreso{
        text-align: center;
    }

    .img-egreso {
        width: 40%;
    }

     .procesoFondo {
        display: none;
    }

    .movil-proceso {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .beneficio-movil {
        background: #e30613;
        color: #fff;
        padding: 12px 20px;
        border-radius: 8px;
        font-size: 14px;
        max-width: 620px;
        margin: 4%;
    }

    .movil-admision {
        background-color: #fff;
        border-radius: 4px;
        padding: 5%;
        margin: 4%;
    }
}

/* ==========================================================================
   MEDIA QUERY: ESCRITORIO REAL (Laptops y Monitores Grandes - Desde 1025px)
   ========================================================================== */
@media screen and (min-width: 1025px) {

    /* Descripcion */
    .descripcion .row {
        display: table;
        width: 100%;
        table-layout: fixed;
        /* Evita que las columnas se deformen */
    }

    .descripcion .div-img-descripcion,
    .descripcion .div-text-descripcion {
        display: table-cell;
        float: none;
        /* Obligatorio quitar el float de Bootstrap 3 */
        vertical-align: middle;
        /* ¡Aquí ocurre la magia del centrado vertical! */
    }

    /* objetivo */
    .objetivo .row {
        display: table;
        width: 100%;
        table-layout: fixed;
        /* Evita que las columnas se deformen */
    }

    .objetivo .div-img-objetivo,
    .objetivo .div-text-objetivo {
        display: table-cell;
        float: none;
        /* Obligatorio quitar el float de Bootstrap 3 */
        vertical-align: middle;
        /* ¡Aquí ocurre la magia del centrado vertical! */
    }

    /* Desactivamos la versión móvil/tablet y activamos la de escritorio */
    .movil-perfil {
        display: none;
    }

    .escritorio-perfil {
        display: block;
        width: 100%;
    }

    .container-perfil {
        position: relative;
        width: 100%;
        display: block;
        line-height: 0;
    }

    .container-perfil .img-perfil-ingreso {
        display: block;
        width: 100%;
        height: auto;
    }

    /* El texto flotará matemáticamente a la derecha solo si hay espacio real */
    .text-ingreso {
        position: absolute;
        left: 51%;
        top: 60%;
        transform: translateY(-50%);
        width: 42%;
        max-width: 607px;
        margin: 0;
    }
    .text-ingreso-extra {
        position: absolute;
        left: 49%;
        top: 50%;
        transform: translateY(-50%);
        width: 100%;
        max-width: 50%;
        margin: 0;
    }


    /* perfil egreso */
    .div-img-egreso {
        text-align: end;
    }

    .perfil-egreso .row {
        display: table;
        width: 100%;
        table-layout: fixed;
    }

    /* Forzamos a la columna de la imagen y a la del texto a actuar como celdas */
    .perfil-egreso .div-img-egreso,
    .perfil-egreso .div-text-egreso {
        display: table-cell;
        float: none;
        /* Removemos el float nativo de Bootstrap 3 */
        vertical-align: middle;
        /* Centrado vertical perfecto */
    }

    .div-title-egreso h3 {
        color: #212121;
        font-family: "INDIVISA TEXT SANS BLACKITALIC";
        font-size: 2.5rem;
    }

    .div-title-egreso h2 {
        color: #C30212;
        font-family: "INDIVISA DISPLAY HEAVY";
        font-size: 3.5rem;
        line-height: 1.1;
    }
}