/* ==========================================================================
   Página /servicio/ — estilos propios (prefijo .svc-)
   Solo layout y detalles de esta página. Los primitivos .mk-* y los
   componentes compartidos viven en el core (mockups.css / components.css).
   ========================================================================== */

/* ---- Hero compacto ------------------------------------------------------ */
.svc-hero {
  padding-block: clamp(44px, 6.5vw, 84px) clamp(36px, 5vw, 64px);
  position: relative;
}
.svc-hero .breadcrumb { margin-bottom: clamp(20px, 3vw, 30px); }
.svc-hero__head { max-width: 780px; display: grid; gap: 20px; justify-items: start; }
.svc-hero__sub {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: .08em;
}
.svc-hero__index {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-top: clamp(26px, 3.6vw, 40px);
}
.svc-hero__index .pill {
  font-family: var(--font-mono);
  letter-spacing: .06em;
  transition: border-color var(--t) var(--ease), color var(--t) var(--ease), transform var(--t-fast) var(--ease);
}
.svc-hero__index .pill:hover {
  border-color: var(--line-brand);
  color: var(--brand);
  transform: translateY(-2px);
}

/* ---- Filas copy + mockup (bloques 01-04) -------------------------------- */
.svc-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(34px, 6vw, 84px);
  align-items: center;
}
.svc-row__copy { min-width: 0; }
.svc-row__copy .checklist { margin-top: 2px; }
.svc-row__visual { position: relative; min-width: 0; }

@media (min-width: 901px) {
  .svc-row--rev .svc-row__copy { order: 2; }
  .svc-row--rev .svc-row__visual { order: 1; }
}
@media (max-width: 900px) {
  .svc-row { grid-template-columns: 1fr; gap: 36px; }
}

/* Toast flotante sobre el dashboard de Ads (bloque 03) */
.svc-notify {
  position: absolute;
  right: 14px;
  bottom: -18px;
  width: min(330px, calc(100% - 28px));
  z-index: 3;
  pointer-events: none;
}
@media (max-width: 640px) {
  .svc-notify { right: 8px; bottom: -14px; }
}

/* Chip "selector de mes" del mockup del portal (bloque 04) */
.svc-mkmonth {
  display: inline-flex; align-items: center; gap: 8px;
  width: max-content; max-width: 100%;
  padding: 6px 12px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: .05em;
  color: var(--ink-soft);
}
.svc-mkmonth i { font-style: normal; color: var(--brand); }

/* ---- Timeline del primer mes (bloque 05) --------------------------------- */
.svc-timeline { position: relative; margin-top: clamp(26px, 4vw, 44px); }
.svc-timeline::before {
  content: "";
  position: absolute;
  left: 7px; top: 12px; bottom: 12px;
  width: 2px;
  background: linear-gradient(180deg, var(--brand), rgba(46, 232, 105, .12));
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 1.5s var(--ease-out) .15s;
}
.svc-timeline.is-drawn::before { transform: scaleY(1); }

.svc-timeline__list { display: grid; gap: 32px; }
.svc-timeline__step { position: relative; padding-left: 38px; }
.svc-timeline__dot {
  position: absolute; left: 0; top: 3px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--bg-deep);
  border: 2px solid var(--brand);
  box-shadow: 0 0 12px rgba(46, 232, 105, .45);
}
.svc-timeline__week {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-mono);
  font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--brand);
}
.svc-timeline__title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.08rem;
  color: var(--ink);
}
.svc-timeline__step p {
  margin-top: 8px;
  font-size: var(--fs-sm);
  color: var(--ink-soft);
  max-width: 46ch;
}

@media (min-width: 901px) {
  .svc-timeline::before {
    left: 8px; right: 8px; top: 7px; bottom: auto;
    width: auto; height: 2px;
    background: linear-gradient(90deg, var(--brand), rgba(46, 232, 105, .12));
    transform: scaleX(0);
    transform-origin: left;
  }
  .svc-timeline.is-drawn::before { transform: scaleX(1); }
  .svc-timeline__list { grid-template-columns: repeat(4, 1fr); gap: 30px; }
  .svc-timeline__step { padding-left: 0; padding-top: 38px; }
  .svc-timeline__dot { top: 0; left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .svc-timeline::before { transform: none; transition: none; }
}

/* ---- Tabla comparativa de planes (bloque 06) ------------------------------ */
.svc-tablewrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.svc-table { min-width: 720px; }
.svc-table thead th { vertical-align: bottom; padding-top: 26px; }
.svc-table th:first-child,
.svc-table td:first-child {
  position: sticky; left: 0; z-index: 1;
  background: var(--bg-elev);
  min-width: 200px;
  box-shadow: 1px 0 0 var(--line);
}
.svc-table__what { white-space: nowrap; }
.svc-table__feat {
  font-family: var(--font-body);
  font-weight: 500; font-size: var(--fs-sm);
  letter-spacing: 0; text-transform: none;
  color: var(--ink-soft);
  text-align: left;
}
.svc-table__plan { display: grid; gap: 6px; justify-items: start; min-width: 150px; }
.svc-table__plan-name {
  font-weight: 700; font-size: .95rem;
  letter-spacing: 0; text-transform: none;
  color: var(--ink);
}
.svc-table__price {
  font-family: var(--font-display);
  font-size: 1.4rem; line-height: 1;
  letter-spacing: 0;
  color: var(--ink);
}
.svc-table__per {
  font-size: var(--fs-xs); font-weight: 500;
  letter-spacing: 0; text-transform: none;
  color: var(--ink-mute);
}
.svc-table__flag {
  display: inline-flex;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  background: var(--brand);
  color: var(--brand-ink);
  font-size: .62rem; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase;
}
.svc-table .is-hot { background: rgba(46, 232, 105, .055); }
.svc-table thead th.is-hot { border-bottom: 1px solid var(--line-brand); }
.svc-table thead th.is-hot .svc-table__price { color: var(--brand); }
.svc-table td.svc-table__cell { text-align: center; }
.svc-table__check { display: inline-flex; color: var(--brand); }
.svc-table__check .dts-ico { width: 19px; height: 19px; }
.svc-table__no { color: var(--ink-mute); }
.svc-table tfoot td {
  padding: 18px 14px 24px;
  text-align: center;
  border-bottom: 0;
}
.svc-table tfoot .btn { white-space: nowrap; }

.svc-plan-notes {
  display: grid; gap: 8px; justify-items: start;
  margin-top: 20px;
  font-size: var(--fs-xs);
  color: var(--ink-mute);
  max-width: 720px;
}
.svc-plan-notes .btn--link { margin-top: 4px; }

/* ---- FAQ ------------------------------------------------------------------ */
.svc-faq { display: grid; }

/* ---- Cierre / CTA ----------------------------------------------------------- */
.svc-final__grid {
  display: grid;
  grid-template-columns: 1.5fr auto;
  gap: clamp(26px, 4.5vw, 60px);
  align-items: center;
}
.svc-final__grid .cta-band__actions { justify-content: flex-end; }
@media (max-width: 860px) {
  .svc-final__grid { grid-template-columns: 1fr; }
  .svc-final__grid .cta-band__actions { justify-content: flex-start; }
}
@media (max-width: 480px) {
  .svc-final__grid .cta-band__actions { flex-direction: column; align-items: stretch; }
}