/* =========================================================
   BrandStart® — Home 2026 · layout + componentes
   Depende de css/tokens.css
   ========================================================= */

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--bs-font-sans);
  font-size: var(--bs-fs-body);
  line-height: var(--bs-lh-body);
  color: var(--bs-text);
  background: var(--bs-grad-page);
  background-attachment: fixed;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; }

:focus-visible {
  outline: 3px solid var(--bs-blue);
  outline-offset: 2px;
  border-radius: 6px;
}

.skip-link {
  position: absolute; left: -999px; top: 0;
  background: var(--bs-ink); color: #fff;
  padding: 12px 18px; border-radius: 0 0 12px 0;
  z-index: 100; font-weight: var(--bs-w-semi);
}
.skip-link:focus { left: 0; }

.page { position: relative; isolation: isolate; }
.container { width: min(var(--bs-container), calc(100% - 48px)); margin-inline: auto; }

/* ---------- Tipografía base ---------- */

h1, h2, h3 { margin: 0; }

.bs-h2 {
  font-size: var(--bs-fs-h2);
  line-height: var(--bs-lh-h2);
  letter-spacing: var(--bs-ls-h2);
  font-weight: var(--bs-w-display);
  text-wrap: balance;
  color: var(--bs-ink);
}

.eyebrow {
  display: block;
  font-size: var(--bs-fs-eyebrow);
  letter-spacing: var(--bs-ls-eyebrow);
  text-transform: uppercase;
  font-weight: var(--bs-w-eyebrow);
  color: var(--bs-blue);
  margin-bottom: 18px;
}
.eyebrow.on-dark { color: var(--bs-confianza); }

.lead {
  font-size: var(--bs-fs-lead);
  line-height: var(--bs-lh-lead);
  letter-spacing: var(--bs-ls-lead);
  color: var(--bs-text-muted);
  text-wrap: pretty;
}

/* Símbolo ® como superíndice balanceado.
   El walker en primitives.js envuelve cada ® en <sup class="reg">.
   Aquí controlamos tamaño y posición para que no domine el display.
   line-height:0 evita que el sup altere la altura de la línea. */
sup.reg {
  font-size: .58em;
  vertical-align: super;
  line-height: 0;
  font-weight: inherit;
  letter-spacing: normal;
  margin-left: 0;
}

/* En uppercase con letter-spacing positivo (eyebrow, pill, nav, labels),
   el carácter anterior arrastra su tracking al ® — se ve despegado.
   Margen negativo lo recupera al hueco visual correcto. */
.eyebrow sup.reg,
.pill sup.reg,
.nav-top sup.reg,
.nav-dropdown a sup.reg,
.mobile-link sup.reg,
.aiia-catalog-label sup.reg,
.aiia-mini-tag sup.reg {
  margin-left: -.08em;
}

/* ---------- Botones ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  border-radius: var(--bs-radius-pill);
  padding: 15px 24px;
  font-family: inherit;
  font-weight: var(--bs-w-cta);
  font-size: var(--bs-fs-cta);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform var(--bs-dur) var(--bs-ease),
              box-shadow var(--bs-dur) var(--bs-ease),
              background var(--bs-dur) var(--bs-ease),
              border-color var(--bs-dur) var(--bs-ease);
}
.btn.primary  { background: var(--bs-blue); color: #fff; box-shadow: var(--bs-shadow-cta); }
.btn.primary:hover { background: var(--bs-blue-dark); transform: translateY(-2px); }
.btn.dark { background: var(--bs-ink); color: #fff; box-shadow: var(--bs-shadow-cta); }
.btn.dark:hover { background: var(--bs-black); transform: translateY(-2px); }
.btn.secondary { background: #fff; color: var(--bs-ink); border-color: var(--bs-line-strong); }
.btn.secondary:hover { background: var(--bs-apertura); border-color: var(--bs-blue); }
.btn.ghost { background: transparent; color: var(--bs-ink); }
.btn.ghost:hover { background: var(--bs-apertura); }
.btn.on-dark { background: #fff; color: var(--bs-ink); }
.btn.on-dark:hover { background: var(--bs-apertura); transform: translateY(-2px); }
.btn.sm { padding: 11px 18px; }

.btn .arrow { transition: transform var(--bs-dur) var(--bs-ease); }
.btn:hover .arrow { transform: translateX(3px); }

/* ---------- Pill / chip (referencia-ux) ---------- */

.pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: var(--bs-radius-pill);
  font-size: 12px; font-weight: var(--bs-w-eyebrow);
  letter-spacing: 0.08em; text-transform: uppercase;
  background: rgba(255,255,255,.68);
  border: 1px solid rgba(0,93,255,.16);
  color: var(--bs-blue-dark);
}
.pill .dot {
  width: 7px; height: 7px; border-radius: 999px; flex-shrink: 0;
  background: var(--bs-blue);
  box-shadow: 0 0 0 6px rgba(0,93,255,.11);
}
/* Chip de proof — micro-evidencia bajo el hero */
.pill.proof {
  background: rgba(255,255,255,.70);
  border: 1px solid rgba(5,5,5,.08);
  color: var(--bs-text-muted);
  font-weight: 650; font-size: 12px;
  letter-spacing: 0; text-transform: none;
  padding: 10px 12px;
}
.pill.on-dark {
  background: rgba(255,255,255,.07);
  border-color: var(--bs-on-dark-line);
  color: var(--bs-confianza);
}

/* ---------- Marca geométrica (índices de tarjeta) ---------- */

.mark {
  width: 46px; height: 46px; border-radius: var(--bs-radius-sm);
  background: var(--bs-apertura); color: var(--bs-blue);
  display: grid; place-items: center; flex-shrink: 0;
  font-weight: var(--bs-w-bold); font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.mark.on-dark { background: rgba(0,93,255,.16); color: var(--bs-confianza); }

/* =========================================================
   HEADER — nav flotante tipo pill
   ========================================================= */

.nav-wrap { position: sticky; top: 16px; z-index: 20; padding-top: 16px; pointer-events: none; }
.bs-nav {
  pointer-events: auto;
  position: relative; z-index: 2;
  width: min(var(--bs-container-nav), calc(100% - 48px));
  margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 10px 12px 10px 30px;
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: var(--bs-radius-pill);
  box-shadow: var(--bs-shadow-md);
}
.nav-brand { display: inline-flex; align-items: center; }
.nav-brand img { height: 22px; width: auto; display: block; }
.nav-links { display: flex; align-items: center; gap: 2px; }
.nav-item { position: relative; }

/* CTA del menú — en mayúsculas, 12px */
.bs-nav .btn { text-transform: uppercase; letter-spacing: 0.03em; font-size: 12px; }

/* Ítem de primer nivel — color #323232 */
.nav-top {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 14px; border-radius: var(--bs-radius-pill);
  font-family: inherit; font-size: 13px; color: #323232;
  text-transform: uppercase; letter-spacing: 0.02em;
  background: none; border: none; cursor: pointer;
  transition: background var(--bs-dur) var(--bs-ease);
}
.nav-top:hover { background: var(--bs-apertura); }
.nav-parent::after {
  content: ""; width: 6px; height: 6px; margin-top: -3px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--bs-dur) var(--bs-ease);
}
.nav-item:hover .nav-parent::after,
.nav-item:focus-within .nav-parent::after { transform: rotate(-135deg); margin-top: 2px; }

/* Submenú desplegable — sin borde, pop animado + entrada escalonada */
.nav-dropdown {
  position: absolute; top: calc(100% + 9px); left: 0;
  min-width: 248px;
  background: #fff;
  border-radius: var(--bs-radius-md);
  box-shadow: 0 1px 2px rgba(5,5,5,.05), 0 26px 60px rgba(0,34,120,.18);
  padding: 8px; display: grid; gap: 2px;
  transform-origin: top left;
  opacity: 0; visibility: hidden; transform: translateY(-10px) scale(.96);
  transition: opacity var(--bs-dur) var(--bs-ease),
              transform var(--bs-dur) var(--bs-ease),
              visibility var(--bs-dur);
}
/* Puente invisible — evita que el submenú se cierre al cruzar el hueco */
.nav-dropdown::before {
  content: ""; position: absolute; left: 0; right: 0; top: -9px; height: 9px;
}
.nav-item:hover .nav-dropdown,
.nav-item:focus-within .nav-dropdown {
  opacity: 1; visibility: visible; transform: translateY(0) scale(1);
}

.nav-dropdown a {
  position: relative;
  display: flex; align-items: center;
  padding: 10px 14px; border-radius: 12px;
  /* Sub-menú en mayúsculas con tracking para parear el resto del sistema
     editorial (eyebrow, nav-top, labels de catálogo). */
  font-size: 12px;
  font-weight: var(--bs-w-bold);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #323232; white-space: nowrap;
  opacity: 0;
  transition: background var(--bs-dur) var(--bs-ease),
              color var(--bs-dur) var(--bs-ease),
              padding-left var(--bs-dur) var(--bs-ease);
}
/* Barra de acento que crece a la izquierda */
.nav-dropdown a::before {
  content: ""; position: absolute; left: 6px; top: 50%;
  width: 3px; height: 0; transform: translateY(-50%);
  background: var(--bs-blue); border-radius: 999px;
  transition: height var(--bs-dur) var(--bs-ease);
}
/* Flecha que entra desde la derecha */
.nav-dropdown a::after {
  content: "→"; margin-left: auto; padding-left: 16px;
  opacity: 0; transform: translateX(-6px);
  transition: opacity var(--bs-dur) var(--bs-ease),
              transform var(--bs-dur) var(--bs-ease);
}
.nav-dropdown a:hover {
  background: var(--bs-apertura); color: var(--bs-blue-dark);
  padding-left: 20px;
}
.nav-dropdown a:hover::before  { height: 17px; }
.nav-dropdown a:hover::after   { opacity: 1; transform: translateX(0); }

/* Entrada escalonada de los ítems al abrir el submenú */
@keyframes navItemIn {
  from { opacity: 0; transform: translateX(-9px); }
  to   { opacity: 1; transform: translateX(0); }
}
:is(.nav-item:hover, .nav-item:focus-within) .nav-dropdown a {
  animation: navItemIn .34s var(--bs-ease) both;
}
:is(.nav-item:hover, .nav-item:focus-within) .nav-dropdown a:nth-child(2) { animation-delay: .05s; }
:is(.nav-item:hover, .nav-item:focus-within) .nav-dropdown a:nth-child(3) { animation-delay: .10s; }
:is(.nav-item:hover, .nav-item:focus-within) .nav-dropdown a:nth-child(4) { animation-delay: .15s; }

/* Botón hamburguesa — oculto en desktop, visible en ≤980px */
.nav-burger {
  display: none;
  flex-shrink: 0;
  width: 44px; height: 44px;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  border: none; background: none; cursor: pointer;
  border-radius: var(--bs-radius-pill);
  transition: background var(--bs-dur) var(--bs-ease);
}
.nav-burger:hover { background: var(--bs-apertura); }
.nav-burger span {
  display: block; width: 20px; height: 2px; border-radius: 2px;
  background: var(--bs-ink);
  transition: transform var(--bs-dur) var(--bs-ease),
              opacity var(--bs-dur) var(--bs-ease);
}
.nav-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity: 0; }
.nav-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Menú mobile — panel desplegable + scrim */
.mobile-menu { display: none; }
.mobile-scrim {
  position: fixed; inset: 0; z-index: 1;
  background: rgba(5,5,5,.42);
  opacity: 0; visibility: hidden;
  transition: opacity var(--bs-dur) var(--bs-ease), visibility var(--bs-dur);
}
.mobile-menu.open .mobile-scrim { opacity: 1; visibility: visible; }
.mobile-panel {
  position: absolute; z-index: 1;
  top: calc(100% + 10px); left: 50%;
  width: min(var(--bs-container-nav), calc(100% - 48px));
  max-height: calc(100vh - 130px); overflow-y: auto;
  pointer-events: auto;
  background: #fff;
  border-radius: var(--bs-radius-lg);
  box-shadow: var(--bs-shadow-lg);
  padding: 14px;
  display: grid; gap: 14px;
  opacity: 0; visibility: hidden;
  transform: translateX(-50%) translateY(-10px);
  transition: opacity var(--bs-dur) var(--bs-ease),
              transform var(--bs-dur) var(--bs-ease),
              visibility var(--bs-dur);
}
.mobile-menu.open .mobile-panel {
  opacity: 1; visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.mobile-nav { display: grid; }
.mobile-nav > *:not(:last-child) { border-bottom: 1px solid var(--bs-line); }

/* Grupo colapsable (acordeón) */
.mobile-group { display: grid; }
.mobile-group-toggle {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 14px; border-radius: var(--bs-radius-sm);
  font-family: inherit; font-size: 15px; font-weight: var(--bs-w-semi);
  color: var(--bs-ink); background: none; border: none; cursor: pointer;
  transition: background var(--bs-dur-fast) var(--bs-ease);
}
.mobile-group-toggle:hover { background: var(--bs-apertura); }
.mobile-chevron {
  width: 8px; height: 8px; flex-shrink: 0; margin-bottom: 2px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--bs-dur) var(--bs-ease),
              margin var(--bs-dur) var(--bs-ease);
}
.mobile-group.open .mobile-chevron { transform: rotate(-135deg); margin-bottom: -2px; }
.mobile-group-items {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows var(--bs-dur) var(--bs-ease);
}
.mobile-group.open .mobile-group-items { grid-template-rows: 1fr; }
.mobile-group-items > div { overflow: hidden; min-height: 0; display: grid; }

.mobile-link {
  display: flex; align-items: center;
  padding: 12px 14px; border-radius: var(--bs-radius-sm);
  font-size: 15px; color: var(--bs-ink);
  transition: background var(--bs-dur-fast) var(--bs-ease),
              color var(--bs-dur-fast) var(--bs-ease);
}
/* Items dentro de un grupo (sub-menú colapsable) van en mayúsculas
   con tracking — mismo tratamiento que el dropdown desktop. */
.mobile-group .mobile-link {
  padding-left: 26px;
  font-size: 13px;
  font-weight: var(--bs-w-bold);
  text-transform: uppercase;
  letter-spacing: .08em;
}
.mobile-link.top { font-weight: var(--bs-w-semi); }
.mobile-link:hover, .mobile-link:active {
  background: var(--bs-apertura); color: var(--bs-blue-dark);
}
.mobile-panel .btn { width: 100%; }

/* =========================================================
   HERO
   ========================================================= */

.hero { padding: 40px 0 var(--bs-section-py); }

/* Shell del hero — wash de gradiente aprobado (referencia) */
.hero-shell {
  position: relative; overflow: hidden;
  border-radius: var(--bs-radius-xl);
  padding: 72px 58px 48px;
  background: var(--bs-grad-hero-shell);
  border: 1px solid rgba(5,5,5,.08);
  box-shadow: var(--bs-shadow-lg);
}
/* Glows decorativos. Sin filter: en iOS Safari un pseudo con filter
   escapa el clip de overflow:hidden + border-radius y "cuadra" la esquina. */
.hero-shell::before, .hero-shell::after {
  content: ""; position: absolute; border-radius: 999px;
  pointer-events: none;
}
.hero-shell::before {
  width: 640px; height: 640px; right: -260px; top: -240px;
  background: radial-gradient(circle, rgba(0,93,255,.22), rgba(123,93,255,.13) 42%, transparent 67%);
}
.hero-shell::after {
  width: 760px; height: 260px; left: -240px; bottom: -120px;
  transform: rotate(-8deg); background: var(--bs-grad-aurora);
}

.hero-grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: 56px; align-items: center;
}
.hero h1 {
  font-size: var(--bs-fs-hero);
  line-height: var(--bs-lh-display);
  letter-spacing: var(--bs-ls-display);
  font-weight: var(--bs-w-display);
  color: var(--bs-ink);
  text-wrap: balance;
  margin: 22px 0;
}
.hero h1 .accent { color: var(--bs-blue); }
.hero-copy { max-width: 540px; margin-bottom: 32px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.micro-proof {
  position: relative; z-index: 1;
  list-style: none; margin: 36px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 10px;
}

/* =========================================================
   HERO — dashboard BS WorkOS® + tarjetas decorativas
   ========================================================= */

.hero-visual { position: relative; min-height: 544px; }

/* Tarjetas decorativas — glass blanco/lavanda, float lento desfasado */
.wos-deco {
  position: absolute; border-radius: 30px;
  background: linear-gradient(150deg, rgba(255,255,255,.9), rgba(232,226,250,.46));
  border: 1px solid rgba(255,255,255,.72);
  box-shadow: 0 26px 70px rgba(0,40,130,.16), inset 0 1px 0 rgba(255,255,255,.7);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  animation: wos-float 9s ease-in-out infinite;
}
.wos-deco-1 { width: 188px; height: 266px; left: 14px;   top: 14px;     transform: rotate(7deg);  animation-duration: 8s;  animation-delay: -1s; }
.wos-deco-2 { width: 224px; height: 300px; right: 0;     top: 0;        transform: rotate(-6deg); animation-duration: 10s; animation-delay: -4s; }
.wos-deco-3 { width: 142px; height: 236px; right: 26px;  bottom: 22px;  transform: rotate(11deg); animation-duration: 9s;  animation-delay: -2.5s; }
@keyframes wos-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -14px; } }

/* Card principal del dashboard — centrado vertical en el stack */
.wos-card {
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 356px; z-index: 3;
  border-radius: 26px; padding: 24px;
  background: rgba(12,12,15,.95); color: #fff;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 40px 92px rgba(0,0,0,.36);
}
.wos-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
.wos-brand { font-size: 13px; font-weight: var(--bs-w-semi); color: rgba(255,255,255,.64); }
.wos-status { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: rgba(255,255,255,.64); }
.wos-dot { position: relative; width: 8px; height: 8px; border-radius: 999px; background: #22c55e; flex-shrink: 0; }
.wos-dot::after {
  content: ""; position: absolute; inset: 0; border-radius: 999px;
  background: #22c55e; animation: wos-pulse 2s ease-out infinite;
}
@keyframes wos-pulse {
  0%   { transform: scale(1);   opacity: .7; }
  100% { transform: scale(2.6); opacity: 0; }
}
.wos-title {
  font-size: 23px; line-height: 1.16; letter-spacing: -.03em;
  font-weight: var(--bs-w-display); margin: 0 0 18px;
}

.wos-rows { display: grid; }
.wos-row {
  padding: 13px 6px; border-top: 1px solid rgba(255,255,255,.09);
  border-radius: 10px;
  transition: transform var(--bs-dur) var(--bs-ease), box-shadow var(--bs-dur) var(--bs-ease);
}
.wos-row:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0,0,0,.32); }
.wos-row-main { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.wos-label { font-size: 13px; color: rgba(255,255,255,.78); white-space: nowrap; }
.wos-gerund { color: #fff; font-weight: var(--bs-w-semi); transition: opacity 300ms var(--bs-ease); }
.wos-gerund.fading { opacity: 0; }

.wos-bar {
  position: relative; width: 130px; height: 8px; flex-shrink: 0;
  border-radius: 999px; background: rgba(255,255,255,.1); overflow: hidden;
}
.wos-fill {
  position: absolute; left: 0; top: 0; height: 100%;
  border-radius: 999px; background: var(--bs-grad-solid); overflow: hidden;
}
.wos-fill.r1 { width: 75%; animation: wos-w1 7s   ease-in-out infinite; }
.wos-fill.r2 { width: 85%; animation: wos-w2 8s   ease-in-out infinite; }
.wos-fill.r3 { width: 45%; animation: wos-w3 6.5s ease-in-out infinite; }
@keyframes wos-w1 { 0%, 100% { width: 73%; } 50% { width: 78%; } }
@keyframes wos-w2 { 0%, 100% { width: 83%; } 50% { width: 87%; } }
@keyframes wos-w3 { 0%, 100% { width: 43%; } 50% { width: 49%; } }
.wos-fill::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 24%, rgba(255,255,255,.6) 50%, transparent 76%);
  transform: translateX(-100%);
  animation: wos-shimmer 3.6s ease-in-out infinite;
}
.wos-fill.r2::after { animation-duration: 4.1s; animation-delay: -1.3s; }
.wos-fill.r3::after { animation-duration: 3.2s; animation-delay: -2.4s; }
@keyframes wos-shimmer {
  0%        { transform: translateX(-100%); }
  55%, 100% { transform: translateX(240%); }
}

.wos-micro {
  display: block; overflow: hidden;
  max-height: 0; opacity: 0; margin-top: 0;
  font-size: 11.5px; color: rgba(255,255,255,.6);
  transition: max-height var(--bs-dur) var(--bs-ease),
              opacity var(--bs-dur) var(--bs-ease),
              margin-top var(--bs-dur) var(--bs-ease);
}
.wos-row:hover .wos-micro { max-height: 28px; opacity: 1; margin-top: 7px; }

/* =========================================================
   SECTION HEADER (compartido)
   ========================================================= */

section { scroll-margin-top: 96px; }
.section { padding: var(--bs-section-py) 0; }
.section.tint { background: var(--bs-surface-soft); }
.section.pillars { padding-top: 90px; }

.section-head { max-width: 720px; margin-bottom: 56px; }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head .lead { margin-top: 18px; }
.section-head.center .lead { margin-inline: auto; }

/* =========================================================
   PILARES (4 cards)
   ========================================================= */

.pillar-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
.pillar-card {
  background: #fff;
  border: 1px solid var(--bs-line);
  border-radius: var(--bs-radius-lg);
  padding: 28px;
  display: flex; flex-direction: column; gap: 18px;
  box-shadow: var(--bs-shadow-soft);
  transition: transform var(--bs-dur) var(--bs-ease), box-shadow var(--bs-dur) var(--bs-ease);
}
.pillar-card:hover { transform: translateY(-4px); box-shadow: var(--bs-shadow-lg); }
.pillar-card h3 {
  font-size: var(--bs-fs-h3); font-weight: var(--bs-w-card);
  letter-spacing: var(--bs-ls-h3); color: var(--bs-ink);
}
.pillar-card p { font-size: 14.5px; line-height: 1.6; color: var(--bs-text-muted); margin: 0; }
.pillar-card .mark { margin-bottom: 10px; }

/* =========================================================
   CÓMO TRABAJAMOS (panel oscuro + 3 pasos)
   ========================================================= */

.method-panel {
  position: relative; overflow: hidden;
  border-radius: var(--bs-radius-xl);
  padding: 64px;
  background: var(--bs-grad-dark);
  color: #fff;
  box-shadow: var(--bs-shadow-strong);
}
.method-head { max-width: 680px; margin-bottom: 52px; }
.method-head h2 { color: #fff; }
.method-head .lead { color: var(--bs-on-dark-muted); margin-top: 18px; }

.method-steps {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
.method-step {
  background: rgba(255,255,255,.05);
  border: 1px solid var(--bs-on-dark-line);
  border-radius: var(--bs-radius-lg);
  padding: 26px;
}
.method-step .mark { margin-bottom: 22px; }
.method-step h3 {
  font-size: var(--bs-fs-h3); font-weight: var(--bs-w-card);
  letter-spacing: var(--bs-ls-h3); color: #fff; margin-bottom: 10px;
}
.method-step p { font-size: 14.5px; line-height: 1.6; color: var(--bs-on-dark-muted); margin: 0; }
.method-step strong { color: #fff; font-weight: var(--bs-w-bold); }

/* =========================================================
   BS ASISTENTES IA® (panel oscuro · 4 cards + CTA)
   Mismo peso visual que el panel "Cómo trabajamos".
   ========================================================= */

.ia-panel {
  position: relative; overflow: hidden;
  border-radius: var(--bs-radius-xl);
  padding: 64px;
  background: var(--bs-grad-dark);
  color: #fff;
  box-shadow: var(--bs-shadow-strong);
}
.ia-head { max-width: 760px; margin-bottom: 44px; }
.ia-head h2 { color: #fff; }
.ia-head .lead { color: var(--bs-on-dark-muted); margin-top: 18px; }

.ia-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
  margin-bottom: 32px;
}
.ia-card {
  background: rgba(255,255,255,.05);
  border: 1px solid var(--bs-on-dark-line);
  border-radius: var(--bs-radius-lg);
  padding: 26px 24px;
  display: flex; flex-direction: column;
  /* Entrada escalonada: opacity + translate, delay según --i */
  opacity: 0; transform: translateY(14px);
  transition: opacity 560ms var(--bs-ease) calc(var(--i, 0) * 110ms),
              transform 560ms var(--bs-ease) calc(var(--i, 0) * 110ms),
              background var(--bs-dur) var(--bs-ease),
              border-color var(--bs-dur) var(--bs-ease);
}
.ia-grid.is-visible .ia-card { opacity: 1; transform: translateY(0); }
.ia-card:hover {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.18);
}
.ia-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: rgba(0,93,255,.22);
  color: var(--bs-confianza);
  display: grid; place-items: center;
  margin-bottom: 22px;
}
.ia-card h3 {
  font-size: 17px; font-weight: var(--bs-w-card);
  letter-spacing: -.015em; color: #fff;
  margin: 0 0 10px;
}
.ia-card p {
  font-size: 14px; line-height: 1.55;
  color: var(--bs-on-dark-muted); margin: 0;
}

.ia-micro {
  font-size: 13.5px; line-height: 1.55;
  color: var(--bs-on-dark-soft);
  text-align: center;
  max-width: 620px;
  margin: 0 auto 22px;
}
.ia-cta { display: flex; justify-content: center; }

@media (prefers-reduced-motion: reduce) {
  .ia-card { opacity: 1; transform: none; transition: none; }
}

/* =========================================================
   SELECTOR DE SOLUCIONES (panel oscuro, 3 tabs con detalle)
   ========================================================= */

.sol-panel {
  position: relative; overflow: hidden;
  border-radius: var(--bs-radius-xl);
  padding: 48px;
  background: var(--bs-grad-dark);
  color: #fff;
  box-shadow: var(--bs-shadow-strong);
}
.sol-grid { display: grid; grid-template-columns: .82fr 1.18fr; gap: 28px; }
.sol-tabs { display: grid; gap: 12px; align-content: start; }
.sol-tab {
  text-align: left; font-family: inherit; cursor: pointer;
  border: 1px solid var(--bs-on-dark-line);
  background: rgba(255,255,255,.05);
  border-radius: var(--bs-radius-lg);
  padding: 22px;
  color: var(--bs-on-dark-muted);
  transition: background var(--bs-dur) var(--bs-ease), border-color var(--bs-dur) var(--bs-ease);
}
.sol-tab:hover { background: rgba(255,255,255,.09); }
.sol-tab.active { background: var(--bs-blue); border-color: var(--bs-blue); color: #fff; }
.sol-tab small {
  display: block; font-size: 11px; text-transform: uppercase;
  letter-spacing: .1em; font-weight: var(--bs-w-bold); margin-bottom: 8px; opacity: .8;
}
.sol-tab strong { font-size: 20px; font-weight: var(--bs-w-card); letter-spacing: -.02em; }
.sol-feature {
  position: relative; overflow: hidden;
  color: var(--bs-ink);
  border-radius: var(--bs-radius-lg);
  padding: 38px;
  display: flex; flex-direction: column;
  background:
    radial-gradient(circle at 92% 96%, rgba(255,111,220,.12), transparent 56%),
    linear-gradient(158deg, #F5F6F8 0%, #ECEEF1 100%);
}
.sol-feature h3 {
  font-size: clamp(26px, 2.6vw, 36px);
  line-height: 1.1; letter-spacing: -.025em;
  font-weight: var(--bs-w-display); color: var(--bs-ink);
  margin-bottom: 14px; text-wrap: balance;
}
.sol-feature p { font-size: 16px; line-height: 1.6; color: var(--bs-text-muted); margin: 0 0 24px; }
.sol-feature .btn { align-self: flex-start; margin-bottom: 30px; }

/* Highlights — qué incluye la solución, en grid de chips */
.sol-highlights {
  list-style: none; margin: auto 0 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.sol-chip {
  background: #fff;
  border: 1px solid var(--bs-line);
  border-radius: var(--bs-radius-md);
  box-shadow: var(--bs-shadow-soft);
  padding: 18px 20px;
  font-size: 15px; font-weight: var(--bs-w-semi);
  line-height: 1.35; color: var(--bs-text);
}

/* =========================================================
   HISTORIAS DE ÉXITO + stats + video
   ========================================================= */

.stories-grid {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 20px;
}
.story-card {
  background: var(--bs-apertura);
  border: 1px solid var(--bs-line);
  border-radius: var(--bs-radius-xl);
  padding: 40px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 36px;
}
.story-card h2 { text-wrap: balance; }
.stat-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.stat {
  background: #fff; border: 1px solid var(--bs-line);
  border-radius: var(--bs-radius-md); padding: 22px;
}
.stat .num {
  font-size: 42px; font-weight: var(--bs-w-display);
  letter-spacing: -.035em; color: var(--bs-blue); line-height: 1;
  font-variant-numeric: tabular-nums;
}
.stat .label { font-size: 13px; color: var(--bs-text-muted); margin-top: 8px; }

.story-video {
  position: relative; overflow: hidden;
  border-radius: var(--bs-radius-xl);
  min-height: 360px; color: #fff; padding: 36px;
  display: flex; flex-direction: column; justify-content: space-between;
  background:
    radial-gradient(circle at 22% 26%, rgba(0,93,255,.42), transparent 16rem),
    radial-gradient(circle at 92% 90%, rgba(255,111,220,.20), transparent 18rem),
    var(--bs-surface-dark);
}
.story-video h3 {
  font-size: clamp(22px, 2.4vw, 30px); line-height: 1.15;
  letter-spacing: -.025em; font-weight: var(--bs-w-card); margin-bottom: 8px;
}
.story-video p { color: var(--bs-on-dark-muted); font-size: 14.5px; margin: 0; max-width: 440px; }
.play {
  width: 64px; height: 64px; border-radius: 999px;
  background: #fff; color: var(--bs-blue);
  display: grid; place-items: center; cursor: pointer;
  border: none; font-size: 18px;
  box-shadow: 0 14px 36px rgba(0,0,0,.28);
  transition: transform var(--bs-dur) var(--bs-ease);
}
.play:hover { transform: scale(1.06); }

/* =========================================================
   CTA FINAL
   ========================================================= */

.final-cta { padding: 0 0 var(--bs-section-py); }
.cta-panel {
  position: relative; overflow: hidden;
  border-radius: var(--bs-radius-xl);
  padding: 72px;
  background: var(--bs-grad-dark);
  color: #fff;
  box-shadow: var(--bs-shadow-strong);
  display: grid; grid-template-columns: 1.2fr .8fr;
  gap: 48px; align-items: center;
}
.cta-panel h2 { color: #fff; text-wrap: balance; }
.cta-panel .lead { color: var(--bs-on-dark-muted); margin-top: 16px; }
.cta-side { display: flex; flex-direction: column; gap: 16px; }
.cta-side .btn { width: 100%; }
.cta-note { font-size: 13px; color: var(--bs-on-dark-soft); }

/* =========================================================
   FOOTER
   ========================================================= */

.bs-footer { border-top: 1px solid var(--bs-line); padding: 64px 0 40px; }
.footer-top {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px;
  padding-bottom: 44px; border-bottom: 1px solid var(--bs-line);
}
.footer-brand img { height: 22px; width: auto; margin-bottom: 16px; }
.footer-tagline { font-size: 14px; color: var(--bs-text-muted); max-width: 260px; }
.footer-col h4 {
  font-size: 12px; text-transform: uppercase; letter-spacing: .1em;
  font-weight: var(--bs-w-bold); color: var(--bs-text-soft); margin: 0 0 16px;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
/* Items de columna en sentence case (solo el h4 va en uppercase). */
.footer-col a { font-size: 14px; color: var(--bs-text-muted); }
.footer-col a:hover { color: var(--bs-blue); }
.footer-bottom {
  display: flex; flex-wrap: wrap; gap: 16px;
  justify-content: space-between; align-items: center;
  padding-top: 28px;
  font-size: 13px; color: var(--bs-text-soft);
}
.footer-social { display: flex; gap: 9px; }
.footer-social a {
  padding: 8px 15px; border-radius: 999px;
  border: 1px solid var(--bs-line);
  font-size: 13px; font-weight: var(--bs-w-semi); color: var(--bs-text-muted);
  transition: background var(--bs-dur) var(--bs-ease), color var(--bs-dur) var(--bs-ease),
              border-color var(--bs-dur) var(--bs-ease);
}
.footer-social a:hover { background: var(--bs-blue); color: #fff; border-color: var(--bs-blue); }

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 980px) {
  :root { --bs-section-py: 80px; }
  .nav-links { display: none; }
  .bs-nav > .btn { display: none; }
  .nav-burger { display: flex; }
  .mobile-menu { display: block; }
  .hero-grid,
  .sol-grid,
  .stories-grid,
  .cta-panel,
  .footer-top { grid-template-columns: 1fr; }
  .hero-grid { gap: 40px; }
  .pillar-grid { grid-template-columns: 1fr 1fr; }
  .method-steps { grid-template-columns: 1fr; }
  .hero-shell, .method-panel, .sol-panel, .cta-panel, .ia-panel { padding: 42px 28px; }
  .ia-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-top { gap: 32px; }
  /* Tablet — composición flotante más compacta */
  .hero-visual { min-height: 470px; }
  .wos-deco-1 { width: 158px; height: 224px; }
  .wos-deco-2 { width: 188px; height: 252px; }
  .wos-deco-3 { width: 120px; height: 198px; }
}

@media (max-width: 600px) {
  .container { width: calc(100% - 32px); }
  .bs-nav { width: calc(100% - 32px); }
  .pillar-grid, .stat-row, .sol-highlights { grid-template-columns: 1fr; }
  .hero-shell, .method-panel, .sol-panel, .cta-panel, .ia-panel, .sol-feature, .story-card { padding: 28px 22px; }
  .ia-grid { grid-template-columns: 1fr; }
  .micro-proof { gap: 8px; }
  /* Filas del dashboard — la barra baja bajo la etiqueta para no desbordar */
  .wos-row-main { flex-wrap: wrap; gap: 8px; }
  .wos-bar { width: 100%; }
  /* Mobile — solo el card BS WorkOS®, sin tarjetas decorativas */
  .hero-visual { min-height: 0; }
  .wos-deco { display: none; }
  .wos-card { position: static; transform: none; width: 100%; max-width: 360px; margin: 0 auto; }
}

/* Movimiento reducido — se desactivan shimmer, micro-ajuste de barras y
   float de tarjetas. Se conservan el pulso del dot y el hover. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .wos-deco, .wos-fill, .wos-fill::after { animation: none !important; }
  .nav-dropdown a { animation: none !important; opacity: 1; }
  .wos-fill.r1 { width: 75%; }
  .wos-fill.r2 { width: 85%; }
  .wos-fill.r3 { width: 45%; }
  .labs-dot::after, .labs-wa { animation: none !important; }
}

/* =========================================================
   IMPULSA · HERO · BS Labs® dashboard
   Reaprovecha tarjetas decorativas (.wos-deco) y composición flotante.
   El card .labs-card sustituye al .wos-card del home.
   ========================================================= */

.labs-visual { min-height: 580px; }

.labs-card {
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 360px; z-index: 3;
  border-radius: 26px; padding: 24px;
  background: rgba(12,12,15,.96); color: #fff;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 40px 92px rgba(0,0,0,.36);
}
.labs-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 20px;
}
.labs-brand { font-size: 13px; font-weight: var(--bs-w-semi); color: rgba(255,255,255,.64); }
.labs-status {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; color: rgba(255,255,255,.64);
}
.labs-dot {
  position: relative; width: 8px; height: 8px; border-radius: 999px;
  background: #22c55e; flex-shrink: 0;
}
.labs-dot::after {
  content: ""; position: absolute; inset: 0; border-radius: 999px;
  background: #22c55e; animation: wos-pulse 2s ease-out infinite;
}

.labs-title {
  font-size: 22px; line-height: 1.22; letter-spacing: -.028em;
  font-weight: var(--bs-w-card); margin: 0 0 18px; color: #fff;
}
.labs-pct {
  font-weight: var(--bs-w-display);
  background: var(--bs-grad-solid);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  font-variant-numeric: tabular-nums;
}

/* Ticker — wrapper recorta a 3 filas; el strip lleva 4 (las 3 visibles
   + 1 entrante por abajo) y se traduce -1 fila durante 420ms cada 2s. */
.labs-rows {
  overflow: hidden;
  height: calc(3 * var(--labs-row-h, 62px));
}
.labs-strip {
  display: flex; flex-direction: column;
  transform: translateY(0);
  /* sin transición en estado base → al quitar .scrolling, snap instantáneo */
}
.labs-strip.scrolling {
  transform: translateY(calc(-1 * var(--labs-row-h, 62px)));
  transition: transform 420ms cubic-bezier(.22, .8, .26, 1);
}

.labs-row {
  height: var(--labs-row-h, 62px);
  flex-shrink: 0;
  box-sizing: border-box;
  padding: 8px 6px;
  border-top: 1px solid rgba(255,255,255,.09);
  display: flex; flex-direction: column; justify-content: center; gap: 4px;
}
.labs-row-main {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.labs-lead {
  font-size: 12.5px; color: rgba(255,255,255,.74);
  display: inline-flex; align-items: center; gap: 4px; min-width: 0;
}
.labs-lead-num { color: #fff; font-weight: var(--bs-w-semi); font-variant-numeric: tabular-nums; }
.labs-sep { color: rgba(255,255,255,.34); }
.labs-lead-src {
  color: rgba(255,255,255,.6);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.labs-tag {
  display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0;
  padding: 5px 9px; border-radius: 999px;
  font-size: 10.5px; font-weight: var(--bs-w-eyebrow);
  letter-spacing: .06em; text-transform: uppercase;
  border: 1px solid transparent;
}
.labs-tag.potencial    { background: rgba(34,197,94,.15);  border-color: rgba(34,197,94,.32);  color: #4ade80; }
.labs-tag.no-potencial { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); color: rgba(255,255,255,.62); }
.labs-check { font-size: 11px; line-height: 1; }
.labs-tag.no-potencial .labs-check { color: rgba(255,255,255,.42); }

.labs-micro {
  display: block;
  font-size: 11.5px; color: rgba(255,255,255,.6);
  line-height: 1.2;
}

/* Badge inferior — conector con Agente IA / WhatsApp */
.labs-badge {
  position: relative;
  margin-top: 16px; padding: 12px 14px;
  border-radius: var(--bs-radius-md);
  background: rgba(34,197,94,.08);
  border: 1px solid rgba(34,197,94,.22);
  display: flex; align-items: center; gap: 10px;
  font-size: 12px; color: rgba(255,255,255,.78);
  transition: background var(--bs-dur) var(--bs-ease);
  cursor: default;
}
.labs-badge:hover { background: rgba(34,197,94,.13); }
.labs-badge strong {
  color: #fff; font-weight: var(--bs-w-semi);
  font-variant-numeric: tabular-nums;
}
.labs-wa {
  display: grid; place-items: center;
  width: 22px; height: 22px; flex-shrink: 0;
  border-radius: 999px;
  background: rgba(34,197,94,.16); color: #22c55e;
  animation: labs-wa-pulse 4s ease-in-out infinite;
}
.labs-wa-icon { width: 14px; height: 14px; display: block; }
@keyframes labs-wa-pulse {
  0%, 90%, 100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(34,197,94,.4); }
  6%            { transform: scale(1.12); box-shadow: 0 0 0 6px rgba(34,197,94,0); }
}
.labs-badge-text { flex: 1; min-width: 0; }

.labs-badge-tip {
  position: absolute; left: 12px; right: 12px; bottom: calc(100% + 8px);
  padding: 10px 12px; border-radius: var(--bs-radius-sm);
  background: rgba(12,12,15,.98);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 22px 60px rgba(0,0,0,.45);
  font-size: 11.5px; line-height: 1.4; color: rgba(255,255,255,.78);
  opacity: 0; visibility: hidden; transform: translateY(4px);
  transition: opacity var(--bs-dur) var(--bs-ease),
              transform var(--bs-dur) var(--bs-ease),
              visibility var(--bs-dur);
  pointer-events: none;
}
.labs-badge:hover .labs-badge-tip {
  opacity: 1; visibility: visible; transform: translateY(0);
}

/* =========================================================
   IMPULSA · MÉTODO · pull-quote dentro del panel oscuro
   ========================================================= */

.method-quote {
  position: relative;
  margin: 44px 0 0; padding: 22px 0 0;
  border-top: 1px solid var(--bs-on-dark-line);
  font-size: clamp(20px, 2vw, 24px);
  line-height: 1.35; letter-spacing: -.02em;
  font-weight: var(--bs-w-semi);
  color: rgba(255,255,255,.92);
  text-wrap: balance; max-width: 760px;
}
.method-quote-mark {
  display: inline-block; margin-right: 6px;
  font-family: Georgia, serif; font-size: 1.8em; line-height: 0;
  vertical-align: -0.32em;
  color: var(--bs-rose);
  /* Sutil halo para fijar el glyph sobre el panel oscuro */
  text-shadow: 0 0 22px rgba(255, 111, 220, .45);
}

/* =========================================================
   IMPULSA · QUÉ INCLUYE · grid de entregables
   ========================================================= */

.include-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
.include-card {
  position: relative; isolation: isolate;
  background: #fff;
  border: 1px solid var(--bs-line);
  border-radius: var(--bs-radius-lg);
  padding: 26px;
  display: flex; flex-direction: column; gap: 10px;
  box-shadow: var(--bs-shadow-soft);
  overflow: hidden;
  transition: transform var(--bs-dur) var(--bs-ease),
              box-shadow var(--bs-dur) var(--bs-ease),
              border-color var(--bs-dur) var(--bs-ease);
}
/* Wash atmosférico azul → rosa de la identidad, fade-in en hover.
   Vive en ::before para no remontar la pila de transiciones. */
.include-card::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(circle at 86% 0%,  rgba(0,93,255,.10),   transparent 62%),
    radial-gradient(circle at 14% 100%, rgba(255,111,220,.08), transparent 62%);
  opacity: 0;
  transition: opacity var(--bs-dur) var(--bs-ease);
}
.include-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--bs-shadow-md);
  border-color: rgba(0,93,255,.18);
}
.include-card:hover::before { opacity: 1; }
.include-card h3 {
  font-size: 18px; font-weight: var(--bs-w-card);
  letter-spacing: -.02em; color: var(--bs-ink);
}
.include-card p {
  font-size: 14.5px; line-height: 1.55; color: var(--bs-text-muted); margin: 0;
}

/* =========================================================
   IMPULSA · BS ASISTENTES IA®
   ========================================================= */

.tool-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
}
.tool-card {
  display: flex; gap: 22px;
  background: #fff;
  border: 1px solid var(--bs-line);
  border-radius: var(--bs-radius-lg);
  padding: 30px;
  box-shadow: var(--bs-shadow-soft);
  transition: transform var(--bs-dur) var(--bs-ease),
              box-shadow var(--bs-dur) var(--bs-ease);
}
.tool-card:hover { transform: translateY(-3px); box-shadow: var(--bs-shadow-md); }
.tool-card h3 {
  font-size: 20px; font-weight: var(--bs-w-card);
  letter-spacing: -.02em; color: var(--bs-ink); margin-bottom: 8px;
}
.tool-card p { font-size: 14.5px; line-height: 1.6; color: var(--bs-text-muted); margin: 0; }
.tool-note {
  margin: 26px 0 0; max-width: 720px;
  font-size: 13.5px; color: var(--bs-text-soft); line-height: 1.55;
}

/* =========================================================
   IMPULSA · ONBOARDING (Tu primer mes)
   ========================================================= */

.onboard-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
.onboard-step {
  background: #fff;
  border: 1px solid var(--bs-line);
  border-radius: var(--bs-radius-lg);
  padding: 28px;
  display: flex; flex-direction: column; gap: 16px;
  box-shadow: var(--bs-shadow-soft);
  transition: transform var(--bs-dur) var(--bs-ease),
              box-shadow var(--bs-dur) var(--bs-ease);
}
.onboard-step:hover { transform: translateY(-3px); box-shadow: var(--bs-shadow-md); }
.onboard-step h3 {
  font-size: var(--bs-fs-h3); font-weight: var(--bs-w-card);
  letter-spacing: var(--bs-ls-h3); color: var(--bs-ink);
}
.onboard-step p {
  font-size: 14.5px; line-height: 1.6; color: var(--bs-text-muted); margin: 0;
}
.onboard-step strong { color: var(--bs-ink); font-weight: var(--bs-w-semi); }
.onboard-note {
  margin: 26px 0 0; max-width: 720px;
  font-size: 13.5px; color: var(--bs-text-soft); line-height: 1.55;
}

/* =========================================================
   IMPULSA · QUÉ PROMETEMOS / QUÉ NO
   ========================================================= */

.promise-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
}
.promise-col {
  background: #fff;
  border: 1px solid var(--bs-line);
  border-radius: var(--bs-radius-lg);
  padding: 36px;
  box-shadow: var(--bs-shadow-soft);
}
.promise-col.yes { border-color: rgba(0,93,255,.20); }
.promise-col.no  { border-color: rgba(5,5,5,.10); background: var(--bs-surface-soft); }
.promise-head {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 24px; padding-bottom: 18px;
  border-bottom: 1px solid var(--bs-line);
}
.promise-mark {
  display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: 999px;
  font-weight: var(--bs-w-bold); font-size: 16px;
  flex-shrink: 0;
}
.promise-mark.yes { background: rgba(0,93,255,.12);  color: var(--bs-blue); }
.promise-mark.no  { background: rgba(5,5,5,.06);     color: var(--bs-text-muted); }
.promise-col h3 {
  font-size: 20px; font-weight: var(--bs-w-card);
  letter-spacing: -.02em; color: var(--bs-ink);
}
.promise-col ul {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 14px;
}
.promise-col li {
  display: flex; align-items: flex-start; gap: 12px;
  font-size: 15px; line-height: 1.5; color: var(--bs-text);
}
.promise-bullet {
  margin-top: 8px; flex-shrink: 0;
  width: 6px; height: 6px; border-radius: 999px;
}
.promise-bullet.yes { background: var(--bs-blue); }
.promise-bullet.no  { background: rgba(5,5,5,.32); }
.promise-col.no li  { color: var(--bs-text-muted); }

/* =========================================================
   IMPULSA · TARIFA
   ========================================================= */

.pricing-panel {
  position: relative; overflow: hidden;
  border-radius: var(--bs-radius-xl);
  padding: 56px;
  background:
    radial-gradient(circle at 0% 0%, rgba(0,93,255,.10), transparent 30rem),
    radial-gradient(circle at 100% 100%, rgba(255,111,220,.08), transparent 24rem),
    #fff;
  border: 1px solid var(--bs-line);
  box-shadow: var(--bs-shadow-md);
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px;
  align-items: center;
}
.pricing-left h2 { margin: 16px 0 28px; text-wrap: balance; }
.pricing-amount {
  display: flex; align-items: flex-start; gap: 4px;
  font-weight: var(--bs-w-display);
  letter-spacing: var(--bs-ls-display);
  color: var(--bs-ink); line-height: 1;
}
.pricing-currency { font-size: 40px; margin-top: 14px; color: var(--bs-text-muted); }
.pricing-number   { font-size: clamp(60px, 7vw, 96px); font-variant-numeric: tabular-nums; }
.pricing-unit     { font-size: 22px; margin-top: 22px; margin-left: 10px; color: var(--bs-text-muted); letter-spacing: .04em; }
.pricing-period {
  margin: 8px 0 0; font-size: 15px; color: var(--bs-text-muted);
  font-weight: var(--bs-w-semi);
}
.pricing-right { display: flex; flex-direction: column; gap: 18px; }
.pricing-terms-title {
  font-size: 12px; text-transform: uppercase; letter-spacing: .1em;
  font-weight: var(--bs-w-bold); color: var(--bs-text-soft); margin: 0;
}
.pricing-terms { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.pricing-terms li {
  display: flex; align-items: flex-start; gap: 12px;
  font-size: 14.5px; line-height: 1.55; color: var(--bs-text);
}
.pricing-bullet {
  margin-top: 8px; flex-shrink: 0;
  width: 6px; height: 6px; border-radius: 999px;
  background: var(--bs-blue);
}
.pricing-right .btn { align-self: flex-start; margin-top: 4px; }
.pricing-note { margin: 0; font-size: 13px; color: var(--bs-text-soft); line-height: 1.55; }

/* =========================================================
   IMPULSA · RESPONSIVE
   ========================================================= */

@media (max-width: 980px) {
  .include-grid,
  .onboard-grid { grid-template-columns: 1fr 1fr; }
  .tool-grid,
  .promise-grid,
  .pricing-panel { grid-template-columns: 1fr; }
  .pricing-panel { padding: 42px 28px; gap: 32px; }
  .labs-visual { min-height: 520px; }
  .labs-card { width: 320px; padding: 22px; }
  .labs-title { font-size: 20px; }
}

@media (max-width: 600px) {
  .include-grid,
  .onboard-grid { grid-template-columns: 1fr; }
  .tool-card { flex-direction: column; gap: 14px; padding: 24px; }
  .promise-col { padding: 26px 22px; }
  /* Hero — solo el card, sin tarjetas decorativas */
  .labs-visual { min-height: 0; }
  .labs-card { position: static; transform: none; width: 100%; max-width: 380px; margin: 0 auto; }
  .pricing-number { font-size: 56px; }
  .method-quote { font-size: 18px; }
}

/* =========================================================
   CONECTA · HERO · Stack de 3 tarjetas de presencia
   Publicación + Conversación atendida + AI Visibility.
   No reusa .wos-deco (la composición misma es el visual).
   Cards semi-superpuestas con leves rotaciones para profundidad.
   ========================================================= */

.conecta-visual { min-height: 560px; }

.conecta-card {
  position: absolute;
  width: 340px;
  padding: 18px 20px;
  border-radius: 22px;
  background: rgba(12,12,15,.96);
  color: #fff;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 30px 70px rgba(0,0,0,.34);
  transition: transform var(--bs-dur) var(--bs-ease),
              box-shadow var(--bs-dur) var(--bs-ease);
}

/* Stack apretado en desktop — las cards se rozan verticalmente ~20 px
   para dar lectura de "translape físico" sin cubrir el header/footer
   visibles de la card de atrás. Horizontal se mantiene para no invadir
   la columna de texto. Mobile reapila vertical (ver @media). */
.conecta-card-1 { top:   0;  left:   8px; transform: rotate(-1.6deg); z-index: 2; }
.conecta-card-2 { top: 180px; right:  0;  transform: rotate( 0deg);   z-index: 3; }
.conecta-card-3 { top: 395px; left:  40px; transform: rotate( 1.6deg); z-index: 2; }

.conecta-card:hover {
  transform: translateY(-4px) rotate(0);
  box-shadow: 0 44px 90px rgba(0,0,0,.42);
  z-index: 5;
}

/* Header común a las 3 tarjetas */
.conecta-card-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 12px;
  font-size: 12px; color: rgba(255,255,255,.62);
}
.conecta-card-brand {
  display: inline-flex; align-items: center; gap: 7px;
  color: #fff; font-weight: var(--bs-w-semi);
  font-size: 12.5px;
}
.conecta-card-meta {
  font-size: 11.5px; color: rgba(255,255,255,.56);
  font-variant-numeric: tabular-nums;
}

/* Status "Atendiendo" + dot pulsante (reutiliza @keyframes wos-pulse) */
.conecta-status {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11.5px; color: rgba(34,197,94,.92);
  font-weight: var(--bs-w-semi);
}
.conecta-dot {
  position: relative; width: 8px; height: 8px; border-radius: 999px;
  background: #22c55e; flex-shrink: 0;
}
.conecta-dot::after {
  content: ""; position: absolute; inset: 0; border-radius: 999px;
  background: #22c55e; animation: wos-pulse 2s ease-out infinite;
}

/* Icono Instagram dentro del brand */
.conecta-ig {
  width: 14px; height: 14px; display: block;
  color: rgba(255,255,255,.78);
}

/* ── Card 1 · Publicación ─────────────────────────────────────────── */
.conecta-pub-image {
  position: relative;
  width: 100%; height: 96px;
  border-radius: 12px;
  background:
    radial-gradient(circle at 22% 28%, rgba(255,111,220,.55), transparent 56%),
    radial-gradient(circle at 78% 76%, rgba(0,93,255,.6),    transparent 58%),
    linear-gradient(135deg, #1a1f2e, #0d1219);
  margin-bottom: 12px;
  overflow: hidden;
}
.conecta-pub-image::after {
  content: ""; position: absolute; inset: 8px;
  border-radius: 8px;
  border: 1px dashed rgba(255,255,255,.22);
}
.conecta-pub-tag {
  position: absolute; top: 10px; left: 12px;
  padding: 3px 8px; border-radius: 999px;
  background: rgba(0,0,0,.45); backdrop-filter: blur(6px);
  font-size: 10px; font-weight: var(--bs-w-eyebrow);
  letter-spacing: .08em; text-transform: uppercase;
  color: #fff;
}
.conecta-pub-foot {
  font-size: 12px; color: rgba(255,255,255,.6);
  line-height: 1.4;
}
.conecta-pub-reach {
  color: #fff; font-weight: var(--bs-w-semi);
  font-variant-numeric: tabular-nums;
  transition: opacity var(--bs-dur) var(--bs-ease);
}

/* ── Card 2 · Conversación ────────────────────────────────────────── */
.conecta-bubbles {
  display: flex; flex-direction: column; gap: 7px;
  min-height: 130px;
  transition: opacity var(--bs-dur) var(--bs-ease);
}
.conecta-bubbles.fading { opacity: 0; }

.conecta-bubble {
  margin: 0;
  padding: 9px 12px;
  border-radius: 14px;
  font-size: 12.5px; line-height: 1.45;
  max-width: 90%;
}
.conecta-bubble.in {
  align-self: flex-start;
  background: rgba(255,255,255,.07);
  border-bottom-left-radius: 4px;
  color: rgba(255,255,255,.92);
}
.conecta-bubble.out {
  align-self: flex-end;
  background: rgba(0,93,255,.22);
  border: 1px solid rgba(0,93,255,.34);
  border-bottom-right-radius: 4px;
  color: #fff;
}
.conecta-conv-foot {
  margin-top: 10px; padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.08);
  font-size: 11.5px; color: rgba(255,255,255,.6);
}
.conecta-conv-foot strong {
  color: #fff; font-weight: var(--bs-w-semi);
  font-variant-numeric: tabular-nums;
}

/* ── Card 3 · AI Visibility ───────────────────────────────────────── */
.conecta-ai-line {
  margin: 2px 0 4px; font-size: 12px; color: rgba(255,255,255,.62);
}
.conecta-ai-stat {
  margin: 0 0 10px;
  font-size: 13px; color: rgba(255,255,255,.74);
  font-weight: var(--bs-w-semi);
  letter-spacing: -.01em;
}
.conecta-ai-num {
  display: inline-block; margin-right: 6px;
  font-size: 34px; font-weight: var(--bs-w-display);
  line-height: 1; letter-spacing: -.04em;
  background: var(--bs-grad-solid);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  font-variant-numeric: tabular-nums;
}
.conecta-ai-detail {
  margin: 0; font-size: 11.5px; color: rgba(255,255,255,.6);
}
.conecta-ai-detail strong { color: #fff; font-weight: var(--bs-w-semi); }

/* ── Tooltips on hover ────────────────────────────────────────────── */
.conecta-tip {
  position: absolute; left: 14px; right: 14px; bottom: calc(100% + 8px);
  padding: 10px 12px; border-radius: var(--bs-radius-sm);
  background: rgba(12,12,15,.98);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 22px 60px rgba(0,0,0,.45);
  font-size: 11.5px; line-height: 1.4; color: rgba(255,255,255,.78);
  opacity: 0; visibility: hidden; transform: translateY(4px);
  transition: opacity var(--bs-dur) var(--bs-ease),
              transform var(--bs-dur) var(--bs-ease),
              visibility var(--bs-dur);
  pointer-events: none;
}
.conecta-card:hover .conecta-tip {
  opacity: 1; visibility: visible; transform: translateY(0);
}

/* Responsive — Conecta */
@media (max-width: 980px) {
  .conecta-visual { min-height: 540px; }
  .conecta-card   { width: 300px; padding: 16px 18px; }
  .conecta-card-2 { top: 170px; }
  .conecta-card-3 { top: 370px; }
  .conecta-ai-num { font-size: 30px; }
}

@media (max-width: 600px) {
  .conecta-visual {
    min-height: 0;
    position: relative;
    display: flex; flex-direction: column;
    gap: 14px; align-items: center;
    padding: 4px 0 8px;
  }
  .conecta-card {
    position: static !important;
    width: 100%; max-width: 360px;
    transform: none !important;
  }
  .conecta-card:hover {
    transform: translateY(-3px) !important;
  }
  /* Tooltips ocupan demasiado en mobile — los desactivamos */
  .conecta-tip { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .conecta-dot::after { animation: none !important; }
  .conecta-bubbles    { transition: none !important; }
}

/* =========================================================
   TOTAL · HERO · Stack de 3 tarjetas integradas
   Publicación (Conecta) + BS Labs® dashboard (central, primer
   plano) + Conversación atendida con widget AI Visibility.
   Las filas de BS Labs® mezclan orígenes "Campaña" y "Orgánico"
   para comunicar que el sistema lee de los dos canales.
   ========================================================= */

.total-visual { min-height: 600px; }

.total-card {
  position: absolute;
  padding: 18px 20px;
  border-radius: 22px;
  background: rgba(12,12,15,.96);
  color: #fff;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 30px 70px rgba(0,0,0,.34);
  transition: transform var(--bs-dur) var(--bs-ease),
              box-shadow var(--bs-dur) var(--bs-ease);
}

/* Card central · BS Labs® dashboard (primer plano, más ancha).
   Las dos satélite quedan parcialmente cubiertas; las rotaciones
   leves sugieren profundidad sin descomponer la cuadrícula. */
.total-card-1 { top:   0;  left:   0;  width: 280px; transform: rotate(-1.8deg); z-index: 2; }
.total-card-2 { top: 110px; right:  0;  width: 360px; transform: rotate( 0deg);   z-index: 4; }
.total-card-3 { top: 415px; left:  20px; width: 320px; transform: rotate( 1.8deg); z-index: 3; }

.total-card:hover {
  transform: translateY(-4px) rotate(0);
  box-shadow: 0 44px 90px rgba(0,0,0,.42);
  z-index: 5;
}

/* Header común a las 3 tarjetas */
.total-card-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 12px;
  font-size: 12px; color: rgba(255,255,255,.62);
}
.total-card-brand {
  display: inline-flex; align-items: center; gap: 7px;
  color: #fff; font-weight: var(--bs-w-semi);
  font-size: 12.5px;
}
.total-card-meta {
  font-size: 11.5px; color: rgba(255,255,255,.56);
  font-variant-numeric: tabular-nums;
}

/* Status verde con dot pulsante — reutiliza @keyframes wos-pulse */
.total-status {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11.5px; color: rgba(34,197,94,.92);
  font-weight: var(--bs-w-semi);
}
.total-dot {
  position: relative; width: 8px; height: 8px; border-radius: 999px;
  background: #22c55e; flex-shrink: 0;
}
.total-dot::after {
  content: ""; position: absolute; inset: 0; border-radius: 999px;
  background: #22c55e; animation: wos-pulse 2s ease-out infinite;
}

/* Icono Instagram dentro del brand */
.total-ig {
  width: 14px; height: 14px; display: block;
  color: rgba(255,255,255,.78);
}

/* ── Card 1 · Publicación ─────────────────────────────────────────── */
.total-pub-image {
  position: relative;
  width: 100%; height: 84px;
  border-radius: 12px;
  background:
    radial-gradient(circle at 22% 28%, rgba(255,111,220,.55), transparent 56%),
    radial-gradient(circle at 78% 76%, rgba(0,93,255,.6),    transparent 58%),
    linear-gradient(135deg, #1a1f2e, #0d1219);
  margin-bottom: 12px;
  overflow: hidden;
}
.total-pub-image::after {
  content: ""; position: absolute; inset: 8px;
  border-radius: 8px;
  border: 1px dashed rgba(255,255,255,.22);
}
.total-pub-tag {
  position: absolute; top: 10px; left: 12px;
  padding: 3px 8px; border-radius: 999px;
  background: rgba(0,0,0,.45); backdrop-filter: blur(6px);
  font-size: 10px; font-weight: var(--bs-w-eyebrow);
  letter-spacing: .08em; text-transform: uppercase;
  color: #fff;
}
.total-pub-foot {
  font-size: 12px; color: rgba(255,255,255,.6);
  line-height: 1.4;
}
.total-pub-reach {
  color: #fff; font-weight: var(--bs-w-semi);
  font-variant-numeric: tabular-nums;
  transition: opacity var(--bs-dur) var(--bs-ease);
}

/* ── Card 2 · BS Labs® dashboard ──────────────────────────────────── */
.total-labs { padding: 22px 22px 18px; }
.total-labs-brand {
  font-size: 13px;
}
.total-labs-title {
  font-size: 18.5px; line-height: 1.22; letter-spacing: -.028em;
  font-weight: var(--bs-w-card); margin: 0 0 14px; color: #fff;
}
.total-labs-pct {
  font-weight: var(--bs-w-display);
  background: var(--bs-grad-solid);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  font-variant-numeric: tabular-nums;
}
.total-labs-rows {
  display: flex; flex-direction: column;
}
.total-labs-row {
  padding: 9px 4px;
  border-top: 1px solid rgba(255,255,255,.09);
  display: flex; flex-direction: column; gap: 3px;
  transition: opacity var(--bs-dur) var(--bs-ease);
}
.total-labs-row.fading { opacity: 0; }
.total-labs-row-main {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.total-labs-lead {
  font-size: 12px; color: rgba(255,255,255,.74);
  display: inline-flex; align-items: center; gap: 3px; min-width: 0;
}
.total-labs-num { color: #fff; font-weight: var(--bs-w-semi); font-variant-numeric: tabular-nums; }
.total-labs-sep { color: rgba(255,255,255,.34); }
.total-labs-src {
  color: rgba(255,255,255,.6);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.total-labs-tag {
  display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0;
  padding: 4px 8px; border-radius: 999px;
  font-size: 10px; font-weight: var(--bs-w-eyebrow);
  letter-spacing: .06em; text-transform: uppercase;
  background: rgba(34,197,94,.15); border: 1px solid rgba(34,197,94,.32); color: #4ade80;
}
.total-labs-check { font-size: 10px; line-height: 1; }
.total-labs-micro {
  font-size: 11px; color: rgba(255,255,255,.55);
  line-height: 1.3;
}
.total-labs-micro strong {
  color: rgba(255,255,255,.85); font-weight: var(--bs-w-semi);
}

/* ── Card 3 · Conversación + AI Visibility ────────────────────────── */
.total-bubbles {
  display: flex; flex-direction: column; gap: 7px;
  min-height: 110px;
  transition: opacity var(--bs-dur) var(--bs-ease);
}
.total-bubbles.fading { opacity: 0; }
.total-bubble {
  margin: 0;
  padding: 8px 11px;
  border-radius: 13px;
  font-size: 12px; line-height: 1.45;
  max-width: 90%;
}
.total-bubble.in {
  align-self: flex-start;
  background: rgba(255,255,255,.07);
  border-bottom-left-radius: 4px;
  color: rgba(255,255,255,.92);
}
.total-bubble.out {
  align-self: flex-end;
  background: rgba(0,93,255,.22);
  border: 1px solid rgba(0,93,255,.34);
  border-bottom-right-radius: 4px;
  color: #fff;
}
.total-ai-widget {
  margin-top: 12px; padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.08);
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
}
.total-ai-label {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em;
  color: rgba(255,255,255,.58); font-weight: var(--bs-w-eyebrow);
}
.total-ai-stat {
  font-size: 12.5px; color: rgba(255,255,255,.78);
  font-weight: var(--bs-w-semi);
}
.total-ai-num {
  display: inline-block; margin-right: 4px;
  font-size: 22px; font-weight: var(--bs-w-display);
  line-height: 1; letter-spacing: -.03em;
  background: var(--bs-grad-solid);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  font-variant-numeric: tabular-nums;
  vertical-align: -2px;
}

/* ── Tooltips on hover ────────────────────────────────────────────── */
.total-tip {
  position: absolute; left: 14px; right: 14px; bottom: calc(100% + 8px);
  padding: 10px 12px; border-radius: var(--bs-radius-sm);
  background: rgba(12,12,15,.98);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 22px 60px rgba(0,0,0,.45);
  font-size: 11.5px; line-height: 1.4; color: rgba(255,255,255,.78);
  opacity: 0; visibility: hidden; transform: translateY(4px);
  transition: opacity var(--bs-dur) var(--bs-ease),
              transform var(--bs-dur) var(--bs-ease),
              visibility var(--bs-dur);
  pointer-events: none;
}
.total-card:hover .total-tip {
  opacity: 1; visibility: visible; transform: translateY(0);
}

/* Responsive — Total */
@media (max-width: 980px) {
  .total-visual { min-height: 580px; }
  .total-card-1 { width: 250px; }
  .total-card-2 { width: 320px; top: 100px; }
  .total-card-3 { width: 290px; top: 400px; }
  .total-labs-title { font-size: 17px; }
}

@media (max-width: 600px) {
  .total-visual {
    min-height: 0;
    position: relative;
    display: flex; flex-direction: column;
    gap: 14px; align-items: center;
    padding: 4px 0 8px;
  }
  .total-card {
    position: static !important;
    width: 100% !important;
    max-width: 360px;
    transform: none !important;
  }
  .total-card:hover { transform: translateY(-3px) !important; }
  /* Tooltips ocupan demasiado en mobile — los desactivamos */
  .total-tip { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .total-dot::after  { animation: none !important; }
  .total-bubbles,
  .total-labs-row    { transition: none !important; }
}

/* Margen extra sobre los bullets para que respiren del stack de cards.
   Solo aplica al hero de /total/ (el stack es más denso que en
   conecta/impulsa y los CTAs quedan más cerca del último elemento). */
.hero-total .micro-proof { margin-top: 65px; }

/* =========================================================
   TOTAL · QUÉ INCLUYE · variante de 4 columnas
   10 entregables = filas 4 + 4 + 2 (última fila alineada
   a la izquierda; visualmente clara y legible).
   ========================================================= */

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

@media (max-width: 980px) {
  .include-grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .include-grid.cols-4 { grid-template-columns: 1fr; }
}

/* =========================================================
   /asistentes-ia/ — Página de catálogo BS Asistentes IA®
   ----------------------------------------------------------
   Estilos propios para la página dedicada. No tocan tokens
   ni primitivos; sólo composiciones específicas. Prefijo
   `.aiia-` para evitar colisiones con la sección home/
   `asistentes-ia.js` que ya existe.
   ========================================================= */

/* ---------- Hero · Panel de asistentes activos ----------
   Cuarto patrón visual de la familia. A diferencia del
   dashboard de Impulsa o el stack de Conecta/Total, este
   panel es un "directorio": 4 mini-tarjetas estáticas con
   dots pulsantes desfasados. Comunica "estos 4 asistentes
   están vigentes y operando", sin datos cambiantes. */

.aiia-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 544px;
}

.aiia-panel {
  width: 100%;
  max-width: 460px;
  background: rgba(255, 255, 255, .94);
  border: 1px solid rgba(5, 5, 5, .06);
  border-radius: 26px;
  padding: 22px;
  box-shadow: var(--bs-shadow-lg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  display: flex; flex-direction: column; gap: 18px;
}

.aiia-panel-head {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px;
}
.aiia-panel-brand {
  font-size: 13px;
  font-weight: var(--bs-w-semi);
  letter-spacing: -.01em;
  color: var(--bs-ink);
}
.aiia-panel-status {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--bs-text-muted);
}
.aiia-panel-count {
  font-weight: var(--bs-w-bold);
  color: var(--bs-ink);
  font-variant-numeric: tabular-nums;
}
.aiia-panel-dot {
  position: relative; width: 8px; height: 8px;
  border-radius: 999px; background: #22c55e;
  flex-shrink: 0;
}
.aiia-panel-dot::after {
  content: ""; position: absolute; inset: 0;
  border-radius: 999px; background: #22c55e;
  animation: aiia-pulse 2s ease-out infinite;
}
@keyframes aiia-pulse {
  0%   { transform: scale(1);   opacity: .7; }
  100% { transform: scale(2.6); opacity: 0; }
}

/* Grid 2x2 de mini-tarjetas */
.aiia-mini-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.aiia-mini {
  position: relative;
  background: #fff;
  border: 1px solid rgba(5, 5, 5, .08);
  border-radius: 14px;
  padding: 14px;
  display: flex; flex-direction: column; gap: 8px;
  transition: transform var(--bs-dur) var(--bs-ease),
              box-shadow var(--bs-dur) var(--bs-ease),
              border-color var(--bs-dur) var(--bs-ease);
}
.aiia-mini:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0, 34, 120, .08);
  border-color: rgba(0, 93, 255, .20);
}
.aiia-mini-head {
  display: flex; justify-content: space-between; align-items: center;
}
.aiia-mini-tag {
  font-size: 10px; text-transform: uppercase;
  letter-spacing: .08em; font-weight: var(--bs-w-bold);
  color: var(--bs-text-soft);
}
.aiia-mini-dot {
  position: relative; width: 7px; height: 7px;
  border-radius: 999px; background: #22c55e;
  flex-shrink: 0;
}
.aiia-mini-dot::after {
  content: ""; position: absolute; inset: 0;
  border-radius: 999px; background: #22c55e;
  animation: aiia-pulse 2.4s ease-out infinite;
  animation-delay: var(--aiia-delay, 0ms);
}

.aiia-mini-body {
  display: flex; flex-direction: column; gap: 4px;
  align-items: flex-start;
}
.aiia-mini-icon {
  width: 24px; height: 24px;
  color: var(--bs-blue);
  margin-bottom: 4px;
}
.aiia-mini-title {
  font-size: 13px;
  font-weight: var(--bs-w-card);
  letter-spacing: -.01em;
  color: var(--bs-ink);
  line-height: 1.2;
  margin: 0;
}
.aiia-mini-type {
  font-size: 11px;
  color: var(--bs-text-muted);
  font-weight: var(--bs-w-medium);
}
.aiia-mini-state {
  font-size: 11px;
  color: var(--bs-text-soft);
}

/* Microcopy "Incluido en…" — se revela en hover.
   Usamos opacity+max-height (no display) para que la transición sea suave. */
.aiia-mini-incluido {
  font-size: 10.5px;
  color: var(--bs-blue);
  font-weight: var(--bs-w-semi);
  letter-spacing: -.01em;
  opacity: 0; max-height: 0; overflow: hidden;
  transition: opacity var(--bs-dur) var(--bs-ease),
              max-height var(--bs-dur) var(--bs-ease);
}
.aiia-mini:hover .aiia-mini-incluido,
.aiia-mini:focus-within .aiia-mini-incluido {
  opacity: 1; max-height: 28px;
}

.aiia-panel-foot {
  display: flex; gap: 6px; flex-wrap: wrap;
  font-size: 11px; color: var(--bs-text-muted);
  padding-top: 8px;
  border-top: 1px solid var(--bs-line);
}
.aiia-panel-foot-sep { color: var(--bs-text-soft); }

@media (prefers-reduced-motion: reduce) {
  .aiia-panel-dot::after,
  .aiia-mini-dot::after { animation: none !important; }
}

@media (max-width: 980px) {
  .aiia-visual { min-height: 0; }
  .aiia-panel { margin: 0 auto; }
}
@media (max-width: 480px) {
  .aiia-mini-grid { grid-template-columns: 1fr; }
}

/* ---------- Approach · 3 cards (variante de .pillar-grid) ----------
   Reusa el patrón Pillars sobre fondo claro pero con 3 columnas en
   lugar de 4. La especificidad .pillar-grid.cols-3 vence el default. */
.pillar-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 980px) {
  .pillar-grid.cols-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .pillar-grid.cols-3 { grid-template-columns: 1fr; }
}

/* ---------- Catalog · 4 cards detalle por asistente ----------
   Corazón de la página. Cada card lleva Mark + título + tagline +
   qué hace / para qué sirve + footer con disponibilidad, setup y
   mantenimiento. 2 columnas en desktop, 1 en mobile. */
.aiia-catalog-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
}
.aiia-catalog-card {
  background: #fff;
  border: 1px solid var(--bs-line);
  border-radius: var(--bs-radius-lg);
  padding: 32px;
  display: flex; flex-direction: column; gap: 24px;
  box-shadow: var(--bs-shadow-soft);
  transition: transform var(--bs-dur) var(--bs-ease),
              box-shadow var(--bs-dur) var(--bs-ease),
              border-color var(--bs-dur) var(--bs-ease);
}
.aiia-catalog-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--bs-shadow-md);
  border-color: rgba(0, 93, 255, .18);
}

.aiia-catalog-head {
  display: flex; gap: 18px; align-items: flex-start;
}
.aiia-catalog-head h3 {
  font-size: 22px;
  font-weight: var(--bs-w-card);
  letter-spacing: -.025em;
  color: var(--bs-ink);
  margin: 0 0 6px;
  line-height: 1.15;
}
.aiia-catalog-tagline {
  font-size: 14.5px;
  font-weight: var(--bs-w-medium);
  color: var(--bs-blue);
  margin: 0;
  line-height: 1.4;
}

.aiia-catalog-body {
  display: flex; flex-direction: column; gap: 18px;
}
.aiia-catalog-block {
  display: flex; flex-direction: column; gap: 6px;
}
.aiia-catalog-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: var(--bs-w-bold);
  color: var(--bs-text-soft);
}
.aiia-catalog-block p,
.aiia-catalog-meta p {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--bs-text-muted);
  margin: 0;
}

.aiia-catalog-foot {
  display: grid; gap: 14px;
  padding-top: 22px;
  border-top: 1px solid var(--bs-line);
}
.aiia-catalog-meta {
  display: flex; flex-direction: column; gap: 6px;
}
.aiia-catalog-tags {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.aiia-catalog-tag {
  display: inline-flex; align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--bs-apertura);
  color: var(--bs-blue);
  font-size: 12px;
  font-weight: var(--bs-w-semi);
  letter-spacing: -.01em;
}

@media (max-width: 980px) {
  .aiia-catalog-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .aiia-catalog-card { padding: 24px; gap: 20px; }
  .aiia-catalog-head { gap: 14px; }
  .aiia-catalog-head h3 { font-size: 20px; }
}

/* ---------- Matrix · disponibilidad por solución ----------
   Tabla editorial: asistente × plan. Desktop = tabla.
   Mobile = bloques apilados por asistente, sin scroll horizontal. */
.aiia-matrix-wrap {
  background: #fff;
  border: 1px solid var(--bs-line);
  border-radius: var(--bs-radius-lg);
  padding: 8px 12px;
  box-shadow: var(--bs-shadow-soft);
}
.aiia-matrix-table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}
.aiia-matrix-table th,
.aiia-matrix-table td {
  padding: 18px 20px;
  text-align: center;
  border-bottom: 1px solid var(--bs-line);
}
.aiia-matrix-table thead th {
  font-size: 13.5px;
  font-weight: var(--bs-w-semi);
  letter-spacing: -.01em;
  color: var(--bs-ink);
}
.aiia-matrix-table thead th a {
  color: inherit;
  border-bottom: 1px dotted transparent;
  transition: color var(--bs-dur) var(--bs-ease),
              border-color var(--bs-dur) var(--bs-ease);
}
.aiia-matrix-table thead th a:hover {
  color: var(--bs-blue);
  border-bottom-color: rgba(0, 93, 255, .4);
}
.aiia-matrix-table tbody th {
  text-align: left;
  font-size: 15px;
  font-weight: var(--bs-w-semi);
  letter-spacing: -.01em;
  color: var(--bs-ink);
}
.aiia-matrix-table tbody tr:last-child > * {
  border-bottom: none;
}
.aiia-matrix-th-asistente { width: 42%; }

.aiia-matrix-yes {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border-radius: 999px;
  background: rgba(34, 197, 94, .14);
  color: #16a34a;
}
.aiia-matrix-yes svg { width: 16px; height: 16px; }
.aiia-matrix-no {
  display: inline-block;
  color: var(--bs-text-soft);
  font-weight: var(--bs-w-bold);
  font-size: 18px;
}

.aiia-matrix-mobile { display: none; }

.aiia-matrix-note {
  margin: 22px 0 0;
  font-size: 13.5px;
  color: var(--bs-text-soft);
  line-height: 1.55;
  max-width: 720px;
}

@media (max-width: 760px) {
  .aiia-matrix-wrap {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
  }
  .aiia-matrix-table { display: none; }
  .aiia-matrix-mobile {
    display: grid; gap: 14px;
  }
  .aiia-matrix-block {
    background: #fff;
    border: 1px solid var(--bs-line);
    border-radius: var(--bs-radius-md);
    padding: 20px;
    box-shadow: var(--bs-shadow-soft);
  }
  .aiia-matrix-block-title {
    font-size: 16px;
    font-weight: var(--bs-w-card);
    letter-spacing: -.02em;
    color: var(--bs-ink);
    margin: 0 0 12px;
  }
  .aiia-matrix-block-list {
    list-style: none;
    margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: 10px;
  }
  .aiia-matrix-block-list li {
    display: flex; align-items: center; gap: 12px;
    font-size: 14px;
  }
  .aiia-matrix-block-list li a {
    color: var(--bs-text);
    font-weight: var(--bs-w-medium);
  }
  .aiia-matrix-block-list li.no a {
    color: var(--bs-text-soft);
    font-weight: var(--bs-w-regular);
  }
  .aiia-matrix-block-list li a:hover { color: var(--bs-blue); }
}

/* =========================================================
   /asesoria-digital/ — Página de conversión con formulario
   ----------------------------------------------------------
   La única página con form. El hero deja de tener visual
   decorativo: el form ocupa la mitad derecha y se vuelve el
   centro de la página. Estilos con prefijo `.ase-`.
   ========================================================= */

/* ---------- Hero · grid ajustado para form a la derecha ---------- */
.ase-hero-grid {
  grid-template-columns: 1fr 1fr;     /* simétrico — el form pesa */
  align-items: start;
  gap: 48px;
}
.ase-hero-grid > div:first-child {
  padding-top: 8px;                   /* compensa altura del card */
}

/* Lista de checkmarks debajo del lead — más editorial que .micro-proof */
.ase-proof {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ase-proof li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15px;
  color: var(--bs-text);
  line-height: 1.5;
}
.ase-proof-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: 999px;
  background: var(--bs-apertura);
  color: var(--bs-blue);
  font-size: 12px;
  font-weight: var(--bs-w-bold);
  flex-shrink: 0;
  margin-top: 1px;
}

/* ---------- Form card ---------- */
.ase-form-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--bs-line);
  border-radius: var(--bs-radius-lg);
  padding: 32px;
  box-shadow: var(--bs-shadow-md);
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.ase-form-head {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--bs-line);
}
.ase-form-title {
  font-size: 26px;
  font-weight: var(--bs-w-display);
  letter-spacing: -.03em;
  color: var(--bs-ink);
  margin: 0;
  line-height: 1.1;
}
.ase-form-sub {
  font-size: 14px;
  color: var(--bs-text-muted);
  line-height: 1.5;
  margin: 0;
}

/* Grid de campos — 2 columnas con .ase-field-wide ocupando ambas */
.ase-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.ase-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.ase-field-wide { grid-column: 1 / -1; }

.ase-field label {
  font-size: 13px;
  font-weight: var(--bs-w-semi);
  color: var(--bs-ink);
  letter-spacing: -.01em;
}
.ase-field label span[aria-hidden] {
  color: var(--bs-blue);
  margin-left: 2px;
}
.ase-opt {
  font-weight: var(--bs-w-regular);
  color: var(--bs-text-soft);
  margin-left: 4px;
}

.ase-field input,
.ase-field textarea,
.ase-field select {
  font: inherit;
  font-size: 15px;
  color: var(--bs-ink);
  background: var(--bs-surface-soft);
  border: 1px solid var(--bs-line);
  border-radius: var(--bs-radius-sm);
  padding: 11px 14px;
  width: 100%;
  outline: none;
  transition: border-color var(--bs-dur) var(--bs-ease),
              background var(--bs-dur) var(--bs-ease),
              box-shadow var(--bs-dur) var(--bs-ease);
}
.ase-field textarea {
  resize: vertical;
  min-height: 88px;
  line-height: 1.45;
}
.ase-field input:focus,
.ase-field textarea:focus,
.ase-field select:focus {
  border-color: var(--bs-blue);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(0, 93, 255, .12);
}
.ase-field input[aria-invalid="true"],
.ase-field textarea[aria-invalid="true"] {
  border-color: #dc2626;
  background: rgba(220, 38, 38, .03);
}
.ase-field-err {
  font-size: 12px;
  color: #dc2626;
  font-weight: var(--bs-w-semi);
}

/* Select con caret propio (los nativos varían entre OS) */
.ase-select-wrap {
  position: relative;
}
.ase-select-wrap select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 36px;
  cursor: pointer;
}
.ase-select-caret {
  position: absolute;
  right: 14px; top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--bs-text-muted);
  font-size: 12px;
}

/* Mensaje de error general (network/HTTP) */
.ase-form-error {
  background: rgba(220, 38, 38, .08);
  border: 1px solid rgba(220, 38, 38, .25);
  color: #b91c1c;
  font-size: 13.5px;
  padding: 12px 14px;
  border-radius: var(--bs-radius-sm);
  line-height: 1.5;
}
.ase-form-error a { color: inherit; text-decoration: underline; font-weight: var(--bs-w-semi); }

.ase-form-card .btn { width: 100%; justify-content: center; }
.ase-form-card .btn[disabled] { opacity: .6; cursor: progress; pointer-events: none; }

.ase-form-foot {
  font-size: 12px;
  color: var(--bs-text-soft);
  line-height: 1.55;
  margin: 0;
}
.ase-form-foot a {
  color: var(--bs-text-muted);
  border-bottom: 1px dotted var(--bs-text-soft);
}
.ase-form-foot a:hover {
  color: var(--bs-blue);
  border-bottom-color: var(--bs-blue);
}

/* Disclaimer legal de reCAPTCHA — obligatorio cuando se oculta el badge.
   Más tenue que el aviso de privacidad para no robarle protagonismo. */
.ase-form-recaptcha {
  font-size: 11px;
  line-height: 1.55;
  color: var(--bs-text-soft);
  margin: 0;
}
.ase-form-recaptcha a {
  color: var(--bs-text-muted);
  border-bottom: 1px dotted var(--bs-text-soft);
}
.ase-form-recaptcha a:hover {
  color: var(--bs-blue);
  border-bottom-color: var(--bs-blue);
}

/* Ocultar badge flotante de reCAPTCHA v3.
   Google permite ocultarlo siempre que el disclaimer legal aparezca
   visible en la página (ver .ase-form-recaptcha arriba). */
.grecaptcha-badge { visibility: hidden !important; }

/* ---------- Estado de éxito · reemplaza el form ---------- */
.ase-success {
  text-align: center;
  align-items: center;
  padding: 56px 32px;
}
.ase-success-icon {
  width: 64px; height: 64px;
  border-radius: 999px;
  background: rgba(34, 197, 94, .14);
  color: #16a34a;
  display: grid;
  place-items: center;
}
.ase-success-icon svg { width: 32px; height: 32px; }
.ase-success-title {
  font-size: 24px;
  font-weight: var(--bs-w-display);
  letter-spacing: -.03em;
  color: var(--bs-ink);
  margin: 0;
  text-wrap: balance;
}
.ase-success-body {
  font-size: 15px;
  line-height: 1.55;
  color: var(--bs-text-muted);
  margin: 0;
  max-width: 420px;
}
.ase-success-body a {
  color: var(--bs-blue);
  font-weight: var(--bs-w-semi);
}

/* ---------- Stats display ---------- */
.ase-stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  padding: 48px 0;
  border-block: 1px solid var(--bs-line);
  margin-bottom: 56px;
}
.ase-stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ase-stat-line {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.ase-stat-num {
  font-size: clamp(48px, 6vw, 78px);
  line-height: .88;
  letter-spacing: -.05em;
  font-weight: var(--bs-w-display);
  color: var(--bs-ink);
  font-variant-numeric: tabular-nums;
}
.ase-stat-suf {
  font-size: 18px;
  font-weight: var(--bs-w-card);
  letter-spacing: -.02em;
  color: var(--bs-blue);
}
.ase-stat-label {
  font-size: 14px;
  color: var(--bs-text-muted);
  line-height: 1.4;
}

/* ---------- Galería mosaico ---------- */
/* 3 col × 2 row. Main ocupa 2x2 a la izquierda; 2 sides apilan en col 3. */
.ase-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 200px);
  gap: 12px;
}
.ase-gallery-main {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}
.ase-gallery-side { grid-column: 3 / 4; }
.ase-gallery-cell { min-height: 0; }

/* Foto real — object-fit cover para que cada celda se llene sin
   deformar la imagen, independiente de las proporciones del archivo. */
.ase-photo {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: var(--bs-radius-md);
  display: block;
  background: var(--bs-apertura);  /* fallback mientras carga */
}

.ase-team-note {
  margin: 28px 0 0;
  font-size: 13.5px;
  color: var(--bs-text-soft);
  line-height: 1.55;
}

/* ---------- FAQ acordeón ---------- */
/* Dos columnas físicamente independientes (cada una flex column).
   Esto evita que al abrir un item en una columna se estire la fila y
   afecte visualmente al item de la otra columna — bug del grid con
   filas compartidas. */
.ase-faq-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 56px;
  align-items: start;     /* cada col arranca arriba, no se estira */
}
.ase-faq-col {
  display: flex;
  flex-direction: column;
}
.ase-faq-item {
  border-top: 1px solid var(--bs-line);
}
.ase-faq-col .ase-faq-item:last-child {
  border-bottom: 1px solid var(--bs-line);
}
.ase-faq-q {
  width: 100%;
  background: transparent;
  border: none;
  text-align: left;
  font: inherit;
  font-size: 17px;
  font-weight: var(--bs-w-card);
  letter-spacing: -.02em;
  color: var(--bs-ink);
  padding: 22px 8px 22px 0;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  transition: color var(--bs-dur) var(--bs-ease);
}
.ase-faq-q:hover { color: var(--bs-blue); }
.ase-faq-q:focus-visible {
  outline: 2px solid var(--bs-blue);
  outline-offset: 4px;
  border-radius: 4px;
}
.ase-faq-q-text { flex: 1; }

/* Icono ± con líneas que se cruzan; rotamos la vertical en open. */
.ase-faq-icon {
  position: relative;
  width: 18px; height: 18px;
  flex-shrink: 0;
}
.ase-faq-icon::before,
.ase-faq-icon::after {
  content: "";
  position: absolute;
  background: var(--bs-blue);
  border-radius: 1px;
  top: 50%; left: 50%;
  transition: transform var(--bs-dur) var(--bs-ease);
}
.ase-faq-icon::before {
  /* horizontal */
  width: 14px; height: 2px;
  transform: translate(-50%, -50%);
}
.ase-faq-icon::after {
  /* vertical — colapsa en open */
  width: 2px; height: 14px;
  transform: translate(-50%, -50%);
}
.ase-faq-item.open .ase-faq-icon::after {
  transform: translate(-50%, -50%) scaleY(0);
}

.ase-faq-a {
  padding: 0 8px 26px 0;
  max-width: 720px;
}
.ase-faq-a p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--bs-text-muted);
  margin: 0;
}

/* ---------- CTA final · caption centrado ---------- */
/* Solo aplica al CTA de /asesoria-digital/. Los otros final-cta del
   sitio (home, impulsa, conecta, total, asistentes-ia) conservan la
   alineación por defecto del .cta-note. */
.ase-final-cta .cta-note {
  text-align: center;
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .ase-hero-grid { grid-template-columns: 1fr; gap: 32px; }
  /* FAQ vuelve a columna única en tablet/mobile.
     Las 2 columnas se apilan verticalmente; el border-bottom del último
     item de la primera columna se desactiva para no duplicar la línea
     que ya pone el primer item de la segunda columna con su border-top. */
  .ase-faq-list { grid-template-columns: 1fr; column-gap: 0; }
  .ase-faq-col:not(:last-child) .ase-faq-item:last-child { border-bottom: none; }
  .ase-hero-grid > div:first-child { padding-top: 0; }
  .ase-stats-row {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 36px 0;
  }
  .ase-stat-num { font-size: 56px; }
  /* 3 fotos: main full-width arriba, 2 sides apiladas en row 2 (2 cols) */
  .ase-gallery {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 240px 180px;
  }
  .ase-gallery-main { grid-column: 1 / 3; grid-row: 1 / 2; }
  .ase-gallery-side { grid-column: auto; grid-row: auto; }
}
@media (max-width: 600px) {
  .ase-form-card { padding: 24px; }
  .ase-form-grid { grid-template-columns: 1fr; }
  .ase-field-wide { grid-column: auto; }
  .ase-form-title { font-size: 22px; }
  /* 3 fotos apiladas verticalmente */
  .ase-gallery {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, 200px);
  }
  .ase-gallery-main { grid-column: auto; grid-row: auto; }
  .ase-faq-q { font-size: 15.5px; padding: 18px 4px 18px 0; }
}

/* =========================================================
   /faq/ — Página de Preguntas Frecuentes
   ----------------------------------------------------------
   Página de lectura larga: hero limpio centrado + lista de
   categorías + acordeón con respuestas ricas (p/ul/strong/a).
   Prefijo `.faq-*` para no acoplar al acordeón de asesoría.
   ========================================================= */

/* ---------- Hero centrado (variante de .hero-shell) ----------
   El FAQ no necesita visual flotante; centramos contenido y
   limitamos ancho del lead para que no compita con la lista. */
.hero-shell-center {
  text-align: center;
  padding-top: 88px;
  padding-bottom: 64px;
}
.hero-shell-center > .pill {
  margin: 0 auto;
}
.hero-shell-center h1 {
  max-width: 18ch;
  margin-inline: auto;
}
.hero-shell-center .hero-copy {
  max-width: 620px;
  margin-inline: auto;
  margin-bottom: 28px;
  text-align: center;
}
.hero-shell-center .hero-actions {
  justify-content: center;
}

/* ---------- Lista de FAQ ---------- */
.faq-container {
  max-width: 820px;
}
.faq-category + .faq-category {
  margin-top: 56px;
}
.faq-category-title {
  font-size: 13px;
  font-weight: var(--bs-w-bold);
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--bs-blue);
  margin: 0 0 18px;
}
.faq-items {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--bs-line);
}
.faq-item {
  border-bottom: 1px solid var(--bs-line);
}
.faq-q {
  width: 100%;
  background: transparent;
  border: none;
  text-align: left;
  font: inherit;
  font-size: 17px;
  font-weight: var(--bs-w-card);
  letter-spacing: -.02em;
  color: var(--bs-ink);
  padding: 22px 8px 22px 0;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  transition: color var(--bs-dur) var(--bs-ease);
}
.faq-q:hover { color: var(--bs-blue); }
.faq-q:focus-visible {
  outline: 2px solid var(--bs-blue);
  outline-offset: 4px;
  border-radius: 4px;
}
.faq-q-text { flex: 1; }

/* Icono ± idéntico al de asesoría — líneas que se cruzan y la
   vertical colapsa cuando el item se abre. */
.faq-icon {
  position: relative;
  width: 18px; height: 18px;
  flex-shrink: 0;
}
.faq-icon::before,
.faq-icon::after {
  content: "";
  position: absolute;
  background: var(--bs-blue);
  border-radius: 1px;
  top: 50%; left: 50%;
  transition: transform var(--bs-dur) var(--bs-ease);
}
.faq-icon::before {
  width: 14px; height: 2px;
  transform: translate(-50%, -50%);
}
.faq-icon::after {
  width: 2px; height: 14px;
  transform: translate(-50%, -50%);
}
.faq-item.open .faq-icon::after {
  transform: translate(-50%, -50%) scaleY(0);
}

/* Respuesta rica — soporta p, ul, ol, strong, em, a inline */
.faq-a {
  padding: 0 8px 28px 0;
}
.faq-a > * + * { margin-top: 14px; }
.faq-a p,
.faq-a li {
  font-size: 15px;
  line-height: 1.65;
  color: var(--bs-text-muted);
  margin: 0;
}
.faq-a strong {
  color: var(--bs-ink);
  font-weight: var(--bs-w-semi);
}
.faq-a em {
  font-style: italic;
  color: var(--bs-text-soft);
}
.faq-a ul,
.faq-a ol {
  margin: 0;
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.faq-a li::marker {
  color: var(--bs-confianza);
}
.faq-a a {
  color: var(--bs-blue);
  border-bottom: 1px dotted rgba(0, 93, 255, .35);
  transition: color var(--bs-dur-fast) var(--bs-ease),
              border-bottom-color var(--bs-dur-fast) var(--bs-ease);
}
.faq-a a:hover {
  color: var(--bs-blue-dark);
  border-bottom-color: var(--bs-blue);
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .hero-shell-center { padding-top: 64px; padding-bottom: 48px; }
  .hero-shell-center h1 { max-width: 20ch; }
}
@media (max-width: 600px) {
  .faq-category + .faq-category { margin-top: 40px; }
  .faq-q { font-size: 15.5px; padding: 18px 4px 18px 0; }
  .faq-a p, .faq-a li { font-size: 14.5px; }
}