/* ============================================================
   comun.css — piezas compartidas por TODAS las páginas (ES y EN)
   16-oct-2026 · versión bilingüe · 19-oct-2026 · rediseño fase 1 (D2-D5).
   - Tipografías propias (D5): Archivo Black (títulos), Archivo (texto), IBM Plex Mono (medidas).
     Servidas desde /fuentes, subconjunto latino en woff2. Sale la tipografía de texto anterior y sale Google Fonts.
   - Botón de acción ÚNICO (D3): negro con texto blanco. WhatsApp y «ver opciones» = secundario con borde (D4).
   - Selector de idioma ES | EN (lleva a la gemela de la página)
   - Páginas de contenido (.pagina): las 3 páginas de búsqueda en ES y EN
   Se enlaza DESPUÉS de producto.css (o de portada.css).
   ============================================================ */

/* ---------- tipografías (rangos de peso declarados: el navegador no inventa negritas) ---------- */
@font-face{font-family:"Archivo Black";src:url("fuentes/ArchivoBlack-Regular.woff2?v=1019a") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Archivo";src:url("fuentes/Archivo-Regular.woff2?v=1019a") format("woff2");font-weight:100 550;font-style:normal;font-display:swap}
@font-face{font-family:"Archivo";src:url("fuentes/Archivo-Bold.woff2?v=1019a") format("woff2");font-weight:551 900;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("fuentes/IBMPlexMono-Regular.woff2?v=1019a") format("woff2");font-weight:100 500;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("fuentes/IBMPlexMono-SemiBold.woff2?v=1019a") format("woff2");font-weight:501 900;font-style:normal;font-display:swap}

/* ---------- botones del sistema (D3/D4) ---------- */
.btn-k{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:52px;padding:0 26px;border-radius:999px;background:#1A1A1A;color:#fff;border:2.5px solid #1A1A1A;font-family:"Archivo",Arial,sans-serif;font-weight:700;font-size:1rem;letter-spacing:0;text-decoration:none;white-space:nowrap;cursor:pointer;box-shadow:none;transition:transform .15s}
.btn-k:hover{transform:translateY(-2px)}
.btn-o{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:52px;padding:0 24px;border-radius:999px;background:transparent;color:#1A1A1A;border:2.5px solid #1A1A1A;font-family:"Archivo",Arial,sans-serif;font-weight:700;font-size:1rem;letter-spacing:0;text-decoration:none;white-space:nowrap;cursor:pointer;box-shadow:none;transition:background .15s}
.btn-o:hover{background:rgba(26,26,26,.08)}
.btn-k svg,.btn-o svg{width:20px;height:20px;flex-shrink:0}
.btn-o svg{fill:currentColor}

/* ---------- selector de idioma ---------- */
.lang-sw{display:inline-flex;align-items:center;gap:2px;border:2px solid #1A1A1A;border-radius:999px;padding:2px;background:#fff;flex-shrink:0}
.lang-sw a,.lang-sw span{display:inline-flex;align-items:center;justify-content:center;min-width:48px;min-height:48px;border-radius:999px;font-weight:800;font-size:.78rem;letter-spacing:.08em;color:#1A1A1A}
.lang-sw a:hover{text-decoration:underline;text-underline-offset:3px}
.lang-sw [aria-current]{background:#1A1A1A;color:#fff}
@media(max-width:760px){
  .lang-sw{border:none;padding:0;background:transparent}
  /* en el teléfono sólo se ve el OTRO idioma: un botón de 48 px, no dos */
  .lang-sw [aria-current]{display:none}
  .lang-sw a{min-height:48px;border:2px solid #1A1A1A;background:#fff}
}

/* ---------- portada: «cerca de ti» (enlaza las 3 páginas de búsqueda) ---------- */
.cerca{margin:0 0 18px}
.cerca h3{font-size:1.05rem;margin-bottom:10px}
.cerca ul{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0}
.cerca a{display:inline-flex;align-items:center;min-height:48px;padding:10px 16px;border:1.5px solid #ECEDF1;border-radius:12px;background:#F6F7F9;font-weight:700;font-size:.86rem;color:#14151A}
.cerca a:hover{border-color:#1A1A1A}
@media(max-width:520px){.cerca ul{flex-direction:column}.cerca a{width:100%}}

/* ---------- PÁGINAS DE CONTENIDO (.pagina) ----------
   Las de producto viven en una ventana fija de 100vh con scroll interno. Una página
   de búsqueda es un documento largo: aquí la ventana se abre y la página fluye. */
body.pagina{overflow:auto;height:auto}
.pagina .shell{height:auto;min-height:100vh}
.pagina .app{display:block}
.pagina .stage{align-items:flex-start}
.pagina .sidebar{position:sticky;top:14px;height:calc(100vh - 150px);min-height:420px}
.pagina .canvas{overflow:visible;display:block}
.doc{padding:6px 34px 34px;max-width:880px}
.doc h1{font-size:clamp(1.9rem,3.4vw,2.7rem);letter-spacing:-.035em;margin:10px 0 8px}
.doc .linea{display:inline-block;font-weight:800;font-size:.8rem;letter-spacing:.04em;color:#1A1A1A;background:#00AEEF;border-radius:999px;padding:6px 12px;margin-bottom:16px}
.doc .lead{font-size:1.04rem;line-height:1.6;color:#30343c;max-width:68ch}
.doc h2{font-size:1.45rem;margin:34px 0 12px;padding-top:18px;border-top:1px solid #ECEDF1}
.doc h3{font-size:1.12rem;margin-bottom:6px}
.doc p{line-height:1.6;color:#30343c}
.doc ul,.doc ol{line-height:1.6;color:#30343c}
.acciones{display:flex;gap:10px;flex-wrap:wrap;margin:20px 0 4px}
.acciones .btn{min-height:48px;padding:12px 22px;font-size:.84rem;letter-spacing:.04em}
.btn-wa{background:transparent;color:#1A1A1A;border:2.5px solid #1A1A1A;box-shadow:none}
.btn-wa:hover{background:rgba(26,26,26,.08)}
.btn-tel{background:#fff;border:1.5px solid #dde0e7;color:#14151A}
.btn-tel:hover{border-color:#1A1A1A}
/* tarjeta de producto dentro de la página */
.prod{display:grid;grid-template-columns:200px 1fr;gap:20px;align-items:start;border:1px solid #ECEDF1;border-radius:16px;padding:18px;margin-bottom:14px;background:#fff}
.prod picture,.prod img{display:block;width:100%;height:auto;border-radius:12px;background:#F6F7F9}
.prod .nota-img{font-size:.7rem;color:#5f6570;margin-top:6px;text-align:center}
.prod ul{margin:8px 0 10px 18px}
.prod .precio{font-weight:700;color:#14151A;margin:6px 0 8px}
.prod .precio b,.doc .precio-dato{font-family:var(--display);font-weight:900}
.prod .ir{display:inline-flex;align-items:center;min-height:48px;font-weight:800;color:#1A1A1A;text-decoration:underline;text-underline-offset:2px}
.prod .ir:hover{text-decoration:underline}
.tambien{margin-top:6px}
.tambien a,.doc p a,.doc li a,.faq a{color:#1A1A1A;font-weight:700;text-decoration:underline;text-underline-offset:2px}
.pasos{counter-reset:p;list-style:none;margin:0;padding:0}
.pasos li{counter-increment:p;position:relative;padding:10px 0 10px 42px;border-bottom:1px solid #ECEDF1}
.pasos li:last-child{border-bottom:0}
.pasos li::before{content:counter(p);position:absolute;left:0;top:9px;width:28px;height:28px;border-radius:50%;background:#1A1A1A;color:#fff;display:grid;place-items:center;font-weight:800;font-size:.8rem;font-family:var(--display)}
.tax{font-size:.86rem;color:#5f6570;margin-top:10px}
.faq{margin:0}
.faq dt{font-family:var(--display);font-weight:900;font-size:1.02rem;letter-spacing:-.02em;margin-top:18px}
.faq dd{margin:6px 0 0;line-height:1.6;color:#30343c}
.cierre{margin-top:34px;padding:24px;border-radius:18px;background:#101012;color:#fff}
.cierre h2{border:0;margin:0 0 6px;padding:0;color:#fff;font-size:1.4rem}
.cierre p{color:#d4d7de}
.cierre .btn-tel{background:transparent;color:#fff;border-color:#4a4d57}
.cierre .btn-tel:hover{border-color:#fff;color:#fff}
/* Control 19-oct (R1): el secundario con borde negro (.btn-wa, .btn-o) dentro de un contenedor OSCURO quedaba negro sobre negro
   (1,09:1 en el cierre de las 6 páginas de búsqueda). En todo fondo oscuro del sitio va la variante clara: borde y texto blancos.
   Contenedores oscuros con fondo propio: .cierre (#101012), .sidebar (#101012), .p-campo-k y .p-guia (#1A1A1A).
   Si se agrega otro bloque oscuro que pueda llevar un botón secundario, va en esta lista. */
.cierre .btn-wa,.cierre .btn-o,.sidebar .btn-wa,.sidebar .btn-o,.p-campo-k .btn-wa,.p-campo-k .btn-o,.p-guia .btn-o,.p-otro .btn-o{background:transparent;color:#fff;border:2.5px solid #fff}
.cierre .btn-wa:hover,.cierre .btn-o:hover,.sidebar .btn-wa:hover,.sidebar .btn-o:hover,.p-campo-k .btn-wa:hover,.p-campo-k .btn-o:hover{background:rgba(255,255,255,.12)}
/* pie de las páginas nuevas: 4 líneas (ARQUITECTURA §2.2), sin calle */
.pie-doc{flex-direction:column;gap:2px;font-size:.72rem;line-height:1.55}
.pie-doc span{display:block}
@media(max-width:760px){
  .pagina .shell{padding-bottom:24px}
  .doc{padding:6px 18px 26px}
  .prod{grid-template-columns:1fr;padding:14px}
  .prod picture{max-width:260px}
  .pie-doc{font-size:.7rem}
}

/* ---------- PRODUCTO EN INGLÉS: intro + «good to know» + preguntas dentro del configurador ---------- */
.extra{margin-top:8px;padding-top:14px;border-top:1px dashed #ECEDF1}
.extra h2{font-size:1rem;margin:14px 0 8px}
.extra ul{margin:0 0 6px 18px;font-size:.86rem;line-height:1.55;color:#30343c}
.extra .faq dt{font-size:.92rem;margin-top:12px}
.extra .faq dd{font-size:.86rem}
.extra a{color:#1A1A1A;font-weight:700;text-decoration:underline;text-underline-offset:2px}
/* medidas rápidas del banner como <button> (se pueden tocar con el teclado, W17) */
button.chip{background:#fff;color:#14151A;font-family:var(--body);font-size:.76rem;font-weight:600;min-height:48px;min-width:56px}
/* foto del producto como <picture> (WebP + JPG) dentro del recuadro de vista previa */
.ghero picture{position:absolute;inset:0;z-index:3}
.ghero picture img{width:100%;height:100%;object-fit:cover}
.prod.sin-foto{grid-template-columns:1fr}
/* ficha sin foto (16-oct, vuelta 2): la única foto disponible traía texto en español o datos falsos */
.prod .sin-foto{aspect-ratio:4/3;border-radius:12px;background:linear-gradient(135deg,var(--magenta),var(--cyan) 58%,var(--yellow));display:grid;place-items:center}
.prod .sin-foto svg{width:56px;height:56px;stroke:#fff;fill:none;stroke-width:1.6}
@media(max-width:760px){.prod .sin-foto{max-width:260px}}
/* páginas EN sin cotizador (letras 3D, señalética): igual que el bloque propio de sus gemelas ES */
.pedir{margin-top:6px}
.pedir h2{font-family:var(--display);font-size:1.02rem;font-weight:900;margin-bottom:10px}
.pedir ol{list-style:none;counter-reset:q;margin:0;padding:0}
.pedir li{counter-increment:q;position:relative;padding:9px 0 9px 34px;font-size:.9rem;border-bottom:1px solid var(--line);color:#3d4048}
.pedir li:last-child{border-bottom:0}
.pedir li::before{content:counter(q);position:absolute;left:0;top:8px;width:22px;height:22px;border-radius:50%;background:#1A1A1A;color:#fff;display:grid;place-items:center;font-size:.72rem;font-weight:800;font-family:var(--display)}
.pedir .aviso{margin-top:14px;font-size:.8rem;color:var(--gray);line-height:1.5}
/* ---------- objetivos táctiles y desbordes que medía el banco (16-oct) ---------- */
/* el botón de cotizar de la barra superior quedaba en 40 px en el teléfono (W9) */
@media(max-width:760px){.top-right .btn{min-height:48px}}
/* la miga de pan: 48 px de alto tocable sin cambiar el alto de la fila (margen negativo) */
.crumb a{display:inline-flex;align-items:center;justify-content:center;min-height:48px;min-width:48px;margin:-15px 0}
/* teléfono y accesos directos de la cabecera de escritorio */
.top-right .phone,.qkey{min-height:48px}
/* portada a 1024 px: la columna principal empujaba 26-30 px de scroll horizontal (min-width:auto de flex) */
.main{min-width:0}
/* portada entre 981 y 1100 px: la barra de estado no cabía y sacaba COTIZAR por la derecha (26-30 px de scroll).
   Las tintas son decorativas: se ocultan en ese tramo, como ya se ocultan en el teléfono */
@media(min-width:761px) and (max-width:1100px){.statusbar .sb-tintas{display:none}}
/* iPad vertical (768): en las fichas ES con PEDIR, los mínimos de 150-158 px de PEDIR y COTIZAR sacaban COTIZAR 5-23 px por la derecha (control 19-oct). En ese tramo se achican a su contenido */
@media(min-width:761px) and (max-width:900px){.statusbar .sb-cot,.statusbar .sb-pedir{min-width:0;padding-left:14px;padding-right:14px}}
/* las fotos verticales (menú sintético, hablador) se comían media pantalla del teléfono: todas a 4:3 */
.prod img{aspect-ratio:4/3;object-fit:cover}

/* ---------- fichas de producto (fase 1, solo sistema): un botón primario negro (D3) ----------
   «PEDIR» (lo agrega sitio.js) es el primario. Donde hay PEDIR, «COTIZAR» por WhatsApp pasa a secundario con borde (D4).
   Banners, letras corpóreas y señalética no tienen PEDIR: ahí COTIZAR es el primario y queda negro. */
.sb-cot{background:#1A1A1A;color:#fff;border:2.5px solid #1A1A1A}
.sb-cot .ring{border-color:currentColor}.sb-cot .ring svg{fill:currentColor}
body.con-pedir .sb-cot{background:#fff;color:#1A1A1A}
.btn-mag{background:#1A1A1A;color:#fff}

/* ---------- W33 · un solo sistema de titulares (control 19-oct, R4) ----------
   El sistema aprobado (D5) pone los títulos en Archivo Black y MAYÚSCULAS, como en la portada (.p-h2, .p-lema).
   Se lleva a los H1/H2 de las fichas de producto y de las páginas de búsqueda (.doc) desde esta hoja compartida.
   El H1 de la portada es una línea de texto (no un titular de display) y conserva su caja: aquí no se toca. */
body:not(.portada) h1,body:not(.portada) h2{font-family:"Archivo Black","Archivo",Arial,sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:-.01em;line-height:1.04;overflow-wrap:normal;hyphens:manual}
/* en mayúsculas el H1 largo de las páginas de búsqueda ocupaba 8 renglones a 390: baja de cuerpo en el teléfono */
@media(max-width:760px){.doc h1{font-size:1.5rem}}
/* Sin corte de palabra (control 19-oct, N1: «PRESENTACIÓ/N» a 768-820). En la ficha, entre 761 y ~940 px la columna del configurador mide 212-290 px
   y «PRESENTACIÓN» en caja alta ocupa 8,63 em: el cuerpo baja con el ancho para que la palabra más larga entre entera (medido: 190 px en 212 a 761) */
@media(min-width:761px){.config h1{font-size:clamp(1.4rem,2.9vw,1.7rem)}}