/* ============================================================================
   PROYECTO: Portfolio Nico Falcón
   ARCHIVO: assets/css/responsive.css
   PROPÓSITO: Todo el comportamiento responsive. Breakpoints canónicos.
   BREAKPOINTS: 1600 / 1280 / 1024 / 480
   ============================================================================ */

/* --- 1600px --- */
@media (max-width: 1600px) {}

/* --- 1280px --- */
@media (max-width: 1280px) {}

/* --- 1024px (tablet) --- */
@media (max-width: 1024px) {
    .container {
        padding: 0 2.5rem;
    }
    .section {
        padding-top: 3.5rem;
        padding-bottom: 3.5rem;
    }

    /* --- NAV: hamburguesa --- */
    .topbar__toggle {
        display: flex;
        position: absolute;
        right: 1.25rem;
        top: 50%;
        transform: translateY(-50%);
    }

    .topbar__menu {
        position: fixed;
        top: 70px;
        left: 0;
        width: 100%;
        flex-direction: column;
        gap: 0;
        background-color: rgba(11, 26, 32, 0.98);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border-bottom: 1px solid var(--ink-3);
        padding: 1rem 0;
        transform: translateY(-150%);
        transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .topbar__menu.is-open {
        transform: translateY(0);
    }
    .topbar__menu li {
        width: 100%;
    }
    .topbar__menu a {
        display: block;
        padding: 1rem 2.5rem;
        font-size: 1rem;
    }
    .hero__title {
        font-size: clamp(2rem, 6vw, 3rem);
    }

    .hero__inner {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        text-align: center;
        padding-top: 4rem;
        padding-bottom: 4rem;
    }
    /* Los hijos de content suben al grid para intercalarse con la foto */
    .hero__content {
        display: contents;
    }
    .hero__eyebrow  { order: 1; text-align: left; font-size: 1rem; }
    .hero__title    { order: 2; font-size: clamp(3rem, 9vw, 4rem); }
    .hero__visual   { order: 3; justify-content: center; }
    .hero__subtitle { order: 4; max-width: 100%; text-align: left; font-size: 1.1rem; }
    .hero__actions  { order: 5; justify-content: center; margin-top: 1.5rem; }
    .hero__photo-wrapper {
        max-width: 340px;
    }
    /* En tablet el hero fluye con su contenido, no ocupa pantalla completa */
    .hero {
        min-height: auto;
    }
  
    .hero__photo-backdrop {
        inset: -10px 10px 10px -10px;
    }
    .project {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        margin-bottom: 4rem;
    }
    /* El contenido se abre al grid: texto arriba, foto en medio, botón debajo */
    .project__content {
        display: contents;
    }
    .project__content > *:not(.project__links) { order: 1; }
    .project__visual { order: 2; }
    .project__links  { order: 3; margin-top: 0; }
    /* Forzamos el mismo orden también en los pares (Noray), anulando la asimetría */
    .project:nth-of-type(even) .project__visual { order: 2; }
    .project:nth-of-type(even) .project__content { order: 1; }
    .certs-grid {
        grid-template-columns: 1fr;
    }
}

/* --- 480px (móvil) --- */
@media (max-width: 480px) {
    .hero__actions,
    .contact-box__actions {
        flex-direction: column;
        width: 100%;
    }
    .btn {
        width: 100%;
    }
    .skills-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
    }
    .skill-item {
        padding: 1rem 0.5rem;
    }
    .skill-item i {
        font-size: 2.2rem;
    }

    /* Hero en móvil: título a la izquierda, foto más pequeña y centrada */
    .hero__eyebrow {
        font-size: 0.75rem;
    }
    .hero__title {
        font-size: clamp(2.2rem, 9vw, 2.8rem);
        text-align: left;
    }
    .hero__photo-wrapper {
        max-width: 190px;
        margin: 0 auto;
    }
    .hero__photo-backdrop {
        display: none;
    }
    .hero__subtitle {
        font-size: 1rem;
    }
}