/* Estilos para encabezados y párrafos */

#contenido-etiquetas, #contenido-atributos, #contenido-eventos,
#contenido-capas, #contenido-display, #contenido-fuentes,
#contenido-gradient, #contenido-colores,
#contenido-tonos, #contenido-canvas {transition: all 0.3s;}

#contenido-etiquetas h1, #contenido-etiquetas h2, #contenido-etiquetas h4,
#contenido-etiquetas h6, #contenido-atributos h1, #contenido-atributos h2, 
#contenido-eventos h1, #contenido-eventos h2, #contenido-eventos h3, 
#contenido-capas h1, #contenido-capas h2, #contenido-display h1, 
#contenido-display h2, #contenido-display h4, #contenido-fuentes h1,
#contenido-fuentes h2, #contenido-gradient h1, #contenido-gradient h2,
#contenido-colores h1, #contenido-colores h2, #contenido-tonos h1, 
#contenido-tonos h2, #contenido-tonos h3, #contenido-canvas h1, 
#contenido-canvas h2, #contenido-canvas h3, #contenido-svg h1,
#contenido-svg h2, #contenido-canvas-animado h1, 
#contenido-canvas-animado h2 {display: inline-block; transition: .3s linear;}


#contenido-eventos h3 {color: var(--primary-color);}
#contenido-etiquetas h6 {font-size: var(--font-size-base);}

#contenido-etiquetas h1:hover, #contenido-etiquetas h2:hover, 
#contenido-etiquetas h4:hover, #contenido-atributos h1:hover, 
#contenido-atributos h2:hover, #contenido-eventos h1:hover, 
#contenido-eventos h2:hover, #contenido-eventos h3:hover,
#contenido-capas h1:hover, #contenido-capas h2:hover,
#contenido-display h1:hover, #contenido-display h2:hover, 
#contenido-display h4:hover, #contenido-fuentes h1:hover,
#contenido-fuentes h2:hover, #contenido-gradient h1:hover, 
#contenido-gradient h2:hover, #contenido-colores h1:hover, 
#contenido-colores h2:hover, #contenido-tonos h1:hover,
#contenido-tonos h2:hover, #contenido-tonos h3:hover,
#contenido-canvas h1:hover, #contenido-canvas h2:hover, 
#contenido-canvas h3:hover, #contenido-svg h1:hover,
#contenido-svg h2:hover, #contenido-canvas-animado h1:hover, 
#contenido-canvas-animado h2:hover {
 transition: .3s linear;
 padding: 5px;
 color: hsl(calc(var(--hue) / 2), calc(var(--saturation) * 0.7), calc(var(--lightness) * 1.2));
 box-shadow: 2px 2px 8px var(--card-shadow);
}

#contenido-etiquetas h4, #contenido-etiquetas h6 {margin: 10px 0;}

#contenido-etiquetas p, #contenido-atributos p, #contenido-eventos p,
#contenido-capas p, #contenido-display p, #contenido-fuentes p,
#contenido-gradient p, #contenido-colores p, #contenido-tonos p,
#contenido-canvas p {
  font-size: calc(var(--font-size-base) * 1.1);
  line-height: var(--line-height-base);
  width: 100%; 
  max-width: 95%;
  margin-left: 30px;
  transition: all 0.3s linear;
}

#contenido-etiquetas code, #contenido-atributos code,
#contenido-eventos code, #contenido-capas code,
#contenido-fuentes code, #contenido-display code,
#contenido-gradient code, #contenido-colores code,
#contenido-tonos code {
  font-family: Consolas, "Liberation Mono", Courier, monospace; 
  font-weight: bold; 
  color: var(--color-code); /* #7f0a0c; */
  font-size: var(--font-size-code); 
  display: inline-block; 
  width: auto; 
  height: auto;
  white-space: nowrap;
  transition: all 0.3s linear;
}

#contenido-etiquetas code:hover, #contenido-atributos code:hover,
#contenido-eventos code:hover,#contenido-capas code:hover, 
#contenido-fuentes code:hover, #contenido-display code:hover,
#contenido-gradient code:hover, #contenido-colores code:hover,
#contenido-tonos code:hover {
  transition: all 0.5s linear 0.2s;
  color: var(--primary-color);
  box-shadow: 2px 2px 8px var(--card-shadow);
}

/* ESTILO PARA LA PAGINA LISTA DE ETIQUETAS HTML */

.flex_etiquetas {display: flex; flex-direction: column; width: 100%; max-width: 95%; margin-left: 50px;}
.flex_etiquetas div {display: flex; justify-content: space-between; align-items: center; width: 100%; max-width: 95%; transition: .5s ease-out;}
.flex_etiquetas p {color: var(--card-text-color); text-align: left;}
.flex_etiquetas div.title {display: flex; justify-content: space-around;}
.flex_etiquetas .flex-center {justify-content: center;}
.flex_etiquetas div h4 {transition: .3s linear; flex: 40%;}
.flex_etiquetas div p {transition: .3s linear; flex: 60%;}
.flex_etiquetas div:hover {transition: 0.3s linear; padding: 10px; border: 1px solid black; box-shadow: 2px 2px 8px var(--card-shadow);}
.flex_etiquetas div:hover h4 {transition: .3s linear; color: var(--secondary-color); box-shadow: 2px 2px 8px var(--card-shadow);}
.flex_etiquetas div:hover p {transition: .3s linear; padding: 10px; background: black; color: white; font-weight: bold; border-radius: 10px; box-shadow: 2px 2px 8px var(--card-shadow); transform: scale(0.9);}

.flex_etiquetas div h4:hover {transition: .3s linear; flex: 50%;}
.flex_etiquetas div p:hover {transition: .3s linear; flex: 100%;}

#contenido-atributos code.tipo {
  display: inline-block; 
  font-size: calc(var(--font-size-base) * 1.3); 
  color: var(--secondary-color); 
  transition: .5s linear;
}
.flex_atributos {display: flex; flex-direction: column; width: 100%; max-width: 95%; margin-left: 30px;}
.flex_atributos div {
  display: flex; 
  justify-content: center; 
  align-items: center; 
  width: 100%; 
  max-width: 95%; 
  border: 1px solid black; 
  border-radius: 10px; 
  cursor: pointer;
  box-shadow: 2px 2px 8px var(--card-shadow);
  transition: 0.5s linear;
}

/* ESTILOS PAGINA LISTADO DE ATRIBUTOS */

.flex_atributos div p:nth-child(1) {text-decoration: underline; text-align: center; color: var(--primary-color); white-space: wrap;}
.flex_atributos div p:nth-child(2) {text-align: center;}
/*.flex_atributos div p:nth-child(3) {flex: 2;} */
.flex_atributos div.especial {width: 100%; display: flex; flex-wrap: wrap; text-decoration: none; text-align: left;}
.flex_atributos div.title {display: flex; justify-content: flex-start; gap: 100px;}
.flex_atributos div:hover {transition: 0.5s linear; background: var(--body-bg); border-radius: 20px; box-shadow: 2px 2px 8px var(--card-shadow); transform: scaleY(0.8);}
.flex_atributos div:hover p {transition: 0.5s linear; font-weight: bold;}

/* ESTILOS DE LA PAGINA LISTADO DE EVENTOS */

.flex_eventos {display: flex; flex-direction: column; width: 100%; max-width: 95%; margin-left: 30px;}
.flex_eventos div {display: flex; justify-content: flex-start; align-items: center; width: 100%; max-width: 95%; border: var(--border-width) solid var(--card-border-color); border-radius: 10px; cursor: pointer; transition: 0.5s linear;}
.flex_eventos .title {display: flex; justify-content: space-around;}

.flex_eventos div p {
  padding: 20px; 
  background: black; 
  font-size: var(--font-size-base);
  color: white;
  border: var(--border-width) solid white; 
  border-radius: 10px; 
}
.flex_eventos div p:nth-child(1) {flex: 1; text-align: center; transition: all 0.5s linear .2s;}
.flex_eventos div p:nth-child(1):hover {transition: all 0.5s; flex: 2; background: indigo; font-weight: bold;box-shadow: 2px 2px 8px var(--card-shadow); transform: scale(0.9);}
.flex_eventos div p:nth-child(2) {flex: 1; margin-right: 20px; transition: all 0.5s linear .2s;}
.flex_eventos div p:nth-child(2):hover {transition: all 0.5s; flex: 2; background: indigo; font-weight: bold;box-shadow: 2px 2px 8px var(--card-shadow); transform: scale(0.9);}

/* Estilo de la página propiedad position */

#contenido-capas #capa {position: relative;} 
#contenido-capas #capa code.posicion {font-size: calc(var(--font-size-base) * 1.2);}
#contenido-capas .caja-uno { 
   width: 300px;
   height: 150px;
   text-align: center;
   position: static;
   top: 60px;
   left: 40px; 
   background: #f5f5dc;
}
#contenido-capas .caja-dos {
   width: 260px;
   height: 250px;
   text-align: center;
   position: static;
   top: 40px;
   left: 20px;
   background: #5f9ea0;
}
#contenido-capas .caja-tres { 
   width: 100px;
   height: 100px;
   text-align: center;
   position: static;
   top: 110px;
   left: 210px;
   background: #ff8c00;
}
#contenido-capas .caja-uno span, #contenido-capas .caja-dos span,
#contenido-capas .caja-tres span {display: inline-block;}
#contenido-capas .caja-uno span {color: var(--secondary-color);}

#contenido-capas .flex {display: flex; justify-content: space-evenly; align-items: center; gap: 100px; transition: all .2s;}
#contenido-capas .cajas {border: var(--border-width) solid var(--card-border-color); width: 100%; max-width: 500px;}
#contenido-capas .explicacion {width: 100%; max-width: 450px; height: auto;}
#contenido-capas .flex .explicacion p {font-size: var(--font-size-base); margin: 0;}
#contenido-capas #capa1, #contenido-capas #capa2,
#contenido-capas #capa3, #contenido-capas #capa4,
#contenido-capas #capa5 {position: relative;top: 0;}
#contenido-capas #capa1 .caja-tres {position: relative;}
#contenido-capas #capa2 .caja-tres {position: absolute;top: 200px; margin-left: 40px;}
#contenido-capas #capa3 .caja-dos {position: relative;}
#contenido-capas #capa3 .caja-tres {position: absolute;}
#contenido-capas #capa4 .cajas {position: relative;}
#contenido-capas #capa4 .caja-dos {position: absolute;}
#contenido-capas #capa4 .caja-tres {position: absolute;}
#contenido-capas #capa5 .cajas {position: relative;}
#contenido-capas #capa5 .caja-uno {position: relative; /*z-index: 9999999;*/}
#contenido-capas #capa5 .caja-dos {position: absolute; opacity: 0.5;}
#contenido-capas #capa5 .caja-dos span,
#contenido-capas #capa5 .caja-tres span {font-weight: bold;}
#contenido-capas .conclusion {position: relative;top: 0;}

/* Estilo para aplicación position */

#contenido-capas .caj {
  position: relative;
  width: 100%; 
  max-width: 60vw;
  height: 60vh;
  margin: 20px auto; 
  overflow: auto;
  border: 1px solid black;
}
#contenido-capas .caj div {margin: 20px;}
#contenido-capas .caja1 {
  width: 100%; 
  max-width: calc((100% - 50%) + 50px);
  height: 250px;
  text-align: center;
  position: static;
  top: 40px;
  left: 40px; 
  background: #f5f5dc99;
}
#contenido-capas .caja2 {
  width: 100%; 
  max-width: calc((100% - 75%) + 50px);
  height: 150px;
  text-align: center;
  position: static;
  top: 80px;
  left: 50%;
  background: rgba(0, 220, 0, 0.7);
}
#contenido-capas .caja3 {
  width: 100%;
  max-width: calc((100% - 55%) + 50px);
  height: 450px;
  text-align: center;
  position: static;
  top: 40px;
  left: 20px;
  background: #5f9ea088;
}
#contenido-capas .caja4 { 
  width: 100%;
  max-width: calc((100% - 70%) + 50px);
  height: 180px;
  text-align: center;
  position: static;
  top: 210px;
  left: 210px;
  background: #ff8c0077;
}
#contenido-capas .caja5 {
  width: 100%; 
  max-width: 25%;
  height: 150px;
  text-align: center;
  position: static;
  top: 80px;
  left: 30%;
  background: rgba(0, 220, 220, 0.7);
}
#contenido-capas .caja1 span, #contenido-capas .caja2 span,
#contenido-capas .caja3 span, #contenido-capas .caja4 span,
#contenido-capas .caja5 span {display: inline-block;}
#contenido-capas .caja1 span {color: var(--secondary-color);}

/* Estilo de la aplicación z-index */

#zindex {position: relative; display:flex; margin-left: 80px; z-index: 100;}
#zindex div{width:100px;height:100px;position:absolute;border:solid;transform: rotate(-15deg) skewX(-15deg) skewY(-15deg);}
#zindex div:nth-of-type(1){background:tomato; width: 120px; height: 150px; top: 30px;}
#zindex div:nth-of-type(2){background:gold;top:50px; height: 125px; left:33px;}
#zindex div:nth-of-type(3){background:skyBlue;top:100px;left:66px;}
#zindex article{width:175px;height:200px;margin:.5em;position:relative;}
#zindex article:nth-of-type(2){display: flex; flex-direction: column;}
#zindex input{margin:.5em;font-size:1.2em;width: 50px;border:none;border:2px solid tomato;}
#zindex input:nth-of-type(2){border-color:gold;}
#zindex input:nth-of-type(3){border-color:skyBlue;}

/* Estilos para la página de la propiedad display */

#contenido-display a {display: inline-block;}

#contenido-display .flex {
  display: flex; 
  flex-direction: column; 
  justify-content: space-evenly;
}

#contenido-display .flex .ejemplo1 div {
  height: 2em; 
  background: var(--body-bg); 
  color: var(--card-text-color); 
  margin: 10px;
}

#contenido-display .flex1 {
  display: flex; 
  flex-direction: column;
  margin-left: 30px;
  box-shadow: 2px 1px 5px var(--card-shadow);
}

#contenido-display .flex1 div {
  display: flex; 
  justify-content: center; 
  align-items: center; 
  border-bottom: var(--border-width) solid var(--primary-color);
}
#contenido-display .flex1 div:hover {
  transition: .3s; 
  border-radius: 14px; 
  box-shadow: 2px 2px 8px var(--card-shadow);
}

#contenido-display .flex1 .title {justify-content: flex-start; gap: 200px;}

#contenido-display .title i {
  display: inline-block; 
  font-size: calc(var(--font-size-base) * 1.6); 
  font-family: Impact; 
  padding: 10px;
}

#contenido-display .title i:hover {
  transition: .5s linear;  
  box-shadow: 2px 2px 8px var(--card-shadow);
}
#contenido-display .flex1 h2 {flex: 1; text-align: center; font-size: calc(var(--font-size-base) * 1.5);}
#contenido-display .flex1 h2:hover {display: block; transition: .3s; flex: 2; background: var(--body-bg); margin-left: 10px;}
#contenido-display .flex1 p {flex: 2;}
#contenido-display .flex1 p:hover {transition: .3s; flex: 3; color: var(--primary-color); background: var(--body-bg); margin-right: 10px; padding: 5px; box-shadow: 2px 2px 8px var(--card-shadow); font-size: var(--font-size-base);}
#contenido-display .flex1 span {max-width: 80%; display: block; font-size: var(--font-size-base); padding: 10px 0;}

#contenido-display #contenedor1, 
#contenido-display #contenedor2 {
  width: 100%;
  max-width: 100%;
  margin: 50px 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
/*#contenido-display #contenedor1 p, 
#contenido-display #contenedor2 p {font-size: var(--font-size-base); margin-left: 30px;}*/
#contenido-display #contenedor1 input, 
#contenido-display #contenedor2 input {display: none; opacity: 0; visibility: hidden;}
#contenido-display #contenedor1 label, 
#contenido-display #contenedor2 label {display: inline-block; width: auto; height: auto; padding: 3px; border: var(--border-width) solid var(--card-border-color); cursor: pointer;}
#contenido-display #contenedor1 label:hover, 
#contenido-display #contenedor2 label:hover {transition: 0.3s linear; padding: 2px; font-weight: bold; border-radius: 10px; box-shadow: 2px 1px 5px var(--card-shadow); transform: translateY(-2px) skewY(-10deg);}
#contenido-display #span_disp {font-size: var(--font-size-base); color: red; width: 240px;}
#span_disp b, #span_disp small {display: none;}
#contenido-display #span_disp small {font-size: calc(var(--font-size-base) * 0.6); margin-left: 3px; color: blue;}

input:checked + label {background-color: rgba(0, 0, 0, .3);}

#control1:checked ~ p #span_disp {display: inline;}
#control2:checked ~ p #span_disp {display: inline-block;}  
#control2:checked ~ p #span_disp small {display: inline;}
#control3:checked ~ p #span_disp {display: block;}
#control4:checked ~ p #span_disp {display: none;}
#control5:checked ~ p #span_disp {display: list-item;}
#control5:checked ~ p #span_disp b {display: list-item;}
#control6:checked ~ p #span_disp {display: table; border: 1px solid black;}
#control6:checked ~ p #span_disp b {display: table; width: 200px; color: blue; border: 1px solid black;}
#control7:checked ~ p #span_disp {display: table-row;}
#control7:checked ~ p #span_disp b {display: table-row; width: 200px; color: blue; border: 1px solid black;}
#control8:checked ~ p #span_disp {display: table-cell;}
#control8:checked ~ p #span_disp b {display: table-cell; width: 200px; color: blue; border: 1px solid black;}

/* Estilo para los input y párrafos del segundo contenedor */

#control9:checked ~ p {display: inline !important; width: auto; margin-left: 0 !important;}
#control10:checked ~ p {display: inline-block;}
#control11:checked ~ p {display: block;}
#control12:checked ~ p {display: none;}
#control13:checked ~ p {display: list-item;}
#control14:checked ~ p {display: table; border: 1px solid;}
#control15:checked ~ p {display: table-row; border: 1px solid;}
#control16:checked ~ p {display: table-cell; border: 1px solid; width: auto; margin-left: 0 !important; }

/* Estilos para página comparador de fuentes */

#contenido-fuentes b {
  display: inline-block; 
  width: auto; 
  height: auto;
  transition: .3s linear;
}

/* Paneles */

::selection {background-color: #ff66ff; color: #FFF;}
.panel {position: relative; width: 100%; max-width: 98%;}
.panel h1 {color:#009999;}
#fuentes {width: 100%; max-width: 98%; display: grid; grid-template-columns: repeat(2, minmax(360px, 1fr)); grid-template-rows: auto;}
#fuentes .columns {max-width: 100%; padding: 10px; display: flex; flex-direction: column;}
#fuentes .columns:nth-child(3) {width: auto; text-align: center; overflow: hidden; justify-self: end; display: flex; flex-direction: column; justify-content: center; align-items: center;} 
#fuentes .font_compare{background-color: var(--body-bg);} /*#f2f2f2;*/
#fuentes .font_compare article{padding:0.5em; padding-bottom:0px; background-color: var(--body-bg); color: var(--card-text-color);}

#fuentes p.text_type_compare{
  margin-left: 12px !important; 
  padding:10px; 
  font-family:Verdana, Geneva, sans-serif; 
  font-size: inherit; 
  font-weight:normal;
  text-decoration:none;
  font-variant:normal;
  text-transform:none;
  font-style:normal;
  line-height:1.5em;
  word-spacing:normal;
  letter-spacing:normal;
  color: var(--card-text-color);
  background-color: var(--card-bg); 
  word-wrap : break-word;
}
.font_compare > div, .font_compare > div {position: relative; text-align:right; margin:0; padding:0; background:transparent;}
#fuentes p.size {margin: 0;}
#fuentes .font_compare .collapse, #fuentes .font_compare .build-up{position: absolute; top: -30px; right: -10px; display:block; font-size:1.5em; height:.5em; color:#000; font-weight:bold; padding: 0 .7em 0 0;cursor:pointer;}
#fuentes .type_compare .buttonSpan button{font-family:'Lucida Console', Monaco, monospace;}
#fuentes .type_compare {
  display: flex; 
  flex-direction: column;
}
#fuentes #type_compare1, #fuentes #type_compare2{
  height: 100%;
  visibility: visible;
  transition: all .3s linear;
}
#fuentes #type_compare1 .buttonSpan button:first-of-type{display:none;}
#fuentes #type_compare2 .buttonSpan button:last-of-type{display:none;}
#fuentes #type_compare1.active, #fuentes #type_compare2.active {
  transition: .3s linear;
  height: 0;
  visibility: hidden;
  overflow: hidden;
}
#fuentes .buttonSpan{position:relative; top:12px; text-align:center; margin: 0; padding: 0;}
#fuentes ul.estilo {list-style:none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(120px, 1fr)); gap: 2px;}
#fuentes ul.estilo li {display: flex; flex-direction: column; width: auto;}
#fuentes ul.estilo li.colores {width: 100%;}
#fuentes select {max-width: 100%; margin: 0 0 0.5em 0; border-color:#999; background: #fff;font-size: 0.875em; cursor:pointer;}
#fuentes .columns input[type='text'] {max-width: 100%; font-size: 0.875em; padding:0.2em 0.2em; text-align:center; border-radius:5px;border-color:#999;}
#basic_size {width: 3em;}
.panel label {font-size: 0.875em; color: var(--card-text-color);/*#4d4d4d;*/ cursor: pointer; display: inline-block; width: auto; font-weight: 500; margin-bottom: 0.1875em;}
.panel button {border-style: solid; border-width: 1px; cursor: pointer; font-family: inherit; font-weight: bold; line-height: 1; margin: 0 0 1.25em; position: relative; text-decoration: none; text-align: center; display: inline-block; padding-top: 0.75em; padding-right: 1.5em; padding-bottom: 0.8125em; padding-left: 1.5em; font-size: 1em; background-color: #2ba6cb; border-color: #2284a1; color: white;}
.panel button:hover, .panel button:focus {background-color: #2284a1;color: white;}
.panel button.tiny {padding-top: 0.4375em; padding-right: 0.875em; padding-bottom: 0.5em; padding-left: 0.875em; font-size: 0.6875em;}
.panel button {padding-top: 0.8125em; padding-bottom: 0.75em; appearance: none;}
.panel button.tiny {padding-top: 0.5em; padding-bottom: 0.4375em; appearance: none;}

/* ESTILOS PARA LA PAGINA GRADIENT */

#contenido-gradient code.exp {
  display: inline-block; 
  padding: 7px; 
  background: linear-gradient(black, white);
  color: #00ffff;
  font-size: calc(var(--font-size-base) * 0.8);
  transition: .3s linear;
}

#contenido-gradient code.exp:hover {
  transform: scaleY(2);
}

#colores_gradient {
  position: relative;
  margin: 0;
  width: 100%;
  max-width: 100%;
  display: grid;
  grid-template-columns: repeat(4, minmax(200px, 1fr));
  grid-template-rows: auto;
  gap: 14px;
}

#colores_gradient div {
  position: relative;
  width: 100%;
  max-width: 200px;
  height: 200px;
  border: var(--border-width) solid var(--card-border-color);
  margin-bottom: 30px;
}

#colores_gradient div code {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  font-size: calc(var(--font-size-base) * 0.6);
  text-align: center;
  color: var(--card-text-color);
  width: 0;
  height: 0;
  opacity: 0;
  transition: all .3s;
}

#colores_gradient div:hover {
  transition: all 0.3s linear;
  transform: scale(1.5);
  z-index: 12;
}

#colores_gradient div code.largo {
  display: block;
  width: auto; 
  padding: 10px;
  font-size: calc(var(--font-size-base) * 0.4);
  transform: translateX(-20%);
}

#colores_gradient div:hover code {
  transition: all 0.3s linear;
  top: 40%;
  width: auto;
  height: auto; 
  opacity: 1;
  padding: 10px;
  color: var(--terciary-color);
  border-radius: 10%;
}

#colores_gradient div code:hover {
  transition: all 0.4s linear;
  transform: translate(0px, -100px) scale(0.8);
  transform-origin: 50% 100%;
  background-color: var(--body-bg);
  color: var(--card-text-color);
  box-shadow: 2px 2px 8px var(--card-shadow);
  cursor: pointer;
}

#colores_gradient div code.largo:hover {
  transform: translate(-20%, -100px);
  transform-origin: 50% 100%; 
  white-space: nowrap;
}

#colores_gradient div:nth-child(14) code.largo:hover,
#colores_gradient div:nth-child(15) code.largo:hover {
  transform: translate(-20%, -200px);
  transform-origin: 50% 100%; 
  white-space: nowrap;
}

#colores_gradient .color1 {background: radial-gradient(closest-side circle, #0066ff 60%, #00ffff);}
#colores_gradient .color1:hover {  
  transform-origin: 0% 0%;  
  border-radius: 50%;
  animation: circulos 3s linear infinite alternate-reverse;
}
@keyframes circulos {
  0% {background: radial-gradient(closest-side circle, #0066ff 20%, #00ffff);}
  10% {background: radial-gradient(closest-side circle, #0066ff 30%, #00ffff);}
  20% {background: radial-gradient(closest-side circle, #0066ff 40%, #00ffff);}
  30% {background: radial-gradient(closest-side circle, #0066ff 50%, #00ffff);}
  40% {background: radial-gradient(closest-side circle, #0066ff 60%, #00ffff);}
  50% {background: radial-gradient(closest-side circle, #0066ff 70%, #00ffff);}
  60% {background: radial-gradient(closest-side circle, #0066ff 80%, #00ffff);}
  70% {background: radial-gradient(closest-side circle, #0066ff 90%, #00ffff);}
  80% {background: radial-gradient(closest-side circle, #0066ff 100%, #00ffff);}
  90% {background: radial-gradient(closest-side circle, #0066ff 0%, #00ffff);}
  100% {background: radial-gradient(closest-side circle, #0066ff 10%, #00ffff);}
}
/*#colores_gradient .color1:hover code {}
#colores_gradient .color1 code:hover {} */
#colores_gradient .color2 {background: radial-gradient(closest-side circle, #00ffff 60%, #0066ff);}
#colores_gradient .color2:hover {
  transform-origin: 50% 0%;
  animation: voltear 4.5s linear .5s infinite;
}
@keyframes voltear {
  0% {transform: scale(2) rotate(0deg); background: radial-gradient(closest-side circle, #00ffff 60%, #0066ff);}
  10%{transform: scale(2) rotateX(30deg); background: radial-gradient(closest-side circle, #0066ff 60%, #00ffff);}
  20%{transform: scale(2) rotateX(45deg);background: radial-gradient(closest-side circle, #0066ff 20%, #00ffff);}
  30%{transform: scale(2) rotateX(30deg) skewY(-8deg); background: radial-gradient(closest-side circle, #00ffff 20%, #0066ff);}
  40%{transform: scale(2) rotateX(0deg) skewY(8deg); background: radial-gradient(closest-side circle, #00ffff 60%, #0066ff);}
  50%{transform: scale(2) rotateX(-30deg); background: radial-gradient(closest-side circle, #0066ff 20%, #00ffff);}
  60%{transform: scale(2) rotateX(-45deg); background: radial-gradient(closest-side circle, #0066ff 60%, #00ffff);}
  70%{transform: scale(2) rotateX(-30deg) skewY(8deg); background: radial-gradient(closest-side circle, #00ffff 20%, #0066ff);}
  80%{transform: scale(2) rotateX(0deg) skewY(-8deg); background: radial-gradient(closest-side circle, #00ffff 60%, #0066ff);}
  88%{transform: scale(1.6) rotateX(0deg); background: radial-gradient(closest-side circle, #0066ff 20%, #00ffff);}
  94%{transform: scale(1.8) rotateX(0deg); background: radial-gradient(closest-side circle, #0066ff 60%, #00ffff);}
}
/*#colores_gradient .color2:hover code {}
#colores_gradient .color2 code:hover {} */
#colores_gradient .color3 {background: linear-gradient(45deg, #0066ff 40%, #00ffff);}
#colores_gradient .color3:hover {
  transform-origin: 50% 0%;
  animation: voltear1 4.5s linear .5s infinite;
}
@keyframes voltear1 {
  0% {transform: scale(2) rotate(0deg); background: linear-gradient(45deg, #0066ff 40%, #00ffff);}
  10% {transform: scale(2) rotateY(45deg) skewY(15deg); background: linear-gradient(50deg, #0066ff 60%, #00ffff);}
  20% {transform: scale(2) rotate(0deg); background: linear-gradient(40deg, #0066ff 80%, #00ffff);}
  30% {transform: scale(2) rotateY(-45deg) skewY(-15deg); background: #0066ff;}
  40% {background: linear-gradient(40deg, #0066ff 80%, #00ffff);}
  50% {background: linear-gradient(45deg, #0066ff 60%, #00ffff);}
  60% {background: linear-gradient(50deg, #0066ff 40%, #00ffff);}
  70% {background: linear-gradient(45deg, #0066ff 20%, #00ffff);}
  80% {background: #00ffff;}
  90% {background: linear-gradient(50deg, #0066ff 20%, #00ffff);}
  95% {background: linear-gradient(45deg, #0066ff 35%, #00ffff);}
} 
#colores_gradient .color3:hover code {color: var(--secondary-color);}
/*#colores_gradient .color3 code:hover {} */
#colores_gradient .color4 {background: linear-gradient(-90deg, #0066ff 40%, #00ffff);}
#colores_gradient .color4:hover {
  transform-origin: 100% 0%;
  animation: voltear2 4.2s ease-in .2s infinite;
}
@keyframes voltear2 {
  0% {background: linear-gradient(-90deg, #0066ff 40%, #00ffff); border-radius: 0;}
 10% {background: linear-gradient(-135deg, #0066ff 60%, #00ffff); border-radius: 20px;}
 20% {background: linear-gradient(-180deg, #0066ff 40%, #00ffff); border-radius: 0;}
 30% {background: linear-gradient(-225deg, #0066ff 60%, #00ffff); border-radius: 20px;}
 40% {background: linear-gradient(-270deg, #0066ff 40%, #00ffff); border-radius: 0;}
 50% {background: linear-gradient(-315deg, #0066ff 60%, #00ffff); border-radius: 20px;}
 60% {background: linear-gradient(-360deg, #0066ff 40%, #00ffff); border-radius: 0;}
 70% {background: linear-gradient(-45deg, #0066ff 60%, #00ffff); border-radius: 20px;}
}
#colores_gradient .color4:hover code {color: var(--secondary-color);}
/*#colores_gradient .color4 code:hover {} */
#colores_gradient .color5 {background: linear-gradient(45deg, red 20%, orange 20% 40%, yellow 40% 60%, green 60% 80%, blue 80%);}
#colores_gradient .color5:hover {
  transform-origin: 0% 50%;
  border-radius: 20%;
  animation: crececolor 10s linear infinite;
}
@keyframes crececolor {
  0% {background: linear-gradient(45deg, red 20%, orange 20% 40%, yellow 40% 60%, green 60% 80%, blue 80%);}
  4% {background: linear-gradient(45deg, red 40%, yellow 40% 60%, green 60% 80%, blue 80%);}
  8% {background: linear-gradient(45deg, red 60%, green 60% 80%, blue 80%);}
  12% {background: linear-gradient(45deg, red 80%, blue 80%);}
  16% {background: red;}
  20% {background: linear-gradient(45deg, red 20%, orange 20% 40%, yellow 40% 60%, green 60% 80%, blue 80%);}
  24% {background: linear-gradient(45deg, orange 40%, yellow 40% 60%, green 60% 80%, blue 80%);}
  28% {background: linear-gradient(45deg, orange 60%, green 60% 80%, blue 80%);}
  32% {background: linear-gradient(45deg, orange 80%, blue 80%);}
  36% {background: orange;}
  40% {background: linear-gradient(45deg, red 20%, orange 20% 40%, yellow 40% 60%, green 60% 80%, blue 80%);}
  44% {background: linear-gradient(45deg, red 20%, yellow 20% 60%, green 60% 80%, blue 80%);}
  48% {background: linear-gradient(45deg, yellow 60%, green 60% 80%, blue 80%);}
  52% {background: linear-gradient(45deg, yellow 80%, blue 80%);}
  56% {background: yellow;}
  60% {background: linear-gradient(45deg, red 20%, orange 20% 40%, yellow 40% 60%, green 60% 80%, blue 80%);}
  64% {background: linear-gradient(45deg, red 20%, orange 20% 40%, yellow 40% 60%, green 60%);}
  68% {background: linear-gradient(45deg, red 20%, orange 20% 40%, green 40%);}
  72% {background: linear-gradient(45deg, red 20%, green 20%);}
  76% {background: green;}
  80% {background: linear-gradient(45deg, red 20%, orange 20% 40%, yellow 40% 60%, green 60% 80%, blue 80%);}
  84% {background: linear-gradient(45deg, red 20%, orange 20% 40%, yellow 40% 60%, blue 60%);}
  88% {background: linear-gradient(45deg, red 20%, orange 20% 40%, blue 40%);}
  92% {background: linear-gradient(45deg, red 20%, blue 20%);}
  96% {background: blue;}
 100% {background: linear-gradient(45deg, red 20%, orange 20% 40%, yellow 40% 60%, green 60% 80%, blue 80%);}
}
/* #colores_gradient .color5:hover code {}
#colores_gradient .color5 code:hover {} */
#colores_gradient .color6 {background-image: radial-gradient(farthest-side at 60% 55%, blue, green, yellow, black);}
#colores_gradient .color6:hover {
  transform-origin: 50% 50%;
  animation: invertir 1s linear infinite alternate;
}
@keyframes invertir {
  0%{background-image: radial-gradient(farthest-side at 60% 55%, blue, green, yellow, black);}
  100%{background-image: radial-gradient(farthest-side at 60% 55%, black, yellow, green, blue);}
}
/* #colores_gradient .color6:hover code {}
#colores_gradient .color6 code:hover {} */
#colores_gradient .color7 {background: linear-gradient(to left, lime 20%, red 30% 45%, cyan 55% 70%, yellow 80%);}
#colores_gradient .color7:hover {
  transform-origin: 50% 50%;
  animation: colores_gradient 3s linear infinite alternate;
}
@keyframes colores_gradient {
  0% {background: linear-gradient(to left, lime 20%, red 30% 45%, cyan 55% 70%, yellow 80%);}
  10% {background: linear-gradient(to left, yellow 20%, lime 30% 45%, red 55% 70%, cyan 80%);}
  20% {background: linear-gradient(to left, cyan 20%, yellow 30% 45%, lime 55% 70%, red 80%);}
  30% {background: linear-gradient(to left, red 20%, cyan 30% 45%, yellow 55% 70%, lime 80%);}
  40% {background: linear-gradient(to left, lime 20%, red 30% 45%, cyan 55% 70%, yellow 80%);}
  50% {background: linear-gradient(to left, yellow 20%, lime 30% 45%, red 55% 70%, cyan 80%);}
  60% {background: linear-gradient(to left, cyan 20%, yellow 30% 45%, lime 55% 70%, red 80%);}
  70% {background: linear-gradient(to left, red 20%, cyan 30% 45%, yellow 55% 70%, lime 80%);}
  75% {background: linear-gradient(to left, lime 20%, red 30% 45%, cyan 55% 70%, yellow 80%);}
  85% {background: linear-gradient(to left, yellow 20%, lime 30% 45%, red 55% 70%, cyan 80%);}
  90% {background: linear-gradient(to left, cyan 20%, yellow 30% 45%, lime 55% 70%, red 80%);}
  95% {background: linear-gradient(to left, red 20%, cyan 30% 45%, yellow 55% 70%, lime 80%);}
}
/* #colores_gradient .color7:hover code {}
#colores_gradient .color7 code:hover {} */
#colores_gradient .color8 {
 background:
  linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
  linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
  linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
}
#colores_gradient .color8:hover {transform-origin: 100% 50%;}
/* #colores_gradient .color8:hover code {}
#colores_gradient .color8 code:hover {} */
#colores_gradient .color9 {background: conic-gradient(from 240deg at center, #ffffff 20%, #000000);}
#colores_gradient .color9:hover {transform-origin: 0% 50%;}
/* #colores_gradient .color9:hover code {}
#colores_gradient .color9 code:hover {}*/
#colores_gradient .color10 {background:
  linear-gradient(217deg, rgba(0,0,0,.6) 50%, rgba(255,255,255,.2) 70.71%),
  linear-gradient(127deg, rgba(0,0,0,.4), rgba(255,255,255,.5) 20.71%),
  linear-gradient(336deg, rgba(0,0,0,.8) 20%, rgba(255,255,255,.7) 50.71%);
}
#colores_gradient .color10:hover {transform-origin: 50% 50%;}
/* #colores_gradient .color10:hover code {}
#colores_gradient .color10 code:hover {} */
#colores_gradient .color11 {background: linear-gradient(to top right, rgba(255, 20, 10, .7), rgba(20, 255, 10, .7), rgba(10, 20, 255, .7));}
#colores_gradient .color11:hover {transform-origin: 50% 50%; border-radius: 50%;}
/* #colores_gradient .color11:hover code {}
#colores_gradient .color11 code:hover {} */
#colores_gradient .color12 {background:
  conic-gradient(from 60deg at center, rgba(0, 0, 0, .3) 10%, rgba(255, 255, 255, .3)),
  conic-gradient(from 90deg at 50% 60%, rgba(0, 255, 0, .5) 30%, rgba(0, 0, 255, .5)),
  conic-gradient(from -120deg at 50% 70%, rgba(255, 0, 0, .7) 50%, rgba(120, 120, 120, .7));
}
#colores_gradient .color12:hover {transform-origin: 100% 50%; border-radius: 50%;}
/* #colores_gradient .color12:hover code {}
#colores_gradient .color12 code:hover {} */
#colores_gradient .color13 {background: radial-gradient(ellipse, white 20%, gold 50%, red 55%, black 75%);}
#colores_gradient .color13:hover {transform-origin: 0% 100%; border-radius: 50%;}
/* #colores_gradient .color13:hover code {}
#colores_gradient .color13 code:hover {} */
#colores_gradient .color14 {background:
  repeating-linear-gradient(190deg, rgba(255,0,0,0.5) 40px,
   rgba(255,153,0,0.5) 80px, rgba(255,255,0,0.5) 120px,
   rgba(0,255,0,0.5) 160px, rgba(0,0,255,0.5) 200px,
   rgba(75,0,130,0.5) 240px, rgba(238,130,238,0.5) 280px,
   rgba(255, 0, 0, 0.5) 300px),
  repeating-linear-gradient(-190deg, rgba(255,0,0,0.5) 30px,
   rgba(255,153,0,0.5) 60px, rgba(255,255,0,0.5) 90px,
   rgba(0,255,0,0.5) 120px, rgba(0,0,255,0.5) 150px,
   rgba(75,0,130,0.5) 180px, rgba(238,130,238,0.5) 210px,
   rgba(255,0,0,0.5) 230px),
  repeating-linear-gradient(23deg, red 50px, orange 100px,
   yellow 150px, green 200px, blue 250px,
   indigo 300px, violet 350px, red 370px);
}
#colores_gradient .color14:hover {transform-origin: 50% 100%; border-radius: 50%;}
/* #colores_gradient .color14:hover code {}
#colores_gradient .color14 code:hover {} */
#colores_gradient .color15 {
  background:
   repeating-linear-gradient(90deg, transparent, transparent 50px,
    rgba(255,127,0,0.25) 50px, rgba(255,127,0,0.25) 56px,
    transparent 56px, transparent 63px, rgba(255,127,0,0.25) 63px, 
    rgba(255,127,0,0.25) 69px, transparent 69px, transparent 116px,
    rgba(255,206,0,0.25) 116px, rgba(255,206,0,0.25) 166px),
   repeating-linear-gradient(0deg, transparent, transparent 50px,
    rgba(255,127,0,0.25) 50px, rgba(255,127,0,0.25) 56px,
    transparent 56px, transparent 63px, rgba(255,127,0,0.25) 63px,
    rgba(255,127,0,0.25) 69px, transparent 69px, transparent 116px,
    rgba(255,206,0,0.25) 116px, rgba(255,206,0,0.25) 166px),
   repeating-linear-gradient(-45deg, transparent, transparent 5px,
    rgba(143,77,63,0.25) 5px, rgba(143,77,63,0.25) 10px),
   repeating-linear-gradient(45deg, transparent, transparent 5px,
    rgba(143,77,63,0.25) 5px, rgba(143,77,63,0.25) 10px);
}
#colores_gradient .color15:hover {transform-origin: 50% 100%; border-radius: 50%;}
/* #colores_gradient .color15:hover code {}
#colores_gradient .color15 code:hover {}
El mismo que el anterior diferentemente declarado
 background: 
  repeating-linear-gradient(90deg, transparent 0 50px,
   rgba(255,127,0,0.25) 50px 56px, transparent 56px 63px,
   rgba(255,127,0,0.25) 63px 69px, transparent 69px 116px,
   rgba(255,206,0,0.25) 116px 166px),
  repeating-linear-gradient(0deg, transparent 0 50px,
   rgba(255,127,0,0.25) 50px 56px, transparent 56px 63px,
   rgba(255,127,0,0.25) 63px 69px, transparent 69px 116px,
   rgba(255,206,0,0.25) 116px 166px),
  repeating-linear-gradient(-45deg, transparent 0 5px,
   rgba(143, 77, 63, 0.25) 5px 10px),
  repeating-linear-gradient(45deg, transparent 0 5px,
    rgba(143,77,63,0.25) 5px 10px); */
#colores_gradient .color16 { 
 background:
   repeating-radial-gradient(ellipse at 80% 50%,rgba(0,0,0,0.5),
    rgba(0,0,0,0.5) 15px, rgba(255,255,255,0.5) 15px,
    rgba(255,255,255,0.5) 30px) top left no-repeat,
   repeating-radial-gradient(ellipse at 20% 50%,rgba(0,0,0,0.5),
    rgba(0,0,0,0.5) 10px, rgba(255,255,255,0.5) 10px,
    rgba(255,255,255,0.5) 20px) top left no-repeat yellow;
  background-size: 200px 200px, 150px 150px;
}
#colores_gradient .color16:hover {transform-origin: 100% 100%; border-radius: 50%;}
/* #colores_gradient .color16:hover code {}
#colores_gradient .color16 code:hover {} */

/* ESTILO PARA PAGINA COLORES ANIMADOS */

#colores_animados {
  position: relative;
  width: 100%;
  max-width: 900px;
  margin: auto;
  display: grid;
  grid-template-columns: repeat(6, minmax(100px, 1fr));
  gap: 40px;
}

#colores_animados ul {
  list-style-type: none;
  display: inline-block;
  margin: 2px;
  transition: all 0.3s ease-in-out;
}

/* uls con desplazamiento hacia la izquierda */

#colores_animados ul:nth-child(odd):hover {
  transition: all 0.3s ease-in-out;
  transform: translate(-30px, -10px) scale(0.9) rotate(-6deg) skewY(6deg);
  border: 2px solid pink;
  border-radius: 20%;
  background: var(--body-bg);
  box-shadow: 2px 2px 8px var(--card-shadow);
  width: auto;
  padding: 20px;
}

/* uls con desplazamiento hacia la derecha */

#colores_animados ul:nth-child(even):hover {
  transition: all 0.3s ease-in-out;
  transform: translate(30px, -10px) scale(0.9) rotate(6deg) skewY(-6deg);
  border: 2px solid pink;
  border-radius: 20%;
  background: var(--body-bg);
  box-shadow: 2px 2px 8px var(--card-shadow);
  width: auto;
  padding: 20px;
}

#colores_animados li {
  display: block;
  width: 100px; 
  height: 40px;
  border: 1px solid black;
  margin: 5px;
  margin-left: -20px;
  padding: 10px;
  transition: all 0.2s ease-out;
}

/* Desplazamientos de los lis */

#colores_animados ul:nth-child(odd) li:nth-child(odd):hover {
  transition: all 0.2s ease-out;
  transform: translate(10px, 10px) scale(1.2) rotate(-10deg) skewX(-10deg) skewY(-5deg);
  border: 3px solid white;
}

#colores_animados ul:nth-child(odd) li:nth-child(even):hover {
  transition: all 0.2s ease-out;
  transform: translate(-10px, -10px) scale(1.2) rotate(10deg) skewX(10deg) skewY(5deg);
  border: 3px solid white; 
}

#colores_animados ul:nth-child(even) li:nth-child(odd):hover {
  transition: all 0.2s ease-out;
  transform: translate(10px, 10px) scale(1.2) rotate(10deg) skewX(10deg) skewY(5deg);
  border: 3px solid white;
}

#colores_animados ul:nth-child(even) li:nth-child(even):hover {
  transition: all 0.2s ease-out;
  transform: translate(10px, 10px) scale(1.2) rotate(-10deg) skewX(-10deg) skewY(-5deg);
  border: 3px solid white;
}

#colores_animados a {
  display: block;
  text-decoration: none;
  color: white;
  text-align: center;
  font-weight: bold;
}

#colores_animados span {
  width: 0px;
  height: 0px;
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
  transition: all 0.2s ease-in; 
}

#colores_animados .rgb_1 {background-color: #000000;}
#colores_animados .rgb_1:hover span {background: #000000;}
#colores_animados .rgb_2 {background-color: #000033;}
#colores_animados .rgb_2:hover span {background: #000033;}
#colores_animados .rgb_3 {background-color: #000066;}
#colores_animados .rgb_3:hover span {background: #000066;}
#colores_animados .rgb_4 {background-color: #000099;}
#colores_animados .rgb_4:hover span {background: #000099;}
#colores_animados .rgb_5 {background-color: #0000CC;}
#colores_animados .rgb_5:hover span {background: #0000CC;}
#colores_animados .rgb_6 {background-color: #0000FF;}
#colores_animados .rgb_6:hover span {background: #0000FF;}
#colores_animados .rgb1_1 {background-color: #330000;}
#colores_animados .rgb1_1:hover span {background: #330000;}
#colores_animados .rgb1_2 {background-color: #330033;}
#colores_animados .rgb1_2:hover span {background: #330033;}
#colores_animados .rgb1_3 {background-color: #330066;}
#colores_animados .rgb1_3:hover span {background: #330066;}
#colores_animados .rgb1_4 {background-color: #330099;}
#colores_animados .rgb1_4:hover span {background: #330099;}
#colores_animados .rgb1_5 {background-color: #3300CC;}
#colores_animados .rgb1_5:hover span {background: #3300CC;}
#colores_animados .rgb1_6 {background-color: #3300FF;}
#colores_animados .rgb1_6:hover span {background: #3300FF;}
#colores_animados .rgb2_1 {background-color: #660000;}
#colores_animados .rgb2_1:hover span {background: #660000;}
#colores_animados .rgb2_2 {background-color: #660033;}
#colores_animados .rgb2_2:hover span {background: #660033;}
#colores_animados .rgb2_3 {background-color: #660066;}
#colores_animados .rgb2_3:hover span {background: #660066;}
#colores_animados .rgb2_4 {background-color: #660099;}
#colores_animados .rgb2_4:hover span {background: #660099;}
#colores_animados .rgb2_5 {background-color: #6600CC;}
#colores_animados .rgb2_5:hover span {background: #6600CC;}
#colores_animados .rgb2_6 {background-color: #6600FF;}
#colores_animados .rgb2_6:hover span {background: #6600FF;}
#colores_animados .rgb3_1 {background-color: #990000;}
#colores_animados .rgb3_1:hover span {background: #990000;}
#colores_animados .rgb3_2 {background-color: #990033;}
#colores_animados .rgb3_2:hover span {background: #990033;}
#colores_animados .rgb3_3 {background-color: #990066;}
#colores_animados .rgb3_3:hover span {background: #990066;}
#colores_animados .rgb3_4 {background-color: #990099;}
#colores_animados .rgb3_4:hover span {background: #990099;}
#colores_animados .rgb3_5 {background-color: #9900CC;}
#colores_animados .rgb3_5:hover span {background: #9900CC;}
#colores_animados .rgb3_6 {background-color: #9900FF;}
#colores_animados .rgb3_6:hover span {background: #9900FF;}
#colores_animados .rgb4_1 {background-color: #CC0000;}
#colores_animados .rgb4_1:hover span {background: #CC0000;}
#colores_animados .rgb4_2 {background-color: #CC0033;}
#colores_animados .rgb4_2:hover span {background: #CC0033;}
#colores_animados .rgb4_3 {background-color: #CC0066;}
#colores_animados .rgb4_3:hover span {background: #CC0066;}
#colores_animados .rgb4_4 {background-color: #CC0099;}
#colores_animados .rgb4_4:hover span {background: #CC0099;}
#colores_animados .rgb4_5 {background-color: #CC00CC;}
#colores_animados .rgb4_5:hover span {background: #CC00CC;}
#colores_animados .rgb4_6 {background-color: #CC00FF;}
#colores_animados .rgb4_6:hover span {background: #CC00FF;}
#colores_animados .rgb5_1 {background-color: #FF0000;}
#colores_animados .rgb5_1:hover span {background: #FF0000;}
#colores_animados .rgb5_2 {background-color: #FF0033;}
#colores_animados .rgb5_2:hover span {background: #FF0033;}
#colores_animados .rgb5_3 {background-color: #FF0066;}
#colores_animados .rgb5_3:hover span {background: #FF0033;}
#colores_animados .rgb5_4 {background-color: #FF0099;}
#colores_animados .rgb5_4:hover span {background: #FF0099;}
#colores_animados .rgb5_5 {background-color: #FF00CC;}
#colores_animados .rgb5_5:hover span {background: #FF00CC;}
#colores_animados .rgb5_6 {background-color: #FF00FF;}
#colores_animados .rgb5_6:hover span {background: #FF00FF;}
#colores_animados .rgb6_1 {background-color: #003300;}
#colores_animados .rgb6_1:hover span {background: #003300;}
#colores_animados .rgb6_2 {background-color: #003333;}
#colores_animados .rgb6_2:hover span {background: #003333;}
#colores_animados .rgb6_3 {background-color: #003366;}
#colores_animados .rgb6_3:hover span {background: #003366;}
#colores_animados .rgb6_4 {background-color: #003399;}
#colores_animados .rgb6_4:hover span {background: #003399;}
#colores_animados .rgb6_5 {background-color: #0033CC;}
#colores_animados .rgb6_5:hover span {background: #0033CC;}
#colores_animados .rgb6_6 {background-color: #0033FF;}
#colores_animados .rgb6_6:hover span {background: #0033FF;}
#colores_animados .rgb7_1 {background-color: #333300;}
#colores_animados .rgb7_1:hover span {background: #333300;}
#colores_animados .rgb7_2 {background-color: #333333;}
#colores_animados .rgb7_2:hover span {background: #333333;}
#colores_animados .rgb7_3 {background-color: #333366;}
#colores_animados .rgb7_3:hover span {background: #333366;}
#colores_animados .rgb7_4 {background-color: #333399;}
#colores_animados .rgb7_4:hover span {background: #333399;}
#colores_animados .rgb7_5 {background-color: #3333CC;}
#colores_animados .rgb7_5:hover span {background: #3333CC;}
#colores_animados .rgb7_6 {background-color: #3333FF;}
#colores_animados .rgb7_6:hover span {background: #3333FF;}
#colores_animados .rgb8_1 {background-color: #663300;}
#colores_animados .rgb8_1:hover span {background: #663300;}
#colores_animados .rgb8_2 {background-color: #663333;}
#colores_animados .rgb8_2:hover span {background: #663333;}
#colores_animados .rgb8_3 {background-color: #663366;}
#colores_animados .rgb8_3:hover span {background: #663366;}
#colores_animados .rgb8_4 {background-color: #663399;}
#colores_animados .rgb8_4:hover span {background: #663399;}
#colores_animados .rgb8_5 {background-color: #6633CC;}
#colores_animados .rgb8_5:hover span {background: #6633CC;}
#colores_animados .rgb8_6 {background-color: #6633FF;}
#colores_animados .rgb8_6:hover span {background: #6633FF;}
#colores_animados .rgb9_1 {background-color: #993300;}
#colores_animados .rgb9_1:hover span {background: #993300;}
#colores_animados .rgb9_2 {background-color: #993333;}
#colores_animados .rgb9_2:hover span {background: #993333;}
#colores_animados .rgb9_3 {background-color: #993366;}
#colores_animados .rgb9_3:hover span {background: #993366;}
#colores_animados .rgb9_4 {background-color: #993399;}
#colores_animados .rgb9_4:hover span {background: #993399;}
#colores_animados .rgb9_5 {background-color: #9933CC;}
#colores_animados .rgb9_5:hover span {background: #9933CC;}
#colores_animados .rgb9_6 {background-color: #9933FF;}
#colores_animados .rgb9_6:hover span {background: #9933FF;}
#colores_animados .rgb10_1 {background-color: #CC3300;}
#colores_animados .rgb10_1:hover span {background: #CC3300;}
#colores_animados .rgb10_2 {background-color: #CC3333;}
#colores_animados .rgb10_2:hover span {background: #CC3333;}
#colores_animados .rgb10_3 {background-color: #CC3366;}
#colores_animados .rgb10_3:hover span {background: #CC3366;}
#colores_animados .rgb10_4 {background-color: #CC3399;}
#colores_animados .rgb10_4:hover span {background: #CC3399;}
#colores_animados .rgb10_5 {background-color: #CC33CC;}
#colores_animados .rgb10_5:hover span {background: #CC33CC;}
#colores_animados .rgb10_6 {background-color: #CC33FF;}
#colores_animados .rgb10_6:hover span {background: #CC33FF;}
#colores_animados .rgb11_1 {background-color: #FF3300;}
#colores_animados .rgb11_1:hover span {background: #FF3300;}
#colores_animados .rgb11_2 {background-color: #FF3333;}
#colores_animados .rgb11_2:hover span {background: #FF3333;}
#colores_animados .rgb11_3 {background-color: #FF3366;}
#colores_animados .rgb11_3:hover span {background: #FF3366;}
#colores_animados .rgb11_4 {background-color: #FF3399;}
#colores_animados .rgb11_4:hover span {background: #FF3399;}
#colores_animados .rgb11_5 {background-color: #FF33CC;}
#colores_animados .rgb11_5:hover span {background: #FF33CC;}
#colores_animados .rgb11_6 {background-color: #FF33FF;}
#colores_animados .rgb11_6:hover span {background: #FF33FF;}
#colores_animados .rgb12_1 {background-color: #006600;}
#colores_animados .rgb12_1:hover span {background: #006600;}
#colores_animados .rgb12_2 {background-color: #006633;}
#colores_animados .rgb12_2:hover span {background: #006633;}
#colores_animados .rgb12_3 {background-color: #006666;}
#colores_animados .rgb12_3:hover span {background: #006666;}
#colores_animados .rgb12_4 {background-color: #006699;}
#colores_animados .rgb12_4:hover span {background: #006699;}
#colores_animados .rgb12_5 {background-color: #0066CC;}
#colores_animados .rgb12_5:hover span {background: #0066CC;}
#colores_animados .rgb12_6 {background-color: #0066FF;}
#colores_animados .rgb12_6:hover span {background: #0066FF;}
#colores_animados .rgb13_1 {background-color: #336600;}
#colores_animados .rgb13_1:hover span {background: #336600;}
#colores_animados .rgb13_2 {background-color: #336633;}
#colores_animados .rgb13_2:hover span {background: #336633;}
#colores_animados .rgb13_3 {background-color: #336666;}
#colores_animados .rgb13_3:hover span {background: #336666;}
#colores_animados .rgb13_4 {background-color: #336699;}
#colores_animados .rgb13_4:hover span {background: #336699;}
#colores_animados .rgb13_5 {background-color: #3366CC;}
#colores_animados .rgb13_5:hover span {background: #3366CC;}
#colores_animados .rgb13_6 {background-color: #3366FF;}
#colores_animados .rgb13_6:hover span {background: #3366FF;}
#colores_animados .rgb14_1 {background-color: #666600;}
#colores_animados .rgb14_1:hover span {background: #666600;}
#colores_animados .rgb14_2 {background-color: #666633;}
#colores_animados .rgb14_2:hover span {background: #666633;}
#colores_animados .rgb14_3 {background-color: #666666;}
#colores_animados .rgb14_3:hover span {background: #666666;}
#colores_animados .rgb14_4 {background-color: #666699;}
#colores_animados .rgb14_4:hover span {background: #666699;}
#colores_animados .rgb14_5 {background-color: #6666CC;}
#colores_animados .rgb14_5:hover span {background: #6666CC;}
#colores_animados .rgb14_6 {background-color: #6666FF;}
#colores_animados .rgb14_6:hover span {background: #6666FF;}
#colores_animados .rgb15_1 {background-color: #996600;}
#colores_animados .rgb15_1:hover span {background: #996600;}
#colores_animados .rgb15_2 {background-color: #996633;}
#colores_animados .rgb15_2:hover span {background: #996633;}
#colores_animados .rgb15_3 {background-color: #996666;}
#colores_animados .rgb15_3:hover span {background: #996666;}
#colores_animados .rgb15_4 {background-color: #996699;}
#colores_animados .rgb15_4:hover span {background: #996699;}
#colores_animados .rgb15_5 {background-color: #9966CC;}
#colores_animados .rgb15_5:hover span {background: #9966CC;}
#colores_animados .rgb15_6 {background-color: #9966FF;}
#colores_animados .rgb15_6:hover span {background: #9966FF;}
#colores_animados .rgb16_1 {background-color: #CC6600;}
#colores_animados .rgb16_1:hover span {background: #CC6600;}
#colores_animados .rgb16_2 {background-color: #CC6633;}
#colores_animados .rgb16_2:hover span {background: #CC6633;}
#colores_animados .rgb16_3 {background-color: #CC6666;}
#colores_animados .rgb16_3:hover span {background: #CC6666;}
#colores_animados .rgb16_4 {background-color: #CC6699;}
#colores_animados .rgb16_4:hover span {background: #CC6699;}
#colores_animados .rgb16_5 {background-color: #CC66CC;}
#colores_animados .rgb16_5:hover span {background: #CC66CC;}
#colores_animados .rgb16_6 {background-color: #CC66FF;}
#colores_animados .rgb16_6:hover span {background: #CC66FF;}
#colores_animados .rgb17_1 {background-color: #FF6600;}
#colores_animados .rgb17_1:hover span {background: #FF6600;}
#colores_animados .rgb17_2 {background-color: #FF6633;}
#colores_animados .rgb17_2:hover span {background: #FF6633;}
#colores_animados .rgb17_3 {background-color: #FF6666;}
#colores_animados .rgb17_3:hover span {background: #FF6666;}
#colores_animados .rgb17_4 {background-color: #FF6699;}
#colores_animados .rgb17_4:hover span {background: #FF6699;}
#colores_animados .rgb17_5 {background-color: #FF66CC;}
#colores_animados .rgb17_5:hover span {background: #FF66CC;}
#colores_animados .rgb17_6 {background-color: #FF66FF;}
#colores_animados .rgb17_6:hover span {background: #FF66FF;}

/* Desplazamiento de los span de uls impares y lis impares */

#colores_animados ul:nth-child(odd) li:nth-child(odd):hover span { 
  transition: all 0.2s linear;
  display: block;
  width: 200px;
  height: auto;
  font-size: var(--font-size-sm);
  text-align: center;
  overflow: visible;
  visibility: visible;
  opacity: 1;
  color: white;
  font-weight: bold;
  padding-top: 0.5em;
  border: 2px solid white;
  border-radius: 10%;
  transform: translate(-60px, -80px) scale(0.9);
}

/* Desplazamiento de los span de uls impares y lis pares */

#colores_animados ul:nth-child(odd) li:nth-child(even):hover span {  
  transition: all 0.2s linear;
  display: block;
  width: 200px;
  height: auto;
  font-size: var(--font-size-sm);
  text-align: center;
  overflow: visible;
  visibility: visible;
  opacity: 1;
  color: white;
  font-weight: bold;
  padding-top: 0.5em;
  border: 2px solid white;
  border-radius: 10%;
  transform: translate(-60px, -80px) scale(0.9);
}

/* Color de los enlaces de la mitad de los uls */

#colores_animados #rgb18 a, #colores_animados #rgb19 a, #colores_animados #rgb20 a, 
#colores_animados #rgb21 a, #colores_animados #rgb22 a, #colores_animados #rgb23 a, 
#colores_animados #rgb24 a, #colores_animados #rgb25 a, #colores_animados #rgb26 a, 
#colores_animados #rgb27 a, #colores_animados #rgb28 a, #colores_animados #rgb29 a, 
#colores_animados #rgb30 a, #colores_animados #rgb31 a, #colores_animados #rgb32 a, 
#colores_animados #rgb33 a, #colores_animados #rgb34 a, #colores_animados #rgb35 a {
  color: black;
}

#colores_animados .rgb18_1 {background-color:#009900;}
#colores_animados .rgb18_1:hover span {background: #009900;}
#colores_animados .rgb18_2 {background-color: #009933;}
#colores_animados .rgb18_2:hover span {background: #009933;}
#colores_animados .rgb18_3 {background-color: #009966;}
#colores_animados .rgb18_3:hover span {background: #009966;}
#colores_animados .rgb18_4 {background-color:#009999;}
#colores_animados .rgb18_4:hover span {background: #009999;}
#colores_animados .rgb18_5 {background-color: #0099CC;}
#colores_animados .rgb18_5:hover span {background: #0099CC;}
#colores_animados .rgb18_6 {background-color: #0099FF;}
#colores_animados .rgb18_6:hover span {background: #0099FF;}
#colores_animados .rgb19_1 {background-color: #339900;}
#colores_animados .rgb19_1:hover span {background: #339900;}
#colores_animados .rgb19_2 {background-color: #339933;}
#colores_animados .rgb19_2:hover span {background: #339933;}
#colores_animados .rgb19_3 {background-color: #339966;}
#colores_animados .rgb19_3:hover span {background: #339966;}
#colores_animados .rgb19_4 {background-color: #339999;}
#colores_animados .rgb19_4:hover span {background: #339999;}
#colores_animados .rgb19_5 {background-color: #3399CC;}
#colores_animados .rgb19_5:hover span {background: #3399CC;}
#colores_animados .rgb19_6 {background-color: #3399FF;}
#colores_animados .rgb19_6:hover span {background: #3399FF;}
#colores_animados .rgb20_1 {background-color: #669900;}
#colores_animados .rgb20_1:hover span {background: #669900;}
#colores_animados .rgb20_2 {background-color: #669933;}
#colores_animados .rgb20_2:hover span {background: #669933;}
#colores_animados .rgb20_3 {background-color: #669966;}
#colores_animados .rgb20_3:hover span {background: #669966;}
#colores_animados .rgb20_4 {background-color: #669999;}
#colores_animados .rgb20_4:hover span {background: #669999;}
#colores_animados .rgb20_5 {background-color: #6699CC;}
#colores_animados .rgb20_5:hover span {background: #6699CC;}
#colores_animados .rgb20_6 {background-color: #6699FF;}
#colores_animados .rgb20_6:hover span {background: #6699FF;}
#colores_animados .rgb21_1 {background-color: #999900;} 
#colores_animados .rgb21_1:hover span {background: #999900;}
#colores_animados .rgb21_2 {background-color: #999933;}
#colores_animados .rgb21_2:hover span {background: #999933;}
#colores_animados .rgb21_3 {background-color: #999966;}
#colores_animados .rgb21_3:hover span {background: #999966;}
#colores_animados .rgb21_4 {background-color: #999999;}
#colores_animados .rgb21_4:hover span {background: #999999;}
#colores_animados .rgb21_5 {background-color: #9999CC;}
#colores_animados .rgb21_5:hover span {background: #9999CC;}
#colores_animados .rgb21_6 {background-color: #9999FF;}
#colores_animados .rgb21_6:hover span {background: #9999FF;}
#colores_animados .rgb22_1 {background-color: #CC9900;}
#colores_animados .rgb22_1:hover span {background: #CC9900;}
#colores_animados .rgb22_2 {background-color: #CC9933;}
#colores_animados .rgb22_2:hover span {background: #CC9933;}
#colores_animados .rgb22_3 {background-color: #CC9966;}
#colores_animados .rgb22_3:hover span {background: #CC9966;}
#colores_animados .rgb22_4 {background-color: #CC9999;}
#colores_animados .rgb22_4:hover span {background: #CC9999;}
#colores_animados .rgb22_5 {background-color: #CC99CC;}
#colores_animados .rgb22_5:hover span {background: #CC99CC;}
#colores_animados .rgb22_6 {background-color: #CC99FF;}
#colores_animados .rgb22_6:hover span {background: #CC99FF;}
#colores_animados .rgb23_1 {background-color: #FF9900;}
#colores_animados .rgb23_1:hover span {background: #FF9900;}
#colores_animados .rgb23_2 {background-color: #FF9933;}
#colores_animados .rgb23_2:hover span {background: #FF9933;}
#colores_animados .rgb23_3 {background-color: #FF9966;}
#colores_animados .rgb23_3:hover span {background: #FF9966;}
#colores_animados .rgb23_4 {background-color: #FF9999;}
#colores_animados .rgb23_4:hover span {background: #FF9999;}
#colores_animados .rgb23_5 {background-color: #FF99CC;}
#colores_animados .rgb23_5:hover span {background: #FF99CC;}
#colores_animados .rgb23_6 {background-color: #FF99FF;}
#colores_animados .rgb23_6:hover span {background: #FF99FF;}
#colores_animados .rgb24_1 {background-color: #00CC00;}
#colores_animados .rgb24_1:hover span {background: #00CC00;}
#colores_animados .rgb24_2 {background-color: #00CC33;}
#colores_animados .rgb24_2:hover span {background: #00CC33;}
#colores_animados .rgb24_3 {background-color: #00CC66;}
#colores_animados .rgb24_3:hover span {background: #00CC66;}
#colores_animados .rgb24_4 {background-color: #00CC99;}
#colores_animados .rgb24_4:hover span {background: #00CC99;}
#colores_animados .rgb24_5 {background-color: #00CCCC;}
#colores_animados .rgb24_5:hover span {background: #00CCCC;}
#colores_animados .rgb24_6 {background-color: #00CCFF;}
#colores_animados .rgb24_6:hover span {background: #00CCFF;}
#colores_animados .rgb25_1 {background-color: #33CC00;}
#colores_animados .rgb25_1:hover span {background: #33CC00;}
#colores_animados .rgb25_2 {background-color: #33CC33;}
#colores_animados .rgb25_2:hover span {background: #33CC33;}
#colores_animados .rgb25_3 {background-color: #33CC66;}
#colores_animados .rgb25_3:hover span {background: #33CC66;}
#colores_animados .rgb25_4 {background-color: #33CC99;}
#colores_animados .rgb25_4:hover span {background: #33CC99;}
#colores_animados .rgb25_5 {background-color: #33CCCC;}
#colores_animados .rgb25_5:hover span {background: #33CCCC;}
#colores_animados .rgb25_6 {background-color: #33CCFF;}
#colores_animados .rgb25_6:hover span {background: #33CCFF;}
#colores_animados .rgb26_1 {background-color: #66CC00;}
#colores_animados .rgb26_1:hover span {background: #66CC00;}
#colores_animados .rgb26_2 {background-color: #66CC33;}
#colores_animados .rgb26_2:hover span {background: #66CC33;}
#colores_animados .rgb26_3 {background-color: #66CC66;}
#colores_animados .rgb26_3:hover span {background: #66CC66;}
#colores_animados .rgb26_4 {background-color: #66CC99;}
#colores_animados .rgb26_4:hover span {background: #66CC99;}
#colores_animados .rgb26_5 {background-color: #66CCCC;}
#colores_animados .rgb26_5:hover span {background: #66CCCC;}
#colores_animados .rgb26_6 {background-color: #66CCFF;}
#colores_animados .rgb26_6:hover span {background: #66CCFF;}
#colores_animados .rgb27_1 {background-color: #99CC00;}
#colores_animados .rgb27_1:hover span {background: #99CC00;}
#colores_animados .rgb27_2 {background-color: #99CC33;}
#colores_animados .rgb27_2:hover span {background: #99CC33;}
#colores_animados .rgb27_3 {background-color: #99CC66;}
#colores_animados .rgb27_3:hover span {background: #99CC66;}
#colores_animados .rgb27_4 {background-color: #99CC99;}
#colores_animados .rgb27_4:hover span {background: #99CC99;}
#colores_animados .rgb27_5 {background-color: #99CCCC;}
#colores_animados .rgb27_5:hover span {background: #99CCCC;}
#colores_animados .rgb27_6 {background-color: #99CCFF;}
#colores_animados .rgb27_6:hover span {background: #99CCFF;}
#colores_animados .rgb28_1 {background-color: #CCCC00;}
#colores_animados .rgb28_1:hover span {background: #CCCC00;}
#colores_animados .rgb28_2 {background-color: #CCCC33;}
#colores_animados .rgb28_2:hover span {background: #CCCC33;}
#colores_animados .rgb28_3 {background-color: #CCCC66;}
#colores_animados .rgb28_3:hover span {background: #CCCC66;}
#colores_animados .rgb28_4 {background-color: #CCCC99;}
#colores_animados .rgb28_4:hover span {background: #CCCC99;}
#colores_animados .rgb28_5 {background-color: #CCCCCC;}
#colores_animados .rgb28_5:hover span {background: #CCCCCC;}
#colores_animados .rgb28_6 {background-color: #CCCCFF;}
#colores_animados .rgb28_6:hover span {background: #CCCCFF;}
#colores_animados .rgb29_1 {background-color: #FFCC00;}
#colores_animados .rgb29_1:hover span {background: #FFCC00;}
#colores_animados .rgb29_2 {background-color: #FFCC33;}
#colores_animados .rgb29_2:hover span {background: #FFCC33;}
#colores_animados .rgb29_3 {background-color: #FFCC66;}
#colores_animados .rgb29_3:hover span {background: #FFCC66;}
#colores_animados .rgb29_4 {background-color: #FFCC99;}
#colores_animados .rgb29_4:hover span {background: #FFCC99;}
#colores_animados .rgb29_5 {background-color: #FFCCCC;}
#colores_animados .rgb29_5:hover span {background: #FFCCCC;}
#colores_animados .rgb29_6 {background-color: #FFCCFF;}
#colores_animados .rgb29_6:hover span {background: #FFCCFF;}
#colores_animados .rgb30_1 {background-color: #00FF00;}
#colores_animados .rgb30_1:hover span {background: #00FF00;}
#colores_animados .rgb30_2 {background-color: #00FF33;}
#colores_animados .rgb30_2:hover span {background: #00FF33;}
#colores_animados .rgb30_3 {background-color: #00FF66;}
#colores_animados .rgb30_3:hover span {background: #00FF66;}
#colores_animados .rgb30_4 {background-color: #00FF99;}
#colores_animados .rgb30_4:hover span {background: #00FF99;}
#colores_animados .rgb30_5 {background-color: #00FFCC;}
#colores_animados .rgb30_5:hover span {background: #00FFCC;}
#colores_animados .rgb30_6 {background-color: #00FFFF;}
#colores_animados .rgb30_6:hover span {background: #00FFFF;}
#colores_animados .rgb31_1 {background-color: #33FF00;}
#colores_animados .rgb31_1:hover span {background: #33FF00;}
#colores_animados .rgb31_2 {background-color: #33FF33;}
#colores_animados .rgb31_2:hover span {background: #33FF33;}
#colores_animados .rgb31_3 {background-color: #33FF66;}
#colores_animados .rgb31_3:hover span {background: #33FF66;}
#colores_animados .rgb31_4 {background-color: #33FF99;}
#colores_animados .rgb31_4:hover span {background: #33FF99;}
#colores_animados .rgb31_5 {background-color: #33FFCC;}
#colores_animados .rgb31_5:hover span {background: #33FFCC;}
#colores_animados .rgb31_6 {background-color: #33FFFF;}
#colores_animados .rgb31_6:hover span {background: #33FFFF;}
#colores_animados .rgb32_1 {background-color: #66FF00;}
#colores_animados .rgb32_1:hover span {background: #66FF00;}
#colores_animados .rgb32_2 {background-color: #66FF33;}
#colores_animados .rgb32_2:hover span {background: #66FF33;}
#colores_animados .rgb32_3 {background-color: #66FF66;}
#colores_animados .rgb32_3:hover span {background: #66FF66;}
#colores_animados .rgb32_4 {background-color: #66FF99;}
#colores_animados .rgb32_4:hover span {background: #66FF99;}
#colores_animados .rgb32_5 {background-color: #66FFCC;}
#colores_animados .rgb32_5:hover span {background: #66FFCC;}
#colores_animados .rgb32_6 {background-color: #66FFFF;}
#colores_animados .rgb32_6:hover span {background: #66FFFF;}
#colores_animados .rgb33_1 {background-color: #99FF00;}
#colores_animados .rgb33_1:hover span {background: #99FF00;}
#colores_animados .rgb33_2 {background-color: #99FF33;}
#colores_animados .rgb33_2:hover span {background: #99FF33;}
#colores_animados .rgb33_3 {background-color: #99FF66;}
#colores_animados .rgb33_3:hover span {background: #99FF66;}
#colores_animados .rgb33_4 {background-color: #99FF99;}
#colores_animados .rgb33_4:hover span {background: #99FF99;}
#colores_animados .rgb33_5 {background-color: #99FFCC;}
#colores_animados .rgb33_5:hover span {background: #99FFCC;}
#colores_animados .rgb33_6 {background-color: #99FFFF;}
#colores_animados .rgb33_6:hover span {background: #99FFFF;}
#colores_animados .rgb34_1 {background-color: #CCFF00;}
#colores_animados .rgb34_1:hover span {background: #CCFF00; color: black !important;}
#colores_animados .rgb34_2 {background-color: #CCFF33;}
#colores_animados .rgb34_2:hover span {background: #CCFF33; color: black !important;}
#colores_animados .rgb34_3 {background-color: #CCFF66;}
#colores_animados .rgb34_3:hover span {background: #CCFF66; color: black !important;}
#colores_animados .rgb34_4 {background-color: #CCFF99;}
#colores_animados .rgb34_4:hover span {background: #CCFF99; color: black !important;}
#colores_animados .rgb34_5 {background-color: #CCFFCC;}
#colores_animados .rgb34_5:hover span {background: #CCFFCC; color: black !important;}
#colores_animados .rgb34_6 {background-color: #CCFFFF;}
#colores_animados .rgb34_6:hover span {background: #CCFFFF; color: black !important;}
#colores_animados .rgb35_1 {background-color: #FFFF00;}
#colores_animados .rgb35_1:hover span {background: #FFFF00; color: black !important;}
#colores_animados .rgb35_2 {background-color: #FFFF33;}
#colores_animados .rgb35_2:hover span {background: #FFFF33; color: black !important;}
#colores_animados .rgb35_3 {background-color: #FFFF66;}
#colores_animados .rgb35_3:hover span {background: #FFFF66; color: black !important;}
#colores_animados .rgb35_4 {background-color: #FFFF99;}
#colores_animados .rgb35_4:hover span {background: #FFFF99; color: black !important; }
#colores_animados .rgb35_5 {background-color: #FFFFCC;}
#colores_animados .rgb35_5:hover span {background: #FFFFCC; color: black !important;}
#colores_animados .rgb35_6 {background-color: #FFFFFF;}
#colores_animados .rgb35_6:hover span {background: #FFFFFF; color: black !important;}

/* uls pares lis impares */

#colores_animados ul:nth-child(even) li:nth-child(odd):hover span { 
  transition: all 0.2s linear;
  display: block;
  width: 200px;
  height: auto;
  font-size: var(--font-size-sm);
  text-align: center;
  overflow: visible;
  visibility: visible;
  color: white;
  opacity: 1;
  font-weight: bold;
  border: 2px solid white;
  border-radius: 10%;
  padding: 1px;
  padding-top: 0.5em;
  transform: translate(-60px, -80px) scale(0.9);
}

/* uls pares lis impares */

#colores_animados ul:nth-child(even) li:nth-child(even):hover span { 
  transition: all 0.2s linear;
  display: block;
  width: 200px;
  height: auto;
  font-size: var(--font-size-sm);
  text-align: center;
  overflow: visible;
  visibility: visible;
  opacity: 1;
  color: white;
  font-weight: bold;
  padding-top: 0.5em;
  border: 2px solid white;
  border-radius: 10%;
  transform: translate(-60px, -80px) scale(0.9);
}

/* ESTILOS DE LA PAGINA COLORES WEB */

/* Estilo para la galeria de colores con input */

#menu_colores input[id*="menu"] {display:none;}
#grid_colores {
  position: relative;
  width: 100%;
  max-width: 90vw;
  margin: 20px auto;
  padding: 20px 0;
  background: #069;
  border-radius: 5px;
  display: grid;
  grid-template-columns: repeat(3, minmax(260px, 1fr));
  grid-gap: 10px;
  place-items: center;
}

#grid_colores > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

#grid_colores p {
  width: auto;
  height: auto;
  position: relative;
  padding-inline: 5px;
  margin: 0;
  text-align: center;
  font-size: var(--font-size-sm) !important;
  cursor: pointer;
}

#grid_colores p label {
  position: relative;
/*  font: 400 20px/40px 'Open Sans Condensed', sans-serif; */
  font-family: 'Open Sans Condensed', sans-serif;
  font-size: var(--font-size-sm);
  padding-inline: 10px;
  font-weight: 400;
  line-height: 40px;
  color: #fff;
  cursor: pointer;
}

#grid_colores p label:last-child {
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0);
}

#grid_colores p:hover {background:rgba(0,0,0,0.05);}

#grid_colores > div {background:rgba(255,255,255,0.005);} 

#grid_colores > div > div > div {
  width: 100%;
  max-width: 600px;
  display: grid;
  grid-template-columns: repeat(3, minmax(200px, 1fr));
  grid-gap: 5px;
}

#grid_colores div > div > div > div {
  position: relative;
  height: 0;
  overflow: hidden;
  transition: height 0.75s cubic-bezier(.58,3,0.5,0.5);
}

#grid_colores div > div > div > div > p {
  padding-block: 5px;
  font-size: calc(var(--font-size-base) * 0.7);
}

/* Estilo para los contenedores de tonos rosas */

p#control-rosas {
  background: pink;
  border-radius: 20%;
  transition: background-color 0.75s cubic-bezier(.58,3,0.5,0.5);
}

/* p#control-rosas.active {} */

div.rosa1 {background: #FFC0CB; padding: 0 10px;}
div.rosa1:hover {transform-origin: 0% 0%; transform: scale(1.5); z-index: 10; color: white; border-radius: 20%; border: 1px solid; box-shadow: 4px 4px 3px rgba(255,255,255,.5);}
div.rosa2 {background: #FFB6C1;padding: 0 10px;}
div.rosa2:hover {transform-origin: 50% 0%; transform: scale(1.5); z-index: 10; color: white; border-radius: 20%; border: 1px solid; box-shadow: 4px 4px 3px rgba(255,255,255,.5);}
div.rosa3 {background: #FF69B4; padding: 0 10px;}
div.rosa3:hover {transform-origin: 100% 0%; transform: scale(1.5); z-index: 10; color: white; border-radius: 20%; border: 1px solid; box-shadow: 4px 4px 3px rgba(255,255,255,.5);}
div.rosa4 {background: #FF1493; padding: 0 10px;}
div.rosa4:hover {transform-origin: 0% 100%; transform: scale(1.5); z-index: 10; color: white; border-radius: 20%; border: 1px solid; box-shadow: 4px 4px 3px rgba(255,255,255,.5);}
div.rosa5 {background: #C71585; padding: 0 10px;}
div.rosa5:hover {transform-origin: 50% 100%; transform: scale(1.5); z-index: 10; color: white; border-radius: 20%; border: 1px solid; box-shadow: 4px 4px 3px rgba(255,255,255,.5);}
div.rosa6 {background: #DB7093; padding: 0 10px;}
div.rosa6:hover {transform-origin: 100% 100%; transform: scale(1.5); z-index: 10; color: white; border-radius: 20%; border: 1px solid; box-shadow: 4px 4px 3px rgba(255,255,255,.5);}

/* Estilo para los contenedores de tonos naranjas */

p#control-naranjas {
  background: orange;
  border-radius: 20%;
  transition: background-color 0.75s cubic-bezier(.58,3,0.5,0.5);
}

/* p#control-naranjas.active {} */

div.naranja1 {background: #FFA07A; padding: 0 10px;}
div.naranja1:hover {transform-origin: 0% 0%;transform: scale(1.5); z-index: 10; color: white; border-radius: 20%; border: 1px solid; box-shadow: 4px 4px 3px rgba(255,255,255,.5);}
div.naranja2 {background: #FF7F50; padding: 0 10px;}
div.naranja2:hover {transform-origin: 50% 0%;transform: scale(1.5); z-index: 10; color: white; border-radius: 20%; border: 1px solid; box-shadow: 4px 4px 3px rgba(255,255,255,.5);}
div.naranja3 {background: #FF6347; padding: 0 10px;}
div.naranja3:hover {transform-origin: 100% 0%;transform: scale(1.5); z-index: 10; color: white; border-radius: 20%; border: 1px solid; box-shadow: 4px 4px 3px rgba(255,255,255,.5);}
div.naranja4 {background: #FF4500; padding: 0 10px;}
div.naranja4:hover {transform-origin: 0% 100%;transform: scale(1.5); z-index: 10; color: white; border-radius: 20%; border: 1px solid; box-shadow: 4px 4px 3px rgba(255,255,255,.5);}
div.naranja5 {background: #FF8C00; padding: 0 10px;}
div.naranja5:hover {transform-origin: 50% 100%;transform: scale(1.5); z-index: 10; color: white; border-radius: 20%; border: 1px solid; box-shadow: 4px 4px 3px rgba(255,255,255,.5);}
div.naranja6 {background: #FFA500; padding: 0 10px;}
div.naranja6:hover {transform-origin: 100% 100%;transform: scale(1.5); z-index: 10; color: white; border-radius: 20%; border: 1px solid; box-shadow: 4px 4px 3px rgba(255,255,255,.5);}

/* Estilo para los contenedores de tonos rojos */

p#control-rojos {
  background: red;
  border-radius: 20%;
  transition: background-color 0.75s cubic-bezier(.58,3,0.5,0.5);
}
/* p#control-rojos.active {} */
div.rojo1 {background: #CD5C5C; padding: 0 10px;}
div.rojo1:hover {transform-origin: 0% 0%; transform: scale(1.5); z-index: 10; color: white; border-radius: 20%; border: 1px solid; box-shadow: 4px 4px 3px rgba(255,255,255,.5);}
div.rojo2 {background: #F08080;padding: 0 10px;}
div.rojo2:hover {transform-origin: 50% 0%; transform: scale(1.5); z-index: 10; color: white; border-radius: 20%; border: 1px solid; box-shadow: 4px 4px 3px rgba(255,255,255,.5);}
div.rojo3 {background: #FA8072;padding: 0 10px;}
div.rojo3:hover {transform-origin: 100% 0%; transform: scale(1.5); z-index: 10; color: white; border-radius: 20%; border: 1px solid; box-shadow: 4px 4px 3px rgba(255,255,255,.5);}
div.rojo4 {background: #E9967A; padding: 0 10px;}
div.rojo4:hover {transform-origin: 0% 50%; transform: scale(1.5); z-index: 10; color: white; border-radius: 20%; border: 1px solid; box-shadow: 4px 4px 3px rgba(255,255,255,.5);}
div.rojo5 {background: #FFA07A; padding: 0 10px;}
div.rojo5:hover {transform-origin: 50% 50%; transform: scale(1.5); z-index: 10; color: white; border-radius: 20%; border: 1px solid; box-shadow: 4px 4px 3px rgba(255,255,255,.5);}
div.rojo6 {background: #DC143C; padding: 0 10px;}
div.rojo6:hover {transform-origin: 100% 50%; transform: scale(1.5); z-index: 10; color: white; border-radius: 20%; border: 1px solid; box-shadow: 4px 4px 3px rgba(255,255,255,.5);}
div.rojo7 {background: #FF0000; padding: 0 10px;}
div.rojo7:hover {transform-origin: 0% 100%; transform: scale(1.5); z-index: 10; color: white; border-radius: 20%; border: 1px solid; box-shadow: 4px 4px 3px rgba(255,255,255,.5);}
div.rojo8 {background: #B22222; padding: 0 10px; color: white;}
div.rojo8:hover {transform-origin: 50% 100%; transform: scale(1.5); z-index: 10; color: white; border-radius: 20%; border: 1px solid; box-shadow: 4px 4px 3px rgba(255,255,255,.5);}
div.rojo9 {background: #8B0000; padding: 0 10px; color: white;}
div.rojo9:hover {transform-origin: 100% 100%; transform: scale(1.5); z-index: 10; color: white; border-radius: 20%; border: 1px solid; box-shadow: 4px 4px 3px rgba(255,255,255,.5);}

/* Estilo para los contenedores de tonos grises */ 

p#control-grises {
  background: grey;
  border-radius: 20%;
  transition: background-color 0.75s cubic-bezier(.58,3,0.5,0.5);
}
/* p#control-grises.active {} */
div.gris1 {background: #DCDCDC; padding: 0 10px;}
div.gris1:hover {transform-origin: 0% 0%; transform: scale(1.5); z-index: 10; border-radius: 20%; border: 1px solid; box-shadow: 4px 4px 3px rgba(255,255,255,.5);}
div.gris2 {background: #D3D3D3; padding: 0 10px;}
div.gris2:hover {transform-origin: 50% 0%; transform: scale(1.5); z-index: 10; border-radius: 20%; border: 1px solid; box-shadow: 4px 4px 3px rgba(255,255,255,.5);}
div.gris3 {background: #C0C0C0; padding: 0 10px;}
div.gris3:hover {transform-origin: 100% 0%; transform: scale(1.5); z-index: 10; border-radius: 20%; border: 1px solid; box-shadow: 4px 4px 3px rgba(255,255,255,.5);}
div.gris4 {background: #A9A9A9; padding: 0 10px;}
div.gris4:hover {transform-origin: 0% 50%; transform: scale(1.5); z-index: 10; border-radius: 20%; border: 1px solid; box-shadow: 4px 4px 3px rgba(255,255,255,.5);}
div.gris5 {background: #808080; padding: 0 10px; color: white;}
div.gris5:hover {transform-origin: 50% 50%; transform: scale(1.5); z-index: 10; border-radius: 20%; border: 1px solid; box-shadow: 4px 4px 3px rgba(0,0,0,.5);}
div.gris6 {background: #696969; padding: 0 10px; color: white;}
div.gris6:hover {transform-origin: 100% 50%; transform: scale(1.5); z-index: 10; border-radius: 20%; border: 1px solid; box-shadow: 4px 4px 3px rgba(0,0,0,.5);}
div.gris7 {background: #778899; padding: 0 10px; color: white;}
div.gris7:hover {transform-origin: 0% 100%; transform: scale(1.5); z-index: 10; border-radius: 20%; border: 1px solid; box-shadow: 4px 4px 3px rgba(0,0,0,.5);}
div.gris8 {background: #708090; padding: 0 10px; color: white;}
div.gris8:hover {transform-origin: 50% 100%; transform: scale(1.5); z-index: 10; border-radius: 20%; border: 1px solid; box-shadow: 4px 4px 3px rgba(0,0,0,.5);}
div.gris9 {background: #2F4F4F; padding: 0 10px; color: white;}
div.gris9:hover {transform-origin: 100% 100%; transform: scale(1.5); z-index: 10; border-radius: 20%; border: 1px solid; box-shadow: 4px 4px 3px rgba(0,0,0,.5);}
div.gris10 {background: #000000; padding: 0 10px; color: white;} 
div.gris10:hover {transform-origin: 0% 100%; transform: scale(1.5); z-index: 10; border-radius: 20%; border: 1px solid; box-shadow: 4px 4px 3px rgba(0,0,0,.5);}

/* Estilo para los contenedores de tonos amarillos */ 

#control-amarillos {
  background: yellow;
  border-radius: 20%;
  transition: background-color 0.75s cubic-bezier(.58,3,0.5,0.5);
}

p#control-amarillos label {color: black;}
/* #control-amarillos.active {} */
div.amarillo1 {background: #FFD700; padding: 0 10px;}
div.amarillo1:hover {transform-origin: 0% 0%; transform: scale(1.5); z-index: 10; border-radius: 20%; border: 1px solid; box-shadow: 4px 4px 3px rgba(0,0,0,.5);}
div.amarillo2 {background: #FFFF00; padding: 0 10px;}
div.amarillo2:hover {transform-origin: 50% 0%; transform: scale(1.5); z-index: 10; border-radius: 20%; border: 1px solid; box-shadow: 4px 4px 3px rgba(0,0,0,.5);}
div.amarillo3 {background: #FFFFE0; padding: 0 10px;}
div.amarillo3:hover {transform-origin: 100% 0%; transform: scale(1.5); z-index: 10; border-radius: 20%; border: 1px solid; box-shadow: 4px 4px 3px rgba(0,0,0,.5);}
div.amarillo4 {background: #FFFACD; padding: 0 10px;}
div.amarillo4:hover {transform-origin: 0% 50%; transform: scale(1.5); z-index: 10; border-radius: 20%; border: 1px solid; box-shadow: 4px 4px 3px rgba(0,0,0,.5);}
div.amarillo5 {background: #FAFAD2; padding: 0 10px;}
div.amarillo5:hover {transform-origin: 50% 50%; transform: scale(1.5); z-index: 10; border-radius: 20%; border: 1px solid; box-shadow: 4px 4px 3px rgba(0,0,0,.5);}
div.amarillo6 {background: #FFEFD5; padding: 0 10px;}
div.amarillo6:hover {transform-origin: 100% 50%; transform: scale(1.5); z-index: 10; border-radius: 20%; border: 1px solid; box-shadow: 4px 4px 3px rgba(0,0,0,.5);}
div.amarillo7 {background: #FFE4B5; padding: 0 10px;}
div.amarillo7:hover {transform-origin: 0% 100%; transform: scale(1.5); z-index: 10; border-radius: 20%; border: 1px solid; box-shadow: 4px 4px 3px rgba(0,0,0,.5);}
div.amarillo8 {background: #FFDAB9; padding: 0 10px;}
div.amarillo8:hover {transform-origin: 50% 100%; transform: scale(1.5); z-index: 10; border-radius: 20%; border: 1px solid; box-shadow: 4px 4px 3px rgba(0,0,0,.5);}
div.amarillo9 {background: #EEE8AA; padding: 0 10px;}
div.amarillo9:hover {transform-origin: 100% 100%;transform: scale(1.5); z-index: 10; border-radius: 20%; border: 1px solid; box-shadow: 4px 4px 3px rgba(0,0,0,.5);}
div.amarillo10 {background: #F0E68C; padding: 0 10px;} 
div.amarillo10:hover {transform-origin: 0% 100%; transform: scale(1.5); z-index: 10; border-radius: 20%; border: 1px solid; box-shadow: 4px 4px 3px rgba(0,0,0,.5);} 
div.amarillo11 {background: #BDB76B; padding: 0 10px;} 
div.amarillo11:hover {transform-origin: 50% 100%; transform: scale(1.5); z-index: 10; border-radius: 20%; border: 1px solid; box-shadow: 4px 4px 3px rgba(0,0,0,.5);} 

/* Estilo para los contenedores de tonos blancos */

p#control-blancos {
  background: white;
  border-radius: 20%;
  transition: background-color 0.75s cubic-bezier(.58,3,0.5,0.5);
}

p#control-blancos label {color: black;}
/* p#control-blancos.active {} */
.blanco1 {background: #FFFFFF; padding: 0 10px;}
.blanco1:hover {transform-origin: 0% 0%; transform: scale(1.5); z-index: 10; border-radius: 20%; border: 1px solid; box-shadow: 4px 4px 3px rgba(0,0,0,.5);}
.blanco2 {background: #FFFAFA; padding: 0 10px;}
.blanco2:hover {transform-origin: 50% 0%; transform: scale(1.5); z-index: 10; border-radius: 20%; border: 1px solid; box-shadow: 4px 4px 3px rgba(0,0,0,.5);}
.blanco3 {background: #F0FFF0; padding: 0 10px;}
.blanco3:hover {transform-origin: 100% 0%; transform: scale(1.5); z-index: 10; border-radius: 20%; border: 1px solid; box-shadow: 4px 4px 3px rgba(0,0,0,.5);}
.blanco4 {background: #F5FFFA; padding: 0 10px;}
.blanco4:hover {transform-origin: 0% 50%; transform: scale(1.5); z-index: 10; border-radius: 20%; border: 1px solid; box-shadow: 4px 4px 3px rgba(0,0,0,.5);}
.blanco5 {background: #F0FFFF; padding: 0 10px;}
.blanco5:hover {transform-origin: 50% 50%; transform: scale(1.5); z-index: 10; border-radius: 20%; border: 1px solid; box-shadow: 4px 4px 3px rgba(0,0,0,.5);}
.blanco6 {background: #F0F8FF; padding: 0 10px;}
.blanco6:hover {transform-origin: 100% 50%; transform: scale(1.5); z-index: 10; border-radius: 20%; border: 1px solid; box-shadow: 4px 4px 3px rgba(0,0,0,.5);}
.blanco7 {background: #F8F8FF; padding: 0 10px;}
.blanco7:hover {transform-origin: 0% 50%; transform: scale(1.5); z-index: 10; border-radius: 20%; border: 1px solid; box-shadow: 4px 4px 3px rgba(0,0,0,.5);}
.blanco8 {background: #F5F5F5; padding: 0 10px;}
.blanco8:hover {transform-origin: 50% 50%; transform: scale(1.5); z-index: 10; border-radius: 20%; border: 1px solid; box-shadow: 4px 4px 3px rgba(0,0,0,.5);}
.blanco9 {background: #FFF5EE; padding: 0 10px;}
.blanco9:hover {transform-origin: 100% 50%; transform: scale(1.5); z-index: 10; border-radius: 20%; border: 1px solid; box-shadow: 4px 4px 3px rgba(0,0,0,.5);}
.blanco10 {background: #F5F5DC; padding: 0 10px;} 
.blanco10:hover {transform-origin: 0% 50%; transform: scale(1.5); z-index: 10; border-radius: 20%; border: 1px solid; box-shadow: 4px 4px 3px rgba(0,0,0,.5);} 
.blanco11 {background: #FDF5E6; padding: 0 10px;} 
.blanco11:hover {transform-origin: 50% 50%; transform: scale(1.5); z-index: 10; border-radius: 20%; border: 1px solid; box-shadow: 4px 4px 3px rgba(0,0,0,.5);}
.blanco12 {background: #FFFAF0; padding: 0 10px;} 
.blanco12:hover {transform-origin: 100% 50%;transform: scale(1.5); z-index: 10; border-radius: 20%; border: 1px solid; box-shadow: 4px 4px 3px rgba(0,0,0,.5);}
.blanco13 {background: #FFFFF0; padding: 0 10px;} 
.blanco13:hover {transform-origin: 0% 100%; transform: scale(1.5); z-index: 10; border-radius: 20%; border: 1px solid; box-shadow: 4px 4px 3px rgba(0,0,0,.5);}
.blanco14 {background: #FAEBD7; padding: 0 10px;} 
.blanco14:hover {transform-origin: 50% 100%; transform: scale(1.5); z-index: 10; border-radius: 20%; border: 1px solid; box-shadow: 4px 4px 3px rgba(0,0,0,.5);}
.blanco15 {background: #FAF0E6; padding: 0 10px;} 
.blanco15:hover {transform-origin: 100% 100%; transform: scale(1.5); z-index: 10; border-radius: 20%; border: 1px solid; box-shadow: 4px 4px 3px rgba(0,0,0,.5);}
.blanco16 {background: #FFF0F5; padding: 0 10px;} 
.blanco16:hover {transform-origin: 0% 100%; transform: scale(1.5); z-index: 10; border-radius: 20%; border: 1px solid; box-shadow: 4px 4px 3px rgba(0,0,0,.5);}
.blanco17 {background: #FFE4E1; padding: 0 10px;} 
.blanco17:hover {transform-origin: 50% 100%; transform: scale(1.5); z-index: 10; border-radius: 20%; border: 1px solid; box-shadow: 4px 4px 3px rgba(0,0,0,.5);}

/* Estilo para los contenedores de tonos marrones */

p#control-marrones {
  background: brown;
  border-radius: 20%;
  transition: background-color 0.75s cubic-bezier(.58,3,0.5,0.5);
}
/* p#control-marrones.active {} */
.marron1 {background: #FFF8DC; padding: 0 10px;}
.marron1:hover {transform-origin: 0% 0%; transform: scale(1.5); z-index: 10; border-radius: 20%; border: 1px solid; box-shadow: 4px 4px 3px rgba(255,255,255,.5);}
.marron2 {background: #FFEBCD; padding: 0 10px;}
.marron2:hover {transform-origin: 50% 0%; transform: scale(1.5); z-index: 10; border-radius: 20%; border: 1px solid; box-shadow: 4px 4px 3px rgba(255,255,255,.5);}
.marron3 {background: #FFE4C4; padding: 0 10px;}
.marron3:hover {transform-origin: 100% 0%; transform: scale(1.5); z-index: 10; border-radius: 20%; border: 1px solid; box-shadow: 4px 4px 3px rgba(255,255,255,.5);}
.marron4 {background: #FFDEAD; padding: 0 10px;}
.marron4:hover {transform-origin: 0% 50%; transform: scale(1.5); z-index: 10; border-radius: 20%; border: 1px solid; box-shadow: 4px 4px 3px rgba(255,255,255,.5);}
.marron5 {background: #F5DEB3; padding: 0 10px;}
.marron5:hover {transform-origin: 50% 50%; transform: scale(1.5); z-index: 10; border-radius: 20%; border: 1px solid; box-shadow: 4px 4px 3px rgba(255,255,255,.5);}
.marron6 {background: #DEB887; padding: 0 10px;}
.marron6:hover {transform-origin: 100% 50%; transform: scale(1.5); z-index: 10; border-radius: 20%; border: 1px solid; box-shadow: 4px 4px 3px rgba(255,255,255,.5);}
.marron7 {background: #D2B48C; padding: 0 10px;}
.marron7:hover {transform-origin: 0% 50%; transform: scale(1.5); z-index: 10; border-radius: 20%; border: 1px solid; box-shadow: 4px 4px 3px rgba(255,255,255,.5);}
.marron8 {background: #BC8F8F; padding: 0 10px;}
.marron8:hover {transform-origin: 50% 50%; transform: scale(1.5); z-index: 10; border-radius: 20%; border: 1px solid; box-shadow: 4px 4px 3px rgba(255,255,255,.5);}
.marron9 {background: #F4A460; padding: 0 10px;}
.marron9:hover {transform-origin: 100% 50%; transform: scale(1.5); z-index: 10; border-radius: 20%; border: 1px solid; box-shadow: 4px 4px 3px rgba(255,255,255,.5);}
.marron10 {background: #DAA520; padding: 0 10px;} 
.marron10:hover {transform-origin: 0% 50%; transform: scale(1.5); z-index: 10; border-radius: 20%; border: 1px solid; box-shadow: 4px 4px 3px rgba(255,255,255,.5);} 
.marron11 {background: #B8860B; padding: 0 10px;} 
.marron11:hover {transform-origin: 50% 50%; transform: scale(1.5); z-index: 10; border-radius: 20%; border: 1px solid; box-shadow: 4px 4px 3px rgba(255,255,255,.5);}
.marron12 {background: #CD853F; padding: 0 10px;} 
.marron12:hover {transform-origin: 100% 50%; transform: scale(1.5); z-index: 10; border-radius: 20%; border: 1px solid; box-shadow: 4px 4px 3px rgba(255,255,255,.5);}
.marron13 {background: #D2691E; padding: 0 10px; color: white;} 
.marron13:hover {transform-origin: 0% 100%; transform: scale(1.5); z-index: 10; border-radius: 20%; border: 1px solid; box-shadow: 4px 4px 3px rgba(255,255,255,.5);}
.marron14 {background: #8B4513; padding: 0 10px; color: white;} 
.marron14:hover {transform-origin: 50% 100%; transform: scale(1.5); z-index: 10; border-radius: 20%; border: 1px solid; box-shadow: 4px 4px 3px rgba(255,255,255,.5);}
.marron15 {background: #A0522D; padding: 0 10px; color: white;} 
.marron15:hover {transform-origin: 100% 100%; transform: scale(1.5); z-index: 10; border-radius: 20%; border: 1px solid; box-shadow: 4px 4px 3px rgba(255,255,255,.5);}
.marron16 {background: #A52A2A; padding: 0 10px; color: white;} 
.marron16:hover {transform-origin: 0% 100%; transform: scale(1.5); z-index: 10; border-radius: 20%; border: 1px solid; box-shadow: 4px 4px 3px rgba(255,255,255,.5);}
.marron17 {background: #800000; padding: 0 10px; color: white;} 
.marron17:hover {transform-origin: 100% 100%; transform: scale(1.5); z-index: 10; border-radius: 20%; border: 1px solid; box-shadow: 4px 4px 3px rgba(255,255,255,.5);}

/* Estilo para los contenedores de tonos purpuras */

p#control-purpuras {
  background: purple;
  border-radius: 20%;
  transition: background-color 0.75s cubic-bezier(.58,3,0.5,0.5);
}
/* p#control-purpuras.active {} */
.purpura1 {background: #E6E6FA; padding: 0 10px;}
.purpura1:hover {transform-origin: 0% 0%; transform: scale(1.5); z-index: 10; border-radius: 20%; border: 1px solid; box-shadow: 4px 4px 3px rgba(255,255,255,.5);}
.purpura2 {background: #D8BFD8; padding: 0 10px;}
.purpura2:hover {transform-origin: 50% 0%; transform: scale(1.5); z-index: 10; border-radius: 20%; border: 1px solid; box-shadow: 4px 4px 3px rgba(255,255,255,.5);}
.purpura3 {background: #DDA0DD; padding: 0 10px;}
.purpura3:hover {transform-origin: 100% 0%; transform: scale(1.5); z-index: 10; border-radius: 20%; border: 1px solid; box-shadow: 4px 4px 3px rgba(255,255,255,.5);}
.purpura4 {background: #EE82EE; padding: 0 10px;}
.purpura4:hover {transform-origin: 0% 50%; transform: scale(1.5); z-index: 10; border-radius: 20%; border: 1px solid; box-shadow: 4px 4px 3px rgba(255,255,255,.5);}
.purpura5 {background: #DA70D6; padding: 0 10px;}
.purpura5:hover {transform-origin: 50% 50%; transform: scale(1.5); z-index: 10; border-radius: 20%; border: 1px solid; box-shadow: 4px 4px 3px rgba(255,255,255,.5);}
.purpura6 {background: #FF00FF; padding: 0 10px;}
.purpura6:hover {transform-origin: 100% 50%; transform: scale(1.5); z-index: 10; border-radius: 20%; border: 1px solid; box-shadow: 4px 4px 3px rgba(255,255,255,.5);}
.purpura7 {background: #FF00FF; padding: 0 10px; color: white;}
.purpura7:hover {transform-origin: 0% 50%; transform: scale(1.5); z-index: 10; border-radius: 20%; border: 1px solid; box-shadow: 4px 4px 3px rgba(255,255,255,.5);}
.purpura8 {background: #BA55D3; padding: 0 10px; color: white;}
.purpura8:hover {transform-origin: 50% 50%; transform: scale(1.5); z-index: 10; border-radius: 20%; border: 1px solid; box-shadow: 4px 4px 3px rgba(255,255,255,.5);}
.purpura9 {background: #9370DB; padding: 0 10px; color: white;}
.purpura9:hover {transform-origin: 100% 50%; transform: scale(1.5); z-index: 10; border-radius: 20%; border: 1px solid; box-shadow: 4px 4px 3px rgba(255,255,255,.5);}
.purpura10 {background: #9966CC; padding: 0 10px; color: white;} 
.purpura10:hover {transform-origin: 0% 50%; transform: scale(1.5); z-index: 10; border-radius: 20%; border: 1px solid; box-shadow: 4px 4px 3px rgba(255,255,255,.5);} 
.purpura11 {background: #8A2BE2; padding: 0 10px; color: white;} 
.purpura11:hover {transform-origin: 50% 50%; transform: scale(1.5); z-index: 10; border-radius: 20%; border: 1px solid; box-shadow: 4px 4px 3px rgba(255,255,255,.5);}
.purpura12 {background: #9400D3; padding: 0 10px; color: white;} 
.purpura12:hover {transform-origin: 100% 50%; transform: scale(1.5); z-index: 10; border-radius: 20%; border: 1px solid; box-shadow: 4px 4px 3px rgba(255,255,255,.5);}
.purpura13 {background: #9932CC; padding: 0 10px; color: white;} 
.purpura13:hover {transform-origin: 0% 50%; transform: scale(1.5); z-index: 10; border-radius: 20%; border: 1px solid; box-shadow: 4px 4px 3px rgba(255,255,255,.5);}
.purpura14 {background: #8B008B; padding: 0 10px; color: white;} 
.purpura14:hover {transform-origin: 50% 50%; transform: scale(1.5); z-index: 10; border-radius: 20%; border: 1px solid; box-shadow: 4px 4px 3px rgba(255,255,255,.5);}
.purpura15 {background: #800080; padding: 0 10px; color: white;} 
.purpura15:hover {transform-origin: 100% 50%; transform: scale(1.5); z-index: 10; border-radius: 20%; border: 1px solid; box-shadow: 4px 4px 3px rgba(255,255,255,.5);}
.purpura16 {background: #4B0082; padding: 0 10px; color: white;} 
.purpura16:hover {transform-origin: 0% 100%; transform: scale(1.5); z-index: 10; border-radius: 20%; border: 1px solid; box-shadow: 4px 4px 3px rgba(255,255,255,.5);}
.purpura17 {background: #6A5ACD; padding: 0 10px; color: white;} 
.purpura17:hover {transform-origin: 50% 100%; transform: scale(1.5); z-index: 10; border-radius: 20%; border: 1px solid; box-shadow: 4px 4px 3px rgba(255,255,255,.5);}
.purpura18 {background: #7B68EE; padding: 0 10px; color: white;} 
.purpura18:hover {transform-origin: 100% 100%; transform: scale(1.5); z-index: 10; border-radius: 20%; border: 1px solid; box-shadow: 4px 4px 3px rgba(255,255,255,.5);}
.purpura19 {background: #483D8B; padding: 0 10px; color: white;} 
.purpura19:hover {transform-origin: 50% 100%; transform: scale(1.5); z-index: 10; border-radius: 20%; border: 1px solid; box-shadow: 4px 4px 3px rgba(255,255,255,.5);}

/* Estilo para los contenedores de tonos azules */

p#control-azules {
  background: blue;
  border-radius: 20%;
  transition: background-color 0.75s cubic-bezier(.58,3,0.5,0.5);
}
/* p#control-azules.active {} */
.azul1 {background: #00FFFF; padding: 0 10px;}
.azul1:hover {transform-origin: 0% 0%; transform: scale(1.5); z-index: 10; border-radius: 20%; border: 1px solid; box-shadow: 4px 4px 3px rgba(255,255,255,.5);}
.azul2 {background: #00FFFF; padding: 0 10px;}
.azul2:hover {transform-origin: 50% 0%; transform: scale(1.5); z-index: 10; border-radius: 20%; border: 1px solid; box-shadow: 4px 4px 3px rgba(255,255,255,.5);}
.azul3 {background: #E0FFFF; padding: 0 10px;}
.azul3:hover {transform-origin: 100% 0%; transform: scale(1.5); z-index: 10; border-radius: 20%; border: 1px solid; box-shadow: 4px 4px 3px rgba(255,255,255,.5);}
.azul4 {background: #AFEEEE; padding: 0 10px;}
.azul4:hover {transform-origin: 0% 50%; transform: scale(1.5); z-index: 10; border-radius: 20%; border: 1px solid; box-shadow: 4px 4px 3px rgba(255,255,255,.5);}
.azul5 {background: #7FFFD4; padding: 0 10px;}
.azul5:hover {transform-origin: 50% 50%; transform: scale(1.5); z-index: 10; border-radius: 20%; border: 1px solid; box-shadow: 4px 4px 3px rgba(255,255,255,.5);}
.azul6 {background: #40E0D0; padding: 0 10px;}
.azul6:hover {transform-origin: 100% 50%; transform: scale(1.5); z-index: 10; border-radius: 20%; border: 1px solid; box-shadow: 4px 4px 3px rgba(255,255,255,.5);}
.azul7 {background: #48D1CC; padding: 0 10px;}
.azul7:hover {transform-origin: 0% 50%; transform: scale(1.5); z-index: 10; border-radius: 20%; border: 1px solid; box-shadow: 4px 4px 3px rgba(255,255,255,.5);}
.azul8 {background: #00CED1; padding: 0 10px;}
.azul8:hover {transform-origin: 50% 50%; transform: scale(1.5); z-index: 10; border-radius: 20%; border: 1px solid; box-shadow: 4px 4px 3px rgba(255,255,255,.5);}
.azul9 {background: #5F9EA0; padding: 0 10px;}
.azul9:hover {transform-origin: 100% 50%; transform: scale(1.5); z-index: 10; border-radius: 20%; border: 1px solid; box-shadow: 4px 4px 3px rgba(255,255,255,.5);}
.azul10 {background: #4682B4;padding: 0 10px;} 
.azul10:hover {transform-origin: 0% 50%; transform: scale(1.5); z-index: 10; border-radius: 20%; border: 1px solid; box-shadow: 4px 4px 3px rgba(255,255,255,.5);} 
.azul11 {background: #B0C4DE; padding: 0 10px;} 
.azul11:hover {transform-origin: 50% 50%; transform: scale(1.5); z-index: 10; border-radius: 20%; border: 1px solid; box-shadow: 4px 4px 3px rgba(255,255,255,.5);}
.azul12 {background: #B0E0E6; padding: 0 10px;} 
.azul12:hover {transform-origin: 100% 50%; transform: scale(1.5); z-index: 10; border-radius: 20%; border: 1px solid; box-shadow: 4px 4px 3px rgba(255,255,255,.5);}
.azul13 {background: #ADD8E6; padding: 0 10px;} 
.azul13:hover {transform-origin: 0% 50%; transform: scale(1.5); z-index: 10; border-radius: 20%; border: 1px solid; box-shadow: 4px 4px 3px rgba(255,255,255,.5);}
.azul14 {background: #87CEEB; padding: 0 10px;} 
.azul14:hover {transform-origin: 50% 50%; transform: scale(1.5); z-index: 10; border-radius: 20%; border: 1px solid; box-shadow: 4px 4px 3px rgba(255,255,255,.5);}
.azul15 {background: #87CEFA; padding: 0 10px;} 
.azul15:hover {transform-origin: 100% 50%; transform: scale(1.5); z-index: 10; border-radius: 20%; border: 1px solid; box-shadow: 4px 4px 3px rgba(255,255,255,.5);}
.azul16 {background: #00BFFF; padding: 0 10px;} 
.azul16:hover {transform-origin: 0% 50%; transform: scale(1.5); z-index: 10; border-radius: 20%; border: 1px solid; box-shadow: 4px 4px 3px rgba(255,255,255,.5);}
.azul17 {background: #1E90FF; padding: 0 10px;} 
.azul17:hover {transform-origin: 50% 50%; transform: scale(1.5); z-index: 10; border-radius: 20%; border: 1px solid; box-shadow: 4px 4px 3px rgba(255,255,255,.5);}
.azul18 {background: #6495ED; padding: 0 10px; color: white;} 
.azul18:hover {transform-origin: 100% 50%; transform: scale(1.5); z-index: 10; border-radius: 20%; border: 1px solid; box-shadow: 4px 4px 3px rgba(255,255,255,.5);}
.azul19 {background: #7B68EE; padding: 0 10px; color: white;} 
.azul19:hover {transform-origin: 0% 50%; transform: scale(1.5); z-index: 10; border-radius: 20%; border: 1px solid; box-shadow: 4px 4px 3px rgba(255,255,255,.5);}
.azul20 {background: #4169E1; padding: 0 10px; color: white;} 
.azul20:hover {transform-origin: 50% 50%; transform: scale(1.5); z-index: 10; border-radius: 20%; border: 1px solid; box-shadow: 4px 4px 3px rgba(255,255,255,.5);}
.azul21 {background: #0000FF; padding: 0 10px; color: white;} 
.azul21:hover {transform-origin: 100% 50%; transform: scale(1.5); z-index: 10; border-radius: 20%; border: 1px solid; box-shadow: 4px 4px 3px rgba(255,255,255,.5);}
.azul22 {background: #0000CD; padding: 0 10px; color: white;} 
.azul22:hover {transform-origin: 0% 100%; transform: scale(1.5); z-index: 10; border-radius: 20%; border: 1px solid; box-shadow: 4px 4px 3px rgba(255,255,255,.5);}
.azul23 {background: #00008B; padding: 0 10px; color: white;} 
.azul23:hover {transform-origin: 50% 100%; transform: scale(1.5); z-index: 10; border-radius: 20%; border: 1px solid; box-shadow: 4px 4px 3px rgba(255,255,255,.5);}
.azul24 {background: #000080; padding: 0 10px; color: white;} 
.azul24:hover {transform-origin: 100% 100%; transform: scale(1.5); z-index: 10; border-radius: 20%; border: 1px solid; box-shadow: 4px 4px 3px rgba(255,255,255,.5);}
.azul25 {background: #191970; padding: 0 10px; color: white;} 
.azul25:hover {transform-origin: 50% 100%; transform: scale(1.5); z-index: 10; border-radius: 20%; border: 1px solid; box-shadow: 4px 4px 3px rgba(255,255,255,.5);}

/* Estilo para los contenedores de tonos verdes */

p#control-verdes {
  background: green;
  border-radius: 20%;
  transition: background-color 0.75s cubic-bezier(.58,3,0.5,0.5);
}
/* p#control-verdes.active {} */
.verde1 {background: #ADFF2F; padding: 0 10px;}
.verde1:hover {transform-origin: 0% 0%; transform: scale(1.5); z-index: 10; border-radius: 20%; border: 1px solid; box-shadow: 4px 4px 3px rgba(255,255,255,.5);}
.verde2 {background: #7FFF00; padding: 0 10px;}
.verde2:hover {transform-origin: 50% 0%; transform: scale(1.5); z-index: 10; border-radius: 20%; border: 1px solid; box-shadow: 4px 4px 3px rgba(255,255,255,.5);}
.verde3 {background: #7CFC00; padding: 0 10px;}
.verde3:hover {transform-origin: 100% 0%; transform: scale(1.5); z-index: 10; border-radius: 20%; border: 1px solid; box-shadow: 4px 4px 3px rgba(255,255,255,.5);}
.verde4 {background: #00FF00; padding: 0 10px;}
.verde4:hover {transform-origin: 0% 50%; transform: scale(1.5); z-index: 10; border-radius: 20%; border: 1px solid; box-shadow: 4px 4px 3px rgba(255,255,255,.5);}
.verde5 {background: #32CD32; padding: 0 10px;}
.verde5:hover {transform-origin: 50% 50%; transform: scale(1.5); z-index: 10; border-radius: 20%; border: 1px solid; box-shadow: 4px 4px 3px rgba(255,255,255,.5);}
.verde6 {background: #98FB98; padding: 0 10px;}
.verde6:hover {transform-origin: 100% 50%; transform: scale(1.5); z-index: 10; border-radius: 20%; border: 1px solid; box-shadow: 4px 4px 3px rgba(255,255,255,.5);}
.verde7 {background: #90EE90; padding: 0 10px;}
.verde7:hover {transform-origin: 0% 50%; transform: scale(1.5); z-index: 10; border-radius: 20%; border: 1px solid; box-shadow: 4px 4px 3px rgba(255,255,255,.5);}
.verde8 {background: #00FA9A; padding: 0 10px;}
.verde8:hover {transform-origin: 50% 50%; transform: scale(1.5); z-index: 10; border-radius: 20%; border: 1px solid; box-shadow: 4px 4px 3px rgba(255,255,255,.5);}
.verde9 {background: #00FF7F; padding: 0 10px;}
.verde9:hover {transform-origin: 100% 50%; transform: scale(1.5); z-index: 10; border-radius: 20%; border: 1px solid; box-shadow: 4px 4px 3px rgba(255,255,255,.5);}
.verde10 {background: #3CB371; padding: 0 10px; color: white;} 
.verde10:hover {transform-origin: 0% 50%; transform: scale(1.5); z-index: 10; border-radius: 20%; border: 1px solid; box-shadow: 4px 4px 3px rgba(255,255,255,.5);} 
.verde11 {background: #2E8B57; padding: 0 10px; color: white;} 
.verde11:hover {transform-origin: 50% 50%; transform: scale(1.5); z-index: 10; border-radius: 20%; border: 1px solid; box-shadow: 4px 4px 3px rgba(255,255,255,.5);}
.verde12 {background: #228B22; padding: 0 10px; color: white;} 
.verde12:hover {transform-origin: 100% 50%; transform: scale(1.5); z-index: 10; border-radius: 20%; border: 1px solid; box-shadow: 4px 4px 3px rgba(255,255,255,.5);}
.verde13 {background: #008000; padding: 0 10px; color: white;} 
.verde13:hover {transform-origin: 0% 50%; transform: scale(1.5); z-index: 10; border-radius: 20%; border: 1px solid; box-shadow: 4px 4px 3px rgba(255,255,255,.5);}
.verde14 {background: #006400; padding: 0 10px; color: white;} 
.verde14:hover {transform-origin: 50% 50%; transform: scale(1.5); z-index: 10; border-radius: 20%; border: 1px solid; box-shadow: 4px 4px 3px rgba(255,255,255,.5);}
.verde15 {background: #9ACD32; padding: 0 10px; color: white;} 
.verde15:hover {transform-origin: 100% 50%; transform: scale(1.5); z-index: 10; border-radius: 20%; border: 1px solid; box-shadow: 4px 4px 3px rgba(255,255,255,.5);}
.verde16 {background: #6B8E23; padding: 0 10px; color: white;} 
.verde16:hover {transform-origin: 0% 50%; transform: scale(1.5); z-index: 10; border-radius: 20%; border: 1px solid; box-shadow: 4px 4px 3px rgba(255,255,255,.5);}
.verde17 {background: #808000; padding: 0 10px; color: white;} 
.verde17:hover {transform-origin: 50% 50%; transform: scale(1.5); z-index: 10; border-radius: 20%; border: 1px solid; box-shadow: 4px 4px 3px rgba(255,255,255,.5);}
.verde18 {background: #556B2F; padding: 0 10px; color: white;} 
.verde18:hover {transform-origin: 100% 50%; transform: scale(1.5); z-index: 10; border-radius: 20%; border: 1px solid; box-shadow: 4px 4px 3px rgba(255,255,255,.5);}
.verde19 {background: #66CDAA; padding: 0 10px;} 
.verde19:hover {transform-origin: 0% 100%; transform: scale(1.5); z-index: 10; border-radius: 20%; border: 1px solid; box-shadow: 4px 4px 3px rgba(255,255,255,.5);}
.verde20 {background: #8FBC8F; padding: 0 10px;} 
.verde20:hover {transform-origin: 50% 100%; transform: scale(1.5); z-index: 10; border-radius: 20%; border: 1px solid; box-shadow: 4px 4px 3px rgba(255,255,255,.5);}
.verde21 {background: #20B2AA; padding: 0 10px;} 
.verde21:hover {transform-origin: 100% 100%; transform: scale(1.5); z-index: 10; border-radius: 20%; border: 1px solid; box-shadow: 4px 4px 3px rgba(255,255,255,.5);}
.verde22 {background: #008B8B; padding: 0 10px; color: white;} 
.verde22:hover {transform-origin: 0% 100%; transform: scale(1.5); z-index: 10; border-radius: 20%; border: 1px solid; box-shadow: 4px 4px 3px rgba(255,255,255,.5);}
.verde23 {background: #008080; padding: 0 10px; color: white;} 
.verde23:hover {transform-origin: 100% 100%; transform: scale(1.5); z-index: 10; border-radius: 20%; border: 1px solid; box-shadow: 4px 4px 3px rgba(255,255,255,.5);}

/* Estilo cuando los input estan checked */

#menu_colores input[class*="01"]:checked ~ #grid_colores .menu01 + div > div > div,
#menu_colores input[class*="02"]:checked ~ #grid_colores .menu02 + div > div > div,
#menu_colores input[class*="03"]:checked ~ #grid_colores .menu03 + div > div > div,
#menu_colores input[class*="04"]:checked ~ #grid_colores .menu04 + div > div > div,
#menu_colores input[class*="05"]:checked ~ #grid_colores .menu05 + div > div > div,
#menu_colores input[class*="06"]:checked ~ #grid_colores .menu06 + div > div > div,
#menu_colores input[class*="07"]:checked ~ #grid_colores .menu07 + div > div > div,
#menu_colores input[class*="08"]:checked ~ #grid_colores .menu08 + div > div > div,
#menu_colores input[class*="09"]:checked ~ #grid_colores .menu09 + div > div > div,
#menu_colores input[class*="10"]:checked ~ #grid_colores .menu10 + div > div > div { 
  max-width: 80%;
  height: 100%;
  overflow: visible;
  transition: height 0.75s cubic-bezier(.58,3,0.5,0.5), 
              transform 0.75s cubic-bezier(.58,3,0.5,0.5),
              border-radius 0.75s cubic-bezier(.58,3,0.5,0.5);
}

#menu_colores input[class*="01"]:checked ~ #grid_colores .menu01,
#menu_colores input[class*="02"]:checked ~ #grid_colores .menu02,
#menu_colores input[class*="03"]:checked ~ #grid_colores .menu03,
#menu_colores input[class*="04"]:checked ~ #grid_colores .menu04,
#menu_colores input[class*="05"]:checked ~ #grid_colores .menu05,
#menu_colores input[class*="06"]:checked ~ #grid_colores .menu06,
#menu_colores input[class*="07"]:checked ~ #grid_colores .menu07,
#menu_colores input[class*="08"]:checked ~ #grid_colores .menu08,
#menu_colores input[class*="09"]:checked ~ #grid_colores .menu09,
#menu_colores input[class*="10"]:checked ~ #grid_colores .menu10 {
  background:rgba(0,0,0,0.05); 
  transition: background-color 0.75s cubic-bezier(.58,3,0.5,0.5);
}

#menu_colores input[class*="01"]:checked ~ #grid_colores .menu01:hover,
#menu_colores input[class*="02"]:checked ~ #grid_colores .menu02:hover,
#menu_colores input[class*="03"]:checked ~ #grid_colores .menu03:hover,
#menu_colores input[class*="04"]:checked ~ #grid_colores .menu04:hover,
#menu_colores input[class*="05"]:checked ~ #grid_colores .menu05:hover,
#menu_colores input[class*="06"]:checked ~ #grid_colores .menu06:hover,
#menu_colores input[class*="07"]:checked ~ #grid_colores .menu07:hover,
#menu_colores input[class*="08"]:checked ~ #grid_colores .menu08:hover,
#menu_colores input[class*="09"]:checked ~ #grid_colores .menu09:hover, 
#menu_colores input[class*="10"]:checked ~ #grid_colores .menu10:hover {
  background:rgba(0,0,0,0.1);
}

#menu_colores #menu01:checked ~ #grid_colores .menu01 label:last-child,
#menu_colores #menu02:checked ~ #grid_colores .menu02 label:last-child,
#menu_colores #menu03:checked ~ #grid_colores .menu03 label:last-child,
#menu_colores #menu04:checked ~ #grid_colores .menu04 label:last-child,
#menu_colores #menu05:checked ~ #grid_colores .menu05 label:last-child,
#menu_colores #menu06:checked ~ #grid_colores .menu06 label:last-child,
#menu_colores #menu07:checked ~ #grid_colores .menu07 label:last-child,
#menu_colores #menu08:checked ~ #grid_colores .menu08 label:last-child,
#menu_colores #menu09:checked ~ #grid_colores .menu09 label:last-child,
#menu_colores #menu10:checked ~ #grid_colores .menu10 label:last-child {
  display:block;
}

#menu_colores #menu01:checked ~ #grid_colores .menu01 label:first-child,
#menu_colores #menu02:checked ~ #grid_colores .menu02 label:first-child,
#menu_colores #menu03:checked ~ #grid_colores .menu03 label:first-child,
#menu_colores #menu04:checked ~ #grid_colores .menu04 label:first-child,
#menu_colores #menu05:checked ~ #grid_colores .menu05 label:first-child,
#menu_colores #menu06:checked ~ #grid_colores .menu06 label:first-child,
#menu_colores #menu07:checked ~ #grid_colores .menu07 label:first-child,
#menu_colores #menu08:checked ~ #grid_colores .menu08 label:first-child,
#menu_colores #menu09:checked ~ #grid_colores .menu09 label:first-child,
#menu_colores #menu10:checked ~ #grid_colores .menu10 label:first-child {
  animation: font 2s cubic-bezier(.58,3,0.5,0.5) infinite alternate;
}
@keyframes font {
  from {font-size: var(--font-size-sm); letter-spacing: normal; border: none; border-radius: 0%;}
   to {font-size: cal(var(--font-size-sm) * 0.8); letter-spacing: 0.1em; border: 1px solid rgba(255,255,255,.2); border-radius: 30%;}
}

/* ESTILOS PARA LA PAGINA SVG */


.global {
  position:relative; 
  top: 0;
  width: 100%;
  max-width: 1200px;
  margin: 50px auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(400px, 1fr));
}
.contenedor_comentario, .contenedor_comentario1 {position: relative; height: 300px; top: 0; cursor: pointer;}
.contenedor_comentario {
  border: 2px solid yellow;
  background-color: rgba(0, 0, 0, .5);
}
.contenedor_comentario1 {border: 2px solid red;}
.contenedor_comentario svg,
.contenedor_comentario1 svg {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}
.contenedor_comentario svg path {
  fill: transparent;
  stroke-width: 1.76486;
  stroke: #ffffff;
  stroke-dasharray: 512.4771728515625;
  stroke-dashoffset: 512.4771728515625;
  transition: stroke-dashoffset 0.5s cubic-bezier(0.29, 0.68, 0.74, 1.02);
}
.contenedor_comentario:hover svg path {stroke-dashoffset: 0;}
.contenedor_comentario svg text tspan {
  font-style: normal;
  font-variant: normal;
  font-weight: 300;
  font-stretch: normal;
  font-size: calc(var(--font-size-sm) * 0.6);
  line-height: 1.6;
  font-family: Calibri;
  letter-spacing: 0.2px;
  fill: transparent; 
  stroke: #ffffff;
  stroke-width: 0.6;
  stroke-opacity: 1;
}
.contenedor_comentario svg #tspan {
 /* opacity:;
  transition: all 0.5s cubic-bezier(0.29, 0.68, 0.74, 1.02) 0.5s; */
  stroke-dasharray:146.9105682373047;
  stroke-dashoffset:146.9105682373047;
  transition: stroke-dashoffset 0.5s cubic-bezier(0.29, 0.68, 0.74, 1.02) 0.5s;
}
.contenedor_comentario:hover svg #tspan {stroke-dashoffset: 0;/*transition: all 0.5s cubic-bezier(0.29, 0.68, 0.74, 1.02) 0.5s; opacity:1;*/}
.contenedor_comentario svg #tspan1 {
  opacity: 0;
  transition: all 0.5s cubic-bezier(0.29, 0.68, 0.74, 1.02) 0.7s;
}
.contenedor_comentario:hover svg #tspan1 {transition: all 0.5s cubic-bezier(0.29, 0.68, 0.74, 1.02) 0.7s; opacity:1;}
.contenedor_comentario svg #tspan2 {
  opacity: 0;
  transition: all 0.5s cubic-bezier(0.29, 0.68, 0.74, 1.02) 0.9s;
}
.contenedor_comentario:hover svg #tspan2 {transition: all 0.5s cubic-bezier(0.29, 0.68, 0.74, 1.02) 0.9s; opacity:1;}
.contenedor_comentario svg #tspan3 {
  opacity: 0;
  transition: all 0.5s cubic-bezier(0.29, 0.68, 0.74, 1.02) 1.1s;
}
.contenedor_comentario:hover svg #tspan3 {transition: all 0.5s cubic-bezier(0.29, 0.68, 0.74, 1.02) 1.1s; opacity:1;}
.contenedor_comentario svg #tspan4 {
  opacity: 0;
  transition: all 0.5s cubic-bezier(0.29, 0.68, 0.74, 1.02) 1.3s;
}
.contenedor_comentario:hover svg #tspan4 {transition: all 0.5s cubic-bezier(0.29, 0.68, 0.74, 1.02) 1.3s; opacity:1;}

/* Estilo para el globo escrito a mano */

.contenedor_comentario1:hover svg path {stroke-dashoffset: 0;}

.contenedor_comentario1 svg path:nth-child(1) {
  fill: transparent;
  stroke-width:3.865;
  stroke:#808080;
  stroke-opacity:0.69999999;
  stroke-dasharray: 462.9443359375;
  stroke-dashoffset: -462.9443359375;
  transition: stroke-dashoffset 0.5s cubic-bezier(0.29, 0.68, 0.74, 1.02) 0.5s;
}

.contenedor_comentario1:hover svg path:nth-child(1) {stroke-dashoffset: 0;}

/*.contenedor1 svg path:nth-child(1) {
  fill: transparent;
  stroke-width:1.76486;
  stroke:#000000;
  stroke-dasharray: 512.4771728515625;
  stroke-dashoffset: 512.4771728515625;
  transition: stroke-dashoffset 0.5s cubic-bezier(0.29, 0.68, 0.74, 1.02);
} */
.contenedor_comentario1 svg path:nth-child(2) {
  fill:none;
  stroke:#000000;
  stroke-width:3;
  stroke-dasharray:42.71043395996094;
  stroke-dashoffset:-42.71043395996094;
  stroke-opacity:0.7;
  transition: stroke-dashoffset 0.5s cubic-bezier(0.29, 0.68, 0.74, 1.02) 0.5s;
}
.contenedor_comentario1:hover svg path:nth-child(2) {stroke-dashoffset: 0;}
.contenedor_comentario1 svg path:nth-child(3) {
  fill:none;
  stroke:#000000;
  stroke-width:3;
  stroke-dasharray:7.482516288757324;
  stroke-dashoffset:-7.482516288757324;
  stroke-opacity:0.7;
  transition: stroke-dashoffset 0.2s cubic-bezier(0.29, 0.68, 0.74, 1.02) 1s;
}
.contenedor_comentario1:hover svg path:nth-child(3) {stroke-dashoffset: 0;}
.contenedor_comentario1 svg path:nth-child(4) {
  fill:none;
  stroke:#000000;
  stroke-width:3;
  stroke-dasharray:54.83811569213867;
  stroke-dashoffset:-54.83811569213867;
  stroke-opacity:0.7;
  transition: stroke-dashoffset 0.3s cubic-bezier(0.29, 0.68, 0.74, 1.02) 1.2s;
}
.contenedor_comentario1:hover svg path:nth-child(4) {stroke-dashoffset: 0;}
.contenedor_comentario1 svg path:nth-child(5) {
  fill:none;
  stroke:#000000;
  stroke-width:3;
  stroke-dasharray:26.3276309967041;
  stroke-dashoffset:-26.3276309967041;
  stroke-opacity:0.7;
  transition: stroke-dashoffset 0.3s cubic-bezier(0.29, 0.68, 0.74, 1.02) 1.4s;
}
.contenedor_comentario1:hover svg path:nth-child(5) {stroke-dashoffset: 0;}
.contenedor_comentario1 svg path:nth-child(6) {
  fill:none;
  stroke:#000000;
  stroke-width:3;
  stroke-dasharray:19.7945556640625;
  stroke-dashoffset:-19.7945556640625;
  stroke-opacity:0.7;
  transition: stroke-dashoffset 0.3s cubic-bezier(0.29, 0.68, 0.74, 1.02) 1.6s;
}
.contenedor_comentario1:hover svg path:nth-child(6) {stroke-dashoffset: 0;}
.contenedor_comentario1 svg path:nth-child(7) {
  fill:none;
  stroke:#000000;
  stroke-width:3;
  stroke-dasharray:9.290578842163086;
  stroke-dashoffset:-9.290578842163086;
  stroke-opacity:0.7;
  transition: stroke-dashoffset 0.3s cubic-bezier(0.29, 0.68, 0.74, 1.02) 1.8s;
}
.contenedor_comentario1:hover svg path:nth-child(7) {stroke-dashoffset: 0;}
.contenedor_comentario1 svg path:nth-child(8) {
  fill:none;
  stroke:#000000;
  stroke-width:3;
  stroke-dasharray:26.3276309967041;
  stroke-dashoffset:-26.3276309967041;
  stroke-opacity:0.7;
  transition: stroke-dashoffset 0.3s cubic-bezier(0.29, 0.68, 0.74, 1.02) 2s;
}
.contenedor_comentario1:hover svg path:nth-child(8) {stroke-dashoffset: 0;}
.contenedor_comentario1 svg path:nth-child(9) {
  fill:none;
  stroke:#000000;
  stroke-width:3;
  stroke-dasharray:5.363605976104736;
  stroke-dashoffset:-5.363605976104736;
  stroke-opacity:0.7;
  transition: stroke-dashoffset 0.3s cubic-bezier(0.29, 0.68, 0.74, 1.02) 2.2s;
}
.contenedor_comentario1:hover svg path:nth-child(9) {stroke-dashoffset: 0;}
.contenedor_comentario1 svg path:nth-child(10) {
  fill:none;
  stroke:#000000;
  stroke-width:3;
  stroke-dasharray:8.008880615234375;
  stroke-dashoffset:-8.008880615234375;
  stroke-opacity:0.7;
  transition: stroke-dashoffset 0.3s cubic-bezier(0.29, 0.68, 0.74, 1.02) 2.4s;
}
.contenedor_comentario1:hover svg path:nth-child(10) {stroke-dashoffset: 0;}
.contenedor_comentario1 svg path:nth-child(11) {
  fill:none;
  stroke:#000000;
  stroke-width:3;
  stroke-dasharray:10.849775314331055;
  stroke-dashoffset:-10.849775314331055;
  stroke-opacity:0.7;
  transition: stroke-dashoffset 0.3s cubic-bezier(0.29, 0.68, 0.74, 1.02) 2.6s;
}
.contenedor_comentario1:hover svg path:nth-child(11) {stroke-dashoffset: 0;}
.contenedor_comentario1 svg path:nth-child(12) {
  fill:none;
  stroke:#000000;
  stroke-width:3;
  stroke-dasharray:17.340347290039062;
  stroke-dashoffset:-17.340347290039062;
  stroke-opacity:0.7;
  transition: stroke-dashoffset 0.3s cubic-bezier(0.29, 0.68, 0.74, 1.02) 2.8s;
}
.contenedor_comentario1:hover svg path:nth-child(12) {stroke-dashoffset: 0;}
.contenedor_comentario1 svg path:nth-child(13) {
  fill:none;
  stroke:#000000;
  stroke-width:3;
  stroke-dasharray:15.607185363769531;
  stroke-dashoffset:-15.607185363769531;
  stroke-opacity:0.7;
  transition: stroke-dashoffset 0.3s cubic-bezier(0.29, 0.68, 0.74, 1.02) 3s;
}
.contenedor_comentario1:hover svg path:nth-child(13) {stroke-dashoffset: 0;}
.contenedor_comentario1 svg path:nth-child(14) {
  fill:none;
  stroke:#000000;
  stroke-width:3;
  stroke-dasharray:11.568814277648926;
  stroke-dashoffset:-11.568814277648926;
  stroke-opacity:0.7;
  transition: stroke-dashoffset 0.3s cubic-bezier(0.29, 0.68, 0.74, 1.02) 3.2s;
}
.contenedor_comentario1:hover svg path:nth-child(14) {stroke-dashoffset: 0;}
.contenedor_comentario1 svg path:nth-child(15) {
  fill:none;
  stroke:#000000;
  stroke-width:3;
  stroke-dasharray:22.691448211669922;
  stroke-dashoffset:-22.691448211669922;
  stroke-opacity:0.7;
  transition: stroke-dashoffset 0.3s cubic-bezier(0.29, 0.68, 0.74, 1.02) 3.4s;
}
.contenedor_comentario1:hover svg path:nth-child(15) {stroke-dashoffset: 0;}
.contenedor_comentario1 svg path:nth-child(16) {
  fill:none;
  stroke:#000000;
  stroke-width:3;
  stroke-dasharray:13.86351203918457;
  stroke-dashoffset:-13.86351203918457;
  stroke-opacity:0.7;
  transition: stroke-dashoffset 0.3s cubic-bezier(0.29, 0.68, 0.74, 1.02) 3.6s;
}
.contenedor_comentario1:hover svg path:nth-child(16) {stroke-dashoffset: 0;}
.contenedor_comentario1 svg path:nth-child(17) {
  fill:none;
  stroke:#000000;
  stroke-width:3;
  stroke-dasharray:3.11456298828125;
  stroke-dashoffset:-3.11456298828125;
  stroke-opacity:0.7;
  transition: stroke-dashoffset 0.3s cubic-bezier(0.29, 0.68, 0.74, 1.02) 3.8s;
}
.contenedor_comentario1:hover svg path:nth-child(17) {stroke-dashoffset: 0;}
.contenedor_comentario1 svg path:nth-child(18) {
  fill:none;
  stroke:#000000;
  stroke-width:3;
  stroke-dasharray:18.05862045288086;
  stroke-dashoffset:-18.05862045288086;
  stroke-opacity:0.7;
  transition: stroke-dashoffset 0.3s cubic-bezier(0.29, 0.68, 0.74, 1.02) 4s;
}
.contenedor_comentario1:hover svg path:nth-child(18) {stroke-dashoffset: 0;}
.contenedor_comentario1 svg path:nth-child(19) {
  fill:none;
  stroke:#000000;
  stroke-width:3;
  stroke-dasharray:2.66961669921875;
  stroke-dashoffset:-2.66961669921875;
  stroke-opacity:0.7;
  transition: stroke-dashoffset 0.3s cubic-bezier(0.29, 0.68, 0.74, 1.02) 4.2s;
}
.contenedor_comentario1:hover svg path:nth-child(19) {stroke-dashoffset: 0;}
.contenedor_comentario1 svg path:nth-child(20) {
  fill:none;
  stroke:#000000;
  stroke-width:3;
  stroke-dasharray:6.852423667907715;
  stroke-dashoffset:-6.852423667907715;
  stroke-opacity:0.7;
  transition: stroke-dashoffset 0.3s cubic-bezier(0.29, 0.68, 0.74, 1.02) 4.4s;
}
.contenedor_comentario1:hover svg path:nth-child(20) {stroke-dashoffset: 0;}
.contenedor_comentario1 svg path:nth-child(21) {
  fill:none;
  stroke:#000000;
  stroke-width:3;
  stroke-dasharray:23.47412872314453;
  stroke-dashoffset:-23.47412872314453;
  stroke-opacity:0.7;
  transition: stroke-dashoffset 0.3s cubic-bezier(0.29, 0.68, 0.74, 1.02) 4.6s;
}
.contenedor_comentario1:hover svg path:nth-child(21) {stroke-dashoffset: 0;}
.contenedor_comentario1 svg path:nth-child(22) {
  fill:none;
  stroke:#000000;
  stroke-width:3;
  stroke-dasharray:11.578667640686035;
  stroke-dashoffset:-11.578667640686035;
  stroke-opacity:0.7;
  transition: stroke-dashoffset 0.3s cubic-bezier(0.29, 0.68, 0.74, 1.02) 4.8s;
}
.contenedor_comentario1:hover svg path:nth-child(22) {stroke-dashoffset: 0;}
.contenedor_comentario1 svg path:nth-child(23) {
  fill:none;
  stroke:#000000;
  stroke-width:3;
  stroke-dasharray:34.875545501708984;
  stroke-dashoffset:-34.875545501708984;
  stroke-opacity:0.7;
  transition: stroke-dashoffset 0.3s cubic-bezier(0.29, 0.68, 0.74, 1.02) 5s;
}
.contenedor_comentario1:hover svg path:nth-child(23) {stroke-dashoffset: 0;}
.contenedor_comentario1 svg path:nth-child(24) {
  fill:none;
  stroke:#000000;
  stroke-width:3;
  stroke-dasharray:38.20117950439453;
  stroke-dashoffset:-38.20117950439453;
  stroke-opacity:0.7;
  transition: stroke-dashoffset 0.3s cubic-bezier(0.29, 0.68, 0.74, 1.02) 5.2s;
}
.contenedor_comentario1:hover svg path:nth-child(24) {stroke-dashoffset: 0;}
.contenedor_comentario1 svg path:nth-child(25) {
  fill:none;
  stroke:#ff0000;
  stroke-width:4;
  stroke-dasharray:81.43204498291016;
  stroke-dashoffset:-81.43204498291016;
  stroke-opacity:1;
  transition: stroke-dashoffset 0.3s cubic-bezier(0.29, 0.68, 0.74, 1.02) 5.5s;
}
.contenedor_comentario1:hover svg path:nth-child(25) {stroke-dashoffset: 0;}
.contenedor_comentario1 svg path:nth-child(26) {
  fill:none;
  stroke:#00ff00;
  stroke-width:4;
  stroke-dasharray:59.111385345458984;
  stroke-dashoffset:-59.111385345458984;
  stroke-opacity:1;
  transition: stroke-dashoffset 0.3s cubic-bezier(0.29, 0.68, 0.74, 1.02) 5.8s;
}
.contenedor_comentario1:hover svg path:nth-child(26) {stroke-dashoffset: 0;}
.contenedor_comentario1 svg path:nth-child(27) {
  fill:none;
  stroke:#0000ff;
  stroke-width:4;
  stroke-dasharray:81.21878051757812;
  stroke-dashoffset:-81.21878051757812;
  stroke-opacity:1;
  transition: stroke-dashoffset 0.3s cubic-bezier(0.29, 0.68, 0.74, 1.02) 6.1s;
}
.contenedor_comentario1:hover svg path:nth-child(27) {stroke-dashoffset: 0;}
p, legend {margin: 1em;}
em {font-style: normal;}

/* Estilos para el contenedor con la imágen svg que puedes mover */

.contenedor3 {
  width: 100%;
  max-width: 90%;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(400px, 1fr));
  gap: 20px;
}

.cont-svg {display: flex; flex-direction: column; justify-content: center;}

.contenedor3 svg {border: 1px solid black;}

.contenedor3 pre {
  width: 100%;
  max-width: 400px;
  font-size: calc(var(--font-size-sm) * 0.8);
  background: black;
  color: white;
  padding: 0.8em;
  margin-block: 0.5em;
  text-align: center;
}
.contenedor3 form {
  margin: 2em 0;
  width: 100%;
  max-width: 100%;
  display: flex;
  align-items: center;
  gap: 40px;
}

.contenedor3 form fieldset {
  margin: 1.2em 0;
  border: 1px solid #d4d4d4;
  background-color: white;
}

.contenedor3 form fieldset legend {
  font-size: calc(var(--font-size-sm) * 0.8);
  padding: 0 1em;
  text-align: center;
  white-space: nowrap;
}

.contenedor3 form div {
  width: 100%;
  max-width: 70%;
  margin: 20px 0px;
  display: grid;
  grid-template-columns: repeat(6, minmax(max-content, 1fr));
}

.contenedor3 form fieldset:nth-child(2) > div {
  width: auto;
  font-size: calc(var(--font-size-sm) * 0.8);
  display: grid;
  grid-template-columns: repeat(3, minmax(max-content, 1fr));
}

.contenedor3 form label {
  font-size: calc(var(--font-size-sm) * 0.8);
  display: inline-block;
  line-height: 1.5;
  text-align: center;
}

form input {cursor: pointer;}

[type='range'] {width: 74%; margin-left: 10px;}
[type='radio']:disabled {opacity: .2;}
[type='radio']:disabled + label {color: #d9d9d9;}

form span {
  font-size: calc(var(--font-size-sm) * 0.8); 
  display: inline-block;
}

/* Estilo dentro de los ul */

.usos pre {
  width: 100%;
  max-width: 500px;
  font-size: calc(var(--font-size-sm) * 0.8);
  background: black;
  color: white;
  padding: 0.8em;
  margin-block: 0.5em;
  text-align: left;
}

@media screen and (max-width: 1280px) {
  .contenedor3 form {gap: 5px;}
}

@media screen and (max-width: 1150px) {
  body{font-size: 80%;}
  .contenedor3 form {
    flex-direction: column;
    gap: 0;
    justify-content: flex-start;
    align-items: flex-start;
  }
  .contenedor3 form fieldset {margin: 0 !important; width: 100%; max-width: 50%;}
}
/*  .contenedor3 {gap: 0;}
  .contenedor3 form label {font-size: calc(var(--font-size-sm) * 0.8) !important;}
  .contenedor3 form legend {font-size: calc(var(--font-size-sm) * 0.8) !important;}
  .contenedor3 form p {font-size: calc(var(--font-size-sm) * 0.8) !important;}
  .contenedor3 form span {font-size: calc(var(--font-size-sm) * 0.8) !important;}
  .cont-svg pre {font-size: calc(var(--font-size-sm) * 0.7) !important;}
} */

@media screen and (max-width: 900px) {
  .cont-svg pre {align-self: flex-start;}
  .contenedor3 form {margin: 1em 0 !important;}
}

@media screen and (max-width: 800px) {
  .global {grid-template-columns: repeat(1, minmax(400px, 1fr));}
}

@media screen and (max-width: 760px) {
  .contenedor3 {grid-template-columns: repeat(1, minmax(400px, 1fr)); gap: 0;}
  .contenedor3 form {
    flex-direction: row;
    gap: 5px;
    justify-content: flex-start;
    align-items: center;
  }
}

@media screen and (max-width: 600px) {
  .contenedor3 form div {margin: 0 !important;}
  .contenedor3 form fieldset legend {padding: 0 !important;}
}

@media screen and (max-width: 520px) {
  .contenedor3 form {
    flex-direction: column;
    gap: 5px;
    justify-content: flex-start;
    align-items: center;
  }
}

@media screen and (max-width: 520px) {
  .global {transform: translateX(-30px);}
  .contenedor3 {transform: translateX(-30px);}
  .contenedor3 form {align-items: flex-start;}
}

/* ESTILOS MEDIA QUERYS */

@media screen and (min-width: 1200px) {
/*  #contenido{max-width: 90%;}
  #contenido p {font-size: calc(var(--font-size-base) * 1.1);}
  #contenido code.enlace {font-size: calc(var(--font-size-base) * 1.1);} */
  #colores_gradient {transition: .3s; max-width: 100%;}
}

@media screen and (max-width: 1199px) {
/*  #contenido{max-width: 95%;}
  #contenido p {font-size: var(--font-size-base);}
  #contenido code.enlace {font-size: var(--font-size-base);} */
  #contenido-display #contenedor1 label code.enlace, 
  #contenido-display #contenedor2 label code.enlace {font-size: calc(var(--font-size-base) * 0.8) !important;}
  #colores_animados {max-width: 100%;}
  #fuentes select {max-width: 100%; margin: 0 !important;}
  #colores_gradient div {transition: .3s; max-width: 180px; height: 180px;}
}
 
@media screen and (max-width: 1040px) {
/*  #contenido{max-width: 100%; padding-left: 20px;} */
  #contenido-capas .codigo {flex-direction: column;}
  #contenido-capas .flex {flex-direction: column; gap: 50px; transform: scale(0.8);}
  #contenido-capas #capa4 .flex, #contenido-capas #capa5 .flex {gap: 120px;}
  #contenido-display #contenedor1 label code.enlace, 
  #contenido-display #contenedor2 label code.enlace {font-size: calc(var(--font-size-base) * 0.7) !important;}
  #contenido-display .flex section {flex-direction: column; max-width: 70%;}
  #fuentes {transition: .3s; transform: scale(0.9); grid-template-columns: repeat(1, minmax(300px, 1fr)); justify-content: center; grid-template-rows: auto;}
  .font_compare {transition: .3s; width: 500px;}
  #fuentes .columns:nth-child(2) {display: none;}
  #fuentes .columns:nth-child(1) {justify-self: center;}
  #fuentes .columns:nth-child(3) {text-align: center; justify-self: center;}
  #colores_animados {transform: scale(0.9) translate(-50px, -100px);}
  #grid_colores {grid-template-columns: repeat(2, minmax(250px, 1fr));}
}

@media screen and (max-width: 1000px) {
  #grid_colores p {font-size: calc(var(--font-size-sm) * 0.9) !important;}
}

@media screen and (max-width: 930px) {
  #colores_gradient {grid-template-columns: repeat(3, minmax(200px, 1fr));}
  #colores_gradient div {transform-origin: 50% 100% !important;}
}

@media screen and (max-width: 875px) {
  
}

@media screen and (max-width: 850px) {
/*  #contenido {max-width: 100%;} */
  .flex_eventos {margin-left: 0 !important;}
  .flex_eventos div {flex-direction: column;}
  .flex_eventos div p:nth-child(2) {margin-right: 0;}
  .flex_etiquetas {margin-left: 0 !important;}
  #contenido-display .flex {flex-direction: column;}
  #contenido-display .flex1 {margin-left: 0px;}
  #contenido-display .flex1 .title {gap: 50px;}
  #contenido-display .flex1 .title i {font-size: calc(var(--font-size-base) * 1.2) !important;}
  #contenido-display .flex1 div h2 {font-size: var(--font-size-base) !important;}
  #contenido-display .flex1 div p:hover {font-size: calc(var(--font-size-base) * 0.9) !important;}
  #contenido-display #contenedor1, 
  #contenido-display #contenedor2 {margin: 0 !important;}
  #contenido-display #contenedor2 span {font-size: calc(var(--font-size-base) * 0.8) !important;}
  #contenido-display #contenedor1 label > code, 
  #contenido-display #contenedor2 label > code {font-size: calc(var(--font-size-base) * 0.6) !important;}
  #colores_animados {grid-template-columns: repeat(4, minmax(100px, 1fr));}
  #grid_colores {grid-template-columns: repeat(2, minmax(180px, 1fr));}
  #grid_colores p {font-size: calc(var(--font-size-sm) * 0.8) !important;}
  #grid_colores > div > div > div {width: 100%; max-width: 450px; display: grid; grid-template-columns: repeat(3, minmax(150px, 1fr));}
}

@media screen and (max-width: 800px) {
/*  #contenido{max-width: 100%; padding-left: 0 !important; margin: 0;}
  #contenido p {transition: margin-left 0.2s; font-size: calc(var(--font-size-base) * 0.9); margin-left: 0 !important;}
  #contenido code.enlace {font-size: calc(var(--font-size-base) * 0.9);} */
  .flex_atributos {margin-left: 0;}
  .flex_atributos div {flex-direction: column;}
  .flex_atributos div.title h4{transition: .2s; margin: 0;}
  #contenido-capas .explicacion {z-index: 100000;font-weight:bold;}
}

@media screen and (max-width: 700px) {
  #contenido-display #contenedor1 label, 
  #contenido-display #contenedor2 label {font-size: calc(var(--font-size-base) * 0.8);}
  .flex_etiquetas div {flex-direction: column;}
  #grid_colores {grid-template-columns: repeat(1, minmax(250px, 1fr));}
  #colores_gradient {grid-template-columns: repeat(2, minmax(200px, 1fr));}
  #colores_gradient div {transition: .3s; max-width: 170px; height: 170px;}
}

@media screen and (max-width: 600px) {
  #contenido-display .flex1 .title {gap: 20px;}
  #contenido-display .flex div img {transition: .2s; width: 150px; height: 75px;}
  #contenido-display #contenedor1 label, 
  #contenido-display #contenedor2 label {margin: 0 20px 20px 0;}
  #contenido-display .flex section {flex-direction: column; max-width: 100%;}
/*  #fuentes */
  .panel {transform: translateX(-100px);}
  #fuentes .columns:nth-child(1) {transform: scale(0.9) translateX(-20px); justify-self: start;}
  #colores_animados {grid-template-columns: repeat(2, minmax(130px, 1fr)); transform: scale(0.9, 1) translate(0px, 0px);}
  #grid_colores > div > div > div {width: 100%; max-width: 500px; grid-template-columns: repeat(3, minmax(170px, 1fr));}
}

@media screen and (max-width: 500px) {
/*  #contenido p {font-size: calc(var(--font-size-base) * 0.8);}
  #contenido {max-width: 100%; padding-left: 0; margin: 0;}
  #contenido code.enlace {font-size: calc(var(--font-size-base) * 0.8);} */
  .flex_eventos div {flex-direction: column;}
  #contenido-display .flex1 div {flex-direction: column;}
  #contenido-display .flex div img {transition: .2s; width: 130px; height: 65px;}
  #contenido-display #contenedor1 label, 
  #contenido-display #contenedor2 label {margin: 0 5px 20px 0;}
  #grid_colores > div > div > div {width: 100%; max-width: 400px; grid-template-columns: repeat(3, minmax(150px, 1fr)); transform: translateX(-30px);}
  #fuentes .columns:nth-child(1) {transform: scale(0.9) translateX(-80px);}
  #colores_gradient {grid-template-columns: repeat(2, minmax(150px, 1fr)); gap: 0;}
  #colores_gradient div {transition: .3s; max-width: 150px; height: 150px;}
}