/* Piel B · base común del estilo elegido (07-10): la B, «muy pegada a Apple», con la firma de los circuitos de Bwit (22-10).
   Titulares grandes y centrados, una línea de subtítulo, dos enlaces «Más información ›» y «Pedir oferta ›», bandas a
   sangre en blanco y gris muy claro, tarjetas redondeadas y barra de producto fija. Colores de Bwit y letra Inter.
   Sin textos, imágenes ni letra de Apple. Fondo claro siempre.

   Cómo se adopta, página a página (las que no lo hacen siguen igual):
     1. <html lang="es" data-piel="b">
     2. después de web.css: <link rel="stylesheet" href="assets/css/piel-b.css">
     3. sitio.js pone el menú y el pie B solo, y monta la firma de cualquier [data-conectores].
   Piezas: .b-banda (+ .gris), .b-ojo, .b-h1/.b-h2/.b-h3/.b-gigante, .b-sub, .b-enlaces, .b-boton, .b-tarjeta, .b-rejilla,
   .b-mosaico/.b-tesela, .b-cifras, .b-texto, .b-barra, .b-sim, .b-menu, .b-pie y la firma de los circuitos
   (<section class="b-banda b-con" data-conectores>; ver conectores.js).
   Este fichero es de la base común: los cambios de una página van en el CSS de esa página. */
@import url("../fonts/fuentes.css");

html[data-piel=b]{--azul:#004C97;--azul-hover:#003E7C;--amarillo:#E9B920;--tinta:#15283D;--gris:#5E6E81;--gris2:#8391A2;
  --b-gris:#F5F7FA;--b-filete:#DCE3EB;--b-linea:rgba(21,40,61,.1);--b-pista:#CFDBE8;--b-menu:44px;--b-ancho:1120px;
  --b-curva:cubic-bezier(.22,.68,.2,1);--b-letra:Inter,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;scroll-padding-top:var(--b-menu)}
html[data-piel=b] body{margin:0;font-family:var(--b-letra);font-size:17px;line-height:1.47;letter-spacing:-.011em;color:var(--tinta);background:#fff;overflow-x:clip;-webkit-font-smoothing:antialiased}

/* ---------- titulares y texto ---------- */
.b-ojo{display:block;margin:0 0 8px;font-size:clamp(15px,1.3vw,19px);line-height:1.2;font-weight:600;letter-spacing:-.005em;color:var(--azul)}
.b-gigante,.b-h1,.b-h2,.b-h3{margin:0;font-weight:600;color:var(--tinta);text-wrap:balance}
.b-gigante{font-size:clamp(56px,8.4vw,112px);line-height:1.02;letter-spacing:-.04em}
.b-h1{font-size:clamp(40px,5.2vw,72px);line-height:1.05;letter-spacing:-.035em}
.b-h2{font-size:clamp(34px,4.2vw,56px);line-height:1.07;letter-spacing:-.03em}
.b-h3{font-size:clamp(28px,2.9vw,40px);line-height:1.1;letter-spacing:-.025em}
.b-sub{max-width:34em;margin:8px auto 0;font-size:clamp(19px,1.95vw,28px);line-height:1.18;font-weight:400;letter-spacing:-.015em;color:var(--tinta);text-wrap:balance}
.b-sub.gris,.b-texto,.b-tarjeta p{color:var(--gris)}
.b-texto{max-width:980px;margin:40px auto 0;text-align:left;columns:2 300px;column-gap:48px;font-size:17px;line-height:1.6}
.b-texto p{margin:0 0 16px;break-inside:avoid}.b-texto b{color:var(--tinta);font-weight:600}
.b-banda sup,.b-pie sup{font-size:.55em;line-height:0;vertical-align:super;margin-left:1px}
.b-banda sup a{color:inherit;text-decoration:none}

/* ---------- enlaces «Más información ›» y botones ---------- */
.b-enlaces{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px 34px;margin-top:18px;font-size:clamp(17px,1.5vw,21px);letter-spacing:-.01em}
.b-enlaces a:not(.b-boton),.b-enlace{color:var(--azul);text-decoration:none}
.b-enlaces a:not(.b-boton)::after,.b-enlace::after{content:"\00a0›";display:inline-block;transition:transform .25s var(--b-curva)}
.b-enlaces a:not(.b-boton):hover,.b-enlace:hover{text-decoration:underline;text-underline-offset:3px}
.b-enlaces a:not(.b-boton):hover::after,.b-enlace:hover::after{transform:translateX(2px)}
.b-boton{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 24px;border:0;border-radius:999px;background:var(--azul);color:#fff!important;font:500 17px/1.2 var(--b-letra);letter-spacing:-.01em;text-decoration:none!important;cursor:pointer;transition:background .2s}
.b-boton:hover{background:var(--azul-hover)}
.b-boton.peq{min-height:28px;padding:0 13px;font-size:12.5px;font-weight:500}
.b-boton.sec{background:transparent;color:var(--azul)!important;box-shadow:inset 0 0 0 1.5px var(--azul)}
.b-boton.sec:hover{background:rgba(0,76,151,.06)}
:is(.b-boton,.b-enlaces a,.b-enlace,.b-menu a,.b-barra a,.b-pie a):focus-visible{outline:2px solid var(--azul);outline-offset:3px;border-radius:6px}

/* ---------- bandas a sangre: blanco y gris muy claro ---------- */
/* El aire de cada banda va en --b-pt / --b-pb (arriba / abajo): así gana al ritmo viejo de estilo.css (main>section) */
.b-banda{--b-pt:clamp(64px,8vw,104px);--b-pb:var(--b-pt);position:relative;overflow:hidden;padding:var(--b-pt) 22px var(--b-pb);background:#fff;text-align:center}
html[data-piel=b] main>.b-banda,html[data-piel=b] main>.b-banda:last-child{padding:var(--b-pt) 22px var(--b-pb)}
.b-banda.gris{background:var(--b-gris)}
.b-banda.sin-fondo{--b-pb:0}
.b-ancho{width:min(var(--b-ancho),100%);margin-inline:auto}
.b-banda figure{margin:clamp(28px,4vw,48px) auto 0}
.b-banda figure img{margin-inline:auto}
.b-banda img,.b-tesela img,.b-tarjeta img{height:auto}
.b-mult{mix-blend-mode:multiply}
/* Nota de recreación: lo que es una recreación (3D o pantalla) lo dice en texto. Sin el sello «SIM» (David, 20-10-2026: no se pone en ningún sitio) */
/* 21-10 (punto 7 de la auditoría de trucos): en el gris de la web, no en el clarito (--gris2 daba 3,2:1; --gris da 5,2:1 sobre
   blanco y 4,9:1 sobre el gris de las bandas). Es el aviso que nos protege: tiene que leerse (WCAG AA, 4,5:1). */
.b-sim{display:inline-flex;align-items:center;gap:8px;font-size:12px;line-height:1.3;color:var(--gris)}
.b-sim::before{content:none!important;display:none!important}
/* Red de seguridad: ninguna pastilla «SIM» se ve, venga de la rama que venga */
.vp-sim,.vr-sim,.ll-sim,.as-sim,.x3d-sim,.v2-sim>b,.vp-tarjeta-sim>.vp-sim{display:none!important}
figure>.b-sim{display:flex;justify-content:center;margin-top:12px}

/* ---------- la firma: los circuitos de Bwit en las cabeceras (22-10) ---------- */
/* conectores.js mete un .cx-fondo en cada [data-conectores] con la firma: el gesto del monograma b.2 (pista, quiebro a 45° y
   anillo) a los dos lados del antetítulo, en espejo. Desde el 28-10 sale ya dibujada (.cx-hecho desde el principio); la animación (.cx-vivo) solo vuelve con ANIMAR = true en conectores.js. */
.b-con{isolation:isolate}
.b-con>:not(.cx-fondo){position:relative;z-index:1}
html[data-piel=b] .b-con>.cx-fondo{position:absolute;inset:0;z-index:0;max-width:none;margin:0;pointer-events:none;overflow:hidden}
html[data-piel=b] .cx-fondo svg{position:absolute;left:0;top:0;display:block}
html[data-piel=b] .cx-pista{fill:none;stroke:var(--b-pista);stroke-width:2px;stroke-linecap:round;stroke-linejoin:round}
html[data-piel=b] .cx-oro{stroke:var(--amarillo)}
html[data-piel=b] .cx-via{fill:var(--b-pista)}
html[data-piel=b] .cx-hueco{fill:var(--cx-hueco,#fff)}
html[data-piel=b] .cx-anillo{fill:none;stroke:var(--amarillo)}
/* Hasta que se ve, nada; al verse, la pista gris (0,9 s), el tramo amarillo y el anillo, que entra con un pequeño rebote */
html[data-piel=b] .cx-fondo:not(.cx-hecho) .cx-pista{stroke-dasharray:1;stroke-dashoffset:1}
html[data-piel=b] .cx-fondo:not(.cx-hecho) :is(.cx-anillo,.cx-via,.cx-hueco){opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.4)}
html[data-piel=b] .cx-vivo .cx-gris{animation:cx-traza .9s cubic-bezier(.35,.6,.2,1) forwards}
html[data-piel=b] .cx-vivo .cx-oro{animation:cx-traza .4s ease-out .85s forwards}
html[data-piel=b] .cx-vivo :is(.cx-via,.cx-hueco){animation:cx-llega .35s ease-out .8s forwards}
html[data-piel=b] .cx-vivo .cx-anillo{animation:cx-llega .5s cubic-bezier(.2,1.5,.4,1) 1.2s forwards}
@keyframes cx-traza{to{stroke-dashoffset:0}}
@keyframes cx-llega{to{opacity:1;transform:none}}
/* Los circuitos de la piel vieja que aún quedan en la B (el mapa de Contacto y Soporte): sin los pulsos sin fin */
html[data-piel=b] .circuitos .luz{display:none}
html[data-piel=b] .circuitos .pad{animation:none}

/* ---------- tarjetas redondeadas ---------- */
.b-rejilla{display:grid;gap:20px;width:min(var(--b-ancho),100%);margin:clamp(36px,5vw,56px) auto 0;text-align:left}
.b-rejilla.dos{grid-template-columns:repeat(2,minmax(0,1fr))}
.b-rejilla.tres{grid-template-columns:repeat(3,minmax(0,1fr))}
.b-tarjeta{position:relative;display:flex;flex-direction:column;overflow:hidden;border-radius:28px;background:var(--b-gris);padding:clamp(26px,3vw,40px);color:var(--tinta);text-decoration:none}
.gris .b-tarjeta{background:#fff}
.b-tarjeta h3{margin:0;font-size:clamp(22px,2vw,28px);line-height:1.14;font-weight:600;letter-spacing:-.02em}
.b-tarjeta p{margin:10px 0 0;font-size:17px;line-height:1.55}
.b-tarjeta p b{color:var(--tinta);font-weight:600}
.b-tarjeta .b-enlaces{justify-content:flex-start;font-size:17px;margin-top:auto;padding-top:20px}
.b-tarjeta figure{margin:auto 0 0;padding-top:24px}
a.b-tarjeta{transition:transform .35s var(--b-curva),box-shadow .35s var(--b-curva)}
a.b-tarjeta:hover{transform:translateY(-3px);box-shadow:0 18px 40px -24px rgba(21,40,61,.35)}

/* ---------- mosaico de teselas a dos columnas (portada) ---------- */
.b-mosaico{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:12px;background:#fff}
.b-tesela{position:relative;overflow:hidden;display:flex;flex-direction:column;min-height:clamp(480px,44vw,620px);padding:clamp(40px,4.4vw,56px) 22px 0;border-radius:24px;background:var(--b-gris);text-align:center}
.b-tesela.blanca{background:#fff;box-shadow:inset 0 0 0 1px var(--b-filete)}
.b-tesela .b-sub{font-size:clamp(17px,1.5vw,21px);line-height:1.24}
.b-tesela .b-enlaces{font-size:17px;margin-top:14px}
.b-tesela figure{margin:auto auto 0;padding-top:24px;width:100%}
.b-tesela figure img{width:100%;max-width:560px;margin:0 auto}

/* ---------- cifras grandes ---------- */
.b-cifras{display:grid;grid-template-columns:repeat(var(--k,3),minmax(0,1fr));gap:32px;width:min(980px,100%);margin:clamp(40px,5vw,64px) auto 0;text-align:left}
.b-cifras small{display:block;font-size:17px;font-weight:600;color:var(--gris)}
.b-cifras b{display:block;margin-top:6px;font-size:clamp(44px,5vw,72px);line-height:1.02;font-weight:600;letter-spacing:-.035em;color:var(--azul);white-space:nowrap}
.b-cifras span{display:block;margin-top:6px;font-size:17px;color:var(--gris)}

/* ---------- barra de producto fija ---------- */
.b-barra{position:sticky;top:0;z-index:40;height:52px;background:rgba(255,255,255,.8);-webkit-backdrop-filter:saturate(1.8) blur(20px);backdrop-filter:saturate(1.8) blur(20px);border-bottom:1px solid var(--b-linea)}
.b-barra-in{display:flex;align-items:center;gap:24px;height:100%;width:min(var(--b-ancho),100%);margin:0 auto;padding:0 22px}
.b-barra-in>b{font-size:21px;font-weight:600;letter-spacing:-.02em;white-space:nowrap}
.b-barra nav{display:flex;align-items:center;gap:22px;margin-left:auto;font-size:12.5px}
.b-barra nav a:not(.b-boton){color:var(--tinta);opacity:.8;text-decoration:none}.b-barra nav a:not(.b-boton):hover{opacity:1}

/* ---------- menú global como el de Apple (21-10) ---------- */
/* Medidas y tiempos del kit Apple (prototipos/kit-apple/LEEME.md, apartado 6): barra de 44 px (48 en el móvil), contenido de
   1.024 px, enlaces de 12/16. Al pasar el ratón por Soluciones, Inteligencia Artificial, Soporte o Sobre nosotros se abre su
   panel a todo el ancho y la página se difumina detrás (la animación, en menuEventos() de sitio.js). */
html[data-piel=b] #menu{position:sticky;top:0;z-index:60}
html[data-piel=b] body:has(.b-barra,.vp-barra) #menu{position:relative}   /* con barra de producto, la que se queda es la barra */
.b-menu{--b-menu-curva:cubic-bezier(.4,0,.6,1);--b-menu-fondo:#FAFBFD;position:relative;z-index:1;height:var(--b-menu);font-family:var(--b-letra)}
/* El fondo translúcido va en un ::before: con el desenfoque en la propia barra, la cortina (que va dentro) no podría
   desenfocar la página, y el menú del móvil (position:fixed) se quedaría encerrado en ella */
.b-menu::before{content:"";position:absolute;inset:0;background:rgba(250,251,253,.8);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}
.b-menu[data-abierto]::before{background:var(--b-menu-fondo)}
.b-menu-in{position:relative;z-index:2;display:flex;align-items:center;gap:16px;height:100%;max-width:1024px;margin:0 auto;padding:0 22px}
.b-menu-logo{display:flex;align-items:center;height:100%;flex:none}.b-menu-logo img{height:20px;width:auto}
.b-menu-lista{display:flex;align-items:center;justify-content:center;flex:1;gap:clamp(4px,1.3vw,18px);height:100%;margin:0;padding:0;list-style:none}
.b-menu-lista>li{display:flex;align-items:center;height:100%}
.b-menu-lista>li>a,.b-menu-cuenta,.b-menu-pedir{display:inline-flex;align-items:center;height:100%;padding:0 8px;font-size:12px;line-height:16px;font-weight:400;letter-spacing:-.01em;color:rgba(21,40,61,.8);text-decoration:none;white-space:nowrap;transition:color 320ms var(--b-menu-curva)}
.b-menu-lista>li>a:hover,.b-menu-lista>li.b-abierto>a,.b-menu-lista>li>a[aria-current],.b-menu-cuenta:hover,.b-menu-cuenta[aria-current]{color:var(--tinta)}
.b-menu-cuenta,.b-menu-pedir{flex:none}
/* Lupa del buscador (22-10): un enlace más de la barra, como la de Apple. En el móvil va entre «Pedir oferta» y el menú */
.b-menu-lupa{display:inline-flex;align-items:center;justify-content:center;flex:none;width:32px;height:100%;margin:0 -4px;padding:0;border:0;background:none;
  color:rgba(21,40,61,.8);cursor:pointer;transition:color 320ms var(--b-menu-curva)}
.b-menu-lupa:hover,.b-menu-lupa[aria-expanded=true]{color:var(--tinta)}
.b-menu-pedir{margin-right:-8px;color:var(--azul)}.b-menu-pedir:hover,.b-menu-pedir[aria-current]{color:var(--azul-hover)}
/* Flechita para el teclado, como la de Apple: solo se ve al llegar a la entrada con el tabulador. No ocupa sitio (12 − 7 − 5):
   así todas las entradas quedan igual de separadas */
.b-menu-abrir{display:inline-flex;align-items:center;justify-content:center;width:12px;height:20px;margin:0 -5px 0 -7px;padding:0;border:0;border-radius:4px;background:none;color:var(--tinta);opacity:0;cursor:pointer}
.b-menu-lista>li:has(:focus-visible) .b-menu-abrir{opacity:.8}
.b-menu-abrir[aria-expanded=true] svg{transform:rotate(180deg)}
.b-menu-boton{display:none;position:relative;width:44px;height:44px;margin-right:-12px;padding:0;border:0;background:none;cursor:pointer;color:var(--tinta)}
.b-menu-boton span{position:absolute;left:13px;width:18px;height:1.5px;border-radius:1px;background:currentColor;transition:transform .3s var(--b-curva),top .3s var(--b-curva)}
.b-menu-boton span:first-child{top:18px}.b-menu-boton span:last-child{top:25px}
.b-menu[data-abierto] .b-menu-boton span:first-child{top:21.5px;transform:rotate(45deg)}
.b-menu[data-abierto] .b-menu-boton span:last-child{top:21.5px;transform:rotate(-45deg)}
/* El panel: el fondo (cajón) va a todo el ancho y crece desde la barra; el contenido, alineado con el logo */
.b-menu-cajon{position:absolute;z-index:1;left:0;right:0;top:0;height:var(--b-menu);background:var(--b-menu-fondo)}
.b-menu-cajon[hidden],.b-panel[hidden]{display:none}
.b-panel{position:absolute;left:0;right:0;top:100%;text-align:left}
.b-panel-in{display:flex;gap:88px;padding:40px 22px 84px}
.b-panel-col{min-width:0}
.b-panel-titulo{margin:0 0 14px;font-size:12px;line-height:16px;letter-spacing:-.01em;color:var(--gris)}
.b-panel ul{margin:0;padding:0;list-style:none}
.b-panel li+li{margin-top:8px}
.b-panel-grande{font-size:24px;line-height:28px;font-weight:600;letter-spacing:.009em;color:rgba(21,40,61,.92);text-decoration:none}
.b-panel-peq{font-size:12px;line-height:16px;font-weight:600;letter-spacing:-.01em;color:rgba(21,40,61,.8);text-decoration:none}
.b-panel-grandes+.b-panel-peqs{margin-top:22px}
.b-panel a:hover{color:var(--azul)}
/* La cortina: la página, difuminada detrás del panel */
.b-menu-cortina{position:absolute;z-index:0;left:0;right:0;top:100%;height:100vh;background:rgba(226,231,238,.4);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);opacity:0;visibility:hidden;pointer-events:none;transition:opacity 160ms var(--b-menu-curva),visibility 0s linear 160ms}
.b-menu[data-panel-abierto] .b-menu-cortina{opacity:1;visibility:visible;transition:opacity 320ms var(--b-menu-curva) 80ms,visibility 0s}
/* Menú del móvil, como el del iPhone: pantalla entera y, al tocar una entrada con panel, su lista con «‹» para volver.
   Va fuera de .b-menu, pegado debajo de la barra */
.b-menu-movil{position:fixed;left:0;right:0;top:var(--b-menu);bottom:0;z-index:59;overflow:auto;overscroll-behavior:contain;padding:0 16px 40px;background:var(--b-menu-fondo,#FAFBFD);font-family:var(--b-letra)}
.b-menu-movil[hidden],.b-movil-vista[hidden]{display:none}
.b-menu-movil ul{margin:0;padding:0;list-style:none}
.b-menu-movil .b-movil-lista{padding:18px 32px 0}
.b-movil-lista a,.b-movil-grandes a{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:5px 0;font-size:24px;line-height:28px;font-weight:600;letter-spacing:.009em;color:var(--tinta);text-decoration:none}
.b-movil-lista a[aria-current]{color:var(--azul)}
.b-movil-flecha{flex:none;color:var(--gris2)}
.b-menu-movil .b-boton{margin:28px 32px 0;font-size:17px}
.b-movil-volver{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin:4px 0 0 15px;padding:0;border:0;border-radius:22px;background:none;color:var(--tinta);cursor:pointer}
.b-movil-grupo{padding:0 32px}
.b-movil-volver+.b-movil-grupo{margin-top:10px}
.b-movil-grupo+.b-movil-grupo{margin-top:36px}
.b-movil-titulo{margin:0 0 10px;font-size:14px;line-height:18px;letter-spacing:-.016em;color:var(--gris)}
.b-movil-peqs a{display:block;padding:8px 0;font-size:17px;line-height:21px;font-weight:600;letter-spacing:-.022em;color:rgba(21,40,61,.85);text-decoration:none}
.b-movil-grandes+.b-movil-peqs{margin-top:14px}
:is(.b-menu-movil a,.b-movil-volver,.b-menu-abrir,.b-menu-boton,.b-menu-lupa):focus-visible{outline:2px solid var(--azul);outline-offset:2px;border-radius:6px}

/* ---------- pie ---------- */
.b-pie{background:var(--b-gris);font-size:12.5px;line-height:1.4;color:var(--gris);letter-spacing:-.005em;font-family:var(--b-letra)}
.b-pie-in{width:min(var(--b-ancho),100%);margin:0 auto;padding:20px 22px 24px}
.b-pie a{color:var(--gris);text-decoration:none}.b-pie a:hover{color:var(--tinta);text-decoration:underline}
.b-notas{padding:6px 0 14px;border-bottom:1px solid var(--b-filete)}
.b-notas ol{margin:0;padding-left:16px}.b-notas li,.b-notas p{margin:0 0 8px}
.b-pie-cols{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:24px;padding:22px 0;border-bottom:1px solid var(--b-filete)}
.b-pie-cols h4{margin:0 0 10px;font-size:12.5px;font-weight:600;color:var(--tinta)}
.b-pie-cols a,.b-pie-cols span{display:block;margin-bottom:9px}
.b-pie-cols .b-pie-logo img{height:22px;width:auto;margin-bottom:14px}
/* Oculto 20-10: sin la columna «La línea» el pie se queda con 4 columnas (en el móvil siguen siendo 2) */
@media (min-width:901px){.b-pie-cols:not(:has(>:nth-child(5))){grid-template-columns:repeat(4,minmax(0,1fr))}}
.b-pie-legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;padding-top:14px}
.b-pie-legal nav{display:flex;flex-wrap:wrap;gap:4px 16px}

/* ---------- piezas de siempre, en B (para no rehacer cada página de golpe) ---------- */
html[data-piel=b] .boton{border-radius:999px;font-weight:500}
html[data-piel=b] .lv-destacado,html[data-piel=b] .prod{border:0;border-radius:28px;background:var(--b-gris);box-shadow:none}
html[data-piel=b] .gris .lv-destacado,html[data-piel=b] .gris .prod{background:#fff}
html[data-piel=b] .lv-destacado figure{height:260px;background:none}
html[data-piel=b] .lv-destacado>div{padding:4px 30px 30px;text-align:left}
html[data-piel=b] .lv-destacado h4{font-size:24px;font-weight:600;letter-spacing:-.02em}
html[data-piel=b] .lv-destacado .lv-leer{font-size:17px;font-weight:400}
html[data-piel=b] .lv-destacado:hover,html[data-piel=b] .prod:hover{border:0;transform:translateY(-3px);box-shadow:0 18px 40px -24px rgba(21,40,61,.35)}
html[data-piel=b] .lv-testimonios .testimonio{border:0;border-radius:28px;background:#fff;box-shadow:none;padding:34px 32px;text-align:left}
html[data-piel=b] .lv-testimonios blockquote p{font-size:17px;line-height:1.55;color:var(--tinta)}
html[data-piel=b] .lv-testimonios blockquote b{color:var(--tinta)}
html[data-piel=b] .aviso{border-radius:22px;width:max-content;max-width:calc(100vw - 32px);text-align:center}   /* 21-10: los avisos largos (formularios que aún no envían) caben en el móvil */

/* ---------- móvil ---------- */
@media (max-width:900px){
  html[data-piel=b]{--b-menu:48px}   /* la barra del móvil, como la de Apple */
  .b-menu-in{gap:14px;padding:0 16px}
  .b-menu-lista,.b-menu-cajon,.b-menu-cortina{display:none}
  .b-menu-pedir{margin-left:auto;margin-right:0;font-size:14px}
  .b-menu-cuenta{display:none}   /* en el móvil va dentro del menú */
  .b-menu-boton{display:block}
  .b-menu-pedir{order:1}.b-menu-lupa{order:2;width:44px;margin:0 -6px 0 0}.b-menu-lupa svg{width:18px;height:18px}.b-menu-boton{order:3}
  .b-pie-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  html[data-piel=b] body{font-size:16px}
  .b-banda{--b-pt:56px}
  .b-banda,html[data-piel=b] main>.b-banda,html[data-piel=b] main>.b-banda:last-child{padding-left:20px;padding-right:20px}
  .b-mosaico{grid-template-columns:1fr;gap:10px;padding:10px}
  .b-tesela{min-height:0;padding-top:40px;border-radius:20px}
  .b-rejilla.dos,.b-rejilla.tres{grid-template-columns:1fr}
  .b-tarjeta{border-radius:24px}
  .b-texto{columns:1;margin-top:28px;font-size:16px}
  .b-cifras{grid-template-columns:1fr;gap:26px;text-align:center}
  .b-enlaces{gap:10px 26px}
  .b-barra nav a:not(.b-boton){display:none}
  .b-barra-in>b{font-size:17px}
}
@media (max-width:480px){.b-pie-cols{grid-template-columns:1fr 1fr;gap:18px}}
html[data-piel=b] .lv-destacado .lv-leer::after{content:"\00a0›"}
/* «Lo que destacamos» en las fichas (09-10): notas comerciales de notas-comerciales.js */
.nc-destacados .b-ancho{max-width:var(--b-ancho);margin:0 auto}
.nc-lista{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.nc-lista li{position:relative;padding:16px 18px 16px 44px;border-radius:18px;background:#F5F7FA;font-size:17px;line-height:1.45;color:var(--tinta)}
.nc-lista li::before{content:"";position:absolute;left:18px;top:23px;width:12px;height:12px;border-radius:50%;background:#E9B920}

/* Brochure oficial en las fichas (17-10): botón «Descargar brochure (PDF, X MB)» junto a la ficha técnica (brochures.js) */
.br-bloque{display:flex;flex-direction:column;align-items:center;gap:10px;margin:clamp(22px,3vw,30px) auto 0;padding:0 16px;text-align:center}
.br-enlace .br-icono{flex:none;width:16px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.br-enlace small{font-size:.8em;font-weight:400;opacity:.85;white-space:nowrap}
.b-boton.br-enlace{max-width:100%;text-align:center}
.br-nota{max-width:34em;margin:0;font-size:14px;line-height:1.45;color:var(--gris);text-wrap:pretty}

/* ---------- Aviso de carga del 3D (26-10, ficha sin imagen previa) ----------
   Mientras llega el 3D, el hueco se queda con el fondo del estudio y este aviso discreto: el texto y una raya fina que se
   mueve. Solo sale si tarda (a los 0,7 s), para que en una carga rápida no parpadee. Lo usan la ficha de producto
   (producto-b.js, .pb-carga) y la tipo Apple (equipo-base.js, .es-carga). */
.b-carga3d{display:inline-flex;flex-direction:column;align-items:center;gap:12px;font-size:13px;line-height:1.3;font-weight:500;color:var(--gris);
  animation:bCarga3d .5s var(--b-curva) .7s both}
.b-carga3d::after{content:"";width:72px;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,var(--azul),transparent) no-repeat var(--b-pista);
  background-size:40% 100%;animation:bCarga3dRaya 1.4s ease-in-out infinite}
@keyframes bCarga3d{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes bCarga3dRaya{from{background-position:-70% 0}to{background-position:170% 0}}
@media (prefers-reduced-motion:reduce){.b-carga3d{animation-duration:.01s;transform:none}.b-carga3d::after{animation:none;background:var(--b-pista)}}