/* ============================================================
   ORQUESTA · Curso — piezas propias SOBRE el sistema editorial
   de la masterclass (mc.css + mc-hero.css). B/N wireframe,
   Inter titulares · Roboto Mono cuerpo, azul #2f66ff cuentagotas,
   radius:0, sin glows/gradientes. Bloques a media pantalla
   (el grafo mono fijo respira a la derecha).
   ============================================================ */

/* al saltar por ancla, no quedar tapado por el nav fijo */
.sec{scroll-margin-top:84px}
/* utilería: bloque acotado a la mitad izquierda de la pantalla */
.half{max-width:calc(50vw - var(--gut))}
@media(max-width:760px){.half{max-width:none}}

/* ===== QUÉ TE LLEVAS — lista numerada limpia (sin cajas ni líneas) ===== */
.gives{margin-top:clamp(2rem,4vw,3rem);display:grid;gap:clamp(1.4rem,3vw,2rem)}
.give{display:grid;grid-template-columns:auto 1fr;gap:clamp(1rem,2.5vw,1.6rem);align-items:baseline}
.give .gn{font-family:var(--mono);font-size:.72rem;letter-spacing:.2em;color:var(--accent)}
.give h3{font-family:var(--display);font-weight:400;font-size:clamp(1.2rem,2vw,1.7rem);letter-spacing:-.01em;margin-bottom:.35rem}
.give p{color:var(--soft);font-size:.95rem;line-height:1.55;max-width:52ch}
.give p strong{font-style:italic}

/* ===== QUÉ TE LLEVAS — grid gráfico (mockup de app + iconos de línea) ===== */
.gives-grid{margin-top:clamp(2rem,4vw,3rem);display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2.4vw,1.8rem);max-width:1180px}
.gcell{display:flex;flex-direction:column;gap:1rem}
.gcell .win{width:100%}
.gcard-ico{width:100%;height:132px;border:1px solid var(--hair);background:#fafafa;display:flex;align-items:center;justify-content:center}
.gcard-ico svg{width:58px;height:58px;stroke:var(--fg);stroke-width:1.3;fill:none;stroke-linecap:round;stroke-linejoin:round}
.gcap{display:flex;flex-direction:column;gap:.15rem}
/* el número, ENORME, como statement gráfico */
.gcap .gn{font-family:var(--display);font-weight:400;font-size:clamp(3rem,5.5vw,5rem);line-height:.82;letter-spacing:-.03em;color:var(--fg);margin-bottom:.3rem}
.gcap h3{font-family:var(--display);font-weight:400;font-size:clamp(1.05rem,1.5vw,1.32rem);letter-spacing:-.01em}
.gcap p{color:var(--soft);font-size:.9rem;line-height:1.5}
.gcap p strong{font-style:italic}
@media(max-width:860px){.gives-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.gives-grid{grid-template-columns:1fr}}

/* ===== CÓMO FUNCIONA — reusa .sys (escena + texto) de mc.css con ILUSTRACIONES ===== */
/* sin recuadro: la ilustración manda (no cajitas) */
/* columna de la ilustración AJUSTADA a la imagen (no un fr enorme): mata el hueco fantasma */
#como .sys-row{grid-template-columns:clamp(170px,20vw,240px) 1fr;gap:clamp(1.6rem,3.5vw,2.8rem);align-items:center}
#como .sys-scene{border:0;background:none;padding:0;min-height:0;justify-content:flex-start}
.sys-ill{max-height:168px;max-width:100%;width:auto;height:auto;object-fit:contain;display:block}
@media(max-width:760px){#como .sys-row{grid-template-columns:1fr;gap:1rem}.sys-ill{max-height:150px}}

/* ===== OFERTA ===== */
.offer{margin-top:clamp(2rem,4vw,3rem)}
.offer-price{font-family:var(--display);font-weight:400;font-size:clamp(3rem,8vw,5.4rem);line-height:1;letter-spacing:-.03em;display:flex;align-items:flex-start;gap:.05em}
.offer-price .cur{font-size:.36em;padding-top:.5em;color:var(--dim)}
.offer-fine{font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.14em;color:var(--dim);margin-top:.7rem}
.offer-incl{list-style:none;margin-top:1.6rem;display:grid;gap:.85rem}
.offer-incl li{display:grid;grid-template-columns:auto 1fr;gap:.7rem;align-items:start;color:var(--soft);font-size:.98rem;line-height:1.5}
.offer-incl li svg{width:20px;height:20px;stroke:var(--accent);stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round;margin-top:.15em}
.offer-cta{margin-top:clamp(1.6rem,3vw,2.2rem)}
.offer-cta .note{font-family:var(--mono);font-size:.72rem;line-height:1.6;color:var(--dim);margin-top:.9rem;max-width:46ch}

/* ===== GARANTÍA ===== */
.guarantee{margin-top:clamp(2.4rem,5vw,3.4rem);display:grid;grid-template-columns:auto 1fr;gap:clamp(1rem,2.5vw,1.4rem);align-items:start}
.guarantee .g-ico{width:46px;height:46px;border:1px solid var(--wf);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.guarantee .g-ico svg{width:24px;height:24px;stroke:var(--fg);stroke-width:1.4;fill:none;stroke-linecap:round;stroke-linejoin:round}
.guarantee h3{font-family:var(--display);font-weight:400;font-size:clamp(1.1rem,1.7vw,1.4rem);margin-bottom:.4rem}
.guarantee p{color:var(--soft);font-size:.95rem;line-height:1.6;max-width:56ch}

/* ===== FAQ — acordeón (mc.js hace el toggle: .faq-item.open + maxHeight) ===== */
.faq-list{margin-top:clamp(2rem,4vw,3rem)}
.faq-item{border-bottom:1px solid var(--hair)}
.faq-item:first-child{border-top:1px solid var(--hair)}
.faq-q{width:100%;text-align:left;background:none;border:0;cursor:pointer;display:flex;align-items:center;gap:.9rem;padding:1.1rem 0;font-family:var(--display);font-weight:400;font-size:clamp(1rem,1.6vw,1.25rem);color:var(--fg);letter-spacing:-.01em}
.faq-q .num{font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;color:var(--dim)}
.faq-q .chev{margin-left:auto;font-family:var(--mono);color:var(--accent);transition:transform .22s}
.faq-item.open .faq-q .chev{transform:rotate(45deg)}
.faq-a{overflow:hidden;max-height:0;transition:max-height .3s cubic-bezier(.2,.7,.2,1)}
.faq-a p{color:var(--soft);font-size:.95rem;line-height:1.6;padding:0 0 1.15rem;max-width:54ch}

/* ===== CTA final ===== */
.cta-actions{display:flex;gap:.9rem;flex-wrap:wrap;margin-top:clamp(1.5rem,3vw,2rem)}