/* ==========================================================================
   css/mutador/01-fuentes-tokens.css — parte 1/15 de lo que era styles.css
   --------------------------------------------------------------------------
   Índice general + §01 fuentes + §02 tokens (:root) y documento + bloqueo de scroll horizontal.
   Se carga desde inc/paginas.php (_base) EN ESTE ORDEN: el número del
   archivo es su posición en la cascada. Un bloque nuevo → su propio archivo
   con el número que le toque, y añadirlo a la lista de _base.
   ========================================================================== */

/* =========================================================
   MUTADOR — landing page styles
   =========================================================
   Ficha técnica: ver PROYECTO.md
   Convive con Bootstrap 5.3.2 (neutralizado) + SPBuilder (Joomla).
   Evitar clases de estado genéricas: usar prefijo propio (.is-*,
   .tweaks-open, .footer-reveal--visible). Lista negra:
   .hidden, .visible, .show, .open, .active, .collapse.

/* ---------- bootstrap_custom.css---------- personaliza styler
   ─────────────────────────────────────────────────────────
   ÍNDICE (cada § y el archivo de css/mutador/ donde vive)
   ─────────────────────────────────────────────────────────
   §01  Fonts  → 01-*.css
   §02  Tokens + base document  → 01-*.css
   §03  SPBuilder + helpers Desktop/Móvil  → 02-*.css
   §04  Bootstrap 5 overrides (Reboot neutral)  → 02-*.css
   §05  Lenis injected classes  → 03-*.css
   §06  Body base + tema site-wide (dark)  → 03-*.css
   §07  Background map (bgmap + video + veil)  → 03-*.css
   §08  Frame + top bar (sticky)  → 04-*.css
   §09  Mark (logo) + nav horizontal  → 04-*.css
   §10  Intro block  → 05-*.css
   §11  Section heading + view switcher  → 05-*.css
   §12  Manifesto (dark band)  → 05-*.css
   §13  View visibility toggles  → 05-*.css
   §14  View: Index (list)  → 05-*.css
   §15  View: Masonry  → 05-*.css
   §16  View: Filmstrip  → 05-*.css
   §17  Cursor thumbnail (preview plate)  → 05-*.css
   §18  Cursor custom — retirado  → recamara/cursor-custom/
   §19  Footer + footer reveal  → 06-*.css
   §20  Tweaks panel (dev UI)  → 07-*.css
   §21  Body modifiers (density/accent)  → 07-*.css
   §22  Mobile nav: logo + hamburger + drawer  → 08-*.css
   §23  Bloques BS-* (section, heading, service,  → 09-*.css
        team, clients) + hover § 03 Clients
   §24  Marquee (dos filas, direcciones opuestas)  → 10-*.css
   §25  Carousel (Swiper 11) + sticker + float  → 11-*.css
   §25b Editorial slider 60/40 (img/texto)  → 12-*.css
   (sin §) Addons: imagen/preloader, vídeo…  → 14-*.css
   (sin §) Calibración editorial v2          → 15-*.css
   §26  Responsive (720 / 720–900)  → 13-*.css

   NOTA: el orden de los archivos (01…15) ES la cascada que
   funciona en producción. Mover bloques de archivo o cambiar
   el orden puede romper cosas con Bootstrap/SPBuilder/M3.
   Añadir reglas al final del archivo de su tema; un tema
   nuevo = archivo nuevo con su número y su línea en _base.
   ========================================================= */

/* ---------- §01 · Fonts ---------- */
@font-face{
  font-family:"Geigy";
  src:url("../../fonts/GeigyLLWeb-Regular.woff2") format("woff2"),
      url("../../fonts/GeigyLLWeb-Regular.woff") format("woff");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Life";
  src:url("../../fonts/LifeRegular.woff2") format("woff2"),
      url("../../fonts/LifeRegular.woff") format("woff");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Life";
  src:url("../../fonts/LifeRegularItalic.woff2") format("woff2"),
      url("../../fonts/LifeRegularItalic.woff") format("woff");
  font-weight:400; font-style:italic; font-display:swap;
}

/* ---------- §02 · Tokens + base document ---------- */
:root{
  /* ── PALETA ORIGINAL DEL TEMPLATE (restaurada tras la prueba 2026) ── */
  --paper: #efece4;
  --ink:   #1a1814;
  --mute:  #7a7568;
  -ink-soft: #6b6b6b;
    --footer: #efece4;
  --rule:  rgba(207, 201, 187, 0.44);
  --accent:#b4533a;
  --fs-base: 15px;
  --display: "Geigy", "Times New Roman", serif;
  --body:    "Life", "Iowan Old Style", Georgia, serif;
  --mono:    ui-monospace, "SF Mono", Menlo, monospace;
  --gutter:  24px;
  --row:     34px;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Courier New", monospace;
  --font-body:"Life", "Iowan Old Style", Georgia, serif;
      --body-font-size-p: 0.9rem;
}
.font-mono{    
   
    color: var(--ink-soft) !important;
    font-family: var(--font-mono)!important;
    font-size: 10px !important;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; background-color:var(--paper); color:var(--ink); }
.sppb-btn { font-family: var(--font-mono)!important;
    font-size: 10px !important;
    text-transform: uppercase;}

/* ==========================================================================
   Bloqueo definitivo de scroll horizontal (html + body)
   --------------------------------------------------------------------------
   Sumario:
   - `overflow-x: clip` es más estricto que `hidden` (no crea scroll context
     y no se puede sortear con position:fixed). Fallback `hidden` para Safari
     viejo via segunda declaración (clip se ignora si no se soporta).
   - Aplicado a html Y body porque iOS Safari ignora el del html si el body
     no lo tiene.
   - `max-width: 100vw` blinda contra cualquier elemento que se salga por
     ancho calculado mal (módulos SPBuilder, gifs sin contención, etc).
   ========================================================================== */
html, body{
  max-width: 100vw;
  overflow-x: hidden;       /* fallback navegadores sin clip */
  overflow-x: clip;          /* preferente: estricto, sin scroll context */
}
html{
  scroll-behavior: auto;
  scrollbar-width: none;     /* Firefox: oculta scrollbar vertical en desktop */
}
html::-webkit-scrollbar{ display: none; } /* Chrome/Safari: oculta scrollbar */
div.sppb-addon-content , .sppb-addon-content {margin-bottom: var(--p-margin-bottom) !important; 
    font-family: var(--font-body) !important;
    font-size: var(--body-font-size) !important; 
    line-height: var(--body-line-height) !important;
    font-weight: var(--body-font-weight) !important;}