/* ==========================================================================
   INBASIX · Programa de distribuidores — capa de proyecto
   --------------------------------------------------------------------------
   Se carga DESPUÉS de toolkit.css. Solo agrega tokens del proyecto y
   componentes que el toolkit no trae; los existentes se extienden con
   modificadores BEM o cambiando sus variables locales (--btn-*).

   Índice
     1. Tokens del proyecto
     2. Ajustes base (botones, eyebrows, títulos, contenedores)
     3. Header oscuro
     4. Hero
     5. Alianza (stat cards + marcas)
     6. Stage oscuro (socio + portafolio)
     7. Pasos
     8. Respaldo institucional (tabla)
     9. Perfil
    10. Formulario + intl-tel-input
    11. FAQ
    12. CTA final
    13. Slider (Swiper)
    14. Reveal / movimiento
    15. Responsive
   ========================================================================== */


/* ==========================================================================
   1. TOKENS DEL PROYECTO
   ========================================================================== */
:root {

  --title-size: var(--text-4xl);                         /* H2 de sección: escala de marca */
  --hero-title-size: var(--text-display);                /* H1: escala de marca */
  --lead-size: var(--text-lead);

  --color-text-body: var(--gray-600);                    /* párrafos en secciones claras */
  --color-surface-soft: #F8F9FA;                         /* steps, FAQ, perfil */
  --color-border-soft: #E5E7EB;
  --color-surface-dark: rgba(255, 255, 255, 0.09);       /* cards sobre el stage */
  --color-surface-dark-strong: #2B2B2D;                  /* cards de portafolio */
  --color-text-dark-muted: #A6A6AD;                      /* párrafos sobre el stage */
  --color-table-dark: #444548;                           /* columnas oscuras de la tabla */
  --color-table-line: rgba(255, 255, 255, 0.16);

  --stage-inset: clamp(0px, 2.5vw, 32px);                /* margen lateral de bloques redondeados */
  --radius-stage: var(--radius-panel);
}


/* ==========================================================================
   2. AJUSTES BASE
   ========================================================================== */
body { overflow-x: hidden; }

/* Botones: el diseño usa 46 px de alto / 16 px de texto */
.btn--light {
  --btn-bg: var(--color-surface);
  --btn-fg: var(--color-text);
  --btn-bd: var(--color-border);
}
.btn--light:hover { --btn-bg: var(--gray-50); box-shadow: var(--shadow-sm); }
.btn--light:active { --btn-bg: var(--gray-100); }

/* Eyebrows */
.eyebrow--lg { font-size: var(--text-eyebrow); }
.eyebrow--pill {
  padding: 0.375rem 1.5rem;
  background-color: var(--color-surface);
  border-radius: var(--radius-pill);
}

/* Título de sección (30 px, dos líneas con la segunda en rojo) */
.section-title {
  font-size: var(--title-size);
  font-weight: var(--weight-extrabold);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
}
.section__header { gap: var(--space-4); margin-bottom: clamp(var(--space-10), 6vw, 4.5rem); }
.section__header--tight { margin-bottom: clamp(var(--space-8), 4vw, var(--space-12)); }
.section__lead {
  font-size: var(--lead-size);
  line-height: 1.6;
  color: var(--color-text-body);
  max-width: none;
}
.section__cta { display: flex; justify-content: center; margin-top: var(--space-12); }

/* Contenedor de 1216 px (header, pasos) */
.container--xl {
  max-width: calc(1216px + (var(--stage-inset) * 2));
  padding-inline: max(var(--space-4), var(--stage-inset));
}


/* ==========================================================================
   3. HEADER OSCURO (transparente sobre el hero, sólido al hacer scroll)
   ========================================================================== */
.site-header--dark {
  position: fixed;
  inset: 0 0 auto 0;
  background-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color: var(--color-text-inverse);
  transition: background-color var(--duration-slow) var(--ease-standard), border-color var(--duration-base);
}
.site-header--dark.is-scrolled {
  background-color: rgba(10, 10, 11, 0.9);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
.site-header--dark .site-header__inner { justify-content: space-between; gap: var(--space-6); }
.site-header--dark .site-header__cta { margin-left: 0; }
.site-header--dark .nav { gap: var(--space-8); }
.site-header--dark .nav__link { font-size: var(--text-md); color: var(--color-text-inverse); }
.site-header--dark .nav__link:hover { color: var(--red-300); }
.site-header--dark .nav-toggle { color: var(--color-text-inverse); }
.nav__cta { display: none; }


/* ==========================================================================
   4. HERO
   ========================================================================== */
.hero--dark {
  background: var(--gray-950);
  color: var(--color-text-inverse);
  min-height: clamp(640px, 68.5vw, 900px);
  padding-top: var(--header-h);
}
.hero--dark .hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.25) 42%, rgba(0, 0, 0, 0) 62%);
}
.hero--dark .hero__media img { object-position: 70% center; }
.hero__container { flex: 1; display: flex; }
.hero--dark .hero__content {
  max-width: 560px;
  gap: 0;
  padding-block: var(--space-12) var(--space-10);
  justify-content: flex-start;
}
.hero__eyebrow {
  margin-left: var(--space-4);
  color: var(--color-text-inverse);
}
.hero__eyebrow::before { width: 9px; height: 9px; margin-right: var(--space-1); }
.hero__title {
  max-width: 560px;
  margin-top: var(--space-12);
  text-wrap: wrap;
  font-size: var(--hero-title-size);
}
.hero--dark .hero__text {
  margin-top: var(--space-12);
  max-width: 500px;
  font-size: var(--text-lead);
  line-height: 1.55;
  color: var(--color-text-inverse);
}
.hero--dark .hero__actions { margin-top: var(--space-12); gap: var(--space-4); }

.hero__trust { position: relative; z-index: 1; padding-bottom: clamp(var(--space-10), 7vw, 6.25rem); }
.trust-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4) clamp(var(--space-8), 6vw, 4.5rem);
}
.trust-list__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-size: clamp(var(--text-sm), 0.85rem + 0.2vw, 1.0625rem);
  font-weight: var(--weight-medium);
}
.trust-list__item img { width: auto; height: 20px; }


/* ==========================================================================
   5. ALIANZA (stat cards + marcas)
   ========================================================================== */
.alliance { padding-top: clamp(var(--space-12), 5.5vw, 4.5rem); padding-bottom: clamp(var(--space-12), 7.5vw, 6.25rem); }
.alliance__slider { max-width: 642px; margin-inline: auto; }
.alliance__slider:not(.swiper-initialized) .alliance__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 21px 20px; }

.stat-card {
  position: relative;
  height: 100%;
  padding: var(--space-6);
  background-color: var(--color-surface);
  border: var(--border-width) solid var(--color-border-soft);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out);
}
.stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.stat-card__icon { position: absolute; top: var(--space-6); right: var(--space-6); width: 24px; height: 24px; object-fit: contain; }
.stat-card__value {
  font-size: clamp(2.5rem, 2rem + 1.4vw, 3rem);
  font-weight: var(--weight-bold);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.stat-card__value--accent { color: var(--color-primary); }
.stat-card__title { margin-top: var(--space-5); font-size: var(--text-lg); font-weight: var(--weight-semibold); }
.stat-card__text { margin-top: var(--space-2); font-size: var(--text-md); line-height: 1.6; color: var(--color-text-body); }

.alliance__note {
  max-width: none;
  margin-top: var(--space-12);
  font-size: var(--text-md);
  font-style: italic;
  text-align: center;
  color: var(--color-text-muted);
}

.brands { margin-top: clamp(var(--space-16), 7vw, 5.75rem); text-align: center; }
.brands__eyebrow {
  font-size: var(--text-eyebrow);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-text-body);
}
.brands__title { max-width: none; margin-top: var(--space-1); font-size: var(--text-lg); font-weight: var(--weight-semibold); }
.brands__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: center;
  justify-items: center;
  gap: var(--space-8);
  margin-top: var(--space-8);
}
.brands__list img { width: auto; height: clamp(36px, 4.4vw, 56px); max-width: 100%; object-fit: contain; }


/* ==========================================================================
   6. STAGE OSCURO (socio + portafolio en un solo bloque redondeado)
   ========================================================================== */
.stage {
  margin-inline: var(--stage-inset);
  border-radius: var(--radius-stage);
  overflow: hidden;
  background: #0A0A0B url("assets/img/wallpaper-section.webp") center top / 100% 100% no-repeat;
  color: var(--color-text-inverse);
}
.stage__section { padding-top: clamp(var(--space-16), 9vw, 7.25rem); }
.stage__section:last-child { padding-bottom: clamp(var(--space-16), 14vw, 11.25rem); }
.stage .section__lead { color: var(--color-text-dark-muted); }

/* Socio comercial */
.partner__grid {
  display: grid;
  grid-template-columns: minmax(0, 578px) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-12);
  max-width: 1130px;
  margin-inline: auto;
}
.partner__list { display: grid; gap: var(--space-4); }
.benefit {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-6);
  background-color: var(--color-surface-dark);
  border-radius: var(--radius-sm);
}
.benefit__icon { width: 48px; height: 48px; border-radius: 10px; }
.benefit__title { font-size: var(--text-lg); font-weight: var(--weight-semibold); line-height: 1.5; }
.benefit__text { margin-top: var(--space-2); font-size: var(--text-md); line-height: 1.65; color: var(--color-text-dark-muted); }
.partner__media { display: flex; justify-content: center; }
.partner__media img { width: min(100%, 540px); filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.45)); }

/* Portafolio */
.portfolio { padding-top: clamp(var(--space-12), 8vw, 6.75rem); }
.portfolio__slider { max-width: 1108px; margin-inline: auto; }
.portfolio__slider:not(.swiper-initialized) .portfolio__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; }
.portfolio__slider:not(.swiper-initialized) .portfolio__wide { grid-column: span 2; }

.product-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--space-6);
  background-color: var(--color-surface-dark-strong);
  border-radius: var(--radius-lg);
}
.product-card__media { width: 100%; border-radius: var(--radius-xs); }
.product-card__title { margin-top: var(--space-5); font-size: var(--text-xl); font-weight: var(--weight-semibold); }
.product-card__text { margin-top: var(--space-4); font-size: var(--text-md); line-height: 1.65; color: var(--color-text-dark-muted); }
.product-card__meta {
  margin-top: auto;
  padding-top: var(--space-6);
}
.product-card__meta::before {
  content: "";
  display: block;
  height: 1px;
  margin-bottom: var(--space-6);
  background-color: rgba(255, 255, 255, 0.55);
}
.product-card__label { font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.product-card__detail { margin-top: var(--space-1); font-size: var(--text-sm); line-height: 1.45; color: var(--color-text-dark-muted); }

.product-card--horizontal {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
}
.product-card--horizontal .product-card__body { display: flex; flex-direction: column; height: 100%; }
.product-card--horizontal .product-card__title { margin-top: 0; }


/* ==========================================================================
   7. PASOS (acordeón con imagen sincronizada)
   ========================================================================== */
.steps-section { padding-top: clamp(var(--space-12), 6vw, 4.75rem); padding-bottom: clamp(var(--space-10), 5vw, 4rem); }
.steps {
  display: grid;
  grid-template-columns: minmax(0, 695fr) minmax(0, 486fr);
  gap: 34px;
  align-items: stretch;
}
.steps__list { display: grid; gap: var(--space-5); align-content: start; }

.step {
  background-color: var(--color-surface-soft);
  border: var(--border-width) solid var(--color-border-soft);
  border-radius: var(--radius-sm);
  transition: background-color var(--duration-slow) var(--ease-standard), border-color var(--duration-slow) var(--ease-standard), box-shadow var(--duration-slow);
}
.step:hover { border-color: var(--color-border-strong); }
.step.is-active { background-color: var(--red-50); border-color: var(--red-400); box-shadow: 0 1px 2px rgba(239, 16, 24, 0.08); }

.step__head {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-4);
  width: 100%;
  padding: var(--space-6);
  text-align: left;
}
.step__num {
  font-size: clamp(1.625rem, 1.3rem + 0.8vw, 1.875rem);
  font-weight: var(--weight-semibold);
  line-height: 1;
  color: var(--gray-300);
  transition: color var(--duration-slow);
}
.step.is-active .step__head { padding-bottom: var(--space-3); }
.step.is-active .step__num { font-weight: var(--weight-bold); color: var(--color-primary); }
.step__title { font-size: var(--text-lg); font-weight: var(--weight-semibold); line-height: 1.3; }
.step__tag {
  padding: 2px var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  line-height: 1.5;
  white-space: nowrap;
  color: var(--gray-600);
  background-color: var(--gray-100);
  border-radius: var(--radius-xs);
  transition: background-color var(--duration-slow), color var(--duration-slow);
}
.step.is-active .step__tag { color: var(--color-on-primary); background-color: var(--color-primary); }

.step__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--duration-slow) var(--ease-out);
}
.step.is-active .step__panel { grid-template-rows: 1fr; }
.step__panel-inner { overflow: hidden; }
.step__text {
  max-width: none;
  padding-inline: calc(var(--space-6) + 44px + var(--space-4)) var(--space-6);
  font-size: var(--text-md);
  line-height: 1.65;
  color: var(--color-text-body);
}
.step__highlight {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  max-width: none;
  padding: var(--space-3) var(--space-6) var(--space-6) calc(var(--space-6) + 44px + var(--space-4));
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--color-primary);
}
.step__highlight svg { width: 16px; height: 16px; flex-shrink: 0; }

.steps__media {
  position: relative;
  min-height: 320px;
  overflow: hidden;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  background-color: var(--gray-900);
}
.steps__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.03);
  transition: opacity 480ms var(--ease-standard), transform 900ms var(--ease-out);
}
.steps__img.is-active { opacity: 1; transform: none; }


/* ==========================================================================
   8. RESPALDO INSTITUCIONAL (tabla comparativa)
   ========================================================================== */
.backing { padding-block: 0; }
.backing__panel {
  margin-inline: clamp(0px, 3.4vw, 44px);
  padding-block: clamp(var(--space-12), 7.5vw, 6rem) clamp(var(--space-10), 6vw, 4.75rem);
  background-color: var(--color-surface-soft);
  border: var(--border-width) solid var(--color-border-soft);
  border-radius: var(--radius-panel);
}

.compare-table {
  max-width: 980px;
  margin-inline: auto;
  overflow: hidden;
  border: var(--border-width) solid var(--color-border-soft);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.compare-table__table { width: 100%; table-layout: fixed; }
.compare-table__table th,
.compare-table__table td { padding: var(--space-5) var(--space-6); vertical-align: middle; font-size: var(--text-md); line-height: 1.5; }
.compare-table__table thead th {
  font-weight: var(--weight-semibold);
  background-color: var(--gray-100);
  color: var(--gray-600);
  text-align: center;
}
.compare-table__table thead th:first-child { width: 20.7%; padding-inline: var(--space-5); text-align: left; white-space: nowrap; color: var(--color-text); }
.compare-table__table thead th:nth-child(2) { width: 45.6%; }
.compare-table__table thead th.compare-table__brand {
  font-weight: var(--weight-bold);
  color: var(--color-primary);
  background-color: var(--red-50);
  border-left: var(--border-width) solid var(--color-border-soft);
}
.compare-table__table tbody th,
.compare-table__table tbody td:nth-child(2) {
  color: var(--color-text-inverse);
  background-color: var(--color-table-dark);
  border-top: var(--border-width) solid var(--color-table-line);
}
.compare-table__table tbody th { font-weight: var(--weight-semibold); text-align: center; border-right: var(--border-width) solid var(--color-table-line); }
.compare-table__table tbody td:nth-child(2) { padding-inline: var(--space-10); }
.compare-table__table tbody td:last-child {
  background-color: var(--red-50);
  border-top: var(--border-width) solid var(--red-100);
}
.compare-table__yes {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: var(--space-4);
}
.compare-table__yes::before {
  content: "";
  width: 22px;
  height: 22px;
  border-radius: var(--radius-circle);
  background: var(--color-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22' fill='none'%3E%3Cpath d='m6.5 11.3 3 3 6-6.3' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
}


/* ==========================================================================
   9. PERFIL ("¿Esta oportunidad es para ti?")
   ========================================================================== */
.audience { padding-top: clamp(var(--space-12), 6vw, 4.75rem); padding-bottom: var(--space-10); }
.audience__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 441px);
  align-items: center;
  gap: var(--space-24);
  max-width: 870px;
  margin-inline: auto;
}
.audience__media { display: flex; justify-content: center; }
.audience__media img { width: min(100%, 265px); }
.audience__list { display: grid; gap: var(--space-5); }
.profile-item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-2) var(--space-4) var(--space-2) var(--space-3);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  background-color: var(--color-surface-soft);
  border: var(--border-width) solid var(--color-border-soft);
  border-radius: var(--radius-sm);
  transition: transform var(--duration-base) var(--ease-out), border-color var(--duration-base), box-shadow var(--duration-base);
}
.profile-item:hover { transform: translateX(4px); border-color: var(--red-200); box-shadow: var(--shadow-sm); }
.profile-item__icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  color: var(--color-primary);
  background-color: var(--color-surface);
  border: var(--border-width) solid var(--color-border-soft);
  border-radius: var(--radius-xs);
}
.profile-item__icon svg { width: 22px; height: 22px; }


/* ==========================================================================
   10. FORMULARIO + intl-tel-input
   ========================================================================== */
.lead { padding-inline: var(--space-4); border-top: var(--border-width) solid var(--color-border-soft); padding-top: 0; }
.lead__panel {
  max-width: 930px;
  margin-inline: auto;
  padding: clamp(var(--space-10), 5vw, var(--space-12)) var(--space-4) clamp(14rem, 34vw, 23.75rem);
  border-radius: var(--radius-panel);
  background: #000 url("assets/img/form-bg.webp") center bottom / 100% auto no-repeat;
  color: var(--color-text-inverse);
}
.lead__header { margin-bottom: var(--space-12); }
.lead__header .section__lead { max-width: 680px; color: rgba(255, 255, 255, 0.88); }

.lead__card {
  max-width: 727px;
  margin-inline: auto;
  padding: clamp(var(--space-6), 6vw, var(--space-12));
  background-color: rgba(0, 0, 0, 0.62);
  border: var(--border-width) solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.lead-form .form-grid { gap: var(--space-6) var(--space-4); }
.lead-form .field { gap: var(--space-2); min-width: 0; }
.lead-form .field__label { color: var(--color-text-inverse); }
.lead-form .input,
.lead-form .select {
  min-height: 44px;
  padding-block: var(--space-2);
  font-size: var(--text-md);           /* ≥16 px evita zoom en iOS */
  border-radius: var(--radius-xs);
  border-color: transparent;
}
.lead-form .select { color: var(--color-text); }
.lead-form .field__error { color: var(--red-300); }
.lead-form .field.is-invalid .input,
.lead-form .field.is-invalid .select { border-color: var(--color-error); }

/* Checkbox cards */
.choice-group { border: 0; padding: 0; margin: 0; }
.choice-group .field__label { margin-bottom: var(--space-2); padding: 0; }
.choice-group__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); }
.choice {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 66px;
  padding: var(--space-3) var(--space-5);
  color: var(--color-text);
  background-color: var(--color-surface);
  border: var(--border-width-thick) solid transparent;
  border-radius: var(--radius-xs);
  cursor: pointer;
  transition: border-color var(--duration-fast), background-color var(--duration-fast);
}
.choice:hover { background-color: var(--gray-25); }
.choice:has(.choice__input:checked) { border-color: var(--color-primary); background-color: var(--red-50); }
.choice:has(.choice__input:focus-visible) { box-shadow: var(--shadow-focus); }
.choice__input {
  appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin: 0;
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: 3px;
  background: var(--color-surface) center / 12px no-repeat;
  transition: background-color var(--duration-fast), border-color var(--duration-fast);
}
.choice__input:checked {
  border-color: var(--color-primary);
  background-color: var(--color-primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='m2.5 6.2 2.3 2.3 4.7-5' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.choice__input:focus-visible { outline: none; }
.choice__label { font-size: var(--text-sm); font-weight: var(--weight-medium); line-height: 1.4; }

.lead-form__actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-8);
}
.lead-form__submit { position: relative; flex-shrink: 0; --btn-px: var(--space-5); }
.lead-form__legal { max-width: 34ch; font-size: var(--text-xs); line-height: 1.4; color: rgba(255, 255, 255, 0.9); }
.lead-form__spinner {
  display: none;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: var(--radius-circle);
  animation: spin 700ms linear infinite;
}
.lead-form.is-sending .lead-form__spinner { display: inline-block; }
.lead-form.is-sending .lead-form__submit { pointer-events: none; opacity: 0.85; }
.lead-form__status { margin-top: var(--space-4); font-size: var(--text-sm); color: var(--red-300); }
.lead-form__status:empty { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }

.lead-success { display: grid; justify-items: center; gap: var(--space-3); text-align: center; padding-block: var(--space-8); }
.lead-success[hidden] { display: none; }
.lead-success:focus { outline: none; }
.lead-success__icon { width: 56px; height: 56px; color: var(--color-primary); }
.lead-success__title { font-size: var(--text-2xl); }
.lead-success__text { color: rgba(255, 255, 255, 0.82); }

/* intl-tel-input */
.iti { width: 100%; color: black; }
.lead-form .iti .input { padding-left: 96px; }
.iti__selected-country { border-radius: var(--radius-xs) 0 0 var(--radius-xs); }
.iti__selected-country-primary { padding-inline: var(--space-3) var(--space-2); }
.iti__selected-country:hover .iti__selected-country-primary,
.iti__selected-country[aria-expanded="true"] .iti__selected-country-primary { background-color: var(--gray-100); }
.iti__selected-dial-code { font-size: var(--text-md); color: var(--color-text); }
.iti__arrow { border-top-color: var(--gray-500); }
.iti__arrow--up { border-bottom-color: var(--gray-500); }

.iti__dropdown-content {
  margin-top: 6px;
  overflow: hidden;
  background-color: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
}
.iti__search-input {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-md);
  border: 0;
  border-bottom: var(--border-width) solid var(--color-border);
  outline: none;
}
.iti__search-input:focus { border-bottom-color: var(--color-primary); }
.iti__country-list { max-height: 240px; font-size: var(--text-sm); scrollbar-width: thin; }
.iti__country { padding: var(--space-2) var(--space-4); gap: var(--space-2); transition: background-color var(--duration-fast); }
.iti__country.iti__highlight { background-color: var(--red-50); }
.iti__country[aria-selected="true"] { font-weight: var(--weight-semibold); }
.iti__country[aria-selected="true"] .iti__country-name { color: var(--color-primary); }
.iti__dial-code { color: var(--color-text-muted); }
.iti--fullscreen-popup .iti__dropdown-content { margin-top: 0; border-radius: var(--radius-md); }


/* ==========================================================================
   11. FAQ
   ========================================================================== */
.faq { padding-top: clamp(var(--space-16), 9vw, 7.75rem); padding-bottom: clamp(var(--space-12), 5.3vw, 4.25rem); }
.faq__grid {
  display: grid;
  grid-template-columns: minmax(0, 510fr) minmax(0, 554fr);
  align-items: start;
  gap: clamp(var(--space-8), 6.3vw, 5rem);
  max-width: 1145px;
  margin-inline: auto;
}
.faq__media { overflow: hidden; border-radius: var(--radius-xl); }
.faq__media img { width: 100%; aspect-ratio: 510 / 638; object-fit: cover; }
.faq__list { margin-top: var(--space-10); gap: 13px; }
.faq .accordion__item { background-color: var(--color-surface-soft); border-color: var(--color-border-soft); border-radius: var(--radius-sm); }
.faq .accordion__trigger { padding: var(--space-5) var(--space-6) var(--space-5) var(--space-6); font-size: var(--text-lg); }
.faq .accordion__trigger::after {
  content: "";
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  background-color: var(--gray-500);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='m4 6 4 4 4-4' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='m4 6 4 4 4-4' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.faq .accordion__item[open] > .accordion__trigger::after { content: ""; transform: rotate(180deg); background-color: var(--color-primary); }
.faq .accordion__panel { padding: 0 var(--space-6) var(--space-5); font-size: var(--text-md); color: var(--color-text-body); }
.faq .accordion__panel p { max-width: none; }


/* ==========================================================================
   12. CTA FINAL
   ========================================================================== */
.cta-banner {
  position: relative;
  overflow: hidden;
  background-color: #EDEDEF;
}
.cta-banner__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
}
.cta-banner__inner {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(440px, 43.75vw, 600px);
}
.cta-banner__content { max-width: 520px; padding-block: var(--space-16); }
.cta-banner .section-title { margin-top: var(--space-4); }
.cta-banner__text { margin-top: var(--space-4); font-size: var(--lead-size); line-height: 1.55; color: var(--color-text-body); }
.cta-banner__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-16); }
.cta-banner .btn--secondary { --btn-bd: var(--color-border); }


/* ==========================================================================
   FOOTER (ajustes al del toolkit)
   ========================================================================== */
.site-footer { font-size: var(--text-md); }
@media (min-width: 1025px) { .site-footer__grid { grid-template-columns: 1fr 1fr 1.4fr 0.55fr; } }
.site-footer .site-footer__title { font-size: var(--text-md); }
.site-footer__brand img { width: 172px; }
.site-footer__legal { margin-top: var(--space-6); }
.site-footer__list--plain li { color: var(--color-text-inverse-muted); }
.site-footer__email { font-weight: var(--weight-semibold); }
.site-footer__cta { margin-top: var(--space-8); font-size: var(--text-md); }
.site-footer__social img { width: auto; height: 16px; }
.site-footer__social .site-footer__yt { height: 18px; }
.site-footer__bottom { border-top-color: rgba(255, 255, 255, 0.5); font-size: var(--text-md); }


/* ==========================================================================
   13. SLIDER (Swiper)
   --------------------------------------------------------------------------
   data-slider-desktop="grid": en desktop manda el grid CSS (bento / 2×2) y
   Swiper no existe → no hay swipe. Bajo 768 px se monta Swiper.
   Sin el atributo: Swiper siempre activo con allowTouchMove:false en desktop.
   ========================================================================== */
.slider { overflow: visible; }
.slider:not(.swiper-initialized) .swiper-slide { width: auto; height: auto; }
.slider .swiper-slide { height: auto; }
.slider__pagination { display: none; }
.slider__pagination .swiper-pagination-bullet { background: var(--gray-400); opacity: 1; transition: width var(--duration-base), background-color var(--duration-base); }
.slider__pagination .swiper-pagination-bullet-active { width: 20px; border-radius: 4px; background: var(--color-primary); }
.slider__pagination--light .swiper-pagination-bullet { background: rgba(255, 255, 255, 0.35); }
.slider__pagination--light .swiper-pagination-bullet-active { background: var(--color-primary); }


/* ==========================================================================
   14. REVEAL / MOVIMIENTO
   El contenido es visible sin JS; main.js agrega .js-reveal al <html> y el
   IntersectionObserver revela. Un timeout de 6 s revela todo por seguridad.
   ========================================================================== */
.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
.js-reveal [data-reveal].is-visible { opacity: 1; transform: none; }
.reveal[data-split] { opacity: 1; transform: none; }

/* Entrada del hero (independiente del observer) */
.js-reveal .hero [data-reveal] { transition-duration: 900ms; }
.hero__media img { animation: hero-zoom 2.4s var(--ease-out) both; }
@keyframes hero-zoom { from { transform: scale(1.06); } to { transform: none; } }


/* ==========================================================================
   15. RESPONSIVE
   ========================================================================== */

/* Navegación: 6 links no caben bajo ~1180 px → hamburguesa */
@media (max-width: 1180px) {
  .site-header--dark .nav-toggle { display: inline-grid; place-items: center; order: 3; }
  .site-header--dark .site-header__cta { margin-left: auto; }
  .site-header--dark .nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    flex-direction: column;
    gap: 0;
    padding: var(--space-2) var(--gutter) var(--space-6);
    background-color: rgba(10, 10, 11, 0.97);
    border-bottom: var(--border-width) solid rgba(255, 255, 255, 0.08);
    box-shadow: var(--shadow-lg);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--duration-base), transform var(--duration-base), visibility var(--duration-base);
  }
  .site-header--dark .nav.is-open { opacity: 1; visibility: visible; transform: none; }
  .site-header--dark .nav__link { padding-block: var(--space-4); border-bottom: var(--border-width) solid rgba(255, 255, 255, 0.08); }
  .site-header--dark.is-menu-open { background-color: rgba(10, 10, 11, 0.97); }
  .nav__cta { display: inline-flex; margin-top: var(--space-5); }
}

@media (max-width: 1024px) {
  .partner__grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--space-8); }
  .steps { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--space-6); }
  .audience__grid { gap: var(--space-12); }
  .compare-table__table th,
  .compare-table__table td { padding: var(--space-4); font-size: var(--text-sm); }
  .compare-table__table tbody td:nth-child(2) { padding-inline: var(--space-5); }
  .choice-group__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cta-banner__media { object-position: 70% center; opacity: 0.55; }
}

@media (max-width: 768px) {
  :root { --header-h: 4rem; }

  .eyebrow--pill { padding: 0.375rem 1rem; }
  .site-header--dark .site-header__cta { display: none; }
  .site-header--dark .nav-toggle { margin-left: auto; }

  /* Hero: imagen de fondo con velo oscuro para legibilidad */
  .hero--dark { min-height: auto; }
  .hero--dark .hero__media { position: absolute; aspect-ratio: auto; }
  .hero--dark .hero__media img { object-position: 72% center; }
  .hero--dark .hero__media::after { background: linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.7) 55%, rgba(0, 0, 0, 0.85) 100%); }
  .hero--dark .hero__content { padding-block: var(--space-10) var(--space-8); }
  .hero__eyebrow { margin-left: 0; }
  .hero__title { margin-top: var(--space-6); }
  .hero--dark .hero__text { margin-top: var(--space-6); font-size: var(--text-md); }
  .hero--dark .hero__actions { margin-top: var(--space-8); }
  .trust-list { flex-direction: column; align-items: flex-start; gap: var(--space-3); }

  /* Sliders móviles: los grids se vuelven carrusel */
  .slider__pagination { display: block; position: static; margin-top: var(--space-5); }
  .alliance__slider,
  .portfolio__slider { margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); overflow: hidden; }
  .product-card--horizontal { display: flex; }
  .product-card--horizontal .product-card__title { margin-top: var(--space-5); }

  .brands__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8) var(--space-6); }

  .stage { border-radius: var(--radius-stage); }
  .partner__grid { grid-template-columns: 1fr; }
  .partner__media { order: -1; }
  .partner__media img { width: min(60%, 220px); }
  .benefit { grid-template-columns: 1fr; gap: var(--space-4); padding: var(--space-5); }

  .steps { grid-template-columns: 1fr; }
  .steps__media { order: -1; min-height: 0; aspect-ratio: 4 / 3; }
  .step__head { grid-template-columns: 36px minmax(0, 1fr); padding: var(--space-5); row-gap: var(--space-2); }
  .step__tag { grid-column: 2; justify-self: start; }
  .step__text { padding-inline: calc(var(--space-5) + 36px + var(--space-4)) var(--space-5); margin-top: calc(var(--space-2) * -1); }
  .step__highlight { padding: var(--space-3) var(--space-5) var(--space-5) calc(var(--space-5) + 36px + var(--space-4)); align-items: flex-start; }
  .step__highlight svg { margin-top: 0.2em; }

  /* Tabla → tarjetas apiladas */
  .backing__panel { padding-inline: 0; }
  .compare-table { border: 0; box-shadow: none; overflow: visible; background: none; }
  .compare-table__table thead { display: none; }
  .compare-table__table,
  .compare-table__table tbody,
  .compare-table__table tr,
  .compare-table__table th,
  .compare-table__table td { display: block; width: 100%; }
  .compare-table__table tr {
    overflow: hidden;
    margin-bottom: var(--space-4);
    border: var(--border-width) solid var(--color-border-soft);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xs);
  }
  .compare-table__table tbody th { text-align: left; border: 0; font-size: var(--text-md); }
  .compare-table__table tbody td:nth-child(2) { border-top: 0; padding-inline: var(--space-4); color: rgba(255, 255, 255, 0.82); }
  .compare-table__table tbody td:last-child { border-top: 0; }
  .compare-table__table td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: var(--space-1);
    font-size: var(--text-2xs);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    opacity: 0.7;
  }
  .compare-table__table td:last-child[data-label]::before { color: var(--color-primary); opacity: 1; }

  .audience__grid { grid-template-columns: 1fr; gap: var(--space-8); }
  .audience__media img { width: min(55%, 200px); }
  .profile-item { font-size: var(--text-md); }

  .lead { padding-inline: var(--space-3); }
  .lead__panel { padding-inline: var(--space-3); }
  .lead-form .form-grid { grid-template-columns: 1fr; }
  .lead-form__actions { flex-direction: column; align-items: stretch; text-align: center; }
  .lead-form__submit { white-space: normal; font-size: var(--text-md); line-height: 1.3; padding-block: var(--space-3); }
  .lead-form__legal { max-width: none; }

  .faq__grid { grid-template-columns: 1fr; }
  .faq__media { display: none; }
  .faq__list { margin-top: 0; }
  .faq .accordion__trigger { font-size: var(--text-md); padding: var(--space-4) var(--space-5); }

  .cta-banner__inner { flex-direction: column; align-items: stretch; min-height: 0; padding-inline: var(--gutter); }
  .cta-banner__media { position: relative; order: 2; height: auto; aspect-ratio: 16 / 10; object-position: 88% center; opacity: 1; }
  .cta-banner { display: flex; flex-direction: column; }
  .cta-banner__content { padding-block: var(--space-12) var(--space-6); }
  .cta-banner__actions { margin-top: var(--space-8); }
}

@media (max-width: 480px) {
  .hero--dark .hero__actions .btn { width: 100%; }
  .choice-group__grid { grid-template-columns: 1fr 1fr; }
  .choice { padding-inline: var(--space-3); min-height: 58px; }
  .cta-banner__actions .btn { width: 100%; }
}


/* ==========================================================================
   16. PÁGINA DE GRACIAS (gracias.html)
   ========================================================================== */
.site-header--light { background-color: rgba(255, 255, 255, 0.96); }
.site-header--light .site-header__inner { gap: var(--space-5); }
.site-header--light .nav { gap: var(--space-8); }
.site-header--light .nav__link { font-size: var(--text-md); }

/* tipografía de .thanks: toolkit 6.14 */

.thanks__grid {
  display: grid;
  grid-template-columns: minmax(0, 380fr) minmax(0, 804fr);
  gap: var(--space-6);
  max-width: 1280px;
  margin: clamp(var(--space-8), 4vw, 3.25rem) auto 0;
  padding-right: clamp(var(--space-4), 5.6vw, 4.5rem);
}
/* Producto recortado contra el borde izquierdo, como en el diseño */
.thanks__media { position: relative; overflow: hidden; min-height: 100%; }
.thanks__media img {
  position: absolute;
  top: 0;
  left: -40%;
  width: 162%;
  max-width: none;
}
.thanks__booking {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: clamp(var(--space-12), 6vw, 5rem);
}

.booking-card {
  width: 100%;
  overflow: hidden;
  background-color: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
}
.booking-card.is-loaded { height: 680px; min-width: 320px; }
.booking-card__fallback {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: var(--space-4);
  min-height: 320px;
  padding: var(--space-8);
  text-align: center;
}
.booking-card__text { max-width: 42ch; color: var(--color-text-muted); }
.booking-card__fallback .btn { margin-top: var(--space-2); }

.thanks__booking .thanks__tagline { max-width: none; margin-top: var(--space-12); text-align: center; }
.thanks__back { margin-top: var(--space-6); }

@media (max-width: 1180px) {
  .site-header--light .nav { gap: var(--space-5); }
}

@media (max-width: 768px) {
  .thanks__grid { grid-template-columns: 1fr; padding-inline: var(--gutter); }
  .thanks__media { display: none; }
  .booking-card.is-loaded { height: 1040px; }
  .booking-card,
  .booking-card { min-height: 0; }
}