/*
 * luismonroy.mx: retoques VISIBLES de accesibilidad y defectos (D21).
 * Hoja propia y aditiva: no toca el CSS del tema ni el de los plugins. La enlaza
 * una sola línea de src/layouts/WordPress.astro, después de final.html, para que
 * gane por orden sin !important (salvo donde el tema usa estilos en línea).
 * Pendiente del visto bueno del cliente (P-12): cada bloque indica su fila de la
 * revisión 2026-09 y se puede quitar por separado.
 */

/* A-11: tablet de 768 a 959 px. El personalizador de Total solo limita el logo
   en >=960 px (190 px) y <=767 px (100 px); en medio la cabecera fija medía
   347-355 px. Mismo tope que en desktop: cabecera de 97 px. */
@media only screen and (min-width: 768px) and (max-width: 959px) {
  #site-logo .logo-img { max-width: 190px; }
}

/* A-11 (A-luismonroy-09): área táctil invisible de 44x44 px en el botón del
   menú móvil (el icono mide 22x17 px). No se pinta. */
a.mobile-menu-toggle { position: relative; }
a.mobile-menu-toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}

/* A-18 (A-luismonroy-03): título «Contacto» del pie oscuro de la portada, de
   #7e1b38 sobre #222 (1,59:1) a blanco como el resto del pie (15,9:1). */
.elementor-53 .elementor-element.elementor-element-5e1aa82c .elementor-heading-title { color: #ffffff; }

/* A-18 (A-luismonroy-04): botones «Leer más» de /blog/, del naranja #ef5c32
   (3,36:1) a un tono más oscuro de la misma familia (4,88:1; hover 6,47:1). */
.wpex-card-more-link .theme-button { --wpex-btn-bg: #c9431c; --wpex-hover-btn-bg: #a8381a; }

/* A-18 (A-luismonroy-05): migas de pan de las entradas (2,5:1 y 4,3:1) y botón
   «Facebook» de Share This (4,23:1). #166fe5 es el azul de hover de Facebook. */
.site-breadcrumbs { color: #707070; }
.site-breadcrumbs a { color: #595959; }
.wpex-social-share__link--facebook { background-color: #166fe5; }

/* A-18 (A-luismonroy-V3): iconos de «Mis redes sociales», de #969696 sobre
   #f4f4f4 (2,69:1) a #6e6e6e (4,64:1). */
.elementor-53 .elementor-element.elementor-element-44e7804c .elementor-social-icon i { color: #6e6e6e; }
.elementor-53 .elementor-element.elementor-element-44e7804c .elementor-social-icon svg { fill: #6e6e6e; }

/* A-10: botón «Escribir por WhatsApp» del bloque .static-contact: texto #222
   sobre el mismo verde (8,02:1), decisión de Luis del 2026-09-26. El color va
   en línea en ContactoEstatico.astro, por eso !important. */
.static-contact a[href^="https://wa.me/"] { color: #222 !important; }

/* A-23 (A-luismonroy-07): flechas del hero. Fondo más oscuro (3,31:1 contra el
   fondo blanco) y ocultas por debajo de 1024 px, donde tapaban logo y cara. El
   prefijo html gana al <style> de Slider Revolution del final del <body>. */
html #rev_slider_1_1_wrapper .zeus.tparrows { background: rgba(0, 0, 0, .45); }
@media (max-width: 1023px) {
  html #rev_slider_1_1_wrapper .zeus.tparrows { display: none; }
}

/* A-23 (A-luismonroy-08): flechas del carrusel de artículos a 12 px del borde
   superior (tapaban la etiqueta y el título) y foco visible en sus enlaces. */
.psacp-post-carousel-wrap .owl-nav { top: 12px !important; margin-top: 0; -webkit-transform: none; transform: none; }
.psacp-post-carousel-wrap a:focus-visible,
.psacp-post-carousel-wrap button:focus-visible { outline: 3px solid #fff !important; outline-offset: 3px; }
.psacp-post-carousel-wrap .psacp-post-linkoverlay:focus-visible { outline-offset: -6px; }

/* A-24 (A-luismonroy-V2): galería de la portada con teclado. El plugin oculta
   los botones con visibility:hidden hasta el hover, y así no reciben el foco.
   Solo en dispositivos con hover: en táctil el primer toque sigue mostrando la
   leyenda. En reposo nada cambia (opacity 0); con el foco se ve como en hover. */
@media (hover: hover) {
  .eael-filter-gallery-container .gallery-item-caption-wrap.caption-style-hoverer { visibility: visible; }
  .eael-filter-gallery-container .eael-gallery-grid-item:focus-within .gallery-item-caption-wrap.caption-style-hoverer { opacity: 1; visibility: visible; }
  .eael-filter-gallery-container .eael-gallery-grid-item:focus-within .gallery-item-caption-wrap.caption-style-hoverer.eael-slide-up :is(h5, p, .gallery-item-buttons) { transform: none; }
  .eael-filter-gallery-container .gallery-item-buttons a:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
}

/* ===== Propuestas del informe del 2026-10-08 (pendientes del visto bueno del
   dueño, P-12). Cada bloque se puede quitar por separado. ===== */

/* DA-12: títulos del carrusel de artículos sobre foto clara (peor 1,90:1 en
   desktop). Degradado del plugin más oscuro bajo el texto: va de transparente
   arriba a rgba(0,0,0,.55) a los 45 px (a la altura de la etiqueta roja) y a .8
   abajo. Bajo el título queda al menos .55, que deja el blanco por encima de
   4,5:1 incluso sobre un fondo blanco. */
.psacp-post-carousel-wrap.psacp-design-1 .psacp-post-overlay { background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, .55) 45px, rgba(0, 0, 0, .8) 100%); }

/* DA-11: «Principios y valores» en la caja de 1140 px del resto de la portada
   (el texto medía 1318 px a 1366 px de ancho, unos 177 caracteres por línea).
   El fondo de la sección sigue a todo el ancho. */
.elementor-53 .elementor-element.elementor-element-7775c95a > .elementor-container { max-width: 1140px; }

/* DA-09: «Cargar más» de la galería con la medida de «Semblanza» y «Ver todos»
   (43 px de alto, padding 14px 50px, Roboto 15 px 500), en vez de 30 px con el
   texto desplazado hacia arriba y Arial. */
.elementor-53 .elementor-element.elementor-element-dff6c34 .eael-gallery-load-more { padding: 14px 50px; font-family: Roboto, sans-serif; font-weight: 500; line-height: 15px; }
.elementor-53 .elementor-element.elementor-element-dff6c34 .eael-gallery-load-more .eael-filterable-gallery-load-more-text { line-height: 15px; }

/* M-08: las URL largas del cuerpo de las entradas (fuentes e informes) se
   cortaban en móvil; ahora parten la línea donde haga falta. break-word solo
   corta una palabra que no cabe en la línea. */
.single-blog-content { overflow-wrap: break-word; }