/*
Theme Name:   Cocinando Sentido Común
Theme URI:    https://cocinandosentidocomun.com
Description:  Tema hijo de Kadence para un blog de opinión de autor único. Registro visual
              de prensa de opinión clásica: autoridad serena, jerarquía severa, blanco
              generoso y un único acento rojo que se gana su sitio.
Author:       Visual Tec
Template:     kadence
Version:      2.0.0
Text Domain:  csc
*/

/* ===============================================================
   TOKENS

   Playfair Display y Georgia vienen del diseño anterior (SimpleMag,
   2017) y están dentro del propio logotipo: son identidad ya
   adquirida, no una elección nueva, así que se conservan.

   Cada color de texto lleva anotado su contraste medido sobre su
   fondo real. Nada elegido a ojo: el encargo pide lectura cómoda y
   el público del blog tiende a más edad.
   =============================================================== */
:root {
    /* Color */
    --csc-tinta:      #141414;  /* titulares      18.42:1 sobre blanco */
    --csc-texto:      #464646;  /* cuerpo          9.44:1 */
    --csc-meta:       #63686e;  /* metadatos       5.62:1 */
    --csc-rojo:       #c8373d;  /* enlaces         5.16:1 */
    --csc-rojo-hover: #a82c31;  /* hover           6.84:1 */
    --csc-filete:     #e6e6e6;
    --csc-filete-ink: #141414;
    --csc-fondo:      #ffffff;
    --csc-fondo-alt:  #f7f7f7;
    --csc-caja:       #f0736f;
    --csc-caja-ink:   #111111;  /* sobre la caja   6.64:1 */
    --csc-pie:        #464646;
    --csc-pie-texto:  #ffffff;  /* sobre el pie    9.44:1 */
    --csc-pie-suave:  #c9ccd1;  /* sobre el pie    5.86:1 */
    --csc-pie-titulo: #e8888c;  /* sobre el pie    3.74:1, solo texto grande */

    /* Tipografía */
    --csc-titulos: "Playfair Display", Georgia, "Times New Roman", serif;
    --csc-cuerpo:  Georgia, "Times New Roman", serif;
    --csc-sans:    "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    /* Escala tipográfica, razón >= 1.25 entre pasos */
    --csc-t-articulo:  clamp(2.125rem, 1.40rem + 2.60vw, 3.25rem);  /*  34 - 52 px */
    --csc-t-destacado: clamp(1.500rem, 1.10rem + 1.40vw, 2.00rem);  /*  24 - 32 px */
    --csc-t-listado:   clamp(1.250rem, 1.05rem + 0.70vw, 1.50rem);  /*  20 - 24 px */
    --csc-t-seccion:   1.0625rem;                                   /*  17 px, rol de rótulo */
    --csc-t-cuerpo:    1.125rem;                                    /*  18 px */
    --csc-t-meta:      0.8125rem;                                   /*  13 px */

    /* Ritmo vertical */
    --csc-e-1: 0.5rem;
    --csc-e-2: 0.875rem;
    --csc-e-3: 1.5rem;
    --csc-e-4: 2.25rem;
    --csc-e-5: 3.5rem;
    --csc-e-6: clamp(3.5rem, 2rem + 5vw, 5.5rem);

    /* Movimiento */
    --csc-salida: cubic-bezier(0.22, 1, 0.36, 1); /* ease-out-quint */
}

/* ===============================================================
   BASE Y LECTURA
   =============================================================== */
body {
    font-family: var(--csc-cuerpo);
    font-size: var(--csc-t-cuerpo);
    line-height: 1.62;
    color: var(--csc-texto);
    background-color: var(--csc-fondo);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/*
 * Una sola superficie blanca. Kadence sirve el artículo como tarjeta
 * blanca con sombra sobre un fondo gris; esa combinación es
 * exactamente el aspecto de tema genérico que hay que evitar. La
 * prensa de opinión es papel continuo: el texto se separa por
 * filetes y blanco, no por cajas.
 */
article.entry,
.content-bg,
.entry-content-wrap {
    background: transparent;
    box-shadow: none;
}

.entry-content p,
.wp-block-post-excerpt__excerpt {
    text-wrap: pretty;              /* menos huérfanas al cerrar párrafo */
}

.entry-content > * + * { margin-top: var(--csc-e-3); }

/*
 * Medida de lectura.
 *
 * Se acota el bloque de texto, no el contenedor: en la portada
 * .entry-content envuelve toda la composición (rejilla, listado,
 * barra lateral) y limitarla rompería la retícula. Aquí solo se
 * topan los elementos de prosa que cuelgan directamente de ella.
 *
 * Sin este tope, «Bienvenidos» salía a 82 caracteres por línea con
 * el ancho de 1170 px y sin barra lateral.
 */
.entry-content > :is(p, ul, ol, dl, blockquote, h2, h3, h4, h5, h6) {
    max-width: 68ch;
}

/* Páginas sin barra lateral: la columna de texto va centrada */
body.page .entry-content > :is(p, ul, ol, dl, blockquote, h2, h3, h4, h5, h6) {
    margin-inline: auto;
}

::selection {
    background: var(--csc-rojo);
    color: #fff;
}

/* ===============================================================
   TITULARES
   =============================================================== */
h1, h2, h3, h4, h5, h6,
.wp-block-post-title,
.entry-title {
    font-family: var(--csc-titulos);
    font-weight: 700;
    color: var(--csc-tinta);
    text-wrap: balance;             /* reparte las líneas de forma pareja */
    letter-spacing: -0.005em;
}

/*
 * Titular de la entrada: el elemento de más peso de todo el sitio.
 *
 * Se ancla en .single-entry a propósito. Un selector tipo
 * ".single .entry-header .entry-title" también alcanza las cabeceras
 * de las entradas relacionadas (que son .loop-entry) y les aplicaba
 * los 52 px del titular principal.
 */
.single-entry > .entry-content-wrap > .entry-header .entry-title {
    font-size: var(--csc-t-articulo);
    line-height: 1.08;
    letter-spacing: -0.018em;
}

/* Entradas relacionadas y cualquier otro listado del tema */
.loop-entry .entry-title {
    font-size: var(--csc-t-listado);
    line-height: 1.22;
    letter-spacing: -0.005em;
}
.loop-entry .entry-title a { color: inherit; text-decoration: none; }
.loop-entry .entry-title a:hover { color: var(--csc-rojo); }

/* Destacadas de portada (H2) y listado (H3) */
h2.wp-block-post-title { font-size: var(--csc-t-destacado); line-height: 1.15; }
h3.wp-block-post-title { font-size: var(--csc-t-listado);   line-height: 1.22; }

.wp-block-post-title a {
    color: inherit;
    text-decoration: none;
    background-image: linear-gradient(var(--csc-rojo), var(--csc-rojo));
    background-size: 0% 1px;
    background-repeat: no-repeat;
    background-position: 0 100%;
    transition: background-size .45s var(--csc-salida), color .2s ease-out;
}
.wp-block-post-title a:hover {
    color: var(--csc-rojo);
    background-size: 100% 1px;
}

/*
 * Encabezados dentro del texto del artículo.
 *
 * Solo hijos directos: en la portada la composición entera vive
 * dentro de .entry-content, y un ".entry-content h2" genérico
 * metía los 56 px de separación de los intertítulos entre los
 * metadatos y el titular de cada entrada del listado.
 */
.entry-content > h2:not([class*="csc-"]) { font-size: 1.75rem;  line-height: 1.25; margin-top: var(--csc-e-5); }
.entry-content > h3:not([class*="csc-"]) { font-size: 1.375rem; line-height: 1.3;  margin-top: var(--csc-e-4); }

/* ===============================================================
   RÓTULO DE SECCIÓN CON FILETES

   Es un solo rótulo en toda la portada, heredado del diseño
   anterior, no un adorno repetido sección a sección. Va
   deliberadamente por debajo del tamaño de los titulares para que
   lea como etiqueta y no compita con los artículos.
   =============================================================== */
.csc-section-title {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 3vw, 2rem);
    font-family: var(--csc-titulos);
    font-size: var(--csc-t-seccion);
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--csc-tinta);
    margin-top: var(--csc-e-6);
    margin-bottom: var(--csc-e-5);
}
/* El bloque que va justo debajo del rótulo no debe pegarse a él */
.csc-section-title + * { margin-top: var(--csc-e-5) !important; }

.csc-section-title::before,
.csc-section-title::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--csc-filete);
}

/* ===============================================================
   CABECERA

   Kadence deja la fila del logotipo con padding vertical 0, así que
   el logotipo quedaba pegado al borde de la ventana.
   =============================================================== */
.site-main-header-inner-wrap {
    padding-top: clamp(1.5rem, 1rem + 1.6vw, 2.5rem);
    padding-bottom: clamp(1rem, .7rem + 1vw, 1.5rem);
}

.site-branding .site-description {
    margin-top: var(--csc-e-2);
    font-family: var(--csc-titulos);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    line-height: 1.5;
    text-transform: uppercase;
    text-align: center;
    color: var(--csc-tinta);
}

/*
 * Doble filete alrededor del menú: recurso clásico de cabecera de
 * periódico, pero en gris. En negro pesaba más que el propio
 * logotipo y partía la cabecera en dos.
 */
.site-bottom-header-inner-wrap {
    border-top: 1px solid var(--csc-filete);
    border-bottom: 1px solid var(--csc-filete);
}

/* ===============================================================
   NAVEGACIÓN

   El padding vertical se controla desde el ajuste
   primary_navigation_vertical_spacing de Kadence: su CSS generado
   gana en especificidad a cualquier regla escrita aquí.
   =============================================================== */
/*
 * Los separadores verticales entre entradas eran lo que más
 * envejecía la cabecera: son un recurso de plantilla de 2017. Se
 * sustituyen por aire y por un filete de acento que crece desde el
 * centro al pasar por encima y queda fijo en la sección actual, que
 * además indica dónde está el lector.
 */
.main-navigation .menu > .menu-item > a {
    position: relative;
    font-family: var(--csc-sans);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.main-navigation .menu > .menu-item > a::after {
    content: "";
    position: absolute;
    left: 50%;
    right: 50%;
    bottom: 0.45em;
    height: 2px;
    background: var(--csc-rojo);
    transition: left .4s var(--csc-salida), right .4s var(--csc-salida);
}
.main-navigation .menu > .menu-item > a:hover::after,
.main-navigation .menu > .menu-item > a:focus-visible::after,
.main-navigation .menu > .menu-item.current-menu-item > a::after,
.main-navigation .menu > .menu-item.current-menu-ancestor > a::after,
.main-navigation .menu > .menu-item.current-menu-parent > a::after {
    /* 1.2em es el padding lateral que fija primary_navigation_spacing */
    left: 1.2em;
    right: 1.2em;
}

/* La sección actual, además del filete, va en tinta plena */
.main-navigation .menu > .menu-item.current-menu-item > a { color: var(--csc-tinta); }

/* ===============================================================
   CABECERA DE ARCHIVO (categorías, etiquetas, fechas)

   Kadence reserva 200 px de alto para un titular de 58: quedaba un
   hueco enorme alrededor de una palabra. Se ajusta la caja al
   contenido y el nombre de la sección gana el tamaño que le
   corresponde, cerrado con un filete como un cintillo de prensa.
   =============================================================== */
.entry-hero.post-archive-hero-section,
.post-archive-hero-section .entry-hero-container-inner,
.post-archive-hero-section .hero-section-overlay {
    min-height: 0 !important;
}
.post-archive-hero-section .entry-header {
    padding-top: var(--csc-e-5);
    padding-bottom: var(--csc-e-3);
}
.page-title.archive-title {
    font-size: clamp(2.25rem, 1.6rem + 2.2vw, 3rem);
    line-height: 1.08;
    letter-spacing: -0.015em;
}
.post-archive-hero-section {
    border-bottom: 1px solid var(--csc-filete);
    margin-bottom: var(--csc-e-5);
}
.archive-description {
    max-width: 60ch;
    margin: var(--csc-e-2) auto 0;
    color: var(--csc-meta);
}

/* ===============================================================
   METADATOS Y ETIQUETAS
   =============================================================== */
.wp-block-post-date,
.wp-block-post-terms,
.entry-meta {
    font-family: var(--csc-sans);
    font-size: var(--csc-t-meta);
    line-height: 1.4;
    letter-spacing: 0.06em;
    color: var(--csc-meta);
}

/* La categoría es la única etiqueta que lleva el acento */
.wp-block-post-terms.taxonomy-category a {
    color: var(--csc-rojo);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color .2s ease-out, color .2s ease-out;
}
.wp-block-post-terms.taxonomy-category a:hover {
    color: var(--csc-rojo-hover);
    border-bottom-color: currentColor;
}

/*
 * Separador "/" entre categoría y fecha.
 *
 * Es un párrafo suelto dentro del grupo flexible, así que heredaba el
 * cuerpo (18 px Georgia) y su propio interlineado mientras los
 * metadatos van a 13 px de palo seco: quedaba más grande y montado
 * por encima de la línea. Se iguala y se centra con sus vecinos.
 */
.wp-block-post-terms + p,
.wp-block-post-date + p {
    align-self: center;
    margin-block: 0;
    font-family: var(--csc-sans);
    font-size: var(--csc-t-meta);
    line-height: 1.4;
    color: var(--csc-meta);
    opacity: .55;
    user-select: none;
}

.wp-block-post-excerpt__excerpt {
    color: var(--csc-texto);
    margin-top: var(--csc-e-2);
}

/* ===============================================================
   LISTADOS
   =============================================================== */
.wp-block-post-template { padding-left: 0; }
.wp-block-post-template > li { list-style: none; }

/*
 * Ritmo interno de cada entrada del listado: imagen, metadatos,
 * titular y entradilla van agrupados. Los márgenes que traen los
 * bloques por defecto (32 px entre todo) los separaban tanto que
 * dejaban de leerse como una sola unidad.
 */
.wp-block-post-template .wp-block-post-featured-image { margin-bottom: var(--csc-e-2); }
.wp-block-post-template .wp-block-group             { margin-block: 0 var(--csc-e-1); }
.wp-block-post-template .wp-block-post-title        { margin-block: 0 var(--csc-e-1); }
.wp-block-post-template .wp-block-post-excerpt      { margin-block: 0; }

/* Separación solo en el listado vertical, no en la rejilla de destacadas */
.wp-block-post-template:not(.is-flex-container) > li + li {
    margin-top: var(--csc-e-5);
    padding-top: var(--csc-e-5);
    border-top: 1px solid var(--csc-filete);
}

/*
 * Imagen destacada: la figura ya lleva aspect-ratio en línea desde
 * el bloque, así que aquí solo hace falta recortar y dar el gesto de
 * acercamiento al pasar por encima.
 */
.wp-block-post-featured-image {
    overflow: hidden;
    background: var(--csc-fondo-alt);
}
.wp-block-post-featured-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 1.1s var(--csc-salida);
}
.wp-block-post-featured-image:hover img { transform: scale(1.035); }

/* ===============================================================
   ENTRADA INDIVIDUAL
   =============================================================== */

/*
 * Kadence monta la tarjeta de contenido sobre la imagen destacada
 * con un margen inferior negativo. Al quitar la tarjeta, ese solape
 * dejaba el titular escrito encima de la foto.
 */
.article-post-thumbnail,
.post-thumbnail { margin-bottom: 0; }

.single .entry-header,
.single-post .entry-header {
    margin-top: var(--csc-e-4);
    padding-bottom: var(--csc-e-3);
    border-bottom: 1px solid var(--csc-filete);
}

/* Firma y fecha bajo el titular */
.single .entry-meta,
.single-post .entry-meta {
    margin-top: var(--csc-e-2);
    text-transform: uppercase;
    letter-spacing: 0.09em;
}

/*
 * Enlaces del texto corrido.
 *
 * Se acotan a contenedores de prosa a propósito: en la portada toda
 * la composición (destacadas, listado, barra lateral) vive dentro de
 * .entry-content, así que un ".entry-content a" genérico teñía de
 * rojo y subrayaba también los titulares de los artículos. Se
 * excluyen además los bloques propios con prefijo csc-, que tienen
 * su propio tratamiento.
 */
.entry-content :is(p, blockquote, dd, figcaption):not([class*="csc-"]) a,
.entry-content :is(ul, ol):not(.wp-block-post-template) > li a {
    color: var(--csc-rojo);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
    transition: color .2s ease-out;
}
.entry-content :is(p, blockquote, dd, figcaption):not([class*="csc-"]) a:hover,
.entry-content :is(ul, ol):not(.wp-block-post-template) > li a:hover {
    color: var(--csc-rojo-hover);
    text-decoration-thickness: 2px;
}

/*
 * Entradilla con capitular. El diseño anterior marcaba el primer
 * párrafo de «Bienvenidos» con una clase "capitular"; se recupera
 * ese gesto, propio además de la prensa impresa.
 */
.csc-capitular {
    font-size: 1.3125rem;
    line-height: 1.5;
    color: var(--csc-tinta);
}
.csc-capitular::first-letter {
    float: left;
    font-family: var(--csc-titulos);
    font-size: 4.2em;
    line-height: 0.82;
    font-weight: 700;
    padding: 0.06em 0.09em 0 0;
    color: var(--csc-rojo);
}

.csc-firma {
    font-family: var(--csc-sans);
    font-size: var(--csc-t-meta);
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--csc-meta);
    margin-bottom: var(--csc-e-4);
}

.entry-content blockquote {
    font-size: 1.25rem;
    line-height: 1.5;
    font-style: italic;
    color: var(--csc-tinta);
    border-left: 0;                 /* nada de barra lateral de color */
    padding: var(--csc-e-3) 0;
    margin: var(--csc-e-4) 0;
    border-top: 1px solid var(--csc-filete-ink);
    border-bottom: 1px solid var(--csc-filete-ink);
    text-align: center;
}

/* ===============================================================
   BARRA LATERAL
   =============================================================== */
/*
 * La barra lateral iba en una caja con borde negro, como en el
 * diseño anterior. En las páginas de archivo el contenido de la
 * columna es mucho más corto que el listado y la caja quedaba
 * estirada y medio vacía. Se cambia por un filete de separación
 * a la izquierda, que marca la columna sin encerrarla.
 */
.primary-sidebar.widget-area {
    padding-left: var(--csc-e-4);
    border-left: 1px solid var(--csc-filete);
}
@media (max-width: 1024px) {
    .primary-sidebar.widget-area {
        padding-left: 0;
        border-left: 0;
        border-top: 1px solid var(--csc-filete);
        padding-top: var(--csc-e-4);
        margin-top: var(--csc-e-5);
    }
}

.csc-caja-destacada {
    background: var(--csc-caja);
    border: 6px solid #e35b57;
    color: var(--csc-caja-ink);
}
.csc-caja-titulo {
    font-family: var(--csc-titulos);
    font-size: 1.75rem;
    line-height: 1.12;
    text-transform: uppercase;
    color: var(--csc-caja-ink);
    margin: 0;
}
/*
 * La caja funciona como un botón visual, así que el enlace ocupa
 * todo su ancho en vez de ser solo el texto.
 */
.csc-caja-titulo a,
.csc-caja-sub a {
    display: block;
    padding-block: 0.35rem;
    color: var(--csc-caja-ink);
    text-decoration: none;
}
.csc-caja-titulo a:hover,
.csc-caja-sub a:hover { text-decoration: underline; }
.csc-caja-sep {
    width: 56px;
    margin: var(--csc-e-2) auto;
    border: 0;
    border-top: 1px solid rgba(17, 17, 17, .55);
}
.csc-caja-sub {
    font-family: var(--csc-cuerpo);
    font-size: 0.9375rem;
    font-style: italic;
    color: var(--csc-caja-ink);
    margin: 0;
}

.csc-widget-titulo {
    font-family: var(--csc-titulos);
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--csc-tinta);
    margin: var(--csc-e-4) 0 var(--csc-e-2);
    padding-top: var(--csc-e-3);
    border-top: 1px solid var(--csc-filete);
}

/* Buscador en negro, como el del diseño anterior */
.wp-block-search__inside-wrapper { border: 0; }
/*
 * El campo va sobre fondo negro, así que el texto tecleado tiene que
 * ir en blanco de forma explícita: se fija también
 * -webkit-text-fill-color, que es lo que usan los navegadores basados
 * en WebKit para el texto de los campos y lo que dejaba las letras
 * invisibles al escribir.
 */
.wp-block-search .wp-block-search__inside-wrapper .wp-block-search__input,
.wp-block-search input.wp-block-search__input {
    background-color: var(--csc-tinta);
    border: 0;
    color: #ffffff;
    -webkit-text-fill-color: #ffffff;
    caret-color: var(--csc-rojo);
    padding: 0.75rem 0.875rem;
    font-family: var(--csc-sans);
    font-size: 0.9375rem;
}
.wp-block-search .wp-block-search__input::placeholder {
    color: #b9bdc4;
    -webkit-text-fill-color: #b9bdc4;
    opacity: 1;
}
/* .wp-element-button trae sus propios colores y gana por especificidad */
.wp-block-search .wp-block-search__button.wp-element-button {
    background: var(--csc-tinta);
    border: 0;
    color: #fff;
    padding-inline: 0.875rem;
    transition: background-color .2s ease-out;
}
.wp-block-search .wp-block-search__button.wp-element-button:hover { background: var(--csc-rojo); }
.wp-block-search .wp-block-search__button svg { fill: currentColor; }

/* El bloque Archivos ya lleva encabezado propio; su etiqueta sobra */
.wp-block-archives-dropdown label { display: none; }
.wp-block-archives-dropdown select {
    width: 100%;
    padding: 0.625rem 0.75rem;
    font-family: var(--csc-sans);
    font-size: 0.9375rem;
    color: var(--csc-texto);
    border: 1px solid var(--csc-filete);
    background: #fff;
}

.wp-block-latest-comments { padding-left: 0; margin: 0; }
.wp-block-latest-comments__comment {
    list-style: none;
    font-size: 0.9375rem;
    line-height: 1.5;
    min-height: 0;
    margin-bottom: var(--csc-e-3);
}
.wp-block-latest-comments__comment-meta { font-family: var(--csc-sans); font-size: var(--csc-t-meta); }
.wp-block-latest-comments__comment-date { color: var(--csc-meta); }
.wp-block-latest-comments__comment-excerpt p { font-size: 0.9375rem; color: var(--csc-texto); }

/* ===============================================================
   PAGINACIÓN

   Sirve a los dos paginadores del sitio, que comparten las clases
   .page-numbers: el del bloque Query Loop (portada y /entradas) y el
   del propio tema (archivos de categoría).

   Cada número es un objetivo de 44 px, que es el mínimo táctil, y la
   página actual se marca con el mismo filete de acento que la
   sección activa del menú, para que el lenguaje sea uno solo.
   =============================================================== */
.wp-block-query-pagination,
nav.navigation.pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.125rem;
    margin-top: var(--csc-e-5);
    padding-top: var(--csc-e-4);
    border-top: 1px solid var(--csc-filete);
    font-family: var(--csc-sans);
}
nav.navigation.pagination .nav-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.125rem;
}

/*
 * Kadence pinta la página actual como un cuadro rojo relleno con
 * esquinas redondeadas. Es el aspecto de plantilla que se está
 * evitando en todo el sitio, así que se limpia el fondo y se marca
 * con filete, igual que la sección activa del menú.
 */
.page-numbers,
.pagination .page-numbers,
.pagination .current {
    background: transparent;
    border-radius: 0;
    border-width: 0;
}

.page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 44px;
    min-height: 44px;
    padding-inline: 0.5rem;
    font-size: 0.9375rem;
    letter-spacing: 0.03em;
    color: var(--csc-texto);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: color .2s ease-out, border-color .25s ease-out;
}
a.page-numbers:hover {
    color: var(--csc-rojo);
    border-bottom-color: var(--csc-filete);
}
.page-numbers.current {
    color: var(--csc-rojo);
    font-weight: 700;
    border-bottom-color: var(--csc-rojo);
}
.page-numbers.dots {
    min-width: 1.75rem;
    color: var(--csc-meta);
    letter-spacing: 0.12em;
}

/* Anterior y siguiente: rótulo, no número */
.page-numbers.next,
.page-numbers.prev,
.wp-block-query-pagination-next,
.wp-block-query-pagination-previous {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 44px;
    padding-inline: 0.875rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--csc-tinta);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: color .2s ease-out, border-color .25s ease-out;
}
.page-numbers.next:hover,
.page-numbers.prev:hover,
.wp-block-query-pagination-next:hover,
.wp-block-query-pagination-previous:hover {
    color: var(--csc-rojo);
    border-bottom-color: var(--csc-rojo);
}
/*
 * Los dos paginadores llegaban distintos: el del tema pinta una
 * flecha SVG sin texto y el del bloque escribía «Página siguiente».
 * Se oculta el SVG y se compone la misma etiqueta en ambos, con la
 * flecha como glifo. El enlace del tema conserva su
 * <span class="screen-reader-text">, así que el nombre accesible no
 * depende de este texto decorativo.
 */
.page-numbers.next .kadence-svg-iconset,
.page-numbers.prev .kadence-svg-iconset { display: none; }

.page-numbers.next::after  { content: "Siguiente \00a0\2192"; }
.page-numbers.prev::before { content: "\2190\00a0 Anterior"; }

/* Separación entre el grupo de números y los rótulos */
.wp-block-query-pagination-numbers { margin-inline: var(--csc-e-2); }

@media (max-width: 767px) {
    /* En móvil los números intermedios estorban: basta actual y saltos */
    .page-numbers { min-width: 40px; padding-inline: 0.25rem; }
    .wp-block-query-pagination-next,
    .wp-block-query-pagination-previous { font-size: 0.6875rem; letter-spacing: 0.1em; }
}

/* ===============================================================
   PIE

   Dos alturas: navegación centrada arriba y una línea de copyright
   abajo, separadas por un filete tenue. El crédito del tema se
   retira desde footer_html_content.
   =============================================================== */
/*
 * Pie claro, no el bloque gris del diseño anterior.
 *
 * El #464646 heredado es un gris intermedio: aunque el blanco encima
 * dé 9.4:1, se lee turbio y rompe la idea de papel continuo con la
 * que se quitó la tarjeta del contenido. En papel, el pie de un
 * periódico no es una banda oscura: es la misma hoja cerrada con un
 * filete. Aquí se hace lo mismo, y de paso el texto pasa a 18:1.
 */
.site-footer,
.site-footer-row-container-inner {
    background: var(--csc-fondo);
    color: var(--csc-texto);
}

/* Cierre con un filete tenue, no con una línea negra */
.site-footer {
    margin-top: var(--csc-e-6);
    border-top: 1px solid var(--csc-filete);
}
.site-middle-footer-inner-wrap { border-bottom: 1px solid var(--csc-filete); }

/* El menú del pie, centrado en su fila */
.site-middle-footer-inner-wrap .site-footer-section,
.site-footer .footer-navigation,
.site-footer .footer-navigation .menu {
    justify-content: center;
    text-align: center;
    width: 100%;
}

/* Logotipo del pie: la misma marca, en pequeño y sin competir */
.site-top-footer-inner-wrap {
    padding-top: var(--csc-e-5);
    padding-bottom: var(--csc-e-3);
}
.csc-logo-pie { margin: 0 auto; }
.csc-logo-pie img {
    display: block;
    margin: 0 auto;
    height: auto;
    opacity: .9;
    transition: opacity .2s ease-out;
}
.csc-logo-pie a:hover img { opacity: 1; }
.site-footer .widget { margin-bottom: 0; }

/*
 * El número de columnas de cada fila del pie es un ajuste del tema
 * (footer_middle_columns), no CSS: Kadence lo aplica con la clase
 * .site-footer-row-columns-N, que gana en especificidad. Se cambia
 * allí y aquí no hace falta anular nada.
 */
.site-middle-footer-inner-wrap {
    padding-top: var(--csc-e-4);
    padding-bottom: var(--csc-e-3);
}
.footer-navigation .menu {
    justify-content: center;
    flex-wrap: wrap;
}
.site-bottom-footer-inner-wrap {
    padding-top: var(--csc-e-3);
    padding-bottom: var(--csc-e-4);
    border-top: 1px solid rgba(255, 255, 255, .14);
}

/* Navegación del pie: versalitas espaciadas, sin adornos */
.footer-navigation .menu > .menu-item > a {
    font-family: var(--csc-sans);
    font-size: 0.8125rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--csc-tinta);          /* 18.42:1 */
    padding-inline: 0.9rem;
    transition: color .2s ease-out;
}
.footer-navigation .menu > .menu-item > a:hover { color: var(--csc-rojo); }

/* Copyright */
.site-footer .footer-html {
    font-family: var(--csc-sans);
    font-size: 0.8125rem;
    letter-spacing: 0.04em;
    color: var(--csc-meta);           /* 5.62:1 */
    text-align: center;
}

.site-footer .widget-title,
.site-footer h2,
.site-footer h3 { color: var(--csc-tinta); }
.site-footer a       { color: var(--csc-texto); }
.site-footer a:hover { color: var(--csc-rojo); }

/* ===============================================================
   ENTRADAS RELACIONADAS
   =============================================================== */
.entry-related-title {
    font-family: var(--csc-titulos);
    font-size: var(--csc-t-seccion);
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-align: center;
    color: var(--csc-tinta);
    margin-bottom: var(--csc-e-4);
}
.entry-related {
    margin-top: var(--csc-e-6);
    padding-top: var(--csc-e-5);
    border-top: 1px solid var(--csc-filete-ink);
}
/* Rejilla estática, sin carrusel (ver template-parts/content/entry_related.php) */
.csc-related-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--csc-e-4);
    list-style: none;
    margin: 0;
    padding: 0;
}
.csc-related-list > li { margin: 0; }

/*
 * Los tres teasers van sin extracto: con la barra lateral cada
 * columna ronda los 200 px y el resumen se partía en líneas de tres
 * palabras. Imagen, sección, titular y fecha bastan para decidir si
 * se sigue leyendo.
 */
.csc-related-list .entry-summary,
.csc-related-list .entry-content,
.csc-related-list .entry-actions { display: none; }

.csc-related-list .entry-title { font-size: 1.125rem; line-height: 1.25; }
.csc-related-list .entry-meta  { font-size: 0.75rem; }

@media (max-width: 767px) {
    .csc-related-list { grid-template-columns: 1fr; gap: var(--csc-e-3); }
}

.entry-related .loop-entry .entry-header { margin-top: var(--csc-e-2); }
.entry-related .entry-meta {
    font-size: var(--csc-t-meta);
    text-transform: uppercase;
    letter-spacing: 0.09em;
}

/* ===============================================================
   COMENTARIOS

   Los comentarios volvieron a funcionar al reparar el AUTO_INCREMENT
   de la base de datos, así que la sección pasa de decorativa a real
   y necesita el mismo tratamiento que el resto.
   =============================================================== */
.comments-area {
    margin-top: var(--csc-e-6);
    padding-top: var(--csc-e-5);
    border-top: 1px solid var(--csc-filete-ink);
}
.comments-title,
.comment-reply-title {
    font-family: var(--csc-titulos);
    font-size: var(--csc-t-seccion);
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--csc-tinta);
    margin-bottom: var(--csc-e-4);
}

.comment-list { list-style: none; padding-left: 0; margin: 0; }
.comment-list > li + li {
    margin-top: var(--csc-e-4);
    padding-top: var(--csc-e-4);
    border-top: 1px solid var(--csc-filete);
}
.comment-author .fn {
    font-family: var(--csc-titulos);
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--csc-tinta);
    font-style: normal;
}
.comment-metadata,
.comment-metadata a {
    font-family: var(--csc-sans);
    font-size: var(--csc-t-meta);
    letter-spacing: 0.05em;
    color: var(--csc-meta);
    text-decoration: none;
}
.comment-content { margin-top: var(--csc-e-2); max-width: 68ch; }
.comment-reply-link {
    display: inline-block;
    margin-top: var(--csc-e-2);
    padding-block: 0.35rem;
    font-family: var(--csc-sans);
    font-size: var(--csc-t-meta);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--csc-rojo);
    text-decoration: none;
    border-bottom: 1px solid transparent;
}
.comment-reply-link:hover { border-bottom-color: currentColor; }

/* Formulario */
.comment-respond { margin-top: var(--csc-e-5); }
.comment-notes,
.comment-form-cookies-consent label {
    font-family: var(--csc-sans);
    font-size: var(--csc-t-meta);
    color: var(--csc-meta);
}
.comment-form label {
    font-family: var(--csc-sans);
    font-size: var(--csc-t-meta);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--csc-meta);
}
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
    width: 100%;
    padding: 0.75rem 0.875rem;
    font-family: var(--csc-cuerpo);
    font-size: 1rem;
    color: var(--csc-texto);
    background: #fff;
    border: 1px solid var(--csc-filete);
    border-radius: 0;
    transition: border-color .2s ease-out;
}
.comment-form input:focus,
.comment-form textarea:focus { border-color: var(--csc-tinta); }
.comment-form textarea { min-height: 9rem; line-height: 1.55; }

.comment-form .submit,
.comment-form input[type="submit"] {
    min-height: 48px;
    padding-inline: 1.75rem;
    font-family: var(--csc-sans);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #fff;
    background: var(--csc-tinta);
    border: 0;
    border-radius: 0;
    cursor: pointer;
    transition: background-color .2s ease-out;
}
.comment-form .submit:hover,
.comment-form input[type="submit"]:hover { background: var(--csc-rojo); }

/* ===============================================================
   ESTADOS DE INTERACCIÓN

   Foco visible en todo lo enfocable: es requisito de accesibilidad
   y el sitio no tenía ninguno.
   =============================================================== */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--csc-rojo);
    outline-offset: 3px;
    border-radius: 1px;
}

.skip-link:focus {
    position: fixed !important;
    top: 1rem; left: 1rem;
    width: auto !important; height: auto !important;
    padding: 0.75rem 1rem;
    background: var(--csc-tinta);
    color: #fff;
    z-index: 100;
}

/* ===============================================================
   RESPONSIVE
   =============================================================== */
@media (max-width: 767px) {
    body { font-size: 1.0625rem; }        /* 17 px, holgado sobre el mínimo de 14 */

    .site-main-header-inner-wrap { padding-top: 1.125rem; padding-bottom: 0.875rem; }
    .csc-section-title { letter-spacing: 0.1em; gap: 0.875rem; }

    .wp-block-post-template:not(.is-flex-container) > li + li {
        margin-top: var(--csc-e-4);
        padding-top: var(--csc-e-4);
    }

    /*
     * Objetivos táctiles. Medidos en un iPhone de 375 px: los enlaces
     * de categoría quedaban en 14 px de alto y las etiquetas en 35.
     * El mínimo cómodo es 44.
     */
    .wp-block-post-terms a,
    .wp-block-post-date a,
    .entry-taxonomies a,
    .tag-link,
    .category-link,
    a[class*="category-link-"] {
        display: inline-block;
        padding-block: 0.75rem;
    }

    /*
     * Un poco más de columna de lectura. Se cambia la variable de
     * Kadence, no el padding: los bloques "alignwide" calculan su
     * sangrado a partir de ella, y tocar solo el padding los dejaba
     * sobresaliendo 4 px por cada lado.
     */
    :root { --global-content-edge-padding: 1.125rem; }

    /* Columna estrecha: partir palabras largas evita ríos en Georgia */
    .entry-content p { hyphens: auto; }

    .entry-content blockquote { font-size: 1.125rem; }
    .csc-caja-titulo { font-size: 1.5rem; }
}

/* ===============================================================
   BOTÓN DE MENÚ MÓVIL

   Medía 37 x 31 px, por debajo del mínimo táctil de 44. Es el único
   acceso a la navegación en el móvil, así que es el objetivo más
   importante de toda la interfaz.
   =============================================================== */
.mobile-toggle-open-container .menu-toggle-open {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
}
.mobile-toggle-open-container .menu-toggle-open .menu-toggle-icon { font-size: 24px; }

/* ===============================================================
   MOVIMIENTO REDUCIDO
   =============================================================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .wp-block-post-featured-image:hover img { transform: none; }
    .wp-block-post-title a { background-image: none; }
}