* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --margen-mobile: 16px;    /* aire lateral en celulares y tablets verticales */
}

html,
body {
    width: 100%;
    height: 100%;
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: #040404;
    color: #D9D9D9;

    font-family: "Google Sans Flex", Arial, sans-serif;
    font-optical-sizing: auto;

    overflow-x: hidden;
}


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

header {
    position: fixed;

    top: 27px;
    left: 50px;
    right: 50px;

    font-size: 12px;
    font-weight: 300;
    line-height: 1;

    z-index: 100;      /* por encima del contenido que scrollea abajo */
}

/* Fade a negro detrás del header y del footer: aparece recién cuando se
   scrollea (clase "scrolleado" en el body, la pone el JS), así la primera
   pantalla queda igual que antes. */

header::before,
footer::before {
    content: "";
    position: fixed;
    left: 0;
    right: 0;

    opacity: 0;
    transition: opacity 0.3s ease;

    pointer-events: none;
    z-index: -1;
}

header::before {
    top: 0;
    height: 110px;
    background: linear-gradient(to bottom, rgba(4, 4, 4, 0.92) 0%, rgba(4, 4, 4, 0) 100%);
}

footer::before {
    bottom: 0;
    height: 110px;
    background: linear-gradient(to top, rgba(4, 4, 4, 0.92) 0%, rgba(4, 4, 4, 0) 100%);
}

body.scrolleado header::before,
body.scrolleado footer::before {
    opacity: 1;
}

.equipo {
    position: absolute;
    left: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #D9D9D9;
    text-decoration: none;
}

.nombre-header {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);

    color: #D9D9D9;
    text-decoration: none;
}

/* Los dos desplegables (PROYECTO e INTEGRANTES) van juntos a la derecha */
.header-menus {
    position: absolute;
    right: 0;
    top: 0;

    display: flex;
    align-items: flex-start;
    gap: 62px;
}

/* cada uno es la referencia para posicionar su propia lista desplegada */
.integrantes-wrapper {
    position: relative;
}

/* elementos que solo existen en el header de celular */
.hamburguesa,
.menu-equipo-movil,
.menu-catedra-movil {
    display: none;
}

.integrantes {
    background: none;
    border: none;
    font: inherit;
    color: #D9D9D9;
    display: flex;
    align-items: center;
    gap: 10px;
}

.integrantes-lista-wrapper {
    position: absolute;
    top: 100%;
    right: 0;
    width: 260px;

    display: grid;
    grid-template-rows: 0fr;   
    transition: grid-template-rows 0.35s ease;
}

.integrantes-lista-wrapper.abierto {
    grid-template-rows: 1fr;  
}

.integrantes-lista {
    overflow: hidden;
    list-style: none;

    /* fondo sólido: sin esto el contenido de abajo se ve a través del menú.
       El margen negativo + padding lo ensanchan 8px a cada lado sin mover el texto */
    margin: 0 -8px;
    padding: 12px 8px 0 8px;

    /* Cerrado: transparente. El padding de arriba no se puede achicar a 0
       (la fila 0fr no lo comprime), así que con fondo se vería una franja negra.
       Al cerrar, el fondo se quita recién cuando termina la animación (0.35s). */
    background-color: transparent;
    transition: background-color 0s linear 0.35s;
}

.integrantes-lista-wrapper.abierto .integrantes-lista {
    background-color: #040404;
    transition-delay: 0s;
}

.integrantes-lista li {
    border-bottom: 1px solid #333;
}

.integrantes-lista li:last-child {
    border-bottom: none;
}

.integrantes-lista a {
    display: flex;
    justify-content: space-between;
    padding: 14px 4px;
    color: #D9D9D9;
    text-decoration: none;
    font-size: 12px;

    opacity: 0.7;
    transition: opacity 0.25s ease;
}

.integrantes-lista a:hover {
    opacity: 1;
}

/* =========================
   ANIMACION ENTRADA ESCALONADA DE CADA INTEGRANTE
   ========================= */

.integrantes-lista li {
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.integrantes-lista-wrapper.abierto li {
    opacity: 1;
    transform: translateY(0);
}

.integrantes-lista-wrapper.abierto li:nth-child(1) { transition-delay: 0.05s; }
.integrantes-lista-wrapper.abierto li:nth-child(2) { transition-delay: 0.12s; }
.integrantes-lista-wrapper.abierto li:nth-child(3) { transition-delay: 0.19s; }

/* =========================
   FLECHAS DEL HEADER
   ========================= */

.chevron {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-right: 1.5px solid #D9D9D9;
    border-bottom: 1.5px solid #D9D9D9;
}

.chevron-izq {
    transform: rotate(135deg);  
}

.chevron-der {
    transform: rotate(-45deg); 
}

/* =========================
   CONTROLADORES DE OPACIDAD EN EL HEADER
   ========================= */

.equipo,
.nombre-header,
.integrantes {
    opacity: 0.7;
    transition: opacity 0.25s ease;
}

.equipo:hover,
.nombre-header:hover,
.integrantes:hover {
    opacity: 1;
}

/* =========================
   FLECHA QUE ROTA EN LA APERTURA DE INTEGRANTES
   ========================= */

.chevron-abajo {
    transform: rotate(45deg);
    transition: transform 0.001s ease;
    position: relative;
    top: -4px;   
}

.integrantes.abierto .chevron-abajo {
    transform: rotate(225deg);
    top: 1px;
}

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

main {
    position: relative;

    width: 100vw;
    height: 100vh;
    height: 100svh;     /* en celulares: alto visible sin contar la barra del navegador */

    pointer-events: none;
}


/* =========================
   HOLA MUNDO
   ========================= */

.hola-mundo {
    position: absolute;
    left: 22vw;
    top: 29.5vh;

    display: flex;
    flex-direction: column;

    font-size: clamp(60px, 5.7vw, 88px);
    font-weight: 300;
    line-height: 0.86;
    letter-spacing: -4px;

    transform: translateY(-50%) translate(var(--move-x, 0px), var(--move-y, 0px));
}

.hola-mundo span:nth-child(1) {
    margin-left: 11.2vw;
}


/* =========================
   DISCIPLINAS
   ========================= */

.disciplinas {
    position: absolute;
    inset: 0;
    top: 5vh;

    pointer-events: none;
}

.disciplina {
    position: absolute;

    color: #555555;
    text-decoration: none;

    font-size: 17px;

    transition: color 0.25s ease;

    transform: translate(
        var(--move-x, 0px),
        var(--move-y, 0px)
    );

    pointer-events: auto;
}


/* Hover */

.disciplina:hover {
    color: #4B69FF;
}


/* Posiciones */

.diseño {
    left: 58.5vw;
    top: 17vh;
}

.musica {
    left: 74vw;
    top: 23vh;
}

.cine {
    left: 88vw;
    top: 43vh;
}

.animacion {
    left: 10vw;
    top: 43vh;
}

.motion {
    left: 22vw;
    top: 62vh;
}

.visuales {
    left: 35vw;
    top: 68vh;
}



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

.nombre-grande {
    position: absolute;
    left: 51.5vw;
    top: 68vh;

    display: flex;
    flex-direction: column;

    font-size: clamp(60px, 5.7vw, 88px);
    font-weight: 300;
    line-height: 0.82;
    letter-spacing: -5px;
    
    transform: translateY(-50%) translate(var(--move-x, 0px), var(--move-y, 0px));
}

.nombre-grande span:nth-child(1) {
    margin-left: 17.4vw;
}


/* =========================
   FOOTER
   ========================= */

footer {
    position: fixed;
    bottom: 38px;
    left: 50px;
    right: 50px;
    font-size: 13px;
    font-weight: 200;

    z-index: 100;
}

.creditos {
    position: absolute;
    left: 0;
    opacity: 0.4;

    /* ahora es un link a la página de la cátedra: se ve igual que antes, sin subrayado */
    color: inherit;
    text-decoration: none;
    transition: opacity 0.25s ease;
}

@media (hover: hover) {
    .creditos:hover {
        opacity: 1;
    }
}

.año {
    position: absolute;
    right: 0;
    opacity: 0.4;
}


/* =========================
   FLECHA
   ========================= */

.flecha {
    position: absolute;

    left: 50%;
    transform: translateX(-50%);

    width: 9px;
    height: 9px;

    border-right: 2px solid #4B69FF;
    border-bottom: 2px solid #4B69FF;

    transform: translateX(-50%) rotate(45deg);

    /* pista de scroll: rebote suave + se esconde al bajar */
    animation: pistaScroll 1.8s ease-in-out infinite;
    transition: opacity 0.4s ease;
}

/* zona de click más grande que la flecha (9px es muy poco para clickear) */
.flecha::after {
    content: "";
    position: absolute;
    inset: -16px;
}

.flecha.oculta {
    opacity: 0;
    pointer-events: none;
}

/* un solo transform por frame: translateX(-50%) y rotate(45deg) se repiten */
@keyframes pistaScroll {
    0%, 100% { transform: translateX(-50%) translateY(0) rotate(45deg); }
    50%      { transform: translateX(-50%) translateY(5px) rotate(45deg); }
}

@media (prefers-reduced-motion: reduce) {
    .flecha {
        animation: none;
    }
}




/* ANIMACIONES DE ENTRADA */

    /* ANIMACION ENTRADA HOLA MUNDO x TOMAS CALLEGARO */

    @property --entrada-y {
        syntax: '<length>';
        inherits: false;
        initial-value: 20px;
    }

    .hola-mundo,
    .nombre-grande {
        opacity: 0;

        transform:
            translateY(-50%)
            translate(var(--move-x, 0px), var(--move-y, 0px))
            translateY(var(--entrada-y, 0px));

        animation: entradaTitulo 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }

    .hola-mundo {
    animation-delay: 0.1s;
    }

    .nombre-grande {
    animation-delay: 0.2s;
    }

    @keyframes entradaTitulo {
        from {
            opacity: 0;
            --entrada-y: 20px;
        }
        to {
            opacity: 1;
            --entrada-y: 0px;
        }
    }

    /* ANIMACION ENTRADA DISCIPLINAS */

    .disciplina {
    /* ...tus propiedades existentes... */

    opacity: 0;
    animation: entradaDisciplinaFoco 0.2s ease-out forwards;
    }

    .diseño     { animation-delay: 0.1s; }
    .musica     { animation-delay: 0.2s; }
    .cine       { animation-delay: 0.3s; }
    .visuales  { animation-delay: 0.15s; }
    .motion     { animation-delay: 0.25s; }
    .animacion   { animation-delay: 0.35s; }

    @keyframes entradaDisciplinaFoco {
        0%   { opacity: 0; }
        20%   { opacity: 0.8; }
        40%  { opacity: 0.1; }
        60%  { opacity: 1; }
        80%  { opacity: 0.3; }
        100% { opacity: 1; }
    }

    /* ANIMACION ENTRADA FOOTER Y HEADER */

    .equipo,
    .nombre-header,
    .integrantes,
    .creditos,
    .año {
        animation: entradaHeaderFooter 0.8s ease-out forwards;
    }

    @keyframes entradaHeaderFooter {
        from { opacity: 0; }
    }





/* =========================
   FIX PANTALLAS DE DISTINTO ALTO
   ========================= */
   
@media (max-height: 800px) and (min-width: 701px) {
    .disciplinas {
        top: 0vh;      
    }

    .nombre-grande {
        top: 62vh;     
    }
}


/* =========================
   MOBILE
   ========================= */

@media (max-width: 700px), (max-width: 1024px) and (orientation: portrait) {

    /* HEADER */

    header {
        top: 19px;
        left: var(--margen-mobile);
        right: var(--margen-mobile);

        font-size: 14px;
    }


    /* HOLA MUNDO
       font-size: 69px en un celular de 375px; más chico en 320px (para que
       CALLEGARO no se corte) y más grande en tablets, con tope.
       Cada "top" va dos veces: vh de respaldo y svh (alto visible real). */

    .hola-mundo {
        left: 50%;
        top: 18.5vh;
        top: 18.5svh;

        transform:
            translateX(-50%)
            translateY(-50%)
            translate(var(--move-x, 0px), var(--move-y, 0px))
            translateY(var(--entrada-y, 0px));

        width: 100%;
        text-align: center;

        font-size: clamp(54px, 18.4vw, 120px);
        line-height: 0.84;
        letter-spacing: -4px;
    }

    .hola-mundo span:nth-child(1) {
        margin-left: 0;
    }


    /* DISCIPLINAS */

    .disciplina {
        font-size: clamp(16px, 2.4vw, 22px);
    }

    .disciplinas {
        top: 2vh;
        top: 2svh;
    }


    .diseño {
        left: 56%;
        top: 28.5vh;
        top: 28.5svh;
    }

    .musica {
        left: 39%;
        top: 34.5vh;
        top: 34.5svh;
    }

    .cine {
        left: 69%;
        top: 45vh;
        top: 45svh;
    }

    .animacion {
        left: 25%;
        top: 52vh;
        top: 52svh;
    }

    .motion {
        left: 62%;
        top: 61vh;
        top: 61svh;
    }

    .visuales {
        left: 45%;
        top: 69vh;
        top: 69svh;
    }


    /* NOMBRE */

    .nombre-grande {
        left: 50%;
        top: 84vh;
        top: 84svh;

        transform:
            translateX(-50%)
            translateY(-50%)
            translate(var(--move-x, 0px), var(--move-y, 0px))
            translateY(var(--entrada-y, 0px));

        width: 100%;

        text-align: center;

        font-size: clamp(54px, 18.4vw, 120px);
        line-height: 0.82;
        letter-spacing: -4px;
    }

    .nombre-grande span:nth-child(1) {
        margin-left: 0;
    }


    /* FOOTER */

    footer {
        bottom: 30px;
        left: 0;
        right: 0;
    }

    .creditos,
    .año {
        display: none;
    }


    /* FLECHA */

    .flecha {
        left: 50%;
    }

    .lineas-conexion {
        display: none;
    }

}


/* ELIPSE V1 */

.orbita {
    position: absolute;

    left: 10vw;
    top: 10vh;

    width: 80vw;
    height: 75vh;

    border: 1px solid transparent;

    border-radius: 50%;
}


/* CUADRADO COLOR V1 */

.cuadrado-wrapper {
    position: absolute;
    left: 50%;
    top: 50%;

    width: 90px;
    height: 90px;

    --escala: 1;
    transform: translate(-50%, -50%) scale(var(--escala));
    transition: transform 0.2s ease;
    
    pointer-events: auto;
    z-index: 2;
}

.cuadrado-wrapper.escala-chica {
    --escala: 0.8;
}

.cuadrado-wrapper:hover {
    --escala: 1.2;
}

.cuadrado-color {
    position: relative;   /* para que el overlay se posicione respecto a él */

    width: 100%;
    height: 100%;

    background-image: linear-gradient(
        to top,
        #4B69FF 0%,
        #808080 25%,
        #D946EF 50%,
        #EF4444 75%,
        #4B69FF 100%
    );
    background-repeat: repeat-y;
    background-size: 100% 400%;

    animation: cicloColores 3s linear infinite;

    transform: rotate(var(--rotacion, 0deg));
}

.cuadrado-overlay {
    position: absolute;
    inset: 0;

    background-color: #4B69FF;
    opacity: 0;
    transition: opacity 0.2s ease;

    pointer-events: none;
}

.cuadrado-wrapper.color-forzado .cuadrado-overlay {
    opacity: 1;
}

.cuadrado-wrapper.color-forzado .cuadrado-color {
    animation-play-state: paused;
}

@keyframes cicloColores {
    from { background-position: 0 0; }
    to   { background-position: 0 360px; }  /* 4 × 100px (la altura del cuadrado) */
}

.cuadrado-entrada {
    width: 100%;
    height: 100%;

    transform: scale(0);
    animation: entradaCuadrado 0.5s ease-out forwards;
}

@keyframes entradaCuadrado {
    to { transform: scale(1); }
}


/* CURSOR V1 */

* {
    cursor: none;
}

.cursor-punto {
    position: fixed;
    top: 0;
    left: 0;

    width: 5px;
    height: 5px;
    border-radius: 50%;

    background-color: #FFFFFF;
    mix-blend-mode: difference;

    pointer-events: none;
    z-index: 9999;
}

/* LINEAS A DISCIPLINAS */


    .lineas-conexion {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;

    pointer-events: none;
    z-index: 1;
}

.linea-conexion,
.lineas-conexion line {
    stroke: #313131;
    stroke-width: 1;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.lineas-conexion line.activa {
    opacity: 1;
}




/* =========================
   AVISO ACADÉMICO
   ========================= */

.aviso-academico {
    position: relative;
    padding: 50px 6vw;

    display: flex;
    gap: 60px;

    border-top: 1px solid #2A2A2A;
    border-bottom: 1px solid #2A2A2A;
}

.aviso-label {
    flex-shrink: 0;
    width: 180px;

    font-size: 12px;
    letter-spacing: 1px;
    color: #777777;
}

.aviso-texto {
    font-size: 13px;
    line-height: 1.6;
    color: #777777;
}


/* =========================
   DATOS ACADÉMICOS
   ========================= */

.datos-academicos {
    position: relative;
    padding: 110px 6vw 200px;
}

.datos-label-top {
    display: block;
    font-size: 13px;
    letter-spacing: 1px;
    color: #888888;
    margin-bottom: 60px;
}

.datos-titulos {
    display: flex;
    justify-content: space-between;
    margin-bottom: 50px;
}

.datos-titulos h3 {
    font-size: clamp(50px, 6vw, 90px);
    font-weight: 300;
    letter-spacing: -2px;
}

.datos-grid {
    border-top: 1px solid #2A2A2A;
    padding-top: 50px;

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 40px;
    row-gap: 50px;
}

.datos-bloque {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.datos-subtitulo {
    font-weight: 400;
    font-size: 12px;
    letter-spacing: 1px;
    color: #888888;
    margin-bottom: 6px;
}

.dato-linea {
    font-size: 14px;
    color: #D9D9D9;
}

.dato-key {
    font-weight: 250;
    display: inline-block;
    min-width: 55px;
}

.dato-sep {
    margin: 0 10px;
    color: #555555;
}

.dato-destacado {
    font-weight: 300;
    font-size: 14px;
    margin-top: 4px;
}

.dato-fila {
    display: flex;
    gap: 20px;
    font-size: 14px;
}

.dato-label {
    width: 110px;
    flex-shrink: 0;
    color: #B5B5B5;
}

.dato-valor {
    font-weight: 700;
}


/* =========================
   ANIMACIÓN DE SCROLL
   ========================= */

.reveal {
    opacity: 0;
    transform: translateY(30px);

    transition:
        opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1),
        transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: 0.3s;
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
    transition-delay: var(--delay, 0s);
}

.reveal.saliendo {
    opacity: 0;
    transform: translateY(-30px);

    transition:
        opacity 0.4s ease,
        transform 0.4s ease;
    transition-delay: 0s;
}

@media (prefers-reduced-motion: reduce) {
    .reveal,
    .reveal.saliendo {
        opacity: 1;
        transform: none;
        transition: none;
    }
}


/* =========================
   MOBILE: AVISO + DATOS ACADÉMICOS
   (va al final para ganar sobre las reglas de escritorio de arriba)
   ========================= */

@media (max-width: 700px), (max-width: 1024px) and (orientation: portrait) {

    .aviso-academico {
        flex-direction: column;
        gap: 20px;
        padding: 40px var(--margen-mobile);
    }

    .aviso-label {
        width: auto;
    }

    .datos-academicos {
        padding: 70px var(--margen-mobile) 120px;
    }

    .datos-label-top {
        margin-bottom: 40px;
    }

    .datos-titulos {
        margin-bottom: 36px;
    }

    .datos-titulos h3 {
        font-size: min(12vw, 90px);
    }

    .datos-grid {
        grid-template-columns: 1fr;
        row-gap: 36px;
        padding-top: 36px;
    }

    .dato-label {
        width: 100px;
    }
}


/* =========================
   MOBILE CHICO: HEADER Y DISCIPLINAS
   (a 14px los tres textos del header no entran en menos de ~400px)
   ========================= */

@media (max-width: 480px) {

    header {
        font-size: 12px;
    }

    .animacion {
        left: 14%;
    }
}

@media (max-width: 360px) {

    .animacion {
        left: 9%;      /* en 320px tocaba el borde del cuadrado */
    }
}

/* celulares bajos (iPhone SE/8 y similares): "visuales" sube un poco
   para no quedar pegada a "TOMÁS" */
@media (max-height: 700px) and (orientation: portrait) {

    .visuales {
        top: 66vh;
        top: 66svh;
    }
}


/* =========================
   DISPOSITIVOS TÁCTILES (sin mouse)
   Sin cursor propio y sin hovers "pegados" después de tocar.
   La gravedad y la brújula se apagan desde el JS.
   ========================= */

@media (hover: none) {

    * {
        cursor: auto;
    }

    .cursor-punto {
        display: none;
    }

    .disciplina:hover {
        color: #555555;
    }

    .cuadrado-wrapper:hover {
        --escala: 1;
    }

    .equipo:hover,
    .nombre-header:hover,
    .integrantes:hover {
        opacity: 0.7;
    }
}


/* =========================
   ZONAS TÁCTILES: área invisible más grande alrededor de los links chicos
   (no cambia cómo se ven, solo dónde se puede tocar)
   ========================= */

@media (pointer: coarse) {

    .integrantes {
        position: relative;
    }

    .equipo::after,
    .nombre-header::after,
    .integrantes::after,
    .disciplina::after {
        content: "";
        position: absolute;
        inset: -14px -8px;
    }
}


/* =========================
   MOVIMIENTO REDUCIDO: todo aparece quieto, sin entradas ni loops
   ========================= */

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

    .hola-mundo,
    .nombre-grande,
    .disciplina {
        animation: none;
        opacity: 1;
        --entrada-y: 0px;
    }

    .cuadrado-entrada {
        animation: none;
        transform: scale(1);
    }

    .cuadrado-color {
        animation: none;
    }
}


/* =========================
   SOBRE MÍ (parte 1 del carrusel "Sobre mí / Foja académica")
   Medidas sacadas del diseño de 1920x1080 y pasadas a vw/vh para que escale.
   ========================= */

.sobre-mi {
    position: relative;

    min-height: 100vh;
    min-height: 100svh;

    /* la fila de contenido va a 55% de la altura, como en el diseño */
    display: flex;
    flex-direction: column;
}

/* Pestañas SOBRE MÍ / FOJA ACADÉMICA */

/* centradas con left/right + margin (sin transform: .reveal ya usa transform) */
.sobre-mi-tabs {
    position: absolute;
    top: 20.4vh;
    left: 0;
    right: 0;
    margin-top: -0.5em;

    display: flex;
    justify-content: center;
    gap: 48px;
    white-space: nowrap;

    font-size: 12px;       /* mismo tamaño que los botones del header */
    line-height: 1;

    z-index: 5;            /* por encima del carrusel, que ocupa toda la sección */
}

.sobre-mi-tab {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    font-weight: 300;
    letter-spacing: 0.2px;
    color: #6E6E6E;

    transition: color 0.25s ease;
}

.sobre-mi-tab.activa {
    color: #D9D9D9;
}

/* Foto + texto */

.sobre-mi-contenido {
    position: absolute;
    top: 55vh;
    left: 0;
    right: 0;
    transform: translateY(-50%);

    display: grid;
    /* ~88% del diseño original y centrado (antes: 37.1vw / 31.6vw / 6.04vw) */
    grid-template-columns: 32.6vw 27.8vw;
    column-gap: 5.3vw;
    justify-content: center;
    align-items: center;
}

/* en el diseño el bloque de texto queda ~13px más arriba que el centro de la foto */
.sobre-mi-texto {
    padding-bottom: 1.35vw;
}

.sobre-mi-foto img {
    display: block;
    width: 100%;
    aspect-ratio: 843 / 515;      /* proporción real de la foto: no se deforma */
    object-fit: cover;

    border-radius: 999px;         /* extremos semicirculares, como en el diseño */
}

.sobre-mi-titulo {
    font-size: clamp(18px, 1.47vw, 28px);
    font-weight: 300;
    line-height: 1.25;
    color: #D9D9D9;

    margin-bottom: 1.6vw;
}

.sobre-mi-texto p {
    position: relative;           /* las palabras (JS) miden su posición respecto del párrafo */
    font-size: clamp(14px, 1.01vw, 19.5px);
    font-weight: 300;
    line-height: 1.23;
    color: #B5B5B5;
}

/* cada palabra la envuelve el JS para poder moverla; inline-block para que acepte transform */
.palabra {
    display: inline-block;
}

.sobre-mi-texto p + p {
    margin-top: 1.23em;           /* una línea en blanco entre párrafos */
}

.sobre-mi-texto strong {
    font-weight: 600;
    color: #D9D9D9;
}


/* Sobre mí en celulares y tablets verticales: todo en una columna */

@media (max-width: 700px), (max-width: 1024px) and (orientation: portrait) {

    .sobre-mi {
        min-height: 0;
        padding: 110px var(--margen-mobile) 110px;
    }

    .sobre-mi-tabs {
        position: static;
        margin-top: 0;

        gap: 32px;
        margin-bottom: 36px;
        font-size: 14px;
    }

    .sobre-mi-contenido {
        position: static;
        transform: none;

        grid-template-columns: 1fr;
        row-gap: 32px;
        padding-left: 0;
        width: 100%;

        max-width: 640px;
        margin: 0 auto;
    }

    .sobre-mi-texto {
        padding-bottom: 0;
    }

    .sobre-mi-titulo {
        font-size: clamp(22px, 6vw, 30px);
        margin-bottom: 20px;
    }

    .sobre-mi-texto p {
        font-size: 16px;
    }
}


/* =========================
   CARRUSEL: SOBRE MÍ  <->  FOJA ACADÉMICA
   Dos paneles lado a lado dentro de una "pista" que se desliza.
   La pista se mueve con un solo translateX según data-panel del <section>.
   ========================= */

.sobre-mi-carrusel {
    position: absolute;
    inset: 0;
    overflow: hidden;          /* lo que queda fuera de la pantalla no genera scroll lateral */
}

.sobre-mi-pista {
    display: flex;
    height: 100%;

    transition: transform 0.9s cubic-bezier(0.77, 0, 0.18, 1);
}

.sobre-mi[data-panel="1"] .sobre-mi-pista {
    transform: translateX(-100%);
}

.sobre-mi-panel {
    position: relative;
    flex: 0 0 100%;
    min-width: 0;
}

@media (hover: hover) {
    .sobre-mi-tab:hover {
        color: #D9D9D9;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sobre-mi-pista {
        transition: none;
    }
}


/* Flechas laterales: misma idea que la flecha azul del hero (rebote suave),
   pero horizontales. El rebote lleva el transform completo en cada frame. */

.sobre-mi-flecha {
    position: absolute;
    top: 53.2vh;
    width: 44px;
    height: 44px;
    margin-top: -22px;

    background: none;
    border: none;

    display: grid;
    place-items: center;
    z-index: 3;
}

.sobre-mi-flecha.der {
    right: calc(4.17vw - 22px);
}

.sobre-mi-flecha.izq {
    left: calc(3.18vw - 22px);
}

.sobre-mi-flecha::before {
    content: "";
    width: 9px;
    height: 9px;

    border-right: 1.5px solid #D9D9D9;
    border-bottom: 1.5px solid #D9D9D9;
}

.sobre-mi-flecha.der::before {
    transform: translateX(0) rotate(-45deg);
    animation: pistaDerecha 1.8s ease-in-out infinite;
}

.sobre-mi-flecha.izq::before {
    transform: translateX(0) rotate(135deg);
    animation: pistaIzquierda 1.8s ease-in-out infinite;
}

@keyframes pistaDerecha {
    0%, 100% { transform: translateX(0) rotate(-45deg); }
    50%      { transform: translateX(5px) rotate(-45deg); }
}

@keyframes pistaIzquierda {
    0%, 100% { transform: translateX(0) rotate(135deg); }
    50%      { transform: translateX(-5px) rotate(135deg); }
}

@media (prefers-reduced-motion: reduce) {
    .sobre-mi-flecha::before {
        animation: none;
    }
}


/* =========================
   FOJA ACADÉMICA
   Medidas tomadas del diseño de 1920x1080: se escriben en "px de diseño"
   y --u las convierte a la pantalla actual (--escala-foja = 0.88, igual que
   Sobre mí; con 1 queda al tamaño exacto del diseño).
   ========================= */

.sobre-mi-foja {
    --escala-foja: 0.88;
    --u: calc(100vw / 1920 * var(--escala-foja));

    --fila: max(30px, calc(45 * var(--u)));          /* alto de cada materia */
    --hueco: max(3px, calc(6.5 * var(--u)));         /* aire entre materias */
    --texto-foja: max(12.5px, calc(17 * var(--u)));

    /* escala de la sombra y del radio de cada tipo de caja: en desktop es la misma
       que el resto; en celular se define aparte (abajo) porque las cajas no escalan igual */
    --u-tarjeta: var(--u);
    --u-fila: var(--u);

    --opacidad-caja: 0.6;     /* opacidad de las cajas (tarjeta y filas), como en el Figma */
}

.foja-contenido {
    position: absolute;
    top: 53.2vh;
    left: 0;
    right: 0;
    transform: translateY(-50%);

    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: calc(100 * var(--u));
}

.foja-etiqueta {
    display: block;
    font-size: max(11px, calc(15 * var(--u)));
    font-weight: 300;
    letter-spacing: 0.4px;
    line-height: var(--fila);      /* centrada con la altura de la primera materia */
    color: #707070;
}


/* Promedio */

.foja-tarjeta {
    margin-top: calc(9 * var(--u));
    width: calc(606 * var(--u));
    height: calc(444 * var(--u));

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

    border-radius: calc(86 * var(--u-tarjeta));

    position: relative;
    isolation: isolate;     /* el ::before (z-index -1) queda detrás del contenido pero dentro de la caja */
    contain: paint;         /* lo que se repinta adentro (el número que cuenta) no invalida nada fuera de la tarjeta */
}

/* La caja en sí (rectángulo negro + sombra interna) vive en un ::before para poder
   bajarle la opacidad al 60% como una capa de Figma SIN apagar el texto de adentro.
   Valores del Figma: x -46, y -38, blur 58.3, spread -1, color #363636 al 25%
   (se pasan a la escala actual con --u-tarjeta / --u-fila). */
.foja-tarjeta::before,
.foja-fila::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;

    border-radius: inherit;
    opacity: var(--opacidad-caja);

    /* La sombra interna del Figma, pero hecha con degradados en vez de box-shadow.
       Un blur de 58px en 24 cajas es MUY caro de pintar y hacía que la página se
       trabara (y el cursor con ella). Una sombra interna con ese desplazamiento es
       matemáticamente la suma de dos degradados suaves: uno que nace del borde
       derecho (hueco de 46+1px) y otro del borde inferior (38+1px), con la curva de
       una campana de ancho 58.3 (sigma ≈ 29). Cada parada es: distancia al borde en
       px del diseño (× --u-sombra) y la opacidad de #363636 al 25% en ese punto.
       Dos capas del mismo color se componen como 1-(1-a)(1-b), igual que el blur real. */
    background-color: #000;
    background-image:
        linear-gradient(to left,
            rgba(54, 54, 54, 0.2365) 0,
            rgba(54, 54, 54, 0.2160) calc(15 * var(--u-sombra)),
            rgba(54, 54, 54, 0.1800) calc(30 * var(--u-sombra)),
            rgba(54, 54, 54, 0.1250) calc(47 * var(--u-sombra)),
            rgba(54, 54, 54, 0.0670) calc(65 * var(--u-sombra)),
            rgba(54, 54, 54, 0.0320) calc(80 * var(--u-sombra)),
            rgba(54, 54, 54, 0.0123) calc(95 * var(--u-sombra)),
            rgba(54, 54, 54, 0.0025) calc(115 * var(--u-sombra)),
            rgba(54, 54, 54, 0) calc(130 * var(--u-sombra))),
        linear-gradient(to top,
            rgba(54, 54, 54, 0.2275) 0,
            rgba(54, 54, 54, 0.1985) calc(15 * var(--u-sombra)),
            rgba(54, 54, 54, 0.1555) calc(30 * var(--u-sombra)),
            rgba(54, 54, 54, 0.1250) calc(39 * var(--u-sombra)),
            rgba(54, 54, 54, 0.0590) calc(60 * var(--u-sombra)),
            rgba(54, 54, 54, 0.0198) calc(80 * var(--u-sombra)),
            rgba(54, 54, 54, 0.0045) calc(100 * var(--u-sombra)),
            rgba(54, 54, 54, 0) calc(115 * var(--u-sombra)));
}

/* escala de cada tipo de caja (la tarjeta y las filas no escalan igual en celular) */
.foja-tarjeta::before {
    --u-sombra: var(--u-tarjeta);
}

.foja-fila::before {
    --u-sombra: var(--u-fila);
}

.foja-numero {
    position: relative;           /* referencia para el medidor invisible de ancho */
    text-align: center;           /* mientras cuenta, el JS le fija un ancho: el texto queda centrado */
    font-size: calc(410 * var(--u));
    font-weight: 250;
    line-height: 1;
    letter-spacing: -0.06em;      /* números más juntos */
    color: #D9D9D9;
}

/* texto solo para lectores de pantalla (la animación en loop no se lee) */
.solo-lectores {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}


/* Etiqueta que cambia de texto ("PROMEDIO" -> "PORCENTAJE APROBADO" -> ...).
   Cada letra vive en su "ranura" (.et-slot). Al cambiar, la letra vieja se
   desvanece subiendo apenas y la nueva aparece desde apenas más abajo (un cruce
   de fundido, no un giro completo), mientras la ranura cambia de ancho en el mismo
   tiempo, así el texto se estira o se encoge sin saltos.
   El JS arma las ranuras y escalona el delay de izquierda a derecha (muy poco). */

.foja-promedio .foja-etiqueta {
    --alto-et: var(--fila);
    line-height: var(--alto-et);

    display: flex;
    position: relative;
    white-space: nowrap;
}

.et-slot {
    display: block;
    flex: 0 0 auto;
    height: var(--alto-et);
    overflow: hidden;
    white-space: pre;
}

/* ranura que cambia: sin recorte (las letras se mueven muy poco y se desvanecen) */
.et-slot.et-rodante {
    position: relative;
    overflow: visible;
    transition: width 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

/* el contenedor de las dos letras no genera caja: sus hijos se ubican dentro de la ranura */
.et-rollo {
    display: contents;
}

/* las dos letras (vieja = primera, nueva = última) se apilan en el mismo lugar */
.et-rollo > span {
    position: absolute;
    left: 0;
    top: 0;
    height: var(--alto-et);
    white-space: pre;

    transition:
        opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.et-rollo > span:first-child {
    opacity: 1;
    transform: translateY(0);
}

.et-rollo > span:last-child {
    opacity: 0;
    transform: translateY(0.35em);     /* entra desde apenas más abajo */
}

.et-rodante.activa .et-rollo > span:first-child {
    opacity: 0;
    transform: translateY(-0.35em);    /* la vieja sube apenas mientras se desvanece */
}

.et-rodante.activa .et-rollo > span:last-child {
    opacity: 1;
    transform: translateY(0);
}

/* regla invisible para medir el ancho real de cada letra con la tipografía actual */
.et-medidor {
    position: absolute;
    left: 0;
    top: 0;
    visibility: hidden;
    white-space: pre;
    pointer-events: none;
}


/* Listas de materias */

/* Una sola grilla para los tres grupos: la columna de etiquetas toma el ancho de
   la más larga (así no se parten en dos líneas en pantallas medianas) y las
   listas quedan alineadas entre sí. .foja-grupo "desaparece" con display: contents. */
.foja-listas {
    display: grid;
    grid-template-columns: max-content calc(662 * var(--u));
    row-gap: max(28px, calc(69 * var(--u)));
    align-items: start;
}

.foja-grupo {
    display: contents;
}

.foja-listas .foja-etiqueta {
    white-space: nowrap;
    min-width: calc(195 * var(--u));
    padding-right: 16px;
}

.foja-lista {
    list-style: none;

    display: flex;
    flex-direction: column;
    gap: var(--hueco);
}

.foja-fila {
    height: var(--fila);
    padding: 0 calc(96 * var(--u)) 0 calc(23 * var(--u));

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;

    /* misma receta que la tarjeta (ver .foja-tarjeta::before) */
    border-radius: max(3px, calc(6 * var(--u-fila)));
    position: relative;
    isolation: isolate;

    font-size: var(--texto-foja);
    color: #C4C4C4;
}

/* Rombo de estado a la derecha de cada materia (color según el grupo). Es un cuadradito
   girado 45°, centrado en vertical, a la misma distancia del borde que en el diseño
   (49px de diseño desde el borde derecho; el año termina 96px antes). */
.estado-pendiente { --color-estado: #D5E86B; }   /* amarillo verdoso */
.estado-en-curso  { --color-estado: #4B69FF; }   /* azul de acento */
.estado-aprobada  { --color-estado: #4ADE80; }   /* verde */

.foja-fila::after {
    content: "";
    position: absolute;
    top: 50%;
    right: calc(49 * var(--u) - max(2px, calc(3.5 * var(--u))));
    width: max(4px, calc(7 * var(--u)));
    height: max(4px, calc(7 * var(--u)));

    background-color: var(--color-estado);
    transform: translateY(-50%) rotate(45deg);
    pointer-events: none;
}

/* Entrada de las materias: al pasar a la foja, cada fila sube y aparece un poco
   después de la anterior, como si se fueran apilando. El JS le pone a cada fila su
   número de orden en --i. Al volver a "Sobre mí" se esconden de nuevo (rápido, fuera
   de pantalla) para que la próxima vez se repita la animación. */
.foja-fila {
    opacity: 0;
    transform: translateY(24px);

    /* salida: también escalonada (en el mismo orden, más rápida). Corre mientras el
       carrusel desliza, aunque no se llegue a ver completa */
    transition:
        opacity 0.4s ease calc(var(--i, 0) * 40ms),
        transform 0.4s ease calc(var(--i, 0) * 40ms);
}

.sobre-mi[data-panel="1"] .foja-fila {
    opacity: 1;
    transform: translateY(0);

    /* el delay base (0.35s) deja que el carrusel casi termine de deslizar antes de que arranquen */
    transition:
        opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1) calc(0.35s + var(--i, 0) * 70ms),
        transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) calc(0.35s + var(--i, 0) * 70ms);
}

@media (prefers-reduced-motion: reduce) {
    .sobre-mi .foja-fila,
    .sobre-mi[data-panel="1"] .foja-fila {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

.foja-materia {
    font-weight: 500;
}

.foja-anio {
    font-weight: 300;
    flex-shrink: 0;
}


/* Materias aprobadas: contenedor con scroll propio.
   Alto = 3 materias y media, para que se vea que hay más abajo. */

.foja-scroll-caja {
    position: relative;

    /* arrastrando la lista o la barrita no se tiene que seleccionar texto */
    user-select: none;
    -webkit-user-select: none;
}

.foja-scroll {
    height: calc(3 * (var(--fila) + var(--hueco)) + var(--fila) * 0.4);

    overflow-y: auto;
    overscroll-behavior: contain;     /* al llegar al final no arrastra el scroll de la página */

    /* la barra nativa se oculta: la que se ve es .foja-barra (hecha a medida, ver abajo) */
    scrollbar-width: none;
}

.foja-scroll::-webkit-scrollbar {
    display: none;
}

.foja-scroll:focus-visible {
    outline: 1px solid #333;
    outline-offset: 4px;
}


/* Barra de scroll a medida: pista fina y oscura flotando sobre las filas, con una
   barrita clara adentro. Posiciones y medidas tomadas del diseño (1920x1080):
   a 8px del borde derecho, 3-4px de ancho, con 8px/10px de aire arriba y abajo. */

.foja-barra {
    position: absolute;
    top: max(4px, calc(8 * var(--u)));
    bottom: max(4px, calc(10 * var(--u)));
    right: max(5px, calc(8 * var(--u)));
    width: max(3px, calc(3.5 * var(--u)));

    border-radius: 3px;
    background-color: #2A2A2A;
}

.foja-barra[hidden] {
    display: none;                    /* sin contenido de más, no hay barra */
}

.foja-barra-pulgar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;

    border-radius: inherit;
    background-color: #D9D9D9;
}


/* Carrusel y foja en celulares y tablets verticales:
   los paneles son más angostos, todo se apila y las flechas se ocultan
   (las pestañas alcanzan para cambiar de panel). */

@media (max-width: 700px), (max-width: 1024px) and (orientation: portrait) {

    .sobre-mi-carrusel {
        position: relative;
        inset: auto;
        transition: height 0.5s ease;
    }

    .sobre-mi-pista {
        height: auto;
        align-items: flex-start;
    }

    .sobre-mi-flecha {
        display: none;
    }

    .sobre-mi-foja {
        --fila: 44px;
        --hueco: 6px;
        --texto-foja: 15px;

        /* la tarjeta ocupa todo el ancho (hasta 640px): sombra y radio escalan con él;
           las filas miden ~lo mismo que en el diseño, así que van a escala 1 */
        --u-tarjeta: calc(min(100vw - 32px, 640px) / 606);
        --u-fila: 1px;
    }

    .foja-contenido {
        position: static;
        transform: none;

        flex-direction: column;
        align-items: stretch;
        gap: 36px;

        width: 100%;
        max-width: 640px;
        margin: 0 auto;
    }

    .foja-etiqueta {
        font-size: 12px;
        line-height: 1;
        margin-bottom: 12px;
    }

    /* la etiqueta animada del promedio usa una altura de línea fija para sus ranuras */
    .foja-promedio .foja-etiqueta {
        --alto-et: 16px;
    }

    .foja-tarjeta {
        margin-top: 0;
        width: 100%;
        height: auto;
        aspect-ratio: 606 / 444;
    }

    .foja-numero {
        font-size: min(58vw, 430px);
    }

    .foja-listas {
        display: flex;
        flex-direction: column;
        align-items: stretch;      /* en desktop es "start": acá cada grupo tiene que ocupar todo el ancho */
        gap: 32px;
    }

    .foja-grupo {
        display: block;
    }

    .foja-listas .foja-etiqueta {
        min-width: 0;
        padding-right: 0;
    }

    .foja-fila {
        padding: 0 44px 0 18px;     /* deja lugar para el rombo de estado a la derecha del año */
    }

    .foja-fila::after {
        right: 19px;
        width: 6px;
        height: 6px;
    }

    .foja-scroll {
        width: 100%;
    }
}


/* ventanas de escritorio angostas: los dos desplegables se acercan para no pisar el nombre del medio */
@media (min-width: 701px) and (max-width: 900px) and (orientation: landscape) {

    .header-menus {
        gap: 30px;
    }
}


/* =========================
   HEADER EN CELULAR: HAMBURGUESA
   En celulares y tablets verticales el header queda solo con "TOMÁS CALLEGARO"
   (a la izquierda) y el botón de hamburguesa (a la derecha). Todo lo demás
   (EQUIPO 14, PROYECTO, INTEGRANTES) pasa a un panel a pantalla completa que se
   abre con ese botón. Son los mismos desplegables de desktop, pero acá se muestran
   ya abiertos, como secciones del menú.
   (va al final del archivo para ganar sobre las reglas de desktop de arriba)
   ========================= */

@media (max-width: 700px), (max-width: 1024px) and (orientation: portrait) {

    .equipo {
        display: none;       /* en el menú aparece como .menu-equipo-movil */
    }

    .nombre-header {
        left: 0;
        transform: none;
    }

    /* Botón: tres rayitas que se cruzan en una X al abrir.
       44x44 de área táctil; las rayitas de 22px quedan alineadas con el margen derecho */
    .hamburguesa {
        position: absolute;
        top: -15px;
        right: -11px;
        width: 44px;
        height: 44px;
        padding: 0;

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;

        background: none;
        border: none;
    }

    .hamburguesa span {
        display: block;
        width: 22px;
        height: 1.5px;
        background-color: #D9D9D9;

        transition: transform 0.3s ease, opacity 0.2s ease;
    }

    .hamburguesa[aria-expanded="true"] span:nth-child(1) {
        transform: translateY(6.5px) rotate(45deg);       /* 5px de hueco + 1.5px de alto */
    }

    .hamburguesa[aria-expanded="true"] span:nth-child(2) {
        opacity: 0;
    }

    .hamburguesa[aria-expanded="true"] span:nth-child(3) {
        transform: translateY(-6.5px) rotate(-45deg);
    }

    /* Panel del menú: pantalla completa detrás del header (z-index -1 dentro del header),
       invisible hasta que el body tiene la clase "menu-abierto" */
    .header-menus {
        position: fixed;
        inset: 0;
        z-index: -1;

        flex-direction: column;
        align-items: stretch;
        gap: 36px;

        padding: 92px var(--margen-mobile) 48px;
        background-color: #040404;
        overflow-y: auto;

        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0s linear 0.3s;
    }

    body.menu-abierto .header-menus {
        opacity: 1;
        visibility: visible;
        transition: opacity 0.3s ease;
    }

    /* con el menú abierto el header pasa por encima del footer, y la página de atrás no scrollea */
    body.menu-abierto header {
        z-index: 200;
    }

    body.menu-abierto {
        overflow: hidden;
    }

    /* las secciones del menú entran una detrás de otra */
    .header-menus > * {
        opacity: 0;
        transform: translateY(10px);
        transition: opacity 0.35s ease, transform 0.35s ease;
    }

    body.menu-abierto .header-menus > * {
        opacity: 1;
        transform: none;
    }

    body.menu-abierto .header-menus > :nth-child(1) { transition-delay: 0.08s; }
    body.menu-abierto .header-menus > :nth-child(2) { transition-delay: 0.14s; }
    body.menu-abierto .header-menus > :nth-child(3) { transition-delay: 0.2s; }
    body.menu-abierto .header-menus > :nth-child(4) { transition-delay: 0.26s; }

    /* "DGPC OCAMPO" al pie del menú (en celular el footer no se muestra) */
    .menu-catedra-movil {
        display: block;
        margin-top: auto;           /* empuja el link al fondo del panel */
        padding-top: 12px;

        font-size: 12px;
        font-weight: 300;
        letter-spacing: 0.5px;
        color: #707070;
        text-decoration: none;
    }

    /* "‹ EQUIPO 14" arriba del todo, separado del resto por una línea fina */
    .menu-equipo-movil {
        display: flex;
        align-items: center;
        gap: 12px;

        padding-bottom: 28px;
        border-bottom: 1px solid #1F1F1F;

        font-size: 22px;
        font-weight: 300;
        color: #D9D9D9;
        text-decoration: none;
    }

    .menu-equipo-movil::before {
        content: "";
        width: 7px;
        height: 7px;
        border-left: 1.5px solid currentColor;
        border-bottom: 1.5px solid currentColor;
        transform: rotate(45deg);
    }

    /* PROYECTO / INTEGRANTES: el botón pasa a ser el título de la sección (no se toca)
       y su lista se ve siempre abierta */
    .integrantes-wrapper {
        position: static;
    }

    .integrantes {
        pointer-events: none;
        opacity: 1;
        margin-bottom: 4px;

        font-size: 12px;
        letter-spacing: 1px;
        color: #707070;
    }

    .integrantes .chevron {
        display: none;
    }

    .integrantes-lista-wrapper {
        position: static;
        width: auto;
        grid-template-rows: 1fr;
    }

    .integrantes-lista {
        margin: 0;
        padding: 0;
        background-color: transparent;
    }

    .integrantes-lista li {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .integrantes-lista a {
        padding: 14px 0;
        font-size: 22px;
        font-weight: 300;
        opacity: 1;
    }

    .integrantes-lista a span {
        font-size: 12px;
        color: #707070;
        align-self: center;
    }
}


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

    .header-menus,
    .header-menus > *,
    .hamburguesa span {
        transition: none;
    }
}