/* =========================================================
   StyloLugares.css — Estilos GLOBAL “lugares”
   (todas las clases terminan en “L” o tienen sufijo L)
   ========================================================= */

/* === Variables rápidas === */
:root{
  /* Recomendados flotante (desktop / mobile) */
  --alto-reco: 350px;
  --alto-reco-mob: 240px;
  --reco-min: 180px;
  --reco-prefer: 20vw;
  --reco-max: 240px;

  /* Botones localidades */
  --loc-bg: #0b4d6e;
  --loc-bg2: #0e6fa3;
  --loc-text: #ffffff;
  --loc-ring: #b3e5fc;
}

/* ===== Reset y layout base ===== */
*{ box-sizing:border-box; }
html, body { overflow-x:hidden; }
.localidadL{ background:#2e2525; margin:0; padding:0; }
.wrapperL{ width:100%; max-width:960px; margin:0 auto; background:#edc47e; min-height:100vh; overflow:hidden; }

/* =========================
   CABECERA
   ========================= */
.cabeceraL{ background:#2a4e82; }
.logo-superiorL{
  display:flex; align-items:center; justify-content:center;
  height:50px; padding:0;
}
.logo-superiorL img{ height:100%; width:auto; max-width:960px; display:block; }

/* =========================
   MENÚ principal
   ========================= */
.menuScopeL{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-start; gap:8px;
  background:#2a7fe8; border-top:.05em solid #3147d2; position:relative; z-index:1000;
  padding:0 8px;
}
.menu-toggleL{ display:none; font-size:28px; background:none; border:0; color:#fff; padding:10px; cursor:pointer; }
.menu-listL{
  list-style:none; padding:0; margin:0;
  display:flex; flex-wrap:wrap; align-items:center; gap:0;
}
.menu-listL>li{ position:relative; margin-right:15px; }
.menu-listL a{ color:#fff; text-decoration:none; padding:6px 10px; display:block; }
.menu-listL li>ul{
  display:none; position:absolute; left:0; top:100%;
  background:#1f5fb8; list-style:none; padding:4px 0; margin:0; min-width:200px; border-radius:4px; z-index:2000;
}
.menu-listL li>ul li a{ padding:8px 10px; white-space:nowrap; }
.menu-listL li:hover>ul{ display:block; }

/* Redes */
.menuScopeL .social-iconsL,
.menuScopeL .social-icons{
  margin-left:auto; display:flex; align-items:center; gap:10px; flex-wrap:nowrap;
}
.menuScopeL .social-iconsL a,
.menuScopeL .social-icons a{
  width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:999px;
  background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.5);
  box-shadow:0 1px 2px rgba(0,0,0,.15) inset, 0 2px 6px rgba(0,0,0,.15);
  transition: transform .15s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
  text-decoration:none; outline:none;
}
.menuScopeL .social-iconsL a i,
.menuScopeL .social-icons a i{ font-size:18px; line-height:1; color:#fff; }
.menuScopeL .social-iconsL a:hover,
.menuScopeL .social-icons a:hover{
  background:#fff; border-color:transparent; transform:translateY(-1px);
  box-shadow:0 4px 10px rgba(0,0,0,.18);
}
.menuScopeL .social-iconsL a:hover i,
.menuScopeL .social-icons a:hover i{ color:#2a7fe8; }

@media (max-width:768px){
  .menu-toggleL{ display:block; }
  .menu-listL{
    display:none; flex-direction:column; align-items:stretch; width:100%;
    border-top:1px solid rgba(255,255,255,.25); background:#2a7fe8;
    position:relative; overflow:hidden;
  }
  .menu-listL.visible{ display:flex; }
  .menu-listL li.has-submenuL{ display:grid; grid-template-columns:1fr auto; align-items:center; position:static; }
  .menu-listL li>ul{
    display:block; position:absolute; left:0; right:0; top:0; width:100%;
    background:#1f5fb8; margin:0; padding:0; z-index:3000; max-height:calc(100vh - 56px); overflow:auto;
    transform:translate3d(100%,0,0); transition:transform .25s ease;
  }
  .menu-listL li.open>ul{ transform:translate3d(0,0,0); }
}

/* =========================
   LAYOUT (cuerpo + sidebar)
   ========================= */
.contenedorL{ display:flex; gap:2px; margin-top:0; }
.cuerpoL{ flex:1 1 0%; padding:12px 16px; }
.cuerpo-textoL > h2{ margin:0 0 8px; line-height:1.2; }

/* ===== h3 del index (portado y renombrado) ===== */
.h3L{
  margin: .9rem 0 .55rem;
  color:#0b4d6e;
  font-weight:800;
  font-size:1.22rem;
  line-height:1.25;
  letter-spacing:.2px;
  padding:.35rem .55rem;
  border-radius:.5rem;
  background: linear-gradient(180deg, #f0f7ff 0%, #e7f2ff 100%);
  border-left:6px solid #0e6fa3;
  box-shadow: 0 1px 6px rgba(0,0,0,.04) inset;
}
/* Si querés que todos los h3 del cuerpo lo usen sin agregar clase, descomentá: */
/* .cuerpo-textoL h3{ composes: h3L; } */

/* Texto del cuerpo */
.cuerpo-textoL p, .cuerpo-textoL .p1{
  font-size:1.1em; margin:.4em 0 .2em; text-align:justify; background:rgba(255,255,255,.6);
  padding:5px 10px; border-left:4px solid #2a7fe8; border-radius:4px;
}
.cuerpo-textoL::after{ content:""; display:block; clear:both; }

/* ===== Recomendados flotante ===== */
.reco-floatL{
  float:right;
  width: clamp(var(--reco-min), var(--reco-prefer), var(--reco-max));
  height: var(--alto-reco);
  margin: 4px 0 10px 16px;
  padding:0; background:transparent; border:0; box-shadow:none;
}
.reco-floatL h5{ margin:0; font-size:20px; line-height:1.15; font-weight:600; text-align:center; }
.reco-floatL h5 + .carrusel-contenedorL{ margin-top: 2px; }
.reco-floatL .carrusel-contenedorL{
  position:relative; width:100%; height:100%; overflow:hidden; border-radius:6px; background:#0001;
}
.reco-floatL .carrusel-contenedorL img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:contain; background:#1b1919; opacity:0; transition:opacity .6s ease;
}
.reco-floatL .carrusel-contenedorL img.activo{ opacity:1; }

@media (max-width:980px){
  .reco-floatL{ float:none; width:100%; height: var(--alto-reco-mob); margin: 0 0 10px 0; }
}

/* =========================
   Sidebar (buscador + carruseles) — 1 COLUMNA SIEMPRE
   ========================= */
.BarraderechaL{
  flex:0 0 300px; display:flex; flex-direction:column; gap:12px;
  background:#e9bb9b; box-shadow:-12px 0 18px rgba(55,52,52,.6);
  padding:10px; border-radius:4px; border:1px solid #d8a68a;
}
.BarraderechaL .grid-carruselesL{
  display:grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
.grid-span-2L{ grid-column: auto; }

/* Tarjeta */
.carruselL{
  background:#fff;
  border-radius:.75rem;
  padding:.75rem;
  box-shadow:0 2px 10px rgba(0,0,0,.06);
}
.carruselL h5{
  margin:0 0 .5rem 0;
  font-size:1.4rem;
  color:#222;
}

/* Contenedor base del carrusel */
.carrusel-contenedorL{
  position:relative;
  width:100%;
  overflow:hidden;
  border-radius:.5rem;
  background:#070707;
  height:240px; /* por defecto */
}

/* Tamaños/orientación explícitos por clase (NO depende de nth-of-type) */
.carruselL--wide .carrusel-contenedorL{ height:240px; }
.carruselL--tall .carrusel-contenedorL{ height:320px; }

/* Imágenes apiladas con fade (sin display:none) */
.carrusel-contenedorL img{
  position:absolute; inset:0;
  width:100%; height:100%;
  opacity:0; transition: opacity .6s ease;
  display:block;
  object-position:50% 50%;
}

/* Ajuste por orientación */
.carruselL--wide .carrusel-contenedorL img { object-fit: cover; }   /* llena sin bandas */
.carruselL--tall .carrusel-contenedorL img { object-fit: contain; background:#000; padding:.75rem 0;}

.carrusel-contenedorL img.activo{ opacity:1; }

/* =========================
   PIE
   ========================= */
.pieL{
  background:#ecad54; padding:8px; border-top:2px solid #ccc;
  display:flex; flex-direction:column; align-items:center; gap:10px;
}
.footer-linksL{ display:flex; flex-wrap:wrap; gap:20px; justify-content:center; text-align:center; }
.linkL{ color:#000204; text-decoration:none; font-weight:bold; display:flex; align-items:center; gap:8px; }
.footer-metaL{ display:flex; align-items:center; gap:8px; }
.footer-visitasL{ margin:0; display:flex; align-items:center; gap:4px; font-weight:bold; }
#comodoTL{ display:inline-flex; align-items:center; line-height:1; }
#comodoTL img, .footer-visitasL img{ display:inline-block; vertical-align:middle; border:0; }

.footer-copyL{ background:#000; color:#fff; text-align:center; padding:0px; width:100%; }
.footer-copyL--bleed{ background:#000; color:#fff; width:100%; }
.footer-copyL__inner{ max-width:clamp(220px, 60vw, 600px); margin:0 auto; padding:0px; text-align:center; }

/* Accesibilidad / motion */
.menuScopeL .is-openL { display: block !important; }
@media (prefers-reduced-motion: reduce) {
  .opcionesL--grid .btnL,
  .carrusel-contenedorL img { transition: none; }
}

/* ===== Localidades (botones) ===== */

.cuerpo-textoL > .intro-localidadesL {
  background: #caaf38;
  border: 1px solid #d5eaf7;
  color: #0b3750;
  padding: 1rem 1rem;
  border-radius: .7rem;
  font-weight: 600;
  margin: 0 0 .5rem 0;}

.opcionesL, .opcionesL--grid { list-style: none; margin: 0; padding-left: 0; }
.opcionesL--grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .7rem .7rem;
}
.opcionesL--grid .btnL {
  display: block;
  width: 100%;
  text-align: center;
  padding: .50rem 1.05rem;
  border-radius: .6rem;
  background: linear-gradient(180deg, var(--loc-bg), var(--loc-bg2));
  color: var(--loc-text);
  text-decoration: none;
  font-weight: 800;
  letter-spacing: .2px;
  text-transform: uppercase;
  border: 2px solid transparent;
  line-height: 1.05;
  box-shadow: 0 2px 10px rgba(0,0,0,.12);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, opacity .18s ease;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  word-break: break-word;
  font-size: 1.02rem;
}
@media (min-width:768px){ .opcionesL--grid .btnL { font-size: 1.08rem; } }
.opcionesL--grid .btnL:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
  border-color: rgba(255,255,255,.35);
}
.opcionesL--grid .btnL:focus-visible {
  outline: none;
  border-color: var(--loc-ring);
  box-shadow: 0 0 0 3px rgba(179,229,252,.45), 0 6px 18px rgba(0,0,0,.18);
}
.opcionesL--grid .btnL:active {
  transform: translateY(0);
  box-shadow: 0 2px 10px rgba(0,0,0,.14);
  opacity: .98;
}
.opcionesL--grid .btnL.btnL--urbano  { --loc-bg:#0b4d6e; --loc-bg2:#0e6fa3; }
.opcionesL--grid .btnL.btnL--litoral { --loc-bg:#00695c; --loc-bg2:#009688; }
.opcionesL--grid .btnL.btnL--rural   { --loc-bg:#6d4c41; --loc-bg2:#8d6e63; }
.opcionesL--grid .btnL.btnL--A { filter: saturate(1.05) brightness(1.02); }
.opcionesL--grid .btnL.btnL--B { filter: saturate(.98) brightness(.99); }

/* Título ocupa todo el ancho y centra el contenido */
.intro-titleL{
  margin: 0 0 1.2rem 0;
  line-height: 1.2;
  text-align: center; /* centramos el texto dentro del bloque */
}

/* La “chip” ahora es un bloque 100% ancho con el mismo estilo que el párrafo */
.intro-chipL{
  display: block;             /* <— clave para que tome todo el ancho del contenedor */
  width: 100%;
  padding: 1rem 1.2rem;       /* igual que el párrafo */
  border-radius: .7rem;
  background: #0a3c63;        /* mismo fondo que .intro-localidadesL */
  border: 1px solid #d5eaf7;  /* mismo borde */
  box-shadow: 0 1px 6px rgba(0,0,0,.04) inset;
  color: #f4f4f5;
  font-weight: 800;
  letter-spacing: .2px;
}

/* El párrafo mantiene su estilo, sólo centramos el texto para que combine */
.intro-localidadesL{
  text-align: center;
}

/* ==== Carruseles: título h4 destacado ==== */
.carruselL h4{
  margin: 0 0 .6rem 0;
  padding: .5rem 0;                 /* solo arriba/abajo */
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .6px;
  font-weight: 800;
  font-size: 1.05rem;
  color: #0b3750;

  /* fondo y franja, familia del look del index */
  background: linear-gradient(180deg, #f0f7ff 0%, #e7f2ff 100%);
  border-left: 6px solid #0e6fa3;
  border-right: 6px solid #0e6fa3;
  border-radius: .5rem;
  box-shadow: 0 1px 6px rgba(0,0,0,.04) inset;}

  /* ===== Leyenda de referencia (dentro de .intro-boxL) ===== */
.ref-legendL{
  display:flex;
  justify-content:center;
  align-items:center;
  gap: 1rem 1.25rem;
  flex-wrap: wrap;
  list-style:none;
  padding: .8rem 0;     /* separada del párrafo */
  margin: 0;
  border-top: 1px dashed #d5eaf7; /* sutil división con el texto */
}

.ref-itemL{
  display:flex; align-items:center; gap:.45rem;
  font-weight:700;
  color:#0b3750;
  letter-spacing:.2px;
}

/* Bala (círculo/cuadrado) — tamaño y forma */
.ref-bulletL{
  width:.9rem; height:.9rem;
  display:inline-block;
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 0 0 2px rgba(255,255,255,.65) inset; /* contraste sobre fondo claro */
}

/* Toggle de forma (poné is-circleL o is-squareL en .ref-legendL) */
.ref-legendL.is-circleL .ref-bulletL{ border-radius:999px; }
.ref-legendL.is-squareL .ref-bulletL{ border-radius:.2rem; }

/* Colores por categoría (alineados a tus botones) */
.ref-urbanoL  .ref-bulletL{ background:#0e6fa3; } /* urbano: var(--loc-bg2) aprox */
.ref-litoralL .ref-bulletL{ background:#009688; } /* litoral */
.ref-ruralL   .ref-bulletL{ background:#8d6e63; } /* rural */

/* (Opcional) versión con degradado muy suave, si te gusta más "botón" */
.ref-urbanoL  .ref-bulletL{
  background: linear-gradient(180deg, #0b4d6e 0%, #0e6fa3 100%);
}
.ref-litoralL .ref-bulletL{
  background: linear-gradient(180deg, #00695c 0%, #009688 100%);
}
.ref-ruralL   .ref-bulletL{
  background: linear-gradient(180deg, #6d4c41 0%, #8d6e63 100%);
}
/* Slider cabecera con .activo en DIV .slideL */
#sliderL{
  position:relative;
  height: clamp(180px, 24vw, 320px);
  overflow:hidden;}

#sliderL .slideL{
  position:absolute; inset:0;
  opacity:0;                    /* el fade se aplica al slide */
  transition:opacity .6s ease;
}
#sliderL .slideL.activo{ opacity:1; }

.slider-stickerL img{
   width:150px; 
   height:200px;
  display:block;}

.slider-overlayL {
  position: absolute;
  inset: 0;
  z-index: 1000; /* encima del slide pero debajo de controles si tenés */
  background: url('./images/background01.png') left 12px center no-repeat;
  background-size: cover; /* o contain, según necesites */
  pointer-events: none; /* para que no bloquee clics en controles */
  opacity: 0.6;} /* opcional: transparencia */


.slider-stickerL{ position:absolute; left:8px; top:8px; z-index:4; pointer-events:none; } /* ===== para mover el logo en el Slider de la cabecera = */
.slider-stickerL img{clamp (180px, 24vw, 320px); display:block; } 

/* si querés aún más grande en desktop */
@media (min-width:1024px){.slider-stickerL img{ height:110px; }}


/* ===== Slider cabecera (GLOBAL) — fade sobre DIV .slideL ===== */

.slider-fondoL{max-width:960px; width:100%; margin:0 auto;}
.slider-wrapperL{ position:relative; overflow:hidden; }

/* Contenedor del slider */
 #sliderL {
  position: relative;
  width: 100%;
  height: clamp(120px, 18vw, 220px); /* antes: clamp(220px, 36vw, 420px) */
  overflow: hidden;}

/* Cada slide ocupa todo el canvas; el fade se aplica al DIV */
#sliderL .slideL{
  position:absolute;
  inset:0;
  opacity:0;
  transition:opacity .6s ease;}

#sliderL .slideL.activo{ opacity:1;}

/* Imagen dentro del slide: cubrir (hero) */
#sliderL .slideL img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Sticker decorativa no empuja layout */
.slider-stickerL{
  position:absolute;
  left:8px; top:8px;
  z-index:4;
  pointer-events:none;
}
.slider-stickerL img{
  height:120px; width:auto; display:block;
}

/* Controles y paginación */
.prevL, .nextL{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:3;
  width:38px; height:38px;
  border:0; border-radius:999px;
  background:rgba(0,0,0,.35);
  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:3;
}
.slider-dotsL span{
  width:9px; height:9px;
  border-radius:999px;
  background:rgba(255,255,255,.5);
}
.slider-dotsL span.active{ background:#fff; }