/*
 * Bosque Guardián Lodge — «Nuestras experiencias» (La Experiencia): filtro por tipo y tarjetas.
 * Rediseño aprobado por Diego (21/10/2026). La ventana de detalle de cada experiencia queda como el original.
 */
#experiencias-incluidas .bg-exp{--v:#03351d;--v2:#0b4a2b;--a:#ef7f1a;--t:#1d2a22;max-width:1320px;margin:10px auto 0;padding:0 24px 90px}

/* Filtro: píldoras (en móvil también se ven todas, en varias líneas) */
#experiencias-incluidas .bg-exp-filtro{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:0 0 36px}
#experiencias-incluidas .bg-exp-pill{display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(3,53,29,.22);background:#fff;color:var(--v);border-radius:999px;padding:10px 18px;font-family:inherit;font-weight:500;font-size:14px;line-height:1;letter-spacing:.3px;cursor:pointer;transition:background .2s,color .2s,border-color .2s,box-shadow .2s;white-space:nowrap}
#experiencias-incluidas .bg-exp-pill:hover{border-color:var(--v);box-shadow:0 4px 14px rgba(3,53,29,.12)}
#experiencias-incluidas .bg-exp-pill:focus-visible{outline:2px solid var(--a);outline-offset:2px}
#experiencias-incluidas .bg-exp-pill.is-activa{background:var(--v);border-color:var(--v);color:#fff}
#experiencias-incluidas .bg-exp-num{display:inline-block;min-width:22px;padding:3px 6px;border-radius:999px;background:rgba(3,53,29,.08);font-size:12px;line-height:1;text-align:center}
#experiencias-incluidas .bg-exp-pill.is-activa .bg-exp-num{background:rgba(255,255,255,.18)}

/* Tarjetas */
#experiencias-incluidas .bg-exp-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}
#experiencias-incluidas .bg-exp-item{margin:0;padding:0;transition:opacity .35s ease,transform .35s ease}
#experiencias-incluidas .bg-exp-item.is-saliendo{opacity:0;transform:scale(.97)}
#experiencias-incluidas .bg-exp-item[hidden]{display:none}
#experiencias-incluidas .bg-exp-card{position:relative;display:block;aspect-ratio:4/3.1;border-radius:16px;overflow:hidden;background:var(--v);box-shadow:0 10px 30px rgba(3,53,29,.14);text-decoration:none;isolation:isolate}
#experiencias-incluidas .bg-exp-card:focus-visible{outline:3px solid var(--a);outline-offset:3px}
#experiencias-incluidas .bg-exp-foto,#experiencias-incluidas .bg-exp-foto img{position:absolute;inset:0;width:100%;height:100%}
#experiencias-incluidas .bg-exp-foto img{object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1);max-width:none}
#experiencias-incluidas .bg-exp-velo{position:absolute;inset:0;background:linear-gradient(180deg,rgba(1,26,14,0) 30%,rgba(1,26,14,.55) 62%,rgba(1,26,14,.92) 100%);transition:background .4s}
#experiencias-incluidas .bg-exp-info{position:absolute;left:0;right:0;bottom:0;padding:22px 22px 20px;color:#fff;text-align:left;display:flex;flex-direction:column;gap:8px;transform:translateY(26px);transition:transform .45s cubic-bezier(.2,.7,.2,1)}
#experiencias-incluidas .bg-exp-tipo{align-self:flex-start;font-size:11px;font-weight:600;letter-spacing:1.4px;text-transform:uppercase;color:#fff;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.35);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-radius:999px;padding:5px 10px 4px}
#experiencias-incluidas .bg-exp-titulo{font-size:19px;line-height:1.25;font-weight:600;letter-spacing:.6px;text-transform:uppercase;text-shadow:0 2px 10px rgba(0,0,0,.35)}
#experiencias-incluidas .bg-exp-datos{display:flex;flex-wrap:wrap;gap:8px 16px;font-size:13px;color:rgba(255,255,255,.88)}
#experiencias-incluidas .bg-exp-dato{display:inline-flex;align-items:center;gap:7px}
#experiencias-incluidas .bg-exp-puntos{display:inline-flex;gap:3px}
#experiencias-incluidas .bg-exp-puntos i{width:7px;height:7px;border-radius:2px;border:1px solid rgba(255,255,255,.75)}
#experiencias-incluidas .bg-exp-puntos i.on{background:var(--a);border-color:var(--a)}
#experiencias-incluidas .bg-exp-reloj{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
#experiencias-incluidas .bg-exp-ver{font-size:13px;font-weight:600;letter-spacing:.8px;text-transform:uppercase;color:var(--a);opacity:0;transition:opacity .35s}
#experiencias-incluidas .bg-exp-card:hover .bg-exp-foto img,#experiencias-incluidas .bg-exp-card:focus-visible .bg-exp-foto img{transform:scale(1.07)}
#experiencias-incluidas .bg-exp-card:hover .bg-exp-info,#experiencias-incluidas .bg-exp-card:focus-visible .bg-exp-info{transform:none}
#experiencias-incluidas .bg-exp-card:hover .bg-exp-ver,#experiencias-incluidas .bg-exp-card:focus-visible .bg-exp-ver{opacity:1}
#experiencias-incluidas .bg-exp-card:hover .bg-exp-velo{background:linear-gradient(180deg,rgba(1,26,14,.05) 20%,rgba(1,26,14,.6) 55%,rgba(1,26,14,.95) 100%)}

/* Las ventanas de detalle viven fuera de la cuadrícula (no ocupan espacio) */
#experiencias-incluidas .bg-exp-modales{height:0;overflow:hidden}

@media (max-width:1100px){#experiencias-incluidas .bg-exp-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}}
@media (max-width:767px){
  #experiencias-incluidas .bg-exp{padding:0 16px 60px}
  /* En móvil se ven todas las opciones a la vez: «Todas» arriba a lo ancho y los tipos en 2 columnas */
  #experiencias-incluidas .bg-exp-filtro{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 24px}
  #experiencias-incluidas .bg-exp-pill{justify-content:center;padding:10px 10px;font-size:13px;gap:6px;white-space:normal;text-align:center}
  #experiencias-incluidas .bg-exp-pill[data-tipo="*"]{grid-column:1/-1}
  #experiencias-incluidas .bg-exp-filtro .bg-exp-pill:last-child:nth-child(even){grid-column:1/-1}
  #experiencias-incluidas .bg-exp-num{min-width:18px;padding:2px 5px;font-size:11px}
  #experiencias-incluidas .bg-exp-grid{grid-template-columns:1fr;gap:18px}
  #experiencias-incluidas .bg-exp-card{aspect-ratio:4/3.2}
  #experiencias-incluidas .bg-exp-info{transform:none;padding:18px}
  #experiencias-incluidas .bg-exp-ver{opacity:1}
  #experiencias-incluidas .bg-exp-titulo{font-size:17px}
}
@media (hover:none){#experiencias-incluidas .bg-exp-info{transform:none}#experiencias-incluidas .bg-exp-ver{opacity:1}}
@media (prefers-reduced-motion:reduce){#experiencias-incluidas .bg-exp *{transition:none!important}}