/*
 * TPA Landing Plugin - landing.css
 * Loaded AFTER gga.css (dependency chain: base.css → gga.css → landing.css)
 * Version: filemtime() — always fresh, never cached.
 */

/* =====================================================
   TYPOGRAPHY — overrides gga.css and base.css
   body.tpa-landing-page prefix gives specificity (0,2,1)
   which beats gga.css (0,1,1) — combined with !important
   these rules are unconditional.
   ===================================================== */

/* h1 — hero headline */
body.tpa-landing-page .dms-title h1,
body.tpa-landing-page .dms-text h1 {
  font-family: 'Inter', sans-serif !important;
  font-size: 82px !important;
  font-weight: 700 !important;
  line-height: 1.08 !important;
}
@media (max-width: 1440px) {
  body.tpa-landing-page .dms-title h1,
  body.tpa-landing-page .dms-text h1 { font-size: 74px !important; }
}
@media (max-width: 1200px) {
  body.tpa-landing-page .dms-title h1,
  body.tpa-landing-page .dms-text h1 { font-size: 62px !important; }
}
@media (max-width: 1024px) {
  body.tpa-landing-page .dms-title h1,
  body.tpa-landing-page .dms-text h1 { font-size: 50px !important; }
}
@media (max-width: 600px) {
  body.tpa-landing-page .dms-title h1,
  body.tpa-landing-page .dms-text h1 { font-size: 38px !important; }
}

/* h2 — section titles */
body.tpa-landing-page .dms-title h2,
body.tpa-landing-page .dms-text h2 {
  font-family: 'Inter', sans-serif !important;
  font-size: 58px !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
}
@media (max-width: 1440px) {
  body.tpa-landing-page .dms-title h2,
  body.tpa-landing-page .dms-text h2 { font-size: 52px !important; }
}
@media (max-width: 1200px) {
  body.tpa-landing-page .dms-title h2,
  body.tpa-landing-page .dms-text h2 { font-size: 44px !important; }
}
@media (max-width: 1024px) {
  body.tpa-landing-page .dms-title h2,
  body.tpa-landing-page .dms-text h2 { font-size: 38px !important; }
}
@media (max-width: 600px) {
  body.tpa-landing-page .dms-title h2,
  body.tpa-landing-page .dms-text h2 { font-size: 30px !important; }
}

/* h3 */
body.tpa-landing-page .dms-title h3,
body.tpa-landing-page .dms-text h3 {
  font-family: 'Inter', sans-serif !important;
  font-size: 44px !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
}
@media (max-width: 1200px) {
  body.tpa-landing-page .dms-title h3,
  body.tpa-landing-page .dms-text h3 { font-size: 36px !important; }
}
@media (max-width: 1024px) {
  body.tpa-landing-page .dms-title h3,
  body.tpa-landing-page .dms-text h3 { font-size: 30px !important; }
}
@media (max-width: 600px) {
  body.tpa-landing-page .dms-title h3,
  body.tpa-landing-page .dms-text h3 { font-size: 24px !important; }
}

/* gradient text on <strong> inside titles */
body.tpa-landing-page .dms-title strong,
body.tpa-landing-page .dms-text strong {
  background: linear-gradient(135deg, #9617fb, #211cbf) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* subtitles */
body.tpa-landing-page .dms-template-inicio .dms-section-element .dms-subtitle,
body.tpa-landing-page .dms-template-inicio .dms-section-element .dms-subtitle * {
  font-size: 22px !important;
  color: #6b7280 !important;
  line-height: 1.6 !important;
}
@media (max-width: 600px) {
  body.tpa-landing-page .dms-template-inicio .dms-section-element .dms-subtitle * {
    font-size: 18px !important;
  }
}

/* =====================================================
   HEADER - Complete layout (mirrors live site exactly)
   ===================================================== */

/* Hide WordPress admin bar so header sits flush at top */
body.tpa-landing-page #wpadminbar { display: none !important; }
body.tpa-landing-page.admin-bar  { margin-top: 0 !important; padding-top: 0 !important; }

/* Header: fixed at top, full width, white with shadow */
body.tpa-landing-page header#header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  z-index: 9999 !important;
  background-color: #fff !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.1) !important;
  display: block !important;
}

/* Inner container padding */
body.tpa-landing-page header#header .dms-container {
  padding: 20px !important;
  box-sizing: border-box !important;
}

/* Elems row: flex, logo | nav | button */
body.tpa-landing-page .dms-header__elems {
  display: flex !important;
  flex-wrap: nowrap !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
}

/* Logo block */
body.tpa-landing-page .dms-header__logo {
  display: flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  width: auto !important;
}

/* Logo image — 115px max, same as live site */
body.tpa-landing-page .dms-header__logo img,
body.tpa-landing-page .dms-logo img {
  max-width: 115px !important;
  width: auto !important;
  height: auto !important;
  display: block !important;
}

/* Nav block — flex, takes middle space, centred */
body.tpa-landing-page .dms-header__block {
  display: flex !important;
  flex: 1 1 auto !important;
  width: auto !important;
  max-width: none !important;
  justify-content: center !important;
  align-items: center !important;
}

/* Nav inner wrappers */
body.tpa-landing-page .dms-block-header-menu,
body.tpa-landing-page .dms-content-nav {
  display: flex !important;
  align-items: center !important;
}

/* Nav ul */
body.tpa-landing-page .dms-desktop-header-menu {
  display: flex !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  flex-wrap: nowrap !important;
}

/* Nav links */
body.tpa-landing-page .dms-desktop-header-menu .menu-link {
  display: inline-block !important;
  padding: 10px 18px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #6b7280 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  background-color: transparent !important;
}
body.tpa-landing-page .dms-desktop-header-menu .menu-link:hover {
  color: #9617fb !important;
  background-color: rgba(150,23,251,0.05) !important;
}

/* "Solicita tu demo" button — always visible on desktop */
body.tpa-landing-page header#header .dms-header__elems > a.dms-button {
  display: inline-block !important;
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}

/* Mobile: hide desktop nav + header button */
@media (max-width: 1024px) {
  body.tpa-landing-page .dms-header__block { display: none !important; }
  body.tpa-landing-page header#header .dms-header__elems > a.dms-button { display: none !important; }
}

/* Body scroll lock when any popup is open */
body.tpa-popup-open {
  overflow: hidden !important;
}

/* =====================================================
   FORM STYLES - our AJAX form matches gga.css .dms-form-popup
   ===================================================== */

/* Submit button inside popup */
#tpa-contact-form .dms-button {
  width: 100%;
  margin-top: 35px;
  padding: 15px;
  border: none;
  cursor: pointer;
  display: block;
  text-align: center;
}

/* Acceptance checkbox row */
.dms-form-popup .dms-form-field.acceptance .wpcf7-list-item {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 8px !important;
  cursor: pointer;
}

.dms-form-popup .dms-form-field.acceptance .wpcf7-list-item input[type="checkbox"] {
  display: inline-block !important;
  width: 15px !important;
  height: 15px !important;
  min-width: 15px !important;
  max-width: 15px !important;
  flex-shrink: 0 !important;
  margin-top: 3px !important;
}

.dms-form-popup .dms-form-field.acceptance .wpcf7-list-item-label {
  font-size: 12px;
  color: #1a1a2e;
  line-height: 1.5;
}

.dms-form-popup .dms-form-field.acceptance .wpcf7-list-item-label a {
  font-size: 1em;
  color: #9617fb;
  text-decoration: underline;
}

/* Form message feedback */
#tpa-form-msg {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 6px;
  font-size: 14px;
  display: none;
}

#tpa-form-msg.success {
  background: #dcfce7;
  color: #166534;
  display: block;
}

#tpa-form-msg.error {
  background: #fee2e2;
  color: #991b1b;
  display: block;
}

/* Disclaimer lock icon */
.dms-form-popup .dms-form-disclaimer p {
  font-size: 11px;
  margin: 0;
  line-height: 1.5;
}

.dms-form-popup .dms-form-disclaimer .text-base {
  font-size: 13px;
  line-height: 1;
}

/* Close button icon */
.dms-popup-close i {
  font-size: 22px;
  color: #6b7280;
  cursor: pointer;
  display: inline-block;
  line-height: 1;
  font-style: normal;
}

/* =====================================================
   BOX POPUP - ensure the box popup container renders
   correctly with our close icon (plain text x fallback)
   ===================================================== */

.dms-box-popup-container .fa-close.tpa-close-box {
  font-style: normal;
  font-size: 20px;
  font-weight: 600;
  color: #6b7280;
}

/* =====================================================
   MOBILE MENU - TPA custom panel (no theme dependency)
   ===================================================== */

/* Hamburger button wrapper */
.tpa-hamburger-wrapper {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 9999999;
  display: none;
  align-items: center;
  gap: 8px;
}
/* Lang switcher inside hamburger wrapper (next to burger btn) */
.tpa-hamburger-wrapper .tpa-mob-lang {
  position: relative;
  border-top: none;
  padding: 0;
}
.tpa-hamburger-wrapper .tpa-mob-lang-btn {
  width: auto;
  padding: 8px 10px;
  background: #fff;
  border: 1px solid #ede9fe;
  border-radius: 8px;
  font-size: 20px;
  line-height: 1;
}
.tpa-hamburger-wrapper .tpa-mob-lang-list {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  background: #fff;
  border: 1px solid #ede9fe;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  min-width: 160px;
  padding: 4px;
  z-index: 9999999;
}
/* WordPress wraps shortcode content in <code> → fix so children become direct flex items */
.tpa-hamburger-wrapper > code {
  display: contents;
}
@media (max-width: 1024px) {
  .tpa-hamburger-wrapper {
    display: flex;
  }
  .tpa-desktop-only {
    display: none !important;
  }
}

/* Hamburger icon */
.tpa-hamburger-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: #211cbf;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(33,28,191,0.3);
}
.tpa-ham-icon {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 20px;
}
.tpa-ham-line {
  display: block;
  width: 100%;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.2s ease;
}
/* Hamburger → X when menu is open */
body.tpa-menu-open .tpa-ham-line:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.tpa-menu-open .tpa-ham-line:nth-child(2) { opacity: 0; transform: scaleX(0); }
body.tpa-menu-open .tpa-ham-line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Backdrop (real div, created by JS) */
#tpa-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 9999996;
  cursor: pointer;
}

/* Mobile menu panel */
.tpa-mobile-menu-wrapper {
  position: fixed;
  top: 0;
  right: 0;
  width: 300px;
  max-width: 90vw;
  height: 100%;
  background: #fff;
  z-index: 9999998;
  overflow-y: auto;
  box-shadow: -4px 0 24px rgba(0,0,0,0.15);
  transform: translateX(100%);
  transition: transform 0.3s ease;
  display: flex;
  flex-direction: column;
}
body.tpa-menu-open .tpa-mobile-menu-wrapper {
  transform: translateX(0);
}

/* Mobile lang dropdown (inside panel) */
.tpa-mob-lang {
  border-top: 1px solid #f3e8ff;
  padding: 8px 20px 12px;
}
.tpa-mob-lang-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 4px;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #374151;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
}
.tpa-mob-lang-btn:hover { color: #9617fb; }
.tpa-mob-lang-chevron { transition: transform 0.2s ease; flex-shrink: 0; margin-left: auto; }
.tpa-mob-lang.open .tpa-mob-lang-chevron { transform: rotate(180deg); }
.tpa-mob-lang-list {
  display: none;
  flex-direction: column;
  gap: 2px;
  padding-top: 4px;
}
.tpa-mob-lang.open .tpa-mob-lang-list { display: flex; }
.tpa-mob-lang-list a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: #374151;
  text-decoration: none;
  border-radius: 8px;
  transition: background 0.15s;
}
.tpa-mob-lang-list a:hover { background: #faf5ff; color: #9617fb; }
.tpa-mob-lang-list a.active { background: #f3e8ff; color: #9617fb; font-weight: 600; }

/* Menu header (title + close btn) */
.tpa-mobile-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 1px solid #f3e8ff;
}
.tpa-mobile-menu-title {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #211cbf;
  letter-spacing: 0.02em;
}
.tpa-mobile-menu-close {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: #6b7280;
  padding: 4px 6px;
  line-height: 1;
  border-radius: 6px;
  transition: background 0.15s, color 0.15s;
}
.tpa-mobile-menu-close:hover { background: #f3f4f6; color: #111; }

/* Nav list */
.tpa-mobile-nav-list {
  list-style: none;
  margin: 0;
  padding: 16px 0 24px;
}
.tpa-mobile-nav-list .menu-item {
  margin: 0;
  padding: 0;
  list-style: none;
}
.tpa-mobile-nav-list .menu-link {
  display: block;
  padding: 13px 24px;
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #374151;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
  border-left: 3px solid transparent;
}
.tpa-mobile-nav-list .menu-link:hover {
  background: #faf5ff;
  color: #9617fb;
  border-left-color: #9617fb;
}
.tpa-mobile-nav-list .dms-button {
  display: block;
  margin: 0 20px;
  text-align: center;
  border-radius: 10px;
}

/* =====================================================
   ENSURE images inside .dms-text don't break layout
   ===================================================== */
.dms-template-inicio .dms-section-element .dms-text img {
  height: auto !important;
  max-width: 100% !important;
}

/* =====================================================
   HERO — card below subtitle
   ===================================================== */

/* Card container */
.tpa-hero-card {
  position: relative !important;
  background: #fff !important;
  border-radius: 24px !important;
  box-shadow:
    0 4px 6px -2px rgba(150, 23, 251, 0.06),
    0 20px 56px rgba(150, 23, 251, 0.14),
    0 2px 8px rgba(0, 0, 0, 0.05) !important;
  padding: 44px 36px 36px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  gap: 20px !important;
  margin-top: 32px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

/* Barra de acento gradiente arriba */
.tpa-hero-card::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 5px !important;
  background: linear-gradient(90deg, #9617fb, #211cbf) !important;
  border-radius: 24px 24px 0 0 !important;
}

/* Card headline */
.tpa-card-headline {
  font-family: 'Inter', sans-serif !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  color: #111827 !important;
  margin: 0 !important;
}
.tpa-card-headline strong {
  background: linear-gradient(135deg, #9617fb, #211cbf) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  font-size: inherit !important;
}

/* Card body text */
.tpa-card-body {
  font-family: 'Inter', sans-serif !important;
  font-size: 14.5px !important;
  color: #4b5563 !important;
  line-height: 1.65 !important;
  margin: 0 !important;
}

/* Button row inside card — centrado */
.tpa-card-buttons {
  display: flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  width: 100% !important;
}

/* Outline button */
.tpa-btn-outline {
  background: transparent !important;
  background-image: none !important;
  color: #9617fb !important;
  border: 2px solid #9617fb !important;
  box-shadow: none !important;
}
.tpa-btn-outline:hover {
  background: rgba(150, 23, 251, 0.07) !important;
}

/* Microcopy */
.tpa-card-microcopy {
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  color: #6b7280 !important;
  line-height: 1.5 !important;
  margin: 0 !important;
}

/* Tagline */
.tpa-card-tagline {
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important;
  color: #9ca3af !important;
  line-height: 1.5 !important;
  margin: 0 !important;
  font-style: italic !important;
}

/* =====================================================
   BLOQUE PROBLEMA — Section 2
   ===================================================== */

/* Segunda línea del título de cada caja en gradiente */
.tpa-box-contrast {
  background: linear-gradient(135deg, #9617fb, #211cbf) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  font-weight: 700 !important;
  display: block !important;
}

/* Bloque de cierre centrado */
.tpa-problem-solution {
  text-align: center !important;
}

.tpa-problem-intro {
  font-family: 'Inter', sans-serif !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #111827 !important;
  margin: 0 0 16px !important;
}

/* Lista de bullets con flecha */
.tpa-problem-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 auto !important;
  display: inline-flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  text-align: left !important;
}

.tpa-problem-list li {
  font-family: 'Inter', sans-serif !important;
  font-size: 17px !important;
  color: #374151 !important;
  line-height: 1.5 !important;
  padding-left: 28px !important;
  position: relative !important;
}

.tpa-problem-list li::before {
  content: '→' !important;
  position: absolute !important;
  left: 0 !important;
  color: #9617fb !important;
  font-weight: 700 !important;
}

/* =====================================================
   EYEBROW LABEL
   ===================================================== */
.tpa-eyebrow {
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: #9617fb !important;
  margin: 0 0 10px !important;
}

/* =====================================================
   4-STEP SECTION
   ===================================================== */

/* Reduce container padding in como-funciona so cards use full width */
.como-funciona .dms-container {
  padding-left: 12px !important;
  padding-right: 12px !important;
}

/* Steps element: override gga max-width:75% */
.dms-template-inicio .dms-section-element.tpa-steps-el {
  width: 100% !important;
  max-width: 100% !important;
  min-width: unset !important;
  padding-top: 16px !important;
}

/* Row: grid con 4 filas para que el visual arranque igual en todas */
.tpa-steps-row {
  display: grid !important;
  grid-template-columns: minmax(0,1fr) 28px minmax(0,1fr) 28px minmax(0,1fr) 28px minmax(0,1fr) !important;
  grid-template-rows: auto auto auto 1fr !important;
  row-gap: 6px !important;
  width: 100% !important;
}

/* Card: subgrid hereda las 4 filas del padre */
.tpa-step-card {
  display: grid !important;
  grid-template-rows: subgrid !important;
  grid-row: span 4 !important;
  background: #fff !important;
  border: 1px solid #ede9fe !important;
  border-radius: 14px !important;
  padding: 12px !important;
  text-align: left !important;
  box-shadow: 0 4px 20px rgba(150,23,251,0.07) !important;
}
.tpa-step-card.tpa-step-card-wide {
  flex: 1.5 1 0 !important;
}
.tpa-step-card.tpa-step-card-wide4 {
  flex: 1.3 1 0 !important;
}
.tpa-step-card.tpa-step-card-narrow {
  flex: 0.75 1 0 !important;
}

/* Connector arrow */
.tpa-step-connector {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  grid-row: span 4 !important;
  width: 28px !important;
  color: #9617fb !important;
  font-size: 28px !important;
  opacity: 0.5 !important;
  padding-top: 0 !important;
}

/* Step number badge */
.tpa-step-num {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #9617fb, #211cbf) !important;
  color: #fff !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  flex-shrink: 0 !important;
}

/* Step title */
.tpa-step-title {
  font-family: 'Inter', sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: #111827 !important;
  line-height: 1.3 !important;
  margin: 0 !important;
}

/* Step description */
.tpa-step-desc {
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important;
  color: #4b5563 !important;
  line-height: 1.5 !important;
  margin: 0 !important;
}

/* Step bullet list */
.tpa-step-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
}
.tpa-step-list li {
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important;
  color: #374151 !important;
  padding-left: 22px !important;
  position: relative !important;
  line-height: 1.5 !important;
  text-align: left !important;
}
.tpa-step-list li::before {
  content: '→' !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  color: #9617fb !important;
}

/* Visual area */
.tpa-step-visual {
  background: #faf5ff !important;
  border-radius: 10px !important;
  padding: 8px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  align-self: stretch !important;
  overflow: hidden !important;
}

/* Visual with real image: transparent, flex-column, consistent minimum height */
.tpa-step-visual--img {
  background: transparent !important;
  padding: 0 !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  min-height: 260px !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
}

/* Bullet list that optionally precedes the image (steps 3 & 4) */
.tpa-step-visual--img > .tpa-step-list {
  padding: 8px 10px 4px !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
  width: 100% !important;
  margin-bottom: 0 !important;
}

/* All images same fixed height box — object-fit keeps the correct aspect ratio */
.tpa-step-img {
  width: 100% !important;
  height: 200px !important;
  flex-shrink: 0 !important;
  display: block !important;
  object-fit: contain !important;
}

/* Steps 1 & 2: image is the only child — center it and make it bigger */
.tpa-step-visual--imgonly {
  justify-content: center !important;
  align-items: center !important;
}
.tpa-step-visual--imgonly > .tpa-step-img {
  height: 250px !important;
}

/* Paso 3: isotipo TPA — más pequeño que el resto de imágenes del paso.
   Prefijo #dms-page (id + 2 clases) para ganar siempre a cualquier
   ".tpa-step-img" genérico o regla de tema, aunque use !important. */
#dms-page img.tpa-step-img.tpa-step-img--tpi,
img.tpa-step-img.tpa-step-img--tpi {
  height: 260px !important;
  width: auto !important;
  max-width: 80% !important;
  align-self: center !important;
  margin: 20px auto !important;
  flex-shrink: 1 !important;
}

/* Paso 4: gráfico vertical "Ejes HPT" (~420×530). La caja fija de 180–200px de
   .tpa-step-img lo encogía a ~140px de ancho (ilegible); se muestra a su
   proporción natural, sin superar su tamaño original. Mismo prefijo #dms-page
   que --tpi para ganar también a las reglas de los media queries. */
#dms-page img.tpa-step-img.tpa-step-img--evol {
  width: 100% !important;
  max-width: 420px !important;
  height: auto !important;
  align-self: center !important;
  margin: 8px auto !important;
}

/* Paso 1: telaraña "Perfil multidimensional" (SVG recortado, sin marco, con
   su título: ~410×364). Se muestra con su proporción natural a lo ancho de la
   tarjeta; la caja fija de 160–250px la encogía hasta dejar las etiquetas
   ilegibles. Mismo prefijo #dms-page que --tpi/--evol. */
#dms-page img.tpa-step-img.tpa-step-img--radar {
  width: 100% !important;
  max-width: 460px !important;
  height: auto !important;
  align-self: center !important;
  margin: 0 auto !important;
}

/* Paso 2: gráfico "Brechas de percepción" (HTML, no imagen).
   Compacto y vertical —etiqueta sobre cada barra— para que se lea en una tarjeta
   estrecha y no desequilibre a los demás pasos. Colores y proporciones tomados
   del gráfico original: barra equipo, marcador líder, "?" de ayuda arriba a la
   derecha (círculo 20px, degradado de marca, sombra azul), valores en azul con
   "/" gris y leyenda centrada bajo el gráfico.
   OJO: el tema fuerza `font-size: 22px !important` a todo lo que cuelga de
   `.dms-text *` (y color/interlineado en div/span), por eso los font-size de
   aquí llevan !important. */
#dms-page .tpa-gaps {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: 380px;
  margin: 0 auto;
  padding: 12px 12px 10px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  font-family: 'Inter', sans-serif;
  font-size: 12px !important;
  line-height: 1.3;
  color: #374151;
  text-align: left;
}
/* Cualquier descendiente (también los span sin clase) hereda tamaño,
   interlineado y color —el tema fija los tres sobre div/span—; las reglas de
   abajo, más tarde y con la misma especificidad, fijan los valores concretos. */
#dms-page .tpa-gaps * {
  font-size: inherit !important;
  line-height: inherit;
  color: inherit;
}
/* "?" de ayuda: esquina superior derecha, como en el gráfico original */
#dms-page .tpa-gaps__help {
  position: absolute;
  top: 6px;
  right: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: linear-gradient(90deg, #49fdfe 0%, #0061ff 100%);
  box-shadow: 0 4px 12px rgba(0, 97, 255, 0.18);
  font-family: 'Inter', sans-serif;
  font-size: 12px !important;
  font-weight: 700;
  line-height: 1;
  color: #fff;
}
#dms-page .tpa-gaps__title {
  position: relative;
  margin: 0 0 10px;
  padding: 0 28px 6px 0;
  font-size: 14px !important;
  font-weight: 700;
  line-height: 1.3;
  text-align: left;
  color: #374151;
}
#dms-page .tpa-gaps__title::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 30px;
  height: 2px;
  border-radius: 2px;
  background: #65758c;
}
#dms-page .tpa-gaps__rows {
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: 12px !important;
}
#dms-page .tpa-gaps__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 3px;
  font-size: 12px !important;
  line-height: 1.25;
}
#dms-page .tpa-gaps__label {
  min-width: 0;
  font-size: 12px !important;
  line-height: 1.25;
  color: #374151;
}
#dms-page .tpa-gaps__vals {
  position: relative;
  flex-shrink: 0;
  font-size: 12px !important;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  line-height: 1.25;
  white-space: nowrap;
  color: #065fe7;
}
#dms-page .tpa-gaps__sep {
  color: #9ca3af;
}
/* Texto sólo para lectores de pantalla (la barra/marcador son visuales) */
#dms-page .tpa-gaps__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  font-size: 1px !important;
}
#dms-page .tpa-gaps__track {
  position: relative;
  height: 8px;
  border-radius: 999px;
  background: #f3f4f6;
}
#dms-page .tpa-gaps__bar {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  border-radius: 999px;
  background: #1ea3fe;
}
#dms-page .tpa-gaps__mark {
  position: absolute;
  top: -4px;
  width: 4px;
  height: 16px;
  margin-left: -2px;
  border-radius: 2px;
  background: #ffb703;
}
#dms-page .tpa-gaps__legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 18px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid #e5e7eb;
  font-size: 11px !important;
  line-height: 1.3;
  color: #4b5563;
}
#dms-page .tpa-gaps__key {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px !important;
  line-height: 1.3;
}
#dms-page .tpa-gaps__key::before {
  content: '';
  display: inline-block;
}
#dms-page .tpa-gaps__key--team::before {
  width: 16px;
  height: 7px;
  border-radius: 999px;
  background: #1ea3fe;
}
#dms-page .tpa-gaps__key--leader::before {
  width: 3px;
  height: 13px;
  border-radius: 2px;
  background: #ffb703;
}

/* Check list below image inside step visual (step 4) */
.tpa-check-list--visual {
  padding: 6px 10px 8px !important;
  box-sizing: border-box !important;
  width: 100% !important;
  flex-shrink: 0 !important;
}


/* Paso 1: SVG telaraña (kept for back-compat) */
.tpa-step-visual .tpa-step-list {
  margin-bottom: 8px !important;
  width: 100% !important;
  align-self: stretch !important;
}

/* Paso 1: SVG telaraña (kept for back-compat) */
.tpa-radar-svg {
  width: 100% !important;
  height: auto !important;
  max-height: 210px !important;
  display: block !important;
  margin: 0 auto 6px !important;
}
.tpa-radar-legend {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 5px 8px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 9px !important;
  color: #6b7280 !important;
  margin: 4px 0 10px !important;
  width: 100% !important;
}
.tpa-radar-legend span {
  display: flex !important;
  align-items: center !important;
  gap: 3px !important;
}
.tpa-rl-dot {
  display: inline-block !important;
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
  font-style: normal !important;
}
.tpa-tpi-row {
  display: flex !important;
  align-items: baseline !important;
  justify-content: center !important;
  gap: 4px !important;
  margin-top: 10px !important;
  flex-wrap: wrap !important;
}
.tpa-tpi-score {
  font-family: 'Inter', sans-serif !important;
  font-size: 26px !important;
  font-weight: 700 !important;
  color: #9617fb !important;
  line-height: 1 !important;
}
.tpa-tpi-denom {
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important;
  color: #6b7280 !important;
}
.tpa-tpi-nivel {
  background: #d1fae5 !important;
  color: #065f46 !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  padding: 2px 7px !important;
  border-radius: 20px !important;
}

/* Paso 2: level tags + dot icons */
.tpa-visual-title {
  font-family: 'Inter', sans-serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: #6b7280 !important;
  margin: 0 0 5px !important;
  text-align: center !important;
  width: 100% !important;
}
.tpa-bloq-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}
.tpa-bloq-item {
  display: flex !important;
  align-items: center !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 10px !important;
  color: #374151 !important;
  gap: 6px !important;
}
.tpa-bloq-dot {
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
}
.tpa-bloq-dot.alto  { background: #ef4444 !important; }
.tpa-bloq-dot.medio { background: #f59e0b !important; }
.tpa-bloq-dot.bajo  { background: #10b981 !important; }
.tpa-bloq-name {
  flex: 1 !important;
  min-width: 0 !important;
  white-space: normal !important;
  word-break: break-word !important;
  line-height: 1.3 !important;
}
.tpa-level {
  display: inline-block !important;
  padding: 2px 6px !important;
  border-radius: 20px !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  flex-shrink: 0 !important;
  font-family: 'Inter', sans-serif !important;
}
.tpa-level.alto  { background:#fee2e2 !important; color:#991b1b !important; }
.tpa-level.medio { background:#fef3c7 !important; color:#92400e !important; }
.tpa-level.bajo  { background:#d1fae5 !important; color:#065f46 !important; }

/* Paso 3: nivel scale + recommended leadership */
.tpa-level-scale {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  position: relative !important;
  width: 100% !important;
  margin-bottom: 6px !important;
}
.tpa-level-scale::before {
  content: '' !important;
  position: absolute !important;
  top: 50% !important;
  left: 0 !important;
  right: 0 !important;
  height: 2px !important;
  background: linear-gradient(90deg, #e5e7eb 0%, #9617fb 40%, #ddd6fe 100%) !important;
  transform: translateY(-50%) !important;
  z-index: 0 !important;
}
.tpa-scale-dot {
  width: 30px !important;
  height: 30px !important;
  border-radius: 50% !important;
  border: 2px solid #e5e7eb !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #9ca3af !important;
  background: #fff !important;
  flex-shrink: 0 !important;
  position: relative !important;
  z-index: 1 !important;
}
.tpa-scale-dot.active {
  background: linear-gradient(135deg, #9617fb, #211cbf) !important;
  border-color: transparent !important;
  color: #fff !important;
}
.tpa-scale-label {
  font-family: 'Inter', sans-serif !important;
  font-size: 10px !important;
  color: #6b7280 !important;
  margin: 0 0 6px !important;
  text-align: left !important;
}
.tpa-lider-rec {
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important;
  color: #374151 !important;
  background: #f5f3ff !important;
  border-radius: 6px !important;
  padding: 5px 8px !important;
  margin: 0 0 8px !important;
  text-align: left !important;
}
.tpa-lider-rec strong {
  color: #7c3aed !important;
  background: none !important;
  -webkit-text-fill-color: #7c3aed !important;
  font-size: inherit !important;
}
.tpa-check-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
}
.tpa-check-list li {
  font-family: 'Inter', sans-serif !important;
  font-size: 11px !important;
  color: #374151 !important;
  padding-left: 18px !important;
  position: relative !important;
  text-align: left !important;
  line-height: 1.5 !important;
}
.tpa-check-list li::before {
  content: '\2713' !important;
  position: absolute !important;
  left: 0 !important;
  color: #9617fb !important;
  font-weight: 700 !important;
  font-size: 10px !important;
}

/* Paso 4: SVG line chart */
.tpa-evol-svg {
  width: 100% !important;
  max-height: 90px !important;
  display: block !important;
  margin-bottom: 6px !important;
}

/* Laptop (861px–1600px): 2×2 grid + radar legend 1-col + smaller bloq text */
@media (max-width: 1600px) and (min-width: 861px) {
  /* 2×2 layout */
  .tpa-steps-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
  }
  .tpa-step-card {
    flex: 0 0 calc(50% - 8px) !important;
    display: flex !important;
    flex-direction: column !important;
    grid-row: unset !important;
    grid-template-rows: unset !important;
    gap: 6px !important;
  }
  .tpa-step-visual {
    flex: 1 !important;
  }
  .tpa-step-img {
    height: 180px !important;
  }
  #dms-page img.tpa-step-img.tpa-step-img--tpi,
  img.tpa-step-img.tpa-step-img--tpi {
    height: 230px !important;
  }
  .tpa-step-connector {
    display: none !important;
  }

  /* Radar legend: 1 columna centrada */
  .tpa-radar-legend {
    grid-template-columns: 1fr !important;
    gap: 3px !important;
    justify-items: center !important;
  }
  .tpa-radar-legend span {
    justify-content: center !important;
  }

  /* Bloq names: letra más pequeña */
  .tpa-bloq-item {
    font-size: 8.5px !important;
    gap: 5px !important;
  }
  .tpa-bloq-name {
    font-size: 8.5px !important;
  }
  .tpa-level {
    font-size: 8px !important;
    padding: 1px 5px !important;
  }
  .tpa-bloq-list {
    gap: 7px !important;
  }

}

/* Mobile: stack vertically */
@media (max-width: 860px) {
  .tpa-steps-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
  }
  .tpa-step-card {
    display: flex !important;
    flex-direction: column !important;
    grid-row: unset !important;
    grid-template-rows: unset !important;
    gap: 6px !important;
  }
  .tpa-step-visual {
    flex: 1 !important;
  }
  .tpa-step-img {
    height: 160px !important;
  }
  #dms-page img.tpa-step-img.tpa-step-img--tpi,
  img.tpa-step-img.tpa-step-img--tpi {
    height: 190px !important;
  }
  .tpa-step-connector {
    grid-row: unset !important;
    transform: rotate(90deg) !important;
    width: 100% !important;
    height: 24px !important;
  }
}

/* =====================================================
   POPUP — wider container
   ===================================================== */

.dms-popup-container {
  max-width: 580px !important;
  width: 92vw !important;
  box-sizing: border-box !important;
  align-items: flex-start !important;
}

.dms-form-popup {
  width: 100% !important;
  box-sizing: border-box !important;
}

/* ── Popup: portátil (font más pequeño, padding compacto) ──────────────────── */
@media (max-width: 1600px) and (min-width: 861px) {
  .dms-popup-container {
    padding: 20px 24px !important;
    max-height: 86vh !important;
  }
  .dms-form-title p {
    font-size: 17px !important;
    line-height: 1.35 !important;
  }
  .dms-form-subtitle p {
    font-size: 13px !important;
    margin-bottom: 12px !important;
  }
  #tpa-submit-btn,
  .dms-popup-container .dms-button {
    font-size: 15px !important;
    padding: 11px !important;
    margin-top: 18px !important;
  }
  #tpa-contact-form .dms-form-field.acceptance label span {
    font-size: 11px !important;
  }
  #tpa-contact-form .dms-form-field.acceptance label span a {
    font-size: 11px !important;
  }
}

/* ── Popup: móvil (compacto + z-index sobre el menú burger) ───────────────── */
@media (max-width: 860px) {
  /* El popup debe aparecer encima del botón burger (z-index: 9999999) */
  #popup,
  .dms-popup#popup {
    z-index: 10000000 !important;
    overflow-y: auto !important;
    align-items: flex-start !important;
    padding-top: 12px !important;
  }
  /* Ocultar el wrapper del burger cuando el popup está abierto */
  .tpa-popup-open .tpa-hamburger-wrapper {
    display: none !important;
  }
  .dms-popup-container {
    padding: 14px 16px !important;
    width: 94vw !important;
    max-height: calc(100vh - 28px) !important;
    overflow-y: auto !important;
  }
  .dms-form-title p {
    font-size: 15px !important;
    line-height: 1.3 !important;
  }
  .dms-form-subtitle p {
    font-size: 12px !important;
    margin-bottom: 8px !important;
  }
  .dms-form-field label,
  #tpa-contact-form label {
    font-size: 12px !important;
  }
  #tpa-contact-form input[type="text"],
  #tpa-contact-form input[type="email"],
  #tpa-contact-form input[type="tel"] {
    height: 38px !important;
    padding: 6px 10px !important;
    font-size: 14px !important;
  }
  #tpa-submit-btn,
  .dms-popup-container .dms-button {
    font-size: 14px !important;
    padding: 10px !important;
    margin-top: 14px !important;
  }
  .dms-form-popup .dms-form-disclaimer p {
    font-size: 11px !important;
  }
  .dms-form-popup .dms-form-field {
    margin-bottom: 4px !important;
  }
  #tpa-contact-form .dms-form-field.acceptance label span {
    font-size: 10px !important;
  }
  #tpa-contact-form .dms-form-field.acceptance label span a {
    font-size: 10px !important;
  }
}

#tpa-contact-form {
  width: 100% !important;
  box-sizing: border-box !important;
}

#tpa-contact-form input[type="text"],
#tpa-contact-form input[type="email"],
#tpa-contact-form input[type="tel"] {
  width: 100% !important;
  box-sizing: border-box !important;
}

/* =====================================================
   BENEFITS GRID — 2×3 icon cards
   ===================================================== */

.tpa-benefits-intro {
  font-family: 'Inter', sans-serif !important;
  font-size: 16px !important;
  color: #374151 !important;
  margin-top: 8px !important;
  line-height: 1.6 !important;
}

.tpa-benefits-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 20px !important;
  width: 100% !important;
}

.tpa-benefit-card {
  background: #fff !important;
  border: 1px solid #ede9fe !important;
  border-radius: 14px !important;
  padding: 20px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  box-shadow: 0 4px 20px rgba(150,23,251,0.06) !important;
  transition: all 0.4s ease !important;
}

.tpa-benefit-card:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important;
  border-color: #d177fd !important;
  transform: translateY(-3px) !important;
}

.tpa-benefit-card:hover .tpa-benefit-icon {
  transform: scale(1.15) !important;
  transition: transform 0.3s ease !important;
}

.tpa-benefit-icon {
  transition: transform 0.3s ease !important;
}

.tpa-benefit-icon {
  width: 40px !important;
  height: 40px !important;
  color: #9617fb !important;
  flex-shrink: 0 !important;
}

.tpa-benefit-icon svg {
  width: 40px !important;
  height: 40px !important;
}

.tpa-benefit-title {
  font-family: 'Inter', sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #211cbf !important;
  line-height: 1.3 !important;
}

.tpa-benefit-desc {
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  color: #6b7280 !important;
  line-height: 1.55 !important;
}

@media (max-width: 640px) {
  .tpa-benefits-grid {
    grid-template-columns: 1fr !important;
  }
}

/* =====================================================
   QUÉ CAMBIA SECTION
   ===================================================== */

/* Full-width override for this section */
.tpa-que-cambia-section .dms-section-element {
  max-width: 100% !important;
  min-width: unset !important;
  width: 100% !important;
}

/* Comparison table */
.tpa-compare-wrap {
  border-radius: 16px !important;
  overflow: hidden !important;
  border: 1px solid #ede9fe !important;
  box-shadow: 0 4px 20px rgba(150,23,251,0.07) !important;
}

.tpa-compare-header-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
}

.tpa-compare-head {
  padding: 14px 24px !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.tpa-compare-head.tpa-compare-before {
  background: #fee2e2 !important;
  color: #dc2626 !important;
}

.tpa-compare-head.tpa-compare-after {
  background: #ede9fe !important;
  color: #6d28d9 !important;
  border-left: 1px solid #ddd6fe !important;
}

.tpa-compare-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
}

.tpa-compare-row:nth-child(even) .tpa-compare-cell.tpa-compare-before {
  background: #fff7ed !important;
}

.tpa-compare-row:nth-child(even) .tpa-compare-cell.tpa-compare-after {
  background: #faf5ff !important;
}

.tpa-compare-cell {
  padding: 12px 24px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
  border-top: 1px solid #f3f4f6 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: left !important;
  gap: 8px !important;
}

.tpa-compare-cell.tpa-compare-before {
  color: #111827 !important;
  background: #fffaf5 !important;
}

.tpa-compare-cell.tpa-compare-after {
  color: #374151 !important;
  font-weight: 500 !important;
  border-left: 1px solid #ede9fe !important;
  background: #fdfcff !important;
}

.tpa-compare-cell.tpa-compare-before::before {
  content: "✕" !important;
  color: #dc2626 !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  flex-shrink: 0 !important;
}

.tpa-compare-cell.tpa-compare-after::before {
  content: "✓" !important;
  color: #9617fb !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  flex-shrink: 0 !important;
}

/* Outcome cards */
.tpa-outcomes-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr !important;
  gap: 20px !important;
  width: 100% !important;
}

.tpa-outcome-card {
  background: linear-gradient(135deg, #faf5ff 0%, #f0f4ff 100%) !important;
  border: 1px solid #ede9fe !important;
  border-radius: 14px !important;
  padding: 24px 20px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  transition: all 0.4s ease !important;
}

.tpa-outcome-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 24px rgba(150,23,251,0.12) !important;
  border-color: #d177fd !important;
}

.tpa-outcome-icon {
  width: 40px !important;
  height: 40px !important;
  color: #9617fb !important;
}

.tpa-outcome-icon svg {
  width: 40px !important;
  height: 40px !important;
}

.tpa-outcome-title {
  font-family: 'Inter', sans-serif !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #211cbf !important;
}

.tpa-outcome-desc {
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  color: #6b7280 !important;
  line-height: 1.55 !important;
}

/* CTA dark block */
.tpa-cambios-cta {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 24px !important;
  background: linear-gradient(135deg, #1e1458 0%, #3a1580 100%) !important;
  border-radius: 20px !important;
  padding: 28px 32px !important;
}

/* Full-width dashboard */
.tpa-dash-full {
  background: #fff !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.35) !important;
}

.tpa-dash-chrome {
  background: #e5e7eb !important;
  padding: 7px 12px !important;
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
}

.tpa-dash-dot {
  width: 9px !important;
  height: 9px !important;
  border-radius: 50% !important;
  display: inline-block !important;
  flex-shrink: 0 !important;
}

.tpa-dash-chrome-url {
  font-family: 'Inter', sans-serif !important;
  font-size: 10px !important;
  color: #6b7280 !important;
  margin-left: 10px !important;
  background: #fff !important;
  padding: 2px 10px !important;
  border-radius: 4px !important;
  border: 1px solid #d1d5db !important;
}

.tpa-dash-app {
  display: flex !important;
}

.tpa-dash-sidebar {
  width: 72px !important;
  background: #1e1458 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  padding: 12px 4px !important;
  gap: 4px !important;
  flex-shrink: 0 !important;
}

.tpa-dash-logo-mark {
  font-family: 'Inter', sans-serif !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  color: #fff !important;
  background: #9617fb !important;
  width: 30px !important;
  height: 30px !important;
  border-radius: 7px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 8px !important;
}

.tpa-dash-sidenav {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  width: 100% !important;
}

.tpa-dash-sn-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 2px !important;
  padding: 7px 2px !important;
  color: rgba(255,255,255,0.4) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 7px !important;
  border-left: 2px solid transparent !important;
  cursor: default !important;
}

.tpa-dash-sn-active {
  color: #fff !important;
  background: rgba(150,23,251,0.25) !important;
  border-left-color: #9617fb !important;
}

.tpa-dash-main {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  background: #f8f7ff !important;
}

.tpa-dash-topbar {
  background: #fff !important;
  padding: 8px 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-bottom: 1px solid #f3f4f6 !important;
  flex-shrink: 0 !important;
}

.tpa-dash-topbar-left {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px 8px !important;
  flex-wrap: wrap !important;
}

.tpa-dash-page-title {
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #1e1458 !important;
}

.tpa-dash-badge {
  font-family: 'Inter', sans-serif !important;
  font-size: 9px !important;
  font-weight: 600 !important;
  background: #ede9fe !important;
  color: #6d28d9 !important;
  padding: 2px 7px !important;
  border-radius: 10px !important;
}

.tpa-dash-avatar {
  width: 24px !important;
  height: 24px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #9617fb, #211cbf) !important;
  color: #fff !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.tpa-dash-kpis {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 8px !important;
  padding: 10px 12px !important;
  flex-shrink: 0 !important;
}

.tpa-dash-kpi {
  background: #fff !important;
  border-radius: 8px !important;
  padding: 8px 10px !important;
  border: 1px solid #ede9fe !important;
  text-align: center !important;
}

.tpa-dash-kpi-val {
  font-family: 'Inter', sans-serif !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  display: block !important;
}

.tpa-dash-kpi-label {
  font-family: 'Inter', sans-serif !important;
  font-size: 9px !important;
  color: #9ca3af !important;
  display: block !important;
  margin-top: 1px !important;
}

.tpa-dash-kpi-delta {
  font-family: 'Inter', sans-serif !important;
  font-size: 8px !important;
  font-weight: 600 !important;
  display: block !important;
  margin-top: 2px !important;
}

.tpa-dash-kpi-delta.up { color: #10b981 !important; }
.tpa-dash-kpi-delta.down { color: #f59e0b !important; }

.tpa-dash-charts {
  display: grid !important;
  grid-template-columns: 1.3fr 1.3fr !important;
  gap: 8px !important;
  padding: 12px !important;
  flex: 1 !important;
}

.tpa-dash-panel {
  background: #fff !important;
  border-radius: 8px !important;
  padding: 8px !important;
  border: 1px solid #ede9fe !important;
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
}

.tpa-dash-panel svg {
  height: 160px !important;
  width: 100% !important;
  overflow: visible !important;
}

.tpa-dash-panel-hd {
  font-family: 'Inter', sans-serif !important;
  font-size: 8px !important;
  font-weight: 700 !important;
  color: #6b7280 !important;
  margin-bottom: 4px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  flex-shrink: 0 !important;
}

.tpa-dash-legend {
  display: flex !important;
  gap: 12px !important;
  margin-top: 4px !important;
  flex-shrink: 0 !important;
}

.tpa-dash-legend span {
  font-family: 'Inter', sans-serif !important;
  font-size: 8px !important;
  color: #9ca3af !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.tpa-dash-legend i {
  display: inline-block !important;
  width: 12px !important;
  height: 4px !important;
  border-radius: 2px !important;
  font-style: normal !important;
}

/* CTA footer */
.tpa-cambios-cta-footer {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 12px !important;
  text-align: center !important;
}

.tpa-cambios-btn {
  background: #fff !important;
  color: #211cbf !important;
  font-weight: 700 !important;
  padding: 14px 28px !important;
  font-size: 15px !important;
  border: none !important;
}

.tpa-cambios-btn:hover {
  background: #f0f4ff !important;
  color: #211cbf !important;
}

.tpa-cambios-cta-sub {
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  color: rgba(255,255,255,0.65) !important;
  margin: 0 !important;
  line-height: 1.5 !important;
}

/* ── New dashboard: real app mock ─────────────────────────── */
.tpa-dash-topbar2 {
  background: #fff !important;
  padding: 10px 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  border-bottom: 1px solid #e5e7eb !important;
  flex-shrink: 0 !important;
}
.tpa-dash-brand {
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  background: linear-gradient(90deg, #00b4d8 0%, #0066cc 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}
.tpa-dash-user-info {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 11px !important;
  color: #374151 !important;
}
.tpa-dash-user-email {
  font-size: 11px !important;
  color: #374151 !important;
  font-family: 'Inter', sans-serif !important;
}
.tpa-dash-panels2 {
  display: flex !important;
  gap: 0 !important;
}
.tpa-dash-panel2 {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  background: #fff !important;
  padding: 14px 16px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}
.tpa-dash-panel2-sep {
  width: 1px !important;
  background: #e5e7eb !important;
  flex-shrink: 0 !important;
  align-self: stretch !important;
}
.tpa-dash-panel2-hd {
  font-family: 'Inter', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #1e1458 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  margin-bottom: 10px !important;
  padding-bottom: 6px !important;
  border-bottom: 2px solid #e5e7eb !important;
  text-align: left !important;
}
.tpa-dash-help2 {
  width: 20px !important;
  height: 20px !important;
  border-radius: 50% !important;
  background: #ede9fe !important;
  color: #7c3aed !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: 'Inter', sans-serif !important;
  flex-shrink: 0 !important;
  margin-left: 8px !important;
}
.tpa-dash-panel2-img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  object-fit: contain !important;
}
.tpa-dash-panel2-foot {
  font-family: 'Inter', sans-serif !important;
  font-size: 9px !important;
  color: #9ca3af !important;
  text-align: center !important;
  margin: 8px 0 0 !important;
  flex-shrink: 0 !important;
}

@media (max-width: 860px) {
  .tpa-outcomes-grid {
    grid-template-columns: 1fr !important;
  }
  .tpa-dash-panels2 {
    flex-direction: column !important;
  }
  .tpa-dash-panel2-sep {
    width: 100% !important;
    height: 1px !important;
    align-self: auto !important;
  }
  .tpa-dash-user-email {
    display: none !important;
  }
}
  .tpa-dash-charts {
    grid-template-columns: 1fr !important;
  }
  .tpa-dash-kpis {
    grid-template-columns: 1fr !important;
  }
  /* Ocultar texto SVG del radar TPI (se muestra como leyenda separada) */
  .tpa-dash-panel svg text {
    display: none !important;
  }
  .tpa-dash-full,
  .tpa-dash-charts,
  .tpa-dash-panel {
    overflow: visible !important;
  }
}

@media (max-width: 600px) {
  .tpa-compare-head,
  .tpa-compare-cell {
    padding: 10px 14px !important;
    font-size: 13px !important;
  }
  .tpa-dash-sidebar {
    display: none !important;
  }
}

/* === Para quién: perfil cards === */
.casos-de-uso .dms-section-element {
  max-width: 100% !important;
  min-width: unset !important;
  width: 100% !important;
}

.tpa-perfil-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  width: 100%;
}

/* Dashboard portátil: DEBE ir al final para superar la especificidad de las reglas base */
@media (max-width: 1600px) and (min-width: 861px) {
  .tpa-dash-charts {
    grid-template-columns: 1.3fr 1.2fr !important;
  }
  .tpa-dash-full,
  .tpa-dash-charts,
  .tpa-dash-panel {
    overflow: visible !important;
  }
  .tpa-dash-panel svg {
    height: 200px !important;
  }
}

.tpa-perfil-card {
  flex: 0 0 calc((100% - 40px) / 3);
  background: #fff;
  border-radius: 16px;
  padding: 28px 24px;
  border: 1px solid #ede9fe;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tpa-perfil-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(150,23,251,0.10);
  border-color: #d177fd;
}

.tpa-perfil-icon {
  width: 40px;
  height: 40px;
  color: #9617fb;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.tpa-perfil-icon svg {
  width: 40px;
  height: 40px;
}

.tpa-perfil-card:hover .tpa-perfil-icon {
  transform: scale(1.15);
}

.tpa-perfil-title {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #211cbf;
  line-height: 1.3;
}

.tpa-perfil-desc {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: #6b7280;
  line-height: 1.6;
  margin: 0;
}

@media (max-width: 860px) {
  .tpa-perfil-card { flex: 0 0 calc((100% - 20px) / 2); }
}

@media (max-width: 560px) {
  .tpa-perfil-card { flex: 0 0 100%; }
}

/* === Casos reales === */
.tpa-casos-section .dms-section-element {
  max-width: 100% !important;
  min-width: unset !important;
  width: 100% !important;
}

.tpa-casos-grid {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
}

.tpa-caso-card {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  align-items: center;
  gap: 32px;
  background: #fff;
  border: 1px solid #ede9fe;
  border-left: 4px solid #9617fb;
  border-radius: 12px;
  padding: 24px 32px;
  transition: all 0.3s ease;
}

.tpa-caso-card:hover {
  background: #faf5ff;
  border-left-color: #211cbf;
  box-shadow: 0 4px 20px rgba(150,23,251,0.08);
}

.tpa-caso-qm {
  font-size: 24px;
  color: #9617fb;
  font-family: Georgia, serif;
  margin-right: 4px;
  line-height: 1;
  vertical-align: -3px;
}

.tpa-caso-quote {
  font-size: 15px;
  font-weight: 600;
  color: #1e1458;
  font-style: italic;
  line-height: 1.5;
}

.tpa-caso-result {
  font-size: 14px;
  color: #6b7280;
  line-height: 1.6;
  margin: 0;
}

.tpa-caso-author {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  white-space: nowrap;
}

.tpa-caso-sep {
  display: none;
}

.tpa-caso-role {
  font-size: 13px;
  font-weight: 700;
  color: #211cbf;
}

.tpa-caso-company {
  font-size: 12px;
  color: #9ca3af;
}

@media (max-width: 860px) {
  .tpa-caso-card {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 16px !important;
  }
  .tpa-caso-author {
    align-items: flex-start;
    white-space: normal !important;
  }
  /* Radar legend (paso 1): 1 columna */
  .tpa-radar-legend {
    grid-template-columns: 1fr !important;
    justify-items: unset !important;
  }
  .tpa-radar-legend span {
    justify-content: unset !important;
  }
  /* Tabla Sin visibilidad / Con TPA → mostrar todo "antes" primero, luego todo "Con TPA" */
  .tpa-compare-wrap {
    display: flex !important;
    flex-direction: column !important;
  }
  .tpa-compare-header-row,
  .tpa-compare-row {
    display: contents !important;
  }
  .tpa-compare-before {
    order: 1 !important;
  }
  .tpa-compare-after {
    order: 2 !important;
  }
  .tpa-compare-head.tpa-compare-after {
    border-left: none !important;
    border-top: 2px solid #c4b5fd !important;
    margin-top: 8px !important;
  }
  .tpa-compare-cell {
    text-align: left !important;
    justify-content: flex-start !important;
  }
  .tpa-compare-cell.tpa-compare-after {
    border-left: none !important;
  }
}

/* Leyenda separada del radar TPI (visible solo en móvil) */
.tpa-dash-panel-legend {
  display: none;
  grid-template-columns: 1fr;
  gap: 3px;
  font-family: 'Inter', sans-serif;
  font-size: 9px;
  color: #6b7280;
  margin-top: 6px;
}
.tpa-dash-panel-legend span {
  display: flex;
  align-items: center;
  gap: 3px;
}
@media (max-width: 860px) {
  .tpa-dash-panel-legend {
    display: grid;
  }
  /* Leyenda evolución TPI: uno debajo del otro */
  .tpa-dash-legend {
    flex-direction: column !important;
    gap: 4px !important;
  }
}

/* Mobile lang links (inside hamburger menu) */
.tpa-mobile-lang-links {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 0 16px 8px;
}
.tpa-mobile-lang-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #374151;
  text-decoration: none;
  border-radius: 8px;
  border: 1px solid #e9d5ff;
  background: #f5f3ff;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.tpa-mobile-lang-link:hover {
  background: #ede9fe;
  color: #9617fb;
  border-color: #9617fb;
}
.tpa-mobile-lang-link.active {
  background: #ede9fe;
  color: #9617fb;
  border-color: #9617fb;
  font-weight: 600;
}

/* === Language Switcher === */
.tpa-lang-switcher {
  position: relative;
  flex-shrink: 0;
}

.tpa-lang-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #f5f3ff;
  border: 2px solid #9617fb;
  border-radius: 10px;
  padding: 10px 16px;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #9617fb;
  line-height: 1;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
  white-space: nowrap;
}

.tpa-lang-btn:hover,
.tpa-lang-switcher.open .tpa-lang-btn {
  background: #9617fb;
  border-color: #9617fb;
  color: #fff;
}

/* Nav (escritorio): "Solicita tu demo" y botón de idioma del MISMO tamaño.
   Mismo alto, padding, fuente y radio; inline-flex + align-items centran el
   contenido y box-sizing:border-box incluye el borde del botón de idioma para
   que ambos midan exactamente igual. Solo aplica donde el nav es visible. */
@media (min-width: 1025px) {
  #dms-page header#header .dms-header__elems > a.dms-button,
  #dms-page .tpa-lang-switcher .tpa-lang-btn {
    height: 56px !important;
    padding: 0 28px !important;
    font-size: 16px !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
  }
  /* "Solicita tu demo": letra más grande sin alterar el tamaño del botón */
  #dms-page header#header .dms-header__elems > a.dms-button {
    font-size: 19px !important;
  }
}

/* Portátil: nav más compacto + botones igualados */
@media (max-width: 1600px) and (min-width: 861px) {
  /* Usar #dms-page para superar la especificidad del !important de 22px del tema:
     (1,1,0) > (0,3,1) */
  #dms-page .main-menu-link {
    font-size: 18px !important;
    padding: 6px 8px !important;
  }
  /* Igualar tamaño de ambos botones CTA */
  #dms-page .tpa-cta-final-btns .dms-button,
  #dms-page .tpa-cta-final-btns .tpa-btn-outline,
  #dms-page .tpa-card-buttons .dms-button,
  #dms-page .tpa-card-buttons .tpa-btn-outline {
    font-size: 17px !important;
    padding: 14px 28px !important;
    line-height: 1 !important;
  }
}

/* CTA buttons — box-model idéntico en TODOS los breakpoints.
   Raíz del bug: sin dms-button, .tpa-btn-outline heredaba line-height del body
   (≈1.5) mientras .dms-button usaba el del tema (≈1). Mismo inline-flex +
   align-items:center garantiza la misma altura independientemente del borde. */
#dms-page .tpa-card-buttons .dms-button,
#dms-page .tpa-card-buttons .tpa-btn-outline,
#dms-page .tpa-cta-final-btns .dms-button,
#dms-page .tpa-cta-final-btns .tpa-btn-outline {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
}

/* Escritorio grande (>1600px): botón primario y outline del MISMO tamaño en
   los dos CTA (tarjeta hero "Empieza gratis…/Ver cómo funciona" y CTA final).
   En ≤1600px ya los iguala el bloque anterior; aquí evitamos el desajuste que
   producía el padding propio del tema en .dms-button frente al outline. */
@media (min-width: 1601px) {
  #dms-page .tpa-card-buttons .dms-button,
  #dms-page .tpa-card-buttons .tpa-btn-outline,
  #dms-page .tpa-cta-final-btns .dms-button,
  #dms-page .tpa-cta-final-btns .tpa-btn-outline {
    padding: 20px 42px !important;
    font-size: 20px !important;
    line-height: 1.2 !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
  }
}

.tpa-lang-flag { font-size: 16px; line-height: 1; }
.tpa-lang-code { font-size: 12px; }
.tpa-lang-chevron {
  transition: transform 0.2s ease;
  flex-shrink: 0;
}
.tpa-lang-switcher.open .tpa-lang-chevron { transform: rotate(180deg); }

.tpa-lang-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: #fff;
  border: 1px solid #ede9fe;
  border-radius: 10px;
  padding: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  min-width: 148px;
  z-index: 10001;
}

.tpa-lang-switcher.open .tpa-lang-dropdown { display: block; }

.tpa-lang-dropdown a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: #374151;
  text-decoration: none;
  border-radius: 6px;
  transition: background 0.15s;
  white-space: nowrap;
}

.tpa-lang-dropdown a:hover { background: #faf5ff; color: #9617fb; }
.tpa-lang-dropdown a.active { background: #f3e8ff; color: #9617fb; font-weight: 600; }

/* === FAQ === */
.tpa-faq-section .dms-section-element {
  max-width: 100% !important;
  min-width: unset !important;
  width: 100% !important;
}

.tpa-faq-wrap {
  width: 100%;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid #ede9fe;
  background: #fff;
}

.tpa-faq-item {
  border-bottom: 1px solid #f3f0ff;
}

.tpa-faq-item:last-child {
  border-bottom: none;
}

.tpa-faq-q {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 28px;
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #1e1458;
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: background 0.2s ease;
}

.tpa-faq-q::-webkit-details-marker { display: none; }

.tpa-faq-q::after {
  content: "+";
  color: #9617fb;
  font-size: 24px;
  font-weight: 300;
  line-height: 1;
  flex-shrink: 0;
  margin-left: 16px;
  transition: transform 0.25s ease;
}

.tpa-faq-item[open] > .tpa-faq-q {
  background: #faf5ff;
  color: #9617fb;
}

.tpa-faq-item[open] > .tpa-faq-q::after {
  transform: rotate(45deg);
}

.tpa-faq-a {
  padding: 0 28px 20px 28px;
  background: #faf5ff;
}

.tpa-faq-a p {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  color: #4b5563;
  line-height: 1.7;
  margin: 0 0 8px 0;
}

.tpa-faq-a p:last-child { margin-bottom: 0; }

.tpa-faq-a strong { color: #1e1458; }

.tpa-faq-a ul {
  margin: 6px 0 8px 0;
  padding-left: 20px;
}

.tpa-faq-a li {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: #4b5563;
  line-height: 1.7;
  margin-bottom: 2px;
}

.tpa-faq-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 10px 0 14px 0;
}

.tpa-faq-chips span {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #9617fb;
  background: #f3e8ff;
  border: 1px solid #e9d5ff;
  border-radius: 20px;
  padding: 4px 14px;
  line-height: 1.4;
}

/* === Final CTA === */
.tpa-section-final-cta .dms-section-element {
  max-width: 100% !important;
  min-width: unset !important;
  width: 100% !important;
}

.tpa-cta-final-wrap {
  text-align: center;
  padding: 20px 0;
}

.tpa-cta-final-title {
  font-family: 'Inter', sans-serif;
  font-size: clamp(28px, 4vw, 52px);
  font-weight: 700;
  line-height: 1.15;
  color: #1e1458;
  margin: 0 0 16px 0;
}

.tpa-cta-final-sub {
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  color: #6b7280;
  margin: 0 0 36px 0;
}

.tpa-cta-final-btns {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}

.tpa-btn-outline {
  display: inline-block;
  padding: 14px 28px;
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #9617fb;
  border: 2px solid #9617fb;
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
  white-space: nowrap;
}

.tpa-btn-outline:hover {
  background: #9617fb;
  color: #fff;
}

.tpa-cta-final-trust {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: #9ca3af;
  margin: 0;
}

/* === Site footer (inherits theme dms-footer styles) === */
.dms-footer.dms-site-footer {
  margin-top: 80px !important;
}
.tpa-footer-funding-col {
  display: flex !important;
  flex-direction: column !important;
  column-count: unset !important;
  gap: 16px !important;
}
.tpa-footer-funding-col .dms-footer-text {
  font-size: 8px !important;
  line-height: 1.65 !important;
}
.dms-footer .dms-footer-bottom .dms-footer-text,
.dms-footer .dms-footer-bottom .tpa-footer-link {
  font-size: 10px !important;
}
.dms-footer .dms-footer-logo {
  max-width: 70px !important;
}
.tpa-footer-cdti-img {
  max-width: 260px !important;
  height: auto !important;
  display: block !important;
}
.dms-footer .dms-footer-bottom {
  width: 100% !important;
  box-sizing: border-box !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
}
.tpa-footer-link {
  color: inherit !important;
  text-decoration: none !important;
}
.tpa-footer-link:hover {
  color: #9617fb !important;
  text-decoration: underline !important;
}
@media (max-width: 768px) {
  .tpa-footer-cdti-img {
    max-width: 200px !important;
    margin: 0 auto !important;
  }
}

/* =====================================================================
   ▼▼▼  MERGED: Figma redesign overlay (antes figma-redesign.css)  ▼▼▼
   Fusionado en landing.css el 2026-06-15. Se anexa AL FINAL para conservar
   exactamente el mismo orden de cascada que tenía el archivo separado
   (cargaba después por dependencia de 'tpa-landing-css'). Estas reglas usan
   el prefijo #dms-page (especificidad de ID) y ganan a las reglas base.
   ===================================================================== */
/* =====================================================================
   TPA Landing — Figma redesign overlay  (figma-redesign.css)
   ---------------------------------------------------------------------
   Re-skins the existing markup to match the "TPA-landing" Figma file:
     · Palette  : purple/indigo  →  blue / cyan / navy (+ orange accent)
     · Fonts    : Inter-only     →  Michroma (H1) · Satoshi (titles/body)
                                     · Aldrich (labels)
   Loads AFTER landing.css (enqueue dependency = 'tpa-landing-css').
   100% additive & update-safe: delete this file + its enqueue to revert.
   Selectors are prefixed with #dms-page so their ID-specificity (1,x,x)
   beats the inline <style id="tpa-typography-head"> Inter block (0,3,1).
   ===================================================================== */

:root {
  /* ---- Brand palette (from Figma color variables / swatches) ---- */
  --tpa-blue:    #0061ff;          /* ELECTRIC SAPPHIRE — primary action */
  --tpa-blue-2:  #0062ff;
  --tpa-cyan:    #49fdfe;          /* CYAN GLOW — gradient start / glow   */
  --tpa-navy:    #1d335e;          /* TWILIGHT INDIGO — titles/dark bg    */
  --tpa-ink:     #1a1a2e;          /* darkest heading navy                */
  --tpa-indigo:  #211cbf;
  --tpa-purple:  #9617fb;          /* eyebrow / lang-button accent only   */
  --tpa-orange:  #f99c39;          /* CARROT ORANGE — problem accent      */
  --tpa-slate:   #6c778d;          /* SLATE GRAY — muted text/borders     */
  --tpa-gray:    #6b7280;
  --tpa-gray-2:  #4b5563;
  --tpa-gray-3:  #374151;
  --tpa-gray-4:  #9ca3af;
  --tpa-line:        rgba(108,119,141,.15);
  --tpa-line-strong: rgba(108,119,141,.30);
  --tpa-bg-soft:     rgba(108,119,141,.05);

  /* ---- Fonts ---- */
  --tpa-font-display: 'Michroma', 'Inter', sans-serif;   /* hero H1   */
  --tpa-font-head:    'Satoshi', 'Inter', sans-serif;    /* H2 / body */
  --tpa-font-label:   'Aldrich', 'Inter', sans-serif;    /* eyebrows  */

  /* ---- Signature gradients ---- */
  --tpa-grad-btn:        linear-gradient(90deg, #49fdfe 0%, #0061ff 100%);
  --tpa-grad-btn-hover:  linear-gradient(90deg, #0061ff 0%, #49fdfe 100%);
  --tpa-grad-logo:       linear-gradient(135deg, #49fdfe 0%, #0061ff 58%, #1d335e 100%);
}

/* =====================================================================
   1. TYPOGRAPHY
   ===================================================================== */

/* H1 — hero headline → Michroma, solid navy (Figma has NO gradient here) */
#dms-page .dms-template-inicio .dms-section-element .dms-title h1,
#dms-page .dms-template-inicio .dms-section-element .dms-text  h1 {
  font-family: var(--tpa-font-display) !important;
  font-weight: 400 !important;            /* Michroma ships single-weight */
  color: var(--tpa-ink) !important;
  line-height: 1.12 !important;
  letter-spacing: -0.01em !important;
  -webkit-font-smoothing: antialiased;
}
/* Michroma is a WIDE face — trim the desktop size a touch so it still
   wraps to 2–3 lines like the Figma artboard. */
#dms-page .dms-template-inicio .dms-section-element .dms-title h1,
#dms-page .dms-template-inicio .dms-section-element .dms-text  h1 { font-size: 72px !important; }
@media (max-width:1440px){ #dms-page .dms-template-inicio .dms-section-element .dms-title h1,
  #dms-page .dms-template-inicio .dms-section-element .dms-text h1 { font-size: 62px !important; } }
@media (max-width:1200px){ #dms-page .dms-template-inicio .dms-section-element .dms-title h1,
  #dms-page .dms-template-inicio .dms-section-element .dms-text h1 { font-size: 52px !important; } }
@media (max-width:1024px){ #dms-page .dms-template-inicio .dms-section-element .dms-title h1,
  #dms-page .dms-template-inicio .dms-section-element .dms-text h1 { font-size: 42px !important; } }
@media (max-width:600px){  #dms-page .dms-template-inicio .dms-section-element .dms-title h1,
  #dms-page .dms-template-inicio .dms-section-element .dms-text h1 { font-size: 32px !important; } }

/* H1 <strong> "Lidera con datos reales." → degradado cian→azul oscuro */
#dms-page .dms-template-inicio .dms-section-element .dms-title h1 strong,
#dms-page .dms-template-inicio .dms-section-element .dms-text  h1 strong {
  background: linear-gradient(90deg, #49fdfe 0%, #0061ff 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: var(--tpa-blue) !important;      /* fallback si no soporta clip */
  font-weight: 400 !important;
}

/* H2 — section titles → Satoshi Bold, navy */
#dms-page .dms-template-inicio .dms-section-element .dms-title h2,
#dms-page .dms-template-inicio .dms-section-element .dms-text  h2,
#dms-page .tpa-cta-final-title {
  font-family: var(--tpa-font-head) !important;
  font-weight: 700 !important;
  color: var(--tpa-navy) !important;
  letter-spacing: -0.01em !important;
}
/* H2 <strong> → keep solid navy (no purple gradient) */
#dms-page .dms-template-inicio .dms-section-element .dms-title h2 strong,
#dms-page .dms-template-inicio .dms-section-element .dms-text  h2 strong {
  background: none !important;
  -webkit-text-fill-color: var(--tpa-navy) !important;
  color: var(--tpa-navy) !important;
}

/* H3 → Satoshi */
#dms-page .dms-template-inicio .dms-section-element .dms-title h3,
#dms-page .dms-template-inicio .dms-section-element .dms-text  h3 {
  font-family: var(--tpa-font-head) !important;
  color: var(--tpa-navy) !important;
}

/* Subtitles → Satoshi, muted gray */
#dms-page .dms-template-inicio .dms-section-element .dms-subtitle,
#dms-page .dms-template-inicio .dms-section-element .dms-subtitle * {
  font-family: var(--tpa-font-head) !important;
  color: var(--tpa-gray) !important;
}

/* Eyebrow label → Aldrich, uppercase, blue accent */
#dms-page .tpa-eyebrow {
  font-family: var(--tpa-font-label) !important;
  font-size: 22px !important;
  font-weight: 400 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  color: var(--tpa-blue) !important;
}

/* =====================================================================
   2. SECTION BACKGROUNDS
   ===================================================================== */
#dms-page .dms-template-inicio .dms-section.grey { background-color: #f7f8fa !important; }

/* =====================================================================
   3. BUTTONS  (cyan→blue gradient, hover = reversed gradient + glow)
   Covers header, cards, sections, popup submit and mobile menu.
   ===================================================================== */
.tpa-landing-page  .dms-button,
.tpa-landing-active .dms-button,
#dms-page  .dms-button,
#popup     .dms-button,
.tpa-mobile-menu-wrapper .dms-button,
#tpa-contact-form .dms-button {
  background: var(--tpa-grad-btn) !important;
  background-color: var(--tpa-blue) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 12px !important;
  font-family: var(--tpa-font-head) !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  box-shadow: 0 4px 14px rgba(0,97,255,.25) !important;
  transition: background .25s ease, box-shadow .25s ease, transform .2s ease !important;
}
.tpa-landing-page  .dms-button:hover,
.tpa-landing-active .dms-button:hover,
#dms-page  .dms-button:hover,
#popup     .dms-button:hover,
.tpa-mobile-menu-wrapper .dms-button:hover,
#tpa-contact-form .dms-button:hover {
  background: var(--tpa-grad-btn-hover) !important;
  box-shadow: 0 8px 24px rgba(73,253,254,.45), 0 4px 12px rgba(0,97,255,.30) !important;
  transform: translateY(-2px) !important;
  color: #fff !important;
}

/* Secondary / outline button → blue ghost */
#dms-page .tpa-btn-outline,
#dms-page .tpa-cta-final-btns .tpa-btn-outline {
  background: transparent !important;
  background-image: none !important;
  color: var(--tpa-blue) !important;
  border: 2px solid var(--tpa-blue) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  font-family: var(--tpa-font-head) !important;
  font-weight: 700 !important;
}
#dms-page .tpa-btn-outline:hover {
  background: rgba(0,97,255,.07) !important;
  color: var(--tpa-blue) !important;
}

/* =====================================================================
   4. HEADER  (nav hover + language switcher → blue)
   ===================================================================== */
body.tpa-landing-page .dms-header__logo img,
body.tpa-landing-page .dms-logo img { max-width: 160px !important; }
#dms-page .dms-desktop-header-menu .menu-link { font-family: var(--tpa-font-head) !important; color: #000000 !important; font-weight: 700 !important; }
#dms-page .dms-desktop-header-menu .menu-link:hover {
  color: var(--tpa-blue) !important;
  background-color: rgba(0,97,255,.06) !important;
  border-radius: 10px !important;
}

/* Language button — cyan 15% fill, blue border, navy text */
.tpa-lang-btn {
  background: rgba(73,253,254,.15) !important;
  border: 1.5px solid var(--tpa-blue) !important;
  color: var(--tpa-ink) !important;
  font-family: var(--tpa-font-head) !important;
}
.tpa-lang-btn:hover,
.tpa-lang-switcher.open .tpa-lang-btn {
  background: var(--tpa-blue) !important;
  border-color: var(--tpa-blue) !important;
  color: #fff !important;
}
.tpa-lang-dropdown a:hover  { background:#eef4ff !important; color:var(--tpa-blue) !important; }
.tpa-lang-dropdown a.active { background:#e6f0ff !important; color:var(--tpa-blue) !important; }

/* Mobile burger + menu accents → navy/blue */
.tpa-hamburger-btn          { background: var(--tpa-navy) !important; box-shadow:0 2px 8px rgba(29,51,94,.35) !important; }
.tpa-mobile-menu-title      { color: var(--tpa-indigo) !important; font-family:var(--tpa-font-head) !important; }
.tpa-mobile-nav-list .menu-link { font-family: var(--tpa-font-head) !important; }
.tpa-mobile-nav-list .menu-link:hover {
  background:#eef4ff !important; color:var(--tpa-blue) !important; border-left-color:var(--tpa-blue) !important;
}

/* =====================================================================
   5. HERO CARD  (glow shadow, cyan→blue accent bar)
   ===================================================================== */
#dms-page .tpa-hero-card,
#dms-page .tpa-section-final-cta .tpa-cta-final-wrap > .tpa-hero-card {
  border-radius: 24px !important;
  /* Fondo invertido: glow naranja (arriba-izq) + glow azul (abajo-der) */
  background:
    radial-gradient(120% 80% at 12% 0%, rgba(249,156,57,.12) 0%, rgba(249,156,57,0) 55%),
    radial-gradient(120% 90% at 92% 100%, rgba(0,97,255,.10) 0%, rgba(0,97,255,0) 55%),
    #ffffff !important;
  box-shadow:
    0 2px 8px rgba(108,119,141,.05),
    0 20px 30px rgba(73,253,254,.22),
    0 4px 6px -2px rgba(0,97,255,.18) !important;
  border: 1px solid var(--tpa-line) !important;
}
#dms-page .tpa-hero-card::before { background: var(--tpa-grad-btn) !important; }
/* Headline → Satoshi Bold navy; "nivel real de madurez" en degradado cian→azul */
#dms-page .tpa-card-headline      { font-family: var(--tpa-font-head) !important; font-weight: 700 !important; color: var(--tpa-navy) !important; }
#dms-page .tpa-card-headline strong {
  background: linear-gradient(90deg, #49fdfe 0%, #0061ff 100%) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important; color: var(--tpa-blue) !important;
  font-weight: 700 !important;
}
#dms-page .tpa-card-body     { font-family: var(--tpa-font-head) !important; color: var(--tpa-gray-2) !important; }
#dms-page .tpa-card-tagline  { font-family: var(--tpa-font-head) !important; color: var(--tpa-navy) !important; font-style: italic !important; }

/* Microcopy → píldora con check (círculo navy + check blanco), en negrita */
#dms-page .tpa-card-microcopy{
  display: inline-flex !important; align-items: center !important; gap: 6px !important;
  margin: 0 auto !important;
  font-family: var(--tpa-font-label) !important; font-weight: 700 !important;
  font-size: 11px !important; letter-spacing: .01em !important;
  color: var(--tpa-navy) !important;
  background: #fff !important;
  border: 1px solid var(--tpa-line) !important;
  border-radius: 100px !important;
  padding: 6px 12px !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.10) !important;
}
#dms-page .tpa-card-microcopy .tpa-microcopy-icon {
  width: 15px !important; height: 15px !important;
}
#dms-page .tpa-card-microcopy,
#dms-page .tpa-card-microcopy span {
  font-family: var(--tpa-font-label) !important;
}

/* =====================================================================
   6. "¿QUÉ ESTÁ FRENANDO?"  — subtítulo centrado · tarjetas en fila con
      icono arriba-izquierda y borde izquierdo azul claro (cian) ·
      caja oscura "TPA te ayuda a entender".
   ===================================================================== */

/* Todos los section-elements del bloque problema al mismo ancho exacto */
#dms-page .tpa-problema .dms-section-element {
  width: 88% !important;
  max-width: 88% !important;
}
@media (max-width:1200px) {
  #dms-page .tpa-problema .dms-section-element { width: 100% !important; max-width: 100% !important; }
}

/* Subtítulo centrado y alineado en el centro */
#dms-page .tpa-problema .dms-subtitle,
#dms-page .tpa-problema .dms-subtitle * { text-align: center !important; }
#dms-page .tpa-problema .dms-subtitle {
  max-width: 760px !important; margin-left: auto !important; margin-right: auto !important;
}

/* 4 tarjetas, una al lado de la otra */
#dms-page .tpa-problema .dms-boxes {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 20px !important; width: 100% !important;
}
#dms-page .tpa-problema .dms-box.dms-box-type1 {
  display: flex !important; flex-direction: column !important; align-items: flex-start !important;
  gap: 14px !important; text-align: left !important;
  background: #fff !important;
  border: 1px solid var(--tpa-line) !important;
  border-left: 4px solid var(--tpa-cyan) !important;
  border-radius: 14px !important;
  padding: 28px 24px !important;
  min-height: 260px !important;
  box-shadow: 0 4px 20px rgba(29,51,94,.06) !important;
  transition: transform .2s ease, box-shadow .25s ease !important;
}
#dms-page .tpa-problema .dms-box.dms-box-type1:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 28px rgba(73,253,254,.22) !important;
}
/* Icono arriba-izquierda */
#dms-page .tpa-problema .tpa-box-icon {
  width: 44px !important; height: 44px !important; flex-shrink: 0 !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  border-radius: 12px !important;
  background: rgba(73,253,254,.16) !important;
  color: var(--tpa-blue) !important;
}
#dms-page .tpa-problema .tpa-box-icon svg { width: 24px !important; height: 24px !important; }
#dms-page .tpa-problema .dms-box-title p {
  font-family: var(--tpa-font-head) !important; font-weight: 700 !important;
  font-size: 23px !important; color: var(--tpa-ink) !important; line-height: 1.3 !important; margin: 0 !important;
}
#dms-page .tpa-problema .tpa-box-contrast {
  background: none !important; -webkit-text-fill-color: var(--tpa-blue) !important;
  color: var(--tpa-blue) !important; display: block !important; font-weight: 700 !important;
}
#dms-page .tpa-problema .dms-box-text p {
  font-family: var(--tpa-font-head) !important; font-size: 18px !important;
  color: var(--tpa-gray) !important; line-height: 1.6 !important; margin: 0 !important;
}
@media (max-width:1024px){ #dms-page .tpa-problema .dms-boxes { grid-template-columns: repeat(2,1fr) !important; } }
@media (max-width:600px) { #dms-page .tpa-problema .dms-boxes { grid-template-columns: 1fr !important; } }

/* ---- Caja oscura "TPA te ayuda a entender" ---- */
#dms-page .tpa-entender-box {
  position: relative !important;
  display: flex !important; flex-direction: column !important; align-items: center !important;
  gap: 22px !important;
  width: 100% !important; max-width: 100% !important; margin: 0 auto !important;
  /* navy + glow cian (arriba-izq) + glow naranja (abajo-der) */
  background:
    radial-gradient(90% 120% at 8% 0%,  rgba(73,253,254,.28) 0%, rgba(73,253,254,0) 55%),
    radial-gradient(90% 120% at 95% 100%, rgba(249,156,57,.22) 0%, rgba(249,156,57,0) 55%),
    var(--tpa-navy) !important;
  border: 1px solid var(--tpa-line) !important;
  border-radius: 20px !important;
  padding: 36px 32px !important;
  box-shadow: 0 4px 20px rgba(73,253,254,.30) !important;
  overflow: hidden !important;
}
#dms-page .tpa-entender-title {
  font-family: var(--tpa-font-head) !important; font-weight: 700 !important;
  font-size: clamp(28px, 3.5vw, 42px) !important;
  color: var(--tpa-cyan) !important; text-align: center !important; margin: 0 !important;
}
#dms-page .tpa-entender-list {
  list-style: none !important; margin: 0 !important; padding: 0 !important;
  display: flex !important; flex-direction: column !important; gap: 14px !important; align-items: flex-start !important;
}
#dms-page .tpa-entender-list li {
  display: flex !important; align-items: center !important; gap: 14px !important;
  font-family: var(--tpa-font-head) !important; font-size: 21px !important; font-weight: 500 !important;
  color: #fff !important; line-height: 1.4 !important;
}
/* Check dentro de caja redondeada cian (estilo Figma) */
#dms-page .tpa-entender-check {
  flex-shrink: 0 !important;
  width: 34px !important; height: 34px !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  border-radius: 10px !important;
  background: rgba(73,253,254,.20) !important;
  border: 1.5px solid var(--tpa-cyan) !important;
  color: var(--tpa-cyan) !important;
}
#dms-page .tpa-entender-check svg { width: 18px !important; height: 18px !important; display: block !important; }
#dms-page .tpa-entender-box .dms-button { margin-top: 4px !important; }

/* =====================================================================
   7. 4-STEP CARDS
   ===================================================================== */

/* Accent on "en 4 pasos" in the section H2 (same size as H2, cian→azul) */
#dms-page .tpa-steps-accent {
  font-family: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
  font-weight: 900 !important;
  display: inline !important;
  background: linear-gradient(90deg, #49fdfe 0%, #0061ff 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* 4 rows: num | icon+title | desc | visual */
#dms-page .tpa-steps-el .tpa-steps-row {
  grid-template-rows: auto auto auto 1fr !important;
}
#dms-page .tpa-step-card {
  background: #ffffff !important;
  border: 1px solid var(--tpa-line) !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 20px rgba(29,51,94,.06) !important;
  transition: border-color .25s ease, box-shadow .25s ease, transform .2s ease !important;
  grid-row: span 4 !important;
  grid-template-columns: auto 1fr !important;
  column-gap: 12px !important;
  align-items: start !important;
}
#dms-page .tpa-step-connector {
  grid-row: span 4 !important;
}
#dms-page .tpa-step-card:hover {
  border-color: var(--tpa-cyan) !important;
  box-shadow: 0 10px 28px rgba(73,253,254,.25) !important;
  transform: translateY(-3px) !important;
}

/* Step number 01-04: 42×42 badge — cyan bg 5%, cyan border 50%, gradient text */
#dms-page .tpa-step-num {
  grid-column: 1 / -1 !important;
  grid-row: 1 !important;
  isolation: isolate !important;       /* stacking context so ::before z:-1 stays inside */
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 42px !important;
  height: 42px !important;
  flex-shrink: 0 !important;
  border-radius: 12px !important;
  font-family: var(--tpa-font-head) !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  padding: 0 !important;
  /* Gradient text */
  background: linear-gradient(90deg, #0061ff 0%, #49fdfe 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
/* Box bg + border — ::before stays inside the stacking context */
#dms-page .tpa-step-num::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: rgba(73,253,254,.08) !important;
  border: 1.5px solid rgba(73,253,254,.55) !important;
  border-radius: 12px !important;
  z-index: -1 !important;
}

/* Step icon badge — navy background, white icon — same row as title */
#dms-page .tpa-step-icon {
  grid-column: 1 !important;
  grid-row: 2 !important;
  align-self: center !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 42px !important;
  height: 42px !important;
  flex-shrink: 0 !important;
  background: var(--tpa-navy) !important;
  border: 1.5px solid rgba(73,253,254,.30) !important;
  border-radius: 12px !important;
  color: #fff !important;
}
#dms-page .tpa-step-icon svg { width: 22px !important; height: 22px !important; display: block !important; }

/* Step title: same row as icon */
#dms-page .tpa-step-title {
  grid-column: 2 !important;
  grid-row: 2 !important;
  align-self: center !important;
  font-family: var(--tpa-font-head) !important;
  font-weight: 700 !important;
  font-size: 26px !important;
  color: var(--tpa-navy) !important;
}
#dms-page .tpa-step-desc  {
  grid-column: 1 / -1 !important;
  grid-row: 3 !important;
  font-family: var(--tpa-font-head) !important;
  color: var(--tpa-gray-2) !important;
}
#dms-page .tpa-step-visual { grid-column: 1 / -1 !important; grid-row: 4 !important; }
#dms-page .tpa-step-connector { color: var(--tpa-blue) !important; }
#dms-page .tpa-step-list li,
#dms-page .tpa-check-list li { list-style: none !important; }
#dms-page .tpa-step-list li::before {
  content: "•" !important;
  color: var(--tpa-blue) !important;
  font-size: 1.2em !important;
  line-height: 1 !important;
}
#dms-page .tpa-step-visual,
#dms-page .tpa-step-visual--img { background: transparent !important; }
/* Check list (step 4 outcomes) — navy badge + white checkmark */
#dms-page .tpa-check-list li {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-size: 15px !important;
  padding-left: 0 !important;
  position: static !important;
}
#dms-page .tpa-check-list li::before {
  content: "✓" !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: static !important;
  min-width: 26px !important;
  width: 26px !important;
  height: 26px !important;
  background: var(--tpa-navy) !important;
  color: #fff !important;
  border-radius: 6px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
}

/* =====================================================================
   8. BENEFIT / OUTCOME / PROFILE CARDS  (blue+navy, not purple)
   ===================================================================== */
#dms-page .tpa-benefit-card,
#dms-page .tpa-perfil-card {
  border: 1px solid var(--tpa-line) !important;
  box-shadow: 0 4px 20px rgba(29,51,94,.06) !important;
}
#dms-page .tpa-benefit-card:hover,
#dms-page .tpa-perfil-card:hover,
#dms-page .tpa-outcome-card:hover {
  border-color: var(--tpa-cyan) !important;
  box-shadow: 0 10px 28px rgba(0,97,255,.12) !important;
}
/* Benefit icons — cyan border + cyan→blue gradient stroke (via SVG url(#tpa-benefit-grad)) */
#dms-page .tpa-benefit-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 48px !important;
  height: 48px !important;
  flex-shrink: 0 !important;
  background: rgba(73,253,254,.08) !important;
  border: 1.5px solid rgba(73,253,254,.45) !important;
  border-radius: 12px !important;
}
#dms-page .tpa-perfil-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 48px !important;
  height: 48px !important;
  flex-shrink: 0 !important;
  border-radius: 12px !important;
  background: rgba(73,253,254,.06) !important;
  border: 1.5px solid rgba(73,253,254,.45) !important;
  color: var(--tpa-blue) !important;
  box-shadow: none !important;
}
#dms-page .tpa-perfil-icon svg {
  width: 24px !important;
  height: 24px !important;
  stroke: var(--tpa-blue) !important;
}
#dms-page .tpa-benefit-title,
#dms-page .tpa-outcome-title,
#dms-page .tpa-perfil-title { font-family: var(--tpa-font-head) !important; color: var(--tpa-navy) !important; }
#dms-page .tpa-benefit-desc,
#dms-page .tpa-outcome-desc,
#dms-page .tpa-perfil-desc,
#dms-page .tpa-benefits-intro { font-family: var(--tpa-font-head) !important; color: var(--tpa-gray) !important; }

/* Outcome cards — compact rows; card 2 (middle) = orange, right border, offset right */
#dms-page .tpa-outcomes-grid {
  grid-template-columns: 1fr !important;
  gap: 10px !important;
}
#dms-page .tpa-outcome-card {
  display: grid !important;
  grid-template-columns: 38px 1fr !important;
  grid-template-rows: auto auto !important;
  align-items: center !important;
  column-gap: 10px !important;
  row-gap: 2px !important;
  background: var(--tpa-bg-soft) !important;
  border: none !important;
  border-left: 3px solid var(--tpa-blue) !important;
  border-radius: 12px !important;
  padding: 12px 18px 12px 10px !important;
  box-shadow: none !important;
  overflow: visible !important;
}
#dms-page .tpa-outcome-card::before { content: none !important; display: none !important; }
#dms-page .tpa-outcome-card:hover {
  background: rgba(108,119,141,.07) !important;
  box-shadow: 0 4px 16px rgba(0,97,255,.10) !important;
}

/* Cards 1 & 3: trimmed right to match card 2 width, icon col 1 spanning both rows */
#dms-page .tpa-outcome-card:not(:nth-child(2)) {
  margin-right: 22% !important;
}
#dms-page .tpa-outcome-card:not(:nth-child(2)) .tpa-outcome-icon {
  grid-column: 1 !important;
  grid-row: 1 / span 2 !important;
}
#dms-page .tpa-outcome-card:not(:nth-child(2)) .tpa-outcome-title {
  grid-column: 2 !important;
  grid-row: 1 !important;
}
#dms-page .tpa-outcome-card:not(:nth-child(2)) .tpa-outcome-desc {
  grid-column: 2 !important;
  grid-row: 2 !important;
}

/* Middle card (Mejor liderazgo) — orange, right border, pushed right, icon on right */
#dms-page .tpa-outcome-card:nth-child(2) {
  grid-template-columns: 1fr 38px !important;
  border-left: none !important;
  border-right: 3px solid #FFB703 !important;
  background: var(--tpa-bg-soft) !important;
  margin-left: 22% !important;
  padding: 12px 10px 12px 18px !important;
}
#dms-page .tpa-outcome-card:nth-child(2):hover {
  box-shadow: 0 4px 16px rgba(255,183,3,.20) !important;
}
/* icon → right column */
#dms-page .tpa-outcome-card:nth-child(2) .tpa-outcome-icon {
  grid-column: 2 !important;
  grid-row: 1 / span 2 !important;
  background: rgba(255,183,3,.08) !important;
  border-color: rgba(255,183,3,.55) !important;
  color: #FFB703 !important;
}
#dms-page .tpa-outcome-card:nth-child(2) .tpa-outcome-icon svg { stroke: #FFB703 !important; }
/* title + desc → left column, right-aligned text */
#dms-page .tpa-outcome-card:nth-child(2) .tpa-outcome-title {
  grid-column: 1 !important;
  grid-row: 1 !important;
  color: var(--tpa-navy) !important;
  text-align: right !important;
}
#dms-page .tpa-outcome-card:nth-child(2) .tpa-outcome-desc {
  grid-column: 1 !important;
  grid-row: 2 !important;
  text-align: right !important;
}

#dms-page .tpa-outcome-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 10px !important;
  background: rgba(73,253,254,.06) !important;
  border: 1.5px solid rgba(73,253,254,.45) !important;
  color: var(--tpa-blue) !important;
  box-shadow: none !important;
}
#dms-page .tpa-outcome-icon svg {
  width: 19px !important;
  height: 19px !important;
  stroke: var(--tpa-blue) !important;
}
#dms-page .tpa-outcome-title { align-self: end !important; font-size: 24px !important; font-weight: 700 !important; color: var(--tpa-navy) !important; text-align: left !important; }
#dms-page .tpa-outcome-desc  { align-self: start !important; font-size: 17px !important; font-weight: 600 !important; color: var(--tpa-slate) !important; text-align: left !important; }

/* =====================================================================
   9. "QUÉ CAMBIA" COMPARISON TABLE  — exact Figma copy
   Wrapper : slate-5% panel, 1px slate-30% border, r16, padding + gaps
   Headers : plain colored labels (slate / blue), no box, no marks
   Cells   : separated rounded boxes (r12) with a 3px colored LEFT border
   ===================================================================== */
#dms-page .tpa-compare-wrap {
  display: block !important;
  background: var(--tpa-bg-soft) !important;             /* slate 5% */
  border: 1px solid var(--tpa-line-strong) !important;   /* slate 30% */
  border-radius: 16px !important;
  box-shadow: none !important;
  overflow: visible !important;
  padding: 20px !important;
}
/* Header row → just colored labels, no background / border / icons */
#dms-page .tpa-compare-header-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  column-gap: 12px !important;
  margin-bottom: 12px !important;
}
#dms-page .tpa-compare-head {
  background: transparent !important;
  border: none !important;
  padding: 4px 8px !important;
  font-family: var(--tpa-font-label) !important;
  font-weight: 400 !important;
  font-size: 32px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
}
#dms-page .tpa-compare-head svg { display: none !important; }
#dms-page .tpa-compare-head.tpa-compare-before { color: var(--tpa-slate) !important; }
#dms-page .tpa-compare-head.tpa-compare-after  { color: var(--tpa-blue) !important; }
/* Data rows → two separated rounded cells with a gap */
#dms-page .tpa-compare-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  column-gap: 12px !important;
  margin-bottom: 12px !important;
}
#dms-page .tpa-compare-row:last-child { margin-bottom: 0 !important; }
#dms-page .tpa-compare-cell {
  font-family: var(--tpa-font-head) !important;
  font-size: 22px !important;
  border-top: none !important;
  border-radius: 12px !important;
  padding: 20px 24px !important;
  text-align: left !important;
  justify-content: flex-start !important;
}
#dms-page .tpa-compare-cell.tpa-compare-before,
#dms-page .tpa-compare-row:nth-child(even) .tpa-compare-cell.tpa-compare-before {
  color: var(--tpa-slate) !important;
  background: rgba(108,119,141,.03) !important;
  border: none !important;
  border-left: 3px solid var(--tpa-slate) !important;
}
#dms-page .tpa-compare-cell.tpa-compare-after,
#dms-page .tpa-compare-row:nth-child(even) .tpa-compare-cell.tpa-compare-after {
  color: var(--tpa-navy) !important;
  font-weight: 500 !important;
  background: #fff !important;
  border: none !important;
  border-left: 3px solid var(--tpa-blue) !important;
}
/* No ✕ / ✓ marks and no inset bars — the rounded left border carries the meaning */
#dms-page .tpa-compare-cell::before,
#dms-page .tpa-compare-cell.tpa-compare-before::before,
#dms-page .tpa-compare-cell.tpa-compare-after::before { content: none !important; display: none !important; }

/* Dark dashboard CTA → navy with cyan accents (Figma "Background" #1d335e) */
#dms-page .tpa-cambios-cta { background: var(--tpa-navy) !important; border-radius:20px !important; }
#dms-page .tpa-cambios-btn {
  background: var(--tpa-grad-btn) !important; color:#fff !important; border:none !important;
  border-radius:12px !important; font-family:var(--tpa-font-head) !important; font-weight:700 !important;
  box-shadow:0 4px 14px rgba(0,97,255,.30) !important;
}
#dms-page .tpa-cambios-btn:hover { background: var(--tpa-grad-btn-hover) !important; color:#fff !important; }
#dms-page .tpa-cambios-cta-sub   { font-family: var(--tpa-font-label) !important; color: var(--tpa-cyan) !important; }
#dms-page .tpa-dash-panel2-hd    { color: var(--tpa-navy) !important; font-family:var(--tpa-font-head) !important; }
#dms-page .tpa-dash-help2 {
  isolation: isolate !important;
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 30px !important;
  height: 30px !important;
  flex-shrink: 0 !important;
  border-radius: 10px !important;
  font-family: var(--tpa-font-head) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  background: linear-gradient(90deg, #0061ff 0%, #49fdfe 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
#dms-page .tpa-dash-help2::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: rgba(73,253,254,.08) !important;
  border: 1.5px solid rgba(73,253,254,.55) !important;
  border-radius: 10px !important;
  z-index: -1 !important;
}

/* =====================================================================
   10. FAQ  (navy questions, blue "+" )
   ===================================================================== */
#dms-page .tpa-faq-wrap   { border:1px solid var(--tpa-line) !important; }
#dms-page .tpa-faq-item   { border-bottom-color: var(--tpa-line) !important; }
#dms-page .tpa-faq-q      { font-family: var(--tpa-font-head) !important; color: var(--tpa-navy) !important; }
#dms-page .tpa-faq-q::after {
  content: "+" !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  flex-shrink: 0 !important;
  border-radius: 10px !important;
  background: rgba(73,253,254,.06) !important;
  border: 1.5px solid rgba(73,253,254,.45) !important;
  color: var(--tpa-blue) !important;
  font-size: 20px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  margin-left: 16px !important;
}
#dms-page .tpa-faq-item[open] > .tpa-faq-q { background:#f2f7ff !important; color: var(--tpa-blue) !important; }
#dms-page .tpa-faq-a       { background:#f7faff !important; }
#dms-page .tpa-faq-a p,
#dms-page .tpa-faq-a li    { font-family: var(--tpa-font-head) !important; }
#dms-page .tpa-faq-a strong{ color: var(--tpa-navy) !important; }
#dms-page .tpa-faq-chips span {
  color: var(--tpa-blue) !important; background:#e6f0ff !important; border:1px solid #cfe0ff !important;
  font-family: var(--tpa-font-label) !important;
  font-weight: 400 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
}

/* =====================================================================
   11. FINAL CTA + FOOTER
   ===================================================================== */
/* Same look as .tpa-hero-card */
#dms-page .tpa-cta-final-wrap {
  border-radius: 24px !important;
  background:
    radial-gradient(120% 80% at 12% 0%, rgba(249,156,57,.12) 0%, rgba(249,156,57,0) 55%),
    radial-gradient(120% 90% at 92% 100%, rgba(0,97,255,.10) 0%, rgba(0,97,255,0) 55%),
    #ffffff !important;
  box-shadow:
    0 2px 8px rgba(108,119,141,.05),
    0 20px 30px rgba(73,253,254,.22),
    0 4px 6px -2px rgba(0,97,255,.18) !important;
  border: 1px solid var(--tpa-line) !important;
  padding: 56px 48px !important;
}
#dms-page .tpa-cta-final-title { color: var(--tpa-navy) !important; }
#dms-page .tpa-cta-final-sub { font-family: var(--tpa-font-head) !important; color: var(--tpa-gray) !important; }
#dms-page .tpa-cta-final-trust {
  display: inline-flex !important;
  align-items: center !important;
  gap: 9px !important;
  margin: 0 auto !important;
  font-family: var(--tpa-font-label) !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  letter-spacing: .01em !important;
  color: var(--tpa-navy) !important;
  background: #fff !important;
  border: 1px solid var(--tpa-line) !important;
  border-radius: 100px !important;
  padding: 9px 18px !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.10) !important;
}

#dms-page .dms-footer-text,
#dms-page .dms-footer-text * { font-family: var(--tpa-font-head) !important; }
#dms-page .dms-footer-bottom .dms-footer-text {
  display: inline !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
}
#dms-page .dms-footer-left .dms-footer-text { color: var(--tpa-navy) !important; }
#dms-page .dms-footer.dms-site-footer {
  background: #f5f6f8 !important;
  border: 1px solid var(--tpa-line-strong) !important;
  border-radius: 16px !important;
  margin-left: 20px !important;
  margin-right: 20px !important;
}
#dms-page .tpa-footer-link:hover { color: var(--tpa-blue) !important; }
#dms-page .dms-footer-bottom {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  border-top: 1px solid var(--tpa-line-strong) !important;
  padding-top: 16px !important;
  margin-top: 16px !important;
}
#dms-page .tpa-footer-sep {
  color: var(--tpa-slate) !important;
  opacity: 0.4 !important;
  font-size: 12px !important;
  line-height: 1 !important;
  user-select: none !important;
}

/* =====================================================================
   12. BENEFICIOS SECTION BACKGROUND (azul clarito)
   ===================================================================== */
#dms-page .tpa-beneficios-section { background-color: #eef4ff !important; }

/* =====================================================================
   13. RESPONSIVE MÓVIL — overrides que deben ganar a las reglas base
       (este archivo carga después de landing.css, por eso aquí).
   ===================================================================== */
@media (max-width: 768px) {

  /* --- Microcopy "Sin necesidad de tarjeta • Configuración..." ---
     En ES/FR el texto es más largo y se cortaba. Lo convertimos en una
     fila flexible: icono fijo + texto que envuelve en varias líneas. */
  #dms-page .tpa-card-microcopy,
  #dms-page .tpa-cta-final-trust {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    text-align: left !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
    padding: 10px 14px !important;
    border-radius: 16px !important;
  }
  #dms-page .tpa-card-microcopy .tpa-microcopy-icon,
  #dms-page .tpa-cta-final-trust .tpa-microcopy-icon {
    flex: 0 0 auto !important;
    margin-top: 1px !important;
  }
  #dms-page .tpa-card-microcopy span,
  #dms-page .tpa-cta-final-trust span {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  /* --- Tabla "Qué cambia" ---
     En móvil dejamos de mostrar 2 columnas (se cortaba). Apilamos:
     primero todo "Sin visibilidad real" y debajo todo "Con TPA". */
  #dms-page .tpa-compare-wrap {
    display: flex !important;
    flex-direction: column !important;
    padding: 16px !important;
  }
  #dms-page .tpa-compare-header-row,
  #dms-page .tpa-compare-row {
    display: contents !important;
  }
  #dms-page .tpa-compare-head,
  #dms-page .tpa-compare-cell {
    width: 100% !important;
    box-sizing: border-box !important;
  }
  #dms-page .tpa-compare-before { order: 1 !important; }
  #dms-page .tpa-compare-after  { order: 2 !important; }
  /* Separación visual entre el grupo "Sin visibilidad real" y "Con TPA" */
  #dms-page .tpa-compare-head.tpa-compare-after { margin-top: 22px !important; }
  #dms-page .tpa-compare-head {
    font-size: 22px !important;
    margin-bottom: 4px !important;
  }
  #dms-page .tpa-compare-cell {
    font-size: 16px !important;
    padding: 14px 16px !important;
    margin-bottom: 8px !important;
    text-align: left !important;
    justify-content: flex-start !important;
  }
}

/* =====================================================================
   14. AJUSTES SOLO MÓVIL — ES/FR (texto más largo que en español base)
       Estas reglas SOLO aplican en móvil; en escritorio se mantiene
       el tamaño normal.
   ===================================================================== */
@media (max-width: 768px) {

  /* Botones CTA en francés (hero "Voir comment ça marche" + CTA final)
     más pequeños solo en móvil. */
  #dms-page.tpa-lang-fr .tpa-card-buttons .dms-button,
  #dms-page.tpa-lang-fr .tpa-card-buttons .tpa-btn-outline,
  #dms-page.tpa-lang-fr .tpa-cta-final-btns .dms-button,
  #dms-page.tpa-lang-fr .tpa-cta-final-btns .tpa-btn-outline {
    font-size: 14px !important;
    padding: 11px 18px !important;
    white-space: normal !important;
  }

  /* FAQ chips: "Blocages organisationnels" (FR) y "Bloqueos organizacionales"
     (ES) se recortaban por ser más largos. Reducimos tamaño y letter-spacing
     y permitimos que el texto fluya. Solo en móvil. */
  #dms-page.tpa-lang-fr .tpa-faq-chips span,
  #dms-page.tpa-lang-es .tpa-faq-chips span {
    font-size: 11px !important;
    letter-spacing: 0.04em !important;
    white-space: normal !important;
    padding: 4px 12px !important;
  }
}

/* =====================================================
   MOBILE: alinear a la izquierda apartados concretos
   (por defecto van centrados via .dms-section-element /
    .tpa-hero-card). Usamos #dms-page para superar la
   especificidad de las reglas con !important del tema.
   ===================================================== */
@media (max-width: 600px) {
  /* 1. Subtitulo hero */
  #dms-page .tpa-header .dms-subtitle,
  #dms-page .tpa-header .dms-subtitle *,
  /* 4. Subtitulo bloque problema */
  #dms-page .tpa-problema .dms-subtitle,
  #dms-page .tpa-problema .dms-subtitle *,
  /* 6. Subtitulo + intro beneficios */
  #dms-page .tpa-beneficios-section .dms-subtitle,
  #dms-page .tpa-beneficios-section .dms-subtitle *,
  #dms-page .tpa-benefits-intro,
  /* 7. Subtitulo 'Que cambia' */
  #dms-page .tpa-que-cambia-section .dms-subtitle,
  #dms-page .tpa-que-cambia-section .dms-subtitle *,
  /* 8. Subtitulo 'Para quien' + tarjetas perfil */
  #dms-page .casos-de-uso .dms-subtitle,
  #dms-page .casos-de-uso .dms-subtitle *,
  #dms-page .tpa-perfil-title,
  #dms-page .tpa-perfil-desc {
    text-align: left !important;
  }

  /* 2. Cuerpo tarjeta hero → izquierda */
  #dms-page .tpa-hero-card .tpa-card-body {
    text-align: left !important;
    align-self: stretch !important;
    width: 100% !important;
  }

  /* 3. Tagline tarjeta hero → centrado */
  #dms-page .tpa-hero-card .tpa-card-tagline {
    text-align: center !important;
    align-self: stretch !important;
    width: 100% !important;
  }

  /* 5. Titulo 'De la evaluacion a la accion...' → centrado */
  #dms-page .como-funciona .dms-title,
  #dms-page .como-funciona .dms-title h2 {
    text-align: center !important;
  }

  /* 8. Tarjetas perfil: contenido (icono incluido) a la izquierda */
  #dms-page .tpa-perfil-card {
    text-align: left !important;
    align-items: flex-start !important;
  }

  /* Lista "TPA te ayuda a entender" → izquierda solo en móvil */
  #dms-page .tpa-entender-box {
    align-items: flex-start !important;
  }
  #dms-page .tpa-entender-list {
    width: 100% !important;
  }
  #dms-page .tpa-entender-list li {
    text-align: left !important;
  }
}

/* =====================================================
   MOVIL: igualar pildora del hero con la del CTA final
   + igualar tamano de botones (outline no mas grande que
   el primario) en las dos secciones. Solo en movil.
   ===================================================== */
@media (max-width: 768px) {
  /* Pildora "Sin necesidad de tarjeta..." del hero al MISMO tamano
     que la del CTA final ("Empieza a liderar con visibilidad real"). */
  #dms-page .tpa-card-microcopy,
  #dms-page .tpa-card-microcopy span,
  #dms-page .tpa-cta-final-trust,
  #dms-page .tpa-cta-final-trust span {
    font-size: 13px !important;
    line-height: 1.45 !important;
  }

  /* Botones CTA (hero y final): primario y outline EXACTAMENTE igual.
     width:100% para que al apilarse en movil ambos ocupen el mismo ancho. */
  #dms-page .tpa-card-buttons .dms-button,
  #dms-page .tpa-card-buttons .tpa-btn-outline,
  #dms-page .tpa-cta-final-btns .dms-button,
  #dms-page .tpa-cta-final-btns .tpa-btn-outline {
    font-size: 15px !important;
    padding: 13px 22px !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
  }
  #dms-page .tpa-card-buttons,
  #dms-page .tpa-cta-final-btns {
    flex-direction: column !important;
  }
}

/* =====================================================
   MÓVIL GLOBAL: reducción de fuentes en ≤600px
   Los clamp() de los h1/h2 tienen mínimos de 36/28px
   que se ven demasiado grandes en pantallas pequeñas.
   ===================================================== */
@media (max-width: 600px) {
  /* Títulos principales */
  .dms-title h1 { font-size: 22px !important; line-height: 1.15 !important; }
  .dms-title h2 { font-size: 18px !important; line-height: 1.2 !important; }

  /* Subtítulos de sección */
  body.tpa-landing-page .dms-template-inicio .dms-section-element .dms-subtitle,
  body.tpa-landing-page .dms-template-inicio .dms-section-element .dms-subtitle * {
    font-size: 14px !important;
  }

  /* Hero card */
  .tpa-card-headline { font-size: 15px !important; }
  .tpa-card-body     { font-size: 11px !important; }
  .tpa-card-tagline,
  #dms-page .tpa-card-tagline,
  #dms-page .tpa-hero-card .tpa-card-tagline { font-size: 14px !important; text-align: center !important; }

  /* FAQ chips: "Bloqueos organizacionales" no se estira → ajuste al contenido */
  #dms-page .tpa-faq-chips span,
  .tpa-faq-chips span {
    width: fit-content !important;
    max-width: 100% !important;
    white-space: normal !important;
    text-align: center !important;
  }

  /* Caja "TPA te ayuda a entender" */
  #dms-page .tpa-entender-title { font-size: 17px !important; }
  #dms-page .tpa-entender-list li { font-size: 13px !important; }
  #dms-page .tpa-entender-check {
    width: 24px !important; height: 24px !important;
  }
  #dms-page .tpa-entender-check svg { width: 13px !important; height: 13px !important; }

  /* FAQ */
  .tpa-faq-q { font-size: 13px !important; padding: 14px 16px !important; }
  .tpa-faq-q::after { font-size: 18px !important; }

  /* Botones */
  #dms-page .tpa-card-buttons .dms-button,
  #dms-page .tpa-card-buttons .tpa-btn-outline,
  #dms-page .tpa-cta-final-btns .dms-button,
  #dms-page .tpa-cta-final-btns .tpa-btn-outline {
    font-size: 13px !important;
    padding: 11px 18px !important;
  }

  /* Tabla comparativa (#dms-page) */
  #dms-page .tpa-compare-cell { font-size: 13px !important; padding: 10px 12px !important; }

  /* Outcomes / benefits */
  #dms-page .tpa-outcome-title { font-size: 16px !important; }
  #dms-page .tpa-outcome-desc  { font-size: 13px !important; }
  .tpa-benefit-title            { font-size: 13px !important; }
  .tpa-outcome-title            { font-size: 15px !important; }

  /* CTA final */
  .tpa-cta-final-title { font-size: 20px !important; }
  .tpa-cta-final-sub   { font-size: 13px !important; }
}

/* =====================================================
   Microcopy "Sin necesidad de tarjeta" — pantalla
   normal y portátil. Usa body.tpa-landing-page porque
   #dms-page no existe en este template.
   ===================================================== */
/* Microcopy hero: reducir solo el font-size.
   Doble selector para cubrir shortcode (#dms-page) y page-template (body.tpa-landing-page). */
#dms-page .tpa-card-microcopy,
body.tpa-landing-page .tpa-card-microcopy {
  font-size: 13px !important;
}

/* =====================================================================
   LAPTOP (861px–1600px) + MÓVIL (≤860px):
   icono + título en la misma fila — override sobre reglas flex base
   ===================================================================== */
@media (max-width: 1600px) and (min-width: 861px) {
  /* El card pasa a grid interno aunque el row externo sea flex */
  #dms-page .tpa-step-card {
    display: grid !important;
    grid-template-columns: auto 1fr !important;
    column-gap: 12px !important;
    row-gap: 8px !important;
    flex: 0 0 calc(50% - 8px) !important;
  }
}

@media (max-width: 860px) {
  /* En móvil la regla base pone display:flex — la revertimos a grid */
  #dms-page .tpa-step-card {
    display: grid !important;
  }

  /* Títulos de los paneles del dashboard — más pequeños en móvil */
  .tpa-dash-panel2-hd,
  .tpa-dash-panel2-hd span,
  #dms-page .tpa-dash-panel2-hd,
  #dms-page .tpa-dash-panel2-hd span {
    font-size: 16px !important;
  }
}

/* =====================================================================
   ALINEACIÓN DE LAS IMÁGENES DE "CÓMO FUNCIONA" (≥861px)
   Cada tarjeta ocupa 6 filas del grid del row (subgrid):
   1 número · 2 icono+título · 3 texto · 4 lista · 5 imagen · 6 checks.
   La imagen de cada paso se centra (horizontal y vertical) en el espacio que
   tiene libre: Adapta y Evoluciona en su fila de imagen (misma línea central,
   bajo su lista); Evalúa/Detecta, sin lista, en el hueco bajo el texto (en 4
   columnas, también en esa fila, para compartir línea central). Con
   .tpa-step-visual en display:contents sus hijos pasan a ser celdas de la
   tarjeta. En ≤860px (apilado) cada tarjeta ya mide lo que su contenido.
   ===================================================================== */
@media (min-width: 861px) {
  #dms-page .tpa-steps-el .tpa-steps-row {
    display: grid !important;
    grid-template-rows: auto auto auto auto auto 1fr !important;
  }
  #dms-page .tpa-step-card {
    display: grid !important;
    grid-template-rows: subgrid !important;
    grid-row: span 6 !important;
  }
  #dms-page .tpa-step-connector {
    grid-row: span 6 !important;
  }
  #dms-page .tpa-step-visual {
    display: contents !important;
  }
  #dms-page .tpa-step-visual > .tpa-step-list {
    grid-column: 1 / -1 !important;
    grid-row: 4 !important;
  }
  #dms-page .tpa-step-visual > img.tpa-step-img,
  #dms-page .tpa-step-visual > .tpa-gaps {
    grid-column: 1 / -1 !important;
    grid-row: 5 !important;
    align-self: center !important;
    justify-self: center !important;
  }
  /* Evalúa / Detecta (sin lista): centrada en todo el espacio bajo el texto */
  #dms-page .tpa-step-visual--imgonly > img.tpa-step-img,
  #dms-page .tpa-step-visual--imgonly > .tpa-gaps {
    grid-row: 4 / 7 !important;
  }
  /* Sin caja fija de alto: el borde superior de la imagen es el de la fila */
  #dms-page .tpa-step-visual > img.tpa-step-img {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 250px !important;
    margin: 0 !important;
  }
  #dms-page .tpa-step-visual > img.tpa-step-img.tpa-step-img--tpi {
    max-width: 80% !important;
    max-height: 260px !important;
  }
  #dms-page .tpa-step-visual > img.tpa-step-img.tpa-step-img--evol {
    width: 100% !important;
    max-width: 420px !important;
    max-height: none !important;
  }
  /* Telaraña: más alta que el tope genérico de 250px (cabe de sobra en 2×2) */
  #dms-page .tpa-step-visual > img.tpa-step-img.tpa-step-img--radar {
    max-width: 100% !important;
    max-height: 370px !important;
  }
  #dms-page .tpa-step-visual > .tpa-check-list--visual {
    grid-column: 1 / -1 !important;
    grid-row: 6 !important;
  }
}

/* 4 columnas: las 4 imágenes se centran en la misma fila (5), así comparten
   línea central. (En 2×2 Evalúa/Detecta no tienen filas 4-5 propias y se
   centran en el hueco completo.) */
@media (min-width: 1601px) {
  #dms-page .tpa-step-visual--imgonly > img.tpa-step-img,
  #dms-page .tpa-step-visual--imgonly > .tpa-gaps {
    grid-row: 5 !important;
  }
  /* Tarjeta estrecha: la telaraña (fondo transparente) usa también el padding
     lateral de la tarjeta para que las etiquetas salgan más grandes. */
  #dms-page .tpa-step-visual > img.tpa-step-img.tpa-step-img--radar {
    max-width: calc(100% + 20px) !important;
    margin: 0 -10px !important;
  }
}

/* Laptop: rejilla 2×2 (dos bloques de 6 filas) en vez de flex-wrap */
@media (min-width: 861px) and (max-width: 1600px) {
  #dms-page .tpa-steps-el .tpa-steps-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-rows: repeat(2, auto auto auto auto auto 1fr) !important;
    column-gap: 16px !important;
    row-gap: 6px !important;
  }
  #dms-page .tpa-steps-row > .tpa-step-card:nth-child(n+5) {
    margin-top: 10px !important;
  }
  #dms-page .tpa-step-visual > img.tpa-step-img.tpa-step-img--tpi {
    max-height: 230px !important;
  }
}

/* Títulos de paso: una palabra larga ("dysfonctionnements", 26px) ensanchaba la
   columna del grid de la tarjeta y descentraba el contenido; que pueda partirse. */
#dms-page .tpa-step-title {
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
  hyphens: auto !important;
}