/* ============================================================
  TLV2 — components-map.css
  ------------------------------------------------------------
  Propósito:
  - MAPEAR roles/tokens → variables de componentes (NO pinta).
  - La “pintura” (propiedades reales) vive en assets/css/base.css
    (component painter) y en assets/css/landing.css (layout/página).
  - assets/css/presets.css solo define variables (inputs) que el painter consume.

  Regla:
  - En este archivo NO se usan propiedades como background-color, border,
    box-shadow, etc. Solo se declaran variables CSS.
============================================================ */

/* ------------------------------------------------------------
  1) CTA (map roles → vars de componente)
------------------------------------------------------------ */

:where(main.tlv2-page, .tlv2-modal){
  /* Defaults del componente CTA (ajustables por presets/landing) */
  --cta-min-h: 52px;
  --cta-pad-x: 20px;
  --cta-border-width: 1px;

  /* Overlays del CTA (desktop/móvil)
     - Por defecto, se mapean desde roles.
     - Presets pueden sobrescribir --cta-overlay-desktop / --cta-overlay-mobile. */
  --cta-overlay-desktop: var(--role-cta-overlay-desktop, none);
  --cta-overlay-mobile: var(--role-cta-overlay-mobile, none);
  --cta-radius: var(--role-cta-radius, var(--radius-cta, 12px));

  /* CROMA-FAM-01 — bridges de consumo contextual
     No pintan nada: solo publican foreground/chrome shared. */
  --tlv2-copy-heading: var(--role-context-heading, var(--role-heading-color, var(--role-text-strong, var(--color-text-0, #111827))));
  --tlv2-copy-body: var(--role-context-body, var(--role-body-color, var(--role-text, var(--color-text-0, #111827))));
  --tlv2-copy-muted: var(--role-context-on-muted, var(--role-muted-color, var(--role-text-muted, var(--color-text-muted, #6b7280))));
  --tlv2-chrome-border: var(--role-context-border, var(--role-border-color, rgba(0,0,0,.12)));
  --tlv2-chrome-divider: var(--role-context-divider, color-mix(in oklch, var(--tlv2-chrome-border) 58%, transparent));
  --tlv2-chrome-border-strong: var(--role-context-border-strong, var(--role-border-strong, color-mix(in oklch, var(--tlv2-chrome-border) 68%, black 32%)));
  --tlv2-focus-ring: var(--role-context-focus-ring, color-mix(in oklch, var(--role-focus-ring-color, var(--role-primary, oklch(0.62 0.13 210))) 20%, transparent));
}

/* PS1 — canonical text semantics bridge.
   - components-map publica los rails shared/root.
   - landing.css consume root roles y deja de republicar authority shared. */
:where(main.tlv2-page) [data-surface-slot="section-root"]{
  /* FG-BRIDGE-ROOT-01 — root copy vive en roles.css; components-map solo bridgea hacia rails de consumo.
     No redefine foreground semántico global ni republíca una segunda autoridad de contexto. */
  --tlv2-root-copy-heading: var(--role-context-root-copy-heading, var(--role-context-heading, var(--color-text-0, #111827)));
  --tlv2-root-copy-body: var(--role-context-root-copy-body, var(--role-context-body, var(--color-text-0, #111827)));
  --tlv2-root-copy-muted: var(--role-context-root-copy-muted, var(--role-context-on-muted, var(--color-text-muted, #6b7280)));
  --tlv2-root-copy-subtitle: var(--role-context-root-copy-subtitle, var(--tlv2-root-copy-muted));
  --tlv2-root-copy-list: var(--role-context-root-copy-list, var(--tlv2-root-copy-body));
  /* Compat temporal para consumers legacy: aliases de consumo, no authority. */
  --role-heading-color: var(--tlv2-root-copy-heading);
  --role-body-color: var(--tlv2-root-copy-body);
  --role-muted-color: var(--tlv2-root-copy-muted);
  --role-fg: var(--role-body-color);
  --tlv2-copy-heading: var(--tlv2-root-copy-heading);
  --tlv2-copy-body: var(--tlv2-root-copy-body);
  --tlv2-copy-muted: var(--tlv2-root-copy-muted);

  /* F7-B1 — rails shared de materialidad de root.
     Solo publica semántica reutilizable: landing.css consume estos rails
     para leer base / section / elevated con menos planitud y sin pintar por bloque. */
  --tlv2-root-accent-source: var(--role-primary, var(--role-accent, var(--role-surface-section, var(--role-surface-base, #fff))));
  --tlv2-root-shell-seam-top: inset 0 1px 0 color-mix(in oklch, white 18%, transparent);
  --tlv2-root-shell-seam-bottom: inset 0 -1px 0 color-mix(in oklch, var(--role-border-color, rgba(0,0,0,.12)) 18%, transparent);
  --tlv2-root-shell-seam-bottom-strong: inset 0 -1px 0 color-mix(in oklch, var(--role-border-color, rgba(0,0,0,.12)) 28%, transparent);
}


:where(main.tlv2-page) [data-surface-slot="panel-local"]{
  --role-heading-color: var(--role-context-heading, var(--tlv2-copy-heading));
  --role-body-color: var(--role-context-body, var(--tlv2-copy-body));
  --role-muted-color: var(--role-context-on-muted, var(--tlv2-copy-muted));
  --role-fg: var(--role-body-color);

  /* F7-B1 — recipe shared de shell local/panel.
     Sigue siendo publication-only: no pinta directamente; landing.css consume. */
  --tlv2-panel-local-surface: var(--role-surface-family-surface, var(--role-surface-elevated, #fff));
  --tlv2-panel-local-surface-2: var(--role-surface-family-surface-2, var(--tlv2-panel-local-surface));
  --tlv2-panel-local-border: var(--role-surface-family-border, var(--role-border-color, rgba(0,0,0,.12)));
  --tlv2-panel-local-highlight: inset 0 1px 0 color-mix(in oklch, white 24%, transparent);
  --tlv2-panel-local-shadow: 0 22px 54px -42px color-mix(in oklch, black 20%, transparent), 0 8px 18px -16px color-mix(in oklch, black 14%, transparent);
}

/* Shared primitive — split-media frame / empty-state
   La shell manda; el placeholder obedece el slot y no define escala por sí solo. */
:where(.tlv2-split-media__frame){
  box-sizing: border-box;
  display: block;
  inline-size: min(100%, var(--tlv2-split-media-frame-max-inline, 100%));
  max-inline-size: 100%;
  margin-inline: auto;
  border: var(--tlv2-split-media-frame-border, 0 solid transparent);
  border-radius: var(--tlv2-split-media-radius, 18px);
  background: var(--tlv2-split-media-frame-surface, transparent);
  background-clip: padding-box;
  box-shadow: var(--tlv2-split-media-frame-shadow, none);
  padding: var(--tlv2-split-media-frame-pad-effective, 0px);
  overflow: visible;
  isolation: isolate;
}

:where(.tlv2-split-media__figure){
  margin: 0;
  inline-size: 100%;
  aspect-ratio: var(--tlv2-split-media-figure-ratio, 1 / 1);
  min-block-size: 0;
  overflow: hidden;
  display: grid;
  place-items: center;
  border-radius: inherit;
  background: var(--tlv2-split-media-figure-surface, transparent);
}

:where(.tlv2-split-media__img){
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: var(--tlv2-split-media-object-fit, contain);
  object-position: center;
  border-radius: inherit;
}

:where(.tlv2-split-media__placeholder){
  inline-size: 100%;
  aspect-ratio: var(--tlv2-split-media-figure-ratio, 1 / 1);
  min-block-size: 0;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  text-align: center;
  gap: .35rem;
  padding: clamp(.9rem, 1.2vw + .65rem, 1.2rem);
  border: 1px dashed var(--tlv2-split-media-placeholder-border, color-mix(in oklch, currentColor 24%, transparent));
  border-radius: inherit;
  background: var(--tlv2-split-media-placeholder-surface, transparent);
  color: var(--tlv2-split-media-placeholder-foreground, currentColor);
}

:where(.tlv2-split-media__placeholder > p){
  margin: 0;
  font-weight: 700;
  line-height: 1.1;
}

:where(.tlv2-split-media__placeholder > small){
  display: block;
  max-inline-size: min(18ch, 100%);
  opacity: .78;
}

/* Selectores: CTA principal + aliases del sistema */
:where(main.tlv2-page, .tlv2-modal) .cta,
:where(main.tlv2-page, .tlv2-modal) .cta-desktop,
:where(main.tlv2-page, .tlv2-modal) .cta-mobile,
:where(main.tlv2-page, .tlv2-modal) .tlv2-cta,
:where(main.tlv2-page, .tlv2-modal) .boton-comprar{
  /* Colores y efectos (variables) */
  --cta-bg: var(--role-cta-surface, var(--role-primary, #111));
  --cta-fg: var(--role-cta-foreground, var(--role-on-primary, #fff));
  --cta-border: var(--role-cta-border, transparent);
  --cta-shadow: var(--role-cta-shadow, none);
}

/* CTA Primary — especie oficial de accion dominante.
   Se usa como semilla compartida entre Hero y CTA Final en FDN-S7-S2. */
:where(main.tlv2-page, .tlv2-modal) :is(.cta-primary){
  --cta-bg: var(--role-button-primary-surface, var(--role-cta-surface, var(--role-primary, #111)));
  --cta-fg: var(--role-button-primary-foreground, var(--role-cta-foreground, var(--role-on-primary, #fff)));
  --cta-border: var(--role-button-primary-border, var(--role-cta-border, transparent));
  --cta-bg-hover: var(--role-cta-surface-hover, var(--cta-bg));
  --cta-fg-hover: var(--role-cta-foreground-hover, var(--cta-fg));
  --cta-border-hover: var(--role-cta-border-hover, var(--cta-border));
  --cta-bg-active: var(--role-cta-surface-active, var(--cta-bg-hover, var(--cta-bg)));
  --cta-fg-active: var(--role-cta-foreground-active, var(--cta-fg-hover, var(--cta-fg)));
  --cta-border-active: var(--role-cta-border-active, var(--cta-border-hover, var(--cta-border)));
  --cta-shadow: 0 14px 28px -22px color-mix(in oklch, var(--role-primary, black) 28%, transparent);
  --cta-shadow-hover: 0 18px 34px -24px color-mix(in oklch, var(--role-primary, black) 34%, transparent);
  --cta-shadow-active: 0 10px 22px -22px color-mix(in oklch, var(--role-primary, black) 22%, transparent);
}

/* ------------------------------------------------------------
  2) Variantes de CTA (solo variables)
------------------------------------------------------------ */

/* Secundario — familia neutral (N3 Buttons)
   Canonical: .cta--secondary
   Compat: .cta-secondary / .hero-secondary / .cta-final-secondary */
:where(main.tlv2-page, .tlv2-modal) :is(.cta--secondary, .cta-secondary, .hero-secondary, .cta-final-secondary){
  --cta-bg: var(--role-context-button-secondary-surface, var(--role-button-secondary-surface, var(--role-surface-elevated, #fff)));
  --cta-fg: var(--role-context-button-secondary-foreground, var(--role-button-secondary-foreground, var(--role-on-elevated, var(--role-primary, #111))));
  --cta-border: var(--role-context-button-secondary-border, var(--role-button-secondary-border, var(--role-border-color, rgba(0,0,0,.12))));
  --cta-bg-hover: var(--role-context-button-secondary-surface-hover, var(--role-button-secondary-surface-hover, var(--cta-bg)));
  --cta-fg-hover: var(--role-context-button-secondary-foreground-hover, var(--role-button-secondary-foreground-hover, var(--cta-fg)));
  --cta-border-hover: var(--role-context-button-secondary-border-hover, var(--role-button-secondary-border-hover, var(--cta-border)));
  --cta-bg-active: var(--role-context-button-secondary-surface-active, var(--role-button-secondary-surface-active, var(--cta-bg-hover, var(--cta-bg))));
  --cta-fg-active: var(--role-context-button-secondary-foreground-active, var(--role-button-secondary-foreground-active, var(--cta-fg-hover, var(--cta-fg))));
  --cta-border-active: var(--role-context-button-secondary-border-active, var(--role-button-secondary-border-active, var(--cta-border-hover, var(--cta-border))));
  --cta-bg-disabled: var(--role-button-secondary-surface-disabled, var(--cta-bg));
  --cta-fg-disabled: var(--role-button-secondary-foreground-disabled, var(--cta-fg));
  --cta-border-disabled: var(--role-button-secondary-border-disabled, var(--cta-border));
  --cta-shadow: var(--role-context-button-secondary-shadow, var(--role-button-secondary-shadow, none));
  --cta-shadow-hover: var(--role-context-button-secondary-shadow-hover, var(--role-button-secondary-shadow-hover, var(--cta-shadow)));
  --cta-shadow-active: var(--role-context-button-secondary-shadow-active, var(--role-button-secondary-shadow-active, var(--cta-shadow)));
  --cta-overlay-desktop: none;
  --cta-overlay-mobile: none;
}

/* CTA Card Select — especie de accion compacta dentro de Packs.
   Mantiene la gramática CTA del sistema, con escala de card-select. */
:where(main.tlv2-page) #packs .pack-card .cta-group :is(.cta, .tlv2-cta, .boton-comprar):not(.cta--secondary):not(.cta-secondary){
  --cta-bg: var(--role-cta-card-select-surface, var(--role-button-primary-surface, var(--role-primary, #111)));
  --cta-fg: var(--role-cta-card-select-foreground, var(--role-button-primary-foreground, var(--role-on-primary, #fff)));
  --cta-border: var(--role-cta-card-select-border, var(--role-button-primary-border, transparent));
  --cta-bg-hover: var(--role-cta-surface-hover, var(--cta-bg));
  --cta-fg-hover: var(--role-cta-foreground-hover, var(--cta-fg));
  --cta-border-hover: var(--role-cta-border-hover, var(--cta-border));
  --cta-bg-active: var(--role-cta-surface-active, var(--cta-bg-hover, var(--cta-bg)));
  --cta-fg-active: var(--role-cta-foreground-active, var(--cta-fg-hover, var(--cta-fg)));
  --cta-border-active: var(--role-cta-border-active, var(--cta-border-hover, var(--cta-border)));
  --cta-shadow: var(--role-cta-card-select-shadow, var(--role-cta-shadow, none));
  --cta-shadow-hover: var(--role-cta-card-select-shadow-hover, var(--cta-shadow));
  --cta-shadow-active: var(--role-cta-card-select-shadow-active, var(--cta-shadow));
  --cta-min-h: var(--role-cta-card-select-min-h, 44px);
  --cta-pad-x: var(--role-cta-card-select-pad-x, 18px);
  --cta-radius: var(--role-cta-card-select-radius, var(--role-cta-radius, var(--radius-cta, 12px)));
}

/* CTA Submit — especie de cierre/envío del modal.
   Deriva de primary, pero con mayor peso visual que card-select. */
:where(#popupFormulario.tlv2-modal) .forminator-ui :is(.forminator-button,.forminator-button-submit){
  --cta-bg: var(--role-cta-submit-surface, var(--role-button-primary-surface, var(--role-primary, #111)));
  --cta-fg: var(--role-cta-submit-foreground, var(--role-button-primary-foreground, var(--role-on-primary, #fff)));
  --cta-border: var(--role-cta-submit-border, var(--role-button-primary-border, transparent));
  --cta-bg-hover: var(--role-cta-surface-hover, var(--cta-bg));
  --cta-fg-hover: var(--role-cta-foreground-hover, var(--cta-fg));
  --cta-border-hover: var(--role-cta-border-hover, var(--cta-border));
  --cta-bg-active: var(--role-cta-surface-active, var(--cta-bg-hover, var(--cta-bg)));
  --cta-fg-active: var(--role-cta-foreground-active, var(--cta-fg-hover, var(--cta-fg)));
  --cta-border-active: var(--role-cta-border-active, var(--cta-border-hover, var(--cta-border)));
  --cta-shadow: var(--role-cta-submit-shadow, var(--role-cta-shadow, none));
  --cta-shadow-hover: var(--role-cta-submit-shadow-hover, var(--cta-shadow));
  --cta-shadow-active: var(--role-cta-submit-shadow-active, var(--cta-shadow));
  --cta-min-h: var(--role-cta-submit-min-h, 50px);
  --cta-pad-x: var(--role-cta-submit-pad-x, 20px);
  --cta-radius: var(--role-cta-submit-radius, var(--role-cta-radius, var(--radius-cta, 12px)));
}

/* ------------------------------------------------------------
  3) Eyebrows / badges (bridges / aliases / publication map)
  VC1-A: components-map publica aliases canónicos; la recipe vive en roles.css.
  V2-A: el painter shared real vive en base.css; aquí solo queda el map de species/bridge.
------------------------------------------------------------ */

:where(main.tlv2-page, .tlv2-modal) :is(.eyebrow, .badge, .tlv2-modal-eyebrow, .tlv2-modal-pack-badge, [data-pack-badge]){
  --eyebrow-border-width: 1px;
  --eyebrow-shadow: inset 0 1px 0 rgba(255,255,255,.34);
  --tlv2-pill-depth-border: var(--role-context-panel-neutral-border, var(--role-surface-family-border, var(--role-border-color, rgba(0,0,0,.12))));
  --tlv2-pill-depth-highlight: var(--role-context-panel-neutral-highlight, var(--role-surface-family-highlight, inset 0 1px 0 rgba(255,255,255,.12)));
  --tlv2-pill-surface: var(--eyebrow-bg);
  --tlv2-pill-foreground: var(--eyebrow-fg);
  --tlv2-pill-border: var(--eyebrow-border);
  --tlv2-pill-shadow: var(--eyebrow-shadow);
  --tlv2-pill-dot-bg: var(--eyebrow-dot-bg, transparent);
  --tlv2-pill-dot-shadow: var(--eyebrow-dot-shadow, none);
}

/* EYEBROW-NEUTRAL-AUTHORITY-02 — publicar neutral en --tlv2-pill-* evita una resolución distinta entre painter y QA. */
:where(main.tlv2-page, .tlv2-modal) :is(.eyebrow--neutral, .tlv2-modal-eyebrow){
  --eyebrow-bg: var(--role-context-eyebrow-neutral-surface, var(--role-eyebrow-neutral-surface, var(--role-neutral-family-surface, var(--role-surface-base, #fff))));
  --eyebrow-fg: var(--role-context-eyebrow-neutral-foreground, var(--role-eyebrow-neutral-foreground, var(--role-on-surface, var(--role-heading-color, #111827))));
  --eyebrow-border: var(--role-context-eyebrow-neutral-border, var(--role-eyebrow-neutral-border, var(--role-neutral-family-border, var(--role-border-color, rgba(0,0,0,.12)))));
  --eyebrow-shadow: var(--role-context-eyebrow-neutral-shadow, var(--role-eyebrow-neutral-shadow, var(--role-neutral-family-shadow, inset 0 1px 0 rgba(255,255,255,.34))));
  --tlv2-pill-surface: var(--eyebrow-bg);
  --tlv2-pill-foreground: var(--eyebrow-fg);
  --tlv2-pill-border: var(--eyebrow-border);
  --tlv2-pill-shadow: var(--eyebrow-shadow);
}

:where(main.tlv2-page, .tlv2-modal) .eyebrow--accent{
  --eyebrow-bg: var(--role-context-eyebrow-accent-surface, var(--role-eyebrow-accent-surface, var(--role-accent-family-surface, var(--role-surface-base, #fff))));
  --eyebrow-fg: var(--role-context-eyebrow-accent-foreground, var(--role-eyebrow-accent-foreground, var(--role-accent-family-foreground, var(--role-accent, currentColor))));
  --eyebrow-border: var(--role-context-eyebrow-accent-border, var(--role-eyebrow-accent-border, var(--role-border-color, rgba(0,0,0,.12))));
  --eyebrow-shadow: var(--role-context-eyebrow-accent-shadow, var(--role-eyebrow-accent-shadow, inset 0 1px 0 rgba(255,255,255,.34)));
  --eyebrow-dot-bg: var(--role-context-eyebrow-accent-dot, var(--role-eyebrow-accent-dot, var(--role-accent-family-dot, var(--role-accent, currentColor))));
  --eyebrow-dot-shadow: var(--role-context-eyebrow-accent-dot-shadow, var(--role-eyebrow-accent-dot-shadow, none));
}

:where(main.tlv2-page, .tlv2-modal) :is(.badge--featured, .tlv2-modal-pack-badge, [data-pack-badge]){
  --eyebrow-bg: var(--role-context-badge-featured-surface, var(--role-badge-featured-surface, var(--role-accent-family-surface, var(--role-surface-base, #fff))));
  --eyebrow-fg: var(--role-context-badge-featured-foreground, var(--role-badge-featured-foreground, var(--role-accent-family-foreground, var(--role-accent, currentColor))));
  --eyebrow-border: var(--role-context-badge-featured-border, var(--role-badge-featured-border, var(--role-border-color, rgba(0,0,0,.12))));
  --eyebrow-shadow: var(--role-context-badge-featured-shadow, var(--role-badge-featured-shadow, inset 0 1px 0 rgba(255,255,255,.18)));
}



/* ------------------------------------------------------------
  3b) Chips / markers neutral family
  V2-A: components-map conserva publication vars / bridge de la family;
  el painter shared real vive en base.css.
------------------------------------------------------------ */

:where(main.tlv2-page) :is(
  #problema .problema-list li,
  #beneficios .beneficio-icon,
  #beneficios .beneficio-badge,
  #ingredientes .ingrediente-icon,
  #ingredientes .ingredientes-expand__toggle
){
  /* VC1-A ownership:
   beneficio-badge y toggles consumen chip family shared via bridge --tlv2-chip-*.
   components-map.css publica el bridge; landing.css solo consume y afina presentation local. */
  --tlv2-chip-surface: var(--role-context-chip-neutral-surface, var(--role-context-panel-neutral-surface, var(--role-surface-family-surface, #fff)));
  --tlv2-chip-border: var(--role-context-chip-neutral-border, var(--role-context-panel-neutral-border, var(--role-border-color, rgba(0,0,0,.12))));
  --tlv2-chip-foreground: var(--role-context-chip-neutral-foreground, var(--role-context-on, var(--role-on-surface, currentColor)));
  --tlv2-chip-highlight: var(--role-context-chip-neutral-highlight, var(--role-context-panel-neutral-highlight, inset 0 1px 0 rgba(255,255,255,.18)));
  --tlv2-chip-shadow: var(--role-context-chip-neutral-shadow, none);
  --tlv2-chip-surface-hover: var(--role-context-chip-neutral-surface-hover, var(--tlv2-chip-surface));
  --tlv2-chip-border-hover: var(--role-context-chip-neutral-border-hover, var(--tlv2-chip-border));
  --tlv2-chip-foreground-hover: var(--role-context-chip-neutral-foreground-hover, var(--tlv2-chip-foreground));
  --tlv2-chip-surface-active: var(--role-context-chip-neutral-surface-active, var(--tlv2-chip-surface-hover, var(--tlv2-chip-surface)));
  --tlv2-chip-border-active: var(--role-context-chip-neutral-border-active, var(--tlv2-chip-border-hover, var(--tlv2-chip-border)));
  --tlv2-chip-foreground-active: var(--role-context-chip-neutral-foreground-active, var(--tlv2-chip-foreground-hover, var(--tlv2-chip-foreground)));
}



/* ------------------------------------------------------------
  3c) Icon shells de sistema (solo variables)
------------------------------------------------------------ */
:where(main.tlv2-page) :is(
  #beneficios .beneficio-icon,
  #ingredientes .ingrediente-icon,
  #ingredientes .list > li .ingrediente-icon
){
  /* ICON-SHELL-BRIDGE-01 — bridge canónico: el bloque consume shell; la autoridad vive en roles/context.
     El cert Chip+Marker lee el carril --tlv2-chip-* en el nodo real, por eso los icon shells publican
     ese carril con la misma recipe efectiva antes de exponer --tlv2-icon-shell-*. */
  --tlv2-chip-surface: var(--role-icon-shell-neutral-surface, var(--role-context-chip-neutral-surface, var(--role-context-panel-neutral-surface, var(--role-surface-family-surface, #fff))));
  --tlv2-chip-border: var(--role-icon-shell-neutral-border, var(--role-context-chip-neutral-border, var(--role-context-panel-neutral-border, var(--role-border-color, rgba(0,0,0,.12)))));
  --tlv2-chip-foreground: var(--role-icon-shell-neutral-foreground, var(--role-context-chip-neutral-foreground, var(--role-context-on, var(--role-on-surface, currentColor))));
  --tlv2-chip-highlight: var(--role-icon-shell-neutral-highlight, var(--role-context-chip-neutral-highlight, var(--role-context-panel-neutral-highlight, inset 0 1px 0 rgba(255,255,255,.18))));
  --tlv2-chip-shadow: var(--role-icon-shell-neutral-shadow, var(--role-context-chip-neutral-shadow, none));
  --tlv2-icon-shell-surface: var(--role-icon-shell-neutral-surface, var(--tlv2-chip-surface));
  --tlv2-icon-shell-border: var(--role-icon-shell-neutral-border, var(--tlv2-chip-border));
  --tlv2-icon-shell-foreground: var(--role-icon-shell-neutral-foreground, var(--tlv2-chip-foreground));
  --tlv2-icon-shell-highlight: var(--role-icon-shell-neutral-highlight, var(--tlv2-chip-highlight));
  --tlv2-icon-shell-shadow: var(--role-icon-shell-neutral-shadow, var(--tlv2-chip-shadow));
}

/* ------------------------------------------------------------
  4) Cards / panels / surfaces (publication vars / bridge)
  V2-A: base.css absorbe el painter shared real del neutral card shell.
------------------------------------------------------------ */

/* FDN-S10 / M3 — ampliar coverage efectiva de diales sobre consumers reales.
   Se mantiene dentro de la familia card ya promovida (sin abrir panels/foundations).
   Nota 2026-03-17: `#problema .list li` sale de esta familia; Problema ya no es consumer card-like. */
 :where(main.tlv2-page) #beneficios .list .beneficio,
:where(main.tlv2-page) #ingredientes .list > li,
#packs .pack-card,
:where(main.tlv2-page) #faq .faq-item,
:where(main.tlv2-page) #testimonios .testimonial{
  --tlv2-card-radius: var(--role-card-radius, var(--radius-lg, 16px));
  --tlv2-card-family-kind: neutral;
  --tlv2-card-family-surface: var(--role-context-card-neutral-surface, var(--role-card-neutral-surface, var(--role-surface-family-surface, var(--role-surface-elevated, #fff))));
  --tlv2-card-family-surface-2: var(--role-context-card-neutral-surface-2, var(--role-card-neutral-surface-2, var(--tlv2-card-family-surface)));
  --tlv2-card-family-border: var(--role-context-card-neutral-border, var(--role-card-neutral-border, var(--role-border-color, rgba(0,0,0,.12))));
  --tlv2-card-family-shadow: var(--role-context-card-neutral-shadow, var(--role-card-neutral-shadow, var(--role-elevation-family-card, var(--role-card-elevation, 0 10px 30px rgba(0,0,0,.06)))));
  --tlv2-card-family-shadow-hover: var(--role-context-card-neutral-shadow-hover, var(--role-card-neutral-shadow-hover, var(--role-elevation-family-card-hover, var(--tlv2-card-family-shadow))));
  --tlv2-card-family-highlight: var(--role-context-card-neutral-highlight, var(--role-card-neutral-highlight, inset 0 1px 0 rgba(255,255,255,.08)));
  --tlv2-card-family-rail: var(--role-context-card-neutral-rail, var(--role-card-neutral-rail, none));
  --tlv2-card-neutral-copy-heading: var(--role-context-card-neutral-copy-heading, var(--role-context-card-neutral-heading, var(--role-context-on-elevated, var(--role-on-elevated, var(--role-on-surface, var(--color-text-0))))));
  --tlv2-card-neutral-copy-body: var(--role-context-card-neutral-copy-body, var(--role-context-card-neutral-body, var(--tlv2-card-neutral-copy-heading)));
  --tlv2-card-neutral-copy-muted: var(--role-context-card-neutral-copy-muted, color-mix(in oklch, var(--role-context-card-neutral-muted, var(--role-context-on-elevated-muted, var(--role-on-surface-muted, var(--color-text-muted)))) 92%, var(--tlv2-card-neutral-copy-heading) 8%));
  --tlv2-card-neutral-copy-emphasis: var(--role-context-card-neutral-copy-emphasis, var(--role-context-card-neutral-emphasis, var(--tlv2-card-neutral-copy-heading)));
  --tlv2-card-family-heading: var(--tlv2-card-neutral-copy-heading);
  --tlv2-card-family-body: var(--tlv2-card-neutral-copy-body);
  --tlv2-card-family-muted: var(--tlv2-card-neutral-copy-muted);
  /* CARD-FAMILY-SURFACE-01 — base neutral limpia: usa fill-start/end de la family para que flat/layered/elevated se distingan sin hacks por bloque. */
  --tlv2-card-family-bg-image: linear-gradient(180deg, var(--role-surface-family-fill-start, var(--tlv2-card-family-surface)) 0%, var(--role-surface-family-fill-end, var(--tlv2-card-family-surface-2, var(--tlv2-card-family-surface))) 100%);
  --tlv2-card-family-bg-image-hover: linear-gradient(180deg, color-mix(in oklch, var(--role-surface-family-fill-start, var(--tlv2-card-family-surface)) 96%, var(--role-surface-family-fill-end, var(--tlv2-card-family-surface-2, var(--tlv2-card-family-surface))) 4%) 0%, color-mix(in oklch, var(--role-surface-family-fill-end, var(--tlv2-card-family-surface-2, var(--tlv2-card-family-surface))) 94%, var(--role-surface-family-fill-start, var(--tlv2-card-family-surface)) 6%) 100%);
  --tlv2-card-family-outline: transparent;
  --tlv2-card-family-outline-soft: transparent;
  --tlv2-card-family-ornament-glow: transparent;
  --tlv2-card-surface: var(--tlv2-card-family-surface);
  --tlv2-card-surface-2: var(--tlv2-card-family-surface-2);
  --tlv2-card-border: var(--tlv2-card-family-border);
  --tlv2-card-shadow: var(--tlv2-card-family-shadow);
  --tlv2-card-shadow-hover: var(--tlv2-card-family-shadow-hover);
  --tlv2-card-highlight: var(--tlv2-card-family-highlight);
  --tlv2-card-rail: var(--tlv2-card-family-rail);
  --tlv2-card-copy-heading: var(--tlv2-card-neutral-copy-heading);
  --tlv2-card-copy-body: var(--tlv2-card-neutral-copy-body);
  --tlv2-card-copy-muted: var(--tlv2-card-neutral-copy-muted);
  --tlv2-card-copy-emphasis: var(--tlv2-card-neutral-copy-emphasis);
  /* PACK-UPSTREAM-BRIDGE-R3 — publicar copy/price vars pack-local desde el bloque neutral-family que sí carga en constructor. */
  --tlv2-pack-card-copy-heading: var(--tlv2-card-copy-heading);
  --tlv2-pack-card-copy-body: var(--tlv2-card-copy-body);
  --tlv2-pack-card-copy-muted: var(--tlv2-card-copy-muted);
  --tlv2-pack-card-copy-emphasis: var(--tlv2-card-copy-emphasis, var(--tlv2-pack-card-copy-heading));
  --tlv2-pack-card-price-current: var(--tlv2-pack-card-copy-emphasis, var(--tlv2-pack-card-copy-heading));
  --tlv2-pack-card-price-compare: var(--tlv2-pack-card-copy-muted, var(--tlv2-pack-card-copy-body));
  --tlv2-pack-card-price-unit: var(--tlv2-pack-card-copy-muted, var(--tlv2-pack-card-copy-body));
  --role-heading-color: var(--tlv2-card-copy-heading);
  --role-body-color: var(--tlv2-card-copy-body);
  --role-muted-color: var(--tlv2-card-copy-muted);
  --role-fg: var(--role-body-color);
  --tlv2-copy-heading: var(--tlv2-card-copy-heading);
  --tlv2-copy-body: var(--tlv2-card-copy-body);
  --tlv2-copy-muted: var(--tlv2-card-copy-muted);
  /* CARD-CONTAINED-BRIDGE-01 — piezas internas contenidas para cards neutras/featured.
     No heredan chip de sección; se resuelven desde la family de card con fallback a panel neutral. */
  --tlv2-card-chip-surface: var(--role-context-panel-neutral-surface, var(--tlv2-card-family-surface-2, var(--tlv2-card-family-surface)));
  --tlv2-card-chip-border: var(--role-context-panel-neutral-border, var(--tlv2-card-family-border));
  --tlv2-card-chip-foreground: var(--tlv2-card-family-heading);
  --tlv2-card-chip-highlight: var(--role-context-panel-neutral-highlight, var(--role-surface-family-highlight, inset 0 1px 0 rgba(255,255,255,.18)));
  --tlv2-card-chip-shadow: none;
  --tlv2-card-icon-shell-surface: var(--role-icon-shell-neutral-surface, var(--tlv2-card-chip-surface));
  --tlv2-card-icon-shell-border: var(--role-icon-shell-neutral-border, var(--tlv2-card-chip-border));
  --tlv2-card-icon-shell-foreground: var(--role-icon-shell-neutral-foreground, var(--tlv2-card-family-heading));
  --tlv2-card-icon-shell-highlight: var(--role-icon-shell-neutral-highlight, var(--tlv2-card-chip-highlight));
  --tlv2-card-icon-shell-shadow: var(--role-icon-shell-neutral-shadow, var(--tlv2-card-chip-shadow));
  --tlv2-chrome-border: var(--tlv2-card-family-border);
  --tlv2-chrome-border-strong: var(--role-context-border-strong, var(--tlv2-card-family-border));
  --tlv2-focus-ring: var(--role-context-focus-ring, color-mix(in oklch, var(--role-focus-ring-color, var(--role-primary, oklch(0.62 0.13 210))) 20%, transparent));
}


:where(main.tlv2-page) #faq .faq-item :is(summary, .q, .faq-question),
:where(main.tlv2-page) #faq .faq-item :is(summary, .q, .faq-question) *{
  color: var(--tlv2-faq-card-copy-heading, var(--tlv2-card-copy-heading));
}

:where(main.tlv2-page) #faq .faq-item :is(.faq-answer, .a),
:where(main.tlv2-page) #faq .faq-item :is(.faq-answer, .a) *{
  color: var(--tlv2-faq-card-copy-body, var(--tlv2-card-copy-body));
}


#packs .pack-card.pack-card--featured{
  --tlv2-card-family-kind: featured !important;
  --tlv2-card-family-surface: var(--role-context-card-featured-surface, var(--role-card-featured-surface, var(--role-context-card-neutral-surface, var(--role-card-neutral-surface, var(--role-surface-family-surface, var(--role-surface-elevated, #fff)))))) !important;
  --tlv2-card-family-surface-2: var(--role-context-card-featured-surface-2, var(--role-card-featured-surface-2, var(--role-context-card-neutral-surface-2, var(--role-card-neutral-surface-2, var(--tlv2-card-family-surface))))) !important;
  --tlv2-card-family-border: var(--role-context-card-featured-border, var(--role-card-featured-border, var(--role-context-card-neutral-border, var(--role-card-neutral-border, var(--role-border-color, rgba(0,0,0,.12)))))) !important;
  --tlv2-card-family-shadow: var(--role-context-card-featured-shadow, var(--role-card-featured-shadow, var(--role-elevation-family-card-featured, var(--role-context-card-neutral-shadow, var(--role-card-neutral-shadow, var(--role-elevation-family-card, var(--role-card-elevation, 0 10px 30px rgba(0,0,0,.06)))))))) !important;
  --tlv2-card-family-shadow-hover: var(--role-context-card-featured-shadow-hover, var(--role-card-featured-shadow-hover, var(--role-elevation-family-card-hover, var(--role-context-card-featured-shadow, var(--role-card-featured-shadow, var(--role-elevation-family-card-featured, var(--role-context-card-neutral-shadow-hover, var(--role-card-neutral-shadow-hover, var(--role-elevation-family-card-hover, var(--role-card-elevation, 0 10px 30px rgba(0,0,0,.06)))))))))) !important;
  --tlv2-card-family-highlight: var(--role-context-card-featured-highlight, var(--role-card-featured-highlight, var(--role-context-card-neutral-highlight, var(--role-card-neutral-highlight, inset 0 1px 0 rgba(255,255,255,.08))))) !important;
  --tlv2-card-family-rail: var(--role-context-card-featured-rail, var(--role-card-featured-rail, none)) !important;
  --tlv2-card-featured-copy-heading: var(--role-context-card-featured-heading, var(--role-context-card-neutral-heading, var(--role-context-on-elevated, var(--role-on-elevated, var(--role-on-surface, var(--color-text-0)))))) !important;
  --tlv2-card-featured-copy-body: var(--role-context-card-featured-body, var(--tlv2-card-featured-copy-heading)) !important;
  --tlv2-card-featured-copy-muted: var(--role-context-card-featured-muted, var(--role-context-card-neutral-muted, var(--role-context-on-elevated-muted, var(--role-on-surface-muted, var(--color-text-muted))))) !important;
  --tlv2-card-featured-copy-emphasis: var(--role-context-card-featured-emphasis, var(--tlv2-card-featured-copy-heading)) !important;
  --tlv2-card-family-heading: var(--tlv2-card-featured-copy-heading) !important;
  --tlv2-card-family-body: var(--tlv2-card-featured-copy-body) !important;
  --tlv2-card-family-muted: var(--tlv2-card-featured-copy-muted) !important;
  --tlv2-card-family-bg-image: linear-gradient(180deg, var(--role-surface-family-fill-start, var(--tlv2-card-family-surface)) 0%, var(--role-surface-family-fill-end, var(--tlv2-card-family-surface-2, var(--tlv2-card-family-surface))) 100%) !important;
  --tlv2-card-family-bg-image-hover: linear-gradient(180deg, color-mix(in oklch, var(--role-surface-family-fill-start, var(--tlv2-card-family-surface)) 96%, var(--role-surface-family-fill-end, var(--tlv2-card-family-surface-2, var(--tlv2-card-family-surface))) 4%) 0%, color-mix(in oklch, var(--role-surface-family-fill-end, var(--tlv2-card-family-surface-2, var(--tlv2-card-family-surface))) 94%, var(--role-surface-family-fill-start, var(--tlv2-card-family-surface)) 6%) 100%) !important;
  --tlv2-card-family-outline: var(--role-context-card-featured-outline, var(--role-card-featured-outline, color-mix(in oklch, var(--tlv2-card-family-border) 58%, transparent))) !important;
  --tlv2-card-family-outline-soft: var(--role-context-card-featured-outline-soft, var(--role-card-featured-outline-soft, color-mix(in oklch, var(--tlv2-card-family-border) 84%, transparent 16%))) !important;
  --tlv2-card-family-ornament-glow: var(--role-context-card-featured-ornament-glow, var(--role-card-featured-ornament-glow, color-mix(in oklch, var(--tlv2-card-family-border) 38%, transparent))) !important;
  --tlv2-card-surface: var(--tlv2-card-family-surface) !important;
  --tlv2-card-surface-2: var(--tlv2-card-family-surface-2) !important;
  --tlv2-card-border: var(--tlv2-card-family-border) !important;
  --tlv2-card-shadow: var(--tlv2-card-family-shadow) !important;
  --tlv2-card-shadow-hover: var(--tlv2-card-family-shadow-hover) !important;
  --tlv2-card-highlight: var(--tlv2-card-family-highlight) !important;
  --tlv2-card-rail: var(--tlv2-card-family-rail) !important;
  --tlv2-card-copy-heading: var(--tlv2-card-featured-copy-heading) !important;
  --tlv2-card-copy-body: var(--tlv2-card-featured-copy-body) !important;
  --tlv2-card-copy-muted: var(--tlv2-card-featured-copy-muted) !important;
  --tlv2-card-copy-emphasis: var(--tlv2-card-featured-copy-emphasis) !important;
  --role-heading-color: var(--tlv2-card-copy-heading) !important;
  --role-body-color: var(--tlv2-card-copy-body) !important;
  --role-muted-color: var(--tlv2-card-copy-muted) !important;
  --role-fg: var(--role-body-color) !important;
  --tlv2-copy-heading: var(--tlv2-card-copy-heading) !important;
  --tlv2-copy-body: var(--tlv2-card-copy-body) !important;
  --tlv2-copy-muted: var(--tlv2-card-copy-muted) !important;
  --tlv2-card-chip-surface: var(--role-context-panel-neutral-surface, var(--tlv2-card-family-surface-2, var(--tlv2-card-family-surface))) !important;
  --tlv2-card-chip-border: var(--role-context-panel-neutral-border, var(--tlv2-card-family-border)) !important;
  --tlv2-card-chip-foreground: var(--tlv2-card-family-heading) !important;
  --tlv2-card-chip-highlight: var(--role-context-panel-neutral-highlight, var(--role-surface-family-highlight, inset 0 1px 0 rgba(255,255,255,.18))) !important;
  --tlv2-card-chip-shadow: none !important;
  --tlv2-card-icon-shell-surface: var(--role-icon-shell-neutral-surface, var(--tlv2-card-chip-surface)) !important;
  --tlv2-card-icon-shell-border: var(--role-icon-shell-neutral-border, var(--tlv2-card-chip-border)) !important;
  --tlv2-card-icon-shell-foreground: var(--role-icon-shell-neutral-foreground, var(--tlv2-card-family-heading)) !important;
  --tlv2-card-icon-shell-highlight: var(--role-icon-shell-neutral-highlight, var(--tlv2-card-chip-highlight)) !important;
  --tlv2-card-icon-shell-shadow: var(--role-icon-shell-neutral-shadow, var(--tlv2-card-chip-shadow)) !important;
  --tlv2-chrome-border: var(--tlv2-card-family-border) !important;
  --tlv2-chrome-border-strong: var(--role-context-border-strong, var(--tlv2-chrome-border-strong)) !important;
  --tlv2-focus-ring: var(--role-context-focus-ring, var(--tlv2-focus-ring)) !important;
}


/* PV1-L2f / Subfase B1 — Packs / card family / featured
   Cierra la frontera shared -> consumer para #packs sin reabrir la family.
   components-map.css publica el bridge de paint; landing.css consume solo geometría/layout/wiring local. */
#packs .pack-card{
  --tlv2-pack-card-radius: var(--tlv2-card-radius, var(--role-card-radius, 18px));
  --tlv2-pack-card-border-width: 1px;
  --tlv2-pack-card-border-color-final: var(--role-context-card-neutral-border, var(--role-card-neutral-border, var(--role-border-color, rgba(0,0,0,.12))));
  --tlv2-pack-card-border: var(--tlv2-pack-card-border-color-final);
  --tlv2-pack-card-border-color-effective: var(--tlv2-pack-card-border-color-final);
  --tlv2-pack-card-border-color-resolved: var(--tlv2-pack-card-border-color-final);
  --tlv2-pack-card-background: var(--tlv2-card-family-bg-image);
  --tlv2-pack-card-surface-resolved: var(--tlv2-pack-card-background, var(--tlv2-card-family-bg-image));
  --tlv2-pack-card-background-hover: var(--tlv2-card-family-bg-image-hover, var(--tlv2-card-family-bg-image));
  --tlv2-pack-card-shadow-stack: var(--tlv2-card-shadow);
  --tlv2-pack-card-shadow-resolved: var(--tlv2-pack-card-shadow-stack, var(--tlv2-card-shadow));
  --tlv2-pack-card-shadow-stack-hover: var(--tlv2-card-shadow-hover);
  --tlv2-pack-card-overlay-shadow: none;
  --tlv2-pack-card-rail-background: var(--tlv2-card-rail, none);
}

#packs .pack-card.pack-card--featured{
  /* FEATURED-BRIDGE-CLOSEOUT-03C — featured gana la publicación runtime pack-local sin reintroducir painters visibles. */
  --tlv2-pack-card-border-width: 1.5px !important;
  --tlv2-pack-card-border-color-final: var(--tlv2-card-border) !important;
  --tlv2-pack-card-border: var(--tlv2-pack-card-border-color-final) !important;
  --tlv2-pack-card-border-color-effective: var(--tlv2-pack-card-border-color-final) !important;
  --tlv2-pack-card-border-color-resolved: var(--tlv2-pack-card-border-color-final) !important;
  --tlv2-pack-card-background: var(--tlv2-card-family-bg-image) !important;
  --tlv2-pack-card-surface-resolved: var(--tlv2-pack-card-background, var(--tlv2-card-surface, var(--tlv2-card-family-surface))) !important;
  --tlv2-pack-card-shadow-stack: 0 0 0 1px color-mix(in oklch, var(--tlv2-card-family-outline-soft, var(--tlv2-card-border)) 84%, transparent 16%), 0 12px 28px -20px var(--tlv2-card-family-ornament-glow, transparent), var(--tlv2-card-highlight, none), var(--tlv2-card-shadow) !important;
  --tlv2-pack-card-shadow-resolved: var(--tlv2-pack-card-shadow-stack, var(--tlv2-card-shadow)) !important;
  --tlv2-pack-card-shadow-stack-hover: 0 0 0 1px color-mix(in oklch, var(--tlv2-card-family-outline-soft, var(--tlv2-card-border)) 88%, transparent 12%), 0 16px 34px -22px var(--tlv2-card-family-ornament-glow, transparent), var(--tlv2-card-highlight, none), var(--tlv2-card-shadow-hover) !important;
  --tlv2-pack-card-overlay-shadow: inset 0 0 0 1px color-mix(in oklch, var(--tlv2-card-border) 74%, white 26%), inset 0 1px 0 0 color-mix(in oklch, white 72%, transparent 28%) !important;
  --tlv2-pack-card-rail-background: var(--tlv2-card-rail, linear-gradient(90deg, color-mix(in oklch, var(--tlv2-card-border) 82%, white 18%) 0%, color-mix(in oklch, var(--role-primary, var(--role-accent, oklch(0.72 0.09 240))) 34%, var(--tlv2-card-border) 66%) 100%)) !important;
  --tlv2-pack-card-copy-heading: var(--tlv2-card-featured-copy-heading, var(--tlv2-card-copy-heading, var(--tlv2-card-family-heading, currentColor))) !important;
  --tlv2-pack-card-copy-body: var(--tlv2-card-featured-copy-body, var(--tlv2-card-copy-body, var(--tlv2-card-family-body, var(--tlv2-pack-card-copy-heading)))) !important;
  --tlv2-pack-card-copy-muted: var(--tlv2-card-featured-copy-muted, var(--tlv2-card-copy-muted, var(--tlv2-card-family-muted, var(--tlv2-pack-card-copy-body)))) !important;
  --tlv2-pack-card-copy-emphasis: var(--tlv2-card-featured-copy-emphasis, var(--tlv2-card-copy-emphasis, var(--tlv2-pack-card-copy-heading))) !important;
  --tlv2-pack-card-price-current: var(--tlv2-pack-card-copy-emphasis, var(--tlv2-pack-card-copy-heading)) !important;
  --tlv2-pack-card-price-compare: var(--tlv2-pack-card-copy-muted, var(--tlv2-pack-card-copy-body)) !important;
  --tlv2-pack-card-price-unit: var(--tlv2-pack-card-copy-muted, var(--tlv2-pack-card-copy-body)) !important;
}


/* PV1-L2f / Subfase B3 — Foreground / heading / body / muted
   Sella foreground shared de card-family sin rediseñar bloques.
   components-map.css publica el bridge de copy; landing.css conserva spacing/layout y excepciones locales. */
:where(main.tlv2-page) :is(
  #beneficios .beneficio,
  #ingredientes .ingrediente,
  #ingredientes .list > li,
  #testimonios .testimonial,
  #faq .faq-item
){
  color: var(--tlv2-copy-body, var(--role-body-color, inherit));
}

:where(main.tlv2-page) :is(#beneficios .beneficio, #ingredientes .ingrediente, #ingredientes .list > li){
  --tlv2-card-copy-heading: var(--tlv2-card-family-heading, var(--tlv2-copy-heading));
  --tlv2-card-copy-body: var(--tlv2-card-family-body, var(--tlv2-copy-body, var(--tlv2-card-copy-heading)));
  --tlv2-card-copy-muted: var(--tlv2-card-family-muted, var(--tlv2-copy-muted, var(--tlv2-card-copy-body)));
}

:where(main.tlv2-page) :is(#beneficios .beneficio, #ingredientes .ingrediente, #ingredientes .list > li)
  :is(.beneficio-title, .ingrediente-title, .title, .item-title, h3){
  color: var(--tlv2-card-copy-heading, var(--tlv2-card-family-heading, inherit)) !important;
}

:where(main.tlv2-page) :is(#beneficios .beneficio, #ingredientes .ingrediente, #ingredientes .list > li)
  :is(.beneficio-text, .desc, .text, .copy, .details, .content, p:not(.beneficio-badge)){
  color: var(--tlv2-card-copy-body, var(--tlv2-card-family-body, inherit)) !important;
}

/* S3-A — packs copy/pricing bridge queda publicado arriba; los nodos reales consumen abajo en landing.css. */

:where(main.tlv2-page) #testimonios .testimonial{
  --tlv2-testimonial-copy-heading: var(--tlv2-card-family-heading, var(--tlv2-copy-heading));
  --tlv2-testimonial-copy-body: var(--tlv2-card-family-body, var(--tlv2-copy-body, var(--tlv2-testimonial-copy-heading)));
  --tlv2-testimonial-copy-muted: var(--tlv2-card-family-muted, var(--tlv2-copy-muted, var(--tlv2-testimonial-copy-body)));
  /* VC1-D2-RCA-01 — quote/meta rail quedan anclados a la rail real de la testimonial card,
     no a roles contextuales/globales prematuros. */
  --tlv2-testimonial-quote-ornament: var(--tlv2-card-copy-emphasis, var(--tlv2-testimonial-copy-heading));
  --tlv2-testimonial-meta-rail: color-mix(in oklch, var(--tlv2-card-border, var(--tlv2-card-family-border, var(--testi-card-border, rgba(0,0,0,.14)))) 72%, transparent);
}

:where(main.tlv2-page) #testimonios .testimonial :is(.testimonial-author, .author){
  color: var(--tlv2-testimonial-copy-heading, var(--tlv2-card-family-heading, inherit));
}

:where(main.tlv2-page) #testimonios .testimonial :is(blockquote, blockquote p){
  color: var(--tlv2-testimonial-copy-body, var(--tlv2-card-family-body, inherit));
}

:where(main.tlv2-page) #testimonios .testimonial .testimonial-role{
  color: var(--tlv2-testimonial-copy-muted, var(--tlv2-card-family-muted, inherit));
}

:where(main.tlv2-page) #faq .faq-item{
  --tlv2-faq-card-copy-heading: var(--tlv2-card-family-heading, var(--tlv2-copy-heading));
  --tlv2-faq-card-copy-body: var(--tlv2-card-family-body, var(--tlv2-copy-body, var(--tlv2-faq-card-copy-heading)));
  --tlv2-faq-card-copy-muted: var(--tlv2-card-family-muted, var(--tlv2-copy-muted, var(--tlv2-faq-card-copy-body)));
  /* VC1-D2-RCA-02 — affordance del FAQ se ancla a la rail local de la faq-card. */
  --tlv2-faq-disclosure-affordance: var(--tlv2-faq-card-copy-muted);
  --tlv2-faq-disclosure-affordance-active: var(--tlv2-faq-card-copy-heading);
}

:where(main.tlv2-page) #faq .faq-item :is(.faq-question, .q){
  color: var(--tlv2-faq-card-copy-heading, var(--tlv2-card-family-heading, inherit));
}

:where(main.tlv2-page) #faq .faq-item :is(.faq-answer, .a){
  color: var(--tlv2-faq-card-copy-muted, var(--tlv2-card-family-muted, inherit));
}



/* Testimonios deja de forzar `card-gradient` como default canónico.
   La variante gradient se reserva para un preset/variant futuro explícito;
   por defecto consume la misma familia neutral de cards. */



:where(#popupFormulario.tlv2-modal){
  --tlv2-surface-modal-surface: var(--role-surface-modal-surface, var(--role-surface-family-surface, var(--role-modal-surface, #fff)));
  --tlv2-surface-modal-surface-2: var(--role-surface-modal-surface-2, var(--role-surface-family-surface-2, var(--tlv2-surface-modal-surface)));
  --tlv2-surface-modal-border: var(--role-surface-modal-border, var(--role-surface-family-border, rgba(0,0,0,.12)));
  --tlv2-surface-modal-shadow: var(--role-surface-modal-shadow, var(--role-elevation-family-modal, var(--role-modal-elevation, 0 10px 30px rgba(0,0,0,.18))));
  --tlv2-surface-modal-highlight: var(--role-surface-modal-highlight, inset 0 1px 0 rgba(255,255,255,.42));
}

/* Ghost / transparente */
:where(main.tlv2-page, .tlv2-modal) .cta--ghost{
  --cta-bg: transparent;
  --cta-fg: var(--role-primary, #111);
  --cta-border: transparent;
  --cta-shadow: none;
}

/* CTA sobre fondo oscuro */
:where(main.tlv2-page, .tlv2-modal) .cta--on-dark{
  --cta-bg: rgba(255,255,255,.12);
  --cta-fg: #fff;
  --cta-border: rgba(255,255,255,.18);
}

/* (Sin sección legacy: los aliases ya están incluidos en el selector base.) */


:where(main.tlv2-page) #ingredientes .ingrediente .ingrediente-meta{
  --role-muted-color: var(--role-context-card-neutral-muted, var(--role-context-on-elevated-muted, var(--role-on-surface-muted, var(--color-text-muted))));
}


/* ==========================================================
   VIS-01B — Beneficios + Ingredientes
   Media-shell family map
   - authority perceptual: roles.css
   - kind/family publication: components-map.css
   - shared painter real: base.css
   - footprint local: landing.css
   - owner único de kind en estos bloques: section root
   ========================================================== */
:where(#beneficios .beneficio-media-shell, #ingredientes .ingrediente-media-shell){
  --tlv2-media-shell-family-kind: integrated;
  --tlv2-media-shell-family-surface: var(--role-media-shell-integrated-surface, transparent);
  --tlv2-media-shell-family-border: var(--role-media-shell-integrated-border, transparent);
  --tlv2-media-shell-family-shadow: var(--role-media-shell-integrated-shadow, none);
  --tlv2-media-shell-family-highlight: var(--role-media-shell-integrated-highlight, none);
  --tlv2-media-shell-family-foreground: var(--role-media-shell-integrated-foreground, var(--role-icon-shell-neutral-foreground, var(--role-context-on, currentColor)));
  --tlv2-media-shell-kind-pad: var(--role-media-shell-integrated-pad, 0rem);
  --tlv2-media-shell-content-scale: var(--role-media-shell-integrated-content-scale, 100%);
}

:where(#beneficios[data-media-shell="outline"] .beneficio-media-shell, #ingredientes[data-media-shell="outline"] .ingrediente-media-shell, #beneficios .beneficio-media-shell.tlv2-item-media-shell--outline, #beneficios .beneficio-media-shell[data-media-shell="outline"], #ingredientes .ingrediente-media-shell.tlv2-item-media-shell--outline, #ingredientes .ingrediente-media-shell[data-media-shell="outline"]){
  --tlv2-media-shell-family-kind: outline;
  --tlv2-media-shell-family-surface: var(--role-media-shell-outline-surface, transparent);
  --tlv2-media-shell-family-border: var(--role-media-shell-outline-border, rgba(0,0,0,.12));
  --tlv2-media-shell-family-shadow: var(--role-media-shell-outline-shadow, none);
  --tlv2-media-shell-family-highlight: var(--role-media-shell-outline-highlight, none);
  --tlv2-media-shell-family-foreground: var(--role-media-shell-outline-foreground, var(--role-icon-shell-neutral-foreground, var(--role-context-on, currentColor)));
  --tlv2-media-shell-kind-pad: var(--role-media-shell-outline-pad, .2rem);
  --tlv2-media-shell-content-scale: var(--role-media-shell-outline-content-scale, 72%);
}

:where(#beneficios[data-media-shell="surface"] .beneficio-media-shell, #ingredientes[data-media-shell="surface"] .ingrediente-media-shell, #beneficios .beneficio-media-shell.tlv2-item-media-shell--surface, #beneficios .beneficio-media-shell[data-media-shell="surface"], #ingredientes .ingrediente-media-shell.tlv2-item-media-shell--surface, #ingredientes .ingrediente-media-shell[data-media-shell="surface"]){
  --tlv2-media-shell-family-kind: surface;
  --tlv2-media-shell-family-surface: var(--role-media-shell-surface-surface, var(--role-context-panel-neutral-surface, #fff));
  --tlv2-media-shell-family-border: var(--role-media-shell-surface-border, rgba(0,0,0,.12));
  --tlv2-media-shell-family-shadow: var(--role-media-shell-surface-shadow, none);
  --tlv2-media-shell-family-highlight: var(--role-media-shell-surface-highlight, none);
  --tlv2-media-shell-family-foreground: var(--role-media-shell-surface-foreground, var(--role-context-on-elevated, var(--role-on-surface, currentColor)));
  --tlv2-media-shell-kind-pad: var(--role-media-shell-surface-pad, .28rem);
  --tlv2-media-shell-content-scale: var(--role-media-shell-surface-content-scale, 68%);
}

:where(.tlv2-item-media-shell:not(.beneficio-media-shell):not(.ingrediente-media-shell)){
  --tlv2-media-shell-family-kind: integrated;
  --tlv2-media-shell-family-surface: var(--role-media-shell-integrated-surface, transparent);
  --tlv2-media-shell-family-border: var(--role-media-shell-integrated-border, transparent);
  --tlv2-media-shell-family-shadow: var(--role-media-shell-integrated-shadow, none);
  --tlv2-media-shell-family-highlight: var(--role-media-shell-integrated-highlight, none);
  --tlv2-media-shell-family-foreground: var(--role-media-shell-integrated-foreground, var(--role-icon-shell-neutral-foreground, var(--role-context-on, currentColor)));
  --tlv2-media-shell-kind-pad: var(--role-media-shell-integrated-pad, 0rem);
  --tlv2-media-shell-content-scale: var(--role-media-shell-integrated-content-scale, 100%);
}

:where(.tlv2-item-media-shell--outline:not(.beneficio-media-shell):not(.ingrediente-media-shell), [data-media-shell="outline"].tlv2-item-media-shell:not(.beneficio-media-shell):not(.ingrediente-media-shell)){
  --tlv2-media-shell-family-kind: outline;
  --tlv2-media-shell-family-surface: var(--role-media-shell-outline-surface, transparent);
  --tlv2-media-shell-family-border: var(--role-media-shell-outline-border, rgba(0,0,0,.12));
  --tlv2-media-shell-family-shadow: var(--role-media-shell-outline-shadow, none);
  --tlv2-media-shell-family-highlight: var(--role-media-shell-outline-highlight, none);
  --tlv2-media-shell-family-foreground: var(--role-media-shell-outline-foreground, var(--role-icon-shell-neutral-foreground, var(--role-context-on, currentColor)));
  --tlv2-media-shell-kind-pad: var(--role-media-shell-outline-pad, .2rem);
  --tlv2-media-shell-content-scale: var(--role-media-shell-outline-content-scale, 72%);
}

:where(.tlv2-item-media-shell--surface:not(.beneficio-media-shell):not(.ingrediente-media-shell), [data-media-shell="surface"].tlv2-item-media-shell:not(.beneficio-media-shell):not(.ingrediente-media-shell)){
  --tlv2-media-shell-family-kind: surface;
  --tlv2-media-shell-family-surface: var(--role-media-shell-surface-surface, var(--role-context-panel-neutral-surface, #fff));
  --tlv2-media-shell-family-border: var(--role-media-shell-surface-border, rgba(0,0,0,.12));
  --tlv2-media-shell-family-shadow: var(--role-media-shell-surface-shadow, none);
  --tlv2-media-shell-family-highlight: var(--role-media-shell-surface-highlight, none);
  --tlv2-media-shell-family-foreground: var(--role-media-shell-surface-foreground, var(--role-context-on-elevated, var(--role-on-surface, currentColor)));
  --tlv2-media-shell-kind-pad: var(--role-media-shell-surface-pad, .28rem);
  --tlv2-media-shell-content-scale: var(--role-media-shell-surface-content-scale, 68%);
}