/* AreasTagsSection.css — Título, texto y etiquetas en píldora, centradas. Nodos 4031:90933 (PC,
   1280), 4031:91110 (tablet, 768) y 4031:91287 (mobile, 375). Tipografía base: site.css.

   SIN DESBORDES: título (100), texto (300) y cada etiqueta (40) bajan de renglón; una etiqueta
   más larga que la pantalla se corta dentro de su píldora. Las etiquetas se envuelven a otra fila. */

/* --- Sección. --- */
.AreasTagsSection {
    width: 100%; /* Ocupa el ancho de la ventana. */
    background-color: #ffffff; /* Fondo del nodo. */
    font-family: var(--font-brand); /* Pila de marca. */
}

    .AreasTagsSection *,
    .AreasTagsSection *::before,
    .AreasTagsSection *::after {
        box-sizing: border-box; /* Medidas predecibles. */
    }

    .AreasTagsSection :where(h2, p, ul) {
        margin: 0; /* El espaciado lo pone el contenedor. */
    }

    .AreasTagsSection :where(ul) {
        padding: 0; /* Sin sangría de lista. */
        list-style: none; /* Sin viñetas. */
    }

.AreasTagsSection-inner {
    display: flex; /* Piezas apiladas. */
    flex-direction: column; /* Ídem. */
    align-items: center; /* Centradas. */
    gap: 10px; /* Separación del nodo. */
    width: 100%; /* Ancho disponible. */
    max-width: var(--container-max-width, 1600px); /* Techo del contenido. */
    margin-inline: auto; /* Centrado. */
    padding: 56px 48px; /* Relleno del nodo. */
    text-align: center; /* Texto centrado. */
}

.AreasTagsSection-title {
    max-width: 100%; /* No desborda. */
    font-size: 26px; /* Tamaño del nodo. */
    font-weight: 900; /* Black del nodo. */
    line-height: 1.2; /* Interlineado de titular. */
    color: #0f0f12; /* Casi negro del nodo. */
    overflow-wrap: anywhere; /* Una palabra larga no desborda. */
}

.AreasTagsSection-description {
    max-width: 100%; /* No desborda. */
    font-size: 15px; /* Tamaño del nodo. */
    line-height: 1.4; /* Interlineado. */
    color: #5c5e63; /* Gris del nodo. */
    white-space: pre-line; /* Respeta los saltos de línea del editor. */
    overflow-wrap: anywhere; /* Una palabra larga no desborda. */
}

/* --- Etiquetas: se envuelven a otra fila, centradas. --- */
.AreasTagsSection-tags {
    display: flex; /* En fila. */
    flex-wrap: wrap; /* Bajan si no caben. */
    justify-content: center; /* Centradas. */
    gap: 14px; /* Separación del nodo. */
    width: 100%; /* Todo el ancho. */
    padding-top: 16px; /* Relleno del nodo. */
}

.AreasTagsSection-tag {
    display: flex; /* Punto y texto en línea. */
    align-items: center; /* Centrados. */
    gap: 8px; /* Separación del nodo. */
    max-width: 100%; /* Una etiqueta larga no sale de la pantalla. */
    padding: 11px 18px; /* Relleno del nodo. */
    border: 1px solid #dedee0; /* Borde del nodo. */
    border-radius: 30px; /* Píldora del nodo. */
    background-color: #ffffff; /* Fondo del nodo. */
}

.AreasTagsSection-tag-dot {
    flex: none; /* No se comprime. */
    width: 8px; /* Tamaño del nodo. */
    height: 8px; /* Ídem. */
    border-radius: 50%; /* Círculo. */
    background-color: #429cde; /* Celeste del punto del nodo. */
}

.AreasTagsSection-tag-text {
    min-width: 0; /* Puede encogerse dentro de la píldora. */
    font-size: 14px; /* Tamaño del nodo. */
    font-weight: 600; /* Semibold del nodo. */
    line-height: 1.25; /* Interlineado si baja de renglón. */
    color: #243746; /* Azul noche del nodo. */
    text-align: left; /* Si baja de renglón, alineado a la izquierda dentro de la píldora. */
    overflow-wrap: anywhere; /* Una palabra larga no desborda. */
}

/* --- Mobile: hasta 767px (nodo 4031:91287). --- */
@media (max-width: 767px) {

    .AreasTagsSection-inner {
        padding: 56px 20px; /* Relleno del nodo. */
    }

    .AreasTagsSection-tags {
        gap: 14px 8px; /* Separación del nodo. */
    }
}