/* ============================================================
   Layout: contenedor, rejilla de 12 y ritmo de sección
   ============================================================ */

.contenedor {
    width: 100%;
    max-width: var(--ancho-max);
    margin-inline: auto;
    padding-inline: var(--margen);
}

.contenedor--ancho {
    max-width: none;
    padding-inline: var(--margen);
}

.rejilla {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--gutter);
}

.seccion {
    position: relative;
    padding-block: var(--seccion);
}

.seccion--compacta {
    padding-block: calc(var(--seccion) * 0.6);
}

.seccion--sin-superior {
    padding-top: 0;
}

/* Cabecera de sección: etiqueta + título + entrada */
.cabecera-seccion {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--gutter);
    align-items: end;
    margin-bottom: clamp(3rem, 7vh, 6rem);
}

.cabecera-seccion__titulo {
    grid-column: 1 / span 7;
}

.cabecera-seccion__entrada {
    grid-column: 9 / span 4;
    padding-bottom: 0.4rem;
}

.cabecera-seccion .etiqueta {
    margin-bottom: 1.5rem;
}

/* Línea divisoria fina, muy usada en el sistema */
.linea {
    height: 1px;
    background: var(--vacio-4);
    border: 0;
    width: 100%;
}

/* Bloque de dos columnas asimétricas */
.dos-columnas {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--gutter);
    align-items: start;
}

.dos-columnas__izq {
    grid-column: 1 / span 5;
}

.dos-columnas__der {
    grid-column: 7 / span 6;
}

/* Utilidades mínimas y con nombre propio */
.apilado {
    display: flex;
    flex-direction: column;
}

.apilado--sm {
    gap: 0.75rem;
}

.apilado--md {
    gap: 1.5rem;
}

.apilado--lg {
    gap: 3rem;
}

.fila {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}