/* Reveal on scroll */
[data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .8s cubic-bezier(.22,.7,.2,1), transform .8s cubic-bezier(.22,.7,.2,1); }
[data-reveal].revealed { opacity: 1; transform: none; }

/* Hover effects */
.nav-link:hover { opacity: .65; }
.btn-wa:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -10px rgba(176,130,58,.95) !important; }
.hero-cta:hover { transform: translateY(-3px); box-shadow: 0 22px 44px -14px rgba(176,130,58,1) !important; }
.hero-secondary:hover { background: rgba(255,255,255,.2) !important; }
.thumb-btn:hover { transform: translateY(-3px) !important; box-shadow: 0 12px 22px -12px rgba(42,32,24,.6) !important; }
.btn-map:hover { transform: translateY(-2px) !important; }
.btn-info:hover { transform: translateY(-2px) !important; }
.service-card:hover { transform: translateY(-6px) !important; box-shadow: 0 26px 50px -34px rgba(42,32,24,.5) !important; }
.footer-link:hover { color: #F6EFDF !important; }
.contact-link:hover { opacity: .8 !important; }
.banner-cta:hover { transform: translateY(-3px) !important; }

/* ── 3. Skeleton shimmer: galería mientras carga imagen ── */
@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.thumb-btn.loading {
  background: linear-gradient(90deg, #EFE6D5 25%, #DDD0B6 50%, #EFE6D5 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
}
.thumb-btn.loading img { opacity: 0; transition: opacity .25s; }
.thumb-btn img { transition: opacity .25s; }

/* ── 2. Touch targets mínimos en móvil ── */
@media (max-width: 879px) {
  .footer-link { min-height: 44px; display: flex; align-items: center; }
}

/* ── Botón Volver arriba ── */
#back-to-top {
  position: fixed;
  bottom: 32px;
  right: 32px;
  z-index: 900;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: none;
  background: #241B12;
  color: #F3ECDD;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px -8px rgba(36,27,18,.55);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .3s, transform .3s, background .2s, box-shadow .2s;
  pointer-events: none;
}
#back-to-top.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
#back-to-top:hover {
  background: #B0823A;
  transform: translateY(-3px) !important;
  box-shadow: 0 14px 30px -10px rgba(176,130,58,.75);
}
@media (max-width: 640px) {
  #back-to-top { bottom: 22px; right: 18px; width: 44px; height: 44px; }
}

/* ── 4. Galería con scroll horizontal + snap en móvil ── */
@media (max-width: 640px) {
  .gallery-row {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 3px;
  }
  .gallery-row::-webkit-scrollbar { display: none; }
  .gallery-row .thumb-btn {
    scroll-snap-align: start;
    flex: none;
    width: 108px !important;
    height: 76px !important;
  }
}