/* ================================================================
   THE SALES LEAK FINDER · CARTA V3 (28-oct-2026, frenos S)
   Va después de carta28.css. Solo lo nuevo de la v3: marcadores de video,
   caja con la captura, las dos dudas bajo el botón, la sección del coach
   y la etiqueta de cifras de ejemplo. Mismo sistema: esquinas rectas, un acento verde.
   ================================================================ */

/* Hero (28-oct, Martin): caras de clientes sin caja, luego para quién, titular y subtítulo */
#wms-hero .wms-proofbar { border: 0; background: none; padding: 0; margin: 0 auto 26px; }
#wms-hero .wms-proofbar-img { width: 176px; }
#wms-hero .wms-callout { margin-bottom: 18px; }
#wms-hero .wms-hero-sub { margin-bottom: 0; }
/* 28-oct (Martin): titular un poco más grande y sin la línea entre el hero y el video */
#wms-hero { border-bottom: 0; }
/* El espacio bajo el subtítulo iguala al de arriba (Martin, 28-oct): el hero no lleva relleno abajo; lo pone #wms-zone */
#wms-hero .wms-hero-in { padding-bottom: 0; }
#wms-zone { padding-top: 72px; }
#wms-hero h1 { font-size: 60px; }
@media (max-width: 980px) { #wms-hero h1 { font-size: 50px; } }
/* 28-oct (Martin): velo oscuro entre la cuadrícula y el texto; nada distrae detrás del titular */
#wms-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 60% 78% at 50% 50%, var(--mm-black) 62%, rgba(10, 10, 11, 0) 100%), linear-gradient(to bottom, rgba(10, 10, 11, 0) 65%, var(--mm-black) 100%);
    pointer-events: none;
    z-index: 0;
}
@media (max-width: 600px) {
    #wms-zone { padding-top: 44px; }
    #wms-hero h1 { font-size: 35px; }
    #wms-hero::after { background: radial-gradient(ellipse 95% 80% at 50% 50%, var(--mm-black) 70%, rgba(10, 10, 11, 0) 100%), linear-gradient(to bottom, rgba(10, 10, 11, 0) 65%, var(--mm-black) 100%); }
    #wms-hero .wms-proofbar { padding: 0; margin-bottom: 20px; }
    #wms-hero .wms-proofbar-img { width: 156px; }
}

/* Marcador de video: 16:9, la tabla del ejemplo de fondo, sin notas internas.
   data-bunny="BIBLIOTECA/VIDEO" lo cambia por el reproductor (script en index.html). */
.wms-video { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--mm-black); border: 1px solid var(--mm-border); box-shadow: inset 0 3px 0 var(--mm-green); }
.wms-video-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; opacity: 0.12; filter: blur(1px); }
.wms-video-play { position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; display: flex; align-items: center; justify-content: center; padding-left: 4px; border-radius: 50%; background: var(--mm-green); color: var(--mm-black); }
.wms-video-tag { position: absolute; left: 0; right: 0; bottom: 18px; text-align: center; font-family: 'IBM Plex Mono', monospace; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mm-light); }
.wms-video.is-live { box-shadow: none; }
/* Fachada de video (5-nov): la miniatura de Bunny tal cual, con su boton de play; el reproductor se crea al tocar. */
.wms-video.is-facade { box-shadow: none; cursor: pointer; }
.wms-video.is-facade .wms-video-poster { opacity: 1; filter: none; object-position: center; }
.wms-video.is-facade .wms-video-play { width: 48px; height: 48px; margin: -24px 0 0 -24px; padding-left: 3px; background: #EB6A4D; color: #fff; transition: transform 0.15s ease; }
.wms-video.is-facade:hover .wms-video-play { transform: scale(1.08); }
.wms-video.is-facade .wms-video-play svg { width: 20px; height: 20px; }
.wms-video.is-facade .wms-video-tag { display: none; }
.wms-video.is-facade:focus-visible { outline: 3px solid var(--mm-green); outline-offset: 3px; }
.wms-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.wms-video-note { margin: 6px 0 0; text-align: center; font-size: 16px; color: var(--mm-gray); }
#demo + #what-is { margin-top: 56px; }

/* Caja pegajosa: antes del precio, la captura del ejemplo; al revelarse, el paquete y el bloque */
.wms-box:not(.is-preview) .wms-box-fig img { max-height: 250px; object-fit: contain; }

/* Las dos dudas de siempre, justo debajo del primer botón */
.wms-objs { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--mm-border); display: grid; gap: 12px; }
.wms-obj p { margin: 0; font-size: 16px; line-height: 1.45; color: var(--mm-gray); }
.wms-obj .wms-obj-q { margin-bottom: 2px; font-weight: 600; color: var(--mm-white); }

/* 28-oct (Martin): la caja completa mide más que la pantalla de una laptop. En vez de apagar el sticky,
   se pega por abajo: un script le pone top negativo (alto de pantalla menos alto de caja) para que baje
   con la página hasta mostrar su final y ahí se quede. */
@media (min-width: 981px) {
    .wms-box { position: sticky; }
}

/* Sección del coach de $150 al día */
.wms-coach-sec { background: var(--mm-black); border-top: 1px solid var(--mm-border); padding: 96px 0 100px; }
.wms-coach-lead { max-width: 780px; margin: 0 auto; text-align: center; }
.wms-coach-video { max-width: 860px; margin: 40px auto 0; }
.wms-coach-grid { margin-top: 64px; }
.wms-coach-shot { max-width: 760px; margin: 0 auto 56px; }
.wms-coach-page { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 48px; align-items: center; }
.wms-coach-page > .wms-p { grid-column: 1 / -1; max-width: 780px; margin: 0 auto 8px; text-align: center; }
.wms-coach-shot img, .wms-onepage img { display: block; width: 100%; height: auto; border: 1px solid var(--mm-border); }
.wms-coach-shot figcaption, .wms-onepage figcaption { margin-top: 8px; font-size: 14px; color: var(--mm-gray); }
.wms-onepage { margin: 18px 0; }
.wms-onepage-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--mm-border); }
.wms-onepage-list li { padding: 12px 0; border-bottom: 1px solid var(--mm-border-soft); font-size: 18px; line-height: 1.55; color: var(--mm-light); }
.wms-onepage-list strong { color: var(--mm-white); }
.wms-honest { max-width: 720px; margin: 48px auto 0; padding: 18px 22px; border: 1px dashed var(--mm-darkest); text-align: center; font-size: 19px; line-height: 1.55; color: var(--mm-light); }

/* Etiqueta de las cifras del ejemplo, al lado de cada cifra en dólares */
.wms-ex { font-style: italic; font-size: 0.86em; color: var(--mm-gray); }
.wms-paper .wms-ex { color: var(--mm-text-muted); }

@media (max-width: 980px) {
    .wms-coach-page { grid-template-columns: 1fr; max-width: 620px; margin: 0 auto; }
    .wms-coach-shot { margin-bottom: 40px; }
}
@media (max-width: 600px) {
    .wms-coach-sec { padding: 64px 0 72px; }
    .wms-video-play { width: 60px; height: 60px; margin: -30px 0 0 -30px; }
    .wms-video-tag { bottom: 10px; font-size: 12px; }
    .wms-honest { font-size: 18px; padding: 16px; }
    .wms-onepage-list li { font-size: 17px; }
}

/* La herramienta va a lo ancho (30-oct): 1 + 6 tarjetas, los bonos en pares */
.wms-inc-card.is-wide { grid-column: 1 / -1; grid-template-columns: 300px minmax(0, 1fr); column-gap: 40px; padding: 26px 40px 26px 30px; }
.wms-inc-card.is-wide img { max-height: 210px; }
.wms-inc-card.is-wide .wms-inc-h { font-size: 32px; }
.wms-inc-card.is-wide .wms-inc-p { max-width: 620px; font-size: 18px; }
@media (max-width: 600px) {
    .wms-inc-card.is-wide { grid-template-columns: 96px minmax(0, 1fr); column-gap: 16px; padding: 18px 16px 18px 12px; }
    .wms-inc-card.is-wide .wms-inc-h { font-size: 22px; }
    .wms-inc-card.is-wide .wms-inc-p { font-size: 16px; }
}

/* Siete tarjetas: The Fix List (opcional) va sola y centrada en la última fila */
@media (min-width: 981px) {
    .wms-inc-card.is-addon { grid-column: 1 / -1; justify-self: center; width: calc(50% - 10px); }
}

/* "What you get" sobre papel: las negritas en tinta oscura (antes eran blancas sobre blanco) */
.wms-checks.dark strong { color: var(--mm-text-light); }


/* ===== 28-oct (Martin): la caja del CTA en fondo claro, con tarjetas y pago seguro visible ===== */
#caja { background: var(--wms-paper-card); border-color: var(--mm-border-light); box-shadow: inset 0 3px 0 var(--mm-green), 0 18px 44px rgba(0, 0, 0, 0.35); }
#caja .wms-box-tag { color: var(--wms-green-text-light); }
#caja .wms-box-title { color: var(--mm-text-light); }
#caja .wms-box-sub { color: var(--mm-text-medium); }
#caja .wms-box-list li { color: var(--mm-text-medium); }
#caja .wms-box-list li::before { color: var(--wms-green-text-light); }
#caja .wms-box-list strong { color: var(--mm-text-light); }
#caja .wms-see { color: var(--mm-text-light); border-color: var(--wms-green-text-light); }
#caja .wms-see:hover { background: rgba(4, 120, 87, 0.06); }
#caja .wms-bb-body { border-top-color: var(--mm-border-light); }
#caja .wms-bb-price { color: #52525B; }
#caja .wms-bb-price strong { color: var(--mm-text-light); }
#caja .wms-guar { color: var(--mm-text-medium); }
#caja .wms-bb-add { border-top-color: var(--mm-border-light); }
#caja .wms-bb-add p { color: var(--mm-text-medium); }
#caja .wms-bb-add strong { color: var(--mm-text-light); }
#caja .wms-objs { border-top-color: var(--mm-border-light); }
#caja .wms-obj p { color: var(--mm-text-medium); }
#caja .wms-obj .wms-obj-q { color: var(--mm-text-light); }
.wms-pay { margin-top: 16px; padding: 14px 14px 12px; background: #F4F4F5; border: 1px solid var(--mm-border-light); text-align: center; }
.wms-pay-secure { margin: 0 0 10px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px; font-size: 15px; line-height: 1.4; color: var(--mm-text-medium); }
.wms-pay-secure svg { color: var(--wms-green-text-light); flex: none; }
.wms-pay-secure strong { color: var(--mm-text-light); font-weight: 600; }
.wms-pay-secure span { flex-basis: 100%; }
.wms-pay-logos { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px; }
.wms-pay-card { width: 40px; height: 26px; display: block; }
.wms-pay-stripe { margin-left: 6px; padding: 4px 8px; border: 1px solid var(--mm-border-light); border-radius: 4px; background: #fff; font-size: 12px; line-height: 1; color: #52525B; white-space: nowrap; }
.wms-pay-stripe b { font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight: 700; letter-spacing: -0.02em; color: #635BFF; }
.wms-pay-note { margin: 8px 0 0; font-size: 13px; color: #52525B; }

/* 28-oct (Martin): la caja se veía apretada. Más aire entre bloques y el mockup más grande.
   Escritorio: mockup a 250px de alto para que la caja no crezca de más. Móvil: el mockup a todo el ancho y todo apilado. */
#caja { padding: 24px 28px 26px; }
#caja .wms-box-fig { margin: 0 -8px 12px; }
#caja .wms-box-title { margin-top: 4px; }
#caja .wms-box-sub { margin-bottom: 18px; }
#caja .wms-bb-body { padding-top: 18px; }
#caja .wms-bb-price { margin-bottom: 18px; }
#caja .wms-bb-guar { margin-top: 20px; }
#caja .wms-bb-add { margin-top: 20px; padding-top: 18px; }
#caja .wms-pay { margin-top: 20px; }
#caja .wms-objs { margin-top: 20px; padding-top: 18px; gap: 16px; }
@media (max-width: 980px) {
    #caja .wms-box-fig { margin: 0 -4px 14px; }
    #caja:not(.is-preview) .wms-box-fig img { max-height: none; }
}
@media (max-width: 600px) {
    #caja { padding: 22px 18px 22px; }
}

/* 28-oct (Martin): la captura de la herramienta bajo "What is", donde sí se lee */
.wms-what-shot { margin: 28px 0 0; }
.wms-what-shot img { display: block; width: 100%; height: auto; border: 1px solid var(--mm-border); box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45); }
.wms-what-shot figcaption { margin-top: 10px; font-size: 14px; color: var(--mm-gray); }

/* 28-oct (Martin): la sección del VSL se distingue de la de arriba. Fondo gris carbón con un brillo verde detrás del video;
   "How it works" pasa a negro para que los fondos sigan alternando (negro, carbón, negro, carbón). */
/* 28-oct (Martin): el cambio de fondo entra y sale con degradado, sin corte duro */
.wms-coach-sec {
    background:
        radial-gradient(ellipse 70% 340px at 50% 360px, rgba(16, 185, 129, 0.09), rgba(16, 185, 129, 0) 100%),
        linear-gradient(to bottom, var(--mm-black) 0, var(--mm-black-soft) 280px, var(--mm-black-soft) calc(100% - 280px), var(--mm-black) 100%);
    border-top: 0;
}
.wms-how-sec { border-top: 0; }
/* Titular del VSL más grande (Martin, 28-oct) */
#coach .wms-h2 { font-size: 54px; }
@media (max-width: 600px) { #coach .wms-h2 { font-size: 36px; } }
.wms-how-sec { background: var(--mm-black); }

/* 28-oct (Martin): el resumen de una página. Escritorio: imagen a la izquierda; subtítulo y lista a la derecha.
   Móvil: subtítulo, imagen y lista, en ese orden. */
.wms-coach-page { grid-template-areas: "fig sub" "fig list"; grid-template-rows: auto auto; row-gap: 18px; }
.wms-coach-page > .wms-onepage { grid-area: fig; align-self: center; margin: 0; }
.wms-coach-page-h { grid-area: sub; align-self: end; margin: 0; font-family: 'IBM Plex Sans', sans-serif; font-weight: 700; font-size: 21px; line-height: 1.45; color: var(--mm-white); }
.wms-coach-page > .wms-onepage-list { grid-area: list; align-self: start; }
@media (max-width: 980px) {
    .wms-coach-page { grid-template-areas: "sub" "fig" "list"; grid-template-columns: 1fr; row-gap: 20px; }
    .wms-coach-page-h { font-size: 20px; text-align: center; }
}
/* 28-oct (Martin): más aire arriba y abajo del resumen de una página */
.wms-coach-grid { margin-top: 104px; }
#coach #bb-coach { margin-top: 96px; }
@media (max-width: 600px) {
    .wms-coach-grid { margin-top: 64px; }
    #coach #bb-coach { margin-top: 64px; }
}
.wms-coach-page-h .wms-hl { color: var(--mm-green); }
/* 28-oct (Martin): la nota de "no case studies" va sin recuadro, debajo de la caja de compra, centrada y chica */
#coach .wms-honest { max-width: 560px; margin: 22px auto 0; padding: 0; border: 0; font-size: 15px; line-height: 1.5; color: var(--mm-gray); }
@media (max-width: 600px) { #coach .wms-honest { margin-top: 18px; font-size: 14px; padding: 0; } }

/* 28-oct (Martin): How it works. Titular más grande y un brillo rojo detrás del camino de siempre y verde detrás del nuevo.
   Los brillos se apagan antes de las orillas de arriba y abajo para que no marquen línea con las secciones vecinas. */
#wms-how .wms-h2 { font-size: 54px; }
.wms-how-sec {
    background:
        radial-gradient(ellipse 48% 55% at 0 58%, rgba(239, 68, 68, 0.2), rgba(239, 68, 68, 0) 100%),
        radial-gradient(ellipse 48% 55% at 100% 58%, rgba(16, 185, 129, 0.18), rgba(16, 185, 129, 0) 100%),
        var(--mm-black);
}
@media (max-width: 980px) {
    /* En móvil las tarjetas van una sobre otra: rojo arriba, verde abajo */
    .wms-how-sec {
        background:
            radial-gradient(ellipse 90% 28% at 0 32%, rgba(239, 68, 68, 0.2), rgba(239, 68, 68, 0) 100%),
            radial-gradient(ellipse 90% 28% at 100% 72%, rgba(16, 185, 129, 0.18), rgba(16, 185, 129, 0) 100%),
            var(--mm-black);
    }
}
@media (max-width: 600px) { #wms-how .wms-h2 { font-size: 36px; } }

/* 28-oct (Martin): "Ready already? Here's everything included" en fondo claro, con titular grande.
   Las tarjetas y el bloque de compra pasan a tinta oscura sobre papel. */
.wms-inc-light { background: var(--wms-paper); border-top: 0; border-bottom: 0; }
.wms-inc-light .wms-h2 { font-size: 54px; color: var(--mm-text-light); }
.wms-inc-light .wms-inc-card { background: var(--wms-paper-card); border-color: var(--mm-border-light); box-shadow: 0 6px 18px rgba(10, 10, 11, 0.06); }
.wms-inc-light .wms-inc-tag { color: var(--wms-green-text-light); }
.wms-inc-light .wms-inc-h { color: var(--mm-text-light); }
.wms-inc-light .wms-inc-p, .wms-inc-light .wms-inc-list li { color: var(--mm-text-medium); }
.wms-inc-light .wms-inc-list li::before { color: var(--wms-green-text-light); }
.wms-inc-light .wms-bb { background: var(--wms-paper-card); border-color: var(--mm-border-light); box-shadow: inset 0 3px 0 var(--mm-green), 0 18px 40px rgba(10, 10, 11, 0.10); }
.wms-inc-light .wms-bb-fig figcaption { color: #52525B; }
.wms-inc-light .wms-bb-name { color: var(--mm-text-medium); }
.wms-inc-light .wms-bb-name strong { color: var(--mm-text-light); }
.wms-inc-light .wms-bb-price { color: #52525B; }
.wms-inc-light .wms-bb-price strong { color: var(--mm-text-light); }
.wms-inc-light .wms-guar { color: var(--mm-text-medium); }
.wms-inc-light .wms-box-secure { color: #52525B; }
@media (max-width: 600px) { .wms-inc-light .wms-h2 { font-size: 36px; } }

/* 28-oct (Martin): la apertura de la historia lleva la cuadrícula como el hero, con la foto de la pared
   debajo, apenas visible, y un velo más oscuro en el centro para que el titular se lea. */
#wms-letter-open {
    background-color: var(--mm-black);
    background-image:
        radial-gradient(ellipse 60% 72% at 50% 50%, rgba(10, 10, 11, 0.9) 45%, rgba(10, 10, 11, 0.7) 100%),
        linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        url("img/wms-fondo-pared-v1-1280.webp");
    background-image:
        radial-gradient(ellipse 60% 72% at 50% 50%, rgba(10, 10, 11, 0.9) 45%, rgba(10, 10, 11, 0.7) 100%),
        linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        image-set(url("img/wms-fondo-pared-v1-1280.webp") 1x, url("img/wms-fondo-pared-v1-2400.webp") 2x);
    background-size: auto, 80px 80px, 80px 80px, cover;
    background-position: center, 0 0, 0 0, center;
}
/* Fraunces viene a -0.03em; en tres renglones se apretaba. Un poco más de aire entre letras y renglones. */
#wms-letter-open .wms-letter-h { font-size: 58px; max-width: 1100px; letter-spacing: 0; line-height: 1.16; }
#wms-letter-open .wms-letter-intro { font-size: 21px; }
@media (max-width: 1100px) { #wms-letter-open .wms-letter-h { font-size: 48px; } }
@media (max-width: 600px) {
    #wms-letter-open { background-image:
        radial-gradient(ellipse 95% 75% at 50% 50%, rgba(10, 10, 11, 0.9) 50%, rgba(10, 10, 11, 0.72) 100%),
        linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        image-set(url("img/wms-fondo-pared-v1-1280.webp") 1x, url("img/wms-fondo-pared-v1-2400.webp") 2x); }
    #wms-letter-open .wms-letter-h { font-size: 34px; }
    #wms-letter-open .wms-letter-intro { font-size: 18px; }
}

/* 28-oct (Martin): en "Skeptical? You should be" la foto va a la izquierda y la carta a la derecha (solo en compu) */
@media (min-width: 981px) {
    #skeptical .wms-letter-grid { grid-template-columns: 340px minmax(0, 680px); }
    #skeptical .wms-side-col { order: -1; }
}
@media (min-width: 981px) and (max-width: 1100px) {
    #skeptical .wms-letter-grid { grid-template-columns: 300px minmax(0, 1fr); }
}

/* 28-oct (Martin): "On file, with sources" con titular grande y fondo de cuadrícula gris tipo blueprint,
   con velo claro al centro para que no distraiga del texto ni de las tarjetas. */
.wms-paper #record {
    border-top: 0;
    border-bottom: 0;
    padding: 120px 0 128px;
    background-color: #F4F4F5;
    /* Degradado al papel de las secciones vecinas, arriba y abajo, para que el cambio no se note */
    background-image:
        linear-gradient(to bottom, var(--wms-paper) 0, rgba(250, 250, 249, 0) 160px),
        linear-gradient(to top, var(--wms-paper) 0, rgba(250, 250, 249, 0) 160px),
        radial-gradient(ellipse 62% 70% at 50% 50%, #F4F4F5 40%, rgba(244, 244, 245, 0) 100%),
        linear-gradient(to right, rgba(24, 24, 27, 0.07) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(24, 24, 27, 0.07) 1px, transparent 1px);
    background-size: auto, auto, auto, 80px 80px, 80px 80px;
    background-position: 0 0, 0 0, center, 0 0, 0 0;
}
/* Titular: Fraunces viene a -0.025em y a este tamaño se encimaba; aire entre letras y más espacio abajo */
#record > .mm-wrap > .wms-h2 { font-size: 54px; letter-spacing: 0; margin-bottom: 56px; }
@media (max-width: 600px) {
    .wms-paper #record { padding: 80px 0 88px; background-image:
        linear-gradient(to bottom, var(--wms-paper) 0, rgba(250, 250, 249, 0) 100px),
        linear-gradient(to top, var(--wms-paper) 0, rgba(250, 250, 249, 0) 100px),
        radial-gradient(ellipse 95% 75% at 50% 50%, #F4F4F5 50%, rgba(244, 244, 245, 0) 100%),
        linear-gradient(to right, rgba(24, 24, 27, 0.07) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(24, 24, 27, 0.07) 1px, transparent 1px); }
    #record > .mm-wrap > .wms-h2 { font-size: 36px; margin-bottom: 36px; }
}

/* 28-oct (Martin): tarjetas de casos. Travis a lo ancho (captura a la izquierda, texto a la derecha);
   Carlos y el premio abajo, lado a lado, con imágenes de la misma proporción para que todo quede parejo. */
#record .wms-cases { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
#record .wms-case-card { padding: 16px 16px 24px; }
#record .wms-case-card:not(.wms-case-wide) .wms-case-fig img { aspect-ratio: 8 / 5; object-fit: cover; object-position: center 60%; }
#record .wms-case-wide { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 40px; align-items: center; padding: 28px 32px; }
#record .wms-case-wide .wms-case-fig { grid-column: 1; grid-row: 1 / span 4; margin: 0; }
#record .wms-case-wide > :not(.wms-case-fig) { grid-column: 2; }
#record .wms-case-wide .wms-case-name { margin-top: 0; }
@media (max-width: 980px) {
    #record .wms-cases { grid-template-columns: 1fr; }
    #record .wms-case-wide { display: block; padding: 16px 16px 24px; }
    #record .wms-case-wide .wms-case-fig { margin: 0 0 16px; }
}

/* 28-oct (Martin): el subtítulo del collage en la fuente normal, en negritas, con lo importante en verde */
#record .wms-collage-h { font-family: 'IBM Plex Sans', sans-serif; font-variation-settings: normal; font-weight: 700; font-size: 26px; line-height: 1.3; letter-spacing: 0; color: var(--mm-text-light); }
#record .wms-collage-h .wms-hl { color: var(--wms-green-text-light); }
@media (max-width: 600px) { #record .wms-collage-h { font-size: 22px; } }

/* 28-oct (Martin): "This is different" y las 8 etapas en una sola sección centrada, fondo gris con
   cuadrícula y degradado al papel arriba y abajo, como "On file". */
.wms-paper #stages {
    border-top: 0;
    border-bottom: 0;
    padding: 120px 0 128px;
    background-color: #F4F4F5;
    background-image:
        linear-gradient(to bottom, var(--wms-paper) 0, rgba(250, 250, 249, 0) 160px),
        linear-gradient(to top, var(--wms-paper) 0, rgba(250, 250, 249, 0) 160px),
        radial-gradient(ellipse 62% 70% at 50% 50%, #F4F4F5 40%, rgba(244, 244, 245, 0) 100%),
        linear-gradient(to right, rgba(24, 24, 27, 0.07) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(24, 24, 27, 0.07) 1px, transparent 1px);
    background-size: auto, auto, auto, 80px 80px, 80px 80px;
    background-position: 0 0, 0 0, center, 0 0, 0 0;
}
#stages > .mm-wrap > .wms-h2 { font-size: 54px; letter-spacing: 0; margin-bottom: 20px; }
.wms-diff-lead { max-width: 760px; margin: 0 auto 32px; text-align: center; font-size: 20px; line-height: 1.55; color: var(--mm-text-medium); }
.wms-nots-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0 0 36px; }
.wms-nots-row li { margin: 0; padding: 20px 18px 20px 48px; background: var(--wms-paper-card); border: 1px solid var(--mm-border-light); box-shadow: 0 10px 30px -18px rgba(24, 24, 27, 0.25); font-size: 17px; line-height: 1.45; color: var(--mm-text-light); }
.wms-nots-row li::before { left: 20px; top: 20px; }
.wms-diff-bridge { margin: 0 auto 160px; text-align: center; font-family: 'IBM Plex Sans', sans-serif; font-weight: 700; font-size: 24px; line-height: 1.35; color: var(--mm-text-light); }
.wms-diff-bridge .wms-hl { color: var(--wms-green-text-light); }
.wms-stages-h { margin: 0 0 20px; text-align: center; font-family: 'Fraunces', serif; font-variation-settings: "opsz" 144; font-weight: 500; font-size: 50px; line-height: 1.15; color: var(--mm-text-light); }
@media (max-width: 980px) {
    .wms-nots-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .wms-paper #stages { padding: 80px 0 88px; background-image:
        linear-gradient(to bottom, var(--wms-paper) 0, rgba(250, 250, 249, 0) 100px),
        linear-gradient(to top, var(--wms-paper) 0, rgba(250, 250, 249, 0) 100px),
        radial-gradient(ellipse 95% 75% at 50% 50%, #F4F4F5 50%, rgba(244, 244, 245, 0) 100%),
        linear-gradient(to right, rgba(24, 24, 27, 0.07) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(24, 24, 27, 0.07) 1px, transparent 1px); }
    #stages > .mm-wrap > .wms-h2 { font-size: 36px; }
    .wms-diff-lead { font-size: 18px; }
    .wms-nots-row { grid-template-columns: 1fr; gap: 10px; }
    .wms-nots-row li { padding: 14px 16px 14px 44px; }
    .wms-nots-row li::before { left: 18px; top: 14px; }
    .wms-diff-bridge { font-size: 20px; margin-bottom: 96px; }
    .wms-stages-h { font-size: 32px; }
}

/* 28-oct (Martin): las 8 etapas en vertical también en compu, para que no se parezcan a las 4 tarjetas de arriba.
   Fila por etapa: número, nombre, pregunta; flechas hacia abajo entre filas. (En celular ya eran verticales.) */
@media (min-width: 981px) {
    #stages .wms-trail { grid-template-columns: 1fr; row-gap: 28px; max-width: 780px; margin: 0 auto; }
    #stages .wms-trail li { display: grid; grid-template-columns: 44px 170px minmax(0, 1fr) auto; column-gap: 22px; align-items: center; text-align: left; padding: 16px 24px; }
    #stages .wms-trail-n { width: 44px; height: 44px; font-size: 17px; }
    #stages .wms-trail-name { margin: 0; font-size: 20px; }
    #stages .wms-trail-q { font-size: 17px; }
    #stages .wms-trail-flag { margin: 0; }
    #stages .wms-trail li + li::before {
        left: 40px; top: -28px; width: 12px; height: 28px;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='20' viewBox='0 0 12 20'%3E%3Cpath d='M6 0v18' stroke='%23047857' stroke-width='1.6'/%3E%3Cpath d='M1.5 13.5 6 19l4.5-5.5' fill='none' stroke='%23047857' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat center;
    }
}

/* 28-oct (Martin): "My story" con titular grande, foto arriba del timeline, ritmo en el texto y un diagrama */
#story .wms-h2 { font-size: 54px; letter-spacing: 0; }
#story .wms-h3 { font-size: 30px; }
#story .wms-letter strong { color: var(--mm-text-light); font-weight: 600; }
#story .wms-letter .wms-hl-ink { color: var(--wms-green-text-light); }
#story .wms-story-photo { margin: 0 0 24px; }
.wms-order { margin: 8px 0 36px; padding: 22px 22px 18px; background: var(--wms-paper-card); border: 1px solid var(--mm-border-light); box-shadow: 0 10px 30px -18px rgba(24, 24, 27, 0.25); }
.wms-order-row { display: grid; grid-template-columns: 150px minmax(0, 1fr); column-gap: 16px; align-items: center; }
.wms-order-row + .wms-order-row { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--mm-border-light); }
.wms-order-k { margin: 0; font-family: 'IBM Plex Mono', monospace; font-size: 14px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.wms-order-row.is-bad .wms-order-k { color: #BE123C; }
.wms-order-row.is-good .wms-order-k { color: var(--wms-green-text-light); }
.wms-order ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.wms-order li { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; }
.wms-order li span, .wms-order li { color: var(--mm-text-light); }
.wms-order li { padding: 6px 12px; border: 1px solid var(--mm-border-light); background: var(--wms-paper); }
.wms-order-row.is-bad li { border-color: #FECDD3; background: #FFF1F2; color: #9F1239; }
.wms-order-row.is-good li { border-color: #A7F3D0; background: #ECFDF5; color: #065F46; }
.wms-order li + li { position: relative; margin-left: 18px; }
.wms-order li + li::before { content: "→"; position: absolute; left: -20px; font-weight: 400; color: var(--mm-text-muted); }
.wms-order figcaption { margin-top: 14px; font-size: 16px; line-height: 1.5; color: var(--mm-text-medium); }
@media (max-width: 600px) {
    #story .wms-h2 { font-size: 36px; }
    #story .wms-h3 { font-size: 25px; }
    .wms-order-row { grid-template-columns: 1fr; row-gap: 10px; }
    .wms-story-photo { max-width: 360px; }
}

/* 28-oct (Martin): "The math behind every figure" en una sola columna centrada, al ancho de la calculadora
   que sigue (920px). La tarjeta del coach de ejemplo va abajo, a lo ancho: datos a la izquierda, cuenta a la derecha. */
#math .wms-letter-grid { display: block; max-width: 920px; }
#math .wms-letter { max-width: none; }
#math .wms-h2 { text-align: center; font-size: 54px; letter-spacing: 0; }
#math .wms-letter > .wms-p, #math .wms-formula { max-width: 760px; margin-left: auto; margin-right: auto; }
#math .wms-letter > .wms-p:first-of-type { text-align: center; }
#math .wms-side-col { margin-top: 48px; max-width: none; }
#math .wms-side { position: static; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto 1fr auto; column-gap: 44px; align-items: start; padding: 32px 36px; }
#math .wms-side-h, #math .wms-side-p { grid-column: 1 / -1; }
#math .wms-side-note, #math .wms-example { grid-column: 1; }
#math .dg-calc { grid-column: 2; grid-row: 2 / span 2; margin: 0; }
#math .wms-side-p { margin-top: 24px; }
@media (max-width: 980px) {
    #math .wms-side { display: block; padding: 26px 24px; }
    #math .dg-calc { margin-top: 20px; }
}
@media (max-width: 600px) { #math .wms-h2 { font-size: 36px; } }

/* 28-oct (Martin): "Put a number on one stage" con titular grande */
#your-numbers .wms-h2 { font-size: 54px; letter-spacing: 0; }
@media (max-width: 600px) { #your-numbers .wms-h2 { font-size: 36px; } }

/* 28-oct (Martin): columna derecha de "One promise" + "Get": paquete completo, todo lo que se llevan
   con detalle (imagen, nombre, subtítulo, qué es, franja de acceso) y el botón. Tarjeta clara. */

#get .wms-getstack { max-width: none; margin: 0; padding: 22px 22px 24px; background: var(--wms-paper-card); border: 1px solid var(--mm-border-light); box-shadow: inset 0 3px 0 var(--mm-green), 0 10px 30px -18px rgba(24, 24, 27, 0.25); }
#get .wms-getstack .wms-bb-fig { margin: 0 0 18px; }
.wms-gs-banner { margin: 0 0 6px; padding: 14px 12px; background: var(--mm-black); color: #fff; text-align: center; font-family: 'IBM Plex Sans', sans-serif; font-weight: 700; font-size: 16px; letter-spacing: 0.06em; text-transform: uppercase; }
.wms-gs-item { display: grid; grid-template-columns: 76px minmax(0, 1fr); column-gap: 16px; align-items: start; padding: 20px 0 0; }
.wms-gs-item > img { width: 76px; height: auto; }
.wms-gs-h { margin: 0 0 4px; font-family: 'IBM Plex Sans', sans-serif; font-size: 18px; font-weight: 700; line-height: 1.25; color: var(--mm-text-light); }
.wms-gs-sub { margin: 0 0 6px; font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--wms-green-text-light); }
.wms-gs-p { margin: 0; font-size: 16px; line-height: 1.5; color: var(--mm-text-medium); }
.wms-gs-strip { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 14px 0 0; padding: 8px 8px 8px 12px; background: #F4F4F5; border: 1px solid var(--mm-border-light); font-family: 'IBM Plex Mono', monospace; font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #52525B; }
.wms-gs-strip span { display: inline-flex; align-items: center; gap: 8px; }
.wms-gs-strip svg { color: var(--wms-green-text-light); }
.wms-gs-strip b { padding: 5px 10px; background: var(--mm-black); color: #fff; font-weight: 600; }
.wms-gs-strip b.is-bonus { background: var(--wms-green-text-light); }
#get .wms-getstack .wms-bb-body { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--mm-border-light); }
#get .wms-getstack .wms-bb-name { color: var(--mm-text-medium); }
#get .wms-getstack .wms-bb-name strong { color: var(--mm-text-light); }
#get .wms-getstack .wms-bb-price { color: #52525B; }
#get .wms-getstack .wms-bb-price strong { color: var(--mm-text-light); }
#get .wms-getstack .wms-guar { color: var(--mm-text-medium); }
#get .wms-getstack .wms-pay { margin-top: 18px; }
@media (max-width: 980px) {
    #get .wms-side-col { margin-top: 32px; }
}
@media (max-width: 600px) {
    #get .wms-getstack { padding: 16px 14px 18px; }
    .wms-gs-item { grid-template-columns: 60px minmax(0, 1fr); column-gap: 12px; }
    .wms-gs-item > img { width: 60px; }
}
@media (min-width: 1101px) { #get .wms-letter-grid { grid-template-columns: minmax(0, 1fr) 420px; column-gap: 56px; } }

/* 28-oct (Martin): ritmo en el copy largo. Negritas en lo que importa y frases clave en verde (.wms-mark). */
.wms-mark { color: var(--mm-green); font-weight: 600; }
.wms-paper .wms-mark, .wms-inc-light .wms-mark { color: var(--wms-green-text-light); }
/* Solo en los párrafos normales: la fórmula y los bloques de compra son oscuros y llevan su propio color */
.wms-paper .wms-letter > p.wms-p:not(.wms-formula) strong:not(.wms-mark) { color: var(--mm-text-light); font-weight: 600; }
.wms-paper .wms-letter .wms-mark { color: var(--wms-green-text-light); }

/* 28-oct (Martin): en "Get" la columna baja normal y el botón aparece en su lugar, al final. Desde ahí la columna
   se pega por abajo (el script le pone top negativo) y el botón sigue a la vista el resto de la sección. */
@media (min-width: 981px) {
    #get .wms-getstack { position: sticky; top: 24px; }
}

/* 28-oct (Martin): "Who this is for, and who it isn't" con titular grande y el fondo gris de cuadrícula */
.wms-paper #fit {
    padding: 120px 0 128px;
    background-color: #F4F4F5;
    background-image:
        linear-gradient(to bottom, var(--wms-paper) 0, rgba(250, 250, 249, 0) 160px),
        linear-gradient(to top, var(--wms-paper) 0, rgba(250, 250, 249, 0) 160px),
        radial-gradient(ellipse 62% 70% at 50% 50%, #F4F4F5 40%, rgba(244, 244, 245, 0) 100%),
        linear-gradient(to right, rgba(24, 24, 27, 0.07) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(24, 24, 27, 0.07) 1px, transparent 1px);
    background-size: auto, auto, auto, 80px 80px, 80px 80px;
    background-position: 0 0, 0 0, center, 0 0, 0 0;
}
#fit > .mm-wrap > .wms-h2 { font-size: 54px; letter-spacing: 0; margin-bottom: 48px; }
@media (max-width: 600px) {
    .wms-paper #fit { padding: 80px 0 88px; background-image:
        linear-gradient(to bottom, var(--wms-paper) 0, rgba(250, 250, 249, 0) 100px),
        linear-gradient(to top, var(--wms-paper) 0, rgba(250, 250, 249, 0) 100px),
        radial-gradient(ellipse 95% 75% at 50% 50%, #F4F4F5 50%, rgba(244, 244, 245, 0) 100%),
        linear-gradient(to right, rgba(24, 24, 27, 0.07) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(24, 24, 27, 0.07) 1px, transparent 1px); }
    #fit > .mm-wrap > .wms-h2 { font-size: 36px; margin-bottom: 32px; }
}

/* 28-oct (Martin): titular de la garantía más grande */
#guarantee .wms-h2 { font-size: 54px; letter-spacing: 0; }
@media (max-width: 600px) { #guarantee .wms-h2 { font-size: 36px; } }

/* 28-oct (Martin): "30 days from now" con titular grande y el bloque de compra en columna derecha pegajosa */
#thirty .wms-h2 { font-size: 54px; letter-spacing: 0; }
@media (min-width: 1101px) { #thirty .wms-letter-grid { grid-template-columns: minmax(0, 1fr) 420px; column-gap: 56px; } }
@media (min-width: 981px) {
    #thirty .wms-side-col .wms-bb { position: sticky; top: 24px; margin: 0; max-width: none; }
}
@media (max-width: 980px) { #thirty .wms-side-col { margin-top: 32px; } }
@media (max-width: 600px) { #thirty .wms-h2 { font-size: 36px; } }

/* 28-oct (Martin): firma con su cara en círculo a la izquierda */
.wms-sign-row { display: flex; align-items: center; gap: 18px; margin: 0 0 24px; }
.wms-sign-row .wms-sign-name { margin: 0; }
.wms-sign-face { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; border: 2px solid var(--wms-green-text-light); flex: none; }

/* 28-oct (Martin): "Here's what's included" en fondo oscuro con cuadrícula y velo al centro, titular grande,
   y un solo cuadro: paquete completo arriba, cada pieza con su mockup y el bloque de compra. */
#recap {
    background-color: var(--mm-black);
    background-image:
        radial-gradient(ellipse 60% 70% at 50% 50%, var(--mm-black) 50%, rgba(10, 10, 11, 0) 100%),
        linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: auto, 80px 80px, 80px 80px;
    background-position: center, 0 0, 0 0;
}
#recap .wms-h2 { font-size: 54px; letter-spacing: 0; }
#recap .wms-recapcard { max-width: 760px; margin: 40px auto 0; padding: 32px 40px 36px; display: block; }
#recap .wms-recapcard .wms-bb-fig { max-width: 560px; margin: 0 auto 28px; }
.wms-rc-list { list-style: none; margin: 0 0 28px; padding: 0; }
.wms-rc-item { display: grid; grid-template-columns: 84px minmax(0, 1fr); column-gap: 20px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--mm-border); }
.wms-rc-item:last-child { border-bottom: 0; }
.wms-rc-item > img { width: 84px; height: 84px; object-fit: contain; }
.wms-rc-name { margin: 0 0 4px; font-size: 18px; font-weight: 600; line-height: 1.3; color: var(--mm-white); }
.wms-rc-name span { color: var(--mm-green); }
.wms-rc-p { margin: 0; font-size: 16px; line-height: 1.5; color: var(--mm-light); }
.wms-rc-sub { margin: 8px 0 0; padding: 0 0 0 18px; font-size: 16px; line-height: 1.5; color: var(--mm-gray); }
.wms-rc-sub li { margin: 0 0 4px; }
#recap .wms-recapcard .wms-bb-body { padding-top: 24px; border-top: 1px solid var(--mm-border); }
@media (max-width: 600px) {
    #recap .wms-h2 { font-size: 36px; }
    #recap .wms-recapcard { padding: 22px 16px 24px; }
    .wms-rc-item { grid-template-columns: 60px minmax(0, 1fr); column-gap: 14px; }
    .wms-rc-item > img { width: 60px; height: 60px; }
}

/* 28-oct (Martin): el cuadro del recap en claro (como la caja de arriba), sin mosaicos detrás de los mockups */
#recap .wms-recapcard { background: var(--wms-paper-card); border-color: var(--mm-border-light); box-shadow: inset 0 3px 0 var(--mm-green), 0 18px 44px rgba(0, 0, 0, 0.35); }
#recap .wms-recap-title { border-bottom-color: var(--mm-border-light); color: #52525B; }
#recap .wms-recap-title span:first-child { color: var(--mm-text-light); }
#recap .wms-recap-title span + span { border-left-color: var(--mm-border-light); }
#recap .wms-recap-title span:last-child { color: var(--wms-green-text-light); }
#recap .wms-rc-item { border-bottom-color: var(--mm-border-light); }
#recap .wms-rc-name { color: var(--mm-text-light); }
#recap .wms-rc-name span { color: var(--wms-green-text-light); }
#recap .wms-rc-p { color: var(--mm-text-medium); }
#recap .wms-rc-sub { color: var(--mm-text-muted); }
#recap .wms-recapcard .wms-bb-body { border-top-color: var(--mm-border-light); }
#recap .wms-recapcard .wms-bb-price { color: #52525B; }
#recap .wms-recapcard .wms-bb-price strong { color: var(--mm-text-light); }
#recap .wms-recapcard .wms-guar { color: var(--mm-text-medium); }
#recap .wms-recapcard .wms-box-secure { color: #52525B; }

/* 28-oct (Martin): FAQ en gris oscuro con cuadrícula y velo al centro. Preguntas en peso normal; al pasar el
   cursor o abrirlas, negritas y verde. Titular grande. */
#faq {
    background-color: var(--mm-black-soft);
    background-image:
        radial-gradient(ellipse 62% 70% at 50% 50%, var(--mm-black-soft) 40%, rgba(24, 24, 27, 0) 100%),
        linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: auto, 80px 80px, 80px 80px;
    background-position: center, 0 0, 0 0;
}
#faq .wms-h2 { font-size: 54px; letter-spacing: 0; }
#faq .wms-qa summary { font-weight: 400; transition: color 0.15s ease; }
#faq .wms-qa summary:hover, #faq .wms-qa[open] summary { font-weight: 600; color: var(--mm-green); }
@media (max-width: 600px) { #faq .wms-h2 { font-size: 36px; } }

/* 28-oct (Martin): titular de la sección final más grande */
#final .wms-h2 { font-size: 54px; letter-spacing: 0; max-width: 980px; }
@media (max-width: 600px) { #final .wms-h2 { font-size: 36px; } }
#faq .wms-qa.is-closing summary { font-weight: 400; color: var(--mm-white); }
#faq .wms-qa.is-closing summary::after { transform: none; }
#faq .wms-qa-a { overflow: hidden; }

/* 28-oct (Martin): parte de cada titular principal en verde para encontrarlos al escanear.
   En fondo claro, el verde oscuro que pasa contraste; en fondo oscuro, el verde de marca. */
.wms-paper .wms-h2 .wms-hl, .wms-inc-light .wms-h2 .wms-hl { color: var(--wms-green-text-light); }
.wms-paper .wms-open .wms-hl, .wms-guarantee .wms-h2 .wms-hl { color: var(--mm-green); }

/* 28-oct (Martin), móvil: en "Skeptical" la foto va entre "Start reading here" y el memo (Dear/From/Re).
   La carta se "abre" (display: contents) para poder ordenar sus piezas junto con la foto. */
@media (max-width: 980px) {
    #skeptical .wms-letter-grid { display: flex; flex-direction: column; }
    #skeptical .wms-letter { display: contents; }
    #skeptical .wms-letter > * { order: 3; }
    #skeptical .wms-letter > .wms-start { order: 1; }
    #skeptical .wms-side-col { order: 2; margin: 4px 0 28px; }
}

/* 28-oct (Martin), móvil: en "My story" la columna derecha (foto + "The record, in order") va justo debajo del titular */
@media (max-width: 980px) {
    #story .wms-letter-grid { display: flex; flex-direction: column; }
    #story .wms-letter { display: contents; }
    #story .wms-letter > * { order: 3; }
    #story .wms-letter > .wms-h2 { order: 1; }
    #story .wms-side-col { order: 2; margin: 0 0 32px; }
}

/* 28-oct (Martin), móvil: debajo del titular de la garantía va solo el sello, centrado. El cuadro de la
   derecha se queda abajo como estaba (paquete arriba), con el sello en horizontal junto a los dos puntos. */
.wms-guar-seal-mob { display: none; }
@media (max-width: 980px) {
    .wms-guar-seal-mob { display: block; width: 150px; height: auto; margin: 4px auto 28px; }
    #guarantee .wms-seal-card { display: grid; grid-template-columns: 76px minmax(0, 1fr); column-gap: 16px; row-gap: 12px; align-items: center; text-align: left; }
    #guarantee .wms-seal-pack { grid-column: 1 / -1; grid-row: 1; margin: 0 0 6px; }
    #guarantee .wms-seal-big { grid-column: 1; grid-row: 2 / span 2; width: 76px; margin: 0; }
    #guarantee .wms-seal-card p { grid-column: 2; margin: 0; }
}

/* 28-oct (Martin): botón en el cuadro de la garantía, entre el paquete y los dos puntos */
.wms-seal-buy { width: 100%; box-sizing: border-box; justify-content: center; margin: 0 0 18px; padding: 15px 14px; font-size: 16px; line-height: 1.3; white-space: normal; text-align: center; }
@media (max-width: 980px) {
    #guarantee .wms-seal-buy { grid-column: 1 / -1; grid-row: 2; margin: 0 0 6px; }
    #guarantee .wms-seal-big { grid-row: 3 / span 2; }
}

/* ============ 29-oct: las dos secciones nuevas tras el panel (trails y datos malos) ============ */
.wms-paper .wms-trails-sec { padding: 72px 0; }
.wms-tr-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 0 0 22px; }
.wms-tr-card { padding: 18px 20px; background: var(--wms-paper-card); border: 1px solid var(--mm-border-light); border-top: 3px solid var(--wms-green-text-light); }
.wms-tr-k { margin: 0 0 8px; font-size: 18px; font-weight: 600; line-height: 1.3; color: var(--mm-text-light); }
.wms-tr-s { margin: 0; font-size: 15px; line-height: 1.55; color: var(--mm-text-medium); }
.wms-tr-note { max-width: 760px; margin: 0 auto 56px; text-align: center; font-size: 17px; line-height: 1.6; color: var(--mm-text-medium); }
.wms-tr-fix { max-width: 760px; margin: 0 auto 14px; padding: 24px 28px; background: var(--wms-paper-card); border: 1px solid var(--mm-border-light); box-shadow: inset 3px 0 0 var(--wms-green-text-light); }
.wms-tr-fix-stage { margin: 0 0 14px; font-family: 'IBM Plex Mono', monospace; font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wms-green-text-light); }
.wms-tr-fix dl { margin: 0; }
.wms-tr-fix dt { margin: 0 0 4px; font-size: 17px; font-weight: 600; color: var(--mm-text-light); }
.wms-tr-fix dd { margin: 0 0 16px; font-size: 17px; line-height: 1.6; color: var(--mm-text-medium); }
.wms-tr-fix dd:last-child { margin-bottom: 0; }

.wms-paper .wms-messy-sec { padding: 72px 0; background: var(--wms-paper-card); border-top: 1px solid var(--mm-border-light); border-bottom: 1px solid var(--mm-border-light); }
.wms-paper .wms-messy-sec + .wms-sec { padding-top: 64px; }
.wms-messy-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.wms-messy-row { padding: 14px 0; border-bottom: 1px solid var(--mm-border-light); }
.wms-messy-row:first-child { padding-top: 0; }
.wms-messy-k { margin: 0 0 4px; font-size: 18px; font-weight: 600; color: var(--mm-text-light); }
.wms-messy-d { margin: 0; font-size: 17px; line-height: 1.6; color: var(--mm-text-medium); }
.wms-messy-fig { margin: 0; padding: 20px; background: var(--wms-paper); border: 1px solid var(--mm-border-light); }
.wms-messy-fig-h { margin: 0 0 12px; font-family: 'IBM Plex Mono', monospace; font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mm-text-muted); }
.wms-messy-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.wms-messy-table th { text-align: left; padding: 8px 8px; font-family: 'IBM Plex Mono', monospace; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mm-text-muted); border-bottom: 1px solid var(--mm-border-light); }
.wms-messy-table td { padding: 9px 8px; border-bottom: 1px solid var(--mm-border-light); color: var(--mm-text-medium); }
.wms-messy-table td:first-child { color: var(--mm-text-light); font-weight: 500; }
.wms-lbl { display: inline-block; padding: 2px 8px; font-family: 'IBM Plex Mono', monospace; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; }
.wms-lbl.v { background: #ECFDF5; color: #047857; border: 1px solid #A7F3D0; }
.wms-lbl.u { background: #F4F4F5; color: #52525B; border: 1px solid #D4D4D8; }
.wms-messy-fig .dg-cap { margin-top: 12px; text-align: left; }

@media (max-width: 980px) {
    .wms-tr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .wms-messy-grid { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 600px) {
    .wms-tr-grid { grid-template-columns: 1fr; }
    .wms-tr-fix { padding: 20px; }
    .wms-messy-table { font-size: 14px; }
    .wms-messy-table td, .wms-messy-table th { padding: 8px 5px; }
}

/* 30-oct: "Messy numbers?" dentro del FAQ oscuro, en una columna */
#faq .wms-qa-messy .wms-messy-grid { grid-template-columns: 1fr; gap: 24px; margin-top: 18px; }
#faq .wms-qa-messy .wms-messy-row { border-bottom-color: rgba(255,255,255,.14); }
#faq .wms-qa-messy .wms-messy-k { color: #fff; }
#faq .wms-qa-messy .wms-messy-d { color: rgba(255,255,255,.78); }
#faq .wms-qa-messy .wms-messy-fig { max-width: 560px; }
#faq .wms-qa-messy .wms-messy-row p { margin: 0 0 4px; }

/* 4-nov-2026 (v4): titular más largo (la frase del coach); hero limpio (Martin, 4-nov tarde): para quién en una línea y subtítulo corto */
#wms-hero .wms-callout { white-space: nowrap; }
#wms-hero h1 { font-size: 52px; line-height: 1.08; text-wrap: balance; max-width: 1120px; }
#wms-hero .wms-hero-sub { font-size: 20px; max-width: 720px; }
#wms-hero .wms-hero-sub .wms-ex { font-size: 13px; }
@media (max-width: 980px) { #wms-hero h1 { font-size: 42px; } }
@media (max-width: 760px) { #wms-hero .wms-callout { white-space: normal; } }
@media (max-width: 600px) {
    #wms-hero h1 { font-size: 29px; line-height: 1.14; }
    #wms-hero .wms-hero-sub { font-size: 17px; }
}

/* 4-nov (Martin): en celular el titular va partido al estilo del coach: la primera frase sola y "More Sales From The Traffic You're Already Buying" en verde, más chica */
#wms-hero .wms-mb { display: none; }
@media (max-width: 600px) {
    #wms-hero .wms-dt { display: none; }
    #wms-hero h1 { margin-bottom: 10px; }
    #wms-hero .wms-hero-line.wms-mb { display: block; position: relative; z-index: 1; font-family: 'Fraunces', serif; font-variation-settings: "opsz" 144; font-weight: 500; font-size: 29px; line-height: 1.14; color: var(--mm-green); margin: 0 auto 22px; max-width: 900px; text-wrap: balance; } /* 4-nov noche (Martin): el verde del mismo tamaño que el blanco, en su propio renglón */
}

/* 4-nov (coach): "You found the stage. Now what?" tres pasos en fila; en celular, uno debajo de otro */
.wms-nw-steps { list-style: none; counter-reset: nw; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; max-width: 1080px; margin: 28px auto 22px; padding: 0; }
.wms-nw-steps > li { counter-increment: nw; border: 1px solid #D4D4D8; background: #FFFFFF; padding: 22px 22px 20px; font-size: 16px; line-height: 1.55; color: #27272A; }
.wms-nw-steps > li::before { content: counter(nw); display: inline-flex; width: 30px; height: 30px; align-items: center; justify-content: center; background: #0A0A0B; color: #34D399; font-family: 'IBM Plex Mono', monospace; font-weight: 600; font-size: 14px; margin-bottom: 12px; }
.wms-nw-k { font-family: 'IBM Plex Mono', monospace; font-weight: 600; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: #047857; margin: 0 0 8px; }
.wms-bridge { margin-top: -6px; }
@media (max-width: 860px) { .wms-nw-steps { grid-template-columns: 1fr; } }


#now-what .wms-stages-h { font-size: 30px; margin-top: 44px; }
@media (max-width: 600px) { #now-what .wms-stages-h { font-size: 24px; } }

/* 4-nov noche (Martin): titular más grande en celular (blanco y verde), líneas más angostas, iconos por funnel, garantía sin serifa */
@media (max-width: 600px) {
    #wms-hero h1 { font-size: 35px; line-height: 1.08; }
    #wms-hero .wms-hero-line.wms-mb { font-size: 35px; line-height: 1.08; }
}
#now-what .wms-stages-lead, #trails .wms-stages-lead.wms-narrow { max-width: 640px; margin-left: auto; margin-right: auto; }
.wms-tr-ico { display: block; color: #047857; margin-bottom: 10px; }
.wms-pull.wms-pull-sans { font-family: 'IBM Plex Sans', system-ui, sans-serif; font-style: normal; font-size: 18px; line-height: 1.5; font-weight: 500; }
#now-what .wms-stages-lead, #trails .wms-stages-lead.wms-narrow { text-wrap: balance; }

/* 4-nov noche (Martin): "Now what?" no tan angosto; la garantía de One promise un poco más chica; cuando un texto va en dos párrafos, que se note el espacio */
#now-what .wms-stages-lead { max-width: 820px; }
.wms-pull.wms-pull-sans { font-size: 16px; }
.wms-case-p + .wms-case-p, .wms-qa-a p + p, .wms-obj p + p, .wms-lane-result + .wms-lane-result, .wms-coach-lead + .wms-coach-lead { margin-top: 14px; }
/* la regla base de .wms-pull usa !important: aquí también, para que esta línea sí baje de tamaño */
.wms-pull.wms-pull-sans { font-size: 19px !important; line-height: 1.5 !important; }
@media (max-width: 600px) { .wms-pull.wms-pull-sans { font-size: 17px !important; } }
#now-what .wms-stages-lead { text-wrap: pretty; }
#now-what .wms-stages-lead { max-width: 900px; }

/* ================================================================
   Light theme 5-nov-2026
   coach: el fondo oscuro cuesta leerlo. Martin: toda la página en claro.
   Cómo funciona: en <body> los tokens "de fondo oscuro" (--mm-white, --mm-light,
   --mm-gray, --mm-border...) pasan a tinta oscura y bordes claros, así todo lo que
   los usaba se vuelve legible sin tocar cada regla. Los pocos recuadros que
   siguen oscuros a propósito (video, fórmula, resultados de la calculadora,
   diagramas negros, el diálogo del optin) recuperan los tokens originales.
   Verde: #10B981 solo para rellenos, bordes, botones e iconos grandes;
   como texto sobre claro, --mm-green-text (#047857, 5.2:1 sobre #FAFAF9).
   Secciones: gris claro con cuadrícula de 80px y velo al centro (el patrón de
   #record / #stages), con degradado al papel arriba y abajo en vez de líneas.
   ================================================================ */
:root { --mm-green-text: #047857; }
body {
    --mm-white: #0A0A0B;
    --mm-light: #3F3F46;
    --mm-gray: #52525B;
    --mm-dim: #52525B;
    --mm-darkest: #A1A1AA;
    --mm-border: #D4D4D8;
    --mm-border-soft: #E4E4E7;
    --mm-black-card: #FFFFFF;
    --mm-black-soft: #F4F4F5;
    --mm-black-elevated: #FFFFFF;
    --lt-fade: 160px;
    --lt-veil: radial-gradient(ellipse 62% 70% at 50% 50%, #F4F4F5 40%, rgba(244, 244, 245, 0) 100%);
    --lt-grid-x: linear-gradient(to right, rgba(24, 24, 27, 0.07) 1px, transparent 1px);
    --lt-grid-y: linear-gradient(to bottom, rgba(24, 24, 27, 0.07) 1px, transparent 1px);
    background-color: var(--wms-paper);
    color: var(--mm-light);
}
@media (max-width: 600px) {
    body { --lt-fade: 100px; --lt-veil: radial-gradient(ellipse 95% 75% at 50% 50%, #F4F4F5 50%, rgba(244, 244, 245, 0) 100%); }
}
/* Recuadros que siguen oscuros: tokens originales */
.wms-video, .wms-formula, .wms-side .wms-example-math, .wms-calc-out, .wms-pl, .wms-demo a,
.dg-calc-rows, .dg-take-out, .dg-fork-root {
    --mm-white: #FAFAF9;
    --mm-light: #E4E4E7;
    --mm-gray: #A1A1AA;
    --mm-dim: #85858E;
    --mm-darkest: #3F3F46;
    --mm-border: #27272A;
    --mm-border-soft: #1F1F22;
    --mm-black-card: #0F0F11;
    --mm-black-soft: #18181B;
    --mm-black-elevated: #1C1C1F;
    --mm-green-text: #10B981;
}
.wms-video .wms-hl, .wms-formula .wms-hl, .wms-calc-out .wms-hl, .wms-pl .wms-hl { color: var(--mm-green); }

/* Encabezado y pie: papel, sin línea dura */
.wms-brand { background: var(--wms-paper); border-bottom: 0; }
.wms-footer { background: var(--wms-paper); border-top: 1px solid var(--mm-border-light); }

/* Hero: cuadrícula gris con velo claro al centro; abajo se funde al papel */
/* master.css pone .mm-grid-bg con !important: aquí también, solo para el hero */
#wms-hero.mm-grid-bg { background-color: #F4F4F5 !important; background-image: none !important; border-bottom: 0; }
#wms-hero.mm-grid-bg::before { background-image: var(--lt-grid-x), var(--lt-grid-y); background-size: 80px 80px; }
#wms-hero::after {
    background:
        linear-gradient(to bottom, var(--wms-paper) 0, rgba(250, 250, 249, 0) 90px),
        linear-gradient(to top, var(--wms-paper) 0, rgba(250, 250, 249, 0) 140px),
        radial-gradient(ellipse 60% 78% at 50% 50%, #F4F4F5 55%, rgba(244, 244, 245, 0) 100%);
}
@media (max-width: 600px) {
    #wms-hero::after {
        background:
            linear-gradient(to bottom, var(--wms-paper) 0, rgba(250, 250, 249, 0) 60px),
            linear-gradient(to top, var(--wms-paper) 0, rgba(250, 250, 249, 0) 100px),
            radial-gradient(ellipse 95% 80% at 50% 50%, #F4F4F5 62%, rgba(244, 244, 245, 0) 100%);
    }
}

/* Las secciones que eran oscuras: el patrón de #record */
#wms-zone, #coach, #wms-how, #wms-letter-open, #your-numbers, #guarantee, #recap, #faq, #final {
    background-color: #F4F4F5;
    background-image:
        linear-gradient(to bottom, var(--wms-paper) 0, rgba(250, 250, 249, 0) var(--lt-fade)),
        linear-gradient(to top, var(--wms-paper) 0, rgba(250, 250, 249, 0) var(--lt-fade)),
        var(--lt-veil), var(--lt-grid-x), var(--lt-grid-y);
    background-size: auto, auto, auto, 80px 80px, 80px 80px;
    background-position: 0 0, 0 0, center, 0 0, 0 0;
    background-repeat: repeat;
    border-top: 0;
    border-bottom: 0;
    box-shadow: none;
}
/* VSL: un brillo verde muy suave detrás del video */
#coach {
    background-image:
        linear-gradient(to bottom, var(--wms-paper) 0, rgba(250, 250, 249, 0) var(--lt-fade)),
        linear-gradient(to top, var(--wms-paper) 0, rgba(250, 250, 249, 0) var(--lt-fade)),
        radial-gradient(ellipse 70% 340px at 50% 360px, rgba(16, 185, 129, 0.10), rgba(16, 185, 129, 0) 100%),
        var(--lt-veil), var(--lt-grid-x), var(--lt-grid-y);
    background-size: auto, auto, auto, auto, 80px 80px, 80px 80px;
    background-position: 0 0, 0 0, 0 0, center, 0 0, 0 0;
}
/* How it works: rojo suave detrás del camino de siempre, verde detrás del nuevo */
#wms-how {
    background-image:
        linear-gradient(to bottom, var(--wms-paper) 0, rgba(250, 250, 249, 0) var(--lt-fade)),
        linear-gradient(to top, var(--wms-paper) 0, rgba(250, 250, 249, 0) var(--lt-fade)),
        radial-gradient(ellipse 48% 55% at 0 58%, rgba(225, 29, 72, 0.08), rgba(225, 29, 72, 0) 100%),
        radial-gradient(ellipse 48% 55% at 100% 58%, rgba(16, 185, 129, 0.10), rgba(16, 185, 129, 0) 100%),
        var(--lt-veil), var(--lt-grid-x), var(--lt-grid-y);
    background-size: auto, auto, auto, auto, auto, 80px 80px, 80px 80px;
    background-position: 0 0, 0 0, 0 0, 0 0, center, 0 0, 0 0;
}
@media (max-width: 980px) {
    #wms-how {
        background-image:
            linear-gradient(to bottom, var(--wms-paper) 0, rgba(250, 250, 249, 0) var(--lt-fade)),
            linear-gradient(to top, var(--wms-paper) 0, rgba(250, 250, 249, 0) var(--lt-fade)),
            radial-gradient(ellipse 90% 28% at 0 32%, rgba(225, 29, 72, 0.08), rgba(225, 29, 72, 0) 100%),
            radial-gradient(ellipse 90% 28% at 100% 72%, rgba(16, 185, 129, 0.10), rgba(16, 185, 129, 0) 100%),
            var(--lt-veil), var(--lt-grid-x), var(--lt-grid-y);
    }
}
/* Cierre: la línea verde que termina en un punto, ahora dibujada en SVG sobre el claro */
#final {
    background-image:
        linear-gradient(to bottom, var(--wms-paper) 0, rgba(250, 250, 249, 0) var(--lt-fade)),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1280 714'%3E%3Cdefs%3E%3CradialGradient id='g'%3E%3Cstop offset='0' stop-color='%2310B981' stop-opacity='.28'/%3E%3Cstop offset='1' stop-color='%2310B981' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath d='M0 612C90 600 160 565 240 563S330 595 385 590 520 530 605 521 720 616 785 616 870 494 930 494 1060 528 1114 519' fill='none' stroke='%2310B981' stroke-width='2.2'/%3E%3Ccircle cx='1114' cy='519' r='44' fill='url(%23g)'/%3E%3Ccircle cx='1114' cy='519' r='7' fill='%2310B981'/%3E%3C/svg%3E"),
        var(--lt-veil), var(--lt-grid-x), var(--lt-grid-y);
    background-size: auto, var(--wms-linea-w) auto, auto, 80px 80px, 80px 80px;
    background-position: 0 0, center bottom, center, 0 0, 0 0;
    background-repeat: repeat, no-repeat, repeat, repeat, repeat;
}
.wms-final-bg .wms-disclaimer { color: var(--mm-text-muted); }

/* Tarjetas y bloques que tenían fondo negro fijo */
.wms-lane-card, .wms-way.old, .wms-stack, .wms-recap, .wms-inc-card { background: var(--wms-paper-card); }
.wms-lane-card { box-shadow: 0 10px 30px -18px rgba(24, 24, 27, 0.25); }
.wms-lane-card.old { box-shadow: inset 0 3px 0 #E11D48, 0 10px 30px -18px rgba(24, 24, 27, 0.25); }
.wms-lane-card.new { box-shadow: inset 0 3px 0 var(--mm-green), 0 10px 30px -18px rgba(24, 24, 27, 0.25); border-color: rgba(4, 120, 87, 0.35); }
.wms-bb { box-shadow: inset 0 3px 0 var(--mm-green), 0 18px 40px rgba(10, 10, 11, 0.10); }
#caja, #recap .wms-recapcard { box-shadow: inset 0 3px 0 var(--mm-green), 0 18px 40px rgba(10, 10, 11, 0.10); }
.wms-what-shot img { box-shadow: 0 18px 40px rgba(10, 10, 11, 0.12); }
.wms-seal-card, .wms-guar-big { box-shadow: inset 0 2px 0 var(--mm-gold), 0 10px 30px -18px rgba(24, 24, 27, 0.25); }
.wms-guar-big { box-shadow: inset 3px 0 0 var(--mm-green); }
.wms-calc-sec .wms-calc-card { box-shadow: 0 10px 30px -18px rgba(24, 24, 27, 0.25); }

/* Rojo del camino viejo: el rosa (#FB7185) no se lee en claro */
.wms-lane-tag, .wms-lane-result strong { color: #BE123C; }
.wms-lane-steps li::before { border-color: #BE123C; color: #BE123C; }
.wms-lane-result { border-color: rgba(190, 18, 60, 0.45); }

/* Verde como texto sobre claro */
.wms-hl, .wms-mark, .wms-callout, .wms-box-tag, .wms-brand-name span, .mm-eyebrow, .mm-h2 em,
.wms-stack-title, .wms-bonuses-title, .wms-way.new h3, .wms-inc-tag, .wms-rc-name span,
.wms-lane-card.new .wms-lane-tag, .wms-lane-card.new .wms-lane-result strong,
.wms-recap-title span:last-child, .wms-seal .wms-side-h, .wms-qa p a, .wms-qa-a a,
.wms-calc-sec .wms-calc-bridge a, .dg-trail-ends span:last-child, .wms-way.new .dg-end strong { color: var(--mm-green-text); }
.wms-gofrom li::before, .wms-checks li::before, .wms-presale li::before, .wms-box-list li::before,
.wms-inc-list li::before, .wms-way.new .dg-flow li::before, .wms-qa summary::after { color: var(--mm-green-text); }
#wms-hero .wms-hero-line.wms-mb, .wms-coach-page-h .wms-hl,
.wms-paper .wms-open .wms-hl, .wms-guarantee .wms-h2 .wms-hl { color: var(--mm-green-text); }
.wms-footer a:hover { color: var(--mm-green-text); border-color: var(--mm-green-text); }

/* FAQ: pregunta en verde oscuro al pasar el cursor o abrirla */
.wms-qa summary:hover, #faq .wms-qa summary:hover, #faq .wms-qa[open] summary { color: var(--mm-green-text); }
#faq .wms-qa.is-closing summary { color: var(--mm-text-light); }
#faq .wms-qa-messy .wms-messy-row { border-bottom-color: var(--mm-border-light); }
#faq .wms-qa-messy .wms-messy-k { color: var(--mm-text-light); }
#faq .wms-qa-messy .wms-messy-d { color: var(--mm-text-medium); }
#faq .wms-messy-fig-h, #faq .wms-messy-fig .dg-cap { color: var(--mm-text-muted); }