/* Faro SEO·GEO — landing de venta. Estilos scoped (.f-page).
   Reusa tokens de /css/style.css (Solar Warm) y componentes glass de guardian.
   Solo lo específico de Faro vive aquí: hero atractivo, tabla de auditoría,
   tarjetas de beneficio, bloque de precio. */

/* El BorderGlow (.bgw-light, inset -34px) desborda ~34px fuera de la caja.
   overflow:visible evita scrollbars fantasma (igual patrón que guardian). */
.f-hero, .f-sec, .f-price, .f-final { overflow: visible; }

.f-page main, .f-topbar, .f-hero { --f-max: 1080px; }

/* ---------- Fondo de la landing: haz Solar + grid técnico + faro tenue ---------- */
.f-page {
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='26' height='26'><circle cx='1.2' cy='1.2' r='1.2' fill='rgba(251,146,60,.09)'/></svg>") 0 0 / 26px 26px repeat,
    radial-gradient(ellipse 60% 45% at 50% -2%, rgba(251, 146, 60, 0.10) 0%, transparent 62%) no-repeat fixed,
    radial-gradient(ellipse 45% 40% at 92% 6%, rgba(244, 63, 94, 0.06) 0%, transparent 66%) no-repeat fixed,
    var(--color-background);
}

/* ---------- Topbar (reusa el patrón de guardian) ---------- */
.f-topbar {
  max-width: var(--f-max);
  margin: 0 auto;
  padding: 1.25rem 1.5rem 0;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
}
.f-brand {
  display: inline-flex; align-items: center; gap: .6rem;
  color: var(--color-text-primary); text-decoration: none;
  font-family: var(--font-head); font-weight: 700;
}
.f-brand-mark { height: 30px; width: auto; }
.f-topbar-right { display: inline-flex; align-items: center; gap: 1.1rem; font-size: .9rem; }
.f-lang { color: var(--color-text-secondary); }
.f-lang a, .f-gh { color: var(--color-text-primary); text-decoration: none; }
.f-lang a:hover, .f-gh:hover { color: var(--color-accent-start); }
.f-gh i { margin-right: .3rem; }

/* ============================ HERO ATRACTIVO ============================ */
.f-hero {
  position: relative; z-index: 0;
  max-width: var(--f-max); margin: 0 auto;
  padding: 3.75rem 1.5rem 2.25rem; text-align: center;
}
/* Aura Solar full-bleed detrás del hero: el degradé de marca como protagonista,
   con glow suave y fade abajo (sin morado → §6 anti-slop). */
.f-hero::before {
  content: ''; position: absolute; z-index: -2; pointer-events: none;
  top: -90px; bottom: 0; left: 50%; transform: translateX(-50%); width: 100vw;
  background:
    radial-gradient(50% 40% at 50% 0%, rgba(251, 146, 60, .16), transparent 70%),
    radial-gradient(40% 34% at 78% 12%, rgba(244, 63, 94, .10), transparent 70%),
    radial-gradient(36% 30% at 20% 10%, rgba(251, 146, 60, .08), transparent 72%),
    radial-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: auto, auto, auto, 24px 24px;
  -webkit-mask-image: linear-gradient(#000 55%, transparent 97%);
  mask-image: linear-gradient(#000 55%, transparent 97%);
}
/* Halo del faro (haz de luz) que "barre" detrás del logo — el sello atractivo. */
.f-hero::after {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  top: -30px; left: 50%; transform: translateX(-50%);
  width: 620px; height: 420px; max-width: 96vw;
  background:
    conic-gradient(from 200deg at 50% 18%,
      transparent 0deg, rgba(251,146,60,.14) 18deg, transparent 40deg,
      rgba(244,63,94,.10) 60deg, transparent 82deg);
  filter: blur(6px); opacity: .9;
}
.f-hero-logo {
  display: block; width: 104px; height: auto; margin: 0 auto 1rem;
  filter: drop-shadow(0 8px 26px rgba(251, 146, 60, .30));
  animation: f-beacon 4.5s ease-in-out infinite;
}
@keyframes f-beacon {
  0%, 100% { filter: drop-shadow(0 8px 26px rgba(251, 146, 60, .30)); }
  50% { filter: drop-shadow(0 8px 34px rgba(244, 63, 94, .42)); }
}
.f-wordmark {
  font-family: var(--font-mono); font-size: .82rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--color-text-secondary); margin: 0 0 1rem;
}
.f-eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-mono); font-size: .74rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--color-text-primary);
  border: 1px solid var(--color-glass-border); border-radius: 999px;
  padding: .35rem .9rem; margin-bottom: 1.5rem;
  background: rgba(251, 146, 60, .06);
}
.f-eyebrow .f-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-success); box-shadow: 0 0 8px rgba(52,211,153,.7); }
.f-hero h1 {
  font-family: var(--font-head);
  font-size: clamp(2.2rem, 5.5vw, 3.6rem);
  line-height: 1.06; margin: 0 0 .9rem; color: var(--color-text-primary);
  letter-spacing: -0.02em;
}
/* La palabra clave del titular en degradé Solar */
.f-hero h1 .f-grad {
  background: linear-gradient(100deg, var(--color-accent-start), var(--color-accent-end));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.f-thesis {
  font-size: clamp(1.1rem, 2.3vw, 1.4rem); font-weight: 600;
  background: linear-gradient(90deg, var(--color-accent-start), var(--color-accent-end));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  margin: 0 0 1.1rem;
}
.f-sub {
  max-width: 660px; margin: 0 auto; color: var(--color-text-secondary);
  font-size: 1.08rem; line-height: 1.6;
}
.f-sub strong { color: var(--color-text-primary); }

/* CTAs del hero */
.f-cta-row {
  display: flex; gap: .9rem; justify-content: center; flex-wrap: wrap;
  margin: 1.9rem 0 1.1rem;
}
.cta-button-ghost-f {
  display: inline-block; padding: 1rem 2rem; border-radius: 50px;
  font-weight: 700; text-decoration: none; cursor: pointer;
  color: var(--color-text-primary);
  background: var(--color-surface);
  border: 1px solid var(--color-glass-border);
  transition: transform .25s ease, border-color .25s ease, background .25s ease;
}
.cta-button-ghost-f:hover { transform: translateY(-4px); border-color: rgba(251,146,60,.5); background: rgba(251,146,60,.08); }
.f-cta-note { font-size: .82rem; color: var(--color-text-secondary); font-family: var(--font-mono); }
.f-cta-note strong { color: var(--color-text-primary); }

/* Chips de confianza bajo el hero */
.f-trust { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; margin-top: 1.6rem; }
.f-chip {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--font-mono); font-size: .74rem; letter-spacing: .03em;
  color: var(--color-text-secondary);
  background: var(--color-surface); border: 1px solid var(--color-glass-border);
  border-radius: 999px; padding: .35rem .8rem;
}
.f-chip strong { color: var(--color-text-primary); }
.f-chip svg { width: 14px; height: 14px; }

/* ============================ SECCIONES ============================ */
.f-sec { max-width: var(--f-max); margin: 4.5rem auto; padding: 0 1.5rem; }
.f-sec-head { text-align: center; margin-bottom: 2.25rem; }
.f-kicker {
  display: inline-block; font-family: var(--font-mono); font-size: .72rem;
  letter-spacing: .12em; text-transform: uppercase; color: #fbbf24;
  border: 1px solid var(--color-glass-border); border-radius: 999px;
  padding: .3rem .8rem; margin-bottom: .9rem;
}
.f-h2 { font-family: var(--font-head); font-size: clamp(1.6rem, 3.2vw, 2.15rem); text-align: center; color: var(--color-text-primary); margin: 0; letter-spacing: -0.02em; }
.f-sec-sub { color: var(--color-text-secondary); max-width: 640px; margin: .9rem auto 0; line-height: 1.6; }
.f-sec-sub strong { color: var(--color-text-primary); }

/* ---------- El problema (dos caras) ---------- */
.f-problem { max-width: 860px; }
.f-problem-card {
  position: relative; background: var(--color-background-alt);
  border: 1px solid var(--color-glass-border); border-radius: 18px;
  padding: 2rem 2.25rem; --bgw-glow: 12deg 90% 62%;
}
.f-problem-card p { color: var(--color-text-secondary); line-height: 1.65; font-size: 1.05rem; margin: 0 0 1rem; }
.f-problem-card p:last-child { margin-bottom: 0; }
.f-problem-card strong { color: var(--color-text-primary); }
.f-problem-card .f-hl {
  background: linear-gradient(90deg, var(--color-accent-start), var(--color-accent-end));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  font-weight: 700;
}

/* ---------- Qué hace por ti (tarjetas glass con íconos) ---------- */
.f-benes-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.f-bene {
  position: relative; background: var(--color-background-alt);
  border: 1px solid var(--color-glass-border); border-radius: 16px;
  padding: 1.6rem 1.5rem; --bgw-glow: 24deg 92% 72%;
  transition: transform .2s ease;
}
.f-bene:hover { transform: translateY(-3px); }
.f-bene-ico {
  width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  background: rgba(251,146,60,.10); border: 1px solid var(--color-glass-border);
  margin-bottom: 1rem;
}
.f-bene-ico svg { width: 24px; height: 24px; }
.f-bene h3 { font-family: var(--font-head); font-size: 1.08rem; margin: 0 0 .5rem; color: var(--color-text-primary); }
.f-bene p { color: var(--color-text-secondary); font-size: .93rem; line-height: 1.55; margin: 0; }
.f-bene strong { color: var(--color-text-primary); }

/* ---------- Todo lo que audita (tabla / grid) ---------- */
.f-audit-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.f-audit-row {
  position: relative; display: flex; gap: 1rem; align-items: flex-start;
  background: var(--color-surface); border: 1px solid var(--color-glass-border);
  border-radius: 14px; padding: 1.15rem 1.25rem; --bgw-glow: 24deg 92% 72%;
}
.f-audit-ico {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center;
  background: rgba(251,146,60,.10); border: 1px solid var(--color-glass-border);
}
.f-audit-ico svg { width: 22px; height: 22px; }
.f-audit-row h4 { margin: 0 0 .3rem; font-family: var(--font-head); font-size: 1rem; color: var(--color-text-primary); }
.f-audit-row p { margin: 0; font-size: .9rem; line-height: 1.5; color: var(--color-text-secondary); }
/* La fila destacada: Salud SEO 0–100 (ancho completo, degradé) */
.f-audit-row.f-audit-score {
  grid-column: 1 / -1;
  background: linear-gradient(120deg, rgba(251,146,60,.10), rgba(244,63,94,.08));
  border-color: rgba(251,146,60,.30); align-items: center;
}
.f-score-badge {
  flex: 0 0 auto; width: 58px; height: 58px; border-radius: 14px; display: grid; place-items: center;
  font-family: var(--font-head); font-weight: 700; font-size: 1.15rem; color: #0b0b0f;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
}
.f-audit-row.f-audit-score h4 { font-size: 1.1rem; }

/* ---------- Qué puede lograr (resultados) ---------- */
.f-results-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.f-result {
  position: relative; text-align: center; background: var(--color-background-alt);
  border: 1px solid var(--color-glass-border); border-radius: 16px;
  padding: 1.75rem 1.5rem; --bgw-glow: 24deg 92% 72%;
}
.f-result-ico { width: 52px; height: 52px; margin: 0 auto 1rem; display: grid; place-items: center; }
.f-result-ico svg { width: 30px; height: 30px; }
.f-result h3 { font-family: var(--font-head); font-size: 1.08rem; margin: 0 0 .5rem; color: var(--color-text-primary); }
.f-result p { color: var(--color-text-secondary); font-size: .93rem; line-height: 1.55; margin: 0; }

/* ---------- Por qué confiar (3 pilares) ---------- */
.f-trust-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.f-trust-card {
  position: relative; background: var(--color-surface);
  border: 1px solid var(--color-glass-border); border-radius: 16px;
  padding: 1.6rem 1.5rem; --bgw-glow: 24deg 92% 72%;
}
.f-trust-card svg.f-trust-ico { width: 30px; height: 30px; margin-bottom: .9rem; }
.f-trust-card h3 { font-family: var(--font-head); font-size: 1.05rem; margin: 0 0 .5rem; color: var(--color-text-primary); }
.f-trust-card p { color: var(--color-text-secondary); font-size: .92rem; line-height: 1.55; margin: 0; }
.f-trust-card strong { color: var(--color-text-primary); }
.f-trust-card .f-stat {
  font-family: var(--font-head); font-weight: 700; font-size: 1.9rem;
  background: linear-gradient(120deg, var(--color-accent-start), var(--color-accent-end));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  display: inline-block; margin-bottom: .2rem;
}

/* ---------- Para quién ---------- */
.f-who-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: stretch; }
.f-who {
  position: relative; background: var(--color-background-alt);
  border: 1px solid var(--color-glass-border); border-top: 3px solid transparent;
  border-radius: 16px; padding: 1.75rem; display: flex; flex-direction: column;
  --bgw-glow: 24deg 92% 72%;
}
.f-who-primary { border-top-color: var(--color-accent-start); }
.f-who-secondary { border-top-color: rgba(251,146,60,.45); }
.f-who-head { display: flex; align-items: center; gap: .7rem; margin-bottom: .5rem; }
.f-who-head svg { width: 26px; height: 26px; }
.f-who-head h3 { font-family: var(--font-head); font-size: 1.2rem; margin: 0; color: var(--color-text-primary); }
.f-who-tag { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; color: #fbbf24; border: 1px solid var(--color-glass-border); border-radius: 6px; padding: .1rem .45rem; margin-left: auto; }
.f-who-lead { color: var(--color-text-primary); font-weight: 600; margin: 0 0 .9rem; }
.f-who ul { list-style: none; padding: 0; margin: 0; }
.f-who li { position: relative; padding-left: 1.5rem; margin-bottom: .55rem; color: var(--color-text-secondary); line-height: 1.5; font-size: .93rem; }
.f-who li::before { content: '✓'; position: absolute; left: 0; top: 0; color: var(--color-success); font-weight: 700; }
.f-who strong { color: var(--color-text-primary); }

/* ============================ PRECIO ============================ */
.f-price { max-width: 920px; margin: 5rem auto; padding: 0 1.5rem; }
.f-price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; align-items: stretch; }
.f-plan {
  position: relative; display: flex; flex-direction: column;
  background: var(--color-background-alt); border: 1px solid var(--color-glass-border);
  border-radius: 18px; padding: 1.9rem 1.6rem; --bgw-glow: 24deg 92% 72%;
}
.f-plan-featured {
  border-color: rgba(251,146,60,.40);
  background: linear-gradient(160deg, rgba(251,146,60,.08), var(--color-background-alt));
  box-shadow: 0 0 40px rgba(251,146,60,.10);
}
.f-plan-badge {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  font-family: var(--font-mono); font-size: .66rem; letter-spacing: .06em; text-transform: uppercase;
  color: #0b0b0f; background: linear-gradient(135deg, #fbbf24, #f59e0b);
  border-radius: 999px; padding: .25rem .8rem; font-weight: 700;
}
.f-plan-name { font-family: var(--font-mono); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-secondary); margin: 0 0 .6rem; }
.f-plan-price { font-family: var(--font-head); margin: 0 0 .3rem; color: var(--color-text-primary); }
.f-plan-price .f-amount { font-size: 2.6rem; font-weight: 700; }
.f-plan-price .f-cur { font-size: 1.1rem; color: var(--color-text-secondary); vertical-align: super; }
.f-plan-tagline { color: var(--color-text-secondary); font-size: .9rem; margin: 0 0 1.25rem; line-height: 1.5; min-height: 2.4em; }
.f-plan ul { list-style: none; padding: 0; margin: 0 0 1.5rem; flex: 1; }
.f-plan li { position: relative; padding-left: 1.4rem; margin-bottom: .55rem; color: var(--color-text-secondary); font-size: .9rem; line-height: 1.5; }
.f-plan li::before { content: '✓'; position: absolute; left: 0; color: var(--color-success); font-weight: 700; }
.f-plan strong { color: var(--color-text-primary); }
.f-plan .cta-button, .f-plan .cta-button-ghost-f { width: 100%; text-align: center; box-sizing: border-box; margin-top: auto; }
.f-pay-cop { display: block; width: 100%; box-sizing: border-box; margin-top: .6rem; padding: .72rem 1rem; text-align: center; text-decoration: none; border: 1px solid var(--color-glass-border); border-radius: 999px; background: transparent; color: var(--color-text-primary); font-family: var(--font-mono); font-size: .82rem; font-weight: 600; letter-spacing: .01em; transition: border-color .2s ease, background .2s ease; }
.f-pay-cop:hover { border-color: var(--color-accent-start); background: rgba(251,146,60,.08); text-decoration: none; }
.f-plan .f-pp { width: 100%; margin-top: auto; min-height: 46px; }
.f-pay-ok { text-align: center; font-weight: 600; font-size: .92rem; color: var(--color-success); line-height: 1.5; }
.f-pay-err { text-align: center; font-size: .82rem; color: #f87171; margin: .5rem 0 0; }
.f-price-note { text-align: center; color: var(--color-text-secondary); font-size: .85rem; margin: 1.5rem auto 0; max-width: 620px; line-height: 1.5; }
.f-price-note a { color: var(--color-accent-start); }

/* ============================ CTA FINAL ============================ */
.f-final { max-width: 760px; margin: 5rem auto 4rem; padding: 0 1.5rem; }
.f-final-card {
  position: relative; text-align: center; border-radius: 20px;
  background: linear-gradient(160deg, rgba(251,146,60,.10), rgba(244,63,94,.06), var(--color-background-alt));
  border: 1px solid rgba(251,146,60,.28); padding: 2.75rem 2rem; --bgw-glow: 12deg 90% 62%;
}
.f-final-card h2 { font-family: var(--font-head); font-size: clamp(1.6rem, 3.5vw, 2.2rem); margin: 0 0 .8rem; color: var(--color-text-primary); letter-spacing: -0.02em; }
.f-final-card p { color: var(--color-text-secondary); line-height: 1.6; margin: 0 auto 1.75rem; max-width: 540px; }
.f-final-card strong { color: var(--color-text-primary); }
.f-final .f-cta-row { margin: 0; }

/* ============================ GRÁFICAS ANIMADAS ============================
   Bloques visuales que comunican calidad (contadores, gauge, cobertura) y
   proceso ("lo que puedes lograr"). Animación por scroll vía faro.js
   (IntersectionObserver + count-up). Fallback reduced-motion = estado final. */

/* ---------- A1) Contadores animados ---------- */
.f-metrics {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem;
  margin-top: 2.25rem;
}
.f-metric {
  position: relative; text-align: center;
  background: var(--color-background-alt); border: 1px solid var(--color-glass-border);
  border-radius: 16px; padding: 1.6rem 1rem; --bgw-glow: 24deg 92% 72%;
}
.f-metric .fg-count {
  display: block; font-family: var(--font-head); font-weight: 700;
  font-size: clamp(2.2rem, 6vw, 3rem); line-height: 1; letter-spacing: -0.02em;
  background: linear-gradient(120deg, var(--color-accent-start), var(--color-accent-end));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  font-variant-numeric: tabular-nums;
}
.f-metric .f-metric-label {
  display: block; margin-top: .55rem; color: var(--color-text-secondary);
  font-size: .86rem; line-height: 1.4;
}
.f-metric .f-metric-label strong { color: var(--color-text-primary); }

/* ---------- A2) Gauge Salud SEO 0–100 ---------- */
.f-gauge-block {
  display: grid; grid-template-columns: 220px 1fr; gap: 1.75rem; align-items: center;
  background: linear-gradient(120deg, rgba(251,146,60,.08), rgba(244,63,94,.06), var(--color-background-alt));
  border: 1px solid rgba(251,146,60,.28); border-radius: 18px;
  padding: 1.75rem 2rem; margin-top: 1.25rem; --bgw-glow: 12deg 90% 62%; position: relative;
}
.f-gauge { width: 200px; height: 128px; display: block; margin: 0 auto; }
.f-gauge .fg-arc-bg { stroke: rgba(255,255,255,.10); }
.f-gauge .fg-arc-val { stroke: url(#fgSolarStroke); transition: none; }
.f-gauge .fg-num {
  font-family: var(--font-head); font-weight: 700; font-size: 30px;
  fill: var(--color-text-primary);
}
.f-gauge .fg-scale { fill: var(--color-text-secondary); font-family: var(--font-mono); font-size: 9px; }
.f-gauge-caption h3 { font-family: var(--font-head); font-size: 1.15rem; margin: 0 0 .5rem; color: var(--color-text-primary); }
.f-gauge-caption p { color: var(--color-text-secondary); font-size: .95rem; line-height: 1.55; margin: 0 0 .6rem; }
.f-gauge-caption strong { color: var(--color-text-primary); }
.f-example-tag {
  display: inline-flex; align-items: center; gap: .35rem;
  font-family: var(--font-mono); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase;
  color: #fbbf24; border: 1px dashed rgba(251,191,36,.5); border-radius: 6px; padding: .15rem .5rem;
}

/* ---------- A3) Barras de cobertura (9 áreas) ---------- */
.f-cover { margin-top: 1.25rem; display: grid; gap: .7rem; position: relative; }
/* Tag "ejemplo" del bloque de barras (honestidad, igual al del gauge) */
.f-bars-tagwrap { display: flex; justify-content: flex-end; margin-bottom: .25rem; }
.f-cover-row { display: grid; grid-template-columns: 160px 1fr; gap: 1rem; align-items: center; }
.f-cover-name {
  font-size: .88rem; color: var(--color-text-primary); text-align: right;
  display: inline-flex; align-items: center; gap: .45rem; justify-content: flex-end;
}
.f-cover-name svg { width: 16px; height: 16px; flex: 0 0 auto; }
.f-cover-track {
  position: relative; height: 12px; border-radius: 999px;
  background: rgba(255,255,255,.06); overflow: hidden; border: 1px solid var(--color-glass-border);
}
.f-cover-fill {
  position: absolute; inset: 0; transform-origin: left center; transform: scaleX(0);
  border-radius: 999px;
  background: linear-gradient(90deg, var(--color-accent-start), var(--color-accent-end));
  transition: transform .9s cubic-bezier(.22,.61,.36,1);
}
.f-bars.is-in .f-cover-fill, .f-bars.is-final .f-cover-fill { transform: scaleX(var(--w, 1)); }
/* escalonado sutil para que las barras entren en cascada */
.f-bars.is-in .f-cover-row:nth-child(1) .f-cover-fill { transition-delay: 0s; }
.f-bars.is-in .f-cover-row:nth-child(2) .f-cover-fill { transition-delay: .06s; }
.f-bars.is-in .f-cover-row:nth-child(3) .f-cover-fill { transition-delay: .12s; }
.f-bars.is-in .f-cover-row:nth-child(4) .f-cover-fill { transition-delay: .18s; }
.f-bars.is-in .f-cover-row:nth-child(5) .f-cover-fill { transition-delay: .24s; }
.f-bars.is-in .f-cover-row:nth-child(6) .f-cover-fill { transition-delay: .30s; }
.f-bars.is-in .f-cover-row:nth-child(7) .f-cover-fill { transition-delay: .36s; }
.f-bars.is-in .f-cover-row:nth-child(8) .f-cover-fill { transition-delay: .42s; }
.f-bars.is-in .f-cover-row:nth-child(9) .f-cover-fill { transition-delay: .48s; }
.f-bars.is-final .f-cover-fill { transition: none; }
.f-cover-cap { margin: 1.1rem auto 0; text-align: center; color: var(--color-text-secondary); font-size: .86rem; max-width: 620px; }
.f-cover-cap strong { color: var(--color-text-primary); }

/* ---------- B4) Camino conceptual "lo que puedes lograr" ---------- */
.f-journey { margin-top: 1.5rem; }
.f-jtrack {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; position: relative;
}
/* línea base + línea que se "dibuja" */
.f-jtrack::before {
  content: ''; position: absolute; top: 30px; left: 12%; right: 12%; height: 3px;
  background: rgba(255,255,255,.08); border-radius: 2px;
}
.f-jtrack::after {
  content: ''; position: absolute; top: 30px; left: 12%; right: 12%; height: 3px;
  background: linear-gradient(90deg, var(--color-accent-start), var(--color-accent-end));
  border-radius: 2px; transform: scaleX(0); transform-origin: left center;
  transition: transform 1.4s cubic-bezier(.22,.61,.36,1);
}
.f-path.is-in .f-jtrack::after, .f-path.is-final .f-jtrack::after { transform: scaleX(1); }
.f-path.is-final .f-jtrack::after { transition: none; }
.f-jstep { position: relative; text-align: center; }
.f-jnode {
  width: 62px; height: 62px; margin: 0 auto .8rem; border-radius: 50%;
  display: grid; place-items: center; position: relative; z-index: 1;
  background: var(--color-background-alt); border: 1px solid var(--color-glass-border);
  opacity: 0; transform: translateY(8px) scale(.9);
  transition: opacity .45s ease, transform .45s ease;
}
.f-jnode svg { width: 30px; height: 30px; }
.f-jstep-last .f-jnode { border-color: rgba(251,146,60,.55); box-shadow: 0 0 26px rgba(251,146,60,.22); }
.f-path.is-in .f-jstep:nth-child(1) .f-jnode { transition-delay: .1s; }
.f-path.is-in .f-jstep:nth-child(2) .f-jnode { transition-delay: .45s; }
.f-path.is-in .f-jstep:nth-child(3) .f-jnode { transition-delay: .8s; }
.f-path.is-in .f-jstep:nth-child(4) .f-jnode { transition-delay: 1.15s; }
.f-path.is-in .f-jnode, .f-path.is-final .f-jnode { opacity: 1; transform: translateY(0) scale(1); }
.f-path.is-final .f-jnode { transition: none; }
.f-jstep h4 { font-family: var(--font-head); font-size: .98rem; margin: 0 0 .3rem; color: var(--color-text-primary); }
.f-jstep p { color: var(--color-text-secondary); font-size: .82rem; line-height: 1.45; margin: 0; }

/* ---------- B5) Ilustración GEO: pregunta a la IA → cita tu marca ---------- */
.f-geo {
  margin-top: 1.75rem; max-width: 560px; margin-left: auto; margin-right: auto;
  background: var(--color-surface); border: 1px solid var(--color-glass-border);
  border-radius: 16px; padding: 1.35rem 1.5rem; position: relative; --bgw-glow: 24deg 92% 72%;
}
.f-geo-tag {
  position: absolute; top: -11px; right: 16px;
  font-family: var(--font-mono); font-size: .62rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--color-text-secondary); background: var(--color-background-alt);
  border: 1px dashed var(--color-glass-border); border-radius: 6px; padding: .12rem .5rem;
}
.f-geo-q {
  display: flex; gap: .6rem; align-items: flex-start; margin-bottom: .9rem;
  color: var(--color-text-secondary); font-size: .92rem; line-height: 1.5;
}
.f-geo-q svg { width: 20px; height: 20px; flex: 0 0 auto; margin-top: .1rem; }
.f-geo-a {
  display: flex; gap: .6rem; align-items: flex-start;
  color: var(--color-text-primary); font-size: .95rem; line-height: 1.55;
  border-top: 1px solid var(--color-glass-border); padding-top: .9rem;
}
.f-geo-a svg { width: 20px; height: 20px; flex: 0 0 auto; margin-top: .1rem; }
.f-geo-cite {
  font-weight: 700;
  background: linear-gradient(90deg, var(--color-accent-start), var(--color-accent-end));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.f-geo-a .f-geo-cite { position: relative; }

/* ============================ REVEAL DE TARJETAS (patrón del sitio) ============================
   Mismo lenguaje que /js/script.js del sitio: opacity 0→1 + translateY(20px→0),
   transición .6s ease-out, disparado al entrar en viewport (faro.js añade .is-revealed).
   El stagger entre tarjetas del mismo grid lo aplica faro.js con data-reveal-delay. */
.f-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .6s ease-out, transform .6s ease-out;
}
.f-reveal.is-revealed { opacity: 1; transform: translateY(0); }

/* hover-lift (regla del sitio, translateY(-5px)) para las 4 familias de tarjetas.
   Reveal y hover comparten transform (.6s ease-out ya declarado en .f-reveal);
   sobre una tarjeta ya revelada, el hover la sube a -5px. */
.f-reveal.is-revealed:hover { transform: translateY(-5px); }

/* ============================ RESPONSIVE ============================ */
@media (max-width: 860px) {
  .f-benes-grid, .f-results-grid, .f-trust-grid, .f-price-grid { grid-template-columns: 1fr; }
  .f-audit-grid, .f-who-grid { grid-template-columns: 1fr; }
  .f-metrics { grid-template-columns: repeat(2, 1fr); }
  .f-gauge-block { grid-template-columns: 1fr; text-align: center; }
  .f-gauge-caption { text-align: center; }
  .f-jtrack { grid-template-columns: repeat(2, 1fr); gap: 1.75rem 1rem; }
  .f-jtrack::before, .f-jtrack::after { display: none; }
}
@media (max-width: 560px) {
  .f-cta-row { flex-direction: column; align-items: stretch; }
  .f-cta-row .cta-button, .f-cta-row .cta-button-ghost-f { text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .f-hero-logo { animation: none; }
  .f-bene, .f-result { transition: none; }
  .f-bene:hover, .f-result:hover { transform: none; }
  /* Reveal de tarjetas: visibles sin animar. faro.js aplica .is-revealed directo. */
  .f-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .f-reveal.is-revealed:hover { transform: none; }
  /* Gráficas: sin animación → estado final directo. faro.js aplica .is-final
     (barras llenas, nodos visibles, gauge lleno verde, contadores en su valor). */
  .f-cover-fill, .f-jtrack::after, .f-jnode { transition: none !important; }
}