/* ─── Variables de color ────────────────────────────────────── */
:root {
  --navy:    #1B2A4A;
  --orange:  #E8943A;
  --gold:    #C9A84C;
  --light-bg:#F4F6FA;
  --gray:    #8A8A8A;
}

/* ─── Scrollbar personalizado ───────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--light-bg); }
::-webkit-scrollbar-thumb { background: var(--navy); border-radius: 3px; }

/* ─── Scroll suave ──────────────────────────────────────────── */
html { scroll-behavior: smooth; }

/* overflow-x: clip en lugar de hidden para no romper position:sticky del navbar */
body { overflow-x: clip; }

/* Cada sección bloquea su propio overflow — detiene los transforms de AOS */
section, header, footer { overflow-x: clip; }

/* ─── Navbar scroll ─────────────────────────────────────────── */
#navbar.scrolled {
  background: rgba(27, 42, 74, 0.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 2px 20px rgba(0,0,0,0.25);
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

/* ─── Book mockup ───────────────────────────────────────────── */
.book-mockup {
  display: inline-block;
  overflow: hidden; /* evita que el transform desborde */
}
.book-mockup img {
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  transform: none; /* sin 3D en mobile */
}

/* 3D solo en desktop donde no hay riesgo de scroll horizontal */
@media (min-width: 768px) {
  .book-mockup { perspective: 1200px; }
  .book-mockup img {
    transform: rotateY(-15deg) rotateX(3deg);
    box-shadow: -8px 8px 20px rgba(0,0,0,0.4), 0 20px 60px rgba(0,0,0,0.5);
  }
  .book-mockup:hover img {
    transform: rotateY(-5deg) rotateX(1deg) scale(1.03);
    box-shadow: -4px 12px 30px rgba(0,0,0,0.35), 0 25px 80px rgba(0,0,0,0.45);
  }
}

/* Book mockup CTA final — 3D solo en desktop */
.book-mockup-sm img {
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
@media (min-width: 768px) {
  .book-mockup-sm img { transform: rotateY(-8deg) rotateX(2deg); }
}

/* ─── Botón primario (pulso sutil) ──────────────────────────── */
.btn-primary {
  position: relative;
  overflow: hidden;
}
.btn-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.1);
  transform: translateX(-100%);
  transition: transform 0.3s ease;
}
.btn-primary:hover::after {
  transform: translateX(0);
}

/* ─── Part & FAQ accordions ─────────────────────────────────── */
.part-content,
.faq-content {
  transition: max-height 0.3s ease, opacity 0.3s ease;
}
.part-content.open,
.faq-content.open {
  display: block;
}
.part-chevron.rotated,
.faq-chevron.rotated {
  transform: rotate(180deg);
}

/* ─── Video player personalizado ────────────────────────────── */
video {
  display: block;
  outline: none;
}
video::-webkit-media-controls-panel {
  background: linear-gradient(to top, rgba(27,42,74,0.8), transparent);
}

/* ─── Stat band número ──────────────────────────────────────── */
@keyframes count-up {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── Countdown ─────────────────────────────────────────────── */
#countdown span {
  font-variant-numeric: tabular-nums;
  display: inline-block;
  min-width: 2ch;
}

/* ─── AOS: en mobile anular todos los transforms de inicio ─── */
/* El CSS de AOS aplica translate3d aunque JS esté disabled     */
@media (max-width: 767px) {
  [data-aos] {
    transform: none !important;
    opacity: 1 !important;
    transition: none !important;
  }
}

/* ─── Responsive: ocultar animación en motion-reduce ────────── */
@media (prefers-reduced-motion: reduce) {
  .book-mockup img,
  .book-mockup:hover img {
    transform: none;
  }
  html { scroll-behavior: auto; }
}

/* ─── Focus visible accesible ───────────────────────────────── */
a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ─── Selection color ───────────────────────────────────────── */
::selection {
  background: var(--orange);
  color: white;
}