/* ============================================================================
   sistema.css — Bloque 6. Sistema de diseño COMPARTIDO por wscover.es y
   toldobox.net (Grupo WS Cover S.L.U., mismo taller de Albox). Consume los tokens
   de tokens-base.css + tokens-{marca}.css — nunca un color/radio/sombra
   suelto aquí, todo por var(--token).

   Este fichero es BYTE-IDÉNTICO entre las webs que lo comparten (verificado
   por un script interno). Si hace falta una regla nueva de una sola marca,
   va en el CSS propio de esa web, nunca aquí.

   Basado en maqueta-wscover-v3.html + maqueta-toldobox-home.html (dirección) —
   unificados con nombres de clase comunes (antes .fcard/.pcard, ahora
   .tarjeta-familia; antes --cian/--acento, ahora var(--marca)).
   ============================================================================ */

/* — Reset — */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body { font-family: var(--sans); font-size: var(--texto-escala); line-height: 1.65; color: var(--tinta); background: var(--fondo); overflow-x: hidden; }
img, video { max-width: 100%; display: block; }
a { text-decoration: none; }
button { cursor: pointer; border: none; background: none; font: inherit; }
ul, ol { list-style: none; }
h1, h2, h3 { line-height: 1.12; letter-spacing: -.02em; font-weight: 800; }
/* Color y escala de titulares vía tokens de rol del tema: la base no decide
   de qué color es un h2. Una superficie oscura redefine --titular en su
   ámbito en vez de pelear contra esta regla por especificidad (el bug del
   configurador: titulares del tema claro a 1,70:1 sobre fondo oscuro). */
h2 { font-size: var(--titular-escala); color: var(--titular); }

/* La firma editorial: una palabra en cursiva serif de acento ("cubierta.", "a la sombra."). */
em.ac { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--marca); }

.sub { color: var(--gris); max-width: 60ch; font-size: 18px; }
.eyebrow { display: inline-block; font-size: 12.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--marca-secundaria); margin-bottom: 14px; }
section { padding: 76px 5vw; }
.wrap { max-width: 1180px; margin: 0 auto; }
a { color: var(--marca); }
:focus-visible { outline: 3px solid var(--marca-secundaria); outline-offset: 3px; }
/* CONTRASTE-CTA-001: el enlace de salto estaba en --marca sobre blanco (2,44:1). */
.skip { position: absolute; left: -999px; top: 8px; background: #fff; color: var(--marca-texto); padding: 8px 14px; border-radius: 8px; z-index: 99; }
.skip:focus { left: 8px; }

/* Aviso "pendiente" — visible SOLO en entorno de revisión, nunca en producción real (ver nota de uso al pie del fichero). */
.pend { display: inline-block; font-size: 10.5px; font-weight: 700; background: #FFF3CD; color: #8a6d00; border: 1px dashed #d8b500; border-radius: 5px; padding: 0 6px; vertical-align: middle; }

/* — Botones — */
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 15px 28px; border-radius: 12px; font-weight: 700; text-decoration: none; font-size: 16.5px; transition: transform .12s; }
.btn:hover { transform: translateY(-2px); }
/* CONTRASTE-CTA-001 (2026-09-16). Blanco sobre --marca daba **2,44:1**: la
   mitad del mínimo AA, en el botón de comprar de todo el sitio. Medido, no
   estimado. El cian de marca NO se toca —es la identidad y el fondo del
   botón sigue igual—: lo que cambia es la letra, que pasa a la tinta oscura
   y da **6,92:1**. Es exactamente lo que ya hacía el tema editorial en el
   botón del hero (editorial-2026.css:35, `color:#052028`), así que además
   unifica el sitio en vez de abrir una variante nueva.
   Mismo criterio que CONTRASTE-CABECERA-001 (31-08, confirmado por Florin).
   Este fichero es chrome COMPARTIDO con toldobox-web, y allí la cuenta sale
   igual: su --marca con blanco da 3,29:1 y con su tinta 5,13:1. Las dos
   marcas mejoran; ninguna empeora. Por eso el valor va en un token por
   marca (--marca-cta-texto) y no incrustado aquí: esta base compartida no
   puede llevar colores de marca, y hay un canario que lo vigila. */
.btn-p { background: var(--marca); color: var(--marca-cta-texto); box-shadow: 0 8px 22px color-mix(in srgb, var(--marca) 40%, transparent); }
.btn-s { background: transparent; color: var(--azul); border: 2px solid var(--azul); }
.btn-w { background: #25D366; color: #fff; }
.btn-sm { padding: 10px 18px; font-size: 14.5px; }

/* — Header + nav — */
/* CONTRASTE-CABECERA-001 (2026-08-31): dentro del configurador, el bundle
   React (src/publico/estilos/publico.css) redefine `--gris` en :root como
   alias del texto tenue del TEMA OSCURO (`--ws-texto-suave`, #94A3B0) —
   correcto para los componentes de esa app, que viven sobre fondo oscuro.
   Esta cabecera es compartida y SIEMPRE clara (--cabecera-fondo), así que
   heredaba ese alias por error: el subtítulo "GRUPO WSCOVER · ALBOX" caía
   a 2.18:1 (hace falta 4.5:1) — no era el mismo --gris que fijamos en
   :root arriba, era el que el propio configurador pisaba encima.
   Reafirmado aquí con más especificidad que cualquier :root, así que gana
   pise lo que pise: `--gris` vuelve a ser el gris claro de esta cabecera
   sin tocar el alias del configurador, que sigue siendo correcto donde
   vive. */
header.sitio { --gris: #5B6675; }
/* AUDIT-GPT W-01 (2026-09-09): la cabecera (y su botón de menú) va POR ENCIMA del menú móvil (z 90); antes el menú la tapaba y no se podía cerrar. */
header.sitio { position: sticky; top: 0; z-index: 100; background: var(--cabecera-fondo); backdrop-filter: blur(10px); border-bottom: 1px solid var(--linea); }
header.sitio.scrolled { box-shadow: 0 2px 12px var(--cabecera-sombra); }
.nav { max-width: 1240px; margin: 0 auto; display: flex; align-items: center; gap: 20px; padding: 12px 5vw; }
.logo { display: flex; align-items: center; gap: 9px; text-decoration: none; }
.logo .mark { width: 40px; height: 40px; border-radius: 9px; background: var(--azul); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 18px; overflow: hidden; }
.logo .mark img { width: 100%; height: 100%; object-fit: contain; }
.logo .txt { font-weight: 900; font-size: 20px; color: var(--azul); letter-spacing: -.01em; }
/* CONTRASTE-CABECERA-001 (2026-08-31, confirmado por Florin,
   docs/NEEDS_BUSINESS_CONFIRMATION.md §13): con --marca (#1CB3E3) el
   wordmark "COVER" contra --cabecera-fondo daba 2.06:1 (hace falta 3:1,
   es texto grande: 20px/900). Afecta a cualquier página que use el header
   por defecto de este fichero SIN un tema propio que lo tape — el
   configurador (no carga editorial-2026.css) y las páginas
   ws-editorial-simple (privacidad/cookies/gracias/aviso-legal). Las
   páginas ws-home/ws-product ya tienen su propio header oscuro con texto
   blanco (editorial-2026.css) y no se tocan aquí.
   --marca-secundaria (#1782A6, "azul medio del logo") da 4,20:1 — pasa con
   margen y conserva más del efecto bicolor original que --azul (el "WS"
   de al lado), que sería la alternativa más oscura. */
.logo .txt b { color: var(--marca-secundaria); }
.logo small { display: block; font-size: 9.5px; font-weight: 600; color: var(--gris); letter-spacing: .1em; }
nav ul { display: flex; gap: 20px; list-style: none; margin-left: auto; align-items: center; }
/* MENU-DESBORDA-001 (2026-09-12) — medido en el navegador a 1280 px, que es el
   ancho de portátil más común: el menú se salía 2 px y el documento crecía a lo
   ancho. Al añadir «Tienda» pasó de 2 px a 69 px y aparecía barra horizontal en
   TODAS las páginas. El menú no se recorta ni se oculta: se le deja apretar el
   hueco entre items cuando no cabe, que a 20 px fijos era lo que sobraba. */
@media (max-width: 1400px) { nav ul { gap: 14px; } }
@media (max-width: 1100px) { nav ul { gap: 10px; } }
/* Y si aun así no cabe, el menú BAJA A OTRA LÍNEA en vez de salirse de la
   página. Apretar el hueco solo da de sí hasta cierto punto; envolver no
   esconde ningún enlace y nunca deja barra horizontal, que es lo que no se
   puede tolerar en una web que se ve sobre todo en móvil. */
nav ul { flex-wrap: wrap; justify-content: flex-end; row-gap: 6px; }
nav a { color: var(--tinta); text-decoration: none; font-weight: 600; font-size: 15px; }
nav a.activo, nav a:hover { color: var(--marca); }
.tel { font-weight: 800; color: var(--azul); white-space: nowrap; }
.soc-header { display: flex; gap: 12px; align-items: center; }
.soc-header a { color: var(--gris); font-size: 18px; display: flex; }
.soc-header a:hover { color: var(--marca); }
.soc-header .off { opacity: .3; pointer-events: none; }
.lang { display: flex; gap: 5px; font-size: 12.5px; font-weight: 700; }
.lang span { padding: 3px 7px; border-radius: 7px; }
.lang .on { background: var(--azul); color: #fff; }
.lang .off { color: var(--gris); border: 1px solid var(--linea); }
.nav-burger { display: none; flex-direction: column; gap: 5px; padding: 8px; margin-left: auto; }
.nav-burger span { display: block; width: 22px; height: 2px; background: var(--azul); transition: all .25s; }
.nav-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity: 0; }
.nav-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mobile-menu { position: fixed; inset: 0; z-index: 90; background: var(--fondo); display: flex; flex-direction: column; gap: 4px; padding: 90px 6vw 40px; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .25s, visibility .25s; overflow-y: auto; }
.mobile-menu.open { opacity: 1; visibility: visible; pointer-events: all; }
.mobile-menu a { font-size: 22px; font-weight: 800; color: var(--azul); padding: 14px 0; border-bottom: 1px solid var(--linea); }
.mobile-menu .soc-header { margin-top: 20px; gap: 20px; font-size: 24px; }
@media (max-width: 920px) { nav ul li.hide { display: none; } .nav-burger { display: flex; } }

/* — Hero — */
.hero { position: relative; padding: 0; }
.hero-inner { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; padding: 60px 5vw 72px; }
.hero .tag { font-size: 14px; font-weight: 700; color: var(--marca-secundaria); letter-spacing: .04em; }
.hero h1 { font-size: clamp(38px, 6vw, 68px); color: var(--azul); margin: 14px 0 20px; line-height: 1.04; }
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 28px; }
.hero-foto { border-radius: var(--radio); box-shadow: var(--sombra); min-height: 420px; overflow: hidden; position: relative; }
.hero-foto img, .hero-foto video { width: 100%; height: 100%; object-fit: cover; min-height: 420px; }
.badges { display: flex; gap: 30px; flex-wrap: wrap; margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--linea); }
.badge b { display: block; font-size: 26px; color: var(--azul); font-weight: 900; line-height: 1; }
.badge span { font-size: 13px; color: var(--gris); }
@media (max-width: 900px) { .hero-inner { grid-template-columns: 1fr; gap: 30px; } }

/* — Sección editorial 2 columnas ("el problema real") —
   Paleta vía tokens --inverso-* del tema de cada marca (FASE A): la base
   solo describe la estructura de la banda, no de qué color es. */
.problema { background: var(--inverso-fondo); color: var(--inverso-texto); }
.problema .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.problema h2 { color: var(--inverso-titulo); }
.problema p { color: var(--inverso-suave); margin-top: 14px; }
.problema .foto { border-radius: var(--radio); min-height: 300px; overflow: hidden; }
.problema .foto img { width: 100%; height: 100%; object-fit: cover; min-height: 300px; }
@media (max-width: 820px) { .problema .wrap { grid-template-columns: 1fr; } }

/* — Grid de tarjetas de familia/producto (4 columnas) — */
.sol-head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 16px; }
.tarjetas-familia { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 36px; }
.tarjeta-familia { background: #fff; border-radius: var(--radio); box-shadow: var(--sombra); overflow: hidden; display: flex; flex-direction: column; transition: transform .18s, box-shadow .18s; }
.tarjeta-familia:hover { transform: translateY(-5px); box-shadow: var(--sombra-elev); }
.tarjeta-familia .ph { aspect-ratio: 4/3; overflow: hidden; }
.tarjeta-familia .ph img { width: 100%; height: 100%; object-fit: cover; }
.tarjeta-familia .bd { padding: 18px 20px 22px; display: flex; flex-direction: column; flex: 1; }
.tarjeta-familia .num { font-size: 12px; font-weight: 800; color: var(--marca-texto); letter-spacing: .1em; }
.tarjeta-familia h3 { color: var(--azul); font-size: 20px; margin: 6px 0 8px; }
.tarjeta-familia p { font-size: 14px; color: var(--gris); flex: 1; }
.tarjeta-familia .precio { font-weight: 800; color: var(--azul); margin: 12px 0 4px; font-size: 15px; }
.tarjeta-familia .go { color: var(--marca-texto); font-weight: 800; text-decoration: none; font-size: 14.5px; margin-top: 4px; }
@media (max-width: 960px) { .tarjetas-familia { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .tarjetas-familia { grid-template-columns: 1fr; } }

/* — Tienda de medidas estándar (escaparate) — */
.tienda { background: var(--crema); }
.tienda-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 30px; }
.tcard { background: #fff; border-radius: 14px; box-shadow: var(--sombra); padding: 22px; text-align: center; }
.tcard .med { font-size: 26px; font-weight: 900; color: var(--azul); }
.tcard .li { display: flex; justify-content: space-between; padding: 9px 0; border-top: 1px solid var(--linea); font-size: 14.5px; margin-top: 12px; }
.tcard .li b { color: var(--azul); }
.tcard .env { font-size: 12px; color: var(--gris); margin-top: 8px; }
.tcard .btn { margin-top: 14px; width: 100%; justify-content: center; font-size: 15px; padding: 12px; }
@media (max-width: 820px) { .tienda-grid { grid-template-columns: 1fr; } }

/* — Prueba social (stats + reseñas) — */
.social-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; text-align: center; margin-top: 10px; }
.stat b { display: block; font-size: 40px; color: var(--azul); font-weight: 900; line-height: 1; }
.stat span { font-size: 13.5px; color: var(--gris); }
.reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 40px; }
.rev { background: var(--fondo); border-radius: var(--radio); padding: 22px; font-size: 14.5px; }
.rev .st { color: #F5B301; letter-spacing: 2px; font-size: 15px; }
.rev p { color: var(--tinta); margin: 10px 0; font-style: italic; }
.rev b { color: var(--azul); font-size: 14px; }
.rev span { color: var(--gris); font-size: 12.5px; }
@media (max-width: 820px) { .social-stats { grid-template-columns: repeat(2, 1fr); gap: 26px; } .reviews { grid-template-columns: 1fr; } }

/* — Fabricante / taller (2 columnas + foto o vídeo) — */
.fabricante { background: var(--crema); }
.fabricante .wrap-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; }
.fabricante blockquote { border-left: 4px solid var(--marca); padding-left: 18px; font-size: 19px; color: var(--azul); font-weight: 700; margin: 16px 0; }
.fabricante .media { border-radius: var(--radio); overflow: hidden; min-height: 320px; box-shadow: var(--sombra); position: relative; }
.fabricante .media video, .fabricante .media img { width: 100%; height: 100%; object-fit: cover; min-height: 320px; }
.porque { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 34px; }
.pq { background: #fff; border-radius: 14px; padding: 22px; box-shadow: var(--sombra); }
.pq .ic { font-size: 26px; }
.pq h3 { color: var(--azul); font-size: 16.5px; margin: 8px 0 4px; }
.pq p { font-size: 13.5px; color: var(--gris); }
@media (max-width: 900px) { .fabricante .wrap-2 { grid-template-columns: 1fr; } .porque { grid-template-columns: repeat(2, 1fr); } }

/* — Proceso (3 pasos numerados) — */
.pasos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 32px; }
.paso { position: relative; background: #fff; border-radius: var(--radio); box-shadow: var(--sombra); padding: 26px; }
.paso .n { font-size: 42px; font-weight: 900; color: var(--crema); line-height: 1; position: absolute; top: 14px; right: 20px; }
.paso h3 { color: var(--azul); font-size: 19px; margin-bottom: 8px; }
.paso p { font-size: 14px; color: var(--gris); }
@media (max-width: 820px) { .pasos { grid-template-columns: 1fr; } }

/* — Radar / zona de servicio (WS Cover) — */
.zona { background: var(--inverso-fondo); color: var(--inverso-texto); }
.zona h2 { color: var(--inverso-titulo); }
.zona-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; }
.zona-list { columns: 2; font-size: 15px; line-height: 2; font-weight: 600; color: var(--inverso-suave); margin-top: 16px; }
.radar-box { position: relative; aspect-ratio: 1; max-width: 460px; width: 100%; margin: 0 auto; }
.beam { transform-origin: 50% 50%; animation: girar 8s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }
.town { animation: brillo 8s linear infinite; }
@keyframes brillo { 0%, 6% { opacity: 1; } 14%, 100% { opacity: .4; } }
.town circle { fill: var(--radar-punto); } .town text { fill: var(--inverso-suave); font-size: 8px; font-weight: 700; }
@media (max-width: 900px) { .zona-wrap { grid-template-columns: 1fr; } }

/* — Cruce entre marcas (WS Cover ↔ Toldobox) — */
.cruce { background: var(--inverso-fondo); color: var(--inverso-texto); }
.cruce h2 { color: var(--inverso-titulo); }
.cruce .card { display: flex; gap: 22px; align-items: center; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.15); border-radius: var(--radio); padding: 26px; margin-top: 22px; flex-wrap: wrap; }
.cruce .card .ic { font-size: 40px; }
.cruce .card p { color: var(--inverso-suave); flex: 1; min-width: 240px; }

/* — CTA final — */
.cta { background: linear-gradient(135deg, var(--inverso-fondo), color-mix(in srgb, var(--inverso-fondo) 70%, var(--marca))); color: var(--inverso-titulo); text-align: center; }
.cta h2 { color: var(--inverso-titulo); }
.cta .btn { margin-top: 8px; }
.cta-badges { display: flex; gap: 24px; justify-content: center; flex-wrap: wrap; margin-top: 22px; font-size: 14px; color: var(--inverso-suave); font-weight: 600; }

/* — Footer — */
footer.sitio { background: var(--pie-fondo); color: var(--pie-texto); font-size: 14px; padding: 52px 5vw 28px; }
.fcols { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr 1.3fr; gap: 30px; }
/* Un token inrompible (p. ej. un email) no debe empujar su columna fuera del
   viewport móvil: la pista puede encoger y la palabra parte solo si no queda
   otra. (Auditoría post-Inter: el email del pie desbordaba 7px a 375px.) */
.fcols > * { min-width: 0; }
footer.sitio a, footer.sitio p, footer.sitio h4 { overflow-wrap: anywhere; }
footer.sitio a { color: var(--pie-enlace); text-decoration: none; display: block; padding: 2px 0; }
footer.sitio h4 { color: var(--pie-titulo); font-size: 14px; margin-bottom: 10px; }
footer.sitio .soc-header a { display: inline-flex; color: var(--pie-enlace); }
.fin { max-width: 1180px; margin: 28px auto 0; border-top: 1px solid var(--pie-linea); padding-top: 16px; font-size: 12.5px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
@media (max-width: 820px) { .fcols { grid-template-columns: 1fr 1fr; } }
.wa-float { position: fixed; right: 18px; bottom: 18px; z-index: 60; width: 56px; height: 56px; border-radius: 50%; background: #25D366; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 26px; text-decoration: none; box-shadow: 0 8px 24px rgba(0,0,0,.28); }

/* — Galería + lightbox (reutilizable en todas las páginas con fotos) — */
.galeria-filtros { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0; }
.galeria-filtro { padding: 8px 20px; border-radius: 999px; border: 1px solid var(--linea); background: transparent; color: var(--gris); font-weight: 600; font-size: 13.5px; transition: all .18s; }
.galeria-filtro:hover { border-color: var(--marca); color: var(--marca); }
.galeria-filtro.activo { background: var(--marca); border-color: var(--marca); color: #fff; }
.galeria-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.galeria-item { position: relative; aspect-ratio: 4/3; border-radius: var(--radio); overflow: hidden; cursor: zoom-in; border: 1px solid var(--linea); }
.galeria-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.galeria-item:hover img { transform: scale(1.06); }
.galeria-item .tag { position: absolute; bottom: 10px; left: 10px; padding: 4px 12px; border-radius: 999px; background: var(--chip-foto-fondo); backdrop-filter: blur(6px); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #fff; }
@media (max-width: 1100px) { .galeria-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px) { .galeria-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } }

.lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(10,20,25,.96); display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity .25s; }
/* LIGHTBOX-FOCO-001 (2026-09-16). El lightbox CERRADO seguía en el orden de
   tabulación: `opacity:0` y `pointer-events:none` lo hacen invisible e
   inclicable, pero NO lo sacan del foco. Comprobado en el navegador sobre el
   paquete: tras `focus()` el `document.activeElement` era el botón «Cerrar».
   Un usuario de teclado caía en tres botones invisibles, dentro de un
   contenedor `aria-hidden="true"` (conflicto ARIA, WCAG 4.1.2), que además no
   hacían nada. Afecta a la portada, las 3 páginas de producto y trabajos.
   `visibility:hidden` sí los saca, y se restituye al abrir. Se conserva la
   transición porque `visibility` es animable por pasos. */
.lightbox { visibility: hidden; transition: opacity .25s, visibility 0s linear .25s; }
.lightbox[aria-hidden="false"] { opacity: 1; pointer-events: all; visibility: visible; transition: opacity .25s, visibility 0s; }
.lightbox img { max-width: min(90vw, 1100px); max-height: 85vh; border-radius: 8px; box-shadow: var(--sombra-elev); }
.lightbox-cerrar, .lightbox-nav { position: absolute; border-radius: 50%; background: rgba(255,255,255,.1); color: #fff; display: flex; align-items: center; justify-content: center; }
.lightbox-cerrar { top: 20px; right: 20px; width: 44px; height: 44px; font-size: 26px; }
.lightbox-nav { top: 50%; transform: translateY(-50%); width: 52px; height: 52px; font-size: 30px; }
.lightbox-cerrar:hover, .lightbox-nav:hover { background: rgba(255,255,255,.2); }
.lightbox-prev { left: 20px; } .lightbox-next { right: 20px; }
@media (max-width: 640px) { .lightbox-nav { width: 40px; height: 40px; font-size: 22px; } .lightbox-prev { left: 6px; } .lightbox-next { right: 6px; } }

/* — Protección de fotos (disuasoria, no infalible — ver aviso en sistema.js) — */
.foto-protegida { position: relative; -webkit-user-select: none; user-select: none; -webkit-user-drag: none; }
.foto-protegida img { pointer-events: none; }
.foto-protegida::after {
  content: "© Grupo WS Cover S.L.U. — imágenes sujetas a derechos de autor";
  position: absolute; left: 0; right: 0; bottom: 0;
  font-size: 10px; color: rgba(255,255,255,.85); background: var(--velo-copyright);
  text-align: center; padding: 3px 6px; opacity: 0; transition: opacity .2s; pointer-events: none;
}
.foto-protegida:hover::after, .foto-protegida:focus-within::after { opacity: 1; }

/* — Scroll reveal + contadores (JS añade/lee estas clases, ver sistema.js) — */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1); }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-1 { transition-delay: .1s; } .reveal-2 { transition-delay: .2s; } .reveal-3 { transition-delay: .3s; } .reveal-4 { transition-delay: .4s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .beam, .town { animation: none !important; opacity: 1 !important; }
  .btn:hover, .tarjeta-familia:hover { transform: none !important; }
}

/* — Formulario de contacto/lead genérico — consumido por cualquier
   <form data-lead-form="tipo"> vía sistema.js initFormularios(). — */
.form-contacto { display: grid; gap: 18px; max-width: 560px; }
.form-contacto label { display: grid; gap: 6px; font-size: 14.5px; font-weight: 700; color: var(--tinta); }
.form-contacto input, .form-contacto textarea, .form-contacto select {
  font: inherit; font-size: 16px; padding: 13px 16px; border-radius: 10px;
  border: 1.5px solid var(--linea); background: var(--blanco); color: var(--tinta);
}
.form-contacto input:focus, .form-contacto textarea:focus, .form-contacto select:focus {
  outline: none; border-color: var(--marca);
}
.form-contacto textarea { resize: vertical; min-height: 110px; }
.form-contacto .campo-doble { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-contacto .campo-rgpd { display: flex; flex-direction: row; align-items: flex-start; gap: 10px; font-size: 13px; font-weight: 400; color: var(--gris); }
.form-contacto .campo-rgpd input { width: auto; margin-top: 3px; }
.form-contacto button[type="submit"] { justify-self: start; }
.form-contacto button[type="submit"]:disabled { opacity: .6; cursor: wait; transform: none; }
/* Honeypot anti-spam: invisible para humanos, visible para bots que rellenan todo. */
.form-contacto .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 640px) {
  .form-contacto .campo-doble { grid-template-columns: 1fr; }
}

/* — Foto pendiente: caja honesta en vez de una imagen de stock/inventada,
   para huecos de producto sin foto real todavía (p. ej. Toldobox, Bloque 3).
   Hereda el mismo tamaño que .ph/.foto (aspect-ratio del contenedor padre). — */
.ph-pendiente, .foto-pendiente {
  width: 100%; height: 100%; min-height: 160px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  background: repeating-linear-gradient(135deg, var(--crema, var(--fondo)) 0 12px, var(--linea) 12px 13px);
  border: 1.5px dashed var(--marca-secundaria); border-radius: var(--radio);
  color: var(--gris); font-size: 13px; font-weight: 600; text-align: center; padding: 16px;
}
.ph-pendiente .ic { font-size: 26px; opacity: .6; }

/* Nota de uso — .pend: visible en todas las páginas hasta que se cierre
   el hueco correspondiente (foto/dato/URL). Se retira caso a caso cuando
   cada pendiente concreto se resuelve, nunca en bloque. */

/* ── Iconos SVG inline (sustituyen a los emojis) ────────────────────────────
   Un emoji se dibuja distinto en cada sistema y no toma el color de la marca;
   estos SVG heredan `currentColor` y se alinean con el texto que acompañan. */
.ws-ico { display: inline-block; vertical-align: -0.14em; flex: none; }
/* Dentro de un círculo/badge de icono ocupan casi todo el hueco. */
.ic .ws-ico, .pq .ws-ico { width: 1.6em; height: 1.6em; vertical-align: middle; }
/* En los enlaces de redes, tamaño uniforme y transición suave al pasar. */
a[aria-label] > .ws-ico { width: 1.15em; height: 1.15em; transition: transform .16s ease, opacity .16s ease; }
a[aria-label]:hover > .ws-ico { transform: translateY(-1px); opacity: .85; }

/* ── Selector de idioma (mismo patrón que el configurador) ──────────────────
   Antes era un enlace de texto suelto que no parecía un selector ni marcaba
   el idioma activo. Banderas en SVG, no emoji: Windows no las dibuja. */
.ws-lang { display: inline-flex; align-items: center; gap: 2px; padding: 3px;
  border-radius: 999px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); }
.ws-lang a { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px;
  border-radius: 999px; text-decoration: none; font-size: 12.5px; font-weight: 700;
  letter-spacing: .03em; line-height: 1; color: rgba(255,255,255,.78);
  transition: background .16s ease, color .16s ease; }
.ws-lang a:hover { background: rgba(255,255,255,.16); color: #fff; }
.ws-lang a.activo { background: #fff; color: var(--azul); box-shadow: 0 1px 3px var(--pastilla-sombra); }
.ws-lang a svg { border-radius: 2px; display: block; flex: none; }
.ws-lang a:not(.activo) svg { opacity: .6; }
.ws-lang a:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }
/* Sobre fondo claro (cabeceras blancas) hace falta invertir el contraste. */
.cab-clara .ws-lang, .header-light .ws-lang { background: var(--pastilla-clara-fondo); border-color: var(--linea); }
.cab-clara .ws-lang a, .header-light .ws-lang a { color: var(--gris); }
.cab-clara .ws-lang a.activo, .header-light .ws-lang a.activo { background: #fff; color: var(--azul); }
@media (max-width: 640px) { .ws-lang a { padding: 7px 10px; font-size: 13px; } }

/* ── Badges de confianza: de cifras sueltas a sellos ────────────────────────
   Los datos ya estaban (4,9★, reseñas, EN 17645…) pero se leían como texto
   corrido. Como sello se reconocen de un vistazo, que es su función: dar
   confianza antes de que el cliente decida pedir presupuesto.
   No se añade ningún dato nuevo — solo se presenta mejor lo que ya había. */
.badges { gap: 14px; align-items: stretch; }
.badge {
  display: flex; flex-direction: column; justify-content: center; gap: 3px;
  background: var(--blanco); border: 1px solid var(--linea);
  border-radius: 14px; padding: 12px 16px; min-width: 132px;
  box-shadow: 0 2px 8px var(--sombra-tarjeta);
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.badge:hover { box-shadow: 0 10px 24px var(--sombra-tarjeta-hover); transform: translateY(-2px); }
.badge b { font-size: 22px; letter-spacing: -.01em; }
.badge span { font-size: 12.5px; line-height: 1.3; }
/* El badge de Google es un enlace al perfil real: si presume de reseñas, que
   se puedan comprobar en un clic. */
a.badge { text-decoration: none; color: inherit; }
a.badge:hover { border-color: var(--azul); }
a.badge:focus-visible { outline: 2px solid var(--azul); outline-offset: 3px; }
.badge-google-cab { display: flex; align-items: center; gap: 7px; }
.badge-google-cab .ws-ico { width: 1.05em; height: 1.05em; }
@media (max-width: 640px) {
  .badges { gap: 10px; }
  .badge { min-width: 0; flex: 1 1 calc(50% - 10px); padding: 11px 13px; }
  .badge b { font-size: 19px; }
}

/* Dentro del menú móvil, sus reglas de enlace (display:block, padding:0)
   ganaban por especificidad y dejaban el selector estirado a todo el ancho y
   con 17 px de alto. Se refuerza aquí para que conserve su forma de pastilla
   y un área de toque cómoda. */
.mobile-menu .ws-lang { display: inline-flex; width: auto; margin: 6px 0 2px; }
.mobile-menu .ws-lang a {
  display: inline-flex; width: auto; padding: 8px 12px; margin: 0;
  border-bottom: none; min-height: 40px; box-sizing: border-box;
}

/* ADV-17: cierre visible del menú móvil (el menú cubre la cabecera). */
.mobile-menu .menu-cerrar { position: absolute; top: 14px; right: 5vw; width: 44px; height: 44px; border: 1px solid var(--linea); border-radius: 12px; background: var(--fondo); color: var(--azul); font-size: 26px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; }
.mobile-menu .menu-cerrar:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; }
/* ADV-13: destino sin traducción publicada — se avisa, no se disimula. */
.lang-nota { font-size: .82em; opacity: .75; font-weight: 500; }