/* ==========================================================================
   Todoesdata — Componentes nuevos para páginas de producto / sector
   Archivo NUEVO del tema (aditivo). Se carga desde functions.php después de
   style.css. Prefijo de todas las clases: tdd-
   ADN reutilizado del tema: naranja #FF7008 · blanco · gris #F5F5F5 · Inter ·
   escalón de 2rem × 50% · doble barra de los H2 · números fantasma · guion
   naranja 30×5 · cuadrado desplazado tras la imagen · reveal al hacer scroll.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Sección base + escalón
   Igual que en el tema: una sola barra (::before, mitad derecha, color propio)
   que SUBE sobre la sección anterior al entrar en pantalla. La frontera queda
   con la forma de la parte superior de la T del logo: izquierda baja, derecha alta.
   -------------------------------------------------------------------------- */
.tdd-sec {
  --tdd-bg: #fff;
  --tdd-ink: #000;
  --tdd-ink-2: #313131;
  --tdd-ink-3: #6b6b6b;
  --tdd-line: rgba(0, 0, 0, .10);
  --tdd-accent: var(--main-color, #FF7008);
  position: relative;
  width: 100%;
  display: block;
  background: var(--tdd-bg);
  color: var(--tdd-ink);
  font-family: 'Inter', sans-serif;
  box-sizing: border-box;
}
.tdd-sec.tdd-bg-gris    { --tdd-bg: #F5F5F5; }
/* DECISION-001, cerrada por Pablo el 2026-09-16: sobre el naranja de marca el texto va en
   TINTA, no en blanco. El fondo sigue siendo #FF7008 EXACTO; lo que cambia es la tinta.
   Contraste compuesto medido sobre #FF7008 (el alfa se compone contra el naranja, asi que
   hay que medir el color resultante, no el declarado):
       --tdd-ink    #0A0A0A         rgb(10,10,10)   7,14:1   AAA
       --tdd-ink-2  tinta al 88 %   rgb(39,22,10)   6,28:1   AA
       --tdd-ink-3  tinta al 72 %   rgb(79,39,9)    4,66:1   AA
   Antes, en blanco, eran 2,77 / 2,45 / 2,07 y ninguno llegaba ni al AA de texto grande (3,0).
   --tdd-accent pasa a tinta porque se usa como TEXTO (kicker, cifra) y como FONDO (la barra de
   30x5 y el boton de filtro activo, cuyo texto es --tdd-bg = el naranja: naranja sobre tinta
   son tambien 7,14:1). */
.tdd-sec.tdd-bg-naranja { --tdd-bg: #FF7008; --tdd-ink: #0A0A0A; --tdd-ink-2: rgba(10,10,10,.88); --tdd-ink-3: rgba(10,10,10,.72); --tdd-line: rgba(10,10,10,.28); --tdd-accent: #0A0A0A; }

/* EL GRUESO DEL ESCALÓN, EN UN SOLO SITIO. Lo leen las dos familias —las
   secciones nuevas aquí abajo y las del tema en el bloque 0 bis— porque si cada
   una lleva su `2rem` escrito a mano, se separan en cuanto alguien toque una.
   El valor de móvil está en la media query del final del archivo, no aquí: una
   banda de 32 px en una pantalla de 360 se come el 9 % del alto útil. */
:root { --tdd-escalon: 2rem; }

.tdd-sec::before {                 /* como section.X::before del tema: sube al activarse */
  content: '';
  position: absolute;
  top: 1px;
  right: 0;
  height: var(--tdd-escalon);
  width: 50%;
  display: block;
  background: var(--tdd-bg);
  pointer-events: none;
  transform: translateY(0);
  transition: transform .6s ease-in-out;
  z-index: 3;
}
.tdd-sec.active::before { transform: translateY(-100%); }
.tdd-sec.tdd-sin-escalon::before { display: none; }

/* ==========================================================================
   0 bis. EL MISMO ESCALÓN, PARA LAS SECCIONES DEL TEMA
   Va aquí pegado y no en otro archivo a propósito: `.tdd-sec::before`, justo
   arriba, es el mecanismo bueno —automático, cada sección con su color— y esto
   es el parche para que las secciones que NO son `.tdd-sec` tengan la misma
   garantía. Separarlos deja la mitad de la lógica fuera del repo.

   EL PROBLEMA, medido el 2026-09-16 en el local sobre las cuatro plantillas.
   El escalón del tema está puesto A MANO, sección por sección: lo tienen
   `orange-container`, `home-functional-container`, `highlight-text-container`,
   `duties-container`, `contact-form-container`, `marketing-blog-container` e
   `iframe-container`, y no lo tienen `slogan-container`,
   `home-framework-container`, `home-timeline-container`, `blog-container`,
   `blog-slogan-container`, `wwu-container` ni `work-with-us-slogan-container`.
   Cruzado con los fondos, eso dejaba CINCO fronteras de color sin escalón en
   todo el sitio: en la home naranja→díptico, díptico→«Cómo trabajamos» y
   FAQ→blog; en /blog/ gris→listado; y en /trabaja-con-nosotros/ gris→contenido.
   Ninguna se veía mientras las dos secciones de cada pareja eran del mismo
   gris. Al pasar el díptico a blanco (T3.1.4) salieron a la vista, que es como
   lo encontró Pablo. O sea que el fondo blanco no rompió nada: destapó esto.

   POR QUÉ SISTEMÁTICO Y NO UNA LISTA. El criterio era que añadir una sección
   no obligue a acordarse de nada. Enumerar las siete que faltan hoy cumple el
   encargo y falla el criterio: la octava volvería a nacer sin escalón. Lo que
   parecía impedir la vía sistemática es que el color de cada sección «no está
   declarado en ningún sitio consultable», y medido resultó que casi sí: de las
   catorce secciones del sitio, diez declaran el suyo y las otras cuatro son
   transparentes y enseñan el `#F5F5F5` del `body`. O sea que no hay que cablear
   catorce colores: hay que declarar UNO, el del body, y dejar que cada sección
   se pinte su escalón con `background-color: inherit`, que en un pseudoelemento
   es el color de su propio elemento. De ahí salen las dos reglas de abajo.

   Y SE APAGA SOLO donde no hace falta: si dos secciones contiguas son del mismo
   color, la banda es del color de la de arriba y no se ve. No hay que enumerar
   las parejas ni acordarse de excluir ninguna.
   ========================================================================== */

/* 1. El fondo del `body`, explícito. Solo muerde a las secciones que no
      declaran el suyo, porque cualquier regla del tema lleva al menos una clase
      —`section.orange-container`, `section.blog-container`…— y gana a esta, que
      es solo de tipo. Sin esto, `inherit` daría transparente y no habría color
      con el que pintar el escalón. */
main > section { background-color: #F5F5F5; }

/* 2. El escalón. `~` y no `+` porque en la home hay un `<script>` entre la FAQ
      y el blog y con el hermano adyacente esa frontera se quedaba fuera; con el
      hermano general la única sección sin escalón es la primera de cada página,
      que es justo la que no lo necesita: encima no tiene sección, tiene la
      cabecera.
      OJO CON CÓMO SE LEE ESTO. El del tema SUBE: nace dentro de su sección,
      invisible porque es de su mismo color, y al recibir `.active` se desplaza
      hacia arriba y asoma sobre la sección anterior. El de aquí NO se mueve: ya
      está dibujado fuera, en el sitio exacto donde el del tema acaba. Quien
      venga a buscar la animación no la va a encontrar, y no es que falte.
      Es así porque `.active` se la pone GSAP a los elementos con clase
      `t-shape` escrita en el marcado, y desde CSS no se puede añadir una clase.
      El estado final es idéntico, y de paso sale bien con el JS caído y con
      `prefers-reduced-motion`.
      Tiene menos peso que cualquier `section.X::before` del tema (0,0,1,2), así
      que las siete que ya lo traen conservan el suyo animado y esta regla solo
      rellena los huecos. */
main > section ~ section::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  height: var(--tdd-escalon);
  width: 50%;
  display: block;
  background-color: inherit;
  transform: translateY(-100%);
  pointer-events: none;
}

/* 2 bis. EL MISMO GRUESO EN TODAS, incluidas las siete que ya traían escalón.
      El tema encoge los suyos por tramos —1,5rem entre 769 y 1199 px, y 1,2rem
      o 1rem entre 1201 y 1400— así que a 1400 convivían tres grosores: medidos,
      19,19 px en `orange-container`, 16 px en `home-functional-container` y
      32 px en todos los demás. Tres números para la misma pieza.
      Esta regla solo toca la ALTURA y gana por especificidad sin nombrar ninguna
      sección: los dos `[class]` cuentan como clase, así que pesa (0,2,4) contra
      los (0,1,2) de cualquier `section.X::before` del tema, dentro y fuera de
      sus media queries. Todo lo demás de esas reglas —color, posición,
      transición, el `.active`— se queda como estaba.
      Y el valor sale del mismo `--tdd-escalon` que el resto, así que el tramo de
      móvil lo hereda solo: 2rem arriba, 1,25rem por debajo de 768 px.
      Nota: el `::after` del tema —la mitad que baja por la izquierda— NO se
      toca. Va con `z-index: -2` y no llega a pintarse: es la razón de que la
      frontera naranja→díptico no tuviera escalón visible aunque esa sección sí
      tuviera pseudoelemento. Igualarle el grueso sería maquillar algo que no se
      ve. */
main > section[class] ~ section[class]::before { height: var(--tdd-escalon); }

/* 3. La misma salida que `.tdd-sin-escalon` en el sistema nuevo, por si alguna
      sección no lo quiere. */
main > section.tdd-sin-escalon::before { display: none; }

/* 4. DEJAR SALIR EL ESCALÓN SIN DEJAR SALIR NADA MÁS.
      El escalón sube por encima del borde superior de su sección, y una sección
      con `overflow: hidden` se lo come: es el elemento el que clipa a sus
      descendientes, y el escalón es uno de ellos.
      El primer intento fue `overflow: visible` y estaba MAL, con una medida que
      lo demuestra: en /trabaja-con-nosotros/ a 769 px el `<object>` de la
      animación se sale 100 px de `wwu-container`, y al quitarle el recorte el
      documento pasaba a 869 px de ancho sobre un viewport de 769. O sea que
      arreglando el escalón se abría un scroll horizontal, que en esta web es de
      los fallos que más caro salen. Medido a las cuatro anchuras y en las cuatro
      plantillas antes de cambiarlo.
      La salida es recortar solo en horizontal: `overflow: clip visible` mantiene
      el eje X recortado —el `<object>` sigue dentro, el documento vuelve a 769—
      y libera el Y, que es por donde sale el escalón. Comprobado en el render:
      computa `overflow-x: clip` y `overflow-y: visible`, las dos.
      Se escribe con el atajo de dos valores a propósito: si un navegador viejo
      no entiende `clip`, tira la declaración ENTERA y la sección se queda con el
      recorte del tema. Se pierde el escalón ahí, que es un detalle; no se gana
      una barra de scroll, que no lo es. Escrito como dos propiedades sueltas, el
      navegador podría quedarse con `overflow-y: visible` junto al `hidden` del
      tema, y eso computa a `auto`: una barra dentro de la sección.
      Nota al margen, porque está en este mismo archivo y contradice lo medido:
      BUG-012, más abajo, dice que «`overflow-x: clip` fuerza el eje Y a clip
      también». Hoy no: probado en Chrome, `overflow-x: clip` deja el eje Y en
      `visible`. Aquello se resolvió ocultando las marcas de la T y la decisión
      sigue valiendo, pero el motivo que se anotó no era el correcto. */
main > section ~ section:not(.tdd-sin-escalon) { overflow: clip visible; }
/* El `:not()` no es decoración: sin él la regla pesa (0,0,0,3) y pierde contra
   `section.home-timeline-container { overflow: hidden }` (0,0,1,1). Medido: el
   escalón seguía sin verse. Con el `:not()` sube a (0,0,1,3) y gana por tipos,
   y de paso la salida de `.tdd-sin-escalon` vale también para el recorte. */

.tdd-sec .tdd-inner {
  position: relative;
  z-index: 1;
  padding: 7rem 8vw;
  box-sizing: border-box;
}
.tdd-sec.tdd-compacta .tdd-inner { padding-top: 5rem; padding-bottom: 5rem; }

/* Tipografía común */
.tdd-sec h2, .tdd-sec h3, .tdd-sec p { margin: 0; }
.tdd-sec .tdd-h2 {
  display: inline-block;
  position: relative;
  font-size: clamp(1.9rem, 2.6vw, 2.6rem);
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--tdd-ink);
}
/* La T del logo, a la derecha del título: dos rectángulos CONTIGUOS,
   el izquierdo bajo y el derecho alto (mismo mecanismo que .title h2 del tema) */
.tdd-sec .tdd-h2::before,
.tdd-sec .tdd-h2::after {
  content: '';
  position: absolute;
  top: .12em;
  right: 0;
  width: 28px;
  height: 8px;
  background: var(--tdd-accent);
  transform: translate(calc(100% + 14px), 0);
}
.tdd-sec .tdd-h2::after { transform: translate(calc(200% + 14px), -100%); }
/* BUG-012 (2026-09-09): los dos rectángulos de la T salen 70 px a la derecha del H2. Cuando el
   título ocupa todo el ancho disponible —lo normal en móvil— eso empuja el documento y la página
   entera hace scroll horizontal (medido: 437 px de scrollWidth en un viewport de 390, en la home
   Y en las 8 páginas ya cargadas). No se puede arreglar con overflow en `.tdd-sec`: `overflow-x:
   clip` fuerza el eje Y a clip también y se comería el escalón de `.tdd-sec::before`, que sube
   por encima del borde superior. Se ocultan por debajo del punto de corte del tema: son
   decorativos y el H2 se lee igual. Regla de la guía: todo override va dentro de su media query. */
@media (max-width: 768px) {
  .tdd-sec .tdd-h2::before,
  .tdd-sec .tdd-h2::after { display: none; }
}
/* Y por encima del punto de corte, donde sí se pintan, se les reserva el hueco: el H2 rompe
   línea 76 px antes del borde del contenido y las marcas caben dentro. Sin esto la página
   desbordaba 24 px exactamente a 769 px de ancho (medido en la home, en BI y en el hub). */
@media (min-width: 769px) {
  .tdd-sec .tdd-h2 { max-width: calc(100% - 76px); }
}
.tdd-sec .tdd-kicker {
  display: flex;
  align-items: center;
  gap: .75rem;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tdd-accent);
  margin-bottom: 1.25rem;
}
.tdd-sec .tdd-kicker::before { content: ''; width: 30px; height: 5px; background: var(--tdd-accent); }
.tdd-sec .tdd-intro {
  font-size: 1.1rem;
  line-height: 1.65;
  color: var(--tdd-ink-2);
  max-width: 62ch;
}
.tdd-sec .tdd-cabecera { margin-bottom: 3.5rem; }
.tdd-sec .tdd-cabecera.tdd-dos {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 3rem 8vw;
  align-items: end;
}
.tdd-sec .tdd-cabecera.tdd-dos .tdd-intro { padding-bottom: .35rem; }

.tdd-sec .tdd-link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-weight: 700;
  font-size: .95rem;
  color: var(--tdd-accent);
  text-decoration: none;
}
.tdd-sec .tdd-link svg { width: 1.1em; height: 1.1em; stroke: currentColor; fill: none; stroke-width: 2; transition: transform .3s ease; }
.tdd-sec .tdd-link:hover svg, .tdd-tarjeta-m:hover .tdd-link svg { transform: translateX(4px); }

/* Reveal al hacer scroll (escalonado con --i) */
/* Solo se oculta si el JS ha arrancado (html.tdd-js): sin JS, el contenido se ve siempre */
.tdd-js .tdd-reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s cubic-bezier(.215,.61,.355,1), transform .7s cubic-bezier(.215,.61,.355,1);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.tdd-js .tdd-reveal.is-in { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   1. DEFINICIÓN — qué es X, con profundidad
   -------------------------------------------------------------------------- */
.tdd-definicion .tdd-inner {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 3rem 7vw;
  align-items: start;
}
.tdd-definicion .tdd-lead {
  margin-top: 1.75rem;
  font-size: 1.35rem;
  line-height: 1.45;
  font-weight: 600;
  color: var(--tdd-ink);
}
.tdd-mark {
  background: linear-gradient(transparent 58%, rgba(255,112,8,.35) 58%);
  padding: 0 .1em;
}
/* El resaltador sigue siendo una banda BLANCA: con la tinta oscura encima (DECISION-001)
   aclara el fondo bajo el texto, o sea que ahora SUMA contraste en vez de restarlo. */
.tdd-bg-naranja .tdd-mark { background: linear-gradient(transparent 58%, rgba(255,255,255,.35) 58%); }
.tdd-definicion .tdd-cuerpo { padding-top: .5rem; }
.tdd-definicion .tdd-cuerpo p {
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--tdd-ink-2);
}
.tdd-definicion .tdd-cuerpo p + p { margin-top: 1.25rem; }
.tdd-datos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--tdd-line);
}
.tdd-datos strong {
  display: block;
  font-size: 2.3rem;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--tdd-accent);
}
.tdd-datos span {
  display: block;
  margin-top: .6rem;
  font-size: .9rem;
  line-height: 1.4;
  color: var(--tdd-ink-3);
}

/* --------------------------------------------------------------------------
   2. TRÍPTICO — tres preguntas, tres tarjetas con la esquina en escalón
   -------------------------------------------------------------------------- */
.tdd-triptico .tdd-cabecera { text-align: center; }
.tdd-triptico .tdd-cabecera .tdd-intro { margin: 1.25rem auto 0; }
.tdd-triptico .tdd-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
.tdd-tarjeta-q-wrap { position: relative; }
.tdd-tarjeta-q-wrap::after {          /* sombra, fuera del clip de la tarjeta */
  content: '';
  position: absolute;
  inset: 12px 12px -12px 12px;
  background: rgba(0,0,0,.18);
  filter: blur(22px);
  opacity: 0;
  z-index: -1;
  transition: opacity .45s ease;
}
.tdd-tarjeta-q-wrap:hover::after { opacity: 1; }
.tdd-tarjeta-q {
  --notch: 2rem;
  position: relative;
  height: 100%;
  box-sizing: border-box;
  background: #fff;
  color: #000;
  padding: 2.75rem 2.25rem 2.5rem;
  clip-path: polygon(var(--notch) 0, 100% 0, 100% 100%, 0 100%, 0 var(--notch), var(--notch) var(--notch));
  transition: transform .45s cubic-bezier(.215,.61,.355,1);
}
.tdd-tarjeta-q::before {            /* número fantasma */
  content: attr(data-n);
  position: absolute;
  top: .6rem;
  right: 1.6rem;
  font-size: 6.5rem;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -.04em;
  color: #F5F5F5;
  pointer-events: none;
}
.tdd-tarjeta-q::after {             /* barra inferior que crece */
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 5px;
  background: var(--main-color, #FF7008);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s cubic-bezier(.215,.61,.355,1);
}
.tdd-tarjeta-q > * { position: relative; }
.tdd-tarjeta-q .tdd-n {
  display: block;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--main-color, #FF7008);
  margin-bottom: 2.6rem;
}
.tdd-tarjeta-q h3 {
  font-size: 1.4rem;
  line-height: 1.2;
  font-weight: 700;
  margin-bottom: 1rem;
}
.tdd-tarjeta-q p {
  font-size: 1.02rem;
  line-height: 1.6;
  color: #313131;
}
.tdd-tarjeta-q-wrap:hover .tdd-tarjeta-q { transform: translateY(-8px); }
.tdd-tarjeta-q-wrap:hover .tdd-tarjeta-q::after { transform: scaleX(1); }

/* --------------------------------------------------------------------------
   3. TARJETAS CON ICONO — sin foto
   -------------------------------------------------------------------------- */
.tdd-iconos .tdd-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}
.tdd-iconos.tdd-tres .tdd-grid { grid-template-columns: repeat(3, 1fr); }
.tdd-tarjeta-i {
  position: relative;
  background: #fff;
  color: #000;
  padding: 2.5rem 2rem 2.25rem;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  box-sizing: border-box;
  box-shadow: 0 1px 0 rgba(0,0,0,.04);
  transition: transform .45s cubic-bezier(.215,.61,.355,1), box-shadow .45s ease;
}
.tdd-bg-blanco .tdd-tarjeta-i { background: #F5F5F5; }
/* la T del logo, arriba a la izquierda: izquierda baja + derecha alta, contiguas */
.tdd-tarjeta-i::before, .tdd-tarjeta-i::after {
  content: '';
  position: absolute;
  height: 5px;
  background: var(--main-color, #FF7008);
  transition: width .45s cubic-bezier(.215,.61,.355,1), left .45s cubic-bezier(.215,.61,.355,1);
}
.tdd-tarjeta-i::before { top: 5px; left: 0;      width: 1.5rem; }
.tdd-tarjeta-i::after  { top: 0;   left: 1.5rem; width: 1.5rem; }
.tdd-tarjeta-i:hover { transform: translateY(-6px); box-shadow: 0 24px 50px -20px rgba(0,0,0,.28); }
.tdd-tarjeta-i:hover::before { width: 50%; }
.tdd-tarjeta-i:hover::after  { left: 50%; width: 50%; }
.tdd-tarjeta-i .tdd-ico {
  width: 3.75rem; height: 3.75rem;
  display: grid; place-items: center;
  background: #FFF1E8;
  color: var(--main-color, #FF7008);
  margin-bottom: 1.75rem;
}
.tdd-tarjeta-i .tdd-ico svg { width: 1.9rem; height: 1.9rem; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tdd-tarjeta-i h3 { font-size: 1.2rem; line-height: 1.25; font-weight: 700; margin-bottom: .8rem; }
.tdd-tarjeta-i p  { font-size: .98rem; line-height: 1.6; color: #313131; flex: 1; }
.tdd-tarjeta-i .tdd-link {
  margin-top: 1.5rem;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .4s ease, transform .4s ease;
}
.tdd-tarjeta-i:hover .tdd-link { opacity: 1; transform: none; }
/* BUG-015 (2026-09-09): el enlace de la tarjeta con icono solo aparece al pasar el ratón, así que
   en móvil y tableta era INVISIBLE para siempre — y el 25 % de los clics del sitio son de móvil
   (baseline §7). Latente hasta ahora porque ningún `tarjetas_icono` de las 8 páginas ya cargadas
   usaba `enlace`; la sección de industrias de la home es la primera. Donde no hay hover, se ve. */
@media (hover: none) {
  .tdd-tarjeta-i .tdd-link { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   4. TARJETAS CON IMAGEN — overlay naranja que se despeja
   -------------------------------------------------------------------------- */
.tdd-media .tdd-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem 2rem;
}
.tdd-tarjeta-m { position: relative; color: var(--tdd-ink); text-decoration: none; display: block; }
.tdd-tarjeta-m .tdd-fig {
  position: relative;
  margin: 0 0 1.5rem;
}
.tdd-tarjeta-m .tdd-fig::before {      /* cuadrado desplazado del tema */
  content: '';
  position: absolute;
  inset: 0;
  background: var(--main-color, #FF7008);
  transform: translate(0, 0);
  transition: transform .5s cubic-bezier(.215,.61,.355,1);
  z-index: 0;
}
.tdd-tarjeta-m .tdd-fig .tdd-img {
  position: relative;
  z-index: 1;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #ddd;
}
.tdd-tarjeta-m .tdd-fig img, .tdd-tarjeta-m .tdd-fig svg.tdd-mock {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.001);
  transition: transform .8s cubic-bezier(.215,.61,.355,1);
}
.tdd-tarjeta-m .tdd-fig .tdd-img::after {   /* overlay naranja, como en el slider de Home */
  content: '';
  position: absolute;
  inset: 0;
  background: var(--main-color, #FF7008);
  mix-blend-mode: multiply;
  opacity: .82;
  transition: opacity .6s ease;
}
.tdd-tarjeta-m .tdd-fig .tdd-num {
  position: absolute;
  z-index: 2;
  left: 1.25rem; bottom: 1rem;
  font-size: 3.2rem;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -.04em;
  color: #fff;
  text-shadow: 0 2px 18px rgba(0,0,0,.25);
}
/* --- Filtro por etapa -----------------------------------------------------
   La barra se declara con [hidden] en el HTML y el JS la muestra: sin JS no
   aparece un filtro que no filtraría (misma lógica que .tdd-reveal).
   En móvil queda pegada bajo la cabecera fija del tema (--height-header). */
.tdd-filtro {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: -1.5rem 0 2.5rem;
}
.tdd-filtro[hidden] { display: none; }
.tdd-f-btn {
  font: 700 .9rem/1 'Inter', sans-serif;
  color: var(--tdd-ink);
  background: transparent;
  border: 1px solid var(--tdd-line);
  padding: .7rem 1.1rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.tdd-f-btn small {
  font-size: .72rem;
  font-weight: 700;
  opacity: .55;
  font-variant-numeric: tabular-nums;
}
.tdd-f-btn:hover { border-color: var(--tdd-accent); color: var(--tdd-accent); }
.tdd-f-btn.is-on {
  background: var(--tdd-accent);
  border-color: var(--tdd-accent);
  color: var(--tdd-bg);
}
.tdd-f-btn.is-on small { opacity: .75; }
/* la tarjeta filtrada se va con una transición corta, no de golpe */
.tdd-con-filtro .tdd-tarjeta-m { transition: opacity .3s ease, transform .3s ease; }
.tdd-con-filtro .tdd-tarjeta-m.tdd-fuera { display: none; }

@media (max-width: 860px) {
  .tdd-filtro {
    position: sticky;
    top: var(--height-header, 12vh);
    z-index: 4;
    margin: -1rem -6vw 2rem;
    padding: .85rem 6vw;
    background: var(--tdd-bg);
    box-shadow: 0 6px 16px -10px rgba(0,0,0,.35);
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .tdd-filtro::-webkit-scrollbar { display: none; }
  .tdd-f-btn { flex: none; padding: .6rem .9rem; font-size: .85rem; }
}

/* Etapa en lugar del número: una palabra necesita menos cuerpo y algo de interletraje */
.tdd-tarjeta-m .tdd-fig .tdd-num.tdd-etapa {
  font-size: 1.75rem;
  letter-spacing: -.01em;
  text-transform: none;
}
.tdd-tarjeta-m:hover .tdd-fig::before { transform: translate(-14px, 14px); }
.tdd-tarjeta-m:hover .tdd-fig .tdd-img::after { opacity: 0; }
.tdd-tarjeta-m:hover .tdd-fig img, .tdd-tarjeta-m:hover .tdd-fig svg.tdd-mock { transform: scale(1.04); }
.tdd-tarjeta-m h3 { font-size: 1.3rem; line-height: 1.25; font-weight: 700; margin-bottom: .75rem; }
.tdd-tarjeta-m p  { font-size: 1rem; line-height: 1.6; color: var(--tdd-ink-2); }
.tdd-tarjeta-m .tdd-link { margin-top: 1rem; }

/* --------------------------------------------------------------------------
   5. MÉTRICAS — cifras grandes con conteo
   -------------------------------------------------------------------------- */
.tdd-metricas .tdd-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem 3rem;
}
.tdd-metricas.tdd-tres .tdd-grid { grid-template-columns: repeat(3, 1fr); }
.tdd-metrica { position: relative; padding-top: 1.5rem; }
.tdd-metrica::before { content: ''; position: absolute; top: 0; left: 0; width: 30px; height: 5px; background: var(--tdd-accent); }
.tdd-metrica .tdd-cifra {
  display: block;
  font-size: clamp(3rem, 4.6vw, 4.6rem);
  line-height: 1;
  font-weight: 800;
  letter-spacing: -.035em;
  color: var(--tdd-accent);
  font-variant-numeric: tabular-nums;
}
.tdd-metrica .tdd-cifra small { font-size: .55em; font-weight: 800; letter-spacing: -.02em; margin-left: .12em; }
.tdd-metrica .tdd-label {
  display: block;
  margin-top: .9rem;
  font-size: 1rem;
  line-height: 1.45;
  font-weight: 600;
  color: var(--tdd-ink);
  max-width: 20ch;
}
.tdd-metrica .tdd-nota { display: block; margin-top: .35rem; font-size: .85rem; color: var(--tdd-ink-3); }

/* --------------------------------------------------------------------------
   6. FAQ — acordeón
   -------------------------------------------------------------------------- */
.tdd-faq .tdd-inner {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: 3rem 7vw;
  align-items: start;
}
.tdd-faq .tdd-lateral { position: sticky; top: 6rem; }
.tdd-faq .tdd-lateral .tdd-intro { margin-top: 1.5rem; }
.tdd-faq .tdd-lateral .tdd-link { margin-top: 2rem; }
.tdd-faq details {
  border-bottom: 1px solid var(--tdd-line);
}
.tdd-faq details:first-of-type { border-top: 1px solid var(--tdd-line); }
.tdd-faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
  padding: 1.6rem 0;
  font-size: 1.15rem;
  line-height: 1.35;
  font-weight: 700;
  color: var(--tdd-ink);
  transition: color .3s ease;
}
.tdd-faq summary::-webkit-details-marker { display: none; }
.tdd-faq summary:hover { color: var(--tdd-accent); }
.tdd-faq summary .tdd-mas {
  flex: none;
  position: relative;
  width: 1.4rem; height: 1.4rem;
  margin-top: .1rem;
}
.tdd-faq summary .tdd-mas::before, .tdd-faq summary .tdd-mas::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 100%; height: 3px;
  background: var(--tdd-accent);
  transform: translate(-50%, -50%);
  transition: transform .4s cubic-bezier(.215,.61,.355,1);
}
.tdd-faq summary .tdd-mas::after { transform: translate(-50%, -50%) rotate(90deg); }
.tdd-faq details[open] summary .tdd-mas::after { transform: translate(-50%, -50%) rotate(0deg); }
.tdd-faq .tdd-resp {
  padding: 0 3.4rem 1.75rem 0;
  max-width: 64ch;
}
.tdd-faq .tdd-resp p { font-size: 1.02rem; line-height: 1.65; color: var(--tdd-ink-2); }
.tdd-faq .tdd-resp p + p { margin-top: .9rem; }
.tdd-faq details[open] .tdd-resp { animation: tdd-faq-in .45s cubic-bezier(.215,.61,.355,1) both; }
@keyframes tdd-faq-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* --------------------------------------------------------------------------
   7. TESTIMONIO — carrusel de opiniones
   -------------------------------------------------------------------------- */
.tdd-testimonio .tdd-cabecera { margin-bottom: 2rem; }
.tdd-testi-swiper { overflow: hidden; position: relative; }
.tdd-testi {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  gap: 3rem 6vw;
  align-items: end;
  padding-top: 3.25rem;
}
.tdd-testi .tdd-comillas {
  position: absolute;
  top: -2.4rem; left: -.35rem;
  font-size: 14rem;
  line-height: 1;
  font-weight: 800;
  color: var(--tdd-ink);
  opacity: .16;
  pointer-events: none;
  font-family: Georgia, 'Times New Roman', serif;
}
.tdd-testi blockquote {
  margin: 0;
  font-size: clamp(1.4rem, 2vw, 2rem);
  line-height: 1.35;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--tdd-ink);
}
.tdd-testi .tdd-autor { display: flex; align-items: center; gap: 1.1rem; }
.tdd-testi .tdd-avatar {
  flex: none;
  width: 3.5rem; height: 3.5rem;
  display: grid; place-items: center;
  background: rgba(255,255,255,.18);
  border: 1px solid var(--tdd-line);
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--tdd-ink);
}
.tdd-bg-blanco .tdd-testi .tdd-avatar, .tdd-bg-gris .tdd-testi .tdd-avatar { background: #FFF1E8; color: var(--main-color, #FF7008); }
.tdd-testi .tdd-autor strong { display: block; font-size: 1rem; font-weight: 700; color: var(--tdd-ink); }
.tdd-testi .tdd-autor span   { display: block; font-size: .9rem; color: var(--tdd-ink-3); margin-top: .15rem; }
.tdd-testi .tdd-resultado {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--tdd-line);
  font-size: .9rem;
  color: var(--tdd-ink-2);
}
.tdd-testi .tdd-resultado b { display: block; font-size: 1.6rem; font-weight: 800; color: var(--tdd-ink); letter-spacing: -.02em; }
.tdd-testi-nav {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-top: 3rem;
}
.tdd-testi-nav .tdd-flechas { display: flex; gap: .5rem; }
.tdd-testi-nav button {
  width: 3rem; height: 3rem;
  border: 1px solid var(--tdd-line);
  background: transparent;
  color: var(--tdd-ink);
  cursor: pointer;
  display: grid; place-items: center;
  transition: background .3s ease, color .3s ease;
}
.tdd-testi-nav button svg { width: 1.1rem; height: 1.1rem; stroke: currentColor; fill: none; stroke-width: 2; }
.tdd-testi-nav button:hover { background: var(--tdd-ink); color: var(--tdd-bg); }
.tdd-testi-nav .tdd-bullets { display: flex; gap: .5rem; }
.tdd-testi-nav .tdd-bullets .swiper-pagination-bullet {
  width: 2rem; height: 4px; border-radius: 0;
  background: var(--tdd-ink); opacity: .3; margin: 0;
  transition: opacity .3s ease;
}
.tdd-testi-nav .tdd-bullets .swiper-pagination-bullet-active { opacity: 1; }


/* --------------------------------------------------------------------------
   8. PASOS — proceso en pista horizontal (vertical en móvil)
   Reutiliza el motivo del timeline de Home: línea naranja + círculo numerado.
   -------------------------------------------------------------------------- */
.tdd-pasos .tdd-track {
  list-style: none;
  margin: 0; padding: 0;
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--n, 5), 1fr);
  gap: 2.5rem;
}
.tdd-pasos .tdd-track::before {          /* la línea */
  content: '';
  position: absolute;
  top: 1.5rem;
  left: 0; right: 0;
  height: 1px;
  background: var(--tdd-accent);
  opacity: .55;
}
.tdd-paso { position: relative; padding-top: 4.5rem; }
.tdd-paso-n {
  position: absolute;
  top: 0; left: 0;
  width: 3rem; height: 3rem;
  display: grid; place-items: center;
  background: var(--tdd-bg);
  border: 1px solid var(--tdd-accent);
  color: var(--tdd-accent);
  font-weight: 800;
  font-size: 1.05rem;
  transition: background .35s ease, color .35s ease;
}
.tdd-paso:hover .tdd-paso-n { background: var(--tdd-accent); color: var(--tdd-bg); }
.tdd-paso h3 { font-size: 1.15rem; line-height: 1.25; font-weight: 700; margin-bottom: .75rem; }
.tdd-paso h3::before { content: ''; display: block; width: 30px; height: 5px; background: var(--tdd-accent); margin-bottom: 1rem; }
.tdd-paso p  { font-size: .98rem; line-height: 1.6; color: var(--tdd-ink-2); }

/* --------------------------------------------------------------------------
   9. Ajuste al zig-zag del tema (el slider se usa tal cual, con las proporciones de Home)
   -------------------------------------------------------------------------- */
/* Zig-zag: la imagen no debe dominar sobre el texto.
   SOLO a partir de 769 px: por debajo, el tema apila imagen y texto al 100 % de ancho
   (style.css @media max-width:768px) y estas anchuras dejarían el texto en una columna
   estrechísima con una imagen minúscula al lado. */
@media (min-width: 769px) {
  section.duties-container.tdd-zigzag .duty-wrapper .media-wrap { width: 42%; height: 52vh; }
  section.duties-container.tdd-zigzag .duty-wrapper .duties-info { width: 52%; }
}

@media (max-width: 1024px) {
  .tdd-pasos .tdd-track { grid-template-columns: 1fr; gap: 2rem; }
  .tdd-pasos .tdd-track::before { top: 0; bottom: 0; left: 1.5rem; right: auto; width: 1px; height: auto; }
  .tdd-paso { padding-top: 0; padding-left: 4.75rem; }
}

/* --------------------------------------------------------------------------
   10. FRANJA DE LOGOS — reutiliza slider-logos-container + .customerSwiper del
   tema (script.js lo inicializa en las páginas de producto). Compacta.
   -------------------------------------------------------------------------- */
section.slider-logos-container.tdd-logos { padding-top: 3.25rem; padding-bottom: 3.25rem; }
section.slider-logos-container.tdd-logos .tdd-kicker { justify-content: center; margin-bottom: 2rem; }
section.slider-logos-container.tdd-logos .customer-slider-wrapper { position: relative; z-index: 1; }
section.slider-logos-container.tdd-logos .customerLogo img {
  height: 2.25rem;
  filter: grayscale(1) contrast(1.05);
  opacity: .7;
  transition: filter .35s ease, opacity .35s ease;
}
section.slider-logos-container.tdd-logos .swiper-slide:hover .customerLogo img { filter: none; opacity: 1; }
/* sin logo: el nombre como marca tipográfica, hasta que se suba el oficial */
section.slider-logos-container.tdd-logos .customerLogo.tdd-wordmark {
  display: flex; align-items: center; justify-content: center;
  height: 2.5rem;
  text-decoration: none;
}
section.slider-logos-container.tdd-logos .customerLogo.tdd-wordmark span {
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--tdd-ink);
  opacity: .55;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  padding: 0 .75rem;
  box-sizing: border-box;
  transition: opacity .35s ease, color .35s ease;
}
/* Móvil: el carrusel del tema muestra 2 por pantalla, así que «Microsoft Azure» o
   «Google Gemini» no caben en una línea. Se deja envolver en dos líneas centradas. */
@media (max-width: 640px) {
  section.slider-logos-container.tdd-logos .customerLogo.tdd-wordmark { height: auto; min-height: 2.5rem; }
  section.slider-logos-container.tdd-logos .customerLogo.tdd-wordmark span {
    font-size: .95rem;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.2;
    text-align: center;
    padding: 0 .4rem;
  }
}
section.slider-logos-container.tdd-logos .swiper-slide:hover .customerLogo.tdd-wordmark span { opacity: 1; color: var(--tdd-accent); }


/* --------------------------------------------------------------------------
   11. Capitalización inglesa — corrección
   El tema aplica `text-transform: capitalize` en 20 sitios (herencia del diseño
   original en inglés). En español eso pone en mayúscula palabras que no deben
   llevarla: «Ventas Y Clientes», «Márgenes Reales», «Back-Office». Se desactiva
   donde hay frases de varias palabras; los rótulos que van en mayúscula por
   diseño (.tdd-kicker) no se tocan, porque eso es versalita, no capitalización.
   -------------------------------------------------------------------------- */
section.home-functional-container.tdd-slider .functional-wrapper.slider .tab-slider-wrapper .title span,
section.home-functional-container.tdd-slider .functional-wrapper .functional-box .functional-info .info h3,
section.home-functional-container.tdd-slider .functional-wrapper .functional-box .functional-info-mobile span,
section.duties-container.tdd-zigzag .duties-info .title h2,
.tdd-sec h2, .tdd-sec h3, .tdd-sec p, .tdd-sec span, .tdd-sec blockquote, .tdd-sec summary, .tdd-sec strong, .tdd-sec b {
  text-transform: none;
}
.tdd-sec .tdd-kicker { text-transform: uppercase; }   /* rótulo, intencionado */

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
/* BUG-014 (2026-09-09): `.tdd-iconos.tdd-tres .tdd-grid` son TRES clases y estas reglas del
   responsive solo dos, así que la de 3 columnas ganaba por especificidad dentro de la media query
   y las tarjetas se quedaban a 3 por fila en el móvil: la sección de 6 industrias de la home
   desbordaba 254 px a 390 px de ancho. Estaba latente porque ningún `tarjetas_icono` ni
   `metricas` de las 8 páginas ya cargadas tiene 3 o 6 filas, que es cuando se aplica `tdd-tres`.
   Se repiten los selectores con `.tdd-tres` para empatar la especificidad. */
@media (max-width: 1024px) {
  .tdd-iconos .tdd-grid,
  .tdd-iconos.tdd-tres .tdd-grid { grid-template-columns: repeat(2, 1fr); }
  .tdd-metricas .tdd-grid,
  .tdd-metricas.tdd-tres .tdd-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .tdd-sec .tdd-inner { padding: 4.5rem 6vw; }
  .tdd-definicion .tdd-inner, .tdd-faq .tdd-inner, .tdd-sec .tdd-cabecera.tdd-dos { grid-template-columns: 1fr; }
  .tdd-faq .tdd-lateral { position: static; }
  .tdd-triptico .tdd-grid, .tdd-media .tdd-grid { grid-template-columns: 1fr; }
  .tdd-testi { grid-template-columns: 1fr; padding-top: 4rem; }
  .tdd-testi .tdd-comillas { font-size: 9rem; }
  .tdd-datos { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .tdd-iconos .tdd-grid, .tdd-metricas .tdd-grid, .tdd-datos,
  .tdd-iconos.tdd-tres .tdd-grid, .tdd-metricas.tdd-tres .tdd-grid { grid-template-columns: 1fr; }
  :root { --tdd-escalon: 1.25rem; }   /* un solo valor, y las dos familias lo leen */
}

/* --------------------------------------------------------------------------
   10. Fondo de curvas vs. escalón  (feedback de Pablo, 2026-09-09)
   --------------------------------------------------------------------------
   El escalón de estas dos secciones (`::before` arriba-derecha y `::after`
   abajo-izquierda, style.css:1754 y :1772) se pinta con `background-color:
   var(--main-color)`: naranja PLANO. Pero el fondo de la sección no es plano,
   es un `<div class="back-overlay">` con `img/frame-back.svg`, un patrón de
   curvas blancas que cubre el 100 % del alto. Resultado: en las dos esquinas
   del escalón hay un corte visible entre el naranja plano y las curvas.

   No se puede arreglar dándole el patrón al escalón: el overlay es un <img>
   con `aspect-ratio` y `scaleY(.75)` centrado por flex, y reproducir su
   posición como `background-position` en un rectángulo de 2rem se descuadra
   en cuanto cambia el viewport.

   Se enmascara el overlay para que las bandas superior e inferior sean naranja
   plano justo donde vive el escalón. Se conservan las curvas —que son lo mejor
   que tiene el bloque— y el corte desaparece. Degrada bien: un navegador sin
   `mask-image` se queda como está hoy.
   El escalón mide 2rem (1rem por debajo de 768 px, style.css:4796), así que la
   banda plana es algo mayor para que la transición no se vea. */
section.orange-container.home .back-overlay,
section.duties-container.tdd-zigzag .back-overlay {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, transparent 2rem, #000 3.6rem, #000 calc(100% - 3.6rem), transparent calc(100% - 2rem), transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, transparent 2rem, #000 3.6rem, #000 calc(100% - 3.6rem), transparent calc(100% - 2rem), transparent 100%);
}

/* --------------------------------------------------------------------------
   11. Franja de logotipos de cliente en marquesina  (2026-09-09)
   --------------------------------------------------------------------------
   Sustituye al carrusel de flechas del hero de la home. Motivo: con 50 clientes,
   las flechas dejan de tener sentido —serian 5 clics para verlos todos y nadie
   los hace, asi que el visitante nunca llega a saber que son cincuenta—. Una
   marquesina continua lo cuenta en tres segundos sin pedir nada.

   Por que en CSS y no con Swiper: `grid` (dos filas) y `loop` son INCOMPATIBLES en
   Swiper 8 (comprobado: las filas colapsan a una y quedan 0 posiciones), y el
   autoplay con `delay: 0` no arranca. Dos animaciones CSS no tienen ese problema,
   no dependen de nadie y no se pueden desincronizar.

   El bucle es perfecto por construccion: cada fila contiene su lista DOS veces y
   se desplaza exactamente -50 %, asi que el fotograma final es idéntico al inicial.
   -------------------------------------------------------------------------- */
.tdd-mq {
  display: flex;
  flex-direction: column;
  gap: .9rem;
  overflow: hidden;
  width: 100%;
  /* los extremos se desvanecen: sin esto los logotipos aparecen y desaparecen de golpe */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%);
}
.tdd-mq-fila { display: flex; width: max-content; will-change: transform; }
.tdd-mq-pista {
  display: flex;
  align-items: center;
  gap: 2.25rem;
  padding-right: 2.25rem;
  flex: none;
}
.tdd-mq-fila.tdd-a { animation: tdd-mq-desliza 68s linear infinite; }
.tdd-mq-fila.tdd-b { animation: tdd-mq-desliza 84s linear infinite reverse; }
/* dos duraciones distintas y sentidos opuestos: si van iguales parecen una sola pieza rigida */
.tdd-mq:hover .tdd-mq-fila,
.tdd-mq:focus-within .tdd-mq-fila { animation-play-state: paused; }

.tdd-mq .tdd-mq-logo { flex: none; display: flex; align-items: center; justify-content: center; }
.tdd-mq .tdd-mq-logo img {
  height: 3.2rem;              /* antes 2.5rem: Pablo pidió mas tamaño, se perdia definicion */
  width: auto;
  max-width: none;
  object-fit: contain;
  display: block;
}
@keyframes tdd-mq-desliza {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (max-width: 768px) {
  .tdd-mq { gap: .7rem; }
  .tdd-mq-pista { gap: 1.6rem; padding-right: 1.6rem; }
  .tdd-mq .tdd-mq-logo img { height: 2.5rem; }
}
/* Quien pide menos movimiento no ve ninguno: la franja se queda quieta y legible */
@media (prefers-reduced-motion: reduce) {
  .tdd-mq-fila { animation: none; }
}

/* --------------------------------------------------------------------------
   12. BUG-030 · Separación dura entre el texto del hero y la franja de logos
   --------------------------------------------------------------------------
   LA QUEJA (Pablo, 2026-09-09): «los logos, en función del zoom, se solapan con
   el texto superior. La forma en que lo montemos finalmente debería tener una
   separación hard entre el texto y esa funcionalidad».

   EL MECANISMO, medido con tools/local/medir-hueco-hero.mjs
   El hero de la home vive en DOS sistemas de coordenadas que no se hablan:
     · `section.slogan-container` es `height: 100vh` (style.css:1146) y
       `.slogan-info` es `height: 100%` con `justify-content: center`: el texto
       se centra en una caja cuyo alto lo manda el VIEWPORT.
     · `.customer-slider-wrapper` es `position: absolute; bottom: 7rem`
       (style.css:1045): la franja se ancla al BORDE INFERIOR, fuera del flujo.
   El texto se mide en rem y la caja en vh. Al subir el zoom los rem no cambian
   y el viewport en px CSS se encoge, así que el texto crece DENTRO de una caja
   que se encoge, se desborda por arriba y por abajo (está centrado) y se mete
   debajo de la franja. Nada lo impide: son dos capas independientes.

   Cifras del antes (1400x900 al 175 %, viewport CSS 800x413): el hero mide 413 px
   y el texto necesita 524; el H1 se sale 55 px por ENCIMA del viewport y el hueco
   con la franja es de -284 px. 7 de las 36 combinaciones medidas solapaban.

   LA SEPARACIÓN DURA: la franja entra en el FLUJO.
   Se deja de anclar al borde inferior y pasa a ser una segunda línea del flex del
   hero. Con eso el solape no es «improbable», es imposible: dos líneas de un
   contenedor flex no pueden ocupar el mismo espacio, y `row-gap` es un mínimo que
   `align-content` no puede comprimir. El hueco deja de ser el sobrante de
   `100vh - alto del texto` (elástico, depende del zoom) y pasa a ser un número
   fijo en rem (rígido, el zoom no lo toca).

   `height: auto` + `min-height: 100vh` es la otra mitad: sin eso el hero seguiría
   siendo una caja rígida y el texto se recortaría por arriba en vez de solaparse.
   Ahora, si texto + franja no caben en la pantalla, el hero crece.

   `align-content: center` mantiene la intención del diseño original —el contenido
   del hero centrado verticalmente—, solo que ahora el grupo centrado es
   «texto + franja» en vez del texto solo. Es lo que permite quitar el
   `bottom: 7rem`: la franja ya no necesita anclaje, la coloca el centrado.

   Esto NO es un invento: el propio tema hace exactamente esto en tres de sus media
   queries (`max-width: 768px` en style.css:4967 y las dos de landscape móvil,
   :7074 y :7285). Aquí solo se generaliza a las anchuras de escritorio, que son
   las únicas que se habían quedado sin arreglar y son donde trabaja Pablo.

   POR QUÉ 2,5rem (40 px) de hueco duro
   1. Es el mayor hueco interno del propio bloque de texto: `.slogan-info .content`
      lleva `margin: 2.5rem 0` (style.css:1240). Un separador entre dos bandas de
      contenido distintas no puede ser menor que la separación interna de una de
      ellas, o la franja se lee como parte del texto.
   2. Es la cifra que ya había a 1920x1080 al 100 %, la única configuración de la
      que Pablo nunca se ha quejado: se convierte en el suelo de todas las demás.
   En móvil se baja a 2rem: la franja es más baja (dos filas de 2,5rem en vez de
   3,2rem), el ritmo vertical del tema ahí es de 1,5-2rem y el alto es escaso.

   OJO PARA EL FUTURO: no volver a `position: absolute` en el hero. Es el patrón que
   causó el bug. Y el arreglo es estructural, no depende de la longitud del texto:
   verificado con el copy largo de hoy y con el corto que va a quedar.
   -------------------------------------------------------------------------- */
@media only screen and (min-width: 769px) {
  section.slogan-container.home {
    /* la caja deja de ser rígida: si el contenido no cabe, el hero crece */
    height: auto;
    min-height: 100vh;
    box-sizing: border-box;
    /* la franja pasa a ser una segunda línea del flex */
    flex-wrap: wrap;
    align-content: center;
    /* EL HUECO DURO. Un mínimo entre líneas que align-content no puede comer */
    row-gap: 2.5rem;
    /* Y LA OTRA SEPARACIÓN DURA, la de arriba: la cabecera es `position: fixed`
       con `height: 10vh` (style.css:527), o sea que se encoge con el zoom, pero el
       logotipo de dentro mide 10rem de ancho y NO se encoge: a 1400x900 al 175 % la
       caja de la cabecera mide 33 px y su contenido llega hasta 37. Con el hero
       centrado, el H1 se metía debajo del logotipo. `max()` cubre los dos casos: a
       zoom bajo manda el 10vh de la cabecera, a zoom alto manda el suelo en rem. */
    padding-top: max(10vh, 5rem);
  }
  /* `height: 100%` contra un padre de alto automático se resuelve como `auto`, pero
     se escribe explícito para que no dependa de ese detalle */
  section.slogan-container.home .slogan-info { height: auto; }
  section.slogan-container.home .slogan-rect-boxes { height: auto; }
  section.slogan-container.home .customer-slider-wrapper {
    position: static;          /* <- aquí muere el bug: fuera del anclaje al borde */
    bottom: auto;
    left: auto;
    /* ocupa la línea entera, alineada con el padding de 8vw de la sección en vez
       del 80vw + left:8vw que necesitaba el posicionamiento absoluto */
    flex: 0 0 100%;
    width: 100%;
    margin: 0;
  }
}
/* Móvil: aquí el tema YA pone la franja en el flujo (style.css:4967), así que no
   solapaba. Pero el hueco lo daba de rebote el `margin-bottom: 1.5rem` de
   `.slogan-info` y medía 24 px: se sustituye por el mismo mecanismo duro que en
   escritorio, para que el suelo sea uno y esté escrito en un solo sitio. */
@media only screen and (max-width: 768px) {
  section.slogan-container.home {
    flex-wrap: wrap;
    row-gap: 2rem;
    /* Mismo problema de cabecera que en escritorio: el tema reserva
       `padding-top: 12vh` (style.css:5001) y la cabecera móvil es `height: 8vh`
       (style.css:4625), así que sobre el papel sobra. Pero las dos son vh y el
       logotipo son rem: medido a 320 px al 175 % y al 200 %, el H1 acababa 2 y 4 px
       POR DEBAJO del borde de la cabecera. El mismo `max()` pone el suelo en rem. */
    padding-top: max(12vh, 5rem);
  }
  section.slogan-container.home .slogan-info { margin-bottom: 0; }
  section.slogan-container.home .customer-slider-wrapper { margin-top: 0; }
}

/* --------------------------------------------------------------------------
   Enlaces EN LÍNEA dentro del texto de un bloque (cuerpo, lead, intro).
   Añadido el 2026-09-09. `tdd_parrafos()` no escapa el HTML, así que un <a> en
   el campo `cuerpo` de un .md llega al DOM — pero no tenía ni una regla, o sea
   que salía con el estilo de enlace que herede del tema. Es la misma trampa que
   en el hero de la home, donde hubo que meter un `style` en línea.
   DOS DECISIONES, LAS DOS MEDIDAS EN EL RENDER, NO SUPUESTAS:

   1. El color del texto se HEREDA (`inherit`) en lugar de ser el naranja de marca.
      Medido: el naranja #FF7008 sobre blanco da 2,77:1, por debajo del 4,5:1 que pide
      AA para texto normal. Heredando queda en 11,93:1 sobre el gris #F5F5F5.

   2. El subrayado va en `currentColor` y el naranja se reserva para el hover.
      La primera versión de esta regla ponía el subrayado naranja, y medido daba
      2,54:1 sobre el gris. El mínimo de la SC 1.4.11 para elementos gráficos es 3:1,
      y aquí el subrayado NO es decoración: al heredarse el color, es la única señal de
      que el texto es un enlace, así que tiene que cumplir ese umbral. En currentColor
      cumple de sobra. El naranja sigue apareciendo, pero al pasar por encima, que es un
      estado y no la forma en que se lee la página.
   -------------------------------------------------------------------------- */
.tdd-cuerpo a, .tdd-lead a, .tdd-intro a, .tdd-resp a, .tdd-nota a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  text-decoration-color: currentColor;
  transition: text-decoration-color .2s ease;
}
.tdd-cuerpo a:hover, .tdd-lead a:hover, .tdd-intro a:hover, .tdd-resp a:hover, .tdd-nota a:hover {
  text-decoration-color: var(--main-color, #FF7008);
}
/* Sobre el fondo naranja el hover naranja seria invisible: ahi no cambia. */
.tdd-bg-naranja .tdd-cuerpo a:hover, .tdd-bg-naranja .tdd-lead a:hover,
.tdd-bg-naranja .tdd-intro a:hover, .tdd-bg-naranja .tdd-resp a:hover,
.tdd-bg-naranja .tdd-nota a:hover {
  text-decoration-color: currentColor;
}


/* --------------------------------------------------------------------------
   13. MURO DE LOGOS — rejilla estatica, los 50 a la vez (`logos` con muro: si)
   Para /sobre-nosotros/, donde la CANTIDAD es el argumento: en una marquesina
   no se pueden contar. No comparte nada con la franja del punto 10 —ni Swiper,
   ni marquesina, ni el JS— asi que la trampa de las dos franjas en la misma
   pagina (BUG-016) no le aplica.

   Anchos de columna, calculados y no tanteados. El contenido util de una
   seccion es `100vw - 16vw` (padding 8vw a cada lado; 12vw por debajo de
   860 px), y con `gap` de 20 px las celdas salen asi:
     1400 px -> 1176 utiles / 5 col = 219 px de celda
      941 px ->  941 utiles / 4 col = 220 px
      757 px ->  757 utiles / 3 col = 239 px
      317 px ->  317 utiles / 2 col = 148 px  (movil, gap 12 px)
   Con celdas explicitas por tramo —y no `auto-fill`— porque `minmax(150px,1fr)`
   dejaba UNA sola columna a 360 px, que es peor que dos pequenas.

   Y el dato que importa de verdad (BUG-023, que aviso de que el liston de
   legibilidad de los 50 se habia medido 1,64x benevolo): el lienzo es 600x180,
   asi que una celda de 219 px escala la tinta a 0,365 y el muro sale con MAS
   tinta en pantalla que la marquesina, no menos —53 px de media geometrica
   frente a los 41 px de la franja (imagen a 3,2rem de alto). En movil, 36 px
   frente a 32. O sea que este bloque no empeora la legibilidad de ningun
   logotipo: la mejora en todos los tramos.
   -------------------------------------------------------------------------- */
.tdd-muro .tdd-cabecera { margin-bottom: 2.5rem; }
.tdd-muro-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tdd-muro-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: .5rem;
  box-sizing: border-box;
}
.tdd-muro-cell img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: contain;
  /* A diferencia de la franja del punto 10, aqui NO se atenuan. Los archivos ya
     son de escala de grises y cuatro de los cincuenta estan a 2,43:1 sobre el
     #F5F5F5: bajarles la opacidad al 70 % los hundiria, y este bloque es la
     prueba de la pagina, no un adorno de fondo. */
  opacity: 1;
  transition: transform .3s ease;
}
.tdd-muro-cell a { display: block; width: 100%; text-decoration: none; }
.tdd-muro-cell:hover img { transform: scale(1.06); }
/* sin logo: el nombre como marca tipografica, igual que en la franja */
.tdd-muro-wordmark {
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--tdd-ink);
  text-align: center;
  line-height: 1.2;
}
@media (prefers-reduced-motion: reduce) {
  .tdd-muro-cell img { transition: none; }
  .tdd-muro-cell:hover img { transform: none; }
}
@media (max-width: 1120px) {
  .tdd-muro-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .tdd-muro-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .tdd-muro-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
  .tdd-muro-cell { padding: .25rem; }
}

/* `.tdd-nota` se anadio a la regla de enlaces en linea el 2026-09-10, y el motivo importa:
   /sobre-nosotros/ enlaza los tres casos publicados desde la `nota` de cada metrica, porque el
   componente `metricas` no tiene campo `intro` y no habia otro sitio. Sin esto los tres enlaces
   se pintaban como texto gris corriente —vistos en la captura, no supuestos— asi que existian
   para el DOM y no para el lector: tres enlaces a la unica prueba publicada de la empresa,
   invisibles. La nota es texto atenuado, asi que el subrayado en `currentColor` es lo que hay que
   mirar: hereda el gris y se distingue por el subrayado, no por el color. */
.tdd-nota a { text-decoration-thickness: 1px; }


/* --------------------------------------------------------------------------
   14. DIAGRAMA — texto a la izquierda, diagrama HTML a la derecha
   --------------------------------------------------------------------------
   2026-09-15. Sustituye al `zigzag` heredado en las SIETE páginas de producto
   (decisión de Pablo; procedimiento en docs/checklist-publicacion.md §2.4.bis).
   Aquí va solo el ENCAJE de la sección. El diagrama en sí se pinta dentro de
   `.tdd-diagrama__hueco[data-diagrama]`, que este archivo deja vacío a propósito.

   ⚠️ CONTRASTE — ESTO NO ES UN DESCUIDO, NO LO «ARREGLES» SIN LEER ESTO.
   El texto de esta sección va en BLANCO sobre el naranja de marca, incluido el
   H2. Con la cifra por delante, sobre `#FF7008`:

       H2, blanco #FFFFFF ................  2,77:1
       cuerpo, blanco al 88 % (--tdd-ink-2)  2,45:1   (compuesto: rgb(255,238,225))
       tinta #0D0D0D .....................   7,01:1
       mínimo AA .........................   4,5:1 texto normal · 3:1 texto grande

   (El cuerpo sale PEOR que el H2 porque `--tdd-ink-2` no es blanco puro sino
   blanco al 88 %. `tools/local/medir-contraste.mjs` dice 2,77 para los dos
   porque descarta el canal alfa: BUG-040 en docs/backlog.md. La cifra buena
   del cuerpo es 2,45.)

   O sea que el blanco NO llega a ninguno de los dos umbrales. Es una decisión
   consciente de Pablo, tomada primero para el bloque naranja de la home el
   2026-09-09 y confirmada para estas siete el 2026-09-15. Queda registrada como
   DECISION-001 en docs/backlog.md, con las tres salidas posibles si algún día se
   quiere cumplir AA (oscurecer el naranja de la sección · dejar blanco solo el
   H2 y el cuerpo en tinta · asumirlo). El blanco no se declara aquí: lo hereda
   de `--tdd-ink`, que `.tdd-bg-naranja` ya pone en `#fff` (§0).

   LA T DEL H2. `.tdd-sec .tdd-h2::before/::after` se pintan con `--tdd-accent`,
   que sobre fondo naranja `.tdd-bg-naranja` vale `#fff` y no el naranja de marca
   (§0, última línea del bloque de tokens). O sea que la T se ve, en blanco, y
   NO desaparece sobre el naranja. Medido en el render, no supuesto. Si alguien
   quita ese `--tdd-accent: #fff` de §0 «para simplificar», la T de los H2 de
   todas las secciones naranjas se vuelve invisible: es naranja sobre naranja.

   ALTURA DE LAS DOS COLUMNAS. Requisito explícito de Pablo: tienen que medir lo
   mismo. No se resuelve ajustando porcentajes de ancho —son siete páginas con
   textos de longitudes distintas y lo que cuadra en una descuadra en otra—, sino
   POR CONSTRUCCIÓN: la rejilla estira las dos columnas (`align-items: stretch`,
   que además es el valor por defecto, escrito aquí porque es una decisión) y la
   figura de la derecha se rellena con un hijo en posición absoluta que ocupa el
   100 % del alto que le toque. Así la igualdad es automática hoy con fotografía
   y seguirá siéndolo cuando entren los diagramas y cuando se reescriba el copy.
   -------------------------------------------------------------------------- */
.tdd-diagrama .tdd-inner {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 3rem 7vw;
  align-items: stretch;
}
/* El texto se centra VERTICALMENTE dentro de su columna estirada: si la figura es
   la que manda en el alto, el texto no se queda pegado arriba. */
.tdd-diagrama__texto {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.tdd-diagrama .tdd-h2 { margin-bottom: 1.75rem; }
.tdd-diagrama .tdd-cuerpo p {
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--tdd-ink-2);
}
.tdd-diagrama .tdd-cuerpo p + p { margin-top: 1.25rem; }

/* La figura no tiene alto propio: lo hereda de la fila de la rejilla, o sea del
   texto. El suelo de 18rem es solo eso, un suelo, para que un copy corto no deje
   una franja aplastada; no es quien decide el alto en ninguna de las siete. */
.tdd-diagrama__figura {
  position: relative;
  min-height: 18rem;
}
.tdd-diagrama__hueco,
.tdd-diagrama__img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
/* `cover` es lo correcto para una FOTOGRAFÍA: recorta por el lado largo y las dos columnas
   miden exactamente lo mismo. Pero seis de los siete respaldos son fotos y el séptimo no:
   Business Intelligence lleva un SVG que es un diagrama con etiquetas, y `cover` le comía la
   etiqueta de arriba y las barras de abajo (BUG-039, visto en la captura). Un SVG en este hueco
   es siempre un dibujo con etiquetas, y un dibujo recortado deja de contar lo que cuenta.
   La igualdad de altura no se toca: la imagen sigue ocupando el 100 % de la caja. */
.tdd-diagrama__img { object-fit: cover; }
.tdd-diagrama__img[src$=".svg"] { object-fit: contain; }

/* El patrón de curvas del tema (`frame-back.svg`), que es lo que impide que la
   banda naranja sea un rectángulo plano. Lo llevaban los dos bloques de
   referencia: el `zigzag` y el `.orange-container` de la home.
   Hace falta crear contexto de apilamiento en la sección, porque `.back-overlay`
   del tema va en `z-index: -1` y sin él se pintaría DETRÁS del fondo de la propia
   sección, o sea invisible (así lo resuelve el tema en `section.duties-container`,
   style.css:3016, que lleva `z-index: 1` justamente por esto). */
.tdd-diagrama.tdd-bg-naranja { z-index: 1; }
.tdd-diagrama > .back-overlay { pointer-events: none; }
/* Mismo enmascarado que en §10: las bandas de arriba y abajo quedan naranja plano
   justo donde vive el escalón, para que no se vea el corte entre el naranja liso
   del escalón y las curvas. */
.tdd-diagrama.tdd-bg-naranja > .back-overlay {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, transparent 2rem, #000 3.6rem, #000 calc(100% - 3.6rem), transparent calc(100% - 2rem), transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, transparent 2rem, #000 3.6rem, #000 calc(100% - 3.6rem), transparent calc(100% - 2rem), transparent 100%);
}

/* Apilado por debajo del punto de ruptura que ya usa este archivo para las otras
   rejillas de dos columnas (§Responsive, 860 px). Al apilarse la figura pierde la
   fila que le daba el alto, así que se lo da ella con `aspect-ratio`. */
@media (max-width: 860px) {
  .tdd-diagrama .tdd-inner { grid-template-columns: 1fr; }
  .tdd-diagrama__figura { min-height: 0; aspect-ratio: 16 / 10; }
}

/* ==========================================================================
   15. HERO DE LOS POSTS — tipografía sobre la foto (2026-09-23, propuesta D)
   --------------------------------------------------------------------------
   El texto negro sobre la foto con el velo naranja en multiply no se leía; un
   panel blanco encima (v2) se leía pero «parecía un Word» (Pablo). Elegida la D
   de cinco propuestas (audits/backups/screenshots/hero-propuestas/):
     - un degradado negro desde la izquierda oscurece la foto donde va el texto
       (de arriba abajo en móvil, con el texto abajo)
     - título blanco grande, resumen blanco al 85 %, fecha y lectura en píldoras
     - antetítulo «Caso de éxito · sector · producto» (single.php lo saca del
       kicker de la sección 1); «Caso de éxito» en naranja sobre negro, 7:1
     - el logo pasa a blanco mientras la cabecera está sobre el hero
   Todo va ceñido a .tdd-hero-post, que solo pone single.php: index.php usa el
   mismo contenedor y conserva su hero.
   ========================================================================== */
section.blog-slogan-container.tdd-hero-post .background-overlay::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(10, 10, 10, .92) 0%, rgba(10, 10, 10, .78) 42%, rgba(10, 10, 10, 0) 78%);
}
section.blog-slogan-container.tdd-hero-post .blog-info .tdd-hero-marco { max-width: 42rem; }
section.blog-slogan-container.tdd-hero-post .blog-info .tdd-hero-kicker {
  display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .75rem;
  margin: 0 0 1.25rem; font-size: .78rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .78);
}
section.blog-slogan-container.tdd-hero-post .blog-info .tdd-hero-kicker span + span::before {
  content: '·'; margin-right: .75rem; opacity: .5;
}
section.blog-slogan-container.tdd-hero-post .blog-info .tdd-hero-kicker__tipo { color: #FF7008; }
section.blog-slogan-container.tdd-hero-post .blog-info .tdd-hero-marco h1 {
  color: #fff; font-size: clamp(2.3rem, 3.9vw, 4rem); line-height: 1.05; letter-spacing: -.02em;
}
section.blog-slogan-container.tdd-hero-post .blog-info .tdd-hero-marco .content { margin: 1.5rem 0 1.75rem; }
section.blog-slogan-container.tdd-hero-post .blog-info .tdd-hero-marco .content p {
  color: rgba(255, 255, 255, .85); font-size: 1.05rem; text-align: left;
}
section.blog-slogan-container.tdd-hero-post .blog-info .blog-link-data-duration .blog-data-duration-wrap { column-gap: .75rem; }
section.blog-slogan-container.tdd-hero-post .blog-info .blog-link-data-duration .blog-data-duration-wrap > div {
  border: 1px solid rgba(255, 255, 255, .35); border-radius: 999px; padding: .45rem 1rem .45rem .75rem;
}
section.blog-slogan-container.tdd-hero-post .blog-info .blog-link-data-duration .blog-data-duration-wrap span { color: #fff; white-space: nowrap; }
section.blog-slogan-container.tdd-hero-post .blog-info .blog-link-data-duration .blog-data-duration-wrap img { filter: invert(1); height: 1.3rem; }
/* el logo en blanco solo mientras la cabecera está sobre el hero y el menú cerrado */
html:not(.op-menu) body:has(section.tdd-hero-post) header:not(.bg-effect) .identity img { filter: brightness(0) invert(1); }
@media (max-width: 768px) {
  section.blog-slogan-container.tdd-hero-post .background-overlay::after {
    background: linear-gradient(0deg, rgba(10, 10, 10, .94) 0%, rgba(10, 10, 10, .8) 55%, rgba(10, 10, 10, .15) 100%);
  }
  section.blog-slogan-container.tdd-hero-post .blog-info { justify-content: flex-end; padding-bottom: 2.5rem; }
  /* en una línea: si se parte, el «·» queda suelto al principio de la segunda */
  section.blog-slogan-container.tdd-hero-post .blog-info .tdd-hero-kicker { font-size: .68rem; letter-spacing: .08em; gap: .35rem .5rem; }
  section.blog-slogan-container.tdd-hero-post .blog-info .tdd-hero-kicker span + span::before { margin-right: .5rem; }
}