/* ── VISOR DE BROCHURE ───────────────────────────────────────────────────────
   Una sola verdad para las dos páginas (brochure.html y brochure-comercial.html).
   Hereda los tokens de site.css; no lo modifica.
   Sin sombras (regla Samuel 2026-07-09).
   Samuel 2026-08-04: la barra es la ÚNICA cabecera y queda pinneada arriba —
   el menú del sitio no va en esta página, así la hoja es full bleed de verdad. */
.brx{background:var(--carbon);color:var(--cream);}
.brx-viewer{background:var(--carbon);}

/* barra · única cabecera, pegada arriba desde el primer píxel */
.brx-bar{position:sticky;top:0;z-index:50;background:rgba(14,14,12,.96);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line-dd);}
.brx-bar__in{max-width:none;margin:0;padding:10px clamp(12px,2.2vw,24px);
  display:flex;align-items:center;gap:clamp(8px,1.5vw,18px);flex-wrap:wrap;}
.brx-logo{display:inline-flex;align-items:center;flex:0 0 auto;}
.brx-br{display:none;}
.brx-logo img{height:22px;width:auto;display:block;}

.brx-seg{display:inline-flex;border:1px solid var(--line-d);border-radius:2px;overflow:hidden;flex:0 0 auto;}
.brx-seg a{display:inline-flex;align-items:center;justify-content:center;
  padding:10px clamp(11px,1.8vw,20px);min-height:44px;font-family:var(--mono);font-size:.62rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--cream-d);text-decoration:none;
  transition:background .3s var(--ease),color .3s var(--ease);white-space:nowrap;}
.brx-seg a:hover{color:var(--cream);}
.brx-seg a[aria-current="page"]{background:var(--cream);color:var(--carbon);}

.brx-count{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;color:var(--cream-d);
  margin-inline-start:auto;font-variant-numeric:tabular-nums;white-space:nowrap;}

.brx-act{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:12px 18px;
  min-height:44px;min-width:44px;border-radius:1px;font-family:var(--mono);font-size:.62rem;
  letter-spacing:.16em;text-transform:uppercase;text-decoration:none;cursor:pointer;white-space:nowrap;
  background:none;color:var(--cream-d);border:1px solid var(--line-d);
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);}
.brx-act:hover{color:var(--carbon);background:var(--cream);border-color:var(--cream);}
.brx-act svg{width:15px;height:15px;flex:0 0 auto;}
.brx-dl{background:var(--cream);color:var(--carbon);border-color:var(--cream);}
.brx-dl:hover{background:transparent;color:var(--cream);}
.brx-act small{font-size:.9em;opacity:.62;letter-spacing:.06em;}

/* zoom */
.brx-zoom{display:inline-flex;align-items:center;gap:2px;flex:0 0 auto;}
.brx-zoom__b{padding:12px;min-width:42px;}
.brx-zoom__b[disabled]{opacity:.32;cursor:default;pointer-events:none;}
.brx-zoom__v{font-family:var(--mono);font-size:.6rem;letter-spacing:.08em;color:var(--cream-d);
  min-width:44px;text-align:center;font-variant-numeric:tabular-nums;}

/* páginas · a sangre, sin marco ni márgenes: la hoja manda.
   Sin transition en width: animar un calc() que depende de una variable deja
   el ancho congelado en el primer valor (Chrome). El zoom va instantáneo. */
.brx-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.brx-pages{width:calc(100% * var(--zoom,1));margin:0 auto;padding:0;
  display:flex;flex-direction:column;gap:1px;}
.brx-page{position:relative;background:var(--paper-2);aspect-ratio:var(--ar,1.4154);}
.brx-page img{display:block;width:100%;height:auto;}
.brx-pages img{touch-action:pinch-zoom;}
.brx-msg{max-width:60ch;margin:0 auto;padding:clamp(40px,10vh,90px) var(--pad);text-align:center;
  font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;color:var(--cream-d);line-height:2;}
.brx-msg a{color:var(--sage-lt);}
.brx-stamp{padding:clamp(16px,3vh,26px) var(--pad);text-align:center;font-family:var(--mono);
  font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(244,240,230,.5);}

/* pantalla completa · clase CSS propia (única que funciona en iPhone, donde la
   API no existe para elementos) + Fullscreen API encima cuando el navegador la tiene */
.brx-viewer.is-full{position:fixed;inset:0;z-index:999;overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;}
body.brx-locked{overflow:hidden;}
.brx-viewer.is-full .brx-bar{display:none;}
.brx-viewer.is-full .brx-stamp{display:none;}
.brx-exit{display:none;position:fixed;top:max(14px,env(safe-area-inset-top));
  right:max(14px,env(safe-area-inset-right));z-index:1000;width:42px;height:42px;padding:0;
  align-items:center;justify-content:center;border-radius:50%;cursor:pointer;
  background:rgba(14,14,12,.55);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid var(--line-d);color:var(--cream);opacity:.72;
  transition:opacity .3s var(--ease),background .3s var(--ease);}
.brx-exit:hover,.brx-exit:focus-visible{opacity:1;background:rgba(14,14,12,.85);}
.brx-exit svg{width:17px;height:17px;}
.brx-viewer.is-full .brx-exit{display:inline-flex;}

/* cierre */
.brx-end{border-top:1px solid var(--line-dd);}
.brx-end__in{max-width:var(--maxw);margin:0 auto;padding:clamp(38px,8vh,84px) var(--pad);
  display:flex;gap:clamp(20px,4vw,60px);align-items:flex-end;flex-wrap:wrap;}
.brx-end h2{margin:0;font-size:var(--t-2);color:var(--cream);flex:1 1 340px;}
.brx-end p{margin:.7em 0 0;max-width:46ch;color:var(--cream-d);font-size:1rem;line-height:1.6;}
.brx-end__cta{display:flex;gap:12px;flex-wrap:wrap;}

/* celular: logo + selector arriba; abajo página · zoom · pantalla completa · descarga */
/* celular: dos filas reales. Fila 1 logo + selector; el salto obliga a que
   página · zoom · pantalla completa · descarga bajen juntos a la fila 2 — sin
   él, los seis elementos se reparten una sola fila y el selector queda
   aplastado hasta ser ilegible. */
@media (max-width:700px){
  .brx-bar__in{padding:8px;gap:6px;row-gap:8px;}
  .brx-logo img{height:18px;}
  .brx-seg{flex:1 1 auto;}
  .brx-seg a{flex:1 1 0;padding-inline:10px;font-size:.56rem;letter-spacing:.1em;}
  .brx-br{display:block;flex:0 0 100%;height:0;margin:0;}
  .brx-count{margin-inline-start:0;font-size:.58rem;letter-spacing:.08em;}
  .brx-zoom{margin-inline-start:auto;}
  .brx-act{padding:11px 12px;font-size:.58rem;letter-spacing:.06em;gap:6px;}
  .brx-zoom__b{padding:11px 9px;min-width:38px;}
  .brx-act__long{display:none;}
}
@media (max-width:430px){ .brx-zoom__v{display:none;} }