/*
 * =========================================================
 *  FHardware V2 - Rediseño completo
 *  Interfaz oscura tipo portada de noticias con acento rojo
 *  Se carga tras style.css y dark-mode.css: cualquier
 *  regla de aquí tiene prioridad sobre los estilos base.
 * =========================================================
 */

/* ---------------------------------------------------------
 * 1. VARIABLES DE COLOR
 * --------------------------------------------------------- */

:root {
    /* Paleta FHardware V2 (modo oscuro por defecto) */
    --fh-red: #e11d2e;
    --fh-red-hover: #c51424;
    --fh-bg: #0b0d10;
    --fh-surface: #16191e;
    --fh-surface-2: #0f1216;
    --fh-border: #232830;
    --fh-text: #f4f5f7;
    --fh-text-2: #b9bec6;
    --fh-muted: #8b919a;

    /* Re-mapeo de variables del tema base */
    --bg-primary: var(--fh-bg);
    --bg-secondary: var(--fh-surface-2);
    --bg-content: var(--fh-bg);
    --bg-light: var(--fh-bg);
    --text-primary: var(--fh-text);
    --text-secondary: var(--fh-text-2);
    --text-dark: var(--fh-bg);
    --text-muted: var(--fh-muted);
    --accent-primary: var(--fh-red);
    --link-color: var(--fh-text);
    --border-color: var(--fh-border);
    --category-label-color: #ffffff;
    --menu-bg: #101215;
    --submenu-bg: #171b21;
    --menu-text: #ffffff;
    --footer-bg: #0d1013;
    --footer-text: #ffffff;
    --card-bg-overlay: rgba(6, 8, 10, 0.55);
    --card-text-overlay: #ffffff;
    --accent-green: var(--fh-red);
}

/* Modo claro: misma identidad, fondo blanco */
[data-theme="light"] {
    --fh-bg: #f5f6f8;
    --fh-surface: #ffffff;
    --fh-surface-2: #ffffff;
    --fh-border: #e4e7ec;
    --fh-text: #171b21;
    --fh-text-2: #3d4550;
    --fh-muted: #6a7280;
    --menu-bg: #ffffff;
    --submenu-bg: #f3f4f6;
    --menu-text: #171b21;
    --footer-bg: #101215;
    --footer-text: #ffffff;
}

/* ---------------------------------------------------------
 * 2. BASE
 * --------------------------------------------------------- */

html,
body {
    background: var(--fh-bg);
    color: var(--fh-text);
    scroll-behavior: smooth;
}

body,
input,
select,
textarea,
button {
    font-family: 'Inter', 'Poppins', 'Segoe UI', Arial, sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Inter', 'Poppins', 'Segoe UI', Arial, sans-serif;
    letter-spacing: -0.01em;
}

a {
    color: inherit;
}

/* Separación del contenido respecto a la cabecera fija */
#wrapper {
    padding-top: 86px;
}

/* Gatito de color para estado de "over" (menú móvil) */
.over .menu-on-mobile {
    background: rgba(10, 12, 15, 0.97);
}

/* ---------------------------------------------------------
 * 3. CABECERA (una sola barra oscura, sticky)
 * --------------------------------------------------------- */

#header {
    display: block;
    flex-direction: row;
    padding: 0;
    background: var(--menu-bg);
    border-bottom: 1px solid var(--fh-border);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset;
}

#header .header,
#subheader {
    height: 72px;
    gap: 12px;
}

#header .header>div,
#header .header>nav {
    flex: 0 0 auto;
}

/* Logo */
#header .header>div#branding-menu {
    text-align: left;
    display: flex;
    align-items: center;
}

#header .header>div#branding-menu #site-title {
    display: flex;
    align-items: center;
}

#header img.logo {
    max-height: 44px;
    width: auto;
    display: block;
}

#header #site-title h1 {
    font-size: 22px;
    font-weight: 800;
    color: var(--menu-text);
    margin: 0;
    white-space: nowrap;
}

/* Menú principal */
#header-nav {
    margin-left: auto;
}

#header-nav ul.menu {
    display: flex;
    align-items: center;
    gap: 2px;
    list-style: none;
    margin: 0;
    padding: 0;
}

#header-nav ul.menu>li {
    position: relative;
}

#header-nav ul.menu>li>a {
    display: flex;
    align-items: center;
    padding: 9px 14px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 500;
    color: #dfe2e7;
    text-decoration: none;
    text-transform: none;
    white-space: nowrap;
    transition: background-color .15s ease, color .15s ease;
}

#header-nav ul.menu>li>a:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

/* Elemento activo: botón rojo como en la maqueta */
#header-nav ul.menu>li.current-menu-item>a,
#header-nav ul.menu>li.current-page-ancestor>a,
#header-nav ul.menu>li.current-menu-ancestor>a {
    background: var(--fh-red);
    color: #ffffff;
    font-weight: 600;
}

#header-nav ul.menu>li.current-menu-item>a:hover {
    background: var(--fh-red-hover);
}

/* Sub-desplegables */
#header-nav ul.menu>li.menu-item-has-children>a::after {
    content: "";
    display: inline-block;
    margin-left: 7px;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
    opacity: .8;
}

#header-nav ul.sub-menu {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    min-width: 230px;
    margin: 0;
    padding: 8px;
    list-style: none;
    background: var(--submenu-bg);
    border: 1px solid var(--fh-border);
    border-radius: 12px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity .15s ease, transform .15s ease, visibility .15s;
    z-index: 200;
}

#header-nav ul.menu>li:hover>ul.sub-menu,
#header-nav ul.menu>li:focus-within>ul.sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

#header-nav ul.sub-menu li a {
    display: block;
    padding: 9px 12px;
    border-radius: 8px;
    font-size: 14px;
    color: var(--fh-text-2);
    text-decoration: none;
    text-transform: none;
}

#header-nav ul.sub-menu li a:hover {
    background: rgba(255, 255, 255, 0.07);
    color: #ffffff;
}

/* Acciones de cabecera: búsqueda + modo día/noche */
#header-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    position: relative;
}

#header-actions .subheader-content--search {
    color: #cfd3d8;
    cursor: pointer;
    font-size: 22px;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: background-color .15s ease, color .15s ease;
}

#header-actions .subheader-content--search:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

/* Desplegable de búsqueda */
#search-menu {
    display: none;
    position: absolute;
    top: calc(100% + 14px);
    right: 0;
    width: min(340px, calc(100vw - 40px));
    padding: 10px;
    background: var(--submenu-bg);
    border: 1px solid var(--fh-border);
    border-radius: 12px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
    z-index: 300;
}

#search-menu form.search-form {
    position: relative;
    display: block;
    margin: 0;
}

#search-menu .search-field {
    width: 100%;
    padding: 11px 40px 11px 14px;
    background: var(--fh-surface-2);
    border: 1px solid var(--fh-border);
    border-radius: 8px;
    color: var(--fh-text);
    font-size: 14px;
    outline: none;
}

#search-menu .search-field:focus {
    border-color: var(--fh-red);
}

#search-menu .search-submit {
    display: none;
}

#search-menu .click-search {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--fh-muted);
    cursor: pointer;
}

/* Botón día/noche */
#theme-toggle {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 7px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color .15s ease;
}

#theme-toggle:hover {
    background: rgba(255, 255, 255, 0.08);
}

/* Hamburguesa (móvil) */
#toggle-menu {
    display: none;
}

#toggle-menu .toggle-menu::before {
    color: var(--menu-text);
}

/* ---------------------------------------------------------
 * 4. MENÚ MÓVIL
 * --------------------------------------------------------- */

.menu-on-mobile {
    background: var(--menu-bg);
    /* Por debajo de la cabecera (z-index 1000): así el botón X sigue pulsable */
    z-index: 900;
    top: 0;
    padding-top: 20px;
    padding-bottom: 30px;
}

.menu-on-mobile ul.menu {
    list-style: none;
    text-align: center;
}

.menu-on-mobile ul.menu>li {
    padding: 10px 0;
}

.menu-on-mobile ul.menu>li>a {
    font-size: 18px;
    font-weight: 600;
    color: var(--menu-text);
    text-transform: none;
}

.menu-on-mobile ul.menu>li.current-menu-item>a {
    color: var(--fh-red);
}

.menu-on-mobile .social-icons a {
    color: var(--fh-text-2);
}

.menu-on-mobile .search-field {
    background: var(--fh-surface);
    border: 1px solid var(--fh-border);
    color: var(--fh-text);
    border-radius: 8px;
}

/* ---------------------------------------------------------
 * 5. SECCIONES Y TÍTULOS CON DOBLE BARRA ROJA
 * --------------------------------------------------------- */

.blog-section {
    padding-top: 28px;
    padding-bottom: 28px;
}

/* Título tipo "Últimas noticias" de la maqueta */
.entry-title.category-title,
.related-posts--title,
.author-about-title {
    position: relative;
    font-size: 26px;
    font-weight: 800;
    color: var(--fh-text);
    margin: 0 0 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--fh-border);
    text-transform: none;
}

.entry-title.category-title::before,
.related-posts--title::before,
.author-about-title::before {
    content: '//';
    color: var(--fh-red);
    font-weight: 900;
    letter-spacing: -3px;
    margin-right: 12px;
}

/* Subrayado corto rojo bajo el título */
.entry-title.category-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 72px;
    height: 3px;
    background: var(--fh-red);
    border-radius: 2px;
}

/* Cabecera de sección con enlace "Ver todas las noticias" */
.section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    grid-column: 1 / -1;
}

.section-head-link {
    font-size: 14px;
    font-weight: 600;
    color: var(--fh-text-2);
    text-decoration: none;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color .15s ease;
}

.section-head-link:hover {
    color: var(--fh-red);
}

.section-head-link .section-head-arrow {
    font-size: 16px;
    transition: transform .15s ease;
}

.section-head-link:hover .section-head-arrow {
    transform: translateX(3px);
}

/* ---------------------------------------------------------
 * 6. PÍLDORAS DE CATEGORÍA (rojo, como en la maqueta)
 * --------------------------------------------------------- */

.single-post-pill,
.single-post__category .single_category,
.single-category {
    display: inline-block;
    background: var(--fh-red);
    color: #ffffff;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    line-height: 16px;
}

.single-post__category .single_category .link,
.single-category .link {
    color: #ffffff;
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 700;
}

/* Píldoras de categoría dentro de listados: el texto SIEMPRE blanco (mientras el fondo sea rojo) */
.blog-section .template-2 .single-post .single-post-left .single-post__category .single_category .link,
.article-category .single-post .single-post-left .single-post__category .single_category .link,
.search-page .single-post .single-post-left .single-post__category .single_category .link {
    color: #ffffff;
}

.single-post__category .single_category .link:hover {
    color: #ffe1e4;
}

/* ---------------------------------------------------------
 * 7. PORTADA - HERO (Template 1)
 * --------------------------------------------------------- */

.blog-section .template-1 {
    display: grid;
    grid-template-columns: 2.15fr 1.05fr 0.92fr;
    gap: 16px;
    align-items: stretch;
}

/* HERO principal */
.blog-section .template-1 .single-post {
    position: relative;
    display: flex;
    align-items: flex-end;
    border: none;
    border-radius: 14px;
    overflow: hidden;
    background-color: transparent;
    background-blend-mode: normal;
    margin-bottom: 0;
    min-width: 0;
}

/* Primero = hero grande a la izquierda, altura FIJA para que la imagen no se recorte mal */
.blog-section .template-1 .single-post:first-child {
    width: auto;
    flex: none;
    height: 648px;
    min-height: 0;
    align-self: start;
    margin-bottom: 0;
}

/* Degradado oscuro sobre la imagen */
.blog-section .template-1 .single-post::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(5, 6, 8, 0) 34%, rgba(5, 6, 8, .88) 88%);
    z-index: 0;
    transition: background-color .2s ease;
}

.blog-section .template-1 .single-post:hover::before {
    background-color: rgba(5, 6, 8, 0);
    background: linear-gradient(180deg, rgba(5, 6, 8, .08) 34%, rgba(5, 6, 8, .78) 88%);
}

.blog-section .template-1 .single-post .single-post-block {
    position: relative;
    z-index: 1;
    padding: 26px 28px;
    max-width: 760px;
    background: transparent;
}

.blog-section .template-1 .single-post .single-post__title {
    color: var(--card-text-overlay);
    font-weight: 700;
    font-size: 20px;
    line-height: 26px;
    margin: 10px 0 8px;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .5);
}

.blog-section .template-1 .single-post:first-child .single-post__title {
    font-size: 38px;
    line-height: 46px;
    margin: 14px 0 10px;
}

/* Hover del título: pasa a rojo suave */
.blog-section .template-1 .single-post:hover .single-post__title {
    color: #ff8b95;
}

.blog-section .template-1 .single-post .single-post__content {
    color: rgba(255, 255, 255, .82);
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    margin: 0 0 14px;
}

/* Fila de metadatos: autor | fecha */
.single-post__meta-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 13px;
    color: rgba(255, 255, 255, .72);
}

.single-post__meta-sep {
    opacity: .5;
}

.single-post__meta-row .single-post__date {
    margin: 0;
}

/* Columna central: tarjetas apiladas a altura fija (2 tarjetas + hueco = altura del hero) */
.blog-section .template-1 .fh-hero-side {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-self: start;
}

.blog-section .template-1 .fh-hero-side .single-post {
    flex: none;
    height: 316px;
    min-height: 0;
}

.blog-section .template-1 .fh-hero-side .single-post-block {
    padding: 18px 20px;
    max-width: 100%;
}

.blog-section .template-1 .fh-hero-side .single-post__date {
    display: block;
    margin: 0;
    color: rgba(255, 255, 255, .65);
    font-size: 12px;
}

/* ---------------------------------------------------------
 * 8. RAIL LATERAL - "Lo más leído" y widgets
 * --------------------------------------------------------- */

.blog-section .template-1 .widget-most-visited,
.widget-most-visited {
    width: auto;
    flex: none;
    border: none;
    margin: 0;
    min-width: 0;
}

/* Widgets tipo tarjeta (sidebar y rail) */
.widget {
    background: var(--fh-surface);
    border: 1px solid var(--fh-border);
    border-radius: 14px;
    padding: 18px;
    color: var(--fh-text-2);
    margin-bottom: 16px;
}

.widget:last-child {
    margin-bottom: 0;
}

.widget-title,
.widget .widget-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 800;
    color: var(--fh-text);
    margin: 0 0 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--fh-border);
}

/* Icono de trueno rojo ante el título de widget */
.widget-title::before {
    content: '\26A1';
    color: var(--fh-red);
    font-size: 18px;
    -webkit-font-smoothing: antialiased;
}

/* Listado numerado (Lo más leído): número + miniatura + texto alineados */
.widget-most-visited ul,
.widget ul.wpp-list {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: fh-rank;
}

.widget-most-visited ul>li,
.widget ul.wpp-list>li {
    counter-increment: fh-rank;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 0;
    border-bottom: 1px solid var(--fh-border);
    list-style: none;
    margin: 0;
}

.widget-most-visited ul>li:last-child,
.widget ul.wpp-list>li:last-child {
    border-bottom: none;
    padding-bottom: 4px;
}

/* Número de ranking */
.widget-most-visited ul>li::before,
.widget ul.wpp-list>li::before {
    content: counter(fh-rank);
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    margin-top: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #22262d;
    color: #ffffff;
    font-size: 13px;
    font-weight: 800;
    border-radius: 6px;
    position: static;
}

/* El 1 acapara el rojo */
.widget-most-visited ul>li:first-child::before,
.widget ul.wpp-list>li:first-child::before {
    background: var(--fh-red);
}

/* Miniatura alineada */
.widget-most-visited ul>li .wpp-thumbnail,
.widget ul.wpp-list>li .wpp-thumbnail {
    flex: 0 0 64px;
    max-width: 64px;
    height: 48px;
    overflow: hidden;
    border-radius: 8px;
}

.widget-most-visited ul>li .wpp-thumbnail img,
.widget ul.wpp-list>li img {
    width: 100%;
    height: 48px;
    object-fit: cover;
    border-radius: 8px;
    display: block;
}

/* Título a la derecha del número */
.widget-most-visited .wpp-post-title,
.widget ul.wpp-list>li .wpp-post-title {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--fh-text);
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    text-decoration: none;
}

.widget-most-visited .wpp-post-title:visited,
.widget ul.wpp-list>li .wpp-post-title:visited {
    color: var(--fh-text);
}

.widget-most-visited .wpp-post-title:hover,
.widget ul.wpp-list>li .wpp-post-title:hover {
    color: var(--fh-red);
}

/* Contadores de lecturas de WP Popular Posts debajo del texto */
.widget-most-visited .wpp-meta,
.widget ul.wpp-list .wpp-meta {
    flex: 1 1 100%;
    margin-left: 34px;
    padding-left: 0;
    color: var(--fh-muted);
    font-size: 12px;
    margin-top: 0;
}

/* Barra lateral genérica */
.sidebar .widget {
    position: relative;
}

/* ---------------------------------------------------------
 * 9. PORTADA - ÚLTIMAS NOTICIAS (Template 2) en cuadrícula
 * --------------------------------------------------------- */

.blog-section .template-2 {
    display: flex;
    align-items: flex-start;
    gap: 24px;
}

/* Barra lateral junto a la cuadrícula */
.blog-section .template-2 .sidebar {
    flex: 0 0 300px;
    width: 300px;
    min-width: 0;
    position: sticky;
    top: 90px;
    align-self: flex-start;
}

/* Barras laterales genéricas flotando con el scroll */
.article-single .sidebar,
.article-category .sidebar,
.search-page .sidebar,
.author-page .sidebar {
    flex: 0 0 300px;
    width: 300px;
    min-width: 0;
    position: sticky;
    top: 90px;
    align-self: flex-start;
}

/* Los enlaces de tarjeta no llevan subrayado */
a.single-post,
a.single-post * {
    text-decoration: none;
}

.blog-section .template-2 .section-left {
    background: transparent;
    min-width: 0;
    padding-left: 0;
    padding-right: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    position: relative;
    flex: 1;
}

/* Tarjeta de noticia */
.blog-section .template-2 .single-post {
    position: relative;
    display: flex;
    flex-direction: column-reverse;
    align-items: stretch;
    justify-content: flex-start;
    background: var(--fh-surface);
    border: 1px solid var(--fh-border);
    border-radius: 14px;
    overflow: hidden;
    min-height: 320px;
    padding: 0;
    transition: border-color .2s ease, transform .2s ease;
}

.blog-section .template-2 .single-post:hover {
    border-color: rgba(225, 29, 46, .45);
    transform: translateY(-3px);
}

/* Imagen arriba (column-reverse) */
.blog-section .template-2 .single-post .single-post-right {
    min-width: 0;
    width: 100%;
    height: 172px;
    transition: opacity .2s ease;
}

.blog-section .template-2 .single-post:hover .single-post-right {
    opacity: .85;
}

.blog-section .template-2 .single-post .single-post-right img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.blog-section .template-2 .single-post .single-post__image {
    max-height: 100%;
}

/* Cuerpo de la tarjeta */
.blog-section .template-2 .single-post .single-post-left {
    min-width: 0;
    padding: 16px 18px 18px;
    display: flex;
    flex-direction: column;
}

/* La píldora "flota" sobre la imagen */
.blog-section .template-2 .single-post .single-post__category {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    margin: 0;
}

.blog-section .template-2 .single-post .single-post-left .single-post__title {
    font-weight: 700;
    font-size: 17px;
    line-height: 23px;
    color: var(--fh-text);
    order: 2;
    transition: color .15s ease;
}

.blog-section .template-2 .single-post:hover .single-post-left .single-post__title,
.blog-section .template-2 .single-post .single-post-left .single-post__title:hover {
    color: var(--fh-red);
}

/* Los títulos enlazados nunca deben aparecer en "color de enlace visitado" */
.blog-section .template-2 .single-post .single-post-left .single-post__title,
.blog-section .template-2 .single-post .single-post-left .single-post__title:visited,
.article-category .single-post .single-post-left .single-post__title,
.article-category .single-post .single-post-left .single-post__title:visited,
.search-page .single-post .single-post-left .single-post__title,
.search-page .single-post .single-post-left .single-post__title:visited {
    color: var(--fh-text);
    text-decoration: none;
}

/* Fecha con icono de calendario */
.blog-section .template-2 .single-post .single-post-left .single-post__date {
    color: var(--fh-muted);
    font-size: 12px;
    line-height: 18px;
    margin: 10px 0 0;
    order: 3;
}

.blog-section .template-2 .single-post .single-post-left .single-post__date::before {
    content: '\f145';
    font-family: 'dashicons';
    font-size: 15px;
    line-height: 1;
    margin-right: 6px;
    vertical-align: -2px;
    color: var(--fh-muted);
}

/* En plantilla de tarjetas ocultamos resumen y comentarios */
.blog-section .template-2 .single-post .single-post-left .single-post__content,
.blog-section .template-2 .single-post .single-post-left .single-post__comments {
    display: none;
}

/* Paginación AJAX: flechas circulares, centradas */
.pagination-blog-block.section-w,
.pagination-category.section-w {
    display: flex !important;
    justify-content: center !important;
    align-items: center;
    gap: 10px;
    max-width: none;
    margin: 26px 0 6px;
}

.paginate.arrow {
    width: 42px;
    height: 42px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    background: var(--fh-surface);
    border: 1px solid var(--fh-border);
    border-radius: 50%;
    color: #ffffff;
    cursor: pointer;
    opacity: .38;
    transition: opacity .15s ease, background-color .15s ease;
}

.paginate.arrow.active {
    opacity: 1;
    border-color: var(--fh-red);
}

.paginate.arrow span.dashicons {
    color: inherit;
}

/* Navegación entre posts/archivos */
.post-navigation .nav-links a,
.posts-navigation .nav-links .nav-previous a,
.posts-navigation .nav-links .nav-next a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: var(--fh-surface);
    border: 1px solid var(--fh-border);
    border-radius: 999px;
    color: var(--fh-text);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: border-color .15s ease, color .15s ease;
}

.post-navigation .nav-links a:hover,
.posts-navigation .nav-links a:hover {
    border-color: var(--fh-red);
    color: var(--fh-red);
}

/* ---------------------------------------------------------
 * 10. PORTADA - REVIEWS DESTACADAS (Template 3)
 * --------------------------------------------------------- */

.blog-section .template-3 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.blog-section .template-3 .section-left {
    display: contents;
    min-width: 0;
}

.blog-section .template-3 .single-post {
    position: relative;
    display: block;
    background: var(--fh-surface);
    border: 1px solid var(--fh-border);
    border-radius: 14px;
    overflow: hidden;
    padding: 0;
    min-height: 190px;
    transition: border-color .2s ease, transform .2s ease;
}

.blog-section .template-3 .single-post:hover {
    border-color: rgba(225, 29, 46, .45);
    transform: translateY(-3px);
}

.blog-section .template-3 .single-post .single-post-right {
    width: 100%;
    height: 120px;
}

.blog-section .template-3 .single-post .single-post-right img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.blog-section .template-3 .single-post__image {
    max-height: 100%;
}

.blog-section .template-3 .single-post .single-post-left {
    padding: 14px 16px 18px;
}

.blog-section .template-3 .single-post .single-post-left .single-post__title {
    font-size: 15px;
    font-weight: 700;
    line-height: 21px;
    color: var(--fh-text);
    margin: 0;
}

.blog-section .template-3 .single-post:hover .single-post__title {
    color: var(--fh-red);
}

/* Insignia de nota: 9,5 */
.single-post-score {
    position: absolute;
    right: 14px;
    bottom: 12px;
    min-width: 48px;
    padding: 6px 8px;
    background: #22262d;
    color: #ffffff;
    font-size: 17px;
    font-weight: 800;
    text-align: center;
    border-radius: 8px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .35);
    list-style: none;
    z-index: 2;
}

[data-theme="light"] .single-post-score {
    background: #22262d;
    color: #ffffff;
}

/* ---------------------------------------------------------
 * 11. LISTADOS (categorías, búsqueda, autor) en filas/tarjeta
 * --------------------------------------------------------- */

.article-category .single-post,
.search-page .single-post {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    background: var(--fh-surface);
    border: 1px solid var(--fh-border);
    border-radius: 14px;
    padding: 20px;
    margin-bottom: 18px;
    transition: border-color .2s ease;
}

.article-category .single-post:hover,
.search-page .single-post:hover {
    border-color: rgba(225, 29, 46, .4);
}

.article-category .single-post .single-post-right,
.search-page .single-post .single-post-right {
    width: 34%;
    max-width: 320px;
}

.article-category .single-post .single-post-right img,
.search-page .single-post .single-post-right img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 10px;
    display: block;
}

.article-category .single-post .single-post-left,
.search-page .single-post .single-post-left {
    flex: 1;
    min-width: 0;
    padding-right: 0;
}

.article-category .single-post .single-post-left .single-post__title,
.search-page .single-post .single-post-left .single-post__title {
    font-size: 20px;
    font-weight: 700;
    line-height: 27px;
    color: var(--fh-text);
    transition: color .15s ease;
}

.article-category .single-post:hover .single-post-left .single-post__title,
.search-page .single-post:hover .single-post-left .single-post__title {
    color: var(--fh-red);
}

.article-category .single-post .single-post-left .single-post__content,
.search-page .single-post .single-post-left .single-post__content {
    color: var(--fh-text-2);
    font-size: 15px;
    line-height: 23px;
    margin-top: 8px;
}

.article-category .single-post .single-post-left .single-post__category,
.search-page .single-post .single-post-left .single-post__category {
    margin: 12px 0 8px;
}

.article-category .single-post .single-post-left .single-post__date,
.search-page .single-post .single-post-left .single-post__date,
.article-category .single-post .single-post-left .single-post__comments,
.search-page .single-post .single-post-left .single-post__comments {
    color: var(--fh-muted);
    font-size: 13px;
}

.article-category .single-post .single-post-left .readmore,
.search-page .single-post .single-post-left .readmore {
    color: var(--fh-red);
    font-weight: 600;
}

.article-category .single-post .single-post-left .readmore .dashicons,
.search-page .single-post .single-post-left .readmore .dashicons {
    color: var(--fh-red);
}

/* Encabezado de archivo/autor */
.article-category .header,
.author-page .header,
.search-page .header {
    margin-bottom: 26px;
}

.archive-meta {
    color: var(--fh-text-2);
    font-size: 15px;
    line-height: 24px;
}

/* Tarjeta de autor */
.author-page .header {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    background: var(--fh-surface);
    border: 1px solid var(--fh-border);
    border-radius: 14px;
    padding: 24px;
    margin-bottom: 26px;
}

.author-page .authordesc-left .author-avatar {
    border-radius: 14px;
    border: 3px solid var(--fh-red);
}

.author-page .entry-title.author-title,
.author-page .author-title a {
    color: var(--fh-text);
    font-size: 26px;
    font-weight: 800;
    margin: 0 0 8px;
}

/* ---------------------------------------------------------
 * 12. ARTÍCULO INDIVIDUAL
 * --------------------------------------------------------- */

.article-single .entry-title {
    font-size: 34px;
    font-weight: 800;
    line-height: 42px;
    color: var(--fh-text);
    margin-top: 6px;
}

.article-category .single-post .single-post-left .single-post__title {
    color: var(--fh-text);
}

.article-single .entry-date {
    display: block;
    color: var(--fh-muted);
    font-size: 13px;
    margin: 10px 0 18px;
}

/* Contenido del artículo */
.article-single .entry-content .content,
.article-single .entry-content {
    color: var(--fh-text-2);
    font-size: 16.5px;
    line-height: 1.75;
}

.article-single .entry-content .content h2,
.article-single .entry-content .content h3,
.article-single .entry-content .content h4,
.article-single .entry-content h2,
.article-single .entry-content h3,
.article-single .entry-content h4 {
    color: var(--fh-text);
    font-weight: 700;
}

.article-single .entry-content .content a,
.article-single .entry-content a {
    color: var(--fh-red);
    text-decoration: none;
    border-bottom: 1px solid rgba(225, 29, 46, .35);
}

.article-single .entry-content .content a:hover,
.article-single .entry-content a:hover {
    color: var(--fh-red-hover);
    border-bottom-color: var(--fh-red-hover);
}

.article-single .entry-content blockquote {
    background: var(--fh-surface);
    border-left: 3px solid var(--fh-red);
    border-radius: 0 10px 10px 0;
    padding: 16px 20px;
    color: var(--fh-text-2);
    font-style: italic;
}

.article-single .entry-content table,
.entry-content table {
    background: var(--fh-surface);
    border-collapse: collapse;
}

.article-single .entry-content table th,
.article-single .entry-content table td,
.entry-content table th,
.entry-content table td {
    border: 1px solid var(--fh-border);
    padding: 8px 10px;
}

/* Píldoras separadas con hueco, sin comas dentro del texto */
.single-post__category,
.search-page .single-post .single-post__category,
.article-category .single-post .single-post-left .single-post__category {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* Categoría visible dentro del single */
.single-post__category--single {
    margin: 0 0 10px;
}

/* Sobre el autor */
.entry-meta.meta-author,
.author-page .authordesc-wrapper {
    background: var(--fh-surface);
    border: 1px solid var(--fh-border);
    border-radius: 14px;
    padding: 20px;
    display: flex;
    gap: 16px;
    align-items: flex-start;
    margin-top: 26px;
}

.entry-meta .author-about-title {
    font-size: 16px;
    margin: 0 0 10px;
}

.entry-meta .author-avatar,
.author-page .authordesc-left .author-avatar {
    border-radius: 12px;
}

/* Comentarios */
.comment-respond,
.comments-area,
.comments-area .comment {
    color: var(--fh-text-2);
}

.comments-area .comment-list .comment,
.comment-respond {
    background: var(--fh-surface);
    border: 1px solid var(--fh-border);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 14px;
}

.comment-respond textarea,
.comment-respond input[type="text"],
.comment-respond input[type="email"],
.comment-respond input[type="url"],
.article-single input[type="search"] {
    background: var(--fh-bg);
    border: 1px solid var(--fh-border);
    color: var(--fh-text);
    border-radius: 8px;
    padding: 10px;
}

.comment-respond .submit,
.article-single input[type="submit"] {
    background: var(--fh-red);
    color: #ffffff;
    border: none;
    border-radius: 8px;
    padding: 10px 20px;
    font-weight: 700;
    cursor: pointer;
}

.comment-respond .submit:hover,
.article-single input[type="submit"]:hover {
    background: var(--fh-red-hover);
}

/* ---------------------------------------------------------
 * 13. ENTRADAS RELACIONADAS
 * --------------------------------------------------------- */

.related-posts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.related-posts .related-post {
    position: relative;
    border: none;
    border-radius: 14px;
    min-height: 230px;
    min-width: 0;
    overflow: hidden;
    margin-bottom: 0;
    background-color: transparent;
    background-blend-mode: normal;
    transition: transform .2s ease, box-shadow .2s ease;
}

.related-posts .related-post:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(0, 0, 0, .35);
    background-color: transparent;
}

.related-posts .related-post::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(5, 6, 8, .05) 30%, rgba(5, 6, 8, .92) 92%);
    z-index: 0;
}

.related-posts .related-post .related-posts-content {
    position: relative;
    z-index: 1;
    padding: 18px;
    margin: 0;
    max-width: none;
    background: transparent;
}

.related-posts .related-post:hover .related-posts-content__title {
    color: #ff8b95;
}

/* ---------------------------------------------------------
 * 14. FORMULARIOS / BÚSQUEDA / PÁGINAS
 * --------------------------------------------------------- */

.search-form .search-field {
    color: var(--fh-text);
}

.search-page .no-results {
    display: block;
    padding: 40px 0;
    color: var(--fh-muted);
    font-size: 18px;
}

.default-page .entry-title,
.page-404 .entry-title {
    color: var(--fh-text);
}

.page-404 .text-not-found {
    color: var(--fh-text-2);
}

.page-404 .search-field,
.default-no-sidebar .search-field,
.default-with-sidebar .search-field {
    background: var(--fh-surface);
    border: 1px solid var(--fh-border);
    color: var(--fh-text);
    border-radius: 8px;
    padding: 10px 14px;
}

/* ---------------------------------------------------------
 * 15. PUBLICIDAD (widgets de anuncios) \u2014 mantener limpio
 * --------------------------------------------------------- */

.publicidad .widget:empty {
    display: none;
}

/* ---------------------------------------------------------
 * 16. FOOTER
 * --------------------------------------------------------- */

#footer {
    background: var(--footer-bg);
    border-top: 2px solid var(--fh-red);
    margin-top: 40px;
    padding-top: 32px;
}

#footer .footer-sections {
    color: var(--footer-text);
}

#footer .widget {
    background: transparent;
    border: none;
    padding: 0;
}

#footer .widget-title {
    border-bottom: 1px solid #23292f;
}

#footer a {
    color: #dfe2e7;
}

#footer a:hover {
    color: var(--fh-red);
}

#copyright {
    padding: 18px 0;
    color: #83898f;
    font-size: 13px;
    text-align: center;
    border-top: 1px solid #1c2128;
    margin-top: 24px;
}

/* ---------------------------------------------------------
 * 17. RESPONSIVE
 * --------------------------------------------------------- */

@media (max-width: 1199px) {

    #header .header,
    #subheader {
        height: 62px;
    }

    #wrapper {
        padding-top: 72px;
    }

    /* Navegación pasa al menú móvil */
    #header-nav,
    #header-actions .subheader-content--search {
        display: none;
    }

    #toggle-menu {
        display: flex;
        align-items: center;
    }

    #toggle-menu .toggle-menu {
        font-size: 26px;
        width: 32px;
        height: 32px;
    }

    #header img.logo,
    img.logo {
        max-height: 36px;
    }

    /* Portada: 2 columnas */
    .blog-section .template-1 {
        grid-template-columns: 1.4fr 1fr;
    }

    .blog-section .template-1 .single-post:first-child {
        height: 470px;
        min-height: 0;
    }

    .blog-section .template-1 .fh-hero-side .single-post {
        height: 214px;
    }

    .blog-section .template-1 .widget-most-visited,
    .blog-section .template-1 > .widget-most-visited {
        grid-column: 1 / -1;
    }

    .blog-section .template-2 .section-left {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 991px) {

    .blog-section .template-2 {
        flex-direction: column;
    }

    .blog-section .template-2 .sidebar {
        width: 100%;
    }

    .blog-section .template-2 .section-left {
        grid-template-columns: repeat(2, 1fr);
    }

    .blog-section .template-3 {
        grid-template-columns: repeat(2, 1fr);
    }

    .related-posts {
        grid-template-columns: repeat(2, 1fr);
    }

    .article-single .entry-title {
        font-size: 26px;
        line-height: 34px;
    }
}

@media (max-width: 649px) {

    #wrapper {
        padding-top: 64px;
    }

    .blog-section .template-1 {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
    }

    .blog-section .template-1 .single-post:first-child {
        height: 420px;
        min-height: 0;
    }

    .blog-section .template-1 .fh-hero-side .single-post {
        height: 240px;
    }

    .blog-section .template-2 .section-left,
    .blog-section .template-3,
    .related-posts {
        grid-template-columns: 1fr;
    }

    .article-category .single-post,
    .search-page .single-post {
        flex-direction: column-reverse;
    }

    .article-category .single-post .single-post-right,
    .search-page .single-post .single-post-right {
        width: 100%;
        max-width: none;
    }

    .section-head {
        flex-direction: column;
        align-items: flex-start;
    }

    .author-page .header {
        flex-direction: column;
    }

    .article-single .entry-title {
        font-size: 22px;
        line-height: 30px;
    }
}

/* Anula el offset antiguo del subheader eliminado */
div#wrapper {
    margin-top: 0;
}

/* ---------------------------------------------------------
 * 18. MODO CLARO: ajustes finos
 * --------------------------------------------------------- */

[data-theme="light"] #header {
    box-shadow: 0 1px 0 rgba(0, 0, 0, .06);
}

[data-theme="light"] #header-nav ul.menu>li>a {
    color: #2b3138;
}

[data-theme="light"] #header-nav ul.menu>li>a:hover {
    background: #f1f3f5;
    color: #171b21;
}

[data-theme="light"] #header-actions .subheader-content--search {
    color: #2b3138;
}

[data-theme="light"] #header-actions .subheader-content--search:hover {
    background: #f1f3f5;
    color: #171b21;
}

[data-theme="light"] #header-nav ul.sub-menu,
[data-theme="light"] #search-menu {
    box-shadow: 0 18px 40px rgba(20, 24, 30, .12);
    background: #ffffff;
    border-color: #e4e7ec;
}

[data-theme="light"] .blog-section .template-1 .single-post::before,
[data-theme="light"] .related-posts .related-post::before {
    /* El texto sobre imagen sigue necesitando contraste oscuro */
    z-index: 0;
}

[data-theme="light"] .widget-most-visited ul>li::before,
[data-theme="light"] .widget ul.wpp-list>li::before,
[data-theme="light"] .single-post-score {
    background: #22262d;
    color: #ffffff;
}

[data-theme="light"] .paginate.arrow {
    color: #171b21;
}

[data-theme="light"] .paginate.arrow.active {
    color: #171b21;
}

[data-theme="light"] #copyright {
    color: #a3a9b0;
}

[data-theme="light"] .over .menu-on-mobile {
    background: rgba(255, 255, 255, 0.98);
}

[data-theme="light"] .menu-on-mobile {
    background: var(--menu-bg);
}

[data-theme="light"] .menu-on-mobile .social-icons a {
    color: #2b3138;
}

/* ---------------------------------------------------------
 * 19. LIMPIEZA: estilos del antiguo subheader fuera de uso
 * --------------------------------------------------------- */

#subheader {
    margin-top: 0;
}

/* Corrección espacio del hero en pantallas grandes */
@media (min-width: 1200px) {
    .section-w {
        max-width: 1520px;
    }
}