/*
 * bdr-web.css · La web nova a totes les pagines (pas 1 del pla 07_Web/04_Plan_resta_web.md) · bdr-efg · 2026-10-05
 *
 * Nomes el carrega header.tpl quan bdrWebNova (includes/hooks/bdr_web_nova.php), i tot penja de body.bdrw, que
 * nomes existeix llavors: amb l'interruptor apagat no toca res. Fins al 08/10/2026 el sistema era el de la portada nova
 * (bdr-portada.css, H38): Raleway, navy #091633 i taronja #F08400. Ara es el del brandbook 2026 (H45, mes avall), amb
 * tarjetes blanques amb vora i focus #3D3D3D.
 *
 * Les regles generals porten el prefix dins de :where(), perque pesin com les del tema (i guanyin nomes per ordre)
 * i no passin per sobre de la portada (.bdrp) ni de les classes del tema. Les que substitueixen components del tema (botons, tarjetes...) porten body.bdrw davant, i
 * !important nomes on el tema ja el fa servir.
 *
 * Per desactivar-ho: tblconfiguration.BdrWebNova = off.
 *
 * 08/10/2026 (brandbook 2026 de Hosting Andorra, decisio H45 de DECISIONES.md, propuesta_brandbook.css de 07_Web)
 * Poppins (400, 500, 600 i 700, TTF del kit de marca a fonts/) en lloc de Raleway. Paleta: neutre #3D3D3D, fons blanc
 * i gris calid #F8F7F5, taronja primari #EB5420, segon taronja #F4A000 i groc #FFC738. El navy #091633 desapareix. Les variables
 * es diuen igual i canvien de valor (--navy es ara el neutre #3D3D3D). Regles de contrast (WCAG 2.2 AA, mesurades):
 *  - --taronja es ara #F4A000 i nomes va de fons amb text #3D3D3D (5,11:1; al passar-hi el ratoli, #E89500, 4,52:1).
 *  - --ha-btn-fons #EB5420 amb text blanc nomes en negreta de 19 px o mes (3,61:1, text gran; #D2461A al passar-hi,
 *    4,53:1). Aqui no n'hi ha cap: els botons del tema son de mides variables i van amb el #F4A000.
 *  - Cap text en taronja (#EB5420 sobre blanc 3,61:1, #F4A000 2,13:1). Els enllacos, #3D3D3D subratllats en #EB5420.
 *  - El degradat #EB5420 a #F4A000 nomes en barres d'accent (dalt del peu i sota el claim), mai darrere d'un text.
 *  - El peu passa a clar (#F8F7F5) amb el logotip en positiu (includes/bdr_peu.tpl).
 * Per tornar a la paleta d'abans: la copia previa .abans_marca_20261008 (web3/copies_previes/). bdr-efg
 *
 * 12/10/2026 (ronda d'obertura de web4, decisio H49): al peu, sota els enllacos d'ajuda, el telefon d'atencio amb l'horari
 * (.bdrw-peu-atencio, de includes/bdr_tema_atencio.tpl). Font: codigo/web4/srv (copiar-lo a web3/srv despres de pujar). bdr-efg
 */

@font-face { font-family: 'BdrPoppins'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/Poppins-Regular.ttf') format('truetype'); }
@font-face { font-family: 'BdrPoppins'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/Poppins-Medium.ttf') format('truetype'); }
@font-face { font-family: 'BdrPoppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/Poppins-SemiBold.ttf') format('truetype'); }
@font-face { font-family: 'BdrPoppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/Poppins-Bold.ttf') format('truetype'); }

/* ---------- Base ---------- */
body.bdrw {
  /* Paleta del brandbook 2026 (H45), amb els noms de propuesta_brandbook.css. L'accent groc no es diu --ha-accent:
     el carret de sempre (ha_premium_cart, style.css i custom.css) ja en defineix un (#f28c00) a #order-standard_cart,
     que guanyaria a aquest dins del carret. bdr-efg */
  --ha-primari: #EB5420;
  --ha-primari-2: #F4A000;
  --groc: #FFC738;
  --ha-neutre: #3D3D3D;
  --ha-base: #FFFFFF;
  --ha-calid: #F8F7F5;
  --ha-degradat: linear-gradient(90deg, #EB5420 0%, #F4A000 100%);
  --ha-btn-fons: #EB5420;
  --ha-btn-text: #FFFFFF;
  --ha-btn-hover: #D2461A;
  --ha-btn-mida: 19px;
  --navy: #3D3D3D;
  --taronja: #F4A000;
  --taronja-hover: #E89500;
  --taronja-text: #3D3D3D;
  --taronja-text-hover: #111111;
  --taronja-fons: #FDEEE9;
  --taronja-vora: #F7BBA6;
  --fons: #FFFFFF;
  --alterna: #F8F7F5;
  --vora: #E1DEDA;
  --vora-suau: #EFEEEB;
  --vora-forta: #8A8580;
  --secundari: #636363;
  --clar-navy: #D9D6D1;
  --linia-navy: #575757;
  --exit: #1F6F46;
  --exit-fons: #E7F4EC;
  --perill: #B42318;
  --perill-fons: #FDECEC;
  --avis: #8A5A00;
  --avis-fons: #FFF6E0;
  --ombra: 0 8px 24px rgba(61, 61, 61, 0.08);
  --ombra-forta: 0 18px 50px rgba(61, 61, 61, 0.12);
  font-family: 'BdrPoppins', 'Segoe UI', Helvetica, Arial, sans-serif;
  font-synthesis: none;
  font-variant-numeric: lining-nums;
  color: var(--navy);
  background: var(--fons);
  -webkit-font-smoothing: antialiased;
}
:where(body.bdrw) h1, :where(body.bdrw) h2, :where(body.bdrw) h3, :where(body.bdrw) h4, :where(body.bdrw) h5, :where(body.bdrw) h6,
:where(body.bdrw) .h1, :where(body.bdrw) .h2, :where(body.bdrw) .h3, :where(body.bdrw) .h4, :where(body.bdrw) .h5, :where(body.bdrw) .h6 { font-family: inherit; font-weight: 700; letter-spacing: -0.01em; }
:where(body.bdrw) a { color: var(--taronja-text); }
:where(body.bdrw) a:hover, :where(body.bdrw) a:focus { color: var(--taronja-text-hover); }
/* 08/10/2026 (H45): els enllacos dins del text corregut tenen el color del text (#3D3D3D) i el subratllat taronja es el
   que els distingeix (WCAG 1.4.1). Nomes els que no porten classe, dins d'un p, li, td o dd: els menus, els botons i
   els components (capcalera, peu, portada, botiga i pagament) porten el seu estil. L'avis de cookies (#bdr-ck) va
   sobre fosc i conserva el seu enllac. La regla de la propuesta, igual. bdr-efg */
body.bdrw :where(p, li, td, dd) > a:where(:not([class]):not(:is(.bdrw-cap, .bdrw-peu, nav, .bdrp, .bdrx-pagina, .bdrx-pag, #bdr-ck) *)) { color: var(--taronja-text); text-decoration: underline; text-decoration-color: var(--ha-primari); text-decoration-thickness: 2px; text-underline-offset: 4px; }
body.bdrw :where(p, li, td, dd) > a:where(:not([class]):not(:is(.bdrw-cap, .bdrw-peu, nav, .bdrp, .bdrx-pagina, .bdrx-pag, #bdr-ck) *)):hover { color: var(--taronja-text-hover); text-decoration-thickness: 3px; }
:where(body.bdrw) .text-muted { color: var(--secundari) !important; }
:where(body.bdrw) hr { border-top-color: var(--vora); }
body.bdrw ::selection { background: #FFE7A8; color: var(--navy); }
:where(body.bdrw) :focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }
body.bdrw .btn:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }
/* 07/10/2026 (web3, QA en vista previa): el button:focus del tema (0,1,1) guanyava a la regla general (0,1,0), i el menu,
   l'idioma i la hamburguesa sortien amb l'anell blau del navegador. Ara, el de la casa, i per a tota la capcalera
   (cistelles, logo, area de client, enllacos dels desplegables i idiomes del mobil), no nomes per als tres botons:
   amb 0,3,1 cap regla :focus del tema hi passa per sobre. Per tornar-hi: la copia previa .abans_qa2_20261007. bdr-efg */
body.bdrw .bdrw-cap :focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }
body.bdrw :where(.bdrw-cap, .bdrw-peu) * { box-sizing: border-box; }
:where(body.bdrw) :where(input, select, textarea, button, .btn) { font-family: inherit; }

/* Saltar al contingut: nomes es veu amb el teclat */
body.bdrw .bdrw-salta { position: absolute; left: 12px; top: -80px; z-index: 1100; padding: 10px 16px; border-radius: 10px; background: var(--navy); color: #FFFFFF; font-weight: 700; text-decoration: none; }
/* 07/10/2026 (revisio de la QA, WCAG 1.4.11): l'anell va per fora del boto, sobre el fons clar de la capcalera, i el
   taronja hi feia 2,55:1; el navy hi fa mes de 17:1. Amb l'anell sencer, no nomes el color, perque no depengui de cap
   regla a:focus del tema. bdr-efg */
body.bdrw .bdrw-salta:focus { top: 12px; color: #FFFFFF; outline: 3px solid var(--navy); outline-offset: 2px; }

/* ---------- Capcalera ---------- */
body.bdrw .bdrw-cap { position: relative; z-index: 1000; background: var(--fons); border-bottom: 1px solid var(--vora-suau); }
body.bdrw .bdrw-cap-in { max-width: 1240px; min-height: 68px; margin: 0 auto; padding: 10px clamp(16px, 2.5vw, 24px); display: flex; align-items: center; gap: 8px 20px; }
body.bdrw .bdrw-logo { flex: 0 0 auto; display: flex; align-items: center; min-height: 48px; }
/* logotipo.svg te molt marge buit (el dibuix ocupa la meitat central de l'alcada): es fa gran i el marge negatiu el compensa */
body.bdrw .bdrw-logo img { display: block; height: 76px; width: auto; margin: -14px 0; }
body.bdrw .bdrw-menu { flex: 1 1 auto; display: flex; justify-content: center; }
body.bdrw .bdrw-menu-llista { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; }
body.bdrw .bdrw-grup { position: relative; }
body.bdrw .bdrw-grup-btn,
body.bdrw .bdrw-grup-enllac,
body.bdrw .bdrw-idioma-btn { display: flex; align-items: center; gap: 6px; min-height: 44px; margin: 0; padding: 0 14px; border: 0; border-radius: 10px; background: transparent; color: var(--navy); font-family: inherit; font-size: 15px; font-weight: 700; line-height: 1.2; text-decoration: none; white-space: nowrap; cursor: pointer; }
body.bdrw .bdrw-grup-btn:hover,
body.bdrw .bdrw-grup-enllac:hover,
body.bdrw .bdrw-idioma-btn:hover,
body.bdrw .bdrw-grup-btn[aria-expanded="true"],
body.bdrw .bdrw-idioma-btn[aria-expanded="true"] { background: var(--alterna); color: var(--navy); }
/* 08/10/2026 (H45): el menu en Poppins Medium i l'Area de client en SemiBold, com al brandbook. bdr-efg */
body.bdrw .bdrw-grup-btn,
body.bdrw .bdrw-grup-enllac { font-weight: 500; }
body.bdrw .bdrw-fletxa { flex: 0 0 auto; transition: transform 0.15s ease; }
body.bdrw [aria-expanded="true"] > .bdrw-fletxa { transform: rotate(180deg); }
body.bdrw .bdrw-sub,
body.bdrw .bdrw-idiomes { position: absolute; top: calc(100% + 6px); left: 0; z-index: 1001; min-width: 250px; margin: 0; padding: 8px; list-style: none; background: #FFFFFF; border: 1px solid var(--vora); border-radius: 16px; box-shadow: var(--ombra-forta); }
body.bdrw .bdrw-idiomes { left: auto; right: 0; min-width: 180px; }
body.bdrw .bdrw-sub[hidden],
body.bdrw .bdrw-idiomes[hidden] { display: none; }
body.bdrw .bdrw-sub a,
body.bdrw .bdrw-idiomes a { display: flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 10px; color: var(--navy); font-size: 15px; font-weight: 500; text-decoration: none; }
body.bdrw .bdrw-sub a:hover,
body.bdrw .bdrw-idiomes a:hover { background: var(--alterna); color: var(--navy); }
body.bdrw .bdrw-idiomes a[aria-current="true"] { background: var(--alterna); }
/* L'idioma actual, tambe sense color: subratllat #EB5420 de 2 px (3,61:1 sobre blanc, 3,37:1 sobre #F8F7F5), que
   es veu tambe en colors forcats. Amb H45 l'actual del menu mobil i la resta quedaven a 1,81:1 (#3D3D3D contra
   #636363), nomes per color (WCAG 1.4.1; revisio d'accessibilitat de la quarta pujada). bdr-efg 08/10/2026 */
body.bdrw .bdrw-idiomes a[aria-current="true"],
body.bdrw .bdrw-idiomes-mobil a[aria-current="true"] { text-decoration: underline; text-decoration-color: var(--ha-primari); text-decoration-thickness: 2px; text-underline-offset: 4px; }
body.bdrw .bdrw-idioma { position: relative; }
body.bdrw .bdrw-idioma-btn { padding: 0 10px; color: var(--secundari); font-size: 14px; }
body.bdrw .bdrw-eines { flex: 0 0 auto; display: flex; align-items: center; gap: 4px; margin-left: auto; }
body.bdrw .bdrw-cistella { position: relative; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 10px; color: var(--navy); }
body.bdrw .bdrw-cistella:hover { background: var(--alterna); color: var(--navy); }
body.bdrw .bdrw-comptador { position: absolute; top: 2px; right: 0; min-width: 20px; height: 20px; padding: 0 5px; display: grid; place-items: center; border-radius: 999px; background: var(--taronja); color: var(--navy); font-size: 12px; font-weight: 700; font-variant-numeric: lining-nums tabular-nums; }
body.bdrw .bdrw-btn-client { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; border: 1.5px solid var(--navy); border-radius: 999px; background: transparent; color: var(--navy); font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; }
body.bdrw .bdrw-btn-client:hover { background: var(--navy); color: #FFFFFF; }
body.bdrw .bdrw-hamburguesa { display: none; align-items: center; justify-content: center; width: 48px; height: 48px; margin: 0; padding: 0; border: 0; border-radius: 12px; background: transparent; color: var(--navy); cursor: pointer; }
body.bdrw .bdrw-hamburguesa:hover { background: var(--alterna); }
body.bdrw .bdrw-ico-tanca { display: none; }
body.bdrw .bdrw-menu-obert .bdrw-ico-obre { display: none; }
body.bdrw .bdrw-menu-obert .bdrw-ico-tanca { display: block; }
body.bdrw .bdrw-menu-peu { display: none; }
/* 07/10/2026 (web3, QA en vista previa, WCAG 2.4.3): al mobil la cistella es veu a l'esquerra del boto del menu i el
   tabulador hi ha de passar en el mateix ordre. bdr_capcalera.tpl porta una segona cistella abans del boto
   (.bdrw-cistella-mobil) que nomes es veu per sota de 1080 px, quan s'amaga la de les eines: mai se'n veuen dues ni
   n'hi ha dues a l'arbre d'accessibilitat (display: none). Per tornar-hi: treure aquestes regles i la cistella de mes. bdr-efg */
body.bdrw .bdrw-cistella.bdrw-cistella-mobil { display: none; }

/* 08/10/2026 (H45): Poppins es mes ampla que Raleway i, de 1080 a 1279 px, el menu d'escriptori passava a dues linies
   (en catala a 1080 px i en frances fins a 1200; en frances, a 1080 i 1100, ja passava abans). En aquesta franja, menys
   farciment lateral als botons del menu i menys separacio; i de 1080 a 1159 px, el text del menu a 14 px. Mesurat amb
   integracio/marca_navegador.js als quatre idiomes. bdr-efg */
@media (min-width: 1080px) and (max-width: 1279.98px) {
  body.bdrw .bdrw-cap-in { gap: 8px 12px; }
  body.bdrw .bdrw-grup-btn,
  body.bdrw .bdrw-grup-enllac { padding: 0 9px; }
  body.bdrw .bdrw-btn-client { padding: 0 14px; }
}
@media (min-width: 1080px) and (max-width: 1159.98px) {
  body.bdrw .bdrw-grup-btn,
  body.bdrw .bdrw-grup-enllac { padding: 0 7px; font-size: 14px; }
}

@media (max-width: 1079.98px) {
  body.bdrw .bdrw-cap-in { flex-wrap: wrap; min-height: 60px; padding: 6px 8px 6px 16px; gap: 2px; }
  body.bdrw .bdrw-logo { order: 0; margin-right: auto; }
  body.bdrw .bdrw-logo img { height: 64px; margin: -12px 0; }
  body.bdrw .bdrw-eines { order: 1; margin-left: 0; }
  body.bdrw .bdrw-hamburguesa { order: 2; }
  body.bdrw .bdrw-menu { display: none; order: 3; flex: 1 1 100%; justify-content: stretch; padding: 4px 8px 16px; }
  body.bdrw .bdrw-menu-obert .bdrw-menu { display: block; }
  body.bdrw .bdrw-menu-llista { flex-direction: column; flex-wrap: nowrap; gap: 0; }
  body.bdrw .bdrw-grup-btn,
  body.bdrw .bdrw-grup-enllac { width: 100%; justify-content: space-between; min-height: 52px; padding: 0 4px; border-bottom: 1px solid var(--vora-suau); border-radius: 0; font-size: 17px; }
  body.bdrw .bdrw-grup-btn:hover,
  body.bdrw .bdrw-grup-enllac:hover,
  body.bdrw .bdrw-grup-btn[aria-expanded="true"] { background: transparent; }
  body.bdrw .bdrw-sub { position: static; min-width: 0; padding: 4px 0 8px 12px; border: 0; border-radius: 0; box-shadow: none; background: transparent; }
  body.bdrw .bdrw-sub a { min-height: 48px; font-size: 16px; }
  body.bdrw .bdrw-menu-peu { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 14px; }
  body.bdrw .bdrw-menu-peu .bdrw-btn-client { flex: 1 1 auto; min-height: 48px; font-size: 15px; }
  body.bdrw .bdrw-idiomes-mobil { display: flex; gap: 2px; margin: 0; padding: 0; list-style: none; }
  body.bdrw .bdrw-idiomes-mobil a { display: flex; align-items: center; min-height: 48px; padding: 0 10px; border-radius: 10px; color: var(--secundari); font-weight: 700; text-decoration: none; }
  body.bdrw .bdrw-idiomes-mobil a[aria-current="true"] { color: var(--navy); background: var(--alterna); }
  body.bdrw .bdrw-idioma,
  body.bdrw .bdrw-nomes-ample { display: none; }
  body.bdrw .bdrw-hamburguesa { display: flex; }
  body.bdrw .bdrw-cistella { width: 48px; height: 48px; }
  body.bdrw .bdrw-eines .bdrw-cistella { display: none; }
  body.bdrw .bdrw-cistella.bdrw-cistella-mobil { display: flex; order: 1; }
}

/* ---------- Peu ----------
   08/10/2026 (H45): de bloc navy a gris calid #F8F7F5, amb la barra de degradat de 4 px a la vora de dalt (un fons que
   no arriba al text: el contingut comenca 56 px mes avall), text #3D3D3D (10,15:1), secundari #636363 (5,61:1) i focus
   #3D3D3D. El logotip en positiu el posa bdr_peu.tpl. bdr-efg */
body.bdrw .bdrw-peu { background: var(--ha-degradat) top / 100% 4px no-repeat, var(--alterna); color: var(--navy); border-top: 1px solid var(--vora); }
body.bdrw .bdrw-peu-in { max-width: 1240px; margin: 0 auto; padding: 56px clamp(16px, 2.5vw, 24px) 28px; display: flex; flex-direction: column; gap: 36px; }
body.bdrw .bdrw-peu-cols { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 28px 48px; }
body.bdrw .bdrw-peu-marca { flex: 1 1 260px; display: flex; flex-direction: column; gap: 16px; }
body.bdrw .bdrw-peu-logo { align-self: flex-start; display: flex; }
body.bdrw .bdrw-peu-logo img { display: block; height: 76px; width: auto; margin: -14px 0 -14px -2px; }
body.bdrw .bdrw-peu-marca p { max-width: 34ch; margin: 0; font-size: 15px; line-height: 1.55; color: var(--secundari); }
/* El claim (H45), un sol cop: aqui a totes les pagines menys a la portada nova, que el porta a dalt. Text #3D3D3D a
   20 px SemiBold i, sota, la barra de degradat com a accent (no hi ha text a sobre). bdr-efg 08/10/2026 */
body.bdrw .bdrw-peu-marca p.bdrw-peu-claim { max-width: none; font-size: 20px; line-height: 1.3; font-weight: 600; color: var(--navy); }
body.bdrw .bdrw-peu-marca p.bdrw-peu-claim::after { content: ''; display: block; width: 56px; height: 4px; margin-top: 12px; border-radius: 2px; background: var(--ha-degradat); }
body.bdrw .bdrw-peu-col { flex: 0 1 210px; }
body.bdrw .bdrw-peu-col h2 { margin: 0 0 4px; font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--navy); }
body.bdrw .bdrw-peu-col ul { margin: 0; padding: 0; list-style: none; }
body.bdrw .bdrw-peu-col a { display: flex; align-items: center; min-height: 40px; color: var(--navy); font-size: 15px; text-decoration: none; }
body.bdrw .bdrw-peu-col a:hover { color: var(--taronja-text-hover); text-decoration: underline; text-decoration-color: var(--ha-primari); text-decoration-thickness: 2px; text-underline-offset: 4px; }
body.bdrw .bdrw-peu :focus-visible { outline-color: var(--navy); }
/* El telefon d'atencio (decisio H49): l'etiqueta com els titols de columna, el numero com els enllacos del peu pero en negreta i
   sense partir, i l'horari en el gris secundari (5,61:1 sobre #F8F7F5) */
body.bdrw .bdrw-peu-atencio { display: flex; flex-direction: column; align-items: flex-start; margin: 16px 0 0; font-size: 15px; line-height: 1.5; color: var(--secundari); }
body.bdrw .bdrw-peu-atencio-et { font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--navy); }
body.bdrw .bdrw-peu-col a.bdrw-peu-atencio-tel { font-weight: 700; white-space: nowrap; }
body.bdrw .bdrw-peu-baix { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-top: 24px; border-top: 1px solid var(--vora); font-size: 13px; color: var(--secundari); }

/* Ruta de navegacio (la franja de sobre el peu) */
body.bdrw .master-breadcrumb { background: var(--alterna); border-top: 1px solid var(--vora); }
body.bdrw .master-breadcrumb .ha-breadcrumb-icon,
body.bdrw .master-breadcrumb .ha-breadcrumb-icon i { color: var(--secundari); }
body.bdrw .master-breadcrumb .breadcrumb { background: transparent; }
body.bdrw .master-breadcrumb .breadcrumb-item,
body.bdrw .master-breadcrumb .breadcrumb-item.active { color: var(--secundari); }
body.bdrw .master-breadcrumb a { color: var(--taronja-text); text-decoration: underline; text-decoration-color: var(--ha-primari); text-decoration-thickness: 2px; text-underline-offset: 4px; }
body.bdrw .master-breadcrumb a:hover { color: var(--taronja-text-hover); text-decoration-thickness: 3px; }

/* ---------- Botons ---------- */
body.bdrw .btn { border-radius: 12px; font-weight: 700; letter-spacing: 0; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; }
body.bdrw .btn-sm,
body.bdrw .btn-xs { border-radius: 10px; }
body.bdrw .btn-lg { border-radius: 14px; }
/* El principal del tema: --taronja (#F4A000 des del 08/10/2026, H45) amb text #3D3D3D, 5,11:1 (al passar-hi el ratoli
   #E89500, 4,52:1). Son botons de mida variable (15 a 17 px): el #EB5420 amb text blanc nomes arriba al contrast amb
   negreta de 19 px o mes, i per aixo aqui no es fa servir. bdr-efg */
body.bdrw .btn-primary,
body.bdrw .btn-success,
body.bdrw .ha-btn-primary,
body.bdrw .ha-service-btn,
body.bdrw .ha-client-btn,
body.bdrw .ha-domain-btn-search,
body.bdrw .contact-form .btn.btn-primary,
body.bdrw .home-domain-search #btnDomainSearch,
body.bdrw .home-domain-search #btnDomainSearch2 { background: var(--taronja) !important; background-image: none !important; border-color: var(--taronja) !important; color: var(--navy) !important; box-shadow: none !important; }
body.bdrw .btn-primary:hover,
body.bdrw .btn-success:hover,
body.bdrw .ha-btn-primary:hover,
body.bdrw .ha-service-btn:hover,
body.bdrw .ha-client-btn:hover,
body.bdrw .ha-domain-btn-search:hover,
body.bdrw .contact-form .btn.btn-primary:hover,
body.bdrw .home-domain-search #btnDomainSearch:hover,
body.bdrw .home-domain-search #btnDomainSearch2:hover { background: var(--taronja-hover) !important; border-color: var(--taronja-hover) !important; color: var(--navy) !important; transform: none; }
body.bdrw .btn-primary:disabled,
body.bdrw .btn-primary.disabled,
body.bdrw .btn-success:disabled,
body.bdrw .btn-success.disabled { opacity: 0.55; }
/* El secundari: contorn #3D3D3D */
body.bdrw .btn-default,
body.bdrw .btn-secondary,
body.bdrw .btn-outline-primary,
body.bdrw .btn-outline-secondary,
body.bdrw .ha-btn-outline,
body.bdrw .ha-extra-btn,
body.bdrw .ha-domain-btn-transfer,
body.bdrw .home-domain-search #btnTransfer,
body.bdrw .home-domain-search #btnTransfer2 { background: #FFFFFF !important; background-image: none !important; border: 1.5px solid var(--navy) !important; color: var(--navy) !important; box-shadow: none !important; }
body.bdrw .btn-default:hover,
body.bdrw .btn-secondary:hover,
body.bdrw .btn-outline-primary:hover,
body.bdrw .btn-outline-secondary:hover,
body.bdrw .ha-btn-outline:hover,
body.bdrw .ha-extra-btn:hover,
body.bdrw .ha-domain-btn-transfer:hover,
body.bdrw .home-domain-search #btnTransfer:hover,
body.bdrw .home-domain-search #btnTransfer2:hover { background: var(--alterna) !important; color: var(--navy) !important; }
/* El de serie de color verd blavos (per exemple «Soc registrat?» al pagament): #3D3D3D amb text blanc (10,86:1) */
body.bdrw .btn-info { background: var(--navy) !important; background-image: none !important; border-color: var(--navy) !important; color: #FFFFFF !important; }
body.bdrw .btn-info:hover { background: var(--linia-navy) !important; border-color: var(--linia-navy) !important; color: #FFFFFF !important; }
body.bdrw .btn-link { color: var(--taronja-text); font-weight: 700; text-decoration: underline; text-decoration-color: var(--ha-primari); text-decoration-thickness: 2px; text-underline-offset: 4px; }
body.bdrw .btn-link:hover { color: var(--taronja-text-hover); text-decoration-thickness: 3px; }
body.bdrw .btn-danger { border-radius: 12px; }
body.bdrw .btn:focus,
body.bdrw .btn.focus { box-shadow: 0 0 0 3px rgba(61, 61, 61, 0.25) !important; }

/* ---------- Formularis ---------- */
body.bdrw .form-control,
body.bdrw .custom-select,
body.bdrw .ha-domain-input { border: 1px solid var(--vora-forta); border-radius: 10px; color: var(--navy); background-color: #FFFFFF; }
body.bdrw .form-control:focus,
body.bdrw .custom-select:focus,
body.bdrw .ha-domain-input:focus { border-color: var(--navy) !important; box-shadow: 0 0 0 3px rgba(61, 61, 61, 0.15); outline: 3px solid transparent; outline-offset: 1px; }
/* L'outline transparent no es veu, pero en colors forcats el sistema el pinta: sense, el box-shadow no es pinta i el
   camp enfocat quedava sense anell (WCAG 2.4.7; revisio d'accessibilitat de la quarta pujada). bdr-efg 08/10/2026 */
/* Opacitat 1 i no 0,85: amb 0,85 el text d'exemple quedava a 4,2:1 sobre blanc, per sota de l'AA (WCAG 1.4.3); a 1, 5,9:1.
   Explicita perque Firefox en posa una de mes baixa per defecte. Web3, revisio del 07/10/2026, bdr-efg */
body.bdrw .form-control::placeholder { color: var(--secundari); opacity: 1; }
body.bdrw .input-group-text { border-color: var(--vora-forta); background: var(--alterna); color: var(--secundari); }
:where(body.bdrw) label { color: var(--navy); }
body.bdrw .custom-control-input:checked ~ .custom-control-label::before { background-color: var(--navy); border-color: var(--navy); }
:where(body.bdrw) input[type="checkbox"],
:where(body.bdrw) input[type="radio"] { accent-color: var(--navy); }

/* ---------- Tarjetes ---------- */
body.bdrw .card { border: 1px solid var(--vora); border-radius: 16px; background: #FFFFFF; box-shadow: none; }
body.bdrw .card-header { background: var(--alterna); border-bottom: 1px solid var(--vora); border-radius: 16px 16px 0 0 !important; }
body.bdrw .card-footer { background: var(--alterna); border-top: 1px solid var(--vora); border-radius: 0 0 16px 16px !important; }
body.bdrw .card-title { color: var(--navy); font-weight: 700; }
body.bdrw .ha-service-card,
body.bdrw .ha-include-card,
body.bdrw .ha-diff-card,
body.bdrw .ha-extra-card,
body.bdrw .ha-card,
body.bdrw .ha-linkCard,
body.bdrw .ha-whyus-card,
body.bdrw .ha-domain-search-card { border: 1px solid var(--vora) !important; border-radius: 16px !important; background: #FFFFFF !important; background-image: none !important; box-shadow: none; }
body.bdrw .ha-service-card:hover,
body.bdrw .ha-diff-card:hover,
body.bdrw .ha-extra-card:hover,
body.bdrw .ha-linkCard:hover,
body.bdrw .ha-whyus-card:hover { box-shadow: var(--ombra); transform: none; }
body.bdrw .ha-whyus-card::before { display: none; }
body.bdrw .ha-diff-card h5 { color: var(--navy); }
body.bdrw .ha-business-extras { background: var(--alterna); background-image: none; border-color: var(--vora); }

/* Icones: requadre blanc amb vora i icona navy, com a la portada */
body.bdrw .ha-service-icon,
body.bdrw .ha-extra-icon,
body.bdrw .ha-whyus-ico,
body.bdrw .ha-icon { background: #FFFFFF !important; background-image: none !important; border: 1px solid var(--vora); border-radius: 12px !important; color: var(--navy) !important; }
body.bdrw .ha-service-icon i,
body.bdrw .ha-extra-icon i,
body.bdrw .ha-whyus-ico i,
body.bdrw .ha-icon i { color: var(--navy) !important; }
body.bdrw .ha-service-card:hover .ha-service-icon i { color: var(--navy) !important; }
/* Numeros dels passos: navy amb text blanc */
body.bdrw .ha-guide-num,
body.bdrw .ha-step-number { background: var(--navy) !important; background-image: none !important; color: #FFFFFF !important; }

/* Preguntes frequents */
body.bdrw .ha-faq-item { border-color: var(--vora); border-radius: 14px; background: #FFFFFF; }
body.bdrw .ha-faq-question { color: var(--navy); font-weight: 700; }
body.bdrw .ha-faq-icon { color: var(--navy); }
body.bdrw .ha-faq-badge { background: var(--alterna); color: var(--navy); }

/* ---------- Avisos, etiquetes, taules, pestanyes, paginacio ---------- */
body.bdrw .alert { border-radius: 12px; }
body.bdrw .alert-info,
body.bdrw .alert-primary { background: #F3F1EE; border-color: var(--clar-navy); color: var(--navy); }
body.bdrw .alert-success { background: var(--exit-fons); border-color: #B7DEC6; color: var(--exit); }
body.bdrw .alert-warning { background: var(--avis-fons); border-color: #F2D894; color: var(--avis); }
body.bdrw .alert-danger { background: var(--perill-fons); border-color: #F4B7B2; color: var(--perill); }
/* 08/10/2026 (H45, mesurat amb integracio/marca_navegador.js): l'asterisc de camp obligatori del formulari de contacte
   (.text-danger de Bootstrap, #DC3545) feia 4,30:1 sobre el fons del formulari (#F8F9FA), per sota de 4,5:1, tambe
   abans d'aquesta ronda. Amb el vermell d'estat de la casa, 6,24:1 (6,57:1 sobre blanc). Bootstrap el porta amb !important. bdr-efg */
body.bdrw .text-danger { color: var(--perill) !important; }
body.bdrw .badge-primary,
body.bdrw .badge-info,
body.bdrw .label-info { background: var(--navy); color: #FFFFFF; }
body.bdrw .table thead th { border-bottom-color: var(--vora); background: var(--alterna); color: var(--navy); }
body.bdrw .table td,
body.bdrw .table th { border-top-color: var(--vora); }
body.bdrw .nav-tabs { border-bottom-color: var(--vora); }
body.bdrw .nav-tabs .nav-link { color: var(--secundari); font-weight: 700; border-radius: 10px 10px 0 0; }
body.bdrw .nav-tabs .nav-link.active { color: var(--navy); border-color: var(--vora) var(--vora) #FFFFFF; }
body.bdrw .nav-pills .nav-link.active { background: var(--navy); color: #FFFFFF; }
body.bdrw .page-item.active .page-link { background: var(--navy); border-color: var(--navy); color: #FFFFFF; }
body.bdrw .page-link { color: var(--navy); }
body.bdrw .dropdown-menu { border: 1px solid var(--vora); border-radius: 12px; box-shadow: var(--ombra-forta); }
body.bdrw .dropdown-item.active,
body.bdrw .dropdown-item:active { background: var(--alterna); color: var(--navy); }
body.bdrw .modal-content { border: 0; border-radius: 16px; }

/* Area de client: la barra lateral */
body.bdrw .sidebar .card { border-radius: 16px; }
body.bdrw .sidebar .list-group-item { border-color: var(--vora-suau); color: var(--navy); }
body.bdrw .sidebar .list-group-item.active,
body.bdrw .sidebar .list-group-item.active:hover { background: var(--alterna); border-color: var(--vora-suau); color: var(--navy); font-weight: 700; box-shadow: inset 3px 0 0 var(--ha-primari); }
body.bdrw .sidebar .list-group-item:hover { background: var(--alterna); color: var(--navy); }

/* ---------- Botiga i carret ----------
   La botiga (orderform hostingandorra) porta un bloc d'estils propi amb variables a :root (--ha-brand...), i el carret
   (orderform ha_premium_cart) una fulla amb variables a #order-standard_cart (--ha-grad...). Es redefineixen aqui amb
   la paleta nova; on hi havia text blanc sobre el taronja, passa a navy. Des del 08/10/2026 (H45) --taronja es el
   #F4A000, amb text #3D3D3D (5,11:1), i el navy es el #3D3D3D. bdr-efg */
body.bdrw {
  --ha-brand: var(--taronja);
  --ha-brand-dark: var(--taronja-hover);
  --ha-ink: var(--navy);
  --ha-muted: var(--secundari);
  --ha-line: var(--vora);
  --ha-soft: var(--vora-suau);
  --ha-grad: var(--taronja);
  --ha-grad-2: var(--taronja);
}
body.bdrw #order-standard_cart,
body.bdrw #order-ha_premium_cart,
body.bdrw #order-standard_cart.ha-domains-landing { --ha-grad: var(--taronja); --ha-grad-2: var(--taronja); --ha-border: var(--vora); --ha-text: var(--navy); }
body.bdrw .ha-card .ha-price-amount { color: var(--navy); }
/* Botons de compra de la botiga i del carret que portaven text blanc sobre el taronja: amb el taronja nou, navy */
body.bdrw .ha-card .ha-cta,
body.bdrw .ha-card .ha-cta:hover { color: var(--navy) !important; }
body.bdrw .ha-card .ha-cta:hover { background: var(--taronja-hover); }
body.bdrw .ha-card.ha-outline .ha-cta { background: #FFFFFF; color: var(--navy) !important; border-color: var(--navy); }
body.bdrw .ha-card.ha-outline .ha-cta:hover { background: var(--taronja); border-color: var(--taronja); color: var(--navy) !important; }
body.bdrw .ha-card .ha-features li.ha-feature-spec i,
body.bdrw .ha-catalog-disclaimer i { color: var(--taronja-text); }
body.bdrw #order-standard_cart #btnContinueRecommendationsModal.btn,
body.bdrw #btnContinueRecommendationsModal.btn,
body.bdrw #recommendationsModal .btn-add,
body.bdrw #recommendationsModal button.btn-add,
body.bdrw #order-standard_cart.ha-domains-landing .ha-btn-grad { color: var(--navy) !important; }
body.bdrw .ha-localized-banner { background: var(--alterna) !important; background-image: none !important; border-color: var(--vora) !important; color: var(--navy) !important; }
body.bdrw .ha-localized-banner i,
body.bdrw .ha-localized-banner svg { color: var(--taronja-text) !important; }
/* 08/10/2026 (H45): la insignia del destacat en groc #FFC738 amb text #3D3D3D (6,97:1) i la vora en el taronja primari bdr-efg */
body.bdrw .ha-card .ha-featured-badge { background: var(--groc); color: var(--navy); }
body.bdrw .ha-card.ha-featured { border: 2px solid var(--ha-primari) !important; box-shadow: var(--ombra); }
body.bdrw #order-standard_cart .btn-checkout,
body.bdrw #order-ha_premium_cart .btn-checkout { background: var(--taronja) !important; background-image: none !important; border-color: var(--taronja) !important; color: var(--navy) !important; }
body.bdrw #order-standard_cart .btn-checkout:hover,
body.bdrw #order-ha_premium_cart .btn-checkout:hover { background: var(--taronja-hover) !important; color: var(--navy) !important; }
body.bdrw #order-standard_cart .view-cart-items-header,
body.bdrw #order-ha_premium_cart .view-cart-items-header { background: var(--navy); color: #FFFFFF; border-radius: 12px 12px 0 0; }
body.bdrw #order-standard_cart .order-summary,
body.bdrw #order-ha_premium_cart .order-summary { background: var(--navy); border-radius: 16px; overflow: hidden; }
body.bdrw #order-standard_cart .order-summary h2,
body.bdrw #order-ha_premium_cart .order-summary h2 { color: #FFFFFF; }
/* Sobre aquests blocs #3D3D3D l'anell general (#3D3D3D) quedaria a 1:1: groc, 6,97:1. Preventiu (revisio
   d'accessibilitat de la quarta pujada). bdr-efg 08/10/2026 */
body.bdrw #order-standard_cart .view-cart-items-header :focus-visible,
body.bdrw #order-ha_premium_cart .view-cart-items-header :focus-visible,
body.bdrw #order-standard_cart .order-summary :focus-visible,
body.bdrw #order-ha_premium_cart .order-summary :focus-visible { outline-color: var(--groc); }

/* ---------- Colors antics escrits dins de les pagines ----------
   Les pagines de producte porten el taronja antic (#eb5420) i el fons calid (#faf9f7) en atributs style. Es
   reconverteixen aqui fins que el pas 2 les refaci. Ordre: primer el text, despres els fons (que tornen el text a
   navy, perque el taronja nomes va amb text navy) i les vores. Els que porten !important dins de l'atribut no es
   poden canviar des d'aqui. Des del 08/10/2026 (H45): text #3D3D3D, fons #F4A000 amb text #3D3D3D i vores en el
   primari #EB5420, que es justament el taronja antic d'aquests atributs. bdr-efg */
body.bdrw [style*="color:#eb5420" i],
body.bdrw [style*="color: #eb5420" i],
body.bdrw [style*="color:#b8431a" i] { color: var(--taronja-text) !important; }
body.bdrw [style*="background:#eb5420" i],
body.bdrw [style*="background: #eb5420" i],
body.bdrw [style*="background-color:#eb5420" i] { background: var(--taronja) !important; color: var(--navy) !important; }
body.bdrw [style*="solid #eb5420" i] { border-color: var(--ha-primari) !important; }
body.bdrw [style*="background:#faf9f7" i] { background: var(--alterna) !important; }
body.bdrw [style*="background:#fff7f2" i],
body.bdrw [style*="background:#fdece6" i] { background: var(--taronja-fons) !important; }
body.bdrw [style*="solid #f4c9ae" i] { border-color: var(--taronja-vora) !important; }
body.bdrw [style*="solid #f0efec" i] { border-color: var(--vora) !important; }

/* ---------- Avis de cookies ----------
   08/10/2026 (H45, revisio de la ronda de marca): includes/bdr_cookies.tpl (de produccio, el mateix per a la web de
   sempre) porta el seu estil en linia amb el navy #091633 al bloc i al text dels botons, i el focus taronja de 2 px als
   botons; l'enllac «Politica de cookies» agafava l'anell general, navy sobre el bloc navy (1:1, ja abans). Amb la web
   nova: bloc #3D3D3D amb text blanc (10,86:1), botons blancs amb text #3D3D3D (10,86:1) i focus de 3 px #FFC738 a
   tot l'avis (6,97:1 sobre el bloc). L'enllac continua blanc i subratllat (la regla dels enllacos del text ja exclou
   #bdr-ck). La lletra ja es Poppins per herencia. Per tornar-hi: esborrar aquestes tres regles. bdr-efg */
body.bdrw .bdr-ck { background: var(--navy); }
body.bdrw .bdr-ck-btns button { color: var(--navy); }
body.bdrw .bdr-ck :focus-visible { outline: 3px solid var(--groc); outline-offset: 2px; }
/* 09/10/2026 (fase 4a de web4, retoc 1): l'avis es fix a baix i, mentre es a la vista, tapava del tot el camp o l'enllac
   enfocat en recorrer amb el tabulador un formulari llarg o una fitxa (WCAG 2.4.11, mesurat: fins a 23 de 45 parades al
   registre a 320 px). Mentre l'avis es a la vista, la pagina reserva a baix la seva alcada mes el marge
   (scroll-padding-bottom, tecnica C43): el navegador porta el que s'enfoca per sobre de l'avis. A html i a body: el tema
   (theme.min.css, height: 100%, i custom.css, overflow-x: hidden, a tots dos) fa que qui es desplaci sigui body. En rem,
   perque creixi amb el text com l'avis. Les mides cobreixen l'alcada maxima de l'avis en els quatre idiomes mesurada amb
   proves/cookies_focus_navegador.js de web4 (276 px a 320 px, 254 a 360, 233 a 390, 212 a 480, 169 a 600, 160 a 700, 139 a
   768, 117 des de 1024, mes els 16 px de marge). Sense :has() (navegadors antics) queda com abans. Per tornar-hi: esborrar
   aquestes sis regles. bdr-efg */
html:has(> body.bdrw #bdr-ck:not([hidden])), body.bdrw:has(#bdr-ck:not([hidden])) { --bdr-ck-reserva: min(20rem, calc(50vh + 1rem)); scroll-padding-bottom: var(--bdr-ck-reserva); }
@media (min-width: 600px) { html:has(> body.bdrw #bdr-ck:not([hidden])), body.bdrw:has(#bdr-ck:not([hidden])) { --bdr-ck-reserva: min(15rem, calc(50vh + 1rem)); } }
@media (min-width: 768px) { html:has(> body.bdrw #bdr-ck:not([hidden])), body.bdrw:has(#bdr-ck:not([hidden])) { --bdr-ck-reserva: min(11rem, calc(50vh + 1rem)); } }
@media (min-width: 1024px) { html:has(> body.bdrw #bdr-ck:not([hidden])), body.bdrw:has(#bdr-ck:not([hidden])) { --bdr-ck-reserva: min(9.5rem, calc(50vh + 1rem)); } }
/* I el mateix espai al final de la pagina: sense, els darrers enllacos del peu no tenen on pujar i queden sota l'avis */
body.bdrw:has(#bdr-ck:not([hidden])) { padding-bottom: var(--bdr-ck-reserva); }
/* Amb poca alcada (zoom del 400 %, mobil apaisat) l'avis no passa de mitja pantalla: el que no hi cap es desplaça dins de
   l'avis, i la reserva de dalt tampoc passa de mitja pantalla (revisio d'accessibilitat, 1.4.10 i 2.4.11) */
body.bdrw .bdr-ck { max-height: 50vh; overflow-y: auto; }

@media (prefers-reduced-motion: reduce) {
  body.bdrw .bdrw-fletxa,
  body.bdrw .btn { transition: none; }
  /* ha-fase4.css del tema posa html { scroll-behavior: smooth }: amb moviment reduit, les ancores (la portada, el
     salt al contingut) hi van sense animacio. Nomes amb la web nova (:has). Revisio d'accessibilitat de la quarta
     pujada, WCAG 2.3.3. bdr-efg 08/10/2026 */
  html:has(body.bdrw) { scroll-behavior: auto !important; }
}

/* ---------- Colors forcats ----------
   Revisio d'accessibilitat de la quarta pujada (08/10/2026): en colors forcats el fons i l'ombra no marquen res. El
   que es tria nomes per fons (pestanyes en pastilla, paginacio) passa als colors de seleccio del sistema; les barres
   de degradat (el degradat no es pinta) passen a CanvasText, com a bdr-botiga.css. bdr-efg */
@media (forced-colors: active) {
  body.bdrw .nav-pills .nav-link.active,
  body.bdrw .page-item.active .page-link { forced-color-adjust: none; background-color: Highlight; color: HighlightText; border-color: Highlight; }
  body.bdrw .bdrw-peu-marca p.bdrw-peu-claim::after { background: CanvasText; }
  /* El focus: amb forced-color-adjust: none l'anell seria el de l'autor (#3D3D3D sobre Canvas), i el .page-link:focus de
     Bootstrap el treu (outline 0): CanvasText, tambe a la paginacio que no es la triada */
  body.bdrw .nav-pills .nav-link.active:focus-visible,
  body.bdrw .page-link:focus-visible { outline: 3px solid CanvasText; outline-offset: 2px; }
}