/* =========================================================
   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.

   ─────────────────────────────────────────────────────────
   ÍNDICE DEL ARCHIVO
   ─────────────────────────────────────────────────────────
   §01  Fonts ................................... L~6
   §02  Tokens + base document .................. L~25
   §03  SPBuilder + helpers Desktop/Móvil ....... L~48
   §04  Bootstrap 5 overrides (Reboot neutral) .. L~73
   §05  Lenis injected classes .................. L~175
   §06  Body base + tema site-wide (dark) ....... L~181
   §07  Background map (bgmap + video + veil) ... L~209
   §08  Frame + top bar (sticky) ................ L~257
   §09  Mark (logo) + nav horizontal ............ L~298
   §10  Intro block ............................. L~368
   §11  Section heading + view switcher ......... L~413
   §12  Manifesto (dark band) ................... L~473
   §13  View visibility toggles ................. L~530
   §14  View: Index (list) ...................... L~538
   §15  View: Masonry ........................... L~599
   §16  View: Filmstrip ......................... L~661
   §17  Cursor thumbnail (preview plate) ........ L~742
   §18  Cursor custom (anillo + disco) .......... L~782
   §19  Footer + footer reveal .................. L~863
   §20  Tweaks panel (dev UI) ................... L~938
   §21  Body modifiers (density/accent) ......... L~997
   §22  Mobile nav: logo + hamburger + drawer ... L~1016
   §23  Bloques BS-* (section, heading, service,
        team, clients) + hover § 03 Clients .... L~1136
   §24  Marquee (dos filas, direcciones opuestas) L~1338
   §25  Carousel (Swiper 11) + sticker + float .. L~1393
   §25b Editorial slider 60/40 (img/texto) ...... L~1640
   §26  Responsive (720 / 720–900) .............. L~1588

   NOTA: el orden actual respeta la cascada que funciona en
   producción. Mover bloques de sitio puede romper cosas con
   Bootstrap/SPBuilder. Añadir nuevos bloques al final de su
   sección temática y actualizar el índice.
   ========================================================= */

/* ---------- §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{
  --paper: #efece4;
  --ink:   #1a1814;
  --mute:  #7a7568;
    --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;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; background:var(--paper); color:var(--ink); }

/* ==========================================================================
   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;}

/* ---------- §03 · SPBuilder helpers (Desktop/Móvil) ---------- */
/* Desktop */
.vh-50 {
    height: 50vh !important;
}
.min-vh-50 {
    min-height: 50vh !important;
}

/* Móvil */
@media (max-width: 768px) {
    .pb-m { padding: 5vh 0px !important; }
    .vh-50 {
        height: auto !important;
        min-height: 400px;
    }
    .min-vh-50 {
        min-height: auto !important;
    }
}
/* =========================================================
   §04 · Bootstrap 5 overrides — objetivo: cero cambio visual
   Bootstrap se carga por compatibilidad con Joomla 6. Aquí
   neutralizamos los defaults que chocan con el tono editorial.
   ========================================================= */

/* 1) Remap Bootstrap CSS vars to our tokens. Así cualquier
      componente Bootstrap que usemos (offcanvas, modal, etc.)
      ya adopta nuestra paleta y tipografía sin más trabajo. */
:root{
  --bs-body-font-family: var(--body);
  --bs-body-font-size: var(--fs-base);
  --bs-body-line-height: 1.35;
  --bs-body-color: var(--ink);
  --bs-body-bg: var(--paper);
  --bs-link-color: var(--ink);
  --bs-link-hover-color: var(--accent);
  --bs-link-color-rgb: 26, 24, 20;              /* --ink rgb */
  --bs-link-hover-color-rgb: 180, 83, 58;       /* --accent rgb */
  --bs-primary: var(--accent);
  --bs-primary-rgb: 180, 83, 58;
  --bs-border-color: var(--rule);
  --bs-border-radius: 0;
  --bs-border-radius-sm: 0;
  --bs-border-radius-lg: 0;
  --bs-border-radius-xl: 0;
  --bs-focus-ring-color: rgba(180, 83, 58, .25);
  --bs-focus-ring-width: 1px;
}

/* 1.5) Neutralizar el Reboot de Bootstrap sobre elementos sin clase.
        Bootstrap setea margin-top:0 y margin-bottom:.5rem en h1..h6 y
        margin-bottom:1rem en p (y otros márgenes en figure/ul/ol/dl/pre).
        Esto comprime verticalmente la página ~200px frente a la base
        pre-Bootstrap. Lo anulamos para que nuestro CSS editorial sea
        quien imponga los ritmos de margen. */
h1, h2, h3, h4, h5, h6{
  margin: 0;
  font-weight: inherit;
  line-height: inherit;
}

p{ margin: 0; color: var(--mute); }
.sppb-addon-content  {color: var(--mute); }
ul, ol{ margin: 0; padding: 0; }
figure, blockquote, dl, dd, pre, address{ margin: 0; }
hr{ margin: 0; opacity: 1; border: 0; border-top: 1px solid var(--rule); }
.section-m , div.sppb-section.section-m{    padding: 90px var(--gutter) 80px!important;}
h1 em{color: var(--accent);}
p strong{ font-weight: 800}
/* mod lenguaje */
div.mod-languages ul {
    margin: 0;
    padding: 0;
    list-style: none;
  padding-bottom: 10px
}

div.mod-languages li {
  margin: 0 0rem;}

/* buttoms */
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--accent);
    --bs-btn-border-color: var(--accent);
    --bs-btn-hover-color
#fff
: #fff;
    --bs-btn-hover-bg: var(--rule);
    --bs-btn-hover-border-color: var(--accent);
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: var(--rule);
    --bs-btn-active-bg: var(--accent);
    --bs-btn-active-border-color: var(--accent);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--accent);
    --bs-btn-disabled-border-color: #0d6efd;
}

/* 2) Anular reset de enlaces Bootstrap: nuestros <a> son color
      inherit sin underline por defecto, underline opt-in con .u */
a{ color: inherit; text-decoration: none; }
a.u{ }
.text-mono{    font-family: var(--mono)!important;}
.text-mono.sppb-addon-content.bs-service-n p{ font-family: var(--mono);}
/* 3) Anular efectos de focus genéricos de Bootstrap en botones
      y enlaces (outline azul, box-shadow). Mantenemos accesibilidad
      con un outline discreto solo para teclado. */
a:focus, button:focus{ outline: none; box-shadow: none; }
a:focus-visible, button:focus-visible{
  outline: 1px solid var(--accent);
  outline-offset: 2px;
  box-shadow: none;
}

/* 4) Botones: Bootstrap mete estilos a <button>. Nosotros
      los queremos "unset" excepto donde apliquemos clases propias. */
button{
  background: transparent; border: 0; padding: 0; font: inherit;
  color: inherit; cursor: pointer;
}

/* 5) Offcanvas → drawer editorial. Preservamos la animación
      slide-down y el layout interior del drawer original.
      Bootstrap añade position:fixed, transform, etc. pero
      el aspecto visual debe ser idéntico al drawer anterior. */
.offcanvas.drawer{
  /* Aseguramos ancho y altura coherentes con el drawer previo */
  background: var(--paper);
  color: var(--ink);
  border: 0;
  box-shadow: 0 6px 30px rgba(0,0,0,.08);
}
.offcanvas.offcanvas-top.drawer{
  height: auto;                 /* contenido determina altura */
  max-height: 88vh;
}
.offcanvas-backdrop.show{ opacity: .35; }

/* 6) Bootstrap aplica overflow-y:auto y touch-action en offcanvas.
      Con Lenis pausado no hay conflicto, pero evitamos la
      scrollbar interna si el drawer cabe sin overflow. */
.offcanvas.drawer{ overflow: auto; }

/* 7) Container/row/col no los usamos (grid editorial propio).
      Por si Joomla envuelve en un .container, neutralizamos
      sus límites de ancho para no romper el diseño. */
body > .container, body > .container-fluid{ max-width: none; padding: 0; }

/* =========================================================
   Fin Bootstrap overrides
   ========================================================= */

/* ---------- §05 · Lenis (injected classes on <html>) ---------- */
html.lenis, html.lenis body{ height: auto; }
.lenis.lenis-smooth{ scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent]{ overscroll-behavior: contain; }
.lenis.lenis-stopped{ overflow: hidden; }
.lenis.lenis-smooth iframe{ pointer-events: none; }

/* ---------- §06 · Body base + tema site-wide (dark) ---------- */
body{
  font-family:var(--body);
  font-size:var(--fs-base);
  line-height:1.35;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  min-height:100vh;
  cursor: crosshair;
  position: relative;
  transition: background-color .5s ease, color .5s ease;
}


h1 b{  color: var(--mute);}
p a{    color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1));
    text-decoration: underline;
}
/* ---------- Theme system (section-aware light/dark) ----------
   Nota: este subsistema se complementa con §07 (bgmap) y con
   el atributo data-section-theme gestionado en main.js. */
/* Every section in .frame declares data-theme="light" | "dark".
   An IntersectionObserver sets body[data-theme] to the most visible section.
   Default site palette is "light". */
body[data-theme="dark"]{
  background: var(--ink);
  color: var(--paper);
  --rule: #3a3630;
  --mute: #a8a090;
}

/* ---------- §07 · Background map (hover full-bleed) ----------
   La imagen que se muestra aquí proviene de data-bg en cada .entry.
   Si data-bg está ausente, JS hace fallback a data-img (miniatura del cursor).
   Puedes usar imágenes distintas: data-img = recorte editorial para el cursor
   (220×290 px), data-bg = panorámica o encuadre amplio para el fondo.    
  background-size: var(--bg-size, 220%);*/
.bgmap{
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity .35s ease;
  background-image: var(--bg-img, none);
  background-repeat: no-repeat;
  background-size:cover;
  background-position: var(--bg-x, 50%) var(--bg-y, 50%);
}
.bgmap.on{ opacity: 1; }
/* Video full-bleed dentro de bgmap. Sólo visible cuando bgmap tiene .video-on.
   La imagen de fondo (poster) sigue activa por debajo durante el fade in del
   video, evitando parpadeo si el .mp4 aún no está decodificado. */
.bgmap-video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
}
.bgmap.video-on .bgmap-video{ opacity: 1; }
/* Very subtle veil: only enough to keep index text legible over light images. */
.bgveil{
  position: fixed; inset: 0; z-index: 1; pointer-events:none;
  background: var(--paper);
  opacity: 0;
  transition: opacity .35s ease;
}
.bgveil.on{ opacity: .15; }
body[data-theme="dark"] .bgveil{ background: var(--ink); }

.frame{ position: relative; z-index: 2; }
a{ color:inherit; text-decoration:none; }
a.u{  }
a.u:hover{ color: var(--accent); }

/* ---------- §08 · Frame + top bar (sticky) ---------- */
/* .frame es un contenedor de bloque puro. NO es un grid y NO tiene padding.
   Cada sección custom gestiona su propio espaciado horizontal.
   Se mantiene position:relative + z-index:2 (regla anterior) para que
   el contenido quede sobre bgmap (z:0) y bgveil (z:1). */
.frame{
  min-height: 100vh;
}
.rule{ border-top: 1px solid var(--rule); }

/* --- Top bar sticky (mantiene el mark visible durante el crossfade
       light↔dark del logo al scrollear) --- */
.topbar{
  grid-column: 1 / -1;
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gutter);
  align-items: center;
  padding: 14px var(--gutter) 12px;
  /* .frame ya no tiene padding, el topbar va naturalmente a borde */
  margin: 0 0 10px;
  position: sticky;
  top: 0;
  z-index: 30;
  background: color-mix(in oklab, var(--paper) 68%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid transparent;
  transition: background-color .35s ease, border-color .35s ease;
}
body[data-theme="dark"] .topbar{
  background: color-mix(in oklab, var(--ink) 88%, transparent);
  border-bottom-color: rgba(239, 236, 228, .08);
}

/* ---------- §09 · Mark (logo) + nav horizontal ----------
   Mark = square logo + wordmark. El logo son dos SVGs overlay
   (light + dark) que hacen cross-fade cuando body[data-theme] cambia.
   Override Bootstrap necesario: Bootstrap aplica
   `mark, .mark { padding:.1875em; background-color: var(--bs-highlight-bg) }`
   pensando en el elemento HTML <mark>. Nuestra .mark es el logo:
   anulamos padding y el background amarillo de highlight. */
.mark{
  grid-column: 1 / span 3;
  font-family: var(--display);
  font-size: 22px;
  letter-spacing: -.01em;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: inherit;
  background-color: transparent;
  padding: 0;
}
.mark-logo{
  position: relative;
  display: inline-block;
  width: 28px; height: 28px;
  flex-shrink: 0;
}
.mark-logo img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  transition: opacity .45s ease;
}
.mark-logo .l-light{ opacity: 1; }
.mark-logo .l-dark { opacity: 0; }
body[data-theme="dark"] .mark-logo .l-light{ opacity: 0; }
body[data-theme="dark"] .mark-logo .l-dark { opacity: 1; }

.mark-word{ display:inline-flex; align-items:baseline; }
.mark .dot{
  display:inline-block; width:6px; height:6px;
  background: var(--accent); border-radius:50%;
  transform: translateY(-4px);
  margin: 0 .35em 0 .1em;
}
.mark-sub{
  font-style: italic;
  font-family: var(--body);
  font-size: 16px;
  color: var(--mute);
}

/* Nav horizontal en una sola línea (desktop). */
.nav{
  grid-column: 4 / span 6;
  display:flex;
  flex-wrap: nowrap;
  gap: 14px;
  font-family: var(--body);
  font-size: 12px;
  letter-spacing: .04em;
  align-items: baseline;
  justify-content: center;
}
.nav a{ white-space: nowrap; text-transform: uppercase }
.nav a.current{ font-style: italic; color: var(--accent); text-decoration: underline; text-decoration-thickness: .5px; text-underline-offset: 3px; }
.nav a.u{     font-family: var(--mono) !important;}
.meta{
  grid-column: 10 / span 3;
  text-align: right;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--mute);
  letter-spacing: .02em;
  text-transform: uppercase;
}
.meta .pulse{ display:inline-block; width:6px; height:6px; background: var(--accent); border-radius:50%; margin-right:6px; transform: translateY(-1px); animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{opacity:.35} 50%{opacity:1} }

/* ---------- §10 · Intro block ---------- */
.hero{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gutter);
  padding: 90px var(--gutter) 80px;
  position: relative;
}
.kicker{
  grid-column: 1 / span 2;
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--mute);
  padding-top: 12px;
}
.statement{
  grid-column: 3 / span 8;
  font-family: var(--display);
  font-size: clamp(40px, 5.6vw, 82px);
  line-height: 1.02;
  letter-spacing: -.015em;
  font-weight: 400;
}
.statement em{
  font-family: var(--body);
  font-style: italic;
  font-size: .88em;
  color: var(--accent);
  letter-spacing: 0;
}
.statement .soft{ color: var(--mute); }
.aside{
  grid-column: 11 / span 2;
  font-size: 13px;
  font-style: italic;
  color: var(--mute);
  padding-top: 16px;
  text-indent: 0;
}
.aside p{ margin: 0 0 .6em 0; }
.aside .ink{ color: var(--ink); }
body[data-theme="dark"] .aside .ink{ color: var(--paper); }

/* ---------- §11 · Section heading + view switcher ---------- */
.section-head{
  grid-column: 1 / -1;
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gutter);
  padding: 14px 0 10px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mute);
  align-items: center;
}
.section-head .a{ grid-column: 1 / span 1; }
.section-head .b{ grid-column: 2 / span 4; }
.section-head .c{ grid-column: 6 / span 3; }
.section-head .d{ grid-column: 10 / span 2; }
.section-head .e{ grid-column: 12 / span 1; text-align:right; }

/* Hide column labels when not in index view */
body[data-view="masonry"]  .section-head .a,
body[data-view="masonry"]  .section-head .c,
body[data-view="masonry"]  .section-head .d,
body[data-view="masonry"]  .section-head .e,
body[data-view="filmstrip"] .section-head .a,
body[data-view="filmstrip"] .section-head .c,
body[data-view="filmstrip"] .section-head .d,
body[data-view="filmstrip"] .section-head .e{ visibility: hidden; }

.view-switch-row{
  grid-column: 1 / -1;
  display:flex;
  justify-content: flex-end;
  padding: 2px 0 8px;
}
.view-switch{
  display: inline-flex;
  border: 1px solid var(--ink);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink);
}
.view-switch button{
  background: transparent;
  border: 0;
  padding: 6px 12px;
  font: inherit;
  color: inherit;
  cursor: pointer;
  letter-spacing: inherit;
}
.view-switch button + button{ border-left: 1px solid var(--ink); }
.view-switch button.on{ background: var(--ink); color: var(--paper); }
body[data-theme="dark"] .view-switch{ border-color: var(--paper); color: var(--paper); }
body[data-theme="dark"] .view-switch button + button{ border-left-color: var(--paper); }
body[data-theme="dark"] .view-switch button.on{ background: var(--paper); color: var(--ink); }

/* ---------- §12 · Manifesto (dark band between header and projects) ---------- */
.manifesto{
  grid-column: 1 / -1;
  background: var(--ink);
  color: var(--paper);
  padding: clamp(48px, 9vw, 120px) clamp(22px, 5vw, 80px);
  margin: 18px 0 28px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  position: relative;
  overflow: hidden;
}
.manifesto::before{
  /* subtle hairline motif, like a printed rule on a dark page */
  content: "";
  position: absolute;
  left: clamp(22px, 5vw, 80px);
  right: clamp(22px, 5vw, 80px);
  top: 18px;
  height: 1px;
  background: rgba(239, 236, 228, .22);
}
.manifesto-line{
  font-family: var(--display);
  font-size: clamp(40px, 7vw, 108px);
  line-height: .98;
  letter-spacing: -.015em;
  margin: 0;
  font-weight: 400;
  color: var(--paper);
  max-width: 18ch;
}
.manifesto-line em{
  font-family: var(--body);
  font-style: italic;
  color: var(--accent);
  font-size: .92em;
}
.manifesto-line .ink-soft{
  color: #b8b0a0;
  font-style: italic;
  font-family: var(--body);
}
.manifesto-meta{
  display: flex;
  gap: clamp(18px, 3vw, 40px);
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #a8a090;
  padding-top: 6px;
  border-top: 1px solid rgba(239, 236, 228, .15);
}

/* ---------- §13 · View visibility toggles ---------- */
body[data-view="index"]     #view-masonry,
body[data-view="index"]     #view-filmstrip,
body[data-view="masonry"]   #view-index,
body[data-view="masonry"]   #view-filmstrip,
body[data-view="filmstrip"] #view-index,
body[data-view="filmstrip"] #view-masonry{ display:none; }

/* ---------- §14 · View: Index (list) ---------- */
.index{ grid-column: 1 / -1; }
.entry{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gutter);
  align-items: baseline;
  padding: 0;
  border-top: 1px solid var(--rule);
  height: var(--row);
  font-family: var(--display);
  font-size: 22px;
  letter-spacing: -.005em;
  transition: color .25s ease, background .25s ease;
  position: relative;
  cursor: crosshair;
}
.entry:last-child{ border-bottom: 1px solid var(--rule); }
.entry .n{
  grid-column: 1 / span 1;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--mute);
  letter-spacing: .04em;
  padding-top: 9px;
}
.entry .t{ grid-column: 2 / span 4; padding-top: 2px; }
.entry .t em{ font-family: var(--body); font-style: italic; font-size: 15px; color: var(--mute); margin-left:.4em; letter-spacing: 0; }
.entry .c{
  grid-column: 6 / span 3;
  font-family: var(--body); font-style: italic; font-size: 14px; color: var(--mute);
  padding-top: 5px;
}
.entry .d{
  grid-column: 10 / span 2;
  font-family: var(--mono); font-size: 11px; color: var(--mute); letter-spacing: .04em;
  padding-top: 9px;
  text-transform: uppercase;
}
.entry .y{
  grid-column: 12 / span 1;
  font-family: var(--mono); font-size: 11px; color: var(--mute); letter-spacing: .04em;
  text-align: right;
  padding-top: 9px;
}

.entry:hover{ color: var(--accent); }
.entry:hover .n, .entry:hover .c, .entry:hover .d, .entry:hover .y, .entry:hover .t em{ color: var(--accent); }

.entry::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-1px;
  height:1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .4s ease;
}
.entry:hover::after{ transform: scaleX(1); }

/* ---------- §15 · View: Masonry ---------- */
.masonry{
  grid-column: 1 / -1;
  column-count: 3;
  column-gap: var(--gutter);
  padding: 4px 0 8px;
}
.m-card{
  display: block;
  break-inside: avoid;
  margin: 0 0 var(--gutter) 0;
  color: inherit;
  cursor: crosshair;
  position: relative;
}
.m-card .m-plate{
  width: 100%;
  background-color: var(--ph, #d6cfbd);
  background-image: var(--pimg, none);
  background-size: cover;
  background-position: center;
  outline: 1px solid rgba(0,0,0,.08);
  transition: transform .5s cubic-bezier(.2,.7,.2,1), outline-color .3s ease;
}
.m-card:hover .m-plate{ transform: scale(1.01); outline-color: var(--accent); }
/* aspect ratio cycle for irregular heights */
.m-card[data-ar="1/1"]  .m-plate{ aspect-ratio: 1 / 1; }
.m-card[data-ar="3/4"]  .m-plate{ aspect-ratio: 3 / 4; }
.m-card[data-ar="4/5"]  .m-plate{ aspect-ratio: 4 / 5; }
.m-card[data-ar="2/3"]  .m-plate{ aspect-ratio: 2 / 3; }
.m-card[data-ar="5/6"]  .m-plate{ aspect-ratio: 5 / 6; }
.m-card[data-ar="4/3"]  .m-plate{ aspect-ratio: 4 / 3; }

.m-card .m-cap{
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 10px 2px 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--mute);
  text-transform: uppercase;
}
.m-card .m-title{
  font-family: var(--display);
  font-size: 18px;
  line-height: 1.15;
  letter-spacing: -.005em;
  color: var(--ink);
  padding: 6px 2px 0;
  text-transform: none;
  font-weight: 400;
}
body[data-theme="dark"] .m-card .m-title{ color: var(--paper); }
.m-card .m-title em{
  font-family: var(--body);
  font-style: italic;
  font-size: 13px;
  color: var(--mute);
  margin-left: .4em;
}
.m-card:hover .m-title{ color: var(--accent); }

/* ---------- §16 · View: Filmstrip (compact — 5.5 cards visible) ---------- */
.filmstrip{
  grid-column: 1 / -1;
  padding: 0;
}
.filmstrip-track{
  display: flex;
  gap: var(--gutter);
  overflow-x: auto;
  overflow-y: hidden;
  /* Free momentum scroll (no snap) — trackpad / wheel / touch flow naturally. */
  scroll-behavior: auto;
  padding: 4px 0 24px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  overscroll-behavior-x: contain;
}
.filmstrip-track::-webkit-scrollbar{ height: 6px; }
.filmstrip-track::-webkit-scrollbar-thumb{ background: var(--rule); border-radius: 3px; }
.f-slide{
  flex: 0 0 auto;
  /* 5.5 cards visible → 5 full cards + half of the 6th peeks, hinting scroll. */
  width: calc((100% - var(--gutter) * 4.5) / 5.5);
  display: flex; flex-direction: column;
  cursor: crosshair;
  color: inherit;
}
.f-slide .f-plate{
  width: 100%;
  aspect-ratio: 3 / 4;
  background-color: var(--ph, #d6cfbd);
  background-image: var(--pimg, none);
  background-size: cover;
  background-position: center;
  outline: 1px solid rgba(0,0,0,.08);
  transition: outline-color .3s ease, transform .3s ease;
}
.f-slide:hover .f-plate{ outline-color: var(--accent); }
.f-slide .f-cap{
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 8px;
  padding: 10px 0 0;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .05em;
  color: var(--mute);
  text-transform: uppercase;
}
.f-slide .f-cap > span:first-child{
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.f-slide .f-title{
  font-family: var(--display);
  font-size: 15px;
  letter-spacing: -.005em;
  color: var(--ink);
  padding: 4px 0 0;
  font-weight: 400;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body[data-theme="dark"] .f-slide .f-title{ color: var(--paper); }
.f-slide .f-title em{
  /* hide the italic suffix at this small scale — the cap carries context */
  display: none;
}
.f-slide:hover .f-title{ color: var(--accent); }

.filmstrip-hint{
  grid-column: 1 / -1;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mute);
  text-align: center;
  padding-top: 6px;
}

/* ---------- §17 · Cursor thumbnail (solo en view=index) ---------- */
.preview{
  position: fixed;
  pointer-events: none;
  z-index: 40;
  width: 220px;
  height: 290px;
  transform: translate(-50%, -50%) scale(.985);
  opacity: 0;
  transition: opacity .22s ease, transform .22s ease;
  will-change: transform, opacity, left, top;
}
.preview.on{ opacity:1; transform: translate(-50%, -50%) scale(1); }
.preview .plate{
  width:100%; height:100%;
  background-color: var(--ph, #d6cfbd);
  background-image: var(--pimg, none);
  background-size: cover;
  background-position: center;
  position: relative;
  overflow:hidden;
  box-shadow: 0 12px 30px -18px rgba(0,0,0,.5);
  outline: 1px solid rgba(0,0,0,.12);
}
.preview .dot{
  position:absolute;
  width:10px; height:10px; border-radius:50%;
  background: var(--paper);
  border: 1px solid var(--ink);
  transform: translate(-50%, -50%);
  left: var(--dot-x, 50%); top: var(--dot-y, 50%);
  pointer-events:none;
}
.preview .tag{
  position:absolute; left:8px; bottom:8px;
  font-family: var(--mono); font-size: 10px; letter-spacing:.08em;
  text-transform:uppercase; color: var(--ink);
  background: var(--paper); padding: 3px 6px;
}

/* =========================================================
   §18 · CURSOR CUSTOM — disco con alpha, default / is-link
   Sumario:
   · Sigue al puntero con lerp (gestionado en main.js).
   · Color hereda de data-section-theme (--paper / --ink).
   · Default: disco 14px con alpha .22.
   · is-link → disco crece a 56px manteniendo alpha.
   · is-preview → se difumina cuando #preview.on está activo.
   · Off en (pointer: coarse). prefers-reduced-motion: sin lerp.
   · El cursor:none global solo aplica si JS añade .has-custom-cursor.
   ========================================================= */
.cursor{
  position: fixed;
  top: 0; left: 0;
  width: 0; height: 0;
  pointer-events: none;
  z-index: 2147483000;        /* siempre por encima de tweaks (100), preview (40), etc. */
  color: var(--ink);
  opacity: 0;
  transition: opacity .2s ease;
  will-change: transform;
}
.cursor.is-ready{ opacity: 1; }

.cursor-ring,
.cursor-dot{
  position: absolute;
  left: 0; top: 0;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
}
/* Default: disco pequeño semitransparente. Usa currentColor para
   heredar el tono del tema (--paper/--ink). */
.cursor-ring{
  width: 14px; height: 14px;
  border: 0;
  background: currentColor;
  opacity: .22;
  transition:
    width  .28s cubic-bezier(.22,1,.36,1),
    height .28s cubic-bezier(.22,1,.36,1),
    opacity .2s ease;
}
/* Dot reservado para estados futuros; oculto por defecto. */
.cursor-dot{
  width: 0; height: 0;
  background: currentColor;
  opacity: 0;
  transition: opacity .2s ease;
}

/* --- Color por tema de sección (atributo en <body> via sticky header) */
body[data-section-theme="dark"]  .cursor{ color: var(--paper); }
body[data-section-theme="light"] .cursor{ color: var(--ink);  }

/* --- Hover sobre interactivo: el disco se agranda manteniendo alpha */
.cursor.is-link .cursor-ring{
  width: 56px; height: 56px;
  opacity: .22;
}

/* --- Plate thumbnail activo: cedemos protagonismo */
.cursor.is-preview .cursor-ring{ opacity: 0; }
.cursor.is-preview .cursor-dot { opacity: 0; }

/* --- Ocultar cursor nativo solo si el custom está vivo */
html.has-custom-cursor,
html.has-custom-cursor *{ cursor: none !important; }

/* --- Táctil: off */
@media (pointer: coarse){
  .cursor{ display: none; }
  html.has-custom-cursor,
  html.has-custom-cursor *{ cursor: auto !important; }
}

/* --- Motion reducido: sin animación de estados */
@media (prefers-reduced-motion: reduce){
  .cursor-ring, .cursor-dot{ transition: none; }
}

/* ---------- §19 · Footer + footer reveal ---------- */
.foot{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gutter);
  padding: 80px var(--gutter) 6px;
  font-size: 13px;
  color: var(--mute);
}

/* Footer reveal — fixed al fondo, el contenido scrollea por encima y lo desvela.
   z-index: -1 dentro del stacking context de .frame (z-index:2) lo coloca
   detrás de todas las secciones (que no declaran z-index) pero encima de
   bgmap/bgveil que son hermanos de .frame con z-index menor.
   JS añade padding-bottom al .frame = altura del footer para que
   el último contenido pueda scrollearse por encima hasta despejarlo.   background-image: url("https://mutador.com/images/bg_bn_grain.webp"); background-repeat: no-repeat;background-size: cover;  */
.footer-reveal {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: -1;
  padding: 3% var(--gutter) 0;
background: var(--footer);
  /* Empieza invisible; JS añade .footer-reveal--visible cuando el scroll
     llega al final y no hay contenido tapando el footer */
  opacity: 0;
  pointer-events: none;
  transition: opacity .6s ease, background-color .5s ease;
 
}
.footer-reveal--visible {
  opacity: 1;
  pointer-events: auto;
}
body[data-theme="dark"] .footer-reveal {
  background: var(--ink);
}

ul.footer-list{list-style: none}
/* En móvil: volvemos a flujo normal.
   position: fixed en móvil interactúa mal con el chrome del browser
   (barra de dirección, teclado virtual) y crea huecos en blanco. */
@media (max-width: 720px) {
  .footer-reveal {
    position: relative;
    padding: 60px var(--gutter) 32px;
  }
}
.foot .col{ font-style: italic; }
.foot .h{
  font-family: var(--mono); font-size: 11px; letter-spacing:.08em; text-transform:uppercase;
  color: var(--ink); font-style:normal; margin-bottom:10px; 
}
body[data-theme="dark"] .foot .h{ color: var(--paper); }
.foot .c1{ grid-column: 1 / span 3;padding-right: 20% }
.foot .c2{ grid-column: 5 / span 2; }
.foot .c3{ grid-column: 7 / span 2; }
.foot .c4{ grid-column: 11 / span 3; text-align:right; }
.foot a{ color: var(--ink); }
body[data-theme="dark"] .foot a{ color: var(--paper); }
.foot a:hover{ color: var(--accent); }

.sig{
  grid-column: 1 / -1;
  display:flex; justify-content: space-between; align-items: baseline;
  font-family: var(--mono); font-size:11px; letter-spacing:.08em; text-transform: uppercase;
  color: var(--mute);
  padding-top: 22px; border-top: 1px solid var(--rule); margin-top: 40px;
}
.sig .big{
  font-family: var(--display); font-size: 88px; letter-spacing:-.02em;
  color: var(--ink); line-height:1; text-transform: none;
}
body[data-theme="dark"] .sig .big{ color: var(--paper); }

/* ---------- §20 · Tweaks panel (dev UI) ---------- */
.tweaks{
  position: fixed;
  right: 16px; bottom: 16px;
  width: 240px;
  background: var(--paper);
  border: 1px solid var(--ink);
  font-family: var(--mono); font-size: 11px;
  color: var(--ink);
  z-index: 100;
  display: block;
  transition: opacity .2s ease;
}
.tweaks.on{ display:block; }
.tweaks.hidden{ display:none; }
.tweaks h4{
  margin:0; padding: 8px 10px; font-size: 11px; letter-spacing:.08em; text-transform: uppercase;
  border-bottom: 1px solid var(--ink); display:flex; justify-content: space-between; align-items:center;
}
.tweaks-close{
  background: none; border: none; padding: 0 2px;
  font-family: var(--mono); font-size: 14px; line-height:1;
  color: var(--mute); cursor: pointer;
  transition: color .15s;
}
.tweaks-close:hover{ color: var(--ink); }
.tweaks-open{
  position: fixed;
  right: 16px; bottom: 16px;
  width: 28px; height: 28px;
  background: var(--paper);
  border: 1px solid var(--ink);
  font-family: var(--mono); font-size: 16px; line-height:1;
  color: var(--ink); cursor: pointer;
  z-index: 100;
  display: none;
  align-items: center; justify-content: center;
  transition: background .15s, color .15s;
}
.tweaks-open.visible{ display:flex; }
.tweaks-open:hover{ background: var(--ink); color: var(--paper); }
.tweaks .grp{ padding: 10px; border-bottom: 1px solid var(--rule); }
.tweaks .grp:last-child{ border-bottom: 0; }
.tweaks label{ display:flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom:6px; }
.tweaks label:last-child{ margin-bottom: 0; }
.tweaks select, .tweaks input[type="range"]{ font: inherit; }
.tweaks .seg{ display:flex; border:1px solid var(--ink); }
.tweaks .seg button{
  flex:1; background: transparent; border:0; padding: 5px 8px;
  font: inherit; cursor: pointer; text-transform: uppercase; letter-spacing:.06em;
  color: var(--ink);
}
.tweaks .seg button.on{ background: var(--ink); color: var(--paper); }
.tweaks .seg button + button{ border-left: 1px solid var(--ink); }
.tweaks select{
  background: var(--paper); border: 1px solid var(--ink); padding: 3px 6px;
}
.tweaks input[type="range"]{ width: 110px; }

/* ---------- §21 · Body modifiers (data-density / data-accent) ---------- */
body[data-density="tight"]  { --row: 28px; }
body[data-density="default"]{ --row: 34px; }
body[data-density="loose"]  { --row: 46px; }

body[data-accent="off"]{ --accent: var(--ink); }
body[data-theme="dark"][data-accent="off"]{ --accent: var(--paper); }

body[data-pair="geigy-life"] { --display:"Geigy","Times New Roman",serif; --body:"Life",Georgia,serif; }
body[data-pair="life-geigy"] { --display:"Life",Georgia,serif; --body:"Geigy","Times New Roman",serif; }
body[data-pair="system"]     { --display: ui-serif, Georgia, serif; --body: ui-sans-serif, system-ui, sans-serif; }

/* entrance */
.reveal{ opacity: 0; transform: translateY(6px); transition: opacity .9s ease, transform .9s ease; }
.reveal.in{ opacity: 1; transform: none; }
.reveal.d2{ transition-delay: .08s; }
.reveal.d3{ transition-delay: .16s; }
.reveal.d4{ transition-delay: .24s; }

/* ---------- §22 · Mobile nav: square logo + hamburger + drawer ---------- */
.mobile-logo{
  display: none;
  width: 34px; height: 34px;
  grid-column: 1 / span 3;
  align-self: center;
  position: relative;
}
.mobile-logo img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  transition: opacity .45s ease;
}
.mobile-logo .l-light{ opacity: 1; }
.mobile-logo .l-dark { opacity: 0; }
body[data-theme="dark"] .mobile-logo .l-light{ opacity: 0; }
body[data-theme="dark"] .mobile-logo .l-dark { opacity: 1; }

.hamburger{
  display: none;
  grid-column: 10 / span 3;
  justify-self: end;
  align-self: center;
  width: 34px; height: 34px;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--ink);
  position: relative;
}
body[data-theme="dark"] .hamburger{ color: var(--paper); }
.hamburger:focus-visible{ outline: 1px solid currentColor; outline-offset: 4px; }
.hamburger .bar{
  position: absolute;
  left: 6px; right: 6px;
  height: 1.5px;
  background: currentColor;
  transform-origin: center;
  transition: transform .28s ease, opacity .2s ease, top .28s ease;
}
.hamburger .bar.b1{ top: 11px; }
.hamburger .bar.b2{ top: 17px; }
.hamburger .bar.b3{ top: 23px; }
.hamburger[aria-expanded="true"] .bar.b1{ top: 17px; transform: rotate(45deg); }
.hamburger[aria-expanded="true"] .bar.b2{ opacity: 0; }
.hamburger[aria-expanded="true"] .bar.b3{ top: 17px; transform: rotate(-45deg); }

/* .drawer ahora es un Bootstrap .offcanvas.offcanvas-top.
   Bootstrap controla: position fixed, transform/transition, visibility,
   z-index (1045 por defecto) y la clase .show para abrir/cerrar.
   Aquí solo aportamos el look editorial. */
.drawer{
  padding: 22px var(--gutter) 32px;
  border-bottom: 1px solid var(--rule);
  box-shadow: 0 20px 40px -24px rgba(0,0,0,.18);
}
.drawer-head{
  display:flex; justify-content: space-between; align-items: center;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--rule);
}
.drawer-head .dlogo{ width: 34px; height: 34px; display:block; }
.drawer-head .dlogo img{ width:100%; height:100%; display:block; }
.drawer-close{
  width: 34px; height: 34px;
  background: transparent; border: 0; padding: 0; cursor: pointer;
  color: var(--ink); position: relative;
}
.drawer-close:focus-visible{ outline: 1px solid var(--ink); outline-offset: 4px; }
.drawer-close::before, .drawer-close::after{
  content:""; position:absolute; left: 6px; right: 6px; top: 16px; height: 1.5px; background: currentColor;
}
.drawer-close::before{ transform: rotate(45deg); }
.drawer-close::after{ transform: rotate(-45deg); }

.drawer nav{
  display:flex; flex-direction: column;
  padding: 32px 0 28px;
  gap: 4px;
}
.drawer nav a{
  font-family: var(--display);
  font-size: clamp(34px, 9vw, 56px);
  line-height: 1.08;
  letter-spacing: -.01em;
  padding: 6px 0;
  color: var(--ink);
}
.drawer nav a.current{ font-style: italic; color: var(--accent); }
.drawer nav a em{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--mute);
  text-transform: uppercase;
  font-style: normal;
  margin-left: .6em;
  vertical-align: middle;
}
.drawer .dmeta{
  font-family: var(--mono);
  font-size: 11px;
  color: var(--mute);
  letter-spacing: .04em;
  text-transform: uppercase;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
  display:flex; justify-content: space-between;
}
.drawer .dmeta .pulse{
  display:inline-block; width:6px; height:6px; background: var(--accent); border-radius:50%;
  margin-right:6px; transform: translateY(-1px);
  animation: pulse 2.4s ease-in-out infinite;
}

/* body.drawer-open ya no hace falta — Bootstrap maneja el overflow
   del body automáticamente cuando el offcanvas está abierto. */

/* =========================================================
   §23 · SECCIONES BS-* (SPBuilder-ready)
   Grid interno con Bootstrap; tipografía y color con los
   mismos tokens del resto del template. Incluye Servicios,
   Equipo, Clientes (con hover editorial), Pullquote, Heading.
   ========================================================= */

/* Base */
.bs-section{
  padding: clamp(72px, 11vw, 140px) var(--gutter)!important;
  position: relative;   /* ancla sticker e imagen flotante */
}
.bs-section--dark{
  background: var(--ink);
  color: var(--paper);
}
.bs-section--light{
  background: var(--paper);
  color: var(--ink);
}

/* Etiqueta de sección — mono pequeño col izquierda */
.bs-label{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mute);
  margin: 0;
  padding-top: 6px;
  line-height: 1.4;
}
.bs-section--dark .bs-label{ color: rgba(239,236,228,.38); }

/* Párrafo editorial */
.bs-body{
  font-family: var(--body);
  font-size: clamp(16px, 1.55vw, 20px);
  line-height: 1.55;
  color: inherit;
  margin: 0;
  max-width: 54ch;
}
.bs-body + .bs-body{ margin-top: 1.15em; }
.bs-section--dark .bs-body{ color: rgba(239,236,228,.72); }
.bs-body em{ font-style: italic; color: var(--accent); }

/* Pullquote — grande, display */
.bs-pullquote{
  font-family: var(--display);
  font-size: clamp(34px, 4.8vw, 68px);
  line-height: 1.04;
  letter-spacing: -.015em;
  font-weight: 400;
  color: var(--paper);
  margin: clamp(48px, 7vw, 96px) 0 0;
  padding: 0;
  border: none;
}
.bs-pullquote em{
  font-family: var(--body);
  font-style: italic;
  color: var(--accent);
  font-size: .88em;
  letter-spacing: 0;
}

/* Heading de sección */
.bs-heading{
  font-family: var(--display);
  font-size: clamp(40px, 5.6vw, 80px);
  line-height: 1.0;
  letter-spacing: -.018em;
  font-weight: 400;
  margin: 0 0 clamp(20px, 4vw, 22px);
  color: inherit;
}
.bs-heading em{
  font-family: var(--body);
  font-style: italic;
  color: var(--accent);
  font-size: 1.2em;
  letter-spacing: 0;
}
.bs-section--dark .bs-heading{ color: var(--paper); }

/* --- Servicios --- */
.bs-service-item{
  padding: 26px 0;
  border-top: 1px solid var(--rule);
  transition: padding-left .35s ease;
}
@media (hover: hover){
  .bs-service-item:hover{ padding-left: 14px; }
}
.bs-section--dark .bs-service-item{ border-color: rgba(239,236,228,.13); }
.bs-service-n , .bs-service-n p{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mute);
  display: block;
  margin-bottom: 10px;
}
.bs-section--dark .bs-service-n{ color: rgba(239,236,228,.38); }
.bs-service-title , .bs-service-title p{
  font-family: var(--display);
  font-size: clamp(22px, 2.8vw, 38px);
  line-height: 1.05;
  letter-spacing: -.01em;
  font-weight: 400;
  margin: 0 0 12px;
  color: inherit;
}
.bs-service-desc{
  font-family: var(--body);
  font-size: 14px;
  line-height: 1.55;
  color: var(--mute);
  margin: 0;

}
.bs-section--dark .bs-service-desc{ color: rgba(239,236,228,.5); }

/* ==========================================================================
   bs-service-item — Variante con media (imagen/gif a la derecha)
   --------------------------------------------------------------------------
   Sumario:
   - Se activa con la clase modificadora `.bs-service-item--with-media`
   - Texto se agrupa en `.bs-service-text` (label + título + desc)
   - Imagen (o el placeholder SPBuilder) se envuelve en `.bs-service-media`
   - Layout grid 2 columnas en desktop, apilado en móvil (imagen arriba)
   - Hover (padding-left de 14px ya existente) se desplaza solo al texto
     para que la imagen no se mueva con el item
   - object-fit: cover por defecto; aspect-ratio cuadrado para gifs filosofía
   ========================================================================== */

/* --- Layout principal --- */
.bs-service-item--with-media{
  display: grid;
grid-template-columns: minmax(0, 1fr) clamp(120px, 18vw, 120px);
  gap: clamp(16px, 2vw, 32px);
  align-items: center;
}

/* --- Wrapper del texto (recibe el hover en lugar del item completo) --- */
.bs-service-text{
  min-width: 0;
  transition: padding-left .35s ease;

  max-width: 65ch;
}
/* --- Wrapper del media (envuelve el placeholder SPBuilder o el <img>) --- */
.bs-service-media{
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.bs-service-media img,
.bs-service-media > *{
  width: 100%;
  height: 100%;
  object-fit: contain;   /* no recorta los gifs aunque no sean cuadrados */
  display: block;
}

/* --- Hover: anula el padding-left del item base y lo aplica al texto --- */
@media (hover: hover){
  .bs-service-item--with-media:hover{ padding-left: 0; }
  .bs-service-item--with-media:hover .bs-service-text{ padding-left: 14px; }
}

/* --- Móvil: dos columnas también, imagen pequeña a la derecha --- */
@media (max-width: 768px){
  .bs-service-item--with-media{
grid-template-columns: minmax(0, 1fr) clamp(80px, 25%, 140px);
    gap: 20px;
    align-items: start;
  }
  .bs-service-item--with-media:hover .bs-service-text{ padding-left: 0; }
}

/* --- Equipo --- */
.bs-member{
  padding: 30px 0;
  border-top: 1px solid rgba(239,236,228,.14);
}
.bs-member-name{
  font-family: var(--display);
  font-size: clamp(26px, 3.4vw, 44px);
  letter-spacing: -.012em;
  font-weight: 400;
  line-height: 1.04;
  color: var(--paper);
  margin: 0 0 8px;
}
.bs-member-role{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(239,236,228,.38);
  display: block;
  margin-bottom: 14px;
}
.bs-member-bio{
  font-family: var(--body);
  font-size: 14px;
  font-style: italic;
  line-height: 1.55;
  color: rgba(239,236,228,.55);
  margin: 0;
  max-width: 36ch;
}

/* --- Clientes --- */
.bs-client-item{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 16px 0;
  border-top: 1px solid var(--rule);
  transition: border-color .36s cubic-bezier(.22,1,.36,1);
}
.bs-client-item:last-child{
  border-bottom: 1px solid var(--rule);
  transition: border-color .36s cubic-bezier(.22,1,.36,1);
}
.bs-client-item > span:first-child{
  font-family: var(--display);
  font-size: clamp(18px, 2.2vw, 28px);
  letter-spacing: -.01em;
  font-weight: 400;
  color: var(--ink);
  line-height: 1.2;
  transition: transform .36s cubic-bezier(.22,1,.36,1);
  will-change: transform;
}

/* --- Hover editorial: desplaza el nombre, tiñe la categoría,
       refuerza el separador. Solo en dispositivos con hover real. */
@media (hover: hover){
  .bs-client-item:hover{ border-top-color: var(--ink); }
  .bs-client-item:hover:last-child{ border-bottom-color: var(--ink); }
  .bs-client-item:hover + .bs-client-item{ border-top-color: var(--ink); }
  .bs-client-item:hover > span:first-child{ transform: translateX(6px); }
  .bs-client-item:hover > span:last-child { color: var(--accent); }
}
.bs-client-item > span:last-child{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .07em;
  transition: color .36s cubic-bezier(.22,1,.36,1);
  text-transform: uppercase;
  color: var(--mute);
  white-space: nowrap;
  flex-shrink: 0;
}

/* =========================================================
   §24 · MARQUEE — dos filas, velocidades y direcciones opuestas
   ========================================================= */
.bs-marquee-section{
  background: var(--ink);
  overflow: hidden;
  padding: clamp(24px, 3.5vw, 44px) 0;
  border-top:    1px solid rgba(239,236,228,.08);
  border-bottom: 1px solid rgba(239,236,228,.08);
}
.bs-mq{ overflow: hidden; white-space: nowrap; }
.bs-mq + .bs-mq{ margin-top: clamp(8px, 1.2vw, 18px); }

.bs-mq-track{
  display: inline-flex;
  align-items: center;
  animation: bs-mq-left 32s linear infinite;
  will-change: transform;
}
.bs-mq--rev .bs-mq-track{
  animation: bs-mq-right 20s linear infinite;
}
@keyframes bs-mq-left{
  from{ transform: translateX(0); }
  to  { transform: translateX(-50%); }
}
@keyframes bs-mq-right{
  from{ transform: translateX(-50%); }
  to  { transform: translateX(0); }
}
/* Pausa el marquee si el usuario prefiere movimiento reducido */
@media (prefers-reduced-motion: reduce){
  .bs-mq-track{ animation-play-state: paused; }
}

.bs-mq-item{
  font-family: var(--display);
  font-size: clamp(38px, 5.8vw, 80px);
  letter-spacing: -.016em;
  line-height: 1;
  color: var(--paper);
  font-weight: 400;
  padding: 0 clamp(28px, 3.5vw, 60px);
}
.bs-mq--sm .bs-mq-item{
  font-family: var(--mono);
  font-size: clamp(10px, 1vw, 13px);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(239,236,228,.38);
  padding: 0 clamp(14px, 1.8vw, 28px);
}
.bs-mq-sep{ color: var(--accent); }
.bs-mq--sm .bs-mq-sep{ color: rgba(239,236,228,.2); }

/* =========================================================
   §25 · CAROUSEL — Swiper 11 · loop + autoplay + grab
   (+ Sticker badge rotante + Float image editorial)
   ========================================================= */
.bs-carousel-section{
  background: var(--ink);
  padding: clamp(40px, 6vw, 72px) 0 clamp(28px, 4vw, 48px);
  overflow-x: hidden;  /* recorta los slides que peekean por los bordes */
}
.bs-carousel-header{
  padding: 0 var(--gutter) clamp(20px, 3vw, 36px);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.bs-carousel-label{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(239,236,228,.38);
}
.bs-carousel-count{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .06em;
  color: rgba(239,236,228,.38);
}

/* El contenedor .swiper reemplaza .bs-carousel-track.
   overflow: visible permite que los slides peekeen;
   el overflow-x: hidden de la sección los recorta.
   touch-action: pan-y impide que el navegador interprete el drag
   horizontal como scroll de la página (causa típica de scroll-x en
   móvil al arrastrar el carrusel). */
#bsCarousel.swiper{
  overflow: visible;
  padding: 0 var(--gutter);
  user-select: none;
  touch-action: pan-y;
}
#bsCarousel .swiper-wrapper{ touch-action: pan-y; }

/* Swiper gestiona el flex del .swiper-wrapper internamente.
   Sólo anulamos sus estilos por defecto que chocan con el diseño. */
#bsCarousel .swiper-wrapper{
  align-items: stretch;
}

/* Tamaño del slide: ancho fijo para que Swiper pueda calcular
   cuántos caben (slidesPerView: 'auto'). */
.bs-slide{
  width: calc(100% - var(--gutter));  /* móvil: casi full-width */
  flex-shrink: 0;
}
.bs-slide-inner{
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #1e1c18;
}
.bs-slide-img{
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform .9s ease;
}
.bs-slide:hover .bs-slide-img{ transform: scale(1.04); }
.bs-slide-caption{
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: clamp(18px, 3vw, 32px);
  background: linear-gradient(
    to top,
    rgba(26,24,20,.92) 0%,
    rgba(26,24,20,.4) 55%,
    transparent 100%
  );
}
.bs-slide-tag{
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(239,236,228,.5);
  margin-bottom: 8px;
}
.bs-slide-title{
  font-family: var(--display);
  font-size: clamp(20px, 2.4vw, 30px);
  letter-spacing: -.01em;
  font-weight: 400;
  line-height: 1.1;
  color: var(--paper);
  margin: 0 0 5px;
}
.bs-slide-title em{
  font-family: var(--body);
  font-style: italic;
  color: rgba(239,236,228,.65);
  font-size: .86em;
}
.bs-slide-client{
  font-family: var(--body);
  font-size: 13px;
  font-style: italic;
  color: rgba(239,236,228,.45);
  margin: 0;
}

/* Dots editoriales (gestionados por nuestro JS, no por Swiper) */
.bs-dots{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 9px;
  padding: clamp(18px, 3vw, 30px) var(--gutter) 0;
}
.bs-dot{
  width: 5px; height: 5px;
  border-radius: 50%;
  background: rgba(239,236,228,.22);
  border: none; padding: 0;
  cursor: pointer;
  transition: background .3s ease, transform .3s ease;
  flex-shrink: 0;
}
.bs-dot.on{
  background: var(--paper);
  transform: scale(1.5);
}

/* Desktop: slide más estrecho → se ven ~2 + peek del siguiente */
@media (min-width: 721px){
  .bs-slide{ width: clamp(360px, 48vw, 620px); }
  .bs-slide-inner{ aspect-ratio: 3 / 4; }
}
@media (min-width: 1100px){
  .bs-slide{ width: clamp(420px, 42vw, 580px); }
}

/* ---- Sticker badge rotante ---- */
.bs-sticker{
  position: absolute;
  bottom: -54px;
  right: calc(var(--gutter) * 2);
  width: 108px;
  height: 108px;
  z-index: 10;
  pointer-events: none;
}
.bs-sticker-ring{
  position: absolute;
  inset: 0;
  animation: bs-sticker-spin 22s linear infinite;
}
.bs-sticker-ring svg{ width: 100%; height: 100%; }
.bs-sticker-center{
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 20px;
  line-height: 1;
  color: var(--accent);
}
.bs-section--dark  .bs-sticker { color: var(--paper); }
.bs-section--light .bs-sticker { color: var(--ink); }
@keyframes bs-sticker-spin{ to{ transform: rotate(360deg); } }

/* ==========================================================================
   Elementos flotantes dentro de SPBuilder — fix de anclaje
   --------------------------------------------------------------------------
   Sumario:
   - Aplica a `.bs-sticker` y `.bs-float-img` (cualquier elemento que
     necesite romper hacia la `.bs-section` outer con `position: absolute`).
   - SPBuilder los envuelve en .sppb-row > .sppb-row-column > .sppb-column
     > .sppb-column-addons (+ a veces .sppb-addon-wrapper > .clearfix).
   - Esos wrappers traen `position: relative` y/o `overflow: hidden`,
     lo que impide que el flotante se ancle a la sección.
   - Solución: con `:has(:is(...))` neutralizamos position y overflow SOLO
     en los wrappers que contienen un flotante, sin tocar el resto.
   - Para añadir un nuevo flotante, basta con añadir su clase al :is().
   ========================================================================== */

.bs-section:has(:is(.bs-sticker, .bs-float-img)),
.bs-section .sppb-container-inner:has(:is(.bs-sticker, .bs-float-img)),
.bs-section .sppb-row:has(:is(.bs-sticker, .bs-float-img)),
.bs-section .sppb-row-column:has(:is(.bs-sticker, .bs-float-img)),
.bs-section .sppb-column:has(:is(.bs-sticker, .bs-float-img)),
.bs-section .sppb-column-addons:has(:is(.bs-sticker, .bs-float-img)),
.bs-section .sppb-addon-wrapper:has(:is(.bs-sticker, .bs-float-img)),
.bs-section .sppb-addon-wrapper:has(:is(.bs-sticker, .bs-float-img)) > .clearfix{
  overflow: visible;
}

.bs-section .sppb-container-inner:has(:is(.bs-sticker, .bs-float-img)),
.bs-section .sppb-row:has(:is(.bs-sticker, .bs-float-img)),
.bs-section .sppb-row-column:has(:is(.bs-sticker, .bs-float-img)),
.bs-section .sppb-column:has(:is(.bs-sticker, .bs-float-img)),
.bs-section .sppb-column-addons:has(:is(.bs-sticker, .bs-float-img)),
.bs-section .sppb-addon-wrapper:has(:is(.bs-sticker, .bs-float-img)),
.bs-section .sppb-addon-wrapper:has(:is(.bs-sticker, .bs-float-img)) > .clearfix{
  position: static;
}

/* ---- Imagen flotante editorial ---- */
.bs-float-img{
  position: absolute;
  top: clamp(48px, 8vw, 88px);
  right: var(--gutter);
  width: clamp(100px, 12vw, 172px);
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center top;
  transform: rotate(-3.5deg);
  box-shadow: 0 6px 28px rgba(26,24,20,.22), 0 1px 4px rgba(26,24,20,.12);
  animation: bs-float 8s ease-in-out infinite;
  z-index: 2;
  pointer-events: none;
  will-change: transform;
}
@keyframes bs-float{
  0%, 100%{ transform: rotate(-3.5deg) translateY(0px); }
  50%{ transform: rotate(-3.5deg) translateY(-11px); }
}

/* Mobile overrides */
@media (max-width: 720px){
  .bs-section{ padding: clamp(56px, 14vw, 80px) var(--gutter); }
  .bs-pullquote{ font-size: clamp(28px, 9vw, 44px); }
  .bs-client-item > span:last-child{ display: none; }
  .bs-sticker{ display: none; }
  .bs-float-img{ display: none; }
}

/* ═══════════════════════════════════════════════════════
   §25b · Editorial slider — 60/40 (imagen/texto)
   Light · Swiper 11 · drag + dots, sin autoplay
   Reusa #editorialDots.bs-dots y .bs-dot (estilos §25).
   Móvil (<768): apilado imagen arriba (4/5) + texto debajo.
   ═══════════════════════════════════════════════════════ */
.bs-editorial-section{
  background: var(--paper);
  color: var(--ink);
  padding: clamp(40px, 8vw, 96px) 0;
  overflow: hidden;
}

/* Header — label + contador, mismo ritmo que bs-carousel-header */
.bs-editorial-header{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0 var(--gutter);
  margin-bottom: clamp(24px, 4vw, 56px);
  font: 11px/1 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mute);
}
.bs-editorial-label{ color: var(--ink); }
.bs-editorial-count{ font-variant-numeric: tabular-nums; }

/* Slide — grid 60/40 a sangre */
.bs-editorial-slide{

  display: grid;
  grid-template-columns: 60% 40%;
  align-items: stretch;
}

/* Media izquierda — por defecto full-bleed (cover, recorta si hace falta) */
.bs-editorial-media{
  position: relative;
  overflow: hidden;
  background: #d6cfbd;
}
.bs-editorial-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Variante "filosofía" — imagen proporcional centrada, sin recorte.
   El flex va al CONTENEDOR (no al img). La imagen conserva ratio
   y se limita con max-* para no desbordar el slide. */
.bs-editorial-media-filosofia{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(20px, 3vw, 48px);
  background: var(--paper);
  overflow: hidden;
}
.bs-editorial-media-filosofia img{
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}
.bs-editorial-media-filosofia img{
  width: auto;
  height: auto;
  object-fit: cover;
  display: block;
    display: flex;
  flex-direction: column;
  justify-content: center;
}
/* Cuerpo derecho — centrado vertical, generoso en aire */
.bs-editorial-body{
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(14px, 1.4vw, 22px);
  padding: clamp(24px, 4vw, 64px);
}
.bs-editorial-eyebrow{
  font: 11px/1 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mute);
}
.bs-editorial-title{
  font: 400 clamp(2rem, 3.6vw, 3rem)/1.05 var(--display);
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
}
.bs-editorial-title em{
  font-style: italic;
  color: var(--mute);
  font-weight: 300;
}
.bs-editorial-text{
  font: 400 clamp(0.95rem, 1.05vw, 1.0625rem)/1.55 var(--body);
  color: var(--ink);
  max-width: 36ch;
  margin: 0;
}
.bs-editorial-link{
  align-self: flex-start;
  margin-top: 6px;
  font: 11px/1 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--ink);
  transition: color .25s ease, border-color .25s ease;
}
.bs-editorial-link:hover{
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* Dots propios — mismos estilos base de .bs-dots/.bs-dot del §25 */
#editorialDots.bs-dots{
  padding: clamp(20px, 3vw, 36px) var(--gutter) 0;
}

/* Móvil: apilado */
@media (max-width: 768px){
  .bs-editorial-slide{
    height: auto;
    min-height: 0;
    grid-template-columns: 1fr;
  }
  .bs-editorial-media{
    aspect-ratio: 4 / 5;
  }
  .bs-editorial-body{
    padding: clamp(20px, 6vw, 36px) var(--gutter);
  }
  .bs-editorial-text{ max-width: none; }
}

/* ---------- §26 · Responsive (720 / 720–900) ---------- */
@media (max-width: 720px){
  .mark{ display: none; }
  .nav{ display: none; }
  .meta{ display: none; }
  .mobile-logo{ display: block; }
  .hamburger{ display: block; }
  .topbar{ padding-bottom: 6px; }

  .kicker{ grid-column: 1 / -1; padding-bottom: 8px; }
  .statement{ grid-column: 1 / -1; font-size: 40px; }
  .aside{ grid-column: 1 / -1; padding-top: 24px; }
  .entry{ grid-template-columns: repeat(6, 1fr); height: auto; padding: 10px 0; }
  .entry .n{ grid-column: 1 / span 1; padding-top: 4px; }
  .entry .t{ grid-column: 2 / span 5; font-size: 20px; }
  .entry .c{ grid-column: 2 / span 5; padding-top:4px; }
  .entry .d, .entry .y{ display:none; }

  .masonry{ column-count: 1; }
  /* On mobile the compact 5.5-card layout is too tight; show 2.2 cards. */
  .f-slide{ width: calc((100% - var(--gutter) * 1.2) / 2.2); }
  .f-slide .f-title{ font-size: 14px; }
  .manifesto{ padding: 48px 24px; margin: 12px 0 18px; }
  .manifesto-line{ font-size: clamp(36px, 11vw, 64px); }

  .foot .c1,.foot .c2,.foot .c3,.foot .c4{ grid-column: 1 / -1; text-align: left; margin-bottom: 18px; }
  .sig .big{ font-size: 56px; }

  /* La miniatura de cursor no tiene sentido en táctil:
     mouseenter puede quedarse activa al tocar y no soltarse. */
  .preview{ display: none; }
}

@media (min-width: 721px) and (max-width: 900px){
  .mark{ grid-column: 1 / span 3; }
  .nav{ grid-column: 4 / span 6; gap: 14px; }
  .meta{ grid-column: 10 / span 3; }
  .masonry{ column-count: 2; }
  /* Tablet: 3.5 filmstrip cards visible */
  .f-slide{ width: calc((100% - var(--gutter) * 2.5) / 3.5); }
}


/* ==========================================================================
   08 addon image responsive
   ==========================================================================
   El preloader cubre la página entera mientras el JS calcula el layout.
   Una vez Isotope termina, se añade la clase .preloader-hidden al body
   y la transición CSS lo desvanece y lo saca del flujo con pointer-events:none.
   ========================================================================== */
.mut-bg-image{width: 100%; height: 100%; min-height: 50vh; /* Asegura que la imagen no se repita */
    background-repeat: no-repeat;

    /* Centra la imagen dentro del div */
    background-position: center center;

    /* Clave: ajusta la imagen para cubrir todo el div */
    background-size: cover;

    /* Establece la altura del contenedor */
    /* O '100%' si el padre tiene altura definida */
 }



/* ==========================================================================
09 addon video mut
   ========================================================================== */
div.mut-video-player { width: 100%; overflow: hidden;   border-radius: 15px; }
div.mut-video-player video{ width: 100%; overflow: hidden;    border-radius: 15px; }

/* addon image randoom. Esto hace que cualquier etiqueta <img> dentro de tu addon sea responsiva */
.sppb-addon-wrapper.addon-root-mut-imagenrandom{overflow: hidden}
.mut-simple img, 
.mut-galeria-item img {
    max-width: 100%;
    width: auto;
    height: auto;
    display: block; /* Evita pequeños márgenes extraños en la parte inferior */
    border-radius: 15px; /* Opcional: si quieres bordes redondeados */
}