/* ==========================================================================
   Páginas editables (14/10/2026) — diseño del contenido.
   El texto se edita como siempre en el editor visual: aquí solo se da forma
   automática a los títulos, a los nombres de sección, a los emails y al enlace
   del mapa. No hace falta tocar nada de esto al editar.
   ========================================================================== */

.pe-contenido {
    color: #1f2937;
    font-size: 1rem;
    line-height: 1.7;
}

/* Títulos de bloque: barra morada debajo, para separar bien las partes */
.pe-contenido h2 {
    margin: 2.4rem 0 1.1rem;
    padding: 0 0 0.5rem;
    border-bottom: 3px solid #622599;
    color: #622599;
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    line-height: 1.25;
}
.pe-contenido h2:first-child {
    margin-top: 0;
}

/* Nombre de cada sección: etiqueta de color (los mismos colores que la agenda) */
.pe-contenido h3 {
    margin: 1.8rem 0 0.7rem;
    font-size: 1.1rem;
    font-weight: 700;
}
.pe-contenido h3 .badge-seccion {
    display: inline-block;
    padding: 8px 20px !important;
    border-radius: 999px;
    font-size: 1rem !important;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    line-height: 1.2;
    color: #ffffff;
}

/* Texto normal: un poco más aireado */
.pe-contenido p {
    margin: 0 0 0.9rem;
}

/* Etiquetas en negrita (cargos, "Horario de las reuniones", "Email"...) */
.pe-contenido p strong {
    color: #374151;
    font-weight: 700;
}

/* Emails: pastilla morada, fácil de pulsar en el móvil */
.pe-contenido a[href^="mailto:"] {
    display: inline-block;
    margin: 2px 0;
    padding: 2px 12px;
    border-radius: 999px;
    background: #f3e8ff;
    color: #622599;
    font-weight: 600;
    text-decoration: none;
    word-break: break-all;
}
.pe-contenido a[href^="mailto:"]:hover {
    background: #622599;
    color: #ffffff;
}

/* Enlace del mapa: pastilla verde */
.pe-contenido a[href*="maps"] {
    display: inline-block;
    margin-top: 6px;
    padding: 6px 16px;
    border-radius: 999px;
    background: #ecfdf5;
    color: #065f46;
    font-weight: 700;
    text-decoration: none;
    border: 1px solid #a7f3d0;
}
.pe-contenido a[href*="maps"]:hover {
    background: #065f46;
    color: #ffffff;
}

/* Enlaces de texto normal (sin ser emails ni mapa) */
.pe-contenido a:not([href^="mailto:"]):not([href*="maps"]) {
    color: #622599;
}

/* Móvil: menos margen lateral y letra un poco más pequeña en los títulos */
@media (max-width: 640px) {
    .pe-contenido {
        font-size: 0.97rem;
    }
    .pe-contenido h2 {
        font-size: 1.2rem;
    }
}