/* ==========================================================================
   02-TYPOGRAPHY.CSS — NEOMETIS Design System
   Reglas base de tipografía. Depende de 01-tokens.css.
   ========================================================================== */

/* -------------------------------------------------------------------------
   BASE — Reset tipográfico
   ------------------------------------------------------------------------- */

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

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
  overflow-y: scroll;
  scrollbar-width: thin;
  scrollbar-color: var(--color-border-strong) var(--color-bg);
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip; /* clip ≠ hidden: no crea scroll container, no rompe position:sticky */
}

img,
svg,
video {
  display: block;
  max-width: 100%;
}

button,
input,
textarea,
select {
  font: inherit;
}

body.nav-open {
  overflow: hidden;
}

::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: var(--color-bg);
}

::-webkit-scrollbar-thumb {
  background: var(--color-border-strong);
  border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-brand);
}

/* -------------------------------------------------------------------------
   HEADINGS — Cormorant Garamond para display/editorial
   ------------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--color-text);
  margin: 0;
}

h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); }
h4 { font-size: var(--text-h4); }
h5 { font-size: var(--text-h5); }
h6 { font-size: var(--text-h6); }

/* Itálica editorial — Cormorant tiene itálica riquísima */
h1 em,
h2 em,
h3 em,
h4 em,
.nm-hero__title em,
.nm-section-title em {
  font-style: italic;
  font-weight: var(--fw-light);
  color: var(--color-brand);
}

/* -------------------------------------------------------------------------
   PÁRRAFOS Y CUERPO DE TEXTO
   ------------------------------------------------------------------------- */

p {
  margin: 0;
  font-size: var(--text-body);
  line-height: var(--lh-relaxed);
}

.nm-section-body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--fw-light);
  line-height: var(--lh-relaxed);
  color: var(--color-text-muted);
  max-width: 68ch;
}

.nm-section-title {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: var(--fw-light);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tighter);
}

/* -------------------------------------------------------------------------
   EYEBROW / LABELS — Exo 2 uppercase, Teal accent
   ------------------------------------------------------------------------- */

.nm-section-label {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.nm-section-label__line {
  display: block;
  width: var(--section-label-line-w);
  height: 1px;
  background: var(--color-brand);
  flex-shrink: 0;
}

.nm-section-label__text {
  font-family: var(--font-body);
  font-size: var(--text-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--color-brand);
}

/* -------------------------------------------------------------------------
   HERO TYPOGRAPHY
   ------------------------------------------------------------------------- */

.nm-hero__title {
  font-family: var(--font-display);
  font-size: var(--text-hero);
  font-weight: var(--fw-light);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-tightest);
  color: var(--color-text);
  margin: 0;
}

.nm-hero__title-accent {
  color: var(--color-brand);
  font-style: italic;
}

.nm-hero__eyebrow-text {
  font-family: var(--font-body);
  font-size: var(--text-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--color-brand);
}

.nm-hero__subtitle {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--fw-light);
  line-height: var(--lh-relaxed);
  color: var(--color-text-secondary);
  max-width: 56ch;
}

/* -------------------------------------------------------------------------
   BLOCKQUOTE
   ------------------------------------------------------------------------- */

.nm-quote {
  margin: 0;
  padding: var(--space-6) var(--space-6) var(--space-6) var(--space-8);
  border-left: 2px solid var(--color-brand);
  position: relative;
}

.nm-quote__text {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--fw-light);
  font-style: italic;
  line-height: var(--lh-snug);
  color: var(--color-text);
  margin-bottom: var(--space-4);
}

.nm-quote__author {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide);
  color: var(--color-text-muted);
}

/* -------------------------------------------------------------------------
   LINKS
   ------------------------------------------------------------------------- */

a {
  color: inherit;
  text-decoration: none;
}

a:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

.nm-text-link {
  color: var(--color-brand);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: var(--transition-color);
}

.nm-text-link:hover {
  color: var(--color-brand-light);
}

/* -------------------------------------------------------------------------
   CÓDIGO / MONO
   ------------------------------------------------------------------------- */

code,
kbd,
samp,
pre {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

code {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  padding: 0.1em 0.4em;
  border-radius: var(--radius-sm);
  color: var(--color-brand);
}

pre {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  overflow-x: auto;
  line-height: var(--lh-relaxed);
}

pre code {
  background: none;
  border: none;
  padding: 0;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

/* -------------------------------------------------------------------------
   LISTAS
   ------------------------------------------------------------------------- */

ul, ol {
  padding-left: var(--space-6);
  margin: 0;
}

li + li {
  margin-top: var(--space-2);
}

/* Reset para listas de componentes */
ul[role="list"],
ol[role="list"] {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* -------------------------------------------------------------------------
   UTILIDADES TIPOGRÁFICAS INLINE
   ------------------------------------------------------------------------- */

.nm-text--display   { font-size: var(--text-display);  font-family: var(--font-display); }
.nm-text--hero      { font-size: var(--text-hero);     font-family: var(--font-display); }
.nm-text--h1        { font-size: var(--text-h1); }
.nm-text--h2        { font-size: var(--text-h2); }
.nm-text--h3        { font-size: var(--text-h3); }
.nm-text--body      { font-size: var(--text-body); }
.nm-text--sm        { font-size: var(--text-sm); }
.nm-text--xs        { font-size: var(--text-xs); }
.nm-text--mono      { font-family: var(--font-mono); font-size: var(--text-sm); }
.nm-text--serif     { font-family: var(--font-display); }
.nm-text--sans      { font-family: var(--font-body); }
.nm-text--muted     { color: var(--color-text-muted); }
.nm-text--brand     { color: var(--color-brand); }
.nm-text--accent    { color: var(--color-accent); }
.nm-text--upper     { text-transform: uppercase; letter-spacing: var(--ls-widest); }
.nm-text--italic    { font-style: italic; }
.nm-text--light     { font-weight: var(--fw-light); }
.nm-text--semibold  { font-weight: var(--fw-semibold); }
.nm-text--bold      { font-weight: var(--fw-bold); }

/* -------------------------------------------------------------------------
   WORDPRESS — Clases del editor Gutenberg / Classic Editor
   ------------------------------------------------------------------------- */

.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
  margin-top: var(--space-8);
  margin-bottom: var(--space-4);
}

.entry-content p {
  margin-bottom: var(--space-5);
  font-size: var(--text-body);
  line-height: var(--lh-relaxed);
  color: var(--color-text-secondary);
}

.entry-content a {
  color: var(--color-brand);
  text-underline-offset: 3px;
  text-decoration: underline;
}

.entry-content strong {
  font-weight: var(--fw-semibold);
  color: var(--color-text);
}

.entry-content em {
  font-style: italic;
}

.entry-content ul,
.entry-content ol {
  margin-bottom: var(--space-5);
}

.entry-content blockquote {
  composes: nm-quote;
  margin: var(--space-8) 0;
}

.entry-content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
}

.entry-content hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--space-8) 0;
}

/* Gutenberg alignment */
.alignleft  { float: left;  margin-right: var(--space-6); margin-bottom: var(--space-4); }
.alignright { float: right; margin-left: var(--space-6);  margin-bottom: var(--space-4); }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.alignwide  { margin-left: calc(-1 * var(--shell-padding)); margin-right: calc(-1 * var(--shell-padding)); }
.alignfull  { margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%); max-width: 100vw; }