/* Mejoras de la noticia en 2027.
 *
 * Se carga DESPUES de article.css, asi que lo de aqui pisa a lo de alla.
 * article.css es un fichero minificado que ademas trae una regla
 * .section-small .adsbygoogle{display:none!important}; no se toca ese
 * fichero (lo usa la maquetacion de 2026 y es delicate), pero en 2027 el
 * anuncio ya no se mete dentro de una tarjeta .section-small, asi que la
 * regla se neutraliza por si acaso.
 *
 * Lo importante de este fichero son los min-height: sin alto reservado,
 * el hueco del anuncio nace de cero pixeles, la creatividad tarda un
 * instante en cargar y todo lo que hay debajo baja de golpe. Eso es CLS,
 * y el Core Web Vitals lo penaliza. */

/* La regla que escondia los anuncios dentro de las tarjetas. */
.section-small .adsbygoogle { display: block !important; }

/* ---------- Anuncios: hueco reservado ----------
 *
 * Los dos anuncios grandes del cuerpo (tras el titulo y tras la
 * entradilla) y el multiplex del pie. */
.seccion-anuncio {
    margin: 22px 0;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* La reserva va en el hueco, no en el contenedor de arriba, por dos motivos.
 *
 * 1. La etiqueta "Publicidad" va dentro del mismo bloque. Si el alto se
 *    reserva en el contenedor, ese alto no la cubre y al cargar la
 *    creatividad el bloque crece por la etiqueta mas el anuncio.
 *
 * 2. Todos los formatos que se usan en el cuerpo son "fluid" o
 *    "autorelaxed", y los dos devuelven 250px o mas segun que la
 *    creatividad que les toque entre. Se reserva el suelo, que es 250.
 *    Reservar mas deja un hueco en blanco; reservar menos, que es lo que
 *    pasaba con los 180px de antes, baja el contenido de golpe.
 *
 * Comprobado con el navegador: metiendo un bloque de 250px dentro de cada
 * hueco, el pie de la pagina se movia 200px en escritorio y 160px en movil.
 * Con esto ya no se mueve. */
.seccion-anuncio .ad-slot {
    width: 100%;
    min-height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* El <ins> vacio del hueco flex colapsa a 0px (un item flex solo mide su
 * contenido). Con 0 de ancho AdSense responde "No slot size for
 * availableWidth=0" y no abre el hueco. Misma regla que cards-2027.css. */
.seccion-anuncio .ad-slot .adsbygoogle {
    width: 100%;
    max-width: 100% !important;
}

/* Los dos modificadores se conservan porque el HTML los usa, pero ya no
 * aportan alto propio: los tres huecos reservan el mismo suelo de 250px,
 * que es el minimo de los formatos en uso. */
.seccion-anuncio--intro,
.seccion-anuncio--pie { min-height: 0; }

.ad-etiqueta {
    display: block;
    font-size: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #aaa;
    margin-bottom: 8px;
}

/* El anuncio de dentro del texto, que coloca la plantilla contando
 * parrafos. Sin min-height, meterlo entre dos parrafos los separaba. */
.anuncio-en-texto {
    margin: 26px 0;
    min-height: 250px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

/* El recuadro lateral de la barra. Venia con 400x346 fijos; con un
 * anuncio responsivo eso lo deja desbordado o vacio. */
.custom-ad {
    width: 100%;
    max-width: 400px;
    height: auto;
    min-height: 346px;
    margin-left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.custom-ad img { width: 100%; height: auto; }

/* La barra lateral no tenia ninguna regla de tamano en ningun CSS: el
 * <section> es flex y el .section-big crece con flex:2.05, asi que el
 * aside se quedaba aplastado en 20px. Con el .custom-ad a width:100% eso
 * hacia aun mas dano, porque 100% de 20px son 20px: el anuncio no se veia
 * en escritorio. Antes de tocar esto, medido con el navegador: aside de
 * 20x2613 y .custom-ad de 20x346. */
.section-aside {
    flex: 0 0 300px;
    max-width: 300px;
}

/* ---------- Cabecera centrada ----------
 *
 * La cabecera imita al diario: categoria, titulo, entradilla y fecha
 * centrados, todo encima de la foto. */
.jrr-articulo { justify-content: center; }
.jrr-articulo .container { margin-top: 14px; }

/* El anuncio ancla/fijo de AdSense inyecta un style inline sobre los
 * contenedores con max-width puesto: "max-width: <px>; height:auto!important"
 * sobre el .section-big (y height:auto!important tambien arriba). El max-width
 * inline vale 298px, el ancho de la lateral 300x600, y eso aplasta toda la
 * columna: el .container se quedaba en 288px y la pagina salia como una
 * columna estrecha. El inline gana a cualquier CSS normal, asi que la columna
 * se fija con !important. El height:auto!important de arriba es inofensivo. */
.jrr-articulo .section-big {
    width: 100% !important;
    max-width: 980px !important;
}

.jrr-cabecera {
    text-align: center;
    max-width: 820px;
    margin: 0 auto 6px;
    font-family: 'Roboto', sans-serif;
    /* La cabecera de la nota es un <header>, y header.css escribe el estilo del
     * header del sitio con el elemento a pelo, sin clase: "header { }". Eso
     * agarra cualquier <header> del documento, tambien este. Por eso en movil
     * (max-width:800px) el bloque de la categoria, el titular y el subtitular
     * salia con el fondo azul de la marca y una franja amarilla de 5px abajo,
     * que es el kabecero del sitio. En escritorio no se veia porque la regla
     * del fondo azul solo esta dentro de la media query.
     *
     * Es el mismo caso que el de <nav> con las etiquetas del pie, mas abajo.
     * Anular aqui es mejor que cambiar el <header> por un <div>: la etiqueta
     * es correcta (es la cabecera del articulo) y, con un selector de clase,
     * gana al elemento a pelo sin depender del orden de carga de los ficheros.
     * El margin-bottom lo pisa el de arriba, que tambien es de clase. */
    background: none;
    border-bottom: 0;
}

/* El badge sigue siendo .category (article.css le da el fondo amarillo, el
 * radio y el tamano). El .jrr-articulo de delante sube la especificidad al
 * nivel de la regla de article.css (0,3,0): al cargar este fichero despues,
 * con la misma especificidad gana el. Centrado lo hace el text-align:center
 * de .jrr-cabecera, porque .category es inline-block. */
.jrr-articulo .jrr-cabecera .category {
    display: inline-block;
    margin: 0 auto 14px;
}

.jrr-articulo .jrr-cabecera .date {
    display: inline-block;
    margin: 10px 0 0;
}

/* ---------- Etiquetas al pie de la nota ----------
 *
 * Estaban arriba, con un rotulo "Mas de X" que repetia el nombre de la seccion
 * y competia con el titular. Ahora van al final del texto.
 *
 * El comentario de selector sigue siendo necesario por lo de siempre:
 * header.css escribe las reglas del menu con el elemento nav a pelo (fondo
 * amarillo y 40px de alto en la 74, display:none en movil en la 271), y eso
 * agarra cualquier <nav>. nav.jrr-tags-pie (0,1,1) gana a nav (0,0,1). */
nav.jrr-tags-pie {
    display: block;
    background: none;
    height: auto;
    text-align: left;
    margin: 26px 0 4px;
    padding-top: 18px;
    border-top: 1px solid #e0e0e0;
    font-family: 'Roboto', sans-serif;
}

.jrr-tags-pie a.jrr-tag {
    display: inline-block;
    padding: 4px 12px;
    margin: 0 6px 6px 0;
    border: 1px solid #e0e0e0;
    border-radius: 999px;
    background: #fafafa;
    color: #333;
    text-decoration: none;
    font-size: 13px;
    line-height: 1.6;
}
.jrr-tags-pie a.jrr-tag:hover {
    border-color: #EEB811;
    background: #fff7db;
    color: #000;
}

/* ---------- Foto ---------- */
.jrr-foto { margin: 0; }

/* Credito de la foto: encima de la imagen, en la esquina inferior derecha.
 *
 * article.css deja este bloque con position:relative y top:-20px, que lo
 * suben veinte pixeles por encima de donde le toca. Por eso hay que anular
 * los dos: con top:auto y bottom:0 el credito se apoya en el borde de abajo
 * del figure, y position:relative en el figure lo toma como referencia. Sin
* el position del figure, el credito se mediria contra la pagina y se iria
 * al pie del documento entero. */
figure.jrr-foto {
    position: relative;
    /* Mas aire bajo la foto, para que el credito no quede pegado al borde ni
     * la fila de la fecha entre tan cerca de la imagen. */
    margin-bottom: 30px;
}
figure.jrr-foto .fig-caption {
    position: absolute;
    top: auto;
    right: 6px;
    bottom: 6px;
    left: auto;
    margin: 0;
    padding: 0;
    background: none;
    color: #fff;
    /* Sombra para que el texto se lea sobre foto clara sin necesidad de
     * ninguna caja de fondo. */
    text-shadow: 0 1px 3px rgba(0, 0, 0, .85);
    text-align: right;
}

/* ---------- Compartir ---------- */
/* Fila de la fecha y los botones de compartir. Ahora vive dentro de la
 * columna de texto, asi que los iconos quedan centrados con la nota y la
 * publicidad de la derecha arranca a la altura de la foto. */
.jrr-compartir {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 22px;
}
/* Los botones se van al extremo derecho de la columna de texto, que es justo
 * donde empieza el banner lateral. Con margin-left:auto queda pegado a la
 * fecha; lo que se busca es que salten al borde derecho sin pasarse. El
 * espacio entre la columna de texto y el banner lo pone el gap de
 * .jrr-columnas (30px), asi que los iconos nunca invaden la publicidad. */
.jrr-compartir .jrr-comp:first-of-type {
    margin-left: auto;
}
/* La fecha venia de article.css, que la pinta en 14px con el icono de
 * calendario pegado al lado. article.css le da display:inline-block y margin
 * arriba, asi que se recalibra aqui para que quede centrada con los botones. */
.jrr-compartir .date {
    display: flex;
    align-items: center;
    margin: 0;
}
.jrr-compartir .date img {
    margin: 0 6px 0 0;
    vertical-align: middle;
}
.jrr-comp {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    transition: opacity .15s;
}
.jrr-comp:hover { opacity: .85; }
.jrr-comp svg { width: 20px; height: 20px; fill: currentColor; }
.jrr-comp--fb { background: #1877f2; }
.jrr-comp--tw { background: #000; }
.jrr-comp--wa { background: #25d366; }

/* ---------- Columnas: texto + publicidad ---------- */
.jrr-columnas {
    display: flex;
    /* align-items va en stretch, que es el valor por defecto de flex, y antes
     * ponia flex-start a proposito. El problema es que flex-start encoge cada
     * item a la altura de su contenido: .jrr-publi se quedaba con lo justo
     * para su hijo de 600px, y el position:sticky de .jrr-publi-caja se
     * encuentra dentro de un contenedor de exactamente su misma altura. Sin
     * sitio donde desplazarse, el banner no se pegaba nunca y se iba con el
     * scroll desde el principio.
     *
     * Con stretch, .jrr-publi se estira a toda la altura de la fila (la del
     * texto, que es la parte alta) y el sticky ya tiene recorrido: se queda
     * pegado a 20px del borde superior al bajar y acompanha la lectura.
     *
     * Y se suelta solo al llegar al final de esa columna, porque el recorrido
     * del sticky nunca pasa de su contenedor. La seccion de mas noticias va
     * justo despues, asi que el banner no puede pisarla: la acompaña fuera
     * de pantalla mientras ya se lee la cabecera de las relacionadas. */
    align-items: stretch;
    gap: 30px;
}
.jrr-texto { flex: 1 1 auto; min-width: 0; }

.jrr-publi { flex: 0 0 300px; max-width: 300px; }
.jrr-publi-caja {
    position: sticky;
    top: 20px;
    width: 300px;
    min-height: 600px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #fafafa;
    border: 1px solid #eee;
    border-radius: 5px;
    box-sizing: border-box;
}
.jrr-publi-300x600 { width: 100%; height: 600px; }

/* El badge de la categoria pasa a ser enlace al hub de la seccion. Antes era
 * texto suelto dentro de un div, y el div ya trae el fondo amarillo, el
 * padding y el radio: por eso al <a> solo hay que quitarle el subrayado y
 * dejarlo ocupar el ancho del texto. El hover usa el azul de los tags. */
.section-big .container .category a {
    color: #000;
    text-decoration: none;
    display: inline-block;
}
.section-big .container .category a:hover { color: #103F79; }

/* ---------- Lectura ----------
 *
 * El cuerpo usaba line-height de 32px con 18px de letra, que a lo ancho
 * que se le da queda en lineas larguisimas. Bajar el ancho util y subir
 * la medida es lo que mas se nota al leer. */
.section-big .container .description,
.section-big .container .introduction,
.section-big .container .summary {
    max-width: 42em;
    line-height: 1.7;
    font-size: 18px;
}

.section-big .container .description p { margin: 0 0 1.15em; }

.section-big .container .description h2,
.section-big .container .description h3 { margin: 1.6em 0 .6em; }

.section-big .container .description blockquote {
    margin: 1.4em 0;
    padding: 4px 0 4px 16px;
    border-left: 4px solid #05356F;
    color: #444;
}

/* Titulo largo: con 2em fijo se descuadra la caja en moviles. */
.section-big .container .title h1 {
    font-size: clamp(1.5rem, 4.2vw, 2em);
    line-height: 1.25;
    margin-bottom: 12px;
    overflow-wrap: break-word;
}

.section-big .container .summary h2 {
    font-size: clamp(1.05rem, 2.4vw, 1.3em);
    line-height: 1.45;
    color: #555;
}

/* ---------- Movil ---------- */

@media screen and (max-width: 800px) {
    /* En movil los formatos fluid y autorelaxed devuelven la misma cosa o
     * mas, asi que la reserva no baja. Los modificadores ya no llevan alto
     * propio (ver arriba), asi que aqui tampoco se les pone. */
    .anuncio-en-texto,
    .seccion-anuncio .ad-slot { min-height: 250px; }
    .section-big .container .description,
    .section-big .container .introduction,
    .section-big .container .summary { font-size: 17px; line-height: 1.65; }

    /* En movil la barra lateral no cabe: se pone a lo ancho, pero el
     * anuncio se oculta, que es lo que hacia el CSS de 2026. La regla de
     * arriba lo ponia en display:flex y lo enseñaba a 400px de ancho en un
     * movil de 390. */
    .section-aside { flex: none; width: 100%; max-width: 100%; }
    .custom-ad { display: none; }

    /* Este es el ultimo hueco que se quedaba sin alto: es el segundo
     * anuncio de dentro del cuerpo, que solo sale en movil, y article.css
     * lo pone a display:block sin min-height. Medido: 465x0 con
     * min-height en 0px, o sea, el salto estava garantizado.
     *
     * El formato es fluid, que en un movil suele devolver una creatividad
     * de unos 250px, asi que se reservan 250 igual que el anuncio de en
     * medio, que tambien es fluid. No es exacto: si un dia AdSense
     * devolviera 320, quedarian 70px de salto. Es el mismo margen que
     * deja cualquier reserva fija. */
    .mobile-second-ad { min-height: 250px; text-align: center; }

    /* Las dos columnas se apilan. La caja de publicidad de 300x600 no cabe
     * en un movil y ademas tapa media noticia, asi que se oculta entera. */
    .jrr-columnas { display: block; }
    .jrr-publi { display: none; }
}

/* ---------- Mas noticias al pie ----------
 *
 * Bloque de relacionadas del final del articulo: cabecera + las mismas cards
 * que la portada, tres en horizontal.
 *
 * Dos cosas que mandan en el diseño:
 *
 * - El ancho. La cabecera y la rejilla comparten .jrr-relacionadas, que
 *   replica el max-width y el padding de .rejilla (cards-2027.css). Antes la
 *   etiqueta vivia en un <section> suelto, al que article.css le aplica
 *   display:flex y width:85%, y por eso aparecia pegada al margen izquierdo y
 *   desalineada de las tarjetas.
 *
 * - El color. Se usan los dos de la casa: azul #05356F para el texto y
 *   amarillo #EEB811 como acento, igual que el chip de categoria de las
 *   cards. La linea de debajo cierra el bloque y lo separa del anuncio. */
.jrr-relacionadas {
    max-width: 1100px;
    margin: 0 auto 30px;
    padding: 0 15px;
}

/* .rejilla trae su propio max-width y su propio padding de 15px. Anidada
 * dentro de .jrr-relacionadas, que ya tiene los dos, las cards se hundian 15px
 * mas adentro que la cabecera: el mismo desfasaje que se queria eliminar.
 * Aqui se queda solo con la parte de rejilla (columnas y gap), y el ancho y el
 * padding los pone el contenedor, que es compartido con el titular. */
.jrr-relacionadas .rejilla {
    max-width: none;
    margin: 0;
    padding: 0;
}

.jrr-seccion-cabecera {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 15px;
    border-bottom: 2px solid #05356F;
    padding-bottom: 10px;
    margin-bottom: 5px;
}

.jrr-seccion-titulo {
    position: relative;
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    line-height: 1.2;
    font-weight: 700;
    color: #05356F;
    text-transform: uppercase;
    letter-spacing: .3px;
    margin: 0;
    padding-left: 14px;
}

/* El palito amarillo a la izquierda del titulo. Es el mismo acento que usa
 * el chip de categoria de las cards, asi que el bloque se lee como parte de
 * la pagina y no como un cintillo pegado encima. */
.jrr-seccion-titulo::before {
    content: "";
    position: absolute;
    left: 0;
    top: 1px;
    bottom: 1px;
    width: 5px;
    background: #EEB811;
    border-radius: 2px;
}

.jrr-seccion-ver {
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    font-weight: bold;
    color: #1a4b8c;
    text-decoration: none;
    white-space: nowrap;
    transition: color .2s ease-in;
}

.jrr-seccion-ver:hover { color: #EEB811; text-decoration: underline; }

@media (max-width: 800px) {
    /* En movil el titulo puede ocupar dos lineas con nombres largos, asi que
     * la fila pasa a apilarse y el enlace se queda a la derecha en su propia
     * linea, sin quedar comprimido contra el texto. */
    .jrr-seccion-cabecera { flex-wrap: wrap; }
    .jrr-seccion-titulo { font-size: 17px; }
    .jrr-relacionadas { margin-bottom: 25px; }
}