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

/* ==========================================================================
   RecallGo — sistema de diseño
   Paleta muestreada directamente del logo, no derivada de un framework.
   ========================================================================== */

:root {
  /* Tintas del logo */
  --navy:        #004890;
  --navy-deep:   #033463;
  --navy-soft:   #2E6BAB;
  --cyan:        #18A8C0;
  --petrol:      #007890;
  --green:       #30A890;
  --orange:      #F07800;
  --orange-hot:  #D86A00;

  /* Papel: cálido, no blanco clínico. El negocio mexicano vive en
     papel, recibos y libretas; el fondo lo reconoce. */
  --paper:       #FBFAF8;
  --paper-warm:  #F5F2ED;
  /* Superficie de datos tintada hacia el azul de marca. Un gris neutro
     (#F5F5F5) hace que las tablas se lean como Excel; el tinte frío contra
     el papel cálido separa "zona de producto" de "zona de discurso". */
  --surface-cool: #F1F4F9;
  --card:        #FFFFFF;

  --ink:         #10243A;
  --ink-2:       #4A5D73;
  --ink-3:       #8194A8;

  --line:        #E3E0DA;
  --line-soft:   #EFEDE8;

  /* Sombras teñidas de azul, nunca negro puro (sobre papel cálido se ve
     sucio). Solo DOS niveles de elevación además del ring: con más, el ojo
     deja de distinguir qué está al fondo y qué al frente.
     El ring va por box-shadow y no por border para no alterar el box model:
     así las filas de una tabla alinean al pixel. */
  --sh-1: 0 0 0 1px rgba(16, 36, 58, 0.07);
  --sh-2: 0 0 0 1px rgba(16, 36, 58, 0.06), 0 3px 6px rgba(16, 36, 58, 0.06);
  --sh-3: 0 0 0 1px rgba(16, 36, 58, 0.05), 0 15px 35px rgba(16, 36, 58, 0.09);
  --sh-4: 0 0 0 1px rgba(16, 36, 58, 0.05), 0 20px 55px rgba(16, 36, 58, 0.13);

  --font-display: "Bricolage Grotesque", Georgia, serif;
  --font-body:    "Public Sans", system-ui, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", monospace;

  /* Escala tipográfica fluida */
  --t--1: clamp(0.8rem, 0.78rem + 0.1vw, 0.875rem);
  --t-0:  clamp(1rem, 0.96rem + 0.18vw, 1.09rem);
  --t-1:  clamp(1.15rem, 1.06rem + 0.42vw, 1.4rem);
  --t-2:  clamp(1.5rem, 1.28rem + 1.05vw, 2.2rem);
  --t-3:  clamp(2rem, 1.5rem + 2.3vw, 3.4rem);
  --t-4:  clamp(2.5rem, 1.9rem + 2.7vw, 4.15rem);

  --r-sm: 6px;
  --r:    10px;
  --r-lg: 16px;
  --r-xl: 24px;

  --gutter: clamp(1.15rem, 4vw, 2.75rem);
  --max: 1180px;

  /* Ritmo: las secciones alternan tempo (amplia / densa) en vez de
     repetir el mismo padding toda la página. */
  --pad-air:   clamp(6rem, 13vh, 10rem);
  --pad-dense: clamp(3.5rem, 7vh, 5.5rem);

  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-snap: cubic-bezier(0.22, 1, 0.36, 1);
  --spring: linear(
    0, 0.009, 0.035 2.1%, 0.141 4.4%, 0.723 12.9%,
    0.938 16.7%, 1.017 19.4%, 1.067 22.5%, 1.089 26.0%,
    1.079 30.3%, 1.049 36.0%, 1.024 42.6%, 1.011 50.3%,
    1.004 59.2%, 1.001 69.3%, 1
  );
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-0);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  /* 1.08 mínimo: por debajo de ~1.05 se recortan los diacríticos (á, í, ó)
     y la tilde de la ñ, que en español aparecen en casi cada titular. */
  line-height: 1.08;
  letter-spacing: -0.03em;
  text-wrap: balance;
  color: var(--navy-deep);
}

p { margin: 0; text-wrap: pretty; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }

::selection { background: rgba(240, 120, 0, 0.2); }

:focus-visible {
  outline: 2.5px solid var(--orange);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ==========================================================================
   Layout
   ========================================================================== */

.shell { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.shell--wide { max-width: 1340px; }

/* Ritmo asimétrico: más aire ARRIBA del encabezado que abajo del contenido.
   Así cada sección se lee como una unidad con su título colgado, en vez de
   como una franja flotando entre dos vacíos iguales. */
.air   { padding-top: var(--pad-air);   padding-bottom: calc(var(--pad-air) * 0.62); }
.dense { padding-top: var(--pad-dense); padding-bottom: calc(var(--pad-dense) * 0.7); }

.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--petrol);
  margin-bottom: 1.4rem;
}

.tag::before {
  content: '';
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--orange);
}

.head { max-width: 30ch; margin-bottom: clamp(2.5rem, 6vh, 4.5rem); }
.head h2 { font-size: var(--t-3); margin-bottom: 1.15rem; }
.head p { font-size: var(--t-1); color: var(--ink-2); max-width: 46ch; line-height: 1.5; }
/* El bloque centrado necesita su propio ancho: heredar los 30ch pensados
   para el encabezado alineado a la izquierda dejaba el párrafo en una
   columna de cuatro líneas angostas en medio de la página. */
.head--mid {
  max-width: 64ch;
  margin-inline: auto;
  text-align: center;
}
.head--mid h2 { max-width: 20ch; margin-inline: auto; }
.head--mid p { margin-inline: auto; max-width: 54ch; }

/* Encabezado a dos columnas: el titular sostiene la izquierda y el párrafo
   baja alineado por su base a la derecha. En una sección de ancho completo,
   un bloque único de 30ch deja dos tercios de la página vacíos. */
.head--split {
  max-width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(1.25rem, 5vw, 4rem);
  align-items: end;
}
.head--split .tag { grid-column: 1 / -1; }
.head--split h2 { max-width: 15ch; }
.head--split p  { max-width: 46ch; }

@media (max-width: 860px) {
  .head--split { grid-template-columns: 1fr; align-items: start; }
  .head--split h2 { max-width: 18ch; }
}

.hl { color: var(--orange); }
.hl-cyan { color: var(--petrol); }

/* ==========================================================================
   El hilo — elemento firma

   Un trazo continuo que baja por la página. Se adelgaza donde el relato
   habla de la fuga de clientes y se re-engrosa al cerrar el ciclo. Es el
   gesto del logo (la flecha que regresa sobre sí misma) hecho estructura.
   ========================================================================== */

.thread {
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  translate: -50% 0;
  width: 100%;
  max-width: 1340px;
  pointer-events: none;
  z-index: 0;
  overflow: visible;
}

.thread path {
  fill: none;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.thread-base { stroke: var(--line); stroke-width: 2; }

.thread-live {
  stroke: url(#threadGrad);
  stroke-width: 2.5;
  stroke-dasharray: var(--len, 3000);
  stroke-dashoffset: calc(var(--len, 3000) - (var(--len, 3000) * var(--progress, 0)));
}

.thread-node {
  fill: var(--paper);
  stroke: var(--line);
  stroke-width: 2;
  transition: fill 0.5s var(--ease-out), stroke 0.5s var(--ease-out), r 0.5s var(--spring);
}
.thread-node.is-lit { fill: var(--orange); stroke: var(--orange); }

/* ==========================================================================
   Navegación
   ========================================================================== */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 800;
  padding-block: 1rem;
  transition: background 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out), padding 0.45s var(--ease-out);
}

.nav.is-stuck {
  padding-block: 0.6rem;
  background: rgba(251, 250, 248, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--line), var(--sh-1);
}

.nav-in { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }

/* flex-shrink:0 es lo que evita que el logo se deforme: sin él, el nav
   comprime la imagen a lo ancho manteniendo el alto fijo y las letras
   quedan aplastadas en pantallas angostas. */
.brand { display: inline-flex; align-items: center; flex-shrink: 0; }

.brand img {
  height: 38px;
  width: auto;
  max-width: none;
  object-fit: contain;
  transition: transform 0.5s var(--spring);
}
.brand:hover img { transform: scale(1.03); }

.nav-links { display: flex; gap: 1.9rem; font-size: var(--t--1); font-weight: 500; color: var(--ink-2); }

.nav-links a { position: relative; padding-block: 0.3rem; transition: color 0.3s var(--ease-snap); }
.nav-links a:hover { color: var(--navy); }

.nav-links a::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 2px;
  border-radius: 2px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s var(--ease-snap);
}
.nav-links a:hover::after { transform: scaleX(1); transform-origin: left; }

.nav-side { display: flex; align-items: center; gap: 0.85rem; }

/* ==========================================================================
   Botones
   ========================================================================== */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.78rem 1.45rem;
  border-radius: var(--r);
  font-size: var(--t--1);
  font-weight: 600;
  letter-spacing: -0.005em;
  white-space: nowrap;
  transition:
    transform 0.5s var(--spring),
    background 0.3s var(--ease-snap),
    box-shadow 0.35s var(--ease-snap),
    border-color 0.3s var(--ease-snap);
  will-change: transform;
}

/* El botón se hunde bajo el cursor en vez de flotar: se lee como una
   tecla física, no como un efecto web. */
.btn:hover  { transform: scale(0.975); }
.btn:active { transform: scale(0.95); transition-duration: 0.08s; }

.btn--go {
  background: var(--orange);
  color: #fff;
  box-shadow: 0 1px 0 rgba(255,255,255,0.28) inset, 0 4px 12px rgba(240,120,0,0.28);
}
.btn--go:hover { background: var(--orange-hot); box-shadow: 0 1px 0 rgba(255,255,255,0.28) inset, 0 6px 20px rgba(240,120,0,0.38); }

.btn--navy { background: var(--navy); color: #fff; box-shadow: var(--sh-2); }
.btn--navy:hover { background: var(--navy-deep); }

.btn--line {
  background: var(--card);
  color: var(--navy);
  border: 1.5px solid var(--line);
  box-shadow: var(--sh-1);
}
.btn--line:hover { border-color: var(--navy-soft); }

.btn--plain { padding: 0.4rem 0.2rem; color: var(--ink-2); font-weight: 500; }
.btn--plain:hover { color: var(--navy); transform: none; }

.btn--lg { padding: 1rem 1.9rem; font-size: var(--t-0); }
.btn--full { width: 100%; }

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  position: relative;
  padding-top: clamp(7.5rem, 15vh, 10.5rem);
  padding-bottom: clamp(3rem, 8vh, 6rem);
  overflow: hidden;
}

/* Un halo cálido detrás del titular, no un gradiente de pantalla completa:
   dirige el ojo al mensaje y deja el resto del papel limpio. */
.hero::before {
  content: '';
  position: absolute;
  top: -18%; left: 50%;
  translate: -50% 0;
  width: min(1100px, 120%);
  aspect-ratio: 2 / 1;
  background: radial-gradient(ellipse at center,
    rgba(24, 168, 192, 0.13) 0%,
    rgba(240, 120, 0, 0.07) 42%,
    transparent 68%);
  pointer-events: none;
}

.hero-in { position: relative; display: grid; gap: clamp(2.5rem, 5vw, 4rem); }

/* Sin max-width propio: el grid del hero ya define la columna.
   Limitarla otra vez aquí partía el titular en cuatro líneas. */
.hero-copy { min-width: 0; }

.hero h1 {
  font-size: var(--t-4);
  font-weight: 700;
  font-stretch: 92%;
  letter-spacing: -0.042em;
  margin-bottom: 1.5rem;
}

.hero-sub {
  font-size: var(--t-1);
  color: var(--ink-2);
  max-width: 44ch;
  line-height: 1.5;
  margin-bottom: 2.2rem;
}

.hero-acts { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-bottom: 1.1rem; }

.hero-fine { font-size: var(--t--1); color: var(--ink-3); margin-bottom: 2.6rem; }

.hero-proof { display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; }

.faces { display: flex; }

.faces span {
  width: 34px; height: 34px;
  border-radius: 50%;
  margin-left: -10px;
  border: 2.5px solid var(--paper);
  display: grid;
  place-items: center;
  font-size: 0.66rem;
  font-weight: 700;
  color: #fff;
  background: var(--navy);
  transition: transform 0.5s var(--spring);
}
.faces span:first-child { margin-left: 0; }
.faces span:nth-child(2) { background: var(--petrol); }
.faces span:nth-child(3) { background: var(--green); }
.faces span:nth-child(4) { background: var(--orange); }
.faces:hover span { transform: translateY(-3px); }

.proof-txt { font-size: var(--t--1); color: var(--ink-2); line-height: 1.35; }
.proof-txt b { color: var(--ink); }

/* --- Panel del hero: producto real, no una ilustración --- */

.hero-app {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-4);
  overflow: hidden;
}

.app-bar {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--line-soft);
  background: var(--paper-warm);
}

.app-dots { display: flex; gap: 5px; }
.app-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.app-dots i:first-child { background: #E8A0A0; }

.app-crumb {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--ink-3);
  margin-left: auto;
}

.app-live {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--green);
}

.app-live::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--green);
  animation: blip 2.4s var(--ease-out) infinite;
}

@keyframes blip {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(48,168,144,0.4); }
  50%      { opacity: 0.7; box-shadow: 0 0 0 5px rgba(48,168,144,0); }
}

.app-body { display: grid; grid-template-columns: 1fr 1fr; }

.app-pane { padding: 1.1rem; }
.app-pane + .app-pane { border-left: 1px solid var(--line-soft); }

.pane-h {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 0.9rem;
}
.pane-h b { color: var(--orange); font-size: 0.78rem; }

/* Conversaciones entrantes */
.msgs { display: grid; gap: 0.55rem; }

.msg {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  padding: 0.6rem 0.65rem;
  border-radius: var(--r);
  background: var(--paper);
  border: 1px solid var(--line-soft);
  transition: border-color 0.35s var(--ease-snap), transform 0.4s var(--ease-snap);
}
.msg:hover { border-color: var(--cyan); transform: translateX(2px); }

.msg-ch {
  width: 24px; height: 24px;
  border-radius: 7px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  color: #fff;
}
.msg-ch--wa { background: var(--green); }
.msg-ch--fb { background: var(--navy); }
.msg-ch--tel { background: var(--petrol); }
.msg-ch--mail { background: var(--ink-3); }

.msg-b { min-width: 0; }
.msg-b b { display: block; font-size: 0.78rem; font-weight: 650; }
.msg-b span {
  display: block;
  font-size: 0.73rem;
  color: var(--ink-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.msg-when { margin-left: auto; font-size: 0.66rem; color: var(--ink-3); white-space: nowrap; }

/* Etapas del embudo dentro del hero */
.mini-stage { display: grid; gap: 0.5rem; }

.stage-row { display: grid; gap: 0.3rem; }

.stage-top {
  display: flex;
  justify-content: space-between;
  font-size: 0.73rem;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.stage-top b { font-weight: 650; color: var(--ink); }

.stage-bar { height: 7px; border-radius: 100px; background: var(--paper-warm); overflow: hidden; }

.stage-bar i {
  display: block;
  height: 100%;
  border-radius: 100px;
  background: var(--navy);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.1s var(--ease-out);
}
.is-loaded .stage-bar i, .is-visible .stage-bar i { transform: scaleX(var(--w, 0.5)); }
.stage-row:nth-child(2) .stage-bar i { background: var(--petrol); transition-delay: 0.1s; }
.stage-row:nth-child(3) .stage-bar i { background: var(--cyan); transition-delay: 0.2s; }
.stage-row:nth-child(4) .stage-bar i { background: var(--green); transition-delay: 0.3s; }

.app-foot {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.8rem 1.1rem;
  border-top: 1px solid var(--line-soft);
  background: var(--paper-warm);
  font-size: 0.76rem;
}

.foot-ai {
  width: 22px; height: 22px;
  border-radius: 6px;
  background: var(--orange);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  color: #fff;
}

.app-foot b { font-weight: 650; }
.app-foot span { color: var(--ink-2); }

/* Tarjeta suelta que se sale del panel: rompe el rectángulo */
.hero-flag {
  position: absolute;
  right: -14px; bottom: -20px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-3);
  padding: 0.7rem 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  z-index: 3;
}

.flag-ic {
  width: 28px; height: 28px;
  border-radius: 8px;
  background: rgba(48,168,144,0.14);
  color: var(--green);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.hero-flag b { display: block; font-size: 0.78rem; font-weight: 650; }
.hero-flag span { font-size: 0.7rem; color: var(--ink-3); }

/* ==========================================================================
   Tira de canales
   ========================================================================== */

.strip { border-block: 1px solid var(--line); background: var(--paper-warm); overflow: hidden; }

.strip-in {
  display: flex;
  align-items: center;
  gap: 2.2rem;
  padding-block: 1.5rem;
  padding-left: var(--gutter);
}

.strip-label {
  font-size: var(--t--1);
  color: var(--ink-3);
  font-weight: 500;
  flex-shrink: 0;
  white-space: nowrap;
}

/* Cintillo en movimiento continuo.

   El track lleva el listado duplicado: cuando se ha desplazado la mitad
   exacta de su ancho, la segunda copia ocupa el lugar donde arrancó la
   primera, así que el reinicio del ciclo es invisible. Sin el duplicado
   se vería un salto en cada vuelta. */
.marquee {
  position: relative;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  /* Desvanece los extremos para que las piezas entren y salgan sin cortarse en seco */
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 92%, transparent);
}

.marquee-track {
  display: flex;
  align-items: center;
  gap: clamp(1.8rem, 3.5vw, 3rem);
  width: max-content;
  animation: marquee-run 38s linear infinite;
  will-change: transform;
}

.marquee:hover .marquee-track { animation-play-state: paused; }

@keyframes marquee-run {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.chan-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
  white-space: nowrap;
  font-size: var(--t--1);
  font-weight: 600;
  color: var(--ink-2);
  transition: color 0.35s var(--ease-snap);
}
.chan-chip:hover { color: var(--navy); }
.chan-chip svg { flex-shrink: 0; }

/* ==========================================================================
   La fuga — sección de tensión
   ========================================================================== */

.leak { position: relative; background: var(--navy-deep); color: #fff; overflow: hidden; }

.leak::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 50% at 20% 0%, rgba(24,168,192,0.22), transparent 60%),
    radial-gradient(ellipse 60% 50% at 90% 100%, rgba(240,120,0,0.16), transparent 60%);
  pointer-events: none;
}

.leak-in { position: relative; }
.leak h2 { color: #fff; font-size: var(--t-3); max-width: 14ch; }
.leak .tag { color: var(--cyan); }
.leak .tag::before { background: var(--cyan); }
.leak .head p { color: rgba(255,255,255,0.68); }

.leak .head p { padding-bottom: 0.4rem; }

.leak-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.leak-cell { padding: clamp(1.5rem, 3vw, 2.4rem); background: var(--navy-deep); }

.leak-num {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1;
  color: var(--orange);
  margin-bottom: 0.6rem;
  font-variant-numeric: tabular-nums;
}

.leak-cell p { color: rgba(255,255,255,0.66); font-size: var(--t--1); line-height: 1.55; }
.leak-cell p b { color: #fff; font-weight: 600; }

/* ==========================================================================
   Recorrido — 3 momentos
   ========================================================================== */

.track { display: grid; gap: clamp(1rem, 2vw, 1.4rem); grid-template-columns: repeat(3, 1fr); }

.moment {
  position: relative;
  padding: clamp(1.6rem, 3vw, 2.3rem);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  transition: box-shadow 0.5s var(--ease-snap), transform 0.5s var(--ease-snap), border-color 0.5s var(--ease-snap);
}
.moment:hover { box-shadow: var(--sh-3); transform: translateY(-3px); border-color: var(--cyan); }

.moment-n {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--orange);
  margin-bottom: 1.5rem;
  display: block;
}

.moment h3 { font-size: var(--t-2); margin-bottom: 0.7rem; }
.moment p { color: var(--ink-2); font-size: var(--t--1); line-height: 1.6; }

.moment-vis {
  margin-top: 1.6rem;
  padding-top: 1.4rem;
  border-top: 1px dashed var(--line);
}

.tick-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.76rem;
  color: var(--ink-2);
  padding-block: 0.32rem;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}
.is-visible .tick-row { opacity: 1; transform: translateX(0); }
.is-visible .tick-row:nth-child(2) { transition-delay: 0.1s; }
.is-visible .tick-row:nth-child(3) { transition-delay: 0.2s; }

.tick-row svg { flex-shrink: 0; color: var(--green); }
.tick-row b { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--ink-3); font-weight: 500; }

/* ==========================================================================
   Panel denso — el producto por dentro
   ========================================================================== */

.board {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-3);
  overflow: hidden;
}

.board-top {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1rem 1.2rem;
  border-bottom: 1px solid var(--line-soft);
  background: var(--card);
}

.board-title { font-family: var(--font-display); font-weight: 650; font-size: var(--t-0); }

.board-tabs { display: flex; gap: 0.3rem; margin-left: auto; flex-wrap: wrap; }

.board-tab {
  padding: 0.4rem 0.85rem;
  border-radius: 100px;
  font-size: var(--t--1);
  font-weight: 600;
  color: var(--ink-2);
  transition: background 0.35s var(--ease-snap), color 0.35s var(--ease-snap);
}
.board-tab:hover { background: rgba(0,72,144,0.07); color: var(--navy); }
.board-tab.is-on { background: var(--navy); color: #fff; }

.kanban {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line-soft);
}

.board { background: var(--surface-cool); }

.col { background: var(--surface-cool); padding: 1rem 0.85rem; min-height: 300px; }

.col-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 0.7rem;
  margin-bottom: 0.8rem;
  border-bottom: 2px solid var(--line-soft);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.col:nth-child(1) .col-h { border-bottom-color: var(--navy); }
.col:nth-child(2) .col-h { border-bottom-color: var(--petrol); }
.col:nth-child(3) .col-h { border-bottom-color: var(--cyan); }
.col:nth-child(4) .col-h { border-bottom-color: var(--green); }

/* Pill de etapa: fondo al ~10% del color, texto al ~85% del mismo tono.
   El color aquí es semántica de estado, no decoración: es el único bloque
   de la página donde la paleta aparece en volumen. */
.col-h span {
  padding: 0.22rem 0.6rem;
  border-radius: 100px;
  letter-spacing: 0.04em;
}
.col:nth-child(1) .col-h span { background: rgba(0,72,144,0.10);   color: #0A3E75; }
.col:nth-child(2) .col-h span { background: rgba(0,120,144,0.11);  color: #005E72; }
.col:nth-child(3) .col-h span { background: rgba(24,168,192,0.13); color: #0F7E92; }
.col:nth-child(4) .col-h span { background: rgba(48,168,144,0.13); color: #1F7A66; }

.col-h b { color: var(--ink); font-size: 0.78rem; font-variant-numeric: tabular-nums; }

.deals { display: grid; gap: 0.5rem; }

.deal {
  padding: 0.7rem 0.75rem;
  border-radius: var(--r);
  background: var(--card);
  box-shadow: var(--sh-1);
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 0.5s var(--ease-out),
    transform 0.6s var(--spring),
    border-color 0.3s var(--ease-snap),
    box-shadow 0.3s var(--ease-snap);
}
.is-visible .deal { opacity: 1; transform: translateY(0); }
.deal:hover { border-color: var(--navy-soft); box-shadow: var(--sh-2); }

.deal b { display: block; font-size: 0.79rem; font-weight: 650; margin-bottom: 0.2rem; }

.deal-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.7rem;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

.deal-amt { font-weight: 650; color: var(--navy); }

.deal-src {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  margin-right: 0.3rem;
  vertical-align: middle;
}
.deal-src--wa { background: var(--green); }
.deal-src--fb { background: var(--navy); }
.deal-src--web { background: var(--cyan); }
.deal-src--tel { background: var(--orange); }

/* Cascada diagonal */
.col:nth-child(1) .deal:nth-child(1) { transition-delay: 0.00s; }
.col:nth-child(1) .deal:nth-child(2) { transition-delay: 0.07s; }
.col:nth-child(1) .deal:nth-child(3) { transition-delay: 0.14s; }
.col:nth-child(2) .deal:nth-child(1) { transition-delay: 0.10s; }
.col:nth-child(2) .deal:nth-child(2) { transition-delay: 0.17s; }
.col:nth-child(3) .deal:nth-child(1) { transition-delay: 0.20s; }
.col:nth-child(3) .deal:nth-child(2) { transition-delay: 0.27s; }
.col:nth-child(4) .deal:nth-child(1) { transition-delay: 0.30s; }
.col:nth-child(4) .deal:nth-child(2) { transition-delay: 0.37s; }

.board-foot {
  display: flex;
  gap: 1px;
  background: var(--line-soft);
  border-top: 1px solid var(--line-soft);
}

.foot-stat { flex: 1; padding: 1rem 1.1rem; background: var(--card); }

.foot-stat b {
  display: block;
  font-family: var(--font-display);
  font-size: var(--t-2);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 0.25rem;
  font-variant-numeric: tabular-nums;
}

.foot-stat span { font-size: 0.72rem; color: var(--ink-3); }

/* ==========================================================================
   Capturas reales del producto
   ========================================================================== */

.shots-tabs {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-bottom: 1.4rem;
}

.shot-tab {
  padding: 0.55rem 1.1rem;
  border-radius: 100px;
  border: 1px solid var(--line);
  background: var(--card);
  font-size: var(--t--1);
  font-weight: 600;
  color: var(--ink-2);
  transition:
    background 0.35s var(--ease-snap),
    color 0.35s var(--ease-snap),
    border-color 0.35s var(--ease-snap),
    transform 0.5s var(--spring);
}
.shot-tab:hover { border-color: var(--navy-soft); transform: scale(0.975); }
.shot-tab.is-on { background: var(--navy); border-color: var(--navy); color: #fff; }

.shots-frame {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface-cool);
  box-shadow: var(--sh-3);
  aspect-ratio: 1600 / 739;
}

.shots-frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top left;
  opacity: 0;
  transform: scale(1.015);
  transition: opacity 0.5s var(--ease-out), transform 0.7s var(--ease-out);
}
.shots-frame img.is-on { opacity: 1; transform: scale(1); }

.shot-note {
  margin-top: 1rem;
  font-size: var(--t--1);
  color: var(--ink-3);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.shot-note::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--green);
  flex-shrink: 0;
}

/* ==========================================================================
   Capacidades incluidas
   ========================================================================== */

.caps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.cap {
  display: flex;
  gap: 0.85rem;
  padding: 1.4rem 1.5rem;
  background: var(--card);
  transition: background 0.4s var(--ease-snap);
}
.cap:hover { background: var(--surface-cool); }

.cap-ic {
  width: 30px; height: 30px;
  border-radius: 9px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  background: var(--surface-cool);
  color: var(--petrol);
  transition: background 0.4s var(--ease-snap), color 0.4s var(--ease-snap);
}
.cap:hover .cap-ic { background: var(--navy); color: #fff; }

.cap b {
  display: block;
  font-family: var(--font-display);
  font-size: var(--t-0);
  font-weight: 650;
  color: var(--navy-deep);
  margin-bottom: 0.2rem;
}
.cap p { font-size: var(--t--1); color: var(--ink-2); line-height: 1.5; }

@media (max-width: 860px) { .caps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 400px) {
  .brand img { height: 30px; }
  .nav-side .btn { padding: 0.65rem 0.95rem; font-size: 0.8rem; }
  .foot-brand > img { height: 26px; }
}

@media (max-width: 520px) { .caps { grid-template-columns: 1fr; } }

/* ==========================================================================
   IA que recuerda
   ========================================================================== */

.ai-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }

.ai-demo {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-3);
  padding: 1.2rem;
}

.chat { display: grid; gap: 0.7rem; }

.bubble {
  max-width: 82%;
  padding: 0.7rem 0.9rem;
  font-size: 0.83rem;
  line-height: 1.5;
  border-radius: 16px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s var(--ease-out), transform 0.6s var(--spring);
}
.is-visible .bubble { opacity: 1; transform: translateY(0); }
.is-visible .bubble:nth-child(2) { transition-delay: 0.5s; }
.is-visible .bubble:nth-child(3) { transition-delay: 1.0s; }
.is-visible .bubble:nth-child(4) { transition-delay: 1.5s; }

.bubble--them {
  background: var(--paper-warm);
  border-bottom-left-radius: 5px;
  color: var(--ink);
}

.bubble--us {
  background: var(--navy);
  color: #fff;
  margin-left: auto;
  border-bottom-right-radius: 5px;
}

.bubble-tag {
  display: block;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.6;
  margin-bottom: 0.28rem;
}

.ai-note {
  margin-top: 1rem;
  padding: 0.8rem 0.9rem;
  border-radius: var(--r);
  background: rgba(240,120,0,0.07);
  border: 1px dashed rgba(240,120,0,0.35);
  font-size: 0.76rem;
  color: var(--ink-2);
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
}
.ai-note svg { flex-shrink: 0; color: var(--orange); margin-top: 0.1rem; }
.ai-note b { color: var(--ink); font-weight: 650; }

.ai-list { display: grid; gap: 1.4rem; margin-top: 2rem; }

.ai-item { display: flex; gap: 0.9rem; }

.ai-ic {
  width: 34px; height: 34px;
  border-radius: 9px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  background: rgba(0,72,144,0.07);
  color: var(--navy);
}

.ai-item b { display: block; font-family: var(--font-display); font-size: var(--t-1); font-weight: 650; margin-bottom: 0.25rem; }
.ai-item p { font-size: var(--t--1); color: var(--ink-2); line-height: 1.55; }

/* ==========================================================================
   Giros — multi-vertical
   ========================================================================== */

.verts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }

.vert {
  padding: 1.5rem 1.3rem;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--card);
  transition: transform 0.5s var(--ease-snap), box-shadow 0.5s var(--ease-snap), border-color 0.4s var(--ease-snap);
}
.vert:hover { transform: translateY(-4px); box-shadow: var(--sh-3); border-color: var(--cyan); }

.vert-ic {
  width: 40px; height: 40px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  margin-bottom: 1.1rem;
  background: var(--paper-warm);
  color: var(--petrol);
  transition: background 0.4s var(--ease-snap), color 0.4s var(--ease-snap);
}
.vert:hover .vert-ic { background: var(--navy); color: #fff; }

.vert h3 { font-size: var(--t-1); margin-bottom: 0.5rem; }
.vert p { font-size: var(--t--1); color: var(--ink-2); line-height: 1.55; }

/* ==========================================================================
   Resultados
   ========================================================================== */

.results {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.result { padding: clamp(1.8rem, 3.5vw, 2.8rem) clamp(1.2rem, 2vw, 1.8rem); background: var(--card); }

.result-n {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4.5vw, 3.4rem);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1;
  color: var(--navy);
  margin-bottom: 0.55rem;
  font-variant-numeric: tabular-nums;
}
.result:nth-child(2) .result-n { color: var(--petrol); }
.result:nth-child(3) .result-n { color: var(--green); }
.result:nth-child(4) .result-n { color: var(--orange); }

.result p { font-size: var(--t--1); color: var(--ink-2); line-height: 1.5; }

/* ==========================================================================
   Precios
   ========================================================================== */

.switch { display: flex; align-items: center; justify-content: center; gap: 0.9rem; margin-bottom: 3rem; flex-wrap: wrap; }

.switch-lbl { font-size: var(--t--1); font-weight: 600; color: var(--ink-3); transition: color 0.35s var(--ease-snap); }
.switch-lbl.is-on { color: var(--navy); }

.switch-btn {
  position: relative;
  width: 52px; height: 29px;
  border-radius: 100px;
  background: var(--line);
  transition: background 0.4s var(--ease-snap);
}
.switch-btn[aria-checked="true"] { background: var(--navy); }

.switch-btn::after {
  content: '';
  position: absolute;
  top: 3px; left: 3px;
  width: 23px; height: 23px;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--sh-1);
  transition: transform 0.5s var(--spring);
}
.switch-btn[aria-checked="true"]::after { transform: translateX(23px); }

.save-pill {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.25rem 0.65rem;
  border-radius: 100px;
  color: var(--green);
  background: rgba(48,168,144,0.12);
}

.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; align-items: start; }

.tier {
  position: relative;
  padding: clamp(1.6rem, 3vw, 2.3rem);
  border-radius: var(--r-xl);
  border: 1px solid var(--line);
  background: var(--card);
  box-shadow: var(--sh-1);
  transition: transform 0.5s var(--ease-snap), box-shadow 0.5s var(--ease-snap);
}
.tier:hover { transform: translateY(-4px); box-shadow: var(--sh-3); }

.tier--best {
  border: 2px solid var(--navy);
  box-shadow: var(--sh-3);
}

.tier-flag {
  position: absolute;
  top: -12px; left: 50%;
  translate: -50% 0;
  padding: 0.3rem 0.85rem;
  border-radius: 100px;
  background: var(--orange);
  color: #fff;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.tier h3 { font-size: var(--t-1); margin-bottom: 0.4rem; }
.tier-for { font-size: var(--t--1); color: var(--ink-3); margin-bottom: 1.5rem; min-height: 3em; line-height: 1.5; }

.tier-cost { display: flex; align-items: baseline; gap: 0.3rem; margin-bottom: 0.3rem; }

.tier-amt {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4vw, 2.9rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.tier-per { font-size: var(--t--1); color: var(--ink-3); }
.tier-bill { font-size: 0.73rem; color: var(--ink-3); margin-bottom: 1.6rem; min-height: 1.2em; }

.tier .btn { margin-bottom: 1.6rem; }

.tier-list { display: grid; gap: 0.65rem; }

.tier-li { display: flex; gap: 0.6rem; font-size: var(--t--1); color: var(--ink-2); line-height: 1.45; }
.tier-li svg { flex-shrink: 0; margin-top: 0.3em; color: var(--green); }
.tier-li b { color: var(--ink); font-weight: 650; }

/* Tabla comparativa */
.cmp {
  margin-top: 3.5rem;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--card);
}

.cmp-scroll { overflow-x: auto; }

table { width: 100%; min-width: 620px; border-collapse: collapse; font-size: var(--t--1); }

thead th {
  text-align: left;
  padding: 1rem 1.3rem;
  font-family: var(--font-display);
  font-weight: 650;
  color: var(--navy-deep);
  background: var(--paper-warm);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
thead th:first-child { color: var(--ink-3); font-family: var(--font-body); font-weight: 500; }

tbody td { padding: 0.9rem 1.3rem; border-bottom: 1px solid var(--line-soft); color: var(--ink-2); }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: var(--paper); }
tbody td:first-child { color: var(--ink); font-weight: 500; }

.yes { color: var(--green); font-weight: 700; }
.no  { color: var(--ink-3); }

/* ==========================================================================
   Calculadora
   ========================================================================== */

.calc {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  padding: clamp(1.6rem, 3.5vw, 2.8rem);
  border-radius: var(--r-xl);
  border: 1px solid var(--line);
  background: var(--card);
  box-shadow: var(--sh-2);
  align-items: center;
}

.calc-fields { display: grid; gap: 1.9rem; }

.field label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  font-size: var(--t--1);
  font-weight: 500;
  color: var(--ink-2);
  margin-bottom: 0.8rem;
}

.field-val {
  font-family: var(--font-display);
  font-size: var(--t-1);
  font-weight: 700;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 100px;
  background: linear-gradient(90deg,
    var(--navy) 0%, var(--cyan) var(--fill, 50%),
    var(--line) var(--fill, 50%));
  cursor: pointer;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--navy);
  box-shadow: var(--sh-2);
  transition: transform 0.45s var(--spring);
}
input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.15); }

input[type="range"]::-moz-range-thumb {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--navy);
  cursor: pointer;
}

.calc-out {
  padding: clamp(1.5rem, 3vw, 2.2rem);
  border-radius: var(--r-lg);
  background: var(--navy-deep);
  color: #fff;
  text-align: center;
}

.calc-lbl {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin-bottom: 0.9rem;
}

.calc-big {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5.5vw, 3.8rem);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1;
  color: var(--orange);
  margin-bottom: 0.5rem;
  font-variant-numeric: tabular-nums;
}

.calc-sub { font-size: var(--t--1); color: rgba(255,255,255,0.62); margin-bottom: 1.8rem; }

.calc-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: rgba(255,255,255,0.16);
  border-radius: var(--r);
  overflow: hidden;
  margin-bottom: 1.3rem;
}

.calc-cell { padding: 0.95rem 0.7rem; background: var(--navy-deep); }

.calc-cell b {
  display: block;
  font-family: var(--font-display);
  font-size: var(--t-1);
  font-weight: 700;
  margin-bottom: 0.15rem;
  font-variant-numeric: tabular-nums;
}

.calc-cell span { font-size: 0.7rem; color: rgba(255,255,255,0.55); }

.calc-fine { font-size: 0.7rem; color: rgba(255,255,255,0.45); line-height: 1.5; }

/* ==========================================================================
   Testimonios
   ========================================================================== */

.says { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }

.say {
  display: flex;
  flex-direction: column;
  gap: 1.3rem;
  padding: clamp(1.5rem, 3vw, 2.1rem);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--card);
  box-shadow: var(--sh-1);
  transition: transform 0.5s var(--ease-snap), box-shadow 0.5s var(--ease-snap);
}
.say:hover { transform: translateY(-4px); box-shadow: var(--sh-3); }

.say-stars { color: var(--orange); font-size: 0.85rem; letter-spacing: 0.12em; }

.say p {
  font-size: var(--t-0);
  line-height: 1.55;
  color: var(--ink);
  flex: 1;
}

.say-by { display: flex; align-items: center; gap: 0.75rem; padding-top: 1.2rem; border-top: 1px solid var(--line-soft); }

.say-av {
  width: 40px; height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.76rem;
  font-weight: 700;
  color: #fff;
  background: var(--navy);
  flex-shrink: 0;
}
.say:nth-child(2) .say-av { background: var(--petrol); }
.say:nth-child(3) .say-av { background: var(--green); }

.say-by b { display: block; font-size: var(--t--1); font-weight: 650; }
.say-by span { font-size: 0.72rem; color: var(--ink-3); }

/* ==========================================================================
   FAQ
   ========================================================================== */

.faq { max-width: 780px; margin-inline: auto; }

.qa { border-bottom: 1px solid var(--line); }

.qa-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.4rem 0;
  text-align: left;
  font-family: var(--font-display);
  font-size: var(--t-1);
  font-weight: 600;
  color: var(--ink);
  transition: color 0.35s var(--ease-snap);
}
.qa-q:hover { color: var(--navy); }

.qa-ic { position: relative; width: 16px; height: 16px; flex-shrink: 0; color: var(--orange); }

.qa-ic::before, .qa-ic::after {
  content: '';
  position: absolute;
  inset: 50% 0 auto 0;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.45s var(--spring);
}
.qa-ic::after { transform: rotate(90deg); }
.qa.is-open .qa-ic::after { transform: rotate(0deg); }

.qa-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.5s var(--spring); }
.qa.is-open .qa-a { grid-template-rows: 1fr; }

.qa-a-in { overflow: hidden; min-height: 0; }
.qa-a p { padding-bottom: 1.5rem; color: var(--ink-2); line-height: 1.65; max-width: 64ch; }

/* ==========================================================================
   Cierre
   ========================================================================== */

.close-cta {
  position: relative;
  text-align: center;
  background: var(--navy-deep);
  color: #fff;
  overflow: hidden;
}

.close-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 60% at 50% 120%, rgba(240,120,0,0.28), transparent 62%),
    radial-gradient(ellipse 50% 50% at 10% -10%, rgba(24,168,192,0.22), transparent 60%);
}

.close-in { position: relative; }
.close-cta h2 { color: #fff; font-size: var(--t-3); max-width: 18ch; margin: 0 auto 1.3rem; }
.close-cta > .shell > .close-in > p { color: rgba(255,255,255,0.68); font-size: var(--t-1); max-width: 46ch; margin: 0 auto 2.4rem; }

.close-acts { display: flex; gap: 0.8rem; justify-content: center; flex-wrap: wrap; margin-bottom: 1.5rem; }
.close-fine { font-size: 0.78rem; color: rgba(255,255,255,0.5); }

/* ==========================================================================
   Footer
   ========================================================================== */

.foot { background: var(--paper-warm); border-top: 1px solid var(--line); padding-block: clamp(3rem, 6vh, 4.5rem) 2rem; }

.foot-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 5vw, 4rem);
  margin-bottom: 3rem;
  align-items: start;
}

/* Hijo directo: si no, el margen inferior pensado para el logo se le aplica
   también a la imagen del correo que vive dentro del botón, y la descentra
   la mitad de ese margen dentro del flex. */
.foot-brand > img { height: 30px; width: auto; margin-bottom: 1rem; }
.foot-brand p { font-size: var(--t--1); color: var(--ink-2); max-width: 30ch; line-height: 1.6; }

/* Contacto por correo, servido como imagen.

   El texto del correo no existe en el HTML: así los rastreadores que
   raspan la página en busca de direcciones no encuentran nada. El enlace
   mailto lo arma el JS en tiempo de ejecución a partir de fragmentos. */
.mailbox {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1.3rem;
  padding: 0.7rem 1.1rem;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: var(--card);
  box-shadow: var(--sh-1);
  cursor: pointer;
  font: inherit;
  transition: transform 0.5s var(--spring), border-color 0.35s var(--ease-snap);
}

/* Confirmación al copiar con clic derecho */
.mailbox[data-aviso="copiado"]::after {
  content: 'Copiado';
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  translate: -50% 0;
  padding: 0.25rem 0.6rem;
  border-radius: 100px;
  background: var(--navy);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 650;
  white-space: nowrap;
  animation: rise-in 0.4s var(--spring) both;
}
.mailbox:hover { transform: scale(0.975); border-color: var(--navy-soft); }
.mailbox svg { color: var(--petrol); flex-shrink: 0; }
.mailbox img { height: 15px; width: auto; }

/* Variante sobre el fondo azul del cierre */
.mailbox--dark {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.22);
  box-shadow: none;
  margin-top: 0;
  padding: 0.85rem 1.4rem;
}
.mailbox--dark:hover { border-color: rgba(255,255,255,0.45); background: rgba(255,255,255,0.13); }
.mailbox--dark svg { color: #fff; }
/* El PNG viene en tinta azul; sobre fondo oscuro se invierte a blanco */
.mailbox--dark img { filter: brightness(0) invert(1); height: 16px; }

.foot-col h4 {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 1.1rem;
}

.foot-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.65rem; }
.foot-col a { font-size: var(--t--1); color: var(--ink-2); transition: color 0.3s var(--ease-snap); }
.foot-col a:hover { color: var(--orange); }

.foot-base {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.8rem 1.5rem;
  padding-top: 1.8rem;
  border-top: 1px solid var(--line);
  font-size: 0.75rem;
  color: var(--ink-3);
}

.foot-base a { transition: color 0.3s var(--ease-snap); }
.foot-base a:hover { color: var(--orange); }

.foot-legal { display: flex; gap: 1.2rem; flex-wrap: wrap; align-items: center; }

/* ==========================================================================
   Páginas legales
   ========================================================================== */

.legal {
  max-width: 74ch;
  margin-inline: auto;
  padding-top: clamp(7rem, 14vh, 9rem);
  padding-bottom: clamp(4rem, 8vh, 6rem);
}

.legal-head { margin-bottom: clamp(2.5rem, 5vh, 3.5rem); }
.legal-head h1 { font-size: var(--t-3); margin-bottom: 1rem; }

.legal-meta {
  font-size: var(--t--1);
  color: var(--ink-3);
  display: flex;
  gap: 1.2rem;
  flex-wrap: wrap;
}

.legal h2 {
  font-size: var(--t-2);
  margin: 2.8rem 0 1rem;
  padding-top: 1.8rem;
  border-top: 1px solid var(--line);
}
.legal h2:first-of-type { border-top: none; padding-top: 0; }

.legal h3 { font-size: var(--t-1); margin: 1.8rem 0 0.7rem; color: var(--navy); }

.legal p, .legal li { color: var(--ink-2); line-height: 1.7; }
.legal p { margin-bottom: 1rem; }

.legal ul, .legal ol { margin: 0 0 1.2rem; padding-left: 1.3rem; }
.legal li { margin-bottom: 0.5rem; }

.legal strong { color: var(--ink); font-weight: 650; }

.legal a:not(.btn):not(.mailbox) {
  color: var(--navy);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.legal a:not(.btn):not(.mailbox):hover { color: var(--orange); }

.legal table { min-width: 0; margin-bottom: 1.5rem; }
.legal thead th { padding: 0.8rem 1rem; }
.legal tbody td { padding: 0.75rem 1rem; }

.legal-box {
  padding: 1.2rem 1.4rem;
  border-radius: var(--r);
  background: var(--surface-cool);
  border: 1px solid var(--line);
  margin-bottom: 1.5rem;
}
.legal-box p:last-child { margin-bottom: 0; }

/* Marca los huecos que exige la ley y que el sitio aún no puede llenar */
.legal-falta {
  background: rgba(240, 120, 0, 0.12);
  border: 1px dashed rgba(240, 120, 0, 0.5);
  border-radius: 5px;
  padding: 0.1em 0.45em;
  font-weight: 650;
  color: var(--orange-hot);
  white-space: nowrap;
}

.legal-volver {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 2rem;
  font-size: var(--t--1);
  font-weight: 600;
  color: var(--ink-2);
  transition: color 0.3s var(--ease-snap);
}
.legal-volver:hover { color: var(--orange); }

/* ==========================================================================
   Revelado
   ========================================================================== */

[data-rev] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.75s var(--ease-out), transform 0.8s var(--spring);
}
[data-rev].is-visible { opacity: 1; transform: translateY(0); }

[data-seq] > * { opacity: 0; transform: translateY(20px); transition: opacity 0.65s var(--ease-out), transform 0.7s var(--spring); }
[data-seq].is-visible > * { opacity: 1; transform: translateY(0); }
[data-seq].is-visible > *:nth-child(1) { transition-delay: 0ms; }
[data-seq].is-visible > *:nth-child(2) { transition-delay: 80ms; }
[data-seq].is-visible > *:nth-child(3) { transition-delay: 160ms; }
[data-seq].is-visible > *:nth-child(4) { transition-delay: 240ms; }
[data-seq].is-visible > *:nth-child(5) { transition-delay: 300ms; }
[data-seq].is-visible > *:nth-child(6) { transition-delay: 360ms; }

/* Revelado por palabra: cada palabra sube desde detrás de su máscara.
   El padding inferior tiene que dejar pasar los descendentes (g, j, p, q
   y la cola de la Q mayúscula); con 0.08em la Q de "Que" salía cortada. */
/* El padding deja pasar los descendentes (g, j, p) sin que la máscara
   los recorte. Verificado: 0.08em basta en Bricolage a los tamaños que
   usa el sitio. */
.wm { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: 0.08em; }
.wd { display: inline-block; transform: translateY(110%); transition: transform 0.8s var(--spring); }
.is-loaded .wd, .is-visible .wd { transform: translateY(0); }

.rise { opacity: 0; animation: rise-in 0.85s var(--spring) both; animation-play-state: paused; }
.is-loaded .rise { animation-play-state: running; animation-delay: var(--d, 0ms); }

@keyframes rise-in {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (min-width: 981px) {
  .hero-in { grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr); align-items: center; }
}

@media (max-width: 980px) {
  .hero-copy { max-width: 100%; }
  .hero h1 { font-size: clamp(2.6rem, 9vw, 4.2rem); }
  .ai-wrap { grid-template-columns: 1fr; }
  .calc { grid-template-columns: 1fr; }
  .track { grid-template-columns: 1fr; }
  .verts { grid-template-columns: 1fr 1fr; }
  .kanban { grid-template-columns: 1fr 1fr; }
  .col { min-height: 0; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .thread { display: none; }
}

@media (max-width: 760px) {
  .nav-links { display: none; }
  .nav-side .btn--plain { display: none; }
  .leak-grid { grid-template-columns: 1fr; }
  .results { grid-template-columns: 1fr 1fr; }
  .tiers { grid-template-columns: 1fr; }
  .tier--best { order: -1; }
  .says { grid-template-columns: 1fr; }
  .app-body { grid-template-columns: 1fr; }
  .app-pane + .app-pane { border-left: none; border-top: 1px solid var(--line-soft); }
  .board-tabs { width: 100%; margin-left: 0; }
}

@media (max-width: 520px) {
  .hero-acts .btn, .close-acts .btn { width: 100%; }
  .hero-flag { right: 0; bottom: -14px; }
  .verts { grid-template-columns: 1fr; }
  .kanban { grid-template-columns: 1fr; }
  .results { grid-template-columns: 1fr; }
  .board-foot { flex-wrap: wrap; }
  .foot-stat { min-width: 45%; }
  .calc-split { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Movimiento reducido
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.2s !important;
    transition-delay: 0ms !important;
  }

  [data-rev], [data-seq] > *, .wd, .rise { opacity: 1 !important; transform: none !important; }
  .stage-bar i { transform: scaleX(var(--w, 0.5)) !important; }
  .deal, .bubble, .tick-row { opacity: 1 !important; transform: none !important; }
  .thread-live { stroke-dashoffset: 0 !important; }
}

@media (prefers-reduced-motion: reduce) {
  /* Sin movimiento: el cintillo se detiene y el listado se envuelve para
     que siga siendo legible completo. */
  .marquee-track { animation: none !important; flex-wrap: wrap; width: auto; }
  .marquee { mask-image: none; -webkit-mask-image: none; }
  .strip-in { flex-wrap: wrap; padding-right: var(--gutter); }
}

@media (max-width: 700px) {
  .strip-in { flex-direction: column; align-items: flex-start; gap: 0.9rem; padding-left: 0; }
  .strip-label { padding-left: var(--gutter); }
  .marquee { width: 100%; }
}