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

/* Botones (override Bootstrap con tus colores) */
.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;
  --bs-btn-disabled-color:#fff; --bs-btn-disabled-bg:#90b03f; --bs-btn-disabled-border-color:#90b03f;
}

/* Links (paleta de marca) */
.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 (marca) y sin verdes fijos */
.navbar .nav-link{ color:#212529; transition: color .15s ease; }
.navbar .nav-link:hover,
.navbar .nav-link:focus{ color: var(--bs-success) !important; }
/* Por si algún enlace aún lleva .text-success en el HTML */
.navbar .nav-link.text-success{ color:#212529 !important; }
.navbar .nav-link.text-success:hover{ color: var(--bs-success) !important; }
/* Dropdown con hover a tu verde */
.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 TÉRMICO (centrado real + margen)
   ========================= */
.thermo-hero{
  position: relative;

  /* NO usar var(--hero-img). Definimos solo estos tres: */
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;

  /* altura + separación superior/inferior */
  min-height: clamp(520px, 70vh, 840px);
  padding-block: clamp(56px, 10vh, 96px);

  /* centrado perfecto del contenido */
  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;
}
/* Título, subtítulo y botón centrados */
.thermo-hero .hero-title,
.thermo-hero .hero-sub{ margin-left:auto; margin-right:auto; }
.thermo-hero .hero-cta{ display:inline-block; margin-left:auto; margin-right:auto; }

/* Tipografías del hero */
.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;
}

/* === HERO Termografías: background responsive (.webp) === */
/* móvil por defecto */
.thermo-hero{
  background-image: url('../../Img/TERMOGRAFIAS/plantaPortada-960.webp') !important;
}
/* tablet */
@media (min-width: 768px){
  .thermo-hero{
    background-image: url('../../Img/TERMOGRAFIAS/plantaPortada-1600.webp') !important;
  }
}
/* desktop */
@media (min-width: 1200px){
  .thermo-hero{
    background-image: url('../../Img/TERMOGRAFIAS/plantaPortada-2000.webp') !important;
  }
}
/* pantallas grandes */
@media (min-width: 1600px){
  .thermo-hero{
    background-image: url('../../Img/TERMOGRAFIAS/plantaPortada-2400.webp') !important;
  }
}

/* =========================
   CTA / APPINSPECTOR
   ========================= */
.inspector-link{ display:inline-block; }
.inspector-logo{
  max-width: 240px !important;
  width: 100% !important;
  height: auto;
  border-radius: .35rem;
  box-shadow: 0 6px 16px rgba(0,0,0,.18);
  transition: transform .15s ease, box-shadow .15s ease;
}
.inspector-link:hover .inspector-logo,
.inspector-link:focus .inspector-logo{
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(0,0,0,.22);
}
@media (max-width: 575.98px){
  .inspector-logo{ max-width: 200px !important; }
}

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

/* =========================
   CARRUSEL SERVICIOS (Termografías) — Móvil / Tablet
   ========================= */
@media (max-width: 991.98px){
  #serviciosTermoCarousel{ background: transparent; }

  /* Pasillo lateral para que las flechas no pisen el contenido */
  #serviciosTermoCarousel .carousel-control-prev,
  #serviciosTermoCarousel .carousel-control-next{
    width: 2.6rem;
  }

  /* Tarjeta centrada */
  #serviciosTermoCarousel .svc-card{
    background:#f8f9fa; color:#212529;
    border:2px solid var(--bs-success);
    border-radius:.5rem;
    padding:1rem;
    margin: 0 2.9rem;
  }

  #serviciosTermoCarousel .svc-title{
    font-size:1.1rem; letter-spacing:.2px; margin-bottom:.5rem;
    text-align:center;
  }
  #serviciosTermoCarousel .svc-img-wrap{ border-radius:.5rem; overflow:hidden; }
  #serviciosTermoCarousel .svc-img{
    width:100%; height:100%;
    object-fit:cover;
    object-position:center;
    display:block;
  }

  #serviciosTermoCarousel .svc-toggle{ font-size:.9rem; }
  #serviciosTermoCarousel .svc-text{ font-size:.95rem; line-height:1.35; }

  /* Flechas redondas */
  #serviciosTermoCarousel .carousel-control-prev-icon,
  #serviciosTermoCarousel .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);
  }
}
@media (max-width:360px){
  #serviciosTermoCarousel .svc-card{ margin:0 3.2rem; }
}

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

/* Fuerza el color del botón Ver/Ocultar a tu verde */
#serviciosTermoCarousel .svc-toggle.btn{
  --bs-btn-color: var(--bs-success);
  --bs-btn-border-color: var(--bs-success);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bs-success);
  --bs-btn-hover-border-color: var(--bs-success);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: color-mix(in srgb, var(--bs-success) 85%, #000 15%);
  --bs-btn-active-border-color: color-mix(in srgb, var(--bs-success) 85%, #000 15%);
}

/* =========================
   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;
}