/* ═══════════════════════════════════════════════════════════════
   SORTEIG — HOME NOVA (PLANTILLAS/home_nou.php)
   Estils copiats del Sorteig de la web nova (trias.neorgdata.com,
   css/estils_projecte.css · bloc "SORTEIG — Landing pelada") i
   adaptats a aquest web antic. Tot va acotat a #sorteig-landing o a
   body:has(#sorteig-landing): la home antiga (home.php) no es toca.

   Ordre del fitxer:
     1. Fonts (Tiller / Possible)
     2. Reset contra els estils globals antics (css/estils.css)
     3. Capçalera i peu antics d'index.html
     4. Estils del Sorteig nou (còpia literal, sense el mockup)
     5. Ajustos del formulari antic dins el disseny nou
     6. Popups (codi, galetes, final i legals) amb l'aspecte nou
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. Fonts ── */
@font-face {
    font-family: Tiller;
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    src: url(../fonts/Tiller-Medium.woff2) format("woff2");
}
@font-face {
    font-family: Possible;
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    src: url(../fonts/Possible.woff2) format("woff2");
}
@font-face {
    font-family: Possible;
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    src: url(../fonts/PossibleMedium.woff2) format("woff2");
}
@font-face {
    font-family: Possible;
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    src: url(../fonts/PossibleBold.woff2) format("woff2");
}

/* ── 2. Reset ──
   estils.css posa "* { margin: 0 auto }", Gotham, letter-spacing:1px,
   line-height:24px i inputs beix de 41px. #sorteig-landing * (1,0,0)
   perd contra totes les regles "#sorteig-landing .classe" (1,1,0), o
   sigui que només neteja allò que el disseny nou no defineix. */
#sorteig-landing,
#sorteig-landing * {
    margin: 0;
    letter-spacing: normal;
    box-sizing: border-box;
}
#sorteig-landing {
    color: #1b1b1b;
    font-size: 16px;
    line-height: 1.5;
}

/* ── 3. Capçalera i peu antics ──
   Fora la imatge de capçalera (cap1/cap2), el fons Top_Trias i el peu:
   el disseny nou és una landing pelada. El selector d'idioma es manté
   (cal per canviar CA/ES) però flotant sobre la banda granate. */
body:has(#sorteig-landing) { background: #fff; }
body:has(#sorteig-landing) header .img_cap,
body:has(#sorteig-landing) footer { display: none !important; }

body:has(#sorteig-landing) div#top {
    position: absolute;
    height: auto;
    max-height: none;
    background: none;
    z-index: 50;
    pointer-events: none;      /* abans tapava 300px de pàgina */
    font-size: 0;              /* el   de l'index */
}
body:has(#sorteig-landing) #top .container {
    max-width: none;
    padding: 22px clamp(18px, 3vw, 48px) 0;
    text-align: right;
}
body:has(#sorteig-landing) #idiomes {
    float: none;
    pointer-events: auto;
    color: #f2e1cc;
    font-family: 'Possible', sans-serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.6;
}
body:has(#sorteig-landing) #idiomes i { font-size: 10px; margin-left: 4px; }
body:has(#sorteig-landing) #idiomes ul {
    background-color: #f2e1cc;
    border-radius: 0 0 8px 8px;
    padding: 6px 10px;
}
body:has(#sorteig-landing) #idiomes ul li a { color: #5e0e02 !important; }
body:has(#sorteig-landing) #idiomes ul li a:hover { color: #db001c !important; }

/* ── 4. Estils del Sorteig nou ── */
#sorteig-landing {
    --s-granate: #5e0e02;
    --s-vermell: #db001c;
    --s-crema:   #f2e1cc;
    --s-crema-titol: #ecdcc0;

    position: relative;
    min-height: 100vh;          /* el hero ocupa com a mínim tota la pantalla */
    background: #fff;
    font-family: 'Possible', sans-serif;
}

/* Secció "hero" granate: títol + formulari (l'antiga pantalla completa) */
/* min-height (no height fix) i overflow visible: amb el text de premis llarg
   (llistat d'articles + nota) la columna pot ser mes alta que 100vh, i amb
   height fix + overflow:hidden es tallava en silenci sense error visible. */
/* overflow-x:clip (no "hidden"): talla qualsevol sagnat lateral de les
   filigranes sense crear un contenidor de scroll ni tallar en vertical.
   Sense aixo, una deco ancorada a l'esquerra amb px fixos genera scroll
   horitzontal a tot el mobil. */
#sorteig-landing .sorteig-hero {
    position: relative;
    min-height: 100vh;
    overflow: visible;
    overflow-x: clip;
}

/* Banda superior granate — deixa una franja blanca a baix.
   Al disseny el tall queda a ~mitja alçada del bodegó de galetes. */
#sorteig-landing .sorteig-top {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 60%;
    background-color: var(--s-granate);
    z-index: 0;
}

/* Logo TRIAS centrat a dalt — més gran i amb aire a dalt/baix */
#sorteig-landing .sorteig-logo {
    position: absolute;
    top: 34px; left: 50%;
    transform: translateX(-50%);
    z-index: 4;
}
#sorteig-landing .sorteig-logo img { width: 172px; height: auto; display: block; }

/* Filigranes decoratives (dibuix a línia) */
#sorteig-landing .sorteig-deco {
    position: absolute;
    z-index: 1;
    pointer-events: none;
    user-select: none;
    height: auto;
    opacity: 1;
    /* Mateix truc que la imatge de Maria a compromis-home: el PNG porta fons
       blanc/clar, i amb multiply es fon amb el granate de fons en lloc de
       veure's com un requadre. */
    mix-blend-mode: multiply;
}
/* Filigrana dalt esquerra.
   ABANS: "left: 350px" fix. El logo TRIAS va centrat, o sigui que la seva
   vora esquerra es 50% - 86px: per sota de ~1310px de finestra el 350px fix
   se li tirava a sobre, i per sota de ~530px la deco arribava sempre a
   x=529 i generava scroll horitzontal a tot el mobil.
   ARA: el "left" es calcula perque la deco acabi sempre 110px abans del
   centre (86px de mig logo + 24px d'aire), amb sostre a 350px (valor de
   disseny a desktop, que no canvia) i terra a -40px perque a mobils molt
   estrets no desaparegui del tot. Una sola linia cobreix de 320 a 2560. */
#sorteig-landing .sorteig-deco--tl {
    --dtl-w: clamp(120px, 16vw, 220px);
    top: -30px;
    width: var(--dtl-w);
    left: max(-40px, min(350px, calc(50% - 110px - var(--dtl-w))));
    transform: rotate(-6deg);
}
#sorteig-landing .sorteig-deco--tr { top: 60px;   right: 60px; width: 250px; }
/* Ancorada per "top" (no per "bottom"): amb .sorteig-hero a min-height:100vh
   i alcada variable segons contingut, un "bottom" fix segueix creixent cap
   avall amb el contenidor i acaba caient sobre el text de premis. "top" es
   sempre relatiu al mateix punt fix de dalt, independentment de com creixi
   la resta. */
#sorteig-landing .sorteig-deco--br { top: 570px; right: 30px; width: 300px; }

/* Graella de contingut.
   grid-template-areas amb el títol en fila pròpia a dalt (span de les 2
   columnes) i els premis en fila pròpia a sota (span de les 2 columnes),
   perquè quedin centrats/a 100% d'ample independentment de la imatge i
   del formulari. */
#sorteig-landing .sorteig-grid {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    grid-template-areas:
        "title  title"
        "image  form"
        "premis premis";
    column-gap: clamp(30px, 5vw, 90px);
    align-items: start;
    max-width: 1720px;
    /* 100vh (no 100%): el hero té alçada auto, i un % contra un pare auto
       s'ignora — amb vh la graella ocupa de debò tota la pantalla i l'espai
       que sobra queda DINS seu, on align-content el pot repartir. */
    min-height: 100vh;
    margin: 0 auto;
    padding: clamp(125px, 14vh, 170px) clamp(28px, 3.5vw, 64px) clamp(20px, 3.5vh, 44px);
    box-sizing: border-box;
}

/* Reparteix l'espai que sobra entre les tres files (títol / imatge+formulari /
   premis) en lloc de deixar-lo tot al final: baixa el títol perquè no toqui el
   logo i centra el conjunt. Només on hi ha espai de sobra a repartir — amb
   poca alçada el free space és negatiu i space-around cauria a "center",
   que desbordaria per dalt i ficaria el títol sota el logo. */
@media (min-width: 993px) and (min-height: 800px) {
    #sorteig-landing .sorteig-grid { align-content: space-around; }
}

/* ── Títol: fila pròpia, centrada, per sobre de la imatge I del formulari ── */
#sorteig-landing .sorteig-titol-row {
    grid-area: title;
    text-align: center;
    margin-bottom: clamp(6px, 1.2vh, 16px);
}

/* ── Columna esquerra (imatge): alineada al PEU de la fila, que acaba on
   acaba la targeta del formulari. Així baixa fins a trepitjar el tall
   granate→blanc i s'ajusta sola a l'alçada que tingui la targeta, sense
   números màgics. Com que la imatge és més baixa que la fila, no desborda
   ni fa créixer la pàgina. */
#sorteig-landing .sorteig-left {
    grid-area: image;
    align-self: stretch;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
}
/* ── Columna dreta (formulari): els arcs (.sorteig-card-boles) sobresurten
   per sobre de la targeta (position:absolute; bottom:100%) i, sense marge,
   xoquen amb el títol. Aquest padding els deixa respirar sota el títol. ── */
#sorteig-landing .sorteig-right { grid-area: form;  padding-top: clamp(40px, 7vh, 90px); }

#sorteig-landing .sorteig-titol {
    font-family: 'Tiller', serif;
    color: var(--s-crema-titol);
    font-size: clamp(29px, 3.15vw, 63px);
    line-height: 1.02;
    letter-spacing: 0.5px;
    margin: 0;
    text-transform: uppercase;
    font-weight: 500;
    white-space: nowrap;       /* sempre en una sola línia */
}

/* Bodegó de galetes: gran i FLOTANT sobre el tall granate→blanc.
   El z-index alt i el marge negatiu inferior el fan sobresortir cap
   a la franja blanca, tal com al disseny. Sempre al 100% de la seva
   caixa (columna .sorteig-left): sense max-width/max-height, per no
   haver de tornar a ajustar mides per breakpoint. */
#sorteig-landing .sorteig-bodego {
    position: relative;
    z-index: 5;
    display: block;
    width: 100%;
    object-fit: contain;
    object-position: left center;
    height: auto;
    /* Sense marges verticals: la posiciona l'align-items:flex-end del pare */
    margin: 0 0 0 -10px;
    filter: drop-shadow(0 18px 22px rgba(0, 0, 0, 0.28));
}

/* Bloc SORTEGEM: fila pròpia a 100% d'ample, sota la fila imatge/formulari */
#sorteig-landing .sorteig-premis {
    grid-area: premis;
    position: relative;
    width: 100%;
    max-width: none;
    margin-top: clamp(8px, 1.4vh, 16px);
}

/* ── Xarxa de seguretat per a finestres MOLT altes (≥1400px d'alçada) ──
   .sorteig-top fa "height: 60%" del hero, i el hero fa "min-height: 100vh".
   Els clamp() que col·loquen el contingut topen cap a 1250px d'alçada de
   finestra: a partir d'aquí el contingut es queda quiet però la banda
   granate segueix baixant amb la finestra. A 4K (3840x2160), en un monitor
   girat en vertical (1080x1920) o a 2560x2048, la banda arribava a tapar el
   text de premis — text fosc sobre granate, illegible.
   La làmina blanca a sang arrenca on comença el bloc de premis i li menja
   el granate. Va tancada dins d'un @media d'alçada a posta: el pseudo viu
   dins del context d'apilament de .sorteig-grid (z-index 3), o sigui que
   tapa les filigranes (z-index 1) — a alçades normals arribava a esborrar
   el tram baix de la .sorteig-deco--br. Limitant-la a ≥1400px, on la deco
   queda molt per sobre del bloc de premis, no toca res que es vegi, i el
   desktop de sempre queda intacte per construcció (verificat: identic al
   píxel a 1920/1600/1440). */
@media (min-height: 1400px) {
    /* clip també en vertical perquè la làmina no envaeixi el footer */
    #sorteig-landing .sorteig-hero { overflow: clip; }

    #sorteig-landing .sorteig-premis::before {
        content: "";
        position: absolute;
        left: -50vw; right: -50vw;
        top: calc(-1 * clamp(20px, 3vh, 32px));   /* cobreix també el marge superior */
        height: 200vh;
        background-color: #fff;
        z-index: -1;
    }
}

#sorteig-landing .sorteig-premis-titol {
    font-family: 'Tiller', serif;
    color: var(--s-vermell);
    font-weight: 600;
    font-size: clamp(28px, 2.6vw, 38px);
    letter-spacing: 0.5px;
    margin: 0 0 clamp(10px, 1.6vh, 18px);
    text-transform: uppercase;
}
#sorteig-landing .sorteig-premis-text {
    color: #2b2b2b;
    font-size: clamp(16px, 1.25vw, 20px);
    line-height: 1.45;
}
#sorteig-landing .sorteig-premis-text p { margin: 0; }
#sorteig-landing .sorteig-premis-text .sorteig-premis-destacat {
    display: block;
    color: var(--s-vermell);
    font-weight: 700;
    font-size: 0.85em;
    margin-bottom: 10px;
}
#sorteig-landing .sorteig-premis-text .sorteig-premis-mini {
    display: block;
    font-size: 0.85em;
    line-height: 1.35;
    color: #1b1b1b;
    margin: 10px 0;
}
#sorteig-landing .sorteig-premis-text .sorteig-premis-llista {
    display: block;
    font-size: 0.85em;
}
#sorteig-landing .sorteig-premis-text .sorteig-nota {
    display: block;
    margin-top: 10px;
    font-size: 0.7em;
    color: #6b6b6b;
    line-height: 1.35;
}

/* ── Columna dreta: targeta crema ──
   (padding-top de .sorteig-right ja definit més amunt, junt amb .sorteig-left,
   perquè imatge i formulari comencin a la mateixa alçada sota el títol) */
#sorteig-landing .sorteig-card {
    position: relative;
    background-color: var(--s-crema);
    border-radius: 0 0 26px 26px;
    padding: clamp(20px, 3vh, 34px) clamp(38px, 3.2vw, 62px) clamp(26px, 3.8vh, 42px);
    margin-top: 4px;
    max-width: 760px;
}

/* Bolitas (vora dentada) ancorada al caire superior del card */
#sorteig-landing .sorteig-card-boles {
    position: absolute;
    bottom: 100%;
    left: 0; right: 0;
    width: 100%;
    height: auto;
    display: block;
    margin-bottom: -1px;
    pointer-events: none;
}

#sorteig-landing .sorteig-card-titol {
    font-family: 'Tiller', serif;
    color: var(--s-granate);
    font-weight: 600;
    font-size: clamp(18px, 1.45vw, 23px);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    line-height: 1.2;
    margin: 0 0 clamp(14px, 2.4vh, 24px);
    white-space: nowrap;        /* títol en 1 línia com a la captura */
}

/* Condicio de participacio, sota el titol de la targeta.
   El titol redueix el marge inferior i la condicio hereta l'espai que hi
   havia abans del formulari: aixi la targeta nomes creix l'alt del paragraf
   i no s'acumulen dos buits. La font ('Possible') s'hereta de
   #sorteig-landing. */
#sorteig-landing .sorteig-card-titol { margin-bottom: 10px; }

#sorteig-landing .sorteig-card-condicio {
    color: var(--s-granate);
    font-size: 13px;   /* un punt per sobre del text legal dels checks (12px) */
    line-height: 1.45;
    margin: 0 0 clamp(14px, 2.4vh, 24px);
}

/* Si el tag de traduccio encara no existeix, no deixem un buit al mig. */
#sorteig-landing .sorteig-card-condicio:empty { display: none; }

#sorteig-landing .sorteig-row {
    display: flex;
    gap: 34px;
    margin-bottom: clamp(14px, 2.4vh, 24px);
}
#sorteig-landing .sorteig-row--3 .sorteig-field--ampla { flex: 1.6; }
#sorteig-landing .sorteig-row--3 .sorteig-field--curta { flex: 0.65; }
#sorteig-landing .sorteig-field { flex: 1; min-width: 0; }

#sorteig-landing .sorteig-field input {
    width: 100%;
    border: none;
    border-bottom: 1px solid #c4b4a2;
    background: transparent;
    color: #3a2a1a;
    font-family: 'Possible', sans-serif;
    font-size: 14px;
    padding: 6px 2px 8px;
    outline: none;
    box-sizing: border-box;
}
#sorteig-landing .sorteig-field input::placeholder { color: var(--s-granate); opacity: 1; }
#sorteig-landing .sorteig-field input:focus { border-bottom-color: var(--s-vermell); }

/* Checkboxes legals + newsletter (en 1 fila si hi caben) */
#sorteig-landing .sorteig-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 40px;
    margin: 6px 0 18px;
}
#sorteig-landing .sorteig-check {
    display: flex;
    align-items: center;
    gap: 9px;
}
#sorteig-landing .sorteig-check input[type="checkbox"] {
    accent-color: var(--s-vermell);
    width: 14px; height: 14px;
    flex: 0 0 auto;
}
#sorteig-landing .sorteig-check label,
#sorteig-landing .sorteig-check label a {
    color: var(--s-granate);
    font-family: 'Possible', sans-serif;
    font-size: 12px;
    line-height: 1.3;
    text-decoration: none;
}
#sorteig-landing .sorteig-check label a { text-decoration: none; }

/* Botó ENVIAR */
#sorteig-landing .sorteig-btn {
    background-color: var(--s-vermell);
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 12px 42px;
    font-family: 'Possible', sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: filter .15s ease;
}
#sorteig-landing .sorteig-btn:hover { filter: brightness(0.9); }

/* ── Responsive ── */
/* 2K (1921–2560px): mateixos tamanys de font que a 1920 (els clamp ja topen);
   només eixamplem el grid perquè el contingut quedi repartit igual i centrat,
   sense buits laterals. NO toquem font-size (si no, es dispara amb vw). */
@media (min-width: 1921px) {
    #sorteig-landing .sorteig-grid {
        max-width: 2100px;
        grid-template-columns: 1fr 1.15fr;
    }
    /* Caixa del formulari: mateix padding a esquerra i dreta (centrada dins la seva columna) */
    #sorteig-landing .sorteig-right {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    #sorteig-landing .sorteig-card { max-width: 970px; width: 100%; padding-left: 62px; padding-right: 62px; }
    /* Items ~5-10% més grans */
    #sorteig-landing .sorteig-card-titol { font-size: 34px; }
    #sorteig-landing .sorteig-field input { font-size: 21px; }
    #sorteig-landing .sorteig-premis-titol { font-size: 42px; }
    #sorteig-landing .sorteig-premis-text { font-size: 22px; }
    #sorteig-landing .sorteig-check label,
    #sorteig-landing .sorteig-check label a { font-size: 16px; }
    /* La condicio manté la mateixa relació amb el text legal que a la resta
       d'amplades: un punt per sobre (16px -> 17px). */
    #sorteig-landing .sorteig-card-condicio { font-size: 17px; }
    #sorteig-landing .sorteig-btn { font-size: 18px; }
    /* Bodegó galetes: cap a l'esquerra (l'amplada ja és sempre 100%) */
    #sorteig-landing .sorteig-bodego {
        margin-left: -40px;
    }
    /* Títol: una mica més gran, en línia amb la resta d'elements a aquesta amplada */
    #sorteig-landing .sorteig-titol { font-size: 67px; }
}

/* La filigrana de baix a la dreta esta ancorada a "top: 570px" fix. A
   desktop ample queda darrere de la targeta (z-index 1 vs 3) i no es veu;
   per sota de 1200px la targeta es mes curta i la deco li surt per sota,
   quedant a la vista sobre la franja BLANCA — un dibuix pensat per anar
   sobre granate. No hi ha lloc on reubicar-la (a mobil queda 100% tapada
   per la targeta), aixi que a partir d'aqui s'amaga. */
@media (max-width: 1200px) {
    #sorteig-landing .sorteig-deco--br { display: none; }
}

@media (max-width: 1100px) {
    #sorteig-landing .sorteig-card-titol { white-space: normal; }
}

/* Franja intermèdia (~993–1200px, ex. iPad landscape/1024): el grid de 2 columnes
   encara és actiu però tot va més just. */
@media (min-width: 993px) and (max-width: 1200px) {
    /* Columnes més equilibrades que a desktop: la columna de la imatge era
       tan estreta (0.82fr) que la imatge hi quedava minúscula. */
    #sorteig-landing .sorteig-grid {
        grid-template-columns: 1fr 1.28fr;
        column-gap: clamp(24px, 3vw, 44px);
        padding-left: clamp(20px, 2.5vw, 40px);
        padding-right: clamp(20px, 2.5vw, 40px);
    }
    /* Títol una mica més petit perquè "PARTICIPA AL SORTEIG" càpiga en una
       sola línia còmodament a aquesta amplada */
    #sorteig-landing .sorteig-titol { font-size: clamp(24px, 2.9vw, 39px); }
    /* Aquí l'alçada de la imatge la marca l'amplada de columna, i queda molt
       més baixa que la targeta: alineada al peu (com a desktop) se n'anava al
       racó de baix amb un buit granate enorme a sobre. Centrada, el buit es
       reparteix a dalt i a baix. La mida la deixem heretar de desktop, que
       omple l'amplada de la columna. */
    #sorteig-landing .sorteig-left { align-items: center; }
    /* La targeta ocupa tota la seva columna */
    #sorteig-landing .sorteig-card { max-width: none; }
    /* Menys separació entre camps per no forçar l'alçada */
    #sorteig-landing .sorteig-row { gap: 24px; }
}

@media (max-width: 992px) {
    /* En una sola columna el hero ja no pot tenir alçada fixa: que creixi
       segons el contingut i no talli res. */
    #sorteig-landing .sorteig-hero { height: auto; min-height: 0; overflow: visible; overflow-x: clip; }

    /* ── Banda granate ancorada a la TARGETA, no a un px fix ──
       El granate és un pseudo-element de .sorteig-right ancorat amb
       "bottom: calc(100% - X)", o sigui X px per sota del caire superior de
       la targeta, sempre — independentment de com creixi el contingut de
       sobre (títol + imatge, ara en files separades en lloc d'una sola fila
       combinada). La targeta travessa el tall com a desktop, amb la mateixa
       mossegada a qualsevol amplada i sense cap número màgic per breakpoint. */
    #sorteig-landing .sorteig-top { display: none; }
    #sorteig-landing .sorteig-right { position: relative; }
    #sorteig-landing .sorteig-right::before {
        content: "";
        position: absolute;
        /* sagnat lateral generos: el talla l'overflow-x:clip del hero */
        left: -50vw; right: -50vw;
        /* el caire inferior cau X px DINS de la targeta */
        bottom: calc(100% - clamp(150px, 24vw, 230px));
        /* prou alt per cobrir tot el que hi ha per sobre (logo + titol + imatge) */
        height: max(100vh, 720px);
        background-color: var(--s-granate);
        z-index: -1;
    }
    /* El pseudo viu dins de .sorteig-grid (z-index 3), o sigui que taparia
       les filigranes (z-index 1). Les pugem per sobre del grid: a aquestes
       amplades nomes queda la --tl, que ja no toca ni el logo ni la targeta. */
    #sorteig-landing .sorteig-deco { z-index: 5; }
    /* Grid a 1 columna: títol, imatge, formulari i premis en files apilades */
    #sorteig-landing .sorteig-grid {
        grid-template-columns: 1fr;
        grid-template-areas:
            "title"
            "image"
            "form"
            "premis";
        padding-top: 120px;
        padding-bottom: clamp(40px, 6vh, 70px);
        row-gap: 0;
    }
    #sorteig-landing .sorteig-titol-row { margin-bottom: clamp(4px, 1vh, 12px); }
    #sorteig-landing .sorteig-titol {
        max-width: none;
        font-size: clamp(24px, 6.4vw, 44px);   /* una sola línia a qualsevol amplada de mòbil/tablet */
    }
    #sorteig-landing .sorteig-deco--tr { display: none; }
    /* Imatge centrada, pròpia fila */
    #sorteig-landing .sorteig-left {
        display: flex;
        justify-content: center;
        padding-top: 0;
    }
    /* Amb fila pròpia (abans compartia fila amb el títol) la imatge
       segueix al 100% de la seva caixa. */
    #sorteig-landing .sorteig-bodego {
        object-position: center;
        margin: 0 auto;
    }
    /* Formulari centrat a la pàgina i pujat (més a prop de la imatge) */
    #sorteig-landing .sorteig-right {
        padding-top: 0;
        margin-top: clamp(28px, 5vh, 56px);
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    #sorteig-landing .sorteig-card {
        margin-top: 0;
        width: 100%;
        max-width: 760px;
    }
}
/* ── Mòbil (≤600px): títol i imatge en files apilades, es redueixen;
   el formulari passa a 1 sola columna de camps. ── */
@media (max-width: 600px) {
    /* Camps del formulari en columna (1 per fila) */
    #sorteig-landing .sorteig-row { flex-direction: column; gap: 18px; }
    /* Més aire a dalt: logo respira i el títol no queda enganxat */
    #sorteig-landing .sorteig-logo { top: 46px; }
    #sorteig-landing .sorteig-grid { padding-top: 150px; padding-left: 22px; padding-right: 22px; }
    #sorteig-landing .sorteig-titol { font-size: clamp(22px, 7.4vw, 36px); }
    /* Formulari centrat, amb prou separació respecte la imatge */
    #sorteig-landing .sorteig-right { margin-top: clamp(46px, 8vh, 72px); }
    #sorteig-landing .sorteig-card {
        padding: clamp(26px, 5vw, 40px) clamp(22px, 5vw, 40px) clamp(30px, 6vw, 44px);
    }
    #sorteig-landing .sorteig-card-titol { font-size: clamp(16px, 4.4vw, 20px); white-space: normal; }
}

/* 480px: afinem títol/imatge i marges */
@media (max-width: 480px) {
    #sorteig-landing .sorteig-grid { padding-top: 144px; padding-left: 18px; padding-right: 18px; }
    #sorteig-landing .sorteig-titol { font-size: clamp(20px, 7vw, 32px); }
    #sorteig-landing .sorteig-logo img { width: 148px; }
}

/* 440px */
@media (max-width: 440px) {
    #sorteig-landing .sorteig-titol { font-size: clamp(18px, 6.8vw, 28px); }
}

/* 376px (iPhone SE / mòbils petits): mides mínimes perquè tot càpiga */
@media (max-width: 376px) {
    #sorteig-landing .sorteig-grid { padding-top: 138px; padding-left: 16px; padding-right: 16px; }
    #sorteig-landing .sorteig-titol { font-size: clamp(16px, 6.5vw, 24px); }
    #sorteig-landing .sorteig-logo img { width: 132px; }
    #sorteig-landing .sorteig-card { padding-left: 18px; padding-right: 18px; }
}

/* ── 5. Formulari antic dins el disseny nou ── */

/* Els <label> hi són per accessibilitat; visualment mana el placeholder,
   com a la web nova. */
#sorteig-landing .sorteig-field label {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* estils.css: input[type="text"] { height:41px; background:#eae1c9 } */
#sorteig-landing .sorteig-field input[type="text"] {
    height: auto;
    background: transparent;
    letter-spacing: normal;
}
/* .error el posa generic.js (codi2), però per si de cas dins el formulari */
#sorteig-landing .sorteig-field input.error {
    border: none !important;
    border-bottom: 2px solid var(--s-vermell) !important;
}

/* El text de newsletter és llarg (2-3 línies): check alineat a dalt */
#sorteig-landing .sorteig-checks { flex-direction: column; gap: 12px; }
#sorteig-landing .sorteig-check { align-items: flex-start; }
#sorteig-landing .sorteig-check input[type="checkbox"] { margin-top: 1px; }
#sorteig-landing .sorteig-check label a {
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}
#sorteig-landing .sorteig-check label a:hover { color: var(--s-vermell); }

@media (min-width: 1921px) {
    #sorteig-landing .sorteig-field input[type="text"] { font-size: 21px; }
}

/* ── 6. Popups (magnific-popup) amb l'aspecte nou ──
   L'HTML dels popups és a index.html i porta estils inline. Els inline
   amb !important (color/mida dels títols) no es poden sobreescriure, la
   resta sí. #codi i els legals es mouen dins .mfp-content; galetes i pas
   final s'hi copien amb .html(): per això s'apunta a .mfp-content. */
body:has(#sorteig-landing) .mfp-bg {
    background: #5e0e02;
    opacity: 0.88;
}

body:has(#sorteig-landing) .mfp-content .white-popup {
    position: relative;
    max-width: 760px;
    margin: 90px auto 40px;
    padding: clamp(28px, 4vw, 48px) clamp(22px, 4vw, 56px) !important;
    background: #f2e1cc;
    border: none !important;
    border-radius: 0 0 26px 26px;
    color: #5e0e02 !important;
    font-family: 'Possible', sans-serif;
    font-size: 16px !important;
    line-height: 1.45;
    letter-spacing: normal;
}
/* Boletes (vora dentada) dalt de tot, com la targeta del formulari */
body:has(#sorteig-landing) .mfp-content .white-popup::before {
    content: "";
    position: absolute;
    left: 0; right: 0;
    bottom: calc(100% - 1px);
    aspect-ratio: 689 / 54;
    background: url(../imgs/nou/separador_marro_ampliat_v2.svg) no-repeat center bottom / 100% auto;
    pointer-events: none;
}

body:has(#sorteig-landing) .mfp-content .white-popup span,
body:has(#sorteig-landing) .mfp-content .white-popup font {
    font-family: 'Tiller', serif !important;
    letter-spacing: 0.03em;
}

/* Botó X */
body:has(#sorteig-landing) .mfp-content .mfp-close {
    color: #5e0e02 !important;
    opacity: 1;
    font-family: 'Possible', sans-serif;
}
body:has(#sorteig-landing) .mfp-content .mfp-close:hover { color: #db001c !important; }
/* #codi i els legals es mouen sencers dins .mfp-content: la X penja del
   contenidor i no de la caixa crema. L'ajustem a l'amplada del popup i la
   pintem crema, que cau sobre el fons granate, just a sobre la cantonada. */
body:has(#sorteig-landing) .mfp-content > #codi {
    position: relative;
    max-width: 760px;
    margin: 0 auto;
}
body:has(#sorteig-landing) .mfp-content > #codi > .mfp-close,
body:has(#sorteig-landing) .mfp-content > #condicions-legals > .mfp-close,
body:has(#sorteig-landing) .mfp-content > #politica-privacitat > .mfp-close {
    top: 22px;
    right: -6px;
    color: #f2e1cc !important;
}
body:has(#sorteig-landing) .mfp-content > #codi > .mfp-close:hover,
body:has(#sorteig-landing) .mfp-content > #condicions-legals > .mfp-close:hover,
body:has(#sorteig-landing) .mfp-content > #politica-privacitat > .mfp-close:hover { color: #fff !important; }

/* Popup CODI: camp com els del formulari */
body:has(#sorteig-landing) .mfp-content #codi2 {
    display: block;
    width: 100%;
    max-width: 420px;
    height: auto;
    margin: 0 auto 6px;
    padding: 10px 4px;
    border: none;
    border-bottom: 2px solid #c4b4a2;
    background: transparent;
    color: #3a2a1a;
    font-family: 'Possible', sans-serif;
    font-size: 20px !important;
    text-align: center;
}
body:has(#sorteig-landing) .mfp-content #codi2:focus { border-bottom-color: #db001c; }
body:has(#sorteig-landing) .mfp-content #codi2.error {
    border: none !important;
    border-bottom: 2px solid #db001c !important;
}

/* Missatges d'error del codi */
body:has(#sorteig-landing) .mfp-content .codi_validacio {
    max-width: 420px;
    margin: 12px auto 0;
    padding: 10px 14px;
    border: none;
    border-left: 3px solid #db001c;
    border-radius: 4px;
    background: rgba(219, 0, 28, 0.08);
    color: #db001c;
    font-family: 'Possible', sans-serif;
    font-size: 14px;
    line-height: 1.4;
    text-align: left;
}

/* Botó fletxa (codi i galetes) → botó vermell de la web nova */
body:has(#sorteig-landing) .mfp-content .boto_codi {
    display: block;
    margin-top: 26px !important;
    text-align: center;
}
body:has(#sorteig-landing) .mfp-content .boto_codi a { display: inline-block; }
body:has(#sorteig-landing) .mfp-content .boto_codi a span {
    display: inline-block;
    min-width: 120px;
    padding: 10px 34px !important;
    border-radius: 4px;
    background: #db001c !important;
    color: #fff !important;
    font-size: 26px !important;
    line-height: 1;
    transition: filter .15s ease;
}
body:has(#sorteig-landing) .mfp-content .boto_codi a:hover span { filter: brightness(0.9); }

/* Popup GALETES: graella de 4 targetes */
body:has(#sorteig-landing) .mfp-content .contenidor_galetes {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}
body:has(#sorteig-landing) .mfp-content .contenidor_galetes > div {
    width: calc(25% - 9px);
    margin: 0;
    padding: 12px 8px 10px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.55);
    cursor: pointer;
    transition: background .15s ease, box-shadow .15s ease;
}
body:has(#sorteig-landing) .mfp-content .contenidor_galetes > div img { margin-bottom: 8px; }
body:has(#sorteig-landing) .mfp-content .contenidor_galetes > div span {
    display: block;
    color: #5e0e02;
    font-family: 'Possible', sans-serif !important;
    font-size: 13px;
    line-height: 1.25;
}
/* estils.css pinta de vermell tant el div com el seu div intern: aquí
   només la targeta */
body:has(#sorteig-landing) .mfp-content .contenidor_galetes div:hover,
body:has(#sorteig-landing) .mfp-content .contenidor_galetes div.checked { background: transparent; }
body:has(#sorteig-landing) .mfp-content .contenidor_galetes > div:hover { background: #fff; }
body:has(#sorteig-landing) .mfp-content .contenidor_galetes > div.checked {
    background: #db001c;
    box-shadow: 0 6px 14px rgba(94, 14, 2, 0.25);
}
body:has(#sorteig-landing) .mfp-content .contenidor_galetes > div.checked span { color: #fff; }
/* el botó d'enviar va a fila pròpia */
body:has(#sorteig-landing) .mfp-content .contenidor_galetes > .boto_codi { width: 100%; }

/* Popup FINAL */
body:has(#sorteig-landing) .mfp-content .white-popup img {
    border-radius: 12px;
}

/* Popups LEGALS (bases i privacitat): text llarg, alineat a l'esquerra */
body:has(#sorteig-landing) .mfp-content #condicions-legals .white-popup,
body:has(#sorteig-landing) .mfp-content #politica-privacitat .white-popup {
    text-align: left !important;
    max-width: 850px;
}
body:has(#sorteig-landing) #condicions-legals span,
body:has(#sorteig-landing) #politica-privacitat span {
    font-family: 'Possible', sans-serif !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    color: #3a2a1a;
    padding: 0 !important;
}

@media (max-width: 700px) {
    body:has(#sorteig-landing) .mfp-content .white-popup { margin-top: 60px; }
    body:has(#sorteig-landing) .mfp-content .contenidor_galetes > div { width: calc(33.333% - 8px); }
}
@media (max-width: 480px) {
    body:has(#sorteig-landing) .mfp-content .contenidor_galetes > div { width: calc(50% - 6px); }
}