/* ============================================================
   visual-boost.css · Capa visual + interactiva para lead-gen
   ------------------------------------------------------------
   Carga DESPUÉS de restyle-v2.css. Solo home (index.html).
   Respeta SIEMPRE prefers-reduced-motion: reduce.
   Paleta: hereda --paper / --ink / --accent / --rule de
   restyle-v2.css y los aliases --exa-* del kit Elementor.
   ============================================================ */

/* ─────────── 1) Rotator de palabras en H1 ─────────── */
.exa-rotator {
  display: inline-block;
  position: relative;
  color: var(--exa-primary, #1F3A5F);
  font-style: italic;
  white-space: nowrap;
  min-width: 1ch;
  vertical-align: baseline;
  transition: opacity .35s ease;
}
.exa-rotator.is-out { opacity: 0; }
.exa-rotator.is-in  { opacity: 1; }
/* Caret retirado D-053 · era visualmente invasivo. La transición fade
   en .exa-rotator (.is-out/.is-in) ya da feedback de cambio sin barra. */

/* ─────────── 2) Live ticker "atendiendo" ─────────── */
.exa-live-ticker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0 0;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(31, 58, 95, .06);
  border: 1px solid rgba(31, 58, 95, .12);
  font-family: "JetBrains Mono", ui-monospace, Menlo, monospace;
  font-size: 11.5px;
  letter-spacing: .04em;
  color: var(--ink, #0E1A2B);
  line-height: 1.2;
}
.exa-live-ticker .exa-live-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #16a34a;
  box-shadow: 0 0 0 0 rgba(22, 163, 74, .55);
  animation: exa-live-pulse 1.6s ease-out infinite;
  flex: 0 0 auto;
}
.exa-live-ticker b {
  color: var(--exa-primary, #1F3A5F);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  transition: opacity .35s ease;
}
.exa-live-ticker b.is-swapping { opacity: 0; }
@keyframes exa-live-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(22, 163, 74, .55); }
  70%  { box-shadow: 0 0 0 8px rgba(22, 163, 74, 0); }
  100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0); }
}

/* ─────────── 3) Mini-CTA hero (calculadora) ─────────── */
.exa-mini-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 10px 16px 10px 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(184, 146, 76, .14), rgba(184, 146, 76, .06));
  border: 1px dashed rgba(184, 146, 76, .55);
  color: var(--ink, #0E1A2B);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.exa-mini-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px -10px rgba(184, 146, 76, .55);
  background: linear-gradient(135deg, rgba(184, 146, 76, .22), rgba(184, 146, 76, .10));
  color: var(--ink, #0E1A2B);
}
.exa-mini-cta .exa-mini-cta-emoji {
  font-size: 16px;
  line-height: 1;
}
.exa-mini-cta .exa-mini-cta-time {
  font-family: "JetBrains Mono", ui-monospace, Menlo, monospace;
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-dim, #65758E);
  letter-spacing: .04em;
}

/* ─────────── 4) Counter target (mientras anima) ─────────── */
[data-counter] { font-variant-numeric: tabular-nums; }
[data-counter].is-counting { will-change: contents; }

/* ─────────── 5) Lex búho FAB · blink ocasional ─────────── */
.lex-fab.exa-wink::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(circle at 50% 45%, rgba(255, 255, 255, .35), transparent 60%);
  opacity: 0;
  animation: exa-wink-flash .42s ease-out 1;
}
@keyframes exa-wink-flash {
  0%   { opacity: 0; transform: scale(.9); }
  35%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.05); }
}

/* ─────────── 6) Servicios "rich" (Ola 2) ─────────── */
/* Aplica solo a .services--rich para no romper otras páginas. */
.services--rich .svc {
  transition: transform .28s cubic-bezier(.2,.8,.2,1),
              box-shadow .28s cubic-bezier(.2,.8,.2,1),
              border-color .2s ease,
              background .2s ease;
}
.services--rich .svc:hover {
  transform: translateY(-6px);
  border-color: var(--exa-primary, #1F3A5F);
  background: rgba(255, 255, 255, .85);
  box-shadow:
    0 24px 48px -22px rgba(28, 59, 90, .35),
    0 4px 12px -4px rgba(184, 146, 76, .18);
}
.services--rich .svc:active { transform: translateY(-3px); }
.services--rich .svc__icon {
  transition: background .25s ease, color .25s ease, transform .35s cubic-bezier(.2,.8,.2,1);
}
.services--rich .svc:hover .svc__icon {
  transform: scale(1.08) rotate(-3deg);
}
/* Stroke-draw del icon path al hover. Funciona en SVGs con stroke (todos los .svc__icon). */
.services--rich .svc__icon svg path,
.services--rich .svc__icon svg circle,
.services--rich .svc__icon svg rect {
  stroke-dasharray: 90;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset .9s ease;
}
.services--rich .svc:hover .svc__icon svg path,
.services--rich .svc:hover .svc__icon svg circle,
.services--rich .svc:hover .svc__icon svg rect {
  animation: exa-svc-draw 1.1s ease forwards;
}
@keyframes exa-svc-draw {
  0%   { stroke-dashoffset: 90; }
  100% { stroke-dashoffset: 0; }
}

/* Badge "Más demandado" */
.svc__badge {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, #2563EB, #38BDF8);
  color: #fff;
  font-family: "JetBrains Mono", ui-monospace, Menlo, monospace;
  font-size: 9.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .12em;
  box-shadow: 0 6px 14px -6px rgba(184, 146, 76, .55);
  pointer-events: none;
  z-index: 2;
}
.svc__badge::before {
  content: "★ ";
  color: rgba(255, 255, 255, .85);
}

/* Hint visual al hover (solo desktop con cursor) */
@media (hover: hover) and (pointer: fine) {
  .services--rich .svc[data-svc]::after {
    content: "Click para detalles";
    position: absolute;
    bottom: 12px;
    right: 14px;
    font-family: "JetBrains Mono", ui-monospace, Menlo, monospace;
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--ink-dim, #65758E);
    opacity: 0;
    transform: translateY(4px);
    transition: opacity .25s ease, transform .25s ease;
    pointer-events: none;
  }
  .services--rich .svc[data-svc]:hover::after {
    opacity: .8;
    transform: translateY(0);
  }
}

/* ─────────── 7) Modal de servicio (Ola 2) ─────────── */
.exa-svc-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(14, 26, 43, .55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9998;
  padding: 24px;
  opacity: 0;
  transition: opacity .25s ease;
}
.exa-svc-modal-overlay.is-open {
  display: flex;
  opacity: 1;
}
.exa-svc-modal {
  background: var(--paper, #FFFFFF);
  border-radius: 16px;
  border: 1px solid var(--rule, #E2E6EB);
  width: min(540px, 100%);
  max-height: min(86vh, 86dvh);
  overflow-y: auto;
  padding: 28px 28px 24px;
  position: relative;
  box-shadow: 0 32px 80px -28px rgba(14, 26, 43, .5);
  transform: translateY(12px) scale(.97);
  opacity: 0;
  transition: transform .3s cubic-bezier(.2,.8,.2,1), opacity .3s ease;
}
.exa-svc-modal-overlay.is-open .exa-svc-modal {
  transform: translateY(0) scale(1);
  opacity: 1;
}
.exa-svc-modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--rule, #E2E6EB);
  background: transparent;
  color: var(--ink, #0E1A2B);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s ease, border-color .2s ease;
}
.exa-svc-modal__close:hover {
  background: rgba(31, 58, 95, .08);
  border-color: var(--exa-primary, #1F3A5F);
}
.exa-svc-modal__eyebrow {
  font-family: "JetBrains Mono", ui-monospace, Menlo, monospace;
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-dim, #65758E);
  margin: 0 0 8px;
}
.exa-svc-modal__title {
  font-family: "Newsreader", "Montserrat", -apple-system, BlinkMacSystemFont, serif;
  font-size: 26px;
  line-height: 1.15;
  font-weight: 500;
  color: var(--ink, #0E1A2B);
  margin: 0 0 16px;
  letter-spacing: -.01em;
}
.exa-svc-modal__title em {
  color: var(--exa-primary, #1F3A5F);
  font-style: italic;
}
.exa-svc-modal__bullets {
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.exa-svc-modal__bullets li {
  display: flex;
  gap: 10px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-soft, #3D4F65);
}
.exa-svc-modal__bullets li::before {
  content: "✓";
  flex: 0 0 auto;
  color: var(--exa-primary, #1F3A5F);
  font-weight: 700;
  font-size: 14px;
  margin-top: 1px;
}
.exa-svc-modal__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.exa-svc-modal__btn {
  flex: 1 1 auto;
  min-width: 180px;
  padding: 12px 18px;
  border-radius: 999px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
  border: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.exa-svc-modal__btn--primary {
  background: var(--exa-primary, #1F3A5F) !important;
  color: #fff !important;
}
.exa-svc-modal__btn--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px -10px rgba(31, 58, 95, .55);
  background: var(--exa-secondary, #0E1A2B) !important;
  color: #fff !important;
}
.exa-svc-modal__btn--ghost {
  background: transparent !important;
  border-color: var(--rule, #E2E6EB);
  color: var(--ink, #0E1A2B) !important;
}
.exa-svc-modal__btn--ghost:hover {
  border-color: var(--exa-primary, #1F3A5F);
  background: rgba(31, 58, 95, .06) !important;
  color: var(--ink, #0E1A2B) !important;
}
.exa-svc-modal__more {
  display: block;
  margin-top: 14px;
  text-align: center;
  font-family: "JetBrains Mono", ui-monospace, Menlo, monospace;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-dim, #65758E);
  text-decoration: none;
}
.exa-svc-modal__more:hover { color: var(--exa-primary, #1F3A5F); }
body.exa-svc-modal-locked { overflow: hidden; }

/* ─────────── 8) Sección Diagnóstico rápido + tabs (Ola 3) ─────────── */
.diag-band .section-head h2 em {
  color: var(--exa-primary, #1F3A5F);
  font-style: italic;
}
.diag-tabs {
  display: flex;
  gap: 12px;
  max-width: 760px;
  margin: 0 auto 28px;
  flex-wrap: wrap;
}
.diag-tab {
  flex: 1 1 320px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 18px 22px;
  border-radius: 14px;
  border: 1.5px solid var(--rule, #E2E6EB);
  background: rgba(255, 255, 255, .55);
  color: var(--ink, #0E1A2B);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  text-align: left;
  cursor: pointer;
  transition: border-color .25s ease, background .25s ease, transform .25s ease, box-shadow .25s ease;
}
.diag-tab:hover {
  border-color: var(--exa-primary, #1F3A5F);
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -16px rgba(28, 59, 90, .3);
}
.diag-tab.is-active {
  border-color: var(--exa-primary, #1F3A5F);
  background: var(--exa-primary, #1F3A5F);
  color: #fff;
  box-shadow: 0 18px 36px -18px rgba(31, 58, 95, .55);
}
.diag-tab__emoji {
  font-size: 22px;
  line-height: 1;
  margin-bottom: 2px;
}
.diag-tab__label {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -.01em;
}
.diag-tab__sub {
  font-family: "JetBrains Mono", ui-monospace, Menlo, monospace;
  font-size: 11px;
  opacity: .75;
  letter-spacing: .04em;
}
.diag-tab.is-active .diag-tab__sub { opacity: .85; }
.diag-panels { max-width: 760px; margin: 0 auto; }
.diag-panel { display: none; }
.diag-panel.is-active { display: block; animation: diag-fade .35s ease-out; }
.diag-panel[hidden] { display: none !important; }
@keyframes diag-fade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.diag-foot {
  max-width: 760px;
  margin: 24px auto 0;
  text-align: center;
  font-family: "JetBrains Mono", ui-monospace, Menlo, monospace;
  font-size: 11.5px;
  letter-spacing: .04em;
  color: var(--ink-dim, #65758E);
}
.diag-foot a {
  color: var(--exa-primary, #1F3A5F);
  text-decoration: underline;
  font-weight: 500;
}

/* ─────────── 9) Banner sticky de plazas decreciente (Ola 3) ─────────── */
.exa-plazas-banner {
  position: sticky;
  top: 0;
  z-index: 49; /* debajo del header sticky (50) pero encima del contenido */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 8px 14px;
  background: linear-gradient(135deg, #2563EB, #1E40AF);
  color: #fff;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 13.5px;
  font-weight: 500;
  text-align: center;
  box-shadow: 0 4px 12px -6px rgba(184, 146, 76, .55);
  animation: exa-plazas-in .45s cubic-bezier(.2,.8,.2,1);
}
.exa-plazas-banner[hidden] { display: none; }
@keyframes exa-plazas-in {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
.exa-plazas-icon { font-size: 16px; line-height: 1; }
.exa-plazas-text {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}
.exa-plazas-text b {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: rgba(255, 255, 255, .22);
  padding: 1px 8px;
  border-radius: 6px;
  font-size: 14px;
}
.exa-plazas-cta {
  background: #fff;
  color: var(--exa-primary, #1F3A5F) !important;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none !important;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.exa-plazas-cta:hover {
  transform: translateY(-1px);
  background: #fff;
  box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .2);
}
.exa-plazas-secondary {
  color: #fff !important;
  text-decoration: underline !important;
  font-size: 12px;
  opacity: .9;
}
.exa-plazas-secondary:hover { opacity: 1; color: #fff !important; }
.exa-plazas-close {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, .8);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  margin-left: auto;
  transition: color .2s ease;
}
.exa-plazas-close:hover { color: #fff; }
@media (max-width: 720px) {
  .exa-plazas-banner {
    padding: 8px 10px;
    font-size: 12.5px;
    gap: 8px;
    flex-wrap: nowrap;
  }
  .exa-plazas-secondary { display: none; }
  .exa-plazas-cta { padding: 5px 12px; font-size: 12px; white-space: nowrap; }
  .exa-plazas-text { font-size: 12px; line-height: 1.2; }
}
@media (max-width: 480px) {
  /* D-058: el banner se rompía en 3 líneas (81px). Reducir tamaños
     + texto más conciso vía CSS pseudo-element + nowrap para 1 línea. */
  .exa-plazas-banner {
    font-size: 11.5px;
    padding: 7px 8px;
    gap: 6px;
  }
  .exa-plazas-icon { display: none; }
  .exa-plazas-close { padding: 4px 6px; font-size: 16px; }
  .exa-plazas-text { font-size: 11.5px; }
  .exa-plazas-cta { padding: 4px 10px; font-size: 11.5px; }
}
@media (max-width: 380px) {
  .exa-plazas-banner { padding: 6px 7px; gap: 5px; }
  .exa-plazas-text { font-size: 11px; }
  .exa-plazas-cta { padding: 4px 9px; font-size: 11px; }
}

/* ─────────── 10) Diag tabs móvil ─────────── */
@media (max-width: 600px) {
  .diag-tabs { gap: 8px; padding: 0 8px; }
  .diag-tab { padding: 14px 16px; flex: 1 1 100%; }
  .diag-tab__label { font-size: 15px; }
  .diag-tab__sub { font-size: 10.5px; }
}

/* ─────────── 11) Animaciones globales al scroll (Ola 4) ─────────── */
/* Fade-up: aplicado dinámicamente a las .band fuera del fold inicial. */
.fade-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s cubic-bezier(.2,.8,.2,1),
              transform .7s cubic-bezier(.2,.8,.2,1);
  will-change: opacity, transform;
}
.fade-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* D-047: Salvavidas si JS falla, está deshabilitado o el IO no dispara.
   Si tras 3.5 s el body no tiene la marca .exa-fade-ready, mostramos todo
   tal cual. Evita huecos vacíos al hacer scroll en móviles lentos. */
@media (prefers-reduced-motion: no-preference) {
  body:not(.exa-fade-ready) .fade-up {
    animation: exaFadeUpFallback 0s linear 3.5s forwards;
  }
}
@keyframes exaFadeUpFallback {
  to { opacity: 1; transform: translateY(0); }
}

/* En móvil: las animaciones fade-up son cosméticas. Si JS no las activa por
   cualquier motivo (Safari iOS, scroll rápido, navegador legacy), se ven igual
   con transición instantánea desde el principio — mejor que hueco vacío. */
@media (max-width: 720px) {
  .fade-up { transition-duration: .45s; }
}

/* Scroll progress bar — barra arena 3px arriba del todo. */
.exa-scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, #2563EB, #38BDF8);
  z-index: 51; /* encima del header sticky (50) */
  transition: width .08s linear;
  pointer-events: none;
}

/* Smooth scroll para anchors + offset header sticky. */
html { scroll-behavior: smooth; }
:where([id]) { scroll-margin-top: 84px; }

/* Micro-animación tap: feedback universal de :active en CTAs principales.
   Aplica a botones grandes (.btn, .exa-mini-cta, submit, modales, tabs, plazas)
   sin pelear con :hover existente. */
.btn,
.exa-mini-cta,
.exa-lead-form-submit,
.exa-svc-modal__btn,
.exa-plazas-cta,
.diag-tab,
.exa-wizard-btn {
  -webkit-tap-highlight-color: rgba(31, 58, 95, .12);
  transition: transform .12s cubic-bezier(.2,.8,.2,1),
              box-shadow .25s ease,
              background .2s ease,
              color .2s ease,
              border-color .2s ease;
}
.btn:active,
.exa-mini-cta:active,
.exa-lead-form-submit:active,
.exa-svc-modal__btn:active,
.exa-plazas-cta:active,
.diag-tab:active,
.exa-wizard-btn:active {
  transform: scale(.96);
}
/* Glow pulse opcional al hover en CTAs primarios. Aprovecha que .btn--primary
   ya tiene box-shadow base — solo lo amplifica brevemente. */
@keyframes exa-btn-glow {
  0%, 100% { box-shadow: 0 8px 22px -10px rgba(31, 58, 95, .35); }
  50%      { box-shadow: 0 12px 30px -10px rgba(31, 58, 95, .55); }
}
.btn--primary:not(:disabled):hover,
.exa-svc-modal__btn--primary:not(:disabled):hover {
  animation: exa-btn-glow 1.6s ease-in-out infinite;
}

/* ─────────── 12) Form hero "2 pasos" (Ola 5) ─────────── */
.exa-lead-form--steps .exa-lead-form-progress {
  position: relative;
  height: 3px;
  border-radius: 2px;
  background: rgba(184, 146, 76, .18);
  margin: 6px 0 14px;
  overflow: hidden;
}
.exa-lead-form--steps .exa-lead-form-progress-bar {
  position: absolute;
  inset: 0 auto 0 0;
  width: 50%;
  background: linear-gradient(90deg, #2563EB, #38BDF8);
  border-radius: 2px;
  transition: width .35s cubic-bezier(.2,.8,.2,1);
}
.exa-lead-form--steps .exa-lead-form-progress[data-step="2"] .exa-lead-form-progress-bar {
  width: 100%;
}
.exa-lead-form-chips {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}
.exa-lead-form-chip {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1.5px solid var(--rule, #E2E6EB);
  background: rgba(255, 255, 255, .65);
  color: var(--ink, #0E1A2B);
  cursor: pointer;
  text-align: left;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  transition: border-color .2s ease, background .2s ease, transform .15s ease, box-shadow .2s ease;
}
.exa-lead-form-chip:hover {
  border-color: var(--exa-primary, #1F3A5F);
  background: rgba(255, 255, 255, .9);
  transform: translateY(-1px);
  box-shadow: 0 8px 18px -10px rgba(28, 59, 90, .25);
}
.exa-lead-form-chip:focus-visible {
  outline: 2px solid var(--exa-primary, #1F3A5F);
  outline-offset: 2px;
}
.exa-lead-form-chip[aria-checked="true"] {
  border-color: var(--exa-primary, #1F3A5F);
  background: var(--exa-primary, #1F3A5F);
  color: #fff;
}
.exa-lead-form-chip__emoji {
  font-size: 22px;
  line-height: 1;
  flex: 0 0 auto;
}
.exa-lead-form-chip__label {
  display: block;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-weight: 600 !important;
  font-size: 14.5px !important;
  letter-spacing: -.005em !important;
  text-transform: none !important;
  line-height: 1.3 !important;
}
.exa-lead-form-chip__sub {
  display: block;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-weight: 400 !important;
  font-size: 12px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  opacity: .72;
  margin-top: 3px !important;
  line-height: 1.4 !important;
}
.exa-lead-form-chip[aria-checked="true"] .exa-lead-form-chip__sub { opacity: .85; }
.exa-lead-form-step1,
.exa-lead-form-step2 {
  animation: exa-step-fade .3s cubic-bezier(.2,.8,.2,1);
}
.exa-lead-form-step2[hidden] { display: none !important; }
@keyframes exa-step-fade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.exa-lead-form-step2__intro {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px !important;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 13px !important;
  color: var(--ink-soft, #3D4F65) !important;
}
.exa-lead-form-back {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--rule, #E2E6EB);
  background: transparent;
  color: var(--ink, #0E1A2B);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s ease, border-color .2s ease;
}
.exa-lead-form-back:hover {
  background: rgba(31, 58, 95, .08);
  border-color: var(--exa-primary, #1F3A5F);
}

/* ─────────── 12.5) Override wizard result CTA · Marino & Arena (D-051) ─────────── */
/* Sobrescribe el bloque azul/teal con CTA naranja del lead-tools.css legacy
   (paleta Elementor antigua) para que respete la paleta editorial Marino & Arena. */
.exa-wizard-result-cta-block {
  background: linear-gradient(180deg, var(--paper, #FFFFFF) 0%, #EEF1F4 100%) !important;
  color: var(--ink, #0E1A2B) !important;
  border: 1px solid var(--rule, #E2E6EB) !important;
  box-shadow: 0 18px 36px -22px rgba(28, 59, 90, .25) !important;
}
.exa-wizard-result-cta-block h3 {
  color: var(--ink, #0E1A2B) !important;
  font-family: "Newsreader", "Montserrat", -apple-system, BlinkMacSystemFont, serif !important;
  font-weight: 500 !important;
  font-size: clamp(22px, 2.6vw, 30px) !important;
  letter-spacing: -.01em !important;
}
.exa-wizard-result-cta-block h3 em {
  color: var(--exa-primary, #1F3A5F) !important;
  font-style: italic !important;
}
.exa-wizard-result-cta-block p {
  color: var(--ink-soft, #3D4F65) !important;
}
.exa-wizard-result-cta-block .exa-wizard-input-group label {
  color: var(--ink-dim, #65758E) !important;
}
.exa-wizard-result-cta-block .exa-wizard-input-group input {
  background: #fff !important;
  border-color: var(--rule, #E2E6EB) !important;
  color: var(--ink, #0E1A2B) !important;
}
.exa-wizard-result-cta-block .exa-wizard-input-group input::placeholder {
  color: var(--ink-dim, #65758E) !important;
  opacity: .7;
}
.exa-wizard-result-cta-block .exa-wizard-input-group input:focus {
  background: #fff !important;
  border-color: var(--exa-primary, #1F3A5F) !important;
  box-shadow: 0 0 0 3px rgba(31, 58, 95, .14) !important;
}
.exa-wizard-result-cta-block .exa-wizard-btn--primary {
  background: var(--exa-primary, #1F3A5F) !important;
  border-color: var(--exa-primary, #1F3A5F) !important;
  color: #fff !important;
}
.exa-wizard-result-cta-block .exa-wizard-btn--primary:hover {
  background: var(--exa-secondary, #0E1A2B) !important;
  border-color: var(--exa-secondary, #0E1A2B) !important;
  color: #fff !important;
}
.exa-wizard-result-cta-block .exa-wizard-disclaimer {
  color: var(--ink-dim, #65758E) !important;
}
.exa-wizard-result-cta-block .exa-wizard-disclaimer a {
  color: var(--exa-primary, #1F3A5F) !important;
  text-decoration: underline !important;
}

/* ─────────── 12.7) Botón .btn--accent · arena gradient (D-057) ─────────── */
/* Variante de botón en color arena para CTAs de pago / producto destacado.
   Coherente con el patrón visual ya consolidado: badges "★ Más solicitado",
   banner plazas y mini-CTA hero — todos en arena. */
.btn.btn--accent {
  background: linear-gradient(135deg, #2563EB, #38BDF8) !important;
  color: #fff !important;
  border: 1px solid transparent !important;
  box-shadow: 0 8px 22px -10px rgba(184, 146, 76, .55) !important;
  transition: transform .2s ease, box-shadow .25s ease, background .25s ease !important;
}
.btn.btn--accent:hover {
  background: linear-gradient(135deg, #a07e3f, #c39858) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 12px 28px -10px rgba(184, 146, 76, .65) !important;
  color: #fff !important;
}
.btn.btn--accent:active { transform: translateY(0) scale(.98) !important; }

/* ─────────── 12.6) H1 hero compacto (D-055) ─────────── */
/* Override del H1 hero: era clamp(44px, 6vw, 88px) — demasiado grande,
   creaba cascada vertical de 8 líneas en desktop. Reducido a un tamaño
   más razonable que mantiene presencia editorial sin ocupar pantalla.
   Aplica solo al H1 del hero de la home (#hero-title) para no afectar
   otros H1 en landings interiores. */
.hero-content h1#hero-title {
  font-size: clamp(28px, 3.6vw, 52px) !important;
  line-height: 1.08 !important;
  margin: 0 0 18px !important;
  letter-spacing: -0.02em !important;
}
@media (max-width: 720px) {
  .hero-content h1#hero-title {
    font-size: clamp(26px, 7vw, 40px) !important;
    line-height: 1.1 !important;
  }
}

/* ─────────── 13) Cierre "¿Hablamos?" (Ola 6) ─────────── */
.exa-cierre {
  background: linear-gradient(180deg, var(--exa-bg-alt, #EEF1F4) 0%, #F0E4C7 100%);
  padding-top: 72px !important;
  padding-bottom: 72px !important;
}
.exa-cierre__head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 44px;
}
.exa-cierre__head .kicker {
  margin-bottom: 12px;
}
.exa-cierre__head h2 {
  font-family: "Newsreader", "Montserrat", -apple-system, BlinkMacSystemFont, serif !important;
  font-size: clamp(48px, 8vw, 96px) !important;
  line-height: 1.05 !important;
  font-weight: 400 !important;
  margin: 0 0 18px !important;
  color: var(--ink, #0E1A2B) !important;
  letter-spacing: -.02em !important;
}
.exa-cierre__head h2 em {
  color: var(--exa-primary, #1F3A5F);
  font-style: italic;
}
.exa-cierre__sub {
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-soft, #3D4F65);
  margin: 0;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}
.exa-cierre__channels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  max-width: 980px;
  margin: 0 auto 36px;
}
.exa-cierre__card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 28px 24px 26px;
  border: 1.5px solid var(--rule, #E2E6EB);
  border-radius: 18px;
  background: rgba(255, 255, 255, .65);
  backdrop-filter: blur(6px);
  text-decoration: none;
  color: var(--ink, #0E1A2B);
  cursor: pointer;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  text-align: left;
  transition: transform .28s cubic-bezier(.2,.8,.2,1),
              box-shadow .28s cubic-bezier(.2,.8,.2,1),
              border-color .2s ease,
              background .2s ease;
}
.exa-cierre__card:hover {
  transform: translateY(-6px);
  border-color: var(--exa-primary, #1F3A5F);
  background: rgba(255, 255, 255, .92);
  box-shadow:
    0 28px 56px -22px rgba(28, 59, 90, .35),
    0 6px 16px -4px rgba(184, 146, 76, .2);
  color: var(--ink, #0E1A2B);
}
.exa-cierre__card:focus-visible {
  outline: 2px solid var(--exa-primary, #1F3A5F);
  outline-offset: 3px;
}
.exa-cierre__icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: var(--exa-primary, #1F3A5F);
  color: #fff;
  margin-bottom: 6px;
}
.exa-cierre__icon svg {
  width: 30px;
  height: 30px;
}
.exa-cierre__icon--owl {
  background: #2563EB;
  color: #fff;
}
.exa-cierre__icon--owl svg {
  width: 44px;
  height: 44px;
}
.exa-cierre__card--wa .exa-cierre__icon {
  background: #25D366;
}
.exa-cierre__label {
  font-family: "JetBrains Mono", ui-monospace, Menlo, monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--ink-dim, #65758E);
  margin-top: 4px;
}
.exa-cierre__value {
  font-family: "Newsreader", "Montserrat", -apple-system, BlinkMacSystemFont, serif;
  font-weight: 500;
  font-size: clamp(22px, 3vw, 30px);
  letter-spacing: -.01em;
  line-height: 1.1;
  color: var(--ink, #0E1A2B);
  font-variant-numeric: tabular-nums;
}
.exa-cierre__hint {
  font-family: "JetBrains Mono", ui-monospace, Menlo, monospace;
  font-size: 11px;
  color: var(--ink-dim, #65758E);
  letter-spacing: .04em;
  margin-top: 4px;
}
.exa-cierre__card--lex {
  border-style: dashed;
}
.exa-cierre__foot {
  text-align: center;
  margin: 0 auto;
  max-width: 720px;
  font-family: "JetBrains Mono", ui-monospace, Menlo, monospace;
  font-size: 11.5px;
  line-height: 1.6;
  letter-spacing: .04em;
  color: var(--ink-dim, #65758E);
}
.exa-cierre__foot a {
  color: var(--exa-primary, #1F3A5F);
  text-decoration: underline;
  font-weight: 500;
}
@media (max-width: 720px) {
  .exa-cierre { padding-top: 56px !important; padding-bottom: 56px !important; }
  .exa-cierre__head h2 { font-size: clamp(40px, 12vw, 64px) !important; }
  .exa-cierre__channels { gap: 12px; }
  .exa-cierre__card { padding: 22px 20px; }
}

/* ─────────── 14) prefers-reduced-motion: apaga TODO ─────────── */
@media (prefers-reduced-motion: reduce) {
  .exa-rotator { transition: none; }
  .exa-live-ticker .exa-live-dot { animation: none; }
  .exa-live-ticker b { transition: none; }
  .exa-mini-cta { transition: none; }
  .exa-mini-cta:hover { transform: none; }
  .lex-fab.exa-wink::before { animation: none; }
  .services--rich .svc { transition: none; }
  .services--rich .svc:hover { transform: none; }
  .services--rich .svc__icon { transition: none; }
  .services--rich .svc:hover .svc__icon { transform: none; }
  .services--rich .svc:hover .svc__icon svg path,
  .services--rich .svc:hover .svc__icon svg circle,
  .services--rich .svc:hover .svc__icon svg rect { animation: none; }
  .exa-svc-modal-overlay,
  .exa-svc-modal { transition: none; }
  .diag-tab { transition: none; }
  .diag-tab:hover { transform: none; }
  .diag-panel.is-active { animation: none; }
  .exa-plazas-banner { animation: none; }
  .exa-plazas-cta:hover { transform: none; }
  /* Ola 4 */
  html { scroll-behavior: auto; }
  .fade-up { opacity: 1; transform: none; transition: none; }
  .exa-scroll-progress { transition: none; }
  .btn, .exa-mini-cta, .exa-lead-form-submit, .exa-svc-modal__btn,
  .exa-plazas-cta, .diag-tab, .exa-wizard-btn { transition: none; }
  .btn:active, .exa-mini-cta:active, .exa-lead-form-submit:active,
  .exa-svc-modal__btn:active, .exa-plazas-cta:active, .diag-tab:active,
  .exa-wizard-btn:active { transform: none; }
  .btn--primary:not(:disabled):hover,
  .exa-svc-modal__btn--primary:not(:disabled):hover { animation: none; }
  /* Ola 5 */
  .exa-lead-form--steps .exa-lead-form-progress-bar { transition: none; }
  .exa-lead-form-chip { transition: none; }
  .exa-lead-form-chip:hover { transform: none; }
  .exa-lead-form-step1, .exa-lead-form-step2 { animation: none; }
  /* Ola 6 */
  .exa-cierre__card { transition: none; }
  .exa-cierre__card:hover { transform: none; }
}

/* ─────────── 7) Móvil: ticker + mini-CTA full-width ─────────── */
@media (max-width: 480px) {
  .exa-live-ticker {
    display: flex;
    width: 100%;
    justify-content: center;
    font-size: 11px;
  }
  .exa-mini-cta {
    display: flex;
    width: 100%;
    justify-content: center;
    text-align: center;
    font-size: 13px;
  }
  .exa-mini-cta .exa-mini-cta-time { display: none; }
}

/* ──────────────────────────────────────────────────────────────────────────
   D-058 · COMPARATIVA TABLE → STACKED CARDS EN MÓVIL
   D-058b · TABLA #comparativa → STACKED CARDS EN MÓVIL
   D-058c · FOOTER cream sobre navy + padding-bottom FAB
   --------------------------------------------------------------------------
   MOVIDOS A `assets/mobile-fixes.css` (sección D-061) el 13-may-2026 para
   que apliquen también a las 24 internas que usan `.ig-table` o
   `#comparativa table` y a las 138 que usan `footer.site-foot`.
   Ver `assets/mobile-fixes.css` líneas finales.
   ────────────────────────────────────────────────────────────────────────── */