/*
 * Contenido: Radio — FM Contacto 91.5 en vivo
 * Contexto: .contenido-radio
 * Exclusivo Radiocanal — NO pertenece al framework.
 *
 * Diseño: card de dos zonas — cabecera azul (branding) + cuerpo blanco (player).
 * Sin imagen de fondo en la página. La imagen decorativa va en el header superior.
 *
 * Escala tipográfica (body base = 1.4rem / 22.4px sobre raíz 16px):
 *   h1              → 2.64rem  (42px)
 *   brand-nombre    → 2rem     (32px)
 *   frecuencia      → 3.2rem   (51px)
 *   en-vivo / ayuda → 1.2rem   (19px)
 *
 * @version 1.1.0
 * @date    2026-06-28
 */

/* ============================================================
   TÍTULO H1
   ============================================================ */

.contenido-radio .radio-h1 {
    font-family: var(--rc-font-primary);
    font-size: 2.64rem;
    font-weight: 700;
    color: var(--rc-azul-logo);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    border-bottom: 3px solid var(--rc-azul-logo);
    padding-bottom: 0.8rem;
    margin-bottom: 2rem;
}

.contenido-radio .radio-h1 i {
    font-size: 2rem;
    color: var(--rc-azul-logo);
}

/* ============================================================
   CARD — contenedor principal
   border-radius: 12px según patrón de bloques RC (coherencia-visual.md)
   ============================================================ */

.contenido-radio .radio-card {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    margin-bottom: 2rem;
    transition: box-shadow 0.3s ease;
}

/* ============================================================
   CABECERA — zona azul con branding de la emisora
   ============================================================ */

.contenido-radio .radio-card-header {
    background: var(--rc-azul-logo);
    padding: 2rem 2rem 2.2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    text-align: center;
}

/* Branding (nombre + frecuencia) */

.contenido-radio .radio-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.1;
}

.contenido-radio .radio-brand-nombre {
    font-family: var(--rc-font-primary);
    font-size: 2rem;
    font-weight: 700;
    color: var(--rc-blanco);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.contenido-radio .radio-brand-frecuencia {
    font-family: var(--rc-font-primary);
    font-size: 3.2rem;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.92);
    letter-spacing: 0.05em;
}

/* Indicador EN VIVO */

.contenido-radio .radio-indicador {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(0, 0, 0, 0.2);
    padding: 0.3rem 1rem;
    border-radius: 2rem;
}

.contenido-radio .radio-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background-color: #ff4444;
    animation: rc-radio-pulse 1.4s ease-in-out infinite;
    flex-shrink: 0;
}

@keyframes rc-radio-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.35; transform: scale(0.8); }
}

.contenido-radio .radio-en-vivo {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--rc-blanco);
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

/* ============================================================
   CUERPO — zona blanca con el reproductor
   ============================================================ */

.contenido-radio .radio-card-body {
    background: var(--rc-blanco);
    padding: 2.5rem 2rem 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.2rem;
}

/* Elemento <audio> */

.contenido-radio .radio-audio {
    width: 100%;
    max-width: 100%;
    border-radius: 8px;
    outline: none;
}

/* Texto de ayuda */

.contenido-radio .radio-ayuda {
    font-size: 1.2rem;
    color: var(--rc-gris-medio);
    width: 100%;
    margin: 0;
    line-height: 1.6;
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    text-align: left;
}

.contenido-radio .radio-ayuda i {
    flex-shrink: 0;
    margin-top: 0.25rem;
    color: var(--rc-gris-medio);
}

.contenido-radio .radio-ayuda span {
    flex: 1;
}

/* ============================================================
   RESPONSIVE — Mobile (<768px)
   ============================================================ */

@media (max-width: 767px) {
    .contenido-radio .radio-h1 {
        font-size: 2rem;
    }

    .contenido-radio .radio-card-header {
        padding: 1.6rem 1.2rem 1.8rem;
    }

    .contenido-radio .radio-brand-frecuencia {
        font-size: 2.6rem;
    }

    .contenido-radio .radio-card-body {
        padding: 1.8rem 1.2rem 1.6rem;
    }

    .contenido-radio .radio-audio {
        max-width: 100%;
    }
}

/* ============================================================
   ACCESIBILIDAD: reducir movimiento
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    .contenido-radio .radio-dot {
        animation: none;
    }
}