/* =============================================================================
   HEBB · Mockup 03 «ITINERARIO»
   Hoja 4 de 4 — Composiciones específicas de pantalla.
   Solo lo que no puede resolverse con el sistema de las hojas 1-3.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   1. ACCESO
   Dos mitades en escritorio: a la izquierda el trámite, a la derecha el
   contexto del centro. En móvil se apila y la marca queda arriba, pequeña.
   -------------------------------------------------------------------------- */
.acceso { min-height: calc(100vh - var(--barra-mockup-alto)); display: grid; }
.acceso__col {
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--e-8) var(--e-5);
}
.acceso__caja { width: 100%; max-width: 400px; margin: 0 auto; }
.acceso__logo { display: flex; align-items: center; gap: var(--e-3); margin-bottom: var(--e-6); }
.acceso__logo-svg { width: 44px; height: 44px; }
.acceso__nombre { font-family: var(--fuente-titular); font-weight: var(--peso-negro); font-size: var(--txt-lg); letter-spacing: -.02em; }
.acceso__centro { font-size: var(--txt-xs); color: var(--tinta-2); }
.acceso h1 { font-size: var(--txt-2xl); margin-bottom: var(--e-2); }
.acceso__sub { color: var(--tinta-2); margin-bottom: var(--e-6); }

.acceso__lado {
  display: none;
  position: relative;
  overflow: hidden;
  padding: var(--e-10);
  color: var(--sobre-marca);
  background:
    radial-gradient(120% 120% at 12% 92%, var(--marca-brillo), transparent 55%),
    linear-gradient(150deg, var(--marca-a), var(--marca-b) 72%);
  align-content: center;
}
.acceso__lado h2 { color: var(--sobre-marca); font-size: var(--txt-2xl); max-width: 18ch; }
.acceso__lado p { color: var(--sobre-marca-2); margin-top: var(--e-4); max-width: 40ch; }
.acceso__lado-lista { display: grid; gap: var(--e-4); margin-top: var(--e-8); }
.acceso__lado-item { display: flex; gap: var(--e-3); align-items: flex-start; font-size: var(--txt-sm); color: var(--sobre-marca-3); }
.acceso__lado-item svg { width: 22px; height: 22px; flex: none; color: var(--marca-icono); }
.acceso__lado-arco { position: absolute; border: 30px solid var(--marca-arco); border-radius: var(--r-full); pointer-events: none; }

.acceso__sep {
  display: flex; align-items: center; gap: var(--e-3);
  margin: var(--e-5) 0;
  color: var(--tinta-3); font-size: var(--txt-xs);
}
.acceso__sep::before, .acceso__sep::after { content: ''; height: 1px; background: var(--borde); flex: 1; }

.acceso__proveedor {
  display: flex; align-items: center; justify-content: center; gap: var(--e-3);
  width: 100%; min-height: var(--toque-min);
  padding: var(--e-3);
  border: 1.5px solid var(--borde-fuerte);
  border-radius: var(--r-full);
  background: var(--panel);
  font-size: var(--txt-sm); font-weight: var(--peso-fuerte);
  cursor: pointer;
  margin-bottom: var(--e-3);
}
.acceso__proveedor:hover { background: var(--hundido); }
.acceso__proveedor svg { width: 20px; height: 20px; }

/* Casillas del código de verificación en dos pasos. */
.codigo { display: flex; gap: var(--e-2); }
.codigo input {
  width: 46px; height: 56px;
  text-align: center;
  font-family: var(--fuente-titular);
  font-size: var(--txt-xl); font-weight: var(--peso-negro);
  border: 1.5px solid var(--borde-fuerte);
  border-radius: var(--r-md);
  background: var(--panel); color: var(--tinta);
  font-variant-numeric: tabular-nums;
}
.codigo input:focus { outline: none; border-color: var(--primario); box-shadow: var(--sombra-foco); }
.codigo input.lleno { border-color: var(--primario); background: var(--primario-sup); }

@media (min-width: 1024px) {
  .acceso { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
  .acceso__lado { display: grid; }
}

/* -----------------------------------------------------------------------------
   2. VISOR DE LECCIÓN
   En móvil manda la lectura: una columna, medida de línea controlada, índice
   en cajón. En escritorio el índice se ancla a la izquierda.
   -------------------------------------------------------------------------- */
.leccion { display: flex; align-items: flex-start; }

.leccion__indice {
  display: none;
  width: 300px; flex: none;
  position: sticky;
  top: calc(var(--barra-mockup-alto) + var(--cabecera-alto));
  max-height: calc(100vh - var(--barra-mockup-alto) - var(--cabecera-alto));
  overflow-y: auto;
  padding: var(--e-4) var(--e-3) var(--e-10);
  border-right: 1px solid var(--borde);
  background: var(--panel);
}
body.mk-oculta .leccion__indice { top: var(--cabecera-alto); max-height: calc(100vh - var(--cabecera-alto)); }

.leccion__cuerpo { flex: 1; min-width: 0; padding: var(--e-5) var(--e-4) calc(96px + var(--e-8)); }
.leccion__texto { max-width: var(--ancho-lectura); margin: 0 auto; }
.leccion__texto h2 { margin: var(--e-8) 0 var(--e-3); }
.leccion__texto h3 { margin: var(--e-6) 0 var(--e-2); }
.leccion__texto p { margin-bottom: var(--e-4); line-height: var(--interlinea-suelta); color: var(--tinta-2); }
.leccion__texto ul, .leccion__texto ol { margin: 0 0 var(--e-4) var(--e-5); color: var(--tinta-2); line-height: var(--interlinea-suelta); }
.leccion__texto li { margin-bottom: var(--e-2); }
.leccion__texto strong { color: var(--tinta); }

.leccion__figura { margin: var(--e-6) 0; }
.leccion__figura figcaption { font-size: var(--txt-xs); color: var(--tinta-3); margin-top: var(--e-2); text-align: center; }
.leccion__marco {
  border: 1px solid var(--borde);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--hundido);
}

/* Bloque de saber clave: se distingue por franja y etiqueta, no por color solo. */
.clave-bloque {
  border: 1px solid var(--primario-borde);
  border-left: 5px solid var(--primario);
  background: var(--primario-sup);
  border-radius: var(--r-md);
  padding: var(--e-4) var(--e-5);
  margin: var(--e-6) 0;
}
.clave-bloque__eti {
  font-size: var(--txt-eti); font-weight: var(--peso-negro);
  letter-spacing: .09em; text-transform: uppercase; color: var(--primario);
  display: flex; align-items: center; gap: var(--e-2); margin-bottom: var(--e-2);
}
.clave-bloque__eti svg { width: 15px; height: 15px; }

/* Bloque interactivo de comprobación dentro de la lección. */
.interactivo {
  border: 2px dashed var(--secundario-borde);
  border-radius: var(--r-lg);
  background: var(--secundario-sup);
  padding: var(--e-5);
  margin: var(--e-6) 0;
}
.interactivo__eti { font-size: var(--txt-eti); font-weight: var(--peso-negro); letter-spacing: .09em; text-transform: uppercase; color: var(--secundario-txt); }

/* Barra de herramientas de lectura (voz, tamaño, contraste). */
.lectura-tools { display: flex; flex-wrap: wrap; gap: var(--e-2); align-items: center; }

/* Pie fijo de navegación entre lecciones: el «siguiente paso» del visor. */
.leccion__pie {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 45;
  display: flex; align-items: center; gap: var(--e-3);
  padding: var(--e-3) var(--e-4) max(var(--e-3), env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--panel) 95%, transparent);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--borde);
}
.leccion__pie-centro { flex: 1; min-width: 0; text-align: center; font-size: var(--txt-xs); color: var(--tinta-2); }
.leccion__pie-centro .cinta { margin-top: var(--e-1); }

/* La cabecera del visor prioriza «volver» e «índice». El avance global del
   curso ya está en el pie fijo, así que en pantallas estrechas se retira de
   aquí para que las cuatro piezas quepan sin desbordar. */
@media (max-width: 560px) {
  .leccion-cab-pct { display: none; }
}

@media (min-width: 1024px) {
  .leccion__indice { display: block; }
  .leccion__cuerpo { padding: var(--e-8) var(--e-8) calc(96px + var(--e-8)); }
  .leccion__pie { left: 300px; }
}

/* -----------------------------------------------------------------------------
   3. EVALUACIÓN
   -------------------------------------------------------------------------- */
.eval { max-width: 780px; margin: 0 auto; }

/* Mapa de preguntas: es un itinerario corto. Cada casilla dice su estado
   por relleno y por texto accesible, no por color. */
.mapa-preg { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.mapa-preg button {
  width: 40px; height: 40px;
  border: 1.5px solid var(--borde-fuerte);
  border-radius: var(--r-sm);
  background: var(--panel);
  color: var(--tinta-2);
  font-weight: var(--peso-fuerte);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.mapa-preg button:hover { border-color: var(--primario); }
.mapa-preg .resp { background: var(--primario-sup); border-color: var(--primario); color: var(--primario); }
.mapa-preg .actual { background: var(--primario); border-color: var(--primario); color: var(--tinta-inv); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primario) 26%, transparent); }
.mapa-preg .revisar { border-style: dashed; border-color: var(--aviso); color: var(--aviso); }

.crono {
  display: inline-flex; align-items: center; gap: var(--e-2);
  padding: var(--e-2) var(--e-4);
  border-radius: var(--r-full);
  background: var(--hundido);
  border: 1px solid var(--borde);
  font-variant-numeric: tabular-nums;
  font-weight: var(--peso-negro);
  font-family: var(--fuente-titular);
}
.crono svg { width: 17px; height: 17px; }
.crono--urgente { background: var(--riesgo-sup); border-color: var(--riesgo); color: var(--riesgo); }

/* Resultado: la nota se muestra grande, con su contexto y el mínimo exigido. */
.nota {
  display: grid; place-items: center;
  width: 132px; height: 132px;
  border-radius: var(--r-full);
  font-family: var(--fuente-titular);
  border: 6px solid;
}
.nota__valor { font-size: 2.6rem; font-weight: var(--peso-negro); line-height: 1; font-variant-numeric: tabular-nums; }
.nota__sobre { font-size: var(--txt-xs); font-weight: var(--peso-fuerte); }
.nota--apto { background: var(--exito-sup); border-color: var(--exito); color: var(--exito); }
.nota--no-apto { background: var(--riesgo-sup); border-color: var(--riesgo); color: var(--riesgo); }
.nota--pendiente { background: var(--aviso-sup); border-color: var(--aviso); color: var(--aviso); }

.revision { display: grid; gap: var(--e-3); }
.revision__item {
  padding: var(--e-4);
  border: 1px solid var(--borde);
  border-left: 5px solid var(--borde-fuerte);
  border-radius: var(--r-md);
  background: var(--panel);
}
.revision__item--bien { border-left-color: var(--exito); }
.revision__item--mal { border-left-color: var(--riesgo); }
.revision__item--parcial { border-left-color: var(--aviso); }
.revision__enunciado { font-weight: var(--peso-fuerte); font-size: var(--txt-sm); }
.revision__resp { font-size: var(--txt-sm); color: var(--tinta-2); margin-top: var(--e-2); }
.revision__feedback {
  margin-top: var(--e-3); padding: var(--e-3);
  background: var(--hundido); border-radius: var(--r-sm);
  font-size: var(--txt-sm); color: var(--tinta-2);
}

/* -----------------------------------------------------------------------------
   4. COMUNICACIÓN — foro y mensajes
   -------------------------------------------------------------------------- */
.hilo { display: grid; gap: var(--e-3); }
.hilo__item {
  display: flex; gap: var(--e-3);
  padding: var(--e-4);
  border: 1px solid var(--borde);
  border-radius: var(--r-lg);
  background: var(--panel);
  text-decoration: none; color: inherit;
}
a.hilo__item:hover { border-color: var(--primario); text-decoration: none; }
.hilo__item--no-leido { border-left: 5px solid var(--primario); background: var(--primario-sup); }
.hilo__titulo { font-weight: var(--peso-fuerte); font-size: var(--txt-base); }
.hilo__meta { font-size: var(--txt-xs); color: var(--tinta-2); display: flex; flex-wrap: wrap; gap: var(--e-3); margin-top: var(--e-1); }

.msg { display: flex; gap: var(--e-3); padding: var(--e-4) 0; }
.msg--anidado { padding-left: var(--e-8); border-left: 2px solid var(--borde); margin-left: var(--e-4); }
.msg__cuerpo { flex: 1; min-width: 0; }
.msg__cab { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e-2); }
.msg__autor { font-weight: var(--peso-fuerte); font-size: var(--txt-sm); }
.msg__fecha { font-size: var(--txt-xs); color: var(--tinta-3); }
.msg__txt { font-size: var(--txt-sm); color: var(--tinta-2); margin-top: var(--e-2); line-height: var(--interlinea-suelta); }
.msg__acciones { display: flex; gap: var(--e-2); margin-top: var(--e-2); }

/* Conversación privada: burbujas. La propia se distingue por posición,
   alineación y etiqueta «Tú», no solo por el color de fondo. */
.burbuja { max-width: 84%; padding: var(--e-3) var(--e-4); border-radius: var(--r-lg); font-size: var(--txt-sm); }
.burbuja__quien { font-size: var(--txt-xs); font-weight: var(--peso-fuerte); margin-bottom: 2px; display: block; }
.burbuja--recibida { background: var(--hundido); border: 1px solid var(--borde); border-bottom-left-radius: var(--r-xs); margin-right: auto; }
.burbuja--enviada { background: var(--primario-sup); border: 1px solid var(--primario-borde); border-bottom-right-radius: var(--r-xs); margin-left: auto; }
.burbuja__hora { font-size: var(--txt-eti); color: var(--tinta-3); margin-top: var(--e-1); display: block; }

.adjunto {
  display: inline-flex; align-items: center; gap: var(--e-2);
  padding: var(--e-2) var(--e-3);
  border: 1px solid var(--borde);
  border-radius: var(--r-sm);
  background: var(--hundido);
  font-size: var(--txt-xs);
  color: var(--tinta-2);
  text-decoration: none;
}
.adjunto:hover { border-color: var(--primario); color: var(--primario); }
.adjunto svg { width: 16px; height: 16px; }

/* -----------------------------------------------------------------------------
   5. CONFIGURACIÓN E IDENTIDAD VISUAL
   -------------------------------------------------------------------------- */
.ajuste {
  display: grid; gap: var(--e-3);
  padding: var(--e-4) 0;
  border-bottom: 1px solid var(--borde);
}
.ajuste:last-child { border-bottom: 0; }
.ajuste__txt { min-width: 0; }
.ajuste__nombre { font-weight: var(--peso-fuerte); font-size: var(--txt-sm); }
.ajuste__desc { font-size: var(--txt-xs); color: var(--tinta-2); margin-top: 2px; }
.ajuste__control { display: flex; align-items: center; gap: var(--e-2); flex-wrap: wrap; }
@media (min-width: 768px) {
  .ajuste { grid-template-columns: minmax(0, 1fr) 300px; align-items: center; gap: var(--e-5); }
}

/* Muestras de color del editor de marca. */
.muestras { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: var(--e-3); }
.muestra { border: 1px solid var(--borde); border-radius: var(--r-md); overflow: hidden; background: var(--panel); }
.muestra__color { height: 62px; }
.muestra__pie { padding: var(--e-2) var(--e-3); }
.muestra__nombre { font-size: var(--txt-xs); font-weight: var(--peso-fuerte); }
.muestra__hex { font-family: var(--fuente-mono); font-size: var(--txt-eti); color: var(--tinta-2); }
.muestra__ratio { font-size: var(--txt-eti); font-weight: var(--peso-fuerte); display: flex; align-items: center; gap: 3px; margin-top: 2px; }
.muestra__ratio svg { width: 12px; height: 12px; }
.muestra__ratio--ok { color: var(--exito); }
.muestra__ratio--mal { color: var(--riesgo); }

/* Previsualización de marca en vivo. */
.previa {
  border: 1px solid var(--borde);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--hundido);
}
.previa__barra {
  display: flex; align-items: center; gap: var(--e-2);
  padding: var(--e-2) var(--e-3);
  background: var(--panel);
  border-bottom: 1px solid var(--borde);
  font-size: var(--txt-xs);
  color: var(--tinta-2);
}
.previa__lienzo { padding: var(--e-5); }

/* -----------------------------------------------------------------------------
   6. PORTADA DEL MOCKUP (index.html)
   -------------------------------------------------------------------------- */
.portada-hero {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-2xl);
  padding: var(--e-10) var(--e-6);
  color: var(--sobre-marca);
  background:
    radial-gradient(110% 130% at 96% 4%, var(--marca-brillo), transparent 52%),
    linear-gradient(145deg, var(--marca-a), var(--marca-b) 74%);
  margin-bottom: var(--e-8);
}
.portada-hero h1 { color: var(--sobre-marca); font-size: var(--txt-3xl); max-width: 20ch; }
.portada-hero p { color: var(--sobre-marca-2); margin-top: var(--e-4); max-width: 58ch; font-size: var(--txt-lg); }
.portada-hero__arco { position: absolute; border: 34px solid var(--marca-arco); border-radius: var(--r-full); pointer-events: none; }

.indice-rej { display: grid; gap: var(--e-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 268px), 1fr)); }
.indice-card {
  display: flex; flex-direction: column; gap: var(--e-2);
  padding: var(--e-5);
  border: 1px solid var(--borde);
  border-radius: var(--r-lg);
  background: var(--panel);
  text-decoration: none; color: inherit;
  box-shadow: var(--sombra-1);
  transition: transform var(--mov-base) var(--curva), box-shadow var(--mov-base) var(--curva);
}
.indice-card:hover { transform: translateY(-3px); box-shadow: var(--sombra-2); text-decoration: none; border-color: var(--primario-borde); }
.indice-card__n {
  font-family: var(--fuente-mono);
  font-size: var(--txt-eti);
  color: var(--primario);
  font-weight: var(--peso-negro);
  letter-spacing: .1em;
}
.indice-card__t { font-family: var(--fuente-titular); font-weight: var(--peso-negro); font-size: var(--txt-base); letter-spacing: -.02em; }
.indice-card__d { font-size: var(--txt-xs); color: var(--tinta-2); }
.indice-card__f { font-family: var(--fuente-mono); font-size: var(--txt-eti); color: var(--tinta-3); margin-top: auto; padding-top: var(--e-2); }

/* Tira de escala tipográfica y demás muestras del sistema. */
.muestra-tipo { display: grid; gap: var(--e-4); }
.muestra-tipo__fila { display: grid; gap: var(--e-1); padding-bottom: var(--e-3); border-bottom: 1px solid var(--borde); }
.muestra-tipo__meta { font-family: var(--fuente-mono); font-size: var(--txt-eti); color: var(--tinta-3); }

.tira-radios { display: flex; flex-wrap: wrap; gap: var(--e-4); }
.tira-radios div { text-align: center; font-size: var(--txt-eti); color: var(--tinta-2); font-family: var(--fuente-mono); }
.tira-radios i { display: block; width: 76px; height: 56px; background: var(--primario-sup); border: 1.5px solid var(--primario-borde); margin-bottom: var(--e-1); }

.tira-sombras { display: flex; flex-wrap: wrap; gap: var(--e-5); }
.tira-sombras div { text-align: center; font-size: var(--txt-eti); color: var(--tinta-2); font-family: var(--fuente-mono); }
.tira-sombras i { display: block; width: 96px; height: 66px; background: var(--panel); border-radius: var(--r-md); margin-bottom: var(--e-2); }

/* -----------------------------------------------------------------------------
   7. AULA VIRTUAL / SESIÓN
   -------------------------------------------------------------------------- */
.sesion-card {
  display: flex; gap: var(--e-3); align-items: flex-start;
  padding: var(--e-4);
  border: 1px solid var(--borde);
  border-radius: var(--r-md);
  background: var(--panel);
}
.sesion-card--proxima { border-color: var(--primario-borde); background: var(--primario-sup); }
.sesion-card__icono { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: var(--r-sm); background: var(--hundido); color: var(--tinta-2); }
.sesion-card--proxima .sesion-card__icono { background: var(--primario); color: var(--tinta-inv); }

/* -----------------------------------------------------------------------------
   8. FICHA DE USUARIO (administración)
   -------------------------------------------------------------------------- */
.ficha-cab {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-4);
  padding: var(--e-5);
  border-radius: var(--r-lg);
  background:
    linear-gradient(140deg, var(--primario-sup), var(--panel) 70%);
  border: 1px solid var(--borde);
}
.ficha-cab__nombre { font-family: var(--fuente-titular); font-size: var(--txt-xl); font-weight: var(--peso-negro); letter-spacing: -.02em; }
.ficha-cab__mail { font-size: var(--txt-sm); color: var(--tinta-2); }

/* Línea de tiempo de actividad de una persona. */
.actividad { list-style: none; margin: 0; padding: 0; position: relative; }
.actividad li { position: relative; padding: 0 0 var(--e-5) var(--e-8); }
.actividad li::before {
  content: '';
  position: absolute; left: 11px; top: 20px; bottom: -2px;
  width: 2px; background: var(--borde);
}
.actividad li:last-child::before { display: none; }
.actividad__punto {
  position: absolute; left: 0; top: 3px;
  width: 24px; height: 24px;
  display: grid; place-items: center;
  border-radius: var(--r-full);
  background: var(--hundido);
  border: 2px solid var(--borde-fuerte);
  color: var(--tinta-2);
}
.actividad__punto svg { width: 13px; height: 13px; }
.actividad__punto--bien { background: var(--exito-sup); border-color: var(--exito); color: var(--exito); }
.actividad__punto--ojo { background: var(--aviso-sup); border-color: var(--aviso); color: var(--aviso); }
.actividad__punto--mal { background: var(--riesgo-sup); border-color: var(--riesgo); color: var(--riesgo); }
.actividad__qué { font-size: var(--txt-sm); font-weight: var(--peso-medio); }
.actividad__cuando { font-size: var(--txt-xs); color: var(--tinta-3); font-variant-numeric: tabular-nums; }

/* -----------------------------------------------------------------------------
   9. PERFIL
   -------------------------------------------------------------------------- */
.perfil-cab {
  display: flex; flex-direction: column; align-items: center; gap: var(--e-3);
  text-align: center;
  padding: var(--e-6) var(--e-5);
}
@media (min-width: 640px) {
  .perfil-cab { flex-direction: row; text-align: left; align-items: center; }
}

/* Selector de tema en el perfil: tres opciones con muestra visual. */
.tema-ops { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e-3); }
.tema-op { cursor: pointer; }
.tema-op input { position: absolute; opacity: 0; }
.tema-op__vista {
  border: 2px solid var(--borde);
  border-radius: var(--r-md);
  overflow: hidden;
  height: 74px;
  display: grid;
  transition: border-color var(--mov-rapido) var(--curva);
}
.tema-op input:checked + .tema-op__vista { border-color: var(--primario); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primario) 24%, transparent); }
.tema-op input:focus-visible + .tema-op__vista { box-shadow: var(--sombra-foco); }
.tema-op__nombre { display: block; text-align: center; font-size: var(--txt-xs); font-weight: var(--peso-fuerte); margin-top: var(--e-2); }
.tema-op__nombre::after { content: ''; }
.tema-op input:checked ~ .tema-op__nombre { color: var(--primario); }
.tema-op__claro { background: linear-gradient(160deg, var(--muestra-claro-1) 55%, var(--muestra-claro-2)); }
.tema-op__oscuro { background: linear-gradient(160deg, var(--muestra-oscuro-1) 55%, var(--muestra-oscuro-2)); }
.tema-op__auto { background: linear-gradient(105deg, var(--muestra-claro-1) 50%, var(--muestra-oscuro-1) 50%); }