/* ============================================================
   /libro/ — libro.css
   Adaptado del custom.css original del sitio real. Se quitó la
   regla de #navbar.scrolled: ahora usa el header compartido
   (.site-header.is-scrolled ya vive en base.css).
============================================================ */

/* Fuentes autoalojadas — Montserrat (sans) + Lora (serif), subset latino */
@font-face{
  font-family:'Montserrat';
  font-style:normal;
  font-weight:400 900;
  font-display:swap;
  src:url('../../libro/fonts/montserrat-latin-variable.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Lora';
  font-style:normal;
  font-weight:400 600;
  font-display:swap;
  src:url('../../libro/fonts/lora-latin-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Lora';
  font-style:italic;
  font-weight:400;
  font-display:swap;
  src:url('../../libro/fonts/lora-latin-italic.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ─── Variables de color propias del libro (navy/orange/gold) ── */
: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; }

section, footer { overflow-x: hidden; }

/* ─── Book mockup ───────────────────────────────────────────── */
.book-mockup {
  display: inline-block;
  overflow: hidden;
}
.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;
}
@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-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);
}

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

@media (prefers-reduced-motion: reduce) {
  .book-mockup img, .book-mockup:hover img { transform: none; }
}

/* ─── Focus visible / selección con el color del libro ──────── */
#hero a:focus-visible, #hero button:focus-visible,
.bg-navy a:focus-visible, .bg-navy button:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
  border-radius: 4px;
}