/* ============================================================
   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          { opacity: 0.7; }
        .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 {
    }


    /* Nav — ocultar menú desktop, mostrar hamburger */
    .header-nav               { display: none !important; }
    .mobile-menu              { display: flex !important; }

    /* Footer */
    #footer {
        grid-template-columns: 1fr;
        padding: var(--pad);
    }


}


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

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

    :root {
        --real100:   100dvh; 
    }


}


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