/* EviMedic · bloques del home sincronizados con master.
   Hoja aislada para no contaminar los componentes históricos de develop-v2. */
:root {
  --color-primary: var(--brand);
  --color-secondary: var(--brand-soft);
  --color-accent: var(--green);
  --color-text: var(--text);
  --color-text-secondary: var(--text-soft);
  --color-text-muted: var(--text-muted);
  --color-text-light: var(--text-muted);
  --color-border-light: var(--line);
  --color-surface: var(--surface-alt);
  --section-padding: 96px;
}

/* Especialidades completas de master -------------------------------------- */
.specialtiesNew--master .sectionLead__mob {
  display: none;
}

.specialtiesNew--master .specNewCard {
  min-height: 560px;
}

.specialtiesNew--master .specNewCard p {
  flex: 0 0 auto;
  margin: 0;
}

.specialtiesNew--master .specialty-card__checks {
  display: grid;
  gap: 13px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.specialtiesNew--master .specialty-card__checks li {
  position: relative;
  padding-left: 34px;
  color: #102b46;
  font-size: 0.94rem;
  line-height: 1.35;
}

.specialtiesNew--master .specialty-card__checks li::before {
  content: "✓";
  position: absolute;
  top: -1px;
  left: 0;
  display: inline-flex;
  width: 22px;
  height: 22px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--brand-soft, #36848b);
  color: #fff;
  font-size: 13px;
  font-weight: 900;
}

.specialtiesNew--master .specNewCardHollow h3 {
  color: #fff;
}

/* Recupera el marco fino del visual usado en la composicion real de master. */
.specialtiesNew--master .specNewVisualDental,
.specialtiesNew--master .specNewVisualAesthetic,
.specialtiesNew--master .specNewVisualPhysio {
  border: 1px solid rgba(0, 61, 79, 0.2);
}

.specialties-typewriter {
  width: min(920px, 100%);
  min-height: 78px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 26px;
  margin: 32px auto 0;
  padding: 18px 28px;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.specialties-typewriter__icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(89, 198, 188, 0.32);
  border-radius: 14px;
  color: rgba(89, 198, 188, 0.9);
  font-size: 34px;
}

.specialties-typewriter p {
  max-width: 720px;
  margin: 0;
  color: #fff;
  font-size: 17px;
  line-height: 1.55;
}

.specialties-typewriter.is-typing p {
  border-right: 2px solid rgba(89, 198, 188, 0.9);
  animation: specialties-caret 850ms step-end infinite;
}

.specialties-typewriter__icons {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-left: 24px;
  border-left: 1px solid rgba(255, 255, 255, 0.24);
  color: rgba(89, 198, 188, 0.86);
  font-size: 26px;
}

@keyframes specialties-caret {
  50% { border-color: transparent; }
}

@media (max-width: 1024px) {
  .specialtiesNew--master .specNewCard {
    min-height: 500px;
  }
}

@media (max-width: 720px) {
  .specialtiesNew--master .sectionLead__full {
    display: none;
  }

  .specialtiesNew--master .sectionLead__mob {
    display: inline;
  }

  /* Ventana editorial: la card no ocupa todo el viewport y deja ver la
     siguiente. El ancho fluido conserva la proporcion tambien en 700px. */
  .specialtiesNew--master .specCarousel .specNewCard {
    flex: 0 0 clamp(280px, 78vw, 560px);
    min-height: 0;
  }

  .specialtiesNew--master .specCarousel .specNewVisual {
    height: clamp(150px, 25vw, 180px);
    flex: 0 0 auto;
  }

  /* En un carrusel horizontal todas las cards forman parte del contexto
     visible. El reveal global solo alcanzaba a la card centrada y dejaba las
     siguientes transparentes hasta que entraban en el viewport. */
  .specialtiesNew--master .specCarousel .specNewCard.revealOnScroll {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition-delay: 0s !important;
  }

  .specialties-typewriter {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 20px;
  }

  .specialties-typewriter.is-typing p {
    border-right: 0;
    animation: none;
    white-space: pre-line;
  }

  .specialties-typewriter p {
    white-space: pre-line;
  }

  .specialties-typewriter__icons {
    justify-content: space-between;
    padding-top: 16px;
    padding-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.24);
    border-left: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .specialties-typewriter.is-typing p {
    border-right: 0;
    animation: none;
  }
}
.section-title {
  font-family: var(--font-heading);
  color: var(--brand);
  font-size: clamp(2.1rem, 4vw, 3.65rem);
  line-height: 1.08;
  font-weight: 800;
  text-wrap: balance;
}
.section-subtitle {
  color: var(--text-soft);
  font-size: 1.05rem;
  line-height: 1.68;
}
.animate-on-scroll { opacity: 1; transform: none; }
.clinic-flow__badge,
.capabilities__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: fit-content;
  margin: 0 auto 12px;
  color: var(--brand);
  font: 700 .86rem/1 var(--font-heading);
}
.clinic-flow__badge::before,
.clinic-flow__badge::after,
.capabilities__badge::before,
.capabilities__badge::after {
  content: "";
  width: 74px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--brand));
}
.clinic-flow__badge::after,
.capabilities__badge::after {
  background: linear-gradient(90deg, var(--brand), transparent);
}
.capabilities__badge-mobile { display: none; }
.mobile-copy-only { display: none; }
[data-feature-panel="facturacion"] .capability-panel__billing-title .mobile-copy-only { display: none; }
.capPanelTab { display: none; }

/* Navegación lateral de las pestañas: permanece oculta cuando la barra cabe
   completa y solo aparece, integrada en los extremos, si existe scroll real. */
.capabilities-system .tabsNavWrap {
  position: relative;
}

.capabilities-system .tabsEdge {
  display: none;
}

@media (max-width: 768px) {
  .capabilities-system .tabsEdge {
    display: none;
    position: absolute;
    top: 50%;
    bottom: auto;
    width: 38px;
    height: 38px;
    border: 0;
    padding: 0;
    z-index: 5;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    color: var(--brand);
    transform: translateY(-50%);
    touch-action: manipulation;
  }

  .capabilities-system .tabsEdge--left {
    left: 3px;
    border-radius: 12px;
    background: linear-gradient(to right, #fff 62%, rgba(255, 255, 255, .82));
  }

  .capabilities-system .tabsEdge--right {
    right: 3px;
    border-radius: 12px;
    background: linear-gradient(to left, #fff 62%, rgba(255, 255, 255, .82));
  }

  .capabilities-system .tabsNavWrap.canScrollLeft .tabsEdge--left,
  .capabilities-system .tabsNavWrap.canScrollRight .tabsEdge--right {
    display: inline-flex;
  }
}

.clinic-flow {
    padding: 96px 0;
    background: transparent;
    border: 0;
    overflow: hidden;
    scroll-margin-top: 88px;
}

.clinic-flow__layout {
    display: grid;
    grid-template-columns: minmax(0, 0.72fr) minmax(520px, 1.28fr);
    gap: 58px;
    align-items: center;
}

.clinic-flow__copy {
    max-width: 470px;
}

.clinic-flow__copy .section-title {
    margin-bottom: 20px;
    text-align: left;
}

.clinic-flow__copy p {
    font-size: 15px;
    line-height: 1.75;
    color: var(--color-text-secondary);
    margin-bottom: 16px;
}

.clinic-orbit {
    position: relative;
    min-height: 430px;
}

.clinic-orbit__ring {
    position: absolute;
    left: 50%;
    top: 50%;
    border-radius: 50%;
    border: 1px solid rgba(54, 132, 139, 0.16);
    transform: translate(-50%, -50%);
}

.clinic-orbit__ring--outer {
    width: 420px;
    height: 300px;
}

.clinic-orbit__ring--inner {
    width: 280px;
    height: 204px;
    border-style: dashed;
}

.clinic-orbit__center {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 138px;
    height: 154px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 34px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(212, 224, 225, 0.95);
    box-shadow: 0 20px 48px rgba(0, 61, 79, 0.08);
    transform: translate(-50%, -50%);
    z-index: 3;
}

.clinic-orbit__avatar {
    width: 74px;
    height: 74px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-size: 30px;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
}

.clinic-orbit__center strong {
    font-family: var(--font-heading);
    font-size: 15px;
    color: var(--color-primary);
}

.clinic-orbit__node {
    position: absolute;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 164px;
    padding: 14px 18px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(212, 224, 225, 0.95);
    box-shadow: 0 12px 28px rgba(0, 61, 79, 0.06);
    color: var(--color-primary);
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
}

.clinic-orbit__icon {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--color-secondary);
    background: rgba(54, 132, 139, 0.1);
    flex: 0 0 34px;
}

.clinic-orbit__node--agenda {
    left: 50%;
    top: 8px;
    transform: translateX(-50%);
}

.clinic-orbit__node--history {
    right: 0;
    top: 104px;
}

.clinic-orbit__node--treatments {
    right: 18px;
    bottom: 96px;
}

.clinic-orbit__node--consents {
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
}

.clinic-orbit__node--billing {
    left: 18px;
    bottom: 96px;
}

.clinic-orbit__node--stats {
    left: 0;
    top: 104px;
}


/* Premium connected capabilities tabs */
.capabilities--system {
    padding: 108px 0 40px;
    margin-bottom: 0;
    background: transparent;
    overflow: hidden;
}

.capabilities-system__header {
    max-width: 930px;
    margin: 0 auto 42px;
    text-align: center;
}

.capabilities-system__header .section-title {
    max-width: 820px;
    margin: 16px auto 18px;
    font-size: clamp(40px, 5vw, 64px);
    line-height: 1.06;
}

.capabilities-system__header .section-subtitle {
    max-width: 820px;
    margin: 0 auto;
}

.capabilities-system {
    position: relative;
    max-width: 1180px;
    margin: 0 auto;
}

.capabilities-tabs {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 8px;
    margin: 0 auto 28px;
    width: fit-content;
    max-width: 100%;
    overflow-x: auto;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.74);
    border: 1px solid rgba(212, 224, 225, 0.9);
    box-shadow: 0 16px 40px rgba(0, 61, 79, 0.06);
    scrollbar-width: none;
}

.capabilities-tabs::-webkit-scrollbar {
    display: none;
}

.capabilities-tab {
    flex: 0 0 auto;
    border: 1px solid rgba(212, 224, 225, 0.96);
    border-radius: 999px;
    padding: 12px 18px;
    background: #fff;
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0;
    cursor: pointer;
    transition:
        color var(--transition-fast),
        background var(--transition-fast),
        border-color var(--transition-fast),
        transform var(--transition-fast),
        box-shadow var(--transition-fast);
}

.capabilities-tab:hover {
    transform: translateY(-1px);
    border-color: rgba(54, 132, 139, 0.24);
    box-shadow: 0 10px 22px rgba(0, 61, 79, 0.07);
}

.capabilities-tab.active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
    box-shadow: 0 16px 30px rgba(0, 85, 109, 0.18);
}

.capabilities-panels {
    position: relative;
    min-height: var(--capabilities-panel-height, 640px);
    border-radius: 30px;
    background:
        radial-gradient(circle at 76% 18%, rgba(89, 198, 188, 0.12) 0%, rgba(89, 198, 188, 0) 34%),
        rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(212, 224, 225, 0.92);
    box-shadow: 0 28px 80px rgba(0, 61, 79, 0.08);
    overflow: hidden;
}

.capabilities-panels::before {
    content: "";
    position: absolute;
    inset: 28px;
    border-radius: 24px;
    border: 1px dashed rgba(54, 132, 139, 0.12);
    pointer-events: none;
}

.capability-panel {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: minmax(0, 0.45fr) minmax(0, 0.55fr);
    gap: 30px;
    align-items: center;
    padding: 54px;
    opacity: 0;
    pointer-events: none;
    transform: translateY(14px) scale(0.985);
    transition:
        opacity 360ms ease,
        transform 360ms ease;
}

.capability-panel.active {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

.capability-panel__copy {
    position: relative;
    z-index: 2;
}

.capability-panel__number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 46px;
    height: 34px;
    padding: 0 12px;
    margin-bottom: 22px;
    border-radius: 999px;
    background: rgba(54, 132, 139, 0.1);
    color: var(--color-secondary);
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 800;
}

.capability-panel h3 {
    max-width: 500px;
    margin-bottom: 18px;
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-size: clamp(30px, 3.7vw, 46px);
    line-height: 1.08;
    letter-spacing: 0;
}

.capability-panel p {
    max-width: 520px;
    margin-bottom: 24px;
    color: var(--color-text-secondary);
    font-size: 16px;
    line-height: 1.76;
}

.capability-panel ul {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.capability-panel li {
    position: relative;
    padding-left: 25px;
    color: var(--color-text);
    font-size: 14px;
    line-height: 1.45;
}

.capability-panel li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
    box-shadow: 0 0 0 5px rgba(89, 198, 188, 0.12);
}

.capability-panel__visual {
    position: relative;
    z-index: 2;
}

.software-mock {
    min-height: 520px;
    padding: 18px;
    border-radius: 28px;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.94) 0%, rgba(248,250,250,0.94) 100%);
    border: 1px solid rgba(212, 224, 225, 0.96);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        0 26px 60px rgba(0, 61, 79, 0.12);
    overflow: hidden;
}

.software-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 16px;
    padding: 12px 14px;
    border-radius: 18px;
    background: #fff;
    border: 1px solid rgba(212, 224, 225, 0.82);
}

.software-topbar span,
.software-topbar strong,
.software-topbar em {
    font-family: var(--font-heading);
    font-size: 12px;
    font-style: normal;
    font-weight: 800;
}

.software-topbar span {
    color: var(--color-text-secondary);
}

.software-topbar strong {
    color: var(--color-primary);
}

.software-topbar em {
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(54, 132, 139, 0.1);
    color: var(--color-secondary);
}

.agenda-mock {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 190px;
    gap: 14px;
    min-height: 440px;
}

.agenda-mock__grid {
    display: grid;
    grid-template-columns: 52px repeat(3, minmax(0, 1fr));
    grid-auto-rows: 112px;
    gap: 8px;
    padding: 14px;
    border-radius: 22px;
    background:
        linear-gradient(rgba(212,224,225,0.44) 1px, transparent 1px),
        linear-gradient(90deg, rgba(212,224,225,0.44) 1px, transparent 1px),
        #fbfdfd;
    background-size: 100% 40px, 96px 100%, auto;
    border: 1px solid rgba(212, 224, 225, 0.74);
}

.agenda-mock__grid > span:not(.appointment) {
    color: var(--color-text-light);
    font-size: 11px;
    font-weight: 700;
}

.appointment {
    display: block;
    padding: 12px;
    border-radius: 16px;
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 800;
    box-shadow: 0 10px 18px rgba(0, 61, 79, 0.05);
}

.appointment small {
    display: block;
    margin-top: 6px;
    color: var(--color-text-secondary);
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 600;
}

.appointment--mint { background: rgba(89, 198, 188, 0.22); }
.appointment--blue { background: rgba(54, 132, 139, 0.16); }
.appointment--cream { background: rgba(245, 233, 198, 0.7); }
.appointment--rose { background: rgba(236, 206, 211, 0.55); }

.agenda-patient {
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 16px;
    border-radius: 22px;
    background: #fff;
    border: 1px solid rgba(212, 224, 225, 0.84);
    box-shadow: 0 16px 36px rgba(0, 61, 79, 0.07);
}

.agenda-patient__avatar,
.patient-avatar {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    color: #fff;
    font-family: var(--font-heading);
    font-weight: 800;
}

.agenda-patient strong,
.patient-mock strong,
.timeline-item strong,
.catalog-mock strong,
.invoice-row strong,
.dashboard-mock strong,
.portal-mock strong {
    color: var(--color-primary);
    font-family: var(--font-heading);
}

.agenda-patient span {
    color: var(--color-text-secondary);
    font-size: 12px;
}

.agenda-patient button {
    width: 100%;
    border: 1px solid rgba(54, 132, 139, 0.14);
    border-radius: 12px;
    padding: 9px 10px;
    background: rgba(248, 250, 250, 0.9);
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-size: 12px;
    font-weight: 800;
    text-align: left;
}

.patient-mock {
    display: grid;
    grid-template-columns: 190px 1fr;
    gap: 16px;
}

.patient-mock aside,
.patient-mock main > div,
.timeline-item,
.catalog-mock > div,
.invoice-row,
.dashboard-mock > div,
.portal-mock > div {
    border-radius: 18px;
    background: #fff;
    border: 1px solid rgba(212, 224, 225, 0.86);
    box-shadow: 0 12px 26px rgba(0, 61, 79, 0.05);
}

.patient-mock aside {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 420px;
    padding: 18px;
}

.patient-mock aside span,
.patient-mock p,
.timeline-item p,
.catalog-mock span,
.catalog-mock em,
.invoice-row span,
.invoice-row em,
.dashboard-mock span,
.portal-mock span {
    color: var(--color-text-secondary);
    font-size: 12px;
    font-style: normal;
}

.patient-mock main {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.patient-mock main > div {
    min-height: 132px;
    padding: 18px;
}

.timeline-mock,
.catalog-mock,
.invoice-mock,
.dashboard-mock,
.portal-mock {
    display: grid;
    gap: 14px;
}

.timeline-item {
    position: relative;
    padding: 18px 18px 18px 46px;
}

.timeline-item::before {
    content: "";
    position: absolute;
    left: 18px;
    top: 22px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--color-secondary);
    box-shadow: 0 0 0 6px rgba(54, 132, 139, 0.1);
}

.timeline-item.active {
    border-color: rgba(54, 132, 139, 0.28);
    background: rgba(236, 248, 247, 0.72);
}

.catalog-mock > div,
.invoice-row {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr 0.7fr;
    gap: 12px;
    align-items: center;
    padding: 18px;
}

.catalog-mock em,
.invoice-row span,
.verifactu-pill {
    display: inline-flex;
    width: fit-content;
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(54, 132, 139, 0.1);
    color: var(--color-secondary);
    font-weight: 800;
}

.invoice-row.paid span {
    background: rgba(89, 198, 188, 0.18);
}

.invoice-row.pending span {
    background: rgba(245, 233, 198, 0.7);
}

.verifactu-pill {
    margin-left: auto;
}

.dashboard-mock {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dashboard-mock > div {
    min-height: 120px;
    padding: 18px;
}

.dashboard-mock strong {
    display: block;
    font-size: 28px;
}

.chart-line {
    grid-column: 1 / -1;
    min-height: 210px;
    background:
        linear-gradient(135deg, transparent 42%, rgba(54, 132, 139, 0.28) 43%, rgba(54, 132, 139, 0.28) 47%, transparent 48%),
        linear-gradient(180deg, #fff, #f8fafa);
}

.portal-mock {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.portal-mock > div {
    min-height: 116px;
    padding: 18px;
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-weight: 800;
}

.portal-next {
    grid-column: 1 / -1;
    background: rgba(236, 248, 247, 0.72) !important;
}

@media (max-width: 980px) {
    .capabilities-panels {
        min-height: 0;
    }

    .capability-panel {
        position: relative;
        display: none;
        grid-template-columns: 1fr;
        padding: 30px;
    }

    .capability-panel.active {
        display: grid;
    }

    .software-mock {
        min-height: 0;
    }

    .agenda-mock,
    .patient-mock {
        grid-template-columns: 1fr;
    }

    .agenda-patient,
    .patient-mock aside {
        min-height: 0;
    }
}

@media (max-width: 640px) {
    .capabilities--system {
        padding: 84px 0 28px;
    }

    .capabilities-tabs {
        justify-content: flex-start;
        width: 100%;
        border-radius: 22px;
    }

    .capability-panel {
        padding: 22px;
    }

    .patient-mock main,
    .catalog-mock > div,
    .invoice-row,
    .dashboard-mock,
    .portal-mock {
        grid-template-columns: 1fr;
    }

    .agenda-mock__grid {
        grid-template-columns: 44px 1fr;
    }

    .agenda-mock__grid > span:nth-child(4n),
    .agenda-mock__grid > span:nth-child(4n+3) {
        display: none;
    }
}


/* === Paneles de funcionalidades (todas las pestañas): fuera el padding gordo
           de la card (54px) — era el hueco sobre el "04" y lo que hacía que la lista
           de Tratamientos se saliera por abajo. === */
        .capability-panel {
            padding: 14px 30px !important;
        }

        /* Fuera la línea discontinua decorativa que enmarcaba los paneles
           (quedaba cruzando el contenido con el padding nuevo). */
        .capabilities-panels::before {
            display: none !important;
        }

        /* El nuevo copy comercial es más completo: se amplía el lienzo en escritorio
           para conservar el texto íntegro sin cortar listas ni apretar los mockups. */
        @media (min-width: 981px) {
            .capabilities-system .capabilities-panels {
                /* La pestaña más extensa sigue cabiendo, pero evitamos reservar
                   casi una pantalla completa para todas las demás. */
                min-height: var(--capabilities-panel-height, 660px);
            }

            .capabilities-system .capability-panel {
                /* El copy conserva un inicio superior estable. */
                align-items: start;
            }

            .capabilities-system .capability-panel__visual {
                /* Los mockups más bajos se centran dentro de la altura común. */
                align-self: center;
            }

            .capabilities-system .capability-panel__copy p {
                margin-bottom: 14px;
                font-size: 15px;
                line-height: 1.58;
            }

            .capabilities-system .capability-panel__copy p + p {
                margin-top: -4px;
            }

            .capabilities-system .capability-panel__copy ul {
                gap: 7px;
            }
        }

        /* En el tramo estrecho de escritorio las columnas hacen envolver más
           texto. Conservamos algo de altura adicional sin volver a centrarlo. */
        @media (min-width: 981px) and (max-width: 1180px) {
            .capabilities-system .capabilities-panels {
                min-height: var(--capabilities-panel-height, 730px);
            }
        }

        /* Números de panel (01-08): SIN pill (número plano y discreto) y anclados
           a la esquina superior izquierda de la card, sin mezclarse con el título. */
        .capability-panel__number {
            position: absolute !important;
            top: 18px;
            left: 26px;
            margin: 0 !important;
            min-width: 0 !important;
            height: auto !important;
            padding: 0 !important;
            border-radius: 0 !important;
            background: transparent !important;
            color: rgba(0, 85, 109, 0.42);
            font-size: 16px;
        }

        /* El contenido despeja la zona del número (también en los paneles altos). */
        .capability-panel__copy {
            padding-top: 26px;
        }

        /* === Historia clínica: filas un poco más altas (ocupa un pelín más). === */
        [data-feature-panel="historia"] .historyMockRow {
            padding-top: 14px !important;
            padding-bottom: 14px !important;
        }

        /* === Facturación: fuera el marco blanco exterior (la tabla va directa),
           filas más altas y columnas reequilibradas (Fecha estrecha; Pendiente
           y Estado con aire, que se comían arriba). === */
        [data-feature-panel="facturacion"] .tabPanelVisual {
            padding: 0 !important;
            background: transparent !important;
            border: 0 !important;
            box-shadow: none !important;
        }

        [data-feature-panel="facturacion"] .invoiceMock {
            --invoiceCols: 30px 0.65fr 1.25fr 1.05fr 0.8fr 1fr 1.35fr;
        }

        [data-feature-panel="facturacion"] .invoiceMockHead,
        [data-feature-panel="facturacion"] .invoiceMockRow {
            padding-top: 14px !important;
            padding-bottom: 14px !important;
        }

        @media (min-width: 981px) {
            [data-feature-panel="facturacion"] {
                grid-template-columns: minmax(0, 0.49fr) minmax(0, 0.51fr);
            }

            [data-feature-panel="facturacion"] h3 {
                max-width: 600px;
            }

            [data-feature-panel="facturacion"] .capability-panel__billing-title span {
                display: block;
                white-space: nowrap;
            }

            [data-feature-panel="facturacion"] .capability-panel__visual {
                transform: translate(10px, 18px);
            }
        }

        /* === Tratamientos: tabla recreada del software real (código, tratamiento con
           categoría e icono de color, paciente anonimizado, sesiones, precio y
           pendiente coloreado según estado). === */
        [data-feature-panel="tratamientos"] .software-mock {
            min-height: 0 !important;
        }

        .txMock {
            width: 100%;
            background: #fff;
            border: 1px solid rgba(212, 224, 225, 0.96);
            border-radius: 14px;
            overflow: hidden;
            box-shadow: 0 12px 26px rgba(0, 61, 79, 0.05);
        }

        .txMockHead,
        .txMockRow {
            display: grid;
            grid-template-columns: 42px 1.7fr 0.65fr 0.95fr 0.6fr 0.7fr;
            gap: 10px;
            align-items: center;
            padding: 11px 14px;
        }

        .txMockHead {
            background: #fafbfc;
            border-bottom: 1px solid rgba(212, 224, 225, 0.9);
            font-size: .63rem;
            font-weight: 700;
            letter-spacing: .04em;
            text-transform: uppercase;
            color: var(--color-text-secondary);
        }

        .txMockRow {
            border-bottom: 1px solid rgba(212, 224, 225, 0.65);
            font-size: .73rem;
        }

        .txMockRow:last-child {
            border-bottom: 0;
        }

        .txMockId {
            color: var(--color-text-secondary);
            font-variant-numeric: tabular-nums;
        }

        .txMockTx small {
            display: block;
            font-size: .62rem;
            color: var(--color-text-muted);
        }

        .txMockTx strong {
            display: flex;
            align-items: center;
            gap: 6px;
            color: var(--color-primary);
            font-family: var(--font-heading);
            font-size: .74rem;
            line-height: 1.25;
        }

        .txDot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            flex: 0 0 8px;
        }

        .txDotBlue {
            background: #4a78ad;
        }

        .txDotAmber {
            background: #cf8a4d;
        }

        .txDotGreen {
            background: #55a077;
        }

        .txDotPurple {
            background: #8a6fb1;
        }

        .txMockPat {
            color: var(--color-text-muted);
        }

        .txMockUse {
            display: inline-block;
            padding: 4px 9px;
            border: 1px solid rgba(212, 224, 225, 0.96);
            border-radius: 999px;
            background: #fff;
            font-size: .63rem;
            font-weight: 700;
            color: var(--color-text-secondary);
            white-space: nowrap;
        }

        .txNum {
            text-align: right;
            font-variant-numeric: tabular-nums;
            color: var(--color-text-secondary);
        }

        .txPendRed {
            color: #c4536a;
            font-weight: 700;
        }

        .txPendGreen {
            color: #2a9d8f;
            font-weight: 700;
        }

        /* === Recetas: talonario, catálogo CIMA y emisión en un único mockup. === */
        [data-feature-panel="recetas"] {
            grid-template-columns: minmax(0, .45fr) minmax(0, .55fr);
        }

        [data-feature-panel="recetas"] .prescriptionPanelVisual {
            min-width: 0;
            padding: 0;
            border: 0;
            background: transparent;
            box-shadow: none;
        }

        .prescriptionMock {
            position: relative;
            width: 100%;
            min-height: 520px;
            padding: 14px;
            border: 1px solid rgba(212, 224, 225, .96);
            border-radius: 24px;
            background: rgba(255, 255, 255, .96);
            box-shadow: 0 22px 48px rgba(0, 61, 79, .1);
            color: var(--color-text-secondary);
            overflow: hidden;
        }

        .prescriptionMock__topbar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            min-height: 54px;
            margin: -14px -14px 12px;
            padding: 12px 18px;
            border-radius: 24px 24px 0 0;
            color: #fff;
            background: linear-gradient(105deg, var(--color-primary) 0%, var(--color-secondary) 100%);
        }

        .prescriptionMock__topbar strong {
            font-family: var(--font-heading);
            font-size: 1.05rem;
            font-weight: 700;
        }

        .prescriptionMock__topbar span {
            color: rgba(255, 255, 255, .72);
            font-size: .7rem;
            font-weight: 600;
        }

        .prescriptionMock__notice {
            display: grid;
            grid-template-columns: 18px minmax(0, 1fr);
            gap: 10px;
            align-items: start;
            margin-bottom: 10px;
            padding: 10px 12px;
            border-left: 3px solid var(--color-secondary);
            border-radius: 10px;
            background: rgba(232, 239, 240, .82);
            font-size: .68rem;
            line-height: 1.4;
        }

        .prescriptionMock__notice svg {
            width: 17px;
            color: var(--color-secondary);
        }

        .prescriptionMock__summary {
            display: grid;
            grid-template-columns: 78px 78px minmax(120px, 1fr) auto;
            gap: 8px;
            align-items: center;
            margin-bottom: 10px;
        }

        .prescriptionStat {
            display: grid;
            place-items: center;
            min-height: 64px;
            padding: 8px;
            border: 1px solid rgba(212, 224, 225, .9);
            border-radius: 11px;
            background: #fff;
            box-shadow: 0 4px 10px rgba(0, 61, 79, .04);
            text-align: center;
        }

        .prescriptionStat strong {
            color: var(--color-primary);
            font-family: var(--font-heading);
            font-size: 1.08rem;
            line-height: 1;
        }

        .prescriptionStat--used strong {
            color: var(--color-secondary);
        }

        .prescriptionStat span {
            font-size: .58rem;
            text-transform: uppercase;
            letter-spacing: .04em;
        }

        .prescriptionProgress {
            min-width: 0;
            padding: 0 4px;
        }

        .prescriptionProgress__label {
            display: flex;
            justify-content: space-between;
            gap: 8px;
            margin-bottom: 8px;
            font-size: .62rem;
        }

        .prescriptionProgress__label strong {
            color: var(--color-secondary);
        }

        .prescriptionProgress > i {
            display: block;
            height: 7px;
            border-radius: 999px;
            background: var(--color-surface-alt, #f4f8f8);
            overflow: hidden;
        }

        .prescriptionProgress > i span {
            display: block;
            width: 42%;
            height: 100%;
            border-radius: inherit;
            background: linear-gradient(90deg, var(--color-secondary), var(--color-accent-green));
        }

        .prescriptionLoad {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            min-height: 38px;
            padding: 8px 12px;
            border: 0;
            border-radius: 10px;
            color: #fff;
            background: var(--color-primary);
            box-shadow: 0 7px 14px rgba(0, 85, 109, .18);
            font: 600 .64rem/1 var(--font-body);
            white-space: nowrap;
            pointer-events: none;
        }

        .prescriptionLoad svg {
            width: 15px;
            height: 15px;
        }

        .prescriptionMock__table {
            min-height: 142px;
            border: 1px solid rgba(212, 224, 225, .86);
            border-radius: 12px;
            background: #fff;
            overflow: hidden;
        }

        .prescriptionMock__tableHead,
        .prescriptionMock__tableRow {
            display: grid;
            grid-template-columns: .8fr 1.25fr .7fr .7fr .85fr .75fr;
            gap: 7px;
            align-items: center;
            padding: 11px 12px;
            font-size: .55rem;
            text-align: center;
        }

        .prescriptionMock__tableHead {
            background: #f8fafa;
            border-bottom: 1px solid rgba(212, 224, 225, .86);
            color: var(--color-text-secondary);
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: .04em;
        }

        .prescriptionMock__tableRow i {
            width: 12px;
            height: 12px;
            margin: auto;
            border: 3px solid #fff;
            border-radius: 50%;
            background: var(--color-accent-green);
            box-shadow: 0 0 0 1px var(--color-accent-green);
        }

        .prescriptionMock__tableRow strong {
            color: var(--color-primary);
            font-size: .59rem;
        }

        .prescriptionMock__tableRow em {
            padding: 4px 7px;
            border-radius: 999px;
            color: #167764;
            background: rgba(42, 157, 143, .12);
            font-style: normal;
            font-weight: 700;
        }

        .prescriptionCatalog,
        .prescriptionComposer {
            position: absolute;
            bottom: 14px;
            z-index: 3;
            border: 1px solid rgba(212, 224, 225, .92);
            background: rgba(255, 255, 255, .98);
            box-shadow: 0 18px 36px rgba(0, 61, 79, .14);
        }

        .prescriptionCatalog {
            left: 28px;
            width: 38%;
            min-width: 168px;
            padding: 0 14px 12px;
            border-radius: 18px;
            transform: rotate(-4deg);
        }

        .prescriptionCatalog__head,
        .prescriptionComposer__head {
            margin: 0 -14px 12px;
            padding: 10px 14px;
            border-radius: 17px 17px 0 0;
            color: #fff;
            background: linear-gradient(105deg, var(--color-primary), var(--color-secondary));
            font-family: var(--font-heading);
            font-weight: 700;
        }

        .prescriptionCatalog > strong,
        .prescriptionCatalog > span {
            display: block;
            color: var(--color-text);
            font-size: .66rem;
            line-height: 1.35;
        }

        .prescriptionCatalog > span {
            margin-top: 5px;
            color: var(--color-text-secondary);
        }

        .prescriptionCatalog__scan {
            display: grid;
            place-items: center;
            height: 70px;
            margin: 9px 0;
            color: var(--color-secondary);
            background: linear-gradient(180deg, rgba(232, 239, 240, .56), rgba(255, 255, 255, .9));
            border-radius: 10px;
        }

        .prescriptionCatalog__scan svg {
            width: 48px;
            height: 48px;
        }

        .prescriptionCatalog > b {
            display: block;
            padding: 8px;
            border-radius: 999px;
            color: #fff;
            background: var(--color-primary);
            font-size: .62rem;
            text-align: center;
        }

        .prescriptionComposer {
            right: 18px;
            width: 54%;
            min-width: 230px;
            padding: 0 14px 12px;
            border-radius: 18px;
        }

        .prescriptionComposer__fields {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 7px 10px;
        }

        .prescriptionComposer__fields label {
            display: block;
            min-width: 0;
            padding-bottom: 6px;
            border-bottom: 1px solid rgba(212, 224, 225, .9);
        }

        .prescriptionComposer__fields label:nth-child(n + 3) {
            grid-column: 1 / -1;
        }

        .prescriptionComposer__fields span,
        .prescriptionComposer__fields strong {
            display: block;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .prescriptionComposer__fields span {
            color: var(--color-text-muted);
            font-size: .52rem;
            text-transform: uppercase;
            letter-spacing: .04em;
        }

        .prescriptionComposer__fields strong {
            margin-top: 3px;
            color: var(--color-text);
            font-size: .6rem;
            font-weight: 600;
        }

        @media (max-width: 980px) {
            [data-feature-panel="recetas"] {
                grid-template-columns: 1fr;
            }

            [data-feature-panel="recetas"] .prescriptionPanelVisual {
                width: 100%;
                min-width: 0;
            }

            .prescriptionMock {
                /* Antes conservaba 720px dentro de una card móvil y el lateral
                   derecho quedaba fuera del panel. El mock sigue teniendo un tope
                   generoso en tablet, pero nunca supera el ancho disponible. */
                width: 100%;
                max-width: 720px;
                margin-inline: auto;
            }
        }

        @media (max-width: 640px) {
            .prescriptionMock {
                min-height: 540px;
                padding: 10px;
                border-radius: 20px;
            }

            .prescriptionMock__topbar {
                min-height: 50px;
                margin: -10px -10px 10px;
                padding-inline: 14px;
                border-radius: 20px 20px 0 0;
            }

            .prescriptionMock__topbar span {
                display: none;
            }

            .prescriptionMock__notice {
                gap: 7px;
                padding: 8px;
                font-size: .58rem;
            }

            .prescriptionMock__summary {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 7px;
            }

            .prescriptionStat {
                min-height: 58px;
            }

            .prescriptionProgress,
            .prescriptionLoad {
                grid-column: 1 / -1;
            }

            .prescriptionLoad {
                width: 100%;
                justify-content: center;
            }

            .prescriptionMock__tableHead,
            .prescriptionMock__tableRow {
                grid-template-columns: .65fr 1.15fr repeat(4, .7fr);
                gap: 3px;
                padding: 9px 5px;
                font-size: .45rem;
            }

            .prescriptionCatalog {
                left: 8px;
                width: 47%;
                min-width: 0;
                padding: 0 8px 10px;
                transform: rotate(-2.5deg);
            }

            .prescriptionComposer {
                right: 8px;
                width: 56%;
                min-width: 0;
                padding: 0 8px 10px;
            }

            .prescriptionCatalog__head,
            .prescriptionComposer__head {
                margin: 0 -8px 9px;
                padding: 9px 8px;
            }

            .prescriptionCatalog__scan {
                height: 58px;
            }
        }

        @media (max-width: 380px) {
            .capabilities--system > .container {
                padding-inline: 12px;
            }

            .capabilities-system [data-feature-panel="recetas"] {
                padding-inline: 12px !important;
            }
        }

        @media (prefers-reduced-motion: no-preference) {
            .capability-panel.active .prescriptionCatalog {
                animation: prescriptionCatalogIn 650ms cubic-bezier(.16, 1, .3, 1) both;
            }

            .capability-panel.active .prescriptionComposer {
                animation: prescriptionComposerIn 720ms 80ms cubic-bezier(.16, 1, .3, 1) both;
            }
        }

        @keyframes prescriptionCatalogIn {
            from { opacity: 0; transform: translate(-18px, 16px) rotate(-7deg) scale(.94); }
            to { opacity: 1; transform: rotate(-4deg) scale(1); }
        }

        @keyframes prescriptionComposerIn {
            from { opacity: 0; transform: translate(18px, 18px) scale(.95); }
            to { opacity: 1; transform: none; }
        }

        /* Título del onboarding: mismo tamaño que la cabecera de funcionalidades. */
        .onboarding-carousel__header .section-title {
            font-size: clamp(40px, 5vw, 64px) !important;
            line-height: 1.1 !important;
        }

        /* === Onboarding v2: sin línea ni preview lateral.
           - 5 puntos VACÍOS que se van RELLENANDO conforme bajas (acumulativo).
           - Junto a cada card, una card GEMELA del mismo tamaño y altura, oculta,
             que aparece al llegar su paso, con su animación propia. === */
        .onboarding-carousel--vertical {
            grid-template-columns: auto 1fr;
            column-gap: 26px;
        }

        /* Subtítulo bajo el título del onboarding. */
        .onboarding-carousel__subtitle {
            max-width: 680px;
            margin: 14px auto 0;
            text-align: center;
        }

        /* Frase de cierre con efecto de escritura (typewriter real). */
        .onboarding-closer {
            max-width: 760px;
            margin: 40px auto 0;
            text-align: center;
            font-family: var(--font-heading);
            font-size: clamp(18px, 2.2vw, 24px);
            font-weight: 700;
            line-height: 1.35;
            color: var(--color-primary);
            min-height: 1.35em;
        }

        .onboarding-closer.is-typing::after {
            content: "";
            display: inline-block;
            width: 2px;
            height: 1em;
            margin-left: 3px;
            background: var(--color-secondary);
            vertical-align: text-bottom;
            animation: onbCloserCaret 850ms step-end infinite;
        }

        @keyframes onbCloserCaret {
            50% {
                opacity: 0;
            }
        }

        /* Controles antiguos del carrusel (flechas + 5 dots de abajo): fuera —
           la navegación es el raíl sticky y el scroll. */
        .onboarding-carousel--vertical .onboarding-carousel__controls {
            display: none;
        }

        .onboarding-carousel--vertical::before {
            display: none;
        }

        .onboarding-carousel--vertical .onboarding-carousel__visual {
            display: none;
        }

        .onboarding-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 26px;
            align-items: stretch;
        }

        .onboarding-carousel--vertical .onboarding-slide {
            min-height: 205px;
            padding: 38px 40px;
        }

        .onboarding-carousel--vertical .onboarding-slide__number {
            font-size: 46px;
        }

        .onboarding-carousel--vertical .onboarding-slide h3 {
            font-size: 26px;
        }

        .onboarding-carousel--vertical .onboarding-slide p {
            font-size: 15px;
        }

        /* La sección tenía overflow:hidden, que ROMPE position:sticky (el raíl quedaba
           congelado). overflow:clip recorta igual pero NO crea contenedor de scroll,
           así que el sticky vuelve a funcionar. */
        .onboarding--carousel {
            overflow: clip !important;
        }

        /* Los puntos de las cards desaparecen: la guía vive en el raíl sticky. */
        .onboarding-carousel--vertical .onboarding-slide::before {
            display: none;
        }

        .onboarding-carousel--vertical .onboarding-carousel__track {
            padding-left: 0;
        }

        /* Raíl de 5 puntos: FIJO en pantalla durante el recorrido de la sección
           (sticky con límites en el div) y clicable para navegar entre pasos. */
        .onboarding-railNav {
            position: sticky;
            top: 40vh;
            align-self: start;
            display: flex;
            flex-direction: column;
            gap: 16px;
            padding: 4px;
        }

        .onboarding-railNav button {
            width: 16px;
            height: 16px;
            padding: 0;
            border-radius: 50%;
            background: #fff;
            border: 3px solid rgba(0, 85, 109, 0.28);
            appearance: none;
            -webkit-appearance: none;
            cursor: pointer;
            transition:
                background 240ms cubic-bezier(0.23, 1, 0.32, 1),
                border-color 240ms cubic-bezier(0.23, 1, 0.32, 1),
                transform 240ms cubic-bezier(0.23, 1, 0.32, 1);
        }

        .onboarding-railNav button:hover {
            transform: scale(1.2);
            border-color: var(--color-primary);
        }

        /* Relleno acumulativo de los puntos según el paso activo. */
        .onboarding-carousel--vertical[data-active-slide="0"] .onboarding-railNav button:nth-child(-n+1),
        .onboarding-carousel--vertical[data-active-slide="1"] .onboarding-railNav button:nth-child(-n+2),
        .onboarding-carousel--vertical[data-active-slide="2"] .onboarding-railNav button:nth-child(-n+3),
        .onboarding-carousel--vertical[data-active-slide="3"] .onboarding-railNav button:nth-child(-n+4),
        .onboarding-carousel--vertical[data-active-slide="4"] .onboarding-railNav button:nth-child(-n+5) {
            background: var(--color-primary);
            border-color: var(--color-primary);
        }

        /* Card gemela: mismo lienzo que la card del paso, oculta hasta su paso. */
        .onboarding-twin {
            display: grid;
            place-items: center;
            border-radius: 28px;
            background: rgba(255, 255, 255, 0.86);
            border: 1px solid rgba(212, 224, 225, 0.95);
            box-shadow: 0 18px 44px rgba(0, 61, 79, 0.06);
            /* Iconos en el color del logo de EviMedic. */
            color: var(--color-primary, #00556d);
            opacity: 0;
            transform: translateY(14px) scale(0.985);
            transition:
                opacity 600ms cubic-bezier(0.16, 1, 0.3, 1) 120ms,
                transform 600ms cubic-bezier(0.16, 1, 0.3, 1) 120ms;
            pointer-events: none;
        }

        .onboarding-carousel--vertical[data-active-slide="0"] .onboarding-row:nth-child(-n+1) .onboarding-twin,
        .onboarding-carousel--vertical[data-active-slide="1"] .onboarding-row:nth-child(-n+2) .onboarding-twin,
        .onboarding-carousel--vertical[data-active-slide="2"] .onboarding-row:nth-child(-n+3) .onboarding-twin,
        .onboarding-carousel--vertical[data-active-slide="3"] .onboarding-row:nth-child(-n+4) .onboarding-twin,
        .onboarding-carousel--vertical[data-active-slide="4"] .onboarding-row:nth-child(-n+5) .onboarding-twin,
        .onboarding-twin.is-shown {
            opacity: 1;
            transform: none;
        }

        /* Escenario común de los iconos animados. */
        .tw {
            position: relative;
            width: 180px;
            height: 122px;
            display: grid;
            place-items: center;
        }

        .tw>svg {
            width: 62px;
            height: 62px;
        }

        /* 1 — Solicitas acceso: mail volando a la izquierda + maqueta de login a la derecha. */
        .twMail {
            width: auto;
            height: auto;
            grid-template-columns: auto auto;
            gap: 26px;
            align-items: center;
        }

        .twMail__fly {
            position: relative;
            width: 88px;
            height: 84px;
            display: grid;
            place-items: center;
        }

        .twMail__env {
            width: 54px;
            height: 54px;
            transform: rotate(-6deg);
            animation: twMailFly 2.8s cubic-bezier(0.45, 0, 0.4, 1) infinite;
        }

        @keyframes twMailFly {
            0%, 100% {
                translate: -7px 4px;
            }

            50% {
                translate: 9px -6px;
            }
        }

        .twMail__line {
            position: absolute;
            left: 4px;
            width: 16px;
            height: 2.5px;
            border-radius: 999px;
            background: rgba(54, 132, 139, 0.45);
            animation: twMailLine 2.8s ease-in-out infinite;
        }

        .twMail__line:nth-child(1) {
            top: 32px;
            animation-delay: 0s;
        }

        .twMail__line:nth-child(2) {
            top: 42px;
            left: -2px;
            animation-delay: .18s;
        }

        .twMail__line:nth-child(3) {
            top: 52px;
            animation-delay: .36s;
        }

        @keyframes twMailLine {
            0%, 100% {
                opacity: 0;
                translate: -8px 0;
            }

            50% {
                opacity: 1;
                translate: 6px 0;
            }
        }

        /* Login de mentira: estructura mínima sin texto legible. */
        .twLogin {
            width: 94px;
            padding: 12px 12px 11px;
            border-radius: 12px;
            background: #fff;
            border: 1.5px solid rgba(0, 85, 109, 0.16);
            box-shadow: 0 10px 22px rgba(0, 61, 79, 0.07);
            display: grid;
            gap: 7px;
            justify-items: center;
        }

        .twLogin__avatar {
            width: 22px;
            height: 22px;
            border-radius: 50%;
            background: rgba(0, 85, 109, 0.16);
        }

        .twLogin__field {
            width: 100%;
            height: 9px;
            border-radius: 5px;
            background: rgba(0, 85, 109, 0.08);
            border: 1px solid rgba(0, 85, 109, 0.14);
        }

        .twLogin__btn {
            width: 100%;
            height: 11px;
            border-radius: 6px;
            background: var(--color-primary);
            opacity: .88;
        }

        /* 2 — Analizar clínica: edificio con escaneo a la izquierda + consola ilegible
           loopeando de abajo arriba a la derecha. */
        .twClinic {
            width: auto;
            height: auto;
            grid-template-columns: auto auto;
            gap: 24px;
            align-items: center;
        }

        .twClinic__icon {
            position: relative;
            width: 72px;
            height: 84px;
            display: grid;
            place-items: center;
            overflow: hidden;
        }

        .twClinic__icon svg {
            width: 60px;
            height: 60px;
        }

        .twClinic__scan {
            position: absolute;
            left: 6%;
            right: 6%;
            top: 10px;
            height: 3px;
            border-radius: 999px;
            background: linear-gradient(90deg, transparent, var(--color-secondary), transparent);
            box-shadow: 0 0 10px rgba(54, 132, 139, 0.35);
            animation: twScan 2.4s ease-in-out infinite;
        }

        @keyframes twScan {
            0%, 100% {
                translate: 0 0;
                opacity: .35;
            }

            50% {
                translate: 0 60px;
                opacity: 1;
            }
        }

        .twConsole {
            width: 98px;
            height: 86px;
            padding: 10px 12px;
            border-radius: 12px;
            background: #0d2f3a;
            border: 1px solid rgba(0, 85, 109, 0.3);
            box-shadow: 0 10px 22px rgba(0, 61, 79, 0.14);
            overflow: hidden;
            -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
            mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
        }

        .twConsole__scroll {
            display: grid;
            gap: 7px;
            animation: twConsoleUp 7s linear infinite;
        }

        .twConsole__scroll i {
            display: block;
            height: 3px;
            border-radius: 999px;
            width: var(--w, 60%);
            background: rgba(143, 211, 205, 0.6);
        }

        @keyframes twConsoleUp {
            to {
                translate: 0 -50%;
            }
        }

        /* 3 — Migración: casita — línea RECTA con pulso — logo EviMedic (más grande). */
        .twMigra {
            width: auto;
            height: auto;
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .twMigra__house {
            width: 46px;
            height: 46px;
            flex: 0 0 auto;
        }

        .twMigra__logo {
            width: 58px;
            height: 58px;
            object-fit: contain;
            border-radius: 12px;
            flex: 0 0 auto;
        }

        .twMigra__wire {
            position: relative;
            width: 84px;
            height: 3px;
            border-radius: 999px;
            background: rgba(0, 85, 109, 0.16);
            overflow: hidden;
            flex: 0 0 auto;
        }

        .twMigra__wire i {
            position: absolute;
            top: 0;
            left: 0;
            width: 34px;
            height: 100%;
            border-radius: inherit;
            background: linear-gradient(90deg, transparent, var(--color-primary), transparent);
            animation: twPulse 1.7s ease-in-out infinite;
        }

        @keyframes twPulse {
            0% {
                transform: translateX(-36px);
            }

            100% {
                transform: translateX(86px);
            }
        }

        /* 4 — Formar al equipo: formador señalando una pizarra que se va escribiendo. */
        .twTeach {
            width: 200px;
        }

        .twTeach__person {
            position: absolute;
            left: 26px;
            bottom: 18px;
            width: 52px;
            height: 52px;
        }

        .twTeach__board {
            position: absolute;
            right: 22px;
            top: 24px;
            width: 86px;
            height: 60px;
            padding: 4px 0 8px;
            border-radius: 10px;
            background: #fff;
            border: 1.5px solid rgba(0, 85, 109, 0.22);
            box-shadow: 0 8px 18px rgba(0, 61, 79, 0.07);
        }

        .twTeach__board i {
            display: block;
            margin: 8px 10px 0;
            height: 4px;
            border-radius: 999px;
            background: rgba(0, 85, 109, 0.3);
            transform: scaleX(0);
            transform-origin: left center;
            animation: twWrite 3.4s cubic-bezier(0.23, 1, 0.32, 1) infinite;
        }

        .twTeach__board i:nth-child(2) {
            margin-right: 26px;
            animation-delay: .35s;
        }

        .twTeach__board i:nth-child(3) {
            margin-right: 40px;
            animation-delay: .7s;
        }

        @keyframes twWrite {
            0% {
                transform: scaleX(0);
                opacity: 1;
            }

            38% {
                transform: scaleX(1);
                opacity: 1;
            }

            78% {
                transform: scaleX(1);
                opacity: 1;
            }

            90% {
                transform: scaleX(1);
                opacity: 0;
            }

            100% {
                transform: scaleX(0);
                opacity: 0;
            }
        }

        /* 5 — Usuario contento con rayitas brillando encima. */
        .twHappy__ray {
            position: absolute;
            top: 16px;
            left: 50%;
            width: 3px;
            height: 13px;
            border-radius: 999px;
            background: var(--color-secondary);
            transform-origin: center bottom;
            animation: twRay 1.9s ease-in-out infinite;
        }

        .twHappy__ray--1 {
            translate: -26px 4px;
            rotate: -32deg;
            animation-delay: 0s;
        }

        .twHappy__ray--2 {
            translate: -1.5px -4px;
            animation-delay: .22s;
        }

        .twHappy__ray--3 {
            translate: 23px 4px;
            rotate: 32deg;
            animation-delay: .44s;
        }

        @keyframes twRay {
            0%, 100% {
                opacity: .2;
                scale: .65;
            }

            50% {
                opacity: 1;
                scale: 1;
            }
        }

        /* Accesibilidad y móvil. */
        @media (prefers-reduced-motion: reduce) {
            .onboarding-twin {
                opacity: 1;
                transform: none;
            }

            .tw *, .tw>svg {
                animation: none !important;
            }
        }

        @media (max-width: 1080px) {
            .onboarding-row {
                grid-template-columns: 1fr;
            }

            .onboarding-twin {
                display: none;
            }

            .onboarding-railNav {
                display: none;
            }

            .onboarding-carousel--vertical {
                grid-template-columns: 1fr;
            }
        }

        /* TABLET (769-1080): recupera las 2 columnas y el gráfico a la derecha (el reveal
           por paso y el estilo de card lo aporta el bloque @media (min-width:769px)). */
        @media (min-width: 769px) and (max-width: 1080px) {
            .onboarding-row {
                grid-template-columns: 1fr 1fr !important;
            }

            .onboarding-twin {
                display: grid !important;
            }
        }


/* === Zona paciente: portal recreado del software real — hero teal de bienvenida,
           4 KPIs solapados, citas pendientes y últimos tratamientos con progreso. === */
        [data-feature-panel="zona"] .software-mock {
            min-height: 0 !important;
        }

        .pzHero {
            margin: -18px -18px 0;
            padding: 18px 20px 40px;
            border-radius: 27px 27px 0 0;
            background:
                radial-gradient(120% 170% at 85% 0%, rgba(94, 191, 184, 0.4) 0%, rgba(94, 191, 184, 0) 48%),
                linear-gradient(115deg, #0b3a45 0%, #155e66 55%, #2e7d85 100%);
        }

        /* "Bienvenido al" sin pill: texto plano blanco sobre el hero. */
        .pzHero__badge {
            display: inline-block;
            margin-bottom: 9px;
            padding: 0;
            border-radius: 0;
            background: transparent;
            border: 0;
            color: rgba(255, 255, 255, 0.85);
            font-size: 10.5px;
            font-weight: 700;
        }

        .pzHero strong {
            display: block;
            color: #fff;
            font-family: var(--font-heading);
            font-size: 21px;
            letter-spacing: -0.01em;
        }

        /* KPIs solapando el borde inferior del hero, como en el portal real. */
        .pzKpis {
            position: relative;
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 9px;
            margin: -24px 0 12px;
        }

        .pzKpi {
            display: flex;
            flex-direction: column;
            gap: 3px;
            padding: 10px 11px;
            background: #fff;
            border: 1px solid rgba(212, 224, 225, 0.9);
            border-radius: 12px;
            box-shadow: 0 10px 22px rgba(0, 61, 79, 0.08);
        }

        .pzKpi strong {
            margin-top: 2px;
            font-family: var(--font-heading);
            font-size: 17px;
            line-height: 1;
            color: var(--color-primary);
        }

        .pzKpi span {
            font-size: 9.5px;
            line-height: 1.25;
            color: var(--color-text-secondary);
        }

        .pzChip {
            width: 24px;
            height: 24px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 7px;
            font-style: normal;
            flex: 0 0 24px;
        }

        .pzChipBlue {
            background: rgba(74, 120, 173, 0.14);
            color: #4a78ad;
        }

        .pzChipGreen {
            background: rgba(85, 160, 119, 0.14);
            color: #55a077;
        }

        .pzChipPurple {
            background: rgba(138, 111, 177, 0.14);
            color: #8a6fb1;
        }

        .pzChipTan {
            background: rgba(207, 138, 77, 0.16);
            color: #cf8a4d;
        }

        .pzPanel {
            padding: 11px 13px;
            background: #fff;
            border: 1px solid rgba(212, 224, 225, 0.9);
            border-radius: 12px;
            box-shadow: 0 10px 22px rgba(0, 61, 79, 0.05);
        }

        .pzPanel+.pzPanel {
            margin-top: 10px;
        }

        .pzPanel__head {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 9px;
        }

        .pzPanel__head strong {
            font-family: var(--font-heading);
            font-size: 12.5px;
            color: var(--color-primary);
        }

        .pzPanel__head span {
            font-size: 10px;
            font-weight: 700;
            color: var(--color-secondary);
        }

        .pzRow {
            display: grid;
            grid-template-columns: auto 1fr auto;
            gap: 10px;
            align-items: center;
        }

        .pzRow+.pzRow {
            margin-top: 9px;
            padding-top: 9px;
            border-top: 1px solid rgba(212, 224, 225, 0.6);
        }

        .pzRow__txt strong {
            display: block;
            font-family: var(--font-heading);
            font-size: 11.5px;
            color: var(--color-text);
        }

        .pzRow__txt span {
            display: block;
            font-size: 10px;
            color: var(--color-text-secondary);
        }

        .pzTag {
            font-style: normal;
            font-size: 9px;
            font-weight: 800;
            letter-spacing: .04em;
            text-transform: uppercase;
            color: #c4536a;
            white-space: nowrap;
        }

        .pzSes {
            font-style: normal;
            font-size: 9.5px;
            color: var(--color-text-secondary);
            white-space: nowrap;
            align-self: end;
        }

        .pzBar {
            display: block;
            position: relative;
            margin-top: 6px;
            height: 5px;
            border-radius: 999px;
            background: rgba(212, 224, 225, 0.7);
            overflow: hidden;
        }

        .pzBar::before {
            content: "";
            position: absolute;
            inset: 0;
            width: 50%;
            border-radius: inherit;
            background: var(--color-secondary);
        }

        .pzBarFull::before {
            width: 100%;
            background: #55a077;
        }

        /* === Análisis y control: mockup nuevo (KPIs + ingresos por semana +
           rentabilidad por tratamiento), lenguaje visual del resto de mocks. === */
        [data-feature-panel="analisis"] .software-mock {
            min-height: 0 !important;
        }

        /* Neutralizar el estilo de card heredado en los wrappers directos. */
        .dashboard-mock--v2>div {
            background: transparent !important;
            border: 0 !important;
            box-shadow: none !important;
            border-radius: 0 !important;
            padding: 0 !important;
            min-height: 0 !important;
        }

        .dashboard-mock--v2 {
            display: block !important;
        }

        .dashboard-mock--v2 .dash-kpis {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 12px;
            margin-bottom: 12px;
        }

        .dashboard-mock--v2 .dash-kpi {
            display: flex;
            flex-direction: column;
            gap: 5px;
            padding: 14px 16px;
            background: #fff;
            border: 1px solid rgba(212, 224, 225, 0.86);
            border-radius: 16px;
            box-shadow: 0 12px 26px rgba(0, 61, 79, 0.05);
        }

        .dashboard-mock--v2 .dash-kpi span {
            font-size: 11.5px;
            color: var(--color-text-secondary);
        }

        .dashboard-mock--v2 .dash-kpi strong {
            font-family: var(--font-heading);
            font-size: 22px;
            color: var(--color-primary);
        }

        .dashboard-mock--v2 .dash-kpi em {
            font-style: normal;
            font-size: 10.5px;
            font-weight: 700;
            width: fit-content;
            padding: 3px 8px;
            border-radius: 999px;
        }

        .dashboard-mock--v2 .dash-kpi em.up {
            background: rgba(42, 157, 143, 0.14);
            color: #1f7a6d;
        }

        .dashboard-mock--v2 .dash-kpi em.down {
            background: rgba(54, 132, 139, 0.1);
            color: var(--color-secondary);
        }

        .dashboard-mock--v2 .dash-grid2 {
            display: grid !important;
            grid-template-columns: 1.1fr 1fr;
            gap: 12px;
        }

        .dashboard-mock--v2 .dash-card {
            padding: 14px 16px !important;
            background: #fff !important;
            border: 1px solid rgba(212, 224, 225, 0.86) !important;
            border-radius: 16px !important;
            box-shadow: 0 12px 26px rgba(0, 61, 79, 0.05) !important;
        }

        .dashboard-mock--v2 .dash-card__head {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 10px;
            margin-bottom: 12px;
        }

        .dashboard-mock--v2 .dash-card__head strong {
            font-family: var(--font-heading);
            font-size: 13px;
            color: var(--color-primary);
        }

        .dashboard-mock--v2 .dash-card__head span {
            font-size: 11px;
            color: var(--color-text-muted);
        }

        .dashboard-mock--v2 .dash-bars {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 12px;
            align-items: end;
            height: 116px;
        }

        .dashboard-mock--v2 .dash-bar {
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            align-items: center;
            gap: 6px;
            height: 100%;
        }

        .dashboard-mock--v2 .dash-bar i {
            display: block;
            width: 100%;
            height: var(--h, 50%);
            border-radius: 8px 8px 4px 4px;
            background: rgba(54, 132, 139, 0.28);
        }

        .dashboard-mock--v2 .dash-bar.is-top i {
            background: linear-gradient(180deg, var(--color-secondary), var(--color-primary));
        }

        .dashboard-mock--v2 .dash-bar span {
            font-size: 10.5px;
            color: var(--color-text-muted);
        }

        .dashboard-mock--v2 .dash-rows {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .dashboard-mock--v2 .dash-row {
            display: grid;
            grid-template-columns: 1fr auto;
            gap: 5px 10px;
            align-items: center;
        }

        .dashboard-mock--v2 .dash-row span {
            font-size: 12px;
            color: var(--color-text-secondary);
        }

        .dashboard-mock--v2 .dash-row em {
            font-style: normal;
            font-size: 12px;
            font-weight: 800;
            color: var(--color-primary);
            font-variant-numeric: tabular-nums;
        }

        .dashboard-mock--v2 .dash-row i {
            grid-column: 1 / -1;
            display: block;
            height: 6px;
            width: var(--w, 50%);
            border-radius: 999px;
            background: linear-gradient(90deg, var(--color-secondary), var(--color-primary));
        }

        /* === Mockup Pacientes reestructurado:
           Últimas visitas / Documentos a la izquierda, Marta Ruiz a la derecha (2 filas),
           y debajo Consentimientos y Tratamientos a todo el ancho. === */
        .patient-mock {
            grid-template-columns: 1.45fr 1fr !important;
            grid-template-areas:
                "visitas marta"
                "documentos marta"
                "consentimientos consentimientos"
                "tratamientos tratamientos" !important;
            gap: 12px !important;
        }

        .patient-mock main {
            display: contents !important;
        }

        .patient-mock aside {
            grid-area: marta;
            min-height: 0 !important;
            padding: 14px 16px !important;
            gap: 8px !important;
        }

        /* Compactas para que las 4 filas quepan dentro del panel (640px) sin desbordar. */
        .patient-mock main>div {
            min-height: 0 !important;
            padding: 13px 16px !important;
        }

        .patient-mock p {
            margin: 2px 0 0 !important;
        }

        .patient-mock .patient-avatar {
            width: 44px !important;
            height: 44px !important;
        }

        .patient-mock main>div:nth-child(1) {
            grid-area: visitas;
        }

        .patient-mock main>div:nth-child(2) {
            grid-area: documentos;
        }

        .patient-mock main>div:nth-child(3) {
            grid-area: consentimientos;
        }

        .patient-mock main>div:nth-child(4) {
            grid-area: tratamientos;
        }


/* === Menú de funcionalidades estilo home original (tabsNav + indicador deslizante):
           con 8 pestañas la barra necesita más ancho y botones más compactos. === */
        .capabilities-system .tabsNav {
            max-width: 1120px;
        }

        .capabilities-system .tabsBtn {
            padding: 10px 12px;
            font-size: .88rem;
        }

        /* Nombre de la funcionalidad DENTRO del panel: oculto por defecto (en desktop
           la toolbar ya muestra el texto); visible en tablet/móvil (toolbar = iconos),
           centrado arriba del todo de la card. */
        .capPanelTab {
            display: none;
        }

        /* Tablet (≤1180): 8 pestañas no caben en texto y se solapan → mostrar SOLO
           los iconos (como en móvil). Scopeado a capabilities-system para no tocar
           otros .tabsNav del proyecto. */
        @media (max-width: 1180px) {
            .capabilities-system .tabsNav {
                gap: 4px;
            }

            /* Título de la funcionalidad CENTRADO arriba del panel (la toolbar es solo
               iconos). Absolute para que centre SIEMPRE igual, sin depender del grid
               de cada panel (con grid-column el auto-placement lo descentraba a veces). */
            .capability-panel {
                padding-top: 52px;
            }

            .capability-panel .capPanelTab {
                display: block;
                position: absolute;
                top: 19px;
                left: 52px;
                /* justo a la derecha del número (left:26, ~18px ancho) */
                right: auto;
                text-align: left;
                font-family: var(--font-heading);
                font-weight: 800;
                font-size: 14px;
                letter-spacing: .04em;
                text-transform: uppercase;
                color: var(--color-secondary);
                pointer-events: none;
            }

            .capabilities-system .tabsBtn {
                display: grid;
                place-items: center;
                padding: 11px 8px;
            }

            .capabilities-system .tabsBtn .tabsLabel {
                display: none;
            }

            .capabilities-system .tabsBtn .tabsIcon {
                display: block;
                width: 20px;
                height: 20px;
            }
        }


/* === FUNCIONALIDADES ("Procesos 100% conectados") — solo móvil === */
        @media (max-width: 768px) {

            /* Nombres de vuelta en las pestañas + barra de NOMBRES scrolleable en horizontal
               (la card de abajo NO scrollea; su mock se escala para caber). */
            .capabilities-system .tabsNav {
                display: flex !important;
                flex-wrap: nowrap !important;
                overflow-x: auto !important;
                -webkit-overflow-scrolling: touch !important;
                gap: 6px !important;
                scrollbar-width: none !important;
                scroll-snap-type: x proximity !important;
            }

            .capabilities-system .tabsNav::-webkit-scrollbar {
                display: none !important;
            }

            .capabilities-system .tabsBtn {
                display: inline-flex !important;
                align-items: center !important;
                gap: 7px !important;
                flex: 0 0 auto !important;
                /* no encoger → fuerzan el scroll */
                padding: 9px 14px !important;
                white-space: nowrap !important;
                scroll-snap-align: start !important;
            }

            .capabilities-system .tabsBtn .tabsLabel {
                display: inline !important;
                /* nombre de la sección de vuelta */
                font-size: .86rem !important;
            }

            .capabilities-system .tabsBtn .tabsIcon {
                display: block !important;
                width: 18px !important;
                height: 18px !important;
                flex: 0 0 auto !important;
            }

            /* El indicador deslizante lo posiciona el JS con coordenadas que no cuentan con el
               scroll ni con tabs de ancho variable → se ponía donde le daba la gana. Fuera en
               móvil; el activo se marca con su PROPIO fondo (sin JS, no se puede buguear). */
            .capabilities-system .tabsIndicator {
                display: none !important;
            }

            .capabilities-system .tabsBtn {
                transition: background-color .2s ease, color .2s ease !important;
            }

            .capabilities-system .tabsBtn.is-active {
                background: var(--brand, var(--color-primary)) !important;
                color: #fff !important;
                border-radius: 999px !important;
                box-shadow: 0 4px 12px rgba(0, 85, 109, 0.25) !important;
            }

            /* Título de la card separado del número de arriba y del texto de abajo. */
            .capability-panel__copy h3 {
                margin: 16px 0 12px !important;
            }

            /* Fuera los "ticks" (lista): solo texto + mockup. */
            .capability-panel__copy ul {
                display: none !important;
            }
        }


.clinic-orbit-fit {
  display: contents;
}

/* Órbita completa portada desde master: nueve funciones con espacio real, centro
   circular y ondas que avanzan hacia fuera. Las reglas anteriores procedían de
   una versión de seis nodos y provocaban el solapamiento de Recetas. */
.clinic-orbit__node {
  border: 1.5px solid rgba(0, 85, 109, .22);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .86),
    0 12px 28px rgba(0, 61, 79, .07);
}

.clinic-orbit__ring {
  width: 420px;
  height: 420px;
  border-style: solid;
  border-color: rgba(54, 132, 139, .27);
  opacity: 0;
  animation: clinicRipple 5.5s linear infinite;
  will-change: transform, opacity;
}

.clinic-orbit__ring--inner {
  animation-delay: -2.75s;
}

@keyframes clinicRipple {
  0% {
    transform: translate(-50%, -50%) scale(.42);
    opacity: 0;
  }
  20% {
    opacity: .58;
  }
  100% {
    transform: translate(-50%, -50%) scale(1.72);
    opacity: 0;
  }
}

@keyframes clinicFloat {
  0%, 100% { translate: 0 -5px; }
  50% { translate: 0 5px; }
}

@media (min-width: 769px) {
  .clinic-orbit {
    width: min(100%, 760px);
    min-height: 640px;
    margin-inline: auto;
  }

  .clinic-orbit__center {
    width: 156px;
    height: 156px;
    padding: 0;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(145deg, var(--brand-deep), var(--brand));
    border-color: rgba(0, 85, 109, .22);
    box-shadow: 0 18px 42px rgba(0, 61, 79, .15);
  }

  .clinic-orbit__avatar {
    width: 54px;
    height: 54px;
    color: #fff;
    background: transparent;
  }

  .clinic-orbit__center strong {
    color: #fff;
  }

  .clinic-orbit__node {
    width: clamp(232px, 22vw, 272px);
    min-width: 0;
    justify-content: center;
    left: 50%;
    top: 50%;
    right: auto;
    bottom: auto;
    animation: clinicFloat 5.6s ease-in-out infinite;
    will-change: translate;
  }

  .clinic-orbit__node--agenda {
    transform: translate(calc(-50% - 145px), calc(-50% - 190px));
    animation-delay: -4.2s;
  }
  .clinic-orbit__node--history {
    transform: translate(calc(-50% + 145px), calc(-50% - 190px));
    animation-delay: -4.9s;
  }
  .clinic-orbit__node--stats {
    transform: translate(calc(-50% - 245px), calc(-50% - 65px));
    animation-delay: -3.5s;
  }
  .clinic-orbit__node--policies {
    transform: translate(calc(-50% + 245px), calc(-50% - 65px));
    animation-delay: 0s;
  }
  .clinic-orbit__node--compliance {
    transform: translate(calc(-50% - 245px), calc(-50% + 65px));
    animation-delay: -2.8s;
  }
  .clinic-orbit__node--treatments {
    transform: translate(calc(-50% + 245px), calc(-50% + 65px));
    animation-delay: -.7s;
  }
  .clinic-orbit__node--billing {
    transform: translate(calc(-50% - 145px), calc(-50% + 190px));
    animation-delay: -2.1s;
  }
  .clinic-orbit__node--consents {
    transform: translate(calc(-50% + 145px), calc(-50% + 190px));
    animation-delay: -1.4s;
  }
  .clinic-orbit__node--prescriptions {
    transform: translate(-50%, calc(-50% + 270px));
    animation-delay: -.45s;
  }
}

@media (max-width: 1024px) {
  .clinic-flow__layout {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .clinic-flow__copy {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
  }
  .clinic-flow__copy .section-title {
    text-align: center;
  }
}

@media (min-width: 769px) and (max-width: 900px) {
  .clinic-orbit__node {
    width: 232px;
  }
  .clinic-orbit__node--stats {
    transform: translate(calc(-50% - 226px), calc(-50% - 65px));
  }
  .clinic-orbit__node--policies {
    transform: translate(calc(-50% + 226px), calc(-50% - 65px));
  }
  .clinic-orbit__node--compliance {
    transform: translate(calc(-50% - 226px), calc(-50% + 65px));
  }
  .clinic-orbit__node--treatments {
    transform: translate(calc(-50% + 226px), calc(-50% + 65px));
  }
}

@media (max-width: 768px) {
  .clinic-flow {
    padding: 54px 0 62px;
  }
  .clinic-flow__layout {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .clinic-flow__badge::before,
  .clinic-flow__badge::after {
    width: clamp(30px, 12vw, 52px);
  }
  .clinic-flow__copy {
    display: contents;
  }
  .clinic-flow__copy .section-title {
    order: 1;
    align-self: center;
    width: min(100%, 620px);
    margin-bottom: 18px;
  }
  .clinic-flow__copy p {
    order: 2;
    align-self: center;
    width: min(100%, 620px);
    margin-bottom: 14px;
    text-align: center;
  }
  .clinic-flow__copy p + p {
    order: 3;
  }
  .clinic-flow .clinic-flow__cta.btnGhost {
    order: 5;
    align-self: center;
    width: min(100%, 286px);
    min-height: 54px;
    margin: 28px auto 0;
    color: #fff !important;
    border-color: transparent !important;
    background: linear-gradient(135deg, #003f52 0%, #00677d 55%, #258892 100%) !important;
    box-shadow: 0 14px 30px rgba(0, 61, 79, .2);
  }
  .clinic-flow .clinic-flow__cta.btnGhost:hover,
  .clinic-flow .clinic-flow__cta.btnGhost:focus-visible {
    color: #fff !important;
    border-color: transparent !important;
    background: linear-gradient(135deg, #003746 0%, var(--brand) 58%, #2f7a82 100%) !important;
    box-shadow: 0 15px 30px rgba(0, 61, 79, .23);
  }
  .clinic-orbit-fit {
    order: 4;
    display: block;
    width: 100%;
    max-width: 520px;
    margin: 24px auto 0;
  }
  .clinic-orbit-fit > .clinic-orbit {
    --clinic-flow-pulse-travel: 538px;
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr);
    grid-template-rows: 116px repeat(9, minmax(54px, auto));
    gap: 4px 0;
    width: 100%;
    min-height: 0;
    padding: 20px 4px 6px;
    isolation: isolate;
    background:
      radial-gradient(circle at 50% 72px, rgba(54, 132, 139, .1), transparent 132px),
      linear-gradient(90deg, transparent, rgba(236, 246, 247, .42) 48%, rgba(236, 246, 247, .42) 52%, transparent);
  }
  .clinic-orbit-fit > .clinic-orbit::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 80px;
    bottom: 31px;
    width: 2px;
    z-index: 0;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(0, 85, 109, .08), rgba(0, 85, 109, .5) 18%, rgba(54, 132, 139, .34) 82%, transparent);
    transform: translateX(-50%);
    pointer-events: none;
  }
  .clinic-orbit-fit > .clinic-orbit::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 92px;
    z-index: 1;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--brand-soft);
    box-shadow: 0 0 0 6px rgba(54, 132, 139, .1);
    transform: translate(-50%, 0);
    animation: clinicFlowPulse 6.4s cubic-bezier(.22, .8, .28, 1) infinite;
    will-change: transform, opacity;
    pointer-events: none;
  }
  .clinic-orbit__ring {
    display: none;
  }
  .clinic-orbit__center {
    grid-column: 2;
    grid-row: 1;
    place-self: center;
    position: relative;
    left: auto;
    top: auto;
    width: 108px;
    height: 108px;
    margin: 0;
    gap: 0;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(145deg, #003e50, #006c80);
    border: 1px solid rgba(255, 255, 255, .2);
    outline: 8px solid rgba(0, 85, 109, .055);
    box-shadow: 0 18px 38px rgba(0, 61, 79, .2);
    transform: none;
    z-index: 3;
  }
  .clinic-orbit__avatar {
    width: 54px;
    height: 54px;
    color: #fff;
    background: transparent;
  }
  .clinic-orbit__avatar svg {
    width: 46px;
    height: 46px;
  }
  .clinic-orbit__center strong {
    color: #fff;
    font-size: 13px;
    line-height: 1;
    margin-top: -2px;
  }
  .clinic-orbit__node,
  .clinic-orbit__node--agenda,
  .clinic-orbit__node--history,
  .clinic-orbit__node--treatments,
  .clinic-orbit__node--prescriptions,
  .clinic-orbit__node--consents,
  .clinic-orbit__node--billing,
  .clinic-orbit__node--stats,
  .clinic-orbit__node--policies,
  .clinic-orbit__node--compliance {
    position: relative;
    inset: auto;
    transform: none;
    animation: none;
    width: 100%;
    min-width: 0;
    height: 54px;
    min-height: 54px;
    padding: 0;
    flex-direction: row;
    justify-content: flex-start;
    gap: 9px;
    border: 0;
    border-radius: 0;
    white-space: normal;
    text-align: left;
    font-size: clamp(.74rem, 2.7vw, .82rem);
    line-height: 1.2;
    background: transparent;
    box-shadow: none;
    z-index: 2;
  }
  .clinic-orbit__node::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 13px;
    height: 1px;
    z-index: -1;
    background: linear-gradient(90deg, rgba(54, 132, 139, .38), rgba(54, 132, 139, .1));
    pointer-events: none;
  }
  .clinic-orbit__node::before {
    content: none;
    display: none;
  }
  .clinic-orbit__label {
    display: block;
    min-width: 0;
    max-width: 100%;
    overflow-wrap: normal;
  }
  .clinic-orbit__icon {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
    color: var(--brand);
    background: rgba(255, 255, 255, .98);
    border: 1px solid rgba(0, 85, 109, .14);
    box-shadow: 0 10px 24px rgba(0, 61, 79, .11);
  }
  .clinic-orbit__node--agenda,
  .clinic-orbit__node--treatments,
  .clinic-orbit__node--consents,
  .clinic-orbit__node--stats,
  .clinic-orbit__node--compliance {
    flex-direction: row-reverse;
    justify-content: flex-start;
    text-align: right;
  }
  .clinic-orbit__node--treatments,
  .clinic-orbit__node--consents,
  .clinic-orbit__node--compliance {
    gap: 14px;
  }
  .clinic-orbit__node--treatments .clinic-orbit__icon,
  .clinic-orbit__node--consents .clinic-orbit__icon,
  .clinic-orbit__node--compliance .clinic-orbit__icon {
    flex: 0 0 42px;
  }
  .clinic-orbit__node--treatments .clinic-orbit__label,
  .clinic-orbit__node--consents .clinic-orbit__label,
  .clinic-orbit__node--compliance .clinic-orbit__label {
    max-width: calc(100% - 56px);
  }
  .clinic-orbit__node--agenda::after,
  .clinic-orbit__node--treatments::after,
  .clinic-orbit__node--consents::after,
  .clinic-orbit__node--stats::after,
  .clinic-orbit__node--compliance::after {
    right: -13px;
  }
  .clinic-orbit__node--agenda::before,
  .clinic-orbit__node--treatments::before,
  .clinic-orbit__node--consents::before,
  .clinic-orbit__node--stats::before,
  .clinic-orbit__node--compliance::before {
    right: -46px;
  }
  .clinic-orbit__node--history::after,
  .clinic-orbit__node--prescriptions::after,
  .clinic-orbit__node--policies::after,
  .clinic-orbit__node--billing::after {
    left: -13px;
    transform: rotate(180deg);
  }
  .clinic-orbit__node--history::before,
  .clinic-orbit__node--prescriptions::before,
  .clinic-orbit__node--policies::before,
  .clinic-orbit__node--billing::before {
    left: -46px;
  }
  .clinic-orbit__node--agenda { grid-column: 1; grid-row: 2; }
  .clinic-orbit__node--history { grid-column: 3; grid-row: 3; }
  .clinic-orbit__node--treatments { grid-column: 1; grid-row: 4; }
  .clinic-orbit__node--prescriptions { grid-column: 3; grid-row: 5; }
  .clinic-orbit__node--consents { grid-column: 1; grid-row: 6; }
  .clinic-orbit__node--billing { grid-column: 3; grid-row: 7; }
  .clinic-orbit__node--stats { grid-column: 1; grid-row: 8; }
  .clinic-orbit__node--policies { grid-column: 3; grid-row: 9; }
  .clinic-orbit__node--compliance { grid-column: 1; grid-row: 10; }
}

@keyframes clinicFlowPulse {
  0% { transform: translate(-50%, 0); opacity: 0; }
  12% { opacity: 1; }
  82% { opacity: .85; }
  100% { transform: translate(-50%, var(--clinic-flow-pulse-travel)); opacity: 0; }
}

@media (max-width: 380px) {
  .clinic-orbit-fit > .clinic-orbit {
    --clinic-flow-pulse-travel: 568px;
    grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr);
    grid-template-rows: 110px repeat(9, minmax(58px, auto));
  }
  .clinic-orbit__center {
    width: 102px;
    height: 102px;
  }
  .clinic-orbit__node,
  .clinic-orbit__node--agenda,
  .clinic-orbit__node--history,
  .clinic-orbit__node--treatments,
  .clinic-orbit__node--prescriptions,
  .clinic-orbit__node--consents,
  .clinic-orbit__node--billing,
  .clinic-orbit__node--stats,
  .clinic-orbit__node--policies,
  .clinic-orbit__node--compliance {
    width: 100%;
    height: 58px;
    min-height: 58px;
    padding: 0;
    gap: 7px;
    font-size: .65rem;
  }
  .clinic-orbit__icon {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
  }
}

/* Facturación · móvil
   La tabla de escritorio pasa a una lista compacta: número y estado forman la
   lectura principal, mientras la fecha queda como metadato. Así ninguna celda
   necesita encogerse o invadir la siguiente. */
@media (max-width: 720px) {
  .capabilities--system [data-feature-panel="facturacion"] .invoiceMock {
    --invoiceCols: minmax(0, 1fr) auto;
    font-size: .78rem;
    border-radius: 16px;
  }

  .capabilities--system [data-feature-panel="facturacion"] .invoiceMockHead {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    padding: 11px 14px !important;
  }

  .capabilities--system [data-feature-panel="facturacion"] .invoiceMockHead > * {
    display: none;
  }

  .capabilities--system [data-feature-panel="facturacion"] .invoiceMockHead > :nth-child(3),
  .capabilities--system [data-feature-panel="facturacion"] .invoiceMockHead > :nth-child(7) {
    display: block;
  }

  .capabilities--system [data-feature-panel="facturacion"] .invoiceMockHead > :nth-child(7) {
    text-align: right;
  }

  .capabilities--system [data-feature-panel="facturacion"] .invoiceMockRow {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "invoice status"
      "date status";
    column-gap: 12px;
    row-gap: 3px;
    min-height: 58px;
    padding: 10px 14px !important;
  }

  .capabilities--system [data-feature-panel="facturacion"] .invoiceMockRow > * {
    display: none;
  }

  .capabilities--system [data-feature-panel="facturacion"] .invoiceMockRow > :nth-child(2) {
    display: block;
    grid-area: date;
    color: var(--text-muted);
    font-size: .68rem;
    line-height: 1.2;
    white-space: nowrap;
  }

  .capabilities--system [data-feature-panel="facturacion"] .invoiceMockRow > :nth-child(3) {
    display: block;
    grid-area: invoice;
    align-self: end;
    font-size: .79rem;
    line-height: 1.2;
  }

  .capabilities--system [data-feature-panel="facturacion"] .invoiceMockRow > :nth-child(7) {
    display: block;
    grid-area: status;
    align-self: center;
    justify-self: end;
  }

  .capabilities--system [data-feature-panel="facturacion"] .invoiceMockChip {
    padding: 4px 9px;
    font-size: .58rem;
  }
}

@media (max-width: 340px) {
  .clinic-orbit-fit {
    width: calc(100% + 48px);
    max-width: none;
    margin-inline: -24px;
  }
  .clinic-orbit-fit > .clinic-orbit {
    grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr);
  }
  .clinic-orbit__node,
  .clinic-orbit__node--agenda,
  .clinic-orbit__node--history,
  .clinic-orbit__node--treatments,
  .clinic-orbit__node--prescriptions,
  .clinic-orbit__node--consents,
  .clinic-orbit__node--billing,
  .clinic-orbit__node--stats,
  .clinic-orbit__node--policies,
  .clinic-orbit__node--compliance {
    gap: 5px;
    font-size: .61rem;
  }
  .clinic-orbit__icon {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
  }
  .clinic-orbit__label {
    overflow-wrap: anywhere;
    hyphens: none;
  }
  .clinic-orbit__node::after {
    width: 13px;
  }
  .clinic-orbit__node--agenda::after,
  .clinic-orbit__node--treatments::after,
  .clinic-orbit__node--consents::after,
  .clinic-orbit__node--stats::after,
  .clinic-orbit__node--compliance::after {
    right: -13px;
  }
  .clinic-orbit__node--history::after,
  .clinic-orbit__node--prescriptions::after,
  .clinic-orbit__node--policies::after,
  .clinic-orbit__node--billing::after {
    left: -13px;
  }
  .clinic-orbit__node--agenda::before,
  .clinic-orbit__node--treatments::before,
  .clinic-orbit__node--consents::before,
  .clinic-orbit__node--stats::before,
  .clinic-orbit__node--compliance::before {
    right: -26px;
  }
  .clinic-orbit__node--history::before,
  .clinic-orbit__node--prescriptions::before,
  .clinic-orbit__node--policies::before,
  .clinic-orbit__node--billing::before {
    left: -26px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .clinic-orbit__ring,
  .clinic-orbit__node,
  .clinic-orbit-fit > .clinic-orbit::after {
    animation: none !important;
  }
  .clinic-orbit__ring {
    opacity: .32;
  }
}

/* Onboarding mobile: el foco vive en la card completa. Las cards secundarias
   quedan sobre el fondo global y todas reservan el mismo alto visual. */
@media (max-width: 768px) {
  .onboarding--master.onboarding--carousel {
    background: transparent !important;
  }

  .onboarding--master .onboarding-carousel--vertical .onboarding-carousel__track {
    gap: 18px;
  }

  .onboarding--master .onboarding-row {
    grid-template-rows: var(--onb-copy-h, auto) auto;
    gap: 14px;
    padding: 20px 22px;
    background: transparent;
    border-color: rgba(0, 85, 109, 0.12);
    box-shadow: none;
    opacity: .62;
    transform: translateY(8px) scale(.992);
    transition:
      opacity 520ms cubic-bezier(.16, 1, .3, 1),
      transform 600ms cubic-bezier(.16, 1, .3, 1),
      background-color 380ms ease,
      border-color 380ms ease,
      box-shadow 440ms ease;
  }

  .onboarding--master .onboarding-row.is-active {
    background: #fff;
    border-color: rgba(0, 85, 109, 0.22);
    box-shadow: 0 16px 38px rgba(0, 61, 79, 0.08);
    opacity: 1;
    transform: none;
  }

  /* Evita el doble fade del slide legacy: entrada y salida comparten ahora
     exactamente el mismo timing en la superficie exterior. */
  .onboarding--master .onboarding-row .onboarding-slide,
  .onboarding--master .onboarding-row .onboarding-slide.active {
    min-block-size: var(--onb-copy-h, auto) !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  /* El quinto grafico tenia una proporcion mas alta y alteraba el recorrido.
     Todos usan el mismo wrapper; el dashboard se reduce dentro, sin recorte. */
  .onboarding--master .onboarding-twin,
  .onboarding--master .onboarding-row:last-child .onboarding-twin {
    aspect-ratio: 460 / 172 !important;
  }

  .onboarding--master .onboarding-twin .onboarding-visual--dashboard {
    transform: scale(min(.7544, calc(100cqw / 610px))) !important;
    transform-origin: top center !important;
  }
}

@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
  .onboarding--master .onboarding-row {
    transform: none;
    transition: none;
  }
}

/* Funcionalidades: en móvil la barra y todos sus paneles aprovechan el ancho
   disponible, dejando únicamente 5px de respiración a cada lado. */
@media (max-width: 768px) {
  .capabilities--system > .container {
    width: calc(100% - 10px) !important;
    max-width: none !important;
    margin-inline: 5px !important;
    padding-inline: 0 !important;
  }

  .capabilities--system .capabilities-system,
  .capabilities--system .tabsNavWrap,
  .capabilities--system .tabsNav,
  .capabilities--system .capabilities-panels {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box;
  }

  .capabilities--system .capabilities__badge {
    line-height: 1.05;
  }

  .capabilities--system .capabilities__badge-desktop {
    display: none;
  }

  .capabilities--system .capabilities__badge-mobile {
    display: inline;
  }

  .capabilities--system .mobile-copy-desktop {
    display: none;
  }

  .capabilities--system .mobile-copy-only {
    display: inline;
  }

  .capabilities--system [data-feature-panel="facturacion"] .capability-panel__billing-title .mobile-copy-only {
    display: inline;
  }
}

/* Funcionalidades · composición móvil real
   ----------------------------------------
   El cambio a una sola columna no bastaba: varios grids internos conservaban
   su ancho mínimo de escritorio y ensanchaban el copy antes de ser recortados
   por la card. Aquí el marco es la fuente de verdad para los ocho paneles. */
@media (max-width: 768px) {
  .capabilities--system {
    overflow: clip;
  }

  .capabilities--system .capabilities-panels {
    border-radius: 24px;
  }

  .capabilities--system .capability-panel,
  .capabilities--system .capability-panel.active {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 24px;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    padding: 50px clamp(18px, 5vw, 24px) 22px !important;
    box-sizing: border-box;
    overflow: hidden;
  }

  .capabilities--system .capability-panel__copy,
  .capabilities--system .capability-panel__visual,
  .capabilities--system .tabPanelVisual,
  .capabilities--system .software-mock,
  .capabilities--system .agendaMock,
  .capabilities--system .historyMock,
  .capabilities--system .txMock,
  .capabilities--system .prescriptionMock,
  .capabilities--system .invoiceMockFit,
  .capabilities--system .invoiceMock,
  .capabilities--system .dashboard-mock,
  .capabilities--system .pzMock {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }

  .capabilities--system .capability-panel__copy {
    padding-top: 0;
  }

  .capabilities--system .capability-panel__copy h3,
  .capabilities--system .capability-panel__copy p {
    width: 100%;
    min-width: 0;
    max-width: none;
    box-sizing: border-box;
    white-space: normal;
    word-break: normal;
    overflow-wrap: break-word;
  }

  .capabilities--system .capability-panel__copy h3 {
    margin: 12px 0 14px !important;
    font-size: clamp(1.7rem, 7.2vw, 2.15rem);
    line-height: 1.1;
    letter-spacing: -.025em;
  }

  .capabilities--system .capability-panel__copy p {
    margin: 0 0 14px;
    font-size: clamp(.96rem, 3.7vw, 1.03rem);
    line-height: 1.58;
  }

  .capabilities--system .capability-panel__copy p + p {
    margin-top: 0;
  }

  .capabilities--system .capability-panel__visual {
    overflow: hidden;
    border-radius: 18px;
  }

  .capabilities--system .software-mock {
    padding: clamp(10px, 3vw, 14px);
    border-radius: 20px;
  }

  .capabilities--system .software-topbar {
    min-width: 0;
    padding: 10px 11px;
    gap: 8px;
  }

  .capabilities--system .software-topbar > * {
    min-width: 0;
  }

  /* Tratamientos: en una pantalla estrecha priorizamos código, tratamiento,
     sesiones y precio; paciente anonimizado y pendiente siguen en desktop. */
  .capabilities--system .txMockHead,
  .capabilities--system .txMockRow {
    grid-template-columns: 34px minmax(92px, 1fr) 64px 48px;
    gap: 6px;
    padding-inline: 9px;
  }

  .capabilities--system .txMockHead > :nth-child(3),
  .capabilities--system .txMockRow > :nth-child(3),
  .capabilities--system .txMockHead > :nth-child(6),
  .capabilities--system .txMockRow > :nth-child(6) {
    display: none;
  }

  .capabilities--system .txMockTx,
  .capabilities--system .txMockTx strong,
  .capabilities--system .txMockTx small {
    min-width: 0;
    overflow-wrap: break-word;
  }

  /* Los dashboards y el portal conservan la lectura sin forzar un lienzo
     horizontal mayor que la propia card. */
  .capabilities--system .dashboard-mock--v2 .dash-kpis {
    gap: 7px;
  }

  .capabilities--system .dashboard-mock--v2 .dash-kpi {
    min-width: 0;
    padding: 11px 9px;
  }

  .capabilities--system .dashboard-mock--v2 .dash-kpi strong {
    font-size: clamp(1.15rem, 5vw, 1.45rem);
    overflow-wrap: anywhere;
  }

  .capabilities--system .pzKpis {
    min-width: 0;
    gap: 6px;
  }
}

@media (max-width: 380px) {
  .capabilities--system .capability-panel,
  .capabilities--system .capability-panel.active {
    padding-inline: 15px !important;
  }

  .capabilities--system .capability-panel__copy h3 {
    font-size: clamp(1.55rem, 8vw, 1.8rem);
  }

  .capabilities--system .capability-panel__copy p {
    font-size: .94rem;
  }

  .capabilities--system .txMockHead,
  .capabilities--system .txMockRow {
    grid-template-columns: 31px minmax(82px, 1fr) 57px;
  }

  .capabilities--system .txMockHead > :nth-child(5),
  .capabilities--system .txMockRow > :nth-child(5) {
    display: none;
  }
}