/*! 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                                                            */
/* ========================================================================= */
*,
*::before,
*::after{
  box-sizing: border-box;
}

html{
  line-height: var(--line-normal);
}

body{
  margin: 0;
  font-family: var(--font-family-base);
  font-size: var(--font-size-md);
  color: var(--role-body-color);
  background-color: var(--role-surface-base);
}

/* ========================================================================= */
/* 1) Tipografía básica                                                       */
/* ========================================================================= */
h1,
h2,
h3,
h4,
h5,
h6{
  color: var(--role-heading-color);
  line-height: var(--line-tight);
  margin: 0 0 var(--space-3);
}

h1{ font-size: var(--font-size-3xl); }
h2{ font-size: var(--font-size-2xl); }
h3{ font-size: var(--font-size-xl); }
h4{ font-size: var(--font-size-lg); }
h5{ font-size: var(--font-size-md); }
h6{ font-size: var(--font-size-sm); }

p{
  margin: 0 0 var(--space-3);
}

small{
  font-size: var(--font-size-xs);
}

strong{
  font-weight: var(--font-weight-semibold);
}

/* ========================================================================= */
/* 2) Enlaces                                                                 */
/* ========================================================================= */
a{
  color: color-mix(in oklch, var(--color-accent) 90%, white);
  text-decoration: none;
}

a:hover{
  text-decoration: underline;
}

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

@supports selector(:focus-visible){
  :focus{
    outline: none;
  }
  :focus-visible{
    outline: 2px solid var(--role-focus-ring, var(--tlv2-ring));
    outline-offset: var(--role-focus-ring-offset, 2px);
  }
}

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

/* ========================================================================= */
/* 5) Print styles mínimos (evitar shorthand background)                      */
/* ========================================================================= */
@media print{
  *{
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
  }

  a,
  a:visited{
    text-decoration: underline;
  }

  nav,
  .no-print{
    display: none !important;
  }

  body{
    color: black;
  }
}

/* ========================================================================= */
/* 6) RTL guardas básicas                                                     */
/* ========================================================================= */
html[dir="rtl"] body{
  direction: rtl;
}

/* ========================================================================= */
/* 7) PRIMITIVA de layout                                                     */
/* ========================================================================= */
.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                                              */
/* ========================================================================= */
:root{
  --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                          */
/* ========================================================================= */

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

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

	  /* 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-accent)) 85%,
        black
      )
    )
  );

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

  /* 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){
  a.cta,
  button.cta,
  .cta,
  .tlv2-cta,
  .boton-comprar{
	    background-image: var(--cta-overlay-mobile, var(--role-cta-overlay-mobile, none));
  }
}

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

a.cta:hover,
button.cta:hover,
.cta:hover,
.tlv2-cta:hover,
.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, var(--cta-shadow))
  );

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

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

a.cta:active,
button.cta:active,
.cta:active,
.tlv2-cta:active,
.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, var(--cta-shadow-hover, var(--cta-shadow)))
  );

  transform: translateY(0.5px);
}

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

a.cta:focus-visible,
button.cta:focus-visible,
.cta:focus-visible,
.tlv2-cta:focus-visible,
.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 ------------------------ */

a.cta[aria-disabled="true"],
button.cta[aria-disabled="true"],
.cta[aria-disabled="true"],
.tlv2-cta[aria-disabled="true"],
.boton-comprar[aria-disabled="true"],
.cta.is-disabled,
.tlv2-cta.is-disabled,
.boton-comprar.is-disabled,
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 ------------------------ */

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