/* =========================================================
   VARIABLES Y CONFIGURACIÓN GENERAL
   ========================================================= */

:root {
    --azul: #17375E;
    --azul-oscuro: #163B63;
    --azul-claro: #234E78;

    --verde: #2BC4B3;
    --verde-oscuro: #15988E;
    --verde-claro: #EAF8F6;
    --verde-suave: #DFF7F4;

    --texto: #3F5365;
    --texto-secundario: #6C7A89;
    --texto-claro: #758694;

    --fondo: #F6F9FC;
    --blanco: #FFFFFF;
    --borde: #E5EEF2;

    --sombra: 0 15px 40px rgba(23, 55, 94, .07);
    --sombra-fuerte: 0 20px 45px rgba(23, 55, 94, .12);

    --radio: 28px;
    --transicion: .3s ease;
}


/* =========================================================
   REINICIO GENERAL
   ========================================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
}

html {
    scroll-behavior: smooth;
}

body {
    background: var(--fondo);
    color: #333;
    padding-bottom: 70px;
}

a {
    text-decoration: none;
}


/* =========================================================
   HEADER PRINCIPAL
   ========================================================= */

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 40px;
    background: var(--blanco);
    border-radius: 0 0 20px 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
}

header a {
    color: #333;
}

.logo {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 1.25rem;
    font-weight: bold;
}

.logo img {
    height: 70px;
    border-radius: 50%;
}

nav a {
    display: inline-block;
    margin-left: 18px;
    padding: 10px 16px;
    border-radius: 14px;
    transition: var(--transicion);
}

nav a:hover {
    background: #3F51B5;
    color: white;
}


/* =========================================================
   ELEMENTOS GENERALES
   ========================================================= */

.centro {
    max-width: 1100px;
    margin: 40px auto;
    padding: 50px;
    background: var(--blanco);
    border-radius: var(--radio);
    text-align: center;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .08);
}

.centro img {
    width: 180px;
    margin-bottom: 20px;
    border-radius: 50%;
}

.boton {
    display: inline-block;
    margin-top: 20px;
    padding: 12px 24px;
    background: #E74C3C;
    color: white;
    border-radius: 16px;
}


/* =========================================================
   PORTADA / INICIO
   ========================================================= */

.portada {
    min-height: 100vh;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 8% 120px;
    background: linear-gradient(135deg, #FFF, #EAF5F7);
    overflow: hidden;
}

.portada-texto {
    width: 45%;
}

.etiqueta,
.subtitulo {
    display: inline-block;
    padding: 10px 20px;
    background: var(--verde-suave);
    color: #158C84;
    border-radius: 40px;
    font-weight: 600;
}

.etiqueta {
    margin-bottom: 25px;
    font-size: 15px;
}

.portada h1 {
    color: var(--azul);
    font-size: 70px;
    line-height: 70px;
    font-weight: 800;
}

.portada h2 {
    margin-top: 18px;
    color: #2AA79C;
    font-size: 32px;
    font-weight: 600;
}

.portada p {
    margin-top: 30px;
    color: #555;
    font-size: 18px;
    line-height: 32px;
    text-align: justify;
}

.btn-comenzar {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 40px;
    padding: 18px 35px;
    background: var(--verde);
    color: white;
    border-radius: 50px;
    font-size: 18px;
    font-weight: 600;
    transition: .35s;
}

.btn-comenzar:hover {
    background: #169E93;
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(44, 196, 180, .35);
}

.estudiante-imagen {
    width: 120%;
    display: flex;
    justify-content: flex-end;
    margin-left: 70px;
}

.estudiante-imagen img {
    width: 200%;
    max-width: 900px;
    margin-right: -30%;
    animation: flotar 4s ease-in-out infinite;
}

@keyframes flotar {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-15px);
    }
}


/* =========================================================
   ESTRUCTURA GENERAL DE SECCIONES
   ========================================================= */

.seccion {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 90px 8%;
}

.contenedor {
    width: 100%;
    max-width: 1300px;
}

.seccion h2 {
    color: var(--azul);
    font-size: 55px;
    font-weight: 700;
    margin-bottom: 40px;
}

.titulo-seccion,
.titulo-referencias {
    text-align: center;
    margin-bottom: 45px;
}

.titulo-seccion h2,
.titulo-referencias h2 {
    color: var(--azul);
    font-size: 56px;
    font-weight: 700;
    margin-bottom: 15px;
}

.titulo-seccion p,
.titulo-referencias p {
    color: var(--texto-secundario);
    font-size: 18px;
}


/* =========================================================
   PREGUNTA PROBLEMA
   ========================================================= */

.pregunta {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 40px 8%;
    background: var(--blanco);
}

.pregunta .titulo-seccion {
    margin-bottom: 60px;
}

.subtitulo {
    padding: 8px 18px;
    margin-bottom: 20px;
    font-size: 14px;
    border-radius: 30px;
    color: #1D8F88;
}

.pregunta-contenido,
.justificacion-contenido {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 70px;
    margin-top: 40px;
}

.pregunta-img,
.justificacion-img {
    display: flex;
    justify-content: center;
    transform: translateY(-50px);
}

.pregunta-img {
    width: 420px;
}

.pregunta-img img {
    width: 150%;
    transition: .4s;
}

.pregunta-img img:hover {
    transform: translateY(-8px);
}

.tarjeta-pregunta {
    width: 700px;
    padding: 45px;
    background: white;
    border-left: 8px solid var(--verde);
    border-radius: 25px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, .08);
    transform: translateY(-50px);
}

.tarjeta-pregunta p {
    color: #34495E;
    font-size: 23px;
    line-height: 42px;
    text-align: justify;
}


/* =========================================================
   OBJETIVOS
   ========================================================= */

.objetivos {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 8% 100px;
    background: var(--fondo);
}

.objetivos .contenedor {
    width: 100%;
    max-width: 1300px;
}

.objetivo-general {
    display: flex;
    align-items: center;
    gap: 35px;
    max-width: 1050px;
    margin: 0 auto 45px;
    padding: 35px 45px;
    background: linear-gradient(135deg, #E8F9F7, #F5FCFC);
    border: 1px solid #D7F0ED;
    border-radius: var(--radio);
    box-shadow: 0 15px 35px rgba(22, 59, 99, .08);
}

.objetivo-icono-general {
    min-width: 95px;
    height: 95px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--verde);
    color: white;
    border-radius: 50%;
    box-shadow: 0 10px 25px rgba(43, 196, 179, .25);
}

.objetivo-icono-general i {
    font-size: 42px;
}

.objetivo-general-texto span {
    display: inline-block;
    margin-bottom: 10px;
    color: #168B82;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.objetivo-general-texto p {
    color: #34495E;
    font-size: 19px;
    line-height: 32px;
    text-align: justify;
}

.titulo-especificos {
    margin-bottom: 25px;
    color: var(--azul);
    font-size: 26px;
    text-align: center;
}

.objetivos-especificos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

.tarjeta-objetivo {
    position: relative;
    padding: 32px 28px;
    background: white;
    border: 1px solid #E2EDF1;
    border-radius: 24px;
    box-shadow: 0 12px 30px rgba(22, 59, 99, .07);
    overflow: hidden;
    transition: .35s;
}

.tarjeta-objetivo:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(22, 59, 99, .12);
}

.numero-objetivo {
    position: absolute;
    top: 18px;
    right: 20px;
    color: #7FBDB8;
    font-size: 14px;
    font-weight: 700;
}

.icono-objetivo {
    width: 62px;
    height: 62px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    background: var(--verde-claro);
    color: #2AA79C;
    border-radius: 18px;
}

.icono-objetivo i {
    font-size: 27px;
}

.tarjeta-objetivo h4 {
    margin-bottom: 12px;
    color: var(--azul);
    font-size: 23px;
}

.tarjeta-objetivo p {
    color: #596A78;
    font-size: 16px;
    line-height: 28px;
    text-align: justify;
}


/* =========================================================
   JUSTIFICACIÓN
   ========================================================= */

.justificacion {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 8%;
    background: var(--blanco);
}

.justificacion-img {
    width: 430px;
}

.justificacion-img img {
    width: 130%;
    animation: flotar 4s ease-in-out infinite;
}

.tarjeta-justificacion {
    width: 760px;
    background: white;
    border-radius: 25px;
    overflow: hidden;
    box-shadow: 0 18px 45px rgba(0, 0, 0, .08);
}

.encabezado {
    padding: 20px;
    background: #1F3C66;
    color: white;
    font-size: 24px;
    font-weight: 600;
}

.texto-scroll {
    max-height: 500px;
    overflow-y: auto;
    padding: 35px;
}

.texto-scroll p {
    color: #48596B;
    font-size: 20px;
    line-height: 36px;
    text-align: justify;
}


/* =========================================================
   HIPÓTESIS
   ========================================================= */

.hipotesis {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 8% 110px;
    background: var(--fondo);
}

.hipotesis .contenedor {
    width: 100%;
    max-width: 1250px;
}

.hipotesis-principal {
    position: relative;
    display: flex;
    align-items: center;
    gap: 30px;
    max-width: 1050px;
    margin: 0 auto;
    padding: 35px 40px;
    background: linear-gradient(135deg, var(--azul), var(--azul-claro));
    border-radius: 30px;
    box-shadow: 0 20px 45px rgba(23, 55, 94, .22);
    overflow: hidden;
}

.hipotesis-principal::after {
    content: "";
    position: absolute;
    width: 260px;
    height: 260px;
    right: -100px;
    top: -120px;
    background: rgba(43, 196, 179, .12);
    border-radius: 50%;
}

.icono-hipotesis-principal {
    min-width: 90px;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--verde);
    color: white;
    border-radius: 24px;
    box-shadow: 0 10px 25px rgba(43, 196, 179, .25);
}

.icono-hipotesis-principal i {
    font-size: 38px;
}

.hipotesis-principal-texto span {
    color: #6FE0D3;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.hipotesis-principal-texto p {
    margin-top: 10px;
    color: white;
    font-size: 18px;
    line-height: 31px;
    text-align: justify;
}


/* Conexión */

.linea-hipotesis {
    position: relative;
    width: 82%;
    height: 64px;
    margin: 0 auto;
}

.linea-hipotesis::before,
.linea-hipotesis::after {
    content: "";
    position: absolute;
    background: #49C5B6;
}

.linea-hipotesis::before {
    top: 0;
    left: 50%;
    width: 2px;
    height: 32px;
    transform: translateX(-50%);
}

.linea-hipotesis::after {
    top: 32px;
    left: 25%;
    width: 50%;
    height: 2px;
}

.linea-hipotesis span {
    position: absolute;
    width: 10px;
    height: 10px;
    background: var(--verde);
    border-radius: 50%;
    z-index: 2;
}

.punto-central {
    top: 27px;
    left: 50%;
    transform: translateX(-50%);
}

.punto-izquierda,
.punto-derecha {
    top: 27px;
    transform: translateX(-50%);
}

.punto-izquierda {
    left: 25%;
}

.punto-derecha {
    left: 75%;
}

.punto-izquierda::after,
.punto-derecha::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 10px;
    width: 2px;
    height: 25px;
    background: #49C5B6;
    transform: translateX(-50%);
}


/* Hipótesis secundarias */

.hipotesis-secundarias {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    max-width: 1050px;
    margin: 0 auto;
}

.tarjeta-hipotesis {
    padding: 30px;
    background: white;
    border: 1px solid #E1EAF0;
    border-radius: 26px;
    box-shadow: 0 15px 35px rgba(23, 55, 94, .07);
    transition: .35s;
}

.tarjeta-hipotesis:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(23, 55, 94, .11);
}

.encabezado-hipotesis {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.encabezado-hipotesis small {
    color: #7C8A97;
    font-size: 13px;
}

.encabezado-hipotesis h3 {
    margin-top: 2px;
    color: var(--azul);
    font-size: 23px;
}

.icono-secundario {
    width: 55px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    font-size: 24px;
}

.nula {
    border-top: 5px solid #E58A8A;
}

.nula .icono-secundario {
    background: #FBEAEC;
    color: #D65A63;
}

.alternativa {
    border-top: 5px solid #68C7A9;
}

.alternativa .icono-secundario {
    background: #E7F8F2;
    color: #2D9E7B;
}

.tarjeta-hipotesis p {
    color: #596A78;
    font-size: 16px;
    line-height: 29px;
    text-align: justify;
}


/* =========================================================
   SECCIONES DE CONTENIDO
   Introducción / Metodología / Resultados /
   Discusión / Conclusiones
   ========================================================= */

.introduccion,
.metodologia,
.resultados,
.discusion,
.conclusiones {
    min-height: 100vh;
    padding: 40px 6% 120px;
}

.introduccion,
.resultados,
.conclusiones {
    background: var(--blanco);
}

.metodologia,
.discusion {
    background: var(--fondo);
}

.contenedor-introduccion,
.contenedor-metodologia,
.contenedor-resultados,
.contenedor-discusion,
.contenedor-conclusiones {
    width: 100%;
    max-width: 1250px;
    margin: 0 auto;
}


/* Tarjetas principales */

.texto-introduccion,
.texto-metodologia,
.texto-resultados,
.texto-discusion,
.texto-conclusiones {
    padding: 55px 60px;
    background: white;
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
}


/* Párrafos */

.texto-introduccion > p,
.texto-metodologia > p,
.texto-resultados > p,
.texto-discusion > p,
.texto-conclusiones > p {
    margin-bottom: 28px;
    color: var(--texto);
    font-size: 17px;
    line-height: 32px;
    text-align: justify;
}


/* =========================================================
   INTRODUCCIÓN
   ========================================================= */

.bloque-figura {
    margin: 45px 0;
    transition: .3s;
}

.bloque-figura:hover {
    transform: translateY(-2px);
}

.titulo-grafico {
    margin-bottom: 15px;
    color: var(--verde-oscuro);
    font-size: 18px;
    font-weight: 700;
    text-align: center;
}

.figura-introduccion {
    display: block;
    width: 75%;
    max-width: 850px;
    margin: 25px auto 10px;
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(23, 55, 94, .08);
}

.nota-figura,
.nota-metodologia,
.nota-resultados {
    color: var(--texto-claro);
    font-size: 13px;
    line-height: 22px;
    font-style: italic;
    text-align: center;
}


/* =========================================================
   TABLA
   ========================================================= */

.tabla-scroll {
    width: 100%;
    overflow-x: auto;
    border-radius: 12px;
}

.tabla-estresores {
    width: 100%;
    min-width: 750px;
    border-collapse: collapse;
}

.tabla-estresores th {
    padding: 15px;
    background: var(--azul);
    color: white;
    font-size: 16px;
    text-align: center;
}

.tabla-estresores td {
    padding: 13px 16px;
    border: 1px solid #DCE7EB;
    color: #465A6B;
    font-size: 15px;
    line-height: 24px;
    vertical-align: top;
}

.tabla-estresores tr:nth-child(even) {
    background: #F1F8F8;
}


/* =========================================================
   METODOLOGÍA
   ========================================================= */

.figura-metodologia,
.figura-resultados {
    width: 100%;
    margin: 45px auto;
    text-align: center;
}

.figura-metodologia h3,
.figura-resultados h3 {
    max-width: 900px;
    margin: 0 auto 20px;
    color: var(--verde-oscuro);
    font-size: 18px;
    font-weight: 700;
    line-height: 28px;
}

.figura-metodologia img {
    display: block;
    width: 80%;
    max-width: 850px;
    max-height: 600px;
    margin: 0 auto;
    object-fit: contain;
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(23, 55, 94, .10);
    transition: .3s ease;
}

.figura-metodologia img:hover {
    transform: scale(1.015);
}


/* =========================================================
   RESULTADOS
   ========================================================= */

.figura-resultados {
    margin: 42px auto;
}

.figura-resultados h3 {
    margin-bottom: 16px;
    font-size: 17px;
    line-height: 27px;
}

.figura-resultados img {
    display: block;
    width: 70%;
    max-width: 650px;
    max-height: 350px;
    margin: 0 auto;
    object-fit: contain;
    border-radius: 14px;
    box-shadow: 0 8px 25px rgba(23, 55, 94, .08);
    transition: .3s ease;
}

.figura-resultados img:hover {
    transform: scale(1.015);
}

.figura-resultados.pequeña img {
    width: 65%;
    max-width: 580px;
    max-height: 300px;
}


/* =========================================================
   REFERENCIAS
   ========================================================= */

.referencias {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 40px 6% 120px;
    background: var(--fondo);
}

.contenedor-referencias {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
}

.biblioteca-referencias {
    background: white;
    border: 1px solid #DFEAEE;
    border-radius: 30px;
    overflow: hidden;
    box-shadow: 0 18px 45px rgba(23, 55, 94, .10);
}

.cabecera-referencias {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 28px 35px;
    background: linear-gradient(135deg, var(--azul), var(--azul-claro));
    color: white;
}

.icono-referencias {
    width: 65px;
    height: 65px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--verde);
    border-radius: 18px;
    box-shadow: 0 8px 20px rgba(43, 196, 179, .25);
}

.icono-referencias i {
    font-size: 28px;
}

.cabecera-referencias span {
    display: block;
    margin-bottom: 4px;
    color: #6FE0D3;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.cabecera-referencias h3 {
    font-size: 23px;
    font-weight: 600;
}

.lista-referencias {
    max-height: 520px;
    overflow-y: auto;
    padding: 25px 35px;
    scrollbar-width: thin;
    scrollbar-color: #49C5B6 #EEF4F6;
}

.referencia-item {
    display: flex;
    align-items: stretch;
    gap: 18px;
    padding: 22px 5px;
    border-bottom: 1px solid #E6EEF1;
    transition: .3s;
}

.referencia-item:last-child {
    border-bottom: none;
}

.numero-referencia {
    min-width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--verde-claro);
    color: #178F86;
    border-radius: 13px;
    font-size: 14px;
    font-weight: 700;
}

.linea-referencia {
    width: 3px;
    background: var(--verde);
    border-radius: 10px;
    opacity: .75;
}

.texto-referencia {
    flex: 1;
}

.texto-referencia p {
    margin: 0;
    color: #43576A;
    font-size: 16px;
    line-height: 29px;
    text-align: left;
}

.referencia-item:hover {
    transform: translateX(5px);
}

.referencia-item:hover .numero-referencia {
    background: var(--verde);
    color: white;
}


/* Scroll de referencias */

.lista-referencias::-webkit-scrollbar {
    width: 7px;
}

.lista-referencias::-webkit-scrollbar-track {
    background: #EEF4F6;
    border-radius: 10px;
}

.lista-referencias::-webkit-scrollbar-thumb {
    background: #49C5B6;
    border-radius: 10px;
}

.lista-referencias::-webkit-scrollbar-thumb:hover {
    background: #2AA79C;
}


/* =========================================================
   FONDOS DE LAS SECCIONES
   ========================================================= */

#pregunta,
#justificacion,
#introduccion,
#resultados,
#conclusiones {
    background: var(--blanco);
}

#objetivos,
#hipotesis,
#metodologia,
#discusion,
#referencias {
    background: var(--fondo);
}


/* =========================================================
   MENÚ INFERIOR
   ========================================================= */

.menu-proyecto {
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 1000;

    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;

    padding: 8px 15px;

    background: rgba(22, 59, 99, .95);
    border-top: 3px solid #49C5B6;
    box-shadow: 0 -5px 20px rgba(0, 0, 0, .2);

    backdrop-filter: blur(12px);

    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;

    scrollbar-width: none;
    scroll-behavior: smooth;
}

.menu-proyecto::-webkit-scrollbar {
    display: none;
}

.menu-proyecto a {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 5px;

    padding: 8px 12px;

    color: white;
    border-radius: 30px;

    font-size: 13px;
    font-weight: 500;

    transition: .3s;
}

.menu-proyecto a:hover {
    background: #49C5B6;
    color: var(--azul-oscuro);
    transform: translateY(-2px);
}

.menu-proyecto i {
    font-size: 14px;
}


/* =========================================================
   DISEÑO RESPONSIVO
   ========================================================= */

@media (max-width: 1000px) {

    .portada {
        padding: 60px 6% 120px;
    }

    .portada h1 {
        font-size: 55px;
        line-height: 60px;
    }

    .portada-texto {
        width: 50%;
    }

    .estudiante-imagen {
        width: 55%;
        margin-left: 20px;
    }

    .pregunta-contenido,
    .justificacion-contenido {
        gap: 35px;
    }

    .pregunta-img,
    .justificacion-img {
        width: 35%;
    }

    .tarjeta-pregunta,
    .tarjeta-justificacion {
        width: 60%;
    }

    .objetivos-especificos {
        grid-template-columns: repeat(2, 1fr);
    }
}


@media (max-width: 768px) {

    header {
        padding: 12px 20px;
    }

    .logo img {
        height: 55px;
    }

    nav {
        display: none;
    }

    .portada {
        min-height: auto;
        flex-direction: column;
        text-align: center;
        padding: 70px 6% 120px;
    }

    .portada-texto {
        width: 100%;
    }

    .portada h1 {
        font-size: 45px;
        line-height: 50px;
    }

    .portada h2 {
        font-size: 26px;
    }

    .portada p {
        font-size: 16px;
        line-height: 28px;
    }

    .estudiante-imagen {
        width: 100%;
        margin: 40px 0 0;
        justify-content: center;
    }

    .estudiante-imagen img {
        width: 100%;
        max-width: 500px;
        margin: 0;
    }

    .seccion,
    .pregunta,
    .objetivos,
    .justificacion,
    .hipotesis {
        padding: 70px 5%;
    }

    .titulo-seccion h2,
    .titulo-referencias h2 {
        font-size: 40px;
    }

    .pregunta-contenido,
    .justificacion-contenido {
        flex-direction: column;
    }

    .pregunta-img,
    .justificacion-img {
        width: 70%;
        transform: none;
    }

    .pregunta-img img,
    .justificacion-img img {
        width: 100%;
    }

    .tarjeta-pregunta,
    .tarjeta-justificacion {
        width: 100%;
        transform: none;
    }

    .tarjeta-pregunta p {
        font-size: 18px;
        line-height: 32px;
    }

    .objetivo-general {
        flex-direction: column;
        text-align: center;
        padding: 30px;
    }

    .objetivos-especificos,
    .hipotesis-secundarias {
        grid-template-columns: 1fr;
    }

    .hipotesis-principal {
        flex-direction: column;
        text-align: center;
        padding: 30px 25px;
    }

    .texto-introduccion,
    .texto-metodologia,
    .texto-resultados,
    .texto-discusion,
    .texto-conclusiones {
        padding: 35px 25px;
    }

    .texto-introduccion > p,
    .texto-metodologia > p,
    .texto-resultados > p,
    .texto-discusion > p,
    .texto-conclusiones > p {
        font-size: 16px;
        line-height: 29px;
    }

    .figura-introduccion,
    .figura-metodologia img,
    .figura-resultados img,
    .figura-resultados.pequeña img {
        width: 100%;
    }

    .cabecera-referencias {
        padding: 25px;
    }

    .lista-referencias {
        padding: 20px;
    }

    .menu-proyecto {
        padding: 7px 8px;
    }

    .menu-proyecto a {
        padding: 7px 10px;
        font-size: 12px;
    }
}


@media (max-width: 480px) {

    .logo {
        font-size: 1rem;
    }

    .logo img {
        height: 45px;
    }

    .portada h1 {
        font-size: 37px;
        line-height: 43px;
    }

    .portada h2 {
        font-size: 22px;
    }

    .btn-comenzar {
        padding: 15px 25px;
        font-size: 16px;
    }

    .titulo-seccion h2,
    .titulo-referencias h2 {
        font-size: 34px;
    }

    .titulo-seccion p,
    .titulo-referencias p {
        font-size: 16px;
    }

    .tarjeta-pregunta {
        padding: 28px 22px;
    }

    .objetivo-general {
        padding: 25px 20px;
    }

    .texto-scroll {
        padding: 25px 20px;
    }

    .texto-scroll p {
        font-size: 17px;
        line-height: 30px;
    }

    .texto-introduccion,
    .texto-metodologia,
    .texto-resultados,
    .texto-discusion,
    .texto-conclusiones {
        padding: 28px 20px;
    }

    .referencia-item {
        gap: 10px;
    }

    .numero-referencia {
        min-width: 35px;
        height: 35px;
    }
}

/* =========================================================
   ANIMACIONES Y EFECTOS EXTRA
   ========================================================= */


/* ---------------------------------------------------------
   1. APARICIÓN SUAVE DE LAS SECCIONES
   --------------------------------------------------------- */

@keyframes aparecer {
    from {
        opacity: 0;
        transform: translateY(25px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.titulo-seccion,
.titulo-referencias {
    animation: aparecer .8s ease both;
}


/* ---------------------------------------------------------
   2. EFECTO DE ENTRADA PARA TARJETAS
   --------------------------------------------------------- */

.objetivo-general,
.tarjeta-objetivo,
.tarjeta-pregunta,
.tarjeta-justificacion,
.hipotesis-principal,
.tarjeta-hipotesis,
.texto-introduccion,
.texto-metodologia,
.texto-resultados,
.texto-discusion,
.texto-conclusiones,
.biblioteca-referencias {
    animation: aparecer .8s ease both;
}


/* ---------------------------------------------------------
   3. EFECTO DE ELEVACIÓN EN TARJETAS
   --------------------------------------------------------- */

.tarjeta-objetivo,
.tarjeta-hipotesis,
.tarjeta-pregunta,
.tarjeta-justificacion {
    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;
}

.tarjeta-objetivo:hover,
.tarjeta-hipotesis:hover,
.tarjeta-pregunta:hover,
.tarjeta-justificacion:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 50px rgba(23, 55, 94, .14);
}


/* ---------------------------------------------------------
   4. ICONOS MÁS VIVOS
   --------------------------------------------------------- */

.icono-objetivo,
.objetivo-icono-general,
.icono-hipotesis-principal,
.icono-secundario,
.icono-referencias {
    transition:
        transform .35s ease,
        box-shadow .35s ease;
}

.tarjeta-objetivo:hover .icono-objetivo,
.objetivo-general:hover .objetivo-icono-general,
.tarjeta-hipotesis:hover .icono-secundario {
    transform: scale(1.08) rotate(-3deg);
}


/* ---------------------------------------------------------
   5. EFECTO DE BRILLO EN EL BOTÓN PRINCIPAL
   --------------------------------------------------------- */

.btn-comenzar {
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(43, 196, 179, .25);
}

.btn-comenzar::before {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 80%;
    height: 100%;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, .35),
        transparent
    );

    transform: skewX(-20deg);
    transition: left .7s ease;
}

.btn-comenzar:hover::before {
    left: 130%;
}


/* ---------------------------------------------------------
   6. EFECTO HOVER MÁS ELEGANTE PARA LOS ENLACES
   --------------------------------------------------------- */

nav a {
    position: relative;
    transition:
        color .3s ease,
        background .3s ease,
        transform .3s ease;
}

nav a:hover {
    transform: translateY(-2px);
}


/* ---------------------------------------------------------
   7. IMÁGENES DE INTRODUCCIÓN
   --------------------------------------------------------- */

.figura-introduccion,
.figura-metodologia img,
.figura-resultados img {
    transition:
        transform .4s ease,
        box-shadow .4s ease;
}

.figura-introduccion:hover,
.figura-metodologia img:hover,
.figura-resultados img:hover {
    transform: translateY(-5px) scale(1.015);
    box-shadow: 0 18px 40px rgba(23, 55, 94, .14);
}


/* ---------------------------------------------------------
   8. EFECTO DE LUZ EN LA PORTADA
   --------------------------------------------------------- */

.portada {
    position: relative;
}

.portada::before {
    content: "";
    position: absolute;

    width: 420px;
    height: 420px;

    top: -180px;
    right: -100px;

    background: rgba(43, 196, 179, .10);
    border-radius: 50%;

    filter: blur(5px);

    animation: movimiento-circulo 8s ease-in-out infinite;
}

.portada::after {
    content: "";

    position: absolute;

    width: 250px;
    height: 250px;

    bottom: -100px;
    left: -80px;

    background: rgba(23, 55, 94, .06);
    border-radius: 50%;

    animation: movimiento-circulo 10s ease-in-out infinite reverse;
}

.portada-texto,
.estudiante-imagen {
    position: relative;
    z-index: 2;
}

@keyframes movimiento-circulo {

    0%,
    100% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(20px, 25px);
    }
}


/* ---------------------------------------------------------
   9. ETIQUETA DE LA PORTADA
   --------------------------------------------------------- */

.etiqueta {
    transition:
        transform .3s ease,
        box-shadow .3s ease;
}

.etiqueta:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(43, 196, 179, .18);
}


/* ---------------------------------------------------------
   10. EFECTO EN LA PREGUNTA PROBLEMA
   --------------------------------------------------------- */

.tarjeta-pregunta {
    position: relative;
    overflow: hidden;
}

.tarjeta-pregunta::after {
    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    right: -90px;
    bottom: -100px;

    background: rgba(43, 196, 179, .08);
    border-radius: 50%;

    transition: transform .5s ease;
}

.tarjeta-pregunta:hover::after {
    transform: scale(1.4);
}


/* ---------------------------------------------------------
   11. EFECTO PARA EL OBJETIVO GENERAL
   --------------------------------------------------------- */

.objetivo-general {
    position: relative;
    overflow: hidden;
}

.objetivo-general::after {
    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    right: -80px;
    top: -90px;

    background: rgba(43, 196, 179, .08);
    border-radius: 50%;

    transition: transform .5s ease;
}

.objetivo-general:hover::after {
    transform: scale(1.3);
}

.objetivo-general-texto {
    position: relative;
    z-index: 2;
}


/* ---------------------------------------------------------
   12. EFECTO EN LAS REFERENCIAS
   --------------------------------------------------------- */

.referencia-item {
    transition:
        transform .3s ease,
        padding-left .3s ease;
}

.referencia-item:hover {
    transform: translateX(7px);
    padding-left: 8px;
}


/* ---------------------------------------------------------
   13. NÚMEROS DE OBJETIVOS
   --------------------------------------------------------- */

.numero-objetivo {
    transition:
        transform .3s ease,
        color .3s ease;
}

.tarjeta-objetivo:hover .numero-objetivo {
    transform: scale(1.15);
    color: var(--verde);
}


/* ---------------------------------------------------------
   14. MENÚ INFERIOR
   --------------------------------------------------------- */

.menu-proyecto a {
    position: relative;
    transition:
        background .3s ease,
        color .3s ease,
        transform .3s ease;
}

.menu-proyecto a::after {
    content: "";

    position: absolute;

    left: 50%;
    bottom: 3px;

    width: 0;
    height: 2px;

    background: white;

    transform: translateX(-50%);

    transition: width .3s ease;
}

.menu-proyecto a:hover::after {
    width: 45%;
}


/* ---------------------------------------------------------
   15. EFECTO SUAVE EN EL LOGO
   --------------------------------------------------------- */

.logo img {
    transition:
        transform .4s ease,
        box-shadow .4s ease;
}

.logo:hover img {
    transform: rotate(-5deg) scale(1.05);
    box-shadow: 0 8px 20px rgba(23, 55, 94, .15);
}


/* ---------------------------------------------------------
   16. SCROLLBAR GENERAL
   --------------------------------------------------------- */

body::-webkit-scrollbar {
    width: 9px;
}

body::-webkit-scrollbar-track {
    background: #EEF4F6;
}

body::-webkit-scrollbar-thumb {
    background: #49C5B6;
    border-radius: 10px;
}

body::-webkit-scrollbar-thumb:hover {
    background: #2AA79C;
}


/* ---------------------------------------------------------
   17. SELECCIÓN DE TEXTO
   --------------------------------------------------------- */

::selection {
    background: #2BC4B3;
    color: white;
}


/* ---------------------------------------------------------
   18. RESPETO A USUARIOS CON MENOS ANIMACIONES
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
}

/* =========================================================
   RUTA DE LA INVESTIGACIÓN
   ========================================================= */

.ruta-investigacion {
    min-height: 100vh;
    padding: 100px 6% 130px;
    background: linear-gradient(
        135deg,
        #F6F9FC 0%,
        #EAF8F6 100%
    );
    position: relative;
    overflow: hidden;
}


/* Decoraciones de fondo */

.ruta-investigacion::before {
    content: "";
    position: absolute;

    width: 350px;
    height: 350px;

    right: -150px;
    top: -120px;

    background: rgba(43, 196, 179, .10);
    border-radius: 50%;

    filter: blur(3px);
}


.ruta-investigacion::after {
    content: "";
    position: absolute;

    width: 250px;
    height: 250px;

    left: -120px;
    bottom: -100px;

    background: rgba(23, 55, 94, .06);
    border-radius: 50%;
}


/* Contenedor */

.contenedor-ruta {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}


/* Línea central */

.ruta {
    position: relative;
    max-width: 1050px;
    margin: 80px auto 0;
}


.linea-ruta {
    position: absolute;

    left: 50%;
    top: 0;

    width: 3px;
    height: 100%;

    background: linear-gradient(
        to bottom,
        var(--verde),
        #A9DDD7,
        var(--azul)
    );

    transform: translateX(-50%);
}


/* Cada paso */

.paso-ruta {
    width: 50%;
    padding: 25px 55px;

    position: relative;

    opacity: 0;
    transform: translateY(35px);

    transition:
        opacity .7s ease,
        transform .7s ease;
}


/* Animación cuando aparece */

.paso-ruta.visible {
    opacity: 1;
    transform: translateY(0);
}


/* Alternar lados */

.paso-ruta:nth-child(odd) {
    margin-left: 0;
    text-align: right;
}


.paso-ruta:nth-child(even) {
    margin-left: 50%;
    text-align: left;
}


/* Número */

.numero-paso {
    position: absolute;

    top: 20px;

    width: 38px;
    height: 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--blanco);
    color: var(--azul);

    border: 3px solid var(--verde);

    border-radius: 50%;

    font-size: 12px;
    font-weight: 800;

    z-index: 3;

    box-shadow: 0 5px 15px rgba(23, 55, 94, .12);
}


.paso-ruta:nth-child(odd) .numero-paso {
    right: -19px;
}


.paso-ruta:nth-child(even) .numero-paso {
    left: -19px;
}


/* Icono */

.icono-paso {
    width: 68px;
    height: 68px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 18px;

    background: var(--verde);
    color: white;

    border-radius: 20px;

    font-size: 27px;

    box-shadow:
        0 12px 25px rgba(43, 196, 179, .25);

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}


.paso-ruta:nth-child(odd) .icono-paso {
    margin-left: auto;
}


.paso-ruta:hover .icono-paso {
    transform: translateY(-6px) rotate(-4deg);

    box-shadow:
        0 18px 35px rgba(43, 196, 179, .35);
}


/* Contenido */

.contenido-paso {
    padding: 25px;

    background: rgba(255, 255, 255, .90);

    border: 1px solid rgba(229, 238, 242, .9);

    border-radius: 24px;

    box-shadow:
        0 12px 30px rgba(23, 55, 94, .07);

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}


.paso-ruta:hover .contenido-paso {
    transform: translateY(-5px);

    box-shadow:
        0 20px 40px rgba(23, 55, 94, .12);
}


/* Etiqueta */

.contenido-paso span {
    color: var(--verde-oscuro);

    font-size: 12px;
    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 1.5px;
}


/* Título */

.contenido-paso h3 {
    margin: 7px 0 12px;

    color: var(--azul);

    font-size: 23px;
    font-weight: 700;
}


/* Texto */

.contenido-paso p {
    color: var(--texto);

    font-size: 15px;

    line-height: 26px;
}


/* =========================================================
   RESPONSIVE — RUTA
   ========================================================= */

@media (max-width: 768px) {

    .ruta {
        margin-top: 50px;
    }


    .linea-ruta {
        left: 20px;
    }


    .paso-ruta,
    .paso-ruta:nth-child(odd),
    .paso-ruta:nth-child(even) {

        width: 100%;

        margin-left: 0;

        padding:
            20px 0 30px 60px;

        text-align: left;
    }


    .paso-ruta:nth-child(odd) .icono-paso {
        margin-left: 0;
    }


    .numero-paso,
    .paso-ruta:nth-child(odd) .numero-paso,
    .paso-ruta:nth-child(even) .numero-paso {

        left: 1px;
        right: auto;

        top: 18px;
    }


    .icono-paso {
        width: 58px;
        height: 58px;

        font-size: 23px;
    }


    .contenido-paso {
        padding: 22px;
    }


    .contenido-paso h3 {
        font-size: 20px;
    }


    .contenido-paso p {
        font-size: 14px;
        line-height: 24px;
    }

}


/* =====================================================
   PERFIL DE AFRONTAMIENTO ACADÉMICO
===================================================== */

.perfil-estudiante {
    padding: 90px 8%;
    background: #EAF5F7;
    text-align: center;
}

.perfil-header {
    max-width: 850px;
    margin: 0 auto 45px;
}

.perfil-etiqueta {
    display: inline-block;
    padding: 8px 18px;
    background: #17375E;
    color: white;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
}

.perfil-header h2 {
    color: #17375E;
    font-size: 36px;
    margin: 15px 0 12px;
}

.perfil-header p {
    color: #666;
    font-size: 17px;
    line-height: 1.7;
}


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

.perfil-container {
    max-width: 950px;
    margin: auto;
    background: white;
    border-radius: 28px;
    padding: 45px;
    box-shadow: 0 15px 40px rgba(23, 55, 94, 0.12);
}


/* =====================================================
   INTRODUCCIÓN
===================================================== */

.perfil-introduccion {
    padding: 20px 20px 10px;
}

.intro-icono {
    font-size: 70px;
    margin-bottom: 10px;
}

.perfil-introduccion h3 {
    color: #17375E;
    font-size: 28px;
    margin: 10px 0;
}

.perfil-introduccion p {
    max-width: 700px;
    margin: 8px auto;
    color: #666;
    line-height: 1.7;
}

.intro-datos {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 30px 0;
}

.intro-datos div {
    width: 130px;
    padding: 18px;
    background: #EAF5F7;
    border-radius: 15px;
}

.intro-datos strong {
    display: block;
    color: #17375E;
    font-size: 25px;
}

.intro-datos span {
    color: #777;
    font-size: 12px;
}


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

.btn-comenzar-perfil {
    border: none;
    padding: 16px 28px;
    border-radius: 12px;
    background: #2AA79C;
    color: white;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: 0.3s;
}

.btn-comenzar-perfil:hover {
    background: #17375E;
    transform: translateY(-3px);
}


/* =====================================================
   TEST
===================================================== */

.test-perfil {
    display: none;
}


/* =====================================================
   PROGRESO
===================================================== */

.progreso-perfil {
    margin-bottom: 35px;
}

.progreso-texto {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    color: #17375E;
    font-size: 13px;
    font-weight: 700;
}

.progreso-barra {
    width: 100%;
    height: 10px;
    background: #e5eeee;
    border-radius: 20px;
    overflow: hidden;
}

.progreso-completado {
    width: 10%;
    height: 100%;
    background: #2AA79C;
    border-radius: 20px;
    transition: width 0.5s ease;
}


/* =====================================================
   PREGUNTA
===================================================== */

.pregunta-perfil {
    padding: 35px 25px;
    background: #EAF5F7;
    border-radius: 22px;
    margin-bottom: 25px;
}

.pregunta-icono {
    font-size: 50px;
    margin-bottom: 8px;
}

.pregunta-categoria {
    color: #2AA79C;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
}

.pregunta-perfil h3 {
    color: #17375E;
    font-size: 26px;
    margin: 12px 0;
}

.pregunta-perfil p {
    color: #666;
    margin: 0;
    line-height: 1.6;
}


/* =====================================================
   OPCIONES
===================================================== */

.opciones-perfil {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.respuesta-perfil {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 17px;
    border: 2px solid #e3eaec;
    border-radius: 14px;
    background: white;
    text-align: left;
    cursor: pointer;
    color: #555;
    font-size: 15px;
    transition: 0.25s;
}

.respuesta-perfil:hover {
    border-color: #2AA79C;
    background: #f5fbfb;
    transform: translateX(5px);
}

.respuesta-letra {
    min-width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #17375E;
    color: white;
    border-radius: 50%;
    font-weight: 800;
}


/* =====================================================
   FEEDBACK
===================================================== */

.feedback-perfil {
    display: none;
    align-items: flex-start;
    gap: 14px;
    margin-top: 20px;
    padding: 18px;
    border-left: 5px solid #2AA79C;
    border-radius: 10px;
    background: #EAF5F7;
    text-align: left;
}

.feedback-perfil > span {
    font-size: 25px;
}

.feedback-perfil strong {
    color: #17375E;
}

.feedback-perfil p {
    margin: 5px 0 0;
    color: #666;
    line-height: 1.5;
}


/* =====================================================
   SIGUIENTE
===================================================== */

.btn-siguiente-perfil {
    display: none;
    margin: 20px auto 0;
    padding: 14px 25px;
    border: none;
    border-radius: 11px;
    background: #17375E;
    color: white;
    font-weight: 700;
    cursor: pointer;
    transition: 0.3s;
}

.btn-siguiente-perfil:hover {
    background: #2AA79C;
}


/* =====================================================
   RESULTADO
===================================================== */

.resultado-perfil {
    display: none;
}

.resultado-icono {
    font-size: 70px;
    margin-bottom: 10px;
}

.resultado-pequeno {
    color: #2AA79C;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;
}

.resultado-perfil h3 {
    color: #17375E;
    font-size: 34px;
    margin: 10px 0;
}

.resultado-descripcion {
    max-width: 700px;
    margin: auto;
    color: #666;
    line-height: 1.7;
}


/* =====================================================
   PUNTUACIONES
===================================================== */

.perfil-puntuaciones {
    max-width: 700px;
    margin: 35px auto;
    text-align: left;
}

.puntuacion-item {
    margin-bottom: 17px;
}

.puntuacion-top {
    display: flex;
    justify-content: space-between;
    margin-bottom: 7px;
    color: #17375E;
    font-size: 13px;
    font-weight: 700;
}

.puntuacion-barra {
    height: 12px;
    background: #e5eeee;
    border-radius: 20px;
    overflow: hidden;
}

.puntuacion-barra div {
    height: 100%;
    width: 0;
    border-radius: 20px;
    transition: width 1s ease;
}


/* =====================================================
   BARRAS DE PERFILES
===================================================== */

.barra-organizador {
    background: #2AA79C;
}

.barra-improvisador {
    background: #f1c40f;
}

.barra-analitico {
    background: #3498db;
}

.barra-apoyo {
    background: #9b59b6;
}

.barra-equilibrio {
    background: #e67e22;
}


/* =====================================================
   RECOMENDACIONES
===================================================== */

.recomendaciones-perfil {
    max-width: 700px;
    margin: 30px auto;
    padding: 23px;
    background: #EAF5F7;
    border-radius: 17px;
    text-align: left;
}

.recomendaciones-perfil h4 {
    color: #17375E;
    margin-top: 0;
}

.recomendaciones-perfil h4 i {
    color: #2AA79C;
}

.recomendaciones-perfil ul {
    padding-left: 20px;
}

.recomendaciones-perfil li {
    color: #555;
    margin-bottom: 9px;
    line-height: 1.5;
}


/* =====================================================
   MENSAJE FINAL
===================================================== */

.mensaje-final-perfil {
    max-width: 700px;
    margin: 25px auto;
    padding: 18px;
    display: flex;
    gap: 12px;
    align-items: center;
    background: #f7f9fa;
    border-radius: 14px;
    text-align: left;
}

.mensaje-final-perfil span {
    font-size: 25px;
}

.mensaje-final-perfil p {
    margin: 0;
    color: #666;
    line-height: 1.5;
}


/* =====================================================
   REPETIR
===================================================== */

.btn-repetir-perfil {
    margin-top: 20px;
    padding: 13px 24px;
    border: 2px solid #17375E;
    background: white;
    color: #17375E;
    border-radius: 10px;
    font-weight: 700;
    cursor: pointer;
    transition: 0.3s;
}

.btn-repetir-perfil:hover {
    background: #17375E;
    color: white;
}


/* =====================================================
   NOTA
===================================================== */

.nota-perfil {
    margin-top: 25px;
    color: #888;
    font-size: 12px;
}


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

@media (max-width: 700px) {

    .perfil-estudiante {
        padding: 60px 5%;
    }

    .perfil-container {
        padding: 25px;
    }

    .perfil-header h2 {
        font-size: 28px;
    }

    .intro-datos {
        flex-direction: column;
        align-items: center;
    }

    .intro-datos div {
        width: 180px;
    }

    .pregunta-perfil h3 {
        font-size: 22px;
    }

    .resultado-perfil h3 {
        font-size: 28px;
    }

}