/* ALT Riviera · llicència web (1 domini) */
@font-face{
  font-family:"ALT Riviera";
  src:url("../fonts/ALTRiviera-Medium.woff") format("woff");
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"ALT Riviera";
  src:url("../fonts/ALTRiviera-MediumItalic.woff") format("woff");
  font-weight:500; font-style:italic; font-display:swap;
}
@font-face{
  font-family:"ALT Riviera";
  src:url("../fonts/ALTRiviera-Extrabold.woff") format("woff");
  font-weight:800; font-style:normal; font-display:swap;
}

  :root{
    --orange:#f43d2d;
    --green:#14c17b;
    --lilac:#a785ff;
    --pink:#fd6a96;
    --cream:#ede5be;

    /* Mides de partida. El JS les manté fixes mentre hi càpiguen i només les
       redueix quan el contingut deixaria de cabre; el límit el marca la franja
       taronja, on el nom i About s'acabarien tocant. */
    --bar:52px;          /* alçada de la barra de menú: text de 22 px + 15 per sobre i per sota */
    --nav:22px;          /* mida del text del menú i dels apartats a la portada */
    --pad:40px;          /* padding lateral de cada apartat */
    --gap-brand:120px;   /* separació mínima entre el nom i About */
    --legal:clamp(10px, .85vw, 12px);   /* mida del peu legal */
    --marge-portada:18px;  /* a la portada, distància del text a la vora; el JS el recalcula */
    --ease:cubic-bezier(.65,.02,.15,1);
    --speed:.85s;
  }

  *{box-sizing:border-box;margin:0;padding:0}

  /* Present al codi però no a la pantalla: títol i navegació per a cercadors
     i lectors de pantalla. No és display:none perquè llavors no compta. */
  .nomes-lectors{
    position:absolute; width:1px; height:1px; overflow:hidden;
    clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
  }
  html,body{height:100%;overflow:hidden;background:#fff}
  /* Safari a l'iPhone infla la lletra dels blocs amples (el text que corre a les franges del grid
     ho era): amb això cap text no canvia de mida sol i totes les franges es veuen iguals. */
  html{-webkit-text-size-adjust:100%; text-size-adjust:100%}
  body{
    font-family:"ALT Riviera","Helvetica Neue",Arial,sans-serif;
    font-weight:800;
    color:var(--cream);
    -webkit-font-smoothing:antialiased;
  }

  .stage{position:fixed;inset:0}

  /* On va el text dins de la franja.
     A la portada va enganxat a la cantonada inferior, amb la mateixa distància
     a l'esquerra que a sota: un marge petit, proporcional a la franja (com al
     disseny, on és una cinquena part). Per sota es resta la part de la caixa
     que queda sota la línia de base (0,25 em en aquesta tipografia), perquè el
     que es mesuri sigui la lletra i no la caixa.
     Als estats de menú el text va centrat a la barra, amb el padding del menú. */
  .stage{
    --inset-x:var(--pad);
    --text-baix:calc(var(--bar) * 0.24 - var(--nav) * .25);   /* mateixa proporció que les franges de la portada */
    --legal-baix:calc((var(--bar) - var(--legal)) / 2);
  }
  .stage[data-state="intro"],
  .stage[data-state="home"]{
    --inset-x:var(--marge-portada);
    --text-baix:calc(var(--marge-portada) - var(--nav) * .25);
    --legal-baix:calc(var(--marge-portada) - var(--legal) * .25);
  }

  /* Mentre s'arrossega la finestra les transicions es desactiven: el menú
     s'anima i la franja de contingut no, i sense això es persegueixen. */
  .stage.is-resizing .panel,
  .stage.is-resizing .show,
  .stage.is-resizing .brandpage,
  .stage.is-resizing .brandphoto,
  .stage.is-resizing .show__stack,
  .stage.is-resizing .show__stack iframe,
  .stage.is-resizing .brand,
  .stage.is-resizing .panel__label,
  .stage.is-resizing .legal{transition:none}

  /* ---------- Franges ---------- */

  .panel{
    position:absolute;
    top:0; left:0;
    overflow:hidden;
    cursor:pointer;
    transition:width var(--speed) var(--ease),
               height var(--speed) var(--ease);
  }

  .panel[data-id="brand"]{background:var(--orange)}
  .panel[data-id="commercials"]{background:var(--green)}
  .panel[data-id="entertainment"]{background:var(--lilac)}
  .panel[data-id="photography"]{background:var(--pink)}

  /* L'etiqueta viu a la franja inferior, alineada a la dreta (estat portada) */
  .panel__label{
    position:absolute;
    color:#fff;
    right:0; bottom:0;
    height:var(--bar);
    display:flex; align-items:flex-end;
    padding:0 var(--inset-x) var(--text-baix);
    font-size:var(--nav);
    line-height:1;
    letter-spacing:-.01em;
    white-space:nowrap;
    transition:right var(--speed) var(--ease), bottom var(--speed) var(--ease),
               padding var(--speed) var(--ease), color .2s ease;
  }
  /* Mateix rollover que About i Contact: el text deixa passar el color de la
     seva franja (blanc al 75 % sobre verd, lila o rosa). Es fa amb el color i
     no amb opacity: opacity crea una capa nova i fa redibuixar el que hi ha
     sota, i el vídeo amagat sota la franja taronja parpellejava. */
  .panel__label:hover{color:rgba(255,255,255,.75)}

  /* ---------- Franja de marca ---------- */

  .brand{
    position:absolute;
    left:0; right:0; bottom:0;
    height:var(--bar);
    display:flex; align-items:flex-end; justify-content:space-between;
    padding:0 var(--inset-x) var(--text-baix);
    line-height:1;
    white-space:nowrap;
    transition:bottom var(--speed) var(--ease), padding var(--speed) var(--ease);
  }
  /* El nom va per damunt del vídeo (es veu des del primer moment); els
     enllaços, per sota, com els noms dels altres apartats sota la seva franja. */
  .brand__name{position:relative;z-index:2;font-size:var(--nav);letter-spacing:-.01em;cursor:pointer;color:#fff}
  .brand__name{transition:color .2s ease}
  .brand__name:hover{color:rgba(255,255,255,.75)}
  /* margin-left fa de separació mínima; space-between els empeny a la dreta.
     Entre About i Contact hi ha un sol padding, la meitat del que hi havia. */
  .brand__links{position:relative;z-index:0;display:flex;gap:var(--pad);margin-left:var(--gap-brand)}
  .brand__links a{color:#fff;text-decoration:none;font-size:var(--nav);transition:color .2s ease}
  .brand__links a:hover{color:rgba(255,255,255,.75)}

  /* ---------- Slideshow ---------- */

  /* Per damunt de la franja de marca: el que hi ha a sota (About, Contact)
     queda amagat mentre el vídeo la cobreix, i es descobreix quan s'encongeix. */
  .show{
    position:absolute;
    top:0; left:0;
    z-index:1;
    background:var(--orange);
    overflow:hidden;
    transition:width var(--speed) var(--ease),
               height var(--speed) var(--ease),
               left var(--speed) var(--ease),
               top var(--speed) var(--ease),
               opacity .45s ease;
  }
  .show__player{position:absolute;inset:0}
  /* Una capa per vídeo: canviar d'un a l'altre és encendre'n una i apagar l'altra */
  .show__stack{position:absolute;inset:0;opacity:0;transition:opacity .5s ease}
  .show__stack.is-active{opacity:1}
  /* La mida la calcula el JS a partir de la proporció real del vídeo:
     amb regles fixes, qualsevol vídeo que no sigui 16:9 deixa bandes. */
  /* L'iframe s'anima amb la mateixa durada que el marc. Si salta a la mida
     final de cop, durant la reducció el marc és més gran que el vídeo i es
     veu el fons pel mig. */
  .show__stack iframe{
    position:absolute; top:50%; left:50%;
    width:100%; height:100%;
    transform:translate(-50%,-50%);
    border:0; pointer-events:none;
    background:var(--orange);
    transition:width var(--speed) var(--ease), height var(--speed) var(--ease);
  }
  .show__poster{
    position:absolute; inset:0; z-index:1;
    width:100%; height:100%; object-fit:cover;
    transition:opacity .5s ease;
  }
  .show.is-playing .show__poster{opacity:0}

  /* En estat de secció, l'slideshow desapareix */
  [data-state="section"] .show,
  [data-state="brand"] .show,
  [data-state="closing"] .show{opacity:0;pointer-events:none}

  /* Tornant a la portada, el vídeo no apareix fins que la franja taronja ha
     baixat prou per no trepitjar els textos: es comporta com una franja més. */
  .stage.tornant .show{transition-delay:var(--speed)}

  /* ---------- Contingut de sota ---------- */

  .content{
    position:absolute;
    left:0; right:0; bottom:0;
    top:var(--bar);
    background:#fff;
    opacity:0;
    pointer-events:none;
    transition:opacity .5s ease .35s;
    overflow:auto;
  }
  [data-state="section"] .content{opacity:1;pointer-events:auto}

  .content__placeholder{
    height:100%;
    display:flex; align-items:center; justify-content:center;
    color:#c8c8c8; font-weight:500; font-size:15px;
    text-align:center; padding:40px;
  }

  /* ---------- About / Contact ---------- */

  /* La pastilla taronja baixa des de la barra de menú: es revela de dalt a
     baix en comptes d'aparèixer amb un fos. */
  .brandpage{
    position:absolute;
    top:var(--bar); left:0;
    width:50%; bottom:0;
    background:#fff;      /* About, Contact i legals: fons blanc i text negre (abans pastilla taronja) */
    color:#000;
    padding:48px var(--pad) var(--grid-pad);   /* a baix, el mateix marge que el peu dels apartats */
    pointer-events:none;
    clip-path:inset(0% 0% 100% 0%);
    transition:clip-path .6s var(--ease) 0s;
    overflow:auto;
    scrollbar-width:none;              /* Firefox */
    -ms-overflow-style:none;           /* Edge antic */
  }
  .brandpage::-webkit-scrollbar{width:0; height:0}   /* Safari i Chrome */
  [data-state="brand"] .brandpage{clip-path:inset(0% 0% 0% 0%);pointer-events:auto;transition-delay:var(--espera, var(--speed))}

  /* El text no es descobreix amb la pastilla: entra just després, per no
     semblar que l'estiguin escombrant. */
  .brandpage > *{opacity:0;transition:opacity .3s ease}
  [data-state="brand"] .brandpage > *{opacity:1;transition-delay:calc(var(--espera, var(--speed)) + .6s)}
  .brandpage h1{font-size:15px;margin-bottom:18px;letter-spacing:.06em;text-transform:uppercase;opacity:.7}
  .brandpage p{font-weight:500;font-size:18px;line-height:1.5;margin-bottom:14px;max-width:var(--col-text, 52ch)}
  /* Xarxes socials: icones blanques on el disseny té els tres quadrats */
  .brandpage .socials{display:flex;gap:14px;margin-top:34px}
  .brandpage .socials a{display:block;width:26px;height:26px;color:#000;transition:color .2s ease}
  .brandpage .socials a:hover{color:rgba(0,0,0,.6)}
  .brandpage .socials svg{width:100%;height:100%;display:block}
  /* L'«in» del LinkedIn ocupa la mateixa caixa que la resta, però té el punt de
     la i a dalt, sol, i tot el pes a sota: mesurat està centrat, i l'ull el veu
     baix. Un píxel amunt ho compensa. */
  .socials a[data-xarxa="linkedin"] svg{transform:translateY(-1px)}

  .brandphoto{
    position:absolute;
    top:var(--bar); right:0;
    width:50%; bottom:0;
    background:#fff;
    display:flex; align-items:center; justify-content:center;
    opacity:0; pointer-events:none;
    transition:opacity .4s ease 0s;
    color:#c8c8c8; font-weight:500; font-size:14px;
  }
  [data-state="brand"] .brandphoto{opacity:1;transition-delay:calc(var(--espera, var(--speed)) + .6s)}
  /* About i Contact: el text centrat verticalment dins del bloc taronja i sense
     el títol (el nom de la pàgina ja és a la barra). Es centra amb dos
     elements buits de marge automàtic, que a diferència de justify-content
     no tallen el text si algun dia no hi cap i cal fer scroll. Les pàgines
     legals, més llargues, es queden a dalt amb el seu títol. */
  @media (min-width: 769px){
    .brandpage{display:flex; flex-direction:column}
    /* El text es centra a l'espai que queda sobre el peu: dos elements buits
       amb marge automàtic es reparteixen l'espai sobrant, i el peu, últim,
       queda a baix de tot. Si el text no hi cap, tot fa scroll i el peu surt al final. */
    .stage:not(.pagina-legal) .brandpage::before{content:""; margin-top:auto}
    .stage.pagina-contact .brandpage::before{margin-top:0}   /* Contact, a dalt */
    .stage:not(.pagina-legal) .brandpage::after{content:""; margin-bottom:auto; order:1}
    .stage:not(.pagina-legal) .brandpage h1{display:none}
    .brandpage__peu{order:2}
    /* Contact: les xarxes no pengen del text, van a baix de tot amb el peu legal. */
    .stage.pagina-contact .brandpage .socials{order:2; margin:0 0 20px}
    .stage.pagina-contact .brandpage__peu{order:3}
  }

  /* La foto de la pàgina, sencera i sense retallar: tan ampla com les franges Commercials i
     Entertainment juntes (a About i Contact van de la meitat de la pantalla als cinc sisens, és a dir
     dos terços de l'espai blanc), alineada a sota seu i enganxada a dalt, just sota el menú. Si la finestra és baixa
     i no hi cap d'alçada, s'encongeix proporcionalment. */
  /* About i Contact: la meitat dreta en taronja amb la foto centrada. */
  .brandphoto{padding:0; overflow:hidden; justify-content:center; align-items:center; background:var(--orange)}
  .brandphoto img{width:53.3333%; height:auto; max-height:100%; object-fit:contain; display:block}   /* un 20 % més petita que l'amplada de les dues franges */
  /* Contact: igual que About, fons taronja i la foto centrada a la mateixa mida (01-10) */

  /* ---------- Retorn a la portada ---------- */

  /* ---------- Animació d'entrada ---------- */

  /* Mentre el vídeo carrega es veu el seu primer fotograma, quiet, i el nom
     s'omple de blanc a sobre. El nom que s'omple és una còpia col·locada
     exactament damunt del de debò, que mentrestant està amagat; quan el vídeo
     arrenca es fa el canvi, i com que són al mateix lloc no es nota. */



  .intro-nom__base{color:rgba(255,255,255,.28)}
  .intro-nom__ple{
    position:absolute; top:0; left:0;
    width:0; overflow:hidden; white-space:nowrap;
    color:#fff;
    transition:width 2.4s cubic-bezier(.15,.75,.3,1);
  }

  .intro-nom{
    position:fixed;
    z-index:70;
    font-size:var(--nav);
    font-weight:800;
    line-height:1;
    letter-spacing:-.01em;
    color:#fff;
    white-space:nowrap;
    opacity:0;
    pointer-events:none;
    transition:opacity .5s ease;
  }
  .stage.en-intro .intro-nom{opacity:1}
  .stage.en-intro .brand__name{opacity:0}

  /* El nom, About i Contact són part de la franja taronja i viatgen amb ella,
     igual que cada apartat viatja amb la seva: el nom puja amb la vora
     inferior i els enllaços van amb la cantonada. Els enllaços són sota el
     vídeo, i aquest, en encongir-se, els descobreix igual que la taronja
     descobreix "Commercials". */

  /* El peu legal viu on hi ha el nom mentre el vídeo és a pantalla completa:
     no apareix fins que la portada està muntada. */
  .stage.sense-peu .legal{opacity:0}

  /* Peu legal: a la portada viu dins la franja rosa, alineat amb "Images";
     a la resta d'estats fa de peu de pàgina. */
  .legal{
    position:fixed;
    left:var(--inset-x); bottom:0;
    height:var(--bar);
    display:flex; align-items:flex-end; gap:26px;
    padding-bottom:var(--legal-baix);
    z-index:60;
    font-size:var(--legal);
    line-height:1;
    font-weight:500;
    letter-spacing:.01em;
    color:#fff;
    transition:color .4s ease, opacity .4s ease, padding-bottom var(--speed) var(--ease), left var(--speed) var(--ease);
  }
  .legal a{color:inherit;text-decoration:none;opacity:.85}
  .legal a:hover{opacity:1;text-decoration:underline}

  /* El peu fix només viu a la portada, dins la franja rosa. Als apartats, a
     les fitxes i a About/Contact va al final del contingut i es desplaça amb
     l'scroll (.content__peu i .brandpage__peu). */
  [data-state="section"] .legal,
  [data-state="brand"] .legal,
  [data-state="closing"] .legal{opacity:0; pointer-events:none}

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

  /* Peces que només existeixen al mòbil: títol de l'apartat a la barra
     superior, hamburguesa, menú desplegat i foto dins del bloc d'About. */
  .brand__titol, .brand__menu, .menu-mobil, .brandpage__foto, .brand__segona{display:none}

  @media (max-width: 768px){
    .legal, .brandphoto, .brandpage h1{display:none}
    /* Al mòbil el peu no va fix: apareix al final del contingut quan s'hi arriba
       fent scroll, tant als apartats i fitxes com a About i Contact. */
    [data-state="section"] .legal{display:none}
    .stage .content__peu{padding-bottom:var(--inset-x)}
    /* Sota la foto, en una franja blanca amb el text gris */
    .stage .brandpage .brandpage__peu{
      flex:none;
      margin:0 calc(-1 * var(--inset-x));
      padding:18px var(--inset-x) 24px;
      background:#fff; color:#8c8c8c;
    }

    /* V2 · El nom no es mou mai: sempre al lloc que té a la barra superior,
       també durant l'entrada i a la portada. Va fixat a la pantalla, fora
       del flux de la franja, i el títol i l'hamburguesa es col·loquen sols. */
    .brand__name{
      position:fixed;
      left:var(--inset-x);
      top:calc((var(--bar-mobil, 40px) - var(--nav)) / 2);
    }
    .brand__links{margin-left:auto}
    /* A About i Contact, sota la barra de dalt hi ha una segona franja
       taronja amb el títol centrat. És una peça a part, per sota de la
       barra de dalt, que baixa des de sota seu com la franja de color de
       cada apartat: el títol surt de sota la barra taronja igual que els
       altres. El títol de dins la barra no es fa servir al mòbil. */
    .stage .brand .brand__titol{display:none}
    .brand__segona{
      display:block;
      position:absolute; top:0; left:0; width:100%; height:0;
      z-index:35;                       /* entre la marca (40) i els apartats (30) */
      background:var(--orange);
      overflow:hidden;
      transition:height var(--speed) var(--ease);
    }
    .brand__segona span{
      position:absolute; left:0; right:0; bottom:0;
      height:var(--bar);
      display:flex; align-items:flex-end; justify-content:center;
      padding-bottom:var(--text-baix);
      font-size:var(--nav); line-height:1; color:#fff;
    }
    [data-state="brand"] .brandpage{top:calc(var(--bar) * 2)}

    /* Barra superior: nom a l'esquerra, títol al mig (About/Contact) i
       hamburguesa a la dreta. A la portada no hi ha hamburguesa. */
    /* L'hamburguesa, com el nom, va fixada a la pantalla i centrada
       verticalment a la franja de dalt, a la dreta del tot. */
    .brand__menu{
      position:fixed; z-index:2;
      right:var(--inset-x);
      top:calc((var(--bar-mobil, 40px) - var(--nav)) / 2);
      margin-left:0;
      width:24px; height:var(--nav);
      cursor:pointer;
      background:
        linear-gradient(#fff,#fff) 0 0    / 100% 2px no-repeat,
        linear-gradient(#fff,#fff) 0 50%  / 100% 2px no-repeat,
        linear-gradient(#fff,#fff) 0 100% / 100% 2px no-repeat;
    }
    [data-state="section"] .brand__menu,
    [data-state="brand"]   .brand__menu,
    [data-state="closing"] .brand__menu{display:block}
    [data-state="section"] .brand__links,
    [data-state="brand"]   .brand__links,
    [data-state="closing"] .brand__links{display:none}
    [data-state="brand"]   .brand__titol,
    [data-state="closing"] .brand__titol{
      display:block; position:relative; z-index:2;
      font-size:var(--nav); color:#fff;
    }

    /* El títol de l'apartat obert es centra a la barra amb un marge dret
       que calcula el JS, perquè hi llisqui en comptes de saltar-hi. */

    /* El títol de l'apartat nou entra en vertical després de la franja:
       mentre és "entrant" viu amagat a sobre, sense transicions (el padding
       que el centra salta sense que es vegi), i en treure-li la classe baixa. */
    .panel__label{
      transition:right var(--speed) var(--ease), bottom var(--speed) var(--ease),
                 padding var(--speed) var(--ease), color .2s ease,
                 transform .5s var(--ease), opacity .35s ease;
    }
    .panel__label.entrant{transform:translateY(-100%); opacity:0; transition:none}

    /* Contingut sota les dues barres */
    .content{top:calc(var(--bar) * 2)}

    /* About / Contact: bloc taronja d'amplada sencera i la foto a sota, tot
       en una sola columna que fa scroll. */
    .brandpage{width:100%; padding:22px var(--inset-x) 0; display:flex; flex-direction:column}
    .brandpage p{max-width:none; font-size:16px; font-weight:800}
    /* Les icones de les xarxes, amb aire per sota abans de la foto */
    .brandpage .socials{margin-top:30px; margin-bottom:34px}
    /* La foto ocupa tot el que queda fins a baix, i com a mínim un quadrat */
    .brandpage__foto{
      display:block;
      flex:1 0 auto;
      margin:30px calc(-1 * var(--inset-x)) 0;
      background:#fff;
    }
    .brandpage__foto img{width:100%; height:auto; display:block}

    /* Menú desplegat: cinc bandes que es reparteixen l'alçada */
    .menu-mobil{
      position:absolute; top:var(--bar); left:0; right:0; bottom:0;
      z-index:55;
      display:flex; flex-direction:column;
      opacity:0; pointer-events:none;
      transition:opacity .4s ease;   /* el menú apareix i desapareix amb un fos */
    }
    .stage.menu-obert .menu-mobil{opacity:1; pointer-events:auto}
    .menu-mobil a{
      flex:1;
      display:flex; align-items:center; justify-content:center;
      overflow:hidden;
      color:#fff; text-decoration:none;
      font-size:calc(var(--nav) * 1.5);
      line-height:1;   /* la caixa del text és la mida del text: cal per centrar-lo des de baix */
    }
    .menu-mobil a[data-id="commercials"]{background:var(--green)}
    .menu-mobil a[data-id="entertainment"]{background:var(--lilac)}
    .menu-mobil a[data-id="photography"]{background:var(--pink)}
    .menu-mobil a[data-page]{background:var(--orange)}
    .menu-mobil a[data-page="contact"]{border-top:1.5px solid rgba(255,255,255,.35)}
  }

/* ---------- Contingut dels apartats ---------- */

.stage{
  --grid-pad:clamp(16px, 1.5vw, 28px);   /* marge de la graella amb la vora */
  --grid-gap:clamp(14px, 1.25vw, 24px);  /* separació entre peces */
  --grid-radius:8px;
}
.content__inner{padding:var(--grid-pad); min-height:100%; display:flex; flex-direction:column}
.content__inner > *{flex:none}

/* Graella: tres columnes de peces 16:9 */
.graella{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--grid-gap)}
.graella__item{position:relative}
.graella__item a{
  display:block; position:relative;
  aspect-ratio:16/9; overflow:hidden;
  border-radius:var(--grid-radius);
  background:#e9e9e9;
  color:#fff; text-decoration:none;
}
.graella__media{position:absolute; inset:0}
.graella__poster{
  position:absolute; inset:0; z-index:1;
  width:100%; height:100%; object-fit:cover; display:block;
  transition:opacity .35s ease;
}
/* La miniatura només s'aparta quan el vídeo corre de debò i es mira. */
.graella__item.is-hover.is-playing .graella__poster{opacity:0}

.graella__player{position:absolute; inset:0; z-index:0}
.graella__player iframe{
  position:absolute; top:50%; left:50%;
  width:100%; height:56.25%;
  min-height:100%; min-width:177.78%;
  transform:translate(-50%,-50%);
  border:0; pointer-events:none;
}

/* La franja del títol: opaca, del color de l'apartat, enganxada a baix i als
   laterals. Fa una línia de text amb el mateix aire per sobre que per sota. */
.graella__band{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  display:block;
  background:var(--seccio, var(--orange));
  padding:.75em 1em;
  font-weight:800; font-size:clamp(15px, 1.15vw, 22px); line-height:1;
  transform:translateY(100%);
  transition:transform .35s var(--ease);
}
.graella__band > *{
  display:block; margin:0;
  font:inherit; color:inherit;   /* és un h2/h3 per estructura, no per mida */
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* Etiqueta «Campaign» a la dreta de la franja, en pes mitjà, quan la peça té relacionats */
.graella__band:has(.graella__tag){display:flex; align-items:baseline; justify-content:space-between; gap:1em}
.graella__band:has(.graella__tag) > *{min-width:0}
.graella__tag{flex:none; order:2; font-weight:500}

/* Text que no hi cap: corre en bucle mentre la franja és visible (assets/js/marquee.js).
   Quiet (franja amagada o moviment reduït) es veuen els punts suspensius. */
.graella__band .mq__t + .mq__t{display:none}
.graella__band.is-llarg .mq__t{padding-right:2.5em}
.graella__band.is-llarg .mq__t + .mq__t{display:inline}
@keyframes graella-mq{ from{transform:translateX(0)} to{transform:translateX(calc(-1 * var(--mq-dist, 0px)))} }
@media (prefers-reduced-motion: no-preference){
  @media (hover: hover){
    .graella__item:hover .graella__band.is-llarg > h2, .graella__item:hover .graella__band.is-llarg > h3{
      text-overflow:clip;
      -webkit-mask-image:linear-gradient(to right, transparent 0, #000 .5em, #000 calc(100% - 1.5em), transparent 100%);
              mask-image:linear-gradient(to right, transparent 0, #000 .5em, #000 calc(100% - 1.5em), transparent 100%);
    }
    .graella__item:hover .graella__band.is-llarg .mq{display:inline-block; will-change:transform; animation:graella-mq var(--mq-dur, 10s) linear .8s infinite}
  }
  @media (hover: none){
    .graella__item.is-vist .graella__band.is-llarg > h2, .graella__item.is-vist .graella__band.is-llarg > h3{
      text-overflow:clip;
      -webkit-mask-image:linear-gradient(to right, transparent 0, #000 .5em, #000 calc(100% - 1.5em), transparent 100%);
              mask-image:linear-gradient(to right, transparent 0, #000 .5em, #000 calc(100% - 1.5em), transparent 100%);
    }
    .graella__item.is-vist .graella__band.is-llarg .mq{display:inline-block; will-change:transform; animation:graella-mq var(--mq-dur, 10s) linear .8s infinite}
  }
}
@media (prefers-reduced-motion: reduce){
  .graella__band.is-llarg .mq__t{padding-right:0}
  .graella__band.is-llarg .mq__t + .mq__t{display:none}
}
.graella__item:hover .graella__band{transform:translateY(0)}
@media (hover: none){
  .graella__item:hover .graella__band{transform:translateY(100%)}
  /* Tàctil: la franja s'obre i el vídeo corre quan la peça passa pel centre (JS) */
  .graella__item.is-vist .graella__band{transform:translateY(0)}
  .graella__item.is-vist.is-playing .graella__poster{opacity:0}
}

/* ---------- Slideshow d'imatges (fitxa de l'apartat Images) ---------- */

.diapos{position:relative; width:100%; height:100%; background:#f2f2f2}
.diapos__marc{position:absolute; inset:0; cursor:pointer}
.diapos__img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:contain; display:block;
  opacity:0; transition:opacity .4s ease;
}
.diapos__img.is-actual{opacity:1}
.diapos__fletxa{
  position:absolute; top:0; bottom:0; width:18%;
  border:0; background:none; cursor:pointer;
  opacity:0; transition:opacity .25s ease;
}
.diapos__fletxa--prev{left:0} .diapos__fletxa--next{right:0}
.diapos__fletxa::before{
  content:""; position:absolute; top:50%; width:16px; height:16px;
  border:solid #fff; border-width:3px 3px 0 0;
  filter:drop-shadow(0 0 3px rgba(0,0,0,.5));
}
.diapos__fletxa--prev::before{left:22px; transform:translateY(-50%) rotate(-135deg)}
.diapos__fletxa--next::before{right:22px; transform:translateY(-50%) rotate(45deg)}
.diapos:hover .diapos__fletxa{opacity:1}
.diapos__punts{
  position:absolute; left:0; right:0; bottom:12px;
  display:flex; justify-content:center; gap:8px;
}
.diapos__punts i{
  width:8px; height:8px; border-radius:50%; cursor:pointer;
  background:rgba(255,255,255,.55); box-shadow:0 0 3px rgba(0,0,0,.4);
}
.diapos__punts i.is-actual{background:var(--seccio, #fff)}
@media (hover: none){ .diapos__fletxa{opacity:1} }

/* ---------- Pàgines legals ---------- */

/* Com About, però el text ocupa tota l'amplada i no hi ha foto. */
.stage.pagina-legal .brandpage{width:100%}
.stage.pagina-legal .brandphoto{display:none}
.stage.pagina-legal .brandpage p,
.stage.pagina-legal .brandpage li{max-width:72ch}
.stage.pagina-legal .brandpage h2{font-size:15px; margin:26px 0 8px; letter-spacing:.02em}
.stage.pagina-legal .brandpage ul{margin:0 0 14px 1.2em; font-weight:500; font-size:18px; line-height:1.5}
.stage.pagina-legal .brandpage .socials{display:none}
.stage.pagina-legal .brandpage__foto{display:none}

/* Peu al final del contingut, on s'arriba fent scroll */
.content__peu, .brandpage__peu{
  display:flex; flex-wrap:wrap; gap:6px 18px;
  font-size:var(--legal); line-height:1.4; font-weight:500; letter-spacing:.01em;
}
.content__peu{margin-top:auto; padding-top:calc(var(--grid-pad) * 2); color:#8c8c8c}   /* margin auto: a baix de tot */
.content__peu a, .brandpage__peu a{color:inherit; text-decoration:none}
.content__peu a:hover, .brandpage__peu a:hover{text-decoration:underline}
/* A About i Contact: la mateixa línia de peu que a la resta de pàgines, a
   baix de tot del bloc taronja i separada del text, en blanc. */
.brandpage .brandpage__peu{margin:auto 0 0; padding-top:56px; max-width:none; color:#000; font-size:var(--legal); line-height:1.4}

/* ---------- Fitxa de projecte ---------- */

.projecte{color:#3c3c3c; font-weight:500}
.projecte__capcalera{
  display:grid; grid-template-columns:1fr minmax(0, 78%) 1fr;
  align-items:center; gap:var(--grid-gap);
  margin:calc(var(--grid-pad) * .5) 0 var(--grid-pad);
}
.projecte__video{grid-column:2; aspect-ratio:16/9; border-radius:var(--grid-radius); overflow:hidden; background:#111}
/* Fitxa d'imatges: el marc pren la proporció de la foto i no passa de l'alçada de la finestra.
   Les fotos verticals o quadrades deixen espai als costats, i cap d'elles es retalla. */
.projecte__video--foto{aspect-ratio:var(--ratio-foto, 16/9); width:100%; max-height:78vh; background:#f2f2f2}
.projecte__video iframe, .projecte__video img{width:100%; height:100%; border:0; display:block; object-fit:cover}
.projecte__nav{
  color:var(--seccio, var(--orange)); text-decoration:none;
  font-weight:800; font-size:clamp(16px, 1.3vw, 24px);
}
/* Prev i Next, centrats a l'espai blanc que queda a cada costat del vídeo */
.projecte__nav--prev{grid-column:1; justify-self:center}
.projecte__nav--next{grid-column:3; justify-self:center}

/* Sota el vídeo: títol a tota l'amplada; la descripció a 2/3 i les dades a 1/3 */
.projecte__text{
  width:78%; margin:0 auto calc(var(--grid-pad) * 2);
  display:grid; grid-template-columns:1fr; row-gap:0;   /* una sola columna: descripció i, a sota, la fitxa tècnica */
  font-size:18px; line-height:1.45;
}
.projecte__titol{grid-column:1 / -1; font-weight:800; font-size:clamp(18px, 1.45vw, 26px); line-height:1.15; margin-bottom:.6em}
.projecte__cos{grid-column:1; max-width:none}   /* el text ocupa tota l'amplada del vídeo */
.projecte__cos p{margin-bottom:1em}
.projecte__cos p:last-child{margin-bottom:0}
.projecte__cos a{color:inherit}
.projecte__fitxa{grid-column:1; margin-top:1.4em}
.projecte__dades{margin:0}
/* Cada dada és text corrent: «Agency: nom». Sense espai extra entre dades (la mateixa interlínia que la
   descripció) i, si el valor ocupa més d'una línia, la segona torna a començar a l'esquerra, sota l'etiqueta. */
.projecte__dades div{display:block; margin:0}
.projecte__dades dt, .projecte__dades dd{display:inline; margin:0}
.projecte__dades dt{font-weight:800}
.projecte__dades dt::after{content:": "}
/* Dades, «As featured in» i premis: un sol bloc continu, sense espai entre ells (Melissa, 21-09).
   «As featured in» va com les dades: l'etiqueta i la llista seguides a la mateixa línia (29-09). */
.projecte__premis{margin-top:0; display:flex; flex-direction:column}
.projecte__premsa{margin-top:0; display:block}
.projecte__premsa strong::after{content:": "}
.projecte__premis strong, .projecte__premsa strong{font-weight:800}
.projecte__premsa strong, .projecte__premsa span{display:inline}
.projecte__premsa a{color:inherit; text-decoration:underline; text-underline-offset:.15em}
.projecte__premsa a:hover{color:var(--seccio, var(--orange))}

.projecte__seccio{
  color:var(--seccio, var(--orange));
  font-weight:800; font-size:clamp(16px, 1.3vw, 24px); line-height:1;
  margin:calc(var(--grid-pad) * 1.5) 0 calc(var(--grid-gap) * .75);
}
.projecte__seccio:first-child{margin-top:0}

@media (max-width: 768px){
  .content__inner{padding:var(--inset-x)}
  .graella{grid-template-columns:1fr}
  .graella__band{font-size:var(--nav)}

  /* Al mòbil el peu legal es desenganxa de la graella: quan ha aparegut del
     tot es queda fix a baix de la pantalla i la graella continua corrent per
     sota. A sota de la graella hi ha prou marge (--runway, el calcula el JS)
     perquè l'última peça pugui pujar fins a dalt i obrir el seu títol. */
  .content__inner{padding-bottom:calc(var(--inset-x) + var(--runway, 0px))}
  .content__inner.peu-fix{
    padding-bottom:calc(var(--inset-x) + var(--runway, 0px) + var(--peu-h, 0px));
  }
  .content__inner.peu-fix .content__peu{
    position:fixed; left:0; right:0; bottom:0; z-index:6;
    margin:0;
    padding:10px var(--inset-x) var(--inset-x);
    background:#fff;
  }
  /* Prev i Next junts a la dreta, sota el vídeo */
  .projecte__capcalera{grid-template-columns:1fr auto auto; column-gap:22px; margin-top:0}
  .projecte__video{grid-column:1 / -1; grid-row:1}
  .projecte__nav--prev{grid-column:2; grid-row:2; justify-self:end}
  .projecte__nav--next{grid-column:3; grid-row:2; justify-self:end}
  .projecte__text{width:auto; font-size:16px; grid-template-columns:1fr}
  .projecte__cos, .projecte__fitxa{grid-column:1}
  .projecte__fitxa{margin-top:1.4em}
}

/* El text d'About/Contact ve de WordPress: paràgrafs i enllaços amb l'estil del prototip */
.brandpage p a{color:inherit}

/* Contact: dues columnes dins la franja taronja. A l'esquerra la presentació, el contacte directe i les
   xarxes; a la dreta les oficines. La separació la marca el «Llegeix més» (<!--more-->) del contingut. */
.contacte{display:grid; grid-template-columns:1fr 1fr; column-gap:var(--pad); align-items:start; max-width:var(--col-text, 52ch)}
.contacte p{max-width:none}
@media (max-width: 768px){ .contacte{grid-template-columns:1fr; row-gap:0} }