/* =========================
   PALETA Y BASE DE TEMA
   ========================= */
:root{
  --bs-primary:#3fabcb;        /* azul marca */
  --bs-primary-rgb:63,171,203;
  --bs-success:#90b03f;        /* verde marca */
  --bs-success-rgb:144,176,63;
}

/* Botones y links (consistente con el resto) */
.btn-primary{
  --bs-btn-color:#fff; --bs-btn-bg:#3fabcb; --bs-btn-border-color:#3fabcb;
  --bs-btn-hover-color:#fff; --bs-btn-hover-bg:#3899b7; --bs-btn-hover-border-color:#3591ac;
  --bs-btn-focus-shadow-rgb:63,171,203;
  --bs-btn-active-color:#fff; --bs-btn-active-bg:#3288a2; --bs-btn-active-border-color:#2f8199;
  --bs-btn-disabled-color:#fff; --bs-btn-disabled-bg:#3fabcb; --bs-btn-disabled-border-color:#3fabcb;
}
.btn-outline-primary{
  --bs-btn-color:#3fabcb; --bs-btn-border-color:#3fabcb;
  --bs-btn-hover-color:#fff; --bs-btn-hover-bg:#3fabcb; --bs-btn-hover-border-color:#3fabcb;
  --bs-btn-focus-shadow-rgb:63,171,203;
  --bs-btn-active-color:#fff; --bs-btn-active-bg:#3fabcb; --bs-btn-active-border-color:#3fabcb;
  --bs-btn-disabled-color:#3fabcb; --bs-btn-disabled-bg:transparent; --bs-btn-disabled-border-color:#3fabcb;
}
.btn-success{
  --bs-btn-color:#fff; --bs-btn-bg:#90b03f; --bs-btn-border-color:#90b03f;
  --bs-btn-hover-color:#fff; --bs-btn-hover-bg:#829e39; --bs-btn-hover-border-color:#7a9535;
  --bs-btn-focus-shadow-rgb:144,176,63;
  --bs-btn-active-color:#fff; --bs-btn-active-bg:#738e33; --bs-btn-active-border-color:#6c8630;
}
.link-primary{ color:#3fabcb!important; }
.link-primary:hover,.link-primary:focus{ color:#3591ac!important; }
.link-success{ color:#90b03f!important; }
.link-success:hover,.link-success:focus{ color:#829e39!important; }

/* Navbar hover verde */
.navbar .nav-link{ color:#212529; transition: color .15s ease; }
.navbar .nav-link:hover, .navbar .nav-link:focus{ color:var(--bs-success)!important; }
.navbar .dropdown-menu .dropdown-item:hover,
.navbar .dropdown-menu .dropdown-item:focus{
  color:#fff; background-color:var(--bs-success);
}

/* Utilidades */
.object-fit-cover{ object-fit:cover; }
html, body{ overflow-x:hidden; }

/* =========================
   HERO (centrado real + margen)
   ========================= */
.thermo-hero{
  position: relative;
  background: center/cover no-repeat var(--hero-img);
  min-height: clamp(520px, 70vh, 840px);
  padding-block: clamp(56px, 10vh, 96px);
  display:flex; align-items:center; justify-content:center; text-align:center;
}
.thermo-hero::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(0deg, rgba(0,0,0,.35), rgba(0,0,0,.35)); z-index:0;
}
.thermo-hero > .container{ position:relative; z-index:1; max-width:980px; }
.hero-title{ font-size: clamp(2rem, 6vw, 3.25rem); }
.hero-sub{
  font-size: clamp(.95rem, 2.1vw, 1.05rem);
  line-height:1.35; max-width:980px;
  background: rgba(0,0,0,.35);
  border-radius:.65rem; padding:.6rem .9rem; margin-top:.75rem;
}

/* =========================
   ENTRADILLA
   ========================= */
.lead-quote{
  font-style: italic; color:#333; max-width:980px; line-height:1.5;
  margin-left:auto; margin-right:auto;
}

/* =========================
   GALERÍA (#galeriaObra)
   Centrada entre flechas + marco verde (móvil y desktop)
   ========================= */
#galeriaObra{
  /* gutter = ancho de zona clicable de flechas y padding lateral del slide */
  --gal-gutter: 3rem; /* base móvil/tablet */
}
@media (max-width: 360px){
  #galeriaObra{ --gal-gutter: 3.2rem; }
}
@media (min-width: 992px){
  #galeriaObra{ --gal-gutter: 4rem; } /* un poco más en desktop */
}

/* Flechas: ancho clicable = gutter */
#galeriaObra .carousel-control-prev,
#galeriaObra .carousel-control-next{
  width: var(--gal-gutter) !important;
}

/* Slides: padding lateral = gutter (contenido exactamente entre flechas) */
#galeriaObra .carousel-item{
  padding-left:  var(--gal-gutter) !important;
  padding-right: var(--gal-gutter) !important;
}

/* Marco verde en la imagen */
#galeriaObra .galeria-frame{
  width: 100%;
  aspect-ratio: 21/9;               /* desktop */
  border: 3px solid var(--bs-success);
  border-radius: .6rem;
  background: #fff;                  /* evita parpadeo al cargar */
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
  overflow: hidden;
  margin: 0 auto;                    /* centra dentro del slide */
}
/* Móvil: 16:9 */
@media (max-width: 767.98px){
  #galeriaObra .galeria-frame{ aspect-ratio: 16/9; }
}

#galeriaObra .galeria-img{
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
}

/* Flechas redondas translúcidas (estilo 360) */
#galeriaObra .carousel-control-prev-icon,
#galeriaObra .carousel-control-next-icon{
  width: 2.1rem; height: 2.1rem;
  border-radius: 50%;
  background-color: rgba(0,0,0,.35);
  background-size: 60% 60%;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
}

/* Indicadores verdes translúcidos */
#galeriaObra .carousel-indicators{
  position: static; margin-top: .75rem; gap: .4rem;
}
#galeriaObra .carousel-indicators [data-bs-target]{
  width:10px; height:10px; border-radius:50%;
  background: rgba(var(--bs-success-rgb), .35); opacity:1; border:0;
}
#galeriaObra .carousel-indicators .active{
  background: rgba(var(--bs-success-rgb), .95);
}

/* =========================
   A QUIÉN VA DIRIGIDO
   - Slider móvil centrado entre flechas (sin círculos)
   - Grid escritorio con logos “a pelo”
   ========================= */

/* Slider móvil: mismo patrón de centrado entre flechas */
#audienciasCarousel{ --aud-gutter: 3rem; }
@media (max-width: 360px){
  #audienciasCarousel{ --aud-gutter: 3.2rem; }
}
#audienciasCarousel .carousel-control-prev,
#audienciasCarousel .carousel-control-next{
  width: var(--aud-gutter) !important;
}
#audienciasCarousel .carousel-item{
  padding-left:  var(--aud-gutter) !important;
  padding-right: var(--aud-gutter) !important;
}

/* Tarjeta del slide sin caja */
.aud-card{
  background: transparent;
  border: 0; box-shadow: none;
  padding: .75rem 0;
  margin: 0; /* el padding del slide ya crea el “pasillo” */
  text-align: center;
}

/* Contenedor del logo: sin círculo ni aro, centrado */
.aud-icon-wrap{
  width: auto;
  height: clamp(88px, 16vw, 120px);  /* tamaño visual como .logo-item */
  margin: 0 auto .6rem;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: 0; border-radius: 0; box-shadow: none;
  overflow: visible;
}

/* Imagen del logo proporcional */
.aud-icon{
  display: block;
  width: auto; height: auto;
  max-width: 90%;
  max-height: 100%;
  object-fit: contain;
}

/* Título bajo el logo */
.aud-title{
  font-weight: 700;
  letter-spacing: .2px;
  color: #1f2937;
}

/* Indicadores verdes translúcidos en este slider */
#audienciasCarousel .carousel-indicators{
  position: static; margin-top: .75rem; gap: .4rem;
}
#audienciasCarousel .carousel-indicators [data-bs-target]{
  width:10px; height:10px; border-radius:50%;
  background: rgba(var(--bs-success-rgb), .35); opacity:1; border:0;
}
#audienciasCarousel .carousel-indicators .active{
  background: rgba(var(--bs-success-rgb), .95);
}

/* =========================
   CTA con imagen de fondo
   ========================= */
.cta-hero{ position:relative; background-position:center; background-size:cover; background-repeat:no-repeat; }
@media (min-width:992px){
  .cta-hero{ min-height:clamp(480px,42vw,720px); display:flex; align-items:center; }
}
@media (max-width:991.98px){ .cta-hero{ padding:2rem 0 2.5rem; } }
.cta-card{
  border:2px solid var(--bs-success);
  background:rgba(248,249,250,.88);
  backdrop-filter:saturate(110%) blur(2px);
  border-radius:.5rem;
}

/* =========================
   FOOTER — hover gris elegante
   ========================= */
footer.bg-success a.link-dark.text-decoration-none{
  color: rgba(0,0,0,.82) !important;
  padding: .15rem .4rem; border-radius: .35rem;
  transition: color .15s ease, background-color .15s ease;
}
footer.bg-success a.link-dark.text-decoration-none:hover,
footer.bg-success a.link-dark.text-decoration-none:focus{
  color: rgba(0,0,0,.98) !important; background-color: rgba(0,0,0,.06);
}
footer.bg-success .btn-outline-dark{
  transition: color .15s ease, border-color .15s ease, background-color .15s ease, transform .15s ease;
}
footer.bg-success .btn-outline-dark:hover,
footer.bg-success .btn-outline-dark:focus{
  background-color: rgba(0,0,0,.08); border-color: rgba(0,0,0,.55); color:#000; transform: translateY(-1px);
}
footer.bg-success a:focus-visible{
  outline: 2px solid rgba(0,0,0,.45); outline-offset: 2px; border-radius: .35rem;
}
/* === A QUIÉN VA DIRIGIDO — flechas visibles y centradas en MÓVIL === */
/* Usa el mismo gutter para centrar el contenido entre flechas */
#audienciasCarousel{ --aud-gutter: 3rem; }
@media (max-width: 360px){
  #audienciasCarousel{ --aud-gutter: 3.2rem; }
}

/* El área clicable de las flechas = gutter, con más opacidad y z-index alto */
#audienciasCarousel .carousel-control-prev,
#audienciasCarousel .carousel-control-next{
  width: var(--aud-gutter) !important;
  opacity: .95;                 /* más visibles en móvil */
  z-index: 3;                   /* por encima de logos/imágenes */
}

/* Iconos de flecha: círculo translúcido + sombra (mantiene el SVG por defecto) */
#audienciasCarousel .carousel-control-prev-icon,
#audienciasCarousel .carousel-control-next-icon{
  width: 2.1rem; height: 2.1rem;
  border-radius: 50%;
  background-color: rgba(0,0,0,.35);         /* “píldora” oscura */
  background-size: 60% 60%;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
}

/* El slide respeta el “pasillo” de las flechas (contenido centrado entre ellas) */
#audienciasCarousel .carousel-item{
  padding-left:  var(--aud-gutter) !important;
  padding-right: var(--aud-gutter) !important;
}

/* Indicadores verdes translúcidos (refuerzo por si otro estilo los pisa) */
#audienciasCarousel .carousel-indicators{
  position: static; margin-top: .75rem; gap: .4rem;
}
#audienciasCarousel .carousel-indicators [data-bs-target]{
  width:10px; height:10px; border-radius:50%;
  background: rgba(var(--bs-success-rgb), .35); opacity:1; border:0;
}
#audienciasCarousel .carousel-indicators .active{
  background: rgba(var(--bs-success-rgb), .95);
}
/* === HERO Seguimiento de Obras: background responsive (.webp) === */
/* móvil por defecto: ya ponemos la 960 en el inline (var --hero-img) */
@media (min-width: 768px){
  .thermo-hero{
    background-image: url('../../Img/SeguimientoDeObras/portada-1600.webp') !important;
  }
}
@media (min-width: 1200px){
  .thermo-hero{
    background-image: url('../../Img/SeguimientoDeObras/portada-2000.webp') !important;
  }
}
@media (min-width: 1600px){
  .thermo-hero{
    background-image: url('../../Img/SeguimientoDeObras/portada-2400.webp') !important;
  }
}

/* === Galería: contenedor con ratio y cover para las imágenes === */
.galeria-frame{
  border-radius: .5rem;
  overflow: hidden;
  /* si no tienes ya un ratio, te dejo este 16:9 que funciona bien con las tomas */
  aspect-ratio: 16 / 9;
}
.galeria-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* === Iconos: tamaño consistente en grid y carrusel === */
.aud-icon-wrap{
  width: 120px;
  max-width: 40vw; /* en móvil no crecerá más del 40% del viewport */
  margin-inline: auto;
}
.aud-icon{
  width: 100%;
  height: auto;
  display: block;
}