/* ==========================================================================
   Base + componentes compartidos
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.55;
  font-feature-settings: "cv11", "ss03";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img, video, svg { display: block; max-width: 100%; }
img, video { height: auto; }
h1, h2, h3, h4, p, figure, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
::selection { background: var(--accent); color: var(--accent-ink); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: var(--r-s); background: var(--accent); color: var(--accent-ink); font-weight: 600; transition: top 0.2s; }
.skip-link:focus { top: 12px; }

/* ------------------------------------------------------------------ iconos (los SVG reales de la app, teñidos con currentColor) */
.ico {
  display: inline-block;
  flex: 0 0 auto;
  width: 1.25em;
  height: 1.25em;
  background-color: currentColor;
  -webkit-mask: var(--i) center / contain no-repeat;
  mask: var(--i) center / contain no-repeat;
}

/* ------------------------------------------------------------------ tipografía */
.display {
  font-weight: 600;
  letter-spacing: -0.042em;
  line-height: 1.02;
  text-wrap: balance;
}
.h2 {
  font-size: clamp(2rem, 4.6vw, 3.4rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.06;
  text-wrap: balance;
}
.h3 {
  font-size: clamp(1.45rem, 2.4vw, 2rem);
  font-weight: 600;
  letter-spacing: -0.028em;
  line-height: 1.14;
  text-wrap: balance;
}
.lede { font-size: clamp(1.05rem, 1.5vw, 1.2rem); color: var(--text-2); line-height: 1.55; text-wrap: pretty; }
.muted { color: var(--text-3); }
.label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 17.8px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--text);
}
.label .ico { width: 1.15em; height: 1.15em; color: var(--text); }

/* ------------------------------------------------------------------ botones y chips */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 50px;
  padding: 0 26px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 0.97rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease), color 0.25s var(--ease), transform 0.25s var(--ease);
}
/* Botones con degradado animado en hover (réplica del comportamiento de los de agentlyy.framer.ai):
   el fondo es un degradado casi vertical (1deg) que en reposo es plano y en hover deja subir un tono más claro desde el borde
   inferior (tope 0% → 38%) con un punto más de saturación. Las paradas se animan con propiedades registradas (@property). */
@property --btn-c { syntax: "<color>"; inherits: false; initial-value: #268cff; }
@property --btn-p { syntax: "<percentage>"; inherits: false; initial-value: 50%; }
.btn--primary {
  --btn-c: var(--accent); --btn-p: 50%;
  background: var(--accent);
  background-image: linear-gradient(1deg, var(--btn-c) 0%, var(--accent) var(--btn-p), var(--accent) 100%);
  color: var(--accent-ink);
  transition: --btn-c 0.55s var(--ease), --btn-p 0.55s var(--ease), filter 0.55s var(--ease), transform 0.3s var(--ease);
}
.btn--primary:hover { --btn-c: var(--btn-glow); --btn-p: 38%; filter: saturate(1.2); }
.btn--primary:active { transform: scale(0.98); }
.btn--ghost {
  --btn-c: transparent; --btn-p: 40%;
  border-color: var(--line-strong); color: var(--text);
  background-image: linear-gradient(1deg, var(--btn-c) 0%, transparent var(--btn-p), transparent 100%);
  transition: --btn-c 0.55s var(--ease), --btn-p 0.55s var(--ease), border-color 0.4s var(--ease), transform 0.3s var(--ease);
}
.btn--ghost:hover { --btn-c: var(--btn-ghost-glow); --btn-p: 100%; border-color: var(--accent); }
.btn--ghost:active { transform: scale(0.98); }
.btn--sm { height: 44px; padding: 0 20px; font-size: 0.92rem; }
.btn .arrow { width: 1.1em; height: 1.1em; transition: transform 0.3s var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 34px;
  padding: 0 14px 0 4px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text);
  background: var(--surface);
  transition: border-color 0.25s var(--ease), background-color 0.25s var(--ease);
}
a.pill:hover { border-color: var(--accent); }
.pill__tag { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-size: 0.75rem; font-weight: 600; }
.pill--plain { padding: 0 14px; }
.pill--plain .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }

.chip {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 10px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-2);
  background: var(--surface-2);
}
.chip--mono { font-family: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace; font-size: 0.74rem; color: var(--accent-light); }
.badge-vip { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px; background: #f97316; color: #fff; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.04em; }

/* ------------------------------------------------------------------ anchos variables (como las páginas de RW Titler: nada va "encajonado")
   .wrap--narrow 880 · .wrap (contenido) 1200 · .wrap--wide 1400 · .wrap--max 1720 · .bleed = a sangre de pantalla */
:root { --w-narrow: 880px; --w-content: 1200px; --w-wide: 1400px; --w-max: 1720px; }
.wrap {
  --w: var(--w-content);
  --bleed: calc((100vw - min(100vw, var(--w))) / 2 + var(--gutter));   /* distancia del borde del contenido al borde de la pantalla */
  width: 100%; max-width: var(--w); margin-inline: auto; padding-inline: var(--gutter);
}
.wrap--narrow { --w: var(--w-narrow); }
.wrap--wide { --w: var(--w-wide); }
.wrap--max { --w: var(--w-max); }
.bleed { width: 100vw; margin-left: calc(50% - 50vw); }
.section { padding-block: var(--section-y); border-top: 1px solid var(--line); }
.section--band { background: var(--surface); border-bottom: 1px solid var(--line); }
.section-head { display: grid; gap: 22px; max-width: 760px; }
.section-head--center { margin-inline: auto; justify-items: center; text-align: center; }

/* ------------------------------------------------------------------ ventana tipo Mac */
.win {
  position: relative;
  border: 0;
  border-radius: var(--r-m);
  overflow: hidden;
  background: var(--surface);
  box-shadow: rgb(0 0 0 / 43%) 0px 7px 79px 0px;
  transition: translate 0.6s var(--ease);
}
.win__bar { position: relative; display: flex; align-items: center; height: 36px; padding-inline: 14px; background: var(--win-bar); }
.win__dots { display: flex; gap: 7px; }
.win__dots i { width: 11px; height: 11px; border-radius: 50%; }
.win__dots i:nth-child(1) { background: #ff5f57; }
.win__dots i:nth-child(2) { background: #febc2e; }
.win__dots i:nth-child(3) { background: #28c840; }
.win__title { position: absolute; left: 50%; transform: translateX(-50%); font-size: 0.75rem; font-weight: 500; color: var(--win-title); white-space: nowrap; }
.win__body { background: #090e16; }
.win__body img, .win__body video { width: 100%; height: auto; }
.win--bare .win__bar { display: none; }
.win--bleed-r { margin-right: calc(var(--bleed) * -1); border-radius: var(--r-m) 0 0 var(--r-m); }
.win--bleed-l { margin-left: calc(var(--bleed) * -1); border-radius: 0 var(--r-m) var(--r-m) 0; }
@media (hover: hover) { .win--lift:hover { translate: 0 -4px; } }

/* ------------------------------------------------------------------ revelado al hacer scroll */
.js .reveal { opacity: 0; transform: translateY(26px); }
.js [data-hero] { opacity: 0; }
.word { display: inline-block; white-space: pre; }
.js .split .word { opacity: 0.22; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  .js .reveal, .js .split .word, .js [data-hero] { opacity: 1; transform: none; }
}

/* píxel de estadísticas de Jetpack (se inserta al final del body): no debe verse */
#wpstats { display: none !important; }