/* Fuentes autoalojadas, inline: un @import añade un salto a la cadena de bloqueo. */
@font-face{font-family:'Familjen Grotesk';font-style:normal;font-weight:400 700;font-display:swap;src:url('../fonts/familjen-grotesk-vf-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Familjen Grotesk';font-style:normal;font-weight:400 700;font-display:swap;src:url('../fonts/familjen-grotesk-vf-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:400 600;font-display:swap;src:url('../fonts/newsreader-vf-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:400 600;font-display:swap;src:url('../fonts/newsreader-vf-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Sono';font-style:normal;font-weight:400 700;font-display:swap;src:url('../fonts/sono-vf-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Sono';font-style:normal;font-weight:400 700;font-display:swap;src:url('../fonts/sono-vf-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

/* ==========================================================================
   websdebarrio — «Primer la fem. Després en parlem.»
   Firma: les fileres que es posen d'acord.
   Tokens primero; todo lo demás deriva de ellos. Plan en diseno/plan.md.
   ========================================================================== */

:root{
  /* Color — vidre, tinta i boli. Contrastes calculados sobre los hex reales. */
  --vidre:      #E4EAED;   /* fondo dominante: gris azulado frío, luz de escaparate */
  --full:       #FCFDFD;   /* la hoja: filas y bloques que se levantan del fondo */
  --tinta:      #14181B;   /* texto — 14,7:1 sobre --vidre */
  --grafit:     #565E63;   /* texto secundario y «lo ajeno» — 5,4:1 sobre --vidre */
  --grafit-fort:#454B4F;   /* el mismo papel por debajo de 16 px — 7,3:1 sobre --vidre */
  --boli:       #1B3FD1;   /* ACENTO ÚNICO: azul de bolígrafo — 6,5:1 sobre --vidre */
  --boli-fosc:  #142FA0;   /* hover y acento sobre claro — 8,9:1 */
  --marc:       #C3CDD2;   /* filetes decorativos */
  --marc-fort:  #8FA0A8;   /* bordes con significado (≥3:1) */
  --nit:        #141A22;   /* banda oscura única */
  --nit-text:   #D9E1E6;   /* texto sobre --nit — 13,2:1 */
  --nit-sec:    #96A3AC;   /* secundario sobre --nit — 6,8:1 */
  --nit-boli:   #8FA9FF;   /* acento sobre --nit — 7,7:1 */

  /* Tipografía */
  --lletra-display: 'Familjen Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --lletra-cos:     'Newsreader', Georgia, 'Times New Roman', serif;
  --lletra-dada:    'Sono', ui-monospace, 'SF Mono', Consolas, monospace;

  --t-display: clamp(38px, 8.2vw, 100px);
  --t-h2:      clamp(28px, 4.2vw, 44px);
  --t-h3:      clamp(19px, 2.1vw, 25px);
  --t-cos:     clamp(17px, 1.25vw, 20px);
  /* De 12 → 13 → 14. A 12 px el acuto de la í se confundía con el punto y CUATRO
     revisores de contexto limpio leyeron «guia» donde el código dice «guía»; a 13
     el cuarto siguió leyéndolo mal. El glifo está bien (fontTools: U+00ED →
     iacute); el tamaño no lo estaba. Cuando fallan cuatro lectores distintos, el
     problema no es el lector. */
  --t-dada:    clamp(14px, 1vw, 14.5px);

  /* Rejilla de 8 */
  --pas: 8px;
  --ampla: 1160px;
  --marge-lat: clamp(20px, 5vw, 48px);
  --aire-seccio: clamp(72px, 10vw, 152px);
  --mesura: 62ch;      /* ~61 caracteres reales de Newsreader, medidos; 68ch daba 89 */
  --col-font: 232px;   /* cabe una ruta de archivo sin partirla en trozos de 15 caracteres */

  /* Superficie */
  --radi-s: 8px;
  --radi-m: 12px;
  --radi-l: 16px;
  --ombra: 0 1px 2px rgba(20,24,27,.06), 0 6px 18px rgba(20,24,27,.06);
  --ombra-alta: 0 2px 4px rgba(27,63,209,.14), 0 12px 28px rgba(27,63,209,.16);

  --corba: cubic-bezier(.22,1,.36,1);
  --focus: var(--boli);
}

*, *::before, *::after{ box-sizing: border-box; }

/* Sin scroll-behavior:smooth a propósito: en una página de 10.000 px el salto suave
   solo retrasa la llegada. scroll-padding-top evita que una sección aterrice bajo la
   barra pegajosa (lección Ferreteria Piqueras, 23/07/2026). */
html{ -webkit-text-size-adjust: 100%; scroll-padding-top: 116px; }
@media (min-width: 900px){ html{ scroll-padding-top: 88px; } }

body{
  margin:0;
  background: var(--vidre);
  color: var(--tinta);
  font-family: var(--lletra-cos);
  font-size: var(--t-cos);
  line-height: 1.62;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3{
  font-family: var(--lletra-display);
  font-weight: 700;
  margin: 0;
  text-wrap: balance;
}

p{ margin: 0; }
img,svg{ max-width: 100%; }

a{ color: var(--boli-fosc); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover{ color: var(--boli); }

:focus-visible{
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 2px;
}

.salta{
  position: absolute; left: -9999px; top: 0;
  background: var(--boli); color: var(--full);
  padding: 12px 20px; z-index: 100; border-radius: 0 0 var(--radi-s) 0;
  font-family: var(--lletra-display); font-size: 15px;
}
.salta:focus{ left: 0; color: var(--full); }

.embolcall{
  width: 100%;
  max-width: var(--ampla);
  margin-inline: auto;
  padding-inline: var(--marge-lat);
}

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

.barra{
  position: sticky; top: 0; z-index: 50;
  background: rgba(228,234,237,.94);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--marc);
}

.barra__interior{
  max-width: var(--ampla);
  margin-inline: auto;
  padding: 6px var(--marge-lat);
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px;
}

.barra__marca{
  font-family: var(--lletra-display);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -.02em;
  color: var(--tinta);
  text-decoration: none;
  display: inline-flex; align-items: center;
  padding: 12px 0; margin-block: -12px;
  margin-inline-end: auto;
}
.barra__marca:hover{ color: var(--boli); }
.barra__marca b{ font-weight: 700; color: var(--boli); }

/* En móvil la barra tiene dos filas: marca + idioma arriba, y una tira de anclas
   deslizable abajo. Una página de 12.000 px sin ninguna forma de saltar a «Què costa»
   es el fallo que más cuesta al visitante (Puerta 1, ronda 1). */
.barra__nav{
  display: flex; gap: 2px;
  order: 3; width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
  border-top: 1px solid var(--marc);
  margin-inline: calc(var(--marge-lat) * -1);
  padding-inline: var(--marge-lat);
  margin-bottom: -6px;
}
.barra__nav::-webkit-scrollbar{ display: none; }
.barra__nav a{
  font-family: var(--lletra-display);
  font-size: 14px; font-weight: 500;
  color: var(--grafit); text-decoration: none;
  padding: 12px 10px; border-radius: var(--radi-s);
  display: inline-flex; align-items: center; min-height: 44px;
  white-space: nowrap;
}
.barra__nav a:hover{ color: var(--tinta); background: rgba(20,24,27,.05); }

/* Cinco entradas no caben en un móvil: a 390 px se salían dos por el borde
   derecho sin que se viera que había más (Puerta 1, 10.09.2026). Por debajo
   de 640 se quedan las tres que necesita un comerciante; las otras siguen
   estando en la página, a un scroll. */
@media (max-width: 639px){
  /* .barra__nav a lleva display:inline-flex y gana por especificidad: aquí hace falta a. */
  .barra__nav a.barra__nav--extra{ display: none; }
}
/* A 320 px las tres entradas todavía se salían por 24 px: el texto baja a 13
   y el carril lateral a 12, con lo que la primera palabra sigue cayendo en el
   margen de la página (12 + 8 = 20 px). */
@media (max-width: 639px){
  .barra__nav a{ color: var(--tinta); font-weight: 600; }
}
@media (max-width: 400px){
  .barra__nav{ padding-inline: 12px; }
  .barra__nav a{ font-size: 13.5px; padding-inline: 8px; }
}
@media (min-width: 640px){
  .barra__nav a{ font-size: 15px; padding-inline: 12px; }
}

.idioma{
  display: inline-flex; align-items: center;
  font-family: var(--lletra-dada);
  font-size: 13px;
  border: 1px solid var(--marc-fort);
  border-radius: var(--radi-s);
  overflow: hidden;
}
.idioma a, .idioma span{
  padding: 0 12px;
  min-height: 44px; min-width: 46px;
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none;
}
.idioma a{ color: var(--grafit); background: transparent; }
.idioma a:hover{ color: var(--full); background: var(--boli-fosc); }
.idioma span{ color: var(--full); background: var(--tinta); font-weight: 700; }

/* --------------------------------------------------------------------------
   Botones
   -------------------------------------------------------------------------- */

.boto{
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 12px 26px;
  font-family: var(--lletra-display); font-size: 17px; font-weight: 600;
  letter-spacing: -.01em;
  border-radius: var(--radi-m);
  text-decoration: none;
  border: 2px solid transparent;
  transition: background-color .18s var(--corba), color .18s var(--corba),
              border-color .18s var(--corba), transform .18s var(--corba);
}
.boto--ple{ background: var(--boli); color: var(--full); box-shadow: var(--ombra-alta); }
.boto--ple:hover{ background: var(--boli-fosc); color: var(--full); transform: translateY(-2px); }
.boto--vora{ background: transparent; color: var(--tinta); border-color: var(--marc-fort); }
.boto--vora:hover{ background: var(--full); color: var(--boli-fosc); border-color: var(--boli); }

/* --------------------------------------------------------------------------
   Línia de font — la segunda escala de la firma:
   toda afirmación de hecho cuelga de la misma columna de la izquierda.
   -------------------------------------------------------------------------- */

.font{
  font-family: var(--lletra-dada);
  font-size: var(--t-dada);
  line-height: 1.5;
  color: var(--grafit-fort);
  margin: 0;
  padding-top: 10px;
  border-top: 2px solid var(--marc-fort);
  max-width: 46ch;
}
.font b{ font-weight: 700; color: var(--tinta); }
/* Nota de fuente que NO cuelga del margen: va a lo ancho de la lectura. */
.font--ample{ max-width: var(--mesura); margin-top: 40px; }

/* --------------------------------------------------------------------------
   La ratlla de boli — el hueco de un dato todavía no decidido.
   Es el segundo objeto dibujado de la página y la justificación del acento:
   la raya con la que un comerciante corrige a mano el cartel del escaparate.
   Dos trazos superpuestos, ligeramente descuadrados: un bolígrafo repasa.
   -------------------------------------------------------------------------- */

.buit{
  position: relative;
  display: inline-block;
  width: 132px; height: 1em;
  vertical-align: baseline;
}
.buit--gran{ width: 188px; }
.buit__ratlla{
  position: absolute; left: 0; bottom: -.10em;
  width: 100%; height: 12px;
  overflow: visible;
}
.buit__ratlla path{ fill: none; stroke: var(--boli); stroke-linecap: round; }
.buit__ratlla path:first-child{ stroke-width: 2.6; }
.buit__ratlla path:last-child{ stroke-width: 1.3; opacity: .5; }

/* Chip «per confirmar»: la marca de la casa, en su tamaño real y haciendo su trabajo */
.xip{
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--lletra-dada); font-size: 12.5px; font-weight: 700;
  letter-spacing: .01em;
  color: var(--boli-fosc);
  background: rgba(27,63,209,.09);
  border: 1px solid rgba(27,63,209,.35);
  border-radius: 999px;
  padding: 5px 12px 5px 10px;
  white-space: nowrap;
}
.xip::before{
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--boli); flex: none;
}

/* --------------------------------------------------------------------------
   Bloque editorial: la fuente vive en el margen izquierdo (escritorio)
   -------------------------------------------------------------------------- */

.seccio{ padding-block: var(--aire-seccio); }
.seccio + .seccio{ padding-top: 0; }

.bloc{ display: grid; gap: 24px; }
.bloc__cos{ max-width: var(--mesura); }
.bloc .font{ order: 2; }
.bloc__cos{ order: 1; }

.encap{ margin-bottom: 40px; }
.encap h1,
.encap h2{
  font-size: var(--t-h2);
  letter-spacing: -.028em;
  line-height: 1.08;
}
.encap p{ margin-top: 16px; max-width: var(--mesura); color: var(--grafit); }

.cella{
  font-family: var(--lletra-dada);
  font-size: var(--t-dada);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--grafit);
  margin: 0 0 20px;
}

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

.hero{ padding-block: clamp(48px, 7vw, 96px) clamp(56px, 8vw, 112px); }

/* El titular manda a todo el ancho; debajo, explicación a la izquierda y prueba
   a la derecha. Encerrado en la media columna, «Primero la hacemos.» no cabía
   y partía por el artículo (Puerta 1, ronda 1). */
.hero__graella{ display: grid; gap: 0; align-items: start; }

.hero__titular{
  font-size: var(--t-display);
  line-height: 1.03;
  letter-spacing: -.035em;
  margin-bottom: 32px;
}
.hero__titular em{ font-style: normal; color: var(--boli); }

.hero__text{ margin-bottom: 44px; }
.pila{ margin-bottom: 36px; }

.hero__suport{
  max-width: 46ch;
  font-size: clamp(18px, 1.5vw, 21px);
  line-height: 1.55;
}

/* Móvil: los dos botones al mismo ancho. Dos anchos distintos apilados se ven mal
   y el secundario acaba pareciendo un descarte. */
.hero__accions{ margin-top: 36px; display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
@media (min-width: 520px){
  .hero__accions{ flex-direction: row; flex-wrap: wrap; align-items: center; }
}

.hero__nota{ margin-top: 0; }

/* --------------------------------------------------------------------------
   FIRMA — la pila de fileres que es posen d'acord
   -------------------------------------------------------------------------- */

.pila{ margin: 0; }

.pila__marc{
  display: flex; flex-direction: column; gap: 8px;
  padding: 0;
}

.pila__filera{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  background: var(--full);
  border: 1px solid var(--marc);
  border-radius: var(--radi-m);
  padding: 14px 18px;
  box-shadow: var(--ombra);
}

.pila__qui{
  font-family: var(--lletra-dada);
  font-size: clamp(12.5px, 1.05vw, 14px);
  color: var(--grafit);
  line-height: 1.35;
}

.pila__dada{
  font-family: var(--lletra-display);
  font-weight: 600;
  font-size: clamp(16px, 1.5vw, 19px);
  letter-spacing: -.015em;
  color: var(--tinta);
  text-align: right;
  line-height: 1.2;
}

/* Las cuatro primeras son papel de otro: sin sombra y con el dato en gris.
   El contraste con la quinta es ESTÁTICO — la animación solo alinea, no apaga. */
.pila__filera--altri{ box-shadow: none; }
.pila__filera--altri .pila__dada{ color: var(--grafit); font-weight: 500; }

/* La quinta: la que pone de acuerdo a las otras cuatro */
.pila__filera--teva{
  background: var(--boli);
  border-color: var(--boli);
  box-shadow: var(--ombra-alta);
  padding-block: 18px;
  margin-top: 8px;
}
.pila__filera--teva .pila__qui{
  color: rgba(252,253,253,.82);
  text-transform: uppercase;
  letter-spacing: .07em;
  font-weight: 700;
}
.pila__filera--teva .pila__dada{ color: var(--full); }

.pila__vist{
  display: inline-flex; align-items: center; gap: 8px;
  justify-content: flex-end;
}
.pila__vist svg{ width: 18px; height: 18px; flex: none; }

.pila__peu{ margin-top: 20px; }

/* --------------------------------------------------------------------------
   Com funciona — cuatro pasos (secuencia real, por eso van numerados)
   -------------------------------------------------------------------------- */

.passos{
  list-style: none;
  margin: 0; padding: 0;
  display: grid; gap: 4px;
  counter-reset: pas;
}

.pas{
  display: grid;
  gap: 6px 24px;
  padding: 32px 0;
  border-top: 1px solid var(--marc);
}
.pas:last-child{ border-bottom: 1px solid var(--marc); }

.pas__num{
  font-family: var(--lletra-dada);
  font-size: 13px; font-weight: 700;
  color: var(--boli);
  letter-spacing: .08em;
}

.pas__titol{ font-size: var(--t-h3); letter-spacing: -.02em; line-height: 1.2; }
.pas__cos{ max-width: var(--mesura); margin-top: 4px; }
.pas__cos + .pas__cos{ margin-top: 12px; }
/* Enlace de texto dentro de un párrafo: se le infla el área de toque sin moverlo
   de sitio (lección Joieria Sancho, 27/07/2026). */
.pas__cos a{
  display: inline-block;
  padding-block: 12px;
  margin-block: -12px;
}

.pas__detall{
  margin-top: 14px;
  font-family: var(--lletra-dada);
  font-size: var(--t-dada);
  color: var(--grafit-fort);
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   Les tres portes — el hueco de las cifras de vanidad, con medidas de verdad
   -------------------------------------------------------------------------- */

.portes{
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 12px;
}

.porta{
  background: var(--full);
  border: 1px solid var(--marc);
  border-radius: var(--radi-l);
  padding: 28px;
  display: flex; flex-direction: column; gap: 14px;
}

.porta__nom{
  font-family: var(--lletra-display);
  font-size: var(--t-h3);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.2;
}
.porta__nom span{
  display: block;
  font-family: var(--lletra-dada);
  font-size: 12.5px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--boli);
  margin-bottom: 8px;
}

.porta__cos{ font-size: 17px; line-height: 1.55; }

/* Las tres medidas se alinean abajo aunque los textos midan distinto:
   son lo que hay que comparar entre puertas. */
.porta__mesura{
  margin-top: auto;
  font-family: var(--lletra-dada);
  font-size: 14px;
  line-height: 1.6;
  color: var(--tinta);
  background: var(--vidre);
  border-radius: var(--radi-s);
  padding: 14px 16px;
  border-left: 3px solid var(--boli);
}
.porta__etiqueta{
  display: block;
  font-size: 12.5px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--grafit-fort);
  margin-bottom: 6px;
}
.porta__mesura b{
  display: block;
  font-family: var(--lletra-display);
  font-size: clamp(24px, 2.6vw, 31px);
  font-weight: 700; letter-spacing: -.03em; line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--boli);
  white-space: nowrap;   /* 99/100/100/100 partía en dos líneas a 1440 */
}
.porta__mesura em{ font-style: normal; color: var(--grafit-fort); display: block; margin-top: 8px; }

/* --------------------------------------------------------------------------
   Banda oscura — què no publiquem mai
   -------------------------------------------------------------------------- */

.mai{
  background: var(--nit);
  color: var(--nit-text);
  --focus: var(--nit-boli);
  padding-block: var(--aire-seccio);
  margin-block: 0;   /* el hueco lo pone ya el padding-bottom de la sección anterior */
}
.mai .cella{ color: var(--nit-sec); }
.mai .encap h2{ color: var(--nit-text); }
.mai .encap p{ color: var(--nit-sec); }
.mai .font{ color: var(--nit-sec); border-top-color: var(--nit-sec); }
.mai .font b{ color: var(--nit-text); }

.mai__llista{
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 0;
  max-width: var(--mesura);
}
.mai__llista li{
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 20px 0;
  border-bottom: 1px solid rgba(217,225,230,.16);
}
.mai__llista li:first-child{ border-top: 1px solid rgba(217,225,230,.16); }
.mai__llista svg{ width: 20px; height: 20px; margin-top: 5px; color: var(--nit-boli); }
.mai__llista b{ font-family: var(--lletra-display); font-weight: 600; }

/* La marca «per confirmar», ENSEÑADA y no descrita. El chip y la raya de boli
   existían en la hoja de estilos y en ningún HTML desde que se rellenaron los
   cuatro huecos: la página prometía «una marca visible» que ya no se veía
   (Puerta 1, ronda 6). Aquí va sobre la banda oscura, así que cambian los tonos. */
/* .mai__llista span lleva display:block y gana por especificidad: aquí y en los
   hijos hace falta el ancestro. Segunda vez que este archivo lo cobra. */
.mai__llista .mostra span{
  display: inline; margin-top: 0;
  font-size: inherit; color: inherit;
}
/* flex:none o la raya de 132 px se encoge hasta un guion dentro del flex. */
.mai__llista .mostra .buit{ display: inline-block; flex: none; }
/* .mai__llista svg (los iconos de la banda) fija 20x20 y gana al trazo de boli. */
.mai__llista .mostra .buit__ratlla{ width: 100%; height: 12px; margin-top: 0; }
.mai__llista .mostra .xip{ display: inline-flex; font-size: 12.5px; flex: none; }
.mai__llista .mostra{
  display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 8px 12px;
  margin-top: 12px; padding: 10px 14px;
  background: rgba(217,225,230,.06);
  border: 1px solid rgba(150,163,172,.35);
  border-radius: var(--radi-s);
  font-family: var(--lletra-display); font-size: 17px; font-weight: 600;
  color: var(--nit-text);
}
.mai .buit__ratlla path{ stroke: var(--nit-boli); }
.mai .xip{
  color: var(--nit-boli);
  background: rgba(143,169,255,.12);
  border-color: rgba(143,169,255,.45);
}
.mai .xip::before{ background: var(--nit-boli); }
.mai__llista span{ display: block; color: var(--nit-sec); font-size: 16px; margin-top: 2px; }

/* --------------------------------------------------------------------------
   Exemple, preu, necessitem, preguntes, contacte
   -------------------------------------------------------------------------- */

.fitxa{
  background: var(--full);
  border: 1px solid var(--marc);
  border-radius: var(--radi-l);
  padding: clamp(24px, 3.5vw, 40px);
  box-shadow: var(--ombra);
}
/* Ninguna caja con casi la mitad del ancho vacío (Puerta 1, ronda 1). */
.fitxa--exemple{ max-width: 780px; }
/* La tarjeta y la escalera comparten canal: si la tarjeta va a 1.064 px y la
   tabla a 860, la página no tiene una columna de dinero (Puerta 1, 10.09.2026). */
.fitxa--tarifa{ max-width: 860px; }

.casos{
  list-style: none; margin: 24px 0 0; padding: 0;
  display: grid; gap: 2px;
}
/* Columna fija: con `auto` cada fila calculaba su propio ancho y las cifras
   14 / 4 / 7 / 1 no compartían eje (Puerta 1, ronda 1). */
.casos li{
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 16px; align-items: baseline;
  padding: 16px 0;
  border-top: 1px solid var(--marc);
}
.casos strong{
  font-family: var(--lletra-display);
  font-weight: 700;
  font-size: clamp(24px, 3vw, 34px);
  letter-spacing: -.03em;
  color: var(--boli);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.casos span{ font-size: 17px; line-height: 1.5; }

.preu__xifra{
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px;
  font-family: var(--lletra-display);
  font-size: clamp(30px, 4.5vw, 46px);
  font-weight: 700; letter-spacing: -.03em;
  line-height: 1.1;
  margin-bottom: 12px;
}
/* Reinicio explícito: si no, hereda el tracking y el peso del display de al lado. */
.preu__que{
  font-family: var(--lletra-cos);
  font-size: 18px; font-weight: 400; letter-spacing: normal;
  color: var(--grafit);
  line-height: 1.5;
}
.preu__etiqueta{
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  font-family: var(--lletra-display);
  font-size: 19px; font-weight: 600; letter-spacing: -.01em;
  color: var(--tinta);
  margin-bottom: 4px;
}
.preu__llista{
  list-style: none; margin: 24px 0 0; padding: 0;
  display: grid; gap: 12px;
}
.preu__llista li{
  display: grid; grid-template-columns: 20px minmax(0, 1fr);
  gap: 12px; align-items: start;
  font-size: 17px; line-height: 1.5;
  text-wrap: pretty;   /* a dos columnas, cuatro de ocho ítems dejaban huérfana */
}
.preu__llista svg{ width: 18px; height: 18px; margin-top: 5px; color: var(--boli); }
.preu__part + .preu__part{ margin-top: 32px; padding-top: 32px; border-top: 1px solid var(--marc); }

@media (min-width: 900px){
  .fitxa--preu{ display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
  .preu__part + .preu__part{
    margin-top: 0; padding-top: 0; padding-left: 48px;
    border-top: none; border-left: 1px solid var(--marc);
  }
}

/* --------------------------------------------------------------------------
   L'escala — els graons de la tarifa (10.09.2026, docs/PRECIOS.md)
   Una sola columna d'imports a la dreta: si cada fila calcula el seu ample,
   les xifres no comparteixen eix (mateixa lliçó que .casos, Porta 1 ronda 1).
   El destacat el fa la tipografia, no una capsa de color: la banda fosca
   d'aquesta pàgina és única i és la de «Què no publiquem mai».
   -------------------------------------------------------------------------- */

/* Dues columnes només quan hi caben de veritat. Sense minmax(280px,1fr):
   una pista més ampla que el contenidor es menja el marge i no fa scroll,
   i la prova de 320 px surt verda amb desbordament real. */
@media (min-width: 820px){
  .inclou{ display: block; columns: 2; column-gap: 40px; }
  .inclou li{ break-inside: avoid; margin-bottom: 12px; }
}

.escala{ margin-top: 48px; max-width: 860px; }
.escala__cap{
  display: grid; grid-template-columns: minmax(0, 1fr) max-content;
  gap: 16px; align-items: end;
  font-family: var(--lletra-dada);
  font-size: 12.5px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--grafit);
  padding-bottom: 12px;
}
.escala__cap span:last-child{ text-align: right; }

.escala__llista{ list-style: none; margin: 0; padding: 0; }
.escala__grao{
  display: grid; grid-template-columns: minmax(0, 1fr) max-content;
  gap: 4px 16px; align-items: baseline;
  padding: 18px 0;
  border-top: 1px solid var(--marc);
}
.escala__nom{
  font-family: var(--lletra-display);
  font-weight: 600; font-size: 19px; letter-spacing: -.01em;
  color: var(--tinta);
}
.escala__nota{
  grid-column: 1;
  color: var(--grafit); font-size: 16px; line-height: 1.5;
  max-width: 52ch;
  text-wrap: pretty;
}
.escala__preu{
  grid-column: 2; grid-row: 1;
  font-family: var(--lletra-display);
  font-weight: 700; font-size: clamp(21px, 2.2vw, 26px);
  letter-spacing: -.02em; line-height: 1.15;
  font-variant-numeric: tabular-nums;
  text-align: right; white-space: nowrap;
}

/* El graó que és la venda: filet gruixut, cos més gran i el blau del boli */
.escala__grao--paquet{ border-top: 2px solid var(--tinta); }
.escala__grao--paquet .escala__nom{ font-weight: 700; font-size: 21px; }
.escala__grao--paquet .escala__preu{
  font-size: clamp(28px, 3.4vw, 36px); color: var(--boli);
}

/* Ni l'ampliació ni el manteniment són graons: un se suma i l'altre torna cada
   any. Filet de puntets per separar-los de l'escala. */
.escala__grao--suma{ border-top: 1px dashed var(--marc-fort); }
.escala__grao--suma .escala__preu{ color: var(--grafit); }
/* El cost recurrent és el que més busca un comerciant: no puede ir más apagado
   que los pagos únicos (Puerta 1, ronda 2). */
.escala__grao--recurrent .escala__preu{ color: var(--tinta); }
.escala__llista li:last-child{ border-bottom: 1px solid var(--marc); }

/* Telèfon i correu: la dada ÉS l'enllaç, i es veu que ho és.
   inline-block amb padding vertical perquè la zona tàctil arribi als 44 px
   sense despenjar el subratllat: amb border-bottom quedava a 10 px del text. */
.contacte__valor{
  display: inline-block;
  padding-block: 10px;
  color: var(--tinta);
  overflow-wrap: break-word;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: .16em;
  text-decoration-color: rgba(27,63,209,.4);
  transition: color .18s var(--corba), text-decoration-color .18s var(--corba);
}
.contacte__valor:hover{ color: var(--boli-fosc); text-decoration-color: var(--boli); }

.necessitem{
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 2px;
  max-width: var(--mesura);
}
.necessitem li{
  padding: 22px 0;
  border-top: 1px solid var(--marc);
}
.necessitem li:last-child{ border-bottom: 1px solid var(--marc); }

@media (min-width: 768px){
  .necessitem--graella{ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 48px; max-width: none; }
  .necessitem--graella li:last-child{ border-bottom: none; }
  .necessitem--graella li:nth-last-child(-n+2){ border-bottom: 1px solid var(--marc); }
}

/* Ficha de datos (aviso legal): etiqueta en el mono de la casa, dato en display,
   igual que el bloque de contacto. Antes «Activitat» era el único en serif gris. */
.necessitem--dades li:last-child{ border-bottom: none; }
.necessitem--dades b{
  font-family: var(--lletra-dada);
  font-size: 13px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--grafit);
}
.necessitem--dades .dada{
  display: block; margin-top: 6px;
  font-family: var(--lletra-display);
  font-size: 20px; font-weight: 700; letter-spacing: -.01em;
  color: var(--tinta);
  overflow-wrap: break-word;
}
.necessitem b{ font-family: var(--lletra-display); font-weight: 600; font-size: 19px; }
.necessitem span{ display: block; color: var(--grafit); margin-top: 4px; }

.preguntes{ border-bottom: 1px solid var(--marc); }
.pregunta{ padding: 28px 0; border-top: 1px solid var(--marc); max-width: var(--mesura); }
.pregunta h2,
.pregunta h3{ font-size: var(--t-h3); letter-spacing: -.02em; line-height: 1.25; }
.pregunta p{ margin-top: 10px; }

.contacte__caixa{
  display: grid; gap: 24px; justify-items: start;
  max-width: 860px;                 /* mismo canal que .fitxa--tarifa */
  background: var(--full);
  border: 1px solid var(--marc);
  border-radius: var(--radi-l);
  padding: clamp(24px, 3.5vw, 40px);
  box-shadow: var(--ombra);
}
/* La última sección no necesita el aire de una que tiene otra debajo. */
#contacte, #contacto{ padding-bottom: clamp(48px, 5vw, 72px); }
/* Etiqueta ENCIMA del dato en todas las anchuras: apilados, los dos arrancan en
   la misma x que el titular, el párrafo y los botones. Con la etiqueta al lado,
   teléfono y correo eran los únicos elementos fuera del eje de la sección
   (Puerta 1, rondas 1 y 2, 10.09.2026). */
.contacte__fila{
  display: grid; gap: 2px 16px; align-items: baseline;
  font-family: var(--lletra-display);
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 700; letter-spacing: -.02em;
  color: var(--tinta);
}
.contacte__accions{ display: flex; flex-direction: column; align-items: stretch; gap: 12px; width: 100%; }
@media (min-width: 520px){
  .contacte__accions{ flex-direction: row; flex-wrap: wrap; align-items: center; width: auto; }
}
/* El hueco lleva etiqueta: sin ella no comunica una política, comunica una avería. */
.contacte__linia{
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px 16px;
  font-family: var(--lletra-display);
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 700; letter-spacing: -.02em;
  color: var(--tinta);
}
.contacte__etiqueta{
  font-family: var(--lletra-dada);
  font-size: 14px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--grafit);
}
.contacte__linia .xip{ align-self: center; }

/* --------------------------------------------------------------------------
   Peu
   -------------------------------------------------------------------------- */

.peu{
  border-top: 1px solid var(--marc);
  margin-top: var(--aire-seccio);
  padding-block: 48px 56px;
}
.peu__graella{ display: grid; gap: 24px; }
.peu__marca{
  font-family: var(--lletra-display);
  font-weight: 700; font-size: 19px; letter-spacing: -.02em;
}
.peu__marca b{ color: var(--boli); font-weight: 700; }
.peu p{
  font-family: var(--lletra-cos);
  font-size: 16px;
  color: var(--grafit);
  line-height: 1.6;
  max-width: var(--mesura);
}
/* La última línea del pie sí es una nota de fuente y fecha: esa se queda en mono. */
.peu__nota{
  font-family: var(--lletra-dada) !important;
  font-size: var(--t-dada) !important;
  line-height: 1.7 !important;
}
.peu a{ color: var(--boli-fosc); }
/* «Avís legal» y «Castellano» medían 84x16: en una página que promete que no hay
   ningún botón más pequeño que un dedo, tampoco pueden estarlo sus enlaces
   (Puerta 1, ronda 4). El margen negativo evita que el interlineado crezca. */
.peu__nota a{
  display: inline-block;
  padding-block: 14px; margin-block: -14px;
}

/* Al final de una página larga tiene que haber una salida. */
.peu__amunt{
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px; margin-top: 20px;
  font-family: var(--lletra-display); font-size: 16px; font-weight: 600;
  color: var(--tinta); text-decoration: none;
}
.peu__amunt:hover{ color: var(--boli); }
.peu__amunt svg{ width: 18px; height: 18px; flex: none; color: var(--boli); }

/* --------------------------------------------------------------------------
   Portada de idioma y 404
   -------------------------------------------------------------------------- */

.portada{
  min-height: 100svh;
  display: grid; align-content: center;
  padding-block: 64px;
}
.portada__marca{
  font-family: var(--lletra-display);
  font-weight: 700; font-size: clamp(30px, 5vw, 44px);
  letter-spacing: -.03em;
  margin-bottom: 24px;
}
.portada__marca b{ color: var(--boli); font-weight: 700; }
.portada h1{
  font-size: var(--t-h2);
  letter-spacing: -.028em; line-height: 1.1;
  max-width: 20ch;
}
.portada p{ margin-top: 16px; max-width: 54ch; color: var(--grafit); }
.portada__accions{ margin-top: 36px; display: flex; flex-wrap: wrap; gap: 12px; }

/* --------------------------------------------------------------------------
   Movimiento — los estados FINALES son el CSS por defecto.
   Es la clase .js la que los esconde: sin JS la web se ve entera y alineada.
   -------------------------------------------------------------------------- */

.js .reveal{
  opacity: 0;
  transform: translateY(24px);
}
.js .reveal.es-vist{
  opacity: 1;
  transform: none;
  transition: opacity .7s var(--corba), transform .7s var(--corba);
  transition-delay: calc(var(--d, 0) * 70ms);
}

/* La firma: las cuatro llegan desordenadas y la quinta las pone de acuerdo */
.js .pila__filera{
  opacity: 0;
  transform: translate(var(--x, 0px), var(--y, 0px)) rotate(var(--r, 0deg));
}
.js .pila.es-vist .pila__filera{
  opacity: 1;
  transform: none;
  transition: opacity .5s var(--corba), transform .8s var(--corba);
  transition-delay: calc(var(--d, 0) * 70ms);
}

/* --------------------------------------------------------------------------
   Puntos de ruptura
   -------------------------------------------------------------------------- */

@media (min-width: 700px){
  .pas{ grid-template-columns: 64px minmax(0, 1fr); }
  .pas__num{ padding-top: 6px; }
  .pas__titol, .pas__cos, .pas__detall{ grid-column: 2; }
  .portes{ gap: 16px; }

}

@media (min-width: 900px){
  .barra__interior{ flex-wrap: nowrap; padding-block: 10px; min-height: 60px; }
  .barra__nav{
    order: 0; width: auto; overflow: visible;
    border-top: none; margin: 0; padding-inline: 0;
  }
  .portes{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .preu__part{ max-width: none; }
}

@media (min-width: 1000px){
  .hero__graella{
    grid-template-columns: minmax(0, 1fr) minmax(380px, .84fr);
    grid-template-areas:
      "cella cella"
      "titol titol"
      "text  pila"
      "nota  pila";
    column-gap: clamp(40px, 5vw, 72px);
  }
  .hero .cella{ grid-area: cella; }
  .hero__titular{ grid-area: titol; margin-bottom: 56px; }
  .hero__text{ grid-area: text; margin-bottom: 0; }
  .pila{ grid-area: pila; margin-bottom: 0; }
  .hero__nota{ grid-area: nota; align-self: end; margin-top: 56px; }
  .hero{ padding-block: clamp(64px, 6vw, 104px) clamp(72px, 8vw, 128px); }
}

@media (min-width: 1120px){
  .bloc{ grid-template-columns: var(--col-font) minmax(0, 1fr); gap: 40px; }
  /* align-self:start o la nota se estira a la altura entera del bloque y deja
     un raíl de cientos de píxeles vacíos (Puerta 1, ronda 1). */
  .bloc .font{ order: 0; padding-top: 10px; align-self: start; }
  .bloc__cos{ order: 0; }

  /* El pie usaba una rejilla propia (1fr / 1.6fr) que no caía en ninguna espina
     del sitio: su segunda columna arrancaba en x=622 (Puerta 1, ronda 3). */
  .peu__graella{ grid-template-columns: var(--col-font) minmax(0, 1fr); gap: 40px; }

  /* Preguntas a dos columnas: en una sola dejaban 400 px muertos al lado. */
  .preguntes{ display: grid; grid-template-columns: 1fr 1fr; column-gap: 56px; }
  .pregunta{ max-width: none; }
  /* Cinco preguntas en dos columnas dejaban la celda de abajo a la derecha
     vacía con el filete cruzando el hueco (Puerta 1, 10.09.2026). */
  .pregunta:last-child{ grid-column: 1 / -1; }
  .pregunta:last-child p{ max-width: var(--mesura); }
}

/* La banda oscura reparte titular y lista: es el lienzo más grande de la página
   y una lista de viñetas sola no lo llena (Puerta 1, ronda 1). */
@media (min-width: 1000px){
  .mai .bloc__cos{
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    gap: 56px;
    align-items: start;
    max-width: none;
  }
  /* El titular acompaña a la lista mientras se lee: así el aire de debajo es
     recorrido, no hueco muerto. */
  .mai .encap{ margin-bottom: 0; position: sticky; top: 88px; align-self: start; }
  .mai__llista{ max-width: none; }
}

/* --------------------------------------------------------------------------
   Preferencias del usuario
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{
    animation-duration: .001ms !important; animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; transition-delay: 0s !important;
  }
  .js .reveal{ opacity: 1 !important; transform: none !important; }
  .js .pila__filera{ opacity: 1 !important; transform: none !important; }
}

/* Guardar como PDF no dispara los IntersectionObserver: nada puede salir en blanco */
@media print{
  .js .reveal{ opacity: 1 !important; transform: none !important; }
  .js .pila__filera{ opacity: 1 !important; transform: none !important; }
  .barra{ position: static; }
  .mai{ background: #fff; color: #000; }
}