.section--width-full,
.section--width-full_contained {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* .section--width-contained no necesita max-width propio: ya vive dentro del .container real de Bootstrap 5 (page.html.twig), que da el ancho máximo por breakpoint. */

/* .section--width-full_contained sí necesita un ancho explícito para .section__content, porque el <section> se sale del flujo normal (100vw) y su hijo queda sin contenedor que lo limite. Se replican los mismos anchos que trae el .container real de Bootstrap 5 en cada breakpoint. */
.section--width-full_contained > .section__content {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 1200px) {
  .section--width-full_contained > .section__content {
    max-width: 1140px;
  }
}

@media (min-width: 1400px) {
  .section--width-full_contained > .section__content {
    max-width: 1320px;
  }
}

.section--fondo-blanco {
  background-color: var(--color-white);
}
.section--fondo-claro {
  background-color: var(--color-neutral-2);
}

.section--spacing-top-none {
  margin-top: 0;
}
.section--spacing-top-xxs {
  margin-top: var(--spacing-xxs);
}
.section--spacing-top-xs {
  margin-top: var(--spacing-xs);
}
.section--spacing-top-sm {
  margin-top: var(--spacing-sm);
}
.section--spacing-top-md {
  margin-top: var(--spacing-md);
}
.section--spacing-top-lg {
  margin-top: var(--spacing-lg);
}
.section--spacing-top-xl {
  margin-top: var(--spacing-xl);
}
.section--spacing-top-xxl {
  margin-top: var(--spacing-xxl);
}
.section--spacing-top-xxxl {
  margin-top: var(--spacing-xxxl);
}
.section--spacing-top-huge {
  margin-top: var(--spacing-huge);
}

.section--spacing-bottom-none {
  margin-bottom: 0;
}
.section--spacing-bottom-xxs {
  margin-bottom: var(--spacing-xxs);
}
.section--spacing-bottom-xs {
  margin-bottom: var(--spacing-xs);
}
.section--spacing-bottom-sm {
  margin-bottom: var(--spacing-sm);
}
.section--spacing-bottom-md {
  margin-bottom: var(--spacing-md);
}
.section--spacing-bottom-lg {
  margin-bottom: var(--spacing-lg);
}
.section--spacing-bottom-xl {
  margin-bottom: var(--spacing-xl);
}
.section--spacing-bottom-xxl {
  margin-bottom: var(--spacing-xxl);
}
.section--spacing-bottom-xxxl {
  margin-bottom: var(--spacing-xxxl);
}
.section--spacing-bottom-huge {
  margin-bottom: var(--spacing-huge);
}

/* row-gap, no gap: .section__content ahora es .row de Bootstrap, que ya reparte el gutter horizontal vía padding en cada .col-*. row-gap solo agrega separación vertical cuando las columnas envuelven a otra línea. */
.section__content {
  row-gap: var(--spacing-lg);
}

/* Si una section queda metida directo en el slot de otra section (sin column de por medio), el <section> ya recibe 12px de padding por ser hijo directo de .row de Bootstrap; sin esto, el -12px de margen del .row interno lo cancela y el contenido se desborda 12px de cada lado. */
.row > .section > .section__content {
  margin-left: 0;
  margin-right: 0;
}

/*
 * Un componente que es en sí mismo otro .row (ej. tarjeta-lista) no es un "leaf" con
 * borde/fondo propio como el caso de arriba: es una grilla que ya maneja sus propios
 * gutters internamente. Si se suelta directo en la section, además del padding externo
 * de .row>* carga también su propio margen negativo (-.5*gutter) para cancelarlo — pero
 * al ser hija única de la fila (sin columnas hermanas), ese margen negativo solo la corre
 * hacia la izquierda sin "recuperar" nada del lado derecho (el ancho de la caja no crece
 * para compensar), dejando un faltante de un gutter completo (24px) en el borde derecho.
 * Se anula tanto el padding externo como el margen propio para que quede a ancho completo
 * limpio, y sus columnas internas (con sus propios paddings) generan el inset simétrico.
 */
.section__content.row > .row {
  padding-left: 0;
  padding-right: 0;
  margin-left: 0;
  margin-right: 0;
  width: 100%;
}

@media (max-width: 768px) {
  .section__content {
    row-gap: var(--spacing-md);
  }

  .section--spacing-top-mobile-none {
    margin-top: 0;
  }
  .section--spacing-top-mobile-xxs {
    margin-top: var(--spacing-xxs);
  }
  .section--spacing-top-mobile-xs {
    margin-top: var(--spacing-xs);
  }
  .section--spacing-top-mobile-sm {
    margin-top: var(--spacing-sm);
  }
  .section--spacing-top-mobile-md {
    margin-top: var(--spacing-md);
  }
  .section--spacing-top-mobile-lg {
    margin-top: var(--spacing-lg);
  }
  .section--spacing-top-mobile-xl {
    margin-top: var(--spacing-xl);
  }
  .section--spacing-top-mobile-xxl {
    margin-top: var(--spacing-xxl);
  }
  .section--spacing-top-mobile-xxxl {
    margin-top: var(--spacing-xxxl);
  }
  .section--spacing-top-mobile-huge {
    margin-top: var(--spacing-huge);
  }

  .section--spacing-bottom-mobile-none {
    margin-bottom: 0;
  }
  .section--spacing-bottom-mobile-xxs {
    margin-bottom: var(--spacing-xxs);
  }
  .section--spacing-bottom-mobile-xs {
    margin-bottom: var(--spacing-xs);
  }
  .section--spacing-bottom-mobile-sm {
    margin-bottom: var(--spacing-sm);
  }
  .section--spacing-bottom-mobile-md {
    margin-bottom: var(--spacing-md);
  }
  .section--spacing-bottom-mobile-lg {
    margin-bottom: var(--spacing-lg);
  }
  .section--spacing-bottom-mobile-xl {
    margin-bottom: var(--spacing-xl);
  }
  .section--spacing-bottom-mobile-xxl {
    margin-bottom: var(--spacing-xxl);
  }
  .section--spacing-bottom-mobile-xxxl {
    margin-bottom: var(--spacing-xxxl);
  }
  .section--spacing-bottom-mobile-huge {
    margin-bottom: var(--spacing-huge);
  }
}