/* ============================================================
   IA Crítica — FUSION 2 Homepage
   Structure = hybrid (editorial masthead, centered hero, cards grid, restrained motion)
   Voice     = cyberpunk (Orbitron/Chakra Petch/Space Mono + neon cyan/magenta/purple)
   Scoped to body.fusion2-home so it never leaks into Astra child pages.
   ============================================================ */

:root{
  /* palette — deep cold near-black base, neon cyan/magenta/purple as the voice */
  --bg:            #05070f;
  --bg-2:          #0a0f1e;
  --bg-3:          #0d1428;
  --surface:       rgba(14, 20, 40, 0.62);
  --surface-solid: #0c1222;
  --cyan:          #00e5ff;
  --cyan-soft:     rgba(0, 229, 255, 0.16);
  --magenta:       #ff2fd6;
  --magenta-soft:  rgba(255, 47, 214, 0.12);
  --purple:        #7a5cff;
  --text:          #eaf6ff;
  --text-dim:      #93a7c4;
  --text-faint:    #5b6d8f;
  --line:          rgba(0, 229, 255, 0.20);
  --line-soft:     rgba(0, 229, 255, 0.10);
  --line-strong:   rgba(0, 229, 255, 0.30);

  /* type — cyberpunk set: display/head/body/mono */
  --font-display: "Orbitron", "Segoe UI", sans-serif;
  --font-head:    "Chakra Petch", "Segoe UI", sans-serif;
  --font-body:    "IBM Plex Sans", system-ui, sans-serif;
  --font-mono:    "Space Mono", ui-monospace, monospace;

  /* shape / motion */
  --radius: 10px;
  --ease:   cubic-bezier(.22,.68,.22,1);
}

html.fusion2-home{ scroll-behavior:smooth; }

body.fusion2-home{
  font-family:var(--font-body);
  background:
    radial-gradient(ellipse 90% 55% at 50% -8%, rgba(0,229,255,0.055), transparent 60%),
    radial-gradient(ellipse 60% 40% at 85% 92%, rgba(255,47,214,0.04), transparent 60%),
    var(--bg);
  color:var(--text);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* reset 用 :where() 使特异性为 0，保证单类规则（.section 等）的 padding 可覆盖 */
:where(body.fusion2-home) :where(*){ box-sizing:border-box; margin:0; padding:0; }

body.fusion2-home ::selection{ background:var(--magenta); color:#fff; }

body.fusion2-home a{ color:inherit; text-decoration:none; }

/* ============================ ATMOSPHERE ============================ */
/* fine neon grid — faint tech detail, restrained (structure = hybrid) */
.bg-grid{
  position:fixed; inset:0; z-index:-3; pointer-events:none;
  background-image:
    linear-gradient(rgba(0,229,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,229,255,0.03) 1px, transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 120% 85% at 50% 0%, #000 25%, transparent 75%);
          mask-image:radial-gradient(ellipse 120% 85% at 50% 0%, #000 25%, transparent 75%);
}

/* ambient depth — very low opacity, no light pollution */
.ambient{
  position:fixed; border-radius:50%; filter:blur(130px); z-index:-2;
  pointer-events:none;
}
.ambient-a{ width:52vw; height:52vw; top:-18vw; right:-14vw; background:radial-gradient(circle, rgba(0,229,255,0.08), transparent 65%); }
.ambient-b{ width:44vw; height:44vw; bottom:-16vw; left:-12vw; background:radial-gradient(circle, rgba(255,47,214,0.06), transparent 65%); }

/* ============================ SCROLL PROGRESS ============================ */
.progress{
  position:fixed; top:0; left:0; height:2px; width:0;
  background:linear-gradient(90deg, var(--cyan), var(--magenta));
  box-shadow:0 0 12px rgba(0,229,255,.7);
  z-index:200;
}

/* ============================ MASTHEAD NAV ============================ */
.nav{
  position:sticky; top:0; z-index:100;
  background:rgba(5,7,15,0.84);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-strong);
  box-shadow:0 2px 0 var(--line-soft); /* second hairline = double rule */
}
.nav-inner{
  max-width:1240px; margin:0 auto; padding:0 28px;
  height:84px; display:flex; align-items:center; gap:24px;
}
/* logo = cyberpunk: glowing dot + Orbitron uppercase, magenta-accented "Crítica" */
.logo{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-display); font-weight:800; font-size:1.22rem;
  letter-spacing:.12em; text-transform:uppercase; line-height:1;
}
.logo .logo-dot{
  width:10px; height:10px; border-radius:50%; flex-shrink:0;
  background:var(--cyan); box-shadow:0 0 12px var(--cyan);
  animation:pulseGlow 2.4s var(--ease) infinite;
}
.logo em{
  font-style:normal; color:var(--magenta);
  text-shadow:0 0 14px rgba(255,47,214,.55);
}
@keyframes pulseGlow{
  0%,100%{ box-shadow:0 0 0 0 rgba(0,229,255,.0); }
  50%{ box-shadow:0 0 0 6px rgba(0,229,255,.12); }
}
.nav-links{
  display:flex; align-items:center; gap:30px; list-style:none;
  margin-left:auto;
}
.nav-links a{
  font-family:var(--font-head); font-weight:500; font-size:.98rem;
  letter-spacing:.05em; color:var(--text-dim); position:relative; padding:6px 2px;
  transition:color .25s;
}
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:var(--cyan); box-shadow:0 0 8px var(--cyan);
  transition:width .3s var(--ease);
}
.nav-links a:hover{ color:var(--text); }
.nav-links a:hover::after{ width:100%; }
.nav-cta{ flex-shrink:0; }
.nav-cta .btn{ padding:11px 20px; font-size:.78rem; }

/* ============================ BUTTONS ============================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--font-head); font-weight:600; font-size:.95rem;
  letter-spacing:.08em; text-transform:uppercase;
  padding:14px 26px; border-radius:6px; border:1px solid transparent;
  cursor:pointer;
  transition:transform .25s var(--ease), box-shadow .25s, background .25s, border-color .25s;
}
.btn-primary{
  color:#03151a; background:linear-gradient(135deg, var(--cyan), #00b3ff);
  border-color:rgba(0,229,255,.4);
  box-shadow:0 0 22px rgba(0,229,255,.35);
}
.btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 0 40px rgba(0,229,255,.6), 0 10px 30px rgba(0,0,0,.4);
}
.btn-ghost{
  color:var(--text); border-color:rgba(0,229,255,.45);
  background:rgba(0,229,255,.04);
  box-shadow:inset 0 0 18px rgba(0,229,255,.06);
}
.btn-ghost:hover{
  border-color:var(--cyan); color:#fff; transform:translateY(-2px);
  box-shadow:0 0 26px rgba(0,229,255,.35), inset 0 0 18px rgba(0,229,255,.14);
}
.btn-magenta{
  color:#fff; background:linear-gradient(135deg, var(--magenta), #a11eff);
  border-color:rgba(255,47,214,.4);
  box-shadow:0 0 22px rgba(255,47,214,.35);
}
.btn-magenta:hover{
  transform:translateY(-2px);
  box-shadow:0 0 40px rgba(255,47,214,.6), 0 10px 30px rgba(0,0,0,.4);
}
.nav-toggle{ display:none; background:none; border:none; cursor:pointer; padding:8px; }
.nav-toggle .bar{
  display:block; width:22px; height:2px; margin:5px 0;
  background:var(--cyan); box-shadow:0 0 8px var(--cyan); transition:.3s;
}
.nav.open .nav-toggle .bar:nth-child(1){ transform:translateY(7px) rotate(45deg); background:var(--magenta); }
.nav.open .nav-toggle .bar:nth-child(2){ opacity:0; }
.nav.open .nav-toggle .bar:nth-child(3){ transform:translateY(-7px) rotate(-45deg); background:var(--magenta); }

/* ============================ HERO ============================ */
.hero{
  position:relative; max-width:1240px; margin:0 auto;
  padding:92px 28px 80px; text-align:center;
}
.hero-rule{
  width:min(560px, 60%); height:1px; margin:0 auto 34px;
  background:linear-gradient(90deg, transparent, var(--line-strong), transparent);
}
.hero-kicker{
  font-family:var(--font-mono); font-size:.78rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--cyan);
  text-shadow:0 0 12px rgba(0,229,255,.55);
  display:flex; align-items:center; justify-content:center; gap:16px;
  margin-bottom:30px;
}
.hero-kicker::before,
.hero-kicker::after{ content:""; width:40px; height:1px; background:var(--line-strong); }
.hero-title{
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(2.1rem, 5.6vw, 4.3rem);
  line-height:1.08; letter-spacing:.02em; text-transform:uppercase;
  margin-bottom:30px;
}
/* the neon memory point — gradient + soft glow, elsewhere restrained */
.hero-title .accent{
  display:block; font-weight:900;
  background:linear-gradient(92deg, var(--cyan) 0%, var(--purple) 55%, var(--magenta) 120%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 18px rgba(0,229,255,.4)) drop-shadow(0 0 52px rgba(255,47,214,.32));
}
.hero-sub{
  font-size:1.18rem; line-height:1.7; color:var(--text-dim);
  max-width:58ch; margin:0 auto 40px;
}
.hero-cta{ display:flex; gap:16px; flex-wrap:wrap; justify-content:center; }

/* hero entrance — soft fade-up (restrained, structure = hybrid) */
.hero > *{ animation:rise .85s var(--ease) backwards; }
.hero .hero-rule{ animation-delay:.02s; }
.hero .hero-kicker{ animation-delay:.1s; }
.hero .hero-title{ animation-delay:.2s; }
.hero .hero-sub{ animation-delay:.32s; }
.hero .hero-cta{ animation-delay:.44s; }
@keyframes rise{
  from{ opacity:0; transform:translateY(18px); }
  to{ opacity:1; transform:none; }
}

/* ============================ METRICS BAR ============================ */
.metrics{
  border-block:1px solid var(--line-soft);
  background:linear-gradient(180deg, rgba(0,229,255,0.04), rgba(255,47,214,0.03));
}
.metrics-inner{
  max-width:1240px; margin:0 auto; padding:28px 28px;
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
}
.metric{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px;
}
.metric::before{
  content:""; width:18px; height:1px; background:var(--cyan); margin-bottom:8px;
  box-shadow:0 0 8px var(--cyan); opacity:.85;
}
.metric + .metric{ border-left:1px solid var(--line-soft); }
.metric-num{
  font-family:var(--font-display); font-weight:800;
  font-size:1.7rem; letter-spacing:.02em; color:var(--cyan);
  text-shadow:0 0 18px rgba(0,229,255,.55);
  white-space:nowrap;
}
.metric-label{
  font-family:var(--font-head); font-weight:500;
  font-size:.96rem; letter-spacing:.04em; color:var(--text-dim);
}

/* ============================ SECTION SHELL ============================ */
.section{ max-width:1240px; margin:0 auto; padding:96px 28px; }
.section-head{ margin-bottom:52px; }
.section-kicker{
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--cyan);
  text-shadow:0 0 12px rgba(0,229,255,.45);
  display:flex; align-items:center; gap:14px; margin-bottom:16px;
}
.section-kicker::before{ content:""; width:26px; height:1px; background:var(--cyan); box-shadow:0 0 8px var(--cyan); }
.section-title{
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(1.7rem, 3.8vw, 2.6rem);
  line-height:1.1; letter-spacing:.03em; text-transform:uppercase;
}
.section-title .accent{ color:var(--cyan); text-shadow:0 0 18px rgba(0,229,255,.5); }

/* ============================ HOW WE EVALUATE ============================ */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; }
.step{
  position:relative; border-top:2px solid var(--line-strong); padding-top:26px;
  transition:border-color .3s;
}
.step:hover{ border-color:var(--cyan); }
.step-num{
  display:block; font-family:var(--font-display); font-weight:800;
  font-size:2.4rem; line-height:1; margin-bottom:16px;
  background:linear-gradient(120deg, var(--cyan), var(--magenta));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 14px rgba(0,229,255,.3));
}
.step-title{
  font-family:var(--font-head); font-weight:700; font-size:1.35rem;
  letter-spacing:.03em; margin-bottom:12px;
}
.step p{ color:var(--text-dim); font-size:1rem; line-height:1.65; max-width:36ch; }

/* ============================ CARDS GRID ============================ */
.cards-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.card{
  position:relative; display:flex; flex-direction:column; overflow:hidden;
  background:linear-gradient(180deg, var(--bg-3), var(--surface-solid));
  border:1px solid var(--line-soft); border-radius:var(--radius);
  padding:28px 26px 24px;
  transition:transform .35s var(--ease), border-color .3s, box-shadow .35s;
}
.card::before{
  content:""; position:absolute; top:0; left:0; height:2px; width:0;
  background:linear-gradient(90deg, var(--cyan), var(--magenta), transparent 75%);
  transition:width .45s var(--ease);
}
.card:hover{
  transform:translateY(-5px);
  border-color:rgba(0,229,255,.45);
  box-shadow:0 16px 44px rgba(0,0,0,0.4), 0 0 34px rgba(0,229,255,.16), 0 0 70px rgba(255,47,214,.07);
}
.card:hover::before{ width:100%; }

/* stretched link — whole card clickable */
.card a.card-link{
  position:absolute; inset:0; z-index:2;
}
.card:hover .card-arrow{ transform:translateX(5px); color:var(--cyan); }

.card-top{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:20px; }
.card-cat{
  font-family:var(--font-mono); font-size:.7rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--cyan); text-shadow:0 0 10px rgba(0,229,255,.5);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.card-veredicto{
  font-family:var(--font-mono); font-size:.68rem; letter-spacing:.14em;
  text-transform:uppercase; padding:5px 11px; border-radius:4px;
  border:1px solid; white-space:nowrap;
}
.v-rec{ color:var(--cyan); border-color:rgba(0,229,255,.5); background:rgba(0,229,255,.08); box-shadow:inset 0 0 12px rgba(0,229,255,.05); }
.v-bueno{ color:var(--magenta); border-color:rgba(255,47,214,.5); background:rgba(255,47,214,.08); box-shadow:inset 0 0 12px rgba(255,47,214,.05); }

.card-title{
  font-family:var(--font-head); font-weight:700;
  font-size:1.5rem; letter-spacing:.02em; line-height:1.18; margin-bottom:12px;
}
.card-sum{ color:var(--text-dim); font-size:.97rem; line-height:1.6; margin-bottom:22px; flex:1; }

.card-foot{
  display:flex; align-items:flex-end; justify-content:space-between;
  border-top:1px solid var(--line-soft); padding-top:18px;
}
.card-score{ position:relative; display:flex; align-items:baseline; gap:6px; padding-bottom:10px; }
.card-score::after{
  content:""; position:absolute; left:0; bottom:0; width:46px; height:1px;
  background:var(--cyan); box-shadow:0 0 8px var(--cyan); /* signature rule = editorial stamp */
}
.score-num{
  font-family:var(--font-display); font-weight:800; font-size:2.2rem; line-height:1;
  color:var(--text); text-shadow:0 0 18px rgba(0,229,255,.5);
}
.score-total{ font-family:var(--font-mono); font-size:.82rem; color:var(--text-faint); }
.card-arrow{
  font-family:var(--font-mono); font-size:1.3rem; color:var(--text-faint);
  transition:transform .3s var(--ease), color .3s;
}

/* ============================ NEWSLETTER ============================ */
.newsletter{
  max-width:880px; margin:0 auto 96px; padding:64px 48px; text-align:center;
  background:linear-gradient(180deg, var(--bg-3), var(--surface-solid));
  border:1px solid var(--line);
  border-top:2px solid var(--line-strong);
  border-bottom:2px solid var(--line-strong);
}
.news-mark{
  width:8px; height:8px; transform:rotate(45deg); background:var(--cyan);
  box-shadow:0 0 12px rgba(0,229,255,.7);
  display:block; margin:0 auto 22px;
}
.news-title{
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(1.5rem, 3.4vw, 2.2rem); line-height:1.15; text-transform:uppercase;
  margin-bottom:18px;
}
.news-title .accent{ color:var(--magenta); text-shadow:0 0 20px rgba(255,47,214,.55); }
.news-text{ color:var(--text-dim); max-width:52ch; margin:0 auto 32px; font-size:1.05rem; line-height:1.65; }
.news-form{ display:flex; gap:12px; max-width:520px; margin:0 auto 18px; }
.news-form input{
  flex:1; min-width:0;
  font-family:var(--font-mono); font-size:.9rem; color:var(--text);
  background:rgba(5,7,15,0.85); border:1px solid var(--line);
  border-radius:6px; padding:14px 18px; outline:none;
  transition:border-color .3s, box-shadow .3s;
}
.news-form input::placeholder{ color:var(--text-faint); }
.news-form input:focus{
  border-color:var(--cyan);
  box-shadow:0 0 18px rgba(0,229,255,.3), inset 0 0 10px rgba(0,229,255,.08);
}
.news-note{ font-family:var(--font-mono); font-size:.76rem; letter-spacing:.06em; color:var(--text-faint); }

/* ============================ FOOTER ============================ */
.footer{ border-top:1px solid var(--line-soft); padding:56px 28px 44px; }
.footer-inner{ max-width:1240px; margin:0 auto; }
.footer-links{
  display:flex; flex-wrap:wrap; justify-content:center; gap:28px;
  list-style:none; margin-bottom:36px;
}
.footer-links a{
  font-family:var(--font-head); font-weight:500; font-size:.92rem;
  letter-spacing:.04em; color:var(--text-dim); transition:color .25s;
}
.footer-links a:hover{ color:var(--cyan); text-shadow:0 0 12px rgba(0,229,255,.5); }
.affiliate{
  max-width:820px; margin:0 auto 28px; text-align:center;
  font-size:.9rem; line-height:1.6; color:var(--text-faint);
  border:1px dashed var(--line); border-radius:8px; padding:16px 22px;
}
.affiliate::before{
  content:"AVISO · AFILIADOS"; display:block;
  font-family:var(--font-mono); font-size:.66rem; letter-spacing:.26em;
  color:var(--magenta); text-shadow:0 0 10px rgba(255,47,214,.5);
  margin-bottom:8px;
}
.copyright{ text-align:center; font-family:var(--font-mono); font-size:.78rem; letter-spacing:.06em; color:var(--text-faint); }
.copyright b{ color:var(--text-dim); }

/* ============================ REVEAL ============================ */
.reveal{
  opacity:0; transform:translateY(22px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
  transition-delay:var(--d,0s);
}
.reveal.in-view{ opacity:1; transform:none; }

/* ============================ RESPONSIVE ============================ */
@media (max-width: 980px){
  .hero{ padding:72px 24px 60px; }
  .cards-grid{ grid-template-columns:repeat(2,1fr); gap:22px; }
  .steps{ grid-template-columns:1fr; gap:26px; }
  .metrics-inner{ grid-template-columns:1fr; gap:20px; }
  .metric + .metric{ border-left:none; border-top:1px solid var(--line-soft); padding-top:18px; }
  .metric{ align-items:flex-start; }
  .metric-label{ text-align:left; }
}

@media (max-width: 680px){
  .nav-inner{ height:68px; padding:0 18px; }
  .nav-links{
    position:fixed; inset:68px 0 auto 0;
    flex-direction:column; gap:0;
    background:rgba(5,7,15,0.97); backdrop-filter:blur(16px);
    border-bottom:1px solid var(--line-strong);
    padding:8px 22px 20px;
    transform:translateY(-120%); transition:transform .4s var(--ease);
  }
  .nav.open .nav-links{ transform:none; }
  .nav-links a{ display:block; padding:14px 0; font-size:1rem; border-bottom:1px solid var(--line-soft); }
  .nav-cta{ display:none; }
  .nav-toggle{ display:block; }
  .section{ padding:64px 20px; }
  .cards-grid{ grid-template-columns:1fr; }
  .hero-title{ font-size:clamp(1.8rem, 9.5vw, 2.7rem); }
  .hero-kicker::before, .hero-kicker::after{ display:none; }
  .newsletter{ padding:48px 22px; }
  .news-form{ flex-direction:column; }
}