/* ╔══════════════════════════════════════════════════════════╗
   ║  DOQSOFT — Home v1                                       ║
   ║  Editorial tech aesthetic                                ║
   ╚══════════════════════════════════════════════════════════╝ */

/* ─────────────────────────────────────────────
   1. DESIGN TOKENS
   ───────────────────────────────────────────── */
:root {
  /* brand */
  --color-primary: #21b65f;
  --color-primary-dark: #1a9e52;
  --color-primary-darker: #15803d;
  --color-primary-soft: #e8f7ee;
  --color-primary-tint: rgba(33, 182, 95, 0.08);

  /* Product palette — oficial 2026-05-14 (ver CLAUDE.md decisión #27) */
  --color-mps: #14b8a6;                                    /* Teal — sin cambio */
  --color-mps-soft: rgba(20, 184, 166, 0.1);
  --color-mps-dark: #0f766e;
  --color-gespage: #678dd6;                                /* Azul — Gespage on-prem primary */
  --color-gespage-soft: rgba(103, 141, 214, 0.1);
  --color-gespage-dark: #3f5fa8;
  --color-gespage-green: #96c827;                          /* Verde — Gespage accent / Stratus primary */
  --color-gespage-green-soft: rgba(150, 200, 39, 0.1);
  --color-gespage-green-dark: #6b941b;
  --color-stratus: #96c827;                                /* Alias — Stratus = verde Gespage como primary */
  --color-stratus-soft: rgba(150, 200, 39, 0.1);
  --color-stratus-dark: #6b941b;
  --color-chronoscan: #4e82b8;                             /* Azul — antes era Indigo, cambio de familia */
  --color-chronoscan-soft: rgba(78, 130, 184, 0.1);
  --color-chronoscan-dark: #2f5a8e;
  --color-docuo: #563ba2;                                  /* Morado oscuro — antes era claro */
  --color-docuo-soft: rgba(86, 59, 162, 0.1);
  --color-docuo-dark: #372475;

  /* neutrals */
  --color-ink: #0a0a0a;
  --color-ink-soft: #1a1a1a;
  --color-text: #2a2a2a;
  --color-text-muted: #6b7280;
  --color-text-light: #9ca3af;
  --color-bg: #fefefe;
  --color-bg-soft: #fafafa;
  --color-bg-cream: #f7f7f5;
  --color-border: #e5e7eb;
  --color-border-soft: #f0f0f0;

  /* type scale */
  --text-xs: 0.75rem;     /* 12 */
  --text-sm: 0.8125rem;   /* 13 */
  --text-base: 0.9375rem; /* 15 */
  --text-md: 1rem;        /* 16 */
  --text-lg: 1.125rem;    /* 18 */
  --text-xl: 1.375rem;    /* 22 */
  --text-2xl: 1.75rem;    /* 28 */
  --text-3xl: 2.25rem;    /* 36 */
  --text-4xl: 3rem;       /* 48 */
  --text-5xl: 3.75rem;    /* 60 */
  --text-6xl: 4.5rem;     /* 72 */
  --text-7xl: 5.5rem;     /* 88 */

  /* spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 1.75rem;
  --space-8: 2rem;
  --space-9: 2.25rem;
  --space-10: 2.5rem;
  --space-11: 2.75rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;
  --space-40: 10rem;

  /* radii */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-2xl: 32px;
  --r-full: 9999px;

  /* shadows */
  --shadow-sm: 0 1px 2px rgba(10, 10, 10, 0.04);
  --shadow-md: 0 4px 12px -2px rgba(10, 10, 10, 0.05), 0 2px 4px -1px rgba(10, 10, 10, 0.03);
  --shadow-lg: 0 12px 32px -8px rgba(10, 10, 10, 0.08), 0 4px 8px -2px rgba(10, 10, 10, 0.04);
  --shadow-xl: 0 24px 60px -12px rgba(10, 10, 10, 0.12), 0 8px 24px -4px rgba(10, 10, 10, 0.06);
  --shadow-glow: 0 0 0 1px rgba(33, 182, 95, 0.18), 0 12px 32px -8px rgba(33, 182, 95, 0.18);

  /* layout */
  --container: 1240px;
  --container-px: clamp(1.25rem, 4vw, 2.5rem);
  --header-h: 72px;
  --subbar-h: 52px;

  /* motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 180ms;
  --t-mid: 320ms;
  --t-slow: 600ms;
}

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

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

/* Product pages have a sticky sub-bar — extra scroll padding */
.page-product { scroll-padding-top: calc(var(--header-h) + var(--subbar-h)); }

body {
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: var(--text-md);
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'ss01', 'cv01';
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; background: none; border: 0; color: inherit; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
input, select, textarea { font: inherit; color: inherit; }

::selection { background: var(--color-primary); color: white; }

/* ─────────────────────────────────────────────
   3. TYPOGRAPHY
   ───────────────────────────────────────────── */
h1, h2, h3 {
  font-family: 'Funnel Display', serif;
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--color-ink);
}

h4, h5, h6 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--color-ink);
}

em {
  font-style: italic;
  font-family: 'Funnel Display', serif;
  font-weight: 400;
  color: var(--color-primary);
}

/* ─────────────────────────────────────────────
   4. LAYOUT PRIMITIVES
   ───────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--container-px);
  padding-right: var(--container-px);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-primary-dark);
  margin-bottom: var(--space-6);
}

.eyebrow-light { color: rgba(255, 255, 255, 0.85); }
.eyebrow-light .eyebrow-dot { background: var(--color-primary); }

.eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(33, 182, 95, 0.18);
}

.section-header {
  max-width: 720px;
  margin-bottom: var(--space-16);
}

.section-header-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  max-width: 100%;
  align-items: end;
}

@media (min-width: 900px) {
  .section-header-split {
    grid-template-columns: 1.1fr 0.9fr;
    gap: var(--space-12);
  }
}

.section-title {
  font-size: clamp(2rem, 4.6vw, 3.5rem);
  letter-spacing: -0.025em;
  line-height: 1.04;
  color: var(--color-ink);
}

.section-title-light { color: white; }

.section-sub {
  font-size: var(--text-lg);
  line-height: 1.55;
  color: var(--color-text-muted);
  margin-top: var(--space-6);
  max-width: 600px;
}

.section-sub-aside {
  margin-top: 0;
  padding-bottom: 0.6rem;
}

/* ─────────────────────────────────────────────
   5. BUTTONS
   ───────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.875rem 1.375rem;
  font-size: var(--text-base);
  font-weight: 600;
  border-radius: var(--r-full);
  letter-spacing: -0.005em;
  transition: all var(--t-fast) var(--ease-out);
  position: relative;
  white-space: nowrap;
  border: 1px solid transparent;
  cursor: pointer;
}

.btn-sm {
  padding: 0.625rem 1.125rem;
  font-size: var(--text-sm);
}

.btn-primary {
  background: var(--color-ink);
  color: white;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 8px 24px -8px rgba(10, 10, 10, 0.4);
}

.btn-primary:hover {
  background: var(--color-primary);
  transform: translateY(-1px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12) inset, 0 12px 28px -6px rgba(33, 182, 95, 0.4);
}

.btn-primary svg { transition: transform var(--t-fast) var(--ease-out); }
.btn-primary:hover svg { transform: translateX(2px); }

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

.btn-ghost:hover {
  border-color: var(--color-ink);
  background: var(--color-ink);
  color: white;
}

.btn-ghost svg { transition: transform var(--t-fast) var(--ease-out); }
.btn-ghost:hover svg { transform: translateX(2px); }

.btn-block {
  width: 100%;
  padding: 1.125rem 1.5rem;
}

/* ─────────────────────────────────────────────
   6. HEADER
   ───────────────────────────────────────────── */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: rgba(254, 254, 254, 0);
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  border-bottom: 1px solid transparent;
  transition: background var(--t-mid) var(--ease-out),
              backdrop-filter var(--t-mid) var(--ease-out),
              border-color var(--t-mid) var(--ease-out);
}

.site-header.scrolled {
  background: rgba(254, 254, 254, 0.85);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom-color: var(--color-border-soft);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: var(--space-8);
}

/* logo (uses official SVG inline) */
.logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  color: var(--color-ink);
  transition: opacity var(--t-fast) var(--ease-out);
}

.logo:hover { opacity: 0.85; }

.logo-svg {
  height: 42px;
  width: auto;
  display: block;
}

/* Logo un poco más chico en móvil para no apretar el header (el asset nuevo
   incluye tagline y es más ancho). */
@media (max-width: 640px) {
  .site-header .logo-svg { height: 36px; }
}

.logo-light { color: white; }

/* nav */
.primary-nav {
  display: none;
}

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

.primary-nav ul {
  display: flex;
  align-items: center;
  gap: 2px;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.75rem;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text);
  border-radius: var(--r-md);
  transition: color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out);
  white-space: nowrap;
}

@media (min-width: 1200px) {
  .nav-link { padding: 0.5rem 0.875rem; }
  .primary-nav ul { gap: var(--space-1); }
}

.nav-link:hover {
  color: var(--color-ink);
  background: rgba(0, 0, 0, 0.04);
}

.has-dropdown { position: relative; }
.has-dropdown .nav-link svg { transition: transform var(--t-fast) var(--ease-out); }
.has-dropdown:hover .nav-link svg { transform: rotate(180deg); }

.dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 320px;
  background: white;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-xl);
  padding: 0.5rem;
  opacity: 0;
  pointer-events: none;
  /* Out: 200ms delay before fade starts — gives the user time to "chase" the menu diagonally */
  transition: opacity 180ms var(--ease-out) 200ms,
              transform 180ms var(--ease-out) 200ms,
              visibility 0ms linear 380ms;
  visibility: hidden;
}

/* Invisible bridge that closes the gap between nav button and dropdown panel.
   Without this, the cursor crossing the 4px gap loses the :hover state. */
.dropdown::before {
  content: '';
  position: absolute;
  top: -12px;
  left: 0;
  right: 0;
  height: 12px;
  background: transparent;
}

.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
  visibility: visible;
  /* In: no delay — dropdown appears immediately on hover */
  transition: opacity 180ms var(--ease-out) 0ms,
              transform 180ms var(--ease-out) 0ms,
              visibility 0ms linear 0ms;
}

.dropdown-rich { min-width: 320px; }
.dropdown-simple { min-width: 280px; }

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.75rem;
  border-radius: var(--r-md);
  transition: background var(--t-fast) var(--ease-out);
}

.dropdown-item:hover {
  background: var(--color-bg-soft);
}

.dropdown-icon {
  position: relative;
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--c) 10%, transparent);
  color: var(--c);
  flex-shrink: 0;
  align-self: center;
  display: block;
  font-size: 0;
  line-height: 0;
  box-sizing: border-box;
}

.dropdown-icon > svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 22px;
  height: 22px;
  display: block;
}

/* Logo de producto (img) dentro del recuadro — conserva el fondo tintado (--c) */
.dropdown-icon > img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 24px;
  height: 24px;
  object-fit: contain;
  display: block;
}

.dropdown-item strong {
  display: block;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-ink);
  margin-bottom: 1px;
}

.dropdown-item span {
  display: block;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* Simple dropdown variant — no icons, tighter list */
.dropdown-link {
  display: block;
  padding: 0.625rem 0.875rem;
  border-radius: var(--r-md);
  transition: background var(--t-fast) var(--ease-out);
  position: relative;
}

.dropdown-link::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%) scaleY(0);
  width: 3px;
  height: 60%;
  background: var(--color-primary);
  border-radius: 0 var(--r-full) var(--r-full) 0;
  transition: transform var(--t-fast) var(--ease-out);
}

.dropdown-link:hover {
  background: var(--color-bg-soft);
}

.dropdown-link:hover::before {
  transform: translateY(-50%) scaleY(1);
}

.dropdown-link strong {
  display: block;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-ink);
  margin-bottom: 2px;
  transition: color var(--t-fast) var(--ease-out);
}

.dropdown-link:hover strong { color: var(--color-primary-dark); }

.dropdown-link span {
  display: block;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.4;
}

/* header actions */
.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

/* Button overrides specific to the header context — keep button proportions compact
   so it visually aligns with the nav links (which are smaller) and the shadow stays
   within the 72px header bounds without bleeding into the section below. */
.header-actions .btn-sm {
  padding: 0.5rem 1rem;
  line-height: 1.2;
  box-shadow: 0 2px 8px -2px rgba(10, 10, 10, 0.25);
}

.header-actions .btn-primary:hover {
  box-shadow: 0 4px 12px -2px rgba(33, 182, 95, 0.35);
}

.lang-switch {
  display: none;
  align-items: center;
  gap: 0.375rem;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-weight: 500;
}

@media (min-width: 768px) { .lang-switch { display: flex; } }

/* En móvil (<768px) el CTA del header es muy ancho y empuja el hamburguesa
   fuera de la pantalla. Lo ocultamos: el hero y el menú ya llevan el CTA.
   El header móvil queda como logo + hamburguesa. */
@media (max-width: 767px) {
  .header-actions .btn-sm { display: none; }
}

.lang-btn {
  padding: 4px 6px;
  border-radius: var(--r-sm);
  transition: color var(--t-fast) var(--ease-out);
}

.lang-btn.active { color: var(--color-ink); font-weight: 600; }

.menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-md);
  color: var(--color-ink);
}

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

/* ─────────────────────────────────────────────
   Mobile nav panel + accordion (< 1024px)
   Reemplaza el placeholder que dejaba TODOS los dropdowns expandidos y
   dependía del :hover del desktop (se veían blancos hasta pasar el puntero).
   Ahora cada sección colapsa por defecto y se expande al tocarla.
   ───────────────────────────────────────────── */
@media (max-width: 1023px) {
  /* NOTA: .site-header usa backdrop-filter, lo que lo convierte en el
     containing block de este position:fixed. Por eso NO usamos `bottom:0`
     (daría altura 0 dentro del header de 72px); usamos max-height + altura
     automática, que crece con el contenido y hace scroll si es largo. */
  .primary-nav.mobile-open {
    display: block;
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    max-height: calc(100vh - var(--header-h));
    background: white;
    padding: var(--space-4) var(--container-px) var(--space-10);
    border-top: 1px solid var(--color-border-soft);
    box-shadow: var(--shadow-lg);
    z-index: 99;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    animation: navSlideDown 220ms var(--ease-out);
  }

  .primary-nav.mobile-open ul {
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
  }

  .primary-nav.mobile-open .nav-link {
    width: 100%;
    justify-content: space-between;
    padding: var(--space-3);
    font-size: var(--text-md);
    border-radius: var(--r-md);
  }

  /* Dropdown colapsado por defecto; neutraliza los estilos de ocultamiento
     por hover del desktop (opacity/visibility/pointer-events). */
  .primary-nav.mobile-open .dropdown {
    position: static;
    transform: none;
    min-width: 0;
    box-shadow: none;
    border: 0;
    border-radius: var(--r-md);
    background: var(--color-bg-soft);
    padding: var(--space-2);
    margin: 2px 0 var(--space-2);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: none;
    display: none;
  }
  .primary-nav.mobile-open .dropdown::before { display: none; }
  .primary-nav.mobile-open .has-dropdown.open > .dropdown { display: block; }
  .primary-nav.mobile-open .has-dropdown.open > .nav-link svg { transform: rotate(180deg); }

  @keyframes navSlideDown {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}

/* Bloquea el scroll del fondo cuando el menú móvil está abierto */
body.nav-open { overflow: hidden; }

/* ─────────────────────────────────────────────
   7. HERO
   ───────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: calc(var(--header-h) + var(--space-16)) 0 var(--space-32);
  background: linear-gradient(180deg, #fbfdfb 0%, #f5faf6 60%, #fefefe 100%);
  overflow: hidden;
  isolation: isolate;
}

.hero-content {
  position: relative;
  z-index: 2;
}

.hero-text {
  max-width: 920px;
}

.hero-title {
  font-family: 'Funnel Display', serif;
  font-weight: 300;
  font-size: clamp(2.75rem, 7.5vw, 6rem);
  line-height: 1.2;
  letter-spacing: -0.035em;
  color: var(--color-ink);
  margin-top: var(--space-2);
  margin-bottom: var(--space-8);
  overflow: visible;
}

.hero-title em {
  font-weight: 400;
  background: linear-gradient(135deg, #21b65f 0%, #14b8a6 60%, #009384 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-style: italic;
  /* Fix WebKit bug: el gradient mask con italic clippea ascendientes/descendientes
     en algunos renders. La técnica padding-positive + margin-negative da espacio
     al inline-block para renderizar el gradiente completo, sin alterar el layout
     del texto circundante. */
  display: inline-block;
  padding: 0.2em 0.05em;
  margin: -0.2em -0.05em;
  vertical-align: baseline;
  /* Stroke transparente del color medio del gradiente sirve como fallback para
     rellenar bordes anti-aliased que el gradient mask pueda dejar sin pintar. */
  -webkit-text-stroke: 0.5px #14b8a6;
  paint-order: stroke fill;
}

.hero-sub {
  font-size: clamp(1.0625rem, 1.4vw, 1.25rem);
  line-height: 1.55;
  color: var(--color-text-muted);
  max-width: 640px;
  margin-bottom: var(--space-10);
}

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-16);
}

.hero-trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-6);
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-border-soft);
}

.trust-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.trust-item strong {
  font-family: 'Funnel Display', serif;
  font-size: var(--text-xl);
  font-weight: 400;
  color: var(--color-ink);
  letter-spacing: -0.02em;
}

.trust-item span {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  letter-spacing: 0.01em;
}

.trust-divider {
  width: 1px;
  height: 32px;
  background: var(--color-border);
  display: none;
}

@media (min-width: 768px) {
  .trust-divider { display: block; }
}

.hero-curve {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 80px;
  z-index: 3;
  pointer-events: none;
}

.hero-curve svg { width: 100%; height: 100%; display: block; }

/* HERO PRISM — the signature visual */
.hero-prism {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.prism-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.55;
  mix-blend-mode: multiply;
}

.prism-orb-1 {
  width: 620px; height: 620px;
  top: -200px; right: -120px;
  background: radial-gradient(circle, #21b65f 0%, transparent 65%);
  animation: drift1 22s ease-in-out infinite;
}

.prism-orb-2 {
  width: 480px; height: 480px;
  top: 30%; right: 15%;
  background: radial-gradient(circle, #14b8a6 0%, transparent 60%);
  opacity: 0.4;
  animation: drift2 26s ease-in-out infinite;
}

.prism-orb-3 {
  width: 540px; height: 540px;
  bottom: -180px; left: -100px;
  background: radial-gradient(circle, #d0deaa 0%, transparent 60%);
  opacity: 0.5;
  animation: drift3 30s ease-in-out infinite;
}

.prism-shard {
  position: absolute;
  border-radius: 40% 60% 30% 70% / 60% 40% 60% 40%;
  background: linear-gradient(135deg,
    rgba(33, 182, 95, 0.12) 0%,
    rgba(20, 184, 166, 0.08) 50%,
    rgba(208, 222, 170, 0.06) 100%);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow:
    inset 0 1px 2px rgba(255, 255, 255, 0.7),
    inset 0 -10px 30px rgba(33, 182, 95, 0.08),
    0 30px 60px -20px rgba(33, 182, 95, 0.18);
}

.prism-shard-1 {
  width: 320px; height: 280px;
  top: 18%; right: 8%;
  transform: rotate(-12deg);
  animation: float1 18s ease-in-out infinite;
}

.prism-shard-2 {
  width: 220px; height: 280px;
  top: 42%; right: 32%;
  border-radius: 60% 40% 70% 30% / 40% 60% 30% 70%;
  transform: rotate(20deg);
  background: linear-gradient(135deg,
    rgba(0, 147, 132, 0.1) 0%,
    rgba(33, 182, 95, 0.08) 100%);
  animation: float2 22s ease-in-out infinite;
}

.prism-shard-3 {
  width: 180px; height: 220px;
  top: 8%; right: 38%;
  border-radius: 50% 50% 40% 60% / 60% 40% 50% 50%;
  transform: rotate(-30deg);
  background: linear-gradient(135deg,
    rgba(208, 222, 170, 0.18) 0%,
    rgba(255, 255, 255, 0.4) 100%);
  animation: float3 16s ease-in-out infinite;
}

.prism-core {
  position: absolute;
  width: 12px;
  height: 12px;
  top: 35%;
  right: 22%;
  border-radius: 50%;
  background: white;
  box-shadow:
    0 0 30px 8px rgba(33, 182, 95, 0.6),
    0 0 60px 24px rgba(33, 182, 95, 0.3),
    0 0 100px 40px rgba(33, 182, 95, 0.15);
  animation: pulse 3s ease-in-out infinite;
}

.prism-grid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.5;
}

.prism-grain {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.4 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.06;
  mix-blend-mode: multiply;
  pointer-events: none;
}

@keyframes drift1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-40px, 30px) scale(1.05); }
}
@keyframes drift2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(30px, -20px) scale(1.08); }
}
@keyframes drift3 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(50px, -30px) scale(1.04); }
}
@keyframes float1 {
  0%, 100% { transform: rotate(-12deg) translateY(0); }
  50% { transform: rotate(-8deg) translateY(-20px); }
}
@keyframes float2 {
  0%, 100% { transform: rotate(20deg) translateY(0); }
  50% { transform: rotate(24deg) translateY(15px); }
}
@keyframes float3 {
  0%, 100% { transform: rotate(-30deg) translateY(0); }
  50% { transform: rotate(-26deg) translateY(-12px); }
}
@keyframes pulse {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.15); }
}

/* ─────────────────────────────────────────────
   8. LOGO STRIP
   ───────────────────────────────────────────── */
.logos-strip {
  padding: var(--space-12) 0;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border-soft);
}

.logos-title {
  text-align: center;
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-8);
}

/* Layout 5 + 4 con simetría garantizada por flexbox:
   .logos-row es flex-column con 2 hijos (.logos-row-line, uno por fila).
   Cada .logos-row-line es flexbox con justify-content: center → su contenido
   queda matemáticamente centrado independiente del número de logos o sus
   anchos. No hay grid tracks que puedan desbalancearse por intrinsic sizing. */
.logos-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.logos-row-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-8) var(--space-10);
}

/* Logos de clientes (imágenes SVG). Look "trust strip" muteado por default
   con grayscale + opacity, recobrando color full al hover. Altura fija para
   uniformidad visual aunque cada SVG tenga aspect ratio distinto. */
.client-logo {
  display: block;
  height: 40px;
  width: auto;
  max-width: 160px;
  object-fit: contain;
  filter: grayscale(1) opacity(0.7);
  transition: filter var(--t-fast) var(--ease-out);
}

.client-logo:hover {
  filter: grayscale(0) opacity(1);
}

@media (max-width: 640px) {
  .client-logo { height: 32px; max-width: 120px; }
}

/* ─────────────────────────────────────────────
   9. CYCLE OF DOCUMENT (the wow moment)
   ───────────────────────────────────────────── */
.cycle {
  padding: var(--space-32) 0;
  background:
    radial-gradient(ellipse at top, rgba(33, 182, 95, 0.04) 0%, transparent 50%),
    var(--color-bg);
  position: relative;
}

.cycle-flow {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-top: var(--space-12);
}

@media (min-width: 1024px) {
  .cycle-flow {
    grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
    gap: 0;
    align-items: stretch;
  }
}

.cycle-node {
  position: relative;
  background: white;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--r-xl);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  transition: transform var(--t-mid) var(--ease-out), box-shadow var(--t-mid) var(--ease-out), border-color var(--t-mid) var(--ease-out);
  overflow: hidden;
  isolation: isolate;
}

.cycle-node::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 5%, transparent) 0%, transparent 50%);
  opacity: 0;
  transition: opacity var(--t-mid) var(--ease-out);
  z-index: -1;
}

.cycle-node:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 48px -16px color-mix(in srgb, var(--accent) 25%, transparent);
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
}

.cycle-node:hover::before { opacity: 1; }

.cycle-node-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cycle-num {
  font-family: 'Funnel Display', serif;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-light);
  letter-spacing: 0.04em;
}

.cycle-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--accent);
  transition: background var(--t-mid) var(--ease-out), transform var(--t-mid) var(--ease-out);
}

.cycle-node:hover .cycle-icon {
  background: var(--accent);
  color: white;
  transform: rotate(-4deg) scale(1.05);
}

.cycle-name {
  font-family: 'Funnel Display', serif;
  font-size: 1.875rem;
  font-weight: 400;
  letter-spacing: -0.025em;
  color: var(--color-ink);
  margin-top: var(--space-2);
}

.cycle-desc {
  font-size: var(--text-base);
  line-height: 1.55;
  color: var(--color-text-muted);
  flex: 1;
}

.cycle-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-top: var(--space-2);
}

.tag {
  display: inline-block;
  padding: 4px 10px;
  font-size: var(--text-xs);
  font-weight: 600;
  border-radius: var(--r-full);
  background: color-mix(in srgb, var(--c) 12%, transparent);
  color: var(--c);
  letter-spacing: 0.01em;
}

.tag-ghost {
  background: transparent;
  color: var(--color-text-muted);
  border: 1px dashed var(--color-border);
  font-style: italic;
  font-weight: 500;
}

.cycle-node-final {
  background:
    linear-gradient(135deg, rgba(33, 182, 95, 0.04) 0%, rgba(20, 184, 166, 0.06) 100%),
    white;
  border-color: color-mix(in srgb, var(--color-primary) 18%, transparent);
}

/* connectors */
.cycle-link {
  display: none;
  align-items: center;
  padding: 0 8px;
  position: relative;
}

@media (min-width: 1024px) {
  .cycle-link { display: flex; min-width: 80px; }
}

.cycle-link svg { width: 100%; }

.cycle-pulse {
  animation: pulseLine 3s linear infinite;
  stroke-dashoffset: 86;
}

@keyframes pulseLine {
  0% { stroke-dashoffset: 86; }
  100% { stroke-dashoffset: 0; }
}

.cycle-footer {
  margin-top: var(--space-12);
  text-align: center;
}

.cycle-footer p {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--text-base);
  color: var(--color-text-muted);
  padding: var(--space-3) var(--space-5);
  background: var(--color-primary-soft);
  border-radius: var(--r-full);
  border: 1px solid color-mix(in srgb, var(--color-primary) 18%, transparent);
}

.cycle-footer-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-primary);
  color: white;
}

/* ─────────────────────────────────────────────
   10. PRODUCTS (4 cards)
   ───────────────────────────────────────────── */
.products {
  padding: var(--space-32) 0;
  background: var(--color-bg-cream);
  border-top: 1px solid var(--color-border-soft);
  border-bottom: 1px solid var(--color-border-soft);
}

.product-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 768px) {
  .product-grid { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
}

.product-card {
  position: relative;
  background: white;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--r-2xl);
  padding: var(--space-10);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--t-mid) var(--ease-out), box-shadow var(--t-mid) var(--ease-out), border-color var(--t-mid) var(--ease-out);
}

.product-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--accent);
  transform: scaleX(0.15);
  transform-origin: left;
  transition: transform 600ms var(--ease-out);
  border-radius: 0 0 var(--r-full) var(--r-full);
}

.product-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 28px 56px -20px color-mix(in srgb, var(--accent) 30%, transparent);
  border-color: color-mix(in srgb, var(--accent) 25%, transparent);
}

.product-card:hover::after { transform: scaleX(1); }

.product-accent {
  position: absolute;
  top: 0;
  right: 0;
  width: 240px;
  height: 240px;
  background: radial-gradient(circle at top right, var(--accent-soft) 0%, transparent 70%);
  pointer-events: none;
  z-index: -1;
  opacity: 0.7;
}

.product-head {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
}

.product-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--r-lg);
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--accent) 18%, transparent) 0%,
    color-mix(in srgb, var(--accent) 8%, transparent) 100%);
  color: var(--accent);
  flex-shrink: 0;
  position: relative;
}

.product-icon::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,0.6) 0%, transparent 50%);
  pointer-events: none;
}

/* Logo de producto (img) dentro de la tarjeta — por encima del brillo ::before */
.product-icon img {
  position: relative;
  z-index: 1;
  width: 32px;
  height: 32px;
  object-fit: contain;
  display: block;
}

.product-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 4px;
}

.product-eyebrow {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}

.product-name {
  font-family: 'Funnel Display', serif;
  font-size: 1.625rem;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--color-ink);
}

.product-tagline {
  font-size: var(--text-base);
  line-height: 1.55;
  color: var(--color-text);
  margin-top: var(--space-2);
}

.product-features {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5) 0;
  border-top: 1px solid var(--color-border-soft);
  border-bottom: 1px solid var(--color-border-soft);
}

.product-features li {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  font-size: var(--text-sm);
  color: var(--color-text);
  line-height: 1.5;
}

.feat-dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  margin-top: 0.55rem;
  flex-shrink: 0;
}

.product-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

.metric-pill {
  background: var(--color-bg-soft);
  border-radius: var(--r-md);
  padding: var(--space-3) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.metric-pill strong {
  font-family: 'Funnel Display', serif;
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--accent);
  letter-spacing: -0.025em;
  line-height: 1;
}

.metric-pill span {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.3;
}

.product-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-ink);
  letter-spacing: -0.005em;
  margin-top: var(--space-2);
  align-self: flex-start;
  transition: color var(--t-fast) var(--ease-out), gap var(--t-fast) var(--ease-out);
}

.product-link:hover {
  color: var(--accent);
  gap: 0.75rem;
}

/* ─────────────────────────────────────────────
   11. INDUSTRIES (tabs)
   ───────────────────────────────────────────── */
.industries {
  padding: var(--space-32) 0;
  background: var(--color-bg);
}

.industry-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-bottom: var(--space-12);
  padding: var(--space-2);
  background: var(--color-bg-soft);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--r-full);
  align-self: flex-start;
  width: fit-content;
}

.industry-tab {
  padding: 0.625rem 1.25rem;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-muted);
  border-radius: var(--r-full);
  transition: all var(--t-fast) var(--ease-out);
  letter-spacing: -0.005em;
}

.industry-tab:hover { color: var(--color-ink); }

.industry-tab.active {
  background: white;
  color: var(--color-ink);
  font-weight: 600;
  box-shadow: var(--shadow-sm), 0 0 0 1px var(--color-border-soft);
}

.industry-panels {
  position: relative;
}

.industry-panel {
  display: none;
  grid-template-columns: 1fr;
  gap: var(--space-10);
  align-items: stretch;
}

.industry-panel.active {
  display: grid;
  animation: panelFade 400ms var(--ease-out);
}

@keyframes panelFade {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (min-width: 900px) {
  .industry-panel.active {
    grid-template-columns: 0.75fr 1.25fr;
    gap: var(--space-12);
  }
}

.industry-visual {
  position: relative;
  border-radius: var(--r-2xl);
  overflow: hidden;
  min-height: 300px;
  background: linear-gradient(135deg, #fafaf8 0%, #f0f5f1 100%);
  border: 1px solid var(--color-border-soft);
}

.industry-visual-inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  padding: var(--space-8);
  color: var(--color-primary-dark);
  text-align: center;
}

.industry-visual-inner[data-color="education"] { color: #14b8a6; background: linear-gradient(135deg, rgba(20,184,166,0.06), rgba(33,182,95,0.04)); }
.industry-visual-inner[data-color="health"] { color: #ef4444; background: linear-gradient(135deg, rgba(239,68,68,0.06), rgba(33,182,95,0.04)); }
.industry-visual-inner[data-color="legal"] { color: #2F4858; background: linear-gradient(135deg, rgba(47,72,88,0.08), rgba(33,182,95,0.04)); }
.industry-visual-inner[data-color="manufacturing"] { color: #d97706; background: linear-gradient(135deg, rgba(217,119,6,0.06), rgba(33,182,95,0.04)); }
.industry-visual-inner[data-color="notary"] { color: #563ba2; background: linear-gradient(135deg, rgba(86, 59, 162,0.06), rgba(33,182,95,0.04)); }

.industry-tag-deco {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 6px 14px;
  background: white;
  border-radius: var(--r-full);
  color: var(--color-text);
  border: 1px solid var(--color-border-soft);
}

.industry-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding-top: var(--space-2);
}

.industry-headline {
  font-family: 'Funnel Display', serif;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--color-ink);
}

.industry-body {
  font-size: var(--text-md);
  line-height: 1.6;
  color: var(--color-text-muted);
}

.industry-stack {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: var(--space-4) 0;
  border-top: 1px solid var(--color-border-soft);
  border-bottom: 1px solid var(--color-border-soft);
}

.stack-label {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
  margin-right: var(--space-2);
}

.chip {
  display: inline-block;
  padding: 5px 12px;
  font-size: var(--text-xs);
  font-weight: 600;
  border-radius: var(--r-full);
  background: color-mix(in srgb, var(--c) 12%, transparent);
  color: var(--c);
  border: 1px solid color-mix(in srgb, var(--c) 25%, transparent);
}

.industry-case {
  border-left: 2px solid var(--color-primary);
  padding-left: var(--space-5);
  font-size: var(--text-md);
  line-height: 1.6;
  color: var(--color-text);
}

.industry-case strong { color: var(--color-ink); font-weight: 600; }
.industry-case em {
  font-family: 'Funnel Display', serif;
  font-style: italic;
  font-weight: 400;
  color: var(--color-primary);
  font-size: 1.25em;
}

/* ─────────────────────────────────────────────
   12. METRICS (dark)
   ───────────────────────────────────────────── */
.metrics {
  position: relative;
  padding: var(--space-32) 0;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(33, 182, 95, 0.18) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 80%, rgba(20, 184, 166, 0.12) 0%, transparent 50%),
    linear-gradient(180deg, #0a0a0a 0%, #131313 100%);
  color: white;
  overflow: hidden;
  isolation: isolate;
}

.metrics-glow {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,0.05) 1px, transparent 0);
  background-size: 32px 32px;
  pointer-events: none;
  mask-image: radial-gradient(ellipse at center, black 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 0%, transparent 70%);
}

.metrics-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto var(--space-16);
}

.metrics-head .eyebrow { justify-content: center; }
.metrics-head .section-title { color: white; }

.metrics-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}

@media (min-width: 640px) { .metrics-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .metrics-grid { grid-template-columns: repeat(4, 1fr); gap: var(--space-4); } }

.metric {
  text-align: center;
  padding: var(--space-6);
  position: relative;
}

@media (min-width: 1024px) {
  .metric:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 1px;
    height: 60%;
    background: linear-gradient(180deg, transparent, rgba(255,255,255,0.12), transparent);
  }
}

.metric-number {
  font-family: 'Funnel Display', serif;
  font-size: clamp(3rem, 6vw, 4.75rem);
  font-weight: 300;
  letter-spacing: -0.04em;
  line-height: 1;
  color: white;
  display: inline-flex;
  align-items: baseline;
  gap: 0.25rem;
  position: relative;
}

.metric-number::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 28px;
  height: 2px;
  background: var(--color-primary);
  border-radius: var(--r-full);
}

.metric-prefix {
  font-size: 0.55em;
  color: var(--color-primary);
  font-weight: 400;
}

.metric-unit {
  font-size: 0.4em;
  color: rgba(255, 255, 255, 0.6);
  font-weight: 400;
  margin-left: 0.25rem;
  letter-spacing: 0;
}

.metric-label {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.6);
  margin-top: var(--space-5);
  line-height: 1.45;
  max-width: 200px;
  margin-left: auto;
  margin-right: auto;
}

/* ─────────────────────────────────────────────
   13. TESTIMONIAL
   ───────────────────────────────────────────── */
.testimonial {
  padding: var(--space-32) 0;
  background: var(--color-bg);
}

.testimonial-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
  align-items: center;
}

@media (min-width: 1024px) {
  .testimonial-grid {
    grid-template-columns: 0.95fr 1.05fr;
    gap: var(--space-20);
  }
}

.testimonial-visual {
  position: relative;
  isolation: isolate;
}

.testimonial-visual-bg {
  position: absolute;
  inset: -20px;
  z-index: -1;
  background:
    radial-gradient(circle at 30% 30%, rgba(33, 182, 95, 0.15), transparent 60%),
    radial-gradient(circle at 70% 70%, rgba(86, 59, 162, 0.1), transparent 60%);
  filter: blur(40px);
  border-radius: var(--r-2xl);
}

.testimonial-card {
  background: white;
  border: 1px solid var(--color-border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
  transform: rotate(-1deg);
  transition: transform var(--t-mid) var(--ease-out);
}

.testimonial-card:hover { transform: rotate(0deg) translateY(-4px); }

.testimonial-card-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: var(--color-bg-soft);
  border-bottom: 1px solid var(--color-border-soft);
}

.testimonial-card-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.testimonial-card-title {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-left: var(--space-3);
  font-family: ui-monospace, SFMono-Regular, monospace;
}

.testimonial-card-body {
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.dash-row {
  display: grid;
  grid-template-columns: 130px 1fr 56px;
  gap: var(--space-3);
  align-items: center;
}

.dash-label {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-text);
}

.dash-bar {
  height: 6px;
  background: var(--color-bg-soft);
  border-radius: var(--r-full);
  overflow: hidden;
}

.dash-bar-fill {
  height: 100%;
  border-radius: var(--r-full);
  transition: width 1.2s var(--ease-out);
}

.dash-val {
  font-family: 'Funnel Display', serif;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-ink);
  text-align: right;
  letter-spacing: -0.01em;
}

.testimonial-card-foot {
  padding: var(--space-4) var(--space-6);
  background: var(--color-bg-soft);
  border-top: 1px solid var(--color-border-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.dash-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.dash-chip {
  display: inline-block;
  padding: 3px 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--c) 12%, transparent);
  color: var(--c);
  text-transform: uppercase;
}

.dash-status {
  font-size: var(--text-xs);
  color: var(--color-primary);
  font-weight: 600;
  font-family: ui-monospace, SFMono-Regular, monospace;
}

.testimonial-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.testimonial-quote {
  font-family: 'Funnel Display', serif;
  font-size: clamp(1.375rem, 2.4vw, 1.875rem);
  font-weight: 300;
  line-height: 1.35;
  letter-spacing: -0.015em;
  color: var(--color-ink);
}

.testimonial-quote em {
  font-weight: 400;
  font-style: italic;
  color: var(--color-primary);
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-top: var(--space-3);
}

.author-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary), #14b8a6);
  color: white;
  font-family: 'Funnel Display', serif;
  font-weight: 500;
  font-size: var(--text-base);
  letter-spacing: 0.02em;
}

.author-info { display: flex; flex-direction: column; }
.author-info strong { font-size: var(--text-sm); font-weight: 600; color: var(--color-ink); }
.author-info span { font-size: var(--text-xs); color: var(--color-text-muted); }

.testimonial-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  padding: var(--space-5) 0;
  border-top: 1px solid var(--color-border-soft);
  border-bottom: 1px solid var(--color-border-soft);
}

.t-stat strong {
  display: block;
  font-family: 'Funnel Display', serif;
  font-size: clamp(2rem, 3.5vw, 2.5rem);
  font-weight: 400;
  color: var(--color-primary);
  letter-spacing: -0.025em;
  line-height: 1;
  margin-bottom: 4px;
}

.t-stat span {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-ink);
  letter-spacing: -0.005em;
  transition: gap var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}

.link-arrow:hover { gap: 0.75rem; color: var(--color-primary); }

/* ─────────────────────────────────────────────
   14. SERVICES
   ───────────────────────────────────────────── */
.services {
  padding: var(--space-32) 0;
  background: var(--color-bg-cream);
  border-top: 1px solid var(--color-border-soft);
}

.services .section-header {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.services .eyebrow { justify-content: center; }
.services .section-sub { margin-left: auto; margin-right: auto; }

.services-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 900px) {
  .services-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-8); }
}

.service-card {
  background: white;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--r-xl);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  transition: transform var(--t-mid) var(--ease-out), box-shadow var(--t-mid) var(--ease-out);
}

.service-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.service-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--r-lg);
  background: linear-gradient(135deg, var(--color-primary-soft), rgba(20, 184, 166, 0.1));
  color: var(--color-primary-dark);
  margin-bottom: var(--space-2);
}

.service-title {
  font-family: 'Funnel Display', serif;
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--color-ink);
}

.service-desc {
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--color-text-muted);
  flex: 1;
}

.service-tag {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-primary-dark);
  padding: 6px 12px;
  background: var(--color-primary-soft);
  border-radius: var(--r-full);
  align-self: flex-start;
  margin-top: var(--space-2);
}

/* ─────────────────────────────────────────────
   15. CTA FINAL
   ───────────────────────────────────────────── */
.cta-final {
  position: relative;
  padding: var(--space-32) 0;
  background: linear-gradient(180deg, #f5faf6 0%, #fefefe 100%);
  overflow: hidden;
  isolation: isolate;
}

.cta-final-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.cta-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.4;
}

.cta-orb-1 {
  width: 500px; height: 500px;
  top: -100px; right: -100px;
  background: radial-gradient(circle, #21b65f 0%, transparent 65%);
}

.cta-orb-2 {
  width: 400px; height: 400px;
  bottom: -100px; left: -50px;
  background: radial-gradient(circle, #14b8a6 0%, transparent 65%);
  opacity: 0.3;
}

.cta-final-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
  align-items: start;
}

@media (min-width: 1024px) {
  .cta-final-grid { grid-template-columns: 1fr 1fr; gap: var(--space-16); }
}

.cta-final-text {
  position: sticky;
  top: 100px;
}

@media (max-width: 1023px) {
  .cta-final-text { position: static; }
}

.cta-final-title {
  font-family: 'Funnel Display', serif;
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--color-ink);
}

.cta-final-sub {
  font-size: var(--text-lg);
  line-height: 1.55;
  color: var(--color-text-muted);
  margin-top: var(--space-5);
  margin-bottom: var(--space-8);
}

.cta-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.cta-list li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: var(--text-base);
  color: var(--color-text);
}

.check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--color-primary);
  color: white;
  flex-shrink: 0;
}

/* form */
.cta-form {
  background: white;
  border: 1px solid var(--color-border);
  border-radius: var(--r-2xl);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  box-shadow: var(--shadow-lg);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

@media (min-width: 640px) { .form-row { grid-template-columns: 1fr 1fr; } }

.cta-form label {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.cta-form label > span {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text);
  letter-spacing: 0.02em;
}

.cta-form input,
.cta-form select {
  width: 100%;
  padding: 0.75rem 0.875rem;
  font-size: var(--text-base);
  background: var(--color-bg-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--r-md);
  color: var(--color-ink);
  transition: border-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out);
}

.cta-form input::placeholder { color: var(--color-text-light); }

.cta-form input:focus,
.cta-form select:focus {
  outline: 0;
  background: white;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(33, 182, 95, 0.15);
}

.cta-form select { cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b7280' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.5rem; }

.form-fineprint {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-align: center;
  margin-top: var(--space-2);
}

/* ─────────────────────────────────────────────
   16. FOOTER
   ───────────────────────────────────────────── */
.site-footer {
  background: var(--color-ink);
  color: rgba(255, 255, 255, 0.7);
  padding: var(--space-20) 0 var(--space-8);
  position: relative;
  overflow: hidden;
}

.site-footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-primary), transparent);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10);
  padding-bottom: var(--space-12);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

@media (min-width: 640px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-10);
  }
}

@media (min-width: 900px) {
  .footer-grid {
    grid-template-columns: 1.6fr repeat(5, 1fr);
    gap: var(--space-8);
  }
  .footer-brand { grid-column: 1 / 2; }
}

.footer-brand {
  max-width: 320px;
}

.footer-brand .logo { margin-bottom: var(--space-5); }
.footer-brand .logo-svg { height: 38px; }

.footer-tagline {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.6;
  margin-bottom: var(--space-6);
}

.footer-social {
  display: flex;
  gap: var(--space-3);
}

.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.7);
  transition: all var(--t-fast) var(--ease-out);
}

.footer-social a:hover {
  background: var(--color-primary);
  color: white;
  transform: translateY(-2px);
}

.footer-col h4 {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: white;
  margin-bottom: var(--space-5);
}

.footer-col ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.footer-col a {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.55);
  transition: color var(--t-fast) var(--ease-out);
}

.footer-col a:hover { color: white; }

.footer-bottom {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-top: var(--space-8);
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.45);
}

@media (min-width: 768px) {
  .footer-bottom { flex-direction: row; justify-content: space-between; align-items: center; }
}

.footer-info p { line-height: 1.7; }
.footer-info a { color: rgba(255, 255, 255, 0.7); transition: color var(--t-fast) var(--ease-out); }
.footer-info a:hover { color: white; }

.footer-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  align-items: center;
}

.footer-meta a { color: rgba(255, 255, 255, 0.55); transition: color var(--t-fast) var(--ease-out); }
.footer-meta a:hover { color: white; }

/* ─────────────────────────────────────────────
   17. SCROLL REVEAL
   ───────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 800ms var(--ease-out), transform 800ms var(--ease-out);
  transition-delay: var(--delay, 0ms);
  /* Failsafe: if JS / IntersectionObserver doesn't fire (or script.js fails to load),
     content must still appear. After 2.5s, force visibility via CSS animation. */
  animation: revealFailsafe 0ms 2500ms forwards;
}

.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

@keyframes revealFailsafe {
  to { opacity: 1; transform: translateY(0); }
}

@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; }
}

/* ─────────────────────────────────────────────
   18. FOCUS / ACCESSIBILITY
   ───────────────────────────────────────────── */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

.btn:focus-visible {
  outline-offset: 4px;
}

/* ╔══════════════════════════════════════════════════════════╗
   ║  19. PRODUCT PAGE BASES                                  ║
   ║  Shared structural styles for all product pages.         ║
   ║  Color/theme overrides live in product-specific .css     ║
   ╚══════════════════════════════════════════════════════════╝ */

/* sub-bar (breadcrumb + anchors) */
.product-subbar {
  position: sticky;
  top: var(--header-h);
  z-index: 50;
  background: rgba(254, 254, 254, 0.85);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--color-border-soft);
  padding: 0.625rem 0;
}

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

.breadcrumbs {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  letter-spacing: 0.02em;
}

.breadcrumbs a { color: var(--color-text-muted); transition: color var(--t-fast) var(--ease-out); }
.breadcrumbs span[aria-current="page"] { color: var(--color-ink); font-weight: 600; }

.product-subbar-anchors { display: none; align-items: center; gap: var(--space-1); }
@media (min-width: 768px) { .product-subbar-anchors { display: inline-flex; } }

.product-subbar-anchors a {
  padding: 0.375rem 0.75rem;
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-text-muted);
  border-radius: var(--r-full);
  transition: all var(--t-fast) var(--ease-out);
}

/* product hero */
.product-hero {
  position: relative;
  padding: calc(var(--header-h) + var(--subbar-h) + var(--space-6)) 0 var(--space-16);
  background: linear-gradient(180deg, #fafafa 0%, #f5f5f5 60%, #fefefe 100%);
  overflow: hidden;
  isolation: isolate;
}

.product-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.ph-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.45;
}

.ph-orb-1 {
  width: 540px; height: 540px;
  top: -150px; right: -100px;
  animation: drift1 24s ease-in-out infinite;
}

.ph-orb-2 {
  width: 420px; height: 420px;
  bottom: -120px; left: -80px;
  opacity: 0.3;
  animation: drift2 28s ease-in-out infinite;
}

.ph-grid {
  position: absolute;
  inset: 0;
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
}

.product-hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
  position: relative;
  z-index: 2;
  align-items: center;
}

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

/* Industry hero image — replaces the CSS scene on industry pages.
   The asset carries its own green brand shape + floating UI chips, so it needs
   no extra card. Sized to fill the right column and bleed slightly past the top
   of the hero (clipped by .product-hero overflow:hidden) so the tall portrait
   reads large and removes the empty top-right area. */
.industry-hero-media {
  display: flex;
  justify-content: center;
  align-items: center;
}
.industry-hero-media picture { display: block; width: 100%; line-height: 0; }
.industry-hero-media img {
  display: block;
  width: 100%;
  max-width: 440px;
  height: auto;
  margin: 0 auto;
}
@media (min-width: 1024px) {
  .industry-hero-media { justify-content: flex-end; }
  .industry-hero-media img {
    max-width: 600px;
    margin-top: -2.75rem;
    margin-bottom: -4.5rem;
  }
}
@media (min-width: 1440px) {
  .industry-hero-media img { max-width: 660px; }
}

/* product badge */
.product-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.75rem 0.375rem 0.5rem;
  background: white;
  border: 1px solid var(--color-border);
  border-radius: var(--r-full);
  font-size: var(--text-xs);
  font-weight: 500;
  margin-bottom: var(--space-4);
  box-shadow: var(--shadow-sm);
}

.product-badge-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-tint);
}

.product-badge-name {
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--color-primary-dark);
}

.product-badge-meta { color: var(--color-text-muted); font-weight: 400; }

/* product hero typography */
.product-hero-title {
  font-family: 'Funnel Display', serif;
  font-weight: 300;
  font-size: clamp(2.25rem, 4.2vw, 3.75rem);
  line-height: 1.1;
  letter-spacing: -0.035em;
  color: var(--color-ink);
  margin-bottom: var(--space-5);
  overflow: visible;
}

/* WebKit fix: el italic con `-webkit-background-clip: text` recorta ascendientes/
   descendientes/letras inclinadas en algunos renders cuando el em es inline.
   El padding+margin negativo expande el "lienzo" interno donde el gradiente se
   pinta sin afectar el layout del texto circundante. Cada producto define su
   gradiente específico en su CSS file (mps.css, gespage.css, etc.) y opcionalmente
   un -webkit-text-stroke del color medio del gradiente para rellenar bordes
   anti-aliased. */
.product-hero-title em {
  font-weight: 400;
  font-style: italic;
  display: inline-block;
  padding: 0.2em 0.05em;
  margin: -0.2em -0.05em;
  vertical-align: baseline;
}

.product-hero-sub {
  font-size: clamp(1rem, 1.3vw, 1.1875rem);
  line-height: 1.5;
  color: var(--color-text-muted);
  max-width: 580px;
  margin-bottom: var(--space-6);
}

.product-hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

/* Product CTA — base structure (color overridden by .page-* classes) */
.btn-product {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.875rem 1.375rem;
  font-size: var(--text-base);
  font-weight: 600;
  color: white;
  background: var(--color-primary);
  border-radius: var(--r-full);
  letter-spacing: -0.005em;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: all var(--t-fast) var(--ease-out);
}

.btn-product:hover { transform: translateY(-1px); }
.btn-product svg { transition: transform var(--t-fast) var(--ease-out); }
.btn-product:hover svg { transform: translateX(2px); }

.product-hero-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border-soft);
}

.product-hero-meta strong { color: var(--color-ink); font-weight: 600; }
.product-hero-meta .dot { color: var(--color-text-light); }

/* brands strip */
.brands-strip {
  padding: var(--space-12) 0;
  background: var(--color-bg);
  border-top: 1px solid var(--color-border-soft);
  border-bottom: 1px solid var(--color-border-soft);
}

.brands-title {
  text-align: center;
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-6);
}

.brands-title strong { color: var(--color-primary-dark); font-weight: 700; }

.brands-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-6) var(--space-10);
}

.brand-name {
  font-family: 'Funnel Display', sans-serif;
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--color-text-light);
  filter: grayscale(1) opacity(0.7);
  transition: all var(--t-fast) var(--ease-out);
}

.brand-name:nth-child(odd) {
  font-family: 'Funnel Display', serif;
  font-style: italic;
  font-weight: 400;
}

.brand-name:hover { color: var(--color-text); filter: grayscale(0) opacity(1); }

/* Brand logos como imágenes SVG (vs .brand-name que es text label).
   Usadas en mps.html y futuras páginas que muestren logos de fabricantes OEM
   (compatibility strip). Mismo look "trust strip" muteado por default con
   grayscale + opacity, recobrando color full al hover. */
.brand-logo {
  display: block;
  height: 36px;
  width: auto;
  max-width: 130px;
  object-fit: contain;
  filter: grayscale(1) opacity(0.65);
  transition: filter var(--t-fast) var(--ease-out);
}

.brand-logo:hover {
  filter: grayscale(0) opacity(1);
}

@media (max-width: 640px) {
  .brand-logo { height: 28px; max-width: 100px; }
}

/* dashboard tour wrapper */
.dashboard-tour { padding: var(--space-32) 0; background: var(--color-bg); position: relative; }

/* dashboard mockup window (browser frame) */
.dashboard-mockup { position: relative; margin-top: var(--space-12); }

.dm-window {
  background: white;
  border: 1px solid var(--color-border);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: 0 40px 80px -20px rgba(0, 0, 0, 0.12), 0 16px 36px -8px rgba(0, 0, 0, 0.08);
}

.dm-topbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: linear-gradient(180deg, #fafafa, #f5f5f5);
  border-bottom: 1px solid var(--color-border-soft);
}

.dm-topbar-left { display: flex; gap: 0.375rem; }
.dm-dot { width: 11px; height: 11px; border-radius: 50%; }

.dm-topbar-url {
  flex: 1;
  text-align: center;
  font-size: 12px;
  color: var(--color-text-muted);
  font-family: ui-monospace, SFMono-Regular, monospace;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

/* audiences (3 or 4 cards) */
.audiences {
  padding: var(--space-32) 0;
  background: var(--color-bg-cream);
  border-top: 1px solid var(--color-border-soft);
  border-bottom: 1px solid var(--color-border-soft);
}

.audiences-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

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

.audience-card {
  position: relative;
  background: white;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--r-xl);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  transition: all var(--t-mid) var(--ease-out);
}

.audience-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.audience-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px; height: 52px;
  border-radius: var(--r-md);
  background: linear-gradient(135deg, var(--color-primary-tint) 0%, var(--color-primary-soft) 100%);
  color: var(--color-primary-dark);
}

.audience-card h3 {
  font-family: 'Funnel Display', serif;
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--color-ink);
}

.audience-card p {
  font-size: var(--text-base);
  line-height: 1.55;
  color: var(--color-text-muted);
}

.audience-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: auto;
  border-top: 1px solid var(--color-border-soft);
  padding-top: var(--space-4);
}

.audience-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: var(--text-sm);
  color: var(--color-text);
  line-height: 1.5;
}

.audience-list li::before {
  content: '';
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--color-primary);
  margin-top: 0.55rem;
  flex-shrink: 0;
}

.audience-flag {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-primary-dark);
  background: var(--color-primary-soft);
  padding: 4px 10px;
  border-radius: var(--r-full);
}

/* capabilities grid */
.capabilities {
  padding: var(--space-32) 0;
  background: var(--color-bg);
}

.cap-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

@media (min-width: 768px) {
  .cap-grid {
    grid-template-columns: repeat(6, 1fr);
    gap: var(--space-5);
  }
  .cap-grid > .cap-card:nth-of-type(1) { grid-column: span 4; }
  .cap-grid > .cap-card:nth-of-type(2) { grid-column: span 2; }
  .cap-grid > .cap-card:nth-of-type(3) { grid-column: span 2; }
  .cap-grid > .cap-card:nth-of-type(4) { grid-column: span 2; }
  .cap-grid > .cap-card:nth-of-type(5) { grid-column: span 2; }
  .cap-grid > .cap-card:nth-of-type(6) { grid-column: span 4; }
}

.cap-card {
  background: white;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--r-xl);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  transition: all var(--t-mid) var(--ease-out);
  overflow: hidden;
}

.cap-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.cap-head {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.cap-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: var(--r-md);
  background: var(--color-primary-tint);
  color: var(--color-primary-dark);
}

.cap-card h3 {
  font-family: 'Funnel Display', serif;
  font-size: 1.25rem;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--color-ink);
}

.cap-card p {
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--color-text-muted);
  flex: 1;
}

.cap-mock {
  margin-top: var(--space-2);
  padding: var(--space-3);
  background: linear-gradient(180deg, var(--color-bg-soft) 0%, var(--color-bg-cream) 100%);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--r-md);
}

/* integrations */
.integrations {
  padding: var(--space-32) 0;
  background: var(--color-bg);
}

.int-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  align-items: start;
}

@media (min-width: 1024px) {
  .int-grid { grid-template-columns: 1fr 1fr; gap: var(--space-12); }
}

.int-list { display: flex; flex-direction: column; gap: var(--space-4); }

.int-cat {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-text-muted);
  margin-top: var(--space-3);
}

.int-cat:first-child { margin-top: 0; }

.int-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.int-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 0.875rem;
  background: white;
  border: 1px solid var(--color-border);
  border-radius: var(--r-md);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-ink);
  transition: all var(--t-fast) var(--ease-out);
  cursor: default;
}

.int-chip:hover {
  border-color: var(--color-primary);
  color: var(--color-primary-dark);
  transform: translateY(-1px);
}

/* CTA Final product variant */
.cta-final-product {
  background: linear-gradient(180deg, var(--color-primary-soft) 0%, #fefefe 100%);
}

.cta-product-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
  align-items: center;
}

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

.cta-options {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

@media (min-width: 640px) { .cta-options { grid-template-columns: 1fr 1fr; gap: var(--space-4); } }

.cta-option {
  position: relative;
  background: white;
  border: 1px solid var(--color-border);
  border-radius: var(--r-xl);
  padding: var(--space-7);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  box-shadow: var(--shadow-md);
  transition: all var(--t-mid) var(--ease-out);
}

.cta-option:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.cta-option-secondary { background: var(--color-bg-soft); box-shadow: none; }

.cta-option-tag {
  position: absolute;
  top: -10px;
  left: var(--space-5);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: white;
  background: var(--color-primary);
  padding: 4px 10px;
  border-radius: var(--r-full);
}

.cta-option-secondary .cta-option-tag { background: var(--color-ink); }

.cta-option h3 {
  font-family: 'Funnel Display', serif;
  font-size: 1.625rem;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--color-ink);
  margin-top: var(--space-2);
}

.cta-option p {
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--color-text-muted);
  flex: 1;
}

.cta-option-meta {
  font-size: 11px;
  color: var(--color-text-muted);
}

/* drift animations (used by hero orbs across products) */
@keyframes drift1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-40px, 30px) scale(1.05); }
}
@keyframes drift2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(30px, -20px) scale(1.08); }
}

/* ─────────────────────────────────────────────
   20. FAQ COMPONENT (with FAQPage Schema.org)
   ─────────────────────────────────────────────
   Native <details>/<summary> accordion — keyboard-
   accessible, indexable by Google, no JS needed.
   ───────────────────────────────────────────── */
.faq {
  padding: var(--space-32) 0;
  background: var(--color-bg);
  border-top: 1px solid var(--color-border-soft);
}

.faq .section-header {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  max-width: 720px;
}

.faq .section-header .eyebrow { justify-content: center; }
.faq .section-sub { margin-left: auto; margin-right: auto; }

.faq-list {
  max-width: 820px;
  margin: var(--space-12) auto 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.faq-item {
  background: white;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}

.faq-item:hover { border-color: var(--color-border); }

.faq-item[open] {
  border-color: var(--color-primary-tint);
  box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.06);
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  font-family: 'Funnel Display', serif;
  font-size: var(--text-lg);
  font-weight: 400;
  color: var(--color-ink);
  cursor: pointer;
  letter-spacing: -0.01em;
  line-height: 1.4;
  list-style: none;
  transition: color var(--t-fast) var(--ease-out);
  user-select: none;
}

.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::marker { display: none; }

.faq-item summary:hover { color: var(--color-primary-dark); }

.faq-item summary > span:first-child { flex: 1; }

.faq-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--color-bg-soft);
  color: var(--color-text-muted);
  font-size: 20px;
  font-weight: 300;
  font-family: 'Funnel Display', sans-serif;
  line-height: 1;
  flex-shrink: 0;
  transition: all var(--t-fast) var(--ease-out);
}

.faq-item[open] .faq-chevron {
  background: var(--color-primary);
  color: white;
  transform: rotate(45deg);
}

.faq-answer {
  padding: 0 var(--space-6) var(--space-6);
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--color-text-muted);
  animation: faqSlide 240ms var(--ease-out);
}

.faq-answer p { margin: 0; }
.faq-answer p + p { margin-top: var(--space-3); }
.faq-answer strong { color: var(--color-text); font-weight: 600; }

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

@media (min-width: 768px) {
  .faq-item summary { font-size: var(--text-xl); padding: var(--space-6) var(--space-7); }
  .faq-answer { padding: 0 var(--space-7) var(--space-7); font-size: var(--text-lg); }
}

/* ─────────────────────────────────────────────
   ZOHO MODAL — Lead capture form + booking handoff
   Reusable across all CTAs that trigger ZMA forms.
   States: default (form visible) → .is-step-2 (booking iframe visible)
   ───────────────────────────────────────────── */
.zoho-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(1rem, 4vw, 2.5rem);
  overflow-y: auto;
}

.zoho-modal.is-open {
  display: flex;
  animation: zohoOverlayIn 200ms var(--ease-out);
}

.zoho-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 10, 0.55);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
}

.zoho-modal-content {
  position: relative;
  background: white;
  border-radius: var(--r-2xl);
  width: 100%;
  max-width: 540px;
  margin: clamp(1rem, 6vh, 4rem) auto;
  box-shadow: 0 32px 64px -16px rgba(0, 0, 0, 0.25);
  animation: zohoModalIn 280ms var(--ease-out);
  overflow: hidden;
}

@keyframes zohoOverlayIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes zohoModalIn {
  from { opacity: 0; transform: translateY(20px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.zoho-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--color-border-soft);
  cursor: pointer;
  display: grid;
  place-items: center;
  color: var(--color-text-muted);
  z-index: 5;
  transition: background 200ms var(--ease-out), color 200ms var(--ease-out), transform 200ms var(--ease-out);
}

.zoho-modal-close:hover {
  background: var(--color-bg-soft);
  color: var(--color-ink);
  transform: rotate(90deg);
}

.zoho-modal-header {
  padding: var(--space-10) var(--space-8) var(--space-5);
  text-align: center;
  background: linear-gradient(180deg, #fafdfb 0%, #ecfaf1 100%);
  border-bottom: 1px solid var(--color-border-soft);
}

.zoho-modal-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-primary-darker);
  background: white;
  padding: 5px 12px;
  border-radius: var(--r-full);
  border: 1px solid var(--color-primary-tint);
  margin-bottom: var(--space-3);
}

.zoho-modal-eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-primary);
}

.zoho-modal-title {
  font-family: 'Funnel Display', serif;
  font-size: clamp(1.375rem, 3vw, 1.75rem);
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1.2;
  color: var(--color-ink);
  margin: 0 0 var(--space-2);
}

.zoho-modal-sub {
  font-size: var(--text-md, 0.9375rem);
  color: var(--color-text-muted);
  line-height: 1.5;
  margin: 0;
  max-width: 380px;
  margin: 0 auto;
}

.zoho-modal-body {
  padding: var(--space-6) var(--space-8) var(--space-8);
  position: relative;
  min-height: 280px;
}

.zoho-modal-step {
  display: none;
}

.zoho-modal.is-step-1 .zoho-modal-step-form { display: block; }
.zoho-modal.is-step-2 .zoho-modal-step-booking { display: block; }
.zoho-modal.is-step-2 .zoho-modal-header { display: none; }

.zoho-modal-step-booking iframe {
  width: 100%;
  min-height: 580px;
  border: 0;
  border-radius: var(--r-lg);
}

.zoho-modal-loading {
  display: grid;
  place-items: center;
  min-height: 580px;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  gap: var(--space-3);
}

.zoho-modal-loading::before {
  content: "";
  width: 32px;
  height: 32px;
  border: 3px solid var(--color-border-soft);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: zohoSpin 800ms linear infinite;
}

@keyframes zohoSpin {
  to { transform: rotate(360deg); }
}

/* ZMA form overrides — make Zoho fields match our brand */
.zoho-modal-body #SIGNUP_PAGE,
.zoho-modal-body #SIGNUP_BODY_ALL,
.zoho-modal-body #SIGNUP_BODY,
.zoho-modal-body #signupMainDiv {
  background: transparent !important;
  padding: 0 !important;
  border: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  opacity: 1 !important;
  font-family: 'Montserrat', sans-serif !important;
  color: var(--color-text) !important;
  text-align: left !important;
}

.zoho-modal-body #SIGNUP_HEADING,
.zoho-modal-body #imgBlock,
.zoho-modal-body [name="LOGO_DIV"],
.zoho-modal-body #signupFormContainer > div > br,
.zoho-modal-body div[name="SIGNUPFORM"] br {
  display: none !important;
}

.zoho-modal-body input[type="text"],
.zoho-modal-body input[type="email"],
.zoho-modal-body input[type="tel"],
.zoho-modal-body textarea,
.zoho-modal-body select {
  height: auto !important;
  padding: 12px 16px !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 15px !important;
  border-radius: 10px !important;
  border: 1px solid var(--color-border) !important;
  background: var(--color-bg-soft) !important;
  color: var(--color-ink) !important;
  width: 100% !important;
  text-indent: 0 !important;
  box-sizing: border-box !important;
  transition: border-color 200ms, background 200ms, box-shadow 200ms;
}

/* <select> needs explicit appearance reset to remove the OS-default chevron and
   match the rounded input look. Custom chevron drawn as inline SVG via background-image
   so it inherits the design system colors and stays consistent across browsers. */
.zoho-modal-body select {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right 16px center !important;
  background-size: 14px !important;
  padding-right: 42px !important;
  cursor: pointer !important;
}

/* Selects con la opción "disabled selected" (placeholder) muestran el texto en gris claro
   para que se lea como placeholder del input. Cuando el usuario elige una opción real,
   el color vuelve a ink (color-ink, default del select arriba). */
.zoho-modal-body select:has(option[value="dummy"]:checked),
.zoho-modal-body select:invalid {
  color: var(--color-text-light) !important;
}

/* Textarea (CONTACT_CF4 · Description) — hereda el look de los inputs (arriba) y
   añade alto mínimo, resize vertical y line-height cómodo para texto multilínea. */
.zoho-modal-body textarea {
  min-height: 96px !important;
  resize: vertical !important;
  line-height: 1.5 !important;
}

.zoho-modal-body input[type="text"]::placeholder,
.zoho-modal-body input[type="email"]::placeholder,
.zoho-modal-body input[type="tel"]::placeholder,
.zoho-modal-body textarea::placeholder {
  color: var(--color-text-light) !important;
  font-family: 'Montserrat', sans-serif !important;
}

.zoho-modal-body input[type="text"]:focus,
.zoho-modal-body input[type="email"]:focus,
.zoho-modal-body input[type="tel"]:focus,
.zoho-modal-body textarea:focus,
.zoho-modal-body select:focus {
  outline: none !important;
  border-color: var(--color-primary) !important;
  background-color: white !important;
  box-shadow: 0 0 0 3px var(--color-primary-tint) !important;
}

.zoho-modal-body .zcsffield {
  padding: 0 0 var(--space-4) 0 !important;
}

.zoho-modal-body #zcWebOptin {
  width: 100% !important;
  padding: 14px 24px !important;
  border-radius: 10px !important;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark)) !important;
  color: white !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  border: 0 !important;
  cursor: pointer !important;
  box-shadow: 0 8px 16px -4px rgba(33, 182, 95, 0.3) !important;
  transition: transform 200ms, box-shadow 200ms !important;
  white-space: normal !important;
  letter-spacing: 0 !important;
}

.zoho-modal-body #zcWebOptin:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 12px 24px -4px rgba(33, 182, 95, 0.4) !important;
  background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary-darker)) !important;
}

.zoho-modal-body #REQUIRED_FIELD_TEXT {
  font-size: 11px !important;
  color: var(--color-text-light) !important;
  font-family: 'Montserrat', sans-serif !important;
  margin: 0 0 var(--space-3) !important;
  padding: 0 !important;
  text-align: left !important;
}

/* Asteriscos de campos required: posicionados absolutamente en la esquina superior
   derecha del campo, color gris claro (muted) para indicar obligatoriedad sin
   ser invasivos visualmente. La nota "* Campo obligatorio" del footer usa un
   <div> (no span) y no se ve afectada por este selector. */
.zoho-modal-body .zcsffield {
  position: relative;
}

.zoho-modal-body span[name="SIGNUP_REQUIRED"] {
  display: block !important;
  position: absolute !important;
  top: 8px !important;
  right: 14px !important;
  color: var(--color-text-light) !important;
  font-size: 0.95rem !important;
  font-weight: 400 !important;
  font-family: 'Montserrat', sans-serif !important;
  line-height: 1 !important;
  pointer-events: none !important;
  z-index: 2 !important;
  background: transparent !important;
}

/* intl-tel-input overrides — the library wraps our PHONE <input> in a .iti container
   with a flag/dial-code selector on the left. We restyle to match the rest of our
   modal inputs (font, border-radius, focus state) so it feels native.
   Selector .iti > input targets the direct input child regardless of class name
   (v23 doesn't always add iti__tel-input class). */
.zoho-modal-body .iti {
  display: block !important;
  width: 100% !important;
  position: relative;
}

.zoho-modal-body .iti > input,
.zoho-modal-body .iti input[type="tel"] {
  height: auto !important;
  padding: 12px 16px !important;
  padding-left: 105px !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 15px !important;
  border-radius: 10px !important;
  border: 1px solid var(--color-border) !important;
  background: var(--color-bg-soft) !important;
  color: var(--color-ink) !important;
  width: 100% !important;
  text-indent: 0 !important;
  box-sizing: border-box !important;
  transition: border-color 200ms, background 200ms, box-shadow 200ms;
}

.zoho-modal-body .iti > input:focus,
.zoho-modal-body .iti input[type="tel"]:focus {
  outline: none !important;
  border-color: var(--color-primary) !important;
  background: white !important;
  box-shadow: 0 0 0 3px var(--color-primary-tint) !important;
}

/* Country selector (left-side flag + dial code) — match the input's height/border */
.zoho-modal-body .iti__country-container,
.zoho-modal-body .iti__selected-country {
  border-top-left-radius: 10px !important;
  border-bottom-left-radius: 10px !important;
}

.zoho-modal-body .iti__selected-country,
.zoho-modal-body .iti__selected-country-primary {
  background: transparent !important;
  border-right: 1px solid var(--color-border) !important;
  padding: 0 8px 0 12px !important;
  height: 100% !important;
}

.zoho-modal-body .iti__selected-dial-code {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 14px !important;
  color: var(--color-text) !important;
  margin-left: 6px !important;
}

/* Country dropdown list */
.zoho-modal-body .iti__country-list,
.zoho-modal-body .iti__dropdown-content {
  border-radius: 10px !important;
  border: 1px solid var(--color-border) !important;
  box-shadow: var(--shadow-lg) !important;
  font-family: 'Montserrat', sans-serif !important;
  max-height: 280px !important;
}

.zoho-modal-body .iti__country.iti__highlight {
  background: var(--color-primary-soft) !important;
}

.zoho-modal-body .iti__search-input {
  font-family: 'Montserrat', sans-serif !important;
  border-radius: 6px !important;
  border: 1px solid var(--color-border) !important;
  padding: 8px 10px !important;
}

/* Honeypot anti-spam field — invisible to humans, present in DOM for bots to fill.
   Uses position:absolute with off-screen left (more reliable across screen readers and
   browser autofill than display:none, which some bots respect). The field still occupies
   1px in the layout but is not visually rendered or focusable. */
.hp-field {
  position: absolute !important;
  left: -10000px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.hp-field input,
.hp-field label {
  width: 1px !important;
  height: 1px !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Fine-print disclaimer below the form */
.zoho-modal-disclaimer {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-soft);
  font-size: 11px;
  color: var(--color-text-light);
  line-height: 1.5;
  text-align: center;
}

.zoho-modal-disclaimer a { color: var(--color-primary-darker); text-decoration: underline; }

/* Hide Zohos default success popup chrome — we render our own success state */
body > #zcOptinOverLay,
body > #zcOptinSuccessPopup {
  display: none !important;
}

/* Step 2: post-submit booking header (replaces eyebrow/title) */
.zoho-modal-step-booking-header {
  padding: var(--space-6) var(--space-8) 0;
  text-align: center;
}

.zoho-modal-step-booking-header h3 {
  font-family: 'Funnel Display', serif;
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: -0.025em;
  color: var(--color-ink);
  margin: 0 0 var(--space-2);
}

.zoho-modal-step-booking-header p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0;
}

@media (max-width: 640px) {
  .zoho-modal-content { max-width: 100%; margin: 0 auto; border-radius: var(--r-lg); }
  .zoho-modal-header { padding: var(--space-8) var(--space-5) var(--space-4); }
  .zoho-modal-body { padding: var(--space-5) var(--space-5) var(--space-6); }
}

@media (prefers-reduced-motion: reduce) {
  .zoho-modal-content,
  .zoho-modal { animation: none !important; }
}

/* ─────────────────────────────────────────────
   21. LEGAL PAGES (Privacidad, Términos, Cookies)
       Layout simple: container + columna de texto leíble (~720px)
       con typography generosa (line-height 1.7) y jerarquía clara
       de h1 → h2 → h3.
   ───────────────────────────────────────────── */
.legal-page {
  padding: calc(var(--header-h) + var(--space-12)) 0 var(--space-32);
  background: var(--color-bg);
}

.legal-page-inner {
  max-width: 760px;
  margin: 0 auto;
}

.legal-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: 'Montserrat', sans-serif;
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-primary);
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--color-primary);
  border-radius: var(--r-full);
  background: var(--color-primary-soft);
  margin-bottom: var(--space-6);
}

.legal-page h1 {
  font-family: 'Funnel Display', serif;
  font-weight: 300;
  font-size: clamp(2rem, 4.5vw, 3.5rem);
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--color-ink);
  margin: 0 0 var(--space-4) 0;
}

.legal-page .legal-meta {
  font-family: 'Montserrat', sans-serif;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-12);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-border-soft);
}

.legal-page .legal-toc {
  background: var(--color-bg-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--r-lg);
  padding: var(--space-6);
  margin-bottom: var(--space-12);
}

.legal-page .legal-toc h2 {
  font-family: 'Montserrat', sans-serif;
  font-size: var(--text-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-4) 0;
}

.legal-page .legal-toc ol {
  list-style: none;
  padding: 0;
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  font-size: var(--text-base);
  line-height: 1.7;
  counter-reset: toc;
}

.legal-page .legal-toc li {
  counter-increment: toc;
  padding-left: 2.4rem;
  position: relative;
}

.legal-page .legal-toc li::before {
  content: counter(toc, decimal-leading-zero);
  position: absolute;
  left: 0;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  color: var(--color-primary);
  font-size: 0.85em;
  top: 0.3em;
}

.legal-page .legal-toc a {
  color: var(--color-text);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--t-fast), border-color var(--t-fast);
}

.legal-page .legal-toc a:hover {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

.legal-page .legal-section {
  margin-bottom: var(--space-12);
  scroll-margin-top: calc(var(--header-h) + var(--space-6));
}

.legal-page .legal-section h2 {
  font-family: 'Funnel Display', serif;
  font-weight: 400;
  font-size: clamp(1.4rem, 2.4vw, 1.8rem);
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--color-ink);
  margin: 0 0 var(--space-4) 0;
  padding-top: var(--space-4);
  border-top: 2px solid var(--color-primary);
  display: inline-block;
}

.legal-page .legal-section h3 {
  font-family: 'Funnel Display', serif;
  font-weight: 500;
  font-size: 1.15rem;
  line-height: 1.35;
  color: var(--color-ink);
  margin: var(--space-6) 0 var(--space-3) 0;
}

.legal-page .legal-section p,
.legal-page .legal-section li {
  font-family: 'Montserrat', sans-serif;
  font-size: var(--text-base);
  line-height: 1.75;
  color: var(--color-text);
  margin: 0 0 var(--space-4) 0;
}

.legal-page .legal-section ul,
.legal-page .legal-section ol {
  padding-left: 1.4rem;
  margin: 0 0 var(--space-4) 0;
}

.legal-page .legal-section ul li,
.legal-page .legal-section ol li {
  margin-bottom: var(--space-2);
}

.legal-page .legal-section strong {
  color: var(--color-ink);
  font-weight: 600;
}

.legal-page .legal-section a {
  color: var(--color-primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.legal-page .legal-section a:hover {
  color: var(--color-primary-dark);
}

.legal-page .legal-callout {
  background: var(--color-primary-soft);
  border-left: 3px solid var(--color-primary);
  padding: var(--space-5) var(--space-6);
  border-radius: var(--r-sm);
  margin: var(--space-6) 0;
}

.legal-page .legal-callout p:last-child {
  margin-bottom: 0;
}

.legal-page .legal-contact-block {
  background: var(--color-bg-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--r-lg);
  padding: var(--space-6);
  margin-top: var(--space-6);
}

.legal-page .legal-contact-block strong {
  display: block;
  margin-bottom: var(--space-2);
}

.legal-page .legal-contact-block p {
  margin: 0 0 var(--space-2) 0;
  font-size: var(--text-sm);
}

/* ─────────────────────────────────────────────
   22. VIDEO DEMO MODAL
       Reusable lightbox para videos de YouTube/Vimeo embebidos.
       Trigger: cualquier elemento con [data-video-modal="<videoId>"].
       Iframe lazy-loaded: solo se inserta en DOM al click (cero
       impacto en LCP / performance inicial). Privacy-enhanced via
       youtube-nocookie.com (no setea cookies hasta que play).
   ───────────────────────────────────────────── */
.video-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}

.video-modal.is-open {
  display: flex;
  animation: video-modal-fade-in 200ms var(--ease-out);
}

@keyframes video-modal-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.video-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  cursor: pointer;
}

.video-modal-content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 960px;
  margin: auto;
  animation: video-modal-scale-in 280ms var(--ease-out);
}

@keyframes video-modal-scale-in {
  from { transform: scale(0.96); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.video-modal-close {
  position: absolute;
  top: -42px;
  right: 0;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  color: white;
  cursor: pointer;
  border-radius: 50%;
  transition: background 200ms;
}

.video-modal-close:hover {
  background: rgba(255, 255, 255, 0.12);
}

.video-modal-sr-title {
  /* visually hidden but accessible to screen readers */
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.video-modal-frame {
  aspect-ratio: 16 / 9;
  width: 100%;
  background: #000 center/cover no-repeat;
  border-radius: 12px;
  overflow: hidden;
  box-shadow:
    0 30px 80px -20px rgba(0, 0, 0, 0.6),
    0 12px 30px -10px rgba(0, 0, 0, 0.4);
}

.video-modal-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Body lock when modal is open (prevent background scroll) */
body.video-modal-open {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .video-modal.is-open,
  .video-modal-content { animation: none !important; }
}