.page-section.pt-small {
    padding-top: 3rem; /* o cualquier valor menor */
}

.push-popup {
    display: none;
    position: fixed;
    bottom: 2rem;
    left: 1rem;
    right: 1rem;
    background-color: #ffffff;
    padding: 1rem;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    z-index: 9999;
}

.certificates-custom-width {
    width: 80% !important;
}





/* ===============================
   Focus accesible unificado
   =============================== */

/* 1) Reset: quitar foco cuando NO es visible (click/ratón) */
:where(a, button, input, select, textarea, summary, [role="button"], [role="menuitem"], [tabindex]):focus:not(:focus-visible) {
    outline: none !important;
    box-shadow: none !important;
}

/* 2) Estilo general de foco SOLO con teclado/NVDA */
:where(a, button, input, select, textarea, summary, [role="button"], [role="menuitem"], [tabindex]):focus-visible {
    outline: 3px dotted var(--color-focus) !important;
    outline-offset: 3px !important;
}

/* 3) Refuerzo para componentes que suelen pisar el foco (Bootstrap/tema) */
:is(
  a.btn,
  .btn,
  .nav a,
  .nav-link,
  .navbar a,
  .dropdown-item,
  .menu a,
  .desktop-nav a,
  .mobile-nav a,
  .mobile-nav button
):focus-visible {
    outline: 3px dotted var(--color-focus) !important;
    outline-offset: -1px !important;
}
.main-nav .mn-has-sub:focus-visible,
.main-nav .mn-has-sub.focus-visible {
    outline: 3px dotted var(--color-focus) !important;
    outline-offset: -3px !important;
}
/* 4) Menú principal: normalizar por si el tema añade offsets raros */
.desktop-nav a:focus-visible,
.navbar .nav-link:focus-visible {
    outline-offset: -3px !important;
}

/* 5) Fallback para contenedores con overflow:hidden (el outline puede recortarse)
      Añada la clase .focus-ring-shadow al elemento que necesite este modo */
.focus-ring-shadow:focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 3px var(--color-focus) !important;
}

/* 6) Ajuste que ya tenías para el menú móvil (si lo necesitas) */
.mobile-on .desktop-nav ul li button:focus-visible {
    outline-offset: -6px !important; /* puedes subirlo a 0–3 si quieres uniformidad */
}

/* Medios responsivos (independiente del foco) */
img:not([draggable]),
embed,
object,
video {
    max-width: 100%;
    height: auto;
}

a.mfp-image {
    display: inline-block;
}

/* Quitar foco cuando NO es visible (click) */
a.mfp-image:focus:not(:focus-visible),
a.mfp-image:focus:not(.focus-visible) {
    outline: none !important;
    box-shadow: none !important;
}

/* Foco visible SOLO con teclado/NVDA sobre el propio <a> */
a.mfp-image:focus-visible,
a.mfp-image.focus-visible {
    outline: 3px dotted var(--color-focus) !important;
    outline-offset: 3px !important;
}

/* Botón “volver arriba” accesible */
.link-to-top {
    display: inline-flex;            /* caja visible */
    align-items: center;
    justify-content: center;
    width: 44px;                     /* tamaño táctil recomendado */
    height: 44px;
    border-radius: 999px;            /* opcional: pill/círculo */
    z-index: 1000;                   /* por si se queda detrás */
}

/* Quitar foco cuando NO es visible (click) */
.link-to-top:focus:not(:focus-visible),
.link-to-top:focus:not(.focus-visible) {
    outline: none !important;
    box-shadow: none !important;
}

/* Foco SOLO teclado/NVDA: contorno + fallback por si hay overflow:hidden */
.link-to-top:focus-visible,
.link-to-top.focus-visible {
    outline: 3px dotted var(--color-focus) !important;
    outline-offset: 3px !important;
    box-shadow: 0 0 0 3px var(--color-focus); /* anillo interno si el outline se recorta */
}

/* Si el padre tiene overflow:hidden, añade también esto al padre o a un wrapper */
.link-to-top-wrapper,
.main-nav,
.container { overflow: visible; } /* aplica solo donde proceda */

a:focus-visible,
a.focus-visible {
    outline: 3px dotted var(--color-focus) !important;
    outline-offset: 3px !important;
}

.main-nav .mn-sub#submenu-idiomas {
    width: auto;       /* o el valor que quieras */
    text-align: right; /* ejemplo */
}

/* Aplica esta clase al contenedor donde imprimes Bard, p.ej. <div class="bard-content"> */
.bard-content img {
    display: block;
    max-width: 100%;
    height: auto;
    float: none;          /* por si algún estilo externo mete flotados */
    clear: both;
    margin: 1rem auto;    /* centrado opcional */
    border-radius: 0.5rem;
}

/* Si Bard genera <figure> o <figcaption> (según el tema), estilízalos también */
.bard-content figure { margin: 1.25rem 0; }
.bard-content figcaption { font-size: .875rem; opacity: .8; text-align: center; }