/* =============================================================
   Contrast 3D — hoja de estilo del sitio local
   Reconstruida el 24-08-2026 a partir de los valores REALES del
   sitio vivo (extraidos de _source/live/html/home.html).
   Fuentes de verdad:
     docs/live-home-secciones.css   (CSS original por seccion)
     docs/live-home-secciones.html  (marcado original)
     docs/live-header.min.css       (cabecera + cursor)
   Los nombres de clase son los del sitio vivo A PROPOSITO, para
   poder diferenciar 1:1 contra la pagina real. Se renombraran en
   una pasada unica cuando el render sea identico.
   ============================================================= */

/* ============================================================
   COLOR. Toda la hoja pinta con estos tokens; ningun negro, blanco o gris
   va escrito a mano mas abajo. El modo oscuro es el NEGATIVO exacto del
   claro: se intercambian tinta y papel, y cada gris pasa a su opuesto. El
   cian y el morado no cambian, y el texto que va encima de ellos tampoco
   (--sobre-cian, --sobre-morado), para que un boton cian siga siendo cian
   con letra negra en los dos modos.
   Se activa solo con el ajuste del dispositivo (prefers-color-scheme).
   ============================================================ */
:root {
  color-scheme: light dark;
  --negro: #000000;              /* la tinta */
  --negro-suave: #111111;
  --blanco: #ffffff;             /* el papel */
  --tinta-rgb: 0, 0, 0;          /* para rgba(var(--tinta-rgb), .x) */
  --papel-rgb: 255, 255, 255;
  --cian: #00FFE0;
  --morado: #8000FF;
  --sobre-cian: #000000;         /* texto encima de cian: no se invierte */
  --sobre-morado: #ffffff;       /* texto encima de morado: tampoco */
  --gris-texto: rgba(var(--tinta-rgb), 0.68);
  --gris-1a: #1a1a1a;
  --gris-2a: #2a2a2a;
  --gris-44: #444444;
  --gris-4a: #4a4a4a;
  --gris-55: #555555;
  --gris-73: #737373;
  --gris-76: #767676;
  --gris-8a: #8a8a8a;
  --gris-9a: #9a9a9a;
  --gris-cf: #cfcfcf;
  --gris-dc: #dcdcdc;
  --gris-e0: #e0e0e0;
  --gris-e2: #e2e2e2;
  --gris-ed: #ededed;
  --gris-f1: #f1f1f1;
  --gris-f2: #f2f2f2;
  --gris-f4: #f4f4f4;
  --gris-f6: #f6f6f6;
  --gris-fa: #fafafa;
  --contenedor: 1180px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --negro: #ffffff;
    --negro-suave: #eeeeee;
    --blanco: #000000;
    --tinta-rgb: 255, 255, 255;
    --papel-rgb: 0, 0, 0;
  --gris-1a: #e5e5e5;
  --gris-2a: #d5d5d5;
  --gris-44: #bbbbbb;
  --gris-4a: #b5b5b5;
  --gris-55: #aaaaaa;
  --gris-73: #8c8c8c;
  --gris-76: #898989;
  --gris-8a: #757575;
  --gris-9a: #656565;
  --gris-cf: #303030;
  --gris-dc: #232323;
  --gris-e0: #1f1f1f;
  --gris-e2: #1d1d1d;
  --gris-ed: #121212;
  --gris-f1: #0e0e0e;
  --gris-f2: #0d0d0d;
  --gris-f4: #0b0b0b;
  --gris-f6: #090909;
  --gris-fa: #050505;
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
/* Las lineas decorativas de 100vw (.seccion-borde-superior, .cw-work-section,
   .cmp-status, .cmp-docs) miden el ancho CON la barra de scroll vertical y
   asomaban 8 px por la derecha: barra horizontal en /work/ y en la tienda.
   clip recorta sin crear un contenedor de scroll, asi que sticky sigue
   funcionando. */
html { overflow-x: clip; }

body {
  margin: 0;
  padding-top: 90px;                 /* compensa la cabecera fija */
  background: var(--blanco);
  color: var(--negro);
  font-family: "Sofia Sans", "Sofia Pro", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* height:auto va con los width/height que dimensionar_img.py pone en cada
   <img>: el navegador reserva el hueco con la proporcion antes de bajar la
   imagen (sin salto de maqueta) y la altura sigue la anchura real. Sin
   height:auto, una imagen limitada por max-width se quedaria con la altura
   del atributo y se deformaria. */
img { max-width: 100%; height: auto; }
a { color: inherit; }

.salta-al-contenido {
  position: absolute; left: -9999px; top: 0;
  background: var(--negro); color: var(--blanco); padding: 10px 16px; z-index: 10000;
}
.salta-al-contenido:focus { left: 0; }

/* ============================================================
   CABECERA FIJA   (live: #site-header.minimal-header.center-menu)
   ============================================================ */

#site-header {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 90px;
  z-index: 9999;
  background: rgba(var(--papel-rgb), 0.95);
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  transition: background .4s ease, backdrop-filter .4s ease, height .4s ease;
  overflow: hidden;
}
#site-header.header-scrolled {
  height: 65px;
  /* Antes .45: el texto blanco del menu sobre ese velo, encima del fondo
     blanco de la pagina, quedaba en 3,35:1 (WCAG pide 4,5). Con .58 da 5,6:1
     y sigue viendose la pagina a traves. */
  background: rgba(var(--tinta-rgb), 0.58);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
}

.header-inner {
  position: relative;
  width: 90%;
  height: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
}

#site-logo { position: relative; z-index: 3; display: inline-flex; align-items: center; }
#site-logo a { display: inline-flex; align-items: center; transition: transform .25s ease; }
#site-logo a:hover { transform: scale(1.04); }
#site-logo img {
  width: 40px; height: 40px;
  object-fit: contain;
  display: inline-block;
  will-change: transform;
  backface-visibility: hidden;
  transform-origin: center;
  transition: opacity .3s ease;
}
#site-logo img:hover,
.footer-logo img:hover { animation: logoSpin 1.4s cubic-bezier(.7, 0, .2, 1); }

@keyframes logoSpin {
  0%   { transform: rotate(0deg)   scale(1);    }
  12%  { transform: rotate(-18deg) scale(.92);  }
  40%  { transform: rotate(180deg) scale(1.06); }
  60%  { transform: rotate(300deg) scale(1.12); }
  75%  { transform: rotate(372deg) scale(1.06); }
  88%  { transform: rotate(355deg) scale(.98);  }
  100% { transform: rotate(360deg) scale(1);    }
}

/* nav centrada en la pagina, no en el hueco sobrante */
#site-navigation {
  position: absolute;
  left: 50%;
  top: 0;
  height: 100%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  align-items: center;
}
#site-navigation a {
  display: inline-flex;
  align-items: center;
  height: 100%;
  padding: 0 15px;
  font-family: "Open Sans", "Sofia Sans", Arial, sans-serif;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .6px;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--gris-4a);
  transition: color .25s ease;
}
#site-header.header-scrolled #site-navigation a { color: var(--blanco); }

/* El texto va dentro de un <span data-texto="...">. El ::before repite el
   mismo texto en negrita, invisible y con altura 0: reserva el ancho del
   estado hover, asi la negrita no empuja al resto del menu. */
#site-navigation a span {
  position: relative;
  display: inline-block;
  transition: font-weight .18s ease;
}
#site-navigation a span::before {
  content: attr(data-texto);
  display: block;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
  font-weight: 700;
}
#site-navigation a:hover span { font-weight: 700; }
#site-navigation a:focus-visible span { font-weight: 700; }

/* linea morada: entra de izquierda a derecha, sale igual */
#site-navigation a span::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -7px;
  height: 2px;                          /* el grosor de linea del sitio */
  background: var(--morado);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .34s cubic-bezier(.22, 1, .36, 1);
}
#site-navigation a:hover span::after { transform: scaleX(1); }
#site-navigation a:focus-visible span::after { transform: scaleX(1); }
/* La seccion en la que estas se queda con la linea morada puesta, para que
   se sepa donde se esta (David, 01-09-2026). aria-current lo pone cabeza(). */
#site-navigation a[aria-current="page"] span { font-weight: 700; }
#site-navigation a[aria-current="page"] span::after { transform: scaleX(1); }

/* El boton de idioma, a la derecha, en recuadro como el de menu. Al pulsar o
   pasar por encima se invierte: fondo negro, texto blanco. */
.nav-idioma {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  border: 2px solid currentColor;
  color: inherit;
  background: none;
  font: 900 11px/1 "Sofia Sans", Arial, sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 12px 14px;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.nav-idioma:hover,
.nav-idioma:active {
  background: var(--negro);
  border-color: var(--negro);
  color: var(--blanco);
}
.nav-idioma:focus-visible {
  background: var(--negro);
  border-color: var(--negro);
  color: var(--blanco);
}
.nav-idioma:focus-visible { outline: 2px solid var(--cian); outline-offset: 2px; }
#site-header.header-scrolled .nav-idioma { color: var(--blanco); }
/* El boton de menu hereda el color del texto (negro). Con la cabecera
   scrolleada, que se pone oscura, se quedaba casi invisible: texto y borde
   negros sobre fondo negro al 58 %. */
#site-header.header-scrolled .nav-burger { color: var(--blanco); }
#site-header.header-scrolled .nav-idioma:hover,
#site-header.header-scrolled .nav-idioma:active {
  background: var(--negro); border-color: var(--blanco); color: var(--blanco);
}
#site-header.header-scrolled .nav-idioma:focus-visible {
  background: var(--negro); border-color: var(--blanco); color: var(--blanco);
}

.nav-burger {
  display: none;
  margin-left: auto;
  background: none;
  border: 2px solid currentColor;
  color: inherit;
  font: 900 11px/1 "Sofia Sans", Arial, sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 12px 14px;
  cursor: pointer;
}

/* ============================================================
   CURSOR PERSONALIZADO
   ============================================================ */

#cursor-follow {
  position: fixed; top: 0; left: 0;
  width: 50px; height: 50px;
  pointer-events: none;
  transform: translate(-50%, -50%);
  z-index: 9999;
}
.cursor-dot {
  position: absolute; top: 50%; left: 50%;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--cian);
  transform: translate(-50%, -50%) scale(1) rotate(0deg);
  transition: opacity .25s ease, transform .4s cubic-bezier(.22, 1, .36, 1);
}
.cursor-dot.is-hover { transform: translate(-50%, -50%) scale(.6); }

@media (min-width: 1025px) and (hover: hover) {
  html, body, a, button, [role="button"], input, textarea { cursor: none !important; }
}
@media (max-width: 1024px) {
  #cursor-follow { display: none !important; }
}

/* ============================================================
   HEROE   (live: .contrast-home-dotwave-*)
   ============================================================ */

.contrast-home-dotwave-hero {
  position: relative;
  width: 100%;
  min-height: calc(100vh - 90px);
  overflow: hidden;
  background: var(--blanco);
  isolation: isolate;
}
.contrast-home-dotwave-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  background: var(--blanco);
  z-index: 1;
}
.contrast-home-dotwave-hint {
  position: absolute;
  top: 22px; right: 22px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  background: var(--blanco);
  border: 2px solid var(--negro);
  border-radius: 0;
  color: var(--negro);
  cursor: pointer;
  appearance: none;
  transition: background .22s ease, transform .22s ease;
}
.contrast-home-dotwave-hint:hover { background: var(--cian); transform: translateY(-2px); }
.contrast-home-dotwave-hint:active { transform: translateY(0); }
.contrast-home-dotwave-hint-text {
  font-family: "Sofia Sans", Arial, sans-serif;
  font-size: 11px; font-weight: 900; line-height: 1;
  letter-spacing: .14em; text-transform: uppercase;
  white-space: nowrap; color: var(--negro);
  transition: color .25s ease;
}

.contrast-home-dotwave-scroll {
  position: absolute;
  left: max(22px, calc((100% - min(1180px, calc(100% - 44px))) / 2));
  bottom: clamp(22px, 4.4vh, 46px);
  z-index: 4;
  display: inline-flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 12px;
  color: var(--negro);
  text-decoration: none;
  pointer-events: auto;
  transition: color .25s ease;
}
.contrast-home-dotwave-scroll-text {
  order: 2;
  font-family: "Sofia Sans", Arial, sans-serif;
  font-size: 11px; font-weight: 900; line-height: 1;
  letter-spacing: .14em; text-transform: uppercase;
  white-space: nowrap;
}
.contrast-home-dotwave-scroll-line {
  order: 1;
  position: relative; display: block;
  width: 2px; height: 72px;
  overflow: hidden;
  background: rgba(var(--tinta-rgb), .18);
  transition: background .25s ease;
}
.contrast-home-dotwave-scroll-line span {
  position: absolute; left: 0; top: 0;
  display: block; width: 100%; height: 26px;
  background: var(--negro);
  animation: dotwaveScrollMove 1.7s ease-in-out infinite;
  transition: background .25s ease;
}
.contrast-home-dotwave-scroll:hover .contrast-home-dotwave-scroll-text { color: var(--morado); }
.contrast-home-dotwave-scroll:hover .contrast-home-dotwave-scroll-line { background: rgba(128, 0, 255, .22); }
.contrast-home-dotwave-scroll:hover .contrast-home-dotwave-scroll-line span { background: var(--morado); }

@keyframes dotwaveScrollMove {
  0%   { transform: translateY(-100%); opacity: 0; }
  28%  { opacity: 1; }
  100% { transform: translateY(260%);  opacity: 0; }
}

.contrast-home-dotwave-content {
  position: relative;
  z-index: 3;
  width: min(1180px, calc(100% - 44px));
  margin-left: auto; margin-right: auto;
  padding: clamp(76px, 8vw, 120px) 0 clamp(78px, 9vw, 120px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  pointer-events: none;
}
.contrast-home-dotwave-box {
  position: relative;
  width: min(940px, 100%);
  min-height: 500px;
  padding: clamp(28px, 3.4vw, 52px);
  background: var(--blanco);
  border: 2px solid var(--negro);
  color: var(--negro);
  pointer-events: auto;
}
.contrast-home-dotwave-kicker {
  display: inline-flex; align-items: center; gap: 12px;
  margin-bottom: 24px;
}
.contrast-home-dotwave-kicker span { display: block; width: 42px; height: 2px; background: var(--cian); }
.contrast-home-dotwave-kicker p {
  margin: 0; color: var(--negro);
  font-family: "Sofia Sans", Arial, sans-serif;
  font-size: 12px; font-weight: 900; line-height: 1;
  letter-spacing: .16em; text-transform: uppercase;
}
.contrast-home-dotwave-title {
  margin: 0;
  max-width: 980px;
  color: var(--negro);
  font-family: "Sofia Sans Extra Condensed", "Arial Narrow", Arial, sans-serif;
  font-size: clamp(72px, 8.4vw, 116px);
  font-weight: 800;
  line-height: .88;
  letter-spacing: -.045em;
  text-transform: uppercase;
}
/* El punto va pegado a la ultima palabra: con inline-block el navegador podia
   partir ahi y en movil el punto se quedaba solo en una linea. */
.contrast-home-dotwave-dot { display: inline; margin-left: .14em; color: var(--cian); }
.contrast-home-dotwave-copy { margin-top: clamp(32px, 3.4vw, 44px); max-width: 760px; }
.contrast-home-dotwave-copy p {
  margin: 0 0 14px 0;
  color: var(--negro);
  font-family: "Sofia Sans", Arial, sans-serif;
  font-size: clamp(18px, 1.55vw, 25px);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -.02em;
}
.contrast-home-dotwave-copy p:last-child { margin-bottom: 0; }
.contrast-home-dotwave-actions { margin-top: clamp(32px, 3.6vw, 44px); }
.contrast-home-dotwave-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 24px;
  border: 2px solid var(--negro);
  background: var(--morado);
  color: var(--sobre-morado);
  text-decoration: none;
  font-family: "Sofia Sans", Arial, sans-serif;
  font-size: 12px; font-weight: 900; line-height: 1;
  letter-spacing: .12em; text-transform: uppercase;
  transition: background .25s ease, color .25s ease, transform .25s ease;
}
.contrast-home-dotwave-btn:hover { background: var(--cian); color: var(--sobre-cian); transform: translateY(-2px); }

/* ============================================================
   PIEZAS COMPARTIDAS DE SECCION
   ============================================================ */

.seccion-borde-superior::before {
  content: "";
  position: absolute; left: 50%; top: 0;
  width: 100vw; height: 2px;
  background: var(--negro);
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 1;
}

.kicker { display: inline-flex; align-items: center; gap: 12px; }
.kicker span { display: block; width: 42px; height: 2px; background: var(--cian); }
.kicker p {
  margin: 0; color: var(--negro);
  font-size: 12px; font-weight: 900; line-height: 1;
  letter-spacing: .16em; text-transform: uppercase;
}

.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

/* ---------- aparicion armonica (mascara + opacidad + caida) ----------
   Efecto definitivo elegido por David en el LAB (24-ago): todo CAE en un
   unico ritmo. Cada elemento lleva su orden --o en la cascada; el paso es
   fijo (85 ms), la curva es la misma para todos. Los titulares caen dentro
   de su mascara, el resto cae 18 px con fundido, y las imagenes de tarjeta
   se dibujan de arriba abajo. Lo dispara site.js poniendo .aparece en la
   seccion .apar. Todo transform/opacity/clip-path: compositor puro. */

/* La mascara debe recortar SOLO en vertical (para que la linea entre desde
   arriba). Con `overflow: hidden` recortaba tambien a los lados y cortaba
   los titulares largos en el borde de la columna. `clip-path` con inset
   negativo a izquierda y derecha deja libre el eje horizontal. */
.masc { display: block; clip-path: inset(0 -100vw); }
.masc .linea { display: block; }

.apar .cae { opacity: 0; transform: translateY(-18px); }
.apar .masc .linea { opacity: 0; transform: translateY(-112%); }

.apar .cae,
.apar .masc .linea {
  transition: opacity .55s ease, transform .7s cubic-bezier(.22, 1, .36, 1);
  transition-delay: calc(var(--o, 0) * 85ms);
}
.apar.aparece .cae,
.apar.aparece .masc .linea { opacity: 1; transform: none; }

/* Imagenes: fundido de opacidad una a una, de izquierda a derecha.
   El orden lo da el --o de su tarjeta (heredado); el delay extra hace que
   la imagen llegue justo despues de que su tarjeta haya caido. El zoom de
   hover y el filtro se mantienen en la misma transicion. */
.apar .dibuja img {
  opacity: 0;
  transition:
    transform .7s cubic-bezier(.22, 1, .36, 1),
    filter .35s ease,
    opacity .6s ease;
  transition-delay: 0s, 0s, calc(var(--o, 0) * 85ms + 140ms);
}
.apar.aparece .dibuja img { opacity: 1; }

/* El modelo 3D del pie se centra con translateY(-50%): la caida generica
   se lo pisaba y quedaba desplazado hacia abajo. Su caida conserva el
   centrado. En movil (<=768) es position:relative sin centrado y vuelve
   a valer la caida generica (override mas abajo). */
.apar .footer-3d.cae { transform: translateY(calc(-50% - 18px)); }
.apar.aparece .footer-3d.cae { transform: translateY(-50%); }

/* ============================================================
   FEATURED WORK   (.contrast-featured-work / .cfw-*)
   ============================================================ */

.contrast-featured-work {
  position: relative;
  width: 100%;
  background: var(--blanco);
  color: var(--negro);
  padding: clamp(84px, 9vw, 136px) 0;
  overflow: hidden;
}
.cfw-inner { width: min(1180px, calc(100% - 44px)); margin: 0 auto; }
/* El titular va a 112 px y sin partir; la linea mas larga (ES "HECHO PARA
   COMUNICAR.") mide 826 px. Con el reparto original (.66/1.34 = 738 px de
   columna) no cabia y se salia del contenedor. Se le da a la columna del
   titular la anchura que necesita y el kicker se queda en su minimo: el
   tamano de letra NO cambia. */
.cfw-top {
  display: grid;
  grid-template-columns: minmax(220px, .4fr) minmax(0, 1.6fr);
  gap: clamp(34px, 5vw, 78px);
  align-items: start;
  margin-bottom: clamp(58px, 7vw, 92px);
}
.cfw-kicker { padding-top: 4px; }
.cfw-header { max-width: 1160px; }
.cfw-header h2 {
  max-width: 1160px; margin: 0; color: var(--negro);
  font-family: "Sofia Sans Extra Condensed", "Arial Narrow", Arial, sans-serif;
  font-size: clamp(58px, 8vw, 112px);
  font-weight: 800; line-height: .86;
  letter-spacing: -.038em; text-transform: uppercase;
}
.cfw-title-line { display: block; white-space: nowrap; }
.cfw-subtitle {
  max-width: 760px; margin: 28px 0 0;
  color: var(--gris-texto);
  font-size: clamp(18px, 1.35vw, 22px);
  font-weight: 500; line-height: 1.42; letter-spacing: -.02em;
}
.cfw-main-btn {
  min-height: 52px;
  display: inline-flex; align-items: center; justify-content: center; gap: 16px;
  margin-top: 34px; padding: 0 24px;
  border: 2px solid var(--negro); border-radius: 0;
  background: transparent; color: var(--negro);
  text-decoration: none;
  font-size: 12px; font-weight: 900; line-height: 1;
  letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
  transition: background .22s ease, color .22s ease, border-color .22s ease, transform .22s ease;
}
.cfw-main-btn:hover { background: var(--cian); color: var(--sobre-cian); transform: translateY(-2px); }
.cfw-main-btn span { font-size: 18px; line-height: 1; transition: transform .22s ease; }
.cfw-main-btn:hover span { transform: translateX(4px); }

.cfw-grid, .chc-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 2px solid var(--negro);
  border-left: 2px solid var(--negro);
}

/* Las pistas de rejilla se calculan con el min-content de su contenido. Los
   titulares son enormes y en movil una sola palabra puede medir mas que la
   columna: sin esto la pista se desborda y la seccion, que lleva
   overflow:hidden, corta el texto. */
.cfw-top > *, .chc-top > *, .ctc-clarity > *, .cex-grid > *,
.cfw-card, .chc-card, .cfw-card-body, .chc-card-body { min-width: 0; }
.cfw-card, .chc-card {
  position: relative;
  min-height: 540px;
  display: grid;
  grid-template-rows: minmax(250px, .9fr) minmax(230px, 1.1fr);
  border-right: 2px solid var(--negro);
  border-bottom: 2px solid var(--negro);
  color: var(--negro);
  text-decoration: none;
  overflow: hidden;
}
.cfw-card-image, .chc-card-image {
  position: relative; width: 100%; min-height: 250px;
  overflow: hidden; background: var(--blanco);
  border-bottom: 2px solid var(--negro);
}
.cfw-card-image img, .chc-card-image img {
  width: 100%; height: 100%; min-height: 250px;
  display: block; object-fit: cover;
  transform: scale(1.04);
  transition: transform .7s cubic-bezier(.22, 1, .36, 1), filter .35s ease;
}
.chc-card-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0; pointer-events: none; z-index: 2;
  transition: opacity .35s ease;
}
@media (hover: hover) { .chc-card:hover .chc-card-video { opacity: 1; } }
.cfw-card-body, .chc-card-body {
  position: relative;
  display: flex; flex-direction: column;
  padding: clamp(22px, 2.4vw, 30px);
  background: var(--blanco); color: var(--negro);
  transition: background .22s ease;
}
.cfw-card-meta, .chc-card-meta {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  margin-bottom: 28px; color: var(--negro);
  font-size: 12px; font-weight: 900; line-height: 1;
  letter-spacing: .14em; text-transform: uppercase;
}
.cfw-card-label {
  margin: 0 0 14px; color: rgba(var(--tinta-rgb), .62);
  font-size: 11px; font-weight: 900; line-height: 1.15;
  letter-spacing: .12em; text-transform: uppercase;
}
.cfw-card-body h3, .chc-card-body h3 {
  margin: 0; color: var(--negro);
  font-family: "Sofia Sans Extra Condensed", "Arial Narrow", Arial, sans-serif;
  font-size: clamp(34px, 3.7vw, 54px);
  font-weight: 800; line-height: .9;
  letter-spacing: -.035em; text-transform: uppercase;
  word-break: normal; overflow-wrap: normal; hyphens: none;
}
.cfw-card-text, .chc-card-body p {
  max-width: 96%; margin: auto 0 0; padding-top: 24px;
  color: var(--gris-texto);
  font-size: 14px; font-weight: 500; line-height: 1.4; letter-spacing: -.01em;
}
.cfw-card:hover .cfw-card-image img,
.chc-card:hover .chc-card-image img { transform: scale(1.1); filter: contrast(1.08); }
.cfw-card:hover .cfw-card-body,
.chc-card:hover .chc-card-body { background: var(--cian); }
.cfw-card:hover .cfw-card-label,
.cfw-card:hover .cfw-card-text,
.chc-card:hover .chc-card-body p { color: var(--negro); }

/* ============================================================
   CAPABILITIES   (.contrast-home-capabilities / .chc-*)
   ============================================================ */

.contrast-home-capabilities {
  position: relative; width: 100%;
  background: var(--blanco); color: var(--negro);
  padding: clamp(84px, 9vw, 136px) 0;
  overflow: hidden;
}
.chc-inner { width: min(1180px, calc(100% - 44px)); margin: 0 auto; }
.chc-top {                     /* mismo reparto que .cfw-top, por coherencia */
  display: grid;
  grid-template-columns: minmax(220px, .4fr) minmax(0, 1.6fr);
  gap: clamp(34px, 5vw, 78px);
  align-items: start;
  margin-bottom: clamp(58px, 7vw, 92px);
}
.chc-kicker { padding-top: 4px; }
.chc-header { max-width: 940px; }
.chc-header h2 {
  max-width: 940px; margin: 0; color: var(--negro);
  font-family: "Sofia Sans Extra Condensed", "Arial Narrow", Arial, sans-serif;
  font-size: clamp(58px, 8vw, 112px);
  font-weight: 800; line-height: .86;
  letter-spacing: -.038em; text-transform: uppercase;
}
.chc-header h2 span { display: block; }
.chc-subtitle {
  max-width: 760px; margin: 28px 0 0;
  color: var(--gris-texto);
  font-size: clamp(18px, 1.35vw, 22px);
  font-weight: 500; line-height: 1.42; letter-spacing: -.02em;
}

/* ============================================================
   CONFIAN EN NOSOTROS   (.contrast-logos / .ctc-* / .logo-*)
   Tira de logos de clientes, sin titulo: kicker y carrusel. Va debajo
   de los testimonios en la home.
   ============================================================ */

.contrast-logos {
  position: relative; width: 100%;
  background: var(--blanco); color: var(--negro);
  padding: clamp(60px, 6vw, 92px) 0;
  overflow: hidden;
}
.ctc-inner { width: min(1180px, calc(100% - 44px)); margin: 0 auto; }
.ctc-kicker { margin-bottom: clamp(30px, 3.8vw, 48px); }

.logo-carousel { width: 100%; overflow: hidden; position: relative; padding: 4px 0; }
.logo-carousel::before, .logo-carousel::after {
  content: ""; position: absolute; top: 0;
  width: 80px; height: 100%; z-index: 2; pointer-events: none;
}
.logo-carousel::before { left: 0;  background: linear-gradient(to right, var(--blanco), rgba(var(--papel-rgb), 0)); }
.logo-carousel::after  { right: 0; background: linear-gradient(to left,  var(--blanco), rgba(var(--papel-rgb), 0)); }
.logo-track {
  display: flex; align-items: center;
  width: max-content;
  gap: clamp(70px, 8vw, 128px);
  animation: logoScroll 26s linear infinite;
  will-change: transform;
}
.logo-carousel:hover .logo-track { animation-play-state: paused; }
.logo-track img {
  display: block; width: auto; max-width: 190px;
  height: clamp(44px, 4.4vw, 66px);
  object-fit: contain;
  filter: grayscale(1) contrast(1.05);
  opacity: .62;
  transition: opacity .22s ease, filter .22s ease, transform .22s ease;
}
/* los logos de clientes son negro sobre transparente: en modo oscuro se
   invierten para que sigan viendose sobre el papel, que ahora es negro */
.logo-track img:hover { opacity: 1; filter: grayscale(0) contrast(1.05); transform: translateY(-2px); }
@media (prefers-color-scheme: dark) {
  .logo-track img { filter: grayscale(1) contrast(1.05) invert(1); }
  .logo-track img:hover { filter: grayscale(0) contrast(1.05) invert(1); }
}
@keyframes logoScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(calc(-50% - clamp(35px, 4vw, 64px))); }
}

.ctc-divider {
  position: relative; width: 100%; height: 2px;
  margin: clamp(54px, 6vw, 88px) 0 clamp(70px, 8vw, 118px);
  background: var(--negro);
}
.ctc-clarity {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(42px, 7vw, 96px);
  align-items: center;
}
.ctc-visual-wrap {
  display: flex; justify-content: center; align-items: center;
  min-height: clamp(300px, 34vw, 470px);
}
.ctc-copy { max-width: 620px; }
.ctc-copy h2 {
  margin: 0; color: var(--negro);
  font-family: "Sofia Sans Extra Condensed", "Arial Narrow", Arial, sans-serif;
  font-size: clamp(58px, 8vw, 112px);
  font-weight: 800; line-height: .86;
  letter-spacing: -.038em; text-transform: uppercase;
}
.ctc-copy p {
  max-width: 620px; margin: 30px 0 0;
  color: var(--gris-texto);
  font-size: clamp(18px, 1.35vw, 22px);
  font-weight: 500; line-height: 1.42; letter-spacing: -.02em;
}
.ctc-btn, .cex-btn {
  min-height: 52px;
  display: inline-flex; align-items: center; justify-content: center;
  margin-top: 34px; padding: 0 24px;
  border: 2px solid var(--negro); border-radius: 0;
  background: transparent; color: var(--negro);
  text-decoration: none;
  font-size: 12px; font-weight: 900; line-height: 1;
  letter-spacing: .12em; text-transform: uppercase;
  transition: background .22s ease, color .22s ease, border-color .22s ease, transform .22s ease;
}
.ctc-btn:hover, .cex-btn:hover { background: var(--cian); color: var(--sobre-cian); transform: translateY(-2px); }

.contrast-network-visual {
  position: relative; display: block;
  width: 100%; max-width: 560px;
  aspect-ratio: 1 / 1;
  overflow: hidden; touch-action: pan-y;
  pointer-events: auto; isolation: isolate;
}
.contrast-network-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }

/* ============================================================
   EXPLORE   (.contrast-explore / .cex-*)
   ============================================================ */

.contrast-explore {
  position: relative; width: 100%;
  background: var(--blanco); color: var(--negro);
  padding: clamp(84px, 9vw, 136px) 0;
  overflow: hidden;
}
.cex-inner { width: min(1180px, calc(100% - 44px)); margin: 0 auto; }
.cex-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}
.cex-copy { max-width: 620px; }
.cex-kicker { margin-bottom: clamp(26px, 3.4vw, 40px); }
.cex-copy h2 {
  margin: 0; color: var(--negro);
  font-family: "Sofia Sans Extra Condensed", "Arial Narrow", Arial, sans-serif;
  font-size: clamp(58px, 8vw, 112px);
  font-weight: 800; line-height: .86;
  letter-spacing: -.038em; text-transform: uppercase;
}
.cex-subtitle {
  max-width: 540px; margin: 30px 0 0;
  color: var(--gris-texto);
  font-size: clamp(18px, 1.35vw, 22px);
  font-weight: 500; line-height: 1.42; letter-spacing: -.02em;
}
.cex-btn { margin-top: 38px; }
.cex-visual {
  display: flex; justify-content: flex-end; align-items: center;
  min-height: clamp(300px, 34vw, 470px);
}
.cex-dotwave {
  position: relative; width: 100%; max-width: 520px;
  aspect-ratio: 1 / 1;
  overflow: hidden; background: var(--blanco);
  pointer-events: auto; touch-action: pan-y; isolation: isolate;
}
.cex-dotwave-canvas {
  position: absolute; inset: 0; display: block;
  width: 100%; height: 100%; background: var(--blanco);
}
.cex-dotwave::before, .cex-dotwave::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
}
.cex-dotwave::before { background: linear-gradient(to bottom, var(--blanco) 0%, rgba(var(--papel-rgb), 0) 22%, rgba(var(--papel-rgb), 0) 78%, var(--blanco) 100%); }
.cex-dotwave::after  { background: linear-gradient(to right,  var(--blanco) 0%, rgba(var(--papel-rgb), 0) 22%, rgba(var(--papel-rgb), 0) 78%, var(--blanco) 100%); }

/* ------------------------------------------------------------------
   RETICULA APAGADA  (data-dotgrid-activo="no")
   dotgrid.js se apaga solo cuando la reticula pediria demasiados puntos
   (pantallas muy grandes: ultrawide, 4K) o cuando mide que el pintado no
   cabe en el fotograma de esta maquina. En ese caso no debe quedar ni el
   lienzo ni el boton de pista: el heroe es blanco por diseno, asi que se
   queda limpio. El cuadro de Explore se retira entero para no dejar un
   hueco vacio en la retícula.
   ------------------------------------------------------------------ */
[data-dotgrid-activo="no"] > .contrast-home-dotwave-canvas,
[data-dotgrid-activo="no"] > .contrast-home-dotwave-hint { display: none; }
.cex-dotwave[data-dotgrid-activo="no"] { display: none; }

/* ============================================================
   PIE   (.contrast-footer / .footer-*)
   ============================================================ */

.contrast-footer {
  position: relative; overflow: hidden;
  background: var(--negro);
  padding: clamp(90px, 10vw, 140px) 0 clamp(46px, 5vw, 70px);
  color: var(--blanco);
}
.footer-inner {
  position: relative; z-index: 2;
  width: min(1180px, calc(100% - 44px));
  margin: 0 auto;
  min-height: 480px;
}
.footer-top { position: relative; z-index: 3; max-width: 500px; }
.footer-title {
  max-width: 500px; margin: 0; color: var(--blanco);
  font-family: "Sofia Sans Extra Condensed", "Arial Narrow", Arial, sans-serif;
  font-size: clamp(42px, 5.6vw, 82px);
  font-weight: 800; line-height: .9;
  letter-spacing: -.03em; text-transform: uppercase;
}
.footer-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: clamp(32px, 4vw, 48px); }
.footer-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 24px;
  background: var(--blanco); color: var(--negro);
  font-size: 13px; font-weight: 900; line-height: 1;
  letter-spacing: .04em; text-transform: uppercase;
  border: 1px solid var(--blanco); border-radius: 0;
  text-decoration: none;
  transition: transform .28s cubic-bezier(.22, 1, .36, 1), background .28s ease, color .28s ease, border-color .28s ease;
}
.footer-btn:hover { background: var(--cian); color: var(--sobre-cian); border-color: var(--cian); transform: translateY(-3px); }
.footer-btn-secondary { background: transparent; color: var(--blanco); border-color: rgba(var(--papel-rgb), .28); }
.footer-btn-secondary:hover { background: transparent; color: var(--blanco); border-color: var(--blanco); }

.footer-3d {
  position: absolute; right: 40px; top: 30%;
  transform: translateY(-50%);
  width: min(32vw, 410px); height: 330px;
  z-index: 1; pointer-events: auto;
}
.footer-3d model-viewer {
  width: 100%; height: 100%; display: block;
  transform: scale(1.1); transform-origin: center;
}
/* Poster de la esfera. La esfera de verdad (model-viewer, 957 KB + GLB +
   entorno) no se baja hasta que alguien toca el poster: 110 paginas bajaban
   1,2 MB por acercarse al pie (auditoria 08-10-2026; decision de David). El
   boton se sustituye por el <model-viewer> que va en el <template> de al
   lado (mv-carga.js). */
.footer-3d__poster {
  appearance: none; -webkit-appearance: none;
  border: 0; padding: 0; margin: 0; background: transparent;
  width: 100%; height: 100%; display: block;
  cursor: pointer; border-radius: 6px;
}
.footer-3d__poster img {
  width: 100%; height: 100%; display: block; object-fit: contain;
  transform: scale(1.1); transform-origin: center;
  transition: transform .5s cubic-bezier(.22, 1, .36, 1);
}
@media (hover: hover) {
  .footer-3d__poster:hover img { transform: scale(1.16) rotate(-6deg); }
}
.footer-3d__poster:focus-visible { outline: 2px solid var(--cian); outline-offset: 4px; }

/* ---------- pista de giro del modelo ----------
   Cada 2 s asoma un icono que dice "esto se arrastra". Desaparece
   para siempre en cuanto el usuario gira el modelo (clase .oculta). */

.footer-3d__pista {
  position: absolute;
  left: 50%;
  bottom: 6px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-left: -22px;
  border: 2px solid rgba(var(--papel-rgb), .55);
  border-radius: 50%;
  background: rgba(var(--tinta-rgb), .35);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: var(--cian);
  pointer-events: none;
  opacity: 0;
  animation: pistaGiro 2s ease-in-out infinite;
}
.footer-3d__pista svg { width: 22px; height: 22px; display: block; }
.footer-3d__pista.oculta { animation: none; opacity: 0; }

@keyframes pistaGiro {
  0%   { opacity: 0; transform: translateX(-8px) scale(.86); }
  18%  { opacity: 1; transform: translateX(-8px) scale(1); }
  50%  { opacity: 1; transform: translateX(8px)  scale(1); }
  72%  { opacity: 1; transform: translateX(-8px) scale(1); }
  88%  { opacity: 0; transform: translateX(-8px) scale(.94); }
  100% { opacity: 0; transform: translateX(-8px) scale(.86); }
}
.footer-bottom {
  position: relative; z-index: 3;
  margin-top: clamp(80px, 9vw, 120px);
  padding-top: 28px;
  display: flex; justify-content: space-between; align-items: center; gap: 28px;
}
.footer-logo { display: inline-flex; align-items: center; width: 42px; height: 42px; }
.footer-logo img { width: 42px; height: 42px; object-fit: contain; display: block; }
.footer-info {
  display: flex; flex-wrap: wrap; justify-content: flex-end;
  gap: clamp(16px, 3vw, 34px);
  color: rgba(var(--papel-rgb), .62);
  font-size: 12px; font-weight: 700; line-height: 1;
  letter-spacing: .04em; text-transform: uppercase;
}
.footer-info a { color: rgba(var(--papel-rgb), .62); text-decoration: none; transition: color .25s ease; }
.footer-info a:hover { color: var(--cian); }

/* ---------- barra legal (OceanWP #footer-bottom) ---------- */

#footer-bottom {
  background: var(--negro);
  color: var(--blanco);
  padding: 25px 0;
  font-family: "Open Sans", "Sofia Sans", Arial, sans-serif;
  font-size: 12px;
  line-height: 1.6;
}
#footer-bottom-inner {
  width: 90%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
#copyright { margin: 0; color: var(--blanco); text-align: left; }
#footer-bottom-menu { display: flex; flex-wrap: wrap; align-items: center; }
#footer-bottom-menu a {
  color: var(--blanco);
  text-decoration: none;
  padding: 0 8px;
  transition: color .25s ease;
}
#footer-bottom-menu a + a { border-left: 1px solid rgba(var(--papel-rgb), .35); }
#footer-bottom-menu a:hover { color: var(--cian); }

/* ---------- carrusel de capacidades (home) ----------
   Ocho tarjetas, cuatro a la vista. La pista es un flex con las tarjetas a
   100%/--chc-vis; el desplazamiento es un translateX en % de la propia pista
   (que mide lo que el visor), asi que no hay que medir nada en JS y el
   redimensionado se resuelve solo. Las lineas de rejilla siguen siendo las de
   siempre: arriba/izquierda las pone el visor, derecha/abajo cada tarjeta. */
.chc-carrusel, .cfw-carrusel { position: relative; }
.chc-viewport, .cfw-viewport {
  overflow: hidden;
  border-top: 2px solid var(--negro);
  border-left: 2px solid var(--negro);
}
.chc-carrusel .chc-grid {
  --chc-vis: 4;
  display: flex;
  border: 0;
  transition: transform 1.1s cubic-bezier(.22, 1, .36, 1);
}
.chc-carrusel .chc-card { flex: 0 0 calc(100% / var(--chc-vis)); }
.chc-flechas, .cfw-flechas {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 26px;
}
.chc-flecha, .cfw-flecha {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 2px solid var(--negro);
  border-radius: 0;
  background: var(--blanco);
  color: var(--negro);
  font: inherit;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  transition: background .22s ease, color .22s ease;
}
.chc-flecha:hover, .cfw-flecha:hover { background: var(--negro); color: var(--blanco); }
.chc-flecha:focus-visible, .cfw-flecha:focus-visible { outline: 2px solid var(--cian); outline-offset: 3px; }
@media (max-width: 1180px) { .chc-carrusel .chc-grid { --chc-vis: 2; } }
@media (max-width: 1024px) { .chc-carrusel .chc-grid { --chc-vis: 1; } }
@media (prefers-reduced-motion: reduce) { .chc-carrusel .chc-grid { transition: none; } }

/* El mismo carrusel para los proyectos de la home: las tarjetas las escribe
   tools/generar_home_work.py con lo que haya en la pagina de proyectos. */
.cfw-carrusel .cfw-grid {
  --cfw-vis: 4;
  display: flex;
  border: 0;
  transition: transform 1.1s cubic-bezier(.22, 1, .36, 1);
}
.cfw-carrusel .cfw-card { flex: 0 0 calc(100% / var(--cfw-vis)); }
@media (max-width: 1180px) { .cfw-carrusel .cfw-grid { --cfw-vis: 2; } }
@media (max-width: 1024px) { .cfw-carrusel .cfw-grid { --cfw-vis: 1; } }
@media (prefers-reduced-motion: reduce) { .cfw-carrusel .cfw-grid { transition: none; } }

/* Las fichas de servicios llevan id (#s1, #s2...) y la home enlaza a ellas:
   sin este margen el destino queda tapado por la cabecera fija. */
.svc-apertura[id], .svc-ficha[id] { scroll-margin-top: 100px; }

/* ============================================================
   TESTIMONIOS (.contrast-testimonios / .cts-*)
   Sustituye a la vieja seccion "Trusted by + Clarify before execution".
   Kalvin a la izquierda (se oculta solo en movil, como el resto de Kalvins)
   y a la derecha un carrusel de cuatro testimonios con uno a la vista, que
   pasa al siguiente cada 3 s. La pista mide lo que el visor y se desplaza
   con un translateX en %, asi no hay que medir nada en JS.
   ============================================================ */
.contrast-testimonios {
  position: relative; width: 100%;
  padding: clamp(84px, 9vw, 136px) 0;
  background: var(--blanco); color: var(--negro);
  overflow: hidden;
}
.cts-inner { width: min(1180px, calc(100% - 44px)); margin: 0 auto; }
/* mismo reparto que .chc-top y .cfw-top: rotulo a la izquierda, titular a la
   derecha, para que las tres secciones de la home empiecen igual */
.cts-cabeza {
  display: grid; grid-template-columns: minmax(220px, .4fr) minmax(0, 1.6fr);
  gap: clamp(34px, 5vw, 78px); align-items: start;
  margin-bottom: clamp(48px, 6vw, 82px);
}
.cts-cabeza > * { min-width: 0; }
.cts-cabeza .kicker { padding-top: 4px; }
.cts-cabeza h2 {
  max-width: 940px; margin: 0; color: var(--negro);
  font-family: "Sofia Sans Extra Condensed", "Arial Narrow", Arial, sans-serif;
  font-size: clamp(58px, 8vw, 112px); font-weight: 800;
  line-height: .86; letter-spacing: -.038em; text-transform: uppercase;
}
.cts-cabeza h2 span { display: block; }

.cts-grid {
  display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: clamp(30px, 4vw, 64px); align-items: center;
}
.cts-grid > * { min-width: 0; }

/* --- Kalvin: aqui el marco no cubre una caja, es una columna normal --- */
.cts-kalvin { position: relative; }
.cts-kalvin .kalvin-marco {
  position: relative; inset: auto; width: 100%; margin: 0; z-index: 1;
  padding-top: 64px;   /* sitio para el bocadillo, que sale por encima */
}
.cts-kalvin .kalvin-figura {
  position: relative; right: auto; bottom: auto;
  width: min(100%, 420px); margin: 0 auto;
}
.cts-kalvin .kalvin-bocadillo { max-width: 240px; }

/* --- carrusel --- */
.cts-viewport { overflow: hidden; border: 2px solid var(--negro); }
.cts-pista { display: flex; transition: transform .9s cubic-bezier(.22, 1, .36, 1); }
.cts-slide {
  flex: 0 0 100%; display: flex; flex-direction: column; justify-content: space-between;
  gap: clamp(26px, 3vw, 38px);
  min-height: 300px; padding: clamp(26px, 3vw, 40px);
  background: var(--blanco);
}
/* el globo: cuadrado, con el pico abajo a la izquierda apuntando a la persona */
.cts-globo {
  position: relative; padding: clamp(20px, 2.2vw, 28px);
  background: var(--blanco); color: var(--negro);
  border: 2px solid var(--negro); border-radius: 0;
  box-shadow: 6px 6px 0 var(--negro);
}
.cts-globo p {
  margin: 0; font-size: clamp(17px, 1.3vw, 21px); font-weight: 500;
  line-height: 1.42; letter-spacing: -.02em;
}
.cts-globo::after {
  content: ""; position: absolute; left: 30px; bottom: -9px;
  width: 14px; height: 14px; background: var(--blanco);
  border-right: 2px solid var(--negro); border-bottom: 2px solid var(--negro);
  transform: rotate(45deg);
}
.cts-persona { display: flex; align-items: center; gap: 16px; padding-left: 8px; }
.cts-avatar {
  flex: 0 0 auto; display: block;
  width: 64px; height: 64px;
  border: 2px solid var(--negro); border-radius: 50%;
  background: var(--blanco); overflow: hidden;
}
.cts-avatar img { width: 100%; height: 100%; display: block; object-fit: cover; }
.cts-datos p { margin: 0; }
.cts-nombre {
  font-size: 15px; font-weight: 900; line-height: 1.2;
  letter-spacing: .1em; text-transform: uppercase;
}
.cts-cargo {
  margin-top: 5px !important; color: var(--gris-texto);
  font-size: 13px; font-weight: 600; letter-spacing: .04em;
}
.cts-puntos { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }
.cts-punto {
  width: 12px; height: 12px; padding: 0; border: 2px solid var(--negro);
  border-radius: 50%; background: var(--blanco); cursor: pointer;
  transition: background .22s ease;
}
.cts-punto[aria-current="true"] { background: var(--negro); }
.cts-punto:focus-visible { outline: 2px solid var(--cian); outline-offset: 3px; }

@media (max-width: 1099px) {
  .cts-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .cts-cabeza { grid-template-columns: minmax(0, 1fr); gap: 20px; margin-bottom: 44px; }
  .cts-inner { width: calc(100% - 32px); }
  .cts-cabeza h2 { font-size: clamp(50px, 16vw, 76px); line-height: .88; }
  .cts-slide { min-height: 0; }
  .cts-puntos { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .cts-pista { transition: none; } }

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1180px) {
  .cfw-grid, .chc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1024px) {
  .contrast-home-dotwave-title { max-width: 920px; font-size: clamp(64px, 9.5vw, 104px); }
  .contrast-home-dotwave-box { min-height: 470px; }
  .cfw-top, .chc-top { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .cfw-header, .chc-header { max-width: 900px; }
  .cfw-title-line { white-space: normal; }
  .ctc-clarity { grid-template-columns: minmax(0, 1fr); }
  .ctc-copy { max-width: 760px; }
  .cex-grid { grid-template-columns: minmax(0, 1fr); gap: clamp(34px, 6vw, 56px); }
  .cex-copy { max-width: 760px; }
  .cex-visual { justify-content: center; order: 2; }
  .footer-inner { min-height: 440px; }
  .footer-top { max-width: 460px; }
  .footer-title { font-size: clamp(40px, 6.4vw, 72px); }
  .footer-3d { right: -40px; top: 36%; width: min(34vw, 360px); height: 300px; }
}

@media (max-width: 900px) {
  #site-navigation {
    position: absolute; left: 0; right: 0; top: 100%;
    transform: none;
    height: auto;
    flex-direction: column;
    align-items: stretch;
    background: var(--blanco);
    border-bottom: 2px solid var(--negro);
    display: none;
  }
  #site-navigation.abierta { display: flex; }
  #site-navigation a { height: auto; padding: 16px 22px; color: var(--negro); }
  /* Con la pagina scrolleada la cabecera se pone oscura y el menu de
     escritorio pasa a texto blanco. En movil el panel desplegado es blanco,
     asi que ese blanco lo dejaba invisible: aqui vuelve a negro. */
  #site-header.header-scrolled #site-navigation a { color: var(--negro); }
  #site-header { overflow: visible; }
  .nav-burger { display: inline-flex; margin-left: 10px; }
}

@media (max-width: 768px) {
  body { padding-top: 72px; }
  .contrast-home-dotwave-hero { min-height: calc(100vh - 72px); }
  #site-header, #site-header.header-scrolled { height: 72px; }
  .contrast-home-dotwave-hint { display: none; }
  .contrast-home-dotwave-scroll { left: 16px; bottom: 58px; gap: 10px; }
  .contrast-home-dotwave-scroll-text { font-size: 10px; letter-spacing: .12em; }
  .contrast-home-dotwave-scroll-line { height: 54px; }
  .contrast-home-dotwave-content { width: calc(100% - 32px); padding: 72px 0 118px; }
  .contrast-home-dotwave-box { width: 100%; min-height: auto; padding: 24px; }
  .contrast-home-dotwave-kicker { margin-bottom: 18px; }
  .contrast-home-dotwave-title { max-width: 100%; font-size: clamp(54px, 15vw, 82px); line-height: .9; }
  .contrast-home-dotwave-copy { margin-top: 26px; max-width: 100%; }
  /* Las dos frases del heroe son UNA sola oracion partida en dos lineas. En
     escritorio se ven como dos lineas seguidas; en movil cada una ocupa dos
     y el hueco entre parrafos partia la frase por la mitad. */
  .contrast-home-dotwave-copy p { font-size: 17px; line-height: 1.42; margin-bottom: 0; }
  .contrast-home-dotwave-actions { margin-top: 28px; width: 100%; }
  .contrast-home-dotwave-btn { width: 100%; }

  .contrast-featured-work, .contrast-home-capabilities, .contrast-explore { padding: 72px 0; }
  .contrast-logos { padding: 58px 0 72px; }
  .cfw-inner, .chc-inner, .ctc-inner, .cex-inner { width: calc(100% - 32px); }
  .cfw-top, .chc-top { margin-bottom: 44px; }
  .cfw-header h2, .chc-header h2, .ctc-copy h2, .cex-copy h2 { font-size: clamp(50px, 16vw, 76px); line-height: .88; }
  .cfw-subtitle, .chc-subtitle { margin-top: 24px; font-size: 17px; }
  .cfw-main-btn, .ctc-btn, .cex-btn { width: 100%; }
  .cfw-grid, .chc-grid { grid-template-columns: minmax(0, 1fr); }
  .cfw-card, .chc-card { min-height: auto; grid-template-rows: auto auto; }
  .cfw-card-image, .cfw-card-image img,
  .chc-card-image, .chc-card-image img { height: 320px; min-height: 320px; }
  .cfw-card-body, .chc-card-body { min-height: auto; padding: 26px 22px 30px; }
  .cfw-card-meta, .chc-card-meta { margin-bottom: 24px; }
  .cfw-card-body h3, .chc-card-body h3 { font-size: clamp(44px, 14vw, 68px); }
  .cfw-card-text, .chc-card-body p { max-width: 100%; margin-top: 20px; padding-top: 0; font-size: 15px; }

  .ctc-kicker { margin-bottom: 30px; }
  .logo-track { gap: 58px; animation-duration: 22s; }
  .logo-track img { max-width: 138px; height: 40px; }
  .ctc-divider { margin: 48px 0 58px; }
  .contrast-network-visual { max-width: 340px; margin: 0 auto; }
  .ctc-visual-wrap, .cex-visual { min-height: 300px; }
  .ctc-copy p, .cex-subtitle { margin-top: 24px; font-size: 17px; }
  .cex-dotwave { max-width: 340px; margin: 0 auto; }

  .footer-inner { width: calc(100% - 32px); min-height: auto; }
  .contrast-footer { padding-top: 80px; }
  .footer-top { max-width: 100%; }
  .footer-title { max-width: 100%; font-size: clamp(42px, 14vw, 72px); line-height: .9; }
  .footer-actions { flex-direction: column; align-items: stretch; }
  .footer-btn { width: 100%; }
  .footer-3d { position: relative; right: auto; top: auto; transform: none; width: 100%; height: 240px; margin-top: 36px; }
  /* en movil no hay centrado por transform: vale la caida generica */
  .apar .footer-3d.cae { transform: translateY(-18px); }
  .apar.aparece .footer-3d.cae { transform: none; }
  .footer-bottom { margin-top: 58px; align-items: flex-start; flex-direction: column; }
  .footer-info { justify-content: flex-start; flex-direction: column; gap: 16px; }

  #footer-bottom-inner { width: calc(100% - 32px); flex-direction: column; align-items: flex-start; gap: 18px; }
  #footer-bottom-menu { flex-direction: column; align-items: flex-start; gap: 12px; }
  #footer-bottom-menu a { padding: 0; }
  #footer-bottom-menu a + a { border-left: 0; }   /* en columna los separadores sobran */
}

@media (max-width: 480px) {
  .footer-title { font-size: clamp(40px, 13vw, 62px); }
  .footer-3d { height: 220px; }
}

@media (max-width: 420px) {
  .contrast-home-dotwave-scroll { bottom: 64px; }
  .contrast-home-dotwave-scroll-line { height: 48px; }
  .contrast-home-dotwave-scroll-text { font-size: 9px; letter-spacing: .1em; }
}

@media (hover: none), (max-width: 768px) {
  .contrast-network-visual, .cex-dotwave { pointer-events: none; touch-action: auto; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
  .apar .cae, .apar .masc .linea { opacity: 1; transform: none; }
  .apar .dibuja img { opacity: 1; }
  .apar .footer-3d.cae { transform: translateY(-50%); }
}

/* en movil el modelo no va centrado por transform, tampoco sin animaciones */
@media (prefers-reduced-motion: reduce) and (max-width: 768px) {
  .apar .footer-3d.cae { transform: none; }
}

/* ============================================================
   SERVICIOS  (hub + categorias, ES y EN)
   Anadido el 25-08-2026. Prefijo .svc- para todo lo nuevo; el
   resto (kicker, masc/linea, cae, apar, seccion-borde-superior)
   se reutiliza tal cual del sistema del sitio.
   ============================================================ */

.svc-inner { width: min(1180px, calc(100% - 44px)); margin: 0 auto; }

.svc-portada { position: relative; padding: clamp(48px, 5vw, 76px) 0 clamp(56px, 6vw, 92px); }
.svc-familias, .svc-fichas, .svc-apertura, .svc-mensual,
.svc-otras, .svc-faq, .svc-cta {
  position: relative;
  padding: clamp(56px, 6vw, 96px) 0;
}

/* ---------- migas ---------- */
.svc-migas {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-bottom: clamp(28px, 3.2vw, 40px);
  font-size: 12px; font-weight: 800; line-height: 1;
  letter-spacing: .12em; text-transform: uppercase;
}
.svc-migas a { color: var(--gris-texto); text-decoration: none; transition: color .22s ease; }
.svc-migas a:hover { color: var(--negro); }
.svc-migas [aria-current] { color: var(--negro); }
.svc-migas-sep { color: rgba(var(--tinta-rgb), .3); }

/* ---------- titulares ---------- */
.svc-h1 {
  margin: clamp(24px, 2.6vw, 34px) 0 0;
  font-family: "Sofia Sans Extra Condensed", "Sofia Sans", Arial, sans-serif;
  font-size: clamp(52px, 8.4vw, 116px);
  font-weight: 900; line-height: .94; letter-spacing: -.02em;
  text-transform: uppercase;
}
.svc-h2 {
  margin: clamp(18px, 2vw, 26px) 0 0;
  font-family: "Sofia Sans Extra Condensed", "Sofia Sans", Arial, sans-serif;
  font-size: clamp(34px, 4.4vw, 62px);
  font-weight: 900; line-height: .98; letter-spacing: -.02em;
  text-transform: uppercase;
}
.svc-h3 {
  margin: 0;
  font-family: "Sofia Sans Extra Condensed", "Sofia Sans", Arial, sans-serif;
  font-size: clamp(26px, 3vw, 40px);
  font-weight: 900; line-height: 1.02; letter-spacing: -.02em;
  text-transform: uppercase;
}
.svc-entradilla {
  max-width: 780px;
  margin: clamp(26px, 2.8vw, 36px) 0 0;
  color: var(--gris-texto);
  font-size: clamp(18px, 1.4vw, 23px);
  font-weight: 500; line-height: 1.42; letter-spacing: -.02em;
}
.svc-cuerpo { max-width: 720px; margin-top: clamp(28px, 3vw, 38px); }
.svc-cuerpo p {
  margin: 0 0 18px;
  color: var(--gris-texto);
  font-size: clamp(16px, 1.15vw, 18px);
  font-weight: 500; line-height: 1.6; letter-spacing: -.01em;
}
.svc-cuerpo p:last-child { margin-bottom: 0; }

/* ---------- boton ---------- */
.svc-btn {
  min-height: 52px;
  display: inline-flex; align-items: center; justify-content: center; gap: 16px;
  margin-top: 34px; padding: 0 24px;
  border: 2px solid var(--negro); border-radius: 0;
  background: var(--negro); color: var(--blanco);
  text-decoration: none;
  font-size: 12px; font-weight: 900; line-height: 1;
  letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
  transition: background .22s ease, color .22s ease, border-color .22s ease, transform .22s ease;
}
.svc-btn:hover { background: var(--cian); color: var(--sobre-cian); border-color: var(--cian); transform: translateY(-2px); }
.svc-btn span { font-size: 18px; line-height: 1; transition: transform .22s ease; }
.svc-btn:hover span { transform: translateX(4px); }
.svc-btn-linea { background: transparent; color: var(--negro); }

/* ---------- hub: las cuatro tarjetas ---------- */
/* Las lineas de la rejilla las ponen las tarjetas, no el contenedor.
   Antes el contenedor iba en negro y las tarjetas encima con gap de 2px:
   funciona, pero las tarjetas entran a opacidad 0 y hasta que no se hace
   scroll se ve un rectangulo negro enorme. Es el mismo reparto de bordes
   que usa .cfw-grid en la home. */
.svc-rejilla {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 2px solid var(--negro);
  border-left: 2px solid var(--negro);
}
.svc-tarjeta {
  position: relative;
  display: flex; flex-direction: column;
  min-width: 0;
  padding: clamp(28px, 3vw, 44px);
  border-right: 2px solid var(--negro);
  border-bottom: 2px solid var(--negro);
  background: var(--blanco);
  color: var(--negro);
  text-decoration: none;
  transition: background .24s ease, color .24s ease;
}
.svc-tarjeta-meta {
  display: flex; justify-content: space-between; gap: 12px;
  font-size: 11px; font-weight: 900; line-height: 1;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--gris-texto);
}
.svc-tarjeta-titulo {
  margin: clamp(20px, 2.2vw, 30px) 0 0;
  font-family: "Sofia Sans Extra Condensed", "Sofia Sans", Arial, sans-serif;
  font-size: clamp(38px, 4.6vw, 64px);
  font-weight: 900; line-height: .98; letter-spacing: -.02em;
  text-transform: uppercase;
}
.svc-tarjeta-texto {
  margin: 16px 0 0;
  max-width: 44ch;
  color: var(--gris-texto);
  font-size: clamp(15px, 1.05vw, 17px);
  font-weight: 500; line-height: 1.5; letter-spacing: -.01em;
}
.svc-tarjeta-subs {
  margin: clamp(22px, 2.4vw, 30px) 0 0; padding: 0;
  list-style: none;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.svc-tarjeta-subs li {
  padding: 7px 12px;
  border: 1px solid rgba(var(--tinta-rgb), .18);
  font-size: 11px; font-weight: 800; line-height: 1;
  letter-spacing: .08em; text-transform: uppercase;
  transition: border-color .24s ease;
}
.svc-tarjeta-flecha {
  margin-top: auto; padding-top: clamp(24px, 2.6vw, 34px);
  font-size: 22px; line-height: 1;
  transition: transform .24s ease;
}
.svc-tarjeta:hover { background: var(--cian); }
.svc-tarjeta:hover .svc-tarjeta-texto,
.svc-tarjeta:hover .svc-tarjeta-meta { color: rgba(var(--tinta-rgb), .74); }
.svc-tarjeta:hover .svc-tarjeta-subs li { border-color: rgba(var(--tinta-rgb), .34); }
.svc-tarjeta:hover .svc-tarjeta-flecha { transform: translateX(6px); }

/* ---------- transversal (soporte mensual) ---------- */
.svc-mensual-cabeza { max-width: 760px; }
.svc-mensual-texto {
  margin: clamp(18px, 2vw, 26px) 0 0;
  color: var(--gris-texto);
  font-size: clamp(16px, 1.15vw, 18px);
  font-weight: 500; line-height: 1.55; letter-spacing: -.01em;
}

/* ---------- esquema animado del soporte mensual ----------
   Bucle de 12 s en tres fases de 4 s: cruza las familias, cantidad fija al
   mes, formato a la carta. Todo con transform y color, nada de layout, para
   que el compositor lo lleve solo y no repinte la pagina entera.

   REGLA DE ORO: el estado que ves aqui abajo, sin ninguna animacion, ya es el
   diagrama completo. La animacion solo lo recorre. Por eso funciona igual con
   prefers-reduced-motion, donde la hoja apaga todas las animaciones de golpe,
   y por eso las celdas del mes nacen llenas y se vacian, y no al reves.       */

.svc-esquema {
  position: relative;
  margin-top: clamp(36px, 4vw, 56px);
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: stretch;
  gap: 0;
  border-top: 2px solid var(--negro);
  border-left: 2px solid var(--negro);
}
/* El resumen es para lectores de pantalla: el diagrama se ve, pero hay que
   poder oirlo. No se oculta con display:none, que lo sacaria del arbol. */
.svc-esq-resumen {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.svc-esq-fase {
  position: relative;
  min-width: 0;
  padding: clamp(22px, 2.4vw, 32px);
  border-right: 2px solid var(--negro);
  border-bottom: 2px solid var(--negro);
  background: var(--blanco);
}
.svc-esq-num {
  margin: 0;
  font-size: 11px; font-weight: 900; line-height: 1;
  letter-spacing: .16em; color: var(--gris-texto);
  animation: svcEsqNum 12s linear infinite;
  animation-delay: calc(var(--f) * 4s);
}
.svc-esq-titulo {
  margin: 0;
  font-size: clamp(16px, 1.25vw, 20px);
  font-weight: 800; line-height: 1.18; letter-spacing: -.02em;
}
.svc-esq-nota {
  margin: 10px 0 0;
  color: var(--gris-texto);
  font-size: 13.5px; font-weight: 500; line-height: 1.5;
}
/* El dibujo de Kalvin manda en la tarjeta: va arriba y centrado, y debajo
   solo el numero y el titulo. Los textos largos de cada fase estan en el
   resumen del diagrama, que leen los lectores de pantalla. */
.svc-esq-fase {
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  justify-content: flex-end; gap: clamp(14px, 1.6vw, 20px);
}
.svc-esq-kalvin {
  height: clamp(150px, 15vw, 220px);
  width: auto; max-width: 100%;
  object-fit: contain; object-position: bottom center;
  user-select: none; -webkit-user-drag: none;
}

/* flechas entre fases */
.svc-esq-flecha {
  display: flex; align-items: center; justify-content: center;
  width: clamp(28px, 3vw, 44px);
  border-right: 2px solid var(--negro);
  border-bottom: 2px solid var(--negro);
  background: var(--blanco);
}
.svc-esq-flecha span {
  display: block; width: 100%; height: 2px;
  background: rgba(var(--tinta-rgb), .2);
  position: relative;
}
/* la punta: un cuadrado al que se le pintan dos lados y se gira 45 grados */
.svc-esq-flecha span::before {
  content: "";
  position: absolute; right: -1px; top: 50%;
  width: 7px; height: 7px;
  border-top: 2px solid rgba(var(--tinta-rgb), .2);
  border-right: 2px solid rgba(var(--tinta-rgb), .2);
  transform: translate(0, -50%) rotate(45deg);
  animation: svcEsqPunta 12s linear infinite;
}
.svc-esq-flecha span::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--cian);
  transform: scaleX(0); transform-origin: left;
  animation: svcEsqPaso 12s linear infinite;
}
.svc-esq-flecha span::after,
.svc-esq-flecha span::before { animation-delay: calc(3.4s + var(--f) * 4s); }

@keyframes svcEsqNum {
  0%, 2%      { color: var(--gris-texto); }
  4%, 31%     { color: var(--negro); }
  34%, 100%   { color: var(--gris-texto); }
}
@keyframes svcEsqPaso {
  0%, 2%      { transform: scaleX(0); }
  6%, 30%     { transform: scaleX(1); }
  34%, 100%   { transform: scaleX(0); }
}
@keyframes svcEsqPunta {
  0%, 6%      { border-color: rgba(var(--tinta-rgb), .2); }
  10%, 30%    { border-color: var(--cian); }
  34%, 100%   { border-color: rgba(var(--tinta-rgb), .2); }
}
/* Aqui habia tres lineas huerfanas: un paso "28%, 100% { background... }" sin
   su @keyframes y dos llaves de cierre de mas, resto de un bloque borrado a
   medias. No eran inofensivas. Al encontrarse un selector invalido, el parser
   del navegador salta hasta la siguiente llave, y en ese salto se llevaba por
   delante la regla de abajo: comprobado en el navegador el 12-09-2026, la
   hoja cargada NO contenia ".apar:not(.aparece) .svc-esquema *". O sea que el
   bucle del esquema de servicios llevaba corriendo siempre, tambien fuera de
   pantalla, que es exactamente lo que la regla venia a evitar. */

/* Mientras la seccion no ha entrado en pantalla el bucle esta parado: no
   tiene sentido gastar bateria animando algo que nadie ve. site.js pone y
   quita .aparece con el mismo observador que el resto de la pagina. */
.apar:not(.aparece) .svc-esquema *,
.apar:not(.aparece) .svc-esquema *::before,
.apar:not(.aparece) .svc-esquema *::after { animation-play-state: paused; }

/* ---------- apertura de categoria ---------- */
.svc-apertura-caja {
  max-width: 820px;
  padding-left: clamp(18px, 2vw, 28px);
  border-left: 2px solid var(--cian);
}
.svc-apertura-caja p {
  margin: 16px 0 0;
  color: var(--gris-texto);
  font-size: clamp(16px, 1.15vw, 18px);
  font-weight: 500; line-height: 1.55; letter-spacing: -.01em;
}

/* ---------- fichas de subcategoria ---------- */
.svc-ficha {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: clamp(16px, 2vw, 28px);
  padding: clamp(30px, 3.4vw, 48px) 0;
  border-top: 2px solid var(--negro);
}
.svc-ficha:first-child { border-top: 0; padding-top: 0; }
.svc-ficha-meta {
  font-size: 12px; font-weight: 900; line-height: 1;
  letter-spacing: .16em;
  color: var(--gris-texto);
  padding-top: 8px;
}
.svc-ficha-cuerpo { min-width: 0; }
.svc-ficha-titulo {
  margin: 0;
  font-family: "Sofia Sans Extra Condensed", "Sofia Sans", Arial, sans-serif;
  font-size: clamp(30px, 3.6vw, 50px);
  font-weight: 900; line-height: 1; letter-spacing: -.02em;
  text-transform: uppercase;
}
.svc-ficha-que {
  margin: 14px 0 0;
  max-width: 60ch;
  font-size: clamp(17px, 1.3vw, 21px);
  font-weight: 600; line-height: 1.4; letter-spacing: -.02em;
}
/* Sin medio, las dos listas van una al lado de otra. Con medio, se apilan a
   la izquierda y el visor ocupa la derecha. */
.svc-ficha-alto {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(22px, 2.6vw, 40px);
  margin-top: clamp(24px, 2.8vw, 36px);
}
.svc-ficha-alto-medio { grid-template-columns: minmax(0, 1fr) minmax(0, .92fr); }
.svc-ficha-campos { min-width: 0; display: contents; }
.svc-ficha-alto-medio .svc-ficha-campos {
  display: grid; align-content: start;
  gap: clamp(22px, 2.6vw, 34px);
}

/* El medio: visor 3D o video. El video va solo, mudo y en bucle, sin
   controles ni barra: es una ilustracion que se mueve, no un reproductor. */
.svc-ficha-media {
  position: relative;
  margin: 0;
  min-width: 0;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--gris-f4);
  border: 2px solid var(--negro);
}
.svc-ficha-media video,
.svc-ficha-media model-viewer {
  display: block; width: 100%; height: 100%;
}
.svc-ficha-media video { object-fit: cover; }
.svc-ficha-media-3d { background: var(--gris-ed); }

/* La reticula de la ficha de catalogos: el mismo motor y el mismo campo que
   el bloque Explore de la home, metido en la caja de la ficha. El boton se
   declara como zona excluida en dotgrid.js, asi que los puntos no se pintan
   por debajo y el rectangulo queda limpio, rodeado de trama. */
.svc-ficha-media-dither {
  background: var(--blanco);
  display: grid; place-items: center;
  isolation: isolate;
  touch-action: pan-y;
}
.svc-ficha-dither-lienzo {
  position: absolute; inset: 0; z-index: 0;
  display: block; width: 100%; height: 100%;
  background: var(--blanco);
}
/* difuminado en los cuatro bordes, para que la trama no choque con el marco */
.svc-ficha-media-dither::before,
.svc-ficha-media-dither::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
}
.svc-ficha-media-dither::before {
  background: linear-gradient(to bottom, var(--blanco) 0%, rgba(var(--papel-rgb), 0) 20%,
                              rgba(var(--papel-rgb), 0) 80%, var(--blanco) 100%);
}
.svc-ficha-media-dither::after {
  background: linear-gradient(to right, var(--blanco) 0%, rgba(var(--papel-rgb), 0) 18%,
                              rgba(var(--papel-rgb), 0) 82%, var(--blanco) 100%);
}
.svc-ficha-explora {
  position: relative; z-index: 2;
  min-height: 52px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 clamp(26px, 3vw, 40px);
  border: 2px solid var(--negro);
  background: var(--blanco); color: var(--negro);
  text-decoration: none;
  font-size: 12px; font-weight: 900; line-height: 1;
  letter-spacing: .16em; text-transform: uppercase; white-space: nowrap;
  transition: background .22s ease, color .22s ease, transform .22s ease;
}
.svc-ficha-explora:hover {
  background: var(--cian); color: var(--sobre-cian); transform: translateY(-2px);
}
/* Si dotgrid se apaga solo (pantalla enorme o maquina lenta) la caja se queda
   en blanco con el boton en medio. Sigue funcionando; solo pierde la trama. */
.svc-ficha-media-dither[data-dotgrid-activo="no"] .svc-ficha-dither-lienzo { display: none; }
.svc-ficha-media-3d model-viewer { --poster-color: transparent; }

/* ============================================================
   FICHA "SITIOS Y TIENDAS": una compra, en bucle
   ------------------------------------------------------------
   Maqueta de tienda dentro de la caja de la ficha. NO hay imagenes
   de interfaz ni JS: es marcado y CSS. Una sola linea de tiempo de
   6 s la comparten el cursor, el boton, el carro y el contador, asi
   que no se pueden desincronizar entre ellos.

   Lo importante para leerlo: el estado BASE del marcado, sin
   animacion ninguna, ya es la tienda completa y legible (producto,
   menu, carro a 0, boton). La animacion solo pasa por encima. Asi
   con prefers-reduced-motion, donde la hoja apaga todas las
   animaciones de golpe, se sigue viendo una tienda y no una caja
   rota.

   Nada de precios: la maqueta lleva barras grises donde iria el
   texto. No se inventa ni un dato de producto.

   Las medidas van en --u para que la maqueta escale con la caja y
   no con la ventana: la ficha mide distinto en escritorio que en
   movil. Con soporte de container queries --u es 1cqw (la centesima
   parte del ancho de la caja); sin el se queda en los 4.4px que
   corresponden a la caja de escritorio.
   ============================================================ */
.svc-ficha-media-tienda { --u: 4.4px; background: var(--blanco); }
/* Reserva sin container queries (Safari < 16, Chrome < 105): la maqueta
   de 100 unidades no puede pasar del ancho de su caja en movil. Va ANTES
   del @supports para que, donde hay soporte, gane 1cqw. Auditoria
   08-10-2026, area 2, P1. */
@media (max-width: 767px) {
  .svc-ficha-media-tienda { --u: calc((100vw - 40px) / 100); }
}
@supports (width: 1cqw) {
  .svc-ficha-media-tienda { container-type: inline-size; --u: 1cqw; }
}
.tnd {
  position: absolute; inset: 0;
  display: grid; grid-template-rows: calc(var(--u) * 7) calc(var(--u) * 9) 1fr;
  background: var(--blanco);
  font-size: calc(var(--u) * 2.1);
  font-weight: 900; letter-spacing: .1em; text-transform: uppercase;
  color: var(--negro);
}

/* barra del navegador */
.tnd-barra {
  display: flex; align-items: center; gap: calc(var(--u) * 1.2);
  padding: 0 calc(var(--u) * 2.4);
  border-bottom: 2px solid var(--negro);
  background: var(--gris-f2);
}
.tnd-punto {
  width: calc(var(--u) * 1.5); height: calc(var(--u) * 1.5);
  border: 1px solid var(--negro); border-radius: 50%;
}
.tnd-url {
  margin-left: calc(var(--u) * 1.6);
  padding: calc(var(--u) * .6) calc(var(--u) * 2);
  border: 1px solid var(--negro);
  background: var(--blanco);
  font-size: calc(var(--u) * 1.7); letter-spacing: .06em; text-transform: none;
}

/* cabecera de la tienda */
.tnd-nav {
  display: flex; align-items: center; gap: calc(var(--u) * 2.4);
  padding: 0 calc(var(--u) * 2.4);
  border-bottom: 2px solid var(--negro);
}
.tnd-marca { font-size: calc(var(--u) * 2.6); letter-spacing: .16em; }
.tnd-menu { display: flex; gap: calc(var(--u) * 2); margin-left: auto; }
.tnd-menu i { font-style: normal; font-size: calc(var(--u) * 1.7); letter-spacing: .12em; }
.tnd-carro {
  position: relative;
  display: grid; place-items: center;
  width: calc(var(--u) * 6); height: calc(var(--u) * 6);
  margin-left: calc(var(--u) * .8);
  border: 2px solid var(--negro);
  animation: tnd-carro 6s linear infinite;
}
.tnd-carro svg { width: calc(var(--u) * 3); height: calc(var(--u) * 3); display: block; }
/* El contador: dos cifras apiladas en una ventana de una cifra de alto.
   Sube una linea cuando el clic entra, y vuelve al final del bucle. */
.tnd-cont {
  position: absolute; top: calc(var(--u) * -1.4); right: calc(var(--u) * -1.4);
  overflow: hidden;
  width: calc(var(--u) * 3.4); height: calc(var(--u) * 3.4);
  border: 2px solid var(--negro);
  background: var(--negro); color: var(--blanco);
  font-size: calc(var(--u) * 1.9); line-height: calc(var(--u) * 3);
}
.tnd-cont span { display: block; animation: tnd-cont 6s steps(1, end) infinite; }
.tnd-cont i { display: block; height: calc(var(--u) * 3); font-style: normal; }

/* cuerpo: foto y datos */
.tnd-cuerpo {
  position: relative;
  display: grid; grid-template-columns: calc(var(--u) * 40) minmax(0, 1fr);
  gap: calc(var(--u) * 3);
  padding: calc(var(--u) * 3);
}
.tnd-foto {
  display: grid; place-items: center;
  border: 2px solid var(--negro);
  background: var(--gris-f4);
  overflow: hidden;
}
.tnd-foto img { width: 82%; height: auto; display: block; }
.tnd-info { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
/* Donde iria el texto de producto van barras: no hay dato inventado. */
.tnd-linea { height: calc(var(--u) * 2.2); background: var(--negro); width: 100%; }
.tnd-linea + .tnd-linea { margin-top: calc(var(--u) * 1.6); height: calc(var(--u) * 1.4); background: var(--gris-cf); }
.tnd-linea:nth-of-type(3) { width: 74%; }
.tnd-btn {
  position: relative;
  margin-top: auto;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: calc(var(--u) * 7); padding: 0 calc(var(--u) * 2.4);
  border: 2px solid var(--negro);
  background: var(--blanco); color: var(--negro);
  font-size: calc(var(--u) * 1.9); letter-spacing: .12em;
  animation: tnd-btn 6s linear infinite;
}
/* la onda del clic */
.tnd-btn::after {
  content: ""; position: absolute; inset: 0;
  border: 2px solid var(--negro);
  opacity: 0;
  animation: tnd-onda 6s linear infinite;
}
/* el puntero */
.tnd-cursor {
  position: absolute; left: 0; top: 0; z-index: 3;
  width: calc(var(--u) * 4); height: calc(var(--u) * 4);
  transform: translate(calc(var(--u) * 74), calc(var(--u) * 34));
  animation: tnd-cursor 6s cubic-bezier(.5, 0, .2, 1) infinite;
}
.tnd-cursor svg { width: 100%; height: 100%; display: block; }

@keyframes tnd-cursor {
  0%, 8%    { transform: translate(calc(var(--u) * 74), calc(var(--u) * 34)); }
  34%, 39%  { transform: translate(calc(var(--u) * 52), calc(var(--u) * 40)); }
  42%       { transform: translate(calc(var(--u) * 52.6), calc(var(--u) * 40.8)); }
  46%, 88%  { transform: translate(calc(var(--u) * 52), calc(var(--u) * 40)); }
  100%      { transform: translate(calc(var(--u) * 74), calc(var(--u) * 34)); }
}
@keyframes tnd-btn {
  0%, 39%   { background: var(--blanco); color: var(--negro); }
  42%, 60%  { background: var(--negro); color: var(--blanco); }
  66%, 100% { background: var(--blanco); color: var(--negro); }
}
@keyframes tnd-onda {
  0%, 40%  { opacity: 0; transform: scale(1); }
  42%      { opacity: 1; transform: scale(1); }
  54%, 100% { opacity: 0; transform: scale(1.18); }
}
@keyframes tnd-carro {
  0%, 42%   { transform: none; }
  46%       { transform: translateY(calc(var(--u) * -1.2)); }
  52%, 100% { transform: none; }
}
/* steps(1, end): la cifra cambia de golpe, no se desliza a medias */
@keyframes tnd-cont {
  0%, 44%   { transform: none; }
  45%, 94%  { transform: translateY(calc(var(--u) * -3)); }
  95%, 100% { transform: none; }
}

/* ============================================================
   FICHA "FLUJOS DE TRABAJO Y AGENTES": que es un agente
   ------------------------------------------------------------
   El encargo: que se entienda sin saber nada del tema. Asi que la
   animacion no ensena arquitectura, ensena la HISTORIA, que es lo
   unico que distingue a un agente de una automatizacion normal:

     1. se le pide algo en lenguaje corriente, no con un formulario
     2. el se hace el plan solo, no se lo damos nosotros
     3. usa herramientas, una detras de otra
     4. UNA LE SALE MAL, LO VE, Y LO REPITE
     5. entrega el resultado

   El paso 4 es el que importa. Una automatizacion que falla se para
   y avisa; un agente comprueba lo que le ha salido y vuelve a
   intentarlo. Por eso el segundo paso da error a proposito y luego se
   arregla: sin ese momento la animacion seria la de una macro.

   Ciclo de 14 s. Es largo a proposito: son cinco cosas que contar y
   con 5 s no da tiempo a leerlas. Todo el movimiento es CSS sobre una
   sola linea de tiempo compartida, asi que las piezas no se pueden
   desincronizar entre ellas.

   Estado BASE del marcado, sin animacion ninguna: el trabajo ya
   terminado, con los tres pasos marcados y el resultado entregado. Es
   decir, con prefers-reduced-motion (donde la hoja apaga todas las
   animaciones de golpe) se sigue leyendo el diagrama entero y con
   sentido, no una caja a medias.

   Medidas en --u para que escale con la caja y no con la ventana,
   igual que la maqueta de la tienda.
   ============================================================ */
.svc-ficha-media-agente { --u: 4.4px; background: var(--blanco); }
/* Reserva sin container queries (Safari < 16, Chrome < 105): la maqueta
   de 100 unidades no puede pasar del ancho de su caja en movil. Va ANTES
   del @supports para que, donde hay soporte, gane 1cqw. Auditoria
   08-10-2026, area 2, P1. */
@media (max-width: 767px) {
  .svc-ficha-media-agente { --u: calc((100vw - 40px) / 100); }
}
@supports (width: 1cqw) {
  .svc-ficha-media-agente { container-type: inline-size; --u: 1cqw; }
}
.agt {
  position: absolute; inset: 0;
  display: grid; grid-template-rows: calc(var(--u) * 15) 1fr calc(var(--u) * 15);
  background: var(--blanco);
  color: var(--negro);
  font-size: calc(var(--u) * 2);
  font-weight: 700; letter-spacing: -.01em;
}

/* ---------- 1. la peticion, en lenguaje corriente ---------- */
.agt-pide {
  display: flex; align-items: center; gap: calc(var(--u) * 2);
  padding: 0 calc(var(--u) * 3);
  border-bottom: 2px solid var(--negro);
}
.agt-quien {
  flex: 0 0 auto;
  width: calc(var(--u) * 7); height: calc(var(--u) * 7);
  display: grid; place-items: center;
  border: 2px solid var(--negro); border-radius: 50%;
  font-size: calc(var(--u) * 2.2); font-weight: 900; letter-spacing: 0;
}
.agt-bocadillo {
  position: relative;
  padding: calc(var(--u) * 1.4) calc(var(--u) * 2.2);
  border: 2px solid var(--negro);
  background: var(--blanco);
  line-height: 1.25;
  animation: agt-bocadillo 14s ease-out infinite;
}
/* El pico del bocadillo.
   Antes era una raya de 2 px pegada al borde izquierdo, y por dentro de
   la caja se leia como un guion suelto delante de la frase. Ahora es un
   pico de verdad: dos triangulos, el negro del borde y el blanco del
   relleno un pixel por delante, que es como se hace un bocadillo con
   borde sin agujerearlo. */
.agt-bocadillo::before,
.agt-bocadillo::after {
  content: ""; position: absolute; top: 50%;
  width: 0; height: 0;
  border-top: calc(var(--u) * 1.1) solid transparent;
  border-bottom: calc(var(--u) * 1.1) solid transparent;
  transform: translateY(-50%);
}
.agt-bocadillo::before {
  left: calc(var(--u) * -1.6);
  border-right: calc(var(--u) * 1.6) solid var(--negro);
}
.agt-bocadillo::after {
  left: calc(var(--u) * -1.05);
  border-right: calc(var(--u) * 1.6) solid var(--blanco);
}

/* ---------- 2 y 3. el agente y su plan ---------- */
/* El de abajo lleva mas aire que el de arriba a proposito: el ultimo paso
   quedaba pegado a la linea que separa esta banda de la de herramientas. */
.agt-medio {
  display: grid; grid-template-columns: calc(var(--u) * 26) minmax(0, 1fr);
  gap: calc(var(--u) * 3);
  padding: calc(var(--u) * 2.4) calc(var(--u) * 3) calc(var(--u) * 4);
  min-height: 0;
}
.agt-nucleo {
  align-self: start;
  display: grid; place-items: center; gap: calc(var(--u) * 1.2);
  padding: calc(var(--u) * 2) calc(var(--u) * 1.4);
  border: 2px solid var(--negro);
  background: var(--negro); color: var(--blanco);
  text-align: center;
}
.agt-nucleo b {
  font-size: calc(var(--u) * 2.1); font-weight: 900;
  letter-spacing: .12em; text-transform: uppercase;
}
.agt-nucleo i {
  font-style: normal; font-size: calc(var(--u) * 1.7); font-weight: 500;
  line-height: 1.3; opacity: .8;
}
/* late mientras trabaja: es el unico movimiento que dice "esta pensando" */
.agt-pulso {
  width: calc(var(--u) * 6); height: calc(var(--u) * 6);
  border: 2px solid var(--cian);
  background: transparent;
  transform: rotate(45deg);
  animation: agt-pulso 14s ease-in-out infinite;
}

.agt-plan { display: grid; align-content: start; gap: calc(var(--u) * 1.6); min-width: 0; }
.agt-plan-tit {
  font-size: calc(var(--u) * 1.6); font-weight: 900;
  letter-spacing: .16em; text-transform: uppercase; color: var(--gris-76);
}
.agt-paso {
  display: grid; grid-template-columns: calc(var(--u) * 5) minmax(0, 1fr) calc(var(--u) * 5);
  align-items: center; gap: calc(var(--u) * 1.6);
  padding: calc(var(--u) * .9) calc(var(--u) * 1);
  border-bottom: 1px solid var(--gris-e2);
  /* Nacen escritos: sin animacion, el estado base es el plan entero y ya
     hecho. El nombre de la animacion lo pone cada paso mas abajo; aqui
     solo van la duracion y el ritmo, que son los mismos para los tres. */
  animation: 14s linear infinite;
}
.agt-paso:last-child { border-bottom: 0; }
.agt-paso-n {
  display: grid; place-items: center;
  width: calc(var(--u) * 5); height: calc(var(--u) * 5);
  border: 2px solid var(--negro);
  font-size: calc(var(--u) * 1.8); font-weight: 900; letter-spacing: 0;
}
.agt-paso-txt { min-width: 0; line-height: 1.25; }
/* la marca de la derecha: tres estados apilados en una ventana de uno.
   0 = nada, 1 = error, 2 = hecho. Sube y baja segun toca. */
.agt-marca {
  overflow: hidden;
  width: calc(var(--u) * 5); height: calc(var(--u) * 5);
}
/* El estado BASE de la ventana es HECHO, no vacio: sin animacion la
   ficha tiene que ensenar el trabajo terminado, con sus tres marcas. La
   animacion arranca desde `none` (vacio) y sube; con las animaciones
   apagadas manda esta linea y se ven los tres visto bueno. */
.agt-marca span {
  display: block;
  transform: translateY(calc(var(--u) * -10));
  animation: 14s steps(1, end) infinite;
}
.agt-marca i {
  display: grid; place-items: center;
  height: calc(var(--u) * 5);
  font-style: normal; font-size: calc(var(--u) * 3.4); font-weight: 900;
  letter-spacing: 0; line-height: 1;
}
.agt-marca .agt-mal { color: var(--morado); }
.agt-marca .agt-bien { color: var(--negro); }
/* cada paso lleva su propia animacion de marca: el 2 pasa por el error */
.agt-paso1 .agt-marca span { animation-name: agt-marca1; }
.agt-paso2 .agt-marca span { animation-name: agt-marca2; }
.agt-paso3 .agt-marca span { animation-name: agt-marca3; }
/* el paso que se esta haciendo se subraya */
.agt-paso1 { animation-name: agt-activo1; }
.agt-paso2 { animation-name: agt-activo2; }
.agt-paso3 { animation-name: agt-activo3; }

/* ---------- 4. las herramientas y el resultado ---------- */
.agt-pie {
  display: flex; align-items: center; gap: calc(var(--u) * 1.6);
  padding: 0 calc(var(--u) * 3);
  border-top: 2px solid var(--negro);
}
.agt-pie-tit {
  font-size: calc(var(--u) * 1.6); font-weight: 900;
  letter-spacing: .16em; text-transform: uppercase; color: var(--gris-76);
  margin-right: calc(var(--u) * .6);
}
.agt-tool {
  display: grid; place-items: center;
  width: calc(var(--u) * 8); height: calc(var(--u) * 8);
  border: 2px solid var(--negro);
  background: var(--blanco);
  animation: 14s linear infinite;
}
.agt-tool svg { width: calc(var(--u) * 4); height: calc(var(--u) * 4); display: block; }
.agt-tool1 { animation-name: agt-tool1; }
.agt-tool2 { animation-name: agt-tool2; }
.agt-tool3 { animation-name: agt-tool3; }
.agt-entrega {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: calc(var(--u) * 1.4);
  min-height: calc(var(--u) * 8); padding: 0 calc(var(--u) * 2.2);
  border: 2px solid var(--negro);
  background: var(--negro); color: var(--blanco);
  font-size: calc(var(--u) * 1.8); font-weight: 900;
  letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
  animation: agt-entrega 14s ease-out infinite;
}

/* ------------------------------------------------ linea de tiempo
   14 s. Los porcentajes, contados una sola vez:
      0-6     llega la peticion
      6-16    el agente se hace el plan (tres lineas)
      16-32   paso 1  -> herramienta 1 -> hecho
      32-46   paso 2  -> herramienta 2 -> MAL
      46-60   lo ve y lo repite -> herramienta 2 -> hecho
      60-76   paso 3  -> herramienta 3 -> hecho
      76-88   entrega
      88-100  se queda quieto y vuelve a empezar
   ------------------------------------------------------------------ */
@keyframes agt-bocadillo {
  0%        { opacity: 0; transform: translateX(calc(var(--u) * -2)); }
  6%, 92%   { opacity: 1; transform: none; }
  100%      { opacity: 0; transform: translateX(calc(var(--u) * -2)); }
}
@keyframes agt-pulso {
  0%, 6%          { transform: rotate(45deg) scale(.6); opacity: .25; }
  16%             { transform: rotate(45deg) scale(1); opacity: 1; }
  30%, 44%, 58%, 74% { transform: rotate(45deg) scale(.78); opacity: .55; }
  22%, 38%, 52%, 66% { transform: rotate(45deg) scale(1.06); opacity: 1; }
  88%, 100%       { transform: rotate(45deg) scale(.6); opacity: .25; }
}
/* los tres pasos se escriben uno detras de otro, y luego se marca el
   que se esta haciendo */
/* OJO con los fotogramas: una propiedad que solo aparece en el 32 % vale
   TAMBIEN de 0 a 32 %, porque el navegador coge el valor del fotograma
   declarado mas cercano. La primera version solo escribia el fondo cian
   donde el paso estaba activo y salian los tres pasos encendidos desde el
   segundo cero. Por eso aqui el fondo se declara en TODOS los fotogramas,
   aunque sea para dejarlo transparente. */
@keyframes agt-activo1 {
  0%, 7%    { opacity: 0; background: transparent; }
  10%, 15%  { opacity: 1; background: transparent; }
  16%, 30%  { opacity: 1; background: rgba(0, 255, 224, .28); }
  32%, 92%  { opacity: 1; background: transparent; }
  100%      { opacity: 0; background: transparent; }
}
@keyframes agt-activo2 {
  0%, 10%   { opacity: 0; background: transparent; }
  13%, 31%  { opacity: 1; background: transparent; }
  32%, 58%  { opacity: 1; background: rgba(0, 255, 224, .28); }
  60%, 92%  { opacity: 1; background: transparent; }
  100%      { opacity: 0; background: transparent; }
}
@keyframes agt-activo3 {
  0%, 13%   { opacity: 0; background: transparent; }
  16%, 59%  { opacity: 1; background: transparent; }
  60%, 74%  { opacity: 1; background: rgba(0, 255, 224, .28); }
  76%, 92%  { opacity: 1; background: transparent; }
  100%      { opacity: 0; background: transparent; }
}
/* la ventana de marcas: 0 = vacio, -1 alto = error, -2 altos = hecho */
@keyframes agt-marca1 {
  0%, 29%   { transform: none; }
  30%, 100% { transform: translateY(calc(var(--u) * -10)); }
}
@keyframes agt-marca2 {
  0%, 43%   { transform: none; }
  /* sale mal... */
  44%, 55%  { transform: translateY(calc(var(--u) * -5)); }
  /* ...lo ve, lo repite, y ahora si */
  56%, 57%  { transform: none; }
  58%, 100% { transform: translateY(calc(var(--u) * -10)); }
}
@keyframes agt-marca3 {
  0%, 73%   { transform: none; }
  74%, 100% { transform: translateY(calc(var(--u) * -10)); }
}
/* las herramientas se encienden cuando les toca. La 2 se enciende dos
   veces: la del error y la del reintento. */
@keyframes agt-tool1 {
  0%, 17%   { background: var(--blanco); color: var(--negro); }
  20%, 28%  { background: var(--negro); color: var(--blanco); }
  31%, 100% { background: var(--blanco); color: var(--negro); }
}
@keyframes agt-tool2 {
  0%, 33%   { background: var(--blanco); color: var(--negro); }
  36%, 42%  { background: var(--negro); color: var(--blanco); }
  45%, 47%  { background: var(--morado); color: var(--sobre-morado); }
  50%, 56%  { background: var(--negro); color: var(--blanco); }
  59%, 100% { background: var(--blanco); color: var(--negro); }
}
@keyframes agt-tool3 {
  0%, 61%   { background: var(--blanco); color: var(--negro); }
  64%, 72%  { background: var(--negro); color: var(--blanco); }
  75%, 100% { background: var(--blanco); color: var(--negro); }
}
@keyframes agt-entrega {
  0%, 76%   { opacity: 0; transform: translateY(calc(var(--u) * 2)); }
  80%, 92%  { opacity: 1; transform: none; }
  100%      { opacity: 0; transform: translateY(calc(var(--u) * 2)); }
}

/* ============================================================
   FICHA "INTEGRACION 3D": la caja que se abre
   ------------------------------------------------------------
   El guion lo lleva ficha-caja.js; aqui solo esta la ropa.

   Los puntos los coloca model-viewer en el espacio del modelo y los
   tapa solos cuando quedan detras de la pieza, asi que aqui no hay ni
   una coordenada: solo como se ven. Nacen ocultos y salen cuando el
   producto ya esta fuera (data-puntos="si" lo pone el JS).

   Fondo oscuro, como el resto de los visores de la pagina: el carton
   claro y el producto oscuro se leen mejor contra penumbra que contra
   blanco.
   ============================================================ */
.svc-ficha-media-caja {
  aspect-ratio: 4 / 3;
  background: #17171a;
  touch-action: pan-y;
}
.cja-visor {
  position: relative; z-index: 1;
  display: block; width: 100%; height: 100%;
  background: transparent;
  --poster-color: transparent;
  --progress-bar-color: var(--cian);
}

/* ---------- los puntos ---------- */
.cja-punto {
  position: relative; z-index: 2;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 0; border: 0; background: none;
  color: var(--blanco);
  font-family: inherit;
  cursor: pointer;
  /* nacen apagados: durante la apertura estarian flotando en el sitio
     equivocado, porque un punto de model-viewer no sigue a un nodo
     animado, se queda donde le dijeron */
  opacity: 0; visibility: hidden;
  transition: opacity .35s ease, visibility .35s ease;
}
[data-puntos="si"] .cja-punto { opacity: 1; visibility: visible; }
.cja-punto-bola {
  flex: 0 0 auto;
  width: 24px; height: 24px;
  display: grid; place-items: center;
  border: 2px solid var(--blanco); border-radius: 50%;
  background: rgba(var(--tinta-rgb), .55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  font-size: 11px; font-weight: 900; line-height: 1; letter-spacing: 0;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.cja-punto-txt {
  padding: 4px 9px;
  border: 1px solid rgba(var(--papel-rgb), .35);
  background: rgba(var(--tinta-rgb), .55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  font-size: 10px; font-weight: 900; line-height: 1;
  letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
}
/* La etiqueta, solo la del punto que se esta mirando o senalando. Tres
   pastillas a la vez sobre una pieza de 20 cm se pisan unas a otras y no
   se lee ninguna. */
.cja-punto-txt {
  max-width: 0; padding-left: 0; padding-right: 0;
  border-left-width: 0; border-right-width: 0;
  overflow: hidden; opacity: 0;
  transition: max-width .28s ease, padding .28s ease, opacity .2s ease;
}
.cja-punto:hover .cja-punto-txt,
.cja-punto.es-activo .cja-punto-txt {
  max-width: 220px; padding-left: 9px; padding-right: 9px;
  border-left-width: 1px; border-right-width: 1px; opacity: 1;
}
.cja-punto:focus-visible .cja-punto-txt {
  max-width: 220px; padding-left: 9px; padding-right: 9px;
  border-left-width: 1px; border-right-width: 1px; opacity: 1;
}
/* Con el bocadillo abierto, la pastilla del nombre sobra: el bocadillo ya
   lo lleva de titulo, y las dos juntas se pisaban. */
.cja-punto.es-activo:not(.cja-abrir) .cja-punto-txt {
  max-width: 0; padding-left: 0; padding-right: 0;
  border-left-width: 0; border-right-width: 0; opacity: 0;
}
/* El que tiene el bocadillo abierto, por delante de los otros: sin esto
   las bolas de los demas caian ENCIMA del texto y lo tachaban. Y los
   otros se apagan un poco, que siguen pulsandose igual. */
.cja-punto.es-activo { z-index: 6; }
[data-detalle="si"] .cja-punto:not(.es-activo) { opacity: .45; }
[data-detalle="si"] .cja-punto:not(.es-activo):hover { opacity: 1; }

.cja-punto:hover .cja-punto-bola,
.cja-punto.es-activo .cja-punto-bola {
  background: var(--cian); color: var(--sobre-cian); border-color: var(--cian);
}
.cja-punto:focus-visible { outline: 2px solid var(--cian); outline-offset: 4px; }

/* ---------- volver ---------- */
.cja-atras {
  position: absolute; left: 10px; top: 10px; z-index: 4;
  min-height: 34px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 0 12px;
  border: 2px solid var(--negro);
  background: var(--blanco); color: var(--negro);
  font-family: inherit;
  font-size: 10px; font-weight: 900; line-height: 1;
  letter-spacing: .12em; text-transform: uppercase;
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
}
.cja-atras[hidden] { display: none; }
.cja-atras svg { width: 15px; height: 15px; display: block; }
.cja-atras:hover { background: var(--negro); color: var(--blanco); }
.cja-atras:focus-visible { outline: 2px solid var(--cian); outline-offset: 2px; }

/* ---------- el boton de abrir ----------
   Es un punto de model-viewer como los del producto, no un boton pegado
   a la caja: va clavado en la tapa (0, 0.296, 0 es la cara de arriba con
   las solapas cerradas) y por tanto se mueve con la caja cuando gira.
   Se distingue de los otros por el color, que para eso es la llamada. */
.cja-abrir .cja-punto-bola {
  background: var(--cian); color: var(--sobre-cian); border-color: var(--cian);
  font-size: 14px;
}
/* su etiqueta se ve siempre: es lo que hay que leer */
.cja-abrir .cja-punto-txt {
  max-width: 220px; padding-left: 9px; padding-right: 9px;
  border-left-width: 1px; border-right-width: 1px; opacity: 1;
  border-color: var(--cian); color: var(--cian);
}
.cja-abrir:hover .cja-punto-bola { background: var(--blanco); border-color: var(--blanco); }
/* solo con la caja cerrada */
.cja-abrir { opacity: 1; visibility: visible; }
[data-puntos="si"] .cja-abrir,
.cja-abrir[hidden] { opacity: 0; visibility: hidden; pointer-events: none; }

/* ---------- el brillo del emisivo ----------
   model-viewer no tiene postproceso, asi que no hay bloom de verdad. Esto
   es el halo, y va ANCLADO al producto: es un punto de model-viewer como
   los otros, o sea que sigue a la pieza cuando la camara se mueve, en vez
   de quedarse pegado a la caja. Con mix-blend-mode screen SUMA luz sobre
   lo que hay debajo, que es lo que hace un bloom, en vez de taparlo.
   Se enciende cuando el producto esta fuera. */
.cja-brillo {
  width: 150px; height: 150px;
  margin: -75px 0 0 -75px;
  border-radius: 50%;
  background: radial-gradient(circle,
              rgba(120, 245, 255, .34) 0%, rgba(90, 230, 255, .14) 34%,
              rgba(60, 220, 255, .05) 58%, rgba(var(--tinta-rgb), 0) 72%);
  filter: blur(11px);
  mix-blend-mode: screen;
  pointer-events: none;
  opacity: 0;
  transition: opacity .6s ease, transform .4s ease;
}
[data-puntos="si"] .cja-brillo { opacity: 1; }
/* Mirando una pieza de cerca el halo tapaba el producto entero: es un
   circulo de tamano fijo en pantalla, asi que cuanto mas cerca esta la
   camara mas parte de la pieza se come. Con un bocadillo abierto (que es
   cuando la camara esta encima) se encoge y baja. */
[data-detalle="si"] .cja-brillo { opacity: .5; transform: scale(.62); }

/* ---------- el bocadillo del material ----------
   Cuelga del propio punto, no de un lado de la caja: el texto sale donde
   esta la pieza de la que habla. Nace cerrado y lo abre el punto activo.

   El lado lo decide el JS (.a-la-izquierda) midiendo donde ha caido el
   punto en pantalla: pegado al borde derecho, un bocadillo que crece
   hacia la derecha se sale del visor. */
.cja-globo {
  position: absolute; left: calc(100% + 10px); top: 50%;
  z-index: 3;
  width: 200px; max-width: 44vw;
  transform: translateY(-50%) scale(.94);
  transform-origin: left center;
  padding: 12px 14px;
  border: 2px solid var(--negro);
  background: var(--blanco); color: var(--negro);
  text-align: left;
  opacity: 0; visibility: hidden;
  transition: opacity .22s ease, visibility .22s ease, transform .22s ease;
}
.cja-punto.es-activo .cja-globo {
  opacity: 1; visibility: visible; transform: translateY(-50%) scale(1);
}
.cja-punto.a-la-izquierda .cja-globo {
  left: auto; right: calc(100% + 10px);
  transform-origin: right center;
}
/* el pico: dos triangulos, el del borde y el del relleno un pelo delante */
.cja-globo::before,
.cja-globo::after {
  content: ""; position: absolute; top: 50%;
  width: 0; height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  transform: translateY(-50%);
}
.cja-globo::before { left: -10px; border-right: 10px solid var(--negro); }
.cja-globo::after  { left: -7px;  border-right: 10px solid var(--blanco); }
.cja-punto.a-la-izquierda .cja-globo::before {
  left: auto; right: -10px; border-right: 0; border-left: 10px solid var(--negro);
}
.cja-punto.a-la-izquierda .cja-globo::after {
  left: auto; right: -7px; border-right: 0; border-left: 10px solid var(--blanco);
}
.cja-globo-tit {
  display: block; margin-bottom: 7px;
  font-size: 10px; font-weight: 900; line-height: 1;
  letter-spacing: .16em; text-transform: uppercase;
}
.cja-globo-txt {
  display: block;
  font-size: 12px; font-weight: 500; line-height: 1.45;
  letter-spacing: -.01em; text-transform: none;
}

/* ---------- pista de giro ----------
   La misma pieza y la misma animacion que lleva la figura del pie
   (pistaGiro). z-index 2: encima del visor, debajo del boton. */
.cja-pista {
  position: absolute; left: 50%; bottom: 12px; z-index: 2;
  margin-left: -22px;
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid rgba(var(--papel-rgb), .55);
  border-radius: 50%;
  background: rgba(var(--tinta-rgb), .35);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: var(--cian);
  pointer-events: none;
  opacity: 0;
  animation: pistaGiro 2s ease-in-out infinite;
}
.cja-pista svg { width: 22px; height: 22px; display: block; }
.cja-pista.oculta { animation: none; opacity: 0; }
.svc-campo h3 {
  margin: 0 0 14px;
  font-size: 11px; font-weight: 900; line-height: 1;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--negro);
}
.svc-campo ul { margin: 0; padding: 0; list-style: none; }
.svc-campo li {
  position: relative;
  padding: 0 0 8px 18px;
  color: var(--gris-texto);
  font-size: clamp(15px, 1.05vw, 17px);
  font-weight: 500; line-height: 1.45; letter-spacing: -.01em;
}
.svc-campo li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 8px; height: 2px; background: var(--cian);
}
.svc-llevas li::before { background: var(--negro); }
.svc-nuevo {
  display: inline-block; margin-left: 6px; padding: 2px 6px;
  background: var(--cian); color: var(--sobre-cian);
  font-size: 9px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase;
  vertical-align: middle;
}
.svc-ficha-pie {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2.2vw, 34px);
  margin: clamp(26px, 3vw, 38px) 0 0;
  padding-top: clamp(20px, 2.2vw, 28px);
  border-top: 1px solid rgba(var(--tinta-rgb), .16);
}
.svc-ficha-pie dt {
  margin: 0 0 8px;
  font-size: 11px; font-weight: 900; line-height: 1;
  letter-spacing: .16em; text-transform: uppercase;
}
.svc-ficha-pie dd {
  margin: 0;
  color: var(--gris-texto);
  font-size: clamp(15px, 1.05vw, 17px);
  font-weight: 500; line-height: 1.45; letter-spacing: -.01em;
}

/* enlace a proyectos dentro de cada ficha */
.svc-ficha-work {
  min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  margin-top: clamp(22px, 2.4vw, 30px);
  padding: 0 20px;
  border: 2px solid var(--negro); border-radius: 0;
  background: transparent; color: var(--negro); text-decoration: none;
  font-size: 11px; font-weight: 900; line-height: 1;
  letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
  transition: background .22s ease, color .22s ease;
}
.svc-ficha-work span { font-size: 16px; line-height: 1; transition: transform .22s ease; }
.svc-ficha-work:hover { background: var(--negro); color: var(--blanco); }
.svc-ficha-work:hover span { transform: translateX(5px); }

/* boton flotante "BOOK A DEMO": solo mientras se esta en las fichas
   (lo enciende svc-demo.js con .is-visible). Mismo bloque negro que el
   resto de botones del sitio; abajo a la derecha, como el carrito de
   la tienda, y por debajo del aviso de cookies. */
.svc-demo {
  position: fixed; right: 22px; bottom: 22px; z-index: 99990;
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 52px; padding: 0 22px;
  border: 2px solid var(--negro); border-radius: 0;
  background: var(--negro); color: var(--blanco); text-decoration: none;
  font-size: 12px; font-weight: 900; line-height: 1;
  letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
  box-shadow: 0 8px 26px rgba(var(--tinta-rgb), .28);
  opacity: 0; visibility: hidden; transform: translateY(14px);
  transition: opacity .28s ease, transform .28s ease, visibility 0s linear .28s,
              background .22s ease, color .22s ease, border-color .22s ease;
}
.svc-demo.is-visible {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .28s ease, transform .28s ease, visibility 0s,
              background .22s ease, color .22s ease, border-color .22s ease;
}
.svc-demo span { font-size: 18px; line-height: 1; transition: transform .22s ease; }
.svc-demo:hover { background: var(--cian); color: var(--sobre-cian); border-color: var(--cian); }
.svc-demo:hover span { transform: translateX(4px); }
@media (max-width: 600px) { .svc-demo { right: 14px; bottom: 14px; min-height: 48px; padding: 0 18px; } }
@media (prefers-reduced-motion: reduce) { .svc-demo { transform: none; } }


/* ---------- otras familias ---------- */
.svc-otras-fila {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: clamp(30px, 3.4vw, 44px);
  border-top: 2px solid var(--negro);
  border-left: 2px solid var(--negro);
}
.svc-otra {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  min-height: 96px;
  padding: 0 clamp(18px, 2vw, 28px);
  border-right: 2px solid var(--negro);
  border-bottom: 2px solid var(--negro);
  background: var(--blanco); color: var(--negro);
  text-decoration: none;
  transition: background .24s ease;
}
.svc-otra-nombre {
  font-family: "Sofia Sans Extra Condensed", "Sofia Sans", Arial, sans-serif;
  font-size: clamp(24px, 2.4vw, 34px);
  font-weight: 900; line-height: 1; letter-spacing: -.02em;
  text-transform: uppercase;
}
.svc-otra-flecha { font-size: 20px; line-height: 1; transition: transform .24s ease; }
.svc-otra:hover { background: var(--cian); }
.svc-otra:hover .svc-otra-flecha { transform: translateX(6px); }

/* ---------- preguntas ---------- */
.svc-faq-grid {
  display: grid;
  grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 72px);
  align-items: start;
}
.svc-faq-item {
  border-top: 1px solid rgba(var(--tinta-rgb), .18);
}
.svc-faq-item:last-child { border-bottom: 1px solid rgba(var(--tinta-rgb), .18); }
.svc-faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: clamp(18px, 2vw, 24px) 0;
  font-size: clamp(17px, 1.3vw, 21px);
  font-weight: 700; line-height: 1.32; letter-spacing: -.02em;
  transition: color .22s ease;
}
.svc-faq-item summary::-webkit-details-marker { display: none; }
.svc-faq-item summary::after {
  content: "+";
  flex: 0 0 auto;
  font-size: 22px; font-weight: 400; line-height: 1;
  transition: transform .24s ease;
}
.svc-faq-item[open] summary::after { transform: rotate(45deg); }
.svc-faq-item summary:hover { color: var(--morado); }
.svc-faq-cuerpo { padding: 0 0 clamp(20px, 2.2vw, 28px); max-width: 62ch; }
.svc-faq-cuerpo p {
  margin: 0;
  color: var(--gris-texto);
  font-size: clamp(15px, 1.1vw, 18px);
  font-weight: 500; line-height: 1.55; letter-spacing: -.01em;
}

/* ---------- cta ----------
   En blanco a proposito: el pie ya es negro y va justo debajo. Con la CTA
   tambien en negro se leian como una sola mancha de 900 px. */
.svc-cta { background: var(--blanco); color: var(--negro); }
.svc-cta-titulo {
  margin: clamp(20px, 2.2vw, 30px) 0 0;
  font-family: "Sofia Sans Extra Condensed", "Sofia Sans", Arial, sans-serif;
  font-size: clamp(42px, 5.6vw, 82px);
  font-weight: 900; line-height: .96; letter-spacing: -.02em;
  text-transform: uppercase;
}
.svc-cta-texto {
  max-width: 620px;
  margin: clamp(20px, 2.2vw, 28px) 0 0;
  color: var(--gris-texto);
  font-size: clamp(16px, 1.2vw, 19px);
  font-weight: 500; line-height: 1.5; letter-spacing: -.02em;
}

/* ---------- adaptable ---------- */
@media (max-width: 1024px) {
  .svc-faq-grid { grid-template-columns: minmax(0, 1fr); }
  .svc-otras-fila { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* El esquema en tres columnas necesita sitio: por debajo de 900 px se apila y
   las flechas pasan a ser verticales. */
@media (max-width: 900px) {
  .svc-esquema { grid-template-columns: minmax(0, 1fr); }
  .svc-esq-flecha {
    width: auto; height: clamp(24px, 5vw, 36px);
    border-right: 2px solid var(--negro);
  }
  .svc-esq-flecha span { width: 2px; height: 100%; margin: 0 auto; }
  .svc-esq-flecha span::before {
    right: auto; left: 50%; top: auto; bottom: -1px;
    transform: translate(-50%, 0) rotate(135deg);
  }
  .svc-esq-flecha span::after { transform: scaleY(0); transform-origin: top; }
  @keyframes svcEsqPaso {
    0%, 2%    { transform: scaleY(0); }
    6%, 30%   { transform: scaleY(1); }
    34%, 100% { transform: scaleY(0); }
  }
}

@media (max-width: 900px) {
  .svc-rejilla { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 768px) {
  .svc-inner { width: calc(100% - 32px); }
  .svc-ficha { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .svc-ficha-meta { padding-top: 0; }
  .svc-ficha-alto { grid-template-columns: minmax(0, 1fr); }
  /* en movil el visor sube por delante de las listas: es lo que engancha */
  .svc-ficha-alto-medio .svc-ficha-media { order: -1; }
  .svc-ficha-alto-medio .svc-ficha-campos { gap: clamp(20px, 5vw, 28px); }
  .svc-ficha-pie { grid-template-columns: minmax(0, 1fr); }
  .svc-otras-fila { grid-template-columns: minmax(0, 1fr); }
  .svc-tarjeta-subs li { font-size: 10px; letter-spacing: .06em; }
}

@media (max-width: 480px) {
  .svc-migas { font-size: 10px; letter-spacing: .1em; }
}

/* ============================================================
   ESTUDIO  (/about/ y /es/estudio/)
   Portado el 25-08-2026 del bloque .cab- de la pagina viva
   (_source/live/css/about.inline.css), sin reescribirlo. Solo
   cambian tres cosas:
     · el doble salto de linea que mete WordPress al servir el
       CSS en linea
     · --cyan y --purple pasan a apuntar a los tokens del sitio
     · --black se queda en var(--negro-suave) a proposito: NO es var(--negro),
       que es var(--negro). Esta pagina usa un negro mas suave y se veria
       distinta si se unifica.
   ============================================================ */
.cab { --black:var(--negro-suave); --cyan: var(--cian); --purple: var(--morado); }
  .cab, .cab * { box-sizing: border-box; }
  .cab {
  display: block;
  background: var(--blanco);
  color: var(--negro-suave);
  font-family: "Sofia Sans", Arial, sans-serif;
  }
  .cab .cab-wrap { width: min(1180px, calc(100% - 44px)); margin: 0 auto; }
  .cab-section { padding: clamp(72px, 9vw, 140px) 0; scroll-margin-top: 100px; }
  .cab-section-tight { padding-top: clamp(40px, 5vw, 72px); }
  .cab-last { padding-bottom: clamp(80px, 10vw, 150px); }
  /* full-width divider — solid black rule edge-to-edge */
  .cab-divider { width: 100%; height: 2px; background: var(--negro-suave); }
  /* kicker */
  .cab-kicker { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 22px; }
  .cab-kicker span { display: block; width: 42px; height: 2px; background: var(--cyan); }
  .cab-kicker p { margin: 0; font-size: 11px; font-weight: 900; line-height: 1; letter-spacing: 0.18em; text-transform: uppercase; color: var(--negro-suave); }
  /* titles */
  .cab-dot { color: var(--cyan); }
  .cab-dot-cyan { color: var(--cyan); margin-left: 0.06em; }
  .cab-h2 {
  margin: 0; max-width: 16ch;
  font-family: "Sofia Sans Extra Condensed", "Arial Narrow", Arial, sans-serif;
  font-weight: 800; text-transform: uppercase;
  font-size: clamp(40px, 5.2vw, 86px); line-height: 0.88; letter-spacing: -0.03em; color: var(--negro-suave);
  }
  .cab-head { margin-bottom: clamp(36px, 4vw, 60px); }
  .cab-lead { margin: 20px 0 0; max-width: 60ch; font-size: clamp(16px, 1.2vw, 19px); font-weight: 500; line-height: 1.55; color: var(--gris-2a); }
  /* HERO */
  .cab-hero { position: relative; overflow: hidden; background: var(--blanco); isolation: isolate; min-height: calc(100vh - 90px); }
  .cab-hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; background: var(--blanco); z-index: 1; }
  .cab-hero-wrap { position: relative; z-index: 2; width: min(1180px, calc(100% - 44px)); margin: 0 auto; padding: clamp(80px, 9vw, 130px) 0; display: flex; }
  .cab-hero-box { width: min(940px, 100%); background: var(--blanco); border: 2px solid var(--negro-suave); padding: clamp(28px, 3.4vw, 52px); }
  .cab-hero-title { margin: 0; font-family: "Sofia Sans Extra Condensed", "Arial Narrow", Arial, sans-serif; font-weight: 800; text-transform: uppercase; font-size: clamp(72px, 8.4vw, 116px); line-height: 0.88; letter-spacing: -0.045em; color: var(--negro-suave); }
  .cab-hero-copy { margin: clamp(24px, 3vw, 36px) 0 0; max-width: 64ch; font-size: clamp(17px, 1.3vw, 21px); font-weight: 500; line-height: 1.5; color: var(--gris-1a); }
  .cab-hero-actions { margin-top: clamp(26px, 3vw, 36px); display: flex; flex-wrap: wrap; gap: 14px; }
  /* TOC index */
  .cab-toc { margin-top: clamp(30px, 3.4vw, 44px); display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 2px solid var(--negro-suave); border-left: 2px solid var(--negro-suave); }
  .cab-toc-item { display: flex; align-items: baseline; gap: 10px; padding: 16px 18px; border-right: 2px solid var(--negro-suave); border-bottom: 2px solid var(--negro-suave); text-decoration: none; color: var(--negro-suave); font-size: 14px; font-weight: 700; letter-spacing: -0.01em; transition: background 0.2s ease, color 0.2s ease; }
  .cab-toc-item span { font-size: 11px; font-weight: 900; letter-spacing: 0.1em; color: var(--gris-8a); transition: color 0.2s ease; }
  .cab-toc-item:hover { background: var(--cyan); color: var(--negro-suave); }
  .cab-toc-item:hover span { color: var(--negro-suave); }
  /* con 7 entradas la ultima fila queda con una sola celda: la ocupa entera */
  .cab-toc-ancho-final .cab-toc-item:last-child { grid-column: 1 / -1; }
  /* buttons */
  .cab-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 26px; border: 2px solid var(--negro-suave); background: var(--blanco); color: var(--negro-suave); text-decoration: none; font-size: 12px; font-weight: 900; line-height: 1; letter-spacing: 0.14em; text-transform: uppercase; transition: background 0.22s ease, color 0.22s ease, transform 0.22s ease; }
  .cab-btn:hover { background: var(--cyan); color: var(--negro-suave); transform: translateY(-2px); }
  .cab-btn-primary { background: var(--purple); border-color: var(--negro-suave); color: var(--sobre-morado); }
  .cab-btn-primary:hover { background: var(--cyan); color: var(--negro-suave); }
  /* 4-card grid (static, NO hover) */
  .cab-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 2px solid var(--negro-suave); border-left: 2px solid var(--negro-suave); }
  .cab-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 2px solid var(--negro-suave); border-left: 2px solid var(--negro-suave); }
  .cab-card[id] { scroll-margin-top: 110px; }
.cab-card { border-right: 2px solid var(--negro-suave); border-bottom: 2px solid var(--negro-suave); padding: clamp(22px, 2vw, 32px); background: var(--blanco); }
  .cab-num { display: block; font-size: 12px; font-weight: 900; letter-spacing: 0.12em; color: var(--cyan); margin-bottom: 18px; }
  .cab-card h3 { margin: 0 0 12px; font-size: clamp(16px, 1.25vw, 19px); font-weight: 800; letter-spacing: -0.01em; line-height: 1.12; color: var(--negro-suave); }
  .cab-card p { margin: 0; font-size: 14px; font-weight: 500; line-height: 1.55; color: var(--gris-44); }
/* Tarjeta-enlace: las cuatro familias de "Que hacemos" enlazan a su pagina
   de servicios. Mismo aspecto que la tarjeta de siempre, mas la coletilla
   "Ver la familia" (la del hub) que se subraya al pasar por encima. */
  a.cab-card { display: block; text-decoration: none; color: inherit; transition: background .22s ease; }
  a.cab-card:hover { background: var(--gris-fa); }
  .cab-card-enlace { display: inline-block; margin-top: 14px; font-size: 11px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: var(--negro-suave); }
  .cab-card-enlace::after { content: " \2192"; }
  a.cab-card:hover .cab-card-enlace { text-decoration: underline; }
  .cab-grid-phil .cab-card h3 { min-height: 0; }
  /* chips */
  .cab-chips { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; border-top: 2px solid var(--negro-suave); border-left: 2px solid var(--negro-suave); }
  .cab-chip { border-right: 2px solid var(--negro-suave); border-bottom: 2px solid var(--negro-suave); padding: 20px; background: var(--blanco); }
  .cab-chip h3 { margin: 0 0 8px; font-size: clamp(16px, 1.25vw, 19px); font-weight: 800; line-height: 1.15; color: var(--negro-suave); }
  .cab-chip p { margin: 0; font-size: 13px; font-weight: 500; line-height: 1.5; color: var(--gris-55); }
  /* method */
  .cab-method { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 2px solid var(--negro-suave); }
  .cab-method-steps { display: flex; flex-direction: column; }
  .cab-step { display: flex; gap: 16px; align-items: flex-start; text-align: left; padding: clamp(20px, 2vw, 30px); background: var(--blanco); border: 0; border-bottom: 2px solid var(--negro-suave); cursor: pointer; font-family: inherit; transition: background 0.2s ease; }
  .cab-step:last-child { border-bottom: 0; }
  .cab-step .cab-num { margin: 0; }
  .cab-step-body { display: flex; flex-direction: column; gap: 6px; }
  .cab-step-title { font-size: clamp(16px, 1.25vw, 19px); font-weight: 800; line-height: 1.05; color: var(--negro-suave); }
  .cab-step-text { font-size: 13.5px; font-weight: 500; line-height: 1.5; color: var(--gris-55); }
  .cab-step.is-active { background: var(--negro-suave); }
  .cab-step.is-active .cab-step-title, .cab-step.is-active .cab-step-text { color: var(--blanco); }
  .cab-step.is-active .cab-num { color: var(--cyan); }
  .cab-step:not(.is-active):hover { background: var(--gris-f2); }
  .cab-method-media { position: relative; background: var(--gris-f4); min-height: 320px; }
  .cab-method-media img { width: 100%; height: 100%; object-fit: cover; display: block; position: absolute; inset: 0; }
  .cab-method-counter { position: absolute; left: 16px; bottom: 14px; z-index: 2; display: flex; gap: 5px; font-size: 12px; font-weight: 900; letter-spacing: 0.1em; color: var(--blanco); mix-blend-mode: difference; }
  /* technology */
  .cab-closing { margin-top: clamp(40px, 4vw, 60px); display: flex; flex-wrap: wrap; gap: 14px; }
  /* reveal */
  .cab-head, .cab-grid-4, .cab-grid-3, .cab-chips, .cab-method { opacity: 0; transform: translateY(16px); transition: opacity 0.6s ease, transform 0.6s ease; }
  .cab .is-visible { opacity: 1; transform: none; }
  @media (max-width: 1024px) {
  .cab-grid-4, .cab-grid-3 { grid-template-columns: repeat(2, 1fr); }
  .cab-chips { grid-template-columns: repeat(2, 1fr); }
  .cab-toc { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 768px) {
  .cab-method { grid-template-columns: 1fr; }
  .cab-method-media { min-height: 260px; order: -1; }
  .cab-hero { min-height: calc(100vh - 72px); }
  .cab-hero-box { width: 100%; }
  }
  @media (max-width: 560px) {
  .cab-grid-4, .cab-grid-3 { grid-template-columns: 1fr; }
  .cab-chips { grid-template-columns: 1fr; }
  .cab-toc { grid-template-columns: 1fr; }
  .cab-hero-actions, .cab-closing { flex-direction: column; }
  .cab-btn { width: 100%; }
  }

/* ============================================================
   LEGALES  (terminos, reembolso, privacidad)
   Portado el 25-08-2026 del <style> que las tres paginas vivas
   llevan incrustado dentro del propio contenido. Union de los
   tres bloques, que son acumulativos: reembolso es la base,
   terminos anade el indice, y privacidad el resumen de un
   vistazo. Se deja tal cual salvo el formato.
   NO se porta el bloque del pie que privacidad inyecta aparte:
   el pie del sistema ya lo tiene y son el mismo.
   ============================================================ */

.lg-envoltorio { padding-top: clamp(28px, 4vw, 44px); }
.lg-migas { width: min(820px, calc(100% - 40px)); margin: 0 auto clamp(4px, 1vw, 12px); }

.contrast-legal { max-width:820px;margin:0 auto;padding:clamp(28px,4vw,56px) clamp(20px,5vw,32px) clamp(60px,8vw,110px);font-family:'Sofia Sans','Sofia Pro',Arial,sans-serif;color:var(--negro);line-height:1.62;font-size:16px }
.contrast-legal * { box-sizing:border-box }
.contrast-legal .lg-kicker { display:inline-flex;align-items:center;gap:12px;font-size:12px;font-weight:900;letter-spacing:.16em;text-transform:uppercase }
.contrast-legal .lg-kicker::before { content:"";width:42px;height:2px;background:#00FFE0 }
.contrast-legal h1 { font-family:'Sofia Sans Extra Condensed','Arial Narrow',Arial,sans-serif;font-weight:800;text-transform:uppercase;font-size:clamp(40px,6vw,72px);line-height:.9;letter-spacing:-.03em;margin:.4rem 0 .2rem }
.contrast-legal h1 .dot { color:#8000FF }
.contrast-legal .lg-meta { color:rgba(var(--tinta-rgb), .55);font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px }
.contrast-legal h2 { font-family:'Sofia Sans Extra Condensed','Arial Narrow',Arial,sans-serif;font-weight:800;text-transform:uppercase;font-size:clamp(22px,2.4vw,30px);letter-spacing:-.02em;margin:34px 0 10px;padding-top:18px;border-top:2px solid var(--negro) }
.contrast-legal p,.contrast-legal li { font-size:16px }
.contrast-legal a { color:#8000FF }
.contrast-legal ul { padding-left:20px }
.contrast-legal .lg-ph { background:#00FFE0;padding:0 4px;font-weight:700 }
.contrast-legal h3 { font-size:16px;font-weight:900;margin:18px 0 6px;text-transform:uppercase;letter-spacing:.02em }
.contrast-legal .lg-toc { border:2px solid var(--negro);padding:16px 18px;margin:22px 0 }
.contrast-legal .lg-toc ol { margin:0;padding-left:20px;columns:2;font-size:14px }
@media(max-width:560px) {
  .contrast-legal .lg-toc ol{columns:1}
}
.contrast-legal h2 .lg-no { color:#8000FF;margin-right:10px }
.contrast-legal .lg-glance { border:2px solid var(--negro);margin:24px 0 }
.contrast-legal .lg-glance div { display:grid;grid-template-columns:200px 1fr;gap:16px;padding:14px 18px;border-bottom:2px solid rgba(var(--tinta-rgb), .12) }
.contrast-legal .lg-glance div:last-child { border-bottom:0 }
.contrast-legal .lg-glance b { font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:rgba(var(--tinta-rgb), .55) }

/* El "de un vistazo" de privacidad va a dos columnas con la primera fija en
   200 px. A 390 px de ancho eso no cabe y desbordaba la pagina entera: en
   movil se apila. */
@media (max-width: 560px) {
  .contrast-legal .lg-glance div { grid-template-columns: minmax(0, 1fr); gap: 6px; }
}

/* ============================================================
   TIENDA  (/store/ y /es/tienda/)
   Portado el 26-08-2026 del bloque .contrast-marketplace-page de
   store.inline.css, sin reescribirlo: solo se le quita el doble
   salto de linea que mete WordPress al servir el CSS en linea.
   Todo cuelga de .contrast-marketplace-page, asi que no puede
   pisar nada del resto del sitio.
   ============================================================ */
/* =========================
  BASE
========================= */
.contrast-marketplace-page {
  width: 100%;
  background: var(--blanco);
  color: var(--negro);
  overflow: hidden;
  font-family: "Sofia Sans", "Sofia Pro", Arial, sans-serif;
}
.contrast-marketplace-page,
.contrast-marketplace-page * {
  box-sizing: border-box;
}
.contrast-marketplace-page a,
.contrast-marketplace-page button {
  color: inherit;
  text-decoration: none;
}
.contrast-marketplace-page button,
.contrast-marketplace-page input,
.contrast-marketplace-page textarea,
.contrast-marketplace-page select {
  font-family: "Sofia Sans", "Sofia Pro", Arial, sans-serif;
}
.contrast-marketplace-page img {
  max-width: 100%;
  height: auto;
}
/* =========================
  REVEAL ON SCROLL
========================= */
/* La miga de pan de la tienda. El generador la envuelve en .cmp-envoltorio,
   que hasta ahora no tenia CSS: la miga se pegaba al borde izquierdo de la
   ventana, fuera de todo contenedor. Mismo ancho que .svc-inner. */
.cmp-envoltorio {
  width: min(1180px, calc(100% - 44px));
  margin: 0 auto;
  padding-top: clamp(26px, 3vw, 42px);
}

.contrast-marketplace-page .cmp-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
  opacity 0.7s ease,
  transform 0.7s ease;
}
.contrast-marketplace-page .cmp-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
/* =========================
  HERO
========================= */
.contrast-marketplace-page .cmp-hero {
  width: 100%;
  min-height: clamp(430px, 62vh, 620px);
  display: flex;
  align-items: center;
  /* El relleno lateral coloca la caja del texto en la misma columna que la
     miga de pan y el resto de la pagina (min(1180px, 100% - 44px), centrada).
     Antes era clamp(22px, 5vw, 80px): en una pantalla ancha la caja quedaba
     a 80 px del borde y la columna a 370, o sea descolocada. */
  padding: clamp(48px, 6vw, 90px) max(22px, calc((100% - 1180px) / 2)) clamp(70px, 8vw, 120px);
  background: var(--blanco);
  position: relative;
}
.contrast-marketplace-page .cmp-hero { overflow: hidden; }
/* El lienzo de las carpetas va detras del texto, a todo el heroe. */
.contrast-marketplace-page .cmp-carpetas-lienzo {
  position: absolute; inset: 0; z-index: 0;
  display: block; width: 100%; height: 100%;
  background: var(--blanco);
  pointer-events: none;
}
/* El texto del heroe va en una caja blanca con borde, como en la portada:
   la carpeta y su estela pasan por detras y el titulo se lee siempre. */
.contrast-marketplace-page .cmp-hero-inner {
  position: relative; z-index: 1;
  width: min(940px, 100%);
  margin: 0;
  padding: clamp(28px, 3.4vw, 52px);
  background: var(--blanco);
  border: 2px solid var(--negro);
}
.contrast-marketplace-page .cmp-hero { align-items: center; }
.contrast-marketplace-page .cmp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 28px;
  color: var(--negro);
  font-family: "Sofia Sans", "Sofia Pro", Arial, sans-serif;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.contrast-marketplace-page .cmp-eyebrow::before {
  content: "";
  width: 42px;
  height: 2px;
  background: #00FFE0;
  display: block;
}
.contrast-marketplace-page .cmp-title {
  max-width: 1040px;
  margin: 0;
  color: var(--negro);
  font-family: "Sofia Sans Extra Condensed", "Sofia Pro", "Arial Narrow", Arial, sans-serif;
  font-size: clamp(64px, 8.4vw, 116px);
  font-weight: 800;
  line-height: 0.88;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
}
.contrast-marketplace-page .cmp-intro {
  max-width: 820px;
  margin: clamp(34px, 4vw, 54px) 0 0;
  color: rgba(var(--tinta-rgb), 0.68);
  font-family: "Sofia Sans", "Sofia Pro", Arial, sans-serif;
  font-size: clamp(17px, 1.35vw, 22px);
  font-weight: 500;
  line-height: 1.48;
  letter-spacing: -0.015em;
}
.contrast-marketplace-page .cmp-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: clamp(34px, 4vw, 54px);
}
/* =========================
  BUTTONS
========================= */
.contrast-marketplace-page .cmp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 24px;
  border: 2px solid var(--negro);
  border-radius: 0;
  background: transparent;
  color: var(--negro);
  font-family: "Sofia Sans", "Sofia Pro", Arial, sans-serif;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition:
  transform 0.22s ease,
  background 0.22s ease,
  color 0.22s ease,
  border-color 0.22s ease;
}
.contrast-marketplace-page .cmp-btn:hover {
  background: #00FFE0;
  color: var(--sobre-cian);
  border-color: var(--negro);
  transform: translateY(-2px);
}
.contrast-marketplace-page .cmp-btn-primary,
.contrast-marketplace-page .cmp-btn-secondary {
  background: transparent;
  color: var(--negro);
  border-color: var(--negro);
}
/* =========================
  STATUS BAR + FULL WIDTH DIVIDER
========================= */
.contrast-marketplace-page .cmp-status {
  width: min(1180px, calc(100% - 44px));
  margin: clamp(86px, 8vw, 128px) auto 0;
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 2px solid var(--negro);
  background: transparent;
}
/* Línea full width separada de los cuadros */
.contrast-marketplace-page .cmp-status::before {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(-1 * clamp(52px, 5vw, 76px));
  width: 100vw;
  height: 2px;
  background: var(--negro);
  transform: translateX(-50%);
  pointer-events: none;
}
.contrast-marketplace-page .cmp-status-item {
  min-height: 108px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-right: 2px solid var(--negro);
  background: transparent;
}
.contrast-marketplace-page .cmp-status-item:last-child {
  border-right: 0;
}
.contrast-marketplace-page .cmp-status-number {
  color: var(--negro);
  font-family: "Sofia Sans Extra Condensed", "Sofia Pro", "Arial Narrow", Arial, sans-serif;
  font-size: clamp(38px, 4.8vw, 64px);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.04em;
}
.contrast-marketplace-page .cmp-status-label {
  margin-top: 10px;
  color: rgba(var(--tinta-rgb), 0.58);
  font-family: "Sofia Sans", "Sofia Pro", Arial, sans-serif;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
/* =========================
  REAL FILTERS
========================= */
.contrast-marketplace-page .cmp-filter-row {
  width: min(1180px, calc(100% - 44px));
  margin: clamp(72px, 7vw, 112px) auto 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.contrast-marketplace-page .cmp-filter {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 24px;
  border: 2px solid var(--negro);
  border-radius: 0;
  color: var(--negro);
  background: transparent;
  font-family: "Sofia Sans", "Sofia Pro", Arial, sans-serif;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
  background 0.22s ease,
  color 0.22s ease,
  border-color 0.22s ease,
  transform 0.22s ease;
}
.contrast-marketplace-page .cmp-filter:hover,
.contrast-marketplace-page .cmp-filter.is-active {
  background: #00FFE0;
  color: var(--sobre-cian);
  border-color: var(--negro);
  transform: translateY(-2px);
}
/* =========================
  PRODUCTS GRID
========================= */
.contrast-marketplace-page .cmp-products {
  width: min(1180px, calc(100% - 44px));
  margin: clamp(44px, 5vw, 76px) auto 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.contrast-marketplace-page .cmp-card {
  min-height: 620px;
  display: flex;
  flex-direction: column;
  background: transparent;
  color: var(--negro);
  border: 2px solid var(--negro);
  overflow: hidden;
  position: relative;
  transition:
  opacity 0.25s ease,
  transform 0.28s ease,
  border-color 0.22s ease,
  background 0.22s ease;
}
.contrast-marketplace-page .cmp-card:hover {
  transform: translateY(-6px);
  border-color: var(--negro);
}
.contrast-marketplace-page .cmp-card.is-hidden {
  display: none;
}
.contrast-marketplace-page .cmp-card-featured,
.contrast-marketplace-page .cmp-card-soon {
  background: transparent;
  color: var(--negro);
}
.contrast-marketplace-page .cmp-card-media {
  height: 310px;
  position: relative;
  overflow: hidden;
  border-bottom: 2px solid var(--negro);
}
/* =========================
  CARD MEDIA / LOGOS
========================= */
.contrast-marketplace-page .cmp-card-media-image {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(34px, 5vw, 70px);
  background: transparent;
}
.contrast-marketplace-page .cmp-card-media-light {
  background: transparent;
}
.contrast-marketplace-page .cmp-card-media-image img {
  width: min(72%, 360px);
  max-height: 190px;
  object-fit: contain;
  display: block;
}
/* =========================
  PLACEHOLDER VISUALS
========================= */
.contrast-marketplace-page .cmp-card-visual,
.contrast-marketplace-page .cmp-card-visual-empty {
  width: 100%;
  height: 100%;
  position: relative;
}
.contrast-marketplace-page .cmp-card-visual,
.contrast-marketplace-page .cmp-card-visual-empty {
  background: transparent;
}
.contrast-marketplace-page .cmp-plus-horizontal,
.contrast-marketplace-page .cmp-plus-vertical {
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  background: var(--negro);
  transform: translate(-50%, -50%);
}
.contrast-marketplace-page .cmp-plus-horizontal {
  width: 72px;
  height: 2px;
}
.contrast-marketplace-page .cmp-plus-vertical {
  width: 2px;
  height: 72px;
}
/* =========================
  BADGES
========================= */
.contrast-marketplace-page .cmp-card-badge {
  position: absolute;
  left: 18px;
  top: 18px;
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 13px;
  border-radius: 0;
  border: 2px solid var(--negro);
  background: #00FFE0;
  color: var(--sobre-cian);
  font-family: "Sofia Sans", "Sofia Pro", Arial, sans-serif;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.contrast-marketplace-page .cmp-badge-soon {
  background: var(--blanco);
  border: 2px solid var(--negro);
  color: var(--negro);
}
.contrast-marketplace-page .cmp-badge-free {
  background: #00FFE0;
  border: 2px solid var(--negro);
  color: var(--sobre-cian);
}
.contrast-marketplace-page .cmp-card-free-resource .cmp-card-media-image img {
  width: min(58%, 260px);
  max-height: 180px;
}
/* =========================
  CARD CONTENT
========================= */
.contrast-marketplace-page .cmp-card-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 3vw, 34px);
}
.contrast-marketplace-page .cmp-card-meta {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
  color: rgba(var(--tinta-rgb), 0.58);
  font-family: "Sofia Sans", "Sofia Pro", Arial, sans-serif;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.contrast-marketplace-page .cmp-card-title {
  margin: 0;
  color: var(--negro);
  font-family: "Sofia Sans Extra Condensed", "Sofia Pro", "Arial Narrow", Arial, sans-serif;
  font-size: clamp(48px, 5vw, 86px);
  font-weight: 800;
  line-height: 0.88;
  letter-spacing: -0.035em;
  text-transform: uppercase;
}
.contrast-marketplace-page .cmp-card-text {
  max-width: 540px;
  margin: 22px 0 0;
  color: rgba(var(--tinta-rgb), 0.68);
  font-family: "Sofia Sans", "Sofia Pro", Arial, sans-serif;
  font-size: clamp(15px, 1.1vw, 18px);
  font-weight: 500;
  line-height: 1.48;
  letter-spacing: -0.01em;
}
/* =========================
  TAGS
========================= */
.contrast-marketplace-page .cmp-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 28px;
}
.contrast-marketplace-page .cmp-tags span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 0;
  border: 2px solid var(--negro);
  background: transparent;
  color: var(--negro);
  font-family: "Sofia Sans", "Sofia Pro", Arial, sans-serif;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
/* =========================
  CARD ACTIONS
========================= */
.contrast-marketplace-page .cmp-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: auto;
  padding-top: 38px;
}
.contrast-marketplace-page .cmp-card-link {
  position: relative;
  display: inline-flex;
  color: var(--negro);
  font-family: "Sofia Sans", "Sofia Pro", Arial, sans-serif;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition:
  color 0.22s ease,
  background 0.22s ease;
}
.contrast-marketplace-page .cmp-card-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -7px;
  width: 100%;
  height: 2px;
  background: #00FFE0;
  transform: scaleX(1);
  transform-origin: left;
}
.contrast-marketplace-page .cmp-card-link:hover {
  color: var(--sobre-cian);
  background: #00FFE0;
}
.contrast-marketplace-page .cmp-main-link {
  color: var(--negro);
}
.contrast-marketplace-page .cmp-disabled-link {
  opacity: 0.38;
  pointer-events: none;
}
/* =========================
  EMPTY STATE
========================= */
.contrast-marketplace-page .cmp-empty-state {
  width: min(1180px, calc(100% - 44px));
  margin: 28px auto 0;
  display: none;
  border: 2px solid var(--negro);
  padding: 28px;
  background: transparent;
}
.contrast-marketplace-page .cmp-empty-state.is-visible {
  display: block;
}
.contrast-marketplace-page .cmp-empty-state p {
  margin: 0;
  color: rgba(var(--tinta-rgb), 0.62);
  font-family: "Sofia Sans", "Sofia Pro", Arial, sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
/* =========================
  DOCUMENTATION SECTION
========================= */
.contrast-marketplace-page .cmp-docs {
  width: min(1180px, calc(100% - 44px));
  margin: clamp(96px, 10vw, 150px) auto clamp(90px, 10vw, 150px);
  padding-top: clamp(74px, 8vw, 112px);
  position: relative;
  border-top: 0;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(34px, 6vw, 80px);
}
.contrast-marketplace-page .cmp-docs::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 100vw;
  height: 2px;
  background: var(--negro);
  transform: translateX(-50%);
  pointer-events: none;
}
.contrast-marketplace-page .cmp-section-title {
  max-width: 620px;
  margin: 0;
  color: var(--negro);
  font-family: "Sofia Sans Extra Condensed", "Sofia Pro", "Arial Narrow", Arial, sans-serif;
  font-size: clamp(52px, 7vw, 108px);
  font-weight: 800;
  line-height: 0.88;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}
.contrast-marketplace-page .cmp-docs-right {
  width: 100%;
  border-top: 2px solid var(--negro);
}
.contrast-marketplace-page .cmp-doc-row {
  width: 100%;
  min-height: 86px;
  padding: 0 2px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border: 0;
  border-bottom: 2px solid var(--negro);
  background: transparent;
  color: var(--negro);
  text-align: left;
  cursor: pointer;
  font-family: "Sofia Sans", "Sofia Pro", Arial, sans-serif;
  transition:
  background 0.22s ease,
  padding 0.22s ease;
}
.contrast-marketplace-page .cmp-doc-row:hover {
  background: #00FFE0;
  color: var(--sobre-cian);
  padding-left: 12px;
}
.contrast-marketplace-page .cmp-doc-title {
  color: currentColor;
  font-family: "Sofia Sans", "Sofia Pro", Arial, sans-serif;
  font-size: clamp(20px, 2vw, 30px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.contrast-marketplace-page .cmp-doc-arrow {
  color: currentColor;
  font-family: "Sofia Sans", "Sofia Pro", Arial, sans-serif;
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}
/* =========================
  SUPPORT FORM
========================= */
.contrast-marketplace-page .cmp-support-panel {
  display: none;
  width: 100%;
  padding: 28px 0 34px;
  border-bottom: 2px solid var(--negro);
}
.contrast-marketplace-page .cmp-support-panel.is-open {
  display: block;
}
.contrast-marketplace-page .cmp-support-form {
  width: 100%;
  display: grid;
  gap: 20px;
}
.contrast-marketplace-page .cmp-form-row {
  width: 100%;
  display: grid;
  gap: 10px;
}
.contrast-marketplace-page .cmp-form-row label {
  color: var(--negro);
  font-family: "Sofia Sans", "Sofia Pro", Arial, sans-serif;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.contrast-marketplace-page .cmp-form-row input,
.contrast-marketplace-page .cmp-form-row select,
.contrast-marketplace-page .cmp-form-row textarea {
  width: 100%;
  min-height: 52px;
  padding: 14px;
  border: 2px solid var(--negro);
  border-radius: 0;
  background: transparent;
  color: var(--negro);
  font-family: "Sofia Sans", "Sofia Pro", Arial, sans-serif;
  font-size: 16px; /* 15 hacia zoom al enfocar en iOS (auditoria 08-10-2026, area 6) */
  font-weight: 500;
  line-height: 1.3;
  outline: none;
  transition:
  border-color 0.22s ease,
  background 0.22s ease;
}
.contrast-marketplace-page .cmp-form-row textarea {
  resize: vertical;
  min-height: 140px;
}
.contrast-marketplace-page .cmp-form-row input:focus,
.contrast-marketplace-page .cmp-form-row select:focus,
.contrast-marketplace-page .cmp-form-row textarea:focus {
  border-color: var(--negro);
  background: #00FFE0;
}
.contrast-marketplace-page .cmp-form-submit {
  appearance: none;
  -webkit-appearance: none;
  width: fit-content;
  min-height: 52px;
  padding: 0 24px;
  border: 2px solid var(--negro);
  border-radius: 0;
  background: transparent;
  color: var(--negro);
  font-family: "Sofia Sans", "Sofia Pro", Arial, sans-serif;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
  background 0.22s ease,
  color 0.22s ease,
  border-color 0.22s ease,
  transform 0.22s ease;
}
.contrast-marketplace-page .cmp-form-submit:hover {
  background: #00FFE0;
  color: var(--sobre-cian);
  border-color: var(--negro);
  transform: translateY(-2px);
}
/* =========================
  RESPONSIVE
========================= */
@media (max-width: 1024px) {
  .contrast-marketplace-page .cmp-products {
  grid-template-columns: 1fr;
  }
  .contrast-marketplace-page .cmp-card {
  min-height: auto;
  }
  .contrast-marketplace-page .cmp-docs {
  grid-template-columns: 1fr;
  }
}
@media (max-width: 768px) {
  .contrast-marketplace-page .cmp-hero {
  min-height: auto;
  padding: 48px 22px 72px;
  }
  .contrast-marketplace-page .cmp-title {
  max-width: 100%;
  font-size: clamp(44px, 17vw, 78px);
  line-height: 0.9;
  letter-spacing: -0.025em;
  }
  .contrast-marketplace-page .cmp-intro {
  font-size: 17px;
  }
  .contrast-marketplace-page .cmp-hero-actions {
  flex-direction: column;
  align-items: stretch;
  }
  .contrast-marketplace-page .cmp-btn {
  width: 100%;
  }
  .contrast-marketplace-page .cmp-status {
  width: calc(100% - 32px);
  margin-top: 86px;
  grid-template-columns: 1fr;
  }
  .contrast-marketplace-page .cmp-status::before {
  top: -46px;
  }
  .contrast-marketplace-page .cmp-status-item {
  min-height: 88px;
  border-right: 0;
  border-bottom: 2px solid var(--negro);
  }
  .contrast-marketplace-page .cmp-status-item:last-child {
  border-bottom: 0;
  }
  .contrast-marketplace-page .cmp-filter-row,
  .contrast-marketplace-page .cmp-products,
  .contrast-marketplace-page .cmp-empty-state,
  .contrast-marketplace-page .cmp-docs {
  width: calc(100% - 32px);
  }
  .contrast-marketplace-page .cmp-filter-row {
  margin-top: 54px;
  }
  .contrast-marketplace-page .cmp-filter {
  width: 100%;
  justify-content: center;
  }
  .contrast-marketplace-page .cmp-card-media {
  height: 250px;
  }
  .contrast-marketplace-page .cmp-card-media-image {
  padding: 42px;
  }
  .contrast-marketplace-page .cmp-card-media-image img {
  width: min(82%, 320px);
  max-height: 160px;
  }
  .contrast-marketplace-page .cmp-card-content {
  padding: 24px;
  }
  .contrast-marketplace-page .cmp-card-title {
  font-size: clamp(42px, 14vw, 68px);
  }
  .contrast-marketplace-page .cmp-card-actions {
  flex-direction: column;
  gap: 16px;
  }
  .contrast-marketplace-page .cmp-docs {
  margin-top: 84px;
  padding-top: 62px;
  }
  .contrast-marketplace-page .cmp-doc-row {
  min-height: 76px;
  }
  .contrast-marketplace-page .cmp-section-title {
  font-size: clamp(46px, 15vw, 82px);
  }
  .contrast-marketplace-page .cmp-form-submit {
  width: 100%;
  }
}
@media (max-width: 480px) {
  .contrast-marketplace-page .cmp-hero {
  padding-top: 40px;
  padding-bottom: 64px;
  }
  .contrast-marketplace-page .cmp-filter-row {
  gap: 8px;
  }
  .contrast-marketplace-page .cmp-filter {
  min-height: 46px;
  padding: 0 14px;
  font-size: 10px;
  }
  .contrast-marketplace-page .cmp-card-media {
  height: 220px;
  }
  .contrast-marketplace-page .cmp-status-number {
  font-size: 42px;
  }
  .contrast-marketplace-page .cmp-title {
  font-size: clamp(40px, 16vw, 64px);
  line-height: 0.92;
  letter-spacing: -0.02em;
  }
}
/* =====================================================================
  STORE ADDITIONS (on top of the original marketplace CSS)
  3-column grid · price · add-to-cart · cart drawer + FAB · product subpage
  Marca: negro/blanco, cian #00FFE0 line/hover, morado #8000FF accent, 2px square.
  ===================================================================== */
/* --- 3 columns (original era 2) --- */
.contrast-marketplace-page .cmp-products{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:1024px){.contrast-marketplace-page .cmp-products{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:680px){.contrast-marketplace-page .cmp-products{grid-template-columns:1fr}}
/* ajustar la tarjeta a 3 columnas (la original era enorme para 2) */
.contrast-marketplace-page .cmp-card{min-height:auto}
.contrast-marketplace-page .cmp-card-media{height:210px}
.contrast-marketplace-page .cmp-card-media-image img{width:min(70%,240px);max-height:150px}
.contrast-marketplace-page .cmp-card-content{padding:clamp(22px,2vw,28px)}
.contrast-marketplace-page .cmp-card-meta{margin-bottom:16px}
.contrast-marketplace-page .cmp-card-title{font-size:clamp(26px,2.1vw,36px);letter-spacing:-.03em}
.contrast-marketplace-page .cmp-card-text{font-size:15px;margin-top:14px}
.contrast-marketplace-page .cmp-tags{margin-top:18px}
.contrast-marketplace-page .cmp-card-actions{padding-top:24px;gap:14px;align-items:center}
/* --- precio en la tarjeta --- */
.contrast-marketplace-page .cmp-card-price{display:block;margin:14px 0 0;font-family:"Sofia Sans","Sofia Pro",Arial,sans-serif;font-size:22px;font-weight:900;letter-spacing:-.01em;color:var(--negro)}
.contrast-marketplace-page .cmp-card-price .cmp-price-note{margin-left:8px;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:rgba(var(--tinta-rgb), .5)}
/* --- add-to-cart: usa el botón General original (.cmp-btn); estado añadido = cian --- */
.contrast-marketplace-page .ct-add.is-added{background:#00FFE0;color: var(--sobre-cian);border-color:var(--negro)}
/* --- badges extra --- */
.contrast-marketplace-page .cmp-badge-dev{background:#8000FF;border:2px solid var(--negro);color: var(--sobre-morado)}
.contrast-marketplace-page .cmp-badge-bundle{background:#00FFE0;border:2px solid var(--negro);color: var(--sobre-cian)}
/* =====================================================================
  CART — FAB + drawer
  ===================================================================== */
.ct-cart-fab{position:fixed;right:22px;bottom:22px;z-index:99990;display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 20px;border:2px solid var(--negro);background:var(--negro);color:var(--blanco);font-family:"Sofia Sans","Sofia Pro",Arial,sans-serif;font-size:12px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;box-shadow:0 8px 26px rgba(var(--tinta-rgb), .28)}
.ct-cart-fab:hover{background:#8000FF;border-color:#8000FF}
.ct-cart-fab svg{width:20px;height:20px}
.ct-cart-count{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 5px;background:#00FFE0;color: var(--sobre-cian);font-size:11px;font-weight:900}
.ct-cart-count[hidden]{display:none}
@media(max-width:600px){.ct-cart-fab{right:14px;bottom:14px}.ct-cart-fab .ct-lbl{display:none}}
.ct-overlay{position:fixed;inset:0;background:rgba(var(--tinta-rgb), .55);opacity:0;visibility:hidden;transition:opacity .25s ease;z-index:99998}
.ct-overlay.is-open{opacity:1;visibility:visible}
.ct-drawer{position:fixed;top:0;right:0;height:100%;width:min(420px,94vw);background:var(--blanco);color:var(--negro);border-left:2px solid var(--negro);transform:translateX(100%);transition:transform .28s cubic-bezier(.4,0,.2,1);z-index:99999;display:flex;flex-direction:column;font-family:"Sofia Sans","Sofia Pro",Arial,sans-serif}
.ct-drawer.is-open{transform:translateX(0)}
.ct-drawer-head{display:flex;align-items:center;justify-content:space-between;padding:22px;border-bottom:2px solid var(--negro)}
.ct-drawer-title{margin:0;font-family:"Sofia Sans Extra Condensed","Arial Narrow",Arial,sans-serif;font-weight:800;text-transform:uppercase;font-size:30px;letter-spacing:-.02em}
.ct-close{background:none;border:0;font-size:28px;line-height:1;cursor:pointer}
.ct-items{flex:1;overflow-y:auto;padding:6px 22px}
.ct-empty{padding:34px 0;text-align:center;color:rgba(var(--tinta-rgb), .5);font-size:14px}
.ct-item{display:grid;grid-template-columns:1fr auto;gap:4px 12px;padding:16px 0;border-bottom:2px solid var(--negro)}
.ct-item-name{font-weight:900;font-size:14px;text-transform:uppercase;letter-spacing:.02em}
.ct-item-plat{grid-column:1;color:rgba(var(--tinta-rgb), .5);font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.08em}
.ct-item-price{font-weight:900;font-size:15px;text-align:right}
.ct-item-remove{grid-column:2;justify-self:end;background:none;border:0;cursor:pointer;color:rgba(var(--tinta-rgb), .5);font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.06em;text-decoration:underline}
.ct-item-remove:hover{color:#8000FF}
.ct-foot{border-top:2px solid var(--negro);padding:20px 22px 24px}
.ct-total{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:16px}
.ct-total-label{font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.08em;color:rgba(var(--tinta-rgb), .55)}
.ct-total-val{font-family:"Sofia Sans Extra Condensed","Arial Narrow",Arial,sans-serif;font-weight:800;font-size:30px;letter-spacing:-.02em}
.ct-field{margin-bottom:12px}
.ct-field label{display:block;margin-bottom:8px;font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.08em}
.ct-field input{width:100%;min-height:52px;padding:14px;border:2px solid var(--negro);border-radius:0;background:transparent;font:inherit;font-size:16px;outline:none}
.ct-field input:focus{background:#00FFE0}
.ct-consent{display:flex;gap:10px;align-items:flex-start;margin:6px 0 14px;font-size:12px;color:rgba(var(--tinta-rgb), .6)}
.ct-consent a{color:#8000FF;text-decoration:underline}
.ct-checkout{width:100%;min-height:52px;border:2px solid var(--negro);border-radius:0;background:#8000FF;color: var(--sobre-morado);font-family:"Sofia Sans","Sofia Pro",Arial,sans-serif;font-size:12px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:background .2s,color .2s}
.ct-checkout:hover{background:#00FFE0;color: var(--sobre-cian)}
.ct-checkout[disabled]{opacity:.4;cursor:not-allowed}
.ct-note{margin:10px 0 0;text-align:center;font-size:12px;color:rgba(var(--tinta-rgb), .55);min-height:1em}
.ct-note.is-error{color:#c0392b}
.ct-secure{margin:8px 0 0;text-align:center;font-size:10px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:rgba(var(--tinta-rgb), .45)}
/* =====================================================================
  PRODUCT SUBPAGE (.contrast-product-page) — misma tipografía/escala
  ===================================================================== */
.contrast-product-page{width:100%;max-width:1180px;margin:0 auto;padding:clamp(24px,4vw,52px) clamp(22px,5vw,44px) clamp(70px,8vw,120px);background:var(--blanco);color:var(--negro);font-family:"Sofia Sans","Sofia Pro",Arial,sans-serif}
.contrast-product-page,.contrast-product-page *{box-sizing:border-box}
.contrast-product-page img{max-width:100%;display:block}
.contrast-product-page .ps-crumb{font-size:12px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:rgba(var(--tinta-rgb), .5);margin-bottom:32px}
.contrast-product-page .ps-crumb a{color:rgba(var(--tinta-rgb), .5);text-decoration:none}
.contrast-product-page .ps-crumb a:hover{color:#8000FF}
.contrast-product-page .ps-top{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,56px);align-items:start}
@media(max-width:860px){.contrast-product-page .ps-top{grid-template-columns:1fr}}
.contrast-product-page .ps-media{position:relative;border:2px solid var(--negro);aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;overflow:hidden}
.contrast-product-page .ps-media img{width:100%;height:100%;object-fit:cover}
.contrast-product-page .ps-empty{position:absolute;inset:0}
.contrast-product-page .ps-empty::before,.contrast-product-page .ps-empty::after{content:"";position:absolute;left:50%;top:50%;background:var(--negro);transform:translate(-50%,-50%)}
.contrast-product-page .ps-empty::before{width:72px;height:2px}
.contrast-product-page .ps-empty::after{width:2px;height:72px}
.contrast-product-page .ps-badge{position:absolute;left:18px;top:18px;min-height:34px;display:inline-flex;align-items:center;padding:0 13px;border:2px solid var(--negro);background:#00FFE0;color: var(--sobre-cian);font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.contrast-product-page .ps-badge.dev{background:#8000FF;color: var(--sobre-morado)}
.contrast-product-page .ps-eyebrow{display:inline-flex;align-items:center;gap:12px;margin-bottom:18px;font-size:12px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;color:var(--negro)}
.contrast-product-page .ps-eyebrow::before{content:"";width:42px;height:2px;background:#00FFE0;display:block}
.contrast-product-page .ps-title{margin:0 0 16px;font-family:"Sofia Sans Extra Condensed","Arial Narrow",Arial,sans-serif;font-size:clamp(48px,6vw,96px);font-weight:800;line-height:.88;letter-spacing:-.03em;text-transform:uppercase}
.contrast-product-page .ps-title .dot{color:#8000FF}
.contrast-product-page .ps-lead{max-width:48ch;margin:0 0 22px;color:rgba(var(--tinta-rgb), .68);font-size:clamp(16px,1.2vw,19px);font-weight:500;line-height:1.5;letter-spacing:-.01em}
.contrast-product-page .ps-price{font-family:"Sofia Sans Extra Condensed","Arial Narrow",Arial,sans-serif;font-size:clamp(36px,4vw,54px);font-weight:800;line-height:1;letter-spacing:-.02em}
.contrast-product-page .ps-price small{margin-left:10px;font-family:"Sofia Sans","Sofia Pro",Arial,sans-serif;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:rgba(var(--tinta-rgb), .5)}
.contrast-product-page .ps-buy{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin:22px 0 0}
.contrast-product-page .ps-soon{display:inline-flex;align-items:center;min-height:52px;padding:0 24px;border:2px solid var(--negro);background:transparent;color:rgba(var(--tinta-rgb), .4);font-size:12px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}
.contrast-product-page .ps-platforms{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px}
.contrast-product-page .ps-plat{display:inline-flex;align-items:center;min-height:46px;padding:0 18px;border:2px solid var(--negro);background:transparent;color:var(--negro);font-size:11px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;transition:background .2s}
.contrast-product-page .ps-plat:hover{background:#00FFE0}
.contrast-product-page .ps-note{margin:12px 0 0;font-size:12px;color:rgba(var(--tinta-rgb), .55)}
.contrast-product-page .ps-meta{margin-top:26px;border-top:2px solid var(--negro)}
.contrast-product-page .ps-meta div{display:flex;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:2px solid rgba(var(--tinta-rgb), .12)}
.contrast-product-page .ps-meta b{font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:rgba(var(--tinta-rgb), .5)}
.contrast-product-page .ps-meta span{font-size:14px;font-weight:700}
.contrast-product-page .ps-section{margin-top:clamp(48px,6vw,84px)}
.contrast-product-page .ps-h2{margin:0 0 28px;font-family:"Sofia Sans Extra Condensed","Arial Narrow",Arial,sans-serif;font-size:clamp(32px,4vw,56px);font-weight:800;line-height:.9;letter-spacing:-.03em;text-transform:uppercase}
.contrast-product-page .ps-feats{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,40px)}
@media(max-width:640px){.contrast-product-page .ps-feats{grid-template-columns:1fr}}
.contrast-product-page .ps-feat{border-top:2px solid var(--negro);padding-top:14px}
.contrast-product-page .ps-feat h3{margin:0 0 6px;font-size:18px;font-weight:900;text-transform:uppercase;letter-spacing:-.01em}
.contrast-product-page .ps-feat p{margin:0;font-size:15px;color:rgba(var(--tinta-rgb), .62);line-height:1.5}
.contrast-product-page .ps-list{list-style:none;margin:0;padding:0}
.contrast-product-page .ps-list li{padding:14px 0;border-bottom:2px solid rgba(var(--tinta-rgb), .12);font-size:15px;font-weight:600}
.contrast-product-page .ps-docs{display:inline-flex;align-items:center;gap:8px;margin-top:20px;font-size:12px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--negro);text-decoration:none;border-bottom:2px solid #00FFE0;padding-bottom:3px}
.contrast-product-page .ps-docs:hover{border-color:#8000FF}
/* --- add-to-cart button: standalone style so it works on BOTH the store and the product page --- */
.ct-add{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 24px;border:2px solid var(--negro);border-radius:0;background:transparent;color:var(--negro);font-family:"Sofia Sans","Sofia Pro",Arial,sans-serif;font-size:12px;font-weight:900;line-height:1;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:background .22s ease,color .22s ease,transform .22s ease}
.ct-add:hover{background:#00FFE0;color: var(--sobre-cian);transform:translateY(-2px)}
.ct-add.is-added{background:#00FFE0;color: var(--sobre-cian)}
/* --- Imágenes 16:9 (fotos) que LLENAN el recuadro de la tarjeta (cover) --- */
.contrast-marketplace-page .cmp-card-media.cmp-cover{padding:0;display:block}
.contrast-marketplace-page .cmp-card-media.cmp-cover img{width:100%;height:100%;max-width:100%;max-height:none;object-fit:cover;display:block}
/* --- Tarjetas con documentación: toda la tarjeta es clicable (JS añade .cmp-card-clickable) --- */
.contrast-marketplace-page .cmp-card-clickable{cursor:pointer}

/* ============================================================
   CONTACTO  (/contact/ y /es/contacto/)
   Portado el 26-08-2026 de contact.inline.css. En el original
   son dos bloques separados: el del formulario nativo y el del
   heroe halftone con su caja de texto. Aqui van seguidos.
   El heroe es el UNICO del sitio sobre negro; el fondo y el
   color de punto se los pasa site.js al motor, no van aqui.
   ============================================================ */
/* =========================
  CONTRAST NATIVE CONTACT FORM
========================= */
.contrast-native-form-wrap {
  width: 100%;
  max-width: 820px;
  margin-left: auto;
  color: var(--negro);
  font-family: inherit !important;
  font-size: 16px;
  line-height: 1.4;
}
.contrast-native-form,
.contrast-native-form * {
  font-family: inherit !important;
}
.contrast-native-form {
  width: 100%;
  margin: 0;
  padding: 0;
}
/* =========================
  STATUS MESSAGES
========================= */
.contrast-form-message {
  display: none;
  margin-bottom: 34px;
  padding: 18px 22px;
  border: 1px solid rgba(var(--tinta-rgb), 0.18);
  color: var(--negro);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: -0.01em;
}
.contrast-form-success {
  background: rgba(0, 255, 224, 0.12);
}
.contrast-form-error {
  background: rgba(128, 0, 255, 0.08);
}
.contrast-form-was-sent .contrast-form-success {
  display: block;
}
.contrast-form-has-error .contrast-form-error {
  display: block;
}
/* =========================
  FORM LAYOUT
========================= */
.contrast-form-row {
  width: 100%;
  margin-bottom: 38px;
}
.contrast-form-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(36px, 5vw, 72px);
}
.contrast-field {
  position: relative;
  width: 100%;
}
.contrast-field label {
  display: block;
  margin-bottom: 14px;
  color: var(--negro);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
}
/* =========================
  INPUTS
========================= */
.contrast-field input,
.contrast-field select,
.contrast-field textarea {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 2px solid rgba(var(--tinta-rgb), 0.48);
  border-radius: 0;
  box-shadow: none !important;
  outline: none !important;
  text-shadow: none !important;
  filter: none !important;
  padding: 0 0 13px 0;
  color: var(--negro);
  font-family: inherit !important;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: -0.02em;
  transition:
  border-color 0.25s ease,
  color 0.25s ease;
}
.contrast-field input::placeholder,
.contrast-field textarea::placeholder {
  color: rgba(var(--tinta-rgb), 0.36);
  opacity: 1;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.02em;
}
.contrast-field input:focus,
.contrast-field select:focus,
.contrast-field textarea:focus {
  border-color: #8000FF;
}
/* =========================
  SELECT
========================= */
.contrast-select-field {
  position: relative;
}
.contrast-field select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  padding-right: 48px;
  font-size: 18px;
  color: rgba(var(--tinta-rgb), 0.62);
  background-image:
  linear-gradient(45deg, transparent 50%, var(--negro) 50%),
  linear-gradient(135deg, var(--negro) 50%, transparent 50%);
  background-position:
  calc(100% - 18px) 42%,
  calc(100% - 8px) 42%;
  background-size:
  10px 10px,
  10px 10px;
  background-repeat: no-repeat;
}
.contrast-field select:invalid {
  color: rgba(var(--tinta-rgb), 0.62);
}
.contrast-field select:valid {
  color: var(--negro);
}
/* =========================
  TEXTAREA
========================= */
.contrast-textarea-field textarea {
  min-height: 160px;
  border: 2px solid rgba(var(--tinta-rgb), 0.24);
  padding: 24px 28px;
  resize: vertical;
  font-size: 17px;
  line-height: 1.45;
  font-weight: 400;
  letter-spacing: -0.02em;
}
.contrast-textarea-field textarea::placeholder {
  color: rgba(var(--tinta-rgb), 0.36);
  font-size: 17px;
  line-height: 1.45;
  font-weight: 400;
  letter-spacing: -0.02em;
}
.contrast-textarea-field textarea:focus {
  border-color: #8000FF;
}
/* =========================
  LEGAL CHECKBOX
========================= */
.contrast-legal-row {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  margin: 0 0 40px 0;
}
.contrast-legal-row input[type="checkbox"] {
  position: relative !important;
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  margin: 0 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  background: transparent !important;
  background-color: transparent !important;
  border: 2px solid var(--negro) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  cursor: pointer;
  transition:
  background-color 0.2s ease,
  border-color 0.2s ease;
}
.contrast-legal-row input[type="checkbox"]::before,
.contrast-legal-row input[type="checkbox"]::after {
  content: none !important;
  display: none !important;
}
.contrast-legal-row input[type="checkbox"]:checked {
  background: #8000FF !important;
  background-color: #8000FF !important;
  border-color: var(--negro) !important;
  box-shadow: none !important;
  outline: none !important;
}
/* La casilla obligatoria de consentimiento tenia el foco anulado con
   !important y appearance:none, o sea que con teclado no se veia donde
   estabas (WCAG 2.4.7). El anillo solo sale con teclado (:focus-visible),
   asi que con raton no cambia nada. */
.contrast-legal-row input[type="checkbox"]:focus-visible,
.contrast-contact-form-shell .contrast-legal-row input[type="checkbox"]:focus-visible {
  /* El segundo selector es para ganar a la regla de .contrast-contact-form-shell
     de mas abajo, que vuelve a poner outline: none !important con la misma
     especificidad que el primero. */
  outline: 2px solid var(--negro) !important;
  outline-offset: 3px;
}
.contrast-legal-row input[type="checkbox"]:active {
  box-shadow: none !important;
}
.contrast-legal-row label {
  margin: 0;
  color: var(--negro);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: -0.02em;
}
.contrast-legal-row a {
  color: #8000FF !important;
  font-size: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  box-shadow: none !important;
  text-shadow: none !important;
}
.contrast-legal-row a:hover {
  color: var(--negro) !important;
}
/* =========================
  SUBMIT BUTTON
========================= */
.contrast-submit-btn {
  position: relative;
  width: 100%;
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #8000FF !important;
  background-color: #8000FF !important;
  border: 2px solid #8000FF !important;
  border-radius: 0 !important;
  color: var(--sobre-morado) !important;
  font-family: inherit !important;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
  transform: none !important;
  transition:
  background-color 0.25s ease,
  color 0.25s ease,
  border-color 0.25s ease !important;
}
.contrast-submit-btn span:first-child {
  pointer-events: none;
}
.contrast-submit-btn span,
.contrast-submit-btn .contrast-submit-arrow {
  color: inherit !important;
  text-shadow: none !important;
  filter: none !important;
}
.contrast-submit-arrow {
  position: absolute;
  right: 34px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 34px;
  font-weight: 300;
  line-height: 1;
  transition: transform 0.25s ease;
}
.contrast-submit-btn:hover {
  background: transparent !important;
  background-color: transparent !important;
  border-color: var(--negro) !important;
  color: var(--negro) !important;
  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
  transform: none !important;
}
.contrast-submit-btn:hover .contrast-submit-arrow {
  color: var(--negro) !important;
  transform: translateY(-50%) !important;
}
.contrast-submit-btn:focus,
.contrast-submit-btn:active {
  background: #8000FF !important;
  background-color: #8000FF !important;
  border-color: #8000FF !important;
  color: var(--sobre-morado) !important;
  box-shadow: none !important;
}
/* Con teclado el boton era identico en reposo y enfocado (el hover si
   cambia). Anillo negro separado del morado, solo con teclado. */
.contrast-submit-btn:focus-visible,
.contrast-contact-form-shell .contrast-submit-btn:focus-visible {
  outline: 2px solid var(--negro) !important;
  outline-offset: 3px;
}
/* =========================
  LEFT COPY
========================= */
.contrast-contact-copy,
.contrast-contact-copy * {
  font-family: inherit !important;
}
.contrast-contact-copy {
  max-width: 360px;
}
.contrast-contact-copy span {
  display: inline-block;
  margin-bottom: 24px;
  color: #8000FF;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.contrast-contact-copy h2 {
  margin: 0 0 32px 0;
  color: var(--negro);
  font-size: clamp(36px, 3.4vw, 56px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.045em;
}
.contrast-contact-copy p {
  margin: 0;
  color: rgba(var(--tinta-rgb), 0.62);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: -0.015em;
}
/* =========================
  HONEYPOT
========================= */
.contrast-hp-field {
  position: absolute !important;
  left: -9999px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
/* =========================
  MOBILE
========================= */
@media (max-width: 1024px) {
  .contrast-native-form-wrap {
  max-width: 100%;
  margin-left: 0;
  }
  .contrast-contact-copy {
  max-width: 100%;
  margin-bottom: 48px;
  }
}

/* ---- bloque ---- */
  .contrast-contact-halftone-hero {
  position: relative;
  width: 100%;
  min-height: calc(100vh - 90px);
  overflow: hidden;
  background: var(--negro);
  isolation: isolate;
  }
  .contrast-contact-halftone-hero * {
  box-sizing: border-box;
  }
  .contrast-contact-halftone-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  background: var(--negro);
  z-index: 1;
  }
  .contrast-contact-halftone-hint {
  position: absolute;
  top: 22px;
  right: 22px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  background: var(--negro);
  border: 2px solid var(--blanco);
  border-radius: 0;
  color: var(--blanco);
  cursor: pointer;
  appearance: none;
  transition:
  background 0.22s ease,
  color 0.22s ease,
  border-color 0.22s ease,
  transform 0.22s ease;
  }
  .contrast-contact-halftone-hint:hover {
  background: #00ffe0;
  color: var(--sobre-cian);
  border-color: #00ffe0;
  transform: translateY(-2px);
  }
  .contrast-contact-halftone-hint:active {
  transform: translateY(0);
  }
  .contrast-contact-halftone-hint-text {
  font-family: "Sofia Sans", Arial, sans-serif;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  }
  .contrast-contact-halftone-scroll {
  position: absolute;
  left: max(22px, calc((100% - min(1180px, calc(100% - 44px))) / 2));
  bottom: clamp(22px, 4.4vh, 46px);
  z-index: 4;
  display: inline-flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 12px;
  color: var(--blanco);
  text-decoration: none;
  pointer-events: auto;
  transition: color 0.25s ease;
  }
  .contrast-contact-halftone-scroll-text {
  order: 2;
  padding-top: 0;
  font-family: "Sofia Sans", Arial, sans-serif;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--blanco);
  transition: color 0.25s ease;
  }
  .contrast-contact-halftone-scroll-line {
  order: 1;
  position: relative;
  display: block;
  width: 2px;
  height: 72px;
  overflow: hidden;
  background: rgba(var(--papel-rgb), 0.24);
  transition: background 0.25s ease;
  }
  .contrast-contact-halftone-scroll-line span {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  height: 24px;
  background: var(--blanco);
  animation: contrastContactScrollLine 1.65s ease-in-out infinite;
  transition: background 0.25s ease;
  }
  .contrast-contact-halftone-scroll:hover .contrast-contact-halftone-scroll-text {
  color: #8000FF;
  }
  .contrast-contact-halftone-scroll:hover .contrast-contact-halftone-scroll-line {
  background: rgba(128, 0, 255, 0.32);
  }
  .contrast-contact-halftone-scroll:hover .contrast-contact-halftone-scroll-line span {
  background: #8000FF;
  }
  @keyframes contrastContactScrollLine {
  0% {
  transform: translateY(-100%);
  opacity: 0;
  }
  28% {
  opacity: 1;
  }
  100% {
  transform: translateY(300%);
  opacity: 0;
  }
  }
  .contrast-contact-halftone-content {
  position: relative;
  z-index: 3;
  width: min(1180px, calc(100% - 44px));
  margin-left: auto;
  margin-right: auto;
  padding: clamp(76px, 8vw, 120px) 0 clamp(78px, 9vw, 120px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  pointer-events: none;
  }
  .contrast-contact-halftone-box {
  position: relative;
  width: min(940px, 100%);
  min-height: 500px;
  padding: clamp(28px, 3.4vw, 52px);
  background: var(--negro);
  border: 2px solid var(--blanco);
  color: var(--blanco);
  pointer-events: auto;
  }
  .contrast-contact-halftone-kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  }
  .contrast-contact-halftone-kicker span {
  display: block;
  width: 42px;
  height: 2px;
  background: #00ffe0;
  }
  .contrast-contact-halftone-kicker p {
  margin: 0;
  color: var(--blanco);
  font-family: "Sofia Sans", Arial, sans-serif;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  }
  .contrast-contact-halftone-title {
  margin: 0;
  max-width: 980px;
  color: var(--blanco);
  font-family: "Sofia Sans Extra Condensed", "Arial Narrow", Arial, sans-serif;
  font-size: clamp(72px, 8.4vw, 116px);
  font-weight: 800;
  line-height: 0.88;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  }
  .contrast-contact-halftone-dot {
  display: inline-block;
  margin-left: 0.14em;
  color: var(--blanco);
  }
  .contrast-contact-halftone-copy {
  margin-top: clamp(32px, 3.4vw, 44px);
  max-width: 760px;
  }
  .contrast-contact-halftone-copy p {
  margin: 0 0 14px 0;
  color: var(--blanco);
  font-family: "Sofia Sans", Arial, sans-serif;
  font-size: clamp(18px, 1.55vw, 25px);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.02em;
  }
  .contrast-contact-halftone-copy p:last-child {
  margin-bottom: 0;
  }
  .contrast-contact-halftone-actions {
  margin-top: clamp(32px, 3.6vw, 44px);
  }
  .contrast-contact-halftone-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 24px;
  border: 2px solid var(--blanco);
  background: #8000FF;
  color: var(--sobre-morado);
  text-decoration: none;
  font-family: "Sofia Sans", Arial, sans-serif;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition:
  background 0.25s ease,
  color 0.25s ease,
  border-color 0.25s ease,
  transform 0.25s ease;
  }
  .contrast-contact-halftone-btn:hover {
  background: #00ffe0;
  color: var(--sobre-cian);
  border-color: #00ffe0;
  transform: translateY(-2px);
  }
  @media (max-width: 1024px) {
  .contrast-contact-halftone-title {
  max-width: 920px;
  font-size: clamp(64px, 9.5vw, 104px);
  }
  .contrast-contact-halftone-box {
  min-height: 470px;
  }
  }
  @media (max-width: 768px) {
  .contrast-contact-halftone-hero {
  min-height: calc(100vh - 72px);
  }
  .contrast-contact-halftone-hint {
  display: none;
  }
  .contrast-contact-halftone-scroll {
  left: 16px;
  bottom: 42px;
  gap: 10px;
  }
  .contrast-contact-halftone-scroll-line {
  height: 54px;
  }
  .contrast-contact-halftone-scroll-text {
  font-size: 10px;
  letter-spacing: 0.12em;
  }
  .contrast-contact-halftone-content {
  width: calc(100% - 32px);
  padding: 72px 0 112px;
  }
  .contrast-contact-halftone-box {
  width: 100%;
  min-height: auto;
  padding: 24px;
  }
  .contrast-contact-halftone-kicker {
  margin-bottom: 18px;
  }
  .contrast-contact-halftone-title {
  max-width: 100%;
  font-size: clamp(54px, 15vw, 82px);
  line-height: 0.9;
  }
  .contrast-contact-halftone-copy {
  margin-top: 26px;
  max-width: 100%;
  }
  .contrast-contact-halftone-copy p {
  font-size: 17px;
  line-height: 1.42;
  margin-bottom: 10px;
  }
  .contrast-contact-halftone-actions {
  position: static;
  margin-top: 28px;
  width: 100%;
  }
  .contrast-contact-halftone-btn {
  width: 100%;
  }
  }
  @media (max-width: 420px) {
  .contrast-contact-halftone-scroll {
  bottom: 34px;
  }
  .contrast-contact-halftone-scroll-line {
  height: 48px;
  }
  }
/* ---- bloque ---- */
  .contrast-kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: "Sofia Sans", sans-serif;
  }
  .contrast-kicker span {
  display: block;
  width: 35px;
  height: 2px;
  background: #00FFE0;
  }
  .contrast-kicker p {
  margin: 0;
  color: var(--negro) !important;
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  }
/* ---- bloque ---- */
  .contrast-contact-form-shell,
  .contrast-contact-form-shell * {
  box-sizing: border-box;
  }
  .contrast-contact-form-shell {
  width: 100%;
  color: var(--negro);
  font-family: "Sofia Sans", Arial, Helvetica, sans-serif;
  }
  .contrast-contact-form-shell .contrast-native-form-wrap {
  width: 100%;
  max-width: 860px;
  margin-left: auto;
  margin-right: 0;
  }
  .contrast-contact-form-shell .contrast-native-form {
  width: 100%;
  margin: 0;
  padding: 0;
  }
  .contrast-contact-form-shell .contrast-hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  }
  .contrast-contact-form-shell .contrast-form-message {
  display: none;
  width: 100%;
  margin: 0 0 28px;
  padding: 18px 20px;
  border: 2px solid var(--negro);
  border-left-width: 8px;
  border-radius: 0;
  background: transparent;
  color: var(--negro);
  font-size: 13px;
  font-weight: 900;
  line-height: 1.35;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  }
  /* Success = cyan accent, error = purple accent (brand-distinct at a glance). */
  .contrast-contact-form-shell .contrast-form-success {
  border-left-color: #00FFE0;
  }
  .contrast-contact-form-shell .contrast-form-error {
  border-left-color: #8000FF;
  }
  html.contrast-form-was-sent .contrast-contact-form-shell .contrast-form-success {
  display: block;
  }
  html.contrast-form-has-error .contrast-contact-form-shell .contrast-form-error {
  display: block;
  }
  /* Required marker on labels. */
  .contrast-contact-form-shell .contrast-req {
  margin-left: 4px;
  color: #00FFE0;
  font-weight: 900;
  }
  .contrast-contact-form-shell .contrast-form-row {
  width: 100%;
  margin: 0 0 32px;
  }
  .contrast-contact-form-shell .contrast-form-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  }
  .contrast-contact-form-shell .contrast-field {
  width: 100%;
  position: relative;
  }
  .contrast-contact-form-shell .contrast-field label {
  display: block;
  margin: 0 0 12px;
  color: var(--negro) !important;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  }
  .contrast-contact-form-shell .contrast-field input,
  .contrast-contact-form-shell .contrast-field select,
  .contrast-contact-form-shell .contrast-field textarea {
  width: 100% !important;
  min-height: 58px;
  margin: 0 !important;
  padding: 0 18px !important;
  border: 2px solid var(--negro) !important;
  border-radius: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  color: var(--negro) !important;
  font-family: "Sofia Sans", Arial, Helvetica, sans-serif !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  appearance: none;
  -webkit-appearance: none;
  transition:
  background 0.22s ease,
  color 0.22s ease,
  border-color 0.22s ease;
  }
  .contrast-contact-form-shell .contrast-field input::placeholder,
  .contrast-contact-form-shell .contrast-field textarea::placeholder {
  color: rgba(var(--tinta-rgb), 0.62) !important;
  opacity: 1 !important;
  }
  /* Subtle hover feedback before focus (faint cyan wash). */
  .contrast-contact-form-shell .contrast-field input:hover:not(:focus),
  .contrast-contact-form-shell .contrast-field select:hover:not(:focus),
  .contrast-contact-form-shell .contrast-field textarea:hover:not(:focus) {
  background-color: rgba(0, 255, 224, 0.07) !important;
  }
  /* === SELECT — aligned with the brand system === */
  .contrast-contact-form-shell .contrast-field select {
  cursor: pointer;
  padding-right: 54px !important;
  background-color: transparent !important;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'16'%20height%3D'16'%20viewBox%3D'0%200%2016%2016'%3E%3Cpath%20d%3D'M2%205l6%206%206-6'%20fill%3D'none'%20stroke%3D'%23000000'%20stroke-width%3D'2.4'%2F%3E%3C%2Fsvg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 18px center !important;
  background-size: 16px 16px !important;
  }
@media (prefers-color-scheme: dark) {
  .contrast-contact-form-shell .contrast-field select {
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'16'%20height%3D'16'%20viewBox%3D'0%200%2016%2016'%3E%3Cpath%20d%3D'M2%205l6%206%206-6'%20fill%3D'none'%20stroke%3D'%23ffffff'%20stroke-width%3D'2.4'%2F%3E%3C%2Fsvg%3E") !important;
  }
}
  .contrast-contact-form-shell .contrast-field select option {
  background: var(--blanco);
  color: var(--negro);
  }
  /* Dim the placeholder option until a real value is chosen (matches input placeholders). */
  .contrast-contact-form-shell .contrast-field select:required:invalid {
  color: rgba(var(--tinta-rgb), 0.62) !important;
  }
  .contrast-contact-form-shell .contrast-field input:focus,
  .contrast-contact-form-shell .contrast-field textarea:focus {
  background: #00FFE0 !important;
  color: var(--sobre-cian) !important;
  border-color: var(--negro) !important;
  }
  /* Select now shares the cyan focus state; keep background-color so the chevron stays. */
  .contrast-contact-form-shell .contrast-field select:focus {
  background-color: #00FFE0 !important;
  color: var(--sobre-cian) !important;
  border-color: var(--negro) !important;
  }
  .contrast-contact-form-shell .contrast-field textarea {
  min-height: 190px;
  padding: 18px !important;
  resize: vertical;
  }
  .contrast-contact-form-shell .contrast-legal-row {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  margin: 4px 0 34px;
  }
  .contrast-contact-form-shell .contrast-legal-row input[type="checkbox"] {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 2px solid var(--negro) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  position: relative;
  }
  .contrast-contact-form-shell .contrast-legal-row input[type="checkbox"]:checked {
  background: #00FFE0 !important;
  }
  .contrast-contact-form-shell .contrast-legal-row input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 3px;
  width: 6px;
  height: 12px;
  border: solid var(--negro);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  }
  .contrast-contact-form-shell .contrast-legal-row label {
  margin: 0 !important;
  color: rgba(var(--tinta-rgb), 0.68) !important;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.42;
  letter-spacing: -0.01em;
  }
  .contrast-contact-form-shell .contrast-legal-row label a {
  color: var(--negro) !important;
  font-weight: 900;
  text-decoration: none !important;
  border-bottom: 2px solid #00FFE0;
  transition:
  background 0.22s ease,
  color 0.22s ease;
  }
  .contrast-contact-form-shell .contrast-legal-row label a:hover {
  background: #00FFE0;
  color: var(--sobre-cian) !important;
  }
  .contrast-contact-form-shell .contrast-submit-btn {
  width: 100% !important;
  min-height: 64px;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  margin: 0 !important;
  padding: 0 24px !important;
  border: 2px solid var(--negro) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--negro) !important;
  font-family: "Sofia Sans", Arial, Helvetica, sans-serif !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  box-shadow: none !important;
  transition:
  background 0.22s ease,
  color 0.22s ease,
  border-color 0.22s ease,
  transform 0.22s ease;
  }
  .contrast-contact-form-shell .contrast-submit-btn span {
  color: var(--negro) !important;
  }
  .contrast-contact-form-shell .contrast-submit-btn:hover {
  background: #00FFE0 !important;
  color: var(--sobre-cian) !important;
  border-color: var(--negro) !important;
  transform: translateY(-2px);
  }
  .contrast-contact-form-shell .contrast-submit-btn:hover span {
  color: var(--negro) !important;
  }
  .contrast-contact-form-shell .contrast-submit-arrow {
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
  transition: transform 0.22s ease;
  }
  .contrast-contact-form-shell .contrast-submit-btn:hover .contrast-submit-arrow {
  transform: translateX(4px);
  }
  .contrast-contact-form-shell .contrast-submit-btn.is-sending,
  .contrast-contact-form-shell .contrast-submit-btn:disabled {
  opacity: 0.55;
  cursor: progress;
  transform: none;
  }
  @media (max-width: 768px) {
  .contrast-contact-form-shell .contrast-native-form-wrap {
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
  }
  .contrast-contact-form-shell .contrast-form-row-2 {
  grid-template-columns: 1fr;
  gap: 32px;
  }
  .contrast-contact-form-shell .contrast-form-row {
  margin-bottom: 32px;
  }
  .contrast-contact-form-shell .contrast-field textarea {
  min-height: 170px;
  }
  .contrast-contact-form-shell .contrast-submit-btn {
  min-height: 60px;
  font-size: 12px !important;
  letter-spacing: 0.11em !important;
  }
  }

/* La pagina de contacto perdio sus contenedores al quitar Elementor. Este es
   el reparto que hacian: contenedor del sitio, copia a la izquierda y
   formulario a la derecha, apilados en movil. */
.contacto-bloque {
  width: min(1180px, calc(100% - 44px));
  margin: 0 auto;
  padding: clamp(56px, 7vw, 110px) 0;
  scroll-margin-top: 100px;
}
.contacto-rejilla {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}
.contacto-copia { min-width: 0; }
.contacto-copia h2 {
  margin: clamp(16px, 2vw, 24px) 0 0;
  font-family: "Sofia Sans Extra Condensed", "Sofia Sans", Arial, sans-serif;
  font-size: clamp(34px, 4.2vw, 60px);
  font-weight: 900; line-height: .98; letter-spacing: -.02em;
  text-transform: uppercase;
}
.contacto-copia p {
  margin: 14px 0 0;
  max-width: 46ch;
  color: var(--gris-texto);
  font-size: clamp(16px, 1.15vw, 18px);
  font-weight: 500; line-height: 1.55; letter-spacing: -.01em;
}
@media (max-width: 900px) {
  .contacto-bloque { width: calc(100% - 32px); }
  .contacto-rejilla { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================
   GRIDSNAP PRO — documentacion
   Portado el 26-08-2026 de doc-grid-snap.inline.css.
   Sin la @import de Google Fonts: las fuentes se sirven del repo.
   ============================================================ */
.gsp-doc-page,
.gsp-doc-page * {
  box-sizing: border-box;
}
.gsp-doc-page {
  width: 100%;
  background: var(--blanco);
  color: var(--negro);
  overflow: hidden;
  font-family: "Sofia Sans", "Sofia Pro", Arial, sans-serif;
}
.gsp-doc-page a {
  color: inherit;
  text-decoration: none;
}
.gsp-doc-page img {
  max-width: 100%;
  height: auto;
  display: block;
}
.gsp-doc-page strong {
  color: var(--negro);
  font-weight: 900;
}
.gsp-doc-page code {
  display: inline-flex;
  padding: 2px 6px;
  border: 2px solid var(--negro);
  background: transparent;
  color: var(--negro);
  font-family: "Sofia Sans", Arial, sans-serif;
  font-size: 0.95em;
  font-weight: 800;
}
.gsp-wrap {
  width: min(1180px, calc(100% - 44px));
  margin-left: auto;
  margin-right: auto;
}
/* =========================
  REVEAL
========================= */
.gsp-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
  opacity 0.7s ease,
  transform 0.7s ease;
}
.gsp-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
/* =========================
  HERO
========================= */
.gsp-hero {
  position: relative;
  background: var(--blanco);
  padding: clamp(72px, 8vw, 120px) 0 clamp(72px, 8vw, 110px);
  border-bottom: 2px solid var(--negro);
}
.gsp-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(320px, 0.88fr);
  gap: clamp(36px, 6vw, 88px);
  align-items: center;
}
.gsp-kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 28px;
  color: var(--negro);
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.gsp-kicker::before {
  content: "";
  width: 42px;
  height: 2px;
  display: inline-block;
  background: #00FFE0;
}
.gsp-title {
  max-width: 860px;
  margin: 0;
  color: var(--negro);
  font-family: "Sofia Sans Extra Condensed", "Sofia Pro", "Arial Narrow", Arial, sans-serif;
  font-size: clamp(72px, 10.5vw, 146px);
  font-weight: 800;
  line-height: 0.86;
  letter-spacing: -0.038em;
  text-transform: uppercase;
}
.gsp-lead {
  max-width: 760px;
  margin: clamp(34px, 4vw, 52px) 0 0;
  color: rgba(var(--tinta-rgb), 0.68);
  font-size: clamp(18px, 1.45vw, 22px);
  font-weight: 500;
  line-height: 1.42;
  letter-spacing: -0.02em;
}
.gsp-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(34px, 4vw, 52px);
}
.gsp-btn {
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
  border: 2px solid var(--negro);
  border-radius: 0;
  background: transparent;
  color: var(--negro);
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition:
  background 0.22s ease,
  color 0.22s ease,
  border-color 0.22s ease,
  transform 0.22s ease;
}
.gsp-btn:hover {
  background: #00FFE0;
  color: var(--sobre-cian);
  border-color: var(--negro);
  transform: translateY(-2px);
}
.gsp-hero-card {
  min-height: clamp(300px, 34vw, 430px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(32px, 5vw, 64px);
  border: 2px solid var(--negro);
  background: transparent;
}
.gsp-hero-card img {
  width: min(78%, 430px);
  max-height: 250px;
  object-fit: contain;
}
/* =========================
  SECTIONS
========================= */
.gsp-section,
.gsp-final-section {
  position: relative;
  padding: clamp(74px, 9vw, 132px) 0;
  background: var(--blanco);
  border-bottom: 2px solid var(--negro);
  scroll-margin-top: 120px;
}
.gsp-section-head {
  display: grid;
  grid-template-columns: minmax(220px, 0.66fr) minmax(0, 1.34fr);
  gap: clamp(34px, 5vw, 78px);
  align-items: start;
  margin-bottom: clamp(38px, 5vw, 72px);
}
.gsp-section-title {
  max-width: 940px;
  margin: 0;
  color: var(--negro);
  font-family: "Sofia Sans Extra Condensed", "Sofia Pro", "Arial Narrow", Arial, sans-serif;
  font-size: clamp(58px, 8vw, 112px);
  font-weight: 800;
  line-height: 0.86;
  letter-spacing: -0.038em;
  text-transform: uppercase;
}
.gsp-section-copy {
  max-width: 760px;
  margin: 26px 0 0;
  color: rgba(var(--tinta-rgb), 0.68);
  font-size: clamp(18px, 1.35vw, 22px);
  font-weight: 500;
  line-height: 1.42;
  letter-spacing: -0.02em;
}
.gsp-doc-page p {
  color: rgba(var(--tinta-rgb), 0.68);
  font-size: clamp(16px, 1.1vw, 18px);
  font-weight: 500;
  line-height: 1.48;
  letter-spacing: -0.01em;
}
.gsp-doc-page h3 {
  margin: 0 0 18px;
  color: var(--negro);
  font-family: "Sofia Sans Extra Condensed", "Sofia Pro", "Arial Narrow", Arial, sans-serif;
  font-size: clamp(38px, 4vw, 62px);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}
.gsp-doc-page ul,
.gsp-doc-page ol {
  margin: 0;
  padding-left: 20px;
  color: rgba(var(--tinta-rgb), 0.68);
}
.gsp-doc-page li {
  margin: 8px 0;
  color: rgba(var(--tinta-rgb), 0.68);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.42;
}
/* =========================
  GRIDS / PANELS
========================= */
.gsp-info-grid,
.gsp-grid-2,
.gsp-process-grid {
  display: grid;
  border-top: 2px solid var(--negro);
  border-left: 2px solid var(--negro);
}
.gsp-info-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.gsp-grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.gsp-process-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.gsp-info-card,
.gsp-panel,
.gsp-process-grid article {
  min-height: 260px;
  padding: clamp(24px, 3vw, 34px);
  border-right: 2px solid var(--negro);
  border-bottom: 2px solid var(--negro);
  background: transparent;
  color: var(--negro);
  transition: background 0.22s ease;
}
.gsp-info-card:hover,
.gsp-process-grid article:hover {
  background: #00FFE0;
}
.gsp-card-index,
.gsp-process-grid span {
  display: block;
  margin-bottom: clamp(34px, 4vw, 52px);
  color: var(--negro);
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.gsp-process-grid span {
  font-family: "Sofia Sans Extra Condensed", "Sofia Pro", "Arial Narrow", Arial, sans-serif;
  font-size: clamp(46px, 5vw, 68px);
  font-weight: 800;
  letter-spacing: -0.035em;
}
.gsp-panel-large-number span {
  display: block;
  margin-bottom: 22px;
  font-family: "Sofia Sans Extra Condensed", "Sofia Pro", "Arial Narrow", Arial, sans-serif;
  font-size: clamp(74px, 9vw, 128px);
  font-weight: 800;
  line-height: 0.82;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}
/* =========================
  TOC
========================= */
.gsp-toc {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 2px solid var(--negro);
  border-left: 2px solid var(--negro);
}
.gsp-toc a {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 0 20px;
  border-right: 2px solid var(--negro);
  border-bottom: 2px solid var(--negro);
  background: transparent;
  color: var(--negro);
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition:
  background 0.22s ease,
  color 0.22s ease,
  padding 0.22s ease;
}
.gsp-toc a:hover {
  background: #00FFE0;
  color: var(--sobre-cian);
  padding-left: 28px;
}
.gsp-toc span {
  color: var(--negro);
  font-weight: 900;
}
/* =========================
  TABLES
========================= */
.gsp-table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 2px solid var(--negro);
  background: var(--blanco);
}
.gsp-table-wrap table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
}
.gsp-table-wrap th {
  padding: 16px;
  border-right: 2px solid var(--negro);
  border-bottom: 2px solid var(--negro);
  background: transparent;
  color: var(--negro);
  text-align: left;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.gsp-table-wrap th:last-child,
.gsp-table-wrap td:last-child {
  border-right: 0;
}
.gsp-table-wrap td {
  padding: 18px 16px;
  border-right: 2px solid var(--negro);
  border-bottom: 2px solid var(--negro);
  color: rgba(var(--tinta-rgb), 0.68);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.42;
  vertical-align: top;
}
.gsp-table-wrap tr:last-child td {
  border-bottom: 0;
}
.gsp-table-wrap tr:hover td {
  background: #00FFE0;
  color: var(--sobre-cian);
}
/* =========================
  NOTES
========================= */
.gsp-note,
.gsp-warning {
  margin-top: 28px;
  padding: 20px;
  border: 2px solid var(--negro);
  background: transparent;
  color: var(--negro);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.42;
}
.gsp-warning {
  background: #00FFE0;
}
/* =========================
  FINAL
========================= */
.gsp-final-box {
  padding: clamp(28px, 4vw, 48px);
  border: 2px solid var(--negro);
  background: transparent;
}
.gsp-final-box h2 {
  max-width: 850px;
  margin: 0;
  color: var(--negro);
  font-family: "Sofia Sans Extra Condensed", "Sofia Pro", "Arial Narrow", Arial, sans-serif;
  font-size: clamp(52px, 7vw, 104px);
  font-weight: 800;
  line-height: 0.88;
  letter-spacing: -0.038em;
  text-transform: uppercase;
}
.gsp-final-box p {
  max-width: 760px;
  margin: 28px 0 0;
}
/* =========================
  RESPONSIVE
========================= */
@media (max-width: 1024px) {
  .gsp-hero-grid,
  .gsp-section-head,
  .gsp-info-grid,
  .gsp-grid-2,
  .gsp-process-grid {
  grid-template-columns: 1fr;
  }
  .gsp-toc {
  grid-template-columns: 1fr;
  }
  .gsp-hero-card {
  min-height: 300px;
  }
}
@media (max-width: 768px) {
  .gsp-wrap {
  width: calc(100% - 32px);
  }
  .gsp-hero {
  padding-top: 58px;
  }
  .gsp-title {
  font-size: clamp(58px, 17vw, 88px);
  max-width: 100%;
  }
  .gsp-section-title {
  font-size: clamp(50px, 16vw, 76px);
  }
  .gsp-actions {
  width: 100%;
  flex-direction: column;
  }
  .gsp-btn {
  width: 100%;
  }
  .gsp-info-card,
  .gsp-panel,
  .gsp-process-grid article {
  min-height: 220px;
  }
  .gsp-hero-card {
  min-height: 250px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .gsp-doc-page *,
  .gsp-doc-page *::before,
  .gsp-doc-page *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
  }
  .gsp-reveal {
  opacity: 1;
  transform: none;
  }
}

/* ---------- reveal (content visible by default; animates only with JS) ---------- */
.gsp-js .rev{ opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease }
.gsp-js .rev.in{ opacity:1; transform:none }
@media(prefers-reduced-motion:reduce){ .gsp-js .rev{ opacity:1!important; transform:none!important; transition:none } }

/* ============================================================
   STUDIO SCENE PILOT — documentacion
   Portado el 26-08-2026 de doc-studio-scene.inline.css.
   Sin la @import de Google Fonts: las fuentes se sirven del repo.
   ============================================================ */
.ssp-doc-page,
.ssp-doc-page * {
  box-sizing: border-box;
}
.ssp-doc-page {
  width: 100%;
  background: var(--blanco);
  color: var(--negro);
  overflow: hidden;
  font-family: "Sofia Sans", "Sofia Pro", Arial, sans-serif;
}
.ssp-doc-page a {
  color: inherit;
  text-decoration: none;
}
.ssp-doc-page img {
  max-width: 100%;
  height: auto;
  display: block;
}
.ssp-doc-page strong {
  color: var(--negro);
  font-weight: 900;
}
.ssp-doc-page code {
  display: inline-flex;
  padding: 2px 6px;
  border: 2px solid var(--negro);
  background: transparent;
  color: var(--negro);
  font-family: "Sofia Sans", Arial, sans-serif;
  font-size: 0.95em;
  font-weight: 800;
}
.ssp-wrap {
  width: min(1180px, calc(100% - 44px));
  margin-left: auto;
  margin-right: auto;
}
/* =========================
  REVEAL
========================= */
.ssp-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
  opacity 0.7s ease,
  transform 0.7s ease;
}
.ssp-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
/* =========================
  HERO
========================= */
.ssp-hero {
  position: relative;
  background: var(--blanco);
  padding: clamp(72px, 8vw, 120px) 0 clamp(72px, 8vw, 110px);
  border-bottom: 2px solid var(--negro);
}
.ssp-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(320px, 0.88fr);
  gap: clamp(36px, 6vw, 88px);
  align-items: center;
}
.ssp-kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 28px;
  color: var(--negro);
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.ssp-kicker::before {
  content: "";
  width: 42px;
  height: 2px;
  display: inline-block;
  background: #00FFE0;
}
.ssp-title {
  max-width: 900px;
  margin: 0;
  color: var(--negro);
  font-family: "Sofia Sans Extra Condensed", "Sofia Pro", "Arial Narrow", Arial, sans-serif;
  font-size: clamp(72px, 10.5vw, 146px);
  font-weight: 800;
  line-height: 0.86;
  letter-spacing: -0.038em;
  text-transform: uppercase;
}
.ssp-lead {
  max-width: 760px;
  margin: clamp(34px, 4vw, 52px) 0 0;
  color: rgba(var(--tinta-rgb), 0.68);
  font-size: clamp(18px, 1.45vw, 22px);
  font-weight: 500;
  line-height: 1.42;
  letter-spacing: -0.02em;
}
.ssp-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(34px, 4vw, 52px);
}
.ssp-btn {
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
  border: 2px solid var(--negro);
  border-radius: 0;
  background: transparent;
  color: var(--negro);
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition:
  background 0.22s ease,
  color 0.22s ease,
  border-color 0.22s ease,
  transform 0.22s ease;
}
.ssp-btn:hover {
  background: #00FFE0;
  color: var(--sobre-cian);
  border-color: var(--negro);
  transform: translateY(-2px);
}
.ssp-hero-card {
  min-height: clamp(300px, 34vw, 430px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(32px, 5vw, 64px);
  border: 2px solid var(--negro);
  background: transparent;
}
.ssp-hero-card img {
  width: min(78%, 430px);
  max-height: 250px;
  object-fit: contain;
  border-radius: 0;
}
/* =========================
  SECTIONS
========================= */
.ssp-section,
.ssp-final-section {
  position: relative;
  padding: clamp(74px, 9vw, 132px) 0;
  background: var(--blanco);
  border-bottom: 2px solid var(--negro);
  scroll-margin-top: 120px;
}
.ssp-section-head {
  display: grid;
  grid-template-columns: minmax(220px, 0.66fr) minmax(0, 1.34fr);
  gap: clamp(34px, 5vw, 78px);
  align-items: start;
  margin-bottom: clamp(38px, 5vw, 72px);
}
.ssp-section-title {
  max-width: 960px;
  margin: 0;
  color: var(--negro);
  font-family: "Sofia Sans Extra Condensed", "Sofia Pro", "Arial Narrow", Arial, sans-serif;
  font-size: clamp(58px, 8vw, 112px);
  font-weight: 800;
  line-height: 0.86;
  letter-spacing: -0.038em;
  text-transform: uppercase;
}
.ssp-section-copy {
  max-width: 760px;
  margin: 26px 0 0;
  color: rgba(var(--tinta-rgb), 0.68);
  font-size: clamp(18px, 1.35vw, 22px);
  font-weight: 500;
  line-height: 1.42;
  letter-spacing: -0.02em;
}
.ssp-doc-page p {
  color: rgba(var(--tinta-rgb), 0.68);
  font-size: clamp(16px, 1.1vw, 18px);
  font-weight: 500;
  line-height: 1.48;
  letter-spacing: -0.01em;
}
.ssp-doc-page h3 {
  margin: 0 0 18px;
  color: var(--negro);
  font-family: "Sofia Sans Extra Condensed", "Sofia Pro", "Arial Narrow", Arial, sans-serif;
  font-size: clamp(38px, 4vw, 62px);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}
.ssp-doc-page ul,
.ssp-doc-page ol {
  margin: 0;
  padding-left: 20px;
  color: rgba(var(--tinta-rgb), 0.68);
}
.ssp-doc-page li {
  margin: 8px 0;
  color: rgba(var(--tinta-rgb), 0.68);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.42;
}
/* =========================
  GRIDS / PANELS
========================= */
.ssp-info-grid,
.ssp-grid-2,
.ssp-process-grid {
  display: grid;
  border-top: 2px solid var(--negro);
  border-left: 2px solid var(--negro);
}
.ssp-info-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.ssp-grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ssp-process-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.ssp-info-card,
.ssp-panel,
.ssp-process-grid article {
  min-height: 260px;
  padding: clamp(24px, 3vw, 34px);
  border-right: 2px solid var(--negro);
  border-bottom: 2px solid var(--negro);
  background: transparent;
  color: var(--negro);
  transition: background 0.22s ease;
}
.ssp-info-card:hover,
.ssp-process-grid article:hover {
  background: #00FFE0;
}
.ssp-card-index,
.ssp-process-grid span {
  display: block;
  margin-bottom: clamp(34px, 4vw, 52px);
  color: var(--negro);
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.ssp-process-grid span {
  font-family: "Sofia Sans Extra Condensed", "Sofia Pro", "Arial Narrow", Arial, sans-serif;
  font-size: clamp(46px, 5vw, 68px);
  font-weight: 800;
  letter-spacing: -0.035em;
}
/* =========================
  TOC
========================= */
.ssp-toc {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 2px solid var(--negro);
  border-left: 2px solid var(--negro);
}
.ssp-toc a {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 0 20px;
  border-right: 2px solid var(--negro);
  border-bottom: 2px solid var(--negro);
  background: transparent;
  color: var(--negro);
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition:
  background 0.22s ease,
  color 0.22s ease,
  padding 0.22s ease;
}
.ssp-toc a:hover {
  background: #00FFE0;
  color: var(--sobre-cian);
  padding-left: 28px;
}
.ssp-toc span {
  color: var(--negro);
  font-weight: 900;
}
/* =========================
  TAGS
========================= */
.ssp-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
}
.ssp-tags span {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  border: 2px solid var(--negro);
  background: transparent;
  color: var(--negro);
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.ssp-tags span:hover {
  background: #00FFE0;
}
/* =========================
  TABLES
========================= */
.ssp-table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 2px solid var(--negro);
  background: var(--blanco);
  margin-top: clamp(34px, 4vw, 52px);
}
.ssp-table-wrap table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
}
.ssp-table-wrap th {
  padding: 16px;
  border-right: 2px solid var(--negro);
  border-bottom: 2px solid var(--negro);
  background: transparent;
  color: var(--negro);
  text-align: left;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.ssp-table-wrap th:last-child,
.ssp-table-wrap td:last-child {
  border-right: 0;
}
.ssp-table-wrap td {
  padding: 18px 16px;
  border-right: 2px solid var(--negro);
  border-bottom: 2px solid var(--negro);
  color: rgba(var(--tinta-rgb), 0.68);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.42;
  vertical-align: top;
}
.ssp-table-wrap tr:last-child td {
  border-bottom: 0;
}
.ssp-table-wrap tr:hover td {
  background: #00FFE0;
  color: var(--sobre-cian);
}
/* =========================
  NOTES
========================= */
.ssp-note,
.ssp-warning {
  margin-top: 28px;
  padding: 20px;
  border: 2px solid var(--negro);
  background: transparent;
  color: var(--negro);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.42;
}
.ssp-warning {
  background: #00FFE0;
}
.ssp-support-grid {
  margin-top: 18px;
}
/* =========================
  FINAL
========================= */
.ssp-final-box {
  padding: clamp(28px, 4vw, 48px);
  border: 2px solid var(--negro);
  background: transparent;
}
.ssp-final-box h2 {
  max-width: 850px;
  margin: 0;
  color: var(--negro);
  font-family: "Sofia Sans Extra Condensed", "Sofia Pro", "Arial Narrow", Arial, sans-serif;
  font-size: clamp(52px, 7vw, 104px);
  font-weight: 800;
  line-height: 0.88;
  letter-spacing: -0.038em;
  text-transform: uppercase;
}
.ssp-final-box p {
  max-width: 760px;
  margin: 28px 0 0;
}
/* =========================
  RESPONSIVE
========================= */
@media (max-width: 1024px) {
  .ssp-hero-grid,
  .ssp-section-head,
  .ssp-info-grid,
  .ssp-grid-2,
  .ssp-process-grid {
  grid-template-columns: 1fr;
  }
  .ssp-toc {
  grid-template-columns: 1fr;
  }
  .ssp-hero-card {
  min-height: 300px;
  }
}
@media (max-width: 768px) {
  .ssp-wrap {
  width: calc(100% - 32px);
  }
  .ssp-hero {
  padding-top: 58px;
  }
  .ssp-title {
  font-size: clamp(58px, 17vw, 88px);
  max-width: 100%;
  }
  .ssp-section-title {
  font-size: clamp(50px, 16vw, 76px);
  }
  .ssp-actions {
  width: 100%;
  flex-direction: column;
  }
  .ssp-btn {
  width: 100%;
  }
  .ssp-info-card,
  .ssp-panel,
  .ssp-process-grid article {
  min-height: 220px;
  }
  .ssp-hero-card {
  min-height: 250px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ssp-doc-page *,
  .ssp-doc-page *::before,
  .ssp-doc-page *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
  }
  .ssp-reveal {
  opacity: 1;
  transform: none;
  }
}

/* ============================================================
   NORMAL MAP GENERATOR — la herramienta
   Portado el 26-08-2026 de doc-normal-map.inline.css.
   Sin la @import de Google Fonts: las fuentes se sirven del repo.
   ============================================================ */
.contrast-pbr-tool {
  --white: var(--blanco);
  --black: var(--negro);
  --accent: #00ffe0;
  width: 100%;
  background: var(--white);
  color: var(--black);
  font-family: "Sofia Sans", Arial, sans-serif;
}
.contrast-pbr-tool * { box-sizing: border-box; }
.contrast-pbr-tool .cpbr-container {
  width: min(1180px, calc(100% - 44px));
  margin: 0 auto;
}
.contrast-pbr-tool h1,
.contrast-pbr-tool h2,
.contrast-pbr-tool h3,
.contrast-pbr-tool p { margin: 0; color: var(--negro); }
.contrast-pbr-tool .cpbr-hero {
  padding: clamp(70px, 7vw, 106px) 0 clamp(40px, 5vw, 62px);
}
.contrast-pbr-tool .cpbr-kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.16em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--negro);
}
.contrast-pbr-tool .cpbr-kicker span {
  width: 42px;
  height: 2px;
  background: var(--accent);
}
.contrast-pbr-tool .cpbr-hero h1 {
  max-width: 880px;
  font-family: "Sofia Sans Extra Condensed", "Arial Narrow", Arial, sans-serif;
  font-size: clamp(70px, 12vw, 144px);
  font-weight: 800;
  line-height: 0.84;
  letter-spacing: -0.045em;
  text-transform: uppercase;
}
.contrast-pbr-tool .cpbr-hero p {
  max-width: 760px;
  margin-top: 24px;
  font-size: clamp(17px, 1.8vw, 22px);
  font-weight: 500;
  line-height: 1.32;
}
.contrast-pbr-tool .cpbr-workspace {
  display: grid;
  grid-template-columns: 280px minmax(320px, 440px) minmax(360px, 1fr);
  gap: 22px;
  align-items: stretch;
}
.contrast-pbr-tool .cpbr-block {
  border: 2px solid var(--black);
  background: var(--white);
  min-width: 0;
  min-height: 100%;
}
.contrast-pbr-tool .cpbr-upload-block,
.contrast-pbr-tool .cpbr-controls-block,
.contrast-pbr-tool .cpbr-preview-block {
  padding: 20px;
  display: flex;
  flex-direction: column;
}
.contrast-pbr-tool .cpbr-block-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 16px;
}
.contrast-pbr-tool .cpbr-block-head span,
.contrast-pbr-tool .cpbr-panel-label {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.contrast-pbr-tool .cpbr-block-head h2 {
  font-size: 17px;
  font-weight: 900;
  letter-spacing: 0.09em;
  line-height: 1;
  text-transform: uppercase;
}
.contrast-pbr-tool .cpbr-preview-head {
  align-items: center;
  justify-content: space-between;
}
.contrast-pbr-tool .cpbr-preview-head > div {
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.contrast-pbr-tool .cpbr-upload {
  display: flex;
  min-height: 118px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 7px;
  border: 2px dashed var(--black);
  text-align: center;
  cursor: pointer;
  transition: background 160ms ease;
}
.contrast-pbr-tool .cpbr-upload:hover,
.contrast-pbr-tool .cpbr-upload.is-dragging { background: var(--accent); }
.contrast-pbr-tool .cpbr-upload input { display: none; }
.contrast-pbr-tool .cpbr-upload strong,
.contrast-pbr-tool .cpbr-upload small {
  font-weight: 900;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.contrast-pbr-tool .cpbr-upload strong { font-size: 14px; }
.contrast-pbr-tool .cpbr-upload small { font-size: 10px; line-height: 1.25; }
.contrast-pbr-tool .cpbr-status {
  margin-top: 12px;
  padding: 12px;
  border: 2px solid var(--black);
  font-size: 10px;
  font-weight: 900;
  line-height: 1.35;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.contrast-pbr-tool .cpbr-status.is-error { background: var(--accent); }
.contrast-pbr-tool .cpbr-source-preview {
  position: relative;
  margin-top: 16px;
  border: 2px solid var(--black);
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background:
  linear-gradient(45deg, rgba(var(--tinta-rgb), .07) 25%, transparent 25%),
  linear-gradient(-45deg, rgba(var(--tinta-rgb), .07) 25%, transparent 25%),
  linear-gradient(45deg, transparent 75%, rgba(var(--tinta-rgb), .07) 75%),
  linear-gradient(-45deg, transparent 75%, rgba(var(--tinta-rgb), .07) 75%);
  background-size: 18px 18px;
  background-position: 0 0, 0 9px, 9px -9px, -9px 0;
}
.contrast-pbr-tool .cpbr-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--white);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-align: center;
  text-transform: uppercase;
}
.contrast-pbr-tool canvas { display: block; width: 100%; height: 100%; }
.contrast-pbr-tool .cpbr-dev-tool {
  margin-top: 16px;
  padding: 14px;
  border: 2px solid var(--black);
}
.contrast-pbr-tool .cpbr-dev-head { display: grid; gap: 8px; }
.contrast-pbr-tool .cpbr-dev-head span {
  width: fit-content;
  padding: 5px 8px;
  border: 2px solid var(--black);
  background: var(--accent);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.contrast-pbr-tool .cpbr-dev-head strong {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.1em;
  line-height: 1.15;
  text-transform: uppercase;
}
.contrast-pbr-tool .cpbr-dev-tool p {
  margin-top: 10px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
}
.contrast-pbr-tool .cpbr-dev-actions { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 12px; }
.contrast-pbr-tool .cpbr-dev-tool button {
  width: 100%;
  min-height: 38px;
  border: 2px solid var(--black);
  border-radius: 0;
  background: transparent;
  color: var(--black);
  font: inherit;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}
.contrast-pbr-tool .cpbr-dev-tool button:hover { background: var(--accent); }
.contrast-pbr-tool .cpbr-control-grid,
.contrast-pbr-tool .cpbr-edit-panels,
.contrast-pbr-tool .cpbr-preview-controls,
.contrast-pbr-tool .cpbr-range-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.contrast-pbr-tool .cpbr-edit-panels {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 2px solid var(--black);
}
.contrast-pbr-tool .cpbr-edit-panel { display: none; gap: 14px; }
.contrast-pbr-tool .cpbr-edit-panel.is-active { display: grid; }
.contrast-pbr-tool .cpbr-panel-label { margin-bottom: 2px; }
.contrast-pbr-tool .cpbr-panel-note { font-size: 14px; font-weight: 500; line-height: 1.35; }
.contrast-pbr-tool .cpbr-control,
.contrast-pbr-tool .cpbr-range { display: grid; gap: 8px; }
.contrast-pbr-tool .cpbr-control label,
.contrast-pbr-tool .cpbr-range label,
.contrast-pbr-tool .cpbr-switches label,
.contrast-pbr-tool .cpbr-mini-toggle,
.contrast-pbr-tool .cpbr-preview-displacement {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--negro);
}
.contrast-pbr-tool .cpbr-range label {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.contrast-pbr-tool select {
  width: 100%;
  min-height: 44px;
  padding: 0 11px;
  border: 2px solid var(--black);
  border-radius: 0;
  background: var(--white);
  color: var(--black);
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}
.contrast-pbr-tool input[type="range"] {
  width: 100%;
  accent-color: var(--black);
}
.contrast-pbr-tool .cpbr-switches {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 14px;
}
.contrast-pbr-tool .cpbr-switches-one { grid-template-columns: 1fr; }
.contrast-pbr-tool .cpbr-switches label,
.contrast-pbr-tool .cpbr-mini-toggle,
.contrast-pbr-tool .cpbr-preview-displacement {
  display: flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
}
.contrast-pbr-tool .cpbr-switches input,
.contrast-pbr-tool .cpbr-mini-toggle input,
.contrast-pbr-tool .cpbr-preview-displacement input {
  width: 17px;
  height: 17px;
  accent-color: var(--black);
}
.contrast-pbr-tool .cpbr-control-actions {
  display: grid;
  gap: 10px;
  margin-top: auto;
  padding-top: 20px;
}
.contrast-pbr-tool .cpbr-button,
.contrast-pbr-tool .cpbr-map-head button,
.contrast-pbr-tool .cpbr-shape-tabs button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--black);
  border-radius: 0;
  background: transparent;
  color: var(--black);
  font: inherit;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 160ms ease;
}
.contrast-pbr-tool .cpbr-button {
  width: 100%;
  min-height: 50px;
  padding: 0 22px;
}
.contrast-pbr-tool .cpbr-button-small { width: auto; min-height: 46px; }
.contrast-pbr-tool .cpbr-button:hover,
.contrast-pbr-tool .cpbr-map-head button:hover,
.contrast-pbr-tool .cpbr-shape-tabs button:hover,
.contrast-pbr-tool .cpbr-shape-tabs button.is-active { background: var(--accent); }
.contrast-pbr-tool .cpbr-button-secondary { min-height: 44px; }
.contrast-pbr-tool .cpbr-shape-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin: 14px 0;
  border-top: 2px solid var(--black);
  border-left: 2px solid var(--black);
}
.contrast-pbr-tool .cpbr-shape-tabs button {
  min-height: 42px;
  border-top: 0;
  border-left: 0;
  border-right: 2px solid var(--black);
  border-bottom: 2px solid var(--black);
  transform: none !important;
}
.contrast-pbr-tool .cpbr-shape-tabs button:last-child { border-right: 2px solid var(--black); }
.contrast-pbr-tool .cpbr-preview-displacement {
  min-height: 38px;
  padding: 0 10px;
  border: 2px solid var(--black);
}
.contrast-pbr-tool .cpbr-viewer {
  position: relative;
  width: 100%;
  aspect-ratio: 1.16 / 1;
  min-height: 360px;
  border: 2px solid var(--black);
  overflow: hidden;
  background: var(--white);
  touch-action: none;
}
.contrast-pbr-tool .cpbr-viewer canvas {
  width: 100% !important;
  height: 100% !important;
  cursor: grab;
}
.contrast-pbr-tool .cpbr-viewer canvas:active { cursor: grabbing; }
.contrast-pbr-tool .cpbr-viewer-empty {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 18px;
  padding: 24px;
  background: var(--white);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.14em;
  line-height: 1.4;
  text-align: center;
  text-transform: uppercase;
  pointer-events: none;
}
.contrast-pbr-tool .cpbr-viewer-empty img {
  width: min(170px, 52%);
  max-height: 150px;
  object-fit: contain;
  display: block;
}
.contrast-pbr-tool .cpbr-preview-export {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: end;
  margin-top: 14px;
}
.contrast-pbr-tool .cpbr-preview-export.is-disabled { opacity: 0.42; pointer-events: none; }
.contrast-pbr-tool .cpbr-export-control label { margin-bottom: 8px; }
.contrast-pbr-tool .cpbr-preview-note {
  display: grid;
  gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 2px solid var(--black);
}
.contrast-pbr-tool .cpbr-preview-note span {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.contrast-pbr-tool .cpbr-preview-note p {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
}
.contrast-pbr-tool .cpbr-output-section {
  padding-top: clamp(54px, 7vw, 88px);
  padding-bottom: clamp(34px, 5vw, 58px);
}
.contrast-pbr-tool .cpbr-output-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 24px;
  margin-bottom: 24px;
}
.contrast-pbr-tool .cpbr-output-head h2,
.contrast-pbr-tool .cpbr-seo-section h2,
.contrast-pbr-tool .cpbr-faq-section h2 {
  font-family: "Sofia Sans Extra Condensed", "Arial Narrow", Arial, sans-serif;
  font-size: clamp(48px, 6vw, 78px);
  font-weight: 800;
  line-height: 0.88;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}
.contrast-pbr-tool .cpbr-output-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 2px solid var(--black);
  border-left: 2px solid var(--black);
}
.contrast-pbr-tool .cpbr-map-card {
  border-right: 2px solid var(--black);
  border-bottom: 2px solid var(--black);
  background: var(--white);
  min-width: 0;
}
.contrast-pbr-tool .cpbr-map-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 48px;
  padding: 0 10px;
  border-bottom: 2px solid var(--black);
}
.contrast-pbr-tool .cpbr-map-head span {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.1em;
  line-height: 1.1;
  text-transform: uppercase;
}
.contrast-pbr-tool .cpbr-map-head button { min-height: 30px; padding: 0 8px; font-size: 8px; }
.contrast-pbr-tool .cpbr-map-card canvas { aspect-ratio: 1 / 1; max-height: 210px; background: var(--white); }
.contrast-pbr-tool .cpbr-seo-section,
.contrast-pbr-tool .cpbr-faq-section {
  padding: clamp(34px, 5vw, 62px) 0 0;
}
.contrast-pbr-tool .cpbr-seo-section > p {
  max-width: 760px;
  margin-top: 18px;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.42;
}
.contrast-pbr-tool .cpbr-seo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 28px;
  border-top: 2px solid var(--black);
  border-left: 2px solid var(--black);
}
.contrast-pbr-tool .cpbr-seo-grid div {
  padding: 22px;
  border-right: 2px solid var(--black);
  border-bottom: 2px solid var(--black);
}
.contrast-pbr-tool .cpbr-seo-grid span,
.contrast-pbr-tool .cpbr-seo-grid h3 {
  display: block;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.contrast-pbr-tool .cpbr-seo-grid h3 { margin-top: 12px; }
.contrast-pbr-tool .cpbr-seo-grid p { margin-top: 12px; font-size: 15px; font-weight: 500; line-height: 1.38; }
.contrast-pbr-tool .cpbr-faq-section { padding-bottom: clamp(80px, 9vw, 128px); }
.contrast-pbr-tool .cpbr-faq-list {
  margin-top: 28px;
  border-top: 2px solid var(--black);
  border-left: 2px solid var(--black);
}
.contrast-pbr-tool .cpbr-faq-list details {
  border-right: 2px solid var(--black);
  border-bottom: 2px solid var(--black);
  background: var(--white);
  color: var(--black);
}
.contrast-pbr-tool .cpbr-faq-list summary {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 0 22px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  list-style: none;
  background: var(--white);
  color: var(--black);
}
.contrast-pbr-tool .cpbr-faq-list summary::-webkit-details-marker { display: none; }
.contrast-pbr-tool .cpbr-faq-list summary::after { content: "+"; font-size: 18px; font-weight: 900; }
.contrast-pbr-tool .cpbr-faq-list details[open] summary::after { content: "−"; }
.contrast-pbr-tool .cpbr-faq-list details[open] summary { border-bottom: 2px solid var(--black); }
.contrast-pbr-tool .cpbr-faq-list p {
  padding: 16px 22px 22px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  background: var(--white);
}
@media (max-width: 1120px) {
  .contrast-pbr-tool .cpbr-workspace { grid-template-columns: 280px minmax(0, 1fr); }
  .contrast-pbr-tool .cpbr-preview-block { grid-column: 1 / -1; }
  .contrast-pbr-tool .cpbr-viewer { aspect-ratio: 16 / 9; min-height: 420px; }
  .contrast-pbr-tool .cpbr-output-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .contrast-pbr-tool .cpbr-workspace { grid-template-columns: 1fr; }
  .contrast-pbr-tool .cpbr-source-preview { max-width: 340px; }
  .contrast-pbr-tool .cpbr-viewer { min-height: 360px; }
  .contrast-pbr-tool .cpbr-output-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contrast-pbr-tool .cpbr-seo-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .contrast-pbr-tool .cpbr-container { width: calc(100% - 32px); }
  .contrast-pbr-tool .cpbr-hero h1 { font-size: clamp(58px, 17vw, 88px); }
  .contrast-pbr-tool .cpbr-output-head { display: grid; align-items: start; }
  .contrast-pbr-tool .cpbr-output-grid { grid-template-columns: 1fr; }
  .contrast-pbr-tool .cpbr-map-card canvas { max-height: none; }
  .contrast-pbr-tool .cpbr-viewer { aspect-ratio: 1 / 1; min-height: 300px; }
  .contrast-pbr-tool .cpbr-preview-export { grid-template-columns: 1fr; }
  .contrast-pbr-tool .cpbr-button-small { width: 100%; }
}
.cw-wrap {
  width: min(1180px, calc(100% - 44px));
  margin-left: auto;
  margin-right: auto;
}
#cursor-follow {
  z-index: 1000000 !important;
}
/* =========================
  REVEAL
========================= */
.contrast-work-page .cw-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
  opacity 0.7s ease,
  transform 0.7s ease;
}
.contrast-work-page .cw-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
/* =========================
  HERO
========================= */
.contrast-work-page .cw-hero {
  padding: clamp(72px, 8vw, 120px) 0 clamp(72px, 8vw, 110px);
  background: var(--blanco);
}
.contrast-work-page .cw-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 28px;
  color: var(--negro);
  font-size: 12px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.contrast-work-page .cw-eyebrow span {
  display: block;
  width: 42px;
  height: 2px;
  background: #00FFE0;
}
.contrast-work-page .cw-hero h1 {
  max-width: 1040px;
  margin: 0;
  color: var(--negro);
  font-family: "Sofia Sans Extra Condensed", "Arial Narrow", Arial, sans-serif;
  font-size: clamp(68px, 8.4vw, 116px);
  font-weight: 800;
  line-height: 0.86;
  letter-spacing: -0.038em;
  text-transform: uppercase;
}
.contrast-work-page .cw-hero-text {
  max-width: 800px;
  margin: clamp(48px, 5vw, 72px) 0 0;
  color: rgba(var(--tinta-rgb), 0.68);
  font-size: clamp(18px, 1.45vw, 22px);
  line-height: 1.42;
  font-weight: 500;
  letter-spacing: -0.02em;
}
.contrast-work-page .cw-hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
}
.contrast-work-page .cw-hero-tags button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 24px;
  border: 2px solid var(--negro);
  background: transparent;
  color: var(--negro);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 0;
  appearance: none;
  transition:
  color 0.22s ease,
  border-color 0.22s ease,
  background 0.22s ease,
  transform 0.22s ease;
}
.contrast-work-page .cw-hero-tags button:hover,
.contrast-work-page .cw-hero-tags button.is-active {
  color: var(--sobre-cian);
  border-color: var(--negro);
  background: #00FFE0;
  transform: translateY(-2px);
}
.contrast-work-page .cw-tag-detail {
  display: grid;
  grid-template-columns: 42px minmax(0, 720px);
  gap: 18px;
  align-items: start;
  max-width: 860px;
  margin-top: 28px;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition:
  opacity 0.28s ease,
  transform 0.28s ease;
}
.contrast-work-page .cw-tag-detail.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.contrast-work-page .cw-tag-detail-line {
  width: 42px;
  height: 2px;
  margin-top: 11px;
  background: #00FFE0;
}
.contrast-work-page .cw-tag-detail span {
  display: block;
  margin-bottom: 10px;
  color: var(--negro);
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.contrast-work-page .cw-tag-detail p {
  max-width: 720px;
  margin: 0;
  color: rgba(var(--tinta-rgb), 0.68);
  font-size: clamp(17px, 1.35vw, 21px);
  line-height: 1.42;
  font-weight: 500;
  letter-spacing: -0.02em;
}
/* =========================
  WORK SECTION
========================= */
.contrast-work-page .cw-work-section {
  position: relative;
  padding: clamp(96px, 9vw, 150px) 0 clamp(100px, 12vw, 170px);
  background: var(--blanco);
}
.contrast-work-page .cw-work-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 100vw;
  height: 2px;
  background: var(--negro);
  transform: translateX(-50%);
  pointer-events: none;
}
.contrast-work-page .cw-section-head {
  margin-bottom: clamp(38px, 5vw, 72px);
}
.contrast-work-page .cw-section-head .cw-eyebrow {
  margin-bottom: 0;
}
/* =========================
  GRID
========================= */
.contrast-work-page .cw-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 2px solid var(--negro);
  border-left: 2px solid var(--negro);
  background: transparent;
}
.contrast-work-page .cw-card {
  position: relative;
  display: grid;
  grid-template-rows: 320px minmax(310px, auto);
  width: 100%;
  min-height: 640px;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-right: 2px solid var(--negro);
  border-bottom: 2px solid var(--negro);
  background: transparent;
  color: var(--negro);
  cursor: pointer;
  appearance: none;
  border-radius: 0;
  text-align: left;
}
.contrast-work-page .cw-card-image {
  position: relative;
  width: 100%;
  min-height: 320px;
  overflow: hidden;
  background: var(--blanco);
  border-bottom: 2px solid var(--negro);
}
.contrast-work-page .cw-card img {
  width: 100%;
  height: 100%;
  min-height: 320px;
  object-fit: cover;
  transform: scale(1.04);
  filter: saturate(0.96) contrast(1.02);
  transition:
  transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
  filter 0.35s ease;
}
.contrast-work-page .cw-card-body {
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 2.8vw, 34px);
  background: var(--blanco);
  color: var(--negro);
  transition: background 0.22s ease;
}
.contrast-work-page .cw-card-meta {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: clamp(34px, 4vw, 48px);
  color: var(--negro);
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.contrast-work-page .cw-card-label {
  margin: 0 0 18px;
  color: rgba(var(--tinta-rgb), 0.62);
  font-size: 11px;
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.contrast-work-page .cw-card h2 {
  margin: 0;
  color: var(--negro);
  font-family: "Sofia Sans Extra Condensed", "Arial Narrow", Arial, sans-serif;
  font-size: clamp(48px, 5vw, 76px);
  font-weight: 800;
  line-height: 0.88;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
}
.contrast-work-page .cw-card p {
  max-width: 96%;
  margin: auto 0 0;
  padding-top: 34px;
  color: rgba(var(--tinta-rgb), 0.68);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.42;
  letter-spacing: -0.01em;
}
/* La etiqueta es un <p>, asi que la regla de arriba (.cw-card p) le gana a
   .cw-card-label y le mete margin-top:auto: la etiqueta se repartia el
   hueco libre con el texto y bajaba en las tarjetas de titulo corto. */
.contrast-work-page .cw-card p.cw-card-label {
  margin: 0 0 18px;
  padding-top: 0;
  max-width: none;
}
.contrast-work-page .cw-card:hover img {
  transform: scale(1.1);
  filter: saturate(1.08) contrast(1.08);
}
.contrast-work-page .cw-card:hover .cw-card-body {
  background: #00FFE0;
}
.contrast-work-page .cw-card:hover .cw-card-label,
.contrast-work-page .cw-card:hover p {
  color: var(--negro);
}
/* =========================
  MODAL
========================= */
.contrast-work-page .cw-modal {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
}
.contrast-work-page .cw-modal.is-open {
  display: flex;
  opacity: 1;
  pointer-events: auto;
}
.contrast-work-page .cw-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(var(--papel-rgb), 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.contrast-work-page .cw-modal-panel {
  position: relative;
  z-index: 2;
  width: min(1120px, calc(100vw - 48px));
  max-height: calc(100vh - 48px);
  border: 2px solid var(--negro);
  background: var(--blanco);
  overflow: hidden;
  transform: translateY(18px) scale(0.985);
  transition: transform 0.35s ease;
}
.contrast-work-page .cw-modal.is-open .cw-modal-panel {
  transform: translateY(0) scale(1);
}
.contrast-work-page .cw-modal-close {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 8;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 2px solid var(--negro);
  background: transparent;
  color: var(--negro);
  cursor: pointer;
  font-size: 31px;
  line-height: 38px;
  font-weight: 900;
  border-radius: 0;
  transition:
  background 0.22s ease,
  color 0.22s ease,
  border-color 0.22s ease;
}
.contrast-work-page .cw-modal-close:hover {
  background: #00FFE0;
  color: var(--sobre-cian);
  border-color: var(--negro);
}
.contrast-work-page .cw-modal-content {
  display: grid;
  grid-template-columns: 42% 58%;
  min-height: min(620px, calc(100vh - 54px));
}
.contrast-work-page .cw-modal-info {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(34px, 5vw, 72px);
  background: var(--blanco);
}
.contrast-work-page .cw-modal-kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
  color: var(--negro);
  font-size: 11px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.contrast-work-page .cw-modal-kicker::before {
  content: "";
  width: 34px;
  height: 2px;
  background: #00FFE0;
  display: inline-block;
}
/* Fila de familia de servicio en la ficha de cada proyecto: mismo cuerpo
   que el kicker, con el nombre de la familia como enlace real. */
/* p.cw-servicio vive dentro de .cw-showroom-intro-copy, cuyas reglas de
   parrafo (mas especificas) ganaban a una clase sola: de ahi el selector
   compuesto. El modal ademas se recoloca en <body> al abrir, por eso no
   basta con el prefijo .contrast-work-page. */
/* Los !important son obligados: el CSS portado del vivo fuerza con
   !important el estilo de TODO parrafo de .cw-showroom-intro-copy
   (linea "text-transform: none !important" incluida), y sin igualar la
   bandera esta fila siempre perdia. */
.cw-servicio,
.contrast-work-page .cw-showroom-intro-copy p.cw-servicio,
.cw-showroom-intro-copy p.cw-servicio {
  margin: 0 0 18px !important;
  font-size: 11px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: var(--negro) !important;
}
.cw-servicio a {
  color: var(--negro);
  text-decoration: underline;
  text-decoration-color: #00FFE0;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.cw-servicio a:hover { background: #00FFE0; text-decoration: none; }
.contrast-work-page .cw-modal-info h3 {
  margin: 0 0 22px;
  color: var(--negro);
  font-family: "Sofia Sans Extra Condensed", "Arial Narrow", Arial, sans-serif;
  font-size: clamp(56px, 7vw, 104px);
  font-weight: 800;
  line-height: 0.84;
  letter-spacing: -0.035em;
  text-transform: uppercase;
}
.contrast-work-page .cw-modal-info p {
  max-width: 390px;
  margin: 0 0 34px;
  color: rgba(var(--tinta-rgb), 0.68);
  font-size: 17px;
  line-height: 1.45;
  font-weight: 500;
}
.contrast-work-page .cw-modal-button {
  width: fit-content;
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 25px;
  border: 2px solid var(--negro);
  background: transparent;
  color: var(--negro);
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 0;
  transition:
  background 0.22s ease,
  color 0.22s ease,
  border-color 0.22s ease,
  transform 0.22s ease;
}
.contrast-work-page .cw-modal-button:hover {
  background: #00FFE0;
  border-color: var(--negro);
  color: var(--sobre-cian);
  transform: translateY(-2px);
}
.contrast-work-page .cw-modal-slug {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 18px;
}
.contrast-work-page .cw-modal-slug span {
  color: rgba(var(--tinta-rgb), 0.58);
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.contrast-work-page .cw-modal-slug button {
  min-height: 34px;
  padding: 0 12px;
  border: 2px solid var(--negro);
  background: transparent;
  color: var(--negro);
  cursor: pointer;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.contrast-work-page .cw-modal-slug button:hover {
  background: #00FFE0;
}
.contrast-work-page .cw-modal-counter {
  position: absolute;
  left: clamp(34px, 5vw, 72px);
  bottom: 34px;
  display: flex;
  gap: 9px;
  color: rgba(var(--tinta-rgb), 0.42);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.18em;
}
.contrast-work-page .cw-modal-media {
  position: relative;
  min-height: 520px;
  background: var(--blanco);
  overflow: hidden;
  border-left: 2px solid var(--negro);
}
.contrast-work-page .cw-modal-media img {
  width: 100%;
  height: 100%;
  min-height: 520px;
  display: block;
  object-fit: cover;
}
.contrast-work-page .cw-gallery-arrow {
  position: absolute;
  top: 50%;
  z-index: 5;
  width: 62px;
  height: 62px;
  padding: 0;
  border: 2px solid var(--negro);
  background: rgba(var(--papel-rgb), 0.9);
  color: var(--negro);
  font-size: 32px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  border-radius: 0;
  transform: translateY(-50%);
  transition:
  background 0.22s ease,
  color 0.22s ease,
  border-color 0.22s ease;
}
.contrast-work-page .cw-gallery-arrow:hover {
  background: #00FFE0;
  color: var(--sobre-cian);
  border-color: var(--negro);
}
.contrast-work-page .cw-gallery-prev {
  left: 22px;
}
.contrast-work-page .cw-gallery-next {
  right: 22px;
}
html.cw-modal-locked {
  overflow: hidden;
}
/* =========================
  RESPONSIVE
========================= */
@media (max-width: 1024px) {
  .contrast-work-page .cw-hero h1 {
  font-size: clamp(68px, 15vw, 124px);
  }
  .contrast-work-page .cw-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .contrast-work-page .cw-modal-content {
  grid-template-columns: 1fr;
  }
  .contrast-work-page .cw-modal-panel {
  overflow-y: auto;
  }
  .contrast-work-page .cw-modal-info {
  min-height: auto;
  padding-bottom: 86px;
  }
  .contrast-work-page .cw-modal-media {
  border-left: 0;
  border-top: 2px solid var(--negro);
  }
  .contrast-work-page .cw-modal-media,
  .contrast-work-page .cw-modal-media img {
  min-height: 420px;
  }
}
@media (max-width: 767px) {
  .contrast-work-page .cw-wrap {
  width: calc(100% - 32px);
  }
  .contrast-work-page .cw-hero {
  padding: 58px 0 72px;
  }
  .contrast-work-page .cw-eyebrow {
  margin-bottom: 28px;
  }
  .contrast-work-page .cw-hero h1 {
  font-size: clamp(58px, 17vw, 88px);
  }
  .contrast-work-page .cw-hero-text {
  margin-top: 34px;
  font-size: 17px;
  }
  .contrast-work-page .cw-hero-tags button {
  width: 100%;
  }
  .contrast-work-page .cw-tag-detail {
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 24px;
  }
  .contrast-work-page .cw-tag-detail-line {
  width: 42px;
  margin-top: 0;
  }
  .contrast-work-page .cw-work-section {
  padding-top: 86px;
  }
  .contrast-work-page .cw-grid {
  grid-template-columns: 1fr;
  }
  .contrast-work-page .cw-card {
  min-height: auto;
  grid-template-rows: auto auto;
  }
  .contrast-work-page .cw-card-image,
  .contrast-work-page .cw-card img {
  height: 320px;
  min-height: 320px;
  }
  .contrast-work-page .cw-card-body {
  min-height: auto;
  }
  .contrast-work-page .cw-card p {
  margin-top: 24px;
  padding-top: 0;
  }
  .contrast-work-page .cw-modal {
  padding: 14px;
  }
  .contrast-work-page .cw-modal-panel {
  width: calc(100vw - 28px);
  max-height: calc(100vh - 28px);
  }
  .contrast-work-page .cw-modal-info {
  padding: 34px 24px 74px;
  }
  .contrast-work-page .cw-modal-info h3 {
  font-size: clamp(52px, 18vw, 78px);
  }
  .contrast-work-page .cw-modal-button {
  width: 100%;
  }
  .contrast-work-page .cw-modal-counter {
  left: 24px;
  bottom: 28px;
  }
  .contrast-work-page .cw-modal-media,
  .contrast-work-page .cw-modal-media img {
  min-height: 320px;
  }
  .contrast-work-page .cw-gallery-arrow {
  width: 50px;
  height: 50px;
  font-size: 25px;
  }
  .contrast-work-page .cw-gallery-prev {
  left: 14px;
  }
  .contrast-work-page .cw-gallery-next {
  right: 14px;
  }
  .contrast-work-page .cw-modal-close {
  top: 14px;
  right: 14px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .contrast-work-page *,
  .contrast-work-page *::before,
  .contrast-work-page *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
  }
  .contrast-work-page .cw-reveal {
  opacity: 1;
  transform: none;
  }
}
/* =========================
  SHOWROOM PROJECT MODAL — INTEGRATED CASE STUDY + VIEWER
========================= */
.contrast-work-page .cw-modal.is-showroom-project {
  align-items: flex-start;
  padding: clamp(18px, 3vw, 40px);
  overflow-y: auto;
}
.contrast-work-page .cw-modal.is-showroom-project .cw-modal-panel {
  width: min(1180px, calc(100vw - 44px));
  max-height: none;
  overflow: visible;
}
.contrast-work-page .cw-modal.is-showroom-project .cw-modal-close {
  position: sticky;
  top: 20px;
  float: right;
  margin: 20px 20px -64px 0;
  background: var(--blanco);
}
.contrast-work-page .cw-showroom-project[hidden] {
  display: none !important;
}
.contrast-work-page .cw-showroom-project {
  display: block;
  background: var(--blanco);
  color: var(--negro);
}
.contrast-work-page .cw-showroom-intro {
  display: grid;
  grid-template-columns: 42% 58%;
  min-height: min(680px, calc(100vh - 80px));
  border-bottom: 2px solid var(--negro);
}
.contrast-work-page .cw-showroom-intro-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(34px, 5vw, 72px);
  background: var(--blanco);
}
.contrast-work-page .cw-showroom-intro-copy h3 {
  margin: 0 0 24px;
  color: var(--negro);
  font-family: "Sofia Sans Extra Condensed", "Arial Narrow", Arial, sans-serif;
  font-size: clamp(58px, 7vw, 112px);
  font-weight: 800;
  line-height: 0.84;
  letter-spacing: -0.038em;
  text-transform: uppercase;
}
.contrast-work-page .cw-showroom-intro-copy p {
  max-width: 430px;
  margin: 0 0 18px;
  color: rgba(var(--tinta-rgb), 0.68);
  font-size: 17px;
  line-height: 1.45;
  font-weight: 500;
}
.contrast-work-page .cw-showroom-scroll-button {
  margin-top: 22px;
}
.contrast-work-page .cw-showroom-intro-media {
  min-height: 520px;
  border-left: 2px solid var(--negro);
  overflow: hidden;
  background: var(--blanco);
}
.contrast-work-page .cw-showroom-intro-media img,
.contrast-work-page .cw-showroom-intro-media video {
  width: 100%;
  height: 100%;
  min-height: 520px;
  display: block;
  object-fit: cover;
}

.contrast-work-page .cw-showroom-viewer-section {
  padding: clamp(34px, 4vw, 52px);
  background: var(--blanco);
}
.contrast-work-page .cw-showroom-viewer-section .cw-eyebrow {
  margin-bottom: 22px;
}
.contrast-work-page .cw-showroom-viewer-section h4 {
  max-width: 860px;
  margin: 0;
  color: var(--negro);
  font-family: "Sofia Sans Extra Condensed", "Arial Narrow", Arial, sans-serif;
  font-size: clamp(52px, 6vw, 96px);
  font-weight: 800;
  line-height: 0.88;
  letter-spacing: -0.035em;
  text-transform: uppercase;
}
.contrast-work-page .cw-showroom-viewer-text {
  max-width: 720px;
  margin: 22px 0 34px;
  color: rgba(var(--tinta-rgb), 0.68);
  font-size: 17px;
  line-height: 1.45;
  font-weight: 500;
}
.contrast-work-page .cw-showroom-viewer-frame {
  position: relative;
  width: 100%;
  height: min(78vh, 820px);
  min-height: 620px;
  border: 2px solid var(--negro);
  overflow: hidden;
  background: var(--negro);
}
.contrast-work-page .cw-modal.is-showroom-project .cw-modal-backdrop {
  background: rgba(var(--papel-rgb), 0.92);
}
@media (max-width: 1024px) {
  .contrast-work-page .cw-showroom-intro {
  grid-template-columns: 1fr;
  }
  .contrast-work-page .cw-showroom-intro-media {
  border-left: 0;
  border-top: 2px solid var(--negro);
  }
  .contrast-work-page .cw-showroom-intro-copy {
  min-height: auto;
  }
}
@media (max-width: 767px) {
  .contrast-work-page .cw-modal.is-showroom-project {
  padding: 14px;
  }
  .contrast-work-page .cw-modal.is-showroom-project .cw-modal-panel {
  width: calc(100vw - 28px);
  }
  .contrast-work-page .cw-modal.is-showroom-project .cw-modal-close {
  top: 14px;
  margin: 14px 14px -58px 0;
  }
  .contrast-work-page .cw-showroom-intro-copy {
  padding: 34px 24px 42px;
  }
  .contrast-work-page .cw-showroom-intro-copy h3 {
  font-size: clamp(50px, 17vw, 78px);
  }
  .contrast-work-page .cw-showroom-intro-media,
  .contrast-work-page .cw-showroom-intro-media img,
  .contrast-work-page .cw-showroom-intro-media video {
  min-height: 320px;
  }
  .contrast-work-page .cw-showroom-viewer-section {
  padding: 24px 14px 14px;
  }
  .contrast-work-page .cw-showroom-viewer-frame {
  height: calc(100dvh - 112px);
  min-height: 620px;
  }
}
/* =========================
  SHOWROOM PROJECT — FINAL LAYOUT FIX
========================= */
.contrast-work-page .cw-modal.is-showroom-project .cw-modal-panel {
  width: min(1180px, calc(100vw - 48px));
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  overflow-x: hidden;
}
.contrast-work-page .cw-modal.is-showroom-project .cw-modal-content {
  display: none !important;
}
.contrast-work-page .cw-modal.is-showroom-project .cw-showroom-project {
  display: block !important;
  width: 100%;
}
.contrast-work-page .cw-showroom-intro {
  grid-template-columns: minmax(0, 42%) minmax(0, 58%);
  min-height: min(700px, calc(100vh - 80px));
}
.contrast-work-page .cw-showroom-intro-copy h3 {
  max-width: 100%;
  font-size: clamp(58px, 6.4vw, 104px);
  line-height: 0.86;
  word-break: normal;
  overflow-wrap: normal;
}
.contrast-work-page .cw-showroom-intro-copy p {
  max-width: 470px;
}
.contrast-work-page .cw-showroom-intro-media {
  min-height: 560px;
  background: var(--blanco);
}
.contrast-work-page .cw-showroom-intro-media img,
.contrast-work-page .cw-showroom-intro-media video {
  min-height: 560px;
  object-fit: cover;
  object-position: center;
}
/* La intro con video (figure.cw-intro-video): el alto de la caja lo marca el
   texto de al lado, asi que la proporcion cambia con el idioma y el ancho de
   ventana. El video se contiene entero sobre negro, su propio fondo, en vez
   de recortarse. Va despues de la regla de arriba a proposito. */
.contrast-work-page .cw-showroom-intro-media.cw-intro-video {
  background: #000;
}
.contrast-work-page .cw-showroom-intro-media.cw-intro-video video {
  object-fit: contain;
  background: #000;
}
.contrast-work-page .cw-showroom-viewer-section {
  padding: 0;
  background: var(--blanco);
}
.contrast-work-page .cw-showroom-viewer-head {
  padding: clamp(32px, 4vw, 52px);
  border-bottom: 2px solid var(--negro);
}
.contrast-work-page .cw-showroom-viewer-section .cw-eyebrow {
  margin-bottom: 18px;
}
.contrast-work-page .cw-showroom-viewer-section h4 {
  max-width: 900px;
}
.contrast-work-page .cw-showroom-viewer-text {
  max-width: 760px;
  margin-bottom: 0;
}
.contrast-work-page .cw-showroom-viewer-frame {
  width: 100%;
  height: min(86vh, 900px);
  min-height: 720px;
  border: 0;
  border-top: 0;
  background: var(--negro);
}
@media (max-width: 1024px) {
  .contrast-work-page .cw-modal.is-showroom-project .cw-modal-panel {
  width: calc(100vw - 32px);
  max-height: calc(100vh - 32px);
  }
  .contrast-work-page .cw-showroom-intro {
  grid-template-columns: 1fr;
  min-height: 0;
  }
  .contrast-work-page .cw-showroom-intro-media {
  border-left: 0;
  border-top: 2px solid var(--negro);
  min-height: 420px;
  }
  .contrast-work-page .cw-showroom-intro-media img {
  min-height: 420px;
  }
  .contrast-work-page .cw-showroom-viewer-frame {
  height: 82vh;
  min-height: 680px;
  }
}
@media (max-width: 767px) {
  .contrast-work-page .cw-modal.is-showroom-project {
  padding: 10px;
  }
  .contrast-work-page .cw-modal.is-showroom-project .cw-modal-panel {
  width: calc(100vw - 20px);
  max-height: calc(100dvh - 20px);
  }
  .contrast-work-page .cw-modal.is-showroom-project .cw-modal-close {
  top: 10px;
  right: 10px;
  margin: 0;
  background: var(--blanco);
  }
  .contrast-work-page .cw-showroom-intro-copy {
  padding: 34px 22px 38px;
  }
  .contrast-work-page .cw-showroom-intro-copy h3 {
  font-size: clamp(50px, 16vw, 76px);
  line-height: 0.86;
  }
  .contrast-work-page .cw-showroom-intro-copy p {
  font-size: 15px;
  }
  .contrast-work-page .cw-showroom-scroll-button {
  width: 100%;
  }
  .contrast-work-page .cw-showroom-intro-media,
  .contrast-work-page .cw-showroom-intro-media img {
  min-height: 300px;
  }
  .contrast-work-page .cw-showroom-viewer-head {
  padding: 28px 18px;
  }
  .contrast-work-page .cw-showroom-viewer-section h4 {
  font-size: clamp(48px, 15vw, 72px);
  }
  .contrast-work-page .cw-showroom-viewer-text {
  font-size: 15px;
  }
  .contrast-work-page .cw-showroom-viewer-frame {
  height: calc(100dvh - 20px);
  min-height: 620px;
  }
}
/* =========================
  SHOWROOM PROJECT — VISIBILITY + LAYOUT FIX
========================= */
.contrast-work-page [hidden] {
  display: none !important;
}
.contrast-work-page .cw-modal.is-showroom-project {
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow: hidden;
}
.contrast-work-page .cw-modal.is-showroom-project .cw-modal-backdrop {
  background: rgba(var(--papel-rgb), 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.contrast-work-page .cw-modal.is-showroom-project .cw-modal-panel {
  width: min(1180px, calc(100vw - 48px));
  max-height: calc(100dvh - 48px);
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--blanco);
}
.contrast-work-page .cw-modal.is-showroom-project .cw-modal-content {
  display: none !important;
}
.contrast-work-page .cw-modal.is-showroom-project .cw-showroom-project {
  display: block !important;
  width: 100%;
  background: var(--blanco);
}
.contrast-work-page .cw-modal.is-showroom-project .cw-modal-close {
  position: sticky;
  top: 20px;
  float: right;
  margin: 20px 20px -64px 0;
  background: var(--blanco);
}
.contrast-work-page .cw-showroom-intro {
  display: grid;
  grid-template-columns: minmax(0, 42%) minmax(0, 58%);
  min-height: min(700px, calc(100dvh - 80px));
  border-bottom: 2px solid var(--negro);
}
.contrast-work-page .cw-showroom-intro-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(34px, 5vw, 72px);
  background: var(--blanco);
}
.contrast-work-page .cw-showroom-intro-copy h3 {
  margin: 0 0 24px;
  color: var(--negro);
  font-family: "Sofia Sans Extra Condensed", "Arial Narrow", Arial, sans-serif;
  font-size: clamp(58px, 6.4vw, 104px);
  font-weight: 800;
  line-height: 0.86;
  letter-spacing: -0.038em;
  text-transform: uppercase;
}
.contrast-work-page .cw-showroom-intro-copy p {
  max-width: 470px;
  margin: 0 0 18px;
  color: rgba(var(--tinta-rgb), 0.68);
  font-size: 17px;
  line-height: 1.45;
  font-weight: 500;
}
.contrast-work-page .cw-showroom-scroll-button {
  margin-top: 22px;
}
.contrast-work-page .cw-showroom-intro-media {
  min-height: 560px;
  border-left: 2px solid var(--negro);
  overflow: hidden;
  background: var(--blanco);
}
.contrast-work-page .cw-showroom-intro-media img {
  width: 100%;
  height: 100%;
  min-height: 560px;
  display: block;
  object-fit: cover;
  object-position: center;
}
.contrast-work-page .cw-showroom-viewer-section {
  padding: 0;
  background: var(--blanco);
}
.contrast-work-page .cw-showroom-viewer-head {
  padding: clamp(32px, 4vw, 52px);
  border-bottom: 2px solid var(--negro);
}
.contrast-work-page .cw-showroom-viewer-section .cw-eyebrow {
  margin-bottom: 18px;
}
.contrast-work-page .cw-showroom-viewer-section h4 {
  max-width: 900px;
  margin: 0;
  color: var(--negro);
  font-family: "Sofia Sans Extra Condensed", "Arial Narrow", Arial, sans-serif;
  font-size: clamp(52px, 6vw, 96px);
  font-weight: 800;
  line-height: 0.88;
  letter-spacing: -0.035em;
  text-transform: uppercase;
}
.contrast-work-page .cw-showroom-viewer-text {
  max-width: 760px;
  margin: 22px 0 0;
  color: rgba(var(--tinta-rgb), 0.68);
  font-size: 17px;
  line-height: 1.45;
  font-weight: 500;
}
.contrast-work-page .cw-showroom-viewer-frame {
  position: relative;
  width: 100%;
  height: min(86dvh, 900px);
  min-height: 720px;
  border: 0;
  overflow: hidden;
  background: var(--negro);
}
@media (max-width: 1024px) {
  .contrast-work-page .cw-modal.is-showroom-project {
  padding: 16px;
  }
  .contrast-work-page .cw-modal.is-showroom-project .cw-modal-panel {
  width: calc(100vw - 32px);
  max-height: calc(100dvh - 32px);
  }
  .contrast-work-page .cw-showroom-intro {
  grid-template-columns: 1fr;
  min-height: 0;
  }
  .contrast-work-page .cw-showroom-intro-media {
  border-left: 0;
  border-top: 2px solid var(--negro);
  min-height: 420px;
  }
  .contrast-work-page .cw-showroom-intro-media img {
  min-height: 420px;
  }
  .contrast-work-page .cw-showroom-viewer-frame {
  height: 82dvh;
  min-height: 680px;
  }
}
@media (max-width: 767px) {
  .contrast-work-page .cw-modal.is-showroom-project {
  padding: 10px;
  }
  .contrast-work-page .cw-modal.is-showroom-project .cw-modal-panel {
  width: calc(100vw - 20px);
  max-height: calc(100dvh - 20px);
  }
  .contrast-work-page .cw-modal.is-showroom-project .cw-modal-close {
  top: 10px;
  right: 10px;
  margin: 0;
  background: var(--blanco);
  }
  .contrast-work-page .cw-showroom-intro-copy {
  padding: 34px 22px 38px;
  }
  .contrast-work-page .cw-showroom-intro-copy h3 {
  font-size: clamp(50px, 16vw, 76px);
  line-height: 0.86;
  }
  .contrast-work-page .cw-showroom-intro-copy p {
  font-size: 15px;
  }
  .contrast-work-page .cw-showroom-scroll-button {
  width: 100%;
  }
  .contrast-work-page .cw-showroom-intro-media,
  .contrast-work-page .cw-showroom-intro-media img {
  min-height: 300px;
  }
  .contrast-work-page .cw-showroom-viewer-head {
  padding: 28px 18px;
  }
  .contrast-work-page .cw-showroom-viewer-section h4 {
  font-size: clamp(48px, 15vw, 72px);
  }
  .contrast-work-page .cw-showroom-viewer-text {
  font-size: 15px;
  }
  .contrast-work-page .cw-showroom-viewer-frame {
  height: calc(100dvh - 20px);
  min-height: 640px;
  }
}
/* === Showroom viewer compact header + map sizing fix === */
.contrast-work-page .cw-showroom-viewer-head {
  padding: 22px clamp(22px, 3vw, 38px) !important;
  border-bottom: 2px solid var(--negro);
}
.contrast-work-page .cw-showroom-viewer-head .cw-eyebrow,
.contrast-work-page .cw-showroom-viewer-head h4 {
  display: none !important;
}
.contrast-work-page .cw-showroom-viewer-text {
  max-width: none !important;
  margin: 0 !important;
  color: rgba(var(--tinta-rgb), 0.68);
  font-size: clamp(15px, 1.2vw, 17px) !important;
  line-height: 1.35 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 767px) {
  .contrast-work-page .cw-showroom-viewer-head {
  padding: 16px 18px !important;
  }
  .contrast-work-page .cw-showroom-viewer-text {
  font-size: 14px !important;
  }
}
/* === Showroom case study context blocks — final spacing/content pass === */
.contrast-work-page .cw-showroom-process,
.contrast-work-page .cw-showroom-ar-section,
 .contrast-work-page .cw-showroom-delivery {
  display: grid;
  grid-template-columns: minmax(0, 44%) minmax(0, 1fr);
  column-gap: clamp(44px, 7vw, 112px);
  align-items: start;
  padding: clamp(34px, 5vw, 72px);
}
/* La caja "Open Primat app" del showroom: la trama de puntos del bloque
   Explore, a lo ancho del modal, con el boton en medio y nada mas. */
.contrast-work-page .cw-showroom-primat {
  padding: clamp(34px, 5vw, 72px);
}
.contrast-work-page .cw-primat-caja {
  aspect-ratio: 21 / 9;
  min-height: 260px;
  background: var(--blanco);
}
@media (max-width: 767px) {
  .contrast-work-page .cw-primat-caja { aspect-ratio: 4 / 3; }
}
.contrast-work-page .cw-showroom-delivery-title {
  min-width: 0;
}
.contrast-work-page .cw-showroom-delivery-title h4 {
  max-width: 560px;
}
.contrast-work-page .cw-showroom-delivery-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 34px;
  padding-top: 0;
  min-width: 0;
}
.contrast-work-page .cw-showroom-delivery-content p {
  width: min(100%, 640px);
  max-width: 640px;
}
.contrast-work-page .cw-showroom-delivery-content .cw-modal-button {
  width: fit-content;
  justify-self: start;
  align-self: flex-start;
  white-space: nowrap;
}
.contrast-work-page .cw-showroom-viewer-section {
  padding: clamp(38px, 5vw, 72px) 0 0 !important;
  background: var(--blanco);
}
.contrast-work-page .cw-showroom-viewer-head,
.contrast-work-page .cw-showroom-viewer-text {
  display: none !important;
}
.contrast-work-page .cw-showroom-viewer-frame {
  border-top: 2px solid var(--negro) !important;
}
@media (max-width: 1024px) {
  .contrast-work-page .cw-showroom-process,
  .contrast-work-page .cw-showroom-ar-section,
  .contrast-work-page .cw-showroom-delivery {
  grid-template-columns: 1fr;
  }
  .contrast-work-page .cw-showroom-process-block + .cw-showroom-process-block,
  .contrast-work-page .cw-showroom-ar-visual {
  border-left: 0;
  border-right: 0;
  border-top: 2px solid var(--negro);
  }
  .contrast-work-page .cw-showroom-ar-visual {
  order: 2;
  }
  .contrast-work-page .cw-showroom-ar-copy {
  order: 1;
  }
  .contrast-work-page .cw-showroom-delivery-title,
  .contrast-work-page .cw-showroom-delivery-content {
  grid-column: 1;
  }
  .contrast-work-page .cw-showroom-delivery-content {
  gap: 24px;
  }
  .contrast-work-page .cw-showroom-delivery-content .cw-modal-button {
  width: fit-content;
  }
}
@media (max-width: 767px) {
  .contrast-work-page .cw-showroom-process-block,
  .contrast-work-page .cw-showroom-ar-copy,
  .contrast-work-page .cw-showroom-ar-visual,
  .contrast-work-page .cw-showroom-delivery {
  padding: 28px 20px;
  }
  .contrast-work-page .cw-showroom-process h4,
  .contrast-work-page .cw-showroom-ar-copy h4,
  .contrast-work-page .cw-showroom-delivery h4 {
  font-size: clamp(44px, 15vw, 66px);
  }
  .contrast-work-page .cw-showroom-process p,
  .contrast-work-page .cw-showroom-ar-copy p,
  .contrast-work-page .cw-showroom-delivery p {
  font-size: 15px;
  }
  .contrast-work-page .cw-showroom-ar-card {
  width: 100%;
  aspect-ratio: 1.2 / 1;
  min-height: 260px;
  }
  .contrast-work-page .cw-showroom-delivery-content .cw-modal-button {
  width: 100%;
  }
  .contrast-work-page .cw-showroom-viewer-section {
  padding-top: 34px !important;
  }
  .contrast-work-page .cw-showroom-viewer-frame {
  height: calc(100dvh - 20px) !important;
  min-height: 620px !important;
  }
}
/* === AR product model preview — Yang chair GLB === */
.contrast-work-page .cw-showroom-ar-model {
  position: relative;
  width: min(100%, 420px);
  aspect-ratio: 1 / 1;
  border: 2px solid var(--negro);
  background: var(--blanco);
  overflow: hidden;
}
.contrast-work-page .cw-showroom-ar-canvas {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--blanco);
  outline: none;
  /* pan-y, no none: el visor gira en horizontal y la ficha se sigue
     desplazando con el dedo (auditoria 08-10-2026, area 5, P0) */
  touch-action: pan-y;
}
.contrast-work-page .cw-showroom-ar-model.is-loading::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 34px;
  height: 34px;
  border: 2px solid var(--negro);
  border-top-color: #00FFE0;
  transform: translate(-50%, -50%);
  animation: cwArModelSpin 0.85s linear infinite;
  pointer-events: none;
}
.contrast-work-page .cw-showroom-ar-model.is-ready::before,
.contrast-work-page .cw-showroom-ar-model.is-error::before {
  display: none;
}
/* La flecha del carrusel de modelos Primat, sobre el visor de la silla.
   Solo se pinta cuando hay mas de un modelo (el JS le quita el hidden). El
   circulo es el mismo lenguaje que el boton de la bombilla de la ficha de
   servicios: borde negro, fondo blanco, se invierte al pasar por encima. */
.contrast-work-page .cw-primat-flecha {
  position: absolute;
  right: 14px;
  top: 50%;
  width: 44px;
  height: 44px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 2px solid var(--negro);
  border-radius: 50%;
  background: var(--blanco);
  color: var(--negro);
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
  z-index: 2;
}
.contrast-work-page .cw-primat-flecha svg { width: 20px; height: 20px; }
.contrast-work-page .cw-primat-flecha:hover { background: var(--negro); color: var(--blanco); }
.contrast-work-page .cw-primat-flecha:focus-visible { background: var(--negro); color: var(--blanco); }
.contrast-work-page .cw-primat-flecha:focus-visible { outline: 2px solid #00FFE0; outline-offset: 2px; }
.contrast-work-page .cw-primat-flecha[hidden] { display: none; }
/* Texto solo para lectores de pantalla: el aviso "2 / 3 - nombre" del
   carrusel. Fuera de la vista, dentro del arbol de accesibilidad. */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@keyframes cwArModelSpin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}
@media (max-width: 1024px) {
  .contrast-work-page .cw-showroom-ar-model {
  width: min(100%, 520px);
  aspect-ratio: 1.35 / 1;
  }
}
@media (max-width: 767px) {
  .contrast-work-page .cw-showroom-ar-model {
  width: 100%;
  aspect-ratio: 1.1 / 1;
  min-height: 280px;
  }
}
/* === Collaboration block correction — restore title + right-column layout === */
.contrast-work-page .cw-showroom-delivery {
  display: grid !important;
  grid-template-columns: minmax(0, 44%) minmax(0, 56%) !important;
  column-gap: clamp(56px, 7vw, 118px) !important;
  align-items: start !important;
  width: 100% !important;
  padding: clamp(44px, 5vw, 76px) clamp(44px, 5vw, 72px) !important;
  overflow: visible !important;
}
.contrast-work-page .cw-showroom-delivery-title,
.contrast-work-page .cw-showroom-delivery-content {
  min-width: 0 !important;
  max-width: none !important;
  transform: none !important;
}
.contrast-work-page .cw-showroom-delivery-title h4 {
  display: block !important;
  width: 100% !important;
  max-width: 620px !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--negro) !important;
  font-family: "Sofia Sans Extra Condensed", "Arial Narrow", Arial, sans-serif !important;
  font-size: clamp(68px, 6.4vw, 108px) !important;
  font-weight: 800 !important;
  line-height: 0.86 !important;
  letter-spacing: -0.04em !important;
  text-transform: uppercase !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
}
.contrast-work-page .cw-showroom-delivery-content {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: clamp(34px, 4vw, 54px) !important;
  padding-top: 0 !important;
}
.contrast-work-page .cw-showroom-delivery-content p {
  width: 100% !important;
  max-width: 640px !important;
  margin: 0 !important;
  color: rgba(var(--tinta-rgb), 0.68) !important;
  font-size: 17px !important;
  line-height: 1.55 !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
}
.contrast-work-page .cw-showroom-delivery-content .cw-modal-button {
  align-self: flex-start !important;
  justify-self: start !important;
  margin: 0 !important;
  width: fit-content !important;
  white-space: nowrap !important;
}
@media (max-width: 1024px) {
  .contrast-work-page .cw-showroom-delivery {
  grid-template-columns: 1fr !important;
  row-gap: 34px !important;
  }
  .contrast-work-page .cw-showroom-delivery-title h4 {
  max-width: 780px !important;
  }
}
@media (max-width: 767px) {
  .contrast-work-page .cw-showroom-delivery {
  padding: 34px 20px !important;
  row-gap: 28px !important;
  }
  .contrast-work-page .cw-showroom-delivery-title h4 {
  font-size: clamp(54px, 16vw, 76px) !important;
  line-height: 0.88 !important;
  }
  .contrast-work-page .cw-showroom-delivery-content p {
  font-size: 15px !important;
  line-height: 1.48 !important;
  }
  .contrast-work-page .cw-showroom-delivery-content .cw-modal-button {
  width: 100% !important;
  }
}
/* === FINAL SHOWROOM TYPOGRAPHY BALANCE PATCH ===
  Purpose: normalize the case-study title scale after previous layout overrides.
  Keep title hierarchy: intro = hero, process/AR = compact section titles,
  collaboration = large but controlled editorial title.
*/
.contrast-work-page .cw-showroom-intro-copy h3 {
  display: block !important;
  margin: 0 0 28px !important;
  color: var(--negro) !important;
  font-family: "Sofia Sans Extra Condensed", "Arial Narrow", Arial, sans-serif !important;
  font-size: clamp(58px, 7.2vw, 112px) !important;
  font-weight: 800 !important;
  line-height: 0.86 !important;
  letter-spacing: -0.04em !important;
  text-transform: uppercase !important;
}
.contrast-work-page .cw-showroom-process-block h4,
.contrast-work-page .cw-showroom-ar-copy h4 {
  display: block !important;
  margin: 0 0 28px !important;
  max-width: 620px !important;
  color: var(--negro) !important;
  font-family: "Sofia Sans", Arial, Helvetica, sans-serif !important;
  font-size: clamp(20px, 1.6vw, 26px) !important;
  font-weight: 700 !important;
  line-height: 1.24 !important;
  letter-spacing: -0.02em !important;
  text-transform: none !important;
}
.contrast-work-page .cw-showroom-process-block p,
.contrast-work-page .cw-showroom-ar-copy p {
  max-width: 640px !important;
  margin: 0 !important;
  color: rgba(var(--tinta-rgb), 0.68) !important;
  font-size: clamp(15px, 1.1vw, 17px) !important;
  line-height: 1.58 !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
}
.contrast-work-page .cw-showroom-process {
  align-items: start !important;
}
.contrast-work-page .cw-showroom-process-block,
.contrast-work-page .cw-showroom-ar-copy {
  min-width: 0 !important;
}
.contrast-work-page .cw-showroom-delivery {
  display: grid !important;
  grid-template-columns: minmax(0, 46%) minmax(0, 54%) !important;
  column-gap: clamp(44px, 6vw, 96px) !important;
  align-items: start !important;
  padding: clamp(48px, 5.5vw, 82px) clamp(44px, 5vw, 72px) !important;
}
.contrast-work-page .cw-showroom-delivery-title h4 {
  display: block !important;
  margin: 0 !important;
  max-width: 560px !important;
  color: var(--negro) !important;
  font-family: "Sofia Sans Extra Condensed", "Arial Narrow", Arial, sans-serif !important;
  font-size: clamp(56px, 4.9vw, 82px) !important;
  font-weight: 800 !important;
  line-height: 0.88 !important;
  letter-spacing: -0.038em !important;
  text-transform: uppercase !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
}
.contrast-work-page .cw-showroom-delivery-content {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 34px !important;
  padding-top: 0 !important;
  min-width: 0 !important;
}
.contrast-work-page .cw-showroom-delivery-content p {
  width: 100% !important;
  max-width: 620px !important;
  margin: 0 !important;
  color: rgba(var(--tinta-rgb), 0.68) !important;
  font-size: clamp(15px, 1.15vw, 17px) !important;
  line-height: 1.55 !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
}
.contrast-work-page .cw-showroom-delivery-content .cw-modal-button {
  align-self: flex-start !important;
  width: fit-content !important;
  max-width: 100% !important;
  margin: 0 !important;
  white-space: nowrap !important;
}
@media (max-width: 1024px) {
  .contrast-work-page .cw-showroom-intro-copy h3 {
  font-size: clamp(54px, 11vw, 92px) !important;
  }
  .contrast-work-page .cw-showroom-delivery {
  grid-template-columns: 1fr !important;
  row-gap: 34px !important;
  }
  .contrast-work-page .cw-showroom-delivery-title h4 {
  max-width: 760px !important;
  font-size: clamp(54px, 9vw, 86px) !important;
  }
}
@media (max-width: 767px) {
  .contrast-work-page .cw-showroom-intro-copy h3 {
  font-size: clamp(50px, 16vw, 76px) !important;
  }
  .contrast-work-page .cw-showroom-process-block h4,
  .contrast-work-page .cw-showroom-ar-copy h4 {
  font-size: 22px !important;
  line-height: 1.22 !important;
  }
  .contrast-work-page .cw-showroom-process-block p,
  .contrast-work-page .cw-showroom-ar-copy p,
  .contrast-work-page .cw-showroom-delivery-content p {
  font-size: 15px !important;
  line-height: 1.5 !important;
  }
  .contrast-work-page .cw-showroom-delivery {
  padding: 34px 20px !important;
  row-gap: 28px !important;
  }
  .contrast-work-page .cw-showroom-delivery-title h4 {
  font-size: clamp(50px, 15vw, 72px) !important;
  line-height: 0.88 !important;
  max-width: 100% !important;
  }
  .contrast-work-page .cw-showroom-delivery-content .cw-modal-button {
  width: 100% !important;
  white-space: normal !important;
  }
}
/* =========================================================
  CLEAN SHOWROOM CASE STUDY OVERRIDE
  Scoped final reset for the Primat showroom modal only.
  Keeps the main Work grid and the embedded 360 viewer intact.
========================================================= */
.contrast-work-page .cw-modal.is-showroom-project .cw-modal-panel {
  width: min(1180px, calc(100vw - 48px));
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: var(--blanco);
  border: 2px solid var(--negro);
}
.contrast-work-page .cw-modal.is-showroom-project .cw-modal-content {
  display: block;
  min-height: 0;
}
.contrast-work-page .cw-modal.is-showroom-project #cwModalStandardContent {
  display: none !important;
}
.contrast-work-page .cw-modal.is-showroom-project .cw-showroom-project {
  display: block;
  width: 100%;
  padding: clamp(42px, 5vw, 72px);
  background: var(--blanco);
  color: var(--negro);
}
.contrast-work-page .cw-showroom-project[hidden] {
  display: none !important;
}
.contrast-work-page .cw-showroom-project figure {
  margin: 0;
}
.contrast-work-page .cw-showroom-project img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.contrast-work-page .cw-showroom-intro,
.contrast-work-page .cw-showroom-process,
.contrast-work-page .cw-showroom-ar-section,
.contrast-work-page .cw-showroom-delivery {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: clamp(34px, 5vw, 72px) !important;
  align-items: stretch !important;
  width: 100% !important;
  margin: 0 !important;
  padding: clamp(44px, 6vw, 84px) 0 !important;
  border: 0 !important;
  background: transparent !important;
}
.contrast-work-page .cw-showroom-intro {
  padding-top: 0 !important;
}
.contrast-work-page .cw-showroom-viewer-section {
  width: 100% !important;
  margin: 0 !important;
  padding: clamp(54px, 7vw, 92px) 0 0 !important;
  border: 0 !important;
  background: transparent !important;
}
.contrast-work-page .cw-showroom-intro-copy,
.contrast-work-page .cw-showroom-process-block,
.contrast-work-page .cw-showroom-ar-copy,
.contrast-work-page .cw-showroom-delivery-title,
.contrast-work-page .cw-showroom-delivery-content {
  min-width: 0 !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  overflow: visible !important;
}
.contrast-work-page .cw-showroom-intro-copy,
.contrast-work-page .cw-showroom-delivery-content {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
}
.contrast-work-page .cw-showroom-intro-copy h3 {
  max-width: 520px !important;
  margin: 0 0 28px !important;
  color: var(--negro) !important;
  font-family: "Sofia Sans Extra Condensed", "Arial Narrow", Arial, sans-serif !important;
  font-size: clamp(64px, 7.4vw, 112px) !important;
  font-weight: 800 !important;
  line-height: 0.86 !important;
  letter-spacing: -0.038em !important;
  text-transform: uppercase !important;
}
.contrast-work-page .cw-showroom-delivery-title h4 {
  max-width: 520px !important;
  margin: 0 !important;
  color: var(--negro) !important;
  font-family: "Sofia Sans Extra Condensed", "Arial Narrow", Arial, sans-serif !important;
  font-size: clamp(54px, 5.8vw, 86px) !important;
  font-weight: 800 !important;
  line-height: 0.88 !important;
  letter-spacing: -0.036em !important;
  text-transform: uppercase !important;
}
.contrast-work-page .cw-showroom-process-block h4,
.contrast-work-page .cw-showroom-ar-copy h4 {
  max-width: 470px !important;
  margin: 0 0 18px !important;
  color: var(--negro) !important;
  font-family: "Sofia Sans Extra Condensed", "Arial Narrow", Arial, sans-serif !important;
  font-size: clamp(42px, 4.3vw, 64px) !important;
  font-weight: 800 !important;
  line-height: 0.9 !important;
  letter-spacing: -0.032em !important;
  text-transform: uppercase !important;
}
.contrast-work-page .cw-showroom-intro-copy p,
.contrast-work-page .cw-showroom-process-block p,
.contrast-work-page .cw-showroom-ar-copy p,
.contrast-work-page .cw-showroom-delivery-content p {
  max-width: 520px !important;
  margin: 0 0 18px !important;
  color: rgba(var(--tinta-rgb), 0.68) !important;
  font-family: "Sofia Sans", Arial, Helvetica, sans-serif !important;
  font-size: clamp(16px, 1.25vw, 18px) !important;
  font-weight: 500 !important;
  line-height: 1.48 !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
}
.contrast-work-page .cw-showroom-intro-media,
.contrast-work-page .cw-showroom-card-media,
.contrast-work-page .cw-showroom-ar-model {
  position: relative !important;
  width: 100% !important;
  min-height: 320px !important;
  border: 2px solid var(--negro) !important;
  background: var(--blanco) !important;
  overflow: hidden !important;
}
.contrast-work-page .cw-showroom-intro-media {
  min-height: clamp(420px, 42vw, 620px) !important;
}
.contrast-work-page .cw-showroom-card-media {
  aspect-ratio: 16 / 10 !important;
  min-height: 0 !important;
  margin-bottom: 26px !important;
}
/* Comparador antes / despues (bloque de proceso). Las dos capas ocupan todo
   el marco; la de despues se recorta con clip-path hasta --p, que mueve el
   JS al arrastrar o el range con teclado. */
.contrast-work-page .cw-comparar {
  cursor: ew-resize;
  user-select: none;
  touch-action: pan-y;
}
.contrast-work-page .cw-comparar .cw-comparar-capa {
  position: absolute;
  inset: 0;
}
.contrast-work-page .cw-comparar .cw-comparar-capa img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.contrast-work-page .cw-comparar .cw-comparar-despues {
  clip-path: inset(0 0 0 var(--p));
}
.contrast-work-page .cw-comparar .cw-comparar-linea {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--p);
  width: 2px;
  margin-left: -1px;
  background: var(--cian);
  pointer-events: none;
}
.contrast-work-page .cw-comparar .cw-comparar-asa {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border-radius: 50%;
  background: var(--cian);
  box-shadow: 0 0 0 2px #000;
}
.contrast-work-page .cw-comparar .cw-comparar-asa::before,
.contrast-work-page .cw-comparar .cw-comparar-asa::after {
  content: "";
  position: absolute;
  top: 11px;
  width: 0;
  height: 0;
  border: 6px solid transparent;
}
.contrast-work-page .cw-comparar .cw-comparar-asa::before { left: 3px; border-right-color: #000; }
.contrast-work-page .cw-comparar .cw-comparar-asa::after { right: 3px; border-left-color: #000; }
.contrast-work-page .cw-comparar .cw-comparar-eti {
  position: absolute;
  bottom: 12px;
  padding: 6px 10px;
  font: 700 11px/1 "Sofia Sans", sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(0, 0, 0, 0.72);
  border-left: 3px solid var(--cian);
  pointer-events: none;
}
.contrast-work-page .cw-comparar .cw-comparar-eti-a { left: 12px; }
.contrast-work-page .cw-comparar .cw-comparar-eti-b { right: 12px; }
.contrast-work-page .cw-comparar .cw-comparar-rango {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
}
.contrast-work-page .cw-comparar:focus-within .cw-comparar-linea {
  box-shadow: 0 0 0 2px #fff;
}
.contrast-work-page .cw-comparar .cw-comparar-rango:focus-visible ~ .cw-comparar-linea {
  box-shadow: 0 0 0 2px #fff;
}
.contrast-work-page .cw-showroom-process-block {
  display: flex !important;
  flex-direction: column !important;
}
.contrast-work-page .cw-showroom-ar-visual {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}
.contrast-work-page .cw-showroom-ar-model {
  aspect-ratio: 1 / 1 !important;
  min-height: 460px !important;
}
.contrast-work-page .cw-showroom-ar-canvas {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}
.contrast-work-page .cw-showroom-ar-copy {
  display: grid !important;
  grid-template-rows: auto 1fr !important;
  align-content: start !important;
}
.contrast-work-page .cw-showroom-delivery-content .cw-modal-button,
.contrast-work-page .cw-showroom-scroll-button {
  margin-top: 14px !important;
  align-self: flex-start !important;
  flex: 0 0 auto !important;
}
.contrast-work-page .cw-showroom-delivery-content .cw-showroom-card-media {
  width: 100% !important;
  margin-top: 34px !important;
  margin-bottom: 0 !important;
}
.contrast-work-page .cw-showroom-viewer-frame {
  position: relative !important;
  width: 100% !important;
  height: min(76vh, 760px) !important;
  min-height: 560px !important;
  margin: 0 !important;
  border: 2px solid var(--negro) !important;
  background: var(--negro) !important;
  overflow: hidden !important;
}
@media (max-width: 1024px) {
  .contrast-work-page .cw-modal.is-showroom-project .cw-showroom-project {
  padding: 42px 32px !important;
  }
  .contrast-work-page .cw-showroom-intro,
  .contrast-work-page .cw-showroom-process,
  .contrast-work-page .cw-showroom-ar-section,
  .contrast-work-page .cw-showroom-delivery {
  grid-template-columns: 1fr !important;
  gap: 34px !important;
  }
  .contrast-work-page .cw-showroom-intro-media {
  min-height: 420px !important;
  }
  .contrast-work-page .cw-showroom-ar-model {
  min-height: 420px !important;
  }
}
@media (max-width: 767px) {
  .contrast-work-page .cw-modal.is-showroom-project .cw-modal-panel {
  width: calc(100vw - 28px) !important;
  max-height: calc(100vh - 28px) !important;
  }
  .contrast-work-page .cw-modal.is-showroom-project .cw-showroom-project {
  padding: 34px 20px !important;
  }
  .contrast-work-page .cw-showroom-intro,
  .contrast-work-page .cw-showroom-process,
  .contrast-work-page .cw-showroom-ar-section,
  .contrast-work-page .cw-showroom-delivery {
  padding: 44px 0 !important;
  }
  .contrast-work-page .cw-showroom-intro {
  padding-top: 0 !important;
  }
  .contrast-work-page .cw-showroom-intro-copy h3 {
  font-size: clamp(56px, 16vw, 82px) !important;
  }
  .contrast-work-page .cw-showroom-delivery-title h4 {
  font-size: clamp(52px, 15vw, 78px) !important;
  }
  .contrast-work-page .cw-showroom-process-block h4,
  .contrast-work-page .cw-showroom-ar-copy h4 {
  font-size: clamp(40px, 12vw, 58px) !important;
  }
  .contrast-work-page .cw-showroom-intro-media,
  .contrast-work-page .cw-showroom-card-media,
  .contrast-work-page .cw-showroom-ar-model {
  min-height: 300px !important;
  }
  .contrast-work-page .cw-showroom-ar-model {
  min-height: 360px !important;
  }
  .contrast-work-page .cw-showroom-viewer-frame {
  height: 78vh !important;
  min-height: 560px !important;
  }
}
/* === Collaboration final alignment: no image, clean right column === */
.contrast-work-page .cw-showroom-delivery {
  align-items: start !important;
}
.contrast-work-page .cw-showroom-delivery-content {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 34px !important;
  padding-top: 0 !important;
}
.contrast-work-page .cw-showroom-delivery-content p {
  max-width: 560px !important;
  margin: 0 !important;
}
.contrast-work-page .cw-showroom-delivery-content .cw-modal-button {
  margin: 0 !important;
}
.contrast-work-page .cw-showroom-delivery-content .cw-showroom-card-media {
  display: none !important;
}
@media (max-width: 1024px) {
  .contrast-work-page .cw-showroom-delivery-content {
  gap: 28px !important;
  }
}
/* =========================
  GENERIC CASE STUDY TEMPLATE — CLEAN REUSABLE LAYOUT
========================= */
.contrast-work-page #cwShowroomProject[hidden],
.contrast-work-page #cwGenericProject[hidden],
.contrast-work-page .cw-showroom-project[hidden],
.contrast-work-page .cw-generic-project[hidden] {
  display: none !important;
}
.contrast-work-page .cw-generic-intro-media {
  position: relative;
  background: var(--blanco);
}
.contrast-work-page .cw-generic-intro-media img,
.contrast-work-page .cw-generic-intro-media video {
  width: 100%;
  height: 100%;
  min-height: 560px;
  display: block;
  object-fit: cover;
  background: var(--negro);
}
.contrast-work-page .cw-generic-intro-media img[hidden],
.contrast-work-page .cw-generic-intro-media video[hidden] {
  display: none !important;
}
.contrast-work-page .cw-generic-model-frame {
  display: grid;
  place-items: center;
  min-height: 440px;
  border: 2px solid var(--negro);
  background: var(--blanco);
  overflow: hidden;
}
.contrast-work-page .cw-generic-model-viewer,
.contrast-work-page .cw-generic-large-model-viewer {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 440px;
  background: var(--blanco);
}
.contrast-work-page .cw-generic-viewer-frame {
  height: min(78dvh, 820px) !important;
  min-height: 620px !important;
  border-top: 2px solid var(--negro) !important;
  background: var(--blanco) !important;
}
.contrast-work-page .cw-generic-viewer-frame .cw-generic-large-model-viewer {
  min-height: 620px;
}
@media (max-width: 1024px) {
  .contrast-work-page .cw-generic-intro-media img,
  .contrast-work-page .cw-generic-intro-media video {
  min-height: 420px;
  }
  .contrast-work-page .cw-generic-model-frame,
  .contrast-work-page .cw-generic-model-viewer {
  min-height: 360px;
  }
}
@media (max-width: 767px) {
  .contrast-work-page .cw-generic-intro-media img,
  .contrast-work-page .cw-generic-intro-media video {
  min-height: 300px;
  }
  .contrast-work-page .cw-generic-model-frame,
  .contrast-work-page .cw-generic-model-viewer {
  min-height: 300px;
  }
  .contrast-work-page .cw-generic-viewer-frame {
  height: calc(100dvh - 20px) !important;
  min-height: 520px !important;
  }
  .contrast-work-page .cw-generic-viewer-frame .cw-generic-large-model-viewer {
  min-height: 520px;
  }
}
/* =========================
  BESPOKE DENIM PROJECT (Jack & Jones)
  Reuses .cw-showroom-* layout system (intro / process / delivery) so it
  matches the WEB Showroom case study 1:1. New .cw-denim-* blocks below
  add the pieces the showroom template doesn't have: hero video, render
  grids and the CLO3D/Blender/Photoshop pipeline grid.
========================= */
/* Hero video fills the split intro media cell (same frame as showroom intro img) */
.contrast-work-page .cw-denim-hero-media {
  display: block;
  position: relative;
  overflow: hidden;
}
.contrast-work-page .cw-denim-hero-media .cw-denim-hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  background: var(--negro);
}
/* Generic denim section block — same vertical rhythm as showroom sections */
.contrast-work-page .cw-denim-block {
  width: 100%;
  margin: 0;
  padding: clamp(44px, 6vw, 84px) 0;
  border: 0;
  background: transparent;
}
.contrast-work-page .cw-denim-head {
  margin-bottom: clamp(26px, 3vw, 40px);
}
.contrast-work-page .cw-denim-title {
  max-width: 760px;
  margin: 0;
  color: var(--negro);
  font-family: "Sofia Sans Extra Condensed", "Arial Narrow", Arial, sans-serif;
  font-size: clamp(42px, 4.3vw, 64px);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.032em;
  text-transform: uppercase;
}
.contrast-work-page .cw-denim-text {
  max-width: 620px;
  margin: 18px 0 0;
  color: rgba(var(--tinta-rgb), 0.68);
  font-size: clamp(16px, 1.25vw, 18px);
  line-height: 1.55;
  font-weight: 500;
  letter-spacing: -0.01em;
}
/* Grids */
.contrast-work-page .cw-denim-grid {
  display: grid;
  gap: clamp(16px, 1.8vw, 26px);
}
.contrast-work-page .cw-denim-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.contrast-work-page .cw-denim-grid-6 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
/* Render tiles (product samples + possibilities) */
.contrast-work-page .cw-denim-shot {
  margin: 0;
  border: 2px solid var(--negro);
  background: var(--blanco);
  aspect-ratio: 4 / 5;
  overflow: hidden;
}
.contrast-work-page .cw-denim-shot img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
/* Pipeline tool cards (CLO3D / Blender / Photoshop) */
.contrast-work-page .cw-denim-tool {
  margin: 0;
  display: flex;
  flex-direction: column;
  border: 2px solid var(--negro);
  background: var(--blanco);
  overflow: hidden;
}
.contrast-work-page .cw-denim-tool-media {
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--negro);
  border-bottom: 2px solid var(--negro);
}
.contrast-work-page .cw-denim-tool-media video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  background: var(--negro);
}
.contrast-work-page .cw-denim-tool-copy {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: clamp(16px, 1.6vw, 22px);
}
.contrast-work-page .cw-denim-tool-label {
  color: var(--negro);
  font-family: "Sofia Sans Extra Condensed", "Arial Narrow", Arial, sans-serif;
  font-size: clamp(24px, 2.1vw, 32px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.contrast-work-page .cw-denim-tool-text {
  color: rgba(var(--tinta-rgb), 0.68);
  font-size: 14px;
  line-height: 1.4;
  font-weight: 500;
}
/* GLB viewer frame (mirrors generic large viewer) */
.contrast-work-page .cw-denim-viewer-frame {
  position: relative;
  width: 100%;
  height: min(72vh, 760px);
  min-height: 560px;
  border: 2px solid var(--negro);
  background: var(--blanco);
  overflow: hidden;
}
.contrast-work-page .cw-denim-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  background: var(--blanco);
  outline: none;
  touch-action: pan-y; /* idem: la ficha del vaquero se desplaza con el dedo */
}
@media (max-width: 1024px) {
  .contrast-work-page .cw-denim-grid-3,
  .contrast-work-page .cw-denim-grid-6 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .contrast-work-page .cw-denim-viewer-frame {
  height: 64vh;
  min-height: 480px;
  }
}
@media (max-width: 767px) {
  .contrast-work-page .cw-denim-grid-3,
  .contrast-work-page .cw-denim-grid-6 {
  grid-template-columns: 1fr;
  }
  .contrast-work-page .cw-denim-title {
  font-size: clamp(40px, 12vw, 58px);
  }
  .contrast-work-page .cw-denim-shot {
  aspect-ratio: 4 / 5;
  }
  .contrast-work-page .cw-denim-viewer-frame {
  height: calc(100dvh - 20px);
  min-height: 520px;
  }
}
/* =========================
  FIX — case-study isolation (no mixed/stacked blocks)
  All case-study blocks share `.cw-showroom-project`. When the modal is open
  (`.is-showroom-project`) a `display:block` override applied to every such block;
  #cwShowroomProject / #cwGenericProject had id-level `[hidden]` rules to stay
  hidden, but the denim & runway blocks did not, so their hidden content stacked
  under the active one. This (0,4,0) rule guarantees any hidden block is removed.
========================= */
.contrast-work-page .cw-modal .cw-showroom-project[hidden] {
  display: none !important;
}
/* =========================
  MOBILE — hide hero filter tags (CGI / AR / Interactive / AI) + detail panel
========================= */
@media (max-width: 767px) {
  .contrast-work-page .cw-hero-tags,
  .contrast-work-page .cw-tag-detail {
  display: none !important;
  }
}

/* ============================================================
   BLOG  (.blg-*)
   Anadido el 01-09-2026. Paginas de texto, sin heroe y sin
   adornos: lo que tiene que funcionar aqui es la lectura.
   Las piezas del sistema (kicker, masc/linea, cae, apar, svc-btn)
   se reutilizan tal cual.
   ============================================================ */
.blg-inner { width: min(var(--contenedor), calc(100% - 2 * clamp(20px, 5vw, 64px))); margin: 0 auto; }
.blg-cabeza { padding: clamp(48px, 7vw, 96px) 0 clamp(24px, 3vw, 40px); }
.blg-articulo { padding: clamp(40px, 6vw, 80px) 0 clamp(56px, 7vw, 96px); }
/* La columna de lectura es mas estrecha que el contenedor: una linea de
   1180 px de ancho no se lee, se escanea. */
.blg-articulo .blg-inner { max-width: 720px; }

.blg-migas { margin: 0 0 clamp(20px, 3vw, 32px); font-size: 11px; font-weight: 900;
  letter-spacing: .14em; text-transform: uppercase; }
.blg-migas a { color: var(--negro); text-decoration: none; border-bottom: 2px solid var(--negro); }
.blg-migas a:hover { color: var(--morado); border-color: var(--morado); }

.blg-h1 { margin: 0 0 clamp(16px, 2vw, 24px); font-size: clamp(30px, 4.4vw, 52px);
  font-weight: 900; line-height: 1.04; letter-spacing: -.02em; }
.blg-entradilla { margin: 0 0 18px; font-size: clamp(17px, 1.4vw, 20px);
  font-weight: 500; line-height: 1.5; letter-spacing: -.01em; color: var(--gris-texto); }
.blg-fecha { margin: 0 0 clamp(28px, 4vw, 44px); font-size: 11px; font-weight: 900;
  letter-spacing: .14em; text-transform: uppercase; color: var(--gris-76); }

.blg-cuerpo p { margin: 0 0 20px; font-size: clamp(16px, 1.15vw, 17px);
  font-weight: 500; line-height: 1.68; letter-spacing: -.005em; }
.blg-cuerpo h2 { margin: clamp(36px, 4.4vw, 52px) 0 16px; font-size: clamp(21px, 2vw, 27px);
  font-weight: 900; line-height: 1.15; letter-spacing: -.015em; }
.blg-cuerpo h3 { margin: clamp(26px, 3vw, 34px) 0 12px; font-size: clamp(16px, 1.3vw, 18px);
  font-weight: 900; letter-spacing: -.01em; }
.blg-cuerpo a { color: var(--negro); text-decoration: none; border-bottom: 1px solid var(--negro); }
.blg-cuerpo a:hover { color: var(--morado); border-color: var(--morado); }
/* Un identificador largo sin espacios (los nombres de clase de Unreal, por
   ejemplo) no tiene por donde partirse y empujaba la pagina entera a lo
   ancho en movil: se le deja partir donde haga falta. */
.blg-cuerpo code { padding: 1px 5px; background: var(--gris-f1); border: 1px solid var(--gris-e0);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .88em;
  overflow-wrap: anywhere; }
.blg-lista { margin: 0 0 20px; padding-left: 20px; }
.blg-lista li { margin-bottom: 9px; font-size: clamp(16px, 1.15vw, 17px);
  font-weight: 500; line-height: 1.6; }
/* Las citas son palabras de otro. Se marcan con la barra y en cursiva para
   que no puedan confundirse con lo que decimos nosotros. */
.blg-cuerpo blockquote { margin: 0 0 22px; padding: 4px 0 4px 20px;
  border-left: 3px solid var(--negro); }
.blg-cuerpo blockquote p { margin: 0; font-style: italic; font-size: clamp(15px, 1.1vw, 16.5px);
  line-height: 1.55; }
.blg-tabla { margin: 0 0 24px; overflow-x: auto; border: 2px solid var(--negro); }
.blg-tabla table { width: 100%; border-collapse: collapse; }
.blg-tabla th, .blg-tabla td { padding: 9px 12px; text-align: left;
  border-bottom: 1px solid var(--gris-e2); font-size: 14px; line-height: 1.4; }
.blg-tabla th { font-weight: 900; font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; background: var(--gris-f6); }
.blg-tabla tr:last-child td { border-bottom: 0; }

.blg-fuentes { margin-top: clamp(40px, 5vw, 60px); padding-top: clamp(24px, 3vw, 32px);
  border-top: 2px solid var(--negro); }
.blg-fuentes h2 { margin: 0 0 14px; font-size: 11px; font-weight: 900;
  letter-spacing: .16em; text-transform: uppercase; }
.blg-fuentes ul { margin: 0 0 14px; padding-left: 18px; }
.blg-fuentes li, .blg-fuentes p { font-size: 13px; font-weight: 500; line-height: 1.55;
  margin-bottom: 7px; color: var(--gris-texto); word-break: break-word; }
.blg-fuentes a { color: var(--gris-texto); }
.blg-sello { margin: 18px 0 0; font-size: 11px; font-weight: 900;
  letter-spacing: .12em; text-transform: uppercase; color: var(--gris-76); }
.blg-volver { margin: clamp(32px, 4vw, 44px) 0 0; }

/* ---------- el listado ---------- */
.blg-listado { padding: 0 0 clamp(56px, 7vw, 96px); }
.blg-filas { list-style: none; margin: 0; padding: 0;
  border-top: 2px solid var(--negro); }
.blg-fila { border-bottom: 2px solid var(--negro); }
.blg-fila a { display: grid; grid-template-columns: 150px minmax(0, 1fr);
  gap: 4px clamp(20px, 3vw, 40px); align-items: baseline;
  padding: clamp(22px, 3vw, 32px) 0; color: var(--negro); text-decoration: none;
  transition: background .2s ease, padding .2s ease; }
.blg-fila a:hover { background: var(--gris-f6); padding-left: 14px; padding-right: 14px; }
.blg-fila-fecha { grid-row: 1 / span 2; font-size: 11px; font-weight: 900;
  letter-spacing: .12em; text-transform: uppercase; color: var(--gris-76); }
.blg-fila-tit { font-size: clamp(18px, 1.7vw, 23px); font-weight: 900;
  line-height: 1.2; letter-spacing: -.015em; }
.blg-fila-desc { font-size: 14px; font-weight: 500; line-height: 1.5;
  color: var(--gris-texto); }
.blg-fila a:hover .blg-fila-tit { color: var(--morado); }

@media (max-width: 700px) {
  .blg-fila a { grid-template-columns: minmax(0, 1fr); }
  .blg-fila-fecha { grid-row: auto; margin-bottom: 4px; }
}

/* La tira del blog que cuelga de la tienda. El blog no esta en el menu de
   arriba, asi que este bloque es el camino real que tiene el rastreador a
   cada articulo. Se ve discreto a proposito: informa, no compite con el
   catalogo que hay encima. */
.blg-tira { padding: clamp(44px, 6vw, 76px) 0 clamp(48px, 6vw, 80px);
  border-top: 2px solid var(--negro); background: var(--gris-fa); }
.blg-tira-h2 { margin: 6px 0 clamp(20px, 3vw, 30px);
  font-size: clamp(24px, 2.6vw, 34px); font-weight: 900; line-height: 1.1;
  letter-spacing: -.02em; }
.blg-tira-filas { list-style: none; margin: 0 0 clamp(20px, 3vw, 28px); padding: 0;
  border-top: 1px solid var(--gris-dc); }
.blg-tira-fila { border-bottom: 1px solid var(--gris-dc); }
.blg-tira-fila a { display: grid; grid-template-columns: 106px minmax(0, 1fr);
  gap: 4px clamp(16px, 2.4vw, 32px); align-items: baseline; padding: 16px 0;
  color: var(--negro); text-decoration: none;
  transition: background .2s ease, padding .2s ease; }
.blg-tira-fila a:hover { background: var(--gris-f1); padding-left: 12px; padding-right: 12px; }
.blg-tira-fecha { font-size: 11px; font-weight: 900; letter-spacing: .12em;
  /* var(--gris-76) pasa sobre blanco (4,54:1) y no sobre el var(--gris-fa) de la tira
     (4,35:1). var(--gris-73) da 4,61:1 aqui. */
  text-transform: uppercase; color: var(--gris-73); }
.blg-tira-tit { font-size: clamp(15px, 1.25vw, 17px); font-weight: 700;
  line-height: 1.35; letter-spacing: -.01em; }
.blg-tira-fila a:hover .blg-tira-tit { color: var(--morado); }
.blg-tira-ver { display: inline-block; font-size: 11px; font-weight: 900;
  letter-spacing: .14em; text-transform: uppercase; color: var(--negro);
  text-decoration: none; border-bottom: 2px solid var(--negro); }
.blg-tira-ver:hover { color: var(--morado); border-color: var(--morado); }

@media (max-width: 700px) {
  .blg-tira-fila a { grid-template-columns: minmax(0, 1fr); }
  .blg-tira-fecha { margin-bottom: 2px; }
}

/* =========================
   PIEZAS PROPIAS DE WORK (04 en adelante)
   Lo unico que no existia en las fichas portadas: el video 16:9 a ancho
   completo, el marco del configurador 3D y las proporciones 16:9 / 4:3
   de la rejilla. Todo lo demas reutiliza las clases del showroom y del denim.
========================= */
.contrast-work-page .cw-pieza-marco-16x9 {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 2px solid var(--negro);
  background: var(--negro);
  overflow: hidden;
}
.contrast-work-page .cw-pieza-marco-16x9 video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  background: var(--negro);
}
.contrast-work-page .cw-pieza-nota {
  margin: 14px 0 0;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 500;
  color: var(--negro);
}
.contrast-work-page .cw-denim-shot.cw-shot-16x9 {
  aspect-ratio: 16 / 9;
}
.contrast-work-page .cw-denim-shot.cw-shot-4x3 {
  aspect-ratio: 4 / 3;
}
/* el configurador 3D ocupa el marco entero del visor */
.contrast-work-page .cw-cfg-marco { background: #f2f3f5; }
.contrast-work-page .cw-cfg { position: absolute; inset: 0; min-height: 0; }
/* la muestra de la app: capturas pasando con fundido y el boton que la abre.
   El fundido lo lleva work-modal.js poniendo is-activa a una foto cada vez. */
.contrast-work-page a.cw-app-teaser {
  display: block;
  height: auto;
  min-height: 0;
  aspect-ratio: 16 / 9;   /* las capturas son 16:9; asi no se recortan */
  background: #f2f3f5;
  cursor: pointer;
  text-decoration: none;
}
.contrast-work-page .cw-app-teaser-fotos {
  position: absolute;
  inset: 0;
}
.contrast-work-page .cw-app-teaser-fotos img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.4s ease;
}
.contrast-work-page .cw-app-teaser-fotos img.is-activa { opacity: 1; }
.contrast-work-page .cw-app-teaser-boton {
  position: absolute;
  left: 50%;
  bottom: 40px;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 28px;
  border: 2px solid var(--negro);
  background: var(--negro);
  color: var(--blanco);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.contrast-work-page .cw-app-teaser:hover .cw-app-teaser-boton {
  background: var(--blanco);
  color: var(--negro);
  transform: translateX(-50%) translateY(-2px);
}
.contrast-work-page .cw-app-teaser:focus-visible .cw-app-teaser-boton {
  background: var(--blanco);
  color: var(--negro);
  transform: translateX(-50%) translateY(-2px);
}
.contrast-work-page .cw-app-teaser:focus-visible { outline: 3px solid var(--negro); outline-offset: 3px; }
@media (max-width: 768px) {
  .contrast-work-page .cw-app-teaser-boton { bottom: 24px; padding: 14px 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .contrast-work-page .cw-app-teaser-fotos img { transition: none; }
}
.contrast-work-page .cw-pieza-enlace {
  display: inline-block;
  margin-top: 16px;
  color: var(--negro);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ============================================================
   KALVIN, la mascota (sep-2026). VA AL FINAL DEL FICHERO a proposito:
   ensancha cajas de heroes definidas mas arriba con la misma
   especificidad (contacto, tienda, estudio) y tiene que ganar por orden.

   Todo se mide en px o en porcentaje del contenedor, nunca en vw: asi la
   figura no se mueve de sitio cuando se hace zoom en la pagina (el zoom
   cambia el ancho del viewport en px CSS, y con el 100vh de los heroes la
   figura bailaba).

   Dos casos:
   - portadas sin caja (servicios, work): el marco es una columna absoluta
     del ancho del sitio sobre la seccion.
   - heroes con caja (home, contacto, tienda, estudio): el marco va DENTRO
     de la caja y la cubre, asi la figura se apoya en el borde de la caja
     pase lo que pase con el alto de la seccion.

   La figura se dimensiona por ANCHO (--kalvin-ancho, % del marco) y el alto
   sale solo de la proporcion de la imagen.

   Imagenes: site/assets/img/kalvin/ (tools/kalvin_assets.py).
   HTML y frases: tools/kalvin.py.
   ============================================================ */
.kalvin-marco {
  position: absolute; left: 0; right: 0; top: 0; bottom: 0;
  width: min(1180px, calc(100% - 44px));
  margin: 0 auto;
  z-index: 4;
  pointer-events: none;
}
/* dentro de la caja del heroe: el marco ES la caja */
.kalvin-dentro { position: absolute; inset: 0; width: auto; margin: 0; }
.contrast-home-dotwave-box,
.contrast-contact-halftone-box,
.cab-hero-box,
.contrast-marketplace-page .cmp-hero-inner { position: relative; }

.kalvin-figura {
  position: absolute;
  right: var(--kalvin-derecha, 0px);
  bottom: var(--kalvin-bottom, 0px);
  width: var(--kalvin-ancho, 22%);
}
.kalvin-marco .kalvin {
  display: block; position: relative; z-index: 1;
  width: 100%; height: auto; max-width: none;
  user-select: none; -webkit-user-drag: none;
  filter: drop-shadow(0 18px 22px rgba(var(--tinta-rgb), .10));
}

/* el bocadillo: comic, borde negro, el pico abajo a la derecha apuntando a
   la cabeza. Se coloca con --boc-derecha (% del ancho de la figura, cuanto
   se desplaza a la izquierda) y --boc-arriba (% del alto de la figura). */
.kalvin-bocadillo {
  position: absolute; z-index: 2;
  right: var(--boc-derecha, 40%); top: var(--boc-arriba, -13%);
  margin: 0; padding: 10px 14px 11px;
  max-width: 200px; width: max-content;
  background: var(--blanco); color: var(--negro);
  border: 2px solid var(--negro); border-radius: 14px 14px 2px 14px;
  font-family: "Sofia Sans", Arial, sans-serif;
  font-size: 14px; font-weight: 800; line-height: 1.2; letter-spacing: .02em;
  text-transform: uppercase; white-space: normal;
  box-shadow: 4px 4px 0 var(--negro);
  opacity: 0;
  animation: kalvin-boc-aparece .45s ease-out 1s forwards;
}
@keyframes kalvin-boc-aparece { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .kalvin-bocadillo { opacity: 1; animation: none; }
}
.kalvin-bocadillo::after {
  content: ""; position: absolute; right: 12px; bottom: -9px;
  width: 12px; height: 12px;
  background: var(--blanco);
  border-right: 2px solid var(--negro); border-bottom: 2px solid var(--negro);
  transform: rotate(45deg);
}
/* en la caja negra de contacto el bocadillo sigue blanco y la sombra clara */
.contrast-contact-halftone-hero .kalvin-bocadillo { box-shadow: 4px 4px 0 var(--cian); }

/* ---- las cajas dejan hueco a la derecha para Kalvin (% del propio ancho) ---- */
@media (min-width: 1100px) {
  .contrast-home-dotwave-box,
  .contrast-contact-halftone-box { width: 100%; padding-right: 32%; }
  /* estudio: la caja ocupa todo el ancho para que el titulo (mismo cuerpo que
     el resto de portadas) quepa en dos lineas; texto y botones dejan a la
     derecha una columna de 175px para Kalvin */
  .cab-hero-box { width: 100%; }
  .cab-hero-title, .cab-hero-actions { max-width: calc(100% - 175px); }
  /* el parrafo corta tras "CGI," (39em en ingles, 44em en castellano, que
     llega hasta ahi con mas letras); nunca pasa de la columna del texto */
  .cab-hero-copy { max-width: min(39em, 100% - 200px); }
  .cab-hero-copy:lang(es) { max-width: min(44em, 100% - 200px); }
  /* portadas de servicios: el texto no llega hasta Kalvin */
  .svc-portada .svc-h1 { max-width: calc(100% - 320px); }
  .svc-portada .svc-entradilla, .svc-portada .svc-cuerpo { max-width: 700px; }
  .contrast-work-page .cw-hero-tags, .contrast-work-page .cw-tag-detail { max-width: 760px; }
}

/* ---- colocacion pagina a pagina ---- */
/* heroes con caja */
.contrast-home-dotwave-hero .kalvin-dentro { --kalvin-ancho: 22%; --kalvin-derecha: 4%; --kalvin-bottom: 52px; }
.contrast-contact-halftone-hero .kalvin-dentro { --kalvin-ancho: 21%; --kalvin-derecha: 12%; --kalvin-bottom: 52px; }
/* estudio: Kalvin pegado al borde derecho de la caja (sobre el relleno), de
   pie a la altura del titulo, sin pisar el indice: 185px de ancho como
   maximo y algo menos entre 1100 y 1250px, donde la caja es mas baja */
.cab-hero .kalvin-dentro { --kalvin-ancho: min(185px, 15vw); --kalvin-derecha: 88px; }
.cab-hero .kalvin-dentro .kalvin-figura { top: 105px; bottom: auto; }
/* en castellano el titulo es mas largo: Kalvin se queda pegado al borde */
.cab-hero:lang(es) .kalvin-dentro { --kalvin-derecha: 40px; }

/* portadas sin caja */
.contrast-work-page .cw-hero { position: relative; }
/* servicios: colocado con #fix a 1912px. Aqui Kalvin cuelga de ARRIBA y no
   del suelo de la portada: el alto de la portada cambia con el ancho y con
   el idioma, y anclandolo abajo el bocadillo se metia detras de la cabecera
   en algunas medidas. Asi se queda siempre a la misma altura. */
.kalvin-pose-pulgar   { --kalvin-ancho: 22%;   --kalvin-derecha: 9.15%; }
.kalvin-pose-pulgar .kalvin-figura { top: 97px; bottom: auto; }
.kalvin-pose-pieza3d  { --kalvin-ancho: 20.5%; --kalvin-bottom: 120px; }
.kalvin-pose-portatil { --kalvin-ancho: 23.5%; --kalvin-bottom: 0px; }
.kalvin-pose-claqueta { --kalvin-ancho: 25.3%; --kalvin-bottom: 120px; }
.kalvin-pose-consola  { --kalvin-ancho: 32.3%; --kalvin-bottom: 0px; --kalvin-derecha: -90px; }
.contrast-work-page .kalvin-pose-leyendo { --kalvin-ancho: 26.5%; --kalvin-bottom: 150px; }

/* ---- el bocadillo, pagina a pagina ---- */
.contrast-home-dotwave-hero .kalvin-bocadillo { --boc-derecha: 40%; }
.kalvin-pose-pulgar .kalvin-bocadillo { --boc-derecha: 43%; --boc-arriba: -17.6%; }
.kalvin-pose-claqueta .kalvin-bocadillo { --boc-derecha: 34%; --boc-arriba: -14%; }
.contrast-work-page .kalvin-pose-leyendo .kalvin-bocadillo { --boc-derecha: 46%; --boc-arriba: -16%; }
.kalvin-pose-movil .kalvin-bocadillo { --boc-derecha: 31%; }
.kalvin-pose-consola .kalvin-bocadillo { --boc-derecha: 66%; }
.kalvin-pose-portatil .kalvin-bocadillo { --boc-derecha: 20%; }
.kalvin-pose-pieza3d .kalvin-bocadillo { --boc-derecha: 26%; }
.cab-hero .kalvin-bocadillo { --boc-derecha: 53%; --boc-arriba: -14%; }
.kalvin-pose-sillon .kalvin-bocadillo { --boc-derecha: 34%; --boc-arriba: -7%; }

/* en movil, por ahora, Kalvin no sale */
@media (max-width: 1099px) {
  .kalvin-marco { display: none; }
}