/* ============================================
   CONDICIONES GENERALES - 360px
   ============================================ */
#condiciones-generales {
  display: flex;
  padding: var(--size-space-64, 64px) var(--360-575-page-margin, 16px)
    var(--size-space-0, 0) var(--360-575-page-margin, 16px);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--size-space-16, 16px);
  border-radius: var(--border-radius-none, 0);
  background: var(--Color-Surface-General-3, #F9F9F9);
}

/* Título */
.titulo {
  text-align: left;
  align-self: stretch;
  color: var(--Color-Content-General-1, #2c2c2c);
  /* Title/XS */
}

/* Contenedor de contenido */
.contenedor-condiciones-generales-content {
  display: flex;
  padding: var(--size-space-0, 0);
  flex-direction: column;
  align-items: flex-start;
  gap: var(--size-space-8, 8px);
  align-self: stretch;
}

.contenedor-condiciones-generales-content-text {
  display: flex;
  padding: var(--size-space-0, 0);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--size-space-0, 0);
  align-self: stretch;
}

/* Texto de condiciones */
.text-condiciones-generales {
  align-self: stretch;
  color: var(--Color-Content-General-2, rgba(71, 71, 71, 0.8));
  font-feature-settings:
    "liga" off,
    "clig" off;
  font-family: IberPangea;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 16px;
  margin-top: 16px;
}

/* Contenedor de documentos/links */
.contenedor-condiciones-generales-docs {
  display: flex;
  width: var(--360-575-page-width, 360px);
  padding: var(--size-space-0, 0) var(--360-575-page-margin, 16px)
    var(--size-space-64, 64px) var(--360-575-page-margin, 16px);
  flex-direction: column;
  align-items: flex-start;
  gap: var(--size-space-32, 32px);
}

.contenedor-condiciones-generales-docs-links {
  display: flex;
  padding: var(--size-space-0, 0);
  flex-direction: column;
  align-items: flex-start;
  gap: var(--size-space-16, 16px);
  align-self: stretch;
}

.contenedor-condiciones-generales-docs-links-colums {
  display: flex;
  padding: var(--size-space-0, 0);
  flex-direction: column;
  align-items: flex-start;
  gap: var(--size-space-8, 8px);
  align-self: stretch;
}

/* Columnas de links - UNIFICADAS */
.docs-links-col1,
.docs-links-col2 {
  display: flex;
  width: 328px;
  padding: 0 var(--size-space-0, 0);
  flex-direction: column;
  align-items: flex-start;
  gap: var(--size-space-8, 8px);
}

/* Link individual */
.doc-link {
  display: flex;
  height: 40px;
  padding: var(--size-space-0, 0);
  align-items: center;
  gap: var(--size-space-4, 4px);
  align-self: stretch;
}

/* ============================================
   MEDIA QUERY 576px
   ============================================ */
@media (min-width: 576px) {
  #condiciones-generales {
    padding: var(--size-space-64, 64px) var(--576-767-page-margin, 48px)
      var(--size-space-0, 0) var(--576-767-page-margin, 48px);
    gap: var(--size-space-16, 16px);
  }

  .contenedor-condiciones-generales-docs {
    display: flex;
    width: var(--576-767-page-width, 576px);
    padding: var(--size-space-0, 0) var(--576-767-page-margin, 42px)
      var(--size-space-64, 64px) var(--576-767-page-margin, 42px);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--size-space-32, 32px);
  }

  .contenedor-condiciones-generales-docs-links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--size-space-16, 16px);
    align-self: stretch;
    width: 100%;
  }

  .contenedor-condiciones-generales-docs-links-colums {
    display: flex;
    padding: var(--size-space-0, 0);
    flex-direction: row;
    align-items: flex-start;
    gap: var(--size-space-24, 24px);
    align-self: stretch;
    flex-wrap: nowrap;
  }

  .docs-links-col1,
  .docs-links-col2 {
    display: flex;
    flex: 1;
    max-width: 234px;
    padding: 0 var(--size-space-0, 0);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--size-space-8, 8px);
  }

  .doc-link {
    flex: 1 0 0;
    display: flex;
    height: 40px;
    padding: var(--size-space-0, 0);
    align-items: center;
    gap: var(--size-space-4, 4px);
    align-self: stretch;
  }
}

/* ============================================
   MEDIA QUERY 768px
   ============================================ */
@media (min-width: 768px) {
  #condiciones-generales {
    padding: var(--size-space-64, 64px) var(--768-991-page-margin, 48px)
      var(--size-space-0, 0) var(--768-991-page-margin, 48px);
    gap: var(--size-space-16, 16px);
  }

  .contenedor-condiciones-generales-docs {
    display: flex;
    width: var(--768-991-page-width, 768px);
    padding: var(--size-space-0, 0) var(--768-991-page-margin, 48px)
      var(--size-space-64, 64px) var(--768-991-page-margin, 48px);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--size-space-32, 32px);
  }

  .contenedor-condiciones-generales-docs-links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--size-space-16, 16px);
    align-self: stretch;
    width: 100%;
  }

  .contenedor-condiciones-generales-docs-links-colums {
    display: flex;
    padding: var(--size-space-0, 0);
    flex-direction: row;
    align-items: flex-start;
    gap: var(--size-space-24, 24px);
    align-self: stretch;
    flex-wrap: nowrap;
  }

  .docs-links-col1,
  .docs-links-col2 {
    display: flex;
    flex: 1;
    max-width: 324px;
    padding: 0 var(--size-space-0, 0);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--size-space-8, 8px);
  }

  .doc-link {
    flex: 1 0 0;
    display: flex;
    height: 40px;
    padding: var(--size-space-0, 0);
    align-items: center;
    gap: var(--size-space-4, 4px);
    align-self: stretch;
  }
}