/* ==========================================================================
   servicios.css — Estilos propios de la página /servicios.
   Se carga DESPUÉS de la cascada base (variables→responsive) y solo añade lo
   que no existe ya en components.css. Reutiliza tokens de variables.css.
   ========================================================================== */

/* ----- Fondos de sección con gradiente (sobre .section--dark) ----- */
.section--grad-quiz { background: var(--g-quiz); }
.section--grad-cta  { background: var(--g-cta); }

/* Cabecera de sección con símbolo (→ / ★) en lugar de número */
.sec-head__num--sym { font-size: 16px; }

/* ----- Tipografía de títulos (helpers de página) ----- */
.h2-lg { font-size: var(--fs-h2-lg); line-height: 1.08; margin: 0; max-width: 22ch; }
.section--light h2 em, .section--alt h2 em { color: var(--c-teal); }
.contact__title em { color: var(--c-teal-200); }

/* ============================ HERO (servicios) ============================ */
.hero__eyebrow-dots { display: inline-flex; align-items: center; gap: 5px; }
.hero__strip--svc { gap: 16px 26px; }
.hero__strip--svc .hero__strip-item {
  display: inline-flex; align-items: center; gap: 9px; font-weight: 500;
}

/* ============================ 01 · DIAGNÓSTICO ============================ */
.diag-head {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(24px, 4vw, 56px); align-items: end;
  margin-bottom: clamp(40px, 5vw, 64px);
}
.diag-head__title { font-size: var(--fs-h2-lg); line-height: 1.07; margin: 0; }
.diag-head__title em { color: var(--c-teal); }
.diag-head__lead { font-size: var(--fs-lead-sm); line-height: 1.6; color: var(--c-ink-body); margin: 0; }

/* La triada decorativa de las area-card del diagnóstico va arriba a la derecha */
.area-card__deco--top { right: -12px; top: -10px; bottom: auto; width: 92px; height: 92px; }

/* El informe: tres capas (Hallazgos → Análisis → Propuesta) */
.informe {
  margin-top: clamp(48px, 6vw, 80px);
  background: var(--c-cream-card); border: 1px solid var(--c-border);
  border-radius: var(--r-lg); padding: clamp(28px, 4vw, 48px);
}
.informe__eyebrow {
  display: flex; align-items: center; gap: 13px; margin: 0 0 10px;
  font-size: 12.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--c-muted-2);
}
.informe__title { font-size: clamp(1.5rem, 1.2rem + .9vw, 1.9rem); line-height: 1.12; margin: 0 0 6px; }
.informe__lead { color: var(--c-ink-body); font-size: 1.02rem; line-height: 1.55; margin: 0 0 30px; max-width: 62ch; }
.paso-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px; }
.paso-card { background: var(--c-white); border: 1px solid var(--c-border); border-radius: var(--r-md); padding: 26px 24px; }
.paso-card__num { font-family: var(--font-serif); font-weight: 600; font-size: 14px; color: var(--c-teal); }
.paso-card__title { font-size: 1.3rem; margin: 6px 0 9px; }
.paso-card__text { color: var(--c-ink-body); font-size: .95rem; line-height: 1.55; margin: 0; }
.paso-card__text strong { color: var(--c-ink); font-weight: 600; }

/* ============================ PROYECCIONES (escenarios) ============================ */
.proyecciones__title { font-size: var(--fs-h2); line-height: 1.08; margin: 0; max-width: 20ch; color: #fff; }
.proyecciones__lead { font-size: var(--fs-lead-sm); line-height: 1.6; color: var(--c-on-dark-soft); margin: 18px 0 0; max-width: 60ch; }

.scenario__tabs {
  display: inline-flex; gap: 6px; margin: 30px 0 26px; padding: 6px;
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); border-radius: var(--r-pill);
}
.scenario__tab {
  border: 0; cursor: pointer; font-family: inherit; font-weight: 600; font-size: 14px;
  padding: 10px 20px; border-radius: 24px; background: transparent; color: rgba(234, 229, 216, .7);
  transition: background .2s ease, color .2s ease;
}
.scenario__tab.is-active { background: var(--g-teal); color: #fff; }
.scenario__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px; }

.proj-card {
  background: var(--g-card); border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 18px; padding: 28px 26px 30px;
  border-top: 3px solid var(--accent, var(--c-tec)); transition: border-color .35s ease;
}
.proj-card__top { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; }
.proj-card__month { font-family: var(--font-serif); font-weight: 600; font-size: 2.4rem; line-height: 1; color: var(--accent, var(--c-tec)); transition: color .35s ease; }
.proj-card__unit { font-weight: 600; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .5); }
.proj-card__title { font-family: var(--font-serif); font-weight: 600; font-size: 1.22rem; color: #fff; margin: 0 0 8px; line-height: 1.2; }
.proj-card__text { color: rgba(234, 229, 216, .78); font-size: .95rem; line-height: 1.55; margin: 0; }

/* Mini auto-diagnóstico dentro de la sección de proyecciones */
.proy-quiz { margin-top: clamp(56px, 7vw, 90px); }
.proy-quiz .quiz__lead { max-width: 48ch; }
.quiz__dot { flex: none; width: 8px; height: 8px; border-radius: 50%; }

/* ============================ 02 · SERVICIOS (acordeón) ============================ */
.oferta__lead { font-size: var(--fs-lead-sm); line-height: 1.6; color: var(--c-ink-body); margin: 0 0 clamp(40px, 5vw, 60px); max-width: 58ch; }
.svc__kicker { display: block; font-weight: 600; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 5px; }
.svc--teal .svc__kicker { color: var(--c-teal); }
.svc--tec  .svc__kicker { color: var(--c-tec-ink); }
.svc--ven  .svc__kicker { color: #26757c; }
.svc--fin  .svc__kicker { color: #4d8568; }
.svc--teal .svc__ico { background: rgba(28, 122, 130, .12); }
.svc__body { padding: 0 clamp(20px, 2.4vw, 28px) clamp(24px, 2.6vw, 30px) clamp(86px, 9vw, 86px); }
.svc__text { color: var(--c-ink-body); font-size: 1.02rem; line-height: 1.6; margin: 0 0 18px; max-width: 64ch; }
.svc__taglist { display: flex; flex-wrap: wrap; gap: 9px; }
.chip--teal { background: rgba(28, 122, 130, .10); color: var(--c-teal-700); }

/* ============================ 03 · PROCESO (4 pasos) ============================ */
.pgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.pstep {
  position: relative; background: var(--c-white); border: 1px solid var(--c-border);
  border-radius: 18px; padding: 30px 26px 32px; overflow: hidden;
  transition: transform .3s ease, box-shadow .3s ease;
}
.pstep:hover { transform: translateY(-6px); box-shadow: var(--sh-card-strong); }
.pstep__wm { position: absolute; top: -8px; right: 14px; font-family: var(--font-serif); font-weight: 700; font-size: 6rem; line-height: 1; color: rgba(28, 122, 130, .06); pointer-events: none; }
.pstep__ico { position: relative; margin-bottom: 16px; }
.pstep__title { position: relative; font-size: 1.3rem; margin: 0 0 8px; }
.pstep__text { position: relative; color: var(--c-ink-body); font-size: .95rem; line-height: 1.55; margin: 0; }

/* ============================ 04 · CONFIANZA ============================ */
.confianza__title { font-size: var(--fs-h2-lg); line-height: 1.08; margin: 0 0 clamp(36px, 5vw, 56px); max-width: 18ch; color: #fff; }
.finance--svc { margin-top: 26px; }
/* Etiquetas de partner como texto (no logos cortos): fuente más contenida */
.finance__logo--label { font-size: 15px; font-weight: 700; letter-spacing: .02em; height: 46px; padding: 0 22px; }
/* En /servicios la franja es más compacta que en la home: el logo baja a 46px
   (calza con la altura de las píldoras de texto de esta página). */
.finance--svc .finance__logo-img { height: 46px; padding: 8px 16px; }

/* ============================ 05 · FAQ (tarjetas) ============================ */
.transp { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 30px; }
.transp-card { background: var(--c-cream-card); border: 1px solid var(--c-border); border-radius: var(--r-md); padding: 24px 26px; }
.transp-card__k { font-weight: 600; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--c-teal); }
.transp-card__h { font-family: var(--font-serif); font-weight: 600; font-size: 1.25rem; color: var(--c-ink); line-height: 1.25; margin: 8px 0 0; }
.transp-card__p { margin: 6px 0 0; color: var(--c-ink-body); font-size: .93rem; line-height: 1.5; }

.faq--cards { gap: 12px; }
.faq--cards .faq__item { border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-cream-card); overflow: hidden; }
.faq--cards .faq__item:last-child { border-bottom: 1px solid var(--c-border); }
.faq--cards .faq__q { padding: 22px 26px; }
.faq--cards .faq__q-text { font-size: 1.15rem; font-weight: 600; }
.faq--cards .faq__a { padding: 0 60px 24px 26px; margin: 0; }

/* ============================ Ajustes responsive propios ============================ */
@media (max-width: 820px) {
  .diag-head { align-items: start; }
}
@media (max-width: 560px) {
  .scenario__tabs { width: 100%; }
  .scenario__tab { flex: 1; text-align: center; padding: 10px 12px; }
  .pstep__wm { font-size: 5rem; }
}