/* ============================================================
   COMPARATIVA — "Comparación entre la app y la versión web".
   Anatomy unlike siblings: NO table. A head-to-head "cara a cara"
   board — each aspect is a centred kicker over a two-up duel
   (app value vs versión web value) split by an ember axis. The
   app side reads strong, the web side muted. The three table
   headers appear once, verbatim, in the legend.
   ============================================================ */

.comparativa {
  border-top: 1px solid var(--rule);
  padding-block: var(--rhythm);
}
.comparativa__head { max-width: 50ch; }
.comparativa__head h2 { margin-top: 1rem; }
.comparativa__head .standfirst { margin-top: 1rem; }

.versus { margin-top: clamp(32px, 4vw, 56px); }

/* legend — names the two sides + the aspect column, once */
.versus__legend {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding-bottom: 0.85rem;
  border-bottom: 2px solid var(--ember-line);
  font-family: var(--display);
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.versus__legend .app { color: var(--ember); font-weight: 600; }
.versus__legend .aspecto { color: var(--ink-faint); letter-spacing: 0.3em; }
.versus__legend .web { color: var(--ink-faint); }

/* matchup row */
.versus__row {
  padding: clamp(1.3rem, 2.4vw, 1.9rem) 0;
  border-top: 1px solid var(--rule);
}
.versus__row:first-of-type { border-top: 0; }

.versus__aspect {
  display: flex;
  align-items: center;
  gap: 1.2ch;
  margin: 0 0 0.9rem;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(0.92rem, 1.4vw, 1.08rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
}
.versus__aspect::before,
.versus__aspect::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--rule);
}

.versus__pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.versus__pair p { margin: 0; line-height: 1.45; }
.versus__app {
  padding-right: clamp(1.2rem, 3vw, 3rem);
  color: var(--ink);
  font-size: clamp(1rem, 1.4vw, 1.18rem);
}
.versus__web {
  padding-left: clamp(1.2rem, 3vw, 3rem);
  border-left: 1px solid var(--ember-line);
  color: var(--ink-faint);
  font-size: clamp(0.96rem, 1.3vw, 1.1rem);
}

/* coda + CTA */
.comparativa__coda {
  margin-top: clamp(26px, 3.2vw, 44px);
  max-width: 64ch;
  color: var(--ink-soft);
}
.comparativa .ticket { margin-top: 1.8rem; }

/* ===== mobile ===== */
@media (max-width: 880px) {
  .comparativa__head { max-width: none; }
  .comparativa__coda { max-width: none; }
}
@media (max-width: 480px) {
  .versus__aspect { letter-spacing: 0.1em; }
  .versus__app { padding-right: 0.9rem; }
  .versus__web { padding-left: 0.9rem; }
  .comparativa .ticket { width: 100%; justify-content: center; }
}