/* ── Cover Page Styles ─────────────────────────────────────────────────────── */

* { box-sizing: border-box; }
:root { --navy:#071426; --blue:#0b3b75; --cyan:#54d7ff; --gold:#ffd166; --paper:#f5f7fb; }
html { scroll-behavior:smooth; }
body { margin:0; color:#172033; background:
  radial-gradient(circle at 8% 55%,rgba(84,215,255,.10),transparent 24rem),
  linear-gradient(180deg,#f8fbff,var(--paper)); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
.site-nav { position:absolute; z-index:5; inset:0 0 auto; display:flex; align-items:center; justify-content:space-between; padding:1.2rem clamp(1.25rem,5vw,4.5rem); }
.brand { display:flex; align-items:center; gap:.7rem; color:white; font-size:.8rem; font-weight:800; letter-spacing:.12em; text-decoration:none; }
.brand-mark { display:grid; width:34px; height:34px; place-items:center; border:1px solid rgba(255,255,255,.4); border-radius:10px; background:rgba(255,255,255,.1); backdrop-filter:blur(10px); }
.nav-link { padding:.55rem .85rem; color:#d8ebff; border:1px solid rgba(216,235,255,.3); border-radius:999px; font-size:.78rem; font-weight:700; text-decoration:none; backdrop-filter:blur(10px); }
.nav-link:hover { color:#071426; background:white; }
.cover { min-height:100vh; min-height:100svh; position:relative; overflow:hidden; display:grid; place-items:center; padding:4rem 1.5rem 6rem;
  color:white; text-align:center; background:radial-gradient(ellipse at 50% 30%,#1e3a8a 0%,#0f172a 50%,#020617 100%); background-image:url("hero.png"); background-size:cover; background-position:center; background-repeat:no-repeat; }
.cover.has-hero::before { content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  background:linear-gradient(135deg,rgba(59,130,246,.15) 0%,rgba(147,51,234,.1) 30%,transparent 60%),
             linear-gradient(225deg,rgba(6,182,212,.1) 0%,rgba(59,130,246,.05) 50%,transparent 80%),
             linear-gradient(0deg,rgba(2,6,23,.8) 0%,rgba(2,6,23,.4) 50%,rgba(2,6,23,.6) 100%); }
.cover.has-hero .field { opacity:.08; mix-blend-mode:screen; }
.cover.has-hero .orbit { opacity:.2; }
.cover.has-hero .particle { opacity:.3; }
.field { position:absolute; inset:-15%; opacity:.27; background:
  repeating-radial-gradient(ellipse at 50% 50%,transparent 0 36px,rgba(84,215,255,.7) 38px 40px,transparent 42px 68px);
  transform:rotate(-12deg) scale(1.3,.72); }
.orbit { position:absolute; width:560px; height:180px; border:2px solid rgba(255,209,102,.55); border-radius:50%; transform:rotate(24deg); }
.orbit::before,.orbit::after { content:""; position:absolute; width:13px; height:13px; border-radius:50%; background:var(--gold); box-shadow:0 0 20px var(--gold); }
.orbit::before { left:7%; top:17%; } .orbit::after { right:7%; bottom:17%; }
.particle { position:absolute; border-radius:50%; background:rgba(96,165,250,.6); box-shadow:0 0 10px rgba(96,165,250,.4); }
.particle:nth-child(1) { width:4px; height:4px; top:20%; left:15%; animation:float-particle 8s ease-in-out infinite; }
.particle:nth-child(2) { width:6px; height:6px; top:60%; left:80%; animation:float-particle 12s ease-in-out infinite 1s; }
.particle:nth-child(3) { width:3px; height:3px; top:40%; left:60%; animation:float-particle 10s ease-in-out infinite 2s; }
.particle:nth-child(4) { width:5px; height:5px; top:80%; left:30%; animation:float-particle 14s ease-in-out infinite .5s; }
.particle:nth-child(5) { width:4px; height:4px; top:30%; left:90%; animation:float-particle 11s ease-in-out infinite 3s; }
@keyframes float-particle {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: .3; }
  25% { transform: translate(10px, -15px) scale(1.2); opacity: .6; }
  50% { transform: translate(-5px, -30px) scale(.8); opacity: .4; }
  75% { transform: translate(15px, -10px) scale(1.1); opacity: .5; }
}
.cover-content { position:relative; z-index:2; max-width:900px; }
.eyebrow { text-transform:uppercase; letter-spacing:.24em; color:var(--cyan); font-weight:700; font-size:.82rem; margin-bottom:.5rem; }
h1 { margin:.65rem 0 .4rem; font-size:clamp(3rem,7.5vw,6.4rem); line-height:.92; letter-spacing:-.055em; text-wrap:balance;
     background:linear-gradient(135deg,#ffffff 0%,#e0f2fe 50%,#7dd3fc 100%);
     -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; text-shadow:none; filter:drop-shadow(0 2px 10px rgba(59,130,246,.3)); }
.cover-subtitle { max-width:680px; margin:1.3rem auto 2.5rem; font-size:clamp(1rem,2vw,1.3rem); color:#cbd5e1; line-height:1.6; }
.cta { display:inline-flex; align-items:center; gap:.55rem; padding:.9rem 1.5rem; border-radius:999px; color:#071426;
      background:linear-gradient(135deg,#fbbf24 0%,#f59e0b 100%); font-weight:800; text-decoration:none;
      box-shadow:0 4px 20px rgba(251,191,36,.3),0 2px 8px rgba(251,191,36,.2); transition:all .3s ease; }
.cta:hover { transform:translateY(-3px); box-shadow:0 8px 30px rgba(251,191,36,.4),0 4px 12px rgba(251,191,36,.3); }
.author { margin-top:2.5rem; color:#94a3b8; font-size:.95rem; font-weight:500; }
.scroll-cue { position:absolute; z-index:3; left:50%; bottom:1.5rem; transform:translateX(-50%); display:flex; flex-direction:column;
  align-items:center; gap:.35rem; color:#94a3b8; text-decoration:none; text-transform:uppercase; letter-spacing:.16em; font-size:.66rem; }
.scroll-cue span { display:grid; place-items:center; width:34px; height:34px; border:1px solid rgba(148,163,184,.4); border-radius:50%;
  font-size:1.15rem; animation:float-down 1.8s ease-in-out infinite; background:rgba(15,23,42,.3); backdrop-filter:blur(4px); }
@keyframes float-down { 0%,100%{transform:translateY(0)} 50%{transform:translateY(6px)} }
main { max-width:1180px; margin:auto; padding:5rem 1.5rem 6rem; }
.intro { max-width:760px; margin:0 auto 3rem; text-align:center; }
.section-kicker { color:#0b69a3; font-size:.75rem; font-weight:850; letter-spacing:.18em; text-transform:uppercase; }
.intro h2 { margin:.4rem 0 .7rem; font-size:clamp(2rem,4vw,3.1rem); letter-spacing:-.035em; } .intro p { line-height:1.75; color:#526079; font-size:1.05rem; }
.facts { display:flex; justify-content:center; gap:clamp(1rem,5vw,4rem); margin:2rem auto 3.5rem; padding:1.25rem; border-block:1px solid #dce5ef; }
.fact strong { display:block; color:#0b3b75; font-size:1.35rem; } .fact span { color:#748198; font-size:.76rem; text-transform:uppercase; letter-spacing:.08em; }
.actions { display:flex; justify-content:center; flex-wrap:wrap; gap:.8rem; margin:1.5rem 0; }
.actions a { padding:.65rem 1rem; border:1px solid #bfd1e5; border-radius:8px; color:#0b4c8c; text-decoration:none; background:white; }
.chapters { display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:1.15rem; }
.card { position:relative; display:flex; min-height:175px; flex-direction:column; justify-content:space-between; overflow:hidden; padding:1.45rem; border-radius:18px; color:inherit; text-decoration:none; background:rgba(255,255,255,.88);
  border:1px solid #dce5ef; box-shadow:0 8px 24px rgba(7,20,38,.055); transition:transform .2s,box-shadow .2s,border-color .2s; }
.card::after { content:'Abrir capítulo  →'; color:#0b69a3; font-size:.78rem; font-weight:800; letter-spacing:.02em; }
.card::before { content:''; position:absolute; width:120px; height:120px; right:-55px; top:-60px; border-radius:50%; background:linear-gradient(135deg,rgba(84,215,255,.18),rgba(11,59,117,.08)); transition:transform .25s; }
.card:hover { transform:translateY(-6px); border-color:#76bde9; box-shadow:0 18px 38px rgba(7,20,38,.13); }
.card:hover::before { transform:scale(1.35); }
.number { display:inline-grid; place-items:center; width:34px; height:34px; border-radius:50%; color:white; background:linear-gradient(135deg,#0b4c8c,#18a8d8); font-weight:700; }
.card h3 { position:relative; margin:.9rem 0 1.4rem; line-height:1.3; font-size:1.08rem; }
footer { padding:2rem; text-align:center; color:#748198; border-top:1px solid #dce5ef; }
@media(max-width:600px) { .orbit{width:390px;height:125px}.chapters{grid-template-columns:1fr}.facts{gap:1rem}.fact strong{font-size:1.05rem}.site-nav{padding:1rem}.nav-link{display:none} }
@media(prefers-reduced-motion:reduce) { html{scroll-behavior:auto}.scroll-cue span{animation:none} }