/* ============================================================
   PARÁBOLAS TAOÍSTAS — Hoja de estilos única
   Paleta: Jade · Fondo: papel de arroz
   ============================================================ */

:root {
  /* Paleta principal — Jade */
  --color-primario: #2d4a3e;        /* Verde jade oscuro */
  --color-secundario: #4a7c59;      /* Jade medio */
  --color-acento: #b8935a;          /* Bronce sobrio */
  --color-fondo: #f5f4ef;           /* Blanco roto cálido, papel de arroz */
  --color-superficie: #ffffff;      /* Blanco puro */
  --color-borde: #d9d9d9;
  --color-texto: #2b2b2b;
  --color-texto-suave: #5a5a5a;
  --color-exito: #2e7d32;
  --color-alerta: #b71c1c;
  --color-destacado: #eef3ef;       /* Tinte jade muy suave */

  /* Tipografía */
  --fuente-base: "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --fuente-titulos: "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --fuente-original: "Noto Serif SC", "Songti SC", "SimSun", "STSong", "Times New Roman", serif;

  /* Espaciado */
  --espacio-xs: 0.5rem;
  --espacio-sm: 1rem;
  --espacio-md: 1.5rem;
  --espacio-lg: 2.5rem;
  --espacio-xl: 4rem;

  /* Layout */
  --ancho-maximo: 1100px;
  --radio-borde: 8px;
  --sombra-suave: 0 2px 8px rgba(0, 0, 0, 0.06);
  --sombra-media: 0 4px 16px rgba(0, 0, 0, 0.10);
  --transicion: all 0.25s ease;
}

/* ============================================================
   RESET Y BASE
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  padding: 0;
  font-family: var(--fuente-base);
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-texto);
  background: var(--color-fondo);
}

h1, h2, h3, h4 {
  font-family: var(--fuente-titulos);
  line-height: 1.25;
  color: var(--color-primario);
}

a { color: var(--color-secundario); text-decoration: none; transition: var(--transicion); }
a:hover { color: var(--color-acento); }

/* ============================================================
   LAYOUT GENERAL
   ============================================================ */

.contenedor {
  max-width: var(--ancho-maximo);
  margin: 0 auto;
  padding: var(--espacio-lg) var(--espacio-md);
}

/* ============================================================
   HEADER Y FOOTER DEL SITIO
   ============================================================ */

.header-sitio {
  background: linear-gradient(135deg, var(--color-primario) 0%, var(--color-secundario) 100%);
  color: #ffffff;
  padding: var(--espacio-lg) var(--espacio-md);
  text-align: center;
  box-shadow: var(--sombra-media);
}

.header-sitio h1 {
  margin: 0 0 var(--espacio-xs) 0;
  font-size: 2rem;
  color: #ffffff;
  letter-spacing: 0.02em;
}

.header-sitio p {
  margin: 0;
  font-size: 1rem;
  opacity: 0.92;
  font-style: italic;
}

.footer-sitio {
  background: var(--color-primario);
  color: #ffffff;
  padding: var(--espacio-lg) var(--espacio-md);
  text-align: center;
  margin-top: var(--espacio-xl);
  font-size: 0.9rem;
}

.footer-sitio a { color: var(--color-acento); }
.footer-sitio a:hover { color: #ffffff; }

/* ============================================================
   NAVEGACIÓN DE REGRESO
   ============================================================ */

.nav-volver {
  display: inline-block;
  margin-bottom: var(--espacio-md);
  padding: 0.5rem 1rem;
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-borde);
  color: var(--color-primario);
  font-size: 0.9rem;
  font-weight: 600;
}

.nav-volver:hover {
  background: var(--color-primario);
  color: #ffffff;
  border-color: var(--color-primario);
}

/* ============================================================
   INFOGRAFÍA (contenedor principal)
   ============================================================ */

.infografia,
.sintesis {
  background: var(--color-superficie);
  border-radius: var(--radio-borde);
  box-shadow: var(--sombra-suave);
  padding: var(--espacio-lg);
}

.encabezado-compacto {
  text-align: center;
  border-bottom: 2px solid var(--color-acento);
  padding-bottom: var(--espacio-md);
  margin-bottom: var(--espacio-lg);
}

.titulo-principal {
  margin: 0 0 var(--espacio-xs) 0;
  font-size: 1.8rem;
  color: var(--color-primario);
}

.fuente-titulo {
  margin: 0;
  font-size: 0.95rem;
  color: var(--color-texto-suave);
  font-style: italic;
}

/* ============================================================
   CUERPO A DOBLE COLUMNA (puntos 1-11)
   ============================================================ */

.infografia-cuerpo {
  column-count: 2;
  column-gap: 2.5rem;
  column-rule: 1px solid var(--color-borde);
}

.infografia-cuerpo > .punto {
  break-inside: avoid;
  font-size: 0.95rem;
  line-height: 1.55;
  margin-bottom: var(--espacio-md);
}

/* Puntos a ancho completo (12-13, introducciones, infografías) */
.punto-completo {
  column-span: all;
  margin: var(--espacio-lg) 0;
}

/* ============================================================
   PUNTO (sección con título numerado)
   ============================================================ */

.punto-titulo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 var(--espacio-sm) 0;
  font-size: 1.05rem;
  color: var(--color-primario);
  font-weight: 700;
}

.punto-numero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.8rem;
  height: 1.8rem;
  background: var(--color-primario);
  color: #ffffff;
  border-radius: 50%;
  font-size: 0.85rem;
  font-weight: 700;
  flex-shrink: 0;
}

/* ============================================================
   CAJAS DE TEXTO
   ============================================================ */

.caja-texto {
  background: var(--color-destacado);
  border-left: 4px solid var(--color-secundario);
  padding: var(--espacio-sm) var(--espacio-md);
  border-radius: 0 var(--radio-borde) var(--radio-borde) 0;
  margin: var(--espacio-xs) 0;
}

.caja-no-ensena {
  background: #fdecea;
  border-left: 4px solid var(--color-alerta);
  padding: var(--espacio-sm) var(--espacio-md);
  border-radius: 0 var(--radio-borde) var(--radio-borde) 0;
  margin: var(--espacio-xs) 0;
}

.caja-si-ensena {
  background: #e8f5e9;
  border-left: 4px solid var(--color-exito);
  padding: var(--espacio-sm) var(--espacio-md);
  border-radius: 0 var(--radio-borde) var(--radio-borde) 0;
  margin: var(--espacio-xs) 0;
}

.caja-texto p,
.caja-no-ensena p,
.caja-si-ensena p {
  margin: 0.4rem 0;
}

/* ============================================================
   BLOCKQUOTE (texto de la parábola)
   ============================================================ */

blockquote {
  margin: var(--espacio-sm) 0;
  padding: var(--espacio-sm) var(--espacio-md);
  background: var(--color-destacado);
  border-left: 4px solid var(--color-acento);
  font-style: italic;
  color: var(--color-texto);
  border-radius: 0 var(--radio-borde) var(--radio-borde) 0;
}

blockquote cite {
  display: block;
  margin-top: var(--espacio-xs);
  font-size: 0.85rem;
  color: var(--color-texto-suave);
  font-style: normal;
  text-align: right;
}

/* ============================================================
   PALABRAS CLAVE DEL ORIGINAL
   ============================================================ */

.palabra-clave {
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-borde);
  padding: var(--espacio-sm);
  margin: var(--espacio-xs) 0;
  text-align: center;
}

.palabra-clave .original {
  font-family: var(--fuente-original);
  font-size: 1.6rem;
  color: var(--color-primario);
  display: block;
  margin-bottom: 0.2rem;
  direction: ltr;
}

.palabra-clave .transliteracion {
  font-style: italic;
  color: var(--color-secundario);
  font-size: 0.95rem;
  display: block;
  margin-bottom: 0.2rem;
}

.palabra-clave .significado {
  font-size: 0.88rem;
  color: var(--color-texto-suave);
}

/* ============================================================
   TABLAS
   ============================================================ */

.tabla-comparativa {
  width: 100%;
  border-collapse: collapse;
  margin: var(--espacio-sm) 0;
  font-size: 0.88rem;
}

.tabla-comparativa th {
  background: var(--color-primario);
  color: #ffffff;
  padding: 0.5rem 0.7rem;
  text-align: left;
  font-weight: 600;
}

.tabla-comparativa td {
  padding: 0.5rem 0.7rem;
  border-bottom: 1px solid var(--color-borde);
  vertical-align: top;
}

.tabla-comparativa tr:nth-child(even) td {
  background: var(--color-destacado);
}

/* ============================================================
   FRASE RESUMEN
   ============================================================ */

.frase-resumen {
  background: linear-gradient(135deg, var(--color-primario) 0%, var(--color-secundario) 100%);
  color: #ffffff;
  padding: var(--espacio-lg);
  border-radius: var(--radio-borde);
  text-align: center;
  font-size: 1.15rem;
  font-style: italic;
  line-height: 1.5;
  margin: var(--espacio-lg) 0;
  box-shadow: var(--sombra-media);
}

.frase-resumen strong {
  display: block;
  font-style: normal;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: var(--espacio-xs);
  opacity: 0.85;
}

/* ============================================================
   INFOGRAFÍA VISUAL (punto 13)
   ============================================================ */

.infografia-visual {
  background: var(--color-destacado);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-borde);
  padding: var(--espacio-lg);
  margin: var(--espacio-lg) 0;
}

.infografia-visual h3 {
  text-align: center;
  color: var(--color-primario);
  margin-top: 0;
  margin-bottom: var(--espacio-md);
  font-size: 1.2rem;
}

.infografia-visual .grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--espacio-md);
  margin-bottom: var(--espacio-md);
}

.infografia-visual .tarjeta-visual {
  background: var(--color-superficie);
  border-radius: var(--radio-borde);
  padding: var(--espacio-md);
  text-align: center;
  box-shadow: var(--sombra-suave);
}

.infografia-visual .tarjeta-visual .icono {
  font-size: 2rem;
  display: block;
  margin-bottom: var(--espacio-xs);
}

.infografia-visual .tarjeta-visual h4 {
  margin: 0 0 var(--espacio-xs) 0;
  color: var(--color-primario);
  font-size: 1rem;
}

.infografia-visual .tarjeta-visual p {
  margin: 0;
  font-size: 0.85rem;
  color: var(--color-texto-suave);
}

.infografia-visual .frase-cierre {
  text-align: center;
  font-style: italic;
  color: var(--color-primario);
  border-top: 1px solid var(--color-borde);
  padding-top: var(--espacio-md);
  margin-top: var(--espacio-md);
  font-size: 0.95rem;
}

/* ============================================================
   TARJETAS DE PARÁBOLA (index)
   ============================================================ */

.tarjeta-parabola {
  display: block;
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-borde);
  padding: var(--espacio-sm) var(--espacio-md);
  margin-bottom: var(--espacio-xs);
  transition: var(--transicion);
}

.tarjeta-parabola:hover {
  border-color: var(--color-secundario);
  box-shadow: var(--sombra-suave);
  transform: translateX(4px);
}

.tarjeta-parabola .titulo {
  font-weight: 600;
  color: var(--color-primario);
  display: block;
  margin-bottom: 0.2rem;
}

.tarjeta-parabola .fuente {
  font-size: 0.82rem;
  color: var(--color-texto-suave);
  font-style: italic;
}

.badge {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-left: 0.4rem;
  vertical-align: middle;
}

.badge-verificable {
  background: #e8f5e9;
  color: var(--color-exito);
}

.badge-sapiencial {
  background: #fff8e1;
  color: #8a6d1a;
}

/* ============================================================
   BLOQUES TEMÁTICOS (index)
   ============================================================ */

.bloque-tematico {
  background: var(--color-superficie);
  border-radius: var(--radio-borde);
  box-shadow: var(--sombra-suave);
  padding: var(--espacio-lg);
  margin-bottom: var(--espacio-lg);
}

.bloque-tematico h2 {
  margin-top: 0;
  color: var(--color-primario);
  border-bottom: 2px solid var(--color-acento);
  padding-bottom: var(--espacio-xs);
}

.bloque-tematico .descripcion {
  color: var(--color-texto-suave);
  margin-bottom: var(--espacio-md);
  font-size: 0.95rem;
}

.bloque-tematico .boton-sintesis {
  display: inline-block;
  margin-top: var(--espacio-md);
  padding: 0.6rem 1.4rem;
  background: var(--color-primario);
  color: #ffffff;
  border-radius: var(--radio-borde);
  font-weight: 600;
  font-size: 0.9rem;
}

.bloque-tematico .boton-sintesis:hover {
  background: var(--color-acento);
  color: #ffffff;
}

/* ============================================================
   ESTADÍSTICAS (index)
   ============================================================ */

.grid-estadisticas {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--espacio-md);
  margin: var(--espacio-lg) 0;
}

.tarjeta-estadistica {
  background: var(--color-superficie);
  border-radius: var(--radio-borde);
  padding: var(--espacio-md);
  text-align: center;
  box-shadow: var(--sombra-suave);
  border-top: 4px solid var(--color-acento);
}

.tarjeta-estadistica .numero {
  display: block;
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-primario);
}

.tarjeta-estadistica .etiqueta {
  font-size: 0.85rem;
  color: var(--color-texto-suave);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ============================================================
   ESQUEMA DE ANÁLISIS (index)
   ============================================================ */

.esquema-analisis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--espacio-sm);
  margin: var(--espacio-lg) 0;
}

.esquema-analisis .item {
  background: var(--color-superficie);
  border-radius: var(--radio-borde);
  padding: var(--espacio-sm);
  border-left: 3px solid var(--color-secundario);
  font-size: 0.9rem;
}

.esquema-analisis .item strong {
  color: var(--color-primario);
}

/* ============================================================
   PATRONES (síntesis de bloque)
   ============================================================ */

.patron {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--espacio-sm);
  align-items: start;
  margin: var(--espacio-sm) 0;
}

.patron .icono {
  font-size: 1.5rem;
  line-height: 1;
}

.patron .contenido strong {
  display: block;
  color: var(--color-primario);
  margin-bottom: 0.2rem;
}

/* ============================================================
   SECCIÓN DESTACADA (síntesis general en index)
   ============================================================ */

.seccion-destacada {
  background: linear-gradient(135deg, var(--color-primario) 0%, var(--color-secundario) 100%);
  color: #ffffff;
  border-radius: var(--radio-borde);
  padding: var(--espacio-lg);
  text-align: center;
  margin: var(--espacio-lg) 0;
}

.seccion-destacada h2 {
  color: #ffffff;
  margin-top: 0;
}

.seccion-destacada p {
  opacity: 0.95;
  margin-bottom: var(--espacio-md);
}

.seccion-destacada .boton-grande {
  display: inline-block;
  padding: 0.8rem 2rem;
  background: var(--color-acento);
  color: #ffffff;
  border-radius: var(--radio-borde);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.02em;
}

.seccion-destacada .boton-grande:hover {
  background: #ffffff;
  color: var(--color-primario);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 768px) {
  .infografia-cuerpo {
    column-count: 1;
    column-rule: none;
  }

  .infografia,
  .sintesis {
    padding: var(--espacio-md);
  }

  .grid-estadisticas {
    grid-template-columns: repeat(2, 1fr);
  }

  .infografia-visual .grid-3 {
    grid-template-columns: 1fr;
  }

  .header-sitio h1 {
    font-size: 1.5rem;
  }

  .titulo-principal {
    font-size: 1.4rem;
  }
}

@media (max-width: 480px) {
  .grid-estadisticas {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   IMPRESIÓN — 3 hojas carta máximo
   ============================================================ */

@media print {
  @page {
    size: letter;
    margin: 1.5cm;
  }

  body {
    font-size: 11pt;
    background: #ffffff;
    color: #000000;
  }

  .header-sitio,
  .footer-sitio,
  .nav-volver {
    display: none !important;
  }

  .contenedor {
    max-width: 100%;
    padding: 0;
  }

  .infografia,
  .sintesis {
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    background: #ffffff;
  }

  .infografia-cuerpo {
    column-count: 2;
    column-gap: 1.5rem;
    column-rule: 1px solid #cccccc;
    font-size: 9pt;
  }

  .infografia-cuerpo > .punto {
    font-size: 8.5pt;
    line-height: 1.4;
    page-break-inside: avoid;
  }

  .punto-completo {
    page-break-inside: avoid;
  }

  h1, h2, h3 {
    page-break-after: avoid;
  }

  .frase-resumen {
    background: #f0f0f0 !important;
    color: #000000 !important;
    box-shadow: none;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .caja-no-ensena,
  .caja-si-ensena,
  .caja-texto {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .infografia-visual {
    page-break-inside: avoid;
  }

  a {
    color: #000000;
    text-decoration: none;
  }
}