/* Efectos de los encabezados, elegidos en el panel (admin/encabezados.php). Se aplican a los
   títulos de contenido; quedan fuera los que van sobre foto o fondo oscuro (.p-superior incluido) y los de tarjetas. */
[data-encabezados="suave"] :is(h1, h2, .titulo-cat):not(.carousel-caption *, footer *, .footer-col *, .cat-hijo *, .producto-card *, .servicio *, .ficha--oscura *, .p-superior) {
    text-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
}
[data-encabezados="retro"] :is(h1, h2, .titulo-cat):not(.carousel-caption *, footer *, .footer-col *, .cat-hijo *, .producto-card *, .servicio *, .ficha--oscura *, .p-superior) {
    text-shadow: 2px 2px 0 rgba(0, 87, 180, 0.4);
}
[data-encabezados="degradado"] :is(h1, h2, .titulo-cat):not(.carousel-caption *, footer *, .footer-col *, .cat-hijo *, .producto-card *, .servicio *, .ficha--oscura *, .p-superior) {
    width: fit-content;
    background: linear-gradient(90deg, var(--color-encabezados, #000), #0057b4);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
[data-encabezados="degradado-inverso"] :is(h1, h2, .titulo-cat):not(.carousel-caption *, footer *, .footer-col *, .cat-hijo *, .producto-card *, .servicio *, .ficha--oscura *, .p-superior) {
    width: fit-content;
    background: linear-gradient(90deg, #0057b4, var(--color-encabezados, #000));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
/* Marcadores: es un subrayado de texto, así cada franja acaba donde acaba su línea */
[data-encabezados="marcador"] :is(h1, h2, .titulo-cat):not(.carousel-caption *, footer *, .footer-col *, .cat-hijo *, .producto-card *, .servicio *, .ficha--oscura *, .p-superior) {
    text-decoration: underline var(--color-subrayado, #ffe666) 0.3em;
    text-decoration-skip-ink: none;
    text-underline-offset: -0.08em;
}
[data-encabezados="acento"] :is(h1, h2, .titulo-cat):not(.carousel-caption *, footer *, .footer-col *, .cat-hijo *, .producto-card *, .servicio *, .ficha--oscura *, .p-superior)::after {
    content: "";
    display: block;
    width: 56px;
    height: 4px;
    margin-top: 8px;
    background: #0057b4;
    border-radius: 2px;
}