/* r2 */
/* v3 · 2026-08-05 — hoja completa en pantalla + barra que no viaja con el scroll.
   (Este encabezado también sirve para cambiar la huella del archivo cuando una
   ruta queda envenenada en el edge: nombre nuevo = caché nueva.)
   ── 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 — el menú del sitio no va en
   esta página. 2026-08-05: y NO es sticky; se queda arriba del todo. */
.brx{background:var(--carbon);color:var(--cream);}
.brx-viewer{background:var(--carbon);}

/* barra · única cabecera. Vive ARRIBA DEL TODO y se queda ahí: al bajar no
   viaja con el scroll ni se monta encima de la hoja (Samuel 2026-08-05).
   Por eso no es sticky: leer el brochure es leer la hoja, sin nada flotando. */
.brx-bar{position:relative;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;}
/* Volver al sitio · con flecha y con palabras. El logo solo no alcanzaba:
   quien llega por WhatsApp cae directo en el brochure y tiene que ver cómo
   sale (Samuel 2026-08-05, «más clara»). En celular queda «‹ sitio». */
.brx-back{display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;min-height:44px;
  text-decoration:none;color:var(--cream-d);font-family:var(--mono);font-size:.62rem;
  letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;
  transition:color .3s var(--ease);}
.brx-back:hover,.brx-back:focus-visible{color:var(--cream);}
.brx-back svg{width:14px;height:14px;flex:0 0 auto;}
.brx-back img{height:22px;width:auto;display:block;}
/* marcas cuya firma es una PALABRA y no un logo de imagen (Villaggio, Vitalia):
   misma pieza, otra esencia — no se pega el logo de otra marca */
.brx-back__wm{font-size:.86rem;letter-spacing:.2em;color:var(--cream);}
.brx-br{display:none;}

.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);}

/* marcas con UN solo documento: el nombre va como rótulo, no como selector.
   Un par de pestañas donde no hay dos cosas que elegir es una puerta falsa. */
.brx-doc{font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--cream);flex:0 0 auto;white-space:nowrap;}

.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 · como un visor de PDF: al 100% la hoja ENTERA cabe en la pantalla
   (Samuel 2026-08-05). El ancho lo dicta el alto disponible —pantalla menos la
   barra— multiplicado por la proporción de la hoja; el `min(100%, …)` deja que
   en celular siga mandando el ancho, donde una hoja apaisada ya entra completa.
   En pantalla completa manda el tamaño máximo (a sangre), regla de más abajo.
   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{
  --brx-aire:12px;                                  /* respiro: la hoja no toca los bordes */
  --brx-alto:calc(100vh - var(--brx-aire) * 2);
  --brx-alto:calc(100svh - var(--brx-aire) * 2);    /* svh = alto real en celular */
  width:calc(min(100%, var(--brx-alto) * var(--ar,1.4143)) * var(--zoom,1));
  margin:0 auto;padding-block:var(--brx-aire);
  /* separación entre hojas corta a propósito (Samuel 2026-08-05: «bájale»): el
     aire de arriba y abajo enmarca la hoja, pero entre una y otra sobra */
  display:flex;flex-direction:column;gap:6px;}
.brx-page{position:relative;background:var(--paper-2);aspect-ratio:var(--ar,1.4154);}
.brx-page img{display:block;width:100%;height:auto;}
/* En celular el dedo sobre la hoja tiene que SCROLLEAR. `touch-action:pinch-zoom`
   a secas prohíbe el desplazamiento con un dedo: el scroll "no agarraba" justo
   encima de las páginas, que es toda la pantalla (Samuel 2026-08-05). Hay que
   nombrar los tres gestos que sí queremos. */
.brx-pages img{touch-action:pan-x pan-y 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;}
/* en pantalla completa la hoja vuelve a sangrar: ahí se entra a ver grande */
.brx-viewer.is-full .brx-pages{width:calc(100% * var(--zoom,1));padding-block:0;gap:1px;}
.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;}
  /* en celular manda la ACCIÓN, no la marca: «‹ Volver». El logo se va — la
     marca está en toda la página y el ancho de la barra es lo escaso */
  .brx-back{gap:5px;font-size:.56rem;letter-spacing:.1em;}
  .brx-back img,.brx-back__wm{display:none;}
  .brx-back svg{width:13px;height:13px;}
  .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;} }