/* -------------------------------------------
 * HEADER
 * ------------------------------------------- */
.ds-header {
  position: relative;
  background-color: var(--ds-color-shape-accent-brand-default);
  color: var(--ds-color-text-accent-brand-soft);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  transition: background 0.4s ease, color 0.4s ease;
}

/* ===========================
   MAIN CONTENT
   =========================== */
.ds-main {
  background-color: var(--ds-color-shape-neutral-soft);
  color: var(--ds-color-text-accent-brand-default);
  transition: background-color 0.4s ease;
  position: relative;
}

.ds-section-content p {
  color: var(--ds-color-text-stronger);
}

/* ===========================
   FOOTER
   =========================== */
.ds-footer {
  background-color: var(--ds-color-primary-darkest);
  color: var(--ds-color-text-neutral-white);
  transition: background 0.4s ease, color 0.4s ease;
}

.ds-footer a {
  color: var(--ds-color-text-neutral-white);
  text-decoration: none;
  transition: color 0.2s ease;
}

.ds-footer a:hover {
  color: var(--ds-color-text-neutral-soft);
}

/* ===========================
   FORM / CHECKBOX SECTION
   =========================== */
.ds-section-form {
  background-color: var(--ds-color-bg-surface);
  color: var(--ds-color-text-accent-brand-default);
  border-top: 1px solid var(--ds-color-primary-light);
  transition: background-color 0.3s ease;
}

.ds-section-form h2 {
  color: var(--ds-color-primary-darker);
}

.ds-section-form .form-check-input {
  accent-color: var(--ds-color-primary-base);
}

/* ===========================
   CARDS / SURFACES
   =========================== */
.ds-card {
  background-color: var(--ds-color-bg-surface);
  color: var(--ds-color-text-accent-brand-default);
  border-radius: 8px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.06);
  padding: 1.5rem;
  transition: background 0.4s ease, box-shadow 0.3s ease;
}

/* -------------------------------------------
 * AJUSTES DE COMPONENTES
 * ------------------------------------------- */
.ds-header__branding {
  position: relative;
  z-index: 1;
  isolation: isolate;
}

.ds-breadcrumb .ds-breadcrumb-item .ds-breadcrumb-link,
.ds-breadcrumb .ds-breadcrumb-item .ds-breadcrumb-link svg,
.ds-breadcrumb-separator svg {
  color: var(--ds-color-primitive-gray-800) !important;
}

.ds-breadcrumb .ds-breadcrumb-item.is-active .ds-breadcrumb-link,
.ds-breadcrumb .ds-breadcrumb-item.is-active span {
  color: var(--ds-color-text-accent-brand-default) !important;
}

.component-section {
  background-color: #fff;
  border-radius: 0.8rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  margin-bottom: 1.5rem;
}

.ds-brand__logo {
  transition: opacity 0.18s ease, transform 0.18s ease;
  color: var(--ds-color-text-neutral-white);
}

.ds-brand.is-swapping .ds-brand__logo {
  opacity: 0;
  transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
  .ds-brand__logo {
    transition: none;
  }
}