/* =========================================================
   StylolugareslocalL.css — Overrides por LUGAR (cargar DESPUÉS de StyloLugares.css)
   ========================================================= */

/* ===== Paleta local ===== */
:root{
  --primary-local: #1f6feb;
  --accent-local:  #050505;
}

/* =========================
   CABECERA + MENÚ
   ========================= */
#cabeceraL{ background:#2a4e82 !important; }
#cabeceraL .logo-superiorL{
  display:flex !important; align-items:center !important; justify-content:center !important;
  height:auto !important; padding:0 !important;
}
#cabeceraL .logo-superiorL img{
  width:100% !important; height:auto !important; max-width:960px !important; display:block !important;
}
.menuScopeL{ background:#1f6feb !important; }

/* =========================
   CUERPO (card visual)
   ========================= */
.cuerpoL{ background:#f0aa5f1a; }
.cuerpo-textoL{
  background:#f0aa5f; border:1px solid #e8d9a8; border-radius:8px; padding:18px 20px;
}
.cuerpo-textoL h2{ color:#122b5a; }
.cuerpo-textoL a{ color:var(--primary-local); }
.cuerpo-textoL a:hover{ color:#0d3ea8; }

/* =========================
   RECOMENDADOS flotante (carrusel)
   ========================= */
.reco-floatL{ height:auto !important; float:right; }
.reco-floatL .carrusel-contenedorL{
  display:grid !important; height:auto !important; overflow:hidden; border-radius:8px; background:#000;
}
.reco-floatL .carrusel-contenedorL img{
  position:static !important; grid-area:1 / 1; width:100% !important; height:auto !important; max-width:100% !important;
  object-fit:contain !important; opacity:0 !important; transition:opacity .6s ease !important; display:block;
}
.reco-floatL .carrusel-contenedorL img.activo{ opacity:1 !important; }

/* =========================
   SIDEBAR — modo seguro
   ========================= */
.BarraderechaL .carrusel-contenedorL{
  display:block !important; position:relative !important; width:100% !important; height:auto !important; aspect-ratio:auto !important;
  overflow:hidden; border-radius:10px; background:#000;
}
.BarraderechaL .carrusel-contenedorL img{
  display:none !important; position:static !important; width:100% !important; height:auto !important; max-width:100% !important;
  object-fit:contain !important; opacity:1 !important; transition:none !important;
}
.BarraderechaL .carrusel-contenedorL img.activo{ display:block !important; }
.fila-2L .carrusel-contenedorL{ height:auto !important; aspect-ratio:auto !important; }

/* =========================
   LAYOUT RESPONSIVE
   ========================= */
@media (min-width:1025px){
  .contenedorL{ display:flex !important; flex-direction:row !important; align-items:flex-start; gap:2px; }
  .cuerpoL{ flex:1 1 0% !important; }
  .BarraderechaL{
    flex:0 0 300px !important; box-shadow:-12px 0 18px rgba(55,52,52,.6); background:#e9bb9b;
    padding:10px; border-radius:4px; border:1px solid #d8a68a;
  }
}
@media (max-width:1024px){
  .contenedorL{ display:flex !important; flex-direction:column !important; gap:12px; padding:0 10px; }
  .reco-floatL{ float:none !important; width:100% !important; margin:6px 0 2px 0 !important; }
  .BarraderechaL{ width:100% !important; box-shadow:none !important; background:transparent !important; border:0 !important; padding:8px 0 !important; }
}

/* =========================
   TARJETA DE HOTEL
   ========================= */
.etiquetaL.hotel-cardL{ display:block; background:#e3bf8f; border:1px solid #e8d9a8; border-radius:10px; padding:12px 14px; margin:10px 0; box-shadow:0 2px 8px rgba(0,0,0,.06); }
.hotel-cardL__title{ margin:0 0 6px 0; font-size:1.15rem; line-height:1.25; color:#122b5a; }
.hotel-cardL__data{ margin:0 0 4px 0; line-height:1.35; color:#000 !important; font-size:.95rem; background:transparent; padding:0; border:0; }
.hotel-cardL__actions{ margin:0; }
.cuerpo-textoL .hotel-cardL p{ background:transparent !important; border:0 !important; padding:0 !important; }
.etiquetaL.hotel-cardL{ display:flex; flex-direction:column; gap:8px; }

.btnLinkL{ display:inline-flex; align-items:center; gap:8px; font-weight:600; text-decoration:none; padding:6px 5px; border-radius:8px; color:#fff; background:#e0e4e9; border:1px solid #0e4fc4; }
.btnLinkL:hover{ filter:brightness(1.05); }
.btnLinkL i{ font-size:.95em; }
@media (max-width:520px){
  .etiquetaL.hotel-cardL{ padding:10px 12px; }
  .hotel-cardL__title{ font-size:1.05rem; margin-bottom:4px; }
  .hotel-cardL__data{ margin-bottom:6px; }
}

/* =========================
   ESTABILIDAD LAYOUT LOCAL
   ========================= */
.cuerpoL, .cuerpo-textoL{ display:block !important; }
.cuerpo-textoL > *{ order:initial !important; }
.BarraderechaL{ order:initial !important; display:block !important; width:auto; }

/* =========================
   SLIDER CABECERA (fade)
   ========================= */
.slider-wrapperL{ position:relative; max-width:960px; margin:0 auto; }
#sliderL{ position:relative; width:100%; height:clamp(120px,18vw,220px); overflow:hidden; z-index:1; }
#sliderL .slideL{ position:absolute; inset:0; opacity:0; transition:opacity .6s ease; }
#sliderL .slideL.activo{ opacity:1; }
#sliderL .slideL img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }

/* background01 SOBRE las imágenes (más chico y a la izquierda) */
.slider-overlayL{
  position:absolute;
  inset:0;
  z-index:4;              /* debajo de flechas/dots */
  pointer-events:none;
  background:url('../images/background01.png') left 12px center no-repeat;
  background-size:clamp(80px,18vw,160px);   /* más chico y a la izquierda */
  opacity:.9;}

/* Texto del slide (abajo-derecha) */
.slider-textoL{
  position:absolute; right:12px; bottom:12px; z-index:5; font-weight:900; font-size:clamp(18px,2.6vw,28px);
  letter-spacing:.4px; color:#fff; text-shadow:0 2px 8px rgba(0,0,0,.45), 0 0 1px rgba(0,0,0,.8);
  padding:.25rem .55rem; background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,.15)); border-radius:.4rem;
}

/* Controles y paginación SOBRE las imágenes */
.prevL,.nextL{
  position:absolute; top:50%; transform:translateY(-50%); z-index:6; width:38px; height:38px;
  border:0; border-radius:999px; background:rgba(0,0,0,.42); color:#fff; cursor:pointer;
}
.prevL{ left:10px; } .nextL{ right:10px; }
.slider-dotsL{ position:absolute; left:50%; bottom:10px; transform:translateX(-50%); display:flex; gap:6px; z-index:6; }
.slider-dotsL span{ width:9px; height:9px; border-radius:999px; background:rgba(255,255,255,.55); }
.slider-dotsL span.active{ background:#fff; }

/* Ocultar sticker anterior si existiera */
.slider-stickerL{ display:none; }

/* =========================
   FOOTER — corte visual
   ========================= */
.pieL{ background:#1b1b1b !important; color:#f5f5f5; }
.pieL .linkL{ color:#ffffff; }
.footer-metaL, .footer-visitasL{ color:#eaeaea; }
