/* places.css */
:root{
  --bg: #070a0f;
  --muted: #fafafa;
  --stroke: rgba(255,255,255,.14);
  --radius: 16px;
  --shadow: 0 16px 46px rgba(0,0,0,.34);
  --max: 1040px;
}

.places{
  margin:0;
  min-height: 40%;
  width: 100vw;
  color: #fafafa;
  overflow-x: hidden;
}

.alojamientos{
  background-image: url("../../../view/alojamiento/Casa_Kiyari/img/general15.jpg");
  background-position: center;
  background-size: cover;
}
.artesanias{
background-image: url('../../../view/artesanias/Artesanas_Veredas/img/slider3.jpeg');
background-position: center;
background-size: cover;
}
.gastronomia{
background-image: url('../../../view/gastronomia/kalu/img/especial17.jpg');
background-position: center;
background-size: cover;
}
.cultura{
  background-image: url('../../../view/festividades/la_diablada/diablada2.JPG');
  background-position: center;
  background-size: cover;
}
.rio{
  background-image: url('../../../view/rio/img/bocatoma.jpg');
  background-size: cover;
}
.top{
  padding: 18px 16px 8px;
}
.top__inner{
  max-width: var(--max);
  margin: 0 auto;
  padding: 16px 16px 14px;

  border-radius: 10px;
  background: rgba(255,255,255,.5);
  backdrop-filter: blur(50px);
}
.top h1{
  margin:0;
  font-size: clamp(22px, 3.2vw, 34px);
  letter-spacing: -0.02em;
  color: #000;
}
.top p{
  margin: 6px 0 10px;
  color: #000;
  font-size: 14px;
}
.nav{
  display:flex;
  flex-direction: row;
  flex-wrap:wrap;
  gap: 8px;
  justify-content: space-around;
}
.nav a{
  text-decoration:none;
  color: #000;
  font-size: 13px;
  padding: 9px 11px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.06);
  transition: transform .15s ease, background .15s ease;
}
.nav a:hover{ transform: translateY(-1px); background: rgba(255,255,255,.09); }
.grid{
  max-width: 100vw;
  margin: auto;
  padding: 1rem;
  gap: 14px;
  flex-direction: row;
  flex-wrap: wrap;
  display: flex;
  justify-content: center;

}
/* Tarjetas más pequeñas + variables para tu JS */
.cat{
  --bg-y: 0px;     /* JS */
  --fg-y: 0px;     /* JS */
  --img: none;     /* lo setean las clases de arriba */

  position: relative;
  min-height: clamp(210px, 32vh, 300px);
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: var(--shadow);
  isolation: isolate;
  min-width: 20%;
}
/* Fondo: DEGRADADO + IMAGEN + PARALLAX */
.cat::before{
  content:"";
  position: absolute;
  inset: -14%;
  z-index: 0;

  background-image:
    linear-gradient(180deg, rgba(0,0,0,.1) 0%, rgba(0,0,0,.3) 140%),
    var(--img);
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;

  will-change: transform;
  transform: translate3d(0, var(--bg-y), 0) scale(1.08);
  filter: saturate(1.06) contrast(1.02);
}

/* Contenido encima del fondo (se mueve poquito con fg) */
.cat__content{
  position: relative;
  z-index: 1;
  height: 100%;
  padding: clamp(16px, 2.2vw, 22px);

  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 6px;

  will-change: transform;
  transform: translate3d(0, var(--fg-y), 0);
}

/* Título */
.cat__content h2{
  margin: 0;
  font-size: clamp(18px, 2.4vw, 26px);
  letter-spacing: -0.02em;
  line-height: 1.1;
}

/* Texto */
.cat__content p{
  margin: 0;
  max-width: 46ch;
  color: #fafafa;
  font-size: 14px;
  line-height: 1.45;

}

/* Botón */
.cat__content .btn{
  align-self: flex-start;
  margin-top: 8px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 10px 12px;
  border-radius: 999px;

  text-decoration: none;
  color: #fafafa;
  font-size: 13px;
  font-weight: 600;

  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(10px);

  transition: transform .15s ease, background .15s ease;
}
.cat__content .btn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.12);
}
.cat__content .btn:focus-visible{
  outline: 2px solid rgba(255,255,255,.35);
  outline-offset: 2px;
}
/* Reduce motion: sin movimientos */
@media (prefers-reduced-motion: reduce){
  .cat::before,
  .cat__content{
    transform: none !important;
  }
}