/* ─────────────────────────────────────────────────────────────────────────
   MarcoMotion · web pública — capa de MÒBIL
   ─────────────────────────────────────────────────────────────────────────
   Fitxer ADDITIU, com motion.css: no toca res de site.css, només hi suma.
   Per desactivar-ho tot, treure les dues línies de mobil.css i mobil.js de
   render.js; per esborrar-ho, aquests dos fitxers.

   REGLA DE TOT EL FITXER: si una regla no és dins d'un @media (max-width:…),
   ha de ser una regla que AMAGA alguna cosa. L'escriptori no pot canviar.
   Les úniques tres declaracions de fora del @media són els `display:none`
   dels tres elements nous (barra inferior, progrés, interruptor de tema),
   que només s'encenen a dins.

   D'on surten els números: portada mesurada el 27/08/2026 a 375×812 →
   10.835 px, 13,3 pantalles, i el primer servei a la pantalla 7,6. A
   l'escriptori, 5.989 px i 6,7 pantalles. La feina d'aquest fitxer és tancar
   aquesta diferència sense tocar l'altra banda.
   ───────────────────────────────────────────────────────────────────────── */

/* ── Elements nous: apagats per defecte ─────────────────────────────────── */
.mm-bar{display:none}
.mm-prog{display:none}
.mm-tema{display:none}

/* ── A l'ordinador, el mateix botó però només la icona ───────────────────
   ⚠ PER QUÈ HI ÉS. Abans només existia per sota de 1080, dins del menú de la
   hamburguesa, perquè a la barra de l'escriptori no hi cabia el text. Això
   deixava un parany: qui havia triat el fosc i entrava per ordinador NO tenia
   cap manera de tornar enrere, perquè el botó per desfer-ho no existia a la
   seva pantalla. Va passar de debò.
   Aquí no hi cap el text, i per això s'amaga: el nom per al lector de pantalla
   surt de l'`aria-label`, que el guió ja manté al dia. */
@media (min-width:1081px){
  .mm-tema{
    display:inline-flex;align-items:center;justify-content:center;
    width:38px;height:38px;flex:none;padding:0;margin-left:.4rem;
    background:none;border:1px solid var(--line-2);border-radius:9px;
    color:inherit;cursor:pointer;
  }
  .mm-tema:hover{border-color:var(--or)}
  .mm-tema:active{transform:translateY(1px)}
  .mm-tema svg{width:18px;height:18px;flex:none}
  /* El text del botó, fora: a la barra de dalt no hi cabria. */
  .mm-tema span{display:none}
  /* La icona diu on ANIRIES, no on ets: en clar, la lluna. */
  .mm-tema .i-a-clar{display:none}
  :root[data-theme="dark"] .mm-tema svg.i-a-clar{display:block}
  :root[data-theme="dark"] .mm-tema svg.i-a-fosc{display:none}
}

/* ── L'interruptor de tema va amb la hamburguesa (≤980), no amb la resta ──
   És l'única peça que apareix abans dels 760: a 1080 la capçalera ja és la
   versió de mòbil (menú plegat), i deixar-lo fora seria deixar-lo en terra
   de ningú. Per damunt de 980 no existeix: l'escriptori queda igual. */
@media (max-width:1080px){
  /* Última fila del menú desplegat. A la barra de dalt no hi cabia: amb el
     logo, l'idioma i la hamburguesa, 375 px ja anaven justos i afegir-hi un
     quart element esclafava el logo. */
  .mm-tema{display:flex;align-items:center;gap:.65rem;
    width:100%;min-height:48px;margin:.6rem 0 0;padding:.8rem .6rem;
    background:none;border:1px solid var(--line-2);border-radius:9px;
    font-family:inherit;font-size:1rem;font-weight:500;
    color:var(--soft);cursor:pointer;transition:border-color .14s,color .14s}
  .mm-tema svg{width:19px;height:19px;flex:none}
  .mm-tema:active{transform:translateY(1px)}
  /* La hamburguesa i l'idioma no s'han d'encongir mai: són els dos objectius
     de toc de la capçalera. Qui absorbeix l'estretor és el logo, que ja ho
     feia abans (es veia a 217 px en comptes de 336). */
  .burger{flex:none}
  .lang{flex:none}
  /* S'ensenya el dibuix del tema on ANIRIES, no el d'on ets: en clar surt la
     lluna («passa a fosc») i en fosc, el sol. Els dos van sempre a l'HTML i
     aquí se n'amaga un; així no cal que el JS toqui cap dibuix. */
  .mm-tema .i-a-clar{display:none}
  :root[data-theme="dark"] .mm-tema .i-a-clar{display:block}
  :root[data-theme="dark"] .mm-tema .i-a-fosc{display:none}
  /* Res de mirar el mode del sistema: la web surt clara sempre i el dibuix del
     boto nomes canvia quan algu tria el fosc. */
  /* ⚠ La hamburguesa arrossegava dos problemes diferents. L'amplada (37 px
     mesurats) era que el navegador l'encongia com a element flex quan la fila
     no cabia: ho tanca el `flex:none` de més amunt. L'alçada (40 px) era a
     posta, del bloc de ≤600 de site.css, per deixar lloc al logo. Comptat de
     nou: logo 212 + idioma 62 + botó 44 + 16 de separació = 334 en 340 de
     lloc útil. Hi cap, i recupera el mínim de 44. */
  .burger{width:44px;height:44px}
  /* El selector d'idioma feia 31×29 px. La mida VISUAL no canvia (seguiria
     desquadrant la capçalera); el que creix és l'àrea que rep el dit. */
  .lang a{position:relative}
  .lang a::after{content:"";position:absolute;top:-10px;bottom:-10px;left:-10px;right:-10px}
}

/* ═══════════════════════════════════════════════════════════════════════════
   TOT EL QUE VE A PARTIR D'AQUÍ ÉS NOMÉS MÒBIL
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width:760px){

/* ── 0 · La regla que faltava a tota la web ────────────────────────────────
   Un element de graella té `min-width:auto`: no encongeix MAI per sota del seu
   min-content. Quan una graella cau a una sola columna, els fills comparteixen
   pista, i n'hi ha prou que UN porti una taula amb `min-width:30rem` perquè la
   pista —i la pàgina sencera amb ella— es desbordi cap a la dreta. Llavors els
   fons de secció pinten els primers 375 px i la resta s'escapa.

   Mesurat a 375 px: /zones se n'anava a 618 px d'amplada de scroll, i les dues
   fitxes amb comparativa PRO (assessorament-integral i diagnosi-segona-opinio)
   a 534. `.taula-scroll{overflow-x:auto}` ja hi era des de sempre: el que
   faltava era qui deixés encongir la pista perquè pogués fer la seva feina.

   Amb `min-width:0` la pista ja pot arribar als 340 útils i el que sobra ho
   recull qui toca: el contenidor amb scroll de la taula.
   ─────────────────────────────────────────────────────────────────────────── */
  .split,.svc-body,.svc-aside,.inspect,.bk-grid,.ch-grid,.blocs,
  .foot-grid,.moments,.values,.steps,.svc-grid,.ig-grid,.zc{min-width:0}
  .split>*,.svc-body>*,.svc-aside>*,.inspect>*,.bk-grid>*,.ch-grid>*,.blocs>*,
  .foot-grid>*,.moments>*,.values>*,.steps>*,.svc-grid>*,.ig-grid>*{min-width:0}

/* Les taules de dues columnes («què inclou», «què costa») no necessiten
   scroll: només que la darrera cel·la deixi de ser `nowrap`, que és el que
   inflava el seu min-content. La comparativa PRO sí que el necessita, i per
   això queda fora: viu dins de `.taula-scroll` i allà ha de poder lliscar. */
  .table td:last-child{white-space:normal}
  .taula-scroll .table td:last-child{white-space:nowrap}

/* ── 1 · Respiració ─────────────────────────────────────────────────────────
   `section{padding:4rem 0}` no tenia cap media query: 128 px per secció × 10
   seccions = 1.280 px de buit en una pantalla de 375. A l'escriptori 4rem és
   elegant; aquí era una pantalla i mitja de no-res. */
  section{padding:2.4rem 0}
  .sec-head{margin-bottom:1.5rem}
  .sec-head p{font-size:1rem;margin-top:.5rem}
  .wrap{padding:0 1.1rem}
  /* Dues franges `alt` seguides (Instagram i la crida final) es fonien en una
     sola taca, sobretot en fosc. Una vora les torna a separar. */
  section.alt + section.alt{border-top:1px solid var(--line)}

/* ── 2 · Els rètols petits ─────────────────────────────────────────────────
   Els `.eyebrow` anaven a 11,68 px («Per què nosaltres», «Serveis»,
   «Cobertura»…): de passada, il·legibles. */
  .eyebrow{font-size:.79rem;letter-spacing:.13em;margin-bottom:.6rem}
  .eyebrow::before{width:20px}

  /* El desplaçament de l'aparició, més curt al mòbil. El pla ho demana
     («menys distància i retard») i, de passada, redueix la sensació de bloc
     desencaixat quan es baixa de pressa o es fa una captura llarga: com menys
     es mou cada peça, menys es nota si s'atrapa a mig camí. */
  .mm-anim{transform:translateY(8px)}

/* ── 3 · Hero ───────────────────────────────────────────────────────────────
   Feia 1.359 px = 1,67 pantalles abans de deixar veure res més. El
   `min-height:min(84vh,720px)` és el que el mantenia inflat encara que el
   contingut hi cabés de sobres. */
  /* ⚠ A 375-390 px han de cabre a la primera pantalla: titular, text, els dos
     CTA i l'inici del bloc seguent. Els marges baixen encara mes i el
     titular perd una mica de cos, pero no de jerarquia. */
  .hero .wrap{padding:1.7rem 1.1rem 1.5rem;min-height:0}
  /* El mateix al mobil: sense el padding heretat de section, el titular, el
     text, els dos CTA i l'inici del bloc seguent caben a la primera pantalla. */
  .page-hero .wrap,.svc-hero .wrap{padding:1.5rem 1.1rem}

  /* ⚠ LA CAIXA DE PREU, A DALT. Al mòbil la fitxa anava hero → tot el text
     → preu, o sigui que per saber què val calia baixar cinc pantalles. En
     Sergi demana que a la primera pantalla hi hagi nom, frase, preu, termini
     i CTA.  ja és una graella d'una columna: només cal invertir
     l'ordre visual, sense tocar l'ordre del DOM —que és el bo per a un
     lector de pantalla i per al SEO. */
  .svc-aside{order:-1;margin-bottom:.4rem}
  .svc-body{gap:1.4rem;padding:1.4rem 0}
  /* La frase del banner, més curta d'aire: és el que empenyia el preu avall. */
  .svc-hero .msg{font-size:1rem;line-height:1.5;margin-top:.5rem}
  .svc-hero h1{font-size:clamp(1.5rem,5.6vw,1.9rem)}
  .backbar .wrap{padding:.4rem 1.1rem}
  .hero-grid{gap:1.4rem}
  .hero h1{font-size:clamp(1.7rem,6.2vw,2.1rem);line-height:1.14}
  .hero .lead{font-size:.98rem;margin-top:.6rem}
  .hero .hero-cta{margin-top:.95rem;gap:.5rem}
  /* Els dos botons del hero, a mitges i tocant-se: cauen sota el polze. */
  .hero .hero-cta .btn{flex:1 1 8rem;padding:.85rem 1rem;font-size:1rem}
  .hero .trust{margin-top:.85rem;gap:.25rem .8rem;font-size:.79rem}
  .hero-card{padding:1rem}
  .hero-card h3{font-size:1rem}
  .hero-card .mini{margin-bottom:.7rem;font-size:.84rem}
  .hero-card .qbtn{padding:.6rem .7rem;margin-bottom:.4rem;font-size:.9rem}
  .hero-card .qbtn .ic{width:32px;height:32px;border-radius:9px}
  .hero-card .qbtn .ic svg{width:16px;height:16px}

/* ── 4 · «Per què MarcoMotion» ─────────────────────────────────────────────
   Sis targetes en pila feien 1.716 px, la secció més alta de la portada.
   Passen al mateix patró horitzontal que ja fan servir els passos del procés
   a site.css: icona a l'esquerra, text a la dreta. Mateix idioma visual,
   un terç de l'alçada, i el text no s'estreny (que és el que passaria posant
   dues columnes en 375 px). */
  .values{gap:.55rem}
  .value{display:flex;gap:.85rem;align-items:flex-start;
    padding:.9rem 1rem;background:var(--card);border:1px solid var(--line);
    border-radius:var(--radius-sm);box-shadow:var(--shadow)}
  .value .vic{width:40px;height:40px;border-radius:10px;margin:0;flex:none}
  .value .vic svg{width:19px;height:19px}
  .value h3{font-size:1rem;margin-bottom:.2rem}
  .value p{font-size:.9rem;line-height:1.5}

/* ── 5 · «Ho mirem tot, punt per punt» ─────────────────────────────────────
   1.726 px, i el control eren nou punts de 30 px sobre un dibuix vertical de
   640 px d'alt. El dibuix es queda (és el del tríptic i és bo), però més
   petit; qui mana al mòbil són les fitxes, que passen a fila lliscant amb
   ancoratge i alçada de dit. */
  /* ⚠⚠ `min-width:0` NO ES DECORATIU: sense això, la pàgina sencera es
     desborda cap a la dreta i els fons de secció es queden a 375 px mentre
     la resta s'estira fins a 984. `.inspect` és una graella d'UNA columna,
     o sigui que els dos fills comparteixen pista, i una pista `1fr` val com
     a mínim el `min-content` del fill més ample. En passar les fitxes a
     `nowrap` (aquí sota), el `min-content` del panell va saltar de 375 a
     ~1.500 px i va estirar la pista —i amb ella la caixa del dibuix, que és
     on es veia el desastre encara que no en fos la causa.
     Amb `min-width:0` la pista ja pot encongir i el que sobra ho recull
     l'`overflow-x` de les fitxes, que és on ha d'anar. */
  .inspect{gap:.9rem;min-width:0}
  .inspect-stage,.inspect-panel{min-width:0}
  .inspect-stage{padding:.7rem}
  .car-wrap{max-width:185px}
  .hot{width:26px;height:26px}
  .hot .dot{font-size:.72rem;border-width:1.5px}
  /* Una mica més d'àrea de toc sense fer-los grossos: si es fessin de 44 px
     de debò, en un cotxe de 185 px es trepitjarien entre ells. Els 44 px
     complets els donen les fitxes de sota, que fan la mateixa funció. */
  .hot::after{content:"";position:absolute;inset:-5px}
  .inspect-panel{padding:1.1rem;min-height:0}
  .inspect-panel h3{font-size:1.12rem}
  .inspect-panel p{font-size:.94rem}
  .inspect-chips{flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x proximity;
    margin:1rem -1.1rem 0;padding:.15rem 1.1rem .35rem;
    -webkit-overflow-scrolling:touch;scrollbar-width:none}
  .inspect-chips::-webkit-scrollbar{display:none}
  .inspect-chips button{flex:none;scroll-snap-align:start;
    min-height:44px;padding:.5rem .9rem;font-size:.85rem}

/* ── 6 · «Com treballem» ───────────────────────────────────────────────────
   Cinc passos en pila = 684 px per a cinc frases. En fila lliscant se'n veu
   un i mig: l'escapçat és el que diu que n'hi ha més sense haver de fer
   scroll vertical per descobrir-ho. */
  /* Mateix motiu que a `.inspect`: una fila que no s'embolica no pot deixar
     mai que el seu contingut mani sobre l'amplada del pare. */
  .steps{display:flex;grid-template-columns:none;min-width:0;
    overflow-x:auto;scroll-snap-type:x mandatory;gap:.65rem;
    margin:0 -1.1rem;padding:.2rem 1.1rem .9rem;
    -webkit-overflow-scrolling:touch;scrollbar-width:none}
  .steps::-webkit-scrollbar{display:none}
  .step{flex:0 0 76%;scroll-snap-align:center;
    display:block;text-align:left;padding:1rem;
    background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
    border-radius:var(--radius)}
  .step .num{margin:0 0 .6rem}
  .step h3{font-size:1rem}
  .step p{font-size:.88rem}

/* ── 7 · Targetes de servei ────────────────────────────────────────────────
   Al mòbil el detall ja surt sempre obert (`@media (hover:none)` de
   site.css). No cal tancar-lo: només que ocupi el que ha d'ocupar. */
  .svc-grid{gap:.65rem}
  .svc-card{padding:.9rem 1rem}
  .svc-card h3{font-size:1rem}
  .svc-card .sic{width:40px;height:40px}
  .svc-card .sic svg{width:20px;height:20px}
  .svc-more{margin-top:.55rem}
  .svc-more .sit{font-size:.89rem;line-height:1.5;margin-bottom:.5rem}

/* ── 8 · Resta de blocs de la portada ──────────────────────────────────── */
  .split{gap:1rem}
  .split .card{padding:1.2rem}
  /* Els dibuixos i el mapa van a tota amplada i, en vertical, es mengen mitja
     pantalla cadascun. Són il·lustració de suport, no el contingut: amb 150 px
     ja diuen el que han de dir. */
  .illus-box{padding:.6rem;margin-bottom:.85rem;max-height:160px;display:grid;place-items:center}
  .illus-box .illus{max-height:148px;width:auto;max-width:100%}
  .cta-band{padding:1.9rem 1.2rem}
  .cta-band .row{flex-direction:column}
  .cta-band .row .btn{width:100%}
  .moments{gap:.6rem}
  .moment{padding:1rem}
  /* La franja de la trucada gratuïta: el text i el botó ja van un sota l'altre
     des dels 640; el que sobrava era el coixí. */
  .tr-franja{padding:1.7rem 0}
  .tr-in{gap:.85rem}
  .ig-buit{padding:1.3rem;gap:.7rem}

/* ── 9 · Els efectes que al mòbil no existien ──────────────────────────────
   Sis dels vuit efectes de motion.css són `:hover`: al telèfon no se'n veia
   cap. Aquí es reciclen tal com són, però disparats per mobil.js quan
   l'element entra a pantalla (classe .mm-toca, una sola vegada). No es
   dupliquen estils: només se'ls dona un segon disparador. */
  .moment.mm-toca::after,.svc-card.mm-toca::after,
  .value.mm-toca::after,.ch.mm-toca::after{opacity:1}
  .moment.mm-toca::before{transform:scaleY(1)}
  .moment.mm-toca .ic{background:var(--navy);color:var(--gold)}
  .svc-card.mm-toca .sic{background:var(--navy);color:var(--gold)}
  .value.mm-toca .vic{transform:translateY(-3px) rotate(-4deg)}
  .step.mm-toca .num::after{transform:translateY(0)}
  .step.mm-toca .num>.mm-n{color:var(--gold)}
  .btn-gold.mm-toca .shine{animation:mm-escombra .62s ease-out}

/* ── 10 · Barra d'accions enganxada a baix ─────────────────────────────────
   El motiu, mesurat: entre el CTA del hero (y≈543) i el del final (y≈9.534)
   hi havia 9.000 px amb només el globus de WhatsApp pel mig. Surt passat el
   hero i es queda. És la peça que més ha de moure la conversió de tota la
   capa. */
  .mm-bar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:70;
    gap:.4rem;padding:.5rem .7rem calc(.5rem + env(safe-area-inset-bottom));
    background:color-mix(in srgb,var(--bg) 92%,transparent);
    border-top:1px solid var(--line);backdrop-filter:blur(10px);
    transform:translateY(115%);transition:transform .26s ease;
    box-shadow:0 -8px 24px rgba(9,22,38,.14)}
  .mm-bar.mm-on{transform:translateY(0)}
  .mm-bar a{flex:1 1 0;min-width:0;min-height:46px;
    display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
    border-radius:10px;font-weight:600;font-size:.9rem;
    padding:.5rem .4rem;border:1.5px solid transparent}
  .mm-bar a span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .mm-bar svg{width:1.05em;height:1.05em;flex:none}
  .mm-bar .b-cita{background:var(--gold);color:var(--navy-ink);
    box-shadow:0 6px 16px rgba(198,162,74,.26)}
  .mm-bar .b-wa{background:#1a9c4c;color:#fff}
  /* La trucada gratuïta va només amb la icona: amb text, els tres rètols
     quedaven en 70 px cadascun i s'escapçaven tots tres. */
  .mm-bar .b-tel{flex:0 0 46px;background:transparent;border-color:var(--line-2);color:var(--ink)}
  .mm-bar .b-cita{flex:1.5 1 0}
  .mm-bar a:active{transform:translateY(1px)}
  /* El globus de WhatsApp i la barra fan la mateixa feina i es trepitgen. */
  .wa-float{display:none}
  /* Perquè la barra no tapi mai l'última línia del peu. */
  body{padding-bottom:64px}

/* ── 11 · Progrés de lectura ───────────────────────────────────────────────
   En una pàgina de set pantalles, saber quant en queda. Un fil d'or de 2 px;
   l'amplada la posa mobil.js. */
  .mm-prog{display:block;position:fixed;top:0;left:0;height:2px;width:0;
    z-index:80;background:var(--gold);pointer-events:none;
    transition:width .1s linear}

/* ── 12 · Menú desplegat ───────────────────────────────────────────────── */
  .nav .cta{min-height:48px}

/* ── 13 · Enllaços del peu ─────────────────────────────────────────────────
   Feien 25 px d'alt en columna, un sobre l'altre: enganxar-ne un i encertar
   el del costat era massa fàcil. */
  .foot-links a,.foot-contact .li{min-height:40px;display:flex;align-items:center}
  .foot-legal a{padding:.35rem 0;display:inline-block}
}

/* ── Ningú no ha de patir el moviment que no vol ────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .mm-bar{transition:none}
  .mm-prog{transition:none}
  .btn-gold.mm-toca .shine{animation:none}
}