/* =========================
   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 / links básicos */
.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;
}
.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;
}
.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 (con overlay)
   ========================= */
.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;
}

/* HERO AcercaDe: sustituimos la imagen con WEBP responsive
   (no hace falta tocar el HTML) */
.thermo-hero{ background-image: url('../../Img/AcercaDe/Portada-960.webp') !important; }
@media (min-width: 768px){
  .thermo-hero{ background-image: url('../../Img/AcercaDe/Portada-1600.webp') !important; }
}
@media (min-width: 1200px){
  .thermo-hero{ background-image: url('../../Img/AcercaDe/Portada-2000.webp') !important; }
}
@media (min-width: 1600px){
  .thermo-hero{ background-image: url('../../Img/AcercaDe/Portada-2400.webp') !important; }
}

/* =========================
   FEATURES (iconos de “servicios”)
   ========================= */
/* Tarjeta */
.feat-card{
  display:flex; flex-direction:column; align-items:center; gap:.6rem;
  max-width: 280px; margin-inline:auto;
}
.feat-title{
  font-weight:700; color:var(--bs-primary);
  font-size:.95rem; margin-top:.25rem;
}

/* Contenedor circular con UN único aro exterior (los aros internos van en el WEBP) */
.feat-icon-wrap{
  width:120px; aspect-ratio:1; border-radius:50%;
  display:grid; place-items:center; background:#fff;
  box-shadow:0 0 0 6px var(--bs-primary); /* aro exterior */
}
@media (max-width: 991.98px){
  .feat-icon-wrap{ width:140px; }
}

/* Imagen WEBP centrada, sin bordes */
.feat-icon{
  width:68%; height:auto; display:block; object-fit:contain;
  border:0; background:transparent;
}

/* Carrusel móvil: flechas + indicadores */
#aboutFeaturesCarousel{ --feat-gutter: 3rem; }
@media (max-width:360px){ #aboutFeaturesCarousel{ --feat-gutter: 3.2rem; } }
#aboutFeaturesCarousel .carousel-control-prev,
#aboutFeaturesCarousel .carousel-control-next{
  width: var(--feat-gutter) !important; opacity:.95; z-index:3;
}
#aboutFeaturesCarousel .carousel-item{
  padding-left: var(--feat-gutter) !important;
  padding-right: var(--feat-gutter) !important;
}
#aboutFeaturesCarousel .carousel-control-prev-icon,
#aboutFeaturesCarousel .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);
}
#aboutFeaturesCarousel .carousel-indicators{
  position: static; margin-top:.75rem; gap:.4rem;
}
#aboutFeaturesCarousel .carousel-indicators [data-bs-target]{
  width:10px; height:10px; border-radius:50%;
  background: rgba(var(--bs-success-rgb), .35); opacity:1; border:0;
}
#aboutFeaturesCarousel .carousel-indicators .active{
  background: rgba(var(--bs-success-rgb), .95);
}

/* =========================
   QUIÉNES SOMOS — texto
   ========================= */
.qs-text p{ margin-bottom:1rem; color:#222; }
.qs-text p:last-child{ margin-bottom:0; }

/* =========================
   NUESTRO EQUIPO (grid + carrusel)
   ========================= */
.team-card{
  width: clamp(180px, 28vw, 220px);
  aspect-ratio: 1;
  margin: 0 auto 10px;
  border-radius: 50%;
  overflow: hidden;
  background:#fff;
  box-shadow: 0 0 0 4px var(--bs-primary), 0 8px 22px rgba(0,0,0,.08);
}
.team-photo{
  width:100%; height:100%;
  object-fit: cover; display:block;
}
.team-name{ font-weight:700; margin-top:.25rem; }
.team-role{ font-size:.95rem; }

/* Carrusel móvil del equipo */
.team-slide{ max-width: 320px; margin-inline:auto; }
#equipoCarousel{ --team-gutter: 3rem; }
@media (max-width:360px){ #equipoCarousel{ --team-gutter: 3.2rem; } }
#equipoCarousel .carousel-item{
  padding-left: var(--team-gutter) !important;
  padding-right: var(--team-gutter) !important;
}
#equipoCarousel .carousel-control-prev,
#equipoCarousel .carousel-control-next{
  width: var(--team-gutter) !important; opacity:.95; z-index:3;
}
#equipoCarousel .carousel-control-prev-icon,
#equipoCarousel .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);
}
#equipoCarousel .carousel-indicators{
  position: static; margin-top:.75rem; gap:.4rem;
}
#equipoCarousel .carousel-indicators [data-bs-target]{
  width:10px; height:10px; border-radius:50%;
  background: rgba(var(--bs-success-rgb), .35); opacity:1; border:0;
}
#equipoCarousel .carousel-indicators .active{
  background: rgba(var(--bs-success-rgb), .95);
}

/* =========================
   FOOTER
   ========================= */
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;
}
/* =============== ACERCA DE — Features: 1 solo aro externo =============== */
:root{
  /* diámetro total del icono + aro (desktop) y grosor del aro */
  --feat-ring-size: 120px;
  --feat-ring-stroke: 4px;
}
/* en móvil/tablet los hacías un poco mayores como en Inicio */
@media (max-width: 991.98px){
  :root{ --feat-ring-size: 140px; }
}

/* tarjeta centrada */
.feat-card{
  max-width: 260px;
  margin-inline: auto;
  text-align: center;
}

/* contenedor circular con UN aro exterior que “abraza” el icono */
.feat-icon-wrap{
  /* el contenido mide el icono; el borde añade el aro por fuera */
  width: calc(var(--feat-ring-size) - 2 * var(--feat-ring-stroke));
  height: calc(var(--feat-ring-size) - 2 * var(--feat-ring-stroke));
  box-sizing: content-box;               /* MUY IMPORTANTE para que el borde no reduzca el icono */
  border: var(--feat-ring-stroke) solid var(--bs-primary);  /* único aro externo */
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #fff;
  margin: 0 auto 10px;
  position: relative;
}

/* quitamos cualquier aro extra previo */
.feat-icon-wrap::before,
.feat-icon-wrap::after{ content: none !important; }

/* el pictograma (.webp) centrado y redondo, sin bordes propios */
.feat-icon{
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: block;
  object-fit: contain;                   /* no deforma; respeta el arte con su aro interior “pintado” */
  background: transparent;
  border: 0;
}

/* título más pequeño como en la home */
.feat-title{
  margin-top: .25rem;
  font-weight: 700;
  font-size: .9rem;
  color: var(--bs-primary);
}
[hidden] { display: none !important; }