/*! TLV2 — base.css (Phase B 100%) · Consolidado D2
    - Reset/saneamiento ligero
    - Tipografía y enlaces base
    - Foco accesible global (fallback :focus → prefer :focus-visible)
    - Prefers-reduced-motion global
    - Print styles mínimos
    - Guardas RTL (propiedades lógicas)
    - PRIMITIVA de layout (.tlv2-section > .section-inner)
    - NO pinta el padding vertical de secciones (eso vive en landing.css)
*/

/* ========================================================================= */
/* 0) Reset mínimo                                                            */
/* ========================================================================= */
:where(main.tlv2-page, .tlv2-modal) *,
:where(main.tlv2-page, .tlv2-modal) *::before,
:where(main.tlv2-page, .tlv2-modal) *::after{
  box-sizing: border-box;
}
:where(main.tlv2-page, .tlv2-modal){
  line-height: var(--line-normal);
}
:where(main.tlv2-page, .tlv2-modal){
  font-family: var(--font-family-base);
  font-size: var(--font-size-md);
  color: var(--role-body-color);
}
:where(body.page-template-page-turbolanding){
  margin: 0;
  background: var(--role-surface-base, #fff);
}

:where(main.tlv2-page){
  margin: 0;
  background-color: var(--role-surface-base, #fff);
  background-image: none;
}
/* ========================================================================= */
/* 1) Tipografía básica                                                       */
/* ========================================================================= */
:where(main.tlv2-page, .tlv2-modal) h1,
:where(main.tlv2-page, .tlv2-modal) h2,
:where(main.tlv2-page, .tlv2-modal) h3,
:where(main.tlv2-page, .tlv2-modal) h4,
:where(main.tlv2-page, .tlv2-modal) h5,
:where(main.tlv2-page, .tlv2-modal) h6{
  color: var(--role-heading-color);
  line-height: var(--line-tight);
  margin: 0 0 var(--space-3);
}

:where(main.tlv2-page, .tlv2-modal) h1{ font-size: var(--font-size-3xl); }
:where(main.tlv2-page, .tlv2-modal) h2{ font-size: var(--font-size-2xl); }
:where(main.tlv2-page, .tlv2-modal) h3{ font-size: var(--font-size-xl); }
:where(main.tlv2-page, .tlv2-modal) h4{ font-size: var(--font-size-lg); }
:where(main.tlv2-page, .tlv2-modal) h5{ font-size: var(--font-size-md); }
:where(main.tlv2-page, .tlv2-modal) h6{ font-size: var(--font-size-sm); }

:where(main.tlv2-page, .tlv2-modal) p{
  margin: 0 0 var(--space-3);
}

:where(main.tlv2-page, .tlv2-modal) small{
  font-size: var(--font-size-xs);
}

:where(main.tlv2-page, .tlv2-modal) strong{
  font-weight: var(--font-weight-semibold);
}

/* ========================================================================= */
/* 2) Enlaces                                                                 */
/* ========================================================================= */
:where(main.tlv2-page, .tlv2-modal) a{
  color: var(--role-context-link, var(--role-primary, var(--color-primary, #0a84ff)));
  text-decoration: none;
}

:where(main.tlv2-page, .tlv2-modal) a:hover{
  text-decoration: underline;
}

/* ========================================================================= */
/* 3) Foco accesible (fallback :focus → prefer :focus-visible)                */
/* ========================================================================= */
:where(main.tlv2-page, .tlv2-modal) :focus{
  outline: var(--role-focus-ring-width, 2px) solid var(--role-focus-ring-color, var(--tlv2-ring));
  outline-offset: var(--role-focus-ring-offset, 2px);
}

@supports selector(:focus-visible){
  :where(main.tlv2-page, .tlv2-modal) :focus{
    outline: none;
  }
  :where(main.tlv2-page, .tlv2-modal) :focus-visible{
    outline: var(--role-focus-ring-width, 2px) solid var(--role-focus-ring-color, var(--tlv2-ring));
    outline-offset: var(--role-focus-ring-offset, 2px);
  }
}

/* ========================================================================= */
/* 4) Motion                                                                  */
/* ========================================================================= */
@media (prefers-reduced-motion: reduce){
  :where(main.tlv2-page, .tlv2-modal) *{
    animation-duration: var(--motion-none) !important;
    animation-iteration-count: 1 !important;
    transition-duration: var(--motion-none) !important;
    scroll-behavior: auto !important;
  }
}


/* ========================================================================= */
/* 10) Shared primitives painter — V2-A                                      */
/*    - base.css absorbe el painter shared real                               */
/*    - components-map.css queda en publication vars / bridge                 */
/*    - sin abrir recipes por bloque ni frentes fuera de alcance              */
/* ========================================================================= */

/* Eyebrow / badge shared primitive */
:where(main.tlv2-page, .tlv2-modal) :is(.eyebrow, .badge, .tlv2-modal-eyebrow, .tlv2-modal-pack-badge, [data-pack-badge]){
  display: inline-flex;
  align-items: center;
  justify-content: var(--tlv2-pill-justify, center);
  gap: var(--tlv2-pill-gap, .42rem);
  min-height: var(--tlv2-pill-min-height, 1.8rem);
  padding: var(--tlv2-pill-pad-y, .36rem) var(--tlv2-pill-pad-x, .72rem);
  border-style: solid;
  border-width: var(--tlv2-pill-border-width, var(--eyebrow-border-width, 1px));
  border-radius: var(--tlv2-pill-radius, 999px);
  background-image: none !important;
  background-color: var(--tlv2-pill-surface) !important;
  color: var(--tlv2-pill-foreground) !important;
  border-color: var(--tlv2-pill-border) !important;
  box-shadow: var(--tlv2-pill-shadow) !important;
}

:where(main.tlv2-page, .tlv2-modal) .eyebrow--accent.eyebrow--with-dot::before{
  content: "";
  inline-size: var(--tlv2-pill-dot-size, .45rem);
  block-size: var(--tlv2-pill-dot-size, .45rem);
  border-radius: 50%;
  flex: 0 0 auto;
  background: var(--tlv2-pill-dot-bg, transparent) !important;
  box-shadow: var(--tlv2-pill-dot-shadow, none) !important;
}

@media (max-width: 767px){
  :where(main.tlv2-page, .tlv2-modal) :is(.eyebrow, .badge, .tlv2-modal-eyebrow, .tlv2-modal-pack-badge, [data-pack-badge]){
    min-height: var(--tlv2-pill-min-height-mobile, 1.72rem);
    padding: var(--tlv2-pill-pad-y-mobile, .32rem) var(--tlv2-pill-pad-x-mobile, .66rem);
  }
}

/* Chip / marker shared primitive */
:where(main.tlv2-page) :is(
  #beneficios .beneficio-badge,
  #ingredientes .ingredientes-expand__toggle
){
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--tlv2-chip-gap, .5rem);
  min-block-size: var(--tlv2-chip-min-block-size, 1.9rem);
  padding: var(--tlv2-chip-pad-y, .32rem) var(--tlv2-chip-pad-x, .7rem);
  border-radius: var(--tlv2-chip-radius, 999px);
  border: 1px solid var(--tlv2-chip-border, rgba(0,0,0,.12));
  background: var(--tlv2-chip-surface, #fff);
  color: var(--tlv2-chip-foreground, currentColor);
  box-shadow: var(--tlv2-chip-highlight, inset 0 1px 0 rgba(255,255,255,.18)), var(--tlv2-chip-shadow, none);
}

:where(main.tlv2-page) #problema .problema-list[data-list-mode="icon-list"] li::before{
  border-radius: var(--tlv2-chip-radius, 999px);
  border: 1px solid var(--tlv2-chip-border, rgba(0,0,0,.12));
  background: var(--tlv2-chip-surface, #fff);
  color: var(--tlv2-chip-foreground, currentColor);
  box-shadow: var(--tlv2-chip-highlight, inset 0 1px 0 rgba(255,255,255,.18)), var(--tlv2-chip-shadow, none);
}

:where(main.tlv2-page) #ingredientes .ingredientes-expand__toggle::after{
  border-radius: var(--tlv2-chip-radius, 999px);
  border: 1px solid var(--tlv2-chip-border, rgba(0,0,0,.12));
  background: var(--tlv2-chip-surface, #fff);
  color: var(--tlv2-chip-foreground, currentColor);
  box-shadow: var(--tlv2-chip-highlight, inset 0 1px 0 rgba(255,255,255,.18)), var(--tlv2-chip-shadow, none);
}

:where(main.tlv2-page) #ingredientes .ingredientes-expand__toggle:hover{
  border-color: var(--tlv2-chip-border-hover, var(--tlv2-chip-border, rgba(0,0,0,.12)));
  background: var(--tlv2-chip-surface-hover, var(--tlv2-chip-surface, #fff));
  color: var(--tlv2-chip-foreground-hover, var(--tlv2-chip-foreground, currentColor));
}

/* Media-shell shared primitive */
:where(main.tlv2-page) :is(
  #beneficios .beneficio-media-shell,
  #ingredientes .ingrediente-media-shell,
  .tlv2-item-media-shell
){
  border-style: solid;
  border-width: 1px;
  border-color: var(--tlv2-media-shell-family-border, transparent);
  background-color: var(--tlv2-media-shell-family-surface, transparent);
  background-image: none;
  box-shadow: var(--tlv2-media-shell-family-shadow, none);
  color: var(--tlv2-media-shell-family-foreground, currentColor);
}

/* Neutral card shell shared primitive */
:where(main.tlv2-page) :is(
  #beneficios .list .beneficio,
  #ingredientes .ingrediente,
  #ingredientes .list > li,
  #faq .faq-item,
  #testimonios .testimonial
){
  --tlv2-card-border-active: var(--tlv2-chrome-border-strong, var(--role-context-border-strong, var(--tlv2-card-border)));
  --tlv2-card-bg-image-hover: var(--tlv2-card-family-bg-image-hover, var(--tlv2-card-family-bg-image));
  --tlv2-card-focus-shadow: var(--tlv2-card-highlight, none), var(--tlv2-card-shadow-hover);
  color: var(--tlv2-card-copy-body);
  background-color: var(--tlv2-card-surface);
  background-image: var(--tlv2-card-family-bg-image);
  border: 1px solid var(--tlv2-card-border);
  box-shadow: var(--tlv2-card-highlight, none), var(--tlv2-card-shadow);
}

@media (hover: hover) and (pointer: fine){
  :where(main.tlv2-page) :is(
    #beneficios .list .beneficio,
    #ingredientes .ingrediente,
    #ingredientes .list > li,
    #faq .faq-item,
    #testimonios .testimonial
  ):hover{
    border-color: var(--tlv2-card-border-active, var(--tlv2-card-border));
    background-image: var(--tlv2-card-bg-image-hover, var(--tlv2-card-family-bg-image));
    box-shadow: var(--tlv2-card-highlight, none), var(--tlv2-card-shadow-hover);
  }
}

/* ========================================================================= */
/* 5) Print styles mínimos (evitar shorthand background)                      */
/* ========================================================================= */
@media print{
  :where(main.tlv2-page, .tlv2-modal) *{
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
  }
  :where(main.tlv2-page, .tlv2-modal) a,
  :where(main.tlv2-page, .tlv2-modal) a:visited{
    text-decoration: underline;
  }
  :where(main.tlv2-page) nav,
  :where(main.tlv2-page) .no-print{
    display: none !important;
  }
  :where(main.tlv2-page){
    color: black;
  }
}

/* ========================================================================= */
/* 6) RTL guardas básicas                                                     */
/* ========================================================================= */
html[dir="rtl"] :where(main.tlv2-page, .tlv2-modal){
  direction: rtl;
}

/* ========================================================================= */
/* 7) PRIMITIVA de layout                                                     */
/* ========================================================================= */
:where(main.tlv2-page) .tlv2-section > .section-inner{
  width: min(100%, var(--tl-container-max, 1120px));
  margin-inline: auto;
  padding-inline: var(--space-3);
  box-sizing: border-box;
}

/* NOTA:
   - El padding vertical de .tlv2-section vive en landing.css (ritmo por bloque).
*/

/* ========================================================================= */
/* 8) Tokens utilitarios locales                                              */
/* ========================================================================= */
:where(main.tlv2-page){
  --space-9: 5rem;   /* 80px */
  --space-10: 6rem;  /* 96px */
}

/* ========================================================================= */
/* 9) CTA PAINTER D3 — ÚNICO PINTOR                                           */
/*    - Pinta color/fondo/borde/estados usando roles + variables             */
/*    - Layout mínimo (altura/padding/radius) centralizado aquí              */
/*    - Sin shorthands de background, sin !important                          */
/* ========================================================================= */

:where(main.tlv2-page, .tlv2-modal) a.cta,
:where(main.tlv2-page, .tlv2-modal) button.cta,
:where(main.tlv2-page, .tlv2-modal) .cta,
:where(main.tlv2-page, .tlv2-modal) .tlv2-cta,
:where(main.tlv2-page, .tlv2-modal) .boton-comprar{
  /* Pintado base desde roles/variables */
  color: var(
    --cta-fg,
    var(--role-cta-foreground, var(--role-on-primary, var(--color-on-accent)))
  );

  background-color: var(
    --cta-bg,
    var(--role-cta-surface, var(--color-primary, #0a84ff))
  );

	  /* Overlay via vars (painter). Defaults se mapean desde roles en components-map/presets. */
	  background-image: var(--cta-overlay-desktop, var(--role-cta-overlay-desktop, none));

  border-width: var(--cta-border-width, 1px);
  border-style: solid;
  border-color: var(
    --cta-border,
    var(
      --role-cta-border,
      color-mix(
        in oklch,
        var(--role-cta-surface, var(--color-primary, #0a84ff)) 85%,
        black
      )
    )
  );

  box-shadow: var(
    --cta-shadow,
    var(--role-cta-shadow, 0 14px 28px -22px color-mix(in oklch, black 22%, transparent))
  );

  /* Layout/base */
  min-height: var(--cta-min-h, var(--cta-min-height, 44px));
  padding-inline: var(--cta-pad-x, var(--cta-pad-inline, 18px));
  border-radius: var(--cta-radius, var(--radius-cta, 12px));

  display: inline-flex;
  align-items: center;
  justify-content: center;

  text-decoration: none;
  line-height: 1;
  cursor: pointer;
}

/* Overlay móvil */
@media (max-width: 767px){
  :where(main.tlv2-page, .tlv2-modal) a.cta,
  :where(main.tlv2-page, .tlv2-modal) button.cta,
  :where(main.tlv2-page, .tlv2-modal) .cta,
  :where(main.tlv2-page, .tlv2-modal) .tlv2-cta,
  :where(main.tlv2-page, .tlv2-modal) .boton-comprar{
	    background-image: var(--cta-overlay-mobile, var(--role-cta-overlay-mobile, none));
  }
}

/* -------------------------- Estados: hover ------------------------------- */

:where(main.tlv2-page, .tlv2-modal) a.cta:hover,
:where(main.tlv2-page, .tlv2-modal) button.cta:hover,
:where(main.tlv2-page, .tlv2-modal) .cta:hover,
:where(main.tlv2-page, .tlv2-modal) .tlv2-cta:hover,
:where(main.tlv2-page, .tlv2-modal) .boton-comprar:hover{
  color: var(
    --cta-fg-hover,
    var(--role-cta-foreground-hover, var(--cta-fg))
  );

  background-color: var(
    --cta-bg-hover,
    var(--role-cta-surface-hover, var(--cta-bg))
  );

  border-color: var(
    --cta-border-hover,
    var(
      --role-cta-border-hover,
      var(--cta-border)
    )
  );

  box-shadow: var(
    --cta-shadow-hover,
    var(--role-cta-shadow-hover, 0 18px 34px -26px color-mix(in oklch, black 26%, transparent))
  );

  filter: var(--cta-hover-filter, brightness(1.03));
}

/* F2-S3.1g — CTA shadow hardening:
   Evita “bisel/doble línea” en Android (inset + bottom line).
   Regla: CTA secundario = borde limpio (sin shadow). */
:where(main.tlv2-page, .tlv2-modal) :where(.cta-secondary, .cta--secondary, .hero-secondary, .cta-final-secondary){
  box-shadow: none;
}
:where(main.tlv2-page, .tlv2-modal) :where(.cta-secondary, .cta--secondary, .hero-secondary, .cta-final-secondary):hover{
  box-shadow: none;
}


/* CTA-SR1 — Secondary CTA recipe support surface
   El painter shared de CTA secundaria debe materializar background/fg/border
   en el mismo nodo auditado por QA, sin depender de overrides locales. */
:where(main.tlv2-page, .tlv2-modal) :where(.cta-secondary, .cta--secondary, .hero-secondary, .cta-final-secondary){
  color: var(--cta-fg, var(--role-context-button-secondary-foreground, var(--role-button-secondary-foreground, var(--role-on-elevated, #fff))));
  background-color: var(--cta-bg, var(--role-context-button-secondary-surface, var(--role-button-secondary-surface, var(--role-surface-elevated, #fff))));
  border-color: var(--cta-border, var(--role-context-button-secondary-border, var(--role-button-secondary-border, rgba(0,0,0,.12))));
  background-image: none;
}
:where(main.tlv2-page, .tlv2-modal) :where(.cta-secondary, .cta--secondary, .hero-secondary, .cta-final-secondary):hover,
:where(main.tlv2-page, .tlv2-modal) :where(.cta-secondary, .cta--secondary, .hero-secondary, .cta-final-secondary):focus-visible{
  color: var(--cta-fg-hover, var(--role-context-button-secondary-foreground-hover, var(--role-button-secondary-foreground-hover, var(--cta-fg))));
  background-color: var(--cta-bg-hover, var(--role-context-button-secondary-surface-hover, var(--role-button-secondary-surface-hover, var(--cta-bg))));
  border-color: var(--cta-border-hover, var(--role-context-button-secondary-border-hover, var(--role-button-secondary-border-hover, var(--cta-border))));
  background-image: none;
}
:where(main.tlv2-page, .tlv2-modal) :where(.cta-secondary, .cta--secondary, .hero-secondary, .cta-final-secondary):active{
  color: var(--cta-fg-active, var(--role-context-button-secondary-foreground-active, var(--role-button-secondary-foreground-active, var(--cta-fg-hover, var(--cta-fg)))));
  background-color: var(--cta-bg-active, var(--role-context-button-secondary-surface-active, var(--role-button-secondary-surface-active, var(--cta-bg-hover, var(--cta-bg)))));
  border-color: var(--cta-border-active, var(--role-context-button-secondary-border-active, var(--role-button-secondary-border-active, var(--cta-border-hover, var(--cta-border)))));
  background-image: none;
}


/* -------------------------- Estados: active ------------------------------ */

:where(main.tlv2-page, .tlv2-modal) a.cta:active,
:where(main.tlv2-page, .tlv2-modal) button.cta:active,
:where(main.tlv2-page, .tlv2-modal) .cta:active,
:where(main.tlv2-page, .tlv2-modal) .tlv2-cta:active,
:where(main.tlv2-page, .tlv2-modal) .boton-comprar:active{
  color: var(
    --cta-fg-active,
    var(--role-cta-foreground-active, var(--cta-fg-hover, var(--cta-fg)))
  );

  background-color: var(
    --cta-bg-active,
    var(
      --role-cta-surface-active,
      var(--cta-bg-hover, var(--cta-bg))
    )
  );

  border-color: var(
    --cta-border-active,
    var(
      --role-cta-border-active,
      var(--cta-border-hover, var(--cta-border))
    )
  );

  box-shadow: var(
    --cta-shadow-active,
    var(--role-cta-shadow-active, none)
  );

  transform: translateY(0.5px);
}

/* -------------------------- Estados: focus-visible ----------------------- */

:where(main.tlv2-page, .tlv2-modal) a.cta:focus-visible,
:where(main.tlv2-page, .tlv2-modal) button.cta:focus-visible,
:where(main.tlv2-page, .tlv2-modal) .cta:focus-visible,
:where(main.tlv2-page, .tlv2-modal) .tlv2-cta:focus-visible,
:where(main.tlv2-page, .tlv2-modal) .boton-comprar:focus-visible{
  /* El anillo de foco lo maneja la capa global;
     aquí dejamos sólo un hook opcional de filtro. */
  filter: var(--cta-focus-filter, none);
}

/* -------------------------- Estado deshabilitado ------------------------ */

:where(main.tlv2-page, .tlv2-modal) a.cta[aria-disabled="true"],
:where(main.tlv2-page, .tlv2-modal) button.cta[aria-disabled="true"],
:where(main.tlv2-page, .tlv2-modal) .cta[aria-disabled="true"],
:where(main.tlv2-page, .tlv2-modal) .tlv2-cta[aria-disabled="true"],
:where(main.tlv2-page, .tlv2-modal) .boton-comprar[aria-disabled="true"],
:where(main.tlv2-page, .tlv2-modal) .cta.is-disabled,
:where(main.tlv2-page, .tlv2-modal) .tlv2-cta.is-disabled,
:where(main.tlv2-page, .tlv2-modal) .boton-comprar.is-disabled,
:where(main.tlv2-page, .tlv2-modal) button.cta:disabled{
  color: var(
    --cta-fg-disabled,
    var(--role-cta-foreground-disabled, var(--cta-fg))
  );

  background-color: var(
    --cta-bg-disabled,
    var(--role-cta-surface-disabled, var(--cta-bg))
  );

  border-color: var(
    --cta-border-disabled,
    var(--role-cta-border-disabled, var(--cta-border))
  );

  box-shadow: var(
    --cta-shadow-disabled,
    var(--role-cta-shadow-disabled, var(--cta-shadow))
  );

  opacity: 0.6;
  pointer-events: none;
  filter: saturate(0.8);
}

/* -------------------------- Iconos dentro de CTA ------------------------ */

:where(main.tlv2-page, .tlv2-modal) a.cta > .icon,
:where(main.tlv2-page, .tlv2-modal) .cta > .icon,
:where(main.tlv2-page, .tlv2-modal) .tlv2-cta > .icon,
:where(main.tlv2-page, .tlv2-modal) .boton-comprar > .icon,
:where(main.tlv2-page, .tlv2-modal) a.cta > svg,
:where(main.tlv2-page, .tlv2-modal) .cta > svg,
:where(main.tlv2-page, .tlv2-modal) .tlv2-cta > svg,
:where(main.tlv2-page, .tlv2-modal) .boton-comprar > svg{
  margin-inline-start: var(--gap-cta-icon, .5rem);
  flex-shrink: 0;
}