/* Sprint — tokens duales (oscuro por defecto + claro opcional).
   El esquema activo lo marca `html[data-ws-color-scheme]`. */

:root,
html[data-ws-color-scheme="dark"],
[data-ws-color-scheme="dark"] {
  color-scheme: dark;
  --background: 222 34% 8%;
  --foreground: 210 20% 98%;
  --card: 222 28% 11%;
  --primary: 226 72% 62%;
  --primary-foreground: 0 0% 100%;
  --muted: 222 18% 16%;
  --muted-foreground: 220 12% 68%;
  --border: 222 16% 22%;
  --hero-bg: 222 28% 10%;
  --section-final-bg: 222 30% 7%;
  --error: 0 70% 62%;
}

html[data-ws-color-scheme="light"],
[data-ws-color-scheme="light"] {
  color-scheme: light;
  --background: 0 0% 100%;
  --foreground: 222 34% 11%;
  --card: 220 33% 98%;
  --primary: 226 58% 34%;
  --primary-foreground: 0 0% 100%;
  --muted: 220 20% 94%;
  --muted-foreground: 220 12% 38%;
  --border: 220 16% 87%;
  --hero-bg: 220 33% 97%;
  --section-final-bg: 220 28% 95%;
  --error: 0 65% 42%;
}

:root {
  --radius: 0.5rem;
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 1.5rem;
  --spacing-lg: 2rem;
  --spacing-xl: 3rem;
  --spacing-2xl: 4rem;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

html {
  background-color: hsl(var(--background));
}

body {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
}

.sp-root,
.ac-root.sp-root {
  --ws-bg: hsl(var(--background));
  --ws-text: hsl(var(--foreground));
  --ws-text-muted: hsl(var(--muted-foreground));
  --ws-surface: hsl(var(--card));
  --ws-border: hsl(var(--border));
  --ws-accent: hsl(var(--primary));
  --ws-hero-bg: hsl(var(--hero-bg));
  --ws-section-final-bg: hsl(var(--section-final-bg));
  --ws-error: hsl(var(--error));
}

.sp-root .ws-portal-h1,
.sp-root .ws-portal-h2 {
  font-weight: 600;
  letter-spacing: -0.025em;
}

.sp-root .ws-portal-hero-visual {
  display: none;
}

.sp-root #preguntas,
.sp-root #contacto {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}

.sp-root .ws-portal-container,
.sp-root .ws-portal-form-wrap,
.sp-root .ws-portal-narrow {
  max-width: 1200px;
}

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

.sp-root .ws-portal-faq {
  width: 100%;
  max-width: none;
}

.sp-root .ws-portal-form .ws-portal-h2,
.sp-root #contacto .ws-portal-h2,
.sp-root #preguntas .ws-portal-h2 {
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
  margin-bottom: 0.5rem;
}

.sp-root #contacto .ws-portal-eyebrow,
.sp-root #contacto .ws-portal-h2,
.sp-root #contacto .ws-portal-lead,
.sp-root #contacto .ws-portal-body {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.sp-root #contacto .ws-portal-lead,
.sp-root #contacto .ws-portal-body {
  max-width: 42rem;
}

.sp-root #contacto .ws-portal-form {
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}

.sp-root #contacto .ws-portal-form .ws-portal-btn {
  align-self: center;
}

/* Vida visual: grain, hero fotográfico, banda de equipo. Fotos Unsplash en media/. */
.sp-root::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 80;
  pointer-events: none;
  opacity: 0.04;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

html[data-ws-color-scheme="light"] .sp-root::after {
  opacity: 0.035;
  mix-blend-mode: multiply;
}

.sp-root .ws-portal-hero {
  position: relative;
  isolation: isolate;
}

.sp-root .ws-portal-hero::before,
.sp-root #equipo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.sp-root .ws-portal-hero::before {
  background:
    linear-gradient(
      180deg,
      hsl(var(--background) / 0.78) 0%,
      hsl(var(--background) / 0.88) 58%,
      hsl(var(--background)) 100%
    ),
    url("media/hero-landscape.jpg") center 40% / cover no-repeat;
}

.sp-root #equipo {
  position: relative;
  isolation: isolate;
}

.sp-root #equipo::before {
  background:
    linear-gradient(
      180deg,
      hsl(var(--background) / 0.8) 0%,
      hsl(var(--background) / 0.9) 62%,
      hsl(var(--background)) 100%
    ),
    url("media/team-landscape.jpg") center 48% / cover no-repeat;
}

html[data-ws-color-scheme="light"] .sp-root .ws-portal-hero::before,
html[data-ws-color-scheme="light"] .sp-root #equipo::before,
.sp-root[data-ws-color-scheme="light"] .ws-portal-hero::before,
.sp-root[data-ws-color-scheme="light"] #equipo::before {
  filter: none;
}

html[data-ws-color-scheme="light"] .sp-root .ws-portal-hero::before,
.sp-root[data-ws-color-scheme="light"] .ws-portal-hero::before {
  background:
    linear-gradient(
      180deg,
      hsl(var(--background) / 0.32) 0%,
      hsl(var(--background) / 0.42) 48%,
      hsl(var(--background) / 0.78) 100%
    ),
    url("media/hero-landscape.jpg") center 40% / cover no-repeat;
}

html[data-ws-color-scheme="light"] .sp-root #equipo::before,
.sp-root[data-ws-color-scheme="light"] #equipo::before {
  background:
    linear-gradient(
      180deg,
      hsl(var(--background) / 0.34) 0%,
      hsl(var(--background) / 0.46) 52%,
      hsl(var(--background) / 0.8) 100%
    ),
    url("media/team-landscape.jpg") center 48% / cover no-repeat;
}

.sp-root .ws-portal-hero > *,
.sp-root #equipo > * {
  position: relative;
  z-index: 1;
}

.sp-root #equipo .ws-portal-card {
  overflow: hidden;
}

@media (prefers-reduced-motion: no-preference) {
  .sp-root .ws-portal-hero .ws-portal-container > * {
    animation: sp-fade-up 0.75s ease-out both;
  }

  .sp-root .ws-portal-hero .ws-portal-container > *:nth-child(2) {
    animation-delay: 0.08s;
  }

  .sp-root .ws-portal-hero .ws-portal-container > *:nth-child(3) {
    animation-delay: 0.16s;
  }

  .sp-root .ws-portal-hero .ws-portal-container > *:nth-child(4) {
    animation-delay: 0.24s;
  }

  .sp-root .ws-portal-hero .ws-portal-container > *:nth-child(5) {
    animation-delay: 0.3s;
  }

  .sp-root .ws-portal-hero .ws-portal-container > *:nth-child(6) {
    animation-delay: 0.36s;
  }
}

@keyframes sp-fade-up {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}