@font-face {
    font-family: "DcRuiga-SemiBold";
    src: url("../fuentes/DxRuiga-SemiBold.otf");
}

@font-face {
    font-family: "DxNacky-Light-Free-personal-use.otf";
    src: url("../fuentes/DxNacky-Light-Free-personal-use.otf");
}

@font-face {
    font-family: "DxNacky-MediumItalic--Free-personal-use.otf";
    src: url("../fuentes/DxNacky-MediumItalic--Free-personal-use.otf");
}

body{
    margin: 0%;
}

.profile-section {
    position: relative;
    min-height: 1600px;
    padding: 200px 5% 0px;
    overflow: hidden;
}

/* =========================
   FONDO ANIMADO DEL PERFIL
   ========================= */
.animated-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #706f6f; /* beige base */
    z-index: 0;
}
/* Capa principal */
.animated-bg::before,
.animated-bg::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200%;
    height: 100vh;
    transform: translate(-50%, -50%);
    background: conic-gradient(
        from 0deg,
        #fabf51, /* violeta claro */
        #e7dfd2, /* beige */
        #fcab79, /* naranja suave */
        #c3e645, /* violeta */
        #ece4cc, /* beige */
        #d6f53e, /* verde */
        #7b648a, /* naranja */
        #ecd360
    );
    filter: blur(70px);
    opacity: 0.70;
    animation: rotate-bg 14s linear infinite;
}
/* Segunda capa */
.animated-bg::after {
    width: 180%;
    height: 100%;
    background: conic-gradient(
        from 180deg,
        #e5d9c9,
        #7b648a,
        #f08b2c,
        #d6f53e,
        #f1bd78,
        #b9a7d6
    );
    filter: blur(90px);
    opacity: 0.60;
    animation: rotate-bg-reverse 18s linear infinite;
}
/* =========================
   ANIMACIÓN
   ========================= */
@keyframes rotate-bg {

    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }

}

@keyframes rotate-bg-reverse {

    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    100% {
        transform: translate(-50%, -50%) rotate(-360deg);
    }

}
/* ========================================
   COMIENZO DEL NAV
   ======================================== */
.nav {
  position: absolute;
  /* ANCHO DEL NAV */
  width: 700px;
  height: 50px;
  /* POSICIÓN DENTRO DEL HERO */
  /* bottom: 830px; */
  top: 30px;
  left: 50%;
  transform: translateX(-50%);
  /* IMPORTANTE: queda por encima de la imagen */
  z-index: 10;
}
/* ========================================
   CONTENEDOR DEL NAV
   ======================================== */
.nav-container {
  position: absolute;
  inset: 0;
  /* COLOR DEL FONDO GLASS DEL NAV */
  background: rgba(185, 185, 185, 0.6);
  /* EFECTO GLASS */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  /* PUNTAS REDONDAS DEL NAV */
  border-radius: 30px;
  /* BORDE DEL GLASS */
  border: 1px solid rgba(255, 255, 255, 0.20);
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  padding: 0.5em;
  box-sizing: border-box;
}
/* ========================================
   ENCUADRE BLANCO INTERACTIVO
   ======================================== */
.nav-outline {
  position: absolute;
  inset: 0;
  /* ANCHO DEL ENCUADRE */
  width: 700px;
  height: 50px;
  pointer-events: none;
}
/* BORDE BLANCO */
.nav-rect {
  stroke-dashoffset: 5;
  stroke-dasharray: 0 0 10 40 10 40;
  stroke: rgba(255, 255, 255, 0.90);
  transition: 0.5s;
  /* REDONDEZ DEL ENCUADRE */
  rx: 30;
  ry: 30;
}
/* ========================================
   BOTONES
   ======================================== */
.nav-btn {
  text-decoration: none;
  padding: 0.5em 1.5em;
  color: #ffffff;
  cursor: pointer;
  transition: 0.1s;
  position: relative;
  z-index: 2;
  font-family: "halyard-text", sans-serif;
  font-size: 17px;
  font-weight: 50px;
}

/* HOVER DE CADA PALABRA */
.nav-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 20px;
}

/* ========================================
   EFECTO INTERACTIVO
   ======================================== */
.nav-container:hover .nav-outline .nav-rect {
  transition: 999999s;
  stroke-dashoffset: 1;
  stroke-dasharray: 0;
}

/* PRIMER BOTÓN */
.nav-btn:nth-child(1):hover ~ svg .nav-rect {
  stroke-dashoffset: 0;
  stroke-dasharray: 0 2 8 73.3 8 10.7;
}

/* SEGUNDO BOTÓN */
.nav-btn:nth-child(2):hover ~ svg .nav-rect {
  stroke-dashoffset: 0;
  stroke-dasharray: 0 12.6 9.5 49.3 9.5 31.6;
}

/* TERCER BOTÓN */
.nav-btn:nth-child(3):hover ~ svg .nav-rect {
  stroke-dashoffset: 0;
  stroke-dasharray: 0 24.5 8.5 27.5 8.5 55.5;
}

/* CUARTO BOTÓN */
.nav-btn:nth-child(4):hover ~ svg .nav-rect {
  stroke-dashoffset: 0;
  stroke-dasharray: 0 34.7 6.9 10.2 6.9 76;
}

/* EFECTO GENERAL */
.nav-btn:hover ~ .nav-outline .nav-rect {
  stroke-dashoffset: 0;
  stroke-dasharray: 0 0 10 40 10 40;
  transition: 0.5s !important;
}
/* ========================================
   FIN NAV 
   ======================================== */


/* =====================================================
   CARD PRINCIPAL
   ===================================================== */
.profile-card {
    position:relative;
    z-index: 2;
   /* bottom: 720px; */ 
    width: 100%;
    max-width: 1100px;
    min-height: 440px; 
    margin: 0 auto;
    /* GRID */
    display: grid;
    grid-template-columns:
        0.8fr
        1.2fr;
    gap: 50px;
    /* ESPACIADO INTERNO */
    padding: 45px;
    /* GLASS */
    background:
        rgba(255, 255, 255, 0.22);
    backdrop-filter:
        blur(15px);
    -webkit-backdrop-filter:
        blur(15px);
    /* BORDE */
    border:
        1px solid
        rgba(255, 255, 255, 0.55);
    /* ESQUINAS */
    border-radius: 20px;
    /* SOMBRA MUY SUTIL */
    box-shadow:
        0 10px 40px
        rgba(0, 0, 0, 0.08);
}
/* =====================================================
   FOTO
   ===================================================== */
.profile-photo {
    width: 92%;
    min-height: 410px;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* IMAGEN */
.profile-photo img {
    width: 97%;
    height: 410px;
    object-fit: cover;
    /* BLANCO Y NEGRO */
    filter:
        grayscale(100%);
    /* ESQUINAS */
    border-radius: 12px;
    /* BORDE SUTIL */
    border:
        1px solid
        rgba(255, 255, 255, 0.5);
}
/* =====================================================
   COLUMNA DERECHA
   ==================================================== */
.profile-text {
    display: grid;
    grid-template-rows:
        auto
        1fr;
    gap: 30px;
}
/* =====================================================
   NOMBRE
   ===================================================== */
.profile-name {
    border-bottom:
        1px solid
        rgba(0, 0, 0, 0.25);
    padding-bottom: 25px;
}
/* NOMBRE ------------------------------------------------------------------------------------------------------> */   
.profile-name h1 {
    margin: 0;
    font-family: "DxNacky-Light-Free-personal-use.otf";
    font-size:85px;
    font-style: italic;
    font-weight:normal; 
    line-height: 0.8;
    color: #4d4b4b;
}
/* SEGUNDO NOMBRE */
.profile-name span {
    display: block;
    font-family: "DxNacky-Light-Free-personal-use.otf";
    font-style: normal;
    font-size: 100px;
    /* font-size: 0.8em;*/
}
/* =====================================================
   DESCRIPCIÓN
   ===================================================== */
.profile-description {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
}
/* TEXTO */
.profile-description p {
    max-width: 600px;
    margin: 0;
    font-family: "halyard-text", sans-serif;
    font-size: 17px;
    line-height: 1.3;
    color: #252525;
}
/* =====================================================
   BOTÓN BEHANCE
   ===================================================== */
.behance-button {
    display: inline-block;
    padding:
        12px
        22px;
    color: #181818;
    text-decoration: none;
    font-family: "halyard-text", sans-serif;
    font-size: 17px;
    letter-spacing: 0.5px;
    border:
        1px solid
        #3b3939;
    border-radius: 30px;
    transition:
        0.3s;
}
/* HOVER DEL BOTÓN */
.behance-button:hover {
    background: #f5ae16;
    color: rgb(26, 24, 24);
}

/* ------------------------------------------------- FIN CARD PERFIL --------------- */ 

/* =========================================================
   CARDS ACADÉMICOS
   MATERIAS APROBADAS + ACTUALMENTE CURSANDO
   ========================================================= */
/* =========================================================
   CONTENEDOR DE LOS DOS CARDS
   Los coloca uno al lado del otro.
   El primer card es más ancho que el segundo.
   ========================================================= */

.academic-cards {
    display: grid;
    /* 
       Primer card: más ancho
       Segundo card: más angosto
    */
    grid-template-columns: 1.8fr 1fr;
    /* Espacio entre los dos cards */
    gap: 70px;
     /*
       Mismo ancho total que el card principal
       de Belén.
    */
    width: 100%;
    max-width: 1200px;
    /* Centra los dos cards */
    margin: 50px auto 0;
}

/* =========================================================
   ESTILO GENERAL DE LOS DOS CARDS
   Efecto glass / transparente
   ========================================================= */
.academic-card {
    position: relative;
    /* Quedan por encima del fondo animado */
    z-index: 2;
    /* Fondo transparente */
    background: rgba(255, 255, 255, 0.22);
    /* Efecto glass */
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    /* Borde blanco sutil */
    border: 1px solid rgba(255, 255, 255, 0.55);
    /* Esquinas redondeadas */
    border-radius: 20px;
    /* Sombra */
    box-shadow:
        0 10px 40px rgba(0, 0, 0, 0.08);
    /* Espacio interno */
    padding: 35px;
    /* Altura mínima */
    min-height: 350px;
}

/* =========================================================
   TÍTULOS DE LOS CARDS
   ========================================================= */
.academic-card h2 {
    margin: 0 0 30px 0;
    font-family: "DxNacky-Light-Free-personal-use.otf";
    letter-spacing: 2px;
    font-style: normal;
    font-size: 35px;
    color: #4d4b4b;
    /* Espacio debajo del título */
    padding-bottom: 15px;
    /* Línea separadora */
    border-bottom:
        1px solid
        rgba(22, 22, 22, 0.418);
}
/* =========================================================
   MATERIAS APROBADAS
   Divide las materias en dos columnas.
   ========================================================= */
.subjects-grid {
    display: grid;
    /* Dos columnas */
    grid-template-columns: 1fr 1fr;
    /* Espacio entre columnas */
    gap: 10px;
}
/* =========================================================
   CADA COLUMNA DE MATERIAS APROBADAS
   ========================================================= */
.subject-column {
    display: flex;
    flex-direction: column;
    /* Separación entre materias */
    gap: 9px;
}
/* =========================================================
   TEXTO DE LAS MATERIAS APROBADAS
   ========================================================= */
.subject-column p {
    margin: 0;
    font-family: "halyard-text", sans-serif;
    font-size: 14px;
    line-height: 1.4;
    color: #252525;
}
/* =========================================================
   CBC / ELECTIVA / OPTATIVA
   ========================================================= */
.subject-column strong {
    font-weight: 600;
}
/* =========================================================
   MATERIAS ACTUALMENTE CURSANDO
   ========================================================= */
.current-subjects {
    display: flex;
    flex-direction: column;
    /* Separación entre cada materia */
    gap: 22px;
}
/* =========================================================
   TEXTO DEL CARD "ACTUALMENTE CURSANDO"
   ========================================================= */
.current-subjects p {
    margin: 0;
    font-family: "halyard-text", sans-serif;
    font-size: 15px;
    line-height: 1.5;
    color: #252525;
}
/* =========================================================
   TEXTO EN NEGRITA DEL CARD ACTUALMENTE CURSANDO
   ========================================================= */
.current-subjects strong {
    font-weight: 600;
}
/* =========================================================
   RESPONSIVE
   Cuando la pantalla es más chica,
   los dos cards pasan a estar uno debajo del otro.
   ========================================================= */
@media (max-width: 800px) {
    .academic-cards {
        /* Un card debajo del otro */
        grid-template-columns: 1fr;
    }
    .subjects-grid {
        /* Las materias aprobadas pasan a una sola columna */
        grid-template-columns: 1fr;
    }
}
/* =========================================================
   RESPONSIVE PARA CELULARES PEQUEÑOS
   ========================================================= */
@media (max-width: 500px) {
    .academic-card {
        /* Menos espacio interno en celular */
        padding: 25px;
    }
    .academic-card h2 {
        font-size: 25px;
    }
    .subject-column p,
    .current-subjects p {
        font-size: 13px;
    }
}



footer{
    position: relative;
    background-color: rgb(8, 8, 8);
    height: 200px;
    width: 100%;
}
.div-footer{ 
    display: flex;
    flex-direction: row;
    height: 200px;
    gap: 200px;
    align-items: center;
    justify-content:space-evenly;
}
footer h2{
  font-family: "DcRuiga-SemiBold";
  color: rgb(248, 243, 236);
  font-size: 20px;
}
footer p{
  font-family: "halyard-text", sans-serif;
  color: antiquewhite;
  font-width: 20px;
  font-size: 13px;
}
.texto-final{
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    position: relative;
    background-color: rgb(8, 8, 8);
    height: 60px;
    width: 100%;
}
.texto-final p{
  font-family: "halyard-text", sans-serif;
  color: antiquewhite;
  font-width: 15px;
  font-size: 10px;
}


/* =================================================
   INTEGRANTE DEL EQUIPO
   ================================================= */
.team-member {
    width: 100%;
    max-width: 1200px;
    margin: 0px auto 0;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 30px;
    align-items: end;
    position: relative;
    z-index: 2;
}
/* =========================
   MANO + MOCKUP
   ========================= */
.team-image {
    width: 110%;
    height: 710px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.team-image img {
    height: 710px;
    width: auto;
    max-width: none;
    display: block;
    object-fit: contain;
}
/* =========================
   CARD ANDREA
   ========================= */
.team-card {
    background: rgba(255, 255, 255, 0.20);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    padding: 40px;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-bottom: 370px;
}
/* =========================
   TITULO
   ========================= */
.team-card h2 {
    margin: 0 0 20px 0;
    font-family: "DxNacky-Light-Free-personal-use.otf";
    font-size: 28px;
    font-weight: bold;
    line-height: 1;
    letter-spacing: 2.3px;
    color: #4d4b4b;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(22, 22, 22, 0.35);
}
/* =========================
   NOMBRE
   ========================= */
.team-name {
    margin: 0 0 35px 0;
    font-family: "halyard-text", sans-serif;
    font-size: 21px;
    color: #252525;
}
/* =========================
   BOTÓN
   ========================= */
.team-button {
    display: inline-block;
    width: fit-content;
    padding: 10px 25px;
    color: #181818;
    text-decoration: none;
    font-family: "halyard-text", sans-serif;
    font-size: 14px;
    letter-spacing: 0.7px;
    border: 1px solid #181818;
    border-radius: 30px;
    transition: 0.3s ease;
}
.team-button:hover {
    background: #ee8a08;
    color: rgb(12, 12, 12);
    transform: translateY(-2px);
}