/*
 * Comentario: IDENTIDAD DE MARCA de la flota Másviral.
 *
 * Por qué este fichero y no solo el personalizador: la tipografía corporativa
 * (`artnoova`) NO está en Google Fonts, así que Soledad no puede cargarla desde
 * sus ajustes de fuente. Hay que declararla con `@font-face` y encolarla.
 *
 * Los colores van como VARIABLES CSS y no como valores sueltos: un franquiciado
 * con otra paleta puede sobrescribirlas sin tocar este fichero, y así el mismo
 * tema sirve para toda la flota sin bifurcarlo.
 *
 * Paleta tomada del logotipo corporativo (`assets/corporative/SVG editable/`):
 *   azul  #003399  (color principal, la «M» y el texto)
 *   rojo  #b30037  (acento, las flechas de crecimiento)
 *
 * IMPORTANTE: este fichero se carga DESPUÉS del estilo del tema padre y del
 * personalizador, para que sus reglas ganen sin necesidad de `!important`.
 */

/* = Tipografía corporativa ================================================== */

/*
 * `font-display: swap` muestra el texto con la fuente de reserva mientras carga,
 * en lugar de dejarlo invisible: en un periódico, un titular invisible es peor
 * que un titular con otra tipografía durante medio segundo.
 */
@font-face {
    font-family: 'Artnoova';
    src: url('../fonts/artnoova/artnoova-thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Artnoova';
    src: url('../fonts/artnoova/artnoova-thin-italic.ttf') format('truetype');
    font-weight: 100;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Artnoova';
    src: url('../fonts/artnoova/artnoova-light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Artnoova';
    src: url('../fonts/artnoova/artnoova-light-italic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Artnoova';
    src: url('../fonts/artnoova/artnoova-regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Artnoova';
    src: url('../fonts/artnoova/artnoova-italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Artnoova';
    src: url('../fonts/artnoova/artnoova-medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Artnoova';
    src: url('../fonts/artnoova/artnoova-medium-italic.ttf') format('truetype');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Artnoova';
    src: url('../fonts/artnoova/artnoova-semibold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Artnoova';
    src: url('../fonts/artnoova/artnoova-bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Artnoova';
    src: url('../fonts/artnoova/artnoova-bold-italic.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

/* = Variables de marca ====================================================== */

:root {
    --mv-azul: #003399;
    --mv-azul-oscuro: #00246b;
    --mv-rojo: #b30037;
    --mv-tinta: #111111;
    --mv-gris: #565656;
    --mv-borde: #e5e5e5;

    /* Comentario: la fuente se expone como variable para poder cambiarla sin
       reescribir las reglas que la consumen. */
    --mv-fuente: 'Artnoova', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* = Aplicación de la tipografía ============================================= */

/*
 * Comentario: se aplica a los elementos y no con `*` a propósito. Un selector
 * universal también alcanzaría los iconos de fuente del tema (FontAwesome,
 * Penciicon) y los sustituiría por Artnoova, que no tiene esos glifos: los
 * iconos desaparecerían.
 */
body,
p,
li,
td,
th,
input,
textarea,
select,
button,
.penci-entry-content,
.entry-content,
.penci-post-excerpt,
.post-entry-content {
    font-family: var(--mv-fuente);
}

h1,
h2,
h3,
h4,
h5,
h6,
.penci__post-title,
.penci-post-title,
.entry-title,
.widget-title,
.pc_title,
h3.pcbg-title,
.penci-title-bar .title-bar,
.post-title {
    font-family: var(--mv-fuente);
}

/* = Acento de marca ========================================================= */

/*
 * Comentario: el tema pinta el acento (categorías, botones, subrayados) con el
 * rojo de Axarquía, que viene del personalizador importado. Aquí se sustituye por
 * el rojo corporativo de Másviral.
 */
a:hover,
.penci-menu li.menu-item-has-children>a:after,
.penci__post-cat,
.cat>a,
.post-categories a {
    color: var(--mv-rojo);
}

.penci__post-cat,
.cat>a {
    background-color: var(--mv-rojo);
}

/* Comentario: los titulares de las entradas en azul corporativo, que es el color
   con el que el logotipo identifica la marca. */
.penci__post-title a:hover,
.penci-post-title a:hover,
.entry-title a:hover,
h3.pcbg-title a:hover {
    color: var(--mv-azul);
}

/* = Logotipo de la cabecera ================================================= */

/*
 * Comentario: Soledad dimensiona el logo con su propio ajuste y el wordmark de
 * Másviral es muy apaisado (ratio 4.26). Se acota la altura y se deja `width`
 * automático para que escale sin deformarse: forzar las dos dimensiones es la
 * forma habitual de aplastar un logotipo.
 */
.penci-header .penci-logo img,
.penci-header .logo img,
.penci-logo-image img {
    max-height: 52px;
    width: auto;
    height: auto;
}

@media (max-width: 767px) {

    .penci-header .penci-logo img,
    .penci-header .logo img,
    .penci-logo-image img {
        max-height: 40px;
    }
}

/* = Redes sociales de la marca ============================================== */

/*
 * Comentario: los iconos de redes de la cabecera los pinta el shortcode
 * `mv_social` (ver `includes/brand-social.php` en el tema hijo), no el elemento
 * del maquetador del tema.
 *
 * Por qué: el elemento nativo SOLO pinta la red si tiene una URL puesta, y aquí
 * lo que se quiere es mostrar las redes SIN enlazar (todavía no hay cuentas).
 * Como el tema no ofrece ningún filtro para eso (la lista sale de
 * `penci_social_media_array()`, con `return` directo), se usa el elemento
 * `pb_shortcode` del propio maquetador, que ejecuta `do_shortcode()`: no hay que
 * tocar el tema padre y el contenido lo controla la marca.
 */
.mv-social {
    display: flex;
    align-items: center;
    gap: 10px;
    line-height: 1;
}

.mv-social__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Comentario: 34px de área táctil. Por debajo de ~32px un icono no se pulsa
       con fiabilidad sobre pantalla táctil. */
    width: 34px;
    height: 34px;
    border-radius: 50%;
    font-size: 15px;
    text-decoration: none;
    transition: background-color .2s ease, color .2s ease;
}

/* Comentario: sin enlace, el icono es una etiqueta, no un botón: no debe cambiar
   al pasar el ratón (daría a entender que se puede pulsar). */
.mv-social__item[data-linked="0"] {
    cursor: default;
}

/* Estado sobre fondo claro (barra superior blanca). */
.mv-social--on-light .mv-social__item {
    color: var(--mv-azul);
    background-color: rgba(0, 51, 153, .07);
}

.mv-social--on-light .mv-social__item[data-linked="1"]:hover {
    color: #fff;
    background-color: var(--mv-azul);
}

/* Estado sobre fondo oscuro o de color (cabecera pegajosa, barra móvil). */
.mv-social--on-dark .mv-social__item {
    color: var(--mv-azul);
    background-color: rgba(255, 255, 255, .92);
}

.mv-social--on-dark .mv-social__item[data-linked="1"]:hover {
    color: #fff;
    background-color: var(--mv-rojo);
}

/* Comentario: en móvil los iconos se reducen para no robar altura a la cabecera. */
@media (max-width: 767px) {
    .mv-social {
        gap: 7px;
    }

    .mv-social__item {
        width: 30px;
        height: 30px;
        font-size: 13px;
    }
}

/* = Etiqueta de categoría sobre la imagen =================================== */

/*
 * Comentario: DESCUADRE ARREGLADO. El contenedor `.cat` lleva `line-height: 14px`
 * del tema, pero el enlace que va dentro (`.penci-cat-name`) tiene su propio
 * `line-height` calculado (15.6px) y es `inline-block`. Resultado: la caja del
 * contenedor mide 17px, la del enlace 16px y el texto queda descolocado verticalmente
 * respecto a su recuadro cuando el tema le pone fondo o borde.
 *
 * La corrección es que el contenedor y el enlace compartan la MISMA altura de línea,
 * que es como se alinea una etiqueta en línea. Se usa `line-height: 1` y se da el
 * espacio con `padding`, no con la altura de línea: así el recuadro rodea al texto
 * con la misma separación arriba y abajo, independientemente del tamaño de fuente.
 */
.pcbg-above .cat,
.penci-grid-meta .cat,
.header-list-style .cat,
.penci__post-cat,
.post-categories {
    line-height: 1;
    display: inline-block;
    vertical-align: middle;
}

.pcbg-above .cat .penci-cat-name,
.penci-grid-meta .cat .penci-cat-name,
.header-list-style .cat .penci-cat-name,
.penci__post-cat a,
.post-categories a,
.penci-cat-name {
    line-height: 1;
    display: inline-block;
    vertical-align: middle;
}

/*
 * Comentario: la etiqueta del OVERLAY sobre la imagen (`.pcbg-sub-title`) es la que
 * lleva fondo. Se le da un `padding` simétrico y se centra por `flex` en lugar de por
 * altura de línea, que es lo que garantiza el centrado óptico a cualquier tamaño de
 * fuente.
 */
.pcbg-above .pcbg-sub-title {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 10px;
    line-height: 1;
    border-radius: 2px;
}

.pcbg-above .pcbg-sub-title .penci-cat-name {
    padding: 0;
    line-height: 1;
}

/* = Pie de página =========================================================== */

/*
 * Comentario: el pie es un bloque de Elementor importado del medio de referencia,
 * envuelto por el tema en `<div id="footer-section-container">`. Se selecciona por
 * ESE CONTENEDOR y no por `.elementor-650`: 650 es el ID DEL POST en la instalación
 * de origen, así que en la siguiente franquicia el bloque tendrá otro número y las
 * reglas no se aplicarían (sin ningún error, simplemente no se verían).
 *
 * El contenedor lo genera el propio tema (`inc/builder/penci-builder.php`), así que
 * es estable en cualquier instalación.
 *
 * Los FONDOS de las dos filas los reescribe el importador (`seed-builder.php`) en los
 * datos del bloque. Aquí van los matices que Elementor genera en su propio CSS y que
 * no se pueden tocar ajuste a ajuste: enlaces, títulos, separadores.
 */
#footer-section-container,
#footer-section-container .penci-footer,
.penci-footer {
    color: #e8e8e8;
}

/*
 * Comentario: los enlaces del pie en blanco roto y en blanco puro al pasar el ratón.
 * Se incluye el menú legal (`pcfoot-navmenu`), que es el elemento que más se lee ahí.
 */
#footer-section-container a,
.penci-footer a,
.pcfoot-navmenu li a {
    color: #e8e8e8;
    transition: color .18s ease;
}

#footer-section-container a:hover,
.penci-footer a:hover,
.pcfoot-navmenu li a:hover {
    color: #ffffff;
}

/*
 * Comentario: los títulos de las listas del pie («Últimas noticias», «Lo + visto»)
 * en blanco puro, el resto del texto en blanco roto. El contraste hace que se
 * distingan los encabezados sin necesidad de subrayados ni mayúsculas forzadas.
 */
#footer-section-container .elementor-heading-title,
#footer-section-container .widget-title,
.penci-footer .widget-title {
    color: #ffffff;
}

/*
 * Comentario: separador entre las DOS filas del pie. La primera va en azul de marca y
 * la segunda en gris oscuro: sin la línea, el corte entre las dos se lee como un
 * error de maquetación en lugar de como un cambio de sección.
 *
 * Se apunta al elemento interno de Elementor (`.elementor-section`), porque la clase
 * `.elementor-650` del envoltorio es el ID del post en la instalación de origen y no
 * es estable.
 */
#footer-section-container .elementor-section:first-of-type {
    border-bottom: 3px solid rgba(255, 255, 255, .18);
}

/*
 * Comentario: banda de COPYRIGHT. El tema pinta ahí el ajuste
 * `penci_footer_copyright`, que lleva nuestro enlace a Másviral. Se le da el mismo
 * fondo oscuro que al resto del pie para que no quede un escalón de color entre el
 * bloque y la banda legal.
 */
.penci-footer-copyright,
.subfooter-copyright,
.penci-block-footer-copyright {
    background-color: #141414;
    color: #a3a3a3;
    font-size: 13px;
}

.penci-footer-copyright a,
.subfooter-copyright a {
    color: #d4d4d4;
}

.penci-footer-copyright a:hover,
.subfooter-copyright a:hover {
    color: #ffffff;
}

/* Comentario: en móvil las listas del pie se apilan y necesitan aire entre ellas. */
@media (max-width: 767px) {
    #footer-section-container .elementor-section {
        padding-top: 24px;
        padding-bottom: 24px;
    }
}

/* = Hemeroteca ============================================================== */

/*
 * Comentario: el widget de hemeroteca (`includes/brand-hemeroteca.php`). Se pinta
 * como una rejilla de días: un periódico se consulta por días («qué salió ayer»),
 * no por «marzo de 2025».
 */
.mv-hemeroteca {
    font-size: 14px;
}

.mv-hemeroteca__label {
    margin: 0 0 10px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--mv-gris);
}

/* Comentario: rejilla de 7 columnas = una semana. Así los días se leen como un
   calendario y no como una lista suelta. */
.mv-hemeroteca__days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    margin-bottom: 14px;
}

.mv-hemeroteca__day {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 6px 2px;
    border: 1px solid var(--mv-borde);
    border-radius: 3px;
    text-decoration: none;
    line-height: 1.1;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.mv-hemeroteca__num {
    font-weight: 600;
    color: var(--mv-tinta);
}

/* Comentario: el número de entradas es información secundaria: más pequeño y en
   gris para que el día destaque. */
.mv-hemeroteca__count {
    font-size: 10px;
    color: var(--mv-gris);
}

.mv-hemeroteca__day:hover {
    background-color: var(--mv-azul);
    border-color: var(--mv-azul);
}

.mv-hemeroteca__day:hover .mv-hemeroteca__num,
.mv-hemeroteca__day:hover .mv-hemeroteca__count {
    color: #fff;
}

.mv-hemeroteca__empty {
    margin: 0 0 14px;
    color: var(--mv-gris);
}

.mv-hemeroteca__months {
    margin: 0 0 14px;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--mv-borde);
}

.mv-hemeroteca__months li {
    margin: 0;
    padding: 6px 0;
    border-bottom: 1px solid var(--mv-borde);
}

.mv-hemeroteca__months a {
    text-decoration: none;
    color: var(--mv-tinta);
}

.mv-hemeroteca__months a:hover {
    color: var(--mv-azul);
}

.mv-hemeroteca__search {
    margin: 0;
}

.mv-hemeroteca__searchlabel {
    display: block;
    margin-bottom: 6px;
    font-size: 12px;
    color: var(--mv-gris);
}

.mv-hemeroteca__searchrow {
    display: flex;
    gap: 6px;
}

.mv-hemeroteca__searchrow input[type="date"] {
    flex: 1 1 auto;
    min-width: 0;
    padding: 6px 8px;
    border: 1px solid var(--mv-borde);
    border-radius: 3px;
    font-size: 13px;
}

.mv-hemeroteca__btn {
    flex: 0 0 auto;
    padding: 6px 14px;
    border: 0;
    border-radius: 3px;
    background-color: var(--mv-azul);
    color: #fff;
    font-size: 13px;
    cursor: pointer;
}

.mv-hemeroteca__btn:hover {
    background-color: var(--mv-azul-oscuro);
}

/* = Buscador de la cabecera ================================================= */

/*
 * Comentario: el campo de búsqueda del topbar se alinea con los iconos sociales que
 * van en la misma celda. Sin esto, el formulario añade altura y descuadra la barra.
 */
.pc-search-form-deskto .pc-searchform,
.pc-builder-element.pc-search-form form {
    display: flex;
    align-items: center;
    margin: 0;
}

.pc-search-form-deskto .search-input,
.pc-builder-element.pc-search-form .search-input {
    height: 34px;
    padding: 0 12px;
    border: 1px solid rgba(0, 51, 153, .22);
    border-radius: 3px 0 0 3px;
    font-size: 13px;
}

.pc-search-form-deskto button,
.pc-builder-element.pc-search-form button {
    height: 34px;
    padding: 0 14px;
    border: 0;
    border-radius: 0 3px 3px 0;
    background-color: var(--mv-azul);
    color: #fff;
    font-size: 13px;
    cursor: pointer;
}

.pc-search-form-deskto button:hover,
.pc-builder-element.pc-search-form button:hover {
    background-color: var(--mv-azul-oscuro);
}

/* Comentario: en móvil el campo visible no cabe en la barra: se oculta y queda el
   icono, que despliega el buscador a pantalla completa como en el tema. */
@media (max-width: 991px) {
    .pc-search-form-deskto {
        display: none;
    }
}