/* ==========================================================================
   VERSUS — componentes de página
   Se carga después de system.css, que aporta tokens, cabecera, pie y
   movimiento. Aquí solo van los bloques propios de cada página.
   ========================================================================== */

* { box-sizing: border-box; }

html { -webkit-font-smoothing: antialiased; scroll-behavior: smooth; scroll-padding-top: 40px; }

body {
  margin: 0;
  background: var(--vs-bg);
  font-family: var(--vs-text);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.55;
  color: var(--vs-ink);
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
ul { margin: 0; padding: 0; list-style: none; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

/* Regla del sistema: todo titular en Awesome Serif ExtraTall Thin. */
h1, h2, h3, h4, .display {
  font-family: var(--vs-display);
  font-weight: 100;
  margin: 0;
  line-height: 1.06;
  letter-spacing: -0.005em;
  color: var(--vs-ink);
}

.wrap {
  width: 100%;
  max-width: var(--vs-container);
  margin: 0 auto;
  padding: 0 var(--vs-gutter);
}
.wrap--wide { max-width: 1420px; }
.section { padding: var(--vs-section) 0; }
.section--tight { padding: clamp(44px, 6vw, 82px) 0; }

.label {
  font-family: var(--vs-text);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--vs-accent);
  margin: 0 0 14px;
}
.small { font-size: 13px; line-height: 1.5; }
.muted { color: var(--vs-muted); }
.center { text-align: center; }

/* --- listas con "+" del sitio original --- */
.plus li {
  position: relative;
  padding-left: 20px;
  font-size: 13px;
  line-height: 1.5;
}
.plus li + li { margin-top: 9px; }
.plus li::before {
  content: "+";
  position: absolute;
  left: 0; top: 0;
  color: var(--vs-accent);
}
.plus--sub { margin: 9px 0 0 20px; }

.minus li {
  position: relative;
  padding-left: 20px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--vs-muted);
}
.minus li + li { margin-top: 8px; }
.minus li::before {
  content: "";
  position: absolute;
  left: 1px; top: 11px;
  width: 9px; height: 1px;
  background: currentColor;
}

/* ------------------------------------------------------------- BOTONES --- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 54px;
  padding: 0 30px;
  border: 0;
  border-radius: var(--vs-r-btn);
  font-family: var(--vs-text);
  font-weight: 300;
  font-size: 14px;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.28s ease, color 0.28s ease, transform 0.28s var(--vs-ease);
}
.btn svg { width: 16px; height: 16px; flex: none; transition: transform 0.28s var(--vs-ease); }
.btn:hover { transform: translateY(-2px); }
.btn:hover svg { transform: translateX(5px); }

.btn--green { background: var(--vs-green); color: #fff; }
.btn--green:hover { background: #35452f; }
.btn--dark  { background: var(--vs-dark); color: #fff; }
.btn--dark:hover { background: #3d3d2e; }
.btn--light { background: #fff; color: #000; }
.btn--light:hover { background: var(--vs-sand); }
.btn--ghost { background: none; color: var(--vs-ink); box-shadow: inset 0 0 0 1px var(--vs-line); }
.btn--ghost:hover { background: var(--vs-ink); color: #fff; }
.btn--block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: 10px; }
.btn-row--center { justify-content: center; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  padding: 0 15px 0 8px;
  border-radius: var(--vs-r-badge);
  background: var(--vs-blue);
  font-size: 14px;
  line-height: 1;
  color: #000;
}
.badge img { width: 18px; height: 18px; }

.hidden-label {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ==========================================================================
   HÉROE DE PÁGINA  (About us / Services, como en el sitio original:
   titular grande alineado a la izquierda, en arena)
   ========================================================================== */

.page-hero { padding: clamp(46px, 6vw, 92px) 0 clamp(30px, 4vw, 56px); }
.page-hero__title {
  font-size: clamp(56px, 10.8vw, 155px);
  line-height: 0.98;
  color: var(--vs-sand);
}
.page-hero--center { text-align: center; }
.page-hero__sub {
  max-width: 660px;
  margin-top: clamp(22px, 2.6vw, 32px);
  font-size: clamp(15px, 1.3vw, 18px);
  line-height: 1.55;
}
.page-hero--center .page-hero__sub { margin-left: auto; margin-right: auto; }

/* ==========================================================================
   ABOUT US
   ========================================================================== */

/* fila: foto + tarjeta "Somos" + tarjeta "Queremos" */
/* Proporción medida sobre la referencia (la foto ocupa 45% del ancho y las
   dos tarjetas se reparten el resto a partes iguales): 45 : 27.5 : 27.5,
   es decir 1.64 : 1 : 1. */
.about-row {
  display: grid;
  grid-template-columns: 1.64fr 1fr 1fr;
  gap: 26px;
  align-items: stretch;
}
/* Envoltorio sin altura intrínseca: saca la <img> del cálculo de alto de la
   fila del grid. Sin esto, la relación de aspecto real del archivo
   (1376x2560, muy vertical) dominaba el alto de toda la fila por debajo de
   la altura de las tarjetas, sin importar cuánto se redujera su padding. */
.about-photo-wrap {
  position: relative;
  min-height: 400px;
  overflow: hidden;
  border-radius: var(--vs-r-card-lg);
}
.about-photo {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.about-card {
  /* Tono propio de estas tarjetas (no es uno de los 8 de la home): gris
     azulado medido en la referencia de CONTENIDO, #c3c8ca. */
  padding: clamp(36px, 4vw, 56px);
  background: #c3c8ca;
  border-radius: var(--vs-r-card-lg);
}
.about-card > h2 { font-size: clamp(38px, 4vw, 56px); margin-bottom: clamp(22px, 2.4vw, 32px); }
.about-item + .about-item { margin-top: clamp(22px, 2.4vw, 30px); }
.about-item svg { width: 20px; height: 20px; display: block; margin-bottom: 8px; color: var(--vs-green); }
.about-item h3 { font-size: clamp(21px, 2vw, 25px); margin-bottom: 6px; }
.about-item p { font-size: 13px; line-height: 1.5; margin: 0; }

/* declaración grande */
.statement {
  font-size: clamp(32px, 5.6vw, 75px);
  line-height: 1.14;
  color: var(--vs-sand);
}

/* banda de pasos sobre fotografía */
.steps-band {
  position: relative;
  border-radius: clamp(56px, 7vw, 100px);
  overflow: hidden;
  padding: clamp(44px, 7vw, 100px) clamp(34px, 6vw, 80px);
}
.steps-band__bg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}
.steps-band__card {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(22px, 2.8vw, 44px);
  padding: clamp(36px, 5vw, 70px);
  background: var(--vs-cream);
  border-radius: clamp(48px, 6vw, 85px);
}
.step__icon { width: 17px; height: auto; margin-bottom: 22px; opacity: 0.75; }
.step h3 { font-size: clamp(24px, 2.2vw, 30px); margin-bottom: 14px; }
.step h4 {
  font-family: var(--vs-text);
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 12px;
}
.step p { font-size: 13px; line-height: 1.5; }
.step .plus { margin-top: 16px; }
.step .plus li { font-size: 13px; }

/* ==========================================================================
   SERVICIOS
   ========================================================================== */

/* pestañas de zona, arriba del titular */
.zone-tabs { display: flex; justify-content: center; gap: 8px; margin-bottom: clamp(30px, 4vw, 54px); }
.zone-tabs a {
  padding: 11px 18px;
  border-radius: 8px;
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--vs-ink);
  text-decoration: none;
  transition: background-color 0.26s ease;
}
.zone-tabs a[aria-current="true"] { background: var(--vs-sand); }
.zone-tabs a:hover { background: rgba(207, 198, 184, 0.45); }

.zone-dash { width: 22px; height: 1px; background: #000; margin: clamp(24px, 3vw, 38px) auto; }

.zone-title {
  text-align: center;
  font-size: clamp(60px, 11vw, 156px);
  line-height: 1;
  color: var(--vs-sand);
}
.zone-sub {
  text-align: center;
  font-size: clamp(28px, 3.6vw, 40px);
  margin-top: clamp(26px, 3vw, 44px);
}

.benefits {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 20px);
  margin-top: clamp(30px, 3.4vw, 50px);
}
.benefit { text-align: center; }
.benefit svg { width: 52px; height: 52px; margin: 0 auto 20px; display: block; color: var(--vs-ink); }
.benefit p { font-size: 14px; line-height: 1.45; margin: 0; }

/* bloque de servicio: foto a sangre + texto, alternando lado.
   align-items:stretch (no "center"): en la referencia la foto ocupa TODO el
   alto del bloque de texto de su servicio, por eso llega hasta el botón
   "Solicitar cotización". Con "center" y una imagen de proporción fija, la
   foto quedaba centrada dentro de una columna de texto larga y aparecía muy
   más abajo del título, sin relación con "Servicio 2/3". */
.svc {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(30px, 4vw, 80px);
  align-items: stretch;
}
.svc + .svc { margin-top: clamp(56px, 8vw, 130px); }
/* En la referencia la fotografía llega al borde de la página y solo redondea
   la esquina interior. El margen negativo la saca del contenedor.
   El envoltorio (sin alto propio) es el mismo truco que en about-photo-wrap:
   saca la <img> del cálculo de alto del grid, para que sea el TEXTO quien
   decida el alto de la fila y la foto solo se estire a igualarlo. */
.svc__photo-wrap {
  position: relative;
  min-height: 420px;
  overflow: hidden;
  width: calc(100% + var(--vs-gutter) + (100vw - min(100vw, var(--vs-container))) / 2);
}
.svc__photo {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.svc:not(.svc--flip) .svc__photo-wrap {
  margin-left: calc(-1 * (var(--vs-gutter) + (100vw - min(100vw, var(--vs-container))) / 2));
  border-radius: 0 clamp(56px, 8vw, 100px) clamp(56px, 8vw, 100px) 0;
}
.svc--flip .svc__photo-wrap {
  margin-right: calc(-1 * (var(--vs-gutter) + (100vw - min(100vw, var(--vs-container))) / 2));
  border-radius: clamp(56px, 8vw, 100px) 0 0 clamp(56px, 8vw, 100px);
  justify-self: end;
}
.svc__label { font-size: 12px; color: var(--vs-ink); margin: 0 0 14px; }
.svc__title { font-size: clamp(34px, 3.8vw, 52px); margin-bottom: 22px; }
.svc__body p { font-size: 14px; line-height: 1.6; }
.svc__inc { font-size: clamp(24px, 2.2vw, 30px); margin: clamp(26px, 3vw, 38px) 0 18px; }

/* tabla inversión / duración */
.facts {
  margin-top: clamp(28px, 3vw, 40px);
  border-radius: 25px;
  overflow: hidden;
}
.facts__head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--vs-cream);
}
.facts__head > div {
  padding: 18px 20px;
  text-align: center;
  font-family: var(--vs-display);
  font-weight: 300;
  font-size: clamp(20px, 2.6vw, 30px);
  line-height: 1.15;
}
.facts__head > div + div { border-left: 1px solid rgba(0, 0, 0, 0.14); }
.facts__body { display: grid; grid-template-columns: 1fr 1fr; }
.facts__body > div { padding: 30px; font-size: 13px; line-height: 1.5; }
.facts__body > div + div { border-left: 1px solid var(--vs-line); }
.facts b { font-weight: 500; }
.facts .price { font-family: var(--vs-display); font-weight: 300; font-size: clamp(22px, 2vw, 28px); line-height: 1.1; display: block; margin-bottom: 6px; }

/* ==========================================================================
   FASES DE BRANDING
   Mismo diseño que en PROPUESTA-BRADING: pista horizontal, cabecera con
   borde fino, grupos con etiqueta subrayada y listas con "+".
   ========================================================================== */

.phases-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.phases-head h2 { font-size: clamp(46px, 7vw, 104px); line-height: 1; }
.phases-total {
  margin: 0;
  font-family: var(--vs-text);
  font-weight: 200;
  font-size: 25px;
  line-height: 1.2;
  color: #000;
}

.phases {
  position: relative;
  margin-top: 18px;
  display: flex;
  align-items: flex-start;
  gap: 6px;
}
.phases__nav {
  flex: none;
  margin-top: 30px;
  width: 22px; height: 22px;
  border: 0; background: none; padding: 0;
  cursor: pointer; color: #000;
  display: grid; place-items: center;
}
.phases__nav svg { width: 9px; height: 15px; }
.phases__nav:disabled { opacity: 0.25; cursor: default; }

.phases__track {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.phases__track::-webkit-scrollbar { display: none; }

.phase { flex: 0 0 calc((100% - 40px) / 5); scroll-snap-align: start; }
.phase__head { border: 0.5px solid #000; padding: 14px 10px 15px; text-align: center; }
.phase__n {
  margin: 0;
  font-family: var(--vs-display);
  font-weight: 300;
  font-size: 25px;
  line-height: 1;
  color: #000;
}
.phase__rule { width: 18px; height: 0.5px; background: #000; margin: 7px auto; }
.phase__days { margin: 0; font-size: 11px; line-height: 1.3; letter-spacing: 0.4px; color: #000; }
.phase__note {
  margin-top: 14px;
  background: var(--vs-sand);
  border-radius: 20px;
  padding: 20px;
  text-align: center;
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: 0.4px;
  color: #000;
}
.phase__group { margin-top: 15px; }
.phase__label {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-bottom: 4px;
  border-bottom: 0.5px solid #000;
  font-size: 9.5px;
  line-height: 1.2;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #000;
}
.phase__label svg { width: 9px; height: 9px; flex: none; }
.phase ul { margin: 9px 0 0; padding: 0; list-style: none; }
.phase li {
  position: relative;
  padding-left: 11px;
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: 0.4px;
  color: #000;
}
.phase li + li { margin-top: 4px; }
.phase li::before { content: "+"; position: absolute; left: 0; top: 0; }

@media (max-width: 1000px) { .phase { flex-basis: calc((100% - 20px) / 3); } }
@media (max-width: 760px)  { .phase { flex-basis: calc((100% - 10px) / 2); } }
@media (max-width: 560px)  { .phases__nav { display: none; } .phase { flex-basis: 82%; } }

/* ==========================================================================
   SUSCRIPCIÓN
   ========================================================================== */

.sub-hero { padding: clamp(40px, 5vw, 76px) 0 clamp(30px, 4vw, 54px); text-align: center; }
.sub-hero h1 {
  font-size: clamp(46px, 7.4vw, 104px);
  line-height: 1.0;
  margin: clamp(20px, 2.4vw, 30px) 0 clamp(22px, 2.6vw, 32px);
}
.sub-hero__sub { max-width: 630px; margin: 0 auto clamp(28px, 3.2vw, 40px); font-size: clamp(15px, 1.3vw, 18px); line-height: 1.55; }

.metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin-top: clamp(44px, 5vw, 76px);
  background: var(--vs-line);
  border-radius: 20px;
  overflow: hidden;
}
.metric { background: var(--vs-bg); padding: clamp(22px, 2.4vw, 32px); text-align: center; }
.metric b {
  display: block;
  font-family: var(--vs-display);
  font-weight: 300;
  font-size: clamp(30px, 3.2vw, 44px);
  line-height: 1;
  margin-bottom: 8px;
}
.metric span { font-size: 12.5px; line-height: 1.4; color: var(--vs-muted); }

/* pasos numerados */
.how {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(18px, 2.2vw, 26px);
}
.how__item {
  padding: clamp(26px, 2.8vw, 38px);
  background: #fff;
  border-radius: var(--vs-r-card);
  transition: transform 0.35s var(--vs-ease);
}
.how__item:hover { transform: translateY(-6px); }
.how__n {
  font-family: var(--vs-display);
  font-weight: 300;
  font-size: 40px;
  line-height: 1;
  color: var(--vs-sand);
  margin-bottom: 20px;
}
.how__item h3 { font-size: clamp(20px, 1.9vw, 25px); margin-bottom: 12px; }
.how__item p { font-size: 13px; line-height: 1.5; margin: 0; }

/* conmutador de paquetes */
.switch {
  display: inline-flex;
  gap: 4px;
  padding: 5px;
  border-radius: 32px;
  background: #fff;
}
.switch button {
  padding: 13px 26px;
  border: 0;
  border-radius: 27px;
  background: none;
  font-family: var(--vs-text);
  font-weight: 300;
  font-size: 14px;
  color: var(--vs-ink);
  cursor: pointer;
  transition: background-color 0.28s ease, color 0.28s ease;
}
.switch button[aria-selected="true"] { background: var(--vs-dark); color: #fff; }

/* tarjetas de plan */
.plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 24px);
  align-items: stretch;
}
.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(28px, 3vw, 42px);
  background: #fff;
  border-radius: var(--vs-r-card);
  transition: transform 0.35s var(--vs-ease);
}
.plan:hover { transform: translateY(-6px); }
.plan--hero { background: var(--vs-dark); color: #fff; }
.plan--hero h3, .plan--hero .plan__price { color: #fff; }
.plan--hero .plus li::before { color: var(--vs-sand); }
.plan--hero .plan__unit, .plan--hero .plan__meta { color: rgba(255, 255, 255, 0.62); }

.plan__flag {
  position: absolute;
  top: 26px; right: 26px;
  padding: 6px 13px;
  border-radius: 13px;
  background: var(--vs-sand);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #000;
}
.plan h3 { font-size: clamp(24px, 2.2vw, 30px); margin-bottom: 18px; }
.plan__price {
  font-family: var(--vs-display);
  font-weight: 300;
  font-size: clamp(38px, 3.6vw, 50px);
  line-height: 1;
}
.plan__unit { font-size: 12.5px; color: var(--vs-muted); margin: 8px 0 0; }
.plan__sep { height: 1px; background: var(--vs-line); margin: clamp(22px, 2.4vw, 30px) 0; }
.plan--hero .plan__sep { background: rgba(255, 255, 255, 0.18); }
.plan .plus { margin-bottom: clamp(26px, 3vw, 34px); }
.plan .btn { margin-top: auto; }

/* qué entra / qué no */
.scope {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 60px);
  padding: clamp(30px, 3.4vw, 50px);
  background: #fff;
  border-radius: var(--vs-r-card);
  margin-top: clamp(20px, 2.4vw, 28px);
}
.scope h3 { font-size: clamp(21px, 1.9vw, 25px); margin-bottom: 20px; }

/* panel de condiciones */
.terms {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(26px, 3vw, 46px);
}
.term__n {
  font-family: var(--vs-display);
  font-weight: 300;
  font-size: 30px;
  line-height: 1;
  color: var(--vs-sand);
  margin-bottom: 12px;
}
.term h3 { font-size: clamp(18px, 1.7vw, 22px); color: #fff; margin-bottom: 8px; }
.term p { font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, 0.72); margin: 0; }

.panel {
  padding: clamp(46px, 6vw, 96px) clamp(28px, 4vw, 84px);
  border-radius: clamp(36px, 5vw, var(--vs-r-panel));
}
.panel--dark { background: var(--vs-panel); color: #fff; }
.panel--dark h2 { color: #fff; }
.panel--cream { background: var(--vs-cream); }

/* comparativa */
.cmp__wrap { overflow-x: auto; border-radius: var(--vs-r-card); background: #fff; }
.cmp { width: 100%; min-width: 780px; border-collapse: collapse; font-size: 13.5px; }
.cmp th, .cmp td { padding: 18px 22px; text-align: left; border-bottom: 1px solid var(--vs-line); }
.cmp tr:last-child th, .cmp tr:last-child td { border-bottom: 0; }
.cmp thead th {
  font-family: var(--vs-text);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vs-accent);
}
.cmp thead th.is-us { color: var(--vs-ink); }
.cmp tbody th { font-weight: 400; color: var(--vs-ink); }
.cmp td.is-us { background: rgba(207, 198, 184, 0.22); }
.cmp td { color: var(--vs-muted); }
.cmp td.is-us { color: var(--vs-ink); }

/* acordeón */
.faq { display: grid; gap: 10px; max-width: 880px; margin: 0 auto; }
.acc { background: #fff; border-radius: 24px; overflow: hidden; }
.acc__head {
  display: flex; align-items: center; gap: 18px;
  width: 100%;
  padding: 24px clamp(22px, 2.6vw, 32px);
  border: 0; background: none;
  font-family: var(--vs-text); font-weight: 300;
  font-size: 16px; line-height: 1.35;
  color: var(--vs-ink); text-align: left; cursor: pointer;
}
.acc__head::after {
  content: "";
  flex: none;
  width: 9px; height: 9px;
  margin-left: auto;
  border-right: 1.5px solid var(--vs-accent);
  border-bottom: 1.5px solid var(--vs-accent);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.3s var(--vs-ease);
}
.acc[data-open="true"] .acc__head::after { transform: rotate(-135deg) translate(-3px, -3px); }
.acc__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.34s var(--vs-ease); }
.acc[data-open="true"] .acc__body { grid-template-rows: 1fr; }
.acc__body > div { overflow: hidden; }
.acc__body p { padding: 0 clamp(22px, 2.6vw, 32px) 26px; font-size: 14px; line-height: 1.6; margin: 0; }

/* ------------------------------------------------------------------ CTA --- */

.cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(24px, 3vw, 44px);
  padding: clamp(40px, 5vw, 78px) clamp(30px, 4vw, 100px);
  background: var(--vs-dark);
  border-radius: clamp(32px, 4.6vw, 70px);
}
.cta h2 { color: #fff; font-size: clamp(28px, 3.6vw, 46px); line-height: 1.1; }
.cta .btn { flex: none; }

/* ------------------------------------------------------- puntos de corte --- */

@media (max-width: 1080px) {
  .about-row { grid-template-columns: 1fr 1fr; }
  .about-photo-wrap { grid-column: 1 / -1; min-height: 340px; }
  .benefits { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .steps-band__card { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .how { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .svc { grid-template-columns: 1fr; }
  .svc--flip .svc__photo-wrap { order: -1; }
  .plans { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }
  .terms { grid-template-columns: 1fr 1fr; }
  .scope { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .about-row { grid-template-columns: 1fr; }
  .benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps-band__card { grid-template-columns: 1fr; }
  .how { grid-template-columns: 1fr; }
  .terms { grid-template-columns: 1fr; }
  .facts__head, .facts__body { grid-template-columns: 1fr; }
  .facts__body > div + div { border-left: 0; border-top: 1px solid var(--vs-line); }
  .facts__head > div + div { border-left: 0; border-top: 1px solid rgba(0,0,0,.14); }
  .cta { justify-content: center; text-align: center; }
  .cta .btn { width: 100%; }
  .switch { width: 100%; }
  .switch button { flex: 1; padding: 13px 10px; font-size: 13px; }
}