/* ==========================================================================
   TimeAlly Workforce — web comercial (timeally.net)
   Sistema visual propio. Sin frameworks ni CDN: CSS escrito a mano para que
   la portada cargue en una sola pasada y puntúe bien en Core Web Vitals.
   Paleta y tipografías = las del producto (apps/web/src/app/globals.css).
   ========================================================================== */

/* --- 1. Tokens ---------------------------------------------------------- */
:root {
  /* Marca */
  --ink: 19 41 77;            /* #13294D azul marino */
  --ink-deep: 10 24 48;
  --ink-soft: 45 68 110;
  --paper: 248 249 251;       /* #F8F9FB */
  --surface: 255 255 255;
  --line: 229 231 235;
  --violet: 124 58 237;       /* #7C3AED */
  --violet-soft: 243 236 252;
  --pink: 236 18 121;         /* #EC1279 */
  --mint: 20 241 149;

  /* Semánticos */
  --ok: 16 138 92;
  --ok-bg: 222 247 236;
  --warn: 176 106 8;
  --warn-bg: 254 243 218;
  --bad: 190 40 60;
  --bad-bg: 253 232 236;

  --grad: linear-gradient(95deg, rgb(var(--pink)) 0%, rgb(var(--violet)) 100%);
  --grad-soft: linear-gradient(95deg, rgb(var(--pink) / .12) 0%, rgb(var(--violet) / .12) 100%);

  /* Tipografía */
  --display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --ui: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", monospace;

  /* Ritmo */
  --wrap: 1180px;
  --gut: 24px;
  --r-sm: 8px;
  --r: 14px;
  --r-lg: 22px;
  --r-xl: 30px;

  --shadow-sm: 0 1px 2px rgb(19 41 77 / .06), 0 1px 3px rgb(19 41 77 / .04);
  --shadow: 0 4px 12px rgb(19 41 77 / .06), 0 12px 32px rgb(19 41 77 / .07);
  --shadow-lg: 0 8px 24px rgb(19 41 77 / .09), 0 30px 70px rgb(19 41 77 / .13);
  --ease: cubic-bezier(.22, .61, .36, 1);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}

body {
  margin: 0;
  font-family: var(--ui);
  font-size: 17px;
  line-height: 1.65;
  color: rgb(var(--ink));
  background: rgb(var(--paper));
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.02em;
  margin: 0;
  text-wrap: balance;
}
p { margin: 0; text-wrap: pretty; }

::selection { background: rgb(var(--violet) / .22); }

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

/* Salto al contenido, para teclado y lectores de pantalla */
.skip {
  position: absolute;
  left: -9999px;
  top: 12px;
  z-index: 200;
  background: rgb(var(--ink));
  color: #fff;
  padding: 12px 20px;
  border-radius: var(--r);
}
.skip:focus { left: 12px; }

/* --- 3. Utilidades de disposición -------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gut);
}
.wrap-narrow { max-width: 820px; }

section { position: relative; }

.band { padding-block: clamp(72px, 9vw, 132px); }
.band--tight { padding-block: clamp(52px, 6vw, 84px); }
.band--line { border-top: 1px solid rgb(var(--line)); }
.band--white { background: rgb(var(--surface)); }

/* Cabecera de sección */
.eyebrow {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgb(var(--violet));
  margin: 0 0 18px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  border-radius: 2px;
  background: var(--grad);
  flex: none;
}
.eyebrow--center { justify-content: center; }

.h-sec {
  font-size: clamp(30px, 4.1vw, 46px);
  max-width: 19ch;
}
.h-sec--center { margin-inline: auto; text-align: center; }

.lead {
  font-size: clamp(17px, 1.6vw, 19.5px);
  color: rgb(var(--ink) / .72);
  margin-top: 20px;
  max-width: 62ch;
}
.lead--center { margin-inline: auto; text-align: center; }

.sec-head { margin-bottom: clamp(40px, 5vw, 64px); }
.sec-head--center { text-align: center; }

/* Texto con degradado de marca */
.grad-text {
  background-image: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* --- 4. Botones --------------------------------------------------------- */
.btn {
  --btn-bg: rgb(var(--ink));
  --btn-fg: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 26px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--ui);
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: -.01em;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), background-color .22s var(--ease);
  box-shadow: var(--shadow-sm);
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.btn:active { transform: translateY(0); }

.btn--grad {
  background: var(--grad);
  background-size: 160% 100%;
  background-position: 0% 50%;
  border: 0;
  box-shadow: 0 6px 18px rgb(var(--violet) / .3);
}
.btn--grad:hover {
  background-position: 100% 50%;
  box-shadow: 0 10px 28px rgb(var(--violet) / .42);
}

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: rgb(var(--ink));
  border-color: rgb(var(--ink) / .2);
  box-shadow: none;
}
.btn--ghost:hover { border-color: rgb(var(--ink) / .45); background: rgb(var(--ink) / .03); }

.btn--on-dark {
  --btn-bg: #fff;
  --btn-fg: rgb(var(--ink));
}
.btn--ghost-dark {
  --btn-bg: transparent;
  --btn-fg: #fff;
  border-color: rgb(255 255 255 / .28);
  box-shadow: none;
}
.btn--ghost-dark:hover { border-color: rgb(255 255 255 / .6); background: rgb(255 255 255 / .07); }

.btn--lg { padding: 18px 34px; font-size: 16.5px; }
.btn--sm { padding: 11px 19px; font-size: 14px; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 34px;
}
.btn-row--center { justify-content: center; }

/* Flecha que se desplaza al pasar el ratón */
.btn .arr { transition: transform .22s var(--ease); }
.btn:hover .arr { transform: translateX(4px); }

/* --- 5. Navegación ------------------------------------------------------ */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  transition: background-color .3s var(--ease), box-shadow .3s var(--ease), backdrop-filter .3s;
}
.nav__in {
  display: flex;
  align-items: center;
  gap: 18px;
  height: 74px;
}
.nav__links {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}
.nav__links a {
  padding: 9px 14px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 500;
  color: rgb(var(--ink) / .74);
  transition: color .2s, background-color .2s;
}
.nav__links a:hover { color: rgb(var(--ink)); background: rgb(var(--ink) / .05); }
.nav__cta { margin-left: 10px; }

/* Estado translúcido al bajar */
.nav.is-stuck {
  background: rgb(var(--paper) / .82);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  box-shadow: 0 1px 0 rgb(var(--line)), 0 6px 24px rgb(19 41 77 / .06);
}
/* Sobre el héroe oscuro, la barra va en blanco */
.nav:not(.is-stuck) .nav__links a { color: rgb(255 255 255 / .8); }
.nav:not(.is-stuck) .nav__links a:hover { color: #fff; background: rgb(255 255 255 / .1); }
.nav:not(.is-stuck) .logo { color: #fff; }
.nav:not(.is-stuck) .btn--ghost {
  --btn-fg: #fff;
  border-color: rgb(255 255 255 / .3);
}

/* Barra de progreso de lectura */
.nav__prog {
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 2px;
  width: 0;
  background: var(--grad);
  transition: width .1s linear;
}

/* Logotipo */
.logo {
  display: inline-flex;
  align-items: baseline;
  gap: 0;
  font-family: var(--display);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -.035em;
  color: rgb(var(--ink));
  flex: none;
}
.logo em { font-style: normal; }
.logo .a { background-image: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.logo .suf {
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  opacity: .5;
  margin-left: 8px;
  align-self: center;
}

/* Menú móvil */
.nav__burger {
  display: none;
  width: 42px;
  height: 42px;
  border: 1px solid rgb(var(--ink) / .18);
  border-radius: 12px;
  background: transparent;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex: none;
  margin-left: auto;
}
.nav:not(.is-stuck) .nav__burger { border-color: rgb(255 255 255 / .3); }
.nav__burger span { display: block; width: 17px; height: 1.5px; background: currentColor; position: relative; }
.nav__burger span::before, .nav__burger span::after {
  content: ""; position: absolute; left: 0; width: 17px; height: 1.5px; background: currentColor;
}
.nav__burger span::before { top: -5.5px; }
.nav__burger span::after { top: 5.5px; }
.nav:not(.is-stuck) .nav__burger { color: #fff; }
.nav.is-stuck .nav__burger { color: rgb(var(--ink)); }

/* --- 6. Héroe ----------------------------------------------------------- */
.hero {
  position: relative;
  background: rgb(var(--ink-deep));
  color: #fff;
  padding-top: 150px;
  padding-bottom: clamp(80px, 9vw, 120px);
  overflow: hidden;
  isolation: isolate;
}

/* Malla de degradados animada */
.hero__mesh {
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 130%;
  z-index: -2;
  pointer-events: none;
}
.hero__mesh i {
  position: absolute;
  display: block;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .5;
  will-change: transform;
}
.hero__mesh i:nth-child(1) {
  width: 46vw; height: 46vw; left: 52%; top: 2%;
  background: rgb(var(--violet));
  animation: drift1 24s var(--ease) infinite alternate;
}
.hero__mesh i:nth-child(2) {
  width: 34vw; height: 34vw; left: 62%; top: 38%;
  background: rgb(var(--pink));
  opacity: .38;
  animation: drift2 30s var(--ease) infinite alternate;
}
.hero__mesh i:nth-child(3) {
  width: 30vw; height: 30vw; left: -6%; top: 46%;
  background: #2563eb;
  opacity: .3;
  animation: drift3 27s var(--ease) infinite alternate;
}
@keyframes drift1 { to { transform: translate3d(-9%, 8%, 0) scale(1.14); } }
@keyframes drift2 { to { transform: translate3d(7%, -11%, 0) scale(.88); } }
@keyframes drift3 { to { transform: translate3d(11%, -7%, 0) scale(1.18); } }

/* Grano sutil, evita el degradado plano */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .32;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1.18fr);
  gap: clamp(36px, 5vw, 70px);
  align-items: center;
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgb(255 255 255 / .72);
  border: 1px solid rgb(255 255 255 / .18);
  background: rgb(255 255 255 / .06);
  padding: 8px 16px;
  border-radius: 999px;
  margin-bottom: 30px;
  backdrop-filter: blur(6px);
}
.hero__eyebrow .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgb(var(--mint));
  box-shadow: 0 0 0 0 rgb(var(--mint) / .7);
  animation: pulse 2.4s infinite;
  flex: none;
}
@keyframes pulse {
  70% { box-shadow: 0 0 0 9px rgb(var(--mint) / 0); }
  100% { box-shadow: 0 0 0 0 rgb(var(--mint) / 0); }
}

.hero h1 {
  font-size: clamp(42px, 6.4vw, 78px);
  letter-spacing: -.035em;
  line-height: 1.02;
  margin-bottom: 26px;
}
.hero h1 .grad-text { display: inline-block; }

.hero__lead {
  font-size: clamp(17.5px, 1.8vw, 20.5px);
  color: rgb(255 255 255 / .78);
  max-width: 54ch;
}

.hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin-top: 30px;
  font-size: 14px;
  color: rgb(255 255 255 / .62);
}
.hero__trust span { display: inline-flex; align-items: center; gap: 8px; }
.hero__trust svg { flex: none; color: rgb(var(--mint)); }

/* Tarjeta de producto flotante */
.hero__stage {
  position: relative;
  perspective: 1800px;
}
.hero__card {
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: 0 40px 90px rgb(0 0 0 / .45), 0 0 0 1px rgb(255 255 255 / .09);
  transform: rotateY(-7deg) rotateX(3deg) translateZ(0);
  transition: transform .9s var(--ease);
  background: rgb(var(--surface));
}
.hero__stage:hover .hero__card { transform: rotateY(-2deg) rotateX(1deg); }

/* Etiqueta flotante sobre la tarjeta */
.hero__float {
  position: absolute;
  right: -14px;
  bottom: -26px;
  background: rgb(var(--surface));
  color: rgb(var(--ink));
  border-radius: var(--r);
  padding: 14px 18px;
  box-shadow: var(--shadow-lg);
  max-width: 290px;
  font-size: 13.5px;
  line-height: 1.5;
  animation: floaty 5.5s ease-in-out infinite;
}
@keyframes floaty { 50% { transform: translateY(-9px); } }
.hero__float b { display: block; font-family: var(--display); font-size: 14px; margin-bottom: 3px; }

/* --- 7. Franja de métricas --------------------------------------------- */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgb(var(--line));
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid rgb(var(--line));
}
.stat { background: rgb(var(--surface)); padding: 30px 26px; }
.stat b {
  display: block;
  font-family: var(--display);
  font-size: clamp(30px, 3.4vw, 42px);
  letter-spacing: -.03em;
  line-height: 1;
  margin-bottom: 8px;
}
.stat span { font-size: 14.5px; color: rgb(var(--ink) / .62); line-height: 1.45; display: block; }

/* --- 8. Tarjetas -------------------------------------------------------- */
.card {
  background: rgb(var(--surface));
  border: 1px solid rgb(var(--line));
  border-radius: var(--r-lg);
  padding: 30px;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
.card--hover:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
  border-color: rgb(var(--violet) / .35);
}
.card h3 { font-size: 20px; margin-bottom: 10px; }
.card p { color: rgb(var(--ink) / .7); font-size: 15.5px; }

.grid { display: grid; gap: 22px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Icono redondeado de tarjeta */
.ic {
  width: 44px; height: 44px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  background: var(--grad-soft);
  color: rgb(var(--violet));
  margin-bottom: 18px;
}
.ic svg { width: 21px; height: 21px; }

/* Lista de comprobación */
.checks { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 11px; }
.checks li {
  display: flex;
  gap: 11px;
  font-size: 15.3px;
  color: rgb(var(--ink) / .78);
  line-height: 1.5;
}
.checks svg { flex: none; margin-top: 4px; color: rgb(var(--violet)); }

/* --- 9. Dolores --------------------------------------------------------- */
.pains { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.pain {
  border-left: 2px solid rgb(var(--pink) / .3);
  padding: 4px 0 4px 20px;
}
.pain b {
  display: block;
  font-family: var(--display);
  font-size: 16.5px;
  margin-bottom: 7px;
}
.pain p { font-size: 15px; color: rgb(var(--ink) / .66); }

/* --- 10. Sección oscura (IA) -------------------------------------------- */
.dark {
  background: rgb(var(--ink-deep));
  color: #fff;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.dark .h-sec, .dark h3 { color: #fff; }
.dark .lead { color: rgb(255 255 255 / .74); }
.dark .eyebrow { color: rgb(255 255 255 / .82); }
.dark__glow {
  position: absolute;
  z-index: -1;
  width: 60vw; height: 60vw;
  left: 50%; top: -28%;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgb(var(--violet) / .42) 0%, transparent 62%);
  filter: blur(46px);
  pointer-events: none;
}

.ai-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.ai-card {
  background: rgb(255 255 255 / .055);
  border: 1px solid rgb(255 255 255 / .12);
  border-radius: var(--r-lg);
  padding: 24px;
  transition: transform .3s var(--ease), background-color .3s, border-color .3s;
  position: relative;
  overflow: hidden;
}
.ai-card:hover {
  transform: translateY(-4px);
  background: rgb(255 255 255 / .1);
  border-color: rgb(var(--violet) / .6);
}
.ai-card b {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--display);
  font-size: 16.5px;
  font-weight: 600;
  margin-bottom: 9px;
}
.ai-card p { font-size: 14.6px; color: rgb(255 255 255 / .68); line-height: 1.55; }
.ai-card .spark { color: rgb(var(--pink)); flex: none; }

/* Aviso de "la persona decide" */
.ai-note {
  margin-top: 34px;
  border: 1px solid rgb(255 255 255 / .16);
  border-radius: var(--r);
  padding: 18px 22px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: rgb(255 255 255 / .04);
  font-size: 15px;
  color: rgb(255 255 255 / .76);
}
.ai-note svg { flex: none; margin-top: 3px; color: rgb(var(--mint)); }

/* --- 11. Bloques de producto ------------------------------------------- */
.feat {
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
  gap: clamp(34px, 5vw, 72px);
  align-items: center;
}
.feat + .feat { margin-top: clamp(64px, 8vw, 116px); }
.feat--flip .feat__txt { order: 2; }

.feat__media {
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: rgb(var(--surface));
  border: 1px solid rgb(var(--line));
}

/* --- 12. Sectores (cinta) ---------------------------------------------- */
.marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.marquee__track {
  display: flex;
  gap: 14px;
  width: max-content;
  animation: slide 44s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes slide { to { transform: translateX(-50%); } }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 22px;
  border: 1px solid rgb(var(--line));
  border-radius: 999px;
  background: rgb(var(--surface));
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
}
.chip svg { color: rgb(var(--violet)); flex: none; }

.sector { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
.sector .card { padding: 26px 24px; }
.sector b { display: block; font-family: var(--display); font-size: 17px; margin-bottom: 8px; }
.sector p { font-size: 14.6px; }

/* --- 13. Precios -------------------------------------------------------- */
.toggle {
  display: inline-flex;
  padding: 5px;
  border: 1px solid rgb(var(--line));
  background: rgb(var(--surface));
  border-radius: 999px;
  margin: 0 auto 14px;
  position: relative;
}
.toggle button {
  border: 0;
  background: transparent;
  padding: 10px 22px;
  border-radius: 999px;
  font-size: 14.6px;
  font-weight: 600;
  color: rgb(var(--ink) / .62);
  cursor: pointer;
  transition: color .25s;
  position: relative;
  z-index: 1;
}
.toggle button[aria-pressed="true"] { color: #fff; }
.toggle__pill {
  position: absolute;
  top: 5px; left: 5px;
  height: calc(100% - 10px);
  border-radius: 999px;
  background: rgb(var(--ink));
  transition: transform .34s var(--ease), width .34s var(--ease);
  z-index: 0;
}
.save {
  display: block;
  text-align: center;
  font-size: 13.5px;
  color: rgb(var(--ok));
  font-weight: 600;
  margin-bottom: 40px;
}

.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: start; }
.plan {
  background: rgb(var(--surface));
  border: 1px solid rgb(var(--line));
  border-radius: var(--r-xl);
  padding: 34px 30px;
  position: relative;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.plan:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.plan--best {
  border-color: transparent;
  box-shadow: 0 0 0 2px rgb(var(--violet)), var(--shadow);
}
.plan__tag {
  position: absolute;
  top: -13px; left: 50%;
  transform: translateX(-50%);
  background: var(--grad);
  color: #fff;
  font-size: 11.5px;
  font-family: var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 6px 15px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 5px 14px rgb(var(--violet) / .38);
}
.plan__name { font-family: var(--display); font-size: 15px; letter-spacing: .1em; text-transform: uppercase; color: rgb(var(--ink) / .55); }
.plan__promise { font-family: var(--display); font-size: 25px; margin: 8px 0 18px; }
.plan__price { display: flex; align-items: baseline; gap: 6px; font-family: var(--display); }
.plan__price b { font-size: 46px; letter-spacing: -.035em; line-height: 1; }
.plan__price span { font-size: 15px; color: rgb(var(--ink) / .58); font-family: var(--ui); }
.plan__extra { font-size: 14.5px; color: rgb(var(--ink) / .62); margin-top: 9px; }
.plan__for {
  font-size: 14.5px;
  margin: 20px 0 0;
  padding-top: 20px;
  border-top: 1px solid rgb(var(--line));
  color: rgb(var(--ink) / .75);
}
.plan .btn { width: 100%; margin-top: 24px; }

/* Calculadora */
.calc {
  margin-top: 34px;
  background: rgb(var(--surface));
  border: 1px solid rgb(var(--line));
  border-radius: var(--r-xl);
  padding: clamp(26px, 3.4vw, 40px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: clamp(28px, 4vw, 52px);
  align-items: center;
}
.calc h3 { font-size: 23px; margin-bottom: 10px; }
.calc p { font-size: 15.2px; color: rgb(var(--ink) / .68); }

.calc__count {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 22px 0 8px;
}
.calc__count b { font-family: var(--display); font-size: 44px; letter-spacing: -.03em; line-height: 1; }
.calc__count span { font-size: 15px; color: rgb(var(--ink) / .6); }

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: rgb(var(--line));
  outline: none;
  margin: 12px 0 6px;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid rgb(var(--violet));
  box-shadow: 0 3px 10px rgb(var(--violet) / .4);
  cursor: pointer;
  transition: transform .18s var(--ease);
}
input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.14); }
input[type="range"]::-moz-range-thumb {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid rgb(var(--violet));
  cursor: pointer;
}
.range-ends {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 12px;
  color: rgb(var(--ink) / .45);
}

.calc__out { display: grid; gap: 12px; }
.calc__row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 17px 20px;
  border: 1px solid rgb(var(--line));
  border-radius: var(--r);
  transition: border-color .25s, background-color .25s;
}
.calc__row--best { border-color: rgb(var(--violet) / .5); background: var(--grad-soft); }
.calc__row b { font-family: var(--display); font-size: 16.5px; display: block; }
.calc__row small { font-size: 13.4px; color: rgb(var(--ink) / .6); }
.calc__amt { font-family: var(--display); font-size: 26px; letter-spacing: -.03em; white-space: nowrap; }
.calc__amt i { font-style: normal; font-size: 14px; font-family: var(--ui); color: rgb(var(--ink) / .55); }

.fineprint { font-size: 13.8px; color: rgb(var(--ink) / .58); margin-top: 22px; text-align: center; }

/* --- 14. Pasos de implantación ----------------------------------------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; counter-reset: s; }
.step { position: relative; padding-top: 26px; }
.step::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: rgb(var(--line));
}
.step::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  height: 2px;
  width: 0;
  background: var(--grad);
  transition: width 1s var(--ease);
}
.step.is-in::after { width: 100%; }
.step b {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .18em;
  color: rgb(var(--violet));
  display: block;
  margin-bottom: 10px;
}
.step h3 { font-size: 19px; margin-bottom: 8px; }
.step p { font-size: 15px; color: rgb(var(--ink) / .68); }
.step em {
  font-style: normal;
  font-family: var(--mono);
  font-size: 12.5px;
  color: rgb(var(--ink) / .5);
  display: block;
  margin-top: 10px;
}

/* --- 15. Vídeos --------------------------------------------------------- */
.vids { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.vid {
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid rgb(var(--line));
  background: rgb(var(--surface));
  cursor: pointer;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.vid:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.vid__thumb {
  aspect-ratio: 16 / 10;
  background: rgb(var(--ink-deep));
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.vid__thumb::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 70% 25%, rgb(var(--violet) / .5), transparent 58%);
}
.vid__play {
  width: 58px; height: 58px;
  border-radius: 50%;
  background: rgb(255 255 255 / .96);
  display: grid;
  place-items: center;
  position: relative;
  box-shadow: 0 8px 26px rgb(0 0 0 / .32);
  transition: transform .3s var(--ease);
}
.vid:hover .vid__play { transform: scale(1.1); }
.vid__play svg { color: rgb(var(--ink)); margin-left: 3px; }
.vid__body { padding: 20px 22px 24px; }
.vid__body b { font-family: var(--display); font-size: 17px; display: block; margin-bottom: 6px; }
.vid__body p { font-size: 14.6px; color: rgb(var(--ink) / .66); }
.vid__dur {
  position: absolute;
  right: 12px; bottom: 12px;
  font-family: var(--mono);
  font-size: 11.5px;
  color: #fff;
  background: rgb(0 0 0 / .55);
  padding: 4px 9px;
  border-radius: 6px;
  backdrop-filter: blur(4px);
}

/* --- 16. FAQ ------------------------------------------------------------ */
.faq { display: grid; gap: 0; max-width: 860px; margin-inline: auto; }
.faq details {
  border-bottom: 1px solid rgb(var(--line));
}
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 24px 46px 24px 0;
  font-family: var(--display);
  font-size: 18.5px;
  font-weight: 600;
  position: relative;
  transition: color .2s;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: rgb(var(--violet)); }
.faq summary::after {
  content: "";
  position: absolute;
  right: 6px; top: 50%;
  width: 13px; height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform .3s var(--ease);
}
.faq summary::before {
  content: "";
  position: absolute;
  right: 11.5px; top: 50%;
  width: 2px; height: 13px;
  margin-top: -5.5px;
  background: currentColor;
  border-radius: 2px;
  transition: transform .3s var(--ease), opacity .3s;
}
.faq details[open] summary::before { transform: rotate(90deg); opacity: 0; }
.faq details p {
  padding: 0 40px 26px 0;
  color: rgb(var(--ink) / .72);
  font-size: 16px;
  animation: fade .4s var(--ease);
}
@keyframes fade { from { opacity: 0; transform: translateY(-6px); } }

/* --- 17. Formulario ----------------------------------------------------- */
.form-band {
  background: rgb(var(--ink-deep));
  color: #fff;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.form-grid {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(36px, 5vw, 70px);
}
.form-card {
  background: rgb(var(--surface));
  border-radius: var(--r-xl);
  padding: clamp(26px, 3.4vw, 40px);
  box-shadow: var(--shadow-lg);
  color: rgb(var(--ink));
}
.field { margin-bottom: 17px; }
.field label {
  display: block;
  font-size: 13.6px;
  font-weight: 600;
  margin-bottom: 7px;
  color: rgb(var(--ink) / .8);
}
.field input, .field select, .field textarea {
  width: 100%;
  padding: 13px 15px;
  border: 1px solid rgb(var(--line));
  border-radius: var(--r-sm);
  background: rgb(var(--paper));
  font-size: 15.4px;
  transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: rgb(var(--violet));
  background: #fff;
  box-shadow: 0 0 0 4px rgb(var(--violet) / .13);
}
.field textarea { resize: vertical; min-height: 96px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.legal {
  font-size: 12.8px;
  color: rgb(var(--ink) / .58);
  line-height: 1.55;
  margin-top: 14px;
}
.legal a { color: rgb(var(--violet)); text-decoration: underline; text-underline-offset: 2px; }

.form-msg {
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: var(--r-sm);
  font-size: 14.6px;
  display: none;
}
.form-msg.ok { display: block; background: rgb(var(--ok-bg)); color: rgb(var(--ok)); }
.form-msg.err { display: block; background: rgb(var(--bad-bg)); color: rgb(var(--bad)); }

.contact-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-top: 22px;
  font-size: 15.4px;
  color: rgb(255 255 255 / .8);
}
.contact-item svg { flex: none; margin-top: 3px; color: rgb(var(--pink)); }
.contact-item a:hover { color: #fff; text-decoration: underline; }

/* --- 18. Pie ------------------------------------------------------------ */
.foot {
  background: rgb(var(--ink-deep));
  color: rgb(255 255 255 / .62);
  border-top: 1px solid rgb(255 255 255 / .1);
  padding-block: 58px 34px;
  font-size: 14.6px;
}
.foot__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: 40px;
  padding-bottom: 40px;
}
.foot h4 {
  font-family: var(--ui);
  font-size: 12.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgb(255 255 255 / .42);
  margin-bottom: 16px;
  font-weight: 600;
}
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.foot a:hover { color: #fff; }
.foot .logo { color: #fff; margin-bottom: 14px; }
.foot__bottom {
  border-top: 1px solid rgb(255 255 255 / .1);
  padding-top: 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 26px;
  justify-content: space-between;
  font-size: 13.6px;
  color: rgb(255 255 255 / .45);
}

/* --- 19. Revelado al hacer scroll -------------------------------------- */
.rv {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .75s var(--ease), transform .75s var(--ease);
}
.rv.is-in { opacity: 1; transform: none; }
.rv-d1 { transition-delay: .09s; }
.rv-d2 { transition-delay: .18s; }
.rv-d3 { transition-delay: .27s; }
.rv-d4 { transition-delay: .36s; }

/* --- 20. Adaptación a pantallas pequeñas -------------------------------- */
@media (max-width: 1080px) {
  .ai-grid { grid-template-columns: repeat(2, 1fr); }
  .sector { grid-template-columns: repeat(3, 1fr); }
  .foot__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 960px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero { padding-top: 124px; }
  .hero__card { transform: none; }
  .hero__stage { margin-top: 12px; }
  .hero__float { position: static; margin-top: 16px; max-width: none; animation: none; }
  .feat, .calc, .form-grid { grid-template-columns: 1fr; }
  .feat--flip .feat__txt { order: 0; }
  .stats, .pains, .steps, .vids { grid-template-columns: repeat(2, 1fr); }
  .plans { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
  .plan--best { order: -1; }
  .nav__links { display: none; }
  .nav__cta { display: none; }
  .nav__burger { display: flex; }
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 620px) {
  body { font-size: 16.5px; }
  :root { --gut: 18px; }
  .stats, .pains, .steps, .vids, .sector, .grid-2, .grid-3, .grid-4, .field-row { grid-template-columns: 1fr; }
  .ai-grid { grid-template-columns: 1fr; }
  .hero h1 { font-size: clamp(34px, 9vw, 46px); }
  .band { padding-block: 62px; }
  .card, .plan { padding: 24px 22px; }
}

/* Menú desplegado en móvil */
.mobile-menu {
  position: fixed;
  inset: 74px 0 auto 0;
  background: rgb(var(--paper));
  border-bottom: 1px solid rgb(var(--line));
  padding: 18px var(--gut) 26px;
  display: none;
  z-index: 99;
  box-shadow: var(--shadow);
}
.mobile-menu.is-open { display: block; animation: fade .3s var(--ease); }
.mobile-menu a {
  display: block;
  padding: 13px 0;
  font-size: 17px;
  font-weight: 500;
  border-bottom: 1px solid rgb(var(--line));
}
.mobile-menu .btn { width: 100%; margin-top: 18px; }

/* --- 21. Respeto por quien pide menos movimiento ------------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .rv { opacity: 1; transform: none; }
  .hero__card { transform: none; }
}

/* --- 22. Impresión ------------------------------------------------------ */
@media print {
  .nav, .hero__mesh, .vid__play, .form-band { display: none; }
  body { background: #fff; }
}

/* --- 23. Panel de asesoría (maqueta propia) ---------------------------- */
.adv { padding: 0; overflow: hidden; font-size: 14.5px; }
.adv__bar {
  display: flex; align-items: center; gap: 7px;
  padding: 13px 18px;
  background: rgb(var(--paper));
  border-bottom: 1px solid rgb(var(--line));
}
.adv__bar i { width: 10px; height: 10px; border-radius: 50%; background: rgb(var(--line)); flex: none; }
.adv__bar i:first-child { background: #f5a3b6; }
.adv__bar i:nth-child(2) { background: #f7d9a0; }
.adv__bar i:nth-child(3) { background: #a9e3c4; }
.adv__bar span {
  margin-left: 10px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgb(var(--ink) / .5);
}
.adv__head, .adv__row {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) 62px minmax(0, 1fr) 72px;
  gap: 12px;
  align-items: center;
  padding: 13px 18px;
}
.adv__head {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgb(var(--ink) / .42);
  border-bottom: 1px solid rgb(var(--line));
}
.adv__row { border-bottom: 1px solid rgb(var(--line)); transition: background-color .2s; }
.adv__row:hover { background: rgb(var(--violet) / .04); }
.adv__row b { font-weight: 600; font-size: 15px; }
.adv__row > span:nth-child(2) { font-family: var(--mono); color: rgb(var(--ink) / .62); }
.adv__row em {
  font-style: normal;
  font-size: 12.5px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  justify-self: start;
  white-space: nowrap;
}
.adv--ok { background: rgb(var(--ok-bg)); color: rgb(var(--ok)); }
.adv--wait { background: rgb(var(--warn-bg)); color: rgb(var(--warn)); }
.adv__go {
  font-size: 13.5px;
  font-weight: 600;
  color: rgb(var(--violet));
  justify-self: end;
}
.adv__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  background: rgb(var(--paper));
  font-size: 13.5px;
  color: rgb(var(--ink) / .6);
}
.adv__btn {
  background: var(--grad);
  color: #fff;
  font-weight: 600;
  font-size: 13px;
  padding: 9px 16px;
  border-radius: 999px;
  white-space: nowrap;
}
@media (max-width: 560px) {
  .adv__head, .adv__row { grid-template-columns: minmax(0, 1.5fr) 44px minmax(0, 1fr); }
  .adv__go { display: none; }
}

/* --- 24. Encogido correcto de las rejillas ----------------------------- */
/* Los hijos de una rejilla tienen min-width:auto, así que un contenido ancho
   (las maquetas de producto) estira su columna y rompe el móvil. Se les
   permite encoger y la maqueta se desplaza dentro de su propio marco. */
.hero__grid, .feat, .calc, .form-grid, .stats, .grid, .plans,
.pains, .steps, .vids, .sector, .ai-grid, .foot__grid {
  grid-template-columns: minmax(0, 1fr);
}
.hero__grid { grid-template-columns: minmax(0, 1.02fr) minmax(0, 1.18fr); }
.feat { grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); }
.calc { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
/* La regla de arriba también devolvía a una columna las rejillas .grid-2/3/4,
   y las tarjetas de cumplimiento salían apiladas en escritorio. */
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.form-grid { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); }
.stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pains { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.vids  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sector { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.ai-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.plans { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.foot__grid { grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); }

.hero__txt, .hero__stage, .feat__txt, .feat__media, .calc > *, .form-grid > * { min-width: 0; }

/* La maqueta nunca empuja el diseño: se desplaza dentro de su marco. */
.hero__card, .feat__media { max-width: 100%; overflow-x: auto; }
.hero__card::-webkit-scrollbar, .feat__media::-webkit-scrollbar { height: 6px; }
.hero__card::-webkit-scrollbar-thumb, .feat__media::-webkit-scrollbar-thumb {
  background: rgb(var(--ink) / .2); border-radius: 999px;
}

@media (max-width: 1080px) {
  .ai-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sector  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .foot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .hero__grid, .feat, .calc, .form-grid { grid-template-columns: minmax(0, 1fr); }
  .stats, .pains, .steps, .vids { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plans { grid-template-columns: minmax(0, 1fr); }
  .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .stats, .pains, .steps, .vids, .sector, .ai-grid, .plans,
  .grid-2, .grid-3, .grid-4, .field-row { grid-template-columns: minmax(0, 1fr); }
}

/* --- 25. Botones largos en pantallas estrechas ------------------------- */
/* Los botones no parten línea a propósito, pero una etiqueta larga no puede
   desbordar la página en un móvil: por debajo de 620 px se permite el salto. */
@media (max-width: 620px) {
  .btn { white-space: normal; text-align: center; max-width: 100%; }
  .btn-row { width: 100%; }
  .btn-row .btn { width: 100%; }
}

/* --- 26. Atribución «by Aura Devs» en el logotipo ---------------------- */
.logo .by {
  font-family: var(--ui);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  opacity: .55;
  margin-left: 9px;
  padding-left: 9px;
  border-left: 1px solid currentColor;
  align-self: center;
  white-space: nowrap;
}
/* En el pie se lee mejor un poco más presente. */
.foot .logo .by { opacity: .72; }
/* En pantallas estrechas la barra ya va justa: se deja solo el logotipo. */
@media (max-width: 760px) {
  .nav .logo .by, .nav .logo .suf { display: none; }
}

/* --- 27. Franja «democratizar el WFM» ---------------------------------- */
.wfm {
  background: rgb(var(--ink-deep));
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
.wfm__glow {
  position: absolute;
  z-index: -1;
  inset: -40% -10% auto 50%;
  width: 70vw;
  height: 70vw;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgb(var(--pink) / .3) 0%, rgb(var(--violet) / .22) 38%, transparent 66%);
  filter: blur(50px);
  pointer-events: none;
}
.wfm__claim {
  font-family: var(--display);
  font-size: clamp(25px, 3.6vw, 40px);
  font-weight: 600;
  letter-spacing: -.025em;
  line-height: 1.16;
  margin-top: 40px;
}

/* Comparación antes / ahora */
.wfm__cmp {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 48px;
  text-align: left;
}
.wfm__col {
  border: 1px solid rgb(255 255 255 / .14);
  border-radius: var(--r-lg);
  padding: 24px 26px;
  background: rgb(255 255 255 / .04);
}
.wfm__col > span {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgb(255 255 255 / .5);
  margin-bottom: 16px;
}
.wfm__col b {
  display: block;
  font-family: var(--ui);
  font-weight: 500;
  font-size: 15.6px;
  color: rgb(255 255 255 / .7);
  padding: 9px 0 9px 26px;
  position: relative;
  line-height: 1.45;
}
/* Aspa tenue en la columna del pasado */
.wfm__col:not(.wfm__col--us) b::before {
  content: "";
  position: absolute;
  left: 2px; top: 17px;
  width: 11px; height: 11px;
  background:
    linear-gradient(45deg, transparent 44%, rgb(255 255 255 / .38) 44%, rgb(255 255 255 / .38) 56%, transparent 56%),
    linear-gradient(-45deg, transparent 44%, rgb(255 255 255 / .38) 44%, rgb(255 255 255 / .38) 56%, transparent 56%);
}
.wfm__col--us {
  border-color: rgb(var(--violet) / .55);
  background: linear-gradient(160deg, rgb(var(--pink) / .14), rgb(var(--violet) / .12));
}
.wfm__col--us > span { color: #fff; }
.wfm__col--us b { color: #fff; font-weight: 600; }
/* Marca de comprobación en la columna nuestra */
.wfm__col--us b::before {
  content: "";
  position: absolute;
  left: 2px; top: 16px;
  width: 12px; height: 7px;
  border-left: 2.4px solid rgb(var(--mint));
  border-bottom: 2.4px solid rgb(var(--mint));
  transform: rotate(-45deg);
}
@media (max-width: 620px) {
  .wfm__cmp { grid-template-columns: minmax(0, 1fr); }
}

/* --- 28. Datos identificativos del pie (LSSI-CE art. 10) --------------- */
.foot__legal {
  border-top: 1px solid rgb(255 255 255 / .08);
  margin-top: 22px;
  padding-top: 20px;
  font-size: 12.6px;
  line-height: 1.7;
  color: rgb(255 255 255 / .38);
}
.foot__legal strong { color: rgb(255 255 255 / .6); font-weight: 600; }
.foot__legal a { text-decoration: underline; text-underline-offset: 2px; }
.foot__legal a:hover { color: #fff; }

/* --- 29. Disponibilidad de la app móvil -------------------------------- */
/* Pastillas propias, no los distintivos oficiales de las tiendas: esos solo
   pueden usarse cuando la app está publicada y con su enlace real. Al
   publicarse, se sustituyen por los oficiales. */
.stores {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid rgb(var(--line));
}
.stores__lead {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgb(var(--ink) / .45);
  margin-bottom: 14px;
}
.stores__row { display: flex; flex-wrap: wrap; gap: 12px; }
.store {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 17px;
  border: 1px solid rgb(var(--line));
  border-radius: var(--r);
  background: rgb(var(--surface));
  transition: border-color .25s var(--ease), transform .25s var(--ease);
}
.store:hover { border-color: rgb(var(--violet) / .45); transform: translateY(-2px); }
.store svg { width: 19px; height: 19px; color: rgb(var(--ink) / .62); flex: none; }
.store b { font-family: var(--display); font-size: 15.5px; font-weight: 600; }
.store em {
  font-style: normal;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgb(var(--violet));
  background: var(--grad-soft);
  padding: 4px 9px;
  border-radius: 999px;
  white-space: nowrap;
}
.stores__note {
  display: block;
  margin-top: 14px;
  font-size: 14px;
  color: rgb(var(--ink) / .6);
  max-width: 54ch;
  line-height: 1.55;
}
@media (max-width: 420px) {
  .store { width: 100%; }
}

/* --- 30. La cifra de saldo no se parte -------------------------------- */
/* A anchos medios la tarjeta se estrujaba y «+12 h 30 m» caía en tres
   líneas. Antes de partir el número, la maqueta se desplaza dentro de su
   marco, que para eso lleva overflow-x. */
#mk-bolsa .mk-bl-saldo { white-space: nowrap; }
#mk-bolsa .mk-grow { min-width: 142px; }


/* --- 31. Lema bajo el logotipo ------------------------------------------ */
.logo { flex-direction: column; align-items: flex-start; gap: 4px; }
.logo__mark { display: inline-flex; align-items: baseline; }
.logo__tag {
  /* Misma letra, tamaño y gris que «WORKFORCE», en su propia línea. */
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .2em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: .5;
}
.foot .logo__tag { opacity: .5; }
@media (max-width: 420px) {
  .logo__tag { font-size: 8.5px; letter-spacing: .16em; }
}

/* --- 32. Barra con fondo en cuanto se baja ------------------------------- */
/* Transparente solo arriba del todo. Mientras se recorre el héroe oscuro
   lleva el mismo azul profundo, translúcido, para que nada pase por debajo
   del logotipo; al salir del héroe cambia al estado claro de siempre. */
.nav.is-scrolled:not(.is-stuck) {
  background: rgb(var(--ink-deep) / .86);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  box-shadow: 0 1px 0 rgb(255 255 255 / .08), 0 8px 28px rgb(0 0 0 / .18);
}

/* --- 33. Menú de escritorio siempre en una línea ----------------------- */
/* Con el lema bajo el logotipo el menú no cabía y los enlaces largos se
   partían en dos líneas. Se compacta un poco, la atribución se retira de
   la cabecera en anchos medios (sigue en el pie) y el menú pasa a
   hamburguesa antes de que falte sitio. */
.nav__in { gap: 14px; }
.nav__links { gap: 2px; }
.nav__links a { padding: 9px 10px; font-size: 14px; white-space: nowrap; }
.nav__cta { margin-left: 0; }
@media (max-width: 1180px) {
  .nav .logo .by { display: none; }
}
@media (max-width: 1100px) {
  .nav__links, .nav__cta { display: none; }
  .nav__burger { display: flex; }
}

/* --- 34. Lo que te quitas de encima, por perfil ------------------------- */
.roles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.role {
  background: rgb(var(--surface));
  border: 1px solid rgb(var(--line));
  border-radius: var(--r-lg);
  padding: 28px 26px 26px;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow);
}
.role__who {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgb(var(--violet));
}
.role h3 {
  font-family: var(--display);
  font-size: clamp(20px, 1.9vw, 23px);
  line-height: 1.2;
  letter-spacing: -.02em;
  margin: 10px 0 20px;
}
.role__pairs { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.role__pair { display: grid; gap: 6px; padding-top: 14px; border-top: 1px solid rgb(var(--line)); }
.role__pair:first-child { border-top: 0; padding-top: 0; }
.role__was, .role__now { display: grid; grid-template-columns: 18px 1fr; gap: 8px; line-height: 1.45; }
.role__was { font-size: 14.5px; color: rgb(var(--ink) / .56); }
.role__now { font-size: 15px; color: rgb(var(--ink)); font-weight: 500; }
.role__was svg { color: rgb(var(--pink) / .75); margin-top: 3px; }
.role__now svg { color: rgb(var(--violet)); margin-top: 3px; }
.claim {
  font-family: var(--display);
  font-size: clamp(24px, 3.2vw, 36px);
  font-weight: 600;
  letter-spacing: -.025em;
  line-height: 1.18;
  text-align: center;
  max-width: 26ch;
  margin: clamp(44px, 5vw, 64px) auto 0;
}

/* --- 35. Calculadora de tiempo ------------------------------------------ */
.tb { margin-top: clamp(48px, 6vw, 72px); align-items: stretch; }
.tb__fields { display: grid; gap: 18px; margin-top: 22px; }
.tb__f label { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 14.8px; font-weight: 500; }
.tb__f output { font-family: var(--mono); font-size: 13.5px; color: rgb(var(--violet)); white-space: nowrap; }
.tb__f input[type="range"] { margin: 8px 0 0; }
.tb__out {
  background: rgb(var(--ink-deep));
  color: #fff;
  border-radius: var(--r-lg);
  padding: clamp(26px, 3vw, 36px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.tb__out::before {
  content: "";
  position: absolute;
  inset: -40% -30% auto auto;
  width: 70%;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgb(var(--violet) / .45), transparent 65%);
  z-index: -1;
}
.tb__big { font-family: var(--display); font-size: clamp(46px, 6vw, 68px); font-weight: 700; letter-spacing: -.04em; line-height: 1; }
.tb__big small { font-size: .34em; font-weight: 500; letter-spacing: 0; opacity: .7; margin-left: 6px; }
.tb__out .tb__line { font-size: 16px; color: rgb(255 255 255 / .82); }
.tb__out .tb__line b { color: #fff; font-family: var(--display); font-size: 1.12em; }
.tb__out .tb__note { font-size: 13.6px; color: rgb(255 255 255 / .6); border-top: 1px solid rgb(255 255 255 / .12); padding-top: 16px; }

/* --- 36. Especialistas -------------------------------------------------- */
.spec { margin-top: clamp(40px, 5vw, 56px); }
.spec .card { position: relative; padding-top: 30px; }
.spec__n {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .14em;
  background-image: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: block;
  margin-bottom: 12px;
}

/* --- 37. Recuadro del registro digital ---------------------------------- */
.law {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  padding: clamp(22px, 2.6vw, 30px);
  margin-bottom: clamp(44px, 5vw, 64px);
  border-radius: var(--r-lg);
  background: linear-gradient(rgb(var(--surface)), rgb(var(--surface))) padding-box, var(--grad) border-box;
  border: 1.5px solid transparent;
  box-shadow: var(--shadow);
}
.law__ico {
  width: 48px; height: 48px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: var(--grad-soft);
  color: rgb(var(--violet));
}
.law h3 { font-family: var(--display); font-size: clamp(19px, 1.9vw, 22px); letter-spacing: -.02em; line-height: 1.25; margin-bottom: 8px; }
.law p { font-size: 15.4px; color: rgb(var(--ink) / .72); }
.law__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.law__chips span {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .06em;
  padding: 6px 11px;
  border-radius: 999px;
  border: 1px solid rgb(var(--line));
  color: rgb(var(--ink) / .72);
  background: rgb(var(--paper));
}

@media (max-width: 960px) {
  .roles { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; }
}
@media (max-width: 620px) {
  .law { grid-template-columns: 1fr; }
  .role { padding: 24px 20px 22px; }
}

/* --- 38. Texto solo para lectores de pantalla y resultado principal ----- */
.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;
}
.tb__out .tb__main { font-size: 17px; color: rgb(255 255 255 / .82); line-height: 1.35; }
.tb__out .tb__main b {
  display: block;
  font-family: var(--display);
  font-size: clamp(52px, 6.4vw, 76px);
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: 1;
  color: #fff;
  margin: 4px 0 6px;
}

/* ==========================================================================
   39. La web en azul profundo
   El fondo azul con letra blanca del héroe pasa a ser la norma de toda la
   página (decisión del 23/09/2026). Se cambia la paleta de base, así que los
   componentes se adaptan solos. Se quedan en claro, como tarjetas blancas
   sobre el azul, las pantallas de producto, la tarjeta flotante del héroe,
   el panel de asesorías y la tarjeta del formulario.
   ========================================================================== */
:root {
  --ink: 255 255 255;           /* el texto pasa a blanco */
  --paper: 10 24 48;            /* fondo: el azul profundo del héroe */
  --surface: 17 35 66;          /* tarjetas: un azul algo más claro */
  --band-alt: 13 29 57;         /* banda alterna */
  --line: 39 60 99;
  --violet-soft: 42 34 90;
  --violet-text: 186 160 255;   /* violeta legible sobre azul */
  --shadow-sm: 0 1px 2px rgb(0 0 0 / .25);
  --shadow: 0 6px 16px rgb(0 0 0 / .22), 0 18px 44px rgb(0 0 0 / .26);
  --shadow-lg: 0 10px 30px rgb(0 0 0 / .3), 0 34px 80px rgb(0 0 0 / .38);
  color-scheme: dark;
}

/* Islas claras: recuperan la paleta original. */
.hero__float, .feat__media, .form-card {
  --ink: 19 41 77;
  --paper: 248 249 251;
  --surface: 255 255 255;
  --line: 229 231 235;
  --violet-soft: 243 236 252;
  --violet-text: 124 58 237;
  --shadow-sm: 0 1px 2px rgb(19 41 77 / .06), 0 1px 3px rgb(19 41 77 / .04);
  --shadow: 0 4px 12px rgb(19 41 77 / .06), 0 12px 32px rgb(19 41 77 / .07);
  color: rgb(var(--ink));
  color-scheme: light;
}
.feat__media { border-color: rgb(255 255 255 / .1); }

/* Bandas: alternancia sutil y un resplandor como el del héroe. */
.band--white { background: rgb(var(--band-alt)); }
.band--line { border-top-color: rgb(255 255 255 / .06); }
.band:not(.dark):not(.wfm):not(.form-band) { position: relative; isolation: isolate; overflow: hidden; }
.band:not(.dark):not(.wfm):not(.form-band):not(.band--tight)::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: min(70vw, 900px);
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(40px);
  opacity: .55;
  background: radial-gradient(circle, rgb(var(--violet) / .34) 0%, transparent 62%);
  top: -30%;
  right: -22%;
}
.band--white:not(.band--tight)::after {
  background: radial-gradient(circle, rgb(var(--pink) / .22) 0%, transparent 62%);
  right: auto;
  left: -24%;
  top: auto;
  bottom: -34%;
}

/* Textos que eran violeta oscuro: ahora lavanda legible. */
.eyebrow { color: rgb(255 255 255 / .8); }
.ic, .checks svg, .chip svg, .step b, .store em, .role__who, .role__now svg,
.tb__f output, .faq summary:hover { color: rgb(var(--violet-text)); }
.law__ico { color: rgb(var(--violet-text)); }
.store svg { color: rgb(255 255 255 / .7); }

/* Botones que eran azules sobre claro. */
.btn--on-dark { --btn-fg: rgb(var(--ink-deep)); }
.vid__play svg { color: rgb(var(--ink-deep)); }

/* La barra, al quedarse fija, ya es azul: mismo tono que al bajar por el héroe. */
.nav.is-stuck { background: rgb(var(--ink-deep) / .86); box-shadow: 0 1px 0 rgb(255 255 255 / .08), 0 8px 28px rgb(0 0 0 / .18); }
.nav.is-stuck .nav__links a { color: rgb(255 255 255 / .8); }
.nav.is-stuck .nav__links a:hover { color: #fff; background: rgb(255 255 255 / .1); }
.mobile-menu { background: rgb(var(--ink-deep)); border-bottom-color: rgb(255 255 255 / .08); }
.mobile-menu a { border-bottom-color: rgb(255 255 255 / .08); }

/* Resultado de la calculadora de tiempo: un punto más profundo que su tarjeta. */
.tb__out { background: rgb(6 16 34); }

/* Al imprimir, vuelve el papel blanco. */
@media print {
  :root { --ink: 19 41 77; --paper: 255 255 255; --surface: 255 255 255; --line: 229 231 235; color-scheme: light; }
}

/* --- 40. El fichaje, visible en la primera pantalla ---------------------- */
/* Un punto de «fichada» sobre el turno planificado de Marta y una ficha
   compacta, estática, en la esquina contraria al globo de la IA: el mensaje
   es «el fichaje cae sobre un turno planificado», no «una app para fichar». */
.mk-live-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: #16A34A; position: relative; flex: none; margin-right: 6px; vertical-align: middle;
}
.mk-live-dot::after {
  content: ""; position: absolute; inset: -3px; border-radius: 50%;
  border: 2px solid #16A34A; animation: mk-ping 1.6s ease-out infinite;
}
#mk-gantt .mk-b-live { display: inline-flex; align-items: center; }
#mk-gantt .mk-b-live .mk-live-dot { background: #fff; margin-right: 5px; }
#mk-gantt .mk-b-live .mk-live-dot::after { border-color: #fff; }
.hero__float--ficha {
  right: auto; left: -14px; bottom: -26px;
  animation: none;
  max-width: 262px;
}
.hero__float--ficha b { display: flex; align-items: center; }
@media (prefers-reduced-motion: reduce) { .mk-live-dot::after { animation: none; } }

/* --- 41. Titular del héroe ------------------------------------------------
   «La gestión horaria de una multinacional, al precio de una pyme» (decisión
   del 23/09/2026): más largo que el anterior, va a tres líneas, del tamaño de
   la franja WFM, para que titular, texto y botones entren de un vistazo. */
.hero h1 { font-size: clamp(34px, 3.5vw, 49px); }
@media (max-width: 960px) { .hero h1 { font-size: clamp(32px, 8.2vw, 44px); } }

/* --- 42. Secciones directas: promesas, capacidades y credenciales --------- */
/* Misma regla que la portada: titular que afirma, dos frases y golpes cortos. */
.punch {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin: 0 auto clamp(40px, 5vw, 56px);
  max-width: 980px;
}
.punch li {
  list-style: none;
  font-family: var(--display);
  font-size: clamp(19px, 1.8vw, 23px);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.25;
  padding-top: 16px;
  border-top: 2px solid transparent;
  border-image: var(--grad) 1;
}
.punch { padding: 0; }
.mk-caption { text-align: center; margin-top: 18px; font-size: 14px; color: rgb(var(--ink) / .62); }

.ai-lines {
  list-style: none; margin: 0 0 22px; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 28px;
}
.ai-lines li {
  display: flex; gap: 12px; align-items: baseline;
  padding: 13px 0; border-bottom: 1px solid rgb(255 255 255 / .1);
  font-size: 16px; line-height: 1.4;
}
.ai-lines .spark { color: rgb(var(--violet-text)); flex: none; font-size: 15px; }
.ai-lines b { font-family: var(--display); font-weight: 600; white-space: nowrap; }
.ai-lines span { color: rgb(255 255 255 / .74); }
.ai-guard { text-align: center; font-size: 15.5px; color: rgb(255 255 255 / .72); margin: 0 auto clamp(36px, 4vw, 48px); max-width: 60ch; }

.creds {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px;
  max-width: 900px; margin: clamp(36px, 4.5vw, 52px) auto 0;
  text-align: center;
}
.creds b {
  display: block; font-family: var(--display); font-weight: 700;
  font-size: clamp(32px, 3.4vw, 44px); letter-spacing: -.03em; line-height: 1;
  background-image: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.creds span { display: block; margin-top: 10px; font-size: 14.5px; color: rgb(var(--ink) / .7); }
.spec .card h3 { font-size: 19px; }
.spec .card p { font-size: 15px; }

@media (max-width: 960px) { .punch { grid-template-columns: 1fr; gap: 16px; } .creds { gap: 18px; } }
@media (max-width: 620px) { .ai-lines { grid-template-columns: 1fr; } .creds { grid-template-columns: 1fr; } .ai-lines b { white-space: normal; } }

/* --- 43. Formularios: trampa para robots y «envíame el resultado» -------- */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.tb__send { border-top: 1px solid rgb(255 255 255 / .12); padding-top: 16px; display: grid; gap: 10px; }
.tb__send-t { font-size: 14.5px; color: rgb(255 255 255 / .86); font-weight: 600; margin: 0; }
.tb__send-row { display: flex; gap: 8px; flex-wrap: wrap; }
.tb__send-row input {
  flex: 1 1 200px; min-width: 0;
  padding: 11px 14px; border-radius: 999px;
  border: 1px solid rgb(255 255 255 / .2); background: rgb(255 255 255 / .06);
  color: #fff; font: inherit; font-size: 14.5px;
}
.tb__send-row input::placeholder { color: rgb(255 255 255 / .45); }
.tb__send-row input:focus { outline: none; border-color: rgb(var(--violet-text)); box-shadow: 0 0 0 3px rgb(var(--violet) / .3); }
.tb__send-ok { display: flex; gap: 8px; align-items: flex-start; font-size: 12.8px; color: rgb(255 255 255 / .62); line-height: 1.45; }
.tb__send-ok input { margin-top: 2px; }
.tb__send-ok a { color: rgb(var(--violet-text)); text-decoration: underline; }
.tb__send-msg { font-size: 13.5px; margin: 0; min-height: 1em; }
.tb__send-msg.ok { color: #7ee2b0; }
.tb__send-msg.err { color: #ff9fb3; }

/* --- 44. Páginas interiores y blog (24/09/2026) ------------------------- */
.page-hero { padding-bottom: clamp(56px, 7vw, 88px); }
.page-hero__in { position: relative; max-width: 900px; }
.page-hero h1 { max-width: 22ch; margin-top: 6px; }
.page-hero .hero__lead { max-width: 64ch; }
.page-hero__meta { font-family: var(--mono); font-size: 12.5px; letter-spacing: .06em; color: rgb(255 255 255 / .55); margin: 14px 0 26px; }
.crumbs { font-size: 13.5px; color: rgb(255 255 255 / .55); margin-bottom: 22px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.crumbs a { color: rgb(255 255 255 / .75); text-decoration: none; }
.crumbs a:hover { color: #fff; text-decoration: underline; }
.crumbs [aria-current] { color: rgb(255 255 255 / .9); }
.more-links { margin-top: 34px; font-size: 15.5px; display: flex; flex-wrap: wrap; gap: 8px 14px; }
.more-links a { color: rgb(var(--violet-text)); font-weight: 600; text-decoration: none; }
.more-links a:hover { text-decoration: underline; }
.band .sec-head + .feat, .band .feat + .sec-head, .band .grid + .sec-head, .band .feat__media + .grid { margin-top: clamp(40px, 5vw, 60px); }
.band .law { margin-top: clamp(36px, 4vw, 52px); margin-bottom: 0; }
.ai-lines--wide li { display: grid; grid-template-columns: 20px 1fr; gap: 4px 10px; align-items: baseline; }
.ai-lines--wide b { white-space: normal; }
.ai-lines--wide li > span:last-child { grid-column: 2; }

.prose { font-size: 17.5px; line-height: 1.72; }
.prose h2 { font-family: var(--display); font-size: clamp(24px, 2.6vw, 31px); letter-spacing: -.02em; line-height: 1.2; margin: 52px 0 14px; }
.prose h3 { font-family: var(--display); font-size: 19.5px; letter-spacing: -.01em; margin: 30px 0 8px; }
.prose p { margin: 0 0 16px; color: rgb(255 255 255 / .82); }
.prose ul { margin: 0 0 18px; padding-left: 22px; color: rgb(255 255 255 / .82); }
.prose li { margin-bottom: 8px; }
.prose strong { color: #fff; }
.prose a { color: rgb(var(--violet-text)); text-decoration: underline; text-underline-offset: 3px; }
.prose__lead { font-size: 20px; line-height: 1.6; color: #fff !important; }
.prose table { width: 100%; border-collapse: collapse; margin: 8px 0 22px; font-size: 15px; }
.prose th, .prose td { text-align: left; padding: 10px 12px; border-bottom: 1px solid rgb(255 255 255 / .12); }
.prose th { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: rgb(255 255 255 / .6); font-weight: 500; }
.prose__cta { margin: 48px 0 22px; padding: 26px 28px; border-radius: var(--r-lg); background: rgb(var(--surface)); border: 1px solid rgb(var(--line)); }
.prose__cta p { color: #fff; font-size: 17px; margin-bottom: 16px; }
.prose__cta .btn { text-decoration: none; }
.prose__note { font-size: 13.5px !important; color: rgb(255 255 255 / .5) !important; border-top: 1px solid rgb(255 255 255 / .1); padding-top: 16px; margin-top: 30px; }

.posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.post-card { display: flex; flex-direction: column; gap: 10px; padding: 28px 26px; border-radius: var(--r-lg); background: rgb(var(--surface)); border: 1px solid rgb(var(--line)); text-decoration: none; color: inherit; transition: transform .25s var(--ease), border-color .25s; }
.post-card:hover { transform: translateY(-3px); border-color: rgb(var(--violet) / .55); }
.post-card__k { font-family: var(--mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: rgb(var(--violet-text)); margin: 0; }
.post-card h2 { font-family: var(--display); font-size: 21px; line-height: 1.25; letter-spacing: -.015em; margin: 0; }
.post-card p { font-size: 15px; color: rgb(255 255 255 / .7); margin: 0; flex: 1; }
.post-card__go { font-weight: 600; font-size: 14.5px; color: rgb(var(--violet-text)); }

.plan-table { overflow-x: auto; border-radius: var(--r-lg); border: 1px solid rgb(var(--line)); background: rgb(var(--surface)); }
.plan-table table { width: 100%; border-collapse: collapse; min-width: 560px; }
.plan-table th, .plan-table td { padding: 13px 18px; border-bottom: 1px solid rgb(255 255 255 / .08); text-align: center; font-size: 15px; }
.plan-table tbody th { text-align: left; font-weight: 500; color: rgb(255 255 255 / .86); }
.plan-table thead th { font-family: var(--display); font-size: 16px; color: #fff; }
.plan-table thead th:first-child { text-align: left; font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: rgb(255 255 255 / .55); }
.plan-table .tick { color: #7ee2b0; font-weight: 700; }
.plan-table .dash { color: rgb(255 255 255 / .3); }
.plan-table tr:last-child th, .plan-table tr:last-child td { border-bottom: 0; }

@media (max-width: 960px) { .posts { grid-template-columns: 1fr; max-width: 620px; } }
@media (max-width: 620px) { .prose { font-size: 16.5px; } .prose__lead { font-size: 18px; } }