/* ==========================================================================
   EXPERIMENTO — cajas de cristal blanco sobre un mapa de líneas claro,
   fondo azulado, con un degradado en el primer tercio superior.
   --------------------------------------------------------------------------
   Temporal, a petición explícita del usuario. Cómo revertir: quita el
   <link> a este archivo (y el <script> de experiment-glass.js) de
   informe.html — no toca ninguna otra regla base.

   Segunda ronda de diseño sobre la misma base (imagen de líneas + cajas de
   cristal + degradado superior) que ya se usó en la primera ronda, esta vez
   en azul en vez de cálido/crema — color de fondo dado por el usuario
   (#678FA2). Las líneas de fondo son azul marino de por sí, así que aquí
   NO se tiñen de cálido como en la ronda anterior: leen bien de forma
   nativa sobre este azul.

   A diferencia de las rondas con fondo OSCURO, aquí NO se toca --ink-* en
   ningún sitio: el azul de fondo es medio-claro y la tinta oscura de
   siempre ya lee bien tanto dentro como fuera de las cajas. Las cajas son
   cristal translúcido con desenfoque y sombra.

   OJO al editar: un comentario CSS no puede contener su propia secuencia
   de cierre en medio del texto — eso corta el comentario a mitad de
   frase y se come la regla siguiente (nos pasó hace unas rondas).
   ========================================================================== */

body.experiment-glass {
  background-color: #678FA2; /* azul dado por el usuario */
  position: relative;
}
/* La imagen vive en un pseudo-elemento aparte, no en background-image del
   body directamente — así su opacity deja ver el azul sólido de debajo en
   vez de taparlo. JS solo escribe la variable --experiment-bg-image (con
   ruta ABSOLUTA — ver el aviso en experiment-glass.js: una relativa se
   resuelve contra css/, no la página). Sin filter esta vez: las líneas ya
   son azul marino de por sí, no hace falta teñirlas como en la ronda
   cálida anterior. */
body.experiment-glass::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: var(--experiment-bg-image, none);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  opacity: 0.14;
  z-index: -1;
  pointer-events: none;
}
/* En móvil (pantalla alta y estrecha) "cover" tiene que agrandar la
   imagen mucho más de lo que parece: el límite que manda es la altura del
   viewport, y como la imagen es muy apaisada (~1672x941) eso obliga a un
   recorte muy ajustado en horizontal — se ve una porción diminuta de la
   imagen, ampliada muy por encima de su resolución nativa, y encima
   multiplicada por el pixel ratio del móvil (2x-3x): el resultado es ese
   "mucho zoom"/difuminado que se reportó, no un filtro de desenfoque real.
   Por debajo de 700px se cambia a un mosaico a un tamaño fijo y moderado
   en vez de "cover": nunca se amplía tanto como para notarse borroso, y al
   repetirse sigue llenando toda la pantalla igual que antes. */
@media (max-width: 700px) {
  body.experiment-glass::before {
    background-size: 480px auto;
    background-repeat: repeat;
    background-attachment: scroll;
  }
}
/* Velo sobre el primer tercio de la pantalla — un ::after aparte, no otra
   capa dentro del ::before de arriba, porque ese ya lleva su propio
   opacity y lo hubiera apagado también a él. Pinta encima del ::before
   (va después en el árbol), en el mismo plano fijo, así que la barra
   superior (con su propio fondo) queda por delante sin más. Se mantiene
   a tope un buen tramo antes de empezar a desvanecer — un fundido lineal
   desde el primer píxel se notaba muy corto/sutil aunque matemáticamente
   llegara al tercio; así se percibe como una franja larga de verdad, no
   solo una viñeta en el borde. Azul marino oscuro, más saturado que el
   fondo, para que se note el degradado sin romper la paleta. */
body.experiment-glass::after {
  content: '';
  position: fixed;
  inset: 0;
  background: linear-gradient(to bottom, rgba(27, 46, 61, 0.35) 0%, rgba(27, 46, 61, 0.35) 15%, rgba(27, 46, 61, 0) 33%);
  z-index: -1;
  pointer-events: none;
}

/* ---- las cajas en sí: cristal blanco translúcido + desenfoque + sombra
   propia (la --shadow-card base es casi invisible y, sin contorno, es lo
   único que separa la caja del fondo). ---- */
body.experiment-glass {
  --bg-raised: rgba(255, 255, 255, 0.95);
  --bg-sunken: rgba(255, 255, 255, 0.80);
}
body.experiment-glass .card,
body.experiment-glass .map-card,
body.experiment-glass .verdict-strip,
body.experiment-glass .domain-card,
body.experiment-glass .dining-stat,
body.experiment-glass .opp-row,
body.experiment-glass .topnav,
body.experiment-glass .btn:not(.btn-accent):not(.btn-primary) {
  backdrop-filter: blur(16px) saturate(1.15);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
  border-color: rgba(255, 255, 255, 0.5);
  box-shadow: 0 10px 30px -12px rgba(15, 22, 32, 0.125), 0 2px 10px rgba(15, 22, 32, 0.06);
  transition: background .15s ease, box-shadow .15s ease, transform .15s ease;
}
/* Hover de las "piezas" (filas de oportunidad en la home, tarjetas en las
   interiores): quita la transparencia de cristal — la señalada se ve de
   un blanco sólido frente al resto, que se queda translúcido. El cambio de
   opacidad solo (0.95→1) apenas se notaba sobre el fondo ya casi blanco de
   las cajas, así que se suma un desplazamiento mínimo hacia arriba y un
   halo de luz — no una sombra oscura más fuerte hacia abajo (esa ya la
   llevan en reposo, vía el bloque de arriba): el primer box-shadow es un
   brillo blanco centrado (offset 0,0) que se reparte igual en las cuatro
   direcciones, como si la pieza se iluminara al señalarla; el segundo es
   la sombra de siempre, pero más suave, solo para que no quede plana. */
body.experiment-glass .card:not(.qual-card):hover,
body.experiment-glass .map-card:hover,
body.experiment-glass .domain-card:hover,
body.experiment-glass .dining-stat:hover,
body.experiment-glass .opp-row:hover {
  background: #fff;
  transform: translateY(-2px);
  box-shadow: 0 0 32px 6px rgba(255, 255, 255, 0.45), 0 4px 16px -8px rgba(15, 22, 32, 0.15);
}

/* La franja del agente pasa a oscura, con los mismos tokens --ink y --bg
   invertidos a blanco para que toda regla que ya los usa (campo de texto,
   pastillas de sugerencia, hilo de mensajes) se vuelva blanca sola, sin
   tocarla una a una. El negro puro (rgba(0,0,0,…)) leía como una caja
   negra encima del azul del fondo, no como parte de la misma paleta — el
   mismo azul marino oscuro del degradado superior (27,46,61), más opaco,
   para que lea como "azul oscuro", no como "negro". */
body.experiment-glass .chat-dock {
  background: rgba(27, 46, 61, 0.82);
  backdrop-filter: blur(16px) saturate(1.15);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
  border-top-color: rgba(255, 255, 255, 0.12);
  --ink-100: #fff;
  --ink-70: rgba(255, 255, 255, 0.85);
  --ink-45: rgba(255, 255, 255, 0.78);
  --ink-25: rgba(255, 255, 255, 0.5);
  --bg-raised: rgba(255, 255, 255, 0.12);
  --bg-sunken: rgba(255, 255, 255, 0.08);
  --line: rgba(255, 255, 255, 0.14);
  --line-strong: rgba(255, 255, 255, 0.22);
}
/* La burbuja del usuario se queda en su crema de siempre (no en el negro
   invertido de arriba) — su texto tiene que seguir oscuro ahí, o quedaría
   blanco sobre un fondo claro, ilegible. */
body.experiment-glass .chat-dock .chat-msg.user .bubble {
  color: #2A2017;
}
/* El campo de pregunta pierde la caja (fondo + borde completo). La línea
   inferior ahora vive en el input mismo, no en dock-input-box — así solo
   raya el ancho del campo de texto y termina antes de llegar al botón de
   enviar, en vez de correr por debajo de los dos. Muy sutil (no un borde
   que compita visualmente con el texto). */
body.experiment-glass .dock-input-box {
  border: none;
  border-radius: 0;
  background: transparent;
  padding: var(--space-2) 0;
}
body.experiment-glass .dock-ask-input {
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  /* Mismo tamaño y peso que el texto de la conversación (ver
     .chat-msg .bubble más abajo): antes el campo iba a --text-display
     (28px) y luego a 20px medium, y desencajaba con los 18px normales de
     los globos — ahora son el mismo estilo exacto, solo que más apagado,
     para que siga leyéndose como "campo de escritura", no como un mensaje
     ya puesto. */
  font-size: 1.125rem;
  font-weight: var(--weight-regular);
  color: rgba(255, 255, 255, 0.55);
}
body.experiment-glass .dock-input-box:focus-within .dock-ask-input {
  border-bottom-color: rgba(255, 255, 255, 0.4);
}
/* El texto de la conversación sube un poco (16px → 18px) para acercarse
   al del campo de arriba — mismo criterio: menos distancia entre "lo que
   escribo" y "lo que leo", sin llegar a igualarlos del todo. */
body.experiment-glass .chat-msg .bubble {
  font-size: 1.125rem;
}
/* Bocadillo del agente: negro sobre el azul oscuro del chat-dock (no un
   tono fijo — así se oscurece justo lo pedido respecto al fondo que tenga
   detrás, en vez de competir con él). Empezó al 10%, subido a petición. */
body.experiment-glass .chat-msg.agent .bubble {
  background: rgba(0, 0, 0, 0.18);
}
/* El placeholder, igual: menos opaco que el --ink-45 general de la franja,
   para que se lea como sugerencia de relleno y no como texto ya escrito. */
body.experiment-glass .dock-ask-input::placeholder {
  color: rgba(255, 255, 255, 0.45);
}
/* Sin pastillas de sugerencia por ahora. */
body.experiment-glass .dock-suggestions {
  display: none;
}
/* El botón de enviar, al mismo tamaño que "+ nueva oportunidad" (un .btn
   normal) en vez del btn-sm que trae por defecto en el dock — y de paso
   "recalibrar este informe" (verdict-strip), que es btn-sm también y
   quedaba más bajo que el de enviar. No se toca .btn-sm a secas: hay otros
   sitios (el toggle pegar/subir de información cualitativa, por ejemplo)
   donde sí debe quedarse pequeño. */
body.experiment-glass .chat-dock .dock-ask-form .btn-sm,
body.experiment-glass .verdict-strip .btn-sm {
  padding: var(--space-2) var(--space-4);
}
/* La bola de IA: 26px → 34px (30% más grande) se quedó algo grande —
   bajada 7px. Los halos de color son porcentuales (inset:-20%) así que
   escalan solos con el tamaño. */
body.experiment-glass .dock-avatar {
  width: 27px;
  height: 27px;
}

/* El título de la página (p.ej. "Oportunidades" en la home, o el título de
   cada ámbito) vive fuera de cualquier caja, directamente sobre el fondo
   azul — la tinta oscura de siempre no se lee ahí; a blanco, al 60% para
   que quede como un título sobre el tapiz, no como texto de contenido. */
body.experiment-glass .page-head h1 {
  color: rgba(255, 255, 255, 0.85);
}
/* Mismo problema en todas las cabeceras de página sin caja (Configuración,
   Fuentes, Ámbito, Teaser, Nueva oportunidad…): la miga de pan (.crumb) vive
   siempre directamente sobre el tapiz — auditado: no se usa en ningún sitio
   DENTRO de una caja blanca — así que, a diferencia de .body-muted/.label a
   secas (que sí se reutilizan dentro de cajas), aquí sí podemos tocar la
   clase sin más. .body-muted y .label SOLO se tocan cuando cuelgan
   directamente de .page-head (la cabecera sin caja), nunca a secas. */
body.experiment-glass .crumb,
body.experiment-glass .crumb a {
  color: rgba(255, 255, 255, 0.55);
}
body.experiment-glass .crumb a:hover {
  color: #fff;
}
body.experiment-glass .page-head .body-muted {
  color: rgba(255, 255, 255, 0.75);
}
body.experiment-glass .page-head .label {
  color: rgba(255, 255, 255, 0.6);
}
body.experiment-glass .page-head .meta-row .meta-item {
  color: rgba(255, 255, 255, 0.65);
}
body.experiment-glass .page-head .meta-row .meta-item b {
  color: rgba(255, 255, 255, 0.92);
}

/* Cabecera de columnas de la tabla de oportunidades (Proyecto/Ubicación/…):
   flota sobre el tapiz igual que el h1, sin caja propia — mismo problema
   de contraste con la tinta oscura de siempre. */
body.experiment-glass .opp-head {
  color: rgba(255, 255, 255, 0.75);
}
/* El icono "?" de ayuda de cada columna, solo usado ahí (.opp-head), con
   su propio borde/color oscuro fijo — igual de ilegible que el resto sobre
   el tapiz. La burbuja (.tip-bubble) no se toca: siempre es fondo oscuro
   con texto blanco, da igual el tema de la página. */
body.experiment-glass .info-tip .tip-icon {
  border-color: rgba(255, 255, 255, 0.4);
  color: rgba(255, 255, 255, 0.75);
}
body.experiment-glass .info-tip .tip-icon:hover,
body.experiment-glass .info-tip.open .tip-icon {
  border-color: var(--cyan);
  color: #fff;
}

/* Enlace suelto en una cabecera sin caja (p.ej. "Configuración" en el
   párrafo de intro de Fuentes) — el cyan-ink de siempre es casi invisible
   sobre el tapiz azul; mismo cyan claro que ya usa el resto del tema. */
body.experiment-glass .page-head-link {
  color: #7FE3F0;
}

/* Caja de aviso en Teaser ("todavía no se ha activado ningún agente"):
   mismo problema que el aviso de expediente incompleto — el wash
   translúcido de siempre (10%) se queda sucio sobre el azul de fondo.
   Redefine --ink-100/--ink-70 en vez de tocar .body-strong/.body-muted
   a secas, para que el texto de dentro (que usa esas clases) herede el
   contraste correcto sin más — mismo patrón que .qual-card. */
body.experiment-glass .start-box {
  background: #FBD9C0;
  border-color: #D96A1F;
  --ink-100: #5C2A06;
  --ink-70: #6B3B12;
}
body.experiment-glass .start-box.done {
  background: #CBEBDA;
  border-color: #1C9A6C;
  --ink-100: #0F4A33;
  --ink-70: #1C5A41;
}

/* Párrafo de intro que cuelga del page-head pero vive fuera de él (p.ej.
   Nueva oportunidad) — clase propia, para no tocar .body-faint a secas. */
body.experiment-glass .page-head-intro {
  color: rgba(255, 255, 255, 0.75);
}

/* Nota a pie de la lista de oportunidades — mismo problema: vive sobre el
   tapiz, sin caja propia. Clase propia (no .body-faint a secas, que se usa
   también DENTRO de las cajas blancas y ahí sí debe seguir oscuro). */
body.experiment-glass .page-footnote {
  color: rgba(255, 255, 255, 0.6);
}

/* El botón de "Filtrar" vive ahora junto al título, sobre el tapiz — mucho
   más transparente que un botón normal (que usa --bg-raised, ya casi
   opaco) y con el texto en blanco, a juego con el título de al lado. */
body.experiment-glass .filter-btn {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.3);
  color: rgba(255, 255, 255, 0.85);
}
/* El desplegable de Filtrar usa --bg-raised, casi opaco — lo bajamos
   aparte (no tocando --bg-raised global, que necesitan las tarjetas) y le
   damos desenfoque para que el texto oscuro de las opciones se siga
   leyendo encima de lo que haya detrás. */
body.experiment-glass .filter-panel {
  background: rgba(255, 255, 255, 0.55);
  border-color: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(16px) saturate(1.15);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
}

/* La barra superior pasa a oscura, más que el fondo azul, con su contenido
   en blanco — redefiniendo --ink-* aquí dentro (igual que en las rondas de
   fondo oscuro) toda regla existente que ya usa var(--ink-100)/var(--ink-45)
   (el lockup, los links de Configuración/Fuentes, sus iconos con
   stroke/fill="currentColor") se vuelve blanca sola, sin tocar esas reglas
   una a una. Negro puro (antes rgba(0,0,0,.4)) leía como una barra negra
   encima del azul, no como parte de la misma paleta — y con tan poca
   opacidad, las cajas blancas que pasan por debajo al hacer scroll se
   veían "a través" de la barra, una sensación rara. Mismo azul marino
   oscuro que el resto de piezas oscuras de esta página (franja del
   agente, información cualitativa), bastante más opaco. */
body.experiment-glass .topnav {
  background: rgba(27, 46, 61, 0.88);
  border-bottom-color: rgba(255, 255, 255, 0.12);
  --ink-100: #fff;
  --ink-70: rgba(255, 255, 255, 0.85);
  --ink-45: rgba(255, 255, 255, 0.78);
  --ink-25: rgba(255, 255, 255, 0.5);
}
/* El hover del lockup usaba --cyan-ink, un tono oscuro pensado para fondo
   claro — ilegible sobre la barra negra. A naranja de marca (el mismo del
   botón primario) en vez de blanco llano, para que el hover se note. */
body.experiment-glass .topnav .brand:hover {
  color: var(--orange);
}
/* El aviso de "simulación" se queda fuera del blanqueo de arriba: a
   propósito en amarillo, con más cuerpo (relleno y borde más opacos) para
   que de verdad lea como aviso y no se diluya en la barra oscura. */
body.experiment-glass .topnav .proto-pill {
  color: #FFD668;
  background: rgba(255, 196, 61, 0.28);
  border-color: rgba(255, 196, 61, 0.6);
}

/* Naranja de "+ nueva oportunidad" / "iniciar proceso" (btn-primary).
   Los dos intentos anteriores mezclaban gris con el --orange de marca
   (#F2560C) para "desaturarlo", pero eso solo lo oscurecía, no bajaba su
   intensidad — un naranja más oscuro sigue leyendo como naranja vivo.
   Esta vez es el naranja de marca tal cual, pero a un 80% de opacidad: dejar
   que se note un poco el azul de debajo es lo que realmente le quita
   intensidad al ojo. */
body.experiment-glass .btn-primary {
  background: rgba(242, 86, 12, 0.8);
  /* Sin borde: con el mismo color que el relleno pero su propio canal
     alpha, el borde de 1px se mezclaba de forma ligeramente distinta al
     fondo en cada píxel y se notaba como un contorno — más oscuro/vivo,
     un anillo indeseado alrededor del botón. */
  border-color: transparent;
}

/* "Información cualitativa" es la única caja que pide acción del usuario
   (añadir algo), no solo lectura — por eso no se queda en cristal blanco
   como el resto: azul marino oscuro y bastante más opaco que un tinte
   (no un cristal translúcido), sin borde, con sombra oscura marcada — lee
   como "caja vacía, por rellenar", no como una tarjeta de contenido más.
   Con el fondo ya oscuro de verdad (no solo un tinte de baja opacidad
   sobre cristal blanco), el texto de dentro pasa a los --ink-* claros,
   igual que en la barra del agente o la cabecera: toda regla que ya usa
   var(--ink-100)/var(--ink-70)/var(--ink-45) (título, subtítulo, entradas
   de la lista, formulario) se vuelve clara sola. */
body.experiment-glass .qual-card {
  /* El (7,20,34) de antes leía demasiado neutro/negro; el (27,46,61) de
     después igualaba la barra superior y la franja del agente, pero aquí
     pide un paso más claro — un tono más arriba en la misma paleta (no un
     cambio de opacidad), más 10 puntos de transparencia sobre el 0.85
     anterior. */
  background: rgba(73, 88, 100, 0.75);
  border-color: transparent;
  /* Sin sombra de elevación: esta caja no es contenido flotando sobre el
     fondo como el resto de tarjetas — es un campo de entrada (pide que el
     usuario añada algo), así que se queda pegada al fondo, casi a ras. */
  box-shadow: none;
  backdrop-filter: blur(16px) saturate(1.15);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
  --ink-100: #fff;
  --ink-70: rgba(255, 255, 255, 0.85);
  --ink-45: rgba(255, 255, 255, 0.65);
  --ink-25: rgba(255, 255, 255, 0.4);
  --bg-raised: rgba(255, 255, 255, 0.1);
  --bg-sunken: rgba(255, 255, 255, 0.07);
  --bg: rgba(255, 255, 255, 0.07);
  --line: rgba(255, 255, 255, 0.14);
  --line-strong: rgba(255, 255, 255, 0.24);
  /* Colores de delta más claros que los -ink de siempre (pensados para
     texto sobre blanco) — ver la variable en base.css y qualDeltaColor()
     en js/app.js. */
  --qual-delta-pos: #4ADE94;
  --qual-delta-neg: #FF9466;
}
/* "Falta información", unificada en un único bloque: antes era una tarjeta
   blanca de aviso ("Falta información de X") más una tarjeta aparte, gris-
   azulada, para el formulario — ahora es un solo bloque, en el mismo azul
   oscuro y saturado de la barra superior y la franja del agente (no el
   gris-azulado de siempre, que aquí se leía empastado/sucio). Hereda el
   resto (--ink-*, --bg-*, blur…) de .qual-card arriba — solo cambia el
   fondo. */
body.experiment-glass .qual-card.qual-card-missing {
  background: rgba(27, 46, 61, 0.88);
}
/* La pastilla de ámbito (qual-domain-tag, solo en la vista "informe
   completo") usa --cyan-ink sobre --cyan-wash — pensada para cristal
   blanco; sobre este fondo oscuro de verdad se volvía casi invisible. */
body.experiment-glass .qual-card .qual-domain-tag {
  color: #7FE3F0;
  background: rgba(11, 165, 184, 0.22);
}
/* Mismo problema, mismo arreglo: el toggle "pegar texto / subir
   documento" marca el activo con --cyan-ink sobre --cyan-wash. */
body.experiment-glass .qual-card .qual-source-toggle button.active {
  color: #7FE3F0;
  background: rgba(11, 165, 184, 0.22);
  border-color: rgba(11, 165, 184, 0.4);
}

/* El desplegable de Filtrar, mismo criterio y mismo tono que la caja de
   información cualitativa de arriba — pide una acción (elegir estados),
   así que se distingue del resto con el mismo azul oscuro de baja
   opacidad en vez del cristal blanco por defecto. */
body.experiment-glass .filter-panel {
  background: rgba(10, 26, 42, 0.18);
  backdrop-filter: blur(16px) saturate(1.15);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
}

/* Nota a pie de informe (pesos usados / pedida por…): vive directamente
   sobre el tapiz, sin caja propia — mismo problema de contraste que el
   resto de textos sueltos de esta página. */
body.experiment-glass .page-end-note {
  color: rgba(255, 255, 255, 0.6);
}

/* ==========================================================================
   HOVER NORMALIZADO DE BOTONES — un solo criterio para todos: al pasar el
   ratón, el botón pierde un poco de opacidad (se "apaga" ligeramente), en
   vez de que cada variante oscurezca su propio color de fondo a mano
   (btn-primary a --orange-ink, btn-accent a --cyan-ink…). Esas reglas de
   base.css seguían aplicando aquí encima del tapiz y quedaban mal — un
   botón que se oscurece sobre un fondo ya oscuro apenas se distingue. Con
   esto, "recalibrar este informe", "+ añadir información", "enviar",
   "+ nueva oportunidad", "iniciar proceso"… todos comparten el mismo
   gesto de hover.
   ========================================================================== */
body.experiment-glass .btn {
  transition: opacity .15s ease, background .15s ease, box-shadow .15s ease, transform .15s ease;
}
body.experiment-glass .btn:hover {
  opacity: 0.85;
}
/* Neutraliza el oscurecimiento de base.css para estas dos variantes — el
   hover ya lo resuelve la opacidad de arriba, no hace falta que además
   cambien de color. */
body.experiment-glass .btn-primary:hover {
  background: rgba(242, 86, 12, 0.8);
  border-color: transparent;
  color: #fff;
}
body.experiment-glass .btn-accent:hover {
  background: var(--cyan);
  border-color: var(--cyan);
  /* Sin esto, el .btn:hover de base.css ("color: var(--ink-100)", pensado
     para los botones de cristal) le pone texto oscuro encima del cyan. */
  color: #fff;
}
