/* Componente seccion (shell, #53): banda con fondo de anillos, puntos o
 * rejilla. Solo tokens de style.css. El fondo va detrás (z-index 0), recortado
 * a la sección y sin capturar el puntero; el contenido, delante. */

.pf-seccion {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    overflow: clip;
    padding-block: var(--pf-space-section);
    color: var(--pf-color-text);
    background-color: var(--pf-color-bg);
}

.pf-seccion--suave {
    background-color: var(--pf-color-bg-alt);
}

.pf-seccion--tinta {
    background-color: var(--pf-color-bg-ink);
}

.pf-seccion__fondo {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

/* Anillos: un cuadrado grande, centrado a un lado (o en medio). */
.pf-seccion--anillos .pf-seccion__fondo .pf-ilustracion {
    position: absolute;
    top: 50%;
    width: min(64rem, 140%);
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
}

.pf-seccion--derecha .pf-seccion__fondo .pf-ilustracion {
    left: 88%;
}

.pf-seccion--centro .pf-seccion__fondo .pf-ilustracion {
    left: 50%;
}

.pf-seccion--izquierda .pf-seccion__fondo .pf-ilustracion {
    left: 12%;
}

/* Puntos y rejilla: llenan la sección, tenues. */
.pf-seccion--puntos .pf-seccion__fondo .pf-ilustracion,
.pf-seccion--rejilla .pf-seccion__fondo .pf-ilustracion {
    opacity: 0.7;
}

.pf-seccion__cabecera {
    max-width: var(--pf-measure);
    margin-bottom: var(--pf-space-xl);
}

.pf-seccion__titulo {
    margin-bottom: var(--pf-space-sm);
}

.pf-seccion__entradilla {
    margin: 0;
    font-size: var(--pf-text-lg);
    color: var(--pf-color-text-soft);
}