@layer bridge{
/* Bridge.css — temporal, alias V1 mínimos */
.tlv2-packs-grid.packs-grid{ display:grid; gap:var(--space-4); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.tlv2-pack.pack-card{ /* multiclase legacy: estilos mínimos si es necesario */ }
blockquote.testimonio, .testimonio.item{ border-left:3px solid var(--accent-500); padding-left: var(--space-3); }
.oferta-card{ border:1px dashed var(--card-border); padding: var(--space-3); border-radius: var(--radius-md); }
}

@layer bridge {
  /* Alias V1 → roles con mayor especificidad (sin !important) */
  .cta.cta-desktop,
  .cta.cta-mobile,
  .btn-cta.cta,
  .tlv2-btn.cta {
    background-color: var(--role-cta-bg);
    color: var(--role-cta-fg);
    border: 1px solid var(--role-cta-border, transparent);
  }

  .cta.cta-desktop:hover,
  .cta.cta-mobile:hover,
  .btn-cta.cta:hover,
  .tlv2-btn.cta:hover {
    background-color: var(--role-cta-bg-hover, var(--role-cta-bg));
    color: var(--role-cta-fg-hover, var(--role-cta-fg));
  }
}

/* --- TLV2 Bridge Patch (final, unlayered): desktop con base + gradiente --- */
/* Debe ir FUERA de cualquier @layer y al FINAL del archivo */
a.cta.cta-desktop {
  /* Forzamos color + imagen en una sola declaración para ganar al shorthand tardío */
  
  color: var(--role-cta-fg);
  border: 1px solid var(--role-cta-border, transparent);
}
a.cta.cta-desktop:hover {
  
  color: var(--role-cta-fg-hover, var(--role-cta-fg));
}

/* [TLV2 CLOSEOUT 2025-10-24] CTA rules cleansed in bridge.css */
/* === MIGRATED from /css/tl-v2-cta-bridge.css === */
/* TL-V2 CTA Bridge — alta especificidad + fallbacks (temporal con !important) */
:root{
  --radius-cta: var(--radius-xl, 16px);
  --focus-color: #111;
  --focus-ring: 2px;
  --_cta-bg-fallback: linear-gradient(90deg, #00FF6E, #00E061);
  --_cta-text-fallback: #0a0a0a;
}

/* Garantiza que los .btn del contenido se comporten como botones */
:where(.entry-content, .inside-article, .site-content, main) .btn,
:where(.entry-content, .inside-article, .site-content, main) .button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
}

/* Mapeo CTA (legacy + alias comunes) con especificidad alta y !important */
:where(.entry-content, .inside-article, .site-content, main) a.btn.btn--cta,
:where(.entry-content, .inside-article, .site-content, main) a.btn.cta-primary,
:where(.entry-content, .inside-article, .site-content, main) .btn--cta,
:where(.entry-content, .inside-article, .site-content, main) .cta-primary,
:where(.entry-content, .inside-article, .site-content, main) .btn-cta,
:where(.entry-content, .inside-article, .site-content, main) .cta-btn,
:where(.entry-content, .inside-article, .site-content, main) .tl-cta,
:where(.entry-content, .inside-article, .site-content, main) .boton-cta,
:where(.entry-content, .inside-article, .site-content, main) .cta-final-cta,
:where(.entry-content, .inside-article, .site-content, main) .garantia-cta,
:where(.entry-content, .inside-article, .site-content, main) button[type="submit"],
:where(.entry-content, .inside-article, .site-content, main) input[type="submit"]{
  background-image: var(--cta-btn-bg, var(--_cta-bg-fallback)) !important;
  background-color: var(--cta-btn-bg, var(--_cta-bg-fallback)) !important;
  background-image: none;
  color: var(--text-on-cta, var(--_cta-text-fallback)) !important;
  border: none !important;
  border-radius: var(--radius-cta) !important;
  padding: calc(var(--pad-md,12px) * 1.1) calc(var(--pad-md,12px) * 1.6) !important;
  cursor: pointer !important;
  line-height: 1.1 !important;
  text-align: center !important;
  box-shadow: 0 0 0 0 rgba(0,0,0,0) !important;
  transition: background .2s ease, transform .06s ease, box-shadow .06s ease !important;
}

:where(.entry-content, .inside-article, .site-content, main) a.btn.btn--cta:hover,
:where(.entry-content, .inside-article, .site-content, main) a.btn.cta-primary:hover,
:where(.entry-content, .inside-article, .site-content, main) .btn--cta:hover,
:where(.entry-content, .inside-article, .site-content, main) .cta-primary:hover,
:where(.entry-content, .inside-article, .site-content, main) .btn-cta:hover,
:where(.entry-content, .inside-article, .site-content, main) .cta-btn:hover,
:where(.entry-content, .inside-article, .site-content, main) .tl-cta:hover,
:where(.entry-content, .inside-article, .site-content, main) .boton-cta:hover,
:where(.entry-content, .inside-article, .site-content, main) .cta-final-cta:hover,
:where(.entry-content, .inside-article, .site-content, main) .garantia-cta:hover,
:where(.entry-content, .inside-article, .site-content, main) button[type="submit"]:hover,
:where(.entry-content, .inside-article, .site-content, main) input[type="submit"]:hover{
  background-image: var(--cta-btn-bg-hover, var(--cta-btn-bg, var(--_cta-bg-fallback))) !important;
  background-color: var(--cta-btn-bg-hover, var(--cta-btn-bg, var(--_cta-bg-fallback))) !important;
  background-image: none;
  transform: translateY(-1px) !important;
}

:where(.entry-content, .inside-article, .site-content, main) a.btn.btn--cta:focus-visible,
:where(.entry-content, .inside-article, .site-content, main) a.btn.cta-primary:focus-visible,
:where(.entry-content, .inside-article, .site-content, main) .btn--cta:focus-visible,
:where(.entry-content, .inside-article, .site-content, main) .cta-primary:focus-visible,
:where(.entry-content, .inside-article, .site-content, main) .btn-cta:focus-visible,
:where(.entry-content, .inside-article, .site-content, main) .cta-btn:focus-visible,
:where(.entry-content, .inside-article, .site-content, main) .tl-cta:focus-visible,
:where(.entry-content, .inside-article, .site-content, main) .boton-cta:focus-visible,
:where(.entry-content, .inside-article, .site-content, main) .cta-final-cta:focus-visible,
:where(.entry-content, .inside-article, .site-content, main) .garantia-cta:focus-visible,
:where(.entry-content, .inside-article, .site-content, main) button[type="submit"]:focus-visible,
:where(.entry-content, .inside-article, .site-content, main) input[type="submit"]:focus-visible{
  outline: var(--focus-ring) solid transparent !important;
  box-shadow: 0 0 0 calc(var(--focus-ring) + 1px) rgba(255,255,255,.9), 0 0 0 calc(var(--focus-ring) + 2px) var(--focus-color) !important;
}

:where(.entry-content, .inside-article, .site-content, main) a.btn.btn--cta:active,
:where(.entry-content, .inside-article, .site-content, main) a.btn.cta-primary:active,
:where(.entry-content, .inside-article, .site-content, main) .btn--cta:active,
:where(.entry-content, .inside-article, .site-content, main) .cta-primary:active,
:where(.entry-content, .inside-article, .site-content, main) .btn-cta:active,
:where(.entry-content, .inside-article, .site-content, main) .cta-btn:active,
:where(.entry-content, .inside-article, .site-content, main) .tl-cta:active,
:where(.entry-content, .inside-article, .site-content, main) .boton-cta:active,
:where(.entry-content, .inside-article, .site-content, main) .cta-final-cta:active,
:where(.entry-content, .inside-article, .site-content, main) .garantia-cta:active,
:where(.entry-content, .inside-article, .site-content, main) button[type="submit"]:active,
:where(.entry-content, .inside-article, .site-content, main) input[type="submit"]:active{
  transform: translateY(0) !important;
  filter: saturate(1.05) !important;
}

@layer bridge {
  /* Bridge: alias V1 mínimos (packs-grid, pack-card, testimonio) */
}

/* === TLV2 CTA FIX (neutraliza shorthand y asegura color/overlay) === */

/* Desktop: color sólido + sin repetir */
@media (min-width: 769px){
  .tlv2-page .btn-cta,
  .tlv2-page .cta-desktop,
  .tlv2-page .cta-final__btn,
  .cta,
  .cta-final-cta {
    background-image: var(--role-cta-overlay-desktop) !important; /* normalmente: none */
    background-color: var(--role-cta-surface, var(--color-primary, #0d6efd)) !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: center !important;
  }
}

/* Móvil: overlay controlado por variable */
@media (max-width: 768px){
  .tlv2-page .btn-cta,
  .tlv2-page .cta-desktop,
  .tlv2-page .cta-final__btn,
  .cta,
  .cta-final-cta {
    background-image: var(--role-cta-overlay-mobile) !important; /* por defecto: gradient suave */
    background-color: var(--role-cta-surface, var(--color-primary, #0d6efd)) !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: center !important;
  }
}

/* DEBUG: quitar al final */
html { outline: 3px solid lime !important; }