/* =========================================================
   RESPONSIVE — PORTAFOLIO ALAIDE
========================================================= */


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1024px) {

    :root {
        --altura-encabezado: 72px;
    }


    /* Encabezado principal */

    .encabezado {
        padding: 0 5%;
    }

    .navegacion {
        gap: 25px;
    }


    /* Portada */

    .portada {
        width: 90%;
    }

    .portada__contenido {
        grid-template-columns:
            minmax(290px, 0.72fr)
            minmax(420px, 1.28fr);
    }

    .portada__presentacion {
        padding-right: 15px;
    }

    .portada__titulo {
        font-size: clamp(70px, 9vw, 95px);
    }

    .portada__imagen {
        height: min(78vh, 720px);
    }

    .portada__fondo-retrato {
        right: 0;

        width: 88%;
        height: 80%;
    }


    /* Demo Reel */

    .demo-reel {
        padding: 75px 0 95px;
    }

    .demo-reel__encabezado {
        grid-template-columns: 1fr 340px;
        gap: 35px;
    }

    .demo-reel__composicion {
        grid-template-columns: 1.15fr 0.85fr;
    }

    .demo-reel__contenido {
        padding: 50px 35px;
    }

    .demo-reel__titulo {
        font-size: 42px;
    }

    .demo-reel__servicios {
        grid-template-columns: 1fr;
    }


    /* Proyectos */

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

    .proyecto {
        grid-template-columns: 145px 1fr;
    }


    /* Sobre mí */

    .sobre-mi__contenido {
        grid-template-columns: minmax(250px, 0.75fr) 1.25fr;
        gap: 55px;
    }


    /* Contacto */

    .contacto__contenido {
        grid-template-columns: 1fr 0.9fr;
        gap: 50px;
    }

    .contacto__datos {
        grid-column: 1 / -1;

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


/* =========================================================
   CELULAR
========================================================= */

@media (max-width: 768px) {

    :root {
        --altura-encabezado: 68px;
    }


    /* =====================================================
       ENCABEZADO PRINCIPAL Y MENÚ
    ===================================================== */

    .encabezado {
        padding: 0 20px;
    }

    .logo {
        font-size: 24px;
    }

    .boton-menu {
        position: relative;
        z-index: 102;

        display: block;
    }

    .navegacion {
        position: fixed;
        z-index: 101;
        top: var(--altura-encabezado);
        right: 0;

        width: min(82%, 340px);
        height: calc(100svh - var(--altura-encabezado));

        padding: 55px 35px;

        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 34px;

        background-color: var(--color-oxford);
        color: #ffffff;

        transform: translateX(100%);

        transition: transform 0.4s ease;
    }

    .navegacion--abierta {
        transform: translateX(0);
    }

    .navegacion a {
        color: #ffffff;

        font-size: 14px;
    }

    .boton-menu--activo span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    .boton-menu--activo span:nth-child(2) {
        opacity: 0;
    }

    .boton-menu--activo span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }


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

    .portada {
        width: calc(100% - 40px);
        min-height: auto;
    }

    .portada__contenido {
        min-height: auto;

        display: flex;
        flex-direction: column;
    }

    .portada__presentacion {
        width: 100%;

        padding: 70px 0 25px;

        justify-content: flex-start;
    }

    .portada__saludo {
        margin-bottom: 18px;

        font-size: 11px;
        letter-spacing: 4px;
    }

    .portada__titulo {
        font-size: clamp(68px, 22vw, 94px);
        line-height: 0.84;
        letter-spacing: -4px;
    }

    .portada__roles {
        margin-top: 27px;

        font-size: 10px;
        line-height: 1.7;
        letter-spacing: 3px;
    }

    .portada__linea {
        margin-top: 22px;
    }

    .portada__frase {
        margin-top: 20px;

        font-size: 10px;
        line-height: 1.7;
        letter-spacing: 2.4px;
    }

    .portada__retrato {
        width: 100%;
        height: 430px;

        align-items: flex-end;
        justify-content: center;
    }

    .portada__fondo-retrato {
        right: 5%;
        bottom: 0;

        width: 90%;
        height: 88%;
    }

    .portada__imagen {
        bottom: 0;

        width: auto;
        height: 100%;
        max-width: none;

        object-position: center bottom;
    }

    .portada__bajar {
        display: none;
    }


    /* =====================================================
       ENCABEZADOS EDITORIALES 01–05
    ===================================================== */

    .demo-reel__editorial,
    .proyectos__encabezado,
    .seleccion-visual__encabezado,
    .sobre-mi__encabezado,
    .contacto__encabezado {
        width: 100%;
        min-height: 30px;

        margin: 0;
        padding: 0 0 14px;

        display: grid;
        grid-template-columns: auto 32px minmax(0, 1fr) auto;
        align-items: center;
        gap: 10px;
    }


    /* Nombre de la sección */

    .demo-reel__editorial h2,
    .proyectos__encabezado h2,
    .seleccion-visual__encabezado h2,
    .sobre-mi__encabezado h2,
    .contacto__encabezado h2 {
        margin: 0;

        font-size: 11px;
        font-weight: 700;
        line-height: 1;
        letter-spacing: 0.9px;
        text-transform: uppercase;
        white-space: nowrap;
    }


    /* Línea morada */

    .demo-reel__editorial-linea,
    .proyectos__linea,
    .seleccion-visual__linea,
    .sobre-mi__linea,
    .contacto__linea-editorial {
        width: 32px;
        height: 2px;

        margin: 0;

        display: block;

        background-color: var(--color-morado);
    }


    /* Texto secundario oculto */

    .demo-reel__editorial > p,
    .proyectos__encabezado > p,
    .seleccion-visual__encabezado > p,
    .sobre-mi__encabezado > p,
    .contacto__encabezado > p {
        display: none;
    }


    /* Números */

    .demo-reel__seccion-numero,
    .proyectos__numero,
    .seleccion-visual__numero,
    .sobre-mi__numero,
    .contacto__numero {
        justify-self: end;

        margin: 0;

        color: var(--color-morado);

        font-family: "Oswald", sans-serif;
        font-size: 16px;
        font-weight: 600;
        line-height: 1;
    }


    /* Bordes claros */

    .demo-reel__editorial,
    .proyectos__encabezado,
    .seleccion-visual__encabezado {
        border-bottom: 1px solid var(--color-borde);
    }


    /* Bordes oscuros */

    .sobre-mi__encabezado,
    .contacto__encabezado {
        border-bottom: 1px solid rgba(255, 255, 255, 0.16);
    }

    .sobre-mi__encabezado h2,
    .contacto__encabezado h2 {
        color: #ffffff;
    }

    .sobre-mi__linea,
    .contacto__linea-editorial {
        background-color: #9280ff;
    }

    .sobre-mi__numero,
    .contacto__numero {
        color: #9280ff;
    }


    /* =====================================================
       DEMO REEL
    ===================================================== */

    .demo-reel {
        width: calc(100% - 40px);

        margin: 0 auto;
        padding: 35px 0 55px;
    }

    .demo-reel__encabezado {
        width: 100%;

        margin-top: 24px;
        margin-bottom: 22px;

        display: block;
    }

    .demo-reel__encabezado .etiqueta-seccion {
        margin: 0;

        font-size: 9px;
        letter-spacing: 2px;
    }

    .demo-reel__encabezado .titulo-seccion,
    .titulo-seccion {
        margin-top: 7px;

        font-size: 42px;
        line-height: 0.95;
        letter-spacing: -1.5px;
    }

    .demo-reel__introduccion {
        margin-top: 14px;
        padding: 0;

        font-size: 13px;
        line-height: 1.45;
    }

    .demo-reel__composicion {
        display: flex;
        flex-direction: column;

        border: 1px solid var(--color-borde);
    }

    .demo-reel__video {
        width: 100%;
        aspect-ratio: 16 / 9;
    }

    .demo-reel__placeholder {
        padding: 20px;
    }

    .demo-reel__placeholder span,
    .demo-reel__placeholder strong {
        font-size: 30px;
    }

    .demo-reel__play {
        width: 54px;
        height: 54px;
    }

    .demo-reel__play span {
        font-size: 17px;
    }

    .demo-reel__archivo {
        right: 15px;
        bottom: 11px;
        left: 15px;

        padding-top: 8px;

        font-size: 8px;
    }

    .demo-reel__contenido {
        padding: 26px 20px 24px;

        border-top: 1px solid var(--color-borde);
        border-left: 0;
    }

    .demo-reel__contenido .etiqueta-seccion {
        font-size: 9px;
        letter-spacing: 2px;
    }

    .demo-reel__titulo {
        margin-top: 10px;

        font-size: 32px;
        line-height: 1;
        letter-spacing: -1px;
    }

    .demo-reel__texto {
        margin-top: 13px;

        font-size: 13px;
        line-height: 1.45;
    }

    .demo-reel__linea {
        width: 34px;

        margin-top: 14px;
    }

    .demo-reel__servicios {
        margin-top: 14px;

        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px 12px;
    }

    .demo-reel__servicios li {
        font-size: 8px;
        line-height: 1.35;
        letter-spacing: 1px;
    }


    /* =====================================================
       PROYECTOS
    ===================================================== */

    .proyectos {
        width: calc(100% - 40px);

        margin: 0 auto;
        padding: 35px 0 65px;
    }

    .proyectos__encabezado {
        margin-bottom: 28px;
    }

    .proyectos__introduccion {
        margin-top: 15px;
        padding: 0;
    }

    .proyectos__ventana {
        overflow-x: auto;
        overflow-y: hidden;

        scroll-behavior: smooth;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }

    .proyectos__ventana::-webkit-scrollbar {
        display: none;
    }

    .proyectos__pista {
        width: max-content;

        display: flex;
        gap: 14px;
    }

    .proyecto {
        width: calc(100vw - 58px);
        min-height: 0;

        padding: 14px;

        grid-template-columns:
            minmax(105px, 0.68fr)
            minmax(0, 1.32fr);

        gap: 16px;
        align-content: start;

        scroll-snap-align: start;
    }

    .proyecto:hover {
        box-shadow: none;

        transform: none;
    }

    .proyecto__cliente {
        margin-top: 15px;
    }

    .proyecto__titulo {
        font-size: 25px;
    }

    .proyecto__descripcion {
        font-size: 11px;
    }

    .proyecto__resultado {
        padding-top: 15px;
    }

    .proyectos__controles {
        margin-top: 20px;

        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        gap: 15px;
    }

    .proyectos__contador {
        display: flex;
        align-items: center;
        gap: 10px;

        font-family: "Oswald", sans-serif;
        font-size: 17px;
        font-weight: 600;
    }

    #proyecto-actual {
        color: var(--color-morado);
    }

    .proyectos__separador {
        width: 30px;
        height: 1px;

        background-color: var(--color-borde);
    }

    .proyectos__puntos {
        display: flex;
        align-items: center;
        gap: 7px;
    }

    .proyectos__punto {
        width: 7px;
        height: 7px;

        display: block;

        background-color: var(--color-texto-suave);
        border-radius: 10px;

        transition:
            width 0.3s ease,
            background-color 0.3s ease;
    }

    .proyectos__punto--activo {
        width: 27px;

        background-color: var(--color-morado);
    }

    .proyectos__flechas {
        display: flex;
        justify-content: flex-end;
        gap: 8px;
    }

    .proyectos__flechas button {
        width: 42px;
        height: 42px;

        background-color: var(--color-superficie);
        border: 1px solid var(--color-borde);

        color: var(--color-oxford);
        font-size: 18px;

        cursor: pointer;
    }

    .proyectos__flechas button:hover {
        background-color: var(--color-oxford);
        color: #ffffff;
    }


    /* =====================================================
       SELECCIÓN VISUAL
    ===================================================== */

    .seleccion-visual {
        position: relative;

        width: 100%;
        max-width: 100%;

        margin: 0 auto;
        padding: 35px 0 55px;

        overflow: visible;
    }

    .seleccion-visual__encabezado {
        width: calc(100% - 40px);

        margin: 0 auto;
    }

    .seleccion-visual__escenario {
        position: relative;

        width: calc(100% - 40px);
        max-width: 330px;
        height: 195px;

        margin: 24px auto 0;

        overflow: visible;

        touch-action: pan-y;
    }

    .seleccion-visual__post {
        width: clamp(76px, 23vw, 94px);
    }

    .seleccion-visual__post--1 {
        top: 55%;
        left: 20%;

        --rotacion: -6deg;
    }

    .seleccion-visual__post--2 {
        top: 45%;
        left: 40%;

        --rotacion: -2deg;
    }

    .seleccion-visual__post--3 {
        top: 55%;
        left: 60%;

        --rotacion: 2deg;
    }

    .seleccion-visual__post--4 {
        top: 45%;
        left: 80%;

        --rotacion: 6deg;
    }

    .seleccion-visual__indicacion {
        margin-top: 4px;

        font-size: 7px;
        letter-spacing: 1.4px;
    }


    /* =====================================================
       FONDO OSCURO
    ===================================================== */

    .cierre-oscuro {
        width: 100%;

        background:
            radial-gradient(
                circle at 20% 12%,
                rgba(81, 64, 168, 0.28),
                transparent 30%
            ),
            linear-gradient(
                155deg,
                #24242b 0%,
                #18181e 55%,
                #101014 100%
            );
    }


    /* =====================================================
       SOBRE MÍ
    ===================================================== */
/* Sobre mí: elimina el espacio vacío inferior */

.sobre-mi {
    width: calc(100% - 32px);
    min-height: auto;

    margin: 0 auto;
    padding: 28px 0 40px;

    display: block;

    overflow: visible;
}

    .sobre-mi__contenido {
        width: 100%;

        margin-top: 20px;

        display: grid;
        grid-template-columns: 112px minmax(0, 1fr);
        grid-template-rows: auto;
        align-items: center;
        column-gap: 18px;
        row-gap: 14px;
    }

    .sobre-mi__informacion {
        display: contents;
    }


    /* Fotografía */

    .sobre-mi__imagen {
        position: relative;

        grid-column: 1;
        grid-row: 1 / 3;
        align-self: center;

        width: 112px;
        max-width: none;

        margin: 0;
    }

    .sobre-mi__imagen-fondo {
        top: -9px;
        left: -9px;

        width: 78%;
        height: 78%;
    }

    .sobre-mi__imagen img {
        width: 112px;
        height: 140px;

        display: block;

        object-fit: cover;
        object-position: center;
    }

    .sobre-mi__imagen figcaption {
        margin-top: 7px;

        font-size: 5px;
        line-height: 1.4;
        letter-spacing: 0.65px;
        text-align: center;
        white-space: nowrap;
    }


    /* Etiqueta y título */

    .sobre-mi__etiqueta {
        grid-column: 2;
        grid-row: 1;
        align-self: end;

        margin: 0 0 7px;

        font-size: 6px;
        letter-spacing: 1.3px;
    }

    .sobre-mi__titulo {
        grid-column: 2;
        grid-row: 2;
        align-self: start;

        width: 100%;
        max-width: 100%;

        margin: 0;

        font-size: clamp(35px, 10.5vw, 44px);
        line-height: 0.98;
        letter-spacing: -1px;
    }

    .sobre-mi__titulo span {
        display: block;
    }


    /* Descripción */

    .sobre-mi__texto {
        grid-column: 1 / -1;
        grid-row: 3;

        width: 100%;
        max-width: 100%;

        margin: 5px 0 0;

        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }

    .sobre-mi__texto p {
        margin: 0;

        font-size: 9.5px;
        line-height: 1.55;
    }


    /* Datos duros */

    .sobre-mi__datos {
        grid-column: 1 / -1;
        grid-row: 4;

        width: 100%;

        margin: 0;

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

        border-top: 1px solid rgba(255, 255, 255, 0.16);
        border-bottom: 1px solid rgba(255, 255, 255, 0.16);
    }

    .sobre-mi__dato,
    .sobre-mi__dato:first-child,
    .sobre-mi__dato:nth-child(2),
    .sobre-mi__dato:nth-child(3),
    .sobre-mi__dato:nth-child(4) {
        min-width: 0;
        min-height: 76px;

        padding: 10px 4px;

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

        text-align: center;

        border-right: 1px solid rgba(255, 255, 255, 0.16);
        border-bottom: none;
    }

    .sobre-mi__dato:last-child {
        border-right: none;
    }

    .sobre-mi__dato strong {
        display: block;

        margin: 0;

        font-size: 26px;
        line-height: 1;
        text-align: center;
    }

    .sobre-mi__dato span {
        display: block;

        width: 100%;

        color: rgba(244, 242, 248, 0.78);

        font-size: 6.5px;
        font-weight: 600;
        line-height: 1.35;
        letter-spacing: 0.4px;
        text-align: center;
    }


    /* Herramientas */

    .sobre-mi__herramientas {
        grid-column: 1 / -1;
        grid-row: 5;

        width: 100%;

        margin: 0;
    }

    .sobre-mi__herramientas > p {
        margin-bottom: 8px;

        font-size: 5.5px;
        letter-spacing: 1.1px;
    }

    .sobre-mi__herramientas-lista {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
    }

    .sobre-mi__herramientas-lista span {
        padding: 6px 8px;

        font-size: 5.8px;
        line-height: 1.2;
        letter-spacing: 0.5px;
    }


    /* Botón CV */

    .sobre-mi__cv {
        grid-column: 1 / -1;
        grid-row: 6;

        width: 100%;
        min-height: 40px;

        margin: 0;
        padding: 0 13px;

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

        font-size: 6.5px;
        letter-spacing: 1px;
    }

    .sobre-mi__cv span {
        font-size: 11px;
    }


    /* =====================================================
       CONTACTO
    ===================================================== */

    .contacto {
    width: calc(100% - 32px);
    min-height: auto;

    margin: 0 auto;
    padding: 36px 0 30px;

    display: block;
}

   .contacto__contenido {
    width: 100%;

    margin-top: 26px;

    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

    .contacto__presentacion,
    .contacto__acciones,
    .contacto__datos {
        width: 100%;
    }

    .contacto__etiqueta {
        margin: 0 0 9px;

        font-size: 7px;
        letter-spacing: 1.4px;
    }

   .contacto__titulo {
    width: 100%;

    margin: 0;

    font-size: clamp(40px, 11.8vw, 52px);
    line-height: 1;
    letter-spacing: -1px;
}

    .contacto__titulo-linea {
    display: block;

    line-height: 1;
    white-space: nowrap;
}
.contacto__texto {
    width: 100%;
    max-width: 360px;

    margin: 18px 0 0;

    font-size: 12px;
    line-height: 1.55;
}

    .contacto__invitacion {
        margin: 0 0 9px;

        font-size: 7px;
        line-height: 1.5;
        letter-spacing: 1px;
    }

    .contacto__invitacion span {
        display: block;
    }

    .contacto__boton {
        width: 100%;
        min-height: 44px;

        padding: 0 14px;

        font-size: 7px;
        letter-spacing: 1px;
    }

    .contacto__datos {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));

        border-top: 1px solid rgba(255, 255, 255, 0.16);
        border-bottom: 1px solid rgba(255, 255, 255, 0.16);
    }

    .contacto__dato {
        min-width: 0;
        min-height: 66px;

        padding: 10px 7px;

        display: flex;
        flex-direction: column;
        justify-content: center;

        border-right: 1px solid rgba(255, 255, 255, 0.16);
        border-bottom: none;
    }

    .contacto__dato:last-child {
        border-right: none;
    }

    .contacto__dato > span {
        font-size: 5.5px;
        line-height: 1.3;
        letter-spacing: 0.7px;
    }

    .contacto__dato strong {
        margin-top: 6px;

        font-size: 8px;
        line-height: 1.35;
    }


    /* =====================================================
       PIE DE PÁGINA
    ===================================================== */

    .pie-pagina {
        width: calc(100% - 32px);

        margin: 0 auto;
        padding: 18px 0;

        display: grid;
        grid-template-columns: auto 1fr auto;
        align-items: center;
        gap: 12px;
    }

    .pie-pagina__logo {
        font-size: 20px;
    }

    .pie-pagina p {
        margin: 0;

        font-size: 5px;
        line-height: 1.4;
        letter-spacing: 0.7px;
        text-align: center;
    }

    .pie-pagina__subir {
        font-size: 5.5px;
        letter-spacing: 0.7px;
        white-space: nowrap;
    }
}


/* =========================================================
   ANIMACIÓN DE MÉTRICAS EN CELULAR
========================================================= */

@media (max-width: 768px) {

    .proyecto--visible .proyecto__resultado {
        animation: aparecer-resultado-movil 0.5s ease forwards;
    }

    .proyecto--visible .proyecto__resultado strong {
        animation: pulso-resultado-movil 0.55s ease 0.15s both;
    }
}

@keyframes aparecer-resultado-movil {

    from {
        opacity: 0;

        transform: translateY(8px);
    }

    to {
        opacity: 1;

        transform: translateY(0);
    }
}

@keyframes pulso-resultado-movil {

    from {
        color: var(--color-morado);
    }

    to {
        color: var(--color-oxford);
    }
}


/* =========================================================
   CELULAR PEQUEÑO
========================================================= */

@media (max-width: 480px) {

    .portada__presentacion {
        padding-top: 55px;
    }

    .portada__titulo {
        font-size: clamp(62px, 21vw, 82px);
        letter-spacing: -3px;
    }

    .portada__retrato {
        height: 370px;
    }

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

    .proyecto {
        width: calc(100vw - 52px);

        grid-template-columns:
            minmax(100px, 0.7fr)
            minmax(0, 1.3fr);

        gap: 13px;
    }

    .sobre-mi__contenido {
        grid-template-columns: 106px minmax(0, 1fr);
        column-gap: 15px;
    }

    .sobre-mi__imagen,
    .sobre-mi__imagen img {
        width: 106px;
    }

    .sobre-mi__imagen img {
        height: 133px;
    }

    .sobre-mi__titulo {
        font-size: clamp(32px, 10.2vw, 40px);
    }

    .contacto__titulo {
        font-size: clamp(44px, 14vw, 57px);
    }
}


/* =========================================================
   MOVIMIENTO REDUCIDO
========================================================= */

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

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