/* ==========================================================================
   El Moll de la Sort — components
   CSS translation of the design-system components used by the Portada:
   Button (components/buttons/Button.jsx), NumCard, Header, Footer, Etiqueta,
   rajola band. Printed-paper rules: radius 0 everywhere except the pill,
   no shadows, hierarchy via background colour + 1px hairlines in --filet.
   ========================================================================== */

/* --- Reset ------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
/* §09 · «los componentes se muestran siempre en su versión clara, porque la
   web se publica en modo claro únicamente». Declarar-ho és el que evita que un
   navegador en mode fosc pinti amb el seu propi crom els controls natius —les
   cinc caselles del cercador i la barra de desplaçament— fora de paleta. */
html{-webkit-text-size-adjust:100%;color-scheme:light}
body{margin:0;overflow-x:hidden}
img,svg{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit}
p{margin:0}
:focus-visible{outline:2px solid var(--blau);outline-offset:2px}

/* `manipulation` treu el retard de ~300 ms que iOS espera per si ve un segon
   toc, i no toca el pinch: la conversió principal d'aquest lloc és un toc al
   telèfon (§09) i pagava aquell retard. I el ressaltat del toc passa del blau
   del sistema al granat de la casa, que és l'única cosa que hi feia falta. */
a,button,input,select,textarea,summary,[role="button"]{
  touch-action:manipulation;
  -webkit-tap-highlight-color:color-mix(in srgb,var(--vi) 18%,transparent);
}
[hidden]{display:none!important}

/* --- Overrides del sistema --------------------------------------------
   Los cuatro ficheros de `tokens/` son espejo literal del sistema remoto y
   no se editan a mano: se resincronizan. Lo que no se puede resincronizar es
   un valor que falla WCAG, así que la corrección vive aquí, con su medida.
   `--state-soldout: #8a8072` da 3,25:1 sobre crema. La palabra ESGOTAT y la
   línea de formato y precio son texto pequeño y necesitan 4,5:1. `#6E6459`
   es el mismo gris cálido dos pasos más oscuro: 4,93:1 sobre crema, y sigue
   leyéndose como apagado al lado del `--tinta` de las tarjetas activas.
   Pendiente: llevarlo al sistema remoto para que el espejo lo recoja. */
:root{--state-soldout:#6E6459}

/* --- Accesibilidad -----------------------------------------------------
   WCAG 2.4.1 · Un enlace de salto. La cabecera son dos líneas con nueve
   enlaces: sin esto, quien navega con teclado los recorre en cada página.
   No se oculta con `display:none` (los lectores de pantalla no lo
   anunciarían) sino sacándolo del lienzo hasta que recibe el foco. */
.skip-link{position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--tinta);color:var(--paper);font-size:var(--text-small);
  padding:12px 20px;border-radius:var(--radius-pill);text-decoration:none}
.skip-link:focus-visible{left:var(--space-2);top:var(--space-2)}

/* WCAG 2.2 · 2.5.8 Objetivo mínimo (24x24 px). `text-box: cap alphabetic`
   recorta la caja a la altura de mayúscula —es lo que alinea las líneas base
   de la cabecera— y deja el objetivo en 15 px de alto. Los enlaces cumplen la
   excepción de separación, pero 15 px sigue siendo un objetivo malo con el
   pulgar. El área se amplía con un pseudo-elemento transparente: la retícula
   óptica no se mueve un píxel y el objetivo pasa de 15 a 25.
   Vertical solamente en la nav y el pie, para no solapar objetivos vecinos. */
.lang a,.site-footer__col a{position:relative}
.lang a::after{content:"";position:absolute;inset:-2px -3px}
.site-footer__col a::after{content:"";position:absolute;inset:-4px 0}
/* El «Veure tots els números →» de la portada es el único `.link-more` que va
   solo en su párrafo: 19 px de alto y sin excepción en línea que lo salve,
   porque no hay frase alrededor. El de `.draws__all--lead` sí va dentro de una
   frase y se queda como está. 19 → 27. */
.numbers__all .link-more{position:relative}
.numbers__all .link-more::after{content:"";position:absolute;inset:-4px 0}

/* --- Los pocos estilos que estaban en línea ----------------------------
   Estaban puestos como `style="…"` en el marcado, y eso obliga a abrir la
   política de seguridad de contenido con `style-src 'unsafe-inline'`, que es
   precisamente el agujero que la política existe para tapar. Son nueve
   declaraciones repetidas en las veinte páginas: aquí, con nombre, y la
   política puede quedarse estricta.
   El sprite de iconos se saca del flujo sin ocupar sitio: mide 0x0 y va
   absoluto para que no participe del primer trazado. */
.sprite{position:absolute}
.site-footer__adreça{font-size:15px;line-height:1.6}
.site-footer__horari{font-size:14px}
.site-footer__correu{font-size:15px}
.esglaó-1{margin-top:var(--space-1)}
.esglaó-2{margin-top:var(--space-2)}
.esglaó-3{margin-top:var(--space-3)}
.esglaó-4{margin-top:var(--space-4)}
.en-vi{color:var(--vi)}
.sense-esglaó{margin-top:0}
/* El campo de fichero del panel se oculta sin salir del orden de tabulación:
   su etiqueta es el botón visible. */
.camp-fitxer{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}

/* --- Layout primitives ------------------------------------------------- */
.section{padding-block:var(--space-5);padding-inline:clamp(16px,4vw,var(--space-4))}
.section--tight{padding-block:56px}
.section--flush-top{padding-top:0}
/* §07 · las bandas de sección van en pergamí, no en Paper 2. Ver la nota de
   `.hero__plate` en portada.css: Paper 2 no se distingue del crema y dejaba
   el 71,5 % de la portada convertido en un solo campo perceptivo. Paper 2 se
   queda donde sí funciona: como relleno DENTRO de cajas que un filete delimita
   (el buscador y las tarjetas de número). */
.section--alt{background:var(--pergami)}
/* Sobre pergamí el filete `--filet` desaparece: pasa a crema. */
.section--alt .rule-top,
.section--alt .sorteig + .sorteig,
.section--alt .prize-block{border-color:var(--paper)}
/* Granate de 12-14px sobre pergamí cae a 5,12:1 — pasa AA y falla AAA, y era
   el tipo con menos contraste de la página. `--vi-fosc` sobre pergamí da
   6,93:1 y conserva la familia. Sólo afecta al registro pequeño: el display
   granate sobre pergamí no baja de 7:1 y no necesita corrección. */
.section--alt .label--vi,
.section--alt .etiqueta__label,
.pagina__cap .label--vi{color:var(--vi-fosc)}
/* Las tarjetas dejan de ser invisibles: crema sobre pergamí es una tarjeta
   de verdad (CR 1,61) y no un rectángulo del mismo valor que su banda. El
   borde pergamí sí desaparece contra el campo, así que pasa a filete. */
.section--alt .num-card{border-color:var(--filet)}

/* §05 · el campo de tinta. Existe un alias `--text-prize: var(--or)` que
   sobre crema no se puede usar (2,2:1): está escrito para un fondo oscuro, y
   éste es el único sitio de la portada donde la cifra de premio es el asunto.
   Oro sobre tinta da 9,23:1 y crema sobre tinta 14,86:1.
   Es además lo que rompe el campo corrido: nadal en pergamí no puede tocar
   premis en pergamí, y devolver premis a crema habría reconstruido el mismo
   defecto 500 px más abajo. */
.section--ink{background:var(--tinta);color:var(--paper)}
.section--ink .prize-block{border-color:var(--pergami)}
.section--ink .prize-block__figure{color:var(--text-prize)}
.section--ink .label{color:var(--paper)}
.section--ink .btn--tertiary{color:var(--paper);box-shadow:inset 0 0 0 1.5px var(--pergami)}
.section--ink .btn--tertiary:hover{background:var(--paper);color:var(--tinta)}
.section--campaign{background:var(--surface-campaign);color:var(--text-on-vi)}
.wrap{max-width:var(--content-max);margin-inline:auto}
.rule-top{border-top:var(--border-w-rule) solid var(--border-rule);padding-top:var(--space-5)}

/* --- Type helpers ------------------------------------------------------ */
.label{font-family:var(--font-mono);font-size:var(--text-label);letter-spacing:var(--tracking-label);text-transform:uppercase;line-height:1.6}
.label--vi{color:var(--vi)}
.label--or{color:var(--or)}
.meta{font-family:var(--font-mono);font-size:13px;letter-spacing:.04em;line-height:1.8}
.lead{font-size:clamp(17px,1.4vw,20px);line-height:1.55;max-width:52ch}
.h2{font-family:var(--font-display);font-weight:600;font-size:clamp(32px,4vw,46px);line-height:var(--lh-display-l);margin:0}
.h3{font-family:var(--font-display);font-weight:600;font-size:clamp(24px,2.4vw,28px);line-height:var(--lh-display-m);margin:0}
/* §06 pide «texto corrido a 66 caracteres máximo». El `ch` de Figtree es el
   ancho del «0», más ancho que la media real: 66ch daban 99 caracteres en
   pantalla. 43ch dan 64-66, que es la regla de verdad. */
.measure{max-width:43ch}
.nowrap{white-space:nowrap}
.link-more{color:var(--text-link);font-weight:600;font-size:16px}

/* --- Button ------------------------------------------------------------ */
.btn{
  font-family:var(--font-body);font-weight:700;font-size:16px;line-height:1;
  min-height:var(--control-h);padding:0 28px;
  border:none;border-radius:var(--radius-pill);
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-1);
  text-align:center;text-decoration:none;cursor:pointer;
}
.btn--sm{min-height:36px;padding:0 20px;font-size:14px}
.btn--block{width:100%}
.btn--primary{background:var(--action-primary);color:var(--text-on-vi)}
.btn--primary:hover{background:var(--action-primary-hover);color:var(--text-on-vi)}
.btn--secondary{background:var(--action-secondary);color:var(--tinta)}
.btn--secondary:hover{background:var(--action-secondary-hover);color:var(--tinta)}
.btn--tertiary{background:transparent;color:var(--vi);box-shadow:inset 0 0 0 1.5px var(--vi)}
.btn--tertiary:hover{background:var(--paper-2);color:var(--vi)}
.btn[aria-disabled="true"],.btn:disabled{opacity:.45;pointer-events:none}
.btn__icon{width:20px;height:20px;flex-shrink:0}

/* --- Etiqueta (mono label · Bodoni figure · small fact) ---------------- */
.etiqueta__label{font-family:var(--font-mono);font-size:var(--text-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--vi)}
.etiqueta__figure{font-family:var(--font-display);font-weight:600;
  font-size:var(--text-display-m);line-height:var(--lh-display-m);
  margin:var(--space-1) 0 4px}
.etiqueta__fact{font-size:var(--text-small)}

/* --- Rajola band (fountain ceramics, cobalt on cream) ------------------ */
.rajola{
  height:14px;background-color:var(--paper);
  background-image:
    repeating-linear-gradient(45deg,var(--blau) 0 5px,transparent 5px 16px),
    repeating-linear-gradient(-45deg,var(--blau) 0 5px,transparent 5px 16px);
}

/* --- Site header -------------------------------------------------------
   The masthead is ONE block of two lines, not two rows of padding.
   Line 1 · symbol · name · claim · 1px rule · the call.
   Line 2 · the six pages · 1px rule · the language switch.
   Both lines run the full 1180px column, so no rectangle of the bar is left
   without work: what used to be a 566x121px hole between the end of the name
   and the phone is now closed by the hairline that joins them, the joinery of
   a newspaper masthead and the same 1px --filet as every other rule here.
   One ink: everything is warm --tinta. Three sizes: the name, one working
   size shared by claim, nav, phone and language, and the announcement band.
   Garnet appears exactly twice, and both times it means action or state.
   --hgutter lines the two lines, and the band, up with the page's column.
   ---------------------------------------------------------------------- */
.site-header{
  /* Amb `env(safe-area-inset-*)`: la capçalera i el ticker van a sang, i en un
     telèfon amb osca en horitzontal el contingut quedava per sota d'ella. */
  --hgutter:max(clamp(16px,4vw,var(--space-4)),calc((100% - var(--content-max)) / 2),
                env(safe-area-inset-left),env(safe-area-inset-right));
  --sym-h:44px;
  /* Enganxada des del primer píxel, i el que fa en baixar és canviar
     d'estat: no entra ni surt. §12 permet UN sol element en moviment i el
     gasta el ticker, que és també l'única guarda de `prefers-reduced-motion`
     del lloc. Una barra que s'anima seria el segon, així que no s'anima res:
     ni transició, ni transform. */
  background:var(--paper);position:sticky;top:0;z-index:10;
  /* The band changes colour at full bleed, which is already the strongest
     separator the page owns; stacking the hero's own top air on top of it
     left the biggest dead gap of the first screen. The header gives that
     air back from its own side of the boundary. */
}
/* z-index 2 keeps the open mobile menu panel over the ticker band below it. */
.site-header__top{border-bottom:var(--border-w-rule) solid var(--border-rule);position:relative;z-index:2}

/* Una sola fila, que és el que dibuixa la lámina de §09: símbol, nom i
   telèfon. Eren dues files amb un `row-gap` de 16, i entre les dues i el seu
   farciment sumaven 48 px de buit vertical dels 112 de la barra. */
.site-header__bar{
  display:flex;align-items:center;
  gap:clamp(16px,1.6vw,var(--space-3));padding:var(--space-2) var(--hgutter);
}

/* Aquí hi havia `.site-header__rule`, dos `<span>` BUITS que estiraven un
   filet per tapar el forat de 566 px entre el nom i el telèfon. Amb una sola
   fila no hi ha forat que tapar, i el propietari llegia aquells filets —cinc
   d'1 px alhora a escriptori— com el que feia caòtica la barra. En queda un,
   el `border-bottom` de `.site-header__top`, que sí que fa feina: tanca la
   barra contra el contingut. */

/* §04 · symbol A ships as supplied — no filter, no transform, no shadow —
   and sits out of flow at the left, so the first line box of the lockup is
   the name and that is what the line aligns to.
   The logotype is live Bodoni Moda, not the raster wordmark: that PNG is
   drawn in neutral grey (#1C1C1C, claim in #565E5E) and §05 asks for warm
   ink, so it never belonged to this palette.
   Protection zone: the crown is ~19% of the symbol height, so 44px of fish
   needs ~8.4px of clear margin. It gets 24px to the name, 16px above and
   13px to the line below. */
.brand{
  flex:none;position:relative;display:block;
  padding-left:calc(var(--sym-h) * .724 + var(--space-3));
  text-decoration:none;color:var(--tinta);
}
.brand__symbol{position:absolute;left:0;top:0;bottom:0;margin-block:auto;height:var(--sym-h);width:auto}
/* Name and claim share the masthead's baseline instead of stacking: the line
   does the work of two and costs the height of one. Below ~1060px, where the
   two of them plus the call stop fitting, the claim drops under the name on a
   6px row and nothing overflows. */
/* Un sol fill des que el claim va al camp fosc del hero: el `flex` amb
   `align-items:baseline` hi era per alinear nom i claim a la mateixa línia de
   base i el `wrap` per deixar-lo caure a sota quan no hi cabien. Ja no hi ha
   res a alinear. */
.brand__name{font-family:var(--font-display);font-weight:600;
  font-size:clamp(34px,5vw,55px);line-height:1;letter-spacing:.004em}
.brand:hover .brand__name{color:var(--vi)}

/* Every line box in the bar is trimmed to cap height and baseline, so the
   air between the lines is the air we asked for and not the font's leading:
   before this the name's own box carried 13px of dead space above its caps.
   Where it is not supported the bar is 7px taller and nothing else changes. */
@supports (text-box:cap alphabetic){
  .brand__name,.lang{text-box:cap alphabetic}
}

/* §09 · the call. ONE grammar at every width: garnet pill, radius 999,
   48px of control height, icon plus the number in mono on paper. This is
   how the design system's SiteHeader composes it, and nothing about it
   changes between 320px and 1920px except the horizontal padding. */
.site-header__reach{margin-left:auto;display:flex;align-items:center;
  gap:clamp(16px,1.6vw,var(--space-3));min-width:0}
.header-phone{
  flex:none;display:inline-flex;align-items:center;gap:var(--space-1);
  min-height:var(--control-h);padding:0 var(--space-3);
  background:var(--action-primary);color:var(--text-on-vi);
  border-radius:var(--radius-pill);text-decoration:none;white-space:nowrap;
  font-family:var(--font-mono);font-weight:500;font-size:16px;letter-spacing:.04em;
}
.header-phone:hover{background:var(--action-primary-hover);color:var(--text-on-vi)}
.header-phone__icon{width:18px;height:18px;flex:none}

/* --- El menú, sempre darrere del botó ----------------------------------
   Panell absolut a TOTES les amplades i a tots els estats. Va tenir dues
   altres formes i el propietari les ha descartat les dues: en línia dins de la
   barra («no queda bien») i cap navegació («tampoco»). Amb el botó sempre
   visible, el mástil es queda com el dibuixa §09 i el menú només apareix quan
   algú el demana — que és, de fet, el «menú debajo» que §09 descriu.

   El panell se superposa al ticker en lloc d'empènyer-lo: obrir el menú no ha
   de moure la pàgina de sota. */
.site-header__nav{position:absolute;inset-inline:0;top:100%;display:none;
  flex-direction:column;align-items:stretch;gap:0;background:var(--paper);
  padding:var(--space-1) var(--hgutter) var(--space-2);
  border-bottom:var(--border-w-rule) solid var(--border-rule)}
.site-header__nav.is-open{display:flex}
.site-header__nav .site-nav{flex-direction:column;align-items:stretch;gap:0}
/* 12+12 de farciment per fila: l'objectiu tàctil surt de 15 px de caixa alta a
   39, ben per sobre dels 24 de la 2.5.8, i el filet separa les files sense
   afegir una segona tinta. */
.site-header__nav .site-nav a{padding-block:12px;
  border-bottom:var(--border-w-rule) solid var(--border-rule)}
@supports (text-box:normal){.site-header__nav .site-nav a{text-box:normal}}
.site-nav{display:flex;flex-direction:column}
.site-nav a{font-size:16px;font-weight:500;color:var(--tinta);text-decoration:none;
  white-space:nowrap}
.site-nav a:hover{color:var(--vi)}
/* Estat sense una segona tinta ni un segon pes: la pàgina on ets es queda de
   la mateixa mida i color i porta un filet granate, l'únic pes que la
   capçalera fa servir. El posa `build.py:marca_actual()` per URL. */
.site-nav a[aria-current="page"]{color:var(--vi)}

/* §07 · traç d'1,75 px a la reixa de 24, i un objectiu de 48 px —per sobre del
   mínim de 44— tot i que el control no dibuixa cap caixa. */
.nav-toggle{display:flex;align-items:center;justify-content:center;
  width:var(--control-h);height:var(--control-h);flex:none;
  background:none;border:none;padding:0;cursor:pointer;
  color:var(--tinta);line-height:0}
.nav-toggle:hover{color:var(--vi)}
.nav-toggle__icon--close{display:none}
.nav-toggle[aria-expanded="true"] .nav-toggle__icon--open{display:none}
.nav-toggle[aria-expanded="true"] .nav-toggle__icon--close{display:block}

.lang{flex:none;font-family:var(--font-mono);font-weight:500;font-size:16px;
  letter-spacing:var(--tracking-label);color:var(--tinta);white-space:nowrap}
/* A drawn 1px rule, not a "|" glyph: the glyph rendered 1.9px wide and gave
   the header two hairline weights for the same job. */
.lang__sep{display:inline-block;width:var(--border-w-rule);height:1em;
  margin-inline:var(--space-1);background:var(--border-rule);vertical-align:-.12em}
.lang a{color:var(--vi);text-decoration:none}
.lang a:hover{color:var(--vi-fosc)}
/* --- Ticker (§09) ------------------------------------------------------
   Garnet band, Bodoni in caps — the one place §06 allows sustained
   capitals — with the ★ in gold, gold only ever on garnet, one star on the
   whole page (§12) and present at every width down to 320px together with
   the phrase it introduces.
   Alignment: centred at every breakpoint. It is the same grammar on a phone
   and on a desktop, and a centred line leaves no one-sided hole of empty
   garnet at the right edge — a static cintillo has no run-up to be seen
   stopping.
   Optical centring: uppercase tracking leaves a phantom space after the
   last glyph of every line, which drags each centred line left by half of
   it. The extra .06em of left padding puts it back.
   Motion: the lead never moves, so the message that justifies the call is
   on screen the instant the page opens, at any width and under any motion
   setting. Only the second slot changes, one whole phrase at a time — no
   word is ever cut in half — 16 s each, one full lap in 48 s, inside the
   §09 window. §12 still has a single moving element on the site. */
/* El marge negatiu era de la capçalera, i des que el ticker n'és germà li
   toca a ell: és l'última banda abans del hero, el canvi de color a sang ja és
   el separador més fort de la pàgina, i sumar-hi l'aire propi del hero deixava
   el forat més gran de la primera pantalla. Retorna l'aire des del seu costat
   de la frontera. */
/* Marge ZERO cap avall, i això és una cicatriu. El ticker portava
   `margin-bottom:-40px` (i -24 a mòbil) per tornar l'aire al hero, que en
   compensava amb 64 px (40 a mòbil) de `padding-top`. A la portada funcionava
   perquè el hero no té fons propi i el solapament no es veia.

   A les ONZE pàgines generades sí que es veia, i era un error de llibre
   d'ordre de pintat: `.pagina__cap` porta fons pergamí i va DESPRÉS a l'arbre,
   així que li pintava a sobre els 40 px de banda granate solapats. El text del
   ticker sobrevivia —els fons es pinten tots abans que el text en línia— i el
   resultat era un filet granate d'uns 8 px amb la frase surant sobre el
   pergamí. El propietari el va enxampar a /nadal.html.

   La compensació passa al costat del hero, que és qui la necessita: el parell
   segueix donant els mateixos 24 px reals (16 a mòbil), la portada no es mou
   ni un píxel i el ticker es pinta sencer a tot arreu. Si algun dia canvia
   l'alçada de la barra o del ticker, el que es recalcula és el `padding-top`
   del hero i prou: ja no hi ha dos números que s'hagin de moure alhora. */
.ticker{background:var(--surface-campaign);color:var(--text-on-vi);overflow:hidden}
.ticker__inner{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;
  column-gap:clamp(14px,1.6vw,22px);row-gap:6px;
  padding-block:var(--space-1);
  padding-right:var(--hgutter);padding-left:calc(var(--hgutter) + .06em);
  text-align:center;
  font-family:var(--font-display);font-weight:600;font-size:clamp(20px,2vw,28px);
  line-height:1.25;letter-spacing:.06em;text-transform:uppercase;
}
.ticker__lead{margin:0;flex:none;white-space:nowrap}
/* El ★ es un separador, y un separador pertenece a lo que le precede: una
   línea puede acabar en separador, pero no puede empezar por él — ahí se lee
   como viñeta de lista. Tres críticos independientes lo señalaron cuando la
   banda envolvía en móvil y el ★ caía al principio de la línea 2.
   Va como pseudoelemento del enunciado visible, precedido de dos espacios
   duros: así es tipográficamente inseparable de la última palabra y no puede
   quedar huérfano a ningún ancho. El `/ ""` le da texto alternativo vacío,
   para que no se lea como «estrella negra». */
.ticker__lead > span:not([hidden])::after{
  content:"\00a0\00a0\2605" / "";
  color:var(--or);font-size:max(8px,.27em);
}
.ticker__tail{flex:none;display:flex;align-items:baseline;column-gap:clamp(14px,1.6vw,22px)}
/* The rotating slot is as wide as its widest phrase, so the three phrases are
   written to the same measure (475 / 471 / 465px at 28px): the gap either side
   of the ★ stays the same 22-26px whichever phrase is on screen, instead of
   growing by half the difference. */
/* The ornament is a third of the cap height, never the size of the text it
   separates, and it holds the same 8px at every width instead of shrinking
   out of sight with the type. */
.ticker__rotator{display:grid;flex:none;align-items:baseline}
.ticker__phrase{grid-area:1/1;white-space:nowrap;opacity:0;animation:ticker-phrase 48s linear infinite}
.ticker__phrase:nth-child(2){animation-delay:16s}
.ticker__phrase:nth-child(3){animation-delay:32s}
@keyframes ticker-phrase{0%{opacity:0}1%,32%{opacity:1}33%,100%{opacity:0}}
/* §09 · the band stops. Nothing is lost: the whole lead is static anyway
   and the first phrase stays put beside it. */
@media (prefers-reduced-motion:reduce){
  .ticker__phrase{animation:none;opacity:0}
  .ticker__phrase:first-child{opacity:1}
}

/* --- NumCard ----------------------------------------------------------- */
/* §09: «Cada número es una etiqueta: estado en píldora, número en mono grande
   con espaciado ancho, formato y precio abajo. No hay carrito: el bloque
   termina siempre en el teléfono.»
   §09 pinta «disponible» en cobalto, pero §05 limita el cobalto a «una vez por
   PANTALLA», no por componente: ocho tarjetas producían cinco áreas azules
   repartidas por todo el ancho de la rejilla, que no es un «acento puntual».
   Y nada obligaba a pintarlas — los otros dos estados ya se resuelven sin
   cobalto. Aquí «disponible» va en tinta.
   El cobalto queda reservado a una sola cosa y cobra significado temporal:
   **es la señal de campaña**. Aparece el 1 de octubre como campo del hero
   (§11 fase nadal) y desaparece el 23 de diciembre. Fuera de temporada la
   portada no lleva ni un píxel de cobalto, que §05 permite («una vez como
   MÁXIMO», no «al menos una»). */
.num-card{
  --state-color:var(--tinta);
  border:var(--border-w-rule) solid var(--border-card);background:var(--paper);
  padding:var(--space-2);min-height:152px;
  display:flex;flex-direction:column;gap:12px;color:var(--tinta);
}
/* §09 literal: «estado en cobalto (disponible), tinta gris (agotado)». Lo
   había pasado a tinta al reservar el cobalto como señal de campaña, leyendo
   §05 —«acento puntual, una vez por pantalla»— como un techo que 18 etiquetas
   azules rompían. Vuelvo atrás: la propia hoja de componentes dibuja las
   etiquetas en cobalto y las repite en una sola pantalla, así que el techo de
   §05 gobierna el cobalto como CAMPO, no como marcador de estado. Cobalto
   sobre crema da 6,36:1. Los tres estados son ahora los tres tokens que el
   sistema ya tenía escritos para ellos. */
.num-card[data-state="disponible"]{--state-color:var(--state-available)}
.num-card[data-state="pocs"]{--state-color:var(--state-low)}
/* `opacity:.55` apagaba la tarjeta entera, y con ella el contraste de su
   propia etiqueta: la palabra ESGOTAT quedaba en 3,25:1 antes de aplicar la
   opacidad y por debajo de 2,5:1 después. Un estado no puede volverse
   ilegible justo cuando es la información que importa. El apagado se expresa
   ahora con color —el gris cálido del sistema, subido a 4,93:1 sobre crema—
   y no con transparencia. */
.num-card[data-state="esgotat"]{--state-color:var(--state-soldout)}
.num-card[data-state="esgotat"] .num-card__meta{color:var(--state-soldout)}

/* La píldora de estado: el único radio de la tarjeta (§07). */
.num-card__state{
  align-self:flex-start;
  font-family:var(--font-mono);font-size:11px;font-weight:600;
  letter-spacing:var(--tracking-label);text-transform:uppercase;
  color:var(--state-color);
  border:var(--border-w-rule) solid var(--state-color);
  border-radius:var(--radius-pill);padding:4px 12px;
}
.num-card__num{
  font-family:var(--font-mono);font-weight:600;font-size:clamp(32px,3.4vw,40px);line-height:1;
  letter-spacing:var(--tracking-number);font-variant-numeric:tabular-nums;
}
.num-card[data-state="esgotat"] .num-card__num{color:var(--state-soldout)}
.num-card__meta{
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;
  gap:4px var(--space-1);
  border-top:var(--border-w-rule) solid var(--border-rule);
  padding-top:var(--space-1);margin-top:auto;
  font-size:var(--text-small);line-height:1.35;
}
.num-card__price{font-family:var(--font-mono);white-space:nowrap}

/* Cierre del bloque: el teléfono, y el enlace al listado completo debajo. */
.numbers__close{margin-top:var(--space-4);display:flex;flex-direction:column;
  align-items:flex-start;gap:var(--space-2)}

/* --- Site footer ------------------------------------------------------- */
.site-footer{background:var(--tinta);color:var(--paper);padding:var(--space-5) clamp(16px,4vw,var(--space-4)) var(--space-3)}
.site-footer a{color:var(--paper);text-decoration:none}
.site-footer a:hover{color:var(--or)}
.site-footer__grid{max-width:var(--content-max);margin-inline:auto;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:var(--space-4)}
.site-footer__col{display:flex;flex-direction:column;gap:var(--space-1)}
.site-footer__col .label{margin-bottom:var(--space-1)}
.site-footer__name{font-family:var(--font-display);font-weight:700;font-size:24px;line-height:1}
.site-footer__claim{font-family:var(--font-display);font-style:italic;font-size:13px;color:var(--or);margin-top:6px}
.site-footer__admin{font-family:var(--font-mono);font-size:var(--text-label);letter-spacing:.06em;line-height:1.7;
  margin-top:var(--space-3);opacity:.85}
.site-footer__col a{font-size:15px}
.site-footer__col a.is-legal{font-size:var(--text-small);opacity:.85}
.site-footer__hr{border-top:var(--border-w-rule) solid rgba(243,234,219,.25);margin:12px 0 4px}
.site-footer__legal{max-width:var(--content-max);margin:var(--space-4) auto 0;
  border-top:var(--border-w-rule) solid rgba(243,234,219,.25);padding-top:var(--space-3);
  display:flex;gap:var(--space-3);align-items:flex-start;justify-content:space-between;flex-wrap:wrap}
.site-footer__legal p{font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;line-height:1.8;opacity:.8;max-width:66ch}
.site-footer__seals{display:flex;gap:var(--space-1);flex-wrap:wrap}
.seal{font-family:var(--font-mono);font-size:11px;letter-spacing:var(--tracking-label);
  border:var(--border-w-rule) solid rgba(243,234,219,.45);padding:6px 10px}
.seal--18{font-weight:600;border-color:var(--or);color:var(--or)}
.site-footer__studio{max-width:var(--content-max);margin:var(--space-3) auto 0;
  font-family:var(--font-mono);font-size:11px;letter-spacing:var(--tracking-label);opacity:.65}

/* --- El desplaçament de les ancles ------------------------------------
   Amb la capçalera enganxada, un salt a `#n-08100` o a `#jocs` aterrava
   DARRERE de la barra. `scroll-padding-top` ho resol per a totes les ancles
   del lloc alhora.

   El valor es mesurava contra la barra COMPACTA, que ja no existeix: ara la
   barra manté sempre la seva mida, i el que cal descomptar és tota. La píndola
   de 48 px de §09 fixa el terra, i el farciment de `.site-header__bar` és
   `--space-2` a dalt i a baix (10 px a ≤900), més el filet. Si es toca aquell
   farciment, aquest número es recalcula: si no, les ancles tornen a aterrar
   darrere la barra i no ho avisa ningú. */
:root{
  --barra:calc(var(--control-h) + var(--space-2) * 2 + var(--border-w-rule));
  scroll-padding-top:calc(var(--barra) + var(--space-2));
}
@media (max-width:900px){
  :root{--barra:calc(var(--control-h) + 20px + var(--border-w-rule))}
}

/* L'estat compacte és NOMÉS d'escriptori. Per sota de 900 px la barra ja és
   una fila amb el símbol, el botó i el telèfon: no hi ha res que compactar, i
   aplicar-hi les regles feia dues coses malament —el menú intentava sortir en
   línia i desbordava 62 px a 320, i el símbol baixava a 32 px d'alt, que amb
   la relació del fitxer són 23 d'ample i queda per sota dels 24×24 de la
   2.5.8. Les dues coses les va enxampar l'auditoria forçant l'atribut, que és
   l'única manera de veure aquest estat amb la pestanya oculta. */
/* Aquí hi havia l'estat compacte: en baixar, la barra encongia el símbol i el
   nom i el menú passava a veure's en línia. Existia per REVELAR el menú, i amb
   el botó sempre visible ja no revela res — el propietari ho va dir així:
   «como en este caso siempre va a haber el botón del menú, yo dejaría el header
   con su tamaño normal siempre». Se'n van amb ell l'`IntersectionObserver`, el
   sentinella d'1 px i el seu `data-compacte`.

   La capçalera segueix sent `position:sticky`: el que desapareix és el canvi de
   mida, no l'enganxada. */

/* --- Mobile ------------------------------------------------------------ */
@media (max-width:900px){
  /* §09 mobile header: symbol left, the same garnet call pill against the
     right edge, menu underneath. The hamburger stays next to the brand —
     the thumb's corner belongs to the call, not to a control that converts
     nobody — and so does the air: 16px between symbol and menu, the whole
     slack between that group and the call, 16px of margin on both sides.
     The language switch moves into the panel for the same reason. */
  .site-header{--sym-h:46px}
  .site-header__bar{display:flex;align-items:center;gap:var(--space-2);padding-block:10px}
  .brand{padding-left:0;flex:none}
  .brand__symbol{position:static;margin-block:0}
  .brand__text{display:none}
  .site-header__reach{gap:var(--space-2)}
  .header-phone{padding-inline:var(--space-2)}
  @supports (text-box:normal){.lang{text-box:normal}}
  /* Aquí hi havia `.lang{padding-top:16px}`, sense cap comentari que ho
     justifiqués: era una compensació de quan la barra tenia dues files i el
     selector compartia línia amb el menú. Amb `align-items:center` deixava el
     selector 8 px per sota del centre, i en una barra que ha perdut el menú
     això es veu. */
  /* La banda envuelve a este ancho: el lead y su ★ en la primera línea,
     la frase en la segunda.
     El ★ va a un tercio de la altura de tapa (.27em), proporción medida sobre
     la referencia. Pero con la banda a 16 px eso da 4,3 px, y a ese tamaño una
     estrella de cinco puntas deja de ser una estrella: son cuatro píxeles de
     oro y el resto antialias. Aquí manda la legibilidad sobre la proporción. */
  .ticker__lead > span:not([hidden])::after{font-size:11px}
  .ticker__inner{font-size:clamp(14px,4.2vw,22px);line-height:1.2;padding-block:9px}
  /* `flex:none` no encoge, así que el lead conservaba su ancho de max-content
     y el ★ del final se salía de la banda, que tiene overflow:hidden. Aquí
     tiene que poder encoger para que el enunciado y su ★ envuelvan juntos. */
  .ticker__lead{white-space:normal;flex:0 1 auto;min-width:0}
}

/* La fila del mástil no hi cap en un telèfon. A 320 px demanava 385 —símbol
   27 + botó 48 + llengua 61 + telèfon 177, més tres separacions i el
   farciment— i a 375 encara li sobraven 11. Es guanya espai sense perdre res
   que faci feina: del selector queda l'enllaç a l'ALTRA llengua —el codi de
   la que ja s'està llegint no informa de res—, la píndola perd la icona però
   conserva el número, que és el que §09 exigeix, i les separacions baixen un
   graó. El tall a 420 i no a 374 perquè 375, 390 i 414 són les amplades de
   telèfon de veritat. */
@media (max-width:420px){
  .lang__code,.lang__sep{display:none}
  .header-phone__icon{display:none}
  .site-header__bar{gap:var(--space-1)}
}

@media (max-width:374px){
  /* Very narrow phones: the fish steps down and the pill tightens, but the
     number stays — it is the whole point of the button — and so does the ★. */
  .site-header{--sym-h:38px}
  .site-header__bar{gap:12px}
  .header-phone{padding-inline:14px}
}

/* --- Bàner de consentiment --------------------------------------------
   Una franja a baix, no una capa que tapa la pàgina. Un modal enfosquint
   tot el lloc és el patró que fa que la gent accepti per treure'l del mig,
   i aquí acceptar i rebutjar han de costar el mateix.

   §07 al peu de la lletra: **cantonades vives i cap ombra**. El cercador de
   la portada té radi i ombra perquè el propietari ho va demanar per a aquella
   peça i per a cap altra; un bàner legal amb el mateix tractament diria que
   són la mateixa família de coses i no ho són. El que el separa del contingut
   és el filete de §07 i el fons de paper, com la resta del sistema.

   `z-index:20` el posa per damunt de la capçalera enganxada (10) i per sota
   del `skip-link` (100), que ha de seguir sent el primer que rep el focus.

   I **no s'anima**: §12 permet un únic element en moviment i el gasta el
   ticker. Apareix i desapareix, com la píndola d'«Obert ara». */
.consent{position:fixed;left:0;right:0;bottom:0;z-index:20;
  background:var(--paper);
  border-top:var(--border-w-rule) solid var(--border-strong);
  padding:var(--space-3) var(--hgutter,var(--space-3));
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:var(--space-3) var(--space-4);align-items:center;
  max-width:100%}
.consent__cos{max-width:64ch}
.consent__label{margin:0 0 var(--space-1)}
.consent__titol{font-family:var(--font-display);font-weight:600;
  font-size:var(--text-display-m);line-height:var(--lh-display-m);
  color:var(--text-heading);margin:0 0 var(--space-1)}
/* 43ch, i el número el mana **el català**: a 56ch la línia castellana feia 78
   caràcters; a 46ch el castellà baixava a 64 i el CATALÀ es quedava en 68, dos
   per damunt del llistó. Les paraules catalanes són més curtes i n'hi caben
   més amb el mateix ample, i és la segona vegada que passa en aquesta sessió
   —abans a les legals—. **La mesura d'aquest lloc es calibra en català**;
   fer-ho en castellà dona permís per a un ample que el català no aguanta. */
.consent__text{font-size:var(--text-small);line-height:1.5;margin:0;
  max-width:43ch}
/* Els dos botons, EXACTAMENT igual de grans. La guia de la AEPD demana que
   rebutjar sigui igual de fàcil i a la mateixa capa que acceptar; un
   «Rebutjo» més petit o en un segon pas és el patró que sanciona. L'un va
   ple i l'altre perfilat —que és com el sistema distingeix primari de
   terciari— però la superfície de toc és la mateixa. */
.consent__accions{display:flex;flex-wrap:wrap;gap:var(--space-2);
  align-items:center}
.consent__btn{min-width:11ch;justify-content:center}
/* `padding-block` i no res: mesurat, l'enllaç feia 21 px d'alt i la 2.5.8
   demana 24. És un enllaç sol dins d'una fila de botons, no una paraula dins
   d'una frase, o sigui que l'excepció dels enllaços en línia no li val. */
.consent__mes{font-size:var(--text-small);color:var(--text-link);
  font-weight:600;text-decoration:underline;text-underline-offset:3px;
  padding-block:var(--space-1)}

@media (max-width:900px){
  /* A mòbil el bàner ocupa l'ample i els botons van a sota, cada un a mitja
     fila: a 320 px dos botons en línia amb el text al costat no hi caben, i
     el que es trencaria seria l'igualtat entre els dos. */
  .consent{grid-template-columns:minmax(0,1fr);gap:var(--space-2)}
  .consent__titol{font-size:22px;line-height:1.2}
  .consent__btn{flex:1 1 0;min-width:0}
  .consent__mes{flex:1 0 100%}
}

/* --- Canviar la decisió, a la pàgina de galetes ----------------------- */
.consent-canvi{margin-top:var(--space-3);
  border:var(--border-w-rule) solid var(--border-card);
  background:var(--surface-card);padding:var(--space-3)}
.consent-canvi__estat{font-family:var(--font-mono);font-size:var(--text-small);
  margin:0 0 var(--space-2)}

/* --- La porta de 18 anys ----------------------------------------------
   La referència que va portar el propietari era una tarjeta blanca amb
   cantonades rodones i ombra sobre un vel blau marí. Aquí el vel és **tinta**
   i la tarjeta és **paper**, amb el filete de §07 i cantonades vives: la
   paleta del manual ja té un camp fosc i una superfície de paper, i no cal
   inventar-ne cap.

   `z-index:60` la posa per damunt del bàner de galetes (20) i de la capçalera
   (10), i per sota del `skip-link` (100). L'ordre importa: primer l'edat.

   `.te-porta` a l'`<html>` treu l'scroll del darrere mentre la porta és
   oberta. Va a l'element arrel i no al `body` perquè és on el navegador
   resol l'scroll del document. */
.te-porta{overflow:hidden}
.porta{position:fixed;inset:0;z-index:60;
  background:color-mix(in srgb,var(--tinta) 88%,transparent);
  display:flex;align-items:center;justify-content:center;
  padding:var(--space-3);overflow:auto}
.porta__caixa{background:var(--paper);
  border:var(--border-w-rule) solid var(--border-strong);
  padding:clamp(20px,3vw,40px);max-width:44rem;width:100%}
.porta__titol{font-family:var(--font-display);font-weight:600;
  font-size:clamp(26px,3vw,38px);line-height:1.1;
  color:var(--text-heading);margin:var(--space-1) 0 var(--space-2)}
/* 44ch, i el número surt de mesurar dues vegades: a 52ch la línia castellana
   feia 69 caràcters i a 48ch **també 69** —els 584 px que dona 48ch encara hi
   caben—. El llistó són 66. `ch` és l'ample del zero i les minúscules són més
   estretes, o sigui que aquí 44ch són uns 63 caràcters, no 44. Si es toca,
   tornar a mesurar el CASTELLÀ: en aquest bloc és el text llarg. */
.porta__text{font-size:var(--text-body-l);line-height:var(--lh-body);
  margin:0;max-width:44ch}
.porta__pregunta{font-family:var(--font-mono);font-size:var(--text-small);
  letter-spacing:var(--tracking-label);text-transform:uppercase;
  margin:var(--space-3) 0 var(--space-2)}
/* Els dos botons, la mateixa mida. Una porta on dir «no» sigui més difícil
   que dir «sí» no és una porta, és un embut. */
.porta__accions{display:flex;flex-wrap:wrap;gap:var(--space-2);margin:0}
.porta__btn{flex:1 1 16rem;justify-content:center}

@media (max-width:600px){
  .porta__btn{flex:1 1 100%}
}