/* Marca clara (14/10/2026): base común cuando el color de la marca es claro (amarillo, lima, dorado, pastel,
   celeste) y por eso paleta.py lo mandó al ACENTO, con un primario carbón o profundo que lleva texto blanco.
   Sin esto el sitio queda gris/negro y el color del cliente no aparece.

   - El generador (generar_preview.py → _marca_clara) decide y pone la clase `vt-marca-clara` en el body.
   - Este archivo se carga DESPUÉS de estilo.css (solo en esos sitios) y lleva `body.vt-marca-clara` delante:
     le gana a la mayoría de las reglas de los estilos sin `!important`.
   - Un estilo la ajusta en su estilo.css con `body.vt-marca-clara.vt-estilo-<nombre> ...` (una clase más:
     le gana a esta base aunque se cargue antes).

   Regla de legibilidad: el acento es CLARO, así que nunca lleva texto blanco encima ni se usa como color de
   texto sobre fondo claro (amarillo sobre blanco ≈ 1,6:1). Va como relleno con texto en --vt-tinta, como filete
   o decoración, o como color de texto solo sobre fondos oscuros (cada estilo sabe cuáles son los suyos). */

body.vt-marca-clara {
	/* Los presets del sitio, no --vt-acento/--vt-tinta: hay estilos oscuros que redefinen --vt-tinta como texto claro */
	--vt-marca: var(--wp--preset--color--acento);
	--vt-marca-texto: var(--wp--preset--color--tinta);
	--vt-marca-hover: color-mix(in oklch, var(--wp--preset--color--acento) 84%, #000);
	--vt-firma: var(--wp--preset--color--acento);
}
body.vt-marca-clara ::selection { background: var(--vt-marca); color: var(--vt-marca-texto); }

/* Botón principal (el de la cabecera y los botones sin estilo): acento con texto tinta.
   WhatsApp sigue verde y el contorno sigue en el color del texto.
   Con :is(sección) le gana también a las reglas de los estilos para el botón del hero o del cierre
   (`.vt-hero .wp-block-button:not(.is-style-contorno):not(.is-style-whatsapp) .wp-block-button__link`). */
body.vt-marca-clara .wp-block-button:not([class*="is-style-"]) .wp-block-button__link,
body.vt-marca-clara :is(.vt-seccion, .vt-cabecera__cta) .wp-block-button:not([class*="is-style-"]) .wp-block-button__link {
	background-color: var(--vt-marca); color: var(--vt-marca-texto); border-color: var(--vt-marca);
}
body.vt-marca-clara .wp-block-button:not([class*="is-style-"]) .wp-block-button__link:hover,
body.vt-marca-clara :is(.vt-seccion, .vt-cabecera__cta) .wp-block-button:not([class*="is-style-"]) .wp-block-button__link:hover {
	background-color: var(--vt-marca-hover); color: var(--vt-marca-texto); border-color: var(--vt-marca-hover);
}
/* En el menú del celular, el ítem "Escribinos" */
body.vt-marca-clara .vt-cabecera .is-menu-open .vt-solo-movil .wp-block-navigation-item__content { background: var(--vt-marca); color: var(--vt-marca-texto) !important; }

/* Palabra resaltada del título (<em>): marcador lleno en el acento con texto tinta; se lee sobre cualquier fondo
   (foto, oscuro, claro). El color va con !important: hay estilos con `h2 em { color: inherit }` más específicos y el
   texto quedaba blanco sobre el amarillo. Un estilo con fondos oscuros puede preferir solo el color:
   `color: var(--vt-marca) !important; background: none`. */
body.vt-marca-clara :is(h1, h2, h3) em {
	color: var(--vt-marca-texto) !important; text-shadow: none;
	/* Recortado arriba y abajo: con letras condensadas e interlineado apretado (Oswald a 1,0) la caja entera
	   tapaba la línea de arriba */
	background: linear-gradient(transparent 20%, var(--vt-marca) 20%, var(--vt-marca) 90%, transparent 90%);
	padding: 0 .14em; margin-inline: -.04em; border-radius: 2px;
	-webkit-box-decoration-break: clone; box-decoration-break: clone;
}

/* Filetes y marcas (no son texto: el acento va tal cual) */
body.vt-marca-clara .vt-overline::before,
body.vt-marca-clara .vt-dato__numero::after { background-color: var(--vt-marca); }
body.vt-marca-clara .vt-paso { border-top-color: var(--vt-marca); }
body.vt-marca-clara .vt-card--texto { border-top-color: var(--vt-marca); }
body.vt-marca-clara .vt-destacado { border-left-color: var(--vt-marca); }
body.vt-marca-clara .vt-cabecera .current-menu-item > .wp-block-navigation-item__content { border-bottom-color: var(--vt-marca); }
body.vt-marca-clara .vt-testimonio__cita::before,
body.vt-marca-clara .vt-testimonio__cita::after { color: var(--vt-marca); }
body.vt-marca-clara .vt-mas a { text-decoration-line: underline; text-decoration-color: var(--vt-marca); text-decoration-thickness: 3px; text-underline-offset: 5px; }
/* Tildes: círculo en el acento con la tilde oscura */
body.vt-marca-clara .is-style-tildes li::before, body.vt-marca-clara .vt-tildes li::before {
	background: var(--vt-marca) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%231d1d1d' stroke-width='2.4' d='M4 8.5l2.6 2.5L12 5.5'/%3E%3C/svg%3E") center / 80% no-repeat;
}
body.vt-marca-clara .vt-paginacion .page-numbers.current { background: var(--vt-marca); border-color: var(--vt-marca); color: var(--vt-marca-texto); }

/* Pie (siempre oscuro): redes y firma (--vt-firma) en el acento */
body.vt-marca-clara .vt-pie__redes a:hover { background: var(--vt-marca); border-color: var(--vt-marca); color: var(--vt-marca-texto); }