/* Page-owned styles for Termos e Condições */

.termos-main {
  width: 100%;
  padding-block: var(--space-64);
}

@media (min-width: 768px) {
  .termos-main {
    padding-block: var(--space-96);
  }
}

.termos-section {
  width: 100%;
  padding-inline: var(--container-padding-mobile);
}

@media (min-width: 768px) {
  .termos-section {
    padding-inline: var(--container-padding-tablet);
  }
}

@media (min-width: 1024px) {
  .termos-section {
    padding-inline: var(--container-padding-desktop);
  }
}

.termos-texto,
.termos-destaque,
.termos-card {
  width: 100%;
  max-width: 800px;
  margin-inline: auto;
  text-align: left;
}

.termos-texto {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.termos-destaque {
  background-color: var(--color-surface-alt);
  border-radius: var(--radius-medium);
  padding: var(--space-32);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.termos-card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-medium);
  padding: var(--space-24);
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.termos-section + .termos-section {
  margin-top: var(--space-48);
}

@media (min-width: 768px) {
  .termos-section + .termos-section {
    margin-top: var(--space-64);
  }
}

.termos-texto h2,
.termos-destaque h2,
.termos-card h2 {
  margin-block-end: var(--space-24);
}

.termos-texto h3,
.termos-destaque h3,
.termos-card h3 {
  margin-block-end: var(--space-16);
}

.termos-texto p,
.termos-destaque p,
.termos-card p {
  margin-block-end: 0;
}

.termos-texto ul,
.termos-destaque ul,
.termos-card ul {
  margin-block-end: 0;
  padding-inline-start: var(--space-24);
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.termos-texto li,
.termos-destaque li,
.termos-card li {
  margin-block-end: 0;
}

.termos-texto a,
.termos-destaque a,
.termos-card a {
  color: var(--color-accent-sage);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.termos-texto a:hover,
.termos-destaque a:hover,
.termos-card a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.termos-texto strong,
.termos-destaque strong,
.termos-card strong {
  font-weight: 600;
  color: var(--color-text-primary);
}

@media (max-width: 767px) {
  .termos-destaque {
    padding: var(--space-24);
  }

  .termos-card {
    padding: var(--space-16);
  }

  .termos-texto h2,
  .termos-destaque h2,
  .termos-card h2 {
    font-size: 1.75rem;
  }
}