/* ===================================================================
   d22.css · EtiQali · sistema visual compartit D2.2 (clar / industrial /
   alimentari / B2B). Navy + cian sobre fons clar càlid. Autoritat visual
   ÚNICA compartida: tokens, tipografia, botons, layout/container, cards,
   nav, footer i responsive comú. Sense dark mode, glow, gradients, Web3, bento.

   Bloc 0 de la migració D2.2 (docs/decision-log/2026-10-09_WEB-D2.2-
   MIGRACIO-DISSENY.md). Extret VERBATIM de la Home autocontinguda, sense
   canviar cap regla: només se separa el que és compartit del que és
   exclusiu de la Home (que roman a la seva pròpia capa inline a index.html).
   Les 13 pàgines antigues segueixen amb experiencia.css fins que es migren.

   WEB PRE-DEMO (2026-10-10) · C1 global: llegibilitat (grisos més
   contrastats, microcopy i eyebrow una mica majors, menys tracking), header
   reequilibrat (barra 66px, logo amb més presència dins una pastilla menys
   dominant), CTA gran unificada (.btn-lg), placeholders intencionals (no
   "trencats"), breadcrumb consistent (.crumb) i menys aire per secció.
   =================================================================== */
/* 29/10/2026 · estilo «Cartel de mostrador» (Toni 10:05 y 10:28): Anton (titulares, mayúsculas) + Inter (texto). Letras
   servidas desde /fonts (la CSP solo admite font-src 'self'). Referencia visual: docs/web-nueva/portada-cartel.html. */
@font-face{font-family:'Anton';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/1Ptgg87LROyAm3Kz-C8.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 800;font-display:swap;src:url(/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2) format('woff2')}
:root{
  /* «Cartel de mostrador»: blanco, azul marino #14213D, rojo precio #B3241B, azul #1D4F91 (secundario), gris #EEF1F6.
     Los nombres antiguos se conservan (--navy, --cyan…) para que las 15 páginas cambien sin tocar cada regla. */
  --bg:#FFFFFF; --section:#EEF1F6; --surface:#FFFFFF;
  --ink:#14213D; --navy:#14213D; --navy-2:#1D4F91;
  --cyan:#B3241B; --cyan-soft:#EEF1F6;
  --amber:#B3241B; --red:#B3241B;
  --muted:#36425C; --muted-2:#5A6680; --hair:#C9D0DC;
  --rojo:#B3241B; --azul:#1D4F91; --gris:#EEF1F6; --sobre-azul:#C8D0E0; --rosa:#F2B8B3; --sep-azul:#3A4A6B;
  --f-tit:'Anton',Impact,'Arial Narrow',sans-serif; --f-txt:'Inter',system-ui,sans-serif;
  --maxw:1280px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-txt);font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0;color:var(--navy);letter-spacing:-.4px;font-weight:600;line-height:1.1}
p{margin:0}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.mono{font-family:var(--f-txt)}
.eyebrow{font-family:var(--f-txt);font-size:13.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--cyan)}
.lead{font-size:18.5px;line-height:1.6;color:var(--muted)}
/* breadcrumb compartit · un únic format net: "Inicio / Pàgina" */
.crumb{font-family:var(--f-txt);font-size:13px;color:var(--muted-2);letter-spacing:.03em}
.crumb a{color:var(--muted-2)}
.crumb a:hover{color:var(--navy)}
.crumb .sep{margin:0 7px;color:var(--hair)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border-radius:8px;font-weight:600;font-size:16px;padding:14px 26px;min-height:50px;white-space:nowrap;transition:background .18s,border-color .18s,color .18s;cursor:pointer;border:1px solid transparent}
.btn svg{width:17px;height:17px}
.btn-p{background:var(--navy);color:#fff}
.btn-p:hover{background:#0F2E48}
.btn-c{background:var(--cyan);color:#fff}
.btn-c:hover{background:#178BB1}
.btn-g{background:var(--surface);color:var(--ink);border-color:var(--hair)}
.btn-g:hover{border-color:var(--navy-2);color:var(--navy)}
.btn-link{color:var(--ink);font-weight:600;border-bottom:2px solid var(--cyan);padding:0 0 3px;border-radius:0}
/* CTA gran unificada · per als tancaments de pàgina (substitueix overrides inline) */
.btn-lg{padding:16px 34px;min-height:56px;font-size:17px}
/* placeholders · pocs, clarament marcats però INTENCIONALS (no "trencats"):
   superfície neta amb vora discontínua suau i etiqueta llegible. El text de
   l'etiqueta (via i18n) ja diu "pendent de captura". */
.ph{position:relative;background:var(--section);border:1px dashed #C4D2DE;border-radius:12px;display:flex;align-items:center;justify-content:center;text-align:center;color:var(--muted-2);font-family:var(--f-txt);font-size:13.5px;line-height:1.5;padding:26px}
.ph-qr{position:relative;border:1px dashed #C4D2DE;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:11px;text-align:center;font-family:var(--f-txt);font-size:13px;color:var(--muted-2);background:var(--section)}
.qrg{width:74px;height:74px;opacity:.85}
/* device + browser frames per a captures reals */
.frame{border-radius:12px;overflow:hidden;border:1px solid var(--hair);background:var(--surface);box-shadow:0 20px 48px -22px rgba(20,32,43,.26)}
.frame-bar{display:flex;align-items:center;gap:7px;padding:10px 14px;background:#EEF2F6;border-bottom:1px solid var(--hair)}
.frame-bar i{width:10px;height:10px;border-radius:50%;background:#CBD5DE;display:block}
.frame-bar .url{flex:1;margin-left:8px;background:var(--surface);border:1px solid var(--hair);border-radius:6px;padding:5px 12px;font-family:var(--f-txt);font-size:11.5px;color:var(--muted-2);text-align:center}
.frame img{width:100%;display:block}
.phone{width:300px;background:#0F2233;border-radius:34px;padding:10px;box-shadow:0 30px 64px -26px rgba(20,32,43,.4)}
.phone .scr{border-radius:26px;overflow:hidden;background:#fff;height:520px}
.phone .scr img{width:100%;height:100%;object-fit:cover;object-position:top}
.cap{font-family:var(--f-txt);font-size:12.5px;color:var(--muted-2);margin-top:14px;text-align:center}
.cap b{color:var(--cyan)}
.rv{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}
a:focus-visible,.btn:focus-visible,button:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:8px}

/* ---- CARD · primitiva compartida (superfície D2.2). Les cards de secció
   convergiran cap aquí a mesura que es migrin les pàgines. ---- */
.card{background:var(--surface);border:1px solid var(--hair);border-radius:14px}

/* ---- NAV ---- */
.nav{position:sticky;top:0;z-index:80;background:rgba(251,250,248,.88);backdrop-filter:saturate(140%) blur(12px);border-bottom:1px solid var(--hair)}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:18px;height:66px}
/* Web pública = escaparat de marca: el logo és el protagonista visual de
   l'esquerra, dins d'una pastilla navy que li dona contrast i presència sense
   enfosquir la resta del header. El logo mana sobre la caixa: pastilla ajustada,
   logo gran. (A l'App interna el logo pot ser discret.)
   Fa servir logo.png -versió clara del logotip- perquè va sobre navy. */
.nav-brand{display:inline-flex;align-items:center;background:var(--navy);border-radius:11px;padding:7px 14px;box-shadow:0 3px 12px -5px rgba(20,32,43,.4)}
.nav-brand img{height:40px;width:auto;display:block}
.nav-links{display:flex;align-items:center;gap:28px}
.nav-links a{color:var(--muted);font-size:15.5px;font-weight:500;white-space:nowrap}
.nav-links a:hover{color:var(--navy)}
.nav-more{position:relative}
.more-tog{background:none;border:0;color:var(--muted);font:inherit;font-size:15.5px;font-weight:500;cursor:pointer;display:inline-flex;align-items:center;gap:4px}
.more-tog:hover{color:var(--navy)}
.more-menu{position:absolute;top:calc(100% + 12px);left:0;min-width:190px;background:var(--surface);border:1px solid var(--hair);border-radius:12px;padding:7px;box-shadow:0 20px 44px -22px rgba(20,32,43,.3);display:none;flex-direction:column;gap:2px}
.more-menu.open{display:flex}
.more-menu a{padding:10px 12px;border-radius:8px;font-size:15px}
.more-menu a:hover{background:var(--section)}
.nav-cta{display:flex;align-items:center;gap:12px}
/* CTA de nav = important però SECUNDARI respecte a la marca: compacte, mai
   amb més pes visual que el logo. */
.nav-cta .btn{padding:10px 16px;min-height:44px;font-size:15px}
.nav-tog{display:none;background:none;border:0;color:var(--navy);cursor:pointer;padding:6px}
.nav-m-cta{display:none}
.lang-switch{position:relative}
.lang-tog{background:var(--surface);border:1px solid var(--hair);color:var(--navy);border-radius:8px;padding:9px 13px;font-family:var(--f-txt);font-size:13px;font-weight:600;cursor:pointer;line-height:1;min-height:40px}
.lang-tog:hover{border-color:var(--navy-2)}
.lang-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:160px;background:var(--surface);border:1px solid var(--hair);border-radius:12px;padding:6px;box-shadow:0 20px 44px -22px rgba(20,32,43,.3);display:none;flex-direction:column;gap:2px;z-index:90}
.lang-menu.open{display:flex}
.lang-menu a{color:var(--muted);font-size:15px;padding:10px 12px;border-radius:8px}
.lang-menu a:hover{background:var(--section);color:var(--navy)}
.lang-menu a.lang-current{color:var(--cyan);font-weight:600}

/* ---- SECTIONS (scaffold compartit) ---- */
.sec{padding:70px 0}
.sec.alt{background:var(--section)}
.sec-h{max-width:760px;margin-bottom:40px}
.sec-h h2{font-size:clamp(28px,3.6vw,40px);margin-top:12px}
.sec-h .lead{margin-top:16px}

/* ---- CTA final navy (compartit) ---- */
.cta{background:var(--navy);border-radius:14px;padding:60px;display:flex;align-items:center;justify-content:space-between;gap:44px}
.cta h2{color:#fff;font-size:clamp(28px,3.6vw,36px)}
.cta p{color:#AAC6DA;font-size:16.5px;margin-top:12px}

/* ---- FOOTER (compartit) · compacte i corporatiu, no "gran de plantilla" ---- */
.footer{border-top:1px solid var(--hair);padding:44px 0 30px;margin-top:10px}
.footer-in{display:grid;grid-template-columns:1.3fr 2fr;gap:40px}
/* segon logo · pastilla navy més petita: presència de marca sense competir amb
   el header. També logo.png -versió clara- sobre navy. */
.footer-brand{display:inline-flex;align-items:center;background:var(--navy);border-radius:10px;padding:7px 14px}
.footer-brand img{height:22px;width:auto;display:block}
.footer p.fdesc{font-size:14.5px;color:var(--muted);margin-top:13px;max-width:360px;line-height:1.55}
.footer-links{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.footer-links a{display:block;color:var(--muted);font-size:14.5px;padding:5px 0}
.footer-links a:hover{color:var(--navy)}
/* text legal/normatiu · secundari */
.footer-bot{display:flex;justify-content:space-between;align-items:center;margin-top:26px;padding-top:16px;border-top:1px solid var(--hair);color:var(--muted-2);font-size:13px;gap:14px;flex-wrap:wrap}

/* ===== responsive comú (nav, container, footer, cta) ===== */
@media(max-width:1000px){
  .footer-in{grid-template-columns:1fr;gap:26px}
}
@media(max-width:900px){
  .nav-links{display:none;position:absolute;top:66px;left:0;right:0;flex-direction:column;align-items:flex-start;background:var(--bg);border-bottom:1px solid var(--hair);padding:22px 28px 28px;gap:18px}
  .nav-links.open{display:flex}
  .nav-links a{font-size:18px}
  /* 30/10 · Toni: en el menú ☰ salían sin Fundadores, Así se usa y FAQ (el bloque «Más» se ocultaba entero). Una sola
     lista (nav.d22.html): en el ☰ el bloque «Más» se aplana y sus enlaces quedan en la misma columna que el resto. */
  .nav-more,.more-menu{display:contents}
  .more-tog{display:none}
  .more-menu a{padding:0;font-size:18px}
  .nav-m-cta{display:block}
  /* En mòbil el CTA "Solicitar demo" i "Acceso clientes" ja viuen dins del menú
     hamburguesa -.nav-m-cta-; a la barra superior son redundants i el botó de
     demo, amb text llarg en alguns idiomes -fr/ca/val/gl-, aixafava el logo de
     la pastilla. S'amaguen NOMES a la barra superior; segueixen al menú. */
  .nav-cta .btn-g{display:none}
  .nav-cta .btn-p{display:none}
  .nav-tog{display:block}
}
@media(max-width:680px){
  body{font-size:17px}
  .wrap{padding:0 20px}
  /* en mòbil els botons poden trencar línia · traduccions llargues (fr/ca/val/gl)
     no han de desbordar a 320/360 */
  .btn{white-space:normal;text-align:center}
  .sec{padding:56px 0}
  .cta{flex-direction:column;align-items:flex-start;padding:38px 24px}
  /* CTA gran · en mòbil es compacta i pot trencar línia (text llarg en fr/ca) */
  .btn-lg{padding:14px 24px;min-height:52px;white-space:normal;text-align:center}
  /* Header mòbil · la pastilla de marca es compacta una mica; CTA i idioma, també. */
  .nav-brand{padding:6px 12px}
  .nav-brand img{height:34px}
  .nav-cta{gap:9px}
  .nav-cta .btn-p{padding:9px 14px;min-height:42px;font-size:14.5px}
  .lang-tog{padding:8px 11px;font-size:12.5px;min-height:40px}
  /* Footer mòbil · compacte, 2 columnes netes, sense talls lletjos; el
     padding inferior deixa lloc al banner de cookies fix. */
  .footer{padding:32px 0 92px}
  .footer-links{grid-template-columns:1fr 1fr;gap:4px 18px}
  .footer-bot{flex-direction:column;align-items:flex-start;gap:8px;margin-top:22px}
}


/* =====================================================================
   CAPA «CARTEL DE MOSTRADOR» · 29/10/2026 · toda la web
   Esquinas rectas, bordes de 3 px azul marino, sin degradados, sin brillos, sin sombras difusas.
   ===================================================================== */
*,*::before,*::after{border-radius:0!important;box-shadow:none!important;text-shadow:none!important}
body{background:#fff;color:var(--ink);font-family:var(--f-txt)}
h1,h2{font-family:var(--f-tit);font-weight:400;text-transform:uppercase;letter-spacing:.005em;line-height:1;color:var(--navy)}
h1{font-size:clamp(46px,6.2vw,92px)}
h2,.sec-h h2{font-size:clamp(34px,4.6vw,60px)}
h3{font-family:var(--f-txt);font-weight:700;letter-spacing:0;color:var(--navy)}
.rojo{color:var(--rojo)}
.eyebrow{font-family:var(--f-txt);font-size:13px;font-weight:700;letter-spacing:.12em;color:var(--rojo)}
.lead{color:var(--muted)}
.mono{font-family:var(--f-txt)}
.wrap{max-width:var(--maxw);padding:0 40px}
/* botones: rectangulares, macizos o con borde de 3 px */
.btn{border:3px solid transparent;font-weight:700;min-height:54px;padding:14px 26px}
.btn-p{background:var(--navy);border-color:var(--navy);color:#fff}
.btn-p:hover{background:#0c1528;border-color:#0c1528}
.btn-c,.btn-rojo{background:var(--rojo);border-color:var(--rojo);color:#fff}
.btn-c:hover,.btn-rojo:hover{background:#951d16;border-color:#951d16}
.btn-g{background:#fff;border-color:var(--navy);color:var(--navy)}
.btn-g:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
.btn-link{border-bottom:3px solid var(--rojo)}
a:focus-visible,.btn:focus-visible,button:focus-visible{outline:3px solid var(--rojo);outline-offset:3px}
/* superficies */
.card{border:3px solid var(--navy);background:#fff}
.frame{border:3px solid var(--navy)}
.frame-bar{background:var(--gris);border-bottom:3px solid var(--navy)}
.frame-bar .url{border:0;background:#fff}
.phone{background:var(--navy);padding:12px}
.ph,.ph-qr{border:3px dashed var(--hair)}
.cap b{color:var(--rojo)}
/* franja superior de sectores (cabecera) */
.franja{background:var(--navy);color:#fff;font-size:12.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;text-align:center;padding:9px 16px}
/* cabecera: blanca con borde de 3 px; el logo de la PLATAFORMA en blanco sobre bloque azul marino */
.nav{position:sticky;top:0;background:#fff;backdrop-filter:none;border-bottom:3px solid var(--navy)}
.nav-in{height:76px}
.nav-brand{background:var(--navy);padding:8px 14px}
.nav-brand img{height:42px}
.nav-links a,.more-tog{color:var(--navy);font-weight:600}
.nav-links a:hover,.more-tog:hover{color:var(--rojo)}
.more-menu,.lang-menu{border:3px solid var(--navy)}
.more-menu a:hover,.lang-menu a:hover{background:var(--gris)}
.lang-tog{border:3px solid var(--navy);color:var(--navy);font-family:var(--f-txt)}
.lang-menu a.lang-current{color:var(--rojo)}
.nav-cta .btn-p{background:var(--rojo);border-color:var(--rojo)}
.nav-cta .btn-p:hover{background:#951d16;border-color:#951d16}
/* bandas: .sec.alt pasa a banda azul marino a todo el ancho */
.sec.alt{background:var(--navy);color:#fff}
.sec.alt h1,.sec.alt h2,.sec.alt h3{color:#fff}
.sec.alt .eyebrow{color:#fff}
.sec.alt .eyebrow::before{content:"";display:inline-block;width:12px;height:12px;background:var(--rojo);margin-right:10px;vertical-align:-1px}
.sec.alt .lead,.sec.alt p{color:var(--sobre-azul)}
.sec.alt .rojo{color:var(--rosa)}
.sec.alt a:not(.btn){color:#fff}
.sec.alt .acc,.sec.alt .dv,.cta .acc{color:var(--rosa)}
.sec.alt .mono{color:var(--sobre-azul)}
.sec.alt .btn-g{background:transparent;border-color:#fff;color:#fff}
.sec.alt .btn-g:hover{background:#fff;color:var(--navy)}
/* cajas blancas dentro de una banda azul: vuelven al texto oscuro */
.sec.alt :is(.card,.frame,.faq-item,details,.bencell,.payoff,.cond){background:#fff;color:var(--navy);border:3px solid #fff}
.sec.alt :is(.card,.faq-item,details,.bencell,.payoff,.cond) :is(p,li,.lead){color:var(--muted)}
.sec.alt :is(.card,.faq-item,details,.bencell,.payoff,.cond) :is(h2,h3,b,strong){color:var(--navy)}
.sec.alt :is(.card,.bencell,.payoff,.cond) .eyebrow{color:var(--rojo)}
.sec.alt :is(.card,.bencell,.payoff,.cond) .acc{color:var(--rojo)}
.sec.alt :is(.card,.bencell,.payoff,.cond) .btn-g{background:#fff;border-color:var(--navy);color:var(--navy)}
.sec.alt :is(.card,.bencell,.payoff,.cond) .btn-g:hover{background:var(--navy);color:#fff}
/* cierre de página */
.cta{background:var(--navy);border:0}
.cta h2{color:#fff}
.cta p{color:var(--sobre-azul)}
.cta .btn-g{background:transparent;border-color:#fff;color:#fff}
@media(max-width:1000px){.cta{flex-direction:column;align-items:flex-start}}
/* pie: banda azul marino; logo de la plataforma en blanco; el de la sociedad (lupa) solo en la línea legal */
.footer{background:var(--navy);color:#fff;border-top:6px solid var(--rojo);margin-top:0;padding:56px 0 30px}
.footer-brand{background:transparent;padding:0}
.footer-brand img{height:44px}
.footer p.fdesc{color:var(--sobre-azul)}
.footer-links{border-left:3px solid var(--sep-azul);padding-left:32px}
.footer-links a{color:#fff}
.footer-links a:hover{color:var(--rosa)}
.footer-bot{border-top:3px solid var(--sep-azul);color:var(--sobre-azul)}
.footer-bot .soc{display:inline-flex;align-items:center;gap:10px}
.footer-bot .soc img{height:18px;width:auto}
@media(max-width:1000px){.footer-links{border-left:0;padding-left:0}}
@media(max-width:900px){
  .nav-links{background:#fff;border-bottom:3px solid var(--navy);top:76px}
}
/* 29/10 · entre 901 y 1180 px la barra va más compacta (letra 14 px, menos separación) para que quepa entera sin menú ☰
   en es, ca, val, gl y en. No se esconde ningún enlace ni botón. */
@media(min-width:901px) and (max-width:1180px){
  .nav-in{gap:12px}
  .nav-links{gap:16px}
  .nav-links a,.more-tog{font-size:14px}
  .nav-brand img{height:36px}
  .nav-cta .btn{padding:9px 13px;min-height:44px;font-size:14px}
}
/* 29/10 · euskera y francés: con Anton sus textos no caben en la barra entre 901 y 1180 px. Solo en esos dos idiomas el
   menú ☰ entra a 1180 px (el resto sigue a 900). Mismas reglas que el bloque de 900 px, con el prefijo de idioma. */
@media(min-width:901px) and (max-width:1180px){
  html:is([lang="eu"],[lang="fr"]) .nav-links{display:none;position:absolute;top:76px;left:0;right:0;flex-direction:column;align-items:flex-start;background:#fff;border-bottom:3px solid var(--navy);padding:22px 28px 28px;gap:18px}
  html:is([lang="eu"],[lang="fr"]) .nav-links.open{display:flex}
  html:is([lang="eu"],[lang="fr"]) .nav-links a{font-size:18px}
  html:is([lang="eu"],[lang="fr"]) .nav-more,html:is([lang="eu"],[lang="fr"]) .more-menu{display:contents}
  html:is([lang="eu"],[lang="fr"]) .more-tog{display:none}
  html:is([lang="eu"],[lang="fr"]) .more-menu a{padding:0;font-size:18px}
  html:is([lang="eu"],[lang="fr"]) .nav-m-cta{display:block}
  html:is([lang="eu"],[lang="fr"]) .nav-cta .btn-g,
  html:is([lang="eu"],[lang="fr"]) .nav-cta .btn-p{display:none}
  html:is([lang="eu"],[lang="fr"]) .nav-tog{display:block}
}
@media(max-width:680px){
  .wrap{padding:0 16px}
  .nav-in{height:68px}
  .nav-links{top:68px}
  .nav-brand img{height:36px}
  .franja{font-size:11px;letter-spacing:.05em}
}
@media print{.nav,.franja,.footer{display:none}}