/* ============================================================
   SGLCOMPASS, capa visual "marco y retícula"
   Referencia: agent-magicui.vercel.app (SkyAgent, Magic UI).

   Lo que define esa estética y aquí se copia:
   1. Todo vive dentro de una COLUMNA CON MARCO de 1px, y lo que
      queda fuera va rayado en diagonal.
   2. Las secciones no se separan con bandas de color: se separan
      con una línea de 1px. Fondo casi plano (#f7f8fa).
   3. Tipografía Geist. Titulares GRANDES pero de peso 500, con el
      tracking muy cerrado (-0.05em). Nada de negras de 700.
   4. Todo centrado: etiqueta en píldora, titular, subtítulo y los
      dos botones. Botones en píldora completa.
   5. Las rejillas de tarjetas son "bento": sin hueco entre ellas,
      separadas por líneas de 1px dentro de una caja con borde.
   6. Nav flotante en píldora, y cierre en banda azul.

   Se carga DESPUÉS de core/ui/parts: es una capa de sustitución,
   no toca los ficheros que usan el blog, los cursos ni la demo del CRM.
   ============================================================ */

:root {
  /* Color: gris azulado casi blanco, tinta casi negra, azul tailwind 600 */
  --bg:       #f7f8fa;
  --bg-2:     #f7f8fa;   /* se anula la alternancia de bandas */
  --panel:    #ffffff;
  --ink:      #0a0a0a;
  --ink-2:    #6b7280;
  /* #9ca3af se quedaba en 2,4:1 sobre el fondo: los pies de foto y las
     notas de 13px no se leían. Este llega a 4,7:1 y sigue siendo gris */
  --ink-3:    #6a707c;
  --line:     #e7e8ec;
  --line-2:   #d8dae1;
  --blue:     #2563eb;
  --blue-dk:  #1d4ed8;
  --blue-lt:  #eff4ff;

  --f-display: "Geist", "Inter", system-ui, sans-serif;
  --f-body:    "Geist", "Inter", system-ui, -apple-system, sans-serif;

  --t-hero:  clamp(2.6rem, 5.4vw, 4.3rem);
  --t-h2:    clamp(1.95rem, 3.3vw, 2.7rem);
  --t-h3:    1.2rem;
  --t-h4:    1.115rem;
  --t-lead:  clamp(1.08rem, 1.15vw, 1.24rem);
  --t-body:  1.0625rem;
  --t-sm:    1rem;       /* menús y apoyos: 15 px se leían pequeños */
  --t-xs:    .875rem;    /* insignias de confianza, antes 13 px */
  --t-micro: .78125rem;

  --r-card:  14px;
  --r-img:   16px;
  --sp:      clamp(3.4rem, 6vw, 5.4rem);
  --wrap:    min(1360px, 90vw);
  --frame:   min(1560px, 96vw);   /* antes 1280 fijo: dejaba un tercio de
                                     pantalla en gris en portátiles anchos */

  /* Sombras muy contenidas: la referencia casi no usa sombra */
  --sh-sm: 0 1px 2px rgba(10,10,10,.04);
  --sh:    0 8px 24px -18px rgba(10,10,10,.30);
  --sh-lg: 0 24px 60px -34px rgba(10,10,10,.35);
  --sh-cta: 0 6px 18px -8px rgba(37,99,235,.45);
}

/* ---------- Marco, rayado y barra de avance ----------
   El rayado va en una capa fija, fuera del flujo, para que no cueste
   nada al hacer scroll.
   Los dos bordes del marco hacen de barra de avance: se llenan de azul
   según bajas. Primer intento fueron hilos de luz cayendo por la calle,
   pero la calle mide 32 px y unos puntos bajando ahí parecían confeti.
   Esto se apoya en una línea que YA existe y además dice algo. */
body {
  background-color: #f2f3f6;
  font-family: var(--f-body);
  font-size: var(--t-body);
  color: var(--ink);
  letter-spacing: -.011em;
}
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: repeating-linear-gradient(
    45deg, rgba(10,10,10,.055) 0 1px, transparent 1px 8px
  );
}

.rails {
  position: fixed; inset: 0; z-index: 2; pointer-events: none;
  --gut: calc((100vw - var(--frame)) / 2);
}
.rails i {
  position: absolute; top: 0; width: 2px;
  height: calc(var(--sp, 0) * 100%);
  background: linear-gradient(180deg, rgba(37,99,235,.16), var(--blue));
  will-change: height;
}
.rails i::after {                       /* la cabeza, con su halo */
  content: ""; position: absolute; left: -2px; bottom: -3px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--blue); box-shadow: 0 0 12px 3px rgba(37,99,235,.5);
  opacity: clamp(0, calc(var(--sp, 0) * 8), 1);   /* asoma en cuanto arrancas */
}
.rails i:nth-child(1) { left:  calc(var(--gut) - 1px); }
.rails i:nth-child(2) { right: calc(var(--gut) - 1px); }

/* Venía como style="margin:0 0 .2rem" dentro del innerHTML del diagrama de
   flujos. La CSP del sitio (`style-src 'self'`) bloquea los style en cadena. */
.fl__when { margin: 0 0 .2rem; }

/* La columna va por encima de las dos capas de fondo */
.shell {
  position: relative; z-index: 1;
  max-width: var(--frame);
  margin-inline: auto;
  background: var(--bg);
  border-inline: 1px solid var(--line);
}
.wrap { width: min(100% - 3rem, var(--wrap)); }
@media (max-width: 640px) { .wrap { width: min(100% - 2rem, var(--wrap)); } }

/* ---------- Tipografía ---------- */
h1, h2, h3, h4 { font-family: var(--f-display); color: var(--ink); }
h1 { font-size: var(--t-hero); font-weight: 500; letter-spacing: -.05em; line-height: 1.02; }
h2 { font-size: var(--t-h2);   font-weight: 500; letter-spacing: -.05em; line-height: 1.08; }
h3 { font-size: var(--t-h3);   font-weight: 600; letter-spacing: -.05em; line-height: 1.4; }
h4 { font-size: var(--t-h4);   font-weight: 600; letter-spacing: -.04em; }
.hero h1 span { color: var(--blue); }

/* ---------- Botones en píldora ---------- */
.btn {
  border-radius: 999px; font-weight: 600; font-size: var(--t-sm);
  padding: .85rem 1.55rem; box-shadow: var(--sh-cta);
  letter-spacing: -.012em;
}
.btn--lg { padding: .92rem 1.7rem; font-size: var(--t-sm); }
.btn--sm { padding: .58rem 1.1rem; font-size: var(--t-xs); }
.btn--ghost {
  background: var(--panel); color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line-2), var(--sh-sm);
}
.btn--ghost:hover { background: var(--panel); color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink-3), var(--sh-sm); }
.btn:hover { transform: translateY(-1px); }
.btn--wa { box-shadow: 0 6px 18px -8px rgba(37,211,102,.5); }

/* ---------- Nav flotante en píldora ---------- */
.nav {
  position: fixed; top: .85rem; left: 50%; transform: translateX(-50%);
  width: min(100% - 1.6rem, 1120px);
  gap: 1rem; padding: .48rem .48rem .48rem 1.2rem;
  border: 1px solid var(--line); border-radius: 999px;
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(18px) saturate(1.6);
  box-shadow: 0 10px 30px -20px rgba(10,10,10,.4);
}
.nav.stuck { background: rgba(255,255,255,.94); border-bottom-color: var(--line); box-shadow: 0 14px 34px -22px rgba(10,10,10,.45); }
@media (hover: none) { .nav { background: rgba(255,255,255,.94); } }
.brand { margin-right: 0; }
.brand svg { width: 24px; height: 24px; }
.brand span { font-size: 1.02rem; font-weight: 600; letter-spacing: -.03em; }
.brand b { font-weight: 600; }
.nav__links { margin-inline: auto; gap: .2rem; }
.nav__links a {
  font-size: var(--t-xs); color: var(--ink-2); padding: .45rem .8rem;
  border-radius: 999px; border: 1px solid transparent;
}
.nav__links a:hover { color: var(--ink); background: var(--bg); border-color: var(--line); }
.nav__burger { border-radius: 999px; border-color: var(--line); }
.menu a { font-family: var(--f-display); font-weight: 500; letter-spacing: -.04em; }

/* ---------- Secciones: la línea manda, no el color ---------- */
.sec, .hero, .end { padding: var(--sp) 0; }
.sec, .hero { border-bottom: 1px solid var(--line); }
.sec--tint { background: var(--bg); }
[id] { scroll-margin-top: 108px; }

/* Cabecera de sección: píldora, titular y subtítulo, todo centrado */
.head { max-width: 46rem; margin-inline: auto; text-align: center; margin-bottom: clamp(2.2rem, 4vw, 3.2rem); }
.head h2 { max-width: 22ch; margin-inline: auto; }
.head p { font-size: var(--t-lead); color: var(--ink-2); max-width: 54ch; margin-inline: auto; margin-top: .9rem; letter-spacing: -.01em; }

.kick {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--f-body); font-size: var(--t-xs); font-weight: 500;
  letter-spacing: -.01em; text-transform: none; color: var(--ink);
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 999px; padding: .38rem .85rem .38rem .68rem;
  box-shadow: var(--sh-sm); margin-bottom: 1.3rem;
}
.kick::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); flex: none; }

/* ---------- Hero centrado ---------- */
.hero { padding-top: clamp(7rem, 12vw, 10rem); background: var(--bg); }
.hero::before {
  inset: auto -10% -10% -10%; height: 70%;
  background:
    radial-gradient(38% 70% at 8% 100%, rgba(37,99,235,.42), transparent 70%),
    radial-gradient(38% 70% at 92% 100%, rgba(37,99,235,.42), transparent 70%);
  filter: blur(40px); opacity: .55;
}
.hero::after { opacity: .3; }
/* El bloque tiene max-width en core.css pero no se centraba: quedaba
   pegado a la izquierda y todo el hero se veía desplazado 200 px. */
.hero__in { text-align: center; display: grid; justify-items: center; gap: 0; margin-inline: auto; }
.hero__sub { max-width: 56ch; color: var(--ink-2); font-size: var(--t-lead); margin-top: 1.1rem; }
.hero__cta { justify-content: center; margin-top: 1.9rem; }
.hero__note { margin-top: 1.1rem; color: var(--ink-3); font-size: var(--t-xs); }
.trust { justify-content: center; margin-top: 1.5rem; }
.trust li { background: var(--panel); border-color: var(--line); box-shadow: var(--sh-sm); font-family: var(--f-body); font-size: var(--t-micro); letter-spacing: -.01em; }

.shot__lb { text-align: center; max-width: 60ch; margin-inline: auto; }
.shot__frame { border-radius: var(--r-img); border-color: var(--line); box-shadow: var(--sh-lg); }

/* ---------- Tarjeta de vídeo del hero ----------
   Es la pieza central de la referencia: un panel grande redondeado con
   la portada dentro y un botón de play circular en el centro. Al pulsarlo
   el botón se va y el vídeo corre en bucle. */
.vid { margin: clamp(2.6rem, 5vw, 4.2rem) 0 0; display: grid; gap: 1.2rem; }
.vid__frame {
  position: relative; border-radius: var(--r-img); overflow: hidden;
  border: 1px solid var(--line); background: var(--panel);
  box-shadow: 0 40px 90px -50px rgba(10,10,10,.45), 0 2px 6px -2px rgba(10,10,10,.08);
  aspect-ratio: 1280 / 810;
}
.vid__frame video { width: 100%; height: 100%; object-fit: cover; display: block; }

.vid__play {
  position: absolute; inset: 0; margin: auto;
  width: 78px; height: 78px; border-radius: 999px; border: 0; cursor: pointer;
  display: grid; place-items: center;
  background: rgba(255,255,255,.92); color: var(--blue);
  backdrop-filter: blur(6px);
  box-shadow: 0 10px 34px -10px rgba(37,99,235,.55), 0 0 0 10px rgba(37,99,235,.12);
  transition: transform .3s var(--ease), opacity .3s var(--ease), box-shadow .3s var(--ease);
}
.vid__play svg { width: 30px; height: 30px; margin-left: 4px; }
.vid__play:hover { transform: scale(1.06); box-shadow: 0 14px 40px -10px rgba(37,99,235,.7), 0 0 0 14px rgba(37,99,235,.14); }
/* Latido lento para que se vea que hay algo que pulsar */
@media (prefers-reduced-motion: no-preference) {
  .vid__play::before {
    content: ""; position: absolute; inset: -10px; border-radius: 999px;
    border: 1px solid rgba(37,99,235,.4); animation: vidpulse 2.6s var(--ease) infinite;
  }
  @keyframes vidpulse {
    0%   { transform: scale(.9);  opacity: .8; }
    70%  { transform: scale(1.35); opacity: 0; }
    100% { transform: scale(1.35); opacity: 0; }
  }
}
.vid__frame.is-on .vid__play { opacity: 0; transform: scale(.7); pointer-events: none; }

/* Abajo a la izquierda: arriba pisaba el nombre del espacio de trabajo */
.vid__badge {
  position: absolute; left: 1rem; bottom: 1rem;
  background: rgba(10,10,10,.72); color: #fff; backdrop-filter: blur(6px);
  font-size: var(--t-micro); font-weight: 500; letter-spacing: -.01em;
  padding: .32rem .7rem; border-radius: 999px;
  transition: opacity .3s var(--ease);
}
.vid__frame.is-on .vid__badge { opacity: 0; }

.vid__cap { display: grid; gap: .3rem; text-align: center; max-width: 68ch; margin-inline: auto; }
.vid__cap b { font-family: var(--f-display); font-weight: 600; letter-spacing: -.03em; font-size: var(--t-sm); }
.vid__cap span { color: var(--ink-2); font-size: var(--t-xs); line-height: 1.6; }
.vid__cap a { color: var(--blue); font-weight: 500; border-bottom: 1px solid rgba(37,99,235,.35); }
.vid__cap a:hover { border-bottom-color: currentColor; }

/* ============================================================
   CÓMO FUNCIONA
   Tercer intento y el bueno. Primero fueron cuatro tarjetas sueltas
   que se estiraban para igualar al móvil y quedaban medio vacías.
   Luego un acordeón, donde tres de cada cuatro filas salían peladas
   y la columna medía la mitad que el móvil de al lado.
   Ahora: los cuatro pasos arriba en una fila, con todo su texto a la
   vista, y debajo el caso real en una tarjeta ancha: el móvil a la
   izquierda escribiéndose solo y a la derecha, con hora, lo que el
   sistema iba haciendo por detrás. Las dos columnas se llenan.
   ============================================================ */
.pasos {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r-card); overflow: hidden;
  margin-bottom: clamp(1rem, 2vw, 1.4rem);
}
.pasos li {
  padding: clamp(1.3rem, 2.2vw, 1.7rem);
  border-right: 1px solid var(--line);
  display: grid; align-content: start; gap: .35rem;
}
.pasos li:last-child { border-right: 0; }
.pasos__n {
  font-family: var(--f-mono); font-size: var(--t-micro); font-weight: 600;
  color: var(--blue); margin-bottom: .5rem;
}
.pasos b {
  font-family: var(--f-display); font-weight: 600; font-size: var(--t-h3);
  letter-spacing: -.04em; line-height: 1.28;
}
.pasos li > span:last-child { color: var(--ink-2); font-size: var(--t-sm); line-height: 1.55; }
@media (max-width: 1000px) {
  .pasos { grid-template-columns: repeat(2, 1fr); }
  .pasos li:nth-child(2n) { border-right: 0; }
  .pasos li:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}
@media (max-width: 620px) {
  .pasos { grid-template-columns: 1fr; }
  .pasos li { border-right: 0; border-bottom: 1px solid var(--line); }
  .pasos li:last-child { border-bottom: 0; }
}

/* ---------- El caso: móvil a la izquierda, lo que hizo el sistema a la derecha ---------- */
.caso {
  display: grid; grid-template-columns: 330px minmax(0, 1fr);
  gap: 0; align-items: stretch;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r-card); overflow: hidden;
}
.caso > .phone {
  margin: 0; padding: clamp(1.4rem, 2.4vw, 2rem);
  background: linear-gradient(180deg, #f4f7fd, #eef3fc);
  border-right: 1px solid var(--line);
  display: grid; place-items: center; position: static;
}
.caso .phone__frame { width: 100%; }
.caso .phone__screen { height: 470px; }

/* space-between: la frase de cierre se va abajo del todo y la columna
   deja de quedarse corta contra el móvil, que es más alto. */
.caso__b { padding: clamp(1.4rem, 2.4vw, 2rem); display: grid; align-content: space-between; }
.caso__h { margin-bottom: 1.3rem; }
.caso__h b {
  display: block; font-family: var(--f-display); font-weight: 600;
  font-size: var(--t-h3); letter-spacing: -.04em;
}
.caso__h span { display: block; color: var(--ink-2); font-size: var(--t-sm); margin-top: .2rem; }

.log2 { display: grid; gap: 0; }
.log2 li {
  display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: .9rem;
  padding: .85rem 0; border-bottom: 1px dashed var(--line);
  align-items: start;
  opacity: .32; transition: opacity .45s var(--ease);
}
.log2 li:last-child { border-bottom: 0; }
.log2 li.on { opacity: 1; }
.log2 time {
  font-family: var(--f-mono); font-size: var(--t-micro); font-weight: 600;
  color: var(--ink-3); padding-top: .18rem; white-space: nowrap;
}
.log2 li.on time { color: var(--blue); }
.log2 span { font-size: var(--t-sm); line-height: 1.55; color: var(--ink-2); }
.log2 span b { color: var(--ink); font-weight: 600; }

.caso__end {
  margin-top: 1.3rem; padding-top: 1.1rem; border-top: 1px solid var(--line);
  font-size: var(--t-sm); color: var(--ink); font-weight: 500;
}

@media (max-width: 1000px) {
  .caso { grid-template-columns: 1fr; }
  .caso > .phone { border-right: 0; border-bottom: 1px solid var(--line); }
}

/* ---------- Tira de sectores: celdas con línea, como los logos de la referencia ---------- */
.strip { border-top: 1px solid var(--line); }
.strip__lb { text-align: center; color: var(--ink-2); font-size: var(--t-xs); padding: 2.2rem 0 1.6rem; }
.strip__grid {
  display: grid; grid-template-columns: repeat(5, 1fr);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.strip__grid > span {
  display: grid; place-items: center; gap: .5rem;
  padding: 1.6rem .8rem; text-align: center;
  border-right: 1px solid var(--line);
  font-family: var(--f-display); font-weight: 600; letter-spacing: -.035em;
  font-size: var(--t-sm); color: var(--ink);
}
.strip__grid > span:last-child { border-right: 0; }
.strip__grid svg { width: 22px; height: 22px; color: var(--ink-3); }
@media (max-width: 860px) {
  .strip__grid { grid-template-columns: repeat(2, 1fr); }
  .strip__grid > span { border-bottom: 1px solid var(--line); }
  .strip__grid > span:nth-child(2n) { border-right: 0; }
  /* Son cinco: el último ocupa la fila entera para que no quede media celda vacía */
  .strip__grid > span:last-child { grid-column: 1 / -1; border-right: 0; border-bottom: 0; }
}

/* ============================================================
   BENTO: las rejillas de tarjetas pasan a celdas con línea de 1px
   ============================================================ */
.leaks, .gtee, .figs, .anchs, .plan, .says {
  gap: 0;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  overflow: hidden;
}
.leak, .gt, .fig, .anch, .plan li, .say {
  background: transparent; border: 0; border-radius: 0; box-shadow: none;
  padding: clamp(1.5rem, 2.5vw, 2rem);
  border-right: 1px solid var(--line);
}
.leak:last-child, .gt:last-child, .fig:last-child, .anch:last-child,
.plan li:last-child, .say:last-child { border-right: 0; }
.leak:hover, .gt:hover { transform: none; box-shadow: none; background: #fbfcfe; }

@media (max-width: 900px) {
  .leak, .gt, .anch, .say { border-right: 0; border-bottom: 1px solid var(--line); }
  .leak:last-child, .gt:last-child, .anch:last-child, .say:last-child { border-bottom: 0; }
}
@media (max-width: 820px) {
  .plan li { border-right: 0; border-bottom: 1px solid var(--line); }
  .plan li:last-child { border-bottom: 0; }
}
@media (max-width: 760px) {
  .fig { border-right: 0; border-bottom: 1px solid var(--line); }
  .fig:last-child { border-bottom: 0; }
}

/* Fugas */
.leak__n {
  width: 34px; height: 34px; border-radius: 10px; background: var(--blue-lt);
  color: var(--blue); font-family: var(--f-body); font-size: var(--t-xs); font-weight: 600;
  margin-bottom: 1rem;
}
.leak h3 { margin-bottom: .45rem; }
.leak p { color: var(--ink-2); font-size: var(--t-sm); }
.leak__cost { color: #dc2626; font-family: var(--f-body); font-size: var(--t-xs); letter-spacing: -.01em; }
.leaks__sum { text-align: center; max-width: 58ch; margin-inline: auto; font-size: var(--t-lead); }

/* Cifras */
.fig strong { font-family: var(--f-display); font-weight: 500; letter-spacing: -.05em; font-size: clamp(2rem, 3.6vw, 2.7rem); }
.fig span { color: var(--ink-2); font-size: var(--t-sm); }

/* Garantías */
.gt__ico { width: 34px; height: 34px; border-radius: 10px; background: var(--blue-lt); color: var(--blue); margin-bottom: .9rem; }
.gt__ico svg { width: 18px; height: 18px; }
.gt p { color: var(--ink-2); font-size: var(--t-sm); }
.gtee__note {
  background: var(--panel); border: 1px solid var(--line); border-left-width: 1px;
  border-radius: var(--r-card); max-width: 62rem; margin-inline: auto;
  text-align: center; padding: clamp(1.3rem, 2.4vw, 1.9rem);
}
.gtee__note b { font-family: var(--f-display); font-weight: 600; letter-spacing: -.04em; }

/* Precio */
.anch__ico { width: 34px; height: 34px; border-radius: 10px; margin-bottom: .9rem; }
.anch__ico svg { width: 18px; height: 18px; }
.anch__lb { font-size: var(--t-h3); font-weight: 600; letter-spacing: -.05em; }
.anch__d { color: var(--ink-2); font-size: var(--t-sm); }
.anch--win { background: #fafbff; box-shadow: none; border-color: var(--line); transform: none; }
/* La píldora iba en posición absoluta colgada del borde. En bento no cabe:
   se pasa a ser la primera línea de la celda (order:-1 porque en el HTML
   va la última) y se le quita el estirado del grid. */
.anch__pin {
  position: static; order: -1; justify-self: start; width: fit-content;
  margin-bottom: .8rem; background: var(--blue); box-shadow: none;
  font-family: var(--f-body); font-size: 10px; font-weight: 600;
  letter-spacing: .05em; padding: .26rem .62rem;
}
.price__foot { text-align: center; max-width: 60ch; margin-inline: auto; }
.plan b { font-family: var(--f-display); font-size: var(--t-h3); font-weight: 600; letter-spacing: -.05em; }
.plan span { color: var(--ink-2); font-size: var(--t-sm); }
.plan span.plan__n { width: 30px; height: 30px; border-radius: 999px; font-family: var(--f-body); font-size: var(--t-micro); }

.close2 { background: var(--panel); border-color: var(--line); border-radius: var(--r-card); }
.scarce { color: var(--ink-2); }

/* Testimonios */
.say { gap: .85rem; }
.say blockquote { font-size: var(--t-sm); color: var(--ink); line-height: 1.62; }
.say__stars svg { width: 15px; height: 15px; }
.say__av { width: 34px; height: 34px; }
.say figcaption b { font-weight: 600; letter-spacing: -.02em; }

/* Tarjeta del gráfico */
.chart-card { background: var(--panel); border-color: var(--line); border-radius: var(--r-card); box-shadow: none; }
.chart-card__top b { font-family: var(--f-display); font-weight: 600; letter-spacing: -.03em; }
.note { color: var(--ink-3); font-size: var(--t-xs); }

/* Trabajo y carrusel de comentarios */
.tplhead { text-align: center; }
.reel__hint, .revs__note { color: var(--ink-3); font-size: var(--t-xs); }
.rev {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r-card); box-shadow: var(--sh-sm);
}
.rev p, .rev blockquote { font-size: var(--t-sm); letter-spacing: -.015em; }
.slide__tag, .cli__tag { border-radius: var(--r-card); }

/* ---------- FAQ: una columna estrecha, píldoras blancas ---------- */
.faq { grid-template-columns: 1fr; max-width: 44rem; margin-inline: auto; gap: .6rem; }
.qa { border-radius: 12px; border-color: var(--line); padding: 0 1.25rem; box-shadow: var(--sh-sm); }
.qa[open] { border-color: var(--line-2); box-shadow: var(--sh-sm); }
.qa summary { font-family: var(--f-display); font-weight: 500; font-size: var(--t-sm); letter-spacing: -.03em; padding: 1.05rem 2.2rem 1.05rem 0; }
.qa summary::after { border-color: var(--ink-3); width: 9px; height: 9px; }
.qa p { color: var(--ink-2); font-size: var(--t-sm); padding-bottom: 1.15rem; }
.faq__more { text-align: center; }

/* ---------- Cierre: banda azul, como la referencia ---------- */
.end {
  background: linear-gradient(140deg, #2f6dee, #2563eb 55%, #1d4ed8);
  border-radius: 22px;
  width: min(100% - 3rem, var(--wrap));
  margin: clamp(3rem, 6vw, 4.5rem) auto;
  padding: clamp(2.4rem, 5vw, 4rem) 0;
  position: relative; overflow: hidden;
}
/* El bisel diagonal de la referencia */
.end::after {
  content: ""; position: absolute; right: -26%; top: -40%; width: 52%; height: 190%;
  background: rgba(255,255,255,.05);
  border-left: 1px solid rgba(255,255,255,.14);
  transform: rotate(16deg); pointer-events: none;
}
.end__grid { align-items: center; }
.end .wrap { position: relative; z-index: 1; }
.end h2 { color: #fff; }
.end .kick { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.28); color: #fff; box-shadow: none; }
.end .kick::before { background: #fff; }
.end__sub { color: rgba(255,255,255,.86); }
/* padding-block: son enlaces sueltos, no texto corrido: necesitan altura
   suficiente para el dedo */
.end__direct a { color: rgba(255,255,255,.86); padding-block: .4rem; }
.end__direct a:hover { color: #fff; }
.end__direct svg { color: #fff; }
.lead { border-radius: var(--r-card); box-shadow: 0 30px 70px -40px rgba(0,0,0,.5); }
.lead h3 { font-family: var(--f-display); font-weight: 600; letter-spacing: -.04em; font-size: 1.3rem; }
.lead input[type="text"], .lead input[type="tel"], .lead select { border-radius: 10px; font-family: var(--f-body); font-size: var(--t-sm); padding: .72rem .9rem; }
.lead label { font-size: var(--t-xs); }

/* ---------- Pie ----------
   Venía pensado para fondo azul oscuro: sobre el fondo claro nuevo
   el texto quedaba en gris azulado ilegible. Se reapunta a tinta. */
.foot {
  background: var(--bg); color: var(--ink-2);
  border-top: 1px solid var(--line);
  position: relative; overflow: hidden;
}
.foot .brand span { font-size: 1.05rem; color: var(--ink); }
.foot__grid { border-bottom-color: var(--line); }
.foot a { color: var(--ink-2); }
.foot nav a { padding-block: .32rem; }
.foot a:hover { color: var(--blue); }
.foot__end { color: var(--ink-3); border-top: 0; }
/* Marca de agua enorme, como la referencia */
.foot__mark {
  display: block; margin-top: clamp(2rem, 5vw, 4rem);
  font-family: var(--f-display); font-weight: 500; letter-spacing: -.05em;
  /* Va en una sola línea: el tamaño se ata al ancho para que no se corte
     (9,5vw se salía del marco y en móvil cortaba "clientes") */
  font-size: min(8vw, 6.5rem); line-height: .9; text-align: center;
  color: transparent; -webkit-text-stroke: 1px var(--line-2);
  user-select: none; pointer-events: none; white-space: nowrap;
}

/* ---------- Flotantes ---------- */
.wafab { border-radius: 999px; font-size: var(--t-sm); font-weight: 500; }
.mcta a { border-radius: 999px; font-weight: 500; font-size: var(--t-sm); }
@media (max-width: 720px) { .mcta { background: rgba(247,248,250,.96); } }

/* ---------- Ajustes de la demo del CRM sobre el fondo nuevo ---------- */
.ui { font-family: var(--f-body); }
.shot__lb b { font-family: var(--f-display); font-weight: 600; letter-spacing: -.04em; }

/* ---------- Menú móvil ----------
   Tres cosas estaban mal: `.menu a` (más específico que `.btn`) le quitaba
   el relleno lateral al botón y las letras se salían de la píldora; el
   panel tapaba la barra, así que no había forma de cerrarlo; y el botón
   de menú seguía siendo tres rayas estando ya abierto. */
.menu { z-index: 44; padding-top: 6.5rem; }
.menu a.btn {
  padding: .85rem 1.7rem; font-size: var(--t-sm); font-weight: 500;
  align-self: flex-start; border-bottom: 0;
}
.menu a { font-family: var(--f-display); font-weight: 500; letter-spacing: -.04em; font-size: 1.6rem; }
.nav__burger[aria-expanded="true"] { position: relative; }
.nav__burger[aria-expanded="true"] svg { visibility: hidden; }
.nav__burger[aria-expanded="true"]::before,
.nav__burger[aria-expanded="true"]::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 17px; height: 2px; background: currentColor; border-radius: 2px;
}
.nav__burger[aria-expanded="true"]::before { transform: translate(-50%, -50%) rotate(45deg); }
.nav__burger[aria-expanded="true"]::after  { transform: translate(-50%, -50%) rotate(-45deg); }

/* ---------- Móvil ---------- */
@media (max-width: 900px) {
  .nav { padding-right: .48rem; }
}
@media (max-width: 720px) {
  /* El vídeo es la captura de una app de escritorio: metida entera en
     356px el texto queda a 6px y no se lee nada. Se recorta y se amplía
     la zona que importa (menú y lista) en vez de enseñarlo todo ilegible. */
  .vid__frame { aspect-ratio: 1 / 1; }
  .vid__frame video { object-position: 30% top; }
  /* Cuadradas: en 4/3 y 260px de ancho el rótulo blanco tapaba la web */
  .slide { aspect-ratio: 1 / 1; }
  .cli { aspect-ratio: 5 / 4; }
}
@media (max-width: 560px) {
  .hero__cta { width: 100%; }
  .end { width: 100%; border-radius: 0; margin-inline: 0; }
}


/* ============================================================
   AJUSTES DE LA AUDITORÍA
   ============================================================ */

/* --- Scroll de los anclajes: iba lento y el titular quedaba tapado --- */
html { scroll-behavior: smooth; }
[id] { scroll-margin-top: 96px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* --- Contraste: el gris de párrafo rondaba el mínimo --- */
:root {
  --ink-2: #47526a;   /* pasa de sobra sobre blanco y sobre #f7f8fa */
  --ink-3: #5c6779;
}

/* --- Un único color de acción --- */
.btn--wa { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); }
.btn--wa:hover { background: var(--bg-2); color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); }
.btn--wa svg { color: #25d366; }          /* el verde se queda solo en el icono */
.wafab { background: var(--blue); color: #fff; box-shadow: 0 14px 30px -12px rgba(37,99,235,.55); }
.wafab svg { color: #fff; }
.lead .btn--wa {                           /* aquí sí manda: es el envío */
  background: var(--blue); color: #fff; box-shadow: var(--sh-cta);
}
.lead .btn--wa svg { color: #fff; }
.lead .btn--wa:hover { background: var(--blue-dk); color: #fff; }

/* --- Carrusel: el recorte y el desvanecido de los lados eran brutales --- */
.reel__stage {
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}

/* --- Marca de agua del pie: parecía un elemento roto --- */
.foot__mark {
  font-size: min(5.2vw, 3.6rem);
  opacity: .55;
  -webkit-text-stroke: 1px var(--line-2);
}

/* Menú y sellos de confianza: 14 y 12,5 px se leían pequeños en una
   cabecera que ya de por sí es una pastilla estrecha. */
.nav__links a { font-size: .9375rem; }
.trust li { font-size: .875rem; }