* {
    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%;
}

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

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


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

main {
    position: relative;
    width: 100vw;
}

.inicio {
    min-height: 100vh;
    min-height: 100svh;

    /* aire arriba/abajo para que en pantallas bajas el contenido no quede
       debajo del header ni del footer fijos (en pantallas altas no cambia nada,
       porque el contenido igual queda centrado) */
    padding-block: clamp(60px, 10vh, 90px);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: min(50px, 5.6vh);
}

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

header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;

    padding-top: 27px;

    display: flex;
    justify-content: center;

    z-index: 100;
}

header::before {
    content: "";

    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 160px;

    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.85) 0%,
        rgba(0, 0, 0, 0) 100%
    );

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

.nav-secciones {
    display: flex;
    gap: 50px;
}

.nav-secciones a {
    color: #D9D9D9;
    text-decoration: none;
    font-size: 12px;
    letter-spacing: 0.5px;

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

.nav-secciones a:hover {
    opacity: 1;
}


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

.equipo-titulo {
    font-size: clamp(60px, 7vw, 110px);
    font-weight: 600;
    letter-spacing: -4px;
    line-height: 1;
}


/* =========================
   FOTOS DE INTEGRANTES
   ========================= */

.integrantes-fotos {
    display: flex;
    gap: 30px;
}

.foto-integrante {
    position: relative;

    text-decoration: none;
    color: inherit;

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

.foto-integrante:hover {
    opacity: 1;
}

.foto-integrante img {
    display: block;

    /* el tercer valor (vh) solo achica las fotos en pantallas bajas;
       desde 900px de alto para arriba se ven igual que antes */
    width: min(21vw, 330px, 34vh);
    height: min(27vw, 400px, 43.7vh);
    object-fit: cover;

    border-radius: 4px;

    filter: saturate(35%);
    transition: filter 0.25s ease;
}

.foto-integrante:hover img {
    filter: saturate(100%);
}

.foto-integrante span {
    position: absolute;
    top: 20px;
    left: 0;
    width: 100%;
    text-align: center;

    color: #040404;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.5px;
}


/* =========================
   BOTÓN "VER APP"
   ========================= */

.ver-app {
    display: inline-block;
    padding: 10px 60px;
    border-radius: 4px;

    background-color: #0F0F0F;
    border: none;

    color: #999999;
    text-decoration: none;
    font-size: 13px;

    transition: background-color 0.25s ease, color 0.25s ease;
}

.ver-app:hover {
    background-color: #EDEDED;
    color: #040404;
}


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

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

    z-index: 100;
}

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

footer::before {
    content: "";
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 110px;

    background: linear-gradient(to top, rgba(4, 4, 4, 0.92) 0%, rgba(4, 4, 4, 0) 100%);

    opacity: 0;
    transition: opacity 0.3s ease;

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

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

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

    /* 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;
    }
}

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

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


/* =========================
   CURSOR
   ========================= */

* {
    cursor: none;
}

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

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

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

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


html {
    scroll-behavior: smooth;
}

.seccion-placeholder {
    min-height: 100vh;
}


/* =========================
   SECCIÓN FADUPRINT APP
   ========================= */

.faduprint-section {
    min-height: 100vh;
    min-height: 100svh;

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

    padding: 0 6vw;
}

.faduprint-imagen img {
    display: block;
    width: 36vw;
    max-width: 600px;
    height: auto;
}

.faduprint-texto {
    max-width: 560px;

    display: flex;
    flex-direction: column;
    gap: 28px;
}

.faduprint-label {
    font-size: 13px;
    letter-spacing: 1px;
    color: #999999;
}



.faduprint-contenido {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 90px;
}

.faduprint-titulo {
    font-size: clamp(34px, 3.2vw, 48px);
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -1px;
}

.faduprint-cuerpo {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.faduprint-lead {
    font-size: 16px;
    font-weight: 400;
    margin-top: 24px;  
}

.faduprint-descripcion {
    font-size: 14px;
    line-height: 1.6;
    color: #B5B5B5;
}


/* =========================
   BOTONES APP / MAPA
   ========================= */

.faduprint-botones {
    display: flex;
    gap: 14px;
    margin-top: 30px;   /* ← tu control para este espacio puntual */
}

.boton-link {
    display: inline-flex;
    align-items: center;
    gap: 40px;

    padding: 16px 26px;
    border-radius: 8px;

    text-decoration: none;
    font-size: 14px;
    font-weight: 500;

    transition: opacity 0.25s ease;
}

.boton-link:hover {
    opacity: 0.85;
}

.boton-claro {
    background: linear-gradient(to bottom right, #FFFFFF, #AFAFAF);
    color: #040404;
}

.boton-oscuro {
    background-color: #1A1A1A;
    color: #D9D9D9;
}

.flecha-link {
    font-size: 16px;
}


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

.aviso-academico {
    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 {
    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;
}

/* =========================
   VOLVER AL INICIO
   ========================= */


.volver-inicio {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);

    display: flex;
    align-items: center;
    gap: 10px;

    color: #D9D9D9;
    text-decoration: none;
    font-size: 12px;
    line-height: 1;
    letter-spacing: 0.5px;

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

.volver-inicio:hover {
    opacity: 1;
}


/* =========================
   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);
}

/* Salida: se desvanece subiendo un poquito */
.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;
    }
}



/* =========================
   HEADER: LINK ACTIVO
   ========================= */

.nav-secciones a.activo {
    color: #4B69FF;
    opacity: 1;
}


/* =========================
   PÁGINA ESQUICIO
   ========================= */

.pagina-esquicio,
.pagina-app {
    height: 100vh;
    height: 100dvh;

    /* en pantallas bajas el aire se achica para dejarle lugar al prototipo
       (desde 900px de alto: 120px / 100px / 32px, igual que antes) */
    padding: clamp(70px, 13.4vh, 120px) 6vw clamp(60px, 11.2vh, 100px);

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: min(32px, 3.6vh);
}

.esquicio-titulo,
.app-titulo {
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0.5px;
    color: #D9D9D9;
}

.figma-embed {
    flex: 1;
    width: 100%;
    min-height: 0;

    border: none;
    border-radius: 6px;
    background-color: #000000;
}


/* =========================
   FOOTER: CHEVRON DE "VOLVER"
   ========================= */

.chevron-volver {
    display: block;
    width: 6px;
    height: 6px;

    border-left: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);          /* apunta a la izquierda */
}

.chevron-volver.arriba {
    transform: rotate(135deg);         /* apunta hacia arriba */
    position: relative;
    top: 2px;                          /* ajuste óptico, tocalo a gusto */
}


/* =========================
   MOBILE
   (va al final del archivo para ganar sobre las reglas de escritorio de arriba)
   ========================= */

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

    /* HEADER */

    header {
        padding-top: 19px;
    }

    .nav-secciones {
        gap: 24px;
    }

    .nav-secciones a {
        font-size: clamp(11px, 2.9vw, 12px);
        letter-spacing: 0.3px;
    }


    /* FOOTER: queda solo "volver" centrado, igual que en la página personal */

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

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


    /* INICIO */

    .inicio {
        padding: 110px var(--margen-mobile) 100px;
        gap: 36px;
    }

    .equipo-titulo {
        font-size: min(17vw, 110px);
        letter-spacing: -3px;
    }

    /* las tres fotos siguen en fila, con la misma proporción que en escritorio */

    .integrantes-fotos {
        gap: 8px;
        width: 100%;
    }

    .foto-integrante {
        flex: 1;
        min-width: 0;
    }

    .foto-integrante img {
        width: 100%;
        max-width: none;
        height: auto;
        max-height: none;
        aspect-ratio: 21 / 27;
    }

    .foto-integrante span {
        top: 10px;
        font-size: clamp(9px, 2.6vw, 13px);
        letter-spacing: 0.3px;
    }


    /* NUESTRO PROYECTO */

    .faduprint-section {
        padding: 100px var(--margen-mobile);
        gap: 40px;
    }

    .faduprint-contenido {
        flex-direction: column;
        gap: 40px;
    }

    .faduprint-imagen img {
        width: min(72vw, 420px);
    }

    .faduprint-texto {
        max-width: 100%;
        gap: 22px;
    }

    .faduprint-lead {
        margin-top: 10px;
    }

    .faduprint-botones {
        margin-top: 10px;
    }

    .boton-link {
        flex: 1;
        justify-content: space-between;
        gap: 16px;
    }


    /* AVISO ACADÉMICO */

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

    .aviso-label {
        width: auto;
    }


    /* DATOS ACADÉMICOS */

    .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;
    }


    /* ESQUICIO Y APP */

    .pagina-esquicio,
    .pagina-app {
        height: 100vh;
        height: 100dvh;      /* alto real en celulares (descuenta la barra del navegador) */
        padding: 80px 12px 70px;
        gap: 20px;
    }

    .esquicio-titulo,
    .app-titulo {
        font-size: 14px;
        text-align: center;
    }
}


/* =========================
   MOBILE CHICO: HEADER
   ========================= */

@media (max-width: 360px) {
    .nav-secciones {
        gap: 16px;
    }
}


/* =========================
   ALTURA BAJA (laptops con poca altura útil, ej. 1366x600)
   Las fotos se achican para que "VER APP" no quede debajo del footer.
   ========================= */

@media (max-height: 700px) and (orientation: landscape) {

    .foto-integrante img {
        width: 27.2vh;
        height: 35vh;
    }
}


/* =========================
   DISPOSITIVOS TÁCTILES (sin mouse)
   Sin cursor propio y sin hovers "pegados" después de tocar.
   ========================= */

@media (hover: none) {

    * {
        cursor: auto;
    }

    .cursor-punto {
        display: none;
    }

    .nav-secciones a:not(.activo):hover,
    .volver-inicio:hover {
        opacity: 0.7;
    }

    .ver-app:hover {
        background-color: #0F0F0F;
        color: #999999;
    }

    .boton-link:hover {
        opacity: 1;
    }
}


/* =========================
   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) {

    .nav-secciones a {
        position: relative;
    }

    .nav-secciones a::after,
    .volver-inicio::after {
        content: "";
        position: absolute;
        inset: -15px -10px;
    }
}


/* =========================
   HEADER EN CELULAR: HAMBURGUESA
   En celulares y tablets verticales el header queda solo con el botón de
   hamburguesa (a la derecha). Las secciones (MAPA, APP, ESQUICIO) y el link de la
   cátedra pasan a un panel a pantalla completa que se abre con ese botón.
   Es la misma idea que en la página personal.
   (va al final del archivo para ganar sobre las reglas de desktop de arriba)
   ========================= */

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

    /* 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 (16px) */
    .hamburguesa {
        position: absolute;
        top: 4px;
        right: 5px;
        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" */
    .nav-secciones {
        position: fixed;
        inset: 0;
        z-index: -1;

        flex-direction: column;
        align-items: stretch;
        gap: 0;

        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 .nav-secciones {
        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;
    }

    /* los links del menú: grandes, uno debajo del otro, separados por una línea fina.
       Cerrado están transparentes y 10px más abajo; al abrir suben y aparecen uno
       detrás del otro. (Todo con el selector "a" para ganarle a la regla de desktop.) */
    .nav-secciones a {
        padding: 18px 0;
        border-bottom: 1px solid #1F1F1F;

        font-size: 22px;
        font-weight: 300;
        letter-spacing: 0;

        opacity: 0;
        transform: translateY(10px);
        transition: opacity 0.35s ease, transform 0.35s ease;
    }

    body.menu-abierto .nav-secciones a {
        opacity: 1;
        transform: none;
    }

    body.menu-abierto .nav-secciones a:nth-child(1) { transition-delay: 0.08s; }
    body.menu-abierto .nav-secciones a:nth-child(2) { transition-delay: 0.14s; }
    body.menu-abierto .nav-secciones a:nth-child(3) { transition-delay: 0.2s; }
    body.menu-abierto .nav-secciones a:nth-child(4) { transition-delay: 0.26s; }
    body.menu-abierto .nav-secciones a:nth-child(5) { transition-delay: 0.32s; }

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

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

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

    .nav-secciones,
    .nav-secciones a,
    .hamburguesa span {
        transition: none;
    }
}


/* =========================================================
   PÁGINA MAPA (mapa.html) — FLUJO DE USUARIO DE FADUPRINT
   Todo lo de este bloque usa el prefijo "mapa-", así no toca
   ninguna otra página del sitio.
   ========================================================= */

.mapa {
    padding: 0 6vw 200px;
}

/* etiqueta de sección (misma familia que .aviso-label / .datos-label-top) */
.mapa-label {
    display: block;
    font-size: 12px;
    letter-spacing: 1px;
    color: #777777;
}


/* ---------- PORTADA ---------- */

.mapa-portada {
    min-height: 100vh;
    min-height: 100svh;
    padding-block: 130px 110px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.mapa-nombre {
    margin-top: 28px;
    font-size: clamp(76px, 11vw, 180px);
    font-weight: 600;
    letter-spacing: -0.045em;
    line-height: 0.95;
}

.mapa-slogan {
    margin-top: 36px;
    font-size: clamp(26px, 2.6vw, 40px);
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -1px;
}

.mapa-bajada {
    margin-top: 18px;
    font-size: 16px;
    color: #B5B5B5;
}

/* tira resumida: línea con puntos, como en el brief */
.mapa-tira {
    position: relative;
    list-style: none;

    width: 100%;
    max-width: 1000px;
    margin-top: 80px;

    display: grid;
    grid-template-columns: repeat(5, 1fr);
}

.mapa-tira::before {
    content: "";
    position: absolute;
    top: 5px;
    left: 10%;
    right: 10%;
    height: 1px;
    background-color: #333333;
}

.mapa-tira li {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    padding: 0 8px;
}

.mapa-tira-punto {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background-color: #040404;
    border: 1.5px solid #4B69FF;
}

.mapa-tira li:last-child .mapa-tira-punto {
    background-color: #4B69FF;
}

.mapa-tira-texto {
    font-size: 12px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: #D9D9D9;
    line-height: 1.4;
}


/* ---------- SECCIONES ---------- */

.mapa-seccion {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    column-gap: 60px;

    padding: 100px 0;
    border-top: 1px solid #2A2A2A;
}

.mapa-contenido {
    max-width: 920px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.mapa-h2 {
    font-size: clamp(28px, 2.8vw, 42px);
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -1px;
    color: #D9D9D9;
    margin-bottom: 10px;
}

.mapa-texto {
    max-width: 680px;
    font-size: 15px;
    line-height: 1.65;
    color: #B5B5B5;
}

.mapa-nota {
    font-size: 13px;
    color: #777777;
}

/* lista en dos columnas con línea arriba de cada ítem */
.mapa-lista {
    list-style: none;
    margin-top: 16px;

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

.mapa-lista li {
    display: flex;
    gap: 18px;
    padding: 16px 0;
    border-top: 1px solid #2A2A2A;

    font-size: 14px;
    line-height: 1.5;
    color: #D9D9D9;
}

.mapa-lista-num {
    flex-shrink: 0;
    min-width: 22px;
    font-size: 12px;
    line-height: 1.75;
    color: #4B69FF;
}


/* ---------- COLA VIRTUAL VS COLA PRESENCIAL ---------- */

.mapa-colas {
    margin-top: 20px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.mapa-cola {
    padding: 34px 32px 36px;
    border: 1px solid #2A2A2A;
    border-radius: 8px;
    background-color: #0A0A0A;
}

.mapa-cola-icono {
    display: flex;
    gap: 6px;
    margin-bottom: 26px;
}

.mapa-cola-icono span {
    width: 14px;
    height: 18px;
    border: 1.5px solid #4B69FF;
    border-radius: 2px;
}

/* presencial: personas (círculos) en vez de hojas */
.mapa-cola-icono--presencial span {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border-color: #D9D9D9;
}

.mapa-cola-icono span:nth-child(n+4) {
    opacity: 0.4;
}

.mapa-cola-titulo {
    font-size: 26px;
    font-weight: 500;
    letter-spacing: -0.5px;
    margin-bottom: 26px;
}

.mapa-cola-datos dt {
    padding-top: 16px;
    border-top: 1px solid #2A2A2A;

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

.mapa-cola-datos dd {
    margin: 8px 0 20px;
    font-size: 14px;
    line-height: 1.6;
    color: #D9D9D9;
}

.mapa-cola-datos dd:last-child {
    margin-bottom: 0;
}


/* ---------- TARJETAS (BENEFICIOS / SECUNDARIAS) ---------- */

.mapa-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.mapa-card {
    display: flex;
    flex-direction: column;
    gap: 12px;

    padding: 28px 26px 30px;
    border-radius: 8px;
    background-color: #0F0F0F;
}

.mapa-card h3 {
    font-size: 19px;
    font-weight: 500;
    letter-spacing: -0.3px;
    color: #D9D9D9;
}

.mapa-card p {
    font-size: 14px;
    line-height: 1.6;
    color: #B5B5B5;
}

.mapa-card-num {
    font-size: 12px;
    letter-spacing: 1px;
    color: #4B69FF;
    margin-bottom: 14px;
}

.mapa-cards--chicas .mapa-card h3 {
    font-size: 16px;
}


/* ---------- FLUJO PRINCIPAL: LÍNEA DE TIEMPO DE 5 ETAPAS ---------- */

/* esta sección ocupa todo el ancho: título arriba y las etapas debajo */
.mapa-seccion--ancha {
    row-gap: 0;
}

/* las 5 etapas en una sola fila (sin scroll horizontal) */
.mapa-etapas {
    grid-column: 1 / -1;
    list-style: none;
    margin-top: 70px;

    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.mapa-paso {
    min-width: 0;
}

.mapa-paso > *:not(.mapa-paso-linea) {
    margin-right: clamp(16px, 2.4vw, 34px);
}

.mapa-paso-num {
    font-size: 30px;
    font-weight: 300;
    letter-spacing: -1px;
    color: #D9D9D9;
}

/* línea + punto: cada etapa dibuja su tramo, y juntas forman una línea continua */
.mapa-paso-linea {
    position: relative;
    height: 11px;
    margin: 14px 0 26px;
}

.mapa-paso-linea::before {
    content: "";
    position: absolute;
    top: 5px;
    left: 0;
    right: 0;
    height: 1px;
    background-color: #333333;
}

.mapa-paso:last-child .mapa-paso-linea::before {
    right: 34px;
    background: linear-gradient(to right, #333333, rgba(51, 51, 51, 0));
}

.mapa-paso-linea span {
    position: absolute;
    top: 0;
    left: 0;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background-color: #040404;
    border: 1.5px solid #4B69FF;
}

/* la última etapa (retirás) con el punto lleno, como en la tira de arriba */
.mapa-paso:last-child .mapa-paso-linea span {
    background-color: #4B69FF;
}

.mapa-paso-img {
    display: block;
    width: 100%;
    max-width: 216px;
    height: auto;
    border-radius: 14px;
    border: 1px solid #2A2A2A;
}

.mapa-paso-titulo {
    margin-top: 22px;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.3;
    color: #D9D9D9;
}

.mapa-paso-texto {
    margin-top: 8px;
    font-size: 13px;
    line-height: 1.55;
    color: #999999;
}


/* ---------- EXPERIENCIA DESTACADA (TANDAS) ---------- */

.mapa-destacada {
    display: flex;
    align-items: center;
    gap: 60px;

    padding: 40px;
    border: 1px solid #2A2A2A;
    border-radius: 8px;
    background-color: #0A0A0A;
}

.mapa-destacada .mapa-paso-img {
    flex-shrink: 0;
    width: 220px;
}

.mapa-destacada-texto {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 460px;
}

.mapa-destacada-texto .mapa-card-num {
    margin-bottom: 4px;
}

.mapa-destacada-texto h3 {
    font-size: clamp(22px, 2vw, 30px);
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.5px;
}

.mapa-destacada-texto p {
    font-size: 15px;
    line-height: 1.65;
    color: #B5B5B5;
}


/* ---------- TABLET HORIZONTAL / LAPTOP CHICA ---------- */

@media (max-width: 1100px) {

    .mapa-seccion {
        grid-template-columns: 1fr;
        row-gap: 30px;
    }

    .mapa-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* ---------- CELULAR Y TABLET VERTICAL (mismo corte que la hamburguesa) ---------- */

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

    .mapa {
        padding: 0 var(--margen-mobile) 120px;
    }

    .mapa-portada {
        padding-block: 110px 90px;
    }

    .mapa-nombre {
        font-size: min(21vw, 140px);
        letter-spacing: -0.05em;
    }

    .mapa-slogan {
        margin-top: 26px;
    }

    .mapa-bajada {
        font-size: 15px;
    }

    /* tira resumida en vertical, con la línea a la izquierda */
    .mapa-tira {
        grid-template-columns: 1fr;
        row-gap: 22px;
        max-width: 320px;
        margin-top: 56px;
    }

    .mapa-tira::before {
        top: 6px;
        bottom: 6px;
        left: 5px;
        right: auto;
        width: 1px;
        height: auto;
    }

    .mapa-tira li {
        flex-direction: row;
        align-items: center;
        gap: 18px;
        padding: 0;
        text-align: left;
    }

    .mapa-tira-punto {
        flex-shrink: 0;
    }

    .mapa-seccion {
        padding: 70px 0;
        row-gap: 24px;
    }

    .mapa-h2 {
        font-size: min(8vw, 34px);
        margin-bottom: 4px;
    }

    .mapa-lista,
    .mapa-colas,
    .mapa-cards {
        grid-template-columns: 1fr;
    }

    .mapa-cola {
        padding: 28px 22px 30px;
    }

    /* línea de tiempo: pasa a vertical, con la línea y los puntos a la izquierda */
    .mapa-etapas {
        grid-template-columns: 1fr;
        margin-top: 44px;
    }

    .mapa-paso {
        display: grid;
        grid-template-columns: 34px minmax(0, 1fr);
        padding-bottom: 46px;
    }

    .mapa-paso > *:not(.mapa-paso-linea) {
        grid-column: 2;
        margin-right: 0;
    }

    .mapa-paso-linea {
        grid-column: 1;
        grid-row: 1 / span 4;
        height: auto;
        margin: 0;
    }

    .mapa-paso-linea::before,
    .mapa-paso:last-child .mapa-paso-linea::before {
        top: 14px;
        bottom: -46px;
        left: 5px;
        right: auto;
        width: 1px;
        height: auto;
        background: #333333;
    }

    .mapa-paso:last-child .mapa-paso-linea::before {
        bottom: 0;
        background: linear-gradient(to bottom, #333333, rgba(51, 51, 51, 0));
    }

    .mapa-paso-linea span {
        top: 12px;
    }

    .mapa-paso-num {
        margin-bottom: 18px;
    }

    .mapa-paso-img {
        max-width: min(62vw, 260px);
    }

    .mapa-destacada {
        flex-direction: column;
        align-items: flex-start;
        gap: 30px;
        padding: 26px 22px 30px;
    }

    .mapa-destacada .mapa-paso-img {
        width: min(62vw, 260px);
    }
}