/* ============================================================================
   Sensory Value — hoja de estilo del sitio (rediseño editorial, 2026-09-02)

   Tesis: una revista sobre el gusto, no un laboratorio. Suelos cálidos (papel y
   blanco) con una sola banda de tinta por página, tipografía Poppins llevada con
   peso 600 y tracking negativo, el arco de puntos del logotipo como única firma
   gráfica, y el movimiento reservado a explicar algo: aparecer, avanzar, señalar.

   Lo que este fichero deja atrás a propósito, porque era lo que hacía que el sitio
   pareciese una plantilla generada: el velo diagonal azul-rosa en 133 secciones,
   la rejilla de tarjetas con filete de degradado como respuesta a todo contenido,
   los antetítulos monoespaciados en versalitas en cada tramo y el barrido de luz
   sobre las bandas oscuras.

   Principios que siguen vigentes:
   1. MOBILE FIRST: la declaración base es la del móvil; los @media sólo añaden.
   2. FLUIDO ANTES QUE POR TRAMOS: clamp() y auto-fit; los breakpoints sólo para
      cambios estructurales (62rem: dos columnas · 72rem: menú en línea).
   3. style="" SÓLO PARA PARÁMETROS: --tint, --c, --bar, --foco. Nunca maquetación.
   4. Paleta y logotipo intocables; todo lo demás es de este fichero.

   Índice
     01 Base            06 Cabecera y pie        11 Datos y gráficos
     02 Tipografía      07 Botones y enlaces     12 Figuras y vídeo
     03 Layout          08 Héroe                 13 Formulario
     04 Suelos          09 Patrones editoriales  14 Prosa legal
     05 El arco         10 Tarjetas y fichas     15 Movimiento
   ============================================================================ */


/* ── 01 · BASE ─────────────────────────────────────────────────────────────── */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
}

:root {
  /* Suelos */
  --sv-paper: #FAF9F7;
  --sv-ink: #0A2450;
  --sv-ink-2: #102C6E;
  --sv-mist: #ECF6FC;
  /* Texto */
  --sv-text: #3F3F3F;
  --sv-text-soft: #545350;
  --sv-text-muted: #6B6A67;
  /* Líneas */
  --sv-line: #E7E5E1;
  --sv-line-strong: #D2D0CB;
  /* El filete que SEPARA dos filas de una lista es estructura, no decoración: con el neutro
     de borde daba 1,20:1 sobre papel y sencillamente no se veía, así que las puertas se leían
     como un bloque continuo. 1,67 sigue siendo un filete discreto y ya delimita. */
  --sv-line-row: #C6C3BD;
  /* Borde de un CONTROL, no de una superficie. Un campo de formulario se distingue de su panel
     sólo por su borde —el relleno de papel sobre el panel blanco da 1,05:1, o sea nada—, así que
     ese borde es información y WCAG 1.4.11 le exige 3:1. Con el neutro de línea daba 1,54 sobre
     blanco. Medido: #8E8B85 da 3,40 sobre blanco y 3,23 sobre papel. Sólo lo usan el campo y la
     casilla; los bordes decorativos siguen en el neutro claro. */
  --sv-line-control: #8E8B85;
  /* Acento */
  --sv-accent: #E40084;
  --sv-accent-deep: #C00C6F;
  /* La serie del arco, en orden. Son CINCO tramos y no cuatro: con cuatro, una lista de cinco
     puertas repetía el magenta en la primera y en la quinta. El quinto es el azul de «sensory»,
     que ya está en la paleta y cae justo entre el azul de «value» y el cian. */
  --sv-arc-1: #E40084;
  --sv-arc-2: #901884;
  --sv-arc-3: #183C90;
  --sv-arc-4: #0C6CB4;
  --sv-arc-5: #0090CC;
  /* Margen lateral del contenedor: una sola fuente para quien tenga que medirlo */
  --sv-pad: clamp(1.25rem, .9rem + 1.4vw, 2.5rem);
  color-scheme: light;
  accent-color: var(--sv-accent);
}

body {
  margin: 0;
  background: var(--sv-paper);
  color: var(--sv-text);
  font-family: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;   /* red de seguridad: ningún hijo provoca scroll lateral */
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

a { color: var(--sv-blue-600); text-decoration: none; }
a:hover { color: var(--sv-accent); text-decoration: none; }

button, input, select, textarea { font: inherit; color: inherit; }

:where(h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote) { margin: 0; }
/* `:where()` a propósito: con `ul[class]` a secas, el reseteo pesa 0-1-1 y le GANA a
   `.sv-mt-lg` (0-1-0), así que cualquier lista con una clase de separación se quedaba pegada
   a lo anterior. Medido: `ol.sv-steps.sv-mt-lg` computaba `margin-top: 0px`. Con `:where()`
   el reseteo pesa cero y cualquier utilidad lo sobrescribe, que es lo que tiene que pasar.
   `dd` entra arriba por lo mismo: conservaba los 40 px de sangría del navegador. */
:where(ul[class], ol[class]) { list-style: none; padding: 0; margin: 0; }

/* El sistema tiene UNA negrita, y es la seminegra. El navegador pinta <b> y <strong> a 700 por
   defecto, así que un énfasis dentro de un párrafo salía más pesado que el titular que lo
   encabeza —y obligaba a descargar un instante de Poppins que ninguna regla del sitio pide—. */
b, strong { font-weight: 600; }

::selection { background: rgba(228, 0, 132, .16); color: var(--sv-ink); }
.sv-on-dark ::selection { background: rgba(228, 0, 132, .4); color: #fff; }
.sv-input, .sv-textarea, .sv-select { caret-color: var(--sv-cyan-500); }
.sv-list > li::marker, .sv-prose li::marker { color: var(--sv-accent); }

:focus-visible {
  outline: 3px solid var(--sv-cyan-500);
  outline-offset: 2px;
  border-radius: 4px;
}

.sv-skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  padding: .75rem 1.25rem; background: var(--sv-ink); color: #fff;
  font-weight: 600; border-radius: 0 0 8px 0;
}
.sv-skip:focus { left: 0; color: #fff; }

.sv-visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}


/* ── 02 · TIPOGRAFÍA ───────────────────────────────────────────────────────── */
/* Una sola familia, cuatro pesos. Los titulares van a 600 y no a 700: la Poppins
   negra es la que da el aire de plantilla; la seminegra con tracking negativo es la
   que da el aire de revista. Todos los cuerpos son fluidos. */

.sv-h1, .sv-h2, .sv-h3, .sv-h4 {
  color: var(--sv-ink);
  font-weight: 600;
  text-wrap: balance;
}

.sv-h1 {
  font-size: clamp(2.125rem, 1.45rem + 2.9vw, 3.625rem);
  line-height: 1.06;
  letter-spacing: -.028em;
}
.sv-h1--sm { font-size: clamp(1.9rem, 1.4rem + 2vw, 3rem); }
.sv-h2 {
  font-size: clamp(1.625rem, 1.3rem + 1.55vw, 2.375rem);
  line-height: 1.12;
  letter-spacing: -.022em;
}
.sv-h2--sm { font-size: clamp(1.4rem, 1.2rem + 1vw, 1.875rem); letter-spacing: -.018em; }
.sv-h3 {
  font-size: clamp(1.1875rem, 1.08rem + .45vw, 1.375rem);
  line-height: 1.3;
  letter-spacing: -.012em;
}
.sv-h4 { font-size: 1.0625rem; line-height: 1.35; letter-spacing: -.006em; }

.sv-lead {
  font-size: clamp(1.0625rem, 1rem + .45vw, 1.3125rem);
  line-height: 1.55;
  color: var(--sv-text-soft);
  text-wrap: pretty;
}
.sv-text     { font-size: clamp(.9375rem, .92rem + .1vw, 1.0625rem); line-height: 1.7; text-wrap: pretty; }
.sv-text--sm { font-size: .9375rem; line-height: 1.6; }
.sv-text--xs { font-size: .8125rem; line-height: 1.55; }
.sv-muted    { color: var(--sv-text-muted); }
.sv-strong   { font-weight: 600; color: var(--sv-ink); }
.sv-tm { font-size: .55em; font-weight: 600; vertical-align: super; letter-spacing: 0; }

/* Antetítulo: Poppins seminegra en caja baja con el punto de la marca delante.
   Sustituye a la etiqueta monoespaciada en versalitas, que rotulaba cada tramo como
   una muestra de laboratorio. El punto es el del arco del logotipo, en el color de
   la sección (--tint) o en magenta. */
.sv-kicker {
  display: inline-flex; align-items: center; gap: .5625rem;
  font-size: .8125rem; font-weight: 600; line-height: 1.3;
  letter-spacing: .01em;
  /* El color va en el PUNTO, no en el texto, y por dos motivos.
     Accesibilidad: a 13 px el antetítulo es texto pequeño y necesita 4,5:1, y el magenta del arco
     sobre papel cálido da 4,31 —falla— y el cian 3,41. Con el tinte gobernando el texto, cualquier
     página podía volverlo ilegible pasando un parámetro.
     Diseño: un antetítulo es una etiqueta, no un titular; el acento de marca lo lleva mejor la
     marca de entrada que la palabra. El magenta oscuro de la paleta da 5,66 sobre papel. */
  color: var(--sv-accent-deep);
}
.sv-kicker::before {
  content: ''; flex: none;
  width: .4375rem; height: .4375rem; border-radius: 50%;
  background: var(--tint, var(--sv-accent));
  /* Un antetítulo largo parte en dos líneas en el móvil. Con el punto centrado en la caja
     entera quedaría a media altura, como una viñeta suelta; anclado a la primera línea se
     lee como lo que es, la marca de entrada del rótulo. */
  align-self: flex-start; margin-top: .42em;
}
.sv-kicker--lg { font-size: .9375rem; }
.sv-kicker--sm { font-size: .75rem; }
.sv-kicker--plain::before { display: none; }   /* sin punto: dentro de tarjetas y fichas */

/* La monoespaciada queda para lo que ES un dato: pie de gráfico, rótulo de figura,
   unidad de una cifra. Así la anotación técnica sigue existiendo, pero como detalle
   humano —la nota al margen— y no como identidad de toda la página. */
.sv-mono, .sv-note-mono, .sv-caption {
  font-family: 'Inconsolata', Consolas, ui-monospace, monospace;
  font-size: .75rem; line-height: 1.5; letter-spacing: .04em;
  color: var(--sv-text-muted);
}
.sv-caption { display: block; margin-top: .75rem; text-wrap: pretty; }

/* Numeral de paso o de puerta: grande, seminegro, en el color de su tramo. */
.sv-num {
  font-weight: 600; line-height: 1;
  font-size: clamp(1.625rem, 1.35rem + 1.2vw, 2.375rem);
  letter-spacing: -.03em;
  color: var(--tint, var(--sv-accent));
  font-variant-numeric: tabular-nums;
}

/* Frase destacada dentro de un bloque: peso de titular sin ser encabezado. */
.sv-pull { font-size: clamp(1.3rem, 1.1rem + 1vw, 1.625rem); font-weight: 500; line-height: 1.35; color: var(--sv-ink); text-wrap: balance; }
.sv-pull__em { font-weight: 600; color: var(--sv-accent); }

/* Texto con degradado: sólo una palabra o una cifra, nunca un párrafo. */
.sv-gradient-text {
  background-image: linear-gradient(110deg, var(--sv-magenta-500) 0%, var(--sv-purple-500) 100%);
  background-clip: text; -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  padding-bottom: .16em; margin-bottom: -.16em;
}

/* Sobre tinta */
.sv-on-dark { color: rgba(255, 255, 255, .84); }
.sv-on-dark .sv-h1, .sv-on-dark .sv-h2, .sv-on-dark .sv-h3, .sv-on-dark .sv-h4,
.sv-on-dark .sv-pull, .sv-on-dark .sv-strong { color: #fff; }
.sv-on-dark .sv-lead  { color: rgba(255, 255, 255, .84); }
/* 74 % y no 66 %: es el valor que aguanta con el arco de marca por detrás. Medido sobre tinta
   con los puntos claros del arco al 45 % de opacidad, el 66 % caía a 4,04:1 y el 74 % se queda
   en 4,60. Y sobre tinta lisa se lee mejor de todas formas. Un solo valor para los cinco sitios
   que antes tenían tres. */
.sv-on-dark .sv-muted { color: rgba(255, 255, 255, .74); }
/* Sobre tinta el texto tampoco lo gobierna el tinte, por lo mismo; el punto sí. */
.sv-on-dark .sv-kicker { color: var(--sv-blue-300); }
.sv-on-dark .sv-kicker::before { background: var(--tint, var(--sv-blue-300)); }
.sv-on-dark .sv-num { color: var(--tint, var(--sv-blue-300)); }
.sv-on-dark .sv-mono, .sv-on-dark .sv-caption, .sv-on-dark .sv-note-mono { color: rgba(255, 255, 255, .74); }
.sv-on-dark a:not(.sv-btn) { color: var(--sv-blue-300); }
.sv-on-dark a:not(.sv-btn):hover { color: #fff; }
/* El texto claro sobre azul profundo se lee más apretado: algo más de interlínea,
   una pizca de tracking, y un paso de peso sólo en los cuerpos pequeños. */
.sv-on-dark .sv-text { line-height: 1.72; letter-spacing: .006em; }
.sv-on-dark .sv-text--sm, .sv-on-dark .sv-text--xs,
.sv-on-dark .sv-stat__label, .sv-on-dark .sv-office__addr { font-weight: 500; letter-spacing: .01em; }


/* ── 03 · LAYOUT ───────────────────────────────────────────────────────────── */

.sv-wrap {
  width: 100%;
  max-width: 75rem;
  margin-inline: auto;
  padding-inline: var(--sv-pad);
}
.sv-wrap--narrow { max-width: 52rem; }

.sv-section {
  position: relative;
  /* `clip` y no `hidden`: los dos recortan el arco que sobresale del canto, pero `hidden`
     convierte la sección en un contenedor de scroll y eso **rompe `position: sticky`** en
     cualquier descendiente —el titular adherido de `sv-intro` se quedaba quieto respecto a
     una caja que no se desplaza, o sea, no se adhería a nada—. `clip` recorta sin crear
     contenedor de scroll, que es exactamente lo que hace falta aquí. */
  overflow: clip;
  --sv-section-pad: clamp(3.5rem, 2.4rem + 4vw, 6.5rem);
  padding-block: var(--sv-section-pad);
}
.sv-section--tight { --sv-section-pad: clamp(2.5rem, 1.8rem + 2.6vw, 4.25rem); }
.sv-section--flush { --sv-section-pad: 0px; }
.sv-section > * { position: relative; z-index: 1; }

/* Filete de separación entre dos secciones del mismo suelo: una línea al ancho del
   contenedor, no de la ventana. */
.sv-section--hairline::before {
  content: ''; position: absolute; z-index: 0; top: 0; left: 50%;
  transform: translateX(-50%);
  width: min(calc(100% - 2 * var(--sv-pad)), calc(75rem - 2 * var(--sv-pad)));
  height: 1px; background: var(--sv-line);
}

/* ── La junta del héroe (Pablo, 2026-09-03) ─────────────────────────────────────
   «¿Podemos introducir algún tipo de separación entre el héroe y la siguiente sección?»
   Sí, y **el sistema ya la tenía escrita**: la regla del escalón pide `sv-section--hairline`
   en la segunda de dos secciones del mismo suelo. Lo que faltaba era darse cuenta de que
   ésta es una de ellas. El héroe va sin velo desde el 2026-09-03 y `--white` es transparente,
   así que héroe y sección siguiente comparten literalmente el mismo fondo: 65 px de aire por
   arriba y 78 px por abajo, y ni un canto en medio. **El aire no separa, separa un borde** —
   por eso subir el relleno no habría arreglado nada.

   Va en la hoja y no en las páginas porque la junta es **idéntica en las 47**: todas son
   `sv-hero sv-section--paper` seguido de `sv-section--white`. Etiquetar 47 ficheros para
   describir una regla que se deduce del DOM es deuda, no explicitud.

   El punto de la marca en el extremo izquierdo es lo que distingue un filete deliberado de una
   línea suelta, y no es un adorno nuevo: es el mismo punto que el antetítulo lleva delante. Los
   dos van en UN pseudoelemento con dos capas de fondo, no en `::before` + `::after`, porque el
   `::after` de la sección es de la filigrana del arco y dos reglas sobre el mismo pseudoelemento
   se pisan en silencio.

   El filete va en `--sv-line`, más claro que el `--sv-line-row` de las listas de puertas que
   vienen justo debajo. Es a propósito: la junta es estructura de fondo y las filas son
   contenido, así que la que manda en el ojo tiene que ser la fila. */
.sv-hero + .sv-section:not(.sv-section--ink):not(.sv-section--deep):not(.sv-section--cover)::before {
  content: ''; position: absolute; z-index: 0; top: 0; left: 50%;
  transform: translateX(-50%);
  width: min(calc(100% - 2 * var(--sv-pad)), calc(75rem - 2 * var(--sv-pad)));
  height: .4375rem;
  background:
    radial-gradient(circle, var(--sv-accent) 38%, transparent 42%) left center / .4375rem .4375rem no-repeat,
    linear-gradient(var(--sv-line), var(--sv-line)) right center / calc(100% - .875rem) 1px no-repeat;
}

.sv-stack       { display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; }
.sv-stack--tight{ gap: .625rem; }
.sv-stack--wide { gap: 1.5rem; }
/* Una pila alinea a la izquierda, así que sus hijos NO se estiran: una rejilla dentro de
   una pila se encogía a su contenido y partía sus columnas. Los bloques de ancho completo
   recuperan el ancho de la pila. */
.sv-stack > .sv-grid, .sv-stack > .sv-columns, .sv-stack > .sv-doors, .sv-stack > .sv-steps,
.sv-stack > .sv-next, .sv-stack > .sv-table-wrap, .sv-stack > .sv-defs, .sv-stack > .sv-chart,
.sv-stack > .sv-figure { align-self: stretch; width: 100%; }
.sv-mt-sm { margin-top: 1rem; }
.sv-mt    { margin-top: clamp(1.75rem, 1.4rem + 1.4vw, 3rem); }
.sv-mt-lg { margin-top: clamp(2.5rem, 1.8rem + 2.6vw, 4.5rem); }

.sv-grid { display: grid; gap: clamp(1rem, .8rem + 1vw, 1.75rem); }
.sv-grid--cards  { grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr)); }
.sv-grid--wide   { grid-template-columns: repeat(auto-fit, minmax(min(21rem, 100%), 1fr)); }
.sv-grid--pair   { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 37.5rem) { .sv-grid--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Tres columnas declaradas y no `auto-fit`: son NUEVE fichas, así que 3 × 3 sale exacto y
   `auto-fit` dejaba la novena sola en su fila entre 608 y 912 px. Es el mismo motivo por el que
   `sv-grid--pair` existe. */
.sv-grid--people { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 38rem) {
  .sv-grid--people { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Nueve fichas a dos columnas dejan la novena sola con media fila vacía. Si el último queda
     impar, ocupa la fila entera: mejor una ficha ancha que un hueco. */
  .sv-grid--people > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 62rem) { .sv-grid--people { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sv-grid--steps  { grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr)); }
.sv-grid--stats  { grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr)); gap: clamp(1.25rem, 1rem + 1.2vw, 2.25rem); }
/* Tres cifras: una o tres columnas, nunca dos con la tercera huérfana. */
.sv-grid--stats:has(> :nth-child(3):last-child) { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 34rem) {
  .sv-grid--stats:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Cuatro cifras en 2×2 a cualquier ancho: nunca una huérfana. */
.sv-grid--stats-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 1.2rem + 1.4vw, 2.5rem) clamp(1.25rem, 1rem + 1.2vw, 2.25rem); }

/* Dos columnas: apiladas en móvil, con proporción a partir de 62rem. Alternar la
   proporción entre dos secciones seguidas es lo que evita la pila de bandas. */
.sv-split { display: grid; gap: clamp(1.75rem, 1.3rem + 2.6vw, 4rem); align-items: center; }
.sv-split--start { align-items: start; }
.sv-split--end   { align-items: end; }
@media (min-width: 62rem) {
  .sv-split      { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sv-split--5-7 { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .sv-split--7-5 { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .sv-split--4-8 { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
  .sv-split--text-media > .sv-split__media { order: 2; }
  .sv-split--media-text > .sv-split__media { order: -1; }
}

.sv-measure { max-width: 42rem; }
.sv-measure--sm { max-width: 32rem; }
.sv-measure--center { margin-inline: auto; text-align: center; }

.sv-cta-row { display: flex; align-items: center; justify-content: flex-start; gap: clamp(1.5rem, 1rem + 2vw, 3rem); flex-wrap: wrap; }
.sv-cta-row > .sv-btn { flex: none; }

.sv-dept-head { display: flex; align-items: baseline; gap: .875rem; flex-wrap: wrap; }
.sv-section[id] { scroll-margin-top: 5rem; }


/* ── 04 · SUELOS ───────────────────────────────────────────────────────────── */
/* Tres suelos y su reparto es la jerarquía: papel (lectura), blanco (figuras y
   fichas) y tinta (una afirmación o el cierre). Los nombres heredados siguen
   funcionando para que ninguna página quede sin suelo mientras se rehace. */

.sv-section--paper, .sv-section--light { background: var(--sv-paper); }
.sv-section--white { background: #fff; }
.sv-section--mist  { background: var(--sv-mist); }
.sv-section--ink, .sv-section--deep, .sv-section--cover {
  color: #fff;
  background: linear-gradient(170deg, var(--sv-ink) 0%, var(--sv-ink-2) 100%);
}
.sv-sweep, .sv-rule-brand, .sv-card__bar, .sv-figure__bar { display: none; }

/* ── La luz del suelo ───────────────────────────────────────────────────────────
   Un suelo plano se lee como un relleno; una página impresa no es plana. Cada sección clara
   lleva tres capas EN SU PROPIO `background`, y no en un pseudoelemento, por dos motivos: el
   `::before` ya es del filete de junta —`sv-section--hairline`— y dos reglas sobre el mismo
   pseudoelemento se pisan en silencio, y así queda el `::after` libre para la filigrana.

   1. GRANO. Un mosaico de ruido de 240 px. Es lo que le da tacto a la superficie. El fichero
      es propio: la CSP declara `img-src 'self'` y un `data:` quedaría bloqueado sin aviso.
   2. CANTO DE HOJA. La sección entra en luz por arriba, como una página apilada sobre otra.
      Aclara, así que no cuesta ni un punto de contraste.
   3. LAVADO. Un radial muy abierto de cian arriba y magenta abajo que **alterna de lado**
      entre secciones consecutivas: la página tiene dirección de luz en lugar de un sello
      repetido. Eso es lo que separa una atmósfera del velo idéntico en 133 secciones que se
      retiró — aquél no cambiaba nunca.

   El 5 % y el 4 % del lavado son el TECHO MEDIDO, no una timidez: detrás de texto, más tinte
   tumba el azul de enlace (5,23:1 sobre papel) y el antetítulo (5,66) por debajo de 4,5:1.
   Con 13 % y 10 %, que es donde estuvo un rato, fallaban tres colores de texto. */
/* ── Las franjas de luz (Pablo, 2026-09-03, con dos referencias sobre la mesa) ───
   Pablo no veía la atmósfera, y tenía razón: **estaba medida y era imperceptible**. El motivo
   es de percepción, no de cantidad. El ruido es la PEOR textura por unidad de contraste que
   existe —no tiene bordes, y el ojo lo integra hasta hacerlo desaparecer—, y los lavados
   radiales eran tan abiertos (130 % × 95 %) que tampoco tenían un canto donde el ojo pudiera
   agarrarse. Dos capas con presupuesto de contraste gastado y cero presencia.

   Una FRANJA se ve al 2,6 % porque tiene borde. Es el mismo truco de la referencia que
   trajo Pablo —«geometric light stripes»—: bandas diagonales de ancho desigual, de canto
   suave, cruzando el campo. Aquí el presupuesto de tinte se gasta entero en eso.

   Tres reglas que las mantienen del lado cómodo:
   1. **Ancho desigual a propósito** (11 %, 4,5 %, 15 %, 3,5 %). Cuatro bandas iguales serían
      un `repeating-linear-gradient`, y eso se lee como papel pintado, no como luz.
   2. **Nunca se solapan a lo largo del eje**, así que el tinte máximo detrás de texto es el
      de UNA banda: 5,5 %, exactamente el techo que ya estaba medido para el lavado. El
      presupuesto no sube, cambia de sitio.
   3. **La inclinación alterna** entre secciones consecutivas (120° / 60°), como alternaba la
      luz: la página tiene dirección en lugar de un sello repetido.

   El grano se queda, pero su trabajo ahora es OTRO y sólo uno: romper el escalonado de las
   transiciones suaves. Por eso baja al 55 % — como textura no aportaba nada. */
/* El campo de luz vive en el BODY y va fijo al viewport, no en cada sección. Con una capa
   por sección cada una reiniciaba su degradado, así que las bandas se cortaban en seco sobre
   la línea horizontal de cada borde: bandas diagonales empezando y acabando en un canto recto
   se leen como parcheado, no como luz. Y no vale subirlo a `main` con tamaño automático: el
   degradado se escalaría a los 8.000 px de la página y quedaría una sola banda gigantesca.
   `fixed` lo ata al viewport, así que las bandas tienen escala de pantalla y el campo es UNO
   para toda la página. El contenido pasa por delante de una luz que no se mueve, que es
   justo el efecto de la referencia. */
body {
  background-color: #fff;
  background-image:
    url('/assets/brand/grain.svg'),
    linear-gradient(118deg,
      rgba(0, 144, 204, 0)     4%,
      rgba(0, 144, 204, .05)   7%,
      rgba(0, 144, 204, .05)  16%,
      rgba(0, 144, 204, 0)    19%,
      rgba(0, 144, 204, 0)    24%,
      rgba(0, 144, 204, .03)  25.5%,
      rgba(0, 144, 204, .03)  29%,
      rgba(0, 144, 204, 0)    30.5%,
      rgba(228, 0, 132, 0)    55%,
      rgba(228, 0, 132, .024) 59%,
      rgba(228, 0, 132, .024) 72%,
      rgba(228, 0, 132, 0)    76%,
      rgba(228, 0, 132, 0)    80%,
      rgba(228, 0, 132, .04)  81.5%,
      rgba(228, 0, 132, .04)  85%,
      rgba(228, 0, 132, 0)    86.5%);
  background-repeat: repeat, no-repeat;
  background-size: 240px 240px, cover;
  background-attachment: scroll, fixed;
}

/* Las secciones claras dejan pasar el campo. El «papel» deja de ser un color opaco y pasa a
   ser un VELO cálido translúcido: sobre blanco da prácticamente el mismo tono de siempre
   —#FAF9F7 está a 1,05:1 del blanco, un 5 % de luminancia— y las franjas siguen viéndose por
   debajo. El héroe va sin velo, en blanco, que es lo que Pablo pidió el 2026-09-03. */
.sv-section--paper, .sv-section--light { background-color: rgba(150, 130, 96, .042); }
.sv-section--white { background-color: transparent; }
.sv-hero.sv-section--paper, .sv-hero.sv-section--light { background-color: transparent; }
.sv-section--mist  { background: var(--sv-mist); }
.sv-section--ink, .sv-section--deep, .sv-section--cover {
  color: #fff;
  background: linear-gradient(170deg, var(--sv-ink) 0%, var(--sv-ink-2) 100%);
}
.sv-sweep, .sv-rule-brand, .sv-card__bar, .sv-figure__bar { display: none; }


/* ── La filigrana del arco ──────────────────────────────────────────────────────
   El arco de la marca, grande, saliéndose por el canto y alternando de lado con la luz. No
   es un tercer degradado: es EL elemento gráfico propio del sitio, el mismo del logotipo.

   Vive **sólo en el margen**, y eso no es un detalle: `width: (100vw - 75rem) / 2` es
   exactamente el margen que deja el contenedor de 75 rem, así que por construcción no puede
   caer detrás de texto — y por eso puede ir al 45 % en vez de quedarse en nada. Con el
   lavado ya en su techo, cualquier capa adicional detrás de texto tumbaba el contraste: el
   presupuesto estaba agotado. Por debajo de 1.280 px no hay margen y no hay filigrana; ahí
   la atmósfera la dan el grano, el canto y el lavado, que sí son seguros a cualquier ancho. */
@media (min-width: 80rem) {
  /* Sólo sobre PAPEL, no sobre blanco. Con las dos, la filigrana salía en cuatro secciones
     de la portada y dejaba de ser un acento para volverse un patrón. Atada al papel adquiere
     además un significado: la hoja lleva la marca de agua, la página blanca va limpia. */
  .sv-section--paper::after,
  .sv-section--light::after {
    content: ''; position: absolute; z-index: 0; pointer-events: none;
    top: 50%; right: 0;
    width: calc((100vw - 75rem) / 2);
    height: clamp(22rem, 40vw, 44rem);
    transform: translateY(-50%);
    background: url('/assets/brand/arc-dots.svg') no-repeat left center / auto 100%;
    opacity: .32;
  }
  .sv-section:nth-of-type(even)::after {
    right: auto; left: 0;
    background-position: right center;
    transform: translateY(-50%) scaleX(-1);
  }
  /* El héroe ya lleva su arco de verdad: dos arcos en la misma pantalla es uno de más. */
  .sv-hero::after { content: none; }
}

/* ── 05 · EL ARCO ──────────────────────────────────────────────────────────── */
/* El arco de puntos del logotipo, a escala de sección. Es la única firma gráfica del
   sitio: aparece una vez por página como máximo en el héroe y una vez en el cierre,
   siempre en un canto y nunca detrás de texto. Se sirve como imagen de fondo (un
   fichero, cacheado) para no meter 450 círculos en el HTML de cada página. */
.sv-arc {
  position: absolute; z-index: 0; pointer-events: none;
  width: var(--arc-size, clamp(16rem, 8rem + 32vw, 34rem));
  aspect-ratio: 1;
  background: url('/assets/brand/arc-dots.svg') no-repeat center / contain;
  opacity: var(--arc-opacity, .9);
}
.sv-arc--tr { top: 0; right: 0; transform: translate(58%, -34%); }
.sv-arc--br { bottom: 0; right: 0; transform: translate(52%, 40%) rotate(180deg); }
.sv-arc--bl { bottom: 0; left: 0;  transform: translate(-62%, 44%); }
.sv-arc--tl { top: 0; left: 0;     transform: translate(-60%, -38%) rotate(180deg); }
/* El arco de una banda de tinta pasa por detrás del texto, así que su opacidad es una decisión
   de contraste: medido, con los puntos claros del arco el 55 % dejaba el texto rebajado en
   4,04:1. El 45 % lo devuelve a 4,60 con el rebajado ya subido al 74 %. */
.sv-arc--soft { --arc-opacity: .45; }
/* **El arco no se pone detrás de texto, y eso hay que medirlo, no suponerlo.** Con los
   desplazamientos anteriores el arco del héroe caía sobre el H1 por debajo de 1.024 px —hasta
   96 px de solape— y el de la banda de tinta sobre la afirmación hasta 236 px a 1.440. Ahora
   sale más de la mitad fuera de la sección, así que lo que se ve es el borde del campo de
   puntos, no su cuerpo; y **por debajo de 62 rem desaparece**, que es donde la copia ocupa el
   ancho completo y no hay ningún sitio donde el arco no estorbe. Ahí la atmósfera la dan el
   grano y el lavado, que no tienen ese problema. Verificado con `arco.mjs`: cero solapes. */
@media (max-width: 61.99rem) {
  .sv-arc { display: none; }
}

/* Hilera de puntos como remate de un bloque: el mismo gesto en pequeño. */
.sv-dots {
  display: block; height: .4375rem; width: 5.25rem;
  background: radial-gradient(circle, currentColor 38%, transparent 42%) 0 0 / .875rem .4375rem repeat-x;
  color: var(--tint, var(--sv-accent));
}


/* ── 06 · CABECERA Y PIE ───────────────────────────────────────────────────── */

.sv-header {
  position: sticky; top: 0; z-index: 40;
  background: rgba(250, 249, 247, .9);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--sv-line);
  transition: box-shadow .25s ease, background .25s ease;
}
.sv-header[data-scrolled] { box-shadow: 0 8px 28px -20px rgba(10, 36, 80, .35); background: rgba(250, 249, 247, .96); }
.sv-header__inner {
  display: flex; align-items: center; gap: .75rem;
  min-height: 4rem; padding-block: .5rem;
}
.sv-header__logo { flex: none; display: flex; align-items: center; margin-right: auto; }
.sv-header__logo img { height: clamp(2.125rem, 1.75rem + 1.3vw, 3rem); width: auto; }

/* Menú en línea: sólo a partir de 72rem, cuando cabe entero sin desplazarse. */
.sv-nav { display: none; }
.sv-nav__link {
  position: relative;
  font-size: .9375rem; font-weight: 500; color: var(--sv-text);
  white-space: nowrap; padding: .375rem 0;
}
.sv-nav__link::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -.125rem;
  height: 2px; background: var(--sv-accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform .22s cubic-bezier(.2, .6, .2, 1);
}
.sv-nav__link:hover { color: var(--sv-ink); }
.sv-nav__link:hover::after { transform: scaleX(1); }
.sv-nav__link[aria-current='page'] { color: var(--sv-ink); font-weight: 600; }
.sv-nav__link[aria-current='page']::after { transform: scaleX(1); }

.sv-header__actions { display: flex; align-items: center; gap: .625rem; }

.sv-lang { display: none; gap: 2px; }
.sv-lang__item {
  font-size: .75rem; font-weight: 600; padding: .375rem .5rem; border-radius: 6px;
  color: var(--sv-text-muted); text-transform: uppercase; letter-spacing: .04em;
}
.sv-lang__item:hover { color: var(--sv-ink); }
.sv-lang__item[aria-current] { background: var(--sv-ink); color: #fff; }

/* Menú móvil: un <details>, así funciona sin JavaScript. El panel cae bajo la
   cabecera a todo el ancho y lleva dentro los enlaces y el idioma. */
.sv-menu { position: static; }
.sv-menu__btn {
  list-style: none; cursor: pointer;
  display: grid; place-items: center;
  width: 2.75rem; height: 2.75rem; border-radius: 8px;
  color: var(--sv-ink);
}
.sv-menu__btn::-webkit-details-marker { display: none; }
.sv-menu__btn:hover { background: rgba(10, 36, 80, .06); }
.sv-menu__icon { position: relative; display: block; width: 1.25rem; height: .875rem; }
.sv-menu__icon::before, .sv-menu__icon::after, .sv-menu__icon > span {
  content: ''; position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px;
  background: currentColor; transition: transform .22s ease, opacity .18s ease;
}
.sv-menu__icon::before { top: 0; }
.sv-menu__icon > span { top: calc(50% - 1px); }
.sv-menu__icon::after { bottom: 0; }
.sv-menu[open] .sv-menu__icon::before { transform: translateY(.375rem) rotate(45deg); }
.sv-menu[open] .sv-menu__icon::after  { transform: translateY(-.375rem) rotate(-45deg); }
.sv-menu[open] .sv-menu__icon > span  { opacity: 0; }
.sv-menu__panel {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--sv-paper); border-bottom: 1px solid var(--sv-line);
  box-shadow: 0 28px 48px -28px rgba(10, 36, 80, .4);
  padding: .5rem var(--sv-pad) 1.5rem;
  display: flex; flex-direction: column; gap: .25rem;
  max-height: calc(100svh - 4.5rem); overflow-y: auto;
}
.sv-menu__link {
  display: flex; align-items: center; justify-content: space-between;
  padding: .875rem 0; border-bottom: 1px solid var(--sv-line);
  font-size: 1.0625rem; font-weight: 500; color: var(--sv-ink);
}
.sv-menu__link[aria-current='page'] { font-weight: 600; color: var(--sv-accent); }
.sv-menu__link::after { content: '→'; color: var(--sv-line-strong); transition: transform .2s ease, color .2s ease; }
.sv-menu__link:hover::after { transform: translateX(.25rem); color: var(--sv-accent); }
.sv-menu__foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 1.125rem; flex-wrap: wrap; }
.sv-menu__foot .sv-lang { display: flex; }
.sv-menu__foot .sv-lang__item { font-size: .8125rem; padding: .5rem .75rem; }

@media (min-width: 72rem) {
  .sv-header__actions > .sv-lang { display: flex; }
  .sv-header__inner { min-height: 5.25rem; gap: 2rem; }
  .sv-header__logo { margin-right: 0; }
  .sv-nav { display: flex; gap: clamp(1.25rem, .5rem + 1.4vw, 2rem); margin-inline: auto; }
  .sv-header__actions { gap: 1rem; }
  .sv-menu { display: none; }
}

.sv-footer {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, var(--sv-ink) 0%, #071B3C 100%);
  color: rgba(255, 255, 255, .78);
}
.sv-footer__top { display: none; }
.sv-footer__grid {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
  gap: clamp(1.75rem, 1.4rem + 1.5vw, 3rem);
  padding-block: clamp(3rem, 2.2rem + 2.6vw, 5rem) 2.5rem;
}
.sv-footer__brand { grid-column: 1 / -1; }
@media (min-width: 52rem) { .sv-footer__brand { grid-column: auto; } }
@media (min-width: 62rem) {
  .sv-footer__grid { grid-template-columns: minmax(0, 1.2fr) repeat(4, minmax(0, 1fr)); gap: clamp(1.5rem, 1rem + 1.4vw, 2.25rem); }
}
.sv-footer__brand img { height: 3rem; width: auto; }
.sv-footer__list { display: flex; flex-direction: column; gap: .5rem; font-size: .875rem; margin: .875rem 0 0; }
.sv-footer a { color: rgba(255, 255, 255, .78); }
.sv-footer a:hover { color: #fff; }
.sv-footer .sv-kicker { color: rgba(255, 255, 255, .92); font-size: .75rem; letter-spacing: .02em; }
.sv-footer .sv-kicker::before { display: none; }
.sv-footer__tagline { max-width: 18rem; }
.sv-footer__legal { position: relative; z-index: 1; border-top: 1px solid rgba(255, 255, 255, .14); font-size: .8125rem; }
.sv-footer__legal-inner { display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; padding-block: 1.25rem; }
.sv-footer__legal-links { display: flex; gap: 1.5rem; flex-wrap: wrap; }


/* ── 07 · BOTONES Y ENLACES ────────────────────────────────────────────────── */

.sv-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5625rem;
  font-weight: 600; font-size: .9375rem; line-height: 1; text-align: center;
  padding: .875rem 1.375rem;
  border: 1px solid transparent;
  border-radius: var(--sv-radius-md, 8px);
  cursor: pointer; white-space: nowrap;
  transition: background .2s ease, color .2s ease, border-color .2s ease,
              transform .16s cubic-bezier(.2, .6, .2, 1), box-shadow .2s ease;
}
.sv-btn:active { transform: scale(.985); }
.sv-btn--lg { padding: 1rem 1.625rem; font-size: 1rem; }

.sv-btn--cta { background: var(--sv-accent); color: #fff; box-shadow: 0 10px 24px -14px rgba(228, 0, 132, .7); }
.sv-btn--cta:hover { background: var(--sv-accent-deep); color: #fff; box-shadow: 0 14px 30px -14px rgba(228, 0, 132, .8); }
.sv-btn--arc { background: var(--sv-accent); color: #fff; padding: .625rem 1rem; font-size: .875rem; }
.sv-btn--arc:hover { background: var(--sv-accent-deep); color: #fff; }

.sv-btn--ghost { background: transparent; color: var(--sv-ink); border-color: rgba(10, 36, 80, .28); }
.sv-btn--ghost:hover { color: var(--sv-ink); border-color: var(--sv-ink); background: rgba(10, 36, 80, .04); }
.sv-on-dark .sv-btn--ghost { color: #fff; border-color: rgba(255, 255, 255, .38); }
.sv-on-dark .sv-btn--ghost:hover { color: #fff; border-color: #fff; background: rgba(255, 255, 255, .08); }

.sv-btn__arrow {
  width: 1.0625rem; height: 1.0625rem; flex: none;
  background-color: currentcolor;
  mask: url('/assets/icons/arrow-right.svg') no-repeat center / contain;
  -webkit-mask: url('/assets/icons/arrow-right.svg') no-repeat center / contain;
  transition: transform .2s cubic-bezier(.2, .6, .2, 1);
}
.sv-btn:hover .sv-btn__arrow { transform: translateX(.1875rem); }

/* Enlace con flecha: seminegro en tinta, la flecha se mueve al pasar. */
.sv-link-arrow {
  display: inline-block; font-size: .9375rem; font-weight: 600; color: var(--sv-ink);
  text-decoration: underline; text-decoration-color: transparent;
  text-underline-offset: .22em; text-decoration-thickness: 1.5px;
  transition: color .2s ease, text-decoration-color .2s ease;
}
.sv-link-arrow:hover { color: var(--sv-accent); text-decoration-color: currentColor; }
.sv-on-dark .sv-link-arrow { color: #fff; }
.sv-on-dark .sv-link-arrow:hover { color: var(--sv-blue-300); }

/* Enlace al padre en el héroe de una página hija: dice de dónde cuelga. */
.sv-crumb {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .8125rem; font-weight: 600; color: var(--sv-blue-600);
}
.sv-crumb::before {
  content: ''; width: .4375rem; height: .4375rem; border-radius: 50%;
  background: var(--tint, var(--sv-accent)); flex: none;
}
.sv-crumb:hover { color: var(--sv-accent); }
.sv-crumb__sep { color: var(--sv-line-strong); font-weight: 400; }
.sv-crumb__here { color: var(--sv-text-muted); font-weight: 500; }

.sv-chips { display: flex; flex-wrap: wrap; gap: .625rem; }
.sv-anchors { display: flex; flex-wrap: wrap; gap: .625rem; }
.sv-chip {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .875rem; font-weight: 500;
  padding: .5625rem 1rem; border-radius: 999px;
  border: 1px solid var(--sv-line-strong); background: #fff; color: var(--sv-ink);
  transition: border-color .2s ease, color .2s ease, transform .2s ease, background .2s ease;
}
.sv-chip:hover { border-color: var(--sv-ink); color: var(--sv-ink); transform: translateY(-1px); }
.sv-chip--cap::before { content: ''; flex: none; width: .5rem; height: .5rem; border-radius: 50%; background: var(--c, var(--sv-accent)); }
.sv-on-dark .sv-chip { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .28); color: #fff; }
.sv-on-dark .sv-chip:hover { border-color: #fff; }

.sv-tag { font-size: .75rem; font-weight: 600; padding: .3125rem .625rem; border-radius: 999px; background: var(--sv-mist); color: var(--sv-blue-700); }

.sv-list { list-style: disc; margin: 0; padding-left: 1.25rem; display: grid; gap: .5rem; }
.sv-list > li { line-height: 1.6; }


/* ── 08 · HÉROE ────────────────────────────────────────────────────────────── */
/* Texto a la izquierda, imagen o figura a la derecha, y el arco en el canto superior
   derecho. Apila en móvil con la imagen debajo del texto. El héroe no comparte
   forma con el resto de la página: es la puerta, no el pasillo. */
.sv-hero { --sv-section-pad: clamp(2.75rem, 1.6rem + 4vw, 6rem); }
.sv-hero__grid { display: grid; gap: clamp(2rem, 1.4rem + 3vw, 4.5rem); align-items: center; }
.sv-hero__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 1.125rem; max-width: 40rem; }
.sv-hero__copy > .sv-h1 { margin-top: .25rem; }
.sv-hero__copy > .sv-lead { max-width: 36rem; }
.sv-hero__actions { display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: center; margin-top: .5rem; }
.sv-hero__media { position: relative; margin: 0; border-radius: var(--sv-radius-xl, 16px); overflow: hidden; }
.sv-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: var(--foco, 50% 50%); aspect-ratio: 3 / 2; }
.sv-hero__media--tall img { aspect-ratio: 4 / 5; }
@media (min-width: 62rem) {
  .sv-hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .sv-hero__grid--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sv-hero__media img { aspect-ratio: 4 / 5; }
  .sv-hero__media--wide img { aspect-ratio: 4 / 3; }
}
/* Sin imagen: la copia ocupa la mitad y el arco el resto. */
.sv-hero--plain .sv-hero__copy { max-width: 46rem; }

/* La portada: el titular con la palabra que gira y las dos acciones. */
.sv-hero--home .sv-h1 { font-size: clamp(2.25rem, 1.5rem + 3vw, 3.875rem); }
.sv-hero-word { display: inline-block; }

/* Distintivos de pertenencia (AEDEMO, ESOMAR): una fila, sin rejilla. */
.sv-socios { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(1.75rem, 1.2rem + 2.4vw, 3.25rem); }
.sv-socios img { height: clamp(2.5rem, 2.1rem + 1.2vw, 3.5rem); width: auto; display: block; }
/* Un sello redondo no se mide como un wordmark. Medido el 2026-09-04 sobre el arte de ESOMAR: a la
   altura de la regla de arriba (40–56 px) su anillo de texto es una mancha y sólo empieza a leerse
   pasados los ~88 px; Pablo eligió 104. Mismo tramo de viewport que la regla anterior escalado
   ×1,857, así que los dos distintivos crecen a la vez y la fila no se descompasa.
   Es una CLASE y no un `style=""`: «sello» es un tipo de distintivo, no un parámetro de esta
   instancia. Y el selector va compuesto porque `.sv-socios img` le gana en especificidad. */
.sv-socios img.sv-socios__sello { height: clamp(4.64rem, 3.9rem + 2.23vw, 6.5rem); }


/* ── 09 · PATRONES EDITORIALES ─────────────────────────────────────────────── */

/* Entrada de capítulo: titular corto a la izquierda, prosa a la derecha. */
.sv-intro { display: grid; gap: clamp(1.25rem, 1rem + 1.4vw, 2.5rem); align-items: start; }
.sv-intro__head { display: flex; flex-direction: column; gap: .875rem; align-items: flex-start; }
.sv-intro__body { display: flex; flex-direction: column; gap: 1rem; max-width: 42rem; }
@media (min-width: 62rem) {
  .sv-intro { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2.5rem, 2rem + 3vw, 5rem); }
  /* `--sticky` se conserva como alias explícito y NO es una clase muerta: doce páginas la
     llevan y documenta la intención de quien la escribió. Lo que cambió es que dejó de ser una
     variante, porque adherir el titular pasó a ser el comportamiento por defecto del patrón. */
  /* El titular acompaña a su columna en lugar de quedarse arriba.
     Medido el 2026-09-02 sobre el sitio construido: la cabecera de este patrón es corta por
     construcción —antetítulo, titular y como mucho una línea— y el cuerpo puede ser una lista
     larga, así que a 1440 px quedaban entre 240 y 1.090 px de hueco muerto a su lado en 17
     secciones. Con `sticky` ese hueco pasa a ser útil: el titular es el ancla de lo que estás
     leyendo mientras bajas. No cuesta nada donde el cuerpo es corto —no hay nada que
     desplazar— y se apaga solo por debajo de 62 rem, donde el patrón apila.
     El 6.5rem deja aire bajo la cabecera adherida, que mide 5.25rem a partir de 72 rem. */
  .sv-intro__head { position: sticky; top: 6.5rem; }
}
/* `prefers-reduced-motion` NO desactiva esto a propósito: un titular adherido es maquetación,
   no animación —no hay transición ni desplazamiento propio— y es el comportamiento que tiene
   cualquier documentación técnica. Lo que sí se desactiva ahí es el paralaje de las fotos. */
/* Variante centrada, corta: para abrir una lista o una prueba. */
.sv-intro--center { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
.sv-intro--center .sv-intro__head { align-items: center; max-width: 46rem; }
.sv-intro--center .sv-intro__body { align-items: center; text-align: center; }

/* Pasos: lista numerada editorial. El numeral en el color de su tramo, sin caja. */
.sv-steps { display: grid; gap: 0; counter-reset: paso; }
.sv-step {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.125rem clamp(1.125rem, .9rem + 1.2vw, 2rem);
  align-items: start; padding-block: clamp(1.375rem, 1.1rem + 1.2vw, 2rem);
  border-top: 1px solid var(--sv-line-row);
}
.sv-steps > .sv-step:last-child { border-bottom: 1px solid var(--sv-line-row); }
.sv-step__num { min-width: 3rem; padding-top: .125rem; }
.sv-step__body { display: flex; flex-direction: column; gap: .5rem; max-width: 42rem; }
.sv-step__body > .sv-text, .sv-step__body > .sv-text--sm { color: var(--sv-text); }
/* En dos columnas cuando hay cuatro o más pasos y espacio de sobra. */
@media (min-width: 62rem) {
  .sv-steps--2col { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2rem, 1.5rem + 2.6vw, 4rem); }
  .sv-steps--2col > .sv-step:last-child { border-bottom: 0; }
  .sv-steps--2col > .sv-step:nth-last-child(-n+2) { border-bottom: 1px solid var(--sv-line-row); }
}
/* En fila: para tres o cuatro pasos cortos; una línea en el color del tramo encima. */
/* Con `auto-fit`, TRES pasos caen 2 + 1 en la banda de 600 a 990 px y el tercero se queda solo
   con media fila en blanco. El número de piezas se sabe —lo dice el propio marcado— así que se
   declara con `:has()` en lugar de dejar que lo decida el ancho: uno o tres, nunca dos. */
.sv-steps--row { grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr)); gap: clamp(1.5rem, 1.1rem + 1.6vw, 2.75rem); }
.sv-steps--row:has(> :nth-child(3):last-child) { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 62rem) {
  .sv-steps--row:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.sv-steps--row > .sv-step { grid-template-columns: minmax(0, 1fr); align-content: start; border-top: 2px solid var(--tint, var(--sv-accent)); border-bottom: 0 !important; padding-top: 1.25rem; padding-bottom: 0; gap: .875rem; }
.sv-steps--row > .sv-step .sv-step__num { min-width: 0; }
.sv-on-dark .sv-step { border-color: rgba(255, 255, 255, .16); }
.sv-on-dark .sv-step__body > .sv-text, .sv-on-dark .sv-step__body > .sv-text--sm { color: rgba(255, 255, 255, .82); }

/* Puertas: el índice de un hub hacia sus hijas. Filas con numeral, titular, una
   frase y la flecha. Toda la fila es el enlace. */
/* El filete acaba donde acaba la fila, no en el canto del contenedor: con el ancho completo,
   la línea seguía 340 px más allá del último carácter y de la flecha. 54 rem es lo que miden
   el numeral, la medida de lectura y la flecha con sus huecos. */
.sv-doors { display: grid; max-width: 54rem; border-top: 1px solid var(--sv-line-row); }
/* La flecha va PEGADA al texto y no al canto del contenedor. Con `1fr` en la columna del
   cuerpo, el cuerpo se estiraba a todo el ancho —aunque su texto se tope en 44 rem— y la
   flecha quedaba a unos 340 px del final de la frase, como si no fuera de esa fila. Con
   `minmax(0, 44rem)` la columna mide lo que mide la medida de lectura y la flecha la sigue;
   la fila entera sigue siendo el enlace. */
.sv-door {
  display: grid; grid-template-columns: auto minmax(0, 44rem) auto; justify-content: start;
  gap: .75rem clamp(1rem, .8rem + 1.2vw, 2rem); align-items: start;
  padding-block: clamp(1.25rem, 1rem + 1.2vw, 1.875rem);
  border-bottom: 1px solid var(--sv-line-row);
  color: inherit;
  transition: background .2s ease;
}
.sv-door__num { min-width: 3rem; padding-top: .1875rem; }
.sv-door__body { display: flex; flex-direction: column; gap: .375rem; max-width: 44rem; }
.sv-door__title { font-size: clamp(1.125rem, 1.05rem + .4vw, 1.375rem); font-weight: 600; line-height: 1.3; letter-spacing: -.012em; color: var(--sv-ink); transition: color .2s ease; }
.sv-door__text { font-size: .9375rem; line-height: 1.6; color: var(--sv-text-muted); }
/* Misma regla que el antetítulo, y por el mismo motivo medido: el color va en el PUNTO, no en
   el texto. A 13 px esto es texto pequeño y necesita 4,5:1, y con el tinte gobernándolo el cian
   daba 3,21 y el magenta 4,09 sobre papel —medido sobre los píxeles renderizados de la portada,
   no sobre la teoría—. El texto va al magenta oscuro de la paleta, que da 5,66. */
.sv-door__label { display: inline-flex; align-items: center; gap: .4375rem; margin-top: .125rem; font-size: .8125rem; font-weight: 600; color: var(--sv-accent-deep); }
.sv-door__label::before { content: ''; width: .375rem; height: .375rem; border-radius: 50%; background: var(--tint, var(--sv-accent)); }
.sv-door__arrow {
  width: 1.375rem; height: 1.375rem; flex: none; margin-top: .25rem;
  background-color: var(--sv-line-strong);
  mask: url('/assets/icons/arrow-right.svg') no-repeat center / contain;
  -webkit-mask: url('/assets/icons/arrow-right.svg') no-repeat center / contain;
  transition: transform .22s cubic-bezier(.2, .6, .2, 1), background-color .2s ease;
}
.sv-door:hover .sv-door__title { color: var(--tint, var(--sv-accent)); }
.sv-door:hover .sv-door__arrow { transform: translateX(.375rem); background-color: var(--tint, var(--sv-accent)); }
.sv-door:focus-visible { outline-offset: -3px; border-radius: 8px; }
.sv-on-dark .sv-doors, .sv-on-dark .sv-door { border-color: rgba(255, 255, 255, .16); }
.sv-on-dark .sv-door__title { color: #fff; }
.sv-on-dark .sv-door__text { color: rgba(255, 255, 255, .7); }

/* Puertas con fotografía: para las tres áreas en la portada. */
.sv-doors--tiles { display: grid; border: 0; gap: clamp(1.25rem, 1rem + 1.4vw, 2rem); grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr)); }
.sv-tile {
  display: flex; flex-direction: column; gap: .875rem; color: inherit;
  border-radius: var(--sv-radius-lg, 12px);
}
.sv-tile__media { position: relative; margin: 0; border-radius: var(--sv-radius-lg, 12px); overflow: hidden; aspect-ratio: 4 / 3; background: var(--sv-mist); }
.sv-tile__media img { width: 100%; height: 100%; object-fit: cover; object-position: var(--foco, 50% 50%); transition: transform .6s cubic-bezier(.2, .6, .2, 1); }
.sv-tile:hover .sv-tile__media img { transform: scale(1.035); }
.sv-tile__body { display: flex; flex-direction: column; gap: .375rem; }
.sv-tile__title { display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-size: clamp(1.125rem, 1.05rem + .4vw, 1.375rem); font-weight: 600; letter-spacing: -.012em; color: var(--sv-ink); transition: color .2s ease; }
.sv-tile__title .sv-door__arrow { margin: 0; }
.sv-tile:hover .sv-tile__title { color: var(--tint, var(--sv-accent)); }
.sv-tile:hover .sv-door__arrow { transform: translateX(.375rem); background-color: var(--tint, var(--sv-accent)); }
.sv-tile__text { font-size: .9375rem; line-height: 1.6; color: var(--sv-text-muted); }

/* Columnas: tres o cuatro puntos en paralelo, sin caja. Una línea encima en el color
   del tramo y, si hace falta, el numeral. */
.sv-columns { display: grid; gap: clamp(1.75rem, 1.2rem + 2vw, 3rem) clamp(1.5rem, 1.1rem + 1.8vw, 3rem); grid-template-columns: repeat(auto-fit, minmax(min(15.5rem, 100%), 1fr)); }
.sv-col { display: flex; flex-direction: column; gap: .75rem; padding-top: 1.125rem; border-top: 2px solid var(--tint, var(--sv-accent)); }
.sv-col--soft { border-top-color: var(--sv-line); }
/* Con un número conocido de columnas se declara, para que nunca quede una huérfana. */
@media (min-width: 48rem) {
  .sv-columns--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sv-columns--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 62rem) { .sv-columns--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sv-col > .sv-num { font-size: 1.125rem; letter-spacing: 0; }
.sv-col > .sv-text, .sv-col > .sv-text--sm { color: var(--sv-text); }
.sv-on-dark .sv-col > .sv-text, .sv-on-dark .sv-col > .sv-text--sm { color: rgba(255, 255, 255, .82); }
.sv-on-dark .sv-col--soft { border-top-color: rgba(255, 255, 255, .18); }

/* Afirmación: una sola frase grande. Una por página como máximo. */
.sv-statement { max-width: 52rem; }
.sv-statement__text {
  font-size: clamp(1.5rem, 1.15rem + 1.7vw, 2.5rem);
  font-weight: 500; line-height: 1.22; letter-spacing: -.02em;
  color: var(--sv-ink); text-wrap: balance;
}
.sv-statement__text b { font-weight: 600; color: var(--sv-accent); }
.sv-on-dark .sv-statement__text { color: #fff; }
.sv-on-dark .sv-statement__text b { color: var(--sv-blue-300); }
.sv-statement__note { margin-top: 1.25rem; max-width: 36rem; }

/* Definición: un término y su explicación, en dos columnas. Para glosarios cortos
   («qué es», «qué no es») sin tarjetas. */
.sv-defs { display: grid; border-top: 1px solid var(--sv-line-row); }
.sv-def { display: grid; gap: .5rem 2rem; padding-block: 1.25rem; border-bottom: 1px solid var(--sv-line-row); }
.sv-def__term { font-weight: 600; color: var(--sv-ink); }
.sv-def__desc { color: var(--sv-text); }
@media (min-width: 48rem) { .sv-def { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); } }
/* Sobre tinta. Faltaba, y por eso una página no pudo llevar su entregable a la banda oscura. */
.sv-on-dark .sv-defs, .sv-on-dark .sv-def { border-color: rgba(255, 255, 255, .16); }
.sv-on-dark .sv-def__term { color: #fff; }
.sv-on-dark .sv-def__desc { color: rgba(255, 255, 255, .82); }

/* Siguiente paso: dos o tres enlaces a páginas relacionadas, al final del hilo. */
.sv-next { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); }
.sv-next__item {
  display: flex; flex-direction: column; gap: .5rem; color: inherit;
  padding: 1.25rem 1.375rem; border: 1px solid var(--sv-line); border-radius: var(--sv-radius-lg, 12px);
  background: #fff;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.sv-next__label { font-size: .75rem; font-weight: 600; color: var(--sv-text-muted); }
.sv-next__title { display: flex; align-items: center; justify-content: space-between; gap: .75rem; font-weight: 600; color: var(--sv-ink); line-height: 1.3; }
.sv-next__title .sv-door__arrow { width: 1.125rem; height: 1.125rem; margin: 0; }
.sv-next__text { font-size: .875rem; line-height: 1.55; color: var(--sv-text-muted); }
.sv-next__item:hover { border-color: var(--tint, var(--sv-accent)); }
.sv-next__item:hover .sv-door__arrow { transform: translateX(.3rem); background-color: var(--tint, var(--sv-accent)); }
.sv-on-dark .sv-next__item { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .18); }
.sv-on-dark .sv-next__title { color: #fff; }
.sv-on-dark .sv-next__text, .sv-on-dark .sv-next__label { color: rgba(255, 255, 255, .74); }

/* Cierre: la puerta al contacto. Titular y texto a la izquierda, acción a la derecha. */
.sv-cta { display: grid; gap: clamp(1.5rem, 1.2rem + 1.6vw, 2.5rem); align-items: center; }
.sv-cta__copy { display: flex; flex-direction: column; gap: .875rem; max-width: 36rem; }
.sv-cta__actions { display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: center; }
@media (min-width: 62rem) {
  .sv-cta { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .sv-cta__actions { justify-content: flex-end; }
}

/* Bisagra heredada de la portada: se conserva como titular centrado sin hilo. */
.sv-hinge { text-align: center; }
.sv-hinge__thread { display: none; }
.sv-hinge__lead { max-width: min(38rem, 66ch); margin-inline: auto; }


/* ── 10 · TARJETAS Y FICHAS ────────────────────────────────────────────────── */
/* La tarjeta ya no es la respuesta por defecto: se reserva a lo que ES una ficha
   —un caso, una persona, una aparición en prensa, una cita—. Plana en reposo, se
   levanta sólo si es interactiva. */
.sv-card {
  position: relative; display: flex; flex-direction: column; gap: .75rem;
  background: #fff; border: 1px solid var(--sv-line); border-radius: var(--sv-radius-lg, 12px);
  padding: clamp(1.375rem, 1.2rem + .8vw, 1.875rem) clamp(1.375rem, 1.15rem + 1vw, 2rem);
  transition: transform .22s cubic-bezier(.2, .6, .2, 1), box-shadow .22s ease, border-color .22s ease;
}
@media (hover: hover) and (pointer: fine) {
  .sv-btn:hover { transform: translateY(-1px); }
  .sv-card--hover:hover { transform: translateY(-3px); border-color: var(--sv-line-strong); box-shadow: 0 26px 48px -28px rgba(10, 36, 80, .38); }
}
.sv-card__head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.sv-card__foot { margin-top: auto; padding-top: .375rem; }
.sv-card__hair { flex: 1; height: 1px; background: var(--sv-line); }
.sv-card__note { font-size: .875rem; line-height: 1.5; color: var(--sv-text-muted); }
/* Igual que el antetítulo y la etiqueta de puerta: a 12 px, un tinte cian no llega a 4,5:1. */
.sv-card__kicker { color: var(--sv-accent-deep); }
.sv-card__kicker::before { background: var(--c, var(--tint, var(--sv-accent))); }
.sv-card__links { display: flex; flex-direction: column; gap: .375rem; }
.sv-on-dark .sv-card { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .16); }

.sv-icon-frame { flex: none; display: grid; place-items: center; width: 3rem; height: 3rem; padding: .625rem; border-radius: 10px; background: var(--sv-mist); color: var(--tint, var(--sv-blue-700)); }
.sv-icon-frame svg { width: 100%; height: 100%; }
.sv-icon { flex: none; width: 1.125rem; height: 1.125rem; color: var(--tint, inherit); }

/* Avisos */
/* La medida es la de la prosa: un aviso a todo el ancho del `sv-wrap` medía 1131 px
   frente a los 736 de los párrafos que introduce. */
.sv-callout { display: flex; align-items: flex-start; max-width: 46rem; gap: .75rem; padding: 1rem 1.25rem; border-radius: var(--sv-radius-lg, 12px); font-size: .875rem; line-height: 1.55; }
.sv-callout--warn { background: #FDECF5; border: 1px solid #F0D3E6; color: var(--sv-purple-500); }
/* Etiqueta inicial del aviso («Pendiente:»). El `nowrap` es para que no se parta ELLA, así
   que sólo vale para una etiqueta corta: una frase entera con nowrap desborda la ventana en
   el móvil, que es lo que pasaba en las seis páginas legales. */
.sv-callout__tag { font-weight: 600; white-space: nowrap; }
.sv-callout code { font-family: 'Inconsolata', Consolas, ui-monospace, monospace; }
/* Fondo papel y no blanco: la mitad de las secciones del sitio son blancas, y ahí un aviso
   blanco sólo se distinguía por su filete de 1 px, o sea que no se distinguía. */
.sv-callout--info { background: var(--sv-paper); border: 1px solid var(--sv-line); color: var(--sv-text-muted); align-items: center; }
.sv-on-dark .sv-callout--info { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .18); color: rgba(255, 255, 255, .78); }
.sv-callout--brand {
  position: relative; max-width: 46rem; align-items: center;
  background: #fff; border: 1px solid var(--sv-line); border-left: 3px solid var(--sv-accent);
  color: var(--sv-text);
}
.sv-callout--brand b { font-weight: 600; color: var(--sv-ink); }
@media (max-width: 40rem) { .sv-callout--info, .sv-callout--brand { align-items: flex-start; } }

/* Fichas de trayectoria */
.sv-person {
  display: flex; flex-direction: column; gap: .875rem;
  padding: 1.25rem 1.375rem 1.375rem; border-radius: var(--sv-radius-lg, 12px);
  background: #fff; border: 1px solid var(--sv-line);
}
.sv-person__head { display: flex; align-items: center; gap: .875rem; }
.sv-person__id { display: flex; flex-direction: column; gap: .125rem; min-width: 0; }
.sv-person__avatar {
  width: 3.25rem; height: 3.25rem; flex: none; border-radius: 50%; overflow: hidden;
  display: grid; place-items: center;
  background: var(--c, var(--sv-accent)); color: #fff;
  font-size: 1.125rem; font-weight: 600; letter-spacing: .01em;
}
.sv-person__avatar img { width: 100%; height: 100%; object-fit: cover; }
.sv-person__name { font-weight: 600; line-height: 1.3; color: var(--sv-ink); }
.sv-person__role { font-size: .875rem; line-height: 1.4; color: var(--sv-text-muted); }
.sv-person__bio  { font-size: .9375rem; line-height: 1.6; }
.sv-person--tbd { background: transparent; border-style: dashed; }
.sv-person--tbd .sv-person__name { font-weight: 500; font-style: italic; color: var(--sv-text-muted); }
.sv-person--tbd .sv-person__avatar { background: transparent; border: 1px dashed var(--c, var(--sv-accent)); }
.sv-person__bio--tbd { font-style: italic; color: var(--sv-text-muted); }

/* Lista de casos: fichas separadas por filete, la foto alterna de lado. */
.sv-cases { display: grid; gap: clamp(3rem, 2rem + 4vw, 5.5rem); }
.sv-case { scroll-margin-top: clamp(5rem, 4rem + 4vw, 7rem); }
.sv-case + .sv-case { border-top: 1px solid var(--sv-line); padding-top: clamp(3rem, 2rem + 4vw, 5.5rem); }
.sv-case__metric { margin-top: 1.25rem; padding-top: 1.125rem; border-top: 2px solid var(--tint, var(--sv-accent)); display: flex; flex-direction: column; gap: .75rem; }
/* Miniatura de la categoría del caso, al margen y no como figura.
   Los seis casos necesitan diferenciarse —si no, son seis bloques de texto seguidos en 6.900 px—
   pero seis figuras grandes en fila sí serían el mismo gesto repetido seis veces. Un cuadrado
   pequeño junto a la cifra da el ancla visual sin el gesto. A este tamaño, además, deja de
   importar el estilismo de las dos fotos más flojas del banco. */
/* Apilado, la miniatura y la cifra van una al lado de la otra: en columna, la miniatura de
   190 px se quedaba sola en una fila de 715 px con dos tercios en blanco. */
.sv-case__thumb { margin: 0; max-width: 12rem; border-radius: var(--sv-radius-lg, 12px); overflow: hidden; background: var(--sv-mist); }
@media (max-width: 61.99rem) {
  .sv-case__metric { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: .75rem 1.25rem; align-items: start; }
  .sv-case__thumb { grid-row: span 3; max-width: none; }
}
.sv-case__thumb img { width: 100%; aspect-ratio: 1; object-fit: cover; object-position: var(--foco, 50% 50%); }
.sv-case__thumb figcaption { display: none; }

/* ── 11 · DATOS Y GRÁFICOS ─────────────────────────────────────────────────── */

.sv-stat { display: flex; flex-direction: column; gap: .625rem; }
.sv-stat__value {
  font-size: clamp(2.25rem, 1.7rem + 2.2vw, 3.25rem);
  font-weight: 600; line-height: 1; letter-spacing: -.03em; color: #fff;
  font-variant-numeric: tabular-nums;
}
.sv-stat__rule { display: block; height: 2px; width: 2.25rem; border-radius: 2px; transform-origin: left center; background: var(--tint, var(--sv-blue-300)); }
.sv-stat__label { font-size: .9375rem; line-height: 1.45; color: rgba(255, 255, 255, .74); }
/* Cifras sobre suelo claro */
.sv-stat--light .sv-stat__value { color: var(--sv-ink); }
.sv-stat--light .sv-stat__label { color: var(--sv-text-muted); }
.sv-stat--light .sv-stat__rule { background: var(--tint, var(--sv-accent)); }

.sv-statblock { display: flex; flex-direction: column; gap: .375rem; padding: 1.25rem 1.5rem; border-radius: 12px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .18); }
.sv-statblock__value { font-weight: 600; line-height: 1; font-size: clamp(2rem, 1.6rem + 1.8vw, 2.75rem); letter-spacing: -.03em; color: #fff; font-variant-numeric: tabular-nums; }
.sv-statblock__unit { font-size: .45em; font-weight: 600; letter-spacing: 0; }
.sv-statblock__label { font-size: .875rem; line-height: 1.4; color: rgba(255, 255, 255, .78); }
.sv-statblock__delta { font-size: .8125rem; font-weight: 600; color: var(--sv-blue-300); }

.sv-metric { display: flex; flex-direction: column; gap: .25rem; }
.sv-metric__value { font-weight: 600; line-height: 1; font-size: clamp(2rem, 1.6rem + 1.8vw, 2.75rem); letter-spacing: -.03em; color: var(--tint, var(--sv-ink)); font-variant-numeric: tabular-nums; }
.sv-metric__unit { font-size: .45em; font-weight: 600; letter-spacing: 0; }
.sv-metric__label { font-size: .875rem; line-height: 1.4; color: var(--sv-text-muted); }

.sv-chart {
  position: relative; display: flex; flex-direction: column; gap: .75rem;
  margin: 0; padding: 1.25rem 1.375rem 1.125rem;
  background: #fff; color: var(--sv-text);
  border: 1px solid var(--sv-line); border-radius: var(--sv-radius-lg, 12px); overflow: hidden;
}
.sv-chart__head { display: flex; flex-direction: column; gap: .375rem; }
.sv-chart__conclusion { font-weight: 500; color: var(--sv-ink); }
.sv-chart__body { display: grid; place-items: center; min-height: 0; }
.sv-chart__body svg { width: 100%; max-width: 24rem; height: auto; }
.sv-chart__foot { margin: 0; padding-top: .625rem; border-top: 1px solid var(--sv-line); font-family: 'Inconsolata', Consolas, ui-monospace, monospace; font-size: .6875rem; line-height: 1.5; letter-spacing: .03em; color: var(--sv-text-muted); }
.sv-on-dark .sv-chart { border-color: rgba(255, 255, 255, .14); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6); }

/* Rótulos de los gráficos SVG en línea (src/fragments/chart-*.svg). Eran style="" dentro del
   propio SVG; como el SVG va inline, las clases del sitio le llegan y `fill` sí admite var()
   cuando es propiedad CSS (lo que no lo admite es el ATRIBUTO de presentación). */
.sv-svg { display: block; overflow: visible; }
.sv-svg-label { font-family: 'Poppins', Arial, sans-serif; font-size: 12px; fill: var(--sv-text-muted); }
.sv-svg-num   { font-family: 'Poppins', Arial, sans-serif; font-size: 12px; fill: var(--sv-text-muted); font-variant-numeric: tabular-nums; }
.sv-svg-title { font-family: 'Poppins', Arial, sans-serif; font-size: 11px; font-weight: 600; fill: #183C90; }
.sv-svg-hi    { font-family: 'Poppins', Arial, sans-serif; font-size: 13px; font-weight: 600; fill: #E40084; font-variant-numeric: tabular-nums; }
.sv-svg-caps  { font-family: 'Inconsolata', Consolas, ui-monospace, monospace; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; fill: var(--sv-blue-700); }

/* Bloque de IA heredado: ahora es tinta plana con borde. */
.sv-ai { position: relative; overflow: hidden; border-radius: 16px; padding: clamp(1.75rem, 1.2rem + 2.6vw, 2.875rem); color: #fff; background: linear-gradient(170deg, var(--sv-ink) 0%, var(--sv-ink-2) 100%); }

.sv-spark { display: flex; align-items: flex-end; gap: 4px; height: 2.375rem; }
.sv-spark > span { flex: 1; border-radius: 2px; }
.sv-heat { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; }
.sv-heat > span { aspect-ratio: 1; border-radius: 2px; }

/* Tabla comparativa: la forma correcta y accesible de comparar criterio a criterio. */
/* Sin pista de desplazamiento, a 390 px la tabla se corta a media columna y nada dice que
   siga (medido: 196 px fuera de pantalla en HUT/CLT y en Test de producto). Las dos tapas van
   con el contenido y las dos sombras con el marco: al llegar al tope, la tapa cubre su sombra
   y la pista desaparece. Sin JavaScript y sin duplicar el marcado. */
.sv-table-wrap {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--sv-line); border-radius: var(--sv-radius-lg, 12px);
  background:
    linear-gradient(to right, #fff 40%, rgba(255, 255, 255, 0)) 0 0 / 2.5rem 100% no-repeat local,
    linear-gradient(to left,  #fff 40%, rgba(255, 255, 255, 0)) 100% 0 / 2.5rem 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(20, 22, 26, .17), rgba(20, 22, 26, 0)) 0 0 / .875rem 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(20, 22, 26, .17), rgba(20, 22, 26, 0)) 100% 0 / .875rem 100% no-repeat scroll,
    #fff;
}
.sv-table { width: 100%; min-width: 34rem; border-collapse: collapse; font-size: .9375rem; line-height: 1.5; text-align: left; }
.sv-table th, .sv-table td { padding: .9375rem 1.125rem; border-bottom: 1px solid var(--sv-line); vertical-align: top; }
.sv-table thead th { font-size: .8125rem; font-weight: 600; color: var(--sv-ink); background: var(--sv-paper); border-bottom: 1px solid var(--sv-line-strong); }
.sv-table tbody th { font-weight: 600; color: var(--sv-ink); white-space: nowrap; }
.sv-table tbody tr:last-child th, .sv-table tbody tr:last-child td { border-bottom: 0; }
.sv-on-dark .sv-table-wrap { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .16); }
.sv-on-dark .sv-table th, .sv-on-dark .sv-table td { border-color: rgba(255, 255, 255, .14); }
.sv-on-dark .sv-table thead th, .sv-on-dark .sv-table tbody th { color: #fff; background: transparent; }


/* ── 12 · FIGURAS Y VÍDEO ──────────────────────────────────────────────────── */

.sv-figure { position: relative; margin: 0; border-radius: var(--sv-radius-lg, 12px); overflow: hidden; background: var(--sv-mist); }
.sv-figure img { width: 100%; object-fit: cover; object-position: var(--foco, 50% 50%); }
.sv-figure, .sv-hero__media, .sv-tile__media, .sv-office img { outline: 1px solid rgba(10, 36, 80, .1); outline-offset: -1px; }
.sv-figure--soft { border-radius: var(--sv-radius-xl, 16px); }
.sv-figure__caption {
  position: absolute; left: .875rem; bottom: .875rem;
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .375rem .75rem; border-radius: 999px;
  background: rgba(10, 36, 80, .7); backdrop-filter: blur(6px);
  font-family: 'Inconsolata', Consolas, ui-monospace, monospace;
  font-size: .75rem; letter-spacing: .04em; color: #fff;
}
/* Figura con pie: la imagen redondeada y la nota monoespaciada debajo, fuera. */
.sv-figure--captioned { border-radius: 0; overflow: visible; background: transparent; outline: 0; }
.sv-figure--captioned img { border-radius: var(--sv-radius-lg, 12px); outline: 1px solid rgba(10, 36, 80, .1); outline-offset: -1px; }

.sv-ratio-4-3  { aspect-ratio: 4 / 3; }
.sv-ratio-3-2  { aspect-ratio: 3 / 2; }
.sv-ratio-16-9 { aspect-ratio: 16 / 9; }
.sv-ratio-2-1  { aspect-ratio: 2 / 1; }
.sv-ratio-21-9 { aspect-ratio: 21 / 9; }
.sv-ratio-4-5  { aspect-ratio: 4 / 5; }
.sv-ratio-1-1  { aspect-ratio: 1 / 1; }

/* Par de figuras que hay que poder comparar de un vistazo. */
.sv-par { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); gap: clamp(.75rem, .6rem + .6vw, 1.25rem); }

.sv-video { display: block; width: 100%; height: auto; border-radius: var(--sv-radius-md, 8px); overflow: hidden; background: var(--sv-ink); }
.sv-videoframe {
  position: relative; padding: var(--sv-space-2, 8px);
  border-radius: var(--sv-radius-xl, 16px); overflow: hidden;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 34px 80px -34px rgba(0, 0, 0, .8);
}

/* Oficinas */
.sv-office { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 1rem; align-items: center; }
.sv-office img { border-radius: var(--sv-radius-md, 8px); aspect-ratio: 1; object-fit: cover; width: 100%; object-position: var(--foco, 50% 50%); }
.sv-grid--offices { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 48rem) {
  .sv-office { grid-template-columns: minmax(0, 1fr); gap: .75rem; align-items: start; }
  .sv-office img { border-radius: var(--sv-radius-lg, 12px); aspect-ratio: 4 / 3; }
  .sv-grid--offices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.sv-office figcaption { display: flex; flex-direction: column; gap: .1875rem; }
.sv-office__name { font-size: .9375rem; font-weight: 600; line-height: 1.4; color: #fff; }
.sv-office__addr { font-size: .8125rem; line-height: 1.5; color: rgba(255, 255, 255, .74); }
.sv-office__tel  { font-size: .8125rem; line-height: 1.5; font-weight: 500; }

/* Trampa para robots del formulario: fuera de pantalla, no display:none. */
.sv-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }


/* ── 13 · FORMULARIO ───────────────────────────────────────────────────────── */

/* La tarjeta del formulario es una ISLA de suelo claro dentro de una banda de tinta: es
   blanca, pero vive dentro de `.sv-on-dark`, así que las reglas de descendencia de esa clase
   la atraviesan y le pintan texto de fondo oscuro sobre blanco. Medido sobre píxeles reales:
   el enlace a la política de privacidad daba **1,91:1** en la portada y en Cómo trabajamos,
   en los dos idiomas —el único fallo de contraste de las 9.599 mediciones—. La isla recupera
   su propia paleta en lugar de que cada regla de `.sv-on-dark` tenga que acordarse de ella. */
.sv-on-dark .sv-form { color: var(--sv-text); }
.sv-on-dark .sv-form a:not(.sv-btn) { color: var(--sv-accent-deep); }
.sv-on-dark .sv-form a:not(.sv-btn):hover { color: var(--sv-ink); }
.sv-on-dark .sv-form .sv-muted, .sv-on-dark .sv-form .sv-caption { color: var(--sv-text-muted); }

.sv-form {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); gap: 1.375rem;
  align-content: start;
  background: #fff; color: var(--sv-text);
  border-radius: var(--sv-radius-xl, 16px);
  padding: clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem);
  box-shadow: 0 40px 80px -32px rgba(0, 0, 0, .55);
}
.sv-form__full { grid-column: 1 / -1; }
.sv-form__actions { display: flex; justify-content: flex-end; }
.sv-form__services { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr)); gap: .75rem 1.5rem; }
.sv-form fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.sv-form legend { padding: 0; }

.sv-field { display: flex; flex-direction: column; gap: .5rem; }
.sv-field__label { font-size: .9375rem; font-weight: 500; color: var(--sv-ink); }
.sv-field__req { color: var(--sv-accent); }
.sv-field__hint { font-size: .8125rem; color: var(--sv-text-muted); }

.sv-input, .sv-select, .sv-textarea {
  width: 100%; padding: .8125rem .9375rem; font-size: 1rem; line-height: 1.4;
  color: var(--sv-text); background: var(--sv-paper);
  border: 1px solid var(--sv-line-control); border-radius: var(--sv-radius-md, 8px); outline: none;
  transition: border-color 120ms ease, box-shadow 120ms ease, background 120ms ease;
}
.sv-input::placeholder, .sv-textarea::placeholder { color: var(--sv-neutral-500, #8A8884); }
.sv-textarea { resize: vertical; min-height: 6.5rem; }
.sv-input:focus, .sv-select:focus, .sv-textarea:focus { background: #fff; border-color: var(--sv-cyan-500); box-shadow: 0 0 0 3px rgba(0, 144, 204, .18); }
.sv-input:user-invalid, .sv-textarea:user-invalid, .sv-select:user-invalid { border-color: var(--sv-accent); box-shadow: 0 0 0 3px rgba(228, 0, 132, .15); }
.sv-input-wrap { position: relative; display: block; }
.sv-input-wrap .sv-input { padding-left: 2.625rem; }
.sv-input-wrap__icon { position: absolute; left: .9375rem; top: 50%; transform: translateY(-50%); width: 1.125rem; height: 1.125rem; color: var(--sv-neutral-500, #8A8884); pointer-events: none; }
.sv-select-wrap { position: relative; display: block; }
.sv-select { appearance: none; padding-right: 2.5rem; cursor: pointer; }
.sv-select-wrap__icon {
  position: absolute; right: .9375rem; top: 50%; transform: translateY(-50%);
  width: 1.125rem; height: 1.125rem; color: var(--sv-neutral-500, #8A8884); pointer-events: none;
  background-color: currentcolor;
  mask: url('/assets/icons/chevron-down.svg') no-repeat center / contain;
  -webkit-mask: url('/assets/icons/chevron-down.svg') no-repeat center / contain;
}
.sv-icon--send {
  background-color: currentcolor;
  mask: url('/assets/icons/send.svg') no-repeat center / contain;
  -webkit-mask: url('/assets/icons/send.svg') no-repeat center / contain;
}
/* `min-width: 0` y `overflow-wrap` no son decoración: el hijo de un flex tiene
   `min-width: auto`, así que la cadena irrompible `linkedin.com/company/sensoryvalue`
   fijaba un ancho mínimo mayor que la pantalla a 320 px. El recorte NO lo veía el
   barrido de anchos —`.sv-section` es `overflow: clip` y el documento no desbordaba—,
   así que a 320 px se perdía el final de la URL sin que ninguna sonda se enterase. */
.sv-icon--mail-row {
  display: inline-flex; align-items: center; gap: .625rem;
  min-width: 0; max-width: 100%; overflow-wrap: anywhere;
}

.sv-check { display: inline-flex; align-items: flex-start; gap: .75rem; cursor: pointer; }
.sv-check__input { position: absolute; opacity: 0; width: 0; height: 0; }
.sv-check__box { position: relative; flex: none; width: 1.25rem; height: 1.25rem; margin-top: 1px; background: #fff; border: 1px solid var(--sv-line-control); border-radius: 4px; transition: background .12s ease, border-color .12s ease; }
.sv-check__input:checked + .sv-check__box { background: var(--sv-accent); border-color: transparent; }
.sv-check__input:checked + .sv-check__box::after { content: ''; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.sv-check__input:focus-visible + .sv-check__box { outline: 3px solid var(--sv-cyan-500); outline-offset: 2px; }
.sv-check__label { font-size: .9375rem; line-height: 1.4; }

.sv-form-msg {
  grid-column: 1 / -1; margin: 0; padding: .75rem 1rem; border-radius: 8px;
  font-size: .875rem; line-height: 1.5; display: none; opacity: 1; translate: 0 0;
  transition: opacity 200ms ease-out, translate 200ms ease-out, display 200ms; transition-behavior: allow-discrete;
}
@starting-style { .sv-form-msg { opacity: 0; translate: 0 -6px; } }
.sv-form-msg[data-state='ok']    { display: block; background: var(--sv-mist); color: var(--sv-blue-700); border: 1px solid #CFE4F5; }
.sv-form-msg[data-state='error'] { display: block; background: #FDECF5; color: var(--sv-purple-500); border: 1px solid #F0D3E6; }
.sv-form-msg__link { color: inherit; text-decoration: underline; }


/* ── 14 · PROSA LEGAL ──────────────────────────────────────────────────────── */

.sv-prose { max-width: 46rem; }
.sv-prose > * + * { margin-top: 1rem; }
.sv-prose h2 { font-size: clamp(1.15rem, 1.05rem + .5vw, 1.4rem); font-weight: 600; color: var(--sv-ink); margin-top: 2.5rem; line-height: 1.3; }
.sv-prose h3 { font-size: 1.0625rem; font-weight: 600; color: var(--sv-ink); margin-top: 1.75rem; }
.sv-prose p, .sv-prose li { font-size: .9375rem; line-height: 1.7; color: var(--sv-text); max-width: 66ch; text-wrap: pretty; }
.sv-prose ul, .sv-prose ol { padding-left: 1.25rem; display: flex; flex-direction: column; gap: .375rem; }
.sv-prose li { list-style: disc; }
.sv-prose a { color: var(--sv-blue-700); text-decoration: underline; text-underline-offset: .16em; text-decoration-thickness: .06em; }
.sv-prose a:hover { color: var(--sv-accent); }
.sv-prose strong { font-weight: 600; color: var(--sv-ink); }
.sv-prose table { width: 100%; border-collapse: collapse; font-size: .875rem; display: block; overflow-x: auto; }
.sv-prose th, .sv-prose td { border: 1px solid var(--sv-line); padding: .5rem .625rem; text-align: left; }


/* ── 15 · MOVIMIENTO ───────────────────────────────────────────────────────── */
/* Tres gestos y nada más: aparecer al entrar en pantalla, la imagen del héroe que
   asienta, y las cifras que cuentan. Todo respeta prefers-reduced-motion. */

@keyframes svRise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
[data-reveal][data-armed] > * { opacity: 0; }
[data-reveal][data-in] > * { animation: svRise .7s cubic-bezier(.2, .6, .2, 1) both; }
[data-reveal][data-in] > *:nth-child(2) { animation-delay: .08s; }
[data-reveal][data-in] > *:nth-child(3) { animation-delay: .16s; }
[data-reveal][data-in] > *:nth-child(4) { animation-delay: .24s; }
[data-reveal][data-in] > *:nth-child(5) { animation-delay: .32s; }
[data-reveal][data-in] > *:nth-child(6) { animation-delay: .4s; }
[data-reveal][data-in] > *:nth-child(7) { animation-delay: .48s; }
[data-reveal][data-in] > *:nth-child(8) { animation-delay: .56s; }
[data-reveal][data-in] > *:nth-child(n+9) { animation-delay: .64s; }
/* Un solo bloque que aparece entero (no sus hijos por separado). */
[data-reveal='solo'][data-armed] > * { opacity: 1; }
[data-reveal='solo'][data-armed] { opacity: 0; }
[data-reveal='solo'][data-in] { opacity: 1; animation: svRise .7s cubic-bezier(.2, .6, .2, 1) both; }
[data-reveal='solo'][data-in] > * { animation: none; }

@keyframes svRule { from { transform: scaleX(0); } to { transform: scaleX(1); } }
[data-rule][data-armed] { transform: scaleX(0); }
[data-rule][data-in] { animation: svRule .7s cubic-bezier(.2, .6, .2, 1) both; }
.sv-stat[data-in] .sv-stat__rule { animation: svRule 1.4s cubic-bezier(.2, .8, .2, 1) both; }

/* La imagen del héroe asienta: de 1,04 a 1 en algo más de un segundo. */
@keyframes svSettle { from { transform: scale(1.045); } to { transform: none; } }
.sv-hero__media img { animation: svSettle 1.3s cubic-bezier(.2, .6, .2, 1) both; }

/* Paralaje suave de la imagen con el desplazamiento, sólo donde el navegador lo hace
   sin JavaScript. La imagen es un 10 % más alta que su marco y se desplaza dentro. */
@supports (animation-timeline: view()) {
  @keyframes svDrift { from { transform: translateY(-5%); } to { transform: translateY(5%); } }
  .sv-parallax img { height: 110%; margin-top: -5%; animation: svDrift linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
}

/* Palabra rotativa del titular de portada. */
@keyframes svWord { 0% { opacity: 0; transform: translateY(-14px); } 11%, 86% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(14px); } }
/* La animación es OPT-IN por atributo, y el estado por defecto es la palabra quieta y
   legible. Al revés —animando por CSS y parándola con JavaScript— la palabra seguía
   apareciendo y desapareciendo sin JS mientras el texto nunca cambiaba, así que una parte
   del H1 de la portada quedaba invisible a intervalos. El script pone `data-rota` sólo si
   de verdad va a rotar el texto. */
.sv-hero-word[data-rota] { animation: svWord 3.6s ease-in-out infinite; }

/* El anillo de los tres pilares (portada). */
.sv-ciclo { display: grid; gap: clamp(1.75rem, 1.2rem + 2.4vw, 3.5rem); align-items: center; }
@media (min-width: 60rem) { .sv-ciclo { grid-template-columns: minmax(0, .82fr) minmax(0, 1fr); } }
.sv-ciclo__aro { position: relative; margin: 0 auto; width: 100%; max-width: 22rem; aspect-ratio: 1; }
.sv-ciclo__aro svg { display: block; width: 100%; height: 100%; }
.sv-ciclo__arco { fill: none; stroke-width: 8; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 0; transition: opacity .32s ease; }
.sv-ciclo[data-armado] .sv-ciclo__arco { opacity: .16; stroke-dashoffset: 100; }
@keyframes svAro { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
.sv-ciclo[data-armado] .sv-ciclo__arco[data-on] { opacity: 1; animation: svAro .78s cubic-bezier(.16, 1, .3, 1) both; }
.sv-ciclo[data-done] .sv-ciclo__arco { opacity: 1; stroke-dashoffset: 0; }
.sv-ciclo__centro { position: absolute; inset: 24%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .375rem; text-align: center; transition: opacity .48s ease; }
.sv-ciclo[data-armado] .sv-ciclo__centro { opacity: 0; }
.sv-ciclo[data-done] .sv-ciclo__centro { opacity: 1; }
.sv-ciclo__lista { display: flex; flex-direction: column; gap: clamp(1.5rem, 1.2rem + 1.2vw, 2.5rem); }
.sv-ciclo__lista > li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(.875rem, .8rem + .5vw, 1.25rem); align-items: start; }
.sv-ciclo__num { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--c, var(--sv-purple-500)); color: #fff; font-size: .9375rem; font-weight: 600; letter-spacing: .02em; transition: opacity .32s ease, transform .32s ease; }
.sv-ciclo[data-armado] .sv-ciclo__num { opacity: .3; }
.sv-ciclo[data-armado] .sv-ciclo__lista > li[data-active] .sv-ciclo__num { opacity: 1; transform: scale(1.06); }
.sv-ciclo[data-done] .sv-ciclo__num { opacity: 1; }
.sv-ciclo:has(.sv-ciclo__lista > li:nth-child(1):hover) .sv-ciclo__arco[data-arco='0'],
.sv-ciclo:has(.sv-ciclo__lista > li:nth-child(2):hover) .sv-ciclo__arco[data-arco='1'],
.sv-ciclo:has(.sv-ciclo__lista > li:nth-child(3):hover) .sv-ciclo__arco[data-arco='2'] { opacity: 1; stroke-dashoffset: 0; }
.sv-ciclo__lista > li:hover .sv-ciclo__num { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal][data-armed] > *, [data-reveal='solo'][data-armed] { opacity: 1; animation: none; }
  [data-rule][data-armed] { transform: none; animation: none; }
  .sv-hero-word, .sv-hero__media img, .sv-parallax img { animation: none; }
  .sv-parallax img { height: 100%; margin-top: 0; }
  .sv-hero-word { opacity: 1; transform: none; }
  .sv-ciclo__arco, .sv-ciclo__centro, .sv-ciclo__num { transition: none; animation: none; }
  .sv-form-msg { transition: opacity 150ms ease, display 150ms; transition-behavior: allow-discrete; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}