/* ═══════════════════════════════════════════════════════════
   QUINDA — agua con gas
   Tema magenta. Sólo variables y las cinco piezas propias de esta
   demo; todo lo demás sale de base.css.

   LA DECISIÓN QUE ORDENA TODO: acá el fondo NO es oscuro. Las otras
   cinco demos son negras con un acento; ésta es un color pleno de
   punta a punta, y el negro aparece una sola vez, en el manifiesto.

   Y por eso el negro funciona: después de dos pantallas de magenta,
   una sección negra se lee como bajar el volumen. Si la página fuera
   negra desde el principio, esa misma sección no diría nada.

   ⚠ --bg tiene que ser EXACTAMENTE el data-fondo-base del canvas
   (#96002F), que va deliberadamente MÁS OSCURO que el magenta que se
   ve: el telón le suma el halo encima y el resultado es el color final. El telón del shader pinta todos los píxeles de la
   pantalla: si no coinciden, se ve un escalón donde termina el canvas
   al cargar y donde el canvas no llega.
   ═══════════════════════════════════════════════════════════ */

:root{
  /* El magenta, en tres tonos. El del medio es el que aparece detrás
     del producto (lo pinta el foco del telón); el oscuro es el borde
     y el claro es el que se usa para texto y filetes. */
  --bg:          #96002F;
  --bg-2:        #A80038;
  --surface:     rgba(255,255,255,.10);
  --surface-2:   rgba(255,255,255,.16);
  --line:        rgba(255,255,255,.22);
  --line-strong: rgba(255,255,255,.38);

  --text:        #FFFFFF;
  --text-2:      rgba(255,255,255,.86);
  --muted:       rgba(255,255,255,.62);

  /* El acento es BLANCO, no un color. Sobre un magenta pleno cualquier
     acento de color se pelea con el fondo; el blanco lo obedece. Es la
     misma razón por la que los botones son cápsulas blancas. */
  --accent:      #FFFFFF;
  --accent-2:    #FFFFFF;
  --accent-deep: #FFE3EC;
  --on-accent:   #96002F;
  --glow:        rgba(255,255,255,.42);
  --glow-soft:   rgba(255,255,255,.13);

  --vidrio:       linear-gradient(165deg,rgba(255,255,255,.14),rgba(255,255,255,.05));
  --vidrio-fuerte:linear-gradient(165deg,rgba(255,255,255,.22),rgba(255,255,255,.07));
  --campo-bg:     rgba(255,255,255,.10);

  --tracking-h: -.045em;
  --radius: 22px;
  --radius-sm: 14px;
  --radius-pill: 100px;

  /* Sin sombras violetas: acá todo lo que brilla, brilla blanco. */
  --sh-depth: 0 8px 30px rgba(120,0,40,.45);
  --sh-lit:   0 0 24px rgba(255,255,255,.35);
  --sh-hover: 0 0 22px rgba(255,255,255,.8), 0 0 56px rgba(255,255,255,.35);
  --sh-suave: 0 2px 12px rgba(120,0,40,.4);
  --sombra-panel: 0 40px 90px -58px rgba(90,0,30,.9);

  /* El grano se nota mucho más sobre un color pleno que sobre negro:
     va a la mitad. */
  --grano-op: .028;
  --vineta: radial-gradient(110% 92% at 50% 44%, transparent 58%, rgba(120,0,40,.42) 100%);

  /* La filigrana. El tamaño del mosaico manda tanto como el dibujo:
     a 300 px se lee como una tela estampada y a 900 como manchas
     sueltas. 560 es donde se lee como escritura. */
  --filigrana:     url('../img/filigrana.svg');
  --filigrana-tam: 620px;
  /* Dos números que se calibraron juntos y hay que tocarlos juntos: a
     460 px de mosaico y 10 % de opacidad la filigrana se adelantaba al
     contenido —se leía como un empapelado y no como una marca de agua—.
     A 620 el trazo queda proporcionalmente más fino y con 5,5 % pasa a
     ser lo que tiene que ser: algo que se nota recién cuando lo mirás. */
  --filigrana-op:  .055;

  /* Las píldoras: blancas con el magenta adentro. */
  --pil-bg:  #FFFFFF;
  --pil-txt: #16161A;
}

/* El respaldo de CSS también tiene que ser magenta: es lo que se ve
   el instante anterior a que arranque el canvas, y un parpadeo negro
   en una página magenta se ve como un error de carga. */
.bg-static{
  background:
    radial-gradient(58% 46% at 50% 42%, #E92C71, transparent 72%),
    radial-gradient(70% 60% at 50% 100%, #9E0038, transparent 76%),
    var(--bg);
}

/* ── El claim de dos renglones al lado del logo ──
   Es del lenguaje de la referencia y hace un trabajo concreto: dice de
   qué se trata la marca sin gastar una línea de titular. Va en cuerpo
   9 px porque no está para leerse de una: está para que el ojo
   registre que hay una frase ahí. */
.header__logo--claim{ display:flex; align-items:center; gap:.8rem }
.header__logo--claim em{
  font-style:normal; font-weight:400;
  font-size:.62rem; line-height:1.35; letter-spacing:.02em;
  color:var(--text-2); max-width:16ch;
}
@media (max-width:900px){ .header__logo--claim em{ display:none } }

/* ── El hero de marca ──
   Tres planos apilados: la ronda de latas (canvas fijo, detrás de
   todo), el personaje y el cartel con el nombre. El texto vive arriba
   a la izquierda y no en el medio, porque el medio y la derecha son
   del producto. */
.hero--marca{
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:flex-start;
  padding-top:calc(var(--header-h) + clamp(2rem,7vh,5rem));
  padding-bottom:0;
  overflow:hidden;   /* sólo acá: el cartel sangra por los costados */
}
.hero--marca .hero__inner{ position:relative; z-index:2; max-width:46rem }
.hero--marca .hero__lead{ max-width:34ch; color:var(--text-2) }
.hero--marca .eyebrow{ color:rgba(255,255,255,.72) }
.hero--marca .eyebrow::before{ background:#fff }

/* El cartel: pegado al piso del hero y sangrando por los dos lados.
   margin-top:auto lo empuja abajo sin tener que calcular altos. */
.hero__cartel{ margin-top:auto; position:relative; z-index:1 }
.hero__cartel .titulo-outline{
  /* 19vw y no un clamp con tope: el cartel TIENE que sangrar. Con un
     tope en rem, a partir de cierto ancho la palabra deja de tocar los
     bordes y el efecto se convierte en un titular grande y nada más. */
  font-size:19vw;
  /* ⚠ Nada de margen negativo acá. El primer intento le puso -.08em
     para que la letra "apoyara" en el borde de abajo, y lo que hizo
     fue empujar el cartel entero fuera del hero: a 1520 px la palabra
     terminaba en el píxel 1083 con la pantalla en 1000, o sea un
     tercio del titular abajo del pliegue. El recorte que hace falta ya
     lo da .outline-marco con su overflow:hidden. */
  margin-bottom:0;
}

/* La mascota del hero: anclada al piso, sobre el cartel.
   ⚠ Las orejas son la mitad de la altura del personaje. Si se lo sube
   o se lo agranda, lo primero que se pisa es el titular de arriba, no
   el cartel de abajo. */
/* 33 % y pegada al borde, no 38 % y separada. Dos motivos medidos: a
   560 px de ancho el personaje mide 933 de alto y arranca en el píxel
   67, o sea que le pasa por al lado a la barra de navegación; y
   separado del borde tapa la lata de adelante justo por la marca. */
/* El conejo que recorre la página.
   ⚠ El tope de 430 px no es estético: los recortes miden 449 y 513 px
   de ancho y salen de una captura de pantalla, así que ése es TODO el
   material que hay. Mostrarlo más grande es estirarlo por encima de su
   resolución real y se ve blando. Si algún día aparece el render
   original, este número sube. */
.mascota--viaje{
  --mascota-w:29%; --mascota-max:430px;
}

/* ── La sección del club ── */
.seccion--club{ position:relative; overflow:hidden }
.club__grid{ position:relative; z-index:2; max-width:52rem }
.seccion--club .h2{ max-width:14ch }
/* ── El manifiesto: se HUNDE, no se apaga ──
   Acá había un rectángulo negro opaco a pantalla completa. La idea era
   buena —después de dos pantallas de magenta, bajar el volumen— y la
   ejecución estaba mal por dos motivos:

     1 · Un negro plano de borde a borde no se lee como una pausa, se
         lee como que la página se cortó. No hay nada en toda la demo
         que sea un rectángulo, y ese lo era.
     2 · Y sobre todo: HACÍA DESAPARECER EL PRODUCTO justo en la
         sección que explica por qué el producto existe. Una pantalla
         entera de la landing de una bebida sin la bebida.

   Ahora el corte se hace con PROFUNDIDAD y no con una tapa: un
   degradado vertical que entra desde transparente, cierra en el medio
   y vuelve a abrir. Se lee como que ahí el agua es más honda, que es
   exactamente lo que viene contando la página desde el hero, y las
   latas siguen ahí, como siluetas apagadas detrás del texto.

   ⚠ EL VELO NO PUEDE PASAR DE ~0,66 EN EL MEDIO. Más arriba de eso las
   latas se pierden y volvés a tener el rectángulo negro, sólo que con
   bordes suaves. Más abajo, el blanco del párrafo empieza a pelear
   contra las cáusticas, que son luz en movimiento y son lo peor que
   puede haber detrás de un texto. */
.seccion--noche{
  position:relative;
  padding-block:clamp(6rem,13vw,10.5rem);
}
.seccion--noche::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(180deg,
    rgba(9,4,10,0)   0%,
    rgba(9,4,10,.52) 12%,
    rgba(9,4,10,.66) 40%,
    rgba(9,4,10,.64) 80%,
    rgba(9,4,10,.30) 94%,
    rgba(9,4,10,0)  100%);
}
/* Todo lo que sea contenido va ARRIBA del velo. Sin esto el degradado
   se pinta encima del texto y el manifiesto se lee gris. */
.seccion--noche > *{ position:relative; z-index:1 }

/* El párrafo se corre a la DERECHA, y no es una decisión de gusto: la
   tabla de actos deja la ronda de latas a la izquierda (x −0,36) justo
   en el tramo de scroll donde vive esta sección. Con el texto centrado
   o a la izquierda, lo único que se ve del producto queda tapado por
   las palabras. Si algún día se cambian los actos, hay que volver a
   mirar de qué lado queda. */
.noche__grid{
  position:relative;
  display:grid; grid-template-columns:.9fr 1.1fr;
  gap:clamp(2rem,5vw,4rem); align-items:center;
}
.noche__grid > div{ grid-column:2 }
@media (max-width:900px){
  .noche__grid{ grid-template-columns:1fr }
  .noche__grid > div{ grid-column:1 }
}
/* Con las latas atrás, el blanco necesita un piso propio: la sombra es
   invisible sobre el velo y salva el renglón que cruza una cáustica. */
.seccion--noche .lectura{ text-shadow:0 2px 18px rgba(0,0,0,.85) }

/* La fila de comercios viene de base.css con opacidad 0,46 y en gris,
   que es lo correcto cuando atrás no hay nada. Con las latas asomando
   detrás, ese gris al 46 % se convierte en barro. Acá va a color y con
   su propia sombra: sigue siendo un dato secundario, pero se lee. */
.seccion--noche .logos{ opacity:.78; filter:none }
.seccion--noche .logos span,
.seccion--noche .noche__pie{ text-shadow:0 2px 14px rgba(0,0,0,.9) }
.seccion--noche .lectura{ color:#fff }
.seccion--noche .lectura .lw{ color:#fff }
.mascota--noche{
  position:relative; align-self:end;
  --mascota-w:100%; --mascota-max:none;
  right:auto; bottom:auto;
  filter:drop-shadow(0 30px 50px rgba(0,0,0,.6));
}
@media (max-width:860px){ .mascota--noche{ max-width:280px; margin-inline:auto } }

.noche__pie{
  margin-top:clamp(3rem,7vw,5rem); margin-bottom:1rem;
  font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(255,255,255,.45);
}

/* ── El titular de marca en las secciones internas ── */
.h2{ font-weight:600 }

/* ── La tira de sabores ── */
.sabor{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.82rem; color:var(--text-2);
  padding:.42rem .9rem; border-radius:100px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.08);
}
.sabor i{
  width:9px; height:9px; border-radius:50%; flex:none;
  background:var(--s); box-shadow:0 0 10px var(--s);
}

/* ── La ficha ── */
.ficha{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(.8rem,2vw,1.4rem);
}
@media (max-width:760px){ .ficha{ grid-template-columns:repeat(2,1fr) } }
.ficha__dato{
  padding:clamp(1.1rem,2.4vw,1.7rem);
  border:1px solid var(--line); border-radius:var(--radius);
  background:var(--vidrio); text-align:center;
}
.ficha__dato b{
  display:block; font-size:clamp(2rem,5vw,3.4rem); font-weight:600;
  letter-spacing:-.05em; line-height:1;
}
.ficha__dato span{
  display:block; margin-top:.5rem;
  font-size:.78rem; color:var(--muted); letter-spacing:.04em;
}

/* ── La lista de la góndola ── */
.gondola{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:.7rem; margin-top:clamp(1.6rem,3vw,2.4rem);
}
/* ⚠ ESTAS PÍLDORAS CAEN ENCIMA DEL PRODUCTO Y TIENEN QUE SER VIDRIO.
   En este tramo del scroll la ronda está en x 0,38 (ver ACTOS_RONDA) y
   la fila llega hasta el borde derecho del contenedor: las tres de esa
   punta quedan escritas sobre una lata amarilla y una frambuesa. Con
   el 7 % de blanco que tenían no se leía "Cafeterías de especialidad".

   La respuesta no es correr la lista a la izquierda —seis rubros en
   una columna angosta es una lista que nadie termina— ni tapar el
   producto. Es el mismo vidrio esmerilado que usan las tarjetas de
   sabores: la lata sigue viéndose detrás, desenfocada, y el texto
   apoya sobre algo. */
.gondola__item{
  display:flex; align-items:center; gap:.8rem;
  padding:1rem 1.3rem; border-radius:var(--radius-sm);
  border:1px solid var(--line);
  background:rgba(255,255,255,.10);
  backdrop-filter:blur(14px) saturate(1.15);
  -webkit-backdrop-filter:blur(14px) saturate(1.15);
  font-size:.95rem; color:var(--text-2);
}
.gondola__item b{ font-weight:500; color:var(--text) }
/* El dato de la derecha iba en --muted, que es blanco al 62 %: sobre
   el magenta se leía y sobre la lata de limón desaparecía. */
.gondola__item span{ font-size:.85rem; color:var(--text-2); margin-left:auto }

/* ── El cintillo de la lata ── */
.cintillo{
  display:flex; height:5px; border-radius:100px; overflow:hidden;
  margin-top:clamp(1.8rem,4vw,2.6rem);
  box-shadow:0 0 22px rgba(255,255,255,.22);
}
.cintillo i{ flex:1 }

/* ── En vertical ──
   El personaje pasa a ser una silueta chica pegada abajo a la derecha
   y el texto se queda con la pantalla entera. En una landing de
   producto en el celular el orden es: qué es, cuánto sale, dónde se
   compra. El personaje es de la marca, no de la venta. */
@media (max-width:760px){
  /* En vertical el conejo pasa a ser un acompañante y no un
     protagonista: la mitad de tamaño y pegado al borde. En una
     pantalla de 390 px, un personaje al 29 % tapa la columna de texto
     entera, que es todo lo que hay. */
  .mascota--viaje{ --mascota-w:44%; --mascota-max:210px }
  .hero__cartel .titulo-outline{ font-size:23vw }
  .hero--marca .hero__lead{ max-width:26ch }
  .sabor{ font-size:.75rem; padding:.34rem .7rem }
}

/* ── El reflejo de los títulos: una lata por sección ──
   En las otras cinco demos el reflejo es el color de la marca y es el
   mismo en toda la página. Acá la marca no tiene UN color: tiene
   cinco, y son los cinco sabores. Así que cada sección se lleva el
   suyo y el que scrollea de arriba abajo recorre la línea entera sin
   que se lo cuenten.

   Las paradas de los extremos quedan en blanco —el color del texto—
   porque sobre el magenta cualquier otra cosa deja de leerse. Lo que
   cambia es el color de la luz, no el de la letra.

   ⚠ EL ROJO DE FRUTOS ROJOS VA LEVANTADO. El color real de esa lata
   (#C2185B) es más oscuro que el fondo de la página: pasado sobre
   letras blancas no se lee como luz, se lee como una sombra. Es el
   único de los cinco que no puede ir tal cual, y se usa la misma
   frambuesa subida de luminosidad. */
.reflejo{
  --rf-1: var(--text);
  --rf-3: var(--text);
  --rf-luz: 6.5s;
}
#club     .reflejo{ --rf-2:#FF5C8A }   /* pomelo rosado    */
#sabores  .reflejo{ --rf-2:#39C08A }   /* pepino y menta   */
#donde    .reflejo{ --rf-2:#F2D14B }   /* limón y jengibre */
#preguntas .reflejo{ --rf-2:#FF8A3D }  /* maracuyá         */
#contacto .reflejo{ --rf-2:#F0417A }   /* frutos rojos     */

/* ── El telón de entrada, que acá es un afiche ──
   Misma tipografía y mismo cuerpo que el cartel del hero (19vw, que
   sangra por los dos costados), y una letra por sabor. No es un
   adorno: es lo primero que se ve, y deja dicho en un segundo que la
   marca son cinco cosas y no una.

   ⚠ 19vw Y NO UN clamp CON TOPE. Es la misma medida del <h1> del
   hero, y tiene que ser la misma: la palabra del telón se disuelve
   creciendo justo cuando el telón se abre, y atrás aparece la misma
   palabra en contorno. Si los cuerpos no coinciden, ese pase se lee
   como dos carteles distintos en vez de uno que se transforma. */
.cortina--afiche .cortina__marca{
  gap:0;
  font-size:19vw; line-height:.82; font-weight:700;
  letter-spacing:-.045em; text-transform:uppercase;
  /* La palabra crece al irse: sin esto el telón la recorta. */
  overflow:hidden;
}
.cortina--afiche .lc{ font-weight:inherit }

/* Los cinco sabores repartidos en las SEIS letras de la marca.
   No van en el orden de data-sabores: acá el orden lo manda el color.

   Dos reglas, y las dos salieron de verlo mal antes de verlo bien:

   1 · La sexta letra vuelve al rosa de la primera. Con seis letras y
       cinco sabores hay que repetir uno, y repetirlo en los EXTREMOS se
       lee como que la palabra cierra donde abrió; repetirlo en el medio,
       o al lado de su gemela, se lee como que faltó un color.

   2 · Rosa y fucsia nunca van pegados. Son los dos tonos más parecidos
       de los cinco y uno al lado del otro parecen la misma tinta mal
       impresa. Como el rosa ocupa las dos puntas, al fucsia sólo le
       quedan las posiciones del medio: acá va tercero, flanqueado por
       el verde y el naranja, que es donde más se despega.

   ⚠ Frutos rojos va levantado respecto de la lata, igual que en el
   reflejo: el #C2185B real es más oscuro que este fondo y la letra se
   apagaría. */
.lc--1{ color:#FF5C8A }   /* pomelo rosado           */
.lc--2{ color:#39C08A }   /* pepino y menta          */
.lc--3{ color:#F0417A }   /* frutos rojos            */
.lc--4{ color:#FF8A3D }   /* maracuyá                */
.lc--5{ color:#F2D14B }   /* limón y jengibre        */
.lc--6{ color:#FF5C8A }   /* pomelo rosado, otra vez */

/* La barrita de carga, debajo del afiche, en blanco: el acento del
   tema ya es blanco, pero acá conviene dejarlo escrito porque la
   sección es la única que no se ve nunca junto al resto. */
.cortina--afiche .cortina__barra i{ background:#fff }

/* ── Las tres píldoras del club: cápsulas, no barras blancas ──
   Venían del sistema en blanco pleno con texto negro, que es lo
   correcto en una landing de servicio y acá quedaba de plantilla:
   tres rectángulos redondeados en el único sitio de las seis demos que
   no tiene un solo elemento plano.

   Ahora son vidrio, y el color entra POR EL LADO IZQUIERDO y se
   desvanece hacia la derecha —como líquido dentro de una cápsula—, uno
   por sabor. Al apuntarla el líquido avanza hasta llenarla y el borde
   se enciende de ese color: es el mismo gesto de estirarse que ya
   tenía, con algo adentro que se mueve.

   ⚠ El relleno va en un ::before y NO en el background de la píldora.
   El fondo de la píldora se anima junto con el ancho, y un degradado
   que cambia de tamaño al mismo tiempo que la caja se ve como un
   temblor. El ::before se mide contra su propia caja y avanza con
   transform, que no repinta nada. */
.seccion--club .pildora{
  position:relative; overflow:hidden; isolation:isolate;
  --pil-bg:rgba(255,255,255,.12);
  --pil-txt:#fff;
  border:1px solid rgba(255,255,255,.30);
  backdrop-filter:blur(16px) saturate(1.2);
  -webkit-backdrop-filter:blur(16px) saturate(1.2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34), 0 18px 44px -32px rgba(0,0,0,.8);
  transition:width .35s var(--ease-mat), box-shadow .35s var(--ease-mat),
             transform .35s var(--ease-mat), border-color .35s var(--ease-mat);
}
.seccion--club .pildora::before{
  content:''; position:absolute; inset:0; z-index:-1;
  /* ⚠ El primer intento arrancaba el degradado en 0 % y con opacidad
     .62, y el pomelo desaparecía: es un rosa sobre un magenta, o sea
     el mismo tono. Lo que lo salva no es más opacidad sola, es que el
     color tenga un tramo PLENO antes de empezar a desvanecerse —así
     hay un borde donde el ojo lo engancha— y que el desvanecido llegue
     más lejos, para que se lea como líquido y no como una franja. */
  background:linear-gradient(90deg,
    var(--p,#fff) 0%,
    var(--p,#fff) 13%,
    color-mix(in srgb, var(--p,#fff) 52%, transparent) 42%,
    transparent 86%);
  opacity:.8;
  transform:translateX(-14%);
  transition:transform .5s var(--ease-mat), opacity .5s var(--ease-mat);
}
/* Sin color-mix el degradado se cae entero y la píldora queda gris.
   Dos paradas con el mismo color alcanzan: se pierde el medio tono. */
@supports not (background:color-mix(in srgb, red 50%, transparent)){
  .seccion--club .pildora::before{
    background:linear-gradient(90deg, var(--p,#fff) 0%, transparent 74%);
  }
}
/* El punto del sabor, al final del renglón: el mismo lenguaje que la
   tira de sabores de la sección de abajo. */
.seccion--club .pildora::after{
  content:''; position:absolute; right:clamp(1.2rem,2.6vw,2rem); top:50%;
  width:10px; height:10px; margin-top:-5px; border-radius:50%;
  background:var(--p,#fff); box-shadow:0 0 14px var(--p,#fff);
  transition:transform .4s var(--ease-mat);
}
@media (hover:hover){
  .seccion--club .pildora:hover{
    border-color:var(--p,#fff);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.4),
               0 30px 60px -34px rgba(0,0,0,.85),
               0 0 34px -8px var(--p,#fff);
  }
  .seccion--club .pildora:hover::before{ transform:translateX(0); opacity:.9 }
  .seccion--club .pildora:hover::after{ transform:scale(1.35) }
}
.seccion--club .pildora.is-activa{ border-color:var(--p,#fff) }
.seccion--club .pildora.is-activa::before{ transform:translateX(0); opacity:.9 }

/* ── Las tarjetas que giran ──
   El frente se queda translúcido a propósito: es la única demo donde
   detrás de las tarjetas hay algo que vale la pena mirar —las latas—.
   Pero translúcido de verdad, no transparente: el 62 % de magenta
   oscuro alcanza para que la lata se lea como una forma detrás y el
   texto tenga sobre qué apoyarse. Sin esta capa la lata queda nítida
   adentro de la tarjeta (ver el aviso de .gira__frente en base.css). */
.tarjeta-gira{
  --gira-fondo:rgba(74,0,26,.62);
  /* La tinta del dorso va más oscura que el --on-accent del tema. Ese
     magenta está pensado para leerse sobre BLANCO —los botones—, y acá
     el dorso es el color del sabor: sobre el verde del pepino y sobre
     el amarillo del limón ese mismo magenta pierde filo. */
  --gira-tinta:#48001A;
}