/* ============================================================
   Fase 1 · Conversión — página alterna de pruebas
   Usa los mismos tokens de style.css (--blue, --ink, --sky, --line, --muted).
   ============================================================ */

:root { --ease-out: cubic-bezier(.22, 1, .36, 1); --sticky-h: 0px; }

/* ─── Garantía junto al precio ─────────────────────────────── */
.warranty-chip { display: inline-flex; align-items: center; gap: 5px; }
/* En móvil solo "Envío gratis": la garantía ya aparece en la barra de refuerzos */
@media (max-width: 720px) { .warranty-chip { display: none; } }

/* ─── Barra de refuerzos: más presencia ────────────────────── */
.benefit-strip.trust-strip { background: #fff; }
.benefit-strip.trust-strip .wrap {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  padding-block: 30px;
}
.trust-strip .trust-item {
  display: flex;
  align-items: flex-start; /* títulos alineados arriba aunque el subtítulo ocupe 1 o 2 líneas */
  gap: 14px;
  padding: 2px 22px;
  border-left: 1px solid var(--line);
  min-width: 0;
}
.trust-strip .trust-item:first-child { border-left: 0; padding-left: 0; }
.trust-strip .trust-icon {
  width: 44px; height: 44px;
  flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: 10px;
  background: var(--sky);
  color: var(--blue);
}
.benefit-strip.trust-strip .trust-text { font-size: inherit; min-width: 0; padding-top: 3px; }
.benefit-strip.trust-strip .trust-text b {
  display: block;
  margin: 0;
  font: 700 .9375rem/1.3 'Plus Jakarta Sans', Inter, sans-serif;
  letter-spacing: -.015em;
  color: var(--ink);
}
.benefit-strip.trust-strip .trust-text small {
  display: block;
  margin-top: 3px;
  font-size: .8125rem;
  line-height: 1.4;
  color: var(--muted);
}

@media (max-width: 1050px) {
  .benefit-strip.trust-strip .wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 24px; }
  .trust-strip .trust-item:nth-child(3) { border-left: 0; padding-left: 0; }
}
@media (max-width: 720px) {
  .benefit-strip.trust-strip .wrap { padding-block: 24px; gap: 20px 14px; }
  .trust-strip .trust-item { flex-direction: column; align-items: flex-start; gap: 10px; padding: 0; border-left: 0; }
  .trust-strip .trust-icon { width: 38px; height: 38px; border-radius: 9px; }
  .benefit-strip.trust-strip .trust-text b { font-size: .875rem; }
  .benefit-strip.trust-strip .trust-text small { font-size: .75rem; }
}

/* ─── Resumen del pedido ───────────────────────────────────── */
.order-trust {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin: 6px 0 0;
  font-size: .75rem;
  color: var(--muted);
}
.order-trust svg { color: var(--blue); flex-shrink: 0; }
.order-trust a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.order-trust a:hover { color: var(--blue); }
@media (min-width: 721px) and (max-width: 1050px) {
  .order-total { grid-row: auto; }
  .order-trust { grid-column: 2; }
}

/* Números del resumen: ancho fijo para que no "bailen" al rodar */
#total, #service-total, #savings-total { font-variant-numeric: tabular-nums; }

/* Resalte breve del ahorro al cambiar de plan */
.order-savings strong {
  border-radius: 4px;
  padding: 1px 3px;
  margin: 0 -3px;
  transition: background-color .6s var(--ease-out);
}
.order-savings.is-updated strong { background-color: #d6ecff; transition-duration: .12s; }

/* ─── Barra fija de compra (móvil) ─────────────────────────── */
.sticky-cta { display: none; }

@media (max-width: 720px) {
  .sticky-cta {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 58; /* debajo del chat abierto (61) y su botón (60) */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, .94);
    -webkit-backdrop-filter: saturate(1.4) blur(14px);
            backdrop-filter: saturate(1.4) blur(14px);
    border-top: 1px solid var(--line);
    box-shadow: 0 -8px 24px rgba(8, 42, 71, .08);
    transform: translateY(110%);
    transition: transform .3s var(--ease-out);
  }
  .sticky-cta.is-visible { transform: translateY(0); }

  .sticky-cta-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .sticky-cta-label { font-size: .6875rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--blue); }
  .sticky-cta-price { display: flex; align-items: baseline; gap: 6px; white-space: nowrap; }
  .sticky-cta-price del { font-size: .75rem; color: var(--muted); }
  .sticky-cta-price strong { font: 800 1.375rem 'Plus Jakarta Sans', Inter, sans-serif; letter-spacing: -.04em; color: var(--ink); }
  .sticky-cta-price small { font-size: .6875rem; font-weight: 500; color: var(--muted); }

  .button.sticky-cta-button { min-height: 48px; padding: 12px 20px; gap: 10px; font-size: .875rem; flex-shrink: 0; }

  /* El chat sube para no quedar encima de la barra */
  .bt-widget-fab, .bt-widget-teaser { transition: translate .3s var(--ease-out); }
  body.has-sticky-cta .bt-widget-fab,
  body.has-sticky-cta .bt-widget-teaser { translate: 0 calc(-1 * var(--sticky-h)); }
}

/* ─── Detalles táctiles ────────────────────────────────────── */
.button, .plan, .feature-tabs button, summary { -webkit-tap-highlight-color: transparent; }
.button { -webkit-user-select: none; user-select: none; }

@media (prefers-reduced-motion: reduce) {
  .sticky-cta, .bt-widget-fab, .bt-widget-teaser, .order-savings strong { transition: none; }
}

/* ─── Conectividad: interlineado y jerarquía ───────────────────
   El original usaba 1.7–1.8 en todo; en renglones cortos (móvil) deja
   el texto suelto. Títulos más grandes y texto de apoyo más tenue
   para que se distingan por tamaño y color, no solo por grosor. */
.connection-copy > p { line-height: 1.6; }
.connection-copy .coverage-note { line-height: 1.55; }
.connection-details h3 { font-size: 1.25rem; line-height: 1.3; letter-spacing: -.025em; margin-top: 8px; color: #fff; }
.connection-details p { font-size: .9375rem; line-height: 1.55; color: #a9c3d9; margin-top: 6px; }


@media (max-width: 720px) {
  /* La tarjeta oscura deja ~290 px útiles: cada frase del título en una línea */
  .connectivity h2 { font-size: 1.75rem; line-height: 1.15; }
  .connection-copy > p { line-height: 1.55; }
  .connection-details h3 { font-size: 1.2rem; }
  .connection-details p { font-size: .875rem; }
  .connection-details article + article { margin-top: 20px; padding-top: 20px; }
}

/* ─── Interlineado unificado en toda la página ─────────────────
   El original usaba 1.7–1.9; se unifica al criterio aprobado en
   Conectividad: párrafos 1.6 (escritorio) / 1.55 (móvil). */
.lead,
.section-intro p,
.steps p,
.app-copy > p,
.platform-tools p,
.slide-copy p,
.slide-related p,
.spec-intro > p,
.technical-more > p,
details p,
.closing p,
.footer-brand p,
.connection-copy .coverage-note,
.pricing-note,
.renewal { line-height: 1.6; }

/* Listas, filas de datos y textos cortos: un poco más compactos */
.slide-copy li,
.spec-table > div,
.plan-billing { line-height: 1.5; }
.slide-copy li { margin: 8px 0; }

/* Etiquetas en mayúsculas que pueden ocupar 2 líneas */
.closing .eyebrow,
.connectivity .eyebrow { line-height: 1.5; }

@media (max-width: 720px) {
  .lead,
  .section-intro p,
  .steps p,
  .app-copy > p,
  .platform-tools p,
  .slide-copy p,
  .slide-related p,
  .spec-intro > p,
  .technical-more > p,
  details p,
  .closing p,
  .footer-brand p,
  .connection-copy .coverage-note,
  .pricing-note,
  .renewal { line-height: 1.55; }
}

/* Títulos sin palabras sueltas en la última línea */
h1, h2, h3 { text-wrap: balance; }