/* =========================================================================
   FONDO NOCHE (01/10, elegido por Kevin): todo lo que va despues del hero en azul noche continuo.
   Un solo fondo, sin escalones: la banda de fotos y el presupuesto comparten el mismo azul.
   Contraste medido con las mismas reglas en la prueba: 0 fallos a 390 y 1440 px.
   ========================================================================= */
html[data-fondo=noche]{--fondo:#0c1828}
html[data-fondo=noche] main > .bloque{background:var(--fondo);
  --tinta:#eef1f5;--ceniza:#a7b0bf;--canto:rgb(255 255 255/.14);--oro-texto:#d6b468;--superficie:rgb(255 255 255/.045);color:var(--tinta)}
html[data-fondo=noche] .tarjeta:not(.tarjeta--oro):not(.tarjeta--noche){background:var(--superficie)}
/* las latas son foto sobre blanco: van como ficha blanca de producto, a proposito */
html[data-fondo=noche] .producto img{border-radius:1rem;background:#fff}
html[data-fondo=noche] .tarjeta--oro{color:#0a0d12;background:var(--oro)}
html[data-fondo=noche] .tarjeta--noche{color:#fff;background:rgb(255 255 255/.09);border-color:rgb(255 255 255/.16)}
html[data-fondo=noche] main > :is(.banda,.presupuesto){background:var(--fondo);border-top:1px solid rgb(255 255 255/.12)}
html[data-fondo=noche] .pildora--blanca{color:#0a0d12}
html[data-fondo=noche] .campo select option{color:#0a0d12}
html[data-fondo=noche] .pie{background:var(--fondo);border-top:1px solid rgb(255 255 255/.12)}