/* ==========================================================================
   Maparanking — Landing Page
   Diseño: Figma / "Page 5" · Frame 28 (1920 × 12762)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Color */
  --blue:       #4020FF;
  --blue-card:  #3823F9;
  --blue-tri:   #6068FF;
  --navy-a:     #000457;
  --navy-b:     #230CAF;
  --ink:        #1A1A1A;
  --ink-card:   #1F1919;
  --grey-100:   #F1F1F1;
  --grey-200:   #E7E7E7;
  --grey-300:   #D0D0D0;
  --grey-text:  #9C9C9C;
  --white:      #FFFFFF;

  /* Tipografía */
  --font-display: 'Tosh', 'Outfit', 'Switzer', system-ui, sans-serif;
  --font-body:    'Switzer', 'Outfit', system-ui, -apple-system, sans-serif;

  /* Escala fluida — referencia: 1920px */
  --fs-h1:      clamp(2.2rem,  3.75vw, 4.5rem);    /* 72 */
  --fs-display: clamp(1.85rem, 2.92vw, 3.5rem);    /* 56 */
  --fs-banner:  clamp(1.4rem,  2.29vw, 2.75rem);   /* 44 */
  --fs-lg:      clamp(1.05rem, 1.35vw, 1.63rem);   /* 26 */
  --fs-md:      clamp(1rem,    1.25vw, 1.5rem);    /* 24 */
  --fs-body:    clamp(.95rem,  1.1vw,  1.31rem);   /* 21 */
  --fs-sm:      clamp(.88rem,  1vw,    1.19rem);   /* 19 */
  --fs-xs:      clamp(.8rem,   .89vw,  1.06rem);   /* 17 */

  /* Ritmo — escala de espaciado, base 4.
     El contraste no sale de inventar un valor por sección, sino de distinguir
     dos tipos: los MOVIMIENTOS llevan el contenido, los COMPASES son una sola
     frase y cambian el tempo. */
  --gap:  clamp(12px, 1vw, 19px);
  --space-sm: clamp(14px, 1.25vw, 24px);
  --space-md: clamp(20px, 1.88vw, 36px);
  --space-lg: clamp(32px, 3.13vw, 60px);
  --space-xl: clamp(44px, 4.79vw, 92px);
  --space-section: clamp(68px, 6.67vw, 128px);
  --space-beat:    clamp(92px, 10vw,   192px);
  --r:    clamp(8px, .63vw, 12px);       /* radio de tarjeta */

  /* Movimiento */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-soft:   cubic-bezier(0.4, 0, 0.2, 1);
  --shift: 14px;   /* desplazamiento de entrada; 0 con reduced-motion */
  --press: 0.975;  /* escala al pulsar; 1 con reduced-motion */

  --header-h: clamp(60px, 4.06vw, 78px);
}

/* --------------------------------------------------------------------------
   2. Reset / base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.34;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
strong, b { font-weight: 700; }

/* Superficies del navegador: también son parte del diseño */
::selection { background: var(--blue); color: var(--white); }
html { scrollbar-color: var(--blue) var(--grey-100); }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--grey-100); }
::-webkit-scrollbar-thumb { background: var(--blue); border: 3px solid var(--grey-100); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--navy-b); }

:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
  border-radius: 2px;
}
.hero :focus-visible, .split-cta :focus-visible, .intent :focus-visible,
.system :focus-visible, .pricing :focus-visible, .site-footer :focus-visible,
.banner :focus-visible, .map-card--blue :focus-visible, .map-card--dark :focus-visible {
  outline-color: var(--white);
}

.u-visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.shell {
  width: 100%;
  max-width: 1920px;
  margin-inline: auto;
  padding-inline: clamp(20px, 1.88vw, 36px);
}
/* 1506 - padding = 1434, el ancho que tienen las filas de FAQ en el diseño */
.shell--narrow { max-width: 1506px; }

.h-display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.012em;
}
.h-display strong { font-weight: 700; }
.h-display--blue  { color: var(--blue); }
.h-display--light { color: var(--white); }

.bullet {
  display: inline-block;
  width: .4em; height: .4em;
  margin-right: .5em;
  background: currentColor;
  vertical-align: middle;
}

/* Fondo callejero */
.section--map { position: relative; background: var(--white); isolation: isolate; }
.section--map::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: url("../assets/img/map-light.svg") center / cover no-repeat;
}

/* --------------------------------------------------------------------------
   3. Header
   -------------------------------------------------------------------------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--header-h);
  display: flex; align-items: center;
  color: var(--white);
  transition: background-color .32s var(--ease-soft), box-shadow .32s var(--ease-soft);
}
.site-header.is-stuck { background: var(--blue); box-shadow: 0 12px 40px rgba(26,26,26,.2); }

.site-header__inner { display: flex; align-items: center; gap: clamp(24px, 3.2vw, 62px); }

.logo {
  display: flex; align-items: center; gap: .5em;
  flex: none;
  transition: transform 160ms var(--ease-out);
}
.logo:active { transform: scale(var(--press)); }
.logo__mark { width: clamp(34px, 2.53vw, 48px); height: auto; }
.logo__word {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.2rem, 1.67vw, 2rem);
  letter-spacing: -0.005em;
  white-space: nowrap;
}
.logo__word sup { font-size: .32em; vertical-align: super; }

.nav { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 46px); }
.nav a {
  position: relative;
  font-size: var(--fs-sm);
  font-weight: 500;
  white-space: nowrap;
  padding: 6px 0;
}
.nav a::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--ease-out);
}

/* Acceso al panel: con borde para distinguirlo de las anclas de la pagina,
   porque no baja a una seccion sino que lleva a otro sitio. */
.nav .nav__acceso {
  padding: 8px 16px;
  border: 1px solid rgba(255, 255, 255, .65);
  border-radius: 4px;
  transition: background-color 200ms var(--ease-soft), color 200ms var(--ease-soft), border-color 200ms var(--ease-soft);
}
.nav .nav__acceso::after { display: none; }
/* En escritorio se saca del grupo de anclas y va al extremo derecho, con el
   mismo margen lateral que el resto de la pagina. Se ancla a la cabecera
   (que es fixed) y no al nav. En movil sigue dentro del menu desplegable. */
@media (min-width: 901px) {
  .nav .nav__acceso {
    position: absolute;
    right: clamp(20px, 1.88vw, 36px);
    top: 50%;
    transform: translateY(-50%);
  }
}

.nav-toggle { display: none; width: 44px; height: 44px; position: relative; margin-left: auto; }
.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  position: absolute; left: 10px;
  width: 24px; height: 2px;
  background: currentColor;
  transition: transform .32s var(--ease-out), opacity .18s linear;
}
.nav-toggle__bars { top: 21px; }
.nav-toggle__bars::before { content: ""; top: -7px; left: 0; }
.nav-toggle__bars::after  { content: ""; top:  7px; left: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(7px) rotate(-90deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after  { opacity: 0; }

/* --------------------------------------------------------------------------
   4. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  background: var(--blue);
  color: var(--white);
  overflow: hidden;
  min-height: clamp(540px, 41.15vw, 790px);
  display: flex; align-items: center;
}
.hero__art { position: absolute; inset: 0; pointer-events: none; }
.hero__art svg { width: 100%; height: 100%; }

.hero__inner {
  position: relative; z-index: 1;
  padding-top: calc(var(--header-h) + clamp(34px, 5.4vw, 104px));
  padding-bottom: clamp(30px, 3vw, 56px);
}

.hero__title {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: 300;
  line-height: 1.02;
  letter-spacing: -0.015em;
}
.hero__title strong { font-weight: 700; }

.hero__lead {
  margin-top: var(--space-md);
  font-size: var(--fs-body);
  line-height: 1.3;
  max-width: 46ch;
}

.pills {
  display: flex; flex-wrap: wrap;
  gap: clamp(8px, .73vw, 14px);
  margin-top: clamp(26px, 5.7vw, 110px);
  max-width: 32em;
}
.pills li {
  padding: .58em 1.1em;
  border-radius: 8px;
  background: rgba(255,255,255,.26);
  font-size: var(--fs-sm);
  line-height: 1.15;
}

/* --------------------------------------------------------------------------
   5. CTA doble
   -------------------------------------------------------------------------- */
.split-cta { display: grid; grid-template-columns: 1fr 1fr; }
.split-cta__item {
  position: relative;
  display: grid; place-items: center;
  min-height: clamp(108px, 10.9vw, 210px);
  /* Padding simetrico: la flecha va posicionada en absoluto, asi que no hay
     que empujar el texto hacia abajo para esquivarla. Con el padding
     asimetrico anterior la etiqueta quedaba descentrada hacia abajo. */
  padding: clamp(34px, 3.4vw, 64px) clamp(16px, 2.5vw, 48px);
  color: var(--white);
  font-size: var(--fs-md);
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  text-align: center;
  overflow: hidden;
  transition: transform 200ms var(--ease-out);
}
.split-cta__item--a { background: var(--navy-a); }
.split-cta__item--b { background: var(--navy-b); }
.split-cta__item > span { position: relative; z-index: 1; }
.split-cta__item::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--blue);
  clip-path: inset(0 100% 0 0);
  transition: clip-path 240ms var(--ease-out);
}
.split-cta__arrow {
  position: absolute;
  top: clamp(16px, 1.7vw, 32px);
  right: clamp(16px, 2vw, 38px);
  z-index: 1;
  width: clamp(24px, 1.98vw, 38px);
  transition: transform 260ms var(--ease-out);
}
.split-cta__item:active { transform: scale(.995); }

/* --------------------------------------------------------------------------
   6. Problema
   -------------------------------------------------------------------------- */
.problem { padding-block: 0 var(--space-section); }

.mapscene { position: relative; aspect-ratio: 1920 / 690; min-height: 260px; }
.mapscene__pin { position: absolute; width: 2.1%; }
.mapscene__pin--1 { left: 11.1%; top: 21.4%; }
.mapscene__pin--2 { left: 27.6%; top: 42.9%; }
.mapscene__pin--3 { left: 26.0%; top: 58.6%; }
.mapscene__pin--4 { left: 87.8%; top: 69.3%; }

.mapscene__card {
  position: absolute;
  left: 55.8%; top: 41.4%;
  width: 14.9%;
  padding: 0 0 7px 7px;
  background: var(--blue-tri);
  border-radius: calc(var(--r) + 4px);
}
.mapscene__card img { width: 100%; border-radius: var(--r); }

.tooltip {
  display: flex; align-items: center;
  gap: clamp(10px, 1.05vw, 20px);
  padding: clamp(12px, 1.15vw, 22px) clamp(16px, 1.56vw, 30px);
  background: var(--grey-200);
  border-radius: var(--r);
  position: relative;
}
.tooltip::after {
  content: "";
  position: absolute; left: 2px; bottom: 4px;
  border-width: 0 0 clamp(20px, 2.2vw, 42px) clamp(20px, 2.2vw, 42px);
  border-style: solid;
  border-color: transparent transparent transparent var(--grey-300);
  transform: translate(-96%, 44%);
}
.tooltip__mark { width: clamp(30px, 2.2vw, 42px); flex: none; }
.tooltip__text { display: grid; gap: .1em; line-height: 1.2; }
.tooltip__text strong { color: var(--blue); font-size: var(--fs-sm); font-weight: 600; }
.tooltip__text span   { font-size: var(--fs-sm); }

.mapscene__tooltip { position: absolute; left: 73.3%; top: 24.3%; width: 19.5%; }

.problem__title { margin-top: var(--space-lg); }

/* Proporciones del diseño: columna izquierda 914, calle 175, derecha 759 */
.problem__grid {
  display: grid;
  grid-template-columns: minmax(0, 49.5%) minmax(0, 41%);
  column-gap: 9.5%;
  row-gap: var(--space-lg);
  /* Mas cerca del titular que del contenido: la entradilla pertenece al titulo */
  margin-top: var(--space-md);
}
.problem__lead { line-height: 1.35; }

.loss-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
  margin-top: var(--space-lg);
}
.loss-card {
  position: relative;
  display: flex; flex-direction: column; justify-content: flex-end;
  aspect-ratio: 292 / 340;
  padding: clamp(14px, 1.35vw, 26px);
  background: var(--grey-200);
  border-radius: var(--r);
  color: var(--blue);
  font-size: var(--fs-sm);
  line-height: 1.28;
}
.loss-card__num {
  position: absolute; top: clamp(12px, 1.25vw, 24px); left: clamp(14px, 1.35vw, 26px);
  color: var(--ink); font-size: var(--fs-xs);
}
.loss-card__icon {
  position: absolute; top: clamp(12px, 1.25vw, 24px); right: clamp(14px, 1.35vw, 26px);
  width: clamp(24px, 2.08vw, 40px);
}

.results { display: grid; gap: clamp(10px, 1.25vw, 24px); }
.result {
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(12px, 1.25vw, 24px);
  padding: clamp(14px, 1.35vw, 26px);
  background: var(--grey-200);
  border-radius: var(--r);
  color: var(--blue);
  transition: transform 220ms var(--ease-out), background-color 220ms var(--ease-soft);
}
.result__name {
  font-size: var(--fs-md);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .012em;
  line-height: 1.15;
}
.result__name span { font-weight: 300; padding-inline: .18em; }
.result__city {
  margin-top: .18em;
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: .02em;
}
.result__meta { margin-top: .85em; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.stars { letter-spacing: .06em; }
.result__thumb {
  flex: none;
  width: clamp(78px, 6.98vw, 134px);
  aspect-ratio: 134 / 115;
  object-fit: cover;
  border-radius: calc(var(--r) - 4px);
}
.result--top { background: var(--blue); color: var(--white); }

/* --------------------------------------------------------------------------
   7. Banner
   -------------------------------------------------------------------------- */
.banner {
  display: grid; place-items: center;
  padding: var(--space-beat) clamp(20px, 3vw, 40px);
  background: var(--blue);
}
.banner__text {
  font-family: var(--font-display);
  font-size: var(--fs-banner);
  font-weight: 300;
  line-height: 1.16;
  color: var(--white);
  text-align: center;
  text-wrap: balance;
}
.banner__text strong { font-weight: 700; }

/* --------------------------------------------------------------------------
   8. Intención
   -------------------------------------------------------------------------- */
.intent {
  background: var(--ink);
  color: var(--white);
  padding-block: var(--space-beat);
  text-align: center;
}
.intent__lead {
  margin-top: var(--space-md);
  color: var(--grey-text);
  font-size: var(--fs-md);
  line-height: 1.3;
}
.intent__quad {
  width: clamp(56px, 4.27vw, 82px);
  margin: clamp(30px, 3.4vw, 66px) auto 0;
}
.intent__question { margin-top: clamp(30px, 3.6vw, 70px); font-size: var(--fs-lg); }

/* --------------------------------------------------------------------------
   9. Qué es Maparanking + sistema MAP
   -------------------------------------------------------------------------- */
.about { padding-block: var(--space-section); }
.about__tab {
  position: absolute; top: 0; right: 0;
  width: 33%; height: clamp(28px, 2.9vw, 56px);
  background: var(--blue);
}
.about__copy p { margin-top: 1.1em; line-height: 1.35; }
.about__copy p:first-of-type { margin-top: var(--space-md); }

/* Ruta del sistema sobre el mapa: hace visible lo que dice la sección —
   un método progresivo, no acciones aisladas. */
/* El mapa va a sangre y hace de fondo; la ruta se dibuja encima, centrada */
.route {
  position: relative;
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  margin-block: var(--space-lg);
  aspect-ratio: 1600 / 400;
}
.route__map {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  /* Sin esto el mapa entra y sale con dos cortes rectos a todo el ancho y
     choca con el patrón tenue de la sección. Así se disuelve en la página. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 15%, #000 85%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 15%, #000 85%, transparent 100%);
}

.route__trace { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.route__trace--casing { stroke: #2A0FB0; stroke-width: 15; }
.route__trace--line   { stroke: var(--blue); stroke-width: 9; }

.route__stops { position: absolute; inset: 0; }
.route__stop { position: absolute; }
.route__stop--1 { left: 30%;    top: 80%; }
.route__stop--2 { left: 42.5%;  top: 52%; }
.route__stop--3 { left: 56.25%; top: 62%; }
.route__stop--4 { left: 70%;    top: 26%; }

/* Marcadores de navegación: origen, paradas y destino */
.route__dot {
  position: absolute;
  top: 0; left: 0;
  transform: translate(-50%, -50%);
  width: clamp(15px, 1.15vw, 22px); aspect-ratio: 1;
  background: var(--blue);
  border: 3px solid var(--white);
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 4, 87, .35);
}
.route__dot--origin {
  background: var(--white);
  border: clamp(4px, .36vw, 7px) solid var(--blue);
  width: clamp(17px, 1.35vw, 26px);
}
.route__dot--goal {
  /* El contenedor de la parada mide 0: sin esto el reset lo colapsaría */
  max-width: none;
  width: clamp(26px, 2.19vw, 42px);
  height: auto; aspect-ratio: 24 / 32;
  background: none; border: 0; border-radius: 0;
  fill: var(--blue);
  transform: translate(-50%, -100%);
  /* La sombra de caja del punto genérico dibujaría un rectángulo tras el pin:
     aquí la sombra tiene que seguir la silueta, y de eso se encarga el filtro. */
  box-shadow: none;
  filter: drop-shadow(0 3px 5px rgba(0, 4, 87, .4));
}

.route__label {
  position: absolute;
  left: 50%;
  display: grid;
  gap: .15em;
  width: max-content;
  max-width: 15rem;
  padding: clamp(8px, .73vw, 14px) clamp(11px, 1vw, 19px);
  background: var(--white);
  border-radius: var(--r);
  box-shadow: 0 2px 4px rgba(26, 26, 26, .12), 0 8px 20px rgba(26, 26, 26, .13);
  font-size: var(--fs-xs);
  line-height: 1.25;
  color: var(--ink);
}
.route__label b { color: var(--blue); font-weight: 600; }

/* Cada parada coloca su etiqueta donde no pisa la línea */
.route__stop--1 .route__label,
.route__stop--3 .route__label { top: clamp(18px, 1.6vw, 30px); transform: translateX(-50%); }
.route__stop--2 .route__label,
.route__stop--4 .route__label { bottom: clamp(18px, 1.6vw, 30px); transform: translateX(-50%); }
/* La ficha del destino se aparta para dejar ver el pin */
.route__stop--4 .route__label {
  bottom: clamp(46px, 3.7vw, 71px);
  transform: translateX(-76%);
}

.route__label--goal {
  display: flex; align-items: center; gap: .7em;
  background: var(--blue);
  color: var(--white);
}
.route__label--goal b { color: rgba(255, 255, 255, .72); }
.route__label--goal > svg { width: clamp(22px, 1.77vw, 34px); flex: none; }
.route__label--goal span { display: grid; gap: .15em; }

.about__map-title { margin-top: var(--space-xl); }

.map-cards {
  display: grid;
  grid-template-columns: 32.6% 34.4% 33%;
  align-items: end;
  margin-top: var(--space-lg);
}
.map-card { display: flex; flex-direction: column; min-width: 0; }
.map-card--blue .map-card__head { background: var(--blue-card); }
.map-card--dark .map-card__head { background: var(--ink-card); }
.map-card--low  { --head-pad: clamp(14px, 1.5vw, 28px); }
.map-card--mid  { --head-pad: clamp(14px, 4.5vw, 86px); }
.map-card--high { --head-pad: clamp(14px, 7.8vw, 150px); }

.map-card__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; width: 100%;
  padding: var(--head-pad) clamp(16px, 1.56vw, 30px) clamp(14px, 1.35vw, 26px);
  color: var(--white);
  text-align: left;
  border-radius: var(--r) var(--r) 0 0;
  transition: transform 180ms var(--ease-out);
}
.map-card__head:active { transform: scale(.995); }
.map-card__title { font-size: var(--fs-md); font-weight: 400; line-height: 1.22; }
.map-card__title strong { font-weight: 700; }

.map-card__plus {
  position: relative; flex: none;
  width: clamp(18px, 1.25vw, 24px); aspect-ratio: 1;
  margin-bottom: .25em;
}
.map-card__plus::before,
.map-card__plus::after {
  content: "";
  position: absolute; inset: 50% 0 auto 0;
  height: 2px; margin-top: -1px;
  background: currentColor;
  transition: transform .34s var(--ease-out);
}
.map-card__plus::after { transform: rotate(90deg); }
.map-card__head[aria-expanded="true"] .map-card__plus::after { transform: rotate(0deg); }

.map-card__panel {
  display: grid;
  grid-template-rows: 1fr;
  background: var(--grey-100);
  border-radius: 0 0 var(--r) var(--r);
  transition: grid-template-rows .4s var(--ease-out);
}
.map-card__head[aria-expanded="false"] + .map-card__panel { grid-template-rows: 0fr; }
.map-card__panel ul {
  overflow: hidden;
  min-height: 0;
  padding: clamp(12px, 1.35vw, 26px) clamp(16px, 1.56vw, 30px);
}
.map-card__panel li {
  display: flex; gap: .75em;
  padding: clamp(9px, 1vw, 19px) 0;
  font-size: var(--fs-body);
  line-height: 1.25;
  border-bottom: 1px solid var(--grey-300);
}
.map-card__panel li:last-child { border-bottom: 0; }
.map-card__panel li::before {
  content: ""; flex: none;
  width: .4em; height: .4em; margin-top: .52em;
  background: var(--blue);
}

/* --------------------------------------------------------------------------
   Subida en el ranking
   Las filas no se reordenan en el DOM: cada una se coloca en su hueco con un
   transform, asi el movimiento es interrumpible y va por GPU. Los numeros de
   posicion son fijos; lo que se mueve es la ficha.
   -------------------------------------------------------------------------- */
.climb-section { padding-block: var(--space-section); }
/* Unica seccion con el texto centrado: lo que sostiene es una ilustracion
   simetrica, y un titular al margen la dejaba descolgada. */
.climb-section__title { text-align: center; text-wrap: balance; }
.climb-section__lead {
  margin: var(--space-md) auto 0;
  /* Centrado, un salto de linea a mano dejaba un segundo renglon de tres
     palabras: aqui el reparto lo decide el navegador. */
  max-width: 56ch;
  text-align: center;
  text-wrap: balance;
  font-size: var(--fs-md);
  line-height: 1.3;
}
.climb-section__note {
  /* El pie pertenece a la ilustracion, no al texto: comparte su caja para
     que arranque donde arranca el bloque y no en el margen de la seccion. */
  max-width: 1100px;
  margin: var(--space-md) auto 0;
  font-size: var(--fs-xs);
  color: #6a6a6a;
}

.climb {
  --row-h: clamp(74px, 6.6vw, 126px);
  --row-gap: clamp(8px, .73vw, 14px);
  position: relative;
  display: grid;
  grid-template-columns: clamp(38px, 3.6vw, 68px) minmax(0, 1fr);
  gap: clamp(14px, 1.56vw, 30px);
  margin-top: var(--space-lg);
  /* Las filas se estiran mal mas alla de este ancho, pero sin centrar el
     bloque la shell le dejaba casi 300px muertos a la derecha. */
  max-width: 1100px;
  margin-inline: auto;
}

.climb__slots { display: grid; grid-auto-rows: var(--row-h); gap: var(--row-gap); }
.climb__slots li { display: grid; place-items: center; }
.climb__slots span {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1.56vw, 1.88rem);
  font-weight: 500;
  color: var(--grey-300);
  transition: color .4s var(--ease-soft);
}
.climb__slots li:first-child span { color: var(--blue); }

.climb__list {
  position: relative;
  height: calc(var(--row-h) * 4 + var(--row-gap) * 3);
}
.climb__row {
  position: absolute;
  inset: 0 0 auto 0;
  height: var(--row-h);
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.25vw, 24px);
  padding: 0 clamp(14px, 1.35vw, 26px);
  background: var(--grey-200);
  border-radius: var(--r);
  transform: translateY(calc(var(--slot) * (var(--row-h) + var(--row-gap))));
  transition: transform .62s var(--ease-out), background-color .45s var(--ease-soft), color .45s var(--ease-soft);
}
.climb__thumb {
  flex: none;
  display: grid; place-items: center;
  width: clamp(44px, 3.9vw, 74px);
  aspect-ratio: 1;
  background: var(--grey-300);
  border-radius: calc(var(--r) - 4px);
}
.climb__thumb svg { width: 56%; }
.climb__body { display: grid; gap: .2em; min-width: 0; }
.climb__name {
  font-size: var(--fs-md);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .012em;
  line-height: 1.15;
}
.climb__meta { font-size: var(--fs-sm); }
.climb__flag {
  margin-left: auto;
  flex: none;
  padding: .4em .9em;
  border-radius: 999px;
  background: rgba(255, 255, 255, .22);
  font-size: var(--fs-xs);
  font-weight: 600;
  opacity: 0;
  transition: opacity .4s var(--ease-soft);
}

.climb__row--mine {
  background: var(--navy-b);
  color: var(--white);
  z-index: 1;
}
.climb__row--mine .climb__thumb { background: rgba(255, 255, 255, .18); }
/* Al llegar arriba pasa al azul de marca y se identifica */
.climb.is-first .climb__row--mine { background: var(--blue); }
.climb.is-first .climb__flag { opacity: 1; }

@media (max-width: 760px) {
  .climb { --row-h: clamp(86px, 22vw, 110px); grid-template-columns: 26px minmax(0, 1fr); }
  .climb__name { font-size: var(--fs-sm); }
  .climb__meta { font-size: var(--fs-xs); }
  .climb__flag { display: none; }
  .climb-section__title br, .ai__title br { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  /* Sin recorrido: se muestra el resultado */
  .climb__row { transition: background-color .2s linear; }
}

/* --------------------------------------------------------------------------
   10. Qué incluye
   -------------------------------------------------------------------------- */
.includes { padding-block: var(--space-section); }
.includes__lead { margin-top: var(--space-md); font-size: var(--fs-md); line-height: 1.3; }

.feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap);
  margin-top: var(--space-lg);
}
.feature {
  position: relative;
  min-height: clamp(120px, 8.75vw, 168px);
  padding: clamp(18px, 1.35vw, 26px) clamp(90px, 8vw, 154px) clamp(18px, 1.35vw, 26px) clamp(18px, 1.35vw, 26px);
  border-radius: var(--r);
  color: var(--white);
  transition: transform 240ms var(--ease-out), box-shadow 240ms var(--ease-out);
}
.feature--dark { background: var(--ink-card); }
.feature--blue { background: var(--blue-card); }
.feature h3 { font-size: var(--fs-md); font-weight: 600; line-height: 1.2; }
.feature p { margin-top: .7em; font-size: var(--fs-sm); line-height: 1.3; }
.feature__ir {
  display: inline-block; margin-top: .9em;
  font-size: var(--fs-sm); font-weight: 600; color: var(--white);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px;
}
.feature__ir::after { content: ' →'; }
.feature__ir:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }
.feature__icon {
  position: absolute;
  top: clamp(18px, 1.6vw, 31px);
  right: clamp(18px, 1.9vw, 37px);
  width: clamp(34px, 3.28vw, 63px);
  height: auto;
  transition: transform 320ms var(--ease-out);
}

/* --------------------------------------------------------------------------
   10b. El trabajo y los números
   Primero lo que hacemos (cuatro tarjetas), después el panel como prueba del
   resultado. Todo son capturas del panel de ejemplo; en móvil algunas se
   cambian por las de su vista móvil, porque la de escritorio reducida no se lee.
   -------------------------------------------------------------------------- */
.vistazo { padding-bottom: var(--space-section); }
.vistazo__title { text-wrap: balance; }
.vistazo__lead { margin-top: var(--space-md); max-width: 52ch; font-size: var(--fs-md); line-height: 1.3; }

.vistazo__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md) var(--gap);
  margin-top: var(--space-lg);
}
.vistazo__pieza { display: flex; flex-direction: column; }
.vistazo__escena {
  display: grid; place-items: center;
  aspect-ratio: 16 / 10;
  /* La escena manda en el tamaño y la captura cabe dentro (unidades cq) */
  container-type: size;
  padding: clamp(16px, 1.8vw, 34px);
  border-radius: var(--r);
  background: var(--grey-100);
}
.vistazo__escena picture { display: contents; }
.vistazo__escena img {
  max-width: 100cqw; max-height: 100cqh;
  width: auto; height: auto;
  border-radius: calc(var(--r) - 2px);
  background: var(--white);
  box-shadow: 0 14px 34px -16px rgba(0, 4, 87, .3);
}
.vistazo__pieza figcaption { padding: var(--space-sm) 4px 0; }
.vistazo__pieza h3 { font-size: var(--fs-md); font-weight: 600; line-height: 1.2; }
.vistazo__pieza p { margin-top: .5em; max-width: 56ch; font-size: var(--fs-sm); line-height: 1.35; color: #4a4a4a; }

.vistazo__resultado { margin-top: var(--space-xl); }
.vistazo__sub {
  font-family: var(--font-display);
  font-size: var(--fs-banner);
  font-weight: 500;
  line-height: 1.1;
  color: var(--blue);
  text-wrap: balance;
}
.vistazo__resultado p { margin-top: .6em; max-width: 52ch; font-size: var(--fs-md); line-height: 1.3; }

.vistazo__pantalla {
  margin-top: var(--space-md);
  overflow: hidden;
  border: 1px solid var(--grey-200);
  border-radius: var(--r);
  background: var(--white);
  box-shadow: 0 30px 70px -30px rgba(0, 4, 87, .35), 0 6px 18px rgba(26, 26, 26, .06);
}
.vistazo__barra {
  display: flex; align-items: center; gap: 7px;
  height: clamp(30px, 2.2vw, 42px);
  padding-inline: clamp(12px, 1vw, 18px);
  background: var(--grey-100);
  border-bottom: 1px solid var(--grey-200);
}
.vistazo__barra i { width: 10px; height: 10px; border-radius: 50%; background: var(--grey-300); }
.vistazo__barra span {
  margin-left: clamp(10px, 1vw, 18px);
  padding: .25em 1em;
  border-radius: 999px;
  background: var(--white);
  font-size: var(--fs-xs);
  color: #6a6a6a;
}
.vistazo__pantalla img { display: block; width: 100%; height: auto; }

.vistazo__pie {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-sm) var(--space-md);
  flex-wrap: wrap;
  margin-top: var(--space-lg);
}
.vistazo__nota { font-size: var(--fs-xs); color: #6a6a6a; }
.vistazo__pie .btn--outline { width: auto; margin: 0; padding-inline: clamp(24px, 2.4vw, 46px); }

@media (max-width: 1100px) {
  .vistazo__escena { aspect-ratio: 4 / 3; }
}
@media (max-width: 760px) {
  .vistazo__grid { grid-template-columns: 1fr; }
  .vistazo__escena { aspect-ratio: auto; container-type: normal; }
  .vistazo__escena img { max-width: 100%; max-height: none; width: min(100%, 360px); }
  .vistazo h2 br { display: none; }
  .vistazo__pantalla { max-width: 420px; margin-inline: auto; }
  .vistazo__barra span { display: none; }
  .vistazo__pie { flex-direction: column; align-items: stretch; text-align: center; }
  .vistazo__pie .btn--outline { width: 100%; }
}

/* --------------------------------------------------------------------------
   11. Sistema (CTA azul)
   -------------------------------------------------------------------------- */
.system {
  position: relative;
  background: var(--blue);
  color: var(--white);
  padding-block: var(--space-beat);
  overflow: hidden;
}
.system__art { position: absolute; inset: 0; pointer-events: none; }
.system__sheet {
  position: absolute;
  border-radius: 4px;
  box-shadow: -30px 24px 0 -6px var(--blue-tri);
}
.system__sheet--back {
  right: -6%; top: 6%;
  width: 30%; aspect-ratio: 1.15;
  background: #EFEFEF;
  transform: rotate(-24deg);
}
.system__sheet--front {
  right: 14%; top: 22%;
  width: 24%; aspect-ratio: 1.05;
  background: #FBFBFB;
  transform: rotate(-14deg);
}

.system__inner { position: relative; z-index: 1; }
.system__text {
  font-family: var(--font-display);
  font-size: var(--fs-banner);
  font-weight: 300;
  line-height: 1.2;
}
.system__text strong { font-weight: 500; }
.system__text span { color: rgba(255,255,255,.62); }

/* --------------------------------------------------------------------------
   12. Botones
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .7em;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  transition: transform 160ms var(--ease-out),
              background-color 240ms var(--ease-soft),
              color 240ms var(--ease-soft),
              border-color 240ms var(--ease-soft);
}
.btn svg { width: 1.5em; height: auto; flex: none; }
.btn:active { transform: scale(var(--press)); }

.btn--outline-light {
  margin-top: var(--space-lg);
  padding: clamp(14px, 1.35vw, 26px) clamp(22px, 2.1vw, 40px);
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 4px;
  color: var(--white);
  font-size: var(--fs-sm);
}
.btn--outline {
  display: flex;
  width: min(100%, 410px);
  margin: clamp(24px, 2.8vw, 54px) auto 0;
  padding: clamp(14px, 1.35vw, 26px) 24px;
  border: 1px solid var(--blue);
  border-radius: 4px;
  color: var(--blue);
  font-size: var(--fs-sm);
}
.btn--solid {
  margin-top: clamp(28px, 3.2vw, 62px);
  min-width: clamp(220px, 15.3vw, 294px);
  padding: clamp(16px, 1.56vw, 30px) clamp(24px, 2.4vw, 46px);
  background: var(--blue);
  border-radius: 4px;
  color: var(--white);
  font-size: var(--fs-sm);
}

/* --------------------------------------------------------------------------
   13. Sin permanencia
   -------------------------------------------------------------------------- */
.permanence { padding-block: var(--space-section); }
.permanence__inner {
  display: grid;
  grid-template-columns: minmax(0, 41%) minmax(0, 59%);
  gap: clamp(28px, 3.6vw, 70px);
  align-items: start;
}
.permanence__figure img { width: 100%; border-radius: var(--r); }
.permanence__copy { padding-top: clamp(0px, 2vw, 40px); }
.permanence__copy > p { margin-top: clamp(18px, 2.2vw, 42px); font-size: var(--fs-md); line-height: 1.32; }
.permanence__kw { font-weight: 600; }
.permanence__cancel {
  margin-top: clamp(26px, 3.4vw, 66px) !important;
  color: var(--blue);
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   14. Casos de éxito
   -------------------------------------------------------------------------- */
.cases { padding-block: var(--space-section); }
.cases__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
}
.cases__kicker { font-size: var(--fs-sm); font-weight: 500; }
.cases__lead { margin-top: var(--space-md); font-size: var(--fs-md); line-height: 1.3; }

.cases__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
  margin-top: var(--space-lg);
  align-items: start;
}
.cases__photo img { width: 100%; border-radius: var(--r); }

.case { border-radius: var(--r); overflow: hidden; background: var(--white); }
.case__head { position: relative; }
.case__head img { width: 100%; aspect-ratio: 604 / 290; object-fit: cover; }
.case__head::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,0) 58%);
}
.case__label {
  position: absolute; z-index: 1;
  top: clamp(14px, 1.35vw, 26px); left: clamp(14px, 1.35vw, 26px);
  display: flex; align-items: center; gap: .6em;
}
.case__label svg { width: clamp(24px, 1.98vw, 38px); }
.case__label h3 { color: var(--white); font-size: var(--fs-md); font-weight: 600; }

/* La prueba es la captura real de Google, sin reinterpretar */
.case__proof {
  padding: clamp(14px, 1.35vw, 26px) clamp(16px, 1.56vw, 30px) clamp(16px, 1.56vw, 30px);
  background: var(--white);
}
.case__proof img {
  width: 100%;
  /* Las dos capturas tienen proporciones distintas: una caja común las
     iguala sin recortarlas, y el sobrante es blanco sobre blanco. */
  aspect-ratio: 500 / 372;
  object-fit: contain;
  object-position: center top;
  background: var(--white);
  border: 1px solid var(--grey-300);
  border-radius: calc(var(--r) - 4px);
}
.case__proof figcaption {
  margin-top: clamp(10px, 1vw, 18px);
  padding-top: clamp(10px, 1vw, 18px);
  border-top: 1px solid var(--grey-300);
  font-size: clamp(.72rem, .83vw, 1rem);
  line-height: 1.4;
  color: #5a5a5a;
}

/* --------------------------------------------------------------------------
   15. Precio
   -------------------------------------------------------------------------- */
.pricing {
  position: relative;
  background: var(--blue);
  color: var(--white);
  /* El pie extra deja sitio a la barra oscura que desborda la seccion */
  padding-block: var(--space-section) calc(var(--space-section) + clamp(30px, 4.4vw, 84px));
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}
.pricing::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: url("../assets/img/map-blue.svg") center / cover no-repeat;
}
.pricing__kicker { margin-top: var(--space-sm); font-size: var(--fs-lg); font-weight: 500; }

.price-card {
  width: min(100%, 768px);
  margin: var(--space-lg) auto 0;
  background: var(--white);
  color: var(--blue);
  text-align: left;
  clip-path: polygon(52px 0, 100% 0, 100% 100%, 0 100%, 0 52px);
  box-shadow: 0 30px 70px rgba(0, 4, 87, .24);
}
.price-card__top {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: clamp(10px, 1vw, 18px);
  margin-inline: clamp(24px, 2.4vw, 46px);
  padding: clamp(30px, 3.2vw, 62px) 0 clamp(16px, 1.56vw, 30px);
  border-bottom: 1px solid rgba(64,32,255,.4);
}
.price-card__mark { grid-row: 2; width: clamp(34px, 2.5vw, 48px); }
.price-card__label { grid-column: 2; grid-row: 1; justify-self: end; font-size: var(--fs-xs); font-weight: 500; }
.price-card__amount {
  grid-column: 2; grid-row: 2; justify-self: end;
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.02vw, 3.63rem);
  font-weight: 300;
  line-height: 1;
}
.price-card__amount span { font-weight: 700; }
/* La oferta ocupa las dos columnas de la cabecera, debajo del importe */
.price-card__oferta {
  grid-column: 1 / -1;
  margin-top: .5em;
  font-size: var(--fs-xs);
  line-height: 1.4;
  /* La tarjeta es blanca con texto azul: aqui va gris de texto, no blanco */
  color: #5a5a5a;
}
/* El precio tachado es obligatorio al anunciar una rebaja: hay que ensenar el
   precio anterior (Directiva Omnibus, art. 20 de la Ley 7/1996). */
.price-card__oferta s { color: #6a6a6a; }
.price-card__oferta strong { color: var(--blue); font-weight: 600; }

.price-card__body { padding: clamp(20px, 2.2vw, 42px) clamp(24px, 2.4vw, 46px) clamp(28px, 3vw, 58px); }
.price-card__body p { font-size: var(--fs-sm); line-height: 1.4; }
.price-card__strong { margin-top: 1.2em; font-weight: 700; }
.price-card__strong u { text-decoration-thickness: 1px; text-underline-offset: 4px; }
.price-card__demo { margin-top: 1.1em; }
.price-card__demo a { font-size: var(--fs-xs); font-weight: 600; color: var(--blue); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }

.call-bar {
  position: absolute; z-index: 2;
  right: 0; bottom: clamp(-18px, -1vw, 0px);
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(20px, 3vw, 60px);
  width: min(52%, 980px);
  padding: clamp(18px, 1.9vw, 36px) clamp(20px, 2.1vw, 40px);
  background: var(--ink-card);
  color: var(--white);
  font-size: var(--fs-sm);
  text-align: left;
  transition: transform 220ms var(--ease-out), background-color 240ms var(--ease-soft);
}
.call-bar svg { width: clamp(24px, 1.98vw, 38px); flex: none; transition: transform 260ms var(--ease-out); }
.call-bar:active { transform: scale(.995); }
.call-bar__block {
  position: absolute; z-index: 1;
  left: 0; bottom: 0;
  width: 49.5%; height: clamp(48px, 5.4vw, 104px);
  background: var(--grey-300);
}

/* --------------------------------------------------------------------------
   16. FAQ
   -------------------------------------------------------------------------- */
.faq { padding-block: var(--space-section); }
.faq__title { text-align: center; }
.faq__list { display: grid; gap: 8px; margin-top: var(--space-lg); }

.faq__item { background: var(--grey-100); border-radius: var(--r); overflow: hidden; }
.faq__item summary {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px;
  padding: clamp(20px, 2.2vw, 42px) clamp(20px, 2.4vw, 46px);
  font-size: var(--fs-lg);
  cursor: pointer;
  list-style: none;
  transition: background-color 220ms var(--ease-soft);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary svg {
  flex: none; width: clamp(20px, 1.46vw, 28px);
  color: #555;
  transition: transform .34s var(--ease-out);
}
.faq__item[open] summary svg { transform: rotate(180deg); }
.faq__wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .32s var(--ease-out);
}
.faq__item.is-open .faq__wrap { grid-template-rows: 1fr; }
.no-js .faq__item[open] .faq__wrap { grid-template-rows: 1fr; }
.faq__answer { overflow: hidden; min-height: 0; }
.faq__answer > p { padding: 0 clamp(20px, 2.4vw, 46px) clamp(22px, 2.2vw, 42px); max-width: 92ch; }
.faq__answer p { font-size: var(--fs-sm); line-height: 1.5; color: #3d3d3d; margin: 0; }

/* --------------------------------------------------------------------------
   17. CTA final
   -------------------------------------------------------------------------- */
/* El compas de cierre vale para el hueco de arriba y el de abajo, pero arriba
   la FAQ ya aporta su propio --space-section: sumados daban 160px contra 92,
   y el bloque quedaba empujado hacia abajo con un vacio encima. Se descuenta
   lo que ya pone la seccion anterior. */
.final-cta {
  padding-block: calc(var(--space-beat) - var(--space-section)) var(--space-beat);
  text-align: center;
}
.final-cta__text {
  font-family: var(--font-display);
  font-size: var(--fs-banner);
  font-weight: 300;
  line-height: 1.18;
  color: var(--blue);
  text-wrap: balance;
}
.final-cta__text strong { font-weight: 700; }

/* --------------------------------------------------------------------------
   18. Footer
   -------------------------------------------------------------------------- */
.site-footer { background: var(--ink-card); color: var(--white); }

/* El bloque azul ocupa toda la altura de la fila en vez de cortarse a media
   altura, y las columnas reparten el ancho restante en lugar de amontonarse
   a la derecha. */
.site-footer__top {
  display: grid;
  grid-template-columns: minmax(0, 27%) minmax(0, 73%);
  align-items: stretch;
}

.site-footer__brand {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(32px, 4vw, 76px);
  padding: clamp(30px, 3.4vw, 64px) clamp(22px, 2.5vw, 48px);
  background: var(--blue);
}
.site-footer__brand p {
  font-size: var(--fs-sm);
  line-height: 1.35;
  max-width: 22ch;
  color: rgba(255, 255, 255, .78);
}
.logo--footer .logo__mark { width: clamp(40px, 3.1vw, 60px); }
.logo--footer .logo__word { font-size: clamp(1.25rem, 1.88vw, 2.25rem); }

.site-footer__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 2.5vw, 48px);
  padding: clamp(30px, 3.4vw, 64px) clamp(20px, 1.88vw, 36px) clamp(30px, 3.4vw, 64px) clamp(32px, 4.2vw, 80px);
}
.site-footer__cols h2 { font-size: var(--fs-sm); font-weight: 600; }
.site-footer__cols ul { margin-top: 1.2em; display: grid; gap: .6em; }
.site-footer__cols a {
  color: var(--grey-text);
  font-size: var(--fs-sm);
  transition: color 200ms var(--ease-soft);
}

.site-footer__bottom {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  padding: clamp(20px, 2.1vw, 40px) clamp(20px, 2.5vw, 48px);
  border-top: 1px solid rgba(255, 255, 255, .12);
  color: var(--grey-text);
  font-size: var(--fs-sm);
}
.site-footer__legal { display: flex; gap: clamp(20px, 2.7vw, 52px); }
.site-footer__legal a { transition: color 200ms var(--ease-soft); }

/* ==========================================================================
   19. MOVIMIENTO
   Dos momentos con autoría (hero y escena del mapa) + estados de interacción.
   Nada de la misma entrada repetida en cada sección.
   ========================================================================== */

/* --- Hero: el plegado se despliega y el texto se asienta --- */
@keyframes hero-unfold {
  from { clip-path: polygon(0 0, 100% 0, 100% 0%, 0 -16%); }
  to   { clip-path: polygon(0 0, 100% 0, 100% 118%, 0 100%); }
}
@keyframes settle {
  from { opacity: 0; transform: translateY(var(--shift)); }
}

.js .hero__art { animation: hero-unfold 820ms var(--ease-out) 60ms both; }
.js .hero__title { animation: settle 620ms var(--ease-out) 120ms both; }
.js .hero__lead  { animation: settle 620ms var(--ease-out) 210ms both; }
.js .pills li    { animation: settle 520ms var(--ease-out) both; }
.js .pills li:nth-child(1) { animation-delay: 300ms; }
.js .pills li:nth-child(2) { animation-delay: 350ms; }
.js .pills li:nth-child(3) { animation-delay: 400ms; }

/* --- Escena del mapa: alguien ya es el #1 --- */
@keyframes pin-drop {
  from { opacity: 0; transform: translateY(calc(var(--shift) * -2.2)) scale(.9); }
  to   { opacity: 1; transform: translate(var(--dx, 0px), var(--dy, 0px)); }
}
@keyframes card-lift {
  from { opacity: 0; transform: translateY(calc(var(--shift) * 1.4)) scale(.96); }
  to   { opacity: 1; transform: translate(var(--dx, 0px), var(--dy, 0px)); }
}
@keyframes tip-pop {
  from { opacity: 0; transform: scale(.94); }
  to   { opacity: 1; transform: translate(var(--dx, 0px), var(--dy, 0px)); }
}

.io .mapscene__pin,
.io .mapscene__card,
.io .mapscene__tooltip { opacity: 0; }

.io .mapscene.is-in .mapscene__pin { animation: pin-drop 520ms var(--ease-out) both; }
.io .mapscene.is-in .mapscene__pin--1 { animation-delay:  60ms; }
.io .mapscene.is-in .mapscene__pin--2 { animation-delay: 130ms; }
.io .mapscene.is-in .mapscene__pin--3 { animation-delay: 200ms; }
.io .mapscene.is-in .mapscene__pin--4 { animation-delay: 270ms; }
.io .mapscene.is-in .mapscene__card {
  animation: card-lift 620ms var(--ease-out) 300ms both;
}
.io .mapscene.is-in .mapscene__tooltip {
  transform-origin: 0 100%;   /* nace de su propio pico */
  animation: tip-pop 420ms var(--ease-out) 520ms both;
}

/* --- La ruta del sistema se traza: el avance es el mensaje --- */
@keyframes route-draw { to { stroke-dashoffset: 0; } }
@keyframes stop-in {
  from { opacity: 0; transform: translate(-50%, -50%) scale(.4); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes pin-in {
  from { opacity: 0; transform: translate(-50%, -160%) scale(.7); }
  to   { opacity: 1; transform: translate(-50%, -100%) scale(1); }
}
@keyframes label-in { from { opacity: 0; } to { opacity: 1; } }

.io .route__trace { stroke-dasharray: 940; stroke-dashoffset: 940; }  /* longitud del trazado: 936 */
.io .route__dot, .io .route__label { opacity: 0; }

.io .route.is-in .route__trace {
  animation: route-draw 1300ms var(--ease-soft) 120ms both;
}
.io .route.is-in .route__dot   { animation: stop-in  420ms var(--ease-out) both; }
.io .route.is-in .route__label { animation: label-in 340ms var(--ease-out) both; }

.io .route.is-in .route__stop--1 .route__dot   { animation-delay:  120ms; }
.io .route.is-in .route__stop--1 .route__label { animation-delay:  240ms; }
.io .route.is-in .route__stop--2 .route__dot   { animation-delay:  470ms; }
.io .route.is-in .route__stop--2 .route__label { animation-delay:  590ms; }
.io .route.is-in .route__stop--3 .route__dot   { animation-delay:  790ms; }
.io .route.is-in .route__stop--3 .route__label { animation-delay:  910ms; }
.io .route.is-in .route__stop--4 .route__dot   { animation-name: pin-in; animation-delay: 1300ms; }
.io .route.is-in .route__stop--4 .route__label { animation-delay: 1270ms; }

/* En móvil no hay trazado que seguir —el mapa se oculta—, así que el raíl de
   la línea de tiempo hace de línea: se dibuja tramo a tramo y cada punto
   aparece cuando el raíl llega hasta él. Sin esto los cuatro puntos se
   limitaban a aparecer tras 1,3 s de espera en blanco. */
@media (max-width: 1100px) {
  @keyframes rail-draw {
    from { transform: translateX(-50%) scaleY(0); }
    to   { transform: translateX(-50%) scaleY(1); }
  }
  .io .route__stop::before,
  .io .route__stop::after { transform: translateX(-50%) scaleY(0); }
  .io .route.is-in .route__stop::before,
  .io .route.is-in .route__stop::after { animation: rail-draw var(--ease-out) both; }

  .io .route.is-in .route__stop--1 .route__dot   { animation-delay:   60ms; }
  .io .route.is-in .route__stop--1 .route__label { animation-delay:  180ms; }
  .io .route.is-in .route__stop--1::after  { animation-duration: 130ms; animation-delay:  200ms; }
  .io .route.is-in .route__stop--2::before { animation-duration:  90ms; animation-delay:  330ms; }
  .io .route.is-in .route__stop--2 .route__dot   { animation-delay:  420ms; }
  .io .route.is-in .route__stop--2 .route__label { animation-delay:  540ms; }
  .io .route.is-in .route__stop--2::after  { animation-duration: 130ms; animation-delay:  560ms; }
  .io .route.is-in .route__stop--3::before { animation-duration:  90ms; animation-delay:  690ms; }
  .io .route.is-in .route__stop--3 .route__dot   { animation-delay:  780ms; }
  .io .route.is-in .route__stop--3 .route__label { animation-delay:  900ms; }
  .io .route.is-in .route__stop--3::after  { animation-duration: 130ms; animation-delay:  920ms; }
  .io .route.is-in .route__stop--4::before { animation-duration:  90ms; animation-delay: 1050ms; }
  .io .route.is-in .route__stop--4 .route__dot   { animation-delay: 1140ms; }
  .io .route.is-in .route__stop--4 .route__label { animation-delay: 1260ms; }
}

/* --- La IA responde: la pregunta entra y la respuesta se escribe --- */
@keyframes ai-ask-in {
  from { opacity: 0; transform: translateY(var(--shift)); }
  to   { opacity: 1; transform: none; }
}
@keyframes ai-line-in {
  from { opacity: 0; clip-path: inset(0 100% 0 0); }
  to   { opacity: 1; clip-path: inset(0 0 0 0); }
}
@keyframes ai-name-in {
  from { box-shadow: inset 0 -.12em 0 transparent; }
  to   { box-shadow: inset 0 -.12em 0 var(--blue); }
}

.io .ai__ask, .io .ai__answer { opacity: 0; }
.io .ai__line { opacity: 0; clip-path: inset(0 100% 0 0); }
.io .ai__name { box-shadow: inset 0 -.12em 0 transparent; }

.io .ai.is-in .ai__ask    { animation: ai-ask-in 420ms var(--ease-out) 60ms both; }
.io .ai.is-in .ai__answer { animation: ai-ask-in 420ms var(--ease-out) 460ms both; }
.io .ai.is-in .ai__line   { animation: ai-line-in 300ms var(--ease-soft) both; }
.io .ai.is-in .ai__line:nth-child(1) { animation-delay:  700ms; }
.io .ai.is-in .ai__line:nth-child(2) { animation-delay:  880ms; }
.io .ai.is-in .ai__line:nth-child(3) { animation-delay: 1060ms; }
/* El subrayado del nombre llega el ultimo: es el remate de la frase */
.io .ai.is-in .ai__name { animation: ai-name-in 320ms var(--ease-out) 1320ms both; }

/* --- La competencia se va quedando con todo: barrido de izquierda a derecha --- */
.io .loss-card, .io .result { clip-path: inset(0 100% 0 0); }
.io .loss-cards.is-in .loss-card,
.io .results.is-in .result {
  animation: wipe 620ms var(--ease-out) both;
}
@keyframes wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.io .loss-cards.is-in .loss-card:nth-child(1) { animation-delay:   0ms; }
.io .loss-cards.is-in .loss-card:nth-child(2) { animation-delay: 110ms; }
.io .loss-cards.is-in .loss-card:nth-child(3) { animation-delay: 220ms; }
.io .results.is-in .result:nth-child(1) { animation-delay:   0ms; }
.io .results.is-in .result:nth-child(2) { animation-delay:  90ms; }
.io .results.is-in .result:nth-child(3) { animation-delay: 180ms; }
.io .results.is-in .result:nth-child(4) { animation-delay: 270ms; }

/* --- Estados de interacción (solo con puntero fino) --- */
@media (hover: hover) and (pointer: fine) {
  .nav a:hover::after, .nav a:focus-visible::after { transform: scaleX(1); }
  .nav .nav__acceso:hover { background: var(--white); border-color: var(--white); color: var(--blue); }

  .split-cta__item:hover::before { clip-path: inset(0 0 0 0); }
  .split-cta__item:hover .split-cta__arrow { transform: translate(4px, -4px); }

  .feature:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(26,26,26,.18); }
  .feature:hover .feature__icon { transform: translateY(-3px) rotate(-4deg); }

  .result:hover { transform: translateX(6px); }
  .result:not(.result--top):hover { background: #DEDEDE; }

  .faq__item summary:hover { background: #E9E9E9; }

  .btn--outline-light:hover { background: var(--white); color: var(--blue); }
  .btn--outline:hover { background: var(--blue); color: var(--white); }
  .btn--solid:hover { background: var(--navy-b); }

  .call-bar:hover { background: #2C2424; }
  .call-bar:hover svg { transform: translate(4px, -4px); }

  .site-footer__cols a:hover, .site-footer__legal a:hover,
  .site-footer__cookies:hover { color: var(--white); }
  .consent__btn--solid:hover { background: var(--navy-b); }
  .consent__btn--ghost:hover { border-color: var(--white); }
}

/* --------------------------------------------------------------------------
   18b. Menciones en IA
   La escena imita una respuesta de asistente. Misma logica que la escena del
   mapa: el argumento de la seccion contado con una imagen, no adornado.
   -------------------------------------------------------------------------- */
.ai { padding-block: var(--space-section); }
.ai__title { text-align: center; text-wrap: balance; }
.ai__lead {
  max-width: 56ch;
  margin: var(--space-md) auto 0;
  font-size: var(--fs-md);
  line-height: 1.35;
  text-align: center;
  text-wrap: pretty;
}

.ai__scene {
  display: grid;
  gap: clamp(14px, 1.25vw, 24px);
  max-width: 1100px;
  margin-top: var(--space-lg);
  margin-inline: auto;
}

/* La pregunta: burbuja del visitante, alineada a la derecha */
.ai__ask {
  justify-self: end;
  max-width: min(100%, 34rem);
  padding: clamp(12px, 1.1vw, 20px) clamp(16px, 1.5vw, 28px);
  background: var(--grey-200);
  /* La esquina viva marca de quien sale el mensaje */
  border-radius: var(--r) var(--r) 4px var(--r);
  font-size: var(--fs-sm);
  line-height: 1.35;
}

/* La respuesta: superficie oscura, para que lea como otra voz */
.ai__answer {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(14px, 1.25vw, 24px);
  align-items: start;
  max-width: min(100%, 46rem);
  padding: clamp(18px, 1.6vw, 32px) clamp(20px, 1.9vw, 36px);
  background: var(--ink);
  border-radius: var(--r) var(--r) var(--r) 4px;
  color: var(--white);
}
.ai__badge {
  display: grid; place-items: center;
  width: clamp(32px, 2.6vw, 50px); aspect-ratio: 1;
  background: var(--blue);
  border-radius: 50%;
}
.ai__badge svg { width: 52%; height: auto; fill: var(--white); }

.ai__reply { font-size: var(--fs-sm); line-height: 1.45; }
/* Cada renglon es un bloque con una clausula entera: se revelan en cascada y
   aguantan partirse por dentro cuando no cabe el ancho. */
.ai__line { display: block; text-wrap: pretty; }
.ai__name {
  font-weight: 700;
  /* El subrayado nace del texto, no de un borde: respeta las bajadas */
  box-shadow: inset 0 -.12em 0 var(--blue);
}

.ai__note {
  max-width: 1100px;
  margin: var(--space-md) auto 0;
  font-size: var(--fs-xs);
  line-height: 1.4;
  color: #6a6a6a;
}

@media (max-width: 760px) {
  .ai__answer { grid-template-columns: 1fr; }
  .ai__ask, .ai__answer { max-width: 100%; }
  /* A este ancho cada clausula ocupa linea y media y deja renglones sueltos:
     mejor que el texto fluya. En linea el barrido ya no vale —clip-path
     recortaria lo que pasa al renglon siguiente— asi que la cascada se hace
     solo con opacidad, que es lo que si entiende una caja en linea. */
  .ai__reply { text-wrap: pretty; }
  .ai__line { display: inline; }
  .io .ai__line { clip-path: none; }
  .io .ai.is-in .ai__line { animation-name: label-in; }
}

/* --------------------------------------------------------------------------
   19b. Consentimiento de cookies
   Capa de sistema, no de pagina: fondo oscuro para que se lea como algo que
   esta por encima y no como una seccion mas.
   -------------------------------------------------------------------------- */
.consent {
  position: fixed;
  z-index: 60;
  /* El mismo margen lateral que .shell, para que no quede a la deriva */
  left: clamp(20px, 1.88vw, 36px);
  right: clamp(20px, 1.88vw, 36px);
  bottom: clamp(16px, 1.5vw, 28px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(16px, 2vw, 40px);
  max-width: 1100px;
  margin-inline: auto;
  padding: clamp(18px, 1.6vw, 30px) clamp(20px, 1.9vw, 36px);
  background: var(--ink);
  border-radius: var(--r);
  box-shadow: 0 4px 10px rgba(26, 26, 26, .18), 0 18px 48px rgba(26, 26, 26, .28);
  color: var(--white);
}
.consent[hidden] { display: none; }
.consent__title { font-size: var(--fs-sm); font-weight: 600; }
.consent__text p {
  margin-top: .45em;
  max-width: 68ch;
  font-size: var(--fs-xs);
  line-height: 1.4;
  /* Sobre fondo oscuro el gris plano ensucia: este blanco rebajado mantiene
     el contraste por encima de 4.5:1 y conserva el tono de la superficie. */
  color: rgba(255, 255, 255, .78);
}
.consent__actions { display: flex; gap: clamp(8px, .73vw, 14px); }
.consent__btn {
  /* Rechazar tiene que costar lo mismo que aceptar: mismo tamano, misma
     jerarquia tipografica. Solo cambia el relleno. */
  min-width: clamp(104px, 8.5vw, 150px);
  padding: clamp(11px, 1vw, 18px) clamp(14px, 1.3vw, 24px);
  border-radius: 4px;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  transition: transform 160ms var(--ease-out),
              background-color 240ms var(--ease-soft),
              border-color 240ms var(--ease-soft);
}
.consent__btn:active { transform: scale(var(--press)); }
.consent__btn--solid { background: var(--blue); color: var(--white); }
.consent__btn--ghost {
  background: none;
  border: 1px solid rgba(255, 255, 255, .45);
  color: var(--white);
}

/* Entra desde abajo, una sola vez, con la curva de la casa */
@keyframes consent-in {
  from { opacity: 0; transform: translateY(calc(var(--shift) + 10px)); }
  to   { opacity: 1; transform: none; }
}
.js .consent.is-in { animation: consent-in 420ms var(--ease-out) both; }

.site-footer__cookies {
  color: var(--grey-text);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  background: none;
  transition: color 200ms var(--ease-soft);
}

@media (max-width: 720px) {
  .consent { grid-template-columns: 1fr; }
  .consent__actions { display: grid; grid-template-columns: 1fr 1fr; }
  .consent__btn { min-width: 0; }
}

/* --------------------------------------------------------------------------
   20. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1180px) {
  .problem__grid { grid-template-columns: 1fr; }
  .cases__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* A tres columnas la foto equilibra la fila con las dos fichas. En cuanto
     deja de ser una columna se convierte en una franja decorativa que hay que
     recorrer entera antes de llegar al primer caso, y no dice nada: la seccion
     va de resultados medibles. Fuera. Al ser lazy y no entrar nunca en
     pantalla, tampoco se descarga. */
  .cases__photo { display: none; }
  .permanence__inner { grid-template-columns: 1fr; }
  .site-footer__top { grid-template-columns: 1fr; }
  .site-footer__cols { padding-left: clamp(20px, 2.5vw, 48px); }
}

/* --------------------------------------------------------------------------
   Ruta: por debajo de 1100px el mapa quedaría demasiado bajo para leerse,
   así que se sustituye por una línea de tiempo vertical.
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .route {
    width: auto;
    margin-inline: 0;
    aspect-ratio: auto;
  }
  .route__map { display: none; }
  .route__stops {
    /* Eje de los marcadores. El pin es el más ancho (22 px): a 11 px del borde,
       el marcador más grande queda a ras del margen de la página en lugar de
       asomar por fuera, que es lo que hacía el raíl pegado al borde. */
    --rail-x: 11px;
    --rail-pad: 38px;
    --row-gap: 12px;
    position: static;
    display: grid;
    gap: var(--row-gap);
    padding-left: var(--rail-pad);
    background: none;
  }
  .route__stop { position: relative; left: auto !important; top: auto !important; }

  /* El raíl se dibuja por tramos dentro de cada parada y no como un fondo
     único: así arranca en el primer punto, muere en la punta del pin y sigue
     cuadrando aunque una etiqueta pase a dos líneas. ::before cubre del borde
     superior al punto y ::after del punto al borde inferior más el hueco;
     juntos tesela la columna sin solaparse. */
  .route__stop::before,
  .route__stop::after {
    content: '';
    position: absolute;
    left: calc(var(--rail-x) - var(--rail-pad));
    width: 3px;
    background: var(--blue);
    transform: translateX(-50%);
    transform-origin: 50% 0;
  }
  .route__stop::before { top: 0; height: 50%; }
  .route__stop::after  { top: 50%; bottom: calc(-1 * var(--row-gap)); }
  .route__stop:first-child::before,
  .route__stop:last-child::after { content: none; }

  /* Marcadores de una misma familia: disco, anillo de salida y pin de destino.
     Antes medían 15, 17 y 22 px, tres tamaños que se leían como descuido. */
  .route__dot {
    left: calc(var(--rail-x) - var(--rail-pad));
    top: 50%;
    width: 14px;
    border-width: 3px;
    box-shadow: none;
    /* ::after se pinta después que el <span> del punto: sin esto el raíl
       atraviesa el anillo de salida y le deja una barra azul en el hueco. */
    z-index: 1;
  }
  .route__dot--origin { width: 18px; border-width: 4px; }
  /* El pin apoya la punta donde acaba el raíl, como en un mapa de verdad */
  .route__dot--goal { width: 22px; filter: none; }

  .route__label {
    position: static;
    transform: none !important;
    width: auto; max-width: none;
    box-shadow: none;
    background: var(--grey-200);
  }
  /* El destino conserva su fondo azul: el texto es blanco y sobre gris no se leería */
  .route__label--goal { background: var(--blue); }
}

@media (max-width: 900px) {
  .nav-toggle { display: block; }
  /* El logo y el botón quedan por encima del overlay: cerrar está donde abriste */
  .logo, .nav-toggle { position: relative; z-index: 2; }

  .nav {
    position: fixed;
    inset: 0;
    z-index: 1;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 0;
    padding: calc(var(--header-h) + 6vh) clamp(24px, 7vw, 56px) 8vh;
    /* Azul marino: sobre el hero azul un overlay azul no se vería cambiar */
    background: var(--navy-a);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s var(--ease-out), visibility .3s;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .nav.is-open { opacity: 1; visibility: visible; }

  .nav a {
    padding: clamp(16px, 2.6vh, 26px) 0;
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 8vw, 3rem);
    font-weight: 300;
    line-height: 1.1;
    border-bottom: 1px solid rgba(255, 255, 255, .16);
  }
  .nav a:last-child { border-bottom: 0; }
  .nav a::after { display: none; }
  /* En el menu a pantalla completa el acceso baja a boton, separado de las
     secciones y con letra de cuerpo: es otra clase de enlace */
  .nav .nav__acceso {
    align-self: flex-start;
    margin-top: clamp(20px, 4vh, 36px);
    padding: 14px 22px;
    border: 1px solid rgba(255, 255, 255, .65);
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
  }
  .nav a:nth-last-child(2) { border-bottom: 0; }
  /* .nav a:last-child le quita el borde inferior al ultimo enlace, y el
     ultimo ahora es este boton: se lo devuelve. */
  .nav a.nav__acceso:last-child { border-bottom: 1px solid rgba(255, 255, 255, .65); }

  /* Los enlaces entran escalonados; al cerrar el overlay se va de golpe */
  @keyframes nav-item-in {
    from { opacity: 0; transform: translateY(calc(var(--shift) + 6px)); }
    to   { opacity: 1; transform: none; }
  }
  .nav.is-open a { animation: nav-item-in 420ms var(--ease-out) both; }
  .nav.is-open a:nth-child(1) { animation-delay:  70ms; }
  .nav.is-open a:nth-child(2) { animation-delay: 115ms; }
  .nav.is-open a:nth-child(3) { animation-delay: 160ms; }
  .nav.is-open a:nth-child(4) { animation-delay: 205ms; }
  .nav.is-open a:nth-child(5) { animation-delay: 250ms; }

  /* Bloquea el desplazamiento del fondo mientras el menú está abierto */
  body.nav-is-open { overflow: hidden; }

  /* El plegado pasa a franja inferior para no cruzarse con el titular */
  .hero { min-height: 0; }
  .hero__art { top: auto; height: clamp(110px, 22vw, 175px); }
  .hero__art svg { object-fit: cover; object-position: right bottom; }
  .hero__inner { padding-bottom: clamp(130px, 26vw, 205px); }
  .hero__title br, .hero__lead br { display: none; }

  .split-cta { grid-template-columns: 1fr; }

  /* En escritorio la seccion no lleva padding superior porque la caja de la
     escena (aspect-ratio 1920/690) ya deja aire sobre la ficha, que va
     posicionada al 41% de su alto. Al apilarse, esa caja desaparece y la
     ficha pasa a ser lo primero del flujo: sin este padding quedaria pegada
     a la franja de CTA de arriba. */
  .problem { padding-top: var(--space-section); }

  .mapscene { aspect-ratio: auto; min-height: 0; display: grid; gap: var(--space-sm); justify-items: start; }
  .mapscene__pin { display: none; }
  .mapscene__card { position: static; width: min(62%, 300px); }
  .mapscene__tooltip { position: static; width: min(100%, 420px); }
  .problem__title br, .problem__lead br, .about__copy p br,
  .permanence__copy p br, .cases__lead br, .intent__lead br,
  .banner__text br, .final-cta__text br, .includes__lead br { display: none; }

  .loss-cards { grid-template-columns: 1fr; }
  .loss-card { aspect-ratio: auto; min-height: 150px; }

  /* La ruta pasa a línea de tiempo vertical */
  .feature-grid { grid-template-columns: 1fr; }

  .map-cards { grid-template-columns: 1fr; gap: 10px; }
  .map-card--low, .map-card--mid, .map-card--high { --head-pad: 20px; }

  .system__art { opacity: .55; }
  .call-bar { position: static; width: 100%; }
  .call-bar__block { display: none; }
  .pricing { padding-bottom: 0; }

  .site-footer__cols { grid-template-columns: 1fr; gap: 32px; }
}

@media (max-width: 560px) {
  .cases__grid { grid-template-columns: 1fr; }
  .price-card { clip-path: polygon(34px 0, 100% 0, 100% 100%, 0 100%, 0 34px); }
  .site-footer__bottom { flex-direction: column; gap: 12px; }
  .site-footer__legal { flex-direction: column; gap: 8px; }
}

/* --------------------------------------------------------------------------
   21. Movimiento reducido
   Se conserva la opacidad y el color; se elimina el desplazamiento.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  :root { --shift: 0px; --press: 1; }
  html { scroll-behavior: auto; }

  .js .hero__art { animation: none; }
  .io .mapscene.is-in .mapscene__card,
  .io .mapscene.is-in .mapscene__tooltip { transform: none; }
  .io .loss-cards.is-in .loss-card,
  .io .results.is-in .result { animation: settle 260ms var(--ease-soft) both; clip-path: none; }
  .io .loss-card, .io .result { clip-path: none; }

  /* La ruta aparece entera; sin trazado ni salto de escala */
  .io .route__trace { stroke-dasharray: none; stroke-dashoffset: 0; }
  .io .route.is-in .route__trace { animation: none; }
  .io .route.is-in .route__dot { animation: label-in 260ms var(--ease-soft) both; transform: translate(-50%, -50%); }
  /* El pin se ancla por la punta: centrarlo lo descolgaría del final del raíl */
  .io .route.is-in .route__dot--goal { transform: translate(-50%, -100%); }
  .io .route__stop::before,
  .io .route__stop::after { transform: translateX(-50%); }
  .io .route.is-in .route__stop::before,
  .io .route.is-in .route__stop::after { animation: none; }

  /* La respuesta aparece entera, sin barrido ni desplazamiento */
  .io .ai.is-in .ai__line { animation: label-in 260ms var(--ease-soft) both; clip-path: none; }
  .io .ai__line { clip-path: none; }
  .io .ai.is-in .ai__ask,
  .io .ai.is-in .ai__answer { animation: label-in 260ms var(--ease-soft) both; transform: none; }

  .split-cta__item::before { display: none; }
  @media (hover: hover) {
    .feature:hover { transform: none; }
    .feature:hover .feature__icon { transform: none; }
    .result:hover { transform: none; }
    .split-cta__item:hover .split-cta__arrow,
    .call-bar:hover svg { transform: none; }
  }
}