/* ══════════════════════════════════════════════
   DOC 3V — MÉTODO DE GUITARRA (ebook)
   Sistema editorial — revista de música, no app.
   ══════════════════════════════════════════════ */
:root{
  --paper:      #F5EEE0;
  --paper-2:    #EDE3CE; /* recuadros / bandas alternas */
  --ink:        #231A12;
  --ink-soft:   rgba(35,26,18,0.62);
  --brass:      #B8863A; /* acento dorado-latón */
  --wood:       #5C3A21; /* marrón madera */
  --string:     #9C3B2E; /* rojo óxido, detalle puntual */
  --rule:       rgba(35,26,18,0.18);
  --display: 'Fraunces', Georgia, serif;
  --body:    'Source Sans 3', -apple-system, sans-serif;
  --mono:    'Space Mono', monospace;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
a{color:var(--wood);text-decoration:none;border-bottom:1px dotted var(--brass)}
a:hover{color:var(--string)}
body{
  background:#2b241c;
  color:var(--ink);
  font-family:var(--body);
}

/* pentagrama de fondo tras la hoja — motivo musical ambiente */
.stage{
  min-height:100vh;
  padding:1px 0;
  background-image:repeating-linear-gradient(
    to bottom,
    transparent 0, transparent 38px,
    rgba(245,238,224,0.055) 38px, rgba(245,238,224,0.055) 39px,
    transparent 39px, transparent 44px,
    rgba(245,238,224,0.055) 44px, rgba(245,238,224,0.055) 45px,
    transparent 45px, transparent 50px,
    rgba(245,238,224,0.055) 50px, rgba(245,238,224,0.055) 51px,
    transparent 51px, transparent 56px,
    rgba(245,238,224,0.055) 56px, rgba(245,238,224,0.055) 57px,
    transparent 57px, transparent 62px,
    rgba(245,238,224,0.055) 62px, rgba(245,238,224,0.055) 63px,
    transparent 63px, transparent 140px
  );
}

.page{
  max-width:900px;
  margin:40px auto;
  background:var(--paper);
  box-shadow:0 30px 80px rgba(0,0,0,0.45);
  padding:64px 76px 78px;
  position:relative;
  overflow:hidden;
  background-image:
    radial-gradient(ellipse at top left, rgba(184,134,58,0.07), transparent 55%),
    /* pauta de pentagrama muy sutil, como papel de música */
    repeating-linear-gradient(
      to bottom,
      transparent 0, transparent 27px,
      rgba(35,26,18,0.028) 27px, rgba(35,26,18,0.028) 27.7px,
      transparent 27.7px, transparent 100px
    );
}
.page::after{
  /* silueta de diapasón, marca de agua diagonal en la esquina inferior */
  content:'';
  position:absolute;
  right:-60px; bottom:-40px;
  width:260px; height:520px;
  background:repeating-linear-gradient(
    90deg,
    rgba(92,58,33,0.05) 0, rgba(92,58,33,0.05) 2px,
    transparent 2px, transparent 30px
  );
  transform:rotate(18deg);
  pointer-events:none;
}

/* cabecera de marca — logo + eyebrow de colección, en cada página */
.masthead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:34px;
  position:relative;
  z-index:1;
}
.masthead img{height:34px;width:auto;display:block;opacity:.92}
.masthead .collection{
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-soft);
  text-align:right;
}
.masthead .collection b{color:var(--wood);font-weight:700}

/* ── Cabecera de capítulo ── */
.chapter-eyebrow{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--wood);
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:8px;
}
.chapter-eyebrow::before{
  content:'';
  width:26px;height:1px;background:var(--wood);opacity:.6;
}
.chapter-folio{
  font-family:var(--display);
  font-weight:700;
  font-size:220px;
  line-height:.72;
  color:var(--brass);
  opacity:.16;
  position:absolute;
  top:40px; right:56px;
  pointer-events:none;
  user-select:none;
}
.chapter-title{
  font-family:var(--display);
  font-weight:700;
  font-size:52px;
  line-height:1.05;
  max-width:9.5em;
  margin:0 0 6px;
  position:relative;
}
.chapter-sub{
  font-family:var(--display);
  font-style:italic;
  font-weight:500;
  font-size:20px;
  color:var(--wood);
  margin:0 0 34px;
}
/* divisor tipo pentagrama con clave de sol en vez de <hr> plano */
.chapter-rule{
  display:flex;
  align-items:center;
  gap:14px;
  margin:0 0 40px;
  color:var(--brass);
  font-family:var(--display);
  font-size:26px;
  position:relative;
  z-index:1;
}
.chapter-rule::before{
  content:'𝄞';
  line-height:1;
  transform:translateY(-3px);
}
.chapter-rule::after{
  content:'';
  flex:1;
  height:0;
  border-top:1px solid var(--rule);
  background:repeating-linear-gradient(to right, var(--rule) 0 1px, transparent 1px 1px) 0 3px / 100% 4px,
             repeating-linear-gradient(to right, var(--rule) 0 1px, transparent 1px 1px) 0 8px / 100% 4px,
             repeating-linear-gradient(to right, var(--rule) 0 1px, transparent 1px 1px) 0 13px / 100% 4px;
  height:16px;
  opacity:.5;
}

/* glifos de nota como viñetas / flourish de sección */
.copy ul{list-style:none;padding:0;margin:0 0 1em}
.copy ul li{position:relative;padding-left:22px;margin-bottom:.5em}
.copy ul li::before{
  content:'♪';
  position:absolute;left:0;top:-1px;
  color:var(--string);
  font-size:14px;
}
.note-divider{
  text-align:center;
  color:var(--brass);
  opacity:.55;
  font-size:15px;
  letter-spacing:.5em;
  margin:2em 0;
  break-inside:avoid;
}

/* pie de página — punto de traste como número de folio */
.folio-foot{
  position:absolute;
  left:0; right:0; bottom:26px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-family:var(--mono);
  font-size:11px;
  color:var(--ink-soft);
  z-index:1;
}
.folio-foot .dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--wood); opacity:.5;
}

/* ── Cuerpo editorial ── */
.lede{
  font-family:var(--display);
  font-size:22px;
  line-height:1.5;
  font-weight:400;
  color:var(--ink);
  margin:0 0 30px;
}
.lede::first-letter{
  font-weight:700;
  font-size:3.4em;
  float:left;
  line-height:.82;
  padding:.02em .08em 0 0;
  color:var(--string);
}
/* una sola columna, ancho de lectura cómodo — nada de texto compitiendo
   con diagramas flotantes en 2 columnas (eso era lo que se sentía apretado) */
.copy{
  max-width:560px;
  font-size:17px;
  line-height:1.75;
}
.copy p{margin:0 0 1.3em}
.copy h3{
  font-family:var(--display);
  font-weight:600;
  font-size:22px;
  margin:1.8em 0 .6em;
  break-after:avoid;
}
.copy .pull{
  break-inside:avoid;
  font-family:var(--display);
  font-style:italic;
  font-weight:500;
  font-size:20px;
  line-height:1.45;
  color:var(--wood);
  border-left:2px solid var(--brass);
  padding:4px 0 4px 20px;
  margin:1.8em 0;
  max-width:520px;
}
/* secciones sueltas fuera de .copy heredan el mismo ancho de lectura */
.section{max-width:560px}
.section h3{
  font-family:var(--display);
  font-weight:600;
  font-size:22px;
  margin:0 0 10px;
}
.section > p{margin:0 0 1.2em;font-size:16px;line-height:1.7;color:var(--ink-soft)}

/* ── Marginalia de acordes (elemento firma) ── */
.marg{
  float:right;
  clear:right;
  width:140px;
  margin:6px 0 32px 34px;
  text-align:center;
  position:relative;
}
.marg::before{
  /* "cuerda" que conecta la marginalia al texto */
  content:'';
  position:absolute;
  left:-26px; top:38px;
  width:26px; height:1px;
  background:var(--string);
  opacity:.55;
}
.marg svg{width:100%;height:auto;display:block}
.marg .chord-name{
  font-family:var(--mono);
  font-weight:700;
  font-size:15px;
  letter-spacing:.03em;
  color:var(--string);
  margin-top:6px;
}
.marg .chord-note{
  font-family:var(--body);
  font-size:11px;
  color:var(--ink-soft);
  margin-top:2px;
}
.marg .chord-en{
  font-family:var(--mono);
  font-size:10px;
  color:var(--brass);
  margin-top:1px;
}
.diagram-nut{stroke:var(--ink);stroke-width:3}
.diagram-fret{stroke:var(--rule);stroke-width:1.4}
.diagram-string{stroke:var(--rule);stroke-width:1.4}
.diagram-dot{fill:var(--wood)}
.diagram-dot-num{fill:var(--paper);font-family:var(--mono);font-weight:700;font-size:9px}
.diagram-open{fill:none;stroke:var(--ink);stroke-width:1.6}
.diagram-mute{stroke:var(--string);stroke-width:1.8}
.diagram-barre{stroke:var(--wood);stroke-width:6;stroke-linecap:round}

/* diagrama de caja completa (escalas) — más ancho que la marginalia de acordes */
.pentabox{max-width:280px;margin:1.4em auto;text-align:center}
.pentabox svg{width:100%;height:auto}
.pentabox-lbl{font-family:var(--mono);font-size:10.5px;color:var(--ink-soft);margin-top:8px;line-height:1.5}

/* círculo de quintas real */
.fifths-wheel{max-width:400px;margin:1.6em auto;text-align:center}
.fifths-wheel svg{width:100%;height:auto}
.fw-major{font-family:var(--display);font-weight:700;font-size:13px;fill:var(--wood)}
.fw-minor{font-family:var(--mono);font-size:9px;fill:var(--string)}
.fw-ring{fill:none;stroke:var(--rule);stroke-width:1}
.fw-highlight{fill:var(--brass);opacity:.16}

/* Cómo leer el diagrama — mini leyenda didáctica */
.legend{
  display:flex;
  gap:24px;
  justify-content:center;
  flex-wrap:wrap;
  margin:8px 0 4px;
  font-size:12px;
  color:var(--ink-soft);
}
.legend .li{display:flex;align-items:center;gap:7px}
.legend svg{flex:none}

/* bajo + rasgueo — mini tab didáctica para canciones */
.strum-card{
  break-inside:avoid;
  display:grid;
  grid-template-columns:auto 1fr;
  gap:4px 14px;
  background:var(--paper-2);
  border:1px solid var(--rule);
  padding:16px 20px;
  margin:1.2em 0;
  font-family:var(--mono);
  font-size:13px;
}
.strum-card .chord-lbl{color:var(--wood);font-weight:700}
.strum-card .strum-pat{color:var(--ink)}
.strum-card .strum-pat .down{color:var(--string)}
.strum-card .strum-pat .up{color:var(--brass)}

/* ejercicio de dedos — patrón numerado sobre el diapasón */
.finger-ex{
  break-inside:avoid;
  display:flex;
  gap:10px;
  align-items:center;
  font-family:var(--mono);
  font-size:15px;
  font-weight:700;
  margin:.6em 0;
  color:var(--wood);
}
.finger-ex .fx-label{font-family:var(--body);font-weight:600;font-size:13px;color:var(--ink-soft);min-width:150px}
.finger-ex .fx-nums span{
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:50%;
  background:var(--brass);color:var(--paper);
  margin-right:4px;font-size:12px;
}

/* ── Caja de práctica/tip ── */
.box{
  break-inside:avoid;
  background:var(--paper-2);
  border:1px solid var(--rule);
  border-left:3px solid var(--wood);
  padding:18px 22px;
  margin:1.2em 0;
  font-size:14.5px;
  line-height:1.55;
}
.box .box-label{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--wood);
  display:block;
  margin-bottom:6px;
}

/* ── CTA de cierre de capítulo → herramienta Doc 3V ── */
.tool-cta{
  break-inside:avoid;
  margin-top:46px;
  padding-top:26px;
  border-top:1px solid var(--rule);
  display:flex;
  gap:18px;
  align-items:flex-start;
}
.tool-cta .icon{
  font-family:var(--display);
  font-weight:700;
  font-size:15px;
  width:38px;height:38px;
  border-radius:50%;
  background:var(--brass);
  color:var(--paper);
  display:flex;align-items:center;justify-content:center;
  flex:none;
}
.tool-cta .txt{font-size:14px;line-height:1.55}
.tool-cta .txt b{font-family:var(--display);font-weight:700;color:var(--wood)}
/* link a herramienta real en doc3vmusic.com — discreto, no grita "banner" */
.tool-cta .txt a,
.tool-name a{
  color:var(--wood);
  text-decoration:none;
  border-bottom:1px dotted var(--brass);
  transition:color .15s;
}
.tool-cta .txt a:hover,
.tool-name a:hover{color:var(--string)}
.tool-cta .txt a b{color:inherit}

/* ── Figura con imagen (foto o ilustración) — compartida entre capítulos ── */
.figure{
  max-width:560px;
  margin:1.6em auto;
  text-align:center;
}
.figure img{
  max-width:100%;
  border-radius:4px;
  border:1px solid var(--rule);
  background:#fff;
}
.figure svg{max-width:100%;height:auto}
.figure .cap{
  font-family:var(--mono);
  font-size:11px;
  color:var(--ink-soft);
  margin-top:8px;
  letter-spacing:.02em;
}
.figure .cap a{color:var(--ink-soft)}

/* ── Cita de músico — variante de .pull con atribución ── */
.quote{
  break-inside:avoid;
  font-family:var(--display);
  font-style:italic;
  font-weight:500;
  font-size:20px;
  line-height:1.45;
  color:var(--wood);
  border-left:2px solid var(--brass);
  padding:4px 0 4px 20px;
  margin:1.8em 0;
  max-width:520px;
}
.quote .who{
  display:block;
  font-family:var(--mono);
  font-style:normal;
  font-weight:700;
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--brass);
  margin-top:10px;
}

/* ── "¿Sabías que...?" — variante de .box para curiosidades ── */
.box.curio{
  border-left:3px solid var(--string);
  background:rgba(156,59,46,0.05);
}
.box.curio .box-label{color:var(--string)}

/* ── Póster de acordes (Apéndice B) ── */
.poster-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:20px 16px;
  max-width:680px;margin:1.6em 0;
}
.poster-chord{text-align:center}
.poster-chord svg{width:100%;height:auto}
.poster-chord .nm{font-family:var(--mono);font-weight:700;font-size:13px;color:var(--string);margin-top:4px}
@media (max-width:720px){.poster-grid{grid-template-columns:repeat(2,1fr)}}

/* ── Página divisora de Parte ── */
.divider-page{
  min-height:70vh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;
}
.divider-eyebrow{
  font-family:var(--mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--brass);margin-bottom:10px;
}
.divider-num{
  font-family:var(--display);font-weight:700;font-size:120px;line-height:1;color:var(--brass);opacity:.85;margin-bottom:4px;
}
.divider-title{
  font-family:var(--display);font-weight:700;font-size:44px;line-height:1.1;color:var(--ink);max-width:9em;margin:0 0 20px;
}
.divider-sub{
  font-family:var(--display);font-style:italic;font-size:18px;color:var(--wood);max-width:32em;line-height:1.5;
}
.divider-range{
  margin-top:26px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);
}

/* ── Impresión (Hotmart PDF) ── */
@media print{
  body{background:#fff}
  .page{
    box-shadow:none;margin:0;max-width:none;
    padding:18mm 20mm;
  }
  .chapter-folio{opacity:.12}
}

/* ── Responsive (lector web) ── */
@media (max-width:720px){
  .page{padding:40px 24px}
  .copy{columns:1}
  .chapter-title{font-size:36px}
  .chapter-folio{font-size:120px;top:20px;right:20px}
  .marg{float:none;width:120px;margin:16px auto}
  .marg::before{display:none}
}