/* ─── Fonts ─── */
@font-face {
  font-family: 'Roboto';
  src: url('../../content%20media/fonts/Roboto/Roboto-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: 'Roboto';
  src: url('../../content%20media/fonts/Roboto/Roboto-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'Roboto';
  src: url('../../content%20media/fonts/Roboto/Roboto-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: 'Roboto';
  src: url('../../content%20media/fonts/Roboto/Roboto-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}

/* ─── Variables ─── */
:root {
  --color-bg: #F9F7F2;
  --color-black: #1a1a1a;
  --color-dark-accent: #2b2b2b;
  --color-blue: #0006CF;
  --font-main: 'Roboto', sans-serif;
  --header-height: 64px;
  --site-gutter: 4vw;
  --transition: 0.3s ease;
}

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

html { font-size: 16px; scroll-behavior: smooth; }

body {
  font-family: var(--font-main);
  font-weight: 400;
  background: var(--color-bg);
  color: var(--color-black);
  -webkit-font-smoothing: antialiased;
}

a { text-decoration: none; color: inherit; }
ul { list-style: none; }

.page-main {
  min-height: calc(100vh - var(--header-height));
}

/* ─── Scroll reveal ─── */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
/* Los span inline necesitan inline-block para que funcione el transform */
span.reveal { display: inline-block; }