/* Versión para móvil (900px o menos) */

@media (max-width: 900px) {

    /* ---------- Barra de arriba ---------- */

    body {
        background-size: 28px 28px;
    }

    .barra-superior {
        position: sticky;
        top: 0;
        height: 54px;
        padding: 0 12px 0 14px;
    }

    .enlace-red,
    .reloj,
    .texto-tema {
        display: none;
    }

    .boton-tema {
        width: 44px;
        height: 44px;
        justify-content: center;
        padding: 0;
        font-size: 16px;
    }

    .selector-idioma {
        font-size: 12px;
    }

    .selector-idioma button {
        padding: 4px 7px;
    }

    .barra-derecha {
        gap: 8px;
    }

    /* ---------- Escritorio ---------- */

    .escritorio {
        margin-top: 0;
        height: auto;
        min-height: 0;
        padding: 20px 16px 96px;
        overflow: visible;
        display: flex;
        flex-direction: column;
        gap: 22px;
    }

    /* ---------- Ventanas (una debajo de otra) ---------- */

    .ventana {
        position: static;
        width: auto;
        max-height: none;
        box-shadow: 4px 4px 0 var(--tinta);
        animation: none;
        scroll-margin-top: 70px;
    }

    .ventana-barra {
        cursor: default;
        touch-action: auto;
    }

    .ventana[hidden] {
        display: flex !important;
    }

    .ventana-cerrar {
        display: none;
    }

    /* ---------- Orden en el que salen ---------- */

    .ventana-inicio { order: 1; }
    .iconos { order: 2; }
    .ventana-proyectos { order: 3; }
    .ventana-sobre-mi { order: 4; }
    .ventana-experiencia { order: 5; }
    .ventana-contacto { order: 6; }
    .pista { order: 7; }

    /* ---------- Iconos (como en el ordenador, pero más pequeños) ---------- */

    .iconos {
        position: static;
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 2px;
        font-size: min(8.5px, 2.3vw);
        letter-spacing: -0.03em;
    }

    .icono.icono-inicio {
        display: none;
    }

    /* Fila de arriba para el dibujo y de abajo para el nombre,
       así todos los nombres quedan a la misma altura */
    .icono {
        width: auto;
        min-width: 0;
        padding: 0;
        display: grid;
        grid-template-rows: 46px auto;
        justify-items: center;
        align-items: center;
        gap: 6px;
    }

    .icono .dibujo svg {
        width: 18px;
        height: 18px;
    }

    .icono .dibujo-cuadrado {
        width: 42px;
        height: 42px;
        border-radius: 10px;
    }

    .icono .dibujo-redondo {
        width: 42px;
        height: 42px;
    }

    .icono .dibujo-carpeta {
        width: 48px;
        height: 36px;
        border-radius: 5px;
        box-shadow: inset 0 7px 0 var(--mostaza);
    }

    .icono .dibujo-documento {
        width: 36px;
        height: 44px;
        padding: 9px 6px;
        gap: 4px;
    }

    .icono .dibujo-pdf {
        width: 36px;
        height: 44px;
        padding-bottom: 5px;
        font-size: 8.5px;
    }

    .icono-nombre {
        max-width: 100%;
        padding: 2px 3px;
        white-space: nowrap;
    }

    /* ---------- Inicio ---------- */

    .contenido-inicio {
        padding: 24px 20px 22px;
    }

    .titulo-linea-1 {
        font-size: 50px;
    }

    .titulo-linea-2 {
        font-size: 32px;
    }

    .intro {
        font-size: 15.5px;
    }

    /* ---------- Proyectos ---------- */

    .contenido-proyectos {
        padding: 12px;
    }

    .destacado {
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
        padding: 12px;
    }

    .destacado-titulo {
        font-size: 44px;
    }

    .miniatura {
        flex-direction: column;
        align-items: stretch;
        padding: 5px;
        gap: 6px;
        text-align: center;
        font-size: 10.5px;
    }

    .miniatura img {
        width: 100%;
        height: 60px;
    }

    .destacado-enlaces a {
        flex: 1;
        justify-content: center;
    }

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

    .proximo .suave {
        -webkit-line-clamp: 2;
    }

    /* ---------- Sobre mí ---------- */

    .perfil-foto {
        width: 90px;
        height: 90px;
    }

    .perfil-nombre {
        font-size: 30px;
    }

    .habilidades-lista {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    /* ---------- Experiencia ---------- */

    .entrada-cabecera {
        flex-direction: column-reverse;
        gap: 2px;
    }

    /* ---------- Contacto ---------- */

    .contenido-contacto {
        padding: 22px 18px 20px;
    }

    .contacto-titulo {
        font-size: 40px;
    }

    .formulario-fila {
        grid-template-columns: minmax(0, 1fr);
    }

    .boton-enviar {
        align-self: stretch;
    }

    /* ---------- Texto de abajo y píldora del email ---------- */

    .pista,
    .escritorio:has(#proyectos:not([hidden])) .pista {
        position: static;
        text-align: center;
        opacity: 1;
    }

    .pildora {
        left: 16px;
        right: 16px;
        bottom: 12px;
        padding-right: 16px;
    }

    .pildora-email {
        flex: 1;
        text-align: left;
    }

    /* El aviso de copiado sale centrado encima de la píldora */
    .aviso-copiado {
        right: auto;
        left: 50%;
        translate: -50% 0;
        padding: 8px 14px;
        font-size: 13px;
    }
}

/* ---------- Sin animaciones si el usuario lo pide en su sistema ---------- */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
    }
}