/* ============================================================
   TEAM LASER — Base
   Reset ligero + tipografía global + fuentes propias.
   Sustituye al reset gigante heredado de la plantilla original
   (que traía estilos muertos para tablas/formularios que el
   sitio nunca usa).
   ============================================================ */

/* ---- Fuente propia de la marca (única, se declara una sola vez) ---- */
@font-face {
  font-family: 'Space Age';
  src: url('../webfonts/space-age.ttf') format('truetype');
  font-display: swap;
}

/* ---- Reset básico ---- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.7;
  -webkit-text-size-adjust: none;
  overflow-x: hidden;
}
img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, h5, h6 { margin: 0 0 0.6em; color: var(--ink); }
p { margin: 0 0 1.4em; color: var(--ink-muted); }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--space-md) 0; }

/* ---- Jerarquía tipográfica ---- */
.eyebrow,
.titulo-especial {
  font-family: var(--font-display);
  letter-spacing: 0.08em;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-size: 0.78rem;
  text-transform: uppercase;
  color: var(--ember);
  margin-bottom: 0.9em;
}
.eyebrow::before {
  content: '';
  width: 26px;
  height: 2px;
  background: var(--ember);
  box-shadow: 0 0 8px rgba(var(--ember-rgb), .8);
}

h2.titulo-especial {
  font-size: clamp(1.6rem, 1.25rem + 1.6vw, 2.5rem);
  line-height: 1.25;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

h3.titulo-especial {
  font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.35rem);
  color: var(--ink-muted);
  text-transform: none;
  letter-spacing: 0.01em;
  font-family: var(--font-body);
  font-weight: 600;
}

h4 {
  font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
}

/* ---- Selección de texto con el color de marca ---- */
::selection { background: var(--ember); color: #fff; }

/* ---- Foco visible (accesibilidad de teclado) ---- */
a:focus-visible,
button:focus-visible,
.tl-btn:focus-visible,
input:focus-visible {
  outline: 2px solid var(--spark);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ---- Enlace "saltar al contenido" (accesibilidad) ---- */
.skip-link {
  position: absolute;
  left: 1rem;
  top: -60px;
  background: var(--ember);
  color: #fff;
  padding: 0.75em 1.25em;
  border-radius: var(--radius-sm);
  z-index: 2000;
  transition: top .2s var(--ease);
  font-weight: 600;
}
.skip-link:focus { top: 1rem; }

/* ---- Contenedores y ritmo vertical de secciones ---- */
.section {
  padding: var(--space-xl) 0;
}
.section-alt { background: var(--bg-alt); }
.section-head {
  max-width: 46rem;
  margin: 0 0 var(--space-md);
}
.section-head.text-center { margin-inline: auto; text-align: center; }

/* Nota: para texto solo-lector-de-pantalla se usa la utilidad
   .visually-hidden que ya incluye Bootstrap (cargado en el head),
   así que no se duplica esa regla aquí. */

/* ============================================================
   Animaciones de entrada — CSS puro, sin dependencia de JS.
   (La plantilla original ocultaba TODA la página con opacity:0
   dentro de <noscript>, así que cualquier visitante sin
   JavaScript se quedaba con la pantalla en blanco. Aquí el
   contenido es visible siempre; la animación es un extra.)
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    animation: revealUp .7s var(--ease) both;
  }
  .reveal-delay-1 { animation-delay: .1s; }
  .reveal-delay-2 { animation-delay: .2s; }
}

@keyframes revealUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

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