/* ============================================================
   PARKING DESPEGAR — Base: reset, tipografía, utilidades y apariciones
   ============================================================ */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* Chrome en Android pinta la barra de navegación de abajo con el fondo de la raíz.
     Arranca con el gris del hero; js/main.js lo pasa al navy al llegar al pie. */
  background: var(--fondo);
  -webkit-tap-highlight-color: transparent;
}

body {
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

/* Barra inferior del sistema */
body::after {
  content: '';
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: env(safe-area-inset-bottom);
  background: var(--barra-inferior);
  z-index: 9999;
  pointer-events: none;
}

/* «hidden» siempre gana, aunque el elemento tenga display: grid o flex */
[hidden] { display: none !important; }

img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; }
ul, ol { list-style: none; }
strong { font-weight: 500; }

[id] { scroll-margin-top: calc(var(--nav-alto) + 16px); }

:focus-visible { outline: 1px solid currentColor; outline-offset: 3px; }

.solo-lectores {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- Íconos: Lucide (trazo) y Simple Icons (relleno) ---------- */
.ico {
  width: 20px; height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}
.ico-marca {
  width: 20px; height: 20px;
  fill: currentColor;
  flex-shrink: 0;
}

/* ---------- Apariciones al scroll (B) ----------
   El estado oculto existe solo si el JS puso .js en <html>. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--dur-scroll) var(--ease),
              transform var(--dur-scroll) var(--ease);
  transition-delay: calc(var(--i, 0) * var(--stagger));
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* Con GSAP, las apariciones las mueve el scroll (js/main.js): sin transición CSS */
.reveal-scrub [data-reveal] { transition: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
  .cue .ico, .btn--premium::before, .btn--premium::after { animation: none; }
}