/* ============================================================
   SYMPHONIA · SISTEMA DE TOKENS WEB  v1
   ------------------------------------------------------------
   El canon de imprenta traducido a pantalla.
   Una sola fuente de verdad para color, tipografía, ritmo,
   profundidad y movimiento. Los componentes solo tocan los
   tokens SEMÁNTICOS; nunca un valor crudo.

   Diseño deliberado: CSS plano en :root. Sin paso de compilación,
   sin JS. Compatible con CSP sin 'unsafe-inline' (es una hoja
   enlazada, no estilo en línea).

   AVISO DE OFICIO (leer el brief de Claude Design): la paleta
   crema + serif de exhibición + acento terracota es, hoy, el
   aspecto por defecto más repetido del diseño hecho con IA.
   Es tu identidad y no se toca, pero la diferencia NO puede
   venir del color: viene de la ejecución, las dos voces y la
   firma. El color es el punto de partida, no la idea.
   ============================================================ */

:root {

  /* ---- 1. PRIMITIVOS · el canon, en crudo ------------------ */
  --tinta-noche:    #1a1f2e;
  --oro-viejo:      #a07638;
  --papel-crema:    #f5ecd7;
  --grana:          #7a2020;
  --piedra:         #6d6c5e;
  --linea-canon:    #d4c5a0;
  --verde-forestal: #1a4f2e;

  /* Crema modulado: para el susurro de degradado dentro de un
     mismo tono (atmósfera, no arcoíris). */
  --crema-claro:    #f8f1df;
  --crema-hondo:    #efe3c8;
  --negro-calido:   #1e1a15;  /* superficies oscuras PUNTUALES; cálido, nunca azul */

  /* ---- 2. LOS CUATRO ELEMENTOS · firma temperamental -------
     El lenguaje pictórico de los libros (luz / fuego / noche /
     agua) traído a la web. NO son degradados planos de IA:
     son acentos atmosféricos, pensados para los marcadores de
     sección y la espina del test constitucional. */
  --el-aire:   #c8932f;  /* Sanguíneo · sol, primavera        */
  --el-fuego:  #9a3b22;  /* Colérico · llama                  */
  --el-noche:  #232a44;  /* Melancólico · cueva, estrellas    */
  --el-agua:   #4d6a86;  /* Flemático · agua en calma         */

  /* ---- 3. SEMÁNTICOS · lo que cada color HACE -------------- */
  --fondo:          var(--papel-crema);
  --fondo-elevado:  var(--crema-claro);
  --fondo-hondo:    var(--crema-hondo);
  --texto:          var(--tinta-noche);
  --texto-tenue:    var(--piedra);
  --acento:         var(--oro-viejo);
  --acento-fuerte:  var(--grana);
  --enlace:         var(--verde-forestal);
  --enlace-hover:   var(--grana);
  --linea:          var(--linea-canon);
  --foco:           var(--oro-viejo);   /* anillo de foco visible */

  /* EL CREMA MANDA. La tinta noche es color de TEXTO, nunca fondo de
     sección. Si (excepcionalmente) hace falta una superficie oscura —un
     pie, un bloque suelto—, es CÁLIDA o VERDE, nunca azul. */
  --superficie-oscura:   var(--negro-calido);    /* dark de apoyo, cálido */
  --superficie-verde:    var(--verde-forestal);  /* alternativa de marca */
  --texto-sobre-oscuro:  var(--crema-claro);
  --acento-sobre-oscuro: var(--oro-viejo);

  /* ---- 4. TIPOGRAFÍA -------------------------------------- */
  --f-titulo:  "Marcellus", "Cormorant Garamond", serif;
  --f-cuerpo:  "EB Garamond", Georgia, "Times New Roman", serif;
  --f-tecnica: "Inter", system-ui, -apple-system, sans-serif;

  /* Escala modular (≈1.25, menor mayor) con clamp para respirar
     según el ancho. El cuerpo NO es 10,5pt fijos: en pantalla
     vive entre ~17 y ~20px. */
  --t-cuerpo:  clamp(1.06rem, 1rem + 0.45vw, 1.22rem);
  --t-peque:   clamp(0.86rem, 0.82rem + 0.2vw, 0.95rem);   /* notas, pies */
  --t-h3:      clamp(1.3rem, 1.15rem + 0.8vw, 1.65rem);
  --t-h2:      clamp(1.7rem, 1.4rem + 1.6vw, 2.45rem);
  --t-h1:      clamp(2.3rem, 1.8rem + 3vw, 4rem);
  --t-display: clamp(3rem, 2rem + 6vw, 6rem);              /* gesto de entrada */

  --interlineado:        1.55;   /* ancla del canon de imprenta */
  --interlineado-titulo: 1.12;
  --tracking-tecnica:    0.14em; /* versalitas Inter */
  --medida:              66ch;   /* tu columna de libro */

  /* ---- 5. RITMO · escala de espaciado (base 8) ------------ */
  --e1: 0.5rem;  --e2: 1rem;   --e3: 1.5rem;  --e4: 2rem;
  --e6: 3rem;    --e8: 4rem;   --e12: 6rem;   --e16: 8rem;

  /* ---- 6. PROFUNDIDAD · sombras cálidas, nunca grises ------
     La sombra toma el tono de la tinta, no un negro de plástico.
     Da elevación real y discreta. */
  --sombra-1: 0 1px 2px rgba(26,31,46,0.06),
              0 2px 8px rgba(26,31,46,0.05);
  --sombra-2: 0 4px 12px rgba(26,31,46,0.08),
              0 12px 28px rgba(26,31,46,0.07);
  --radio-s:  4px;
  --radio-m:  10px;

  /* ---- 7. MOVIMIENTO · disciplinado, no saltarín ----------
     El suavizado importa más que el efecto. Curvas naturales,
     duraciones cortas. Lo que diferencia "elegante" de "barato". */
  --mov-rapido:  140ms;
  --mov-medio:   240ms;
  --mov-lento:   520ms;  /* asentarse al entrar */
  --ease:        cubic-bezier(0.22, 0.61, 0.36, 1);  /* salida suave */
  --ease-suave:  cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================
   8. LAS DOS VOCES
   EL CREMA MANDA en todo el sitio. Las dos voces son dos registros
   sobre crema, no "claro contra oscuro".
   - Presencia: puntos de entrada (Inicio, cabeceras). La fuerza viene
     de la TIPOGRAFÍA grande, el AIRE y la firma de los cuatro
     elementos — NO de un fondo oscuro.
   - Calma: superficies de lectura. Crema, medida estrecha, tipografía
     protagonista.
   Una superficie oscura es la EXCEPCIÓN (.voz-presencia--oscura), y
   nunca azul: negro cálido o verde forestal.
   ============================================================ */
.voz-presencia {
  background: var(--fondo);            /* crema, no oscuro */
  color: var(--texto);
}
.voz-presencia h1,
.voz-presencia .display { font-family: var(--f-titulo); font-size: var(--t-display); color: var(--texto); }
.voz-presencia .acento  { color: var(--acento); }

/* Excepción opcional: superficie oscura puntual (cálida o verde, nunca azul) */
.voz-presencia--oscura {
  background: var(--superficie-oscura);   /* o var(--superficie-verde) */
  color: var(--texto-sobre-oscuro);
}
.voz-presencia--oscura h1,
.voz-presencia--oscura .display { color: var(--texto-sobre-oscuro); }
.voz-presencia--oscura .acento  { color: var(--acento-sobre-oscuro); }

.voz-calma {
  background: var(--fondo);
  color: var(--texto);
}
.voz-calma .lectura {
  max-width: var(--medida);
  font-family: var(--f-cuerpo);
  font-size: var(--t-cuerpo);
  line-height: var(--interlineado);
}

/* ============================================================
   9. BASE TIPOGRÁFICA
   ============================================================ */
body {
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--f-cuerpo);
  font-size: var(--t-cuerpo);
  line-height: var(--interlineado);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3 {
  font-family: var(--f-titulo);
  line-height: var(--interlineado-titulo);
  font-weight: 400;          /* Marcellus es de un solo peso: que respire */
  hyphens: none;             /* títulos sin partición (canon) */
  text-wrap: balance;
}
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); }

/* Etiquetas técnicas: Inter en versalitas con tracking */
.eyebrow, .etiqueta {
  font-family: var(--f-tecnica);
  text-transform: uppercase;
  letter-spacing: var(--tracking-tecnica);
  font-size: var(--t-peque);
  color: var(--texto-tenue);
}

/* Cuerpo de lectura: medida de libro, partición automática */
.lectura { max-width: var(--medida); hyphens: auto; }

/* ============================================================
   10. ENLACES Y FOCO  (suelo de calidad, no se negocia)
   ============================================================ */
a {
  color: var(--enlace);
  text-decoration: none;
  background-image: linear-gradient(var(--enlace-hover), var(--enlace-hover));
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size var(--mov-medio) var(--ease), color var(--mov-rapido);
}
a:hover { color: var(--enlace-hover); background-size: 100% 1px; }  /* subrayado que se dibuja */

:focus-visible {
  outline: 2px solid var(--foco);
  outline-offset: 3px;
  border-radius: var(--radio-s);
}

/* ============================================================
   11. ATMÓSFERA · grano de papel
   El gesto que más des-aplana. Deja de parecer pantalla.
   Técnica CSP-segura: textura SVG (feTurbulence) como data-URI
   de fondo. REQUIERE en la CSP:  img-src 'self' data:
   Alternativa: un PNG de grano autoalojado (background-image: url('/img/grano.png')).
   Mantener sutilísimo (opacidad muy baja) o se ensucia.
   ============================================================ */
.grano::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Susurro de degradado dentro del crema (atmósfera, no arcoíris) */
.fondo-atmosfera {
  background: linear-gradient(180deg, var(--crema-claro) 0%, var(--papel-crema) 45%, var(--crema-hondo) 100%);
}

/* ============================================================
   12. ENTRADA EN ESCENA · CSS puro, mejora progresiva
   Los bloques se asientan con un fundido lento hacia arriba.
   Ligado al scroll con animation-timeline (sin una línea de JS).
   Si el navegador no lo soporta, el contenido se ve igual:
   nunca se oculta de forma irreversible.
   ============================================================ */
@supports (animation-timeline: view()) {
  .entra {
    animation: asentar var(--mov-lento) var(--ease) both;
    animation-timeline: view();
    animation-range: entry 0% cover 22%;
  }
}
@keyframes asentar {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* La firma en movimiento, si se elige el trazo: una línea que se
   dibuja UNA vez al cargar. Un solo gesto, no veinte. */
.firma-trazo { stroke-dasharray: 1; stroke-dashoffset: 1; animation: trazar 1.6s var(--ease) 0.3s forwards; }
@keyframes trazar { to { stroke-dashoffset: 0; } }

/* ============================================================
   13. prefers-reduced-motion  (accesibilidad sólida)
   Quien pide no movimiento, no lo recibe. Todo aparece, quieto.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .entra { opacity: 1 !important; transform: none !important; }
}

/* ============================================================
   14. COMPONENTES MÍNIMOS (ejemplo de uso de tokens)
   Solo tocan semánticos. Claude Design parte de aquí y amplía.
   ============================================================ */
.boton {
  display: inline-flex;
  align-items: center;
  gap: var(--e1);
  font-family: var(--f-tecnica);
  font-size: var(--t-peque);
  letter-spacing: 0.04em;
  padding: 0.7em 1.3em;
  border: 1px solid var(--acento);
  border-radius: var(--radio-s);
  background: transparent;
  color: var(--acento);
  cursor: pointer;
  transition: background var(--mov-medio) var(--ease), color var(--mov-medio) var(--ease);
}
.boton:hover { background: var(--acento); color: var(--papel-crema); }  /* se calienta */
.boton--solido { background: var(--acento); color: var(--papel-crema); }
.boton--solido:hover { background: var(--acento-fuerte); border-color: var(--acento-fuerte); }

.ficha {                       /* p. ej. tarjeta de libro */
  background: var(--fondo-elevado);
  border: 1px solid var(--linea);
  border-radius: var(--radio-m);
  box-shadow: var(--sombra-1);
  padding: var(--e4);
  transition: box-shadow var(--mov-medio) var(--ease), transform var(--mov-medio) var(--ease);
}
.ficha:hover { box-shadow: var(--sombra-2); transform: translateY(-2px); }

/* Marcador de sección por elemento (firma temperamental) */
.sec--aire  { border-top: 3px solid var(--el-aire); }
.sec--fuego { border-top: 3px solid var(--el-fuego); }
.sec--noche { border-top: 3px solid var(--el-noche); }
.sec--agua  { border-top: 3px solid var(--el-agua); }