/* ===== Servicios — Búho Digital (extiende index.css) ===== */

/* Hero compacto */
.hero-slim{
  padding-top:7rem;
  padding-bottom:2rem;
}
.badge-geo{
  background:rgba(255,255,255,.06);
  border:1px solid var(--line);
  border-radius:999px;
  padding:.45rem .8rem;
  color:var(--muted);
  font-weight:600;
}

/* Tarjetas de servicio */
.svc-card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  height:100%;
  transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.svc-card:hover{
  transform:translateY(-2px);
  border-color:color-mix(in oklab, var(--owl) 45%, var(--line) 55%);
  box-shadow:0 14px 40px rgba(0,0,0,.45);
}
.svc-title{
  margin:0;
  font-size:1.12rem;
  font-weight:800;
  font-family:Poppins, Inter, system-ui;
}
.svc-desc{
  color:var(--muted);
  margin:.25rem 0 .5rem;
}
.svc-list{
  color:var(--muted);
  margin:0 0 0 1rem;
  padding:0;
  list-style: disc;
}
.svc-list li{ margin:.25rem 0; }
.svc-list li::marker{ color:var(--owl); }

/* Badge tipo “app icon” */
.svc-badge{
  width:110px; height:110px;
  border-radius:22px;
  display:grid; place-items:center;
  background:
    radial-gradient(120% 120% at 80% 20%, #ffb36b 0%, #ff6d6d 35%, #ff62bd 55%, #b154ff 70%, #5aa9ff 85%, #53e0cf 100%);
  box-shadow: 0 8px 24px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.25);
  border:1px solid rgba(255,255,255,.08);
}
.svc-badge span{
  font: 800 36px/1 Poppins, Inter, system-ui;
  color:#fff;
  letter-spacing:.5px;
  text-shadow:0 2px 10px rgba(0,0,0,.25);
}

/* Subtítulo pequeño encima del h3 */
.section-kicker{
  color:var(--muted);
  margin:0 0 .15rem;
  font-weight:600;
  font-size:.88rem;
}

/* CTA final */
.cta-card{
  background:linear-gradient(180deg, rgba(122,162,255,.12), rgba(255,209,102,.10));
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

/* Reveal reutilizando tu patrón */
.svc-card.reveal{ opacity:0; transform:translateY(16px); }
.svc-card.reveal.show{ opacity:1; transform:none; transition:opacity .5s ease, transform .5s ease; }

/* Accesibilidad y focus */
.svc-card:focus-within{
  outline:3px solid color-mix(in oklab, var(--owl) 55%, white 0%);
  outline-offset:2px;
}

/* Responsive finos */
@media (max-width: 575.98px){
  .svc-badge{ width:96px; height:96px; border-radius:20px; }
  .svc-badge span{ font-size:32px; }
}
@media (min-width: 992px){
  .hero-slim{ padding-bottom:2.5rem; }
}
