/* ==========================================================================
   NeoDev Studio — Estilos principales
   Paleta: azul corporativo + turquesa/teal como acento "tech"
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. CUSTOM PROPERTIES
   -------------------------------------------------------------------------- */
:root {
  /* Colores de marca */
  --color-bg-dark: #0B1530;
  --color-bg-dark-2: #0A1A38;
  --color-bg-light: #F4F5F7;

  /* Turquesa / Teal (acento "tech") */
  --color-teal: #14B8A6;
  --color-teal-light: #2DD4BF;

  /* Gradientes reutilizables */
  --gradient-primary: linear-gradient(135deg, #1B6EF3 0%, #14B8A6 100%);
  --gradient-teal: linear-gradient(135deg, #14B8A6 0%, #2DD4BF 100%);
  --gradient-text-accent: linear-gradient(135deg, #5BA4FF 0%, #2DD4BF 100%);

  /* Mesh gradients — fondo oscuro con azules + teal */
  --gradient-mesh-dark: radial-gradient(at 15% 15%, rgba(45, 212, 191, 0.10) 0px, transparent 50%),
                        radial-gradient(at 85% 10%, rgba(91, 164, 255, 0.12) 0px, transparent 50%),
                        radial-gradient(at 50% 50%, rgba(20, 184, 166, 0.06) 0px, transparent 50%),
                        radial-gradient(at 10% 90%, rgba(27, 110, 243, 0.10) 0px, transparent 50%),
                        radial-gradient(at 90% 85%, rgba(45, 212, 191, 0.08) 0px, transparent 50%);

  /* Colores de texto */
  --color-text-on-dark: #F4F5F7;
  --color-text-on-dark-muted: rgba(244, 245, 247, 0.72);
  --color-text-on-dark-subtle: rgba(244, 245, 247, 0.5);
  --color-text-on-light: #0B1530;
  --color-text-on-light-muted: rgba(11, 21, 48, 0.7);

  /* Bordes y divisores */
  --color-border-dark: rgba(244, 245, 247, 0.1);

  /* Estados */
  --color-error: #FF5757;
  --color-error-bg: rgba(255, 87, 87, 0.08);
  --color-success: #2ECC71;

  /* Tipografía */
  --font-heading: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

  /* Escala tipográfica fluida */
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
  --fs-2xl: clamp(1.375rem, 1.2rem + 0.85vw, 1.875rem);
  --fs-3xl: clamp(1.875rem, 1.4rem + 2vw, 3rem);
  --fs-hero: clamp(2.75rem, 1.4rem + 5vw, 5.25rem);
  --fs-section-title: clamp(2.5rem, 1.37rem + 5.2vw, 4.7rem);
  --fs-eyebrow: 1.15rem;

  /* Espaciado */
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;

  /* Layout */
  --section-padding-y: clamp(5rem, 9vw, 9rem);
  --container-max: 1200px;
  --container-padding: clamp(1rem, 4vw, 1.5rem);
  --navbar-height: 76px;

  /* Efectos */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);
  --shadow-xl: 0 20px 50px -10px rgba(0, 0, 0, 0.3);
  --shadow-glow-primary: 0 10px 40px -10px rgba(20, 184, 166, 0.5);

  /* Radios */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-2xl: 1.5rem;
  --radius-full: 9999px;

  /* Z-index */
  --z-navbar: 100;
  --z-drawer: 200;
  --z-modal: 300;
}

/* --------------------------------------------------------------------------
   2. RESET
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--navbar-height);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--color-text-on-light);
  background-color: var(--color-bg-light);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

input, button, textarea, select {
  font: inherit;
  color: inherit;
}
button { background: none; border: none; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.025em;
}

/* --------------------------------------------------------------------------
   3. UTILIDADES
   -------------------------------------------------------------------------- */
.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: -100px;
  left: 1rem;
  background: var(--gradient-primary);
  color: white;
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-md);
  z-index: var(--z-modal);
  font-weight: 600;
  transition: top var(--transition-base);
}
.skip-link:focus { top: 1rem; }

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

/* --------------------------------------------------------------------------
   4. SECCIONES — Sistema de fondos con gradientes
   -------------------------------------------------------------------------- */
.section {
  padding-block: var(--section-padding-y);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* Fondo claro: gradiente blanco → gris azulado con destellos sutiles */
.section--light {
  background: linear-gradient(180deg, #ffffff 0%, #EEF2F7 100%);
  color: var(--color-text-on-light);
}
.section--light::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 40% at 20% 0%, rgba(45, 212, 191, 0.06) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 100% 100%, rgba(91, 164, 255, 0.06) 0%, transparent 60%);
  z-index: -1;
  pointer-events: none;
}

/* Fondo oscuro: mesh + wireframe sutil */
.section--dark {
  background:
    var(--gradient-mesh-dark),
    linear-gradient(180deg, var(--color-bg-dark) 0%, var(--color-bg-dark-2) 100%);
  color: var(--color-text-on-dark);
}
.section--dark::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    /* wireframe sutil — líneas finas formando grid */
    linear-gradient(rgba(91, 164, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(91, 164, 255, 0.04) 1px, transparent 1px),
    /* dots */
    radial-gradient(circle at 1px 1px, rgba(45, 212, 191, 0.08) 1px, transparent 0);
  background-size: 80px 80px, 80px 80px, 40px 40px;
  background-position: -1px -1px, -1px -1px, 0 0;
  z-index: -2;
  pointer-events: none;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 50%, black 0%, transparent 85%);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 50%, black 0%, transparent 85%);
}

.section__header {
  text-align: center;
  margin-bottom: var(--space-16);
  max-width: 760px;
  margin-inline: auto;
  position: relative;
}

.section__eyebrow {
  display: inline-block;
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  background: var(--gradient-text-accent);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  margin-bottom: var(--space-4);
  padding: 0.4rem 1rem;
}

.section__title {
  font-size: var(--fs-section-title);
  margin-bottom: var(--space-5);
  letter-spacing: -0.03em;
}
.section--dark .section__title {
  color: var(--color-text-on-dark);
}

.section__subtitle {
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.55;
  color: var(--color-text-on-light-muted);
}
.section--dark .section__subtitle {
  color: var(--color-text-on-dark-muted);
}

/* --------------------------------------------------------------------------
   5. BOTONES
   -------------------------------------------------------------------------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.95rem 1.85rem;
  font-family: var(--font-heading);
  font-size: var(--fs-base);
  font-weight: 600;
  letter-spacing: -0.01em;
  border-radius: var(--radius-md);
  transition: all var(--transition-base);
  cursor: pointer;
  white-space: nowrap;
  text-align: center;
  min-height: 50px;
  isolation: isolate;
  overflow: hidden;
}
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: -1;
  opacity: 0;
  transition: opacity var(--transition-base);
}

.btn:focus-visible {
  outline: 2px solid var(--color-teal-light);
  outline-offset: 3px;
}

.btn--primary {
  background: var(--gradient-primary);
  color: white;
  box-shadow: var(--shadow-glow-primary);
}
.btn--primary::before {
  background: linear-gradient(135deg, #2DD4BF 0%, #1B6EF3 100%);
  opacity: 0;
}
.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 15px 40px -10px rgba(20, 184, 166, 0.7);
}
.btn--primary:hover::before { opacity: 1; }
.btn--primary:active { transform: translateY(0); }

.btn--secondary {
  background: rgba(244, 245, 247, 0.05);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--color-text-on-dark);
  border: 1.5px solid rgba(244, 245, 247, 0.2);
}
.btn--secondary:hover {
  background: rgba(244, 245, 247, 0.1);
  border-color: var(--color-teal-light);
  transform: translateY(-2px);
}

.btn--whatsapp {
  background: linear-gradient(135deg, #25D366 0%, #1FB857 100%);
  color: white;
  box-shadow: 0 10px 30px -10px rgba(37, 211, 102, 0.5);
}
.btn--whatsapp:hover {
  transform: translateY(-2px);
  box-shadow: 0 15px 40px -10px rgba(37, 211, 102, 0.6);
}
.btn--whatsapp::before {
  background: linear-gradient(135deg, #2EE070 0%, #25D366 100%);
}

.btn--block { width: 100%; }

.btn__icon {
  width: 1.25em;
  height: 1.25em;
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   6. NAVBAR
   -------------------------------------------------------------------------- */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--navbar-height);
  background-color: transparent;
  z-index: var(--z-navbar);
  transition: all var(--transition-base);
}

/* === Dock style al hacer scroll ===
   Cuando .is-scrolled se activa (scrollY > 20, manejado por js/navbar.js),
   el navbar deja de ser una barra full-width y se convierte en un dock
   flotante centrado. Mantiene los mismos colores, fondo glass, blur y
   sombra del diseño original; solo cambia la apariencia:
   - width cap a max-width 1200px (igual al container), centrado con
     margin-inline: auto y 16px de respiro lateral (calc(100% - 32px))
   - border-radius var(--radius-2xl) → rectángulo redondeado
   - top: 12px → flota respecto al borde superior (en lugar de pegado)
   - border 1px rgba(255,255,255,0.12) → rim claro sutil que simula el
     reborde de un panel de vidrio (light catching the edge). Funciona
     sobre fondos claros y oscuros sin perder la sensación glass.
   - Se elimina el border-bottom y el ::after (línea divisoria teal)
     porque ya no hay "borde inferior" al ser un dock flotante */
.navbar.is-scrolled {
  top: 5px;
  width: calc(100% - 32px);
  max-width: 1300px;
  margin-inline: auto;
  border: 1px solid #2dd4bf6e;
  border-radius: var(--radius-2xl);
  background: rgba(11, 21, 48, 0.85);
/*   backdrop-filter: blur(10px) saturate(180%); */
/*   background: rgb(42 47 62 / 71%); */
  backdrop-filter: blur(4px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

/* Línea divisoria teal del ::after — desactivada en modo dock.
   El ::after ya no aporta valor porque el dock ya no tiene "borde
   inferior" donde anclar la línea. Se sobreescribe con display: none
   en lugar de eliminar la regla para mantener la estructura CSS
   legible y documentar la decisión. */
.navbar.is-scrolled::after {
  display: none;
}

.navbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}
.navbar__logo {
  display: flex;
  align-items: center;
  height: 45px;
  transition: transform var(--transition-fast);
}
.navbar__logo:hover { transform: scale(1.02); }
.navbar__logo img { height: 100%; width: auto; }

.navbar__menu {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}
.navbar__links {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}
.navbar__link {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--color-text-on-dark);
  transition: color var(--transition-fast);
  position: relative;
  padding: 0.5rem 0;
}
.navbar__link::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 0; height: 2px;
  background: var(--gradient-teal);
  transition: width var(--transition-base);
  border-radius: 2px;
}
.navbar__link:hover::after { width: 100%; }

.navbar__cta {
  padding: 0.65rem 1.35rem;
  font-size: var(--fs-sm);
  min-height: auto;
}

.navbar__toggle {
  display: none;
  width: 44px; height: 44px;
  align-items: center;
  justify-content: center;
  color: var(--color-text-on-dark);
  border-radius: var(--radius-md);
}
.navbar__toggle svg { width: 28px; height: 28px; }

/* === Dock responsive ===
   Mobile (< 640px): reduce los márgenes del dock para que se sienta
   más presente y el hamburguesa quede cómodo a la derecha (sigue
   siendo flotante, pero con poco respiro lateral). */
@media (max-width: 639px) {
  .navbar.is-scrolled {
    top: 8px;
    width: calc(100% - 16px);
  }
}

/* Drawer móvil */
.drawer {
  position: fixed;
  top: 0; right: 0;
  width: min(85vw, 360px);
  height: 100vh;
  background: linear-gradient(180deg, #0b15309c 0%, var(--color-bg-dark-2) 100%);
  z-index: var(--z-drawer);
  padding: var(--space-6) var(--space-8);
  transform: translateX(100%);
  transition: transform var(--transition-slow);
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  border-left: 1px solid rgba(45, 212, 191, 0.3);
  box-shadow: -20px 0 60px rgba(0, 0, 0, 0.5);
}
.drawer.is-open { transform: translateX(0); }

.drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-border-dark);
}
.drawer__close {
  width: 44px; height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-on-dark);
  border-radius: var(--radius-md);
  transition: background-color var(--transition-fast);
}
.drawer__close:hover { background-color: var(--color-border-dark); }

.drawer__links {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.drawer__link {
  display: block;
  padding: var(--space-3) var(--space-2);
  font-size: var(--fs-lg);
  font-weight: 500;
  color: var(--color-text-on-dark);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
}
.drawer__link:hover {
  background-color: var(--color-border-dark);
  padding-left: var(--space-4);
}
.drawer__cta { margin-top: auto; }

.overlay {
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(11, 21, 48, 0.85) 0%, rgba(0, 0, 0, 0.95) 100%);
  z-index: calc(var(--z-drawer) - 1);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-base), visibility var(--transition-base);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.overlay.is-open { opacity: 1; visibility: visible; }
body.has-drawer-open { overflow: hidden; }

/* --------------------------------------------------------------------------
   7. HERO — Gradiente azul → turquesa + wireframes tech
   -------------------------------------------------------------------------- */
.hero {
  padding-top: calc(var(--navbar-height) + var(--space-16));
  padding-bottom: var(--space-20);
  min-height: 100vh;
  display: flex;
  align-items: center;
  position: relative;
  isolation: isolate;
  overflow: hidden;

  /* Gradiente principal: azul profundo → teal */
  background:
    /* Halo teal arriba-derecha */
    radial-gradient(ellipse 55% 45% at 85% 15%, rgba(45, 212, 191, 0.22) 0%, transparent 60%),
    /* Halo azul abajo-izquierda */
    radial-gradient(ellipse 60% 50% at 10% 80%, rgba(91, 164, 255, 0.18) 0%, transparent 60%),
    /* Cyan glow central */
    radial-gradient(ellipse 70% 50% at 50% 60%, rgba(20, 184, 166, 0.10) 0%, transparent 60%),
    /* Base: azul → teal diagonal */
    linear-gradient(135deg, #0A1532 0%, #0B2046 30%, #0A2E50 60%, #0A4055 100%);
}

/* Wireframe grid — líneas finas formando grid técnico */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    /* líneas horizontales */
    linear-gradient(rgba(91, 164, 255, 0.08) 1px, transparent 1px),
    /* líneas verticales */
    linear-gradient(90deg, rgba(91, 164, 255, 0.08) 1px, transparent 1px);
  background-size: 80px 80px, 80px 80px;
  background-position: -1px -1px;
  z-index: -2;
  pointer-events: none;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 0%, transparent 90%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 0%, transparent 90%);
}

/* Tech shapes: formas geométricas outlined flotando */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    /* Hexágonos en formación horizontal, solapados, distintos tamaños — top-left */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='340' height='190' viewBox='0 0 340 190' fill='none' stroke='%235BA4FF' stroke-width='1' opacity='0.2'><polygon points='0,110 45,32 135,32 180,110 135,188 45,188'/><polygon points='135,110 167,54 233,54 265,110 233,166 167,166'/><polygon points='240,110 265,67 315,67 340,110 315,153 265,153'/></svg>"),
    /* Anillos concéntricos — bottom-right */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200' fill='none' stroke='%232DD4BF' stroke-width='1' opacity='0.15'><circle cx='100' cy='100' r='90'/><circle cx='100' cy='100' r='60'/><circle cx='100' cy='100' r='30'/></svg>"),
    /* Líneas conectoras — mid-right */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='200' viewBox='0 0 300 200' fill='none' stroke='%2314B8A6' stroke-width='1' opacity='0.2'><path d='M 0 100 L 100 100 L 130 70 L 200 70'/><circle cx='100' cy='100' r='3' fill='%2314B8A6'/><circle cx='200' cy='70' r='3' fill='%2314B8A6'/><path d='M 200 70 L 250 70 L 280 100 L 300 100'/><circle cx='300' cy='100' r='3' fill='%2314B8A6'/></svg>"),
    /* Triángulos en formación horizontal, ambos apuntando arriba, solapados — top-right */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='360' height='200' viewBox='0 0 360 200' fill='none' stroke='%235BA4FF' stroke-width='1' opacity='0.28'><polygon points='140,20 240,180 40,180'/><polygon points='250,70 320,180 180,180'/></svg>");
  background-repeat: no-repeat;
  background-position:
    15% 93%,
    85% 70%,
    61% 26%,
    19% 8%;
  background-size: 400px, 220px, 280px, 360px;
  z-index: -1;
  pointer-events: none;
  animation: float 30s ease-in-out infinite;
}

.hero__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
  align-items: center;
  width: 100%;
  position: relative;
  z-index: 1;
}

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

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.5rem 1rem;
  background: rgba(45, 212, 191, 0.1);
  border: 1px solid rgba(45, 212, 191, 0.3);
  border-radius: var(--radius-full);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--color-teal-light);
  margin-bottom: var(--space-8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.hero__badge::before {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--color-teal-light);
  box-shadow: 0 0 12px var(--color-teal-light);
  animation: pulse 2s ease-in-out infinite;
}

.hero__headline {
  font-size: var(--fs-hero);
  line-height: 1.05;
  letter-spacing: -0.035em;
  margin-bottom: var(--space-6);
  color: var(--color-text-on-dark);
}
.hero__headline .accent {
  background: var(--gradient-text-accent);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  position: relative;
  display: inline-block;
}

.hero__sub {
  font-size: 1.25rem;
  line-height: 1.55;
  color: var(--color-text-on-dark-muted);
  margin-bottom: var(--space-10);
  max-width: 640px;
  margin-inline: auto;
}

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: center;
  margin-bottom: var(--space-12);
}

.hero__trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  padding-top: var(--space-8);
  border-top: 1px solid rgba(45, 212, 191, 0.39);
  font-size: var(--fs-sm);
  color: var(--color-text-on-dark-muted);
}
.hero__trust-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.hero__trust-item svg {
  width: 18px; height: 18px;
  color: var(--color-teal-light);
  flex-shrink: 0;
}

.hero__visual {
  position: relative;
  display: none;
  max-width: 560px;
  margin-inline: auto;
}
.hero__visual img {
  width: 100%;
  height: auto;
  /*border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-xl), 0 0 80px rgba(45, 212, 191, 0.2);
  border: 1px solid rgba(45, 212, 191, 0.2);*/
}

.hero__floating-tag {
  position: absolute;
  background: rgba(11, 21, 48, 0.85);
  backdrop-filter: blur(2px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(45, 212, 191, 0.35);
  color: var(--color-text-on-dark);
  padding: 0.6rem 1rem;
  border-radius: 10px;
  font-size: var(--fs-sm);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  white-space: nowrap;
  box-shadow: 5px 11px 25px 12px rgba(0, 0, 0, 0.2), 10px 14px 10px -2px rgba(0, 0, 0, 0.1);
  animation: floatTag 6s ease-in-out infinite;
}
.hero__floating-tag::before {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--color-teal-light);
  box-shadow: 0 0 8px var(--color-teal-light);
}
.hero__floating-tag--1 { top: 3%;  left:  0%;  animation-delay: 0s;   }
.hero__floating-tag--2 { top: 8%; right: 6%;  animation-delay: 0.8s; }
.hero__floating-tag--3 { top: 44%; left:  -12%; animation-delay: 1.6s; }
.hero__floating-tag--4 { top: 48%; right: -5%; animation-delay: 2.4s; }
.hero__floating-tag--5 { bottom: 1%; right: 5%;  animation-delay: 3.2s; }
.hero__floating-tag--6 { bottom: 7%; left:  12%; animation-delay: 4.0s; }

/* --------------------------------------------------------------------------
   8. PROBLEMAS
   -------------------------------------------------------------------------- */

/* Default (< 640px): flex column. .problema__col y .problema__stack
   llevan display:contents para que las 4 cards sean hijas directas
   del layout, garantizando un solo gap consistente entre ellas. El
   intro lleva margin-bottom extra para separar la sección. */
.problema__layout {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}

#problema .container {
  max-width: 1300px;
}

.problema__intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  text-align: center;
  width: 100%;
  margin-bottom: var(--space-4);
}

#problema-heading em {
  font-weight: 200;
  color: #1B6EF3;
}

.problema__col,
.problema__stack {
  display: contents;
}

/* Cada card estira a la altura natural del stack (flex: 1 1 auto
   con min-height: 0 permite que las 2 cards compartan la altura
   total disponible, igualándolas entre sí). El .problem interior
   usa width: 100% para llenar la card. */
.problema__card {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  width: 100%;
  max-width: 390px;
}
.problema__card .problem { width: 100%; }

@media (min-width: 640px) {
  .problema__layout {
    display: grid;
    grid-template-columns: minmax(0, 390px) minmax(0, 390px);
    grid-template-areas:
      "intro intro"
      "left right";
    column-gap: var(--space-4);
    row-gap: var(--space-8);
    justify-content: center;
    align-items: start;
  }

  .problema__col {
    display: flex;
    flex-direction: column;
    min-width: 0;
    width: auto;
    max-width: 390px;
    grid-area: left;
  }

  .problema__col--right {
    grid-area: right;
    margin-top: var(--space-12);
  }

  .problema__stack {
    display: flex;
    flex-direction: column;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: var(--space-4);
    min-height: 100%;
  }

  .problema__card {
    width: auto;
    max-width: none;
  }

  .problema__intro {
    grid-area: intro;
    margin-bottom: 0;
  }
}

@media (min-width: 1270px) {
  .problema__layout {
    grid-template-columns: auto 390px 390px;
    grid-template-areas: "intro left right";
    column-gap: var(--space-4);
    row-gap: 0;
    justify-items: start;
    align-items: start;
  }
  .problema__intro {
    text-align: left;
    position: sticky;
    /*top: calc(var(--navbar-height) + var(--space-6));*/
    top: 18%;
    align-self: start;
  }
  #problema-heading {
    padding-right: 45px;
  }
  .problema__col {
    width: auto;
    max-width: none;
  }
  .problema__col--right {
    margin-top: var(--space-12);
  }
}

@media (max-width: 454.98px) {
  .problema__layout {
    padding-inline: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .problema__card { transition: none; }
}

.problem {
  display: flex;
  flex-direction: column;
  height: 100%;
  /*min-height: 520px;*/
  border-radius: var(--radius-2xl);
  overflow: hidden;
  box-shadow: 3px 3px 16px 1px rgb(23 24 26 / 90%);
  /* background: linear-gradient(135deg, #0a5a51, #173d7a); */
  background: linear-gradient(135deg, #115467, #0b2248);
  /*background: var(--gradient-mesh-dark), linear-gradient(180deg, var(--color-bg-dark) 0%, var(--color-bg-dark-2) 100%);*/
  color: #ffffff;
  padding-bottom: 15px;
  transition: transform 0.3s ease;
}

.problem:hover {
  transform: translateY(-4px);
}

.problem__media {
  position: relative;
  flex: 0 0 40%;
  min-height: 180px;
  overflow: hidden;
  padding: 15px;
  border-radius: 35px;
}

.problem__media__inner {
  border-radius: 20px;
  overflow: hidden;
  height: 190px;
}

.problem__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.problem__body {
  flex: 1 1 60%;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6) var(--space-6);
  color: #ffffff;
}

.problem__heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
}

.problem__title {
  font-size: 1em;
  text-align: center;
  line-height: 1.25;
  border: 1.5px solid #2dd4bf;
  color: #2DD4BF;
  background: transparent;
  border-radius: 999px;
  padding: 10px 14px;
  display: inline-block;
}

.problem__stat {
  font-size: var(--fs-lg);
  font-weight: 700;
  line-height: 1.35;
  color: #ffffff;
  letter-spacing: -0.01em;
  margin-top: 10px;
}

.problem__desc {
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
  margin-top: 10px;
}

@media (min-width: 1024px) {
  .problem { min-height: 500px; }
  .problem__body {
    padding: var(--space-10) var(--space-8);
    padding-top: 10px;
  }
  .problem__stat {
    font-size: var(--fs-xl, 1.25rem);
    margin-top: 10px;
  }
}

.problems__sources {
  margin-top: var(--space-6);
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--color-text-on-light-muted);
  text-align: center;
}

/* --------------------------------------------------------------------------
   9. SERVICIOS
   -------------------------------------------------------------------------- */

.services__wrap {
  max-width: 1080px;
  margin-inline: auto;
}

.services {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12) var(--space-8);
}

.service {
  --icon-w: 22px;
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 240px;
}

/* Separadores verticales entre cards en la misma fila (1px, teal 0.15) */
@media (min-width: 640px) and (max-width: 1023.98px) {
  .service:nth-child(2n+1)::after {
    content: '';
    position: absolute;
    top: var(--space-5);
    bottom: var(--space-5);
    right: -1rem;
    width: 1px;
    background: rgba(45, 212, 191, 0.4);
    pointer-events: none;
  }
}
@media (min-width: 1024px) {
  .service:nth-child(3n+1)::after,
  .service:nth-child(3n+2)::after {
    content: '';
    position: absolute;
    top: var(--space-5);
    bottom: var(--space-5);
    right: -1rem;
    width: 1px;
    background: rgba(45, 212, 191, 0.4);
    pointer-events: none;
  }
}

.service__number {
  position: absolute;
  top: -0.1em;
  left: var(--space-4);
  font-family: var(--font-heading);
  font-size: clamp(4.5rem, 3.5rem + 4vw, 6.75rem);
  font-weight: 200;
  line-height: 0.85;
  letter-spacing: -0.04em;
  background: var(--gradient-text-accent);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
  transition: opacity var(--transition-base);
}
.service:hover .service__number { opacity: 1; }

.service__icon {
  position: absolute;
  top: 96px;
  left: var(--space-5);
  width: var(--icon-w);
  height: var(--icon-w);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-teal-light);
  z-index: 1;
  transition: transform var(--transition-base);
}
.service__icon svg { width: var(--icon-w); height: var(--icon-w); }
.service:hover .service__icon { transform: scale(1.3) rotate(-3deg); }

.service__body {
  position: relative;
  z-index: 1;
  margin-top: 60px;
  padding-top: calc(var(--icon-w) + var(--space-2));
  padding-left: 51px;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.service__title {
  font-size: var(--fs-xl);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--color-text-on-dark);
}
.service__desc {
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--color-text-on-dark-muted);
}

.services__cta {
  text-align: center;
  margin-top: var(--space-16);
  padding-top: var(--space-12);
  border-top: 1px solid rgba(45, 212, 191, 0.3);
  position: relative;
}
.services__cta-text {
  font-size: var(--fs-lg);
  font-weight: 500;
  color: var(--color-text-on-dark);
  margin-bottom: var(--space-6);
  max-width: 32ch;
  margin-inline: auto;
}

/* 9 — Responsive: tablet (≥640px → 2 columnas) */
@media (min-width: 640px) {
  .services { grid-template-columns: repeat(2, 1fr); }
}

/* 9 — Responsive: desktop (≥1024px → 3 columnas) */
@media (min-width: 1024px) {
  .services { grid-template-columns: repeat(3, 1fr); }
  .service { min-height: 280px; }
  .service__title { font-size: 25px; }
  .service__desc { font-size: var(--fs-base); }
}



/* 9 — Mobile muy chico */
@media (max-width: 480px) {
  .service {
    min-height: 200px;
    --icon-w: 20px;
  }
  .service__number {
    font-size: 4.5rem;
  }
}

/* 9 — Grid más marcado (matching el hero: alpha 0.04 → 0.08) */
#servicios::before {
  background-image:
    linear-gradient(rgba(91, 164, 255, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(91, 164, 255, 0.08) 1px, transparent 1px),
    radial-gradient(circle at 1px 1px, rgba(45, 212, 191, 0.08) 1px, transparent 0);
}

/* --------------------------------------------------------------------------
   10. JOURNEY — Customer journey flow
   4 pasos con ilustraciones 3D + número en círculo con gradiente.
   -------------------------------------------------------------------------- */

/* ===== MOBILE FIRST (flujo vertical) ===== */

.journey__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  max-width: 520px;
  margin-inline: auto;
  gap: var(--space-12);
  position: relative;  /* ancla el ::before de la línea conectora */

  /* ================================================================
     VARIABLES DE LÍNEAS CONECTORAS — AJUSTABLES MANUALMENTE
     Busca "line-gap" o "line-width" para encontrarlas rápido
     ================================================================ */
  --line-width: 80%;  /* ancho de la línea (% del contenedor) */
  --line-gap: 456px;  /* distancia entre línea superior e inferior (solo tablet).
                         Sube este valor si la línea inferior queda arriba del
                         círculo 3/4. Bájalo si queda abajo. */
}

.journey__step {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-left: 5px;
  padding-right: 5px;
}

.journey__media {
  width: 220px;
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 12px;
}

.journey__media picture {
  display: block;
  width: 100%;
  height: 100%;
  line-height: 0;
}

.journey__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Título: número en círculo gradient (renglón 1) + nombre (renglón 2) */
.journey__title {
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--color-text-on-light);
  margin: -40px 0 var(--space-3);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

/* Círculo: ::before con gradient (anillo completo), ::after cubre el centro
   con el color del fondo de la sección, dejando solo el anillo visible.
   border-radius: 50% funciona perfecto con pseudo-elementos. */
.journey__num {
  position: relative;
  width: 64px;
  height: 64px;
}

.journey__num::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--gradient-text-accent);
}

.journey__num::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: #f3f6f9;
}

.journey__num-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  background: var(--gradient-text-accent);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
  font-weight: 700;
  font-size: 1.3rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

.journey__name {
  color: var(--color-text-on-light);
  font-weight: 600;
  font-size: var(--fs-xl);
  text-align: center;
}

.journey__desc {
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--color-text-on-light);
  max-width: 29ch;
  margin: 0 auto;
  margin-top: 3px;
  padding: 20px;
  border-radius: 25px;
  position: relative;
}

.journey__desc::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--gradient-text-accent);
}

.journey__desc::after {
  content: '';
  position: absolute;
  inset: 2.7px;
  border-radius: 23px;
  background: #f3f6f9;
}

.journey__desc-text {
  position: relative;
  z-index: 1;
}

/* ===== LÍNEAS CONECTORAS (nueva aproximación) =====
   La línea es un ::before del .journey__list que se posiciona a la
   altura exacta del centro del círculo. Los steps tienen un fondo
   que cubre la línea, así solo se ve en los gaps entre cards.

   Mobile: sin línea.
   Tablet: dos líneas (1→2 arriba, 3→4 abajo).
   Desktop: una línea que cruza los 4 círculos.

   Para ajustar la posición vertical de la línea, cambia el valor
   de `top` en la regla `.journey__list::before` correspondiente. */

/* ===== CTA al final de la sección =====
   Estructura: texto centrado + botón de WhatsApp */

.journey__cta {
  text-align: center;
  margin-top: var(--space-16);
  padding-top: var(--space-12);
  border-top: 1px solid rgba(45, 212, 191, 0.8);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
}

.journey__cta-text {
  font-family: var(--font-heading);
  font-size: var(--fs-2xl);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--color-text-on-light);
  line-height: 1.2;
}

/* ===== MOBILE (max-width: 639.98px): layout vertical =====
   Layout: imagen centrada arriba, círculo a la izquierda, título + desc a la derecha.
   Línea vertical que conecta los círculos por la izquierda.

   Para ajustar:
   - Tamaño de la imagen: cambia max-width de .journey__media en este bloque
   - Posición horizontal de la línea: cambia left de .journey__list::before */

@media (max-width: 639.98px) {
  .journey__step {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto auto;
    column-gap: var(--space-4);
    row-gap: var(--space-3);
    align-items: start;
    text-align: left;
    padding-left: 0;
    padding-right: 0;
  }

  /* display: contents hace que el <h3> no renderice caja, pero sus hijos
     (círculo y nombre) se vuelven grid items directos del .journey__step.
     Así podemos poner el círculo en col 1 y el nombre en col 2. */
  .journey__title {
    display: contents;
    margin: 0;
  }

  .journey__media {
    width: 100%;
    max-width: 160px;  /* ← tamaño moderado de la imagen */
    height: 160px;
    grid-column: 1 / -1;
    grid-row: 1;
    justify-self: center;
    margin-bottom: -52px;
  }

  .journey__num {
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
    width: 64px;
    height: 64px;
  }

  .journey__name {
    grid-column: 2;
    grid-row: 2;
    text-align: left;
    align-self: center;
  }

  .journey__desc {
    grid-column: 2;
    grid-row: 3;
    text-align: left;
    max-width: none;
    margin: 0;
  }

  /* Línea vertical a la izquierda, conectando los círculos.
     Se posiciona al centro del círculo (56px / 2 = 28px) en columna 1. */
  .journey__list::before {
    content: '';
    position: absolute;
    top: 160px;
    left: 31px;  /* ← ajusta este valor si cambias el tamaño del círculo */
    width: 2.7px;
    height: 77%;
    background: linear-gradient(180deg, #5BA4FF 0%, #2DD4BF 100%);
    pointer-events: none;
  }
}

/* ===== TABLET (640-1023): dos líneas, una por fila =====
   Línea arriba: imagen (220) + margen título (20) + mitad círculo (28) = 268px
   Línea abajo: posición = 268px + --line-gap (definida en .journey__list)
   Para ajustar la separación entre las líneas, cambia --line-gap */

@media (min-width: 640px) and (max-width: 1023.98px) {
  .journey__list {
    max-width: 720px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: var(--space-8) var(--space-6);
    align-items: stretch;
    margin-inline: auto;
  }

  .journey__list::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
      /* Línea fila 1 (1→2) — centrada horizontalmente con 50% */
      linear-gradient(90deg, #5BA4FF 0%, #2DD4BF 100%) no-repeat
        140% 268px / var(--line-width) 3px,
      /* Línea fila 2 (3→4) — posición = línea superior + --line-gap */
      linear-gradient(90deg, #5BA4FF 0%, #2DD4BF 100%) no-repeat
        140% calc(283px + var(--line-gap)) / var(--line-width) 3px;
    pointer-events: none;
    top: -28px;
    width: 75%;
  }

  .journey__step {
    padding: 0px;
  }

  .journey__media {
    width: 220px;
    height: 220px;
  }

  .journey__title {
    margin-top: -10px;
  }

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

/* ===== DESKTOP (≥1024px): una línea que cruza los 4 círculos =====
   Línea a: imagen (200) + margen título (20) + mitad círculo (32) = 252px */

@media (min-width: 1024px) {
  .journey__list {
    max-width: 1200px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-6);
    align-items: stretch;
  }

  .journey__list::before {
    content: '';
    position: absolute;
    top: 221px;
    left: 50%;
    width: var(--line-width);
    transform: translateX(-50%);
    height: 3px;
    background: linear-gradient(90deg, #5BA4FF 0%, #2DD4BF 100%);
    pointer-events: none;
  }

  .journey__media {
    width: 200px;
    height: 200px;
  }

  .journey__title {
    margin-top: -10px;
  }

  .journey__num-text {
    font-size: 1.25rem;
  }

  .journey__name {
    font-size: 25px;
  }

  .journey__desc {
    max-width: 21ch;
    font-size: var(--fs-base);
  }
}

/* Reveal del journey customizado (sin tocar las propiedades originales de .reveal):
   - Reveal: 700ms cubic-bezier para `opacity` y `transform` (como el original .reveal)
   - Hover: 150ms ease para `scale` (snappy, no compite con el reveal)
   - La propiedad `scale` (Transforma Level 2) es INDEPENDIENTE de `transform`,
     por lo que el hover puede tener su propio timing sin afectar el reveal.
   - Esto satisface: reveal largo + suave como antes + hover rápido. */
#como-funciona .journey__step {
  transition-property: opacity, transform, scale;
  transition-duration: 700ms, 700ms, 150ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1), cubic-bezier(0.4, 0, 0.2, 1), ease;
}

#como-funciona .journey__step:hover {
  scale: 1.05;
  z-index: 2;
}

/* --------------------------------------------------------------------------
   11. POR QUÉ NOSOTROS
   -------------------------------------------------------------------------- */
.por-que-nosotros {
  position: relative;
}

.pqn__orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  filter: blur(60px);
}

.pqn__orb--blue {
  top: -8%;
  right: -8%;
  width: clamp(400px, 50vw, 700px);
  height: clamp(400px, 50vw, 700px);
  background: radial-gradient(circle, rgba(91, 164, 255, 0.55) 0%, transparent 65%);
  opacity: 0.12;
}

.pqn__orb--teal {
  bottom: -10%;
  left: -6%;
  width: clamp(280px, 30vw, 420px);
  height: clamp(280px, 30vw, 420px);
  background: radial-gradient(circle, rgba(45, 212, 191, 0.6) 0%, transparent 65%);
  opacity: 0.08;
}

.pqn__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
  max-width: 1100px;
  margin-inline: auto;
  position: relative;
  z-index: 1;
}

@media (min-width: 1024px) {
  .pqn__grid {
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
  }
}

/* Columna izquierda — bloque editorial con borde teal */
.pqn__editorial {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.pqn__editorial-text {
  border-left: 2px solid var(--color-teal-light);
  padding-left: var(--space-5);
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
}

@media (min-width: 1024px) {
  .pqn__editorial-text {
    padding-left: var(--space-8);
  }
}

.pqn__title {
  margin-top: var(--space-3);
}

.pqn__accent {
  background: var(--gradient-text-accent);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.pqn__paragraph {
  font-size: var(--fs-base);
  line-height: 1.7;
  color: var(--color-text-on-dark);
  margin-top: var(--space-5);
  margin-bottom: 0;
  max-width: 56ch;
}

.pqn__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  padding: 0;
  margin: 0;
}

.pqn__tag {
  display: inline-block;
  padding: 0.4rem 0.9rem;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--color-teal-light);
  background: rgba(45, 212, 191, 0.06);
  border: 1px solid rgba(45, 212, 191, 0.3);
  border-radius: var(--radius-full);
  line-height: 1.4;
  letter-spacing: -0.005em;
  transition: all var(--transition-base);
}

.pqn__tag:hover {
  background: rgba(45, 212, 191, 0.12);
  border-color: rgba(45, 212, 191, 0.5);
}

/* Columna derecha — métricas + logos + caso */
.pqn__evidence {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

@media (min-width: 1024px) {
  .pqn__evidence {
    gap: var(--space-8);
  }
}

/* Métricas — 3 columnas glassmorphism */
.pqn__metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  list-style: none;
  padding: 0;
  margin: 0;
}

.pqn__metric {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-4) var(--space-2);
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(244, 245, 247, 0.08);
  border-radius: var(--radius-2xl);
  transition: border-color var(--transition-base), transform var(--transition-base);
}

.pqn__metric:hover {
  border-color: rgba(45, 212, 191, 0.25);
  transform: translateY(-2px);
}

.pqn__metric-num {
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
  font-weight: 700;
  background: var(--gradient-text-accent);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--space-1);
}

.pqn__metric-label {
  font-size: 1rem;
  color: var(--color-text-on-dark-muted);
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: 0.01em;
  margin-top: 5px;
}

/* Divisor sutil entre métricas y logos */
.pqn__divider {
  border: 0;
  height: 2.5px;
  background: linear-gradient(90deg, transparent, rgba(45, 212, 191, 0.2), transparent);
  margin: 0;
}

/* Logos — grid 2x4 mobile / 3x3 desktop (filas: 1-3, 4-6, 7) */
.pqn__logos-label {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-text-on-dark-subtle);
  font-weight: 600;
  text-align: center;
  margin: 0 0 var(--space-5);
  background: var(--gradient-text-accent);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

@media (min-width: 1024px) {
  .pqn__logos-label {
    font-size: 1.05em;
  }
}

.pqn__logos-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6) var(--space-3);
  list-style: none;
  padding: 0;
  margin: 0;
}

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

@media (min-width: 1024px) {
  .pqn__logos-grid {
    margin-top: 35px;
  }
}

.pqn__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
}

.pqn__logo img {
  display: block;
  width: 100%;
  max-width: 180px;
  height: auto;
  opacity: 0.78;
  transition: opacity var(--transition-base), transform var(--transition-base);
}

.pqn__logo img:hover {
  opacity: 1;
  transform: scale(1.05);
}

/* Caso narrado — card azul traslúcido + comilla + texto italic */
.pqn__case {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-6);
  background: rgba(27, 110, 243, 0.07);
  border: 1px solid rgba(91, 164, 255, 0.14);
  border-radius: var(--radius-2xl);
  margin: 0;
}

.pqn__case.reveal.is-visible {
  margin-top: 20px;
}

.pqn__case-mark {
  font-family: var(--font-heading);
  font-size: 2.5rem;
  line-height: 0.8;
  font-weight: 700;
  color: var(--color-teal-light);
  flex-shrink: 0;
  opacity: 0.7;
  user-select: none;
  margin-top: -4px;
}

.pqn__case-text {
  font-size: 0.9375rem;
  font-style: italic;
  line-height: 1.5;
  color: var(--color-text-on-dark-muted);
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}

@media (min-width: 1024px) {
  .pqn__case-text {
    font-size: 1rem;
  }
}

.pqn__case-text strong {
  color: var(--color-text-on-dark);
  font-weight: 600;
  font-style: normal;
}

/* --------------------------------------------------------------------------
   12. CTA FINAL
   -------------------------------------------------------------------------- */
.contact-methods {
  max-width: 680px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.contact-whatsapp {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-10) var(--space-8);
  background:
    radial-gradient(ellipse at top, rgba(37, 211, 102, 0.08) 0%, transparent 60%),
    linear-gradient(135deg, rgba(20, 40, 71, 0.6) 0%, rgba(11, 21, 48, 0.8) 100%);
  border-radius: var(--radius-2xl);
  border: 1px solid rgba(37, 211, 102, 0.2);
  position: relative;
  overflow: hidden;
}
.contact-whatsapp::before {
  content: '';
  position: absolute;
  top: -1px; left: 50%;
  transform: translateX(-50%);
  width: 40%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #25D366, transparent);
}
.contact-whatsapp p {
  font-size: var(--fs-base);
  color: var(--color-text-on-dark-muted);
  margin: 0;
}

.contact-form {
/*   background:
    radial-gradient(ellipse at top, rgba(45, 212, 191, 0.1) 0%, transparent 60%),
    linear-gradient(135deg, rgba(20, 40, 71, 0.6) 0%, rgba(11, 21, 48, 0.8) 100%);
  border-radius: var(--radius-2xl);
  border: 1px solid rgba(45, 212, 191, 0.18);
  padding: var(--space-8) var(--space-8);
  text-align: left;
  overflow: hidden; */
  position: relative;
}

/* .contact-form::before {
  content: '';
  position: absolute;
  top: -1px; left: 50%;
  transform: translateX(-50%);
  width: 40%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--color-teal-light), transparent);
} */

.contact-form__title {
  /* font-size: var(--fs-lg); */
  font-weight: 600;
  margin-bottom: var(--space-6);
  text-align: center;
  color: var(--color-text-on-dark);
}

/* --------------------------------------------------------------------------
   13. FORM
   -------------------------------------------------------------------------- */
.form-group { margin-bottom: 0; }
.form-group--honeypot {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.form-label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 500;
  margin-bottom: var(--space-2);
  color: var(--color-text-on-dark);
}
.form-label__required { color: var(--color-teal-light); }

.form-input,
.form-textarea,
.form-select {
  width: 100%;
  padding: 0.85rem 1.1rem;
  background: rgba(11, 21, 48, 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1.5px solid rgba(45, 212, 191, 0.15);
  border-radius: var(--radius-md);
  color: var(--color-text-on-dark);
  font-size: var(--fs-base);
  transition: all var(--transition-fast);
  font-family: inherit;
}
.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--color-text-on-dark-subtle);
}
.form-input:hover,
.form-textarea:hover,
.form-select:hover {
  border-color: rgba(45, 212, 191, 0.4);
  background-color: rgba(11, 21, 48, 0.6);
}
.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  outline: none;
  border-color: var(--color-teal-light);
  background-color: rgba(11, 21, 48, 0.7);
  box-shadow: 0 0 0 4px rgba(45, 212, 191, 0.15);
}
.form-input.is-invalid,
.form-textarea.is-invalid,
.form-select.is-invalid {
  border-color: var(--color-error);
  background-color: var(--color-error-bg);
}
.form-input.is-valid,
.form-textarea.is-valid,
.form-select.is-valid {
  border-color: var(--color-success);
}
.form-textarea {
  resize: vertical;
  min-height: 120px;
}
.form-select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%232DD4BF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 16px;
  padding-right: 2.5rem;
  cursor: pointer;
}
.form-select option {
  background-color: var(--color-bg-dark);
  color: var(--color-text-on-dark);
}

.form-error {
  display: block;
  font-size: var(--fs-xs);
  color: var(--color-error);
  margin-top: var(--space-2);
  min-height: 1.25em;
  font-weight: 500;
}

.form-checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  cursor: pointer;
  user-select: none;
}
.form-checkbox input { position: absolute; opacity: 0; pointer-events: none; }
.form-checkbox__box {
  flex-shrink: 0;
  width: 22px; height: 22px;
  border: 1.5px solid rgba(45, 212, 191, 0.4);
  border-radius: var(--radius-sm);
  background: rgba(11, 21, 48, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
  margin-top: 2px;
}
.form-checkbox__box svg {
  width: 14px; height: 14px;
  color: white;
  opacity: 0;
  transition: opacity var(--transition-fast);
}
.form-checkbox input:checked + .form-checkbox__box {
  background: var(--gradient-primary);
  border-color: var(--color-teal);
}
.form-checkbox input:checked + .form-checkbox__box svg { opacity: 1; }
.form-checkbox input:focus-visible + .form-checkbox__box {
  outline: 2px solid var(--color-teal-light);
  outline-offset: 2px;
}
.form-checkbox__label {
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--color-text-on-dark-muted);
}
.form-checkbox__label a {
  color: var(--color-teal-light);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.form-checkbox__label a:hover { color: var(--color-text-on-dark); }

.form-submit {
  margin-top: var(--space-6);
  width: 100%;
  position: relative;
}
.form-submit:disabled,
.form-submit[aria-disabled="true"] {
  background: rgba(244, 245, 247, 0.08);
  color: rgba(244, 245, 247, 0.4);
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}
.form-submit:disabled:hover,
.form-submit[aria-disabled="true"]:hover {
  transform: none;
  box-shadow: none;
}
.form-submit__spinner {
  display: none;
  width: 18px; height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
.form-submit.is-loading .form-submit__spinner { display: inline-block; }
.form-submit.is-loading .form-submit__text { visibility: hidden; }

.form-feedback {
  margin-top: var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  text-align: center;
  display: none;
  font-weight: 500;
}
.form-feedback.is-visible { display: block; }

/* --------------------------------------------------------------------------
   14. FOOTER
   -------------------------------------------------------------------------- */
.footer {
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(45, 212, 191, 0.1) 0%, transparent 60%),
    linear-gradient(180deg, var(--color-bg-dark-2) 0%, #060E1F 100%);
  color: var(--color-text-on-dark);
  padding-block: var(--space-16) var(--space-8);
  border-top: 1px solid rgba(45, 212, 191, 0.12);
  position: relative;
}
.footer::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-teal-light), transparent);
}

.footer__main {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10);
  margin-bottom: var(--space-12);
}

.footer__brand { 
  max-width: 360px;
  padding-right: 15px; 
}

.footer__logo {
  display: flex;
  align-items: center;
  height: 45px;
  margin-bottom: var(--space-4);
}
.footer__logo img { height: 100%; width: auto; }

.footer__tagline {
  font-size: var(--fs-sm);
  color: var(--color-text-on-dark-muted);
  line-height: 1.6;
  margin-bottom: var(--space-6);
}

.footer__nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.footer__nav-title {
  font-size: var(--fs-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: var(--gradient-text-accent);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  margin-bottom: var(--space-2);
}
.footer__nav-link {
  font-size: var(--fs-sm);
  color: var(--color-text-on-dark-muted);
  transition: color var(--transition-fast);
}
.footer__nav-link:hover {
  color: var(--color-teal-light);
  padding-left: 4px;
}

.footer__contact {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.footer__contact-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fs-sm);
  color: var(--color-text-on-dark-muted);
  transition: color var(--transition-fast);
}
.footer__contact-item:hover { color: var(--color-teal-light); }
.footer__contact-item svg {
  width: 20px; height: 20px;
  flex-shrink: 0;
  color: var(--color-teal-light);
}

.footer__location {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.footer__location-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.footer__location-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  color: var(--color-text-on-dark-muted);
  line-height: 1.4;
}
.footer__location-item svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--color-teal-light);
}
.footer__location-text {
  font-size: var(--fs-sm);
  color: var(--color-text-on-dark-muted);
  line-height: 1.4;
  margin: 0;
}

.footer__bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding-top: var(--space-6);
  border-top: 1px solid rgba(45, 212, 191, 0.1);
  text-align: center;
}
.footer__copyright {
  font-size: var(--fs-xs);
  color: var(--color-text-on-dark-subtle);
}
.footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: center;
}
.footer__legal-link {
  font-size: var(--fs-xs);
  color: var(--color-text-on-dark-muted);
  transition: color var(--transition-fast);
}
.footer__legal-link:hover { color: var(--color-teal-light); }
.footer__legal-link--button {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
}
.footer__legal-link--button:focus-visible {
  outline: 2px solid var(--color-teal-light);
  outline-offset: 2px;
  border-radius: 2px;
}

/* --------------------------------------------------------------------------
   15. ANIMACIONES
   -------------------------------------------------------------------------- */
@keyframes spin { to { transform: rotate(360deg); } }

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.2); }
}

@keyframes float {
  0%, 100% { transform: translate(0, 0); }
  33% { transform: translate(30px, -40px); }
  66% { transform: translate(-20px, 20px); }
}

@keyframes floatTag {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 700ms cubic-bezier(0.4, 0, 0.2, 1), transform 700ms cubic-bezier(0.4, 0, 0.2, 1);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal--delay-1 { transition-delay: 80ms; }
.reveal--delay-2 { transition-delay: 160ms; }
.reveal--delay-3 { transition-delay: 240ms; }
.reveal--delay-4 { transition-delay: 320ms; }
.reveal--delay-5 { transition-delay: 400ms; }

/* --------------------------------------------------------------------------
   16. RESPONSIVE — TABLET (≥640px)
   -------------------------------------------------------------------------- */
@media (min-width: 640px) {
  .services { grid-template-columns: repeat(2, 1fr); }
  .footer__main {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-3);
    margin-inline: auto;
    text-align: left;
  }
  .footer__bottom {
    flex-direction: row;
    justify-content: space-between;
  }
}

/* --------------------------------------------------------------------------
   17. RESPONSIVE — MOBILE (menor a 640px)
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .hero::after{
    background-position:
    6% 93%,
    85% 60%,
    61% 32%,
    19% 8%;
    background-size: 300px, 180px, 240px, 300px;
  }
/*   .footer__main {
    max-width: 360px;
    margin-inline: auto;
    text-align: left;
  } */
}

/* --------------------------------------------------------------------------
   18. RESPONSIVE — DESKTOP (≥1024px)
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  .hero { min-height: 100vh; }
  .hero__inner {
    grid-template-columns: 1.1fr 1fr;
    gap: var(--space-16);
  }
  .hero__content {
    text-align: left;
    margin-inline: 0;
  }
  .hero__sub { margin-inline: 0; }
  .hero__ctas { justify-content: flex-start; }
  .hero__trust { justify-content: flex-start; }
  .hero__visual { display: block; }

  .services { grid-template-columns: repeat(3, 1fr); }

  .footer__main {
    grid-template-columns: 1.4fr 1fr 1fr 1.1fr;
    gap: var(--space-10);
    max-width: none;
  }
}

/* --------------------------------------------------------------------------
   19. RESPONSIVE — NAVBAR TOGGLE
   -------------------------------------------------------------------------- */
@media (max-width: 1023.98px) {
  .navbar__menu { display: none; }
  .navbar__toggle { display: flex; }
}

/* --------------------------------------------------------------------------
   20. REDUCED MOTION
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   21. PRINT
   -------------------------------------------------------------------------- */
@media print {
  .navbar, .drawer, .overlay, .hero__ctas, .contact-whatsapp, .contact-form, .footer__nav, .footer__legal { display: none !important; }
  body { color: black; background: white; }
  .section--dark { background: white; color: black; }
}

/* === CTA final / Contacto === */
.cta__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
  max-width: 1100px;
  margin-inline: auto;
}

@media (min-width: 1024px) {
  .cta__grid {
    grid-template-columns: 0.85fr 1fr;
    gap: 4.5rem;
    align-items: start;
  }
}

/* Columna izquierda — intro + WhatsApp + bullets */
.cta__intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.cta__lede {
  font-size: var(--fs-base);
  line-height: 1.65;
  color: var(--color-text-on-dark-muted);
  margin: 0;
  max-width: 48ch;
}

.cta__accent {
  background: var(--gradient-text-accent);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Botón WhatsApp con sombra azul (lo distingue del botón verde del hero) */
.btn--whatsapp-cta {
  box-shadow: 0 10px 30px -10px rgba(27, 110, 243, 0.5);
}
.btn--whatsapp-cta:hover {
  box-shadow: 0 15px 40px -10px rgba(27, 110, 243, 0.6);
}

.cta__whatsapp-btn {
  margin-top: 0;
}

/* Wrapper grid para los 2 botones del CTA (WhatsApp + Email) side-by-side */
.cta__buttons {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin-top: var(--space-3);
  align-items: stretch;
}
@media (min-width: 640px) {
  .cta__buttons {
    grid-template-columns: 1fr 1fr;
  }
}

/* Botón "Escribir correo" — variante .btn--secondary con icono de sobre.
   Hereda glassmorphism + border + transform del .btn--secondary base. */
.cta__email-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  /* .btn--secondary ya aporta background, backdrop-filter, border, hover.
     Solo afinamos el icono para que combine con el de WhatsApp. */
}
.cta__email-btn .btn__icon {
  color: var(--color-teal-light);
}

/* Divisor "— o completa el formulario —" */
.cta__divider {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-4) 0;
}

.cta__divider-line {
  flex: 1;
  height: 1px;
  background: rgba(244, 245, 247, 0.15);
}

.cta__divider-text {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-text-on-dark-subtle);
  font-weight: 500;
  white-space: nowrap;
}

/* Bullets de confianza */
.cta__bullets {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.cta__bullet {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fs-base);
  color: var(--color-text-on-dark);
  line-height: 1.4;
}

.cta__bullet-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-teal-light);
  flex-shrink: 0;
  box-shadow: 0 0 8px rgba(45, 212, 191, 0.5);
}

/* Label "(opcional)" — menor peso y opacidad */
.form-label__optional {
  opacity: 0.55;
  font-weight: 400;
}

/* Filas de 2 columnas para los primeros 4 campos (desktop) */
.form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

#first-row {
  margin-top: 40px;
}

@media (min-width: 1024px) {
  .form-row {
    grid-template-columns: 1fr 1fr;
    gap: 0 var(--space-5);
  }
}

.form-row .form-group {
  margin-bottom: 0;
}

/* Ajustes de spacing en el nuevo acomodo del form */
.contact-form .contact-form__title {
  margin-bottom: 0;
}

/* Subtítulo del form (debajo del título) */
.contact-form__subtitle {
  font-size: var(--fs-sm);
  color: var(--color-text-on-dark-muted);
  text-align: center;
  margin: 0;
}

/* Nota pequeña debajo del botón submit */
.contact-form__note {
  font-size: var(--fs-xs);
  color: var(--color-text-on-dark-subtle);
  text-align: center;
  margin: 0;
}

.contact-form__note--privacy a {
  color: var(--color-teal-light);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--transition-fast);
}
.contact-form__note--privacy a:hover {
  color: var(--color-text-on-dark);
}

/* === Botones flotantes === */
.floating-actions {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 999;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  pointer-events: none;
}

.floating-actions > * {
  pointer-events: auto;
}

/* --- WhatsApp flotante --- */
.floating-whatsapp {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--gradient-primary);
  box-shadow: 0 4px 20px rgba(27, 110, 243, 0.35);
  text-decoration: none;
  color: #fff;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 250ms ease, transform 250ms ease;
}

.floating-whatsapp.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.floating-whatsapp__icon {
  width: 28px;
  height: 28px;
  display: block;
  position: relative;
  z-index: 1;
}

.floating-whatsapp.is-visible:hover,
.floating-whatsapp.is-visible:focus-visible {
  transform: translateY(0) scale(1.08);
}

.floating-whatsapp.is-visible:focus-visible {
  outline: 2px solid var(--color-teal-light);
  outline-offset: 3px;
}

/* Anillo de pulso (expansión exterior) */
.floating-whatsapp::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(20, 184, 166, 0.5);
  transform: scale(1);
  opacity: 0.4;
  animation: floating-whatsapp-pulse 2.5s ease-out infinite;
  pointer-events: none;
}

/* Tooltip "Escríbenos" — aparece a la izquierda en hover (desktop) */
.floating-whatsapp__tooltip {
  position: absolute;
  right: calc(100% + 0.75rem);
  top: 50%;
  transform: translateY(-50%);
  background: rgba(11, 11, 53, 0.85);
  color: #fff;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 500;
  padding: 0.375rem 0.625rem;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-base);
}

.floating-whatsapp:hover .floating-whatsapp__tooltip,
.floating-whatsapp:focus-visible .floating-whatsapp__tooltip {
  opacity: 1;
}

/* --- Botón "ir arriba" (go-up) --- */
.floating-goup {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(11, 21, 48, 0.85);
  border: 1px solid rgba(45, 212, 191, 0.22);
  backdrop-filter: blur(10px) saturate(180%);
  -webkit-backdrop-filter: blur(10px) saturate(180%);
  color: rgba(255, 255, 255, 0.9);
  cursor: pointer;
  padding: 0;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 250ms ease, transform 250ms ease, background-color var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
}

.floating-goup.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.floating-goup:hover {
  background: rgba(11, 21, 48, 0.92);
  border-color: rgba(45, 212, 191, 0.45);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3);
}

.floating-goup:focus-visible {
  outline: 2px solid var(--color-teal-light);
  outline-offset: 2px;
  background: rgba(11, 21, 48, 0.92);
  border-color: rgba(45, 212, 191, 0.45);
}

.floating-goup__icon {
  width: 18px;
  height: 18px;
  display: block;
}

/* --- Animaciones compartidas --- */
@keyframes floating-whatsapp-pulse {
  0% {
    transform: scale(1);
    opacity: 0.4;
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

/* --- Mobile (<640px) --- */
@media (max-width: 639px) {
  .floating-actions {
    bottom: 1.25rem;
    right: 1.25rem;
    gap: 0.65rem;
  }
  .floating-whatsapp {
    width: 50px;
    height: 50px;
  }
  .floating-whatsapp__icon {
    width: 24px;
    height: 24px;
  }
  .floating-whatsapp__tooltip {
    display: none;
  }
  .floating-goup {
    width: 40px;
    height: 40px;
  }
}

/* --- prefers-reduced-motion: desactivar pulso + animaciones de entrada/salida --- */
@media (prefers-reduced-motion: reduce) {
  .floating-whatsapp,
  .floating-whatsapp::after,
  .floating-goup {
    animation: none;
    transition-duration: 0.01ms;
  }
  .floating-whatsapp.is-visible {
    transform: translateY(0);
    opacity: 1;
  }
  .floating-whatsapp::after {
    display: none;
  }
  .floating-goup.is-visible {
    transform: translateY(0);
  }
}

/* === Secciones dark separadas por FAQ ===
   Antes #por-que-nosotros y #contacto compartían un <div class="dark-sections-wrapper">
   que renderizaba el gradiente una sola vez para evitar la "costura" visual.
   Con la FAQ entre ambas (sección clara que las separa), las dos secciones
   vuelven a ser independientes con su propio background.

   - #por-que-nosotros: gradiente dark simple (#0B1530 → #0A1A38) — cierre
     neutro antes de pasar a la FAQ clara.
   - #contacto: gradiente dark que termina en teal (#0B1530 → #0A1A38 → #0A4055),
     con el mesh reforzado en la parte baja para destacar el cierre teal que
     da paso al footer. */

/* Por qué nosotros — gradiente dark simple (era el de #contacto) */
#por-que-nosotros {
  background:
    var(--gradient-mesh-dark),
    linear-gradient(180deg, var(--color-bg-dark) 0%, var(--color-bg-dark-2) 100%);
}

/* Contacto — gradiente con teal al final + mesh reforzado en la parte baja.
   Comparte los 5 radiales originales de --gradient-mesh-dark, pero los dos
   teal inferiores se refuerzan ligeramente (0.08 → 0.12) y se añade un
   radial teal centrado en el borde inferior (0.14) para que el cierre teal
   se sienta más presente sin alterar la paleta ni la estructura del mesh. */
#contacto {
  background:
    radial-gradient(at 15% 15%, rgba(45, 212, 191, 0.10) 0px, transparent 50%),
    radial-gradient(at 85% 10%, rgba(91, 164, 255, 0.12) 0px, transparent 50%),
    radial-gradient(at 50% 50%, rgba(20, 184, 166, 0.06) 0px, transparent 50%),
    radial-gradient(at 10% 90%, rgba(27, 110, 243, 0.10) 0px, transparent 50%),
    radial-gradient(at 50% 100%, rgba(45, 212, 191, 0.14) 0px, transparent 55%),
    radial-gradient(at 90% 85%, rgba(45, 212, 191, 0.12) 0px, transparent 55%),
    linear-gradient(180deg, var(--color-bg-dark) 0%, var(--color-bg-dark-2) 50%, #0A4055 100%);
}

/* --------------------------------------------------------------------------
   FAQ — Preguntas frecuentes
   - Layout 2 columnas que replica el patrón de #problema: listado a la
     izquierda + intro sticky a la derecha. El footer "¿Tienes otra duda?"
     vive dentro del intro column para que quede visible mientras el usuario
     recorre el listado. El DOM mantiene intro antes que list para mejor
     orden de lectura en screen readers; el swap visual se hace por CSS.
   - Breakpoints (siguiendo el patrón de #problema):
     < 640px  → 1 columna apilada, intro arriba, list debajo (centrado)
     ≥ 640px  → grid 2 columnas (list 640 izq / intro 360 der, gap --space-10)
     ≥ 1024px → grid 2 columnas (list 640 izq / intro 440 der, gap --space-12),
                intro pasa a position: sticky
     < 455px  → padding-inline de respiro (móvil muy pequeño)
   - Sin JS: <details name="..."> exclusive accordion nativo (Chrome 120+,
     FF 123+, Safari 17.2+). En navegadores antiguos los items se acumulan
     abiertos, lo cual es una graceful degradation aceptable.
   - Visual compactado respecto al diseño original (sin perder la identidad):
     número y chevron más pequeños, padding interno de las cards reducido,
     fuente de pregunta/respuesta en tamaño compacto (0.875rem / 0.9375rem
     en desktop), sin cambios en los signature elements (gradient number
     monogram, chevron rotativo, border teal, hover lift, open state con
     box-shadow reforzado).
   -------------------------------------------------------------------------- */

.faq {
  position: relative;
  overflow: hidden;
}

.faq::before {
  content: '';
  position: absolute;
  top: 12%;
  right: -8%;
  width: 380px;
  height: 380px;
  background: radial-gradient(circle, rgba(91, 164, 255, 0.08) 0%, transparent 70%);
  filter: blur(40px);
  z-index: 0;
  pointer-events: none;
}

.faq::after {
  content: '';
  position: absolute;
  bottom: 8%;
  left: -6%;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(45, 212, 191, 0.08) 0%, transparent 70%);
  filter: blur(40px);
  z-index: 0;
  pointer-events: none;
}

.faq > .container {
  position: relative;
  z-index: 1;
}

/* === Layout === */
/* Default (< 640px): flex column, intro arriba, list debajo, centrado */
.faq__layout {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-8);
}

.faq__intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  text-align: center;
}

.faq__accent {
  background: var(--gradient-text-accent);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* === List === */
/* Nota: ya no lleva max-width ni margin-inline auto — el grid controla el ancho. */
.faq__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.faq__item {
  position: relative;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.6) 100%);
  border: 1px solid rgba(45, 212, 191, 0.18);
  border-radius: var(--radius-2xl);
  overflow: hidden;
  transition:
    border-color var(--transition-base),
    background var(--transition-base),
    box-shadow var(--transition-base),
    transform var(--transition-base);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.faq__item:hover {
  border-color: rgba(45, 212, 191, 0.4);
  box-shadow: 0 8px 24px -12px rgba(27, 110, 243, 0.15);
  transform: translateY(-1px);
}

.faq__item[open] {
  border-color: rgba(45, 212, 191, 0.55);
  background: linear-gradient(180deg, #ffffff 0%, rgba(244, 245, 247, 0.85) 100%);
  box-shadow:
    0 10px 30px -12px rgba(20, 184, 166, 0.18),
    0 0 0 1px rgba(45, 212, 191, 0.08);
}

/* Summary: trigger de open/close — compactado */
.faq__question {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  cursor: pointer;
  list-style: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.faq__question::-webkit-details-marker {
  display: none;
}

.faq__question::marker {
  display: none;
  content: '';
}

/* Focus visible accesible (teclado) */
.faq__question:focus-visible {
  outline: 2px solid var(--color-teal-light);
  outline-offset: -2px;
  border-radius: calc(var(--radius-2xl) - 2px);
}

/* Number monogram — compactado (signature element preservado) */
.faq__num {
  flex-shrink: 0;
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  background: var(--gradient-text-accent);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  opacity: 0.45;
  transition: opacity var(--transition-base), transform var(--transition-base);
  min-width: 1.75rem;
  font-variant-numeric: tabular-nums;
}

.faq__item:hover .faq__num,
.faq__item[open] .faq__num {
  opacity: 1;
}

.faq__item[open] .faq__num {
  transform: scale(1.08);
}

/* Question text — compactado (2da ronda) */
.faq__q-text {
  flex: 1;
  font-family: var(--font-heading);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--color-text-on-light);
  letter-spacing: -0.01em;
}

@media (min-width: 1024px) {
  .faq__q-text {
    font-size: 0.9375rem;
  }
}

/* Chevron — compactado */
.faq__chevron {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(45, 212, 191, 0.1);
  color: var(--color-teal-light);
  transition:
    transform var(--transition-base),
    background var(--transition-base);
}

.faq__chevron svg {
  width: 16px;
  height: 16px;
}

.faq__item[open] .faq__chevron {
  transform: rotate(180deg);
  background: rgba(45, 212, 191, 0.2);
}

/* Answer — compactado */
.faq__answer {
  padding: 0 var(--space-5) var(--space-4);
  margin-left: calc(1.75rem + var(--space-3));
  animation: faq-fade 280ms ease-out;
}

@keyframes faq-fade {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.faq__answer p {
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--color-text-on-light-muted);
  margin: 0;
  padding-top: var(--space-2);
  border-top: 1px solid rgba(45, 212, 191, 0.15);
}

@media (prefers-reduced-motion: reduce) {
  .faq__answer { animation: none; }
  .faq__item, .faq__num, .faq__chevron { transition: none; }
}

/* Footer link dentro del intro column (centrado en mobile, izquierda en desktop) */
.faq__footer {
  margin-top: var(--space-4);
  font-size: var(--fs-sm);
  color: var(--color-text-on-light-muted);
}

.faq__footer-link {
  color: var(--color-teal-light);
  font-weight: 600;
  text-decoration: none;
  background: linear-gradient(180deg, transparent 60%, rgba(45, 212, 191, 0.18) 60%);
  transition: background-size var(--transition-base), color var(--transition-base);
  background-size: 0% 100%;
  background-repeat: no-repeat;
}

.faq__footer-link:hover,
.faq__footer-link:focus-visible {
  color: var(--color-teal);
  background-size: 100% 100%;
  outline: none;
}

/* === Breakpoints === */

/* 640px+: grid 2 columnas (list izq, intro der), intro a la derecha.
   El DOM mantiene intro antes que list (mejor orden de lectura para screen
   readers); el swap visual se hace aquí invirtiendo grid-template-areas y
   el orden de las tracks. En mobile (< 640px) el flex column pone el intro
   arriba y el list debajo, que es justo el orden que pidió el owner. */
@media (min-width: 640px) {
  .faq__layout {
    display: grid;
    grid-template-columns: minmax(0, 640px) minmax(0, 360px);
    grid-template-areas: "list intro";
    column-gap: var(--space-10);
    row-gap: 0;
    justify-content: center;
    align-items: start;
  }

  .faq__intro {
    grid-area: intro;
    text-align: left;
  }

  .faq__list {
    grid-area: list;
  }
}

/* 1024px+: intro pasa a position: sticky y la columna se ensancha un poco */
@media (min-width: 1024px) {
  .faq__layout {
    grid-template-columns: minmax(0, 640px) minmax(0, 440px);
    column-gap: var(--space-12);
  }

  .faq__intro {
    position: sticky;
    top: calc(var(--navbar-height) + var(--space-8));
    align-self: start;
  }
}

/* Móvil muy pequeño (< 455px): padding-inline de respiro (sigue el patrón de #problema) */
@media (max-width: 454.98px) {
  .faq__layout {
    padding-inline: 1rem;
  }
}

/* --------------------------------------------------------------------------
   20. COOKIE BANNER & MODAL (LFPDPPP)
   --------------------------------------------------------------------------
   Banner full-width al pie, glassmorphism dark consistente con la marca.
   Modal de rechazo con backdrop + countdown. Body scroll lock cuando el
   modal está abierto. prefers-reduced-motion: reduce desactiva transiciones.
   -------------------------------------------------------------------------- */

/* === Banner inferior full-width === */
.cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 400;
  background: linear-gradient(180deg, rgba(11, 21, 48, 0.92) 0%, rgba(6, 14, 31, 0.96) 100%);
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  border-top: 1px solid rgba(45, 212, 191, 0.28);
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.35);
  transform: translateY(100%);
  transition: transform 400ms cubic-bezier(0.2, 0.8, 0.2, 1);
  padding: var(--space-4) 0;
}

.cookie-banner.is-visible {
  transform: translateY(0);
}

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

.cookie-banner__text {
  flex: 1 1 480px;
  min-width: 0;
}

.cookie-banner__title {
  font-family: var(--font-heading);
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--color-text-on-dark);
  margin: 0 0 var(--space-1);
  letter-spacing: -0.005em;
}

.cookie-banner__desc {
  font-size: var(--fs-sm);
  color: var(--color-text-on-dark-muted);
  line-height: 1.5;
  margin: 0;
}

.cookie-banner__desc a {
  color: var(--color-teal-light);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--transition-fast);
}

.cookie-banner__desc a:hover {
  color: var(--color-text-on-dark);
}

.cookie-banner__actions {
  display: flex;
  gap: var(--space-3);
  flex-shrink: 0;
}

.cookie-banner__btn {
  padding: var(--space-2) var(--space-5);
  font-size: var(--fs-sm);
  min-width: 130px;
  white-space: nowrap;
}

/* === Modal de rechazo confirmado === */
.cookie-reject-modal {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
}

.cookie-reject-modal.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.cookie-reject-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 14, 31, 0.85);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.cookie-reject-modal__card {
  position: relative;
  max-width: 500px;
  width: 100%;
  background: linear-gradient(135deg, #0B1530 0%, #142847 100%);
  border: 1px solid rgba(45, 212, 191, 0.3);
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  box-shadow: var(--shadow-xl);
  text-align: center;
  transform: translateY(8px) scale(0.98);
  transition: transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.cookie-reject-modal.is-visible .cookie-reject-modal__card {
  transform: translateY(0) scale(1);
}

.cookie-reject-modal__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(255, 87, 87, 0.12);
  color: var(--color-error);
  margin: 0 auto var(--space-4);
}

.cookie-reject-modal__icon svg {
  width: 28px;
  height: 28px;
}

.cookie-reject-modal__title {
  font-family: var(--font-heading);
  font-size: var(--fs-xl);
  color: var(--color-text-on-dark);
  margin: 0 0 var(--space-4);
  letter-spacing: -0.01em;
}

.cookie-reject-modal__desc {
  font-size: var(--fs-base);
  color: var(--color-text-on-dark-muted);
  line-height: 1.6;
  margin: 0 0 var(--space-6);
}

.cookie-reject-modal__desc strong {
  color: var(--color-teal-light);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.cookie-reject-modal__actions {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
  flex-wrap: wrap;
}

.cookie-reject-modal__btn {
  min-width: 170px;
}

/* === Body locks y ajustes de z-index cuando el banner o modal están activos === */
body.has-reject-modal {
  overflow: hidden;
}

body.has-cookie-banner .floating-actions {
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
}

/* === Breakpoints del banner y modal === */
@media (max-width: 767.98px) {
  .cookie-banner {
    padding: var(--space-3) 0;
  }

  .cookie-banner__inner {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
  }

  .cookie-banner__actions {
    flex-direction: row-reverse;
  }

  .cookie-banner__btn {
    flex: 1;
    min-width: 0;
  }

  .cookie-reject-modal__card {
    padding: var(--space-6);
  }

  .cookie-reject-modal__actions {
    flex-direction: column-reverse;
  }

  .cookie-reject-modal__btn {
    width: 100%;
    min-width: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cookie-banner,
  .cookie-reject-modal,
  .cookie-reject-modal__card,
  body.has-cookie-banner .floating-actions {
    transition: none;
  }

  .cookie-banner {
    transform: none;
  }
}

/* ==========================================================================
   Contact toast — confirmación de copy-to-clipboard
   ==========================================================================
   Aparece abajo al centro cuando el usuario hace click en "Escribir correo".
   Muestra "Correo copiado al portapapeles" con check teal durante 2.5s.
   Glassmorphism dark consistente con la marca.
   ========================================================================== */
.contact-toast {
  position: fixed;
  bottom: var(--space-8);
  left: 50%;
  transform: translate(-50%, 16px);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  background: linear-gradient(180deg, rgba(11, 21, 48, 0.96) 0%, rgba(6, 14, 31, 0.98) 100%);
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  border: 1px solid rgba(45, 212, 191, 0.3);
  border-radius: var(--radius-full);
  color: var(--color-text-on-dark);
  font-size: var(--fs-sm);
  font-weight: 500;
  white-space: nowrap;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4), 0 0 24px rgba(45, 212, 191, 0.15);
  opacity: 0;
  pointer-events: none;
  z-index: 150;
  transition: opacity 280ms ease, transform 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.contact-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}
.contact-toast__icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--color-teal-light);
}

/* Móvil: toast más pegado al borde inferior para no chocar con FABs */
@media (max-width: 768px) {
  .contact-toast {
    bottom: var(--space-6);
    font-size: var(--fs-xs);
    padding: var(--space-2) var(--space-4);
  }
}

@media (prefers-reduced-motion: reduce) {
  .contact-toast {
    transition: none;
  }
  .contact-toast.is-visible {
    transform: translate(-50%, 0);
  }
}