/* =====================================================================
   TIPOGRAFÍAS SERVIDAS DESDE NUESTRO PROPIO DOMINIO
   Antes se pedían a fonts.googleapis.com, lo que enviaba la IP de cada
   visitante a Google y obligaba a declararlo en la política de cookies.
   Alojadas aquí no sale nada del servidor, no hay conexión que bloquee
   el primer pintado y no hay nada que consentir.
   Fraunces e Inter, ambas con licencia SIL Open Font 1.1, que permite
   expresamente alojarlas. Son variables: un archivo cubre todos los pesos.
   ===================================================================== */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../assets/fuentes/fraunces-latin.woff2') format('woff2');
  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: 'Fraunces';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../assets/fuentes/fraunces-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('../assets/fuentes/inter-latin.woff2') format('woff2');
  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: 'Inter';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('../assets/fuentes/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ============================================================
   EXEMM — hoja de estilos del sitio
   Paleta y tipografías según guía de marca.
   ============================================================ */

:root {
  --grafito: #1A1A1A;
  --hueso: #F4F1EC;
  --bronce: #8A7E6B;
  --marfil: #FFFDF9;
  --arena: #D8D2C8;
  --gris-calido: #6B6459;

  --serif: "Fraunces", Georgia, serif;
  --sans: "Inter", -apple-system, sans-serif;

  --ancho: 1180px;
  --pad-lateral: clamp(20px, 5vw, 64px);
  --espacio-seccion: clamp(96px, 14vh, 180px);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.75;
  color: var(--grafito);
  background: var(--hueso);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: var(--grafito); color: var(--hueso); }

/* Grano de papel: da cuerpo a las grandes superficies planas.
   Debe notarse solo cuando se quita. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

.contenedor {
  max-width: var(--ancho);
  margin: 0 auto;
  padding-left: var(--pad-lateral);
  padding-right: var(--pad-lateral);
}

/* ---------- Marca tipográfica ---------- */
.logo-exe { font-family: var(--serif); font-weight: 300; letter-spacing: 0.01em; line-height: 1; }
.logo-exe .mm { font-family: var(--sans); font-weight: 900; letter-spacing: -0.058em; margin-right: 0.058em; }
/* Reforzada: obligatoria por debajo de 60 px */
.logo-exe.reforzada { font-weight: 700; }

/* ---------- Etiqueta (eyebrow) ---------- */
.eyebrow {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--acento);
}

.filete {
  width: 46px;
  height: 2px;
  background: var(--bronce);
  border: 0;
  margin: 26px 0;
  transform-origin: left center;
}

/* ---------- Titulares ---------- */
h1, h2, h3.serif {
  font-family: var(--serif);
  font-weight: 300;
  line-height: 1.12;
}
/* Fraunces usa cifras antiguas por defecto; en datos queremos numerales alineados */
.cifra-valor, .caso-dato {
  font-variant-numeric: lining-nums;
}

h1 { font-size: clamp(40px, 5.7vw, 74px); letter-spacing: -0.005em; }
h2 { font-size: clamp(32px, 4.2vw, 54px); }

.subtitulo {
  font-size: clamp(16px, 1.5vw, 18px);
  line-height: 1.8;
  color: var(--gris-calido);
  max-width: 620px;
}

/* ---------- Navegación ---------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  transition: background .4s ease, border-color .4s ease;
  border-bottom: 1px solid transparent;
}
.nav.solida {
  background: color-mix(in srgb, var(--hueso) 92%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom-color: var(--arena);
}
.nav-inner {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 22px var(--pad-lateral);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav-logo { font-size: 24px; text-decoration: none; }
.nav-links { display: flex; gap: 38px; align-items: center; list-style: none; }
.nav-links a {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-decoration: none;
  color: var(--grafito);
  position: relative;
  padding: 4px 0;
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--bronce);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform .35s cubic-bezier(.6,0,.2,1);
}
.nav-links a:hover::after,
.nav-links a[aria-current="page"]::after {
  transform: scaleX(1);
  transform-origin: left center;
}
/* CTA del header: contorno fino con punto bronce, se rellena al pasar el ratón */
.nav-cta {
  /* Relleno en vez de contorno: el botón dejaba de leerse como botón y
     parecía la casilla de un formulario. Ahora es la pieza con más peso
     de la barra, que es lo que tiene que ser. */
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-decoration: none;
  background: var(--grafito);
  color: var(--hueso) !important;
  border: 1px solid var(--grafito);
  border-radius: 999px;
  transition: background .35s ease, color .35s ease,
              border-color .35s ease, transform .35s cubic-bezier(.2,.65,.2,1);
}
.nav-cta::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--terracota-claro);
  flex: none;
  transition: transform .35s cubic-bezier(.2,.65,.2,1), box-shadow .35s ease;
}
/* El relleno va con este selector y no con .nav-cta a secas: «.nav-links a»
   tiene más especificidad y le estaba imponiendo su «padding: 4px 0», que
   dejaba el texto pegado a los bordes de la píldora. */
.nav-links a.nav-cta { padding: 11px 24px 11px 19px; }
.nav-cta { position: relative; overflow: hidden; }
/* Un trazo bronce recorre el borde inferior al pasar el ratón. Una vez, sin bucle. */
.nav-cta::after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: -45%;
  width: 45%;
  height: 1px;
  background: var(--bronce);
  opacity: 0;
}
.nav-cta::after { display: none; }
@keyframes trazoBorde {
  0% { left: -45%; opacity: 0; }
  22% { opacity: 1; }
  78% { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}
.nav-cta:hover {
  background: var(--terracota);
  color: var(--sobre-acento) !important;
  border-color: var(--terracota);
  transform: translateY(-1px);
}
.nav-cta:hover::before {
  transform: scale(1.4);
  background: var(--sobre-acento);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--sobre-acento) 18%, transparent);
}

/* Menú móvil */
.nav-burger {
  display: none;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 8px;
}
.nav-burger span {
  display: block;
  width: 24px; height: 1.5px;
  background: var(--grafito);
  margin: 6px 0;
  transition: transform .3s ease, opacity .3s ease;
}
.nav.abierta .nav-burger span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav.abierta .nav-burger span:nth-child(2) { opacity: 0; }
.nav.abierta .nav-burger span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* El menú conmuta en 980, igual que la escena de los casos: entre 861 y 980
   los cinco enlaces no caben y la barra se partía en dos líneas. */
@media (max-width: 980px) {
  .nav-burger { display: block; }
  .nav-links {
    position: fixed;
    top: 0; left: 0;
    width: 100vw;
    height: 100vh;
    background: var(--hueso);
    flex-direction: column;
    justify-content: center;
    gap: 30px;
    transform: translateY(-100%);
    visibility: hidden;
    transition: transform .5s cubic-bezier(.7,0,.2,1), visibility 0s .5s;
    z-index: -1;
  }
  .nav.abierta .nav-links {
    transform: translateY(0);
    visibility: visible;
    transition: transform .5s cubic-bezier(.7,0,.2,1), visibility 0s 0s;
  }
  /* El backdrop-filter crea un bloque contenedor que rompería el overlay fijo */
  .nav.abierta,
  .nav.abierta.solida {
    background: var(--hueso);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .nav-links a { font-size: 20px; }
}

/* ---------- Botones ---------- */
.btn {
  display: inline-block;
  position: relative;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-decoration: none;
  padding: 16px 36px;
  cursor: pointer;
  transition: background .35s ease, color .35s ease, border-color .35s ease,
              transform .35s cubic-bezier(.2,.65,.2,1);
}
/* Filete bronce que se desliza bajo el botón al pasar el ratón */
.btn::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -5px;
  width: 100%;
  height: 2px;
  background: var(--bronce);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .45s cubic-bezier(.2,.65,.2,1);
}
[data-iman] { transform: translate3d(var(--imx, 0px), var(--imy, 0px), 0); }
.btn:hover { transform: translateY(-2px); }
.btn[data-iman]:hover {
  transform: translate3d(var(--imx, 0px), calc(var(--imy, 0px) - 2px), 0);
}
.btn:hover::after { transform: scaleX(1); }
.btn:active, .btn[data-iman]:active { transform: translateY(0); }
.btn-primario { background: var(--grafito); color: var(--hueso); border: 1px solid var(--grafito); }
.btn-primario:hover { background: #000; }
.btn-secundario { background: transparent; color: var(--grafito); border: 1px solid var(--grafito); }
.btn-secundario:hover { background: var(--grafito); color: var(--hueso); }
/* Variantes sobre fondo oscuro */
.btn-claro { background: var(--hueso); color: var(--grafito); border: 1px solid var(--hueso); }
.btn-claro:hover { background: #fff; }
.btn-borde-claro { background: transparent; color: var(--hueso); border: 1px solid rgba(244,241,236,.45); }
.btn-borde-claro:hover { border-color: var(--hueso); }
@media (prefers-reduced-motion: reduce) {
  .btn:hover { transform: none; }
}

/* ---------- Secciones ---------- */
.seccion { padding: var(--espacio-seccion) 0; }
.seccion-oscura { background: var(--grafito); color: var(--hueso); }
.seccion-oscura .subtitulo { color: rgba(244,241,236,.65); }

/* ---------- Hero ---------- */
.hero {
  min-height: 100svh;
  display: flex;
  align-items: center;
  /* Bajado de 120px: la barra mide 72 y el resto era hueco muerto que
     empujaba el titular media pantalla hacia abajo. */
  padding-top: 92px;
  padding-bottom: 80px;
  position: relative;
}
.hero-rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1.14fr) minmax(0, 0.86fr);
  align-items: center;
  gap: clamp(36px, 4.5vw, 76px);
  width: 100%;
}
.hero-linea-v {
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 1px;
  background: linear-gradient(to bottom, transparent, var(--arena) 30%, var(--arena) 70%, transparent);
  opacity: .6;
  pointer-events: none;
}
.hero h1 { max-width: 21ch; }
/* El titular ya no ocupa todo el ancho de la página: comparte con el panel,
   así que baja de cuerpo para seguir cabiendo en tres líneas. */
.hero-rejilla h1 { max-width: 19ch; }
.hero-acciones { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 44px; }
.hero-contenido { position: relative; z-index: 2; }

/* Orbe de marca: isotipo MM completo con anillos orbitales y respiración */
.hero-orbe {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  will-change: transform;
}
@media (min-width: 901px) {
  .hero h1 { font-size: clamp(34px, 3.8vw, 50px); }
}
.orbe-interior {
  position: absolute;
  inset: 0;
  animation: orbeFlota 11s ease-in-out infinite;
}
@keyframes orbeFlota {
  0%, 100% { transform: translateY(-6px); }
  50% { transform: translateY(6px); }
}
/* Red del sistema: nodos conectados al núcleo MM, con activaciones bronce cíclicas */
.red-mm {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.red-linea {
  fill: none;
  stroke: var(--arena);
  stroke-width: 1;
  opacity: .7;
}
.red-activa {
  fill: none;
  stroke: var(--bronce);
  stroke-width: 1.2;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  opacity: 0;
  animation: redFluye 15s linear infinite;
}
@keyframes redFluye {
  0% { stroke-dashoffset: 100; opacity: 0; }
  3% { opacity: .9; }
  14% { stroke-dashoffset: 0; opacity: .9; }
  22% { stroke-dashoffset: 0; opacity: 0; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}
.red-nodo {
  fill: var(--marfil);
  stroke: var(--gris-calido);
  stroke-width: 1;
  animation: redNodoPulso 15s ease infinite;
}
@keyframes redNodoPulso {
  0%, 2% { stroke: #6B6459; fill: #FFFDF9; }
  6%, 18% { stroke: #8A7E6B; fill: #8A7E6B; }
  26%, 100% { stroke: #6B6459; fill: #FFFDF9; }
}
/* Puertos: los puntos donde la red se enchufa al núcleo */
.red-puerto { fill: var(--bronce); opacity: .55; }
.orbe-mm {
  position: absolute;
  inset: 24%;
  width: 52%;
  height: 52%;
  color: var(--grafito);
  animation: mmRespira 9s ease-in-out infinite;
}
@keyframes mmRespira {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.015); }
}
/* Conector: la presencia del sistema continúa hacia la escena */

/* Revelado del hero por líneas */
.linea-mascara { display: block; overflow: hidden; }
.linea-mascara > span {
  display: block;
  transform: translateY(110%);
  animation: subirLinea 1.1s cubic-bezier(.2,.65,.2,1) forwards;
}
.linea-mascara:nth-child(2) > span { animation-delay: .12s; }
.linea-mascara:nth-child(3) > span { animation-delay: .24s; }
@keyframes subirLinea { to { transform: translateY(0); } }

.aparece-suave { opacity: 0; animation: aparecer 1s ease .5s forwards; }
@keyframes aparecer { to { opacity: 1; } }

.hero .filete { transform: scaleX(0); animation: crecerFilete 1s cubic-bezier(.2,.65,.2,1) .45s forwards; }
@keyframes crecerFilete { to { transform: scaleX(1); } }

/* Indicador de scroll */
/* Palabra y línea comparten un mismo eje vertical: leído de arriba
   abajo, el gesto completo indica bajar, no deslizar de lado. */
.scroll-hint {
  position: absolute;
  bottom: 36px;
  left: var(--pad-lateral);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 13px;
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--gris-calido);
}
.scroll-hint span {
  writing-mode: vertical-rl;
  letter-spacing: 0.22em;
  line-height: 1;
}
/* Vertical y descendente: la horizontal sugería deslizar de lado */
.scroll-hint::after {
  content: "";
  width: 1px; height: 42px;
  background: linear-gradient(to bottom, var(--bronce), rgba(138,126,107,.12));
  animation: bajaLinea 2.4s ease-in-out infinite;
  transform-origin: top center;
}
@keyframes bajaLinea {
  0%, 100% { transform: scaleY(.32); opacity: .45; }
  50% { transform: scaleY(1); opacity: 1; }
}

/* ---------- Revelado al hacer scroll ---------- */
.revela {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity .9s cubic-bezier(.2,.65,.2,1), transform .9s cubic-bezier(.2,.65,.2,1);
}
.revela.visible { opacity: 1; transform: translateY(0); }
.revela[data-retardo="1"] { transition-delay: .1s; }
.revela[data-retardo="2"] { transition-delay: .2s; }
.revela[data-retardo="3"] { transition-delay: .3s; }

/* ============================================================
   ESCENA DE SCROLL — caos → conexión → orden → sistema
   ============================================================ */
.escena { position: relative; height: 520vh; }
.escena-fijada {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}
.escena-lienzo { position: absolute; inset: 0; }

.escena-titular {
  position: absolute;
  left: 50%;
  top: 10%;
  transform: translateX(-50%);
  text-align: center;
  width: min(90%, 780px);
  opacity: 0;
  z-index: 5;
  will-change: transform, opacity;
}
.escena-titular h2,
.escena-titular .escena-h {
  font-family: var(--serif);
  font-weight: 300;
  line-height: 1.14;
  font-size: clamp(27px, 3.4vw, 44px);
}
.escena-titular .eyebrow { margin-bottom: 16px; }

.proceso-chip {
  position: absolute;
  left: 0; top: 0;
  background: var(--marfil);
  border: 1px solid var(--arena);
  padding: 12px 20px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  white-space: nowrap;
  will-change: transform, opacity;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 10px;
}
.proceso-chip.conectado { border-color: var(--bronce); }

/* Puerto de conexión: el punto donde el nodo se enchufa al sistema */
.puerto {
  position: absolute;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--hueso);
  border: 1px solid var(--gris-calido);
  transform: translate(-50%, -50%) scale(.8);
  transition: background .5s ease, border-color .5s ease, transform .5s cubic-bezier(.2,.65,.2,1);
}
.chip-izq .puerto { left: 100%; top: 50%; }
.chip-der .puerto { left: 0; top: 50%; }
.chip-arr .puerto { left: 50%; top: 100%; }
.chip-abj .puerto { left: 50%; top: 0; }
.proceso-chip.conectado .puerto {
  background: var(--bronce);
  border-color: var(--bronce);
  transform: translate(-50%, -50%) scale(1.15);
}

/* Mini-nodos: piezas pequeñas del sistema que se enganchan a los flujos */
.nodo-mini {
  position: absolute;
  left: 0; top: 0;
  width: 9px; height: 9px;
  background: var(--marfil);
  border: 1px solid var(--gris-calido);
  will-change: transform, opacity;
  z-index: 3;
  transition: background .5s ease, border-color .5s ease;
}
.nodo-mini.activo { background: var(--bronce); border-color: var(--bronce); }

@media (max-width: 700px) {
  .proceso-chip { font-size: 11px; padding: 9px 13px; }
  .proceso-chip.solo-ancha, .nodo-mini { display: none; }
}

/* Conexiones SVG hacia el núcleo MM */
.escena-lineas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  overflow: visible;
}
.escena-lineas path {
  fill: none;
  stroke: var(--bronce);
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
}
/* Partículas de flujo: datos recorriendo las conexiones activas */
.escena-lineas circle {
  fill: var(--bronce);
  opacity: 0;
}

/* Isotipo MM: núcleo del sistema */
.escena-mm {
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(150px, 17vw, 240px);
  color: var(--grafito);
  opacity: 0;
  z-index: 4;
  will-change: transform, opacity;
  pointer-events: none;
}
.escena-mm .mm-nucleo { width: 100%; height: auto; display: block; }
/* Anillo de activación alrededor del núcleo (eco del orbe del hero) */
.escena-mm .mm-anillo {
  position: absolute;
  inset: -26%;
  width: 152%;
  height: 152%;
  overflow: visible;
}
.mm-anillo circle { fill: none; stroke-width: .7; }
@media (max-width: 700px) {
  .escena-mm .mm-anillo { inset: -10%; width: 120%; height: 120%; }
}
.mm-anillo .anillo-base { stroke: var(--arena); opacity: 0; }
.mm-anillo .anillo-traza {
  stroke: var(--bronce);
  transform: rotate(-90deg);
  transform-origin: center;
}

/* Clímax: claim a pantalla casi completa */
.escena-claim {
  position: absolute;
  inset: 0;
  background: var(--grafito);
  color: var(--hueso);
  display: flex;
  align-items: center;
  text-align: center;
  opacity: 0;
  z-index: 10;
  pointer-events: none;
}
.escena-claim.activa { pointer-events: auto; }
.claim-mm {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(88vw, 860px);
  color: var(--hueso);
  opacity: .04;
  pointer-events: none;
}
.escena-claim .contenedor { position: relative; z-index: 2; }
.claim-grande {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(46px, 8.6vw, 128px);
  line-height: 1.06;
  letter-spacing: -0.01em;
  max-width: 12ch;
  margin: 0 auto;
  will-change: transform;
}
.claim-grande .palabra {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.35em);
  will-change: transform, opacity;
}
.claim-grande .palabra:last-child { color: var(--acento); }
.claim-firma { opacity: 0; will-change: opacity, transform; }
.claim-firma .filete { margin: 44px auto 26px; }
.claim-firma .btn { margin-top: 34px; }

/* ============================================================
   RUTA GUIADA — del sistema ordenado a la puerta de entrada
   ============================================================ */
.ruta {
  text-align: center;
  padding: 30px 0 0;
  overflow: hidden;
}
.ruta-titulo {
  font-family: var(--serif);
  font-weight: 300;
  line-height: 1.14;
  font-size: clamp(26px, 3.4vw, 42px);
  margin-top: 16px;
}
.ruta-svg {
  display: block;
  margin: 46px auto 0;
  width: min(88vw, 500px);
  height: auto;
  overflow: visible;
}
.ruta-base {
  fill: none;
  stroke: var(--arena);
  stroke-width: 1.2;
}
.ruta-trazo {
  fill: none;
  stroke: var(--bronce);
  stroke-width: 1.5;
}
.ruta-particula { fill: var(--bronce); opacity: 0; }
.ruta-nodo circle {
  fill: var(--marfil);
  stroke: var(--gris-calido);
  stroke-width: 1.1;
  transition: stroke .5s ease, fill .5s ease;
}
.ruta-nodo text {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  fill: var(--gris-calido);
  opacity: .35;
  transition: opacity .5s ease, fill .5s ease;
}
/* El trazo está pasando por el nodo: se evalúa */
.ruta-nodo.activa circle { stroke: var(--bronce); }
.ruta-nodo.activa text { opacity: 1; fill: var(--grafito); }
/* Nodo ya evaluado: queda en reposo */
.ruta-nodo.visitada circle { stroke: var(--arena); }
.ruta-nodo.visitada text { opacity: .5; }
/* Nodo final: la decisión. Se activa y se queda encendido */
.ruta-nodo.final circle { stroke-width: 1.3; }
.ruta-nodo.final text { font-size: 15px; letter-spacing: 0.2em; }
.ruta-nodo.final .subtexto { font-size: 10.5px; letter-spacing: 0.18em; }
.ruta-nodo.final.activa circle { fill: var(--bronce); stroke: var(--bronce); }
.ruta-nodo.final.activa text { fill: var(--grafito); opacity: 1; }
.ruta-nodo.final.activa .subtexto { fill: var(--bronce); }
.ruta-nodo .halo {
  fill: none;
  stroke: var(--bronce);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}
.ruta-nodo.final.activa .halo { animation: pulsoHalo 2.8s ease-out infinite; }
@keyframes pulsoHalo {
  0% { transform: scale(.55); opacity: .7; }
  75% { transform: scale(1.18); opacity: 0; }
  100% { transform: scale(1.18); opacity: 0; }
}
/* Tramo de salida: reanuda el camino por debajo del nodo final */
.salida-base {
  stroke: var(--arena);
  stroke-width: 1.2;
}
.salida-trazo {
  stroke: var(--bronce);
  stroke-width: 1.5;
  stroke-dasharray: 84;
  stroke-dashoffset: 84;
}

/* Estado estático (sin animación) */
.ruta.estatica .ruta-trazo, .ruta.estatica .salida-trazo { display: none; }
.ruta.estatica .ruta-base, .ruta.estatica .salida-base { stroke: var(--bronce); opacity: .55; }
.ruta.estatica .ruta-nodo text { opacity: .7; }
.ruta.estatica .halo { display: none; }

/* Transición progresiva de fondo entre secciones (la pinta JS) */
.transicion-fondo {
  height: 46vh;
  position: relative;
  display: flex;
  justify-content: center;
}
.linea-continua {
  display: block;
  width: 1px;
  height: 100%;
  background: var(--bronce);
  opacity: .55;
  transform: scaleY(0);
  transform-origin: top center;
  will-change: transform;
}

/* Sin animación: estado estático legible */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .linea-mascara > span { transform: none; animation: none; }
  .aparece-suave, .hero .filete { opacity: 1; transform: none; animation: none; }
  .revela { opacity: 1; transform: none; transition: none; }
  .hero-orbe { transform: none !important; }
  .orbe-interior, .orbe-mm, .red-activa, .red-nodo { animation: none; }
  .red-activa { display: none; }
  .demo-panel i { transform: scaleY(1); }
  .proceso-chip .puerto { background: var(--bronce); border-color: var(--bronce); }
  .nodo-mini { display: none; }
  .mm-anillo .anillo-base { opacity: .8; }
  .mm-anillo .anillo-traza { display: none; }
  .escena { height: auto; }
  .escena-fijada { position: static; height: auto; overflow: visible; }
  .escena-lienzo { position: static; }
  .escena-titular { position: static; transform: none; opacity: 1; margin: 70px auto 30px; }
  .escena-titular[data-fase="2"] { display: none; }
  .escena-lineas { display: none; }
  .escena-mm { position: static; transform: none; opacity: .9; margin: 40px auto; }
  .proceso-chip { position: static; margin: 8px auto; width: fit-content; }
  .escena-claim { position: static; opacity: 1; padding: 90px 20px; pointer-events: auto; }
  .claim-grande .palabra { opacity: 1; transform: none; }
  .claim-firma { opacity: 1; }
  .transicion-fondo { height: 60px; }
  .linea-continua { transform: none; }
}

/* ---------- Tarjetas de servicio ---------- */
.grid-servicios {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--arena);
  border: 1px solid var(--arena);
  margin-top: 70px;
}
@media (max-width: 900px) { .grid-servicios { grid-template-columns: 1fr; } }

.tarjeta-servicio {
  background: var(--marfil);
  padding: 46px 40px 52px;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  transition: background .35s ease;
  position: relative;
}
.tarjeta-servicio:hover { background: var(--hueso); }
.tarjeta-servicio .num {
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--acento);
  font-weight: 500;
}
.tarjeta-servicio h3 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 27px;
  line-height: 1.2;
  margin: 22px 0 16px;
}
.tarjeta-servicio p { font-size: 14.5px; line-height: 1.75; color: var(--gris-calido); flex: 1; }
.tarjeta-servicio .enlace {
  margin-top: 34px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grafito);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.tarjeta-servicio .enlace::after {
  content: "";
  width: 28px; height: 1px;
  background: var(--bronce);
  transition: width .35s cubic-bezier(.6,0,.2,1);
}
.tarjeta-servicio:hover .enlace::after { width: 48px; }

/* ---------- Cifras destacadas ---------- */
.cifra-bloque {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 30px;
  border-top: 1px solid var(--grafito);
  padding-top: 24px;
}
.seccion-oscura .cifra-bloque { border-top-color: rgba(244,241,236,.3); }
.cifra-valor {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(44px, 5vw, 68px);
  line-height: 1;
  white-space: nowrap;
}
/* «5+ h/semana» a 44px no cabe junto a su etiqueta en un móvil estrecho:
   la fila se partía y sacaba 34px de página. Debajo de 520px la cifra
   baja de cuerpo y el bloque se apila. */
@media (max-width: 520px) {
  .cifra-bloque {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    align-items: start;
  }
  .cifra-valor { font-size: clamp(32px, 11vw, 44px); }
}
.grid-cifras {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
  margin-top: 70px;
}
@media (max-width: 860px) { .grid-cifras { grid-template-columns: 1fr; } }

/* ---------- Cita / argumento ---------- */
.cita-grande {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(28px, 3.6vw, 46px);
  line-height: 1.3;
  max-width: 22ch;
}
.cita-grande em { font-style: italic; color: var(--acento); }

/* ---------- Casos ---------- */
.caso {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 90px);
  padding: 70px 0;
  border-top: 1px solid var(--arena);
  align-items: start;
}
.caso:first-of-type { border-top: 1px solid var(--grafito); }
@media (max-width: 860px) { .caso { grid-template-columns: 1fr; gap: 30px; } }
.caso h3 { font-family: var(--serif); font-weight: 300; font-size: clamp(26px, 3vw, 36px); line-height: 1.2; margin-top: 14px; }
.caso-datos { display: flex; flex-direction: column; gap: 34px; }
.caso-dato { border-top: 1px solid var(--arena); padding-top: 18px; }
.caso-dato .cifra-valor { font-size: clamp(36px, 4vw, 52px); }
.caso-dato .eyebrow { margin-top: 10px; display: block; }
.caso p.descripcion { color: var(--gris-calido); font-size: 15px; margin-top: 18px; }

/* ---------- Página de servicio ---------- */
.cabecera-pagina {
  padding: 200px 0 100px;
}
.cabecera-pagina h1 { font-size: clamp(38px, 5.4vw, 68px); max-width: 16ch; }

.lista-detalle { margin-top: 70px; border-top: 1px solid var(--grafito); }
.detalle-item {
  display: grid;
  grid-template-columns: 80px 1fr 1.4fr;
  gap: 30px;
  padding: 40px 0;
  border-bottom: 1px solid var(--arena);
}
@media (max-width: 780px) { .detalle-item { grid-template-columns: 1fr; gap: 10px; padding: 30px 0; } }
.detalle-item .num { font-size: 11px; letter-spacing: 0.2em; color: var(--acento); font-weight: 500; padding-top: 5px; }
.detalle-item h3 { font-size: 17px; font-weight: 600; }
.detalle-item p { font-size: 14.5px; line-height: 1.75; color: var(--gris-calido); }

/* ---------- Banda CTA final ---------- */
.banda-cta { text-align: center; }
.banda-cta h2 { max-width: 20ch; margin: 24px auto 0; }
.banda-cta .filete { margin: 34px auto; }
.banda-cta .acciones { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; margin-top: 10px; }

/* ---------- Contacto ---------- */
.contacto-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(50px, 8vw, 120px);
  align-items: start;
}
@media (max-width: 860px) { .contacto-grid { grid-template-columns: 1fr; } }
.contacto-canal {
  border-top: 1px solid var(--grafito);
  padding: 30px 0 40px;
  display: block;
  text-decoration: none;
  transition: padding-left .35s cubic-bezier(.6,0,.2,1);
}
.contacto-canal:hover { padding-left: 14px; }
.contacto-canal .valor {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(24px, 3vw, 34px);
  margin-top: 14px;
  line-height: 1.2;
}

/* ---------- Pie ---------- */
.pie {
  background: var(--grafito);
  color: var(--hueso);
  padding: 90px 0 50px;
}
.pie-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 50px;
  align-items: start;
}
@media (max-width: 780px) { .pie-grid { grid-template-columns: 1fr; } }
.pie .logo-exe { font-size: 40px; }
.pie-claim {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--acento);
  margin-top: 20px;
  line-height: 2;
}
.pie h4 {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--acento);
  margin-bottom: 22px;
}
.pie ul { list-style: none; }
.pie li { margin-bottom: 12px; }
.pie a { color: rgba(244,241,236,.75); text-decoration: none; font-size: 14px; transition: color .3s; }
.pie a:hover { color: var(--hueso); }
.pie-legal {
  margin-top: 80px;
  padding-top: 28px;
  border-top: 1px solid rgba(244,241,236,.15);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 12px;
  color: rgba(244,241,236,.45);
}

/* ============================================================
   SERVICIOS — bloque editorial con demostración visual
   ============================================================ */
.servicio-destacado {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(40px, 6vw, 90px);
  align-items: center;
  margin-top: 80px;
  border-top: 1px solid var(--grafito);
  padding-top: 70px;
}
@media (max-width: 920px) { .servicio-destacado { grid-template-columns: 1fr; } }
.servicio-destacado-texto h3 {
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.16;
  margin: 20px 0 22px;
}
.servicio-destacado-texto p {
  font-size: 15px;
  line-height: 1.8;
  color: var(--gris-calido);
  margin-bottom: 34px;
}

/* Mockup navegador + móvil: la web demuestra que hace webs */
.mockup-escena { position: relative; padding-bottom: 60px; }
.mockup-navegador {
  background: var(--marfil);
  border: 1px solid var(--arena);
}
.mockup-barra {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--arena);
}
.mockup-barra i {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--arena);
}
.mockup-barra em {
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--gris-calido);
  margin-left: 12px;
}
.mockup-cuerpo { padding: 26px 28px 30px; }
.mockup-nav { display: flex; align-items: center; gap: 10px; margin-bottom: 30px; }
.mockup-nav b { width: 34px; height: 9px; background: var(--grafito); }
.mockup-nav u { width: 22px; height: 5px; background: var(--arena); }
.mockup-nav s { width: 40px; height: 12px; background: var(--bronce); margin-left: auto; opacity: .85; }
.mockup-titular b {
  display: block;
  height: 14px;
  background: var(--grafito);
  margin-bottom: 8px;
  width: 82%;
  transform-origin: left center;
}
.mockup-titular b.corta { width: 55%; }
.mockup-parrafo { margin: 16px 0 22px; }
.mockup-parrafo u {
  display: block;
  height: 5px;
  background: var(--arena);
  margin-bottom: 6px;
  width: 92%;
}
.mockup-parrafo u.corta { width: 60%; }
.mockup-cta { width: 96px; height: 26px; background: var(--grafito); position: relative; }
.mockup-cta::after {
  content: "";
  position: absolute;
  left: 26%; top: 46%;
  width: 48%; height: 3px;
  background: var(--hueso);
}
.mockup-tarjetas { display: flex; gap: 10px; margin-top: 24px; }
.mockup-tarjetas span {
  flex: 1;
  height: 44px;
  background: var(--hueso);
  border: 1px solid var(--arena);
}
.mockup-movil {
  position: absolute;
  right: -6px;
  bottom: 0;
  width: 118px;
  background: var(--marfil);
  border: 1px solid var(--arena);
  box-shadow: 0 0 0 6px var(--hueso);
  padding-top: 14px;
}
.mockup-movil .mockup-cuerpo { padding: 6px 12px 16px; }
.mockup-movil .mockup-titular b { height: 8px; }
.mockup-movil .mockup-cta { width: 100%; height: 18px; }
/* Los elementos del mockup cobran vida al entrar en pantalla */
.mockup-escena b, .mockup-escena u, .mockup-escena s,
.mockup-escena .mockup-cta, .mockup-escena .mockup-tarjetas span {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .8s cubic-bezier(.2,.65,.2,1);
}
.revela.visible .mockup-escena b { transition-delay: .25s; transform: scaleX(1); }
.revela.visible .mockup-escena u { transition-delay: .45s; transform: scaleX(1); }
.revela.visible .mockup-escena s { transition-delay: .6s; transform: scaleX(1); }
.revela.visible .mockup-escena .mockup-cta { transition-delay: .75s; transform: scaleX(1); }
.revela.visible .mockup-escena .mockup-tarjetas span { transition-delay: .9s; transform: scaleX(1); }

/* Lista de servicios enlazados */
.detalle-enlace {
  text-decoration: none;
  transition: background .3s ease, padding-left .35s cubic-bezier(.6,0,.2,1);
}
.detalle-enlace:hover { background: var(--marfil); padding-left: 14px; }
.detalle-enlace h3 { display: flex; align-items: baseline; gap: 12px; }
.detalle-enlace h3::after {
  content: "";
  width: 22px; height: 1px;
  background: var(--bronce);
  transition: width .35s cubic-bezier(.6,0,.2,1);
}
.detalle-enlace:hover h3::after { width: 44px; }

/* Servicios con microdemostración visual (escenas SVG) */
.detalle-item.con-demo {
  grid-template-columns: 60px 1fr 264px;
  align-items: center;
  gap: 30px;
}
.detalle-item.con-demo .detalle-texto h3 { margin-bottom: 10px; }
@media (max-width: 780px) {
  .detalle-item.con-demo { grid-template-columns: 1fr; gap: 14px; }
  .detalle-item.con-demo .servicio-demo { margin-top: 6px; justify-self: start; }
}
.servicio-demo.demo-svg {
  width: 240px;
  height: auto;
  justify-self: end;
  overflow: visible;
}

/* ---------- Workflow (Automatización): pasos encadenados que se ejecutan solos ---------- */
.servicio-demo.flujo, .servicio-demo.red { width: 100%; justify-self: end; }
@media (max-width: 780px) {
  .servicio-demo.flujo, .servicio-demo.red { max-width: 300px; justify-self: start; }
}
.wf-nodo {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--marfil);
  border: 1px solid var(--arena);
  padding: 9px 12px;
  font-size: 11px;
  font-weight: 500;
  color: var(--gris-calido);
  transition: border-color .45s ease, color .45s ease;
}
.wf-puerto {
  width: 7px; height: 7px;
  border-radius: 50%;
  border: 1px solid var(--gris-calido);
  background: var(--hueso);
  flex: none;
  transition: background .45s ease, border-color .45s ease;
}
/* Al entrar en pantalla, el proceso queda conectado y en reposo */
.revela.visible .wf-nodo { border-color: var(--bronce); color: var(--grafito); }
.revela.visible .wf-nodo:nth-of-type(3) { transition-delay: .18s; }
.revela.visible .wf-nodo:nth-of-type(5) { transition-delay: .36s; }
.revela.visible .wf-puerto { background: var(--bronce); border-color: var(--bronce); }
.wf-cable {
  position: relative;
  width: 1px;
  height: 20px;
  margin-left: 16px;
  background: var(--arena);
  transition: background .45s ease;
}
.revela.visible .wf-cable { background: var(--bronce); }
.wf-pulso {
  position: absolute;
  left: -2px;
  top: 0;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--bronce);
  opacity: 0;
}
/* Ráfaga corta al aparecer; después reposa. Vuelve al pasar el ratón. */
.revela.visible .wf-pulso { animation: wfBaja 2.4s ease-in-out 3; }
.detalle-enlace:hover .wf-pulso { animation: wfBaja 2s ease-in-out infinite; }
@keyframes wfBaja {
  0% { top: -3px; opacity: 0; }
  18% { opacity: 1; }
  72% { opacity: 1; }
  90%, 100% { top: 18px; opacity: 0; }
}
.wf-sello {
  margin-left: auto;
  font-size: 8.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--acento);
  opacity: 0;
  transition: opacity .5s ease .7s;
}
.revela.visible .wf-sello { opacity: 1; }

/* ---------- Red (Agentes): un asistente que se apoya en herramientas ---------- */
.rd-agente {
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--grafito);
  color: var(--hueso);
  padding: 10px 13px;
  font-size: 11.5px;
  font-weight: 500;
}
.rd-nucleo {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--bronce);
  flex: none;
}
.revela.visible .rd-nucleo { animation: rdLate 2.8s ease-in-out infinite; }
@keyframes rdLate { 50% { opacity: .3; } }
.rd-ramas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  height: 22px;
}
.rd-cable {
  position: relative;
  justify-self: center;
  width: 1px;
  height: 100%;
  background: var(--arena);
  transition: background .5s ease;
}
.revela.visible .rd-cable { background: var(--bronce); }
.revela.visible .rd-cable:nth-child(2) { transition-delay: .12s; }
.revela.visible .rd-cable:nth-child(3) { transition-delay: .24s; }
.rd-pulso {
  position: absolute;
  left: -2px; top: 0;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--bronce);
  opacity: 0;
}
.revela.visible .rd-pulso { animation: rdBaja 2.7s ease-in-out 3; }
.detalle-enlace:hover .rd-pulso { animation: rdBaja 2.4s ease-in-out infinite; }
@keyframes rdBaja {
  0% { top: -3px; opacity: 0; }
  20% { opacity: 1; }
  75% { opacity: 1; }
  92%, 100% { top: 20px; opacity: 0; }
}
.rd-capacidades { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.rd-cap {
  text-align: center;
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 7px 3px;
  border: 1px solid var(--arena);
  background: var(--marfil);
  color: var(--gris-calido);
  transition: border-color .45s ease, color .45s ease;
}
.revela.visible .rd-cap { border-color: var(--bronce); color: var(--grafito); }
.revela.visible .rd-cap:nth-child(2) { transition-delay: .12s; }
.revela.visible .rd-cap:nth-child(3) { transition-delay: .24s; }

/* Vocabulario común de las escenas */
.demo-svg .dn { fill: var(--marfil); stroke: var(--arena); stroke-width: 1; transition: stroke .4s ease; }
.demo-svg .dng { fill: var(--grafito); stroke: var(--grafito); }
.demo-svg .dnp { fill: var(--hueso); }
.demo-svg .dh { stroke: var(--grafito); stroke-width: 2.4; }
.demo-svg .dhb { stroke: var(--bronce); }
.demo-svg .dhc { stroke: var(--hueso); stroke-width: 2.4; }
.demo-svg .dd { stroke: var(--arena); stroke-width: 2; }
.demo-svg .ddb { stroke: var(--bronce); stroke-width: 2; opacity: .8; }
.demo-svg .ddc { stroke: #6B6459; stroke-width: 2; }
.demo-svg .dd-dot { fill: var(--arena); }
.demo-svg .dc { fill: none; stroke: var(--arena); stroke-width: 1.2; }
.demo-svg .dca {
  fill: none;
  stroke: var(--bronce);
  stroke-width: 1.4;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset .8s cubic-bezier(.2,.65,.2,1);
}
.detalle-enlace:hover .demo-svg .dca { stroke-dashoffset: 0; }
.demo-svg .dp { fill: var(--bronce); }
.demo-svg .dpa { opacity: .45; transition: opacity .5s ease .35s; }
.detalle-enlace:hover .demo-svg .dpa { opacity: 1; }

/* Panel: barras y gráfica que cobran vida */
.demo-panel .db {
  fill: var(--arena);
  transform-box: fill-box;
  transform-origin: bottom center;
  transform: scaleY(.55);
  transition: transform .7s cubic-bezier(.2,.65,.2,1), fill .5s ease;
}
.demo-panel .dbb { fill: var(--bronce); }
.detalle-enlace:hover .demo-panel .db { transform: scaleY(1); }
.demo-panel .dl {
  fill: none;
  stroke: var(--grafito);
  stroke-width: 1.3;
  stroke-dasharray: 120;
  stroke-dashoffset: 60;
  transition: stroke-dashoffset .9s cubic-bezier(.2,.65,.2,1);
}
.detalle-enlace:hover .demo-panel .dl { stroke-dashoffset: 0; }

/* Consultoría: los pasos del plan se completan y el sistema arranca */
.demo-consultoria .paso {
  fill: var(--hueso);
  stroke: var(--gris-calido);
  stroke-width: 1.1;
  transition: fill .4s ease, stroke .4s ease;
}
.demo-consultoria .p1 { fill: var(--bronce); stroke: var(--bronce); }
.detalle-enlace:hover .demo-consultoria .p2 { fill: var(--bronce); stroke: var(--bronce); transition-delay: .25s; }
.detalle-enlace:hover .demo-consultoria .p3 { fill: var(--bronce); stroke: var(--bronce); transition-delay: .5s; }
.detalle-enlace:hover .demo-consultoria .dpulso { animation: parpadeo 1.2s ease infinite .7s; }
@keyframes parpadeo { 50% { opacity: .3; } }

/* ============================================================
   CÓMO TRABAJAMOS — un espacio con profundidad que se recorre.
   No son tarjetas en 3D: es el espacio el que tiene profundidad
   y la cámara la que avanza por él.
   ============================================================ */
.recorrido { position: relative; height: 560vh; }
.recorrido-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}
.recorrido-cabecera {
  position: absolute;
  top: clamp(90px, 13vh, 150px);
  left: 0; right: 0;
  z-index: 4;
  will-change: opacity, transform;
}

/* El espacio */
.escenario {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 62%;
  perspective: 1100px;
  perspective-origin: 50% 58%;
  will-change: perspective, opacity;
}
/* Los bordes del espacio se funden con la página: nada aparece ni se corta de golpe */
.escenario::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom, var(--hueso) 0%, rgba(244,241,236,0) 24%,
                    rgba(244,241,236,0) 62%, var(--hueso) 94%),
    linear-gradient(to right, var(--hueso) 0%, rgba(244,241,236,0) 12%,
                    rgba(244,241,236,0) 88%, var(--hueso) 100%);
}
/* Hilo conductor: el eje que se pierde en la fuga */
.eje-fuga {
  position: absolute;
  left: 50%;
  top: 58%;
  width: 1px;
  height: 30%;
  background: linear-gradient(to bottom, rgba(138,126,107,0) 0%, rgba(138,126,107,.55) 58%, rgba(138,126,107,.1) 100%);
  transform: translateX(-50%);
  transform-origin: top center;
}
.mundo {
  position: absolute;
  left: 50%;
  top: 58%;
  width: 0; height: 0;
  transform-style: preserve-3d;
  will-change: transform;
}
/* Traviesas: la referencia que hace visible el avance */
.marca {
  position: absolute;
  width: 780px;
  height: 1px;
  margin-left: -390px;
  background: var(--arena);
  opacity: .5;
  transform: translate3d(0, 130px, var(--z));
}

.grupo {
  position: absolute;
  transform: translateZ(var(--z));
  transform-style: preserve-3d;
  opacity: 0;
  will-change: opacity;
}

/* 01 · piezas sueltas que se recogen y se ordenan sobre el eje */
.g01 .pieza {
  position: absolute;
  width: 12px; height: 12px;
  margin: -6px 0 0 -6px;
  background: var(--marfil);
  border: 1px solid var(--gris-calido);
  transform:
    translate3d(calc(var(--x) * (1 - var(--lp, 0))),
                calc(var(--y) * (1 - var(--lp, 0))),
                calc(var(--dz) * (1 - var(--lp, 0))))
    rotate(calc(38deg * (1 - var(--lp, 0))));
}

/* 02 · caminos posibles; uno se activa */
.g02 .via {
  position: absolute;
  left: 0; top: 0;
  width: 300px;
  height: 1px;
  background: var(--arena);
  transform-origin: left center;
  transform: translateX(-170px) rotate(var(--a)) scaleX(var(--lp, 0));
  /* Al decidirse el camino, las demás opciones ceden protagonismo */
  opacity: calc(1 - var(--lp, 0) * 0.6);
}
.g02 .via.elegida {
  background: var(--bronce);
  height: 1.5px;
  opacity: 1;
}
.g02 .destino {
  position: absolute;
  width: 9px; height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  background: var(--hueso);
  border: 1px solid var(--gris-calido);
  transform: translate3d(var(--x), var(--y), 0);
  opacity: calc((var(--lp, 0) - 0.6) * 2.5);
}
.g02 .destino.elegido {
  background: var(--bronce);
  border-color: var(--bronce);
  opacity: calc((var(--lp, 0) - 0.5) * 3);
}

/* 03 · las piezas y la dirección se convierten en un sistema */
.g03 .nodo, .g04 .nodo {
  position: absolute;
  width: 15px; height: 15px;
  margin: -7.5px 0 0 -7.5px;
  background: var(--marfil);
  border: 1px solid var(--gris-calido);
  /* Los nodos toman posición primero; las conexiones llegan después */
  transform: translate3d(
    calc(var(--x) * clamp(0, var(--lp, 0) / 0.55, 1)),
    calc(var(--y) * clamp(0, var(--lp, 0) / 0.55, 1)), 0);
}
.g03 .nodo.nucleo {
  border-color: var(--bronce);
  background: var(--bronce);
  width: 18px; height: 18px;
  margin: -9px 0 0 -9px;
}
.g03 .enlace {
  position: absolute;
  left: 0; top: 0;
  width: 218px;
  height: 1px;
  background: var(--bronce);
  transform-origin: left center;
  transform: rotate(var(--a)) scaleX(clamp(0, (var(--lp, 0) - 0.5) * 2, 1));
  opacity: .8;
}

/* 04 · el sistema entregado sigue vivo */
.g04 .circuito {
  position: absolute;
  width: 260px; height: 148px;
  margin: -74px 0 0 -130px;
  border: 1px solid var(--arena);
  /* Mismo ritmo que los nodos que descansan en sus esquinas */
  transform: scale(clamp(0, var(--lp, 0) / 0.55, 1));
}
.g04 .latido {
  position: absolute;
  width: 7px; height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  background: var(--bronce);
  offset-path: path("M -130 -74 L 130 -74 L 130 74 L -130 74 Z");
  animation: latidoCircula 6s linear infinite;
  opacity: calc((var(--lp, 0) - 0.7) * 3.3);
}
@keyframes latidoCircula { to { offset-distance: 100%; } }

/* Estaciones: número, nombre y una frase. Sin tarjeta. */
.estaciones {
  position: absolute;
  left: 0; right: 0;
  bottom: 19%;
  z-index: 5;
  height: 250px;
}
.estacion {
  position: absolute;
  left: var(--pad-lateral);
  right: var(--pad-lateral);
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
  opacity: 0;
  will-change: opacity, transform;
}
.estacion-num {
  display: block;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.26em;
  color: var(--acento);
  font-variant-numeric: lining-nums;
}
.estacion h3 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(34px, 4.7vw, 60px);
  line-height: 1.08;
  margin: 20px 0 22px;
}
.estacion p {
  font-size: 16.5px;
  line-height: 1.8;
  color: var(--gris-calido);
  max-width: 44ch;
  margin: 0 auto;
}

/* Riel de avance */
.recorrido-riel {
  position: absolute;
  left: 50%;
  bottom: 7%;
  transform: translateX(-50%);
  width: min(280px, 42%);
  height: 1px;
  background: var(--arena);
  opacity: .7;
  z-index: 5;
}
.riel-avance {
  position: absolute;
  inset: 0;
  background: var(--bronce);
  transform: scaleX(0);
  transform-origin: left center;
}

/* Desenlace: nace del propio eje, dentro del mismo pin */
.recorrido-claim {
  position: absolute;
  left: 0; right: 0;
  top: 34%;
  z-index: 7;
  text-align: center;
  pointer-events: none;
}
/* El eje tridimensional, ya de frente: una línea editorial */
.claim-eje {
  display: block;
  width: 46px;
  height: 2px;
  margin: 0 auto 30px;
  background: var(--bronce);
  transform: scaleX(0);
  will-change: transform;
}
.claim-etiqueta {
  opacity: 0;
  will-change: opacity;
}
.claim-frase {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(25px, 3.7vw, 52px);
  line-height: 1.26;
  max-width: 19ch;
  margin: 22px auto 0;
}
.claim-frase .claim-a,
.claim-frase .claim-b {
  display: block;
  opacity: 0;
  will-change: opacity, transform;
}
.claim-frase .claim-b {
  font-style: italic;
  color: var(--acento);
}

/* Móvil: mismo recorrido, sin profundidad. Cuatro hitos sobre un eje vertical. */
@media (max-width: 860px) {
  .recorrido { height: auto; }
  .recorrido-pin { position: static; height: auto; overflow: visible; padding: 0 0 40px; }
  .recorrido-cabecera { position: static; padding-top: 90px; }
  .escenario, .recorrido-riel { display: none; }
  .estaciones {
    position: static;
    height: auto;
    max-width: var(--ancho);
    margin: 0 auto;
    padding: 44px var(--pad-lateral) 0;
  }
  .recorrido-claim {
    position: static;
    padding: clamp(70px, 11vh, 120px) var(--pad-lateral) clamp(60px, 9vh, 100px);
    pointer-events: auto;
  }
  .claim-eje { transform: scaleX(1); }
  .claim-etiqueta { opacity: 1; }
  .claim-frase .claim-a,
  .claim-frase .claim-b { opacity: 1; transform: none !important; }
  .estacion {
    position: relative;
    left: auto; right: auto;
    max-width: none;
    margin: 0;
    opacity: 1;
    transform: none !important;
    text-align: left;
    padding: 0 0 40px 30px;
    border-left: 1px solid var(--arena);
  }
  .estacion::before {
    content: "";
    position: absolute;
    left: -4.5px; top: 8px;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--bronce);
  }
  .estacion:last-child { border-left-color: transparent; padding-bottom: 0; }
  .estacion h3 { font-size: 30px; }
  .estacion p { margin: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .recorrido { height: auto; }
  .recorrido-pin { position: static; height: auto; overflow: visible; }
  .recorrido-cabecera { position: static; }
  .escenario, .recorrido-riel { display: none; }
  .estaciones { position: static; height: auto; padding-top: 44px; }
  .recorrido-claim {
    position: static;
    padding: clamp(70px, 11vh, 120px) var(--pad-lateral) clamp(60px, 9vh, 100px);
    pointer-events: auto;
  }
  .claim-eje { transform: scaleX(1); }
  .claim-etiqueta { opacity: 1; }
  .claim-frase .claim-a,
  .claim-frase .claim-b { opacity: 1; transform: none !important; }
  .estacion {
    position: relative;
    opacity: 1;
    transform: none !important;
    max-width: 620px;
    margin: 0 auto 36px;
  }
  .g04 .latido { animation: none; }
}

/* ============================================================
   LA PRUEBA — caso construido, voz del cliente y recorrido.
   Una sola narrativa, con cambios de ritmo entre las tres partes.
   ============================================================ */
.prueba { padding: var(--espacio-seccion) 0; }

/* ---------- 1 · El caso: relato + el panel que construimos ----------
   Ojo: la clase .caso ya existe para casos.html; aquí usamos .caso-bloque */
.caso-bloque {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(38px, 4.5vw, 68px);
  align-items: center;
  margin-top: clamp(60px, 8vh, 96px);
}
@media (max-width: 980px) { .caso-bloque { grid-template-columns: 1fr; } }

.caso-relato h3 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.15;
  margin: 18px 0 20px;
}
.caso-texto {
  font-size: 15.5px;
  line-height: 1.8;
  color: var(--gris-calido);
}

/* Microescena: cómo era el proceso y cómo es ahora */
.cambio { margin: 34px 0 40px; }
.cambio-fila {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 0 16px;
  border-top: 1px solid var(--arena);
}
.cambio-eti {
  flex-basis: 100%;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gris-calido);
  margin-bottom: 12px;
}
.cambio-fila { flex-wrap: wrap; }
.cambio-fila.ahora .cambio-eti { color: var(--acento); }
.hito {
  font-size: 11px;
  font-weight: 500;
  padding: 5px 9px;
  border: 1px solid var(--arena);
  background: var(--marfil);
  color: var(--gris-calido);
  white-space: nowrap;
}
.hito.vivo { border-color: var(--bronce); color: var(--grafito); }
/* Tramo roto = un salto que alguien tenía que dar a mano */
.tramo {
  flex: 1;
  min-width: 14px;
  height: 1px;
  position: relative;
}
.tramo.roto {
  background-image: linear-gradient(to right, var(--arena) 0 4px, transparent 4px 8px);
  background-size: 8px 1px;
}
.tramo.unido { background: var(--bronce); }
.tramo.unido .dato {
  position: absolute;
  top: 50%;
  left: 0;
  width: 6px; height: 6px;
  margin-top: -3px;
  border-radius: 50%;
  background: var(--bronce);
  opacity: 0;
}
.revela.visible .tramo.unido .dato { animation: datoViaja 3.4s ease-in-out 1s infinite; }
@keyframes datoViaja {
  0% { left: 0; opacity: 0; }
  12% { opacity: 1; }
  76% { opacity: 1; }
  88%, 100% { left: 100%; opacity: 0; }
}

/* Resultados del caso, con presencia */
.caso-cifras {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto;      /* cifra y etiqueta, para poder alinearlas */
  gap: 22px;
  margin-bottom: 34px;
}
@media (max-width: 520px) {
  .caso-cifras { grid-template-columns: 1fr; grid-template-rows: none; gap: 16px; }
}
.caso-cifras li {
  /* La cifra puede ocupar una línea o dos; con subgrid las etiquetas
     siguen empezando todas a la misma altura. */
  display: grid;
  grid-row: span 2;
  grid-template-rows: subgrid;
  align-content: start;
  border-top: 1px solid var(--bronce);
  padding-top: 16px;
}
@media (max-width: 520px) { .caso-cifras li { grid-row: auto; grid-template-rows: none; } }
.caso-cifras strong {
  display: block;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(22px, 2.1vw, 30px);
  line-height: 1.15;
  font-variant-numeric: lining-nums;
  text-wrap: balance;
}
.caso-cifras li > span {
  display: block;
  align-self: start;
  margin-top: 8px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--gris-calido);
}
.enlace-caso {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--grafito);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.enlace-caso::after {
  content: "";
  width: 28px; height: 1px;
  background: var(--bronce);
  transition: width .35s cubic-bezier(.6,0,.2,1);
}
.enlace-caso:hover::after { width: 48px; }

/* ---------- El panel: recreación del sistema entregado ---------- */
.panel {
  background: #171717;
  border: 1px solid #262626;
  padding: 16px;
  font-size: 11px;
  line-height: 1.4;
  color: var(--hueso);
  overflow: hidden;
}
.panel-barra {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-bottom: 13px;
  border-bottom: 1px solid #262626;
}
.p-punto { width: 6px; height: 6px; border-radius: 50%; background: #3a3a3a; }
.p-titulo {
  margin-left: 12px;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(244,241,236,.45);
}
.p-vivo {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--acento);
}
.p-vivo::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--bronce);
  animation: latePanel 2.6s ease-in-out infinite;
}
@keyframes latePanel { 50% { opacity: .25; } }

.panel-kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 14px 0;
}
.kpi {
  background: #1e1e1e;
  border: 1px solid #2b2b2b;
  padding: 12px 13px;
}
.kpi-eti {
  display: block;
  font-size: 8.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(244,241,236,.42);
}
.kpi-val {
  display: block;
  margin: 7px 0 5px;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(17px, 1.9vw, 23px);
  line-height: 1;
  font-variant-numeric: lining-nums;
  color: var(--hueso);
}
.kpi-val em { font-style: normal; color: rgba(244,241,236,.4); }
.kpi:first-child .kpi-val { color: var(--acento); }
.kpi-pie { font-size: 9px; color: rgba(244,241,236,.34); }

.panel-cuerpo { display: grid; grid-template-columns: 0.72fr 1fr; gap: 8px; }
.panel-lista, .panel-plano {
  background: #1e1e1e;
  border: 1px solid #2b2b2b;
  padding: 12px;
}
.p-eti {
  display: block;
  font-size: 8.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(244,241,236,.42);
  margin-bottom: 11px;
}
.maq {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 0;
  border-bottom: 1px solid #272727;
}
.maq:last-child { border-bottom: 0; }
.maq i { width: 5px; height: 5px; border-radius: 50%; background: var(--bronce); flex: none; }
.maq.off i { background: #4a4a4a; }
.maq-n { font-size: 10.5px; color: rgba(244,241,236,.82); }
.maq-d {
  margin-left: auto;
  font-size: 10px;
  color: rgba(244,241,236,.5);
  font-variant-numeric: lining-nums;
}
.maq.activa { background: #242424; margin: 0 -12px; padding: 7px 12px; }
.maq.activa .maq-n { color: var(--hueso); }

.carril {
  display: grid;
  grid-template-columns: 20px 1fr auto;
  grid-template-areas: "id prod precio" ". barra stock";
  align-items: center;
  gap: 4px 8px;
  padding: 8px 0;
  border-bottom: 1px solid #272727;
}
.carril:last-child { border-bottom: 0; }
.c-id {
  grid-area: id;
  font-size: 8.5px;
  text-align: center;
  padding: 2px 0;
  background: #2a2a2a;
  color: rgba(244,241,236,.5);
  font-variant-numeric: lining-nums;
}
.c-prod { grid-area: prod; font-size: 10.5px; color: rgba(244,241,236,.82); }
.c-precio {
  grid-area: precio;
  font-size: 10px;
  color: rgba(244,241,236,.6);
  font-variant-numeric: lining-nums;
}
.c-barra { grid-area: barra; height: 3px; background: #2f2f2f; display: block; }
.c-barra i {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--bronce);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1s cubic-bezier(.2,.65,.2,1);
}
.revela.visible .c-barra i { transform: scaleX(var(--f)); }
.revela.visible .carril:nth-of-type(2) .c-barra i { transition-delay: .1s; }
.revela.visible .carril:nth-of-type(3) .c-barra i { transition-delay: .2s; }
.revela.visible .carril:nth-of-type(4) .c-barra i { transition-delay: .3s; }
.c-barra.bajo i { background: #8a6b5c; }
.c-stock {
  grid-area: stock;
  font-size: 9.5px;
  color: rgba(244,241,236,.62);
  font-variant-numeric: lining-nums;
}
.c-stock em { font-style: normal; color: rgba(244,241,236,.32); }

.panel-nota {
  margin-top: 14px;
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--gris-calido);
}
@media (max-width: 620px) {
  .panel-kpis { grid-template-columns: 1fr 1fr; }
  .panel-kpis .kpi:last-child { display: none; }
  .panel-cuerpo { grid-template-columns: 1fr; }
  .panel-lista .maq:nth-child(n+5) { display: none; }
}

/* ---------- 2 · La voz del cliente ---------- */
.voz { margin-top: clamp(80px, 11vh, 130px); }
.cita-principal {
  position: relative;
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
}
.cita-principal::before {
  content: "\201C";
  display: block;
  font-family: var(--serif);
  font-size: 76px;
  line-height: .5;
  color: var(--acento);
  margin-bottom: 18px;
}
.cita-principal p {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(27px, 3.6vw, 46px);
  line-height: 1.24;
}
.cita-principal footer {
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}
.cita-principal footer::before {
  content: "";
  width: 32px; height: 1px;
  background: var(--bronce);
  margin-bottom: 16px;
}

.voces-menores {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(34px, 5vw, 70px);
  margin: clamp(64px, 9vh, 100px) auto 0;
  max-width: 940px;
}
@media (max-width: 780px) { .voces-menores { grid-template-columns: 1fr; } }
.cita-menor {
  border-top: 1px solid var(--arena);
  padding-top: 24px;
  transition: border-color .4s ease;
}
.cita-menor:hover { border-top-color: var(--bronce); }
.cita-menor p {
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--gris-calido);
}
.cita-menor footer { margin-top: 18px; }
.quien { display: block; font-size: 13px; font-weight: 600; color: var(--grafito); }
.donde {
  display: block;
  margin-top: 3px;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--acento);
}

/* ---------- 3 · El recorrido acumulado ---------- */
.experiencia {
  /* El recuadro es el propio contenedor: si el margen lateral del sitio se
     queda como relleno, el borde acaba pegado al filo de la pantalla. Se pasa
     a ancho calculado + margen automático, para que quede centrado y con aire
     a los dos lados en cualquier pantalla. */
  margin: clamp(90px, 13vh, 150px) auto 0;
  width: calc(100% - var(--pad-lateral) * 2);
  /* La banda se levanta del fondo de la sección: es lo último que se lee
     antes de las preguntas y no debe quedar al mismo nivel que el resto. */
  background: var(--marfil);
  border: 1px solid color-mix(in srgb, var(--bronce) 34%, transparent);
  border-radius: 14px;
  padding: clamp(30px, 4vw, 46px) clamp(22px, 4vw, 52px) clamp(34px, 4.5vw, 50px);
  max-width: calc(var(--ancho) - var(--pad-lateral) * 2);
}
.experiencia-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(24px, 3vw, 48px);
  margin-top: 34px;
  border-top: 1px solid color-mix(in srgb, var(--bronce) 55%, transparent);
}
@media (max-width: 860px) { .experiencia-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .experiencia-grid { grid-template-columns: 1fr; } }
.exp-dato { padding-top: 26px; position: relative; }

/* Filetes de bronce entre columnas, para que las cuatro cifras se lean
   como cuatro compromisos y no como una fila continua. */
.exp-dato + .exp-dato::after {
  content: "";
  position: absolute;
  top: 26px; bottom: 4px;
  left: calc(clamp(24px, 3vw, 48px) / -2);
  width: 1px;
  background: color-mix(in srgb, var(--bronce) 30%, transparent);
}
@media (max-width: 860px) {
  .exp-dato:nth-child(odd)::after { display: none; }
}
@media (max-width: 460px) { .exp-dato::after { display: none; } }
/* El marcador va justo ENCIMA del filete, no sobre él: a 2px de alto
   sobresalía por arriba y se leían dos líneas superpuestas. */
.exp-dato::before {
  content: "";
  position: absolute;
  top: -1px; left: 0;
  width: 0; height: 1px;
  background: var(--acento);
  transition: width .7s cubic-bezier(.2,.65,.2,1);
}
.revela.visible .exp-dato::before { width: 26px; }
.revela.visible .exp-dato:nth-child(2)::before { transition-delay: .12s; }
.revela.visible .exp-dato:nth-child(3)::before { transition-delay: .24s; }
.revela.visible .exp-dato:nth-child(4)::before { transition-delay: .36s; }
.exp-dato:hover::before { width: 46px; }
.exp-num {
  display: block;
  font-family: var(--serif);
  font-weight: 300;
  /* Bajado de 76px: a ese cuerpo las cuatro cifras aplastaban su etiqueta
     y la banda se leía como un cartel, no como un compromiso. */
  font-size: clamp(36px, 3.6vw, 52px);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: lining-nums;
  transition: transform .4s cubic-bezier(.2,.65,.2,1);
}
.exp-dato:hover .exp-num { transform: translateY(-3px); }
.exp-eti {
  display: block;
  margin-top: 14px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1.6;
  text-transform: uppercase;
  color: var(--gris-calido);
  max-width: 15ch;
  transition: color .4s ease;
}
.exp-dato:hover .exp-eti { color: var(--grafito); }

@media (prefers-reduced-motion: reduce) {
  .tramo.unido .dato, .p-vivo::before { animation: none; }
  .c-barra i { transform: scaleX(var(--f)); transition: none; }
  .exp-dato::before { width: 26px; transition: none; }
}

/* ---------- Text roll: la palabra rota al pasar el ratón ---------- */
.rueda {
  display: inline-block;
  position: relative;
  overflow: hidden;
  vertical-align: bottom;
}
.rueda span {
  display: block;
  transition: transform .42s cubic-bezier(.6,0,.2,1);
}
.rueda .r-eco {
  position: absolute;
  top: 0; left: 0;
  transform: translateY(108%);
}
a:hover .rueda .r-base { transform: translateY(-108%); }
a:hover .rueda .r-eco { transform: translateY(0); }

/* ---------- Revelado con enfoque: solo en momentos importantes ---------- */
.revela.con-foco {
  filter: blur(7px);
  transition: opacity .9s cubic-bezier(.2,.65,.2,1),
              transform .9s cubic-bezier(.2,.65,.2,1),
              filter .65s cubic-bezier(.2,.65,.2,1);
}
.revela.con-foco.visible { filter: blur(0); }

/* La cifra respira mientras cuenta */
.exp-num.contando { opacity: .82; }
.exp-num { transition: opacity .4s ease, transform .4s cubic-bezier(.2,.65,.2,1); }

@media (prefers-reduced-motion: reduce) {
  body::before { opacity: .028; }
  .rueda span { transition: none; }
  .revela.con-foco { filter: none; }
  .nav-cta:hover::after { animation: none; }
  [data-iman] { transform: none !important; }
}

/* ============================================================
   AGENTES DE IA — lenguaje propio de la página:
   nodos, herramientas, acciones y conversaciones.
   Todo prefijado con .ag- para no tocar estilos globales.
   ============================================================ */

/* ---------- Hero: mensaje + agente en marcha ---------- */
.ag-hero { padding: clamp(150px, 20vh, 210px) 0 clamp(70px, 9vh, 110px); }
.ag-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  gap: clamp(40px, 5vw, 80px);
  align-items: center;
}
/* minmax(0,1fr) y no 1fr a secas: el mínimo implícito de «1fr» es el ancho
   del contenido, así que en pantallas estrechas la columna crecía por encima
   de su contenedor y sacaba el hero de la página. */
@media (max-width: 980px) { .ag-hero-grid { grid-template-columns: minmax(0, 1fr); } }
.ag-hero-texto h1 { font-size: clamp(36px, 4.8vw, 62px); max-width: 15ch; }
.ag-pie {
  margin-top: 18px;
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--gris-calido);
  max-width: 46ch;
}

/* ---------- La escena del agente ---------- */
.ag-escena {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 0.88;
  min-height: 330px;
}
.ag-cables {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  overflow: visible;
}
.ag-cables path {
  fill: none;
  stroke: var(--arena);
  stroke-width: 1;
}
.ag-cables path.activo { stroke: var(--bronce); stroke-width: 1.4; }
.ag-cables circle { fill: var(--bronce); opacity: 0; }

/* Núcleo: un centro operativo, no un botón */
.ag-nucleo {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: min(184px, 40%);
  background: var(--grafito);
  color: var(--hueso);
  padding: 14px 16px 13px;
  z-index: 3;
}
.ag-nucleo::after {
  content: "";
  position: absolute;
  inset: -9px;
  border: 1px solid var(--bronce);
  opacity: .18;
  pointer-events: none;
}
.ag-nucleo-cab {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.ag-luz {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--bronce);
  flex: none;
}
.ag-escena.viva .ag-luz { animation: agLate 2.4s ease-in-out infinite; }
@keyframes agLate { 50% { opacity: .3; } }
.ag-estado {
  display: block;
  margin-top: 9px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--acento);
  min-height: 14px;
}
.ag-barras {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 12px;
  margin-top: 10px;
}
.ag-barras i {
  flex: 1;
  background: rgba(244,241,236,.28);
  height: 30%;
  transition: height .35s ease, background .35s ease;
}
.ag-escena.trabajando .ag-barras i { background: var(--bronce); }
.ag-escena.trabajando .ag-barras i:nth-child(1) { height: 100%; }
.ag-escena.trabajando .ag-barras i:nth-child(2) { height: 55%; }
.ag-escena.trabajando .ag-barras i:nth-child(3) { height: 85%; }
.ag-escena.trabajando .ag-barras i:nth-child(4) { height: 40%; }

/* Nodos: las herramientas a las que se conecta */
.ag-nodo {
  position: absolute;
  max-width: 38%;
  background: var(--marfil);
  border: 1px solid var(--arena);
  padding: 8px 11px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--gris-calido);
  opacity: 0;
  transform: scale(.94);
  transition: opacity .5s ease, transform .5s cubic-bezier(.2,.65,.2,1),
              border-color .4s ease, color .4s ease;
  z-index: 2;
  pointer-events: none;
}
.ag-nodo.puesto { opacity: 1; transform: scale(1); }
.ag-nodo.activo { border-color: var(--bronce); color: var(--grafito); }
/* Las cuatro esquinas: nunca se cruzan con el núcleo centrado */
.ag-nodo[data-slot="0"] { left: 0;   top: 2%; }
.ag-nodo[data-slot="1"] { right: 0;  top: 2%;    text-align: right; }
.ag-nodo[data-slot="2"] { left: 0;   bottom: 2%; }
.ag-nodo[data-slot="3"] { right: 0;  bottom: 2%; text-align: right; }
.ag-nodo[data-slot="4"] { left: 0;   top: 30%; }
.ag-nodo[data-slot="5"] { right: 0;  top: 68%;   text-align: right; }
/* Sobre fondo oscuro los nodos se invierten */
.seccion-oscura .ag-nodo { background: #232323; border-color: #333; color: rgba(244,241,236,.7); }
.seccion-oscura .ag-nodo.activo { border-color: var(--bronce); color: var(--hueso); }

/* ---------- Chatbot frente a agente: dos vías a la misma escala ----------
   La clave es que ambos rieles se midan igual: así se ve de un vistazo
   que uno se queda en un tercio del recorrido. */
/* Esta sección y la siguiente comparten fondo hueso: si ambas ponen su
   padding completo, el hueco se duplica (348px medidos). Lo cerramos aquí
   y dejamos que .ag-casos aporte el único espacio de separación. */
.ag-diferencia { padding-bottom: 0; }
.ag-vias {
  margin-top: clamp(50px, 7vh, 80px);
  display: grid;
  gap: clamp(44px, 6vh, 76px);
}
.ag-via-cab {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-bottom: 24px;
}
.ag-via-eti {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gris-calido);
}
.ag-via-larga .ag-via-eti { color: var(--acento); }
.ag-via-nota {
  font-size: 12.5px;
  color: var(--gris-calido);
}

.ag-pasos {
  list-style: none;
  position: relative;
  display: grid;
  /* Seis columnas SIEMPRE: el chatbot solo llena dos y se nota */
  grid-template-columns: repeat(6, 1fr);
  gap: 0 clamp(12px, 1.8vw, 26px);
  padding-top: 24px;
}
/* Riel base: llega solo hasta donde llega la vía */
.ag-riel {
  position: absolute;
  top: 0; left: 0;
  height: 1px;
  background: var(--arena);
  width: 100%;
}
.ag-via-corta .ag-riel { width: calc(33.333% - 9px); }
/* El trazo bronce se dibuja al entrar en pantalla */
.ag-riel-vivo {
  position: absolute;
  top: -0.5px; left: 0;
  height: 2px;
  width: 100%;
  background: var(--bronce);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.5s cubic-bezier(.2,.65,.2,1) .15s;
}
.revela.visible .ag-riel-vivo { transform: scaleX(1); }
/* El tope: marca visible de que la vía corta no lleva a ningún sitio */
.ag-tope {
  position: absolute;
  top: -5px;
  left: calc(33.333% - 10px);
  width: 1px; height: 11px;
  background: var(--gris-calido);
}
.ag-tope::after {
  content: "Y ahí acaba";
  position: absolute;
  left: 10px; top: -2px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gris-calido);
  white-space: nowrap;
}

.ag-pasos li { position: relative; padding-right: 8px; }
/* Punto de cada paso, apoyado en el riel */
.ag-pasos li::before {
  content: "";
  position: absolute;
  top: -28px; left: 0;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--hueso);
  border: 1px solid var(--gris-calido);
  transition: background .5s ease, border-color .5s ease;
}
.revela.visible .ag-via-larga li::before {
  background: var(--bronce);
  border-color: var(--bronce);
}
.revela.visible .ag-via-larga li:nth-child(2)::before { transition-delay: .25s; }
.revela.visible .ag-via-larga li:nth-child(3)::before { transition-delay: .45s; }
.revela.visible .ag-via-larga li:nth-child(4)::before { transition-delay: .65s; }
.revela.visible .ag-via-larga li:nth-child(5)::before { transition-delay: .85s; }
.revela.visible .ag-via-larga li:nth-child(6)::before { transition-delay: 1.05s; }
.revela.visible .ag-via-larga li:nth-child(7)::before { transition-delay: 1.25s; }

.ag-n {
  display: block;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  color: var(--acento);
  font-variant-numeric: lining-nums;
}
.ag-via-corta .ag-n { color: var(--gris-calido); }
.ag-pasos b {
  display: block;
  font-size: 15px;
  font-weight: 600;
  margin: 9px 0 7px;
}
.ag-via-corta b { color: var(--gris-calido); }
.ag-d {
  display: block;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--gris-calido);
}

/* Móvil: la vía se pone de pie. Seis pasos en fila no caben ni se leen. */
@media (max-width: 860px) {
  .ag-pasos {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 0 0 0 30px;
  }
  .ag-riel { top: 4px; left: 4px; width: 1px !important; height: calc(100% - 12px); }
  .ag-riel-vivo {
    top: 4px; left: 4px;
    width: 2px; height: calc(100% - 12px);
    transform: scaleY(0);
    transform-origin: top center;
  }
  .revela.visible .ag-riel-vivo { transform: scaleY(1); }
  .ag-tope { display: none; }
  .ag-pasos li { padding: 0 0 24px; }
  .ag-pasos li:last-child { padding-bottom: 0; }
  .ag-pasos li::before { top: 2px; left: -30px; }
  .ag-pasos b { font-size: 16px; margin: 6px 0 5px; }
  .ag-d { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .ag-riel-vivo { transform: none !important; transition: none; }
  .ag-pasos li::before { transition: none; }
}

/* ---------- Los cinco trabajos: texto que avanza, agente que se reconfigura ---------- */
.ag-casos { padding: var(--espacio-seccion) 0; }
.ag-casos-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
  gap: clamp(40px, 6vw, 90px);
  align-items: start;
  margin-top: clamp(50px, 7vh, 80px);
}
.ag-caso {
  padding: clamp(60px, 9vh, 110px) 0;
  border-top: 1px solid var(--arena);
}
.ag-caso:first-child { border-top: 0; padding-top: 0; }
.ag-caso-num {
  display: block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.24em;
  color: var(--acento);
  font-variant-numeric: lining-nums;
}
.ag-caso h3 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(26px, 3.2vw, 40px);
  line-height: 1.12;
  margin: 16px 0 18px;
}
.ag-caso p { font-size: 15.5px; line-height: 1.8; color: var(--gris-calido); }
.ag-caso-fin { margin-top: 16px; }
.ag-caso-fin strong { color: var(--grafito); font-weight: 600; }
/* El recorrido compacto de cada caso: solo cuando no cabe la escena grande */
.ag-flujo { display: none; }

/* ---------- Recorrido compacto: qué llega → qué hace el agente → qué queda ----------
   Tres carriles del mismo ancho: los cinco casos se alinean en columna, así que
   la cabecera de arriba explica una sola vez lo que significan todos.
   El agente es el único bloque en grafito: se lee de un golpe quién hace qué. */
.ag-flujo {
  /* minmax(0,…) en las tres columnas de texto: con «1fr» pelado el mínimo es
     el ancho de los rótulos y a 320px la fila se salía de la pantalla. */
  grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr) 24px minmax(0, 1fr);
  align-items: stretch;
  margin-top: 26px;
}
.ag-flujo-cab {
  margin: 0 0 26px;
  padding-bottom: 11px;
  border-bottom: 1px solid var(--arena);
  /* Los rótulos parten en distinto número de líneas: se alinean por abajo */
  align-items: end;
}
.fl-cab {
  overflow-wrap: anywhere;
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--acento);
}
.fl-paso {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.45;
  padding: 11px 12px;
  border: 1px solid var(--arena);
  background: var(--marfil);
  color: var(--gris-calido);
  opacity: 0;
  transform: translateY(5px);
  transition: opacity .5s ease, transform .5s cubic-bezier(.2,.65,.2,1);
}
.revela.visible .fl-paso { opacity: 1; transform: translateY(0); }
/* nth-of-type cuenta todos los <span>: los pasos son el 1.º, 3.º y 5.º */
.revela.visible .fl-paso:nth-of-type(3) { transition-delay: .12s; }
.revela.visible .fl-paso:nth-of-type(5) { transition-delay: .24s; }

/* El agente: protagonista */
.fl-agente {
  gap: 7px;
  background: var(--grafito);
  border-color: var(--grafito);
  color: var(--hueso);
  font-weight: 600;
}
.fl-agente::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--bronce);
  flex: none;
}
.revela.visible .fl-agente::before { animation: flLate 2.6s ease-in-out infinite; }
@keyframes flLate { 50% { opacity: .3; } }

/* El resultado: lo único que queda en bronce, porque es lo que cambia */
.fl-fin {
  gap: 7px;
  border-color: var(--bronce);
  color: var(--grafito);
  font-weight: 600;
}
.fl-fin::before {
  content: "";
  width: 9px; height: 5px;
  border-left: 1.5px solid var(--bronce);
  border-bottom: 1.5px solid var(--bronce);
  transform: rotate(-45deg) translate(1px, -1px);
  flex: none;
}

/* El cable, con un dato que lo recorre */
.fl-cable {
  position: relative;
  align-self: center;
  height: 1px;
  background: var(--arena);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .45s cubic-bezier(.2,.65,.2,1), background .45s ease;
}
.revela.visible .fl-cable { transform: scaleX(1); background: var(--bronce); }
.revela.visible .fl-cable:nth-of-type(2) { transition-delay: .18s; }
.revela.visible .fl-cable:nth-of-type(4) { transition-delay: .30s; }
.fl-cable i {
  position: absolute;
  top: -2px; left: 0;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--bronce);
  opacity: 0;
}
/* Ráfaga corta al entrar; luego reposa. Vuelve al tocar o pasar el ratón. */
.revela.visible .fl-cable i { animation: flCorre 2.6s ease-in-out .6s 3; }
.ag-caso:hover .fl-cable i { animation: flCorre 2.2s ease-in-out infinite; }
@keyframes flCorre {
  0% { left: 0; opacity: 0; }
  20% { opacity: 1; }
  70% { opacity: 1; }
  90%, 100% { left: 100%; opacity: 0; }
}

/* En pantallas estrechas los tres carriles siguen ahí: solo se estrechan y el
   texto reparte en dos líneas. Alineados, se siguen leyendo en columna. */
@media (max-width: 620px) {
  .ag-flujo { grid-template-columns: minmax(0, 1fr) 16px minmax(0, 1fr) 16px minmax(0, 1fr); margin-top: 22px; }
  .ag-flujo-cab { margin-bottom: 22px; }
  .fl-cab { font-size: 8.5px; letter-spacing: 0.12em; }
  .fl-paso {
    font-size: 11px;
    line-height: 1.4;
    gap: 5px;
    padding: 9px 9px;
    letter-spacing: 0;
  }
  .fl-agente::before { width: 4px; height: 4px; }
  .fl-fin::before { width: 7px; height: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .fl-paso { opacity: 1; transform: none; }
  .fl-cable { transform: scaleX(1); background: var(--bronce); }
  .fl-cable i, .fl-agente::before { animation: none; }
}

.ag-casos-visual {
  position: sticky;
  top: 22vh;
}

/* ---------- Escribe, habla, actúa ---------- */
.ag-canales-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(30px, 4vw, 56px);
  margin-top: clamp(50px, 7vh, 76px);
}
@media (max-width: 900px) { .ag-canales-grid { grid-template-columns: 1fr; } }
.ag-canal { border-top: 1px solid rgba(244,241,236,.28); padding-top: 24px; }
.ag-canal-num {
  display: block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--acento);
}
.ag-canal h3 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.16;
  margin: 16px 0 14px;
  color: var(--hueso);
}
.ag-canal p { font-size: 14.5px; line-height: 1.75; color: rgba(244,241,236,.6); }

/* Conversación */
.ag-chat { margin-top: 26px; display: flex; flex-direction: column; gap: 8px; }
.ag-burbuja {
  font-size: 11.5px;
  line-height: 1.5;
  padding: 9px 12px;
  max-width: 88%;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .5s ease, transform .5s cubic-bezier(.2,.65,.2,1);
}
.ag-entra { background: #242424; border: 1px solid #333; color: rgba(244,241,236,.8); align-self: flex-start; }
/* El bronce apagado dejaba la burbuja en 4,37 de contraste con texto de
   11,5px. El terracota claro es más luminoso y sube a ~8:1 en los dos temas. */
.ag-sale { background: var(--terracota-claro); color: #1A1A1A; align-self: flex-end; }
.revela.visible .ag-burbuja { opacity: 1; transform: translateY(0); }
.revela.visible .ag-sale { transition-delay: .55s; }
.ag-tecleando { display: flex; gap: 4px; align-self: flex-start; padding: 4px 0; }
.ag-tecleando i {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: rgba(244,241,236,.4);
}
.revela.visible .ag-tecleando i { animation: agTecla 1.4s ease-in-out infinite; }
.revela.visible .ag-tecleando i:nth-child(2) { animation-delay: .18s; }
.revela.visible .ag-tecleando i:nth-child(3) { animation-delay: .36s; }
@keyframes agTecla { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }

/* Llamada */
.ag-voz {
  margin-top: 26px;
  background: #1f1f1f;
  border: 1px solid #2e2e2e;
  padding: 14px;
}
.ag-voz-cab { display: flex; align-items: center; gap: 8px; }
.ag-voz-punto {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--bronce);
}
.revela.visible .ag-voz-punto { animation: agLate 1.8s ease-in-out infinite; }
.ag-voz-eti {
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(244,241,236,.45);
}
.ag-voz-reloj {
  margin-left: auto;
  font-size: 11px;
  color: var(--hueso);
  font-variant-numeric: lining-nums tabular-nums;
}
.ag-onda {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 30px;
  margin: 14px 0 12px;
}
.ag-onda i {
  flex: 1;
  background: var(--bronce);
  height: 12%;
  opacity: .55;
}
.revela.visible .ag-onda i { animation: agOnda 1.1s ease-in-out infinite; }
@keyframes agOnda {
  0%, 100% { height: 12%; opacity: .4; }
  50% { height: 82%; opacity: 1; }
}
.ag-voz-texto {
  font-size: 12px !important;
  line-height: 1.5;
  color: rgba(244,241,236,.72) !important;
  font-style: italic;
}
.ag-voz-chip {
  display: inline-block;
  margin-top: 12px;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--acento);
  border: 1px solid var(--bronce);
  padding: 4px 9px;
  opacity: 0;
  transition: opacity .6s ease 1.2s;
}
.revela.visible .ag-voz-chip { opacity: 1; }

/* Acciones ejecutadas */
.ag-acciones { margin-top: 26px; display: flex; flex-direction: column; gap: 8px; }
.ag-accion {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11.5px;
  font-weight: 500;
  color: rgba(244,241,236,.75);
  border: 1px solid #2e2e2e;
  padding: 9px 12px;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity .5s ease, transform .5s cubic-bezier(.2,.65,.2,1), border-color .5s ease;
}
.ag-accion i {
  width: 6px; height: 6px;
  background: var(--bronce);
  flex: none;
}
.revela.visible .ag-accion { opacity: 1; transform: translateX(0); border-color: var(--bronce); }
.revela.visible .ag-accion:nth-child(2) { transition-delay: .22s; }
.revela.visible .ag-accion:nth-child(3) { transition-delay: .44s; }

/* ---------- Límites y relevo humano ----------
   La escena se fija y el texto avanza en tres tiempos al ritmo de los
   fotogramas. El alto del contenedor es el recorrido disponible. */
.ag-decide { position: relative; height: 320vh; margin-top: clamp(50px, 7vh, 86px); }
.ag-decide-fija {
  position: sticky;
  top: 0;
  height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.ag-decide-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
  gap: clamp(36px, 4vw, 64px);
  align-items: center;
  width: 100%;
}

/* Los tres textos comparten la misma fila: solo uno está en pie cada vez.
   La fila mide lo que el más alto, así que nada salta al cambiar. */
.ag-decide-textos { display: grid; grid-template-rows: auto auto; }
.ag-decide-paso {
  grid-row: 1;
  grid-column: 1;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .55s ease, transform .55s cubic-bezier(.2,.65,.2,1);
  pointer-events: none;
}
.ag-decide-paso.activo { opacity: 1; transform: none; pointer-events: auto; }
.ag-decide-eti {
  display: block;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--acento);
}
.ag-decide-paso h3 {
  font-family: var(--serif);
  font-size: clamp(26px, 3.2vw, 40px);
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: -0.015em;
  margin: 18px 0 20px;
  max-width: 15ch;
}
.ag-decide-paso p {
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.8;
  color: var(--gris-calido);
  max-width: 42ch;
}

/* Pista de tres tramos: dónde estás del recorrido */
.ag-decide-pista {
  grid-row: 2;
  grid-column: 1;
  display: grid;
  grid-template-columns: repeat(3, 34px);
  gap: 7px;
  margin-top: 42px;
}
.ag-decide-pista i {
  height: 2px;
  background: var(--arena);
  transition: background .45s ease;
}
.ag-decide-pista i.activo { background: var(--bronce); }

/* Sin marco ni panel: el dibujo se apoya en la sección como el resto de
   la página. El desajuste de fondo del fotograma se corrige en el lienzo
   (ver TINTE en agentes.js), no tapándolo con una caja. */
.ag-decide-visual { position: relative; margin: 0; }
.ag-decide-lienzo {
  display: block;
  width: 100%;
  height: auto;
  background: var(--hueso);
}
/* El esquema en CSS solo aparece cuando el lienzo no puede hacer su trabajo */
.ag-decide-visual .ag-bifurcacion { display: none; }

/* En móvil se fija la escena entera, igual que en escritorio: dibujo arriba
   y texto debajo, los dos quietos. Con el dibujo pegado y el texto pasando
   por detrás, cada línea se cortaba a media altura contra su borde. */
@media (max-width: 860px) {
  .ag-decide { height: 270vh; margin-top: 34px; }
  .ag-decide-grid {
    grid-template-columns: 1fr;
    gap: clamp(22px, 3.4vh, 34px);
  }
  .ag-decide-visual { order: -1; }
  .ag-decide-paso h3 { font-size: clamp(22px, 6.4vw, 27px); margin: 13px 0 13px; max-width: none; }
  .ag-decide-paso p { font-size: 15px; line-height: 1.75; max-width: none; }
  .ag-decide-pista { grid-template-columns: repeat(3, 30px); margin-top: 26px; }
}

/* Sin movimiento: se enseñan los tres textos y el esquema en CSS, sin lienzo */
@media (prefers-reduced-motion: reduce) {
  .ag-decide { height: auto; }
  .ag-decide-fija { position: static; height: auto; display: block; overflow: visible; }
  .ag-decide-textos { display: block; }
  .ag-decide-paso {
    opacity: 1;
    transform: none;
    pointer-events: auto;
    min-height: 0;
    display: block;
    padding: 0;
    border-top: 0;
  }
  .ag-decide-paso + .ag-decide-paso { margin-top: 30px; }
  .ag-decide-pista { display: none; }
  /* Sin lienzo que animar, manda el esquema en CSS */
  .ag-decide-lienzo { display: none; }
  .ag-decide-visual {
    position: static;
    background: none;
    border: 0;
    padding-bottom: 0;
    margin-top: 34px;
  }
  .ag-decide-visual .ag-bifurcacion { display: block; }
}

.ag-limites-cierre { margin-top: clamp(50px, 7vh, 84px); max-width: 62ch; }
.ag-bif-origen {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--grafito);
  color: var(--hueso);
  padding: 11px 15px;
  font-size: 12.5px;
  font-weight: 500;
}
.ag-bif-ramas { display: grid; gap: 26px; margin-top: 8px; }
.ag-rama { position: relative; padding-left: 26px; padding-top: 22px; }
.ag-rama-cable {
  position: absolute;
  left: 12px; top: 0;
  width: 1px; height: 100%;
  background: var(--arena);
}
.ag-rama-cable::after {
  content: "";
  position: absolute;
  left: 0; top: 34px;
  width: 14px; height: 1px;
  background: inherit;
}
.ag-rama-ok .ag-rama-cable { background: var(--bronce); }
.ag-rama-eti {
  display: block;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gris-calido);
  margin-bottom: 10px;
}
.ag-rama-ok .ag-rama-eti { color: var(--acento); }
.ag-rama-caja {
  display: inline-block;
  font-size: 13px;
  font-weight: 500;
  border: 1px solid var(--arena);
  background: var(--marfil);
  padding: 11px 15px;
}
.ag-rama-ok .ag-rama-caja { border-color: var(--bronce); }
.ag-rama-humana .ag-rama-caja { border-style: dashed; }

/* ---------- De dónde saca la información ---------- */
.ag-fuentes {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 36px;
}
.ag-fuente {
  font-size: 12px;
  font-weight: 500;
  padding: 9px 14px;
  border: 1px solid #333;
  color: rgba(244,241,236,.72);
  transition: border-color .4s ease, color .4s ease;
}
.revela.visible .ag-fuente { border-color: var(--bronce); color: var(--hueso); }
.revela.visible .ag-fuente:nth-child(2) { transition-delay: .07s; }
.revela.visible .ag-fuente:nth-child(3) { transition-delay: .14s; }
.revela.visible .ag-fuente:nth-child(4) { transition-delay: .21s; }
.revela.visible .ag-fuente:nth-child(5) { transition-delay: .28s; }
.revela.visible .ag-fuente:nth-child(6) { transition-delay: .35s; }

/* ---------- Cómo lo construimos ---------- */
.ag-montaje-linea {
  list-style: none;
  margin-top: clamp(44px, 6vh, 70px);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-top: 1px solid var(--grafito);
}
@media (max-width: 980px) { .ag-montaje-linea { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .ag-montaje-linea { grid-template-columns: 1fr; } }
.ag-hito {
  position: relative;
  padding: 30px 22px 0 0;
}
.ag-hito::before {
  content: "";
  position: absolute;
  top: -5px; left: 0;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--hueso);
  border: 1px solid var(--gris-calido);
  transition: background .5s ease, border-color .5s ease;
}
.revela.visible .ag-hito::before { background: var(--bronce); border-color: var(--bronce); }
.revela.visible .ag-hito:nth-child(2)::before { transition-delay: .14s; }
.revela.visible .ag-hito:nth-child(3)::before { transition-delay: .28s; }
.revela.visible .ag-hito:nth-child(4)::before { transition-delay: .42s; }
.revela.visible .ag-hito:nth-child(5)::before { transition-delay: .56s; }
.ag-hito-num {
  display: block;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  color: var(--acento);
  font-variant-numeric: lining-nums;
}
.ag-hito h3 { font-size: 15px; font-weight: 600; margin: 12px 0 10px; }
.ag-hito p { font-size: 13.5px; line-height: 1.7; color: var(--gris-calido); }
.ag-hito-fin h3 { color: var(--grafito); }
/* En rejillas de 2 columnas la línea superior del <ul> sólo cubre la primera
   fila: cada hito lleva la suya para que ningún punto quede huérfano. */
@media (max-width: 980px) {
  .ag-montaje-linea { border-top: 0; row-gap: 34px; }
  .ag-hito { border-top: 1px solid var(--grafito); }
}
/* En móvil el recorrido se lee mejor como línea vertical continua. */
@media (max-width: 560px) {
  .ag-montaje-linea { row-gap: 0; }
  .ag-hito {
    border-top: 0;
    padding: 0 0 30px 26px;
  }
  .ag-hito:last-child { padding-bottom: 0; }
  .ag-hito::before { top: 3px; left: 0; }
  .ag-hito::after {
    content: "";
    position: absolute;
    left: 4px; top: 16px; bottom: 0;
    width: 1px;
    background: var(--arena);
  }
  .ag-hito:last-child::after { display: none; }
  .ag-hito h3 { font-size: 16px; margin: 10px 0 8px; }
  .ag-hito p { font-size: 14px; }
}
.ag-enlace {
  color: var(--grafito);
  text-decoration: none;
  border-bottom: 1px solid var(--bronce);
  padding-bottom: 1px;
  transition: background .3s ease;
}
.ag-enlace:hover { background: rgba(138,126,107,.12); }

/* ---------- Preguntas frecuentes (componente compartido) ---------- */
.faq-lista { margin-top: 44px; border-top: 1px solid var(--grafito); }
.faq-item { border-bottom: 1px solid var(--arena); }
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 0;
  cursor: pointer;
  font-size: 16px;
  font-weight: 500;
  list-style: none;
  transition: color .3s ease;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--acento); }
.faq-item summary i {
  position: relative;
  flex: none;
  width: 12px; height: 12px;
}
.faq-item summary i::before,
.faq-item summary i::after {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 12px; height: 1px;
  background: var(--bronce);
  transition: transform .35s cubic-bezier(.2,.65,.2,1);
}
.faq-item summary i::after { transform: rotate(90deg); }
.faq-item[open] summary i::after { transform: rotate(0deg); }
.faq-item p {
  font-size: 15px;
  line-height: 1.8;
  color: var(--gris-calido);
  max-width: 68ch;
  padding: 0 0 26px;
}

/* ---------- Cierre: el hilo llega hasta el botón ---------- */
.ag-cierre { position: relative; }
.ag-hilo {
  display: block;
  width: 1px;
  height: 52px;
  margin: 0 auto 30px;
  background: rgba(244,241,236,.2);
  position: relative;
}
.ag-hilo i {
  position: absolute;
  left: -3.5px; bottom: -4px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--bronce);
}
.revela.visible .ag-hilo i { animation: agLate 2.6s ease-in-out infinite; }

/* ---------- Móvil: menos nodos, más lectura ---------- */
@media (max-width: 980px) {
  .ag-casos-grid { grid-template-columns: 1fr; }
  .ag-casos-visual { display: none; }
  .ag-caso { padding: 44px 0; }
  .ag-caso:first-child { padding-top: 0; }
  /* En su lugar, cada caso lleva su recorrido compacto */
  .ag-flujo { display: grid; }
  .ag-escena { min-height: 300px; }
}

/* ---------- Sin movimiento: todo comprensible en estático ---------- */
@media (prefers-reduced-motion: reduce) {
  .ag-escena.viva .ag-luz,
  .revela.visible .ag-onda i,
  .revela.visible .ag-tecleando i,
  .revela.visible .ag-voz-punto,
  .revela.visible .ag-hilo i { animation: none; }
  .ag-nodo.puesto { opacity: 1; transform: none; }
  .ag-burbuja { opacity: 1; transform: none; }
  .ag-accion { opacity: 1; transform: none; border-color: var(--bronce); }
  .ag-voz-chip { opacity: 1; }
  .ag-onda i { height: 45%; }
  .ag-casos-visual { position: static; }
}

/* ============================================================
   AUDITORÍA MÓVIL — la Home no es la versión de escritorio
   comprimida: las escenas largas se acortan, los spacers de
   storytelling desaparecen y el ritmo vertical se normaliza.
   Nada de esto toca escritorio.
   ============================================================ */
@media (max-width: 860px) {
  /* Ritmo vertical: un único sistema de espaciado para toda la Home */
  :root { --espacio-seccion: clamp(64px, 9vh, 96px); }

  /* --- Header: más contenido sin perder aire --- */
  .nav-inner { padding: 14px var(--pad-lateral); }
  .nav-logo { font-size: 21px; }
  .nav-burger { padding: 6px; }
  .nav-burger span { width: 22px; margin: 5px 0; }
  .nav.abierta .nav-burger span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .nav.abierta .nav-burger span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

  /* --- Hero: el titular no debe partirse a media palabra --- */
  .hero { padding-top: 92px; padding-bottom: 48px; }
  .hero h1 { font-size: 34px; max-width: none; }
  .hero .filete { margin: 20px 0; }
  .hero-acciones { gap: 12px; margin-top: 32px; }
  .hero-acciones .btn { width: 100%; text-align: center; }
  .scroll-hint { bottom: 20px; }

  /* --- Las bandas de transición eran casi una pantalla de vacío --- */
  .transicion-fondo { height: 20vh !important; }

  /* --- Escena caos → sistema: de 5,2 pantallas a menos de 3 --- */
  .escena { height: 300vh; }
  /* svh evita que la barra de Safari recorte la escena */
  .escena-fijada { height: 100svh; }
  .escena-titular { top: 13%; width: calc(100% - 2 * var(--pad-lateral)); }
  .escena-titular h2,
  .escena-titular .escena-h { font-size: 25px; }
  .escena-titular .eyebrow { margin-bottom: 12px; }
  /* MM más contenido y compartiendo centro con la columna de tarjetas:
     estaba anclado al 50% mientras la columna se centraba al 57% */
  .escena-mm { width: 118px; top: 57%; }
  .escena-claim { padding: 0 var(--pad-lateral); }
  .claim-grande { font-size: 40px; max-width: none; }
  .claim-firma .filete { margin: 30px auto 20px; }

  /* --- Ruta guiada: menos alto muerto alrededor --- */
  .ruta { padding-top: 10px; }
  .ruta-svg { width: min(80vw, 340px); margin-top: 30px; }
  .ruta-titulo { font-size: 25px; }

  /* --- Servicios: la lista era la sección más larga --- */
  .servicio-destacado { margin-top: 44px; padding-top: 44px; }
  .detalle-item.con-demo { padding: 26px 0; }
  .seccion-servicios .lista-detalle { margin-top: 40px !important; }

  /* --- Recorrido "Cómo trabajamos": misma inmersión, más corta ---
     Se recupera el pin y la profundidad, con un recorrido de 260vh
     en lugar de los 560vh de escritorio. */
  .recorrido { height: 260vh; }
  .recorrido-pin { position: sticky; top: 0; height: 100svh; overflow: hidden; padding: 0; }
  .recorrido-cabecera { position: absolute; top: 76px; padding-top: 0; }
  .recorrido-cabecera h2 { font-size: 30px; }
  .escenario { display: block; height: 54%; perspective-origin: 50% 56%; }
  .eje-fuga { top: 56%; height: 26%; }
  .mundo { top: 56%; }
  .estaciones {
    position: absolute;
    left: 0; right: 0;
    bottom: 17%;
    height: 236px;
    padding: 0;
    max-width: none;
  }
  .estacion {
    position: absolute;
    left: var(--pad-lateral);
    right: var(--pad-lateral);
    max-width: none;
    margin: 0;
    padding: 0;
    border-left: 0;
    text-align: center;
    opacity: 0;
  }
  .estacion::before { display: none; }
  .estacion h3 { font-size: 30px; margin: 14px 0 14px; }
  /* La caja del párrafo se limita a 34ch, pero sin márgenes automáticos se
     quedaba pegada a la izquierda: el texto salía centrado dentro de ella y
     descentrado respecto al título. */
  .estacion p {
    font-size: 14.5px;
    line-height: 1.7;
    max-width: 34ch;
    margin-left: auto;
    margin-right: auto;
  }
  .recorrido-riel { display: block; bottom: 6%; width: 60%; }
  .recorrido-claim { position: absolute; top: 30%; padding: 0 var(--pad-lateral); }
  .claim-frase { font-size: 27px; }
  .claim-eje { margin-bottom: 24px; }

  /* --- Prueba: caso, testimonios y cifras --- */
  .caso-bloque { margin-top: 44px; }
  .voz { margin-top: 64px; }
  .voces-menores { margin-top: 48px; gap: 30px; }
  .experiencia { margin-top: 64px; }
}

/* Cuadrícula 2×2 para las cifras: cuatro filas era una sección eterna */
@media (max-width: 640px) {
  .experiencia-grid {
    grid-template-columns: 1fr 1fr;
    gap: 0;
    margin-top: 28px;
  }
  .exp-dato {
    padding: 24px 16px 26px 0;
    border-bottom: 1px solid var(--arena);
  }
  /* Filete vertical fino entre columnas, sin cajas */
  .exp-dato:nth-child(odd) { border-right: 1px solid var(--arena); padding-right: 20px; }
  .exp-dato:nth-child(even) { padding-left: 20px; }
  .exp-dato:nth-child(even)::before { left: 20px; }
  .exp-dato:nth-child(n+3) { border-bottom: 0; padding-bottom: 0; }
  .exp-num { font-size: 42px; }
  .exp-eti { font-size: 10px; margin-top: 10px; letter-spacing: 0.12em; }
}

/* Tarjetas del caos: más compactas para que quepan y no se corten */
@media (max-width: 700px) {
  .proceso-chip { font-size: 10.5px; padding: 8px 11px; }
}

/* ============================================================
   SIN MOVIMIENTO — va al final a propósito: los bloques móviles
   anteriores reactivan pin y alturas de storytelling, y aquí hay
   que volver a aplanarlos para quien pide reducir animaciones.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .escena, .recorrido { height: auto !important; }
  .escena-fijada, .recorrido-pin {
    position: static !important;
    height: auto !important;
    overflow: visible !important;
  }
  .escenario, .recorrido-riel, .escena-lineas { display: none !important; }
  .recorrido-cabecera, .estaciones, .recorrido-claim, .escena-titular {
    position: static !important;
  }
  .estaciones { height: auto !important; padding: 40px var(--pad-lateral) 0 !important; }
  .estacion {
    position: relative !important;
    opacity: 1 !important;
    transform: none !important;
    margin: 0 auto 34px !important;
    max-width: 620px;
  }
  .recorrido-claim { padding: 60px var(--pad-lateral) !important; }
  .scroll-hint::after { animation: none; transform: scaleY(1); }
}

/* ---------- Secuencia del agente a scroll (agentes-ia) ---------- */
.ag-dif-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(36px, 5vw, 76px);
  align-items: center;
}
@media (max-width: 900px) { .ag-dif-grid { grid-template-columns: 1fr; } }
.ag-secuencia { margin: 0; }
.ag-lienzo {
  display: block;
  width: 100%;
  height: auto;
  /* Mientras no hay fotograma dibujado, el hueco no debe cantar */
  background: var(--hueso);
  /* El fondo del render no es exactamente el hueso: difuminamos los
     bordes para que no se lea como una foto pegada */
  -webkit-mask-image: radial-gradient(ellipse 72% 68% at 50% 50%, #000 55%, transparent 96%);
  mask-image: radial-gradient(ellipse 72% 68% at 50% 50%, #000 55%, transparent 96%);
}
.ag-secuencia figcaption {
  margin-top: 16px;
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--gris-calido);
  max-width: 46ch;
}

/* =====================================================================
   WEBS Y LANDING PAGES (desarrollo-web.html)
   ===================================================================== */

/* ---------- Hero: una página montándose sola ---------- */
.web-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  gap: clamp(40px, 5vw, 80px);
  align-items: center;
}
/* Al partir el hero en dos, el H1 de página completa ya no cabe en tres
   versos: se ajusta al ancho de su columna en vez de romperse solo. */
.web-hero .cabecera-pagina h1,
.web-hero-texto h1 { font-size: clamp(31px, 3.5vw, 47px); max-width: none; }
.web-hero-texto .subtitulo { max-width: 46ch; }
.web-marco {
  position: relative;
  border: 1px solid var(--arena);
  background: var(--marfil);
  box-shadow: 0 24px 60px -34px rgba(26,26,26,.30);
}
.wm-barra {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 13px;
  border-bottom: 1px solid var(--arena);
  background: var(--hueso);
}
.wm-punto { width: 7px; height: 7px; border-radius: 50%; background: var(--arena); flex: none; }
.wm-url {
  margin-left: 12px;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--gris-calido);
}
.wm-lienzo {
  position: relative;
  height: clamp(300px, 40vh, 400px);
  padding: 22px;
  overflow: hidden;
}
/* La retícula asoma primero y se retira: se ve que hay un plano detrás */
.wm-reticula {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, var(--arena) 1px, transparent 1px),
    linear-gradient(to bottom, var(--arena) 1px, transparent 1px);
  background-size: 40px 40px;
  opacity: 0;
  transition: opacity .8s ease;
}
.web-marco.montando .wm-reticula { opacity: .5; }
.web-marco.lista .wm-reticula { opacity: .12; }

.wm-pieza {
  position: absolute;
  opacity: 0;
  transform: translateY(9px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.2,.65,.2,1);
}
.web-marco[data-fase-activa] .wm-pieza.puesta { opacity: 1; transform: none; }

.wm-marca { top: 22px; left: 22px; width: 46px; height: 9px; background: var(--grafito); }
.wm-menu { top: 22px; right: 22px; display: flex; gap: 9px; }
.wm-menu i { width: 26px; height: 5px; background: var(--arena); }
.wm-titular { top: 68px; left: 22px; right: 40%; display: grid; gap: 9px; }
.wm-titular i { height: 15px; background: var(--grafito); }
.wm-titular i:last-child { width: 62%; }
.wm-parrafo { top: 122px; left: 22px; right: 46%; display: grid; gap: 7px; }
.wm-parrafo i { height: 6px; background: var(--arena); }
.wm-parrafo i:last-child { width: 54%; }
.wm-cta {
  top: 170px; left: 22px;
  padding: 9px 15px;
  font-size: 11px;
  font-weight: 500;
  color: var(--hueso);
  background: var(--grafito);
}
.wm-foto {
  top: 68px; right: 22px;
  width: 34%; height: 128px;
  background: linear-gradient(150deg, var(--arena), var(--hueso));
  border: 1px solid var(--arena);
}
.wm-ficha {
  bottom: 22px;
  width: calc((100% - 44px - 20px) / 3);
  height: 62px;
  border: 1px solid var(--arena);
  background: var(--hueso);
  padding: 11px;
  display: grid;
  align-content: start;
  gap: 7px;
}
.wm-ficha i { height: 5px; background: var(--arena); }
.wm-ficha i:first-child { width: 58%; background: var(--bronce); }
.wm-f1 { left: 22px; }
.wm-f2 { left: 50%; transform: translateX(-50%) translateY(9px); }
.web-marco[data-fase-activa] .wm-f2.puesta { transform: translateX(-50%); }
.wm-f3 { right: 22px; }
.wm-estado {
  position: absolute;
  bottom: -30px; left: 0;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--acento);
  transition: opacity .4s ease;
}

@media (max-width: 900px) {
  .web-hero-grid { grid-template-columns: 1fr; gap: 46px; }
  .wm-lienzo { height: 290px; }
}

/* ---------- Los 30 segundos: manda el veredicto, no la maqueta ----------
   Las miniaturas grises no decían nada y en móvil se veían peor: la frase
   que saca el visitante es más elocuente que cualquier wireframe. */
.wj-fila {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1px, 0.2vw, 1px);
  margin-top: clamp(48px, 7vh, 78px);
  background: var(--arena);
  border: 1px solid var(--arena);
}
.wj-caso {
  display: flex;
  flex-direction: column;
  padding: clamp(28px, 3.2vw, 44px);
  background: var(--hueso);
}
.wj-buena { background: var(--marfil); }
.wj-num {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  color: var(--acento);
  font-variant-numeric: lining-nums;
}
.wj-frase {
  font-family: var(--serif);
  font-size: clamp(23px, 2.6vw, 32px);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.018em;
  margin-top: 18px;
  color: var(--gris-calido);
  transition: color .6s ease;
}
/* La tercera es la conclusión que se busca: va a plena tinta */
.wj-buena .wj-frase { color: var(--grafito); }
.wj-eti {
  display: block;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--arena);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--acento);
}
.wj-apoyo {
  margin-top: 12px;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--gris-calido);
}
@media (max-width: 820px) {
  .wj-fila { grid-template-columns: 1fr; }
  .wj-frase { font-size: 24px; margin-top: 14px; }
  .wj-eti { margin-top: 18px; padding-top: 14px; }
}

/* ---------- Los dos lectores ---------- */
.wl-panel {
  position: relative;
  margin-top: clamp(44px, 6vh, 70px);
  /* Alto pensado para la cara del buscador, que es la que más texto lleva */
  height: clamp(400px, 54vh, 486px);
  border: 1px solid var(--arena);
  overflow: hidden;
  cursor: ew-resize;
  --corte: 52%;
}
.wl-cara { position: absolute; inset: 0; padding: clamp(26px, 3.6vw, 46px); }
.wl-humano { background: var(--marfil); }
/* La cara del buscador se recorta por la izquierda según el tirador. Su
   contenido vive en la mitad derecha: si se maquetara desde el margen
   izquierdo quedaría siempre debajo del recorte y no se leería nada. */
.wl-motor {
  background: var(--grafito);
  color: var(--hueso);
  clip-path: inset(0 0 0 var(--corte));
  padding-left: 54%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.wl-cara-eti {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--acento);
}
.wl-h1 {
  font-family: var(--serif);
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin-top: 22px;
}
.wl-p {
  margin-top: 18px;
  max-width: 34ch;
  font-size: 15px;
  line-height: 1.75;
  color: var(--gris-calido);
}
.wl-boton {
  display: inline-block;
  margin-top: 26px;
  padding: 12px 20px;
  font-size: 13px;
  font-weight: 500;
  color: var(--hueso);
  background: var(--grafito);
}
.wl-foto {
  position: absolute;
  right: clamp(26px, 3.6vw, 46px);
  bottom: clamp(26px, 3.6vw, 46px);
  width: 30%; height: 46%;
  background: linear-gradient(150deg, var(--arena), var(--hueso));
  border: 1px solid var(--arena);
}
.wl-cod {
  display: block;
  margin-top: 13px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: clamp(11px, 1.05vw, 13px);
  line-height: 1.6;
  color: rgba(244,241,236,.72);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wl-cod:first-of-type { margin-top: 26px; }
.wl-cod b { color: var(--acento); font-weight: 500; }
.wl-cod-schema { color: rgba(244,241,236,.5); }
.wl-nota {
  margin-top: 26px;
  font-size: 12.5px;
  line-height: 1.6;
  color: rgba(244,241,236,.5);
  max-width: 32ch;
}
.wl-tirador {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--corte);
  width: 1px;
  background: var(--bronce);
  z-index: 3;
}
.wl-tirador i {
  position: absolute;
  top: 50%; left: 50%;
  width: 34px; height: 34px;
  margin: -17px 0 0 -17px;
  border: 1px solid var(--bronce);
  border-radius: 50%;
  background: var(--marfil);
}
.wl-tirador i::before,
.wl-tirador i::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 5px; height: 5px;
  border-top: 1.5px solid var(--bronce);
  border-right: 1.5px solid var(--bronce);
  margin-top: -3px;
}
.wl-tirador i::before { left: 8px; transform: rotate(-135deg); }
.wl-tirador i::after { right: 8px; transform: rotate(45deg); }
.wl-pie {
  margin-top: 18px;
  font-size: 12.5px;
  color: var(--gris-calido);
}
/* En móvil el corte lateral deja 180px por cara: ilegible para código.
   Las dos lecturas pasan a apilarse y el tirador desaparece. */
@media (max-width: 720px) {
  .wl-panel { height: auto; cursor: default; }
  .wl-cara { position: static; }
  .wl-humano { padding-bottom: 34px; }
  .wl-motor {
    clip-path: none;
    padding-left: clamp(26px, 3.6vw, 46px);
    padding-top: 30px;
    padding-bottom: 34px;
  }
  .wl-foto { display: none; }
  .wl-p { max-width: none; }
  .wl-nota { max-width: none; }
  .wl-cod {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    font-size: 11.5px;
    word-break: break-word;
  }
  .wl-cod:first-of-type { margin-top: 18px; }
  .wl-tirador { display: none; }
  .wl-pie { display: none; }
}

/* ---------- Web o landing ---------- */
.wc-par {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(22px, 3vw, 44px);
  margin-top: clamp(46px, 6.5vh, 74px);
}
.wc-opcion {
  padding: clamp(28px, 3.4vw, 44px);
  border: 1px solid var(--arena);
  background: var(--marfil);
  display: flex;
  flex-direction: column;
}
.wc-destacada { border-color: var(--grafito); }
.wc-tipo {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--acento);
}
.wc-opcion h3 {
  font-family: var(--serif);
  font-size: clamp(22px, 2.4vw, 29px);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin: 16px 0 16px;
}
.wc-opcion > p { font-size: 15px; line-height: 1.8; color: var(--gris-calido); }
.wc-lista { list-style: none; margin: 24px 0 0; }
.wc-lista li {
  position: relative;
  padding-left: 20px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--gris-calido);
}
.wc-lista li + li { margin-top: 9px; }
.wc-lista li::before {
  content: "";
  position: absolute;
  left: 0; top: 10px;
  width: 9px; height: 1px;
  background: var(--bronce);
}
/* Mapa de una web: una raíz que se abre */
.wc-mapa { margin-top: auto; padding-top: 34px; text-align: center; }
.wc-raiz {
  display: inline-block;
  padding: 8px 14px;
  font-size: 11px;
  font-weight: 500;
  color: var(--hueso);
  background: var(--grafito);
}
.wc-rama { display: block; width: 1px; height: 22px; margin: 0 auto; background: var(--arena); }
.wc-hijos { display: flex; gap: 7px; justify-content: center; flex-wrap: wrap; }
.wc-hijos i {
  font-style: normal;
  padding: 7px 11px;
  font-size: 10.5px;
  border: 1px solid var(--arena);
  background: var(--hueso);
  color: var(--gris-calido);
}
/* Embudo de una landing: todo estrecha hacia el mismo sitio */
.wc-embudo { margin-top: auto; padding-top: 34px; display: grid; gap: 6px; justify-items: center; }
.wc-nivel {
  padding: 7px 0;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-align: center;
  color: var(--gris-calido);
  border: 1px solid var(--arena);
  background: var(--hueso);
}
.wc-embudo .wc-nivel:nth-child(1) { width: 100%; }
.wc-embudo .wc-nivel:nth-child(2) { width: 78%; }
.wc-embudo .wc-nivel:nth-child(3) { width: 56%; }
.wc-fin {
  width: 38%;
  color: var(--hueso);
  background: var(--grafito);
  border-color: var(--grafito);
}
@media (max-width: 820px) { .wc-par { grid-template-columns: 1fr; } }

/* ---------- La prueba: métricas medidas en vivo ---------- */
.wp-panel {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin-top: clamp(44px, 6vh, 70px);
  background: rgba(244,241,236,.16);
  border: 1px solid rgba(244,241,236,.16);
}
.wp-dato { padding: clamp(24px, 2.6vw, 34px); background: var(--grafito); }
.wp-cifra {
  display: block;
  font-family: var(--serif);
  font-size: clamp(30px, 4vw, 48px);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--hueso);
  font-variant-numeric: lining-nums tabular-nums;
}
.wp-eti {
  display: block;
  margin-top: 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--hueso);
}
.wp-ayuda {
  display: block;
  margin-top: 9px;
  font-size: 12px;
  line-height: 1.65;
  color: rgba(244,241,236,.5);
}
.wp-sello {
  grid-column: 1 / -1;
  padding: 15px clamp(24px, 2.6vw, 34px);
  background: var(--grafito);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--acento);
}
@media (max-width: 900px) { .wp-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .wp-panel { grid-template-columns: 1fr; } }

/* ---------- Proceso ---------- */
.wpr-linea {
  list-style: none;
  margin-top: clamp(44px, 6vh, 70px);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-top: 1px solid var(--grafito);
}
.wpr-hito { position: relative; padding: 30px 22px 0 0; }
.wpr-hito::before {
  content: "";
  position: absolute;
  top: -5px; left: 0;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--hueso);
  border: 1px solid var(--gris-calido);
  transition: background .5s ease, border-color .5s ease;
}
.revela.visible .wpr-hito::before { background: var(--bronce); border-color: var(--bronce); }
.revela.visible .wpr-hito:nth-child(2)::before { transition-delay: .14s; }
.revela.visible .wpr-hito:nth-child(3)::before { transition-delay: .28s; }
.revela.visible .wpr-hito:nth-child(4)::before { transition-delay: .42s; }
.revela.visible .wpr-hito:nth-child(5)::before { transition-delay: .56s; }
.wpr-num {
  display: block;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  color: var(--acento);
  font-variant-numeric: lining-nums;
}
.wpr-hito h3 { font-size: 15px; font-weight: 600; margin: 12px 0 10px; }
.wpr-hito p { font-size: 13.5px; line-height: 1.7; color: var(--gris-calido); }
.wpr-fin h3 { color: var(--grafito); }
/* Igual que en agentes: en 2 columnas cada hito lleva su propia línea */
@media (max-width: 980px) {
  .wpr-linea { grid-template-columns: repeat(2, 1fr); border-top: 0; row-gap: 34px; }
  .wpr-hito { border-top: 1px solid var(--grafito); }
}
@media (max-width: 560px) {
  .wpr-linea { grid-template-columns: 1fr; row-gap: 0; }
  .wpr-hito { border-top: 0; padding: 0 0 30px 26px; }
  .wpr-hito:last-child { padding-bottom: 0; }
  .wpr-hito::before { top: 3px; left: 0; }
  .wpr-hito::after {
    content: "";
    position: absolute;
    left: 4px; top: 16px; bottom: 0;
    width: 1px;
    background: var(--arena);
  }
  .wpr-hito:last-child::after { display: none; }
  .wpr-hito h3 { font-size: 16px; margin: 10px 0 8px; }
  .wpr-hito p { font-size: 14px; }
}

/* ---------- Sin movimiento: todo legible en estático ---------- */
@media (prefers-reduced-motion: reduce) {
  .wm-pieza { opacity: 1; transform: none; }
  .web-marco[data-fase-activa] .wm-f2.puesta,
  .wm-f2 { transform: translateX(-50%); }
  .wm-reticula { opacity: .12; }
  .wm-estado { display: none; }
  .wpr-hito::before { transition: none; }
}

/* ---------- Lo que cuesta ---------- */
.wpc-panel {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  margin-top: clamp(44px, 6vh, 70px);
  border: 1px solid var(--grafito);
}
.wpc-cara {
  padding: clamp(30px, 3.6vw, 50px);
  background: var(--grafito);
  color: var(--hueso);
}
.wpc-eti {
  display: block;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--acento);
}
.wpc-cifra {
  font-family: var(--serif);
  font-size: clamp(48px, 6.5vw, 82px);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.03em;
  margin-top: 14px;
  font-variant-numeric: lining-nums;
}
.wpc-cifra span {
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0;
  color: rgba(244,241,236,.6);
}
.wpc-nota { margin-top: 12px; font-size: 13.5px; color: rgba(244,241,236,.6); }
.wpc-despues {
  display: flex;
  gap: 16px;
  margin-top: clamp(30px, 4vh, 46px);
  padding-top: clamp(26px, 3.4vh, 38px);
  border-top: 1px solid rgba(244,241,236,.18);
}
.wpc-flecha {
  flex: none;
  width: 11px; height: 11px;
  margin-top: 5px;
  border-right: 1.5px solid var(--bronce);
  border-bottom: 1.5px solid var(--bronce);
  transform: rotate(45deg);
}
.wpc-menor { font-size: clamp(30px, 3.6vw, 44px); }
.wpc-incluye { padding: clamp(30px, 3.6vw, 50px); background: var(--marfil); }
.wpc-incluye ul { list-style: none; margin: 22px 0 0; }
.wpc-incluye li {
  position: relative;
  padding-left: 25px;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--grafito);
}
.wpc-incluye li + li { margin-top: 13px; }
/* Un visto dibujado con bordes: no depende de ninguna fuente de iconos */
.wpc-incluye li::before {
  content: "";
  position: absolute;
  left: 0; top: 7px;
  width: 10px; height: 6px;
  border-left: 1.5px solid var(--bronce);
  border-bottom: 1.5px solid var(--bronce);
  transform: rotate(-45deg);
}
.wpc-cierre {
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--arena);
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--gris-calido);
}
.wpc-plazo {
  display: flex;
  align-items: baseline;
  gap: clamp(20px, 3vw, 40px);
  margin-top: clamp(34px, 4.5vh, 52px);
  padding-top: clamp(26px, 3.4vh, 38px);
  border-top: 1px solid var(--arena);
}
.wpc-plazo-num {
  flex: none;
  font-family: var(--serif);
  font-size: clamp(38px, 5vw, 62px);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--acento);
  font-variant-numeric: lining-nums;
}
.wpc-plazo p {
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.75;
  color: var(--gris-calido);
  max-width: 46ch;
}
@media (max-width: 820px) {
  .wpc-panel { grid-template-columns: 1fr; }
  .wpc-plazo { flex-direction: column; align-items: flex-start; gap: 14px; }
}

/* ---------- Lo que lee Google: en cristiano, no en etiquetas ---------- */
.wl-dato {
  display: block;
  margin-top: 17px;
  font-size: clamp(12.5px, 1.15vw, 14px);
  line-height: 1.55;
  color: rgba(244,241,236,.78);
  max-width: 34ch;
}
.wl-dato:first-of-type { margin-top: 24px; }
.wl-dato b {
  display: block;
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--acento);
  margin-bottom: 5px;
}
@media (max-width: 720px) {
  .wl-dato { max-width: none; }
  .wl-dato:first-of-type { margin-top: 18px; }
}

/* ---------- Dónde está el límite ---------- */
.wpc-limite {
  margin-top: clamp(28px, 3.6vh, 42px);
  padding: clamp(24px, 3vw, 36px);
  border: 1px dashed var(--arena);
  background: var(--hueso);
}
.wpc-limite .wpc-eti { color: var(--gris-calido); }
.wpc-limite-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 44px);
  margin-top: 18px;
}
.wpc-limite-cols p {
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--gris-calido);
}
.wpc-limite-cols b { display: block; color: var(--grafito); font-weight: 600; margin-bottom: 5px; }
@media (max-width: 720px) { .wpc-limite-cols { grid-template-columns: 1fr; gap: 22px; } }

/* ---------- La web completa, aparte ---------- */
.wcp-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
  gap: clamp(40px, 5vw, 78px);
  align-items: center;
}
.wcp-tabla { border-top: 1px solid var(--grafito); }
.wcp-fila {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  padding: 15px 0;
  border-bottom: 1px solid var(--arena);
  font-size: 13.5px;
  color: var(--gris-calido);
  align-items: baseline;
}
.wcp-fila b { color: var(--grafito); font-weight: 600; }
.wcp-cab {
  padding-top: 13px;
  align-items: start;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--acento);
}
.wcp-cab i {
  display: block;
  margin-top: 6px;
  font-style: normal;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--gris-calido);
}
/* Las dos columnas pesan lo mismo: en cuanto una se marca más que la otra,
   la comparación deja de leerse como dos caminos y pasa a leerse como
   versión buena contra versión recortada. */
.wcp-fila > span:nth-child(2),
.wcp-fila > span:nth-child(3) { color: var(--grafito); }
@media (max-width: 900px) { .wcp-grid { grid-template-columns: 1fr; gap: 44px; } }
@media (max-width: 560px) {
  .wcp-fila { grid-template-columns: 1fr; gap: 4px; padding: 16px 0; }
  .wcp-cab { display: none; }
  .wcp-fila > span:first-child {
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--acento);
    margin-bottom: 3px;
  }
  /* Sin cabecera visible, cada dato dice a qué producto pertenece */
  .wcp-fila > span:nth-child(2)::before { content: "Una página · "; color: var(--gris-calido); }
  .wcp-fila > span:nth-child(3)::before { content: "Proyecto completo · "; color: var(--gris-calido); }
}

/* ---------- Las tres opciones ---------- */
.wpl-planes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 22px);
  margin-top: clamp(40px, 5.5vh, 64px);
  align-items: start;
}
.wpl-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(26px, 2.8vw, 38px);
  border: 1px solid var(--arena);
  background: var(--marfil);
}
/* La recomendada se separa por color y peso, no por tamaño: si crece,
   las otras dos se leen como descartadas. */
.wpl-destacado {
  background: var(--grafito);
  border-color: var(--grafito);
  color: var(--hueso);
}
.wpl-cinta {
  position: absolute;
  top: -1px; right: -1px;
  padding: 7px 13px;
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--grafito);
  background: var(--bronce);
}
.wpl-nombre {
  font-family: var(--serif);
  font-size: clamp(21px, 2.2vw, 27px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.015em;
}
/* Solo la recomendada lleva cinta: reservarle hueco a las otras tres
   partía sus títulos en dos líneas y descuadraba los precios. */
.wpl-destacado .wpl-nombre { padding-right: 102px; }
.wpl-destacado .wpl-nombre { color: var(--hueso); }
.wpl-marca {
  display: inline-block;
  vertical-align: middle;
  margin-left: 6px;
  padding: 4px 9px;
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--grafito);
  background: var(--bronce);
}
.wpl-para {
  margin-top: 10px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--gris-calido);
  min-height: 2.6em;
}
.wpl-destacado .wpl-para { color: rgba(244,241,236,.66); }
.wpl-precio {
  margin-top: clamp(20px, 2.6vh, 30px);
  font-family: var(--serif);
  font-size: clamp(38px, 4.4vw, 56px);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: lining-nums;
}
.wpl-precio span {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--gris-calido);
}
.wpl-destacado .wpl-precio span { color: rgba(244,241,236,.6); }
/* «A presupuesto» no es una cifra: baja de cuerpo para no fingir que lo es */
.wpl-precio-texto { font-size: clamp(26px, 2.8vw, 34px); }
.wpl-plazo {
  margin-top: 12px;
  padding-bottom: clamp(20px, 2.6vh, 28px);
  border-bottom: 1px solid var(--arena);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--gris-calido);
}
.wpl-destacado .wpl-plazo {
  border-bottom-color: rgba(244,241,236,.2);
  color: rgba(244,241,236,.66);
}
.wpl-btn { margin-top: clamp(20px, 2.6vh, 28px); width: 100%; text-align: center; }
.wpl-lista { list-style: none; margin: clamp(22px, 2.8vh, 30px) 0 0; }
.wpl-lista li {
  position: relative;
  padding-left: 24px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--grafito);
}
.wpl-lista li + li { margin-top: 12px; }
.wpl-destacado .wpl-lista li { color: rgba(244,241,236,.86); }
.wpl-lista li::before {
  content: "";
  position: absolute;
  left: 0; top: 6px;
  width: 10px; height: 6px;
  border-left: 1.5px solid var(--bronce);
  border-bottom: 1.5px solid var(--bronce);
  transform: rotate(-45deg);
}
@media (min-width: 901px) {
  /* Con las tres en fila, los precios tienen que caer a la misma altura
     aunque un nombre ocupe dos líneas */
  .wpl-nombre { min-height: 2.3em; }
}
@media (max-width: 900px) {
  .wpl-planes { grid-template-columns: 1fr; gap: 16px; }
  .wpl-para { min-height: 0; }
}

/* =====================================================================
   ACENTO CÁLIDO — en toda la web
   El bronce de marca (#8A7E6B) es un gris tostado: vale para filetes y
   puntos, pero como texto no tiene voz. Estos dos son el mismo tono
   saturado, así que dan color sin abrir una familia cromática nueva.
   --acento se hereda: dentro de cualquier fondo grafito pasa solo a la
   versión clara, sin tener que duplicar una regla por sección.
   Contraste comprobado: 5,0:1 sobre hueso · 6,4:1 sobre grafito.
   ===================================================================== */
:root {
  --terracota: #9C5626;
  --terracota-claro: #D98B4A;
  --arena-calida: #F6EDE4;
  --acento: var(--terracota);
}
.seccion-oscura,
.pie,
.escena-claim,
.ag-nucleo,
.wpc-cara,
.wpl-destacado { --acento: var(--terracota-claro); }

/* Marcas y fondos que antes iban en bronce apagado */
.wpl-cinta { background: var(--terracota); color: var(--sobre-acento); }
.wpl-marca { background: var(--terracota); color: var(--sobre-acento); }
.wpl-lista li::before { border-color: var(--acento); }
.wpc-flecha { border-color: var(--acento); }
.wc-lista li::before { background: var(--acento); }
.wpc-incluye li::before { border-color: var(--acento); }
.revela.visible .wpr-hito::before { background: var(--terracota); border-color: var(--terracota); }

/* Las preguntas, en todas las páginas */
.faq-item summary i::before,
.faq-item summary i::after { background: var(--acento); }

/* La sección de precio se despega del resto por fondo, no por adornos */
.web-precio { background: var(--arena-calida); }
.web-precio .wpl-plan { border-color: #E6D6C6; }
.web-precio .wpc-limite { border-color: #E0CDB9; background: transparent; }

/* El botón de la recomendada es el único punto de color pleno: está
   justo donde se toma la decisión */
.wpl-destacado .wpl-btn {
  background: var(--terracota-claro);
  border-color: var(--terracota-claro);
  color: var(--grafito);
}
.wpl-destacado .wpl-btn:hover { background: #E39A5C; border-color: #E39A5C; }

/* ---------- Las tarjetas de precio, al pasar el ratón ----------
   Acotado a puntero real: en táctil no hay hover y el atenuado de las
   hermanas dejaría tarjetas apagadas sin que nadie pueda encenderlas. */
@media (hover: hover) and (pointer: fine) {
  .wpl-plan {
    transition: transform .45s cubic-bezier(.2,.65,.2,1),
                box-shadow .45s ease,
                border-color .4s ease,
                opacity .38s ease;
  }
  /* Una línea que se traza por el borde superior de la que miras */
  .wpl-plan::after {
    content: "";
    position: absolute;
    top: -1px; left: -1px; right: -1px;
    height: 2px;
    background: var(--terracota);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .55s cubic-bezier(.2,.65,.2,1);
  }
  .wpl-destacado::after { background: var(--terracota-claro); }
  .wpl-plan:hover::after { transform: scaleX(1); }

  /* Al posar el ratón en una, las otras se retiran: la comparación deja
     de ser un muro de datos y se mira de una en una. */
  .wpl-planes:hover .wpl-plan { opacity: .42; }
  .wpl-planes .wpl-plan:hover {
    opacity: 1;
    transform: translateY(-7px);
    border-color: var(--terracota);
    box-shadow: 0 28px 56px -30px rgba(26,26,26,.34);
  }
  .wpl-planes .wpl-destacado:hover {
    border-color: var(--terracota-claro);
    box-shadow: 0 32px 64px -28px rgba(26,26,26,.6);
  }

  /* El botón se rellena al acercarse a la tarjeta, no solo a él */
  .wpl-plan:hover .wpl-btn.btn-secundario {
    background: var(--grafito);
    border-color: var(--grafito);
    color: var(--hueso);
  }
  .wpl-destacado:hover .wpl-btn { background: #E39A5C; border-color: #E39A5C; }

  /* Los puntos de la lista entran en cascada, como si se repasaran */
  .wpl-lista li { transition: transform .42s cubic-bezier(.2,.65,.2,1); }
  .wpl-plan:hover .wpl-lista li { transform: translateX(4px); }
  .wpl-plan:hover .wpl-lista li:nth-child(2) { transition-delay: .05s; }
  .wpl-plan:hover .wpl-lista li:nth-child(3) { transition-delay: .10s; }
  .wpl-plan:hover .wpl-lista li:nth-child(4) { transition-delay: .15s; }
  .wpl-plan:hover .wpl-lista li:nth-child(5) { transition-delay: .20s; }
  .wpl-plan:hover .wpl-lista li:nth-child(6) { transition-delay: .25s; }

  /* La cinta de la recomendada acompaña el gesto */
  .wpl-cinta { transition: transform .45s cubic-bezier(.2,.65,.2,1); }
  .wpl-destacado:hover .wpl-cinta { transform: translateY(-2px); }
}

/* Sin movimiento: se mantiene el cambio de color, se quita el desplazamiento */
@media (prefers-reduced-motion: reduce) {
  .wpl-plan,
  .wpl-plan::after,
  .wpl-lista li,
  .wpl-cinta { transition: none; }
  .wpl-planes .wpl-plan:hover { transform: none; }
  .wpl-plan:hover .wpl-lista li { transform: none; }
  .wpl-plan:hover::after { transform: scaleX(1); }
}

/* ---------- Los servicios del Home, al pasar el ratón ----------
   Mismo gesto que en las tarjetas de precio, adaptado a filas: al mirar
   una, las demás se retiran. Ya tenían fondo y demo animada; lo que
   faltaba era el foco y la línea que marca cuál estás señalando. */
@media (hover: hover) and (pointer: fine) {
  .detalle-enlace {
    position: relative;
    transition: background .3s ease,
                padding-left .35s cubic-bezier(.6,0,.2,1),
                opacity .38s ease;
  }
  .lista-detalle:hover .detalle-enlace { opacity: .42; }
  .lista-detalle .detalle-enlace:hover { opacity: 1; }

  /* La línea se traza sobre el filete que ya cierra cada fila */
  .detalle-enlace::before {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 2px;
    background: var(--terracota);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .55s cubic-bezier(.2,.65,.2,1);
  }
  .detalle-enlace:hover::before { transform: scaleX(1); }

  /* El bloque destacado de webs no tiene hermanas que atenuar: se levanta */
  .servicio-destacado {
    position: relative;
    transition: transform .45s cubic-bezier(.2,.65,.2,1);
  }
  .servicio-destacado::before {
    content: "";
    position: absolute;
    top: -1px; left: 0; right: 0;
    height: 2px;
    background: var(--terracota);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .55s cubic-bezier(.2,.65,.2,1);
  }
  .servicio-destacado:hover::before { transform: scaleX(1); }
  .servicio-destacado:hover .btn-secundario {
    background: var(--grafito);
    border-color: var(--grafito);
    color: var(--hueso);
  }
}

@media (prefers-reduced-motion: reduce) {
  .detalle-enlace,
  .detalle-enlace::before,
  .servicio-destacado,
  .servicio-destacado::before { transition: none; }
  .detalle-enlace:hover::before,
  .servicio-destacado:hover::before { transform: scaleX(1); }
}

/* =====================================================================
   LA RED (automatizacion.html)
   Nodos en HTML, cables en SVG trazados desde sus posiciones reales.
   Sin logos de terceros: los nombres son genéricos porque cada cliente
   usa herramientas distintas, y así no sugerimos alianzas que no hay.
   ===================================================================== */
.auto-red { overflow: hidden; }
.ar-lienzo {
  position: relative;
  margin-top: clamp(44px, 6vh, 72px);
  height: clamp(300px, 44vh, 420px);
  /* La retícula de puntos: da el aire de lienzo de trabajo */
  background-image: radial-gradient(rgba(244,241,236,.13) 1px, transparent 1px);
  background-size: 26px 26px;
  border: 1px solid rgba(244,241,236,.12);
}
.ar-cables { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ar-cable {
  fill: none;
  stroke: rgba(244,241,236,.26);
  stroke-width: 1;
  stroke-dasharray: var(--largo);
  stroke-dashoffset: var(--largo);
  transition: stroke-dashoffset 1.1s cubic-bezier(.3,.7,.3,1);
}
.ar-lienzo.trazada .ar-cable { stroke-dashoffset: 0; }
.ar-pulso { fill: var(--terracota-claro); }

/* ---------- Nodos ---------- */
/* Las posiciones viven aquí, no en el HTML: en línea ganaban siempre y
   el volteo a columna de móvil no llegaba a aplicarse nunca. */
.ar-nodo[data-nodo="e0"] { --x: 0%;   --y: 16%; }
.ar-nodo[data-nodo="e1"] { --x: 0%;   --y: 50%; }
.ar-nodo[data-nodo="e2"] { --x: 0%;   --y: 84%; }
.ar-nucleo               { --x: 40%;  --y: 50%; }
.ar-nodo[data-nodo="s0"] { --x: 100%; --y: 10%; }
.ar-nodo[data-nodo="s1"] { --x: 100%; --y: 37%; }
.ar-nodo[data-nodo="s2"] { --x: 100%; --y: 64%; }
.ar-nodo[data-nodo="s3"] { --x: 100%; --y: 91%; }

.ar-nodo,
.ar-nucleo {
  position: absolute;
  left: var(--x);
  top: var(--y);
  white-space: nowrap;
  opacity: 0;
  transition: opacity .6s ease, border-color .5s ease, color .5s ease;
}
.ar-lienzo.trazada .ar-nodo,
.ar-lienzo.trazada .ar-nucleo { opacity: 1; }
.ar-nodo {
  transform: translateY(-50%);
  padding: 9px 14px;
  font-size: 12px;
  font-weight: 500;
  color: rgba(244,241,236,.8);
  background: #232323;
  border: 1px solid rgba(244,241,236,.18);
}
.ar-entrada { margin-left: 0; }
.ar-destino { transform: translate(-100%, -50%); }
/* Al recibir el pulso, el nodo se enciende un instante */
.ar-nodo.recibe { border-color: var(--terracota-claro); color: var(--hueso); }

.ar-nucleo {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  transform: translate(-50%, -50%);
  padding: 13px 20px;
  font-size: 13px;
  font-weight: 600;
  color: var(--grafito);
  background: var(--hueso);
  border: 1px solid var(--hueso);
}
.ar-luz {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--terracota);
  flex: none;
}
.ar-lienzo.trazada .ar-luz { animation: arLate 2.4s ease-in-out infinite; }
@keyframes arLate { 50% { opacity: .25; } }

.ar-sello {
  position: absolute;
  left: 68%; top: 50%;
  transform: translate(-50%, -50%) scale(.85);
  padding: 5px 11px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--grafito);
  background: var(--terracota-claro);
  opacity: 0;
  transition: opacity .5s ease, transform .5s cubic-bezier(.2,.65,.2,1);
}
.ar-lienzo.conectada .ar-sello { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* En móvil la red gira a vertical: en 335px de ancho «Entra un formulario»
   se montaba encima del núcleo. Todo en una columna y los cables salen por
   sendos buses laterales, que además es como se dibuja una instalación. */
@media (max-width: 760px) {
  .ar-lienzo {
    height: 540px;
    background-size: 20px 20px;
  }
  .ar-nodo,
  .ar-nucleo { transform: translate(-50%, -50%); }
  .ar-nodo { font-size: 11px; padding: 8px 11px; }
  .ar-nucleo { font-size: 12px; padding: 11px 16px; }

  .ar-nodo[data-nodo="e0"] { --x: 50%; --y: 6%; }
  .ar-nodo[data-nodo="e1"] { --x: 50%; --y: 15%; }
  .ar-nodo[data-nodo="e2"] { --x: 50%; --y: 24%; }
  .ar-nucleo             { --x: 50%; --y: 46%; }
  .ar-nodo[data-nodo="s0"] { --x: 50%; --y: 68%; }
  .ar-nodo[data-nodo="s1"] { --x: 50%; --y: 77%; }
  .ar-nodo[data-nodo="s2"] { --x: 50%; --y: 86%; }
  .ar-nodo[data-nodo="s3"] { --x: 50%; --y: 95%; }

  .ar-sello { left: 50%; top: 57%; }
}

/* Sin movimiento: la red queda trazada y quieta, sin pulsos ni parpadeos */
@media (prefers-reduced-motion: reduce) {
  .ar-cable { stroke-dashoffset: 0; transition: none; }
  .ar-nodo, .ar-nucleo { opacity: 1; transition: none; }
  .ar-lienzo .ar-luz { animation: none; }
  .ar-sello { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  .ar-pulso { display: none; }
}

/* ---------- Con qué se conecta ----------
   Nombres en texto, no logotipos. Comunica lo mismo sin reproducir marcas
   ajenas: en cuanto haya SVG oficiales, entran aquí sin tocar la maqueta.
   La caja de cada uno ya está dimensionada para admitirlos. */
.ar-marcas { margin-top: clamp(34px, 4.5vh, 52px); }
.ar-marcas-eti {
  display: block;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--acento);
}
.ar-lista-marcas {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin: 18px 0 0;
}
.ar-lista-marcas li {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 8px 14px;
  font-size: 12.5px;
  font-weight: 500;
  color: rgba(244,241,236,.82);
  background: #232323;
  border: 1px solid rgba(244,241,236,.16);
  transition: border-color .35s ease, color .35s ease;
}
/* El último no es una marca: es la puerta abierta a cualquier otra */
.ar-lista-marcas li:last-child {
  color: var(--terracota-claro);
  border-color: rgba(217,139,74,.45);
  border-style: dashed;
}
@media (hover: hover) and (pointer: fine) {
  .ar-lista-marcas li:hover {
    border-color: var(--terracota-claro);
    color: var(--hueso);
  }
}
@media (max-width: 620px) {
  .ar-lista-marcas { gap: 7px; }
  .ar-lista-marcas li { font-size: 11.5px; padding: 7px 11px; min-height: 30px; }
}

/* ---------- Burbuja flotante de WhatsApp ----------
   Redonda y verde en todos los tamaños: es un patrón que la gente
   reconoce sin leer nada, y ese reconocimiento vale más aquí que la
   coherencia cromática. El resto de la web sigue sobria. */
.flota-wa {
  position: fixed;
  right: clamp(16px, 2.2vw, 28px);
  bottom: clamp(16px, 2.2vw, 28px);
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  text-decoration: none;
  color: #fff;
  background: #25D366;
  border: 0;
  box-shadow: 0 10px 26px -8px rgba(37,211,102,.55), 0 4px 14px -4px rgba(26,26,26,.3);
  opacity: 0;
  transform: scale(.7);
  pointer-events: none;
  transition: opacity .4s ease, transform .45s cubic-bezier(.34,1.4,.5,1),
              box-shadow .3s ease;
}
.flota-wa.visible { opacity: 1; transform: scale(1); pointer-events: auto; }
.flota-wa span { display: none; }
.flota-wa svg { width: 31px; height: 31px; fill: currentColor; }
.flota-wa:hover {
  transform: scale(1.06);
  box-shadow: 0 14px 32px -8px rgba(37,211,102,.7), 0 6px 18px -4px rgba(26,26,26,.34);
}
.flota-wa:active { transform: scale(.97); }
.flota-wa:focus-visible { outline: 3px solid var(--grafito); outline-offset: 3px; }

/* Un halo que late despacio: llama la atención sin molestar */
.flota-wa::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid #25D366;
  opacity: 0;
  pointer-events: none;
}
.flota-wa.visible::after { animation: waHalo 3.4s ease-out infinite 1.2s; }
@keyframes waHalo {
  0%   { transform: scale(1);    opacity: .55; }
  70%  { transform: scale(1.55); opacity: 0; }
  100% { transform: scale(1.55); opacity: 0; }
}

@media (max-width: 620px) {
  .flota-wa { width: 54px; height: 54px; }
  .flota-wa svg { width: 29px; height: 29px; }
}

@media (prefers-reduced-motion: reduce) {
  .flota-wa { transition: opacity .2s linear; transform: none; }
  .flota-wa.visible { transform: none; }
  .flota-wa:hover { transform: none; }
  .flota-wa.visible::after { animation: none; }
}

/* ---------- Páginas legales ---------- */
.legal-cuerpo { max-width: 68ch; }
.legal-cuerpo h2 {
  font-size: clamp(20px, 2.2vw, 26px);
  margin: clamp(40px, 5vh, 58px) 0 16px;
}
.legal-cuerpo h2:first-child { margin-top: 0; }
.legal-cuerpo p { font-size: 15.5px; line-height: 1.85; color: var(--gris-calido); margin-top: 14px; }
.legal-cuerpo b { color: var(--grafito); font-weight: 600; }
.legal-cuerpo a { color: var(--grafito); text-decoration: none; border-bottom: 1px solid var(--acento); }
.legal-cuerpo a:hover { background: rgba(156,86,38,.09); }

.legal-datos { list-style: none; margin: 22px 0 0; border-top: 1px solid var(--arena); }
.legal-datos li {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--arena);
  font-size: 15px;
}
.legal-datos span {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--acento);
  padding-top: 4px;
}
/* Marca visible de lo que falta por rellenar antes de publicar */
.legal-datos b[data-pendiente] {
  color: #B3261E;
  background: rgba(179,38,30,.08);
  padding: 2px 8px;
  font-size: 12px;
  letter-spacing: .04em;
}
.legal-lista { list-style: none; margin: 18px 0 0; }
.legal-lista li {
  position: relative;
  padding-left: 22px;
  font-size: 15.5px;
  line-height: 1.8;
  color: var(--gris-calido);
}
.legal-lista li + li { margin-top: 12px; }
.legal-lista li::before {
  content: "";
  position: absolute;
  left: 0; top: 12px;
  width: 9px; height: 1px;
  background: var(--acento);
}
.legal-fecha {
  margin-top: clamp(40px, 5vh, 60px);
  padding-top: 20px;
  border-top: 1px solid var(--arena);
  font-size: 13px;
}
@media (max-width: 620px) {
  .legal-datos li { grid-template-columns: 1fr; gap: 4px; }
  .legal-datos span { padding-top: 0; }
}

/* Los enlaces legales del pie */
.pie-enlaces { display: inline-flex; flex-wrap: wrap; gap: 18px; }
.pie-enlaces a { color: inherit; text-decoration: none; transition: color .3s ease; }
.pie-enlaces a:hover { color: var(--hueso); }

/* ---------- Formulario de contacto ---------- */
.fc-form { margin-top: clamp(38px, 5vh, 56px); max-width: 780px; }
.fc-fila {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 26px);
}
.fc-campo { display: block; margin-bottom: clamp(16px, 2vw, 24px); }
.fc-campo label {
  display: block;
  margin-bottom: 8px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--acento);
}
.fc-campo label em { font-style: normal; color: var(--gris-calido); }
.fc-campo input,
.fc-campo textarea {
  width: 100%;
  padding: 13px 15px;
  font-family: var(--sans);
  font-size: 15px;
  color: var(--grafito);
  background: var(--marfil);
  border: 1px solid var(--arena);
  border-radius: 0;
  transition: border-color .3s ease, background .3s ease;
}
.fc-campo textarea { resize: vertical; min-height: 120px; line-height: 1.7; }
.fc-campo input::placeholder { color: var(--gris-calido); opacity: .7; }
.fc-campo input:focus,
.fc-campo textarea:focus {
  outline: none;
  border-color: var(--acento);
  background: color-mix(in srgb, var(--marfil) 88%, var(--grafito));
}
/* El campo trampa no puede ocultarse con display:none: hay bots que lo
   detectan. Se saca de pantalla, que además lo mantiene fuera del tabulador. */
.fc-trampa {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}
.fc-humano b { color: var(--grafito); font-weight: 600; letter-spacing: 0; text-transform: none; font-size: 13px; }
.fc-humano input { max-width: 130px; }

.fc-pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.fc-consentimiento {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--gris-calido);
  cursor: pointer;
  max-width: 46ch;
}
.fc-consentimiento input {
  flex: none;
  width: 17px; height: 17px;
  margin-top: 2px;
  accent-color: var(--terracota);
}
.fc-consentimiento a { color: var(--grafito); border-bottom: 1px solid var(--acento); text-decoration: none; }
.fc-aviso {
  margin-top: 18px;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--gris-calido);
  min-height: 1.2em;
}
.fc-aviso.mal { color: #B3261E; }

@media (max-width: 620px) {
  .fc-fila { grid-template-columns: 1fr; gap: 0; }
  .fc-pie { flex-direction: column; align-items: stretch; gap: 18px; }
  .fc-pie .btn { width: 100%; text-align: center; }
}

/* ---------- Reseñas ---------- */
.resenas {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 32px);
  margin-top: clamp(40px, 5.5vh, 60px);
}
.resena {
  display: flex;
  flex-direction: column;
  padding: clamp(26px, 3vw, 38px);
  background: var(--marfil);
  border: 1px solid var(--arena);
}
/* Las comillas, como marca de agua: la cita se lee sola */
.resena::before {
  content: "“";
  font-family: var(--serif);
  font-size: 54px;
  line-height: .8;
  color: var(--acento);
  opacity: .5;
}
.resena-texto {
  margin-top: 14px;
  font-family: var(--serif);
  font-size: clamp(17px, 1.7vw, 21px);
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: -0.008em;
  color: var(--grafito);
}
.resena-quien {
  margin-top: auto;
  padding-top: 26px;
}
.resena-nombre {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--grafito);
}
.resena-donde {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--acento);
}
@media (hover: hover) and (pointer: fine) {
  .resena { transition: border-color .4s ease, transform .4s cubic-bezier(.2,.65,.2,1); }
  .resena:hover { border-color: var(--acento); transform: translateY(-4px); }
}
@media (max-width: 860px) {
  .resenas { grid-template-columns: 1fr; gap: 14px; }
  .resena { padding: 24px; }
  .resena::before { font-size: 44px; }
}

/* =====================================================================
   RITMO DE FONDOS EN EL HOME
   Eran veinte pantallas seguidas del mismo hueso. Alternar da respiración
   y, de paso, el recorrido 3D gana profundidad: sobre grafito el punto de
   fuga se lee de verdad y los trazos de bronce brillan.
   ===================================================================== */
.recorrido {
  background: var(--grafito);
  color: var(--hueso);
  --acento: var(--terracota-claro);
}
/* Los bordes del espacio se funden con SU fondo, no con el de la página */
.recorrido .escenario::after {
  background:
    linear-gradient(to bottom, var(--grafito) 0%, rgba(26,26,26,0) 24%,
                    rgba(26,26,26,0) 62%, var(--grafito) 94%),
    linear-gradient(to right, var(--grafito) 0%, rgba(26,26,26,0) 12%,
                    rgba(26,26,26,0) 88%, var(--grafito) 100%);
}
.recorrido .recorrido-cabecera h2 { color: var(--hueso); }
.recorrido .marca { background: rgba(244,241,236,.22); }
.recorrido .eje-fuga {
  background: linear-gradient(to bottom,
    rgba(217,139,74,0) 0%, rgba(217,139,74,.6) 58%, rgba(217,139,74,.1) 100%);
}

/* Las piezas del espacio, invertidas */
.recorrido .g01 .pieza { background: #262626; border-color: rgba(244,241,236,.45); }
.recorrido .g02 .via { background: rgba(244,241,236,.3); }
.recorrido .g02 .via.elegida { background: var(--terracota-claro); }
.recorrido .g02 .destino { background: #262626; border-color: rgba(244,241,236,.45); }
.recorrido .g02 .destino.elegido { background: var(--terracota-claro); border-color: var(--terracota-claro); }
.recorrido .g03 .nodo,
.recorrido .g04 .nodo { background: #262626; border-color: rgba(244,241,236,.45); }
.recorrido .g03 .nodo.nucleo { background: var(--terracota-claro); border-color: var(--terracota-claro); }
.recorrido .g03 .enlace { background: var(--terracota-claro); }
.recorrido .g04 .circuito { border-color: rgba(244,241,236,.26); }
.recorrido .g04 .latido { background: var(--terracota-claro); }

/* Estaciones y cierre */
.recorrido .estacion h3 { color: var(--hueso); }
.recorrido .estacion p { color: rgba(244,241,236,.62); }
.recorrido .recorrido-riel { background: rgba(244,241,236,.18); }
.recorrido .riel-avance { background: var(--terracota-claro); }
.recorrido .claim-eje { background: var(--terracota-claro); }
.recorrido .claim-frase { color: var(--hueso); }
.recorrido .claim-frase .claim-b { color: var(--terracota-claro); }

/* Los casos, en el tono cálido: separa sin cortar */
.prueba { background: var(--arena-calida); }
.prueba .resena { background: var(--marfil); border-color: #E6D6C6; }
.prueba .experiencia-grid { border-top-color: var(--grafito); }

/* =====================================================================
   MODO OSCURO
   La web usaba --grafito para dos cosas distintas: el color de la tinta y
   el fondo de las secciones oscuras. Para invertirla hay que separarlas:

   · Los tokens base (--hueso, --grafito, --marfil…) cambian de valor con
     el tema. Todo lo que ya los usa se invierte solo, sin tocar reglas.
   · --inverso es la superficie deliberadamente oscura. En claro es casi
     negra; en oscuro es MÁS CLARA que la página, así que sigue
     destacando: lo que en claro se hunde, en oscuro se levanta.
   · Dentro de esas superficies los tokens vuelven a su lectura clara por
     herencia, así que sus cientos de reglas internas siguen valiendo.
   ===================================================================== */

:root {
  --inverso: #1A1A1A;
  --sombra-color: 26, 26, 26;
  /* Texto que va ENCIMA del acento. Se invierte con el tema: en claro el
     terracota es oscuro y pide letra clara; en oscuro es claro y la pide
     oscura. Sin esto, las cintas heredaban --marfil de su tarjeta y
     quedaban en 2,67 de contraste. */
  --sobre-acento: #FFFDF9;
}

[data-tema="oscuro"] {
  --hueso: #141312;          /* fondo de página: negro cálido, no azulado */
  --grafito: #EFEBE4;        /* la tinta */
  --marfil: #1C1A18;         /* tarjetas y paneles */
  --arena: #35322D;          /* filetes */
  --gris-calido: #A69D90;    /* texto secundario */
  --arena-calida: #1B1917;   /* la sección cálida */
  --bronce: #9C8F79;
  --terracota: #D98B4A;      /* el acento sube de tono para contrastar */
  --terracota-claro: #E8A868;
  --acento: var(--terracota);
  --inverso: #24221F;        /* levantada respecto a la página */
  --sobre-acento: #1A1A1A;
  --sombra-color: 0, 0, 0;
  color-scheme: dark;
}

/* Las superficies oscuras: fondo propio y tokens en lectura clara dentro */
.seccion-oscura,
.pie,
.recorrido,
.escena-claim,
.wpc-cara,
.wpl-destacado,
.ag-nucleo,
.ag-bif-origen,
.fl-agente {
  --hueso: #F4F1EC;
  --grafito: #1A1A1A;
  --marfil: #FFFDF9;
  --arena: #D8D2C8;
  --gris-calido: #6B6459;
  --acento: var(--terracota-claro);
  background: var(--inverso);
  color: var(--hueso);
}

/* En oscuro, un panel claro con fotogramas se sale de tono: la secuencia
   se queda sobre su propio fondo crema y se enmarca como una lámina. */
/* En oscuro los fotogramas se invierten en vez de quedarse en una lámina
   blanca: son dibujos de línea, así que el negativo funciona. El giro de
   tono devuelve el ámbar a su sitio (al invertir se vuelve azul). */
[data-tema="oscuro"] .ag-decide-lienzo,
[data-tema="oscuro"] .ag-lienzo {
  /* El negativo lo hace el lienzo; aquí solo se devuelve el ámbar a su
     tono, que al invertirse se había vuelto azul. */
  filter: hue-rotate(180deg) saturate(.88);
  background: transparent;
}
[data-tema="oscuro"] .ag-decide-visual { background: transparent; }

/* El botón del tema, en la barra */
.tema-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  margin-left: 6px;
  padding: 0;
  border: 1px solid var(--arena);
  background: transparent;
  color: var(--grafito);
  cursor: pointer;
  transition: border-color .3s ease, color .3s ease, background .3s ease;
}
.tema-btn:hover { border-color: var(--acento); color: var(--acento); }
.tema-btn:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.tema-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; }
/* Sol y luna comparten hueco: se enseña la del tema al que vas a cambiar */
.tema-btn .luna { display: block; }
.tema-btn .sol { display: none; }
[data-tema="oscuro"] .tema-btn .luna { display: none; }
[data-tema="oscuro"] .tema-btn .sol { display: block; }

@media (max-width: 980px) {
  .tema-btn { margin: 0 10px 0 auto; }
}

/* ---------- Ajustes finos del modo oscuro ----------
   Piezas que llevaban el color escrito a mano y no seguían al tema. */
[data-tema="oscuro"] .nav.solida {
  background: color-mix(in srgb, var(--hueso) 94%, transparent);
  border-bottom-color: var(--arena);
}
/* Los degradados que funden los bordes de las escenas 3D con la página */
[data-tema="oscuro"] .escena-fijada,
[data-tema="oscuro"] .escenario::after { --fundido: var(--hueso); }

/* El panel de Invexia y las escenas ya eran oscuros: en modo oscuro se
   levantan un punto para no fundirse con la página */
[data-tema="oscuro"] .panel { background: var(--inverso); }
[data-tema="oscuro"] .ar-lienzo,
[data-tema="oscuro"] .ar-nodo { background: #262320; }

/* La burbuja de WhatsApp no cambia: su verde es su identidad */

/* ---------- Las puertas de entrada ----------
   Cada una arranca con el síntoma tal y como lo dice un gerente, no con el
   nombre del servicio: se reconoce antes en «se me va el día en lo mismo»
   que en «automatización de procesos». */
.puertas {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin-top: clamp(44px, 6vh, 68px);
  background: var(--arena);
  border: 1px solid var(--arena);
}
.puerta {
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 2.6vw, 34px);
  background: var(--hueso);
  text-decoration: none;
  position: relative;
  transition: background .4s ease, opacity .38s ease;
}
.puerta-sintoma {
  font-family: var(--serif);
  font-size: clamp(17px, 1.7vw, 21px);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--grafito);
}
.puerta-que {
  margin-top: 14px;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--gris-calido);
}
.puerta-ir {
  margin-top: auto;
  padding-top: 24px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--acento);
}
.puerta-ir::after {
  content: "";
  display: inline-block;
  width: 14px; height: 1px;
  margin-left: 9px;
  vertical-align: middle;
  background: var(--acento);
  transition: width .4s cubic-bezier(.2,.65,.2,1);
}
/* La línea superior se traza sobre el filete, sin doblarlo */
.puerta::before {
  content: "";
  position: absolute;
  top: -1px; left: 0; right: 0;
  height: 1px;
  background: var(--acento);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .5s cubic-bezier(.2,.65,.2,1);
}
@media (hover: hover) and (pointer: fine) {
  .puertas:hover .puerta { opacity: .45; }
  .puertas .puerta:hover { opacity: 1; background: var(--marfil); }
  .puerta:hover::before { transform: scaleX(1); }
  .puerta:hover .puerta-ir::after { width: 30px; }
}
.puerta:focus-visible { outline: 2px solid var(--acento); outline-offset: -3px; }

@media (max-width: 900px) { .puertas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .puertas { grid-template-columns: 1fr; } }

/* ---------- Caso 2: la maqueta abstracta del sitio ----------
   Un navegador dibujado con CSS. No imita ninguna captura: solo enseña
   qué piezas tiene la web que construimos. */
.caso-bloque.invertido .caso-visual { order: -1; }
@media (max-width: 980px) { .caso-bloque.invertido .caso-visual { order: 0; } }

.maqueta {
  margin: 0;
  border: 1px solid var(--arena);
  border-radius: 12px;
  overflow: hidden;
  background: var(--marfil);
  box-shadow: 0 22px 50px -34px rgba(0,0,0,.35);
  transition: transform .5s cubic-bezier(.22,1,.36,1), box-shadow .5s;
}
@media (hover: hover) and (pointer: fine) {
  .caso-visual:hover .maqueta {
    transform: translateY(-4px);
    box-shadow: 0 30px 64px -34px rgba(0,0,0,.42);
  }
}
.mq-barra {
  display: flex; align-items: center; gap: 6px;
  padding: 11px 14px;
  background: color-mix(in srgb, var(--arena) 42%, transparent);
  border-bottom: 1px solid var(--arena);
}
.mq-punto {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--gris-calido); opacity: .45;
}
.mq-url {
  margin-left: 12px;
  font-size: 10.5px;
  letter-spacing: .04em;
  color: var(--gris-calido);
  background: var(--marfil);
  border-radius: 20px;
  padding: 3px 12px;
}

@media (max-width: 420px) {
}

/* ---------- El saldo del proceso ----------
   La resta debajo del diagrama: es lo que se lleva el lector. */
.vp-saldo {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: clamp(32px, 4vh, 46px);
  padding-top: 22px;
  border-top: 1px solid var(--arena);
  font-size: 13px;
}
.vp-tachado { color: var(--gris-calido); text-decoration: line-through; }
.vp-flecha {
  width: 9px; height: 9px;
  border-top: 1.5px solid var(--acento);
  border-right: 1.5px solid var(--acento);
  transform: rotate(45deg);
  flex: none;
}
.vp-queda { color: var(--grafito); font-weight: 600; }

/* ================= EL PROCESO EN ABSTRACTO (automatización) =================
   Cuatro estaciones unidas por un hilo. Cada una se enciende cuando la
   anterior ha terminado: la idea es que el trabajo avanza solo. */
.flujo-demo {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin: clamp(44px, 6vw, 70px) 0 0;
  padding: 0;
  counter-reset: fd;
}
.fd-paso {
  position: relative;
  padding: 0 clamp(10px, 1.6vw, 22px);
  text-align: center;
  /* Entrada escalonada: los pasos aparecen en el orden en que ocurren */
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.2,.65,.2,1);
  transition-delay: calc(var(--orden) * .16s);
}
.revela.visible .fd-paso { opacity: 1; transform: none; }

/* El hilo que une un paso con el siguiente */
.fd-paso + .fd-paso::before {
  content: "";
  position: absolute;
  top: 27px; right: 50%; left: -50%;
  height: 1px;
  background: var(--arena);
  z-index: 0;
}
/* Y el dato que lo recorre */
.fd-paso + .fd-paso::after {
  content: "";
  position: absolute;
  top: 24px; left: -50%;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--acento);
  opacity: 0;
  z-index: 1;
}
.revela.visible .fd-paso + .fd-paso::after {
  animation: fd-viaje 4.8s cubic-bezier(.5,0,.5,1) infinite;
  animation-delay: calc(var(--orden) * .55s);
}
@keyframes fd-viaje {
  0%        { left: -50%;              opacity: 0; }
  6%        { opacity: 1; }
  18%       { left: calc(50% - 5px);   opacity: 1; }
  24%, 100% { left: calc(50% - 5px);   opacity: 0; }
}

.fd-icono {
  position: relative;
  z-index: 2;
  width: 54px; height: 54px;
  margin: 0 auto 18px;
  display: grid; place-items: center;
  border: 1px solid var(--arena);
  border-radius: 50%;
  background: var(--hueso);
  color: var(--acento);
  transition: border-color .4s ease, transform .4s cubic-bezier(.2,.65,.2,1);
}
.fd-icono svg { width: 26px; height: 26px; }
.revela.visible .fd-paso .fd-icono { border-color: color-mix(in srgb, var(--acento) 45%, var(--arena)); }
@media (hover: hover) and (pointer: fine) {
  .fd-paso:hover .fd-icono { transform: translateY(-3px); border-color: var(--acento); }
}

.fd-titulo {
  display: block;
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--grafito);
}
.fd-pie {
  display: block;
  margin-top: 7px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--gris-calido);
}

/* En pantallas estrechas la cadena se pone de pie */
@media (max-width: 760px) {
  .flujo-demo { grid-template-columns: 1fr; gap: 26px; }
  .fd-paso {
    display: grid;
    grid-template-columns: 54px 1fr;
    column-gap: 18px;
    align-items: center;
    text-align: left;
    padding: 0;
  }
  .fd-icono { margin: 0; grid-row: span 2; }
  .fd-paso + .fd-paso::before {
    top: -26px; bottom: auto; left: 27px; right: auto;
    width: 1px; height: 26px;
  }
  .fd-paso + .fd-paso::after {
    top: -26px; left: 25px;
  }
  @keyframes fd-viaje {
    0%        { top: -26px; left: 25px; opacity: 0; }
    6%        { opacity: 1; }
    18%       { top: -5px;  left: 25px; opacity: 1; }
    24%, 100% { top: -5px;  left: 25px; opacity: 0; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .fd-paso { opacity: 1; transform: none; transition: none; }
  .revela.visible .fd-paso + .fd-paso::after { animation: none; opacity: 1; }
}

/* ================= LAS SEIS MUESTRAS (desarrollo web) =================
   Seis esquemas dibujados en SVG. No imitan ninguna web real: solo enseñan
   qué se nota al entrar en una que está bien hecha. */
.ws-rejilla {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.4vw, 34px);
  margin: clamp(44px, 6vw, 66px) 0 0;
  padding: 0;
}
@media (max-width: 900px) { .ws-rejilla { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .ws-rejilla { grid-template-columns: 1fr; } }

.ws-tarjeta {
  border: 1px solid var(--arena);
  border-radius: 12px;
  padding: clamp(18px, 2vw, 24px);
  background: var(--marfil);
  transition: transform .5s cubic-bezier(.22,1,.36,1),
              border-color .4s ease, box-shadow .5s;
}
@media (hover: hover) and (pointer: fine) {
  .ws-tarjeta:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--acento) 40%, var(--arena));
    box-shadow: 0 22px 46px -32px rgba(0,0,0,.4);
  }
}
.ws-tarjeta h3 {
  margin: 20px 0 8px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--grafito);
}
.ws-tarjeta p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--gris-calido);
}

.ws-lienzo {
  margin: 0;
  border-radius: 8px;
  background: color-mix(in srgb, var(--arena) 26%, transparent);
  padding: 14px;
}
.ws-lienzo svg { display: block; width: 100%; height: auto; }

/* Piezas comunes de los esquemas */
.ws-marco  { stroke: var(--gris-calido); stroke-width: 1.2; opacity: .55; }
.ws-hilo   { stroke: var(--gris-calido); stroke-width: 1; opacity: .35; }
.ws-bloque { fill: var(--gris-calido); opacity: .28; }
.ws-fuerte { opacity: .5; }
.ws-cta    { fill: var(--acento); opacity: .85; }

/* Velocidad: la barra se llena de una vez, no a trompicones */
.ws-riel  { fill: var(--gris-calido); opacity: .2; }
.ws-carga {
  fill: var(--acento);
  transform-origin: 22px 0;
  transform: scaleX(.06);
}
.revela.visible .ws-carga { animation: ws-llenar 2.6s cubic-bezier(.15,.9,.2,1) infinite; }
@keyframes ws-llenar {
  0%        { transform: scaleX(.06); }
  38%, 100% { transform: scaleX(1); }
}
.ws-chispa { fill: var(--acento); opacity: .25; }
.revela.visible .ws-chispa { animation: ws-chispear 2.6s ease-in-out infinite; }
.revela.visible .ws-chispa:nth-of-type(2) { animation-delay: .1s; }
.revela.visible .ws-chispa:nth-of-type(3) { animation-delay: .2s; }
@keyframes ws-chispear { 0%,60%,100% { opacity: .25; } 25% { opacity: .85; } }

/* Contacto: el aviso sale de la web hacia el teléfono */
.ws-arco  { stroke: var(--acento); stroke-width: 1.2; stroke-dasharray: 3 4; opacity: .8; }
.ws-globo { stroke: var(--acento); stroke-width: 1.2; fill: none; opacity: .85; }

/* Posicionamiento: la primera fila es la que importa */
.ws-fila  { fill: var(--gris-calido); opacity: .22; }
.ws-fila-alta { fill: var(--acento); opacity: .5; }
.ws-lupa  { stroke: var(--gris-calido); stroke-width: 1.2; opacity: .5; }

/* Conexión: la web enchufada a lo demás */
.ws-cable { stroke: var(--acento); stroke-width: 1.1; opacity: .45; }
.ws-nodo  { stroke: var(--gris-calido); stroke-width: 1.2; opacity: .55; }

@media (prefers-reduced-motion: reduce) {
  .revela.visible .ws-carga,
  .revela.visible .ws-chispa { animation: none; }
  .ws-carga { transform: scaleX(1); }
}

/* ---------- Zonas pulsables en el móvil ----------
   El dibujo se queda igual; lo que crece es la superficie que responde
   al dedo, hasta los 44px que se dan por mínimo cómodo. */
@media (max-width: 980px) {
  .nav-burger {
    /* Las tres barras miden 40px con sus márgenes: sin relleno extra
       la zona pulsable ya pasa de 44px sin engordar la barra superior. */
    padding: 2px 10px;
    min-width: 44px;
    display: grid; place-content: center;
  }
  .tema-btn {
    width: 44px; height: 44px;
    margin-left: 4px;
  }
}

/* «6+ h/semana» no admite salto de línea, así que entre el móvil y el
   escritorio se salía unos píxeles por la derecha: en esa franja la fila
   puede partirse y la cifra baja de cuerpo. */
@media (min-width: 521px) and (max-width: 1024px) {
  .cifra-bloque { gap: 16px; flex-wrap: wrap; }
  .cifra-valor  { font-size: clamp(34px, 4.2vw, 52px); }
}

/* Los dos recuadros nuevos se levantan al pasar el ratón. Con movimiento
   reducido se quedan quietos y solo cambia el color del borde. */
@media (prefers-reduced-motion: reduce) {
  .maqueta, .ws-tarjeta { transition: border-color .2s ease; }
  .caso-visual:hover .maqueta,
  .ws-tarjeta:hover { transform: none; }
}

/* ---------- Los planes en pantalla táctil ----------
   Mismo lenguaje que en escritorio, pero el foco lo decide el scroll:
   se enciende la tarjeta que queda más centrada. Sin esto, en el móvil
   las tres tarjetas se quedaban planas y muertas. */
@media (hover: none), (pointer: coarse) {
  .wpl-plan {
    transition: transform .45s cubic-bezier(.2,.65,.2,1),
                box-shadow .45s ease, border-color .4s ease, opacity .38s ease;
  }
  .wpl-plan::after {
    content: "";
    position: absolute;
    top: -1px; left: -1px; right: -1px;
    height: 2px;
    background: var(--terracota);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .55s cubic-bezier(.2,.65,.2,1);
  }
  .wpl-destacado::after { background: var(--terracota-claro); }

  .wpl-planes.tocando .wpl-plan { opacity: .5; }
  .wpl-plan.wpl-activa {
    opacity: 1;
    transform: translateY(-5px);
    border-color: var(--terracota);
    box-shadow: 0 24px 48px -30px rgba(26,26,26,.34);
  }
  .wpl-destacado.wpl-activa {
    border-color: var(--terracota-claro);
    box-shadow: 0 28px 56px -28px rgba(26,26,26,.6);
  }
  .wpl-plan.wpl-activa::after { transform: scaleX(1); }
  .wpl-plan.wpl-activa .wpl-btn.btn-secundario {
    background: var(--grafito);
    border-color: var(--grafito);
    color: var(--hueso);
  }
  .wpl-destacado.wpl-activa .wpl-btn { background: #E39A5C; border-color: #E39A5C; }
  .wpl-lista li { transition: transform .42s cubic-bezier(.2,.65,.2,1); }
  .wpl-plan.wpl-activa .wpl-lista li { transform: translateX(4px); }
  .wpl-plan.wpl-activa .wpl-lista li:nth-child(2) { transition-delay: .05s; }
  .wpl-plan.wpl-activa .wpl-lista li:nth-child(3) { transition-delay: .10s; }
  .wpl-plan.wpl-activa .wpl-lista li:nth-child(4) { transition-delay: .15s; }
  .wpl-plan.wpl-activa .wpl-lista li:nth-child(5) { transition-delay: .20s; }
  .wpl-plan.wpl-activa .wpl-lista li:nth-child(6) { transition-delay: .25s; }
}

@media (prefers-reduced-motion: reduce) {
  .wpl-plan.wpl-activa { transform: none; }
  .wpl-plan.wpl-activa .wpl-lista li { transform: none; }
}

/* En oscuro la píldora se vuelve clara, así que el punto necesita el
   terracota apagado para seguir viéndose. */
[data-tema="oscuro"] .nav-cta::before { background: #9C5626; }
[data-tema="oscuro"] .nav-cta:hover::before { background: var(--sobre-acento); }

/* ---------- La rejilla viva del cierre ----------
   Se dibuja detrás del contenido de la banda. La banda ya trae su fondo
   oscuro; el canvas solo pone la trama y las celdas encendidas. */
.banda-cta { position: relative; overflow: hidden; }
.rejilla-viva {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
/* En la banda de cierre se desvanece hacia los lados para que no se vea
   el corte del canvas. En el panel de la portada no: allí el borde del
   cuadro es justamente lo que la contiene. */
.banda-cta > .rejilla-viva {
  -webkit-mask-image: radial-gradient(120% 100% at 50% 50%, #000 55%, transparent 100%);
          mask-image: radial-gradient(120% 100% at 50% 50%, #000 55%, transparent 100%);
}
.banda-cta > .contenedor { position: relative; z-index: 1; }

/* ================= LA PORTADA: FONDO, TEXTURA Y MM =================
   Sin recuadro. La foto es una capa del fondo de la sección que se apaga
   contra el hueso de la página; encima van la rejilla y la MM. */
.hero { overflow: hidden; --rejilla-trama: var(--grafito); }

.hero-foto {
  position: absolute;
  top: 6%;
  right: -12%;
  width: min(84%, 1240px);
  aspect-ratio: 3 / 2;
  margin: 0;
  z-index: 0;
  pointer-events: none;
  /* Se desvanece en todas direcciones desde un punto de la derecha: así no
     queda ni un borde recto que delate que ahí hay una foto pegada. */
  -webkit-mask-image: radial-gradient(70% 74% at 66% 52%, rgba(0,0,0,.92) 10%, rgba(0,0,0,.45) 46%, transparent 80%);
          mask-image: radial-gradient(70% 74% at 66% 52%, rgba(0,0,0,.92) 10%, rgba(0,0,0,.45) 46%, transparent 80%);
}
.hero-foto img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* La malla nítida está en la franja baja de la foto; arriba está
     desenfocada y se leía como manchas. */
  object-position: 50% 78%;
  display: block;
  /* Invertida, los nodos y los hilos quedan oscuros sobre campo claro, que
     es el tono de la página. El sepia y el giro de matiz la llevan al
     terracota sin necesidad de capas de mezcla. */
  filter: grayscale(1) invert(1) brightness(1.02) contrast(1.18)
          sepia(.55) hue-rotate(-14deg) saturate(1.6);
  opacity: .48;
}

/* La rejilla cubre toda la sección, por debajo del contenido */
.hero > .rejilla-viva { z-index: 1; }
.hero-rejilla { position: relative; z-index: 2; }
.hero .scroll-hint { z-index: 2; }

/* La MM, sin caja: se apoya en la textura */
.hero-panel { position: relative; aspect-ratio: 1 / 0.72; }
.hero-panel .orbe-mm {
  /* Es el logotipo: va a color pleno y ocupando casi todo el bloque. Con
     mezcla multiply se aclaraba sobre la trama y perdía presencia. */
  color: var(--grafito);
  inset: 2%;
  width: 96%;
  height: 96%;
  opacity: 1;
}

@media (max-width: 900px) {
  /* Una sola columna: el texto primero y la MM debajo. */
  .hero-rejilla { grid-template-columns: 1fr; gap: 34px; }
  /* En una columna la trama cae encima del texto: baja de presencia. */
  .hero-foto { width: 128%; right: -30%; top: -4%; aspect-ratio: 1 / 1; opacity: .62; }
  .hero-panel { aspect-ratio: 1 / 0.44; max-width: 460px; }
  .hero-panel .orbe-mm { inset: 0; width: 100%; height: 100%; }
}

/* A 34px «Nosotros la construimos.» no cabe en una pantalla de 390 y el
   titular se parte en cinco líneas. */
@media (max-width: 400px) {
  .hero h1 { font-size: 31px; }
}

/* ================= LA TRAMA EN LAS PÁGINAS INTERIORES =================
   Misma malla que la portada y mismo tratamiento, pero muy por debajo: aquí
   solo tiene que dar aire detrás del titular, no llevar la voz. Cambia el
   encuadre en cada página para que no parezca la misma imagen pegada tres
   veces. Es el mismo archivo, así que no descarga nada nuevo. */
.cabecera-pagina.con-trama { position: relative; overflow: hidden; }
.cabecera-pagina.con-trama > .contenedor { position: relative; z-index: 1; }

.cabecera-pagina .hero-foto { opacity: .5; }

/* Automatización: entra por la izquierda, como un proceso ya en marcha */
.trama-auto {
  top: -6%; right: auto; left: -20%;
  width: min(72%, 900px);
  -webkit-mask-image: radial-gradient(62% 66% at 34% 56%, rgba(0,0,0,.8) 8%, transparent 74%);
          mask-image: radial-gradient(62% 66% at 34% 56%, rgba(0,0,0,.8) 8%, transparent 74%);
}
/* Casos: baja y ancha, de fondo */
.trama-casos {
  top: 2%; right: -20%;
  width: min(80%, 1040px);
  -webkit-mask-image: radial-gradient(64% 70% at 62% 46%, rgba(0,0,0,.75) 8%, transparent 76%);
          mask-image: radial-gradient(64% 70% at 62% 46%, rgba(0,0,0,.75) 8%, transparent 76%);
}
/* Contacto: apenas un rastro; aquí manda el formulario */
.trama-contacto {
  top: -8%; right: -14%;
  width: min(58%, 760px);
  -webkit-mask-image: radial-gradient(58% 62% at 66% 50%, rgba(0,0,0,.62) 6%, transparent 72%);
          mask-image: radial-gradient(58% 62% at 66% 50%, rgba(0,0,0,.62) 6%, transparent 72%);
}
.cabecera-pagina .trama-contacto { opacity: .34; }

@media (max-width: 760px) {
  .cabecera-pagina .hero-foto { opacity: .32; }
  .trama-auto     { left: -40%; width: 118%; }
  .trama-casos    { right: -40%; width: 122%; }
  .trama-contacto { right: -34%; width: 100%; }
}

/* ---------- Los diagramas en la página de casos ----------
   Ocupan las dos columnas de la ficha: el relato queda arriba, las cifras
   al lado, y debajo la prueba de lo que se cuenta. */
.caso-figura {
  grid-column: 1 / -1;
  margin: clamp(30px, 4vw, 52px) 0 0;
}
/* A todo lo ancho de la ficha los tramos punteados se estiraban tanto que
   el «antes» dejaba de leerse como una cadena de pasos. */
.caso-figura .cambio { margin: 0; max-width: 760px; }
.caso-figura figcaption {
  margin-top: 16px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--gris-calido);
}
/* La maqueta sí necesita un límite: a lo ancho de la ficha se deforma */
.caso-figura-maqueta { max-width: 660px; }

/* En la página de casos hay sitio de sobra: la trama del encabezado puede
   bajar aún más ahora que la prueba la llevan los diagramas. */
.cabecera-pagina .trama-casos { opacity: .34; }

/* ---------- La captura real de la web de REIC ----------
   Va dentro del mismo marco de navegador que ya usábamos para la maqueta:
   así se entiende de un vistazo que es una web y no una fotografía. */
.caso-captura .maqueta { padding: 0; }
.caso-captura picture,
.caso-captura img {
  display: block;
  width: 100%;
  height: auto;
}
.caso-captura .mq-barra { border-bottom: 1px solid var(--arena); }
.caso-captura { max-width: 820px; }

/* En oscuro el marco no puede quedar flotando sobre el fondo sin borde */
[data-tema="oscuro"] .caso-captura .maqueta { border-color: color-mix(in srgb, var(--hueso) 16%, transparent); }

/* ---------- Las secuencias de agentes en modo oscuro ----------
   Los fotogramas están dibujados sobre papel claro. Antes se invertían para
   fundirlos con la página oscura, y eso les daba la vuelta a la jerarquía:
   la tarjeta destacada —que es la oscura— se convertía en la única clara.
   Se dejan como están y se enmarcan como lo que son: una lámina. */
[data-tema="oscuro"] .ag-lienzo,
[data-tema="oscuro"] .ag-decide-lienzo {
  border-radius: 10px;
  /* Un punto por debajo del blanco puro para que no deslumbre sobre el negro */
  filter: brightness(.93) saturate(1.04);
  box-shadow:
    0 0 0 1px rgba(244, 241, 236, .10),
    0 30px 70px -40px rgba(0, 0, 0, .85);
}

/* ---------- La parte legal (agentes de IA) ----------
   Cuatro compromisos concretos. Nada de sellos ni de «cumplimos la
   normativa» a secas: se dice qué se hace, que es lo comprobable. */
.lg-lista {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(28px, 3.4vw, 52px);
  margin: clamp(44px, 6vw, 68px) 0 0;
  padding: 0;
}
@media (max-width: 780px) { .lg-lista { grid-template-columns: 1fr; } }

.lg-lista li {
  border-top: 1px solid var(--bronce);
  padding-top: 20px;
}
.lg-lista h3 {
  font-size: 17px;
  font-weight: 500;
  line-height: 1.35;
  margin: 0 0 10px;
  color: var(--grafito);
}
.lg-lista p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--gris-calido);
}

/* La letra pequeña: es donde van las referencias exactas */
.lg-nota {
  margin: clamp(38px, 5vw, 58px) 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--arena);
  max-width: 74ch;
  font-size: 13px;
  line-height: 1.75;
  color: var(--gris-calido);
}
.lg-nota b { font-weight: 500; color: var(--grafito); }

/* ---------- Aviso de error del formulario ----------
   Terracota, no rojo de alarma: es un contratiempo, no una catástrofe. */
.fc-aviso {
  margin: 0 0 30px;
  padding: 20px 22px;
  border-left: 2px solid var(--acento);
  background: color-mix(in srgb, var(--acento) 7%, transparent);
  border-radius: 0 6px 6px 0;
}
.fc-aviso p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--grafito);
}
/* La segunda línea es secundaria y en --gris-calido llega a 4,75 sobre el
   panel teñido: se queda. El enlace sí se quedaba corto (4,47), y por eso
   baja de tono un punto. */
.fc-aviso p + p { margin-top: 10px; color: var(--gris-calido); }
.fc-aviso b { font-weight: 600; }
.fc-aviso a { color: #8A4A1E; text-underline-offset: 3px; }
[data-tema="oscuro"] .fc-aviso a { color: var(--acento); }
.fc-aviso:focus { outline: none; }
.fc-aviso:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; }

/* ---------- Saltar al contenido ----------
   Invisible hasta que se le da el foco con el tabulador. Sin esto, quien
   navegue con teclado tiene que pasar por los cinco enlaces del menú en
   cada página antes de llegar al texto. */
.salta-al-contenido {
  position: absolute;
  left: 0;
  top: -100px;
  z-index: 100;
  padding: 14px 22px;
  background: var(--grafito);
  color: var(--hueso);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  border-radius: 0 0 6px 0;
}
.salta-al-contenido:focus {
  top: 0;
  outline: 2px solid var(--acento);
  outline-offset: 2px;
}