/* Landing de venta · acompañamiento.
   Reutiliza tokens, tipografías y componentes globales (.shell, .eyebrow,
   .section-number, .primary-cta, el shell del popup y .faq-list). Todo lo
   propio va con prefijo .sales-* para no tocar app/globals.css. */

.sales-page {
  background: var(--ink);
  color: var(--ivory);
}

.sales-header {
  display: grid;
  place-items: center;
  padding: 26px 20px 0;
}

.sales-main section {
  position: relative;
  padding-block: clamp(72px, 8vw, 128px);
}

.sales-main h2 {
  max-width: 20ch;
  font-family: var(--font-editorial), Georgia, serif;
  font-size: clamp(2.3rem, 4vw, 3.8rem);
  font-weight: 500;
  letter-spacing: var(--tracking-display);
  line-height: 1.02;
  margin: 14px 0 0;
}

.sales-main h2 em,
.sales-hero h1 em {
  color: #ead0a2;
  font-style: italic;
}

.sales-main p {
  font-size: var(--type-body);
  line-height: var(--leading-body);
}

/* Hero */
.sales-hero {
  background:
    radial-gradient(62% 48% at 78% 8%, rgba(96, 20, 40, 0.34), transparent 70%),
    linear-gradient(180deg, #150f11 0%, #0e0b0c 62%, #120d0f 100%);
  text-align: center;
}

.sales-hero-inner {
  display: grid;
  justify-items: center;
}

.sales-eyebrow {
  color: var(--gold-quiet);
  letter-spacing: 0.22em;
}

.sales-hero h1 {
  max-width: 17ch;
  margin: 20px 0 0;
  font-family: var(--font-editorial), Georgia, serif;
  font-size: clamp(2.6rem, 5vw, 4.8rem);
  font-weight: 500;
  letter-spacing: var(--tracking-display);
  line-height: 0.98;
}

.sales-lead {
  max-width: 58ch;
  margin: 22px 0 0;
  color: var(--text-on-dark);
}

.sales-cta-block {
  display: grid;
  justify-items: center;
  gap: 14px;
  margin-top: clamp(30px, 3.4vw, 42px);
}

.sales-cta-block--inline {
  justify-items: start;
  margin-top: clamp(26px, 3vw, 36px);
}

.sales-cta-note {
  max-width: 46ch;
  color: var(--text-on-dark-muted);
  font-size: 0.86rem;
  line-height: 1.55;
  text-align: center;
}

/* Identificación */
.sales-recognise {
  background: linear-gradient(180deg, #120d0f, #16101300 60%);
}

.sales-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}

.sales-recognise-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sales-recognise-list li {
  padding: 18px 0 18px 30px;
  border-top: 1px solid var(--line-dark-soft);
  color: var(--text-on-dark);
  font-size: var(--type-body);
  line-height: 1.55;
  position: relative;
}

.sales-recognise-list li:last-child {
  border-bottom: 1px solid var(--line-dark-soft);
}

.sales-recognise-list li::before {
  content: "";
  position: absolute;
  top: 27px;
  left: 4px;
  width: 7px;
  height: 7px;
  rotate: 45deg;
  background: var(--gold-quiet);
}

.sales-recognise-close {
  max-width: 34ch;
  margin: clamp(34px, 4vw, 52px) auto 0;
  color: #ead0a2;
  font-family: var(--font-editorial), Georgia, serif;
  font-size: clamp(1.3rem, 2vw, 1.75rem);
  font-style: italic;
  line-height: 1.35;
  text-align: center;
}

/* Diagnóstico */
.sales-why {
  background:
    radial-gradient(48% 40% at 6% 12%, rgba(96, 20, 40, 0.2), transparent 72%),
    #100c0e;
}

.sales-why-inner {
  display: grid;
  justify-items: center;
  text-align: center;
}

.sales-why h2 {
  max-width: 22ch;
}

.sales-why-body {
  max-width: 62ch;
  margin-top: clamp(24px, 2.8vw, 34px);
}

.sales-why-body p {
  margin: 0 0 16px;
  color: var(--text-on-dark);
}

.sales-why-punch {
  color: var(--ivory) !important;
  font-family: var(--font-editorial), Georgia, serif;
  font-size: clamp(1.25rem, 1.9vw, 1.6rem) !important;
  font-style: italic;
  margin-top: 22px !important;
}

/* Mecanismo */
.sales-method {
  background: linear-gradient(180deg, #140e11, #1a1013 55%, #140e11);
  border-block: 1px solid rgba(200, 164, 104, 0.16);
}

.sales-method-inner {
  max-width: 72ch;
}

.sales-method .eyebrow {
  margin-top: 18px;
  color: var(--gold-quiet);
  letter-spacing: 0.2em;
}

.sales-method-body {
  margin-top: clamp(22px, 2.6vw, 30px);
}

.sales-method-body p {
  margin: 0 0 16px;
  color: var(--text-on-dark);
}

/* Antes / después */
.sales-shift-list {
  display: grid;
  gap: 0;
  margin: clamp(30px, 3.4vw, 44px) 0 0;
  padding: 0;
  list-style: none;
}

.sales-shift-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(14px, 2.4vw, 34px);
  padding: 20px 0;
  border-top: 1px solid var(--line-dark-soft);
}

.sales-shift-list li:last-child {
  border-bottom: 1px solid var(--line-dark-soft);
}

.shift-before {
  color: rgba(245, 241, 232, 0.5);
  font-size: 1rem;
  text-align: right;
}

.shift-arrow {
  color: var(--gold-quiet);
  font-size: 1.1rem;
}

.shift-after {
  color: var(--ivory);
  font-family: var(--font-editorial), Georgia, serif;
  font-size: clamp(1.1rem, 1.6vw, 1.4rem);
}

/* Proceso */
.sales-stages {
  background: linear-gradient(180deg, #100c0e, #150f12);
}

.sales-stage-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 2.8vw, 40px);
  margin: clamp(34px, 4vw, 52px) 0 0;
  padding: 0;
  list-style: none;
}

.sales-stage-grid li {
  padding-top: 22px;
  border-top: 1px solid rgba(200, 164, 104, 0.34);
}

.stage-number {
  display: block;
  color: var(--gold-quiet);
  font-family: var(--font-editorial), Georgia, serif;
  font-size: clamp(2.4rem, 3.2vw, 3.2rem);
  font-style: italic;
  line-height: 1;
}

.sales-stage-grid h3 {
  margin: 12px 0 10px;
  color: var(--ivory);
  font-family: var(--font-editorial), Georgia, serif;
  font-size: var(--type-heading-card);
  font-weight: 500;
  line-height: 1.16;
}

.sales-stage-grid p {
  margin: 0 0 10px;
  color: var(--text-on-dark-muted);
  font-size: 1rem;
  line-height: 1.55;
}

.stage-decision b {
  color: #ead0a2;
  font-weight: 700;
}

.stage-outcome {
  color: var(--ivory) !important;
  font-style: italic;
}

/* Autoridad */
.sales-author {
  background: #0e0b0c;
}

.sales-author-inner {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(30px, 5vw, 70px);
  align-items: center;
}

.sales-author-figure {
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(200, 164, 104, 0.3);
}

.sales-author-figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.88);
}

.sales-author-body p {
  margin: 0 0 14px;
  color: var(--text-on-dark);
}

.sales-author-body .eyebrow {
  color: var(--gold-quiet);
}

.sales-author-close {
  color: #ead0a2 !important;
  font-family: var(--font-editorial), Georgia, serif;
  font-size: clamp(1.15rem, 1.6vw, 1.4rem) !important;
  font-style: italic;
}

/* Prueba */
.sales-proof {
  background: linear-gradient(180deg, #0e0b0c, #140e11);
}

.sales-proof-context {
  max-width: 62ch;
  margin: 22px 0 0;
  color: var(--text-on-dark);
}

.sales-proof-videos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 2.6vw, 34px);
  margin-top: clamp(30px, 3.4vw, 44px);
}

.sales-proof-video video {
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  max-height: 62vh;
  object-fit: cover;
  background: #000;
  border: 1px solid rgba(200, 164, 104, 0.28);
}

.sales-proof-note {
  margin-top: 16px;
  color: var(--text-on-dark-muted);
  font-size: 0.84rem !important;
}

/* Encaje */
.sales-fit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 44px);
  margin-top: clamp(30px, 3.4vw, 42px);
}

.sales-fit-grid ul {
  margin: 0;
  padding: 24px 26px;
  list-style: none;
  border: 1px solid var(--line-dark-soft);
}

.sales-fit-grid li {
  padding: 9px 0 9px 26px;
  color: var(--text-on-dark);
  font-size: 1rem;
  line-height: 1.5;
  position: relative;
}

.sales-fit-yes {
  border-left: 2px solid var(--gold-quiet) !important;
}

.sales-fit-yes li::before {
  content: "";
  position: absolute;
  top: 17px;
  left: 4px;
  width: 8px;
  height: 8px;
  rotate: 45deg;
  background: var(--gold-quiet);
}

.sales-fit-no li {
  color: var(--text-on-dark-muted);
}

.sales-fit-no li::before {
  content: "";
  position: absolute;
  top: 20px;
  left: 2px;
  width: 11px;
  height: 1px;
  background: rgba(245, 241, 232, 0.34);
}

.sales-fit-close {
  max-width: 46ch;
  margin: clamp(26px, 3vw, 36px) 0 0;
  color: #ead0a2;
  font-family: var(--font-editorial), Georgia, serif;
  font-size: clamp(1.1rem, 1.5vw, 1.35rem);
  font-style: italic;
}

/* Solicitud */
.sales-steps {
  background: linear-gradient(180deg, #140e11, #100c0e);
}

.sales-step-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.6vw, 36px);
  margin: clamp(30px, 3.4vw, 44px) 0 0;
  padding: 0;
  list-style: none;
}

.sales-step-list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 14px;
}

.sales-step-list span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(200, 164, 104, 0.6);
  border-radius: 50%;
  color: #ead0a2;
  font-family: var(--font-editorial), Georgia, serif;
  font-size: 1rem;
}

.sales-step-list p {
  margin: 4px 0 0;
  color: var(--text-on-dark);
  font-size: 1rem;
  line-height: 1.5;
}

.sales-steps-note {
  max-width: 68ch;
  margin: clamp(26px, 3vw, 34px) 0 0;
  color: var(--text-on-dark-muted);
  font-size: 0.92rem !important;
}

/* FAQ */
.sales-faq {
  background: #0e0b0c;
}

.sales-faq-inner {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(30px, 6vw, 80px);
  align-items: start;
}

/* Cierre */
.sales-final {
  background:
    radial-gradient(64% 52% at 50% 20%, rgba(96, 20, 40, 0.34), transparent 72%),
    linear-gradient(180deg, #140e11, #0d0a0b);
  text-align: center;
}

.sales-final-inner {
  display: grid;
  justify-items: center;
}

.sales-final h2 {
  max-width: 18ch;
}

.sales-final p {
  max-width: 52ch;
  margin: 20px 0 0;
  color: var(--text-on-dark);
}

.sales-final-cta {
  min-width: min(420px, 100%);
}

.sales-footer {
  padding-top: 0;
}

/* Campo de bloqueo del popup: hereda el estilo de los inputs del sistema. */
.sales-blocker {
  display: grid;
  gap: 7px;
}

.sales-blocker > span {
  color: rgba(245, 241, 232, 0.85);
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.sales-blocker textarea {
  width: 100%;
  padding: 13px 16px;
  border: 1px solid rgba(200, 164, 104, 0.26);
  border-radius: 10px;
  background: rgba(245, 241, 232, 0.055);
  color: var(--ivory);
  font: inherit;
  font-size: 1rem;
  line-height: 1.5;
  outline: 0;
  resize: vertical;
  transition: border-color 0.16s, background 0.16s;
}

.sales-blocker textarea::placeholder {
  color: rgba(245, 241, 232, 0.42);
}

.sales-blocker textarea:focus-visible {
  border-color: var(--gold-quiet);
  background: rgba(245, 241, 232, 0.09);
}

.sales-blocker textarea:user-invalid {
  border-color: var(--carmine-soft);
}

/* Confirmación: sobria, sin recorrido de pasos ni confeti. */
.form-success .success-lead {
  max-width: 44ch;
  margin: 0 0 26px;
}

@media (width <= 1100px) {
  .sales-stage-grid,
  .sales-step-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sales-author-inner,
  .sales-faq-inner,
  .sales-split {
    grid-template-columns: 1fr;
  }
  .sales-author-figure {
    max-width: 460px;
  }
}

@media (width <= 767px) {
  .sales-main section {
    padding-block: clamp(56px, 12vw, 78px);
  }
  .sales-main .shell {
    width: calc(100% - 44px);
  }
  .sales-main h2 {
    max-width: none;
    font-size: clamp(2rem, 8.6vw, 2.6rem);
  }
  .sales-hero h1 {
    font-size: clamp(2.1rem, 9.4vw, 2.9rem);
  }
  .sales-lead,
  .sales-main p {
    font-size: 1.0625rem;
  }
  .sales-stage-grid,
  .sales-step-list,
  .sales-fit-grid,
  .sales-proof-videos {
    grid-template-columns: 1fr;
  }
  /* Antes/después: la flecha pasa a separador vertical. */
  .sales-shift-list li {
    grid-template-columns: 1fr;
    gap: 4px;
    text-align: left;
  }
  .shift-before {
    text-align: left;
  }
  .shift-arrow {
    rotate: 90deg;
    width: fit-content;
  }
  .sales-cta-block .primary-cta,
  .sales-final-cta {
    width: 100%;
    min-width: 0;
  }
  .sales-recognise-close,
  .sales-fit-close {
    max-width: none;
  }
  .sales-proof-video video {
    max-height: none;
  }
}

/* ── Rediseño de copy/CRO aprobado por dirección (21-08-2026) ──────────────
   Bloque aditivo: credenciales, preguntas, declaraciones, cartas del método,
   foto de autoridad y tarjeta del caso 630. Solo clases sales-*. */

.sales-credentials {
  border-block: 1px solid rgba(200, 164, 104, 0.22);
  background: rgba(21, 20, 22, 0.55);
}

.sales-credentials p {
  margin: 0;
  padding: 18px 0;
  color: rgba(200, 164, 104, 0.92);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  text-wrap: balance;
}

.sales-credentials p span {
  margin: 0 14px;
  color: rgba(200, 164, 104, 0.5);
}

.sales-recognise-intro p {
  margin: 0 0 14px;
  color: rgba(245, 241, 232, 0.78);
  line-height: 1.7;
}

.sales-recognise-criterio {
  margin: 34px auto 0;
  color: rgba(245, 241, 232, 0.92);
  font-size: 1.12rem;
  line-height: 1.6;
  font-weight: 600;
  text-wrap: balance;
}

.sales-declaration {
  margin: 26px 0;
  padding: 26px 30px;
  display: grid;
  gap: 10px;
  list-style: none;
  border-left: 2px solid rgba(200, 164, 104, 0.65);
  background: rgba(21, 20, 22, 0.6);
}

.sales-declaration li {
  color: rgba(245, 241, 232, 0.94);
  font-family: var(--font-display, 'Bodoni Moda', serif);
  font-size: 1.18rem;
  line-height: 1.5;
}

.stage-name {
  margin: 0 0 6px;
  color: rgba(200, 164, 104, 0.9);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.sales-author-photo {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid rgba(200, 164, 104, 0.25);
  filter: saturate(0.94);
}

.sales-case {
  margin: 30px 0 38px;
  padding: 34px 34px 30px;
  border: 1px solid rgba(200, 164, 104, 0.28);
  background: linear-gradient(160deg, rgba(33, 26, 20, 0.75), rgba(21, 20, 22, 0.9));
}

.sales-case-kicker {
  margin: 0 0 10px;
  color: rgba(200, 164, 104, 0.9);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.sales-case h3 {
  margin: 0 0 16px;
  font-family: var(--font-display, 'Bodoni Moda', serif);
  font-size: clamp(1.5rem, 3.2vw, 2.1rem);
  line-height: 1.15;
  color: rgba(245, 241, 232, 0.97);
  text-wrap: balance;
}

.sales-case p {
  margin: 0 0 14px;
  color: rgba(245, 241, 232, 0.8);
  line-height: 1.7;
  max-width: 62ch;
}

.sales-case-punch {
  font-weight: 600;
  color: rgba(245, 241, 232, 0.94);
}

.sales-case-chips {
  margin: 20px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
}

.sales-case-chips li {
  padding: 8px 14px;
  border: 1px solid rgba(200, 164, 104, 0.4);
  border-radius: 999px;
  color: rgba(200, 164, 104, 0.95);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

@media (max-width: 767px) {
  .sales-credentials p {
    padding: 14px 18px;
    font-size: 0.68rem;
    letter-spacing: 0.1em;
  }

  .sales-credentials p span {
    margin: 0 8px;
  }

  .sales-declaration {
    padding: 20px 20px;
  }

  .sales-declaration li {
    font-size: 1.05rem;
  }

  .sales-case {
    padding: 24px 20px 22px;
  }
}

/* ── Copy de venta del infoproductor (dirección, 22-08-2026) ───────────────
   Bloque aditivo: infostrip, transformación, semana, módulos, rutas,
   acompañamiento, bonus + VIP, garantía, entregables, cualificación,
   citas, cierre emocional y adaptadores del topbar/sticky reutilizados de
   la landing de captación. Solo clases sales-* (más los adaptadores). */

.sales-hero-italic {
  max-width: 46ch;
  margin: 22px 0 0;
  color: #ead0a2;
  font-family: var(--font-editorial), Georgia, serif;
  font-size: clamp(1.15rem, 1.7vw, 1.45rem);
  font-style: italic;
  line-height: 1.5;
  text-wrap: balance;
}

.sales-section-sub {
  max-width: 58ch;
  margin: 18px 0 0;
  color: var(--text-on-dark-muted);
}

/* Infostrip */
.sales-infostrip {
  padding-block: 0 !important;
  border-block: 1px solid rgba(200, 164, 104, 0.2);
  background: rgba(21, 20, 22, 0.6);
}

.sales-infostrip-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
}

.sales-infostrip-cell {
  display: grid;
  gap: 6px;
  padding: clamp(24px, 3vw, 38px) clamp(18px, 2.4vw, 34px);
  border-left: 1px solid rgba(200, 164, 104, 0.16);
}

.sales-infostrip-cell:first-child {
  border-left: 0;
  padding-left: 0;
}

.sales-infostrip-lbl {
  color: rgba(200, 164, 104, 0.9);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.sales-infostrip-cell strong {
  color: var(--ivory);
  font-family: var(--font-editorial), Georgia, serif;
  font-size: clamp(1.35rem, 2vw, 1.8rem);
  font-weight: 500;
  line-height: 1.1;
}

.sales-infostrip-cell small {
  color: var(--text-on-dark-muted);
  font-size: 0.88rem;
  line-height: 1.45;
}

/* Transformación hoy → al terminar */
.sales-transform {
  background: linear-gradient(180deg, #100c0e, #150f12);
}

.sales-transform-grid {
  display: grid;
  gap: 0;
  margin-top: clamp(30px, 3.4vw, 44px);
}

.sales-transform-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto auto;
  grid-auto-flow: column;
  column-gap: clamp(20px, 3vw, 48px);
  padding: 20px 0;
  border-top: 1px solid var(--line-dark-soft);
}

.sales-transform-card:last-child {
  border-bottom: 1px solid var(--line-dark-soft);
}

.stc-lbl {
  display: block;
  margin-bottom: 6px;
  color: rgba(245, 241, 232, 0.45);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.stc-lbl--despues {
  color: rgba(200, 164, 104, 0.9);
}

.stc-hoy {
  margin: 0;
  color: rgba(245, 241, 232, 0.55);
  font-size: 1rem !important;
  line-height: 1.5;
}

.stc-despues {
  margin: 0;
  color: var(--ivory);
  font-family: var(--font-editorial), Georgia, serif;
  font-size: clamp(1.05rem, 1.5vw, 1.3rem) !important;
  line-height: 1.4;
}

/* Semana tipo + módulos */
.sales-week-list {
  display: grid;
  gap: 0;
  margin: clamp(30px, 3.4vw, 44px) 0 0;
  padding: 0;
  list-style: none;
}

.sales-week-list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: clamp(16px, 2.4vw, 30px);
  padding: 18px 0;
  border-top: 1px solid var(--line-dark-soft);
}

.sales-week-list li:last-child {
  border-bottom: 1px solid var(--line-dark-soft);
}

.sw-tag {
  min-width: 92px;
  padding: 6px 12px;
  border: 1px solid rgba(200, 164, 104, 0.5);
  border-radius: 999px;
  color: rgba(200, 164, 104, 0.95);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
}

.sales-week-list h3 {
  margin: 0 0 6px;
  color: var(--ivory);
  font-family: var(--font-editorial), Georgia, serif;
  font-size: var(--type-heading-card);
  font-weight: 500;
  line-height: 1.16;
}

.sales-week-list p {
  margin: 0;
  color: var(--text-on-dark-muted);
  font-size: 1rem !important;
  line-height: 1.55;
}

.sales-modulos {
  margin-top: clamp(30px, 3.4vw, 44px);
  padding: 26px 30px;
  border: 1px solid rgba(200, 164, 104, 0.24);
  background: rgba(21, 20, 22, 0.55);
}

.sales-modulos-lbl {
  margin: 0 0 16px;
  color: rgba(200, 164, 104, 0.9);
  font-size: 0.72rem !important;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.sales-modulos ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sales-modulos li {
  color: var(--text-on-dark);
  font-size: 1rem;
  line-height: 1.5;
}

.sales-modulos li b {
  margin-right: 10px;
  color: rgba(200, 164, 104, 0.85);
  font-family: var(--font-editorial), Georgia, serif;
  font-weight: 500;
}

/* Rutas + acompañamiento */
.sales-rutas {
  background: linear-gradient(180deg, #150f12, #100c0e);
}

.sales-rutas-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 2.6vw, 36px);
  margin-top: clamp(30px, 3.4vw, 44px);
}

.sales-ruta-card {
  padding: 28px 30px;
  border: 1px solid rgba(200, 164, 104, 0.26);
  background: rgba(21, 20, 22, 0.55);
}

.sales-ruta-tag {
  display: inline-block;
  margin-bottom: 14px;
  color: rgba(200, 164, 104, 0.9);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.sales-ruta-card h3 {
  margin: 0 0 10px;
  color: var(--ivory);
  font-family: var(--font-editorial), Georgia, serif;
  font-size: var(--type-heading-card);
  font-weight: 500;
  line-height: 1.16;
}

.sales-ruta-card p {
  margin: 0;
  color: var(--text-on-dark-muted);
  font-size: 1rem !important;
  line-height: 1.6;
}

.sales-rutas-nota {
  max-width: 52ch;
  margin: clamp(22px, 2.6vw, 30px) 0 0;
  color: #ead0a2;
  font-family: var(--font-editorial), Georgia, serif;
  font-size: 1.1rem !important;
  font-style: italic;
  line-height: 1.5;
}

.sales-accompany {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: clamp(26px, 4vw, 56px);
  align-items: center;
  margin-top: clamp(44px, 5vw, 64px);
  padding-top: clamp(34px, 4vw, 48px);
  border-top: 1px solid rgba(200, 164, 104, 0.2);
}

.sales-accompany-texto h3 {
  margin: 14px 0 14px;
  color: var(--ivory);
  font-family: var(--font-editorial), Georgia, serif;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 500;
  line-height: 1.15;
}

.sales-accompany-texto .eyebrow {
  color: var(--gold-quiet);
}

.sales-accompany-texto p {
  margin: 0;
  color: var(--text-on-dark);
  line-height: 1.7;
}

.sales-accompany-stat {
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 30px 26px;
  border: 1px solid rgba(200, 164, 104, 0.32);
  background: linear-gradient(160deg, rgba(33, 26, 20, 0.72), rgba(21, 20, 22, 0.9));
  text-align: center;
}

.sales-accompany-stat > strong {
  color: #ead0a2;
  font-family: var(--font-editorial), Georgia, serif;
  font-size: clamp(3rem, 5vw, 4.2rem);
  font-weight: 500;
  line-height: 1;
}

.sales-accompany-stat > span {
  color: var(--text-on-dark);
  font-size: 0.94rem;
}

.sales-accompany-sub {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(200, 164, 104, 0.2);
  width: 100%;
}

.sales-accompany-sub b {
  display: block;
  color: var(--ivory);
  font-family: var(--font-editorial), Georgia, serif;
  font-size: 1.3rem;
  font-weight: 500;
}

.sales-accompany-sub small {
  color: var(--text-on-dark-muted);
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Bonus + VIP */
.sales-bonus {
  background: linear-gradient(180deg, #100c0e, #140e11);
}

.sales-bonus-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.2vw, 30px);
  margin-top: clamp(30px, 3.4vw, 44px);
}

.sales-bonus-card {
  padding: 24px 24px 22px;
  border: 1px solid var(--line-dark-soft);
  background: rgba(21, 20, 22, 0.5);
}

.sales-bonus-card b {
  display: block;
  margin-bottom: 8px;
  color: var(--ivory);
  font-family: var(--font-editorial), Georgia, serif;
  font-size: 1.12rem;
  font-weight: 500;
  line-height: 1.25;
}

.sales-bonus-card p {
  margin: 0;
  color: var(--text-on-dark-muted);
  font-size: 0.95rem !important;
  line-height: 1.55;
}

.sales-vip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2.2vw, 30px);
  margin-top: clamp(26px, 3vw, 38px);
}

.sales-vip-card {
  padding: 30px 30px 26px;
  border: 1px solid rgba(200, 164, 104, 0.5);
  background: linear-gradient(160deg, rgba(46, 35, 22, 0.6), rgba(21, 20, 22, 0.92));
}

.sales-vip-tag {
  display: inline-block;
  margin-bottom: 14px;
  padding: 6px 12px;
  border: 1px solid rgba(200, 164, 104, 0.6);
  border-radius: 999px;
  color: #ead0a2;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.sales-vip-card h3 {
  margin: 0 0 12px;
  color: var(--ivory);
  font-family: var(--font-editorial), Georgia, serif;
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  font-weight: 500;
  line-height: 1.15;
}

.sales-vip-card ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sales-vip-card ul li {
  padding-left: 22px;
  position: relative;
  color: var(--text-on-dark);
  font-size: 1rem;
  line-height: 1.5;
}

.sales-vip-card ul li::before {
  content: "";
  position: absolute;
  top: 9px;
  left: 2px;
  width: 7px;
  height: 7px;
  rotate: 45deg;
  background: var(--gold-quiet);
}

.sales-vip-nota {
  margin: 14px 0 0;
  color: var(--text-on-dark-muted);
  font-size: 0.86rem !important;
  line-height: 1.55;
}

.sales-vip-card--urgente {
  border-color: rgba(208, 29, 63, 0.55);
  background: linear-gradient(160deg, rgba(64, 14, 26, 0.55), rgba(21, 20, 22, 0.92));
}

.sales-vip-card--urgente .sales-vip-tag {
  border-color: rgba(208, 29, 63, 0.7);
  color: #ff8ba0;
}

.sales-vip-card--urgente p {
  margin: 0;
  color: var(--text-on-dark);
  line-height: 1.6;
}

.sales-vip-reloj {
  margin: 18px 0 0 !important;
  color: var(--ivory);
  font-family: var(--font-editorial), Georgia, serif;
  font-size: clamp(1.9rem, 3vw, 2.6rem) !important;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

[data-vip-estado="finalizado"] .sales-vip-reloj {
  color: rgba(245, 241, 232, 0.55);
  font-size: clamp(1.3rem, 2vw, 1.7rem) !important;
  font-style: italic;
}

/* Citas de alumnas */
.sales-quotes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 2.6vw, 34px);
  margin-top: clamp(30px, 3.4vw, 44px);
}

.sales-quote {
  margin: 0;
  padding: 28px 30px 24px;
  border: 1px solid var(--line-dark-soft);
  border-left: 2px solid rgba(200, 164, 104, 0.65);
  background: rgba(21, 20, 22, 0.55);
}

.sales-quote p {
  margin: 0 0 16px;
  color: var(--text-on-dark);
  font-family: var(--font-editorial), Georgia, serif;
  font-size: 1.1rem !important;
  font-style: italic;
  line-height: 1.6;
}

.sales-quote footer {
  color: rgba(200, 164, 104, 0.9);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Garantía */
.sales-garantia {
  background:
    radial-gradient(52% 44% at 50% 0%, rgba(96, 20, 40, 0.24), transparent 72%),
    #100c0e;
  text-align: center;
}

.sales-garantia-inner {
  display: grid;
  justify-items: center;
}

.sales-garantia h2 {
  max-width: 22ch;
}

.sales-garantia p:last-child {
  max-width: 58ch;
  margin: 20px 0 0;
  color: var(--text-on-dark);
  line-height: 1.7;
}

/* Entregables */
.sales-deliver {
  background: linear-gradient(180deg, #100c0e, #150f12);
}

.sales-deliver-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.2vw, 30px);
  margin-top: clamp(30px, 3.4vw, 44px);
}

.sales-deliver-card {
  padding: 24px 24px 22px;
  border: 1px solid var(--line-dark-soft);
  background: rgba(21, 20, 22, 0.5);
}

.sales-deliver-card .sales-deliver-num {
  display: block;
  margin-bottom: 12px;
  color: rgba(200, 164, 104, 0.9);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.sales-deliver-card h3 {
  margin: 0 0 8px;
  color: var(--ivory);
  font-family: var(--font-editorial), Georgia, serif;
  font-size: 1.15rem;
  font-weight: 500;
  line-height: 1.25;
}

.sales-deliver-card p {
  margin: 0;
  color: var(--text-on-dark-muted);
  font-size: 0.95rem !important;
  line-height: 1.55;
}

/* Cualificación / descalificación */
.sales-cualifica-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 26px);
  margin-top: clamp(30px, 3.4vw, 44px);
}

.sales-cualifica-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  padding: 22px 24px;
  border: 1px solid var(--line-dark-soft);
  background: rgba(21, 20, 22, 0.5);
}

.sales-cualifica-card span {
  color: rgba(200, 164, 104, 0.85);
  font-family: var(--font-editorial), Georgia, serif;
  font-size: 1.4rem;
  font-style: italic;
  line-height: 1.1;
}

.sales-cualifica-card p {
  margin: 0;
  color: var(--text-on-dark-muted);
  font-size: 1rem !important;
  line-height: 1.55;
}

.sales-cualifica-card p b {
  color: var(--ivory);
  font-weight: 600;
}

.sales-descalifica {
  margin-top: clamp(34px, 4vw, 48px);
  padding: 28px 30px;
  border: 1px solid var(--line-dark-soft);
  border-left: 2px solid rgba(208, 29, 63, 0.6);
  background: rgba(21, 20, 22, 0.6);
}

.sales-descalifica-lbl {
  margin: 0 0 14px;
  color: rgba(245, 241, 232, 0.85);
  font-size: 0.74rem !important;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.sales-descalifica ul {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sales-descalifica li {
  padding-left: 24px;
  position: relative;
  color: var(--text-on-dark-muted);
  font-size: 1rem;
  line-height: 1.55;
}

.sales-descalifica li::before {
  content: "×";
  position: absolute;
  top: 0;
  left: 2px;
  color: rgba(208, 29, 63, 0.8);
  font-weight: 700;
}

.sales-descalifica-nota {
  margin: 18px 0 0 !important;
  color: #ead0a2;
  font-family: var(--font-editorial), Georgia, serif;
  font-size: 1.05rem !important;
  font-style: italic;
  line-height: 1.55;
}

/* Cierre emocional */
.sales-final-italic {
  color: #ead0a2 !important;
  font-family: var(--font-editorial), Georgia, serif;
  font-size: clamp(1.15rem, 1.7vw, 1.45rem) !important;
  font-style: italic;
  line-height: 1.6 !important;
}

.sales-final-cierre {
  display: grid;
  justify-items: center;
  margin-top: clamp(40px, 5vw, 60px);
  padding-top: clamp(30px, 3.6vw, 44px);
  border-top: 1px solid rgba(200, 164, 104, 0.22);
}

.sales-final-lbl {
  margin: 0 !important;
  color: rgba(200, 164, 104, 0.9);
  font-size: 0.74rem !important;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.sales-final-cierre h3 {
  max-width: 22ch;
  margin: 14px 0 0;
  color: var(--ivory);
  font-family: var(--font-editorial), Georgia, serif;
  font-size: clamp(1.7rem, 2.8vw, 2.4rem);
  font-weight: 500;
  line-height: 1.1;
  text-wrap: balance;
}

.sales-final-cierre h3 em {
  color: #ead0a2;
  font-style: italic;
}

.sales-final-firma {
  margin: 10px 0 0 !important;
  color: rgba(200, 164, 104, 0.75);
  font-family: var(--font-editorial), Georgia, serif;
  font-size: 1.05rem !important;
  font-style: italic;
}

/* Adaptadores del topbar y el sticky reutilizados (CSS base ya cargado por
   landing-production-source.css). Safe-area para el sticky flotante. */
.sales-page .sticky-cta {
  inset: auto max(18px, env(safe-area-inset-right)) max(18px, calc(12px + env(safe-area-inset-bottom))) auto;
}

@media (width <= 1100px) {
  .sales-bonus-grid,
  .sales-deliver-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sales-accompany {
    grid-template-columns: 1fr;
  }
  .sales-accompany-stat {
    max-width: 380px;
  }
}

@media (width <= 767px) {
  .sales-infostrip-grid {
    grid-template-columns: 1fr;
  }
  .sales-infostrip-cell {
    border-left: 0;
    border-top: 1px solid rgba(200, 164, 104, 0.16);
    padding: 18px 0;
  }
  .sales-infostrip-cell:first-child {
    border-top: 0;
  }
  .sales-transform-card {
    grid-auto-flow: row;
    grid-template-columns: 1fr;
    grid-template-rows: none;
    row-gap: 12px;
  }
  .sales-week-list li {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .sw-tag {
    width: fit-content;
  }
  .sales-modulos {
    padding: 20px 20px;
  }
  .sales-modulos ul {
    grid-template-columns: 1fr;
  }
  .sales-rutas-grid,
  .sales-vip,
  .sales-quotes,
  .sales-bonus-grid,
  .sales-deliver-grid,
  .sales-cualifica-grid {
    grid-template-columns: 1fr;
  }
  .sales-ruta-card,
  .sales-vip-card {
    padding: 24px 20px 22px;
  }
  .sales-descalifica {
    padding: 22px 20px;
  }
  .sales-rutas-nota,
  .sales-descalifica-nota {
    max-width: none;
  }
}

/* ── Polish visual v2 (dirección, 22-08-2026) ──────────────────────────────
   Bloque aditivo EXCLUSIVO de /programa: cartbar, diagnóstico editorial,
   encaje premium, testimonios, autoridad-industria (adaptación local del
   paquete aprobado), iconos de entregables, cabecera VIP y sticky propio.
   Namespace programa-* para no colisionar con nada compartido. */

/* Diagnóstico · momento editorial */
.programa-diag {
  display: grid;
  justify-items: start;
  text-align: left;
}

.programa-diag-head .eyebrow {
  margin-top: 14px;
  color: var(--gold-quiet);
  letter-spacing: 0.2em;
}

.programa-diag-intro {
  max-width: 54ch;
  margin-top: clamp(22px, 2.6vw, 32px);
}

.programa-diag-intro p {
  margin: 0;
  color: var(--text-on-dark);
  line-height: 1.75;
}

.programa-diag-dudas {
  display: grid;
  gap: 0;
  width: 100%;
  margin: clamp(30px, 3.6vw, 46px) 0 0;
  padding: 0;
  list-style: none;
}

.programa-diag-dudas li {
  padding: 16px 0 16px clamp(22px, 3vw, 40px);
  border-top: 1px solid var(--line-dark-soft);
  color: rgba(245, 241, 232, 0.9);
  font-family: var(--font-editorial), Georgia, serif;
  font-size: clamp(1.15rem, 1.8vw, 1.55rem);
  font-style: italic;
  line-height: 1.4;
  position: relative;
}

.programa-diag-dudas li:last-child {
  border-bottom: 1px solid var(--line-dark-soft);
}

.programa-diag-dudas li::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 4px;
  width: 7px;
  height: 7px;
  translate: 0 -50%;
  rotate: 45deg;
  background: var(--gold-quiet);
}

.programa-diag-statement {
  max-width: none !important;
  margin: clamp(44px, 6vw, 76px) 0 0 !important;
  font-size: clamp(2.6rem, 6.2vw, 5.4rem) !important;
  line-height: 0.98 !important;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.programa-diag-pesos {
  display: grid;
  gap: clamp(6px, 1vw, 10px);
  margin: clamp(30px, 3.8vw, 50px) 0 0;
  padding: 0 0 0 clamp(0px, 6vw, 96px);
  list-style: none;
}

.programa-diag-pesos li {
  color: rgba(245, 241, 232, 0.62);
  font-size: clamp(1.05rem, 1.6vw, 1.4rem);
  line-height: 1.4;
}

.programa-diag-pesos li em {
  color: #ead0a2;
  font-family: var(--font-editorial), Georgia, serif;
  font-style: italic;
}

.programa-diag-pesos li:nth-child(2) { margin-left: clamp(0px, 3vw, 48px); }
.programa-diag-pesos li:nth-child(3) { margin-left: clamp(0px, 1.5vw, 24px); }
.programa-diag-pesos li:nth-child(4) { margin-left: clamp(0px, 4.5vw, 72px); }

.programa-diag-cierre {
  max-width: 52ch;
  margin-top: clamp(40px, 5vw, 64px);
}

.programa-diag-cierre p {
  margin: 0 0 14px;
  color: var(--text-on-dark);
  line-height: 1.75;
}

.programa-diag-metodo {
  color: var(--ivory) !important;
  font-family: var(--font-editorial), Georgia, serif;
  font-size: clamp(1.2rem, 1.8vw, 1.5rem) !important;
  font-style: italic;
}

/* Encaje premium · perfiles conectados 01–05 */
.programa-fit-head h2 {
  margin-top: 14px;
}

.programa-fit-lista {
  display: grid;
  gap: 0;
  margin: clamp(34px, 4vw, 52px) 0 0;
  padding: 0;
  list-style: none;
}

.programa-fit-perfil {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: clamp(18px, 3vw, 44px);
  padding: clamp(18px, 2.4vw, 26px) 0;
  border-top: 1px solid var(--line-dark-soft);
}

.programa-fit-perfil:last-child {
  border-bottom: 1px solid var(--line-dark-soft);
}

/* Composición asimétrica en escritorio: la lista respira como un editorial,
   no como una grid de cards. */
@media (width >= 1101px) {
  .programa-fit-perfil:nth-child(2) { padding-left: clamp(0px, 4vw, 72px); }
  .programa-fit-perfil:nth-child(3) { padding-left: clamp(0px, 2vw, 36px); }
  .programa-fit-perfil:nth-child(4) { padding-left: clamp(0px, 6vw, 108px); }
  .programa-fit-perfil:nth-child(5) { padding-left: clamp(0px, 1vw, 18px); }
}

.programa-fit-num {
  color: rgba(200, 164, 104, 0.75);
  font-family: var(--font-editorial), Georgia, serif;
  font-size: clamp(1.9rem, 3vw, 2.9rem);
  font-style: italic;
  line-height: 1;
}

.programa-fit-perfil p {
  margin: 0;
  max-width: 56ch;
  color: var(--text-on-dark-muted);
  font-size: clamp(1.05rem, 1.5vw, 1.3rem) !important;
  line-height: 1.55;
}

.programa-fit-perfil p b {
  color: var(--ivory);
  font-family: var(--font-editorial), Georgia, serif;
  font-weight: 500;
}

.programa-fit-no {
  margin-top: clamp(40px, 5vw, 60px);
  padding: clamp(26px, 3.2vw, 38px) clamp(24px, 3vw, 40px);
  border: 1px solid rgba(208, 29, 63, 0.28);
  border-left: 2px solid rgba(208, 29, 63, 0.6);
  background: linear-gradient(160deg, rgba(64, 14, 26, 0.28), rgba(21, 20, 22, 0.85));
}

.programa-fit-no-lbl {
  margin: 0 0 16px;
  color: rgba(245, 241, 232, 0.9);
  font-size: 0.76rem !important;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.programa-fit-no ul {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.programa-fit-no li {
  padding-left: 24px;
  position: relative;
  color: var(--text-on-dark-muted);
  font-size: 1rem;
  line-height: 1.55;
}

.programa-fit-no li::before {
  content: "×";
  position: absolute;
  top: 0;
  left: 2px;
  color: rgba(208, 29, 63, 0.8);
  font-weight: 700;
}

.programa-fit-no-nota {
  margin: 18px 0 0 !important;
  max-width: 58ch;
  color: #ead0a2;
  font-family: var(--font-editorial), Georgia, serif;
  font-size: 1.05rem !important;
  font-style: italic;
  line-height: 1.55;
}

/* Cabecera del bloque VIP */
.programa-vip-head {
  margin-top: clamp(44px, 5.5vw, 70px);
  padding-top: clamp(34px, 4vw, 48px);
  border-top: 1px solid rgba(200, 164, 104, 0.2);
}

.programa-vip-head .eyebrow {
  color: var(--gold-quiet);
  letter-spacing: 0.2em;
}

.programa-vip-head h2 {
  margin-top: 12px;
  max-width: none;
}

.programa-vip-head h2 em {
  color: #ead0a2;
  font-style: italic;
}

/* Testimonios · 3 cards editoriales */
.programa-testi-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.2vw, 30px);
  margin-top: clamp(34px, 4vw, 52px);
}

.programa-testi-card {
  display: grid;
  align-content: start;
  gap: 14px;
  padding: clamp(26px, 3vw, 34px) clamp(24px, 2.8vw, 32px);
  border: 1px solid rgba(200, 164, 104, 0.24);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(96, 20, 40, 0.16), transparent 70%),
    rgba(21, 20, 22, 0.62);
}

.programa-testi-card:nth-child(2) {
  border-color: rgba(200, 164, 104, 0.4);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(96, 20, 40, 0.24), transparent 70%),
    linear-gradient(170deg, rgba(33, 26, 20, 0.7), rgba(21, 20, 22, 0.92));
}

.programa-testi-stars {
  color: rgba(200, 164, 104, 0.85);
  font-size: 0.78rem;
  letter-spacing: 0.32em;
}

.programa-testi-card blockquote {
  margin: 0;
}

.programa-testi-card blockquote p {
  margin: 0;
  color: rgba(245, 241, 232, 0.92);
  font-family: var(--font-editorial), Georgia, serif;
  font-size: clamp(1.08rem, 1.4vw, 1.24rem) !important;
  font-style: italic;
  line-height: 1.6;
}

.programa-testi-card footer {
  display: grid;
  gap: 2px;
  padding-top: 14px;
  border-top: 1px solid rgba(200, 164, 104, 0.18);
}

.programa-testi-card footer b {
  color: var(--ivory);
  font-size: 0.92rem;
  font-weight: 700;
}

.programa-testi-card footer small {
  color: rgba(200, 164, 104, 0.85);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Autoridad · industria (adaptación local del paquete aprobado) */
.programa-aut {
  --paut-gutter: clamp(18px, 4vw, 48px);
  --paut-logo-gap: clamp(3.2rem, 5vw, 5.2rem);
  --paut-foto-gap: clamp(0.9rem, 1.5vw, 1.4rem);
  --paut-foto-alto: clamp(19rem, 28vw, 25.5rem);
  position: relative;
  isolation: isolate;
  overflow: clip;
  border-block: 1px solid var(--line-dark-soft);
  background:
    radial-gradient(60% 90% at 16% 6%, rgba(96, 20, 40, 0.22), transparent 64%),
    linear-gradient(180deg, #140e11 0%, #0e0b0c 58%, #0a0909 100%);
}

.programa-aut-intro {
  width: min(1180px, calc(100% - 2 * var(--paut-gutter)));
  margin-inline: auto;
  margin-bottom: clamp(2.4rem, 4.4vw, 4rem);
  text-align: center;
}

.programa-aut-intro .eyebrow {
  color: var(--gold-quiet);
  letter-spacing: 0.2em;
}

.programa-aut-ornament {
  position: relative;
  display: block;
  width: 148px;
  height: 9px;
  margin: 16px auto clamp(1.3rem, 2.2vw, 1.9rem);
}

.programa-aut-ornament::before {
  content: "";
  position: absolute;
  top: 4px;
  right: 0;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(200, 164, 104, 0.1), rgba(200, 164, 104, 0.55) 50%, rgba(200, 164, 104, 0.1));
}

.programa-aut-ornament::after {
  content: "";
  position: absolute;
  top: 1px;
  left: calc(50% - 3.5px);
  width: 7px;
  height: 7px;
  border: 1px solid rgba(200, 164, 104, 0.7);
  background: #1c0c12;
  rotate: 45deg;
}

.programa-aut h2 {
  max-width: 22ch;
  margin: 0 auto;
  font-size: clamp(2.2rem, 4.2vw, 4rem);
  line-height: 1.02;
  text-wrap: balance;
}

.programa-aut h2 em {
  color: var(--ivory);
  font-style: italic;
}

.programa-aut-viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 5.5%, #000 94.5%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 5.5%, #000 94.5%, transparent 100%);
}

.programa-aut-track {
  display: flex;
  width: max-content;
  animation: programa-aut-scroll var(--paut-duracion, 80s) linear infinite;
  will-change: transform;
}

.programa-aut-marquee--logos .programa-aut-track {
  --paut-duracion: 64s;
}

.programa-aut-marquee--fotos .programa-aut-track {
  --paut-duracion: 150s;
}

@keyframes programa-aut-scroll {
  to {
    transform: translate3d(-50%, 0, 0);
  }
}

@media (hover: hover) and (pointer: fine) {
  .programa-aut-marquee:hover .programa-aut-track {
    animation-play-state: paused;
  }
}

.programa-aut-logos {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--paut-logo-gap);
  min-width: max-content;
  margin: 0;
  padding: 0.25rem var(--paut-logo-gap) 0.25rem 0;
  list-style: none;
}

.programa-aut-logo {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
}

.programa-aut-logo img {
  display: block;
  width: auto;
  height: clamp(2.1rem, 2.9vw, 2.9rem);
  max-width: min(15rem, 24vw);
  object-fit: contain;
  opacity: 0.74;
  transition: opacity 320ms ease;
  user-select: none;
  -webkit-user-drag: none;
}

.programa-aut-logo--compacto img {
  height: clamp(1.85rem, 2.4vw, 2.35rem);
  max-width: min(13rem, 22vw);
}

@media (hover: hover) and (pointer: fine) {
  .programa-aut-logo img:hover {
    opacity: 1;
  }
}

.programa-aut-hitos {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  column-gap: clamp(1.3rem, 2.6vw, 2.6rem);
  row-gap: 0.85rem;
  width: min(1180px, calc(100% - 2 * var(--paut-gutter)));
  margin: clamp(2rem, 3.6vw, 3.2rem) auto 0;
  padding: 0;
  list-style: none;
}

.programa-aut-hitos li {
  display: inline-flex;
  align-items: baseline;
  gap: 0.6rem;
}

.programa-aut-hito-cat {
  color: var(--gold-quiet);
  font-size: 0.52rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.programa-aut-hito-hecho {
  font-family: var(--font-editorial), Georgia, serif;
  font-size: clamp(0.98rem, 1.1vw, 1.12rem);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}

.programa-aut-sep {
  display: grid;
  grid-template-columns: minmax(2rem, 1fr) auto minmax(2rem, 1fr);
  align-items: center;
  gap: clamp(1rem, 2vw, 1.75rem);
  width: min(1380px, calc(100% - 2 * var(--paut-gutter)));
  margin: clamp(2.1rem, 4vw, 3.6rem) auto clamp(2.1rem, 3.6vw, 3.2rem);
}

.programa-aut-sep span {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(200, 164, 104, 0.22) 18%, rgba(200, 164, 104, 0.22) 82%, transparent);
}

.programa-aut-sep i {
  display: block;
  inline-size: 0.55rem;
  block-size: 0.55rem;
  border: 1px solid rgba(200, 164, 104, 0.55);
  transform: rotate(45deg);
}

.programa-aut-archivo {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--paut-foto-gap);
  min-width: max-content;
  padding-inline-end: var(--paut-foto-gap);
}

.programa-aut-figura {
  position: relative;
  flex: 0 0 auto;
  margin: 0;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.025);
  outline: 1px solid rgba(200, 164, 104, 0.12);
  outline-offset: -1px;
}

.programa-aut-figura::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.025),
    inset 0 -5rem 7rem rgba(6, 4, 5, 0.12);
}

.programa-aut-figura img {
  display: block;
  width: auto;
  height: var(--paut-foto-alto);
  max-width: min(80vw, 32rem);
  object-fit: contain;
  background: #0a0809;
  filter: saturate(0.92) contrast(1.02);
  user-select: none;
  -webkit-user-drag: none;
}

@media (max-width: 1039px) {
  .programa-aut {
    --paut-logo-gap: clamp(2.8rem, 5.2vw, 3.8rem);
    --paut-foto-alto: clamp(16.5rem, 32vw, 21.5rem);
  }

  .programa-aut-marquee--fotos .programa-aut-viewport {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .programa-aut-marquee--fotos .programa-aut-viewport::-webkit-scrollbar {
    display: none;
  }

  .programa-aut-marquee--fotos .programa-aut-track {
    width: auto;
    animation: none;
    will-change: auto;
  }

  .programa-aut-marquee--fotos [data-clon] {
    display: none;
  }

  .programa-aut-archivo {
    padding-inline: var(--paut-gutter);
  }

  .programa-aut-figura {
    scroll-snap-align: start;
  }
}

/* Iconos de entregables */
.programa-deliver-icono {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 14px;
  border: 1px solid rgba(200, 164, 104, 0.35);
  border-radius: 50%;
  color: #ead0a2;
}

.programa-deliver-icono svg {
  width: 26px;
  height: 26px;
}

/* Sticky propio de /programa */
.programa-sticky > div strong {
  font-size: 1.02rem;
}

/* Responsive del bloque nuevo */
@media (width <= 1100px) {
  .programa-testi-grid {
    grid-template-columns: 1fr;
    max-width: 620px;
  }
}

@media (width <= 767px) {
  .programa-diag-statement {
    font-size: clamp(2.3rem, 11vw, 3rem) !important;
  }

  .programa-diag-pesos {
    padding-left: 0;
  }

  .programa-diag-pesos li:nth-child(n) {
    margin-left: 0;
  }

  .programa-fit-perfil {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 14px;
  }

  .programa-fit-num {
    font-size: 1.6rem;
  }

  .programa-fit-no {
    padding: 22px 18px;
  }

  .programa-aut {
    --paut-gutter: 16px;
    --paut-logo-gap: clamp(2.1rem, 8.5vw, 2.9rem);
    --paut-foto-gap: clamp(0.8rem, 3.5vw, 1rem);
    --paut-foto-alto: clamp(14.5rem, 70vw, 18.5rem);
  }

  .programa-aut h2 {
    max-width: 15ch;
    font-size: clamp(2rem, 9.6vw, 2.9rem);
  }

  .programa-aut-viewport {
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 4.25%, #000 95.75%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 4.25%, #000 95.75%, transparent 100%);
  }

  .programa-aut-marquee--fotos .programa-aut-viewport {
    -webkit-mask-image: none;
    mask-image: none;
  }

  .programa-aut-logo img {
    height: clamp(1.6rem, 7.2vw, 2rem);
    max-width: 42vw;
  }

  .programa-aut-logo--compacto img {
    height: clamp(1.4rem, 6.4vw, 1.7rem);
    max-width: 38vw;
  }

  .programa-aut-figura img {
    max-width: 84vw;
  }

  /* En móvil el sticky de /programa apila frase + botón (el compartido de
     captación oculta el texto; aquí la frase es la jerarquía pedida). */
  .sales-page .programa-sticky {
    inset: auto 10px calc(10px + env(safe-area-inset-bottom)) 10px;
  }

  .programa-sticky {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 10px 10px calc(10px + env(safe-area-inset-bottom) / 2);
  }

  .programa-sticky > div {
    display: grid;
    justify-items: center;
  }

  .programa-sticky > div strong {
    font-size: 0.88rem;
  }
}

/* Reduced motion: marquees quietos y desplazables a mano */
@media (prefers-reduced-motion: reduce) {
  .programa-aut-viewport {
    overflow-x: auto;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .programa-aut-viewport::-webkit-scrollbar {
    display: none;
  }

  .programa-aut-track {
    width: auto;
    animation: none !important;
    will-change: auto;
  }

  .programa-aut [data-clon] {
    display: none;
  }

  .programa-aut-logos,
  .programa-aut-archivo {
    padding-inline: var(--paut-gutter);
  }
}

/* ── Topbar único de /programa (dirección, 22-08-2026) ─────────────────────
   El `.announcement` de esta página reutiliza las clases compartidas para
   heredar carmín, sticky, altura y estilo del CTA; aquí solo se define el
   CONTENIDO propio. Doble aislamiento: este fichero lo carga únicamente
   /programa y todos los selectores cuelgan de `.sales-page`, clase que no
   existe en `/` ni en `/ads`. landing-production-source.css no se toca. */

.sales-page .programa-announcement-brand,
.sales-page .programa-announcement-deadline {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  margin: 0;
  line-height: 1;
  white-space: nowrap;
}

/* Columna 1 de la rejilla compartida (auto | 1fr | auto) */
.sales-page .programa-announcement-brand {
  gap: 7px;
  color: rgba(245, 241, 232, 0.94);
  font-size: 0.63rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.sales-page .programa-announcement-brand > span[aria-hidden],
.sales-page .paa-sep {
  color: rgba(245, 241, 232, 0.42);
  font-weight: 700;
}

/* El color, el peso y el tracking del método los fija ahora el bloque A
   (marfil pleno + `--paa-tracking`). Esta regla solo conservaba valores
   muertos que ya ganaba una posterior: se retira para que no vuelvan a
   reaparecer en una futura reordenación del fichero. */
.sales-page .paa-metodo {
  font-weight: 700;
}

/* Columna 2: el aviso de cierre, centrado como el bloque estático original */
.sales-page .programa-announcement-deadline {
  justify-content: center;
  gap: 9px;
  overflow: hidden;
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.sales-page .programa-announcement-deadline svg {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
  opacity: 0.85;
}

.sales-page .paa-texto b {
  font-weight: 900;
}

.sales-page .paa-punto {
  color: rgba(245, 241, 232, 0.34);
}

/* El reloj es la pieza legible dominante: fondo propio, como el countdown
   original, y cifras tabulares para que no baile al descontar. */
.sales-page .programa-announcement-clock {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  min-height: 26px;
  padding: 0 10px;
  border: 1px solid rgba(245, 241, 232, 0.18);
  border-radius: 4px;
  background: rgba(72, 0, 15, 0.2);
  box-shadow: inset 0 0 0 1px rgba(245, 241, 232, 0.035);
  color: var(--ivory);
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.045em;
  font-variant-numeric: tabular-nums;
  text-transform: none;
}

/* ── Tablet estrecha: se recorta el método, nunca el cierre ─────────────── */
@media (width <= 900px) {
  .sales-page .programa-announcement-brand {
    font-size: 0.58rem;
    letter-spacing: 0.1em;
  }

  .sales-page .paa-metodo {
    display: none;
  }

  .sales-page .programa-announcement-brand .paa-sep {
    display: none;
  }

  .sales-page .programa-announcement-deadline {
    gap: 7px;
    font-size: 0.57rem;
    letter-spacing: 0.05em;
  }
}

/* ── Móvil: marca + cierre + CTA en una barra compacta ──────────────────── */
@media (width <= 767px) {
  /* La rejilla compartida pasa a 2 columnas y manda el botón a la 2ª: aquí
     se recupera una fila de tres piezas propias, sin tocar el original. */
  .sales-page .announcement-inner {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 8px;
  }

  .sales-page .announcement-inner > button {
    grid-column: 3;
  }

  .sales-page .programa-announcement-brand {
    gap: 5px;
    font-size: 0.53rem;
    letter-spacing: 0.08em;
  }

  .sales-page .programa-announcement-brand > span[aria-hidden]:first-child {
    display: none;
  }

  .sales-page .programa-announcement-deadline {
    justify-content: flex-end;
    gap: 6px;
  }

  /* El texto largo cede el sitio: en móvil el dato accionable es el reloj
     (el aviso completo sigue en el texto para lectores de pantalla). */
  .sales-page .paa-texto,
  .sales-page .paa-punto,
  .sales-page .programa-announcement-deadline svg {
    display: none;
  }

  .sales-page .programa-announcement-clock {
    min-height: 24px;
    padding: 0 8px;
    font-size: 0.64rem;
  }

  .sales-page .programa-announcement-clock::before {
    content: "Cierra en";
    margin-right: 7px;
    color: rgba(245, 241, 232, 0.66);
    font-size: 0.48rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
}

@media (width <= 380px) {
  .sales-page .programa-announcement-brand {
    font-size: 0.5rem;
    letter-spacing: 0.06em;
  }

  .sales-page .programa-announcement-clock {
    padding: 0 6px;
    font-size: 0.6rem;
  }

  .sales-page .programa-announcement-clock::before {
    margin-right: 5px;
    font-size: 0.44rem;
    letter-spacing: 0.08em;
  }
}

/* ── Bonus + Testimonios · maquetación premium (dirección, 22-08-2026) ─────
   Tres piezas: iconografía y equilibrado de las 6 cards de bonus, ritmo
   editorial de los testimonios escritos, y galería de vídeo en frames 1:1
   idénticos (4×1 → 2×2 → carril con scroll-snap). Todo CSS: cero JS, cero
   peticiones nuevas. Los <video> conservan intactos src/poster/controls. */

/* ── 07 · Bonus ─────────────────────────────────────────────────────────── */
.sales-bonus-grid {
  grid-auto-rows: 1fr;               /* filas iguales: la fila manda, no la card */
  gap: clamp(14px, 1.8vw, 24px);
}

.sales-bonus-card {
  display: flex;
  flex-direction: column;
  padding: clamp(22px, 2.2vw, 28px) clamp(20px, 2vw, 26px) clamp(20px, 2vw, 24px);
  background:
    linear-gradient(180deg, rgba(200, 164, 104, 0.045), transparent 42%),
    rgba(21, 20, 22, 0.5);
  transition: border-color 0.3s ease, background 0.3s ease;
}

@media (hover: hover) and (pointer: fine) {
  .sales-bonus-card:hover {
    border-color: rgba(200, 164, 104, 0.42);
  }
}

.programa-bonus-icono {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  margin-bottom: clamp(14px, 1.6vw, 18px);
  border: 1px solid rgba(200, 164, 104, 0.34);
  border-radius: 50%;
  color: #ead0a2;
}

.programa-bonus-icono svg {
  width: 20px;
  height: 20px;
}

.sales-bonus-card b {
  /* Reserva de dos líneas: las descripciones de una misma fila arrancan a la
     misma altura sin imponer una altura fija a toda la sección. */
  min-height: calc(2 * 1.28em);
  margin-bottom: 10px;
  font-size: clamp(1.02rem, 1.1vw, 1.14rem);
  line-height: 1.28;
  text-wrap: balance;
}

.sales-bonus-card p {
  margin: 0;
  max-width: 34ch;
  font-size: 0.92rem !important;
  line-height: 1.6;
}

/* ── 08 · Testimonios escritos ──────────────────────────────────────────── */
.programa-testi-grid {
  grid-auto-rows: 1fr;
  gap: clamp(16px, 1.8vw, 26px);
  margin-top: clamp(30px, 3.2vw, 42px);
}

.programa-testi-card {
  display: flex;                     /* footer al fondo aunque el quote sea corto */
  flex-direction: column;
  gap: 0;
  padding: clamp(24px, 2.6vw, 30px) clamp(22px, 2.4vw, 28px) clamp(20px, 2.2vw, 24px);
}

.programa-testi-stars {
  margin-bottom: 14px;
  font-size: 0.66rem;
  letter-spacing: 0.28em;
  opacity: 0.85;
}

.programa-testi-card blockquote {
  flex: 1 1 auto;
}

.programa-testi-card blockquote p {
  max-width: 38ch;
  font-size: clamp(1.02rem, 1.15vw, 1.14rem) !important;
  line-height: 1.62;
}

.programa-testi-card footer {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-top: clamp(18px, 2vw, 24px);
  padding-top: 13px;
}

.programa-testi-card footer b {
  font-size: 0.86rem;
  letter-spacing: 0.01em;
}

.programa-testi-card footer small {
  font-size: 0.66rem;
  letter-spacing: 0.14em;
}

/* ── 08b · Galería de vídeo ─────────────────────────────────────────────── */
.programa-galeria-sep {
  display: grid;
  grid-template-columns: minmax(1.5rem, 1fr) auto minmax(1.5rem, 1fr);
  align-items: center;
  gap: clamp(0.9rem, 1.8vw, 1.6rem);
  margin: clamp(36px, 4.4vw, 58px) auto clamp(26px, 3vw, 38px);
}

.programa-galeria-sep span {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(200, 164, 104, 0.22) 20%, rgba(200, 164, 104, 0.22) 80%, transparent);
}

.programa-galeria-sep i {
  display: block;
  inline-size: 0.5rem;
  block-size: 0.5rem;
  border: 1px solid rgba(200, 164, 104, 0.5);
  transform: rotate(45deg);
}

.programa-videos {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 20px);
  margin-top: 0;
}

.programa-video {
  min-width: 0;
}

/* Frame idéntico para los cuatro: el vídeo se encuadra, nunca se deforma. */
.programa-video video {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  max-height: none;
  object-fit: cover;
  border: 1px solid rgba(200, 164, 104, 0.24);
  border-radius: 4px;
  background: #0a0809;
}

/* Encuadres puntuales: solo donde el rostro lo pide (verticales altos). */
.programa-video--atelier video,
.programa-video--patrones video,
.programa-video--estudio video {
  object-position: center center;
}

.programa-video--costura video {
  object-position: center 25%;
}

/* ── 1100 · el bonus pasa a 2×3 (títulos largos piden ancho) pero los tres
      testimonios y los cuatro vídeos siguen en una fila: a 1043 px de shell
      cada frame queda en ~249 px, tamaño de galería, no de reproductor. ── */
@media (width <= 1100px) {
  .sales-bonus-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Gana a la regla previa que colapsaba los testimonios a 1 columna. */
  .sales-proof .programa-testi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: none;
  }

  .programa-videos {
    gap: clamp(12px, 1.6vw, 16px);
  }
}

/* Por debajo de 1024 los cuatro frames ya no dan área cómoda de control:
   pasan a 2×2, que es lo que pide la tablet. */
@media (width <= 1024px) {
  .programa-videos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(14px, 2vw, 20px);
    /* Tope de galería: en 2×2 un frame nunca debe crecer hasta parecer un
       reproductor. Con 760 px máximos el lado se queda en ~370 px. */
    max-width: 760px;
    margin-inline: auto;
  }
}

@media (width <= 900px) {
  .sales-proof .programa-testi-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    max-width: 660px;
  }

  .programa-testi-card blockquote p {
    max-width: none;
  }
}

@media (width <= 767px) {
  .programa-videos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ── Móvil: bonus en fila compacta y vídeos en carril con scroll-snap ───── */
@media (width <= 600px) {
  .sales-bonus-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;            /* cada card respira según su contenido */
    gap: 12px;
  }

  /* Composición horizontal: el icono deja de ocupar una línea entera. */
  .sales-bonus-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 16px;
    row-gap: 6px;
    padding: 18px 18px 20px;
  }

  .programa-bonus-icono {
    width: 34px;
    height: 34px;
    margin: 2px 0 0;
    grid-row: span 2;
  }

  .programa-bonus-icono svg {
    width: 18px;
    height: 18px;
  }

  .sales-bonus-card b {
    min-height: 0;
    margin-bottom: 0;
    align-self: center;
    font-size: 1rem;
  }

  .sales-bonus-card p {
    grid-column: 2;
    max-width: none;
    font-size: 0.9rem !important;
  }

  .programa-testi-card {
    padding: 22px 20px 20px;
  }

  .programa-testi-stars {
    margin-bottom: 12px;
    font-size: 0.6rem;
  }

  .programa-testi-card blockquote p {
    font-size: 1.02rem !important;
    line-height: 1.6;
  }

  /* Carril horizontal: una card completa + parte de la siguiente como
     affordance. Sangra hasta el borde de pantalla pero alinea la primera
     card con la shell. Sin JS: scroll nativo con snap. */
  .programa-videos {
    display: flex;
    grid-template-columns: none;
    gap: 12px;
    margin-inline: -22px;
    padding-inline: 22px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 22px;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .programa-videos::-webkit-scrollbar {
    display: none;
  }

  .programa-video {
    flex: 0 0 72vw;
    max-width: 320px;
    scroll-snap-align: start;
  }

  /* El último no queda pegado al borde derecho. */
  .programa-video:last-child {
    margin-inline-end: 22px;
  }

  .programa-galeria-sep {
    margin-block: clamp(28px, 7vw, 38px) clamp(20px, 5vw, 26px);
  }

  .sales-proof-note {
    margin-top: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .programa-videos {
    scroll-behavior: auto;
  }

  .sales-bonus-card {
    transition: none;
  }
}

/* ══ POLISH UX/UI FINAL (dirección, 23-08-2026) ═══════════════════════════
   Ocho cambios aprobados: diag-box, escudo de garantía, énfasis comerciales,
   fix del 2+1 en solicitud, medida de lectura en escritorio, ritmo vertical
   en tres escalones, iconos de bonus y secuencia de fondos con intención.
   Cero JS, cero peticiones, cero colores nuevos. */

/* ── 1 · Diag-box del acompañamiento ────────────────────────────────────── */
.programa-diag-box {
  /* La caja abraza su texto: sin ella, el tope de medida dejaba medio
     recuadro vacío a la derecha. */
  max-width: 52ch;
  margin-top: clamp(22px, 2.4vw, 30px);
  padding: clamp(20px, 2.2vw, 26px) clamp(20px, 2.2vw, 28px);
  border-left: 2px solid rgba(200, 164, 104, 0.62);
  background: rgba(21, 20, 22, 0.55);
}

.programa-diag-box-lbl {
  margin: 0 0 10px !important;
  color: rgba(200, 164, 104, 0.9);
  font-size: 0.68rem !important;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.programa-diag-box p:last-child {
  margin: 0;
  color: rgba(245, 241, 232, 0.9);
  font-family: var(--font-editorial), Georgia, serif;
  font-size: clamp(1.04rem, 1.3vw, 1.18rem) !important;
  font-style: italic;
  line-height: 1.62;
}

/* ── 2 · Escudo de garantía: medallón, hairline y halo apenas perceptible ─ */
.programa-escudo {
  display: grid;
  place-items: center;
  width: clamp(64px, 6vw, 72px);
  height: clamp(64px, 6vw, 72px);
  margin: 0 auto clamp(20px, 2.4vw, 28px);
  border: 1px solid rgba(200, 164, 104, 0.34);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 42%, rgba(200, 164, 104, 0.09), transparent 68%);
  color: #ead0a2;
}

.programa-escudo svg {
  width: 50%;
  height: 50%;
}

/* ── 3 · Garantía: medida de lectura y foco en las dos promesas ─────────── */
.sales-garantia p:last-child {
  max-width: 62ch;
}

.sales-garantia strong {
  color: var(--ivory);
  font-weight: 600;
}

/* Los énfasis del cuerpo comparten tratamiento: un punto más de luz, sin
   convertirse en negrita gritona. */
.sales-main p strong {
  color: rgba(245, 241, 232, 0.98);
  font-weight: 600;
}

/* ── 4 · Solicitud: 3 pasos, nunca 2+1 ──────────────────────────────────── */
@media (width <= 1100px) and (width >= 901px) {
  .sales-step-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(16px, 2vw, 26px);
  }
}

@media (width <= 900px) {
  .sales-step-list {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}

/* ── 5 · Medida de lectura ───────────────────────────────────────────────
   Objetivo: ~68 caracteres REALES por línea. Ojo: la unidad `ch` mide el
   glifo «0», más ancho que la media, y el factor cambia por familia — en
   Manrope ~1.4 caracteres reales por `ch`, en Bodoni itálica ~1.8. Por eso
   los topes no son el mismo número: están calibrados por medición, no a
   ojo. Se aplican desde 601 px (por debajo, la shell ya acota sola) y solo
   al texto corrido: ninguna card, grid, imagen ni layout se estrecha. */
@media (width >= 601px) {
  .sales-recognise-intro p,
  .sales-recognise-criterio,
  .sales-method-body p,
  .sales-accompany-texto p,
  .sales-vip-nota,
  .sales-steps-note,
  .sales-faq .faq-list p,
  .sales-garantia p:last-child {
    max-width: 50ch;
  }

  .sales-rutas-nota,
  .programa-fit-no-nota {
    max-width: 40ch;
  }

  /* Los centrados conservan su composición al acotarse. */
  .sales-garantia p:last-child,
  .sales-transform .sales-section-sub,
  .sales-deliver .sales-section-sub {
    margin-inline: auto;
    max-width: 50ch;
  }
}

/* ── 6 · Ritmo vertical en tres escalones ───────────────────────────────
   Escritorio conserva la generosidad editorial; móvil recorta el aire
   sobrante entre bloques largos para que la lectura avance más rápido
   sin quitar ni una palabra. */
.sales-main section {
  --ritmo-t: clamp(72px, 8vw, 128px);
  --ritmo-b: clamp(72px, 8vw, 128px);
  padding-block: var(--ritmo-t) var(--ritmo-b);
}

/* COMPACT · piezas de transición */
.sales-infostrip,
.sales-rutas,
.sales-deliver {
  --ritmo-t: clamp(56px, 6vw, 96px);
  --ritmo-b: clamp(56px, 6vw, 96px);
}

.sales-infostrip {
  --ritmo-t: 0px;
  --ritmo-b: 0px;
}

/* MOMENT · el aire va ANTES, para que el bloque entre con pausa, y se
   recorta después para encadenar con lo que sigue. */
.programa-aut,
.sales-why,
.sales-proof,
.sales-garantia,
.sales-final {
  --ritmo-t: clamp(88px, 9.5vw, 152px);
  --ritmo-b: clamp(72px, 7.5vw, 120px);
}

.sales-garantia {
  --ritmo-t: clamp(80px, 8.5vw, 132px);
  --ritmo-b: clamp(80px, 8.5vw, 132px);
}

@media (width <= 767px) {
  .sales-main section {
    --ritmo-t: clamp(48px, 10.5vw, 64px);
    --ritmo-b: clamp(48px, 10.5vw, 64px);
  }

  .sales-infostrip {
    --ritmo-t: 0px;
    --ritmo-b: 0px;
  }

  /* Secciones largas: el bloque ya es su propio descanso. */
  .sales-transform,
  .sales-method,
  .sales-rutas,
  .sales-bonus,
  .sales-deliver,
  .sales-proof {
    --ritmo-b: clamp(38px, 8vw, 50px);
  }

  .programa-aut,
  .sales-why,
  .sales-garantia,
  .sales-final {
    --ritmo-t: clamp(58px, 12vw, 76px);
  }

  /* Huecos duplicados: un grid ya deja su propio margen inferior, y una
     cabecera no necesita el mismo aire que un cambio de argumento. */
  .sales-cta-block--inline {
    margin-top: clamp(22px, 5vw, 28px);
  }

  .sales-transform-grid,
  .sales-week-list,
  .sales-bonus-grid,
  .sales-deliver-grid,
  .programa-fit-lista,
  .sales-rutas-grid {
    margin-top: clamp(22px, 5.5vw, 30px);
  }

  .sales-modulos,
  .programa-fit-no,
  .sales-accompany {
    margin-top: clamp(24px, 6vw, 32px);
  }

  .sales-accompany {
    padding-top: clamp(24px, 6vw, 32px);
  }

  .programa-vip-head {
    margin-top: clamp(30px, 7vw, 40px);
    padding-top: clamp(24px, 6vw, 32px);
  }

  .sales-section-sub {
    margin-top: 14px;
  }
}

/* ── 7 · Iconos de bonus: caja común y corrección óptica puntual ────────── */
.programa-bonus-icono svg {
  width: 20px;
  height: 20px;
}

/* La estrella llena más su caja que el resto: se compensa 1 px. */
.sales-bonus-card:nth-child(1) .programa-bonus-icono svg {
  width: 19px;
  height: 19px;
}

/* El círculo con cruz pesa ópticamente más: trazo un punto más fino. */
.sales-bonus-card:nth-child(6) .programa-bonus-icono svg {
  stroke-width: 1.45;
}

/* ── 8 · Secuencia de fondos · tres niveles del MISMO negro ──────────────
   BASE     #0e0b0c (el de la página)
   TENSION  #0b0809 · un punto más profundo: diagnóstico, prueba y cierre
   RELIEF   #15101300 → #171114 · un punto más cálido: infostrip y garantía
   Ningún color nuevo: son variaciones del noir existente. */
.sales-why,
.sales-proof {
  background:
    radial-gradient(48% 40% at 6% 12%, rgba(96, 20, 40, 0.2), transparent 72%),
    #0b0809;
}

.sales-final {
  background:
    radial-gradient(64% 52% at 50% 20%, rgba(96, 20, 40, 0.34), transparent 72%),
    linear-gradient(180deg, #120e10, #0b0809);
}

.sales-garantia {
  background:
    radial-gradient(52% 46% at 50% 0%, rgba(200, 164, 104, 0.07), transparent 70%),
    #171114;
  border-block: 1px solid rgba(200, 164, 104, 0.16);
}

.sales-infostrip {
  background: #171114;
}

/* Transición hacia el momento de tensión: hairline, no decoración. */
.sales-why,
.sales-proof {
  border-top: 1px solid rgba(200, 164, 104, 0.12);
}

/* ══ HERO · polish visual (dirección, 23-08-2026 · opción 2) ═══════════════
   Seis ajustes propios + hairlines del eyebrow e iconos del micro-trust de
   la referencia. El CTA queda EXPRESAMENTE fuera: conserva su presencia
   contenida (H1 > CTA). Header sin tocar. Solo CSS y markup presentacional. */

/* ── A · Eyebrow con hairlines ──────────────────────────────────────────── */
.sales-hero .sales-eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 2vw, 26px);
  width: min(100%, 640px);
  margin-inline: auto;
}

.programa-hairline {
  flex: 1 1 auto;
  max-width: 118px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(200, 164, 104, 0.5));
}

.programa-hairline:last-child {
  background: linear-gradient(90deg, rgba(200, 164, 104, 0.5), transparent);
}

.programa-eyebrow-texto {
  flex: 0 0 auto;
  white-space: nowrap;      /* el «·» nunca queda colgando de una línea */
}

/* ── 1 · H1: dos líneas limpias en móvil ────────────────────────────────
   El salto de la frase lo marca el <br> del markup; lo que sobraba era
   tamaño, no texto. Con esta escala «Te falta saber venderlo.» cabe entera
   en su línea desde 360 px. */
@media (width <= 480px) {
  .sales-hero h1 {
    max-width: 20ch;
    font-size: clamp(1.72rem, 7.6vw, 2.2rem);
    line-height: 1.06;
    letter-spacing: -0.005em;
  }

  /* ── 7 · Subheadline: pieza editorial, no párrafo roto ── */
  .sales-hero-italic {
    max-width: 28ch;
    margin-top: 16px;
    font-size: clamp(1rem, 4.4vw, 1.12rem);
    line-height: 1.5;
  }

  .sales-hero .sales-lead {
    margin-top: 16px;
  }

  /* ── 2 · Eyebrow: hairlines cortas y texto en una sola línea ── */
  .sales-hero .sales-eyebrow {
    gap: 10px;
  }

  .programa-hairline {
    max-width: 34px;
  }

  .programa-eyebrow-texto {
    font-size: 0.62rem;
    letter-spacing: 0.14em;
  }
}

/* ── 6 · Body copy: ~62 caracteres reales en escritorio ─────────────────── */
@media (width >= 601px) {
  .sales-hero .sales-lead {
    max-width: 44ch;
  }
}

/* ── 3/4/5 · Micro-trust ────────────────────────────────────────────────── */
.programa-trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px clamp(16px, 2.2vw, 26px);
  max-width: none;
  margin: 0;
  padding: 0;
  list-style: none;
}

.programa-trust li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-on-dark-muted);
  font-size: 0.82rem;
  line-height: 1.3;
  white-space: nowrap;       /* ninguna señal parte por la mitad */
}

/* Separadores verticales muy sutiles entre señales. */
.programa-trust li + li::before {
  content: "";
  align-self: center;
  width: 1px;
  height: 13px;
  margin-right: clamp(16px, 2.2vw, 26px);
  background: rgba(200, 164, 104, 0.28);
}

.programa-trust li > span {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border: 1px solid rgba(200, 164, 104, 0.32);
  border-radius: 50%;
  color: #ead0a2;
}

.programa-trust li > span svg {
  width: 14px;
  height: 14px;
}

/* Móvil: las tres señales caben en fila si se compactan; por debajo de
   400 px pasan a 2 + 1 centrado, que es más legible que apretarlas. */
@media (width <= 600px) {
  .programa-trust {
    gap: 8px 14px;
  }

  .programa-trust li {
    font-size: 0.76rem;
    gap: 7px;
  }

  .programa-trust li > span {
    width: 22px;
    height: 22px;
  }

  .programa-trust li > span svg {
    width: 12px;
    height: 12px;
  }

  .programa-trust li + li::before {
    margin-right: 14px;
  }
}

@media (width <= 400px) {
  .programa-trust {
    gap: 10px 12px;
  }
}

/* El separador solo tiene sentido cuando las tres señales van en UNA fila.
   Medido: la envoltura a 2+1 ocurre hasta 535 px y a partir de 536 px caben
   las tres. El corte se pone en 540 px —4 px de margen— porque la envoltura
   la decide el contenido, no esta media query, y prefiero que en la franja
   dudosa falten separadores (inocuo) a que uno quede colgando al inicio de
   la segunda fila (el defecto que esto corrige). */
@media (width <= 539px) {
  .programa-trust li + li::before {
    display: none;
  }
}

/* ── 8 · Fondo: el glow acompaña el eje H1 → CTA, no la esquina ─────────── */
.sales-hero {
  background:
    radial-gradient(58% 46% at 62% 22%, rgba(96, 20, 40, 0.32), transparent 72%),
    linear-gradient(180deg, #150f11 0%, #0e0b0c 62%, #120d0f 100%);
}

/* ── 9 · Transición hero → autoridad: la promesa cae hacia la prueba ────── */
.sales-hero {
  padding-bottom: clamp(56px, 6vw, 92px);
}

@media (width <= 767px) {
  .sales-hero {
    padding-bottom: clamp(40px, 9vw, 52px);
  }
}

/* ══ 01 · ANTES DE SEGUIR · capítulo editorial (dirección, 23-08-2026) ═════
   Eleva la dirección de arte de la sección sin tocar copy ni funcionalidad:
   gran «01» de agua, composición 55/45, remate con su propio momento y la
   banda de datos como banda editorial de producto. Solo CSS + un <em> de
   énfasis. Ningún color nuevo: noir, burdeos y champagne del sistema. */

.sales-recognise {
  position: relative;
  isolation: isolate;
  overflow: clip;                 /* recorta el «01» contra el borde */
  background:
    radial-gradient(46% 52% at 18% 6%, rgba(96, 20, 40, 0.2), transparent 68%),
    linear-gradient(180deg, #120d0f, #0e0b0c 60%, #100c0e);
}

/* ── 4 · Gran «01» tipográfico, decorativo y fuera del flujo ────────────── */
/* ── 5 · Composición editorial 55 / 45 ──────────────────────────────────── */
@media (width >= 1024px) {
  .sales-recognise .sales-split {
    grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
    column-gap: clamp(48px, 6vw, 104px);
    align-items: start;
  }

  /* Los párrafos arrancan a la altura óptica del cuerpo del H2, no del borde. */
  .sales-recognise-intro {
    padding-top: clamp(52px, 5.6vw, 88px);
  }
}

.sales-split-head .section-number {
  color: rgba(200, 164, 104, 0.92);
}

.sales-split-head .eyebrow {
  margin-top: 12px;
  color: rgba(245, 241, 232, 0.86);
  letter-spacing: 0.2em;
}

/* ── 6 · H2 como foco visual nº 1 ───────────────────────────────────────── */
.sales-recognise h2 {
  max-width: none;                /* lo acota la columna, no un ch arbitrario */
  margin-top: clamp(18px, 1.8vw, 26px);
  font-size: clamp(2.6rem, 5vw, 4.4rem);
  line-height: 1;
  letter-spacing: -0.02em;
  text-wrap: nowrap;              /* el salto lo marca el <em> en bloque */
}

/* La itálica es la continuación de la frase, no un segundo titular:
   mismo cuerpo, mismo interlineado, solo cambia el color y el estilo. */
.sales-recognise h2 em {
  display: block;
  color: #e6cfa4;
  font-style: italic;
}

/* ── 7 · Columna derecha ────────────────────────────────────────────────── */
.sales-recognise-intro p {
  max-width: 46ch;
  margin: 0 0 20px;
  color: rgba(245, 241, 232, 0.8);
  line-height: 1.72;
}

.sales-recognise-intro p:last-child {
  margin-bottom: 0;
}

/* ── 9/10 · Remate: hairline con punto de luz + su propio momento ───────── */
.sales-recognise-criterio {
  position: relative;
  max-width: min(100%, 980px);
  margin: clamp(56px, 6vw, 96px) auto 0;
  padding-top: clamp(44px, 4.6vw, 68px);
  color: rgba(245, 241, 232, 0.96);
  font-family: var(--font-editorial), Georgia, serif;
  font-size: clamp(1.35rem, 2.5vw, 2.24rem) !important;
  font-weight: 400;
  line-height: 1.32;
  text-align: center;
  /* El salto lo decide el <br> del markup: `balance` (heredado de la regla
     antigua) reequilibraba y metía una tercera línea. */
  text-wrap: normal;
}

.sales-recognise-criterio::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  translate: -50% 0;
  width: min(100%, 720px);
  height: 1px;
  background:
    radial-gradient(circle at 50% 50%, rgba(240, 217, 174, 0.85), transparent 42%),
    linear-gradient(90deg, transparent, rgba(200, 164, 104, 0.3) 22%, rgba(200, 164, 104, 0.3) 78%, transparent);
}

.sales-recognise-criterio em {
  color: #e6cfa4;
  font-style: italic;
}

/* ── 11 · Banda editorial de producto ───────────────────────────────────── */
.sales-infostrip {
  border-top: 1px solid rgba(200, 164, 104, 0.26);
  border-bottom: 0;
  background:
    radial-gradient(60% 120% at 50% 100%, rgba(96, 20, 40, 0.14), transparent 70%),
    #100c0e;
}

.sales-infostrip-cell {
  gap: 0;
  padding: clamp(26px, 2.8vw, 40px) clamp(22px, 2.6vw, 40px);
  border-left: 1px solid rgba(200, 164, 104, 0.18);
}

.sales-infostrip-lbl {
  font-size: 0.66rem;
  letter-spacing: 0.24em;
}

.sales-infostrip-cell strong {
  margin-top: 14px;
  font-size: clamp(1.5rem, 2.3vw, 2.05rem);
  line-height: 1.08;
  letter-spacing: -0.005em;
}

/* «Reserva tu plaza» es texto, no un CTA: se distingue por color, nunca
   por un afford de click que no existe. */
.sales-infostrip-cell:last-child strong {
  color: #e6cfa4;
}

.sales-infostrip-cell small {
  margin-top: 10px;
  font-size: 0.86rem;
  line-height: 1.5;
}

/* ── Tablet ─────────────────────────────────────────────────────────────── */
@media (width <= 1023px) {
    .sales-recognise h2 {
    max-width: 17ch;
  }

  .sales-recognise-intro {
    margin-top: clamp(26px, 4vw, 38px);
  }
}

/* ── 16–20 · Móvil: una columna, banda apilada, densidad controlada ─────── */
@media (width <= 767px) {
    .sales-recognise h2 {
    max-width: none;
    margin-top: 14px;
    font-size: clamp(1.94rem, 8.4vw, 2.7rem);
    line-height: 1.04;
  }

  .sales-recognise-intro {
    margin-top: 22px;
  }

  .sales-recognise-intro p {
    max-width: none;
    margin-bottom: 16px;
    line-height: 1.66;
  }

  .sales-recognise-criterio {
    max-width: none;
    margin-top: clamp(34px, 8vw, 44px);
    padding-top: clamp(28px, 7vw, 38px);
    font-size: clamp(1.22rem, 5.6vw, 1.5rem) !important;
    line-height: 1.36;
  }

  .sales-recognise-criterio::before {
    width: min(100%, 260px);
  }

  /* El <br> del remate es una decisión de escritorio: en móvil estorba. */
  .sales-recognise-criterio br {
    display: none;
  }

  /* Banda: una columna con hairlines horizontales, no tres cards. */
  .sales-infostrip-cell {
    padding: 20px 0;
    border-left: 0;
    border-top: 1px solid rgba(200, 164, 104, 0.16);
  }

  .sales-infostrip-cell:first-child {
    border-top: 0;
    padding-top: 24px;
  }

  .sales-infostrip-cell strong {
    margin-top: 10px;
    font-size: 1.42rem;
  }

  .sales-infostrip-cell small {
    margin-top: 6px;
  }
}



/* ══ 02 · LA TRANSFORMACIÓN REAL · mapa editorial (dirección, 23-08-2026) ══
   Siguiente capítulo del sistema abierto en 01: mismo numeral de fondo,
   mismo champagne, mismas hairlines — otra composición. Aquí el recorrido
   del ojo es HOY → eje → AL TERMINAR. Solo CSS + markup presentacional;
   ninguna regla global, todo bajo .sales-transform. */

.sales-transform {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background:
    radial-gradient(38% 44% at 88% 6%, rgba(96, 20, 40, 0.16), transparent 70%),
    radial-gradient(34% 40% at 4% 96%, rgba(96, 20, 40, 0.12), transparent 72%),
    linear-gradient(180deg, #100c0e, #150f12);
}

/* ── 5 · Numeral «02» de fondo, gemelo del «01» ─────────────────────────── */
/* ── 6/9 · Cabecera 65 / 35 con hairline vertical ───────────────────────── */
.stc-cabecera {
  display: grid;
  gap: clamp(20px, 2.4vw, 34px);
}

@media (width >= 1024px) {
  .stc-cabecera {
    grid-template-columns: minmax(0, 65fr) minmax(0, 35fr);
    column-gap: clamp(36px, 4vw, 60px);
    align-items: end;
  }

  /* El apoyo se apoya en el hairline, no flota en la esquina. */
  .sales-transform .sales-section-sub {
    max-width: 34ch;
    margin: 0 0 clamp(8px, 1vw, 16px);
    padding-left: clamp(28px, 3vw, 44px);
    border-left: 1px solid rgba(200, 164, 104, 0.26);
  }
}

.stc-cabecera .section-number {
  color: rgba(200, 164, 104, 0.92);
}

/* ── 7 · H2 · foco nº 1 ─────────────────────────────────────────────────── */
.sales-transform h2 {
  max-width: none;
  margin-top: clamp(14px, 1.6vw, 22px);
  font-size: clamp(2.5rem, 5vw, 4.6rem);
  line-height: 1;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

/* La segunda mitad es la continuación de la frase: mismo cuerpo, mismo
   interlineado; solo cambian estilo y color. */
.sales-transform h2 em {
  display: block;
  color: #e6cfa4;
  font-style: italic;
}

/* ── 10 · Apertura del mapa ─────────────────────────────────────────────── */
.sales-transform-grid {
  margin-top: clamp(28px, 3.2vw, 44px);
  border-top: 1px solid rgba(200, 164, 104, 0.2);
}

/* ── 11 · Filas: 30 / 20 / 50, nunca una tabla ──────────────────────────── */
.sales-transform-card {
  display: grid;
  grid-template-columns: minmax(0, 32fr) minmax(0, 18fr) minmax(0, 50fr);
  grid-template-rows: auto;
  grid-auto-flow: row;
  align-items: center;
  column-gap: clamp(18px, 2.4vw, 34px);
  padding: clamp(17px, 1.7vw, 23px) 0;
  border-top: 0;
  border-bottom: 1px solid rgba(200, 164, 104, 0.14);
}

/* La primera respira un punto más, sin ser una fila destacada. */
.sales-transform-card:first-child {
  padding-top: clamp(20px, 2vw, 26px);
}

.sales-transform-card:last-child {
  border-bottom: 0;
}

.stc-lado {
  min-width: 0;
}

/* ── 12 · HOY: subordinado, nunca apagado ───────────────────────────────── */
.stc-lbl {
  margin-bottom: 8px;
  color: rgba(200, 164, 104, 0.88);
  font-size: 0.62rem;
  letter-spacing: 0.22em;
}

.stc-hoy {
  max-width: 34ch;
  color: rgba(245, 241, 232, 0.7);
  font-size: clamp(0.98rem, 1.15vw, 1.12rem) !important;
  line-height: 1.45;
}

/* ── 13 · AL TERMINAR: foco nº 2, el lado deseable ──────────────────────── */
.stc-despues {
  max-width: 42ch;
  color: var(--ivory);
  font-size: clamp(1.24rem, 1.9vw, 1.72rem) !important;
  line-height: 1.32;
}

/* ── 14/15 · Eje: línea champagne + diamante, idéntico en las cinco filas ── */
.stc-eje {
  position: relative;
  display: block;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(200, 164, 104, 0.42) 26%, rgba(200, 164, 104, 0.42) 74%, transparent);
}

.stc-eje::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 7px;
  height: 7px;
  translate: -50% -50%;
  rotate: 45deg;
  border: 1px solid rgba(232, 205, 158, 0.9);
  background: #120d0f;
  box-shadow: 0 0 10px rgba(200, 164, 104, 0.28);
}

/* ── Tablet ─────────────────────────────────────────────────────────────── */
@media (width <= 1023px) {
    .sales-transform-card {
    grid-template-columns: minmax(0, 34fr) minmax(0, 16fr) minmax(0, 50fr);
    column-gap: clamp(14px, 2vw, 22px);
  }

  .stc-hoy,
  .stc-despues {
    max-width: none;
  }
}

/* ── 19/20/21 · Móvil: la fila se convierte en un paso vertical ─────────── */
@media (width <= 767px) {
    .sales-transform h2 {
    margin-top: 12px;
    font-size: clamp(1.98rem, 8.6vw, 2.7rem);
    line-height: 1.04;
  }

  .sales-transform .sales-section-sub {
    max-width: none;
    margin-top: 14px;
  }

  .sales-transform-card {
    grid-template-columns: 1fr;
    grid-auto-flow: row;
    align-items: stretch;
    row-gap: 10px;
    padding: 16px 0;
  }

  /* El eje pasa a horizontal compacto entre los dos estados. */
  .stc-eje {
    width: min(100%, 190px);
    margin-inline: auto;
  }

  .stc-lbl {
    margin-bottom: 6px;
    font-size: 0.58rem;
    letter-spacing: 0.2em;
  }

  .stc-hoy {
    font-size: 0.98rem !important;
    line-height: 1.5;
  }

  .stc-despues {
    font-size: 1.2rem !important;
    line-height: 1.36;
  }
}

@media (width <= 400px) {
    .stc-eje {
    width: min(100%, 160px);
  }
}

/* ── 26 · Cierre local hacia el capítulo 03 ─────────────────────────────── */
.sales-transform {
  padding-bottom: clamp(52px, 5.6vw, 84px);
}

/* ══ 04 · ENCAJE · declaración editorial (dirección, 23-08-2026) ═══════════
   Las cinco filas dejan de ser cards: numeral itálico, rombo y frase sobre
   hairline abierta. El bloque negativo pasa a ser el segundo momento, con
   umbral decorativo y su luz. Namespace .programa-fit-* / .sales-fit; sin
   una sola regla global, sin JS, sin assets. */

.sales-fit {
  position: relative;
  isolation: isolate;
  overflow: clip;
  /* Ritmo local: el capítulo trae mucho contenido (cabecera + 5 filas +
     bloque negativo). Sin este recorte la sección se disparaba a 1361 px
     en 1366×768. No se toca la escala global de la página. */
  --ritmo-t: clamp(56px, 6vw, 96px);
  --ritmo-b: clamp(52px, 5.6vw, 88px);
}

/* ── 5 · Cabecera ───────────────────────────────────────────────────────── */
.programa-fit-head .section-number {
  color: rgba(200, 164, 104, 0.92);
}

.sales-fit h2 {
  max-width: none;
  margin-top: clamp(12px, 1.4vw, 20px);
  font-size: clamp(2.3rem, 4.4vw, 4.1rem);
  line-height: 1;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.sales-fit h2 em {
  color: #e6cfa4;
  font-style: italic;
}

.programa-fit-head .sales-section-sub {
  margin-top: clamp(12px, 1.4vw, 18px);
}

/* ── 6/10 · Filas editoriales abiertas, nunca cards ─────────────────────── */
.programa-fit-lista {
  position: relative;
  margin-top: clamp(24px, 2.6vw, 34px);
  padding-top: clamp(20px, 2.2vw, 26px);
}

/* Apertura del listado: hairline con punto de luz, como en los capítulos
   01 y 02, para que los cuatro se lean como el mismo sistema. */
.programa-fit-lista::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background:
    radial-gradient(circle at 50% 50%, rgba(240, 217, 174, 0.8), transparent 40%),
    linear-gradient(90deg, rgba(200, 164, 104, 0.22), rgba(200, 164, 104, 0.22));
}

.programa-fit-perfil {
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: 0;
  padding: clamp(13px, 1.4vw, 19px) 0;
  border-top: 0;
  border-bottom: 1px solid rgba(245, 241, 232, 0.08);
}

.programa-fit-perfil:last-child {
  border-bottom: 1px solid rgba(245, 241, 232, 0.08);
}

/* La composición asimétrica del polish anterior se retira: la referencia
   pide una columna de numerales perfectamente alineada. */
@media (width >= 1101px) {
  .programa-fit-perfil:nth-child(n) {
    padding-left: 0;
  }
}

/* ── 7 · Numerales: misma columna, mismo eje óptico ─────────────────────── */
.programa-fit-num {
  width: clamp(64px, 6.4vw, 104px);
  flex: 0 0 auto;
  color: rgba(232, 205, 158, 0.82);
  font-family: var(--font-editorial), Georgia, serif;
  font-size: clamp(2rem, 3.2vw, 3.3rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1;
  text-align: center;
}

/* ── 8 · Rombo ──────────────────────────────────────────────────────────── */
.programa-fit-rombo {
  width: 5px;
  height: 5px;
  margin-inline: clamp(14px, 2vw, 34px) clamp(16px, 2.2vw, 38px);
  rotate: 45deg;
  background: rgba(232, 205, 158, 0.85);
}

/* ── 9 · Frase: fragmento fuerte en serif marfil, resto en sans ─────────── */
.programa-fit-perfil p {
  /* Sin tope: la frase de la fila 02 es la más larga y en la referencia
     va en una sola línea; el ancho lo acota la columna, no un ch. */
  max-width: none;
  color: rgba(245, 241, 232, 0.78);
  font-size: clamp(0.98rem, 1.15vw, 1.12rem) !important;
  line-height: 1.5;
}

.programa-fit-perfil p b {
  color: var(--ivory);
  font-family: var(--font-editorial), Georgia, serif;
  font-weight: 600;
  font-size: 1.06em;
}

/* ── 11 · Bloque «no es para ti»: segundo momento ───────────────────────── */
.programa-fit-no {
  position: relative;
  overflow: hidden;
  margin-top: clamp(28px, 3.2vw, 42px);
  padding: clamp(22px, 2.5vw, 34px) clamp(24px, 2.8vw, 44px);
  border: 1px solid rgba(208, 29, 63, 0.34);
  border-left: 1px solid rgba(208, 29, 63, 0.34);
  background:
    radial-gradient(58% 100% at 100% 100%, rgba(96, 20, 40, 0.3), transparent 68%),
    linear-gradient(180deg, rgba(30, 12, 18, 0.6), rgba(21, 20, 22, 0.75));
}

@media (width >= 1024px) {
  .programa-fit-no {
    padding-right: 32%;
  }
}

/* ── 12 · Label ─────────────────────────────────────────────────────────── */
.programa-fit-no-lbl {
  color: rgba(232, 205, 158, 0.92);
  font-size: 0.7rem !important;
  letter-spacing: 0.2em;
}

/* ── 13 · Lista negativa: estrella editorial de cuatro puntas ───────────── */
.programa-fit-no ul {
  gap: 14px;
}

.programa-fit-no li {
  padding-left: 28px;
  color: rgba(245, 241, 232, 0.82);
  font-size: clamp(0.94rem, 1.05vw, 1.02rem);
  line-height: 1.55;
}

.programa-fit-no li::before {
  content: "";
  position: absolute;
  top: 0.42em;
  left: 2px;
  width: 11px;
  height: 11px;
  color: transparent;
  background: rgba(232, 120, 145, 0.9);
  clip-path: polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%);
}

/* ── 14 · Remate: hairline con punto de luz + serif itálica champagne ───── */
.programa-fit-no-nota {
  position: relative;
  max-width: 46ch;
  margin-top: clamp(20px, 2.4vw, 30px) !important;
  padding-top: clamp(18px, 2vw, 24px);
  color: #e6cfa4;
  font-size: clamp(1.02rem, 1.25vw, 1.18rem) !important;
  line-height: 1.55;
}

.programa-fit-no-nota::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: min(100%, 500px);
  height: 1px;
  background:
    radial-gradient(circle at 42% 50%, rgba(240, 217, 174, 0.85), transparent 42%),
    linear-gradient(90deg, rgba(200, 164, 104, 0.26), transparent 88%);
}

/* El énfasis aprobado se mantiene, pero en una línea itálica no grita:
   sube en luz, no en peso. */
/* `.sales-main p strong` (del polish de énfasis) gana por especificidad;
   aquí se iguala para que el énfasis aprobado suba en LUZ y no en peso:
   en una línea itálica de remate, la negrita rompe el tono. */
.sales-fit .programa-fit-no-nota strong {
  color: #f6e8cd;
  font-weight: 400;
}

/* ── 15/16 · Umbral y su luz ────────────────────────────────────────────── */
.programa-fit-umbral {
  position: absolute;
  right: clamp(24px, 4vw, 72px);
  bottom: 0;
  z-index: -1;
  display: block;
  width: clamp(150px, 15vw, 210px);
  color: rgba(232, 205, 158, 0.16);
  pointer-events: none;
}

.programa-fit-umbral svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Iluminación editorial bajo el umbral: un halo, no un neón. */
.programa-fit-umbral::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 150%;
  height: 46px;
  translate: -50% 0;
  background: radial-gradient(closest-side, rgba(208, 29, 63, 0.42), rgba(208, 29, 63, 0.12) 55%, transparent 78%);
}

/* ── Tablet ─────────────────────────────────────────────────────────────── */
@media (width <= 1023px) {
  .programa-fit-num {
    width: clamp(56px, 8vw, 76px);
    font-size: clamp(1.8rem, 4.4vw, 2.5rem);
  }

  .programa-fit-umbral {
    width: clamp(120px, 17vw, 160px);
    color: rgba(232, 205, 158, 0.12);
  }

  .programa-fit-no {
    padding-right: clamp(24px, 20vw, 190px);
  }
}

/* ── 18/19 · Móvil ──────────────────────────────────────────────────────── */
@media (width <= 767px) {
  .sales-fit h2 {
    margin-top: 10px;
    font-size: clamp(1.98rem, 8.6vw, 2.7rem);
    line-height: 1.04;
  }

  .programa-fit-lista {
    margin-top: 24px;
    padding-top: 20px;
  }

  .programa-fit-perfil {
    align-items: baseline;
    padding: 15px 0;
  }

  .programa-fit-num {
    width: 46px;
    font-size: 1.6rem;
    text-align: left;
  }

  .programa-fit-rombo {
    width: 4px;
    height: 4px;
    margin-inline: 0 12px;
    translate: 0 -3px;
  }

  .programa-fit-perfil p {
    max-width: none;
    font-size: 0.97rem !important;
    line-height: 1.5;
  }

  .programa-fit-no {
    margin-top: 28px;
    padding: 22px 20px 24px;
  }

  .programa-fit-no li {
    padding-left: 24px;
    font-size: 0.92rem;
  }

  .programa-fit-no-nota {
    max-width: none;
    font-size: 1rem !important;
  }

  /* El umbral pasa a marca de agua al fondo: nunca por delante del texto. */
  .programa-fit-umbral {
    right: -14px;
    width: 112px;
    color: rgba(232, 205, 158, 0.085);
  }

  .programa-fit-umbral::after {
    height: 30px;
    background: radial-gradient(closest-side, rgba(208, 29, 63, 0.3), transparent 76%);
  }
}

@media (width <= 400px) {
  .programa-fit-num {
    width: 42px;
    font-size: 1.48rem;
  }

  .programa-fit-umbral {
    width: 96px;
    color: rgba(232, 205, 158, 0.07);
  }
}

/* ══ 05 · QUÉ INCLUYE · timeline de acompañamiento (dirección, 23-08-2026) ═
   La semana tipo se convierte en una timeline editorial: cápsula temporal,
   eje vertical con nodos, título serif dominante. Los módulos pasan a
   dossier con doble hairline y esquinas. Todo bajo .sales-method: cero
   fugas, cero JS, cero assets. */

.sales-method {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background:
    radial-gradient(34% 40% at 92% 4%, rgba(96, 20, 40, 0.14), transparent 70%),
    radial-gradient(30% 36% at 4% 98%, rgba(96, 20, 40, 0.1), transparent 72%),
    linear-gradient(180deg, #140e11, #1a1013 55%, #140e11);
}

.sales-method-inner {
  max-width: none;               /* la timeline necesita el shell completo */
}

.sales-method .section-number {
  color: rgba(200, 164, 104, 0.92);
}

.sales-method .eyebrow {
  margin-top: 12px;
}

/* ── 5 · H2 ─────────────────────────────────────────────────────────────── */
.sales-method h2 {
  max-width: 18ch;
  margin-top: clamp(14px, 1.6vw, 22px);
  font-size: clamp(2.4rem, 4.6vw, 4.3rem);
  line-height: 1;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.sales-method h2 em {
  display: block;
  color: #e6cfa4;
  font-style: italic;
}

/* ── 6 · Hairline con punto de luz bajo el H2 ───────────────────────────── */
.programa-metodo-hairline {
  position: relative;
  display: block;
  width: min(100%, 420px);
  height: 1px;
  margin-top: clamp(22px, 2.4vw, 32px);
  background:
    radial-gradient(circle at 42% 50%, rgba(240, 217, 174, 0.85), transparent 40%),
    linear-gradient(90deg, rgba(200, 164, 104, 0.3), transparent 92%);
}

/* ── 7 · Intro ──────────────────────────────────────────────────────────── */
.sales-method-body {
  margin-top: clamp(20px, 2.2vw, 28px);
}

.sales-method-body p {
  max-width: 40ch;               /* ≈58 caracteres reales en Manrope */
  line-height: 1.7;
}

/* ── 8–14 · Timeline ────────────────────────────────────────────────────── */
.sales-week-list {
  position: relative;
  margin-top: clamp(30px, 3.4vw, 46px);
}

.sales-week-list li {
  position: relative;
  grid-template-columns: clamp(150px, 15vw, 200px) 56px minmax(0, 1fr);
  align-items: start;
  gap: 0;
  padding: clamp(20px, 2.2vw, 30px) 0;
  border-top: 0;
  border-bottom: 1px solid rgba(245, 241, 232, 0.06);
}

.sales-week-list li:last-child {
  border-bottom: 1px solid rgba(245, 241, 232, 0.06);
}

/* Eje continuo: cada fila pinta su segmento; al no haber huecos entre
   filas, la línea se lee como una sola. */
.sales-week-list li::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(clamp(150px, 15vw, 200px) + 28px);
  width: 1px;
  background: linear-gradient(180deg, rgba(200, 164, 104, 0.34), rgba(200, 164, 104, 0.22));
  box-shadow: 0 0 12px rgba(200, 164, 104, 0.12);
}

.sales-week-list li:first-child::before {
  top: clamp(26px, 2.6vw, 36px);
}

.sales-week-list li:last-child::before {
  bottom: auto;
  height: clamp(30px, 3vw, 42px);
}

/* ── 9 · Cápsula temporal ───────────────────────────────────────────────── */
.sales-method .sw-tag {
  justify-self: start;
  min-width: 0;
  margin-top: 4px;
  padding: 7px 16px;
  border: 1px solid rgba(200, 164, 104, 0.44);
  border-radius: 999px;
  background: rgba(21, 20, 22, 0.4);
  color: rgba(232, 205, 158, 0.95);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
}

/* ── 11 · Nodo ──────────────────────────────────────────────────────────── */
.sw-nodo {
  position: relative;
  z-index: 1;
  justify-self: center;
  width: 13px;
  height: 13px;
  margin-top: 8px;
  border: 1px solid rgba(232, 205, 158, 0.9);
  border-radius: 50%;
  background: #16090e;
}

.sw-nodo::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: rgba(240, 217, 174, 0.75);
  box-shadow: 0 0 8px rgba(240, 217, 174, 0.4);
}

/* ── 12/13 · Título y descripción ───────────────────────────────────────── */
.sw-contenido {
  padding-left: clamp(18px, 2.2vw, 32px);
}

.sales-week-list h3 {
  margin: 0 0 8px;
  font-size: clamp(1.35rem, 1.9vw, 1.85rem);
  line-height: 1.18;
}

.sales-week-list p {
  max-width: 52ch;
  line-height: 1.6;
}

/* ── 15–18 · Dossier de módulos ─────────────────────────────────────────── */
.sales-modulos {
  position: relative;
  margin-top: clamp(34px, 3.8vw, 52px);
  padding: clamp(28px, 3vw, 44px) clamp(26px, 3vw, 48px) clamp(24px, 2.6vw, 38px);
  border: 1px solid rgba(200, 164, 104, 0.3);
  background:
    radial-gradient(60% 80% at 50% 0%, rgba(96, 20, 40, 0.12), transparent 70%),
    rgba(14, 10, 12, 0.55);
}

/* Doble hairline: marco interior desplazado. */
.sales-modulos::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(200, 164, 104, 0.14);
  pointer-events: none;
}

/* Esquinas: dos trazos que refuerzan el dossier sin ornamentación. */
.sales-modulos::after {
  content: "";
  position: absolute;
  inset: 5px;
  pointer-events: none;
  background:
    linear-gradient(rgba(232, 205, 158, 0.55), rgba(232, 205, 158, 0.55)) 0 0 / 14px 1px,
    linear-gradient(rgba(232, 205, 158, 0.55), rgba(232, 205, 158, 0.55)) 0 0 / 1px 14px,
    linear-gradient(rgba(232, 205, 158, 0.55), rgba(232, 205, 158, 0.55)) 100% 100% / 14px 1px,
    linear-gradient(rgba(232, 205, 158, 0.55), rgba(232, 205, 158, 0.55)) 100% 100% / 1px 14px;
  background-repeat: no-repeat;
}

.sales-modulos-lbl {
  position: relative;
  margin: 0 0 clamp(18px, 2vw, 26px) !important;
  padding-bottom: clamp(14px, 1.6vw, 20px);
  color: rgba(232, 205, 158, 0.95);
  font-size: 0.7rem !important;
  letter-spacing: 0.24em;
  text-align: center;
}

.sales-modulos-lbl::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  translate: -50% 0;
  width: min(100%, 380px);
  height: 1px;
  background:
    radial-gradient(circle at 50% 50%, rgba(240, 217, 174, 0.8), transparent 42%),
    linear-gradient(90deg, transparent, rgba(200, 164, 104, 0.28) 24%, rgba(200, 164, 104, 0.28) 76%, transparent);
}

.sales-modulos ul {
  position: relative;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(36px, 4vw, 64px);
  row-gap: 0;
}

/* Hairline vertical central del dossier. */
.sales-modulos ul::before {
  content: "";
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 50%;
  width: 1px;
  background: rgba(200, 164, 104, 0.16);
}

.sales-modulos li {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: clamp(11px, 1.2vw, 15px) 0;
  border-bottom: 1px solid rgba(245, 241, 232, 0.07);
  font-size: clamp(1rem, 1.15vw, 1.12rem);
}

.sales-modulos li:nth-last-child(-n + 2) {
  border-bottom: 0;
}

.sales-modulos li b {
  margin-right: 0;
  flex: 0 0 auto;
  color: rgba(232, 205, 158, 0.9);
  font-size: clamp(1.3rem, 1.6vw, 1.7rem);
  font-weight: 400;
  font-style: italic;
}

/* ── 19 · CTA: centrado bajo el dossier, sin tocar comportamiento ───────── */
.sales-method .sales-cta-block--inline {
  justify-items: center;
  margin-top: clamp(28px, 3.2vw, 42px);
}

/* ── Tablet ─────────────────────────────────────────────────────────────── */
@media (width <= 1023px) {
  .sales-week-list li {
    grid-template-columns: clamp(120px, 17vw, 150px) 44px minmax(0, 1fr);
  }

  .sales-week-list li::before {
    left: calc(clamp(120px, 17vw, 150px) + 22px);
  }

  .sales-method .sw-tag {
    padding: 6px 12px;
    font-size: 0.58rem;
    letter-spacing: 0.12em;
  }
}

/* ── 22–26 · Móvil: eje a la izquierda, label sobre título ──────────────── */
@media (width <= 767px) {
  .sales-method h2 {
    max-width: none;
    margin-top: 12px;
    font-size: clamp(2rem, 8.8vw, 2.75rem);
    line-height: 1.06;
  }

  /* En móvil la frase fluye: el salto forzado del <em> producía 2+2 = 4
     líneas; en flujo natural con balance quedan 3. */
  .sales-method h2 em {
    display: inline;
  }

  .programa-metodo-hairline {
    width: min(100%, 240px);
    margin-top: 18px;
  }

  .sales-method-body p {
    max-width: none;
  }

  .sales-week-list {
    margin-top: 26px;
  }

  .sales-week-list li {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 18px 0 18px 34px;
  }

  /* El eje se pega a la izquierda y recorre toda la lista. */
  .sales-week-list li::before {
    left: 6px;
  }

  .sales-week-list li:first-child::before {
    top: 24px;
  }

  .sales-week-list li:last-child::before {
    height: 26px;
  }

  .sw-nodo {
    position: absolute;
    top: 22px;
    left: 0;
    margin-top: 0;
    justify-self: auto;
  }

  .sales-method .sw-tag {
    justify-self: start;
    width: fit-content;
    margin-top: 0;
    padding: 5px 12px;
    font-size: 0.56rem;
  }

  .sw-contenido {
    padding-left: 0;
  }

  .sales-week-list h3 {
    margin-bottom: 6px;
    font-size: 1.22rem;
  }

  .sales-week-list p {
    max-width: none;
    font-size: 0.95rem !important;
    line-height: 1.55;
  }

  /* Dossier: una columna, sin divisor central. */
  .sales-modulos {
    margin-top: 28px;
    padding: 22px 18px 18px;
  }

  .sales-modulos ul {
    grid-template-columns: 1fr;
  }

  .sales-modulos ul::before {
    display: none;
  }

  .sales-modulos li {
    padding: 11px 0;
    font-size: 0.99rem;
  }

  .sales-modulos li:nth-last-child(-n + 2) {
    border-bottom: 1px solid rgba(245, 241, 232, 0.07);
  }

  .sales-modulos li:last-child {
    border-bottom: 0;
  }

  .sales-modulos li b {
    font-size: 1.24rem;
  }

  .sales-modulos-lbl {
    letter-spacing: 0.16em;
  }
}

@media (width <= 400px) {
  .sales-method .sw-tag {
    letter-spacing: 0.1em;
  }
}

/* ══ 06 · TU PUNTO DE PARTIDA · dos rutas + acompañamiento (23-08-2026) ════
   Las rutas pasan a tarjetas de dossier gemelas con medallón sobre el
   borde; la nota central se enmarca con hairlines cortos; el bloque
   inferior queda 58/42 con el panel 24 · 2× · 6 como pieza editorial.
   Todo bajo .sales-rutas; ninguna regla global; cero JS. */

.sales-rutas {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background:
    radial-gradient(32% 38% at 94% 3%, rgba(96, 20, 40, 0.16), transparent 70%),
    radial-gradient(26% 32% at 3% 99%, rgba(96, 20, 40, 0.1), transparent 72%),
    linear-gradient(180deg, #150f12, #100c0e);
}

.sales-rutas .section-number {
  color: rgba(200, 164, 104, 0.92);
}

/* ── 5/6 · H2 ───────────────────────────────────────────────────────────── */
.sales-rutas h2 {
  /* Sin tope: «Dos rutas. La misma inversión.» debe caber en una línea,
     como en la referencia; el <em> en bloque pone la segunda. */
  max-width: none;
  margin-top: clamp(14px, 1.6vw, 22px);
  font-size: clamp(2.2rem, 4.4vw, 4.1rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.sales-rutas h2 em {
  display: block;
  color: #e6cfa4;
  font-style: italic;
}

.sales-rutas .sales-section-sub {
  margin-top: clamp(12px, 1.4vw, 18px);
}

/* ── 8–10 · Tarjetas de ruta: gemelas, dossier, no pricing ──────────────── */
.sales-rutas-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 44px);
  align-items: stretch;
  margin-top: clamp(44px, 4.6vw, 64px);   /* aire para el medallón */
}

.sales-ruta-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(34px, 3.4vw, 46px) clamp(26px, 3vw, 44px) clamp(24px, 2.6vw, 34px);
  border: 1px solid rgba(200, 164, 104, 0.4);
  border-radius: 6px;
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(96, 20, 40, 0.14), transparent 70%),
    linear-gradient(180deg, rgba(26, 18, 15, 0.72), rgba(14, 10, 12, 0.85));
  text-align: center;
}

/* Hairline interior desplazado, como el dossier de módulos. */
.sales-ruta-card::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(200, 164, 104, 0.12);
  border-radius: 4px;
  pointer-events: none;
}

/* ── 11 · Medallón sobre el borde ───────────────────────────────────────── */
.sales-ruta-medallon {
  position: absolute;
  top: 0;
  left: 50%;
  translate: -50% -50%;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(200, 164, 104, 0.55);
  border-radius: 50%;
  background: #16090e;
  color: #e6cfa4;
  box-shadow: 0 0 0 6px #100c0e, 0 0 16px rgba(200, 164, 104, 0.14);
}

.sales-ruta-medallon svg {
  width: 21px;
  height: 21px;
}

/* ── 12 · Label + hairline ──────────────────────────────────────────────── */
.sales-rutas .sales-ruta-tag {
  display: block;
  margin: 0 auto 0;
  padding-bottom: clamp(12px, 1.4vw, 18px);
  border: 0;
  border-radius: 0;
  color: rgba(232, 205, 158, 0.95);
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  position: relative;
}

.sales-rutas .sales-ruta-tag::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  translate: -50% 0;
  width: min(100%, 300px);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(200, 164, 104, 0.3) 26%, rgba(200, 164, 104, 0.3) 74%, transparent);
}

/* ── 13/14 · Título y descripción ───────────────────────────────────────── */
.sales-rutas .sales-ruta-card h3 {
  margin: clamp(16px, 1.8vw, 24px) auto 12px;
  max-width: 22ch;
  font-size: clamp(1.5rem, 2.2vw, 2.1rem);
  line-height: 1.2;
  text-wrap: balance;
}

.sales-rutas .sales-ruta-card p {
  margin: 0 auto;
  max-width: 46ch;
  flex: 1 1 auto;
  color: rgba(245, 241, 232, 0.72);
  line-height: 1.6;
}

/* ── 15 · Nota central con hairlines cortos ─────────────────────────────── */
/* Bloque en flujo normal (NO grid: los nodos de texto y el <em> se
   convertirían en celdas y fragmentarían la frase). Los hairlines van
   absolutos a los lados, centrados en vertical. */
.sales-rutas-nota {
  position: relative;
  display: block;
  max-width: min(52ch, 78%);
  margin: clamp(26px, 2.8vw, 38px) auto 0;
  text-align: center;
}

.sales-rutas-nota::before,
.sales-rutas-nota::after {
  content: "";
  position: absolute;
  top: 50%;
  width: clamp(30px, 4.5vw, 76px);
  height: 1px;
}

.sales-rutas-nota::before {
  right: calc(100% + clamp(12px, 1.8vw, 24px));
  background: linear-gradient(90deg, transparent, rgba(200, 164, 104, 0.3));
}

.sales-rutas-nota::after {
  left: calc(100% + clamp(12px, 1.8vw, 24px));
  background: linear-gradient(90deg, rgba(200, 164, 104, 0.3), transparent);
}

/* ── 16/17 · División y bloque inferior 58/42 ───────────────────────────── */
.sales-accompany {
  grid-template-columns: minmax(0, 58fr) minmax(0, 42fr);
  gap: clamp(36px, 4.4vw, 72px);
  align-items: start;
  margin-top: clamp(40px, 4.4vw, 60px);
  padding-top: clamp(36px, 4vw, 52px);
  border-top: 1px solid rgba(200, 164, 104, 0.18);
}

/* ── 18 · Acompañamiento ────────────────────────────────────────────────── */
.sales-accompany-texto h3 {
  max-width: 20ch;
  font-size: clamp(1.6rem, 2.5vw, 2.2rem);
  line-height: 1.14;
  text-wrap: balance;
}

/* ── 20–23 · Panel de métricas ──────────────────────────────────────────── */
.sales-accompany-stat {
  position: relative;
  align-self: stretch;
  justify-content: center;
  align-content: center;
  padding: clamp(30px, 3.2vw, 46px) clamp(24px, 2.8vw, 40px);
  border: 1px solid rgba(200, 164, 104, 0.4);
  border-radius: 6px;
  background:
    radial-gradient(64% 44% at 50% 26%, rgba(200, 164, 104, 0.1), transparent 68%),
    linear-gradient(180deg, rgba(26, 18, 15, 0.72), rgba(14, 10, 12, 0.85));
}

.sales-accompany-stat::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(200, 164, 104, 0.12);
  border-radius: 4px;
  pointer-events: none;
}

.sales-accompany-stat > strong {
  font-size: clamp(4.4rem, 6.4vw, 6.6rem);
  background: linear-gradient(180deg, #f6e8cd 18%, #cfa768 82%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #e6cfa4;                     /* fallback si clip no aplica */
}

.sales-accompany-stat > span {
  margin-top: 6px;
  font-size: 1rem;
}

.sales-accompany-sub {
  gap: 0;
  margin-top: clamp(20px, 2.2vw, 28px);
  padding-top: clamp(18px, 2vw, 24px);
  border-top: 1px solid rgba(200, 164, 104, 0.22);
}

.sales-accompany-sub > div {
  position: relative;
  text-align: center;
}

.sales-accompany-sub > div + div::before {
  content: "";
  position: absolute;
  top: 10%;
  bottom: 10%;
  left: 0;
  width: 1px;
  background: rgba(200, 164, 104, 0.2);
}

.sales-accompany-sub b {
  font-size: clamp(1.7rem, 2.2vw, 2.2rem);
  color: #e6cfa4;
}

.sales-accompany-sub small {
  margin-top: 4px;
  display: block;
}

/* ── Tablet ─────────────────────────────────────────────────────────────── */
@media (width <= 1023px) {
  .sales-rutas-grid {
    gap: clamp(20px, 3vw, 30px);
  }

  .sales-ruta-card {
    padding: 32px clamp(20px, 3vw, 30px) 24px;
  }
}

/* ── 24–28 · Móvil ──────────────────────────────────────────────────────── */
@media (width <= 767px) {
  .sales-rutas h2 {
    max-width: none;
    margin-top: 12px;
    font-size: clamp(2rem, 8.6vw, 2.7rem);
    line-height: 1.04;
  }

  .sales-rutas-grid {
    grid-template-columns: 1fr;
    gap: 40px;                 /* deja sitio al medallón de la 2ª tarjeta */
    margin-top: 44px;
  }

  .sales-ruta-card {
    padding: 34px 20px 24px;
  }

  .sales-rutas-nota {
    max-width: 86%;
    margin-top: 30px;
  }

  .sales-accompany {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-top: 34px;
    padding-top: 30px;
  }

  .sales-accompany-texto h3 {
    max-width: none;
  }

  .sales-accompany-stat {
    max-width: none;
    width: 100%;
    padding: 28px 20px;
  }

  .sales-accompany-stat > strong {
    font-size: 3.8rem;
  }

  .sales-accompany-sub b {
    font-size: 1.5rem;
  }
}

@media (width <= 400px) {
  .sales-ruta-medallon {
    width: 42px;
    height: 42px;
  }

  .sales-ruta-medallon svg {
    width: 19px;
    height: 19px;
  }
}

/* ══ 07 · BONUS + VIP · elevación editorial (23-08-2026) ═══════════════════
   Namespace exclusivo de la sección (.sales-bonus / .sales-vip /
   .programa-bonus-* / .programa-vip-*). Assets optimizados AVIF/WebP en
   /assets/img/bonus/ (nunca los PNG máster). Cero JS nuevo. */

/* ── Cards de bonus: composición horizontal icono | título / descripción ── */
.sales-bonus-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: clamp(16px, 1.7vw, 22px);
  row-gap: 7px;
  align-content: start;
  padding: clamp(20px, 2vw, 26px) clamp(20px, 2vw, 26px) clamp(18px, 1.9vw, 24px);
  border-color: rgba(200, 164, 104, 0.22);
  border-radius: 10px;
  background:
    linear-gradient(165deg, rgba(200, 164, 104, 0.05), transparent 46%),
    rgba(19, 16, 18, 0.72);
}

.programa-bonus-icono {
  position: relative;
  grid-row: span 2;
  width: 52px;
  height: 52px;
  margin: 2px 0 0;
  border: 1px solid rgba(200, 164, 104, 0.42);
  background: radial-gradient(circle at 50% 32%, rgba(200, 164, 104, 0.13), transparent 72%);
  box-shadow: 0 0 12px rgba(200, 164, 104, 0.09);
}

/* Doble aro fino, como el medallón de la referencia. */
.programa-bonus-icono::after {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1px solid rgba(200, 164, 104, 0.16);
  border-radius: 50%;
}

.programa-bonus-icono svg {
  width: 22px;
  height: 22px;
}

.sales-bonus-card b {
  align-self: center;
  min-height: 0;
  margin-bottom: 0;
  font-size: clamp(1.06rem, 1.15vw, 1.2rem);
  line-height: 1.25;
}

.sales-bonus-card p {
  grid-column: 2;
  max-width: 40ch;
}

/* ── Separador editorial hacia el nivel VIP ─────────────────────────────── */
.programa-vip-sep {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.6vw, 22px);
  margin-top: clamp(42px, 5vw, 64px);
  color: #e6cfa4;
}

.programa-vip-sep::before,
.programa-vip-sep::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
}

.programa-vip-sep::before {
  background: linear-gradient(90deg, transparent, rgba(200, 164, 104, 0.34));
}

.programa-vip-sep::after {
  background: linear-gradient(90deg, rgba(200, 164, 104, 0.34), transparent);
}

.programa-vip-sep svg {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  filter: drop-shadow(0 0 7px rgba(230, 207, 164, 0.55));
}

/* El separador asume la división: la cabecera VIP pierde su border-top. */
.programa-vip-head {
  margin-top: clamp(24px, 2.8vw, 38px);
  padding-top: 0;
  border-top: 0;
}

/* ── Bloque VIP · dos tarjetas gemelas en arquitectura, no en tono ──────── */
.sales-vip {
  align-items: stretch;
  margin-top: clamp(28px, 3.2vw, 42px);
}

.sales-vip-card {
  display: grid;
  border-radius: 10px;
  padding: clamp(24px, 2.5vw, 34px) clamp(22px, 2.4vw, 32px);
}

/* Tarjeta VIP: medallón a la izquierda, contenido a la derecha. */
.sales-vip-card:not(.sales-vip-card--urgente) {
  grid-template-columns: clamp(168px, 16.5vw, 236px) minmax(0, 1fr);
  gap: clamp(20px, 2.6vw, 36px);
  align-items: center;
  background:
    radial-gradient(90% 120% at 12% 50%, rgba(200, 164, 104, 0.10), transparent 60%),
    linear-gradient(160deg, rgba(46, 35, 22, 0.6), rgba(21, 20, 22, 0.92));
}

.sales-vip-medallon {
  position: relative;
  display: block;
  width: 100%;
  /* Referencia de tamaño para el rótulo VIP (unidades cqw). */
  container-type: inline-size;
}

/* Rótulo «VIP» grabado sobre el óvalo del medallón. El centro óptico va un
   poco por debajo del matemático (la corona pesa arriba): top 52.5%. */
.sales-vip-medallon-vip {
  position: absolute;
  left: 50%;
  top: 52.5%;
  transform: translate(-50%, -50%);
  color: #8a682f;
  background: linear-gradient(172deg, #a8823f 10%, #7d5d28 52%, #a8823f 90%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: var(--font-editorial), Georgia, serif;
  font-size: clamp(2.2rem, 3.9vw, 3.7rem); /* reserva sin container queries */
  font-size: 26cqw;
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 1;
  /* Relieve mínimo: brillo inferior de 1px, sin glow. */
  filter: drop-shadow(0 1px 0 rgba(255, 246, 224, 0.28));
}

.sales-vip-medallon img {
  display: block;
  width: 100%;
  height: auto;
  /* El asset ya trae su propia presencia: solo un asiento de luz mínimo. */
  filter: drop-shadow(0 10px 26px rgba(0, 0, 0, 0.45));
}

.sales-vip-contenido {
  min-width: 0;
}

/* Tarjeta 48 h: contenido a la izquierda, reloj de arena a la derecha. */
.sales-vip-card--urgente {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(14px, 1.8vw, 26px);
  align-items: center;
  /* Noir profundo: el carmín vive en el borde, el halo del reloj y el tag,
     no en toda la superficie. */
  background:
    radial-gradient(85% 110% at 88% 58%, rgba(208, 29, 63, 0.11), transparent 55%),
    linear-gradient(150deg, rgba(43, 11, 19, 0.72), rgba(17, 14, 16, 0.96) 62%);
  box-shadow: inset 0 0 46px rgba(208, 29, 63, 0.06);
}

.sales-vip-arena {
  display: block;
  width: clamp(112px, 10.5vw, 148px);
}

.sales-vip-arena img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 8px 26px rgba(208, 29, 63, 0.22));
}

/* Countdown: protagonista tipográfico champagne, editorial, sin cajas. */
.sales-vip-reloj {
  margin-top: clamp(16px, 1.8vw, 22px) !important;
  color: #e6cfa4;
  background: linear-gradient(165deg, #f0dcb2 18%, #c8a468 82%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: clamp(2.5rem, 3.5vw, 3.5rem) !important;
  letter-spacing: 0.02em;
}

/* El estado final vuelve a texto plano legible (sin clip). */
[data-vip-estado="finalizado"] .sales-vip-reloj {
  background: none;
  -webkit-text-fill-color: currentColor;
}

/* ── Tablet ─────────────────────────────────────────────────────────────── */
@media (width <= 900px) {
  .sales-vip {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}

/* ── Tablet: la ficha se apila y la perforación pasa a horizontal ───────── */
@media (width <= 1023px) {
  .s2-card {
    grid-template-columns: 1fr;
    max-width: 640px;
  }

  .s2-card-perf {
    border-left: 0;
    border-top: 1px dashed rgba(200, 164, 104, 0.34);
    margin: 0 14px;
  }

  .s2-card-notch {
    top: -8px;
  }

  .s2-card-notch--top { left: -22px; }
  .s2-card-notch--bottom { left: auto; right: -22px; bottom: auto; }
}

/* ── Móvil ──────────────────────────────────────────────────────────────── */
@media (width <= 767px) {
  .sales-bonus-card {
    column-gap: 14px;
    padding: 18px 18px 18px;
  }

  .programa-bonus-icono {
    width: 44px;
    height: 44px;
  }

  .programa-bonus-icono svg {
    width: 19px;
    height: 19px;
  }

  .sales-bonus-card b {
    font-size: 1.02rem;
  }

  .sales-bonus-card p {
    max-width: none;
  }

  /* VIP: medallón centrado arriba, contenido debajo. */
  .sales-vip-card:not(.sales-vip-card--urgente) {
    grid-template-columns: 1fr;
    gap: 16px;
    justify-items: center;
    text-align: left;
  }

  .sales-vip-medallon {
    width: 140px;
  }

  .sales-vip-card:not(.sales-vip-card--urgente) .sales-vip-contenido {
    justify-self: stretch;
  }

  /* 48 h: copy y countdown primero; el reloj cierra, centrado y contenido. */
  .sales-vip-card--urgente {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .sales-vip-arena {
    width: 96px;
    justify-self: center;
  }
}

@media (width <= 600px) {
  .programa-bonus-icono {
    grid-row: span 2;
    margin: 2px 0 0;
  }
}

/* ══ 08 · TESTIMONIOS · pulido editorial (24-08-2026) ═════════════════════
   Solo presentación, scoped a .sales-proof / .programa-testi-* /
   .programa-video*. Estructura, vídeos, CTA y copy intactos. */

/* Cabecera: número con hairline corto y eyebrow marfil de mayor contraste,
   como en la referencia. El H2 sigue siendo el foco #1. */
.sales-proof .section-number::after {
  content: "";
  display: block;
  width: 92px;
  height: 1px;
  margin-top: 10px;
  background: linear-gradient(90deg, rgba(200, 164, 104, 0.45), transparent);
}

.sales-proof .eyebrow {
  color: rgba(245, 241, 232, 0.92);
  letter-spacing: 0.22em;
}

/* Las TRES cards pesan lo mismo: se anula el destacado de la segunda. */
.programa-testi-card,
.programa-testi-card:nth-child(2) {
  position: relative;
  border-color: rgba(200, 164, 104, 0.28);
  border-radius: 8px;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(96, 20, 40, 0.18), transparent 70%),
    rgba(21, 20, 22, 0.62);
}

/* Comillas gigantes casi subliminales, detrás del quote (decorativas). */
.programa-testi-card::after {
  content: "\201D";
  position: absolute;
  top: 4px;
  right: 14px;
  z-index: 0;
  color: rgba(200, 164, 104, 0.11);
  font-family: var(--font-editorial), Georgia, serif;
  font-size: clamp(5.5rem, 6.5vw, 8rem);
  line-height: 1;
  pointer-events: none;
}

/* El contenido queda por delante de las comillas decorativas. */
.programa-testi-card > * {
  position: relative;
  z-index: 1;
}

/* Frames de vídeo: radio coherente con las cards (misma familia visual). */
.programa-video video {
  border-radius: 8px;
}

/* ══ 09 · GARANTÍA · declaración editorial (24-08-2026) ═══════════════════
   Solo CSS, scoped a .sales-garantia / .programa-escudo (un único uso).
   Copy, énfasis, markup y semántica intactos. */

/* Escudo: medallón mayor, como en la referencia; halo mínimo ya existente. */
.sales-garantia .programa-escudo {
  width: clamp(66px, 6.4vw, 92px);
  height: clamp(66px, 6.4vw, 92px);
  margin-bottom: clamp(22px, 2.6vw, 32px);
  border-color: rgba(200, 164, 104, 0.4);
}

/* Eyebrow centrado, tracking amplio (el section-number ya es champagne). */
.sales-garantia .section-number {
  letter-spacing: 0.24em;
}

/* H2 = foco #1: escala de declaración; la segunda frase, en bloque
   champagne itálica, forma UNA misma oración editorial. */
.sales-garantia h2 {
  max-width: none;
  margin-top: clamp(10px, 1.2vw, 16px);
  font-size: clamp(2.55rem, 4.9vw, 5.05rem);
  line-height: 1.04;
  text-wrap: balance;
}

.sales-garantia h2 em {
  display: block;
  color: #e6cfa4;
  font-style: italic;
}

/* Body claramente secundario: medida estrecha, aire y lectura cómoda. */
.sales-garantia p:last-child {
  margin-top: clamp(22px, 2.6vw, 30px);
  line-height: 1.75;
}

/* Profundidad subliminal: luz cenital champagne (ya presente) + dos
   respiraciones burdeos laterales apenas perceptibles. */
.sales-garantia {
  background:
    radial-gradient(52% 46% at 50% 0%, rgba(200, 164, 104, 0.07), transparent 70%),
    radial-gradient(40% 34% at 8% 88%, rgba(96, 20, 40, 0.12), transparent 70%),
    radial-gradient(36% 30% at 94% 30%, rgba(96, 20, 40, 0.09), transparent 70%),
    #171114;
}

@media (width <= 767px) {
  .sales-garantia .programa-escudo {
    width: 64px;
    height: 64px;
  }

  .sales-garantia h2 {
    font-size: clamp(2.25rem, 9.6vw, 2.9rem);
  }
}

/* ══ 10 · AL CERRAR LOS 6 MESES · dossier de resultados (24-08-2026) ══════
   Solo CSS, scoped a .sales-deliver / .programa-deliver-*. Copy, orden,
   iconos y semántica intactos. */

/* Fondo del capítulo (el gran «10» decorativo se retiró el 24-08-2026). */
.sales-deliver {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(38% 30% at 94% 4%, rgba(200, 164, 104, 0.05), transparent 70%),
    radial-gradient(46% 36% at 2% 98%, rgba(96, 20, 40, 0.10), transparent 72%),
    linear-gradient(180deg, #100c0e, #150f12);
}

/* Cabecera 62/38: H2 a la izquierda, criterio de éxito a la derecha con
   hairline vertical parcial. El grid de resultados ocupa todo el ancho. */
.sales-deliver .shell {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 62fr) minmax(0, 38fr);
  column-gap: clamp(30px, 4vw, 60px);
}

.sales-deliver .section-number,
.sales-deliver h2 {
  grid-column: 1;
}

.sales-deliver h2 {
  /* Tope en em: «Lo que tienes en la mano» cabe en la línea 1 y el corte
     natural cae tras «mano», como en la referencia (medido: ~0.46em por
     carácter real en esta frase). */
  max-width: 12.2em;
  margin-top: clamp(10px, 1.2vw, 16px);
  font-size: clamp(2.5rem, 4vw, 3.6rem);
  line-height: 1.05;
}

.sales-deliver .sales-section-sub {
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: center;
  justify-self: start;
  margin: 0;
  padding-left: clamp(20px, 2.4vw, 34px);
  border-left: 1px solid rgba(200, 164, 104, 0.24);
  max-width: 34ch;
  text-align: left;
  line-height: 1.7;
}

.sales-deliver-grid {
  grid-column: 1 / -1;
}

/* ── Cards: resultados editoriales, mismo peso ──────────────────────────── */
.sales-deliver-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(24px, 2.4vw, 30px) clamp(22px, 2.3vw, 28px) clamp(22px, 2.2vw, 26px);
  border-color: rgba(200, 164, 104, 0.22);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(200, 164, 104, 0.05), transparent 36%),
    rgba(19, 16, 18, 0.72);
  overflow: hidden;
}

/* Highlight champagne del borde superior (luz, no decoración). */
.sales-deliver-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(200, 164, 104, 0.5), transparent);
}

.programa-deliver-icono {
  width: clamp(52px, 4vw, 58px);
  height: clamp(52px, 4vw, 58px);
  margin-bottom: clamp(16px, 1.8vw, 22px);
  border-color: rgba(200, 164, 104, 0.4);
  background: radial-gradient(circle at 50% 36%, rgba(200, 164, 104, 0.1), transparent 70%);
}

.programa-deliver-icono svg {
  width: 24px;
  height: 24px;
}

.sales-deliver-card .sales-deliver-num {
  margin-bottom: 10px;
  letter-spacing: 0.2em;
}

.sales-deliver-card h3 {
  margin: 0 0 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(200, 164, 104, 0.18);
  align-self: stretch;
  font-size: clamp(1.4rem, 1.75vw, 1.8rem);
  line-height: 1.2;
  text-wrap: balance;
}

.sales-deliver-card p {
  max-width: 36ch;
  line-height: 1.5;
}

/* ── Tablet/móvil: cabecera apilada, sin divisor vertical ───────────────── */
@media (width <= 900px) {
  .sales-deliver .shell {
    grid-template-columns: 1fr;
  }

  .sales-deliver .section-number,
  .sales-deliver h2,
  .sales-deliver .sales-section-sub,
  .sales-deliver-grid {
    grid-column: 1;
    grid-row: auto;
  }

  .sales-deliver .sales-section-sub {
    padding-left: 0;
    border-left: 0;
    margin-top: 14px;
    max-width: 50ch;
  }

}

@media (width <= 767px) {
  .sales-deliver h2 {
    font-size: clamp(2.2rem, 9vw, 2.75rem);
  }

  .programa-deliver-icono {
    width: 48px;
    height: 48px;
    margin-bottom: 14px;
  }

  .programa-deliver-icono svg {
    width: 21px;
    height: 21px;
  }

  .sales-deliver-card {
    padding: 20px 20px 20px;
  }

  .sales-deliver-card h3 {
    font-size: 1.35rem;
  }

  .sales-deliver-card p {
    max-width: none;
  }
}

/* ══ CIERRE · ANTES DE DECIDIR (24-08-2026) ═══════════════════════════════
   Solo CSS, scoped a .sales-final. Dos actos: reflexión / acción. Copy,
   CTA, diálogo y tracking intactos. */

/* ── Patronaje editorial lateral: arcos de patrón (uno punteado = costura,
      uno continuo = trazado), casi subliminales, detrás del contenido. ── */
.sales-final {
  position: relative;
  overflow: hidden;
}

.sales-final::before,
.sales-final::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.sales-final::before {
  left: max(-46vw, -560px);
  top: -10%;
  width: min(72vw, 880px);
  height: 120%;
  border: 1px dashed rgba(200, 164, 104, 0.09);
}

.sales-final::after {
  right: max(-44vw, -540px);
  bottom: -18%;
  width: min(66vw, 820px);
  height: 118%;
  border: 1px solid rgba(158, 96, 90, 0.12);
}

.sales-final-inner {
  position: relative;
}

/* ── ACTO 1 · Eyebrow con hairlines + punto (empieza la decisión) ───────── */
.sales-final .eyebrow {
  letter-spacing: 0.24em;
}

.sales-final .eyebrow::after {
  content: "";
  display: block;
  width: 150px;
  height: 7px;
  margin: 12px auto 0;
  background:
    radial-gradient(circle, rgba(230, 207, 164, 0.85) 1.1px, transparent 1.8px) center / 7px 7px no-repeat,
    linear-gradient(90deg, transparent, rgba(200, 164, 104, 0.35)) left center / 62px 1px no-repeat,
    linear-gradient(90deg, rgba(200, 164, 104, 0.35), transparent) right center / 62px 1px no-repeat;
}

/* H2 principal: contraste mirar/decidir en dos líneas. */
.sales-final h2 {
  max-width: none;
  margin-top: clamp(14px, 1.6vw, 20px);
  font-size: clamp(2.7rem, 4.3vw, 4.4rem);
  line-height: 1.04;
}

.sales-final h2 em {
  display: block;
}

/* Párrafo emocional: voz interior, foco del acto 1 junto al H2. */
.sales-final-italic {
  max-width: 50ch;
  font-size: clamp(1.3rem, 1.9vw, 1.7rem) !important;
  line-height: 1.62 !important;
}

/* ── Divisor entre actos: hairline + punto luminoso central ─────────────── */
.sales-final-cierre {
  border-top: 0;
  margin-top: clamp(32px, 4vw, 48px);
  padding-top: clamp(22px, 2.6vw, 32px);
}

.sales-final-cierre::before {
  content: "";
  width: min(520px, 82%);
  height: 9px;
  margin-bottom: clamp(18px, 2.2vw, 26px);
  background:
    radial-gradient(circle, rgba(240, 220, 178, 0.95) 1.4px, rgba(230, 207, 164, 0.28) 4px, transparent 6px) center / 12px 9px no-repeat,
    linear-gradient(90deg, transparent, rgba(200, 164, 104, 0.32) 30%, rgba(200, 164, 104, 0.32) 70%, transparent) center / 100% 1px no-repeat;
}

/* ── ACTO 2 · Decisión ──────────────────────────────────────────────────── */
.sales-final-lbl {
  letter-spacing: 0.26em;
}

.sales-final-cierre h3 {
  max-width: 19ch;
  margin-top: 16px;
  font-size: clamp(2.1rem, 3.2vw, 3.1rem);
  line-height: 1.08;
}

.sales-final-firma {
  margin-top: clamp(16px, 2vw, 24px) !important;
  font-size: 1.15rem !important;
}

/* ── Tablet: la ficha se apila y la perforación pasa a horizontal ───────── */
@media (width <= 1023px) {
  .s2-card {
    grid-template-columns: 1fr;
    max-width: 640px;
  }

  .s2-card-perf {
    border-left: 0;
    border-top: 1px dashed rgba(200, 164, 104, 0.34);
    margin: 0 14px;
  }

  .s2-card-notch {
    top: -8px;
  }

  .s2-card-notch--top { left: -22px; }
  .s2-card-notch--bottom { left: auto; right: -22px; bottom: auto; }
}

/* ── Móvil ──────────────────────────────────────────────────────────────── */
@media (width <= 767px) {
  .sales-final h2 {
    font-size: clamp(2.15rem, 9vw, 2.75rem);
  }

  .sales-final-italic {
    font-size: 1.25rem !important;
  }

  .sales-final-cierre h3 {
    font-size: clamp(1.9rem, 7.8vw, 2.3rem);
  }

  /* Patronaje: solo el filo asoma; nunca compite con el texto. */
  .sales-final::before {
    left: -78vw;
    width: 100vw;
    border-color: rgba(200, 164, 104, 0.07);
  }

  .sales-final::after {
    right: -76vw;
    width: 96vw;
    border-color: rgba(158, 96, 90, 0.09);
  }
}

/* ══ MICRO-FIX · PULSE DEL CTA DE TOPBAR (24-08-2026) — REESCRITO 26-08-2026
   Este bloque enganchaba el pulse a las keyframes de captación POR NOMBRE
   (`cta-double-pulse` / `cta-idle-glint`, declaradas en
   landing-production-source.css). Dirección pide el mismo efecto pero
   AISLADO: si /programa depende del nombre de una keyframe de otra hoja,
   un cambio allí se cuela aquí sin que nada falle. La regla se retira y el
   pulse se declara al final del fichero con keyframes propias
   (`programa-cta-pulse` / `programa-cta-glint`) sobre la clase
   `.programa-topbar-cta`. El CSS de captación no se toca.
   El arbitraje que sigue —que sí depende de `.announcement-cta`— se
   conserva intacto: es lo que garantiza UNA sola fuente animada a la vez. */

/* ── Arbitraje de atención (24-08-2026): UNA sola fuente animada a la vez.
   Si el runtime de atención tiene activo OTRO CTA (data-cta-pulse="true"
   en cualquier CTA que no sea el de la topbar), el pulse de la topbar se
   silencia; al liberarse, lo recupera solo. CSS puro con :has(), mismo
   navegador objetivo que el resto del sistema (range media queries,
   container queries). El botón no cambia de estado visual estático. */
.sales-page:has([data-wow-cta][data-cta-pulse="true"]:not(.announcement-cta)) .announcement-cta[data-wow-cta]:not([data-cta-interacting="true"]):not(:hover):not(:focus-visible):not(:active):not(:disabled) {
  animation: none;
}

.sales-page:has([data-wow-cta][data-cta-pulse="true"]:not(.announcement-cta)) .announcement-cta[data-wow-cta]:not([data-cta-interacting="true"]):not(:hover):not(:focus-visible):not(:active):not(:disabled)::before {
  animation: none;
}

/* ══ CRO TARGETED V2 (dirección, 24-08-2026) · AUD-02/03/04/06 ════════════
   Cuatro mejoras dirigidas de la auditoría CRO. Copy y funcionalidad
   intactos; solo presentación, scoped a sus secciones. */

/* ── AUD-02 · Salida de acción tras el diagnóstico (03) ─────────────────── */
.programa-diag-cta {
  margin-top: clamp(30px, 3.6vw, 44px);
}

/* ── AUD-04 · «en la mano» como unidad tipográfica (10) ─────────────────── */
.sales-deliver h2 em {
  white-space: nowrap;
}

/* ── AUD-03 · FAQ (11): el encabezado acompaña la lectura en desktop ────── */
/* Solo donde existe el grid de dos columnas (colapsa a 1 col en ≤1100px).
   El top respeta la topbar sticky (46px) más un margen de lectura; sticky
   se detiene solo en los límites de .sales-faq-inner: no invade nada. */
@media (width >= 1101px) {
  .sales-faq-head {
    position: sticky;
    top: calc(var(--eventbar-height, 46px) + 36px);
  }
}

/* ── AUD-06 · Dato real escaneable dentro del testimonio (08) ───────────── */
.programa-testi-proof-stat {
  color: #ead0a2;
  font-style: normal;
  font-weight: 600;
  font-size: 1.07em;
  white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════════════════
   S25 STRUCTURAL V2 · FASE A (dirección, 24-08-2026)
   Rebuild estructural real: el DOM de Hero/01/Infostrip/02/03 se reconstruye
   siguiendo el HTML de sprint25-replica (hero-question + anáfora +
   registro-card / hipotesis con cita enmarcada, cuerpo y veredicto / decoder
   / filas clase / pivote), traducido a branding Fashion Lab: Bodoni +
   Manrope, noir/wine/champagne/carmín. Los wrappers legacy de estas cinco
   piezas dejan de usarse; el resto de la landing no se toca.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Piezas compartidas del sistema ─────────────────────────────────────── */

/* Chip de origen (hipotesis-origin): metadata editorial enmarcada. */
.s2-hero .section-number,
.s2-hipo .section-number,
.s2-tesis .section-number,
.s2-diag .section-number {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 clamp(26px, 3vw, 40px);
  padding: 7px 18px;
  border: 1px solid rgba(200, 164, 104, 0.32);
  background: rgba(200, 164, 104, 0.05);
  color: var(--gold-quiet);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.s2-hipo .section-number::before,
.s2-tesis .section-number::before,
.s2-diag .section-number::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #e6cfa4;
}

.s2-hipo,
.s2-diag {
  text-align: center;
}

.s2-hipo .shell > .section-number,
.s2-diag .shell > .section-number {
  margin-inline: auto;
}

/* Veredicto (hipotesis-verdict): kicker + statement entre hairlines. */
.s2-verdict {
  position: relative;
  max-width: 860px;
  margin: clamp(40px, 4.6vw, 64px) auto 0;
  padding: clamp(30px, 3.4vw, 44px) clamp(20px, 3vw, 40px);
  border-top: 1px solid rgba(200, 164, 104, 0.24);
  border-bottom: 1px solid rgba(200, 164, 104, 0.24);
  background: radial-gradient(60% 120% at 50% 50%, rgba(96, 20, 40, 0.18), transparent 74%);
  text-align: center;
}

.s2-verdict-kicker {
  margin: 0 0 16px;
  color: var(--gold-quiet);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

.s2-verdict-statement {
  max-width: 30ch;
  margin: 0 auto;
  font-family: var(--font-editorial), Georgia, serif;
  font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  font-weight: 500;
  line-height: 1.3;
  color: var(--ivory);
  text-wrap: balance;
}

.s2-verdict-statement em {
  color: #e6cfa4;
  font-style: italic;
}

.s2-verdict-statement strong {
  color: #e6cfa4;
  font-weight: 500;
}

/* Cuerpo estrecho (hipotesis-body): lectura a la izquierda, eje centrado. */
.s2-body {
  max-width: 700px;
  margin: 0 auto;
  text-align: left;
}

.s2-body > p {
  margin: 0 0 18px;
  line-height: 1.7;
}

/* ── HERO · pregunta + anáfora + ficha-ticket ───────────────────────────── */
.s2-hero {
  text-align: center;
}

.s2-hero-shell {
  display: block;
}

.s2-hero .section-number { display: none; }

.s2-hero .eyebrow.s2-origin {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 auto clamp(22px, 2.6vw, 34px);
  padding: 7px 18px;
  border: 1px solid rgba(200, 164, 104, 0.32);
  background: rgba(200, 164, 104, 0.05);
  color: var(--gold-quiet);
  letter-spacing: 0.3em;
}

.s2-origin-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--carmine, #d01d3f);
}

.s2-hero h1 {
  max-width: 16ch;
  margin: 0 auto;
  font-size: clamp(2.35rem, 5vw, 4.7rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.s2-anafora {
  max-width: 640px;
  margin: clamp(22px, 2.6vw, 36px) auto 0;
}

.s2-anafora p {
  margin: 0 0 8px;
  font-family: var(--font-editorial), Georgia, serif;
  font-style: italic;
  font-size: clamp(1.02rem, 1.4vw, 1.3rem);
  line-height: 1.4;
  color: rgba(245, 241, 232, 0.62);
}

.s2-anafora-martillo em {
  color: #e6cfa4;
  font-style: italic;
  font-size: 1.14em;
}

/* La ficha (registro-card): main + perforación + aside con CTA. */
.s2-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) 34px minmax(0, 1fr);
  align-items: center;
  max-width: 880px;
  margin: clamp(30px, 3.6vw, 52px) auto 0;
  border: 1px solid rgba(200, 164, 104, 0.3);
  background:
    radial-gradient(70% 120% at 12% 0%, rgba(96, 20, 40, 0.16), transparent 70%),
    rgba(17, 12, 14, 0.82);
  text-align: left;
}

.s2-card-main {
  padding: clamp(24px, 3vw, 38px) clamp(22px, 3vw, 38px);
}

.s2-card-copy {
  margin: 0;
  font-size: clamp(0.98rem, 1.15vw, 1.08rem);
  line-height: 1.65;
  color: var(--text-on-dark-muted);
}

.s2-card-copy b {
  color: var(--ivory);
}

.s2-card-copy--b {
  margin-top: 12px;
  color: var(--ivory);
}

/* Perforación del ticket: línea discontinua + muescas. */
.s2-card-perf {
  position: relative;
  align-self: stretch;
  border-left: 1px dashed rgba(200, 164, 104, 0.34);
}

.s2-card-notch {
  position: absolute;
  left: -8px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--fondo-programa, #0e0b0c);
  border: 1px solid rgba(200, 164, 104, 0.3);
}

.s2-card-notch--top { top: -9px; border-top-color: transparent; }
.s2-card-notch--bottom { bottom: -9px; border-bottom-color: transparent; }

.s2-card-aside {
  padding: clamp(24px, 3vw, 38px) clamp(22px, 3vw, 34px);
}

.s2-card-cta {
  margin: 0;
  align-items: stretch;
}

.s2-card-cta .primary-cta {
  min-width: 0;
  width: 100%;
}

.s2-card-list {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 9px;
}

.s2-card-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.8rem;
  color: var(--text-on-dark-muted);
}

.s2-card-num {
  color: var(--gold-quiet);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.22em;
}

.s2-card-ico svg {
  display: block;
  width: 15px;
  height: 15px;
  color: rgba(200, 164, 104, 0.8);
}

/* ── 01 · HIPOTESIS · cita enmarcada + cuerpo + veredicto ───────────────── */
.s2-hipo-pre {
  display: block;
  margin: 0 0 clamp(24px, 2.8vw, 36px);
  color: rgba(245, 241, 232, 0.5);
  letter-spacing: 0.26em;
}

.s2-frame {
  position: relative;
  max-width: 940px;
  margin: 0 auto clamp(36px, 4.2vw, 56px);
  padding: clamp(40px, 4.6vw, 60px) clamp(24px, 4vw, 48px);
  border-top: 1px solid rgba(200, 164, 104, 0.22);
  border-bottom: 1px solid rgba(200, 164, 104, 0.22);
  background: radial-gradient(60% 130% at 50% 50%, rgba(96, 20, 40, 0.2), transparent 72%);
}

.s2-corner {
  position: absolute;
  width: 16px;
  height: 16px;
  border: 1.5px solid rgba(232, 205, 158, 0.85);
  pointer-events: none;
}

.s2-corner--tl { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.s2-corner--tr { top: -1px; right: -1px; border-left: 0; border-bottom: 0; }
.s2-corner--bl { bottom: -1px; left: -1px; border-right: 0; border-top: 0; }
.s2-corner--br { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

.s2-hipo .s2-frame-quote {
  max-width: 18ch;
  margin: 0 auto;
  font-size: clamp(2rem, 3.8vw, 3.5rem);
  line-height: 1.06;
  text-wrap: balance;
}

/* ── INFOSTRIP · DECODER ────────────────────────────────────────────────── */
.s2-decoder {
  border-top: 1px solid rgba(200, 164, 104, 0.22);
  border-bottom: 1px solid rgba(200, 164, 104, 0.22);
  background: #0b0809;
}

.s2-decoder-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 3.4vw, 48px);
  align-items: start;
}

.s2-decoder-item {
  position: relative;
  text-align: left;
}

.s2-decoder-item:not(:first-child)::before {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: calc(clamp(28px, 3.4vw, 48px) / -2);
  width: 1px;
  background: rgba(200, 164, 104, 0.18);
}

.s2-decoder-label {
  margin: 0 0 14px;
  color: var(--gold-quiet);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.s2-decoder-term {
  margin: 0 0 14px;
  font-family: var(--font-editorial), Georgia, serif;
  font-style: italic;
  font-size: clamp(1.8rem, 2.9vw, 2.8rem);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.015em;
  color: #e6cfa4;
}

.s2-decoder-desc {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.62;
  color: var(--text-on-dark-muted);
}

/* ── 02 · TESIS HEAD + FILAS CLASE ──────────────────────────────────────── */
.s2-tesis-head {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: end;
  margin-bottom: clamp(36px, 4.4vw, 60px);
}

.s2-tesis-titular .section-number {
  margin-bottom: clamp(18px, 2.2vw, 28px);
}

.s2-tesis h2 {
  max-width: none;
  margin: 0;
  font-size: clamp(2.3rem, 4.2vw, 4rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
}

.s2-tesis h2 em {
  display: block;
  color: #e6cfa4;
  font-style: italic;
}

.s2-tesis-sub {
  margin: 0 0 6px;
  max-width: 34ch;
  color: var(--text-on-dark-muted);
  line-height: 1.65;
}

.s2-rows {
  border-top: 1px solid rgba(200, 164, 104, 0.18);
}

.s2-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  gap: clamp(24px, 4vw, 72px);
  padding: clamp(22px, 2.6vw, 34px) 0;
  border-bottom: 1px solid rgba(200, 164, 104, 0.18);
}

.s2-row-left {
  display: flex;
  gap: clamp(16px, 2vw, 26px);
  align-items: baseline;
}

.s2-row-mark {
  flex: 0 0 auto;
  color: rgba(200, 164, 104, 0.75);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.28em;
}

.s2-row-lbl {
  display: block;
  margin-bottom: 8px;
  color: rgba(245, 241, 232, 0.45);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.s2-row-lbl--despues {
  color: var(--gold-quiet);
}

.s2-row-hoy {
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.6;
  color: var(--text-on-dark-muted);
}

.s2-row-despues {
  margin: 0;
  font-family: var(--font-editorial), Georgia, serif;
  font-size: clamp(1.3rem, 1.9vw, 1.75rem);
  line-height: 1.25;
  color: var(--ivory);
  text-wrap: balance;
}

/* ── 03 · DIAGNÓSTICO · hipotesis-body + pivote ─────────────────────────── */
.s2-diag-body .s2-hb {
  margin: 0 0 clamp(34px, 4vw, 52px);
}

.s2-hb-lead {
  margin: 0 0 18px;
  font-family: var(--font-editorial), Georgia, serif;
  font-size: clamp(1.35rem, 2vw, 1.8rem);
  line-height: 1.25;
  color: var(--ivory);
}

.s2-hb-stack,
.s2-hb-dudas {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 9px;
}

.s2-hb-stack li {
  position: relative;
  padding-left: 24px;
  line-height: 1.55;
  color: rgba(245, 241, 232, 0.72);
}

.s2-hb-stack li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: rgba(200, 164, 104, 0.6);
}

.s2-hb-dudas {
  margin: 0 0 clamp(34px, 4vw, 52px);
  gap: 10px;
}

.s2-hb-dudas li {
  padding-left: 24px;
  position: relative;
  font-style: italic;
  line-height: 1.55;
  color: rgba(245, 241, 232, 0.72);
  font-family: var(--font-editorial), Georgia, serif;
  font-size: clamp(1.02rem, 1.3vw, 1.2rem);
}

.s2-hb-dudas li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 5px;
  height: 5px;
  rotate: 45deg;
  background: rgba(200, 164, 104, 0.55);
}

.s2-diag .s2-hb-statement {
  max-width: none;
  margin: 0 0 clamp(20px, 2.4vw, 30px);
  font-size: clamp(2.1rem, 3.8vw, 3.4rem);
  line-height: 1.05;
}

.s2-hb-statement em {
  color: #e6cfa4;
  font-style: italic;
}

.s2-pesa {
  margin: 0;
  padding: 0;
  list-style: none;
}

.s2-pesa li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px dashed rgba(200, 164, 104, 0.2);
  font-size: clamp(1rem, 1.3vw, 1.2rem);
  color: var(--ivory);
}

.s2-pesa li:first-child {
  border-top: 1px dashed rgba(200, 164, 104, 0.2);
}

.s2-pesa li em {
  margin-left: auto;
  font-family: var(--font-editorial), Georgia, serif;
  font-style: italic;
  color: #e6cfa4;
}

/* El pivote: banda propia, estrecha y centrada (sección .pivote de S25). */
.s2-pivote {
  max-width: 900px;
  margin: clamp(44px, 5vw, 72px) auto 0;
  padding: clamp(34px, 4vw, 54px) clamp(22px, 4vw, 48px);
  border-top: 1px solid rgba(200, 164, 104, 0.24);
  border-bottom: 1px solid rgba(200, 164, 104, 0.24);
  background: radial-gradient(58% 130% at 50% 50%, rgba(96, 20, 40, 0.3), transparent 74%);
}

.s2-pivote-text {
  margin: 0 auto;
  max-width: 24ch;
  font-family: var(--font-editorial), Georgia, serif;
  font-style: italic;
  font-size: clamp(1.6rem, 2.6vw, 2.5rem);
  line-height: 1.28;
  color: #e6cfa4;
  text-align: center;
  text-wrap: balance;
}

.s2-diag-cta {
  justify-content: center;
  margin-top: clamp(28px, 3.2vw, 42px);
}

.s2-diag .sales-cta-block {
  align-items: center;
}

/* ── Tablet: la ficha se apila y la perforación pasa a horizontal ───────── */
@media (width <= 1023px) {
  .s2-card {
    grid-template-columns: 1fr;
    max-width: 640px;
  }

  .s2-card-perf {
    border-left: 0;
    border-top: 1px dashed rgba(200, 164, 104, 0.34);
    margin: 0 14px;
  }

  .s2-card-notch {
    top: -8px;
  }

  .s2-card-notch--top { left: -22px; }
  .s2-card-notch--bottom { left: auto; right: -22px; bottom: auto; }
}

/* ── Móvil ──────────────────────────────────────────────────────────────── */
@media (width <= 767px) {
  .s2-hero .eyebrow.s2-origin {
    margin-bottom: 18px;
    padding: 6px 14px;
    letter-spacing: 0.24em;
  }

  .s2-hero h1 {
    font-size: clamp(2.05rem, 8.8vw, 2.5rem);
  }

  /* El CTA no puede caer bajo el fold de 375×667: la ficha sube y la
     anáfora se convierte en el eco posterior (mismo DOM, solo orden). */
  .s2-hero-shell {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .s2-anafora {
    order: 1;
    margin-top: 20px;
  }

  .s2-anafora p {
    margin-bottom: 5px;
    font-size: 1rem;
  }

  .s2-card {
    margin-top: 20px;
  }

  .s2-card-main {
    padding: 18px 18px 16px;
  }

  .s2-card-copy {
    font-size: 0.95rem;
    line-height: 1.55;
  }

  .s2-card-copy--b {
    margin-top: 8px;
  }

  .s2-card-aside {
    padding: 16px 18px 18px;
  }

  .s2-card-list {
    grid-template-columns: 1fr;
    gap: 7px;
    margin-top: 14px;
  }

  .s2-frame {
    padding: 30px 18px;
  }

  .s2-hipo .s2-frame-quote {
    font-size: clamp(1.7rem, 7.6vw, 2.1rem);
  }

  .s2-decoder-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .s2-decoder-item {
    padding: 20px 0;
    border-top: 1px solid rgba(200, 164, 104, 0.16);
  }

  .s2-decoder-item:first-child {
    border-top: 0;
    padding-top: 4px;
  }

  .s2-decoder-item:not(:first-child)::before {
    content: none;
  }

  .s2-decoder-term {
    font-size: 1.65rem;
  }

  .s2-tesis-head {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 14px;
  }

  .s2-row {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 20px 0;
  }

  .s2-row-left {
    gap: 14px;
  }

  .s2-verdict {
    padding: 26px 18px;
  }

  .s2-verdict-statement {
    font-size: 1.35rem;
  }

  .s2-diag .s2-hb-statement {
    font-size: clamp(1.9rem, 8.6vw, 2.3rem);
  }

  .s2-pivote {
    margin-top: 36px;
    padding: 26px 18px;
  }

  .s2-pivote-text {
    font-size: 1.35rem;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   S25 STRUCTURAL V2 · FASE B (dirección, 24-08-2026)
   04 → .quien#para-quien (dual SÍ/NO) · 05 → .dentro (cards de proceso +
   curriculum) · 06 → .quien#dos-puertas (puertas gemelas + panel de stats).
   Solo tokens Fashion Lab. Los wrappers legacy de las tres piezas quedan
   fuera de uso.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Cabecera quien (04/06) ─────────────────────────────────────────────── */
.s2-quien .section-number,
.s2-puertas .section-number,
.s2-dentro .section-number {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 clamp(22px, 2.6vw, 34px);
  padding: 7px 18px;
  border: 1px solid rgba(200, 164, 104, 0.32);
  background: rgba(200, 164, 104, 0.05);
  color: var(--gold-quiet);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.s2-quien .section-number::before,
.s2-puertas .section-number::before,
.s2-dentro .section-number::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #e6cfa4;
}

.s2-quien-head {
  text-align: center;
  max-width: 860px;
  margin: 0 auto clamp(38px, 4.4vw, 60px);
}

.s2-puertas .s2-quien-head h2 {
  max-width: none;
  margin: 0 auto;
  font-size: clamp(2.1rem, 3.8vw, 3.5rem);
  line-height: 1.05;
  text-wrap: balance;
}

.s2-puertas .s2-quien-head h2 em {
  display: block;
  color: #e6cfa4;
  font-style: italic;
}

.s2-quien-sub {
  max-width: 52ch;
  margin: clamp(14px, 1.6vw, 20px) auto 0;
  color: var(--text-on-dark-muted);
  line-height: 1.65;
}

/* ── Dual (04/06): dos columnas del mismo peso ──────────────────────────── */
.s2-dual {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 3.2vw, 48px);
  align-items: stretch;
}

.s2-col {
  padding: clamp(28px, 3.4vw, 46px) clamp(22px, 2.8vw, 40px);
  border: 1px solid rgba(200, 164, 104, 0.24);
  background: rgba(255, 255, 255, 0.015);
}

.s2-col--si {
  border-color: rgba(200, 164, 104, 0.42);
  background:
    radial-gradient(70% 110% at 50% 0%, rgba(96, 20, 40, 0.16), transparent 72%),
    rgba(200, 164, 104, 0.03);
}

.s2-col-title {
  max-width: none;
  margin: 0 0 clamp(22px, 2.6vw, 32px);
  font-size: clamp(1.7rem, 2.6vw, 2.4rem);
  line-height: 1.1;
}

.s2-col-title em {
  color: #e6cfa4;
  font-style: italic;
}

.s2-col-title--no {
  margin: 0 0 clamp(22px, 2.6vw, 32px);
  font-family: var(--font-editorial), Georgia, serif;
  font-size: clamp(1.25rem, 1.8vw, 1.6rem);
  font-weight: 500;
  line-height: 1.3;
  color: rgba(245, 241, 232, 0.85);
}

.s2-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0;
}

.s2-list li {
  display: flex;
  gap: 14px;
  align-items: baseline;
  padding: clamp(12px, 1.4vw, 16px) 0;
  border-bottom: 1px solid rgba(200, 164, 104, 0.14);
}

.s2-list li:last-child {
  border-bottom: 0;
}

.s2-list li p {
  margin: 0;
  font-size: 0.96rem;
  line-height: 1.55;
  color: rgba(245, 241, 232, 0.78);
}

.s2-list li p b {
  color: var(--ivory);
}

.s2-list-num {
  flex: 0 0 auto;
  color: rgba(200, 164, 104, 0.75);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.26em;
}

.s2-list--no li::before {
  content: "—";
  flex: 0 0 auto;
  color: rgba(245, 241, 232, 0.35);
}

.s2-list--no li p {
  color: rgba(245, 241, 232, 0.62);
}

/* Cierre editorial bajo el dual (hipotesis-close). */
.s2-close {
  max-width: 46ch;
  margin: clamp(34px, 4vw, 52px) auto 0;
  font-family: var(--font-editorial), Georgia, serif;
  font-style: italic;
  font-size: clamp(1.15rem, 1.7vw, 1.5rem);
  line-height: 1.45;
  color: rgba(245, 241, 232, 0.82);
  text-align: center;
  text-wrap: balance;
}

.s2-close strong,
.s2-close em {
  color: #e6cfa4;
  font-weight: 500;
  font-style: italic;
}

/* ── 05 · dentro ────────────────────────────────────────────────────────── */
.s2-dentro-head {
  text-align: center;
  max-width: 860px;
  margin: 0 auto clamp(38px, 4.4vw, 60px);
}

.s2-dentro-lbl {
  display: block;
  margin: 0 0 clamp(16px, 2vw, 24px);
  color: rgba(245, 241, 232, 0.5);
  letter-spacing: 0.26em;
}

.s2-dentro h2 {
  max-width: 18ch;
  margin: 0 auto;
  font-size: clamp(2.2rem, 4vw, 3.8rem);
  line-height: 1.04;
  text-wrap: balance;
}

.s2-dentro h2 em {
  color: #e6cfa4;
  font-style: italic;
}

.s2-dentro-intro {
  max-width: 46ch;
  margin: clamp(16px, 1.8vw, 24px) auto 0;
  color: var(--text-on-dark-muted);
  line-height: 1.65;
}

.s2-dentro-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2.2vw, 30px);
}

.s2-dcard {
  position: relative;
  overflow: hidden;
  padding: clamp(24px, 2.8vw, 36px) clamp(22px, 2.6vw, 34px);
  border: 1px solid rgba(200, 164, 104, 0.22);
  background:
    linear-gradient(180deg, rgba(200, 164, 104, 0.04), transparent 40%),
    rgba(17, 12, 14, 0.72);
}

/* La quinta card cierra la secuencia a todo el ancho. */
.s2-dcard:last-child {
  grid-column: 1 / -1;
}

.s2-dcard-letter {
  position: absolute;
  top: 2px;
  right: 14px;
  font-family: var(--font-editorial), Georgia, serif;
  font-style: italic;
  font-size: clamp(3.4rem, 5vw, 5rem);
  line-height: 1;
  color: rgba(200, 164, 104, 0.14);
  pointer-events: none;
}

.s2-dcard-tag {
  display: inline-block;
  margin: 0 0 14px;
  padding: 6px 12px;
  border: 1px solid rgba(200, 164, 104, 0.4);
  border-radius: 999px;
  color: rgba(200, 164, 104, 0.95);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.s2-dcard-title {
  margin: 0 0 10px;
  font-family: var(--font-editorial), Georgia, serif;
  font-size: clamp(1.35rem, 1.8vw, 1.7rem);
  font-weight: 500;
  line-height: 1.18;
  color: var(--ivory);
}

.s2-dcard-body {
  margin: 0;
  max-width: 52ch;
  font-size: 0.92rem;
  line-height: 1.62;
  color: var(--text-on-dark-muted);
}

/* Curriculum: cambio de registro claro respecto al proceso. */
.s2-modulos {
  margin-top: clamp(36px, 4.2vw, 56px);
  padding-top: clamp(28px, 3.2vw, 40px);
  border-top: 1px solid rgba(200, 164, 104, 0.22);
}

.s2-modulos-lbl {
  margin: 0 0 clamp(20px, 2.4vw, 30px);
  color: rgba(232, 205, 158, 0.95);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  text-align: center;
}

.s2-modulos-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 22px);
}

.s2-mcard {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: clamp(16px, 1.8vw, 22px) clamp(16px, 2vw, 24px);
  border: 1px solid rgba(200, 164, 104, 0.18);
  background: rgba(14, 10, 12, 0.55);
}

.s2-mcard-num {
  color: rgba(232, 205, 158, 0.9);
  font-family: var(--font-editorial), Georgia, serif;
  font-style: italic;
  font-size: 1.05rem;
}

.s2-mcard h3 {
  margin: 0;
  font-family: var(--font-editorial), Georgia, serif;
  font-size: clamp(1.05rem, 1.3vw, 1.2rem);
  font-weight: 500;
  color: var(--ivory);
}

.s2-dentro-cta {
  align-items: center;
  margin-top: clamp(30px, 3.6vw, 46px);
}

/* ── 06 · puertas ───────────────────────────────────────────────────────── */
.s2-dual--rutas {
  align-items: stretch;
}

.s2-col--ruta {
  position: relative;
  padding-top: clamp(44px, 5vw, 64px);
  text-align: center;
  border-color: rgba(200, 164, 104, 0.3);
  background:
    radial-gradient(70% 110% at 50% 0%, rgba(96, 20, 40, 0.12), transparent 72%),
    rgba(255, 255, 255, 0.015);
}

.s2-ruta-medallon {
  position: absolute;
  top: -26px;
  left: 50%;
  translate: -50% 0;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid rgba(200, 164, 104, 0.5);
  background: #140e11;
  color: rgba(232, 205, 158, 0.9);
}

.s2-ruta-medallon svg {
  width: 22px;
  height: 22px;
}

.s2-stamp {
  display: inline-block;
  margin: 0 0 clamp(16px, 2vw, 24px);
  padding: 7px 14px;
  border: 1px solid rgba(200, 164, 104, 0.45);
  color: var(--gold-quiet);
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.s2-ruta-title {
  margin: 0 auto clamp(12px, 1.4vw, 18px);
  max-width: 20ch;
  font-family: var(--font-editorial), Georgia, serif;
  font-size: clamp(1.4rem, 2vw, 1.85rem);
  font-weight: 500;
  line-height: 1.2;
  color: var(--ivory);
  text-wrap: balance;
}

.s2-ruta-txt {
  margin: 0 auto;
  max-width: 40ch;
  font-size: 0.95rem;
  line-height: 1.62;
  color: var(--text-on-dark-muted);
}

/* Acompañamiento: texto + panel de métricas (eco del decoder). */
.s2-accompany {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(28px, 3.6vw, 56px);
  align-items: center;
  margin-top: clamp(44px, 5vw, 72px);
  padding-top: clamp(34px, 4vw, 52px);
  border-top: 1px solid rgba(200, 164, 104, 0.2);
}

.s2-acc-lbl {
  color: var(--gold-quiet);
  letter-spacing: 0.26em;
}

.s2-accompany-texto h3 {
  margin: 12px 0 14px;
  font-family: var(--font-editorial), Georgia, serif;
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  font-weight: 500;
  line-height: 1.15;
  color: var(--ivory);
}

.s2-accompany-texto > p {
  margin: 0;
  max-width: 52ch;
  line-height: 1.68;
  color: var(--text-on-dark-muted);
}

.s2-diagbox {
  margin-top: clamp(18px, 2.2vw, 26px);
  padding: clamp(16px, 2vw, 24px) clamp(18px, 2.2vw, 26px);
  border-left: 2px solid rgba(200, 164, 104, 0.55);
  background: rgba(200, 164, 104, 0.05);
}

.s2-diagbox-lbl {
  margin: 0 0 8px;
  color: var(--gold-quiet);
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.s2-diagbox p:last-child {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.6;
  color: rgba(245, 241, 232, 0.75);
}

.s2-stats {
  display: grid;
  gap: 0;
  border: 1px solid rgba(200, 164, 104, 0.24);
  background: #0b0809;
}

.s2-stat {
  display: grid;
  gap: 4px;
  padding: clamp(18px, 2.2vw, 26px) clamp(20px, 2.4vw, 30px);
  border-top: 1px solid rgba(200, 164, 104, 0.16);
  text-align: left;
}

.s2-stat:first-child {
  border-top: 0;
}

.s2-stat-num {
  font-family: var(--font-editorial), Georgia, serif;
  font-style: italic;
  font-size: clamp(1.9rem, 2.6vw, 2.5rem);
  line-height: 1;
  color: #e6cfa4;
}

.s2-stat-lbl {
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--text-on-dark-muted);
}

/* ── Tablet / móvil ─────────────────────────────────────────────────────── */
@media (width <= 900px) {
  .s2-dual {
    grid-template-columns: 1fr;
  }

  .s2-dual--rutas {
    row-gap: 44px;
  }

  .s2-accompany {
    grid-template-columns: 1fr;
  }
}

@media (width <= 767px) {
  .s2-quien-head {
    margin-bottom: 26px;
  }

  .s2-col {
    padding: 22px 18px;
  }

  .s2-col-title {
    font-size: 1.5rem;
  }

  .s2-list li p {
    font-size: 0.94rem;
  }

  .s2-dentro-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .s2-dcard {
    padding: 20px 18px;
  }

  .s2-dcard-letter {
    font-size: 3rem;
    right: 10px;
  }

  .s2-modulos-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .s2-mcard {
    padding: 13px 16px;
  }

  .s2-col--ruta {
    padding-top: 40px;
  }

  .s2-stats {
    margin-top: 6px;
  }

  .s2-stat {
    padding: 14px 18px;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   S25 STRUCTURAL V2 · FASE C (dirección, 24-08-2026)
   07 → #bonus (.dentro): grid de cards con glifo + escalera VIP/48H como
   segundo nivel · 08 → .testimonios: figure-cards de cita + galería 2×2.
   Assets, countdown y vídeos intactos. Solo tokens Fashion Lab.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 07 · chip + cards de bonus ─────────────────────────────────────────── */
.s2-valor .section-number {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 clamp(22px, 2.6vw, 34px);
  padding: 7px 18px;
  border: 1px solid rgba(200, 164, 104, 0.32);
  background: rgba(200, 164, 104, 0.05);
  color: var(--gold-quiet);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.s2-valor .section-number::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #e6cfa4;
}

.s2-valor .s2-dentro-head h2 {
  max-width: 16ch;
  margin: 0 auto;
  font-size: clamp(2.2rem, 4vw, 3.8rem);
  line-height: 1.04;
  text-wrap: balance;
}

.s2-valor .s2-dentro-head h2 em {
  color: #e6cfa4;
  font-style: italic;
}

.s2-bonus-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 26px);
}

.s2-bcard {
  position: relative;
  overflow: hidden;
  padding: clamp(22px, 2.6vw, 32px) clamp(20px, 2.4vw, 30px);
  border: 1px solid rgba(200, 164, 104, 0.22);
  background:
    linear-gradient(180deg, rgba(200, 164, 104, 0.04), transparent 40%),
    rgba(17, 12, 14, 0.72);
}

.s2-bcard-ico {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 14px;
  border-radius: 50%;
  border: 1px solid rgba(200, 164, 104, 0.42);
  background: radial-gradient(circle at 50% 36%, rgba(200, 164, 104, 0.1), transparent 70%);
  color: rgba(232, 205, 158, 0.9);
}

.s2-bcard-ico svg {
  width: 20px;
  height: 20px;
}

.s2-bcard-title {
  margin: 0 0 8px;
  max-width: 24ch;
  font-family: var(--font-editorial), Georgia, serif;
  font-size: clamp(1.2rem, 1.6vw, 1.45rem);
  font-weight: 500;
  line-height: 1.2;
  color: var(--ivory);
}

.s2-bcard-body {
  margin: 0;
  max-width: 44ch;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text-on-dark-muted);
}

/* ── 07 · escalera VIP: segundo nivel estructural ───────────────────────── */
.s2-vip-head {
  position: relative;
  margin: clamp(44px, 5vw, 68px) auto clamp(28px, 3.4vw, 44px);
  padding-top: clamp(30px, 3.6vw, 44px);
  border-top: 1px solid rgba(200, 164, 104, 0.22);
  text-align: center;
}

.s2-vip-lbl {
  display: block;
  margin: 0 0 12px;
  color: var(--gold-quiet);
  letter-spacing: 0.3em;
}

.s2-vip-head h2 {
  max-width: none;
  margin: 0 auto;
  font-size: clamp(1.9rem, 3.2vw, 3rem);
  line-height: 1.05;
  text-wrap: balance;
}

.s2-vip-head h2 em {
  color: #e6cfa4;
  font-style: italic;
}

.s2-vip-dual {
  align-items: stretch;
}

.s2-vipcard {
  position: relative;
  overflow: hidden;
  display: grid;
  align-content: start;
  padding: clamp(26px, 3vw, 40px) clamp(22px, 2.8vw, 36px);
  border: 1px solid rgba(200, 164, 104, 0.34);
  background:
    radial-gradient(70% 110% at 20% 0%, rgba(96, 20, 40, 0.18), transparent 72%),
    rgba(17, 12, 14, 0.82);
}

.s2-vip-medallon {
  position: relative;
  width: clamp(120px, 12vw, 168px);
  margin-bottom: 16px;
}

.s2-vip-medallon img {
  display: block;
  width: 100%;
  height: auto;
}

.s2-vip-medallon-vip {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-editorial), Georgia, serif;
  font-size: clamp(1.5rem, 2vw, 2.1rem);
  letter-spacing: 0.14em;
  color: rgba(90, 62, 24, 0.85);
}

.s2-vip-title {
  margin: 0 0 12px;
  font-family: var(--font-editorial), Georgia, serif;
  font-size: clamp(1.4rem, 1.9vw, 1.75rem);
  font-weight: 500;
  line-height: 1.18;
  color: var(--ivory);
}

.s2-vip-lista {
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.s2-vip-lista li {
  position: relative;
  padding-left: 20px;
  font-size: 0.94rem;
  line-height: 1.55;
  color: rgba(245, 241, 232, 0.78);
}

.s2-vip-lista li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.58em;
  width: 5px;
  height: 5px;
  rotate: 45deg;
  background: rgba(200, 164, 104, 0.6);
}

.s2-vip-nota {
  margin: 0;
  max-width: 44ch;
  font-size: 0.82rem;
  line-height: 1.55;
  color: rgba(245, 241, 232, 0.5);
}

.s2-vipcard--urgente {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(16px, 2vw, 28px);
  align-items: center;
  border-color: rgba(208, 29, 63, 0.38);
}

.s2-dcard-tag--urgente {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-color: rgba(208, 29, 63, 0.55);
  color: #e8536d;
}

.s2-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--carmine, #d01d3f);
}

.s2-vip-copy {
  margin: 0 0 14px;
  max-width: 40ch;
  font-size: 0.94rem;
  line-height: 1.6;
  color: var(--text-on-dark-muted);
}

.s2-vip-reloj {
  margin: 0;
  font-family: var(--font-editorial), Georgia, serif;
  font-size: clamp(2.1rem, 3vw, 2.9rem);
  line-height: 1;
  color: #e6cfa4;
  font-variant-numeric: tabular-nums;
}

.s2-vip-arena {
  width: clamp(84px, 9vw, 132px);
}

.s2-vip-arena img {
  display: block;
  width: 100%;
  height: auto;
}

/* ── 08 · testimonios ───────────────────────────────────────────────────── */
.s2-testi-head {
  text-align: center;
  max-width: 860px;
  margin: 0 auto clamp(36px, 4.2vw, 56px);
}

.s2-testi .section-number {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 clamp(22px, 2.6vw, 34px);
  padding: 7px 18px;
  border: 1px solid rgba(200, 164, 104, 0.32);
  background: rgba(200, 164, 104, 0.05);
  color: var(--gold-quiet);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.s2-testi .section-number::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #e6cfa4;
}

.s2-testi-eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 0 0 clamp(14px, 1.6vw, 20px);
  color: rgba(245, 241, 232, 0.5);
  letter-spacing: 0.26em;
}

.s2-testi-eyebrow::before,
.s2-testi-eyebrow::after {
  content: "";
  width: clamp(28px, 4vw, 56px);
  height: 1px;
  background: rgba(200, 164, 104, 0.35);
}

.s2-testi-head h2 {
  max-width: none;
  margin: 0 auto;
  font-size: clamp(2.1rem, 3.8vw, 3.5rem);
  line-height: 1.05;
  text-wrap: balance;
}

.s2-testi-head h2 em {
  color: #e6cfa4;
  font-style: italic;
}

.s2-testi-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 28px);
  align-items: stretch;
}

.s2-tcard {
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: clamp(24px, 2.8vw, 34px) clamp(20px, 2.4vw, 30px);
  border: 1px solid rgba(200, 164, 104, 0.22);
  background:
    linear-gradient(180deg, rgba(200, 164, 104, 0.04), transparent 40%),
    rgba(17, 12, 14, 0.72);
}

.s2-tcard::before {
  content: "“";
  position: absolute;
  top: 6px;
  right: 18px;
  font-family: var(--font-editorial), Georgia, serif;
  font-size: 4.4rem;
  line-height: 1;
  color: rgba(200, 164, 104, 0.16);
  pointer-events: none;
}

.s2-tcard-stars {
  margin-bottom: 14px;
  color: rgba(232, 205, 158, 0.85);
  font-size: 0.78rem;
  letter-spacing: 0.28em;
}

.s2-tquote {
  margin: 0 0 18px;
  flex: 1;
}

.s2-tquote p {
  margin: 0;
  font-family: var(--font-editorial), Georgia, serif;
  font-style: italic;
  font-size: clamp(1.02rem, 1.25vw, 1.16rem);
  line-height: 1.55;
  color: rgba(245, 241, 232, 0.85);
}

.s2-tmeta {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 12px;
  align-items: baseline;
  padding-top: 14px;
  border-top: 1px solid rgba(200, 164, 104, 0.2);
}

.s2-tnum {
  grid-row: 1 / 3;
  font-family: var(--font-editorial), Georgia, serif;
  font-style: italic;
  font-size: 1.3rem;
  color: rgba(232, 205, 158, 0.85);
}

.s2-tmeta b {
  color: var(--ivory);
  font-size: 0.92rem;
}

.s2-tmeta small {
  color: var(--gold-quiet);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* Galería: fila de 4 cards en escritorio (eco testimonios-grid) y 2×2 en
   móvil — los 4 vídeos siempre a la vista, sin carril oculto. */
.s2-videos {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 24px);
  margin-top: clamp(34px, 4vw, 52px);
}

@media (width <= 900px) {
  .s2-videos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.s2-videos-nota {
  margin: clamp(16px, 2vw, 24px) auto 0;
  max-width: 52ch;
  text-align: center;
  font-size: 0.82rem;
  color: rgba(245, 241, 232, 0.5);
}

.s2-proof-cta {
  align-items: center;
  margin-top: clamp(28px, 3.4vw, 44px);
}

/* ── Tablet / móvil ─────────────────────────────────────────────────────── */
@media (width <= 900px) {
  .s2-bonus-grid {
    grid-template-columns: 1fr;
  }

  .s2-testi-grid {
    grid-template-columns: 1fr;
  }
}

@media (width <= 767px) {
  .s2-bcard {
    padding: 18px 16px;
  }

  .s2-vipcard {
    padding: 20px 18px;
  }

  .s2-vipcard--urgente {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .s2-vip-arena {
    width: 72px;
  }

  .s2-vip-reloj {
    font-size: 1.9rem;
  }

  .s2-tcard {
    padding: 20px 18px;
  }

  .s2-videos {
    gap: 10px;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   S25 STRUCTURAL V2 · FIX DE ESPECIFICIDAD (dirección, 24-08-2026)
   «.sales-main p» (0,1,1) pisaba el font-size de los roles s2-* declarados
   sobre <p> (0,1,0). Se re-declara cada rol tipográfico bajo .sales-main
   (0,2,0) para que el sistema gane sin !important. Sin cambios de diseño:
   estos SON los tamaños que el sistema declaraba.
   ══════════════════════════════════════════════════════════════════════════ */

.sales-main .s2-decoder-label { font-size: 0.66rem; }
.sales-main .s2-decoder-term { font-size: clamp(1.8rem, 2.9vw, 2.8rem); }
.sales-main .s2-decoder-desc { font-size: 0.9rem; }
.sales-main .s2-card-copy { font-size: clamp(0.98rem, 1.15vw, 1.08rem); }
.sales-main .s2-hb-lead { font-size: clamp(1.35rem, 2vw, 1.8rem); }
.sales-main .s2-verdict-kicker { font-size: 0.72rem; }
.sales-main .s2-verdict-statement { font-size: clamp(1.5rem, 2.4vw, 2.1rem); }
.sales-main .s2-pivote-text { font-size: clamp(1.6rem, 2.6vw, 2.5rem); }
.sales-main .s2-row-hoy { font-size: 0.94rem; }
.sales-main .s2-row-despues { font-size: clamp(1.3rem, 1.9vw, 1.75rem); }
.sales-main .s2-tesis-sub,
.sales-main .s2-quien-sub,
.sales-main .s2-dentro-intro { font-size: var(--type-body); }
.sales-main .s2-close { font-size: clamp(1.15rem, 1.7vw, 1.5rem); }
.sales-main .s2-dcard-tag { font-size: 0.62rem; width: fit-content; }
.sales-main .s2-dcard-body { font-size: 0.92rem; }
.sales-main .s2-bcard-body { font-size: 0.9rem; }
.sales-main .s2-modulos-lbl { font-size: 0.68rem; }
.sales-main .s2-diagbox-lbl { font-size: 0.64rem; }
.sales-main .s2-vip-copy { font-size: 0.94rem; }
.sales-main .s2-vip-nota { font-size: 0.82rem; }
.sales-main .s2-vip-reloj { font-size: clamp(2.1rem, 3vw, 2.9rem); }
.sales-main .s2-videos-nota { font-size: 0.82rem; }
.sales-main .s2-hipo-pre { font-size: 0.72rem; }
.sales-main .s2-vip-lbl { font-size: 0.72rem; }
.sales-main .s2-testi-eyebrow { font-size: 0.72rem; }
.sales-main .s2-acc-lbl { font-size: 0.72rem; }
.sales-main .s2-dentro-lbl { font-size: 0.72rem; }

@media (width <= 767px) {
  .sales-main .s2-decoder-term { font-size: 1.65rem; }
  .sales-main .s2-verdict-statement { font-size: 1.35rem; }
  .sales-main .s2-pivote-text { font-size: 1.35rem; }
  .sales-main .s2-vip-reloj { font-size: 1.9rem; }
  .sales-main .s2-card-copy { font-size: 0.95rem; }
}

/* ══════════════════════════════════════════════════════════════════════════
   S25 STRUCTURAL V2 · FASE D (dirección, 24-08-2026)
   10 → #resultado (tesis-head + dentro-grid de outcomes) · 11 → #faq (filas
   con marca, details/summary intactos) · Cierre → .final (status-chip →
   manifesto → prosa → decisión → CTA). 09 = KEEP por superioridad.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 10 · resultado ─────────────────────────────────────────────────────── */
.s2-resultado .section-number {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 clamp(22px, 2.6vw, 34px);
  padding: 7px 18px;
  border: 1px solid rgba(200, 164, 104, 0.32);
  background: rgba(200, 164, 104, 0.05);
  color: var(--gold-quiet);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.s2-resultado .section-number::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #e6cfa4;
}

.s2-resultado .s2-dentro-head h2 {
  max-width: 20ch;
  margin: 0 auto;
  font-size: clamp(2.2rem, 4vw, 3.8rem);
  line-height: 1.04;
  text-wrap: balance;
}

.s2-resultado .s2-dentro-head h2 em {
  color: #e6cfa4;
  font-style: italic;
}

.s2-resultado-criterio {
  max-width: 620px;
  margin: 0 auto clamp(30px, 3.6vw, 48px);
  text-align: center;
}

.s2-resultado-criterio p {
  margin: 0 0 6px;
  line-height: 1.6;
  color: var(--text-on-dark-muted);
}

.s2-resultado-criterio strong {
  color: var(--ivory);
  font-weight: 600;
}

.s2-rcard {
  position: relative;
  overflow: hidden;
  padding: clamp(22px, 2.6vw, 32px) clamp(20px, 2.4vw, 30px);
  border: 1px solid rgba(200, 164, 104, 0.22);
  background:
    linear-gradient(180deg, rgba(200, 164, 104, 0.04), transparent 40%),
    rgba(17, 12, 14, 0.72);
}

.s2-resultado-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* ── 11 · faq en filas ──────────────────────────────────────────────────── */
.s2-faq .section-number {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 clamp(22px, 2.6vw, 34px);
  padding: 7px 18px;
  border: 1px solid rgba(200, 164, 104, 0.32);
  background: rgba(200, 164, 104, 0.05);
  color: var(--gold-quiet);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.s2-faq .section-number::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #e6cfa4;
}

.s2-faq-head {
  text-align: center;
  margin-bottom: clamp(34px, 4vw, 52px);
}

.s2-faq-head h2 {
  max-width: none;
  margin: 0 auto;
  font-size: clamp(2.1rem, 3.8vw, 3.5rem);
  line-height: 1.05;
}

.s2-faq-head h2 em {
  color: #e6cfa4;
  font-style: italic;
}

.s2-faq-list {
  max-width: 880px;
  margin: 0 auto;
  border-top: 1px solid rgba(200, 164, 104, 0.2);
}

.s2-faq-row {
  border-bottom: 1px solid rgba(200, 164, 104, 0.2);
}

.s2-faq-row summary {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: clamp(14px, 2vw, 24px);
  padding: clamp(16px, 2vw, 24px) 4px;
  cursor: pointer;
  list-style: none;
}

.s2-faq-row summary::-webkit-details-marker {
  display: none;
}

.s2-faq-num {
  font-family: var(--font-editorial), Georgia, serif;
  font-style: italic;
  font-size: 1.15rem;
  color: rgba(232, 205, 158, 0.85);
}

.s2-faq-q {
  font-family: var(--font-editorial), Georgia, serif;
  font-size: clamp(1.12rem, 1.5vw, 1.35rem);
  font-weight: 500;
  line-height: 1.3;
  color: var(--ivory);
}

.s2-faq-row summary b {
  font-weight: 400;
  font-size: 1.3rem;
  line-height: 1;
  color: var(--gold-quiet);
  transition: rotate 0.25s ease;
}

.s2-faq-row[open] summary b {
  rotate: 45deg;
}

.s2-faq-row > p {
  max-width: 62ch;
  margin: 0;
  padding: 0 4px clamp(18px, 2.2vw, 26px) calc(1.15rem + clamp(14px, 2vw, 24px));
  line-height: 1.68;
  color: var(--text-on-dark-muted);
}

/* ── CIERRE · .final ────────────────────────────────────────────────────── */
/* El patronaje anterior desaparece: el cierre S25 es limpio y centrado. */
.s2-final::before,
.s2-final::after {
  content: none;
}

.s2-final-shell {
  display: block;
  max-width: none;
  text-align: center;
}

.sales-main .s2-final-status {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 clamp(30px, 3.6vw, 46px);
  padding: 10px 20px;
  border: 1px solid rgba(208, 29, 63, 0.5);
  color: #e6cfa4;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}

.sales-main .s2-final-pre {
  display: block;
  max-width: none;
  margin: 0 0 14px;
  color: rgba(245, 241, 232, 0.5);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}

.s2-final .s2-final-manifesto {
  max-width: 18ch;
  margin: 0 auto clamp(34px, 4.2vw, 56px);
  font-size: clamp(2.3rem, 4.4vw, 4.2rem);
  line-height: 1.02;
  text-wrap: balance;
}

.s2-final-manifesto em {
  display: block;
  color: #e6cfa4;
  font-style: italic;
}

.s2-final-prose {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.4vw, 30px);
  max-width: 640px;
  margin: 0 auto;
  text-align: left;
}

.sales-main .s2-final-kicker {
  margin: 0;
  font-size: clamp(1.02rem, 1.25vw, 1.14rem);
  line-height: 1.7;
  color: var(--text-on-dark-muted);
}

.sales-main .s2-final-kicker--lead {
  color: rgba(245, 241, 232, 0.88);
  font-size: clamp(1.08rem, 1.4vw, 1.25rem);
}

.sales-main .s2-final-kicker--reflect {
  font-family: var(--font-editorial), Georgia, serif;
  font-style: italic;
  font-size: clamp(1.08rem, 1.4vw, 1.25rem);
  color: rgba(232, 205, 158, 0.85);
}

.s2-final-kicker--close strong {
  color: #e6cfa4;
  font-weight: 500;
}

.s2-final-decision {
  position: relative;
  max-width: 760px;
  margin: clamp(40px, 4.8vw, 66px) auto 0;
  padding-top: clamp(28px, 3.4vw, 42px);
  border-top: 1px solid rgba(200, 164, 104, 0.24);
}

.s2-final-decision::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 50%;
  translate: -50% 0;
  width: min(340px, 70%);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(240, 217, 174, 0.85), transparent);
}

.sales-main .s2-final-lbl {
  margin: 0 0 14px;
  color: var(--gold-quiet);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

.s2-final-decision h3 {
  max-width: 19ch;
  margin: 0 auto 12px;
  font-family: var(--font-editorial), Georgia, serif;
  font-size: clamp(1.9rem, 3vw, 2.9rem);
  font-weight: 500;
  line-height: 1.1;
  color: var(--ivory);
  text-wrap: balance;
}

.s2-final-decision h3 em {
  color: #e6cfa4;
  font-style: italic;
}

.sales-main .s2-final-decision-sub {
  max-width: 44ch;
  margin: 0 auto;
  line-height: 1.65;
  color: var(--text-on-dark-muted);
}

.s2-final-cta {
  align-items: center;
  margin-top: clamp(26px, 3.2vw, 40px);
}

.s2-final-cta .sales-cta-note {
  max-width: 52ch;
  text-align: center;
}

.sales-main .s2-final-firma {
  margin: clamp(18px, 2.2vw, 28px) 0 0;
  font-family: var(--font-editorial), Georgia, serif;
  font-style: italic;
  font-size: clamp(1.1rem, 1.5vw, 1.35rem);
  color: rgba(232, 205, 158, 0.8);
}

/* ── Móvil ──────────────────────────────────────────────────────────────── */
@media (width <= 900px) {
  .s2-resultado-grid {
    grid-template-columns: 1fr;
  }
}

@media (width <= 767px) {
  .s2-rcard {
    padding: 18px 16px;
  }

  .s2-faq-row summary {
    padding: 14px 2px;
  }

  .s2-faq-row > p {
    padding-left: 0;
  }

  .s2-final .s2-final-manifesto {
    font-size: clamp(2rem, 8.6vw, 2.4rem);
  }

  .s2-final-decision h3 {
    font-size: 1.7rem;
  }
}

/* ── Fugas legacy neutralizadas (FASE D) ────────────────────────────────── */
/* El grid 62/38 antiguo de .sales-deliver .shell no aplica al nuevo DOM. */
.s2-resultado > .shell {
  display: block;
}

/* El eyebrow del cierre pierde la decoración lateral del layout anterior. */
.sales-main .s2-final-pre {
  text-align: center;
}

.s2-final .s2-final-pre::before,
.s2-final .s2-final-pre::after {
  content: none;
}

/* ══════════════════════════════════════════════════════════════════════════
   S25 STRUCTURAL V2 · POST-HERO · FICHA DE APERTURA (dirección, 24-08-2026)
   registro-card de Sprint25 traducida a ticket de atelier Fashion Lab:
   main (eyebrow → logo → copy → metadata) | perforación con muescas | aside
   (estado de puertas → cierre con reloj → CTA → bonus VIP secundario).
   El estado abierto/cerrado lo gobierna [data-cart-estado] desde programa.ts.
   ══════════════════════════════════════════════════════════════════════════ */

.s2-posthero {
  --ritmo-t: clamp(10px, 1.4vw, 22px);
  --ritmo-b: clamp(56px, 6vw, 96px);
}

.s2-ph-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) 36px minmax(0, 1fr);
  align-items: stretch;
  max-width: 1080px;
  margin: 0 auto;
  border: 1px solid rgba(200, 164, 104, 0.38);
  background:
    radial-gradient(70% 120% at 10% 0%, rgba(96, 20, 40, 0.22), transparent 70%),
    radial-gradient(50% 90% at 96% 100%, rgba(96, 20, 40, 0.14), transparent 72%),
    rgba(15, 11, 13, 0.9);
}

.s2-ph-main {
  padding: clamp(26px, 3.2vw, 44px) clamp(24px, 3.2vw, 44px);
}

.sales-main .s2-ph-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 clamp(16px, 2vw, 24px);
  color: var(--gold-quiet);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.s2-ph-eyebrow span {
  color: #e6cfa4;
  font-size: 0.6rem;
}

.s2-ph-logo {
  display: block;
  max-width: min(320px, 74%);
  margin-bottom: clamp(16px, 2vw, 24px);
}

.s2-ph-logo img {
  display: block;
  width: 100%;
  height: auto;
}

.sales-main .s2-ph-copy {
  margin: 0;
  max-width: 46ch;
  font-size: clamp(0.98rem, 1.15vw, 1.06rem);
  line-height: 1.65;
  color: var(--text-on-dark-muted);
}

.s2-ph-copy b {
  color: var(--ivory);
}

.sales-main .s2-ph-foot {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: clamp(20px, 2.4vw, 30px) 0 0;
  color: var(--gold-quiet);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.s2-ph-foot span {
  white-space: nowrap;
}

.s2-ph-foot-line {
  flex: 0 1 64px;
  height: 1px;
  background: rgba(200, 164, 104, 0.35);
}

/* Perforación de patronaje: línea discontinua + dos muescas. */
.s2-ph-perf {
  position: relative;
  border-left: 1px dashed rgba(200, 164, 104, 0.4);
}

.s2-ph-notch {
  position: absolute;
  left: -8px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--fondo-programa, #0e0b0c);
  border: 1px solid rgba(200, 164, 104, 0.38);
}

.s2-ph-notch--a { top: -9px; border-top-color: transparent; }
.s2-ph-notch--b { bottom: -9px; border-bottom-color: transparent; }

.s2-ph-aside {
  display: grid;
  align-content: center;
  gap: clamp(14px, 1.8vw, 20px);
  padding: clamp(26px, 3.2vw, 44px) clamp(22px, 2.8vw, 36px);
}

/* Estado de puertas: uno u otro según [data-cart-estado]. */
.sales-main .s2-ph-status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: #e6cfa4;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.s2-live-dot--apagado {
  background: rgba(245, 241, 232, 0.35);
}

/* El estado gana al rol base (.sales-main .s2-ph-status, 0,2,0): el hide
   por defecto comparte especificidad y va después; los del estado cerrado
   llevan !important porque gobiernan visibilidad, no estilo. */
.sales-main .s2-ph-status--cerrado { display: none; }
[data-cart-estado="cerrado"] .s2-ph-status--abierto { display: none !important; }
[data-cart-estado="cerrado"] .s2-ph-status--cerrado { display: inline-flex !important; }
[data-cart-estado="cerrado"] .s2-ph-cta { display: none !important; }

.s2-ph-cierre {
  display: grid;
  gap: 8px;
}

.sales-main .s2-ph-lbl {
  color: rgba(245, 241, 232, 0.5);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.sales-main .s2-ph-clock {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0;
}

.s2-ph-cell {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
}

.s2-ph-cell strong {
  font-family: var(--font-editorial), Georgia, serif;
  font-weight: 500;
  font-size: clamp(1.9rem, 2.4vw, 2.4rem);
  line-height: 1;
  color: var(--ivory);
  font-variant-numeric: tabular-nums;
}

.s2-ph-cell em {
  font-style: normal;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--gold-quiet);
}

.s2-ph-sep {
  color: rgba(200, 164, 104, 0.5);
  font-family: var(--font-editorial), Georgia, serif;
  font-size: 1.4rem;
  line-height: 1;
}

.sales-main .s2-ph-fecha {
  color: rgba(245, 241, 232, 0.62);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}

.s2-ph-cta {
  margin: 0;
  align-items: stretch;
}

.s2-ph-cta .primary-cta {
  min-width: 0;
  width: 100%;
}

/* Bonus VIP: segunda vista del mismo estado — secundaria, nunca compite. */
.s2-ph-vip {
  display: grid;
  gap: 4px;
  padding-top: clamp(12px, 1.6vw, 18px);
  border-top: 1px dashed rgba(200, 164, 104, 0.28);
}

.sales-main .s2-ph-vipclock {
  margin: 0;
  font-family: var(--font-editorial), Georgia, serif;
  font-style: italic;
  font-size: clamp(1.15rem, 1.5vw, 1.4rem);
  line-height: 1.1;
  color: #e6cfa4;
  font-variant-numeric: tabular-nums;
}

.s2-ph-vip[data-vip-estado="finalizado"] .s2-ph-vipclock {
  color: rgba(245, 241, 232, 0.5);
  font-style: normal;
  font-size: 0.9rem;
  letter-spacing: 0.1em;
}

/* ── Tablet / móvil: main → perforación horizontal → aside ──────────────── */
@media (width <= 1023px) {
  .s2-ph-card {
    grid-template-columns: 1fr;
    max-width: 640px;
  }

  .s2-ph-perf {
    border-left: 0;
    border-top: 1px dashed rgba(200, 164, 104, 0.4);
    margin: 0 14px;
  }

  .s2-ph-notch {
    top: -8px;
  }

  .s2-ph-notch--a { left: -22px; }
  .s2-ph-notch--b { left: auto; right: -22px; bottom: auto; }
}

@media (width <= 767px) {
  .s2-posthero {
    --ritmo-t: 6px;
    --ritmo-b: clamp(44px, 9vw, 56px);
  }

  .s2-ph-main {
    padding: 20px 18px;
  }

  .s2-ph-logo {
    max-width: 220px;
  }

  .sales-main .s2-ph-copy {
    font-size: 0.95rem;
    line-height: 1.6;
  }

  .s2-ph-aside {
    padding: 18px 18px 20px;
    gap: 12px;
  }

  .s2-ph-cell strong {
    font-size: 1.7rem;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   MICRO-FIX · HERO TRUST (dirección, 24-08-2026)
   Los tres trust signals dejan de leerse como pasos numerados: sin números,
   icono como pequeño sello editorial (hairline champagne) y texto Manrope
   legible. Una sola unidad, más simple que la ficha post-hero.
   ══════════════════════════════════════════════════════════════════════════ */

.s2-card-list {
  gap: 10px;
  margin-top: 16px;
}

.s2-card-list li {
  gap: 12px;
  font-size: 0.84rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.3;
  color: rgba(245, 241, 232, 0.82);
}

/* El separador vertical heredado (.programa-trust li + li::before, 0,2,1)
   era del layout horizontal antiguo: en filas no pinta nada. */
.s2-card-list li::before,
.s2-card-list li + li::before {
  content: none;
}

.s2-card-ico {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(200, 164, 104, 0.35);
  background: rgba(200, 164, 104, 0.05);
}

.s2-card-ico svg {
  width: 14px;
  height: 14px;
  color: rgba(232, 205, 158, 0.85);
}

@media (width <= 767px) {
  .s2-card-ico {
    width: 26px;
    height: 26px;
  }

  .s2-card-list {
    gap: 8px;
    margin-top: 14px;
  }

  .s2-card-list li {
    font-size: 0.82rem;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   S25 STRUCTURAL V2 · OPEN BANNER + VIP DESDE YA (dirección, 24-08-2026)
   Banner de apertura (countdown-hero → Fashion Lab): estado con pulse
   carmín SOLO en abierto + reloj editorial DD:HH:MM:SS. Y estados
   «finalizado» de las vistas VIP con su etiqueta.
   ══════════════════════════════════════════════════════════════════════════ */

.s2-open-banner {
  --ritmo-t: clamp(6px, 1vw, 14px);
  --ritmo-b: clamp(40px, 4.4vw, 64px);
  text-align: center;
}

/* La declaración: gran escala, Manrope 800, carmín con halo. */
.sales-main .s2-ob-status {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: clamp(12px, 1.6vw, 20px);
  margin: 0;
  color: #e8536d;
  font-size: clamp(2rem, 3.2vw, 3.4rem);
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1.08;
  text-transform: uppercase;
  text-wrap: balance;
}

.s2-ob-dot {
  flex: 0 0 auto;
  width: clamp(10px, 1vw, 14px);
  height: clamp(10px, 1vw, 14px);
  border-radius: 50%;
  background: var(--carmine, #d01d3f);
}

.s2-ob-dot--apagado {
  background: rgba(245, 241, 232, 0.35);
}

/* Pulse premium: respiración de opacidad + glow carmín exterior. Nada de
   parpadeo; máximo scale 1.015. Solo mientras el carrito está abierto. */
@keyframes s2-ob-respira {
  0%, 100% {
    opacity: 0.68;
    text-shadow:
      0 0 8px rgba(208, 29, 63, 0.18),
      0 0 20px rgba(208, 29, 63, 0.1);
    scale: 1;
  }
  50% {
    opacity: 1;
    text-shadow:
      0 0 10px rgba(232, 83, 109, 0.55),
      0 0 26px rgba(208, 29, 63, 0.45),
      0 0 60px rgba(208, 29, 63, 0.28);
    scale: 1.02;
  }
}

@keyframes s2-ob-dot-respira {
  0%, 100% { box-shadow: 0 0 0 0 rgba(208, 29, 63, 0.45); }
  50% { box-shadow: 0 0 0 7px rgba(208, 29, 63, 0); }
}

[data-cart-estado="abierto"] .s2-ob-status--abierto {
  animation: s2-ob-respira 2.2s ease-in-out infinite;
}

[data-cart-estado="abierto"] .s2-ob-status--abierto .s2-ob-dot {
  animation: s2-ob-dot-respira 2.2s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  [data-cart-estado="abierto"] .s2-ob-status--abierto,
  [data-cart-estado="abierto"] .s2-ob-status--abierto .s2-ob-dot {
    animation: none;
  }

  [data-cart-estado="abierto"] .s2-ob-status--abierto {
    text-shadow: 0 0 12px rgba(232, 83, 109, 0.4), 0 0 30px rgba(208, 29, 63, 0.25);
  }
}

/* Halo ambiental wine detrás de la declaración (sutil, no discoteca). */
.s2-open-banner .shell {
  position: relative;
}

.s2-open-banner .shell::before {
  content: "";
  position: absolute;
  inset: -30% 15%;
  background: radial-gradient(50% 60% at 50% 50%, rgba(96, 20, 40, 0.3), transparent 72%);
  pointer-events: none;
}

.sales-main .s2-ob-status { position: relative; }

/* Estado cerrado: estático, sin glow, sin carmín vivo. */
.sales-main .s2-ob-status--cerrado {
  display: none;
  color: rgba(232, 205, 158, 0.7);
  text-shadow: none;
}

[data-cart-estado="cerrado"] .s2-ob-status--abierto { display: none !important; }
[data-cart-estado="cerrado"] .s2-ob-status--cerrado { display: inline-flex !important; }

/* Reloj editorial: numerales Bodoni grandes, unidades Manrope pequeñas. */
.sales-main .s2-ob-grid {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: clamp(8px, 1.6vw, 20px);
  margin: 0;
  max-width: none;
}

.s2-ob-cell {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.s2-ob-cell strong {
  font-family: var(--font-editorial), Georgia, serif;
  font-weight: 500;
  font-size: clamp(2.5rem, 6.4vw, 4.6rem);
  line-height: 1;
  color: var(--ivory);
  font-variant-numeric: tabular-nums;
}

.s2-ob-cell em {
  font-style: normal;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(200, 164, 104, 0.85);
}

.s2-ob-sep {
  font-family: var(--font-editorial), Georgia, serif;
  font-size: clamp(1.5rem, 3.4vw, 2.4rem);
  line-height: 1;
  color: rgba(200, 164, 104, 0.5);
  translate: 0 -0.4em;
}

[data-cart-estado="cerrado"] .s2-ob-cell strong {
  color: rgba(245, 241, 232, 0.5);
}

/* ── Etiqueta «Bonus finalizado» de las vistas VIP ──────────────────────── */
.s2-vip-fin {
  display: none;
  color: rgba(245, 241, 232, 0.55);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

[data-vip-estado="finalizado"] .s2-vip-fin {
  display: block;
}

[data-vip-estado="finalizado"] .s2-vip-reloj,
.s2-ph-vip[data-vip-estado="finalizado"] .s2-ph-vipclock {
  color: rgba(245, 241, 232, 0.45);
}

/* El formato del reloj de la ficha crece a DD:HH:MM:SS: contener escala. */
.sales-main .s2-ph-vipclock {
  font-size: clamp(0.98rem, 1.25vw, 1.18rem);
  font-style: normal;
  letter-spacing: 0.02em;
}

.sales-main .s2-vip-reloj {
  font-size: clamp(1.5rem, 2vw, 2rem);
}

@media (width <= 767px) {
  .sales-main .s2-ob-status {
    /* El ancho del contenedor fuerza el corte; balance lo reparte en
       «HEMOS ABIERTO / LAS PUERTAS» (nunca 3 líneas). */
    font-size: clamp(1.62rem, 7.8vw, 2rem);
    letter-spacing: 0.04em;
    text-align: left;
  }

  .sales-main .s2-vip-reloj {
    font-size: 1.35rem;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   SOPORTE POR WHATSAPP · base reutilizable (dirección, 24-08-2026)
   Enlace externo de concierge, jamás un CTA de aplicación: verde WhatsApp
   sobre superficie Fashion Lab, sin pulse ni animación infinita. La base
   `.programa-whatsapp-cta` define el lenguaje (verde, icono, radio, focus,
   hover) y cada contexto ajusta escala con su modifier — hoy `--posthero`;
   el acceso de la topbar reutilizará esta misma base con su propio modifier.
   ══════════════════════════════════════════════════════════════════════════ */

.programa-whatsapp-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 6px;
  background: linear-gradient(180deg, #29de6e, #1fb757);
  color: #06210f;
  font-weight: 700;                 /* Manrope se hereda, como en .primary-cta */
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: translate 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.programa-whatsapp-cta:hover {
  translate: 0 -1px;
  filter: brightness(1.04);
  box-shadow: 0 6px 18px rgba(37, 211, 102, 0.22);
}

.programa-whatsapp-cta:focus-visible {
  outline: 2px solid #7bf0a8;
  outline-offset: 3px;
}

.programa-whatsapp-ico {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}

.programa-whatsapp-ico svg {
  display: block;
  width: 100%;
  height: 100%;
}

.programa-whatsapp-flecha {
  flex: 0 0 auto;
  font-weight: 400;
  opacity: 0.72;
}

@media (prefers-reduced-motion: reduce) {
  .programa-whatsapp-cta {
    transition: none;
  }

  .programa-whatsapp-cta:hover {
    translate: none;
  }
}

/* ── Contexto ficha post-hero: soporte bajo el bonus, jerarquía secundaria
      frente al CTA carmín (menor altura, menor tipografía, sin sombra). ── */
.s2-ph-aside .programa-whatsapp-cta--posthero {
  width: 100%;
  min-height: 44px;
  margin-top: clamp(12px, 1.6vw, 18px);
  padding: 11px 14px;
  font-size: 0.7rem;
  line-height: 1.2;
  text-align: center;
}

.programa-whatsapp-cta--posthero .programa-whatsapp-ico {
  width: 17px;
  height: 17px;
}

.programa-whatsapp-cta--posthero .programa-whatsapp-flecha {
  font-size: 0.85rem;
}

/* Pausa entre el bonus VIP y el soporte: hairline propio, sin copy nuevo. */
.s2-ph-aside .programa-whatsapp-cta--posthero::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 1px;
  background: rgba(200, 164, 104, 0.22);
  translate: 0 calc(-1 * clamp(12px, 1.6vw, 18px) / 2);
}

.s2-ph-aside .programa-whatsapp-cta--posthero {
  position: relative;
}

@media (width <= 767px) {
  .s2-ph-aside .programa-whatsapp-cta--posthero {
    min-height: 46px;
    font-size: 0.68rem;
    letter-spacing: 0.05em;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   TOPBAR · SOPORTE POR WHATSAPP (dirección, 24-08-2026)
   La barra pasa de «marca | deadline | CTA» a «marca | reloj | soporte |
   CTA»: el texto del deadline sale, el reloj se queda. El soporte reutiliza
   .programa-whatsapp-cta con su modifier compacto. En móvil, dos filas
   estáticas (sin ticker): núcleo arriba, soporte abajo.
   ══════════════════════════════════════════════════════════════════════════ */

/* Escritorio ≥1100: cuatro piezas en una sola fila. Las posiciones son
   EXPLÍCITAS porque el botón traía `grid-column: 3` heredado y el
   auto-placement lo empujaba a una segunda fila. */
@media (width >= 1100px) {
  .sales-page .announcement-inner {
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    column-gap: clamp(14px, 2vw, 26px);
  }

  .sales-page .announcement-inner > .programa-announcement-brand {
    grid-area: 1 / 1;
  }

  .sales-page .announcement-inner > .programa-announcement-deadline {
    grid-area: 1 / 2;
    justify-content: flex-start;
  }

  .sales-page .announcement-inner > .programa-announcement-support {
    grid-area: 1 / 3;
  }

  .sales-page .announcement-inner > button {
    grid-area: 1 / 4;
  }
}

.programa-announcement-support {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(8px, 1.2vw, 14px);
  min-width: 0;
  margin: 0;
  line-height: 1;
}

.paa-duda {
  color: rgba(245, 241, 232, 0.82);
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ── Contexto topbar: la versión más compacta del sistema verde ─────────── */
.programa-whatsapp-cta--topbar {
  min-height: 28px;
  padding: 6px 11px;
  border-radius: 5px;
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.programa-whatsapp-cta--topbar .programa-whatsapp-ico {
  width: 13px;
  height: 13px;
}

.programa-whatsapp-cta--topbar .programa-whatsapp-flecha {
  font-size: 0.72rem;
}

.programa-whatsapp-cta--topbar:hover {
  box-shadow: 0 3px 10px rgba(37, 211, 102, 0.24);
}

/* ── Tablet: el soporte baja a una segunda fila antes de que apriete ────── */
@media (width <= 1099px) {
  .sales-page .announcement-inner {
    grid-template-columns: auto minmax(0, 1fr) auto;
    row-gap: 8px;
  }

  .sales-page .programa-announcement-support {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-content: center;
  }
}

/* ── Móvil: dos filas estáticas (núcleo / soporte), sin ticker ──────────── */
@media (width <= 767px) {
  .sales-page .announcement-inner {
    grid-template-columns: auto minmax(0, 1fr) auto;
    row-gap: 7px;
    padding-block: 7px;
  }

  .sales-page .programa-announcement-deadline {
    justify-content: flex-end;
  }

  .sales-page .programa-announcement-support {
    gap: 10px;
  }

  .paa-duda {
    font-size: 0.56rem;
    letter-spacing: 0.08em;
  }

  .programa-whatsapp-cta--topbar {
    min-height: 30px;
    padding: 6px 12px;
    font-size: 0.58rem;
  }
}

@media (width <= 400px) {
  .paa-duda {
    font-size: 0.53rem;
  }

  .programa-whatsapp-cta--topbar {
    font-size: 0.55rem;
    padding: 6px 10px;
  }
}

/* TOPBAR MÓVIL · MARCA COMPLETA (24-08-2026) — RETIRADO el 25-08-2026.
   Aquel bloque componía «Fashion Lab» y «Método ADN» como unidad vertical
   sobre `.programa-announcement-brand` / `.paa-marca` / `.paa-sep`, nodos que
   ya no existen en el markup (0 ocurrencias). Lo único vivo que quedaba eran
   dos `font-size` propios para `.paa-metodo` que rompían la paridad con la
   marca exigida por dirección. Se retira entero en vez de encadenar otro
   override: la firma la fija ahora `--paa-firma` en el bloque A. */

/* Con la marca completa en dos líneas, el label decorativo «Cierra en» del
   reloj (un ::before que se añadió cuando el texto largo se ocultaba en
   móvil) ya no cabe y recortaba los dígitos. Se retira SOLO en la franja
   estrecha: el icono de calendario y las unidades (12d 00h 28m) siguen
   diciendo qué es. El nodo del reloj y su runtime no se tocan. */
@media (width <= 600px) {
  .sales-page .programa-announcement-clock::before {
    content: none;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   POLISH FINAL (dirección, 24-08-2026)
   1) Topbar: rail desplazable por debajo de 1200px con el CTA SIEMPRE fuera
      y visible. 2) Pulse magnético del CTA de topbar, dentro del arbitraje
      existente. 3) WhatsApp legible: blanco sobre verde con contraste AA.
      4) Pieza de soporte del post-hero.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1 · TOPBAR ─────────────────────────────────────────────────────────── */
/* rail | reloj | CTA — el dato y la acción quedan SIEMPRE fijos y visibles;
   solo la marca y el soporte viajan en el carril. */
.sales-page .announcement-inner {
  grid-template-columns: minmax(0, 1fr) auto auto;
  column-gap: clamp(10px, 1.4vw, 20px);
  row-gap: 0;
}

.paa-rail {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 26px);
  min-width: 0;
}

.sales-page .announcement-inner > button {
  grid-area: auto;                   /* el CTA vive fuera del rail */
}

/* ≥1200: fila estática, sin scroll ni máscara. */
@media (width >= 1200px) {
  .paa-rail {
    overflow: visible;
    justify-content: flex-start;
  }
}

/* <1200: carril desplazable. Scroll MANUAL (no auto): la barra contiene
   objetivos accionables y un movimiento continuo obligaría a perseguirlos
   — WCAG 2.2.2. La continuidad se comunica con máscara lateral. */
@media (width <= 1199px) {
  .paa-rail {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    /* Fade SOLO a la derecha: a la izquierda recortaba la primera letra de
       la marca en reposo. La continuidad que hay que comunicar va hacia
       delante, no hacia atrás. */
    mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 22px), transparent 100%);
    padding-block: 2px;
  }

  .paa-rail::-webkit-scrollbar {
    display: none;
  }

  .paa-rail > * {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }
}

/* En el rail la marca se mantiene en DOS líneas: en una sola ocupa ~190px y
   empujaba el reloj dentro de la máscara lateral, dejándolo cortado en
   reposo. Apilada mide ~116px y el countdown entra entero sin desplazar. */
@media (width <= 900px) {
  .sales-page .paa-rail .programa-announcement-brand {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }

  .sales-page .programa-announcement-support {
    justify-content: flex-start;
  }
}

/* ── 2 · PULSE MAGNÉTICO DEL CTA DE TOPBAR — RETIRADO el 26-08-2026 ──────
   Aquí vivió la keyframe propia `programa-topbar-magnet` (glow carmín + `scale`
   1.025 en 2,2s), una animación PROPIA que no existía en ninguna otra
   superficie. Dirección pide paridad literal con el CTA de la landing de
   captación, así que se retira entera —keyframes, regla y su bloque de
   reduced-motion— en vez de encadenar otro override sobre ella: dejarla
   declarada y sobrescrita habría dejado keyframes muertos en la hoja.
   El pulse vigente se recrea al final del fichero, aislado bajo
   `.programa-topbar-cta`. El arbitraje por `:has()` no se toca. */

/* ── 3 · WHATSAPP LEGIBLE ───────────────────────────────────────────────
   Blanco sobre verde: los tonos claros (#25D366 → 1,98) no llegan a AA con
   texto blanco, así que el verde baja a #07843f/#056b34 — mismo hue de
   WhatsApp, contraste 4,79:1 y 6,0:1. Sigue siendo reconocible junto al
   icono; no es verde botella. */
.programa-whatsapp-cta {
  background: linear-gradient(180deg, #07843f, #056b34);
  color: #ffffff;
  font-weight: 800;
  border-color: rgba(255, 255, 255, 0.22);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.28);
}

.programa-whatsapp-cta:hover {
  box-shadow: 0 6px 18px rgba(7, 132, 63, 0.34);
}

.programa-whatsapp-cta:focus-visible {
  outline-color: #5ce89a;
}

.programa-whatsapp-ico svg,
.programa-whatsapp-flecha {
  color: #ffffff;
}

.programa-whatsapp-flecha {
  opacity: 0.9;
}

/* Tamaños legibles: nada por debajo de 10,5px. */
.programa-whatsapp-cta--topbar {
  font-size: 0.66rem;
  letter-spacing: 0.07em;
}

.programa-whatsapp-cta--topbar .programa-whatsapp-ico {
  width: 14px;
  height: 14px;
}

/* El posthero pasa a grid para que la flecha nunca escape del botón. */
.s2-ph-aside .programa-whatsapp-cta--posthero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(8px, 2vw, 12px);
  padding: 12px clamp(12px, 3vw, 16px);
  font-size: clamp(0.7rem, 2.6vw, 0.78rem);
  line-height: 1.25;
  text-align: left;
  white-space: normal;
}

.programa-whatsapp-cta--posthero .programa-whatsapp-ico {
  width: 18px;
  height: 18px;
}

/* ── 4 · PIEZA DE SOPORTE DEL POST-HERO ─────────────────────────────────
   La pregunta humana y el acceso forman una unidad: marco noir translúcido
   con hairline, geometría editorial (radio bajo), sin glassmorphism. */
.s2-ph-soporte {
  margin-top: clamp(14px, 1.8vw, 20px);
  padding: clamp(14px, 2vw, 18px) clamp(13px, 2vw, 16px);
  border: 1px solid rgba(232, 205, 158, 0.14);
  border-radius: 6px;
  background:
    radial-gradient(90% 140% at 50% 0%, rgba(96, 20, 40, 0.16), transparent 74%),
    rgba(5, 8, 10, 0.58);
  box-shadow: inset 0 1px 0 rgba(245, 241, 232, 0.05);
}

.sales-main .s2-ph-soporte-duda {
  margin: 0 0 10px;
  font-family: var(--font-editorial), Georgia, serif;
  font-style: italic;
  font-size: clamp(0.92rem, 2.9vw, 1.02rem);
  line-height: 1.35;
  color: rgba(245, 241, 232, 0.86);
  text-align: center;
}

/* El hairline propio del botón ya no hace falta dentro del marco. */
.s2-ph-soporte .programa-whatsapp-cta--posthero {
  margin-top: 0;
}

.s2-ph-soporte .programa-whatsapp-cta--posthero::before {
  content: none;
}

/* ══════════════════════════════════════════════════════════════════════════
   CRO VISUAL POLISH FINAL (dirección, 24-08-2026)
   A) Topbar: marca fija + track de 4 slots con auto-avance CSS.
   B) Estado de puertas centrado en móvil.  C) Autoridad: fotos con
   auto-scroll también en móvil.  D) Infostrip en ivory, centrado.
   E) Ritmo de fondos: 09 pasa a hoja editorial clara (único light break).
   ══════════════════════════════════════════════════════════════════════════ */

/* ── A · TOPBAR · orden fijo [countdown] · [Fashion Lab] │ track ────────── */
/* Dirección, 25-08-2026. Dos anclas fijas y en este orden; detrás, un track
   de TRES slots (Método ADN primero). El countdown y la marca quedan fuera
   del rail: no rotan ni pasan bajo la máscara. */
.sales-page .announcement-inner {
  --paa-firma: 0.63rem;                /* firma compartida marca + método */
  --paa-tracking: 0.13em;              /* … y su tracking, por el mismo motivo */
  grid-template-columns: auto auto auto auto minmax(0, 1fr);
  column-gap: clamp(8px, 1.1vw, 14px);
  align-items: center;
}

/* 1 · Countdown del carrito — primera posición, siempre fija. */
.sales-page .paa-reloj {
  flex: 0 0 auto;
  justify-content: flex-start;
  gap: 7px;
}

/* 2 · Fashion Lab y 3 · Método ADN comparten FIRMA: misma familia (Manrope
   heredada), mismo tamaño vía `--paa-firma` y misma caja. La jerarquía la
   da el peso y la opacidad del marfil, nunca el tamaño. */
.sales-main .paa-fijo,
.paa-fijo,
.sales-page .paa-metodo {
  margin: 0;
  font-size: var(--paa-firma);
  line-height: 1.1;
  letter-spacing: var(--paa-tracking);
  text-transform: uppercase;
  white-space: nowrap;
}

/* Marfil pleno en los dos: a este tamaño una opacidad por debajo de 1 baja
   del umbral AA sobre el carmín (.96 daba 4,46 y .84 daba 3,69). La jerarquía
   la lleva el peso — 900 frente a 700 — no una pérdida de contraste. */
.sales-main .paa-fijo,
.paa-fijo {
  color: #f5f1e8;
  font-weight: 900;
}

.sales-page .paa-metodo {
  color: #f5f1e8;
  font-weight: 700;
}

/* Las reglas móviles de la etapa anterior pesan (0,3,0) y fijaban tamaño y
   tracking propios para el método: romperían la paridad exigida con la
   marca. Se neutralizan al mismo peso, devolviéndolo a la firma común. */
/* También neutraliza el `display: none` de la regla tablet legacy
   (`@media (width <= 900px)`, línea ~2425): el método debe verse en móvil. */
.sales-page .programa-announcement .paa-metodo {
  display: block;
  color: #f5f1e8;
  font-size: var(--paa-firma);
  font-weight: 700;
  letter-spacing: var(--paa-tracking);
}

.paa-rail {
  display: block;
}

.paa-divisor {
  width: 1px;
  height: 14px;
  background: rgba(245, 241, 232, 0.26);
}

.paa-rail {
  overflow: hidden;
  min-width: 0;
}

.paa-track {
  display: flex;
  align-items: center;
  min-width: 0;
}

.paa-slot {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

/* ≥1200px · todo cabe en una línea: track estático, sin movimiento.
   Orden resultante: countdown → Fashion Lab → Método → soporte → CTA. */
@media (width >= 1200px) {
  .paa-track {
    gap: clamp(14px, 2vw, 26px);
    animation: none;
  }

  .paa-slot {
    flex: 0 0 auto;
  }

  .paa-slot--cta {
    margin-left: auto;
  }
}

/* <1200px · auto-avance editorial sobre TRES slots: cada uno ocupa el ancho
   visible, se queda ~4,4s quieto y transita en ~600ms. Sin marquee continuo:
   el CTA y el WhatsApp son accionables y deben poder pulsarse sin
   perseguirlos. */
@media (width <= 1199px) {
  .paa-slot {
    flex: 0 0 100%;
    justify-content: flex-start;
  }

  .paa-track {
    width: 100%;
    animation: paa-rotacion 15s cubic-bezier(0.65, 0, 0.35, 1) infinite;
    will-change: transform;
  }

  /* Pausa mientras se interactúa: el tap enfoca el botón/enlace del slot. */
  .paa-rail:hover .paa-track,
  .paa-rail:focus-within .paa-track,
  .paa-rail:active .paa-track {
    animation-play-state: paused;
  }
}

/* 3 slots × 5s: 4,4s quieto + 600ms de transición (4% de 15s). */
@keyframes paa-rotacion {
  0%, 29.33%    { transform: translate3d(0, 0, 0); }
  33.33%, 62.66% { transform: translate3d(-100%, 0, 0); }
  66.66%, 96%   { transform: translate3d(-200%, 0, 0); }
  100%          { transform: translate3d(0, 0, 0); }
}

/* La firma se reduce en bloque para que marca y método NUNCA se desparejen
   y el rail conserve ancho útil en pantallas estrechas. */
@media (width <= 1039px) {
  .sales-page .announcement-inner { --paa-firma: 0.58rem; }
}

@media (width <= 767px) {
  .sales-page .announcement-inner {
    /* 9,44px: tamaño real de lectura en móvil. Los 8,8/8px anteriores eran
       legibles en captura pero quedaban en el suelo en un teléfono real. Con
       el tracking algo más cerrado la marca no ocupa más ancho del que había. */
    --paa-firma: 0.59rem;
    --paa-tracking: 0.09em;
    grid-template-columns: auto auto auto auto minmax(0, 1fr);
    column-gap: 8px;
    row-gap: 0;
  }

  /* El icono de calendario es decorativo: en móvil cede su sitio al rail. */
  .sales-page .paa-reloj svg { display: none; }

  .sales-page .paa-reloj .programa-announcement-clock {
    min-height: 24px;
    padding: 0 7px;
    font-size: 0.6rem;
    letter-spacing: 0.03em;
  }

  .sales-page .paa-reloj { justify-content: flex-start; }

  /* Presupuesto real del rail en móvil: con el reloj y la marca fijos quedan
     ~180-235px. El slot de soporte pedía ~318px y el botón de WhatsApp se
     recortaba bajo la máscara (ya ocurría antes de fijar el reloj). La
     pregunta es un preámbulo: el propio botón dice «Resolver mis dudas», así
     que en móvil cede su sitio al botón, que es lo accionable. El literal NO
     se toca: sigue en el DOM y se lee a partir de 768px. */
  .sales-page .programa-announcement .paa-duda {
    display: none;
  }

  .sales-page .programa-announcement-support {
    gap: 0;
  }
}

@media (width <= 430px) {
  .sales-page .announcement-inner {
    /* La firma NO baja aquí: solo se cierra un punto más el tracking para
       recuperar el ancho que pide el rail. */
    --paa-tracking: 0.07em;
    column-gap: 6px;
  }

  .sales-page .paa-reloj .programa-announcement-clock {
    padding: 0 6px;
    font-size: 0.56rem;
  }

  .paa-divisor { height: 12px; }

  /* La flecha es decorativa (aria-hidden): en la franja más estrecha cede
     su ancho al texto del botón, que es lo que se lee. */
  .programa-whatsapp-cta--topbar .programa-whatsapp-flecha {
    display: none;
  }
}

/* Sin movimiento: el carril se vuelve desplazable a mano y se ve todo. */
@media (prefers-reduced-motion: reduce) {
  .paa-track {
    animation: none !important;
    transform: none !important;
    gap: 18px;
  }

  .paa-slot {
    flex: 0 0 auto;
  }

  .paa-rail {
    overflow-x: auto;
    scrollbar-width: none;
  }

  .paa-rail::-webkit-scrollbar {
    display: none;
  }
}

/* ── B · ESTADO DE PUERTAS CENTRADO EN MÓVIL ────────────────────────────── */
@media (width <= 767px) {
  .s2-open-banner .shell {
    display: grid;
    justify-items: center;
  }

  .sales-main .s2-ob-status {
    /* El dot es un flex-item más: para centrar el TEXTO ópticamente se
       compensa su ancho + gap con un padding espejo a la derecha. */
    max-width: 15ch;
    padding-right: calc(clamp(10px, 1vw, 14px) + clamp(12px, 1.6vw, 20px));
    text-align: center;
    text-wrap: balance;
  }
}

/* ── C · AUTORIDAD · fotos con auto-scroll también en móvil ─────────────── */
@media (width <= 1039px) {
  .programa-aut-marquee--fotos .programa-aut-track {
    width: max-content;
    animation: programa-aut-scroll 60s linear infinite;
    will-change: transform;
  }

  /* Los clones vuelven: son los que cierran el bucle sin costura.
     `display: flex` explícito, NUNCA `revert`: `revert` devuelve el valor del
     user-agent (`block` para un div), no el `display: flex` de autor que
     `.programa-aut-archivo` fija en la línea ~2108. Con `block` el clon se
     apila en vertical (346px de ancho frente a 3638px del original), el
     `translate3d(-50%)` deja de caer en su inicio y el bucle salta; además
     la tira crece a ~4.095px de alto y abre un vacío negro en la sección.
     El resto de la geometría (flex, gap, min-width, padding) ya la hereda
     del grupo original, así que clon y original quedan idénticos. */
  .programa-aut-marquee--fotos [data-clon] {
    display: flex;
  }

  /* Se conserva el arrastre manual; al tocar, el movimiento se detiene. */
  .programa-aut-marquee--fotos .programa-aut-viewport:active .programa-aut-track,
  .programa-aut-marquee--fotos .programa-aut-viewport:focus-within .programa-aut-track {
    animation-play-state: paused;
  }
}

/* ── D · INFOSTRIP · término en ivory, centrado y equilibrado ───────────── */
.s2-decoder-item {
  text-align: center;
}

.sales-main .s2-decoder-label {
  color: var(--gold-quiet);
}

.sales-main .s2-decoder-term {
  color: var(--ivory);
  font-style: normal;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

/* Las tres celdas comparten rejilla REAL: con subgrid, label / término /
   descripción caen a la misma altura aunque «24 mentorías en directo» ocupe
   dos líneas. Sin subgrid cada celda calculaba su propio 1fr y las
   descripciones se desalineaban 24px. */
.s2-decoder-grid {
  align-items: stretch;
}

@supports (grid-template-rows: subgrid) {
  .s2-decoder-grid {
    grid-template-rows: auto auto auto;
  }

  .s2-decoder-item {
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
    row-gap: 0;
  }
}

.sales-main .s2-decoder-term {
  display: flex;
  align-items: center;
  justify-content: center;
}

.sales-main .s2-decoder-desc {
  margin-inline: auto;
  max-width: 30ch;
  color: rgba(245, 241, 232, 0.72);
}

.s2-decoder-item:not(:first-child)::before {
  top: 4px;
  bottom: 4px;
}

@media (width <= 767px) {
  .s2-decoder-grid {
    gap: 0;
  }

  .sales-main .s2-decoder-term {
    font-size: 1.72rem;
  }

  .sales-main .s2-decoder-desc {
    max-width: 34ch;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   REFINAMIENTO FINAL (dirección, 25-08-2026)
   F · Hero → ficha Fashion Lab como UNA sola composición.
   G · Proof Strip V2 en lugar de la banda de datos.
   Los fondos de 08/09 vuelven a su estado anterior retirando el bloque E:
   no hay reglas nuevas para ellos aquí.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── F · HERO + FICHA — REVERTIDO el 25-08-2026 ─────────────────────────── */
/* La integración visual Hero→ficha (degradado continuo en `.s2-posthero`,
   tarjeta sin relleno ni borde perimetral, padding-top a 0 y aire recortado)
   se retira por decisión de dirección tras verla en Preview: la ficha vuelve
   a ser un BLOQUE INDEPENDIENTE sobre su plano noir, con su ticket completo.
   El rollback es puramente sustractivo — este bloque solo AÑADÍA reglas, así
   que al borrarlo la cascada recupera por sí sola el estado aprobado:
     `.s2-posthero`  → --ritmo-t/-b propios + padding de `.sales-main section`
     `.s2-ph-card`   → borde champagne .38 a cuatro lados + rgba(15,11,13,.9)
                       con sus dos radiales wine (línea ~7743)
     `.s2-ph-main`   → padding simétrico (línea ~7757)
     `.sales-hero`   → padding-bottom desde --ritmo-b (línea ~3286)
   No se toca nada más del ciclo: el Proof Strip (G), la topbar (A) y los
   fondos restaurados de 08/09 siguen exactamente igual. */

/* ── G · PROOF STRIP V2 ─────────────────────────────────────────────────── */
/* Dossier editorial, no tres cards. Mismos tokens del sistema: noir/tension
   de fondo, marfil para el dato, gold-quiet para el rótulo, wine para la
   energía. Ningún color, fuente ni script nuevos. */
.sales-infostrip.fl-proof {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(58% 130% at 50% 0%, rgba(96, 20, 40, 0.2), transparent 72%),
    linear-gradient(180deg, #0b0809 0%, #0e0b0c 100%);
  border-block: 1px solid rgba(200, 164, 104, 0.18);
}

.fl-proof-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-inline: auto;
  padding-block: 0;
  list-style: none;
}

.fl-proof-item {
  position: relative;
  display: grid;
  align-content: start;
  justify-items: center;
  gap: 0;
  padding: clamp(30px, 3.2vw, 46px) clamp(16px, 1.8vw, 28px);
  text-align: center;
}

/* Las descripciones comparten línea base aunque «24 mentorías en directo»
   ocupe dos líneas: cada celda hereda las filas del grid. */
@supports (grid-template-rows: subgrid) {
  .fl-proof-grid {
    grid-template-rows: auto auto auto auto;
  }

  .fl-proof-item {
    grid-row: span 4;
    grid-template-rows: subgrid;
  }
}

/* Separadores verticales: hairline champagne, no bordes de card. */
.fl-proof-item + .fl-proof-item::before {
  content: "";
  position: absolute;
  inset-block: clamp(18px, 2vw, 30px);
  inset-inline-start: 0;
  width: 1px;
  background: linear-gradient(
    180deg,
    transparent,
    rgba(200, 164, 104, 0.26) 22%,
    rgba(200, 164, 104, 0.26) 78%,
    transparent
  );
}

/* Remate superior de cada dato. */
.fl-proof-rule {
  display: block;
  width: clamp(26px, 3vw, 40px);
  height: 1px;
  margin-bottom: clamp(14px, 1.7vw, 22px);
  background: rgba(200, 164, 104, 0.5);
}

.sales-main .fl-proof-eyebrow {
  margin: 0 0 clamp(12px, 1.5vw, 18px);
  color: var(--gold-quiet);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.sales-main .fl-proof-valor {
  margin: 0;
  color: var(--ivory);
  font-family: var(--font-editorial);
  font-size: clamp(1.9rem, 3.1vw, 3rem);
  font-style: normal;
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.sales-main .fl-proof-desc {
  margin: clamp(14px, 1.7vw, 22px) 0 0;
  max-width: 26ch;
  color: rgba(245, 241, 232, 0.62);
  font-size: 0.9rem;
  line-height: 1.5;
  text-wrap: balance;
}

/* Columna central: foco visual — nunca acción. */
.fl-proof-item--foco .fl-proof-rule {
  width: clamp(34px, 4vw, 54px);
  background: rgba(232, 205, 158, 0.78);
}

.sales-main .fl-proof-item--foco .fl-proof-valor {
  font-size: clamp(2.05rem, 3.5vw, 3.35rem);
}

.fl-proof-item--foco::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(58% 70% at 50% 30%, rgba(96, 20, 40, 0.26), transparent 72%);
  pointer-events: none;
  z-index: -1;
}

/* Hover de cortesía en puntero fino: elevación mínima, sin mover la caja. */
@media (hover: hover) and (pointer: fine) {
  .fl-proof-item {
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .fl-proof-item:hover {
    transform: translateY(-3px);
  }

  .fl-proof-item:hover .fl-proof-rule {
    background: rgba(232, 205, 158, 0.85);
  }
}

@media (prefers-reduced-motion: reduce) {
  .fl-proof-item {
    transition: none;
  }

  .fl-proof-item:hover {
    transform: none;
  }
}

/* ── Móvil: tres bloques apilados, no tres columnas comprimidas ─────────── */
@media (width <= 767px) {
  .fl-proof-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
  }

  .fl-proof-item {
    grid-row: auto;
    grid-template-rows: none;
    padding: clamp(26px, 6.5vw, 34px) clamp(14px, 4vw, 22px);
  }

  /* En vertical el separador pasa a ser horizontal. */
  .fl-proof-item + .fl-proof-item::before {
    inset-block: auto;
    inset-block-start: 0;
    inset-inline: clamp(28px, 12vw, 64px);
    width: auto;
    height: 1px;
    background: linear-gradient(
      90deg,
      transparent,
      rgba(200, 164, 104, 0.26) 22%,
      rgba(200, 164, 104, 0.26) 78%,
      transparent
    );
  }

  .sales-main .fl-proof-valor {
    font-size: clamp(1.85rem, 8.4vw, 2.4rem);
  }

  .sales-main .fl-proof-item--foco .fl-proof-valor {
    font-size: clamp(1.95rem, 9vw, 2.55rem);
  }

  .sales-main .fl-proof-desc {
    max-width: 30ch;
    font-size: 0.86rem;
  }

  .sales-main .fl-proof-eyebrow {
    font-size: 0.6rem;
    letter-spacing: 0.26em;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   HERO EDITORIAL FASHION LAB (dirección, 25-08-2026)
   El hero pasa de bloque centrado a COMPOSICIÓN EDITORIAL a dos columnas:
   copy a la izquierda sobre plano noir, atelier (A01) a la derecha sangrando
   hasta el borde del viewport y FUNDIDO sobre el fondo — nunca un rectángulo
   fotográfico pegado al lado del texto.

   Qué NO toca este bloque: el copy, el markup del CTA real, la ficha de
   decisión por dentro (`.s2-card-main` / `-perf` / `-aside` / `-list` / `-ico`
   conservan clases y contenido), el diálogo, el formulario, el tracking y
   `programa.ts`. El CTA se restiliza EXCLUSIVAMENTE por `--cta-rest-shadow`
   —la variable que animan las keyframes `cta-double-pulse`— para no crear una
   segunda animación ni romper el arbitraje del pulse (`dceafee`).
   ══════════════════════════════════════════════════════════════════════════ */

.sales-hero.fl-hero {
  /* La foto sangra fuera del shell: sin `clip` habría scroll horizontal. */
  overflow: clip;
  padding-top: clamp(26px, 3.2vw, 54px);
  background:
    radial-gradient(66% 60% at 74% 34%, rgba(96, 20, 40, 0.28), transparent 72%),
    linear-gradient(180deg, #0d0a0b 0%, #0b0809 58%, #0b0809 100%);
  text-align: left;
}

.fl-hero .s2-hero-shell {
  display: block;
}

/* ── Escenario: rejilla 56/44. La foto se posiciona en absoluto DENTRO de él,
   así la ficha de decisión queda fuera y puede cabalgar sobre la imagen. ── */
.fl-hero-stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 56fr) minmax(0, 44fr);
  align-items: center;
  min-height: clamp(500px, 43vw, 660px);
}

.fl-hero-copy {
  position: relative;
  z-index: 3;
  grid-column: 1;
  align-self: center;
  /* 820, no 700: a 1920 la columna quedaba en 700px y, restado el inset, la
     caja del titular medía 642px para un texto de 643 — fallaba por UN pixel
     y «No te falta talento.» se partía. */
  max-width: 820px;
  padding-block: clamp(28px, 3.6vw, 58px);
  /* El shell deja solo 32px de aire lateral. A 74px de titular eso aprieta
     contra el borde, y además dejaba el copy y la banda de decisión con dos
     márgenes izquierdos distintos (32 vs 170). Este inset los alinea. */
  padding-left: clamp(0px, 3.2vw, 58px);
}

/* El eyebrow y la anáfora venían centrados con `margin: … auto`: aquí anclan
   a la izquierda. Mismo chip, mismo punto carmín, mismo texto. */
.fl-hero .s2-hero .eyebrow.s2-origin,
.fl-hero .eyebrow.s2-origin {
  margin-inline: 0;
}

.fl-hero .s2-hero h1,
.fl-hero h1 {
  /* 18ch, no 15: a 1920 la caja de 15ch (607px) cortaba antes que la columna
     (716px) y «No te falta talento.» volvía a partirse. Quien manda sobre el
     ancho del titular debe ser la columna, no un tope heredado. */
  max-width: 18ch;
  margin-inline: 0;
  font-size: clamp(2.6rem, 5.15vw, 5.05rem);
  line-height: 0.99;
  letter-spacing: -0.032em;
}

.fl-hero h1 em {
  color: #e8d3a8;
  font-style: italic;
  font-weight: 500;
}

.fl-hero .s2-anafora {
  max-width: 44ch;
  margin-inline: 0;
}

/* ── A01 · capa fotográfica ─────────────────────────────────────────────── */
/* Sangrado a la derecha hasta el borde real del viewport, sea cual sea el
   ancho del shell: `right:50%` lleva el borde al centro del shell (que está
   centrado = centro del viewport) y `margin-right:-50vw` lo empuja media
   pantalla más. Lo que se pase, lo recorta el `overflow: clip` de la sección. */
.fl-hero-media {
  position: absolute;
  z-index: 1;
  top: clamp(-92px, -5.5vw, -36px);
  bottom: clamp(-44px, -2.4vw, -14px);
  left: 33%;
  right: 50%;
  margin-right: -50vw;
  overflow: hidden;
  /* CLAVE del fundido: se enmascara la FOTO, no se pinta un negro plano
     encima. Pintar `#0b0809` sobre esta zona dibujaba un rectángulo visible,
     porque el fondo de la sección lleva aquí un radial vino y los dos negros
     no coinciden. Con máscara, la foto se desvanece y lo que aparece es el
     fondo real de la sección — sin costura posible. */
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0, 0, 0, 0.05) 9%,
    rgba(0, 0, 0, 0.3) 22%,
    rgba(0, 0, 0, 0.8) 40%,
    #000 54%
  );
  mask-image: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0, 0, 0, 0.05) 9%,
    rgba(0, 0, 0, 0.3) 22%,
    rgba(0, 0, 0, 0.8) 40%,
    #000 54%
  );
}

.fl-hero-media picture,
.fl-hero-media img {
  display: block;
  width: 100%;
  height: 100%;
}

.fl-hero-image {
  object-fit: cover;
  /* Encuadre: mantiene a la vista maniquí + rostro + manos sobre el patrón. */
  /* ENCUADRE (26-08-2026, foto nueva): los rostros del grupo viven entre el
     10% y el 35% de la altura del master, no en el centro como en la foto
     anterior. La ventana sube para que ningún recorte los toque. */
  object-position: 62% 30%;
  filter: saturate(0.88) contrast(1.04) brightness(0.86);
  /* Segundo eje del fundido, compuesto sobre la máscara horizontal del padre:
     así la foto también muere por arriba y por abajo sin pintar nada. */
  -webkit-mask-image: linear-gradient(
    180deg,
    transparent 0%,
    rgba(0, 0, 0, 0.45) 6%,
    #000 14%,
    #000 60%,
    rgba(0, 0, 0, 0.42) 87%,
    transparent 100%
  );
  mask-image: linear-gradient(
    180deg,
    transparent 0%,
    rgba(0, 0, 0, 0.45) 6%,
    #000 14%,
    #000 60%,
    rgba(0, 0, 0, 0.42) 87%,
    transparent 100%
  );
}

/* Atmósfera, no tapadera: un velo vino MUY leve que integra la foto con el
   radial de la sección. Va en rgba y se enmascara con el padre. */
.fl-hero-fade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(90% 78% at 88% 42%, rgba(96, 20, 40, 0.16), transparent 68%),
    linear-gradient(90deg, rgba(11, 8, 9, 0.5) 0%, transparent 38%);
}

/* ── Trazado de patronaje · decorativo ──────────────────────────────────── */
.fl-hero-pattern {
  position: absolute;
  z-index: 2;
  left: 25%;
  bottom: 7%;
  width: min(34vw, 450px);
  fill: none;
  stroke: rgba(200, 164, 104, 0.13);
  stroke-width: 1;
  opacity: 0.55;
  pointer-events: none;
}

.fl-hero-pattern circle {
  fill: rgba(200, 164, 104, 0.17);
  stroke: none;
}

/* ── Banda de decisión · documento premium, no card SaaS ────────────────── */
/* Conserva su rejilla (main | perforación punteada | aside) y sus notches:
   ya eran la «división vertical + nodos» que pide el diseño. */
.fl-hero .s2-card {
  position: relative;
  z-index: 4;
  /* Mismo inset que `.fl-hero-copy`, no un max-width: así copy y banda comparten
     margen izquierdo EXACTO en cualquier ancho. Con max-width se alineaban a
     1440 pero se cruzaban a 1280, donde la banda tocaba el borde del shell. */
  max-width: none;
  margin-inline: clamp(0px, 3.2vw, 58px);
  margin-top: clamp(-34px, -2.2vw, -14px);
  border-color: rgba(200, 164, 104, 0.5);
  background:
    radial-gradient(78% 140% at 86% 0%, rgba(105, 21, 38, 0.2), transparent 58%),
    rgba(10, 8, 9, 0.95);
  box-shadow: 0 30px 66px rgba(0, 0, 0, 0.34);
}

.fl-hero .s2-card-notch {
  background: #0b0809;
}

/* CTA: presencia carmín contenida. Solo color, borde y reposo del glow —la
   animación y su arbitraje se quedan exactamente donde estaban. */
.fl-hero .s2-card-cta .primary-cta {
  /* Glow CONTENIDO: halo corto y un filo interior claro, nada de neón. El
     reposo baja respecto al global (52px/34px de difusión) para que el pulse
     siga leyéndose sin convertir el botón en un cartel de casino. */
  --cta-rest-shadow:
    0 14px 30px -16px rgba(208, 29, 63, 0.5),
    0 0 18px -12px rgba(255, 50, 87, 0.38),
    inset 0 0 0 1px rgba(245, 241, 232, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  min-height: 62px;
  border-color: rgba(255, 132, 152, 0.44);
  background: linear-gradient(180deg, #d52046 0%, #b41335 100%);
  letter-spacing: 0.06em;
}

/* ── ≤1199px · el copy respira menos, la foto se acerca ─────────────────── */
@media (width <= 1199px) {
  .fl-hero-stage {
    grid-template-columns: minmax(0, 58fr) minmax(0, 42fr);
    min-height: clamp(470px, 52vw, 600px);
  }

  .fl-hero .s2-hero h1,
  .fl-hero h1 {
    font-size: clamp(2.5rem, 5.6vw, 4.4rem);
  }

  /* La columna de copy se estrecha aquí y el chip del eyebrow casi la llena:
     el fundido se alarga para que la foto no compita con él. */
  .fl-hero-media {
    left: 30%;
    -webkit-mask-image: linear-gradient(
      90deg,
      transparent 0%,
      rgba(0, 0, 0, 0.04) 12%,
      rgba(0, 0, 0, 0.24) 30%,
      rgba(0, 0, 0, 0.72) 52%,
      #000 70%
    );
    mask-image: linear-gradient(
      90deg,
      transparent 0%,
      rgba(0, 0, 0, 0.04) 12%,
      rgba(0, 0, 0, 0.24) 30%,
      rgba(0, 0, 0, 0.72) 52%,
      #000 70%
    );
  }

  .fl-hero-pattern {
    left: 22%;
    width: 40vw;
  }
}

/* ── ≤899px · composición VERTICAL: copy → foto → banda ─────────────────── */
@media (width <= 899px) {
  .sales-hero.fl-hero {
    padding-top: clamp(18px, 3vw, 34px);
  }

  .fl-hero-stage {
    display: flex;
    flex-direction: column;
    min-height: 0;
    /* Sin esto hereda el `align-items: center` de la rejilla de escritorio y,
       en columna, eso encoge cada hijo al ancho de su contenido y lo centra:
       el copy dejaba de ocupar la caja completa y el titular se medía a sí
       mismo en vez de al shell. */
    align-items: stretch;
  }

  .fl-hero-copy {
    max-width: none;
    padding-left: 0;
    /* Su `align-self: center` es de la rejilla de escritorio; en flex-column
       encoge la columna al ancho del texto y la centra. En vertical tiene que
       ocupar la caja entera, o el titular se mide contra sí mismo. */
    align-self: stretch;
    padding-block: clamp(20px, 3vw, 30px) clamp(24px, 3.4vw, 34px);
  }

  /* Al pasar a vertical el titular recupera el ancho completo, así que sube
     de escala. Sin esta curva propia seguía con la de dos columnas (5,6vw) y
     aparecía un salto absurdo en 768↔767: 43px arriba y 57px abajo, es decir,
     el titular CRECÍA al estrechar la pantalla. */
  .fl-hero h1 {
    font-size: clamp(2.9rem, 6.4vw, 3.9rem);
  }

  .fl-hero .s2-anafora {
    max-width: none;
  }

  /* La foto deja de ser capa de fondo y pasa a ser un plano a sangre. El
     `calc(50% - 50vw)` la lleva al ancho del viewport sin depender del gutter
     concreto del shell, que cambia entre 64px y 44px según el breakpoint. */
  .fl-hero-media {
    position: relative;
    inset: auto;
    width: auto;
    height: min(62vw, 480px);
    margin-inline: calc(50% - 50vw);
  }

  /* A sangre completa: el fundido lateral desaparece (no hay copy al lado que
     proteger) y el vertical se refuerza para coser la foto con la sección. */
  .fl-hero-media {
    -webkit-mask-image: none;
    mask-image: none;
  }

  .fl-hero-image {
    /* 768px es el recorte vertical más agresivo (≈36% de la altura). Con la
       ventana al 22% el corte superior cae al 8% y las cabezas quedan enteras. */
    object-position: 64% 22%;
    -webkit-mask-image: linear-gradient(
      180deg,
      transparent 0%,
      rgba(0, 0, 0, 0.55) 9%,
      #000 24%,
      #000 68%,
      rgba(0, 0, 0, 0.4) 92%,
      transparent 100%
    );
    mask-image: linear-gradient(
      180deg,
      transparent 0%,
      rgba(0, 0, 0, 0.55) 9%,
      #000 24%,
      #000 68%,
      rgba(0, 0, 0, 0.4) 92%,
      transparent 100%
    );
  }

  .fl-hero-fade {
    background:
      radial-gradient(86% 70% at 62% 46%, rgba(96, 20, 40, 0.14), transparent 70%),
      linear-gradient(90deg, rgba(11, 8, 9, 0.32) 0%, transparent 30%, rgba(11, 8, 9, 0.26) 100%);
  }

  .fl-hero-pattern {
    left: -4%;
    bottom: 16%;
    width: 54vw;
  }

  .fl-hero .s2-card {
    margin-inline: 0;
    margin-top: clamp(-26px, -3vw, -12px);
  }
}

/* ── ≤767px · tipografía y aire de teléfono ─────────────────────────────── */
@media (width <= 767px) {
  .sales-hero.fl-hero {
    padding-top: 16px;
  }

  .fl-hero .s2-hero .eyebrow.s2-origin,
  .fl-hero .eyebrow.s2-origin {
    letter-spacing: 0.2em;
  }

  .fl-hero .s2-hero h1,
  .fl-hero h1 {
    max-width: none;
    /* 10.8vw, no 11.4: a 11.4 la primera línea medía 346px en una caja de
       331px y «No te falta talento.» se partía en dos. El titular tiene sus
       cortes marcados con <br> — son TRES líneas, no cuatro. Medido en los
       cuatro anchos críticos (430/390/375/360): a 10.8 encajaba al pixel exacto,
       10.6 deja 12-20px de holgura de texto en los cuatro. */
    font-size: clamp(2.3rem, 10.5vw, 3.05rem);
    line-height: 1.01;
  }

  .fl-hero .s2-anafora {
    margin-top: 16px;
  }

  .fl-hero-media {
    /* Proporción de origen (1586×992 ≈ 3:2): el recorte lateral es mínimo, así
       que maniquí + rostro + manos siguen enteros… y ocupa menos alto que un
       4:3, que es lo que aleja el CTA del pliegue. */
    aspect-ratio: 3 / 2;
    height: auto;
    margin-top: 2px;
  }

  .fl-hero-image {
    object-position: 58% 28%;
  }

  .fl-hero-pattern {
    display: none;
  }
}

/* ── ≤430px · últimos ajustes de teléfono estrecho ──────────────────────── */
@media (width <= 430px) {
  .sales-hero.fl-hero {
    padding-top: 10px;
  }

  .fl-hero-copy {
    padding-block: 16px 20px;
  }

  .fl-hero-image {
    object-position: 57% 28%;
  }

  .fl-hero .s2-card-cta .primary-cta {
    min-height: 58px;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   HERO MÓVIL · RECOMPOSICIÓN CRO (dirección, 25-08-2026)
   Con el orden editorial (titular → statement → A01 → banda) el CTA real caía
   a 936px en 375×667: ~270px bajo el pliegue. Dirección lo marca como bloqueo
   y autoriza recomponer SOLO la franja móvil.

   Orden nuevo en ≤767px:
       preheader + titular + statement
       CTA REAL + microtrust        ← sube al primer viewport
       A01                          ← sigue siendo el golpe visual, ahora tras la acción
       Método ADN de Marca

   CÓMO, sin duplicar el CTA ni tocar el runtime: `.fl-hero-stage` y `.s2-card`
   pasan a `display: contents`, de modo que sus hijos (copy, foto, aside con el
   CTA, main con el método) se convierten en hermanos dentro del shell y se
   reordenan con `order`. Es CSS puro: ni una línea de JS, ni un segundo
   `<ProgramaCta>`, ni un solo atributo de markup movido.

   Nota sobre `data-reveal`: vive en `.s2-card`, y el efecto es `opacity:0` +
   `translate` (landing-production-source.css:4656). Un elemento con
   `display: contents` no genera caja, así que ninguna de las dos propiedades
   se le aplica y sus hijos se pintan siempre. En móvil eso es lo correcto:
   el CTA no debe depender de un observer para verse.

   ≥768px NO se toca: la composición aprobada de escritorio/tablet sigue
   exactamente igual.
   ══════════════════════════════════════════════════════════════════════════ */

@media (width <= 767px) {
  .fl-hero .s2-hero-shell {
    display: flex;
    flex-direction: column;
    /* Obligatorio, no cosmético: la regla móvil de Structural V2 (línea ~6188)
       fija `align-items: center` en este mismo shell. Era inocua mientras era
       `display: block`; al pasarlo a flex se activó y el bloque de acción
       dejaba de estirarse — se quedaba en ~295px centrados frente a los 723px
       del titular a 767. Redeclarar display y flex-direction no la anula. */
    align-items: stretch;
  }

  /* Los dos contenedores se disuelven: sus hijos suben al shell y ahí se
     ordenan. `.fl-hero-stage` es un envoltorio de rejilla sin estilo propio;
     `.s2-card` cede su marco a los dos bloques en que se parte, más abajo. */
  .fl-hero-stage,
  .fl-hero .s2-card {
    display: contents;
  }

  .fl-hero-copy {
    order: 1;
    padding-bottom: 22px;
  }

  .fl-hero .s2-card-aside {
    order: 2;
  }

  .fl-hero-media {
    order: 3;
  }

  .fl-hero .s2-card-main {
    order: 4;
  }

  /* La perforación era la divisoria VERTICAL entre las dos mitades de la
     banda. Partida en dos bloques que ya no se tocan, no divide nada. */
  .fl-hero .s2-card-perf {
    display: none;
  }

  /* Bloque de ACCIÓN: hereda el lenguaje de la banda —borde champagne, plano
     noir, respiración vino— para que siga leyéndose como documento editorial
     y no como una card suelta. */
  .fl-hero .s2-card-aside {
    padding: clamp(20px, 5vw, 26px) clamp(18px, 4.6vw, 24px) clamp(22px, 5.4vw, 28px);
    border: 1px solid rgba(200, 164, 104, 0.5);
    background:
      radial-gradient(84% 130% at 86% 0%, rgba(105, 21, 38, 0.2), transparent 58%),
      rgba(10, 8, 9, 0.95);
    box-shadow: 0 24px 52px rgba(0, 0, 0, 0.34);
  }

  /* A01 conserva su sangrado completo y su proporción: cambia de sitio, no de
     peso. Ahora abre el segundo golpe de vista, justo detrás de la acción. */
  .fl-hero-media {
    margin-top: clamp(26px, 6.5vw, 34px);
  }

  /* El método cierra el hero con el mismo marco, un punto más discreto que el
     bloque de acción: primero se decide, después se explica. */
  .fl-hero .s2-card-main {
    margin-top: clamp(24px, 6vw, 32px);
    padding: clamp(22px, 5.4vw, 28px) clamp(18px, 4.6vw, 24px);
    border: 1px solid rgba(200, 164, 104, 0.32);
    background:
      radial-gradient(70% 120% at 12% 0%, rgba(96, 20, 40, 0.14), transparent 70%),
      rgba(12, 9, 10, 0.9);
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   ZONA SUPERIOR UNIFICADA (dirección, 25-08-2026)
   Hero + banda de decisión + ficha Fashion Lab dejan de ser tres piezas
   apiladas y pasan a leerse como UNA composición editorial.

   Qué rompía la unidad, medido sobre el render anterior:
     · un hueco negro muerto de ~230px entre la banda y la ficha;
     · tres márgenes izquierdos distintos (copy 79 · banda 79 · ficha 180);
     · la mitad inferior de la columna izquierda de la ficha, vacía;
     · un countdown pequeño que no sostenía la escala del titular.

   Se corrigen los cuatro. El contenido funcional de la ficha no se toca: los
   mismos nodos, los mismos `data-*`, el mismo CTA real y los mismos relojes
   que pinta `programa.ts`. Solo cambian composición y superficie.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── A · CONTINUIDAD DE PLANO ───────────────────────────────────────────── */
/* Hero y ficha comparten ahora un único degradado continuo: el hero muere en
   el mismo negro con el que arranca la ficha, así que la costura desaparece.
   La ficha añade su propia respiración vino hacia el pie, que es la que
   entrega el ojo al banner de apertura. */
.sales-main .s2-posthero {
  --ritmo-t: clamp(34px, 4vw, 62px);
  --ritmo-b: clamp(60px, 6.4vw, 104px);
  background:
    radial-gradient(58% 40% at 50% 104%, rgba(101, 11, 31, 0.34), transparent 74%),
    linear-gradient(180deg, #0b0809 0%, #0a0708 58%, #100a0c 100%);
}

.sales-hero.fl-hero {
  padding-bottom: clamp(30px, 3.4vw, 56px);
}

/* ── B · MISMA CAJA QUE EL HERO ─────────────────────────────────────────── */
/* La ficha adopta el inset exacto del copy y de la banda: un solo margen
   izquierdo desde el titular hasta el pie de la ficha. */
/* El relleno final y el marco NO se tocan: son contrato vivo —«la tarjeta
   conserva su relleno noir (nunca transparente)» y «marco champagne a cuatro
   lados»— con sus valores fijados en programa.test.mjs. Se enriquecen las
   capas superiores (los radiales vino) y se deja intacta la última, que es la
   que el test comprueba. */
.s2-posthero .s2-ph-card {
  max-width: none;
  margin-inline: clamp(0px, 3.2vw, 58px);
  background:
    radial-gradient(78% 66% at 16% 14%, rgba(74, 22, 26, 0.22), transparent 64%),
    radial-gradient(60% 80% at 100% 6%, rgba(102, 14, 34, 0.18), transparent 62%),
    rgba(15, 11, 13, 0.9);
  box-shadow: 0 38px 86px rgba(0, 0, 0, 0.34);
  overflow: hidden;
}

/* ── C · A02 AL PIE DE LA COLUMNA IZQUIERDA ─────────────────────────────── */
.s2-ph-main {
  position: relative;
  min-height: clamp(430px, 40vw, 560px);
  overflow: hidden;
}

/* El texto va por encima de la fotografía; la fotografía, al fondo. */
.s2-ph-main > :not(.s2-ph-materiales) {
  position: relative;
  z-index: 2;
}

.s2-ph-materiales {
  position: absolute;
  z-index: 1;
  inset: auto 0 0 0;
  height: 52%;
  overflow: hidden;
}

.s2-ph-materiales picture,
.s2-ph-materiales img {
  display: block;
  width: 100%;
  height: 100%;
}

.s2-ph-materiales-img {
  object-fit: cover;
  object-position: 46% 68%;
  filter: saturate(0.76) brightness(0.62) contrast(1.06);
  /* Se enmascara, no se tapa con un negro plano: igual que en el hero, así el
     fondo real de la ficha —con sus radiales vino— es lo que aflora. */
  -webkit-mask-image: linear-gradient(
    180deg,
    transparent 0%,
    rgba(0, 0, 0, 0.34) 22%,
    rgba(0, 0, 0, 0.86) 58%,
    #000 100%
  );
  mask-image: linear-gradient(
    180deg,
    transparent 0%,
    rgba(0, 0, 0, 0.34) 22%,
    rgba(0, 0, 0, 0.86) 58%,
    #000 100%
  );
}

/* ── D · COUNTDOWN A ESCALA EDITORIAL ───────────────────────────────────── */
/* La unidad (d/h/m/s) baja del renglón del dígito a una línea propia debajo:
   el número gana presencia y la lectura se ordena. Los literales NO cambian
   —siguen siendo las mismas letras y siguen `aria-hidden`— y `programa.ts`
   sigue escribiendo exactamente en los mismos `strong`. */
.s2-ph-clock {
  align-items: flex-start;
  gap: clamp(6px, 0.9vw, 12px);
}

.s2-ph-cell {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
}

.s2-ph-cell strong {
  font-size: clamp(2.4rem, 3vw, 3.35rem);
  letter-spacing: 0.02em;
}

.s2-ph-cell em {
  font-size: 0.54rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(245, 241, 232, 0.56);
}

.s2-ph-sep {
  align-self: flex-start;
  margin-top: clamp(10px, 1.2vw, 18px);
  font-size: clamp(1.5rem, 1.9vw, 2rem);
  color: rgba(200, 164, 104, 0.45);
}

/* ── E · VIP EN CLAVE EDITORIAL ─────────────────────────────────────────── */
.s2-ph-vipclock {
  color: #e8d3a8;
  font-family: var(--font-editorial), Georgia, serif;
  font-size: clamp(1.3rem, 1.55vw, 1.72rem);
  font-weight: 500;
  letter-spacing: 0.05em;
  font-variant-numeric: tabular-nums;
}

/* ── F · RITMO INTERNO DE LA COLUMNA DERECHA ────────────────────────────── */
.s2-ph-aside {
  padding: clamp(30px, 3.4vw, 52px) clamp(26px, 3.2vw, 46px);
}

.sales-main .s2-ph-eyebrow,
.s2-ph-lbl {
  letter-spacing: 0.26em;
}

/* El logo sube de escala: es la firma de la pieza. */
.s2-ph-logo img {
  width: min(74%, 320px);
}

/* ── G · MÓVIL ──────────────────────────────────────────────────────────── */
/* No se toca la recomposición CRO del hero. Aquí solo se adapta la ficha: la
   fotografía pasa a una banda inferior de alto fijo y el countdown encoge sin
   perder la jerarquía de dígito sobre unidad. */
/* En vertical el copy del hero pierde su inset (`padding-left: 0`, bloque
   ≤899). La ficha tiene que perderlo a la vez o los bordes izquierdos se
   descuadran: a 768 quedaban en 21 el titular y 46 la ficha. */
@media (width <= 899px) {
  .s2-posthero .s2-ph-card {
    margin-inline: 0;
  }
}

@media (width <= 767px) {
  .s2-ph-main {
    min-height: 0;
    padding-bottom: clamp(150px, 42vw, 210px);
  }

  .s2-ph-materiales {
    height: clamp(140px, 40vw, 200px);
  }

  .s2-ph-cell strong {
    font-size: clamp(1.9rem, 9vw, 2.5rem);
  }

  .s2-ph-cell em {
    font-size: 0.5rem;
  }

  .s2-ph-sep {
    margin-top: 6px;
    font-size: 1.2rem;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   FIDELIDAD A LA REFERENCIA · 3 CAMBIOS ESTRUCTURALES (dirección, 25-08-2026)
   Auditoría comparando el render actual contra la referencia del ZIP, medida
   contra medida a 1440. Tres brechas explicaban casi toda la distancia:

     1 · RITMO VERTICAL. La zona superior medía 1703px frente a 1879 de la
         referencia, y el hero 937 frente a 1053. Estábamos a la mitad de su
         respiración vertical: es de donde sale casi todo su aire de lujo.
     2 · SANGRADO DE A01. Su fotografía termina en 1567 —127px MÁS ALLÁ del
         borde del viewport—; la nuestra moría exacta en 1440. Al no sangrar,
         la escena se veía un 10% más pequeña y más lejana.
     3 · PROPORCIÓN LATERAL. Su contenido arranca en 123 y el titular mide
         78px; el nuestro arrancaba en 78 con 74px. Menos margen y menos
         escala = menos página editorial y más landing.

   Todo se acota a ≥768px: la recomposición CRO móvil y el contrato
   CTA_BOTTOM_375 ≤ 650 quedan intactos por construcción.
   ══════════════════════════════════════════════════════════════════════════ */

@media (width >= 768px) {
  /* ── 1 · RITMO VERTICAL ─────────────────────────────────────────────── */
  .sales-hero.fl-hero {
    padding-top: clamp(44px, 5vw, 84px);
    padding-bottom: clamp(64px, 7vw, 112px);
  }

  .fl-hero-stage {
    min-height: clamp(548px, 46vw, 706px);
  }

  .sales-main .s2-posthero {
    --ritmo-t: clamp(74px, 8vw, 130px);
  }

  /* ── 2 · SANGRADO DE A01 ────────────────────────────────────────────── */
  /* La foto vuelve a cruzar el borde derecho. Al ensancharse su caja, el
     `object-fit: cover` escala la escena: maniquí, rostro y manos ganan el
     tamaño que tienen en la referencia. Lo que sobra lo recorta el
     `overflow: clip` de la sección, así que no hay scroll horizontal. */
  .fl-hero-media {
    margin-right: calc(-50vw - clamp(48px, 8.2vw, 130px));
  }

  /* ── 3 · PROPORCIÓN LATERAL ─────────────────────────────────────────── */
  /* Margen izquierdo de revista: el contenido deja de pegarse al borde. Se
     mueven a la vez copy, banda y ficha para que el eje siga siendo único. */
  .fl-hero-copy {
    padding-left: clamp(26px, 6.4vw, 92px);
  }

  .fl-hero .s2-card,
  .s2-posthero .s2-ph-card {
    margin-inline: clamp(26px, 6.4vw, 92px);
  }

  /* El titular recupera la escala de la referencia (78px a 1440). Cabe: la
     caja del titular queda en 678px y el texto mide 625. */
  .fl-hero h1 {
    font-size: clamp(2.9rem, 5.45vw, 5.3rem);
  }

  /* El CTA dejaba de ser un botón para ser una franja roja: ocupaba el 95%
     de su columna. Más respiración lateral lo devuelve a proporción de
     documento, como en la referencia. */
  .fl-hero .s2-card-aside {
    padding: clamp(30px, 3.4vw, 46px) clamp(30px, 3.6vw, 54px);
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   OPEN DOORS · DOS TONOS (dirección, 25-08-2026)
   «HEMOS ABIERTO» mantiene su carmín (#e8536d, sin tocar) y «LAS PUERTAS»
   pasa al marfil del sistema. Es lo ÚNICO que cambia: ni tamaño, ni familia,
   ni peso, ni tracking, ni interlineado, ni caja, ni fondo.

   El pulse no se toca y no puede romperse: `s2-ob-respira` vive en el `<p>` y
   anima `opacity`, `scale` y `text-shadow`. Las dos primeras afectan al
   elemento entero, y `text-shadow` es heredable, así que el marfil respira y
   recibe el mismo glow que el carmín. Ningún fragmento pulsa por su cuenta.

   `.s2-ob-texto` es solo el envoltorio que preserva la geometría del flex; no
   declara nada, para no alterar el reparto de líneas existente.
   ══════════════════════════════════════════════════════════════════════════ */

.sales-main .s2-ob-status--abierto .s2-ob-claro {
  color: var(--ivory, #f5f1e8);
}

/* ══════════════════════════════════════════════════════════════════════════
   P1-a · PROPORCIÓN DE LA FICHA (dirección, 25-08-2026)
   La columna de acción medía 453px frente a 527 de la referencia. Medido, el
   reparto interno NO era la causa: nuestro ratio era 1,547 frente a su 1,501 y
   la columna derecha ocupaba el 38,0% de la ficha frente a su 39,9%. El
   déficit venía del ANCHO TOTAL: 1192px frente a 1320, porque la ficha iba
   insetada 92px por lado para clavar su borde con el titular.

   Dirección autoriza romper esa igualdad DENTRO de la ficha. La ficha pasa al
   ancho que tiene en la referencia y el reparto se afina de 1,55 a 1,50, que
   es su ratio exacto. Nada más: ni el hero, ni la banda, ni el ritmo, ni el
   móvil —todo va dentro de `@media (width >= 768px)`—, ni A02, que sigue
   ocupando la columna izquierda entera.

   CONSECUENCIA QUE HAY QUE MIRAR: al ensancharse, el borde izquierdo de la
   ficha deja de coincidir con el de la banda. En la referencia coinciden
   porque ALLÍ la banda también va al ancho del shell; igualarlo aquí exigiría
   tocar el inset de la banda, que es margen editorial del hero y está
   congelado. Queda reportado, no resuelto.
   ══════════════════════════════════════════════════════════════════════════ */

/* ≥1024 y no ≥768: la ficha APILA en `≤1023px` (línea ~7969). Abrir esto a 768
   pisaba ese apilado y dejaba una columna de acción de 263px con el CTA
   estrangulado, además de comerse el sangrado de ≤899. El reparto a dos
   columnas solo existe de 1024 hacia arriba: ahí y solo ahí se toca. */
@media (width >= 1024px) {
  .s2-posthero .s2-ph-card {
    /* 1320px a 1440 — el ancho exacto de la referencia. */
    margin-inline: clamp(0px, 2vw, 28px);
    /* 1,50 : 1 en vez de 1,55 : 1 — su ratio medido. */
    grid-template-columns: minmax(0, 1.5fr) 36px minmax(0, 1fr);
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   ALINEACIÓN BANDA ↔ FICHA (dirección, 25-08-2026)
   Medido en el DOM de la referencia, su arquitectura tiene DOS niveles, no uno:

       copy del hero    123 → insetado
       banda            60 → 1380   ┐ mismo shell exterior,
       ficha            60 → 1380   ┘ idénticas al píxel

   Nuestra banda se había quedado en el nivel del copy (124) mientras la ficha
   ya estaba en el exterior (60). Sube la banda al mismo shell que la ficha:
   una sola propiedad, misma frontera ≥1024 que usa la ficha, para que ambas
   entren y salgan del reparto a la vez. El copy del hero NO se toca y sigue
   insetado, que es justo lo que hace la referencia.
   ══════════════════════════════════════════════════════════════════════════ */

@media (width >= 1024px) {
  .fl-hero .s2-card {
    margin-inline: clamp(0px, 2vw, 28px);
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   DIAGNÓSTICO + VIP · LENGUAJE EDITORIAL (dirección, 25-08-2026)
   Dos zonas, mismo sistema que la parte superior ya aprobada. Todo el scope es
   local: `.editorial-diagnostic*` y `.s2-vip*`. Cero JS, cero dependencias,
   cero raster nuevo. El copy no cambia: lo que cambia es su PESO.
   ══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────── A · DIAGNÓSTICO ─────────────────────────── */

.sales-why.editorial-diagnostic {
  position: relative;
  isolation: isolate;
  overflow: clip;
}

/* Patronaje técnico: dos guías verticales, dos curvas de trazado y sus nodos.
   Opacidad al límite de lo perceptible — es atmósfera, no decoración. */
.editorial-pattern--diagnostic {
  position: absolute;
  z-index: 0;
  top: clamp(40px, 6vw, 96px);
  left: 50%;
  width: min(84vw, 1180px);
  height: auto;
  transform: translateX(-50%);
  stroke: rgba(200, 164, 104, 0.11);
  stroke-width: 1;
  pointer-events: none;
}

.editorial-pattern--diagnostic circle {
  fill: rgba(200, 164, 104, 0.14);
  stroke: none;
}

.editorial-diagnostic > .shell,
.editorial-diagnostic .s2-pivote {
  position: relative;
  z-index: 1;
}

/* ── Jerarquía CRO ──────────────────────────────────────────────────────── */

/* «pesa.» era el mismo cuerpo que la fricción que lo precede (18,7px los dos):
   la palabra que carga toda la tensión no se distinguía. Sube a Bodoni mayor
   y a marfil pleno; la fricción baja a un tono de apoyo. Así el ojo, en scroll
   rápido, aterriza en la columna de «pesa.» cuatro veces seguidas. */
.editorial-diagnostic .s2-pesa li {
  color: rgba(245, 241, 232, 0.74);
}

.editorial-diagnostic .s2-pesa li em {
  font-size: 1.36em;
  font-weight: 500;
  color: #f0dfb8;
}

/* «No porque no valgas.» es el giro emocional de la sección y estaba en 11,5px
   de rótulo. Pasa a voz editorial: sigue siendo el kicker, pero se oye. */
.editorial-diagnostic .s2-verdict-kicker {
  font-family: var(--font-editorial), Georgia, serif;
  font-size: clamp(1.25rem, 1.9vw, 1.75rem);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.01em;
  text-transform: none;
  color: #e6cfa4;
}

/* El diagnóstico real. El `<strong>` existía pero pesaba lo mismo que su
   entorno (33,6px w600 frente a 33,6px w500): imperceptible. Ahora el resto
   de la tesis cede contraste y la causa se queda con el marfil pleno. */
.editorial-diagnostic .s2-verdict-statement {
  color: rgba(245, 241, 232, 0.7);
}

.editorial-diagnostic .s2-verdict-statement strong {
  font-size: 1.1em;
  font-weight: 600;
  color: var(--ivory, #f5f1e8);
}

/* El pivote hacia la solución gana aire por arriba: es el cambio de registro
   entre el problema y el método, no un párrafo más. */
.editorial-diagnostic .s2-pivote {
  margin-top: clamp(6px, 1.4vw, 22px);
}

@media (width <= 767px) {
  .editorial-pattern--diagnostic {
    width: 128vw;
    opacity: 0.72;
  }

  .editorial-diagnostic .s2-pesa li em {
    font-size: 1.28em;
  }
}

/* ────────────────────────────── B · VIP ───────────────────────────────── */

/* Las dos cards se leen como pareja: misma caja, mismo aire, alturas que se
   corresponden. Sus personalidades siguen separadas —acceso frente a
   urgencia— por el color del marco y del rótulo, no por la estructura. */
.s2-vip-dual .s2-vipcard {
  align-content: start;
  gap: clamp(14px, 1.6vw, 20px);
  padding: clamp(28px, 3.2vw, 44px) clamp(24px, 3vw, 40px);
}

/* ── B1 · SELLO ─────────────────────────────────────────────────────────── */
/* Medallón y rótulo en una sola línea: el sello acredita y el rótulo nombra.
   Antes el medallón flotaba solo sobre la card y el tag caía debajo, que es
   exactamente lo que lo hacía parecer una pegatina. */
.s2-vip-sello {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.2vw, 30px);
  margin-bottom: clamp(4px, 0.8vw, 10px);
}

.s2-vip-dual .s2-vip-medallon {
  flex: 0 0 auto;
  width: clamp(126px, 14.5vw, 208px);
  margin-bottom: 0;
  /* Halo contenido: asienta el sello en el plano en vez de dejarlo recortado
     encima. Es luz, no glow de producto. */
  filter: drop-shadow(0 14px 30px rgba(0, 0, 0, 0.55))
    drop-shadow(0 0 26px rgba(200, 164, 104, 0.12));
}

.s2-vip-dual .s2-vipcard--acceso .s2-dcard-tag {
  align-self: center;
}

/* ── B2 · JERARQUÍA DE LA CARD DE ACCESO ────────────────────────────────── */
.s2-vip-dual .s2-vip-title {
  font-size: clamp(1.6rem, 2.3vw, 2.2rem);
  line-height: 1.1;
}

.s2-vip-dual .s2-vip-lista li {
  color: rgba(245, 241, 232, 0.62);
}

/* Nivel 2: el sustantivo que vale, no la preposición que lo acompaña. */
.s2-vip-dual .s2-vip-lista li em {
  font-style: normal;
  font-size: 1.16em;
  font-weight: 600;
  color: var(--ivory, #f5f1e8);
}

.s2-vip-dual .s2-vip-nota {
  margin-top: auto;
  padding-top: clamp(10px, 1.4vw, 16px);
}

/* ── B3 · CARD DE URGENCIA · el reloj deja de ser un icono lateral ──────── */
/* Antes: columna derecha de 130px a 1440 y de 72px a 375, con el contenido
   estrangulado a 205px de 331. Ahora tiene columna propia y escala suficiente
   para leerse, y en móvil deja de robar ancho al copy. */
.s2-vip-dual .s2-vipcard--urgente {
  grid-template-columns: minmax(0, 1fr) clamp(150px, 15vw, 214px);
  column-gap: clamp(20px, 2.4vw, 36px);
  align-items: center;
  /* `.s2-vipcard` fija `align-content: start`: con una sola fila, esa fila se
     quedaba arriba y dejaba ~180px muertos al pie cuando la card iguala altura
     con la de acceso. Al estirarla, el `align-items: center` sí centra copy y
     reloj en el alto real de la card. */
  align-content: stretch;
}

.s2-vip-dual .s2-vip-contenido {
  display: grid;
  align-content: center;
  gap: clamp(10px, 1.2vw, 16px);
}

.s2-vip-dual .s2-vip-arena {
  position: relative;
  width: 100%;
  /* El vino detrás del cristal: integra la pieza con el plano de la card en
     lugar de dejarla flotando sobre el fondo. */
  background: radial-gradient(58% 46% at 50% 52%, rgba(120, 18, 44, 0.3), transparent 72%);
}

.s2-vip-dual .s2-vip-arena img {
  filter: drop-shadow(0 16px 32px rgba(0, 0, 0, 0.5));
}

/* Nivel 2 del bloque de urgencia: el rótulo temporal se oye. */
.s2-vip-dual .s2-dcard-tag--urgente {
  font-size: 0.72rem;
  letter-spacing: 0.2em;
}

/* Nivel 2: «solo para ti» es la promesa de exclusividad de la mentoría. */
.s2-vip-dual .s2-vip-copy em {
  font-style: normal;
  font-weight: 600;
  color: var(--ivory, #f5f1e8);
}

/* ── B4 · MÓVIL ─────────────────────────────────────────────────────────── */
@media (width <= 767px) {
  .s2-vip-sello {
    gap: clamp(14px, 4vw, 20px);
  }

  .s2-vip-dual .s2-vip-medallon {
    width: clamp(104px, 30vw, 132px);
  }

  /* El reloj baja a su propia fila: en una columna lateral quedaba en 72px
     —un icono— y dejaba el copy en 205px de 331. Aquí gana escala real y el
     texto recupera el ancho completo de la card. */
  .s2-vip-dual .s2-vipcard--urgente {
    grid-template-columns: minmax(0, 1fr);
    row-gap: clamp(16px, 4vw, 24px);
  }

  .s2-vip-dual .s2-vip-arena {
    justify-self: center;
    width: clamp(112px, 33vw, 150px);
  }

  .s2-vip-dual .s2-vip-title {
    font-size: clamp(1.5rem, 6.6vw, 1.9rem);
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   VIDEOTESTIMONIOS · MARCOS IGUALES EN MÓVIL (dirección, 25-08-2026)
   Síntoma: en móvil el cuarto vídeo se veía más estrecho que los otros tres.
   Medido: 146×168 frente a 168×168 a 390, 139 frente a 161 a 375, 131 frente
   a 153 a 360 — SIEMPRE 22px exactos de diferencia, en todos los anchos.

   Causa: un residuo. `.programa-video:last-child { margin-inline-end: 22px }`
   (línea ~2814, dentro de `@media (width <= 600px)`) venía del carrusel
   horizontal anterior —`.programa-videos` con `overflow-x` y `scroll-snap`—,
   donde ese margen final evitaba que la última tarjeta quedara pegada al
   borde. Ese carrusel ya no existe: el markup usa la rejilla `.s2-videos` y
   solo sobrevivió la clase en los artículos. Dentro de una rejilla el margen
   no separa de nada: se come 22px de la celda y descuadra el marco.

   No se borra la regla histórica —sigue siendo correcta si algún día vuelve
   el carrusel—: se neutraliza SOLO donde los vídeos viven en la rejilla.
   Nada más cambia: ni el `aspect-ratio: 1/1`, ni el `object-fit`, ni los
   `object-position` afinados por vídeo, ni los ficheros, ni los controles.
   ══════════════════════════════════════════════════════════════════════════ */

.s2-videos .programa-video:last-child {
  margin-inline-end: 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   TESTIMONIOS · EDITORIAL DE HISTORIAS REALES (dirección, 25-08-2026)
   Auditado el render anterior, tres cosas impedían la lectura premium:

     1 · Las tres citas eran cards idénticas de 440×322 con marco, estrellas
         arriba y comilla decorativa arriba-derecha: el patrón exacto de una
         reseña de plataforma. Ninguna guiaba la lectura.
     2 · Los cuatro vídeos eran una tira uniforme sin relación con las citas
         ni contexto propio: galería, no evidencia.
     3 · La nota que da veracidad —quién habla y desde dónde— iba al pie y en
         gris, después de haber mirado ya los vídeos.

   Se corrigen los tres SIN tocar el copy, los vídeos ni su comportamiento.
   Scope local: `.s2-testi*`, `.s2-tcard*`, `.s2-tquote`, `.s2-tmeta`,
   `.s2-tnum`, `.s2-videos*`.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── A · LAS CITAS DEJAN DE SER CARDS ───────────────────────────────────── */
/* Pasan a columnas de un mismo pliego editorial, separadas por hilos y no por
   marcos. Sin caja propia, sin fondo: la evidencia se acumula en una sola
   superficie en vez de fragmentarse en tres rectángulos iguales. */
.s2-testi .s2-testi-grid {
  gap: 0;
  border-block: 1px solid rgba(200, 164, 104, 0.16);
}

.s2-testi .s2-tcard {
  border: 0;
  border-inline-start: 1px solid rgba(200, 164, 104, 0.16);
  background: none;
  padding: clamp(30px, 3.2vw, 46px) clamp(24px, 2.6vw, 38px);
}

.s2-testi .s2-tcard:first-child {
  border-inline-start: 0;
  padding-inline-start: 0;
}

.s2-testi .s2-tcard:last-child {
  padding-inline-end: 0;
}

/* La comilla decorativa de esquina se retira. Dos motivos, no uno estético:
   colisionaba con la fila de estrellas al perder la card su padding, y era
   redundante — cada cita ya abre y cierra con «» en el propio copy. El acento
   editorial lo llevan ahora el numeral y los hilos. */
.s2-testi .s2-tcard::before {
  content: none;
}

/* Las estrellas eran el elemento más de plantilla de la sección. No se
   quitan —son contenido— pero bajan a rango de firma. */
.s2-testi .s2-tcard-stars {
  margin-bottom: clamp(16px, 1.8vw, 22px);
  font-size: 0.6rem;
  letter-spacing: 0.34em;
  color: rgba(200, 164, 104, 0.5);
}

/* La cita gana voz: es lo que la lead viene a leer. */
.s2-testi .s2-tquote p {
  font-size: clamp(1.08rem, 1.42vw, 1.32rem);
  line-height: 1.5;
  color: rgba(245, 241, 232, 0.92);
}

/* Nivel 1 de evidencia: el dato concreto dentro de la cita. Literal, tal cual
   lo dijo la alumna — solo cambia su peso. */
.s2-testi .programa-testi-proof-stat {
  font-size: 1.12em;
  font-weight: 600;
  font-style: normal;
  color: var(--ivory, #f5f1e8);
}

/* El numeral se convierte en el ancla editorial de cada historia. */
.s2-testi .s2-tmeta {
  border-top: 0;
  padding-top: clamp(18px, 2vw, 26px);
  column-gap: clamp(12px, 1.4vw, 18px);
}

.s2-testi .s2-tnum {
  align-self: center;
  font-size: clamp(1.9rem, 2.4vw, 2.7rem);
  line-height: 1;
  color: rgba(200, 164, 104, 0.42);
}

.s2-testi .s2-tmeta b {
  font-family: var(--font-editorial), Georgia, serif;
  font-size: 1.02rem;
  font-weight: 500;
}

/* ── B · ENTRADILLA DOCUMENTAL ──────────────────────────────────────────── */
/* Antes cerraba la sección en gris; ahora abre la evidencia y la acredita. */
.s2-testi .s2-videos-nota--entradilla {
  margin: clamp(46px, 5vw, 76px) auto clamp(20px, 2.2vw, 30px);
  max-width: 46ch;
  color: rgba(200, 164, 104, 0.78);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  line-height: 1.7;
  text-transform: uppercase;
}

/* ── C · LOS VÍDEOS COMO PLACAS DE ARCHIVO ──────────────────────────────── */
/* NO se toca la caja `<video>`: ni aspect-ratio, ni object-fit, ni
   object-position, ni controles, ni carga. Solo su entorno — el marco que la
   sostiene y la sombra que la separa del plano. */
.s2-testi .s2-videos {
  gap: clamp(12px, 1.4vw, 20px);
  margin-top: 0;
}

.s2-testi .s2-videos .programa-video {
  position: relative;
  box-shadow: 0 22px 44px rgba(0, 0, 0, 0.42);
}

/* Filo champán por fuera del reproductor: da placa sin duplicar el borde que
   ya lleva el propio `<video>`. */
.s2-testi .s2-videos .programa-video::after {
  position: absolute;
  z-index: 1;
  content: "";
  inset: -5px;
  border: 1px solid rgba(200, 164, 104, 0.16);
  pointer-events: none;
}

/* ── D · CABECERA ───────────────────────────────────────────────────────── */
.s2-testi .s2-testi-head {
  margin-bottom: clamp(34px, 3.8vw, 56px);
}

/* ── E · MÓVIL ──────────────────────────────────────────────────────────── */
/* En una sola columna los hilos verticales no separan nada: pasan a
   horizontales, que es lo que ordena una lectura apilada. */
@media (width <= 900px) {
  .s2-testi .s2-tcard {
    border-inline-start: 0;
    border-top: 1px solid rgba(200, 164, 104, 0.16);
    padding-inline: 0;
  }

  .s2-testi .s2-tcard:first-child {
    border-top: 0;
  }

}

@media (width <= 767px) {
  .s2-testi .s2-tcard {
    padding-block: clamp(24px, 6vw, 32px);
  }

  .s2-testi .s2-videos-nota--entradilla {
    font-size: 0.64rem;
    letter-spacing: 0.16em;
  }

  .s2-testi .s2-videos .programa-video::after {
    inset: -3px;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   TRANSFORMACIÓN · CAPÍTULO 02 EDITORIAL (dirección, 25-08-2026)
   Auditado el render anterior contra el Diagnóstico ya congelado, tres cosas
   dejaban a esta sección por debajo:

     1 · Sin atmósfera. El Diagnóstico tiene patronaje y respiración vino;
         Transformación era negro plano. Seguidas, la primera parecía el
         borrador de la segunda.
     2 · El paso HOY → AL TERMINAR no se percibía como transformación. La
         escala ya contrastaba (15px Manrope apagado frente a 27,4px Bodoni
         marfil), pero las dos columnas corrían paralelas separadas solo por
         aire: el ojo leía dos listas, no un antes y un después.
     3 · Sin ritmo ni cierre. Cinco filas de 138px idénticas, sin acumulación,
         y la sección terminaba en seco contra el Diagnóstico (gap 0).

   Se corrigen los tres. El copy no cambia: cambian atmósfera, gesto
   compositivo y ritmo. Scope local: `.editorial-transform*` y `.s2-row*`
   bajo esa sección. El Diagnóstico NO se toca — Transformación se adapta a
   él, que es el congelado.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── A · ATMÓSFERA Y CONTINUIDAD ────────────────────────────────────────── */
/* Mismo plano near-black del Diagnóstico y una respiración vino contenida,
   colocada arriba para que el capítulo ENTRE en luz y salga hacia el negro
   del que arranca el Diagnóstico. */
.sales-transform.editorial-transform {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background:
    radial-gradient(64% 44% at 22% 6%, rgba(96, 20, 40, 0.17), transparent 72%),
    linear-gradient(180deg, #0c090a 0%, #0b0809 62%, #0b0809 100%);
}

.editorial-pattern--transform {
  position: absolute;
  z-index: 0;
  top: 12%;
  left: 50%;
  width: min(112vw, 1560px);
  height: auto;
  transform: translateX(-50%);
  stroke: rgba(200, 164, 104, 0.1);
  stroke-width: 1;
  pointer-events: none;
}

.editorial-pattern--transform circle {
  fill: rgba(200, 164, 104, 0.16);
  stroke: none;
}

.editorial-transform > .shell {
  position: relative;
  z-index: 1;
}

/* ── B · EL PASO SE DIBUJA ──────────────────────────────────────────────── */
/* Cada fila gana un conector punteado entre las dos columnas: el mismo
   lenguaje de perforación que ya usan la ficha y el Diagnóstico. Es lo que
   convierte dos columnas paralelas en un antes → después. */
.editorial-transform .s2-row {
  position: relative;
  padding-block: clamp(26px, 3vw, 42px);
}

.editorial-transform .s2-row-right {
  position: relative;
}

.editorial-transform .s2-row-right::before {
  position: absolute;
  content: "";
  top: 0.7em;
  right: calc(100% + clamp(12px, 2vw, 36px));
  width: clamp(16px, 2.4vw, 44px);
  border-top: 1px dashed rgba(200, 164, 104, 0.5);
}

.editorial-transform .s2-row-right::after {
  position: absolute;
  content: "";
  top: calc(0.7em - 2px);
  right: calc(100% + clamp(6px, 1.2vw, 20px));
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(200, 164, 104, 0.6);
}

/* ── C · JERARQUÍA CRO ──────────────────────────────────────────────────── */
/* El HOY retrocede un punto más y el resultado —que es el deseo— se queda con
   todo el marfil. La distancia entre los dos estados pasa de ×1,8 a ×2,0. */
.editorial-transform .s2-row-hoy {
  color: rgba(245, 241, 232, 0.56);
}

.editorial-transform .s2-row-despues {
  font-size: clamp(1.36rem, 2.05vw, 1.92rem);
  line-height: 1.22;
}

/* El numeral acompaña como marca de capítulo, no como viñeta. */
.editorial-transform .s2-row-mark {
  font-family: var(--font-editorial), Georgia, serif;
  font-size: 1.06rem;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: rgba(200, 164, 104, 0.5);
}

/* La entradilla se separa del titular y baja de peso: es contexto, no voz. */
.editorial-transform .s2-tesis-sub {
  color: rgba(245, 241, 232, 0.62);
}

/* ── D · CIERRE HACIA EL DIAGNÓSTICO ────────────────────────────────────── */
/* La última fila cierra sin hilo: el capítulo entrega el ojo al siguiente en
   vez de cortarse con una raya. */
.editorial-transform .s2-row:last-child {
  border-bottom: 0;
}

.editorial-transform .s2-rows {
  border-top-color: rgba(200, 164, 104, 0.26);
}

/* ── E · MÓVIL ──────────────────────────────────────────────────────────── */
/* En una columna el conector no puede ser lateral: se vuelve vertical, que es
   como se lee un antes → después apilado. */
@media (width <= 767px) {
  .editorial-transform .s2-row-right::before {
    top: auto;
    right: auto;
    bottom: calc(100% + clamp(6px, 2vw, 12px));
    left: clamp(2px, 1vw, 6px);
    width: 0;
    height: clamp(12px, 3vw, 20px);
    border-top: 0;
    border-left: 1px dashed rgba(200, 164, 104, 0.5);
  }

  .editorial-transform .s2-row-right::after {
    top: auto;
    right: auto;
    bottom: calc(100% + clamp(2px, 0.8vw, 5px));
    left: 0;
  }

  .editorial-transform .s2-row {
    padding-block: clamp(24px, 6vw, 32px);
  }

  .editorial-pattern--transform {
    top: 8%;
    width: 190vw;
    opacity: 0.8;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   MICROFIX AUTORIZADO · CTA DE TESTIMONIOS CENTRADO (dirección, 25-08-2026)
   Medido: el CTA quedaba a −525px del centro a 1440, −328 a 1024 y −200 a
   768. En móvil ya salía centrado, pero por accidente: el botón ocupa el
   ancho completo, así que su centro coincidía con el del shell.

   Causa: `.s2-proof-cta` es una rejilla que solo declaraba `align-items`
   (eje vertical); en el horizontal los items caían a `start`. Se corrige en
   el nivel estructural correcto —`justify-items`— sin transform, sin
   posicionamiento absoluto y sin márgenes por breakpoint. El botón sigue
   siendo la MISMA instancia: no cambia su ancho, alto, copy ni un solo
   `data-*`. Nada más de Testimonios se toca.
   ══════════════════════════════════════════════════════════════════════════ */

.s2-testi .s2-proof-cta {
  justify-items: center;
  text-align: center;
}

/* ══════════════════════════════════════════════════════════════════════════
   GARANTÍA · CLÁUSULA EDITORIAL (dirección, 25-08-2026)
   Auditado el render anterior contra las zonas ya rediseñadas, tres cosas la
   dejaban por debajo:

     1 · El escudo con check. El cliché exacto de «garantía», y además lo
         primero que veía el ojo: 92px de icono genérico abriendo la sección.
     2 · Todo el compromiso en un párrafo centrado. Condición, los dos
         compromisos y la elección, aplastados en 525px a 17,2px con los dos
         `<strong>` al MISMO tamaño que el cuerpo (17,2/17,2). En scroll
         rápido no se distinguía qué era condición y qué era compromiso; en
         móvil eran ocho líneas seguidas.
     3 · Sin estructura de documento. Ni marco, ni sello, ni firma: un bloque
         de texto centrado sobre un fondo, no un compromiso escrito.

   El fondo RELIEF oscuro aprobado NO se toca: base #171114, champán #e6cfa4,
   cuerpo marfil, y sus capas dark/wine siguen intactas. Lo que cambia es la
   estructura y el peso. Copy: ni una palabra.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── A · LA SECCIÓN COMO DOCUMENTO ──────────────────────────────────────── */
.sales-garantia.editorial-garantia {
  position: relative;
  isolation: isolate;
}

/* Hilo de entrada: cierra la prueba social y abre el compromiso. Es lo que
   evita que Testimonios y Garantía se toquen sin transición. */
.editorial-garantia::before {
  position: absolute;
  z-index: 0;
  content: "";
  top: 0;
  left: 50%;
  width: min(calc(100% - 44px), 1180px);
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(
    90deg,
    transparent,
    rgba(200, 164, 104, 0.28) 22%,
    rgba(200, 164, 104, 0.28) 78%,
    transparent
  );
}

/* La cláusula vive dentro de un marco de documento: filo champán a los cuatro
   lados, como la ficha y la banda de decisión. */
.editorial-garantia .sales-garantia-inner {
  position: relative;
  z-index: 1;
  width: min(calc(100% - 44px), 880px);
  padding: clamp(40px, 4.6vw, 72px) clamp(26px, 3.6vw, 62px) clamp(36px, 4.2vw, 62px);
  border: 1px solid rgba(200, 164, 104, 0.3);
  background:
    radial-gradient(72% 52% at 50% 0%, rgba(200, 164, 104, 0.05), transparent 70%),
    rgba(11, 8, 9, 0.34);
}

/* Muescas de perforación en el eje superior e inferior: el mismo recurso del
   ticket de la ficha, que es lo que da lectura de documento emitido. */
.editorial-garantia .sales-garantia-inner::before,
.editorial-garantia .sales-garantia-inner::after {
  position: absolute;
  z-index: 2;
  content: "";
  left: 50%;
  width: 13px;
  height: 13px;
  border: 1px solid rgba(200, 164, 104, 0.3);
  border-radius: 50%;
  background: #171114;
  transform: translateX(-50%);
}

.editorial-garantia .sales-garantia-inner::before { top: -7px; }
.editorial-garantia .sales-garantia-inner::after { bottom: -7px; }

/* ── B · EL SELLO ───────────────────────────────────────────────────────── */
/* Deja de ser un icono que anuncia y pasa a ser una marca que acredita: más
   pequeño, más fino y en champán apagado. */
.editorial-garantia .programa-escudo {
  width: clamp(46px, 4.4vw, 62px);
  height: clamp(46px, 4.4vw, 62px);
  border: 0;
  color: rgba(200, 164, 104, 0.62);
}

.editorial-garantia .programa-escudo svg {
  width: 100%;
  height: 100%;
}

/* ── C · JERARQUÍA DE LA CLÁUSULA ───────────────────────────────────────── */
/* Nivel 3 · la condición retrocede: es el requisito, no la promesa. */
.editorial-garantia .s2-gar-condicion {
  color: rgba(245, 241, 232, 0.58);
}

/* Nivel 1 · los dos compromisos. Eran indistinguibles del cuerpo (17,2px
   frente a 17,2px); ahora son lo que el ojo encuentra primero al pasar. */
.editorial-garantia .sales-garantia-inner p:last-child strong {
  display: inline-block;
  font-family: var(--font-editorial), Georgia, serif;
  font-size: 1.34em;
  font-weight: 500;
  line-height: 1.28;
  color: #f0dfb8;
}

/* Nivel 2 · la elección cierra la cláusula, como una firma. */
.editorial-garantia .s2-gar-eleccion {
  display: block;
  margin-top: clamp(14px, 1.6vw, 20px);
  font-family: var(--font-editorial), Georgia, serif;
  font-size: 1.16em;
  font-style: italic;
  color: rgba(230, 207, 164, 0.92);
}

/* El cuerpo gana medida y aire: una cláusula se lee, no se apiña. */
.editorial-garantia .sales-garantia-inner p:last-child {
  max-width: 60ch;
  margin-inline: auto;
  line-height: 1.85;
}

/* ── D · MÓVIL ──────────────────────────────────────────────────────────── */
/* Lo que pedía el encargo: que la idea principal se vea sin leer antes una
   pared de texto. El primer compromiso pasa a línea propia, así que en el
   primer golpe de vista se lee la salida principal y luego el requisito.
   El segundo se queda EN LÍNEA a propósito: al hacerlo bloque, el punto final
   —que es un nodo de texto posterior al `<strong>`— caía huérfano en una línea
   suelta. Se corrige con maquetación, no tocando el copy. */
@media (width <= 767px) {
  .editorial-garantia .sales-garantia-inner {
    width: calc(100% - 32px);
    padding: clamp(30px, 8vw, 40px) clamp(20px, 5.4vw, 26px) clamp(28px, 7vw, 36px);
  }

  .editorial-garantia .sales-garantia-inner p:last-child {
    line-height: 1.8;
  }

  .editorial-garantia .sales-garantia-inner p:last-child strong {
    display: inline;
    font-size: 1.28em;
  }

  .editorial-garantia .sales-garantia-inner p:last-child strong:first-of-type {
    display: block;
    margin-block: 10px 6px;
  }

  .editorial-garantia .programa-escudo {
    width: 44px;
    height: 44px;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   CAPÍTULO 10 · AL CERRAR LOS 6 MESES · DOSSIER DE SALIDA (dirección, 25-08-2026)
   Auditado el render real contra las zonas ya congeladas, tres cosas dejaban
   este capítulo por debajo:

     1 · Seis cards idénticas = lista plana de features. Los seis entregables
         se presentaban con EL MISMO tratamiento (673x236 en 1440, mismo
         borde, mismo fondo, misma pastilla, mismo icono en círculo de 46px,
         mismo folio fantasma de 72px) aunque semánticamente no pesan igual:
         hay identidad, activo construido, capacidad, resultado y soporte.
         Se leía «esto es lo que incluye», no «en quién te has convertido».
     2 · Era la última zona en lenguaje SaaS. Pastilla con border-radius 999,
         icono genérico encerrado en círculo y caja cerrada por los cuatro
         lados: justo el vocabulario que Transformación, Diagnóstico y
         Garantía ya abandonaron. Además rimaba con los BONUS, con los que
         comparte `.s2-dcard-tag` y `.s2-bcard-ico`.
     3 · Cero future pacing y la tesis invisible. El criterio de éxito —«Se
         mide en lo que sales pudiendo mostrar, defender y vender»— iba a
         17,2px, EXACTAMENTE el mismo tamaño que la línea que lo precede, así
         que en scroll rápido no existía. Y nada dibujaba los seis meses: seis
         cajas en paralelo, sin eje, sin acumulación, sin cierre.

   Se corrigen los tres SIN tocar una palabra. Las cards pasan a entradas de
   un dossier de salida cosidas por un hilo vertical continuo —lenguaje de
   atelier, distinto del conector punteado horizontal de Transformación y del
   marco con perforación de Garantía, que quedan intactos—, y el criterio sube
   a tesis del capítulo. Scope local: `.s2-resultado`. Cero markup nuevo, cero
   JS, cero raster. El CTA no existe en esta sección y no se añade.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── A · LA TESIS DEL CAPÍTULO (nivel 1) ────────────────────────────────── */
/* Era 17,2 frente a 17,2: indistinguible. Ahora es lo primero que el ojo
   encuentra tras el H2 y lo que instala el «ya no estás en el mismo punto». */
.s2-resultado .s2-resultado-criterio {
  /* La medida se fija en px, no en `ch`: el `ch` resuelve contra la Manrope
     del contenedor, no contra la Bodoni de la tesis, y dejaba la frase en
     cuatro líneas de 292px. */
  max-width: min(540px, 100%);
  margin-bottom: clamp(38px, 4.4vw, 62px);
}

.s2-resultado .s2-resultado-criterio p:first-child {
  margin-bottom: 12px;
  color: rgba(245, 241, 232, 0.5);
  font-size: 0.95rem;
  letter-spacing: 0.01em;
}

.s2-resultado .s2-resultado-criterio strong {
  display: block;
  font-family: var(--font-editorial), Georgia, serif;
  /* Separación medida frente al nivel 2: a 1,98rem la tesis quedaba a 31,7px
     contra 28,1px de los titulares —solo un 13%—, insuficiente para que se
     leyera por encima de ellos. A 2,3rem la distancia es del 31%. */
  font-size: clamp(1.5rem, 2.55vw, 2.3rem);
  font-weight: 500;
  line-height: 1.22;
  color: var(--ivory);
}

/* ── B · SEIS ENTRADAS DE DOSSIER, NO SEIS CARDS ────────────────────────── */
/* El tablero de dos columnas desaparece: un dossier se lee en vertical, y es
   la verticalidad la que permite que los seis se lean como acumulación. */
.s2-resultado .s2-resultado-grid {
  position: relative;
  --rail: clamp(64px, 6.6vw, 104px);
  --nodo: clamp(34px, 3.4vw, 44px);
  --fila-pt: clamp(24px, 2.8vw, 34px);
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  max-width: 1040px;
  margin-inline: auto;
}

.s2-resultado .s2-rcard {
  position: relative;
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  column-gap: clamp(16px, 2vw, 30px);
  align-items: start;
  overflow: visible;
  padding: var(--fila-pt) 0 clamp(26px, 3vw, 38px);
  border: 0;
  border-top: 1px solid rgba(200, 164, 104, 0.16);
  background: none;
}

/* La primera entrada abre el dossier con un filo más presente. */
.s2-resultado .s2-rcard:first-child {
  border-top-color: rgba(200, 164, 104, 0.34);
}

/* ── C · EL HILO DE LOS SEIS MESES ──────────────────────────────────────── */
/* Dos segmentos por fila —por encima y por debajo del nodo— para que el hilo
   cruce entero el capítulo sin necesitar un nodo opaco: el fondo de la
   sección es un degradado, y una pastilla de color plano habría dejado
   costura. Filas consecutivas empalman a través del filo. */
.s2-resultado .s2-rcard::before,
.s2-resultado .s2-rcard::after {
  position: absolute;
  z-index: 0;
  content: "";
  left: calc(var(--nodo) / 2);
  width: 1px;
  background: rgba(200, 164, 104, 0.24);
}

.s2-resultado .s2-rcard::before {
  top: 0;
  height: var(--fila-pt);
}

.s2-resultado .s2-rcard::after {
  top: calc(var(--fila-pt) + var(--nodo));
  bottom: 0;
}

/* El hilo desciende desde la tesis: los seis meses empiezan ahí. */
.s2-resultado .s2-resultado-grid::before {
  position: absolute;
  content: "";
  bottom: 100%;
  left: calc(var(--nodo) / 2);
  width: 1px;
  height: clamp(20px, 2.6vw, 34px);
  background: linear-gradient(180deg, transparent, rgba(200, 164, 104, 0.24));
}

/* Y no termina en seco: se desvanece hacia delante. Cerrar los seis meses no
   es cerrar el proceso — es el punto desde el que se sigue. */
.s2-resultado .s2-resultado-grid::after {
  position: absolute;
  content: "";
  top: 100%;
  left: calc(var(--nodo) / 2);
  width: 1px;
  height: clamp(34px, 4vw, 56px);
  background: linear-gradient(180deg, rgba(200, 164, 104, 0.24), transparent);
}

/* Colocación explícita: el nodo ocupa el carril entero y el rótulo, el titular
   y la precisión se apilan en la columna de contenido. Sin esto, el
   autoposicionamiento reparte los cuatro hijos en dos columnas × dos filas y
   el titular cae dentro del carril.
   El nodo: la misma marca de atelier, ahora cosida al hilo en vez de flotando
   dentro de una card. Sin fondo propio — el hilo pasa por detrás del hueco. */
.s2-resultado .s2-bcard-ico {
  grid-column: 1;
  grid-row: 1 / span 3;
  position: relative;
  z-index: 1;
  width: var(--nodo);
  height: var(--nodo);
  margin: 0;
  border-color: rgba(200, 164, 104, 0.36);
  background: radial-gradient(circle at 50% 40%, rgba(200, 164, 104, 0.12), transparent 72%);
  color: rgba(232, 205, 158, 0.86);
}

.s2-resultado .s2-bcard-ico svg {
  width: 17px;
  height: 17px;
}

/* El folio fantasma de 72px era la marca de agua de la card. El número vive
   una sola vez, dentro del rótulo, que ya lo lleva en el copy vivo. */
.s2-resultado .s2-dcard-letter {
  display: none;
}

/* ── D · JERARQUÍA DE LA ENTRADA (niveles 2 y 3) ────────────────────────── */
/* La pastilla pasa a rótulo editorial: mismo texto, sin cápsula de producto. */
.s2-resultado .s2-dcard-tag {
  grid-column: 2;
  grid-row: 1;
  display: block;
  margin: 0 0 clamp(8px, 1vw, 12px);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: rgba(200, 164, 104, 0.78);
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.26em;
}

/* Nivel 2 · el titular de cada entrada: lo que TIENES. */
.s2-resultado .s2-dcard-title {
  grid-column: 2;
  grid-row: 2;
  margin: 0 0 clamp(8px, 0.9vw, 12px);
  max-width: 22ch;
  font-size: clamp(1.42rem, 1.95vw, 1.84rem);
  line-height: 1.16;
}

/* Nivel 3 · la precisión que lo hace creíble, un punto por detrás. */
.s2-resultado .s2-dcard-body {
  grid-column: 2;
  grid-row: 3;
  max-width: 58ch;
  font-size: 0.95rem;
  line-height: 1.66;
  color: rgba(245, 241, 232, 0.6);
}

/* ── E · MÓVIL ──────────────────────────────────────────────────────────── */
/* No es el escritorio apilado: en vertical el hilo es exactamente el gesto
   que hace legible la acumulación, así que se conserva y se estrecha el
   carril. Seis cajas de 227-253px pasan a seis entradas de dossier. */
@media (width <= 767px) {
  .s2-resultado .s2-resultado-grid {
    --rail: 44px;
    --nodo: 30px;
    --fila-pt: 20px;
  }

  .s2-resultado .s2-rcard {
    column-gap: 14px;
    padding-bottom: 24px;
  }

  .s2-resultado .s2-dcard-title {
    max-width: none;
    font-size: 1.26rem;
  }

  .s2-resultado .s2-dcard-body {
    font-size: 0.92rem;
  }

  .s2-resultado .s2-bcard-ico svg {
    width: 14px;
    height: 14px;
  }

  .s2-resultado .s2-resultado-criterio {
    max-width: min(400px, 100%);
  }
}

/* ── F · ESCRITORIO · LA ENTRADA SE ABRE A DOS COLUMNAS ─────────────────── */
/* En una sola columna, el titular y su precisión desaprovechaban 900px de
   medida y estiraban el capítulo 507px por encima del render anterior. En
   índice de dossier —titular a la izquierda, precisión enfrentada— cada
   entrada cabe en su línea y el ritmo vuelve a ser el de un documento. */
@media (width >= 1024px) {
  .s2-resultado .s2-rcard {
    grid-template-columns: var(--rail) minmax(0, 1fr) minmax(0, 0.92fr);
    padding: clamp(22px, 2.4vw, 30px) 0 clamp(24px, 2.6vw, 32px);
    --fila-pt: clamp(22px, 2.4vw, 30px);
  }

  .s2-resultado .s2-dcard-title {
    max-width: none;
  }

  .s2-resultado .s2-dcard-body {
    grid-column: 3;
    grid-row: 2;
    max-width: 46ch;
    padding-top: 0.34em;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   CAPÍTULO 11 · ANTES DE SOLICITAR · EXPEDIENTE DE DECISIÓN (dirección, 25-08-2026)
   Auditado el render real, tres cosas dejaban el capítulo por debajo del resto:

     1 · Las siete preguntas pesaban EXACTAMENTE lo mismo. Siete filas de
         77,6px, pregunta a 21,6px, folio a 18,4px, «+» a 20,8px. «¿Cuánto
         cuesta?» —la objeción capaz de bloquear la compra— tenía el mismo
         peso visual que «¿Y si no llego a todas las mentorías en directo?».
         La lead no podía localizar su duda: tenía que leer las siete.
     2 · Era un accordion de centro de ayuda. Filo arriba y filo abajo por
         fila —ocho líneas del mismo grosor: una tabla— y un «+» de 20,8px a
         la derecha que rota. Con todo cerrado, en el primer golpe de vista
         había CERO respuestas: la sección no resolvía nada hasta el clic.
     3 · La respuesta no tenía jerarquía interna. Un bloque plano a 17,2px al
         64% de opacidad, sin distinguir lo que elimina el miedo («No hace
         falta saber coser para empezar», «Quedan grabadas y accesibles»,
         «Sí — no te autoexcluyas») de la explicación que lo matiza. Todo al
         mismo peso obliga a leerlo entero.

   Se corrigen los tres SIN tocar una palabra: la respuesta se parte en dos
   nodos de texto —`clave` (primera frase) y `resto`— que concatenados
   reconstruyen el original byte a byte, y la fila abierta se marca como
   resuelta usando el estado nativo `[open]` de `details`. Cero JS, cero
   dependencias, cero raster. `details/summary`, teclado, foco, ARIA y el
   control «+» se conservan intactos. Comparte familia con el capítulo 10
   (folio editorial, filo, sin cards) pero NO su hilo: allí es acumulación
   continua; aquí cada pregunta es una barrera independiente que se cierra.
   Scope local: `.s2-faq`.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── A · EL EXPEDIENTE ──────────────────────────────────────────────────── */
/* Ocho filos idénticos leían como tabla. Ahora solo hay separación ENTRE
   entradas, y la lista abre y cierra con un filo de apertura más presente. */
.s2-faq .s2-faq-list {
  --faq-carril: clamp(38px, 4vw, 58px);
  --faq-hueco: clamp(12px, 1.6vw, 22px);
  --faq-fila-pt: clamp(20px, 2.3vw, 28px);
  max-width: 860px;
  border-top: 1px solid rgba(200, 164, 104, 0.32);
}

.s2-faq .s2-faq-row {
  position: relative;
  border-bottom-color: rgba(200, 164, 104, 0.14);
  transition: background-color 0.25s ease;
}

.s2-faq .s2-faq-row:last-child {
  border-bottom-color: rgba(200, 164, 104, 0.32);
}

/* ── B · LA ENTRADA ─────────────────────────────────────────────────────── */
/* La rejilla `folio | pregunta | control` empujaba el control al filo derecho
   de la fila: con «¿Cuánto cuesta?» quedaban 470px de vacío entre la pregunta
   y su «+», que es exactamente lo que hacía leer la lista como una tabla de
   centro de ayuda. El summary pasa a bloque: el folio se ancla al margen y el
   control viaja PEGADO al final de la pregunta, como una marca editorial de
   despliegue. El área clicable sigue siendo la fila entera. */
.s2-faq .s2-faq-row summary {
  position: relative;
  display: block;
  padding: var(--faq-fila-pt) 4px var(--faq-fila-pt) calc(var(--faq-carril) + var(--faq-hueco));
}

.s2-faq .s2-faq-num {
  position: absolute;
  top: calc(var(--faq-fila-pt) + 0.22em);
  left: 4px;
  font-size: 0.98rem;
  font-style: normal;
  letter-spacing: 0.06em;
  color: rgba(200, 164, 104, 0.5);
  transition: color 0.25s ease;
}

/* Nivel 1 · la pregunta. Es lo que la lead busca; gana cuerpo y aire. */
.s2-faq .s2-faq-q {
  font-size: clamp(1.2rem, 1.72vw, 1.56rem);
  line-height: 1.24;
}

/* El control se conserva —es la afordancia y ya rota a × en `[open]`— pero
   deja de ser el segundo elemento más grande de la fila y se coloca junto a
   la pregunta, no en el filo opuesto. */
.s2-faq .s2-faq-row summary b {
  display: inline-block;
  margin-left: 0.52em;
  font-size: 0.92rem;
  vertical-align: 0.12em;
  color: rgba(200, 164, 104, 0.55);
  transition: color 0.25s ease, rotate 0.25s ease;
}

/* ── C · LA BARRERA RESUELTA ────────────────────────────────────────────── */
/* Lo que pedía el encargo: que se perciba que cada respuesta ELIMINA una
   barrera. Se resuelve con el estado nativo `[open]`, sin una línea de JS:
   la entrada abierta se enciende, gana una marca de resolución en el margen
   y una respiración cálida contenida. */
.s2-faq .s2-faq-row[open] {
  background: linear-gradient(90deg, rgba(200, 164, 104, 0.05), transparent 62%);
}

.s2-faq .s2-faq-row[open]::before {
  position: absolute;
  content: "";
  top: var(--faq-fila-pt);
  bottom: clamp(18px, 2.2vw, 26px);
  left: 0;
  width: 2px;
  background: linear-gradient(180deg, rgba(200, 164, 104, 0.75), rgba(200, 164, 104, 0.12));
}

.s2-faq .s2-faq-row[open] .s2-faq-num,
.s2-faq .s2-faq-row[open] summary b {
  color: rgba(232, 205, 158, 0.95);
}

/* ── D · LA RESPUESTA, EN DOS NIVELES ───────────────────────────────────── */
.s2-faq .s2-faq-row > p {
  /* El cuerpo NO se reduce: sigue heredando los 17,2px de antes. La jerarquía
     de la respuesta es cromática, no de tamaño — reducir la letra de la
     explicación habría sido comprarla barata. */
  max-width: 62ch;
  padding: 0 4px clamp(22px, 2.6vw, 30px) calc(var(--faq-carril) + var(--faq-hueco));
  line-height: 1.72;
  color: rgba(245, 241, 232, 0.58);
}

/* Nivel 2 · la frase que resuelve la objeción, en marfil pleno. No es negrita
   ni cambia de cuerpo: solo deja de estar apagada, que es lo que hace falta
   para encontrarla de un vistazo. */
.s2-faq .s2-faq-clave {
  color: var(--ivory);
}

/* ── E · MÓVIL ──────────────────────────────────────────────────────────── */
/* El folio se estrecha pero no desaparece —es lo que permite ubicarse en la
   lista larga—, la pregunta conserva medida completa y la respuesta alinea a
   la izquierda. El área táctil del `summary` no baja de 44px en ningún ancho. */
@media (width <= 767px) {
  .s2-faq .s2-faq-list {
    --faq-carril: 30px;
    --faq-hueco: 10px;
    --faq-fila-pt: 17px;
  }

  .s2-faq .s2-faq-row summary {
    padding-right: 2px;
  }

  .s2-faq .s2-faq-num {
    left: 2px;
    font-size: 0.86rem;
  }

  .s2-faq .s2-faq-q {
    font-size: 1.1rem;
  }

  .s2-faq .s2-faq-row > p {
    line-height: 1.68;
  }

  .s2-faq .s2-faq-row[open]::before {
    bottom: 16px;
  }
}

/* ── F · FAQ 03 · EL SEGUNDO DESBLOQUEADOR (dirección, 25-08-2026) ──────── */
/* Microfix CRO autorizado, solo para «¿Cuánto cuesta?». Es la única de las
   siete cuya respuesta contiene DOS desbloqueadores P0 distintos: la
   transparencia sobre la inversión y el hecho de que reservar no compromete.
   Con la regla uniforme «primera frase = clave», el segundo caía al nivel 3 al
   58% y pegado al primero — y es justo el que quita fricción para continuar
   con la solicitud.

   No se crea un nivel nuevo: la segunda frase entra en el MISMO nivel 2 que la
   primera (mismo cuerpo, mismo marfil pleno, mismo peso). Lo único que cambia
   es que gana línea propia y un respiro. Sin Bodoni, sin champán, sin caja,
   sin icono: sigue siendo una respuesta, no una promesa publicitaria.

   El selector va por clase —presente solo en la entrada que declara `clave2`—
   y no por `:nth-child(3)`: si dirección reordena las preguntas, el realce
   viaja con su respuesta en vez de quedarse en la posición tercera. */
.s2-faq .s2-faq-clave--seguimiento {
  display: block;
  margin-top: 0.62em;
}

/* ══════════════════════════════════════════════════════════════════════════
   CIERRE · sales-final · MOMENTO DE DECISIÓN (dirección, 25-08-2026)
   Auditado el render real contra el resto del editorial, tres cosas dejaban
   el cierre por debajo:

     1 · DOS titulares compitiendo por ser el cierre. El manifiesto a 63,4px
         y, 481px más abajo, «El primer paso es decidir empezar…» a 43,2px:
         mismo tipo de frase, mismo centrado, mismo <em> champán. El ojo no
         sabía cuál era la tesis final, y «decidir» aparecía en las dos.
     2 · El CTA quedaba a 1.174px del inicio de la sección en 1440 y a
         1.021-1.074px en móvil. Entre el manifiesto y él había ~590px de
         prosa en tres kickers a 640px de medida y alineados a la IZQUIERDA
         dentro de una sección centrada: el eje se rompía justo en el tramo
         previo a decidir, y el capítulo volvía a argumentar el futuro que el
         capítulo 10 ya había vendido.
     3 · Once elementos de texto compitiendo. status → pre → manifiesto →
         tres kickers → rótulo + h3 + subtítulo → CTA + nota + firma, todos
         con presencia parecida. Un cierre necesita lo contrario: muy pocas
         piezas y una sola acción evidente.

   Se corrigen los tres SIN tocar una palabra y sin borrar ninguna pieza: lo
   que cambia es el rango de cada una y la distancia hasta el CTA. Scope
   local: `.s2-final`. El chip «Hemos abierto las puertas» queda FUERA (está
   congelado), igual que el CTA, su contrato y su arbitraje de pulse.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── A · LA ÚLTIMA PÁGINA DEL EDITORIAL ─────────────────────────────────── */
/* Era la única sección del cierre sin plano propio: heredaba el fondo del
   body y llegaba al footer sin haber ocurrido nada. Una respiración vino
   detrás del statement y un apagado hacia abajo desaceleran el scroll justo
   antes de decidir, y hacen que la página termine con intención. */
.sales-final.s2-final {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(58% 40% at 50% 16%, rgba(96, 20, 40, 0.2), transparent 70%),
    linear-gradient(180deg, #0d0a0b 0%, #0b0809 62%, #090708 100%);
}

.s2-final > .shell {
  position: relative;
  z-index: 1;
}

/* ── B · UN SOLO TITULAR MANDA ──────────────────────────────────────────── */
/* La tesis final es el manifiesto. Dentro de él, la primera mitad prepara y
   la segunda resuelve: mismo cuerpo, distinta presencia. */
.s2-final .s2-final-manifesto-pre {
  display: block;
  color: rgba(245, 241, 232, 0.52);
}

/* La antesala del CTA deja de ser un segundo manifiesto y pasa a ser lo que
   es: el rótulo de la acción. 43,2 → 30,7px en 1440; la distancia con el
   manifiesto pasa de ×1,47 a ×2,07. */
.s2-final .s2-final-decision h3 {
  /* El mínimo del clamp se fija en 1,62rem: por debajo (1,5rem = 24px) la
     antesala perdía presencia en tablet y móvil, donde el manifiesto ya es
     pequeño y la distancia entre ambos se cerraba demasiado. */
  max-width: 24ch;
  font-size: clamp(1.62rem, 2.14vw, 1.92rem);
  line-height: 1.16;
}

/* ── C · LA PROSA DEJA DE SER UN ARTÍCULO ───────────────────────────────── */
/* Vuelve al eje de la sección y estrecha la medida: es un descenso hacia la
   decisión, no un texto para instalarse a leer. */
.s2-final .s2-final-prose {
  gap: clamp(14px, 1.6vw, 20px);
  max-width: 560px;
  text-align: center;
}

/* Escalera de presencia: la entrada retrocede —lo que dice ya lo dijo el
   manifiesto—, la reflexión conserva su voz editorial y el cierre, que es el
   que empalma con la acción, se queda con el marfil. */
.s2-final .s2-final-kicker--lead {
  color: rgba(245, 241, 232, 0.62);
  font-size: clamp(1rem, 1.2vw, 1.08rem);
}

.s2-final .s2-final-kicker--reflect {
  color: rgba(232, 205, 158, 0.72);
  font-size: clamp(1.02rem, 1.28vw, 1.14rem);
}

.s2-final .s2-final-kicker--close {
  margin-top: clamp(6px, 0.8vw, 10px);
  color: rgba(245, 241, 232, 0.86);
  font-size: clamp(1.06rem, 1.35vw, 1.2rem);
}

/* ── D · EL CTA SUBE ────────────────────────────────────────────────────── */
/* Ninguna pieza se borra: se recorta la distancia. El aire se concentra donde
   sirve —aislando la decisión— en vez de repartirse por todo el descenso. */
.s2-final .s2-final-manifesto {
  margin-bottom: clamp(26px, 3vw, 40px);
}

.s2-final .s2-final-decision {
  margin-top: clamp(30px, 3.4vw, 46px);
  padding-top: clamp(24px, 2.8vw, 34px);
}

.s2-final .s2-final-decision-sub {
  max-width: 40ch;
}

/* El bloque de acción es lo único que gana aire por delante: es el punto en
   el que el scroll debe frenar. */
.s2-final .s2-final-cta {
  margin-top: clamp(30px, 3.6vw, 46px);
}

/* La nota es operativa, no argumento: retrocede sin perder legibilidad. */
.s2-final .s2-final-cta .sales-cta-note {
  color: rgba(245, 241, 232, 0.52);
}

/* ── E · MÓVIL ──────────────────────────────────────────────────────────── */
/* En móvil el problema era el mismo pero peor: 1.021-1.074px hasta el CTA.
   Aquí el descenso se comprime más, porque la lead ya ha recorrido once
   capítulos y lo que necesita del cierre es la decisión y el botón. */
@media (width <= 767px) {
  .s2-final .s2-final-prose {
    gap: 14px;
    max-width: none;
  }

  .s2-final .s2-final-kicker--lead,
  .s2-final .s2-final-kicker--reflect {
    font-size: 1rem;
  }

  /* El interlineado de 1,7 estaba calibrado para lectura larga; aquí el texto
     es un descenso, no un artículo. */
  .s2-final .s2-final-kicker {
    line-height: 1.58;
  }

  .s2-final .s2-final-kicker--close {
    font-size: 1.06rem;
  }

  .s2-final .s2-final-manifesto {
    margin-bottom: 24px;
  }

  .s2-final .s2-final-decision {
    margin-top: 28px;
    padding-top: 22px;
  }

  .s2-final .s2-final-cta {
    margin-top: 28px;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   PRODUCTION VISUAL FIX (dirección, 26-08-2026)
   1) Micro-trust del hero: iconografía semántica y filas alineadas.
   2) Topbar en móvil: sin carril, sin carrusel y sin scroll horizontal.
   3) Pulse del CTA de topbar: paridad literal con captación, aislado.
   4) Sección «Las 3 formas de monetizar» (entre los 7 módulos y las rutas).
   5) Sección «Las 3 dudas» (justo detrás de la garantía).
   Todo lo nuevo lleva prefijo propio (`programa-models-*`,
   `programa-objections-*`, `.programa-topbar-cta`): cero nombres globales.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1 · MICRO-TRUST · ritmo y alineación de las tres señales ───────────────
   Las tres filas deben leerse como una rejilla, no como tres líneas sueltas:
   el sello manda la altura (`min-height` = caja del icono), así que aunque
   una señal creciera a dos líneas el conjunto sigue alineado. El heredado
   `white-space: nowrap` venía del layout HORIZONTAL antiguo: en filas obliga
   a la señal más larga («Solo 35 plazas disponibles») a desbordar la ficha
   en vez de partir. Se devuelve a `normal` con partición equilibrada. */
.sales-page .s2-card-list.programa-trust li {
  align-items: center;
  min-height: 28px;
  white-space: normal;
  text-wrap: pretty;
}

@media (width <= 767px) {
  .sales-page .s2-card-list.programa-trust li {
    min-height: 26px;
  }
}

/* ── 2 · TOPBAR EN MÓVIL · dos filas fijas, cero carril ─────────────────────
   Hasta aquí, por debajo de 1200px el contenido viajaba en un track que
   auto-avanzaba (`paa-rotacion`) y, más abajo aún, en un carril desplazable
   con máscara. En un teléfono eso deja la mitad de la barra fuera de vista y
   obliga a perseguir dos objetivos accionables. Dirección lo retira EN MÓVIL:
   fila 1 = countdown centrado; fila 2 = los dos botones. Nada rota, nada se
   desplaza y no queda overflow horizontal.
   Qué se ve en ≤767px: countdown, «Resolver mis dudas» y «Quiero mi plaza».
   Qué cede su sitio: «Fashion Lab», «Método ADN de Marca», los divisores y
   —desde el 25-08-2026— la pregunta «¿Tienes alguna duda?». Todos siguen en
   el DOM y vuelven a verse a partir de 768px; el texto accesible de la barra
   sigue nombrando las dos acciones para quien no ve la composición.
   El método se oculta por su SLOT (`:first-child`), nunca por `.paa-metodo`:
   su firma tipográfica y su `display: block` de ≥768px quedan intactos. */
@media (width <= 767px) {
  .sales-page .programa-announcement .announcement-inner {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    column-gap: 0;
    row-gap: 6px;
    padding-block: calc(6px + env(safe-area-inset-top)) 8px;
  }

  /* Fila 1 · el dato. Siempre visible, siempre primero. Con la fila entera
     para él, el reloj recupera dos cosas que había cedido al rail: el icono
     de calendario —que es lo que dice que ese número es una fecha límite y
     no una cifra suelta— y un cuerpo legible de verdad. */
  .sales-page .programa-announcement .paa-reloj {
    justify-content: center;
  }

  .sales-page .programa-announcement .paa-reloj svg {
    display: block;
  }

  .sales-page .programa-announcement .paa-reloj .programa-announcement-clock {
    min-height: 26px;
    padding: 0 10px;
    font-size: 0.66rem;
  }

  /* Piezas que no viajan a móvil: firma, método y divisores. */
  .sales-page .programa-announcement .paa-divisor,
  .sales-page .programa-announcement .paa-fijo,
  .sales-page .programa-announcement .paa-track > .paa-slot:first-child {
    display: none;
  }

  /* Fila 2 · el carril deja de serlo: ni máscara, ni scroll, ni animación. */
  .sales-page .programa-announcement .paa-rail {
    width: 100%;
    overflow: visible;
    mask-image: none;
    padding-block: 0;
    scroll-snap-type: none;
  }

  .sales-page .programa-announcement .paa-track {
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    column-gap: 8px;
    row-gap: 6px;
    animation: none;
    transform: none;
    will-change: auto;
  }

  /* Si algún día un botón no cupiera junto al otro, el `wrap` lo baja a su
     propia línea: preferimos una fila más a un texto cortado o a overflow. */
  .sales-page .programa-announcement .paa-slot {
    flex: 0 1 auto;
    justify-content: center;
    scroll-snap-align: none;
  }

  .sales-page .programa-announcement .paa-slot--cta {
    margin-left: 0;
  }

  /* Área táctil real: 44px de alto en las dos acciones (WCAG 2.5.5). Lo que
     se compacta es la tipografía y el acolchado lateral, nunca el alto. */
  .sales-page .programa-announcement .programa-whatsapp-cta--topbar {
    min-height: 44px;
    padding: 0 13px;
    gap: 8px;
    font-size: 0.58rem;
    letter-spacing: 0.06em;
  }

  .sales-page .programa-announcement .programa-whatsapp-cta--topbar .programa-whatsapp-ico {
    width: 15px;
    height: 15px;
  }

  .sales-page .programa-announcement .announcement-cta {
    min-height: 44px;
    padding: 0 14px;
    font-size: 0.62rem;
    letter-spacing: 0.07em;
  }
}

/* Franja estrecha (360–430): el countdown y los rótulos ceden un punto más.
   La flecha decorativa del botón verde ya se retira en el bloque anterior. */
@media (width <= 430px) {
  .sales-page .programa-announcement .programa-whatsapp-cta--topbar {
    padding: 0 11px;
    font-size: 0.55rem;
    letter-spacing: 0.05em;
  }

  .sales-page .programa-announcement .announcement-cta {
    padding: 0 12px;
    font-size: 0.58rem;
    letter-spacing: 0.06em;
  }
}

/* ── 3 · PULSE DEL CTA DE TOPBAR · paridad literal con captación ────────────
   Auditado sobre `public/styles/landing-production-source.css`: el CTA de
   `/` y `/ads` respira con DOS animaciones simultáneas de 2,3s —
   `cta-double-pulse` sobre el botón (escala 1 → 0,99 → 1,04 → 1,006 → 1 con
   halo `0 0 0 8px` + `0 0 32px` de `--cta-attention-color` en el pico) y
   `cta-idle-glint` sobre su `::before` (barrido diagonal de
   `background-position` con la opacidad subiendo a 0,68 y volviendo a 0)—
   y las mismas cinco pausas de interacción (`:hover`, `:focus-visible`,
   `:active`, `:disabled` y `[data-cta-interacting="true"]`).
   Aquí se RECREA, no se reutiliza: keyframes propias y clase propia. Así
   /programa no depende del nombre de una keyframe declarada en otra hoja, y
   el CSS de captación no se toca ni una línea.
   Los tokens se redeclaran con los MISMOS valores de `.announcement button`
   y con especificidad suficiente para ganar: el efecto queda autocontenido.
   El arbitraje por `:has()` sigue siendo más específico (0,11,0 frente a
   0,8,0), así que sigue silenciando este pulse cuando respira otro CTA. */
@keyframes programa-cta-pulse {
  0%, 100% {
    scale: 1;
    box-shadow: var(--cta-rest-shadow);
  }

  12% {
    scale: 0.99;
    box-shadow: var(--cta-rest-shadow);
  }

  50% {
    scale: 1.04;
    box-shadow:
      var(--cta-rest-shadow),
      0 0 0 8px var(--cta-attention-color),
      0 0 32px var(--cta-attention-color);
  }

  78% {
    scale: 1.006;
    box-shadow: var(--cta-rest-shadow), 0 0 0 3px var(--cta-attention-color);
  }

  92% {
    scale: 1;
    box-shadow: var(--cta-rest-shadow);
  }
}

@keyframes programa-cta-glint {
  0%, 100% {
    background-position: center, 145% center;
    opacity: 0;
    transform: scale(0.98);
  }

  18% {
    background-position: center, 125% center;
    opacity: 0.08;
  }

  42% {
    background-position: center, 64% center;
    opacity: 0.28;
  }

  58% {
    background-position: center, -18% center;
    opacity: 0.68;
    transform: scale(1);
  }

  76% {
    background-position: center, -92% center;
    opacity: 0;
    transform: scale(1);
  }

  90% {
    background-position: center, -110% center;
    opacity: 0;
    transform: scale(0.99);
  }
}

.sales-page .programa-topbar-cta[data-wow-cta] {
  --cta-attention-color: rgba(208, 29, 63, 0.2);
  --cta-glint: rgba(208, 29, 63, 0.25);
  --cta-rest-shadow:
    0 10px 24px rgba(51, 0, 10, 0.2),
    0 0 0 1px rgba(245, 241, 232, 0.16),
    inset 0 0 0 1px rgba(208, 29, 63, 0.08);
}

.sales-page .programa-topbar-cta[data-wow-cta]:not([data-cta-interacting="true"]):not(:hover):not(:focus-visible):not(:active):not(:disabled) {
  animation: programa-cta-pulse 2.3s ease-in-out infinite;
}

.sales-page .programa-topbar-cta[data-wow-cta]:not([data-cta-interacting="true"]):not(:hover):not(:focus-visible):not(:active):not(:disabled)::before {
  animation: programa-cta-glint 2.3s var(--ease-out) infinite;
}

/* Obligatorio: sin movimiento, el CTA se queda quieto. El botón conserva su
   presencia estática (borde, relleno y sombra en reposo) — lo que se apaga
   es el latido, no la jerarquía. */
@media (prefers-reduced-motion: reduce) {
  .sales-page .programa-topbar-cta[data-wow-cta],
  .sales-page .programa-topbar-cta[data-wow-cta]::before {
    animation: none !important;
  }
}

/* ── 4 · LAS 3 FORMAS DE MONETIZAR ─────────────────────────────────────────
   Capítulo nuevo entre los 7 módulos y las dos rutas. No estrena sistema:
   toma el plano noir con radiales wine, la cabecera centrada, el numeral
   fantasma en Bodoni itálica, el rótulo versalita champán y la caja de
   tarjeta (hairline dorada + relleno noir) que ya usan los capítulos 05, 07
   y 10. Lo único propio es la NARRATIVA: tres etapas encadenadas, no un
   comparador de planes. Por eso 01 y 02 van en tono neutro —son etapas
   válidas, no errores— y solo 03 recibe borde dorado, profundidad y una
   iluminación superior contenida. Ni sello «recomendado», ni badge, ni
   tachado, ni precio: nada que convierta la evolución en un pricing table. */
.programa-models {
  position: relative;
  overflow: clip;
  background:
    radial-gradient(44% 38% at 50% 0%, rgba(200, 164, 104, 0.055), transparent 68%),
    radial-gradient(32% 34% at 5% 96%, rgba(96, 20, 40, 0.13), transparent 72%),
    linear-gradient(180deg, #0d0a0b, #130e10);
}

.programa-models-head {
  max-width: 780px;
  margin: 0 auto clamp(40px, 4.6vw, 64px);
  text-align: center;
}

.sales-main .programa-models-kicker {
  display: block;
  margin: 0 0 clamp(14px, 1.6vw, 20px);
  color: rgba(232, 205, 158, 0.9);
  font-size: 0.68rem;
  letter-spacing: 0.24em;
}

.sales-main .programa-models-head h2 {
  max-width: 19ch;
  margin: 0 auto;
  font-size: clamp(2.1rem, 3.6vw, 3.4rem);
  line-height: 1.05;
  text-wrap: balance;
}

/* Ancho de lectura honesto: por encima de ~60 caracteres por línea el
   subtítulo deja de leerse de un vistazo, que es justo su función. */
.sales-main .programa-models-sub {
  max-width: 52ch;
  margin: clamp(16px, 1.8vw, 22px) auto 0;
  color: var(--text-on-dark-muted);
  line-height: 1.65;
  text-wrap: pretty;
}

.sales-main .programa-models-sub b {
  color: rgba(245, 241, 232, 0.96);
  font-weight: 600;
}

.programa-models-grid {
  --programa-models-gap: clamp(16px, 1.9vw, 26px);
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--programa-models-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.programa-models-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(26px, 2.8vw, 38px) clamp(22px, 2.4vw, 32px) clamp(28px, 3vw, 40px);
  border: 1px solid rgba(200, 164, 104, 0.22);
  background:
    linear-gradient(180deg, rgba(200, 164, 104, 0.04), transparent 42%),
    rgba(17, 12, 14, 0.72);
}

/* Numeral editorial: la misma pieza que marca las cards del capítulo 05, con
   el mismo peso fantasma. Es orientación de lectura, no decoración suelta. */
.programa-models-num {
  position: absolute;
  top: 2px;
  right: 14px;
  font-family: var(--font-editorial), Georgia, serif;
  font-style: italic;
  font-size: clamp(3.2rem, 4.6vw, 4.6rem);
  line-height: 1;
  color: rgba(200, 164, 104, 0.13);
  pointer-events: none;
}

.sales-main .programa-models-tag {
  margin: 0 0 clamp(10px, 1.2vw, 14px);
  color: rgba(200, 164, 104, 0.92);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.programa-models-title {
  margin: 0 0 clamp(12px, 1.4vw, 16px);
  font-family: var(--font-editorial), Georgia, serif;
  font-size: clamp(1.35rem, 1.8vw, 1.72rem);
  font-weight: 500;
  line-height: 1.16;
  color: var(--ivory);
}

.sales-main .programa-models-body {
  margin: 0;
  max-width: 44ch;
  font-size: 0.94rem;
  line-height: 1.66;
  color: var(--text-on-dark-muted);
  text-wrap: pretty;
}

/* La frase que carga el modelo sube de peso y un punto de cuerpo — nunca
   más: por encima de ~1,05em deja de ser énfasis y pasa a ser otro nivel. */
.sales-main .programa-models-body b {
  color: rgba(245, 241, 232, 0.96);
  font-weight: 600;
  font-size: 1.03em;
}

/* MODELO 3 · el destino de la evolución. Borde dorado, profundidad e
   iluminación superior; el color de marca entra SOLO aquí y solo en la
   frase que nombra el recorrido. */
.programa-models-card--sistema {
  border-color: rgba(200, 164, 104, 0.55);
  background:
    radial-gradient(76% 88% at 50% 0%, rgba(105, 21, 38, 0.26), transparent 70%),
    linear-gradient(180deg, rgba(200, 164, 104, 0.085), transparent 46%),
    rgba(20, 13, 16, 0.9);
  box-shadow:
    0 24px 52px rgba(0, 0, 0, 0.38),
    inset 0 1px 0 rgba(245, 241, 232, 0.07);
}

.programa-models-card--sistema::before {
  content: "";
  position: absolute;
  inset: -1px -1px auto;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(232, 205, 158, 0.85), transparent);
  pointer-events: none;
}

.programa-models-card--sistema .programa-models-num {
  color: rgba(232, 205, 158, 0.2);
}

.sales-main .programa-models-card--sistema .programa-models-tag {
  color: #ead0a2;
}

.sales-main .programa-models-card--sistema .programa-models-body b {
  color: #ead0a2;
}

/* Flechas de progresión: decorativas y en CSS, para que el DOM siga siendo
   una lista de tres. Solo donde hay tres columnas reales. */
@media (width >= 1040px) {
  .programa-models-card:not(:last-child)::after {
    content: "→";
    position: absolute;
    top: 50%;
    right: calc(var(--programa-models-gap) / -2);
    translate: 50% -50%;
    color: rgba(200, 164, 104, 0.42);
    font-size: 1.05rem;
    line-height: 1;
    pointer-events: none;
  }
}

/* Tablet: dos etapas en paralelo y el sistema a todo el ancho, que es
   exactamente lo que cuenta la sección. El mismo patrón que ya usa el
   capítulo 05 con su quinta card. */
@media (width >= 620px) and (width <= 1039px) {
  .programa-models-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .programa-models-card--sistema {
    grid-column: 1 / -1;
  }

  .sales-main .programa-models-card--sistema .programa-models-body {
    max-width: 56ch;
  }
}

@media (width <= 619px) {
  .programa-models-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .programa-models-card {
    padding: clamp(22px, 5.4vw, 28px) clamp(18px, 4.6vw, 24px) clamp(24px, 5.6vw, 30px);
  }

  .programa-models-num {
    font-size: clamp(2.6rem, 12vw, 3.4rem);
  }

  .sales-main .programa-models-body {
    max-width: none;
  }
}

/* Hover sutil, solo con puntero fino: el borde respira y la tarjeta sube
   3px. Nada de sombras nuevas ni de escalas. */
@media (hover: hover) and (pointer: fine) {
  .programa-models-card {
    transition: border-color 260ms var(--ease-out), translate 260ms var(--ease-out);
  }

  .programa-models-card:hover {
    border-color: rgba(200, 164, 104, 0.44);
    translate: 0 -3px;
  }

  .programa-models-card--sistema:hover {
    border-color: rgba(232, 205, 158, 0.78);
  }
}

/* Entrada escalonada sobre el sistema `data-reveal` existente (opacidad +
   translate, nada más). Misma especificidad que la regla base y posterior
   en la cascada, así que el retardo se aplica sin tocar el efecto. */
html[data-reveal-ready] .programa-models-card:nth-child(2) {
  transition-delay: 0.09s;
}

html[data-reveal-ready] .programa-models-card:nth-child(3) {
  transition-delay: 0.18s;
}

.sales-main .programa-models-cierre {
  max-width: 46ch;
  margin: clamp(34px, 3.8vw, 52px) auto 0;
  padding-top: clamp(24px, 2.6vw, 34px);
  border-top: 1px solid rgba(200, 164, 104, 0.18);
  color: var(--text-on-dark-muted);
  text-align: center;
  text-wrap: balance;
}

.programa-models-ruta {
  display: block;
  margin-bottom: clamp(10px, 1.2vw, 14px);
  font-family: var(--font-editorial), Georgia, serif;
  font-style: italic;
  font-size: clamp(1.28rem, 2.1vw, 1.72rem);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: #ead0a2;
  text-wrap: balance;
}

/* ── 5 · LAS 3 DUDAS ───────────────────────────────────────────────────────
   Jerarquía fija y visible: DUDA (cita en Bodoni itálica, con su numeral) →
   RESPUESTA (sello, el foco de la fila) → ARGUMENTO (lectura). No son tres
   cards genéricas: cada objeción es una fila de expediente con filete de
   entrada carmín→dorado, y las tres se leen en vertical como un mismo
   documento. El canto de color es el único acento nuevo; el resto reutiliza
   la paleta y las cajas de la página. */
.programa-objections {
  position: relative;
  overflow: clip;
  background:
    radial-gradient(44% 36% at 50% 0%, rgba(200, 164, 104, 0.05), transparent 70%),
    radial-gradient(38% 32% at 94% 92%, rgba(96, 20, 40, 0.13), transparent 72%),
    linear-gradient(180deg, #140f11, #100c0e);
}

.programa-objections-head {
  max-width: 780px;
  margin: 0 auto clamp(38px, 4.4vw, 60px);
  text-align: center;
}

.sales-main .programa-objections-kicker {
  display: block;
  margin: 0 0 clamp(14px, 1.6vw, 20px);
  color: rgba(232, 205, 158, 0.9);
  font-size: 0.68rem;
  letter-spacing: 0.24em;
}

.sales-main .programa-objections-head h2 {
  max-width: 18ch;
  margin: 0 auto;
  font-size: clamp(2.1rem, 3.6vw, 3.4rem);
  line-height: 1.05;
  text-wrap: balance;
}

.programa-objections-list {
  display: grid;
  gap: clamp(14px, 1.8vw, 22px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.programa-objections-item {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(20px, 3vw, 48px);
  align-items: start;
  padding: clamp(24px, 2.8vw, 36px) clamp(22px, 2.6vw, 34px) clamp(26px, 2.9vw, 38px) clamp(26px, 3vw, 42px);
  border: 1px solid rgba(200, 164, 104, 0.16);
  background:
    linear-gradient(180deg, rgba(200, 164, 104, 0.035), transparent 42%),
    rgba(16, 11, 13, 0.66);
}

/* Filete de entrada: carmín arriba, dorado abajo. Marca dónde empieza cada
   objeción sin abrir una cuarta caja. */
.programa-objections-item::before {
  content: "";
  position: absolute;
  inset: -1px auto -1px -1px;
  width: 2px;
  background: linear-gradient(180deg, rgba(208, 29, 63, 0.78), rgba(200, 164, 104, 0.42));
  pointer-events: none;
}

.programa-objections-duda {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(12px, 1.4vw, 18px);
  align-items: start;
  min-width: 0;
}

.programa-objections-num {
  font-family: var(--font-editorial), Georgia, serif;
  font-style: italic;
  font-size: clamp(1.45rem, 2.2vw, 2rem);
  line-height: 1.05;
  color: rgba(200, 164, 104, 0.42);
}

.sales-main .programa-objections-pregunta {
  margin: 0;
  font-family: var(--font-editorial), Georgia, serif;
  font-style: italic;
  font-size: clamp(1.28rem, 2vw, 1.72rem);
  font-weight: 500;
  line-height: 1.24;
  letter-spacing: -0.01em;
  color: rgba(245, 241, 232, 0.92);
  text-wrap: pretty;
}

.programa-objections-resp {
  min-width: 0;
}

/* El sello es el foco de la fila: versalitas de máximo peso sobre un lavado
   wine con hairline dorada. Esquina viva, no pastilla — es un timbre de
   documento, no una etiqueta de producto. */
.sales-main .programa-objections-sello {
  width: fit-content;
  margin: 0 0 clamp(12px, 1.4vw, 17px);
  padding: 7px 14px;
  border: 1px solid rgba(200, 164, 104, 0.5);
  background: linear-gradient(180deg, rgba(105, 21, 38, 0.36), rgba(105, 21, 38, 0.14));
  color: #f0dcb4;
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  white-space: nowrap;
}

.sales-main .programa-objections-body {
  margin: 0;
  max-width: 54ch;
  font-size: 0.95rem;
  line-height: 1.68;
  color: var(--text-on-dark-muted);
  text-wrap: pretty;
}

.sales-main .programa-objections-body b {
  color: rgba(245, 241, 232, 0.96);
  font-weight: 600;
  font-size: 1.03em;
}

@media (hover: hover) and (pointer: fine) {
  .programa-objections-item {
    transition: border-color 260ms var(--ease-out), background-color 260ms var(--ease-out);
  }

  .programa-objections-item:hover {
    border-color: rgba(200, 164, 104, 0.34);
    background-color: rgba(22, 15, 18, 0.72);
  }
}

html[data-reveal-ready] .programa-objections-item:nth-child(2) {
  transition-delay: 0.08s;
}

html[data-reveal-ready] .programa-objections-item:nth-child(3) {
  transition-delay: 0.16s;
}

/* Por debajo de 900px la fila se apila: duda arriba, sello y argumento
   debajo. El sello no se estira nunca — sigue siendo un timbre. */
@media (width <= 899px) {
  .programa-objections-item {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(16px, 3.2vw, 22px);
    padding-left: clamp(20px, 5vw, 28px);
  }
}

@media (width <= 619px) {
  .programa-objections-item {
    padding: clamp(20px, 5vw, 26px) clamp(18px, 4.6vw, 22px) clamp(22px, 5.2vw, 28px) clamp(20px, 5vw, 26px);
  }

  .programa-objections-duda {
    gap: 12px;
  }

  .sales-main .programa-objections-body {
    max-width: none;
    font-size: 0.92rem;
  }

  .sales-main .programa-objections-sello {
    padding: 6px 12px;
    font-size: 0.63rem;
    letter-spacing: 0.16em;
  }
}

/* ══ P1 · PULSE VISIBLE DEL CTA DE TOPBAR EN MÓVIL (26-08-2026) ══════════
   Dirección cierra el P1 abierto en el receipt anterior: el pulse estaba bien
   construido pero NO llegaba a verse. Dos mecanismos lo silenciaban a la vez:

     1 · el arbitraje `:has()` de «una sola fuente animada» — arriba respira el
         CTA del hero (prioridad 4) y, al bajar, el flotante;
     2 · `data-quiet="true"`, que `programa.ts` pone en el CTA superior
         mientras el hero está en pantalla.

   La excepción se limita a MÓVIL y al CTA de la topbar de Programa. Ni el hero
   ni el flotante pierden su efecto, el arbitraje global sigue vigente para el
   resto de la aplicación, y en escritorio el comportamiento no cambia. En una
   barra fija de móvil el CTA es la única llamada permanente en pantalla, así
   que aquí la regla de «una sola fuente» deja de tener sentido: la barra y el
   contenido no compiten, se turnan por scroll.

   Especificidad: 0,11,0 — un escalón por encima del arbitraje (0,10,0), sin
   `!important`, para que hover, foco, activo e interacción sigan ganando. */
@media (max-width: 767px) {
  .sales-page .programa-announcement .programa-topbar-cta[data-wow-cta][data-cta-attention][data-cta-priority]:not([data-cta-interacting='true']):not(:hover):not(:focus-visible):not(:active):not(:disabled) {
    animation: programa-cta-pulse 2.3s ease-in-out infinite;
  }

  .sales-page .programa-announcement .programa-topbar-cta[data-wow-cta][data-cta-attention][data-cta-priority]:not([data-cta-interacting='true']):not(:hover):not(:focus-visible):not(:active):not(:disabled)::before {
    animation: programa-cta-glint 2.3s var(--ease-out) infinite;
  }

  /* `data-quiet` apaga la presencia del botón mientras el hero está a la vista.
     En móvil se le devuelven los tokens del latido para que el halo tenga con
     qué dibujarse; el resto de su tratamiento en reposo no se toca. */
  .sales-page .programa-announcement .programa-topbar-cta[data-quiet='true'] {
    --cta-attention-color: rgba(208, 29, 63, .34);
    --cta-glint: rgba(255, 255, 255, .38);
  }

  /* Sin movimiento, quieto. Va después para ganar por orden a igual peso. */
  @media (prefers-reduced-motion: reduce) {
    .sales-page .programa-announcement .programa-topbar-cta[data-wow-cta][data-cta-attention][data-cta-priority],
    .sales-page .programa-announcement .programa-topbar-cta[data-wow-cta][data-cta-attention][data-cta-priority]::before {
      animation: none !important;
    }
  }
}