/* ─── CABECERA FORMACIÓN ─── */
.logo-txt {
    filter: brightness(0) invert(1);
}

.formacionprinc {
    position: relative;
    background-image: url(../img/fondoforma.jpg);
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    min-height: 55vh;
    display: flex;
    align-items: center;
    padding: 6rem 0 6rem;
    overflow: hidden;
}

.formacionprinc::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: rgba(11, 16, 52, 0.684);
    z-index: 0;
}

.formacionprinc .container {
    text-align: center;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

}

.formacionprinc .titulo-seccion {
    margin-bottom: 0;
}



.formacionprinc .titulo-seccion h2 {
    font-size: clamp(2.4rem, 5vw, 3.4rem);
    color: var(--white);
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.752);
}

/* Línea separadora bajo el título */
.formacionprinc .titulo-seccion h2::after {
    content: '';
    display: block;
    width: 28rem;
    height: 2px;
    background: var(--teal);
    margin: 1.25rem auto 0;
}

.formacionprinc .titulo-seccion p {
    margin-top: 1.5rem;
    color: rgba(255, 255, 255, .82);
    max-width: 580px;
    font-size: 1rem;
    line-height: 1.75;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.692);
}



/* ═══════════════ FORMACIÓN ═══════════════ */
.formacion {
    background: var(--gray-bg);
    padding: 3rem 0 6rem;
}

.formacion-año {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.formacion-año::before,
.formacion-año::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}

.formacion-año span {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--teal-dark);
    padding: .3rem 1rem;
    border: 1px solid var(--teal);
    border-radius: var(--radius-lg);
    white-space: nowrap;
}

.formacion-lista {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}

.formacion .filtros {
    margin-bottom: 3rem;
}

.formacion .filtros ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: .6rem;
    list-style: none;
}

.formacion .filtros li {
    padding: 0;
}

.formacion .filtros li button {
    padding: .45rem 1.25rem;
    border-radius: var(--radius-lg);
    border: 1.5px solid var(--teal);
    background: transparent;
    color: var(--teal-dark);
    font-family: var(--font-enlaces);
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .04em;
    cursor: pointer;
    transition: background var(--transition), color var(--transition), box-shadow var(--transition);
}

.formacion .filtros li button:hover {
    background: var(--teal-soft);
    box-shadow: 0 2px 12px rgba(34, 205, 231, .18);
}

.formacion .filtros li button.active {
    background: var(--teal-dark);
    border-color: var(--teal-dark);
    color: var(--white);
    box-shadow: 0 4px 16px rgba(14, 143, 163, .28);
}



/* CURSOS------------------------------------- */

.curso-card {
    background: var(--white);
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    border-left: 4px solid var(--teal);
    padding: 1.75rem 2rem;
    box-shadow: var(--shadow-soft);
    transition: transform var(--transition), box-shadow var(--transition);
}

.curso-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-deep);
}

.curso-titulo {
    font-size: .97rem;
    font-weight: 700;
    color: var(--navy);
    line-height: 1.45;
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border);
}

.curso-meta {
    display: grid;
    grid-template-columns: auto 1fr;
    row-gap: .55rem;
    column-gap: 1.25rem;
    align-items: baseline;
}

.curso-meta li {
    display: contents;
}

.meta-label {
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--gray);
    white-space: nowrap;
}

.meta-val {
    font-size: .88rem;
    color: var(--gray-mid);
}

.curso-enlace {
    color: var(--teal-dark);
    font-weight: 600;
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    transition: color var(--transition);
}

.curso-enlace:hover {
    color: var(--teal);
    text-decoration: underline;
}

/* ── Vista Comunidad: acordeón 3 columnas ── */
.comunidad-vista {
    display: flex;
    flex-direction: column;
    gap: .45rem;
    padding-top: 2rem;
}

.comunidad-org {
    background: var(--white);
    border: 1px solid var(--border);
    border-left: 4px solid var(--teal);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    transition: border-left-color .2s, box-shadow .2s;
}
.comunidad-org:hover {
    border-left-color: var(--teal-dark);
    box-shadow: var(--shadow-deep);
}
.comunidad-org.is-open {
    border-left-color: var(--teal-dark);
    box-shadow: 0 6px 24px rgba(14,143,163,.14);
}

/* Botón cabecera */
.comunidad-org-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .95rem 1.25rem;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: var(--font-enlaces);
    font-size: .88rem;
    font-weight: 700;
    color: var(--navy);
    transition: color .2s, background .2s;
}
.comunidad-org-btn:hover { color: var(--teal-dark); background: rgba(14,143,163,.04); }
.comunidad-org.is-open .comunidad-org-btn { color: var(--teal-dark); background: rgba(14,143,163,.06); }
.comunidad-org-btn span:first-child { flex: 1; }

.comunidad-org-count {
    font-size: .67rem;
    font-weight: 700;
    color: var(--teal-dark);
    background: var(--teal-soft);
    border: 1px solid rgba(14,143,163,.2);
    border-radius: 20px;
    padding: .18rem .65rem;
    flex-shrink: 0;
}

.comunidad-chevron {
    flex-shrink: 0;
    color: var(--gray);
    transition: transform .3s, color .2s;
}
.comunidad-org.is-open .comunidad-chevron {
    transform: rotate(180deg);
    color: var(--teal-dark);
}

/* Lista de cursos */
.comunidad-org-cursos {
    list-style: none;
    display: flex;
    flex-direction: column;
    max-height: 0;
    overflow: hidden;
    transition: max-height .38s cubic-bezier(.4,0,.2,1);
    border-top: 0px solid var(--border);
}
.comunidad-org.is-open .comunidad-org-cursos {
    max-height: 9999px;
    border-top-width: 1px;
}

.comunidad-org-curso {
    font-size: .82rem;
    color: var(--gray-mid);
    line-height: 1.45;
    padding: .55rem 1.25rem .55rem 2rem;
    position: relative;
    border-bottom: 1px solid var(--border);
    transition: color .2s, background .2s;
}
.comunidad-org-curso:hover { color: var(--navy); background: rgba(14,143,163,.03); }
.comunidad-org-curso:last-child { border-bottom: none; }
.comunidad-org-curso::before {
    content: '›';
    position: absolute;
    left: 1rem;
    color: var(--teal);
    font-weight: 700;
    font-size: 1rem;
}
.comunidad-org-curso a { color: inherit; text-decoration: none; transition: color var(--transition); }
.comunidad-org-curso a:hover { color: var(--teal-dark); }

/* ══════════════════════════════════════
   RESPONSIVE — FORMACIÓN
   ══════════════════════════════════════ */

/* ── ≤ 1024px  Tablet landscape ── */
@media (max-width: 1024px) {
    .formacionprinc {
        padding: 5.5rem 0 3rem;
        min-height: auto;
    }

    .formacion-lista {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ── ≤ 768px  Tablet portrait ── */
@media (max-width: 768px) {

    /* Primera sección */
    .formacionprinc {
        padding: 6rem 0 3.5rem;
    }

    .formacionprinc .titulo-seccion h2::after {
        width: min(28rem, 80%);
        /* evita overflow en pantallas estrechas */
    }

    .formacionprinc .titulo-seccion h2::before {
        letter-spacing: .1em;
    }

    .formacion-lista {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    .formacion {
        padding: 3.5rem 0 4rem;
    }
}

/* ── ≤ 480px  Móvil pequeño ── */
@media (max-width: 480px) {

    /* Primera sección */
    .formacionprinc {
        padding: 5.5rem 0 3rem;
    }

    .formacionprinc .titulo-seccion h2 {
        font-size: clamp(1.8rem, 7vw, 2.4rem);
    }

    .formacionprinc .titulo-seccion h2::before {
        font-size: .62rem;
        letter-spacing: .08em;
    }

    .formacionprinc .titulo-seccion h2::after {
        width: 75%;
    }

    .formacionprinc .titulo-seccion p {
        font-size: .92rem;
    }

    /* Cursos: vista compacta tipo lista — 18 cards × ~65px en vez de ~200px */
    .formacion {
        padding: 2.5rem 0 3rem;
    }

    .formacion-lista {
        grid-template-columns: 1fr;
        gap: .5rem;
    }

    .curso-card {
        padding: .875rem 1rem;
        border-left-width: 3px;
        border-radius: var(--radius-sm);
        display: flex;
        flex-direction: column;
        gap: .4rem;
    }

    .curso-titulo {
        font-size: .85rem;
        line-height: 1.35;
        margin-bottom: 0;
        padding-bottom: 0;
        border-bottom: none;
    }

    /* Meta: pasar de grid 2 cols a fila flex compacta */
    .curso-meta {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0 .5rem;
    }

    .curso-meta li {
        display: flex;
        align-items: center;
    }

    /* Ocultar Duración y Enlace label — solo quedan Fechas y Organizado por */
    .curso-meta li:nth-child(2) {
        display: none;
    }

    .meta-label {
        display: none;
    }

    /* Fecha: chip visual — el formato dd/mm/yyyy se entiende solo */
    .curso-meta li:nth-child(1) .meta-val {
        background: var(--teal-soft);
        color: var(--teal-dark);
        font-weight: 700;
        font-size: .75rem;
        padding: .15rem .5rem;
        border-radius: 5px;
    }

    /* Organizado por: "por X" con prefijo corto añadido por CSS */
    .curso-meta li:nth-child(3) .meta-val::before {
        content: 'por ';
        font-size: .65rem;
        color: var(--gray);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .04em;
    }

    .meta-val {
        font-size: .8rem;
        color: var(--gray-mid);
    }

    /* Separador entre fecha · colegio */
    .curso-meta li:nth-child(1)::after {
        content: '·';
        color: var(--border);
        margin-left: .5rem;
        font-size: .75rem;
    }

    /* Link como badge pequeño */
    .curso-enlace {
        font-size: .72rem;
        padding: .15rem .55rem;
        background: var(--teal-soft);
        border-radius: 6px;
        letter-spacing: 0;
        text-transform: none;
    }
}

/* ── ≤ 360px  Extra small ── */
@media (max-width: 360px) {
    .formacionprinc {
        padding: 5rem 0 2.5rem;
    }

    .formacionprinc .titulo-seccion h2::after {
        width: 70%;
    }
}