/*
 * CONTENIDOS BASE — Radiocanal
 * Estilos base reutilizables para TODAS las páginas de contenido del template RC.
 * Cargado automáticamente por ContentController antes del CSS específico de cada contenido.
 *
 * Usa variables de /templates/radiocanal/assets/css/template.css
 * Escala: body base = 1.4rem (22.4px con raíz 16px)
 *
 * Exclusivo Radiocanal — NO pertenece al framework.
 *
 * @version 1.0.0
 * @date    2026-06-28
 */

/* ============================================================
   WRAPPER PRINCIPAL
   ============================================================ */

.contenido-wrapper {
    font-family: var(--rc-font-primary, 'Roboto', sans-serif);
    color: var(--rc-gris-oscuro);
    line-height: 1.65;
}

/* ============================================================
   TIPOGRAFÍA — escala obligatoria RC
   ============================================================ */

.contenido-wrapper h1 {
    font-family: var(--rc-font-primary);
    font-size: 2.64rem;
    font-weight: 700;
    color: var(--rc-negro);
    line-height: 1.2;
    margin-bottom: 2rem;
}

.contenido-wrapper h2 {
    font-family: var(--rc-font-primary);
    font-size: 2rem;
    font-weight: 700;
    color: var(--rc-negro);
    line-height: 1.25;
    margin-top: 2.5rem;
    margin-bottom: 1.2rem;
    border-bottom: 2px solid var(--rc-divider);
    padding-bottom: 0.6rem;
}

.contenido-wrapper h3 {
    font-family: var(--rc-font-primary);
    font-size: 1.7rem;
    font-weight: 600;
    color: var(--rc-gris-oscuro);
    line-height: 1.3;
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.contenido-wrapper p {
    font-size: 1.44rem;
    line-height: 1.7;
    color: var(--rc-gris-oscuro);
    margin-bottom: 1.5rem;
}

.contenido-wrapper .lead {
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 1.6;
    color: var(--rc-gris-oscuro);
    margin-bottom: 2rem;
}

/* ============================================================
   LISTAS
   ============================================================ */

.contenido-wrapper ul,
.contenido-wrapper ol {
    font-size: 1.44rem;
    line-height: 1.75;
    margin-bottom: 1.5rem;
    padding-left: 1.8rem;
    color: var(--rc-gris-oscuro);
}

.contenido-wrapper li {
    margin-bottom: 0.6rem;
}

/* ============================================================
   ENLACES
   ============================================================ */

.contenido-wrapper a {
    color: var(--rc-azul-logo);
    text-decoration: none;
    transition: color 0.2s ease;
}

.contenido-wrapper a:hover {
    color: var(--rc-azul-oscuro, #004D99);
    text-decoration: underline;
}

/* ============================================================
   SEPARADORES
   ============================================================ */

.contenido-wrapper hr {
    border: none;
    border-top: 1px solid var(--rc-divider);
    margin: 2.5rem 0;
}

/* ============================================================
   RESPONSIVE — Tablet
   ============================================================ */

@media (max-width: 768px) {
    .contenido-wrapper h1 {
        font-size: 2.2rem;
    }

    .contenido-wrapper h2 {
        font-size: 1.7rem;
    }

    .contenido-wrapper h3 {
        font-size: 1.5rem;
    }

    .contenido-wrapper p,
    .contenido-wrapper ul,
    .contenido-wrapper ol {
        font-size: 1.32rem;
    }
}

/* ============================================================
   RESPONSIVE — Mobile
   ============================================================ */

@media (max-width: 576px) {
    .contenido-wrapper h1 {
        font-size: 1.92rem;
    }

    .contenido-wrapper h2 {
        font-size: 1.56rem;
    }

    .contenido-wrapper p,
    .contenido-wrapper .lead {
        font-size: 1.2rem;
    }
}