/* ==========================================================================
   DINAMISMO SOBRIO
   Transiciones cortas, elevación suave y aparición al hacer scroll.
   Nada rebota ni se mueve más de unos pocos píxeles: el movimiento informa.
   Se apaga por completo con "reducir movimiento" (ver accesibilidad.css).
   ========================================================================== */

html { scroll-behavior: smooth; }

/* ---- Clima (antes con estilos en línea) ---- */
.clima-linea { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.clima-linea strong { font-size: 12px; color: #000; }
.clima-linea span { font-size: 9px; color: #000; }
.clima-linea small { font-size: 8px; color: #000; }
.clima-linea .clima-oculto { display: none; }

/* ---- Aviso destacado (config.php -> $aviso) ---- */
.aviso-destacado {
  background: var(--vz-guinda);
  color: #fff;
  text-align: center;
  padding: 8px 0;
  font-size: .9rem;
}
.aviso-destacado a { color: #fff; text-decoration: underline; font-size: inherit; }

/* ---- Tarjetas de servicio: elevación y entrada escalonada ---- */
.wrapper-services .block-service2022 {
  transition-property: color, background-color, transform, box-shadow;
  transition-duration: var(--vz-transicion);
  box-shadow: var(--vz-sombra);
}
.wrapper-services a:hover .block-service2022,
.wrapper-services a:focus-visible .block-service2022 {
  transform: translateY(-3px) translateZ(0);
  box-shadow: var(--vz-sombra-alta);
}
.wrapper-services a { border-radius: 40px; }

/* ---- Botones guinda junto al slider ---- */
.btn-slider-item {
  transition: transform var(--vz-transicion), filter var(--vz-transicion), box-shadow var(--vz-transicion);
  box-shadow: var(--vz-sombra);
}
.btn-slider-item:hover { box-shadow: var(--vz-sombra-alta); text-decoration: none; }

/* ---- Slider: enlaces, controles y transición sin saltos ---- */
.slide { transition: opacity 1s ease-in-out, visibility 0s linear 1s; visibility: hidden; }
.slide.active { visibility: visible; transition-delay: 0s; }
.slide a { display: block; width: 100%; height: 100%; }
.slide::after { pointer-events: none; }

.slider-control {
  position: absolute;
  z-index: 4;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, .45);
  color: #fff;
  font-size: 14px;
  line-height: 40px;
  padding: 0;
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--vz-transicion), background-color var(--vz-transicion);
}
.slider-control:hover { background: var(--vz-guinda); }
.slider-prev { left: 12px; top: 50%; margin-top: -20px; }
.slider-next { right: 12px; top: 50%; margin-top: -20px; }
.slider-pausa { right: 12px; top: 12px; width: 32px; height: 32px; line-height: 32px; font-size: 12px; }
.slider-container:hover .slider-control,
.slider-container:focus-within .slider-control { opacity: 1; }
@media (hover: none) { .slider-control { opacity: .85; } }

.indicator { padding: 0; appearance: none; -webkit-appearance: none; }

/* ---- Video 16:9 ---- */
.video-responsivo { position: relative; width: 100%; padding-top: 56.25%; background: #000; }
.video-responsivo iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---- Enlaces dentro del pie ---- */
footer .ubicacion-footer a { color: #fff; font-size: inherit; text-decoration: underline; }
footer .ubicacion-footer a:hover { color: var(--vz-dorado-claro); }

/* ---- Mapa del pie y plugin de Facebook ---- */
.mapa-footer { width: 100%; height: 250px; display: inline-block; overflow: hidden; }
.mapa-footer iframe { width: 100%; height: 100%; border: 0; }
.facebook-plugin { border: 0; overflow: hidden; max-width: 100%; }

/* ---- Títulos de sección (h1 en lugar de div) ---- */
.separator-container .separator { margin: 0; line-height: 1.3; }

/* ---- Botón "ir arriba" ---- */
.ir-arriba {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 60;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--vz-guinda);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--vz-sombra-alta);
  text-decoration: none;
  transition: transform var(--vz-transicion), background-color var(--vz-transicion);
}
.ir-arriba:hover { background: var(--vz-guinda-hover); color: #fff; transform: translateY(-2px); }
.ir-arriba i { font-size: 16px; }

/* ---- Aparición al hacer scroll (solo si el navegador y el usuario lo permiten) ---- */
.con-reveal .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s ease, transform .6s ease;
}
.con-reveal .reveal.visible { opacity: 1; transform: none; }
.con-reveal .wrapper-services .reveal:nth-child(2) { transition-delay: .07s; }
.con-reveal .wrapper-services .reveal:nth-child(3) { transition-delay: .14s; }
.con-reveal .wrapper-services .reveal:nth-child(4) { transition-delay: .21s; }

/* Evita desbordamiento horizontal del dominio en el pie (celular) */
@media (max-width: 575px) {
  footer .footer-center a.url-site { letter-spacing: 1px; font-size: 16px; }
}