@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  html { scroll-behavior: smooth; }
  body {
    background-color: #FFFFFF;
    color: #0A1D3D;
    font-family: var(--font-open-sans), system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
  }
  ::selection { background: #C4942E; color: #FFFFFF; }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
  }
}

@layer base {
  /* The ring needs to contrast against the background it appears on, not
     against the brand. The global gold gave 2.76:1 on white, below the 3:1
     WCAG 2.2 requires for a focus indicator. Deep blue on white gives 16.7:1;
     and on the two navy sections, where the navy would disappear, gold takes
     over, which gives 6.07:1 there. */
  a:focus-visible,
  button:focus-visible {
    outline: 3px solid #0a1d3d;
    outline-offset: 3px;
    border-radius: 2px;
  }

  .bg-azul-profundo a:focus-visible,
  .bg-azul-profundo button:focus-visible {
    outline-color: #c4942e;
  }
}

/* The page's only motion gesture. The hidden state depends on `.js`, which an
   inline script in <head> sets before first paint: without JavaScript the
   class never lands, nothing is hidden, and the page reads in full. Anyone
   who asked for less motion is also excluded here — the media query leaves
   them out entirely rather than neutralising it afterwards. */
@media (prefers-reduced-motion: no-preference) {
  .js [data-revelar] {
    opacity: 0;
    transform: translateY(12px);
  }
  .js [data-revelar][data-visible] {
    animation: revelar 400ms cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: calc(var(--i, 0) * 60ms);
  }
}

@keyframes revelar {
  to {
    opacity: 1;
    transform: none;
  }
}