/* Arreglos propios sobre el CSS heredado.
   Va el último de todo, para poder corregir sin tocar sus hojas originales. */

/* --- Tablas (TablePress) ---------------------------------------------------
   Estas tablas llevan muchas columnas y NECESITAN scroll horizontal: es su
   forma de consultarse. Lo que no debe pasar es que arrastren a toda la página.
   El scroll lo pone un contenedor que envuelve la tabla; la tabla se queda
   como display:table. Ponérselo a la tabla misma desalineaba las cabeceras
   respecto a las celdas.                                                    */
.deretiro-tabla-scroll {
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  /* que se vea que sigue: sombra en el borde por el que continúa la tabla */
  background:
    linear-gradient(to right, #fff 30%, rgba(255, 255, 255, 0)),
    linear-gradient(to left, #fff 30%, rgba(255, 255, 255, 0)) 100% 0,
    linear-gradient(to right, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0)),
    linear-gradient(to left, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0)) 100% 0;
  background-repeat: no-repeat;
  background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
  background-attachment: local, local, scroll, scroll;
}
.deretiro-tabla-scroll table {
  margin-left: 0;
  margin-right: 0;
}
.deretiro-tabla-scroll .tablepress {
  margin-bottom: 0;
}

/* --- Menú de escritorio: al pasar el ratón, sólo la raya de debajo -----------
   El tema ponía el texto en negrita al pasar por encima: el texto se ensanchaba
   y empujaba a los de al lado. Se queda la raya azul de Elementor y ya.       */
.elementor-nav-menu--main .elementor-item:hover,
.elementor-nav-menu--main .elementor-item:focus,
.elementor-nav-menu--main .elementor-item.highlighted,
.elementor-nav-menu--main .elementor-item.elementor-item-active {
  font-weight: 400 !important;
}

/* --- Menú en móvil: pantalla entera ---------------------------------------
   El desplegable de Elementor (una columna estrecha flotando sobre el hero) ya
   no se enseña: el botón de hamburguesa abre .dr-menu, que pinta
   src/components/MenuMovil.tsx con las mismas entradas. Se deja el desplegable
   en el HTML porque de ahí se leen las entradas, pero no se ve nunca.       */
@media (max-width: 1024px) {
  [data-elementor-type="header"] .elementor-nav-menu--dropdown.elementor-nav-menu__container {
    display: none !important;
  }
}

/* con el menú abierto la web de debajo no se mueve */
body.menu-abierto {
  overflow: hidden;
}

.dr-menu {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  background: #C9DEE4;
  color: #471F13;
  padding: 0 20px calc(18px + env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  overscroll-behavior: contain;
  animation: dr-menu-entra 0.22s ease-out;
}
.dr-menu.saliendo {
  animation: dr-menu-sale 0.18s ease-in forwards;
  pointer-events: none;
}
@keyframes dr-menu-entra {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: none; }
}
@keyframes dr-menu-sale {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: translateY(-10px); }
}
.dr-menu__cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 78px;
  padding-top: env(safe-area-inset-top, 0px);
}
.dr-menu__logo img {
  display: block;
  width: 150px;
  height: auto;
}
.dr-menu__cerrar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: #79ACB2;
  color: #fff;
  cursor: pointer;
  padding: 0;
  transition: background 0.2s ease, transform 0.15s ease;
}
.dr-menu__cerrar:hover,
.dr-menu__cerrar:focus-visible {
  background: #5f9198;
  outline: none;
}
.dr-menu__cerrar:active {
  transform: scale(0.92);
}
.dr-menu__lista {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
}
.dr-menu__lista li {
  border-top: 1px solid rgba(71, 31, 19, 0.14);
  animation: dr-menu-item 0.35s ease-out both;
}
.dr-menu__lista li:last-child {
  border-bottom: 1px solid rgba(71, 31, 19, 0.14);
}
@keyframes dr-menu-item {
  from { opacity: 0; transform: translateX(-8px); }
  to { opacity: 1; transform: none; }
}
/* la especificidad extra gana al «a» del kit de Elementor, que va sobre body */
.dr-menu .dr-menu__lista a {
  display: block;
  padding: 15px 4px;
  font: 400 15px/1.25 Roboto, sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  /* !important: el tema pinta todos los enlaces del azul con una regla que gana */
  color: #471F13 !important;
  text-decoration: none;
  transition: color 0.15s ease;
}
.dr-menu .dr-menu__lista a:hover,
.dr-menu .dr-menu__lista a:focus-visible,
.dr-menu .dr-menu__lista a[aria-current="page"] {
  color: #5f9198 !important;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: #79ACB2;
  text-underline-offset: 6px;
  outline: none;
}
.dr-menu__pie {
  margin-top: auto;
  padding-top: 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.dr-menu__buscar {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  align-self: flex-start;
  padding: 11px 18px 11px 14px;
  border-radius: 999px;
  background: #fff;
  color: #471F13;
  font: 400 14px/1 Roboto, sans-serif;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(71, 31, 19, 0.08);
}
.dr-menu__buscar svg {
  color: #79ACB2;
}
.dr-menu__extras {
  display: flex;
  align-items: center;
  gap: 14px;
}
.dr-menu__bandera img {
  display: block;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
}
.dr-menu__colabora {
  margin-left: auto;
}
.dr-menu__colabora img {
  display: block;
  height: 32px;
  width: auto;
}
@media (prefers-reduced-motion: reduce) {
  .dr-menu, .dr-menu.saliendo, .dr-menu__lista li { animation: none; }
}
@media (min-width: 1025px) {
  .dr-menu { display: none; }
}

/* --- Salvaguarda general --------------------------------------------------
   Nada debe empujar la página a lo ancho: si algo se pasa, que haga scroll
   dentro de su caja y no arrastre a toda la web. El overflow va SOLO en body:
   así se propaga a la ventana. Si html también lo lleva, body pasa a ser el
   contenedor de scroll de todo y position: sticky (barra de filtros, cabecera
   de la tabla) deja de pegarse.                                              */
html,
body {
  max-width: 100%;
}
body {
  overflow-x: hidden;
}

/* El mapa no debe quedar por encima de la cabecera ni del banner de cookies */
.leaflet-pane,
.leaflet-control,
.leaflet-top,
.leaflet-bottom {
  z-index: 1 !important;
}

/* --- Menú principal en una fila -------------------------------------------
   El menú son 8 entradas de texto más las banderas de las webs hermanas, la
   lupa y COLABORA. Cada web nueva añade una bandera, así que el tope del cuerpo
   de letra y del padding se han bajado para que quepan.
   A su tamaño original piden 1.570px de ancho, así que en su web el menú
   siempre parte en dos filas. Aquí se intenta que quepa todo en una:

   1. La columna del logo se llevaba el 30% del ancho (403px a 1440) para una
      imagen de 140px. Se le deja el ancho que de verdad ocupa y ese hueco pasa
      al menú. Como el menú va pegado a la derecha, en pantalla ancha no se
      mueve nada de sitio respecto al original.
   2. El cuerpo de letra y el padding se estrechan con la ventana: del original
      (15px / 20px) hasta un mínimo legible (11,5px / 4px).

   Por debajo de 1400px ya no cabe ni apurando. Subió de 1280 a 1400 al
   escribir el idioma entero («Nederlands» en vez de «NL») al lado de las
   banderas de las webs hermanas: son unos 100px más. Entonces se parte por donde
   nos interesa, con el separador .deretiro-salto que inserta lib/html.ts:
   EUROPA y SUMMER bajan a la fila de los iconos y COLABORA, en vez de dejar a
   COLABORA descolgada en una tercera fila.                                  */
body [data-elementor-type="header"] li.deretiro-salto {
  display: none;
}

/* «DE RETIRO» (volver a la portada), la primera entrada del menú: en la
   portada sobra. La marca .deretiro-en-portada la pone WpPage al construir;
   body.en-portada la pone MenuActivo por si el navegador no entiende :has(). */
body.en-portada ul#menu-2-34639417 li.deretiro-inicio,
body:has(.deretiro-en-portada) ul#menu-2-34639417 li.deretiro-inicio {
  display: none !important;
}
/* en el menú de escritorio (#menu-1) la entrada se pliega con transición: ver deretiro-ui.css */

@media (min-width: 1025px) {
  /* ids del header congelado de Elementor: 277775d1 = logo, 4c116a14 = menú */
  body [data-elementor-type="header"] .elementor-column.elementor-element.elementor-element-277775d1 {
    width: auto;
    flex: 0 0 auto;
  }
  body [data-elementor-type="header"] .elementor-column.elementor-element.elementor-element-4c116a14 {
    width: auto;
    flex: 1 1 auto;
    min-width: 0;
  }
  /* El widget del menú se declaraba al 130,899% de su columna y se salía de
     ella; con la columna ya a su aire, se ajusta a lo que hay. */
  body [data-elementor-type="header"] .elementor-element.elementor-element-34639417 {
    width: 100%;
    max-width: 100%;
    --container-widget-width: 100%;
  }
  /* La regla de Elementor que fija los 15px pesa (0,4,0): hay que igualarla. */
  body [data-elementor-type="header"] .elementor-element.elementor-element-34639417 .elementor-nav-menu .elementor-item {
    font-size: clamp(11.5px, calc(4.7px + 0.44vw), 13px);
    padding-left: clamp(4px, calc(2.2vw - 25px), 14px);
    padding-right: clamp(4px, calc(2.2vw - 25px), 14px);
  }
}

@media (min-width: 1025px) and (max-width: 1399px) {
  body [data-elementor-type="header"] li.deretiro-salto {
    display: block;
    flex: 0 0 100%;
    width: 100%;
    height: 0;
    margin: 0;
    padding: 0;
  }
}

/* --- Aviso de cookies ------------------------------------------------------
   Su CSS personalizado pinta TODOS los enlaces de turquesa a la fuerza
   (`a, p a { color: #79ACB2 !important }`), así que el "Atrás" del panel de
   preferencias salía turquesa sobre turquesa: invisible. Pasa igual en su web.
   La cabecera del panel lo quiere en blanco.                                 */
#qlk-cookie-setup-modal > div > span > a,
#qlk-cookie-setup-modal > div > span > a:hover {
  color: #fff !important;
  font-weight: 500 !important;
}

/* En móvil su plugin monta el panel con la cabecera y los botones fijos y la
   caja a `top:50px; bottom:400px; height:100vh`: la caja se salía de la
   pantalla y dejaba un hueco blanco enorme, con dos barras de scroll. Se
   rehace como una columna normal: cabecera, cuerpo que rueda y botones. */
@media (max-width: 480px) {
  #qlk-cookie-setup-modal > div {
    top: 0;
    bottom: 0;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  #qlk-cookie-setup-modal > div > span {
    position: static;
    flex: 0 0 auto;
  }
  #qlk-cookie-setup-modal .cuerpo {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
  }
  #qlk-cookie-setup-modal .cookies--btns {
    position: static;
    flex: 0 0 auto;
  }
}

/* El «no hay resultados» del buscador de retiros. La rejilla de tarjetas reparte
   a sus hijos en columnas, así que un párrafo suelto salía estrujado en un
   tercio del ancho: se le dice que ocupe la fila entera. */
#deretiro-sin-resultados {
  width: 100%;
  flex: 1 1 100%;
  grid-column: 1 / -1;
  margin: 18px 0;
  text-align: center;
  color: #6b5b4d;
}

/* Dos webs del mismo país comparten bandera (Bélgica tiene una en neerlandés y
   otra en francés), así que al lado de la bandera va el idioma. Pequeño y en el
   color del menú, para que no compita con los rótulos de las secciones. */
.deretiro-idioma {
  font-size: 0.66em;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-left: 3px;
  vertical-align: middle;
}

/* ---------------------------------------------------------------------------
   Encabezados

   lib/html.ts deja cada página con un solo <h1>: promueve el encabezado de las
   fichas de parroquia (que era un h4) y baja a h2 los segundos <h1> de las seis
   páginas que traían dos. Al cambiar la etiqueta se le pone la clase del nivel
   que tenía —.h1, .h4—, que el tema Bridge define con los mismos estilos.

   Lo que el tema NO ata a esas clases son los tamaños de móvil, que cuelgan
   sólo de la etiqueta. Aquí se completan, con los mismos valores del tema, para
   que el arreglo sea de marcado y no se vea en pantalla.
   --------------------------------------------------------------------------- */
@media only screen and (max-width: 1000px) {
  h1.h4 { font-size: 30px; line-height: 35px; }
  h2.h1 { font-size: 50px; line-height: 55px; }
}
@media only screen and (max-width: 600px) {
  h2.h1 { font-size: 30px; line-height: 60px; }
}

/* El titular que lib/html.ts pone en /events/, que no traía ninguno. */
.deretiro-titulo-seccion {
  text-align: center;
  margin: 40px 0 20px;
}

/* ---------------------------------------------------------------------------
   Ficha de un retiro: el encabezado que le faltaba

   Las 1.383 fichas de /events/ no tenían <h1>: su título viajaba en un <span>
   dentro de un <a>. Ahora ese span va envuelto en un <h1> que no pinta nada
   —display:contents lo saca de la caja visual— para que el CSS de EventON, que
   cuelga de `span.evcal_event_title`, siga aplicando igual.

   Y el contenedor de la tarjeta pasó de <p> a <div> por la misma razón: un
   párrafo no puede llevar dentro un encabezado. Aquí se repone lo que EventON
   sólo declaraba para `p.desc_trig_outter`.
   --------------------------------------------------------------------------- */
h1.deretiro-titulo-ficha {
  display: contents;
}

.evo_page_body .evo_sin_page #evcal_list div.desc_trig_outter {
  border-radius: 15px;
  overflow: hidden;
  border: none;
  margin: 0;
}

/* ---------- RetStay: botón en la barra superior (delante de Instagram) y bloque en el pie ---------- */
.deretiro-retstay-item { position: relative; }
.deretiro-retstay {
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
  padding: 5px 12px 5px 9px !important;
  /* el tostado de la marca RetStay (#927E66), como el botón de Casas de retiro */
  border: 1px solid #927E66;
  border-radius: 999px;
  background: #927E66;
  color: #fff;
  text-decoration: none;
  line-height: 1;
  box-shadow: 0 2px 8px rgba(71, 31, 19, 0.18);
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.15s ease, box-shadow 0.18s ease;
}
.deretiro-retstay:hover,
.deretiro-retstay:focus-visible {
  background: #7a6853;
  border-color: #7a6853;
  box-shadow: 0 4px 14px rgba(71, 31, 19, 0.28);
  outline: none;
}
.deretiro-retstay:active { transform: scale(0.97); }
/* logo-*-boton.png: el logo en blanco y con el trazo engordado, que el original
   es fino y a este tamaño desaparecía sobre el azul */
.deretiro-retstay img { display: block; width: auto; height: 19px; }
.deretiro-retstay img.deretiro-retstay__nombre { height: 14px; }
/* la descripción breve, sólo con sitio: en el móvil el botón es el logo */
.deretiro-retstay__texto {
  margin-left: 3px;
  padding-left: 10px;
  border-left: 1px solid rgba(255, 255, 255, 0.55);
  font: 300 12px/1.2 Roboto, sans-serif;
  color: #fff;
  white-space: nowrap;
}
@media (max-width: 767px) {
  .elementor-10 .elementor-element.elementor-element-dcdcf11 .elementor-icon-list-items { display: flex; align-items: center; justify-content: flex-end; gap: 14px; }
  .elementor-10 .elementor-element.elementor-element-dcdcf11 .elementor-icon-list-item { margin: 0; }
  .deretiro-retstay__texto { display: none; }
}
/* en el escritorio, un poco de aire entre el botón e Instagram */
@media (min-width: 768px) {
  .elementor-10 .elementor-element.elementor-element-7dffae85 .elementor-icon-list-items { align-items: center; gap: 18px; }
  .elementor-10 .elementor-element.elementor-element-7dffae85 .deretiro-retstay-item { margin-right: 6px; }
}
.deretiro-retstay-pie { text-align: center; margin: 26px auto 0; max-width: 560px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.22); }
.deretiro-retstay-pie__logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.deretiro-retstay-pie__logo img { display: block; width: auto; height: 34px; }
.deretiro-retstay-pie__logo img:last-child { height: 26px; }
.deretiro-retstay-pie p { color: #fff; font: 300 14px/1.6 Roboto, sans-serif; margin: 12px 0 10px; }
.deretiro-retstay-pie__ir { display: inline-block; color: #fff !important; border: 1px solid rgba(255,255,255,.7); border-radius: 999px; padding: 7px 18px; font: 400 13px/1 Roboto, sans-serif; text-decoration: none; transition: background .2s, color .2s; }
.deretiro-retstay-pie__ir:hover { background: #fff; color: #471F13 !important; }

/* ---------- Casas de retiro: «Encuentra un alojamiento católico en RetStay», junto al título ---------- */
.page-id-5435 .title_subtitle_holder h1 { display: inline-block; vertical-align: middle; margin-right: 22px; }
.deretiro-retstay-cta {
  display: inline-flex; align-items: center; gap: 12px; vertical-align: middle;
  font: 300 16px/1.3 Roboto, sans-serif; color: #5c4b40; white-space: nowrap;
}
.deretiro-retstay-cta__boton {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px 7px 11px;
  /* el tostado de la marca RetStay (#927E66), no el azul de la casa */
  border-radius: 999px; background: #927E66; color: #fff; text-decoration: none; line-height: 1;
  box-shadow: 0 2px 8px rgba(146, 126, 102, 0.35);
  transition: background 0.18s ease, transform 0.15s ease, box-shadow 0.18s ease;
}
.deretiro-retstay-cta__boton:hover, .deretiro-retstay-cta__boton:focus-visible { background: #7a6853; box-shadow: 0 4px 14px rgba(122, 104, 83, 0.4); outline: none; }
.deretiro-retstay-cta__boton:active { transform: scale(0.97); }
.deretiro-retstay-cta__boton img { display: block; width: auto; height: 20px; }
.deretiro-retstay-cta__boton img:last-child { height: 15px; }
@media (max-width: 767px) {
  .page-id-5435 .title_subtitle_holder h1 { display: block; margin-right: 0; }
  .deretiro-retstay-cta { display: flex; flex-wrap: wrap; white-space: normal; margin-top: 10px; font-size: 15px; }
}

/* ---------- Prensa reciente (tarjetas con la imagen del artículo), en /notas-prensa/ ---------- */
.deretiro-prensa { background: #fbfaf9; padding: 60px 20px; }
.deretiro-prensa__marco { max-width: 1140px; margin: 0 auto; }
.deretiro-prensa h2 { font-family: Trirong, Georgia, serif; font-weight: 500; font-size: 30px; color: #471F13; margin: 0 0 6px; text-align: center; }
.deretiro-prensa > .deretiro-prensa__marco > p { text-align: center; color: #5c4b40; font: 300 15px/1.5 Roboto, sans-serif; margin: 0 0 28px; }
.deretiro-prensa__lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }
.deretiro-noticia { position: relative; display: flex; align-items: flex-end; min-height: 250px; border-radius: 10px; overflow: hidden; background: #897C70; color: #fff; text-decoration: none; transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s; }
.deretiro-noticia__foto { position: absolute; inset: 0; background: center / cover no-repeat; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.deretiro-noticia__velo { position: absolute; inset: 0; background: linear-gradient(to top, rgba(71,31,19,.9) 0%, rgba(71,31,19,.45) 55%, rgba(71,31,19,.05) 100%); }
.deretiro-noticia:hover, .deretiro-noticia:focus-visible { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(71,31,19,.3); }
.deretiro-noticia:hover .deretiro-noticia__foto { transform: scale(1.06); }
.deretiro-noticia__cuerpo { transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.deretiro-noticia:hover .deretiro-noticia__cuerpo { transform: translateY(-4px); }
.deretiro-noticia__cuerpo { position: relative; display: grid; gap: 5px; padding: 16px 18px; }
.deretiro-noticia__medio { font: 300 12px/1.3 Roboto, sans-serif; color: #DACEC5; }
.deretiro-noticia__titulo { font: 400 17px/1.3 Roboto, sans-serif; color: #fff; }
.deretiro-noticia__ir { font: 300 13px/1.3 Roboto, sans-serif; color: #e8e0d8; }

/* --- Barra de scroll de marca --------------------------------------------
   Fina, redondeada y del azul de la casa, en la página y en cualquier caja
   con scroll (el hilo del chat, el menú, las tablas anchas).
   OJO: desde Chrome 121, si se declaran `scrollbar-width`/`scrollbar-color`
   el navegador IGNORA los ::-webkit-scrollbar. Por eso las propiedades
   estándar van sólo para quien no entiende los pseudoelementos (Firefox).  */
::-webkit-scrollbar { width: 9px; height: 9px; background: transparent; }
::-webkit-scrollbar-track { background: transparent; box-shadow: none; border: 0; }
::-webkit-scrollbar-thumb {
  background-color: #79ACB2;
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background-color: #5f9198; }
::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
::-webkit-scrollbar-corner { background: transparent; }
@supports not selector(::-webkit-scrollbar) {
  * { scrollbar-width: thin; scrollbar-color: #79ACB2 transparent; }
}

/* --- La barra de scroll de la página: sólo la barra ------------------------
   La nativa se esconde (dejaba una franja blanca a la derecha) y la pinta
   BarraScroll.tsx encima del contenido: se ve al moverse y se atenúa sola.  */
html { scrollbar-width: none; }
html::-webkit-scrollbar { display: none; width: 0; height: 0; }
.barra-scroll {
  position: fixed;
  top: 0;
  z-index: 9990;
  border-radius: 999px;
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
  will-change: transform;
  touch-action: none;
}
.barra-scroll.visible { opacity: 0.75; pointer-events: auto; }
.barra-scroll.arrastrando, .barra-scroll:hover { opacity: 1; }

/* --- Los mapas de cada sección ------------------------------------------
   Encima de la tabla (casas de retiro, summer…) o al final (actividades):
   con el mismo ancho que el contenido de la página.                         */
.deretiro-mapa-seccion { max-width: 1100px; margin: 10px auto 26px; padding: 0 20px; }
.deretiro-mapa-seccion [id^="mapa-"] { border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,.08); }
/* la fila a la que lleva un punto del mapa se resalta un momento */
.tablepress tr:target { background: #eef5f6 !important; }
.tablepress tr:target td { box-shadow: inset 3px 0 0 #79ACB2; }

/* La lupa del menú: icono SVG (antes una imagen) que lleva al mapa de la portada */
li.deretiro-lupa > a.elementor-item { display: inline-flex !important; align-items: center; }
li.deretiro-lupa svg { display: block; }
/* «#buscar»: que al llegar desde la lupa el mapa no quede debajo de la cabecera */
#buscar { scroll-margin-top: 110px; }
/* al llegar desde la lupa (IrAlMapa.tsx), el bloque del mapa se ilumina un instante */
.deretiro-mapa-todo { border-radius: 12px; }
.deretiro-mapa-todo.deretiro-destacado { animation: deretiro-destacar 1.5s ease-out; }
@keyframes deretiro-destacar {
  0% { box-shadow: 0 0 0 0 rgba(121, 172, 178, 0); }
  25% { box-shadow: 0 0 0 10px rgba(121, 172, 178, .35); }
  100% { box-shadow: 0 0 0 18px rgba(121, 172, 178, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .deretiro-mapa-todo.deretiro-destacado { animation: none; }
}

/* ---------- Contraste (16-09-2026) ---------------------------------------
   El tema pintaba el texto corrido en gris #c1c1c1 y los títulos en beige
   #dacec5 / #d2c2b5 sobre fondo blanco: no se leía. Todo pasa a marrón:
   - texto corrido: #3a2b23
   - títulos: #471f13 (el marrón de la marca)
   - texto secundario (rótulos, pies de foto, «texto» de Elementor): #5c4b40
   Los azules (#79acb2, enlaces y letra manuscrita) y el blanco sobre fondos
   oscuros no se tocan. Los selectores repiten los del tema para ganarles por
   orden, no por !important.                                                */
:root {
  --deretiro-texto: #3a2b23;
  --deretiro-titulo: #471f13;
  --deretiro-suave: #5c4b40;
}
/* los colores globales de Elementor: «Texto» (#897C70) y el beige de los títulos
   (c9a890f, #DACEC5); el beige sólo se usaba en color de texto, así que es seguro.
   OJO: el CSS de Elementor (post-7.css y el de cada página) se carga DESPUÉS de
   esta hoja, dentro del cuerpo; por eso aquí se gana por especificidad
   (body.elementor-kit-7, body .elementor-NNN …), no por orden.               */
body.elementor-kit-7 {
  --e-global-color-text: #5c4b40;
  --e-global-color-c9a890f: #471f13;
}
body,
p,
td,
.wrapper,
.content,
body.qode-overridden-elementors-fonts .elementor-widget-heading p.elementor-heading-title,
.grid-list-style-1 .grid-list-item .grid-list-item-description,
.tablepress-table-description,
.elementor-widget-text-editor,
.elementor-widget-breadcrumbs,
.q_icon_with_title .icon_text_holder p,
.q_icon_with_title .icon_text_inner p,
.elementor-image-box-description,
.elementor-slide-heading,
.elementor-slide-description,
.text-legal-page,
.text-legal-page p,
#breadcrumbs a,
.filter_holder ul li span {
  color: var(--deretiro-texto);
}
/* el texto secundario que venía en #897C70 */
.elementor-field-label,
.wp-caption-text,
figcaption,
.global-filters select,
.global-filters input,
.elementor-button-text,
.deretiro-cuenta {
  color: var(--deretiro-suave);
}
/* títulos: los del tema (Trirong beige) y los de Elementor */
h1, .h1, .title h1, h2, .h2, h2 a, h3, .h3, h3 a, h4, .h4, h4 a, h5, .h5, h5 a,
body.qode-overridden-elementors-fonts .elementor-widget-heading h1.elementor-heading-title,
body.qode-overridden-elementors-fonts .elementor-widget-heading h2.elementor-heading-title,
body.qode-overridden-elementors-fonts .elementor-widget-heading h3.elementor-heading-title,
body.qode-overridden-elementors-fonts .elementor-widget-heading h4.elementor-heading-title,
body.qode-overridden-elementors-fonts .elementor-widget-heading h5.elementor-heading-title,
.q_icon_with_title .icon_text_holder h5.icon_title,
.grid-list-style-1 .grid-list-item .grid-list-item-title,
.more_facts_button,
.title-parroquia {
  color: var(--deretiro-titulo);
}
/* lo que Elementor traía con el color escrito a mano en el CSS de cada página
   (sobre-nosotros, portada, contacto, legales) */
body .elementor-302 .elementor-element.elementor-element-2d3d651 .elementor-heading-title,
body .elementor-302 .elementor-element.elementor-element-5367039 .elementor-heading-title,
body .elementor-302 .elementor-element.elementor-element-217452a .elementor-heading-title,
body .elementor-8 .elementor-element.elementor-element-b13e97c .elementor-heading-title {
  color: var(--deretiro-titulo);
}
body .text-legal-page p,
body .elementor-1884 .elementor-element.elementor-element-4d1913e,
body .elementor-1890 .elementor-element.elementor-element-4d1913e,
body .elementor-1903 .elementor-element.elementor-element-4d1913e,
body .elementor-301 .elementor-element.elementor-element-fe278b4,
body .elementor-8 .elementor-element.elementor-element-dfe4d04,
body .elementor-301 .elementor-element.elementor-element-380c959 .elementor-field-group .elementor-field,
body .elementor-8 .elementor-element.elementor-element-2c482d3 .elementor-field-group .elementor-field {
  color: var(--deretiro-texto);
}
body .elementor-301 .elementor-element.elementor-element-380c959 .elementor-field-group > label,
body .elementor-301 .elementor-element.elementor-element-380c959 .elementor-field-type-html,
body .elementor-301 .elementor-element.elementor-element-380c959 .elementor-button[type="submit"],
body .elementor-8 .elementor-element.elementor-element-2c482d3 .elementor-field-group > label,
body .elementor-8 .elementor-element.elementor-element-2c482d3 .elementor-field-type-html,
body .elementor-8 .elementor-element.elementor-element-2c482d3 .elementor-button[type="submit"] {
  color: var(--deretiro-suave);
}
body .text-legal-page a:hover { color: #5f9198; }
/* el enlace de las tarjetas de parroquia sigue azul: es enlace */
.grid-list-style-1 .grid-list-item .grid-list-item-title a { color: #79ACB2; }

/* ---------- La franja del título de página (Casas de Retiro, Artículos de Dios, Buscador) ----------
   El tema la dejaba en 17px y beige: ni se veía. Ahora es un título.      */
.title_outer .title h1,
.title_outer .title.title_size_small h1 {
  font-family: Trirong, Georgia, serif;
  font-size: 40px;
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--deretiro-titulo);
}
.title_outer .separator.small { background-color: #79ACB2; }
@media (max-width: 767px) {
  .title_outer .title h1,
  .title_outer .title.title_size_small h1 { font-size: 30px; }
}

/* ---------- Artículos de Dios: rejilla de tarjetas (16-09-2026) ----------
   Antes eran nueve logos sueltos de tamaños distintos; ahora cada marca es
   una tarjeta con su logo, a qué se dedica y adónde lleva (web o Instagram). */
.deretiro-articulos { padding: 10px 20px 70px; }
.deretiro-articulos__marco { max-width: 1140px; margin: 0 auto; }
.deretiro-articulos__intro { max-width: 720px; margin: 0 0 34px; }
.deretiro-articulos__lema {
  font-family: 'Homemade Apple', cursive;
  font-size: 22px; line-height: 1.6; color: #79ACB2; margin: 0 0 10px;
}
.deretiro-articulos__texto { font: 300 17px/1.6 Roboto, sans-serif; color: var(--deretiro-texto); margin: 0; }
.deretiro-articulos__rejilla {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 22px;
}
.deretiro-articulo { margin: 0; padding: 0; }
.deretiro-articulo__enlace {
  display: flex; flex-direction: column; height: 100%;
  border: 1px solid #e6e0d8; border-radius: 16px; overflow: hidden; background: #fff;
  color: var(--deretiro-texto) !important; font-weight: 300 !important; text-decoration: none;
  transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s, border-color .3s;
}
.deretiro-articulo__enlace:hover,
.deretiro-articulo__enlace:focus-visible {
  transform: translateY(-5px); border-color: #c9dee4;
  box-shadow: 0 16px 36px rgba(71, 31, 19, .14); outline: none;
  color: var(--deretiro-texto) !important; font-weight: 300 !important;
}
.deretiro-articulo__logo {
  display: flex; align-items: center; justify-content: center; box-sizing: border-box;
  height: 220px; padding: 22px; background: #fff; border-bottom: 1px solid #efe9e2;
}
.deretiro-articulo__logo img {
  display: block; max-width: 100%; max-height: 100%; width: auto; height: auto;
  object-fit: contain; transition: transform .5s cubic-bezier(.2,.7,.2,1);
}
.deretiro-articulo__enlace:hover .deretiro-articulo__logo img { transform: scale(1.04); }
.deretiro-articulo__cuerpo { display: flex; flex-direction: column; flex: 1; gap: 6px; padding: 16px 18px 18px; }
.deretiro-articulo__tipo {
  align-self: flex-start; font: 500 11px/1 Roboto, sans-serif; letter-spacing: .6px; text-transform: uppercase;
  color: #3f6f76; background: #eef5f6; border-radius: 999px; padding: 5px 9px;
}
.deretiro-articulo__nombre { font-family: Trirong, Georgia, serif; font-size: 22px; line-height: 1.2; font-weight: 600; color: var(--deretiro-titulo); }
.deretiro-articulo__que { font: 300 14px/1.5 Roboto, sans-serif; color: var(--deretiro-texto); }
.deretiro-articulo__ir {
  display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 8px;
  font: 400 13px/1 Roboto, sans-serif; color: #79ACB2;
}
.deretiro-articulo__ir svg { flex: none; }
.deretiro-articulos__pie { margin: 40px 0 0; text-align: center; font: 300 15px/1.6 Roboto, sans-serif; color: var(--deretiro-suave); }
@media (max-width: 767px) {
  .deretiro-articulos { padding: 0 16px 50px; }
  .deretiro-articulos__intro { margin-bottom: 24px; }
  .deretiro-articulos__lema { font-size: 19px; }
  .deretiro-articulos__texto { font-size: 15px; }
  .deretiro-articulos__rejilla { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .deretiro-articulo__enlace { border-radius: 12px; }
  .deretiro-articulo__logo { height: 150px; padding: 14px; }
  .deretiro-articulo__cuerpo { padding: 12px 12px 14px; gap: 5px; }
  .deretiro-articulo__nombre { font-size: 17px; }
  .deretiro-articulo__que { font-size: 13px; }
  .deretiro-articulo__ir { font-size: 12px; }
}
@media (max-width: 400px) {
  .deretiro-articulos__rejilla { grid-template-columns: 1fr; }
}

/* ---------- Portada: Jóvenes Católicos centrado de verdad (16-09-2026) ----------
   La figura ocupaba el 30 % y el logo (300 px) se quedaba pegado a su izquierda. */
body .elementor-8 .elementor-element.elementor-element-8f3456e .elementor-image-box-img img { display: block; margin: 0 auto; }
@media (max-width: 767px) {
  body .elementor-8 .elementor-element.elementor-element-8f3456e .elementor-image-box-wrapper .elementor-image-box-img { width: 62%; }
}

/* ---------- Sobre nosotros (16-09-2026) ----------
   «Retiros y actividades» se salía de su columna a 48px; y ningún título
   debería desbordar su caja aunque traiga una palabra larga.                */
h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
body .elementor-302 .elementor-element.elementor-element-6fe5d2b .elementor-heading-title { font-size: 40px; line-height: 1.15; }
@media (max-width: 767px) {
  body .elementor-302 .elementor-element.elementor-element-6fe5d2b .elementor-heading-title { font-size: 32px; }
}

/* ---------- «Sobre DeRetiro» en la barra superior, entre RetStay e Instagram (16-09-2026) ----------
   Píldora blanca con el marrón de la marca: sobre el azul se lee de sobra. El tema
   pone a TODO enlace en :hover el azul y negrita con !important, así que aquí se
   pisa también en :hover, con más especificidad.                             */
.deretiro-sobre,
.deretiro-sobre:hover,
.deretiro-sobre:focus-visible {
  display: inline-flex !important; align-items: center;
  padding: 6px 13px !important; border-radius: 999px;
  border: 1px solid #fff; background: #fff;
  color: #471F13 !important; font: 500 12px/1 Roboto, sans-serif !important; text-decoration: none !important; white-space: nowrap;
  transition: background 0.18s ease, color 0.18s ease, transform 0.15s ease;
}
/* al pasar: el azul claro de la casa (el de la banda del menú), con el mismo marrón */
.deretiro-sobre:hover,
.deretiro-sobre:focus-visible { background: #C9DEE4; border-color: #fff; color: #471F13 !important; outline: none; }
.deretiro-sobre:active { transform: scale(0.97); }
@media (max-width: 767px) {
  .deretiro-sobre, .deretiro-sobre:hover { padding: 6px 10px !important; font-size: 11px !important; }
}

/* Formulario de contacto en móvil (21-09-2026): Elementor le pone al envoltorio
   de los campos margin: 0 -25px (su «column gap») y en pantallas estrechas se
   salía 15px del ancho de la página. Sin el margen negativo ni el relleno de
   cada campo, el formulario cabe justo en su columna. */
@media (max-width: 1024px) {
  .elementor-form .elementor-form-fields-wrapper { margin-left: 0 !important; margin-right: 0 !important; }
  .elementor-form .elementor-form-fields-wrapper .elementor-field-group { padding-left: 0 !important; padding-right: 0 !important; }
}