/* ===============================
   Arkadia — Variables & Fonts
   =============================== */

:root {
  /* 🎨 Colores */

  --fondo-oscuro: #1A1714;
  --fondo-claro:  #E3E2D9;
  --linea-dorada: #C7A85E;
  --texto-principal: #3B362F;
  --boton-rojo: #57161E;
  --texto-blanco: #FFFFFF;
  --texto-dorado: #C7A85E;
  --fondo-footer: #2B2926;

  /* Spacing & layout */

  --container: 1200px;
  --gutter: 24px;
  --radius: 8px;
  --shadow-1: 0 6px 24px rgba(0,0,0,.1);

  /* Tipografías */

  --fuente-titulos: 'EB Garamond', serif;
  --fuente-texto:   'Junicode', serif;
  --fuente-ui:      'Inter', sans-serif;

  /* Tamaños */

  --h2: clamp(28px, 3vw, 35px);
  --h1: clamp(36px, 5vw, 56px);
}

/* Google Fonts: EB Garamond + Inter */

@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:wght@400;500;700&family=Inter:wght@400;500;700&display=swap');

/* Junicode local */

@font-face {
  font-family: 'Junicode';
  src: url('../font/Junicode.woff2') format('woff2'),
       url('../font/Junicode.woff') format('woff');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Junicode';
  src: url('../font/Junicode-Italic.woff2') format('woff2'),
       url('../font/Junicode-Italic.woff') format('woff');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Junicode';
  src: url('../font/Junicode-Bold.woff2') format('woff2'),
       url('../font/Junicode-Bold.woff') format('woff');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Junicode';
  src: url('../font/Junicode-BoldItalic.woff2') format('woff2'),
       url('../font/Junicode-BoldItalic.woff') format('woff');
  font-weight: 700; font-style: italic; font-display: swap;
}

/* Reset mínimo/opinable */

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  color: var(--texto-principal);
  background: var(--fondo-claro);
  font-family: var(--fuente-texto);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(1px,1px,1px,1px); white-space: nowrap; border: 0; padding: 0; margin: -1px;
}