/* ============================================================
   RESPONSIVE
   ============================================================ */

html {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}


/* ============================================================
   DESKTOP GRANDE — > 1440px
   ============================================================ */

@media only screen and (min-width: 1441px) {

    :root {
    }

}


/* ============================================================
   DESKTOP — > 1080px
   hover states solo en dispositivos con puntero fino
   ============================================================ */

@media only screen and (min-width: 1081px) {

    .mobile      { display: none !important; }
    .desktop     { display: block !important; }

    /* Hover genérico */
    @media (hover: hover) and (pointer: fine) {

        a:hover          { }
        .hover:hover     { color: var(--accent); cursor: pointer; }

  
    }

}


/* ============================================================
   TABLET + MÓVIL LANDSCAPE + TABLET COARSE
   — ≤ 1080px  |  landscape coarse  |  portrait coarse ≤ 1024px
   ============================================================ */

@media only screen and (max-width: 1080px),
       only screen and (pointer: coarse) and (orientation: landscape),
       only screen and (max-width: 1024px) and (pointer: coarse) and (orientation: portrait) {

    .desktop { display: none !important; }
    .mobile  { display: block !important; }

    :root {
    }




}


/* ============================================================
   TELÉFONO — ≤ 768px
   ============================================================ */

@media only screen and (max-width: 768px) {

    :root {
        --real100:   100dvh; 
    }

    /* En vertical el papel es alto y estrecho: todo crece respecto al ancho */
    .paper-ink {
        --u: 1.6cqw;
    }

    .header-title {
        font-size: 2.9cqw;
    }
    .header-title span {
        transform: scale(1.12, 1);
    }

    .landing {
        top: 30%;
    }

    #main > article {
        top: 30%;
        left: 12%;
        right: 8%;
    }

    /* Footer: contacto y organizadores centrados, uno encima del otro */
    .footer-contact {
        left: 0;
        right: 0;
        bottom: calc(var(--u) * 21);
        align-items: center;
        margin-bottom: 30px;
        gap:20px;
    }

    .footer-organized {
        left: 0;
        right: 0;
        bottom: calc(var(--u) * 4);
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .organized-label {
        margin-left: 0;
    }

}


/* ============================================================
   TELÉFONO PEQUEÑO — ≤ 480px
   ============================================================ */

@media only screen and (max-width: 480px) {

    :root {

    }

}


/* ============================================================
   HAMBURGER — base (visible solo en mobile)
   ============================================================ */

.mobile-menu {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
    width: 24px;
    height: 18px;
    margin-left: auto;
}

.mobile-menu .line {
    display: block;
    width: 100%;
    height: 1px;
    background-color: var(--contrast);
    transition: transform 0.2s ease, opacity 0.2s ease, width 0.2s ease;
}

.mobile-menu.is-active .line:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.mobile-menu.is-active .line:nth-child(2) { opacity: 0; width: 0; }
.mobile-menu.is-active .line:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }