/* ========================================================================== */
/* 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).      */
/* ========================================================================== */

/* Í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
*/


/* -------------------------------------------------------------------------- */
/* 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(--font-xxl, clamp(1.5rem, 2.2vw + 1rem, 2.25rem));
  --tlv2-h3-size: var(--font-xl, clamp(1.25rem, 1.2vw + 1rem, 1.5rem));
  --tlv2-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));
}


/* -------------------------------------------------------------------------- */
/* 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);
}

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

.section-title{
  font-size: var(--tlv2-h2-size);
  line-height: 1.15;
  letter-spacing: -.01em;
  margin: 0 0 var(--tlv2-gap-y) 0;
}
.section-subtitle{
  font-size: calc(var(--tlv2-body) * 1.05);
  color: var(--tlv2-muted);
  margin: -0.25rem 0 var(--tlv2-gap-y) 0;
}

/* 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: center;
}

/* D2 — Solo tokens del Héroe (sin duplicados) */
#hero{
  padding-block: var(--space-hero-y);
}

#hero .section-title{
  font-size: var(--fs-hero-title);
  line-height: var(--lh-hero-title);
  letter-spacing: -0.01em;
  margin: 0 0 0.6em 0;
  max-width: 26ch;
  margin-inline: auto;
}

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

#hero .section-subtitle{
  font-size: var(--fs-hero-subtitle);
  line-height: var(--lh-hero-subtitle);
  color: var(--role-muted-color, var(--tlv2-muted));
  margin: 0 0 1rem 0;
  max-width: 62ch;
  margin-inline: auto;
  opacity: .92;
}

/* Cuerpo del héroe (texto bajo el subtítulo) */
#hero .hero-body{
  max-width: 56ch;
  margin-inline: auto;
  margin-top: var(--space-4);
}

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

/* Microcopy bajo el héroe */
#hero .hero-microcopy{
  margin-top: var(--space-3);
  font-size: calc(var(--tlv2-body) * 0.9);
  color: var(--tlv2-muted);
  opacity: .9;
}

/* CTAs del héroe */
#hero .cta-group{
  margin-top: var(--space-4);
  gap: var(--space-3);
}

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

/* Foco visible sin !important en HÉROE (fallback si no hay :focus-visible) */
#hero .cta:focus,
#hero .boton-comprar:focus{
  outline: 2px solid 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: 2px solid currentColor;
    outline-offset: 2px;
  }
}


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

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

#problema .list li{
  border-left:3px solid currentColor;
  padding-left:.75rem;
  opacity:.95;
}


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

#promesa .tlv2-container{
  display:grid;
  gap:.75rem;
  text-align:center;
}

/* D2 — PROMESA: grilla y tarjetas (paridad visual con Beneficios) */
#promesa .list{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4, 1rem);
}
@media (max-width: 1024px){
  #promesa .list{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 767px){
  #promesa .list{
    grid-template-columns: 1fr;
  }
}
#promesa .list li{
  background: var(--role-surface-elevated, #fff);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: var(--tlv2-radius, 16px);
  padding: .75rem 1rem;
  box-shadow: var(--tlv2-shadow, 0 6px 20px rgba(0,0,0,.08));
}


/* -------------------------------------------------------------------------- */
/* 6) BENEFICIOS                                                              */
/* -------------------------------------------------------------------------- */

/* Grilla de beneficios: dos columnas en desktop, una en móvil */
#beneficios .list{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem 1rem;
}

/* Tarjeta individual de beneficio */
#beneficios .list .beneficio{
  background-color: var(--surface-subtle, rgba(0,0,0,.03));
  border-radius: var(--tlv2-radius);
  padding: .75rem 1rem;
  display: grid;
  gap: .35rem;
}

/* Título de cada beneficio */
#beneficios .beneficio h3{
  margin: 0;
  font-size: var(--tlv2-h3-size);
  line-height: var(--lh-tight, 1.2);
}

/* Texto de cada beneficio */
#beneficios .beneficio p{
  margin: 0;
  max-width: var(--measure, 62ch);
  line-height: var(--lh-body, 1.45);
  color: var(--role-muted-color, var(--tlv2-muted));
}

/* En móvil, una sola columna */
@media (max-width: 767px){
  #beneficios .list{
    grid-template-columns: 1fr;
  }
}


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

#ingredientes .list{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:.75rem 1rem;
}
#ingredientes .list li{
  border:1px solid rgba(0,0,0,.08);
  border-radius: var(--tlv2-radius);
  padding:.75rem 1rem;
  background-color: var(--surface, #fff);
  box-shadow: var(--tlv2-shadow);
}

/* ------------------------------------------------------------
   D2 — Ingredientes (fallback robusto de texto descriptivo)
   Cubre .desc/.text/p y, si no existen, limita cualquier hijo
   directo que no sea heading/imagen/lista/CTA.
------------------------------------------------------------ */

#ingredientes .list{
  row-gap: var(--space-3, 12px);
}

#ingredientes .list > li {
  display: grid;
  gap: .35rem;
}

/* Caso ideal: si existe uno de estos nodos, estilízalo */
#ingredientes .list > li :is(.desc, .text, .copy, .details, .content, p) {
  max-width: 62ch;
  margin: 0;
  color: var(--role-muted-color, var(--tlv2-muted));
  line-height: var(--line-normal, 1.55);
}

/* Fallback: si el ítem no usa las clases anteriores ni <p>,
   aplica a cualquier hijo directo “de texto” excluyendo títulos,
   imágenes, listas y CTA groups */
#ingredientes .list > li > :not(h1):not(h2):not(h3):not(h4):not(h5):not(h6)
:not(figure):not(img):not(ul):not(ol):not(.cta):not(.cta-group)
{
  max-width: 62ch;
  color: var(--role-muted-color, var(--tlv2-muted));
  line-height: var(--line-normal, 1.55);
}

/* ---------------------------------------------
   BLOQUE: Ingredientes — microtipografía D2
   (contrato: .list > li .desc)
----------------------------------------------*/
#ingredientes .list {
  /* Ritmo interno entre cards/list items si aplica grid/flex vía layout global */
  gap: 16px;
}

#ingredientes .list > li .desc,
#ingredientes .list > li p {
  max-width: var(--measure, 62ch);
  line-height: var(--lh-copy, 1.35);
  color: var(--role-ink-weak, oklch(0.5 0 0));
  margin-block: 6px 0; /* micro-ritmo suave bajo el h3 */
}

/* Opcional suave para el título del item (no cambia tokens/roles) */
#ingredientes .list > li .title {
  margin-block: 0 6px;
  line-height: var(--lh-tight, 1.2);
}

/* ------------------------------------------------------------
   7.x) INGREDIENTES — microtipografía y ritmo
------------------------------------------------------------ */

#ingredientes .section-subtitle,
[data-block="ingredientes"] .section-subtitle,
section[id*="ingred"] .section-subtitle {
  max-width: var(--measure-subtitle, 62ch);
}

/* Texto descriptivo dentro de cada item */
#ingredientes .list > li .desc,
[data-block="ingredientes"] .list > li .desc,
section[id*="ingred"] .list > li .desc {
  max-width: var(--measure, 62ch);
  line-height: var(--lh-body, 1.45);
  color: var(--role-ink, oklch(0.50 0 0));
}

/* Ritmo interno de la lista */
#ingredientes .list,
[data-block="ingredientes"] .list,
section[id*="ingred"] .list {
  display: grid;
  gap: 12px 16px; /* tu probe original reportaba "12px 16px" */
}

/* (Opcional) separación dentro del item */
#ingredientes .list > li .item-title + .desc,
[data-block="ingredientes"] .list > li .item-title + .desc,
section[id*="ingred"] .list > li .item-title + .desc {
  margin-top: 6px;
}

/* -------------------------------------------------------------------------- */
/* 8) PACKS — grilla responsiva y cards                                       */
/* -------------------------------------------------------------------------- */

#packs .packs-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}
@media (max-width: 1024px){
  #packs .packs-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 767px){
  #packs .packs-grid{
    grid-template-columns: 1fr;
  }
}

/* Card base y hover (no toca CTA) */
#packs .pack-card{
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-lg, 16px);
  background: var(--role-surface-elevated, #fff);
  box-shadow: var(--shadow-100, 0 8px 24px rgba(0,0,0,.06));
  border: 1px solid color-mix(in oklch, var(--color-accent) 10%, transparent);
  transition: box-shadow .2s ease, transform .2s ease;
}
#packs .pack-card--featured{
  border-color: color-mix(in oklch, var(--color-accent) 35%, transparent);
  box-shadow: var(--shadow-200, 0 10px 30px rgba(0,0,0,.09));
}
#packs .pack-card:hover{
  box-shadow: var(--shadow-300, 0 14px 40px rgba(0,0,0,.12));
  transform: translateY(-2px);
}

/* Tipografía interna */
#packs .pack-card .title{
  margin: 0;
  font-size: var(--font-size-lg);
  line-height: var(--line-tight);
}

/* Precio: actual + anterior + meta */
#packs .pack-card .price{
  margin: var(--space-2) 0 var(--space-1);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1);
}

#packs .pack-card .price-current{
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-tight);
}

#packs .pack-card .price-old{
  font-size: var(--font-size-md);
  color: var(--role-muted-color);
  text-decoration: line-through;
  opacity: .8;
}

#packs .pack-card .price-meta{
  width: 100%;
  margin-top: var(--space-1);
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--role-muted-color);
  line-height: var(--line-normal);
}

#packs .pack-card .price-meta .price-note + .price-per-unit{
  margin-left: .5em;
}

#packs .pack-card .desc{
  margin: 0;
  color: var(--role-muted-color);
  font-size: var(--font-size-sm);
  line-height: var(--line-normal);
}

/* Lista de beneficios por pack */
#packs .pack-card .features{
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: .5rem;
}
#packs .pack-card .features li{
  position: relative;
  padding-left: 1.1rem;
  line-height: var(--line-normal);
  color: var(--role-muted-color);
}
#packs .pack-card .features li::before{
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  opacity: .7;
}

/* Footer — acciones */
#packs .pack-card .actions{
  margin-top: var(--space-3);
  display: flex;
  justify-content: flex-start;
}

/* Microcopy bajo la grilla */
#packs .packs-microcopy{
  margin-top: var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--role-muted-color);
}



/* -------------------------------------------------------------------------- */
/* 9) GARANTÍA — bloque de confianza                                          */
/* -------------------------------------------------------------------------- */

#garantia .tlv2-container{
  max-width: 48rem;
  margin-inline: auto;
  background: var(--role-surface-elevated, #fff);
  border-radius: var(--radius-xl, 20px);
  box-shadow: var(--shadow-100, 0 10px 30px rgba(0,0,0,.06));
  border: 1px solid color-mix(in oklch, var(--color-accent) 10%, transparent);
  padding: var(--space-5) var(--space-6);
  display: grid;
  gap: var(--space-3);
  position: relative;
  overflow: hidden;
}

/* “Sello” de confianza en la esquina */
#garantia .tlv2-container::before{
  content: "✓";
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: var(--font-weight-semibold);
  background: color-mix(in oklch, var(--color-accent) 70%, white);
  color: oklch(0.99 0 0); /* casi blanco */
  box-shadow: var(--shadow-100, 0 6px 16px rgba(0,0,0,.16));
}

/* Título “Tu tranquilidad primero” */
#garantia .section-title,
#garantia h2{
  margin: 0;
  font-size: var(--font-size-xl);
  line-height: var(--line-tight);
  letter-spacing: -0.01em;
}

/* Texto de cuerpo */
#garantia p{
  margin: 0;
  color: var(--role-muted-color);
  font-size: var(--font-size-md);
  line-height: var(--line-normal);
  max-width: 40rem;
}

/* Microcopy extra (si lo hubiera) */
#garantia p + p{
  margin-top: var(--space-2);
  font-size: var(--font-size-sm);
}

/* Ajustes en móvil */
@media (max-width: 767px){
  #garantia .tlv2-container{
    padding: var(--space-4);
    border-radius: var(--radius-lg, 16px);
  }

  #garantia .tlv2-container::before{
    top: var(--space-3);
    right: var(--space-3);
    width: 2rem;
    height: 2rem;
    font-size: 1rem;
  }

  #garantia .section-title,
  #garantia h2{
    font-size: var(--font-size-lg);
  }
}


/* -------------------------------------------------------------------------- */
/* 10) TESTIMONIOS — grilla y bloque de cita                                  */
/* -------------------------------------------------------------------------- */

#testimonios .testimonials-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}

@media (max-width: 1024px){
  #testimonios .testimonials-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

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

#testimonios .testimonial{
  position: relative;
  background: var(--role-surface-elevated, #fff);
  border-radius: var(--radius-lg, 16px);
  box-shadow: var(--shadow-100, 0 6px 20px rgba(0,0,0,.06));
  border: 1px solid color-mix(in oklch, var(--color-accent) 12%, transparent);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

#testimonios .testimonial::before{
  content: "";
  position: absolute;
  top: var(--space-3);
  left: var(--space-4);
  width: 3.5rem;
  height: 3px;
  border-radius: 999px;
  background: color-mix(in oklch, var(--color-accent) 65%, white);
  opacity: .7;
}

#testimonios .testimonial blockquote{
  margin: 0;
  padding-top: calc(var(--space-3) + 4px);
  font-size: var(--font-size-md);
  line-height: var(--line-normal);
  font-style: italic;
  max-width: 36rem;
}

#testimonios .testimonial blockquote::before,
#testimonios .testimonial blockquote::after{
  content: "“";
  color: color-mix(in oklch, var(--color-accent) 35%, white);
  font-weight: var(--font-weight-semibold);
}

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

#testimonios .testimonial .author{
  margin-top: auto;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--role-muted-color);
}


/* -------------------------------------------------------------------------- */
/* 11) FAQ — acordeón legible                                                 */
/* -------------------------------------------------------------------------- */

#faq .faq-list{
  display: grid;
  gap: var(--space-3);
}

#faq .faq-item{
  border-radius: var(--radius-md, 12px);
  background: var(--role-surface-elevated, #fff);
  box-shadow: var(--shadow-100, 0 6px 20px rgba(0,0,0,.06));
  border: 1px solid color-mix(in oklch, var(--color-accent) 10%, transparent);
  padding: var(--space-2) var(--space-4);
}

/* summary.q como fila clickable */
#faq .faq-item .q{
  margin: 0;
  padding-block: var(--space-2);
  font-size: var(--font-size-md);
  line-height: var(--line-tight);
  font-weight: var(--font-weight-semibold);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  cursor: pointer;
  list-style: none;
}

/* Ocultar marcador por defecto en navegadores WebKit */
#faq .faq-item .q::-webkit-details-marker{
  display: none;
}

/* Flecha del FAQ más grande */
#faq .faq-item .q::after{
  content: "▾";
  font-size: 1.2em;
  opacity: .75;
  transition: transform 0.18s ease, opacity 0.18s ease;
}

/* Flecha un poco más grande aún en móvil */
@media (max-width: 767px){
  #faq .faq-item .q::after{
    font-size: 1.35em;
  }
}

/* Estado abierto: flecha girada */
#faq .faq-item[open] .q::after{
  transform: rotate(-180deg);
  opacity: .9;
}

/* Respuesta con transición suave */
#faq .faq-item .a{
  margin: var(--space-2) 0 0;
  color: var(--role-muted-color);
  font-size: var(--font-size-sm);
  line-height: var(--line-normal);
  opacity: 0;
  transform: translateY(-4px);
  transition:
    opacity 0.18s ease,
    transform 0.18s ease;
}

/* Cuando el item está abierto, mostramos la respuesta */
#faq .faq-item[open] .a{
  opacity: 1;
  transform: translateY(0);
}


/* -------------------------------------------------------------------------- */
/* 12) CTA FINAL — cierre con doble botón                                     */
/* -------------------------------------------------------------------------- */

#cta-final .tlv2-container{
  max-width: 56rem;
  margin-inline: auto;
  text-align: center;
  display: grid;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-6);
  border-radius: var(--radius-xl, 20px);
  background: var(--role-surface-elevated, #fff);
  box-shadow: var(--shadow-100, 0 10px 30px rgba(0,0,0,.06));
  border: 1px solid color-mix(in oklch, var(--color-accent) 12%, transparent);
}

/* Eyebrow del bloque (si existe) */
#cta-final .cta-final-eyebrow{
  margin: 0;
  font-size: var(--font-size-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--role-muted-color);
}

/* Título principal */
#cta-final .section-title{
  margin: 0;
  font-size: var(--font-size-xl);
  line-height: var(--line-tight);
  letter-spacing: -0.01em;
}

/* Subtítulo / frase de contexto */
#cta-final .section-subtitle{
  margin: 0;
  color: var(--role-muted-color);
  font-size: var(--font-size-md);
  line-height: var(--line-normal);
}

/* Cuerpo opcional con varios párrafos */
#cta-final .cta-final-body{
  margin-top: var(--space-2);
  color: var(--role-body-color);
  font-size: var(--font-size-md);
  line-height: var(--line-normal);
}

#cta-final .cta-final-body p{
  margin: 0 0 var(--space-2);
}

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

/* Grupo de CTAs (apoya el sistema global de .cta) */
#cta-final .cta-group{
  margin-top: var(--space-4);
  justify-content: center;
  gap: var(--space-3);
}

/* Microcopy final (si lo hubiera) */
#cta-final .cta-final-microcopy{
  margin: var(--space-3) 0 0;
  font-size: var(--font-size-sm);
  color: var(--role-muted-color);
}

/* Ajustes en móvil */
@media (max-width: 767px){
  #cta-final .tlv2-container{
    padding: var(--space-4);
    border-radius: var(--radius-lg, 18px);
  }

  #cta-final .section-title{
    font-size: var(--font-size-lg);
  }

  #cta-final .cta-group{
    flex-direction: column;
    align-items: stretch;
  }

  #cta-final .cta-group .cta{
    width: 100%;
    justify-content: center;
  }
}


/* -------------------------------------------------------------------------- */
/* 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 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 currentColor;
    outline-offset: 2px;
  }
}

/* Foco visible global para CTAs (fallback robusto) */
.tlv2-page :where(.cta,.boton-comprar):focus{
  outline: 2px solid 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 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 currentColor;
  outline-offset: 2px;
}
@supports selector(:focus-visible){
  .tlv2-page .cta:focus {
    outline: none;
  }
  .tlv2-page .cta:focus-visible {
    outline: 2px solid 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: 2px solid var(--role-cta-surface, currentColor);
  outline-offset: 2px;
}