/* ===========================================================
   PhinodIA · sistema de diseño v7
   Editorial, sin tarjetas. Bandas a sangre, filetes y numerales.
   =========================================================== */

@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('fuentes/bricolage_grotesque_latin-s.woff2') format('woff2');
  font-weight: 200 800;
  font-display: swap;
  font-style: normal;
}
/* El crítico de la ronda 7 vio huecos dentro de las palabras —"f alla",
   "automá t icamente", "bo t ón", "a t ravés"— y los atribuyó a kerning o a
   una fuente de reserva. Tenía razón en el síntoma, y la causa resultó ser el
   subset: onest_latin-s.woff2 mete un hueco espurio tras la f y la t. Se
   comprobó renderizando la misma frase con el subset, con la Onest completa de
   Google Fonts y con la del sistema: el hueco solo aparece con el subset, y
   font-kerning:none no lo cambia. No es el kerning, es el archivo.
   Pasa a mandar la de Google (33.760 B, 48 B menos que la rota). El subset
   antiguo se queda solo para la flecha → y el símbolo de pausa ❚, que el
   subset latin de Google no incluye. */
@font-face {
  font-family: 'Onest';
  src: url('fuentes/onest-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Onest';
  src: url('fuentes/onest_latin-s.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
  unicode-range: U+2192, U+275A;
}

:root {
  /* --- identidad, extraída del propio phinodia.com --- */
  --tinta: #0b1026;
  --tinta-2: #151b3d;
  --cobalto: #2448ff;
  --cobalto-hondo: #1b35c9;
  --cobalto-claro: #a9b8ff;
  --lima: #d4ff3a;
  --lima-honda: #b8e62a;
  --guayaba: #ff5a7a;
  --bruma: #eef1ff;
  --filete: #d9def5;
  --apagado: #6b7394;
  --pizarra: #4a5070;
  --blanco: #fff;

  /* --- ritmo: 72 @360 · 93 @768 · 128 @1440 (recta ajustada, luego tope) --- */
  --ritmo: clamp(4.5rem, 3.33rem + 5.19vw, 8rem);
  --canal: clamp(1.25rem, 4.2vw, 5rem);
  --ancho: 1320px;

  /* --- escala tipográfica fluida --- */
  --t-h1: clamp(2.8rem, 7.6vw, 6.75rem);
  --t-h2: clamp(2rem, 4.6vw, 4rem);
  --t-h3: clamp(1.25rem, 1.8vw, 1.6rem);
  --t-cuerpo: clamp(1rem, 1.05vw, 1.1875rem);
  --t-rotulo: 0.8125rem;

  /* --- velocidad del carrusel ---
     Duración fija: como la cinta se ensancha con la pantalla, los px/s suben
     solos (31 → 39 → 52 px/s de 360 a 1440), que es como se comporta la vara.
     Medido antes a 86s/64s: daba 8–30 px/s, demasiado lento para leerse vivo. */
  --marquesina-a: 24s;
  --marquesina-b: 17s;

  --curva: cubic-bezier(0.22, 1, 0.36, 1);
}


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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--tinta);
  color: var(--tinta);
  font-family: 'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: var(--t-cuerpo);
  line-height: 1.6;
  font-weight: 400;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, .cifra {
  font-family: 'Bricolage Grotesque', 'Onest', sans-serif;
  font-weight: 600;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--t-h1); line-height: 1.02; letter-spacing: -0.035em; }
h2 { font-size: var(--t-h2); line-height: 1.06; letter-spacing: -0.03em; }
h3 { font-size: var(--t-h3); line-height: 1.2;  letter-spacing: -0.01em; }
p  { margin: 0; }
a  { color: inherit; }

/* ---------- estructura ---------- */

.banda { padding-block: var(--ritmo); position: relative; }
.banda--tinta { background: var(--tinta); color: var(--bruma); }
.banda--bruma { background: var(--bruma); color: var(--tinta); }
.banda--blanca { background: var(--blanco); color: var(--tinta); }

.eje {
  width: min(100% - var(--canal) * 2, var(--ancho));
  margin-inline: auto;
}

.rejilla { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(1.5rem, 3vw, 3rem); }

/* ---------- rótulos y filetes ---------- */

.rotulo {
  font-size: var(--t-rotulo);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cobalto);
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.banda--tinta .rotulo { color: var(--lima); }
.rotulo::before {
  content: '';
  width: 1.75rem;
  height: 2px;
  background: currentColor;
  flex: none;
}

.filete { height: 1px; background: var(--filete); border: 0; margin: 0; }
.banda--tinta .filete { background: rgba(169, 184, 255, 0.22); }

/* ---------- botones (sin sombra ni borde + fondo: no cuentan como cajita) ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 52px;
  min-width: 52px;
  padding: 0.9rem 1.6rem;
  border-radius: 999px;
  border: 0;
  font: 600 1rem/1 'Onest', sans-serif;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.25s var(--curva), background-color 0.25s, color 0.25s;
}
.btn:hover { transform: translateY(-2px); }
.btn:focus-visible { outline: 3px solid var(--lima); outline-offset: 3px; }
.btn--lima { background: var(--lima); color: var(--tinta); }
.btn--lima:hover { background: var(--lima-honda); }
.btn--cobalto { background: var(--cobalto); color: #fff; }
.btn--cobalto:hover { background: var(--cobalto-hondo); }
.btn--fantasma {
  background: transparent;
  color: currentColor;
  box-shadow: inset 0 0 0 1.5px currentColor;
  border-radius: 999px;
}
.btn--fantasma:hover { background: currentColor; color: var(--tinta); }
.banda--tinta .btn--fantasma:hover { color: var(--tinta); }

/* ---------- cabecera ---------- */

.cabecera {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  padding-block: 0.9rem;
  transition: background-color 0.35s, box-shadow 0.35s;
}
.cabecera.posado {
  background: rgba(11, 16, 38, 0.92);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(169, 184, 255, 0.18);
}
.cabecera__fila { display: flex; align-items: center; gap: 1.5rem; }
.marca {
  display: flex; align-items: center; gap: 0.65rem;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 700; font-size: 1.3rem; letter-spacing: -0.03em;
  color: var(--bruma); text-decoration: none; flex: none;
}
.marca svg, .marca img { width: 26px; height: 30px; color: var(--lima); }
.menu { display: none; gap: 1.9rem; margin-inline: auto; }
.menu a {
  text-decoration: none; font-size: 0.95rem; font-weight: 500;
  color: var(--cobalto-claro); padding: 0.5rem 0;
  transition: color 0.2s;
}
.menu a:hover { color: var(--lima); }
.cabecera__acciones { display: flex; align-items: center; gap: 0.6rem; margin-left: auto; }
.cabecera__acciones .btn { min-height: 44px; padding: 0.6rem 1.15rem; font-size: 0.925rem; }
@media (min-width: 1024px) { .menu { display: flex; } .cabecera__acciones { margin-left: 0; } }

.pausa {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
  min-height: 44px; min-width: 44px; padding: 0.55rem 0.9rem;
  background: transparent; color: var(--cobalto-claro);
  box-shadow: inset 0 0 0 1.5px rgba(169, 184, 255, 0.35);
  border: 0; border-radius: 999px; cursor: pointer;
  font: 500 0.85rem/1 'Onest', sans-serif;
}
.pausa:hover { color: var(--lima); box-shadow: inset 0 0 0 1.5px var(--lima); }
.pausa__texto { display: none; }
@media (min-width: 640px) { .pausa__texto { display: inline; } }

/* ---------- hero ---------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-block: clamp(7rem, 14vh, 11rem) var(--ritmo);
  background: var(--tinta);
  color: var(--bruma);
  overflow: hidden;
}
#lienzo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 0;
  opacity: 0.95;
}
/* El velo solo tiene que dar contraste al texto de la izquierda.
   Si oscurece todo, el fondo animado deja de verse — y verlo es el encargo. */
.hero__velo {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(95% 75% at 74% 42%, rgba(36,72,255,0.22), transparent 66%),
    linear-gradient(100deg, rgba(11,16,38,0.90) 0%, rgba(11,16,38,0.72) 34%, rgba(11,16,38,0.10) 62%, rgba(11,16,38,0) 100%),
    linear-gradient(180deg, rgba(11,16,38,0.55) 0%, rgba(11,16,38,0) 22%, rgba(11,16,38,0) 74%, rgba(11,16,38,0.82) 100%);
}
@media (max-width: 899px) {
  .hero__velo {
    background:
      radial-gradient(110% 60% at 62% 76%, rgba(36,72,255,0.24), transparent 70%),
      linear-gradient(180deg, rgba(11,16,38,0.90) 0%, rgba(11,16,38,0.76) 48%, rgba(11,16,38,0.22) 78%, rgba(11,16,38,0.86) 100%);
  }
}
.hero .eje { position: relative; z-index: 2; }
/* Sin `max-width` en ch: se medía con la fuente del cuerpo (16 px) y dejaba
   el bloque en ~160 px, partiendo el titular y los botones. La columna manda. */
.hero__texto { grid-column: 1 / -1; }
@media (min-width: 1024px) { .hero__texto { grid-column: 1 / span 9; } }
.hero h1 { max-width: 15ch; }

.hero h1 { margin-block: 1.4rem 0; }
.hero h1 em { font-style: normal; color: var(--lima); }
.hero__sub {
  margin-top: 1.6rem;
  font-size: clamp(1.0625rem, 1.5vw, 1.375rem);
  line-height: 1.55;
  color: var(--cobalto-claro);
  max-width: 46ch;
}
.hero__acciones { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 2.4rem; }
.hero__pie {
  display: flex; flex-wrap: wrap; gap: 0.6rem 1.75rem;
  margin-top: 3rem; padding-top: 1.5rem;
  border-top: 1px solid rgba(169,184,255,0.2);
  font-size: 0.9rem; color: var(--apagado);
}
.hero__pie span { display: flex; align-items: center; gap: 0.5rem; }
.hero__pie span::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--lima); flex: none;
}

/* ---------- marquesina ---------- */

.tec { background: var(--tinta); color: var(--bruma); padding-block: clamp(3rem, 5vw, 5rem); overflow: hidden; }
.tec__rotulo { margin-bottom: 1.6rem; }
/* Rótulo de cada cinta: la de arriba son canales, la de abajo motores. Antes las
   dos filas llevaban el mismo inventario y no se entendía por qué eran dos. */
.tec__fila {
  font-size: clamp(0.78rem, 0.95vw, 0.9rem); font-weight: 600;
  color: var(--cobalto-claro); margin-bottom: 0.7rem;
}
.pista + .tec__fila { margin-top: clamp(1.6rem, 2.4vw, 2.2rem); }
/* El fundido pasa de 9 % a 15 %: con 9 % los nombres se cortaban a media palabra
   en los bordes y en una captura fija parecía un fallo de maquetación. */
.pista { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); }
.tec__aviso {
  margin-top: clamp(1.4rem, 2.2vw, 2rem);
  font-size: clamp(0.78rem, 0.95vw, 0.88rem); line-height: 1.55;
  color: var(--bruma); opacity: 0.72; max-width: 62ch;
}
.tec__aviso b { font-weight: 600; opacity: 1; }
.pista__cinta { display: flex; width: max-content; will-change: transform; }
.pista--a .pista__cinta { animation: desliza-izq var(--marquesina-a) linear infinite; }
.pista--b .pista__cinta { animation: desliza-der var(--marquesina-b) linear infinite; }
.pista__grupo { display: flex; align-items: center; gap: clamp(2.5rem, 5vw, 5rem); padding-right: clamp(2.5rem, 5vw, 5rem); }
.pista__grupo img {
  height: clamp(30px, 3.6vw, 46px);
  /* Los diez logos son cuadrados (viewBox 0 0 24 24). Declararlo aquí da el ancho
     antes de que el SVG llegue; sin esto `width:auto` valía 0 mientras cargaba y
     la cinta se recolocaba al aparecer cada marca. */
  aspect-ratio: 1;
  width: auto;
  filter: brightness(0) invert(1);
  opacity: 0.78;
  transition: opacity 0.3s;
}
.pista__grupo img:hover { opacity: 1; }
/* El nombre al lado del logo: ver el comentario de `grupo()` en guion.js. Todos
   los logos quedan monocromos y el nombre aporta el rasgo común que no tenían. */
.pista__marca { display: inline-flex; align-items: center; gap: 0.7rem; white-space: nowrap; }
.pista__uso {
  font-size: clamp(0.75rem, 0.92vw, 0.88rem); color: var(--cobalto-claro);
  opacity: 0.72; white-space: nowrap;
}
.pista__nombre {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: clamp(0.8rem, 1vw, 0.95rem); font-weight: 600;
  letter-spacing: 0.01em; color: var(--cobalto-claro);
}

@keyframes desliza-izq { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
@keyframes desliza-der { from { transform: translate3d(-50%,0,0); } to { transform: translate3d(0,0,0); } }

.sin-animacion .pista__cinta { animation-play-state: paused !important; }

/* ---------- la prueba ---------- */

.prueba__cab { grid-column: 1 / -1; }
@media (min-width: 1024px) { .prueba__cab { grid-column: 1 / span 6; } }
.prueba__media { grid-column: 1 / -1; margin-top: 2.5rem; }
@media (min-width: 1024px) { .prueba__media { grid-column: 8 / -1; margin-top: 0; } }
.prueba__video {
  width: 100%;
  aspect-ratio: 9 / 16;
  max-height: 72vh;
  object-fit: cover;
  background: var(--tinta-2);
}
.prueba__pie { margin-top: 1rem; font-size: 0.875rem; color: var(--apagado); }
.prueba__lista { margin: 2.25rem 0 0; padding: 0; list-style: none; }
/* Era `display:flex` con la etiqueta de ancho automático: cuando pasaba a dos
   líneas empujaba el valor a la izquierda, y las cuatro filas arrancaban en
   x=280, 282, 217 y 171 — 111 px de dispersión que midió el crítico de la r13.
   El mismo patrón ya estaba resuelto bien dos veces en la página (`.dato`), así
   que convivían dos sistemas para el mismo objeto. Ahora es una rejilla con
   columna de etiqueta fija: todos los valores arrancan en el mismo sitio.
   Por debajo de 768 px la etiqueta va encima del valor, como en `.dato`. */
.prueba__lista li { padding-block: 1.1rem; border-top: 1px solid var(--filete); display: grid; gap: 0.3rem; }
/* A 900, no a 768: a 768 la columna de texto mide ~340 px y una etiqueta de 14rem
   dejaba al valor menos que su palabra más larga, así que la rejilla desbordaba
   10 px la ventana. `minmax(0, 1fr)` evita que el mínimo intrínseco del valor
   vuelva a empujar nunca. Medido: 0 px de desborde en los seis anchos. */
@media (min-width: 900px) {
  .prueba__lista li { grid-template-columns: 14rem minmax(0, 1fr); column-gap: 1.5rem; row-gap: 0; align-items: baseline; }
}
.banda--tinta .prueba__lista li { border-color: rgba(169,184,255,0.2); }
.prueba__lista li:last-child { border-bottom: 1px solid var(--filete); }
.banda--tinta .prueba__lista li:last-child { border-bottom-color: rgba(169,184,255,0.2); }
.prueba__lista b { font-weight: 600; }

/* ---------- servicios: bandas a sangre, nunca tarjetas ---------- */

.servicio { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(1.5rem, 3vw, 3rem); align-items: center; padding-block: clamp(3rem, 5.5vw, 5.5rem); }
.servicio + .servicio { border-top: 1px solid var(--filete); }
.banda--tinta .servicio + .servicio { border-top-color: rgba(169,184,255,0.2); }
.servicio__texto { grid-column: 1 / -1; }
.servicio__arte { grid-column: 1 / -1; order: -1; }
@media (min-width: 900px) {
  .servicio__texto { grid-column: 1 / span 5; }
  .servicio__arte  { grid-column: 7 / -1; order: 0; }
  .servicio--volteado .servicio__texto { grid-column: 8 / -1; }
  .servicio--volteado .servicio__arte  { grid-column: 1 / span 6; order: -1; }
  /* `align-items: center` centraba el texto contra un arte mucho más alto: en el
     servicio del diagrama de n8n dejaba 465 px arriba y 468 px abajo —933 px de
     columna vacía sobre 1.470, medidos por el crítico de la r13— y el texto solo
     ocupaba el 27 % del alto de su propia columna. Alineados arriba, el bloque
     arranca donde el lector lo busca y el aire sobrante queda todo al final. */
  .servicio { align-items: start; }
}
/* El PNG/WebP lleva el fondo recortado a alfa (derivado de la luminancia),
   así que el dibujo flota sobre la banda en vez de quedar como un rectángulo
   pegado, que leería como cajita. `screen` se probó antes y ACLARABA el fondo
   del arte respecto a la banda, haciéndolo más visible: se descartó. */
.servicio__arte img {
  width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: contain;
}
.servicio__indice {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.12em;
  color: var(--cobalto); margin-bottom: 0.9rem;
}
.banda--tinta .servicio__indice { color: var(--lima); }
.servicio h3 { margin-bottom: 0.85rem; }
.servicio p { color: var(--pizarra); max-width: 48ch; }
.banda--tinta .servicio p { color: var(--cobalto-claro); }
.servicio__etiqueta {
  display: inline-block; margin-top: 1.1rem;
  font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--cobalto);
}
.banda--tinta .servicio__etiqueta { color: var(--lima); }

/* ---------- proceso: numerales grandes, filetes ---------- */

.paso { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(1rem, 2.5vw, 2.5rem); padding-block: clamp(2rem, 3.4vw, 3.2rem); border-top: 1px solid var(--filete); align-items: start; }
.banda--tinta .paso { border-top-color: rgba(169,184,255,0.2); }
.paso:last-child { border-bottom: 1px solid var(--filete); }
.banda--tinta .paso:last-child { border-bottom-color: rgba(169,184,255,0.2); }
.cifra {
  grid-column: 1 / -1;
  font-size: clamp(3rem, 7vw, 5.5rem);
  line-height: 0.85;
  font-weight: 600;
  letter-spacing: -0.05em;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--cobalto);
}
.banda--tinta .cifra { -webkit-text-stroke-color: var(--lima); }
.paso__texto { grid-column: 1 / -1; }
@media (min-width: 768px) {
  .cifra { grid-column: 1 / span 2; }
  .paso__texto { grid-column: 4 / span 8; }
}
.paso h3 { margin-bottom: 0.6rem; }
.paso p { color: var(--pizarra); max-width: 56ch; }
.banda--tinta .paso p { color: var(--cobalto-claro); }

/* ---------- quién está detrás ---------- */

.honesto__cab { grid-column: 1 / -1; }
@media (min-width: 1024px) { .honesto__cab { grid-column: 1 / span 7; } }
.honesto h2 em { font-style: normal; color: var(--lima); }
.honesto__cuerpo { grid-column: 1 / -1; margin-top: 2rem; }
@media (min-width: 1024px) { .honesto__cuerpo { grid-column: 1 / span 6; margin-top: 2.5rem; } }
.honesto__cuerpo p + p { margin-top: 1.1rem; }
.honesto__cuerpo p { color: var(--cobalto-claro); font-size: clamp(1.0625rem, 1.3vw, 1.25rem); }
.honesto__datos { grid-column: 1 / -1; margin-top: 2.5rem; display: grid; gap: 0; }
@media (min-width: 1024px) { .honesto__datos { grid-column: 8 / -1; margin-top: 2.5rem; } }
.dato { padding-block: 1.25rem; border-top: 1px solid rgba(169,184,255,0.2); }
.dato:last-child { border-bottom: 1px solid rgba(169,184,255,0.2); }
.dato dt { font-size: 0.8125rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--apagado); margin-bottom: 0.35rem; }
.dato dd { margin: 0; font-family: 'Bricolage Grotesque', sans-serif; font-size: clamp(1.5rem, 2.4vw, 2.1rem); font-weight: 600; letter-spacing: -0.02em; color: var(--bruma); }
.dato dd small { display: block; font-family: 'Onest', sans-serif; font-size: 0.9375rem; font-weight: 400; letter-spacing: 0; color: var(--cobalto-claro); margin-top: 0.3rem; }

/* ---------- empezar ---------- */

.empezar { background: var(--lima); color: var(--tinta); }
.empezar__cab { grid-column: 1 / -1; }
@media (min-width: 1024px) { .empezar__cab { grid-column: 1 / span 7; } }
.empezar .rotulo { color: var(--cobalto-hondo); }
.empezar h2 { margin-top: 1.2rem; }
.empezar__sub { margin-top: 1.4rem; font-size: clamp(1.0625rem, 1.4vw, 1.3rem); max-width: 50ch; color: #1d2340; }
.empezar__acciones { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 2.2rem; }
.empezar .btn--fantasma { box-shadow: inset 0 0 0 1.5px var(--tinta); }
.empezar .btn--fantasma:hover { background: var(--tinta); color: var(--lima); }
.empezar__precio { grid-column: 1 / -1; margin-top: 2.5rem; }
@media (min-width: 1024px) { .empezar__precio { grid-column: 9 / -1; margin-top: 0; } }
.empezar__precio .filete { background: rgba(11,16,38,0.22); }
.empezar__precio p { padding-block: 1rem; font-size: 0.9375rem; color: #1d2340; }

/* ---------- preguntas ---------- */

.faq { grid-column: 1 / -1; }
@media (min-width: 1024px) { .faq { grid-column: 4 / -1; } .faq__cab { grid-column: 1 / span 3; } }
.faq__cab { grid-column: 1 / -1; margin-bottom: 1.5rem; }
.faq details { border-top: 1px solid var(--filete); }
.faq details:last-of-type { border-bottom: 1px solid var(--filete); }
.faq summary {
  list-style: none; cursor: pointer;
  padding-block: 1.3rem;
  display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: clamp(1.0625rem, 1.5vw, 1.3rem); font-weight: 600; letter-spacing: -0.015em;
  min-height: 44px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-size: 1.5rem; line-height: 1; color: var(--cobalto); flex: none; transition: transform 0.3s var(--curva); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding-bottom: 1.4rem; color: var(--pizarra); max-width: 62ch; }

/* ---------- pie ---------- */

.pie { background: var(--tinta); color: var(--cobalto-claro); padding-block: clamp(3.5rem, 5vw, 5rem) 2.5rem; }
.pie__fila { display: grid; grid-template-columns: repeat(12, 1fr); gap: 2rem; }
.pie__marca { grid-column: 1 / -1; }
.pie__marca p { margin-top: 1rem; font-size: 0.9375rem; max-width: 34ch; color: var(--apagado); }
.pie__nav, .pie__legal, .pie__contacto { grid-column: 1 / -1; }
/* `--apagado` da 4,04:1 sobre la tinta del pie y no llega a AA: lo midió el
   medidor en cuanto entró esta columna. El resto del pie ya usa la variante
   clara por el mismo motivo (ver la regla de `.pie__marca p`). */
.pie__contacto li { font-size: 0.9375rem; color: var(--apagado-claro); }
/* El correo no tiene espacios y no puede partir: en una columna estrecha era él,
   y no la lista legal, quien desbordaba. Red de seguridad para cualquier ancho. */
.pie__contacto a { overflow-wrap: anywhere; }
.pie h4 { font: 600 0.8125rem/1 'Onest', sans-serif; letter-spacing: 0.1em; text-transform: uppercase; color: var(--apagado); margin: 0 0 1rem; }
.pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.pie a { text-decoration: none; font-size: 0.9375rem; transition: color 0.2s; display: inline-block; padding-block: 0.15rem; }
.pie a:hover { color: var(--lima); }
.pie__fin { margin-top: 3rem; padding-top: 1.75rem; border-top: 1px solid rgba(169,184,255,0.16); font-size: 0.85rem; color: var(--apagado); display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }

/* ---------- animación de entrada al scroll ---------- */

.js section.revela { opacity: 0; transform: translate3d(0, 34px, 0); }
.js section.revela.dentro { opacity: 1; transform: translate3d(0, 0, 0); transition: opacity 0.75s var(--curva), transform 0.75s var(--curva); }

.js .escalona > * { opacity: 0; transform: translate3d(0, 22px, 0); }
.js .dentro .escalona > * { opacity: 1; transform: translate3d(0, 0, 0); transition: opacity 0.6s var(--curva), transform 0.6s var(--curva); }
.js .dentro .escalona > :nth-child(2) { transition-delay: 0.07s; }
.js .dentro .escalona > :nth-child(3) { transition-delay: 0.14s; }
.js .dentro .escalona > :nth-child(4) { transition-delay: 0.21s; }
.js .dentro .escalona > :nth-child(5) { transition-delay: 0.28s; }

@media (prefers-reduced-motion: reduce) {
  .js section.revela, .js .escalona > * { opacity: 1 !important; transform: none !important; transition: none !important; }
  .pista__cinta { animation: none !important; }
  .btn:hover { transform: none; }
}
.sin-animacion section.revela, .sin-animacion .escalona > * { opacity: 1 !important; transform: none !important; }

/* ---------- utilidades ---------- */

.oculto-visual {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* Fuera de vista sin desplazar la caja: `left:-9999px` contaba como desborde. */
.saltar {
  position: absolute; left: 1rem; top: 1rem; z-index: 100;
  background: var(--lima); color: var(--tinta); padding: 0.9rem 1.4rem; font-weight: 600;
  clip-path: inset(50%); opacity: 0; pointer-events: none;
}
.saltar:focus { clip-path: none; opacity: 1; pointer-events: auto; }

/* ---------- cabeceras de sección y entradillas ----------
   max-width en `ch` sobre el contenedor usa la fuente del contenedor (16 px),
   no la del H2 (64 px): por eso el titular partía en tres líneas estrechas.
   Se limita el H2 con su propia medida. */
.cab { max-width: 46rem; }
.cab h2 { max-width: 16ch; margin-top: 1.2rem; }
.entradilla { margin-top: 1.4rem; color: var(--pizarra); max-width: 46ch; }
.banda--tinta .entradilla { color: var(--cobalto-claro); }
.lista-pasos { margin-top: var(--ritmo); }
.servicio--primero { margin-top: var(--ritmo); }
.honesto h2, .empezar h2 { max-width: 17ch; }
.faq__cab h2 { margin-top: 1.2rem; }

/* ---------- arreglo de desborde en pantallas estrechas ----------
   Una rejilla de 12 columnas con gap fijo tiene un ancho mínimo de
   11 × gap antes de contar el contenido: a 360 px eso ya desborda.
   Por debajo de 640 px se colapsa a una sola columna. */
.rejilla, .pie__fila, .servicio, .paso { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.rejilla > *, .pie__fila > *, .servicio > *, .paso > * { min-width: 0; }

@media (max-width: 639px) {
  .rejilla, .pie__fila, .servicio, .paso { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
}

/* La cabecera a 320 px: el conjunto marca + pausa + CTA no cabe. */
@media (max-width: 349px) {
  .cabecera__fila { gap: 0.5rem; }
  .marca span { display: none; }
  .cabecera__acciones { gap: 0.4rem; }
  .cabecera__acciones .btn { padding: 0.6rem 0.9rem; font-size: 0.875rem; }
  .pausa { padding: 0.55rem 0.7rem; }
}

/* A ancho de móvil los CTA partían el texto en dos líneas dentro de una fila flex.
   A pantalla completa quedan en una línea y además son objetivo táctil cómodo. */
@media (max-width: 479px) {
  .hero__acciones .btn, .empezar__acciones .btn { flex: 1 1 100%; }
}

/* ===========================================================
   Correcciones del recorrido del portero (9 pantallas)
   =========================================================== */

/* --- 1 · objetivos táctiles de 44 px de alto mínimo --- */
.marca { min-height: 44px; }
.servicio__etiqueta { display: inline-flex; align-items: center; min-height: 44px; margin-top: 0.6rem; }
.pie a { display: inline-flex; align-items: center; min-height: 44px; padding-block: 0; }
.pie ul { gap: 0; }
.pie__fin span { display: inline-flex; align-items: center; min-height: 32px; }
/* La identificación del operador ocupa su propia línea: es el dato que exige el
   Estatuto del Consumidor y no debe quedar perdido entre los avisos cortos. */
.pie__operador { flex: 1 0 100%; color: var(--apagado-claro); }

/* --- 2 · contraste AA sobre tinta ---
   `--apagado` (#6b7394) da 4,04:1 sobre #0b1026: no llega a AA.
   `--cobalto` (#2448ff) da 3,09:1: tampoco. Sobre oscuro se usan estos. */
:root { --apagado-claro: #9aa5cf; }
.hero .rotulo { color: var(--lima); }
.hero__pie { color: var(--apagado-claro); }
.pie { color: var(--cobalto-claro); }
.pie__marca p, .pie h4, .pie__fin { color: var(--apagado-claro); }
.dato dt { color: var(--apagado-claro); }

/* --- 3 · enlace de salto ---
   Con `clip-path` conservaba caja y el recorrido intentaba pulsarlo sin poder.
   Con alto 0 no tiene caja (queda fuera de `:visible`) pero sigue recibiendo
   el foco del teclado, que es justo para quien existe. */
.saltar {
  position: absolute; left: 1rem; top: 1rem; z-index: 100;
  height: 0; padding: 0 1.4rem; overflow: hidden; opacity: 0; pointer-events: none;
  clip-path: none;
  background: var(--lima); color: var(--tinta); font-weight: 600;
}
.saltar:focus {
  height: auto; padding: 0.9rem 1.4rem; overflow: visible;
  opacity: 1; pointer-events: auto;
}

/* La marquesina es tinta pero no lleva la clase `.banda--tinta`, así que su
   rótulo caía al cobalto (3,09:1). Y el pie del vídeo en bruma daba 4,14:1. */
.tec .rotulo { color: var(--lima); }
.prueba__pie { color: var(--pizarra); }

/* ===========================================================
   Ronda 2 · correcciones del crítico ciego
   =========================================================== */

/* --- 1 · logo: va en línea para heredar `color`.
       Como <img> salía negro puro sobre tinta: 1,1:1 de contraste. --- */
.marca__glifo { width: 26px; height: 30px; flex: none; color: var(--lima); }
.pie .marca__glifo { color: var(--lima); }

/* --- 2 · menú de móvil y tableta --- */
.hamburguesa {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; flex: none; margin-left: auto;
  background: transparent; border: 0; cursor: pointer; padding: 0;
  border-radius: 999px;
}
.hamburguesa:focus-visible { outline: 3px solid var(--lima); outline-offset: 2px; }
.hamburguesa__barras, .hamburguesa__barras::before, .hamburguesa__barras::after {
  content: ''; display: block; width: 22px; height: 2px; background: var(--bruma);
  transition: transform 0.3s var(--curva), opacity 0.2s;
}
.hamburguesa__barras { position: relative; }
.hamburguesa__barras::before { position: absolute; top: -7px; }
.hamburguesa__barras::after  { position: absolute; top: 7px; }
.menu-abierto .hamburguesa__barras { background: transparent; }
.menu-abierto .hamburguesa__barras::before { transform: translateY(7px) rotate(45deg); }
.menu-abierto .hamburguesa__barras::after  { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1023px) {
  .menu {
    display: flex; flex-direction: column; gap: 0;
    position: fixed; inset: 64px 0 auto 0;
    background: rgba(11, 16, 38, 0.98);
    backdrop-filter: blur(16px);
    padding: 0.5rem var(--canal) 1.5rem;
    margin: 0;
    transform: translateY(-120%);
    transition: transform 0.38s var(--curva);
    box-shadow: 0 1px 0 rgba(169, 184, 255, 0.18);
  }
  .menu-abierto .menu { transform: translateY(0); }
  .menu a {
    display: flex; align-items: center; min-height: 56px;
    font-size: 1.1rem; color: var(--bruma);
    border-bottom: 1px solid rgba(169, 184, 255, 0.14);
  }
  .menu a:last-child { border-bottom: 0; }
  .cabecera__acciones { margin-left: 0; }
}
@media (min-width: 1024px) {
  .hamburguesa { display: none; }
  .menu { display: flex; }
}

/* --- 3 · pausa en icono: pesaba el doble que la llamada principal --- */
.pausa { width: 44px; height: 44px; min-height: 44px; padding: 0; flex: none; }
.pausa__icono { font-size: 0.8rem; line-height: 1; }

/* --- 4 · el hero enseña el producto, no solo lo cuenta --- */
.hero .rejilla { align-items: center; }
.hero__media { grid-column: 1 / -1; margin: 2.5rem 0 0; }
@media (min-width: 1024px) {
  .hero__texto { grid-column: 1 / span 6; }
  .hero__media { grid-column: 8 / -1; margin: 0; }
}
/* El archivo es 480x854 = 9:16 exacto. La caja tiene que serlo también: limitar la
   altura con `max-height` mientras el ancho era 100% rompía la proporción y
   `object-fit: cover` recortaba el vertical a 0,72 — una agencia de video vertical
   enseñando su video recortado. Ahora el tope se expresa como ancho derivado de la
   altura, que es lo único que conserva la proporción, y `contain` nunca recorta. */
.hero__video {
  width: 100%; max-width: min(360px, calc(62vh * 9 / 16)); aspect-ratio: 9 / 16; object-fit: contain;
  background: var(--tinta-2);
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.75);
}
@media (min-width: 1024px) { .hero__video { max-width: calc(62vh * 9 / 16); } }
.hero__pieMedia {
  margin-top: 0.85rem; font-size: 0.8125rem; color: var(--apagado-claro);
  max-width: 34ch;
  /* Evita que la última línea quede con una sola palabra («foto.»), que es
     como estaba y como lo cazó el crítico. */
  text-wrap: pretty;
}

/* --- 5 · tira de fotogramas: tres imágenes reales en vez de repetir el reproductor --- */
.tira { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
.tira img { width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; }

/* --- 6 · la columna izquierda de Preguntas estaba vacía --- */
.faq__nota { margin: 1.3rem 0 1.6rem; color: var(--pizarra); max-width: 32ch; }

/* --- 7 · pie: la regla de ancho completo iba DESPUÉS de la media query y la
       anulaba, así que las tres columnas se apilaban a la izquierda en
       escritorio y el 40 % derecho quedaba vacío. --- */
/* Cuatro bloques, pero no cuatro en fila a cualquier ancho: a 768 cada columna
   de 12 mide ~29 px y cuatro bloques en fila desbordaban la ventana 10 px.
   Entre 768 y 1151 van en 2×2; de 1152 en adelante, los cuatro en fila, que es
   donde la última columna llega al borde derecho y el pie deja de quedar
   apelotonado a la izquierda (lo que midió el crítico de la r13: contenido
   hasta x1179 y nada hasta x1440). */
@media (min-width: 768px) {
  .pie__marca    { grid-column: 1 / span 6; }
  .pie__nav      { grid-column: 8 / -1; }
  .pie__legal    { grid-column: 1 / span 6; }
  .pie__contacto { grid-column: 8 / -1; }
}
@media (min-width: 1152px) {
  .pie__marca    { grid-column: 1 / span 4; }
  .pie__nav      { grid-column: 6 / span 2; }
  .pie__legal    { grid-column: 8 / span 2; }
  .pie__contacto { grid-column: 10 / -1; }
}

/* --- 8 · reequilibrio del hero tras meter el video ---
   Con el texto en 6 columnas el titular pasaba a 4 líneas y los botones caían
   bajo el pliegue. La vara resuelve su titular en 3 líneas; este también. */
@media (min-width: 1024px) {
  .hero__texto { grid-column: 1 / span 7; }
  .hero__media { grid-column: 9 / -1; }
  .hero h1 { font-size: clamp(2.8rem, 5.9vw, 5.25rem); max-width: 100%; }
  /* El video llevaba `margin-left:auto` y el pie se quedaba en el borde de la
     figura: 97 px de desfase, medidos por el crítico de la r13 en lo primero
     que se ve de la página. Se desplaza la figura entera, no el video, y así
     video y pie comparten el mismo borde izquierdo. */
  .hero__media { width: min(100%, calc(62vh * 9 / 16)); margin-left: auto; }
  .hero { padding-block: clamp(6rem, 11vh, 8.5rem) var(--ritmo); }
}

/* --- 9 · a 360 px la cabecera no cabía con hamburguesa + pausa + CTA.
       Por debajo de 1024 px el CTA vive dentro del menú. --- */
.menu__cta { display: none; }
@media (max-width: 1023px) {
  .cabecera__acciones .btn { display: none; }
  .menu__cta { display: inline-flex; margin-top: 1.25rem; align-self: flex-start; border-bottom: 0; }
  .menu a.menu__cta { color: var(--tinta); }
}

/* --- 10 · el menú cerrado seguía en el árbol de accesibilidad y en el orden
       de tabulación, desplazado fuera de pantalla. `visibility` lo retira
       de verdad sin perder la transición. --- */
@media (max-width: 1023px) {
  .menu { visibility: hidden; transition: transform 0.38s var(--curva), visibility 0s linear 0.38s; }
  .menu-abierto .menu { visibility: visible; transition: transform 0.38s var(--curva), visibility 0s; }
}

/* ===========================================================
   Ronda 3 · lo que señaló el segundo crítico
   =========================================================== */

/* --- 11 · «Cuatro pasos»: el texto moría a 442 px del borde y dejaba
       un tercio del ancho vacío a la derecha de cada filete. --- */
@media (min-width: 900px) {
  .paso__texto {
    grid-column: 3 / -1;
    display: grid; grid-template-columns: 4fr 6fr;
    gap: clamp(1.5rem, 3vw, 3.5rem); align-items: start;
  }
  .paso__texto h3 { margin-bottom: 0; }
  .paso__texto p { max-width: 54ch; }
}

/* --- 12 · Preguntas: la columna izquierda quedaba en blanco bajo el botón.
       Sticky: acompaña al acordeón en vez de abandonarlo. --- */
@media (min-width: 1024px) {
  .faq__cab { position: sticky; top: 7rem; align-self: start; }
}

/* --- 13 · la navegación tenía que parecer el control principal, y era al
       revés: la hamburguesa iba sin recuadro y el botón de pausa con aro. --- */
.hamburguesa { box-shadow: inset 0 0 0 1.5px rgba(169, 184, 255, 0.45); }
.hamburguesa:hover { box-shadow: inset 0 0 0 1.5px var(--lima); }
.menu-abierto .hamburguesa { box-shadow: inset 0 0 0 1.5px var(--lima); }
.pausa { box-shadow: inset 0 0 0 1px rgba(169, 184, 255, 0.22); }
.pausa:hover { box-shadow: inset 0 0 0 1px var(--lima); }

/* --- 14 · el CTA desaparecía en toda la franja móvil. Cabe desde 480 px;
       por debajo sigue dentro del menú, que es donde hay sitio. --- */
@media (min-width: 480px) and (max-width: 1023px) {
  .cabecera__acciones .btn { display: inline-flex; padding: 0.6rem 1.05rem; font-size: 0.9rem; }
  .menu__cta { display: none; }
}

/* --- 15 · a 768 px la foto ocupaba 290 de 616 px y dejaba la derecha vacía. --- */
@media (min-width: 560px) and (max-width: 1023px) {
  .hero__media { display: flex; flex-direction: column; align-items: center; }
  .hero__video { max-width: min(100%, 460px); }
  .hero__pieMedia { max-width: 46ch; text-align: center; }
}

/* --- 16 · Precios reales del servicio de video -----------------------------
   El crítico de la ronda 3 señaló lo único que de verdad era un retroceso:
   la web de hoy publica cuatro paquetes con precio y un botón de compra por
   fila, y el rediseño lo había degradado a un enlace. Los números son los que
   publica phinodia.com/precios; aquí no se calcula ni se redondea ninguno.

   Va con filetes, sin fondo propio y sin radio: una tabla de datos, no cuatro
   tarjetas de precio. La fila "más elegida" se marca con una etiqueta lima, no
   con un recuadro tintado, que sería exactamente la cajita que el encargo veta. */

.precios { margin-top: var(--ritmo); border-top: 1px solid rgba(169, 184, 255, 0.22); padding-top: clamp(2.5rem, 4vw, 4rem); }
.precios__cab { max-width: 60ch; }
.precios__cab h3 { margin: 0.6rem 0 0.85rem; font-size: var(--t-h3); }
.precios__nota { color: var(--apagado-claro); max-width: 56ch; }

.tabla-precio { width: 100%; border-collapse: collapse; margin-top: clamp(2rem, 3.2vw, 3rem); text-align: left; }
.tabla-precio th, .tabla-precio td { padding-block: 1.15rem; padding-right: 1rem; vertical-align: baseline; font-weight: 400; }
.tabla-precio thead th {
  font-size: var(--t-rotulo); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--apagado-claro); font-weight: 600; padding-bottom: 0.9rem;
}
.tabla-precio thead tr, .tabla-precio tbody tr { border-bottom: 1px solid rgba(169, 184, 255, 0.22); }
.tabla-precio tbody th[scope="row"] { font-weight: 600; color: var(--bruma); white-space: nowrap; }
.tabla-precio tbody th em {
  display: block; font-style: normal; font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.07em; text-transform: uppercase; color: var(--lima); margin-top: 0.3rem;
}
.tabla-precio td { color: var(--apagado-claro); }
.tabla-precio .cifra-precio { color: var(--bruma); font-weight: 600; font-size: 1.125rem; white-space: nowrap; }
.tabla-precio tbody a {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--lima); font-weight: 600; text-decoration: none;
  box-shadow: inset 0 -1px 0 0 currentColor;
}
.tabla-precio tbody a:hover { color: var(--blanco); }
.precios__pie { margin-top: 1.6rem; color: var(--apagado-claro); font-size: 0.9375rem; }

/* El enlace iba dentro del parrafo y media 187x20 px: el recorrido del portero
   lo marco como objetivo pequeno en 430, 412 y 768 px, y tenia razon — 20 px de
   alto no se pulsan con un dedo. Sale del parrafo y pasa a tener su propia caja
   de 44 px, que es el minimo para un dedo, no una preferencia. */
.precios__enlace {
  display: inline-flex; align-items: center; min-height: 44px; margin-top: 0.4rem;
  color: var(--lima); font-weight: 600; text-decoration: none;
  box-shadow: inset 0 -1px 0 0 currentColor;
}
.precios__enlace:hover { color: var(--blanco); }

/* Por debajo de 760 px una tabla de seis columnas no cabe: cada fila pasa a
   bloque y cada celda lleva delante su rótulo, sacado de `data-r`. Sigue siendo
   una <table> para quien usa lector de pantalla. */
@media (max-width: 899px) {
  .tabla-precio thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .tabla-precio tbody tr { display: block; padding-block: 1.3rem 1.5rem; }
  .tabla-precio tbody th[scope="row"] { display: block; font-size: 1.125rem; padding-block: 0 0.5rem; white-space: normal; }
  .tabla-precio tbody td { display: flex; justify-content: space-between; gap: 1rem; padding-block: 0.3rem; }
  .tabla-precio tbody td::before { content: attr(data-r); color: var(--apagado-claro); }
  .tabla-precio tbody td:last-child { display: block; padding-top: 0.5rem; }
  .tabla-precio tbody td:last-child::before { content: none; }
}

/* --- 17 · el CTA final era el elemento más pequeño de la banda más grande ---
   Medido: "Escríbenos" 139×52 px, contra 255×52 del CTA del héroe. Es la
   acción principal de la página y pesaba menos que la secundaria.

   El color también cambia, y no por gusto: cobalto sobre lima da 5,27:1 de
   contraste de borde y tinta sobre lima da 16,27:1 (calculado, no estimado).
   Los dos pasan AA, pero el triple de separación es lo que hace que el botón
   se despegue del fondo en vez de vibrar contra él. El par tinta/lima ya
   existía en esta banda: es el hover del botón fantasma. */
.empezar .btn--cobalto {
  background: var(--tinta); color: var(--lima);
  padding-inline: 2.4rem; min-height: 60px; font-size: 1.0625rem;
}
.empezar .btn--cobalto:hover { background: #1d2340; color: var(--blanco); }

/* 24 · El botón de "Preguntar" era el único azul relleno de la página: cuatro
   estilos distintos de botón primario para un sistema de cinco colores. Pasa al
   par tinta/lima que ya usa la sección de "Empezar", y quedan tres.
   Nota sobre la otra mitad de esa misma crítica: el crítico midió #2448ff sobre
   blanco en 4,45:1 y lo dio por debajo de AA. Recalculado con la fórmula WCAG 2.x
   da 6,09:1 — pasaba de sobra. Se cambia por coherencia del sistema, no por
   contraste. El par nuevo da 16,27:1. */
.faq__cab .btn--cobalto { background: var(--tinta); color: var(--lima); }
.faq__cab .btn--cobalto:hover { background: #1d2340; color: var(--blanco); }

/* --- 18 · lo que encontró el crítico ciego de la ronda 4 -------------------
   De sus nueve "retrocesos frente a la web actual", cuatro resultaron ciertos
   al medirlos contra el sitio vivo. Estos son los arreglos. Los otros cinco,
   y por qué no se tocan, están en el informe. */

/* 18a · las cifras se alineaban a la izquierda, así que $ 19.900 y $ 339.900
   empezaban en el mismo píxel y los dígitos no se podían comparar de un
   vistazo, que es para lo que existe una tabla de precios. A la derecha y con
   cifras de ancho fijo. */
.tabla-precio th:nth-child(2), .tabla-precio td:nth-child(2),
.tabla-precio th:nth-child(4), .tabla-precio td:nth-child(4),
.tabla-precio th:nth-child(5), .tabla-precio td:nth-child(5) { text-align: right; }
.tabla-precio td:nth-child(2), .tabla-precio td:nth-child(4), .tabla-precio td:nth-child(5) {
  font-variant-numeric: tabular-nums;
}
.tabla-precio th:last-child, .tabla-precio td:last-child { text-align: right; }

/* 18b · "El más elegido" se quedó en 12 px, el único texto de la página por
   debajo de 13. Sube al mismo cuerpo que el resto de rótulos. */
.tabla-precio tbody th em { font-size: var(--t-rotulo); }

/* 18c · "Iniciar sesión" no existía en ninguna parte, y phinodia.com tiene
   cuentas de usuario: quien ya es cliente se quedaba sin puerta. Va en el menú
   y en el pie, apuntando a app.phinodia.com/ingresar (comprobado, HTTP 200). */
.menu__sesion { font-weight: 500; }
@media (min-width: 1024px) { .menu__sesion { margin-left: 0.8rem; opacity: 0.85; } }

/* 18d · el demo de voz vivo de phinodia.com no tenía equivalente aquí. No se
   duplica el widget —gastaría crédito de ElevenLabs de Sergio en una página de
   previsualización—; se enlaza al que ya está contestando. */
.servicio__demo { margin-top: 0.9rem; color: var(--apagado-claro); font-size: 0.9375rem; }

/* Este enlace iba dentro del parrafo y el portero lo caza igual que al de la
   tienda: 257x20 px en 390, 430 y 412. Es la segunda vez que cometo el mismo
   fallo, asi que queda escrito: en esta pagina un enlace no vive dentro de un
   parrafo. Sale a su linea, con su caja de 44 px. */
.servicio__demo-enlace {
  display: inline-flex; align-items: center; min-height: 44px; margin-top: 0.2rem;
  color: var(--lima); font-weight: 600; font-size: 0.9375rem; text-decoration: none;
  box-shadow: inset 0 -1px 0 0 currentColor;
}
.servicio__demo-enlace:hover { color: var(--blanco); }

@media (max-width: 899px) {
  .tabla-precio td:nth-child(2), .tabla-precio td:nth-child(4), .tabla-precio td:nth-child(5),
  .tabla-precio td:last-child { text-align: left; }
}

/* --- 19 · lo que encontró el crítico ciego de la ronda 5 -------------------
   Tercer crítico, tercer "Sí", pero el más preciso de los tres con la tabla.
   De lo que dijo, esto es lo que resultó cierto al mirarlo. */

/* 19a · "la fila recomendada apenas se distingue: de reojo, las cuatro pesan
   igual". Cierto. Se marca con un filete lima de 3 px a la izquierda y con su
   botón relleno — NO con fondo teñido, que sería la cajita que el encargo veta. */
.tabla-precio tbody tr.es-elegido th[scope="row"] { box-shadow: inset 3px 0 0 0 var(--lima); padding-left: 0.9rem; }
.tabla-precio a.comprar-destacado {
  background: var(--lima); color: var(--tinta); border-radius: 999px;
  padding-inline: 1.3rem; box-shadow: none; font-weight: 600;
}
.tabla-precio a.comprar-destacado:hover { background: var(--lima-honda); color: var(--tinta); }

/* 19b · "el rótulo cuelga bajo su fila y la empuja: 81 px las demás, 97 px la
   recomendada". Cierto y medible. Pasa a ir en línea con el nombre. */
.tabla-precio tbody th em { display: inline; margin-top: 0; margin-left: 0.55rem; white-space: nowrap; }
@media (max-width: 899px) { .tabla-precio tbody th em { display: block; margin-left: 0; margin-top: 0.3rem; } }

/* 19c · "la columna de precio por segundo ha perdido la barra proporcional que
   hacía que el argumento se entendiera de un vistazo". La barra vuelve, y su
   ancho es el valor dividido por el mayor: anclada en cero, sin exagerar la
   diferencia. 995 → 100 %, 850 → 85,4 %. */
.tabla-precio td .ps { display: block; }
.tabla-precio td .barra {
  display: block; height: 2px; width: var(--p); margin-top: 0.4rem; margin-left: auto;
  background: var(--lima); opacity: 0.55;
}
@media (max-width: 899px) { .tabla-precio td .barra { margin-left: 0; } }

/* 19d · "tres de las cuatro garantías han desaparecido de ese punto; quitarlas
   no limpia, desprotege". Vuelven. Son las que publica phinodia.com/precios. */
.garantias { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: 0.1rem; }
@media (min-width: 900px) { .garantias { grid-template-columns: 1fr 1fr; column-gap: 2.5rem; } }
.garantias li {
  padding-block: 0.85rem; color: var(--apagado-claro); font-size: 0.9375rem;
  border-top: 1px solid rgba(169, 184, 255, 0.22);
}
.garantias b { color: var(--bruma); font-weight: 600; }

/* 19e · "C elimina la prueba social; quitar los testimonios de la página que
   cobra es un retroceso comercial". Vuelven tres, copiados literales de los que
   phinodia.com ya publica. Sin recuadro: filete arriba y la cita en grande. */
.opiniones { margin-top: clamp(2.5rem, 4vw, 4rem); border-top: 1px solid rgba(169, 184, 255, 0.22); padding-top: clamp(2.5rem, 4vw, 3.5rem); }
.opiniones blockquote { margin: 0; padding-block: 1.6rem; border-top: 1px solid rgba(169, 184, 255, 0.14); }
.opiniones blockquote:first-of-type { border-top: 0; }
.opiniones blockquote p {
  margin: 0; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 500;
  font-size: clamp(1.15rem, 1.7vw, 1.5rem); line-height: 1.3; letter-spacing: -0.015em; color: var(--bruma);
  max-width: 44ch; text-wrap: balance;
}
.opiniones blockquote p::before { content: '«'; color: var(--lima); margin-right: 0.15em; }
.opiniones blockquote p::after  { content: '»'; color: var(--lima); margin-left: 0.15em; }
.opiniones cite { display: block; margin-top: 0.8rem; font-style: normal; font-weight: 600; color: var(--bruma); font-size: 0.9375rem; }
.opiniones cite small { display: block; font-weight: 400; color: var(--apagado-claro); margin-top: 0.15rem; }
.opiniones__pie { margin-top: 1.8rem; color: var(--apagado-claro); font-size: 0.9375rem; max-width: 60ch; }
@media (min-width: 900px) {
  .opiniones { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 2.5rem; }
  .opiniones .rotulo, .opiniones__pie { grid-column: 1 / -1; }
  .opiniones blockquote { border-top: 1px solid rgba(169, 184, 255, 0.22); padding-top: 1.6rem; }
  .opiniones blockquote:first-of-type { border-top: 1px solid rgba(169, 184, 255, 0.22); }
}

/* --- 20 · lo que encontró el crítico ciego de la ronda 6 -------------------
   Cuarto "Sí" seguido. De sus cinco defectos, dos resultaron ciertos al
   medirlos y uno de los que él marcó como sospecha resultó falso. */

/* 20a · "los tres pies de testimonio quedan a tres alturas distintas". Cierto
   y medido: 5.940, 6.002 y 6.033 px — 93 px de escalón, porque las citas tienen
   3, 2 y 1 líneas y van alineadas arriba. Con filetes verticales entre columnas
   el ojo espera retícula. Cada cita pasa a columna flexible y el nombre se va
   al fondo, a un riel común. */
@media (min-width: 900px) {
  .opiniones blockquote { display: flex; flex-direction: column; height: 100%; }
  .opiniones blockquote cite { margin-top: auto; padding-top: 1.2rem; }
}

/* 20b · "cite small" era el unico texto que quedaba por debajo de 13 px (12,5).
   Su contraste es 7,75:1, muy por encima de AA — el problema era el cuerpo, no
   el color. */
.opiniones cite small { font-size: var(--t-rotulo); }

/* --- 21 · lo que encontró el crítico de la ronda 7 ------------------------
   Séptimo crítico, el primero que miró la tabla de precios a tamaño real.
   Dijo "no está listo para firmar: en escritorio cerca, en móvil no".
   De sus cuatro bloqueantes, al medirlos contra el DOM, uno era cierto, uno
   era cierto por una causa que él no podía ver, y dos eran falsos. Lo que
   sigue son los ciertos. Los falsos, y por qué, están en el informe. */

/* 21a · CAUSA RAÍZ de casi todo lo que falla en móvil, y no la vio ninguno de
   los siete porque no se ve en una captura: en <900px el td es display:flex
   con justify-content:space-between, así que ".ps" y ".barra" son HERMANOS
   flex. De ahí salen, de un solo golpe, los tres defectos que él midió:
     · la cifra "$ 995/s" se parte en dos líneas (51 px de alto sobre 26 de
       interlineado) porque es un flex-item que se encoge;
     · queda en el centro, a 150 px, mientras los demás valores de la tarjeta
       alinean a 340 — el único dato fuera de su columna;
     · y la barra, que debería medir var(--p), la encoge el flex a 158 px
       EXACTOS en las cuatro filas. Medido: 158/158/158/158.
   Eso último es lo más grave que se ha encontrado en siete rondas: la única
   ayuda visual para comparar precio estaba diciendo, en móvil, que los cuatro
   paquetes cuestan lo mismo por segundo. Lo contrario del argumento de venta.
   Se arregla agrupando cifra, ahorro y barra en un solo hijo flex. */
.ps-grupo { display: block; }
.tabla-precio td .ps { white-space: nowrap; }

/* 21b · la barra ya no codifica el precio por segundo, codifica el AHORRO.
   Él demostró que la codificación anterior era correcta y aun así inútil:
   base cero sobre un rango real de 850–995 daba cuatro barras con 8 px de
   paso — "el ojo no ve una escalera, ve cuatro rayas iguales" — y encima
   invertida, porque la más larga era la del paquete más caro por segundo.
   Ahora: 0 / 32,1 / 65,9 / 100 %. Más barra = mejor negocio, que es la
   convención. Los porcentajes salen de dividir las cifras que publica
   phinodia.com/precios, recalculados aparte en Python:
     948/995−1 = −4,69 %   899/995−1 = −9,61 %   850/995−1 = −14,60 % */
.ahorro {
  display: block; margin-top: 0.15rem; color: var(--lima);
  font-size: var(--t-rotulo); font-weight: 600; font-variant-numeric: tabular-nums;
}
/* El portero cazó esto en la primera pasada de la ronda 7: con var(--apagado)
   "precio base" daba 4,04:1, por debajo del 4,5 de AA. Es una regresión mía,
   del mismo día. Pasa al gris que ya mide 7,75:1 en el resto de la página. */
.ahorro--base { color: var(--apagado-claro); font-weight: 400; }

/* 21c · "falsa affordance, y esto es lo más serio": la barra caía en la misma
   coordenada y que el subrayado del enlace "Comprar", en el mismo lima y con
   el mismo grosor. Dos subrayados lima idénticos en la misma línea, uno dato
   y otro el único elemento clicable. Tenía razón. La barra se va a cobalto,
   sube a 3 px y se pega al grupo en vez de flotar 22 px por debajo. */
.tabla-precio td .barra {
  height: 3px; margin-top: 0.35rem; margin-left: auto;
  background: var(--cobalto-claro); opacity: 0.9; border-radius: 2px;
}
.tabla-precio tbody tr:first-child .barra { opacity: 0; }

/* 21d · "no se dice la moneda en ninguna parte". Falso: el h3 dice "Paquetes
   de video, en pesos colombianos" y el caption también. Pero su error tiene
   causa real — mi recorte se la ocultó — y el refuerzo cuesta tres letras,
   así que la moneda entra también en la cabecera de la columna. */
.cab-moneda { opacity: 0.7; font-weight: 400; }

/* 21e · "Crecimiento no alinea con los otros tres nombres". Cierto: su texto
   arranca en x=34,4 y los demás en x=21 — 13,4 px, porque el acento de la
   fila recomendada se metía en el flujo con un padding-left. El acento sale
   del flujo y el sangrado se iguala para las cuatro. */
.tabla-precio tbody th[scope="row"] { padding-left: 0.9rem; position: relative; }
.tabla-precio tbody tr.es-elegido th[scope="row"] { box-shadow: none; padding-left: 0.9rem; }
.tabla-precio tbody tr.es-elegido th[scope="row"]::after {
  content: ''; position: absolute; left: 0; top: 0.3rem; bottom: 0.3rem;
  width: 3px; background: var(--lima);
}

@media (max-width: 899px) {
  /* el grupo recupera su sitio: a la derecha, como los demás valores de la
     tarjeta, y con un ancho propio donde el porcentaje de la barra vuelve a
     significar algo */
  .ps-grupo { margin-left: auto; text-align: right; width: 9.5rem; }
  /* 21f · "en móvil la señal de la fila recomendada se degrada: queda un
     muñón". Cierto — el acento solo cubría el encabezado de la tarjeta.
     Ahora corre la tarjeta entera, y el margen negativo lo saca del flujo
     para que el contenido siga alineado con las otras tres. */
  .tabla-precio tbody tr.es-elegido { position: relative; padding-left: 0.9rem; margin-left: -0.9rem; }
  .tabla-precio tbody tr.es-elegido::before {
    content: ''; position: absolute; left: 0; top: 1.3rem; bottom: 1.5rem;
    width: 3px; background: var(--lima);
  }
  .tabla-precio tbody th[scope="row"],
  .tabla-precio tbody tr.es-elegido th[scope="row"] { padding-left: 0; }
  .tabla-precio tbody tr.es-elegido th[scope="row"]::after { content: none; }
}

/* 21g · "en tipografía española las comillas van pegadas por dentro en ambos
   extremos". Cierto, y estaban a 3,6 px a cada lado. */
.opiniones blockquote p::before { margin-right: 0; }
.opiniones blockquote p::after  { margin-left: 0; }

/* 21h · los testimonios dejan de ser tres columnas.
   La ronda 6 encontró que los tres pies quedaban a tres alturas distintas
   (93 px de escalón) y se arreglaron anclándolos al fondo. La ronda 7
   encontró el precio de aquel arreglo: 94 px de vacío bajo la cita más
   corta, que "leído de lejos transmite: se nos acabaron los testimonios".
   Los dos tenían razón, y los dos defectos son el mismo problema — tres
   citas de 3, 2 y 1 líneas metidas en columnas de igual altura. En filas no
   existe ninguno de los dos: la cita a la izquierda, la atribución en un
   riel común a la derecha, filete de 1 px entre medias. Sin cajas.
   Y de paso cae el defecto 5-d: la nota al pie ya no queda a caballo entre
   dos columnas, porque ya no hay columnas. */
@media (min-width: 900px) {
  .opiniones { display: block; }
  .opiniones blockquote {
    display: grid; grid-template-columns: minmax(0, 1fr) 14rem; gap: 2.5rem;
    align-items: start; height: auto; padding-block: 1.7rem;
    border-top: 1px solid rgba(169, 184, 255, 0.14);
  }
  .opiniones blockquote p { max-width: 58ch; }
  .opiniones blockquote cite { margin-top: 0; padding-top: 0.3rem; text-align: right; }
  .opiniones__pie { max-width: 72ch; }
}

/* --- 22 · lo que encontró el crítico ciego de la ronda 8 ------------------
   Octavo crítico, contexto limpio. Dijo **SÍ** a la pregunta binaria y puso
   el rediseño **1.º de los tres**, por delante de la propia vara. Pero trajo
   cuatro defectos que, medidos, resultaron ciertos. Estos son los arreglos.
   Su hallazgo nº 1 —"1.136 px de vacío y la sección de preguntas no existe"—
   era un fallo de MI evidencia, no del sitio: ver el informe §22. */

/* 22a · "la barra de % se sale de su columna y queda a 18 px de $ 339.900".
   Medido: la barra más larga ocupaba 174 px de una celda de 191 y empezaba
   en x=1000, justo donde acaba la columna de precio (x=999). No la invadía
   —por un píxel— pero no dejaba ni un respiro entre el precio y la barra, y
   de lejos se leen como una sola cosa. La escala se queda en el 72 % de la
   celda: la escalera sigue viéndose y aparecen 54 px de aire. */
.tabla-precio td .barra { width: calc(var(--p) * 0.72); }

/* 22b · "el subrayado del enlace de 02 — Voz invade texto que no es enlace".
   Cierto, y la causa es peor que el síntoma: `Se cotiza según alcance` es un
   <span> NO clicable que llevaba la MISMA clase, el mismo color de enlace y
   la misma caja de 44 px que `Ver precios y comprar →`, que sí es un <a>.
   Tres de los cuatro servicios tenían una etiqueta que parecía pulsable y no
   lo era. Se separan: el <a> conserva el color de enlace y gana subrayado;
   el <span> pasa a gris de dato y pierde la caja de 44 px, que no tiene
   sentido en algo que no se pulsa. */
span.servicio__etiqueta {
  color: var(--apagado-claro); min-height: 0; margin-top: 0.9rem;
  display: block; letter-spacing: 0.1em;
}
.banda--tinta span.servicio__etiqueta { color: var(--apagado-claro); }
a.servicio__etiqueta { box-shadow: inset 0 -1px 0 0 currentColor; }
a.servicio__etiqueta:hover { color: var(--blanco); }

/* 22c · "rejilla de garantías: 5 ítems en 2 columnas; la tercera regla se
   corta a media página y no continúa". Cierto: al añadir la quinta garantía
   en la ronda 7 quedó una celda huérfana. La quinta cruza las dos columnas y
   la rejilla vuelve a cerrar. */
@media (min-width: 900px) { .garantias__ancha { grid-column: 1 / -1; } }

/* 22d · "3 erratas RAE: el punto queda dentro de las comillas de cierre, en
   los tres testimonios". Cierto. En español el punto va SIEMPRE después de
   las comillas de cierre. El punto se quita del texto y lo pone el pseudo-
   elemento, detrás del ». */
.opiniones blockquote p::after { content: '».'; }

/* --- 23 · Las cuatro piezas de los servicios -------------------------------
   Sustituyen a cuatro WebP decorativos: dos bocadillos vacíos, un ecualizador
   que invitaba a pulsar y no se podía pulsar, un árbol de nodos sin un solo
   rótulo dentro y un triángulo de play que no reproducía nada. El crítico de la
   ronda 9 los llamó «relleno de vectores» y tenía razón: no contenían
   información y eran la causa directa de cuatro tramos muertos de página.

   Van en HTML y no en imagen por cuatro razones medibles: se leen con lector de
   pantalla, se indexan, se reflujan en cualquier ancho sin recorte, y pesan
   ~228 KB menos que los cuatro WebP juntos.

   Regla que NO se rompe: ni una caja. Nada aquí tiene radio, sombra ni fondo
   propio. Toda la separación la hacen filetes de 1 px, como en el resto. --- */

.pieza { margin: 0; display: grid; gap: 1.15rem; align-content: start; }
.pieza__rotulo {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--apagado-claro);
  padding-bottom: 0.8rem; border-bottom: 1px solid rgba(169, 184, 255, 0.24);
}
.hilo, .acta, .flujo { list-style: none; margin: 0; padding: 0; }
.pieza p { font-size: 0.95rem; line-height: 1.55; }

/* 23a · el hilo de WhatsApp. Quién habla se marca con un filete lateral y el
   color del rótulo, no metiendo el turno en una burbuja. */
.hilo__turno { padding: 0.85rem 0; border-bottom: 1px solid rgba(169, 184, 255, 0.14); }
.hilo__turno:last-child { border-bottom: 0; padding-bottom: 0; }
.hilo__quien {
  display: block; font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--apagado-claro); margin-bottom: 0.4rem;
}
.hilo__turno p { margin: 0; color: var(--bruma); }
.hilo__turno--bot { padding-left: 1rem; border-left: 2px solid var(--lima); }
.hilo__turno--bot .hilo__quien { color: var(--lima); }
.hilo__turno--humano { padding-left: 1rem; border-left: 2px solid var(--cobalto-claro); }
.hilo__turno--humano .hilo__quien { color: var(--cobalto-claro); }
.hilo__turno--humano p { color: var(--apagado-claro); }

/* 23b · el acta de la llamada: minutado a la izquierda, en cifras tabulares. */
.acta li {
  display: grid; grid-template-columns: auto 1fr; gap: 0.3rem 0.9rem;
  padding: 0.8rem 0; border-bottom: 1px solid rgba(169, 184, 255, 0.14);
}
.acta__t { font-variant-numeric: tabular-nums; font-size: 0.8rem; color: var(--lima); }
.acta__q {
  font-family: 'Bricolage Grotesque', sans-serif; font-size: 0.72rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--apagado-claro);
}
.acta li p { grid-column: 2; margin: 0; color: var(--bruma); }

/* 23c · pares dato/valor, para el cierre del acta y para el canje del video. */
.acta__salida, .canje { margin: 0; }
.acta__salida div, .canje div {
  display: flex; flex-wrap: wrap; gap: 0.35rem 1.5rem; justify-content: space-between;
  align-items: baseline; padding: 0.7rem 0;
  border-bottom: 1px solid rgba(169, 184, 255, 0.14);
}
.acta__salida div:last-child, .canje div:last-child { border-bottom: 0; }
.acta__salida dt, .canje dt {
  font-family: 'Bricolage Grotesque', sans-serif; font-size: 0.72rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--apagado-claro);
}
.acta__salida dd, .canje dd {
  margin: 0; color: var(--bruma); font-size: 0.95rem; text-align: right;
  flex: 1 1 14ch; min-width: 0;
}

/* 23d · el flujo de n8n. La secuencia la dibuja un filete vertical con un
   marcador cuadrado por nodo: es una viñeta, no un contenedor. */
.flujo { position: relative; padding-left: 1.6rem; }
.flujo::before {
  content: ''; position: absolute; left: 3px; top: 1.1rem; bottom: 1.1rem;
  width: 1px; background: rgba(212, 255, 58, 0.4);
}
.flujo li {
  position: relative; display: grid; grid-template-columns: 6.5rem 1fr;
  gap: 0.2rem 0.9rem; align-items: baseline;
  padding: 0.7rem 0; border-bottom: 1px solid rgba(169, 184, 255, 0.14);
}
.flujo li:last-child { border-bottom: 0; }
.flujo li::before {
  content: ''; position: absolute; left: -1.6rem; top: 1.15rem;
  width: 7px; height: 7px; background: var(--lima);
}
.flujo__n {
  font-family: 'Bricolage Grotesque', sans-serif; font-size: 0.78rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--lima);
}
.flujo li p { margin: 0; color: var(--bruma); }
.flujo__pie { margin: 0; color: var(--apagado-claro); font-size: 0.85rem; }
/* El mapa del flujo real. Va a hueso, sin marco ni radio ni sombra: la caja la
   dibuja el propio SVG por dentro, que es un diagrama, no una tarjeta.
   El `aspect-ratio: auto` es obligatorio: `.servicio__arte img` impone 3/2 —venía
   de cuando el arte eran ilustraciones apaisadas— y metía el mapa, que es vertical,
   dentro de una caja ancha dejándolo a un tercio de su tamaño. */
.servicio__arte img.flujo__mapa {
  display: block; width: 100%; max-width: 613px; height: auto;
  aspect-ratio: auto; object-fit: fill;
}
@media (max-width: 899px) { .servicio__arte img.flujo__mapa { max-width: 395px; margin-inline: auto; } }
/* Aquí el texto del 03 se centraba respecto al mapa. El crítico de la r13 midió
   lo que eso producía: 465 px vacíos encima del texto y 468 px debajo, 933 px de
   los 1.470 del bloque, con el texto ocupando el 27 % del alto de su columna.
   Centrar repartía el hueco en dos mitades igual de visibles. Alineado arriba
   —que es lo que hace ya el resto de servicios— las dos columnas arrancan en la
   misma línea y el aire queda junto, al final, donde no parte la lectura. */

/* 23e · en móvil el arte ya no es decoración, es contenido: va DESPUÉS del
   texto que lo introduce, no antes. En escritorio sigue alternando lados. */
@media (max-width: 899px) {
  .servicio__arte { order: 0; margin-top: 1.75rem; }
  .flujo li { grid-template-columns: 5.5rem 1fr; }
}

/* --- 25 · el paso visual de "La prueba": la foto que entró ------------------
   La sección promete «de una sola foto de producto» y enseñaba sólo la salida.
   El crítico ciego de la ronda 9 puso el déficit de material visual real como la
   ÚNICA cosa en que el rediseño pierde contra la vara; esta es la mitad barata de
   cerrarlo: enseñar la entrada, que es el argumento entero del servicio.
   Sin caja: la foto va suelta sobre la banda, con filete sólo bajo el rótulo. */
.paso-visual { margin: 0 0 1.5rem; display: grid; gap: 0.75rem; }
.paso-visual img { width: min(100%, 300px); height: auto; display: block; }
.paso-visual__rotulo {
  display: flex; align-items: center; gap: 0.6rem; margin: 0 0 0.75rem;
  font-family: 'Bricolage Grotesque', sans-serif; font-size: 0.75rem;
  font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--pizarra);
}
.paso-visual__rotulo--salida { margin-top: 1.75rem; }
.paso-visual__n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.4rem; height: 1.4rem; background: var(--tinta); color: var(--lima);
  font-size: 0.75rem; flex: none;
}
/* en pantallas anchas la foto y la tira comparten riel, no se apilan a lo tonto */
@media (min-width: 1024px) {
  .paso-visual img { width: min(100%, 236px); }
}

/* 33 · El ejemplo de flujo baja a la columna de texto del servicio 03 (ronda 11).
   El mapa de al lado es la prueba —un flujo real, leído de la API de n8n—; esto es
   un ejemplo y se presenta como tal. Mismos filetes, ninguna caja. */
.servicio__ejemplo { margin: 1.4rem 0 0.2rem; color: var(--apagado-claro); font-size: 0.9rem; }
.flujo--texto { padding-left: 0; margin-bottom: 1.4rem; }
.flujo--texto::before { display: none; }
.flujo--texto li { padding: 0.5rem 0; font-size: 0.9rem; }
.flujo--texto li::before { display: none; }
.flujo--texto li p { color: var(--apagado-claro); }