/* ========================================================================== */
/* TurboLanding V2 — landing.css (D2 limpio y canónico)                       */
/* Objetivo: Tipografía, ritmo, grids y CTAs mínimos por bloque.              */
/* - Sin shorthands de background.                                            */
/* - Sin pintado cromático de CTA en landing (lo hace roles/components-map).  */
/* - Héroe usa solo tokens D2 (fs/lh/spacing) para evitar "doble sistema".    */
/* - D3: sin overrides de tamaño/padding de CTA (los controla base.css).      */
/* ========================================================================== */

/* S0.3 — BARRIDO DE RECIPES LOCALES QUE NO DEBEN ASCENDER
   Este archivo sigue mezclando autoridad útil de shell/layout con recipes visuales
   locales de bloque. En este slice no se rediseñan bloques: solo se deja claro qué
   zonas NO ascienden automáticamente a contrato superior.

   Etiquetas usadas en comentarios:
   - block-local-recipe  -> recipe local del bloque, no reusable por similitud
   - non-promotable      -> no debe ascender a component/global-authority
   - future-candidate    -> podría refactorizarse luego en slice propio
   - deferred-local      -> queda fuera del primer ascenso sistémico
*/

/* Índice de secciones
   1. Variables locales y ritmo global
   2. Layout global y tipografía
   3. Hero
   4. Problema
   5. Promesa
   6. Beneficios
   7. Ingredientes
   8. Packs
   9. Garantía
   10. Testimonios
   11. FAQ
   12. CTA final
   13. A11y y foco global
*/

/* TLV2 – Parche de visibilidad básica (debug)
   Garantiza que la página y los bloques sean visibles mientras depuramos. */

.tlv2-page {
  display: block;
  opacity: 1;
  visibility: visible;
}

.tlv2-block {
  display: block;
}

/* TLV2 — Empty shells (public con page_vars.render.skip_empty_public=false)
   Objetivo: que los wrappers vacíos sean visibles y consistentes para QA,
   sin afectar bloques con contenido (solo aplica si data-tlv2-empty="1"). */
.tlv2-block--empty[data-tlv2-empty="1"]{
  position: relative;
  background-color: color-mix(in oklch, var(--role-surface-section, oklch(0.98 0 0)) 92%, var(--role-accent, oklch(0.70 0.10 210)));
  border: 1px dashed color-mix(in oklch, var(--role-border-color, oklch(0.2 0 0 / 0.20)) 70%, var(--role-accent, oklch(0.70 0.10 210)));
  border-radius: var(--role-radius, 20px);
  padding: 22px 18px;
  min-height: 72px;
}

.tlv2-block--empty[data-tlv2-empty="1"]::before{
  content: attr(data-tlv2-block) " — vacío";
  display: block;
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in oklch, var(--role-muted-color, oklch(0.45 0 0)) 85%, var(--role-accent, oklch(0.70 0.10 210)));
  opacity: 0.85;
}


/* -------------------------------------------------------------------------- */
/* 1) VARIABLES LOCALES Y RITMO (usa tokens → roles → landing)                */
/* -------------------------------------------------------------------------- */

.tlv2-page {
  --tlv2-section-max: var(--section-max, 1120px);
  --tlv2-pad-x: var(--space-5, 20px);
  --tlv2-gap-y: var(--space-6, 24px);

  --tlv2-h2-size: var(--fs-section-title, var(--font-xxl, clamp(1.5rem, 2.2vw + 1rem, 2.25rem)));
  --tlv2-h3-size: var(--fs-card-title, var(--font-xl, clamp(1.25rem, 1.2vw + 1rem, 1.5rem)));
  --tlv2-body: var(--fs-section-body, var(--font-base, 1rem));
  --tlv2-muted: var(--text-muted, rgba(0,0,0,.7));

  --tlv2-radius: var(--radius-2xl, 16px);
  --tlv2-shadow: var(--shadow-md, 0 6px 20px rgba(0,0,0,.08));
  --tlv2-root-shell-seam-top: inset 0 1px 0 color-mix(in oklch, white 7%, transparent);
  --tlv2-root-shell-seam-bottom: inset 0 -1px 0 color-mix(in oklch, var(--role-border-color, rgba(0,0,0,.12)) 8%, transparent);
  --tlv2-root-shell-seam-bottom-strong: inset 0 -1px 0 color-mix(in oklch, var(--role-border-color, rgba(0,0,0,.12)) 12%, transparent);
}


/* -------------------------------------------------------------------------- */
/* 1b) FOREGROUND CONTEXT PUBLICATION (FDN-S18-P6A)                           */
/* -------------------------------------------------------------------------- */

:where(main.tlv2-page){
  --role-context-surface: var(--role-surface-base, #ffffff);
  --role-context-on: var(--role-shell-foreground, var(--role-on-surface, var(--color-text-0)));
  --role-context-on-muted: var(--role-shell-muted, var(--role-on-surface-muted, var(--color-text-muted)));
  --role-context-heading: var(--role-context-on);
  --role-context-body: var(--role-context-on);
  --role-context-border: var(--role-shell-border, var(--role-border-color, rgba(0,0,0,.12)));
  --role-context-divider: color-mix(in oklch, var(--role-context-border) 58%, transparent);
  --role-context-elevated-surface: var(--role-surface-elevated, #ffffff);
  --role-context-elevated-surface-2: var(--role-surface-family-surface-2, var(--role-surface-2, var(--role-context-elevated-surface)));
  --role-context-on-elevated: var(--role-on-elevated, var(--role-context-on));
  --role-context-on-elevated-muted: color-mix(
    in oklch,
    var(--role-context-on-elevated) 92%,
    var(--role-context-elevated-surface) 8%
  );
}



/* -------------------------------------------------------------------------- */
/* 2) LAYOUT GLOBAL Y TIPOGRAFÍA                                              */
/* -------------------------------------------------------------------------- */

/* D1 — ritmo vertical canónico (pinta landing, no base) */
.page-template-page-turbolanding .tlv2-section{
  padding-block: var(--space-section-y-fluid);
}

/* F2-S4-L2 / SPA1-B.1 — CTA Final alinea shell superior con el ritmo shared.
   Conserva bottom más generoso de cierre, pero no comprime la entrada de la sección. */
.page-template-page-turbolanding #cta-final.tlv2-section{
  padding-block-start: var(--rhythm-section-shell-y, var(--space-section-y-fluid));
  padding-block-end: clamp(2.85rem, 5vw, 4.1rem);
}


@media (max-width: 767px){
  .page-template-page-turbolanding #cta-final.tlv2-section{
    padding-block-start: var(--rhythm-section-shell-y, var(--space-section-y-fluid));
    padding-block-end: 3rem;
  }
}

.tlv2-container{
  max-width: var(--tlv2-section-max, 1120px);
  padding-inline: var(--tlv2-pad-x, var(--space-4));
  margin-inline: auto;
}

/* SPA2-B.1 — layout shared authority
   Shared-editorial and trust/closure now consume shell maxima from layout contract rails.
   Split-media stays adapter-owned and Packs remains out of scope. */
:is(#beneficios, #ingredientes, #testimonios, #faq){
  --tlv2-section-max: var(--layout-shell-standard-max, var(--section-max, 1120px));
}

#garantia{
  --tlv2-section-max: var(--layout-shell-trust-closure-compact-max, 52rem);
}

#cta-final{
  --tlv2-section-max: var(--layout-shell-trust-closure-max, 58rem);
}

/* Micro-higiene transversal (pre F2-S3)
   - Evita overflow accidental en hijos de grid/flex
   - Protege textos largos (URLs, nombres, preguntas extensas)
   - Sin cambiar markup ni contratos */
.tlv2-page :where(
  .hero-layout > *,
  #beneficios .list > *,
  #ingredientes .list > *,
  #packs .packs-grid > *,
  #testimonios .testimonials-grid > *,
  #faq .faq-list > *
){
  min-width: 0;
}

.tlv2-page :where(
  .section-title,
  .section-subtitle,
  #beneficios .beneficio h3,
  #beneficios .beneficio p,
  #ingredientes .list > li .desc,
  #ingredientes .list > li p,
  #packs .pack-card .title,
  #packs .pack-card .desc,
  #packs .pack-card .price-meta,
  #packs .pack-card .features li,
  #testimonios .testimonial blockquote,
  #testimonios .testimonial-role,
  #faq .faq-item .q,
  #faq .faq-item .a,
  #faq .faq-question,
  #faq .faq-answer,
  #cta-final .cta-final-body,
  #cta-final .cta-final-body p
){
  overflow-wrap: anywhere;
}

.section-title{
  font-size: var(--fs-section-title, var(--tlv2-h2-size));
  line-height: var(--lh-section-title, 1.15);
  letter-spacing: -.01em;
  color: var(--tlv2-root-copy-heading, var(--tlv2-copy-heading, var(--role-heading-color, inherit)));
  margin: 0 0 var(--tlv2-gap-y) 0;
}
.section-subtitle{
  font-size: var(--fs-section-subtitle, calc(var(--tlv2-body) * 1.05));
  line-height: var(--lh-section-subtitle, var(--line-normal, 1.45));
  color: var(--tlv2-root-copy-muted, var(--tlv2-copy-muted, var(--role-muted-color, var(--tlv2-muted))));
  margin: -0.25rem 0 var(--tlv2-gap-y) 0;
}

:where(
  #problema [data-role="body"],
  #promesa [data-role="body"],
  #beneficios .beneficios-body,
  #ingredientes .ingredientes-body,
  #testimonios .testimonios-body,
  #faq .faq-body
){
  font-size: var(--fs-section-body, var(--tlv2-body));
  line-height: var(--lh-section-body, var(--line-normal, 1.45));
}

:where(main.tlv2-page) [data-surface-slot="section-root"]{
  color: var(--tlv2-root-copy-body, var(--tlv2-copy-body, var(--role-body-color, inherit)));
}

/* Listas genéricas del bloque */
.tlv2-section .list{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:.5rem;
}

/* Grupos de CTAs */
.tlv2-section .cta-group{
  display:flex;
  gap:.5rem;
  justify-content:center;
  flex-wrap:wrap;
}


/* -------------------------------------------------------------------------- */
/* 3) HERO                                                                    */
/* -------------------------------------------------------------------------- */

#hero .tlv2-container{
  text-align: var(--hero-text-align, center);
}

/* Helper de fondo mobile (si existe .hero-bg en el markup) */
/* -------------------------------------------------------------------------- */
/* 3.x) COPY+MEDIA FAMILY — shared semantic tokens (Slice 2, non-visual)      */
/* Contrato de tokens: docs/contract/platform/TLV2_Copy_Media_Family_Tokens_v0.1.md */
/* -------------------------------------------------------------------------- */

:is(#hero, #problema, #promesa){
  --cmf-shell-inline-max: 100%;
  --cmf-copy-shell-inline-max: 100%;
  --cmf-copy-measure: 100%;
  --cmf-copy-title-max: 100%;
  --cmf-copy-subtitle-max: 100%;
  --cmf-copy-body-max: 100%;
  --cmf-copy-tail-max: 100%;
  --cmf-region-gap: 1rem;
  --cmf-media-gap: 1.125rem;
  --cmf-media-col-min: 292px;
  --cmf-media-stage-inline-max: 336px;
  --cmf-media-stage-inline-max-mobile: 296px;
  --cmf-media-radius: 18px;
  --cmf-media-frame-fill: transparent;
}

@media (max-width: 680px){
  #hero .hero-bg{
    background-image: var(--hero-bg-mobile, none);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
  }
}

/* SPA-H1 — Hero spacing pilot
   - Hero owns shell + region stack in landing.css
   - Presets only parametrize variables; they no longer execute final spacing/layout
   - hero-layout queda como wrapper neutral; hero-copy es la surface real del layout */
#hero{
  --tlv2-section-max: min(78rem, 100%);
  --hero-shell-pad-y: clamp(3.75rem, 7.25vw, 6.75rem);
  --hero-layout-gap: clamp(1.15rem, 2.2vw, 2.35rem);
  --hero-region-gap: clamp(.95rem, 1.55vw, 1.15rem);
  --hero-desktop-shell-max: 1220px;
  --hero-desktop-column-gap: clamp(1.6rem, 2.25vw, 2.6rem);
  --hero-desktop-copy-measure: min(37.5rem, 100%);
  --hero-desktop-copy-body-max: min(35rem, 100%);
  --hero-desktop-title-max: 23ch;
  --cmf-region-gap: var(--hero-region-gap);
  --cmf-media-gap: var(--hero-layout-gap);
  --hero-header-gap: var(--space-3, .75rem);
  --hero-body-gap: var(--space-3, .75rem);
  --hero-cta-group-gap: var(--space-3, .75rem);
  --hero-cta-group-row-gap: var(--space-2, .5rem);
  --hero-gap-header-cta-extra: clamp(.45rem, .9vw, .8rem);
  --hero-gap-cta-micro: var(--space-2, .5rem);
  --hero-gap-micro-media-extra: clamp(.65rem, 1.2vw, 1rem);
  --hero-gap-header-media-extra: clamp(.25rem, .8vw, .55rem);
  --hero-gap-media-body-extra: clamp(.25rem, .8vw, .55rem);
  --hero-text-align: center;
  --hero-block-mis: auto;
  --hero-block-mie: auto;
  --hero-cta-justify: center;
  --hero-cta-self: center;
  padding-block: var(--hero-shell-pad-y);
  /* 1B — Hero deja de ser autoridad paralela de shell.
     El fondo real del shell lo decide el root painter por species. */
}

#hero[data-hero-align="left"]{
  --hero-text-align: left;
  --hero-block-mis: 0;
  --hero-block-mie: auto;
  --hero-cta-justify: flex-start;
  --hero-cta-self: start;
}

#hero[data-hero-align="center"]{
  --hero-text-align: center;
  --hero-block-mis: auto;
  --hero-block-mie: auto;
  --hero-cta-justify: center;
  --hero-cta-self: center;
}

#hero[data-hero-align="right"]{
  --hero-text-align: right;
  --hero-block-mis: auto;
  --hero-block-mie: 0;
  --hero-cta-justify: flex-end;
  --hero-cta-self: end;
}

@media (max-width: 959px){
  #hero[data-hero-align-mobile="left"]{
    --hero-text-align: left;
    --hero-block-mis: 0;
    --hero-block-mie: auto;
    --hero-cta-justify: flex-start;
    --hero-cta-self: start;
  }

  #hero[data-hero-align-mobile="center"]{
    --hero-text-align: center;
    --hero-block-mis: auto;
    --hero-block-mie: auto;
    --hero-cta-justify: center;
    --hero-cta-self: center;
  }

  #hero[data-hero-align-mobile="right"]{
    --hero-text-align: right;
    --hero-block-mis: auto;
    --hero-block-mie: 0;
    --hero-cta-justify: flex-end;
    --hero-cta-self: end;
  }
}

#hero .hero-layout{
  display: block;
}

#hero .hero-copy{
  display: flex;
  flex-direction: column;
  grid-column: 1 / -1;
  gap: var(--cmf-region-gap, var(--hero-region-gap));
  width: 100%;
  min-width: 0;
}

#hero .hero-header{
  order: 10;
  display: grid;
  gap: var(--hero-header-gap);
  min-width: 0;
}

#hero .hero-body-group{
  order: 20;
  display: grid;
  gap: var(--hero-body-gap);
  min-width: 0;
}

#hero .hero-ctas{
  order: 30;
  display: flex;
  flex-direction: column;
  gap: var(--hero-gap-cta-micro);
  width: fit-content;
  max-width: 100%;
  min-width: 0;
  justify-self: var(--hero-cta-self);
  align-items: stretch;
  margin-inline-start: 0;
  margin-inline-end: 0;
}

#hero .hero-microcopy{
  order: 40;
  min-width: 0;
}

#hero .hero-media{
  order: 50;
  min-width: 0;
}

#hero .hero-copy[data-has-body-group="0"] .hero-body-group{ display: none !important; }
#hero .hero-copy[data-has-ctas="0"] .hero-ctas{ display: none !important; }
#hero .hero-copy[data-has-microcopy="0"] .hero-microcopy{ display: none !important; }

#hero .hero-layout[data-hero-mobile-flow="media-after-subtitle"] .hero-media{ order: 15; }

#hero .hero-layout.hero-layout--no-media .hero-media,
#hero .hero-layout.hero-layout--text-only .hero-media{
  display: none;
}

#hero .hero-copy[data-has-body-group="0"][data-has-ctas="1"] .hero-ctas{
  margin-top: var(--hero-gap-header-cta-extra);
}


/* SPA-H1c — Hero copy spacing final tuning (internalized) */
#hero .hero-body p + p{
  margin-top: clamp(.8rem, 1.2vw, 1rem);
}

#hero .hero-copy[data-has-body-group="1"] .hero-ctas{
  margin-top: clamp(.7rem, 1.5vw, 1rem);
}

#hero .hero-copy[data-has-body-group="0"][data-has-ctas="1"] .hero-ctas{
  margin-top: clamp(1rem, 2vw, 1.35rem);
}

#hero .hero-copy[data-has-ctas="0"][data-has-microcopy="1"] .hero-microcopy{
  margin-top: calc(var(--hero-gap-cta-micro) - var(--hero-region-gap));
}

@media (max-width: 959px){
  #hero .hero-layout[data-hero-mobile-flow="default"] .hero-copy[data-has-microcopy="1"] .hero-media{
    margin-top: var(--hero-gap-micro-media-extra);
  }

  #hero .hero-layout[data-hero-mobile-flow="media-after-subtitle"] .hero-media{
    margin-top: var(--hero-gap-header-media-extra);
  }

  #hero .hero-layout[data-hero-mobile-flow="media-after-subtitle"] .hero-body-group{
    margin-top: var(--hero-gap-media-body-extra);
  }
  #hero .hero-copy[data-has-body-group="1"] .hero-ctas{
    margin-top: clamp(.85rem, 3.8vw, 1.15rem);
  }

  #hero .hero-copy[data-has-body-group="0"][data-has-ctas="1"] .hero-ctas{
    margin-top: clamp(1rem, 4.6vw, 1.4rem);
  }
}

@media (min-width: 960px){
  #hero{
    --cmf-media-gap: var(--hero-desktop-column-gap, var(--hero-layout-gap));
  }

  #hero .hero-copy{
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(320px, 0.96fr);
    column-gap: var(--cmf-media-gap, var(--hero-layout-gap));
    row-gap: var(--hero-region-gap);
    align-items: start;
    max-inline-size: min(100%, var(--hero-desktop-shell-max));
    margin-inline: auto;
  }

  #hero .hero-layout.hero-layout--media-left .hero-copy{
    grid-template-columns: minmax(320px, 0.96fr) minmax(0, 1.12fr);
  }

  #hero .hero-layout.hero-layout--media-right .hero-header,
  #hero .hero-layout.hero-layout--media-right .hero-body-group,
  #hero .hero-layout.hero-layout--media-right .hero-ctas,
  #hero .hero-layout.hero-layout--media-right .hero-microcopy{
    grid-column: 1;
  }

  #hero .hero-layout.hero-layout--media-right .hero-media{
    grid-column: 2;
    grid-row: 1 / span 5;
    align-self: start;
    justify-self: center;
  }

  #hero .hero-layout.hero-layout--media-left .hero-header,
  #hero .hero-layout.hero-layout--media-left .hero-body-group,
  #hero .hero-layout.hero-layout--media-left .hero-ctas,
  #hero .hero-layout.hero-layout--media-left .hero-microcopy{
    grid-column: 2;
  }

  #hero .hero-layout.hero-layout--media-left .hero-media{
    grid-column: 1;
    grid-row: 1 / span 5;
    align-self: start;
    justify-self: center;
  }

  #hero .section-title{
    max-width: var(--hero-desktop-title-max, 25ch);
  }

  #hero .section-subtitle,
  #hero .hero-body,
  #hero .hero-microcopy{
    max-width: var(--hero-desktop-copy-body-max, min(34rem, 100%));
  }

  #hero .hero-layout.hero-layout--no-media .hero-copy,
  #hero .hero-layout.hero-layout--text-only .hero-copy{
    grid-template-columns: 1fr;
    max-inline-size: min(100%, var(--hero-desktop-copy-measure));
  }
}

#hero .hero-eyebrow{
  margin: 0;
  margin-block-end: .68rem;
  display: inline-flex;
  justify-self: start;
  align-self: start;
  width: fit-content;
  max-width: min(75%, 24ch);
  margin-inline-start: var(--hero-block-mis);
  margin-inline-end: var(--hero-block-mie);
  --tlv2-pill-gap: .4rem;
  --tlv2-pill-pad-y: .35rem;
  --tlv2-pill-pad-x: .7rem;
  font-size: .76rem;
  line-height: 1.08;
  letter-spacing: .075em;
  text-transform: uppercase;
  font-weight: 650;
  opacity: .95;
}

#hero .section-title{
  font-size: var(--fs-hero-title);
  line-height: var(--lh-hero-title);
  letter-spacing: -0.01em;
  margin: 0;
  max-width: 22ch;
  margin-inline-start: var(--hero-block-mis);
  margin-inline-end: var(--hero-block-mie);
  color: var(--role-heading-color, inherit);
  text-wrap: balance;
}

/* En escritorio, dale un poco más de aire */
@media (min-width: 1024px){
  #hero .section-title{
    max-width: var(--hero-desktop-title-max, 25ch);
  }
}

#hero .section-subtitle{
  font-size: var(--fs-hero-subtitle);
  line-height: var(--lh-hero-subtitle);
  color: var(--tlv2-copy-muted, var(--role-muted-color, var(--tlv2-muted)));
  margin: 0;
  max-width: var(--measure-section-body, min(66ch, 100%));
  margin-inline-start: var(--hero-block-mis);
  margin-inline-end: var(--hero-block-mie);
  opacity: .96;
  text-wrap: pretty;
}

/* Cuerpo del héroe (texto bajo el subtítulo) */
#hero .hero-body{
  max-width: var(--measure-section-subtitle-compact, min(56ch, 100%));
  margin: 0;
  margin-inline-start: var(--hero-block-mis);
  margin-inline-end: var(--hero-block-mie);
  display: grid;
  gap: var(--hero-body-gap);
  color: var(--role-body-color, inherit);
}

#hero .hero-body p{
  margin: 0;
  font-size: calc(var(--tlv2-body) * 1.02);
  line-height: var(--line-normal, 1.45);
}

#hero .hero-header,
#hero .hero-body-group,
#hero .hero-ctas,
#hero .hero-microcopy{
  text-align: var(--hero-text-align);
}

#hero .hero-cta-group,
#hero .cta-group{
  justify-content: var(--hero-cta-justify);
}

#hero .hero-ctas .hero-microcopy{
  width: 100%;
  max-width: none;
  margin: 0;
  text-align: center;
}

#hero .hero-bullets{
  margin: 0;
  margin-inline-start: var(--hero-block-mis);
  margin-inline-end: var(--hero-block-mie);
  padding: 0;
  list-style: none;
  display: grid;
  gap: .65rem;
  width: min(100%, 54ch);
  text-align: left;
}

#hero .hero-bullet{
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: .6rem;
  color: var(--role-body-color, inherit);
  line-height: 1.35;
}

#hero .hero-bullet::before{
  content: "";
  width: .55rem;
  height: .55rem;
  border-radius: 999px;
  margin-top: .28em;
  background: var(--role-primary, currentColor);
  box-shadow: 0 0 0 4px color-mix(in oklch, var(--role-primary, currentColor) 18%, transparent);
}

/* Microcopy del héroe */
#hero .hero-microcopy{
  margin: 0;
  margin-inline-start: var(--hero-block-mis);
  margin-inline-end: var(--hero-block-mie);
  width: min(100%, 56ch);
  font-size: calc(var(--tlv2-body) * 0.9);
  line-height: 1.4;
  color: var(--tlv2-copy-muted, var(--role-muted-color, var(--tlv2-muted)));
  opacity: .92;
}

/* CTAs del héroe */
#hero .hero-cta-group,
#hero .cta-group{
  margin-top: 0;
  gap: var(--hero-cta-group-gap);
  row-gap: var(--hero-cta-group-row-gap);
  align-items: stretch;
}

#hero .hero-cta-group .cta,
#hero .cta-group .cta{
  min-width: 220px; /* Mantener ancho mínimo; tamaño/altura lo maneja base.css */
  --cta-min-h: 50px;
  --cta-pad-x: 1rem;
}

/* N3.1 Buttons — Hero mantiene layout/tamaño local; la pintura base de secondary
   la gobierna la familia canónica en base/components-map/presets. */
#hero .hero-cta-group .hero-secondary,
#hero .cta-group .hero-secondary{
  filter: none;
}

/* PM2-A.1 — cierre de huella comparable hero vs split-media
   Microajuste editorial final: hero gana un poco de presencia; split-media se compacta levemente. */
/* Shell de media premium (Hero Media Stage v1.5 — tight | soft | blend) */
#hero .hero-media{
  --hero-media-stage-width: 468px;
  --hero-media-stage-width-mobile: 348px;
  --hero-media-stage-ratio: 1 / 1;
  --hero-media-stage-radius: var(--hero-media-radius, clamp(16px, 1.4vw, 20px));
  --hero-media-frame-fill: var(--role-hero-media-frame-fill, var(--role-accent, oklch(0.695801 0.204286 43.4883 / 0.98)));
  --hero-media-frame-pad: 3px;
  --hero-media-object-max-w: min(100%, 384px);
  --hero-media-object-max-h: 384px;
  --hero-media-image-radius: max(0px, calc(var(--hero-media-stage-radius) - var(--hero-media-frame-pad)));
  --cmf-media-stage-inline-max: var(--hero-media-stage-width);
  --cmf-media-stage-inline-max-mobile: var(--hero-media-stage-width-mobile);
  --cmf-media-radius: var(--hero-media-stage-radius);
  --cmf-media-frame-fill: var(--hero-media-frame-fill);
  position: relative;
  width: min(100%, var(--cmf-media-stage-inline-max, var(--hero-media-stage-width)));
  aspect-ratio: var(--hero-media-stage-ratio);
  min-height: clamp(220px, 30vw, 360px);
  margin-inline: auto;
  display: grid;
  place-items: center;
}

#hero .hero-media--shape-square{
  --hero-media-stage-width: 446px;
  --hero-media-stage-width-mobile: 324px;
  --hero-media-stage-ratio: 1 / 1;
  --hero-media-object-max-w: min(100%, 398px);
  --hero-media-object-max-h: 398px;
}

#hero .hero-media--shape-landscape{
  --hero-media-stage-width: 506px;
  --hero-media-stage-width-mobile: 340px;
  --hero-media-stage-ratio: 5 / 4;
  --hero-media-object-max-w: min(100%, 442px);
  --hero-media-object-max-h: 286px;
}

#hero .hero-media--shape-portrait{
  --hero-media-stage-width: 330px;
  --hero-media-stage-width-mobile: 288px;
  --hero-media-stage-ratio: auto;
  --hero-media-object-max-w: min(100%, 308px);
  --hero-media-object-max-h: min(100%, 456px);
  width: fit-content;
  max-width: min(100%, var(--hero-media-stage-width));
  aspect-ratio: auto;
  min-height: 0;
}

#hero .hero-media__frame{
  box-sizing: border-box;
  display: block;
  width: max-content;
  max-width: 100%;
  height: max-content;
  max-height: none;
  min-height: 0;
  justify-self: center;
  align-self: center;
  padding: var(--hero-media-frame-pad);
  border: 0;
  outline: 0;
  border-radius: var(--cmf-media-radius, var(--hero-media-stage-radius));
  background: var(--cmf-media-frame-fill, var(--hero-media-frame-fill));
  box-shadow: none;
  overflow: visible;
}

#hero .hero-media:not(.hero-media--stage-blend) .hero-media__frame{
  box-shadow: 0 16px 38px rgba(15, 23, 42, .08);
}

#hero .hero-media__figure{
  margin: 0;
  display: block;
  width: max-content;
  max-width: 100%;
  height: auto;
  max-height: none;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
  border-radius: var(--hero-media-image-radius);
  overflow: visible;
}

#hero .hero-media__img{
  display: block;
  width: auto;
  height: auto;
  max-width: min(100%, var(--hero-media-object-max-w));
  max-height: var(--hero-media-object-max-h);
  object-fit: contain;
  object-position: center;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  box-shadow: none;
  vertical-align: top;
  border-radius: inherit;
}

#hero .hero-media__frame--placeholder{
  width: min(100%, var(--hero-media-stage-width));
  max-width: 100%;
}
#hero .hero-media__placeholder{
  width: 100%;
  min-height: clamp(220px, 30vw, 360px);
  display: grid;
  place-items: center;
  text-align: center;
  padding: 1.25rem;
  box-sizing: border-box;
}

#hero .hero-media__placeholder p{
  margin: 0 0 .35rem;
  font-weight: 700;
}

#hero .hero-media__placeholder small{
  display: block;
  max-width: var(--measure-section-title, min(24ch, 100%));
  opacity: .78;
}

/* Stage: marco ceñido */
#hero .hero-media--stage-tight{
  --hero-media-frame-pad: 3px;
}

/* Stage: marco con aire */
#hero .hero-media--stage-soft{
  --hero-media-frame-pad: 8px;
}

/* Stage: integrada */
#hero .hero-media--stage-blend{
  --hero-media-frame-pad: 0px;
}

#hero .hero-media--stage-blend .hero-media__frame{
  background: transparent;
}

/* Placeholder por stage */
#hero .hero-media--stage-tight .hero-media__placeholder,
#hero .hero-media--stage-soft .hero-media__placeholder{
  border-radius: calc(var(--hero-media-stage-radius) - 4px);
  border: 1px dashed color-mix(in oklch, var(--role-border, currentColor) 48%, transparent);
  background: color-mix(in oklch, var(--role-surface, #fff) 80%, transparent);
}

#hero .hero-media--stage-blend .hero-media__placeholder{
  border-radius: calc(var(--hero-media-stage-radius) - 4px);
  border: 1px dashed color-mix(in oklch, var(--role-border, currentColor) 42%, transparent);
  background: color-mix(in oklch, var(--role-surface, #fff) 30%, transparent);
}

@media (max-width: 767px){
  #hero .hero-ctas{
    width: min(100%, 24rem);
    max-width: 100%;
    align-self: var(--hero-cta-self);
    gap: .6rem;
  }

  #hero .hero-cta-group{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: .6rem;
    row-gap: .6rem;
  }

  #hero .hero-cta-group .cta{
    width: 100%;
    min-width: 0;
    justify-content: center;
    min-height: 44px;
  }

  #hero .hero-ctas .hero-microcopy{
    width: 100%;
    max-width: none;
    text-align: center;
  }
}

@media (max-width: 640px){
  #hero .hero-media{
    width: min(100%, var(--cmf-media-stage-inline-max-mobile, var(--hero-media-stage-width-mobile, 340px)));
    min-height: auto;
  }

  #hero .hero-media--shape-square{
    --hero-media-object-max-w: min(100%, 292px);
    --hero-media-object-max-h: 292px;
  }

  #hero .hero-media--shape-landscape{
    --hero-media-object-max-w: min(100%, 312px);
    --hero-media-object-max-h: 212px;
  }

  #hero .hero-media--shape-portrait{
    --hero-media-stage-width-mobile: 288px;
    --hero-media-stage-ratio: auto;
    --hero-media-object-max-w: min(100%, 264px);
    --hero-media-object-max-h: 396px;
    width: fit-content;
    max-width: min(100%, var(--hero-media-stage-width-mobile));
    aspect-ratio: auto;
    min-height: 0;
  }

  #hero .hero-media--stage-tight.hero-media--shape-portrait{
    --hero-media-frame-pad: 3px;
  }

  #hero .hero-media--stage-soft.hero-media--shape-portrait{
    --hero-media-frame-pad: 8px;
  }
}

@media (min-width: 960px){
  #hero .hero-layout{
    gap: clamp(1.25rem, 2.4vw, 2.75rem);
    align-items: center;
  }

  #hero .hero-media{
    width: min(100%, var(--cmf-media-stage-inline-max, var(--hero-media-stage-width)));
    min-height: clamp(252px, 29vw, 366px);
  }

  #hero .hero-media--shape-square{
    --hero-media-object-max-w: min(100%, 392px);
    --hero-media-object-max-h: 392px;
  }

  #hero .hero-media--shape-landscape{
    --hero-media-object-max-w: min(100%, 430px);
    --hero-media-object-max-h: 286px;
  }

  #hero .hero-media--shape-portrait{
    --hero-media-stage-width: 316px;
    --hero-media-object-max-w: min(100%, 296px);
    --hero-media-object-max-h: 442px;
  }

  #hero .hero-media--stage-tight.hero-media--shape-portrait{
    --hero-media-frame-pad: 3px;
  }

  #hero .hero-media--stage-soft.hero-media--shape-portrait{
    --hero-media-frame-pad: 8px;
  }
}

/* Foco visible sin !important en HÉROE (fallback si no hay :focus-visible) */
#hero .cta:focus,
#hero .boton-comprar:focus{
  outline: var(--role-focus-ring-width, 2px) solid var(--tlv2-focus-ring, var(--role-focus-ring-color, var(--role-button-primary-surface, currentColor)));
  outline-offset: 2px;
}

@supports selector(:focus-visible){
  #hero .cta:focus,
  #hero .boton-comprar:focus{
    outline: none;
  }

  #hero .cta:focus-visible,
  #hero .boton-comprar:focus-visible{
    outline: var(--role-focus-ring-width, 2px) solid var(--tlv2-focus-ring, var(--role-focus-ring-color, var(--role-button-primary-surface, currentColor)));
    outline-offset: 2px;
  }
}

/* -------------------------------------------------------------------------- */
/* 4) PROBLEMA + 5) PROMESA (F2-P1.a base shared, markup-safe)                */
/* S0.3 clasificación: block-local-recipe / future-candidate                  */
/* Nota: la convergencia visual con cards/eyebrows premium no asciende        */
/* automáticamente a component-authority.                                      */
/* -------------------------------------------------------------------------- */

#problema,
#promesa{
  --f2p1a-copy-max: var(--measure-section-body-wide, min(72ch, 100%));
  --f2p1a-body-gap: clamp(.5rem, .25vw + .45rem, .8rem);
  --f2p1a-list-item-leading: 1.35;
  --f2p1a-card-radius: var(--role-card-radius, var(--tlv2-radius, 16px));
  --f2p1a-card-pad-y: .75rem;
  --f2p1a-card-pad-x: 1rem;
  --f2p1a-card-border: 1px solid rgba(0,0,0,.08);
  --f2p1a-card-shadow: var(--tlv2-shadow, 0 6px 20px rgba(0,0,0,.08));

  /* F2-P1.b1 — visual slice shared (Problema + Promesa, markup-safe) */
  --f2p1b-section-gap: clamp(.8rem, .45vw + .7rem, 1.15rem);
  --f2p1b-title-max: var(--measure-title-compact, min(24ch, 100%));
  --f2p1b-subtitle-max: var(--measure-section-subtitle, min(62ch, 100%));
  --f2p1b-lead-color: var(--tlv2-copy-muted, var(--role-muted-color, var(--tlv2-muted, rgba(15, 23, 42, .76))));
  --f2p1b-surface: var(--role-surface-section, var(--role-surface, #fff));
  --f2p1b-surface-elev: var(--role-surface-elevated, #fff);
  --f2p1b-border-soft: var(--tlv2-chrome-divider, color-mix(in oklch, var(--role-border-color, rgba(0,0,0,.14)) 72%, transparent));
  --f2p1b-border-strong: var(--tlv2-chrome-border-strong, color-mix(in oklch, var(--role-border-color, rgba(0,0,0,.18)) 65%, var(--role-accent, oklch(0.72 0.09 240)) 35%));
  --f2p1b-shadow-soft: 0 10px 28px rgba(12, 18, 28, .06);
  --f2p1b-shadow-card: 0 12px 30px rgba(12, 18, 28, .08);
}

#problema .tlv2-container,
#promesa .tlv2-container{
  display:grid;
  gap:var(--f2p1b-section-gap, var(--tlv2-gap-y));
}

#problema{
  --problema-shell-gap: var(--f2p1b-section-gap, var(--tlv2-gap-y));
  --problema-body-gap: var(--f2p1a-body-gap);
  --problema-list-gap: clamp(.65rem, .35vw + .55rem, .95rem);
  --problema-item-pad-y: .9rem;
  --problema-item-pad-x: 1rem;
  --problema-item-pad-x-start: 1.05rem;
}


#problema :is(.section-eyebrow, .section-title, .section-subtitle, [data-role="body"], .list),
#promesa :is(.section-eyebrow, .section-title, .section-subtitle, [data-role="body"], .list){
  max-inline-size: var(--f2p1a-copy-max);
}

#problema :is(.problema-eyebrow, .promesa-eyebrow),
#promesa :is(.problema-eyebrow, .promesa-eyebrow){
  margin: 0;
  margin-block-end: .68rem;
  --tlv2-pill-gap: .45rem;
  --tlv2-pill-pad-y: .38rem;
  --tlv2-pill-pad-x: .7rem;
  font-size: .77rem;
  line-height: 1.02;
  letter-spacing: .08em;
  font-weight: 650;
  opacity: .95;
}

/* VC1-B consumer placement hardening: split-media eyebrows must stay intrinsic within intro grid,
   while the shared eyebrow primitive remains layout-agnostic for other consumers/blueprints. */
:is(#problema, #promesa) .tlv2-split-media__intro > .section-eyebrow{
  inline-size: fit-content;
  max-inline-size: 100%;
  justify-self: start;
}

#promesa .tlv2-split-media--text-only .tlv2-split-media__intro > .section-eyebrow{
  justify-self: center;
}

#problema .section-title,
#promesa .section-title{
  margin: 0;
  max-inline-size: var(--f2p1b-title-max);
  text-wrap: balance;
}

#problema .section-subtitle,
#promesa .section-subtitle{
  margin: 0;
  max-inline-size: var(--f2p1b-subtitle-max);
  color: var(--tlv2-copy-body, var(--f2p1b-lead-color));
  text-wrap: pretty;
}

#problema [data-role="body"],
#promesa [data-role="body"]{
  display:grid;
  gap:var(--f2p1a-body-gap);
}

#problema [data-role="body"] > :first-child,
#promesa [data-role="body"] > :first-child{
  margin-top:0;
}

#problema [data-role="body"] > :last-child,
#promesa [data-role="body"] > :last-child{
  margin-bottom:0;
}

#problema .list li{
  line-height: var(--f2p1a-list-item-leading);
}

/* -------------------------------------------------------------------------- */
/* 4) PROBLEMA                                                                */
/* -------------------------------------------------------------------------- */

#problema .tlv2-container{
  justify-items: start;
}

#problema .problema-body{
  display:grid;
  gap: var(--problema-body-gap);
  color: var(--tlv2-copy-body, var(--f2p1b-lead-color));
  max-inline-size: min(68ch, 100%);
}

#problema .problema-body p{
  margin: 0;
}

#problema .list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap: var(--problema-list-gap, .95rem);
}

#problema .list li{
  position:relative;
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:start;
  gap: var(--problema-item-marker-gap, .9rem);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: inherit;
  opacity: 1;
}

#problema .list li:last-child{
  padding-bottom: 0;
}

#problema .list li::before{
  content: "•";
  display:inline-grid;
  place-items:center;
  inline-size: 1.2rem;
  min-inline-size: 1.2rem;
  block-size: 1.5rem;
  margin-top: .02rem;
  color: var(--tlv2-chip-foreground, var(--role-context-chip-neutral-foreground, var(--role-context-heading, var(--role-heading-color, currentColor))));
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1;
}

#problema .problema-list[data-marker-style="dash"] li::before{ content: "—"; }
#problema .problema-list[data-marker-style="arrow"] li::before{ content: "→"; }
#problema .problema-list[data-marker-style="check"] li::before{ content: "✓"; }

#problema .problema-list[data-list-mode="icon-list"] li::before{
  inline-size: 1.95rem;
  min-inline-size: 1.95rem;
  block-size: 1.95rem;
  margin-top: .04rem;
  --tlv2-chip-radius: 999px;
  font-size: .95rem;
}

#problema .problema-item__content{
  display:grid;
  gap:.24rem;
  min-width:0;
}
#problema .problema-item__title{
  margin:0;
  font-size:clamp(1rem,.34vw + .94rem,1.07rem);
  line-height:1.28;
  letter-spacing:-.01em;
  color: var(--tlv2-copy-heading, var(--cc-p1-problema-heading, inherit));
}
#problema .problema-item__text{
  margin:0;
  color: var(--tlv2-copy-body, var(--cc-p1-problema-body, var(--f2p1b-lead-color)));
}



/* -------------------------------------------------------------------------- */
/* 5) PROMESA                                                                 */
/* -------------------------------------------------------------------------- */

#promesa .tlv2-container{
  gap: clamp(.8rem, .45vw + .7rem, 1.1rem);
  text-align:center;
  justify-items:center;
}

#promesa .tlv2-split-media__body--promesa[data-role="body"]{
  margin: .15rem 0 0;
  inline-size: min(70ch, 100%);
  row-gap: var(--f2p1a-body-gap);
  gap: var(--f2p1a-body-gap);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

#promesa .tlv2-split-media__body--promesa[data-role="body"] p{
  margin: 0;
  color: var(--tlv2-copy-body, var(--f2p1b-lead-color));
}

#promesa .tlv2-split-media__body--promesa[data-role="body"] p + p{
  margin-top: var(--cta-final-body-paragraph-gap);
}

#promesa .tlv2-split-media__body--promesa[data-role="body"] strong{
  color: var(--garantia-copy-heading, var(--role-ink, currentColor));
}



@media (max-width: 767px){
  #problema .list{
    gap: var(--problema-list-gap, .9rem);
  }

}


/* -------------------------------------------------------------------------- */
/* 6) BENEFICIOS                                                              */
/* S0.3 clasificación: block-local-recipe / future-candidate                  */
/* Nota: usa consumers oficiales P6E, pero su card recipe premium sigue       */
/* siendo local del bloque hasta que exista contrato superior explícito.      */
/* -------------------------------------------------------------------------- */

/* SPA-L1 — Benefits/List family
   - landing.css = única autoridad real del shell + body + list/item spacing
   - Beneficios se expresa como cards de valor/resultado: mas presencia, mas aire, mas lectura comercial */
#beneficios{
  --beneficios-surface: var(--role-surface-section, var(--role-surface, #fff));
  --beneficios-surface-card: var(--tlv2-card-surface, var(--tlv2-card-family-surface));
  --beneficios-border: var(--tlv2-card-border, var(--tlv2-card-family-border));
  --beneficios-border-strong: var(--tlv2-card-border-active, var(--tlv2-chrome-border-strong, var(--beneficios-border)));
  --beneficios-card-highlight: var(--tlv2-card-highlight, var(--tlv2-card-family-highlight, none));
  --beneficios-shadow: var(--tlv2-card-shadow, var(--tlv2-card-family-shadow));
  --beneficios-shadow-hover: var(--tlv2-card-shadow-hover, var(--tlv2-card-family-shadow-hover, var(--beneficios-shadow)));
  --beneficios-muted: var(--tlv2-card-copy-muted, var(--tlv2-card-family-muted, var(--tlv2-copy-muted, var(--role-muted-color, var(--tlv2-muted)))));
  --beneficios-text: var(--tlv2-card-copy-body, var(--tlv2-card-family-body, var(--tlv2-copy-body, var(--role-ink, inherit))));
  --beneficios-card-heading: var(--tlv2-card-copy-heading, var(--tlv2-card-family-heading, var(--beneficios-text)));
  --beneficios-card-text: var(--tlv2-card-copy-body, var(--tlv2-card-family-body, var(--beneficios-text)));
  --beneficios-card-muted: var(--tlv2-card-copy-muted, var(--tlv2-card-family-muted, var(--beneficios-muted)));
  --beneficios-card-body: var(--beneficios-card-text);
  --beneficios-card-icon-surface: var(--tlv2-card-icon-shell-surface, var(--tlv2-icon-shell-surface, var(--tlv2-card-chip-surface, var(--beneficios-surface-card))));
  --beneficios-card-icon-border: var(--tlv2-card-icon-shell-border, var(--tlv2-icon-shell-border, var(--tlv2-card-chip-border, var(--beneficios-border))));
  --beneficios-card-icon-foreground: var(--tlv2-card-icon-shell-foreground, var(--tlv2-icon-shell-foreground, var(--beneficios-card-heading)));
  --beneficios-card-pill-surface: var(--tlv2-card-chip-surface, var(--tlv2-chip-surface, var(--beneficios-surface-card)));
  --beneficios-card-pill-border: var(--tlv2-card-chip-border, var(--tlv2-chip-border, var(--beneficios-border)));
  --beneficios-radius-card: clamp(18px, 1.35vw, 24px);

  --beneficios-shell-gap: clamp(.9rem, .72vw + .58rem, 1.2rem);
  --beneficios-header-gap: clamp(.7rem, .55vw + .46rem, 1rem);
  --beneficios-body-gap: clamp(1.05rem, .82vw + .72rem, 1.45rem);
  --beneficios-body-paragraph-gap: .68rem;
  --beneficios-list-gap-row: clamp(.95rem, .7vw + .58rem, 1.2rem);
  --beneficios-list-gap-col: clamp(.95rem, .88vw + .52rem, 1.25rem);
  --beneficios-list-offset: clamp(.2rem, .24vw, .4rem);
  --beneficios-gap-card: clamp(.95rem, .58vw + .7rem, 1.18rem);
  --beneficios-item-pad: clamp(1.05rem, .92vw + .74rem, 1.4rem);
  --beneficios-microcopy-gap: clamp(1rem, .78vw + .68rem, 1.3rem);
  --beneficios-copy-gap: clamp(.38rem, .26vw + .24rem, .58rem);
  --beneficios-media-size-icon: clamp(2.85rem, .7vw + 2.55rem, 3.15rem);
  --beneficios-media-size-image: clamp(3.3rem, 1.1vw + 2.9rem, 4.2rem);
  --beneficios-media-shell-pad: .34rem;
  --beneficios-clean-gap: clamp(.9rem, .78vw + .56rem, 1.18rem);
  --beneficios-clean-pad-block: clamp(.8rem, .38vw + .66rem, 1rem);
  --beneficios-clean-divider: color-mix(in oklch, var(--tlv2-chrome-divider, var(--role-context-divider, rgba(0,0,0,.08))) 88%, transparent);
}

#beneficios .tlv2-container{
  position: relative;
}

#beneficios .beneficios-eyebrow{
  margin: 0 0 .68rem;
  --tlv2-pill-gap: .45rem;
  --tlv2-pill-pad-y: .35rem;
  --tlv2-pill-pad-x: .7rem;
  font-size: .77rem;
  line-height: 1.02;
  letter-spacing: .085em;
  text-transform: uppercase;
  font-weight: 650;
  opacity: .94;
}

#beneficios .section-title{
  max-width: var(--measure-section-title, min(24ch, 100%));
  margin-bottom: var(--beneficios-header-gap);
}

#beneficios .section-subtitle{
  max-width: var(--measure-section-subtitle, min(62ch, 100%));
  margin-bottom: var(--beneficios-shell-gap);
  color: color-mix(in oklch, var(--beneficios-muted) 88%, var(--beneficios-text) 12%);
}

#beneficios .beneficios-body,
#beneficios .beneficios-microcopy{
  max-width: var(--measure-section-body, min(66ch, 100%));
}


#beneficios .beneficios-body{
  margin: 0 0 var(--beneficios-body-gap);
  color: color-mix(in oklch, var(--beneficios-text) 84%, var(--beneficios-muted));
}

#beneficios .beneficios-body > :first-child{ margin-top: 0; }
#beneficios .beneficios-body > :last-child{ margin-bottom: 0; }
#beneficios .beneficios-body p{
  margin: 0;
  line-height: var(--lh-section-body, var(--line-normal, 1.45));
}
#beneficios .beneficios-body p + p{
  margin-top: var(--beneficios-body-paragraph-gap);
}

#beneficios .list{
  display: grid;
  gap: var(--beneficios-list-gap-row) var(--beneficios-list-gap-col);
  margin-top: var(--beneficios-list-offset);
  align-items: stretch;
}

#beneficios .beneficios-grid{
  grid-template-columns: 1fr;
}

#beneficios .beneficios-grid.beneficios-grid--count-1{
  max-inline-size: min(28rem, 100%);
  margin-inline: auto;
}

#beneficios .list .beneficio{
  position: relative;
  display: grid;
  align-content: start;
  align-items: start;
  row-gap: var(--beneficios-gap-card);
  column-gap: var(--beneficios-gap-card);
  gap: var(--beneficios-gap-card);
  min-width: 0;
  padding: var(--beneficios-item-pad);
  border-radius: var(--tlv2-card-radius, var(--beneficios-radius-card));
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-image .18s ease;
  isolation: isolate;
  overflow: clip;
}

#beneficios .list .beneficio::before{
  content: none;
}

#beneficios .list .beneficio::after{
  content: none;
}

#beneficios .list .beneficio:hover{
  transform: translateY(-2px);
}

#beneficios .list .beneficio:focus-within{
  border-color: var(--tlv2-card-border-active, var(--beneficios-border-strong));
  box-shadow: 0 0 0 3px var(--tlv2-focus-ring, var(--role-context-focus-ring, color-mix(in oklch, var(--role-accent, oklch(0.72 0.09 240)) 22%, transparent))), var(--tlv2-card-focus-shadow, var(--tlv2-card-highlight, none), var(--tlv2-card-shadow-hover));
}

#beneficios .beneficio .beneficio-media{
  display: flex;
  align-items: center;
}

#beneficios .beneficio .beneficio-icon{
  inline-size: 2.85rem;
  block-size: 2.85rem;
  display: inline-grid;
  place-items: center;
  border-radius: 1rem;
  border: 1px solid var(--beneficios-card-icon-border);
  background-color: var(--beneficios-card-icon-surface);
  color: var(--beneficios-card-icon-foreground);
  box-shadow: var(--tlv2-icon-shell-highlight, inset 0 1px 0 rgba(255,255,255,.10)), var(--tlv2-icon-shell-shadow, 0 10px 22px -20px color-mix(in oklch, black 36%, transparent));
}

#beneficios .beneficio .beneficio-icon svg{
  inline-size: 1.18rem;
  block-size: 1.18rem;
  display: block;
}

#beneficios .beneficio .beneficio-icon__img{
  inline-size: 1.32rem;
  block-size: 1.32rem;
  object-fit: contain;
  display: block;
}

#beneficios .beneficio .beneficio-copy{
  display: grid;
  align-content: start;
  gap: var(--beneficios-copy-gap);
}

#beneficios .beneficio .beneficio-badge{
  margin: .22rem 0 0;
  justify-self: start;
  --tlv2-chip-gap: .31rem;
  --tlv2-chip-min-block-size: 1.82rem;
  --tlv2-chip-pad-y: .28rem;
  --tlv2-chip-pad-x: .66rem;
  --tlv2-chip-radius: 999px;
  font-size: .765rem;
  font-weight: 620;
  line-height: 1.1;
  letter-spacing: .018em;
}

#beneficios .beneficio .beneficio-title,
#beneficios .beneficio h3{
  margin: 0;
  font-size: var(--fs-card-title, clamp(1.04rem, .62vw + .92rem, 1.2rem));
  line-height: var(--lh-card-title, 1.18);
  letter-spacing: -.015em;
}

#beneficios .beneficio .beneficio-text,
#beneficios .beneficio p:not(.beneficio-badge){
  margin: 0;
  max-width: var(--measure-card-body-standard, min(54ch, 100%));
  font-size: var(--fs-card-body, var(--fs-section-body, 1rem));
  line-height: var(--lh-card-body, 1.56);
}



/* VA1-C2 / Lote C — Beneficios media presentation */
#beneficios .beneficio-media-shell{
  --beneficios-media-radius: var(--tlv2-media-radius-soft, var(--role-media-shape-soft, 18px));
  --beneficios-media-shell-size: var(--beneficios-media-size-icon);
  --beneficios-media-surface-current: var(--tlv2-media-shell-family-surface, transparent);
  --beneficios-media-border-current: var(--tlv2-media-shell-family-border, transparent);
  --beneficios-media-shadow-current: var(--tlv2-media-shell-family-shadow, none);
  --beneficios-media-foreground-current: var(--tlv2-media-shell-family-foreground, currentColor);
  inline-size: var(--beneficios-media-shell-size);
  block-size: var(--beneficios-media-shell-size);
  position: relative;
  display: grid;
  place-items: center;
  padding: var(--beneficios-media-shell-pad-current, var(--tlv2-media-shell-kind-pad, var(--beneficios-media-shell-pad)));
  border-radius: var(--beneficios-media-radius);
  background-color: var(--beneficios-media-surface-current);
  background-image: none;
  border-color: var(--beneficios-media-border-current);
  box-shadow: var(--beneficios-media-shadow-current);
  color: var(--beneficios-media-foreground-current);
  overflow: clip;
  isolation: isolate;
}
#beneficios[data-media-shape="square"] .beneficio-media-shell{ --beneficios-media-radius: var(--tlv2-media-radius-square, 0px); }
#beneficios[data-media-shape="soft"] .beneficio-media-shell{ --beneficios-media-radius: var(--tlv2-media-radius-soft, 18px); }
#beneficios[data-media-shape="round"] .beneficio-media-shell{ --beneficios-media-radius: var(--tlv2-media-radius-round, 999px); }
#beneficios[data-media-mode="image"] .beneficio-media-shell,
#beneficios[data-item-media-mode="image"] .beneficio-media-shell,
#beneficios[data-item-media-mode="mixed"] .beneficio--media-mode-image .beneficio-media-shell,
#beneficios[data-item-media-mode="mixed"] .beneficio--media-mode-mixed .beneficio-media-shell{
  --beneficios-media-shell-size: var(--beneficios-media-size-image);
}
#beneficios .beneficio-media-shell::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: var(--beneficios-media-highlight-current, var(--tlv2-media-shell-family-highlight, none));
  opacity: .96;
}
#beneficios .beneficio-media-shell > .beneficio-icon{
  inline-size: var(--beneficios-media-icon-scale-current, var(--tlv2-media-shell-content-scale, 100%));
  block-size: var(--beneficios-media-icon-scale-current, var(--tlv2-media-shell-content-scale, 100%));
  margin: auto;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: inherit;
  border-radius: inherit;
}
#beneficios .beneficio-media-shell > .beneficio-icon__img,
#beneficios .beneficio-media-shell > .beneficio-icon img,
#beneficios .beneficio-media-shell > .beneficio-icon svg,
#beneficios .beneficio-media-shell > .beneficio-icon .tlv2-system-icon__svg{
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  display: block;
}
#beneficios .beneficio .beneficio-media-shell > .beneficio-icon{
  inline-size: var(--beneficios-media-icon-scale-current, var(--tlv2-media-shell-content-scale, 100%));
  block-size: var(--beneficios-media-icon-scale-current, var(--tlv2-media-shell-content-scale, 100%));
  border: 0;
  background: transparent;
  box-shadow: none;
  color: inherit;
  border-radius: inherit;
}
#beneficios[data-media-shell="integrated"] .beneficio .beneficio-media-shell > .beneficio-icon{
  border-radius: 0;
}
#beneficios[data-media-shell] .beneficio-media-shell{
  --beneficios-media-shell-pad-current: var(--tlv2-media-shell-kind-pad, var(--beneficios-media-shell-pad));
  --beneficios-media-icon-scale-current: var(--tlv2-media-shell-content-scale, 100%);
  --beneficios-media-highlight-current: var(--tlv2-media-shell-family-highlight, none);
}
#beneficios[data-media-shell="integrated"] .beneficio-media-shell{
  --beneficios-media-shell-pad-current: var(--role-media-shell-integrated-pad, 0rem);
  --beneficios-media-icon-scale-current: var(--role-media-shell-integrated-content-scale, 100%);
  --beneficios-media-highlight-current: var(--role-media-shell-integrated-highlight, none);
  --beneficios-media-surface-current: var(--role-media-shell-integrated-surface, transparent);
  --beneficios-media-border-current: var(--role-media-shell-integrated-border, transparent);
  --beneficios-media-shadow-current: var(--role-media-shell-integrated-shadow, none);
  --beneficios-media-foreground-current: var(--role-media-shell-integrated-foreground, var(--tlv2-media-shell-family-foreground, currentColor));
}
#beneficios[data-media-shell="outline"] .beneficio-media-shell{
  --beneficios-media-shell-pad-current: var(--role-media-shell-outline-pad, var(--beneficios-media-shell-pad));
  --beneficios-media-icon-scale-current: var(--role-media-shell-outline-content-scale, 72%);
  --beneficios-media-highlight-current: var(--role-media-shell-outline-highlight, none);
  --beneficios-media-surface-current: var(--role-media-shell-outline-surface, transparent);
  --beneficios-media-border-current: var(--role-media-shell-outline-border, var(--tlv2-media-shell-family-border, transparent));
  --beneficios-media-shadow-current: var(--role-media-shell-outline-shadow, none);
  --beneficios-media-foreground-current: var(--role-media-shell-outline-foreground, var(--tlv2-media-shell-family-foreground, currentColor));
}
#beneficios[data-media-shell="surface"] .beneficio-media-shell{
  --beneficios-media-shell-pad-current: var(--role-media-shell-surface-pad, var(--beneficios-media-shell-pad));
  --beneficios-media-icon-scale-current: var(--role-media-shell-surface-content-scale, 68%);
  --beneficios-media-highlight-current: var(--role-media-shell-surface-highlight, none);
  --beneficios-media-surface-current: var(--role-media-shell-surface-surface, var(--tlv2-media-shell-family-surface, transparent));
  --beneficios-media-border-current: var(--role-media-shell-surface-border, var(--tlv2-media-shell-family-border, transparent));
  --beneficios-media-shadow-current: var(--role-media-shell-surface-shadow, var(--tlv2-media-shell-family-shadow, none));
  --beneficios-media-foreground-current: var(--role-media-shell-surface-foreground, var(--tlv2-media-shell-family-foreground, currentColor));
}
#beneficios[data-presentation="clean"] .beneficios-grid,
#beneficios .beneficios-grid--presentation-clean{
  gap: var(--beneficios-clean-gap);
}
#beneficios[data-presentation="clean"] .list .beneficio,
#beneficios .beneficio--presentation-clean{
  grid-template-columns: auto minmax(0,1fr);
  align-items: start;
  gap: var(--beneficios-clean-gap);
  padding: var(--beneficios-clean-pad-block) 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
  overflow: visible;
}
#beneficios[data-presentation="clean"] .list .beneficio::before,
#beneficios[data-presentation="clean"] .list .beneficio::after,
#beneficios .beneficio--presentation-clean::before,
#beneficios .beneficio--presentation-clean::after{ content:none; }
#beneficios[data-presentation="clean"] .list .beneficio + .beneficio,
#beneficios .beneficio--presentation-clean + .beneficio--presentation-clean{
  border-top: 0;
}
#beneficios[data-presentation="clean"] .list .beneficio:hover,
#beneficios[data-presentation="clean"] .list .beneficio:focus-within,
#beneficios .beneficio--presentation-clean:hover,
#beneficios .beneficio--presentation-clean:focus-within{
  border-color: transparent;
  box-shadow: none;
  transform: none;
}
#beneficios[data-presentation="clean"] .beneficio .beneficio-copy,
#beneficios .beneficio--presentation-clean .beneficio-copy{
  gap: clamp(.28rem, .18vw + .18rem, .48rem);
}
#beneficios[data-presentation="clean"] .beneficio .beneficio-badge,
#beneficios .beneficio--presentation-clean .beneficio-badge{
  margin-top: .12rem;
}

#beneficios .beneficios-footer{
  display: grid;
  justify-items: center;
  gap: .8rem;
  margin-top: var(--beneficios-microcopy-gap);
}

#beneficios .beneficios-microcopy{
  margin: 0;
  color: color-mix(in oklch, var(--beneficios-muted) 88%, var(--beneficios-text) 12%);
  font-size: .92rem;
  line-height: 1.4;
  text-align: center;
}

#beneficios .beneficios-footer .tlv2-block-footer-cta-group{
  margin-top: .05rem;
  width: fit-content;
  max-width: 100%;
}

#beneficios .beneficios-footer .tlv2-block-footer-cta{
  --cta-min-h: 48px;
  --cta-pad-x: 1rem;
  min-width: min(100%, 13.75rem);
  min-height: 46px;
  padding-inline: 1rem;
  border-radius: var(--role-cta-radius, var(--radius-cta, 12px));
  position: relative;
  isolation: isolate;
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    filter .18s ease,
    border-color .18s ease,
    background-color .18s ease;
}

#beneficios .beneficios-footer .tlv2-block-footer-cta:hover{
  transform: translateY(-1px);
}

#beneficios .beneficios-footer .tlv2-block-footer-cta:active{
  transform: translateY(0);
}

#beneficios .beneficios-footer .tlv2-block-footer-cta:focus-visible{
  outline: var(--role-focus-ring-width, 2px) solid var(--tlv2-focus-ring, var(--role-focus-ring-color, var(--role-button-primary-surface, currentColor)));
  outline-offset: 2px;
}

#beneficios .beneficios-footer .tlv2-block-footer-cta .cta-label{
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.01em;
}

@media (min-width: 768px){
  #beneficios .beneficios-grid.beneficios-grid--count-2,
  #beneficios .beneficios-grid.beneficios-grid--count-4,
  #beneficios .beneficios-grid.beneficios-grid--count-5,
  #beneficios .beneficios-grid.beneficios-grid--count-6plus{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1025px){
  #beneficios .beneficios-grid.beneficios-grid--count-2{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-inline-size: min(54rem, 100%);
    margin-inline: auto;
  }

  #beneficios .beneficios-grid.beneficios-grid--count-3{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  #beneficios .beneficios-grid.beneficios-grid--count-4{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #beneficios .beneficios-grid.beneficios-grid--count-5,
  #beneficios .beneficios-grid.beneficios-grid--count-6plus{
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  #beneficios .beneficios-grid.beneficios-grid--count-5 > .beneficio,
  #beneficios .beneficios-grid.beneficios-grid--count-6plus > .beneficio{
    grid-column: span 2;
  }

  #beneficios .beneficios-grid.beneficios-grid--count-5 > .beneficio:nth-child(4){
    grid-column: 2 / span 2;
  }

  #beneficios .beneficios-grid.beneficios-grid--count-5 > .beneficio:nth-child(5){
    grid-column: 4 / span 2;
  }
}

@media (max-width: 767px){
  #beneficios{
    --beneficios-list-gap-row: .88rem;
    --beneficios-list-gap-col: .88rem;
    --beneficios-item-pad: 1rem 1rem 1.05rem;
    --beneficios-radius-card: 17px;
  }

  #beneficios .list{
    grid-template-columns: 1fr;
  }

  #beneficios .list .beneficio{
    transform: none;
  }

  #beneficios .list .beneficio:hover{
    transform: none;
  }
}

@media (min-width: 768px) and (max-width: 1024px){
  #beneficios{
    --beneficios-list-gap-row: .95rem;
    --beneficios-list-gap-col: .95rem;
  }
}


/* -------------------------------------------------------------------------- */
/* 7) INGREDIENTES (o Cómo funciona)                                          */
/* -------------------------------------------------------------------------- */

/* SPA-L1 — Ingredients/List family
   - Retira capas legacy duplicadas previas y deja una sola autoridad en landing.css
   - Ingredientes se expresa como fichas de sustancia/atributo: mas estructura, menos gesto comercial */
#ingredientes{
  --ingredientes-surface: var(--role-surface-section, var(--role-surface, #fff));
  --ingredientes-surface-card: var(--tlv2-card-surface, var(--tlv2-card-family-surface));
  --ingredientes-border: var(--tlv2-card-border, var(--tlv2-card-family-border));
  --ingredientes-border-strong: var(--tlv2-card-border-active, var(--tlv2-chrome-border-strong, var(--ingredientes-border)));
  --ingredientes-card-highlight: var(--tlv2-card-highlight, var(--tlv2-card-family-highlight, none));
  --ingredientes-shadow: var(--tlv2-card-shadow, var(--tlv2-card-family-shadow));
  --ingredientes-shadow-hover: var(--tlv2-card-shadow-hover, var(--tlv2-card-family-shadow-hover, var(--ingredientes-shadow)));
  --ingredientes-muted: var(--tlv2-card-copy-muted, var(--tlv2-card-family-muted, var(--tlv2-copy-muted, var(--role-muted-color, var(--tlv2-muted)))));
  --ingredientes-text: var(--tlv2-card-copy-body, var(--tlv2-card-family-body, var(--tlv2-copy-body, var(--role-ink, inherit))));
  --ingredientes-card-heading: var(--tlv2-card-copy-heading, var(--tlv2-card-family-heading, var(--ingredientes-text)));
  --ingredientes-card-text: var(--tlv2-card-copy-body, var(--tlv2-card-family-body, var(--ingredientes-text)));
  --ingredientes-card-muted: var(--tlv2-card-copy-muted, var(--tlv2-card-family-muted, var(--ingredientes-muted)));
  --ingredientes-card-body: var(--ingredientes-card-text);
  --ingredientes-card-icon-surface: var(--tlv2-card-icon-shell-surface, var(--tlv2-icon-shell-surface, var(--tlv2-card-chip-surface, var(--ingredientes-surface-card))));
  --ingredientes-card-icon-border: var(--tlv2-card-icon-shell-border, var(--tlv2-icon-shell-border, var(--tlv2-card-chip-border, var(--ingredientes-border))));
  --ingredientes-card-icon-foreground: var(--tlv2-card-icon-shell-foreground, var(--tlv2-icon-shell-foreground, var(--ingredientes-card-heading)));
  --ingredientes-card-pill-surface: var(--tlv2-card-chip-surface, var(--tlv2-chip-surface, var(--ingredientes-surface-card)));
  --ingredientes-card-pill-border: var(--tlv2-card-chip-border, var(--tlv2-chip-border, var(--ingredientes-border)));
  --ingredientes-radius-card: clamp(14px, 1vw + 10px, 19px);

  --ingredientes-shell-gap: clamp(.85rem, .7vw + .55rem, 1.15rem);
  --ingredientes-header-gap: clamp(.65rem, .5vw + .45rem, .95rem);
  --ingredientes-body-gap: clamp(1rem, .8vw + .7rem, 1.35rem);
  --ingredientes-body-paragraph-gap: .6rem;
  --ingredientes-list-gap-row: clamp(.8rem, .58vw + .52rem, 1rem);
  --ingredientes-list-gap-col: clamp(.9rem, .8vw + .5rem, 1.12rem);
  --ingredientes-gap-card: clamp(.5rem, .36vw + .38rem, .74rem);
  --ingredientes-item-pad: clamp(.9rem, .76vw + .62rem, 1.14rem);
  --ingredientes-copy-line: var(--lh-card-body, 1.48);
  --ingredientes-microcopy-gap: clamp(.95rem, .75vw + .65rem, 1.25rem);
  --ingredientes-head-gap: .78rem;
  --ingredientes-media-size-icon: clamp(3rem, .7vw + 2.7rem, 3.5rem);
  --ingredientes-media-size-image: clamp(4.25rem, 1.2vw + 3.8rem, 5.25rem);
  --ingredientes-media-shell-pad: clamp(.34rem, .2vw + .28rem, .44rem);
  --ingredientes-clean-gap: clamp(.95rem, .8vw + .58rem, 1.22rem);
  --ingredientes-clean-pad-block: clamp(.82rem, .36vw + .68rem, 1rem);
}

#ingredientes .tlv2-container{
  position: relative;
}

#ingredientes .ingredientes-eyebrow{
  margin: 0 0 .68rem;
  --tlv2-pill-gap: .45rem;
  --tlv2-pill-pad-y: .35rem;
  --tlv2-pill-pad-x: .7rem;
  font-size: .77rem;
  line-height: 1.02;
  letter-spacing: .085em;
  text-transform: uppercase;
  font-weight: 650;
  opacity: .94;
}

#ingredientes .section-title{
  max-width: var(--measure-section-title, min(24ch, 100%));
  margin-bottom: var(--ingredientes-header-gap);
}

#ingredientes .section-subtitle{
  max-width: var(--measure-section-subtitle, min(62ch, 100%));
  margin-bottom: var(--ingredientes-shell-gap);
}

#ingredientes .ingredientes-body,
#ingredientes .ingredientes-microcopy{
  max-width: var(--measure-section-body, min(66ch, 100%));
}

#ingredientes .ingredientes-expand{
  margin: var(--ingredientes-microcopy-gap) 0 0;
}

#ingredientes .ingredientes-expand[open]{
  margin-top: calc(var(--ingredientes-microcopy-gap) - .1rem);
}

#ingredientes .ingredientes-expand__toggle{
  list-style: none;
  min-inline-size: min(100%, 16rem);
  --tlv2-chip-gap: .42rem;
  --tlv2-chip-min-block-size: 2.28rem;
  --tlv2-chip-pad-y: .72rem;
  --tlv2-chip-pad-x: .96rem;
  --tlv2-chip-radius: 999px;
  cursor: pointer;
  user-select: none;
  font-size: .91rem;
  font-weight: 620;
  line-height: 1.14;
  letter-spacing: .012em;
}

#ingredientes .ingredientes-expand__toggle::-webkit-details-marker{ display: none; }
#ingredientes .ingredientes-expand__toggle::marker{ content: ''; }
#ingredientes .ingredientes-expand__toggle::after{
  content: '+';
  inline-size: 1.2rem;
  block-size: 1.2rem;
  display: inline-grid;
  place-items: center;
  transition: transform .18s ease;
}
#ingredientes .ingredientes-expand[open] .ingredientes-expand__toggle::after{
  content: '–';
}
#ingredientes .ingredientes-expand__label--less{ display: none; }
#ingredientes .ingredientes-expand[open] .ingredientes-expand__label--more{ display: none; }
#ingredientes .ingredientes-expand[open] .ingredientes-expand__label--less{ display: inline; }
#ingredientes .ingredientes-expand__toggle:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px var(--tlv2-focus-ring, var(--role-context-focus-ring, color-mix(in oklch, var(--role-accent, oklch(0.72 0.09 240)) 20%, transparent)));
}
#ingredientes .ingredientes-grid--overflow{
  margin-top: var(--ingredientes-list-gap-row);
}


#ingredientes .ingredientes-body{
  margin: 0 0 var(--ingredientes-body-gap);
  color: color-mix(in oklch, var(--ingredientes-text) 82%, var(--ingredientes-muted));
}

#ingredientes .ingredientes-body > :first-child{ margin-top: 0; }
#ingredientes .ingredientes-body > :last-child{ margin-bottom: 0; }
#ingredientes .ingredientes-body p{
  margin: 0;
  line-height: var(--lh-section-body, var(--line-normal, 1.45));
}
#ingredientes .ingredientes-body p + p{
  margin-top: var(--ingredientes-body-paragraph-gap);
}

#ingredientes .ingredientes-grid{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--ingredientes-list-gap-row) var(--ingredientes-list-gap-col);
}

#ingredientes .ingrediente{
  position: relative;
  display: grid;
  align-content: start;
  row-gap: var(--ingredientes-gap-card);
  column-gap: var(--ingredientes-gap-card);
  gap: var(--ingredientes-gap-card);
  min-width: 0;
  padding: clamp(1rem, .46vw + .92rem, 1.28rem);
  border-radius: var(--tlv2-card-radius, var(--ingredientes-radius-card));
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-image .18s ease;
  isolation: isolate;
  overflow: clip;
}

#ingredientes .ingrediente::before{
  content: none;
}

#ingredientes .ingrediente::after{
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  block-size: 1px;
  background: color-mix(in oklch, var(--tlv2-card-border, var(--ingredientes-border)) 78%, transparent);
  pointer-events: none;
}

#ingredientes .ingrediente:hover{
  transform: translateY(-2px);
}

#ingredientes .ingrediente:focus-within{
  border-color: var(--tlv2-card-border-active, var(--ingredientes-border-strong));
  box-shadow: 0 0 0 3px var(--tlv2-focus-ring, var(--role-context-focus-ring, color-mix(in oklch, var(--role-accent, oklch(0.72 0.09 240)) 20%, transparent))), var(--tlv2-card-focus-shadow, var(--tlv2-card-highlight, none), var(--tlv2-card-shadow-hover));
}

#ingredientes .ingrediente-head{
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  column-gap: var(--ingredientes-head-gap);
  row-gap: .3rem;
  min-width: 0;
}

#ingredientes .ingrediente-media{
  display: grid;
  align-content: start;
}

#ingredientes .ingrediente-head-copy{
  display: grid;
  gap: .3rem;
  min-width: 0;
}

#ingredientes .ingrediente-icon{
  inline-size: clamp(2.35rem, .55vw + 2.1rem, 2.7rem);
  block-size: clamp(2.35rem, .55vw + 2.1rem, 2.7rem);
  display: inline-grid;
  place-items: center;
  border-radius: .9rem;
  border: 1px solid var(--ingredientes-card-icon-border);
  background-color: var(--ingredientes-card-icon-surface);
  color: var(--ingredientes-card-icon-foreground);
  box-shadow: var(--tlv2-icon-shell-highlight, inset 0 1px 0 rgba(255,255,255,.10)), var(--tlv2-icon-shell-shadow, 0 10px 22px -20px color-mix(in oklch, black 36%, transparent));
}

#ingredientes .ingrediente-icon svg{
  inline-size: 1.08rem;
  block-size: 1.08rem;
  display: block;
}

#ingredientes .ingrediente-icon__img{
  inline-size: 1.26rem;
  block-size: 1.26rem;
  object-fit: contain;
  display: block;
}

#ingredientes .ingrediente-title,
#ingredientes :is(.ingrediente h3, .ingrediente .title, .ingrediente .item-title){
  margin: 0;
  font-size: var(--fs-card-title, clamp(1.02rem, .5vw + .92rem, 1.15rem));
  line-height: var(--lh-card-title, 1.2);
  letter-spacing: -.012em;
  text-wrap: balance;
}

#ingredientes .ingrediente-meta{
  margin: 0;
  font-size: .82rem;
  line-height: 1.28;
  letter-spacing: .04em;
  text-transform: uppercase;
}

#ingredientes .ingrediente-text,
#ingredientes .ingrediente :is(.desc, .text, .copy, .details, .content, p){
  margin: 0;
  max-width: var(--measure-card-body-relaxed, min(62ch, 100%));
  font-size: var(--fs-card-body, var(--fs-section-body, 1rem));
  line-height: var(--lh-card-body, 1.55);
}


/* VA1-C2 / Lote C — Ingredientes media presentation */
#ingredientes .ingrediente-media-shell{
  --ingredientes-media-radius: var(--tlv2-media-radius-soft, var(--role-media-shape-soft, 18px));
  --ingredientes-media-shell-size: var(--ingredientes-media-size-image);
  --ingredientes-media-surface-current: var(--tlv2-media-shell-family-surface, transparent);
  --ingredientes-media-border-current: var(--tlv2-media-shell-family-border, transparent);
  --ingredientes-media-shadow-current: var(--tlv2-media-shell-family-shadow, none);
  --ingredientes-media-foreground-current: var(--tlv2-media-shell-family-foreground, currentColor);
  inline-size: var(--ingredientes-media-shell-size);
  block-size: var(--ingredientes-media-shell-size);
  position: relative;
  display: grid;
  place-items: center;
  padding: var(--ingredientes-media-shell-pad-current, var(--tlv2-media-shell-kind-pad, var(--ingredientes-media-shell-pad)));
  border-radius: var(--ingredientes-media-radius);
  background-color: var(--ingredientes-media-surface-current);
  background-image: none;
  border-color: var(--ingredientes-media-border-current);
  box-shadow: var(--ingredientes-media-shadow-current);
  color: var(--ingredientes-media-foreground-current);
  overflow: clip;
  isolation: isolate;
}
#ingredientes[data-media-shape="square"] .ingrediente-media-shell{ --ingredientes-media-radius: var(--tlv2-media-radius-square, 0px); }
#ingredientes[data-media-shape="soft"] .ingrediente-media-shell{ --ingredientes-media-radius: var(--tlv2-media-radius-soft, 18px); }
#ingredientes[data-media-shape="round"] .ingrediente-media-shell{ --ingredientes-media-radius: var(--tlv2-media-radius-round, 999px); }
#ingredientes[data-item-media-mode="icon"] .ingrediente-media-shell,
#ingredientes .ingrediente--media-mode-icon .ingrediente-media-shell{
  --ingredientes-media-shell-size: var(--ingredientes-media-size-icon);
}
#ingredientes .ingrediente-media-shell::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: var(--ingredientes-media-highlight-current, var(--tlv2-media-shell-family-highlight, none));
}
#ingredientes .ingrediente-media-shell > .ingrediente-icon{
  inline-size: var(--ingredientes-media-icon-scale-current, var(--tlv2-media-shell-content-scale, 100%));
  block-size: var(--ingredientes-media-icon-scale-current, var(--tlv2-media-shell-content-scale, 100%));
  margin: auto;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: inherit;
  border-radius: inherit;
}
#ingredientes .ingrediente-media-shell > .ingrediente-icon__img,
#ingredientes .ingrediente-media-shell > .ingrediente-icon img,
#ingredientes .ingrediente-media-shell > .ingrediente-icon svg,
#ingredientes .ingrediente-media-shell > .ingrediente-icon .tlv2-system-icon__svg{
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  display: block;
}
#ingredientes .ingrediente .ingrediente-media-shell > .ingrediente-icon,
#ingredientes .list > li .ingrediente-media-shell > .ingrediente-icon{
  inline-size: var(--ingredientes-media-icon-scale-current, var(--tlv2-media-shell-content-scale, 100%));
  block-size: var(--ingredientes-media-icon-scale-current, var(--tlv2-media-shell-content-scale, 100%));
  border: 0;
  background: transparent;
  box-shadow: none;
  color: inherit;
  border-radius: inherit;
}
#ingredientes[data-media-shell="integrated"] .ingrediente .ingrediente-media-shell > .ingrediente-icon,
#ingredientes[data-media-shell="integrated"] .list > li .ingrediente-media-shell > .ingrediente-icon{
  border-radius: 0;
}
#ingredientes[data-media-shell] .ingrediente-media-shell,
#ingredientes[data-media-shell] .list > li .ingrediente-media-shell{
  --ingredientes-media-shell-pad-current: var(--tlv2-media-shell-kind-pad, var(--ingredientes-media-shell-pad));
  --ingredientes-media-icon-scale-current: var(--tlv2-media-shell-content-scale, 100%);
  --ingredientes-media-highlight-current: var(--tlv2-media-shell-family-highlight, none);
}
#ingredientes[data-media-shell="integrated"] .ingrediente-media-shell,
#ingredientes[data-media-shell="integrated"] .list > li .ingrediente-media-shell{
  --ingredientes-media-shell-pad-current: var(--role-media-shell-integrated-pad, 0rem);
  --ingredientes-media-icon-scale-current: var(--role-media-shell-integrated-content-scale, 100%);
  --ingredientes-media-highlight-current: var(--role-media-shell-integrated-highlight, none);
  --ingredientes-media-surface-current: var(--role-media-shell-integrated-surface, transparent);
  --ingredientes-media-border-current: var(--role-media-shell-integrated-border, transparent);
  --ingredientes-media-shadow-current: var(--role-media-shell-integrated-shadow, none);
  --ingredientes-media-foreground-current: var(--role-media-shell-integrated-foreground, var(--tlv2-media-shell-family-foreground, currentColor));
}
#ingredientes[data-media-shell="outline"] .ingrediente-media-shell,
#ingredientes[data-media-shell="outline"] .list > li .ingrediente-media-shell{
  --ingredientes-media-shell-pad-current: var(--role-media-shell-outline-pad, var(--ingredientes-media-shell-pad));
  --ingredientes-media-icon-scale-current: var(--role-media-shell-outline-content-scale, 72%);
  --ingredientes-media-highlight-current: var(--role-media-shell-outline-highlight, none);
  --ingredientes-media-surface-current: var(--role-media-shell-outline-surface, transparent);
  --ingredientes-media-border-current: var(--role-media-shell-outline-border, var(--tlv2-media-shell-family-border, transparent));
  --ingredientes-media-shadow-current: var(--role-media-shell-outline-shadow, none);
  --ingredientes-media-foreground-current: var(--role-media-shell-outline-foreground, var(--tlv2-media-shell-family-foreground, currentColor));
}
#ingredientes[data-media-shell="surface"] .ingrediente-media-shell,
#ingredientes[data-media-shell="surface"] .list > li .ingrediente-media-shell{
  --ingredientes-media-shell-pad-current: var(--role-media-shell-surface-pad, var(--ingredientes-media-shell-pad));
  --ingredientes-media-icon-scale-current: var(--role-media-shell-surface-content-scale, 68%);
  --ingredientes-media-highlight-current: var(--role-media-shell-surface-highlight, none);
  --ingredientes-media-surface-current: var(--role-media-shell-surface-surface, var(--tlv2-media-shell-family-surface, transparent));
  --ingredientes-media-border-current: var(--role-media-shell-surface-border, var(--tlv2-media-shell-family-border, transparent));
  --ingredientes-media-shadow-current: var(--role-media-shell-surface-shadow, var(--tlv2-media-shell-family-shadow, none));
  --ingredientes-media-foreground-current: var(--role-media-shell-surface-foreground, var(--tlv2-media-shell-family-foreground, currentColor));
}
#ingredientes[data-item-media-mode="image"] .ingrediente-head,
#ingredientes .ingrediente--media-mode-image .ingrediente-head,
#ingredientes[data-item-media-mode="mixed"] .ingrediente--media-mode-mixed .ingrediente-head{
  grid-template-columns: minmax(0, 1fr);
  row-gap: clamp(.72rem, .42vw + .56rem, .92rem);
}
#ingredientes[data-item-media-mode="image"] .ingrediente-media,
#ingredientes .ingrediente--media-mode-image .ingrediente-media,
#ingredientes[data-item-media-mode="mixed"] .ingrediente--media-mode-mixed .ingrediente-media{
  justify-self: start;
}
#ingredientes[data-presentation="clean"] .ingredientes-grid,
#ingredientes .ingredientes-grid--presentation-clean,
#ingredientes[data-presentation="clean"] .list{
  grid-template-columns: minmax(0,1fr);
  gap: var(--ingredientes-clean-gap);
}
#ingredientes[data-presentation="clean"] .ingrediente,
#ingredientes .ingrediente--presentation-clean,
#ingredientes[data-presentation="clean"] .list > li{
  gap: var(--ingredientes-clean-gap);
  padding: var(--ingredientes-clean-pad-block) 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
  overflow: visible;
}
#ingredientes[data-presentation="clean"] .ingrediente::before,
#ingredientes[data-presentation="clean"] .ingrediente::after,
#ingredientes .ingrediente--presentation-clean::before,
#ingredientes .ingrediente--presentation-clean::after,
#ingredientes[data-presentation="clean"] .list > li::before,
#ingredientes[data-presentation="clean"] .list > li::after{ content:none; }
#ingredientes[data-presentation="clean"] .ingrediente + .ingrediente,
#ingredientes .ingrediente--presentation-clean + .ingrediente--presentation-clean,
#ingredientes[data-presentation="clean"] .list > li + li{
  border-top: 0;
}
#ingredientes[data-presentation="clean"] .ingrediente:hover,
#ingredientes[data-presentation="clean"] .ingrediente:focus-within,
#ingredientes .ingrediente--presentation-clean:hover,
#ingredientes .ingrediente--presentation-clean:focus-within,
#ingredientes[data-presentation="clean"] .list > li:hover,
#ingredientes[data-presentation="clean"] .list > li:focus-within{
  border-color: transparent;
  box-shadow: none;
  transform: none;
}
#ingredientes[data-presentation="clean"] .ingrediente-head,
#ingredientes .ingrediente--presentation-clean .ingrediente-head,
#ingredientes[data-presentation="clean"] .list > li .ingrediente-head{
  grid-template-columns: auto minmax(0,1fr);
}
#ingredientes[data-presentation="clean"][data-item-media-mode="image"] .ingrediente-head,
#ingredientes[data-presentation="clean"] .ingrediente--media-mode-image .ingrediente-head,
#ingredientes[data-presentation="clean"][data-item-media-mode="mixed"] .ingrediente--media-mode-mixed .ingrediente-head,
#ingredientes[data-presentation="clean"][data-item-media-mode="image"] .list > li .ingrediente-head,
#ingredientes[data-presentation="clean"][data-item-media-mode="mixed"] .list > li .ingrediente-head{
  grid-template-columns: auto minmax(0,1fr);
}

@media (min-width: 860px){
  #ingredientes .ingredientes-grid.ingredientes-grid--count-2plus{
    grid-template-columns: repeat(var(--layout-grid-cols-editorial-desktop, 2), minmax(0, 1fr));
  }
}

#ingredientes .ingredientes-microcopy{
  max-width: min(74ch, 100%);
}

#ingredientes .section-title{
  margin-bottom: var(--ingredientes-header-gap);
}

#ingredientes .section-subtitle{
  margin-bottom: var(--ingredientes-shell-gap);
  color: var(--ingredientes-card-muted);
}

#ingredientes .ingredientes-body{
  margin: 0 0 var(--ingredientes-body-gap);
  color: color-mix(in oklch, var(--ingredientes-text) 82%, var(--ingredientes-muted));
}

#ingredientes .ingredientes-body > :first-child{ margin-top: 0; }
#ingredientes .ingredientes-body > :last-child{ margin-bottom: 0; }
#ingredientes .ingredientes-body p{
  margin: 0;
  line-height: var(--lh-section-body, var(--line-normal, 1.45));
}
#ingredientes .ingredientes-body p + p{
  margin-top: var(--ingredientes-body-paragraph-gap);
}

#ingredientes .list{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ingredientes-list-gap-row) var(--ingredientes-list-gap-col);
}

#ingredientes .list > li{
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--ingredientes-gap-card);
  min-width: 0;
  padding: var(--ingredientes-item-pad);
  border-radius: var(--tlv2-card-radius, var(--ingredientes-radius-card));
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-image .18s ease;
  isolation: isolate;
  overflow: clip;
}

#ingredientes .list > li::before{
  content: none;
}

#ingredientes .list > li::after{
  content: none;
}

#ingredientes .list > li:hover{
  transform: translateY(-2px);
}

#ingredientes .list > li:focus-within{
  border-color: var(--tlv2-card-border-active, var(--ingredientes-border-strong));
  box-shadow: 0 0 0 3px var(--tlv2-focus-ring, var(--role-context-focus-ring, color-mix(in oklch, var(--role-accent, oklch(0.72 0.09 240)) 20%, transparent))), var(--tlv2-card-focus-shadow, var(--tlv2-card-highlight, none), var(--tlv2-card-shadow-hover));
}

#ingredientes .list > li .ingrediente-head{
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: var(--ingredientes-head-gap);
  row-gap: .35rem;
  min-width: 0;
}

#ingredientes .list > li .ingrediente-icon{
  inline-size: 2.1rem;
  block-size: 2.1rem;
  display: inline-grid;
  place-items: center;
  border-radius: .78rem;
  border: 1px solid var(--tlv2-chip-border, var(--cc-p2-ingredientes-chip-border, var(--role-context-chip-neutral-border)));
  background-color: var(--ingredientes-card-icon-surface);
  color: var(--ingredientes-card-icon-foreground);
  border-color: var(--ingredientes-card-icon-border);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 10px 22px -20px color-mix(in oklch, black 36%, transparent);
}

#ingredientes .list > li .ingrediente-icon svg{
  inline-size: 1.02rem;
  block-size: 1.02rem;
  display: block;
}

#ingredientes .list > li .ingrediente-icon__img{
  inline-size: 1.14rem;
  block-size: 1.14rem;
  object-fit: contain;
  display: block;
}

#ingredientes .list > li .ingrediente-title,
#ingredientes .list > li :is(h3, .title, .item-title){
  margin: 0;
  font-size: var(--fs-card-title, clamp(1rem, 0.56vw + 0.9rem, 1.16rem));
  line-height: var(--lh-card-title, 1.2);
  letter-spacing: -.01em;
}

#ingredientes .list > li .ingrediente-text,
#ingredientes .list > li :is(.desc, .text, .copy, .details, .content, p){
  margin: 0;
  max-width: var(--measure-card-body-relaxed, min(62ch, 100%));
  line-height: var(--lh-card-body, 1.55);
}

#ingredientes .ingredientes-microcopy{
  margin: var(--ingredientes-microcopy-gap) 0 0;
  color: var(--ingredientes-card-muted);
  font-size: .9rem;
  line-height: 1.38;
}

@media (max-width: 767px){
  #ingredientes .list{
    grid-template-columns: 1fr;
  }

  #ingredientes .list > li{
    transform: none;
  }

  #ingredientes .list > li:hover{
    transform: none;
  }
}

/* -------------------------------------------------------------------------- */
/* 8) PACKS — grilla responsiva y cards                                       */
/* Canonical after SPA-CARDS1: spacing/layout authority lives in #packs root  */
/* and the premium section below. Presets only declare grid-col vars.         */
/* S0.3 clasificación: block-local-recipe / deferred-local                    */
/* Nota: bloque comercial sensible; la recipe visual premium no entra aún al  */
/* primer ascenso cromático sistémico.                                        */
/* -------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------- */
/* 9) GARANTÍA — bloque de confianza (F2-P1.b1, markup-safe)                 */
/* S0.3 clasificación: block-local-recipe / non-promotable                    */
/* Nota: copy-simple sensible; sus ajustes locales no deben convertirse       */
/* en card/panel authority general.                                           */
/* -------------------------------------------------------------------------- */

#garantia{
  /* VC1-B2 — garantía queda base-locked; consume eyebrow/copy shared sin subir a card family promoted. */
  --garantia-copy-heading: var(--tlv2-copy-heading, var(--role-heading-color, var(--role-text-color, inherit)));
  --garantia-copy-body: var(--tlv2-copy-body, var(--role-body-color, var(--role-text-color, inherit)));
  --garantia-copy-muted: var(--tlv2-copy-muted, var(--role-muted-color, oklch(0.45 0 0)));
  --garantia-muted: var(--garantia-copy-muted);
  --garantia-stack-gap: .65rem;
  --garantia-body-gap: .65rem;
}

#garantia .tlv2-container{
  max-width: var(--layout-shell-trust-closure-compact-max, 52rem);
  margin-inline: auto;
  display: grid;
  gap: var(--garantia-stack-gap);
}

#garantia :is(.garantia-eyebrow, .section-eyebrow){
  margin: 0;
  margin-block-end: .68rem;
  justify-self: start;
  --tlv2-pill-gap: .45rem;
  --tlv2-pill-pad-y: .36rem;
  --tlv2-pill-pad-x: .72rem;
  font-size: .77rem;
  line-height: 1.02;
  letter-spacing: .08em;
  font-weight: 650;
  opacity: .95;
}

#garantia .section-title,
#garantia h2{
  margin: 0;
  max-inline-size: var(--measure-title-relaxed, min(26ch, 100%));
  font-size: clamp(1.38rem, 1.2rem + .9vw, 2rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
  text-wrap: balance;
  color: var(--garantia-copy-heading, var(--role-heading-color, var(--role-text-color, inherit)));
}

#garantia .garantia-subtitle,
#garantia .section-subtitle{
  margin: 0;
  max-inline-size: var(--measure-section-subtitle, min(62ch, 100%));
  color: var(--garantia-copy-muted);
  text-wrap: pretty;
}

#garantia .garantia-body,
#garantia [data-role="body"]{
  display: grid;
  gap: .65rem;
  margin-top: .05rem;
  color: var(--garantia-copy-muted);
  max-inline-size: var(--measure-section-body, min(66ch, 100%));
}

#garantia .garantia-body > :first-child,
#garantia [data-role="body"] > :first-child{
  margin-top: 0;
}

#garantia .garantia-body > :last-child,
#garantia [data-role="body"] > :last-child{
  margin-bottom: 0;
}

#garantia .garantia-body p,
#garantia [data-role="body"] p{
  margin: 0;
  line-height: 1.58;
}

#garantia .garantia-body :is(ul, ol),
#garantia [data-role="body"] :is(ul, ol){
  margin: .1rem 0 0;
  padding-left: 1.05rem;
  display: grid;
  gap: .42rem;
}

#garantia .garantia-body li,
#garantia [data-role="body"] li{
  line-height: 1.46;
}

#garantia .garantia-body strong,
#garantia [data-role="body"] strong{
  color: var(--garantia-copy-heading, var(--role-ink, currentColor));
}

#garantia .garantia-body a,
#garantia [data-role="body"] a{
  color: var(--role-primary, var(--color-primary, #0a84ff));
  text-underline-offset: .14em;
}

@media (max-width: 767px){
  #garantia .section-title,
  #garantia h2{
    font-size: clamp(1.22rem, 1.08rem + .9vw, 1.55rem);
  }
}

/* -------------------------------------------------------------------------- */
/* 10) TESTIMONIOS — Premium MVP v2 (markup-safe)                             */
/* S0.3 clasificación: block-local-recipe / future-candidate                  */
/* Nota: consumer oficial P6E sí; card recipe premium del bloque todavía no   */
/* asciende a contract superior por repetición o calidad percibida.           */
/* -------------------------------------------------------------------------- */

#testimonios{
  --testimonios-copy-heading: var(--tlv2-root-copy-heading, var(--tlv2-copy-heading, var(--role-heading-color, inherit)));
  --testimonios-copy-body: var(--tlv2-root-copy-body, var(--tlv2-copy-body, var(--role-body-color, inherit)));
  --testimonios-copy-muted: var(--tlv2-root-copy-muted, var(--tlv2-copy-muted, var(--role-muted-color, var(--tlv2-muted))));
  --testimonios-card-copy-heading: var(--tlv2-card-copy-heading, var(--tlv2-card-family-heading));
  --testimonios-card-copy-body: var(--tlv2-card-copy-body, var(--tlv2-card-family-body, var(--testimonios-copy-heading)));
  --testimonios-card-copy-muted: var(--tlv2-card-copy-muted, var(--tlv2-card-family-muted, var(--testimonios-card-copy-body)));
  --testi-surface-card: var(--tlv2-card-surface, var(--tlv2-card-family-surface));
  --testi-surface-card-2: var(--tlv2-card-surface-2, var(--tlv2-card-family-surface-2, var(--testi-surface-card)));
  --testi-border: var(--tlv2-card-border, var(--tlv2-card-family-border));
  --testi-border-strong: var(--tlv2-card-border-active, var(--tlv2-chrome-border-strong, var(--testi-border)));
  --testi-shadow: var(--tlv2-card-shadow, var(--tlv2-card-family-shadow));
  --testi-shadow-hover: var(--tlv2-card-shadow-hover, var(--tlv2-card-family-shadow-hover, var(--testi-shadow)));
  --testi-highlight: var(--tlv2-card-highlight, var(--tlv2-card-family-highlight, none));
  --testi-title-max-w: var(--measure-section-title, min(24ch, 100%));
  --testi-subtitle-max-w: var(--measure-section-subtitle, min(62ch, 100%));
  --testi-body-max-w: var(--measure-section-body, min(66ch, 100%));
  --testi-body-gap: .7rem;
  --testi-body-margin-top: var(--space-3);
  --testi-grid-gap: clamp(1rem, 1.05vw + .4rem, 1.3rem);
  --testi-grid-margin-top: clamp(1.05rem, 1.08rem + .78vw, 1.8rem);
  --testi-card-pad: clamp(1.1rem, 1.08rem + .72vw, 1.58rem);
  --testi-card-gap: .92rem;
  --testi-quote-pad-inline-start: 1.1rem;
  --testi-quote-paragraph-gap: .62rem;
  --testi-meta-gap: .28rem;
  --testi-meta-pad-top: .9rem;
  --testi-meta-rail-width: 2.9rem;
  --testi-avatar-size: 3.25rem;
}

#testimonios .section-title{
  max-width: var(--testi-title-max-w);
  margin-inline: auto;
  color: var(--testimonios-copy-heading);
}

#testimonios .section-subtitle{
  max-width: var(--testi-subtitle-max-w);
  margin-inline: auto;
}

#testimonios .testimonios-body{
  max-width: var(--testi-body-max-w);
  margin-inline: auto;
}

#testimonios .testimonios-body{
  margin-top: var(--space-3);
  color: var(--testimonios-copy-body);
}

#testimonios .testimonios-body > *{
  margin: 0;
}

#testimonios .testimonios-body > * + *{
  margin-top: var(--testi-body-gap);
}

#testimonios :is(.testimonials-grid, .testimonios-grid){
  --testi-gap: var(--layout-grid-gap-standard, var(--testi-grid-gap));
  --testi-card-radius: clamp(14px, 1.15vw + 10px, 18px);
  display: grid;
  grid-template-columns: repeat(var(--tlv2-testimonios-grid-cols-desktop, var(--layout-grid-cols-testimonials-desktop, 3)), minmax(0, 1fr));
  gap: var(--testi-gap);
  align-items: stretch;
  grid-auto-rows: 1fr;
  margin-top: var(--testi-grid-margin-top);
}

/* Micro-higiene: evita overflow horizontal accidental por contenido largo */
#testimonios :is(.testimonials-grid, .testimonios-grid) > *{
  min-width: 0;
}

@media (max-width: 1024px){
  #testimonios :is(.testimonials-grid, .testimonios-grid){
    grid-template-columns: repeat(var(--tlv2-testimonios-grid-cols-tablet, var(--layout-grid-cols-tablet, 2)), minmax(0, 1fr));
    --testi-gap: var(--layout-grid-gap-standard, clamp(.85rem, 1vw + .25rem, 1rem));
  }
}

@media (max-width: 767px){
  #testimonios{
    --testi-grid-gap: var(--layout-grid-gap-compact, var(--space-3));
    --testi-body-margin-top: var(--space-3);
  }

  #testimonios :is(.testimonials-grid, .testimonios-grid){
    grid-template-columns: repeat(var(--tlv2-testimonios-grid-cols-mobile, var(--layout-grid-cols-mobile, 1)), minmax(0, 1fr));
    --testi-gap: var(--testi-grid-gap);
  }
}

#testimonios .testimonial{
  position: relative;
  isolation: isolate;
  z-index: 0;
  min-height: 100%;
  min-width: 0;
  border-radius: var(--tlv2-card-radius, var(--testi-card-radius));
  border: 1px solid var(--testi-border);
  padding: var(--testi-card-pad);
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  align-content: start;
  gap: var(--testi-card-gap);
  background-color: var(--testi-surface-card);
  background-image: var(--tlv2-card-family-bg-image, linear-gradient(180deg, var(--testi-surface-card) 0%, var(--testi-surface-card-2) 100%));
  box-shadow: var(--testi-highlight), var(--testi-shadow);
  overflow: visible; /* fallback */
  overflow: clip;
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    border-color 180ms ease,
    background-image 180ms ease;
}

#testimonios .testimonial > *{
  min-width: 0;
}

#testimonios .testimonial::before{
  content: none;
}

#testimonios .testimonial::after{
  content: none;
}

#testimonios .testimonial blockquote{
  position: relative;
  margin: 0;
  padding: .18rem .12rem 0 var(--testi-quote-pad-inline-start);
  font-size: var(--fs-card-body, clamp(.95rem, .9rem + .2vw, 1.02rem));
  line-height: var(--lh-card-body, 1.62);
  font-style: normal;
  font-weight: 500;
  text-wrap: pretty;
  overflow-wrap: anywhere;
}

#testimonios .testimonial blockquote p{
  margin: 0;
}

#testimonios .testimonial blockquote p + p{
  margin-top: var(--testi-quote-paragraph-gap);
}

#testimonios .testimonial blockquote::before{
  content: "\201C";
  position: absolute;
  top: -.18rem;
  left: .02rem;
  font-size: clamp(1.6rem, 1.12rem + 1.08vw, 2rem);
  line-height: 1;
  font-weight: 700;
  color: var(--tlv2-testimonial-quote-ornament, var(--tlv2-card-copy-emphasis, var(--tlv2-testimonial-copy-heading, currentColor)));
  opacity: .86;
  pointer-events: none;
}

#testimonios .testimonial blockquote::after{
  content: "";
}

#testimonios .testimonial-meta{
  margin-top: auto;
  padding-top: var(--testi-meta-pad-top);
  display: grid;
  gap: var(--testi-meta-gap);
  border-top: 1px solid rgba(0, 0, 0, .08); /* fallback */
  border-top: 1px solid var(--tlv2-chrome-divider, var(--role-context-divider, color-mix(in oklch, var(--role-border, currentColor) 34%, transparent)));
  position: relative;
  align-content: start;
}

#testimonios .testimonial-meta::before{
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: var(--testi-meta-rail-width);
  height: 1px;
  background: var(--tlv2-testimonial-meta-rail, color-mix(in oklch, var(--testi-card-border, var(--tlv2-card-border, var(--role-border-color, rgba(0,0,0,.14)))) 72%, transparent));
  opacity: .72;
}

#testimonios .testimonial-author,
#testimonios .testimonial .author{
  margin: 0;
  font-size: var(--fs-card-title, .95rem);
  line-height: var(--lh-card-title, 1.24);
  font-weight: 700;
  letter-spacing: .008em;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

#testimonios .testimonial-role{
  margin: 0;
  font-size: var(--fs-card-microcopy, .82rem);
  line-height: var(--lh-card-microcopy, 1.42);
  opacity: .95;
  max-inline-size: 34ch;
  overflow-wrap: anywhere;
}


#testimonios .testimonial-meta--has-avatar{
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  column-gap: 1rem;
}

#testimonios .testimonial-meta-copy{
  display: grid;
  gap: .22rem;
  min-width: 0;
}

#testimonios .testimonial-avatar{
  inline-size: var(--testi-avatar-size);
  block-size: var(--testi-avatar-size);
  aspect-ratio: 1 / 1;
  align-self: start;
  border-radius: 999px;
  overflow: hidden;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid color-mix(in oklch, var(--testi-card-border, var(--tlv2-card-border, rgba(0,0,0,.14))) 72%, transparent);
  background: color-mix(in oklch, var(--testi-card-surface-2, var(--tlv2-card-surface-2, #fff)) 88%, white);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 1px 0 rgba(255,255,255,.18);
}

#testimonios .testimonial-avatar__img{
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

#testimonios .testimonial:has(.testimonial-meta:not(:empty)) blockquote{
  margin-bottom: .14rem;
}

#testimonios .testimonial:is(:hover, :focus-within)::before{
  opacity: .95;
}

/* Hover/focus seguros: solo refinan elevación, no cambian layout */
@media (hover: hover) and (pointer: fine){
  #testimonios .testimonial:hover{
    transform: translateY(-2px);
  }
}

#testimonios .testimonial:focus-within{
  border-color: var(--testi-border-strong);
  box-shadow:
    0 0 0 3px var(--tlv2-focus-ring, var(--role-context-focus-ring, color-mix(in oklch, var(--role-primary, oklch(0.62 0.15 255)) 16%, transparent))),
    var(--tlv2-card-focus-shadow, var(--tlv2-card-highlight, none), var(--tlv2-card-shadow-hover));
}

/* Fallback suave si :has no está disponible: el layout sigue estable por grid + meta al final */

@media (prefers-reduced-motion: reduce){
  #testimonios .testimonial{
    transition: none;
  }

  #testimonios .testimonial:hover{
    transform: none;
  }
}

@media (max-width: 640px){
  #testimonios .testimonial{
    padding: calc(var(--testi-card-pad) - .04rem);
    gap: .74rem;
  }

  #testimonios .testimonial::before{
    left: .75rem;
    top: .46rem;
    width: clamp(3.4rem, 34%, 7.2rem);
  }

  #testimonios .testimonial blockquote{
    font-size: .95rem;
    line-height: 1.58;
    padding-left: .96rem;
  }

  #testimonios .testimonial blockquote::before{
    top: -.14rem;
    font-size: 1.4rem;
  }

  #testimonios .testimonial-meta{
    padding-top: .72rem;
  }

  #testimonios .testimonial-avatar{
    --testi-avatar-size: 3rem;
  }
}

@media (max-width: 420px){
  #testimonios .testimonial{
    border-radius: max(12px, calc(var(--testi-card-radius) - 2px));
  }

  #testimonios .testimonial-role{
    font-size: .8rem;
  }
}

/* -------------------------------------------------------------------------- */
/* 11) FAQ — premium M0 (F2-P1.b1, markup-safe + compat)                     */
/* S0.3 clasificación: block-local-recipe / future-candidate                  */
/* Nota: el accordion/card actual es recipe local del bloque, aunque viva     */
/* sobre consumers/contextos ya oficiales.                                    */
/* -------------------------------------------------------------------------- */

#faq{
  --faq-copy-heading: var(--tlv2-root-copy-heading, var(--tlv2-copy-heading, var(--role-heading-color, inherit)));
  --faq-copy-body: var(--tlv2-root-copy-body, var(--tlv2-copy-body, var(--role-body-color, inherit)));
  --faq-copy-muted: var(--tlv2-root-copy-muted, var(--tlv2-copy-muted, var(--role-muted-color, var(--tlv2-muted))));
  --faq-card-copy-heading: var(--tlv2-faq-card-copy-heading, var(--tlv2-card-copy-heading));
  --faq-card-copy-body: var(--tlv2-faq-card-copy-body, var(--tlv2-card-copy-body));
  --faq-card-copy-muted: var(--tlv2-faq-card-copy-muted, var(--tlv2-card-copy-muted));
  --faq-border: var(--role-context-border-strong, color-mix(in oklch, var(--role-border-color, rgba(0,0,0,.14)) 62%, var(--role-accent, oklch(0.72 0.09 240)) 38%));
  --role-context-card-shell-surface: var(--role-context-surface, var(--role-surface-section, var(--role-surface-base, #fff)));
  --role-context-card-shell-border: var(--faq-border);
  --faq-border-soft: var(--tlv2-card-border, var(--tlv2-card-family-border));
  --faq-surface-card: var(--tlv2-card-surface, var(--tlv2-card-family-surface));
  --faq-card-highlight: var(--tlv2-card-highlight, var(--tlv2-card-family-highlight, none));
  --faq-shadow: var(--tlv2-card-shadow, var(--tlv2-card-family-shadow));
  --faq-shadow-hover: var(--tlv2-card-shadow-hover, var(--tlv2-card-family-shadow-hover, var(--faq-shadow)));
  --faq-muted: var(--tlv2-card-copy-muted, var(--tlv2-card-family-muted, var(--role-muted-color, oklch(0.45 0 0))));
  --faq-shell-gap: clamp(.75rem, .42vw + .65rem, 1rem);
  --faq-body-gap: .55rem;
  --faq-list-gap: clamp(.65rem, .35vw + .55rem, .9rem);
  --faq-item-pad-y: clamp(.82rem, .5vw + .72rem, 1.02rem);
  --faq-item-pad-x: clamp(.9rem, .75vw + .8rem, 1.1rem);
  --faq-question-size: var(--fs-card-title, clamp(1rem, .94rem + .18vw, 1.08rem));
  --faq-question-line: var(--lh-card-title, 1.32);
  --faq-answer-gap: .5rem;
  --faq-answer-size: var(--fs-card-body, .97rem);
  --faq-answer-line: var(--lh-card-body, 1.55);
  --faq-answer-paragraph-gap: .45rem;
}

#faq .tlv2-container{
  display: grid;
  gap: var(--faq-shell-gap);
}

#faq :is(.faq-eyebrow, .section-eyebrow){
  margin: 0;
  margin-block-end: .68rem;
  justify-self: start;
  --tlv2-pill-gap: .45rem;
  --tlv2-pill-pad-y: .36rem;
  --tlv2-pill-pad-x: .72rem;
  font-size: .77rem;
  line-height: 1.02;
  letter-spacing: .08em;
  font-weight: 650;
  opacity: .95;
}

#faq .section-title{
  margin: 0;
  max-inline-size: var(--measure-section-title, min(24ch, 100%));
  color: var(--faq-copy-heading);
  text-wrap: balance;
}

#faq .section-subtitle,
#faq .faq-microcopy{
  max-inline-size: var(--measure-section-subtitle, min(62ch, 100%));
}

#faq .faq-body{
  max-inline-size: var(--measure-section-body, min(66ch, 100%));
}

#faq .faq-list{
  max-inline-size: var(--layout-region-list-max, min(76ch, 100%));
}

#faq .section-subtitle,
#faq .faq-microcopy{
  color: var(--faq-copy-muted);
}

#faq .faq-body{
  color: var(--faq-copy-body);
}

#faq .faq-body{
  display: grid;
  gap: var(--faq-body-gap);
}

#faq .faq-body > *{
  margin: 0;
}

#faq .faq-list{
  display: grid;
  gap: var(--faq-list-gap);
  margin-top: var(--cta-final-microcopy-gap);
}

#faq .faq-item{
  position: relative;
  border-radius: var(--tlv2-card-radius, var(--role-card-radius, clamp(14px, 1.1vw, 18px)));
  padding: var(--faq-item-pad-y) var(--faq-item-pad-x);
  min-width: 0;
}

#faq .faq-item::before{
  content: none; /* F2-P1 micro-hotfix: sin rail lateral por defecto */
}

#faq .faq-item :is(.faq-question, .q){
  margin: 0;
  padding: 0;
  font-size: var(--faq-question-size);
  line-height: var(--faq-question-line);
  font-weight: 600;
  list-style: none;
}

#faq .faq-item .q{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .65rem;
  cursor: pointer;
}

#faq .faq-item summary.q{
  list-style: none;
}

#faq .faq-item summary.q::marker{
  content: "";
}

#faq .faq-item .q::-webkit-details-marker{
  display: none;
}

#faq .faq-item .q::after{
  content: "\25BE";
  font-size: 1.1em;
  color: var(--tlv2-faq-disclosure-affordance, var(--faq-card-copy-muted));
  flex: 0 0 auto;
  margin-top: .05em;
  opacity: .72;
  transition: color .18s ease, transform .18s ease, opacity .18s ease;
}

#faq .faq-item:is(:hover, :focus-within) .q::after{
  color: var(--tlv2-faq-disclosure-affordance-active, var(--faq-card-copy-heading, var(--faq-card-copy-muted)));
  opacity: .86;
}

#faq .faq-item[open] .q::after{
  color: var(--tlv2-faq-disclosure-affordance-active, var(--faq-card-copy-heading, var(--faq-card-copy-muted)));
  transform: rotate(-180deg);
  opacity: .9;
}

#faq .faq-item :is(.faq-answer, .a){
  margin-top: var(--faq-answer-gap);
  font-size: var(--faq-answer-size);
  line-height: var(--faq-answer-line);
}

#faq .faq-item .a{
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .18s ease, transform .18s ease;
}

#faq .faq-item[open] .a{
  opacity: 1;
  transform: translateY(0);
}

#faq .faq-item:focus-within{
  border-color: var(--tlv2-card-border-active, var(--faq-border-soft));
  box-shadow: 0 0 0 3px var(--tlv2-focus-ring, var(--role-context-focus-ring, color-mix(in oklch, var(--role-primary, oklch(0.62 0.15 255)) 16%, transparent))), var(--tlv2-card-focus-shadow, var(--tlv2-card-highlight, none), var(--tlv2-card-shadow-hover));
}


#faq .faq-item :is(.faq-answer, .a) > :first-child{
  margin-top: 0;
}

#faq .faq-item :is(.faq-answer, .a) > :last-child{
  margin-bottom: 0;
}

#faq .faq-item :is(.faq-answer, .a) p{
  margin: 0;
}

#faq .faq-item :is(.faq-answer, .a) p + p{
  margin-top: var(--faq-answer-paragraph-gap);
}

/* FAQ consumer adoption closeout
   - owner/bridge ya resuelven claro sobre la surface de faq-item
   - forzamos adopcion local en summary/question y answer descendants
   - sin tocar shared contracts */
#faq .faq-microcopy{
  margin: .15rem 0 0;
  font-size: var(--fs-card-microcopy, .92rem);
  line-height: var(--lh-card-microcopy, 1.42);
}

@media (hover: hover) and (pointer: fine){
  #faq .faq-item:hover{
    border-color: var(--tlv2-card-border-active, var(--faq-border-soft));
  }
}

@media (max-width: 767px){
  #faq .faq-item{
    padding: var(--faq-item-pad-y-mobile, .8rem) var(--faq-item-pad-x-mobile, .85rem);
  }

  #faq .faq-item::before{
    inset-block: .5rem;
  }

  #faq .faq-item .q::after{
    font-size: 1.22em;
  }
}

/* -------------------------------------------------------------------------- */
/* 12) CTA FINAL — premium M0 (markup-safe)                                   */
/* S0.3 clasificación: block-local-recipe / non-promotable                    */
/* Nota: bloque sensible de cierre; su cromática y shell local no ascienden   */
/* a component-authority del spec superior.                                   */
/* -------------------------------------------------------------------------- */

#cta-final{
  /* VC1-B2 — CTA final queda base-locked; consume CTA pair + copy shared sin promotion root editorial. */
  --cta-final-root-copy-heading: var(--tlv2-root-copy-heading, var(--tlv2-copy-heading, var(--role-heading-color, var(--role-text-color, oklch(0.22 0 0)))));
  --cta-final-root-copy-body: var(--tlv2-root-copy-body, var(--tlv2-copy-body, var(--role-body-color, var(--role-text-color, oklch(0.30 0 0)))));
  --cta-final-root-copy-muted: var(--tlv2-root-copy-muted, var(--tlv2-copy-muted, var(--role-muted-color, oklch(0.46 0.01 260))));
  --cta-final-accent: var(--role-accent, oklch(0.62 0.17 264));
  --cta-final-copy-heading: var(--cta-final-root-copy-heading);
  --cta-final-copy-body: var(--cta-final-root-copy-body);
  --cta-final-copy-muted: var(--cta-final-root-copy-muted);
  --cta-final-title: var(--cta-final-copy-heading);
  --cta-final-text: var(--cta-final-copy-body);
  --cta-final-muted: var(--cta-final-copy-muted);
  --cta-final-max-w: var(--layout-shell-trust-closure-max, 58rem);
  --cta-final-shell-max-w: 58rem;
  --cta-final-shell-pad-block: clamp(.72rem, 1.02vw, .96rem);
  --cta-final-shell-pad-inline: clamp(.72rem, 1.52vw, .98rem);
  --cta-final-shell-radius: 0px;
  --cta-final-shell-surface: transparent;
  --cta-final-shell-border: transparent;
  --cta-final-shell-highlight: none;
  --cta-final-shell-shadow: none;
  --cta-final-stack-gap: clamp(.88rem, 1.08vw, 1.18rem);
  --cta-final-header-gap: clamp(.32rem, .78vw, .56rem);
  --cta-final-body-gap: clamp(.28rem, .58vw, .46rem);
  --cta-final-body-max-w: min(50ch, 100%);
  --cta-final-body-paragraph-gap: .62rem;
  --cta-final-microcopy-gap: .24rem;
  --cta-final-microcopy-max-w: min(40ch, 100%);
  --cta-final-cta-gap: .76rem;
  --cta-final-cta-row-gap: .62rem;
  --cta-final-cta-top-gap: clamp(.84rem, 1.18vw, 1.08rem);
  --cta-final-actions-max-w: 31rem;
  --cta-final-text-align: center;
  --cta-final-cta-justify: center;
}

#cta-final .tlv2-container{
  width: min(100%, var(--cta-final-shell-max-w));
  max-width: var(--tlv2-section-max, var(--cta-final-max-w));
  margin-inline: auto;
  padding: var(--cta-final-shell-pad-block) var(--cta-final-shell-pad-inline);
  border-radius: var(--cta-final-shell-radius);
  border: 0;
  background-color: var(--cta-final-shell-surface);
  background-image: var(--cta-final-shell-highlight);
  box-shadow: var(--cta-final-shell-shadow);
  text-align: var(--cta-final-text-align);
  display: grid;
  justify-items: center;
  gap: var(--cta-final-stack-gap);
  position: relative;
}

#cta-final .cta-final-header{
  display: grid;
  gap: var(--cta-final-header-gap);
  justify-items: center;
  margin: 0;
}

#cta-final .cta-final-eyebrow{
  margin: 0;
  margin-block-end: .72rem;
  --tlv2-pill-gap: .4rem;
  --tlv2-pill-pad-y: .42rem;
  --tlv2-pill-pad-x: .72rem;
  font-size: clamp(.74rem, .73rem + .06vw, .8rem);
  font-weight: 650;
  letter-spacing: .085em;
  text-transform: uppercase;
  line-height: 1.03;
  opacity: .95;
}

#cta-final .section-title{
  margin: 0;
  max-width: min(19ch, 100%);
  color: var(--cta-final-title);
  font-size: clamp(1.38rem, 1.02rem + 1.14vw, 2.06rem);
  line-height: 1.03;
  letter-spacing: -0.028em;
  text-wrap: balance;
}

#cta-final .section-subtitle,
#cta-final .cta-final-subtitle{
  margin: 0;
  max-width: min(var(--measure-section-subtitle-compact, 56ch), 49ch, 100%);
  color: color-mix(in oklch, var(--cta-final-text) 44%, var(--cta-final-muted) 56%);
  font-size: clamp(.97rem, .89rem + .2vw, 1.06rem);
  line-height: 1.44;
  text-wrap: pretty;
}

#cta-final .cta-final-body{
  margin: var(--cta-final-body-gap) auto 0;
  max-width: var(--cta-final-body-max-w);
  color: color-mix(in oklch, var(--cta-final-text) 93%, var(--cta-final-muted) 7%);
  font-size: clamp(.94rem, .89rem + .15vw, 1rem);
  line-height: 1.62;
}

#cta-final .cta-final-body p{
  margin: 0;
}

#cta-final .cta-final-body p + p{
  margin-top: var(--cta-final-body-paragraph-gap);
}

#cta-final .cta-final-microcopy{
  margin: 0;
  max-width: var(--cta-final-microcopy-max-w);
  margin-inline: auto;
  color: color-mix(in oklch, var(--cta-final-muted) 84%, var(--cta-final-text) 16%);
  font-size: .82rem;
  line-height: 1.34;
  text-wrap: pretty;
}

#cta-final .cta-final-microcopy--top{
  margin-top: var(--cta-final-microcopy-gap);
}

#cta-final .cta-final-microcopy--bottom{
  margin-top: .14rem;
  opacity: .9;
}

#cta-final .cta-group{
  margin-top: var(--cta-final-cta-top-gap);
  margin-inline: auto;
  width: fit-content;
  max-width: min(100%, var(--cta-final-actions-max-w));
  display: flex;
  flex-wrap: wrap;
  justify-content: var(--cta-final-cta-justify);
  align-items: stretch;
  gap: var(--cta-final-cta-gap);
  row-gap: var(--cta-final-cta-row-gap);
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

#cta-final .cta-group .cta{
  --cta-min-h: 48px;
  --cta-pad-x: 1.02rem;
  flex: 1 1 13.5rem;
  min-width: clamp(12.5rem, 17vw, 13.75rem);
  max-width: 100%;
  min-height: 48px;
  padding-inline: 1.04rem;
  border-radius: var(--role-cta-radius, var(--radius-cta, 12px));
  position: relative;
  isolation: isolate;
  justify-content: center;
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    filter .18s ease,
    border-color .18s ease,
    background-color .18s ease;
}

#cta-final .cta-group .cta:hover{
  transform: translateY(-1px);
}

#cta-final .cta-group .cta:active{
  transform: translateY(0);
}

#cta-final .cta-group .cta:focus-visible{
  outline: var(--role-focus-ring-width, 2px) solid var(--tlv2-focus-ring, var(--role-focus-ring-color, var(--role-button-primary-surface, currentColor)));
  outline-offset: 2px;
}

/* FDN-S7-S2 — CTA Final adopta la misma gramatica
   base de pareja CTA del Hero. Prohibida la capsula compartida tipo segmented control. */
#cta-final .cta-final-primary{
  --cta-min-h: 46px;
  --cta-pad-x: .96rem;
  filter: none;
}

#cta-final .cta-final-primary:hover{
  filter: saturate(1.02);
}

#cta-final .cta-final-secondary,
#cta-final .cta-final-secondary:hover{
  --cta-min-h: 46px;
  --cta-pad-x: .96rem;
  filter: none;
  box-shadow: none;
}

#cta-final .cta-group .cta .cta-label{
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.05;
}

@media (max-width: 767px){
  #beneficios .beneficios-footer .tlv2-block-footer-cta-group{
    width: 100%;
  }

  #beneficios .beneficios-footer .tlv2-block-footer-cta{
    width: 100%;
    min-width: 0;
    justify-content: center;
  }
}

@media (max-width: 767px){
  #cta-final{
    --cta-final-shell-pad-block: .56rem;
    --cta-final-shell-pad-inline: .72rem;
    --cta-final-shell-radius: 0px;
    --cta-final-stack-gap: .58rem;
    --cta-final-header-gap: .42rem;
    --cta-final-cta-top-gap: .18rem;
    --cta-final-microcopy-gap: .24rem;
    --cta-final-microcopy-max-w: min(30ch, 100%);
    --cta-final-actions-max-w: 100%;
    --cta-final-text-align: center;
  }


  #cta-final .section-title{
    max-width: min(15.5ch, 100%);
    font-size: clamp(1.28rem, 1.1rem + 1.18vw, 1.64rem);
    line-height: 1.02;
    letter-spacing: -.028em;
  }

  #cta-final .section-subtitle,
  #cta-final .cta-final-subtitle{
    max-width: min(34ch, 100%);
    font-size: .94rem;
    line-height: 1.38;
  }

  #cta-final .cta-final-body{
    font-size: .94rem;
    line-height: 1.5;
  }

  #cta-final .cta-group{
    margin-top: .14rem;
    width: min(100%, 17.5rem);
    max-width: 17.5rem;
    flex-direction: column;
    align-items: center;
    --cta-final-cta-gap: .38rem;
    --cta-final-cta-row-gap: .38rem;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  #cta-final .cta-group .cta{
    width: auto;
    min-width: 0;
    max-width: 100%;
    flex: 0 0 auto;
    justify-content: center;
    min-height: 40px;
    --cta-min-h: 40px;
    padding-inline: .8rem;
    letter-spacing: 0;
  }

  #cta-final .cta-final-primary{
    width: 100%;
    min-height: 42px;
    --cta-min-h: 42px;
    --cta-pad-x: .84rem;
  }

  #cta-final .cta-final-secondary,
  #cta-final .cta-final-secondary:hover{
    width: fit-content;
    max-width: max-content;
    align-self: center;
    min-height: 38px;
    --cta-min-h: 38px;
    --cta-pad-x: .74rem;
    padding-inline: .74rem;
    box-shadow: none;
    filter: none;
  }

  #cta-final .cta-final-secondary .cta-label{
    font-weight: 625;
    letter-spacing: -.006em;
  }

  #cta-final .cta-final-microcopy{
    max-width: min(30ch, 100%);
    font-size: .79rem;
    line-height: 1.28;
  }
}

@media (min-width: 768px){
  #cta-final .cta-group .cta{
    min-width: 13.75rem;
  }
}


/* -------------------------------------------------------------------------- */
/* 12.1) F2-S4 L2 — coherencia global F2 (markup-safe)                        */
/* S0.3 clasificación: block-local-recipe / future-candidate                 */
/* Nota: estas convergencias entre bloques premium no constituyen por sí      */
/* mismas una nueva authority cromática; siguen siendo costuras locales.      */
/* -------------------------------------------------------------------------- */

/* Coherencia de jerarquía textual entre bloques premium del frente F2 */
:is(#beneficios, #ingredientes, #testimonios, #cta-final) .section-title{
  text-wrap: balance;
  letter-spacing: -.015em;
}

:is(#beneficios, #ingredientes, #testimonios, #cta-final) .section-subtitle{
  text-wrap: pretty;
}

/* Testimonios: ritmo más consistente con Beneficios/Ingredientes */
#testimonios .section-title{
  margin-bottom: clamp(.65rem, .55vw + .4rem, .95rem);
}

#testimonios .section-subtitle{
  color: color-mix(in oklch, var(--testimonios-copy-muted) 88%, var(--testimonios-copy-body) 12%);
}

#testimonios .section-title{
  color: var(--testimonios-copy-heading);
}

#testimonios .testimonios-body{
  color: var(--testimonios-copy-body);
}

#testimonios .testimonios-body{
  margin-top: var(--testi-body-margin-top);
  max-width: var(--testi-body-max-w);
  text-wrap: pretty;
}

/* VC1-B2 / FDN-S7-S2 — CTA Final consume grammar CTA shared como bloque base-locked; no promotion root editorial. */
:is(#hero .hero-cta-group, #hero .cta-group, #beneficios .beneficios-footer .tlv2-block-footer-cta-group){
  gap: var(--space-3);
  row-gap: var(--space-2);
  align-items: stretch;
}

:is(#hero .hero-cta-group .cta, #hero .cta-group .cta, #beneficios .beneficios-footer .tlv2-block-footer-cta-group .cta){
  letter-spacing: -.01em;
  min-height: 46px;
}

:is(#hero .hero-cta-group .cta-primary, #hero .cta-group .cta-primary, #beneficios .beneficios-footer .tlv2-block-footer-cta-group .cta-primary){
  --cta-min-h: 50px;
  --cta-pad-x: 1rem;
}

:is(#hero .hero-cta-group .hero-secondary, #hero .cta-group .hero-secondary){
  --cta-min-h: 50px;
  --cta-pad-x: 1rem;
  filter: none;
}


:is(#hero .hero-cta-group .cta .cta-label, #hero .cta-group .cta .cta-label, #beneficios .beneficios-footer .tlv2-block-footer-cta-group .cta .cta-label){
  font-weight: 700;
  line-height: 1.05;
}

#hero .hero-cta-group .hero-secondary,
#hero .cta-group .hero-secondary,
#hero .hero-cta-group .hero-secondary:hover,
#hero .cta-group .hero-secondary:hover{
  box-shadow: none;
}


@media (max-width: 767px){
  #testimonios .testimonios-body{
    margin-top: .65rem;
  }

  :is(#hero .hero-cta-group .cta, #hero .cta-group .cta, #beneficios .beneficios-footer .tlv2-block-footer-cta-group .cta){
    letter-spacing: 0;
  }
}


/* -------------------------------------------------------------------------- */
/* 13) A11y y foco global                                                     */
/* -------------------------------------------------------------------------- */

/* D3 — Foco visible global para CTAs (fallback si :focus-visible no existe) */
.tlv2-page :where(.cta,.boton-comprar):focus{
  outline: 2px solid var(--tlv2-focus-ring, currentColor);
  outline-offset: 2px;
}
@supports selector(:focus-visible){
  .tlv2-page :where(.cta,.boton-comprar):focus{
    outline: none;
  }
  .tlv2-page :where(.cta,.boton-comprar):focus-visible{
    outline: 2px solid var(--tlv2-focus-ring, currentColor);
    outline-offset: 2px;
  }
}

/* Foco visible global para CTAs (fallback robusto) */
.tlv2-page :where(.cta,.boton-comprar):focus{
  outline: 2px solid var(--tlv2-focus-ring, currentColor) !important;
  outline-offset: 2px !important;
}
@supports selector(:focus-visible){
  .tlv2-page :where(.cta,.boton-comprar):focus{
    outline: none !important;
  }
  .tlv2-page :where(.cta,.boton-comprar):focus-visible{
    outline: 2px solid var(--tlv2-focus-ring, currentColor) !important;
    outline-offset: 2px !important;
  }
}

/* [TLV2 D2] Foco visible global seguro para CTAs dentro de la landing (AA) */
.tlv2-page .cta:focus {
  outline: 2px solid var(--tlv2-focus-ring, currentColor);
  outline-offset: 2px;
}
@supports selector(:focus-visible){
  .tlv2-page .cta:focus {
    outline: none;
  }
  .tlv2-page .cta:focus-visible {
    outline: 2px solid var(--tlv2-focus-ring, currentColor);
    outline-offset: 2px;
  }
}

/* Micro A11Y / UX HERO
   - Evita que el target de ancla quede tapado por headers fijos.
   - Mejora foco visible por teclado.
*/
.tlv2-section {
  scroll-margin-top: var(--sticky-offset, 72px);
}

:focus-visible {
  outline: var(--role-focus-ring-width, 2px) solid var(--tlv2-focus-ring, var(--role-focus-ring-color, var(--role-button-primary-surface, currentColor)));
  outline-offset: 2px;
}


/* -------------------------------------------------------------------------- */
/* F2-P1.b2 (packs + modal) — PACKS visual premium MVP (markup-safe, v0.1)   */
/* - Alinea estilos con markup canónico actual (.pack-*) sin romper legacy.   */
/* - No toca lógica CTA/modal; solo presentación del bloque PACKS.             */
/* -------------------------------------------------------------------------- */

#packs{
  /* VC1-B1 v0.2 — packs queda domain-specific/commercial-domain; consume card+badge+button+copy shared sin volverse sección editorial normal. */
  /* AUTHORITY-CARD-FAMILY-03 — packs no redefine la recipe de card.
     Neutral / featured surface, border, shadow, highlight, bg-image y outline se resuelven arriba
     en roles.css + components-map.css. Aquí solo quedan tokens locales de composición/comercial-domain. */
  --tlv2-section-max: min(78rem, 100%);
  --packs-featured-lift: -10px;
  --packs-section-copy-heading: var(--tlv2-root-copy-heading);
  --packs-section-copy-body: var(--tlv2-root-copy-body, var(--packs-section-copy-heading));
  --packs-section-copy-muted: var(--tlv2-root-copy-muted, var(--packs-section-copy-body));
  --packs-copy-heading: var(--packs-section-copy-heading);
  --packs-copy-body: var(--packs-section-copy-body);
  --packs-copy-muted: var(--packs-section-copy-muted);
  --packs-muted: var(--packs-section-copy-muted);
  --role-context-card-shell-surface: var(--role-context-surface, var(--role-surface-base, #fff));
  --role-context-card-shell-border: var(--role-shell-border, var(--role-border-color, rgba(0,0,0,.14)));
  --role-context-card-neutral-family-surface-weight: 88%;
  --role-context-card-neutral-shell-surface-weight: 12%;
  --role-context-card-neutral-family-surface-2-weight: 84%;
  --role-context-card-neutral-shell-surface-2-weight: 16%;
  --role-context-card-neutral-family-border-weight: 88%;
  --role-context-card-neutral-shell-border-weight: 12%;
  --packs-grid-gap: clamp(1rem, 1.1vw + .65rem, 1.3rem);
  --packs-grid-margin-top: clamp(1.15rem, 1.2vw + .75rem, 1.65rem);
  --packs-card-gap: .82rem;
  --packs-card-pad-y: 1.12rem;
  --packs-card-pad-x: 1.08rem;
  --packs-card-pad-bottom: 1.15rem;
  --packs-intro-gap: .75rem;
  --packs-body-gap: .55rem;
  --packs-features-gap: .5rem;
  --packs-price-gap-row: .35rem;
  --packs-price-gap-col: .55rem;
  --packs-microcopy-gap: .95rem;
  --packs-cta-gap: .55rem;
  --packs-cta-pad-top: .25rem;
}

#packs .tlv2-container{
  max-width: min(76rem, 100%);
}

#packs :is(.packs-eyebrow, .section-eyebrow){
  width: fit-content;
  margin-inline: auto;
}

#packs :is(.packs-header, .section-header){
  max-width: 50rem;
  margin: 0 auto;
  text-align: center;
}

#packs .packs-intro[data-shared-copy-grammar="1"]{
  max-width: 52rem;
  margin: var(--packs-intro-gap) auto 0;
  text-align: center;
  color: var(--packs-section-copy-muted);
}
#packs .packs-intro > :first-child{ margin-top: 0; }
#packs .packs-intro > :last-child{ margin-bottom: 0; }
#packs .packs-intro p{
  line-height: 1.65;
}

#packs .packs-grid{
        display: grid;
  grid-template-columns: repeat(var(--tlv2-packs-grid-cols-desktop, 3), minmax(0, 1fr));
  margin-top: var(--packs-grid-margin-top);
  align-items: stretch;
  gap: var(--packs-grid-gap);
}

@media (max-width: 1024px){
  #packs .packs-grid{
    grid-template-columns: repeat(var(--tlv2-packs-grid-cols-tablet, 2), minmax(0, 1fr));
  }
}

@media (max-width: 767px){
  #packs .packs-grid{
    grid-template-columns: repeat(var(--tlv2-packs-grid-cols-mobile, 1), minmax(0, 1fr));
  }
}

#packs .pack-card{
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: var(--packs-card-gap);
  min-height: 100%;
  padding: var(--packs-card-pad-y) var(--packs-card-pad-x) var(--packs-card-pad-bottom);
  border-radius: var(--tlv2-pack-card-radius, 18px);
  border: var(--tlv2-pack-card-border-width, 1px) solid var(--tlv2-pack-card-border-color-final, var(--tlv2-pack-card-border-color-effective, var(--tlv2-pack-card-border-color-resolved, var(--tlv2-pack-card-border, var(--tlv2-card-border)))));
  background-color: var(--tlv2-pack-card-surface-color, var(--tlv2-card-surface, var(--tlv2-card-family-surface, var(--role-context-card-neutral-surface, var(--role-surface-elevated, #fff)))));
  background-image: var(--tlv2-pack-card-surface-resolved, var(--tlv2-pack-card-background, var(--tlv2-card-family-bg-image)));
  box-shadow: var(--tlv2-pack-card-shadow-resolved, var(--tlv2-pack-card-shadow-stack, var(--tlv2-card-highlight, none), var(--tlv2-card-shadow)));
  color: var(--tlv2-pack-card-copy-body, var(--tlv2-card-copy-body, var(--tlv2-card-family-body, var(--packs-section-copy-body))));
  --packs-card-copy-heading: var(--tlv2-pack-card-copy-heading, var(--tlv2-card-copy-heading, var(--packs-section-copy-heading)));
  --packs-card-copy-body: var(--tlv2-pack-card-copy-body, var(--tlv2-card-copy-body, var(--packs-section-copy-body)));
  --packs-card-copy-muted: var(--tlv2-pack-card-copy-muted, var(--tlv2-card-copy-muted, var(--packs-section-copy-muted)));
  --packs-card-copy-emphasis: var(--tlv2-pack-card-copy-emphasis, var(--tlv2-pack-card-copy-heading, var(--packs-card-copy-heading)));
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background-image .2s ease;
}
#packs .pack-card::before{
  content: none; /* F2-P1 micro-hotfix: rail lateral solo para featured */
}
#packs .pack-top{
  display: grid;
  align-content: start;
  gap: clamp(.52rem, .46rem + .18vw, .72rem);
}
#packs .pack-card--featured.pack-card--has-media .pack-top{
  gap: clamp(.48rem, .42rem + .18vw, .62rem);
}
#packs .pack-card--featured.pack-card--has-media .pack-top--featured{
  position: relative;
}
#packs .pack-media{
  --tlv2-split-media-radius: clamp(14px, 1.1vw, 18px);
  --tlv2-split-media-frame-max-inline: min(100%, clamp(8.5rem, 42vw, 11.5rem));
  --tlv2-split-media-frame-border: 1px solid color-mix(in oklch, var(--tlv2-pack-card-border-color-final, var(--tlv2-card-border)) 72%, transparent);
  --tlv2-split-media-frame-surface: color-mix(in oklch, var(--tlv2-pack-card-surface-color, var(--tlv2-card-surface, #fff)) 94%, white 6%);
  --tlv2-split-media-frame-shadow: none;
  --tlv2-split-media-frame-pad-effective: 3px;
  --tlv2-split-media-figure-ratio: 1 / 1;
  --tlv2-split-media-figure-surface: color-mix(in oklch, var(--tlv2-pack-card-surface-color, var(--tlv2-card-surface, #fff)) 96%, white 4%);
  --tlv2-split-media-object-fit: contain;
  --tlv2-split-media-placeholder-foreground: var(--tlv2-pack-card-copy-muted, var(--tlv2-card-copy-muted, currentColor));
  --tlv2-split-media-placeholder-surface: color-mix(in oklch, var(--tlv2-pack-card-surface-color, var(--tlv2-card-surface, #fff)) 92%, white 8%);
  --tlv2-split-media-placeholder-border: color-mix(in oklch, var(--tlv2-pack-card-border-color-final, var(--tlv2-card-border)) 64%, transparent);
  inline-size: min(100%, var(--tlv2-split-media-frame-max-inline));
  margin-inline: auto;
  align-self: center;
}

#packs .pack-media .tlv2-split-media__frame--placeholder{
  inline-size: 100%;
}

#packs .pack-media .tlv2-split-media__placeholder{
  min-block-size: 0;
}

#packs .pack-card--featured:hover{
  transform: translateY(calc(var(--packs-featured-lift) - 1px));
}
#packs .pack-card--featured::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: var(--tlv2-pack-card-overlay-shadow, none);
  opacity: 1;
}
#packs .pack-card:hover{
  transform: translateY(-3px);
  border-color: var(--tlv2-pack-card-border-active, var(--tlv2-pack-card-border-color-final, var(--tlv2-pack-card-border, var(--tlv2-card-border))));
  background-image: var(--tlv2-pack-card-background-hover, var(--tlv2-pack-card-background, var(--tlv2-card-family-bg-image)));
  box-shadow: var(--tlv2-pack-card-shadow-stack-hover, var(--tlv2-pack-card-shadow-resolved, var(--tlv2-pack-card-shadow-stack, var(--tlv2-card-highlight, none), var(--tlv2-card-shadow))));
}

#packs .pack-card:not(.pack-card--featured):focus-within{
  border-color: var(--tlv2-pack-card-border-active, var(--tlv2-pack-card-border-color-final, var(--tlv2-pack-card-border, var(--tlv2-card-border))));
  box-shadow: 0 0 0 3px var(--tlv2-focus-ring, color-mix(in oklch, var(--role-focus-ring-color, var(--role-primary, oklch(0.62 0.13 210))) 20%, transparent)), var(--tlv2-pack-card-focus-shadow, var(--tlv2-pack-card-shadow-stack-hover, var(--tlv2-card-highlight, none), var(--tlv2-card-shadow-hover)));
}
#packs .pack-card.pack-card--featured{
  /* AUTHORITY-CARD-FAMILY-02 — featured consume family resuelta arriba; aquí solo geometría/ornamento. */
  /* V6-A / FEATURED-COPY-CONTRACT-CLOSEOUT — estas vars sí pertenecen al contrato runtime del featured.
     Se publican explícitamente en el nodo final para evitar lectura vacía/residual en QA y consumers locales. */
  --tlv2-pack-card-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, #111827))))));
  --tlv2-pack-card-copy-body: var(--role-context-card-featured-body, var(--tlv2-pack-card-copy-heading));
  --tlv2-pack-card-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, rgba(56, 62, 75, 1))))));
  --tlv2-pack-card-copy-emphasis: var(--role-context-card-featured-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));
  --tlv2-pack-card-border-color-final: color-mix(in oklch, var(--role-primary, var(--role-accent, var(--tlv2-card-border))) 20%, var(--tlv2-pack-card-border-color-effective, var(--tlv2-pack-card-border-color-resolved, var(--tlv2-pack-card-border, var(--tlv2-card-border)))) 80%);
  --tlv2-pack-card-overlay-shadow: 0 22px 48px rgba(15, 23, 42, .14), inset 0 1px 0 rgba(255, 255, 255, .18), inset 0 0 0 1px color-mix(in oklch, var(--role-primary, var(--role-accent, #4f46e5)) 12%, white 88%);
  --tlv2-pack-card-background-hover: linear-gradient(180deg, color-mix(in oklch, white 82%, transparent) 0%, transparent 26%), var(--tlv2-pack-card-surface-resolved, var(--tlv2-pack-card-background, var(--tlv2-card-family-bg-image)));
  transform: translateY(var(--packs-featured-lift));
  border-width: 2px;
}
#packs .pack-card--featured::before{
  content: none;
}

#packs .pack-card [data-shared-copy-grammar="1"]{
  --tlv2-copy-heading: var(--tlv2-pack-card-copy-heading, var(--packs-card-copy-heading));
  --tlv2-copy-body: var(--tlv2-pack-card-copy-body, var(--packs-card-copy-body));
  --tlv2-copy-muted: var(--tlv2-pack-card-copy-muted, var(--packs-card-copy-muted));
}

#packs .pack-card :where(p, li, span, small, strong, em){
  color: inherit;
}


#packs .pack-badge{
  align-self: flex-start;
  justify-self: start;
  inline-size: auto;
  max-inline-size: 100%;
  width: auto;
  margin: 0;
  position: relative;
  z-index: 1;
  --tlv2-pill-gap: .35rem;
  --tlv2-pill-pad-y: .3rem;
  --tlv2-pill-pad-x: .7rem;
  font-size: .74rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .04em;
  text-transform: uppercase;
}
#packs .pack-badge.badge--featured{
  padding: .42rem .78rem;
  border-radius: 999px;
  border: 1px solid color-mix(in oklch, var(--role-primary, var(--role-accent, oklch(0.72 0.09 240))) 18%, white 82%);
  background: linear-gradient(180deg, color-mix(in oklch, white 58%, var(--role-primary, var(--role-accent, oklch(0.72 0.09 240)))) 0%, color-mix(in oklch, white 78%, var(--role-accent, var(--role-primary, oklch(0.72 0.09 240)))) 100%);
  color: color-mix(in oklch, var(--role-primary, var(--role-accent, #111827)) 72%, black 28%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .42), 0 10px 20px rgba(15, 23, 42, .08);
}
#packs .pack-card--featured.pack-card--has-media .pack-badge.badge--featured{
  align-self: flex-start;
  justify-self: start;
  inline-size: fit-content;
  max-inline-size: 100%;
  width: fit-content;
  padding: .38rem .74rem;
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .42), 0 12px 24px rgba(15, 23, 42, .10);
}
#packs .pack-card--featured.pack-card--has-media .pack-media{
  position: relative;
  z-index: 0;
}

#packs .pack-title{
  margin: .1rem 0 0;
  font-size: var(--fs-card-title, clamp(1.05rem, .95rem + .4vw, 1.25rem));
  line-height: var(--lh-card-title, 1.2);
  font-weight: 700;
  color: var(--tlv2-pack-card-copy-heading, var(--tlv2-card-copy-heading, var(--tlv2-card-family-heading, currentColor)));
}


#packs .pack-tagline{
  margin: 0;
  font-size: var(--fs-card-body, .95rem);
  line-height: var(--lh-card-body, 1.45);
  color: var(--tlv2-pack-card-copy-muted, var(--tlv2-card-copy-muted, var(--tlv2-card-family-muted, currentColor)));
}

#packs .pack-body{
  font-size: var(--fs-card-body, .95rem);
  line-height: var(--lh-card-body, 1.55);
  color: var(--tlv2-pack-card-copy-body, var(--tlv2-card-copy-body, var(--tlv2-card-family-body, currentColor)));
}
#packs .pack-body > :first-child{ margin-top: 0; }
#packs .pack-body > :last-child{ margin-bottom: 0; }
#packs .pack-body p + p{ margin-top: var(--packs-body-gap); }

#packs .pack-features{
  margin: .15rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--packs-features-gap);
}
#packs .pack-features li{
  position: relative;
  margin: 0;
  padding-left: 1.15rem;
  line-height: 1.4;
  color: var(--tlv2-pack-card-copy-body, var(--tlv2-card-copy-body, var(--tlv2-card-family-body, currentColor)));
}
#packs .pack-features li::before{
  content: "\2713";
  position: absolute;
  left: 0;
  top: .02em;
  opacity: .95;
  font-weight: 700;
  color: var(--tlv2-pack-card-copy-heading, var(--tlv2-card-copy-heading, var(--tlv2-card-family-heading, currentColor)));
}

#packs .pack-price{
  margin-top: .15rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--packs-price-gap-row) var(--packs-price-gap-col);
}
#packs .pack-price-main{
  font-size: var(--fs-pack-price, clamp(1.35rem, 1.15rem + .7vw, 1.9rem));
  line-height: var(--lh-pack-price, 1);
  font-weight: 700;
  color: var(--tlv2-pack-card-price-current, var(--tlv2-pack-card-copy-emphasis, var(--tlv2-pack-card-copy-heading, currentColor)));
}
#packs .pack-price-original{
  order: -1;
  font-size: var(--fs-pack-price-compare, .9rem);
  line-height: var(--lh-pack-price-compare, 1.1);
  color: var(--tlv2-pack-card-price-compare, var(--tlv2-pack-card-copy-muted, currentColor));
  text-decoration: line-through;
  opacity: .8;
}
#packs .pack-price-unit{
  font-size: var(--fs-pack-price-compare, .9rem);
  line-height: var(--lh-pack-price-compare, 1.2);
  color: var(--tlv2-pack-card-price-unit, var(--tlv2-pack-card-copy-muted, currentColor));
}

#packs .pack-microcopy{
  margin: -.15rem 0 0;
  font-size: var(--fs-pack-microcopy, .82rem);
  line-height: var(--lh-pack-microcopy, 1.35);
  color: var(--tlv2-pack-card-copy-muted, var(--tlv2-card-copy-muted, var(--tlv2-card-family-muted, currentColor)));
}

/* S3-C2A — featured visible consumer normalization: cierre visible abajo solo para nodos reales del featured. */
#packs .pack-card.pack-card--featured .pack-title{
  color: var(--tlv2-pack-card-copy-heading, var(--tlv2-card-copy-heading, var(--tlv2-card-family-heading, currentColor)));
}
#packs .pack-card.pack-card--featured .pack-tagline{
  color: var(--tlv2-pack-card-copy-muted, var(--tlv2-card-copy-muted, var(--tlv2-card-family-muted, currentColor)));
}
#packs .pack-card.pack-card--featured .pack-body{
  color: var(--tlv2-pack-card-copy-body, var(--tlv2-card-copy-body, var(--tlv2-card-family-body, currentColor)));
}
#packs .pack-card.pack-card--featured .pack-features li{
  color: var(--tlv2-pack-card-copy-body, var(--tlv2-card-copy-body, var(--tlv2-card-family-body, currentColor)));
}
#packs .pack-card.pack-card--featured .pack-features li::before{
  color: var(--tlv2-pack-card-copy-heading, var(--tlv2-pack-card-copy-emphasis, var(--tlv2-card-copy-heading, var(--tlv2-card-family-heading, currentColor))));
}
#packs .pack-card.pack-card--featured .pack-microcopy{
  color: var(--tlv2-pack-card-copy-muted, var(--tlv2-card-copy-muted, var(--tlv2-card-family-muted, currentColor)));
}
#packs .pack-card.pack-card--featured .pack-price-main{
  color: var(--tlv2-pack-card-price-current, var(--tlv2-pack-card-copy-emphasis, var(--tlv2-pack-card-copy-heading, currentColor)));
}
#packs .pack-card.pack-card--featured .pack-price-original{
  color: var(--tlv2-pack-card-price-compare, var(--tlv2-pack-card-copy-muted, currentColor));
}
#packs .pack-card.pack-card--featured .pack-price-unit{
  color: var(--tlv2-pack-card-price-unit, var(--tlv2-pack-card-copy-muted, currentColor));
}

#packs [data-consumption-contract="vc1b-packs-card-v0.2"] .cta-group[data-shared-cta-grammar="pair"]{
  --packs-card-cta-primary-border: color-mix(in oklch, var(--role-cta-card-select-border, transparent) 54%, var(--role-primary, black) 24%);
  --packs-card-cta-primary-shadow: 0 18px 30px -22px color-mix(in oklch, var(--role-primary, black) 38%, transparent);
  --packs-card-cta-primary-shadow-hover: 0 22px 36px -24px color-mix(in oklch, var(--role-primary, black) 44%, transparent);
  --packs-card-cta-primary-shadow-active: 0 12px 22px -20px color-mix(in oklch, var(--role-primary, black) 30%, transparent);
  margin-top: auto;
  padding-top: var(--packs-cta-pad-top);
  display: grid;
  gap: clamp(.5rem, .44rem + .18vw, .64rem);
  align-content: start;
}
#packs [data-consumption-contract="vc1b-packs-card-v0.2"] .cta-group[data-shared-cta-grammar="pair"] .cta{
  width: 100%;
  justify-content: center;
  padding-inline: clamp(18px, 16px + .35vw, 22px);
  text-align: center;
  white-space: normal;
}
#packs [data-consumption-contract="vc1b-packs-card-v0.2"] .cta-group[data-shared-cta-grammar="pair"] .cta-primary{
  --role-cta-card-select-min-h: 50px;
  --role-cta-card-select-pad-x: 21px;
  --role-cta-card-select-border: var(--packs-card-cta-primary-border);
  --role-cta-card-select-shadow: var(--packs-card-cta-primary-shadow);
  --role-cta-card-select-shadow-hover: var(--packs-card-cta-primary-shadow-hover);
  --role-cta-card-select-shadow-active: var(--packs-card-cta-primary-shadow-active);
  font-weight: 700;
  font-size: 1.015rem;
  line-height: 1.15;
  letter-spacing: -.01em;
}
#packs [data-consumption-contract="vc1b-packs-card-v0.2"] .cta-group[data-shared-cta-grammar="pair"] .cta--secondary{
  min-height: 40px;
  font-weight: 600;
  letter-spacing: -.005em;
  --cta-border: color-mix(in oklch, var(--role-border-color, rgba(0,0,0,.12)) 84%, var(--role-primary, black) 10%);
  --cta-fg: color-mix(in oklch, var(--role-context-button-secondary-foreground, var(--role-primary, #111)) 90%, var(--role-primary, #111) 10%);
  --cta-shadow: none;
}

#packs .packs-microcopy{
  max-width: 54rem;
  margin-inline: auto;
  text-align: center;
  margin-top: var(--packs-microcopy-gap);
  line-height: 1.5;
}

/* Compat suave con estilos antiguos (.title/.price/.features) sin interferir con markup actual */
#packs .pack-card :is(.title, .pack-title){ font-size: inherit; }

@media (max-width: 767px){
  #packs{
    --packs-featured-lift: -6px;
    --packs-card-gap: .65rem;
    --packs-card-pad-y: 1rem;
    --packs-card-pad-x: .92rem;
    --packs-card-pad-bottom: 1.02rem;
  }

  #packs .pack-card{
    border-radius: var(--tlv2-pack-card-radius, 16px);
  }
  #packs .pack-card::before{
    content: none;
  }
  #packs .pack-card--featured::before{
    border-radius: var(--tlv2-pack-card-radius, 16px) 0 0 var(--tlv2-pack-card-radius, 16px);
  }
  #packs .pack-title{
    font-size: 1.1rem;
  }
  #packs .pack-price-main{
    font-size: var(--fs-pack-price, clamp(1.35rem, 1.15rem + .7vw, 1.9rem));
  }
}


/* -------------------------------------------------------------------------- */
/* 14) F2-P1.c — sweep corto de consistencia visual sistémica (markup-safe)   */
/* - Unifica geometrías (pills/cards) y micro-ritmo entre bloques F2 cerrados. */
/* - No toca wiring / render / state / inspector.                              */
/* -------------------------------------------------------------------------- */

:is(#problema, #promesa, #faq, #garantia, #packs, #testimonios){
  --f2p1c-pill-radius: 999px;
  --f2p1c-pill-pad-y: .34rem;
  --f2p1c-pill-pad-x: .72rem;
  --f2p1c-pill-border-soft: color-mix(in oklch, var(--role-border-color, rgba(0,0,0,.14)) 56%, var(--role-accent, oklch(0.72 0.09 240)) 20%);
  --f2p1c-pill-highlight: inset 0 1px 0 rgba(255,255,255,.34);
  --f2p1c-card-radius: var(--role-card-radius, clamp(16px, 1.05vw, 18px));
  --f2p1c-card-border-soft: color-mix(in oklch, var(--role-border-color, rgba(0,0,0,.14)) 56%, var(--role-accent, oklch(0.72 0.09 240)) 18%);
  --f2p1c-card-inset-highlight: inset 0 1px 0 rgba(255,255,255,.08);
}

/* Cards/list-items: misma familia geométrica base, pero N3.3 ya separa
   neutral / featured / gradient por familias reales de runtime.
   Nota 2026-03-17: `#problema .list li` queda fuera; Problema usa lista editorial, no familia card. */
#faq .faq-item,
#packs .pack-card,
#testimonios .testimonial{
  border-radius: var(--f2p1c-card-radius);
  --f2p1c-card-highlight-active: var(--tlv2-card-highlight, var(--faq-card-highlight, var(--f2p1c-card-inset-highlight)));
}


/* Testimonios: baja ruido visual y mejora paridad con el resto del sistema */
#testimonios .testimonial::before{
  opacity: .7;
}
#testimonios .testimonial blockquote::before{
  top: -.12rem;
  left: .04rem;
  opacity: .78;
}

/* Packs: CTA internos con altura consistente respecto a CTAs del sistema */
#packs [data-consumption-contract="vc1b-packs-card-v0.2"] .cta-group[data-shared-cta-grammar="pair"] .cta{
  min-height: 44px;
  font-weight: 600;
}

@media (max-width: 767px){
  #faq .faq-item,
  #packs .pack-card,
  #testimonios .testimonial{
    border-radius: var(--role-card-radius, 16px);
  }
}

#packs .pack-card[data-pack-variant="standard"] .pack-badge{
  display: none;
}


/* =========================================================
   FDN-S17 / FDN-S18 — Section Roots + Foreground Context
   Scope: roots declaradas + publication de foreground contextual.
   Regla:
   - la especie sigue viniendo del DOM/helper central;
   - la root publica contexto de foreground/chrome;
   - cards / badges / secondary buttons lo consumen sin mini-painters locales.
   ========================================================= */
:is(#hero, #cta-final, #garantia, #problema, #promesa, #faq, #ingredientes, #beneficios, #testimonios, #packs)[data-surface-slot="section-root"]{
  border-radius: 0;
  box-shadow: none;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

:is(#hero, #cta-final, #garantia, #problema, #promesa, #faq, #ingredientes, #beneficios, #testimonios, #packs)[data-surface-slot="section-root"][data-surface-species="surface-base"]{
  background-color: color-mix(in oklch, var(--role-surface-base, #fff) 92%, var(--tlv2-root-accent-source, var(--role-surface-section, var(--role-surface-base, #fff))) 8%);
  background-image: linear-gradient(180deg, color-mix(in oklch, var(--role-surface-base, #fff) 97%, white 3%) 0%, color-mix(in oklch, var(--role-surface-base, #fff) 86%, var(--tlv2-root-accent-source, var(--role-surface-section, var(--role-surface-base, #fff))) 14%) 100%);
  box-shadow: var(--tlv2-root-shell-seam-top, inset 0 1px 0 color-mix(in oklch, white 18%, transparent)), var(--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));
  /* F7-B1 — surface-base deja de duplicar recetas por sección: usa una lectura shared
     de materialidad y solo permite modular la fuente de acento cuando el bench lo exige. */
  --role-context-surface: color-mix(in oklch, var(--role-surface-base, #fff) 92%, var(--tlv2-root-accent-source, var(--role-surface-section, var(--role-surface-base, #fff))) 8%);
  --role-context-on: var(--role-on-surface, var(--color-text-0, #111827));
  --role-context-on-muted: var(--role-on-surface-muted, var(--color-text-muted, #6b7280));
  --role-context-heading: var(--role-context-on);
  --role-context-body: var(--role-context-on);
  --role-context-border: color-mix(in oklch, var(--role-border-color, rgba(0,0,0,.12)) 76%, var(--tlv2-root-accent-source, var(--role-surface-section, var(--role-surface-base, #fff))) 24%);
  --role-context-divider: color-mix(in oklch, var(--role-context-border) 62%, transparent);
}

#hero[data-surface-slot="section-root"][data-surface-species="surface-base"]{
  --tlv2-root-accent-source: var(--role-primary, var(--role-accent, oklch(0.72 0.09 240)));
}

#packs[data-surface-slot="section-root"][data-surface-species="surface-base"]{
  --tlv2-root-accent-source: color-mix(in oklch, var(--role-primary, oklch(0.62 0.13 210)) 72%, var(--role-accent, oklch(0.70 0.12 70)) 28%);
}

#garantia[data-surface-slot="section-root"][data-surface-species="surface-base"]{
  --tlv2-root-accent-source: color-mix(in oklch, var(--role-primary, oklch(0.62 0.13 210)) 44%, var(--role-accent, oklch(0.70 0.12 70)) 56%);
}

#cta-final[data-surface-slot="section-root"][data-surface-species="surface-base"]{
  --tlv2-root-accent-source: color-mix(in oklch, var(--role-primary, oklch(0.62 0.13 210)) 56%, var(--role-accent, oklch(0.70 0.12 70)) 44%);
}

:is(#hero, #cta-final, #garantia, #problema, #promesa, #faq, #ingredientes, #beneficios, #testimonios, #packs)[data-surface-slot="section-root"][data-surface-species="surface-section"]{
  background-color: color-mix(in oklch, var(--role-surface-section, var(--role-surface-base, #fff)) 97%, var(--tlv2-root-accent-source, var(--role-primary, var(--role-accent, var(--role-surface-base, #fff)))) 3%);
  background-image: linear-gradient(180deg, color-mix(in oklch, var(--role-surface-section, var(--role-surface-base, #fff)) 98%, white 2%) 0%, color-mix(in oklch, var(--role-surface-section, var(--role-surface-base, #fff)) 94%, var(--tlv2-root-accent-source, var(--role-primary, var(--role-accent, var(--role-surface-base, #fff)))) 6%) 100%);
  box-shadow: var(--tlv2-root-shell-seam-top, inset 0 1px 0 color-mix(in oklch, white 18%, transparent)), var(--tlv2-root-shell-seam-bottom, inset 0 -1px 0 color-mix(in oklch, var(--role-border-color, rgba(0,0,0,.12)) 18%, transparent));
  --role-context-surface: color-mix(in oklch, var(--role-surface-section, var(--role-surface-base, #fff)) 97%, var(--tlv2-root-accent-source, var(--role-primary, var(--role-accent, var(--role-surface-base, #fff)))) 3%);
  --role-context-on: var(--role-shell-foreground, var(--role-on-surface, var(--color-text-0)));
  --role-context-on-muted: var(--role-shell-muted, var(--role-on-surface-muted, var(--color-text-muted)));
  --role-context-heading: var(--role-context-on);
  --role-context-body: var(--role-context-on);
  --role-context-border: color-mix(in oklch, var(--role-shell-border, var(--role-border-color, rgba(0,0,0,.12))) 76%, transparent);
  --role-context-divider: color-mix(in oklch, var(--role-context-border) 62%, transparent);
}



/* =========================================================
   F5-S9 — Eyebrow/Badge family authority closeout
   Regla: eyebrow/badge consume el rail shared publicado por
   components-map.css + base.css. No se vuelve a cero el borde
   en landing.css porque eso crea doble verdad frente al cert
   y al painter shared real.
   ========================================================= */

/* =========================================================
   Guardrail — Chip/Marker neutral foreground in root contexts
   Scope: problema-marker + beneficio-badge.
   Reason: when shell dark calibration moves context-on-elevated,
   these consumers stay anchored to root foreground while the
   chip/marker family keeps a stable shared contract for QA/runtime.
   ========================================================= */
#problema[data-surface-slot="section-root"],
#beneficios[data-surface-slot="section-root"]{
  --role-context-chip-neutral-foreground: var(--role-context-on, var(--role-on-surface, var(--color-text-0, #111827)));
  --role-context-chip-neutral-foreground-hover: var(--role-context-chip-neutral-foreground);
  --role-context-chip-neutral-foreground-active: var(--role-context-chip-neutral-foreground);
}
:is(#hero, #cta-final, #garantia, #problema, #promesa, #faq, #ingredientes, #beneficios, #testimonios, #packs)[data-surface-slot="section-root"][data-surface-species="surface-elevated"]{
  background-color: color-mix(in oklch, var(--role-surface-elevated, #fff) 96%, var(--tlv2-root-accent-source, var(--role-primary, var(--role-accent, var(--role-surface-base, #fff)))) 4%);
  background-image: linear-gradient(180deg, color-mix(in oklch, var(--role-surface-elevated, #fff) 98%, white 2%) 0%, color-mix(in oklch, var(--role-surface-elevated, #fff) 94%, var(--tlv2-root-accent-source, var(--role-primary, var(--role-accent, var(--role-surface-base, #fff)))) 6%) 100%);
  box-shadow: var(--tlv2-root-shell-seam-top, inset 0 1px 0 color-mix(in oklch, white 18%, transparent)), var(--tlv2-root-shell-seam-bottom, inset 0 -1px 0 color-mix(in oklch, var(--role-border-color, rgba(0,0,0,.12)) 18%, transparent));
  --role-context-surface: color-mix(in oklch, var(--role-surface-elevated, #fff) 96%, var(--tlv2-root-accent-source, var(--role-primary, var(--role-accent, var(--role-surface-base, #fff)))) 4%);
  --role-context-on: var(--role-shell-foreground, var(--role-on-elevated, var(--role-on-surface, var(--color-text-0))));
  --role-context-on-muted: var(--role-shell-muted, var(--role-context-on-elevated-muted, var(--role-on-surface-muted, var(--color-text-muted))));
  --role-context-heading: var(--role-context-on);
  --role-context-body: var(--role-context-on);
  --role-context-elevated-surface: color-mix(
    in oklch,
    var(--role-surface-elevated, #fff) 98%,
    white 2%
  );
  --role-context-elevated-surface-2: var(--role-surface-family-surface-2, var(--role-context-elevated-surface));
}

:where(main.tlv2-page) [data-surface-slot="panel-local"][data-surface-species="surface-panel-local"]{
  background-color: var(--tlv2-panel-local-surface, var(--role-surface-family-surface, var(--role-surface-elevated, #fff)));
  background-image: linear-gradient(180deg, var(--tlv2-panel-local-surface, var(--role-surface-family-surface, var(--role-surface-elevated, #fff))) 0%, var(--tlv2-panel-local-surface-2, var(--tlv2-panel-local-surface, var(--role-surface-family-surface, var(--role-surface-elevated, #fff)))) 100%);
  border: 1px solid var(--tlv2-panel-local-border, var(--role-surface-family-border, rgba(0,0,0,.12)));
  box-shadow: var(--tlv2-panel-local-highlight, inset 0 1px 0 color-mix(in oklch, white 24%, transparent)), var(--tlv2-panel-local-shadow, none);
}

#hero .hero-media[data-surface-slot="panel-local"][data-surface-species="surface-panel-local"]{
  --role-context-surface: var(--tlv2-panel-local-surface, var(--role-surface-family-surface, var(--role-surface-elevated, #fff)));
  --role-context-on: var(--role-on-elevated, var(--role-shell-foreground, var(--role-on-surface, var(--color-text-0))));
  --role-context-on-muted: var(--role-context-on-elevated-muted, var(--role-shell-muted, var(--role-on-surface-muted, var(--color-text-muted))));
  --role-context-heading: var(--role-context-on);
  --role-context-body: var(--role-context-on);
  --role-context-border: var(--tlv2-panel-local-border, var(--role-surface-family-border, rgba(0,0,0,.12)));
  --role-context-elevated-surface: var(--tlv2-panel-local-surface-2, var(--role-surface-family-surface-2, var(--role-surface-elevated, #fff)));
  --role-context-elevated-surface-2: color-mix(
    in oklch,
    var(--role-context-elevated-surface) 96%,
    white 4%
  );
  --role-context-on-elevated: var(--role-on-elevated, var(--role-context-on));
  --role-context-on-elevated-muted: color-mix(
    in oklch,
    var(--role-context-on-elevated) 92%,
    var(--role-context-elevated-surface) 8%
  );
  background: transparent;
  background-image: none;
  border: 0;
  box-shadow: none;
}


/* =========================================================
   CC-P1 — Piloto runtime cromático reducido
   Scope: hero / problema / beneficios
   Regla:
   - no abre theming libre ni pseudo-theme por bloque;
   - traduce el contexto cromático superior a variables de componente pilotables;
   - deja diagnostics visibles para QA sin tocar runtime PHP.
   ========================================================= */
#hero[data-surface-slot="section-root"]{
  --cc-p1-hero-shell-surface: var(--role-context-surface, var(--role-surface-base, var(--role-surface, #fff)));
  --cc-p1-hero-heading: var(--tlv2-root-copy-heading);
  --cc-p1-hero-body: var(--tlv2-root-copy-body, var(--cc-p1-hero-heading));
  --cc-p1-hero-muted: var(--tlv2-root-copy-muted, var(--cc-p1-hero-body));
  --cc-p1-hero-media-frame-fill: var(--role-hero-media-frame-fill, var(--role-accent, oklch(0.695801 0.204286 43.4883 / 0.98)));
}

#hero .section-title{
  color: var(--cc-p1-hero-heading, var(--role-heading-color, inherit));
}

#hero .section-subtitle,
#hero .hero-microcopy{
  color: var(--cc-p1-hero-muted, var(--role-muted-color, var(--tlv2-muted)));
}

#hero .hero-body,
#hero .hero-bullet{
  color: var(--cc-p1-hero-body, var(--role-body-color, inherit));
}

#hero .hero-media{
  --hero-media-frame-fill: var(--cc-p1-hero-media-frame-fill, var(--role-hero-media-frame-fill, var(--role-accent, oklch(0.695801 0.204286 43.4883 / 0.98))));
}

#problema[data-surface-slot="section-root"]{
  --cc-p1-problema-shell-surface: var(--role-context-surface, var(--f2p1b-surface, var(--role-surface-section, var(--role-surface, #fff))));
  --cc-p1-problema-heading: var(--tlv2-root-copy-heading);
  --cc-p1-problema-body: var(--tlv2-root-copy-body, var(--cc-p1-problema-heading));
  --cc-p1-problema-muted: var(--tlv2-root-copy-muted, var(--cc-p1-problema-body));
  --cc-p1-problema-divider: var(--tlv2-chrome-divider, var(--role-context-divider-color, var(--f2p1b-border-soft)));
  --problema-item-divider: var(--cc-p1-problema-divider);
}

#problema .section-title{
  color: var(--cc-p1-problema-heading, var(--role-heading-color, inherit));
}

#problema .section-subtitle{
  color: var(--cc-p1-problema-muted, var(--f2p1b-lead-color));
}

#problema [data-role="body"],
#problema .problema-body{
  color: var(--cc-p1-problema-body, var(--f2p1b-lead-color));
}

#beneficios[data-surface-slot="section-root"]{
  --cc-p1-beneficios-shell-surface: var(--role-context-surface, var(--role-surface-section, var(--role-surface, #fff)));
  --cc-p1-beneficios-heading: var(--tlv2-root-copy-heading);
  --cc-p1-beneficios-body: var(--tlv2-root-copy-body, var(--cc-p1-beneficios-heading));
  --cc-p1-beneficios-muted: var(--tlv2-root-copy-muted, var(--cc-p1-beneficios-body));
  --role-context-card-shell-surface: var(--cc-p1-beneficios-shell-surface);
  --role-context-card-shell-border: var(--role-shell-border, var(--role-border-color, rgba(0,0,0,.14)));
  --cc-p1-beneficios-card-surface: var(--role-context-card-neutral-surface, var(--role-surface-elevated, #fff));
  --cc-p1-beneficios-card-border: var(--role-context-card-neutral-border, var(--role-border-color, rgba(0,0,0,.14)));
  --cc-p1-beneficios-card-shadow-core: var(--role-context-card-neutral-shadow, 0 14px 34px rgba(12, 18, 28, .08));
  --cc-p1-beneficios-card-shadow-hover-core: var(--role-context-card-neutral-shadow-hover, 0 18px 42px rgba(12, 18, 28, .12));
  --cc-p1-beneficios-card-highlight: var(--role-context-card-neutral-highlight, inset 0 1px 0 rgba(255,255,255,.08));
  --cc-p1-beneficios-chip-surface: var(--role-context-chip-neutral-surface, var(--role-context-panel-neutral-surface, var(--role-surface-family-surface, #fff)));
  --cc-p1-beneficios-chip-border: var(--role-context-chip-neutral-border, var(--role-context-panel-neutral-border, var(--role-border-color, rgba(0,0,0,.12))));
  --cc-p1-beneficios-chip-foreground: var(--role-context-chip-neutral-foreground, var(--role-context-on, var(--role-on-surface, currentColor)));
  --beneficios-surface: var(--cc-p1-beneficios-shell-surface);
  --beneficios-surface-card: var(--cc-p1-beneficios-card-surface);
  --beneficios-border: var(--cc-p1-beneficios-card-border);
  --beneficios-shadow: var(--cc-p1-beneficios-card-highlight), var(--cc-p1-beneficios-card-shadow-core);
  --beneficios-shadow-hover: var(--cc-p1-beneficios-card-highlight), var(--cc-p1-beneficios-card-shadow-hover-core);
  --beneficios-muted: var(--cc-p1-beneficios-muted);
  --beneficios-text: var(--cc-p1-beneficios-body);
}

#beneficios .section-title{
  color: var(--cc-p1-beneficios-heading, var(--beneficios-text));
}

#beneficios .section-subtitle,
#beneficios .beneficios-microcopy{
  color: var(--cc-p1-beneficios-muted, var(--beneficios-muted));
}

#beneficios .beneficios-body{
  color: color-mix(in oklch, var(--cc-p1-beneficios-body, var(--beneficios-text)) 88%, var(--cc-p1-beneficios-muted, var(--beneficios-muted)) 12%);
}

#beneficios .beneficio .beneficio-icon{
  /* CARD-CONSUMER-BENEFICIOS-04 — icon shell contenido por card; no hereda shell de sección cuando la card es oscura. */
  border: 1px solid var(--tlv2-card-icon-shell-border, var(--tlv2-icon-shell-border, var(--cc-p1-beneficios-chip-border, var(--role-context-chip-neutral-border))));
  background-color: var(--tlv2-card-icon-shell-surface, var(--tlv2-icon-shell-surface, var(--cc-p1-beneficios-chip-surface, var(--role-context-chip-neutral-surface))));
  color: var(--tlv2-card-icon-shell-foreground, var(--tlv2-card-family-heading, var(--cc-p1-beneficios-heading, var(--tlv2-copy-heading, var(--role-context-chip-neutral-foreground)))));
  box-shadow: var(--tlv2-card-icon-shell-highlight, var(--tlv2-icon-shell-highlight, inset 0 1px 0 rgba(255,255,255,.10))), var(--tlv2-card-icon-shell-shadow, var(--tlv2-icon-shell-shadow, 0 10px 22px -20px color-mix(in oklch, black 36%, transparent)));
}

#beneficios .beneficio .beneficio-icon{
  border-color: var(--tlv2-card-icon-shell-border) !important;
  background-color: var(--tlv2-card-icon-shell-surface) !important;
  color: var(--tlv2-card-icon-shell-foreground) !important;
  box-shadow: var(--tlv2-card-icon-shell-highlight, inset 0 1px 0 rgba(255,255,255,.10)), var(--tlv2-card-icon-shell-shadow, none) !important;
}



/* =========================================================
   CC-P2 — Segundo piloto runtime cromático reducido
   Scope: promesa / ingredientes / testimonios
   Regla:
   - extiende la Política Cromática Canónica a un segundo lote sin reabrir CC-P1;
   - reutiliza context roles válidos y recipes locales existentes del bloque;
   - deja diagnostics visibles para QA sin tocar PHP.
   ========================================================= */
#promesa[data-surface-slot="section-root"]{
  --cc-p2-promesa-shell-surface: var(--role-context-surface, var(--f2p1b-surface, var(--role-surface-section, var(--role-surface, #fff))));
  --cc-p2-promesa-heading: var(--tlv2-root-copy-heading);
  --cc-p2-promesa-body: var(--tlv2-root-copy-body, var(--cc-p2-promesa-heading));
  --cc-p2-promesa-muted: var(--tlv2-root-copy-muted, var(--cc-p2-promesa-body));
  --f2p1b-surface: var(--cc-p2-promesa-shell-surface);
}

#promesa .section-title{
  color: var(--cc-p2-promesa-heading, var(--role-heading-color, inherit));
}

#promesa .section-subtitle{
  color: var(--cc-p2-promesa-muted, var(--f2p1b-lead-color));
}

#promesa .tlv2-split-media__body--promesa[data-role="body"],
#promesa .tlv2-split-media__body--promesa[data-role="body"] p{
  color: var(--cc-p2-promesa-body, var(--f2p1b-lead-color));
}

#promesa .tlv2-split-media__body--promesa[data-role="body"]{
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}

#ingredientes[data-surface-slot="section-root"]{
  --cc-p2-ingredientes-shell-surface: var(--role-context-surface, var(--ingredientes-surface, var(--role-surface-section, var(--role-surface, #fff))));
  --cc-p2-ingredientes-heading: var(--tlv2-root-copy-heading);
  --cc-p2-ingredientes-body: var(--tlv2-root-copy-body, var(--cc-p2-ingredientes-heading));
  --cc-p2-ingredientes-muted: var(--tlv2-root-copy-muted, var(--cc-p2-ingredientes-body));
  --role-context-card-shell-surface: var(--cc-p2-ingredientes-shell-surface);
  --role-context-card-shell-border: var(--ingredientes-border);
  --cc-p2-ingredientes-card-surface: var(--role-context-card-neutral-surface, var(--role-surface-elevated, #fff));
  --cc-p2-ingredientes-card-border: var(--role-context-card-neutral-border, var(--ingredientes-border));
  --cc-p2-ingredientes-card-shadow-core: var(--role-context-card-neutral-shadow, var(--ingredientes-shadow));
  --cc-p2-ingredientes-card-shadow-hover-core: var(--role-context-card-neutral-shadow-hover, var(--ingredientes-shadow-hover));
  --cc-p2-ingredientes-card-highlight: var(--role-context-card-neutral-highlight, inset 0 1px 0 rgba(255,255,255,.08));
  --cc-p2-ingredientes-chip-surface: var(--role-context-chip-neutral-surface, var(--role-context-panel-neutral-surface, var(--role-surface-family-surface, #fff)));
  --cc-p2-ingredientes-chip-border: var(--role-context-chip-neutral-border, var(--role-context-panel-neutral-border, var(--role-border-color, rgba(0,0,0,.12))));
  --cc-p2-ingredientes-chip-foreground: var(--role-context-chip-neutral-foreground, var(--role-context-on, var(--role-on-surface, currentColor)));
  --ingredientes-surface: var(--cc-p2-ingredientes-shell-surface);
  --ingredientes-surface-card: var(--cc-p2-ingredientes-card-surface);
  --ingredientes-border: var(--cc-p2-ingredientes-card-border);
  --ingredientes-shadow: var(--cc-p2-ingredientes-card-highlight), var(--cc-p2-ingredientes-card-shadow-core);
  --ingredientes-shadow-hover: var(--cc-p2-ingredientes-card-highlight), var(--cc-p2-ingredientes-card-shadow-hover-core);
  --ingredientes-muted: var(--cc-p2-ingredientes-muted);
  --ingredientes-text: var(--cc-p2-ingredientes-body);
}

#ingredientes .section-title{
  color: var(--cc-p2-ingredientes-heading, var(--ingredientes-text));
}

#ingredientes .section-subtitle,
#ingredientes .ingredientes-microcopy{
  color: var(--cc-p2-ingredientes-muted, var(--ingredientes-muted));
}

#ingredientes .ingredientes-body{
  color: color-mix(in oklch, var(--cc-p2-ingredientes-body, var(--ingredientes-text)) 88%, var(--cc-p2-ingredientes-muted, var(--ingredientes-muted)) 12%);
}

#ingredientes .list > li .ingrediente-icon,
#ingredientes .ingrediente .ingrediente-icon{
  /* CARD-CONSUMER-INGREDIENTES-04 — icon shell contenido por card; usa shell derivado de la family de card. */
  border-color: var(--tlv2-card-icon-shell-border, var(--tlv2-icon-shell-border, var(--cc-p2-ingredientes-chip-border, var(--role-context-chip-neutral-border))));
  background-color: var(--tlv2-card-icon-shell-surface, var(--tlv2-icon-shell-surface, var(--cc-p2-ingredientes-chip-surface, var(--role-context-chip-neutral-surface))));
  color: var(--tlv2-card-icon-shell-foreground, var(--tlv2-card-family-heading, var(--cc-p2-ingredientes-heading, var(--tlv2-copy-heading, var(--role-context-chip-neutral-foreground)))));
  box-shadow: var(--tlv2-card-icon-shell-highlight, var(--tlv2-icon-shell-highlight, inset 0 1px 0 rgba(255,255,255,.10))), var(--tlv2-card-icon-shell-shadow, var(--tlv2-icon-shell-shadow, 0 10px 22px -20px color-mix(in oklch, black 36%, transparent)));
}

#ingredientes .list > li .ingrediente-icon,
#ingredientes .ingrediente .ingrediente-icon{
  border-color: var(--tlv2-card-icon-shell-border) !important;
  background-color: var(--tlv2-card-icon-shell-surface) !important;
  color: var(--tlv2-card-icon-shell-foreground) !important;
  box-shadow: var(--tlv2-card-icon-shell-highlight, inset 0 1px 0 rgba(255,255,255,.10)), var(--tlv2-card-icon-shell-shadow, none) !important;
}

#testimonios[data-surface-slot="section-root"]{
  --cc-p2-testimonios-shell-surface: var(--role-context-surface, var(--role-surface-section, var(--role-surface, #fff)));
  --cc-p2-testimonios-heading: var(--tlv2-root-copy-heading);
  --cc-p2-testimonios-body: var(--tlv2-root-copy-body, var(--cc-p2-testimonios-heading));
  --cc-p2-testimonios-muted: var(--tlv2-root-copy-muted, var(--cc-p2-testimonios-body));
  /* TESTIMONIOS-NEUTRAL-PLUS-01 — misma family base; solo quote/meta-rail conservan identidad editorial. */
  --role-context-card-shell-surface: var(--cc-p2-testimonios-shell-surface);
  --role-context-card-shell-border: color-mix(in oklch, var(--role-border-color, rgba(0,0,0,.14)) 58%, transparent);
  --cc-p2-testimonios-card-surface: var(--tlv2-card-surface, var(--role-context-card-neutral-surface, var(--role-surface-elevated, #fff)));
  --cc-p2-testimonios-card-surface-2: var(--tlv2-card-surface-2, var(--cc-p2-testimonios-card-surface));
  --cc-p2-testimonios-card-border: var(--tlv2-card-border, var(--role-context-card-neutral-border, color-mix(in oklch, var(--role-border-color, rgba(0,0,0,.14)) 58%, transparent)));
  --cc-p2-testimonios-card-shadow-core: var(--tlv2-card-shadow, 0 10px 22px -18px color-mix(in oklch, black 18%, transparent), 0 2px 5px -3px color-mix(in oklch, black 10%, transparent));
  --cc-p2-testimonios-card-highlight: var(--tlv2-card-highlight, var(--tlv2-card-family-highlight, inset 0 1px 0 rgba(255,255,255,.08)));
  --testi-card-surface: var(--cc-p2-testimonios-card-surface);
  --testi-card-surface-2: var(--cc-p2-testimonios-card-surface-2);
  --testi-card-border: var(--cc-p2-testimonios-card-border);
  --testi-card-shadow: var(--cc-p2-testimonios-card-shadow-core);
}

#testimonios .section-subtitle,
#testimonios .testimonios-body{
  color: var(--tlv2-copy-muted, var(--cc-p2-testimonios-muted, var(--role-muted-color, var(--tlv2-muted))));
}

#testimonios .testimonial{
}

#testimonios .testimonial blockquote::before{
  color: var(--tlv2-testimonial-quote-ornament, var(--tlv2-card-copy-emphasis, var(--tlv2-testimonial-copy-heading, currentColor)));
}

#testimonios .testimonial-meta::before{
  background: var(--tlv2-testimonial-meta-rail, color-mix(in oklch, var(--testi-card-border, var(--tlv2-card-border, var(--role-border-color, rgba(0,0,0,.14)))) 72%, transparent));
}





/* PM2-A.1 — compactación ligera de shell split-media para cierre visual cross-family */
/* VA-P2 — Problema/Promesa split-media v0.2
   - Desktop: grid real de 2 columnas (`copy-shell` + `media-shell`)
   - Mobile: `copy-shell` usa `display: contents` para preservar `mobile_media_anchor`
   - Diferencias entre bloques viven en adapters sobre `--layout-split-*`, no en una autoridad paralela */
:is(#problema, #promesa){
  --cmf-shell-inline-max: var(--layout-split-shell-standard-max, min(1040px, 100%));
  --cmf-copy-shell-inline-max: var(--layout-split-copy-shell-max, min(36rem, 100%));
  --cmf-copy-measure: var(--cmf-copy-shell-inline-max);
  --cmf-copy-title-max: var(--measure-title-compact, var(--f2p1b-title-max));
  --cmf-copy-subtitle-max: var(--measure-section-subtitle, var(--f2p1b-subtitle-max));
  --cmf-copy-body-max: min(var(--cmf-copy-shell-inline-max), var(--measure-section-body-wide, 100%));
  --cmf-copy-tail-max: min(var(--cmf-copy-measure), var(--measure-section-body-wide, 100%));
  --cmf-region-gap: var(--f2p1b-section-gap, var(--tlv2-gap-y));
  --cmf-media-gap: var(--layout-split-gap, clamp(1.15rem, 1.8vw, 2rem));
  --cmf-media-col-min: 292px;
  --va-p2-media-col-min: var(--cmf-media-col-min);
  --va-p2-media-gap: var(--cmf-media-gap);
  --va-p2-copy-shell-max: var(--cmf-copy-shell-inline-max);
  --va-p2-shell-max: var(--cmf-shell-inline-max);
  --va-p2-copy-shell-gap: clamp(1rem, 1.5vw, 1.45rem);
  --va-p2-copy-measure: var(--cmf-copy-measure);
  --va-p2-body-measure: var(--cmf-copy-body-max);
  --va-p2-tail-measure: var(--cmf-copy-tail-max);
  --va-p2-media-stage-max-compact: clamp(248px, 26vw, 328px);
  --va-p2-media-stage-max-standard: clamp(292px, 31vw, 388px);
  --va-p2-media-stage-max-wide: clamp(328px, 34vw, 436px);
  --va-p2-media-stage-max-mobile-compact: clamp(214px, 68vw, 292px);
  --va-p2-media-stage-max-mobile-standard: clamp(236px, 74vw, 320px);
  --va-p2-media-stage-max-mobile-wide: clamp(258px, 80vw, 344px);
  --va-p2-media-ratio-square: 1 / 1;
  --va-p2-media-ratio-portrait: 4 / 5;
  --va-p2-media-ratio-landscape: 5 / 4;
  --va-p2-media-object-fit-contain: contain;
  --va-p2-media-object-fit-cover: cover;
  --va-p2-media-stage-max-current: var(--va-p2-media-stage-max-standard);
  --va-p2-media-stage-max-mobile-current: var(--va-p2-media-stage-max-mobile-standard);
  --cmf-media-stage-inline-max: var(--va-p2-media-stage-max-current);
  --cmf-media-stage-inline-max-mobile: var(--va-p2-media-stage-max-mobile-current);
  --va-p2-media-figure-ratio-current: var(--va-p2-media-ratio-square);
  --va-p2-media-object-fit-current: var(--va-p2-media-object-fit-contain);
  --va-p2-media-radius: var(--tlv2-card-radius, clamp(16px, 1.15vw, 20px));
  --cmf-media-radius: var(--va-p2-media-radius);
  --va-p2-media-border: 1px solid color-mix(in oklch, var(--f2p1b-border-soft) 68%, transparent);
  --va-p2-media-shadow: none;
  --va-p2-media-surface: linear-gradient(180deg, color-mix(in oklch, var(--f2p1b-surface-elev) 97%, white 3%), var(--f2p1b-surface-elev));
  --cmf-media-frame-fill: var(--va-p2-media-surface);
  --va-p2-media-frame-pad-tight: 3px;
  --va-p2-media-frame-pad-soft: 8px;
  --va-p2-media-frame-pad-effective: var(--va-p2-media-frame-pad-tight);
}

#problema{
  --cmf-shell-inline-max: min(1070px, var(--layout-split-shell-standard-max, 100%));
  --cmf-media-gap: clamp(1.3rem, 2.05vw, 2.4rem);
  --cmf-copy-shell-inline-max: min(37.75rem, var(--layout-split-copy-shell-max, 100%));
  --cmf-copy-measure: var(--cmf-copy-shell-inline-max);
  --cmf-copy-body-max: min(37rem, var(--measure-section-body-wide, 100%));
  --cmf-copy-tail-max: min(var(--cmf-copy-shell-inline-max), var(--measure-section-body-wide, 100%));
}

#promesa{
  --cmf-shell-inline-max: var(--layout-split-shell-compact-max, min(980px, 100%));
  --cmf-media-gap: var(--layout-split-gap, clamp(1rem, 1.6vw, 1.7rem));
  --cmf-copy-shell-inline-max: min(32.75rem, var(--layout-split-copy-shell-max, 100%));
  --cmf-copy-measure: var(--cmf-copy-shell-inline-max);
  --cmf-copy-body-max: min(31.25rem, var(--measure-section-body-wide, 100%));
  --cmf-copy-tail-max: min(var(--cmf-copy-shell-inline-max), var(--measure-section-body-wide, 100%));
}

:is(#problema, #promesa) .tlv2-split-media{
  display: grid;
  gap: var(--cmf-media-gap, var(--va-p2-media-gap));
  inline-size: min(100%, var(--cmf-shell-inline-max, var(--va-p2-shell-max)));
  margin-inline: auto;
  --cmf-media-stage-inline-max: var(--va-p2-media-stage-max-current);
  --cmf-media-stage-inline-max-mobile: var(--va-p2-media-stage-max-mobile-current);
  --tlv2-split-media-radius: var(--cmf-media-radius, var(--va-p2-media-radius));
  --tlv2-split-media-frame-fill: var(--cmf-media-frame-fill, var(--va-p2-media-surface));
}

:is(#problema, #promesa) .tlv2-split-media[data-media-frame-scale="compact"]{
  --va-p2-media-stage-max-current: var(--va-p2-media-stage-max-compact);
  --va-p2-media-stage-max-mobile-current: var(--va-p2-media-stage-max-mobile-compact);
}
:is(#problema, #promesa) .tlv2-split-media[data-media-frame-scale="wide"]{
  --va-p2-media-stage-max-current: var(--va-p2-media-stage-max-wide);
  --va-p2-media-stage-max-mobile-current: var(--va-p2-media-stage-max-mobile-wide);
}
:is(#problema, #promesa) .tlv2-split-media[data-media-frame-ratio="portrait"]{
  --va-p2-media-figure-ratio-current: var(--va-p2-media-ratio-portrait);
}
:is(#problema, #promesa) .tlv2-split-media[data-media-frame-ratio="landscape"]{
  --va-p2-media-figure-ratio-current: var(--va-p2-media-ratio-landscape);
}
:is(#problema, #promesa) .tlv2-split-media[data-media-content-fit="cover"]{
  --va-p2-media-object-fit-current: var(--va-p2-media-object-fit-cover);
}

:is(#problema, #promesa) .tlv2-split-media__copy{
  grid-area: copy;
  display: grid;
  gap: var(--va-p2-copy-shell-gap);
  min-width: 0;
  inline-size: min(100%, var(--cmf-copy-shell-inline-max, var(--va-p2-copy-shell-max)));
  align-content: start;
}

:is(#problema, #promesa) .tlv2-split-media__copy > :is(.tlv2-split-media__intro, .tlv2-split-media__body, .tlv2-split-media__tail){
  min-width: 0;
  display: grid;
  gap: var(--cmf-region-gap, var(--f2p1b-section-gap, var(--tlv2-gap-y)));
  align-content: start;
  inline-size: 100%;
}

:is(#problema, #promesa) .tlv2-split-media__intro .section-title{
  max-inline-size: min(var(--cmf-copy-title-max, var(--cmf-copy-measure, var(--va-p2-copy-measure))), 100%);
}

:is(#problema, #promesa) .tlv2-split-media__intro .section-subtitle{
  max-inline-size: min(var(--cmf-copy-subtitle-max, var(--cmf-copy-measure, var(--va-p2-copy-measure))), 100%);
}

:is(#problema, #promesa) .tlv2-split-media__body,
:is(#problema, #promesa) .tlv2-split-media__body > *{
  max-inline-size: min(var(--cmf-copy-body-max, var(--va-p2-body-measure)), 100%);
}

:is(#problema, #promesa) .tlv2-split-media__tail,
:is(#problema, #promesa) .tlv2-split-media__tail > *{
  max-inline-size: min(var(--cmf-copy-tail-max, var(--va-p2-tail-measure)), 100%);
}

#promesa .tlv2-split-media__copy{
  justify-items: start;
  text-align: left;
}

#promesa .tlv2-split-media--text-only .tlv2-split-media__copy{
  justify-items: start;
  text-align: left;
}

#promesa .tlv2-split-media--text-only .tlv2-split-media__body{
  text-align: left;
}

#promesa .tlv2-split-media__body--promesa[data-role="body"]{
  row-gap: var(--f2p1a-body-gap);
  gap: var(--f2p1a-body-gap);
}

:is(#problema, #promesa) .tlv2-split-media__media{
  grid-area: media;
  min-width: 0;
  inline-size: min(100%, var(--cmf-media-stage-inline-max, var(--va-p2-media-stage-max-current)));
  display: grid;
  align-content: center;
  align-self: center;
}

:is(#problema, #promesa) .tlv2-split-media__frame{
  --tlv2-split-media-frame-max-inline: 100%;
  --tlv2-split-media-frame-border: var(--va-p2-media-border);
  --tlv2-split-media-frame-surface: var(--tlv2-split-media-frame-fill);
  --tlv2-split-media-frame-shadow: var(--va-p2-media-shadow);
  --tlv2-split-media-frame-pad-effective: var(--va-p2-media-frame-pad-effective);
}

:is(#problema, #promesa) .tlv2-split-media__frame--stage-tight{
  --va-p2-media-frame-pad-effective: var(--va-p2-media-frame-pad-tight);
}

:is(#problema, #promesa) .tlv2-split-media__frame--stage-soft{
  --va-p2-media-frame-pad-effective: var(--va-p2-media-frame-pad-soft);
}

:is(#problema, #promesa) .tlv2-split-media__frame--stage-blend{
  --va-p2-media-frame-pad-effective: 0px;
  --tlv2-split-media-frame-border: 1px solid transparent;
  --tlv2-split-media-frame-surface: transparent;
  --tlv2-split-media-frame-shadow: none;
}

:is(#problema, #promesa) .tlv2-split-media__figure{
  --tlv2-split-media-figure-ratio: var(--va-p2-media-figure-ratio-current);
  --tlv2-split-media-figure-surface: color-mix(in oklch, var(--f2p1b-surface-elev) 90%, white 10%);
}

:is(#problema, #promesa) .tlv2-split-media__frame--stage-blend .tlv2-split-media__figure{
  --tlv2-split-media-figure-surface: transparent;
}

:is(#problema, #promesa) .tlv2-split-media__img{
  --tlv2-split-media-object-fit: var(--va-p2-media-object-fit-current);
}

:is(#problema, #promesa) .tlv2-split-media__placeholder{
  --tlv2-split-media-placeholder-foreground: var(--tlv2-copy-body, var(--f2p1b-lead-color));
  --tlv2-split-media-placeholder-surface: color-mix(in oklch, var(--f2p1b-surface-elev) 88%, white 12%);
  --tlv2-split-media-placeholder-border: color-mix(in oklch, var(--f2p1b-border-soft) 68%, transparent);
}

@media (min-width: 960px){
  :is(#problema, #promesa) .tlv2-split-media--media-right{
    grid-template-columns: minmax(0, 1fr) minmax(var(--cmf-media-col-min, var(--va-p2-media-col-min)), var(--cmf-media-stage-inline-max, var(--va-p2-media-stage-max-current)));
    grid-template-areas: "copy media";
    align-items: center;
  }

  :is(#problema, #promesa) .tlv2-split-media--media-left{
    grid-template-columns: minmax(var(--cmf-media-col-min, var(--va-p2-media-col-min)), var(--cmf-media-stage-inline-max, var(--va-p2-media-stage-max-current))) minmax(0, 1fr);
    grid-template-areas: "media copy";
    align-items: center;
  }

  :is(#problema, #promesa) .tlv2-split-media--text-only{
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "copy";
  }

  #problema .tlv2-split-media--media-right .tlv2-split-media__copy{ justify-self: start; }
  #problema .tlv2-split-media--media-right .tlv2-split-media__media{ justify-self: end; }
  #problema .tlv2-split-media--media-left .tlv2-split-media__media{ justify-self: start; }
  #problema .tlv2-split-media--media-left .tlv2-split-media__copy{ justify-self: end; }
  #problema .tlv2-split-media--text-only .tlv2-split-media__copy{ justify-self: start; }

  #promesa .tlv2-split-media--media-right .tlv2-split-media__copy{ justify-self: end; }
  #promesa .tlv2-split-media--media-right .tlv2-split-media__media{ justify-self: start; }
  #promesa .tlv2-split-media--media-left .tlv2-split-media__media{ justify-self: end; }
  #promesa .tlv2-split-media--media-left .tlv2-split-media__copy{ justify-self: start; }
  #promesa .tlv2-split-media--text-only .tlv2-split-media__copy{ justify-self: start; }
}

@media (max-width: 959px){
  :is(#problema, #promesa) .tlv2-split-media{
    grid-template-columns: 1fr;
  }

  :is(#problema, #promesa) .tlv2-split-media__copy{
    display: contents;
  }

  :is(#problema, #promesa) .tlv2-split-media__intro{ grid-area: intro; }
  :is(#problema, #promesa) .tlv2-split-media__body{ grid-area: body; }
  :is(#problema, #promesa) .tlv2-split-media__tail{ grid-area: tail; }

  :is(#problema, #promesa) .tlv2-split-media__media{
    inline-size: min(100%, var(--cmf-media-stage-inline-max-mobile, var(--va-p2-media-stage-max-mobile-current)));
    justify-self: center;
  }

  :is(#problema, #promesa) .tlv2-split-media[data-mobile-media-anchor="before-intro"]{
    grid-template-areas:
      "media"
      "intro"
      "body"
      "tail";
  }

  :is(#problema, #promesa) .tlv2-split-media[data-mobile-media-anchor="after-intro"]{
    grid-template-areas:
      "intro"
      "media"
      "body"
      "tail";
  }

  :is(#problema, #promesa) .tlv2-split-media:not([data-mobile-media-anchor]),
  :is(#problema, #promesa) .tlv2-split-media[data-mobile-media-anchor="after-copy"]{
    grid-template-areas:
      "intro"
      "body"
      "tail"
      "media";
  }

  :is(#problema, #promesa) .section-title{ max-inline-size:min(19ch,100%); }
  :is(#problema, #promesa) .tlv2-split-media__intro,
  :is(#problema, #promesa) .tlv2-split-media__body,
  :is(#problema, #promesa) .tlv2-split-media__tail{ inline-size: 100%; }
}



/* =========================================================
   ICON-S1 — Registro canónico de iconos del sistema v0.1
   Base compartida para iconos de item (Beneficios / Ingredientes)
   ========================================================= */
.tlv2-system-icon{
  position: relative;
  overflow: visible;
  isolation: isolate;
}

.tlv2-system-icon svg,
.tlv2-system-icon__svg{
  display: block;
  inline-size: 100%;
  block-size: 100%;
  shape-rendering: geometricPrecision;
  overflow: visible;
  color: inherit;
}

/* ICON-COLOR-CONTRACT-01 — los iconos del registro canónico responden a currentColor. */
.tlv2-system-icon svg *,
.tlv2-system-icon__svg *{
  vector-effect: non-scaling-stroke;
}
.tlv2-system-icon svg [stroke]:not([stroke="none"]),
.tlv2-system-icon__svg [stroke]:not([stroke="none"]){
  stroke: currentColor;
}
.tlv2-system-icon svg [fill]:not([fill="none"]),
.tlv2-system-icon__svg [fill]:not([fill="none"]){
  fill: currentColor;
}

/* VA1-C2 / Lote C — responsive compacto media presentation */
@media (max-width: 767px){
  #beneficios[data-presentation="cards"] .list .beneficio,
  #beneficios .beneficio--presentation-cards{
    gap: clamp(.7rem, 1.8vw + .42rem, .92rem);
    padding: clamp(.9rem, 2vw + .62rem, 1.12rem);
  }
  #beneficios[data-item-media-mode="image"] .beneficio-media-shell,
  #beneficios .beneficio--media-mode-image .beneficio-media-shell,
  #beneficios[data-item-media-mode="mixed"] .beneficio--media-mode-mixed .beneficio-media-shell{
    --beneficios-media-shell-size: clamp(3rem, 8vw, 3.8rem);
  }
  #beneficios[data-presentation="clean"] .list .beneficio,
  #beneficios .beneficio--presentation-clean{
    gap: .78rem;
  }
  #ingredientes[data-presentation="cards"] .ingredientes-grid,
  #ingredientes[data-presentation="cards"] .list{
    grid-template-columns: minmax(0,1fr);
  }
  #ingredientes[data-presentation="cards"] .ingrediente,
  #ingredientes[data-presentation="cards"] .list > li,
  #ingredientes .ingrediente--presentation-cards{
    row-gap: var(--ingredientes-gap-card);
    column-gap: var(--ingredientes-gap-card);
    gap: var(--ingredientes-gap-card);
    padding: clamp(.88rem, 2vw + .6rem, 1.06rem);
  }
  #ingredientes[data-item-media-mode="image"] .ingrediente-media-shell,
  #ingredientes .ingrediente--media-mode-image .ingrediente-media-shell,
  #ingredientes[data-item-media-mode="mixed"] .ingrediente--media-mode-mixed .ingrediente-media-shell{
    --ingredientes-media-shell-size: clamp(3.6rem, 12vw, 4.4rem);
  }
  #ingredientes[data-item-media-mode="image"] .ingrediente-head,
  #ingredientes .ingrediente--media-mode-image .ingrediente-head,
  #ingredientes[data-item-media-mode="mixed"] .ingrediente--media-mode-mixed .ingrediente-head{
    row-gap: .7rem;
  }
  #ingredientes[data-presentation="clean"] .ingrediente-head,
  #ingredientes .ingrediente--presentation-clean .ingrediente-head,
  #ingredientes[data-presentation="clean"] .list > li .ingrediente-head{
    column-gap: .72rem;
  }
}


/* ==========================================================
   VIS-01B — Beneficios + Ingredientes
   Polish visible sobre contrato ya sellado
   ========================================================== */

/* -----------------------------
   BENEFICIOS
   Icon-first · rápido · claro
------------------------------ */
#beneficios{
  --beneficios-gap-card: clamp(.72rem, .34vw + .56rem, .96rem);
  --beneficios-item-pad: clamp(1rem, .72vw + .72rem, 1.22rem);
  --beneficios-copy-gap: clamp(.32rem, .16vw + .22rem, .5rem);
  --beneficios-media-size-icon: clamp(3rem, .9vw + 2.7rem, 3.35rem);
  --beneficios-media-size-image: clamp(3.5rem, 1.2vw + 3rem, 4.4rem);
}

#beneficios .list .beneficio{
  gap: var(--beneficios-gap-card);
}

#beneficios .list .beneficio::before{
  content: none;
}

#beneficios .list .beneficio::after{content:none !important;display:none !important;}

#beneficios .beneficio .beneficio-copy{
  gap: clamp(.3rem, .16vw + .22rem, .48rem);
}

#beneficios .beneficio .beneficio-title,
#beneficios .beneficio h3{
  font-size: var(--fs-card-title, clamp(1rem, 0.56vw + 0.9rem, 1.16rem));
  line-height: var(--lh-card-title, 1.2);
}

#beneficios .beneficio .beneficio-text,
#beneficios .beneficio p:not(.beneficio-badge){
  max-width: var(--measure-card-body-standard, min(54ch, 100%));
  line-height: var(--lh-card-body, 1.55);
}

#beneficios .beneficio .beneficio-badge{
  margin-top: .18rem;
}

#beneficios[data-presentation="cards"] .list .beneficio,
#beneficios .beneficio--presentation-cards{
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  column-gap: clamp(.9rem, .66vw + .6rem, 1.12rem);
  row-gap: var(--beneficios-gap-card);
}

#beneficios[data-presentation="cards"] .list .beneficio,
#beneficios .beneficio--presentation-cards{
  /* ITEM-PRESENTATION-CARDS-CONSUMER-ADOPTION — el item raíz publica rails de card para que title/text hereden foreground de superficie contenida, no del root de sección. */
  --tlv2-card-copy-heading: var(--role-context-card-neutral-heading, var(--role-on-elevated, var(--beneficios-card-heading)));
  --tlv2-card-copy-body: var(--role-context-card-neutral-body, var(--role-on-elevated, var(--beneficios-card-body)));
  --tlv2-card-copy-muted: var(--role-context-card-neutral-muted, var(--beneficios-card-muted));
  --beneficios-card-heading: var(--tlv2-card-copy-heading);
  --beneficios-card-body: var(--tlv2-card-copy-body);
  --beneficios-card-muted: var(--tlv2-card-copy-muted);
}

#beneficios[data-presentation="cards"] .beneficio .beneficio-media,
#beneficios .beneficio--presentation-cards .beneficio-media{
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: start;
}

#beneficios[data-presentation="cards"] .beneficio .beneficio-copy,
#beneficios .beneficio--presentation-cards .beneficio-copy{
  grid-column: 2;
}

#beneficios[data-presentation="clean"] .list .beneficio,
#beneficios .beneficio--presentation-clean{
  grid-template-columns: auto minmax(0,1fr);
  align-items: start;
  column-gap: clamp(.95rem, .8vw + .52rem, 1.25rem);
  row-gap: .22rem;
  padding-block: clamp(.82rem, .36vw + .68rem, .98rem);
}

#beneficios[data-presentation="clean"] .list .beneficio::before,
#beneficios[data-presentation="clean"] .list .beneficio::after,
#beneficios .beneficio--presentation-clean::before,
#beneficios .beneficio--presentation-clean::after{content:none !important;display:none !important;}

#beneficios[data-presentation="clean"] .list .beneficio:hover,
#beneficios[data-presentation="clean"] .list .beneficio:focus-within,
#beneficios .beneficio--presentation-clean:hover,
#beneficios .beneficio--presentation-clean:focus-within{
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

#beneficios[data-presentation="clean"] .beneficio .beneficio-title,
#beneficios .beneficio--presentation-clean .beneficio-title,
#beneficios[data-presentation="clean"] .beneficio h3,
#beneficios .beneficio--presentation-clean h3{
  font-size: var(--fs-card-title, clamp(1rem, 0.56vw + 0.9rem, 1.16rem));
}

#beneficios[data-presentation="clean"] .beneficio .beneficio-text,
#beneficios .beneficio--presentation-clean .beneficio-text,
#beneficios[data-presentation="clean"] .beneficio p,
#beneficios .beneficio--presentation-clean p{
  max-width: var(--measure-card-body-standard, min(54ch, 100%));
  line-height: var(--lh-card-body, 1.55);
}

/* Media shell semantics (single source of truth)
   Authority shared vive en roles + components-map.
   Aquí quedan solo geometry / footprint / size. */

/* -----------------------------
   Mobile compacto
------------------------------ */
@media (max-width: 767px){
  #beneficios[data-presentation="cards"] .list .beneficio,
  #beneficios .beneficio--presentation-cards{
    grid-template-columns: auto minmax(0,1fr);
    column-gap: .82rem;
    row-gap: .36rem;
  }

  #beneficios[data-presentation="clean"] .list .beneficio,
  #beneficios .beneficio--presentation-clean{
    column-gap: .78rem;
    row-gap: .18rem;
  }

  #ingredientes[data-presentation="cards"][data-item-media-mode="image"] .ingrediente-media-shell,
  #ingredientes[data-presentation="cards"] .ingrediente--media-mode-image .ingrediente-media-shell,
  #ingredientes[data-presentation="cards"][data-item-media-mode="mixed"] .ingrediente--media-mode-mixed .ingrediente-media-shell,
  #ingredientes[data-presentation="cards"][data-item-media-mode="image"] .list > li .ingrediente-media-shell,
  #ingredientes[data-presentation="cards"][data-item-media-mode="mixed"] .list > li .ingrediente-media-shell{
    --ingredientes-media-shell-size: clamp(4.4rem, 16vw, 5.2rem);
  }

  #ingredientes[data-presentation="clean"] .ingrediente-media-shell,
  #ingredientes .ingrediente--presentation-clean .ingrediente-media-shell,
  #ingredientes[data-presentation="clean"] .list > li .ingrediente-media-shell{
    --ingredientes-media-shell-size: clamp(3.3rem, 12vw, 4rem);
  }
}

/* =====================================================================
   VC1-BR2 · Ingredientes image media local footprint
   - no reinyecta materialidad shared
   - conserva solo fill/size local para media-first image|mixed
   ===================================================================== */
#ingredientes .ingrediente-media-shell > .ingrediente-icon--image,
#ingredientes .list > li .ingrediente-media-shell > .ingrediente-icon--image,
#ingredientes .ingrediente-media-shell > .ingrediente-icon picture,
#ingredientes .list > li .ingrediente-media-shell > .ingrediente-icon picture{
  display:block;
  inline-size:100%;
  block-size:100%;
}

#ingredientes[data-item-media-mode="image"] .ingrediente-media-shell,
#ingredientes .ingrediente--media-mode-image .ingrediente-media-shell,
#ingredientes[data-item-media-mode="mixed"] .ingrediente--media-mode-mixed .ingrediente-media-shell,
#ingredientes[data-item-media-mode="image"] .list > li .ingrediente-media-shell,
#ingredientes[data-item-media-mode="mixed"] .list > li .ingrediente-media-shell{
  --ingredientes-media-shell-size: clamp(5.2rem, 1.8vw + 4.6rem, 6.6rem);
}

#ingredientes[data-presentation="clean"][data-item-media-mode="image"] .ingrediente-media-shell,
#ingredientes[data-presentation="clean"] .ingrediente--media-mode-image .ingrediente-media-shell,
#ingredientes[data-presentation="clean"][data-item-media-mode="mixed"] .ingrediente--media-mode-mixed .ingrediente-media-shell,
#ingredientes[data-presentation="clean"][data-item-media-mode="image"] .list > li .ingrediente-media-shell,
#ingredientes[data-presentation="clean"][data-item-media-mode="mixed"] .list > li .ingrediente-media-shell{
  --ingredientes-media-shell-size: clamp(4.5rem, 1.3vw + 4rem, 5.4rem);
}

#ingredientes[data-item-media-mode="image"] .ingrediente-media-shell > .ingrediente-icon,
#ingredientes .ingrediente--media-mode-image .ingrediente-media-shell > .ingrediente-icon,
#ingredientes[data-item-media-mode="mixed"] .ingrediente--media-mode-mixed .ingrediente-media-shell > .ingrediente-icon,
#ingredientes[data-item-media-mode="image"] .list > li .ingrediente-media-shell > .ingrediente-icon,
#ingredientes[data-item-media-mode="mixed"] .list > li .ingrediente-media-shell > .ingrediente-icon{
  inline-size:100%;
  block-size:100%;
  min-inline-size:0;
  min-block-size:0;
  display:block;
  border-radius:inherit;
  overflow:hidden;
}

#ingredientes[data-item-media-mode="image"] .ingrediente-media-shell > .ingrediente-icon__img,
#ingredientes .ingrediente--media-mode-image .ingrediente-media-shell > .ingrediente-icon__img,
#ingredientes[data-item-media-mode="mixed"] .ingrediente--media-mode-mixed .ingrediente-media-shell > .ingrediente-icon__img,
#ingredientes[data-item-media-mode="image"] .ingrediente-media-shell > .ingrediente-icon img,
#ingredientes .ingrediente--media-mode-image .ingrediente-media-shell > .ingrediente-icon img,
#ingredientes[data-item-media-mode="mixed"] .ingrediente--media-mode-mixed .ingrediente-media-shell > .ingrediente-icon img,
#ingredientes[data-item-media-mode="image"] .list > li .ingrediente-media-shell > .ingrediente-icon__img,
#ingredientes[data-item-media-mode="mixed"] .list > li .ingrediente-media-shell > .ingrediente-icon__img,
#ingredientes[data-item-media-mode="image"] .list > li .ingrediente-media-shell > .ingrediente-icon img,
#ingredientes[data-item-media-mode="mixed"] .list > li .ingrediente-media-shell > .ingrediente-icon img,
#ingredientes[data-item-media-mode="image"] .ingrediente-media-shell > .ingrediente-icon picture > img,
#ingredientes .ingrediente--media-mode-image .ingrediente-media-shell > .ingrediente-icon picture > img,
#ingredientes[data-item-media-mode="mixed"] .ingrediente--media-mode-mixed .ingrediente-media-shell > .ingrediente-icon picture > img,
#ingredientes[data-item-media-mode="image"] .list > li .ingrediente-media-shell > .ingrediente-icon picture > img,
#ingredientes[data-item-media-mode="mixed"] .list > li .ingrediente-media-shell > .ingrediente-icon picture > img{
  display:block;
  inline-size:100%;
  block-size:100%;
  width:100%;
  height:100%;
  max-inline-size:none;
  max-block-size:none;
  border-radius:inherit;
  object-fit:cover;
  object-position:center;
}

@media (max-width: 767px){
  #ingredientes[data-item-media-mode="image"] .ingrediente-media-shell,
  #ingredientes .ingrediente--media-mode-image .ingrediente-media-shell,
  #ingredientes[data-item-media-mode="mixed"] .ingrediente--media-mode-mixed .ingrediente-media-shell,
  #ingredientes[data-item-media-mode="image"] .list > li .ingrediente-media-shell,
  #ingredientes[data-item-media-mode="mixed"] .list > li .ingrediente-media-shell{
    --ingredientes-media-shell-size: clamp(4.7rem, 17vw, 5.6rem);
  }

  #ingredientes[data-presentation="clean"][data-item-media-mode="image"] .ingrediente-media-shell,
  #ingredientes[data-presentation="clean"] .ingrediente--media-mode-image .ingrediente-media-shell,
  #ingredientes[data-presentation="clean"][data-item-media-mode="mixed"] .ingrediente--media-mode-mixed .ingrediente-media-shell,
  #ingredientes[data-presentation="clean"][data-item-media-mode="image"] .list > li .ingrediente-media-shell,
  #ingredientes[data-presentation="clean"][data-item-media-mode="mixed"] .list > li .ingrediente-media-shell{
    --ingredientes-media-shell-size: clamp(4rem, 14vw, 4.8rem);
  }
}


/* =========================================================
   DV1-S2 — Bandas de prueba y descarga
   Scope: tensión (Problema/Promesa), prueba (Beneficios/Ingredientes),
   descarga (Testimonios/FAQ).
   Regla: scene-local only. No reauthor shared families ni spine comercial.
   ========================================================= */

/* 1) Bandas por acto: sin tinting de root. La diferenciación se sostiene por foco,
   spacing y densidad para preservar color-cert en surface-section. */

/* 2) Banda de tensión: más foco, menor amplitud y menos lectura de “card premium”. */
:is(#problema, #promesa) .tlv2-container{
  max-inline-size: min(72rem, 100%);
}

#problema{
  --problema-shell-gap: clamp(.72rem, .38vw + .64rem, 1rem);
  --problema-list-gap: clamp(.58rem, .28vw + .52rem, .84rem);
}

#problema .section-title,
#promesa .section-title{
  max-inline-size: min(22ch, 100%);
}

#problema .section-subtitle,
#promesa .section-subtitle,
#promesa .tlv2-split-media__body--promesa[data-role="body"],
#problema .problema-body{
  max-inline-size: min(64ch, 100%);
}

#problema .list{
  max-inline-size: min(58ch, 100%);
}

#problema .list li::before{
  inline-size: 1.26rem;
  min-inline-size: 1.26rem;
  font-size: 1.12rem;
}

#problema .problema-list[data-list-mode="icon-list"] li::before{
  inline-size: 1.88rem;
  min-inline-size: 1.88rem;
  block-size: 1.88rem;
}

#promesa .tlv2-container{
  gap: clamp(.72rem, .34vw + .66rem, 1rem);
}

#promesa .tlv2-split-media__body--promesa[data-role="body"]{
  margin-top: .08rem;
}

/* 3) Banda de prueba: más editorial/tangible, menos gesto transaccional. */
:is(#beneficios, #ingredientes) .tlv2-container{
  max-inline-size: min(76rem, 100%);
}

:is(#beneficios, #ingredientes) .section-title{
  max-inline-size: min(23ch, 100%);
}

:is(#beneficios, #ingredientes) :is(.section-subtitle, .beneficios-body, .ingredientes-body){
  max-inline-size: min(62ch, 100%);
}

#beneficios .list{
  margin-top: clamp(.82rem, .5vw + .68rem, 1.08rem);
}

#ingredientes .list,
#ingredientes .ingredientes-grid{
  margin-top: clamp(.85rem, .52vw + .7rem, 1.12rem);
}

#beneficios .list .beneficio,
#ingredientes .ingrediente,
#ingredientes .list > li{
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    border-color 180ms ease,
    background-image 180ms ease;
}

#beneficios .list .beneficio:hover,
#ingredientes .ingrediente:hover,
#ingredientes .list > li:hover{
  transform: translateY(-1px);
}

#beneficios .beneficio .beneficio-badge,
#ingredientes .ingrediente-meta{
  opacity: .92;
}

/* 4) Banda de descarga: más calma, menos pitch, menos motion. */
:is(#testimonios, #faq) .tlv2-container{
  max-inline-size: min(74rem, 100%);
}

#testimonios .testimonios-body,
#faq .faq-body,
#faq .faq-list{
  max-inline-size: min(64ch, 100%);
}

#testimonios .testimonial{
  transition:
    box-shadow 180ms ease,
    border-color 180ms ease,
    background-image 180ms ease;
}

#testimonios .testimonial blockquote::before{
  opacity: .72;
}

#testimonios .testimonial-meta::before{
  opacity: .58;
}

@media (hover: hover) and (pointer: fine){
  #testimonios .testimonial:hover{
    transform: none;
  }
}

#faq .faq-list{
  margin-top: clamp(.7rem, .34vw + .62rem, .92rem);
}

#faq .faq-item .q::after{
  opacity: .62;
}

#faq .faq-item:is(:hover, :focus-within) .q::after{
  opacity: .78;
}

#faq .faq-item[open] .q::after{
  opacity: .82;
}

@media (max-width: 767px){
  :is(#problema, #promesa, #beneficios, #ingredientes, #testimonios, #faq) .tlv2-container{
    max-inline-size: 100%;
  }

  #testimonios .testimonial{
    gap: .66rem;
  }
}


/* =========================================================
   DV1-S2B — global surface-section color-cert neutralization
   Scope: arco medio/descarga only. Neutraliza la modulación global del root
   surface-section para que la diferenciación siga apoyándose en ritmo/densidad,
   no en tinting ni chrome del background certificado.
   ========================================================= */
:is(#problema, #promesa, #beneficios, #ingredientes, #testimonios, #faq)[data-surface-slot="section-root"][data-surface-species="surface-section"]{
  /* F7-B1 — arco medio con materialidad neutral-plus: sigue sobrio,
     pero deja de caer en planitud blanca accidental. */
  background-image: linear-gradient(180deg, color-mix(in oklch, var(--role-context-surface, var(--role-surface-section, var(--role-surface-base, #fff))) 99%, white 1%) 0%, var(--role-context-surface, var(--role-surface-section, var(--role-surface-base, #fff))) 100%);
  box-shadow: var(--tlv2-root-shell-seam-top, inset 0 1px 0 color-mix(in oklch, white 18%, transparent)), var(--tlv2-root-shell-seam-bottom, inset 0 -1px 0 color-mix(in oklch, var(--role-border-color, rgba(0,0,0,.12)) 18%, transparent));
}


/* =========================================================
   DV1-S3 — Continuidad perceptual del recorrido completo
   Scope: continuity-only. No reauthor shared families, no root tinting,
   no reopening of S1/S2. The lever here is vertical rhythm and scene-local
   breathing between already-promoted acts.
   ========================================================= */

/* Hero -> Tensión: la entrada a Problema/Promesa gana aire sin competir con Hero. */
#problema{
  padding-block-start: clamp(3rem, 4.9vw, 4.2rem);
  padding-block-end: clamp(4.15rem, 6.2vw, 5.5rem);
}

#problema .tlv2-container{
  gap: clamp(.9rem, .5vw + .74rem, 1.22rem);
}

#problema .problema-body{
  margin-bottom: clamp(.18rem, .24vw, .38rem);
}

#problema .list{
  margin-top: clamp(.26rem, .22vw, .42rem);
}

#promesa{
  padding-block-start: clamp(4rem, 6vw, 5.2rem);
  padding-block-end: clamp(4.1rem, 6vw, 5.35rem);
}

#promesa .tlv2-container{
  gap: clamp(.86rem, .48vw + .72rem, 1.18rem);
}

#promesa .tlv2-split-media__body--promesa[data-role="body"]{
  margin-top: clamp(.26rem, .24vw, .46rem);
}

/* Tensión -> Prueba: la entrada a Beneficios/Ingredientes respira más y se siente más entregada. */
#beneficios{
  padding-block-start: clamp(4rem, 5.9vw, 5.2rem);
  padding-block-end: clamp(3.95rem, 5.8vw, 5rem);
  --beneficios-shell-gap: clamp(1rem, .78vw + .7rem, 1.32rem);
  --beneficios-body-gap: clamp(1.14rem, .88vw + .8rem, 1.52rem);
  --beneficios-list-gap-row: clamp(1rem, .76vw + .62rem, 1.28rem);
}

#beneficios .beneficios-body{
  margin-bottom: calc(var(--beneficios-body-gap) + .08rem);
}

#beneficios .list{
  margin-top: clamp(.96rem, .72vw + .64rem, 1.26rem);
}

#ingredientes{
  padding-block-start: clamp(4rem, 5.9vw, 5.15rem);
  padding-block-end: clamp(4.7rem, 6.8vw, 6rem);
  --ingredientes-shell-gap: clamp(.98rem, .78vw + .66rem, 1.3rem);
  --ingredientes-body-gap: clamp(1.1rem, .88vw + .78rem, 1.48rem);
  --ingredientes-list-gap-row: clamp(.92rem, .68vw + .58rem, 1.16rem);
}

#ingredientes .ingredientes-body{
  margin-bottom: calc(var(--ingredientes-body-gap) + .1rem);
}

#ingredientes .ingredientes-grid,
#ingredientes .list,
#ingredientes .ingredientes-grid--overflow{
  margin-top: clamp(1rem, .78vw + .68rem, 1.32rem);
}

/* Decisión -> Descarga: la salida de Packs se recibe con más calma en Testimonios/FAQ. */
#testimonios{
  padding-block-start: clamp(4.3rem, 6.2vw, 5.45rem);
  padding-block-end: clamp(3.9rem, 5.8vw, 4.95rem);
  --testi-body-margin-top: clamp(.92rem, .74vw + .66rem, 1.2rem);
  --testi-grid-margin-top: clamp(1.08rem, .88vw + .76rem, 1.62rem);
}

#faq{
  padding-block-start: clamp(4rem, 5.8vw, 5.1rem);
  padding-block-end: clamp(4.25rem, 6.2vw, 5.35rem);
  --faq-shell-gap: clamp(.82rem, .5vw + .7rem, 1.08rem);
  --faq-list-gap: clamp(.74rem, .42vw + .62rem, .98rem);
}

#faq .faq-list{
  margin-top: calc(var(--cta-final-microcopy-gap) + .24rem);
}

/* Pre-cierre: Garantía gana entidad como puente hacia CTA final sin volverse clímax. */
#garantia{
  --garantia-stack-gap: clamp(.8rem, .44vw + .7rem, 1.04rem);
  --garantia-body-gap: clamp(.74rem, .38vw + .66rem, .96rem);
  padding-block-start: clamp(4.2rem, 6.2vw, 5.4rem);
  padding-block-end: clamp(3rem, 4.7vw, 4rem);
}

#garantia .section-title,
#garantia h2{
  max-inline-size: min(28ch, 100%);
}

#garantia .garantia-subtitle,
#garantia .section-subtitle{
  max-inline-size: min(66ch, 100%);
}

#garantia .garantia-body,
#garantia [data-role="body"]{
  margin-top: clamp(.16rem, .18vw, .28rem);
  max-inline-size: min(70ch, 100%);
}

/* Mobile: se preserva la dramaturgia por aire relativo, no por chrome. */
@media (max-width: 767px){
  #problema{
    padding-block-start: clamp(2.55rem, 8.8vw, 3.25rem);
    padding-block-end: clamp(3.3rem, 10.5vw, 4.1rem);
  }

  #promesa{
    padding-block-start: clamp(3.25rem, 10vw, 4rem);
    padding-block-end: clamp(3.45rem, 10.5vw, 4.15rem);
  }

  #beneficios{
    padding-block-start: clamp(3.35rem, 10.2vw, 4.05rem);
    padding-block-end: clamp(3.25rem, 10vw, 3.95rem);
  }

  #ingredientes{
    padding-block-start: clamp(3.35rem, 10.2vw, 4.05rem);
    padding-block-end: clamp(3.95rem, 11.8vw, 4.7rem);
  }

  #testimonios{
    padding-block-start: clamp(3.65rem, 11vw, 4.35rem);
    padding-block-end: clamp(3.15rem, 9.8vw, 3.9rem);
  }

  #faq{
    padding-block-start: clamp(3.15rem, 9.8vw, 3.9rem);
    padding-block-end: clamp(3.55rem, 10.8vw, 4.3rem);
  }

  #garantia{
    padding-block-start: clamp(3.6rem, 11.2vw, 4.45rem);
    padding-block-end: clamp(2.6rem, 8.8vw, 3.3rem);
  }

  :is(#problema, #promesa, #beneficios, #ingredientes, #testimonios, #faq, #garantia) .tlv2-container{
    max-inline-size: 100%;
  }
}


/* -------------------------------------------------------------------------- */
/* DV1-S3A — pre-close bridge refinement                                      */
/* Scope: FAQ -> Garantía -> CTA final                                         */
/* Goal: fortalecer pre-cierre sin reabrir el spine ni shared ownership.      */
/* -------------------------------------------------------------------------- */

/* FAQ entrega un poco mejor hacia Garantía, sin reabrir la banda de descarga. */
#faq{
  padding-block-end: clamp(3.7rem, 5.35vw, 4.65rem);
}

#faq .faq-list{
  margin-top: calc(var(--cta-final-microcopy-gap) + .3rem);
}

/* Garantía gana un poco más de densidad funcional y menos sensación de vacío. */
#garantia{
  --garantia-stack-gap: clamp(.72rem, .36vw + .66rem, .92rem);
  --garantia-body-gap: clamp(.6rem, .28vw + .54rem, .8rem);
  padding-block-start: clamp(3.45rem, 5vw, 4.25rem);
  padding-block-end: clamp(2.25rem, 3.5vw, 3.05rem);
}

#garantia .section-title,
#garantia h2{
  max-inline-size: min(24ch, 100%);
}

#garantia .garantia-subtitle,
#garantia .section-subtitle{
  max-inline-size: min(58ch, 100%);
}

#garantia .garantia-body,
#garantia [data-role="body"]{
  margin-top: clamp(.08rem, .14vw, .18rem);
  max-inline-size: min(60ch, 100%);
}

/* El cierre entra más cosido desde Garantía, sin reabrir CTA final como slice. */
#garantia + #cta-final.tlv2-section,
#garantia + #cta-final{
  padding-block-start: clamp(3.1rem, 4.5vw, 3.9rem);
}

@media (max-width: 767px){
  #faq{
    padding-block-end: clamp(3.15rem, 9.6vw, 3.85rem);
  }

  #garantia{
    padding-block-start: clamp(3.05rem, 9.6vw, 3.7rem);
    padding-block-end: clamp(2.05rem, 7.4vw, 2.7rem);
  }

  #garantia + #cta-final.tlv2-section,
  #garantia + #cta-final{
    padding-block-start: clamp(2.7rem, 8.6vw, 3.35rem);
  }
}


/* -------------------------------------------------------------------------- */
/* F7-B2 — tipografía / measure / ritmo (consumo TLV2 del bench)              */
/* Scope: jerarquía textual, measure y respiración cross-family sin reabrir    */
/* surfaces, widths globales ni familias laterales.                            */
/* -------------------------------------------------------------------------- */

.tlv2-page{
  --f7b2-title-gap: var(--rhythm-intro-title-gap, 1rem);
  --f7b2-subtitle-gap: var(--rhythm-intro-body-gap, 1.35rem);
  --f7b2-body-stack-gap: var(--rhythm-body-content-gap, 1.12rem);
  --f7b2-paragraph-gap: var(--rhythm-paragraph-gap, .72rem);
  --f7b2-editorial-subtitle-max: var(--measure-section-subtitle, min(58ch, 100%));
  --f7b2-editorial-body-max: var(--measure-section-body, min(62ch, 100%));
  --f7b2-split-subtitle-max: var(--measure-section-subtitle-compact, min(54ch, 100%));
  --f7b2-split-body-max: var(--measure-section-body, min(62ch, 100%));
  --f7b2-closure-title-max: var(--measure-closure-title, min(24ch, 100%));
  --f7b2-closure-subtitle-max: var(--measure-closure-subtitle, min(54ch, 100%));
  --f7b2-closure-body-max: var(--measure-closure-body, min(58ch, 100%));
}

#hero{
  --hero-header-gap: var(--f7b2-title-gap);
  --hero-body-gap: var(--f7b2-body-stack-gap);
  --hero-gap-header-cta-extra: clamp(.78rem, .92vw, 1.02rem);
}

#hero .section-title{
  max-width: var(--measure-hero-title, min(23ch, 100%));
}

#hero .section-subtitle{
  max-width: var(--measure-hero-subtitle, min(56ch, 100%));
}

#hero .hero-body{
  max-width: var(--measure-hero-body, min(54ch, 100%));
}

#hero .hero-body p + p{
  margin-top: var(--f7b2-paragraph-gap);
}

:is(#problema, #promesa){
  --cmf-copy-title-max: min(var(--measure-title-compact, 23ch), 100%);
  --cmf-copy-subtitle-max: var(--f7b2-split-subtitle-max);
  --cmf-copy-body-max: min(var(--cmf-copy-shell-inline-max), var(--f7b2-split-body-max));
  --cmf-copy-tail-max: min(var(--cmf-copy-shell-inline-max), var(--f7b2-split-body-max));
  --cmf-region-gap: var(--f7b2-subtitle-gap);
}

:is(#problema, #promesa) .tlv2-split-media__intro{
  gap: var(--f7b2-title-gap);
}

:is(#problema, #promesa) :is(.tlv2-split-media__body, .tlv2-split-media__tail, [data-role="body"], .problema-body) p + p{
  margin-top: var(--f7b2-paragraph-gap);
}

:is(#beneficios, #ingredientes, #testimonios, #faq){
  --f7b2-family-title-max: var(--measure-section-title, min(23ch, 100%));
}

:is(#beneficios, #ingredientes, #testimonios, #faq) .section-title{
  max-inline-size: var(--f7b2-family-title-max);
  margin-bottom: var(--f7b2-title-gap);
}

:is(#beneficios, #ingredientes, #testimonios, #faq) .section-subtitle{
  max-inline-size: var(--f7b2-editorial-subtitle-max);
  margin-bottom: var(--f7b2-subtitle-gap);
}

:is(#beneficios, #ingredientes, #testimonios, #faq) :is(.beneficios-body, .ingredientes-body, .testimonios-body, .faq-body){
  max-inline-size: var(--f7b2-editorial-body-max);
  margin-top: 0;
}

:is(#beneficios, #ingredientes, #testimonios, #faq) :is(.beneficios-body, .ingredientes-body, .testimonios-body, .faq-body) p + p{
  margin-top: var(--f7b2-paragraph-gap);
}

#beneficios{
  --beneficios-body-gap: var(--f7b2-subtitle-gap);
}

#ingredientes{
  --ingredientes-body-gap: var(--f7b2-subtitle-gap);
}

#testimonios{
  --testi-body-gap: var(--f7b2-body-stack-gap);
}

#faq{
  --faq-body-gap: var(--f7b2-body-stack-gap);
}

:is(#garantia, #cta-final) .section-title{
  margin-bottom: var(--f7b2-title-gap);
}

:is(#garantia, #cta-final) .section-subtitle{
  margin-bottom: var(--f7b2-subtitle-gap);
}

#garantia .section-title,
#garantia h2{
  max-inline-size: var(--f7b2-closure-title-max);
}

#garantia .garantia-subtitle,
#garantia .section-subtitle{
  max-inline-size: var(--f7b2-closure-subtitle-max);
}

#garantia .garantia-body,
#garantia [data-role="body"]{
  max-inline-size: var(--f7b2-closure-body-max);
  margin-top: 0;
  gap: var(--f7b2-body-stack-gap);
}

#garantia .garantia-body p + p,
#garantia [data-role="body"] p + p{
  margin-top: var(--f7b2-paragraph-gap);
}

#cta-final{
  --cta-final-body-gap: max(var(--f7b2-subtitle-gap), clamp(.46rem, .2vw + .38rem, .62rem));
  --cta-final-microcopy-gap: clamp(.36rem, .22vw + .28rem, .56rem);
  --cta-final-cta-top-gap: clamp(1.04rem, .6vw + .82rem, 1.36rem);
}

#cta-final .section-title{
  max-width: min(var(--f7b2-closure-title-max), 17.5ch);
}

#cta-final .section-subtitle,
#cta-final .cta-final-subtitle{
  max-width: min(var(--f7b2-closure-subtitle-max), 46ch);
}

#cta-final .cta-final-body{
  max-width: min(var(--f7b2-closure-body-max), 50ch);
  line-height: 1.62;
}

#cta-final .cta-final-body p + p{
  margin-top: var(--f7b2-paragraph-gap);
}


/* -------------------------------------------------------------------------- */
/* F7-B2P — heading posture normalization by family                           */
/* Scope: families center / left / split / closure sin reabrir composición.   */
/* -------------------------------------------------------------------------- */

.tlv2-page{
  --f7b2p-commerce-align: var(--heading-posture-commerce-align, center);
  --f7b2p-editorial-align: var(--heading-posture-editorial-align, left);
  --f7b2p-split-align: var(--heading-posture-split-align, left);
  --f7b2p-closure-align: var(--heading-posture-closure-align, center);
  --f7b2p-commerce-title-max: var(--measure-heading-commerce-title, min(26ch, 100%));
  --f7b2p-commerce-subtitle-max: var(--measure-heading-commerce-subtitle, min(60ch, 100%));
  --f7b2p-editorial-title-max: var(--measure-heading-editorial-title, min(23ch, 100%));
  --f7b2p-editorial-subtitle-max: var(--measure-heading-editorial-subtitle, min(58ch, 100%));
  --f7b2p-split-title-max: var(--measure-heading-split-title, min(22ch, 100%));
  --f7b2p-split-subtitle-max: var(--measure-heading-split-subtitle, min(54ch, 100%));
  --f7b2p-closure-title-max: var(--measure-heading-closure-title, min(26ch, 100%));
  --f7b2p-closure-subtitle-max: var(--measure-heading-closure-subtitle, min(56ch, 100%));
  --f7b2p-closure-body-max: var(--measure-heading-closure-body, min(58ch, 100%));
}

:is(#beneficios, #ingredientes, #faq) :is(.section-title, .section-subtitle, .beneficios-body, .ingredientes-body, .faq-body){
  text-align: var(--f7b2p-editorial-align);
  margin-inline: 0;
}

:is(#beneficios, #ingredientes, #faq) .section-title{
  max-inline-size: var(--f7b2p-editorial-title-max);
}

:is(#beneficios, #ingredientes, #faq) .section-subtitle{
  max-inline-size: var(--f7b2p-editorial-subtitle-max);
}

:is(#problema, #promesa) .tlv2-split-media:not(.tlv2-split-media--text-only) .tlv2-split-media__copy{
  justify-items: start;
  text-align: var(--f7b2p-split-align);
}

:is(#problema, #promesa) .tlv2-split-media:not(.tlv2-split-media--text-only) :is(.tlv2-split-media__intro, .tlv2-split-media__body, .tlv2-split-media__tail){
  justify-items: start;
  text-align: var(--f7b2p-split-align);
}

:is(#problema, #promesa) .tlv2-split-media:not(.tlv2-split-media--text-only) .tlv2-split-media__intro .section-title{
  max-inline-size: var(--f7b2p-split-title-max);
}

:is(#problema, #promesa) .tlv2-split-media:not(.tlv2-split-media--text-only) .tlv2-split-media__intro .section-subtitle{
  max-inline-size: var(--f7b2p-split-subtitle-max);
}

:is(#packs, #cta-final, #testimonios) :is(.section-title, .section-subtitle){
  text-align: var(--f7b2p-commerce-align);
  margin-inline: auto;
}

#packs .section-title,
#cta-final .section-title,
#testimonios .section-title{
  max-inline-size: var(--f7b2p-commerce-title-max);
}

#packs .section-subtitle,
#cta-final .section-subtitle,
#cta-final .cta-final-subtitle,
#testimonios .section-subtitle{
  max-inline-size: var(--f7b2p-commerce-subtitle-max);
}

#testimonios .testimonios-body{
  max-inline-size: var(--f7b2p-commerce-subtitle-max);
  margin-inline: auto;
  text-align: var(--f7b2p-commerce-align);
}

#testimonios .testimonios-body > *{
  margin-inline: auto;
}

#garantia .tlv2-container{
  max-inline-size: var(--layout-shell-trust-closure-compact-max, 52rem);
  justify-items: center;
  text-align: var(--f7b2p-closure-align);
}

#garantia :is(.garantia-eyebrow, .section-eyebrow){
  justify-self: center;
}

#garantia :is(.section-title, h2, .garantia-subtitle, .section-subtitle, .garantia-body, [data-role="body"]){
  text-align: var(--f7b2p-closure-align);
  margin-inline: auto;
}

#garantia .section-title,
#garantia h2{
  max-inline-size: var(--f7b2p-closure-title-max);
}

#garantia :is(.garantia-subtitle, .section-subtitle){
  max-inline-size: var(--f7b2p-closure-subtitle-max);
}

#garantia :is(.garantia-body, [data-role="body"]){
  max-inline-size: var(--f7b2p-closure-body-max);
}

#cta-final .cta-final-header{
  text-align: var(--f7b2p-commerce-align);
}