/* ═══════════════════════════════════════════════════════════════════
   INVERSIÓN PRÓSPERA — styles.css
   Orden: Variables → Reset → Utilidades → Nav → Hero → 3D Books
          → Ebooks → Proceso → Testimonios → Blog → CTA → Newsletter
          → Footer → Accesibilidad → Media Queries
═══════════════════════════════════════════════════════════════════ */

/* ── DESIGN TOKENS ─────────────────────────────────────────────── */
:root {
  /* Colores */
  --bg:        #07060a;
  --bg2:       #0d0c12;
  --bg3:       #131118;
  --gold:      #c8a96d;
  --gold-lt:   #e2c98a;
  --gold-dim:  rgba(200,169,109,.10);
  --gold-glow: rgba(200,169,109,.22);
  --cream:     #f2e8d4;
  --muted:     #9c9489;
  --border:    rgba(200,169,109,.14);
  --border-md: rgba(200,169,109,.28);

  /* Tipografía */
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans:  'DM Sans', system-ui, sans-serif;

  /* Miscelánea */
  --ease: cubic-bezier(.4,0,.2,1);
  --max:  1200px;
}

/* ── RESET ──────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html  { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body {
  font-family: var(--sans);
  color: var(--cream);
  background-color: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  animation: pageFadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  padding-top: 38px;
}

@keyframes pageFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── URGENCY COMPONENT ─────────────────────────────────────────────── */
.urgency-banner {
  background: #0a0500;
  background-image: linear-gradient(90deg, #110800, #2b1b08, #110800);
  color: var(--gold-lt);
  text-align: center;
  padding: 8px 10px;
  font-size: 0.85rem;
  font-weight: 500;
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 9999;
  border-bottom: 1px solid var(--gold-dim);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
  box-shadow: 0 4px 20px rgba(0,0,0,0.8);
}
.urgency-banner strong { color: #fff; font-weight: 700; }
.u-time { display: inline-flex; align-items: center; gap: 6px; }
.u-timer {
  background: var(--gold);
  color: #000;
  padding: 2px 8px;
  border-radius: 4px;
  font-family: var(--sans);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.5px;
}
.u-timer.pulse { animation: flashTimer .8s ease infinite alternate; }
@keyframes flashTimer { from { opacity: 1; } to { opacity: 0.65; transform: scale(0.98); } }

/* Bundle Urgency */
.bundle-urgency { margin: 1.5rem 0; padding: 12px 1rem; background: rgba(200,169,109,0.05); border: 1px dashed var(--border-md); border-radius: 12px; display: inline-flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; border-color: rgba(200,169,109,0.3); }
.bundle-urgency span { color: var(--gold-lt); font-size: 0.85rem; font-weight: 600; line-height: 1.3; }
.b-timer { font-size: 1.25rem; line-height: 1; background: var(--bg3); color: var(--gold); border: 1px solid var(--border-md); padding: 6px 12px; border-radius: 6px; font-variant-numeric: tabular-nums; font-weight: 700; box-shadow: inset 0 2px 10px rgba(0,0,0,0.5); }
.b-timer.pulse { animation: flashTimer .8s ease infinite alternate; }

@media (max-width: 600px) {
  .urgency-banner { flex-direction: column; gap: 4px; padding: 6px 10px; font-size: 0.75rem; }
  body { padding-top: 54px; }
  .nav { top: 54px !important; }
  /* con position:absolute, el top del menú lo da top:100% del nav — no hay top que recalcular */
}
img   { max-width: 100%; display: block; }
a     { color: inherit; text-decoration: none; }
button{ cursor: pointer; border: none; background: none; font: inherit; }
ul    { list-style: none; }

/* Gradientes de fondo globales */
body::before, body::after {
  content: ''; position: fixed; border-radius: 50%;
  filter: blur(180px); z-index: -2; pointer-events: none; opacity: .8;
}
body::before { top: -10vh;  left: -10vw;  width: 60vw; height: 60vh; background: rgba(200,169,109,.05); }
body::after  { bottom: -20vh; right: -10vw; width: 70vw; height: 70vh; background: rgba(40,110,210,.04); }

/* ── UTILIDADES ─────────────────────────────────────────────────── */
.wrap    { max-width: var(--max); margin: 0 auto; padding: 0 2rem; }
.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; }


@media (prefers-reduced-motion: reduce) {  }

/* Heading decoration */
.eyebrow { font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); display: block; margin-bottom: .6rem; opacity: .9; }
.rule    { width: 44px; height: 1px; background: linear-gradient(90deg, var(--gold), transparent); margin-bottom: 1.25rem; transform-origin: left; animation: ruleGrow 1.5s cubic-bezier(0.16,1,0.3,1) forwards; }
.rule.c  { margin-inline: auto; transform-origin: center; }
@keyframes ruleGrow { from { transform: scaleX(0) } to { transform: scaleX(1) } }

h1 em, h2 em { text-shadow: 0 0 28px rgba(200,169,109,.55); }

/* Section header */
.sh           { text-align: left; margin-bottom: 4rem; position: relative; padding-left: 1.5rem; }
.sh::before   { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--gold); border-radius: 3px; }
.sh h2        { font-family: var(--serif); font-size: clamp(2.2rem,4vw,3.4rem); font-weight: 600; line-height: 1.08; letter-spacing: -.02em; margin-bottom: .75rem; }
.sh p         { color: var(--muted); font-size: 1.05rem; max-width: 48ch; line-height: 1.75; }

/* Botones */
.btn       { display: inline-flex; align-items: center; gap: 8px; font-family: var(--sans); font-weight: 600; border-radius: 9999px; transition: transform .1s ease-out, box-shadow .3s, filter .3s, background .3s, gap .4s cubic-bezier(0.16,1,0.3,1); position: relative; overflow: hidden; }
.btn-gold  { padding: 14px 30px; background: linear-gradient(135deg, var(--gold), var(--gold-lt)); color: #07060a; font-size: .95rem; box-shadow: 0 4px 28px var(--gold-glow); z-index: 1; }
.btn-gold::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg,transparent,rgba(255,255,255,.4),transparent); transform: translateX(-100%); z-index: -1; transition: transform .6s cubic-bezier(.4,0,.2,1); }
.btn-gold:hover::after  { transform: translateX(100%); }
.btn-gold:hover         { transform: translateY(-2px); filter: brightness(1.08); box-shadow: 0 12px 48px rgba(200,169,109,.45); gap: 14px; }
.btn-ghost              { padding: 14px 22px; color: var(--muted); font-size: .95rem; transition: color .25s, gap .25s; }
.btn-ghost:hover        { color: var(--cream); gap: 12px; }
.btn-outline            { padding: 11px 26px; border: 1px solid var(--border-md); color: var(--gold); font-size: .875rem; border-radius: 9999px; transition: background .25s, border-color .25s, box-shadow .25s; }
.btn-outline:hover      { background: var(--gold-dim); border-color: var(--gold); box-shadow: 0 0 24px var(--gold-dim); }

/* ── NAV ────────────────────────────────────────────────────────── */
.nav             { position: fixed; top: 38px; left: 0; right: 0; z-index: 200; border-bottom: 1px solid transparent; transition: background .35s, box-shadow .35s, border-color .35s; }
.nav.solid       { background: rgba(7,6,10,.92); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border-color: var(--border); box-shadow: 0 4px 40px rgba(0,0,0,.5); }
.nav-inner       { max-width: var(--max); margin: 0 auto; padding: 0 2rem; height: 84px; display: flex; align-items: center; justify-content: space-between; gap: 2rem; transition: height .35s var(--ease); }
.nav.solid .nav-inner { height: 66px; }
.nav-logo        { display: flex; align-items: center; gap: 11px; font-family: var(--serif); font-size: 1.3rem; font-weight: 600; }
.nav-mark        { width: 36px; height: 36px; border-radius: 8px; background: linear-gradient(135deg, var(--gold), var(--gold-lt)); display: grid; place-items: center; flex-shrink: 0; }
.nav-links       { display: flex; align-items: center; gap: 2rem; }
.nav-links a     { font-size: .875rem; font-weight: 500; color: var(--muted); transition: color .2s; position: relative; }
.nav-links a::after   { content: ''; position: absolute; bottom: -2px; left: 0; right: 0; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease); }
.nav-links a:hover    { color: var(--cream); }
.nav-links a:hover::after { transform: scaleX(1); }
.nav-cta         { padding: 8px 22px; border: 1px solid var(--border-md); border-radius: 9999px; color: var(--gold); font-size: .85rem; font-weight: 600; transition: background .2s, border-color .2s, box-shadow .2s; }
.nav-cta:hover   { background: var(--gold-dim); border-color: var(--gold); box-shadow: 0 0 20px var(--gold-dim); }
.ham             { display: none; flex-direction: column; gap: 5px; width: 32px; padding: 4px; }
.ham span        { display: block; height: 1.5px; background: var(--cream); border-radius: 2px; transition: transform .3s, opacity .3s; }
.ham.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.ham.open span:nth-child(2) { opacity: 0; }
.ham.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ── HERO ───────────────────────────────────────────────────────── */
.hero       { min-height: 100svh; display: flex; align-items: center; position: relative; overflow: hidden; padding: calc(84px + 5rem) 2rem 5rem; }
.hero-bg    { position: absolute; inset: 0; pointer-events: none; -webkit-mask-image: linear-gradient(to bottom, black 85%, transparent 100%); mask-image: linear-gradient(to bottom, black 85%, transparent 100%); }
.hero-bg::before { content: ''; position: absolute; top: -20%; right: -10%; width: 900px; height: 900px; background: radial-gradient(ellipse,rgba(200,169,109,.09) 0%,transparent 65%); border-radius: 50%; }
.hero-bg::after  { content: ''; position: absolute; bottom: -30%; left: -15%; width: 700px; height: 700px; background: radial-gradient(ellipse,rgba(200,169,109,.05) 0%,transparent 60%); border-radius: 50%; }

.ambient-blobs { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%); mask-image: linear-gradient(to bottom, black 80%, transparent 100%); }
.blob          { position: absolute; filter: blur(110px); border-radius: 50%; opacity: .6; animation: blobMove 18s infinite alternate ease-in-out; }
.blob.b1       { top: 5%;  left: 15%; width: 45vw; height: 45vh; background: rgba(200,169,109,.18); }
.blob.b2       { bottom: 10%; right: 5%;  width: 55vw; height: 55vh; background: rgba(74,127,193,.14);  animation-delay: -5s; }
.blob.b3       { top: 40%; left: 50%; width: 40vw; height: 40vh; background: rgba(176,80,80,.12);    animation-delay: -10s; }
@keyframes blobMove { 0%   { transform: translate(0,0) scale(1) }
                      50%  { transform: translate(60px,-60px) scale(1.15) }
                      100% { transform: translate(-40px,50px) scale(0.9) } }
/* ── PERFORMANCE: reducir coste GPU de blobs en mobile ── */
@media (max-width: 768px) {
  .blob { filter: blur(60px); animation-play-state: paused; }
}

.hero-inner       { max-width: var(--max); width: 100%; margin: 0 auto; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 4rem; align-items: center; position: relative; z-index: 1; }
.hero-text        { min-width: 0; }
.hero-visual-wrap { min-width: 0; display: flex; align-items: center; justify-content: center; }

/* Animación de entrada del hero (CSS pura — no depende del motor JS de reveal) */
@keyframes heroFadeUp { from { opacity: 0; transform: translateY(50px) } to { opacity: 1; transform: none } }
.hero-anim { animation: heroFadeUp .9s cubic-bezier(0.16,1,0.3,1) both; }

.hero-kicker         { display: inline-flex; align-items: center; gap: 10px; padding: 7px 18px; background: var(--gold-dim); border: 1px solid var(--border-md); border-radius: 9999px; font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); margin-bottom: 1.75rem; }
.hero-kicker::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1) } 50% { opacity: .5; transform: scale(.8) } }

.hero-h1        { font-family: var(--serif); font-size: clamp(2.4rem,3.8vw,4.6rem); font-weight: 300; line-height: 1.02; letter-spacing: -.03em; margin-bottom: 1.75rem; text-shadow: 0 12px 30px rgba(0,0,0,.8), 0 2px 10px rgba(0,0,0,.4); }
.hero-h1 strong { font-weight: 600; display: block; }
.hero-h1 em     { font-style: italic; color: var(--gold); font-weight: 300; }
.hero-p         { font-size: clamp(1rem,1.3vw,1.1rem); color: var(--muted); max-width: 42ch; line-height: 1.8; margin-bottom: 2rem; }
.hero-btns      { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 2.5rem; }
.hero-trust     { display: flex; align-items: center; gap: 1.25rem; }
.ht-avatars     { display: flex; align-items: center; z-index: 1; }
.ht-av          { width: 38px; height: 38px; border-radius: 50%; border: 2px solid var(--bg); margin-left: -12px; background: var(--bg2); overflow: hidden; }
.ht-av:first-child { margin-left: 0; }
.ht-av img      { width: 100%; height: 100%; object-fit: cover; }
.ht-av-more     { display: flex; align-items: center; justify-content: center; background: var(--gold-dim); border-color: rgba(200,169,109,.2); color: var(--gold); }
.ht-text        { display: flex; flex-direction: column; gap: 3px; }
.ht-stars       { display: flex; align-items: center; gap: 2px; color: var(--gold); }
.ht-stars svg   { width: 15px; height: 15px; }
.ht-stars-score { font-family: var(--sans); font-size: .85rem; font-weight: 700; color: var(--gold-lt); margin-left: 6px; }
.ht-lbl         { font-size: .75rem; color: var(--muted); }
.ht-lbl strong  { color: var(--cream); font-weight: 600; }

/* ── 3D BOOKS ───────────────────────────────────────────────────────
   Geometría:
   --t = grosor del libro (la mitad del depth total)
   • Front  : translateZ(+t)
   • Back   : rotateY(180deg) translateZ(+t)
   • Spine  : borde izquierdo, rotateY(-90deg), ancho = 2t
   • Pages-R: borde derecho,  rotateY(90deg),  ancho = 2t
   • Pages-T: borde superior, rotateX(90deg),  alto  = 2t, origin bottom
   • Pages-B: borde inferior, rotateX(-90deg), alto  = 2t, origin top
─────────────────────────────────────────────────────────────────── */
/* perspective lives on hero-visual; book-stack gets preserve-3d so JS tilt works */
.hero-visual { position: relative; width: 100%; display: flex; align-items: center; justify-content: center; height: 540px; perspective: 1000px; }
.book-stack  { transform-style: preserve-3d; }

/* .book: wrapper animado — sin preserve-3d propio para evitar aplanamiento en Chromium */
.book     { --t: 16px; position: absolute; transform-style: preserve-3d; }
/* .book-geo: contenedor preserve-3d real de las caras 3D */
.book-geo { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform-style: preserve-3d; }

.book-front, .book-back {
  position: absolute; inset: 0;
  border-radius: 3px 12px 12px 3px;
  backface-visibility: hidden;
}
.book-front {
  transform: translateZ(var(--t));
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 22px 18px; z-index: 2;
}
.book-front::before {
  content: ''; position: absolute; left: 0; top: 12px; bottom: 12px;
  width: 5px; border-radius: 3px 0 0 3px;
}
.book-back { transform: rotateY(180deg) translateZ(var(--t)); z-index: 1; }

.book-spine {
  position: absolute; top: 0; bottom: 0; left: 0;
  width: calc(2 * var(--t));
  transform: rotateY(-90deg) translateZ(var(--t));
  border-radius: 3px 0 0 3px;
}
.book-pages-right {
  position: absolute; top: 6px; bottom: 6px; right: 2px;
  width: calc(2 * var(--t));
  transform: rotateY(90deg) translateZ(var(--t));
  border-radius: 2px;
  background: #1a1814;
  background-image: repeating-linear-gradient(90deg,transparent,transparent 2px,rgba(255,255,255,.04) 2px,rgba(255,255,255,.04) 4px);
}
.book-pages-top {
  position: absolute; top: 2px; left: 2px; right: 6px;
  height: calc(2 * var(--t));
  transform: rotateX(90deg) translateZ(var(--t));
  background: #1a1814;
  background-image: repeating-linear-gradient(90deg,transparent,transparent 2px,rgba(255,255,255,.04) 2px,rgba(255,255,255,.04) 4px);
}
.book-pages-bottom {
  position: absolute; bottom: 2px; left: 2px; right: 6px;
  height: calc(2 * var(--t));
  transform: rotateX(-90deg) translateZ(var(--t));
  background: #1a1814;
  background-image: repeating-linear-gradient(90deg,transparent,transparent 2px,rgba(255,255,255,.04) 2px,rgba(255,255,255,.04) 4px);
}
.book-shadow {
  position: absolute; inset: 0; transform: translateZ(-32px);
  border-radius: 12px; background: transparent;
  box-shadow: 0 30px 60px rgba(0,0,0,.8), -10px 10px 30px rgba(200,169,109,.1);
}

/* Libro 1 — Inversión Inteligente (dorado) */
.book-1 { --t: 26px; width: 230px; height: 322px; top: 0; left: 50%; transform: translateX(-50%) translateZ(60px) rotateX(3deg); }
.book-1 .book-front,
.book-1 .book-back,
.book-1 .book-spine  { background: linear-gradient(145deg,#1c1808,#2a2210,#181508); border: 1px solid rgba(200,169,109,.22); }
.book-1 .book-front::before { background: linear-gradient(180deg, var(--gold), var(--gold-lt), var(--gold)); }

/* Libro 2 — Renta Fija & Acciones (azul) */
.book-2 { --t: 22px; width: 200px; height: 286px; top: 0; left: 50%; transform: translateX(calc(-50% - 190px)) translateZ(-10px) rotateY(15deg) rotateZ(-3deg) rotateX(5deg); }
.book-2 .book-front,
.book-2 .book-back   { background: linear-gradient(145deg,#0c1018,#101622); border: 1px solid rgba(100,140,200,.18); }
.book-2 .book-spine  { background: linear-gradient(145deg,#0a0e1a,#0e1420); border: 1px solid rgba(100,140,200,.18); }
.book-2 .book-front::before { background: linear-gradient(180deg,#4a7fc1,#7aa8e0,#4a7fc1); }
.book-2 .book-shadow { transform: translateZ(-28px); box-shadow: 0 20px 40px rgba(0,0,0,.7); }
.book-2 .book-pages-right,
.book-2 .book-pages-top,
.book-2 .book-pages-bottom  { background: #10141e; }

/* Libro 3 — Psicología del Inversor (rojo) */
.book-3 { --t: 20px; width: 190px; height: 275px; top: 0; left: 50%; transform: translateX(calc(-50% + 180px)) translateZ(-20px) rotateY(-15deg) rotateZ(3deg) rotateX(4deg); }
.book-3 .book-front,
.book-3 .book-back   { background: linear-gradient(145deg,#140c0c,#1e1010); border: 1px solid rgba(180,80,80,.18); }
.book-3 .book-spine  { background: linear-gradient(145deg,#100808,#1a0c0c); border: 1px solid rgba(180,80,80,.18); }
.book-3 .book-front::before { background: linear-gradient(180deg,#b05050,#d07070,#b05050); }
.book-3 .book-shadow { transform: translateZ(-26px); box-shadow: 0 20px 40px rgba(0,0,0,.7); }
.book-3 .book-pages-right,
.book-3 .book-pages-top,
.book-3 .book-pages-bottom  { background: #1a0e0e; }

/* Contenido front de libros 2 y 3 */
.book-mini-line    { width: 22px; height: 1px; }
.book-mini-text    { font-family: var(--serif); font-size: .58rem; font-weight: 600; text-align: center; line-height: 1.2; }
.book-mini-line--blue { background: linear-gradient(90deg,transparent,#4a7fc1,transparent); }
.book-mini-text--blue { color: #7aa8e0; }
.book-mini-line--red  { background: linear-gradient(90deg,transparent,#b05050,transparent); }
.book-mini-text--red  { color: #d07070; }

/* Contenido front libro 1 */
.book-chart-svg { width: 72px; height: 52px; color: var(--gold-lt); filter: drop-shadow(0 4px 12px rgba(200,169,109,.5)); margin-bottom: -2px; }
.book-divider   { width: 36px; height: 1px; background: linear-gradient(90deg,transparent,var(--gold),transparent); }
.book-label     { font-family: var(--serif); font-size: .85rem; font-weight: 600; color: var(--gold-lt); text-align: center; line-height: 1.25; text-shadow: 0 4px 10px rgba(0,0,0,.9); }
.book-brand     { font-size: .55rem; color: var(--muted); letter-spacing: .1em; text-transform: uppercase; }
.book-ico       { width: 20px; height: 20px; margin-bottom: 4px; }

/* Tarjetas flotantes */
.float-card { position: absolute; background: rgba(13,12,18,.9); border: 1px solid var(--border-md); border-radius: 14px; padding: 14px 18px; backdrop-filter: blur(16px); box-shadow: 0 8px 32px rgba(0,0,0,.5); white-space: nowrap; }
.fc1 { top: 40%; left: 0px; animation: fc 4s ease-in-out infinite .3s; z-index: 5; }
.fc2 { top: 35%; right: 0px; animation: fc 5s ease-in-out infinite; z-index: 5; }
@keyframes fc { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-8px) } }
.fc-lbl   { font-size: .65rem; color: var(--muted); margin-bottom: 3px; text-transform: uppercase; letter-spacing: .06em; }
.fc-val   { font-family: var(--serif); font-size: 1.5rem; font-weight: 700; color: var(--gold); line-height: 1; }
.fc-sub   { font-size: .7rem; color: var(--muted); }
.fc-trend { display: inline-flex; align-items: center; gap: 4px; font-size: .7rem; font-weight: 600; color: #4ade80; margin-top: 4px; }
.fc-stars-row { display: flex; align-items: center; gap: 2px; margin-top: 4px; color: var(--gold); }
.fc-stars-score { font-size: .72rem; font-weight: 700; color: var(--gold-lt); margin-left: 4px; font-family: var(--sans); }


/* ── MAIN WRAPPER ───────────────────────────────────────────────── */
main { position: relative; padding-bottom: 6rem; }

/* ── EBOOKS ─────────────────────────────────────────────────────── */
.ebooks      { padding: 4rem 2rem; position: relative; }
.ebooks-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; margin-top: 4rem; align-items: stretch; }

@keyframes cardIn { from { opacity: 0; transform: translateY(50px) } to { opacity: 1; transform: none } }
/* Initial state hidden via JS inline style; .card-visible triggers the animation */
.scroll-book-wrap { display: flex; flex-direction: column; height: 100%; }
.scroll-book-wrap.card-visible { animation: cardIn .7s cubic-bezier(0.16,1,0.3,1) both; animation-delay: var(--card-delay,0s); }

.ec { background: var(--bg2); border: 1px solid var(--border); border-radius: 20px; overflow: hidden; display: flex; flex-direction: column; height: 100%;
      transition: transform .4s cubic-bezier(0.16,1,0.3,1), box-shadow .4s cubic-bezier(0.16,1,0.3,1), border-color .4s cubic-bezier(0.16,1,0.3,1); position: relative; }
.ec:hover { transform: translateY(-8px) scale(1.01); box-shadow: 0 24px 64px rgba(0,0,0,.6), 0 0 0 1px rgba(200,169,109,.3); border-color: rgba(200,169,109,.35); }

/* Portadas de ebooks */
.ec-cover { aspect-ratio: 4/3; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.scroll-book-wrap:nth-child(1) .ec-cover { background: radial-gradient(ellipse at 30% 40%,#221d08 0%,#0f0d04 100%); }
.scroll-book-wrap:nth-child(2) .ec-cover { background: radial-gradient(ellipse at 70% 30%,#08101e 0%,#040810 100%); }
.scroll-book-wrap:nth-child(3) .ec-cover { background: radial-gradient(ellipse at 50% 60%,#140808 0%,#080404 100%); }

.ec-book-mini { width: 100px; height: 142px; border-radius: 2px 10px 10px 2px; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 14px 12px; box-shadow: -4px 4px 20px rgba(0,0,0,.7); transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.ec:hover .ec-book-mini { transform: rotate(-4deg) scale(1.08); box-shadow: -8px 12px 30px rgba(0,0,0,.9), 0 0 35px rgba(200,169,109,.25); }
.ec-book-mini::before { content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 4px; border-radius: 2px 0 0 2px; }

/* Colores por libro */
.scroll-book-wrap:nth-child(1) .ec-book-mini         { background: linear-gradient(145deg,#1e1a0a,#2a2410); }
.scroll-book-wrap:nth-child(1) .ec-book-mini::before  { background: linear-gradient(180deg,var(--gold),var(--gold-lt)); }
.scroll-book-wrap:nth-child(1) .ec-mini-line          { background: linear-gradient(90deg,transparent,var(--gold),transparent); }
.scroll-book-wrap:nth-child(1) .ec-mini-icon svg      { color: var(--gold-lt); }
.scroll-book-wrap:nth-child(2) .ec-book-mini         { background: linear-gradient(145deg,#0c1520,#101e2c); }
.scroll-book-wrap:nth-child(2) .ec-book-mini::before  { background: linear-gradient(180deg,#4a7fc1,#7aa8e0); }
.scroll-book-wrap:nth-child(2) .ec-mini-line          { background: linear-gradient(90deg,transparent,#4a7fc1,transparent); }
.scroll-book-wrap:nth-child(2) .ec-mini-icon svg      { color: #7aa8e0; }
.scroll-book-wrap:nth-child(2) .ec-mini-title         { color: #7aa8e0; }
.scroll-book-wrap:nth-child(3) .ec-book-mini         { background: linear-gradient(145deg,#1e0c0c,#2a1010); }
.scroll-book-wrap:nth-child(3) .ec-book-mini::before  { background: linear-gradient(180deg,#b05050,#d07070); }
.scroll-book-wrap:nth-child(3) .ec-mini-line          { background: linear-gradient(90deg,transparent,#b05050,transparent); }
.scroll-book-wrap:nth-child(3) .ec-mini-icon svg      { color: #d07070; }
.scroll-book-wrap:nth-child(3) .ec-mini-title         { color: #d07070; }

/* Shimmer en portada al hover */
.ec-cover::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(105deg,transparent 30%,rgba(200,169,109,.1) 50%,transparent 70%);
  left: -100%; transition: left .7s ease; pointer-events: none; z-index: 1;
}
.ec:hover .ec-cover::after { left: 100%; }

/* Título cambia de color en hover */
.ec-title { font-family: var(--serif); font-size: 1.25rem; font-weight: 600; line-height: 1.2; color: var(--cream); transition: color .3s; }
.ec:hover .ec-title { color: var(--gold-lt); }
.ec-mini-icon  { line-height: 1; display: flex; align-items: center; justify-content: center; }
.ec-mini-icon svg { width: 18px; height: 18px; }
.ec-mini-line  { width: 24px; height: 1px; }
.ec-mini-title { font-family: var(--serif); font-size: .65rem; font-weight: 600; color: var(--gold-lt); text-align: center; line-height: 1.2; }
.ec-cat        { position: absolute; top: 12px; left: 12px; padding: 3px 10px; background: rgba(7,6,10,.75); border: 1px solid var(--border); border-radius: 9999px; font-size: .65rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--gold); backdrop-filter: blur(8px); z-index: 2; }
.ec-body       { padding: 1.5rem; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.ec-desc       { font-size: .875rem; color: var(--muted); line-height: 1.7; flex: 1; min-height: 5rem; }
.ec-tags       { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px; }
.ec-tag        { padding: 3px 9px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); border-radius: 9999px; font-size: .68rem; color: var(--muted); }
.ec-foot       { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.5rem; border-top: 1px solid var(--border); background: rgba(0,0,0,.2); }
.ec-price      { display: flex; flex-direction: column; gap: 1px; }
.ec-plbl       { font-size: .62rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.ec-pval       { font-family: var(--serif); font-size: 1.7rem; font-weight: 700; color: var(--gold); line-height: 1; }
.ec-pval sup   { font-size: .9rem; font-family: var(--sans); vertical-align: super; }
.btn-buy       { display: inline-flex; align-items: center; gap: 6px; padding: 9px 20px; background: linear-gradient(135deg,var(--gold),var(--gold-lt)); color: #07060a; border-radius: 9999px; font-size: .82rem; font-weight: 700; transition: transform .1s ease-out, box-shadow .2s, filter .2s, gap .3s cubic-bezier(0.16,1,0.3,1); }
.btn-buy:hover { transform: translateY(-1px); filter: brightness(1.1); box-shadow: 0 6px 24px var(--gold-glow); gap: 11px; }
.ebooks-note        { text-align: center; margin-top: 2rem; font-size: .8rem; color: var(--muted); }
.ebooks-note strong { color: var(--gold); }

/* Badge "Más popular" */
.ec-badge {
  position: absolute; top: 12px; right: 12px;
  padding: 4px 12px;
  background: linear-gradient(135deg, var(--gold), var(--gold-lt));
  color: #07060a; font-size: .62rem; font-weight: 800;
  letter-spacing: .07em; text-transform: uppercase;
  border-radius: 9999px; z-index: 3;
  box-shadow: 0 4px 16px rgba(200,169,109,.5);
  animation: badgePulse 2.5s ease-in-out infinite;
}
@keyframes badgePulse {
  0%, 100% { box-shadow: 0 4px 16px rgba(200,169,109,.4); }
  50%       { box-shadow: 0 4px 28px rgba(200,169,109,.75); }
}

/* ── BUNDLE ─────────────────────────────────────────────────────── */
.bundle      { padding: 2rem 2rem 5rem; }
.bundle-box  {
  position: relative; border-radius: 24px; overflow: hidden;
  border: 1px solid rgba(200,169,109,.25);
  display: grid; grid-template-columns: 1fr 1fr; align-items: center;
  padding: 4rem;
  background: linear-gradient(135deg, #0f0e05 0%, #141208 50%, #0a0910 100%);
}
.bundle-bg {
  position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(circle, rgba(200,169,109,.1) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: radial-gradient(ellipse 60% 80% at 30% 50%, black, transparent);
  -webkit-mask-image: radial-gradient(ellipse 60% 80% at 30% 50%, black, transparent);
}
.bundle-left  { position: relative; z-index: 1; }
.bundle-right { position: relative; z-index: 1; display: flex; justify-content: center; align-items: center; }

.bundle-h2 { font-family: var(--serif); font-size: clamp(1.8rem,3vw,2.8rem); font-weight: 300; line-height: 1.1; letter-spacing: -.02em; margin: .75rem 0 1rem; }
.bundle-h2 em { color: var(--gold); font-style: italic; }
.bundle-p  { color: var(--muted); font-size: .95rem; line-height: 1.75; max-width: 42ch; margin-bottom: 2rem; }

.bundle-savings {
  display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap;
  margin-bottom: 2rem; padding: 1.25rem 1.5rem;
  background: rgba(0,0,0,.3); border: 1px solid var(--border);
  border-radius: 14px; width: fit-content;
}
.bundle-original, .bundle-deal { display: flex; flex-direction: column; gap: 2px; }
.bundle-orig-lbl, .bundle-deal-lbl { font-size: .62rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.bundle-orig-val s { font-family: var(--serif); font-size: 1.6rem; font-weight: 700; color: var(--muted); opacity: .6; text-decoration-color: rgba(255,80,80,.7); }
.bundle-deal-val { font-family: var(--serif); font-size: 2rem; font-weight: 700; color: var(--gold); line-height: 1; }
.bundle-deal-val sup { font-size: 1rem; font-family: var(--sans); vertical-align: super; }
.bundle-divider { font-size: 1.4rem; color: var(--border-md); }
.bundle-save-badge {
  padding: 5px 14px; background: rgba(74,222,128,.12); border: 1px solid rgba(74,222,128,.25);
  border-radius: 9999px; font-size: .72rem; font-weight: 700; color: #4ade80;
}
.bundle-cta { gap: 10px; font-size: 1rem; padding: 16px 36px; margin-bottom: .75rem; }
.bundle-sub { font-size: .75rem; color: var(--muted); }

/* Mini libros en el bundle */
.bundle-books { position: relative; width: 280px; height: 220px; perspective: 800px; }
.bbook {
  position: absolute; width: 110px; height: 155px;
  border-radius: 3px 10px 10px 3px;
  display: flex; filter: drop-shadow(0 16px 28px rgba(0,0,0,.7));
  transition: transform .4s var(--ease);
}
.bbook-spine { width: 10px; height: 100%; border-radius: 3px 0 0 3px; flex-shrink: 0; }
.bbook-front {
  flex: 1; border-radius: 0 10px 10px 0;
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.bbook-front svg { width: 40px; height: 40px; }

.bbook-1 { bottom: 20px; left: 10px; transform: rotateY(8deg) rotateZ(-2deg); }
.bbook-1 .bbook-spine { background: linear-gradient(180deg, #3a2e08, #5a4a10); }
.bbook-1 .bbook-front { background: linear-gradient(145deg, #1e1a08, #2a2210); border: 1px solid rgba(200,169,109,.2); }

.bbook-2 { bottom: 40px; left: 95px; transform: rotateY(4deg) rotateZ(0deg); z-index: 2; }
.bbook-2 .bbook-spine { background: linear-gradient(180deg, #0c1830, #102040); }
.bbook-2 .bbook-front { background: linear-gradient(145deg, #0c1520, #101e2c); border: 1px solid rgba(100,140,200,.2); }

.bbook-3 { bottom: 10px; left: 175px; transform: rotateY(-4deg) rotateZ(2deg); }
.bbook-3 .bbook-spine { background: linear-gradient(180deg, #280c0c, #401010); }
.bbook-3 .bbook-front { background: linear-gradient(145deg, #1e0c0c, #2a1010); border: 1px solid rgba(180,80,80,.2); }

.bundle-plus {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  font-family: var(--serif); font-size: 2.5rem; color: rgba(200,169,109,.2);
  pointer-events: none; z-index: 5;
}
.bundle-box:hover .bbook-1 { transform: rotateY(8deg) rotateZ(-2deg) translateY(-6px); }
.bundle-box:hover .bbook-2 { transform: rotateY(4deg) rotateZ(0deg) translateY(-10px); }
.bundle-box:hover .bbook-3 { transform: rotateY(-4deg) rotateZ(2deg) translateY(-6px); }

@media (max-width: 768px) {
  /* ── Raíz del problema: bundle-section + .wrap ambos tienen padding: 2rem lateral.
     En mobile eso deja solo ~214px de contenido. Eliminamos el exterior y dejamos
     que .wrap sea el único que controle el espacio horizontal. ── */
  .bundle         { padding-left: 0; padding-right: 0; }

  .bundle-box     { grid-template-columns: 1fr; padding: 1.75rem 1.25rem; gap: 1.75rem; }
  .bundle-h2      { font-size: 1.55rem; }
  .bundle-p       { max-width: 100%; font-size: .9rem; }
  .bundle-right   { justify-content: flex-start; }

  /* Libros */
  .bundle-books   { width: 100%; height: 180px; }
  .bbook-1        { left: 0; }
  .bbook-2        { left: 80px; }
  .bbook-3        { left: 155px; }

  /* Savings card: label izquierda, valor derecha — layout tabular limpio */
  .bundle-savings  { flex-direction: column; gap: .5rem; width: 100%; padding: 1rem 1.25rem; }
  .bundle-divider  { display: none; }
  .bundle-original { flex-direction: row; align-items: center; justify-content: space-between; width: 100%; }
  .bundle-deal     { flex-direction: row; align-items: center; justify-content: space-between; width: 100%; }
  .bundle-orig-val s { font-size: 1.25rem; }
  .bundle-deal-val   { font-size: 1.65rem; }
  .bundle-save-badge { align-self: flex-start; }

  /* Botón: display:flex para que width:100% funcione con inline-flex base */
  .bundle-cta     { display: flex; width: 100%; justify-content: center;
                    font-size: .9rem; padding: 15px 20px; }
}


/* ── CÓMO FUNCIONA ──────────────────────────────────────────────── */
.como        { padding: 6rem 2rem; position: relative; overflow: hidden; }
.steps       { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: start; margin-top: 4rem; }
.step-arrow  { display: flex; align-items: center; justify-content: center; padding-top: 40px; color: var(--border-md); }
.step        { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1rem; padding: 0 1rem; }
.step-ico    { position: relative; width: 80px; height: 80px; display: grid; place-items: center; flex-shrink: 0; }
.step-ico::before    { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--gold-dim); border: 1px solid rgba(200,169,109,.2); transition: background .3s, border-color .3s; }
.step:hover .step-ico::before { background: rgba(200,169,109,.18); border-color: rgba(200,169,109,.4); }
.step-ico-txt{ position: relative; z-index: 1; font-family: var(--serif); font-size: 2.5rem; font-weight: 700; color: var(--gold-lt); }
.step h3     { font-family: var(--serif); font-size: 1.2rem; font-weight: 600; color: var(--cream); }
.step p      { font-size: .875rem; color: var(--muted); line-height: 1.7; max-width: 22ch; }
.garantia-wrap { margin-top: 4rem; display: flex; justify-content: center; }
.garantia      { display: flex; align-items: center; gap: 1.25rem; padding: 1.5rem 2rem; background: var(--gold-dim); border: 1px solid rgba(200,169,109,.2); border-radius: 16px; max-width: 580px; }
.garantia-ico  { flex-shrink: 0; color: var(--gold); display: flex; align-items: center; }
.garantia-ico svg { width: 36px; height: 36px; }
.garantia h4   { font-family: var(--serif); font-size: 1.1rem; font-weight: 600; color: var(--gold); margin-bottom: 4px; }
.garantia p    { font-size: .875rem; color: var(--muted); line-height: 1.6; }

/* ── AUTOR ──────────────────────────────────────────────────────── */
.autor       { padding: 6rem 2rem; position: relative; }
.autor-box   { display: grid; grid-template-columns: 360px 1fr; gap: 4rem; align-items: center; background: linear-gradient(145deg, #0f0e0b 0%, #171510 100%); border: 1px solid var(--border-md); border-radius: 24px; padding: 4rem; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.autor-img   { position: relative; width: 100%; aspect-ratio: 3/4; border-radius: 16px; overflow: hidden; }
.autor-img img { width: 100%; height: 100%; object-fit: cover; border-radius: 16px; position: relative; z-index: 2; }
.autor-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, #171510 5%, transparent 40%); z-index: 3; }
.autor-img-glow { position: absolute; inset: -20px; background: radial-gradient(circle at 50% 50%, rgba(200,169,109,.5) 0%, transparent 60%); z-index: 1; filter: blur(30px); opacity: 0.6; }
.autor-bio p { color: var(--muted); font-size: 1.05rem; line-height: 1.8; margin-bottom: 1.5rem; max-width: 52ch; }
.autor-bio strong { color: var(--cream); font-weight: 600; }
.autor-stats { display: flex; gap: 2.5rem; margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--border); }
.astat       { display: flex; flex-direction: column; gap: 4px; }
.astat-val   { font-family: var(--serif); font-size: 2.2rem; font-weight: 700; color: var(--gold); line-height: 1; text-shadow: 0 4px 12px rgba(200,169,109,.3); }
.astat-lbl   { font-size: .8rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; }

@media (max-width: 900px) {
  .autor-box { grid-template-columns: 1fr; padding: 2.5rem; gap: 3rem; text-align: center; }
  .autor-img { max-width: 320px; margin: 0 auto; }
  .autor-bio p { margin: 0 auto 1.5rem; }
  .autor-stats { justify-content: center; flex-wrap: wrap; }
  .sh { display: flex; flex-direction: column; align-items: center; text-align: center; }
  .rule { margin-inline: auto; transform-origin: center; }
}

/* ── TESTIMONIOS ────────────────────────────────────────────────── */
.testimonios   { padding: 4rem 2rem; position: relative; }
.t-grid        { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; margin-top: 4rem; }
.tc            { background: var(--bg2); border: 1px solid var(--border); border-radius: 20px; padding: 1.75rem; display: flex; flex-direction: column; gap: 1rem; position: relative; transition: transform .4s cubic-bezier(0.16,1,0.3,1), box-shadow .4s cubic-bezier(0.16,1,0.3,1), border-color .4s cubic-bezier(0.16,1,0.3,1); overflow: hidden; }
.tc:hover      { transform: translateY(-6px); box-shadow: 0 20px 56px rgba(0,0,0,.45); border-color: rgba(200,169,109,.26); }
.tc.featured   { background: linear-gradient(145deg,var(--bg2) 0%,rgba(200,169,109,.06) 100%); border-color: var(--border-md); box-shadow: 0 4px 32px rgba(200,169,109,.07); }
.tc-quote      { font-family: var(--serif); font-size: 4.5rem; line-height: .8; color: var(--gold); opacity: .15; margin-bottom: -.5rem; user-select: none; }
.tc-stars      { display: flex; gap: 3px; }
.tc-stars span { color: var(--gold); font-size: .875rem; }
.tc-text       { font-size: .925rem; color: var(--cream); line-height: 1.8; flex: 1; font-style: italic; }
.tc-text strong{ color: var(--gold); font-style: normal; font-weight: 600; }
.tc-result     { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; background: var(--gold-dim); border: 1px solid rgba(200,169,109,.18); border-radius: 9999px; font-size: .72rem; font-weight: 600; color: var(--gold); width: fit-content; }
.tc-res-ico    { width: 16px; height: 16px; color: var(--gold); flex-shrink: 0; }
.tc-author     { display: flex; align-items: center; gap: 12px; padding-top: 1rem; border-top: 1px solid var(--border); }
.tc-avatar     { width: 44px; height: 44px; border-radius: 50%; background: var(--bg3); border: 2px solid rgba(200,169,109,.2); display: grid; place-items: center; font-size: 1.1rem; font-family: var(--serif); font-weight: 700; color: var(--gold-lt); flex-shrink: 0; }
.tc-info strong{ display: block; font-size: .875rem; font-weight: 600; color: var(--cream); }
.tc-info span  { font-size: .775rem; color: var(--muted); }

/* ── BLOG ───────────────────────────────────────────────────────── *//* Overlay gradient — fades on hover to reveal image */
/* ── CTA FINAL ──────────────────────────────────────────────────── */
.cta-sec   { padding: 8rem 2rem; }
.cta-box   { max-width: 860px; margin: 0 auto; position: relative; border-radius: 24px; overflow: hidden; padding: 5rem 4rem; text-align: center; border: 1px solid rgba(200,169,109,.22); }
.cta-bg    { position: absolute; inset: 0; background: linear-gradient(145deg,#141108 0%,#1c1a08 40%,#141108 100%); z-index: 0; }
.cta-bg::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle,rgba(200,169,109,.15) 1px,transparent 1px); background-size: 28px 28px; mask-image: radial-gradient(ellipse 70% 70% at 50% 50%,black,transparent); -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%,black,transparent); opacity: .5; }
.cta-bg::after  { content: ''; position: absolute; top: -50%; left: 50%; transform: translateX(-50%); width: 600px; height: 400px; background: radial-gradient(ellipse,rgba(200,169,109,.14) 0%,transparent 65%); }
.cta-tl    { position: absolute; top: 0; left: 10%; right: 10%; height: 1px; background: linear-gradient(90deg,transparent,var(--gold),transparent); z-index: 1; }
.cta-bl    { position: absolute; bottom: 0; left: 30%; right: 30%; height: 1px; background: linear-gradient(90deg,transparent,rgba(200,169,109,.4),transparent); z-index: 1; }
.cta-content{ position: relative; z-index: 2; }
.cta-ew    { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin-bottom: 1rem; }
.cta-h2    { font-family: var(--serif); font-size: clamp(2.4rem,5vw,4rem); font-weight: 300; line-height: 1.05; letter-spacing: -.03em; margin-bottom: 1rem; text-shadow: 0 8px 20px rgba(0,0,0,.8); }
.cta-h2 strong { font-weight: 600; display: block; }
.cta-h2 em     { font-style: italic; color: var(--gold); }
.cta-p     { color: var(--muted); font-size: 1.05rem; max-width: 46ch; margin: 0 auto 2.5rem; line-height: 1.75; }
.cta-btns  { display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap; }
.cta-foot  { margin-top: 1.5rem; font-size: .78rem; color: var(--muted); }
.cta-foot span { color: var(--gold); }

/* ── NEWSLETTER ─────────────────────────────────────────────────── */

/* ── FOOTER ─────────────────────────────────────────────────────── */
.footer         { background: var(--bg2); border-top: 1px solid var(--border); padding: 5rem 2rem 2rem; }
.footer-main    { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: 1.4fr 2fr; gap: 6rem; margin-bottom: 4rem; }
.footer-brand   { display: flex; flex-direction: column; gap: 1rem; }
.footer-logo    { display: flex; align-items: center; gap: 11px; font-family: var(--serif); font-size: 1.2rem; font-weight: 600; }
.footer-lmark   { width: 32px; height: 32px; background: linear-gradient(135deg,var(--gold),var(--gold-lt)); border-radius: 7px; display: grid; place-items: center; flex-shrink: 0; }
.footer-desc    { font-size: .875rem; color: var(--muted); line-height: 1.7; max-width: 30ch; }
.footer-socials { display: flex; gap: 10px; margin-top: 4px; }
.footer-socials a { width: 36px; height: 36px; background: var(--bg3); border: 1px solid var(--border); border-radius: 8px; display: grid; place-items: center; color: var(--muted); transition: color .2s, border-color .2s, background .2s; }
.footer-socials a:hover { color: var(--gold); border-color: rgba(200,169,109,.3); background: var(--gold-dim); }
.footer-links   { display: grid; grid-template-columns: repeat(3,1fr); gap: 2rem; }
.footer-col     { display: flex; flex-direction: column; gap: 10px; }
.footer-col h4  { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--cream); margin-bottom: 4px; }
.footer-col a   { font-size: .875rem; color: var(--muted); transition: color .2s; }
.footer-col a:hover { color: var(--gold); }
.footer-bottom  { max-width: var(--max); margin: 0 auto; padding-top: 1.5rem; border-top: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; }
.footer-copy, .footer-legal a { font-size: .78rem; color: var(--muted); }
.footer-legal   { display: flex; gap: 1.5rem; }
.footer-legal a:hover { color: var(--gold); }
.footer-disclaimer { max-width: var(--max); margin: 1.5rem auto 0; padding-top: 1.5rem; border-top: 1px solid rgba(200,169,109,.07); font-size: .7rem; color: var(--muted); line-height: 1.65; opacity: .55; }
.footer-policy-date { max-width: var(--max); margin: .75rem auto 0; text-align: center; font-size: .7rem; color: var(--gold); opacity: .45; letter-spacing: .04em; }

/* ── ACCESIBILIDAD ──────────────────────────────────────────────── */
a:focus-visible, button:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 4px; }
.btn-gold:focus-visible    { box-shadow: 0 12px 48px rgba(200,169,109,.45); gap: 14px; filter: brightness(1.08); transform: translateY(-2px); }
.btn-ghost:focus-visible   { color: var(--cream); gap: 12px; }
.btn-outline:focus-visible { background: var(--gold-dim); border-color: var(--gold); }
.nav-links a:focus-visible::after { transform: scaleX(1); }
.nav-cta:focus-visible     { background: var(--gold-dim); border-color: var(--gold); }
.btn-buy:focus-visible     { transform: translateY(-1px); filter: brightness(1.1); box-shadow: 0 6px 24px var(--gold-glow); gap: 11px; }
.ec:focus-within           { transform: translateY(-8px) scale(1.01); box-shadow: 0 24px 64px rgba(0,0,0,.6), 0 0 0 1px rgba(200,169,109,.3); border-color: rgba(200,169,109,.35); }
.ec:focus-within .ec-book-mini { transform: rotate(-4deg) scale(1.08); box-shadow: -8px 12px 30px rgba(0,0,0,.9), 0 0 35px rgba(200,169,109,.25); }

/* ── MEDIA QUERIES ──────────────────────────────────────────────── */
@media (max-width: 900px) {
  .hero-inner  { gap: 3rem; }
  .book-stack  { --book-s: .80; }
  .fc1 { left: -10px; } .fc2 { right: -10px; }
  .ebooks-grid { grid-template-columns: repeat(2,1fr); }
  .t-grid      { grid-template-columns: repeat(2,1fr); }
  }
@media (max-width: 820px) {
  .ham { display: flex; }
  /* position:absolute dentro del .nav (position:fixed) evita el bug de
   * backdrop-filter que confina position:fixed hijos al bounding-box del header.
   * El .nav tiene overflow:visible (default) por lo que el menú puede
   * extenderse visualmente por debajo del header hasta el fondo de la pantalla. */
  .nav-links {
    position: absolute; top: 100%; left: 0; right: 0;
    height: calc(100dvh - 84px);
    background: var(--bg); flex-direction: column; justify-content: center;
    align-items: center; gap: 2.5rem; transform: translateX(100%);
    transition: transform .38s var(--ease); border-top: 1px solid var(--border);
    z-index: 10;
  }
  .nav.solid .nav-links { height: calc(100dvh - 66px); }
  .nav-links.open { transform: none; }
  .nav-links a    { font-size: 1.3rem; }
  .footer-main    { grid-template-columns: 1fr; gap: 3rem; }
  .footer-links   { grid-template-columns: repeat(2,1fr); }
  .footer-bottom  { flex-direction: column; text-align: center; }
  .footer-legal   { justify-content: center; }
}
@media (max-width: 768px) {
  /* ── Hero ── */
  .hero        { align-items: flex-start; padding-top: calc(84px + 2rem); }
  .hero-inner  { grid-template-columns: 1fr; text-align: center; gap: 2rem; }
  .hero-p      { margin-inline: auto; max-width: 100%; }
  .hero-btns   { justify-content: center; }
  .hero-stats  { justify-content: center; }
  .hero-trust  { justify-content: center; align-items: center; }
  .hero-visual-wrap { order: -1; } /* Libros primero visualmente, texto primero en HTML (SEO) */
  .hero-visual { height: 400px; }
  .book-stack  { --book-s: .75; }
  .fc1         { display: none; }
  .fc2         { right: -10px; }
  .book-2      { transform: translateX(calc(-50% - 110px)) translateZ(-10px) rotateY(15deg) rotateZ(-3deg) rotateX(5deg); }
  .book-3      { transform: translateX(calc(-50% + 110px)) translateZ(-20px) rotateY(-15deg) rotateZ(3deg) rotateX(4deg); }

  /* ── Fix global: secciones con .wrap interior tienen doble padding.
     En mobile eliminamos el padding lateral de la sección y dejamos
     que .wrap (padding: 0 2rem) sea el único gutter horizontal.
     Resultado: ~326px útiles en iPhone 14 en vez de ~214px. ── */
  .bundle, .ebooks, .como, .testimonios, .cta-sec, .autor {
    padding-left: 0;
    padding-right: 0;
  }

  /* ── Ebooks ── */
  .ebooks-grid { grid-template-columns: 1fr; max-width: 100%; }

  /* ── Testimonios ── */
  .t-grid      { grid-template-columns: 1fr; max-width: 100%; }

  /* ── Cómo funciona ── */
  .garantia    { padding: 1.25rem 1rem; }

  /* ── CTA final ── */
  .cta-box     { padding: 2.5rem 1.25rem; }
  .cta-h2      { font-size: clamp(1.7rem, 7vw, 2.4rem); }
  .cta-p       { font-size: .9rem; max-width: 100%; }
  .cta-btns    { flex-direction: column; align-items: stretch; gap: .75rem; }
  .cta-btns .btn { justify-content: center; }

  /* ── FAQ ── */
  .faq         { padding-left: 1rem; padding-right: 1rem; }
  .faq-q       { font-size: 1rem; padding: 1.25rem 1rem; }
  .faq-a       { padding: 0 1rem 1.25rem; font-size: .9rem; }
}
@media (max-width: 360px) {
  /* Samsung Galaxy S8 (320px): texto largo en FAQ puede desbordar el viewport */
  .faq-q { font-size: 0.9rem; padding: 1rem 0.75rem; }
  .faq-a { padding: 0 0.75rem 1rem; font-size: .85rem; }
}
@media (max-width: 720px) {
  .steps            { grid-template-columns: 1fr; gap: 1rem; }
  .step-arrow       { display: none; }
  .step             { display: grid; grid-template-columns: 72px 1fr; grid-template-rows: auto auto; column-gap: 1.25rem; row-gap: .35rem; align-items: start; text-align: left; padding: 1.25rem 1.25rem; background: var(--bg2); border: 1px solid var(--border); border-radius: 16px; }
  .step-ico         { grid-column: 1; grid-row: 1 / 3; display: grid; place-items: center; width: 64px; height: 64px; }
  .step h3          { grid-column: 2; grid-row: 1; align-self: center; text-align: left; font-size: 1.1rem; max-width: none; }
  .step p           { grid-column: 2; grid-row: 2; text-align: left; max-width: none; font-size: .875rem; }
  .garantia         { flex-direction: column; text-align: center; }
}
@media (max-width: 640px) {
  /* cta-box ya se maneja en 768px — solo ajuste de padding-top en pantallas muy pequeñas */
  .cta-sec { padding-top: 5rem; padding-bottom: 3rem; }
}
@media (max-width: 520px) {
  .hero-visual { height: 340px; }
  .book-stack  { --book-s: .55; }
  .fc2         { display: none; }
  
  .book-2 { transform: translateX(calc(-50% - 75px)) translateZ(-10px) rotateY(15deg) rotateZ(-3deg) rotateX(5deg); }
  .book-3 { transform: translateX(calc(-50% + 75px)) translateZ(-20px) rotateY(-15deg) rotateZ(3deg) rotateX(4deg); }
}
@media (max-width: 390px) {
  /* iPhone SE (375px): offsets fijos de 75px desbordan el viewport — reducir escala y separación */
  .book-stack { --book-s: .45; }
  .book-2 { transform: translateX(calc(-50% - 55px)) translateZ(-10px) rotateY(15deg) rotateZ(-3deg) rotateX(5deg); }
  .book-3 { transform: translateX(calc(-50% + 55px)) translateZ(-20px) rotateY(-15deg) rotateZ(3deg) rotateX(4deg); }
}
@media (max-width: 480px) {
  .footer-links { grid-template-columns: 1fr; }
}

/* ── MODAL & REVIEWS ────────────────────────────────────────────── */
.test-header { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; margin-bottom: 2rem; gap: 1rem; }
.modal-overlay { position: fixed; inset: 0; background: rgba(7,6,10,.85); backdrop-filter: blur(8px); display: flex; justify-content: center; align-items: center; z-index: 1000; opacity: 0; pointer-events: none; transition: opacity .3s; }
.modal-overlay.active { opacity: 1; pointer-events: auto; }
.modal { background: var(--bg2); border: 1px solid var(--border-md); border-radius: 16px; width: 100%; max-width: 460px; padding: 2rem; position: relative; transform: translateY(30px); transition: transform .3s; box-shadow: 0 20px 60px rgba(0,0,0,.6); }
.modal-overlay.active .modal { transform: translateY(0); }
.modal-close { position: absolute; top: 1rem; right: 1rem; font-size: 1.5rem; color: var(--muted); background: none; border: none; cursor: pointer; }
.modal-title { font-family: var(--serif); font-size: 1.8rem; font-weight: 600; color: var(--gold); margin-bottom: 8px; }
.modal-p { font-size: .85rem; color: var(--muted); margin-bottom: 1.5rem; line-height: 1.6; }
.r-group { margin-bottom: 1.25rem; display: flex; flex-direction: column; gap: 6px; }
.r-group label { font-size: .8rem; font-weight: 600; color: var(--cream); text-transform: uppercase; letter-spacing: 0.05em; }
.r-form input, .r-form textarea { width: 100%; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 10px 14px; color: var(--cream); font-family: var(--sans); font-size: .9rem; outline: none; transition: border-color .2s; }
.r-form input:focus, .r-form textarea:focus { border-color: var(--gold); }
.star-rating { display: flex; gap: 8px; }
.star-rating button { font-size: 1.8rem; color: var(--border-md); cursor: pointer; line-height: 1; transition: color .2s, transform .1s; min-width: 44px; min-height: 44px; padding: 4px 8px; display: inline-flex; align-items: center; justify-content: center; }
.star-rating button.active { color: var(--gold); }
.star-rating button:hover { transform: scale(1.1); }



/* ══════════════════════════════════════════════════════ FAQ ════ */
.faq { padding: 6rem 2rem 4rem; max-width: 800px; margin: 0 auto; overflow-x: hidden; }
.faq-grid { margin-top: 3.5rem; display: flex; flex-direction: column; gap: 1rem; }
.faq-item {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 0.3s ease, background 0.3s ease;
}
.faq-item:hover {
  border-color: rgba(200, 169, 109, 0.4);
}
.faq-q {
  padding: 1.5rem;
  font-weight: 600;
  color: var(--cream);
  font-size: 1.1rem;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  list-style: none; /* Hide default arrow */
  user-select: none;
}
.faq-q::-webkit-details-marker {
  display: none;
}
.faq-icon {
  font-size: 1.5rem;
  color: var(--gold);
  line-height: 1;
  transition: transform 0.3s ease;
  font-family: monospace;
}
.faq-item[open] .faq-icon {
  transform: rotate(45deg);
}
.faq-item[open] {
  border-color: var(--gold);
  background: var(--bg2);
}
.faq-a {
  padding: 0 1.5rem 1.5rem 1.5rem;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.6;
}

/* ════════════════════════════════════════════════ iOS Reveal Engine ════ */
/* Initial state: Hidden, scaled down, translated down slightly, blurred */
.reveal {
  opacity: 0;
  transform: translateY(40px) scale(0.96);
  filter: blur(8px);
  will-change: transform, opacity, filter;
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), filter 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Intersecting State: fully visible, sharp, default scale/transform */
.reveal.visible {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
  filter: blur(0) !important;
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
}

/* ── CUSTOM IMAGE COVERS REPLACEMENT ────────────────────── */
/* Hide internal SVGs and labels from the 3D faces */
.book-front > svg, .book-front > .book-divider, .book-front > .book-label, .book-front > .book-brand, .book-front > .book-mini-line, .book-front > .book-mini-text { display: none !important; }

/* Apply individual backgrounds for Hero */
.book-1 .book-front { background: url('../cover-1.png') center/100% 100% no-repeat !important; }
.book-2 .book-front { background: url('../cover-2.png') center/100% 100% no-repeat !important; }
.book-3 .book-front { background: url('../cover-3.png') center/100% 100% no-repeat !important; }

/* Hide old internal structure from Catalog mini books */
.ec-cover > .ec-book-mini { display: none !important; }

/* Apply backgrounds to Catalog covers */
.scroll-book-wrap:nth-child(1) .ec-cover { background: url('../cover-1.png') center/contain no-repeat, radial-gradient(ellipse at 30% 40%,#221d08 0%,#0f0d04 100%) !important; }
.scroll-book-wrap:nth-child(2) .ec-cover { background: url('../cover-2.png') center/contain no-repeat, radial-gradient(ellipse at 70% 30%,#08101e 0%,#040810 100%) !important; }
.scroll-book-wrap:nth-child(3) .ec-cover { background: url('../cover-3.png') center/contain no-repeat, radial-gradient(ellipse at 50% 60%,#140808 0%,#080404 100%) !important; }

/* Bundle cover complete rewrite */
.bundle-books > .bbook, .bundle-books > .bundle-plus { display: none !important; }
.bundle-books { background: url('../cover-4.png') center/contain no-repeat !important; width: 420px !important; height: 420px !important; max-width: 100%; box-shadow: none !important; }

/* ── HOTFIXES: MOBILE RENDERING (Override !important) ── */
@media (max-width: 768px) {
  /* Bundle Image scaling fix on mobile */
  .bundle-books { width: 100% !important; height: 320px !important; }
  
  /* Autor Section tightening on mobile */
  .autor-box { padding: 1.5rem 1rem !important; gap: 1.5rem !important; }
  .autor-img { max-width: 200px !important; }
  .autor-bio p { font-size: 0.95rem !important; line-height: 1.6 !important; }
}

/* ── COOKIE BANNER ── */
.cookie-banner {
  position: fixed; bottom: 20px; left: 20px; z-index: 9999;
  max-width: 380px; width: calc(100% - 40px);
  background: var(--bg2);
  border: 1px solid var(--border-md);
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0,0,0,.6);
  padding: 1.25rem;
  display: flex; flex-direction: column; gap: 1rem;
  opacity: 0; transform: translateY(20px);
  transition: opacity .4s cubic-bezier(0.16,1,0.3,1), transform .4s cubic-bezier(0.16,1,0.3,1);
}
.cookie-banner.show { opacity: 1; transform: translateY(0); }
.cookie-content strong { color: var(--gold-lt); font-size: 1rem; font-family: var(--serif); display: block; margin-bottom: 4px; }
.cookie-content p { font-size: .8rem; color: var(--muted); line-height: 1.5; margin: 0; }
.cookie-content a { color: var(--gold); text-decoration: underline; text-underline-offset: 2px; }
.cookie-actions { display: flex; gap: 10px; }
.btn-cookie { padding: 8px 16px; border-radius: 6px; font-size: .8rem; font-weight: 600; cursor: pointer; transition: filter .2s; border: none; flex: 1; }
.btn-cookie-accept { background: var(--gold); color: #000; }
.btn-cookie-reject { background: transparent; color: var(--muted); border: 1px solid rgba(200,169,109,.2); }
.btn-cookie:hover { filter: brightness(1.15); }
@media (max-width: 600px) {
  .cookie-banner { bottom: 10px; left: 10px; width: calc(100% - 20px); }
}