/* ==========================================================================
   PRIME collections — landing (rèplica del XD)
   Unitat --u = 1/100 de l'artboard XD (1270×713). Escala amb l'ample de la
   pantalla però mai supera l'alçada, perquè tot càpiga en una pantalla.
   ========================================================================== */

:root {
    --u: min(1vw, 1.781vh);
    --red: #e30613;
    --ink: #111;
    --line: #555;
    --font: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
    margin: 0;
    font-family: var(--font);
    color: var(--ink);
    background: #f2f2f2 url('/images/prime/marble-bg.jpg') center / cover no-repeat fixed;
    -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }

/* ---------- Barra superior ---------- */

.pc-nav {
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: max(56px, calc(5.2 * var(--u)));
    padding: 0 calc(1.1 * var(--u));
    background: #000;
}

.pc-nav__brand img {
    width: max(170px, calc(23.7 * var(--u)));
}

.pc-nav__right {
    display: flex;
    align-items: center;
    gap: calc(1.6 * var(--u));
}

.pc-lang {
    display: flex;
    align-items: center;
    gap: calc(0.9 * var(--u));
}

.pc-lang__item {
    font-size: max(11px, calc(0.85 * var(--u)));
    letter-spacing: 0.05em;
    color: #8a8a8a;
    text-decoration: none;
    padding: 2px 1px;
}

.pc-lang__item:hover { color: #fff; }

.pc-lang__item.is-active {
    color: var(--red);
    border-bottom: 1px solid var(--red);
}

.pc-nav__toggle {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: max(30px, calc(3.2 * var(--u)));
    height: max(22px, calc(2.3 * var(--u)));
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
}

.pc-nav__toggle span {
    display: block;
    height: max(3px, calc(0.3 * var(--u)));
    background: var(--red);
}

.pc-nav__toggle:focus-visible,
.pc-logo:focus-visible,
.pc-menu__close:focus-visible {
    outline: 2px solid var(--red);
    outline-offset: 4px;
}

/* ---------- Hero ---------- */

.pc-hero {
    min-height: calc(100vh - max(56px, calc(5.2 * var(--u))));
    display: flex;
    justify-content: center;
}

.pc-hero__inner {
    width: calc(100 * var(--u));
    text-align: center;
    padding-bottom: calc(1.5 * var(--u));
}

.pc-hero__title {
    margin: calc(2.8 * var(--u)) 0 0;
}

.pc-hero__title img {
    width: calc(71 * var(--u));
    margin: 0 auto;
}

.pc-hero__lead {
    margin: calc(1.7 * var(--u)) 0 0;
    font-size: calc(1.75 * var(--u));
    font-weight: 500;
    line-height: 1.3;
    white-space: nowrap;
}

.pc-hero__text {
    margin: calc(0.9 * var(--u)) auto 0;
    max-width: calc(90 * var(--u));
    font-size: calc(1.25 * var(--u));
    line-height: 1.5;
}

/* ---------- Divisor ---------- */

.pc-divider {
    display: flex;
    align-items: center;
    gap: calc(1.8 * var(--u));
    margin-top: calc(2.8 * var(--u));
    padding: 0 calc(2.5 * var(--u));
}

.pc-divider span {
    flex: 1;
    height: 1px;
    background: var(--line);
}

.pc-divider p {
    margin: 0;
    font-size: calc(1.55 * var(--u));
    letter-spacing: 0.2em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* ---------- Graella de marques ---------- */

.pc-grid {
    display: grid;
    grid-template-columns: 25% 1px 19.5% 23.5% 1fr;
    grid-template-rows: auto calc(10.5 * var(--u)) calc(12 * var(--u));
    align-items: center;
    margin-top: calc(1.5 * var(--u));
}

.pc-grid__label {
    grid-row: 1;
    margin: 0;
    padding: calc(1.6 * var(--u)) 0 calc(1 * var(--u));
    font-size: calc(0.95 * var(--u));
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.pc-grid__label--kids   { grid-column: 1; }
.pc-grid__label--resort { grid-column: 3 / 6; }

.pc-grid__sep {
    grid-column: 2;
    grid-row: 1 / -1;
    align-self: stretch;
    background: var(--line);
}

.pc-logo {
    grid-column: var(--col);
    grid-row: var(--row);
    justify-self: center;
    width: calc(var(--w) * var(--u));
    transition: opacity 0.2s ease;
}

.pc-logo img {
    width: 100%;
    filter: brightness(0);
}

.pc-logo:hover { opacity: 0.7; }

/* ---------- Menú (overlay negre) ---------- */

.pc-menu {
    position: fixed;
    inset: 0;
    z-index: 100;
    overflow-y: auto;
    background: #000;
    padding: calc(6 * var(--u)) calc(4 * var(--u)) calc(4 * var(--u));
}

.pc-menu[hidden] { display: none; }

.pc-menu__close {
    position: fixed;
    top: calc(1.2 * var(--u));
    right: calc(1.6 * var(--u));
    padding: 4px;
    background: none;
    border: 0;
    color: var(--red);
    font-size: max(36px, calc(4 * var(--u)));
    line-height: 1;
    cursor: pointer;
}

.pc-menu__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: calc(4 * var(--u)) calc(4 * var(--u));
    max-width: calc(96 * var(--u));
    margin: 0 auto;
}

.pc-menu__logo-link {
    display: flex;
    align-items: flex-end;
    height: max(56px, calc(7.5 * var(--u)));
    margin-bottom: calc(1.6 * var(--u));
}

.pc-menu__logo {
    width: calc(var(--w) * var(--u) * 0.9);
    max-width: 100%;
    filter: brightness(0) invert(1);
}

.pc-menu__item p {
    margin: 0;
    font-size: max(13px, calc(1.1 * var(--u)));
    line-height: 1.6;
    color: #e6e6e6;
}

/* ---------- Mòbil ---------- */

@media (max-width: 767px) {
    :root { --u: 2.4vw; }

    body { background-attachment: scroll; }

    .pc-nav__right { gap: 10px; }
    .pc-lang { gap: 7px; }
    .pc-lang__item { font-size: 11px; }

    .pc-hero__inner { width: 100%; padding: 0 20px 48px; }

    .pc-hero__title img { width: 100%; }

    .pc-hero__lead {
        white-space: normal;
        font-size: 17px;
    }

    .pc-hero__text {
        font-size: 14px;
        max-width: none;
    }

    .pc-hero__text br { display: none; }

    .pc-divider { padding: 0; margin-top: 36px; }
    .pc-divider p { font-size: 13px; }

    .pc-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: none;
        row-gap: 28px;
        margin-top: 8px;
    }

    .pc-grid__sep { display: none; }

    .pc-grid__label {
        grid-row: auto;
        grid-column: 1 / -1 !important;
        padding: 20px 0 0;
        font-size: 12px;
    }

    .pc-grid__label--kids   { order: 1; }
    .pc-grid__label--resort { order: 4; padding-top: 32px; }

    .pc-logo {
        grid-column: auto;
        grid-row: auto;
        order: var(--order);
        max-width: 85%;
    }

    .pc-menu { padding: 80px 24px 48px; }
    .pc-menu__grid { grid-template-columns: 1fr; gap: 40px; }
    .pc-menu__logo-link { height: 56px; }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .pc-menu__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
    .pc-logo { transition: none; }
}