/*
 * bdr-botiga.css · Estils de les pagines de producte de la botiga nova (web3) · bdr-efg · 2026-10-07
 *
 * QUE FA
 * Dona forma als blocs bdrx-* que pinta bdr_producte.tpl (capcalera de producte, ajudant, plans, cicle,
 * configurador amb domini, opcions, quantitats i extres, resum, barra fixa del mobil, inclou, comparatives,
 * que passa quan pagues, confianca, preguntes, alternatives, ajuda, avisos, dialeg i barra de passos).
 * Tot penja de body.bdrw (nomes existeix amb la web nova) i porta el prefix bdrx-; les variables de color
 * son propies (--bdrx-*). La lletra es la BdrPoppins, amb la mateixa pila de reserva que tenia la Raleway; el
 * @font-face el declara bdr-web.css (TTF del tema): aqui nomes es fa servir, a l'arrel de la pagina.
 *
 * MARCA 2026 (bdr-efg, 08/10/2026; decisio H45, 07_Web/Brandbook_2026/propuesta_brandbook.css i el PDF del costat)
 * Els tokens porten els mateixos noms i els valors del brandbook: el navy #091633 passa a #3D3D3D (text, titulars,
 * pastilles triades, numeros de pas, blocs foscos petits), el taronja #F08400 a #EB5420, els fons a blanc i #F8F7F5 i
 * les vores a #E1DEDA i #EFEEEB. Tres de nous: --bdrx-ambre (#F4A000, final del degradat i fons dels botons petits),
 * --bdrx-groc (#FFC738, insignia del pla recomanat i numero del pas actual) i --bdrx-degradat, que nomes va en barres
 * d'accent (rotuls, pla recomanat, resum, xifra d'avui), mai darrere d'un text. El resum i la barra del mobil passen
 * de blocs navy a gris calid i blanc. Els colors d'estat (exit, perill, avis) no canvien. Contrast (WCAG 2.2 AA):
 * - Boto principal, opcio A: blanc sobre #EB5420 (3,61:1), nomes en negreta de 19 px (text gran). Els quatre tokens
 *   --bdrx-boto-* el governen: per passar tota la botiga a l'opcio B, #F4A000, #3D3D3D, #E89500 i 17px.
 * - On el boto no arriba a 19 px (barra del mobil, resultats de domini), opcio B: #3D3D3D sobre #F4A000 (5,11:1).
 * - Cap text en taronja ni en groc (#EB5420 sobre blanc 3,61:1, #F4A000 2,13:1). Enllacos en #3D3D3D subratllats
 *   en taronja. Les xifres de cada parella les calcula proves/disseny.test.js amb els valors d'aquest fitxer.
 *
 * PER QUE EXISTEIX
 * Especificacio de web3, seccions 2.9 (estil), 3 (cataleg de components), 4 (anatomia) i 9 (mobil,
 * accessibilitat i rendiment). Contrast AA de cada parella de colors a proves/integrador_disseny.md.
 *
 * DECISIONS QUE CAL SABER
 * - La pagina va a sang com la portada (ample de la finestra dins del .container del tema). Si algun dia el
 *   nucli JS mesura la barra de desplacament a --bdrx-sb, aqui ja es descompta; sense, val 0.
 * - Nomes a les pagines de producte, el body passa d'overflow-x: hidden (custom.css) a clip: talla igual el que
 *   sobresurt pels costats, pero no converteix el body en contenidor de desplacament i el resum fix (sticky)
 *   funciona. Navegadors sense clip: es queda el hidden i el resum simplement no es fixa.
 * - La barra del mobil es position: fixed (la CSS l'amaga des de 1060 px); el JS decideix quan es veu.
 * - Els radios de les pastilles (cicle, segment, guia) estan amagats a la vista pero son natius i enfocables:
 *   el focus es pinta a l'etiqueta amb :has(:focus-visible). Les llistes i les decisions porten el radio a la vista.
 *
 * RONDA D'OBERTURA DE WEB4 (bdr-efg, 12/10/2026; decisions H49 i H50)
 * Al final, una seccio propia: el telefon i l'horari a l'ajuda humana (.bdrx-ajuda-tel, tambe a la versio minima) i el
 * formulari de contacte compartit amb la web nova (#bdr-lead: la nota dels obligatoris, l'asterisc, l'error de cada camp,
 * el camp marcat i el resum), a contacte, a WordPress i als dedicats. Font: codigo/web4/srv (copiar-lo a web3/srv despres
 * de pujar).
 *
 * COM ES DESACTIVA
 * Sense la linia <link> d'aquest fitxer a header.tpl no s'aplica res. Les pagines de producte noves es tornen
 * a la de sempre buidant tblconfiguration.BdrBotigaFamilies (i llavors aquest fitxer no estila res: sense
 * .bdrx-* a la pagina, cap regla hi troba res).
 */

/* =========================================================================================================
   Tokens
   ========================================================================================================= */
body.bdrw {
  /* Els noms son els de sempre (navy, taronja...) perque la resta de fulles i el JS hi compten; el valor es el del
     brandbook 2026. bdr-carret.css en redefineix una part per a les pagines del carret: han d'anar iguals. */
  --bdrx-navy: #3D3D3D;
  --bdrx-taronja: #EB5420;
  --bdrx-taronja-fons-hover: #D2461A;
  --bdrx-ambre: #F4A000;
  --bdrx-ambre-hover: #E89500;
  --bdrx-groc: #FFC738;
  --bdrx-degradat: linear-gradient(90deg, #EB5420 0%, #F4A000 100%);
  /* Boto principal (opcio A). En hex i no amb var(): bdr-carret.css redefineix --bdrx-taronja a les pagines del
     carret i el blanc hi quedaria sobre un altre taronja */
  --bdrx-boto-fons: #EB5420;
  --bdrx-boto-text: #FFFFFF;
  --bdrx-boto-hover: #D2461A;
  --bdrx-boto-mida: 19px;
  --bdrx-enllac: #3D3D3D;
  --bdrx-enllac-hover: #111111;
  --bdrx-fons: #FFFFFF;
  --bdrx-alterna: #F8F7F5;
  --bdrx-blanc: #FFFFFF;
  --bdrx-vora: #E1DEDA;
  --bdrx-vora-suau: #EFEEEB;
  --bdrx-vora-camp: #8A8580;
  --bdrx-secundari: #636363;
  --bdrx-exemple: #707070;
  --bdrx-clar-navy: #D9D6D1;
  --bdrx-linia-navy: #575757;
  --bdrx-navy-hover: #2A2A2A;
  --bdrx-exit: #1F6F46;
  --bdrx-exit-fons: #E7F4EC;
  --bdrx-perill: #B42318;
  --bdrx-perill-fons: #FDECEC;
  --bdrx-avis: #8A5A00;
  --bdrx-avis-fons: #FFF6E0;
  --bdrx-info-fons: #F3F1EE;
  --bdrx-ombra: 0 8px 24px rgba(61, 61, 61, 0.08);
  --bdrx-ombra-forta: 0 18px 50px rgba(61, 61, 61, 0.12);
  --bdrx-ombra-panell: 0 30px 80px rgba(61, 61, 61, 0.08);
  --bdrx-r-s: 10px;
  --bdrx-r-m: 14px;
  --bdrx-r-l: 20px;
  --bdrx-r-xl: 28px;
  --bdrx-ample: 1240px;
  --bdrx-marge: clamp(16px, 2.5vw, 24px);
  --bdrx-barra-alt: 56px;
  --bdrx-il-alt: 360px;
}

/* =========================================================================================================
   Arrel de la pagina: a sang, base de text i reinici del que posa el tema (Bootstrap) dins dels blocs
   ========================================================================================================= */
@supports (overflow: clip) {
  body.bdrw:has(.bdrx-pagina) { overflow-x: clip; }
}
body.bdrw .bdrx-pagina {
  flex: 0 0 auto;
  width: calc(100vw - var(--bdrx-sb, 0px));
  max-width: none;
  margin-left: calc(50% - 50vw + var(--bdrx-sb, 0px) / 2);
  margin-right: calc(50% - 50vw + var(--bdrx-sb, 0px) / 2);
  color: var(--bdrx-navy);
  background: var(--bdrx-fons);
  font-family: 'BdrPoppins', 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  font-variant-numeric: lining-nums;
  -webkit-font-smoothing: antialiased;
}
body.bdrw .bdrx-pagina :where(h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote, fieldset, legend, table, caption) { margin: 0; padding: 0; }
body.bdrw .bdrx-pagina :where(h1, h2, h3, h4) { font-family: inherit; color: inherit; font-weight: 700; }
body.bdrw .bdrx-pagina :where(fieldset) { min-width: 0; border: 0; }
body.bdrw .bdrx-pagina :where(legend) { width: auto; max-width: 100%; font-size: inherit; line-height: inherit; color: inherit; white-space: normal; }
body.bdrw .bdrx-pagina :where(label) { display: block; margin: 0; font-weight: inherit; }
/* Sense pics: les llistes de les plantilles porten role="list", perque Safari amb VoiceOver no les anuncia com a
   llistes quan no tenen pics (WCAG 1.3.1) */
body.bdrw .bdrx-pagina :where(ul, ol) { list-style: none; }
body.bdrw .bdrx-pagina :where(button, input, select, textarea) { font: inherit; color: inherit; margin: 0; }
body.bdrw .bdrx-pagina :where(button) { cursor: pointer; }
/* Pes de Poppins (brandbook): Bold als titulars, SemiBold a la negreta del text i als subtitols, Medium i Regular al text */
body.bdrw .bdrx-pagina :where(b, strong) { font-weight: 600; }
/* Enllacos: #3D3D3D, el color del text, i el subratllat taronja de 2 px es el que els distingeix (WCAG 1.4.1) */
body.bdrw .bdrx-pagina :where(a) { color: var(--bdrx-enllac); text-decoration: underline; text-decoration-color: var(--bdrx-taronja); text-decoration-thickness: 2px; text-underline-offset: 4px; }
body.bdrw .bdrx-pagina :where(a:hover) { color: var(--bdrx-enllac-hover); text-decoration-thickness: 3px; }
body.bdrw .bdrx-pagina svg { flex: 0 0 auto; }
body.bdrw .bdrx-pagina [hidden],
body.bdrw .bdrx-dialeg [hidden] { display: none !important; }
body.bdrw .bdrx-pagina *,
body.bdrw .bdrx-pagina *::before,
body.bdrw .bdrx-pagina *::after { box-sizing: border-box; }

/* Text d'exemple dels camps (elteunegoci.ad): un gris mes clar que el secundari i de pes normal, perque no sembli un
   domini ja escrit (amb el secundari i el pes 500 del camp s'hi confonia), sense opacitat i amb 4,95:1 sobre blanc
   (#707070 des de la marca 2026; WCAG 1.4.3). Sense aquesta regla el color depen del navegador (Firefox el fa amb opacitat i no arriba a 4,5:1). */
body.bdrw .bdrx-pagina ::placeholder { color: var(--bdrx-exemple); opacity: 1; font-weight: 400; }

/* Sense JavaScript (bdrx-sense-js): el text o la llista que fa el paper d'un control que nomes funciona amb JS
   (boto de plegar, pestanyes). S'amaga quan el JS ja hi es: .is-viva a l'arrel (el posa en acabar d'arrencar) o
   el control germa ja a la vista. Regles separades: un navegador sense :has() descarta la regla sencera. */
body.bdrw .bdrx-pagina.is-viva .bdrx-sense-js { display: none; }
body.bdrw .bdrx-pagina :is(h2, h3):has(> [data-bdrx-nomes-js]:not([hidden])) > .bdrx-sense-js { display: none; }
body.bdrw .bdrx-compara-mobil:has(> [data-bdrx-nomes-js]:not([hidden])) > .bdrx-sense-js { display: none; }

/* Focus: #3D3D3D sobre clar (10,86:1 sobre blanc, 10,15:1 sobre #F8F7F5); groc sobre el bloc fosc de l'ajuda
   (6,97:1). El resum i la barra ja son clars (marca 2026) i porten l'anell de tot arreu. */
body.bdrw .bdrx-pagina :focus-visible,
body.bdrw .bdrx-dialeg :focus-visible { outline: 3px solid var(--bdrx-navy); outline-offset: 2px; }
body.bdrw .bdrx-ajuda-caixa :focus-visible { outline-color: var(--bdrx-groc); }
/* Els titols i blocs que reben el focus per programa (tabindex=-1) no porten anell: el focus no es seu */
body.bdrw .bdrx-pagina [tabindex="-1"]:focus:not(:focus-visible) { outline: none; }

body.bdrw .bdrx-sr {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
body.bdrw .bdrx-xifres { font-variant-numeric: lining-nums tabular-nums; }

/* Contenidor i bandes */
body.bdrw .bdrx-cont { width: 100%; max-width: calc(var(--bdrx-ample) + 2 * var(--bdrx-marge)); margin: 0 auto; padding: 0 var(--bdrx-marge); }
body.bdrw .bdrx-seccio { padding: clamp(48px, 6vw, 80px) 0; scroll-margin-top: 16px; }
body.bdrw .bdrx-seccio-plegada { padding: clamp(24px, 3vw, 40px) 0; }
body.bdrw .bdrx-seccio-alt { background: var(--bdrx-alterna); border-top: 1px solid var(--bdrx-vora-suau); border-bottom: 1px solid var(--bdrx-vora-suau); }
body.bdrw .bdrx-seccio-cap { display: flex; flex-direction: column; gap: 10px; max-width: 760px; margin-bottom: clamp(24px, 3vw, 36px); }

/* Tipografia. Rotuls (WEB I CORREU...): el brandbook els pinta en taronja, pero a 14 px el taronja no arriba a 4,5:1;
   van en #3D3D3D i el taronja el posa una barra de degradat al davant (decorativa, fora del text) */
body.bdrw .bdrx-rotul { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; line-height: 1.3; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bdrx-navy); }
body.bdrw .bdrx-rotul::before { content: ''; flex: 0 0 auto; width: 28px; height: 4px; border-radius: 2px; background: var(--bdrx-degradat); }
body.bdrw .bdrx-h1 { font-size: clamp(32px, 22px + 1.8vw, 48px); line-height: 1.08; font-weight: 700; letter-spacing: -0.02em; text-wrap: balance; }
body.bdrw .bdrx-h2 { font-size: clamp(26px, 20px + 1.2vw, 36px); line-height: 1.12; font-weight: 700; letter-spacing: -0.02em; text-wrap: balance; }
body.bdrw .bdrx-h3 { font-size: 20px; line-height: 1.25; font-weight: 600; letter-spacing: -0.01em; }
body.bdrw .bdrx-sub { max-width: 62ch; font-size: 18px; line-height: 1.55; color: var(--bdrx-secundari); text-wrap: pretty; }
body.bdrw .bdrx-nota { font-size: 14px; line-height: 1.5; color: var(--bdrx-secundari); }

/* =========================================================================================================
   Botons
   ========================================================================================================= */
body.bdrw .bdrx-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 22px; border: 0; border-radius: 12px;
  font-size: 16px; font-weight: 600; line-height: 1.2; text-align: center; text-decoration: none; white-space: normal;
  cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
body.bdrw .bdrx-btn svg { width: 18px; height: 18px; }
/* La mida gran va abans del principal: amb totes dues classes, la mida la posa el principal (19 px) */
body.bdrw .bdrx-btn-gran { min-height: 56px; font-size: 17px; border-radius: 14px; }
/* El principal, opcio A del brandbook (marca 2026): text blanc en negreta de 19 px sobre #EB5420, 3,61:1, que nomes
   val com a text gran (negreta des de 18,66 px); en passar-hi per sobre, #D2461A, 4,53:1. Mai mes petit: on el boto ha
   de ser petit (barra del mobil, resultats de domini) porta l'opcio B a la seva regla. Abans: taronja amb text navy. */
body.bdrw .bdrx-btn-pri,
body.bdrw a.bdrx-btn-pri { background: var(--bdrx-boto-fons); color: var(--bdrx-boto-text); font-size: var(--bdrx-boto-mida); font-weight: 700; }
body.bdrw .bdrx-btn-pri:hover,
body.bdrw a.bdrx-btn-pri:hover { background: var(--bdrx-boto-hover); color: var(--bdrx-boto-text); }
body.bdrw .bdrx-btn-sec,
body.bdrw a.bdrx-btn-sec { background: var(--bdrx-blanc); color: var(--bdrx-navy); box-shadow: inset 0 0 0 1.5px var(--bdrx-navy); }
body.bdrw .bdrx-btn-sec:hover,
body.bdrw a.bdrx-btn-sec:hover { background: var(--bdrx-alterna); color: var(--bdrx-navy); }
body.bdrw .bdrx-btn-navy,
body.bdrw a.bdrx-btn-navy { background: var(--bdrx-navy); color: var(--bdrx-blanc); }
body.bdrw .bdrx-btn-navy:hover,
body.bdrw a.bdrx-btn-navy:hover { background: var(--bdrx-navy-hover); color: var(--bdrx-blanc); }
body.bdrw .bdrx-btn-blanc,
body.bdrw a.bdrx-btn-blanc { background: var(--bdrx-blanc); color: var(--bdrx-navy); }
body.bdrw .bdrx-btn-blanc:hover,
body.bdrw a.bdrx-btn-blanc:hover { background: var(--bdrx-clar-navy); color: var(--bdrx-navy); }
body.bdrw .bdrx-btn-exit { background: var(--bdrx-blanc); color: var(--bdrx-exit); box-shadow: inset 0 0 0 1.5px var(--bdrx-exit); min-height: 44px; padding: 0 16px; font-size: 15px; }
body.bdrw .bdrx-btn-exit:hover { background: var(--bdrx-exit-fons); color: var(--bdrx-exit); }
body.bdrw .bdrx-btn-ample { width: 100%; }
/* Bloquejat amb motiu: es pot premer (ensenya el motiu), pero es veu que encara no */
body.bdrw .bdrx-btn[aria-disabled="true"] { background: var(--bdrx-alterna); color: var(--bdrx-secundari); box-shadow: inset 0 0 0 1.5px var(--bdrx-vora-camp); cursor: not-allowed; }
body.bdrw .bdrx-btn[aria-busy="true"] { cursor: progress; }
body.bdrw .bdrx-btn[aria-busy="true"]::after {
  content: ''; width: 16px; height: 16px; border-radius: 50%;
  border: 2.5px solid currentColor; border-right-color: transparent; animation: bdrx-gira 0.8s linear infinite;
}
@keyframes bdrx-gira { to { transform: rotate(360deg); } }
body.bdrw .bdrx-btn-text {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 4px; border: 0; background: transparent;
  font-size: 16px; font-weight: 700; color: var(--bdrx-enllac); text-decoration: underline; text-decoration-color: var(--bdrx-taronja);
  text-decoration-thickness: 2px; text-underline-offset: 4px; cursor: pointer;
}
body.bdrw .bdrx-btn-text:hover { color: var(--bdrx-enllac-hover); text-decoration-thickness: 3px; }
body.bdrw .bdrx-enllac-fort { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 700; }

/* =========================================================================================================
   Icones de llista (decoratives: el sentit sempre es al text)
   ========================================================================================================= */
body.bdrw .bdrx-ico-si::before,
body.bdrw .bdrx-ico-no::before,
body.bdrw .bdrx-ico-fet::before {
  content: ''; flex: 0 0 auto; width: 20px; height: 20px; margin-top: 2px; background: currentColor;
  -webkit-mask: var(--bdrx-mascara) center / contain no-repeat; mask: var(--bdrx-mascara) center / contain no-repeat;
}
body.bdrw .bdrx-ico-si::before { --bdrx-mascara: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E"); color: var(--bdrx-exit); }
body.bdrw .bdrx-ico-no::before { --bdrx-mascara: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E"); color: var(--bdrx-secundari); }
body.bdrw .bdrx-ico-fet::before { --bdrx-mascara: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12.5l2.8 2.8L16 9.5'/%3E%3C/svg%3E"); }

/* =========================================================================================================
   Bloc 0 (seccio 4): migues, dalt de tot. Petites i en secundari; l'enllac, el de la casa (subratllat). Amb elles a
   dalt, les del tema (.master-breadcrumb, que el peu pinta al final de la pagina) no es pinten: nomes a les pagines
   amb les migues noves, la resta de la web no canvia.
   ========================================================================================================= */
body.bdrw .bdrx-migues { padding-top: clamp(8px, 1.2vw, 14px); font-size: 14px; line-height: 1.4; color: var(--bdrx-secundari); }
body.bdrw .bdrx-migues-llista { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; }
body.bdrw .bdrx-migues-llista li { display: inline-flex; align-items: center; gap: 8px; min-width: 0; overflow-wrap: anywhere; }
/* El separador es decoratiu: text alternatiu buit (content: '/' / ''), perque el lector de pantalla no llegeixi
   «barra» entre nivells. La primera declaracio es el recanvi: un navegador que no entengui la segona la descarta i
   continua pintant la barra (QA del 07/10, segona passada). */
body.bdrw .bdrx-migues-llista li + li::before { content: '/'; content: '/' / ''; color: var(--bdrx-vora-camp); }
body.bdrw .bdrx-migues-llista a { display: inline-flex; align-items: center; min-height: 32px; font-weight: 500; }
body.bdrw .bdrx-migues-llista [aria-current="page"] { display: inline-flex; align-items: center; min-height: 32px; color: var(--bdrx-navy); font-weight: 700; }
/* Amb les migues a dalt, la capcalera comenca mes amunt: els plans continuen asomant a 1024x768 i 1366x768 */
body.bdrw .bdrx-migues + .bdrx-cap { padding-top: clamp(8px, 1.2vw, 16px); }
body.bdrw:has(.bdrx-pagina .bdrx-migues) .master-breadcrumb { display: none; }

/* =========================================================================================================
   3.1 Capcalera de producte
   ========================================================================================================= */
body.bdrw .bdrx-cap { padding: clamp(24px, 3vw, 40px) 0 clamp(20px, 2.5vw, 32px); }
body.bdrw .bdrx-cap-in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px 48px; align-items: center; }
body.bdrw .bdrx-cap-in.amb-il { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
body.bdrw .bdrx-cap-text { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; min-width: 0; }
body.bdrw .bdrx-cap-preu { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin-top: 2px; font-variant-numeric: lining-nums tabular-nums; }
/* «8,90 € /mes · sense IGI»: l'import (xifra i unitat, .bdrx-cap-import) i la nota son dues peces que es parteixen
   per separat. El punt no es de la nota: es pinta al buit de 16 px que la separa de l'import, fora de la seva caixa
   (right: 100%). Quan la nota baixa de linia comenca a l'esquerra de tot i el punt queda fora de .bdrx-cap-visual,
   que el retalla (overflow-x: clip): mai «· sense IGI» a l'inici d'una linia. Navegadors sense clip: el punt es veu
   com abans.
   Dins de l'import, la xifra i la unitat van en linia, no com a peces flex (bdr-efg, 08/10/2026, tercera ronda:
   «/mois» i «/mes» baixaven soles a la linia de sota quan la xifra omplia l'ample, a gestio en frances de 320 a
   414 px i en catala a 320 i 360). Aixi la xifra es parteix pels seus espais i la unitat, sense espai davant i amb
   nowrap, va sempre enganxada a la darrera paraula («59,00 €/mois»: entre la xifra i el «/» no hi ha punt de tall).
   El marge de 6 px es el buit que hi havia. Els line-height deixen la linia de l'import com era: 1.1 a l'import (el
   de la xifra, perque la linia buida del bloc no hi sumi) i 1.55 a la unitat (el de .bdrx-pagina, que abans heretava);
   sense, la linia feia mig pixel mes o menys i el que hi ha a sota es movia. Com a germana de .bdrx-cap-nota dins de
   .bdrx-cap-visual (flex), la caixa de l'import es un element flex igual que abans: el punt de la nota no canvia. */
body.bdrw .bdrx-cap-visual { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0 16px; overflow-x: clip; }
body.bdrw .bdrx-cap-import { display: inline; min-width: 0; line-height: 1.1; }
body.bdrw .bdrx-cap-xifra { font-size: clamp(28px, 24px + 0.8vw, 36px); line-height: 1.1; font-weight: 700; letter-spacing: -0.02em; }
body.bdrw .bdrx-cap-unitat { margin-left: 6px; font-size: 17px; line-height: 1.55; font-weight: 700; white-space: nowrap; }
body.bdrw .bdrx-cap-nota { position: relative; font-size: 15px; color: var(--bdrx-secundari); }
body.bdrw .bdrx-cap-nota::before { content: '\00B7'; position: absolute; top: 0; right: 100%; width: 16px; text-align: center; }
body.bdrw .bdrx-cap-preu .bdrx-preu-alta,
body.bdrw .bdrx-cap-preu .bdrx-preu-igi { flex-basis: 100%; }
body.bdrw .bdrx-xips { display: flex; flex-wrap: wrap; gap: 8px; }
body.bdrw .bdrx-xips li { display: inline-flex; align-items: flex-start; gap: 6px; min-height: 36px; padding: 7px 14px 7px 10px; border-radius: 999px; background: var(--bdrx-blanc); border: 1px solid var(--bdrx-vora); font-size: 14px; font-weight: 500; line-height: 1.4; }
body.bdrw .bdrx-xips li::before { width: 18px; height: 18px; margin-top: 1px; }
body.bdrw .bdrx-cap-botons { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; min-height: 48px; margin-top: 4px; }
body.bdrw .bdrx-cap-il { min-width: 0; display: flex; justify-content: center; align-items: center; }
body.bdrw .bdrx-cap-il > * { max-width: 100%; max-height: var(--bdrx-il-alt); }
body.bdrw .bdrx-cap-cerca { width: 100%; max-width: 760px; }
@media (prefers-reduced-motion: reduce) {
  body.bdrw .bdrx-cap-il *,
  body.bdrw .bdrx-cap-il *::before,
  body.bdrw .bdrx-cap-il *::after { animation: none !important; transition: none !important; }
}
/* Per sota de 860 px la il.lustracio va sota els botons i sencera: abans es limitava a 160 px d'alt i la targeta tallava
   les files per la meitat (a 390 i a 768 px). Al mobil (per sota de 600 px) no es pinta: es decorativa (aria-hidden,
   repeteix el que ja diu el text), a 320 i 390 px les files no hi cabien i l'especificacio 3.1 la deixa «reduida o
   fora». Aixi els plans arriben abans. A l'escriptori, 360 px com a maxim (eren 320: la de WordPress en fa 327 a 1024 px
   i 337 a 1440, i en perdia la part de baix; la columna del text de la capcalera ja es mes alta, aixi que no creix). */
@media (max-width: 859.98px) {
  body.bdrw .bdrx-cap-in.amb-il { grid-template-columns: minmax(0, 1fr); }
  body.bdrw { --bdrx-il-alt: none; }
  body.bdrw .bdrx-cap-il { justify-content: flex-start; }
}
@media (max-width: 599.98px) {
  body.bdrw .bdrx-cap-il { display: none; }
}

/* =========================================================================================================
   3.3 Preu
   ========================================================================================================= */
body.bdrw .bdrx-preu { display: flex; flex-direction: column; gap: 4px; font-variant-numeric: lining-nums tabular-nums; }
body.bdrw .bdrx-preu-visual { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; }
body.bdrw .bdrx-preu-xifra { font-size: clamp(30px, 26px + 0.6vw, 36px); line-height: 1.1; font-weight: 700; letter-spacing: -0.02em; }
body.bdrw .bdrx-preu-unitat { font-size: 17px; font-weight: 700; }
body.bdrw .bdrx-preu-nota { font-size: 14px; color: var(--bdrx-secundari); }
body.bdrw .bdrx-preu-alt { font-size: 15px; line-height: 1.45; font-weight: 500; }
body.bdrw .bdrx-preu-estalvi { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 999px; background: var(--bdrx-exit-fons); color: var(--bdrx-exit); font-size: 14px; font-weight: 700; }
body.bdrw .bdrx-preu-alta { font-size: 14px; line-height: 1.45; color: var(--bdrx-navy); font-weight: 500; }
body.bdrw .bdrx-preu-igi { font-size: 14px; line-height: 1.45; color: var(--bdrx-secundari); }

/* =========================================================================================================
   3.4 Selector de cicle (radios natius en pastilla)
   ========================================================================================================= */
body.bdrw .bdrx-cicle-lloc { min-height: 56px; display: flex; align-items: center; }
body.bdrw .bdrx-cicle { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 14px; background: var(--bdrx-alterna); border: 1px solid var(--bdrx-vora); }
body.bdrw .bdrx-cicle-op { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 16px; border-radius: 10px; font-size: 15px; font-weight: 600; cursor: pointer; }
body.bdrw .bdrx-cicle-op input,
body.bdrw .bdrx-segment input,
body.bdrw .bdrx-xip-radio input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
body.bdrw .bdrx-cicle-op:has(input:checked) { background: var(--bdrx-navy); color: var(--bdrx-blanc); }
body.bdrw .bdrx-cicle-op:has(input:focus-visible) { outline: 3px solid var(--bdrx-navy); outline-offset: 2px; }
body.bdrw .bdrx-cicle-estalvi { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; background: var(--bdrx-exit-fons); color: var(--bdrx-exit); font-size: 13px; font-weight: 700; white-space: nowrap; }
@media (max-width: 599.98px) {
  body.bdrw .bdrx-cicle-lloc { width: 100%; }
  body.bdrw .bdrx-cicle { display: flex; flex-wrap: nowrap; width: 100%; }
  /* Mida segons el contingut: Mensual queda curt i Anual pren el que sobra. L'etiqueta d'estalvi es pot partir
     (la de Copies en frances no cap en una linia a 320 px ni a 390 px; WCAG 1.4.10) i llavors no fa d'estadi. */
  body.bdrw .bdrx-cicle-op { flex: 1 1 auto; flex-wrap: wrap; justify-content: center; row-gap: 2px; min-height: 48px; padding: 4px 8px; text-align: center; }
  body.bdrw .bdrx-cicle-estalvi { max-width: 100%; white-space: normal; text-align: center; border-radius: 10px; }
}

/* =========================================================================================================
   3.5 Plans: panell, targetes i escenaris
   ========================================================================================================= */
body.bdrw .bdrx-plans-sec { padding: 0 0 clamp(32px, 4vw, 56px); scroll-margin-top: 16px; }
body.bdrw .bdrx-panell { display: flex; flex-direction: column; gap: clamp(20px, 2.5vw, 28px); padding: clamp(16px, 3.5vw, 40px); background: var(--bdrx-blanc); border: 1px solid var(--bdrx-vora); border-radius: var(--bdrx-r-xl); box-shadow: var(--bdrx-ombra-panell); }
body.bdrw .bdrx-panell-cap { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; }
body.bdrw .bdrx-panell-cap > :first-child { flex: 1 1 360px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
body.bdrw .bdrx-noscript { padding: 12px 16px; border-radius: 12px; background: var(--bdrx-info-fons); font-size: 15px; }

body.bdrw .bdrx-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(270px, 100%), 1fr)); gap: 16px; align-items: stretch; }
body.bdrw .bdrx-pla {
  position: relative; display: flex; flex-direction: column; gap: 18px; min-width: 0;
  padding: 24px clamp(18px, 2vw, 24px); background: var(--bdrx-blanc); border: 1px solid var(--bdrx-vora); border-radius: var(--bdrx-r-l);
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
body.bdrw .bdrx-pla:hover { box-shadow: var(--bdrx-ombra); }
/* Recomanat: vora taronja i barra de degradat de 5 px a dalt, un fons sota el farciment de 24 px (mai darrere del
   text). Abans, una ombra interior taronja de 3 px. */
body.bdrw .bdrx-pla.es-recomanat { border-color: var(--bdrx-taronja); box-shadow: none; background: var(--bdrx-degradat) top / 100% 5px no-repeat, var(--bdrx-blanc); }
body.bdrw .bdrx-pla.is-recomanat-guia { border-color: var(--bdrx-navy); }
/* Una sola crida principal: quan l'ajudant recomana un pla (is-recomanat-guia, el posa el JS), el boto d'aquell pla es
   pinta com el principal i el dels altres com el secundari, tambe el del recomanat fix, que conserva la insignia i la
   vora taronja. Abans, amb el recomanat fix a Silver i l'ajudant a Gold, hi havia dos botons taronja a plans diferents
   (QA del 07/10, segona passada). Quan l'ajudant canvia o no recomana res, la classe se'n va i torna el de la
   plantilla. Sense :has, com abans. Es treu esborrant aquestes quatre regles. Amb la marca 2026 tambe canvien la mida i
   el pes: el que passa a secundari queda com els altres secundaris grans (17 px, 600) i el que passa a principal, com
   el principal (19 px en negreta: el blanc sobre #EB5420 nomes val en text gran). */
body.bdrw .bdrx-plans:has(> .bdrx-pla.is-recomanat-guia) > .bdrx-pla:not(.is-recomanat-guia) .bdrx-pla-form .bdrx-btn-pri { background: var(--bdrx-blanc); color: var(--bdrx-navy); box-shadow: inset 0 0 0 1.5px var(--bdrx-navy); font-size: 17px; font-weight: 600; }
body.bdrw .bdrx-plans:has(> .bdrx-pla.is-recomanat-guia) > .bdrx-pla:not(.is-recomanat-guia) .bdrx-pla-form .bdrx-btn-pri:hover { background: var(--bdrx-alterna); color: var(--bdrx-navy); }
body.bdrw .bdrx-pla.is-recomanat-guia .bdrx-pla-form .bdrx-btn-sec { background: var(--bdrx-boto-fons); color: var(--bdrx-boto-text); box-shadow: none; font-size: var(--bdrx-boto-mida); font-weight: 700; }
body.bdrw .bdrx-pla.is-recomanat-guia .bdrx-pla-form .bdrx-btn-sec:hover { background: var(--bdrx-boto-hover); color: var(--bdrx-boto-text); }
/* Triat: vora navy de 2 px sense moure res (ombra interior), icona i text «Triat» */
body.bdrw .bdrx-pla.is-triat { border-color: var(--bdrx-navy); box-shadow: inset 0 0 0 1px var(--bdrx-navy), var(--bdrx-ombra); }
/* Quatre plans (vps.php) per sota de 1280 px: dues columnes (2x2) en lloc de tres i la quarta sola a la segona fila. Les
   quatre de 270 px hi caben a partir d'uns 1258 px; el marge cobreix la barra de desplacament classica. Per sota de
   640 px, una columna com sempre. */
@media (min-width: 640px) and (max-width: 1279.98px) {
  body.bdrw .bdrx-plans:has(> .bdrx-pla:nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@supports (grid-template-rows: subgrid) {
  body.bdrw .bdrx-plans { grid-auto-rows: auto; }
  body.bdrw .bdrx-pla { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 18px; }
}
body.bdrw .bdrx-pla-cap { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
body.bdrw .bdrx-insignies { display: flex; flex-wrap: wrap; gap: 6px; min-height: 0; }
/* Amb un pla recomanat, les altres targetes reserven el lloc de la seva insignia amb una copia invisible del mateix
   text (plans.tpl): fa el mateix alt a la mateixa amplada, tambe quan es parteix en dues linies (en angles i frances a
   1024 px), i el nom del pla queda a la mateixa altura a totes (abans el del recomanat baixava de 25 a 42 px). La
   insignia de l'ajudant, quan surt, va a la mateixa cel.la, al damunt. */
body.bdrw .bdrx-insignies-lloc { display: grid; justify-items: start; align-items: start; }
body.bdrw .bdrx-insignies-lloc > * { grid-area: 1 / 1; }
body.bdrw .bdrx-insignia-buida { visibility: hidden; }
/* Insignia: l'accent groc puntual del brandbook amb text #3D3D3D (6,97:1; abans taronja). La de l'ajudant comparteix
   cel.la amb la del recomanat i es queda fosca, perque no en surtin dues de grogues. */
body.bdrw .bdrx-insignia { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; background: var(--bdrx-groc); color: var(--bdrx-navy); font-size: 13px; line-height: 1.3; font-weight: 700; }
body.bdrw .bdrx-insignia-guia { background: var(--bdrx-navy); color: var(--bdrx-blanc); }
body.bdrw .bdrx-pla-nom { font-size: 24px; line-height: 1.2; font-weight: 600; letter-spacing: -0.015em; }
body.bdrw .bdrx-pla-qui { font-size: 15px; line-height: 1.5; color: var(--bdrx-secundari); }
body.bdrw .bdrx-pla-accio { display: flex; flex-direction: column; gap: 10px; }
body.bdrw .bdrx-pla-form { margin: 0; }
body.bdrw .bdrx-pla-form .bdrx-btn { width: 100%; }
body.bdrw .bdrx-triat { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; padding: 4px 12px 4px 8px; border-radius: 999px; background: var(--bdrx-exit-fons); color: var(--bdrx-exit); font-size: 15px; font-weight: 700; }
body.bdrw .bdrx-triat svg { width: 18px; height: 18px; }
body.bdrw .bdrx-pla-difs { display: flex; flex-direction: column; gap: 10px; padding-top: 18px; border-top: 1px solid var(--bdrx-vora-suau); font-size: 15px; line-height: 1.45; }
body.bdrw .bdrx-pla-difs li { display: flex; gap: 10px; }
body.bdrw .bdrx-pla-difs li::before { margin-top: 0; }
body.bdrw .bdrx-pla-difs strong { font-weight: 600; }
body.bdrw .bdrx-nota-igi { font-size: 14px; line-height: 1.5; color: var(--bdrx-secundari); }
body.bdrw .bdrx-escenaris { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; border-radius: var(--bdrx-r-m); background: var(--bdrx-alterna); }
body.bdrw .bdrx-escenaris h3 { font-size: 15px; font-weight: 600; }
body.bdrw .bdrx-escenaris ul { display: flex; flex-direction: column; gap: 6px; font-size: 15px; line-height: 1.5; }
body.bdrw .bdrx-escenaris li { display: flex; gap: 10px; }

/* =========================================================================================================
   3.7 Ajudant d'eleccio
   ========================================================================================================= */
body.bdrw .bdrx-guia { padding: 0 0 clamp(20px, 2.5vw, 28px); }
body.bdrw .bdrx-guia-panell { display: flex; flex-direction: column; gap: 20px; padding: clamp(18px, 3vw, 28px); background: var(--bdrx-blanc); border: 1px solid var(--bdrx-vora); border-radius: var(--bdrx-r-l); box-shadow: var(--bdrx-ombra); }
body.bdrw .bdrx-guia-preguntes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 20px 28px; }
body.bdrw .bdrx-guia-q { display: flex; flex-direction: column; gap: 10px; }
body.bdrw .bdrx-guia-q legend { margin-bottom: 10px; font-size: 16px; font-weight: 600; line-height: 1.4; }
body.bdrw .bdrx-guia-respostes { display: flex; flex-wrap: wrap; gap: 8px; }
body.bdrw .bdrx-xip-radio { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; background: var(--bdrx-blanc); box-shadow: inset 0 0 0 1.5px var(--bdrx-vora-camp); font-size: 15px; font-weight: 500; cursor: pointer; }
body.bdrw .bdrx-xip-radio:hover { background: var(--bdrx-alterna); color: var(--bdrx-navy); }
body.bdrw .bdrx-xip-radio:has(input:checked) { background: var(--bdrx-navy); color: var(--bdrx-blanc); box-shadow: none; font-weight: 700; }
body.bdrw .bdrx-xip-radio:has(input:focus-visible) { outline: 3px solid var(--bdrx-navy); outline-offset: 2px; }
body.bdrw .bdrx-guia-sortida { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; min-height: 48px; }
/* El resultat es una regio viva (role=status): buida no ocupa lloc (un p buit fa 0 px d'alt), pero no es pot amagar
   amb display: none ni visibility: hidden, perque naixeria fora de l'arbre d'accessibilitat i el primer resultat
   no s'anunciaria (WCAG 4.1.3). */
body.bdrw .bdrx-guia-res { font-size: 17px; font-weight: 700; }

/* =========================================================================================================
   3.8 Configurador i passos
   ========================================================================================================= */
body.bdrw .bdrx-config { padding: 0 0 clamp(40px, 5vw, 72px); scroll-margin-top: 16px; }
body.bdrw .bdrx-config-cap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
body.bdrw .bdrx-config-cos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px 32px; align-items: start; }
body.bdrw .bdrx-passos-config { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
body.bdrw .bdrx-pas { display: flex; flex-direction: column; gap: 16px; padding: clamp(16px, 2.5vw, 24px); border: 1px solid var(--bdrx-vora); border-radius: var(--bdrx-r-l); background: var(--bdrx-blanc); }
body.bdrw .bdrx-pas > legend { float: left; width: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 0; font-size: 19px; font-weight: 600; line-height: 1.3; }
body.bdrw .bdrx-pas > legend + * { clear: both; }
body.bdrw .bdrx-pas-num { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--bdrx-navy); color: var(--bdrx-blanc); font-size: 15px; font-variant-numeric: lining-nums tabular-nums; }
body.bdrw .bdrx-pas.is-complet .bdrx-pas-num { background: var(--bdrx-exit); }
body.bdrw .bdrx-pas-resum { font-size: 15px; font-weight: 700; color: var(--bdrx-exit); }
body.bdrw .bdrx-pas-resum:empty { display: none; }
body.bdrw .bdrx-pas-resum::before { content: ''; display: inline-block; width: 16px; height: 16px; margin-right: 6px; vertical-align: -2px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E") center / contain no-repeat; }
body.bdrw .bdrx-pas-grup { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
body.bdrw .bdrx-pas-grup > legend,
body.bdrw .bdrx-etiqueta { margin-bottom: 0; font-size: 15px; font-weight: 600; line-height: 1.4; }
body.bdrw .bdrx-pas-grup > legend { margin-bottom: 10px; }
body.bdrw .bdrx-ajuda-camp { font-size: 14px; line-height: 1.5; color: var(--bdrx-secundari); }
body.bdrw .bdrx-camp-error { display: flex; gap: 8px; font-size: 15px; font-weight: 700; color: var(--bdrx-perill); }
@media (min-width: 1060px) {
  body.bdrw .bdrx-config-cos { grid-template-columns: minmax(0, 1fr) minmax(320px, 380px); }
}

/* Pla dins del configurador: targetes de radio compactes */
body.bdrw .bdrx-tria-pla { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: 10px; }
body.bdrw .bdrx-tria-pla .bdrx-opcio { flex-wrap: nowrap; }
body.bdrw .bdrx-tria-pla .bdrx-opcio-det { font-weight: 700; color: var(--bdrx-navy); }

/* Opcio amb radio o casella a la vista (llista amb preu, pla, domini, extres) */
body.bdrw .bdrx-opcio {
  position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; min-height: 52px; padding: 12px 16px;
  border-radius: var(--bdrx-r-m); background: var(--bdrx-fons); box-shadow: inset 0 0 0 1.5px var(--bdrx-vora); cursor: pointer;
}
body.bdrw .bdrx-opcio:hover { background: var(--bdrx-blanc); box-shadow: inset 0 0 0 1.5px var(--bdrx-vora-camp); }
body.bdrw .bdrx-opcio:has(input:checked) { background: var(--bdrx-blanc); box-shadow: inset 0 0 0 2px var(--bdrx-navy); }
body.bdrw .bdrx-opcio input[type="radio"],
body.bdrw .bdrx-opcio input[type="checkbox"] { flex: 0 0 auto; width: 20px; height: 20px; margin: 0; accent-color: var(--bdrx-navy); cursor: pointer; }
/* El text de l'opcio no es fa mes estret de 9em (135 px): si amb el preu al costat no hi cap, el preu baixa a la linia de
   sota, a la dreta. Amb 6em, Poppins (mes ampla que Raleway) partia paraules a 320 px: «instantanie|s», «manageme|nt»,
   «sauvegarde|s» (marca 2026, mesurat amb proves/disseny_navegador.js). */
body.bdrw .bdrx-opcio-text { flex: 1 1 9em; min-width: 0; overflow-wrap: anywhere; display: flex; flex-direction: column; gap: 2px; font-size: 15px; line-height: 1.45; font-weight: 500; }
body.bdrw .bdrx-opcio-text b { font-weight: 600; font-size: 16px; }
body.bdrw .bdrx-opcio-det { font-size: 14px; line-height: 1.45; font-weight: 400; color: var(--bdrx-secundari); }
/* Copies obligatories sota cada nivell de gestio de pagament: es un import que se suma, en navy com els preus */
body.bdrw .bdrx-opcio-copies { font-weight: 500; color: var(--bdrx-navy); }
body.bdrw .bdrx-opcio-preu { flex: 0 0 auto; margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: 15px; font-weight: 700; white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; text-align: right; }
body.bdrw .bdrx-opcio-preu small { font-size: 13px; font-weight: 500; color: var(--bdrx-secundari); white-space: normal; }
body.bdrw .bdrx-llista { display: flex; flex-direction: column; gap: 8px; }
body.bdrw .bdrx-opcio-bloc { display: flex; flex-direction: column; gap: 10px; min-width: 0; }

/* 3.11 Segment: opcions gratuites sense consequencies (sistema operatiu) */
body.bdrw .bdrx-segment { display: flex; flex-wrap: wrap; gap: 8px; }
body.bdrw .bdrx-segment label { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 10px; background: var(--bdrx-blanc); box-shadow: inset 0 0 0 1.5px var(--bdrx-vora-camp); font-size: 15px; font-weight: 500; cursor: pointer; }
body.bdrw .bdrx-segment label:hover { background: var(--bdrx-alterna); color: var(--bdrx-navy); }
body.bdrw .bdrx-segment label:has(input:checked) { background: var(--bdrx-navy); color: var(--bdrx-blanc); box-shadow: none; font-weight: 700; }
body.bdrw .bdrx-segment label:has(input:focus-visible) { outline: 3px solid var(--bdrx-navy); outline-offset: 2px; }

/* 3.11 Decisio amb consequencia: dues targetes sense preseleccio */
body.bdrw .bdrx-decisio { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 10px; }
body.bdrw .bdrx-decisio .bdrx-opcio { align-items: flex-start; padding: 16px; }
body.bdrw .bdrx-decisio .bdrx-opcio input { margin-top: 2px; }

/* 3.12 Quantitat: camp numeric i botons de 44 px (via principal), lliscador de complement */
body.bdrw .bdrx-quantitat { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
body.bdrw .bdrx-quantitat-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
body.bdrw .bdrx-quantitat-control { display: inline-flex; align-items: stretch; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--bdrx-vora-camp); background: var(--bdrx-blanc); }
body.bdrw .bdrx-quantitat-control button { display: grid; place-items: center; width: 44px; min-height: 44px; padding: 0; border: 0; background: transparent; color: var(--bdrx-navy); font-size: 22px; font-weight: 700; line-height: 1; }
body.bdrw .bdrx-quantitat-control button:hover { background: var(--bdrx-alterna); color: var(--bdrx-navy); }
/* Al limit (aria-disabled="true", el posa el JS i el boto queda descrit pel text dels limits): es veu inactiu, amb el
   gris de les vores dels camps (#8A8580 amb la marca 2026: 3,65:1 sobre blanc i 2,97:1 de diferencia amb el #3D3D3D
   dels actius; un control inactiu no te minim de contrast, WCAG 1.4.3), sense el fons del hover i amb cursor not-allowed. Abans el «-» de la memoria a
   2 GB amb Windows semblava actiu i no feia res (QA del 07/10, segona passada). */
body.bdrw .bdrx-quantitat-control button[aria-disabled="true"], body.bdrw .bdrx-quantitat-control button[aria-disabled="true"]:hover { background: transparent; color: var(--bdrx-vora-camp); cursor: not-allowed; }
body.bdrw .bdrx-quantitat-control button:first-child { border-radius: 12px 0 0 12px; }
body.bdrw .bdrx-quantitat-control button:last-child { border-radius: 0 12px 12px 0; }
body.bdrw .bdrx-quantitat-control input { width: 84px; min-height: 44px; padding: 0 6px; border: 0; border-left: 1px solid var(--bdrx-vora); border-right: 1px solid var(--bdrx-vora); background: transparent; font-size: 17px; font-weight: 700; text-align: center; font-variant-numeric: lining-nums tabular-nums; -moz-appearance: textfield; appearance: textfield; }
body.bdrw .bdrx-quantitat-control input::-webkit-outer-spin-button,
body.bdrw .bdrx-quantitat-control input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
body.bdrw .bdrx-quantitat-unitat { font-size: 15px; font-weight: 700; }
body.bdrw .bdrx-quantitat-preu { display: flex; flex-direction: column; gap: 2px; font-size: 14px; line-height: 1.4; color: var(--bdrx-secundari); font-variant-numeric: lining-nums tabular-nums; }
body.bdrw .bdrx-quantitat input[type="range"] { width: 100%; max-width: 520px; height: 32px; margin: 0; accent-color: var(--bdrx-navy); cursor: pointer; }

/* 3.13 Extra (casella sense marcar) i consell */
body.bdrw .bdrx-afegits { display: flex; flex-direction: column; gap: 8px; }
body.bdrw .bdrx-consell { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 14px 16px; border-radius: var(--bdrx-r-m); background: var(--bdrx-info-fons); font-size: 15px; }

/* 3.9 Pas de domini */
body.bdrw .bdrx-domini-ops { display: flex; flex-wrap: wrap; gap: 8px; }
body.bdrw .bdrx-domini-ops .bdrx-opcio { flex: 1 1 220px; min-height: 52px; }
body.bdrw .bdrx-domini-cerca { display: flex; flex-direction: column; gap: 10px; }
body.bdrw .bdrx-domini-fila { display: flex; flex-wrap: wrap; gap: 8px; }
body.bdrw .bdrx-camp,
body.bdrw .bdrx-domini-fila input,
body.bdrw .bdrx-domini-fila select,
body.bdrw .bdrx-select {
  min-height: 48px; padding: 0 14px; border: 1px solid var(--bdrx-vora-camp); border-radius: var(--bdrx-r-s);
  background-color: var(--bdrx-blanc); color: var(--bdrx-navy); font-size: 17px; font-weight: 500;
}
body.bdrw .bdrx-domini-fila input { flex: 1 1 220px; min-width: 0; }
body.bdrw .bdrx-domini-fila select,
body.bdrw .bdrx-select { flex: 0 0 auto; padding-right: 32px; cursor: pointer; }
body.bdrw .bdrx-camp:focus,
body.bdrw .bdrx-domini-fila input:focus,
body.bdrw .bdrx-domini-fila select:focus,
body.bdrw .bdrx-select:focus { border-color: var(--bdrx-navy); outline: 3px solid var(--bdrx-navy); outline-offset: 1px; }
body.bdrw .bdrx-domini-fila input[aria-invalid="true"] { border-color: var(--bdrx-perill); box-shadow: inset 0 0 0 1px var(--bdrx-perill); }
body.bdrw .bdrx-domini-estat { min-height: 24px; font-size: 15px; line-height: 1.5; font-weight: 500; overflow-wrap: anywhere; }
body.bdrw .bdrx-domini-estat:empty { min-height: 0; }
body.bdrw .bdrx-domini-requisit:empty { display: none; }
body.bdrw .bdrx-resultats { display: flex; flex-direction: column; gap: 8px; }
body.bdrw .bdrx-resultat { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; padding: 12px 14px; border-radius: var(--bdrx-r-m); background: var(--bdrx-fons); box-shadow: inset 0 0 0 1px var(--bdrx-vora); }
body.bdrw .bdrx-resultat-nom { font-weight: 700; overflow-wrap: anywhere; }
body.bdrw .bdrx-resultat-preu { flex: 1 1 160px; font-size: 14px; color: var(--bdrx-secundari); font-variant-numeric: lining-nums tabular-nums; }
body.bdrw .bdrx-resultat .bdrx-btn { min-height: 44px; padding: 0 16px; font-size: 15px; }
/* El boto de cada resultat (el pinta el JS, bdrx-btn-pri) fa 15 px: opcio B, com a la barra */
body.bdrw .bdrx-resultat .bdrx-btn-pri { background: var(--bdrx-ambre); color: var(--bdrx-navy); }
body.bdrw .bdrx-resultat .bdrx-btn-pri:hover { background: var(--bdrx-ambre-hover); color: var(--bdrx-navy); }
body.bdrw .bdrx-anys { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }

/* =========================================================================================================
   3.14 Resum (modul gris calid) i barra fixa del mobil
   ========================================================================================================= */
/* Marca 2026: de bloc navy a modul #F8F7F5 amb vora #E1DEDA i la barra de degradat de 6 px a la vora de dalt, un fons
   que queda dins del farciment (20 a 28 px) i mai darrere del text. Amb local, quan el resum es desplaca per dins
   (des de 1060 px, si no hi cap), la barra se'n va amb el contingut i el text no hi passa mai per sota. */
body.bdrw .bdrx-resum {
  display: flex; flex-direction: column; gap: 16px; min-width: 0; padding: clamp(20px, 3vw, 28px);
  border-radius: 22px; background: var(--bdrx-degradat) top / 100% 6px no-repeat local, var(--bdrx-alterna); color: var(--bdrx-navy);
  box-shadow: inset 0 0 0 1px var(--bdrx-vora), 0 18px 40px rgba(61, 61, 61, 0.08);
}
body.bdrw .bdrx-resum:focus { outline: none; }
/* L'anell del resum mateix cau fora de la caixa, sobre el fons de la pagina: #3D3D3D (10,86:1 sobre blanc) */
body.bdrw .bdrx-resum:focus-visible { outline: 3px solid var(--bdrx-navy); outline-offset: 3px; }
@media (min-width: 1060px) {
  /* Fix, pero mai mes alt que la finestra: amb una linia i l'estalvi fa 541 px, i amb l'error del carret 684
     (mesurat a 1366x650, la part util d'un portatil de 768 px); cada linia o el motiu hi sumen. El que no hi cap
     es desplaca dins del resum (la roda i, amb el focus a dins, les fletxes) en lloc de quedar sota el plec. */
  body.bdrw .bdrx-resum { position: sticky; top: 20px; max-height: calc(100vh - 40px); overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--bdrx-vora-camp) transparent; }
}
body.bdrw .bdrx-resum-t { font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bdrx-navy); }
body.bdrw .bdrx-resum-buit { font-size: 16px; line-height: 1.5; color: var(--bdrx-secundari); }
body.bdrw .bdrx-linies { display: flex; flex-direction: column; gap: 14px; }
body.bdrw .bdrx-linies:empty { display: none; }
body.bdrw .bdrx-linia { display: flex; justify-content: space-between; gap: 16px; font-size: 15px; line-height: 1.45; }
body.bdrw .bdrx-linia-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
body.bdrw .bdrx-linia-nom { font-weight: 600; overflow-wrap: anywhere; }
body.bdrw .bdrx-linia-det { font-size: 14px; color: var(--bdrx-secundari); overflow-wrap: anywhere; }
body.bdrw .bdrx-linia-preu { flex: 0 0 auto; font-weight: 700; white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; }
body.bdrw .bdrx-totals { display: flex; flex-direction: column; gap: 10px; padding-top: 16px; border-top: 1px solid var(--bdrx-vora); }
body.bdrw .bdrx-totals > div { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 12px; }
body.bdrw .bdrx-totals dt { font-weight: 600; }
body.bdrw .bdrx-total-avui dt { font-size: 16px; }
body.bdrw .bdrx-total-avui dd { font-size: clamp(32px, 28px + 0.6vw, 40px); line-height: 1.1; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: lining-nums tabular-nums; }
/* La xifra d'avui porta a sota l'accent de xifra destacada del brandbook: una barra de degradat, decorativa */
body.bdrw .bdrx-total-avui dd::after { content: ''; display: block; width: 64px; height: 4px; margin: 8px 0 0 auto; border-radius: 2px; background: var(--bdrx-degradat); }
body.bdrw .bdrx-totals > .bdrx-total-despres { flex-direction: column; align-items: flex-start; }
body.bdrw .bdrx-total-despres dt { font-size: 14px; color: var(--bdrx-secundari); }
body.bdrw .bdrx-total-despres dd { font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; font-variant-numeric: lining-nums tabular-nums; }
body.bdrw .bdrx-total-despres:has(dd:empty) { display: none; }
body.bdrw .bdrx-resum-igi { font-size: 13px; line-height: 1.5; color: var(--bdrx-secundari); }
body.bdrw .bdrx-resum-igi:empty { display: none; }
body.bdrw .bdrx-estalvi { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--bdrx-exit-fons); color: var(--bdrx-exit); }
body.bdrw .bdrx-estalvi p { display: flex; gap: 8px; font-size: 14px; font-weight: 700; line-height: 1.45; font-variant-numeric: lining-nums tabular-nums; }
/* Motiu, l'error del carret i la llista d'errors: caixes blanques amb vora dins del resum clar; la icona del motiu,
   taronja sobre blanc (3,61:1, no es text: WCAG 1.4.11 en demana 3:1) */
body.bdrw .bdrx-motiu { display: flex; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--bdrx-blanc); color: var(--bdrx-navy); box-shadow: inset 0 0 0 1px var(--bdrx-vora); font-size: 15px; font-weight: 700; line-height: 1.45; }
body.bdrw .bdrx-motiu::before { content: ''; flex: 0 0 auto; width: 20px; height: 20px; margin-top: 1px; background: var(--bdrx-taronja);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5M12 16.5v.01'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5M12 16.5v.01'/%3E%3C/svg%3E") center / contain no-repeat; }
body.bdrw .bdrx-resum .bdrx-btn[aria-disabled="true"] { background: var(--bdrx-blanc); color: var(--bdrx-secundari); box-shadow: inset 0 0 0 1.5px var(--bdrx-vora-camp); }
body.bdrw .bdrx-error-carret { padding: 12px 14px; border-radius: 12px; background: var(--bdrx-blanc); color: var(--bdrx-perill); box-shadow: inset 0 0 0 1px var(--bdrx-vora); font-size: 15px; font-weight: 700; line-height: 1.45; }
body.bdrw .bdrx-error-llista { display: flex; flex-direction: column; gap: 4px; padding: 10px 14px 10px 32px; border-radius: 12px; background: var(--bdrx-blanc); color: var(--bdrx-navy); box-shadow: inset 0 0 0 1px var(--bdrx-vora); font-size: 14px; list-style: disc; }
body.bdrw .bdrx-resum a.bdrx-veure-carret { display: inline-flex; align-items: center; min-height: 44px; color: var(--bdrx-enllac); font-weight: 700; }
body.bdrw .bdrx-resum a.bdrx-veure-carret:hover { color: var(--bdrx-enllac-hover); }
body.bdrw .bdrx-resum-peu { display: flex; flex-direction: column; gap: 6px; font-size: 13px; line-height: 1.5; color: var(--bdrx-secundari); }

/* La barra: nomes per sota de 1060 px, opaca, a 12 px de la vora i de 56 px d'alt com a minim. El text («pla · preu»)
   es parteix en linies i la barra creix: el preu va al final i no es pot tallar (WCAG 1.4.4, 1.4.10 i 1.4.12). Si el
   text i el boto no hi caben al costat (text ampliat), el boto baixa a una linia propia, a la dreta. Marca 2026: blanca
   amb vora (abans navy) i el boto, que aqui fa 15 px, amb l'opcio B. */
body.bdrw .bdrx-barra {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 900;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-height: var(--bdrx-barra-alt); max-width: 720px; margin: 0 auto; padding: 6px 6px 6px 8px;
  border-radius: 16px; background: var(--bdrx-blanc); color: var(--bdrx-navy); box-shadow: inset 0 0 0 1px var(--bdrx-vora), 0 12px 30px rgba(61, 61, 61, 0.20);
}
body.bdrw .bdrx-barra-detall { flex: 1 1 10em; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px; min-height: 44px; padding: 0 8px; border: 0; border-radius: 10px; background: transparent; color: var(--bdrx-navy); text-align: left; }
body.bdrw .bdrx-barra-text { max-width: 100%; overflow-wrap: anywhere; font-size: 15px; font-weight: 700; line-height: 1.3; font-variant-numeric: lining-nums tabular-nums; }
body.bdrw .bdrx-barra-mes { font-size: 13px; color: var(--bdrx-navy); text-decoration: underline; text-decoration-color: var(--bdrx-taronja); text-underline-offset: 2px; }
body.bdrw .bdrx-barra .bdrx-btn { flex: 0 0 auto; min-height: 44px; margin-left: auto; padding: 0 16px; font-size: 15px; border-radius: 10px; }
/* Opcio B (boto de 15 px): #3D3D3D sobre #F4A000, 5,11:1; en passar-hi per sobre, #E89500, 4,52:1. El bloquejat va
   despres, perque mani sobre el hover (mateixa especificitat). */
body.bdrw .bdrx-barra .bdrx-btn-pri { background: var(--bdrx-ambre); color: var(--bdrx-navy); }
body.bdrw .bdrx-barra .bdrx-btn-pri:hover { background: var(--bdrx-ambre-hover); color: var(--bdrx-navy); }
body.bdrw .bdrx-barra .bdrx-btn[aria-disabled="true"] { background: var(--bdrx-alterna); color: var(--bdrx-secundari); box-shadow: inset 0 0 0 1.5px var(--bdrx-vora-camp); }
/* La barra no surt mentre el resum es a la vista, encara que nomes se'n vegi una part: per sota de 1060 px el resum va
   al final del configurador, i la barra (llavors del mateix navy) li tapava «Despres pagaras», la linia del domini i el seu boto
   (vist a 800 px). Qui ho decideix es el JS, que la deixa amb hidden (nucli-js: el resum entra a l'IntersectionObserver
   de la barra). Aqui, la mateixa regla en CSS als navegadors amb animacions lligades al desplacament, perque no depengui
   nomes del JS: el resum dona una linia de temps de vista (--bdrx-resum), l'arrel de la pagina la fa visible a la barra
   (timeline-scope; la barra i el resum hi son tots dos a dins, bdr_producte.tpl) i l'animacio amaga la barra
   (visibility: hidden, que tambe la treu del tabulador) mentre el resum creua la finestra, de «cover 0%» (la vora de dalt
   del resum entra per baix) a «cover 100%» (la de baix surt per dalt), amb la finestra sencera: view-timeline-inset 0,
   perque el valor per defecte (auto) treu de la finestra el scroll-padding-bottom que posem mentre la barra es veu
   (120 px) i el resum ja hauria passat per sota de la barra abans d'amagar-la. Fora d'aquest tram l'animacio no fa res
   (fill-mode none) i, sense resum a la vista (configurador tancat, display: none), la linia de temps es inactiva i
   tampoc. Sense suport, nomes el JS. Les propietats van per separat: la drecera animation posaria animation-timeline a
   auto. Es treu esborrant aquest @supports i el @keyframes del costat. */
@supports (animation-timeline: view()) and (timeline-scope: none) {
  body.bdrw .bdrx-pagina { timeline-scope: --bdrx-resum; }
  body.bdrw .bdrx-resum { view-timeline: --bdrx-resum block; view-timeline-inset: 0px; }
  body.bdrw .bdrx-barra {
    animation-name: bdrx-barra-fora; animation-duration: auto; animation-timing-function: linear; animation-fill-mode: none;
    animation-timeline: --bdrx-resum; animation-range: cover 0% cover 100%;
  }
}
@keyframes bdrx-barra-fora { from { visibility: hidden; } to { visibility: hidden; } }
/* Marge de desplacament mentre la barra es veu (WCAG 2.4.11): cobreix la barra amb tres linies de text i els 12 px de
   la vora (uns 100 px), i creix amb la lletra de l'usuari (em). En px i no amb --bdrx-barra-alt: els tokens viuen a
   body.bdrw i l'html no els veu (amb la variable, la declaracio no valia i el marge quedava a auto). */
@media (max-width: 1059.98px) {
  html:has(body.bdrw .bdrx-barra:not([hidden])) { scroll-padding-bottom: calc(88px + 2em); }
}
@media (min-width: 1060px) {
  body.bdrw .bdrx-barra { display: none !important; }
}

/* =========================================================================================================
   3.15 Comparativa de plans (taula a l'ample, pestanyes al mobil)
   ========================================================================================================= */
body.bdrw .bdrx-h2-plega { margin: 0; }
body.bdrw .bdrx-plega-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; min-height: 56px; padding: 12px 0;
  border: 0; border-bottom: 1px solid var(--bdrx-vora); background: transparent; color: var(--bdrx-navy); text-align: left;
  font-size: inherit; font-weight: 700; line-height: 1.25; letter-spacing: inherit;
}
body.bdrw .bdrx-plega-btn::after {
  content: ''; flex: 0 0 auto; width: 22px; height: 22px; background: currentColor; transition: transform 0.15s ease;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
}
body.bdrw .bdrx-plega-btn[aria-expanded="true"]::after { transform: rotate(180deg); }
body.bdrw .bdrx-h2-plega .bdrx-sense-js { display: block; padding: 12px 0; border-bottom: 1px solid var(--bdrx-vora); }
body.bdrw .bdrx-compara-mobil > .bdrx-sense-js { display: flex; flex-direction: column; gap: 8px; }
body.bdrw .bdrx-compara-cos { padding-top: 24px; }
/* overflow: clip retalla els fons de les cel.les a la vora arrodonida: sense, quan la taula no te titol a la vista (la de
   copies porta el caption per a lector de pantalla), el fons blanc de la capcalera tapava les cantonades de dalt i la
   vora es veia com una linia solta (backup.php a 1024 i 1440 px). Clip i no hidden: hidden faria de la caixa un
   contenidor de desplacament i la capcalera fixa (sticky) deixaria de seguir la finestra. */
body.bdrw .bdrx-taula-caixa { border: 1px solid var(--bdrx-vora); border-radius: var(--bdrx-r-l); background: var(--bdrx-blanc); overflow: clip; }
body.bdrw .bdrx-taula { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 15px; line-height: 1.45; font-variant-numeric: lining-nums tabular-nums; }
body.bdrw .bdrx-taula caption { padding: 16px 20px 0; text-align: left; caption-side: top; font-size: 15px; font-weight: 700; color: var(--bdrx-secundari); }
body.bdrw .bdrx-taula th,
body.bdrw .bdrx-taula td { padding: 12px 16px; border-bottom: 1px solid var(--bdrx-vora-suau); text-align: left; vertical-align: top; }
body.bdrw .bdrx-taula thead th { position: sticky; top: 0; z-index: 1; background: var(--bdrx-blanc); border-bottom: 2px solid var(--bdrx-vora); font-size: 16px; }
/* La capcalera fixa fa uns 48 px: el control enfocat dins del cos de la taula (Contracta, enllacos del preu, webmail)
   queda per sota en lloc de tapat quan el navegador el porta a la vista amb el teclat (WCAG 2.4.11) */
body.bdrw .bdrx-taula tbody :is(a, button, input, select, summary, [tabindex]) { scroll-margin-top: 72px; }
body.bdrw .bdrx-taula tbody th { font-weight: 500; color: var(--bdrx-navy); }
body.bdrw .bdrx-taula td { font-weight: 700; }
body.bdrw .bdrx-taula tr:last-child > * { border-bottom: 0; }
body.bdrw .bdrx-taula .bdrx-taula-grup th { padding-top: 18px; background: var(--bdrx-alterna); font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bdrx-secundari); }
body.bdrw .bdrx-taula .bdrx-ico-si { display: inline-flex; }
body.bdrw .bdrx-taula .es-actual { background: var(--bdrx-info-fons); }
/* 6 px de farciment: l'anell de focus (3 + 2 px) hi cap sencer dins del desplacament propi (WCAG 2.4.7) */
body.bdrw .bdrx-pestanyes { display: flex; gap: 6px; overflow-x: auto; padding: 6px; border-radius: 16px; background: var(--bdrx-alterna); border: 1px solid var(--bdrx-vora); scrollbar-width: thin; }
body.bdrw .bdrx-pestanyes [role="tab"] { flex: 1 0 auto; min-height: 44px; padding: 0 16px; border: 0; border-radius: 10px; background: transparent; color: var(--bdrx-navy); font-size: 15px; font-weight: 700; white-space: nowrap; }
body.bdrw .bdrx-pestanyes [role="tab"][aria-selected="true"] { background: var(--bdrx-navy); color: var(--bdrx-blanc); }
body.bdrw .bdrx-pestanya-panell { display: flex; flex-direction: column; gap: 10px; padding: 18px 4px 0; }
body.bdrw .bdrx-pestanya-panell ul { display: flex; flex-direction: column; gap: 10px; font-size: 15px; line-height: 1.45; }
body.bdrw .bdrx-pestanya-panell li { display: flex; gap: 10px; }
body.bdrw .bdrx-compara-mobil { display: none; }
body.bdrw .bdrx-compara-columnes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 16px; }
body.bdrw .bdrx-compara-columna { display: flex; flex-direction: column; gap: 12px; padding: 20px; border: 1px solid var(--bdrx-vora); border-radius: var(--bdrx-r-l); background: var(--bdrx-blanc); }
body.bdrw .bdrx-compara-columna ul { display: flex; flex-direction: column; gap: 10px; font-size: 15px; line-height: 1.45; }
body.bdrw .bdrx-compara-columna li { display: flex; gap: 10px; }
/* Sense noms de fila: el que diu el mateix a tots els plans va un sol cop, a tot l'ample, sota les columnes */
body.bdrw .bdrx-compara-comuns { grid-column: 1 / -1; background: var(--bdrx-alterna); }
body.bdrw .bdrx-compara-comuns ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 10px 24px; }
@media (max-width: 767.98px) {
  body.bdrw .bdrx-compara-ample { display: none; }
  body.bdrw .bdrx-compara-mobil { display: block; }
}

/* 3.16 Comparativa de serveis: taula a l'ample, una targeta per servei al mobil */
body.bdrw .bdrx-serveis-mobil { display: none; }
body.bdrw .bdrx-serveis-targetes { display: grid; gap: 12px; }
body.bdrw .bdrx-servei { display: flex; flex-direction: column; gap: 10px; padding: 18px; border: 1px solid var(--bdrx-vora); border-radius: var(--bdrx-r-l); background: var(--bdrx-blanc); }
body.bdrw .bdrx-servei.es-actual { box-shadow: inset 0 0 0 2px var(--bdrx-navy); }
body.bdrw .bdrx-servei dl { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; font-size: 15px; }
body.bdrw .bdrx-servei dt { font-size: 13px; font-weight: 700; color: var(--bdrx-secundari); }
body.bdrw .bdrx-servei dd { font-weight: 500; }
body.bdrw .bdrx-actual { display: inline-flex; align-self: flex-start; padding: 2px 10px; border-radius: 999px; background: var(--bdrx-navy); color: var(--bdrx-blanc); font-size: 13px; font-weight: 700; }
@media (max-width: 767.98px) {
  body.bdrw .bdrx-serveis-ample { display: none; }
  body.bdrw .bdrx-serveis-mobil { display: block; }
}

/* =========================================================================================================
   3.17 Inclou / No inclou
   ========================================================================================================= */
body.bdrw .bdrx-inclou { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 24px; }
body.bdrw .bdrx-inclou-col { display: flex; flex-direction: column; gap: 16px; padding: clamp(20px, 2.5vw, 28px); border-radius: var(--bdrx-r-l); background: var(--bdrx-blanc); border: 1px solid var(--bdrx-vora); }
body.bdrw .bdrx-inclou-col ul { display: flex; flex-direction: column; gap: 12px; font-size: 16px; line-height: 1.5; }
body.bdrw .bdrx-inclou-col li { display: flex; gap: 12px; }
body.bdrw .bdrx-inclou-si ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 12px 24px; }
@media (max-width: 859.98px) {
  body.bdrw .bdrx-inclou { grid-template-columns: minmax(0, 1fr); }
}

/* 3.18 Que passa quan pagues */
body.bdrw .bdrx-despres { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 16px; counter-reset: bdrx-pas; }
body.bdrw .bdrx-despres li { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 22px 20px; border-radius: var(--bdrx-r-l); background: var(--bdrx-blanc); border: 1px solid var(--bdrx-vora); font-size: 16px; line-height: 1.55; counter-increment: bdrx-pas; }
/* Numero gris amb contorn taronja, com els passos 01 02 03 del brandbook (abans, cercle navy) */
body.bdrw .bdrx-despres li::before { content: counter(bdrx-pas); display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--bdrx-blanc); color: var(--bdrx-navy); box-shadow: inset 0 0 0 2px var(--bdrx-taronja); font-size: 16px; font-weight: 700; font-variant-numeric: lining-nums tabular-nums; }

/* 3.19 Confianca local */
body.bdrw .bdrx-fets { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: 24px 32px; }
body.bdrw .bdrx-fets li { display: flex; gap: 14px; align-items: flex-start; font-size: 16px; line-height: 1.55; }
body.bdrw .bdrx-fet-icona { flex: 0 0 auto; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: var(--bdrx-blanc); border: 1px solid var(--bdrx-vora); color: var(--bdrx-navy); }
body.bdrw .bdrx-fet-icona svg { width: 22px; height: 22px; }
body.bdrw .bdrx-fets li > span:last-child { padding-top: 9px; }

/* 3.20 Preguntes frequents */
body.bdrw .bdrx-faq { display: flex; flex-direction: column; max-width: 880px; }
body.bdrw .bdrx-faq-item { border-bottom: 1px solid var(--bdrx-vora); }
body.bdrw .bdrx-faq-item h3 { font-size: 18px; }
body.bdrw .bdrx-faq-item .bdrx-plega-btn { min-height: 60px; padding: 16px 0; border-bottom: 0; font-size: 18px; }
body.bdrw .bdrx-faq-item h3 .bdrx-sense-js { display: block; padding: 18px 0 10px; line-height: 1.25; }
body.bdrw .bdrx-faq-resposta { padding: 0 0 20px; max-width: 72ch; font-size: 16px; line-height: 1.65; color: var(--bdrx-navy); }

/* 3.21 Alternatives */
body.bdrw .bdrx-alternatives { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 16px; }
body.bdrw .bdrx-alt { display: flex; flex-direction: column; gap: 10px; padding: 24px; border-radius: var(--bdrx-r-l); background: var(--bdrx-blanc); border: 1px solid var(--bdrx-vora); transition: box-shadow 0.15s ease; }
body.bdrw .bdrx-alt:hover { box-shadow: var(--bdrx-ombra); }
body.bdrw .bdrx-alt p { font-size: 15px; line-height: 1.55; color: var(--bdrx-secundari); }
body.bdrw .bdrx-alt-preu { font-size: 17px; font-weight: 700; color: var(--bdrx-navy) !important; font-variant-numeric: lining-nums tabular-nums; }
body.bdrw .bdrx-alt .bdrx-enllac-fort { margin-top: auto; }

/* 3.22 Ajuda humana */
body.bdrw .bdrx-ajuda { padding: clamp(24px, 3vw, 40px) 0 clamp(48px, 6vw, 88px); }
body.bdrw .bdrx-ajuda-caixa { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 40px; padding: clamp(28px, 5vw, 56px); border-radius: var(--bdrx-r-xl); background: var(--bdrx-navy); color: var(--bdrx-blanc); }
body.bdrw .bdrx-ajuda-text { flex: 1 1 420px; min-width: 0; max-width: 640px; display: flex; flex-direction: column; gap: 8px; }
body.bdrw .bdrx-ajuda-text p { font-size: 18px; line-height: 1.55; color: var(--bdrx-clar-navy); }
body.bdrw .bdrx-ajuda-caixa .bdrx-btn { min-height: 52px; padding: 0 26px; border-radius: 999px; }
body.bdrw .bdrx-ajuda-mini { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 14px 16px; border-radius: var(--bdrx-r-m); background: var(--bdrx-alterna); font-size: 15px; }

/* =========================================================================================================
   3.23 Passos de la compra
   ========================================================================================================= */
body.bdrw .bdrx-progres ol { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; counter-reset: bdrx-progres; }
body.bdrw .bdrx-progres li { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px 0 6px; border-radius: 999px; background: var(--bdrx-alterna); color: var(--bdrx-secundari); font-size: 14px; font-weight: 700; }
body.bdrw .bdrx-progres li { counter-increment: bdrx-progres; }
body.bdrw .bdrx-progres li::before { content: counter(bdrx-progres); display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--bdrx-blanc); color: var(--bdrx-secundari); font-size: 13px; font-variant-numeric: lining-nums tabular-nums; }
body.bdrw .bdrx-progres li.is-fet { background: var(--bdrx-exit-fons); color: var(--bdrx-exit); }
body.bdrw .bdrx-progres li.is-fet a { color: inherit; }
body.bdrw .bdrx-progres li[aria-current="step"] { background: var(--bdrx-navy); color: var(--bdrx-blanc); }
/* El numero del pas actual, en groc amb text #3D3D3D (6,97:1; abans taronja amb navy) */
body.bdrw .bdrx-progres li[aria-current="step"]::before { background: var(--bdrx-groc); color: var(--bdrx-navy); }
body.bdrw .bdrx-progres a { display: inline-flex; align-items: center; min-height: 36px; text-decoration: underline; text-decoration-color: var(--bdrx-taronja); text-decoration-thickness: 2px; text-underline-offset: 4px; }
body.bdrw .bdrx-progres-mobil { display: none; font-size: 15px; font-weight: 700; color: var(--bdrx-secundari); }
@media (max-width: 599.98px) {
  body.bdrw .bdrx-progres ol { position: absolute !important; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  body.bdrw .bdrx-progres-mobil { display: block; }
  /* Els passos fets poden portar enllac: quan el focus hi entra, la llista es veu sencera amb l'anell (WCAG 2.4.7)
     i la frase curta s'amaga mentrestant. El position va amb !important perque el de la regla d'amagar el porta. */
  body.bdrw .bdrx-progres ol:focus-within { position: static !important; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; clip-path: none; white-space: normal; }
  body.bdrw .bdrx-progres:focus-within .bdrx-progres-mobil { display: none; }
}

/* =========================================================================================================
   3.24 Avisos i dialeg de la cistella
   ========================================================================================================= */
body.bdrw .bdrx-avis { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; border: 1px solid; font-size: 15px; line-height: 1.5; }
body.bdrw .bdrx-avis > svg { width: 20px; height: 20px; margin-top: 2px; }
body.bdrw .bdrx-avis-text { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
body.bdrw .bdrx-avis-text a { font-weight: 700; }
body.bdrw .bdrx-avis-exit { background: var(--bdrx-exit-fons); border-color: #B7DEC6; color: var(--bdrx-exit); }
body.bdrw .bdrx-avis-avis { background: var(--bdrx-avis-fons); border-color: #F2D894; color: var(--bdrx-avis); }
body.bdrw .bdrx-avis-perill { background: var(--bdrx-perill-fons); border-color: #F4B7B2; color: var(--bdrx-perill); }
body.bdrw .bdrx-avis-info { background: var(--bdrx-info-fons); border-color: var(--bdrx-clar-navy); color: var(--bdrx-navy); }
/* Els avisos son colors d'estat (no canvien amb la marca): l'enllac fa el color i el subratllat del text de l'avis */
body.bdrw .bdrx-avis a { color: inherit; text-decoration-color: currentColor; }
/* Regio viva dels avisos que apareixen per una accio (Windows, copies, dades del titular, requisit): sempre a la
   pagina perque el lector de pantalla llegeixi l'avis quan apareix (WCAG 4.1.3). Buida no ocupa lloc ni afegeix
   separacio al pas, pero no es display: none, que la trauria de l'arbre d'accessibilitat. */
body.bdrw .bdrx-avisos { display: flex; flex-direction: column; gap: 16px; }
body.bdrw .bdrx-avisos:not(:has(> :not([hidden]):not(:empty))) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

body.bdrw .bdrx-dialeg {
  width: min(540px, calc(100vw - 32px)); max-height: calc(100vh - 32px); margin: auto; padding: clamp(22px, 4vw, 32px);
  border: 0; border-radius: var(--bdrx-r-l); background: var(--bdrx-blanc); color: var(--bdrx-navy);
  box-shadow: 0 30px 80px rgba(61, 61, 61, 0.30); font-size: 16px; line-height: 1.55;
}
body.bdrw .bdrx-dialeg::backdrop { background: rgba(61, 61, 61, 0.55); }
body.bdrw .bdrx-dialeg-cos { display: flex; flex-direction: column; gap: 14px; }
body.bdrw .bdrx-dialeg h2 { margin: 0; font-size: 22px; line-height: 1.3; font-weight: 700; font-variant-numeric: lining-nums tabular-nums; }
body.bdrw .bdrx-dialeg p { margin: 0; color: var(--bdrx-secundari); }
body.bdrw .bdrx-dialeg-text { display: flex; flex-direction: column; gap: 8px; }
body.bdrw .bdrx-dialeg-botons { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
body.bdrw .bdrx-dialeg-botons .bdrx-btn { width: 100%; padding-block: 10px; }
body.bdrw .bdrx-dialeg-botons .bdrx-btn-text { align-self: center; }

/* =========================================================================================================
   3.10 Cercador de dominis (el marcat es de la familia, includes/bdrx/cerca.tpl; l'estil, d'aqui)
   form.bdrx-cerca > label, .bdrx-cerca-fila (input + boto), .bdrx-tlds[role=group] > button.bdrx-tld[aria-pressed],
   p.bdrx-estat i ul.bdrx-resultats (el pinta el JS)
   ========================================================================================================= */
body.bdrw .bdrx-cerca { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: clamp(14px, 2vw, 18px); background: var(--bdrx-blanc); border: 1px solid var(--bdrx-vora); border-radius: 18px; box-shadow: var(--bdrx-ombra-forta); scroll-margin-top: 16px; }
body.bdrw .bdrx-cerca:focus { outline: none; }
body.bdrw .bdrx-cerca > label { font-size: 15px; font-weight: 700; }
body.bdrw .bdrx-cerca-fila { display: flex; flex-wrap: wrap; gap: 8px; }
body.bdrw .bdrx-cerca-fila input { flex: 1 1 220px; min-width: 0; min-height: 52px; padding: 0 16px; border: 1px solid var(--bdrx-vora-camp); border-radius: 12px; background: var(--bdrx-blanc); color: var(--bdrx-navy); font-size: 18px; font-weight: 500; }
body.bdrw .bdrx-cerca-fila input:focus { border-color: var(--bdrx-navy); outline: 3px solid var(--bdrx-navy); outline-offset: 1px; }
body.bdrw .bdrx-cerca-fila .bdrx-btn { min-height: 52px; }
body.bdrw .bdrx-tlds { display: flex; flex-wrap: wrap; gap: 6px; }
body.bdrw .bdrx-tld { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--bdrx-blanc); box-shadow: inset 0 0 0 1px var(--bdrx-vora-camp); color: var(--bdrx-navy); font-size: 14px; font-weight: 500; white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; }
body.bdrw .bdrx-tld b { font-weight: 700; }
body.bdrw .bdrx-tld:hover { background: var(--bdrx-alterna); color: var(--bdrx-navy); }
body.bdrw .bdrx-tld[aria-pressed="true"] { background: var(--bdrx-navy); color: var(--bdrx-blanc); box-shadow: none; }
body.bdrw .bdrx-estat { min-height: 24px; font-size: 15px; line-height: 1.5; font-weight: 500; overflow-wrap: anywhere; }
body.bdrw .bdrx-estat:empty { min-height: 0; }
/* Les fitxes es parteixen en files tambe al mobil (flex-wrap de dalt), sense desplacament propi: amb desplacament,
   l'anell de focus (3 + 2 px) quedava retallat a la primera fila i l'ordre visual anava per columnes (WCAG 1.4.10,
   2.4.7 i 2.4.3). A 320 px les set extensions de dominis fan dues files. */
@media (max-width: 599.98px) {
  body.bdrw .bdrx-cerca-fila .bdrx-btn { flex: 1 1 100%; }
}
/* En colors forcats, la fitxa premuda es marca amb fons Highlight (bloc de colors forcats del final), no amb outline */

/* =========================================================================================================
   3.2 Peces per a les il·lustracions «Que tindras» (les fa cada familia a illustra-<familia>.tpl)
   .bdrx-il (targeta), .bdrx-il-barra amb .bdrx-il-punt i .bdrx-il-adreca (finestra de navegador amb cadenat),
   .bdrx-il-cos, .bdrx-il-llista > .bdrx-il-fila (amb .bdrx-il-ico i .bdrx-il-xip), .bdrx-il-terminal
   (amb .bdrx-il-ordre) i .bdrx-il-calendari > .bdrx-il-dia (.is-on). Decoratives: van dins d'aria-hidden.
   ========================================================================================================= */
body.bdrw .bdrx-il { width: min(100%, 440px); display: flex; flex-direction: column; overflow: hidden; background: var(--bdrx-blanc); border: 1px solid var(--bdrx-vora); border-radius: var(--bdrx-r-l); box-shadow: var(--bdrx-ombra-forta); font-size: 14px; line-height: 1.4; color: var(--bdrx-navy); font-variant-numeric: lining-nums tabular-nums; }
body.bdrw .bdrx-il-barra { display: flex; align-items: center; gap: 6px; padding: 10px 12px; background: var(--bdrx-alterna); border-bottom: 1px solid var(--bdrx-vora); }
body.bdrw .bdrx-il-punt { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; background: var(--bdrx-vora); }
/* L'adreca i el text de cada fila es tallen amb punts suspensius quan no hi caben: abans eren flex i el text (un node
   solt o un span que no es podia encongir) es tallava a mitja lletra, sense punts (es veia «Le cloud de votre entrepri»).
   L'adreca es un bloc amb el cadenat en linia; a la fila, el text es l'unic fill que s'encongeix (la icona i la xapa no). */
body.bdrw .bdrx-il-adreca { flex: 1 1 auto; min-width: 0; display: block; margin-left: 6px; padding: 5px 10px; border-radius: 999px; background: var(--bdrx-blanc); border: 1px solid var(--bdrx-vora); font-weight: 700; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
body.bdrw .bdrx-il-adreca::before { content: ''; display: inline-block; width: 14px; height: 14px; margin-right: 6px; vertical-align: -2px; background: var(--bdrx-exit);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center / contain no-repeat; }
body.bdrw .bdrx-il-cos { display: flex; flex-direction: column; gap: 10px; padding: 14px; }
body.bdrw .bdrx-il-llista { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
body.bdrw .bdrx-il-fila { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px 10px; border-radius: 10px; background: var(--bdrx-fons); border: 1px solid var(--bdrx-vora-suau); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
body.bdrw .bdrx-il-fila > span:not(.bdrx-il-ico):not(.bdrx-il-xip) { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
body.bdrw .bdrx-il-ico { flex: 0 0 auto; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; background: var(--bdrx-info-fons); color: var(--bdrx-navy); }
body.bdrw .bdrx-il-ico svg { width: 16px; height: 16px; }
body.bdrw .bdrx-il-xip { flex: 0 0 auto; margin-left: auto; padding: 2px 8px; border-radius: 999px; background: var(--bdrx-exit-fons); color: var(--bdrx-exit); font-size: 12px; font-weight: 700; }
body.bdrw .bdrx-il-terminal { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; background: var(--bdrx-navy); color: var(--bdrx-clar-navy); font-size: 13px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
body.bdrw .bdrx-il-ordre { color: var(--bdrx-blanc); font-weight: 700; }
body.bdrw .bdrx-il-calendari { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
body.bdrw .bdrx-il-dia { display: grid; place-items: center; aspect-ratio: 1; border-radius: 8px; background: var(--bdrx-fons); border: 1px solid var(--bdrx-vora-suau); font-size: 12px; font-weight: 500; }
body.bdrw .bdrx-il-dia.is-on { background: var(--bdrx-navy); border-color: var(--bdrx-navy); color: var(--bdrx-blanc); font-weight: 700; }

/* =========================================================================================================
   3.25 Formulari de pressupost: includes/bdr-form-lead.tpl dins d'un <div class="bdrx-form">, sense tocar-lo.
   Nomes selectors d'element i d'atribut: les classes de Bootstrap del formulari no es toquen.
   ========================================================================================================= */
body.bdrw .bdrx-form { max-width: 880px; }
body.bdrw .bdrx-form h2 { font-size: clamp(26px, 20px + 1.2vw, 36px); line-height: 1.12; letter-spacing: -0.02em; text-wrap: balance; }
body.bdrw .bdrx-form form { margin-top: 16px; }
body.bdrw .bdrx-form label { display: inline-block; margin-bottom: 6px; font-size: 15px; font-weight: 700; color: var(--bdrx-navy); }
body.bdrw .bdrx-form :is(input[type="text"], input[type="email"], input[type="tel"], select, textarea) { min-height: 48px; padding: 10px 14px; border: 1px solid var(--bdrx-vora-camp); border-radius: var(--bdrx-r-s); background-color: var(--bdrx-blanc); color: var(--bdrx-navy); font-size: 17px; }
body.bdrw .bdrx-form :is(input[type="text"], input[type="email"], input[type="tel"], select, textarea):focus { border-color: var(--bdrx-navy); outline: 3px solid var(--bdrx-navy); outline-offset: 1px; box-shadow: none; }
body.bdrw .bdrx-form :is(input, select, textarea)[aria-invalid="true"] { border-color: var(--bdrx-perill); box-shadow: inset 0 0 0 1px var(--bdrx-perill); }
body.bdrw .bdrx-form button[type="submit"] { min-height: 52px; border-radius: 14px; font-size: 17px; }
body.bdrw .bdrx-form [role="alert"] { border-radius: 12px; font-size: 15px; }

/* =========================================================================================================
   Pantalles petites: 16 px de marge, una columna, res que desbordi
   ========================================================================================================= */
@media (max-width: 599.98px) {
  body.bdrw .bdrx-pagina { font-size: 16px; }
  body.bdrw .bdrx-sub { font-size: 17px; }
  /* Marca 2026: Poppins i el principal a 19 px ocupen mes; amb 16 px de farciment als costats (eren 22) el boto de
     migracio d'hosting torna a dues linies a 320 px i els secundaris dels dialegs, de quatre a tres en frances */
  body.bdrw .bdrx-btn { padding-inline: 16px; }
  /* Taules que es veuen al mobil (la del correu): menys farciment. A 320 px en frances «hostingandorra.» quedava
     retallat per la caixa (overflow: clip). Sense overflow-wrap: anywhere a les cel.les: la taula les feia mes estretes
     i partia «hostingandor|ra.» als quatre idiomes */
  body.bdrw .bdrx-taula th,
  body.bdrw .bdrx-taula td { padding: 10px 12px; }
  body.bdrw .bdrx-cap-botons .bdrx-btn-pri,
  body.bdrw .bdrx-cap .bdrx-cap-botons .bdrx-btn { flex: 1 1 auto; }
  body.bdrw .bdrx-panell { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
  body.bdrw .bdrx-pla { padding: 20px 16px; }
  body.bdrw .bdrx-domini-fila .bdrx-btn { flex: 1 1 100%; }
  body.bdrw .bdrx-domini-fila select { flex: 1 1 auto; }
  body.bdrw .bdrx-ajuda-caixa .bdrx-btn { width: 100%; }
}

/* =========================================================================================================
   Moviment reduit i colors forcats
   ========================================================================================================= */
@media (prefers-reduced-motion: reduce) {
  body.bdrw .bdrx-pagina *,
  body.bdrw .bdrx-pagina *::before,
  body.bdrw .bdrx-pagina *::after { transition: none !important; scroll-behavior: auto !important; }
  body.bdrw .bdrx-btn[aria-busy="true"]::after { animation: none; border-right-color: currentColor; opacity: 0.6; }
}
@media (forced-colors: active) {
  /* El pas actual no rep el focus: la marca pot ser un outline */
  body.bdrw .bdrx-progres li[aria-current="step"] { outline: 3px solid Highlight; outline-offset: -3px; }
  body.bdrw .bdrx-pla.is-triat,
  body.bdrw .bdrx-opcio:has(input:checked) { outline: 3px solid Highlight; }
  /* En colors forcats el box-shadow no es pinta: sense una vora real, botons, pastilles, opcions i resultats
     quedarien com a text sense forma (WCAG 1.4.11) */
  body.bdrw .bdrx-btn,
  body.bdrw .bdrx-cicle-op,
  body.bdrw .bdrx-xip-radio,
  body.bdrw .bdrx-segment label,
  body.bdrw .bdrx-tld,
  body.bdrw .bdrx-pestanyes [role="tab"],
  body.bdrw .bdrx-barra-detall,
  body.bdrw .bdrx-quantitat-control button { border: 1px solid ButtonText; }
  body.bdrw .bdrx-opcio,
  body.bdrw .bdrx-quantitat-control,
  body.bdrw .bdrx-resultat { border: 1px solid CanvasText; }
  /* Botons de quantitat al limit: el color de sistema dels controls inactius */
  body.bdrw .bdrx-quantitat-control button[aria-disabled="true"] { color: GrayText; border-color: GrayText; }
  /* Panells que es distingeixen de la pagina nomes amb el fons i l'ombra: aqui el fons passa a Canvas i l'ombra no es
     pinta, i el dialeg, la barra (que flota damunt del contingut) i el resum quedaven sense limit (WCAG 1.4.11; QA del
     07/10, segona passada) */
  body.bdrw .bdrx-dialeg,
  body.bdrw .bdrx-barra,
  body.bdrw .bdrx-resum { border: 2px solid CanvasText; }
  /* Seleccio de les pastilles amb el radio amagat (cicle, segment, ajudant), de les pestanyes i de les fitxes
     d'extensio: fons Highlight i text HighlightText, com marca el sistema el que esta triat, amb la mateixa vora de
     1 px (res es mou). No es fa amb outline: l'outline es del focus, i una regla de seleccio amb la mateixa
     especificitat o mes, posada despres, el trepitjava sencer i el control marcat es veia igual amb focus que sense
     (el focus cau sempre al radio marcat; WCAG 2.4.7). forced-color-adjust: none perque Chrome i Edge pinten darrere
     del text una placa de color Canvas, i el text HighlightText hi quedava invisible; amb none, tots els colors
     d'aqui dins son de sistema i explicits (l'etiqueta d'estalvi del cicle, Canvas i CanvasText). */
  body.bdrw .bdrx-cicle-op:has(input:checked),
  body.bdrw .bdrx-segment label:has(input:checked),
  body.bdrw .bdrx-xip-radio:has(input:checked),
  body.bdrw .bdrx-pestanyes [role="tab"][aria-selected="true"],
  body.bdrw .bdrx-tld[aria-pressed="true"] { forced-color-adjust: none; background-color: Highlight; color: HighlightText; border-color: Highlight; }
  body.bdrw .bdrx-cicle-op:has(input:checked) .bdrx-cicle-estalvi { background-color: Canvas; color: CanvasText; }
  /* El focus d'aquests controls: anell de 3 px a fora i en CanvasText, un altre color que la seleccio. Cap regla
     de seleccio toca l'outline, i aquesta va despres de les de seleccio i de vora. */
  body.bdrw .bdrx-cicle-op:has(input:focus-visible),
  body.bdrw .bdrx-segment label:has(input:focus-visible),
  body.bdrw .bdrx-xip-radio:has(input:focus-visible),
  body.bdrw .bdrx-pestanyes [role="tab"]:focus-visible,
  body.bdrw .bdrx-tld:focus-visible { outline: 3px solid CanvasText; outline-offset: 2px; }
  /* Icones de mascara i, des de la marca 2026, les barres de degradat dels rotuls i de la xifra d'avui: en colors forcats el
     degradat no es pinta i el rotul quedava amb un buit de 28 px al davant */
  body.bdrw .bdrx-ico-si::before,
  body.bdrw .bdrx-ico-no::before,
  body.bdrw .bdrx-ico-fet::before,
  body.bdrw .bdrx-plega-btn::after,
  body.bdrw .bdrx-motiu::before,
  body.bdrw .bdrx-pas-resum::before,
  body.bdrw .bdrx-rotul::before,
  body.bdrw .bdrx-total-avui dd::after { background: CanvasText; }
}

/* =========================================================================================================
   Impressio: el que es pot llegir, sense controls
   ========================================================================================================= */
@media print {
  body.bdrw .bdrx-pagina { width: auto; margin: 0; }
  body.bdrw .bdrx-barra,
  body.bdrw .bdrx-config,
  body.bdrw .bdrx-guia,
  body.bdrw .bdrx-cicle-lloc,
  body.bdrw .bdrx-pla-form,
  body.bdrw .bdrx-dialeg { display: none !important; }
}

/* =========================================================================================================
   Ronda d'obertura de web4 (12/10/2026). Ajuda humana amb el telefon (decisio H49): la frase «Truca'ns al +376 862 762,
   de dilluns a divendres...» de includes/bdr_tema_atencio.tpl. A la caixa navy, el numero en blanc i negreta, subratllat
   (10,86:1); a la minima, en #3D3D3D sobre #F8F7F5 (10,15:1), a la seva linia dins del text i abans de l'enllac (el mateix ordre
   que la caixa, WCAG 3.2.6). El numero no es parteix
   ========================================================================================================= */
body.bdrw .bdrx-ajuda-tel a { color: var(--bdrx-blanc); font-weight: 700; white-space: nowrap; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
body.bdrw .bdrx-ajuda-tel a:hover { text-decoration-thickness: 2px; }
body.bdrw .bdrx-ajuda-mini .bdrx-ajuda-tel { display: block; margin-top: 2px; color: var(--bdrx-navy); }
body.bdrw .bdrx-ajuda-mini .bdrx-ajuda-tel a { color: var(--bdrx-navy); }

/* Formulari de contacte compartit amb la web nova (bdr_t/includes/bdr-form-lead.tpl, decisio H50), dins de #bdr-lead a les tres
   pagines: la nota dels obligatoris en el gris secundari (6,01:1 sobre blanc, 5,61:1 sobre #F8F7F5), l'asterisc i l'error de cada
   camp en el vermell d'estat (#B42318, 6,57:1 sobre blanc i 6,14:1 sobre #F8F7F5), sota el camp; el camp marcat amb la vora
   vermella (el text de l'error el diu, no nomes el color); el resum es l'avis de perill de la marca, amb un enllac per camp de
   24 px d'alt o mes (WCAG 2.5.8). A les pagines de producte (.bdrx-form), la caixa del formulari amb els colors de la marca en
   lloc del gris de Bootstrap (.bg-light #F8F9FA i .border #DEE2E6, fora de la paleta); a contacte la pinta bdr-tema.css */
body.bdrw .bdrx-form #bdr-lead .bdr-lead-form { padding: clamp(20px, 3vw, 32px) !important; border: 1px solid var(--bdrx-vora) !important; border-radius: var(--bdrx-r-l) !important; background: var(--bdrx-alterna) !important; }
body.bdrw #bdr-lead .bdr-lead-oblig { margin: 0 0 16px; font-size: 15px; line-height: 1.5; color: var(--bdrx-secundari); }
body.bdrw #bdr-lead .bdr-lead-marca { color: var(--bdrx-perill); font-weight: 700; }
body.bdrw #bdr-lead .bdr-lead-err { margin: 6px 0 0; font-size: 15px; line-height: 1.45; font-weight: 600; color: var(--bdrx-perill); }
body.bdrw #bdr-lead :is(input, select, textarea)[aria-invalid="true"] { border-color: var(--bdrx-perill); box-shadow: inset 0 0 0 1px var(--bdrx-perill); }
body.bdrw #bdr-lead .bdr-lead-errors,
body.bdrw #bdr-lead .bdr-lead-fet { margin: 0 0 20px; }
body.bdrw #bdr-lead .bdr-lead-errors ul { margin: 2px 0 0; padding-left: 20px; list-style: disc; }
body.bdrw #bdr-lead .bdr-lead-errors li + li { margin-top: 2px; }
/* L'enllac de cada camp, en bloc (amb inline-block, un text de dues linies baixava la vinyeta a la segona); el del correu, en linia */
body.bdrw #bdr-lead .bdr-lead-errors li > a { display: block; padding: 2px 0; min-height: 24px; color: inherit; text-decoration: underline; overflow-wrap: anywhere; }
body.bdrw #bdr-lead .bdr-lead-errors p > a { color: inherit; text-decoration: underline; overflow-wrap: anywhere; }
body.bdrw #bdr-lead .bdr-lead-errors:focus,
body.bdrw #bdr-lead .bdr-lead-fet:focus { outline: 3px solid var(--bdrx-navy); outline-offset: 2px; }
body.bdrw #bdr-lead .bdr-lead-errors:focus:not(:focus-visible),
body.bdrw #bdr-lead .bdr-lead-fet:focus:not(:focus-visible) { outline: none; }
@media (forced-colors: active) {
  /* La vora vermella del camp marcat es una ombra (no es pinta): una vora real de 2 px */
  body.bdrw #bdr-lead :is(input, select, textarea)[aria-invalid="true"] { border: 2px solid CanvasText; }
}