/* Texto que se adapta a la foto de atras. Ver assets/js/components/tone.js
   --tra-ink es el color del texto: negro por defecto, blanco cuando el JS marca data-tone="light". */

[data-tone="light"] {
    --tra-ink: var(--tra-white);
}

/* Menu del header (las reglas de Astra llevan !important, por eso esta tambien) */
header .ast-builder-menu-1 .menu-item > a {
    color: var(--tra-ink, var(--tra-black)) !important;
    transition: color .4s ease;
}

/* Logo: es un PNG negro; para el blanco del sitio se invierte (0.98 = #FAFAFA) */
header .site-branding img {
    transition: filter .4s ease;
}

header .site-branding[data-tone="light"] img {
    filter: brightness(0) invert(.98);
}

/* Boton del menu en celular */
header .menu-toggle svg {
    transition: fill .4s ease, stroke .4s ease;
}

[data-tone-target] {
    color: var(--tra-ink, var(--tra-black));
    transition: color .4s ease;
}

/* Titulo, enlaces y detalle de un bloque de texto cambian juntos: heredan el color del bloque */
[data-tone-target] :is(h1, h2, h3, h4, h5, h6, a, p, span) {
    color: inherit;
}

@media (prefers-reduced-motion: reduce) {
    header .ast-builder-menu-1 .menu-item > a,
    header .site-branding img,
    header .menu-toggle svg,
    [data-tone-target] {
        transition: none;
    }
}