@layer components{
.tlv2-block{ container-type: inline-size; background: var(--surface-section); color: var(--body-color); }
.tlv2-block .tlv2-container{ margin-inline: auto; padding: var(--space-7) var(--space-4); }
.tlv2-block .title{ color: var(--heading-color); line-height: var(--line-tight); margin: 0 0 var(--space-3); font-weight: var(--weight-bold); }
.tlv2-block .list{ display: grid; gap: var(--space-3); }
.tlv2-block .list .item{ display: grid; gap: var(--space-2); }

/* CTA — base sólida + gradiente opcional (sin shorthand `background`) */
.cta{
  display:inline-flex; align-items:center; justify-content:center;
  padding: calc(var(--space-2) + 2px) calc(var(--space-4) + 2px);
  border-radius: var(--radius-lg); font-weight: var(--weight-medium); text-decoration:none;

  /* Nunca transparente: color base sólido */
  background-color: var(--cta-bg);
  /* Gradiente opcional por tokens (no resetea el color) */
  background-image: var(--cta-gradient, none);
  background-repeat: no-repeat;
  background-origin: padding-box;
  background-position: center;
  background-size: cover;

  color: var(--cta-fg);
  border:1px solid var(--cta-border, transparent);

  box-shadow: var(--shadow-sm);
  transition: background-color .2s ease, box-shadow .2s ease, transform .02s ease;
}

.cta:hover{
  background-color: var(--cta-bg-hover, var(--cta-bg));
  background-image: var(--cta-gradient-hover, var(--cta-gradient, none));
  box-shadow: var(--shadow-md);
}

.cta:active{
  background-color: var(--cta-bg-active, var(--cta-bg-hover, var(--cta-bg)));
  background-image: var(--cta-gradient-active, var(--cta-gradient-hover, var(--cta-gradient, none)));
  transform: translateY(1px);
}

.cta:focus-visible{ outline: 2px solid var(--focus-ring); outline-offset: 3px; }

.tlv2-pack{ background: var(--surface-card); border:1px solid var(--card-border); border-radius: var(--radius-xl); padding: var(--space-4); box-shadow: var(--shadow-sm); }
.faq-item, details{ border:1px solid var(--card-border); border-radius: var(--radius-md); padding: var(--space-3); background: var(--surface-1); }
.tlv2-block[data-tlv2-slug="hero"]{ background: var(--surface-hero); }
.tlv2-block[data-tlv2-slug="hero"] .lead{ color: var(--text-2); margin-bottom: var(--space-4); }
}

/* === [TLV2 CTA PATCH 2025-10-23] Components Map === */
@layer components {
  .cta {
    /* Encadenado a tokens del rol */
    --cta-surface: var(--role-cta-surface);
    --cta-overlay: var(--role-cta-overlay);
    background-color: var(--cta-surface);
    background-image: var(--cta-overlay);
  }
  /* Desktop: CTA sólido (sin overlay) */
  @media (min-width: 1024px) {
    .cta.cta-desktop {
      --cta-overlay: none;
    }
  }
}

/* ==========================================================================
   TLV2 — PATCH (PEGA AL FINAL) para components-map.css
   Objetivo: asegurar que el map incluya .tlv2-cta como target de CTA.
   ========================================================================== */

/* Si ya existe un bloque similar, asegúrate de que incluya .tlv2-cta; de lo contrario, añade este */
.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);
  }
}
/* === TLV2 CTA canonical mapping (applying role variables; no shorthands) === */
.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);
  }
}

/* === TLV2 CTA canonical mapping + legacy alias (.cta[data-cta]) === */
/* Properties only; no shorthands */
.tlv2-page .tlv2-cta,
.tlv2-page .cta[data-cta]{
  background-color: var(--role-cta-surface);
  background-image: var(--role-cta-overlay-desktop);
}
@media (max-width: 768px){
  .tlv2-page .tlv2-cta,
  .tlv2-page .cta[data-cta]{
    background-image: var(--role-cta-overlay-mobile);
  }
}