/* =========================================
   RESPONSIVE & DESKTOP OVERRIDES
   ========================================== */

/* Móvil → Tablet: empieza a ajustar separaciones */
@media (min-width: 640px) {
    .nav-gate {
        gap: 40px; /* suaviza el salto */
    }
    .gate-link {
        font-size: 0.65rem;
        letter-spacing: 3px; /* evita que el texto estalle en tablet */
    }
    .experience-card {
        padding: 2.5rem 2rem;
    }
    .btn-reserve {
        width: auto;
        padding: 0.9rem 1.5rem;
        font-size: 0.8rem;
    }
}

/* Tablet: aquí empieza el realineado sutil */
@media (min-width: 768px) {
    .nav-gate {
        gap: 50px; /* sube paulatinamente */
    }
    .gate-link {
        font-size: 0.6rem;
        letter-spacing: 4px;
    }
    .experience-card {
        padding: 3rem;
    }
    .btn-reserve {
        width: auto;
        padding: 1rem 2rem;
    }
}

/* Desktop → 2 columnas, pero sin romper el flujo vertical */
@media (min-width: 1024px) {
    .content {
        display: grid;
        grid-template-columns: 1.2fr 1fr; /* le da un poco más de peso al texto que a la imagen */
        gap: 60px;
        align-items: flex-start;
        text-align: left;
    }
}