/* Cabeceras con textura generada (public/js/materiales.js): Ingredientes (agua), Análisis (sérum), Tendencias (crema).
   La textura va detrás del bloque de cabecera, a sangre, y se funde con el papel abajo. En modo oscuro no se pinta:
   el texto es claro y las texturas son claras. */
html body{overflow-x:clip}
.mat-hero{position:relative;isolation:isolate}
.mat-fondo{position:absolute;z-index:-1;top:calc(-1 * var(--mat-arriba,0px));bottom:0;left:50%;width:100vw;transform:translateX(-50%);overflow:hidden}
.mat-fondo canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity 1.2s cubic-bezier(.16,1,.3,1);touch-action:pan-y}
.mat-fondo canvas.on{opacity:1}
.mat-fondo::after{content:"";position:absolute;left:0;right:0;bottom:0;height:clamp(60px,12vh,120px);background:linear-gradient(rgba(250,249,246,0),#FAF9F6)}
.ing-hero{--mat-arriba:90px;min-height:clamp(400px,62svh,660px);display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:clamp(24px,5vh,56px)}
html body .rd .rd-hero.mat-hero{min-height:clamp(420px,64svh,700px);align-content:end;align-items:end;padding-bottom:clamp(32px,6vh,72px)}
.mat-test{position:absolute;z-index:0;left:0;right:0;top:0;height:clamp(640px,100svh,980px);pointer-events:none}
.mat-test .mat-fondo{top:0;left:0;width:100%;transform:none}
@media (prefers-color-scheme:dark){html:root:not([data-theme="light"]) .mat-fondo{display:none}}
html[data-theme="dark"] .mat-fondo{display:none}
.mat-test[hidden]{display:none}
html body main#app{position:relative;z-index:1}
/* Análisis: el ejemplo de resultado se lee sobre papel, no sobre las burbujas */
body:has(.mat-test:not([hidden])) .t-ejemplo{background:rgba(250,249,246,.9);box-shadow:0 0 0 clamp(16px,2vw,28px) rgba(250,249,246,.9)}