/* ==========================================================================
   Webportal Design System v2 — Base + Componentes ("Oscuro premium")
   Requiere design/tokens.css cargado antes.
   Nombres: .c-* componente · .l-* layout · .u-* utilidad · --modificador
   Índice:
     1. Base            7. Tarjetas y spotlight     13. Proceso
     2. Tipografía      8. Feature cards            14. Precios
     3. Layout          9. Mini-UIs (ventanas)      15. FAQ
     4. Botones        10. Marquesina               16. Formularios
     5. Pills/chips    11. Statement                17. Footer
     6. Navegación     12. Checklist                18. Movimiento
                                                    19. Composiciones
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + var(--space-4));
  interpolate-size: allow-keywords;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg-2);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  letter-spacing: -0.006em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

/* Grano fino sobre el fondo (solo se ve en zonas vacías) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.05;
  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='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img, svg, video, canvas { display: block; max-width: 100%; }
img, video { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
a, button, summary { -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; } /* que ningún display de componente lo anule */
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
::selection { background: rgba(124, 92, 255, 0.45); color: #fff; }

.u-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;
}
.u-skip {
  position: fixed; top: var(--space-3); left: var(--space-3); z-index: var(--z-overlay);
  padding: var(--space-2) var(--space-4); border-radius: var(--radius-pill);
  background: var(--fg); color: var(--bg); font-size: var(--text-sm); font-weight: 500;
  transform: translateY(-200%); transition: transform var(--dur-base) var(--ease-out);
}
.u-skip:focus-visible { transform: none; }

/* ==========================================================================
   2. Tipografía
   ========================================================================== */
h1, h2, h3, h4 {
  margin: 0;
  color: var(--fg);
  font-weight: 500;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  text-wrap: balance;
}
h1 { font-size: var(--text-display); line-height: var(--leading-display); letter-spacing: var(--tracking-display); }
h2 { font-size: var(--text-3xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); }
h3 { font-size: var(--text-lg); letter-spacing: -0.02em; }
p  { margin: 0; text-wrap: pretty; }
strong, b { color: var(--fg); font-weight: 500; }
code { font-family: var(--font-mono); font-size: 0.9em; color: var(--violet-300); }

/* Palabra destacada: serif cursiva (DM Serif Display) con degradado de marca.
   Máx. una por titular. Gruesa y compacta: casi al mismo cuerpo que Geist. */
.c-accent {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.02em;
  letter-spacing: -0.01em;
  background: var(--gradient-accent);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  /* evita que el degradado recorte la inclinación de la cursiva */
  padding-inline: 0.02em 0.12em;
  margin-inline: -0.02em -0.12em;
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
}
.c-accent--solid { background: none; color: var(--violet-400); }

/* Titular a dos tonos: primera frase blanca, segunda en gris */
.c-muted { color: var(--fg-3); }

/* Texto de entrada bajo titulares */
.c-lead { font-size: var(--text-md); line-height: 1.6; color: var(--fg-2); max-width: 36em; }
.c-lead strong { font-weight: 500; }

/* Subrayado de énfasis */
.c-underline {
  color: var(--fg);
  text-decoration: underline;
  text-decoration-color: var(--violet-500);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.28em;
}

/* Etiqueta técnica en mono (con moderación: datos, numeración, metadatos reales) */
.c-label {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: 500;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--fg-3);
}

/* Cabecera de sección: titular + lead (sin eyebrow) */
.c-head { display: grid; gap: var(--space-5); max-width: 780px; margin-bottom: clamp(2.5rem, 2rem + 2vw, 4rem); }
.c-head--center { margin-inline: auto; text-align: center; justify-items: center; }

/* ==========================================================================
   3. Layout
   ========================================================================== */
.l-container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.l-container--narrow { max-width: var(--container-narrow); }
.l-section { position: relative; padding-block: var(--section-y); }
.l-section--tight { padding-block: calc(var(--section-y) * 0.6); }
.l-stack > * + * { margin-top: var(--stack-gap, var(--space-4)); }
.l-grid { display: grid; gap: var(--grid-gap, var(--space-5)); }
.l-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.l-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.l-grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }

/* Fondo de puntos con desvanecido radial (decoración de secciones clave) */
.u-dots {
  background-image: radial-gradient(rgba(255, 255, 255, 0.085) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(60% 60% at 50% 40%, #000 0%, transparent 75%);
          mask-image: radial-gradient(60% 60% at 50% 40%, #000 0%, transparent 75%);
}

/* ==========================================================================
   4. Botones
   ========================================================================== */
.c-btn {
  --btn-bg: var(--fg);
  --btn-fg: var(--bg);
  --btn-ring: transparent;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: 44px;
  padding: 0 var(--space-5);
  border: 0;
  border-radius: var(--radius-pill);
  background-color: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.01em;
  white-space: nowrap;
  box-shadow: inset 0 0 0 1px var(--btn-ring);
  transition:
    background-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.c-btn svg { width: 16px; height: 16px; flex: none; transition: transform var(--dur-base) var(--ease-out); }
.c-btn:active { transform: scale(0.97); }
.c-btn[disabled], .c-btn[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }
@media (hover: hover) and (pointer: fine) {
  .c-btn:hover svg { transform: translateX(3px); }
}

/* Primario: violeta con brillo superior y destello al pasar */
.c-btn--primary {
  --btn-bg: var(--color-primary);
  --btn-fg: #fff;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 55%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 8px 24px -10px rgba(124, 92, 255, 0.9);
}
.c-btn--primary::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.32) 50%, transparent 70%);
  transform: translateX(-110%);
}
@media (hover: hover) and (pointer: fine) {
  .c-btn--primary:hover {
    --btn-bg: var(--color-primary-hover);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.3),
      inset 0 0 0 1px rgba(255, 255, 255, 0.1),
      0 10px 34px -8px rgba(124, 92, 255, 1);
  }
  .c-btn--primary:hover::after { transform: translateX(110%); transition: transform 0.8s var(--ease-out); }
}

/* Claro: máximo contraste, para el CTA único de una sección oscura */
.c-btn--light { --btn-bg: var(--fg); --btn-fg: var(--bg); }
@media (hover: hover) and (pointer: fine) { .c-btn--light:hover { --btn-bg: #fff; } }

/* Ghost: secundario */
.c-btn--ghost { --btn-bg: rgba(255, 255, 255, 0.03); --btn-fg: var(--fg); --btn-ring: var(--line-strong); }
@media (hover: hover) and (pointer: fine) { .c-btn--ghost:hover { --btn-bg: rgba(255, 255, 255, 0.07); --btn-ring: var(--line-bright); } }

.c-btn--sm { height: 36px; padding: 0 var(--space-4); font-size: 0.8125rem; }
.c-btn--lg { height: 52px; padding: 0 var(--space-6); font-size: 0.9375rem; }
.c-btn--block { width: 100%; }

/* Enlace con flecha */
.c-link {
  display: inline-flex; align-items: center; gap: var(--space-2);
  color: var(--fg); font-size: var(--text-sm); font-weight: 500;
}
.c-link svg { width: 14px; height: 14px; transition: transform var(--dur-base) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .c-link:hover svg { transform: translateX(3px); } }

/* ==========================================================================
   5. Pills, chips y badges
   ========================================================================== */
/* Pill de anuncio (sobre el h1) */
.c-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 34px;
  padding: 4px var(--space-3) 4px 4px; /* crece si el texto pasa a dos líneas en móvil */
  border-radius: var(--radius-pill);
  line-height: 1.3;
  background: rgba(255, 255, 255, 0.035);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  color: var(--fg-2);
  font-size: 0.8125rem;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.c-pill:active { transform: scale(0.97); }
.c-pill__tag {
  display: inline-flex; align-items: center;
  height: 26px; padding: 0 var(--space-3);
  border-radius: var(--radius-pill);
  background: rgba(124, 92, 255, 0.2);
  color: var(--violet-200);
  font-weight: 500; font-size: var(--text-xs);
}
.c-pill svg { width: 14px; height: 14px; transition: transform var(--dur-base) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .c-pill:hover { background: rgba(255, 255, 255, 0.07); color: var(--fg); }
  .c-pill:hover svg { transform: translateX(3px); }
}

/* Chip (fila de categorías, filtros, tabs) */
.c-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: 34px;
  padding: 0 var(--space-4);
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--fg-2);
  font-size: var(--text-sm);
  white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.c-chip:active { transform: scale(0.97); }
.c-chip svg { width: 15px; height: 15px; opacity: 0.8; }
@media (hover: hover) and (pointer: fine) { .c-chip:hover { background: rgba(255, 255, 255, 0.05); color: var(--fg); } }
.c-chip.is-active, .c-chip[aria-selected="true"], .c-chip[aria-pressed="true"] {
  background: var(--surface-3);
  color: var(--fg);
  box-shadow: inset 0 0 0 1px var(--line-strong), var(--highlight);
}

/* Badge de estado */
.c-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 10px;
  border-radius: var(--radius-pill);
  background: rgba(124, 92, 255, 0.16);
  color: var(--violet-300);
  font-size: var(--text-xs);
  font-weight: 500;
  white-space: nowrap;
}
.c-badge--peach   { background: rgba(255, 155, 120, 0.14); color: var(--peach-300); }
.c-badge--success { background: rgba(63, 217, 154, 0.12); color: var(--success); }
.c-badge--neutral { background: rgba(255, 255, 255, 0.06); color: var(--fg-2); box-shadow: inset 0 0 0 1px var(--line); }
.c-badge--dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }

/* ==========================================================================
   6. Navegación
   ========================================================================== */
.c-nav {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  height: var(--nav-h);
  display: flex;
  align-items: center;
  transition: background-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.c-nav.is-scrolled, .c-nav.is-open {
  background: rgba(8, 7, 11, 0.72);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
          backdrop-filter: blur(16px) saturate(150%);
  box-shadow: 0 1px 0 var(--line);
}
.c-nav__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); }
.c-nav__links { display: flex; align-items: center; gap: var(--space-1); list-style: none; margin: 0; padding: 0; }
.c-nav__link {
  display: inline-flex; align-items: center;
  height: 34px; padding: 0 var(--space-3);
  border-radius: var(--radius-pill);
  color: var(--fg-2);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .c-nav__link:hover { color: var(--fg); } }
.c-nav__link[aria-current="page"], .c-nav__link.is-current { color: var(--fg); }
.c-nav__actions { display: flex; align-items: center; gap: var(--space-2); }
.c-nav__actions .c-btn { font-size: var(--text-sm); } /* a la par con los enlaces del nav */
.c-nav__toggle {
  display: none;
  width: 40px; height: 40px;
  place-items: center;
  border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  transition: transform var(--dur-fast) var(--ease-out);
}
.c-nav__toggle:active { transform: scale(0.94); }
/* Los dos iconos apilados: se cruzan con escala + desenfoque, no se intercambian de golpe */
.c-nav__toggle svg {
  grid-area: 1 / 1; width: 18px; height: 18px;
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), filter var(--dur-fast) var(--ease-out);
}
.c-nav__toggle .i-close,
.c-nav.is-open .c-nav__toggle .i-open { opacity: 0; transform: scale(0.8); filter: blur(2px); }
.c-nav.is-open .c-nav__toggle .i-close { opacity: 1; transform: none; filter: none; }
.c-nav__mobile-cta { display: none; }

@media (max-width: 900px) {
  .c-nav__toggle { display: grid; }
  .c-nav__actions .c-btn { display: none; }
  .c-nav__links {
    position: absolute;
    top: calc(100% + var(--space-2));
    left: var(--gutter);
    right: var(--gutter);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--space-2);
    border-radius: var(--radius-lg);
    background: rgba(17, 16, 23, 0.98);
    box-shadow: inset 0 0 0 1px var(--line-strong), var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px) scale(0.98);
    transform-origin: top right; /* crece desde el botón que lo abre */
    transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), visibility var(--dur-base);
  }
  .c-nav.is-open .c-nav__links { opacity: 1; visibility: visible; transform: none; }
  .c-nav__link { height: 48px; padding: 0 var(--space-4); font-size: var(--text-base); color: var(--fg); }
  .c-nav__mobile-cta { display: block; padding: var(--space-2); }
}

/* Logo oficial de Flerum (brand/logo-final, versión principal): símbolo en
   violeta de marca y wordmark en --fg. Los trazados viven una sola vez, en el
   logo de la nav (#flerum-simbolo, #flerum-wordmark); el footer los reutiliza
   con <use>. Se escala por la altura. */
.c-logo {
  display: inline-flex; align-items: center;
  color: var(--fg);
}
.c-logo svg { width: auto; height: 22px; overflow: visible; }
.c-logo__symbol { fill: var(--violet-400); }
.c-footer .c-logo { color: var(--fg); }

/* ==========================================================================
   7. Tarjetas y spotlight
   ========================================================================== */
.c-card {
  position: relative;
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.008) 100%), var(--surface-1);
  box-shadow: inset 0 0 0 1px var(--line), var(--highlight);
}
.c-card--pad { padding: clamp(1.5rem, 1.2rem + 1vw, 2rem); }

/* Luz que sigue al cursor (requiere main.js). Añadir a cualquier tarjeta. */
.c-spotlight { --mx: 50%; --my: 0%; }
.c-spotlight::before,
.c-spotlight::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}
.c-spotlight::before {
  background: radial-gradient(480px circle at var(--mx) var(--my), rgba(164, 139, 255, 0.09), transparent 45%);
}
.c-spotlight::after {
  padding: 1px;
  background: radial-gradient(280px circle at var(--mx) var(--my), rgba(194, 180, 255, 0.6), transparent 55%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}
@media (hover: hover) and (pointer: fine) {
  .c-spotlight:hover::before,
  .c-spotlight:hover::after { opacity: 1; }
}

/* ==========================================================================
   8. Feature cards (tarjeta de color con mini-UI arriba y texto abajo)
   ========================================================================== */
.c-feature {
  --feature-bg: var(--card-web);
  --feature-fg: #fff;
  --feature-fg-2: rgba(255, 255, 255, 0.78);
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  background: var(--feature-bg);
  color: var(--feature-fg-2);
  overflow: hidden;
  isolation: isolate;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.c-feature::before {
  /* luz cenital suave */
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(90% 60% at 30% 0%, rgba(255, 255, 255, 0.18), transparent 60%);
}
.c-feature--seo { --feature-bg: var(--card-seo); }
.c-feature--ppc { --feature-bg: var(--card-ppc); --feature-fg: #16131f; --feature-fg-2: #4d4759; }
.c-feature--ppc::before { background: radial-gradient(90% 60% at 30% 0%, rgba(255, 255, 255, 0.7), transparent 60%); }

.c-feature__media {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 5 / 4;
  padding: var(--space-6) var(--space-6) 0;
}
.c-feature__media > .c-window { width: 100%; transition: transform var(--dur-base) var(--ease-out); }
.c-feature__body { display: grid; gap: var(--space-2); padding: var(--space-6); margin-top: auto; }
.c-feature__title {
  display: flex; align-items: center; gap: var(--space-3);
  color: var(--feature-fg); font-size: var(--text-lg); letter-spacing: -0.02em;
}
.c-feature__title svg { width: 22px; height: 22px; flex: none; }
.c-feature__body p { font-size: 0.9375rem; line-height: 1.55; }
.c-feature__meta {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  margin-top: var(--space-3); padding-top: var(--space-4);
  border-top: 1px solid color-mix(in srgb, var(--feature-fg) 16%, transparent);
  color: var(--feature-fg); font-size: var(--text-sm);
}
/* Precio y enlace no se parten: si no caben juntos, el enlace baja entero */
.c-feature__meta { flex-wrap: wrap; row-gap: var(--space-2); }
.c-feature__meta > * { white-space: nowrap; }
.c-feature__meta strong { color: var(--feature-fg); font-weight: 600; }
.c-feature .c-link { color: var(--feature-fg); }
/* Tarjeta enlazable: el ::after del enlace cubre toda la tarjeta */
.c-feature__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.c-feature__link:focus-visible { outline: none; }
.c-feature:has(.c-feature__link:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.c-feature:has(.c-feature__link:active) { transform: scale(0.985); transition-duration: var(--dur-fast); }
@media (hover: hover) and (pointer: fine) {
  .c-feature:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.22), var(--shadow-lg); }
  .c-feature:hover .c-feature__media > .c-window { transform: translateY(-4px) scale(1.015); }
  .c-feature:hover .c-feature__link svg { transform: translateX(3px); }
  .c-feature:has(.c-feature__link:active) { transform: translateY(-4px) scale(0.985); }
}

/* ==========================================================================
   9. Mini-UIs — ilustraciones de producto hechas en HTML (decorativas:
      marcar el contenedor con aria-hidden="true"). Se animan cuando un
      ancestro recibe .is-visible (data-reveal).
   ========================================================================== */
.c-window {
  --win-bg: rgba(16, 15, 22, 0.94);
  --win-fg: var(--fg-2);
  --win-strong: var(--fg);
  --win-line: var(--line);
  --win-skel: rgba(255, 255, 255, 0.08);
  position: relative;
  container-type: inline-size;
  border-radius: var(--radius-md);
  background: var(--win-bg);
  color: var(--win-fg);
  font-size: 12px;
  line-height: 1.4;
  text-align: left;
  box-shadow: inset 0 0 0 1px var(--line-strong), 0 30px 60px -24px rgba(0, 0, 0, 0.75);
}
.c-window--light {
  --win-bg: rgba(255, 255, 255, 0.97);
  --win-fg: #6a6478;
  --win-strong: #17141f;
  --win-line: rgba(23, 20, 31, 0.08);
  --win-skel: rgba(23, 20, 31, 0.07);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7), 0 30px 60px -24px rgba(30, 8, 0, 0.55);
}
.c-window__bar {
  display: flex; align-items: center; gap: var(--space-3);
  height: 34px; padding: 0 var(--space-3);
  border-bottom: 1px solid var(--win-line);
}
.c-window__dots { display: flex; gap: 5px; }
.c-window__dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--win-skel); }
.c-window__url {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
  height: 20px; margin-right: 24px; border-radius: 6px;
  background: var(--win-skel);
  font-family: var(--font-mono); font-size: 10.5px; color: var(--win-fg);
}
.c-window__url svg { width: 10px; height: 10px; }
.c-window__body { padding: var(--space-4); }
.c-window__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
.c-window__head strong { color: var(--win-strong); font-size: 13px; font-weight: 500; }
.c-skel { display: block; height: 7px; border-radius: 4px; background: var(--win-skel); }

/* Elementos que "se construyen" al aparecer */
.c-build {
  opacity: 0;
  transform: translateY(8px) scale(0.97);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
  transition-delay: calc(var(--d, 0) * 90ms + 200ms);
}
.is-visible .c-build { opacity: 1; transform: none; }

/* --- Mini web (diseño web) --- */
.c-sitemock { display: grid; gap: 12px; }
.c-sitemock__nav { display: flex; align-items: center; gap: 8px; }
.c-sitemock__logo { width: 18px; height: 18px; border-radius: 6px; background: var(--gradient-primary); }
.c-sitemock__nav .c-skel { width: 28px; height: 5px; }
.c-sitemock__nav .c-skel:first-of-type { margin-left: auto; }
.c-sitemock__navbtn { width: 46px; height: 16px; border-radius: 99px; background: var(--win-strong); opacity: 0.9; }
.c-sitemock__hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: 12px; align-items: center; }
.c-sitemock__hero .copy { display: grid; gap: 7px; }
.c-sitemock__h { height: 11px; border-radius: 4px; background: var(--win-strong); opacity: 0.88; }
.c-sitemock__cta { width: 62px; height: 18px; margin-top: 4px; border-radius: 99px; background: var(--color-primary); box-shadow: 0 6px 16px -6px rgba(124, 92, 255, 0.9); }
.c-sitemock__img {
  aspect-ratio: 4 / 3; border-radius: 10px;
  background:
    radial-gradient(60% 60% at 70% 30%, rgba(255, 185, 156, 0.9), transparent 60%),
    radial-gradient(70% 70% at 20% 80%, rgba(124, 92, 255, 0.95), transparent 70%),
    #2a1d63;
}
.c-sitemock__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.c-sitemock__cards > div { display: grid; gap: 6px; padding: 8px; border-radius: 8px; background: var(--win-skel); }
.c-sitemock__cards i { display: block; width: 14px; height: 14px; border-radius: 5px; background: var(--violet-400); opacity: 0.85; }
.c-vital-chip {
  position: absolute; right: 12px; bottom: 16px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: 12px;
  background: rgba(20, 18, 28, 0.94);
  box-shadow: inset 0 0 0 1px var(--line-strong), 0 16px 32px -12px rgba(0, 0, 0, 0.8);
  color: var(--fg-2); font-size: 11.5px; white-space: nowrap;
}
.c-vital-chip b { font-family: var(--font-mono); font-weight: 500; color: var(--fg); }
.c-vital-chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--success); box-shadow: 0 0 10px var(--success); }
.c-cursor {
  position: absolute; width: 18px; height: 18px; left: 22%; top: 56%;
  color: #fff; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
  opacity: 0;
}
.is-visible .c-cursor { animation: cursor-click 2.2s var(--ease-in-out) 1.2s forwards; }
@keyframes cursor-click {
  0%   { opacity: 0; transform: translate(60px, 50px); }
  20%  { opacity: 1; }
  70%  { opacity: 1; transform: translate(0, 0); }
  80%  { transform: translate(0, 0) scale(0.82); }
  90%, 100% { opacity: 1; transform: translate(0, 0) scale(1); }
}

/* --- Resultados de búsqueda (SEO) --- */
.c-serp { --pitch: 50px; }
.c-serp__search {
  display: flex; align-items: center; gap: 8px;
  height: 34px; padding: 0 12px; margin-bottom: 12px;
  border-radius: 99px; background: var(--win-skel);
  color: var(--win-strong); font-size: 12px;
}
.c-serp__search svg { width: 13px; height: 13px; color: var(--win-fg); }
.c-serp__list { position: relative; height: calc(var(--pitch) * 4 - 8px); margin: 0; padding: 0; list-style: none; }
.c-serp__row {
  position: absolute; inset: 0 0 auto 0;
  display: flex; align-items: center; gap: 10px;
  height: calc(var(--pitch) - 8px); padding: 0 10px;
  border-radius: 10px;
  transform: translateY(calc(var(--from) * var(--pitch)));
  transition: transform 1.1s var(--ease-out) 0.8s;
}
.is-visible .c-serp__row { transform: translateY(calc(var(--to) * var(--pitch))); }
.c-serp__fav { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--win-skel); }
.c-serp__lines { flex: 1; display: grid; gap: 6px; }
.c-serp__lines .c-skel:first-child { width: 72%; height: 8px; }
.c-serp__lines .c-skel:last-child { width: 46%; height: 6px; }
.c-serp__row--you { background: rgba(124, 92, 255, 0.08); box-shadow: inset 0 0 0 1px rgba(124, 92, 255, 0.25); z-index: 1; }
.c-serp__row--you .c-serp__fav { display: grid; place-items: center; background: var(--gradient-primary); color: #fff; font-size: 11px; font-weight: 600; }
.c-serp__you { flex: 1; min-width: 0; display: grid; gap: 1px; }
.c-serp__you b { color: var(--violet-600); font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-serp__you small { color: var(--win-fg); font-size: 10.5px; font-family: var(--font-mono); }
.c-serp__rank {
  position: relative; flex: none; display: grid; place-items: center;
  width: 30px; height: 22px; border-radius: 99px;
  background: var(--color-primary); color: #fff;
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  overflow: hidden;
}
.c-serp__rank span { grid-area: 1 / 1; transition: opacity 0.4s, transform 0.4s var(--ease-out); transition-delay: 1.4s; }
.c-serp__rank span:last-child { opacity: 0; transform: translateY(8px); }
.is-visible .c-serp__rank span:first-child { opacity: 0; transform: translateY(-8px); }
.is-visible .c-serp__rank span:last-child { opacity: 1; transform: none; }

/* --- Panel de campañas (PPC) --- */
.c-ads__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 14px; }
.c-ads__head strong { font-size: 12.5px; font-weight: 500; }
.c-ads__kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.c-ads__kpis div { display: grid; gap: 2px; padding: 8px 10px; border-radius: 10px; background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1px var(--line); }
.c-ads__kpis small { font-size: 10.5px; color: var(--fg-3); }
.c-ads__kpis b { font-family: var(--font-mono); font-size: 13px; font-weight: 500; color: var(--fg); }
.c-ads__chart { display: flex; align-items: flex-end; gap: 5px; height: 84px; padding-top: 6px; border-bottom: 1px solid var(--line); }
.c-ads__chart i {
  flex: 1; height: var(--h); border-radius: 4px 4px 1px 1px;
  background: linear-gradient(180deg, var(--blue-400), rgba(124, 92, 255, 0.45));
  transform: scaleY(0); transform-origin: bottom;
  transition: transform 0.8s var(--ease-out);
  transition-delay: calc(var(--i) * 45ms + 300ms);
}
.c-ads__chart i:last-child { background: linear-gradient(180deg, var(--peach-300), rgba(255, 155, 120, 0.45)); }
.is-visible .c-ads__chart i { transform: none; }

/* --- Rendimiento (anillo + Core Web Vitals) --- */
@property --ring { syntax: "<number>"; inherits: false; initial-value: 0; }
.c-vitals { display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: center; }
.c-ring {
  --ring: 0;
  position: relative; width: 112px; aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center;
  background:
    radial-gradient(closest-side, var(--surface-2) 82%, transparent 83%),
    conic-gradient(var(--success) calc(var(--ring) * 1%), rgba(255, 255, 255, 0.07) 0);
  transition: --ring 1.6s var(--ease-out) 0.3s;
}
.is-visible .c-ring { --ring: 96; }
.c-ring b { font-family: var(--font-mono); font-size: 28px; font-weight: 500; color: var(--fg); letter-spacing: -0.04em; }
.c-ring small { position: absolute; bottom: 26px; font-size: 9.5px; color: var(--fg-3); }
.c-vitals__list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.c-vitals__list li { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: center; font-size: 12px; }
.c-vitals__list b { font-family: var(--font-mono); font-weight: 500; color: var(--fg); font-size: 12px; }
.c-vitals__list .bar { grid-column: 1 / -1; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, 0.06); overflow: hidden; }
.c-vitals__list .bar::after {
  content: ""; display: block; height: 100%; width: var(--w); border-radius: inherit; background: var(--success);
  transform: scaleX(0); transform-origin: left; transition: transform 1s var(--ease-out) calc(var(--i) * 120ms + 400ms);
}
.is-visible .c-vitals__list .bar::after { transform: none; }

/* --- Informe (barras horizontales) --- */
.c-report { display: grid; gap: 14px; }
.c-report__row { display: grid; grid-template-columns: 88px 1fr 40px; gap: 12px; align-items: center; font-size: 12px; }
.c-report__row b { font-family: var(--font-mono); font-weight: 500; color: var(--fg); text-align: right; }
.c-report__bar { height: 10px; border-radius: 4px; background: rgba(255, 255, 255, 0.05); overflow: hidden; }
.c-report__bar::after {
  content: ""; display: block; height: 100%; width: var(--w); border-radius: inherit;
  background: var(--c, var(--violet-400));
  transform: scaleX(0); transform-origin: left; transition: transform 1s var(--ease-out) calc(var(--i) * 110ms + 300ms);
}
.is-visible .c-report__bar::after { transform: none; }

/* --- Interruptor (decorativo) --- */
.c-switch { position: relative; flex: none; width: 38px; height: 22px; border-radius: 99px; background: rgba(255, 255, 255, 0.12); transition: background-color 0.4s var(--ease-out) 0.7s; }
.c-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); transition: transform 0.4s var(--ease-out) 0.7s; }
.is-visible .c-switch { background: var(--color-primary); }
.is-visible .c-switch::after { transform: translateX(16px); }

/* --- Filas de ajustes / propiedad --- */
.c-rows { display: grid; margin: 0; padding: 0; list-style: none; }
.c-rows li { display: flex; align-items: center; gap: 12px; min-height: 48px; border-top: 1px solid var(--line); font-size: 12.5px; }
.c-rows li:first-child { border-top: 0; }
.c-rows .k { flex: 1; min-width: 0; color: var(--fg); }
.c-rows .v { margin-left: auto; font-family: var(--font-mono); font-size: 11.5px; color: var(--fg-3); }
.c-rows__icon { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 8px; background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 1px var(--line); color: var(--fg-2); }
.c-rows__icon svg { width: 14px; height: 14px; }
.c-rows__icon--num { font-family: var(--font-mono); font-size: 10.5px; color: var(--fg-3); }

/* --- Botones de mini-UI (decorativos: aprobar un cambio, etc.) --- */
.c-minibtns { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.c-minibtns span { display: inline-flex; align-items: center; height: 26px; padding: 0 12px; border-radius: 99px; background: var(--win-skel); color: var(--win-strong); font-size: 11px; font-weight: 500; }
.c-minibtns .is-primary { background: var(--color-primary); color: #fff; box-shadow: 0 6px 16px -6px rgba(124, 92, 255, 0.9); }

/* Las mini-UIs se simplifican cuando su ventana es estrecha: en las filas con
   badge, el valor sobra; en las que no lo tienen, el valor es la información */
@container (max-width: 380px) {
  .c-rows li:has(.c-badge) .v { display: none; }
  .c-rows .c-badge { margin-left: auto; }
  .c-vitals { grid-template-columns: 1fr; justify-items: center; }
  .c-vitals__list { width: 100%; }
}

/* ==========================================================================
   10. Marquesina (una por página como máximo)
   ========================================================================== */
.c-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
/* No se pausa al pasar el cursor: es un fondo en movimiento continuo, no un carrusel */
.c-marquee__track { display: flex; width: max-content; animation: marquee 45s linear infinite; }
.c-marquee__group { display: flex; align-items: center; gap: clamp(2.5rem, 2rem + 2vw, 4rem); padding: 0 clamp(2.5rem, 2rem + 2vw, 4rem) 0 0; margin: 0; list-style: none; }
.c-marquee__item {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--fg-3); font-size: 1.0625rem; font-weight: 500; letter-spacing: -0.02em; white-space: nowrap;
  transition: color var(--dur-fast);
}
.c-marquee__item svg { width: 20px; height: 20px; }
/* Logos de marca (sprite <symbol> con <use>): monocromos, en el gris del texto */
.c-marquee__item svg:has(use) { flex: none; fill: currentColor; }
.c-marquee--logos .c-marquee__item { font-weight: 600; letter-spacing: -0.025em; }
@media (hover: hover) and (pointer: fine) { .c-marquee__item:hover { color: var(--fg); } }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .c-marquee { -webkit-mask-image: none; mask-image: none; }
  .c-marquee__track { animation: none; width: auto; justify-content: center; }
  .c-marquee__group[aria-hidden="true"] { display: none; }
  .c-marquee__group { flex-wrap: wrap; justify-content: center; row-gap: var(--space-4); padding: 0; }
}

/* ==========================================================================
   11. Statement (texto grande que se ilumina al hacer scroll — main.js)
   ========================================================================== */
.c-statement {
  --p: 1;
  /* Opacidad de las palabras aún sin iluminar: el mínimo para 3:1 (texto
     grande) sobre --bg. --fg lo cumple al 36 %; el gris de .c-muted, al 72 %. */
  --w-min: 0.38;
  max-width: 21em;
  color: var(--fg);
  font-size: clamp(1.75rem, 1.2rem + 2.4vw, 3.25rem);
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.c-statement .c-muted { --w-min: 0.74; }
.c-statement .w { opacity: clamp(var(--w-min), calc(var(--p) * (var(--n) + 6) - var(--i)), 1); }

/* ==========================================================================
   12. Checklist
   ========================================================================== */
.c-checklist { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.c-checklist li { display: flex; gap: var(--space-3); align-items: flex-start; color: var(--fg-2); font-size: var(--text-sm); line-height: 1.5; }
.c-checklist li::before {
  content: ""; flex: none; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%;
  background: rgba(124, 92, 255, 0.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23c2b4ff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 10.5l2.5 2.5L14 7.5'/%3E%3C/svg%3E") center / 100% no-repeat;
}

/* ==========================================================================
   13. Proceso (línea de tiempo en una sola superficie)
   ========================================================================== */
.c-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 0; padding: 0; list-style: none;
  border-radius: var(--radius-lg);
  background: var(--surface-1);
  box-shadow: inset 0 0 0 1px var(--line), var(--highlight);
  overflow: hidden;
}
.c-steps::before {
  /* barra de progreso que se rellena al aparecer */
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--violet-500), var(--violet-300) 60%, var(--peach-300));
  transform: scaleX(0); transform-origin: left;
  transition: transform 1.8s var(--ease-out) 0.2s;
}
.c-steps.is-visible::before { transform: none; }
.c-step { position: relative; display: grid; align-content: start; gap: var(--space-3); padding: clamp(1.5rem, 1.2rem + 1vw, 2.25rem); }
.c-step + .c-step { border-left: 1px solid var(--line); }
.c-step__num {
  display: inline-flex; align-items: center; gap: var(--space-3);
  margin-bottom: var(--space-6);
  font-family: var(--font-mono); font-size: var(--text-xs); color: var(--fg-3);
}
.c-step__num::before {
  content: ""; width: 9px; height: 9px; border-radius: 50%;
  background: var(--surface-4); box-shadow: inset 0 0 0 1px var(--line-strong);
  transition: background-color 0.4s, box-shadow 0.4s;
  transition-delay: calc(var(--i) * 380ms + 300ms);
}
.is-visible .c-step__num::before { background: var(--violet-400); box-shadow: 0 0 12px var(--violet-500); }
.c-step h3 { font-size: var(--text-md); letter-spacing: -0.02em; }
.c-step p { font-size: var(--text-sm); }
.c-step .c-badge { justify-self: start; margin-top: var(--space-3); }
@media (max-width: 900px) {
  .c-steps { grid-template-columns: 1fr 1fr; }
  .c-step:nth-child(3) { border-left: 0; }
  .c-step:nth-child(n + 3) { border-top: 1px solid var(--line); }
}
/* Móvil: línea de tiempo compacta. El número va en su propia columna, a la
   izquierda; título, texto y plazo a la derecha. ~40 % menos de alto. */
@media (max-width: 560px) {
  .c-steps { grid-template-columns: 1fr; }
  .c-step + .c-step { border-left: 0; border-top: 1px solid var(--line); }
  .c-step { grid-template-columns: 2.25rem 1fr; column-gap: var(--space-3); row-gap: var(--space-1); padding: var(--space-5); }
  .c-step > * { grid-column: 2; }
  .c-step__num { grid-column: 1; grid-row: 1 / span 3; flex-direction: column; align-items: flex-start; gap: var(--space-2); margin: 0.2em 0 0; }
  .c-step .c-badge { margin-top: var(--space-2); }
}

/* ==========================================================================
   14. Precios
   ========================================================================== */
.c-price { display: flex; flex-direction: column; gap: var(--space-5); padding: clamp(1.5rem, 1.2rem + 1vw, 2rem); }
.c-price__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 24px; }
.c-price__name { color: var(--fg); font-size: var(--text-md); font-weight: 500; letter-spacing: -0.02em; }
.c-price__desc { font-size: var(--text-sm); min-height: 3em; }
.c-price__amount { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.c-price__amount strong {
  color: var(--fg); font-size: clamp(2.5rem, 2.1rem + 1.4vw, 3.25rem); font-weight: 500;
  letter-spacing: -0.05em; line-height: 1; font-variant-numeric: tabular-nums;
}
.c-price__amount span { font-size: var(--text-sm); color: var(--fg-3); }
.c-price__time { display: flex; align-items: center; gap: var(--space-2); margin-top: calc(var(--space-2) * -1); color: var(--fg-3); font-size: var(--text-sm); }
.c-price__time svg { width: 15px; height: 15px; flex: none; }
.c-price hr { width: 100%; height: 1px; margin: 0; border: 0; background: var(--line); }
.c-price .c-btn { margin-top: auto; }
.c-price--featured {
  background:
    radial-gradient(110% 55% at 50% -5%, rgba(124, 92, 255, 0.24), transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01)),
    var(--surface-1);
  box-shadow: inset 0 0 0 1px rgba(164, 139, 255, 0.28), var(--highlight), 0 40px 90px -40px rgba(124, 92, 255, 0.55);
}
.c-price--featured .c-price__amount strong {
  background: linear-gradient(180deg, #fff 30%, var(--violet-200));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.c-price--featured .c-badge { background: var(--violet-500); color: #fff; box-shadow: 0 0 20px rgba(124, 92, 255, 0.5); }
/* Escritorio: el recomendado sobresale un poco por arriba y por abajo */
@media (min-width: 1001px) {
  .c-pricing:not(.c-pricing--2) { padding-block: var(--space-3); }
  .c-pricing:not(.c-pricing--2) .c-price--featured { margin-block: calc(var(--space-3) * -1); }
}

/* Borde con haz de luz giratorio (solo para el elemento destacado) */
@property --beam { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.c-beam {
  position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: conic-gradient(from var(--beam), transparent 0deg, transparent 250deg, var(--violet-400) 300deg, var(--peach-300) 340deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: beam 6s linear infinite;
}
@keyframes beam { to { --beam: 360deg; } }
@media (prefers-reduced-motion: reduce) {
  .c-beam { animation: none; background: linear-gradient(160deg, var(--violet-400), transparent 40%, transparent 70%, var(--peach-300)); }
}

/* ==========================================================================
   15. FAQ (lista numerada; usar <details name="faq"> para acordeón exclusivo)
   ========================================================================== */
.c-faq { display: grid; gap: var(--space-3); }
/* Cada pregunta es una tarjeta; la abierta se tiñe de violeta */
.c-faq__item {
  padding-inline: var(--space-5) var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--surface-1);
  box-shadow: inset 0 0 0 1px var(--line), var(--highlight);
  transition: background-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.c-faq__item[open] {
  background: radial-gradient(90% 120% at 0% 0%, rgba(124, 92, 255, 0.12), transparent 60%), var(--surface-1);
  box-shadow: inset 0 0 0 1px rgba(164, 139, 255, 0.3), var(--highlight);
}
@media (hover: hover) and (pointer: fine) {
  .c-faq__item:not([open]):hover { box-shadow: inset 0 0 0 1px var(--line-strong), var(--highlight); }
}
.c-faq__item summary {
  display: grid;
  grid-template-columns: 2.25rem 1fr 32px;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-5) 0;
  list-style: none;
  cursor: pointer;
  color: var(--fg);
  font-size: var(--text-md);
  font-weight: 500;
  letter-spacing: -0.015em;
  transform-origin: left center;
  transition: transform var(--dur-fast) var(--ease-out);
}
.c-faq__item summary:active { transform: scale(0.985); }
.c-faq__item summary::-webkit-details-marker { display: none; }
.c-faq__num { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--fg-3); font-weight: 400; transition: color var(--dur-fast) var(--ease-out); } /* --fg-4 no da 4.5:1: es solo decorativo */
.c-faq__icon {
  position: relative; width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--fg-3);
  transition: transform var(--dur-base) var(--ease-out), color var(--dur-fast), background-color var(--dur-fast), box-shadow var(--dur-fast);
}
.c-faq__icon::before, .c-faq__icon::after { content: ""; position: absolute; top: 50%; left: 50%; width: 12px; height: 1.5px; margin: -0.75px 0 0 -6px; border-radius: 2px; background: currentColor; }
.c-faq__icon::after { transform: rotate(90deg); }
.c-faq__item[open] .c-faq__icon { transform: rotate(45deg); color: #fff; background: var(--violet-500); box-shadow: 0 0 16px rgba(124, 92, 255, 0.5); }
.c-faq__item[open] .c-faq__num { color: var(--violet-400); }
@media (hover: hover) and (pointer: fine) {
  .c-faq__item summary:hover .c-faq__icon { color: var(--fg); }
  .c-faq__item summary:hover .c-faq__num { color: var(--violet-400); }
}
.c-faq__a { padding: 0 3rem var(--space-6) calc(2.25rem + var(--space-3)); color: var(--fg-2); max-width: 46em; }
/* Apertura animada donde el navegador lo soporta */
.c-faq__item::details-content {
  block-size: 0;
  overflow: clip;
  transition: block-size var(--dur-base) var(--ease-out), content-visibility var(--dur-base) allow-discrete;
}
.c-faq__item[open]::details-content { block-size: auto; }

/* Tarjeta de ayuda bajo el titular del FAQ: la duda que no está en la lista va al formulario */
.c-help {
  display: grid; grid-template-columns: auto 1fr; gap: var(--space-2) var(--space-4); align-items: start;
  width: 100%; max-width: 30rem; margin-top: var(--space-2); padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: radial-gradient(100% 100% at 100% 0%, rgba(124, 92, 255, 0.14), transparent 65%), var(--surface-1);
  box-shadow: inset 0 0 0 1px var(--line), var(--highlight);
}
.c-help__icon {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px;
  background: rgba(124, 92, 255, 0.14); color: var(--violet-300); box-shadow: inset 0 0 0 1px rgba(164, 139, 255, 0.22);
}
.c-help__icon svg { width: 20px; height: 20px; }
.c-help p { color: var(--fg-2); font-size: var(--text-sm); line-height: 1.5; }
.c-help p b { display: block; margin-bottom: 2px; color: var(--fg); font-size: var(--text-base); font-weight: 500; }
.c-help .c-btn { grid-column: 2; justify-self: start; margin-top: var(--space-2); }
@media (max-width: 560px) {
  .c-faq { gap: var(--space-2); }
  .c-faq__item { padding-inline: var(--space-4) var(--space-3); border-radius: var(--radius-md); }
  .c-faq__item summary { grid-template-columns: 1.75rem 1fr 28px; padding: var(--space-4) 0; font-size: var(--text-base); }
  .c-faq__icon { width: 28px; height: 28px; }
  .c-faq__a { padding: 0 var(--space-2) var(--space-5) calc(1.75rem + var(--space-3)); font-size: 0.9375rem; }
}

/* ==========================================================================
   16. Formularios
   ========================================================================== */
.c-field { display: grid; gap: var(--space-2); }
.c-field label { color: var(--fg); font-size: var(--text-sm); font-weight: 500; }
.c-input {
  width: 100%;
  height: 48px;
  padding: 0 var(--space-4);
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  color: var(--fg);
  font: inherit;
  font-size: 16px;
  transition: box-shadow var(--dur-fast);
}
.c-input::placeholder { color: var(--fg-3); }
@media (hover: hover) and (pointer: fine) { .c-input:hover { box-shadow: inset 0 0 0 1px var(--line-bright); } }
.c-input:focus { outline: none; box-shadow: inset 0 0 0 1px var(--violet-400), 0 0 0 4px rgba(124, 92, 255, 0.2); }
.c-input[aria-invalid="true"] { box-shadow: inset 0 0 0 1px var(--danger), 0 0 0 4px rgba(255, 93, 108, 0.15); }
textarea.c-input { height: auto; min-height: 140px; padding: var(--space-3) var(--space-4); resize: vertical; }
.c-field__hint { font-size: var(--text-xs); color: var(--fg-3); }
.c-field__error { font-size: var(--text-xs); color: var(--danger); }

/* Input + botón en una sola píldora */
.c-inline-form {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  max-width: 500px;
  padding: 6px;
  border-radius: var(--radius-pill);
  background: rgba(17, 16, 23, 0.85);
  box-shadow: inset 0 0 0 1px var(--line-strong), var(--shadow-md);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  transition: box-shadow var(--dur-fast);
}
.c-inline-form:focus-within { box-shadow: inset 0 0 0 1px var(--violet-400), 0 0 0 4px rgba(124, 92, 255, 0.18), var(--shadow-md); }
/* El error se marca en la propia píldora, donde está la mirada */
.c-inline-form:has(input[aria-invalid="true"]) { box-shadow: inset 0 0 0 1px var(--danger), 0 0 0 4px rgba(255, 93, 108, 0.15), var(--shadow-md); }
.c-inline-form input {
  flex: 1; min-width: 0; height: 44px; padding: 0 var(--space-4);
  border: 0; background: transparent; color: var(--fg); font: inherit; font-size: 16px;
}
.c-inline-form input::placeholder { color: var(--fg-3); }
.c-inline-form input:focus { outline: none; }
.c-inline-form .c-btn { flex: none; }
.c-form-status { min-height: 1.5em; font-size: var(--text-sm); color: var(--fg-3); }
.c-form-status.is-ok { color: var(--success); }
.c-form-status.is-error { color: var(--danger); }
@media (max-width: 480px) {
  .c-inline-form { flex-direction: column; align-items: stretch; border-radius: var(--radius-lg); }
  .c-inline-form .c-btn { width: 100%; }
}

/* ==========================================================================
   17. Footer
   ========================================================================== */
.c-footer { position: relative; isolation: isolate; overflow: hidden; padding-top: var(--space-16); border-top: 1px solid var(--line); font-size: var(--text-sm); }
/* Horizonte de luz en el borde superior (violeta → melocotón) y su reflejo */
.c-footer::before, .c-footer::after { content: ""; position: absolute; top: 0; left: 50%; translate: -50% 0; pointer-events: none; }
.c-footer::before { width: min(760px, 80%); height: 1px; background: linear-gradient(90deg, transparent, var(--violet-400) 40%, var(--peach-300) 65%, transparent); opacity: 0.75; }
.c-footer::after { z-index: -1; width: min(1000px, 100%); height: 260px; background: radial-gradient(50% 100% at 50% 0%, rgba(124, 92, 255, 0.13), transparent 70%); }
.c-footer__grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: var(--space-10); }
.c-footer__brand p { max-width: 26em; margin-top: var(--space-4); color: var(--fg-3); }
.c-footer__brand .c-badge { margin-top: var(--space-5); }
.c-footer h3 { margin-bottom: var(--space-4); color: var(--fg-3); font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; }
.c-footer ul { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.c-footer a { color: var(--fg-2); transition: color var(--dur-fast); }
@media (hover: hover) and (pointer: fine) { .c-footer a:hover { color: var(--fg); } }
/* Volver arriba: flecha en un círculo, a la derecha de la barra inferior */
.c-footer__end { display: inline-flex; align-items: center; gap: var(--space-6); }
.c-footer__top { display: inline-flex; align-items: center; gap: var(--space-2); }
.c-footer__top svg {
  width: 28px; height: 28px; padding: 6px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1px var(--line-strong);
  transition: translate var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast);
}
@media (hover: hover) and (pointer: fine) { .c-footer__top:hover svg { translate: 0 -2px; box-shadow: inset 0 0 0 1px var(--line-bright); } }
.c-footer__bottom {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-4);
  margin-top: var(--space-16); padding-block: var(--space-6);
  border-top: 1px solid var(--line);
  color: var(--fg-3); font-size: var(--text-xs);
}
/* Wordmark del logo a todo el ancho, desvanecido hacia abajo y cortado por el
   borde inferior. Degradado en el propio SVG (<linearGradient> + <use>). */
.c-footer__mark {
  display: block;
  width: min(100% - 2 * var(--gutter), var(--container));
  height: auto;
  margin: var(--space-10) auto -3%;
  user-select: none;
  pointer-events: none;
}
@media (max-width: 760px) {
  .c-footer { padding-top: var(--space-12); }
  .c-footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-8) var(--space-4); }
  .c-footer__brand { grid-column: 1 / -1; }
  .c-footer__bottom { margin-top: var(--space-10); }
}

/* ==========================================================================
   19. Composiciones reutilizables (rejillas de sección)
   ========================================================================== */
/* Fila de feature cards de servicio (3 columnas → horizontal → apilado) */
.c-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
@media (max-width: 1060px) {
  .c-features { grid-template-columns: 1fr; }
  .c-features .c-feature { display: grid; grid-template-columns: 1.15fr 1fr; }
  .c-features .c-feature__media { aspect-ratio: auto; padding: var(--space-8); }
  .c-features .c-feature__body { align-content: end; padding: var(--space-8) var(--space-8) var(--space-8) 0; }
}
@media (max-width: 680px) {
  .c-features .c-feature { display: flex; }
  .c-features .c-feature__media { padding: var(--space-5) var(--space-5) 0; }
  .c-features .c-feature__body { padding: var(--space-6) var(--space-5) var(--space-5); }
}

/* Bento de 12 columnas: celdas --wide (7) y --narrow (5) alternadas */
.c-bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--space-4); }
.c-bento__cell { display: flex; flex-direction: column; overflow: hidden; }
.c-bento__cell--wide { grid-column: span 7; }
.c-bento__cell--narrow { grid-column: span 5; }
.c-bento__cell--full { grid-column: 1 / -1; }
.c-bento__media {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 272px;
  padding: var(--space-8) var(--space-8) 0;
}
.c-bento__media::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 70% at 50% 60%, rgba(124, 92, 255, 0.12), transparent 70%);
}
.c-bento__media .c-window { width: min(100%, 460px); }
.c-bento__text { display: grid; gap: var(--space-2); padding: var(--space-6) var(--space-8) var(--space-8); }
.c-bento__text h3 { font-size: var(--text-md); }
.c-bento__text p { font-size: 0.9375rem; max-width: 34em; }
@media (max-width: 960px) {
  .c-bento__cell--wide, .c-bento__cell--narrow { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .c-bento__media { min-height: 0; padding: var(--space-5) var(--space-5) 0; }
  .c-bento__text { padding: var(--space-5); }
}

/* Tabla de precios */
.c-pricing { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); align-items: stretch; }
.c-pricing--2 { grid-template-columns: repeat(2, 1fr); max-width: 860px; margin-inline: auto; }
/* Condiciones bajo la tabla: en una banda con icono, no en letra pequeña suelta */
.c-pricing__note {
  position: relative;
  width: fit-content; max-width: 52em; margin: var(--space-8) auto 0;
  padding: var(--space-4) var(--space-5) var(--space-4) calc(var(--space-5) + 18px + var(--space-3));
  border-radius: var(--radius-md);
  background: var(--surface-1); box-shadow: inset 0 0 0 1px var(--line), var(--highlight);
  color: var(--fg-2); font-size: var(--text-sm); line-height: 1.55;
}
.c-pricing__note::before {
  content: ""; position: absolute; top: calc(var(--space-4) + 2px); left: var(--space-5); width: 18px; height: 18px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a48bff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5M12 8v.01'/%3E%3C/svg%3E") center / 100% no-repeat;
}
@media (max-width: 1000px) {
  .c-pricing { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; }
}

/* Lista de precios sueltos (extras y servicios complementarios) bajo la tabla */
.c-pricelist {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--space-10);
  max-width: 1000px;
  margin: var(--space-6) auto 0;
  padding: var(--space-2) clamp(1.25rem, 1rem + 1vw, 2rem);
  list-style: none;
  border-radius: var(--radius-lg);
  background: var(--surface-1);
  box-shadow: inset 0 0 0 1px var(--line), var(--highlight);
}
.c-pricelist li { display: grid; grid-template-columns: 1fr auto; gap: 2px var(--space-4); padding-block: var(--space-4); border-top: 1px solid var(--line); }
.c-pricelist li:nth-child(-n + 2) { border-top: 0; }
.c-pricelist b { color: var(--fg); font-weight: 500; }
.c-pricelist strong { color: var(--fg); font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 500; text-align: right; }
.c-pricelist small { grid-column: 1 / -1; color: var(--fg-3); font-size: var(--text-sm); line-height: 1.5; }
@media (max-width: 760px) {
  .c-pricelist { grid-template-columns: 1fr; }
  .c-pricelist li:nth-child(2) { border-top: 1px solid var(--line); }
}

/* Carril horizontal en móvil [data-rail="Etiqueta"]: las rejillas de tarjetas
   (problemas, servicios, bento, promesas, precios) dejan de apilarse y pasan a
   deslizarse en horizontal con scroll nativo (inercia y rebote del sistema),
   ajuste a cada tarjeta y la siguiente asomando a la derecha como pista.
   main.js añade los puntos (.c-rail-dots), el foco por teclado y revela todas
   las tarjetas a la vez. En escritorio no cambia nada. */
.c-rail-dots { display: none; }
/* El atributo va doble a propósito: gana a las rejillas (.c-pains, .c-promises…)
   que se declaran más abajo con la misma especificidad. */
@media (max-width: 760px) {
  [data-rail][data-rail] {
    display: grid;
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: min(86%, 380px);
    gap: var(--space-3);
    max-width: none;
    margin-inline: calc(var(--gutter) * -1);
    padding: 2px var(--gutter) var(--space-2);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  [data-rail][data-rail]::-webkit-scrollbar { display: none; }
  [data-rail][data-rail] > * { grid-column: auto; grid-row: auto; scroll-snap-align: start; scroll-snap-stop: always; }
  [data-rail][data-rail]:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; border-radius: var(--radius-lg); }
  /* Puntos: control de página al estilo iOS. El activo se alarga en píldora. */
  .c-rail-dots { display: flex; justify-content: center; gap: 2px; margin-top: var(--space-3); }
  .c-rail-dots button {
    display: grid; place-items: center;
    width: 24px; height: 24px; padding: 0;
    border: 0; background: none; cursor: pointer;
  }
  .c-rail-dots button::before {
    content: ""; width: 6px; height: 6px; border-radius: 99px;
    background: var(--fg-4);
    transition: width var(--dur-base) var(--ease-out), background-color var(--dur-fast);
  }
  .c-rail-dots button[aria-current="true"]::before { width: 18px; background: var(--fg-2); }
}

/* Dos columnas con lateral fijo al hacer scroll (FAQ, textos legales, detalle de servicio) */
.l-split { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(2.5rem, 1rem + 5vw, 7rem); align-items: start; }
.l-split__aside { position: sticky; top: calc(var(--nav-h) + var(--space-8)); display: grid; gap: var(--space-5); justify-items: start; }
@media (max-width: 900px) {
  .l-split { grid-template-columns: 1fr; }
  .l-split__aside { position: static; }
}

/* CTA de cierre con "horizonte" de luz (uno por página, antes del footer) */
.c-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(4rem, 1rem + 12vw, 12rem);
  text-align: center;
}
.c-cta__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--glow-bottom); }
.c-cta__bg .u-dots {
  position: absolute; inset: 0;
  -webkit-mask-image: radial-gradient(55% 65% at 50% 100%, #000, transparent 75%);
          mask-image: radial-gradient(55% 65% at 50% 100%, #000, transparent 75%);
}
.c-cta__bg::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 78%;
  width: max(140%, 1100px);
  aspect-ratio: 1;
  translate: -50% 0;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--bg) 96%, transparent 100%);
  box-shadow:
    0 -1px 0 rgba(221, 212, 255, 0.55),
    0 -24px 90px -10px rgba(124, 92, 255, 0.55),
    0 -6px 40px -8px rgba(255, 185, 156, 0.35);
}
.c-cta__inner { display: grid; justify-items: center; gap: var(--space-6); }
.c-cta__title { max-width: 14em; font-size: clamp(2.5rem, 1.6rem + 4vw, 5rem); line-height: 1; letter-spacing: var(--tracking-display); }
.c-cta__inner .c-lead { margin-inline: auto; }
.c-cta__inner .c-inline-form { margin-top: var(--space-2); }

/* Variante con el símbolo de Flerum hecho de partículas (main.js: [data-mark]).
   Sustituye al horizonte CSS: los puntos se reúnen al entrar en pantalla,
   brillan con una ola diagonal (luz desde arriba a la derecha) y se apartan
   del cursor. Con reduced-motion, sin JS o sin canvas: el símbolo quieto en
   SVG (el <svg> de respaldo, que el script oculta al pintar el primer frame). */
.c-cta--mark { padding-bottom: 0; }
/* La luz se centra detrás del símbolo, no en el borde inferior de la sección */
.c-cta--mark .c-cta__bg {
  background:
    radial-gradient(38% 26% at 52% 80%, rgba(124, 92, 255, 0.2) 0%, transparent 70%),
    radial-gradient(22% 18% at 38% 90%, rgba(255, 155, 120, 0.08) 0%, transparent 70%);
}
.c-cta--mark .c-cta__bg::after,
.c-cta--mark .c-cta__bg .u-dots { display: none; }
.c-cta__mark {
  position: relative;
  z-index: -1;
  width: min(100%, 720px);
  height: clamp(260px, 12rem + 10vw, 400px);
  margin: clamp(2rem, 1rem + 4vw, 4.5rem) auto 0;
  /* el borde inferior se funde con el footer */
  -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 72%, transparent 100%);
}
.c-cta__mark canvas,
.c-cta__mark svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  max-width: none;
}
/* Respaldo estático: el mismo símbolo, con el degradado de acento */
.c-cta__mark svg { padding-block: 6% 4%; opacity: 0.85; }
.c-cta__mark.is-live svg { display: none; }
.c-cta__mark canvas { opacity: 0; transition: opacity 0.6s var(--ease-out); }
.c-cta__mark.is-live canvas { opacity: 1; }
@media (max-width: 760px) { .c-cta__mark { height: clamp(200px, 58vw, 300px); margin-top: var(--space-6); } }

/* ==========================================================================
   20. Conversión — piezas de las páginas de servicio y de la landing
       (orden de una landing: hero → problema → solución → objeción + prueba
       → precios → proceso → FAQ → formulario). Ver DESIGN-SYSTEM.md §6.
   ========================================================================== */

/* Hero de página interior: texto + mini-UI. Sin shader (es uno por sitio). */
.c-hero {
  position: relative;
  isolation: isolate;
  margin-top: calc(var(--nav-h) * -1);
  padding-top: var(--nav-h);
  overflow: hidden;
}
.c-hero__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--glow-top); }
.c-hero__bg .u-dots {
  position: absolute; inset: 0;
  -webkit-mask-image: radial-gradient(45% 60% at 76% 45%, #000, transparent 75%);
          mask-image: radial-gradient(45% 60% at 76% 45%, #000, transparent 75%);
}
.c-hero__bg::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 160px;
  background: linear-gradient(to bottom, transparent, var(--bg));
}
.c-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  align-items: center;
  gap: clamp(2.5rem, 1rem + 5vw, 6rem);
  padding-block: clamp(3rem, 2rem + 4vw, 6rem) clamp(3.5rem, 2.5rem + 4vw, 6.5rem);
}
.c-hero__copy { display: grid; justify-items: start; gap: var(--space-6); }
/* El hero interior es a dos columnas: el titular largo va un punto por debajo de --text-hero */
.c-hero__title { font-size: clamp(2.375rem, 1.5rem + 2.6vw, 3.75rem); line-height: 1.04; letter-spacing: -0.04em; max-width: 13em; }
.c-hero__copy .c-lead { max-width: 32em; }
.c-hero__actions { display: grid; justify-items: start; gap: var(--space-3); margin-top: var(--space-2); }
.c-hero__media { position: relative; }
.c-hero__media > .c-window { width: 100%; max-width: 520px; margin-inline: auto; }
@media (max-width: 960px) {
  .c-hero__inner { grid-template-columns: 1fr; }
  .c-hero__media { width: 100%; max-width: 520px; justify-self: center; }
}
@media (max-width: 760px) {
  .c-hero__inner { gap: var(--space-8); padding-block: var(--space-8) var(--space-10); }
  .c-hero__copy { gap: var(--space-5); }
}
@media (max-width: 440px) {
  .c-hero .c-pill { padding-left: var(--space-4); }
  .c-hero .c-pill__tag { display: none; }
}

/* Nota corta bajo un botón: qué pasa al pulsarlo */
.c-note { display: flex; align-items: flex-start; gap: var(--space-2); color: var(--fg-3); font-size: var(--text-sm); line-height: 1.5; }
.c-note svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--success); }
.c-note a { color: var(--fg-2); text-decoration: underline; text-underline-offset: 0.2em; }

/* Hechos verificables en fila (hero, cabeceras): sin enlaces, solo confianza */
.c-facts { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); margin: 0; padding: 0; list-style: none; }
.c-facts li { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--fg-2); font-size: var(--text-sm); }
.c-facts li::before {
  content: ""; flex: none; width: 16px; height: 16px; border-radius: 50%;
  background: rgba(63, 217, 154, 0.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%233fd99a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 10.5l2.5 2.5L14 7.5'/%3E%3C/svg%3E") center / 100% no-repeat;
}
.c-facts--center { justify-content: center; }
/* Móvil: los hechos van en rejilla de 2 columnas (la mitad de alto que en lista) */
@media (max-width: 560px) {
  .c-facts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3) var(--space-4); }
  .c-facts li { align-items: flex-start; font-size: var(--text-xs); line-height: 1.4; }
}

/* Problema: frases tal y como las dice el cliente + qué hay detrás */
.c-pains { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.c-pain {
  display: grid; align-content: start; gap: var(--space-3);
  padding: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.008)), var(--surface-1);
  box-shadow: inset 0 0 0 1px var(--line), var(--highlight);
}
.c-pain__quote { color: var(--fg); font-size: var(--text-lg); font-weight: 500; letter-spacing: -0.02em; line-height: 1.3; text-wrap: balance; }
.c-pain__why { font-size: 0.9375rem; line-height: 1.55; }
/* Lo que se pierde mientras tanto (coste real, sin dramatizar) */
.c-pains__cost {
  grid-column: 1 / -1;
  margin-top: var(--space-4);
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-5) clamp(1.25rem, 1rem + 1vw, 2rem);
  border-radius: var(--radius-lg);
  background: rgba(255, 155, 120, 0.06);
  box-shadow: inset 0 0 0 1px rgba(255, 155, 120, 0.2);
  color: var(--fg);
  font-weight: 500;
}
.c-pains__cost svg { width: 22px; height: 22px; flex: none; color: var(--peach-300); }
@media (max-width: 760px) { .c-pains { grid-template-columns: 1fr; } }

/* Promesas que responden a la objeción principal (inversión de riesgo) */
.c-promises { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.c-promise { display: grid; align-content: start; gap: var(--space-3); padding: clamp(1.5rem, 1.2rem + 1vw, 2rem); }
.c-promise__icon {
  display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: var(--space-2);
  border-radius: 12px; background: rgba(124, 92, 255, 0.14); color: var(--violet-300);
  box-shadow: inset 0 0 0 1px rgba(164, 139, 255, 0.22);
}
.c-promise__icon svg { width: 20px; height: 20px; }
.c-promise h3 { font-size: var(--text-md); }
.c-promise p { font-size: 0.9375rem; line-height: 1.55; }
@media (max-width: 1060px) { .c-promises { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .c-promises { grid-template-columns: 1fr; } }

/* Prueba: va justo después de la objeción. Mientras no haya testimonios
   reales, enseña algo comprobable (una oferta honesta, un entregable). */
.c-proof {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  align-items: center;
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  margin-top: var(--space-4);
  padding: clamp(1.75rem, 1rem + 3vw, 3.5rem);
  border-radius: var(--radius-xl);
  background: radial-gradient(80% 90% at 100% 0%, rgba(124, 92, 255, 0.16), transparent 60%), var(--surface-1);
  box-shadow: inset 0 0 0 1px var(--line), var(--highlight);
}
.c-proof__text { display: grid; justify-items: start; gap: var(--space-4); }
.c-proof__text h3 { font-size: var(--text-xl); line-height: 1.15; letter-spacing: -0.03em; text-wrap: balance; }
.c-proof__text p { max-width: 34em; }
.c-proof__media .c-window { width: 100%; max-width: 440px; margin-inline: auto; }
@media (max-width: 900px) { .c-proof { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .c-proof { gap: var(--space-6); padding: var(--space-6) var(--space-5); border-radius: var(--radius-lg); } }

/* --- Formulario por pasos (main.js: [data-brief]) ---------------------------
   Pocos campos, opciones ya marcadas con lo más habitual y progreso visible.
   Sin JS se ven todos los pasos seguidos y el botón de enviar. */
.c-brief {
  position: relative;
  display: grid;
  gap: var(--space-6);
  width: 100%;
  max-width: 620px;
  margin-inline: auto;
  padding: clamp(1.25rem, 0.9rem + 1.6vw, 2rem);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(70% 45% at 100% 0%, rgba(124, 92, 255, 0.13), transparent 70%),
    radial-gradient(50% 35% at 0% 100%, rgba(255, 155, 120, 0.05), transparent 70%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012)), rgba(17, 16, 23, 0.9);
  box-shadow: inset 0 0 0 1px var(--line-strong), var(--highlight), var(--shadow-lg);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  text-align: left;
}
/* Filo de luz en el borde superior (violeta → melocotón), como el brillo del hero */
.c-brief::before {
  content: ""; position: absolute; top: 0; left: 12%; right: 12%; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(164, 139, 255, 0.85) 35%, rgba(255, 185, 156, 0.6) 70%, transparent);
}
.c-brief__head { display: grid; gap: var(--space-3); }
.c-brief:not(.is-enhanced) .c-brief__head { display: none; }
/* Con el stepper (lo crea main.js), el texto "Paso 1 de 3" queda solo para lectores de pantalla */
.c-brief__head:has(.c-brief__steps) { padding-bottom: var(--space-6); border-bottom: 1px solid var(--line); }
.c-brief__head:has(.c-brief__steps) .c-brief__meta {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.c-brief__head:has(.c-brief__steps) .c-brief__progress { display: none; }

/* Stepper: número → check al completar; la línea se llena hasta el paso actual */
.c-brief__steps { display: grid; grid-template-columns: repeat(var(--steps, 3), minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; counter-reset: brief; }
.c-brief__steps li {
  position: relative; display: grid; justify-items: center; gap: var(--space-2);
  color: var(--fg-3); font-size: var(--text-xs); font-weight: 500; text-align: center; line-height: 1.3;
  counter-increment: brief;
  transition: color var(--dur-base) var(--ease-out);
}
.c-brief__steps li::before {
  content: counter(brief, decimal-leading-zero);
  position: relative; z-index: 1;
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-strong);
  color: var(--fg-3); font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: 400;
  transition: background-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
/* Tramo de línea que une este paso con el anterior */
.c-brief__steps li + li::after {
  content: ""; position: absolute; top: 15px; right: calc(50% + 24px); left: calc(-50% + 24px); height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--violet-500), var(--violet-300)) left / 0% 100% no-repeat, rgba(255, 255, 255, 0.08);
  transition: background-size var(--dur-slow) var(--ease-out);
}
.c-brief__steps li.is-done, .c-brief__steps li.is-current { color: var(--fg); }
.c-brief__steps li.is-done + li::after, .c-brief__steps li.is-current::after { background-size: 100% 100%; }
.c-brief__steps li.is-current::before {
  background: rgba(124, 92, 255, 0.18); color: var(--violet-200);
  box-shadow: inset 0 0 0 1.5px var(--violet-400), 0 0 0 5px rgba(124, 92, 255, 0.14), 0 0 24px rgba(124, 92, 255, 0.35);
}
.c-brief__steps li.is-done::before {
  content: "";
  background: var(--violet-500) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 10.5l2.5 2.5L14 7.5'/%3E%3C/svg%3E") center / 18px no-repeat;
  box-shadow: none;
}

/* Campos con icono a la izquierda según su tipo (sin tocar el HTML de cada página) */
.c-brief .c-input:is([autocomplete="organization"], [autocomplete="url"], [autocomplete="given-name"], [type="email"], [type="tel"]) {
  padding-left: 44px; background-position: 14px 50%; background-size: 18px; background-repeat: no-repeat;
}
.c-brief .c-input[autocomplete="organization"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237f7c8e' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 21V5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v16M16 9h2a2 2 0 0 1 2 2v10M3 21h18M8 7h4M8 11h4M8 15h4'/%3E%3C/svg%3E"); }
.c-brief .c-input[autocomplete="url"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237f7c8e' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18'/%3E%3C/svg%3E"); }
.c-brief .c-input[autocomplete="given-name"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237f7c8e' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0'/%3E%3C/svg%3E"); }
.c-brief .c-input[type="email"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237f7c8e' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E"); }
.c-brief .c-input[type="tel"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237f7c8e' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2'/%3E%3C/svg%3E"); }.c-brief__meta { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin: 0; color: var(--fg-3); font-size: var(--text-sm); }
.c-brief__meta b { color: var(--fg); font-weight: 500; }
.c-brief__progress { height: 4px; border-radius: 4px; background: rgba(255, 255, 255, 0.07); overflow: hidden; }
.c-brief__progress span {
  display: block; height: 100%; border-radius: inherit;
  background: linear-gradient(90deg, var(--violet-500), var(--violet-300) 70%, var(--peach-300));
  transform: scaleX(var(--progress, 0.3333)); transform-origin: left;
  transition: transform var(--dur-base) var(--ease-out);
}
.c-brief__step { min-width: 0; margin: 0; padding: 0; border: 0; }
.c-brief__step + .c-brief__step { padding-top: var(--space-6); border-top: 1px solid var(--line); }
.c-brief.is-enhanced .c-brief__step + .c-brief__step { padding-top: 0; border-top: 0; }
.c-brief.is-enhanced .c-brief__step:not(.is-current) { display: none; }
/* El paso nuevo entra desde el lado hacia el que avanzas (y vuelve por el mismo) */
.c-brief.is-enhanced .c-brief__step.is-current { animation: brief-next var(--dur-base) var(--ease-out) both; }
.c-brief.is-enhanced[data-dir="back"] .c-brief__step.is-current { animation-name: brief-back; }
.c-brief.is-enhanced[data-dir="none"] .c-brief__step.is-current { animation: none; }
@keyframes brief-next { from { opacity: 0; translate: 18px 0; } }
@keyframes brief-back { from { opacity: 0; translate: -18px 0; } }
.c-brief__legend { display: block; width: 100%; margin: 0 0 var(--space-5); padding: 0; color: var(--fg); font-size: var(--text-lg); font-weight: 500; letter-spacing: -0.02em; line-height: 1.3; }
.c-brief__legend:focus { outline: none; }
.c-brief__fields { display: grid; gap: var(--space-5); }
.c-brief__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
@media (max-width: 560px) { .c-brief__row { grid-template-columns: 1fr; } }
.c-question { margin: 0; color: var(--fg); font-size: var(--text-sm); font-weight: 500; }
.c-field__opt { color: var(--fg-3); font-weight: 400; }

/* Opciones como píldoras (radio o checkbox reales debajo) */
.c-options { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.c-option { position: relative; display: inline-flex; }
.c-option input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.c-option span {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: 40px; padding: var(--space-2) var(--space-4) var(--space-2) var(--space-3);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.03);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  color: var(--fg-2); font-size: var(--text-sm); line-height: 1.3;
  transition: background-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.c-option span::before {
  content: ""; flex: none; width: 16px; height: 16px; border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--line-bright);
  transition: background-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.c-option input[type="checkbox"] + span::before { border-radius: 5px; }
.c-option small { color: var(--fg-3); font-family: var(--font-mono); font-size: var(--text-xs); }
.c-option input:checked + span { background: rgba(124, 92, 255, 0.16); color: var(--fg); box-shadow: inset 0 0 0 1px rgba(164, 139, 255, 0.6); }
.c-option input:checked + span::before {
  background: var(--violet-500) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 10.5l2.5 2.5L14 7.5'/%3E%3C/svg%3E") center / 100% no-repeat;
  box-shadow: none;
}
.c-option input:checked + span small { color: var(--violet-200); }
.c-option input:focus-visible + span { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.c-option:active span { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .c-option:hover input:not(:checked) + span { background: rgba(255, 255, 255, 0.06); color: var(--fg); }
}
.c-options[aria-invalid="true"] .c-option span { box-shadow: inset 0 0 0 1px rgba(255, 93, 108, 0.6); }

/* Opciones en tarjeta: la pregunta principal de un paso (una por paso como máximo).
   <label class="c-option"><input …><span><svg class="c-option__icon">…</svg><b>Título</b><small>Detalle</small></span></label> */
.c-options--cards { display: grid; grid-template-columns: repeat(var(--cols, auto-fit), minmax(150px, 1fr)); gap: var(--space-3); }
.c-options--cards .c-option { display: flex; }
.c-options--cards .c-option span {
  position: relative; flex: 1;
  display: grid; align-content: start; justify-items: start; gap: 2px;
  min-height: 0; padding: var(--space-4) var(--space-8) var(--space-4) var(--space-4);
  border-radius: var(--radius-md);
}
.c-options--cards .c-option span::before { position: absolute; top: var(--space-4); right: var(--space-4); }
.c-options--cards .c-option b { color: var(--fg); font-weight: 500; }
.c-options--cards .c-option small { font-family: var(--font-sans); font-size: var(--text-xs); line-height: 1.45; }
.c-option__icon {
  width: 36px; height: 36px; margin-bottom: var(--space-3); padding: 8px; border-radius: 10px;
  background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 1px var(--line);
  color: var(--fg-2);
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.c-option input:checked + span .c-option__icon { background: rgba(124, 92, 255, 0.22); color: var(--violet-200); box-shadow: inset 0 0 0 1px rgba(164, 139, 255, 0.35); }
.c-options--cards .c-option input:checked + span small { color: var(--fg-2); }
/* Móvil: una tarjeta por fila, icono a la izquierda (la mitad de alto) */
@media (max-width: 560px) {
  .c-options--cards { grid-template-columns: 1fr; gap: var(--space-2); }
  .c-options--cards .c-option span { grid-template-columns: auto 1fr; column-gap: var(--space-3); padding-block: var(--space-3); }
  .c-options--cards .c-option span::before { top: 50%; translate: 0 -50%; }
  .c-option__icon { grid-row: span 2; align-self: center; margin: 0; }
}

/* Resumen de lo elegido ("Tu plan"): el visitante ve su propio encargo */
.c-brief__summary { display: grid; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-md); background: rgba(124, 92, 255, 0.07); box-shadow: inset 0 0 0 1px rgba(164, 139, 255, 0.2); }
.c-brief__summary > p { color: var(--fg); font-size: var(--text-sm); font-weight: 500; }
.c-brief__summary ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.c-brief__summary li { display: inline-flex; align-items: center; min-height: 26px; padding: 2px 10px; border-radius: var(--radius-pill); background: rgba(124, 92, 255, 0.18); color: var(--violet-200); font-size: var(--text-xs); font-weight: 500; }

.c-brief__nav { display: flex; align-items: center; gap: var(--space-3); }
.c-brief__nav [data-brief-next], .c-brief__nav [type="submit"] { margin-left: auto; }
.c-brief:not(.is-enhanced) [data-brief-next], .c-brief:not(.is-enhanced) [data-brief-back] { display: none; }
.c-brief .c-form-status:empty { display: none; }
@media (max-width: 480px) {
  .c-brief__nav { flex-wrap: wrap; }
  .c-brief__nav [data-brief-next], .c-brief__nav [type="submit"] { flex: 1 1 100%; order: -1; }
  .c-brief__nav [data-brief-back] { flex: 1 1 100%; }
}

/* Estado final: qué pasa ahora, en tres pasos */
.c-brief__done { justify-items: start; gap: var(--space-5); }
.c-brief__done:focus { outline: none; }
.c-brief__done h3 { font-size: var(--text-xl); letter-spacing: -0.03em; }
.c-next { display: grid; gap: var(--space-4); margin: 0; padding: 0; list-style: none; counter-reset: next; }
.c-next li { display: grid; grid-template-columns: 28px 1fr; gap: var(--space-3); align-items: start; counter-increment: next; font-size: 0.9375rem; line-height: 1.55; }
.c-next li::before {
  content: counter(next); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: rgba(124, 92, 255, 0.16); color: var(--violet-200); font-family: var(--font-mono); font-size: var(--text-xs);
}

/* CTA fija en móvil: aparece cuando el botón del hero sale de pantalla y se
   aparta al llegar al formulario o al footer (main.js: [data-sticky-cta]).
   Entra y sale por el mismo borde. */
.c-sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: calc(var(--z-nav) - 1);
  display: none;
  padding: var(--space-3) var(--gutter) calc(var(--space-3) + env(safe-area-inset-bottom));
  background: rgba(8, 7, 11, 0.72);
  -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%);
  box-shadow: 0 -1px 0 var(--line);
  opacity: 0; visibility: hidden; transform: translateY(100%);
  transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out), visibility var(--dur-base);
}
.c-sticky-cta.is-shown { opacity: 1; visibility: visible; transform: none; }
@media (max-width: 900px) { .c-sticky-cta { display: block; } }

@media (prefers-reduced-motion: reduce) {
  .c-brief.is-enhanced .c-brief__step.is-current { animation: fade-in 200ms var(--ease-out) both; }
  .c-sticky-cta { transform: none; transition: opacity 200ms var(--ease-out), visibility 200ms; }
}

/* ==========================================================================
   18. Movimiento
   ========================================================================== */
/* Entrada al cargar (hero): desenfoque + subida, escalonada con --i */
.u-blur-in {
  animation: blur-in 700ms var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 60ms + 80ms);
}
@keyframes blur-in {
  from { opacity: 0; filter: blur(6px); transform: translateY(8px); }
  to   { opacity: 1; filter: blur(0); transform: none; }
}

/* Entrada al hacer scroll: añadir data-reveal (main.js pone .is-visible).
   Solo se oculta si JS está activo (html.js), así sin JS todo se ve.
   Es una animación sobre `translate` (no transition sobre `transform`) para
   no pisar las transiciones propias del componente, p. ej. el hover de .c-feature. */
.js [data-reveal] { opacity: 0; }
.js [data-reveal].is-visible { animation: reveal 600ms var(--ease-out) var(--reveal-delay, 0ms) both; }
@keyframes reveal {
  from { opacity: 0; translate: 0 12px; }
  to   { opacity: 1; translate: none; }
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

@keyframes float { 50% { transform: translateY(-14px); } }
.u-float { animation: float 9s var(--ease-in-out) infinite; }

/* Movimiento reducido: sin desplazamientos, pero los fundidos se mantienen */
@media (prefers-reduced-motion: reduce) {
  .u-float { animation: none; }
  .u-blur-in { animation: fade-in 300ms var(--ease-out) both; }
  .js [data-reveal].is-visible { animation: fade-in 300ms var(--ease-out) both; }
  .c-build, .c-serp__row, .c-ads__chart i, .c-ring, .c-switch, .c-switch::after,
  .c-report__bar::after, .c-vitals__list .bar::after, .c-steps::before, .c-step__num::before,
  .c-serp__rank span { transition: none !important; }
  .is-visible .c-cursor { animation: none; opacity: 1; }
}

/* Sin JavaScript: mostrar las mini-UIs en su estado final */
html:not(.js) .c-build { opacity: 1; transform: none; }
html:not(.js) .c-serp__row { transform: translateY(calc(var(--to) * var(--pitch))); }
html:not(.js) .c-serp__rank span:first-child { opacity: 0; }
html:not(.js) .c-serp__rank span:last-child { opacity: 1; transform: none; }
html:not(.js) .c-ads__chart i,
html:not(.js) .c-report__bar::after,
html:not(.js) .c-vitals__list .bar::after,
html:not(.js) .c-steps::before { transform: none; }
html:not(.js) .c-ring { --ring: 96; }

/* Alto contraste de Windows: el texto con degradado volvería invisible */
@media (forced-colors: active) {
  .c-accent { background: none; color: CanvasText; }
  .c-footer__mark { display: none; }
  .c-btn { border: 1px solid ButtonText; }
}

/* Menos transparencia: las capas de cristal pasan a ser sólidas */
@media (prefers-reduced-transparency: reduce) {
  .c-nav.is-scrolled, .c-nav.is-open, .c-sticky-cta { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .c-inline-form, .c-brief { background: var(--surface-1); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
/* Más contraste: el cristal también se vuelve sólido (los tokens se ajustan en tokens.css) */
@media (prefers-contrast: more) {
  .c-nav.is-scrolled, .c-nav.is-open, .c-sticky-cta { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
}