/* ==========================================================================
   Editorial Sembradores de Vida - Hoja de Estilos Oficial
   "Transformamos ideas con prop?sito en obras que impactan vidas."
   ========================================================================== */

:root {
  --navy-deep: #071A2C;
  --navy-ink: #0A2036;
  --navy-surface: #0E2842;
  --gold-primary: #B99654;
  --gold-light: #D8B873;
  --gold-subtle: #F0E4CE;
  --ivory: #F5F0E6;
  --ivory-light: #FAF7F2;
  --white: #FFFFFF;
  --slate-text: #496071;
  --slate-dark: #2A3C4B;
  --border-subtle: rgba(185, 150, 84, 0.22);
}

/* Tipograf?a base */
body {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  color: var(--slate-dark);
  background-color: var(--ivory-light);
  overflow-x: hidden;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
}

.font-serif-literary {
  font-family: 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
}

.font-serif-editorial {
  font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
}

.font-sans-clean {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
}

/* Colores personalizados */
.bg-navy-deep { background-color: var(--navy-deep); }
.bg-navy-ink { background-color: var(--navy-ink); }
.bg-navy-surface { background-color: var(--navy-surface); }
.bg-gold { background-color: var(--gold-primary); }
.bg-gold-light { background-color: var(--gold-light); }
.bg-ivory { background-color: var(--ivory); }
.bg-ivory-light { background-color: var(--ivory-light); }

.text-navy-deep { color: var(--navy-deep); }
.text-navy-ink { color: var(--navy-ink); }
.text-gold { color: var(--gold-primary); }
.text-gold-light { color: var(--gold-light); }
.text-slate-text { color: var(--slate-text); }
.text-ivory { color: var(--ivory); }

.border-gold { border-color: var(--gold-primary); }
.border-gold-subtle { border-color: var(--border-subtle); }

/* Gradientes sutiles */
.gold-gradient-text {
  background: linear-gradient(135deg, #F5F0E6 0%, #D8B873 45%, #B99654 85%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.gold-gradient-bg {
  background: linear-gradient(135deg, #D8B873 0%, #B99654 100%);
}

.gold-gradient-bg-hover:hover {
  background: linear-gradient(135deg, #E2CCA0 0%, #C8A763 100%);
}

.navy-gradient-bg {
  background: linear-gradient(180deg, var(--navy-deep) 0%, var(--navy-ink) 100%);
}

/* Barra de navegaci?n con efecto Glassmorphism sobrio */
.header-glass {
  background-color: rgba(7, 26, 44, 0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(185, 150, 84, 0.2);
  transition: all 0.3s ease;
}

.header-scrolled {
  background-color: rgba(7, 26, 44, 0.98);
  box-shadow: 0 10px 30px -10px rgba(7, 26, 44, 0.5);
  border-bottom: 1px solid rgba(185, 150, 84, 0.35);
}

.nav-link {
  position: relative;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: #E2E8F0;
  transition: color 0.2s ease, transform 0.2s ease;
  display: inline-block;
}

@keyframes subtle-vibrate {
  0% { transform: translate(0, 0) rotate(0deg); }
  20% { transform: translate(-1px, 0.5px) rotate(-0.5deg); }
  40% { transform: translate(1px, -0.5px) rotate(0.5deg); }
  60% { transform: translate(-0.5px, -0.5px) rotate(-0.3deg); }
  80% { transform: translate(0.5px, 0.5px) rotate(0.3deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0%;
  height: 2px;
  background-color: var(--gold-primary);
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-link:hover {
  color: var(--gold-light);
  animation: subtle-vibrate 0.3s ease-in-out;
}

.nav-link:hover::after,
.nav-link.active::after {
  width: 100%;
}

.nav-link.active {
  color: var(--gold-light);
}

/* Tarjeta de libro con efecto de elevaci?n 3D */
.book-card {
  perspective: 1000px;
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.book-cover-wrap {
  position: relative;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  box-shadow: 0 15px 35px -10px rgba(7, 26, 44, 0.25), 0 5px 15px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  overflow: hidden;
}

.book-card:hover .book-cover-wrap {
  transform: translateY(-8px) rotateY(-3deg) scale(1.02);
  box-shadow: 0 25px 50px -12px rgba(7, 26, 44, 0.35), 0 10px 25px rgba(185, 150, 84, 0.2);
}

/* Separador dorado editorial */
.editorial-ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.editorial-ornament::before,
.editorial-ornament::after {
  content: '';
  height: 1px;
  width: 48px;
  background: linear-gradient(to right, transparent, var(--gold-primary));
}

.editorial-ornament::after {
  background: linear-gradient(to left, transparent, var(--gold-primary));
}

/* Tarjetas de Rutas para Autores */
.route-card {
  position: relative;
  border-radius: 12px;
  background-color: var(--white);
  border: 1px solid rgba(185, 150, 84, 0.25);
  box-shadow: 0 4px 20px -2px rgba(7, 26, 44, 0.06);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.route-card:hover {
  transform: translateY(-5px);
  border-color: var(--gold-primary);
  box-shadow: 0 16px 32px -8px rgba(7, 26, 44, 0.14), 0 0 0 1px rgba(185, 150, 84, 0.3);
}

/* Etapas del M?todo Semilla */
.semilla-node {
  position: relative;
  transition: all 0.3s ease;
}

.semilla-node:hover .semilla-circle {
  background-color: var(--gold-primary);
  color: var(--navy-deep);
  transform: scale(1.1);
  box-shadow: 0 0 20px rgba(185, 150, 84, 0.4);
}

.semilla-circle {
  transition: all 0.3s ease;
}

/* Modal de Lectura (Interactive Reader) */
.reader-dialog {
  border: none;
  background: transparent;
  padding: 0;
  max-width: 820px;
  width: 92vw;
  margin: auto;
}

.reader-dialog::backdrop {
  background: rgba(7, 26, 44, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.reader-sheet {
  background: #FCFAF6;
  border: 1px solid rgba(185, 150, 84, 0.35);
  border-radius: 12px;
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.5);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
}

.reader-content {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.25rem;
  line-height: 1.85;
  color: #1A2836;
}

.reader-content p {
  margin-bottom: 1.5rem;
  text-align: justify;
}

.reader-dropcap::first-letter {
  float: left;
  font-family: 'Playfair Display', serif;
  font-size: 3.8rem;
  line-height: 0.8;
  padding-top: 4px;
  padding-right: 12px;
  padding-bottom: 2px;
  color: var(--gold-primary);
  font-weight: 700;
}

/* Barra de desplazamiento personalizada */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--navy-deep);
}

::-webkit-scrollbar-thumb {
  background: #3A4E60;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--gold-primary);
}

/* Botón flotante WhatsApp */
.floating-whatsapp {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 40;
  box-shadow: 0 10px 25px -5px rgba(185, 150, 84, 0.4), 0 8px 16px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.floating-whatsapp:hover {
  transform: translateY(-4px) scale(1.05);
  box-shadow: 0 15px 30px -5px rgba(185, 150, 84, 0.6);
}

/* ==========================================================================
   Sección Especializada: Método SEMILLA
   ========================================================================== */
.metodo-stage-card {
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.metodo-stage-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px -8px rgba(185, 150, 84, 0.25);
  border-color: rgba(185, 150, 84, 0.7);
}

.metodo-stage-card:hover .stage-icon-wrap {
  transform: scale(1.06);
  box-shadow: 0 0 20px rgba(216, 184, 115, 0.5);
  border-color: #B99654;
}

.stage-icon-wrap {
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

/* ==========================================================================
   Sección: Dimensiones de una Obra Narrativa (Recorrido Circular Orgánico)
   ========================================================================== */
.dimension-node {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.dimension-node:hover {
  transform: translateY(-8px);
}

.dimension-circle-wrapper {
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.dimension-node:hover .dimension-circle-wrapper {
  box-shadow: 0 20px 38px -10px rgba(185, 150, 84, 0.38);
}

.dimension-circle-inner {
  border: 1.5px solid rgba(185, 150, 84, 0.35);
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
}

.dimension-node:hover .dimension-circle-inner {
  border-color: rgba(216, 184, 115, 0.95);
  box-shadow: 0 0 20px rgba(216, 184, 115, 0.35);
}

.dimension-img {
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.dimension-node:hover .dimension-img {
  transform: scale(1.1);
}

/* ==========================================================================
   FAQ 01 — PARA AUTORES («Línea de Lectura» - Recorrido Editorial Vertical)
   ========================================================================== */
.reading-line-container {
  position: relative;
}

.reading-line-axis {
  position: absolute;
  top: 1.25rem;
  bottom: 2rem;
  left: 1.25rem;
  width: 2px;
  background: linear-gradient(180deg, #B99654 0%, #D8B873 50%, rgba(185, 150, 84, 0.2) 100%);
}

@media (min-width: 640px) {
  .reading-line-axis {
    left: 1.75rem;
  }
}

.reading-line-item {
  position: relative;
  transition: all 0.3s ease;
}

.reading-line-node {
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
  border-radius: 9999px;
  background-color: #FAF7F2;
  border: 2px solid #B99654;
  color: #071A2C;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Playfair Display', serif;
  font-size: 0.8125rem;
  font-weight: 700;
  transition: all 0.3s ease;
  z-index: 10;
  box-shadow: 0 2px 8px rgba(7, 26, 44, 0.08);
}

@media (min-width: 640px) {
  .reading-line-node {
    width: 3.5rem;
    height: 3.5rem;
    font-size: 0.9375rem;
  }
}

.reading-line-item.is-active .reading-line-node {
  background-color: #071A2C;
  border-color: #D8B873;
  color: #D8B873;
  box-shadow: 0 0 16px rgba(185, 150, 84, 0.4);
}

.reading-line-btn {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 0.5rem 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  transition: color 0.25s ease;
}

.reading-line-btn:hover .reading-line-question {
  color: #B99654;
}

.reading-line-item.is-active .reading-line-question {
  color: #B99654;
}

.reading-line-answer-wrapper {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.reading-line-item.is-active .reading-line-answer-wrapper {
  grid-template-rows: 1fr;
}

.reading-line-answer-content {
  overflow: hidden;
}

/* ==========================================================================
   FAQ 02 — NARRATIVA («Página que se despliega» - Apertura Editorial)
   ========================================================================== */
.page-fold-item {
  position: relative;
  border-bottom: 1px solid rgba(185, 150, 84, 0.28);
  transition: all 0.35s ease;
}

.page-fold-btn {
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  padding: 1.5rem 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  transition: all 0.3s ease;
}

.page-fold-indicator {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.8125rem;
  font-style: italic;
  letter-spacing: 0.1em;
  color: #B99654;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  flex-shrink: 0;
}

.page-fold-mark {
  width: 1.25rem;
  height: 1px;
  background-color: #B99654;
  transition: width 0.35s ease, background-color 0.35s ease;
}

.page-fold-item.is-open .page-fold-mark {
  width: 2rem;
  background-color: #D8B873;
}

.page-fold-item.is-open .page-fold-indicator {
  color: #D8B873;
}

.page-fold-drawer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.page-fold-item.is-open .page-fold-drawer {
  grid-template-rows: 1fr;
}

.page-fold-sheet {
  overflow: hidden;
}

.page-fold-inner {
  background-color: #FAF7F2;
  border-left: 3px solid #B99654;
  border-radius: 0 0.75rem 0.75rem 0;
  padding: 1.5rem 1.75rem;
  margin-bottom: 1.5rem;
  box-shadow: inset 1px 1px 4px rgba(7, 26, 44, 0.03), 0 4px 12px rgba(7, 26, 44, 0.04);
}

/* ==========================================================================
   MAPA DE ESPECIALIZACIÓN EDITORIAL (Diagrama Radial)
   ========================================================================== */
.radial-map-canvas {
  position: relative;
  width: 100%;
  max-width: 1060px;
  height: 760px;
  margin: 0 auto;
}

.radial-center-item {
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 270px;
  height: 270px;
  z-index: 10;
}

.radial-center-core {
  width: 100%;
  height: 100%;
  border-radius: 9999px;
  overflow: hidden;
  border: 3px solid #B99654;
  background-color: #071A2C;
  box-shadow: 0 0 0 8px rgba(250, 247, 242, 0.85),
              0 0 0 10px rgba(185, 150, 84, 0.45),
              0 25px 50px -12px rgba(7, 26, 44, 0.35);
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.radial-center-core:hover {
  transform: scale(1.02);
  border-color: #D8B873;
  box-shadow: 0 0 0 8px rgba(250, 247, 242, 0.95),
              0 0 0 11px rgba(216, 184, 115, 0.65),
              0 30px 60px -12px rgba(185, 150, 84, 0.4);
}

.radial-satellite-node {
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.radial-satellite-node:hover {
  transform: translateY(-4px);
}

.radial-satellite-img-wrap {
  position: relative;
  width: 130px;
  height: 130px;
  border-radius: 9999px;
  overflow: hidden;
  border: 2px solid #B99654;
  background-color: #071A2C;
  box-shadow: 0 10px 25px -5px rgba(7, 26, 44, 0.15), 0 0 0 4px rgba(250, 247, 242, 0.9);
  transition: all 0.35s ease;
  flex-shrink: 0;
}

@media (min-width: 1280px) {
  .radial-satellite-img-wrap {
    width: 145px;
    height: 145px;
  }
}

.radial-satellite-node:hover .radial-satellite-img-wrap {
  border-color: #D8B873;
  box-shadow: 0 14px 30px -5px rgba(185, 150, 84, 0.35), 0 0 0 5px rgba(216, 184, 115, 0.4);
}

.radial-satellite-node:hover .radial-satellite-img {
  transform: scale(1.08);
}

.radial-satellite-img {
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.radial-node-01 {
  position: absolute;
  top: 1%;
  left: 50%;
  transform: translateX(-40%);
  display: flex;
  align-items: center;
  gap: 1.25rem;
  max-width: 380px;
  z-index: 20;
}

.radial-node-02 {
  position: absolute;
  top: 26%;
  right: 0%;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  max-width: 360px;
  z-index: 20;
}

.radial-node-03 {
  position: absolute;
  bottom: 6%;
  right: 1%;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  max-width: 360px;
  z-index: 20;
}

.radial-node-04 {
  position: absolute;
  bottom: 6%;
  left: 1%;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  text-align: right;
  gap: 1.25rem;
  max-width: 360px;
  z-index: 20;
}

.radial-node-05 {
  position: absolute;
  top: 26%;
  left: 0%;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  text-align: right;
  gap: 1.25rem;
  max-width: 360px;
  z-index: 20;
}