/*
 * global.css — Reset, body, tipografía base, utilidades
 * ════════════════════════════════════════════════════════════════
 */

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

html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  background:   var(--white);
  color:        var(--text-dark);
  font-family:  var(--font-body);
  font-weight:  300;
  line-height:  1.65;
  overflow-x:   hidden;
}

img {
  display:   block;
  max-width: 100%;
  height:    auto;
}

a {
  text-decoration: none;
  color:           inherit;
  transition:      color var(--transition-fast);
}

ul,
ol {
  list-style: none;
}

button {
  cursor:     pointer;
  border:     none;
  background: none;
  font-family: inherit;
}

input,
textarea,
select {
  font-family: inherit;
  font-size:   inherit;
}

/* ── Contenedores ──────────────────────────────────────────────────────────── */
.container {
  max-width: var(--container-max);
  margin:    0 auto;
  padding:   0 var(--container-px);
}

.container--wide {
  max-width: var(--container-wide);
  margin:    0 auto;
  padding:   0 var(--container-px);
}

/* ── Tipografía base ───────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family:  var(--font-head);
  font-weight:  700;
  line-height:  1.1;
}

/* Títulos display con Bebas Neue */
.display {
  font-family: var(--font-display);
  font-weight: 400; /* Bebas Neue solo tiene un peso */
}

p {
  line-height: 1.7;
}

strong {
  font-weight: 600;
}

/* ── Ritmo de secciones ────────────────────────────────────────────────────── */
section {
  padding: var(--section-py) 0;
}

/* ── Tag (etiqueta de sección) ─────────────────────────────────────────────── */
.tag {
  display:     inline-flex;
  align-items: center;
  gap:         8px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size:   11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 16px;
  color:       var(--tag-color, var(--yellow-mid));
}

.tag::before {
  content:    '';
  display:    block;
  width:      24px;
  height:     2px;
  background: currentColor;
  flex-shrink: 0;
}

.on-dark .tag { color: var(--yellow); }
.on-light .tag { color: var(--yellow-mid); }

/* ── Section header ────────────────────────────────────────────────────────── */
.section-header {
  margin-bottom: 56px;
}

.section-header h2 {
  font-family: var(--font-display);
  font-size:   clamp(48px, 7vw, 88px);
  line-height: 0.9;
}

.section-header p {
  max-width:  560px;
  margin-top: 18px;
  font-size:  15px;
}

/* ── Temas de sección ──────────────────────────────────────────────────────── */
.s-dark     { background: var(--dark);     color: var(--white); }
.s-black    { background: var(--black);    color: var(--white); }
.s-charcoal { background: var(--charcoal); color: var(--white); }
.s-white    { background: var(--white);    color: var(--text-dark); }
.s-offwhite { background: var(--offwhite); color: var(--text-dark); }
.s-gray     { background: var(--gray-50);  color: var(--text-dark); }

/* Headings adaptativos por tema */
.s-white h2, .s-offwhite h2, .s-gray h2     { color: var(--text-dark); }
.s-white h2 span, .s-offwhite h2 span, .s-gray h2 span { color: var(--yellow-mid); }
.s-white p, .s-offwhite p, .s-gray p        { color: var(--text-mid); }

/* ── Utilidades de visibilidad ─────────────────────────────────────────────── */
.sr-only {
  position: absolute;
  width:    1px;
  height:   1px;
  padding:  0;
  margin:   -1px;
  overflow: hidden;
  clip:     rect(0, 0, 0, 0);
  white-space: nowrap;
  border:   0;
}

/* ── Animaciones de entrada ────────────────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeLeft {
  from { opacity: 0; transform: translateX(28px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Reveal — controlado por animations.js ─────────────────────────────────── */
.reveal {
  opacity:   0;
  transform: translateY(32px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.visible {
  opacity:   1;
  transform: translateY(0);
}