/* Lo que añade la web nueva sobre el CSS que ya pintaba el WordPress.
   Va la última de la cascada. Nada de aquí cambia la maqueta original: son las
   piezas nuevas (galería, visor, aviso del formulario, información de datos) y
   los apaños para lo que antes resolvía un script. */

/* El hueco del selector de idioma se conserva, invisible, para que el menú no
   se corra a la derecha. */
.sin-traductor { visibility: hidden; pointer-events: none; }

/* Señuelo para robots: fuera de la vista y del foco, pero no `display:none`,
   que algunos robots detectan. */
.campo-senuelo {
  position: absolute !important; left: -10000px !important; top: auto !important;
  width: 1px !important; height: 1px !important; overflow: hidden !important;
}

/* WhatsApp: el rótulo «Escríbenos» asomaba al pasar el ratón. */
#ht-ctc-chat { text-decoration: none; }
#ht-ctc-chat:hover .ctc_cta, #ht-ctc-chat:focus-visible .ctc_cta { display: block !important; }
#ht-ctc-chat:focus-visible { outline: 3px solid #0186ff; outline-offset: 3px; border-radius: 12px; }

/* Reseñas: el paso del carrusel lo mueve web.js. */
.ti-reviews-container-wrapper .ti-review-item { transition: transform .45s ease; }
.ti-review-content.ti-abierto { height: auto !important; -webkit-line-clamp: unset !important; display: block !important; }
.ti-controls[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) {
  .ti-reviews-container-wrapper .ti-review-item { transition: none; }
}

/* Formulario ------------------------------------------------------------- */
.form-aviso { margin-top: 12px; font-size: 15px; }
.form-aviso.elementor-message-success { color: #1f7a38; }
.form-aviso.elementor-message-danger { color: #b3261e; }
.elementor-form [aria-invalid="true"] { border-color: #b3261e !important; }

.info-basica-datos {
  margin-top: 20px; padding-top: 14px; border-top: 1px solid rgba(0, 0, 0, .12);
  font-size: 12.5px; line-height: 1.5; color: #4a4a4a;
}
.info-basica-datos .info-basica-titulo { margin: 0 0 8px; font-weight: 600; color: #333; }
.info-basica-datos dl {
  display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 0;
}
.info-basica-datos dt { font-weight: 600; }
.info-basica-datos dd { margin: 0; }
.info-basica-datos a { color: inherit; text-decoration: underline; }
@media (max-width: 560px) {
  .info-basica-datos dl { grid-template-columns: 1fr; gap: 0; }
  .info-basica-datos dd { margin-bottom: 6px; }
}

/* Galería de proyectos --------------------------------------------------- */
.galeria-rejilla {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 12px;
}
.galeria-item { margin: 0; padding: 0; }
.galeria-foto {
  display: block; position: relative; overflow: hidden; border-radius: 4px;
  aspect-ratio: 4 / 3; background: #e8eef5;
}
.galeria-foto img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s ease;
}
.galeria-foto:hover img, .galeria-foto:focus-visible img { transform: scale(1.04); }
.galeria-foto:focus-visible { outline: 3px solid #0186ff; outline-offset: 2px; }
/* Seis fotos: dos filas de tres en escritorio y tres de dos en tableta y móvil. */
.galeria-rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1024px) {
  .galeria-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .galeria-rejilla { gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .galeria-foto img { transition: none; }
}

/* Visor ------------------------------------------------------------------ */
.visor-abierto, .visor-abierto body { overflow: hidden; }
.visor {
  position: fixed; inset: 0; z-index: 100000000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(8, 18, 32, .92); padding: 56px 64px;
}
.visor[hidden] { display: none; }
.visor-marco { margin: 0; display: flex; flex-direction: column; align-items: center; max-width: 100%; max-height: 100%; }
.visor-marco img {
  display: block; max-width: 100%; max-height: calc(100vh - 140px); width: auto; height: auto;
  border-radius: 4px; box-shadow: 0 10px 40px rgba(0, 0, 0, .5);
}
.visor-pie { margin-top: 10px; color: #dfe7f1; font-size: 14px; font-family: inherit; }
.visor button {
  position: absolute; border: 0; background: rgba(255, 255, 255, .12); color: #fff;
  width: 48px; height: 48px; border-radius: 50%; font-size: 30px; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
/* El tema Hello pinta todo botón en foco o con el ratón encima de su rosa
   (#c36); aquí no pinta nada. */
.visor button:hover, .visor button:focus { background: rgba(255, 255, 255, .25); color: #fff; }
.visor button:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.visor-cerrar { top: 12px; right: 12px; }
.visor-anterior { left: 10px; top: 50%; transform: translateY(-50%); }
.visor-siguiente { right: 10px; top: 50%; transform: translateY(-50%); }
@media (max-width: 600px) {
  .visor { padding: 60px 8px; }
  .visor-anterior, .visor-siguiente { top: auto; bottom: 10px; transform: none; }
  .visor-anterior { left: calc(50% - 58px); }
  .visor-siguiente { right: calc(50% - 58px); }
}

/* Textos legales: los nuevos llevan listas y títulos propios. */
.texto-legal h2 { font-size: 1.25em; margin: 1.6em 0 .6em; }
.texto-legal ul { margin: 0 0 1em 1.2em; }
.texto-legal li { margin-bottom: .35em; }

/* La galería de WordPress separa sus fotos con un margen de -15 px a la derecha
   y un relleno de 15 px en cada foto. A todo lo ancho de la ventana, esos 15 px
   se salen de la pantalla y abren un scroll horizontal (1455 px a 1440, 405 a
   390; el original lo tenía igual). Se recorta el sobrante, que es relleno vacío. */
.elementor-image-gallery { overflow: hidden; }

/* Las páginas legales citan direcciones largas sin espacios
   (`sede.red.gob.es/procedimientos/quejas-y-sugerencias`) que en un móvil de
   360 px o menos no caben y abrían scroll horizontal. Se parten donde haga falta. */
.elementor-widget-theme-post-content { overflow-wrap: anywhere; }

/* Zonas pulsables. Los enlaces del pie (teléfono, «Cómo llegar», Instagram) y
   los que van dentro del texto medían de 15 a 21 px de alto, por debajo de los
   24 que pide un dedo. Se agrandan sin mover un píxel: en los del pie, que son
   `flex`, el relleno se compensa con un margen negativo igual; en los que van en
   línea, el relleno vertical no cambia el alto de la línea. */
.elementor-location-footer .elementor-icon-list-item > a { padding-block: 3px; margin-block: -3px; }
.elementor-widget-theme-post-content a, .elementor-widget-text-editor a,
.elementor-icon-box-description a { padding-block: 3px; }
.info-basica-datos a { padding-block: 5px; }

/* Animaciones del original ------------------------------------------------ */
/* Los botones suben al pasar el ratón: la animación «float» de Elementor, con
   su misma regla. En el WordPress esta hoja la cargaba su JavaScript aparte y
   no viajaba en el paquete de cada página, por eso no llegó con el rescate. */
.elementor-animation-float {
  transition-duration: .3s; transition-property: transform; transition-timing-function: ease-out;
}
.elementor-animation-float:active, .elementor-animation-float:focus,
.elementor-animation-float:hover { transform: translateY(-8px); }

/* Las entradas al hacer scroll (fundido y deslizamiento desde un lado), con los
   mismos fotogramas de Elementor. Las pone web.js sólo en lo que aún no está a
   la vista: sin script, todo se ve desde el principio. */
.elementor-invisible { visibility: hidden; }
.animated { animation-duration: 1.25s; animation-fill-mode: both; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeInLeft { from { opacity: 0; transform: translate3d(-100%, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes fadeInRight { from { opacity: 0; transform: translate3d(100%, 0, 0); } to { opacity: 1; transform: none; } }
.fadeIn { animation-name: fadeIn; }
.fadeInLeft { animation-name: fadeInLeft; }
.fadeInRight { animation-name: fadeInRight; }
/* Lo que entra desde un lado sale de fuera de su sección y, mientras se mueve,
   ensanchaba la página (hasta 2601 px en una ventana de 1440). Las que entran
   son secciones enteras de primer nivel, así que recorta el documento de
   Elementor que las contiene, y sólo por los lados: por abajo va el desplegable
   del menú. */
[data-elementor-type] { overflow-x: clip; }
@media (prefers-reduced-motion: reduce) {
  .animated { animation: none !important; }
  .elementor-animation-float:hover, .elementor-animation-float:focus { transform: none; }
}