/* ==========================================================================
   Macarena Olávarri · los fondos
   Sin clase, el sitio es el de v4: fondo rosa y el video en vino profundo.
   Con html.fondo-blanco, -gris, -crema o -cielo cambian el lienzo de home
   (--f-*), el de cada página (--p*) y el video con sus nubes de espera (--h-*).
   La clase la pone opciones.js (por defecto, blanco; Maca duda entre blanco
   y gris). Va después de main.css y paginas.css.
   ========================================================================== */

/* El video de Maca tiene fondo blanco: barra, logo y visor en tinta (negro)
   desde el inicio con todos los fondos claros (el gris ahora también lo es) */
html.fondo-blanco, html.fondo-gris, html.fondo-crema, html.fondo-cielo {
  --hero-claro: 1;
  --h-tinta: var(--tinta);
  --h-esquina: rgba(0, 0, 0, .55);
  --h-fecha: var(--tinta);
  --h-velo: rgba(255, 255, 255, .3);
  --h-rayas: rgba(0, 0, 0, .04);
}

/* Blanco (lo pidió Maca): casi todo blanco con su grano; el video en blanco
   y al final de cada página un gris claro (antes rosa o
   azul: Maca quiere usar menos colores de la paleta) */
html.fondo-blanco {
  --f-noche: #FFFFFF; --f-brillo: #FFFFFF; --f-rosa-vivo: #FFFFFF; --f-rosa: #FFFFFF;
  --f-lila: #FFFFFF; --f-cielo: #FFFFFF; --f-final: #ECECEA;
  --h-a: #FFFFFF; --h-b: #FFFFFF; --h-c: #FBF8FA;
  --h-n1: rgba(0, 0, 0, .05); --h-n2: rgba(0, 0, 0, .03); --h-n3: rgba(0, 0, 0, .06); --h-n4: rgba(255, 255, 255, .6);
}
html.fondo-blanco.pagina--acerca   { --p0: #FFFFFF; --p1: #FFFFFF; --p2: #FFFFFF; --p3: #FFFFFF; --p4: #ECECEA; }
html.fondo-blanco.pagina--cursos   { --p0: #FFFFFF; --p1: #FFFFFF; --p2: #FFFFFF; --p3: #FFFFFF; --p4: #ECECEA; }
html.fondo-blanco.pagina--contacto { --p0: #FFFFFF; --p1: #FFFFFF; --p2: #FFFFFF; --p3: #FFFFFF; --p4: #ECECEA; }

/* Gris (lo pidió Maca: menos rosa sobre rosa, más contraste): grises
   neutros (los cálidos, como el plata del brand kit, se veían rosados). Antes
   el video iba en grafito; con el video blanco, arriba también es gris claro
   y el video se ve como un recuadro blanco encima */
html.fondo-gris {
  --f-noche: #E4E4E3; --f-brillo: #E4E4E3; --f-rosa-vivo: #E4E4E3; --f-rosa: #E0E0DF;
  --f-lila: #D8D8D7; --f-cielo: #CFCFCE; --f-final: #C4C4C3;
  --h-a: #F2F2F1; --h-b: #E4E4E3; --h-c: #D6D6D5;
  --h-n1: rgba(0, 0, 0, .05); --h-n2: rgba(255, 255, 255, .4); --h-n3: rgba(150, 150, 160, .25); --h-n4: rgba(255, 255, 255, .5);
}
html.fondo-gris.pagina--acerca   { --p0: #E2E2E1; --p1: #DBDBDA; --p2: #D3D3D2; --p3: #CBCBCA; --p4: #C3C3C2; }
html.fondo-gris.pagina--cursos   { --p0: #E1E1E1; --p1: #DADADA; --p2: #D2D2D2; --p3: #CACACA; --p4: #C2C2C2; }
html.fondo-gris.pagina--contacto { --p0: #DFE1E3; --p1: #D8DADC; --p2: #D0D2D5; --p3: #C8CBCE; --p4: #C0C3C7; }

/* Crema: la mantequilla de su brand kit, cálida y clara; el vino y el rosa
   resaltan sin que todo sea rosa */
html.fondo-crema {
  --f-noche: #FFEFD2; --f-brillo: #FFF1D8; --f-rosa-vivo: #FFF3DD; --f-rosa: #FFF5E3;
  --f-lila: #FFF2DC; --f-cielo: #FDEBCD; --f-final: #F8DCB0;
  --h-a: #FFF5E2; --h-b: #FFEFD2; --h-c: #FFE6BD;
  --h-n1: rgba(242, 155, 203, .38); --h-n2: rgba(253, 196, 160, .4); --h-n3: rgba(223, 208, 236, .4); --h-n4: rgba(255, 227, 161, .75);
}
html.fondo-crema.pagina--acerca   { --p0: #FFF6E6; --p1: #FFF5E3; --p2: #FFF2DC; --p3: #FDEBCD; --p4: #F8DCB0; }
html.fondo-crema.pagina--cursos   { --p0: #FFF5E3; --p1: #FFF3DE; --p2: #FFF0D6; --p3: #FCE8C6; --p4: #F7D9A9; }
html.fondo-crema.pagina--contacto { --p0: #FFF6E6; --p1: #FFF4E0; --p2: #FFF1D9; --p3: #FDEACB; --p4: #F8DCB0; }

/* Cielo: el azul claro de su brand kit (como la v3, que abría claro); el
   rosa sobre azul es el contraste más fuerte de la paleta */
html.fondo-cielo {
  --f-noche: #D8E9F5; --f-brillo: #DDECF7; --f-rosa-vivo: #E3F0F9; --f-rosa: #E9F3FA;
  --f-lila: #E2EEF8; --f-cielo: #D7E8F4; --f-final: #CAE0F0;
  --h-a: #EAF4FB; --h-b: #D8E9F5; --h-c: #C6DEF0;
  --h-n1: rgba(242, 155, 203, .35); --h-n2: rgba(255, 255, 255, .75); --h-n3: rgba(223, 208, 236, .55); --h-n4: rgba(0, 147, 212, .22);
}
html.fondo-cielo.pagina--acerca   { --p0: #EEF5FB; --p1: #E9F3FA; --p2: #E3EFF8; --p3: #DBEAF5; --p4: #CCE2F1; }
html.fondo-cielo.pagina--cursos   { --p0: #EDF5FB; --p1: #E7F1FA; --p2: #E0EDF7; --p3: #D7E7F4; --p4: #C9DFF0; }
html.fondo-cielo.pagina--contacto { --p0: #EFF6FB; --p1: #EAF3FA; --p2: #E4F0F8; --p3: #DCEBF6; --p4: #CEE3F2; }