/* =========================================================
   NÚMEROS FINOS · Página de Servicios
   Recuadros desplegables por segmento (misma estética que la Home).
   Reutiliza los tokens de styles.css y el acordeón de main.js
   (clases .faq__item / .faq__q / .faq__a).
   ========================================================= */

/* -------- Encabezado de página -------- */
.page-head { padding: 3.2rem 0 1rem; position: relative; overflow: hidden; background: #fff; }
.page-head .section__sub { margin-top: 1.1rem; }

/* -------- Lista de servicios (recuadros) -------- */
.svc-list { display: grid; gap: 1.1rem; max-width: 880px; margin: 2.6rem auto 0; }

.svc {
  background: #fff; border: 1px solid var(--gris-claro); border-radius: var(--radius);
  overflow: hidden; transition: box-shadow .18s ease, border-color .18s ease;
}
.svc:hover { box-shadow: 0 10px 30px rgba(2, 2, 1, .06); }
.svc.open { border-color: var(--azul); box-shadow: 0 16px 44px rgba(2, 2, 1, .09); }

/* cabecera clickeable (override de .faq__q para que sea un recuadro, no una línea) */
.svc .svc__head {
  padding: 1.5rem 3.4rem 1.5rem 1.6rem;
  font-family: var(--ff-txt); font-weight: 400;
}
/* el <h2> envuelve al <button> (HTML válido); neutralizamos los estilos globales de h2 */
.svc__hgroup { margin: 0; font: inherit; text-transform: none; letter-spacing: normal; }

.svc__k {
  display: block; font-family: var(--ff-mono); font-size: .72rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--azul); margin-bottom: .5rem;
}
.svc__title {
  display: block; font-family: var(--ff-tit); text-transform: uppercase; font-weight: 700;
  line-height: 1.04; font-size: clamp(1.25rem, 3.4vw, 1.7rem); color: var(--negro);
}
.svc__sub { display: block; color: var(--gris); font-size: .96rem; margin-top: .55rem; max-width: 62ch; }

/* etiqueta "especialidad" (Balances) */
.svc__tag {
  display: inline-block; font-family: var(--ff-mono); font-size: .66rem; letter-spacing: .08em;
  text-transform: uppercase; background: var(--azul); color: #fff;
  padding: .28rem .6rem; border-radius: 999px; margin-bottom: .8rem;
}

/* toggle +/- (reposiciona el de .faq__q para la cabecera multilínea) */
.svc .faq__q::after { top: 1.7rem; right: 1.4rem; transform: none; }
.svc.open .faq__q::after { transform: none; }

/* -------- Cuerpo desplegable -------- */
.svc .faq__a p { padding: 0; max-width: none; }   /* resetea el estilo heredado de la FAQ */
.svc__body { padding: 0 1.6rem 1.8rem; }
.svc__body > p { color: var(--gris); margin-bottom: 1.1rem; max-width: 66ch; }

.svc__lead-in { font-family: var(--ff-txt); font-weight: 700; color: var(--negro) !important; margin-bottom: .7rem !important; }
.svc__list { list-style: none; display: grid; gap: .6rem; margin: 0 0 1.5rem; }
.svc__list li { position: relative; padding-left: 1.9rem; font-size: .97rem; color: var(--negro); }
.svc__list li::before {
  content: ""; position: absolute; left: 0; top: .15em;
  width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--azul);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/70% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/70% no-repeat;
}

/* nota de honestidad de marca (Balances) */
.svc__note {
  font-family: var(--ff-mono); font-size: .82rem; color: var(--gris);
  background: var(--gris-claro); border-radius: 10px; padding: .9rem 1rem;
  margin-bottom: 1.5rem !important; line-height: 1.5;
}

/* CTA por servicio */
.svc__cta { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.1rem; }
.svc__micro { font-family: var(--ff-mono); font-size: .76rem; color: var(--gris); margin: 0 !important; }

/* ícono del recuadro (misma familia de línea que los destacados de Instagram) */
.svc__icon { width: 48px; height: 48px; color: var(--azul); margin-bottom: 1.1rem; display: block; }
.svc__icon svg { width: 100%; height: 100%; display: block; }

/* --- Bloque B2B (para colegas) --- */
.b2b-grid { display: grid; gap: 1.25rem; margin-top: 2.6rem; }
.b2b-card__cta { margin-top: 1.2rem; }
@media (min-width: 700px) { .b2b-grid { grid-template-columns: repeat(2, 1fr); } }

/* --- Precio del servicio + aclaracion fina (2026-07-16) --- */
.svc__fine { font-style: italic; color: var(--gris); font-weight: 400; }
.svc__price {
  margin-top: 1.1rem;
  text-align: right;
  font-family: var(--ff-mono);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--azul);
}
.svc__price small { font-size: .72em; color: var(--gris); font-weight: 400; }