/*
Theme Name: Mesmerize Child
Description: Tema hijo de Mesmerize para esta-pasando-ahora.com
Author: Chechu
Template: mesmerize
Version: 1.1.0
Text Domain: mesmerize-child
*/

/* ============================================================
   1. Cards de posts con profundidad
   ============================================================ */
.post-list .post-list-item .card {
    border: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.post-list .post-list-item .card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
    transform: translateY(-3px);
}

/* ============================================================
   2. Hero: overlay degradado en vez de negro plano
   ============================================================ */
.header-homepage:not(.header-slide).color-overlay:before {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.65) 100%);
}

/* ============================================================
   3. Título de post más contundente
   ============================================================ */
.post-title a {
    font-weight: 600;
}

/* ============================================================
   4. Enlaces con color primario coherente
      (naranja #C2410C — pasa WCAG AA 4.5:1 sobre blanco, ratio 5.18)
      Fallback global: el azul del parent (#03a9f4) nunca debe verse.
      Mesmerize NO usa .entry-content: single usa .post-content-inner,
      la home usa .post-excerpt y .post-title
   ============================================================ */
a {
    color: #c2410c;
}

a:hover {
    color: #9a3412;
}

.post-content-inner a,
.post-excerpt a,
.post-title a,
.widget a {
    color: #c2410c;
    text-decoration: underline;
}

.post-content-inner a:hover,
.post-excerpt a:hover,
.post-title a:hover,
.widget a:hover {
    color: #9a3412;
}

/* Texto base de las cards de la home (2026-08-21).
   El parent pinta .post-excerpt y .post-meta/.muted con #8E9DAE
   (2.77:1 sobre blanco — falla WCAG AA 4.5:1). Se pasa a #444
   (9.74:1), el mismo color que usa el child en el contenido de
   single. */
.post-excerpt,
.post-list-item .post-meta,
.post-meta.muted,
.muted {
    color: #444;
}

/* ============================================================
   5. Logo: altura compacta para que el menú quepa en una línea
      (el parent fuerza 70px; 48px deja respirar al nav)
   ============================================================ */
body img.logo.dark,
body img.custom-logo {
    /* Ancho/alto EXPLÍCITOS: WP sirve estos SVG con width/height="1" y el
       navegador ignora el aspect-ratio CSS en elementos reemplazados con
       dimensiones intrínsecas 1x1; con width:auto el ancho es 0 hasta que
       descarga el SVG y la nav reflow (CLS ~0.05 desktop). Fijar el tamaño
       real (viewBox 1836.26x309.17 -> 297x50 a 50px de alto) reserva el
       espacio desde el primer frame. */
    width: 297px;
    height: 50px;
    max-height: 50px !important;
}

/* ============================================================
   5b. CLS: reservar el padding-top del hero (JS del tema)
       Mesmerize aplica vía JS (inc/header-options/content.php,
       mesmerizeSetHeaderTopSpacing) el padding-top del hero con
       la altura de .header-top MEDIDA tras el render (setTimeout
       100ms) -> el hero se desplaza ~100ms despues del primer
       frame (CLS ~0.09 desktop / ~0.05 mobile). Este padding lo
       reserva desde el primer frame; el JS posterior es idempotente
       (aplica el mismo valor). Valores medidos en Playwright por
       viewport. El JS del tema escucha resize y sigue actuando. */
.header-wrapper .header,
.header-wrapper .header-homepage {
    padding-top: 132px !important;
}

@media (min-width: 1025px) and (max-width: 1199px) {

    .header-wrapper .header,
    .header-wrapper .header-homepage {
        padding-top: 121px !important;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {

    .header-wrapper .header,
    .header-wrapper .header-homepage {
        padding-top: 79px !important;
    }
}

@media (max-width: 767px) {

    .header-wrapper .header,
    .header-wrapper .header-homepage {
        padding-top: 79px !important;
    }
}

@media (min-width: 1440px) {

    .header-wrapper .header,
    .header-wrapper .header-homepage {
        padding-top: 83px !important;
    }
}

/* ============================================================
   5c. Banner de cookies CookieYes: quitar animaciones
   El banner inyecta el .cky-consent-container con animaciones de
   entrada que cambian la caja (300->324px) y suman CLS. Sin anim
   el banner aparece en su posicion final desde el primer frame. */
div.cky-consent-container,
div.cky-consent-bar,
div.cky-notice {
    animation: none !important;
    transition: none !important;
}

/* ============================================================
   6. Tablas en el contenido del post: scroll horizontal en móvil
      Las tablas de los posts (44 modelos, bacterias, etc.) son
      más anchas que la pantalla. En vez de encogerlas (ilegible),
      se envuelven en un contenedor con scroll horizontal y la
      primera columna queda fija (sticky) para no perder el
      contexto al desplazarse. Aplica a TODAS las tablas del
      contenido, tengan o no su propio <style> inline.
   ============================================================ */
.post-content-inner table,
.entry-content table {
    display: block;
    overflow-x: auto;
    max-width: 100%;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    -webkit-overflow-scrolling: touch;
}

.post-content-inner table th,
.post-content-inner table td,
.entry-content table th,
.entry-content table td {
    white-space: nowrap;
}

.post-content-inner table th:first-child,
.post-content-inner table td:first-child,
.entry-content table th:first-child,
.entry-content table td:first-child {
    position: sticky;
    left: 0;
    white-space: normal;
    background: #ffffff;
    z-index: 1;
    box-shadow: 2px 0 4px rgba(0, 0, 0, 0.08);
}

.post-content-inner table th:first-child,
.entry-content table th:first-child {
    z-index: 2;
}

@media (min-width: 768px) {

    .post-content-inner table th:first-child,
    .post-content-inner table td:first-child,
    .entry-content table th:first-child,
    .entry-content table td:first-child {
        max-width: 25%;
    }
}

@media (max-width: 767px) {

    .post-content-inner table th:first-child,
    .post-content-inner table td:first-child,
    .entry-content table th:first-child,
    .entry-content table td:first-child {
        max-width: 40%;
    }

    /* Texto de celdas al 90% en móvil: más contenido visible sin scroll */
    .post-content-inner table th,
    .post-content-inner table td,
    .entry-content table th,
    .entry-content table td {
        font-size: 0.9em;
    }
}

@media (prefers-color-scheme: dark) {

    .post-content-inner table th:first-child,
    .post-content-inner table td:first-child,
    .entry-content table th:first-child,
    .entry-content table td:first-child {
        background: #1e1e1e;
    }
}

/* ============================================================
   7. Header subtitle como H2 (el parent lo estiliza con
      p.header-subtitle; el child lo imprime como h2.header-subtitle
      y aquí se replica el estilo del parent para que no cambie
      el aspecto visual).
   ============================================================ */
h2.header-subtitle {
    font-family: "Muli", sans-serif;
    font-size: 1.3rem;
    font-weight: 300;
    line-height: 130%;
    color: #ffffff;
    margin-bottom: 1.25rem;
}

/* ============================================================
   7b. Hero compacto en móvil (2026-08-21).
       El hero ocupaba más de media pantalla en móvil: título
       hero-title 3.5rem (56px) + subtítulo largo obligaban a
       scroll inmediato. En <768px se reduce tipografía y padding
       vertical (el inline de Kirki da 14% arriba/abajo en la
       home con .header-homepage — se contrarresta con !important).
   ============================================================ */
@media (max-width: 767px) {

    .header .hero-title,
    .header-homepage .hero-title {
        font-size: 1.9rem;
        line-height: 1.2;
        margin-bottom: 0.6rem;
    }

    .header .header-subtitle,
    .header-homepage .header-subtitle {
        font-size: 0.95rem;
        line-height: 1.45;
        margin-bottom: 0.5rem;
    }

    .header-homepage .header-description-row,
    .header .header-description-row {
        padding-top: 8% !important;
        padding-bottom: 8% !important;
    }
}

/* ============================================================
   8. Author box (final de posts) y header de página de autor.
      Avatares locales vía Simple Local Avatars.
   ============================================================ */
.ep-author-box {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    margin: 2.5rem 0 1rem;
    padding: 1.5rem;
    background: #f7f7f7;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
}

.ep-author-box-avatar {
    flex: 0 0 96px;
    width: 96px;
    height: 96px;
}

.ep-author-box-avatar img {
    border-radius: 50%;
    width: 96px !important;
    height: 96px !important;
    max-width: 96px;
    object-fit: cover;
    display: block;
}

.ep-author-box-name {
    margin: 0 0 0.5rem;
    font-size: 1.15rem;
    font-weight: 600;
}

.ep-author-box-name a {
    color: #c2410c;
    text-decoration: none;
}

.ep-author-box-name a:hover {
    color: #9a3412;
    text-decoration: underline;
}

.ep-author-box-bio {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.6;
    color: #444;
}

.ep-author-archive {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    margin-bottom: 2.5rem;
    padding: 2rem;
    background: #f7f7f7;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
}

.ep-author-archive-avatar {
    flex: 0 0 160px;
    width: 160px;
    height: 160px;
}

.ep-author-archive-avatar img {
    border-radius: 50%;
    width: 128px !important;
    height: 128px !important;
    max-width: 128px;
    object-fit: cover;
    display: block;
}

/* Imagen real del autor (no avatar circular) en la página de autor */
.ep-author-archive-avatar .ep-author-archive-img {
    border-radius: 12px;
    width: 160px !important;
    height: 160px !important;
    max-width: 160px;
    object-fit: cover;
    display: block;
}

.ep-author-archive-name {
    margin: 0 0 0.75rem;
    font-size: 1.6rem;
    font-weight: 600;
}

.ep-author-archive-bio {
    margin: 0;
    font-size: 1rem;
    line-height: 1.6;
    color: #444;
}

@media (max-width: 767px) {

    .ep-author-box,
    .ep-author-archive {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}

/* ============================================================
   9. Acento de categoría en las cards de la home/archivos.
      Barra superior de 4px con el color de la categoría principal
      (clase ep-cat-<slug> inyectada por post_class en functions.php).
      En hover, la sombra de la card toma el tinte del color.
   ============================================================ */
.post-list .post-list-item .card {
    border-top: 4px solid transparent;
}

.post-list .post-list-item .card.ep-cat-ciencia {
    border-top-color: #0d9488;
}

.post-list .post-list-item .card.ep-cat-tecnologia {
    border-top-color: #2563eb;
}

.post-list .post-list-item .card.ep-cat-inteligencia-artificial {
    border-top-color: #7c3aed;
}

.post-list .post-list-item .card.ep-cat-productividad {
    border-top-color: #b45309;
}

.post-list .post-list-item .card.ep-cat-salud {
    border-top-color: #16a34a;
}

.post-list .post-list-item .card.ep-cat-bienestar {
    border-top-color: #db2777;
}

.post-list .post-list-item .card.ep-cat-educacion {
    border-top-color: #ca8a04;
}

.post-list .post-list-item .card.ep-cat-estilo-de-vida {
    border-top-color: #ea580c;
}

.post-list .post-list-item .card.ep-cat-ciencia:hover {
    box-shadow: 0 8px 24px rgba(13, 148, 136, 0.18);
}

.post-list .post-list-item .card.ep-cat-tecnologia:hover {
    box-shadow: 0 8px 24px rgba(37, 99, 235, 0.18);
}

.post-list .post-list-item .card.ep-cat-inteligencia-artificial:hover {
    box-shadow: 0 8px 24px rgba(124, 58, 237, 0.18);
}

.post-list .post-list-item .card.ep-cat-productividad:hover {
    box-shadow: 0 8px 24px rgba(180, 83, 9, 0.18);
}

.post-list .post-list-item .card.ep-cat-salud:hover {
    box-shadow: 0 8px 24px rgba(22, 163, 74, 0.18);
}

.post-list .post-list-item .card.ep-cat-bienestar:hover {
    box-shadow: 0 8px 24px rgba(219, 39, 119, 0.18);
}

.post-list .post-list-item .card.ep-cat-educacion:hover {
    box-shadow: 0 8px 24px rgba(202, 138, 4, 0.18);
}

.post-list .post-list-item .card.ep-cat-estilo-de-vida:hover {
    box-shadow: 0 8px 24px rgba(234, 88, 12, 0.18);
}

/* ============================================================
   10. Hero interior con imagen de fondo por categoría.
       El tema pinta el hero interior (div.header.color-overlay)
       con el color por defecto #6a73da. Con la clase ep-hero-<slug>
       en el body (inyectada por body_class en functions.php), se
       aplica la imagen de la categoría como fondo. Las URLs se
       actualizan al regenerar las imágenes (ver mapping en wiki).
   ============================================================ */
body.ep-hero-ciencia .header.color-overlay,
body.ep-hero-ciencia .header-homepage {
    background-image: url('https://esta-pasando-ahora.com/wp-content/uploads/2026/08/hero_ciencia_2x.jpg') !important;
    background-size: cover !important;
    background-position: center center !important;
}

body.ep-hero-tecnologia .header.color-overlay,
body.ep-hero-tecnologia .header-homepage {
    background-image: url('https://esta-pasando-ahora.com/wp-content/uploads/2026/08/hero_tecnologia_2x.jpg') !important;
    background-size: cover !important;
    background-position: center center !important;
}

body.ep-hero-inteligencia-artificial .header.color-overlay,
body.ep-hero-inteligencia-artificial .header-homepage {
    background-image: url('https://esta-pasando-ahora.com/wp-content/uploads/2026/08/hero_inteligencia-artificial_2x.jpg') !important;
    background-size: cover !important;
    background-position: center center !important;
}

body.ep-hero-productividad .header.color-overlay,
body.ep-hero-productividad .header-homepage {
    background-image: url('https://esta-pasando-ahora.com/wp-content/uploads/2026/08/hero_productividad_2x.jpg') !important;
    background-size: cover !important;
    background-position: center center !important;
}

body.ep-hero-salud .header.color-overlay,
body.ep-hero-salud .header-homepage {
    background-image: url('https://esta-pasando-ahora.com/wp-content/uploads/2026/08/hero_salud_2x.jpg') !important;
    background-size: cover !important;
    background-position: center center !important;
}

body.ep-hero-bienestar .header.color-overlay,
body.ep-hero-bienestar .header-homepage {
    background-image: url('https://esta-pasando-ahora.com/wp-content/uploads/2026/08/hero_bienestar_2x.jpg') !important;
    background-size: cover !important;
    background-position: center center !important;
}

body.ep-hero-educacion .header.color-overlay,
body.ep-hero-educacion .header-homepage {
    background-image: url('https://esta-pasando-ahora.com/wp-content/uploads/2026/08/hero_educacion_2x.jpg') !important;
    background-size: cover !important;
    background-position: center center !important;
}

body.ep-hero-estilo-de-vida .header.color-overlay,
body.ep-hero-estilo-de-vida .header-homepage {
    background-image: url('https://esta-pasando-ahora.com/wp-content/uploads/2026/08/hero_estilo-de-vida_2x.jpg') !important;
    background-size: cover !important;
    background-position: center center !important;
}

/* ============================================================
   11. Eliminación total del azul #03a9f4 / #2ebcfc del parent.
       El parent tiene 83 reglas con #03a9f4 hardcodeado en style.css
       (compilado from $mesmerize_variables). El functions.php del child
       sobreescribe la variable PHP para el CSS inline dinámico (nav-bar,
       footer). Estas reglas CSS cubren el style.css compilado estático.
       #03a9f4 (azul) → #c2410c (naranja)
       #2ebcfc (azul hover) → #9a3412 (naranja oscuro)
   ============================================================ */

/* Clases de color del parent */
.color1 {
    color: #c2410c !important;
}

.bg-color1 {
    background-color: #c2410c !important;
}

.border-color1 {
    border-color: #c2410c !important;
}

i.fa.color1 {
    color: #c2410c !important;
}

i.fa.icon.bordered.color1,
i.fa.icon.color1.card[class*="bottom-border-"] {
    border-color: #c2410c !important;
}

i.fa.icon.reverse.color1 {
    background-color: #c2410c !important;
}

a.color1:not(.button) {
    color: #c2410c !important;
}

a.color1:not(.button):hover {
    color: #9a3412 !important;
}

.button.color1 {
    background-color: #c2410c !important;
    border-color: #c2410c !important;
}

.button.color1:hover {
    background-color: #9a3412 !important;
    border-color: #9a3412 !important;
}

.button.color1.outline {
    color: #c2410c !important;
    border-color: #c2410c !important;
}

.button.color1.outline:hover {
    color: #9a3412 !important;
}

hr.small-line.color1 {
    background-color: #c2410c !important;
}

.circle-counter.color1 .circle-bar {
    stroke: #c2410c !important;
}

/* Botones genéricos del parent */
.button {
    background-color: #c2410c !important;
    border: 2px solid #c2410c !important;
}

.button:hover {
    background-color: #9a3412 !important;
    border-color: #9a3412 !important;
}

.button.outline {
    border-color: #c2410c !important;
    color: #c2410c !important;
}

.button.link {
    border-color: #c2410c !important;
    color: #c2410c !important;
}

/* Menú principal: hover y active state */
ul.dropdown-menu>li:hover>a,
ul.dropdown-menu>li.hover>a {
    color: #c2410c !important;
}

ul.dropdown-menu.simple-menu-items>.current-menu-item>a {
    color: #c2410c !important;
}

ul.dropdown-menu.default>.current-menu-item>a {
    border-bottom: 3px solid #c2410c !important;
}

/* Variantes .current_page_item y .active-line-bottom del parent
   (border-bottom #03a9f4) — resto de azul detectado por Chechu 2026-08-28 */
ul.dropdown-menu.active-line-bottom > .current_page_item > a,
ul.dropdown-menu.active-line-bottom > .current-menu-item > a,
ul.dropdown-menu.default > .current_page_item > a,
ul.dropdown-menu.default > .current-menu-item > a {
    border-bottom: 3px solid #c2410c !important;
}

/* Variantes .current_page_item en TODOS los modos del dropdown
   (WordPress añade current_page_item además de current-menu-item en
   items de páginas; el parent las pinta con #03a9f4). Barrido completo
   del parent style.css 2026-08-28: simple-menu-items, active-line-top,
   active-round-button, active-arrow-down, active-round-border-button,
   active-line-top-bottom + variantes .coloured-nav y .fixto-fixed. */
ul.dropdown-menu.simple-menu-items > .current_page_item > a,
ul.dropdown-menu.simple-menu-items > .current-menu-item > a {
    color: #c2410c !important;
}

ul.dropdown-menu.active-line-top > .current_page_item > a,
ul.dropdown-menu.active-line-top > .current-menu-item > a {
    border-top: 3px solid #c2410c !important;
}

ul.dropdown-menu.active-round-button > .current_page_item > a,
ul.dropdown-menu.active-round-button > .current-menu-item > a {
    background-color: #c2410c !important;
    color: #ffffff !important;
}

ul.dropdown-menu.active-arrow-down > .current_page_item:after,
ul.dropdown-menu.active-arrow-down > .current-menu-item:after {
    border-color: transparent transparent #c2410c transparent !important;
}

ul.dropdown-menu.active-round-border-button > .current_page_item > a,
ul.dropdown-menu.active-round-border-button > .current-menu-item > a {
    border: 2px solid #c2410c !important;
    color: #c2410c !important;
}

ul.dropdown-menu.active-line-top-bottom > .current_page_item > a,
ul.dropdown-menu.active-line-top-bottom > .current-menu-item > a {
    border-top: 1px solid #c2410c !important;
    border-bottom: 1px solid #c2410c !important;
    color: #c2410c !important;
}

.coloured-nav ul.dropdown-menu.active-line-bottom > .current_page_item > a,
.coloured-nav ul.dropdown-menu.active-line-bottom > .current-menu-item > a,
.coloured-nav ul.dropdown-menu.default > .current_page_item > a,
.coloured-nav ul.dropdown-menu.default > .current-menu-item > a,
.fixto-fixed ul.dropdown-menu.active-line-bottom > .current_page_item > a,
.fixto-fixed ul.dropdown-menu.active-line-bottom > .current-menu-item > a,
.fixto-fixed ul.dropdown-menu.default > .current_page_item > a,
.fixto-fixed ul.dropdown-menu.default > .current-menu-item > a {
    border-bottom: 3px solid #c2410c !important;
}

.coloured-nav ul.dropdown-menu.active-line-bottom > li:not(.current-menu-item):not(.current_page_item):hover > a,
.coloured-nav ul.dropdown-menu.active-line-bottom > li:not(.current-menu-item):not(.current_page_item).hover > a,
.coloured-nav ul.dropdown-menu.default > li:not(.current-menu-item):not(.current_page_item):hover > a,
.coloured-nav ul.dropdown-menu.default > li:not(.current-menu-item):not(.current_page_item).hover > a,
.fixto-fixed ul.dropdown-menu.active-line-bottom > li:not(.current-menu-item):not(.current_page_item):hover > a,
.fixto-fixed ul.dropdown-menu.active-line-bottom > li:not(.current-menu-item):not(.current_page_item).hover > a,
.fixto-fixed ul.dropdown-menu.default > li:not(.current-menu-item):not(.current_page_item):hover > a,
.fixto-fixed ul.dropdown-menu.default > li:not(.current-menu-item):not(.current_page_item).hover > a {
    color: #c2410c !important;
}

.coloured-nav ul.dropdown-menu.active-line-top > .current_page_item > a,
.coloured-nav ul.dropdown-menu.active-line-top > .current-menu-item > a,
.fixto-fixed ul.dropdown-menu.active-line-top > .current_page_item > a,
.fixto-fixed ul.dropdown-menu.active-line-top > .current-menu-item > a {
    border-top: 3px solid #c2410c !important;
}

.coloured-nav ul.dropdown-menu.active-line-top > li:not(.current-menu-item):not(.current_page_item):hover > a,
.coloured-nav ul.dropdown-menu.active-line-top > li:not(.current-menu-item):not(.current_page_item).hover > a,
.fixto-fixed ul.dropdown-menu.active-line-top > li:not(.current-menu-item):not(.current_page_item):hover > a,
.fixto-fixed ul.dropdown-menu.active-line-top > li:not(.current-menu-item):not(.current_page_item).hover > a {
    color: #c2410c !important;
}

.coloured-nav ul.dropdown-menu.active-round-button > .current_page_item > a,
.coloured-nav ul.dropdown-menu.active-round-button > .current-menu-item > a,
.fixto-fixed ul.dropdown-menu.active-round-button > .current_page_item > a,
.fixto-fixed ul.dropdown-menu.active-round-button > .current-menu-item > a {
    background-color: #c2410c !important;
    color: #ffffff !important;
}

.coloured-nav ul.dropdown-menu.active-round-button > li:not(.current-menu-item):not(.current_page_item):hover > a,
.coloured-nav ul.dropdown-menu.active-round-button > li:not(.current-menu-item):not(.current_page_item).hover > a,
.fixto-fixed ul.dropdown-menu.active-round-button > li:not(.current-menu-item):not(.current_page_item):hover > a,
.fixto-fixed ul.dropdown-menu.active-round-button > li:not(.current-menu-item):not(.current_page_item).hover > a {
    border-radius: 10000px;
    border: 2px solid #c2410c !important;
    color: #c2410c !important;
}

.coloured-nav ul.dropdown-menu.active-arrow-down > .current_page_item:after,
.coloured-nav ul.dropdown-menu.active-arrow-down > .current-menu-item:after,
.fixto-fixed ul.dropdown-menu.active-arrow-down > .current_page_item:after,
.fixto-fixed ul.dropdown-menu.active-arrow-down > .current-menu-item:after {
    border-color: transparent transparent #c2410c transparent !important;
}

.coloured-nav ul.dropdown-menu.active-round-border-button > .current_page_item > a,
.coloured-nav ul.dropdown-menu.active-round-border-button > .current-menu-item > a,
.fixto-fixed ul.dropdown-menu.active-round-border-button > .current_page_item > a,
.fixto-fixed ul.dropdown-menu.active-round-border-button > .current-menu-item > a {
    border: 2px solid #c2410c !important;
    color: #c2410c !important;
}

.coloured-nav ul.dropdown-menu.active-round-border-button > li:not(.current-menu-item):not(.current_page_item):hover > a,
.coloured-nav ul.dropdown-menu.active-round-border-button > li:not(.current-menu-item):not(.current_page_item).hover > a,
.fixto-fixed ul.dropdown-menu.active-round-border-button > li:not(.current-menu-item):not(.current_page_item):hover > a,
.fixto-fixed ul.dropdown-menu.active-round-border-button > li:not(.current-menu-item):not(.current_page_item).hover > a {
    border: 2px solid #c2410c !important;
    color: #c2410c !important;
}

.coloured-nav ul.dropdown-menu.active-line-top-bottom > .current_page_item > a,
.coloured-nav ul.dropdown-menu.active-line-top-bottom > .current-menu-item > a,
.fixto-fixed ul.dropdown-menu.active-line-top-bottom > .current_page_item > a,
.fixto-fixed ul.dropdown-menu.active-line-top-bottom > .current-menu-item > a {
    border-top: 1px solid #c2410c !important;
    border-bottom: 1px solid #c2410c !important;
    color: #c2410c !important;
}

.coloured-nav ul.dropdown-menu.active-line-top-bottom > li:not(.current-menu-item):not(.current_page_item):hover > a,
.coloured-nav ul.dropdown-menu.active-line-top-bottom > li:not(.current-menu-item):not(.current_page_item).hover > a,
.fixto-fixed ul.dropdown-menu.active-line-top-bottom > li:not(.current-menu-item):not(.current_page_item):hover > a,
.fixto-fixed ul.dropdown-menu.active-line-top-bottom > li:not(.current-menu-item):not(.current_page_item).hover > a {
    color: #c2410c !important;
}

ul.dropdown-menu.active-line-top>.current-menu-item>a {
    border-top: 3px solid #c2410c !important;
}

ul.dropdown-menu.active-round-button>.current-menu-item>a {
    background-color: #c2410c !important;
}

ul.dropdown-menu.active-arrow-down>.current-menu-item:after {
    border-color: transparent transparent #c2410c transparent !important;
}

ul.dropdown-menu.active-round-border-button>.current-menu-item>a {
    border: 2px solid #c2410c !important;
    color: #c2410c !important;
}

ul.dropdown-menu.active-line-top-bottom>.current-menu-item>a {
    border-top: 1px solid #c2410c !important;
    border-bottom: 1px solid #c2410c !important;
    color: #c2410c !important;
}

/* Menú fixed (scroll) */
.fixto-fixed ul.dropdown-menu.default>.current-menu-item>a {
    border-bottom: 3px solid #c2410c !important;
}

.fixto-fixed ul.dropdown-menu.default>li:not(.current-menu-item):not(.button)>a:hover {
    color: #c2410c !important;
}

.fixto-fixed ul.dropdown-menu.active-line-top>.current-menu-item>a {
    border-top: 3px solid #c2410c !important;
}

.fixto-fixed ul.dropdown-menu.active-line-top>li:not(.current-menu-item):not(.button)>a:hover {
    color: #c2410c !important;
}

.fixto-fixed ul.dropdown-menu.active-round-button>.current-menu-item>a {
    background-color: #c2410c !important;
}

.fixto-fixed ul.dropdown-menu.active-round-button>li:not(.current-menu-item)>a {
    border: 2px solid #c2410c !important;
    color: #c2410c !important;
}

.fixto-fixed ul.dropdown-menu.active-arrow-down>.current-menu-item:after {
    border-color: transparent transparent #c2410c transparent !important;
}

.fixto-fixed ul.dropdown-menu.active-round-border-button>.current-menu-item>a {
    border: 2px solid #c2410c !important;
    color: #c2410c !important;
}

.fixto-fixed ul.dropdown-menu.active-round-border-button>li:not(.current-menu-item)>a {
    border: 2px solid #c2410c !important;
    color: #c2410c !important;
}

.fixto-fixed ul.dropdown-menu.active-line-top-bottom>.current-menu-item>a {
    border-top: 1px solid #c2410c !important;
    border-bottom: 1px solid #c2410c !important;
    color: #c2410c !important;
}

.fixto-fixed ul.dropdown-menu.active-line-top-bottom>li:not(.current-menu-item)>a:hover {
    color: #c2410c !important;
}

/* Read more, tags, navegación, comentarios */
.read-more {
    color: #c2410c !important;
}

.read-more:hover {
    color: #9a3412 !important;
}

.read-more.color1 {
    color: #c2410c !important;
}

.read-more.color1:hover {
    color: #9a3412 !important;
}

.tags-list a:hover {
    background-color: #c2410c !important;
    border-color: #c2410c !important;
}

.nav-links .next-navigation a,
.nav-links .prev-navigation a,
.post-comments .navigation .next-navigation a,
.post-comments .navigation .prev-navigation a {
    border: solid 2px #c2410c !important;
    color: #c2410c !important;
}

.nav-links .next-navigation a:hover,
.nav-links .prev-navigation a:hover,
.post-comments .navigation .next-navigation a:hover,
.post-comments .navigation .prev-navigation a:hover {
    background-color: #9a3412 !important;
}

.nav-links .numbers-navigation span.current,
.post-comments .navigation .numbers-navigation span.current {
    background-color: #c2410c !important;
}

/* Hover de los enlaces de número de página (parent: #03a9f4) */
.nav-links .numbers-navigation a:hover,
.post-comments .navigation .numbers-navigation a:hover {
    background-color: #c2410c !important;
    color: #fff !important;
}

/* Botón "Publicar el comentario" (clase .blue del parent, sin regla propia) */
.button.blue,
input.button.blue {
    background-color: #c2410c !important;
    border-color: #c2410c !important;
}

.button.blue:hover,
input.button.blue:hover {
    background-color: #9a3412 !important;
    border-color: #9a3412 !important;
}

.comment-list li.comment.byuser {
    border: 1px solid #c2410c !important;
    background-color: #ffffff !important;
}

/* Caja de respuesta del autor: fondo blanco para destacarla del fondo crema del main */
.comment-list li.comment.byuser .comment-body {
    background-color: #ffffff !important;
}

.comment-reply-link {
    color: #c2410c !important;
}

.comment-reply-link:hover {
    color: #9a3412 !important;
}

/* Sidebar widgets */
.sidebar .widget>ul>li a:hover {
    color: #9a3412 !important;
}

/* Footer */
.footer a {
    color: #c2410c !important;
}

.footer a:hover {
    color: #9a3412 !important;
}

.footer a:hover .fa {
    color: #9a3412 !important;
}

.footer form input[type="submit"] {
    background-color: #c2410c !important;
    outline: 1px solid #c2410c !important;
}

.footer-contact-boxes a {
    color: #c2410c !important;
}

.footer-contact-boxes a:hover {
    color: #c2410c !important;
}

/* Separadores SVG e iconos genéricos */
svg.section-separator-bottom path {
    background-color: #c2410c !important;
}

svg.section-separator-bottom path.svg-white-bg {
    fill: #c2410c !important;
}

i.fa.icon.bordered,
i.fa.icon.card[class*="bottom-border-"] {
    border: 2px solid #c2410c !important;
}

i.fa.icon.reverse {
    background-color: #c2410c !important;
}

/* WordPress core: botón de búsqueda y wp-element-button */
.wp-block-search__button,
.widget_search .search-form .search-submit,
.widget_search .searchsubmit,
.wp-element-button {
    background-color: #c2410c !important;
    border-color: #c2410c !important;
    color: #fff !important;
}

.wp-block-search__button:hover,
.widget_search .search-form .search-submit:hover,
.widget_search .searchsubmit:hover,
.wp-element-button:hover {
    background-color: #9a3412 !important;
    border-color: #9a3412 !important;
}

/* ============================================================
   Accesibilidad: label del bloque de búsqueda
   El parent oculta el label con display:none (style.css ~7499),
   lo que invalida la auditoría axe "Form elements must have
   labels" (hidden-explicit-label). Se sustituye por ocultación
   screen-reader-only: el label sigue en el árbol de accesibilidad
   y lo leen los lectores de pantalla, sin mostrarse visualmente.
   ============================================================ */
div#block-2 label.wp-block-search__label {
    display: block;
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    white-space: nowrap;
}


/* ============================================================
Bloque: padding del hero interior (.inner-header-description)
Añadido 2026-08-20 por petición de Chechu.
============================================================ */
.auto-toc .auto-toc-list li {
    margin: 6px 0;
    font-size: 1em;
}

.auto-toc .auto-toc-title {
    font-size: 1.4em;
}

/* ============================================================
   13. Página Acerca de: lista y tarjetas del equipo.
       El contenido hereda text-align:center del tema en móvil, lo
       que centra el texto de cada li alrededor de su viñeta y deja
       una composición extraña. La lista debe conservar la sangría
       estándar y alinearse a la izquierda.
       El grid usa columnas EXPLÍCITAS (3 desktop / 1 móvil) para
       que las tarjetas ocupen todo el ancho de su celda sin huecos
       ni desplazamientos. Todo el estilo del shortcode [ep_team]
       vive aquí (sin estilos inline en el HTML).
   ============================================================ */
body.page-id-408 #post-408 > div > div {
    width: 100% !important;
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
}

body.page-id-408 .post-408 ul {
    width: 100%;
    box-sizing: border-box;
    margin-left: 0;
    margin-right: 0;
    padding-left: 1.5rem;
    text-align: left !important;
    list-style-position: outside;
}

/* --- Grid del equipo editorial --- */
.ep-team-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin: 0 0 3.5rem;
    width: 100%;
    box-sizing: border-box;
}

.ep-team-grid .ep-author {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
}

.ep-team-grid .ep-author-avatar {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto 16px auto;
    border: 3px solid #ffedd5;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    display: block;
}

.ep-team-grid .ep-author-name {
    margin: 0 0 6px 0;
    font-size: 1.25rem;
    color: #111827;
    font-weight: 700;
}

.ep-team-grid .ep-author-role {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #c2410c;
    margin-bottom: 14px;
}

.ep-team-grid .ep-author-bio {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #4b5563;
    margin: 0 0 20px 0;
    flex-grow: 1;
}

.ep-team-grid .ep-author-link {
    font-size: 0.9rem;
    font-weight: 600;
    color: #c2410c;
    text-decoration: none;
    border-bottom: 1px solid #c2410c;
    padding-bottom: 2px;
}

.ep-team-grid .ep-author-link:hover {
    color: #9a3412;
}

/* Fix clearfix global de Mesmerize: los pseudo-elementos ::before/::after
   (display: table del parent) se convierten en tracks del grid y rompen
   la fila de 3 tarjetas. Regla aplicada 2026-08-21 y perdida por un commit
   posterior de style.css — re-añadida 2026-08-25. */
.ep-team-grid::before,
.ep-team-grid::after {
    display: none;
    content: none;
}

@media (max-width: 767px) {

    body.page-id-408 .post-408 ul {
        display: block;
        text-align: left !important;
    }

    .ep-team-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   14. Imágenes de figura dentro de posts (p.ej. mapa de eclipses)
       Margen superior de la figura y esquinas redondeadas en la
       imagen. Petición de Chechu 2026-08-22.
   ============================================================ */
.post-content-single figure {
    margin-top: 1rem;
}

.post-content-single figure img {
    border-radius: 6px;
}

/* ============================================================
   15. Tamaño de los H2 (títulos de sección) en todo el sitio.
       Petición de Chechu 2026-08-25.
   ============================================================ */
h2,
.h2 {
    font-size: 2rem;
    line-height: 1.1;
}

/* ============================================================
   16. Hero interior: fondo siempre a cubrir y centrado.
       Petición de Chechu 2026-08-28.
   ============================================================ */
.header.color-overlay {
    background-size: cover !important;
    background-position: center !important;
}