/* =========================================================
   CrecentIA — Design System
   Mobile-first. Sin frameworks. Breakpoints documentados en
   variables de referencia (no usables dentro de @media, ver abajo).
   ========================================================= */

/* Fuentes autohospedadas (variable fonts, subset latin) — sin CDN externo */
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/outfit-variable-latin.woff2") format("woff2");
}

@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url("../fonts/dmsans-variable-latin.woff2") format("woff2");
}

:root {
  /* ---- Color: tema oscuro (estética prototipo Pablo, 2026-07) ---- */
  --color-bg: #04060d;                          /* fondo base: azul-negro profundo */
  --color-bg-muted: rgba(13, 20, 38, 0.78);     /* superficie glass de tarjetas */
  --color-surface: rgba(10, 17, 34, 0.82);      /* superficie de inputs/formularios */
  --color-ink: #f2f5fc;                         /* titulares y texto fuerte */
  --color-text: #c3ccdf;                        /* texto de párrafo */
  --color-text-muted: #8e99b4;                  /* texto secundario */
  --color-border: rgba(96, 130, 214, 0.22);     /* borde azulado translúcido */
  --color-border-strong: rgba(120, 156, 240, 0.42);

  /* ---- Color: acento ---- */
  --color-accent: #3b6cf5;
  --color-accent-hover: #5a86ff;                /* en oscuro el hover aclara */
  --color-accent-soft: #6ea2ff;                 /* eyebrows, iconos, enlaces */
  --color-accent-contrast: #ffffff;
  --color-accent-2: #6c5ce7; /* violeta-índigo: pareja del acento solo para glows */

  /* ---- Color: sobre fondo oscuro (histórico; el sitio entero ya es oscuro) ---- */
  --color-on-dark: #ffffff;
  --color-on-dark-muted: #b7bac2;

  /* ---- Estado ---- */
  --color-success: #0e9f6e;
  --color-error: #d63163;
  --color-star: #f5b400;

  /* ---- Tipografía ---- */
  --font-heading: "Outfit", "Segoe UI", sans-serif;
  --font-body: "DM Sans", "Segoe UI", sans-serif;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --lh-tight: 1.15;
  --lh-normal: 1.5;
  --lh-relaxed: 1.7;

  /* Escala tipográfica fluida (mobile -> desktop sin media queries) */
  --fs-sm: clamp(0.833rem, 0.81rem + 0.15vw, 0.9rem);
  --fs-base: clamp(1rem, 0.97rem + 0.2vw, 1.0625rem);
  --fs-md: clamp(1.2rem, 1.13rem + 0.35vw, 1.375rem);
  --fs-lg: clamp(1.44rem, 1.32rem + 0.6vw, 1.75rem);
  --fs-xl: clamp(1.9rem, 1.6rem + 1.2vw, 2.5rem);
  --fs-2xl: clamp(2.4rem, 1.9rem + 2vw, 3.5rem);

  /* ---- Espaciado (escala de 4px) ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-8: 3rem;
  --space-10: 4rem;
  --space-12: 6rem;

  /* ---- Layout ---- */
  --container-max: 1200px;
  --container-padding: var(--space-4);
  --header-height: 72px;

  /* ---- Bordes / sombra ---- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 18px;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 12px 32px rgba(2, 6, 18, 0.55);
  --glow-accent: 0 8px 30px rgba(59, 108, 245, 0.35);

  /* ---- Transiciones ---- */
  --transition-fast: 150ms ease;
  --transition-base: 220ms ease;
}

/* Breakpoints de referencia (documentación, no usables como var() en @media):
   --bp-sm: 480px
   --bp-md: 768px
   --bp-lg: 1024px
   --bp-xl: 1280px
*/

/* =========================================================
   Reset básico
   ========================================================= */

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

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* El fondo vive en el RAÍZ (no en body): así el canvas de escena
     (position:fixed; z-index:-1) se pinta por encima del fondo pero
     debajo del contenido. Un fondo en body taparía el canvas, porque
     los fondos de bloques en flujo se pintan después de los
     descendientes posicionados con z-index negativo. */
  background:
    radial-gradient(1100px 700px at 78% -8%, rgba(43, 78, 180, 0.26), transparent 60%),
    radial-gradient(900px 600px at -10% 42%, rgba(48, 38, 120, 0.16), transparent 55%),
    var(--color-bg, #04060d);
  color-scheme: dark;
}

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

body {
  min-height: 100svh;
  background: transparent; /* el fondo lo pinta html (ver arriba) */
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  overflow-x: hidden;
}

/* Canvas de escena (globo/estrellas): fijo detrás de todo el contenido */
.scene-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  pointer-events: none;
}

.scene-canvas.is-hidden {
  display: none;
}

img,
picture,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

img {
  font-style: italic; /* texto alternativo legible si la imagen no carga */
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: none;
}

a {
  color: var(--color-accent-soft);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 2px;
}

a:hover {
  color: var(--color-accent-hover);
}

ul,
ol {
  list-style: none;
  padding: 0;
}

/* =========================================================
   Accesibilidad
   ========================================================= */

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  z-index: 1000;
  padding: var(--space-2) var(--space-4);
  background: var(--color-accent);
  color: var(--color-accent-contrast);
  border-radius: var(--radius-sm);
  transition: top var(--transition-fast);
}

.skip-link:focus {
  top: var(--space-4);
}

/* =========================================================
   Tipografía
   ========================================================= */

h1,
h2,
h3,
h4 {
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  color: var(--color-ink);
  text-wrap: balance;
}

h1 {
  font-size: var(--fs-2xl);
}

h2 {
  font-size: var(--fs-xl);
}

h3 {
  font-size: var(--fs-lg);
}

h4 {
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
}

p {
  max-width: 65ch;
}

.text-muted {
  color: var(--color-text-muted);
}

.eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-accent-soft);
}

/* =========================================================
   Layout
   ========================================================= */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

.section {
  padding-block: var(--space-10);
}

@media (min-width: 768px) {
  .section {
    padding-block: var(--space-12);
  }
}

/* =========================================================
   Botones
   ========================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: var(--space-3) var(--space-5);
  border-radius: 999px;
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color var(--transition-fast), color var(--transition-fast),
    border-color var(--transition-fast), box-shadow var(--transition-fast),
    transform var(--transition-fast);
  white-space: nowrap;
}

.btn:active {
  transform: scale(0.98);
}

.btn--accent {
  background: linear-gradient(120deg, var(--color-accent), #5a86ff);
  color: var(--color-accent-contrast);
  box-shadow: var(--glow-accent);
}

.btn--accent:hover {
  background: linear-gradient(120deg, var(--color-accent-hover), #74a0ff);
  color: var(--color-accent-contrast);
  box-shadow: 0 12px 40px rgba(59, 108, 245, 0.45);
  transform: translateY(-2px);
}

.btn--outline {
  background-color: rgba(13, 20, 38, 0.35);
  color: var(--color-ink);
  border: 1.5px solid var(--color-border-strong);
}

.btn--outline:hover {
  border-color: var(--color-accent-soft);
  color: var(--color-ink);
  background-color: rgba(20, 30, 56, 0.55);
}

.btn--ghost {
  background-color: transparent;
  color: var(--color-ink);
  border: 1.5px solid var(--color-border);
}

.btn--ghost:hover {
  border-color: var(--color-border-strong);
  background-color: rgba(20, 30, 56, 0.45);
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* =========================================================
   Hero
   ========================================================= */

.hero {
  position: relative;
  /* El fondo lo pone el body (gradiente) y/o el canvas de escena */
  background: transparent;
}

.hero h1 {
  color: var(--color-ink);
}

.hero__grid {
  display: grid;
  gap: var(--space-8);
  align-items: center;
}

/* Ambient glow: dos manchas de gradiente muy suaves, deriva lentísima.
   Reutilizable en cualquier superficie oscura (hero, CTA final).
   Puramente decorativo -> aria-hidden, y congelado por completo bajo
   prefers-reduced-motion vía la regla global de animation-duration. */
.ambient-glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.ambient-glow__blob {
  position: absolute;
  border-radius: 50%;
  opacity: 0.28;
  filter: blur(80px);
  will-change: transform;
}

.ambient-glow__blob--accent {
  top: -18%;
  left: -12%;
  width: 55vw;
  height: 55vw;
  max-width: 620px;
  max-height: 620px;
  background-color: var(--color-accent);
  animation: ambient-drift-1 28s ease-in-out infinite alternate;
}

.ambient-glow__blob--violet {
  bottom: -22%;
  right: -10%;
  width: 48vw;
  height: 48vw;
  max-width: 560px;
  max-height: 560px;
  background-color: var(--color-accent-2);
  animation: ambient-drift-2 34s ease-in-out infinite alternate;
}

@keyframes ambient-drift-1 {
  from {
    transform: translate(0, 0) scale(1);
  }
  to {
    transform: translate(6%, 5%) scale(1.12);
  }
}

@keyframes ambient-drift-2 {
  from {
    transform: translate(0, 0) scale(1);
  }
  to {
    transform: translate(-6%, -5%) scale(1.1);
  }
}

.hero__inner {
  position: relative;
  z-index: 1;
}

.hero__content {
  max-width: 720px;
  margin-inline: auto;
  text-align: center;
}

@keyframes hero-fade-up {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero__content h1 {
  animation: hero-fade-up 0.7s ease-out both;
}

/* Gradiente tipográfico estilo Stripe sobre fondo oscuro (tintes claros
   del acento para mantener contraste AA sobre --color-ink). */
.text-gradient {
  background: linear-gradient(100deg, #7d9bff 0%, #a78bfa 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero__subtitle {
  font-size: var(--fs-md);
  color: var(--color-on-dark-muted);
  margin: var(--space-4) auto var(--space-6);
  max-width: 46ch;
  animation: hero-fade-up 0.7s ease-out 0.1s both;
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-bottom: var(--space-8);
  animation: hero-fade-up 0.7s ease-out 0.15s both;
}

.hero__solutions {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  max-width: 900px;
  margin-inline: auto;
  animation: hero-fade-up 0.7s ease-out 0.25s both;
}

.solution-card {
  justify-content: flex-start;
  width: 100%;
  padding: var(--space-4);
  gap: var(--space-3);
  text-align: left;
}

.solution-card svg {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
}

.media-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  aspect-ratio: 4 / 3;
  padding: var(--space-6);
  text-align: center;
  color: var(--color-text-muted);
  background-color: var(--color-bg-muted);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-lg);
}

.media-placeholder svg {
  width: 44px;
  height: 44px;
  opacity: 0.7;
}

.media-placeholder small {
  font-size: var(--fs-sm);
  max-width: 30ch;
}

.media-placeholder--dark {
  color: var(--color-text-muted);
  background-color: rgba(13, 20, 38, 0.4);
  border-color: var(--color-border-strong);
}

@media (min-width: 480px) {
  .hero__solutions {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1024px) {
  .hero__grid {
    grid-template-columns: 1.1fr 0.9fr;
    gap: var(--space-10);
  }

  .hero__solutions {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* =========================================================
   Bloque de confianza ("¿Qué es CrecentIA?")
   ========================================================= */

.trust__grid {
  display: grid;
  gap: var(--space-6);
  margin-top: var(--space-8);
}

.trust-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  background-color: var(--color-bg-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform var(--transition-base), box-shadow var(--transition-base),
    border-color var(--transition-base), background-color var(--transition-base);
}

.trust-card:hover {
  transform: translateY(-3px);
  border-color: var(--color-border-strong);
  background-color: rgba(18, 26, 50, 0.9);
  box-shadow: var(--shadow-md);
}

.trust-card h3 {
  font-size: var(--fs-md);
}

.trust-card p {
  color: var(--color-text-muted);
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: auto;
  font-weight: var(--fw-semibold);
  text-decoration: none;
}

.link-arrow::after {
  content: "→";
  transition: transform var(--transition-fast);
}

.link-arrow:hover::after {
  transform: translateX(4px);
}

@media (min-width: 1024px) {
  .trust__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* =========================================================
   Testimonios
   ========================================================= */

.testimonials__grid {
  display: grid;
  gap: var(--space-6);
  margin-top: var(--space-8);
}

.testimonial-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6);
  background-color: var(--color-bg-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform var(--transition-base), box-shadow var(--transition-base),
    border-color var(--transition-base), background-color var(--transition-base);
}

.testimonial-card:hover {
  transform: translateY(-3px);
  border-color: var(--color-border-strong);
  background-color: rgba(18, 26, 50, 0.9);
  box-shadow: var(--shadow-md);
}

.testimonial-card .stars {
  color: var(--color-star);
  font-size: var(--fs-md);
  letter-spacing: 0.15em;
}

.testimonial-card footer {
  display: flex;
  flex-direction: column;
  font-weight: var(--fw-semibold);
  color: var(--color-ink);
}

.testimonial-card footer span {
  font-weight: var(--fw-regular);
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
}

@media (min-width: 768px) {
  .testimonials__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* =========================================================
   CTA final
   ========================================================= */

.cta-final {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(600px 300px at 50% 120%, rgba(59, 108, 245, 0.22), transparent 70%),
    rgba(9, 14, 28, 0.6);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.cta-final h2 {
  color: var(--color-ink);
}

.cta-final__inner p {
  color: var(--color-on-dark-muted);
  max-width: 46ch;
}

.cta-final__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  text-align: center;
}

/* =========================================================
   Página: intro (H1 + intro, sin hero oscuro)
   ========================================================= */

.page-intro p {
  font-size: var(--fs-md);
  color: var(--color-text-muted);
  margin-top: var(--space-4);
  max-width: 60ch;
}

/* =========================================================
   Contenido legal (politicas.html)
   ========================================================= */

.legal-content {
  max-width: 720px;
  margin-inline: auto;
}

.legal-content h2 {
  margin-top: var(--space-8);
  margin-bottom: var(--space-2);
  font-size: var(--fs-lg);
}

.legal-content p {
  color: var(--color-text-muted);
  max-width: none;
}

/* =========================================================
   Servicios (grid de soluciones)
   ========================================================= */

.services__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  margin-top: var(--space-8);
}

.service-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-6);
  background-color: var(--color-bg-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform var(--transition-base), box-shadow var(--transition-base),
    border-color var(--transition-base), background-color var(--transition-base);
}

.service-card:hover {
  transform: translateY(-3px);
  border-color: var(--color-border-strong);
  background-color: rgba(18, 26, 50, 0.9);
  box-shadow: var(--shadow-md);
}

/* Icono en anillo circular con glow (estética del prototipo) */
.service-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 1.5px solid var(--color-border-strong);
  background-color: rgba(59, 108, 245, 0.08);
  box-shadow: 0 0 24px rgba(59, 108, 245, 0.15);
  color: var(--color-accent-soft);
}

.service-card__icon svg {
  width: 26px;
  height: 26px;
}

.service-card h2 {
  font-size: var(--fs-md);
}

.service-card p {
  color: var(--color-text-muted);
}

@media (min-width: 768px) {
  .services__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .services__grid > .service-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .services__grid > .service-card:last-child:nth-child(odd) p {
    max-width: 60ch;
  }
}

/* =========================================================
   Pull-quote (alternativa sin foto en nosotros.html)
   ========================================================= */

.pull-quote {
  margin-top: var(--space-8);
  padding-left: var(--space-6);
  border-left: 3px solid var(--color-accent);
}

.pull-quote p {
  font-family: var(--font-heading);
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);
  color: var(--color-ink);
  line-height: var(--lh-tight);
}

.pull-quote footer {
  margin-top: var(--space-3);
  font-weight: var(--fw-semibold);
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
}

.pull-quote footer span {
  font-weight: var(--fw-regular);
}

/* =========================================================
   Valores / pilares (nosotros.html)
   ========================================================= */

.values__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  margin-top: var(--space-8);
}

.value-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding-inline: var(--space-4);
  text-align: center;
}

.value-card h3 {
  font-size: var(--fs-md);
}

.value-card p {
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
}

@media (min-width: 480px) {
  .values__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .values__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* =========================================================
   Header
   ========================================================= */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: rgba(4, 6, 13, 0.68);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(96, 130, 214, 0.14);
  min-height: var(--header-height);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--header-height);
}

.site-logo {
  font-family: var(--font-heading);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--color-on-dark);
  text-decoration: none;
  letter-spacing: -0.01em;
}

.site-logo::after {
  content: ".";
  color: var(--color-accent);
}

/* Con subtítulo (estética prototipo) el punto final sobra */
.site-logo:has(small)::after {
  content: none;
}

.site-logo {
  line-height: 1.1;
}

.site-logo:hover {
  color: var(--color-on-dark);
}

.nav-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: var(--space-2);
}

.nav-toggle__bar {
  display: block;
  width: 100%;
  height: 2px;
  background-color: var(--color-on-dark);
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}

body.nav-open .nav-toggle__bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

body.nav-open .nav-toggle__bar:nth-child(2) {
  opacity: 0;
}

body.nav-open .nav-toggle__bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.primary-nav {
  position: fixed;
  inset: var(--header-height) 0 0 0;
  background-color: rgba(4, 7, 15, 0.96);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  padding: var(--space-6) var(--container-padding);
  transform: translateX(100%);
  transition: transform var(--transition-base);
  overflow-y: auto;
}

.primary-nav.is-open {
  transform: translateX(0);
}

.primary-nav__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.primary-nav__list a {
  display: block;
  padding: var(--space-3) 0;
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  color: var(--color-text);
  text-decoration: none;
  border-bottom: 1px solid rgba(96, 130, 214, 0.14);
}

.primary-nav__list a:hover,
.primary-nav__list a[aria-current="page"] {
  color: var(--color-ink);
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

@media (min-width: 1024px) {
  .nav-toggle {
    display: none;
  }

  .primary-nav {
    position: static;
    inset: auto;
    background: none;
    padding: 0;
    transform: none;
    transition: none;
    overflow: visible;
  }

  .primary-nav__list {
    flex-direction: row;
    align-items: center;
    gap: var(--space-6);
  }

  .primary-nav__list a {
    padding: 0;
    border-bottom: none;
  }
}

/* =========================================================
   Footer
   ========================================================= */

.site-footer {
  background-color: rgba(6, 10, 20, 0.6);
  border-top: 1px solid rgba(96, 130, 214, 0.14);
  color: var(--color-text-muted);
}

.site-footer a {
  color: var(--color-text);
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--color-accent-soft);
}

.site-footer__inner {
  display: grid;
  gap: var(--space-8);
  padding-block: var(--space-10);
}

.site-footer__brand p {
  margin-top: var(--space-3);
  max-width: 40ch;
}

.site-footer__heading {
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-on-dark);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: var(--space-3);
}

.site-footer__nav ul,
.site-footer__contact p {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.site-footer__bottom {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-block: var(--space-5);
  border-top: 1px solid rgba(96, 130, 214, 0.14);
  font-size: var(--fs-sm);
}

@media (min-width: 768px) {
  .site-footer__inner {
    grid-template-columns: 1.5fr 1fr 1fr;
  }

  .site-footer__bottom {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

/* =========================================================
   Formulario multi-paso (contacto.html)
   ========================================================= */

.wizard {
  max-width: 640px;
  margin-inline: auto;
  margin-top: var(--space-8);
  padding: var(--space-6);
  background-color: var(--color-bg-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--shadow-md);
}

.wizard-progress-track {
  height: 6px;
  background-color: rgba(96, 130, 214, 0.18);
  border-radius: 999px;
  overflow: hidden;
}

.wizard-progress-track__bar {
  height: 100%;
  width: 11.11%;
  background-color: var(--color-accent);
  border-radius: 999px;
  transition: width var(--transition-base);
}

.wizard-progress-text {
  margin-top: var(--space-2);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

.form-step {
  border: 0;
  padding: 0;
  margin: var(--space-8) 0 0;
}

.form-step legend {
  padding: 0;
  width: 100%;
  font-family: var(--font-heading);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  color: var(--color-ink);
  line-height: var(--lh-tight);
}

.form-step legend:focus {
  outline: none;
}

.field {
  margin-top: var(--space-4);
}

.field label {
  display: block;
  font-weight: var(--fw-medium);
  margin-bottom: var(--space-2);
}

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field textarea {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--fs-base);
  background-color: var(--color-surface);
  color: var(--color-ink);
  transition: border-color var(--transition-fast);
}

.field input::placeholder,
.field textarea::placeholder {
  color: var(--color-text-muted);
}

.field input:focus,
.field textarea:focus {
  border-color: var(--color-accent);
}

.field textarea {
  resize: vertical;
  min-height: 6rem;
}

.field-hint {
  margin-top: var(--space-2);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

.field-optional {
  font-weight: var(--fw-regular);
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  margin-left: var(--space-2);
}

.option-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.option-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.option-card:hover {
  border-color: var(--color-accent);
}

.option-card:has(input:checked) {
  border-color: var(--color-accent);
  background-color: rgba(59, 108, 245, 0.14);
}

.option-card input {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  accent-color: var(--color-accent);
}

@media (min-width: 480px) {
  .option-group--inline {
    flex-direction: row;
  }

  .option-group--inline .option-card {
    flex: 1;
    justify-content: center;
  }
}

.checkbox-field {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-top: var(--space-4);
  cursor: pointer;
}

.checkbox-field input {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: var(--color-accent);
}

.form-error {
  min-height: 1.2em;
  margin-top: var(--space-2);
  font-size: var(--fs-sm);
  color: var(--color-error);
}

.wizard-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-8);
}

.form-status {
  margin-top: var(--space-6);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  font-weight: var(--fw-medium);
}

.form-status--success {
  background-color: rgba(14, 159, 110, 0.14);
  color: #3ecf9a;
}

.form-status--error {
  background-color: rgba(214, 49, 99, 0.14);
  color: #ff7ba1;
}

.honeypot {
  display: none;
}

@media (min-width: 768px) {
  .wizard {
    padding: var(--space-8);
  }
}

/* =========================================================
   Scroll reveal (mejora progresiva)
   Solo se oculta contenido si JS está activo (html.js);
   sin JS todo es visible. Con prefers-reduced-motion la
   regla global reduce la transición a ~0ms: aparece al
   instante en cuanto el observer lo marca visible.
   ========================================================= */

html.js .reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

html.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

html.js .reveal-stagger > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

html.js .reveal-stagger.is-visible > * {
  opacity: 1;
  transform: none;
}

html.js .reveal-stagger.is-visible > :nth-child(2) {
  transition-delay: 60ms;
}

html.js .reveal-stagger.is-visible > :nth-child(3) {
  transition-delay: 120ms;
}

html.js .reveal-stagger.is-visible > :nth-child(4) {
  transition-delay: 180ms;
}

html.js .reveal-stagger.is-visible > :nth-child(5) {
  transition-delay: 240ms;
}

/* =========================================================
   Hero con globo 3D (nosotros.html — estética prototipo)
   El canvas .scene-canvas queda fijo detrás; el texto ocupa
   la mitad izquierda en escritorio y todo el ancho en móvil.
   ========================================================= */

.hero--globe {
  display: flex;
  align-items: center;
  min-height: calc(100svh - var(--header-height));
  padding-block: var(--space-10);
}

.hero--globe .hero__content {
  max-width: 34rem;
  margin-inline: 0;
  text-align: left;
}

.hero--globe .hero__subtitle {
  margin-inline: 0;
}

.hero--globe .hero__cta {
  justify-content: flex-start;
}

.hero__hint {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-10);
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
}

.hero__hint svg {
  animation: hint-bounce 2.2s infinite;
}

@keyframes hint-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}

/* Variante compacta: páginas utilitarias (soluciones, contacto)
   con su propio elemento 3D pero sin ocupar toda la pantalla */
.hero--globe.hero--compact {
  min-height: 56svh;
}

/* En móvil el globo queda arriba (lo recoloca el motor 3D):
   damos aire para que el texto no lo tape */
@media (max-width: 767px) {
  .hero--globe {
    align-items: flex-end;
    min-height: 100svh;
  }

  .hero--globe.hero--compact {
    min-height: 88svh;
  }
}

/* =========================================================
   Panel ancho glass (secciones destacadas del prototipo)
   ========================================================= */

.glass-panel {
  background-color: var(--color-bg-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: clamp(1.8rem, 4vw, 3rem);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.glass-panel > .eyebrow {
  margin-bottom: var(--space-3);
}

/* Icono anillo reutilizable fuera de las service-cards */
.icon-ring {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 1.5px solid var(--color-border-strong);
  background-color: rgba(59, 108, 245, 0.08);
  box-shadow: 0 0 24px rgba(59, 108, 245, 0.15);
  color: var(--color-accent-soft);
  margin-bottom: var(--space-4);
}

.icon-ring svg {
  width: 24px;
  height: 24px;
}

/* =========================================================
   Mapa mundial 2D con hubs y arcos (sección "Red global")
   ========================================================= */

.world-map {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 0.95;
  margin-top: var(--space-6);
}

.world-map canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* =========================================================
   Logo con subtítulo (estética prototipo)
   ========================================================= */

.site-logo small {
  display: block;
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: 0.55rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* =========================================================
   CTA banda final estilo prototipo (icono + texto + botón)
   ========================================================= */

.cta-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  flex-wrap: wrap;
}

.cta-banner__text h2 {
  margin-bottom: var(--space-2);
}

.cta-banner__text p {
  color: var(--color-text);
}