/* =====================================================
   PUEBLOS — CSS FINAL (Valle de Arce / Artzibar)
   Seguro para header/footer del tema HUB (Insurance)
   ===================================================== */

:root{
  --brand:#0F5A64; --brand-light:#005153; --surface:#ffffff; --text:#1f2937;
  --muted:#6b7280; --border:#e5e7eb; --bg:#f7fafc; --shadow:0 10px 24px rgba(0,0,0,.06);
  --accent:#D4A574; --success:#166534; --neutral:#374151;
  --cta-bg:#E6F1EE; --cta-bg-hover:#DCEBE7;
}

/* IMPORTANTE: No interferir con z-index del header del tema */
html, body { overflow-x:hidden; }  
.vda-container, .tpl-container{ max-width:1140px; margin:0 auto; padding:0 20px; }
a{color:inherit; text-decoration:none}

/* Evitar que nuestros elementos interfieran con el header */
.vda-hero-archive, .tpl-hero__panel, .pueblo-lightbox {
  position: relative;
  z-index: auto; /* No usar z-index alto que pueda interferir */
}

/* Solo el lightbox puede usar z-index alto */
.pueblo-lightbox {
  z-index: 9999;
}

/* ---------- Listado / archivo ---------- */
.vda-hero-archive{ 
  background:transparent; 
  border:0; 
  padding:28px 0 12px; 
  position: relative;
  z-index: 1; /* Bajo para no interferir con header */
}
.vda-hero-archive--clean{
  padding:40px 0 20px;
}
.vda-archive-h1{ 
  font-size:clamp(28px,3.2vw,44px); 
  margin:0 0 .4em; 
  font-weight:800; 
  line-height:1.1;
  background:linear-gradient(90deg, var(--brand), var(--accent)); 
  -webkit-background-clip:text; 
  -webkit-text-fill-color:transparent;
  background-clip:text;
  color:var(--brand); /* fallback */
}
.vda-archive-intro{ 
  color:var(--muted); 
  max-width:820px; 
  margin:0 0 20px; 
  font-size:17px;
  line-height:1.5;
}

/* Filtros alfabéticos */
.vda-alpha.vda-alpha--pagerstyle{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:18px 0 6px;
  justify-content:center;
}
.vda-alpha .page-numbers{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:40px;
  height:40px;
  padding:0 12px;
  border-radius:10px;
  border:1px solid var(--border);
  text-decoration:none;
  color:var(--text);
  background:#fff;
  font-weight:600;
  transition:.2s;
  font-size:14px;
}
.vda-alpha .page-numbers:hover,
.vda-alpha .page-numbers.is-active{
  border-color:var(--brand);
  color:var(--brand);
  background:rgba(15,90,100,.05);
}
.vda-alpha .is-disabled{
  opacity:.4;
  pointer-events:none;
}

/* Grid de pueblos */
.vda-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:32px;
  margin:40px 0;
  position:relative;
  z-index:1;
}
@media (max-width:980px){.vda-grid{grid-template-columns:repeat(2,1fr);gap:24px}}
@media (max-width:640px){.vda-grid{grid-template-columns:1fr;gap:20px}}

.card-pueblo{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:20px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  box-shadow:0 8px 25px rgba(15,90,100,.08);
  transition:all .3s ease;
  position:relative;
  z-index:1;
}
.card-pueblo:hover{
  transform:translateY(-4px);
  box-shadow:0 15px 35px rgba(15,90,100,.15);
  border-color:var(--brand);
}
.card-pueblo.is-hidden{
  display:none;
}

.card-media{
  display:block;
  aspect-ratio:16/9;
  background:#f3f4f6;
  overflow:hidden;
  position:relative;
}
.card-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .3s ease;
}
.card-pueblo:hover .card-media img{
  transform:scale(1.05);
}

.card-body{
  padding:24px;
  display:flex;
  flex-direction:column;
  gap:12px;
  flex-grow:1;
}
.card-title{
  font-size:22px;
  margin:0;
  font-weight:700;
  line-height:1.3;
  letter-spacing:0;
}
.card-title a{
  color:var(--brand);
  transition:color .2s ease;
}
.card-title a:hover{
  color:var(--brand-light);
}
.card-meta{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.card-excerpt{
  color:var(--muted);
  margin:0;
  line-height:1.5;
  flex-grow:1;
}

/* Botones */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  height:44px;
  padding:0 20px;
  border-radius:12px;
  background:var(--brand);
  color:#fff;
  font-weight:700;
  border:2px solid var(--brand);
  transition:all .3s ease;
  margin-top:auto;
  text-decoration:none;
}
.btn:hover{
  background:var(--brand-light);
  border-color:var(--brand-light);
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(15,90,100,.25);
}
.btn--ghost{
  background:transparent;
  color:var(--brand);
  border-color:var(--brand);
}
.btn--ghost:hover{
  background:var(--brand);
  color:#fff;
}

/* Badges/etiquetas */
.badge{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.4rem .8rem;
  border-radius:20px;
  font-size:.75rem;
  font-weight:700;
  line-height:1;
  text-transform:uppercase;
  letter-spacing:.5px;
  background:var(--accent);
  color:#fff;
}
.badge--habitado{
  background:var(--success);
  color:#fff;
}
.badge--despoblado{
  background:var(--neutral);
  color:#fff;
}

/* Botón cargar más */
.vda-loadmore{
  text-align:center;
  margin:28px 0 8px;
  position:relative;
  z-index:1;
}
#vdaLoadMore.page-numbers{
  display:inline-flex;
  align-items:center;
  gap:12px;
  min-height:56px;
  padding:12px 22px;
  border-radius:12px;
  border:1px solid transparent;
  background:var(--cta-bg);
  color:var(--brand);
  font-weight:800;
  font-size:18px;
  line-height:1;
  cursor:pointer;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
  transition:transform .12s, box-shadow .2s, background .2s;
}
#vdaLoadMore.page-numbers::after{
  content:"↓";
  font-size:20px;
  transform:translateY(0);
  transition:transform .2s;
}
#vdaLoadMore.page-numbers:hover,
#vdaLoadMore.page-numbers:focus-visible{
  background:var(--cta-bg-hover);
  box-shadow:0 10px 22px rgba(0,0,0,.08);
}
#vdaLoadMore.page-numbers:hover::after,
#vdaLoadMore.page-numbers:focus-visible::after{
  transform:translateY(3px);
}
#vdaLoadMore[disabled]{
  opacity:.55;
  pointer-events:none;
}
#gridPueblos[data-auto="1"] + .vda-loadmore{
  display:none;
}
@media (max-width:640px){
  #vdaLoadMore.page-numbers{
    width:100%;
    justify-content:center;
  }
}

/* ---------- Single /pueblo/ ---------- */
/* Hero con fondo - z-index controlado */
.tpl-hero__grid{
  display:grid;
  grid-template-columns:minmax(0, 520px) 1fr;
  gap:20px;
  width:100%;
  position:relative;
  z-index:2;
}
@media (max-width:960px){
  .tpl-hero__grid{
    grid-template-columns:1fr;
  }
}

.tpl-hero__panel{
  background:rgba(15,90,100,.85);
  backdrop-filter:blur(10px);
  padding:40px 20px;
  border-radius:16px;
  box-shadow:0 20px 40px rgba(0,0,0,.30);
  border:1px solid rgba(255,255,255,.10);
  position:relative;
  z-index:3;
}
@media (min-width:992px){
  .tpl-hero__panel{
    padding:60px 20px 40px;
  }
}

.tpl-hero__title{
  font-size:clamp(32px, 4vw, 56px);
  line-height:1.05;
  margin:.2em 0;
  font-weight:800;
  text-shadow:2px 2px 4px rgba(0,0,0,.30);
  letter-spacing:0 !important;
  text-transform:none;
  color:#fff;
}
.tpl-hero__lead{
  font-size:20px;
  line-height:1.5;
  color:#FFFFFFDD;
  margin:0 0 2em;
  text-shadow:1px 1px 2px rgba(0,0,0,.20);
}
.tpl-hero__tags a{
  margin-right:8px;
}
.tpl-hero__icons{
  display:grid;
  gap:16px;
  margin:0 0 24px;
}
.tpl-iconbox{
  display:flex;
  gap:16px;
  align-items:flex-start;
  background:rgba(255,255,255,.10);
  padding:16px;
  border-radius:12px;
  backdrop-filter:blur(5px);
}
.tpl-icon{
  width:36px;
  height:36px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
  background:var(--accent);
  border-radius:10px;
  flex-shrink:0;
}

.tpl-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  height:44px;
  padding:0 20px;
  border-radius:12px;
  background:var(--brand);
  color:#fff;
  font-weight:700;
  border:2px solid var(--brand);
  transition:all .3s ease;
  text-decoration:none;
}
.tpl-btn:hover{
  background:var(--brand-light);
  border-color:var(--brand-light);
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(15,90,100,.25);
}

.pbl-bc{
  color:#FFFFFFAA;
  margin:0 0 16px;
  font-size:14px;
}
.pbl-bc a{
  color:#FFFFFFCC;
  text-decoration:none;
}
.pbl-bc a:hover{
  color:#FFFFFF;
}

.tpl-h2{
  font-size:47px;
  line-height:1.15;
  margin:0 0 .75em;
  color:var(--brand);
  font-weight:700;
}
@media (max-width:768px){
  .tpl-h2{
    font-size:38px;
  }
}

.tpl-rich p{
  font-size:17px;
  line-height:1.6;
  margin:0 0 1.65em;
  color:var(--text);
}

.tpl-link{
  color:var(--brand);
  text-decoration:none;
  border-bottom:2px dotted var(--brand);
  transition:.2s;
}
.tpl-link:hover{
  opacity:.85;
  border-bottom-style:solid;
}

.tpl-block{
  padding:80px 0;
  position:relative;
  z-index:1;
}
.tpl-block--historia{
  background:linear-gradient(to right, #f8fafa, #ffffff);
}
.tpl-block--quever{
  background:linear-gradient(to left, #f8fafa, #ffffff);
}
@media (max-width:640px){
  .tpl-block{
    padding:60px 0;
  }
}

/* Acordeón */
.tpl-accordion{
  display:grid;
  gap:16px;
}
.tpl-acc-item{
  border:2px solid var(--border);
  border-radius:16px;
  background:#fff;
  overflow:hidden;
  box-shadow:0 4px 12px rgba(15,90,100,.05);
  transition:.3s;
}
.tpl-acc-item:hover{
  border-color:var(--brand);
  box-shadow:0 8px 20px rgba(15,90,100,.10);
}
.tpl-acc-item[open]{
  border-color:var(--brand);
  box-shadow:0 8px 20px rgba(15,90,100,.15);
}
.tpl-acc-head{
  display:flex;
  align-items:center;
  gap:16px;
  padding:20px 24px;
  cursor:pointer;
  list-style:none;
  background:linear-gradient(135deg, #ffffff, #fafbfc);
  transition:.2s;
}
.tpl-acc-head::-webkit-details-marker{
  display:none;
}
.tpl-acc-item:hover .tpl-acc-head{
  background:linear-gradient(135deg, rgba(15,90,100,.02), rgba(15,90,100,.05));
}
.tpl-acc-num{
  width:48px;
  height:48px;
  border-radius:14px;
  background:var(--brand);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  font-size:18px;
  box-shadow:0 4px 8px rgba(15,90,100,.2);
}
.tpl-acc-title{
  font-weight:700;
  font-size:18px;
  color:var(--brand);
}
.tpl-acc-body{
  padding:0 24px 24px;
  color:var(--text);
  border-top:1px solid rgba(15,90,100,.1);
}
.tpl-acc-body p{
  margin:16px 0 0;
  line-height:1.6;
}

.tpl-block--galeria{
  padding-top:40px;
  padding-bottom:80px;
  background:#fafbfc;
}

/* ========== GALERÍA CON LIGHTBOX ========== */
.pueblo-gallery-grid, .tpl-gallery{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
  margin-top:40px;
  position:relative;
  z-index:1;
}
@media (max-width:980px){
  .pueblo-gallery-grid, .tpl-gallery{
    grid-template-columns:repeat(3,1fr);
  }
}
@media (max-width:640px){
  .pueblo-gallery-grid, .tpl-gallery{
    grid-template-columns:repeat(2,1fr);
  }
}
@media (max-width:480px){
  .pueblo-gallery-grid, .tpl-gallery{
    grid-template-columns:1fr;
  }
}

.gallery-item, .tpl-gitem{
  position:relative;
  overflow:hidden;
  border-radius:16px;
  aspect-ratio:1;
  cursor:pointer;
  transition:transform .3s ease, box-shadow .3s ease;
  z-index:1;
}
.gallery-item:hover, .tpl-gitem:hover{
  transform:translateY(-4px);
  box-shadow:0 15px 30px rgba(15,90,100,.2);
}

.gallery-link{
  display:block;
  width:100%;
  height:100%;
  position:relative;
  text-decoration:none;
}
.gallery-link img, .tpl-gitem img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:16px;
  transition:transform .3s ease;
}
.gallery-link:hover img, .tpl-gitem:hover img{
  transform:scale(1.05);
}

.gallery-overlay{
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:rgba(15,90,100,.8);
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  transition:opacity .3s ease;
  border-radius:16px;
}
.gallery-link:hover .gallery-overlay{
  opacity:1;
}
.gallery-zoom{
  color:#fff;
  font-size:24px;
  transform:scale(0.8);
  transition:transform .2s ease;
}
.gallery-link:hover .gallery-zoom{
  transform:scale(1);
}

/* ========== LIGHTBOX STYLES ========== */
.pueblo-lightbox{
  position:fixed;
  top:0;
  left:0;
  width:100vw;
  height:100vh;
  background:rgba(0,0,0,.95);
  z-index:9999; /* Alto solo para lightbox */
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  visibility:hidden;
  transition:opacity .3s ease, visibility .3s ease;
}
.pueblo-lightbox.active{
  opacity:1;
  visibility:visible;
}
.pueblo-lightbox-backdrop{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  cursor:pointer;
}
.pueblo-lightbox-content{
  position:relative;
  max-width:95vw;
  max-height:95vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  z-index:2;
}
.pueblo-lightbox-img{
  max-width:100%;
  max-height:calc(95vh - 120px);
  object-fit:contain;
  border-radius:12px;
  box-shadow:0 20px 60px rgba(0,0,0,.5);
  transition:opacity .3s ease;
}
.pueblo-lightbox-close{
  position:absolute;
  top:-50px;
  right:-10px;
  background:rgba(255,255,255,.1);
  border:none;
  color:#fff;
  font-size:32px;
  font-weight:bold;
  width:48px;
  height:48px;
  border-radius:50%;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background .2s ease;
  backdrop-filter:blur(10px);
}
.pueblo-lightbox-close:hover{
  background:rgba(255,255,255,.2);
}
.pueblo-lightbox-prev, .pueblo-lightbox-next{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  background:rgba(255,255,255,.1);
  border:none;
  color:#fff;
  font-size:28px;
  font-weight:bold;
  width:56px;
  height:56px;
  border-radius:50%;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:all .2s ease;
  backdrop-filter:blur(10px);
}
.pueblo-lightbox-prev{
  left:-80px;
}
.pueblo-lightbox-next{
  right:-80px;
}
.pueblo-lightbox-prev:hover, .pueblo-lightbox-next:hover{
  background:rgba(255,255,255,.2);
  transform:translateY(-50%) scale(1.1);
}
.pueblo-lightbox-counter{
  color:#fff;
  font-size:16px;
  font-weight:600;
  margin-top:20px;
  padding:8px 16px;
  background:rgba(0,0,0,.6);
  border-radius:20px;
  backdrop-filter:blur(10px);
}
.pueblo-lightbox-title{
  color:#fff;
  font-size:14px;
  margin-top:10px;
  text-align:center;
  max-width:600px;
  padding:0 20px;
  opacity:.8;
}

@media (max-width:768px){
  .pueblo-lightbox-prev{
    left:20px;
    width:48px;
    height:48px;
    font-size:24px;
  }
  .pueblo-lightbox-next{
    right:20px;
    width:48px;
    height:48px;
    font-size:24px;
  }
  .pueblo-lightbox-close{
    top:-40px;
    right:10px;
    width:40px;
    height:40px;
    font-size:24px;
  }
  .pueblo-lightbox-img{
    max-height:calc(95vh - 100px);
  }
}

/* ========== OVERRIDES PARA ELEMENTOR ========== */
.card-title, .card-title a, .elementor-post__title, .elementor-post__title a{
  letter-spacing:0 !important;
  text-transform:none !important;
}

/* ========== MOSTRAR CONTENIDO POR DEFECTO ========== */
.entry-title, .page-title {
  display: block !important; /* Restaurar títulos por defecto */
}

/* Solo ocultar en páginas con nuestro shortcode */
body.single-pueblo .entry-title,
body.post-type-archive-pueblo .entry-title,
body.post-type-archive-pueblo .page-title {
  display: none !important;
}

/* ========== FIXES PARA CONFLICTOS ========== */
/* Asegurar que la paginación normal no aparezca en nuestro grid */
.vda-grid + .nav-links,
.vda-grid + .pagination {
  display: none !important;
}

/* Panel verde del hero (1/3 del ancho) */
.vda-hero-box{
  background:#005153; color:#fff;
  width:min(560px, 33vw); max-width:560px;
  border-radius:16px; padding:28px 22px;
  box-shadow:0 20px 40px rgba(0,0,0,.30);
  border:1px solid rgba(255,255,255,.10);
}
#pueblo-hero .elementor-container,
#pueblo-hero .e-con{ align-items:center; }

/* Migas + título del hero */
.vda-hero-box .pbl-bc{display:flex;gap:8px;margin-bottom:8px;opacity:.95}
.vda-hero-box .pbl-bc a{color:#fff;text-decoration:none;border-bottom:1px solid transparent}
.vda-hero-box .pbl-bc a:hover{border-color:#fff}
.vda-hero-title{font-size:clamp(32px,4vw,56px);line-height:1.05;margin:.2em 0 .3em;font-weight:800;text-shadow:2px 2px 4px rgba(0,0,0,.3);letter-spacing:0}

/* KPIs (coords/altitud) */
.vda-kpis{display:grid;gap:14px;margin:0 0 18px}
.vda-kpi{display:flex;gap:12px;align-items:flex-start;background:rgba(255,255,255,.10);padding:12px 14px;border-radius:12px}
.vda-kpi__icon{width:36px;height:36px;display:flex;align-items:center;justify-content:center;font-size:20px;background:#D4A574;border-radius:10px;flex-shrink:0}
.vda-kpi__txt strong{display:block}
.vda-kpi__txt small{opacity:.9}

/* Botón maps */
.tpl-btn--map{background:#D4A574;border-color:#D4A574}
.tpl-btn--map:hover{filter:brightness(.95)}

/* H2 de secciones + H3 dentro de historia */
.tpl-h2{font-size:47px;line-height:1.15;margin:0 0 .75em;color:var(--brand);font-weight:700}
@media (max-width:768px){.tpl-h2{font-size:38px}}
.tpl-rich h3{font-size:22px;line-height:1.3;margin-top:1.2em;color:var(--brand);font-weight:700}

/* === Hotfix hero colores (panel verde) ===================== */
#pueblo-hero .vda-hero-box { color:#fff; }
#pueblo-hero .vda-hero-box .vda-hero-title,
#pueblo-hero .vda-hero-box h1.vda-hero-title,
#pueblo-hero .elementor-widget-shortcode .vda-hero-title{
  color:#fff !important;   /* título del pueblo en blanco */
}

/* Migas dentro del panel en blanco */
#pueblo-hero .vda-hero-box .pbl-bc a{ color:#fff !important; border-bottom-color:transparent; }
#pueblo-hero .vda-hero-box .pbl-bc a:hover{ border-bottom-color:#fff; }

/* Iconos de KPIs (coords/altitud) con fondo verde */
#pueblo-hero .vda-kpi__icon{
  background:#A3BD31 !important;  /* verde solicitado */
  color:#005153;                   /* contraste sobre el verde */
}

/* Botón "Ver en Google Maps" en verde */
#pueblo-hero .tpl-btn--map{
  background:#A3BD31 !important;
  border-color:#A3BD31 !important;
  color:#005153 !important;        /* puedes cambiar a #fff si prefieres texto blanco */
}
#pueblo-hero .tpl-btn--map:hover{
  filter:brightness(.95);
}