@import url('assets/fonts/fonts.css');

/* ═══════════════════════════════════════════════════════════════════
   SMARTECNIA · Sistema de diseño
   Paleta tomada de los SVG oficiales del logo (no aproximada).
   Azul = único acento de autoridad. Rojo/dorado/verde = chispas,
   igual que en el logo: presentes, pequeñas, nunca dominantes.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* Marca */
  --azul:        #287AED;
  --azul-hover:  #1B63C9;
  --azul-soft:   #EAF2FE;
  --chispa-roja: #E73D38;
  --chispa-oro:  #F8B032;
  --chispa-verde:#019D4D;

  /* Tierra */
  --navy:        #0A1526;
  --navy-2:      #12213A;
  --ink:         #0F1620;
  --ink-soft:    #35414F;
  --ink-mute:    #67748A;
  --bg:          #FFFFFF;
  --bg-2:        #F6F8FB;
  --paper:       #FFFFFF;
  --line:        rgba(15, 22, 32, 0.10);
  --line-strong: rgba(15, 22, 32, 0.18);

  /* Espaciado — escala 8px */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 24px;  --space-6: 32px;  --space-7: 48px;  --space-8: 64px;
  --space-9: 96px;  --space-10: 128px;

  /* Tipografía — escala modular 1.25 */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.25rem;
  --text-xl:   1.563rem;
  --text-2xl:  1.953rem;
  --text-3xl:  2.441rem;
  --text-4xl:  clamp(2.5rem, 5.2vw, 4rem);

  --font-display: 'Sora', system-ui, -apple-system, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;

  /* Curvas */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-soft:   cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --radius:    14px;
  --radius-lg: 22px;
  --shadow-sm: 0 1px 3px rgba(10, 21, 38, 0.06), 0 4px 14px rgba(10, 21, 38, 0.05);
  --shadow-md: 0 6px 12px rgba(10, 21, 38, 0.08), 0 16px 32px rgba(10, 21, 38, 0.10);
  --shadow-lg: 0 12px 24px rgba(10, 21, 38, 0.10), 0 32px 64px rgba(10, 21, 38, 0.14);

  --nav-h: 72px;
}

/* ── Reset ────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + var(--space-4));
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul { list-style: none; padding: 0; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

p { text-wrap: pretty; }

::selection { background: var(--azul); color: #fff; }

:focus-visible {
  outline: 2px solid var(--azul);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ── Layout ───────────────────────────────────────────────────── */
.wrap {
  width: min(1200px, 100% - var(--space-6) * 2);
  margin-inline: auto;
}
.wrap-narrow { width: min(760px, 100% - var(--space-6) * 2); margin-inline: auto; }

.section { padding-block: clamp(var(--space-8), 8vw, var(--space-10)); }
.section--tint { background: var(--bg-2); }
.section--navy { background: var(--navy); color: #fff; }
.section--navy .kicker { color: rgba(255,255,255,0.62); }
.section--navy p { color: rgba(255,255,255,0.76); }

.prose { max-width: 65ch; }

/* ── Tipografía de apoyo ──────────────────────────────────────── */
.kicker {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.kicker::before {
  content: "";
  width: 18px; height: 2px;
  background: var(--azul);
  flex: none;
}

.h-lead   { font-size: var(--text-3xl); }
.lead     { font-size: var(--text-lg); color: var(--ink-soft); }
.muted    { color: var(--ink-mute); }

/* Chispas del logo — acento tipográfico, uso mínimo */
.spark { color: var(--azul); }
.spark-r { color: var(--chispa-roja); }
.spark-o { color: var(--chispa-oro); }
.spark-v { color: var(--chispa-verde); }

/* ── Botones ──────────────────────────────────────────────────── */
.btn {
  --btn-bg: var(--azul);
  --btn-fg: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  min-height: 48px;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border-radius: 999px;
  white-space: nowrap;
  transform: translateY(0) scale(1);
  box-shadow: 0 4px 14px rgba(40, 122, 237, 0.22), 0 1px 3px rgba(10, 21, 38, 0.08);
  transition: transform 180ms var(--ease-out),
              box-shadow 180ms var(--ease-out),
              background-color 180ms var(--ease-out);
}
.btn:hover {
  --btn-bg: var(--azul-hover);
  transform: translateY(-3px) scale(1.01);
  box-shadow: 0 16px 32px rgba(40, 122, 237, 0.28), 0 6px 12px rgba(10, 21, 38, 0.10);
}
.btn:active {
  transform: translateY(-1px) scale(0.98);
  transition-duration: 90ms;
}
.btn:focus-visible { outline: 2px solid var(--azul); outline-offset: 3px; }

.btn .arrow { transition: transform 180ms var(--ease-out); }
.btn:hover .arrow { transform: translateX(3px); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  border: 1px solid var(--line-strong);
  box-shadow: none;
}
.btn--ghost:hover {
  --btn-bg: var(--bg-2);
  --btn-fg: var(--ink);
  box-shadow: var(--shadow-sm);
}

.btn--on-navy {
  --btn-bg: #fff;
  --btn-fg: var(--navy);
  box-shadow: 0 4px 14px rgba(0,0,0,0.2);
}
.btn--on-navy:hover { --btn-bg: #fff; --btn-fg: var(--azul-hover); }

.btn--lg { padding: var(--space-4) var(--space-6); min-height: 56px; font-size: var(--text-base); }

/* Botón fantasma para fondos oscuros (hero de la Ruta). */
.btn--ghost-light {
  --btn-bg: transparent;
  --btn-fg: #fff;
  border: 1px solid rgba(255,255,255,0.4);
  box-shadow: none;
}
.btn--ghost-light:hover {
  --btn-bg: rgba(255,255,255,0.1);
  --btn-fg: #fff;
  box-shadow: none;
}

/* ── Navegación ───────────────────────────────────────────────────
   Dos estados:
   · Arriba: fondo claro (home) o transparente sobre navy (Ruta).
   · Al hacer scroll (.is-stuck): fondo navy TRANSLÚCIDO con matiz — no un
     color plano, sino un degradado con un toque azul barriendo de un lado,
     efecto vidrio premium. Logo pasa a rayo blanco + chispas de color;
     cada link se subraya en un color distinto de la marca. */
.nav {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 100;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: background 400ms var(--ease-out), border-color 400ms var(--ease-out);
}

/* Estado scroll — navy translúcido con matiz (compartido por todas las páginas) */
.nav.is-stuck {
  background:
    radial-gradient(140% 240% at 12% 0%, rgba(40,122,237,0.28), transparent 55%),
    linear-gradient(180deg, rgba(10,21,38,0.90), rgba(14,27,51,0.80));
  border-bottom-color: rgba(255,255,255,0.10);
  box-shadow: 0 8px 30px rgba(10,21,38,0.22);
}

/* Nav transparente sobre hero navy (páginas con hero oscuro, ej. Ruta) */
.nav--ondark { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }

.nav__inner {
  width: min(1200px, 100% - var(--space-6) * 2);
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

/* Logo: dos versiones cruzadas (color / blanco) según el fondo.
   OJO con la especificidad: la regla de hide debe igualar o superar a
   `.nav__logo img`, si no el img gana y se ven las dos versiones. */
.nav__logo { flex: none; display: flex; align-items: center; }
.nav__logo img { height: 48px; width: auto; }
.nav__logo img.nav__logo-white { display: none; }
.nav--ondark img.nav__logo-color,
.nav.is-stuck img.nav__logo-color { display: none; }
.nav--ondark img.nav__logo-white,
.nav.is-stuck img.nav__logo-white { display: block; }

.nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  margin-inline-start: auto;
  font-size: var(--text-sm);
  font-weight: 500;
}
.nav__links a {
  color: var(--ink-soft);
  padding-block: var(--space-2);
  position: relative;
  transition: color 200ms var(--ease-out);
}
/* Subrayado por link — un color de marca distinto cada uno */
.nav__links a::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--azul);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 240ms var(--ease-out);
}
.nav__links a:nth-child(1)::after { background: var(--chispa-roja); }   /* La Ruta Smart */
.nav__links a:nth-child(2)::after { background: var(--chispa-oro); }    /* Casos */
.nav__links a:nth-child(3)::after { background: var(--chispa-verde); }  /* El Team */
.nav__links a:nth-child(4)::after { background: var(--azul); }          /* Smarty */
.nav__links a:hover { color: var(--ink); }
.nav__links a:hover::after,
.nav__links a[aria-current="page"]::after { transform: scaleX(1); }
.nav__links a[aria-current="page"] { color: var(--ink); }

/* Links en blanco cuando el fondo es oscuro (transparente-sobre-navy o scroll) */
.nav--ondark .nav__links a,
.nav.is-stuck .nav__links a { color: rgba(255,255,255,0.82); }
.nav--ondark .nav__links a:hover,
.nav--ondark .nav__links a[aria-current="page"],
.nav.is-stuck .nav__links a:hover,
.nav.is-stuck .nav__links a[aria-current="page"] { color: #fff; }

/* CTA: azul sobre fondo claro, blanco sobre fondo oscuro */
.nav__cta { flex: none; }
.nav--ondark .nav__cta,
.nav.is-stuck .nav__cta {
  --btn-bg: #fff;
  --btn-fg: var(--navy);
  box-shadow: 0 4px 14px rgba(0,0,0,0.20);
}
.nav--ondark .nav__cta:hover,
.nav.is-stuck .nav__cta:hover { --btn-bg: #fff; --btn-fg: var(--azul-hover); }

.nav__burger {
  display: none;
  flex: none;
  margin-inline-start: auto;
  width: 44px; height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
}
.nav__burger span {
  display: block;
  width: 20px; height: 2px;
  background: var(--ink);
  position: relative;
  transition: background-color 120ms var(--ease-out);
}
.nav__burger span::before,
.nav__burger span::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  width: 20px; height: 2px;
  background: var(--ink);
  transition: transform 240ms var(--ease-out);
}
.nav__burger span::before { transform: translateY(-6px); }
.nav__burger span::after  { transform: translateY(6px); }
.nav__burger[aria-expanded="true"] span { background: transparent; }
.nav__burger[aria-expanded="true"] span::before { transform: rotate(45deg); }
.nav__burger[aria-expanded="true"] span::after  { transform: rotate(-45deg); }
.nav--ondark .nav__burger span,
.nav--ondark .nav__burger span::before,
.nav--ondark .nav__burger span::after,
.nav.is-stuck .nav__burger span,
.nav.is-stuck .nav__burger span::before,
.nav.is-stuck .nav__burger span::after { background: #fff; }

/* ── HERO · Mosaico vivo de trabajos reales ───────────────────── */
/* El mosaico es absoluto y no aporta altura, así que el hero necesita
   la suya propia: sin esto colapsa a la altura del texto y las tarjetas
   se amontonan encima del titular. */
.hero {
  position: relative;
  min-height: clamp(640px, 92vh, 940px);
  display: grid;
  place-items: center;
  padding-block: calc(var(--nav-h) + var(--space-7)) var(--space-8);
  overflow: hidden;
  background:
    radial-gradient(120% 80% at 50% 0%, var(--azul-soft) 0%, rgba(234,242,254,0) 60%),
    var(--bg);
}

.hero__inner {
  position: relative;
  z-index: 2;
  grid-area: 1 / 1;
  text-align: center;
  max-width: 720px;
  margin-inline: auto;
  padding-inline: var(--space-4);
}

.mosaic { grid-area: 1 / 1; }

/* El titular es largo (dos frases). A tamaño display se comía cuatro líneas
   y aplastaba el mosaico: se baja para que respire en tres. */
.hero__title {
  font-size: clamp(1.9rem, 3.4vw, 3rem);
  line-height: 1.1;
  margin-bottom: var(--space-4);
}
.hero__title em {
  font-style: normal;
  color: var(--azul);
}
/* "agencia" se nombra como lo que NO eres — en rojo, sin subrayado (el
   subrayado hubiera competido visualmente con la punta de flecha de
   "Y en orden." más abajo en la página). */
.hero__title .hero__neg { color: var(--chispa-roja); }

.hero__sub {
  font-size: var(--text-lg);
  color: var(--ink-soft);
  max-width: 54ch;
  margin-inline: auto;
  margin-bottom: var(--space-6);
}
/* Los <br> que arman las 3 líneas exactas del subtítulo son un gesto de
   escritorio (hay ancho de sobra para forzar el corte donde queremos).
   En mobile no hay ese aire: forzarlos igual partía la frase en puntos
   torpes. Se desactivan bajo 700px y el texto fluye solo, tal como decide
   el ancho real de la pantalla. */
.hero__sub-break { display: none; }
@media (min-width: 700px) {
  .hero__sub-break { display: inline; }
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
  margin-bottom: var(--space-5);
}

.hero__proof {
  font-size: var(--text-sm);
  color: var(--ink-mute);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  justify-content: center;
  align-items: center;
}
.hero__proof b { color: var(--ink); font-weight: 600; }
.hero__proof .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--line-strong); }

/* Mosaico
   Las tarjetas viven en los dos canales que flanquean la columna de
   texto — nunca en porcentajes del viewport. Así jamás pisan el titular,
   sea cual sea el ancho de pantalla. Si el canal es angosto, sangran
   fuera de la pantalla (intencional: es el gesto Pinterest), pero por
   el borde exterior, nunca hacia el texto. */
.mosaic {
  --center: 720px;          /* ancho reservado e intocable para el texto */
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
/* .mosaic__track envuelve los dos canales — en escritorio es un div
   invisible sin position propia, así que no le cambia nada a las
   tarjetas absolutas de adentro. Solo cobra vida en mobile (ver abajo),
   donde pasa a ser el carril que rota. */
.mosaic__dup { display: none; }    /* set duplicado para el loop del marquee mobile */

/* Cada canal son dos columnas en flujo real, no tarjetas sueltas en
   posición absoluta: así NUNCA pueden solaparse entre sí ni cortarse,
   sea cual sea la altura del hero.
   Las columnas se pegan al borde del texto y, si no caben, sangran hacia
   AFUERA de la pantalla — que es justo el gesto que queremos. */
.mosaic__side {
  position: absolute;
  inset-block: 0;
  width: max(0px, calc((100% - var(--center)) / 2));
  display: flex;
  gap: 12px;
  align-items: center;
}
.mosaic__side--l {
  inset-inline-start: 0;
  justify-content: flex-end;   /* sangra por la izquierda */
}
.mosaic__side--r {
  inset-inline-end: 0;
  justify-content: flex-start; /* sangra por la derecha */
}

.mosaic__col {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
  justify-content: center;
}
/* La columna interior (la que roza el texto) baja un poco: rompe la
   simetría y evita el efecto "dos listas paralelas". */
.mosaic__col--offset { transform: translateY(var(--off, 28px)); }

/* Tres movimientos = tres capas. Cada una es dueña de su propio
   transform, así ninguna pisa a la otra:
     .mosaic__card    → posición + parallax de scroll (lo escribe GSAP)
     .mosaic__reveal  → revelado de entrada
     img              → flotación ambiental en bucle                     */
.mosaic__card {
  flex: none;
  width: var(--w, 150px);
  margin-inline-start: var(--ox, 0px);   /* jitter horizontal: aire orgánico */
  will-change: transform;
}

/* Por defecto las tarjetas son VISIBLES. Solo las escondemos si hay JS
   para poder animarlas (la clase .js la pone un script inline en el head).
   Al revés — ocultar por CSS y esperar al JS — un fallo de JS dejaría el
   hero en blanco, que es justo lo que no puede pasar. */
.mosaic__reveal {
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--paper);
  box-shadow: var(--shadow-md);
}

/* Los mockups de dispositivo ya traen su forma y su sombra en el PNG.
   Si además les pusiéramos tarjeta, se vería el marco blanco alrededor —
   justo el "borde" que arruinaba el look. Aquí flotan libres. */
.mosaic__card--float .mosaic__reveal {
  background: none;
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
}
.js .mosaic__reveal {
  opacity: 0;
  transform: translate3d(0, 28px, 0) scale(0.94);
  will-change: transform, opacity;
}
.js .mosaic__card.is-in .mosaic__reveal {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
  transition-delay: var(--d, 0ms);
}

.mosaic__card img {
  width: 100%;
  height: auto;
  object-fit: cover;
  aspect-ratio: var(--ar, 1);
  animation: float var(--dur, 14s) var(--ease-soft) infinite alternate;
  animation-delay: var(--fd, 0s);
}
@keyframes float {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(0, calc(var(--amp, 12px) * -1), 0); }
}

/* Hover del mosaico: solo en dispositivos con mouse real (hover:hover),
   así un tap en touch no deja una tarjeta "pegada" en grande. .mosaic
   trae pointer-events:none para no robarle clics al texto del hero —
   se reactiva aquí SOLO en la tarjeta, que vive en los canales laterales
   y nunca pisa la columna central del texto/CTA.
   Dos reglas con el mismo resultado: la que no lleva .is-in cubre el
   caso sin JS (las tarjetas ya visibles, sin sistema de entrada); la que
   sí la lleva iguala la especificidad de ".is-in" para poder ganarle
   (por eso va después en el archivo) y usa transition-delay:0s para que
   el hover no herede el stagger de entrada de cada tarjeta. */
@media (hover: hover) and (pointer: fine) {
  .mosaic__card { pointer-events: auto; }
  .mosaic__card:hover { z-index: 5; }
  .mosaic__card:hover img { animation-play-state: paused; }
  .mosaic__card:hover .mosaic__reveal,
  .mosaic__card.is-in:hover .mosaic__reveal {
    transition: transform 420ms var(--ease-spring), filter 420ms var(--ease-out);
    transition-delay: 0s;
    transform: translate3d(0, -10px, 0) scale(1.08);
    filter: drop-shadow(0 20px 36px rgba(10, 21, 38, 0.32));
  }
}

/* Degradado que funde el mosaico con la sección siguiente */
.hero::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  height: 140px;
  background: linear-gradient(to bottom, rgba(255,255,255,0), var(--bg));
  z-index: 1;
  pointer-events: none;
}

/* ── Franja de trabajos ───────────────────────────────────────────
   Lleva el peso del "el cliente es el protagonista" en móvil, donde el
   mosaico lateral no cabe, y refuerza la prueba social en escritorio. */
.strip {
  padding-block: var(--space-7);
  border-block: 1px solid var(--line);
  background: var(--bg-2);
  overflow: hidden;
}
.strip__label {
  text-align: center;
  margin-bottom: var(--space-5);
}
.strip__track {
  display: flex;
  gap: var(--space-4);
  width: max-content;
  animation: marquee 46s linear infinite;
}
/* El movimiento NO se detiene al pasar el cursor; solo el logo bajo el
   puntero recupera color (ver .strip__item:hover más abajo). */

/* Solo logos. Monocromo para que lean como una familia y no como un
   collage de colores; recuperan su color al pasar el cursor. */
.strip__item {
  flex: none;
  width: 150px;
  display: grid;
  place-items: center;
}
.strip__item img {
  width: 100%;
  height: 56px;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.5;
  transition: filter 260ms var(--ease-out), opacity 260ms var(--ease-out),
              transform 260ms var(--ease-out);
}
.strip__item:hover img {
  filter: grayscale(0);
  opacity: 1;
  transform: scale(1.06);
}
@keyframes marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }   /* el track va duplicado */
}
@media (prefers-reduced-motion: reduce) {
  .strip__track { animation: none; }
  .strip { overflow-x: auto; }                   /* se puede desplazar a mano */
}

/* ── Bloques de contenido del Home ────────────────────────────────
   Todo se apoya en la escala y las variables ya definidas. */

/* Fila de tres pilares (Bloque 3) */
.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  margin-top: var(--space-7);
}
.pillar {
  display: block;
  padding: var(--space-6);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  color: inherit;
  text-decoration: none;
  transition: box-shadow 240ms var(--ease-out), transform 240ms var(--ease-out), border-color 240ms var(--ease-out);
}
/* Cada pilar es una tarjeta-botón entera: la sombra crece al pasar el
   cursor para que se sienta activable, no solo decorativa. */
.pillar:hover {
  box-shadow: var(--shadow-lg);
  border-color: var(--azul-soft);
  transform: translateY(-3px);
}
.pillar:hover .pillar__cta { color: var(--azul); }
.pillar:hover .pillar__cta .arrow { transform: translateX(3px); }
.pillar__icon {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: var(--azul-soft);
  margin-bottom: var(--space-4);
  transition: background 220ms var(--ease-out);
}
.pillar__icon svg { width: 22px; height: 22px; stroke: var(--azul); fill: none; stroke-width: 2; transition: stroke 220ms var(--ease-out); }
.pillar h3 { font-size: var(--text-lg); margin-bottom: var(--space-2); }
.pillar p { font-size: var(--text-sm); color: var(--ink-soft); text-align: justify; }

/* Cada pilar toma prestado uno de los colores de las cápsulas de marca
   (rojo/oro/verde — el azul ya es el acento por defecto del resto del
   sitio) para su ícono al pasar el cursor: la misma paleta que ya
   vinculamos al Test Ruta Smart, ahora también aquí. */
.pillar:nth-child(1):hover .pillar__icon { background: rgba(231,61,56,0.12); }
.pillar:nth-child(1):hover .pillar__icon svg { stroke: var(--chispa-roja); }
.pillar:nth-child(2):hover .pillar__icon { background: rgba(248,176,50,0.16); }
.pillar:nth-child(2):hover .pillar__icon svg { stroke: var(--chispa-oro); }
.pillar:nth-child(3):hover .pillar__icon { background: rgba(1,157,77,0.12); }
.pillar:nth-child(3):hover .pillar__icon svg { stroke: var(--chispa-verde); }
.pillar__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink-mute);
  transition: color 200ms var(--ease-out);
}
.pillar__cta .arrow { display: inline-block; transition: transform 200ms var(--ease-out); }
@media (max-width: 820px) { .pillars { grid-template-columns: 1fr; } }

/* Casos de éxito (Bloque 3b) — mockups reales, no ilustraciones de
   stock. Cada imagen ya trae su propio marco/sombra (celular o
   gráfica suelta), así que la tarjeta solo aporta el fondo neutro y
   deja el mockup flotar con object-fit:contain — cover lo recortaría
   mal en los que son celular inclinado. */
.cases {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
  margin-top: var(--space-7);
}
.case-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 240ms var(--ease-out), transform 240ms var(--ease-out);
}
.case-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.case-card__media {
  aspect-ratio: 4 / 5;
  display: grid;
  place-items: center;
  background: var(--bg-2);
  padding: var(--space-4);
}
.case-card__media img { width: 100%; height: 100%; object-fit: contain; }
.case-card__body { padding: var(--space-4) var(--space-5) var(--space-5); }
.case-card__body h3 { font-size: var(--text-base); margin-bottom: 2px; }
.case-card__body p { font-size: var(--text-xs); color: var(--ink-mute); }
@media (max-width: 980px) { .cases { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .cases { grid-template-columns: 1fr; } }

/* Bloque IA — dos caminos (Bloque 3b, oculto junto con la sección) */
.paths {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  margin-top: var(--space-7);
}
.path {
  display: block;
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.05);
  text-decoration: none;
  transition: background 240ms var(--ease-out), border-color 240ms var(--ease-out),
              box-shadow 240ms var(--ease-out), transform 240ms var(--ease-out);
}
/* Igual que los pilares de arriba: la tarjeta entera es el botón — la
   sombra + el fondo que aclara avisan que es activable. */
.path:hover {
  background: rgba(255,255,255,0.09);
  border-color: rgba(255,255,255,0.28);
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
}
.path:hover .path__cta { color: var(--chispa-oro); }
.path:hover .path__cta .arrow { transform: translateX(3px); }
.path__tag {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--chispa-oro);
  margin-bottom: var(--space-3);
}
.path h3 { font-size: var(--text-lg); color: #fff; margin-bottom: var(--space-2); }
.path p { color: rgba(255,255,255,0.76); font-size: var(--text-sm); }
.path__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  font-weight: 600;
  color: rgba(255,255,255,0.7);
  transition: color 200ms var(--ease-out);
}
.path__cta .arrow { display: inline-block; transition: transform 200ms var(--ease-out); }
@media (max-width: 720px) { .paths { grid-template-columns: 1fr; } }

/* Resumen visual de la Ruta (Bloque 4) — 5 pasos en línea */
.rutaline {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-7);
  counter-reset: paso;
}
.rutastep {
  position: relative;
  padding-top: var(--space-5);
}
/* Línea conectora entre pasos */
.rutastep::after {
  content: "";
  position: absolute;
  inset-block-start: 13px;
  inset-inline-start: 26px;
  inset-inline-end: calc(var(--space-4) * -1);
  height: 2px;
  background: var(--line-strong);
}
.rutastep:last-child::after { display: none; }
.rutastep__n {
  position: absolute;
  inset-block-start: 0;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--azul);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-sm);
  z-index: 1;
}
.rutastep:nth-child(1) .rutastep__n { background: var(--chispa-roja); }
.rutastep:nth-child(2) .rutastep__n { background: var(--chispa-oro); }
.rutastep:nth-child(3) .rutastep__n { background: var(--azul); }
.rutastep:nth-child(4) .rutastep__n { background: var(--chispa-verde); }
.rutastep:nth-child(5) .rutastep__n { background: var(--navy); }
.rutastep h3 { font-size: var(--text-base); margin-bottom: var(--space-1); }
.rutastep p { font-size: var(--text-sm); color: var(--ink-mute); }
@media (max-width: 820px) {
  .rutaline { grid-template-columns: 1fr; gap: 0; }
  .rutastep { padding: var(--space-4) 0 var(--space-4) var(--space-6); }
  .rutastep__n { inset-block-start: var(--space-4); inset-inline-start: 0; }
  .rutastep::after {
    inset-block: 40px auto; inset-block-end: -14px; inset-inline: 13px auto;
    width: 2px; height: auto; inset-block-end: -8px; inset-block-start: 40px;
  }
}

/* La primera frase del párrafo de la Ruta no debe partirse a media frase:
   en desktop entra completa en una línea; en mobile el viewport ya es
   angosto de por sí, así que ahí se deja envolver con naturalidad. */
@media (min-width: 700px) {
  .nowrap-desktop { white-space: nowrap; }
}

/* Insignia de Google, versión chica para meter dentro de una línea de
   texto (hero__proof) — mismo truco de degradado de la insignia grande
   de la sección de reseñas, pero a escala de texto normal. */
.hero__gbadge { display: inline-flex; align-items: center; gap: 5px; }
.hero__gbadge .g { width: 15px; height: 15px; flex: none; }
.hero__gbadge .stars { color: var(--chispa-oro); letter-spacing: 1px; font-size: 0.85em; }

/* Subrayado-flecha que UNE y resalta la frase "Y en orden." — parte antes
   de la "Y" y termina con una punta limpia tras el punto final. El marker
   escala con el trazo (no con el viewBox), así la punta nunca se deforma
   aunque la frase se estire. */
.order-phrase { position: relative; white-space: nowrap; }
.order-arrow {
  position: absolute;
  inset-inline: -3% -5%;
  inset-block-end: -0.46em;
  width: 108%;
  height: 0.6em;
  color: var(--chispa-oro);
  overflow: visible;
  pointer-events: none;
}
/* Dos piezas separadas: la línea es solo trazo, la punta es un triángulo
   RELLENO — mezclarlas en una sola regla es lo que la dejaba con forma de
   cápsula en vez de punta de flecha. */
.order-line {
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
}
.order-head {
  fill: currentColor;
  stroke: none;
}

/* Camino serpenteante de la Ruta (Bloque 4) — reemplaza la línea recta.
   Desktop: los pasos se posicionan sobre una ruta ondulada con flecha final.
   Móvil: se apila en lista vertical. */
.rutamap {
  position: relative;
  margin-top: var(--space-8);
  aspect-ratio: 1000 / 300;
}
.rutamap__svg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  overflow: visible;
}
.rutamap__road {
  fill: none;
  stroke: var(--chispa-oro);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 1 16;          /* traza punteada tipo ruta en un mapa */
  opacity: 0.85;
}
.rutamap__road-solid {
  fill: none;
  stroke: var(--line-strong);
  stroke-width: 2;
  stroke-dasharray: 6 10;
  opacity: 0.5;
}
.rmap__step {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%);
  width: 160px;
  text-align: center;
  display: block;
  text-decoration: none;
  color: inherit;
}
.rmap__dot {
  width: 40px; height: 40px;
  margin: 0 auto var(--space-2);
  display: grid; place-items: center;
  border-radius: 50%;
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  box-shadow: 0 6px 16px rgba(10,21,38,0.18);
  border: 3px solid var(--bg-2);
  transition: transform 220ms var(--ease-spring), box-shadow 220ms var(--ease-out);
}
.rmap__step:nth-child(1) .rmap__dot { background: var(--chispa-roja); }
.rmap__step:nth-child(2) .rmap__dot { background: var(--chispa-oro); }
.rmap__step:nth-child(3) .rmap__dot { background: var(--azul); }
.rmap__step:nth-child(4) .rmap__dot { background: var(--chispa-verde); }
.rmap__step:nth-child(5) .rmap__dot { background: var(--navy); }
.rmap__step h3 { font-size: var(--text-base); margin-bottom: 2px; transition: color 180ms var(--ease-out); }

/* Cada estación es un link directo al kilómetro correspondiente en
   /ruta-smart (mismo id que su <li class="step">). El punto crece al
   pasar el mouse — invita al clic sin depender de leer el texto. */
@media (hover: hover) and (pointer: fine) {
  .rmap__step:hover .rmap__dot { transform: scale(1.22); box-shadow: 0 10px 22px rgba(10,21,38,0.28); }
  .rmap__step:hover h3 { color: var(--azul); }
}
.rmap__step:focus-visible .rmap__dot { transform: scale(1.22); outline: 2px solid var(--azul); outline-offset: 3px; }
.rmap__step p { font-size: var(--text-xs); color: var(--ink-mute); line-height: 1.4; }

@media (max-width: 860px) {
  .rutamap { aspect-ratio: auto; }
  .rutamap__svg { display: none; }

  /* En móvil la ruta se vuelve un sendero VERTICAL: los kilómetros bajan
     uno tras otro unidos por una línea punteada dorada, con un leve zigzag
     para que se lea como un camino, no como una lista. */
  .rutamap__steps {
    position: relative;
    padding-inline-start: 8px;
  }
  .rutamap__steps::before {
    content: "";
    position: absolute;
    inset-block: 24px 24px;
    inset-inline-start: 27px;
    width: 3px;
    background-image: repeating-linear-gradient(
      to bottom, var(--chispa-oro) 0 4px, transparent 4px 14px);
    border-radius: 3px;
  }
  .rmap__step {
    position: relative;
    transform: none;
    width: auto;
    left: auto; top: auto;
    text-align: left;
    display: grid;
    grid-template-columns: 40px 1fr;
    column-gap: var(--space-4);
    align-items: start;
    padding: var(--space-4) 0;
  }
  .rmap__dot { grid-column: 1; grid-row: 1 / span 2; margin: 0; }
  .rmap__step h3 { grid-column: 2; grid-row: 1; align-self: center; }
  .rmap__step p  { grid-column: 2; grid-row: 2; max-width: none; }
}

/* ── Equipo · movimiento e interdependencia (Bloque 8) ────────────
   3 miembros ligeramente inclinados como una "foto de equipo". En reposo,
   desaturados para unir los fondos dispares. Al pasar el cursor por uno:
   se endereza, recupera color y se adelanta — y los otros se apartan un
   poco (con :has), reforzando que se mueven como un solo cuerpo. */
.team {
  display: flex;
  justify-content: center;
  gap: var(--space-5);
  margin-top: var(--space-8);
  perspective: 1200px;
}
.member {
  flex: 0 0 300px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--paper);
  box-shadow: var(--shadow-md);
  transition: transform 480ms var(--ease-out), box-shadow 480ms var(--ease-out),
              filter 480ms var(--ease-out);
  will-change: transform;
}
.member:nth-child(1) { transform: rotate(-3deg) translateY(8px); }
.member:nth-child(2) { transform: rotate(0deg)  translateY(-8px); z-index: 2; }
.member:nth-child(3) { transform: rotate(3deg)  translateY(8px); }
.member__photo {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}
.member__photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(0.85) contrast(1.02);
  transition: filter 520ms var(--ease-out), transform 620ms var(--ease-out);
}
.member__body {
  padding: var(--space-4) var(--space-5) var(--space-5);
}
.member__name { font-size: var(--text-lg); }
.member__role { font-size: var(--text-sm); color: var(--ink-mute); margin-top: 2px; }
.member__tag {
  display: inline-block;
  margin-top: var(--space-3);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--azul);
}

/* Al pasar el cursor: el miembro se adelanta, endereza y recupera color */
.member:hover {
  transform: rotate(0deg) translateY(-16px) scale(1.04);
  box-shadow: var(--shadow-lg);
  z-index: 3;
}
.member:hover .member__photo img { filter: grayscale(0) contrast(1); transform: scale(1.03); }

/* …y los compañeros se apartan un poco: somos independientes, pero un solo cuerpo */
.team:has(.member:nth-child(1):hover) .member:nth-child(2) { transform: rotate(2deg) translateX(18px) translateY(-4px); }
.team:has(.member:nth-child(1):hover) .member:nth-child(3) { transform: rotate(5deg) translateX(28px) translateY(10px); }
.team:has(.member:nth-child(2):hover) .member:nth-child(1) { transform: rotate(-6deg) translateX(-24px) translateY(10px); }
.team:has(.member:nth-child(2):hover) .member:nth-child(3) { transform: rotate(6deg) translateX(24px) translateY(10px); }
.team:has(.member:nth-child(3):hover) .member:nth-child(1) { transform: rotate(-5deg) translateX(-28px) translateY(10px); }
.team:has(.member:nth-child(3):hover) .member:nth-child(2) { transform: rotate(-2deg) translateX(-18px) translateY(-4px); }

@media (max-width: 820px) {
  .team { flex-wrap: wrap; }
  .member { flex-basis: 240px; }
  .member, .member:nth-child(n) { transform: none; }   /* sin abanico en móvil */
}

/* ── Panel showcase de Smarty (Bloque 9) ──────────────────────────
   Dos capas: por defecto el login (con la mano); al pasar el cursor
   hace crossfade a la vista interna del dashboard — "vamos a verlo por
   dentro". La pista visual (badge) invita a interactuar. */
.teaser__panel {
  position: relative;
  /* Los mockups son capturas de teléfono (retrato): un panel 4:3 apaisado
     los aplastaba y el rotate() cortaba las esquinas contra overflow:hidden.
     En vertical hay aire de sobra para la inclinación.
     OJO: como ítem de grid, un margin-inline:auto desactiva el stretch por
     defecto — y sin stretch ni width propio, aspect-ratio no tiene de
     dónde derivar el ancho y el panel colapsaba a 0×0. width:100% garantiza
     tamaño siempre; justify-self:center lo centra sin ese efecto lateral. */
  width: 100%;
  max-width: 420px;
  justify-self: center;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(40,122,237,0.28), transparent 55%),
    linear-gradient(160deg, var(--navy-2), var(--navy));
  overflow: hidden;
  box-shadow: var(--shadow-md);
  cursor: pointer;
}
.teaser__shot {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}
.teaser__shot img {
  height: 84%;
  width: auto;
  filter: drop-shadow(0 24px 40px rgba(0,0,0,0.45));
  transition: transform 700ms var(--ease-out);
}
.teaser__shot--login {
  opacity: 1;
  transform: scale(1);
  transition: opacity 520ms var(--ease-out), transform 700ms var(--ease-out);
}
.teaser__shot--dash {
  opacity: 0;
  transform: scale(0.94);
  transition: opacity 520ms var(--ease-out), transform 700ms var(--ease-out);
}
.teaser__shot--dash img { transform: rotate(-4deg); }
/* Ancla la mano+teléfono a la esquina inferior derecha: transform-origin
   en esa esquina para que la rotación gire "desde ahí" y la imagen se
   sienta al ras del borde, como si la mano entrara desde la esquina. */
.teaser__shot--login { place-items: end; }
.teaser__shot--login img {
  height: 98%;
  transform-origin: bottom right;
  transform: rotate(-2deg) translate(10%, 8%);
}
.teaser__panel:hover .teaser__shot--login,
.teaser__panel:focus-visible .teaser__shot--login { opacity: 0; transform: scale(1.04); }
.teaser__panel:hover .teaser__shot--dash,
.teaser__panel:focus-visible .teaser__shot--dash { opacity: 1; transform: scale(1); }
.teaser__panel:hover .teaser__shot--dash img { transform: rotate(-2deg) translateY(-6px); }

/* Pista de "esto es interactivo" — un ícono chico y sutil (no un texto
   gritando instrucciones), que respira suave y se apaga al hacer hover,
   justo cuando ya no hace falta. */
.teaser__hint {
  position: absolute;
  inset-inline-end: var(--space-4);
  inset-block-end: var(--space-4);
  width: 32px; height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,0.14);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
  animation: hintpulse 2.6s var(--ease-soft) infinite;
  transition: opacity 260ms var(--ease-out);
  pointer-events: none;
}
.teaser__hint svg { width: 14px; height: 14px; }
.teaser__panel:hover .teaser__hint { opacity: 0; }
@keyframes hintpulse {
  0%, 100% { transform: scale(1); opacity: 0.9; }
  50%      { transform: scale(1.14); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .teaser__hint { animation: none; } }

/* ── Cotizador (Bloque 10 · reemplaza el CTA duplicado) ────────────
   Selector de servicio (precio "desde" dinámico) + piso de inversión +
   datos de contacto. El botón de agenda solo se habilita si la persona
   ya indicó que está lista para invertir — así no se agenda quien todavía
   solo quiere mirar. */
.quote { max-width: 880px; margin-inline: auto; }
.quote__intro { text-align: center; margin-bottom: var(--space-7); }
.quote__intro .lead { max-width: 56ch; margin: var(--space-3) auto 0; }

.quote__step-label {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: var(--space-3);
}

/* Rastreador de los 3 pasos: azul el activo, verde lo ya hecho — mismo
   lenguaje de color que el rail de La Ruta Smart (ver ruta-smart.css). */
.qsteps {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-6) 0 var(--space-7);
}
.qstep {
  display: flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-xs); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--ink-mute);
}
.qstep__n {
  display: grid; place-items: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--bg-2);
  color: var(--ink-mute);
  font-size: 11px;
  transition: background 200ms var(--ease-out), color 200ms var(--ease-out);
}
.qstep.is-on { color: var(--ink); }
.qstep.is-on .qstep__n { background: var(--azul); color: #fff; }
.qstep.is-done .qstep__n { background: var(--chispa-verde); color: #fff; }
.qstep__bar { width: 32px; height: 2px; background: var(--line); }
.qstep__bar.is-done { background: var(--chispa-verde); }
@media (max-width: 560px) { .qstep__label { display: none; } }

.quote__services {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.qsvc {
  position: relative;
  text-align: left;
  padding: var(--space-4);
  border-radius: var(--radius);
  border: 1.5px solid var(--line);
  background: var(--paper);
  cursor: pointer;
  transition: border-color 180ms var(--ease-out), background 180ms var(--ease-out),
              transform 180ms var(--ease-out);
}
.qsvc:hover { border-color: var(--azul); transform: translateY(-2px); }
.qsvc__badge {
  position: absolute; top: var(--space-3); inset-inline-end: var(--space-3);
  font-size: 9.5px; font-weight: 800; letter-spacing: 0.03em;
  color: var(--azul); background: var(--azul-soft);
  padding: 2px 8px; border-radius: 999px;
}
.qsvc__ic { font-size: 20px; margin-bottom: var(--space-2); }
.qsvc__label { display: block; font-family: var(--font-display); font-weight: 700; font-size: var(--text-sm); }
.qsvc__pago {
  display: inline-block; margin-top: var(--space-2);
  font-size: 10px; font-weight: 800; letter-spacing: 0.03em;
  padding: 2px 8px; border-radius: 999px;
}
.qsvc__pago--unico { color: var(--azul); background: var(--azul-soft); }
.qsvc__pago--mensual { color: var(--chispa-verde); background: #e6f6ec; }
.qsvc[aria-pressed="true"] {
  border-color: var(--azul);
  background: var(--azul-soft);
  box-shadow: 0 0 0 3px rgba(40,122,237,0.14);
}

/* La tarjeta "no sé por dónde empezar": mismo idioma visual que .qsvc,
   pero ancha y es un link real al Test Ruta Smart, no una selección. */
.qopt--wide {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  text-align: left;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius);
  border: 1.5px dashed var(--line);
  text-decoration: none;
  color: inherit;
  margin-bottom: var(--space-6);
  transition: border-color 180ms var(--ease-out), background 180ms var(--ease-out);
}
.qopt--wide:hover { border-color: var(--azul); background: var(--azul-soft); }
.qopt--wide .qopt__ic { font-size: 22px; flex: none; }
.qopt--wide h4 { font-family: var(--font-display); font-size: var(--text-base); margin-bottom: 2px; }
.qopt--wide p { font-size: var(--text-sm); color: var(--ink-mute); }

/* Preguntas del paso 2: tarjetas apiladas para la opción principal
   (kind:"opt") — mismo trato que .qsvc, en lista en vez de grilla. */
.qopt-list { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-2); }
.qopt {
  position: relative;
  text-align: left;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius);
  border: 1.5px solid var(--line);
  background: var(--paper);
  cursor: pointer;
  transition: border-color 180ms var(--ease-out), background 180ms var(--ease-out);
}
.qopt:hover { border-color: var(--azul); }
.qopt.is-sel { border-color: var(--azul); background: var(--azul-soft); box-shadow: 0 0 0 3px rgba(40,122,237,0.14); }
.qopt h4 { font-family: var(--font-display); font-size: var(--text-base); margin-bottom: 2px; }
.qopt p { font-size: var(--text-sm); color: var(--ink-mute); }
.qopt__top {
  position: absolute; top: var(--space-3); inset-inline-end: var(--space-3);
  font-size: 10px; font-weight: 800; color: var(--navy); background: var(--chispa-oro);
  padding: 3px 9px; border-radius: 999px;
}

/* Preguntas de elección corta (kind:"chip") — mismo trato visual que
   .qradio, pero como botones (no hay radio nativo detrás). */
.qchip-list { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-2); }
.qchip {
  padding: var(--space-2) var(--space-4);
  border-radius: 999px;
  border: 1.5px solid var(--line);
  background: var(--paper);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--ink-soft);
  cursor: pointer;
  transition: border-color 180ms var(--ease-out), background 180ms var(--ease-out), color 180ms var(--ease-out);
}
.qchip:hover { border-color: var(--azul); }
.qchip[aria-pressed="true"] { border-color: var(--azul); background: var(--azul); color: #fff; }

/* Pregunta numérica (kind:"number") — cuántos reels/posts. */
.qnumber { text-align: center; margin-bottom: var(--space-2); }
.qnumber input {
  width: 120px; text-align: center;
  font: inherit; font-size: var(--text-base);
  padding: var(--space-2) var(--space-3);
  border-radius: 10px; border: 1.5px solid var(--line);
}
.qnumber input:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px rgba(40,122,237,0.14); }

/* Tooltip "ⓘ" — explica jerga (ADN de Marca, dirección experta) sin
   sacar a nadie del formulario. */
.qtip {
  position: relative;
  display: inline-flex; align-items: center; gap: 3px;
  color: var(--azul); font-weight: 800;
  border-bottom: 1.5px dotted var(--azul);
  cursor: help;
}
.qtip .qtip__box {
  position: absolute; bottom: 135%; left: 50%; transform: translateX(-50%);
  width: 230px; background: var(--navy); color: #fff;
  font-size: var(--text-xs); font-weight: 500; line-height: 1.5;
  padding: var(--space-3); border-radius: 10px;
  opacity: 0; pointer-events: none; transition: opacity 160ms var(--ease-out);
  box-shadow: var(--shadow-lg); z-index: 5; text-align: left;
}
.qtip:hover .qtip__box, .qtip:focus .qtip__box { opacity: 1; }

/* Pill de servicio elegido, arriba del paso 2/3. */
.qsvcpill {
  display: block; text-align: center; margin: 2px 0 var(--space-5);
}
.qsvcpill span {
  display: inline-block; background: var(--azul-soft); color: var(--azul);
  font-weight: 800; font-size: var(--text-sm); letter-spacing: 0.02em;
  text-transform: uppercase; padding: var(--space-2) var(--space-4); border-radius: 999px;
}

/* Estimación (paso 3) — la franja navy ya establecida en el sitio, con
   más aire para números grandes y, en campañas, dos bloques de precio. */
.qest {
  background: var(--navy);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  text-align: center;
  margin-bottom: var(--space-3);
}
.qest__label { font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.65); }
.qest__value {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.6rem, 4vw, 2rem); letter-spacing: -0.02em;
  margin: var(--space-2) 0;
}
.qest__value--sm { font-size: var(--text-xl); margin: 2px 0; }
.qest__value .g, .qest__gold { color: var(--chispa-oro); }
.qest__note { font-size: var(--text-sm); color: rgba(255,255,255,0.78); margin-top: var(--space-1); }
.qest__disc {
  font-size: var(--text-xs); color: rgba(255,255,255,0.6);
  margin-top: var(--space-4); padding-top: var(--space-4);
  border-top: 1px solid rgba(255,255,255,0.14);
}
@media (max-width: 620px) { .qest { text-align: left; } }

/* Nota verde "el presupuesto de ads va aparte" — mismo verde de marca
   que ya usamos para estados "listo/hecho" en el resto del sitio. */
.qcapsule {
  background: #e9f8ef;
  border: 1.5px solid var(--chispa-verde);
  border-radius: var(--radius);
  padding: var(--space-4) var(--space-5);
  color: #0f5f30;
  font-size: var(--text-sm);
  line-height: 1.6;
  text-align: left;
  margin-bottom: var(--space-6);
}
.qcapsule__h { font-weight: 800; color: var(--chispa-verde); font-size: var(--text-base); margin-bottom: var(--space-1); }

.quote__stepnav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-6);
}
.quote__stepnav--end { justify-content: flex-end; }

.quote__field { border: none; padding: 0; margin: 0 0 var(--space-7); }
.quote__field legend {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-base);
  padding: 0; margin-bottom: var(--space-1);
}
.quote__field-hint { font-size: var(--text-sm); color: var(--ink-mute); margin-bottom: var(--space-4); }

.quote__radios { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.qradio { position: relative; }
.qradio input {
  position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer;
}
.qradio span {
  display: inline-flex; align-items: center;
  padding: var(--space-2) var(--space-4);
  border-radius: 999px;
  border: 1.5px solid var(--line);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--ink-soft);
  transition: border-color 180ms var(--ease-out), background 180ms var(--ease-out), color 180ms var(--ease-out);
}
.qradio input:checked + span {
  border-color: var(--azul);
  background: var(--azul);
  color: #fff;
}
.qradio input:focus-visible + span { outline: 2px solid var(--azul); outline-offset: 2px; }

.quote__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}
.qfield { display: flex; flex-direction: column; gap: var(--space-2); }
.qfield--full { grid-column: 1 / -1; }
.qfield span { font-size: var(--text-sm); font-weight: 600; color: var(--ink-soft); }
.qfield input, .qfield textarea, .qfield select {
  font: inherit;
  padding: var(--space-3) var(--space-4);
  border-radius: 10px;
  border: 1.5px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  transition: border-color 180ms var(--ease-out), box-shadow 180ms var(--ease-out);
}
.qfield input:focus, .qfield textarea:focus, .qfield select:focus {
  outline: none;
  border-color: var(--azul);
  box-shadow: 0 0 0 3px rgba(40,122,237,0.14);
}
.qfield textarea { resize: vertical; min-height: 90px; }

.quote__submit { text-align: center; margin-top: var(--space-6); }
.quote__micro { font-size: var(--text-sm); color: var(--ink-mute); margin-top: var(--space-3); }

/* El botón de agenda solo aparece cuando la persona ya marcó una
   inversión real (cualquiera menos "aún no lo sé"). */
.quote__agenda {
  margin-top: var(--space-7);
  padding-top: var(--space-7);
  border-top: 1px solid var(--line);
  text-align: center;
  display: none;
}
.quote__agenda.is-visible { display: block; animation: qfadein 420ms var(--ease-out); }
@keyframes qfadein { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.quote__agenda h3 { font-size: var(--text-lg); margin-bottom: var(--space-2); }
.quote__agenda p { color: var(--ink-soft); font-size: var(--text-sm); max-width: 50ch; margin-inline: auto; margin-bottom: var(--space-5); }
.quote__cal { display: none; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); margin-top: var(--space-5); }
.quote__cal.is-visible { display: block; animation: qfadein 420ms var(--ease-out); }
.quote__cal iframe { display: block; width: 100%; }

.quote__done {
  text-align: center;
  padding: var(--space-8) var(--space-5);
}
.quote__done h3 { font-size: var(--text-xl); margin-bottom: var(--space-3); }
.quote__done p { color: var(--ink-soft); max-width: 46ch; margin-inline: auto; }

@media (max-width: 900px) {
  .quote__services { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .quote__grid { grid-template-columns: 1fr; }
  .quote__price { flex-direction: column; align-items: flex-start; gap: var(--space-1); }
}

/* Banda CTA destacada (Bloque 5 test, Bloque 10 final) */
.ctaband {
  text-align: center;
  border-radius: var(--radius-lg);
  padding: clamp(var(--space-7), 6vw, var(--space-9)) var(--space-6);
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(40,122,237,0.16), transparent 60%),
    var(--navy);
  color: #fff;
}
.ctaband h2 { color: #fff; margin-bottom: var(--space-3); }
.ctaband p { color: rgba(255,255,255,0.78); max-width: 52ch; margin-inline: auto; margin-bottom: var(--space-6); }

/* Cápsulas de marca: el archivo original del diseñador (no una
   aproximación en CSS) — cuatro blobs orgánicos recortados de
   assets/img/capsules/*.webp, cada uno con su propio tilt ya
   dibujado, así que no llevan rotate() encima. Se turnan para "dar el
   paso": cada una se levanta y vuelve a su sitio en cadena,
   roja→oro→verde→azul, como una caminata en bucle. Decorativas: no
   deben pisar el texto ni el botón, por eso viven en las esquinas y
   overflow:hidden las recorta al radio del bloque. El hover solo les
   da un empujón extra. */
.ctaband--capsules { position: relative; overflow: hidden; isolation: isolate; }
.ctaband--capsules > *:not(.capsule) { position: relative; z-index: 1; }
.capsule {
  position: absolute;
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
  animation: capsuleStep 3.6s var(--ease-soft) infinite;
}
.capsule--red   { width: 168px; height: 151px; background-image: url(assets/img/capsules/red.webp);   top: -30px;   left: 4%;    animation-delay: 0.00s; --tx: 12px;  --ty: -12px; }
.capsule--gold  { width: 150px; height: 142px; background-image: url(assets/img/capsules/gold.webp);  top: 66px;    left: -22px; animation-delay: 0.30s; --tx: -12px; --ty: -10px; }
.capsule--green { width: 132px; height: 147px; background-image: url(assets/img/capsules/green.webp); bottom: 70px; right: -18px; animation-delay: 0.60s; --tx: 12px;  --ty: 10px; }
.capsule--blue  { width: 176px; height: 147px; background-image: url(assets/img/capsules/blue.webp);  bottom: -30px; right: 2%;   animation-delay: 0.90s; --tx: -10px; --ty: 14px; }

@keyframes capsuleStep {
  0%, 55%, 100% { transform: translate(0, 0) scale(1); }
  15%           { transform: translate(var(--tx, 12px), var(--ty, -14px)) scale(1.1); }
}

/* El hover no reemplaza la caminata — solo la acelera un momento, como
   si el negocio "apurara el paso" al ver el CTA. */
.ctaband--capsules:hover .capsule { animation-duration: 1.5s; }

@media (max-width: 620px) {
  .capsule--red  { width: 96px;  height: 86px; }
  .capsule--gold { width: 86px;  height: 81px; }
  .capsule--green{ width: 76px;  height: 84px; }
  .capsule--blue { width: 100px; height: 84px; }
}
@media (prefers-reduced-motion: reduce) {
  .capsule { animation: none; }
}

/* Filtro para quién es / para quién no (Bloque 6) */
.filter {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  margin-top: var(--space-6);
}
.filter__col {
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--paper);
}
.filter__col--no { background: var(--bg-2); }
.filter__col h3 { font-size: var(--text-lg); margin-bottom: var(--space-4); }
.filter__list li {
  display: flex;
  gap: var(--space-3);
  padding-block: var(--space-2);
  font-size: var(--text-sm);
  color: var(--ink-soft);
}
.filter__list .mark { flex: none; font-weight: 700; }
.filter__col--si .mark { color: var(--chispa-verde); }
.filter__col--no .mark { color: var(--chispa-roja); }
@media (max-width: 720px) { .filter { grid-template-columns: 1fr; } }

/* Teaser de Smarty (Bloque 9) */
.teaser {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-7);
  align-items: center;
}
.teaser__tag {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--azul);
  background: var(--azul-soft);
  padding: var(--space-1) var(--space-3);
  border-radius: 999px;
  margin-bottom: var(--space-4);
}
.teaser__art {
  aspect-ratio: 4/3;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(100% 100% at 0% 0%, rgba(40,122,237,0.12), transparent),
    var(--bg-2);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  color: var(--ink-mute);
  font-size: var(--text-sm);
}
@media (max-width: 820px) { .teaser { grid-template-columns: 1fr; } }

/* Enlace secundario a YariMKT */
.aside-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--azul);
  margin-top: var(--space-4);
}
.aside-link:hover { text-decoration: underline; }

/* ── Reseñas de Google ────────────────────────────────────────────
   Datos reales del perfil de Smartecnia, maquetados con el diseño de
   la marca (nada de widget de terceros). Para refrescarlas: se vuelven
   a leer del perfil y se regenera este bloque. */
.reviews__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  text-align: center;
  margin-bottom: var(--space-8);
}

.gbadge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
}
.gbadge__g { width: 20px; height: 20px; flex: none; }
.gbadge__score { font-weight: 700; font-size: var(--text-lg); line-height: 1; }
.gbadge__stars { color: var(--chispa-oro); letter-spacing: 2px; }
.gbadge__count { font-size: var(--text-sm); color: var(--ink-mute); }
.gbadge__sep { width: 1px; height: 22px; background: var(--line); }

/* Slider: muestra 3 tarjetas y avanza de 2 en 2 (lo controla main.js).
   --visible lo lee el JS para saber cuántas caben en cada breakpoint. */
.reviews__slider { --visible: 3; --gap: var(--space-5); }

.reviews__viewport {
  overflow: hidden;
}
.reviews__track {
  display: flex;
  gap: var(--gap);
  align-items: stretch;         /* todas las tarjetas igual de altas */
  transition: transform 620ms var(--ease-out);
  will-change: transform;
}
.review {
  flex: 0 0 calc((100% - (var(--visible) - 1) * var(--gap)) / var(--visible));
  display: flex;
  flex-direction: column;
  padding: var(--space-5);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.review__author { margin-top: auto; }   /* el autor se ancla abajo aunque el texto varíe */

/* Controles */
.reviews__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-6);
}
.reviews__arrow {
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--paper);
  color: var(--ink);
  font-size: var(--text-lg);
  transition: transform 180ms var(--ease-out), box-shadow 180ms var(--ease-out),
              border-color 180ms var(--ease-out), opacity 180ms var(--ease-out);
}
.reviews__arrow:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
  border-color: var(--azul);
  color: var(--azul);
}
.reviews__arrow:active { transform: translateY(0) scale(0.94); transition-duration: 90ms; }

.reviews__dots { display: flex; gap: var(--space-2); }
.reviews__dot {
  width: 8px; height: 8px;
  border-radius: 999px;
  background: var(--line-strong);
  transition: width 260ms var(--ease-out), background-color 260ms var(--ease-out);
}
.reviews__dot[aria-current="true"] { width: 26px; background: var(--azul); }
.review__stars {
  color: var(--chispa-oro);
  letter-spacing: 2px;
  font-size: var(--text-sm);
  margin-bottom: var(--space-3);
}
.review__text {
  font-size: var(--text-sm);
  line-height: 1.65;
  color: var(--ink-soft);
  margin-bottom: var(--space-4);
}
.review__author {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
}
.review__avatar {
  flex: none;
  width: 40px; height: 40px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--bg-2);
}
.review__name { font-weight: 600; font-size: var(--text-sm); line-height: 1.3; }
.review__date { font-size: var(--text-xs); color: var(--ink-mute); }
/* Bandera del país del cliente — clientes de varios países confirman que
   la distancia no es problema para trabajar con nosotros. SVG propio en
   vez de emoji: en Windows los emoji de bandera se ven como texto plano
   ("CL", "VE") en vez de la banderita — ver el sprite <symbol> al inicio
   del <body>. */
.review__flag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-inline-start: 4px;
  vertical-align: middle;
}
.review__flag svg {
  width: 15px;
  height: 10px;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(10, 21, 38, 0.10);
  flex: none;
}
.review__src  { margin-inline-start: auto; font-size: var(--text-xs); color: var(--ink-mute); }

.reviews__foot {
  text-align: center;
  margin-top: var(--space-7);
}

@media (max-width: 900px) { .reviews__slider { --visible: 2; } }
@media (max-width: 620px) { .reviews__slider { --visible: 1; } }

/* ── Revelado en scroll ───────────────────────────────────────── */
/* Mismo criterio que el mosaico: sin JS, el contenido se ve. */
.js .reveal {
  opacity: 0;
  transform: translate3d(0, 20px, 0);
  transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
}
.js .reveal.is-in { opacity: 1; transform: none; }

/* Red de seguridad: si el JS de split falla, el texto NO puede quedar invisible */
.reveal[data-split] { opacity: 1; transform: none; }

/* ── Utilidades ───────────────────────────────────────────────── */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute;
  inset-block-start: -100px;
  inset-inline-start: var(--space-4);
  z-index: 200;
  padding: var(--space-3) var(--space-4);
  background: var(--azul);
  color: #fff;
  border-radius: 0 0 var(--radius) var(--radius);
  transition: top 200ms var(--ease-out);
}
.skip-link:focus { inset-block-start: 0; }

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 1180px) {
  .mosaic { --center: 720px; }
}

/* ── Mosaico en móvil: de canales laterales a vitrina en rotación ──
   Los canales que flanquean el texto no caben, pero esconder el trabajo
   era tirar el mejor activo de la página. En vez de eso el mosaico baja
   bajo el titular y rota solo — como el marquee de logos de más abajo —
   para que las 12 piezas se vean sin que nadie tenga que arrastrar nada. */
@media (max-width: 980px) {
  .hero {
    min-height: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-7);
  }
  .hero::after { display: none; }   /* el mosaico ya no está detrás: sobra el fundido */
  .hero__sub { font-size: 0.95rem; }

  .mosaic {
    position: static;
    width: 100%;
    overflow: hidden;
    pointer-events: none;           /* decorativo, como el marquee de logos: no se arrastra */
    padding-block: var(--space-2);
    /* Difumina los bordes: sugiere "sigue rotando" sin un corte seco */
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
  }

  /* El track es lo único que se mueve; .mosaic solo recorta. Va duplicado
     (mosaic__dup) para que al llegar a -50% el segundo tramo calce
     exacto con el primero y el loop no dé un salto. */
  .mosaic__track {
    display: flex;
    align-items: center;
    gap: 14px;
    width: max-content;
    animation: marquee 34s linear infinite;
  }
  .mosaic__dup { display: contents; }

  /* display:contents disuelve los contenedores de canal/columna, así las
     tarjetas quedan como hijas directas de la fila flex del track. */
  .mosaic__side { display: contents; }
  .mosaic__col {
    display: contents;
    transform: none;                /* anula el --off que desnivela en escritorio */
  }

  .mosaic__card {
    width: auto;                    /* el ancho lo deriva el aspect-ratio */
    margin-inline-start: 0;         /* fuera el jitter horizontal de escritorio */
  }
  .mosaic__card img {
    width: auto;
    height: clamp(150px, 40vw, 210px);
  }
}
@media (max-width: 980px) and (prefers-reduced-motion: reduce) {
  .mosaic { overflow-x: auto; }
  .mosaic__track { animation: none; }
  .mosaic__dup { display: none; }   /* sin loop no hace falta duplicar contenido */
}

/* ── Menú móvil (drawer) ─────────────────────────────────────────
   El burger solo animaba el ícono — nunca existía CSS que mostrara algo
   al activar body.menu-open. Aquí sí: panel navy a pantalla completa,
   coherente con el header en su estado de scroll. */
@media (max-width: 860px) {
  .nav__burger { display: flex; }

  /* OJO — trampa de CSS: `.nav` con backdrop-filter convierte a `.nav`
     (no al viewport) en el "containing block" de cualquier descendiente
     position:fixed, así que `top:100%` terminaba resolviendo contra la
     altura del propio header (72px) en vez de la pantalla — un efecto
     lateral, no algo explícito. En `.nav--ondark` (ruta-smart) ese
     backdrop-filter se quita, el containing block vuelve a ser el
     viewport, y `top:100%` pasa a valer el alto completo de la pantalla:
     el drawer se abre entero por debajo del borde inferior, invisible.
     Arreglo robusto: `top: var(--nav-h)` en vez de depender de ese
     efecto secundario — funciona igual haya o no backdrop-filter. */
  .nav__links {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    position: fixed;
    top: var(--nav-h);
    inset-inline: 0;
    height: calc(100vh - var(--nav-h));
    margin: 0;
    padding: var(--space-5) var(--space-6) calc(var(--space-9) + 72px);
    background:
      radial-gradient(140% 60% at 15% 0%, rgba(40,122,237,0.30), transparent 55%),
      linear-gradient(180deg, rgba(10,21,38,0.97), rgba(14,27,51,0.97));
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    overflow-y: auto;
    z-index: 99;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 280ms var(--ease-out), transform 280ms var(--ease-out),
                visibility 0s linear 280ms;
  }
  body.menu-open .nav__links {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 280ms var(--ease-out), transform 280ms var(--ease-out),
                visibility 0s linear 0s;
  }

  .nav__links a {
    color: #fff;
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 600;
    padding-block: var(--space-4);
    border-bottom: 1px solid rgba(255,255,255,0.12);
    display: flex;
    align-items: center;
    gap: var(--space-3);
  }
  /* Un puntito de color por link en vez del subrayado de escritorio —
     mismo código de color, adaptado a lista vertical. */
  .nav__links a::before {
    content: "";
    width: 9px; height: 9px;
    border-radius: 50%;
    flex: none;
  }
  .nav__links a::after { content: none; }
  .nav__links a:nth-child(1)::before { background: var(--chispa-roja); }
  .nav__links a:nth-child(2)::before { background: var(--chispa-oro); }
  .nav__links a:nth-child(3)::before { background: var(--chispa-verde); }
  .nav__links a:nth-child(4)::before { background: var(--azul); }

  .nav__cta {
    display: flex;
    justify-content: center;
    position: fixed;
    /* Mismo motivo que arriba: `inset-block-end` se resolvía contra los
       72px del header, no contra la pantalla. Se ancla con `top` en vh:
       como el header ya empieza en el borde superior real, este `top` SÍ
       coincide con la coordenada real de la pantalla (24px de aire +
       ~48px de alto del botón, medido). */
    top: calc(100vh - 72px);
    inset-inline: var(--space-6);
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 280ms var(--ease-out) 60ms, transform 280ms var(--ease-out) 60ms,
                visibility 0s linear 340ms;
  }
  body.menu-open .nav__cta {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 280ms var(--ease-out) 60ms, transform 280ms var(--ease-out) 60ms,
                visibility 0s linear 0s;
  }
  /* Con inset-inline (left+right) YA fijados, width:auto estira el botón
     exactamente al hueco entre ambos — un width:100% aquí se sobre-
     restringe con esos insets y el botón se desborda por la derecha.
     Gana por especificidad sobre la regla general `.btn{width:100%}`
     de la media query de 520px. */
  .nav__cta.btn { width: auto; }

  .hero { padding-block: calc(var(--nav-h) + var(--space-7)) var(--space-8); }
  .hero__title { font-size: clamp(2rem, 8.5vw, 2.6rem); }
}

/* El scroll del body se bloquea mientras el drawer está abierto (la clase
   solo se activa desde el burger, que solo existe en mobile). */
body.menu-open { overflow: hidden; }

/* Con el drawer abierto, el header pasa a su look navy aunque no se haya
   hecho scroll — si no, queda un header blanco pegado justo encima de un
   panel navy, y se ve como dos piezas sueltas en vez de una sola pieza. */
body.menu-open .nav:not(.is-stuck) {
  background:
    radial-gradient(140% 240% at 12% 0%, rgba(40,122,237,0.28), transparent 55%),
    linear-gradient(180deg, rgba(10,21,38,0.90), rgba(14,27,51,0.80));
  border-bottom-color: rgba(255,255,255,0.10);
}
body.menu-open .nav:not(.is-stuck) img.nav__logo-color { display: none; }
body.menu-open .nav:not(.is-stuck) img.nav__logo-white { display: block; }
body.menu-open .nav:not(.is-stuck) .nav__burger span,
body.menu-open .nav:not(.is-stuck) .nav__burger span::before,
body.menu-open .nav:not(.is-stuck) .nav__burger span::after { background: #fff; }

@media (max-width: 520px) {
  .btn { width: 100%; }
  .hero__actions { flex-direction: column; }
}

/* ── Instagram / síguenos ─────────────────────────────────────────
   Bloque de cierre del contenido: invita a seguir la marca antes del
   footer. El feed real se inyecta vía Behold (script cargado aparte). */
.igcta {
  text-align: center;
  max-width: 640px;
  margin-inline: auto;
}
.igcta .btn { margin-top: var(--space-6); }
.igfeed {
  margin-top: var(--space-8);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
/* Mientras el widget externo carga (o si el script no llegara a correr),
   dejamos un piso con altura reservada — nunca un hueco en blanco. */
.igfeed:empty,
.igfeed:has(> :only-child:empty) {
  min-height: 220px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.5);
  font-size: var(--text-sm);
}

/* ── Footer · estructura de app, no de sitio corporativo ──────────
   Nada de columnas de links grises: tarjetas translúcidas tipo panel de
   ajustes, botones sociales circulares a color, CTA grande arriba. */
.footer {
  background:
    radial-gradient(120% 100% at 85% 0%, rgba(40,122,237,0.20), transparent 55%),
    linear-gradient(180deg, var(--navy) 0%, var(--navy-2) 100%);
  color: rgba(255,255,255,0.86);
  padding-block: clamp(var(--space-8), 7vw, var(--space-10)) var(--space-6);
}

/* Grid de tarjetas — como los "settings groups" de una app */
.footer__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
}
.ftile {
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  transition: background 260ms var(--ease-out), border-color 260ms var(--ease-out);
}
.ftile:hover { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.16); }
.ftile__h {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  margin-bottom: var(--space-3);
}
.ftile a, .ftile__link {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: rgba(255,255,255,0.86);
  font-size: var(--text-sm);
  font-weight: 500;
  padding-block: var(--space-2);
  border-radius: 8px;
  transition: color 180ms var(--ease-out), transform 180ms var(--ease-out);
}
.ftile a:hover { color: #fff; transform: translateX(2px); }
/* Navegación del footer: mismo subrayado por color de marca que el menú
   superior — son los mismos 4 links, en el mismo orden. Con
   text-decoration en vez de una barra absoluta: así el trazo abraza
   justo el ancho de la palabra, no la fila completa (el <a> sigue
   ocupando toda la fila para el área de clic/hover). */
nav.ftile a {
  justify-content: flex-start;
  text-decoration-line: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  transition: color 180ms var(--ease-out), transform 180ms var(--ease-out),
              text-decoration-color 200ms var(--ease-out);
}
nav.ftile a:nth-of-type(1):hover { text-decoration-color: var(--chispa-roja); } /* La Ruta Smart */
nav.ftile a:nth-of-type(2):hover { text-decoration-color: var(--chispa-oro); }  /* Casos */
nav.ftile a:nth-of-type(3):hover { text-decoration-color: var(--chispa-verde); } /* El Team */
nav.ftile a:nth-of-type(4):hover { text-decoration-color: var(--azul); }        /* Smarty */
.ftile__link--static { color: rgba(255,255,255,0.6); }
.ftile__link--static:hover { transform: none; color: rgba(255,255,255,0.6); }
.ftile svg { flex: none; width: 17px; height: 17px; opacity: 0.75; }
.ftile__note {
  color: rgba(255,255,255,0.6);
  font-size: var(--text-sm);
  line-height: 1.5;
  margin-bottom: var(--space-2);
}

/* ── Newsletter "La Ruta Smart" ────────────────────────────────
   Un solo campo + botón: la fricción mínima para un footer. El input
   crece y el botón es fijo, así nunca se rompe la línea. */
.news__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-lg);
  color: #fff;
  line-height: 1.2;
  margin-bottom: var(--space-2);
}
.news__form {
  display: flex;
  gap: var(--space-2);
  margin-top: auto;          /* empuja el form al fondo: tarjetas parejas */
  padding-top: var(--space-3);
}
.news__input {
  flex: 1 1 auto;
  min-width: 0;              /* sin esto un flex item no baja de su ancho base */
  padding: var(--space-3);
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.06);
  color: #fff;
  font: inherit;
  font-size: var(--text-sm);
  transition: border-color 180ms var(--ease-out), background 180ms var(--ease-out);
}
.news__input::placeholder { color: rgba(255,255,255,0.42); }
.news__input:focus {
  outline: none;
  border-color: var(--azul);
  background: rgba(255,255,255,0.10);
}
.news__btn {
  flex: none;
  width: 44px;
  border: 0;
  border-radius: 10px;
  background: var(--azul);
  color: #fff;
  font-size: var(--text-lg);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 180ms var(--ease-out), transform 180ms var(--ease-spring);
}
.news__btn:hover { background: var(--azul-hover); transform: translateX(2px); }
.news__btn:disabled { opacity: 0.55; cursor: default; transform: none; }
.news__micro {
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.45);
  margin-top: var(--space-2);
  line-height: 1.45;
}
.news__micro.is-ok  { color: var(--chispa-verde); }
.news__micro.is-err { color: #ff9d9a; }

/* ── Síguenos — filas, no botones sueltos ──────────────────────
   Cuatro círculos dejaban la tarjeta medio vacía y sin contexto (ni el
   nombre de la red ni el usuario). En filas se lee igual que Contacto —
   misma familia visual — con el chip de color como acento de marca. */
.fsocial { display: flex; flex-direction: column; gap: 2px; }
.ftile .fsocial__row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-block: var(--space-2);
}
.fsocial__chip {
  flex: none;
  width: 30px; height: 30px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: #fff;
  box-shadow: 0 3px 10px rgba(0,0,0,0.26);
  transition: transform 200ms var(--ease-spring), filter 200ms var(--ease-out);
}
.ftile .fsocial__chip svg { width: 17px; height: 17px; opacity: 1; }
.fsocial__row:hover .fsocial__chip { transform: scale(1.1) rotate(-4deg); filter: brightness(1.12); }
.fsocial__net { font-weight: 600; }
.fsocial__at {
  margin-inline-start: auto;
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.42);
}
.fsocial__chip--ig { background: radial-gradient(120% 130% at 20% 120%, #ffd600 0%, #ff7a00 22%, #e5334a 44%, #c72d95 66%, #7040c9 88%); }
.fsocial__chip--th { background: #101010; }
.fsocial__chip--yt { background: #ff0000; }
.fsocial__chip--li { background: #0a66c2; }

.footer__bottom {
  margin-top: clamp(var(--space-7), 6vw, var(--space-8));
  padding-top: var(--space-5);
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  justify-content: space-between;
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.5);
}
.footer__made { display: inline-flex; align-items: center; gap: 6px; }
.footer__made .spark { font-weight: 700; }
/* La firma: el logo vive aquí abajo, junto al copyright, en vez de en una
   franja propia arriba. Cierra el footer y libera peso visual del grid. */
.footer__sig {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.footer__logo { height: 40px; width: auto; opacity: 0.9; }

@media (max-width: 900px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .footer__grid { grid-template-columns: 1fr; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }
  .news__form { margin-top: var(--space-2); }
}

/* Windows envía prefers-reduced-motion:reduce activado por defecto en muchos
   equipos. Solo desactivamos lo intrusivo (flotación ambiental), nunca el
   feedback funcional de botones ni los revelados. */
@media (prefers-reduced-motion: reduce) {
  .mosaic__card img { animation: none; }
}