/* ════════════════════════════════════════════════════════════
   mobil.css — Ajustos del mòbil, que és per on entra la majoria.

   Tres coses que es van mesurar i es corregeixen aquí:
   1. Zones per tocar: hi havia enllaços de 15 px d'alt al peu i al bloc
      de contacte. El mínim raonable per al dit són 44 px.
   2. Text micro: etiquetes de 9,9 px i 10,9 px. A la mà no es llegeixen.
      Al mòbil pugen; a l'escriptori es queden com estaven.
   3. Llargada: el peu feia 1.749 px i les targetes 600 px cadascuna.
      Es compacten sense treure informació.
   ════════════════════════════════════════════════════════════ */

@media (max-width:767px){

  /* ── Barra superior: el tagline sobra a la mà, el telèfon no ── */
  .topbar{font-size:.72rem}
  .topbar .tag{display:none}
  .topbar .shell{justify-content:flex-end}
  .topbar .tel{min-height:40px;display:inline-flex;align-items:center;
    letter-spacing:.1em;font-size:.78rem}

  /* La capçalera ocupa menys alçada: cada píxel de dalt és contingut menys */
  .masthead .shell{min-height:62px}
  .brandmark img{width:112px}
  .nav{inset:102px 0 0}

  /* ── Micro-tipografia llegible ─────────────────────────────── */
  .eyebrow{font-size:.8rem;letter-spacing:.16em}
  .mark{font-size:.78rem;letter-spacing:.16em}
  .dir-n{font-size:.78rem}
  .dir-flag{font-size:.78rem;padding:4px 9px}
  .fact-v{font-size:.76rem}
  .card .num,.card .go{font-size:.8rem}
  figcaption{font-size:.88rem}
  .quote cite{font-size:.78rem}
  .pagenav li:first-child{font-size:.74rem}
  .pagenav a{font-size:.82rem}

  /* ── Zones per tocar ───────────────────────────────────────── */
  .foot li{padding:0}
  .foot li a{display:inline-flex;align-items:center;min-height:44px;
    padding:2px 0;font-size:1rem}
  .contact-data li{padding:0}
  .contact-data li a{display:flex;align-items:center;min-height:48px}
  .faq summary{padding-block:20px}

  /* Els botons, a tot l'ample: més fàcils d'encertar i més nets */
  .btn-row .btn,.foot-cta .btn{width:100%}
  .btn{padding-inline:20px}

  /* El directori, a la mà: sense punts de guia (no hi ha línia per omplir)
     i amb l'etiqueta a sota, que és el que provocava desbordament a 320 px:
     era un flex que no podia encongir per sota del seu contingut. */
  .dir-col a{flex-wrap:wrap;gap:10px;padding:13px 0}
  .dir-lead{display:none}
  .dir-t{flex:1 1 auto}
  /* L'etiqueta ha d'abraçar el text, no fer de barra d'ample complet */
  .dir-flag{order:3;flex:0 0 auto;align-self:flex-start;margin-top:2px}
  .dir-go{margin-left:auto;opacity:1;transform:none;color:var(--rule)}

  /* ── Menys llargada, mateixa informació ────────────────────── */
  .block{padding-block:52px}
  .directori{padding-block:52px}
  .dir-cols{gap:32px}
  .card{padding:24px 20px 22px}
  .card-media{margin:-24px -20px 16px;aspect-ratio:2/1}
  .tile{padding:22px 20px}
  .step{padding:24px 20px}

  /* El peu feia 1.749 px: dues columnes per als llistats i marca petita */
  .foot{padding-block:48px 24px}
  .foot-grid{gap:28px}
  .foot-grid > nav{align-self:start}
  .foot-top{padding-bottom:32px;margin-bottom:32px}
  .foot-word{margin-top:28px}
  .foot-bottom{margin-top:32px;gap:6px}
  .foot-bottom p:last-child{opacity:.7;font-size:.85rem}

  /* ── CTA fix ───────────────────────────────────────────────── */
  .sticky-cta{padding:6px 6px calc(6px + env(safe-area-inset-bottom))}
  .sticky-cta .btn{min-height:52px}

  /* ── Hero: la foto no s'ha de menjar la pantalla ───────────── */
  .hero{padding-block:44px 0}
  .hero-media img{aspect-ratio:5/4}
  .hero-badge{position:static;max-width:none;margin-top:0;padding:16px 18px}
  .hero .hand{margin-bottom:20px}

  /* ── Capçalera de fitxa ────────────────────────────────────── */
  .band{padding-block:48px}
  .band-grid{gap:26px}
  .band .ganxo{font-size:clamp(1.35rem,6vw,1.8rem)}
  .who{padding:22px 20px}

  /* La cita, sense passar-se de mida a la mà */
  .quote p{font-size:clamp(1.7rem,7.4vw,2.3rem)}
}

/* Pantalles molt estretes: encara més contenció */
@media (max-width:379px){
  .brandmark img{width:100px}
  h1{font-size:2.2rem}
  .hero .hand{font-size:2rem}
  .sticky-cta .btn{font-size:.76rem;padding-inline:6px}
}

/* Els llistats del peu, en dues columnes: amb enllaços de 44 px d'alt,
   una sola columna feia gairebé 1.900 px de peu. */
@media (min-width:360px) and (max-width:767px){
  .foot-grid{grid-template-columns:1fr 1fr;column-gap:20px}
  .foot-grid > div:first-child{grid-column:1 / -1}   /* marca i claim */
  .foot-grid > div:nth-child(2){grid-column:1}        /* on som */
  .foot-grid > nav:last-child{grid-column:2;grid-row:2} /* informacio, al costat */
  /* La llista de serveis es la llarga: va a sota, a tot l'ample i en dues
     columnes de text, en comptes de deixar un forat al costat. */
  .foot-grid > nav:nth-child(3){grid-column:1 / -1}
  .foot-grid > nav:nth-child(3) ul{column-count:2;column-gap:20px}
  .foot-grid > nav:nth-child(3) li{break-inside:avoid}
  .foot li a{font-size:.94rem;line-height:1.25}
}

@media (max-width:767px){
  /* El boto d'enviar no anava dins d'un .btn-row i es quedava petit */
  .form > .btn,.form button[type="submit"]{width:100%}
  .field-check label{gap:12px}
}

@media (max-width:767px){
  /* Molles de pa i index de pagina: eren enllaços de 14 i 18 px d'alt.
     Amb el dit no s'encerten; ara tenen zona de toc de veritat. */
  .crumbs{font-size:.9rem}
  .crumbs ol{padding-block:6px}
  .crumbs li{display:flex;align-items:center}
  .crumbs a{display:inline-flex;align-items:center;min-height:40px}
  .pagenav ul{padding-block:4px}
  .pagenav a{display:inline-flex;align-items:center;min-height:44px}
  .pagenav li:first-child{font-size:.76rem}
}

@media (max-width:767px){
  /* La navegacio d'arees del hub, amb la mateixa zona de toc que la resta */
  .areanav ul{padding-block:4px}
  .areanav a{display:inline-flex;align-items:center;min-height:44px;font-size:.82rem}
}

/* ── Zones de toc: la condició no és l'amplada, és el dit ─────
   A 768 px (tauleta vertical) les regles de mòbil ja no s'aplicaven i
   tornaven a sortir enllaços de 14-18 px. Qui hi va amb el dit necessita
   la mateixa zona de toc tant si té 390 px com si en té 900. */
@media (pointer:coarse),(max-width:1023px){
  .foot li{padding:0}
  .foot li a{display:inline-flex;align-items:center;min-height:44px;padding:2px 0}
  .contact-data li{padding:0}
  .contact-data li a{display:flex;align-items:center;min-height:48px}
  .crumbs li{display:flex;align-items:center}
  .crumbs a{display:inline-flex;align-items:center;min-height:40px}
  .pagenav ul,.areanav ul{padding-block:4px}
  .pagenav a,.areanav a{display:inline-flex;align-items:center;min-height:44px}
  .faq summary{padding-block:20px}
  .topbar .tel{min-height:40px;display:inline-flex;align-items:center}
  .main-nav a,.nav a{min-height:44px;display:inline-flex;align-items:center}
}