/* Correcciones de movil y tablet - 11 de noviembre de 2026.
   Se carga al final para no tocar las reglas anteriores. */

/* ---------------------------------------------------------------
   Hero: en movil y tablet solo categoria + titulo.
   La descripcion se oculta porque sobre 355-400px de alto competia
   con el titulo y empujaba el boton fuera de la tarjeta.
   --------------------------------------------------------------- */
@media (max-width: 900px) {
    .rba-home .hero-copy p { display: none; }
    .rba-home .hero-copy h1 { margin-bottom: 16px; }
}

/* ---------------------------------------------------------------
   Cuerpo de las cajas por programa (ej. "El semaforo").
   .category-panel tenia alto fijo (286px) y .category-body 240px,
   con overflow:hidden heredado de .panel. Al pasar a una columna el
   contenido no entraba y el titulo de la primera noticia quedaba
   cortado. Se liberan los altos y la columna.
   --------------------------------------------------------------- */
@media (max-width: 900px) {
    .rba-home .category-panel,
    .rba-home .category-body,
    .rba-home .category-lead,
    .rba-home .category-lead > a { height: auto; }

    .rba-home .category-lead { overflow: visible; }

    .rba-home .category-lead > a {
        width: 100%;
        padding: 8px 2px 2px;
        display: block;
    }

    .rba-home .category-lead h3 {
        font-size: 17px;
        line-height: 1.22;
        margin: 0 0 6px;
        overflow: visible;
        overflow-wrap: anywhere;
        word-break: normal;
        -webkit-line-clamp: unset;
        display: block;
    }

    /* La descripcion se recorta con elipsis a dos lineas en lugar de
       quedar cortada a la mitad por el alto del panel. */
    .rba-home .category-lead p {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        margin: 0;
    }
}

/* En telefono la caja volvia a dos columnas y dejaba ~170px para el
   titular. Se fuerza una sola columna para que entre completo. */
@media (max-width: 600px) {
    .rba-home .category-body {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }
    .rba-home .category-lead::before { height: 170px; }
    .rba-home .category-lead h3 { font-size: 18px; }
    .rba-home .category-lead p { font-size: 12px; }
}