/* Puente entre la hoja de ventas y el header/footer compartidos. */
.product-page .hero{width:100%;max-width:none;padding:64px 0 72px}
.product-page .hero::before{content:none}
.product-page .hero h1{max-width:none}
.product-subnav{background:var(--bg);border-bottom:1px solid var(--line)}
.product-subnav-inner{width:min(1160px,calc(100% - 40px));margin:auto;display:flex;gap:24px;align-items:center;flex-wrap:wrap;padding:12px 0;font-size:var(--text-label);color:var(--muted)}
.product-subnav a:hover{color:var(--ink)}
.product-legal-note{max-width:1040px;margin:0 auto;padding:24px;color:var(--muted);font-size:var(--text-label);text-align:center}
.product-legal-note a{color:var(--accent);text-decoration:underline}
@media(max-width:640px){.product-subnav{display:none}.product-page .mobile-sticky-cta{display:block}.product-page .footer{padding-bottom:88px}}
/* El filete del eyebrow centrado queda huérfano cuando el texto se parte en dos líneas. */
@media(max-width:560px){.final-card .eyebrow:before{display:none}}

/* ── Secciones blancas de las landings (bandas del sistema visual) ──
   El contenido toma los colores de banda blanca (texto y acento negros);
   las tarjetas se mantienen en carbón con texto claro (ambos contextos en
   colors.css) y se despegan del blanco con sombra, como en la home. */
.product-page .visual-band--white :is(.pain-list article,.step-card,.bento-card,.instructor-card,.final-card,details,.price-card){
  background:var(--card-bg);color:var(--ink);box-shadow:var(--shadow-sm);
}
/* Enlace secundario dentro del cierre: área de toque mínima de 24px (WCAG 2.5.8). */
.final-card p > a{display:inline-block;padding:8px 6px;}
/* Etiquetas de la tabla comparativa en móvil: con opacity:.65 sobre blanco daban 3.8:1; ahora usan el texto tenue de la paleta (≥4.5:1). */
.product-page .visual-band--white .table-label{opacity:1;color:var(--faint);}