/* ============================================================
   ATAO Group — Market Access as a Service
   Design system (plain CSS, used together with Tailwind CDN)
   All colors use HSL channels so Tailwind can consume them.
   ============================================================ */

:root {
  --background: 0 0% 100%;
  --surface: 197 62% 97%;
  --foreground: 210 100% 12%;

  --card: 0 0% 100%;
  --card-foreground: 210 100% 12%;

  --popover: 0 0% 100%;
  --popover-foreground: 210 100% 12%;

  --primary: 202 100% 30%;
  --primary-foreground: 0 0% 100%;
  --primary-light: 202 70% 93%;

  --secondary: 210 100% 20%;
  --secondary-foreground: 0 0% 100%;
  --secondary-light: 210 60% 92%;

  --accent: 180 100% 35%;
  --accent-foreground: 0 0% 100%;
  --accent-light: 180 60% 93%;

  --muted: 197 62% 96%;
  --muted-foreground: 205 20% 40%;

  --destructive: 0 72% 45%;
  --destructive-foreground: 0 0% 100%;

  --border: 202 35% 90%;
  --input: 202 35% 88%;
  --ring: 202 100% 30%;

  --radius: 0.875rem;

  --gradient-primary: linear-gradient(135deg, hsl(202 100% 30%) 0%, hsl(210 100% 20%) 100%);
  --gradient-hero: linear-gradient(120deg, hsl(210 100% 14% / 0.94) 0%, hsl(202 100% 24% / 0.88) 45%, hsl(180 100% 25% / 0.72) 100%);
  --gradient-accent: linear-gradient(135deg, hsl(180 100% 35%) 0%, hsl(202 100% 30%) 100%);
  --gradient-surface: linear-gradient(180deg, hsl(0 0% 100%) 0%, hsl(197 62% 97%) 100%);
  --gradient-mesh: radial-gradient(60% 60% at 15% 20%, hsl(180 100% 35% / 0.18) 0%, transparent 60%),
    radial-gradient(50% 50% at 85% 10%, hsl(202 100% 30% / 0.18) 0%, transparent 60%);
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Poppins", system-ui, sans-serif;
  letter-spacing: -0.02em;
}

a { color: inherit; }

:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--ring));
  border-radius: 4px;
}

::selection { background: hsl(var(--accent) / 0.25); }

/* Layout container */
.container {
  width: 100%;
  max-width: 80rem;
  margin-inline: auto;
  padding-inline: 1.5rem;
}

/* Screen-reader only */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}
.sr-only:focus:not(.sr-only),
.sr-only.focus\:not-sr-only:focus {
  position: static; width: auto; height: auto; margin: 0;
  overflow: visible; clip: auto; white-space: normal;
}

/* Component classes (mirror the shadcn/tailwind @apply set) */
.glass-panel {
  border-radius: 1rem;
  border: 1px solid hsl(0 0% 100% / 0.15);
  background: hsl(0 0% 100% / 0.10);
  backdrop-filter: blur(12px);
}

.surface-card {
  border-radius: 1rem;
  border: 1px solid hsl(var(--border));
  background: hsl(var(--card));
  box-shadow: 0 8px 24px -12px hsl(210 100% 20% / 0.22);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.surface-card:hover {
  transform: translateY(-0.25rem);
  box-shadow: 0 18px 44px -18px hsl(210 100% 20% / 0.28);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 9999px;
  border: 1px solid hsl(var(--accent) / 0.30);
  background: hsl(var(--accent-light));
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: hsl(var(--primary));
}

.section-pad { padding-block: 5rem; }
@media (min-width: 768px) { .section-pad { padding-block: 7rem; } }

.text-balance { text-wrap: balance; }

/* Gradient helpers */
.bg-gradient-primary { background-image: var(--gradient-primary); }
.bg-gradient-hero { background-image: var(--gradient-hero); }
.bg-gradient-accent { background-image: var(--gradient-accent); }
.bg-gradient-surface { background-image: var(--gradient-surface); }
.bg-gradient-mesh { background-image: var(--gradient-mesh); }

/* Shadow helpers */
.shadow-glow {
  box-shadow: 0 0 0 1px hsl(var(--accent) / 0.18), 0 24px 60px -28px hsl(var(--accent) / 0.55);
}

/* Reveal-on-scroll */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .animate-marquee, .animate-float, .animate-pulse-ring { animation: none !important; }
}

/* Form controls (no Tailwind forms plugin on shared hosting) */
.atao-input,
.atao-textarea {
  width: 100%;
  border: 1px solid hsl(var(--input));
  background: hsl(0 0% 100%);
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
  font-size: 0.95rem;
  color: hsl(var(--foreground));
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.atao-textarea { resize: vertical; }
.atao-input:focus,
.atao-textarea:focus {
  outline: none;
  border-color: hsl(var(--primary));
  box-shadow: 0 0 0 3px hsl(var(--primary) / 0.18);
}

.atao-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: hsl(var(--secondary));
  margin-bottom: 0.5rem;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3rem;
  padding: 0.75rem 1.5rem;
  border-radius: 9999px;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  border: 1px solid transparent;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-hero { background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); }
.btn-hero:hover { background: hsl(var(--accent) / 0.9); }
.btn-primary { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.btn-primary:hover { background: hsl(var(--primary) / 0.9); }
.btn-outline { border-color: hsl(var(--border)); background: hsl(var(--card)); color: hsl(var(--foreground)); }
.btn-outline:hover { border-color: hsl(var(--primary)); color: hsl(var(--primary)); }
.btn-white { background: #fff; color: hsl(var(--primary)); }
.btn-white:hover { background: hsl(0 0% 100% / 0.9); }
.btn-ghost-light { border-color: hsl(0 0% 100% / 0.4); background: hsl(0 0% 100% / 0.1); color: #fff; }
.btn-ghost-light:hover { background: #fff; color: hsl(var(--secondary)); }
.btn-link { color: hsl(var(--primary)); padding: 0; min-height: 0; background: none; }

/* Mobile nav */
#menu-movil[hidden] { display: none; }

/* Accordion (FAQ) */
.accordion-item { border-bottom: 1px solid hsl(var(--border)); }
.accordion-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 0;
  background: none;
  border: 0;
  text-align: left;
  font-family: "Poppins", sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: hsl(var(--secondary));
  cursor: pointer;
}
.accordion-trigger .chev { transition: transform 0.3s ease; }
.accordion-trigger[aria-expanded="true"] .chev { transform: rotate(180deg); }
.accordion-panel {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.35s ease;
  color: hsl(var(--muted-foreground));
  font-size: 0.95rem;
  line-height: 1.7;
}
.accordion-panel > div { padding-bottom: 1.25rem; }

/* Animations */
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.animate-marquee { animation: marquee 28s linear infinite; }

@keyframes fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
.animate-fade-in { animation: fade-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) both; }

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}
.animate-float { animation: float 6s ease-in-out infinite; }

@keyframes pulse-ring {
  0% { transform: scale(0.8); opacity: 0.8; }
  80%, 100% { transform: scale(2.2); opacity: 0; }
}
.animate-pulse-ring { animation: pulse-ring 1.8s cubic-bezier(0.22, 1, 0.36, 1) infinite; }

/* Tabs / segmented control shared */
.segmented button[aria-selected="true"],
.chip[aria-pressed="true"] {
  background: hsl(var(--background));
  color: hsl(var(--primary));
  box-shadow: 0 8px 24px -12px hsl(210 100% 20% / 0.22);
}
.chip[aria-pressed="true"] {
  background: hsl(var(--primary));
  color: #fff;
  border-color: hsl(var(--primary));
}

/* Image placeholder (when real assets are not present) */
.img-ph {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gradient-surface), var(--gradient-mesh);
  color: hsl(var(--primary) / 0.6);
  font-weight: 600;
  text-align: center;
  padding: 2rem;
}