/*
    Theme Name: Fotoviajero 2.0
    Theme URI:
    Author: Alfredo Sis
    Author URI: https://github.com/alfredsis
    Description: Tema clásico para el blog El Fotoviajero. Slider destacado, rejilla de entradas, jerarquía de plantillas completa y diseño mobile-first.
    Version: 2.3.0
    Requires at least: 6.0
    Requires PHP: 7.4
    License: GNU General Public License v2 or later
    License URI: http://www.gnu.org/licenses/gpl-2.0.html
    Tags: blog, travel, viajes, mobile-first, custom-menu, featured-images, translation-ready
    Text Domain: fotoviajero
*/

/*
    NOTA: las fuentes de Google ya NO se cargan con @import desde aquí.
    Ahora se encolan desde inc/enqueue.php con preconnect, para no encadenar
    una petición bloqueante detrás de la descarga de este archivo.
*/

:root {
    --fuente-texto: 'Fira Sans Condensed', sans-serif;
    --fuente-headings: 'Oswald', sans-serif;
    --fuente-secundaria: 'Mulish', sans-serif;
    --fondo: #f6f7f9;

    /* Sistema de color: antes cada valor estaba hardcodeado en su regla. */
    --color-texto: #242424;
    --color-texto-suave: #757575;
    --color-acento: #508ea8;
    --color-acento-oscuro: #175ea5;
    --color-oscuro: #1d1d1d;
    --color-blanco: #fff;
    --color-borde: #e2e5e9;

    /* Escala de espaciado. */
    --espacio-xs: 0.5rem;
    --espacio-sm: 1rem;
    --espacio-md: 2rem;
    --espacio-lg: 4rem;
    --espacio-xl: 8rem;
}

html {
    box-sizing: border-box;
    font-size: 62.5%;  /* 10 px = 1rem */
    line-height: 1.65;
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

*, *:before, *:after {
    box-sizing: inherit;
}

/*
    Antes había dos bloques body{} separados, y el segundo pedía
    'Roboto Condensed', una fuente que el tema no llega a cargar nunca.
*/
body {
    background-color: var(--fondo);
    font-family: var(--fuente-texto);
    color: var(--color-texto);
}

h1 { font-size: 6rem; }
h2 { font-size: 2.8rem; }
h3 { font-size: 2.2rem; }

p {
    font-size: 1.8rem;
    margin: 0;
}

a {
    text-decoration: none;
}

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

img {
    max-width: 100%;
    height: auto;
}

.texto {
    font-family: var(--fuente-secundaria);
}

.contenedor {
    width: 95%;
    margin: 0 auto 10rem auto;
}

@media (min-width: 768px) {
    .contenedor {
        width: 70%;
    }
}

/** Utilidades **/

.text-center {
    text-align: center;
}

/*
    Texto solo para lectores de pantalla. Necesario para el enlace de salto,
    los labels del buscador y los contextos de los enlaces "Leer más".
*/
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
}

.screen-reader-text:focus {
    background-color: var(--color-blanco);
    clip: auto !important;
    clip-path: none;
    color: var(--color-acento-oscuro);
    display: block;
    font-size: 1.6rem;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
}

.skip-link {
    position: absolute;
    top: 0;
    left: 0;
}

/*
    Indicador de foco visible en todo el tema. Antes .glide__arrow:focus
    eliminaba el outline sin poner nada en su lugar.
*/
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--color-acento);
    outline-offset: 3px;
    border-radius: 2px;
}

.boton {
    display: inline-block;
    background-color: var(--color-acento-oscuro);
    color: var(--color-blanco);
    font-family: var(--fuente-headings);
    font-size: 1.8rem;
    padding: 1.4rem 3rem;
    border-radius: 5px;
    transition: background-color 0.25s ease;
}

.boton:hover {
    background-color: #134070;
}

/** Header **/

/*
    IMPORTANTE: un elemento position:fixed SIN 'top' se queda anclado en su
    posición estática. Como WordPress añade html{margin-top:46px} para hacer
    sitio a la barra de administración, el header quedaba clavado 46px por
    debajo del borde y dejaba un hueco al hacer scroll. Solo se notaba con la
    sesión iniciada, porque un visitante no tiene barra de administración.
*/
.header {
    padding: 1rem 0;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 3;
    width: 100%;
    height: 13rem;
    background-color: transparent; /* antes: "" — declaración inválida */
    transition: 0.4s ease;
    padding-top: 2rem;
}

/*
    Barra de administración de WordPress. Alturas oficiales del core:
    32px por encima de 782px de ancho, 46px por debajo. Y a partir de 600px
    hacia abajo el core la pone en position:absolute, así que se va con el
    scroll y el header debe pegarse al borde.
*/
.admin-bar .header {
    top: 32px;
}

@media screen and (max-width: 782px) {
    .admin-bar .header {
        top: 46px;
    }
}

@media screen and (max-width: 600px) {
    .admin-bar .header {
        top: 0;
    }
}

.header2 {
    background-color: var(--color-blanco);
    height: 9rem;
    transition: 0.4s ease;
    padding-top: 1rem;
}

.invertir {
    filter: invert(100%);
}

.shadow {
    box-shadow: 0px 7px 29px 0px rgba(100, 100, 111, 0.2);
}

/*
    El hamburguesa ahora es un <button> real (antes era un <div> sin foco,
    sin rol y sin soporte de teclado). Reseteamos los estilos de botón.
*/
.menu-hamburguesa {
    cursor: pointer;
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    line-height: 0;
    color: inherit;
    -webkit-appearance: none;
    appearance: none;
}

.menu-hamburguesa svg {
    height: 5rem;
}

.barra-navegacion {
    display: none;
}

.barra-navegacion2 {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 0 2rem;
}

.menu-contenedor-mobil {
    background-color: var(--color-blanco);
}

@media (min-width: 768px) {
    .menu-contenedor-mobil {
        display: none;
    }
}

.no-mostrar {
    display: none;
    transition: 0.3s ease;
}

.hambu {
    fill: var(--color-blanco);
}

.equis {
    display: none;
    fill: var(--color-blanco);
}

/* Con el menú abierto se intercambian los dos iconos. */
.header.menu-abierto .hambu {
    display: none;
}

.header.menu-abierto .equis {
    display: inline;
}

@media (min-width: 768px) {
    .barra-navegacion {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        width: 100%;
    }
    .barra-navegacion2 {
        display: none;
    }
}

.menu-1 ul, .menu-2 ul {
    display: flex;
    flex-direction: row;
}

/*
    Estado base de los enlaces del menú. Antes solo existía como clase que
    aplicaba JavaScript, así que hasta que el JS corría los enlaces salían
    sin estilo (y si el JS fallaba, nunca llegaban a tenerlo).
*/
.header .menu-item a,
.menus-a {
    font-family: var(--fuente-headings);
    display: block;
    text-align: center;
    color: var(--color-blanco);
    font-size: 2.2rem;
    padding: 0.5rem 2rem;
    transition: transform .3s ease, color .3s ease;
}

.header .menu-item a:hover,
.menus-a:hover {
    color: #bcbcbc;
    transform: scale(1.04);
}

/* Estado sobre fondo claro. */
.header2 .menu-item a,
.menus-b {
    font-family: var(--fuente-headings);
    display: block;
    text-align: center;
    color: #272727;
    font-size: 2.2rem;
    padding: 0.5rem 2rem;
    transition: transform .3s ease, color .3s ease;
}

.header2 .menu-item a:hover,
.menus-b:hover {
    color: #8e8e8e;
    transform: scale(1.04);
}

.fade-in {
    opacity: 1;
    animation-name: fadeInOpacity;
    animation-iteration-count: 1;
    animation-timing-function: ease;
    animation-duration: 0.8s;
}

@keyframes fadeInOpacity {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}

.fade-out {
    opacity: 1;
    animation-name: fadeOutOpacity;
    animation-iteration-count: 1;
    animation-timing-function: ease-out;
    animation-duration: 0.3s;
}

@keyframes fadeOutOpacity {
    0%   { opacity: 1; }
    100% { opacity: 0; }
}

@media (min-width: 768px) {
    .menu-1 .current_page_item a,
    .menu-2 .current_page_item a,
    .menu-1 .current-menu-item a,
    .menu-2 .current-menu-item a {
        border-bottom: #888888 solid;
        border-width: 1px;
    }
}

.logo {
    width: 80%;
}

@media (max-width: 768px) {
    .logo {
        width: 45%;
    }
}

.logo a {
    display: block;
    /* Sin esto el área de pulsación se queda en 42px, por debajo del mínimo. */
    min-height: 4.4rem;
}

.logo img {
    width: 100%;
    height: auto;
    transition: transform .3s ease;
}

.logo img:hover {
    transform: scale(1.06);
}

@media (min-width: 768px) {
    .logo {
        width: 30rem;
        padding: 0 2rem;
    }
}

/*
    Zona editable de la portada (Elementor / editor de WordPress).

    Sin márgenes ni relleno propios: con la página vacía no ocupa nada y la
    portada se ve exactamente igual que cuando era 100% PHP. Va a todo lo
    ancho para que las secciones a sangre de Elementor funcionen; el ancho
    interior lo decide Elementor con su propio contenedor.
*/
.portada-editable {
    margin: 0;
    padding: 0;
}

.portada-editable:empty {
    display: none;
}

/*
    La rejilla vivía directamente en <main class="contenedor">. Ahora <main>
    envuelve la zona editable y la rejilla, y el contenedor del 70% pasa a
    este div, así que el resultado visual es el mismo.
*/

/*************************------------ Post Cards ------------------ **/

.listado-grid {
    margin-top: 2rem;
    display: grid;
    padding: 0 1rem;
    width: 100%;
}

@media (min-width: 768px) {
    .listado-grid {
        grid-template-columns: 1fr 1fr;
        gap: 3rem;
        width: 100%;
    }
}

/*
    Eran 10rem (100px) en móvil, pensados para escritorio: dejaban mucho
    espacio muerto al desplazarse por el listado.
*/
.card {
    margin-top: 4rem;
    width: 100%;
    background-color: var(--color-blanco);
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    display: flex;
    flex-direction: column;
}

.card img {
    width: 100%;
    height: 20rem;
    object-fit: cover;
    display: block;
}

@media (min-width: 768px) {
    .card img {
        width: 100%;
        height: 30rem;
    }
}

.card .contenido {
    padding: 0 30px 30px 30px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

/*
    Los títulos de tarjeta ahora son <h2> (antes <h3> dentro de un <a>, lo
    que dejaba la jerarquía de encabezados saltando de h1 a h3).
    Se mantienen los selectores h3 por compatibilidad.
*/
/* Enlace del título en bloque: área de pulsación completa, no solo el texto. */
.card-titulo a {
    display: block;
    padding: 0.4rem 0;
}

.contenido h2,
.contenido h3,
.card-titulo {
    font-size: 3rem;
    font-family: var(--fuente-texto);
    color: #000;
    transition: color 0.25s linear;
    margin: 1.6rem 0 1rem 0;
    line-height: 1.2;
}

.card-titulo a {
    color: inherit;
}

.contenido h2:hover,
.contenido h3:hover,
.card-titulo a:hover {
    color: var(--color-acento);
}

.contenido p {
    font-weight: 400;
    font-family: var(--fuente-texto);
    color: var(--color-texto-suave);
    margin-bottom: 2rem;
}

.contenido .read-more {
    font-weight: 500;
    font-family: var(--fuente-texto);
    font-size: 1.8rem;
    color: var(--color-texto);
    /* 4.4rem de alto: medía 30px, por debajo del mínimo táctil recomendado. */
    display: inline-flex;
    align-items: center;
    min-height: 4.4rem;
    margin-bottom: 1rem;
    transition: color 0.25s linear;
}

.contenido .read-more:hover {
    color: var(--color-acento);
}

.autor {
    display: flex;
    gap: 1rem;
    margin-top: auto;
}

.autor img {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    object-fit: cover;
}

.autor-date {
    display: flex;
    flex-direction: column;
    line-height: 1;
    flex-wrap: wrap;
    height: 4rem;
}

.autor p,
.autor time {
    margin: 1px 0px;
    font-size: 1.5rem;
    font-family: var(--fuente-texto);
    color: var(--color-texto-suave);
}

.autor .autor-p {
    color: #5f5f5f;
    font-weight: 500;
    margin-top: 4px;
}

.seccion-titulo {
    font-family: var(--fuente-headings);
    font-size: 3.2rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 6rem 0 0 0;
    padding: 0 1rem;
}

/** ------------------------------- Slider ------------------------------- **/

/*
    La altura del slider vive en una variable para que las tres reglas que la
    usan no puedan desincronizarse. En móvil pasa a ocupar el alto de la
    ventana: con 75rem fijos (750px) la diapositiva no cabía en un iPhone SE
    (667px) y el botón "Leer más" quedaba por debajo del pliegue.

    100svh es el "small viewport height": descuenta las barras del navegador
    móvil, así que no salta al aparecer y desaparecer. Se declara 100vh antes
    como respaldo para navegadores que no conozcan svh.
*/
:root {
    --alto-slider: 75rem;
}

@media (max-width: 767px) {
    :root {
        --alto-slider: 100vh;
        --alto-slider: 100svh;
    }
}

/* Móvil en horizontal: la pantalla es muy baja aunque sea ancha. */
@media (max-height: 500px) {
    :root {
        --alto-slider: 100vh;
        --alto-slider: 100svh;
    }
}

.pagina {
    width: 100%;
    height: var(--alto-slider);
    position: relative;
}

.slider-inner-div {
    width: 100%;
    height: var(--alto-slider);
    position: relative;
}

.img-slider {
    width: 100%;
    object-fit: cover;
    height: var(--alto-slider);
    position: absolute;
}

.slider-background {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgb(0, 0, 0);
    background: radial-gradient(circle, rgba(0,0,0,0.30155812324929976) 0%, rgba(0,0,0,0.5452556022408963) 77%);
}

.slider-inner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--color-blanco);
    font-family: var(--fuente-texto);
    text-align: left;
    width: 85%;
}

@media (min-width: 768px) {
    .slider-inner {
        width: auto;
        max-width: 70%;
    }
}

/*
    En móvil las flechas se movían encima del texto: iban a media altura y a
    los lados, justo sobre el párrafo. Pasan a una fila centrada en la parte
    baja de la diapositiva, con 4.4rem de lado para poder pulsarlas bien.
*/
@media (max-width: 767px) {
    .slider-inner {
        /* Deja hueco abajo para la fila de flechas. */
        top: calc(50% - 3rem);
    }

    .glide__arrows {
        position: absolute;
        bottom: 2.5rem;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        gap: 3rem;
        z-index: 2;
    }

    .glide__arrow {
        position: static;
        top: auto;
        left: auto;
        right: auto;
        transform: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 4.4rem;
        min-height: 4.4rem;
        padding: 0;
    }

    /* Sin hover en pantallas táctiles: que no crezcan al pulsar. */
    .flechas:hover {
        height: 3rem;
    }
}

.read-more-slider {
    display: inline-block;
    padding: 1rem;
    color: var(--color-blanco);
    border: 2px solid var(--color-blanco);
    border-radius: 12px;
    font-size: 2rem;
    font-weight: 500;
    transition: 0.25s ease-out;
}

.read-more-slider:hover {
    color: #000000ae;
    border: 2px solid #ffffff34;
    background: #ffffff87;
}

.flechas {
    height: 3rem;
    transition: 0.2s ease;
    fill: var(--color-blanco);
}

.flechas:hover {
    height: 4.3rem;
}

/*
    Antes cada diapositiva envolvía el título en <h1>: cinco <h1> por
    portada. Ahora son <h2> con el mismo aspecto visual.
*/
.slider-inner h1,
.slider-titulo {
    margin: 0 0 1rem 0;
    font-size: 4rem;
    font-family: var(--fuente-texto);
    font-weight: 500;
    line-height: 1.2;
}

.slider-inner p {
    margin-bottom: 3rem;
}

/* El foco de las flechas de Glide vuelve a ser visible. */
.glide__arrow:focus-visible {
    outline: 3px solid var(--color-blanco);
    outline-offset: 2px;
}

/** ---------------------------- Imagen destacada POST --------------------------- **/

.post-container {
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
}

/*
    La entrada va envuelta en <article> (antes el marcado estaba suelto).
    Como .post-container usa align-items:center, sus hijos NO se estiran:
    sin esta regla el <article> se ajustaría al contenido y los anchos en
    porcentaje de .post-head y .post-body se calcularían sobre un ancho
    equivocado, dejando el post descentrado y estrecho.
*/
.post-container > article {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.post-head {
    position: relative;
    width: 100%;
}

.imagen-destacada {
    width: 100%;
    object-fit: cover;
    height: 60rem;
    display: block;
}

.title-post {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--color-blanco);
    font-family: var(--fuente-headings);
    text-transform: uppercase;
    width: 90%;
    text-align: center;
    margin: 0;
}

@media (max-width: 768px) {
    .title-post {
        font-size: 4rem;
        width: 80%;
    }
}

.capa {
    background: rgb(0, 0, 0);
    background: radial-gradient(circle, rgba(0, 0, 0, 0.212) 0%, rgba(0, 0, 0, 0) 77%);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 49%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
}

.capa-post {
    background: rgba(0, 0, 0, 0.25);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 49%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
}

.post-body {
    width: 60%;
    background-color: var(--color-blanco);
    padding: 3rem 7rem;
    font-family: var(--fuente-secundaria);
    display: flex;
    flex-direction: column;
}

@media (max-width: 1080px) {
    .post-body {
        width: 85%;
        padding: 3rem 5rem;
    }
}

@media (max-width: 768px) {
    .post-body {
        width: 100%;
        padding: 3rem;
    }
}

.date-post {
    font-size: 1.5rem;
    justify-content: center;
    align-items: center;
    gap: 0.6rem;
    display: flex;
    width: 100%;
    margin-top: -20px;
    margin-bottom: 30px;
}

.entry-content {
    font-size: 1.8rem;
}

.entry-content a {
    color: var(--color-acento-oscuro);
    text-decoration: underline;
}

.entry-content img {
    height: auto;
}

.paginas-post {
    font-size: 1.6rem;
    margin-top: 2rem;
}

/* Categorías y etiquetas al pie de la entrada. */

.post-taxonomias {
    margin-top: 4rem;
    padding-top: 2rem;
    border-top: 1px solid var(--color-borde);
    font-size: 1.5rem;
}

.post-taxonomias p {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    color: var(--color-texto-suave);
}

.post-taxonomias span {
    font-weight: 600;
    color: var(--color-texto);
    margin-right: 0.5rem;
}

/*
    Eran enlaces de 17px de alto separados por comas: casi imposibles de
    acertar con el dedo sin dar al de al lado. Ahora son etiquetas pulsables.
*/
.post-taxonomias a {
    display: inline-flex;
    align-items: center;
    min-height: 4.4rem;
    padding: 0.4rem 1.2rem;
    margin: 0.3rem 0.2rem 0.3rem 0;
    background-color: var(--fondo);
    border: 1px solid var(--color-borde);
    border-radius: 4px;
    color: var(--color-acento-oscuro);
    transition: background-color 0.2s ease, color 0.2s ease;
}

.post-taxonomias a:hover {
    background-color: var(--color-acento-oscuro);
    border-color: var(--color-acento-oscuro);
    color: var(--color-blanco);
}

.post-taxonomias p {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 0.4rem;
}

/* Navegación entre entradas. */

.post-navegacion {
    width: 60%;
    display: grid;
    gap: 2rem;
    margin: 4rem 0;
}

@media (min-width: 769px) {
    .post-navegacion {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 1080px) {
    .post-navegacion { width: 85%; }
}

@media (max-width: 768px) {
    .post-navegacion { width: 100%; padding: 0 2rem; }
}

.post-navegacion a {
    display: flex;
    flex-direction: column;
    background-color: var(--color-blanco);
    padding: 2rem;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    transition: transform 0.25s ease;
}

.post-navegacion a:hover {
    transform: translateY(-3px);
}

.post-navegacion .nav-siguiente {
    text-align: right;
}

.nav-etiqueta {
    font-size: 1.3rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-texto-suave);
}

.nav-titulo {
    font-family: var(--fuente-texto);
    font-size: 2rem;
    color: var(--color-texto);
}

/** ------------------------ Cabeceras de archivo ------------------------ **/

.archivo-cabecera {
    padding: 0 1rem;
}

.archivo-titulo {
    font-family: var(--fuente-headings);
    font-size: 4.4rem;
    text-transform: uppercase;
    margin: 0 0 1rem 0;
    line-height: 1.15;
}

@media (min-width: 768px) {
    .archivo-titulo {
        font-size: 5.6rem;
    }
}

.archivo-descripcion {
    color: var(--color-texto-suave);
    max-width: 70ch;
}

.archivo-conteo {
    font-size: 1.5rem;
    color: var(--color-texto-suave);
    margin-top: 0.5rem;
}

.pagina-titulo {
    font-family: var(--fuente-headings);
    font-size: 4.4rem;
    text-transform: uppercase;
    margin: 0 0 2rem 0;
    line-height: 1.15;
    padding: 0 1rem;
}

.termino-busqueda {
    color: var(--color-acento);
}

/** ---------------------------- Paginación ----------------------------- **/

.paginacion,
.navigation.pagination {
    margin: 6rem 0 2rem;
    padding: 0 1rem;
}

.paginacion .nav-links,
.navigation.pagination .nav-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    justify-content: center;
    align-items: center;
}

/* paginate_links( 'type' => 'list' ) devuelve un <ul class="page-numbers">. */
.paginacion ul.page-numbers,
.navigation.pagination ul.page-numbers {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    justify-content: center;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

.paginacion ul.page-numbers li,
.navigation.pagination ul.page-numbers li {
    margin: 0;
}

.paginacion .page-numbers,
.navigation.pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 4.4rem;
    height: 4.4rem;
    padding: 0 1.2rem;
    background-color: var(--color-blanco);
    color: var(--color-texto);
    font-family: var(--fuente-texto);
    font-size: 1.7rem;
    border-radius: 4px;
    box-shadow: rgba(149, 157, 165, 0.15) 0px 4px 12px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.paginacion .page-numbers:hover,
.navigation.pagination .page-numbers:hover {
    background-color: var(--color-acento);
    color: var(--color-blanco);
}

.paginacion .page-numbers.current,
.navigation.pagination .page-numbers.current {
    background-color: var(--color-oscuro);
    color: var(--color-blanco);
}

.paginacion .page-numbers.dots,
.navigation.pagination .page-numbers.dots {
    background: none;
    box-shadow: none;
}

/** ------------------------ Botón "Cargar más" -------------------------- **/

.cargar-mas-zona {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    margin: 6rem 0 2rem;
    padding: 0 1rem;
}

.cargar-mas {
    font-family: var(--fuente-headings);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    min-width: 24rem;
    text-align: center;
}

.cargar-mas.esta-cargando {
    opacity: 0.7;
    cursor: progress;
}

.cargar-mas-estado {
    font-size: 1.5rem;
    color: var(--color-texto-suave);
    min-height: 2rem;
    text-align: center;
}

/* Aparición suave de las tarjetas añadidas sin recargar la página. */
.card-nueva {
    animation: fadeInOpacity 0.5s ease;
}

/** -------------------------- Formulario de búsqueda -------------------- **/

.formulario-busqueda {
    display: flex;
    gap: 0.8rem;
    max-width: 48rem;
    margin: 2rem 0;
}

.campo-busqueda {
    flex: 1;
    font-family: var(--fuente-texto);
    font-size: 1.7rem;
    padding: 1.2rem 1.6rem;
    border: 1px solid var(--color-borde);
    border-radius: 6px;
    background-color: var(--color-blanco);
    color: var(--color-texto);
}

.boton-busqueda {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 5rem;
    padding: 0 1.6rem;
    border: 0;
    border-radius: 6px;
    background-color: var(--color-acento-oscuro);
    color: var(--color-blanco);
    font-size: 1.8rem;
    cursor: pointer;
    transition: background-color 0.25s ease;
}

.boton-busqueda svg {
    fill: currentColor;
}

.boton-busqueda:hover {
    background-color: #134070;
}

/** ------------------------------ Sin resultados ------------------------ **/

.sin-resultados {
    background-color: var(--color-blanco);
    padding: 4rem 3rem;
    margin-top: 4rem;
    border-radius: 8px;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    text-align: center;
}

.sin-resultados h2 {
    font-family: var(--fuente-headings);
    margin-top: 0;
}

.sin-resultados p {
    color: var(--color-texto-suave);
    margin-bottom: 2rem;
}

.sin-resultados .formulario-busqueda {
    margin-left: auto;
    margin-right: auto;
}

/** --------------------------------- 404 -------------------------------- **/

.error-404 {
    text-align: center;
    padding: 4rem 1rem 2rem;
}

.error-404-codigo {
    font-family: var(--fuente-headings);
    font-size: 12rem;
    line-height: 1;
    color: var(--color-acento);
    margin: 0;
    letter-spacing: 0.05em;
}

@media (min-width: 768px) {
    .error-404-codigo {
        font-size: 18rem;
    }
}

.error-404-titulo {
    font-family: var(--fuente-headings);
    font-size: 3.4rem;
    text-transform: uppercase;
    margin: 1rem 0 2rem;
    line-height: 1.2;
}

@media (min-width: 768px) {
    .error-404-titulo {
        font-size: 4.4rem;
    }
}

.error-404-texto {
    color: var(--color-texto-suave);
    max-width: 60ch;
    margin: 0 auto 3rem;
}

.error-404-busqueda {
    display: flex;
    justify-content: center;
    margin-bottom: 3rem;
}

/* --------------------- Footer ----------------------*/

.footer {
    background-color: var(--color-oscuro);
    display: flex;
    flex-direction: column;
    color: var(--color-blanco);
    padding: 2rem 0;
}

.redes-sociales ul {
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
}

.redes-sociales li {
    margin: 0 0.6rem;
}

/* Área de pulsación de 4.4rem alrededor de cada icono. */
.redes-sociales a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 4.4rem;
    min-height: 4.4rem;
    /*
        Ojo: html tiene font-size:62.5% (1rem = 10px) y body no fija tamaño,
        así que cualquier texto sin tamaño propio se renderiza a 10px. Con
        iconos SVG da igual, pero si algún día pones texto en este menú se
        vería diminuto. Lo fijamos aquí.
    */
    font-size: 1.6rem;
}

.redes-sociales svg {
    fill: var(--color-blanco);
    height: 3rem;
}

.redes-sociales svg:hover {
    fill: #b1b1b1;
    transition: all 0.3s ease;
}

.footer hr {
    width: 80%;
    height: 1px;
    background-color: rgb(93, 93, 93);
    border: 0px;
}

.copyright {
    display: flex;
    justify-content: center;
    color: #757575;
}

@media (max-width: 768px) {
    .copyright p {
        font-size: 1.3rem;
    }
}

/*
    Espaciador bajo el header fijo en las vistas sin imagen a sangre.
    Lo usan páginas simples, archivos, búsqueda, 404 e índice del blog.
*/
.espacio {
    height: 13rem;
}

/**--------------------------- Comentarios ------------------------------- **/

/*
    Estos estilos ya existían pero nunca se aplicaban: no había comments.php
    ni llamada a comments_template(). Ahora sí se renderizan.
*/

/*
    Si el bloque "Comentarios" queda dentro del contenido, ahora no imprime
    nada (ver comments.php) pero puede dejar su div contenedor vacío.
*/
.entry-content .wp-block-comments:empty,
.entry-content .wp-block-post-comments:empty {
    display: none;
}

.comentarios {
    width: 60%;
    background-color: var(--color-blanco);
    padding: 3rem 7rem 4rem;
    font-family: var(--fuente-secundaria);
    margin-bottom: 6rem;
}

@media (max-width: 1080px) {
    .comentarios {
        width: 85%;
        padding: 3rem 5rem 4rem;
    }
}

@media (max-width: 768px) {
    .comentarios {
        width: 100%;
        padding: 3rem 2rem;
    }
}

.comentarios-titulo {
    font-family: var(--fuente-headings);
    font-size: 2.4rem;
    margin-top: 0;
}

.lista-comentarios,
.lista-comentarios .children {
    list-style: none;
    padding-left: 0;
}

.lista-comentarios .children {
    padding-left: 2rem;
    border-left: 2px solid var(--color-borde);
    margin-top: 1.5rem;
}

.lista-comentarios .comment-body {
    background-color: var(--fondo);
    padding: 2rem;
    border-radius: 10px;
    margin-bottom: 1.5rem;
}

.lista-comentarios .comment-author {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 1.5rem;
    font-weight: 600;
}

.lista-comentarios .comment-author img {
    border-radius: 50%;
}

.lista-comentarios .comment-metadata,
.lista-comentarios .comment-metadata a {
    color: #868686;
    font-size: 1.2rem;
    font-weight: 600;
}

.lista-comentarios .comment-content {
    font-size: 1.5rem;
    padding: 0.5rem 0;
}

@media (max-width: 768px) {
    .lista-comentarios .comment-content p {
        font-size: 1.4rem;
    }
}

.comentarios-cerrados {
    font-size: 1.5rem;
    color: var(--color-texto-suave);
}

.comment-respond {
    background-color: var(--fondo);
    padding: 0 2rem 2rem 2rem;
    border-radius: 25px;
}

.comment-form-url {
    display: none;
}

.comment-form-comment label,
.comment-form-author label,
.comment-form-email label {
    font-weight: 600;
    color: #0c3966;
}

#comment {
    max-width: 100%;
    min-width: 100%;
    min-height: 6rem;
    max-height: 13rem;
    border-radius: 10px;
}

.comment-form-author input,
.comment-form-email input {
    border-radius: 10px;
}

.comment-form-cookies-consent label {
    font-size: 1.5rem;
}

.comment-notes,
.comment-form-cookies-consent {
    font-size: 1.4rem;
}

.form-submit {
    padding: 2rem 0 0;
}

.form-submit input {
    background-color: var(--color-acento-oscuro);
    color: var(--color-blanco);
    padding: 1.6rem 2.4rem;
    border-radius: 5px;
    border: none;
    font-size: 1.6rem;
    cursor: pointer;
    transition: 0.25s ease;
}

.form-submit input:hover {
    background-color: #134070;
}

#cancel-comment-reply-link {
    color: var(--color-blanco);
    background-color: #e16e5f;
    padding: 0.5rem 1rem;
    border-radius: 5px;
    font-size: 1.4rem;
    transition: 0.2s ease;
}

#cancel-comment-reply-link:hover {
    background-color: #d93939;
}

.comment-reply-link {
    color: #4d4d4d;
    font-size: 1.3rem;
}

.comment-reply-link:hover {
    color: #000000;
    font-weight: 600;
}

/* Compatibilidad con el bloque de comentarios de Gutenberg. */

.wp-block-comment-template {
    background-color: var(--fondo);
    padding: 2rem;
    border-radius: 25px;
}

@media (max-width: 768px) {
    .wp-block-comment-template {
        padding: 1rem;
    }
}

.wp-block-columns {
    background-color: var(--color-blanco);
    border-radius: 5px;
    padding: 1rem;
}

.wp-block-comment-author-name a {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-oscuro);
}

.wp-block-comment-date a {
    color: #868686;
    font-size: 1.2rem;
    font-weight: 600;
}

.wp-block-comments h2 {
    font-size: 2rem;
}

.wp-block-comment-edit-link a {
    color: #1a4c89;
    font-size: 1.2rem;
    font-weight: 600;
}

.wp-block-comment-content {
    font-size: 1.5rem;
    padding: 0.5rem 0;
    font-weight: 500;
}

@media (max-width: 768px) {
    .wp-block-comment-content p {
        font-size: 1.4rem;
    }
}