/* ════════════════════════════════════════════════════════════════════════
   TRIXEL — servicios.css
   Página índice de Servicios (reutiliza .plans-hero y .services-grid) y
   las páginas de detalle de cada servicio: bloques, lista de "incluye" con
   checks, pasos numerados y bloque CTA. Reutiliza variables de base.css.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Contenedor de detalle (mismo borde izquierdo que el hero) ───────────── */
.svc-detail {
  display: flex;
  flex-direction: column;
  gap: var(--sp-9);
}
.svc-detail__block { max-width: 72ch; }

/* ── Bloque "¿En qué consiste?": texto a la izquierda + card flotante a la
   derecha. La card se posiciona en absoluto para NO reservar altura en el
   flujo, de modo que "¿Qué incluye?", "¿Cómo trabajamos?" y la CTA suban. */
.svc-detail__intro {
  position: relative;
  max-width: none;
}
.svc-detail__intro .svc-detail__text {
  max-width: 60ch;
  width: 58%;
}

/* Card blanca: flota en la columna derecha, subida a la altura del título de
   la página (vive en el hero). Al ser absoluta, no empuja las secciones de
   abajo. */
.svc-plancard {
  position: absolute;
  top: -300px;
  right: 0;
  width: 39%;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: 0 6px 20px rgba(20, 18, 28, 0.12);
  overflow: hidden;
}
.svc-plancard__media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--c-mist);
}
.svc-plancard__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.svc-plancard__body { padding: var(--sp-6); }
.svc-plancard__label {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-logo-cyan);
  margin: 0 0 var(--sp-2);
}
.svc-plancard__title {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--c-text);
  margin: 0 0 var(--sp-3);
}
.svc-plancard__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.svc-plancard__item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--c-text-soft);
  line-height: 1.45;
}
.svc-plancard__check {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--c-cyan);
  color: var(--c-white);
  display: grid;
  place-items: center;
}
.svc-plancard__check svg { width: 11px; height: 11px; }
.svc-plancard__note {
  margin: var(--sp-5) 0 0;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--c-border);
  font-size: var(--fs-xs);
  color: var(--c-text-dim);
  line-height: 1.5;
}

@media (max-width: 860px) {
  .svc-detail__intro .svc-detail__text { width: 100%; }
  .svc-plancard {
    position: static;
    width: 100%;
    margin-top: var(--sp-6);
  }
}

/* ── Imagen decorativa (chica) a la derecha de "¿Cómo trabajamos?",
   pegada por su borde inferior al borde superior del CTA azul de abajo. ─── */
.svc-detail__how { position: relative; }
.svc-detail__how .svc-steps { width: 58%; }   /* dejar libre la mitad derecha */
.svc-how-img {
  position: absolute;
  right: 80px;
  /* Sube la imagen dentro del bloque "¿Cómo trabajamos?". */
  bottom: 270px;
  width: 260px;
  max-width: 34%;
  height: auto;
  display: block;
  pointer-events: none;
}
@media (max-width: 860px) {
  .svc-detail__how .svc-steps { width: 100%; }
  .svc-how-img { display: none; }   /* en móvil no hay espacio; se oculta */
}

/* Migaja "← Servicios" arriba del título */
.svc-detail__eyebrow {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-sm);
  font-weight: 600;
}
.svc-detail__eyebrow a {
  color: var(--c-violet-dark);
  text-decoration: none;
}
.svc-detail__eyebrow a:hover { color: var(--c-violet); }

/* Subtítulos de sección dentro del detalle */
.svc-detail__h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-xl);
  letter-spacing: -0.02em;
  color: var(--c-text);
  margin: 0 0 var(--sp-4);
  padding-bottom: var(--sp-3);
  border-bottom: 2px solid var(--c-violet);
  display: inline-block;
}
.svc-detail__p {
  color: var(--c-text-soft);
  font-size: var(--fs-md);
  line-height: 1.7;
  margin: 0 0 var(--sp-4);
}
.svc-detail__p:last-child { margin-bottom: 0; }

/* ── Lista "¿Qué incluye?" con checks cian ──────────────────────────────── */
.svc-detail__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-3) var(--sp-6);
  max-width: none;
}
.svc-detail__item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  color: var(--c-text);
  font-size: var(--fs-md);
  line-height: 1.5;
}
.svc-detail__check {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--c-violet);
  color: var(--c-white);
  display: grid;
  place-items: center;
  margin-top: 1px;
}
.svc-detail__check svg { width: 15px; height: 15px; }
/* Equis para "Olvídate de todo esto": círculo grafito (denota lo que evitas). */
.svc-detail__cross { background: var(--c-graphite); }

/* ── Pasos "¿Cómo trabajamos?" (numerados) ──────────────────────────────── */
.svc-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-5) var(--sp-6);
}
.svc-step {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
}
.svc-step__n {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--c-graphite);
  color: var(--c-white);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-lg);
  display: grid;
  place-items: center;
}
.svc-step:nth-child(odd) .svc-step__n { background: var(--c-violet); }
.svc-step__t {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-md);
  color: var(--c-text);
  margin: 4px 0 var(--sp-1);
}
.svc-step__d {
  color: var(--c-text-soft);
  font-size: var(--fs-sm);
  line-height: 1.6;
  margin: 0;
}

/* ── Bloque CTA final ────────────────────────────────────────────────────── */
.svc-cta {
  background: var(--c-graphite);
  border-radius: var(--r-lg);
  padding: var(--sp-8);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
  flex-wrap: wrap;
}
.svc-cta__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-xl);
  color: var(--c-white);
  margin: 0 0 var(--sp-2);
}
.svc-cta__sub {
  color: rgba(255, 255, 255, 0.78);
  font-size: var(--fs-md);
  margin: 0;
  max-width: 52ch;
}
.svc-cta__actions {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
}
/* Botón "Ver planes y precios": cian sólido para que resalte sobre el grafito. */
.svc-cta .btn--ghost {
  background: var(--c-cyan);
  border-color: var(--c-cyan);
  color: var(--c-white);
}
.svc-cta .btn--ghost:hover {
  background: var(--c-cyan-dark);
  border-color: var(--c-cyan-dark);
  color: var(--c-white);
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .svc-detail__list { grid-template-columns: 1fr; }
  .svc-steps { grid-template-columns: 1fr; }
  .svc-cta { flex-direction: column; align-items: flex-start; }
  .svc-cta__actions { width: 100%; }
  .svc-cta__actions .btn { flex: 1 1 auto; text-align: center; justify-content: center; }
}