/* ==========================================================================
   Base CSS — Reset, Variables (:root) y Tipografía (studio51 / Montserrat)
   ========================================================================== */

/* Registro de tipografía custom studio51 */
@font-face {
  font-family: 'studio51';
  src: url('../fonts/studio51-Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'studio51';
  src: url('../fonts/studio51-LightItalic.woff') format('woff');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'studio51';
  src: url('../fonts/studio51-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'studio51';
  src: url('../fonts/studio51-Italic.woff') format('woff');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'studio51';
  src: url('../fonts/studio51-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'studio51';
  src: url('../fonts/studio51-MediumItalic.woff') format('woff');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'studio51';
  src: url('../fonts/studio51-SemiBold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'studio51';
  src: url('../fonts/studio51-SemiBoldItalic.woff') format('woff');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'studio51';
  src: url('../fonts/studio51-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'studio51';
  src: url('../fonts/studio51-BoldItalic.woff') format('woff');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* Variables CSS (:root) — Sistema de diseño minimalista (Silencio Visual) */
:root {
  --color-primario: #111111;
  --color-secundario: #666666;
  --color-fondo: #ffffff;
  --color-acento: #000000;
  --color-superpuesto: rgba(255, 255, 255, 0.9);
  --color-superpuesto-noche: rgba(15, 15, 18, 0.85);

  --color-oscuro: #1D252D;
  --color-crema: #D1CCBD;
  --color-menta: #A5E5D9;

  --espaciado-8: 8px;
  --espaciado-16: 16px;
  --espaciado-24: 24px;
  --espaciado-32: 32px;
  --espaciado-48: 48px;
  --espaciado-64: 64px;

  --transicion-suave: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  --transicion-lenta: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Reset y configuraciones globales */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: 'studio51', 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 400;
  color: var(--color-primario);
  background-color: var(--color-fondo);
  line-height: 1.6;
  overflow-x: hidden;

  /* Separación silábica automática — reduce ríos y mejora la legibilidad */
  hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  overflow-wrap: break-word;
}

/* Enlaces básicos */
a {
  color: inherit;
  text-decoration: none;
  transition: var(--transicion-suave);
}

a:hover, a:focus {
  opacity: 0.6;
}

/* Clases tipográficas de uso frecuente */
.montserrat-titulo {
  font-family: 'studio51', 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 2rem;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.montserrat-subtitulo {
  font-family: 'studio51', 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  line-height: 1.4;
}

.montserrat-cuerpo {
  font-family: 'studio51', 'Montserrat', sans-serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.8;
  max-width: 68ch;
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  hyphenate-limit-chars: 6 3 3;
  hyphenate-limit-lines: 2;
  word-break: normal;
  overflow-wrap: break-word;
  text-wrap: pretty;
  orphans: 2;
  widows: 2;
}

.montserrat-nota {
  font-family: 'studio51', 'Montserrat', sans-serif;
  font-weight: 300;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--color-secundario);
}

/* Clases de identidad para glifos custom (Alt+1 y Alt+2) */
.logo-glyph {
  font-family: 'studio51', sans-serif;
  font-weight: 400;
  font-size: 1.75rem;
  display: inline-block;
  line-height: 1;
}

.monogram-glyph {
  font-family: 'studio51', sans-serif;
  font-weight: 400;
  font-size: 1.5rem;
  display: inline-block;
  line-height: 1;
}