/* === Tema / colores === */
.sl-theme{
  --sl-green: #a7c138;
  --sl-green-dark:#7a9a22;
  --sl-green-edge:#a7c13855;
  --sl-green-active:#99AD00;   /* color activo */
  --sl-text:#1b1b1b;
  --sl-white:#fff;
}

/* === NAV superior === */
.sl-nav{
  display:grid;
  grid-template-columns: repeat(auto-fill,minmax(200px,1fr));
  gap:10px 12px;
  margin:10px 0 18px;
}
.sl-nav-pill{
  border:1.5px solid var(--sl-green);
  background:#fff;
  color:#566;
  border-radius:999px;
  padding:8px 12px;
  line-height:1.1;
  font-size:14px;
  cursor:pointer;
  transition:all .2s ease;
}
.sl-nav-pill:hover{ box-shadow:0 0 0 3px var(--sl-green-edge); }

/* ACTIVO */
.sl-nav-pill.active{
  background:var(--sl-green-active);
  border-color:var(--sl-green-active);
  color:#fff;
  box-shadow:none;
}

/* === Sección servicio === */
.sl-item{ margin:24px 0 36px; }
.sl-hero{
  position:relative;
  height: 260px;
  border-radius:12px;
  overflow:hidden;
  background-size:cover;
  background-position:center;
}
.sl-hero::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.35) 100%);
}
.sl-hero-title{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:800; letter-spacing:.06em;
  font-size:28px; text-align:center; padding:0 12px;
  text-transform:uppercase;
  z-index:1;
}

/* Píldora (badge) — 40% cerrada / 100% abierta */
.sl-badge{
  margin:10px 0 8px;
  background:var(--sl-green);
  color:#fff;
  border:0; border-radius:999px;
  padding:10px 16px;
  font-weight:700; cursor:pointer;
  display:flex; align-items:center; gap:10px;
  position:relative;
  width:40%;
  transition:width .25s ease;
}
.sl-item.is-open .sl-badge{ width:100%; }

.sl-caret{
  width:18px;height:18px;display:inline-block;
  border-right:3px solid #fff;border-bottom:3px solid #fff;
  transform:rotate(45deg);
  transition:transform .2s ease;
}
.sl-item.is-open .sl-caret{ transform:rotate(-135deg); }

/* Panel de contenido */
.sl-panel{ display:none; }
.sl-item.is-open .sl-panel{ display:block; }
.sl-panel-inner{
  background:#fff;
  border:1px solid #e6ebda;
  border-radius:16px;
  padding:18px;
  box-shadow:0 2px 10px rgba(0,0,0,.04);
}
.sl-content p{ margin:.7rem 0; color:var(--sl-text); }
.sl-cta{
  display:inline-block;
  background:var(--sl-green);
  color:#fff; text-decoration:none;
  border-radius:999px; padding:10px 16px;
  font-weight:700;
}
.sl-cta:hover{ background:var(--sl-green-dark); }

/* Responsive opcional: píldora 100% en móviles */
/*
@media (max-width: 640px){
  .sl-badge{ width:100%; }
}
*/

@media (min-width:980px){
  .sl-hero{ height:300px; }
  .sl-hero-title{ font-size:34px; }
}