/* ==========================================================
   LAYOUT
========================================================== */
.layout-container,
.vt-container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
}

.vt-section {
  padding-block: var(--space-lg);
}

.vt-section--large {
  padding-block: var(--space-xl);
}

.layout__region {
  min-width: 0;
}

/* Layout dos columnas */
.layout--twocol-section {
  margin-inline: calc(var(--space-md) / -2);
}

.layout--twocol-section > .layout__region {
  padding-inline: calc(var(--space-md) / 2);
}

/* Ajuste en móvil/tablet */
@media (max-width: 900px) {
  .layout--twocol-section {
    grid-template-columns: 1fr;
  }
}

/* Layout tres columnas */
.layout--threecol-section {

  margin-inline: calc(var(--space-md) / -2);
}

.layout--threecol-section > .layout__region {
  padding-inline: calc(var(--space-md) / 2);
}

/* Ajuste en móvil horizontal */
@media (min-width: 701px) and (max-width: 900px) and (orientation: landscape) {
  .layout__region,
  .layout--twocol-section > .layout__region {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }
}

/* ==========================================================
   FLUJO DE PARAGRAPHS
========================================================== */

.field--name-field-contenido.field__items {
  display: grid;
  gap: var(--space-xl);
}

/* Evita que los paragraphs añadan espacio vertical propio */
.field--name-field-contenido.field__items > .field__item > .paragraph {
  margin: 0;
}

/* Los layouts ya no deberían meter padding vertical */
.field--name-field-contenido .paragraph--type--layout > .layout,
.field--name-field-contenido .paragraph--type--layout > .layout-wrapper {
  margin-block: 0;
}

/* Si tienes vt-section dentro de los bloques de la home, neutraliza su padding */
.field--name-field-contenido .paragraph--type--layout .vt-section {
  padding-block: 0;
}

/* ==========================================================
   LAYOUT COLUMNS RESPONSIVE GAP
========================================================== */

@media (max-width: 900px) {

  .field--name-field-contenido.field__items {
  gap: var(--space-lg);
  }

  .field--name-field-contenido .layout--twocol-section,
  .field--name-field-contenido .layout--threecol-section {
    display: grid;
    grid-template-columns: 1fr !important;
    gap: var(--space-md);
  }

}

@media (max-width: 900px) {

  .field--name-field-contenido .layout__region + .layout__region {
    margin-top: clamp(2rem, 5vw, 4rem);
  }

}

/* ==========================================================
   COLUMNAS ANIDADAS / CONTAINER DUPLICADO
========================================================== */

.field--name-field-contenido .layout .layout .vt-container,
.field--name-field-contenido .layout-wrapper .layout-wrapper .vt-container {
  max-width: none;
  padding-inline: 0;
  margin-inline: 0;
}