/* =============================================================================
   SERVICIOS.CSS — Kit de las páginas de servicio rediseñadas (sesión 10, 2-oct-2026)
   -----------------------------------------------------------------------------
   Páginas: /servicios/ (hub), diseno-web, landing-page, seo, tienda-online y hosting.

   NO entra en el bundle de build-css.php (igual que servidor-archivos.css y
   automatizaciones.css): includes/header.php la enlaza aparte vía $pageStyles, con ?v=mtime,
   así que un cambio aquí sale sin tocar el bundle ni esperar la caché de 10 años.

   Se escribe SOBRE el sistema del sitio (css/variables.css): mismos tokens, misma tipografía
   (Archivo + mono del sistema), mismo rojo en dos piezas, radios casi a cero, separación con
   reglas de 1 px y cambio de superficie en vez de sombras. No redefine ningún token.

   Reglas de la guía anti-IA (datos/09-guia-anti-ia.md) que esta hoja respeta a propósito:
   - Cabecera alineada a la izquierda con un OBJETO REAL al lado (ficha de precios o recorrido),
     nunca centrada y vacía. Sin degradados salvo el halo rojo al 10 % que ya usa el sitio.
   - Sin filas de tres tarjetas iguales con ícono redondo arriba: el ícono va EN LÍNEA con el
     título, en una ficha cuadrada, y las rejillas se separan con reglas de 1 px.
   - Una sola familia de íconos de línea (includes/servicios-ui.php). Sin emojis.
   - Movimiento con propósito (la ruta que se enciende, la línea de tiempo que avanza, la
     entrada escalonada de cada bloque) y TODO apagado con prefers-reduced-motion. Sin
     animación en el LCP: el titular nunca se anima.
   - El único color fuera de la paleta es el verde de estado (--sv-ok), y solo para decir
     «sí / incluido / paso cumplido». Es un color funcional, no decorativo.

   El menú es una isla casi transparente con texto casi blanco: la cabecera es oscura desde el
   borde superior (ver la nota de memoria sobre la barra de navegación).
   Ratios de contraste calculados con la fórmula de WCAG 2.x.
   ========================================================================== */

:root {
  --sv-ok: #0E6B3F;            /* = --exito: 6,30:1 sobre papel. Marca «sí / incluido» sobre claro. */
  --sv-ok-dark: #3FB67A;       /* sobre carbón-2: 6,33:1 (1.4.11 pide 3:1). Mismo verde del lienzo de n8n. */
}

/* ---------------------------------------------------------------------------
   0. Íconos
   --------------------------------------------------------------------------- */
.sv-ico {
  width: 1.375rem;
  height: 1.375rem;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sv-ico--sm { width: 1.125rem; height: 1.125rem; }

/* main ul/ol y main ul li (base.css) ponen sangría y color; aquí las listas son componentes. */
.sv-hechos, .sv-ficha__lista, .sv-ruta__lista, .sv-pasos, .sv-chips, .sv-casos, .sv-situaciones,
.sv-lista-check { list-style: none; margin: 0; padding: 0; }
.sv-hechos li, .sv-ficha__lista li, .sv-ruta__lista li, .sv-pasos li, .sv-chips li, .sv-casos li,
.sv-situaciones li, .sv-lista-check li { color: inherit; }

/* Enlaces DENTRO de un texto: se distinguen por el subrayado y el peso, no solo por el color
   (WCAG 1.4.1; Lighthouse lo marca como «link-in-text-block» si faltan). */
.sv-item p a, .sv-razon p a, .sv-nota p a, .sv-lista-check a, .sv-faq .faq__answer a, .sv-intro__texto p a,
.sv-versus a, .sv-tabla a, .sv-plazo p a, .sv-cab p a {
  color: inherit;
  font-weight: var(--fw-semibold);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.sv-item p a:hover, .sv-razon p a:hover, .sv-nota p a:hover, .sv-lista-check a:hover, .sv-faq .faq__answer a:hover,
.sv-intro__texto p a:hover, .sv-versus a:hover, .sv-tabla a:hover, .sv-plazo p a:hover, .sv-cab p a:hover {
  color: var(--brand-cta);
  text-decoration-thickness: 2px;
}
.sv-razon p a:hover { color: var(--brand-lift); }

/* Foco claro sobre las superficies oscuras de esta hoja (el rojo general da 2,6-2,9:1 sobre carbón). */
.sv-hero :focus-visible,
.sv-banda--oscura :focus-visible,
.sv-cierre :focus-visible,
.section--dark :focus-visible { outline-color: var(--brand-lift); }

/* ---------------------------------------------------------------------------
   1. Cabecera
   --------------------------------------------------------------------------- */
.sv-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--carbon);
  color: var(--papel);
  padding-top: calc(var(--nav-h) + 20px);
  padding-bottom: clamp(44px, 6vw, 84px);
}
/* Halo de marca, estático y muy tenue (10 %, el máximo que permite la guía). */
.sv-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse 55% 50% at 12% 30%, rgba(230, 57, 70, .10) 0%, transparent 64%);
}

/* Migas de pan sobre carbón (mismas reglas que .service-hero en base.css, sin heredar su
   alineación centrada ni su margen). Los enlaces miden 44 px de alto para el dedo. */
.sv-hero .breadcrumb {
  background: transparent;
  border-bottom: 1px solid var(--regla-dark);
  padding: 4px 0;
  position: relative;
  z-index: 1;
}
.sv-hero .breadcrumb__list { color: var(--tinta-2-dark); }
.sv-hero .breadcrumb__item a {
  color: var(--tinta-2-dark);
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.sv-hero .breadcrumb__item a:hover { color: var(--brand-lift); }
.sv-hero .breadcrumb__item:last-child { color: var(--papel); }
.sv-hero .breadcrumb__item:not(:last-child)::after { color: var(--borde-campo-dark); }

.sv-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  gap: clamp(32px, 4.5vw, 72px);
  align-items: center;
  padding-top: clamp(28px, 3.4vw, 52px);
}
.sv-hero__texto, .sv-hero__visual { min-width: 0; }
.sv-hero .eyebrow { color: var(--tinta-2-dark); }

.sv-hero__titulo {
  font-size: clamp(2.125rem, 2.7vw + 1rem, 3.25rem);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tk-display);
  color: var(--papel);
  margin: var(--gap-md) 0 var(--gap-lg);
  text-wrap: balance;
}
.sv-hero__bajada {
  font-size: var(--fs-lg);
  line-height: var(--lh-normal);
  color: var(--tinta-2-dark);                         /* 10,20:1 sobre carbón */
  max-width: 46ch;
  margin: 0 0 var(--gap-xl);
}
.sv-hero__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; }

/* Enlace secundario junto al botón: subrayado (WCAG 1.4.1) y 44 px de alto. */
.sv-enlace {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-weight: var(--fw-semibold);
  color: var(--papel);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-color: rgba(251, 250, 248, .45);
}
.sv-enlace:hover { color: var(--brand-lift); text-decoration-color: currentColor; text-decoration-thickness: 2px; }
.sv-enlace--claro { color: var(--tinta); text-decoration-color: rgba(20, 17, 13, .35); }
.sv-enlace--claro:hover { color: var(--brand-cta); }

/* Tres datos bajo los botones. Son datos de la propia página (precio, plazo, qué incluye). */
.sv-hechos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px clamp(16px, 2.2vw, 28px);
  margin-top: var(--gap-xl);
  padding-top: var(--gap-lg);
  border-top: 1px solid var(--regla-dark);
}
.sv-hechos li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: var(--fs-sm);
  line-height: 1.4;
  color: var(--tinta-2-dark);
}
.sv-hechos .sv-ico { margin-top: 1px; }
.sv-hechos .sv-ico { color: var(--brand-lift); }       /* 7,97:1 sobre carbón */
.sv-hechos strong { color: var(--papel); font-weight: var(--fw-semibold); }

/* ---------------------------------------------------------------------------
   2. Objetos de la cabecera: ficha de precios y recorrido
   --------------------------------------------------------------------------- */
.sv-ficha, .sv-ruta {
  background: var(--carbon-2);
  border: 1px solid var(--regla-dark);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.sv-ficha__cab, .sv-ruta__cab {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  max-width: none;                 /* son <p>: sin esto, el 68ch global dejaba la regla más corta que la caja */
  margin: 0;
  padding: 14px 22px;
  border-bottom: 1px solid var(--regla-dark);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinta-2-dark);
}

/* Ficha de planes: filas enlazadas al bloque de precios de la misma página. */
.sv-ficha__fila + .sv-ficha__fila { border-top: 1px solid var(--regla-dark); }
.sv-ficha__enlace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 20px;
  align-items: baseline;
  padding: 20px 22px;
  color: var(--papel);
  transition: background var(--duration-base) var(--ease-out);
}
.sv-ficha__enlace:hover { background: rgba(251, 250, 248, .045); color: var(--papel); }
.sv-ficha__nombre { font-size: var(--fs-xl); font-weight: var(--fw-bold); letter-spacing: var(--tk-title); }
.sv-ficha__precio {
  grid-row: span 2;
  grid-column: 2;
  text-align: right;
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tk-title);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.sv-ficha__enlace:hover .sv-ficha__precio { color: var(--brand-lift); }
.sv-ficha__precio small {
  display: block;
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-regular);
  letter-spacing: .04em;
  color: var(--tinta-2-dark);
}
.sv-ficha__desc { grid-column: 1; margin: 0; font-size: var(--fs-sm); line-height: 1.5; color: var(--tinta-2-dark); max-width: 36ch; }
.sv-ficha__pie {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  padding: 14px 22px;
  border-top: 1px solid var(--regla-dark);
  background: rgba(251, 250, 248, .03);
  font-size: var(--fs-sm);
  color: var(--tinta-2-dark);
  max-width: none;
}
.sv-ficha__pie .sv-ico { color: var(--sv-ok-dark); margin-top: 1px; }

/* Recorrido: una columna de pasos unidos por un cable que se enciende en verde. Sin JS (o con
   «reducir movimiento») se ve completo y quieto; con JS, js/servicios.js lo enciende paso a paso. */
.sv-ruta__lista { padding: 22px; }
.sv-ruta__paso {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 0 16px;
  padding-bottom: 26px;
}
.sv-ruta__paso:last-child { padding-bottom: 0; }
.sv-ruta__paso:not(:last-child)::before,
.sv-ruta__paso:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 21px;
  top: 46px;
  bottom: 2px;
  width: 2px;
}
.sv-ruta__paso:not(:last-child)::before { background: var(--regla-dark); }
.sv-ruta__paso:not(:last-child)::after {
  background: var(--sv-ok-dark);
  transform-origin: top;
  transition: transform .55s var(--ease-out);
}
.sv-ruta__ico {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--sv-ok-dark);
  border-radius: var(--radius-xl);
  color: var(--sv-ok-dark);
  background: var(--carbon);
  transition: border-color .35s var(--ease-out), color .35s var(--ease-out);
}
.sv-ruta__txt { min-width: 0; padding-top: 1px; }
.sv-ruta__txt strong { display: block; font-size: var(--fs-base); line-height: 1.3; color: var(--papel); font-weight: var(--fw-semibold); }
.sv-ruta__txt > span { display: block; margin-top: 3px; font-size: var(--fs-sm); line-height: 1.5; color: var(--tinta-2-dark); }
.sv-ruta__salidas { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; }
.sv-ruta__salidas li {
  padding: 3px 10px;
  border: 1px solid var(--regla-dark);
  border-radius: var(--radius-full);
  font-size: var(--fs-xs);
  color: var(--tinta-2-dark);
}

/* Estado inicial SOLO con JS: apagado. Lo marca el guion en línea de sv_sprite() (antes del primer
   pintado) y js/servicios.js agrega .is-on paso a paso. */
html.sv-ruta-js .sv-ruta__paso:not(.is-on) .sv-ruta__ico { border-color: var(--borde-campo-dark); color: var(--tinta-2-dark); }
html.sv-ruta-js .sv-ruta__paso:not(.is-on):not(:last-child)::after { transform: scaleY(0); }

/* ---------------------------------------------------------------------------
   3. Cabecera de sección (editorial, a la izquierda)
   --------------------------------------------------------------------------- */
.sv-cab {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: var(--gap-md) clamp(32px, 5vw, 80px);
  align-items: end;
  margin-bottom: clamp(28px, 4vw, 52px);
}
.sv-cab--solo { grid-template-columns: minmax(0, 1fr); }
.sv-cab h2 { font-size: var(--fs-4xl); max-width: 24ch; margin: 0; }
.sv-cab p { font-size: var(--fs-lg); line-height: var(--lh-normal); color: var(--tinta-2); margin: 0; max-width: 50ch; }
.section--dark .sv-cab p, .sv-banda--oscura .sv-cab p { color: var(--tinta-2-dark); }

/* ---------------------------------------------------------------------------
   4. Rejilla de fichas: ícono EN LÍNEA con el título (no arriba, no redondo)
   --------------------------------------------------------------------------- */
.sv-rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  border-top: 1px solid var(--regla);
  border-left: 1px solid var(--regla);
}
.sv-rejilla--1 { grid-template-columns: minmax(0, 1fr); }
.sv-rejilla--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sv-item {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 0 16px;
  align-content: start;
  padding: clamp(20px, 2.2vw, 28px);
  border-right: 1px solid var(--regla);
  border-bottom: 1px solid var(--regla);
  transition: background var(--duration-base) var(--ease-out);
}
.sv-item__ico {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-lg);
  background: var(--brand-wash);
  color: var(--brand-cta);                              /* 5,97:1 sobre brand-wash */
  transition: background var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out);
}
.sv-item h3 { font-size: var(--fs-lg); letter-spacing: var(--tk-title); margin: 2px 0 6px; }
.sv-item p { font-size: var(--fs-sm); line-height: 1.58; color: var(--tinta-2); margin: 0; max-width: 46ch; }
.sv-item .sv-tag { margin-top: 10px; justify-self: start; grid-column: 2; }
@media (hover: hover) {
  .sv-item:hover { background: var(--papel-2); }
  .section--gray .sv-item:hover { background: var(--papel); }
  .sv-item:hover .sv-item__ico { background: var(--brand-cta); color: #fff; }
}
/* Ficha entera como enlace (hub, relacionados). El enlace cubre toda la ficha. */
a.sv-item { color: inherit; text-decoration: none; }
.sv-item__mas {
  grid-column: 2;
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--brand-cta);                              /* 5,97:1 sobre papel */
}
.sv-item__mas .sv-ico { width: 1rem; height: 1rem; transition: transform var(--duration-base) var(--ease-out); }
a.sv-item:hover .sv-item__mas .sv-ico { transform: translateX(4px); }
a.sv-item:hover h3 { color: var(--brand-cta); }

/* Variante sobre carbón */
.sv-banda--oscura .sv-rejilla { border-color: var(--regla-dark); }
.sv-banda--oscura .sv-item { border-color: var(--regla-dark); }
.sv-banda--oscura .sv-item h3 { color: var(--papel); }
.sv-banda--oscura .sv-item p { color: var(--tinta-2-dark); }
.sv-banda--oscura .sv-item__ico { background: rgba(255, 138, 147, .12); color: var(--brand-lift); }
@media (hover: hover) {
  .sv-banda--oscura .sv-item:hover { background: var(--carbon-2); }
  .sv-banda--oscura .sv-item:hover .sv-item__ico { background: var(--brand-lift); color: var(--carbon); }
}

/* Ficha que ocupa dos columnas (para que una fila de cinco no deje un hueco). */
.sv-item--ancho { grid-column: span 2; }
.sv-item--ancho p { max-width: 60ch; }
/* Chips dentro de una ficha: lista de lo que cubre (en vez de un párrafo de once palabras sueltas). */
.sv-item .sv-chips { margin-top: 14px; gap: 6px; }
.sv-item .sv-chips li { padding: 4px 10px; font-size: var(--fs-sm); }

/* Más variantes sobre carbón: enlace «ver el servicio» (el rojo de marca da 2,9:1; --brand-lift, 7,97:1),
   título de la ficha enlazada al pasar el cursor, chips, etiquetas y enlaces dentro de un párrafo. */
.sv-banda--oscura .sv-item__mas { color: var(--brand-lift); }
.sv-banda--oscura a.sv-item:hover h3 { color: var(--brand-lift); }
.sv-banda--oscura .sv-chips li { background: transparent; border-color: var(--regla-dark); color: var(--tinta-2-dark); }
.sv-banda--oscura .sv-tag { background: transparent; border-color: var(--regla-dark); color: var(--tinta-2-dark); }
.sv-banda--oscura .sv-item p a { color: var(--papel); }
.sv-banda--oscura .sv-item p a:hover { color: var(--brand-lift); }

/* Etiqueta mono pequeña (qué plan trae algo, de qué trata). */
.sv-tag {
  display: inline-block;
  padding: 2px 9px;
  border: 1px solid var(--regla);
  border-radius: var(--radius-full);
  background: var(--papel-2);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tinta-3);                                /* 5,03:1 sobre papel-2 */
}
.section--gray .sv-tag { background: var(--papel); }

/* ---------------------------------------------------------------------------
   5. Bandas de color (rompen el ritmo claro/claro/claro)
   --------------------------------------------------------------------------- */
.sv-banda--oscura { background: var(--carbon); color: var(--papel); }
.sv-banda--oscura h2, .sv-banda--oscura h3 { color: var(--papel); }
.sv-banda--oscura p { color: var(--tinta-2-dark); }

/* Dos columnas: título que se queda fijo + contenido largo. */
.sv-dos {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(28px, 5vw, 80px);
  align-items: start;
}
.sv-dos__lado { position: sticky; top: calc(var(--nav-h) + 28px); min-width: 0; }
.sv-dos__lado h2 { font-size: var(--fs-4xl); margin: 0 0 var(--gap-md); }
.sv-dos__lado > p { font-size: var(--fs-lg); line-height: var(--lh-normal); margin: 0 0 var(--gap-lg); }
.sv-dos__cuerpo { min-width: 0; }

/* Razones: filas con ícono, para la banda oscura. */
.sv-razones { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--regla-dark); }
.sv-razon {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 0 18px;
  padding: 22px 0;
  border-bottom: 1px solid var(--regla-dark);
}
.sv-razon .sv-item__ico { background: rgba(255, 138, 147, .12); color: var(--brand-lift); }
.sv-razon h3 { font-size: var(--fs-lg); letter-spacing: var(--tk-title); margin: 2px 0 4px; color: var(--papel); }
.sv-razon p { margin: 0; font-size: var(--fs-base); line-height: 1.55; color: var(--tinta-2-dark); max-width: 54ch; }
@media (hover: hover) {
  .sv-razon:hover .sv-item__ico { background: var(--brand-lift); color: var(--carbon); }
}

/* Cifras: números reales de la página (precio, plazo, cantidad de planes). Nunca inventados. */
.sv-cifras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: clamp(28px, 4vw, 52px) 0 0; border-top: 1px solid var(--regla-dark); }
.sv-cifra { padding: 26px 24px 4px 0; margin: 0; }
.sv-cifra + .sv-cifra { padding-left: clamp(16px, 2.6vw, 36px); border-left: 1px solid var(--regla-dark); }
.sv-cifra dt {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinta-2-dark);
  margin-bottom: 10px;
}
.sv-cifra dd {
  margin: 0;
  font-size: clamp(2rem, 3.2vw + 1rem, 3.5rem);
  font-weight: var(--fw-black);
  line-height: 1;
  letter-spacing: var(--tk-display);
  color: var(--papel);
  font-variant-numeric: tabular-nums;
}
.sv-cifra dd small { display: block; margin-top: 10px; font-size: var(--fs-sm); font-weight: var(--fw-regular); letter-spacing: 0; line-height: 1.45; color: var(--tinta-2-dark); }

/* ---------------------------------------------------------------------------
   6. Línea de tiempo (solo para secuencias reales: pasos del proceso)
   --------------------------------------------------------------------------- */
.sv-pasos { position: relative; }
.sv-paso {
  position: relative;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 0 20px;
  padding-bottom: clamp(26px, 3vw, 38px);
}
.sv-paso:last-child { padding-bottom: 0; }
.sv-paso__n {
  position: relative;
  z-index: 1;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--brand-cta);
  border-radius: 50%;
  background: var(--brand-cta);
  color: #fff;                                          /* blanco sobre #C1121F: 6,22:1 */
  font-family: var(--font-mono);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
  transition: background .35s var(--ease-out), color .35s var(--ease-out), border-color .35s var(--ease-out);
}
/* Cada paso dibuja su tramo de riel hasta el nodo siguiente: gris de base y rojo encima. El rojo
   avanza con --seg (0 a 1) que js/servicios.js calcula según el scroll; sin JS vale 1 (completo).
   Así el riel termina justo en el último nodo, sin cola colgando. */
.sv-paso:not(:last-child)::before,
.sv-paso:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 27px;
  top: 56px;
  bottom: 0;
  width: 2px;
}
.sv-paso:not(:last-child)::before { background: var(--regla); }
.sv-paso:not(:last-child)::after { background: var(--brand-cta); transform-origin: top; transform: scaleY(var(--seg, 1)); }
.sv-paso h3 { font-size: var(--fs-xl); letter-spacing: var(--tk-title); margin: 12px 0 6px; }
.sv-paso p { margin: 0; color: var(--tinta-2); max-width: 54ch; }
html.sv-js .sv-paso:not(.is-hecho) .sv-paso__n { background: var(--papel); border-color: var(--regla); color: var(--tinta-3); }
.sv-pasos__cta { margin-top: clamp(24px, 3vw, 36px); }
/* Variante sobre carbón: nodo hecho en --brand-lift con texto carbón (7,97:1), riel en regla oscura. */
.sv-banda--oscura .sv-paso__n { background: var(--brand-lift); border-color: var(--brand-lift); color: var(--carbon); }
.sv-banda--oscura .sv-paso p { color: var(--tinta-2-dark); }
.sv-banda--oscura .sv-paso:not(:last-child)::before { background: var(--regla-dark); }
.sv-banda--oscura .sv-paso:not(:last-child)::after { background: var(--brand-lift); }
html.sv-js .sv-banda--oscura .sv-paso:not(.is-hecho) .sv-paso__n { background: transparent; border-color: var(--borde-campo-dark); color: var(--tinta-2-dark); }

/* ---------------------------------------------------------------------------
   7. Tabla comparativa (la columna propia lleva el lavado de marca; el «sí» va en verde)
   --------------------------------------------------------------------------- */
.sv-tabla-wrap { border: 1px solid var(--regla); border-radius: var(--radius-lg); background: var(--papel); overflow: hidden; }
.sv-tabla { width: 100%; border-collapse: collapse; font-size: var(--fs-base); }
.sv-tabla th, .sv-tabla td { padding: 16px 20px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--regla); line-height: 1.5; }
.sv-tabla thead th { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--tinta); background: var(--papel-2); border-bottom: 2px solid var(--tinta); }
.sv-tabla tbody th { width: 27%; font-weight: var(--fw-semibold); color: var(--tinta); }
.sv-tabla td { color: var(--tinta-2); }
.sv-tabla tbody tr:last-child th, .sv-tabla tbody tr:last-child td { border-bottom: 0; }
.sv-tabla .sv-col-nuestra { background: var(--brand-wash); color: var(--tinta); }
.sv-tabla thead .sv-col-nuestra { background: var(--brand-wash); border-bottom-color: var(--brand-cta); }
.sv-celda { display: flex; align-items: flex-start; gap: 10px; }
.sv-celda .sv-ico { width: 1.125rem; height: 1.125rem; margin-top: 3px; }
.sv-celda > .sv-si, .sv-celda > .sv-no { flex: none; }
.sv-si { color: var(--sv-ok); }                        /* 5,5:1 sobre brand-wash */
.sv-no { color: var(--tinta-3); }
.sv-tabla-nota { margin: 12px 0 0; font-size: var(--fs-sm); color: var(--tinta-3); max-width: none; }

/* ---------------------------------------------------------------------------
   8. Chips, casos de uso, situaciones, listas de verificación
   --------------------------------------------------------------------------- */
.sv-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sv-chips li {
  padding: 6px 13px;
  border: 1px solid var(--regla);
  border-radius: var(--radius-full);
  background: var(--papel);
  font-size: var(--fs-sm);
  line-height: 1.35;
  color: var(--tinta-2);
}
.section--gray .sv-chips li { background: var(--papel); }

/* Casos de uso («ideal para»): fichas con ícono en línea, de largo libre. */
.sv-casos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 12px; }
.sv-caso {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--regla);
  border-radius: var(--radius-lg);
  background: var(--papel);
  transition: border-color var(--duration-base) var(--ease-out);
}
.sv-caso .sv-ico { color: var(--brand-cta); margin-top: 2px; width: 1.5rem; height: 1.5rem; }
.sv-caso strong { display: block; font-size: var(--fs-base); line-height: 1.3; color: var(--tinta); font-weight: var(--fw-semibold); }
.sv-caso span { display: block; margin-top: 4px; font-size: var(--fs-sm); line-height: 1.5; color: var(--tinta-2); }
@media (hover: hover) { .sv-caso:hover { border-color: var(--tinta-3); } }
/* Ficha de contacto que completa la fila (cinco usos + esta = dos filas de tres). */
.sv-caso--cta { background: var(--carbon); border-color: var(--carbon); }
.sv-caso--cta strong { color: var(--papel); }
.sv-caso--cta span { color: var(--tinta-2-dark); }
.sv-caso--cta .sv-enlace { margin-top: 6px; }
@media (hover: hover) { .sv-caso--cta:hover { border-color: var(--carbon); } }

/* Lista de verificación (qué se logra): marca verde dentro de una ficha, texto de largo libre. */
.sv-lista-check { display: grid; gap: 0; border-top: 1px solid var(--regla); }
.sv-lista-check li {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 0 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--regla);
  color: var(--tinta-2);
  line-height: 1.5;
}
.sv-lista-check .sv-ico { width: 1.25rem; height: 1.25rem; margin-top: 2px; color: var(--sv-ok); }
.sv-lista-check strong { color: var(--tinta); font-weight: var(--fw-semibold); }

/* Situaciones del hub: cada fila es un enlace entero («tu caso» → servicio). */
.sv-situaciones { border-top: 1px solid var(--regla); }
.sv-situaciones li { border-bottom: 1px solid var(--regla); }
.sv-situacion {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 24px;
  gap: 8px 24px;
  align-items: center;
  min-height: 64px;
  padding: 16px 8px 16px 0;
  color: var(--tinta);
  text-decoration: none;
  transition: background var(--duration-base) var(--ease-out), padding var(--duration-base) var(--ease-out);
}
.sv-situacion__caso { font-size: var(--fs-lg); line-height: 1.35; letter-spacing: var(--tk-title); }
.sv-situacion__srv { display: inline-flex; align-items: center; gap: 10px; font-weight: var(--fw-semibold); color: var(--brand-cta); }
.sv-situacion .sv-ico:last-child { color: var(--tinta-3); transition: transform var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out); }
@media (hover: hover) {
  .sv-situacion:hover { background: var(--papel-2); padding-left: 14px; }
  .sv-situacion:hover .sv-ico:last-child { transform: translateX(4px); color: var(--brand-cta); }
}

/* Utilidad: separación superior de un bloque que sigue a otro. */
.sv-mt { margin-top: clamp(28px, 4vw, 48px); }

/* Chips de lo que NO se hace: borde discontinuo y la x en gris (no es una promesa ni un enlace). */
.sv-chips--no li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-style: dashed; color: var(--tinta-2); }
.sv-chips--no .sv-ico { color: var(--tinta-3); }

/* Nota lateral: una aclaración que el lector necesita antes de seguir. */
.sv-nota {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 20px;
  border-left: 3px solid var(--brand-cta);
  background: var(--papel-2);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}
.section--gray .sv-nota { background: var(--papel); }
.sv-nota .sv-ico { color: var(--brand-cta); margin-top: 2px; }
.sv-nota p { margin: 0; font-size: var(--fs-base); line-height: 1.55; color: var(--tinta-2); max-width: 62ch; }
.sv-nota strong { color: var(--tinta); }

/* ---------------------------------------------------------------------------
   9. Intro de dos columnas (qué es) y comparación de dos caras
   --------------------------------------------------------------------------- */
.sv-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.sv-intro__texto { min-width: 0; }
.sv-intro__texto p { font-size: var(--fs-lg); line-height: var(--lh-normal); margin: 0 0 var(--gap-md); max-width: 54ch; }
.sv-intro__texto p:last-child { margin-bottom: 0; }
.sv-intro__texto strong { color: var(--tinta); }
.sv-intro__texto a:not([class]) { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; font-weight: var(--fw-semibold); color: var(--tinta); }
.sv-intro__texto a:not([class]):hover { color: var(--brand-cta); text-decoration-thickness: 2px; }

.sv-versus { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border: 1px solid var(--regla); border-radius: var(--radius-lg); overflow: hidden; background: var(--papel); }
.sv-versus__col { padding: clamp(22px, 2.8vw, 34px); min-width: 0; }
.sv-versus__col + .sv-versus__col { border-left: 1px solid var(--regla); background: var(--brand-wash); }
.sv-versus h3 { font-size: var(--fs-xl); letter-spacing: var(--tk-title); margin: 0 0 14px; }
.sv-versus ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.sv-versus li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 0 10px; color: var(--tinta-2); line-height: 1.5; }
.sv-versus li .sv-ico { width: 1.125rem; height: 1.125rem; margin-top: 3px; }

/* ---------------------------------------------------------------------------
   10. Plazos (SEO): tres tramos sobre una regla
   --------------------------------------------------------------------------- */
.sv-plazos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 0; padding: 0; list-style: none; position: relative; }
.sv-plazos::before { content: ''; position: absolute; left: 0; right: 0; top: 11px; height: 2px; background: var(--regla); }
.sv-plazo { position: relative; padding: 36px 24px 0 0; }
.sv-plazo::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--papel);
  border: 3px solid var(--brand-cta);
}
.sv-plazo__cuando { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-3); margin: 0 0 6px; }
.sv-plazo h3 { font-size: var(--fs-xl); letter-spacing: var(--tk-title); margin: 0 0 6px; }
.sv-plazo p { margin: 0; font-size: var(--fs-sm); line-height: 1.55; max-width: 34ch; }

/* ---------------------------------------------------------------------------
   11. Preguntas frecuentes (dos columnas; el lado queda fijo)
   --------------------------------------------------------------------------- */
.sv-faq { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.sv-faq__lado { position: sticky; top: calc(var(--nav-h) + 28px); }
.sv-faq__lado h2 { font-size: var(--fs-4xl); margin: 0 0 var(--gap-md); }
.sv-faq__lado p { font-size: var(--fs-lg); color: var(--tinta-2); margin: 0 0 var(--gap-lg); }
.sv-faq .faq__list { min-width: 0; }
.sv-faq .faq__question { font-size: var(--fs-lg); }
.sv-faq .faq__item--active .faq__question { color: var(--brand-cta); }
.sv-faq .faq__icon { width: 28px; height: 28px; padding: 4px; border: 1px solid var(--regla); border-radius: 50%; }
.sv-faq .faq__item--active .faq__icon { border-color: var(--brand-cta); background: var(--brand-wash); }

/* ---------------------------------------------------------------------------
   12. Relacionados y cierre
   --------------------------------------------------------------------------- */
.sv-cierre { background: var(--carbon); color: var(--papel); padding: clamp(52px, 6.5vw, 96px) 0; position: relative; isolation: isolate; overflow: hidden; }
.sv-cierre::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse 50% 70% at 90% 100%, rgba(230, 57, 70, .10) 0%, transparent 62%);
}
.sv-cierre__in { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 28px clamp(32px, 5vw, 80px); align-items: center; }
.sv-cierre h2 { font-size: var(--fs-4xl); color: var(--papel); max-width: 22ch; margin: 0 0 var(--gap-md); }
.sv-cierre p { color: var(--tinta-2-dark); max-width: 54ch; margin: 0; font-size: var(--fs-lg); }
.sv-cierre__acc { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; }

/* ---------------------------------------------------------------------------
   13. Entrada de cada bloque (solo con JS y sin «reducir movimiento»)
   Visible por defecto: si el script no corre, no se esconde nada. Solo transform y opacity.
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  html.sv-js .sv-reveal > * {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
    transition-delay: calc(var(--i, 0) * 70ms);
  }
  html.sv-js .sv-reveal.is-in > * { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------------------
   14. Responsive
   --------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .sv-hero__grid { grid-template-columns: minmax(0, 1fr); }
  .sv-hero__visual { max-width: 640px; }
  .sv-cab, .sv-intro, .sv-cierre__in { grid-template-columns: minmax(0, 1fr); }
  .sv-cab h2 { max-width: none; }
  .sv-dos, .sv-faq { grid-template-columns: minmax(0, 1fr); }
  .sv-dos__lado, .sv-faq__lado { position: static; }
  .sv-cierre__acc { justify-content: flex-start; }
  .sv-rejilla--2 { grid-template-columns: minmax(0, 1fr); }
  .sv-item--ancho { grid-column: auto; }
}

@media (max-width: 767px) {
  .sv-hero__acciones { align-items: stretch; flex-direction: column; gap: 4px; }
  .sv-hero__acciones .btn { width: 100%; }
  .sv-enlace { justify-content: center; }
  .sv-hechos { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .sv-cifras { grid-template-columns: minmax(0, 1fr); }
  .sv-cifra + .sv-cifra { padding-left: 0; border-left: 0; border-top: 1px solid var(--regla-dark); margin-top: 22px; }
  .sv-versus { grid-template-columns: minmax(0, 1fr); }
  .sv-versus__col + .sv-versus__col { border-left: 0; border-top: 1px solid var(--regla); }
  .sv-plazos { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .sv-plazos::before { left: 7px; right: auto; top: 8px; bottom: 8px; width: 2px; height: auto; }
  .sv-plazo { padding: 0 0 26px 40px; }
  .sv-plazo:last-child { padding-bottom: 0; }
  .sv-plazo::before { left: 0; top: 2px; }
  .sv-situacion { grid-template-columns: minmax(0, 1fr) 24px; }
  .sv-situacion__srv { grid-column: 1; }
  .sv-situacion .sv-ico:last-child { grid-row: 1 / span 2; grid-column: 2; }
  .sv-cierre__acc .btn { width: 100%; }
  /* tabla comparativa de tres columnas: cabe entera, con menos aire */
  .sv-tabla th, .sv-tabla td { padding: 12px 10px; font-size: var(--fs-sm); }
  .sv-tabla tbody th { width: 30%; }
  .sv-celda { flex-direction: column; gap: 4px; }
  .sv-celda .sv-ico { margin-top: 0; }
}

@media (max-width: 420px) {
  .sv-ficha__enlace { padding: 16px 16px; }
  .sv-ficha__cab, .sv-ruta__cab, .sv-ficha__pie { padding-left: 16px; padding-right: 16px; }
  .sv-ruta__lista { padding: 18px 16px; }
  .sv-ficha__precio { font-size: var(--fs-xl); }
}

/* Con «reducir movimiento» no se enciende nada: el recorrido y la línea de tiempo se ven completos. */
@media (prefers-reduced-motion: reduce) {
  .sv-ruta__paso::after, .sv-ruta__ico, .sv-paso__n, .sv-reveal > * { transition: none !important; }
}