/* ==========================================================================
   GELÉE — proteico.css
   El tema oscuro de la línea alta en proteína.

   Va cargado al final, después de todas las demás hojas, y solo en las
   páginas de /proteico/. No define ni un componente nuevo: casi todo lo que
   hay aquí es el bloque de tokens de base.css con otros valores. Por eso las
   diez hojas del sitio claro sirven igual en los dos mundos sin tocarse.

   La paleta sale del propio logotipo proteico, que ya viene dibujado sobre
   negro: el crema del trazo es el acento y el negro del fondo es el papel.
   ========================================================================== */

:root {
  /* El papel. No es negro puro, que sobre pantalla OLED se ve como un agujero
     y hace que el borde de las fotos corte en seco. Un gris muy oscuro deja
     que la foto del producto, que también está tirada sobre negro, se funda
     con la página en vez de recortarse contra ella. */
  --fondo:      #0F0F12;
  --superficie: #17171B;  /* tarjetas y campos, apenas por encima del papel */
  --tenue:      #1D1D22;  /* secciones alternas y el hueco de una foto que carga */

  /* El crema del logotipo. Sobre el fondo oscuro da 15:1, así que aquí el
     acento sí puede llevar texto encima sin problema, cosa que en el sitio
     claro no pasaba con el rosa. */
  --marca:        #F0E5CF;
  --marca-oscuro: #FFF7E7;  /* aquí el hover aclara en vez de oscurecer */
  --sobre-marca:  #0F0F12;  /* el botón es claro, así que su texto es el fondo */

  --texto:       #EFEAE1;
  --texto-suave: #A29A8D;
  --linea:       #2B2B31;

  /* El rojo de la validación estaba pensado para papel claro y sobre negro se
     apagaba hasta perderse. Este es el mismo tono subido de luz. */
  --error: #E8705A;

  /* El pie no puede ir del color de acento como en el sitio claro: un bloque
     crema del ancho de la pantalla al final de una página oscura deslumbra.
     Va un punto por encima del papel, que lo separa sin encenderlo. */
  --pie-fondo: #131317;
  --pie-texto: #EFEAE1;
  --pie-linea: rgba(240, 229, 207, 0.16);

  /* Una sombra negra sobre fondo negro no existe. La tarjeta ya se sostiene
     con su borde, así que la de producto se queda sin sombra y la de la barra
     se cambia por una más profunda, que ahí sí hace falta para despegarla del
     contenido que le pasa por debajo. */
  --sombra-tarjeta: none;
  --sombra-barra:   0 6px 24px rgba(0, 0, 0, 0.55);

  /* Los controles que dibuja el navegador y no el sitio: el calendario del
     campo de fecha, la lista que despliega el <select>, las barras de
     desplazamiento. Sin esto los pinta claros, y en una página negra el
     icono del calendario queda negro sobre negro y no se ve. */
  color-scheme: dark;
}

/* --------------------------------------------------------------------------
   Lo que no es token
   Tres cosas del sitio llevan el color escrito a mano y no pueden leer una
   variable. Son las únicas reglas de esta hoja.
   -------------------------------------------------------------------------- */

/* 1. El degradado del fondo. Mismo dibujo que en claro, un óvalo más claro en
      el centro que se apaga hacia los bordes, pero al revés de brillo. Los
      cinco pasos siguen siendo cinco por lo mismo de siempre: una rampa larga
      y muy suave en 8 bits por canal sale con anillos si se hace con tres. */
body::before {
  background-image: radial-gradient(ellipse at 50% 38%,
                                    #26262D 0%,
                                    var(--fondo) 26%,
                                    #0A0A0C 55%,
                                    #060608 82%,
                                    #030304 100%);
}

/* 2. La ola que entra al pie. El color va quemado dentro del SVG porque una
      variable de CSS no se lee dentro de un data URI, así que la regla entera
      se repite aquí con el otro tono. Es el mismo dibujo, solo cambia el
      relleno: %23131317 es --pie-fondo escrito en la única forma que admite
      una URL. */
.pie::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='40' viewBox='0 0 280 40'%3E%3Cpath d='M0 20 C 35 8, 105 8, 140 20 S 245 32, 280 20 L280 40 L0 40 Z' fill='%23131317'/%3E%3C/svg%3E");
}

/* 3. El logotipo de la portada. Los dos son JPEG, o sea que traen fondo a la
      fuerza, y en las dos páginas el fondo se borra con una mezcla en vez de
      recortando el archivo. En claro es multiply, que deja pasar lo oscuro y
      hace desaparecer el blanco. Aquí es justo la operación contraria, porque
      el logotipo proteico viene dibujado sobre negro: screen deja pasar lo
      claro y hace desaparecer el negro. */
.hero__logo img { mix-blend-mode: screen; }

/* 4. El disco de las flechas del carrusel. Va encima de la foto, así que tiene
      que seguir siendo translúcido, pero del lado oscuro. */
:root { --velo-foto: rgba(15, 15, 18, 0.72); }