/* ═══════════════════════════════════════════
   BATERIAS MAY — reset.css
   Reset, box-sizing y variables globales
   ═══════════════════════════════════════════ */

:root {
  /* Paleta — negro cálido / crema / amarillo */
  --bg: #0c0a05;
  --bg-2: #14110a;
  --cream: #f5efe0;
  --cream-dim: rgba(245, 239, 224, 0.62);
  --cream-faint: rgba(245, 239, 224, 0.55);
  --gold: #ffd600;
  --gold-soft: #ffe566;
  --gold-dim: rgba(255, 214, 0, 0.55);
  --surface: rgba(22, 18, 10, 0.72);
  --surface-2: rgba(30, 25, 14, 0.82);
  --border: rgba(255, 214, 0, 0.14);
  --border-soft: rgba(245, 239, 224, 0.08);
  --wa: #25d366;

  /* Tipografía */
  --f-disp: 'Bebas Neue', 'Arial Narrow', sans-serif;
  --f-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --f-mono: ui-monospace, 'Cascadia Mono', 'Consolas', monospace;

  /* Escala fluida */
  --fs-hero: clamp(3rem, 9vw, 7.5rem);
  --fs-h2: clamp(2.2rem, 5.5vw, 4.5rem);
  --fs-h3: clamp(1.4rem, 2.4vw, 2rem);
  --fs-body: clamp(0.95rem, 1.1vw, 1.06rem);
  --fs-kicker: clamp(0.66rem, 0.8vw, 0.74rem);

  /* Espaciado y movimiento */
  --sect: clamp(5rem, 12vw, 9rem);
  --pad: clamp(1.25rem, 4vw, 2.5rem);
  --ease: cubic-bezier(0.2, 0.9, 0.3, 1);

  --shadow-gold: 0 8px 40px rgba(255, 214, 0, 0.12);
  --radius: 3px;
}

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

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

body {
  background: var(--bg);
  color: var(--cream);
  font-family: var(--f-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

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

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

button, input {
  font: inherit;
  color: inherit;
  border: none;
  background: none;
}

button {
  cursor: pointer;
}

/* En móvil, inputs a 16px para que iOS no haga auto-zoom al enfocar */
@media (max-width: 600px) {
  input,
  textarea,
  select {
    font-size: 16px;
  }
}

ul, ol {
  list-style: none;
}

::selection {
  background: var(--gold);
  color: var(--bg);
}

/* Foco visible por teclado — anillo dorado en todo elemento interactivo */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}

/* No quitar el foco a quienes navegan con teclado */
:focus:not(:focus-visible) {
  outline: none;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
}