/* ==========================================================================
   Estilo 260417a.css (Dark)
   DESTILERÍA OSMANCITO — HOJA DE ESTILO
   Arquitectura de variables puras. Todo deriva de :root.
   Para modificar la presentación visual: editar solo las variables de :root.
   El resto del archivo es estructura permanente.
   ========================================================================== */

/* --- 0. IMPORTACIONES --------------------------------------------------- */

/* Fuentes originales del sistema — activas */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400;1,600&family=Cormorant+SC:wght@300;400;600&family=IM+Fell+English:ital@0;1&family=Cinzel:wght@400;600;700&family=IBM+Plex+Mono:ital,wght@0,300;0,400;1,300&display=swap');

/* Fuentes adicionales — incorporadas en lote 006 (Anna Karenina)
   Desactivadas por defecto: el sistema usa las fuentes originales.
   Para activar: descomentar la línea y actualizar las variables --f-* en :root.
   EB Garamond  → reemplazaría --f-cuerpo (Cormorant Garamond)
   Playfair Display → reemplazaría --f-titulo (Cinzel)
   Inconsolata  → reemplazaría --f-mono (IBM Plex Mono)
*/
/*
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Playfair+Display:ital,wght@0,400;0,500;0,700;1,400;1,500&family=Inconsolata:wght@300;400;500&display=swap');
*/


/* --- 1. VARIABLES MAESTRAS (:root) --------------------------------------- */
/*
   INSTRUCCIONES DE MODIFICACIÓN:
   · Para cambiar tamaños: editar --base y --ratio. Todo lo demás se recalcula.
   · Para cambiar paleta: editar las variables de color. Nada más tocar.
   · Para cambiar tipografía: editar las variables --f-*. Luego ajustar --base si es necesario.
   · NUNCA editar nada fuera de este bloque para cambios visuales globales.
*/

:root {

  /* -- TIPOGRAFÍA -- */
  /* Cuerpo narrativo: Cormorant Garamond peso ligero — fluye, no pesa */
  --f-cuerpo:     'Cormorant Garamond', Georgia, serif;
  /* Títulos de módulo / cabecera: Cinzel — jerárquico, solemne */
  --f-titulo:     'Cinzel', 'Trajan Pro', serif;
  /* Títulos de sección intermedios: Cormorant SC — mismo origen, distinto registro */
  --f-subtitulo:  'Cormorant SC', 'Cormorant Garamond', Georgia, serif;
  /* Fracciones nobles / destilado maestro: IM Fell English — más orgánico, con carácter */
  --f-literario:  'IM Fell English', 'Cormorant Garamond', Georgia, serif;
  /* Etiquetas, fichas, bitácora: IBM Plex Mono */
  --f-mono:       'IBM Plex Mono', 'Courier New', monospace;

  /* -- ESCALA (modificar aquí para escalar todo) -- */
	--base:					clamp(1.5rem, 1.5rem + .833vw, 2.5rem);
  /*--base:         clamp(1.05rem, 0.9rem + 0.75vw, 1.35rem);*/
	--ratio:        1.05;   /* Major Third — más jerarquía entre niveles */
  /*--ratio:        1.22;*/   /* Major Third — más jerarquía entre niveles */

  /* Escala derivada — no tocar */
  --sz-xs:        calc(var(--base) * 0.64);
  --sz-sm:        calc(var(--base) * 0.8);
  --sz-body:      var(--base);
  --sz-md:        calc(var(--base) * var(--ratio));
  --sz-lg:        calc(var(--base) * var(--ratio) * var(--ratio));
  --sz-xl:        calc(var(--base) * var(--ratio) * var(--ratio) * var(--ratio));
  --sz-xxl:       calc(var(--base) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio));
  --sz-display:   calc(var(--base) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio));

  /* -- ESPACIADO (derivado de --base) -- */
  --sp-1:         calc(var(--base) * 0.5);
  --sp-2:         var(--base);
  --sp-3:         calc(var(--base) * 2);
  --sp-4:         calc(var(--base) * 3.5);
  --sp-5:         calc(var(--base) * 5);

  /* -- RITMO TIPOGRÁFICO -- */
  --lh-cuerpo:    1.85;    /* Más aire en el cuerpo — Cormorant lo necesita */
  --lh-titulo:    1.1;
  --lh-mono:      1.65;
  --ls-titulo:    0.2em;
  --ls-etiqueta:  0.3em;
  --ls-mono:      0.03em;

  /* -- PALETA -- */
  /* Fondos: negros cálidos con dominante marrón-rojo, no azul */
  --c-fondo:            #080604;    /* Negro tinta — fondo de página */
  --c-fondo-bloque:     #0f0b07;    /* Negro ámbar oscuro — fondos de componentes */
  --c-fondo-elevado:    #181009;    /* Marrón muy oscuro — fondo elevado */
  --c-fondo-sunken:     #060402;    /* Hundido — para contraste máximo */

  /* Textos: pergamino cálido, no gris frío */
  --c-texto:            #ddd0b3;    /* Pergamino claro */
  --c-texto-suave:      #b09060;    /* Bronce — texto secundario */
  --c-texto-tenue:      #6b5438;    /* Cuero oscuro — texto decorativo */
  --c-texto-fantasma:   #3d2e1c;    /* Casi invisible — watermark */

  /* Acentos: ámbar más rico, más saturado */
  --c-oro:              #d4a044;    /* Ámbar dorado — acento principal */
  --c-oro-suave:        #a8783a;    /* Oro antiguo — acento secundario */
  --c-oro-palido:       #e8cc88;    /* Oro pálido — hover, highlights */
  --c-oxido:            #923d2a;    /* Óxido teja — alerta / énfasis fuerte */
  --c-oxido-suave:      #6b2d1e;    /* Óxido oscuro */

  /* Código: marfil cálido en lugar de verde fósforo */
  --c-mono:             #c8b88a;    /* Marfil dorado — texto de prompts */
  --c-mono-tenue:       #7a6445;    /* Marfil oscuro — prompts secundarios */

  /* Bordes y divisores */
  --c-humo:             #201508;    /* Divisor sutil */
  --c-humo-medio:       #362510;    /* Borde visible */
  --c-humo-claro:       #4a3418;    /* Borde más legible */

  /* Sombras */
  --c-sombra:           rgba(0, 0, 0, 0.6);
  --c-sombra-suave:     rgba(0, 0, 0, 0.3);
  --c-brillo-oro:       rgba(212, 160, 68, 0.08);
  --c-brillo-oro-medio: rgba(212, 160, 68, 0.15);

  /* -- BORDES -- */
  --b-fino:       1px;
  --b-medio:      2px;
  --b-grueso:     4px;
  --b-acento:     6px;

  /* -- GEOMETRÍA -- */
  --ancho-max:    72rem;
  --ancho-texto:  62rem;
  --radio:        1px;   /* Casi sin redondeo — carácter editorial duro */

  /* -- TRANSICIONES -- */
  --t-rapida:     0.15s ease;
  --t-normal:     0.3s ease;
}


/* --- 2. RESET Y BASE ----------------------------------------------------- */

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

html {
  font-size: 100%;
  scroll-behavior: smooth;
  background-color: var(--c-fondo-sunken);
}

body {
  font-family: var(--f-cuerpo);
  font-size: var(--sz-body);
  line-height: var(--lh-cuerpo);
  color: var(--c-texto);
  background-color: var(--c-fondo);
  max-width: var(--ancho-max);
	
  /* margin: 0 auto; */
  /* padding: var(--sp-4) clamp(var(--sp-2), 5vw, var(--sp-4)); */
	
	/* Reemplazamos el padding físico por el lógico */
  padding-block: var(--sp-4);
  padding-inline: clamp(var(--sp-2), 5vw, var(--sp-4));
  
  /* El margen también se vuelve inteligente */
  margin-inline: auto;
	
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-weight: 300;
  /* Sombra lateral: el documento tiene peso físico */
  box-shadow:
    -1px 0 0 var(--c-humo-medio),
     1px 0 0 var(--c-humo-medio),
     0 0 80px var(--c-sombra);
}

::selection {
  background-color: var(--c-oro-suave);
  color: var(--c-fondo);
}


/* --- 3. TIPOGRAFÍA BASE -------------------------------------------------- */

p {
  margin-bottom: var(--sp-2);
  font-weight: 300;
  /* Justificado con guiones: bloques de prosa narrativa */
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
  hyphenate-limit-chars: 6 3 3;
  word-spacing: -0.01em; /* compensa el justify en Cormorant */
}

p + p {
  margin-top: 0;
}

strong {
  color: var(--c-oro);
  font-weight: 600;
}

em {
  color: var(--c-texto-suave);
  font-style: italic;
  font-weight: 300;
}

a {
  color: var(--c-oro);
  text-decoration: none;
  border-bottom: var(--b-fino) solid var(--c-humo-medio);
  transition: color var(--t-rapida), border-color var(--t-rapida);
}

a:hover {
  color: var(--c-oro-palido);
  border-bottom-color: var(--c-oro-suave);
}

hr {
  border: none;
  border-top: var(--b-fino) solid var(--c-humo);
  margin: var(--sp-4) 0;
  position: relative;
}

/* Separador ornamental — centrado */
hr::after {
  content: '◆';
  position: absolute;
  top: -0.6em;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.6em;
  color: var(--c-texto-fantasma);
  background: var(--c-fondo);
  padding: 0 0.5em;
  letter-spacing: 0;
}

blockquote {
  border-left: var(--b-medio) solid var(--c-oro-suave);
  padding-left: var(--sp-3);
  margin: var(--sp-3) 0;
  color: var(--c-texto-suave);
  font-style: italic;
  font-family: var(--f-literario);
  font-size: calc(var(--sz-body) * 1.08);
  line-height: 1.9;
  text-align: justify;
  hyphens: auto;
}

code {
  font-family: var(--f-mono);
  font-size: var(--sz-sm);
  color: var(--c-mono);
  background: var(--c-fondo-bloque);
  padding: 0.1em 0.4em;
  letter-spacing: var(--ls-mono);
  border: var(--b-fino) solid var(--c-humo-medio);
}

pre {
  font-family: var(--f-mono);
  font-size: var(--sz-sm);
  color: var(--c-mono);
  background: var(--c-fondo-bloque);
  border: var(--b-fino) solid var(--c-humo-medio);
  padding: var(--sp-3);
  margin: var(--sp-3) 0;
  line-height: var(--lh-mono);
  overflow-x: auto;
  letter-spacing: var(--ls-mono);
  white-space: pre-wrap;
  /* Sin justificado en código */
  text-align: left;
  hyphens: none;
}


/* --- 4. JERARQUÍA DE TÍTULOS --------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
  line-height: var(--lh-titulo);
  /* Títulos nunca justificados */
  text-align: left;
  hyphens: none;
}

/* H1 — Título del documento (cabecera) */
/* Cinzel: solemne, distante, permanente */
h1 {
  font-family: var(--f-titulo);
  font-weight: 400;
  font-size: var(--sz-display);
  color: var(--c-oro-palido);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: calc(var(--ls-titulo) * 1.4);
  padding: var(--sp-4) 0 var(--sp-3);
  border-bottom: var(--b-fino) solid var(--c-humo-medio);
  margin-bottom: var(--sp-4);
  /* Sombra de texto — profundidad */
  text-shadow:
    0 0 60px rgba(212, 160, 68, 0.25),
    0 2px 4px rgba(0,0,0,0.8);
}

/* H2 — Módulos principales */
/* Cinzel moderado: mismo origen que h1, escala reducida */
h2 {
  font-family: var(--f-titulo);
  font-weight: 400;
  font-size: var(--sz-xl);
  color: var(--c-oro);
  text-transform: uppercase;
  letter-spacing: var(--ls-titulo);
  margin-top: var(--sp-5);
  margin-bottom: var(--sp-3);
  padding-bottom: var(--sp-1);
  border-bottom: var(--b-fino) solid var(--c-humo-medio);
  position: relative;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}

h2::before {
  content: '';
  display: block;
  width: var(--b-acento);
  height: 100%;
  background: linear-gradient(to bottom, var(--c-oxido), transparent);
  position: absolute;
  left: calc(-1 * clamp(var(--sp-2), 5vw, var(--sp-4)));
  top: 0;
  opacity: 0.8;
}

/* H3 — Secciones dentro de módulos */
/* Cormorant SC: misma familia que el cuerpo, versalitas — elegante, no hierático */
h3 {
  font-family: var(--f-subtitulo);
  font-weight: 400;
  font-size: var(--sz-lg);
  color: var(--c-texto);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-top: var(--sp-4);
  margin-bottom: var(--sp-2);
  padding-left: var(--sp-2);
  border-left: var(--b-grueso) solid var(--c-oro-suave);
}

/* H4 — Barricas / capítulos */
/* Cormorant SC más pequeño — subordinado al h3 con carácter propio */
h4 {
  font-family: var(--f-subtitulo);
  font-size: var(--sz-md);
  color: var(--c-oro-suave);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-top: var(--sp-4);
  margin-bottom: var(--sp-1);
  font-weight: 300;
}

/* H5 — Subtítulos anzuelo de fracciones nobles */
/* IM Fell English italic: orgánico, literario, no arquitectónico */
h5 {
  font-family: var(--f-literario);
  font-size: calc(var(--sz-body) * 1.15);
  color: var(--c-texto-suave);
  font-weight: 400;
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
  margin-top: var(--sp-3);
  margin-bottom: var(--sp-1);
  text-shadow: none;
}

/* H6 — Etiquetas y campos */
h6 {
  font-family: var(--f-mono);
  font-size: var(--sz-xs);
  color: var(--c-texto-tenue);
  text-transform: uppercase;
  letter-spacing: var(--ls-etiqueta);
  font-weight: 400;
  margin-bottom: var(--sp-1);
}


/* --- 5. CABECERA DEL DOCUMENTO ------------------------------------------- */

.cabecera-documento {
  text-align: center;
  padding: var(--sp-5) 0 var(--sp-4);
  border-bottom: var(--b-fino) solid var(--c-humo-medio);
  margin-bottom: var(--sp-5);
  /* Halo sutil en la cabecera */
  background:
    radial-gradient(ellipse at center top, var(--c-brillo-oro) 0%, transparent 70%);
}

.cabecera-documento .sello {
  font-family: var(--f-mono);
  font-size: var(--sz-xs);
  color: var(--c-texto-tenue);
  letter-spacing: var(--ls-etiqueta);
  text-transform: uppercase;
  margin-bottom: var(--sp-2);
  /* Sin justificado — etiqueta */
  text-align: center;
}

.cabecera-documento .titulo-obra {
  font-family: var(--f-titulo);
  font-size: var(--sz-xxl);
  color: var(--c-texto);
  text-transform: uppercase;
  letter-spacing: var(--ls-titulo);
  line-height: 1.05;
  margin-bottom: var(--sp-2);
  font-weight: 400;
  text-shadow:
    0 0 80px rgba(212, 160, 68, 0.2),
    0 2px 6px rgba(0,0,0,0.9);
  text-align: center;
}

.cabecera-documento .autor {
  font-family: var(--f-literario);
  font-size: var(--sz-md);
  color: var(--c-texto-suave);
  font-style: italic;
  font-weight: 400;
  margin-bottom: var(--sp-3);
  text-align: center;
}

.cabecera-documento .meta {
  font-family: var(--f-mono);
  font-size: var(--sz-xs);
  color: var(--c-texto-tenue);
  letter-spacing: var(--ls-etiqueta);
  text-align: center;
}


/* --- 6. ÍNDICE DE CONTENIDOS (TOC) --------------------------------------- */

#toc {
  background: var(--c-fondo-bloque);
  border: var(--b-fino) solid var(--c-humo-medio);
  border-top: var(--b-medio) solid var(--c-oro-suave);
  padding: var(--sp-2);
  margin: 0 0 var(--sp-5);
  /* Sombra interna sutil */
  box-shadow:
    inset 0 1px 0 var(--c-brillo-oro),
    0 4px 20px var(--c-sombra-suave);
}

.toc-titulo {
  font-family: var(--f-mono);
  font-size: var(--sz-xs);
  color: var(--c-texto-tenue);
  letter-spacing: var(--ls-etiqueta);
  text-transform: uppercase;
  padding-bottom: var(--sp-2);
  margin-bottom: var(--sp-2);
  border-bottom: var(--b-fino) solid var(--c-humo);
  text-align: left;
}

#toc ul {
  list-style: none;
	margin-block: var(--sp-3);
}

#toc li {
	margin-block: var(--sp-1);
	line-height: var(--sp-2);
}

#toc ul ul {
  padding-left: var(--sp-2);
  margin-top: calc(var(--sp-1) * 0.5);
}

#toc a {
  font-family: var(--f-subtitulo);
  font-size: var(--sz-sm);
  color: var(--c-texto-suave);
  border: none;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: color var(--t-rapida);
}

#toc a:hover {
  color: var(--c-oro-palido);
}

#toc ul ul a {
  font-family: var(--f-literario);
  font-size: var(--sz-sm);
  text-transform: none;
  letter-spacing: 0;
  font-style: italic;
  color: var(--c-texto-tenue);
}

#toc ul ul a:hover {
  color: var(--c-oro-suave);
}


/* --- 7. MÓDULOS PRINCIPALES ---------------------------------------------- */

.modulo {
  margin: var(--sp-5) 0;
  padding-top: var(--sp-3);
}

.modulo-cabecera {
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-2);
  border-bottom: var(--b-medio) solid var(--c-humo-medio);
}

.modulo-numero {
  font-family: var(--f-mono);
  font-size: var(--sz-xl);
  color: var(--c-texto-tenue);
  font-weight: 300;
}

.bitacora {
  font-family: var(--f-mono);
  font-size: var(--sz-xs);
  color: var(--c-texto-tenue);
  font-style: italic;
  line-height: var(--lh-mono);
  margin: var(--sp-2) 0 var(--sp-3);
  padding-left: var(--sp-2);
  border-left: var(--b-fino) solid var(--c-humo-medio);
  letter-spacing: var(--ls-mono);
  /* Bitácora: no justificada — líneas cortas, fragmentadas */
  text-align: left;
  hyphens: none;
}

.bitacora p {
  margin-bottom: calc(var(--sp-1) * 0.4);
  color: var(--c-texto-tenue);
  text-align: left;
  hyphens: none;
}


/* --- 8. FICHA DE RECEPCIÓN ----------------------------------------------- */

.ficha-recepcion {
  font-family: var(--f-mono);
  font-size: var(--sz-xs);
  background: var(--c-fondo-bloque);
  border: var(--b-fino) solid var(--c-humo-medio);
  border-left: var(--b-acento) solid var(--c-humo-claro);
  padding: var(--sp-2);
  margin: var(--sp-3) 0;
  line-height: var(--lh-mono);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.02),
    0 4px 24px var(--c-sombra-suave);
}

.ficha-campo {
  display: grid;
  padding: calc(var(--sp-1)) 0;
  border-bottom: var(--b-fino) solid var(--c-humo);
}

.ficha-campo:last-child {
  border-bottom: none;
}

.ficha-campo-nombre {
  color: var(--c-texto-tenue);
  font-weight: 300;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  font-size: var(--sz-xs);
  /* Etiquetas: sin justificado */
  text-align: left;
  hyphens: none;
}

.ficha-campo-valor {
  color: var(--c-texto);
  font-weight: 400;
  font-family: var(--f-cuerpo);
  font-size: var(--sz-sm);
  line-height: 1.6;
  padding-top: calc(var(--sp-1) * 0.4);
  /* Valores de ficha: justificados si son prosa */
  text-align: justify;
  hyphens: auto;
}

.ficha-campo-valor.destacado {
  color: var(--c-oro);
}

.ficha-seccion-titulo {
  font-family: var(--f-mono);
  font-size: var(--sz-xs);
  color: var(--c-texto-tenue);
  letter-spacing: var(--ls-etiqueta);
  text-transform: uppercase;
  padding: var(--sp-2) 0 var(--sp-1);
  margin-top: var(--sp-2);
  border-top: var(--b-fino) solid var(--c-humo-medio);
  text-align: left;
}

.ficha-seccion-titulo:first-child {
  border-top: none;
  margin-top: 0;
  padding-top: 0;
}


/* --- 9. DESTILADO MAESTRO ------------------------------------------------ */

.destilado-maestro {
  margin: var(--sp-3) 0;
  padding: var(--sp-3) clamp(var(--sp-2), 4vw, var(--sp-4));
  border-left: var(--b-acento) solid var(--c-oro);
  background: var(--c-fondo-elevado);
  /* Halo dorado sutil en el borde izquierdo */
  box-shadow:
    -1px 0 0 var(--c-oro-suave),
    inset 4px 0 20px var(--c-brillo-oro),
    0 4px 32px var(--c-sombra);
}

.destilado-maestro p {
  /* IM Fell English para el destilado — máxima riqueza tipográfica */
  font-family: var(--f-literario);
  font-size: var(--sz-sm);
  line-height: 2;
  color: var(--c-texto);
  font-weight: 400;
  text-align: justify;
  hyphens: auto;
}

/* Capital inicial — primera letra del destilado */
.destilado-maestro p:first-child::first-letter {
  font-family: var(--f-titulo);
  font-size: clamp(calc(var(--sz-body) * 2.8), 10vw, calc(var(--sz-body) * 3.6));
  float: left;
  line-height: 0.72;
  padding-right: 0.1em;
  padding-top: 0.08em;
  color: var(--c-oro);
  font-weight: 400;
  text-shadow: 0 0 30px rgba(212, 160, 68, 0.4);
}


/* --- 10. BARRICAS (capítulos) -------------------------------------------- */

.barrica {
  margin: var(--sp-4) 0;
  padding-top: var(--sp-3);
  border-top: var(--b-fino) dashed var(--c-humo-medio);
}

.barrica:first-of-type {
  border-top: none;
}

.barrica-numero {
  font-family: var(--f-mono);
  font-size: var(--sz-lg);
  color: var(--c-texto-tenue);
  letter-spacing: var(--ls-etiqueta);
  text-transform: uppercase;
  margin-bottom: calc(var(--sp-1) * 0.5);
  text-align: left;
}

.barrica-subtitulo {
  font-family: var(--f-literario);
  font-size: var(--sz-sm);
  color: var(--c-texto-suave);
  font-style: italic;
  font-weight: 400;
  margin-bottom: var(--sp-2);
  text-align: left;
}

.extracto {
  margin: var(--sp-2) 0;
  padding: var(--sp-2) var(--sp-2);
  background: var(--c-fondo-bloque);
  border-left: var(--b-grueso) solid var(--c-humo-claro);
  font-weight: 300;
  box-shadow:
    inset 2px 0 12px rgba(0,0,0,0.3),
    inset 0 1px 0 rgba(255,255,255,0.02);
}

.extracto p {
  font-size: calc(var(--sz-body) * 0.97);
  color: var(--c-texto);
  /* Extractos: justificados — son prosa continua */
  text-align: justify;
  hyphens: auto;
}


/* --- 11. FRACCIONES NOBLES ----------------------------------------------- */

.fraccion-noble {
  margin: var(--sp-3) 0;
  padding: var(--sp-2) 0;
  border-top: var(--b-fino) solid var(--c-humo);
}

.fraccion-anzuelo {
  font-family: var(--f-titulo);
  font-size: var(--sz-xs);
  color: var(--c-texto-tenue);
  text-transform: uppercase;
  letter-spacing: var(--ls-titulo);
  margin-bottom: var(--sp-2);
  display: block;
  /* Anzuelo: centrado, espaciado, como titular de prensa antigua */
  text-align: left;
}

.fraccion-noble p {
  /* IM Fell English italic: el registro más literario del sistema */
  font-family: var(--f-literario);
  font-size: calc(var(--sz-body) * 1.06);
  line-height: 1.9;
  color: var(--c-texto);
  font-style: italic;
  font-weight: 400;
  /* Fracciones nobles: justificadas — son el corazón del análisis */
  text-align: justify;
  hyphens: auto;
}

.fraccion-noble p + p {
  margin-top: var(--sp-1);
}


/* --- 12. NOTA DE CATA ---------------------------------------------------- */

.nota-de-cata {
  margin: var(--sp-4) 0;
  background: var(--c-fondo-bloque);
  border: var(--b-fino) solid var(--c-humo-medio);
  border-top: var(--b-medio) solid var(--c-oro-suave);
  padding: var(--sp-2);
  box-shadow:
    inset 0 1px 0 var(--c-brillo-oro-medio),
    0 8px 32px var(--c-sombra);
}

.nota-de-cata .cata-titulo {
  font-family: var(--f-mono);
  font-size: var(--sz-xs);
  color: var(--c-texto-tenue);
  letter-spacing: var(--ls-etiqueta);
  text-transform: uppercase;
  margin-bottom: var(--sp-2);
  padding-bottom: var(--sp-1);
  border-bottom: var(--b-fino) solid var(--c-humo);
  text-align: left;
}

.nota-de-cata .campo-cata {
  display: grid;
  margin-bottom: var(--sp-3);
  font-size: var(--sz-body);
}

.nota-de-cata .campo-cata-nombre {
  font-family: var(--f-mono);
  color: var(--c-texto-tenue);
  font-size: var(--sz-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-mono);
  padding-top: 0.15em;
  text-align: left;
}

.nota-de-cata .campo-cata-valor {
  font-family: var(--f-literario);
  color: var(--c-texto);
  font-style: italic;
  font-weight: 400;
  font-size: calc(var(--sz-body) * 1.05);
  /* Cata: sin justificado — son frases cortas */
  text-align: left;
  hyphens: none;
}


/* --- 13. PROMPTS DE IMAGEN ----------------------------------------------- */

.prompt-imagen {
  margin: var(--sp-3) 0;
  background: var(--c-fondo-sunken);
  border: var(--b-fino) solid var(--c-humo-medio);
  border-top: var(--b-medio) solid var(--c-oxido);
  box-shadow:
    inset 0 2px 0 rgba(146, 61, 42, 0.15),
    0 4px 20px var(--c-sombra);
}

.prompt-imagen-cabecera {
  font-family: var(--f-mono);
  font-size: var(--sz-xs);
  color: var(--c-mono-tenue);
  letter-spacing: var(--ls-etiqueta);
  text-transform: uppercase;
  padding: var(--sp-1) var(--sp-2);
  background: var(--c-fondo-bloque);
  border-bottom: var(--b-fino) solid var(--c-humo);
  text-align: left;
}

.prompt-imagen pre,
.prompt-imagen .prompt-cuerpo {
  font-family: var(--f-mono);
  font-size: var(--sz-xs);
  /* Marfil cálido en lugar de verde fósforo */
  color: var(--c-mono);
  padding: var(--sp-2) var(--sp-2);
  line-height: var(--lh-mono);
  background: transparent;
  border: none;
  margin: 0;
  letter-spacing: var(--ls-mono);
  /* Prompts: sin justificado — son instrucciones, no prosa */
  text-align: left;
  hyphens: none;
  white-space: pre-wrap;
}


/* --- 14. INSPECCIÓN / NAVE ----------------------------------------------- */

.clasificacion-nave {
  margin: var(--sp-3) 0;
  padding: var(--sp-3) var(--sp-2);
  border: var(--b-medio) solid var(--c-humo-medio);
  background: var(--c-fondo-elevado);
  text-align: center;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.03),
    0 8px 32px var(--c-sombra);
}

.nave-arquetipo {
  font-family: var(--f-titulo);
  font-size: var(--sz-xl);
  color: var(--c-oro);
  letter-spacing: var(--ls-titulo);
  text-transform: uppercase;
  margin-bottom: var(--sp-1);
  text-shadow: 0 0 40px rgba(212, 160, 68, 0.3);
}

.nave-registro {
  font-family: var(--f-literario);
  font-size: var(--sz-sm);
  color: var(--c-texto-suave);
  font-style: italic;
  line-height: 1.7;
  text-align: center;
}

.estrato {
  margin: var(--sp-3) 0;
  padding: var(--sp-2) var(--sp-2);
  border-left: var(--b-grueso) solid var(--c-humo-medio);
  transition: border-color var(--t-normal);
}

.estrato:hover {
  border-left-color: var(--c-oro-suave);
}

.estrato-numero {
  font-family: var(--f-mono);
  font-size: var(--sz-xs);
  color: var(--c-texto-tenue);
  letter-spacing: var(--ls-etiqueta);
  text-transform: uppercase;
  margin-bottom: calc(var(--sp-1) * 0.5);
  text-align: left;
}

.veredicto {
  margin: var(--sp-4) 0;
  padding: var(--sp-3) var(--sp-2);
  border: var(--b-medio) solid var(--c-oro);
  background: var(--c-fondo-bloque);
  text-align: center;
  box-shadow:
    inset 0 1px 0 var(--c-brillo-oro-medio),
    0 8px 40px var(--c-sombra),
    0 0 0 1px var(--c-humo);
}

.veredicto-categoria {
  font-family: var(--f-titulo);
  font-size: var(--sz-lg);
  color: var(--c-oro);
  text-transform: uppercase;
  letter-spacing: var(--ls-titulo);
  margin-bottom: var(--sp-1);
  text-shadow: 0 0 30px rgba(212, 160, 68, 0.35);
}

.veredicto-justificacion {
  font-family: var(--f-literario);
  font-size: calc(var(--sz-body) * 1.0);
  color: var(--c-texto-suave);
  font-style: italic;
  font-weight: 400;
  line-height: 1.8;
  max-width: 56ch;
  margin: 0 auto;
  /* Veredicto: sin justificado — texto centrado no debe justificarse */
  text-align: center;
  hyphens: none;
}

/* Colores de veredicto por estado */
.veredicto.zarpe-autorizado    { border-color: #6a9e6a; }
.veredicto.zarpe-autorizado .veredicto-categoria { color: #8ab88a; text-shadow: 0 0 30px rgba(106,158,106,0.4); }
.veredicto.zarpe-advertencias  { border-color: var(--c-oro); }
.veredicto.zarpe-parcial       { border-color: var(--c-oro-suave); }
.veredicto.embargo             { border-color: var(--c-oxido); }
.veredicto.embargo .veredicto-categoria { color: var(--c-oxido); }
.veredicto.hundimiento         { border-color: var(--c-oxido); background: #0a0200; }
.veredicto.hundimiento .veredicto-categoria { color: #b04030; text-shadow: 0 0 30px rgba(176,64,48,0.5); }

.nota-naval {
  margin: var(--sp-3) 0;
  padding: var(--sp-3) var(--sp-2);
  border-left: var(--b-fino) solid var(--c-oro-suave);
  font-family: var(--f-literario);
  font-style: italic;
  font-size: calc(var(--sz-body) * 1.08);
  color: var(--c-texto-suave);
  line-height: 1.95;
  /* Nota naval: justificada — es prosa literaria */
  text-align: justify;
  hyphens: auto;
  box-shadow: inset 4px 0 16px rgba(168, 120, 58, 0.06);
}

.nota-naval p {
  font-family: var(--f-literario);
  font-style: italic;
  text-align: justify;
  hyphens: auto;
}


/* --- 15. LABORATORIO ----------------------------------------------------- */

.laboratorio-seccion {
  margin: var(--sp-3) 0;
}

.lente {
  margin: var(--sp-3) 0;
  padding: var(--sp-2) var(--sp-2);
  border-left: var(--b-grueso) solid var(--c-humo-medio);
  transition: border-color var(--t-normal), background var(--t-normal);
}

.lente:hover {
  border-left-color: var(--c-oro-suave);
  background: rgba(212, 160, 68, 0.02);
}

.lente-numero {
  font-family: var(--f-mono);
  font-size: var(--sz-xs);
  color: var(--c-texto-tenue);
  letter-spacing: var(--ls-etiqueta);
  text-transform: uppercase;
  margin-bottom: calc(var(--sp-1) * 0.5);
  text-align: left;
}

.compuesto-base {
  margin: var(--sp-4) 0;
  padding: var(--sp-4) var(--sp-3);
  background: var(--c-fondo-bloque);
  border: var(--b-medio) solid var(--c-humo-medio);
  border-left: var(--b-acento) solid var(--c-oxido);
  text-align: center;
  box-shadow:
    inset 6px 0 30px rgba(146, 61, 42, 0.12),
    inset 0 1px 0 rgba(255,255,255,0.02),
    0 8px 40px var(--c-sombra);
}

.compuesto-base-etiqueta {
  font-family: var(--f-mono);
  font-size: var(--sz-xs);
  color: var(--c-texto-tenue);
  letter-spacing: var(--ls-etiqueta);
  text-transform: uppercase;
  margin-bottom: var(--sp-2);
  text-align: center;
}

.compuesto-base-texto {
  font-family: var(--f-literario);
  font-size: var(--sz-lg);
  color: var(--c-texto);
  font-style: italic;
  font-weight: 400;
  line-height: 1.5;
  /* Centrado: no justificado */
  text-align: center;
  hyphens: none;
  text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}


/* --- 16. ETIQUETADO / TOPOLOGÍA ------------------------------------------ */

.fallas-cierre {
  margin: var(--sp-2) 0;
}

.falla {
  padding: var(--sp-1) 0;
  border-bottom: var(--b-fino) solid var(--c-humo);
  display: grid;
  align-items: baseline;
  gap: calc(var(--sp-1) * 0.4);
}

.falla:last-child {
  border-bottom: none;
}

.falla-pregunta {
  font-family: var(--f-cuerpo);
  font-size: var(--sz-body);
  color: var(--c-texto);
  font-style: italic;
  font-weight: 300;
  /* Preguntas: justificadas — son prosa */
  text-align: justify;
  hyphens: auto;
}

.falla-tipo {
  font-family: var(--f-mono);
  font-size: var(--sz-xs);
  color: var(--c-texto-tenue);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  /* Tipo: sin justificado */
  text-align: left;
  hyphens: none;
}

.falla.abierta .falla-tipo    { color: #7aab7a; }
.falla.abierta .falla-pregunta { color: var(--c-texto); }
.falla.raiz .falla-tipo        { color: var(--c-oro); }
.falla.cerrada .falla-pregunta { color: var(--c-texto-suave); }
.falla.abandonada .falla-pregunta {
  color: var(--c-texto-tenue);
  text-decoration: line-through;
  text-decoration-color: var(--c-humo-claro);
}

.apertura-total {
  font-family: var(--f-mono);
  font-size: var(--sz-xs);
  color: var(--c-texto-tenue);
  letter-spacing: var(--ls-etiqueta);
  text-transform: uppercase;
  text-align: right;
  margin-top: var(--sp-2);
  padding-top: var(--sp-1);
  border-top: var(--b-fino) solid var(--c-humo-medio);
}

.apertura-total span {
  color: #7aab7a;
  font-size: var(--sz-md);
  display: block;
  margin-top: calc(var(--sp-1) * 0.5);
}

.nucleo-curvatura,
.red-conceptual,
.estrategia-grandeza {
  margin: var(--sp-2) 0;
  display: grid;
  font-size: var(--sz-sm);
  gap: calc(var(--sp-1) * 0.3);
}

.campo-nombre {
  font-family: var(--f-mono);
  font-size: var(--sz-xs);
  color: var(--c-texto-tenue);
  text-transform: uppercase;
  letter-spacing: var(--ls-mono);
  padding-top: var(--sp-1);
  text-align: left;
}

.campo-valor {
  color: var(--c-texto);
  font-weight: 300;
  font-family: var(--f-cuerpo);
  line-height: 1.7;
  padding-bottom: var(--sp-1);
  /* Valores de topología: justificados — son prosa analítica */
  text-align: justify;
  hyphens: auto;
}

.estrategia-grandeza-texto {
  margin: var(--sp-3) 0;
  padding: var(--sp-2) var(--sp-2);
  border-left: var(--b-acento) solid var(--c-oro-suave);
  font-family: var(--f-literario);
  font-size: calc(var(--sz-body) * 1.12);
  font-style: italic;
  color: var(--c-texto);
  font-weight: 400;
  line-height: 1.85;
  /* Estrategia: justificada — es prosa */
  text-align: justify;
  hyphens: auto;
  box-shadow: inset 6px 0 20px rgba(168, 120, 58, 0.08);
}


/* --- 17. CARTOGRAFÍA ----------------------------------------------------- */

.cartografia {
  margin: var(--sp-3) 0;
}

.cartografia-seccion {
  margin: var(--sp-2) 0;
  padding: var(--sp-2) var(--sp-2);
  border-left: var(--b-fino) solid var(--c-humo-medio);
  transition: border-color var(--t-normal);
}

.cartografia-seccion:hover {
  border-left-color: var(--c-humo-claro);
}

.cartografia-seccion-titulo {
  font-family: var(--f-mono);
  font-size: var(--sz-xs);
  color: var(--c-texto-tenue);
  letter-spacing: var(--ls-etiqueta);
  text-transform: uppercase;
  margin-bottom: var(--sp-1);
  text-align: left;
}


/* --- 18. PIE DE DOCUMENTO ------------------------------------------------ */

footer,
.pie-documento {
  margin-top: var(--sp-5);
  padding-top: var(--sp-3);
  padding-bottom: var(--sp-4);
  border-top: var(--b-fino) solid var(--c-humo-medio);
  text-align: center;
  /* Halo en el pie */
  background:
    radial-gradient(ellipse at center bottom, var(--c-brillo-oro) 0%, transparent 70%);
}

.pie-sello {
  font-family: var(--f-mono);
  font-size: var(--sz-xs);
  color: var(--c-texto-tenue);
  letter-spacing: var(--ls-etiqueta);
  text-transform: uppercase;
  line-height: 2.2;
  text-align: center;
}


/* --- 19. UTILIDADES ------------------------------------------------------ */

.etiqueta {
  font-family: var(--f-mono);
  font-size: var(--sz-xs);
  color: var(--c-texto-tenue);
  letter-spacing: var(--ls-etiqueta);
  text-transform: uppercase;
  display: block;
  margin-bottom: var(--sp-1);
  text-align: left;
}

.separador-modulo {
  border: none;
  border-top: var(--b-medio) solid var(--c-humo);
  margin: var(--sp-5) 0;
}

.transicion-nota {
  font-family: var(--f-mono);
  font-size: var(--sz-xs);
  color: var(--c-texto-tenue);
  font-style: italic;
  margin-bottom: var(--sp-2);
  text-align: left;
}


/* --- 20. IMÁGENES RESPONSIVAS -------------------------------------------- */

.img-container {
  max-width: 100%;
  margin: var(--sp-4) auto;
  text-align: center;
}

.img-container img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  box-shadow: 0 8px 40px var(--c-sombra);
}

/* Imagen reducida en fichas del index — viñeta editorial */
.img-ficha {
  margin: var(--sp-2) auto var(--sp-2);
  /* max-width: 320px; */
}

.img-ficha img {
  border: var(--b-fino) solid var(--c-humo-medio);
  box-shadow:
    0 4px 20px var(--c-sombra-suave),
    0 0 0 1px var(--c-humo);
}



/* --- 21. PARTITURA ------------------------------------------------------- */
/* Bloque añadido para la variante luz — mismo comportamiento que dark */

.partitura {
  margin: var(--sp-3) 0;
}

.partitura-movimiento {
  font-family: var(--f-literario);
  font-style: italic;
  font-size: calc(var(--sz-body) * 1.05);
  color: var(--c-texto-suave);
  line-height: 1.95;
  text-align: justify;
  hyphens: auto;
  margin-bottom: var(--sp-3);
  padding: var(--sp-2) var(--sp-2);
  border-left: var(--b-fino) solid var(--c-oro-suave);
  box-shadow: inset 4px 0 16px rgba(176, 120, 24, 0.04);
}

.partitura-pieza {
  margin: var(--sp-2) 0;
  display: grid;
  font-size: var(--sz-sm);
  gap: calc(var(--sp-1) * 0.3);
}

.campo-partitura-nombre {
  font-family: var(--f-mono);
  font-size: var(--sz-xs);
  color: var(--c-texto-tenue);
  text-transform: uppercase;
  letter-spacing: var(--ls-mono);
  padding-top: var(--sp-1);
  text-align: left;
}

.campo-partitura-valor {
  color: var(--c-texto);
  font-weight: 300;
  font-family: var(--f-cuerpo);
  line-height: 1.7;
  padding-bottom: var(--sp-1);
  text-align: left;
  hyphens: none;
}


/* --- 22. SENTENCIA FINAL ------------------------------------------------- */

.sentencia-final {
  margin: var(--sp-4) 0;
  padding: var(--sp-3) var(--sp-3);
  border-top: var(--b-grueso) solid var(--c-oxido);
  border-bottom: var(--b-fino) solid var(--c-humo-medio);
  font-family: var(--f-literario);
  font-size: calc(var(--sz-body) * 1.15);
  font-style: italic;
  font-weight: 400;
  color: var(--c-texto);
  line-height: 1.9;
  text-align: justify;
  hyphens: auto;
  background:
    linear-gradient(to bottom, rgba(146, 61, 42, 0.04) 0%, transparent 40%);
}



/* --- 23. CLASES NUEVAS — INCORPORADAS EN LOTE 006 (Anna Karenina) -------- */
/*
   Estas clases no existían en la hoja original. Se agregan aquí
   respetando el sistema de variables de :root. No modifican nada existente.
*/

/* .modulo-subtitulo — línea descriptiva debajo del h2 de módulo */
.modulo-subtitulo {
  font-family: var(--f-mono);
  font-size: var(--sz-xs);
  color: var(--c-texto-tenue);
  letter-spacing: var(--ls-etiqueta);
  text-transform: uppercase;
  margin-top: calc(var(--sp-1) * -0.5);
  text-align: left;
}

/* .seccion-parte — encabezado de agrupación entre barricas (Parte I, II…) */
.seccion-parte {
  margin: var(--sp-5) 0 var(--sp-2);
  padding: var(--sp-2) 0;
  border-top: var(--b-medio) solid var(--c-humo-medio);
}

.seccion-parte h3 {
  font-family: var(--f-mono);
  font-size: var(--sz-xs);
  letter-spacing: var(--ls-etiqueta);
  text-transform: uppercase;
  color: var(--c-oro-suave);
  font-style: normal;
  border-left: none;
  padding-left: 0;
  margin-top: 0;
  margin-bottom: calc(var(--sp-1) * 0.5);
}

.seccion-parte p {
  font-family: var(--f-literario);
  font-size: var(--sz-sm);
  font-style: italic;
  color: var(--c-texto-tenue);
  margin: 0;
  text-align: left;
  hyphens: none;
}

/* .campo-linea — fila inline campo/valor en núcleo de curvatura y red conceptual */
.campo-linea {
  margin: calc(var(--sp-1) * 0.6) 0;
  font-size: var(--sz-sm);
  line-height: 1.7;
  text-align: left;
}

/* .yaml-bloque — contenedor del YAML del lote al final del análisis */
.yaml-bloque {
  margin: var(--sp-4) 0;
  background: var(--c-fondo-sunken);
  border: var(--b-fino) solid var(--c-humo-medio);
  border-top: var(--b-medio) solid var(--c-humo-claro);
  padding: var(--sp-2);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.01),
    0 4px 20px var(--c-sombra);
}

.yaml-titulo {
  font-family: var(--f-mono);
  font-size: var(--sz-xs);
  color: var(--c-texto-tenue);
  letter-spacing: var(--ls-etiqueta);
  text-transform: uppercase;
  margin-bottom: var(--sp-2);
  padding-bottom: var(--sp-1);
  border-bottom: var(--b-fino) solid var(--c-humo);
  text-align: left;
}

/* .yaml-bloque pre — hereda el pre global; solo sobreescribe color para distinguirlo */
.yaml-bloque pre {
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  color: var(--c-mono-tenue);
}

/* .contenido — clase de ancho máximo para elementos que no son .modulo */
/* Útil para alinear secciones de texto con el sistema sin crear un módulo nuevo */
.contenido {
  max-width: var(--ancho-texto);
}

/* .ornamento — separador ornamental inline (◆ ✦ etc.) */
.ornamento {
  text-align: center;
  color: var(--c-texto-fantasma);
  font-size: var(--sz-sm);
  margin: var(--sp-3) 0;
  letter-spacing: 0.5em;
  user-select: none;
}

/* hr.divisor — divisor más discreto que el hr global, sin rombo central */
hr.divisor {
  border: none;
  border-top: var(--b-fino) solid var(--c-humo);
  margin: var(--sp-3) 0;
}

hr.divisor::after {
  display: none;
}


/* ==========================================================================
   FIN DE DESTILERÍA OSMANCITO — HOJA DE ESTILO MAESTRA 260417a.css
   Para modificar la apariencia global: editar solo las variables en :root
========================================================================== */