/*==================================================
                    PÁGINAS INTERNAS
==================================================*/


/*==================================================
                    CONTENEDOR
==================================================*/

.pagina{

    padding:120px 20px 80px;

    background:#ffffff;

}


.pagina-contenedor{

    max-width:1200px;

    margin:0 auto;

}


/*==================================================
                    ENCABEZADO
==================================================*/

.pagina-encabezado{

    text-align:center;

    margin-bottom:50px;

}


.pagina-encabezado h1{

    color:var(--color-primario);

    font-size:2.2rem;

    margin-bottom:15px;

}


.pagina-encabezado p{

    color:#555;

    font-size:1.05rem;

    line-height:1.6;

}


/*==================================================
                    CONTENIDO
==================================================*/

.pagina-contenido{

    color:#444;

    font-size:1rem;

    line-height:1.7;

}


.pagina-contenido h2{

    color:var(--color-primario);

    font-size:1.6rem;

    margin-top:40px;

    margin-bottom:15px;

}


.pagina-contenido h3{

    color:var(--color-primario);

    font-size:1.3rem;

    margin-top:30px;

    margin-bottom:10px;

}


.pagina-contenido p{

    margin-bottom:20px;

}


/*==================================================
                    TARJETAS
==================================================*/

.pagina-tarjetas{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:30px;

    margin-top:40px;

}


.pagina-tarjeta{

    background:#ffffff;

    padding:30px;

    border-radius:15px;

    box-shadow:var(--sombra-card);

    transition:var(--transicion);

}


.pagina-tarjeta:hover{

    transform:translateY(-6px);

    box-shadow:var(--sombra-hover);

}


.pagina-tarjeta h3{

    color:var(--color-primario);

    margin-bottom:15px;

}


.pagina-tarjeta p{

    color:#555;

    line-height:1.6;

}


/*==================================================
                    RESPONSIVE
==================================================*/

@media (max-width:768px){

    .pagina{

        padding:100px 15px 60px;

    }


    .pagina-encabezado{

        margin-bottom:35px;

    }


    .pagina-encabezado h1{

        font-size:1.8rem;

    }


    .pagina-encabezado p{

        font-size:1rem;

    }


    .pagina-tarjetas{

        grid-template-columns:1fr;

        gap:20px;

    }


    .pagina-tarjeta{

        padding:25px;

    }

}

/*==================================================
              TARJETA DE PÁGINA
==================================================*/

.pagina-card{

    background:#ffffff;

    max-width:950px;

    margin:0 auto;

    padding:45px;

    border-radius:20px;

    box-shadow:var(--sombra-card);

    text-align:center;

    transition:var(--transicion);

}

.pagina-card:hover{

    box-shadow:var(--sombra-hover);

    transform:translateY(-4px);

}


/*==================================================
                    IMAGEN
==================================================*/

.pagina-card img{

    display:block;

    max-width:320px;

    width:100%;

    height:auto;

    margin:0 auto 30px;

}


/*==================================================
                    TÍTULO
==================================================*/

.pagina-card h1{

    color:var(--color-primario);

    font-size:2.2rem;

    font-weight:500;

    margin-bottom:25px;

}


/*==================================================
                    TEXTO
==================================================*/

.pagina-card p{

    color:#333;

    font-size:1rem;

    line-height:1.8;

    margin:0 auto;

    max-width:850px;

}


/*==================================================
                  RESPONSIVE
==================================================*/

@media (max-width:768px){

    .pagina-card{

        padding:30px 20px;

        border-radius:15px;

    }

    .pagina-card img{

        max-width:260px;

        margin-bottom:25px;

    }

    .pagina-card h1{

        font-size:1.8rem;

    }

    .pagina-card p{

        font-size:.95rem;

        line-height:1.7;

        text-align:left;

    }

}

/*==================================================
                    REGISTRO
==================================================*/

.registro-introduccion{

    background:#ffffff;

    max-width:1000px;

    margin:0 auto 50px;

    padding:60px;

    border-radius:20px;

    box-shadow:var(--sombra-card);

    text-align:center;

}

.registro-introduccion h1{

    color:var(--color-primario);

    font-size:2.2rem;

    margin-bottom:25px;

}

.registro-introduccion p{

    color:#555;

    line-height:1.7;

    margin-bottom:10px;

}


/*==================================================
                SECCIONES
==================================================*/

.registro-seccion{

    max-width:1000px;

    margin:0 auto 40px;

}

.registro-seccion > h2{

    color:var(--color-primario);

    font-size:1.8rem;

    margin-bottom:25px;

}


/*==================================================
                BLOQUES
==================================================*/

.registro-bloques{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:25px;

}

.registro-bloque{

    background:#ffffff;

    padding:30px;

    border-radius:15px;

    box-shadow:var(--sombra-card);

    transition:var(--transicion);

}

.registro-bloque:hover{

    transform:translateY(-5px);

    box-shadow:var(--sombra-hover);

}

.registro-bloque h2{

    color:var(--color-primario);

    font-size:1.8rem;

    margin-bottom:20px;

}

.registro-bloque h3{

    color:var(--color-primario);

    font-size:1.25rem;

    margin-bottom:15px;

}

.registro-bloque p{

    color:#555;

    line-height:1.7;

    margin-bottom:0;

}


/*==================================================
                    LISTAS
==================================================*/

.registro-bloque ul{

    margin:0;

    padding-left:25px;

}

.registro-bloque li{

    color:#555;

    line-height:1.7;

    margin-bottom:10px;

}

.registro-ancho-completo{

    width:100%;

}


/*==================================================
                    CIERRE
==================================================*/

.registro-cierre{

    max-width:1000px;

    margin:60px auto 0;

    text-align:center;

    padding:30px 30px 5px;

}

.registro-cierre h2{

    color:var(--color-primario);

    font-size:2rem;

    text-decoration:underline;

    margin-bottom:20px;

}

.registro-cierre p{

    color:#555;

    line-height:1.7;

    margin-bottom:8px;

}

.registro-cierre h3{

    color:#333;

    font-size:1.4rem;

    font-style:italic;

    margin-top:25px;

}


/*==================================================
                    RESPONSIVE
==================================================*/

@media (max-width:768px){

    .registro-introduccion{

        padding:30px 20px;

        margin-bottom:35px;

    }

    .registro-introduccion h1{

        font-size:1.8rem;

    }

    .registro-bloques{

        grid-template-columns:1fr;

        gap:20px;

    }

    .registro-bloque{

        padding:25px 20px;

    }

    .registro-bloque h2{

        font-size:1.5rem;

    }

    .registro-cierre{

        padding:20px 10px;

        margin-top:40px;

    }

    .registro-cierre h2{

        font-size:1.6rem;

    }

}

/*==================================================
                 RECURSOS DIGITALES
==================================================*/

.recursos-introduccion{

    max-width:1000px;

    margin:0 auto 60px;

    text-align:center;

    padding: 80px;

}

.recursos-introduccion h1{

    color:var(--color-primario);

    font-size:2.3rem;

    margin-bottom:20px;

}

.recursos-introduccion p{

    color:#555;

    font-size:1.05rem;

    line-height:1.7;

}


/*==================================================
                 SECCIONES POR IDIOMA
==================================================*/

.recursos-idioma{

    max-width:1100px;

    margin:0 auto 70px;

}


/*==================================================
                    TÍTULO
==================================================*/

.recursos-titulo{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:12px;

    margin-bottom:35px;

}

.recursos-titulo span{

    font-size:2rem;

}

.recursos-titulo h2{

    margin:0;

    color:var(--color-primario);

    font-size:2rem;

    text-transform:uppercase;

}


/* Colores por idioma */

.recursos-idioma.ingles .recursos-titulo h2{

    color:#e53935;

}

.recursos-idioma.frances .recursos-titulo h2{

    color:#1857a7;

}

.recursos-idioma.aleman .recursos-titulo h2{

    color:#d6a900;

}

.recursos-idioma.diversas .recursos-titulo h2{

    color:var(--color-primario);

}


/*==================================================
                    GRID
==================================================*/

.recursos-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:25px;

}


/*==================================================
                  TARJETA
==================================================*/

.recurso-card{

    display:flex;

    align-items:center;

    gap:25px;

    min-height:190px;

    padding:25px;

    background:#ffffff;

    border-radius:15px;

    box-shadow:var(--sombra-card);

    border-top:5px solid transparent;

    transition:var(--transicion);

}

.recurso-card:hover{

    transform:translateY(-6px);

    box-shadow:var(--sombra-hover);

}


/*==================================================
                    LOGO
==================================================*/

.recurso-logo{

    flex:0 0 190px;

    height:110px;

    display:flex;

    align-items:center;

    justify-content:center;

}

.recurso-logo img{

    max-width:100%;

    max-height:100%;

    width:auto;

    height:auto;

    object-fit:contain;

}


/*==================================================
                  INFORMACIÓN
==================================================*/

.recurso-info{

    flex:1;

}

.recurso-info h3{

    color:var(--color-primario);

    font-size:1.15rem;

    margin-bottom:10px;

}

.recurso-info p{

    color:#555;

    font-size:.92rem;

    line-height:1.5;

    margin-bottom:15px;

}


/*==================================================
                    BOTÓN
==================================================*/

.btn-recurso{

    display:inline-block;

    padding:8px 18px;

    background:var(--color-primario);

    color:#ffffff;

    text-decoration:none;

    border-radius:25px;

    font-size:.9rem;

    font-weight:bold;

    transition:var(--transicion);

}

.btn-recurso:hover{

    background:var(--color-secundario);

    transform:translateY(-2px);

}


/*==================================================
                  FCE / CAE
==================================================*/

.recursos-subtitulo{

    max-width:900px;

    margin:20px auto 35px;

    padding:25px;

    text-align:center;

    border-top:2px solid var(--color-primario);

    border-bottom:2px solid var(--color-primario);

}

.recursos-subtitulo h3{

    color:#e53935;

    font-size:2rem;

    margin-bottom:15px;

}

.recursos-subtitulo p{

    color:#555;

    font-size:.95rem;

    line-height:1.6;

}


/*==================================================
                  RESPONSIVE
==================================================*/

@media (max-width:768px){

    .recursos-introduccion h1{

        font-size:1.9rem;

    }

    .recursos-idioma{

        margin-bottom:50px;

    }

    .recursos-titulo{

        margin-bottom:25px;

    }

    .recursos-titulo h2{

        font-size:1.7rem;

    }

    .recursos-grid{

        grid-template-columns:1fr;

        gap:20px;

    }

    .recurso-card{

        flex-direction:column;

        text-align:center;

        padding:25px 20px;

    }

    .recurso-logo{

        flex:0 0 auto;

        width:100%;

        height:100px;

    }

    .recurso-info h3{

        font-size:1.1rem;

    }

    .recurso-info p{

        font-size:.9rem;

    }

    .recursos-subtitulo{

        padding:20px 15px;

    }

    .recursos-subtitulo h3{

        font-size:1.7rem;

    }

}

/*==================================================
                  LABORATORIOS
==================================================*/

.laboratorios-introduccion{

    max-width:1000px;

    margin:0 auto 45px;

    padding:60px;

    background:#ffffff;

    border-radius:20px;

    box-shadow:var(--sombra-card);

    text-align:center;

}

.laboratorios-introduccion h1{

    color:var(--color-primario);

    font-size:2.2rem;

    margin-bottom:25px;

}

.laboratorios-introduccion p{

    color:#555;

    font-size:1.05rem;

    line-height:1.8;

    margin:0;

}


/*==================================================
                SECCIONES
==================================================*/

.laboratorios-seccion{

    max-width:1050px;

    margin:0 auto 55px;

}

.laboratorios-seccion > h2{

    color:var(--color-primario);

    font-size:1.8rem;

    text-align:center;

    margin-bottom:30px;

}


/*==================================================
              TÉCNICOS ACADÉMICOS
==================================================*/

.tecnicos-laboratorios{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:25px;

}

.tecnico-laboratorio{

    display:flex;

    align-items:center;

    gap:20px;

    padding:25px;

    background:#ffffff;

    border-radius:15px;

    box-shadow:var(--sombra-card);

    border-left:5px solid var(--color-primario);

    transition:var(--transicion);

}

.tecnico-laboratorio:hover{

    transform:translateY(-5px);

    box-shadow:var(--sombra-hover);

}

.tecnico-icono{

    width:55px;

    height:55px;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:var(--color-fondo);

    font-size:1.7rem;

}

.tecnico-laboratorio h3{

    color:var(--color-primario);

    font-size:1.05rem;

    margin-bottom:8px;

}

.tecnico-laboratorio p{

    color:#666;

    margin:0;

}


/*==================================================
                LABORATORIOS
==================================================*/

.laboratorios-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:25px;

}

.laboratorio-card{

    padding:30px 20px;

    background:#ffffff;

    border-radius:15px;

    box-shadow:var(--sombra-card);

    text-align:center;

    transition:var(--transicion);

    border-top:5px solid var(--color-primario);

}

.laboratorio-card:hover{

    transform:translateY(-7px);

    box-shadow:var(--sombra-hover);

}

.laboratorio-icono{

    font-size:2.5rem;

    margin-bottom:15px;

}

.laboratorio-card h3{

    color:var(--color-primario);

    font-size:1.25rem;

    margin-bottom:12px;

}

.laboratorio-card p{

    color:#444;

    font-size:1.1rem;

    font-weight:bold;

    margin-bottom:5px;

}

.laboratorio-card span{

    color:#666;

    font-size:.95rem;

}


/*==================================================
                    HORARIO
==================================================*/

.laboratorios-horario{

    max-width:850px;

    margin:20px auto 0;

    padding:35px;

    text-align:center;

    background:#ffffff;

    border-radius:20px;

    box-shadow:var(--sombra-card);

}

.horario-icono{

    font-size:2.5rem;

    margin-bottom:15px;

}

.laboratorios-horario h2{

    color:var(--color-primario);

    font-size:1.8rem;

    margin-bottom:15px;

}

.laboratorios-horario p{

    color:#555;

    font-size:1.05rem;

    line-height:1.6;

    margin:0;

}


/*==================================================
                  RESPONSIVE
==================================================*/

@media (max-width:768px){

    .laboratorios-introduccion{

        padding:30px 20px;

    }

    .laboratorios-introduccion h1{

        font-size:1.8rem;

    }

    .tecnicos-laboratorios{

        grid-template-columns:1fr;

    }

    .laboratorios-grid{

        grid-template-columns:1fr;

    }

    .laboratorios-seccion > h2{

        font-size:1.55rem;

    }

    .laboratorios-horario{

        padding:30px 20px;

    }

    .laboratorios-horario h2{

        font-size:1.5rem;

    }

}

/*==================================================
                    CRÉDITOS
==================================================*/

.creditos-introduccion{

    max-width:1000px;

    margin:0 auto 55px;

    text-align:center;

    padding: 60px;

}

.creditos-introduccion h1{

    color:var(--color-primario);

    font-size:2.3rem;

    margin-bottom:40px;

}

.creditos-introduccion p{

    color:#555;

    font-size:1.05rem;

    line-height:1.7;

}


/*==================================================
                    SECCIONES
==================================================*/

.creditos-seccion{

    max-width:1050px;

    margin:0 auto 55px;

}

.creditos-seccion > h2{

    color:var(--color-primario);

    font-size:1.8rem;

    text-align:center;

    margin-bottom:30px;

}


/*==================================================
                      GRID
==================================================*/

.creditos-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:25px;

}


/*==================================================
                     TARJETAS
==================================================*/

.credito-card{

    background:#ffffff;

    padding:30px 20px;

    border-radius:15px;

    box-shadow:var(--sombra-card);

    text-align:center;

    transition:var(--transicion);

    border-top:5px solid var(--color-primario);

}

.credito-card:hover{

    transform:translateY(-7px);

    box-shadow:var(--sombra-hover);

}


/*==================================================
                       ICONO
==================================================*/

.credito-icono{

    font-size:2.5rem;

    margin-bottom:15px;

}


/*==================================================
                     NOMBRE
==================================================*/

.credito-card h3{

    color:var(--color-primario);

    font-size:1.15rem;

    margin-bottom:10px;

}


/*==================================================
                      CARGO
==================================================*/

.credito-card p{

    color:#666;

    font-size:.95rem;

    line-height:1.5;

    margin:0;

}


/*==================================================
                       CIERRE
==================================================*/

.creditos-cierre{

    text-align:center;

    margin:20px auto 0;

    padding:10px;

}

.creditos-cierre p{

    color:#666;

    font-size:.9rem;

    font-style:italic;

}


/*==================================================
                    RESPONSIVE
==================================================*/

@media (max-width:768px){

    .creditos-introduccion h1{

        font-size:1.9rem;

    }

    .creditos-grid{

        grid-template-columns:1fr;

        gap:20px;

    }

    .credito-card{

        padding:25px 20px;

    }

}