/* ==========================================================================
   15-AMBITOS: Espaciado de la plantilla de páginas Ámbito

   Todas las clases deben añadirse en el editor Gutenberg:
   Inspector de bloque → Avanzado → Clase CSS adicional

   ESCALA DE PRESETS USADA:
   --wp--preset--spacing--20  →  2x-pequeño
   --wp--preset--spacing--30  →  X-pequeño
   --wp--preset--spacing--40  →  pequeño
   --wp--preset--spacing--50  →  medio
   --wp--preset--spacing--60  →  grande
   --wp--preset--spacing--70  →  X-grande  (≈ 56 px, igual al gap de columnas)
   --wp--preset--spacing--80  →  2x-grande
   ========================================================================== */


/* ==========================================================================
   CABECERA DE PÁGINA
   Bloque:  breadcrumb  →  .ambito-breadcrumb
            H1          →  .ambito-h1
            P subtítulo →  .ambito-subtitulo
   ========================================================================== */

.ambito-breadcrumb {
    margin-bottom: var(--wp--preset--spacing--30); /* X-pequeño */
}

.ambito-h1 {
    margin-top:    var(--wp--preset--spacing--40); /* pequeño */
    margin-bottom: var(--wp--preset--spacing--30); /* X-pequeño */
}

.ambito-subtitulo {
    margin-bottom: var(--wp--preset--spacing--60); /* grande */
}


/* ==========================================================================
   BLOQUE DOS COLUMNAS (66% / 33%)
   Bloque:  Columnas           →  .ambito-columnas
            Columna izquierda  →  .ambito-col1
            Columna derecha    →  .ambito-col2
   ========================================================================== */

.ambito-columnas {
    padding-top: var(--wp--preset--spacing--30); /* X-pequeño */
}


/* -- COLUMNA 1 -------------------------------------------------------------- */

/* Imagen / vídeo / galería  →  .ambito-media */
.ambito-media {
    margin-bottom: var(--wp--preset--spacing--40); /* pequeño */
}

/* Párrafo de texto  →  .ambito-texto */
.ambito-texto {
    margin-bottom: var(--wp--preset--spacing--50); /* medio */
}

/* Grupo que contiene el H2 "Áreas" y el acordeón  →  .ambito-areas-grupo
   El margin-top aquí crea el espacio real entre el texto y el H2 */
.ambito-areas-grupo {
    margin-top: var(--wp--preset--spacing--60); /* grande */
}

/* H2 "Áreas"  →  .ambito-col1-h2 */
.ambito-col1-h2 {
    margin-bottom: var(--wp--preset--spacing--50); /* medio */
}

/* Acordeón (bloque contenedor)  →  .ambito-acordeon
   Los ítems individuales del acordeón gestionan su propio gap desde el editor */
.ambito-acordeon {
    margin-top: var(--wp--preset--spacing--30); /* X-pequeño */
}


/* -- COLUMNA 2 -------------------------------------------------------------- */

/* H4  →  .ambito-col2-h4 */
.ambito-col2-h4 {
    margin-bottom: var(--wp--preset--spacing--40); /* pequeño */
}

/* Lista de enlaces  →  .ambito-col2-enlaces */
.ambito-col2-enlaces {
    margin-bottom: var(--wp--preset--spacing--50); /* medio */
}

/* Desplegable de documentos  →  .ambito-col2-docs */
.ambito-col2-docs {
    margin-top: var(--wp--preset--spacing--40); /* pequeño */
}


/* ==========================================================================
   SECCIONES INFERIORES  (H2 > H3 > Grid, repetido)
   Bloque:  Grupo de sección  →  .ambito-seccion
            H2 de sección     →  .ambito-h2
            H3 de subsección  →  .ambito-h3
            Grid              →  .ambito-grid
            Último grid       →  .ambito-grid-cierre  (cierra la sección con más aire)
   ========================================================================== */

.ambito-seccion {
    margin-top: var(--wp--preset--spacing--80); /* 2x-grande — separación máxima entre secciones */
}

.ambito-h2 {
    margin-bottom: var(--wp--preset--spacing--50); /* medio */
}

.ambito-h3 {
    margin-top:    var(--wp--preset--spacing--60); /* grande */
    margin-bottom: var(--wp--preset--spacing--50); /* medio */
}

.ambito-grid {
    margin-bottom: var(--wp--preset--spacing--50); /* medio — entre grids consecutivos */
}

.ambito-grid-cierre {
    margin-bottom: var(--wp--preset--spacing--60); /* grande — antes del siguiente H2 */
}


/* ==========================================================================
   SECCIÓN NOTICIAS  (H2 + grid al final de la página)
   Bloque:  H2 noticias    →  .ambito-h2-noticias
            Grid noticias  →  .ambito-grid-noticias
   ========================================================================== */

.ambito-h2-noticias {
    margin-top:    var(--wp--preset--spacing--80); /* 2x-grande */
    margin-bottom: var(--wp--preset--spacing--50); /* medio */
}

.ambito-grid-noticias {
    padding-bottom: var(--wp--preset--spacing--80); /* 2x-grande — cierre de página */
}