/* El vent de Son Gall — bundle.css (còpia del sistema de disseny, rutes locals)
   Carregat després de tokens.css. Conté les capes (terra · gra · vel · lletra · vent · llum),
   els dispositius de vent (deriva, alena, ràfega), les textures, les icones i els components.
   Cap valor de color viu aquí: tot són var(--token). */

/* ---------- 0. Base ---------- */
html { background: var(--fons); color: var(--tinta); }
body { margin: 0; font-family: var(--font-llibre); font-size: 18px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.14em; }
a:hover { color: var(--accent-fort); }
:focus-visible { outline: var(--corda) solid var(--focus); outline-offset: 2px; }
::selection { background: var(--accent-suau); color: var(--tinta); }
img { display: block; max-width: 100%; }
hr { border: 0; height: var(--fil); background: var(--linia); }

/* ---------- 1. El vent de la pàgina (deriva) ----------
   Cada pàgina declara un vent: <body data-vent="ponent">. L'eix queda a --vent-x / --vent-y
   (cap on bufa) i a --vent-angle (angle de degradat, cap on bufa). Sobrevent = d'on ve;
   sotavent = cap on va. Per defecte, ponent: d'esquerra a dreta. */
:root, [data-vent="ponent"]     { --vent-x: 1;     --vent-y: 0;     --vent-angle: 90deg;  --sobrevent: left;  --sotavent: right; }
[data-vent="llebeig"]           { --vent-x: 0.7;   --vent-y: -0.7;  --vent-angle: 45deg;  --sobrevent: left;  --sotavent: right; }
[data-vent="mestral"]           { --vent-x: 0.7;   --vent-y: 0.7;   --vent-angle: 135deg; --sobrevent: left;  --sotavent: right; }
[data-vent="llevant"]           { --vent-x: -1;    --vent-y: 0;     --vent-angle: 270deg; --sobrevent: right; --sotavent: left; }
[data-vent="gregal"]            { --vent-x: -0.7;  --vent-y: 0.7;   --vent-angle: 225deg; --sobrevent: right; --sotavent: left; }
[data-vent="xaloc"]             { --vent-x: -0.7;  --vent-y: -0.7;  --vent-angle: 315deg; --sobrevent: right; --sotavent: left; }
[data-vent="tramuntana"]        { --vent-x: 0;     --vent-y: 1;     --vent-angle: 180deg; --sobrevent: top;   --sotavent: bottom; }
[data-vent="migjorn"]           { --vent-x: 0;     --vent-y: -1;    --vent-angle: 0deg;   --sobrevent: bottom;--sotavent: top; }

/* La reixa asimètrica 3:5 (sobrevent estret, sotavent ample). */
.deriva { display: grid; grid-template-columns: 3fr 5fr; column-gap: var(--espai-6); align-items: start; }
[data-vent="llevant"] .deriva, [data-vent="gregal"] .deriva, [data-vent="xaloc"] .deriva { grid-template-columns: 5fr 3fr; }
[data-vent="llevant"] .deriva > :first-child, [data-vent="gregal"] .deriva > :first-child, [data-vent="xaloc"] .deriva > :first-child { order: 2; }
[data-vent="tramuntana"] .deriva, [data-vent="migjorn"] .deriva { grid-template-columns: 1fr; row-gap: var(--espai-5); }
/* Un títol comença un pam fora de l'eix. */
.deriva > .fora-eix, .fora-eix { margin-inline-start: var(--espai-7); }
[data-vent="llevant"] .fora-eix, [data-vent="gregal"] .fora-eix, [data-vent="xaloc"] .fora-eix { margin-inline-start: 0; margin-inline-end: var(--espai-7); }
/* Les imatges només sagnen a sotavent. */
.sagna-sotavent { margin-inline-end: calc(-1 * var(--marge, var(--espai-8))); }
[data-vent="llevant"] .sagna-sotavent, [data-vent="gregal"] .sagna-sotavent, [data-vent="xaloc"] .sagna-sotavent { margin-inline-end: 0; margin-inline-start: calc(-1 * var(--marge, var(--espai-8))); }
/* El filet s'atura un pam abans de la vora de sotavent: «se l'endú el vent». */
.filet { height: var(--fil); border: 0; background: linear-gradient(to var(--sotavent), var(--linia) calc(100% - var(--espai-7)), transparent 100%); }
.filet-fort { height: var(--fil); background: linear-gradient(to var(--sotavent), var(--linia-forta) calc(100% - var(--espai-7)), transparent 100%); }
.filet-biga { height: var(--biga); background: linear-gradient(to var(--sotavent), var(--accent) calc(100% - var(--espai-7)), transparent 100%); }

/* ---------- 2. Alena: la lletra que respira ----------
   <h1 class="alena"><span style="--i:0">EL</span> <span style="--i:1">VENT</span> …</h1>
   L'amplada creix paraula a paraula: 70 → 100. Entrada: un sol moviment de 800 ms sobre l'eix del vent. */
.alena { font-family: var(--font-poble); text-transform: uppercase; font-weight: 600; font-stretch: 70%; letter-spacing: 0.01em; line-height: 0.92; }
.alena > span { font-stretch: calc(70% + var(--i, 0) * 6%); display: inline-block; }
.alena.entra, .entra { animation: alenada 800ms cubic-bezier(0.2, 0.7, 0.2, 1) both; }
@keyframes alenada { from { opacity: 0; transform: translate(calc(var(--vent-x) * -24px), calc(var(--vent-y) * -24px)); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .alena.entra, .entra { animation: none; } }
/* Traqueig progressiu per a impressió: 0 → 0,06 em al llarg d'un títol. */
.alena-impres > span { letter-spacing: calc(var(--i, 0) * 0.012em); }

/* ---------- 3. Ràfega: el ritme dels paràgrafs 16 / 24 / 16 / 48 ---------- */
.ratxa > p + p { margin-top: var(--espai-4); }
.ratxa > p:nth-of-type(4n + 2) { margin-top: var(--espai-5); }
.ratxa > p:nth-of-type(4n + 4) { margin-top: var(--espai-7); }

/* ---------- 4. Capes: terra · gra · vel · lletra · vent · llum ----------
   <section class="capa-terra"> … </section>  (afegeix .fosca sobre fons foscos) */
.capa-terra { position: relative; isolation: isolate; background: var(--fons); }
.capa-terra::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: url("/img/textures/gra-fi.webp"); background-size: 512px 512px; mix-blend-mode: multiply; opacity: var(--gra-clar); }
.capa-terra.fosca::before { background-image: url("/img/textures/gra-clar.webp"); mix-blend-mode: soft-light; opacity: var(--gra-fosc); }
.capa-terra.vent::before { background-size: 820px 512px; }           /* gra estirat 1,6× sobre l'eix */
.capa-terra > * { position: relative; z-index: 1; }
[data-theme="nit"] .capa-terra::before { background-image: url("/img/textures/gra-clar.webp"); mix-blend-mode: soft-light; opacity: var(--gra-fosc); }

/* Materials: superfícies de material real (JPEG opac). Només bandes i vores; mai sota text de menys de 24 px. */
.material-calc        { background: var(--calc) url("/img/textures/calc.jpg") center / 640px; }
.material-paper       { background: var(--paper) url("/img/textures/paper-planol.jpg") center / 640px; }
.material-mares       { background: var(--mares) url("/img/textures/mares.jpg") center / 640px; }
.material-call-vermell{ background: var(--call-vermell) url("/img/textures/call-vermell.jpg") center / 640px; }
.material-fusta       { background: var(--fusta) url("/img/textures/fusta.jpg") center / 640px; }
.material-terra-fosca { background: var(--terra-fosca) url("/img/textures/terra-fosca.jpg") center / 640px; }

/* Vels: teles translúcides, sempre lineals sobre l'eix del vent. */
.vel-vent    { background: linear-gradient(var(--vent-angle), var(--vel-vent), transparent 70%); }
.vel-cel     { background: linear-gradient(var(--vent-angle), var(--vel-cel), transparent 75%); }
.vel-memoria { background: var(--vel-memoria); }

/* Llum: una per pàgina, segons l'acte. */
.llum-acte-1 { background: linear-gradient(var(--vent-angle), var(--llum-acte-1), transparent 62%); }
.llum-acte-2 { background: radial-gradient(ellipse 55% 70% at 50% 42%, var(--llum-acte-2), transparent 72%); }
.llum-acte-3 { background: linear-gradient(0deg, var(--llum-acte-3), transparent 70%); }

/* El tul de seda: el vent com a tela. Un sol tul per pàgina, que entra per sobrevent i s'estén cap a sotavent.
   És una capa pròpia (capa 4, Vent): sempre sota la lletra, mai sobre fotografies. PNG amb alfa: les llums en blanc,
   les ombres en fusta; serveix sobre fons clars i foscos. Repetible en horitzontal. */
.tul { position: absolute; inset: 0; pointer-events: none; background-image: url("/img/textures/tul.webp"); background-size: 1600px 1000px; background-repeat: repeat-x; background-position: left top; }
.tul-cel { background-image: url("/img/textures/tul-cel.webp"); }      /* tenyit de cel: Acte I, escenes obertes */
.tul-ample { background-image: url("/img/textures/tul-ample.webp"); }  /* plecs amples a tota amplada: portades, bandes altes */
.tul-suau { opacity: 0.55; }
[data-vent="llevant"] .tul, [data-vent="gregal"] .tul, [data-vent="xaloc"] .tul { transform: scaleX(-1); }   /* amb vent de llevant el tul entra per la dreta */
[data-vent="tramuntana"] .tul { transform: rotate(90deg) scale(1.6); }
[data-vent="migjorn"] .tul { transform: rotate(-90deg) scale(1.6); }
/* Moviment: el tul respira, una sola deriva lenta sobre l'eix del vent; res més es mou a la pàgina. */
.tul.alena-lenta { animation: tul-deriva 28s ease-in-out infinite alternate; }
@keyframes tul-deriva { from { background-position: 0 0; } to { background-position: 80px 12px; } }
@media (prefers-reduced-motion: reduce) { .tul.alena-lenta { animation: none; } }

/* ---------- 5. Tipografia: amplades d'Archivo i registres ---------- */
.rotul-gran { font-stretch: 70%; text-transform: uppercase; }
.rotul { font-stretch: 75%; text-transform: uppercase; }
.xifra { font-stretch: 85%; font-variant-numeric: tabular-nums; }
.etiqueta, .etiqueta-petita { font-stretch: 90%; text-transform: uppercase; }
.ui, .ui-petit { font-stretch: 100%; }
.segell { text-transform: uppercase; color: var(--ferro); }
[data-theme="nit"] .segell { color: var(--tinta-suau); }
.lema { color: var(--tinta-suau); }
.nota { color: var(--tinta-tenue); }
.vers-bloc { padding-inline-start: var(--espai-7); max-width: var(--mesura-estreta); }
.vers-bloc .font { display: block; margin-top: var(--espai-3); color: var(--tinta-suau); font-style: normal; }
.mesura-text { max-width: var(--mesura-text); }
.mesura-estreta { max-width: var(--mesura-estreta); }
.mesura-ampla { max-width: var(--mesura-ampla); }
[lang] { hyphens: auto; -webkit-hyphens: auto; }
[lang="ca"] { quotes: "«" "»" "“" "”"; }
[lang="es"] { quotes: "«" "»" "“" "”"; }
[lang="en"] { quotes: "“" "”" "‘" "’"; }
[lang="fr"] { quotes: "«\202F" "\202F»" "“" "”"; }
q::before { content: open-quote; } q::after { content: close-quote; }

/* La rosa dels vents: mides i variants. Relleu (ferro / llautó) en digital; plana (una tinta) en impressió i sota 48 px. */
.rosa { display: inline-block; width: 96px; height: 96px; background: url("/img/marca/rosa-plana.svg") center / contain no-repeat; }
[data-theme="nit"] .rosa { background-image: url("/img/marca/rosa-plana-os.svg"); }
.rosa-ferro { background-image: url("/img/marca/rosa-ferro.svg") !important; }
.rosa-llauto { background-image: url("/img/marca/rosa-llauto.svg") !important; }
.rosa-gran { width: 240px; height: 240px; }
.rosa-petita { width: 40px; height: 40px; }
/* La rosa gira només quan el vent de la pàgina ho diu: 22,5° per vent, entre dues puntes, mai una volta sencera. */
[data-vent="gregal"] .rosa, [data-vent="llebeig"] .rosa { transform: rotate(22.5deg); }
[data-vent="xaloc"] .rosa, [data-vent="mestral"] .rosa { transform: rotate(-22.5deg); }

/* ---------- 6. Icones: una sola tinta via mask, perquè prenguin el color del text ---------- */
.icona { display: inline-block; width: 24px; height: 24px; vertical-align: -0.3em; background-color: currentColor;
  -webkit-mask: var(--icona) center / contain no-repeat; mask: var(--icona) center / contain no-repeat; }
.icona-petita { width: 16px; height: 16px; }
.icona-avis { --icona: url("/img/icones/avis.svg"); }
.icona-calendari { --icona: url("/img/icones/calendari.svg"); }
.icona-compartir { --icona: url("/img/icones/compartir.svg"); }
.icona-correu { --icona: url("/img/icones/correu.svg"); }
.icona-descarrega { --icona: url("/img/icones/descarrega.svg"); }
.icona-entrada { --icona: url("/img/icones/entrada.svg"); }
.icona-extern { --icona: url("/img/icones/extern.svg"); }
.icona-fletxa-amunt { --icona: url("/img/icones/fletxa-amunt.svg"); }
.icona-fletxa-avall { --icona: url("/img/icones/fletxa-avall.svg"); }
.icona-fletxa-dreta { --icona: url("/img/icones/fletxa-dreta.svg"); }
.icona-info { --icona: url("/img/icones/info.svg"); }
.icona-llengua { --icona: url("/img/icones/llengua.svg"); }
.icona-lloc { --icona: url("/img/icones/lloc.svg"); }
.icona-menu { --icona: url("/img/icones/menu.svg"); }
.icona-menys { --icona: url("/img/icones/menys.svg"); }
.icona-mes { --icona: url("/img/icones/mes.svg"); }
.icona-ok { --icona: url("/img/icones/ok.svg"); }
.icona-pausa { --icona: url("/img/icones/pausa.svg"); }
.icona-programa { --icona: url("/img/icones/programa.svg"); }
.icona-rellotge { --icona: url("/img/icones/rellotge.svg"); }
.icona-reprodueix { --icona: url("/img/icones/reprodueix.svg"); }
.icona-so { --icona: url("/img/icones/so.svg"); }
.icona-tanca { --icona: url("/img/icones/tanca.svg"); }
.icona-vent { --icona: url("/img/icones/vent.svg"); }
.icona-xevron-avall { --icona: url("/img/icones/xevron-avall.svg"); }
.icona-xevron-dreta { --icona: url("/img/icones/xevron-dreta.svg"); }
.icona-xevron-esquerra { --icona: url("/img/icones/xevron-esquerra.svg"); }

/* ---------- 7. Components ---------- */
/* Botó */
.boto { font-family: var(--font-poble); font-size: 15px; line-height: 1.3; font-weight: 500; font-stretch: 100%;
  display: inline-flex; align-items: center; gap: var(--espai-2); padding: var(--espai-3) var(--espai-5);
  border: var(--corda) solid transparent; border-radius: var(--radi-pedra); cursor: pointer; text-decoration: none; background: transparent; color: var(--tinta); }
.boto-principal { background: var(--accent); border-color: var(--accent); color: var(--sobre-accent); }
.boto-principal:hover { background: var(--accent-fort); border-color: var(--accent-fort); }
.boto-secundari { border-color: var(--linia-forta); color: var(--tinta); }
.boto-secundari:hover { background: var(--fons-mig); }
.boto-quiet { color: var(--accent); padding-inline: var(--espai-2); }
.boto-quiet:hover { color: var(--accent-fort); text-decoration: underline; text-underline-offset: 0.2em; }
.boto-petit { font-size: 13px; padding: var(--espai-2) var(--espai-4); }
.boto[disabled], .boto[aria-disabled="true"] { opacity: var(--vel-dens); cursor: not-allowed; }

/* Idiomes */
.idiomes { display: flex; gap: var(--espai-2); list-style: none; padding: 0; margin: 0; }
.idioma { font-family: var(--font-poble); font-size: 13px; font-weight: 600; font-stretch: 90%; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--tinta-suau); padding: var(--espai-2) var(--espai-3); border-bottom: var(--corda) solid transparent; text-decoration: none; }
.idioma:hover { color: var(--tinta); }
.idioma[aria-current="true"] { color: var(--tinta); border-bottom-color: var(--accent); }

/* Fitxa tècnica */
.fitxa { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--espai-5) var(--espai-6); max-width: var(--mesura-ampla); }
.fitxa dt { font-family: var(--font-poble); font-size: 11px; font-weight: 600; font-stretch: 90%; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tinta-suau); }
.fitxa dd { font-family: var(--font-poble); font-size: 44px; line-height: 1; font-weight: 500; font-stretch: 85%; font-variant-numeric: tabular-nums; margin-top: var(--espai-2); }
.fitxa dd small { font-size: 15px; font-weight: 500; font-stretch: 100%; color: var(--tinta-suau); margin-inline-start: var(--espai-1); }

/* Carta: el document de Madrid. Sempre contrallum i ferro, en qualsevol tema: ve d'un altre lloc. */
.carta { font-family: var(--font-ofici); font-size: 15px; line-height: 1.75; background: var(--contrallum); color: var(--ferro);
  border: var(--fil) solid var(--linia-forta); padding: var(--espai-7) var(--espai-8); max-width: 60ch; }
.carta .segell { font-family: var(--font-llibre); font-size: 13px; letter-spacing: 0.12em; color: var(--ferro); margin-bottom: var(--espai-6); }
.carta p + p { margin-top: var(--espai-4); }
.carta .no { font-family: var(--font-cartell); font-size: 56px; line-height: 1; color: var(--nit); margin: var(--espai-5) 0; }

/* Programa: els tres actes */
.programa { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--espai-6); }
.acte { padding-top: var(--espai-4); border-top: var(--biga) solid var(--accent); }
.acte-2 { border-top-color: var(--ferro); }
.acte-3 { border-top-color: var(--blavet); }
.acte .num { font-family: var(--font-poble); font-size: 44px; line-height: 1; font-weight: 600; font-stretch: 70%; text-transform: uppercase; }
.acte .nom { font-family: var(--font-llibre); font-size: 22px; line-height: 1.3; font-style: italic; margin-top: var(--espai-2); }
.acte .llum { font-family: var(--font-poble); font-size: 11px; font-weight: 600; font-stretch: 90%; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tinta-suau); margin-top: var(--espai-3); }

/* Escena (moment): una banda a tota amplada amb la seva paleta */
.escena { padding: var(--espai-8); min-height: var(--espai-11); display: flex; flex-direction: column; justify-content: flex-end; gap: var(--espai-3); position: relative; }
.escena .canco { font-family: var(--font-poble); font-size: 11px; font-weight: 600; font-stretch: 90%; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.8; }
.escena .titol { font-family: var(--font-llibre); font-size: 26px; line-height: 1.25; }
.escena .accent-linia { height: var(--corda); width: var(--espai-9); }