/**
 * Base Styles
 */

body {
  background-color: var(--color-brand-primary-04);
  font-family: var(--font-primary);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--color-neutral-black);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Fondo específico para HOME */
body.home {
  background-color: var(--color-brand-primary-01);
}

/* Flexbox */
.flex {
  display: flex;
}

.flex-between {
  display: flex;
  justify-content: space-between;
}

.flex-around {
  display: flex;
  justify-content: space-around;
}

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flex-column {
  display: flex;
  flex-direction: column;
}

.flex-column-center {
  display: flex;
  align-items: center;
  flex-direction: column;
}

.flex-justify-end {
  display: flex;
  justify-content: flex-end;
}

.flex-align-center {
  display: flex;
  align-items: center;
}

.flex-align-end {
  display: flex;
  align-items: flex-end;
}

.flex-wrap {
  display: flex;
  flex-wrap: wrap;
}

/* text-align */
.text-center {
  text-align: center;
}

/* gaps */
.gap-xs {
  gap: 8px;
}

.gap-sm {
  gap: 12px;
}

.gap-m {
  gap: 16px;
}

.gap-md {
  gap: 24px;
}

.gap-lg {
  gap: 32px;
}

.gap-large {
  gap: 48px;
}

.gap-xl {
  gap: 64px;
}

.gap-xxl {
  gap: 80px;
}

/* Spacing */
.w-100 {
  width: 100%;
}

.margin-sides-xs {
  margin-left: 8px;
  margin-right: 8px;
}

.margin-bottom-s {
  margin-bottom: 16px;
}

.small-box {
  width: 50%;
  text-align: center;
}
@media (max-width: 768px) {
  .small-box {
    width: 100%;
    /* text-align: start; */
  }
}

/* Links */
a {
  color: var(--color-neutral-black);
  text-decoration: none;
  transition: var(--transition-base);
}

/* Images */
img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

/* Divider */
.divider {
  border: 1px solid #bbb;
}

/* breadcrumb */
.breadcrumb {
  align-items: baseline;
  display: flex;
  gap: 8px;
}
.breadcrumb a {
  color: var(--color-brand-primary-01);
  font-size: 14px;
  font-weight: 700;
}
.breadcrumb span {
  color: var(--color-brand-primary-01);
  font-size: 14px;
  font-weight: 500;
}

/* FONDOS CON OPACIDAD */
.bg-opacidad-01 {
  background-color: var(--opacidad-01);
}

.bg-opacidad-02 {
  background-color: var(--opacidad-02);
}

.bg-opacidad-03 {
  background-color: var(--opacidad-03);
}

.bg-opacidad-04 {
  background-color: var(--opacidad-04);
}

.bg-opacidad-05 {
  background-color: var(--opacidad-05);
}

/* TEXTOS CON OPACIDAD */
.text-opacidad-01 {
  color: var(--opacidad-01);
}

/* WordPress accessibility */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}