/* Estilos propios que completan la exportación de Stitch. */
:root {
  color-scheme: light;
  scroll-padding-top: 5.5rem;
  --site-navy: #0b1626;
  --site-orange: #ff7900;
  --site-green: #25d366;
}

html { scroll-behavior: smooth; }
body { font-family: Inter, sans-serif; }
h1, h2, h3, h4, nav, button, .font-bold, .font-extrabold { font-family: "Plus Jakarta Sans", sans-serif; }

:focus-visible {
  outline: 3px solid #ffad57;
  outline-offset: 3px;
}

section[id], #contacto { scroll-margin-top: 5rem; }

.whatsapp-float {
  position: fixed;
  z-index: 60;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  min-height: 3.25rem;
  padding: .75rem 1.1rem;
  border: 2px solid rgba(255,255,255,.85);
  border-radius: 999px;
  background: var(--site-green);
  color: #fff;
  font: 700 .875rem/1 "Plus Jakarta Sans", sans-serif;
  text-decoration: none;
  box-shadow: 0 8px 30px rgba(0,0,0,.22);
  transition: transform .2s ease, box-shadow .2s ease;
}
.whatsapp-float:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(0,0,0,.26); }
.whatsapp-float span:first-child { font-size: 1.2rem; }

.faq-item { cursor: pointer; }
.faq-item:focus-visible { outline-color: var(--site-orange); }

@media (max-width: 767px) {
  :root { scroll-padding-top: 4.5rem; }
  .whatsapp-float { right: .75rem; bottom: max(.75rem, env(safe-area-inset-bottom)); }
  /* The mobile Stitch export uses this slightly lighter navy/orange pair. */
  [class~="bg-brand-navy"], [class~="bg-[#0B1626]"] { background-color: #111c2c !important; }
  [class~="text-brand-orange"] { color: #f87600 !important; }
  [class~="bg-brand-orange"] { background-color: #f87600 !important; }
}

@media (prefers-reduced-motion: no-preference) {
  body.motion-ready [data-purpose="hero-section"] { animation: enter .45s ease both; }
  body.motion-ready .reveal-on-scroll { transition: opacity .5s ease, transform .5s ease; }
  body.motion-ready .reveal-on-scroll:not(.is-visible) { opacity: 0; transform: translateY(12px); }
}
@keyframes enter { from { opacity: .7; } to { opacity: 1; } }

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