/* RESPONSIVE @480 — hero (diferit) + transversals posicionals del section-system.
   F3.4 2026-06-23: el responsive de seccions s'ha dissolt als components. */
@media (max-width: 480px) {
    .hero-section {
        min-height: 400px;
        padding-top: calc(var(--header-height) + 0);
    }

    .hero-content {
        padding: 30px 15px;
    }

    .hero-content h1 {
        font-size: clamp(1.5rem, 4vw, 2rem);
        margin-bottom: 15px;
    }

    .hero-content .hero-subtitle {
        font-size: 0.75rem;
        margin-bottom: 25px;
        letter-spacing: 0.15em;
    }

    .hero-content p {
        font-size: 0.95rem;
        margin-bottom: 25px;
    }

    /* --- Transversals POSICIONALS @480 (F3.4, 2026-06-23): han de carregar DESPRÉS de les
       bases de secció dels components → es queden a la capa responsive global (com el hero,
       diferit). VIUS a pàgines internes (la-masia/entorn): sprint64 només toca la PORTADA,
       per això a la home semblaven morts; el pixel-gate ho va caçar. .btn @480 té component
       propi → mogut a _buttons.css. La resta (section system) resta global. */
    .section-welcome,
    .section-gallery-strip,
    .section-spaces,
    .section-rooms,
    .section-entorn,
    .section-contact-quick {
        padding: 60px 0;
    }

    .section-header {
        margin-bottom: 40px;
    }

    .section-header h2 {
        font-size: clamp(1.5rem, 4vw, 2rem);
    }
}