/**
 * Estilos para vistas de contenido - Template Devoto
 * 
 * Aumenta los tamaños de tipografía para mejorar legibilidad
 * en páginas de contenido estático.
 * 
 * Contexto: .contenedor-contenido
 */

/* ========================================
   TIPOGRAFÍA DE CONTENIDOS
   ======================================== */

/* Contenedor principal de contenidos */
.contenedor-contenido {
    font-size: 1.8rem;
    line-height: 1.7;
    color: var(--color-parrafo);
}

/* Párrafos dentro de contenidos */
.contenedor-contenido p,
.cuerpo_contenido,
.cuerpo_contenido p,
#contenidos .contenido-principal,
#contenidos .contenido-principal p {
    font-size: 1.6rem;
    line-height: 1.7;
    margin-bottom: 1.5rem;
    color: var(--color-parrafo);
}
#contenidos .contenedor_listado a .item {
    font-size: 1.2rem;
}
/* Títulos H1 en contenidos */
.contenedor-contenido h1,
.titulo-h1-contenido {
    font-size: 3.2rem;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 2rem;
    line-height: 1.3;
}

/* Títulos H2 en contenidos */
.contenedor-contenido h2,
.subtitulo-h2-contenido {
    font-size: 2.6rem;
    font-weight: 600;
    color: var(--color-secondary);
    margin-top: 3rem;
    margin-bottom: 1.5rem;
    line-height: 1.4;
}

/* Títulos H3 en contenidos */
.contenedor-contenido h3,
.subtitulo-h3-contenido {
    font-size: 2.2rem;
    font-weight: 600;
    color: var(--color-negro);
    margin-top: 2.5rem;
    margin-bottom: 1.2rem;
    line-height: 1.4;
}

/* Títulos H4 en contenidos */
.contenedor-contenido h4 {
    font-size: 2rem;
    font-weight: 600;
    color: var(--color-negro);
    margin-top: 2rem;
    margin-bottom: 1rem;
}

/* Listas en contenidos */
.contenedor-contenido ul,
.contenedor-contenido ol,
.cuerpo_contenido ul,
.cuerpo_contenido ol {
    font-size: 1.6rem;
    line-height: 1.7;
    margin-bottom: 1.5rem;
    padding-left: 2.5rem;
}

.contenedor-contenido li,
.cuerpo_contenido li {
    margin-bottom: 0.8rem;
}

/* Enlaces en contenidos */
.contenedor-contenido a,
.cuerpo_contenido a {
    color: var(--color-primary);
    text-decoration: underline;
    font-weight: 500;
}

.contenedor-contenido a:hover,
.cuerpo_contenido a:hover {
    color: var(--color-primary-hover);
}

/* Texto destacado */
.contenedor-contenido strong,
.cuerpo_contenido strong {
    font-weight: 600;
    color: var(--color-negro);
}

/* Citas */
.contenedor-contenido blockquote,
.cuerpo_contenido blockquote {
    font-size: 2rem;
    font-style: italic;
    border-left: 4px solid var(--color-primary);
    padding-left: 2rem;
    margin: 2rem 0;
    color: var(--color-gray-dark);
}

/* ========================================
   TELÉFONOS ÚTILES
   ======================================== */

/* Títulos de secciones de teléfonos */
.contacto-seccion-titulo,
.telefono-categoria {
    font-size: 2.2rem;
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: 1.5rem;
}

/* Items de teléfonos */
.telefono-item,
.contacto-item {
    font-size: 1.7rem;
    line-height: 1.6;
}

.telefono-numero,
.contacto-numero {
    font-size: 2rem;
    font-weight: 600;
    color: var(--color-primary);
}

/* ========================================
   INFORMACIÓN MUNICIPAL
   ======================================== */

/* Datos de contacto */
.info-contacto p,
.datos-contacto p {
    font-size: 1.7rem;
    line-height: 1.6;
    margin-bottom: 1rem;
}

.info-contacto strong,
.datos-contacto strong {
    font-size: 1.8rem;
    color: var(--color-primary);
}

/* ========================================
   ACORDEONES/DESPLEGABLES
   ======================================== */

/* Sobrescribir estilos globales del acordeón */
#contenidos .accordion-button.btn-accordion {
    font-size: 1.6rem;
}

.accordion-button {
    font-size: 1.6rem;
    font-weight: 600;
}

.accordion-body {
    font-size: 1.7rem;
    line-height: 1.7;
}

/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 768px) {
    .contenedor-contenido,
    .cuerpo_contenido {
        font-size: 1.7rem;
    }
    
    .contenedor-contenido h1,
    .titulo-h1-contenido {
        font-size: 2.8rem;
    }
    
    .contenedor-contenido h2,
    .subtitulo-h2-contenido {
        font-size: 2.4rem;
    }
    
    .contenedor-contenido h3,
    .subtitulo-h3-contenido {
        font-size: 2rem;
    }
    
    .contenedor-contenido ul,
    .contenedor-contenido ol,
    .cuerpo_contenido ul,
    .cuerpo_contenido ol {
        font-size: 1.7rem;
    }
}

@media (max-width: 480px) {
    .contenedor-contenido,
    .cuerpo_contenido {
        font-size: 1.6rem;
    }
    
    .contenedor-contenido h1,
    .titulo-h1-contenido {
        font-size: 2.4rem;
    }
    
    .contenedor-contenido h2,
    .subtitulo-h2-contenido {
        font-size: 2.2rem;
    }
    
    .contenedor-contenido h3,
    .subtitulo-h3-contenido {
        font-size: 1.9rem;
    }
}

/* ========================================
   CONTENIDOS RELACIONADOS
   ======================================== */

/* Aumenta el tamaño del texto (ej. "Mapas") en las tarjetas de
   contenidos relacionados, que por defecto es muy pequeño (0.85rem). */
#contenidos .item-contenido-modulo .servicio-content p {
    font-size: 1.2rem;
}

@media (max-width: 576px) {
    #contenidos .item-contenido-modulo .servicio-content p {
        font-size: 1rem;
    }
}

/* ========================================
   NOTICIAS RELACIONADAS
   ======================================== */

/* El CSS base usa rem pensado para 16px; con 62.5% queda muy chico. */
#contenidos .noticias-relacionadas h3 {
    font-size: 2rem;
}

#contenidos .noticia-categoria {
    font-size: 1.2rem;
}

#contenidos .noticia-fecha {
    font-size: 1.3rem;
}

#contenidos .noticia-titulo {
    font-size: 1.8rem;
}

#contenidos .noticia-resumen {
    font-size: 1.4rem;
}

@media (max-width: 768px) {
    #contenidos .noticias-relacionadas h3 {
        font-size: 1.8rem;
    }

    #contenidos .noticia-titulo {
        font-size: 1.6rem;
    }
}

/* ========================================
   BOTONES DE PLANTILLAS CKEDITOR
   ======================================== */
#contenidos .boton_mas_servicios,
#contenidos .modulo-plantilla-1 .nombre_principal .boton_mas_servicios {
    background: var(--color-primary);
    color: #ffffff;
    border: 0.2rem solid var(--color-primary);
}

#contenidos .boton_mas_servicios:hover,
#contenidos .boton_mas_servicios:focus,
#contenidos .boton_mas_servicios:active,
#contenidos a.boton_mas_servicios:hover,
#contenidos a.boton_mas_servicios:focus,
#contenidos a.boton_mas_servicios:active,
#contenidos .modulo-plantilla-1 .nombre_principal .boton_mas_servicios:hover,
#contenidos .modulo-plantilla-1 .nombre_principal .boton_mas_servicios:focus,
#contenidos .modulo-plantilla-1 .nombre_principal .boton_mas_servicios:active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-secondary) !important;
}