/* TL V2 — Landing canonical (sin bridge legacy, sólo reglas por bloque)
   Depende de:
   - tl-v2-sets.css (tokens/dials)
   - base.css, utilities.css
   - components-map.css (bridge y estilos base de botones)
*/

.tlv2-page [data-section]{
  padding: var(--section-padding) 0;
  background: var(--section-bg, transparent);
  scroll-margin-top: 80px;
}

.tlv2-page .section-head{ margin-bottom: var(--section-gap); }
.tlv2-page .section-eyebrow{ font-size:.85rem; letter-spacing:.06em; text-transform:uppercase; color: color-mix(in oklab, var(--color-text) 70%, transparent); }
.tlv2-page .section-title{ margin: 0; line-height: var(--lh-heading); color: var(--color-heading); }
.tlv2-page .section-sub{ margin-top: .5rem; color: color-mix(in oklab, var(--color-text) 80%, transparent); max-width: 70ch; }

/* ---------- PROMESA (hero) ---------- */
.tlv2-page [data-section="promesa"] .headline{
  font-size: clamp(28px, 4vw, 44px);
  font-weight: var(--font-weight-bold);
  line-height: var(--lh-heading);
  color: var(--color-heading);
}
.tlv2-page [data-section="promesa"] .sub{
  font-size: clamp(16px, 2vw, 20px);
  color: color-mix(in oklab, var(--color-text) 85%, transparent);
}
.tlv2-page [data-section="promesa"] .actions{
  margin-top: var(--spacing-lg);
  display:flex; gap: var(--spacing-md); flex-wrap:wrap;
}

/* ---------- PROBLEMA ---------- */
.tlv2-page [data-section="problema"] .items{
  display:grid; gap: var(--spacing-lg);
  grid-template-columns: repeat(2, minmax(0,1fr));
}
@media (max-width: 860px){
  .tlv2-page [data-section="problema"] .items{ grid-template-columns: 1fr; }
}
.tlv2-page [data-section="problema"] .item{
  background: var(--surface-card);
  border: var(--panel-border);
  border-radius: var(--panel-radius);
  box-shadow: var(--panel-shadow);
  padding: var(--spacing-xl);
}

/* ---------- INGREDIENTES ---------- */
.tlv2-page [data-section="ingredientes"] .grid-3{
  display:grid; gap: var(--spacing-lg);
  grid-template-columns: repeat(3, minmax(0,1fr));
}
@media (max-width: 1024px){
  .tlv2-page [data-section="ingredientes"] .grid-3{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 680px){
  .tlv2-page [data-section="ingredientes"] .grid-3{ grid-template-columns: 1fr; }
}
.tlv2-page [data-section="ingredientes"] .tlv2-card{ height:100%; background: var(--surface-card); border: var(--panel-border); border-radius: var(--panel-radius); box-shadow: var(--panel-shadow); }
.tlv2-page [data-section="ingredientes"] .media{ border-radius: var(--radius-base); overflow:hidden; }
.tlv2-page [data-section="ingredientes"] .card-title{ font-weight: var(--font-weight-medium); color: var(--color-heading); margin-top: var(--spacing-md); }

/* ---------- GARANTÍA ---------- */
.tlv2-page [data-section="garantia"] .seal{
  font-weight: var(--font-weight-bold);
  font-size: clamp(22px, 3vw, 28px);
  color: var(--color-heading);
}
.tlv2-page [data-section="garantia"] .box{
  background: var(--surface-card);
  border: var(--panel-border);
  border-radius: var(--panel-radius);
  box-shadow: var(--panel-shadow);
  padding: var(--spacing-2xl);
  display:grid; gap: var(--spacing-md);
}


/* ---------- PACKS ---------- */
.tlv2-page [data-section="packs"] .packs-grid{
  display:grid; gap: var(--spacing-lg, 20px);
}
.tlv2-page [data-section="packs"] .packs-3col{ grid-template-columns: repeat(3, minmax(0,1fr)); }
.tlv2-page [data-section="packs"] .packs-2col{ grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (max-width: 1024px){
  .tlv2-page [data-section="packs"] .packs-3col{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 680px){
  .tlv2-page [data-section="packs"] .packs-3col,
  .tlv2-page [data-section="packs"] .packs-2col{ grid-template-columns: 1fr; }
}

.tlv2-page [data-section="packs"] .pack-card{
  background: var(--surface, #fff);
  border: 1px solid var(--border-subtle, #eaeaea);
  border-radius: var(--radius-xl, 16px);
  padding: var(--spacing-lg, 20px);
  display:flex; flex-direction:column; gap: var(--spacing-md, 12px);
  box-shadow: var(--panel-shadow, none);
}
.tlv2-page [data-section="packs"] .pack-card.is-recommended{
  outline: 2px solid var(--brand-primary, currentColor);
  outline-offset: 2px;
}

.tlv2-page [data-section="packs"] .pack-card__header{
  display:flex; align-items:baseline; justify-content:space-between; gap: var(--spacing-sm, 8px);
}
.tlv2-page [data-section="packs"] .pack-card__title{ font-weight: 700; font-size: 1.1rem; }
.tlv2-page [data-section="packs"] .pack-card__tagline{ font-size:.9rem; opacity:.8; }

.tlv2-page [data-section="packs"] .pack-card__media img{ width:100%; height:auto; display:block; }

.tlv2-page [data-section="packs"] .pack-card__features{
  list-style: none; padding:0; margin:0; display:grid; gap: var(--spacing-xxs, 6px);
}
.tlv2-page [data-section="packs"] .pack-card__feature::before{
  content:"• "; opacity:.6;
}

.tlv2-page [data-section="packs"] .pack-card__pricing{ display:grid; gap: var(--spacing-xxs, 6px); }
.tlv2-page [data-section="packs"] .pack-card__price{ font-weight: 800; font-size: 1.25rem; }
.tlv2-page [data-section="packs"] .pack-card__per{ font-size: .9rem; opacity:.8; }
.tlv2-page [data-section="packs"] .pack-card__savings{ font-weight: 700; font-size: .95rem; }
.tlv2-page [data-section="packs"] .pack-card__benefit{ font-size: .9rem; }

.tlv2-page [data-section="packs"] .pack-card__cta{ display:grid; gap: var(--spacing-xs, 8px); }
.tlv2-page [data-section="packs"] .pack-card__btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding: var(--btn-padding, .9rem 1.1rem);
  border-radius: var(--btn-radius, .75rem);
  text-decoration:none;
}
.tlv2-page [data-section="packs"] .pack-card__meta{ font-size: .8rem; opacity:.8; }
.tlv2-page [data-section="packs"] .pack-card__legal{ display:block; font-size: .75rem; opacity:.7; }


/* Prioridad local para tokens de PACKS en la landing (scope .tlv2-page) */
.tlv2-page.tlv2-page{
  --packs-btn-bg: linear-gradient(90deg, #00E061, #00C957);
  --packs-btn-bg-hover: linear-gradient(90deg, #00C957, #00B94F);
}

/* === F13: Packs - asegurar color propio del botón === */
.tlv2-page [data-section="packs"] .pack-card__btn,
.tlv2-page .tl-role-packs {
  background-image: var(--packs-btn-bg, var(--cta-btn-bg)) !important;
  color: var(--cta-btn-text);
}

.tlv2-page [data-section="packs"] .pack-card__btn:hover,
.tlv2-page .tl-role-packs:hover,
.tlv2-page [data-section="packs"] .pack-card__btn:focus,
.tlv2-page .tl-role-packs:focus {
  background-image: var(--packs-btn-bg-hover, var(--packs-btn-bg, var(--cta-btn-bg))) !important;
}

/* Si el gradiente se pinta con ::before en tu stack, cubrirlo también */
.tlv2-page [data-section="packs"] .pack-card__btn::before,
.tlv2-page .tl-role-packs::before {
  background-image: var(--packs-btn-bg, var(--cta-btn-bg)) !important;
}
.tlv2-page [data-section="packs"] .pack-card__btn:hover::before,
.tlv2-page .tl-role-packs:hover::before,
.tlv2-page [data-section="packs"] .pack-card__btn:focus::before,
.tlv2-page .tl-role-packs:focus::before {
  background-image: var(--packs-btn-bg-hover, var(--packs-btn-bg, var(--cta-btn-bg))) !important;
}

/* ---------- TESTIMONIOS ---------- */
.tlv2-page [data-section="testimonios"] .testimonios-grid{
  display:grid; gap: var(--spacing-lg, 20px);
}
.tlv2-page [data-section="testimonios"] .testimonios-3col{ grid-template-columns: repeat(3, minmax(0,1fr)); }
@media (max-width: 1024px){
  .tlv2-page [data-section="testimonios"] .testimonios-3col{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 680px){
  .tlv2-page [data-section="testimonios"] .testimonios-3col{ grid-template-columns: 1fr; }
}
.tlv2-page .t-card{
  background: var(--surface, #fff);
  border: 1px solid var(--border-subtle, #eaeaea);
  border-radius: var(--radius-xl, 16px);
  padding: var(--spacing-lg, 20px);
  display:grid; gap: var(--spacing-sm, 10px);
}
.tlv2-page .t-card__head{ display:flex; gap:12px; align-items:center; }
.tlv2-page .t-card__avatar{ width:48px; height:48px; border-radius:50%; object-fit:cover; }
.tlv2-page .t-card__avatar.placeholder{ width:48px; height:48px; border-radius:50%; background:#eee; }
.tlv2-page .t-card__author{ font-weight:700; }
.tlv2-page .t-card__role{ opacity:.8; font-size:.9rem; margin-left:4px; }
.tlv2-page .t-card__rating .star{ color:#FFD600; opacity:.4; margin-right:2px; }
.tlv2-page .t-card__rating .star.is-on{ opacity:1; }
.tlv2-page .t-card__quote{ font-size:1rem; line-height:1.5; }
.tlv2-page .t-card__quote p{ margin:0; }

/* ---------- FAQ ---------- */
.tlv2-page [data-section="faq"] .faq-accordions{ display:grid; gap: var(--spacing-md, 12px); }
.tlv2-page [data-section="faq"] .faq-item{
  background: var(--surface, #fff);
  border: 1px solid var(--border-subtle, #eaeaea);
  border-radius: var(--radius-xl, 16px);
  padding: var(--spacing-sm, 10px) var(--spacing-md, 12px);
}
.tlv2-page [data-section="faq"] .faq-q{
  cursor:pointer; font-weight:700;
  list-style:none; outline:none;
}
.tlv2-page [data-section="faq"] .faq-a{ padding-top:8px; color: var(--text-body, #111); }
.tlv2-page [data-section="faq"] .faq-item[open] .faq-q{ color: var(--brand-secondary, #00A884); }
/* === Fase 7: pintura trasladada desde components-map.css (auto) === */
/* TL V2 — COMPONENTS MAP (bridge legacy → roles) */
.tlv2-page .btn {
  border-radius: var(--radius-cta);
  border: 1px solid transparent;
}
/* ACTION (secundario) */
.tlv2-page .btn-action {
  background: var(--action-bg);
  color: var(--action-text);
  box-shadow: var(--action-shadow);
  border: var(--action-border);
}
/* CTA (principal) — default */
.tlv2-page .btn-cta {
  background-color: var(--role-cta-surface);
  background-image: var(--role-cta-overlay-desktop);
  color: var(--cta-text);
  box-shadow: var(--ct
@media (max-width: 768px){
  .tlv2-page .btn-cta{
    background-image: var(--role-cta-overlay-mobile);
  }
}a-shadow);
}
.tlv2-page .btn:active {
  filter: brightness(.96);
}
.tlv2-page .btn:focus-visible {
  outline: var(--focus-outline-width) solid var(--focus-outline-color);
  outline-offset: var(--focus-outline-offset);
}
/* ----- Mapeo por bloques (usa dials específicos) ----- */

/* HERO (Promesa) */
.tlv2-page [data-section="promesa"] .btn-cta,
.tlv2-page [data-section="promesa"] .promesa-cta__btn,
.tlv2-page [data-section="promesa"] .cta-desktop {--role-cta-surface: var(--hero-btn-surface, var(--cta-surface, var(--brand-primary, #0D6EFD)));
--role-cta-overlay-desktop: var(--hero-cta-overlay-desktop, none);
--role-cta-overlay-mobile: var(--hero-cta-overlay-mobile,
                               linear-gradient(var(--hero-btn-angle, 120deg),
                                               var(--hero-btn-c1, #FF0066),
                                               var(--hero-btn-c2, #FF9A00)));
  color: var(--hero-btn-text);
  box-shadow: var(--cta-shadow);
}
/* PACKS */
.tlv2-page [data-section="packs"] .btn-cta,
.tlv2-page [data-section="packs"] .boton-comprar {--role-cta-surface: var(--packs-btn-surface, var(--cta-surface, var(--brand-primary, #0D6EFD)));
--role-cta-overlay-desktop: var(--packs-cta-overlay-desktop, none);
--role-cta-overlay-mobile: var(--packs-cta-overlay-mobile,
                               linear-gradient(var(--packs-btn-angle, 120deg),
                                               var(--packs-btn-c1, #FF0066),
                                               var(--packs-btn-c2, #FF9A00)));
  color: var(--packs-btn-text);
  box-shadow: var(--cta-shadow);
}
/* CTA FINAL */
.tlv2-page [data-section="cta-final"] .btn-cta,
.tlv2-page [data-section="cta-final"] .cta-final__btn {--role-cta-surface: var(--final-btn-surface, var(--cta-surface, var(--brand-primary, #0D6EFD)));
--role-cta-overlay-desktop: var(--final-cta-overlay-desktop, none);
--role-cta-overlay-mobile: var(--final-cta-overlay-mobile,
                               linear-gradient(var(--final-btn-angle, 120deg),
                                               var(--final-btn-c1, #FF0066),
                                               var(--final-btn-c2, #FF9A00)));
  color: var(--final-btn-text);
  box-shadow: var(--cta-shadow);
}
/* WhatsApp */
.tlv2-page .btn-wa {
  background: linear-gradient(var(--wa-btn-angle), var(--wa-btn-c1), var(--wa-btn-c2));
  color: #fff;
  box-shadow: var(--cta-shadow);
  border: none;
}
/* Bridge de algunas clases legacy comunes */
.tlv2-page .promesa-cta__btn,
.tlv2-page .cta-desktop,
.tlv2-page .cta-final__btn,
.tlv2-page .packs .boton-comprar {
  border-radius: var(--radius-cta);
  border: 1px solid transparent;
}
.tlv2-page [data-section="packs"] .oferta-card {
  background: var(--surface-card);
  border: var(--panel-border);
  border-radius: var(--panel-radius);
  box-shadow: var(--panel-shadow);
}
.tlv2-page [data-section="packs"] .precio {
  color: var(--color-heading);
}
/* Badge “Más vendido” como chip */
.tlv2-page [data-section="packs"] .badge-topventas {
  background: color-mix(in oklab, var(--brand-primary) 14%, transparent);
  border: 1px solid color-mix(in oklab, var(--brand-primary) 32%, transparent);
  color: var(--color-heading);
  border-radius: var(--radius-base);
}
/* Línea “envío/pago” */
.tlv2-page [data-section="packs"] .envio-pago {
  color: color-mix(in oklab, var(--color-text) 75%, transparent);
}
.tlv2-page [data-section="testimonios"] .testimonio-card {
  background: var(--surface-card);
  border: var(--panel-border);
  border-radius: var(--panel-radius);
  box-shadow: var(--panel-shadow);
}
.tlv2-page [data-section="testimonios"] .testimonio-quote p {
  color: var(--color-text);
}
.tlv2-page [data-section="testimonios"] .avatar {
  border-radius: 999px;
  background: color-mix(in oklab, var(--brand-primary) 25%, transparent);
  border: 1px solid color-mix(in oklab, var(--brand-primary) 45%, transparent);
}
.tlv2-page [data-section="testimonios"] .nombre {
  color: var(--color-heading);
}
.tlv2-page [data-section="testimonios"] .detalle {
  color: color-mix(in oklab, var(--color-text) 70%, transparent);
}
.tlv2-page [data-section="faq"] .faq-item {
  background: var(--surface-card);
  border: var(--panel-border);
  border-radius: var(--panel-radius);
  box-shadow: var(--panel-shadow);
}
.tlv2-page [data-section="faq"] .faq-q {
  color: var(--color-heading);
}
.tlv2-page [data-section="faq"] .faq-a {
  color: var(--color-text);
}
.tlv2-page [data-section="cta-final"] .cta-final__legal {
  color: color-mix(in oklab, var(--color-text) 70%, transparent);
}

/* ===== Fase 7b — Bridge V2 (clases reales de los parciales) ===== */
.tlv2-page .tlv2-container{
  width:100%;
  max-width: var(--container-width-md, 1080px);
  margin-inline: auto;
  padding-inline: var(--section-padding-inline, 16px);
}

.tlv2-page .tlv2-section{
  padding-block: var(--section-padding-block, 48px);
}

.tlv2-page .tlv2-hero__inner{
  max-width: var(--container-width-lg, 1200px);
  margin-inline: auto;
  text-align: center;
}

/* Botones canónicos V2 */
.tlv2-page .tlv2-btn{
  display: inline-block;
  padding: 0.75rem 1.25rem;
  border-radius: var(--btn-radius, 8px);
  font-weight: 600;
  text-decoration: none;
  line-height: 1.1;
}

/* CTA principal (hero, CTA final) y alias packs — CANÓNICO (sin shorthand) */
.tlv2-page .tlv2-cta,
.tlv2-page .tlv2-packs .boton-comprar{
  background-color: var(--role-cta-surface);
  background-image: var(--role-cta-overlay-desktop);
  color: var(--btn-primary-color, #ffffff);
}
@media (max-width: 768px){
  .tlv2-page .tlv2-cta,
  .tlv2-page .tlv2-packs .boton-comprar{
    background-image: var(--role-cta-overlay-mobile);
  }
}
.tlv2-page .tlv2-btn-primary:hover,
.tlv2-page .tlv2-cta:hover,
.tlv2-page .tlv2-packs .boton-comprar:hover{
  filter: brightness(1.05);
}

/* ========= TLV2 — MODAL: visibilidad + overlay + dialog centrado ========= */

/* Estado base: oculto */
.modal-formulario,
#popupFormulario,
.tlv2-modal{
  display:none;
  visibility:hidden;
  opacity:0;
}

/* Estado abierto (por clase o por flag en <html>) */
.modal-formulario.is-open,
#popupFormulario.is-open,
.tlv2-modal.is-open,
html.tlv2-modal-open .modal-formulario,
html.tlv2-modal-open #popupFormulario,
html.tlv2-modal-open .tlv2-modal{
  position:fixed !important;
  inset:0 !important;                  /* top:0; right:0; bottom:0; left:0 */
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  z-index:2147483647 !important;       /* por encima de admin bar y menú */
  pointer-events:auto !important;
  isolation:isolate;                   /* nuevo stacking context */
  /* Usamos grid para centrar el dialog aunque el HTML sea variable */
  display:grid !important;
  place-items:center !important;
}

/* Overlay: si tu wrapper no trae fondo propio, créalo aquí */
.modal-formulario.is-open::before,
#popupFormulario.is-open::before,
.tlv2-modal.is-open::before,
html.tlv2-modal-open .modal-formulario::before,
html.tlv2-modal-open #popupFormulario::before,
html.tlv2-modal-open .tlv2-modal::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.6);
  pointer-events:auto;                 /* evita click-through al fondo */
}

/* Dialog genérico (primer hijo ELEMENTO del wrapper):
   - Si tu HTML del modal es distinto, esto igual atrapa el contenedor visible */
.modal-formulario.is-open > *:first-child,
#popupFormulario.is-open > *:first-child,
.tlv2-modal.is-open > *:first-child,
html.tlv2-modal-open .modal-formulario > *:first-child,
html.tlv2-modal-open #popupFormulario > *:first-child,
html.tlv2-modal-open .tlv2-modal > *:first-child{
  position:relative;
  box-sizing:border-box;
  width:min(94vw, 720px);
  max-height:88vh;
  overflow:auto;
  background:#fff;                     /* asegúrate de ver contenido */
  border-radius:12px;
  padding:24px;
  box-shadow:0 20px 60px rgba(0,0,0,.25);
  z-index:1;                           /* sobre el ::before del overlay */
}

/* Si tu contenido es un form de Forminator, hereda el look del dialog */
.modal-formulario.is-open .forminator-custom-form,
#popupFormulario.is-open .forminator-custom-form,
.tlv2-modal.is-open .forminator-custom-form{
  background:transparent;  /* el fondo ya lo da el contenedor padre */
  box-shadow:none;
}

/* Bloquear scroll del fondo cuando el modal está abierto */
html.tlv2-modal-open,
html.tlv2-modal-open body{
  overflow:hidden !important;
}

/* (Opcional) cierra brechas de “click-through” de cabeceras muy agresivas */
.site-header, .main-navigation{
  /* por si el theme mete z-index altísimo, esto evita que tape el modal */
  z-index:auto !important;
}

/* ==========================================================================
   TLV2 — PATCH (PEGA AL FINAL) para landing-turbolanding.css
   Objetivo: aplicar propiedades de CTA SOLO a .tlv2-cta y mover contexto a VARIABLES.
   Nota: NO usar shorthands. No tocar otras reglas.
   ========================================================================== */

/* 1) Aplicación de propiedades canónica (desktop/móvil) */
.tlv2-page .tlv2-cta{
  background-color: var(--role-cta-surface);
  background-image: var(--role-cta-overlay-desktop);
}
@media (max-width: 768px){
  .tlv2-page .tlv2-cta{
    background-image: var(--role-cta-overlay-mobile);
  }
}

/* 2) Contexto por sección: SOLO VARIABLES (no propiedades aquí) */
.tlv2-page [data-section="promesa"] .tlv2-cta{
  --role-cta-surface: var(--hero-btn-surface, var(--role-cta-surface));
  --role-cta-overlay-desktop: var(--hero-cta-overlay-desktop, var(--role-cta-overlay-desktop));
  --role-cta-overlay-mobile:  var(--hero-cta-overlay-mobile,  var(--role-cta-overlay-mobile));
}
.tlv2-page [data-section="packs"] .tlv2-cta{
  --role-cta-surface: var(--packs-btn-surface, var(--role-cta-surface));
  --role-cta-overlay-desktop: var(--packs-cta-overlay-desktop, var(--role-cta-overlay-desktop));
  --role-cta-overlay-mobile:  var(--packs-cta-overlay-mobile,  var(--role-cta-overlay-mobile));
}
.tlv2-page [data-section="cta-final"] .tlv2-cta{
  --role-cta-surface: var(--final-btn-surface, var(--role-cta-surface));
  --role-cta-overlay-desktop: var(--final-cta-overlay-desktop, var(--role-cta-overlay-desktop));
  --role-cta-overlay-mobile:  var(--final-cta-overlay-mobile,  var(--role-cta-overlay-mobile));
}

/* 3) Deprecations (NO BORRAR aquí; migra markup a .tlv2-cta y deja estas sin reglas)
   .btn-cta, .tlv2-btn-primary, .boton-comprar, .cta-desktop, .cta-final__btn, .cta-final-cta
*/

/* === TLV2 CTA per-section variables (target .tlv2-cta and legacy .cta[data-cta]) === */
.tlv2-page [data-section="promesa"] .tlv2-cta,
.tlv2-page [data-section="promesa"] .cta[data-cta="hero"]{
  --role-cta-surface: var(--hero-btn-surface, var(--role-cta-surface));
  --role-cta-overlay-desktop: var(--hero-cta-overlay-desktop, var(--role-cta-overlay-desktop));
  --role-cta-overlay-mobile:  var(--hero-cta-overlay-mobile,  var(--role-cta-overlay-mobile));
}

.tlv2-page [data-section="packs"] .tlv2-cta,
.tlv2-page [data-section="packs"] .cta[data-cta="packs"]{
  --role-cta-surface: var(--packs-btn-surface, var(--role-cta-surface));
  --role-cta-overlay-desktop: var(--packs-cta-overlay-desktop, var(--role-cta-overlay-desktop));
  --role-cta-overlay-mobile:  var(--packs-cta-overlay-mobile,  var(--role-cta-overlay-mobile));
}

.tlv2-page [data-section="cta-final"] .tlv2-cta,
.tlv2-page [data-section="cta-final"] .cta[data-cta="cta-final"]{
  --role-cta-surface: var(--final-btn-surface, var(--role-cta-surface));
  --role-cta-overlay-desktop: var(--final-cta-overlay-desktop, var(--role-cta-overlay-desktop));
  --role-cta-overlay-mobile:  var(--final-cta-overlay-mobile,  var(--role-cta-overlay-mobile));
}