@import url(https://fonts.googleapis.com/css?family=Martel+Sans:200,300,400,800,900);
@import url(https://fonts.googleapis.com/css?family=Varela+Round);

:root {
  --body-bg-color: #1a1c1d;
  --text-color: #aaaebc;
  --text-color1: #ffffff;
  --hr-color: #26292a;
  --red: #e74c3c;
  --timing-function: cubic-bezier(0.82, 0.2, 0.42, 1);
  --transition-duration: 0.3s;
  --transition-delay: 0.2s;
  --fill-color: #49b293; 
  /* --secondary-color: #3d8bb1; */
  --stroke-color: #1d2a53;
  --white: white;
}

/* CSS para todas las páginas */

#contenido {transition: margin-left 0.5s, padding-left 0.2s; max-width: 92%; padding-left: 80px;}

#contenido.margen {transition: all 0.5s; margin-left: 350px; max-width: 90%;}

#contenido-flex, #contenido-grid, #contenido-botones, #contenido-prop-css,
#contenido-animacion, #contenido-transition, #contenido-animation,
#contenido-filter, #contenido-animado, #contenido-iconos,
#contenido-globos, #contenido-modo-oscuro, #contenido-transform,
#contenido-hover {transition: all 0.5s;}

#contenido-flex p, #contenido-grid p, #contenido-botones p, #contenido-prop-css p,
#contenido-animacion p, #contenido-transition p, #contenido-animation p,
#contenido-filter p, #contenido-animado p, #contenido-iconos p,
#contenido-globos p, #contenido-modo-oscuro p, .card p,
#contenido-transform p, #contenido-hover p:not(.lineas-palabras1 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: margin-left 0.2s;
}

#contenido-flex h1, #contenido-flex h2, #contenido-flex h3,
#contenido-grid h1, #contenido-grid h2, #contenido-grid h3,
#contenido-botones h1, #contenido-botones h2, #contenido-botones h3,
#contenido-prop-css h1, #contenido-prop-css h2, #contenido-animacion h2,
#contenido-transition h1, #contenido-transition h2, #contenido-transition h4,
#contenido-filter h1, #contenido-filter h2, #contenido-filter h3,
#contenido-filter h4, #contenido-animado h1, #contenido-animado h2,
#contenido-iconos h1, #contenido-iconos h2, #contenido-globos h1, 
#contenido-globos h2, #contenido-globos h3, #contenido-modo-oscuro h1, 
#contenido-modo-oscuro h2, #contenido-modo-oscuro h3, #contenido-transform h1, 
#contenido-transform h2, #contenido-transform h3, #contenido-hover h1, 
#contenido-hover h2, #contenido-hover h3 {display: inline-block; transition: .5s;}

#contenido-flex h1:hover, #contenido-flex h2:hover, #contenido-flex h3:hover,
#contenido-grid h1:hover, #contenido-grid h2:hover, #contenido-grid h3:hover,
#contenido-botones h1:hover, #contenido-botones h2:hover, #contenido-botones h3:hover,
#contenido-prop-css h1:hover, #contenido-prop-css h2:hover, #contenido-animacion h2:hover,
#contenido-transition h1:hover, #contenido-transition h2:hover, #contenido-display h4:hover,
#contenido-filter h1:hover, #contenido-filter h2:hover, #contenido-filter h3:hover,
#contenido-filter h4:hover, #contenido-animado h1:hover, #contenido-animado h2:hover,
#contenido-iconos h1:hover, #contenido-iconos h2:hover, #contenido-globos h1:hover,
#contenido-globos h2:hover, #contenido-globos h3:hover, #contenido-modo-oscuro h1:hover, 
#contenido-modo-oscuro h2:hover, #contenido-modo-oscuro h3:hover, #contenido-transform h1:hover, 
#contenido-transform h2:hover, #contenido-transform h3:hover, #contenido-hover h1:hover, 
#contenido-hover h2:hover, #contenido-hover h3:hover {
  transition: .5s 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-animacion code, #contenido-prop-css code,
#contenido-botones code, #contenido-transition code,
#contenido-animation code, #contenido-filter code,
#contenido-globos code, #contenido-transform code,
#contenido-hover code, #contenido-modo-oscuro code,
.modo-oscuro-card code, #contenido-flex code,
#contenido-grid 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.5s linear 0.2s;
}
#contenido-prop-css code.enlace {
  white-space: wrap;
}

#contenido-animacion code:hover, #contenido-prop-css code:hover,
#contenido-botones code:hover, #contenido-transition code:hover,
#contenido-animation code:hover, #contenido-filter code:hover,
#contenido-globos code:hover, #contenido-transform code:hover,
#contenido-hover code:hover, #contenido-modo-oscuro code:hover,
.modo-oscuro-card code:hover, #contenido-flex code:hover,
#contenido-grid code:hover {
  transition: all .5s linear .2s;
  color: var(--primary-color);
  box-shadow: 2px 2px 8px var(--card-shadow);
}

#contenido-animacion b, #contenido-botones b,
#contenido-filter b, #contenido-globos b,
#contenido-transform b {
  display: inline-block; 
  font-size: calc(var(--font-size-base) * 1.1);
  transition: .5s;
  white-space: nowrap;
}

#contenido-animacion b:hover, #contenido-botones b:hover,
#contenido-filter b:hover, #contenido-globos b:hover,
#contenido-transform b:hover {
  transition: .5s;
  font-size: var(--font-size-base);
  letter-spacing: 1.3px;
  word-spacing: -6px;
  box-shadow: 2px 2px 8px var(--card-shadow);
}

/* PAGINA LISTA DE PROPIEDADES */

#contenido-prop-css .flex {
  display: flex; 
  flex-direction: column; 
  justify-content: space-around;
  gap: 20px; 
  width: 100%;
  max-width: 95%; 
  margin-left: 50px;
  font-size: var(--font-size-base); 
  border: var(--border-width) solid var(--card-border-color);
  border-radius: 6px;
  transition: .5s;
}
#contenido-prop-css .flex:hover {transition: .5s; box-shadow: 2px -4px 5px 5px var(--card-shadow);}
#contenido-prop-css .flex div {display: flex; justify-content: flex-start; align-items: center; border: 1px solid black; border-radius: 10px;}
#contenido-prop-css .flex div div {border: none;}
#contenido-prop-css .flex div:hover {transition: .5s linear; transform: translateY(-10px); box-shadow: 2px -4px 5px 5px var(--card-shadow); cursor: pointer;}
#contenido-prop-css .flex .flex1 {display: flex; align-items: flex-start; gap: 20px;width: 100%; max-width: 40%; padding-top: 15px;}
#contenido-prop-css .flex .flex1 i {display:inline-block; width: 200px;}
#contenido-prop-css .flex .flex1 b {display: block;}
#contenido-prop-css .flex .title {display: flex; justify-content: space-around;}
#contenido-prop-css .flex .title:hover h4 {
  transition: .5s;
  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-prop-css .flex div code {
  display: block; 
  width: 100%;
  max-width: 20%; 
  padding: 10px;
  font-size: calc(var(--font-size-code) * 1.1); 
  color: var(--color-code); 
  font-weight: bold;
  transition: .5s;
}
#contenido-prop-css .flex div span {display: inline-block; width: 100%; max-width: 400px; margin-left: 20px;font-size: 1em; padding-top: 15px; transition: .5s;}
#contenido-prop-css .flex div:hover span {transition: .5s; font-weight: bold;}
#contenido-prop-css .flex div span span {margin: 0; padding: 0; transition: .5s;}

/* PAGINA DISPLAY FLEX */

/* Estilos para los div control que contiene los input y los flex-container */

#contenido-flex strong {display: inline-block; padding: 0 5px;}

#contenido-flex .control label, #contenido-flex .radio label {line-height: 200%; cursor: pointer; padding: 3px; border: 1px solid var(--card-text-color); border-radius: 3px; white-space: nowrap; transition: .3s linear;}
#contenido-flex .control label:hover {display: inline-block; transition: .3s linear; transform-origin: 50% 100%; transform: scaleY(1.3); box-shadow: inset 2px 2px 4px var(--card-shadow);}
#contenido-flex input[type=radio] {cursor: pointer; display: none;}
#contenido-flex input[type=radio]:checked + label {color: var(--secondary-color);}
#contenido-flex .imagen {display: flex; flex-direction: column;}
/*#contenido-flex .control .imagen {margin-left:;}*/
#contenido-flex .control .imagen p {margin: 0; text-align: center; font-weight: bold;}
 
/* primer contenedor flex ó inline-flex */

#contenido-flex .flex-container1 {max-width: var(--card-width); border: 2px solid var(--card-text-color);background-color: var(--bg-color-pre);}
#contenido-flex .flex-item {width: auto; display: inherit; align-items: center;}
#contenido-flex .flex-item p {width:100%; margin: 0px; padding: 16px; text-align: center; color:#fff;}
#contenido-flex p.none {
  position: relative;
  font-size: 0px;
  line-height: 0px;
  opacity: 0;
  transition: all 0.3s linear;
}

#R1:checked ~ .flex-container1 {display: flex; gap: 3px;}
#R2:checked ~ .flex-container1 {display: inline-flex; gap: 3px; max-width: calc(var(--card-width) * 0.6);}
#R1:checked ~ .none.none1 {transition: all 0.3s linear;font-size: var(--font-size-base);line-height: var(--line-height-base);opacity: 1;}
#R2:checked ~ .none.none2 {transition: all 0.3s linear;font-size: var(--font-size-base);line-height: var(--line-height-base);opacity: 1;}

/* segundo contenedor flex-direction */

#contenido-flex .flex-container2 {max-width: var(--card-width); border: 2px solid var(--card-text-color); background-color: var(--bg-color-pre);}
#R3:checked ~ .flex-container2 {display: flex; gap: 3px;}
#R4:checked ~ .flex-container2 {display: flex; flex-direction: row-reverse; gap: 3px;}
#R5:checked ~ .flex-container2 {display: flex; flex-direction: column; gap: 3px; align-items: flex-start;}
#R6:checked ~ .flex-container2 {display: flex; flex-direction: column-reverse; gap: 3px; align-items: flex-start;}
#R3:checked ~ .none.none3 {transition: all 0.3s linear;font-size: var(--font-size-base);line-height: var(--line-height-base);opacity: 1;}
#R4:checked ~ .none.none4 {transition: all 0.3s linear;font-size: var(--font-size-base);line-height: var(--line-height-base);opacity: 1;}
#R5:checked ~ .none.none5 {transition: all 0.3s linear;font-size: var(--font-size-base);line-height: var(--line-height-base);opacity: 1;}
#R6:checked ~ .none.none6 {transition: all 0.3s linear;font-size: var(--font-size-base);line-height: var(--line-height-base);opacity: 1;}

/* tercer contenedor wrap */

#contenido-flex .flex-container3 {max-width: 300px; background-color: var(--bg-color-pre);}
#R7:checked ~ .flex-container3 {display: flex; gap: 3px; flex-wrap: nowrap;}
#R8:checked ~ .flex-container3 {display: flex; gap: 3px; flex-wrap: wrap;}
#R9:checked ~ .flex-container3 {display: flex; gap: 3px; flex-wrap: wrap-reverse;}
#R7:checked ~ .none.none7{transition: all 0.3s linear;font-size: var(--font-size-base);line-height: var(--line-height-base);opacity: 1;}
#R8:checked ~ .none.none8 {transition: all 0.3s linear;font-size: var(--font-size-base);line-height: var(--line-height-base);opacity: 1;}
#R9:checked ~ .none.none9 {transition: all 0.3s linear;font-size: var(--font-size-base);line-height: var(--line-height-base);opacity: 1;}

/* contenedor 3_1 flex-flow */

#contenido-flex .flex-container3_1 {display: flex; flex-wrap: nowrap; max-width: 300px; height: 200px;}
#R9_0:checked ~ .flex-container3_1 {display: flex; flex-flow: row nowrap;}
#R9_1:checked ~ .flex-container3_1 {display: flex; flex-flow: row wrap;}
#R9_2:checked ~ .flex-container3_1 {display: flex; flex-flow: row-reverse wrap;}
#R9_3:checked ~ .flex-container3_1 {display: flex; flex-flow: column wrap;}
#R9_4:checked ~ .flex-container3_1 {display: flex; flex-flow: column-reverse wrap;}
#R9_0:checked ~ .none.none9_0 {transition: all 0.3s linear;font-size: var(--font-size-base);line-height: var(--line-height-base);opacity: 1;}
#R9_1:checked ~ .none.none9_1 {transition: all 0.3s linear;font-size: var(--font-size-base);line-height: var(--line-height-base);opacity: 1;}
#R9_2:checked ~ .none.none9_2 {transition: all 0.3s linear;font-size: var(--font-size-base);line-height: var(--line-height-base);opacity: 1;}
#R9_3:checked ~ .none.none9_3 {transition: all 0.3s linear;font-size: var(--font-size-base);line-height: var(--line-height-base);opacity: 1;}
#R9_4:checked ~ .none.none9_4 {transition: all 0.3s linear;font-size: var(--font-size-base);line-height: var(--line-height-base);opacity: 1;}

/* cuarto contenedor align-items */

#contenido-flex .flex-container4, #contenido-flex .flex-container6, #contenido-flex .flex-container7 {max-width: calc(var(--card-width) * 0.8); border: 2px solid var(--card-text-color);background-color: var(--bg-color-pre);}
#contenido-flex .flex-container4 {height: 250px;}
#contenido-flex .flex-container4 .flex-item:nth-child(3) p {font-size: 50px;}
#R10:checked ~ .flex-container4 {display: flex; gap: 3px; align-items: flex-start;}
#R11:checked ~ .flex-container4 {display: flex; gap: 3px; align-items: flex-end;}
#R12:checked ~ .flex-container4 {display: flex; gap: 3px; align-items: center;}
#R13:checked ~ .flex-container4 {display: flex; gap: 3px; align-items: baseline;}
#R14:checked ~ .flex-container4 {display: flex; gap: 3px; align-items: stretch;}
#R10:checked ~ .none.none10 {transition: all 0.3s linear;font-size: var(--font-size-base);line-height: var(--line-height-base);opacity: 1;}
#R11:checked ~ .none.none11 {transition: all 0.3s linear;font-size: var(--font-size-base);line-height: var(--line-height-base);opacity: 1;}
#R12:checked ~ .none.none12 {transition: all 0.3s linear;font-size: var(--font-size-base);line-height: var(--line-height-base);opacity: 1;}
#R13:checked ~ .none.none13 {transition: all 0.3s linear;font-size: var(--font-size-base);line-height: var(--line-height-base);opacity: 1;}
#R14:checked ~ .none.none14 {transition: all 0.3s linear;font-size: var(--font-size-base);line-height: var(--line-height-base);opacity: 1;}

/* quinto contenedor justify-content */

#contenido-flex .flex-container5 {max-width: var(--card-width); border: 2px solid var(--card-text-color); background-color: var(--bg-color-pre);}
#R15:checked ~ .flex-container5 {display: flex; gap: 3px; justify-content: flex-start;}
#R16:checked ~ .flex-container5 {display: flex; gap: 3px; justify-content: flex-end;}
#R17:checked ~ .flex-container5 {display: flex; gap: 3px; justify-content: center;}
#R18:checked ~ .flex-container5 {display: flex; justify-content: space-between;}
#R19:checked ~ .flex-container5 {display: flex; justify-content: space-around;}
#R20:checked ~ .flex-container5 {display: flex; justify-content: space-evenly;}
#R15:checked ~ .none.none15 {transition: all 0.3s linear;font-size: var(--font-size-base);line-height: var(--line-height-base);opacity: 1;}
#R16:checked ~ .none.none16 {transition: all 0.3s linear;font-size: var(--font-size-base);line-height: var(--line-height-base);opacity: 1;}
#R17:checked ~ .none.none17 {transition: all 0.3s linear;font-size: var(--font-size-base);line-height: var(--line-height-base);opacity: 1;}
#R18:checked ~ .none.none18 {transition: all 0.3s linear;font-size: var(--font-size-base);line-height: var(--line-height-base);opacity: 1;}
#R19:checked ~ .none.none19 {transition: all 0.3s linear;font-size: var(--font-size-base);line-height: var(--line-height-base);opacity: 1;}
#R20:checked ~ .none.none20 {transition: all 0.3s linear;font-size: var(--font-size-base);line-height: var(--line-height-base);opacity: 1;}

/* sexto contenedor align-content */

#contenido-flex .flex-container6 {height: 500px;}
#contenido-flex .flex-container6 .flex-item {margin: 0;}
#R21:checked ~ .flex-container6 {display: flex; flex-wrap: wrap; column-gap: 5px; align-content: flex-start;}
#R22:checked ~ .flex-container6 {display: flex; flex-wrap: wrap; column-gap: 5px; align-content: flex-end;}
#R23:checked ~ .flex-container6 {display: flex; flex-wrap: wrap; column-gap: 5px; align-content: center;}
#R24:checked ~ .flex-container6 {display: flex; flex-wrap: wrap; column-gap: 5px; align-content: space-between;}
#R25:checked ~ .flex-container6 {display: flex; flex-wrap: wrap; column-gap: 5px; align-content: space-around;}
#R26:checked ~ .flex-container6 {display: flex; flex-wrap: wrap; column-gap: 5px; align-content: stretch;}
#R21:checked ~ .none.none21 {transition: all 0.3s linear;font-size: var(--font-size-base);line-height: var(--line-height-base);opacity: 1;}
#R22:checked ~ .none.none22 {transition: all 0.3s linear;font-size: var(--font-size-base);line-height: var(--line-height-base);opacity: 1;}
#R23:checked ~ .none.none23 {transition: all 0.3s linear;font-size: var(--font-size-base);line-height: var(--line-height-base);opacity: 1;}
#R24:checked ~ .none.none24 {transition: all 0.3s linear;font-size: var(--font-size-base);line-height: var(--line-height-base);opacity: 1;}
#R25:checked ~ .none.none25 {transition: all 0.3s linear;font-size: var(--font-size-base);line-height: var(--line-height-base);opacity: 1;}
#R26:checked ~ .none.none26 {transition: all 0.3s linear;font-size: var(--font-size-base);line-height: var(--line-height-base);opacity: 1;}

/* septimo contenedor align-self */

#contenido-flex .flex-container7 {height: 300px; display: flex; align-items: center;}
#contenido-flex .flex-container7 .flex-item:nth-child(3) p {font-size: 50px;}
#R27:checked ~ .flex-container7 > .flex-item:nth-child(3) {align-self: auto;}
#R28:checked ~ .flex-container7 > .flex-item:nth-child(3) {align-self: flex-start;}
#R29:checked ~ .flex-container7 > .flex-item:nth-child(3) {align-self: flex-end;}
#R30:checked ~ .flex-container7 > .flex-item:nth-child(3) {align-self: center;}
#R31:checked ~ .flex-container7 > .flex-item:nth-child(3) {align-self: baseline;}
#R32:checked ~ .flex-container7 > .flex-item:nth-child(3) {align-self: stretch;}
#R27:checked ~ .none.none27 {transition: all 0.3s linear;font-size: var(--font-size-base);line-height: var(--line-height-base);opacity: 1;}
#R28:checked ~ .none.none28 {transition: all 0.3s linear;font-size: var(--font-size-base);line-height: var(--line-height-base);opacity: 1;}
#R29:checked ~ .none.none29 {transition: all 0.3s linear;font-size: var(--font-size-base);line-height: var(--line-height-base);opacity: 1;}
#R30:checked ~ .none.none30 {transition: all 0.3s linear;font-size: var(--font-size-base);line-height: var(--line-height-base);opacity: 1;}
#R31:checked ~ .none.none31 {transition: all 0.3s linear;font-size: var(--font-size-base);line-height: var(--line-height-base);opacity: 1;}
#R32:checked ~ .none.none32 {transition: all 0.3s linear;font-size: var(--font-size-base);line-height: var(--line-height-base);opacity: 1;}

/* contenedores de los items con javascript */

#contenido-flex input[type=number]{width:40px; margin-right:.5em; cursor: pointer;}
#contenido-flex .radio {width: var(--card-width); display: flex; flex-wrap: wrap; gap: 5px;}
#contenido-flex .radio1 {width: var(--card-width); display: flex; flex-direction: column; gap: 10px;}
#contenido-flex .radio1 .radio span:nth-child(1) {line-height: 200%;}
#contenido-flex span.nbsp {white-space: nowrap;}
#contenido-flex .flex-container {
 background-color: var(--bg-color-pre);
 border: 2px solid var(--card-text-color);
 display : flex;
 padding: 20px;
 width: 100%; 
}
#contenido-flex .item {
 margin:0; 
 display: inherit;
 padding: 10px; 
 width: 100px; 
 height: 100px;
 align-items: center;
 transition: .3s linear;
}
#contenido-flex .item p {width:100%; margin: 0; text-align:center; color:#fff;}
#FCI2 .item {flex-grow: 0;}
#FCI2 .item:hover {transition: .5s linear; flex-grow: 0.3;}
#FCI3 .item {width:25%;}
#FCI4 .item {width:50%;}
#FCI5 .item {width:20%;}

/* Estilos para la tabla resumen de propiedades */

#contenido-flex .resumen {
  width: 100%;
  max-width: 100%;
  border: 1px solid black;
  display: flex;
  flex-direction: column; 
}
#contenido-flex .resumen h3 {align-self: center;}
#contenido-flex .resumen hr {
  border: 0;
  height: 1px;
  width: 100%;
  box-shadow: 0 1px 5px 1px purple;
  background: rgba(0,0,0,.3);
} /*border: 0; height: 12px; box-shadow: inset 0 12px 12px -12px orange;*/
#contenido-flex .resumen .flex-res {display: flex;}
#contenido-flex .resumen .flex-res p:nth-child(1) {
  white-space: nowrap; 
  flex-basis: 20%;
  border-right: 1px solid black;
}
#contenido-flex .resumen .flex-res p:nth-child(2) {border-right: 1px solid black;}
#contenido-flex .resumen .flex-res p:nth-child(2),
#contenido-flex .resumen .flex-res p:nth-child(3) {
  transition: .3s linear;
  flex-basis: 40%;
  font-size: var(--font-size-base);
}
#contenido-flex .resumen .flex-res p:nth-child(2):hover,
#contenido-flex .resumen .flex-res p:nth-child(3):hover {
  transition: .3s linear;
  font-size: calc(var(--font-size-base) * 0.8);
  font-weight: bold;
  box-shadow: 2px 2px 7px rgba(0,0,0,.3);
}

#contenido-flex .resumen .flex-res:nth-of-type(1) p:nth-child(2):hover > .back,
#contenido-flex .resumen .flex-res:nth-of-type(1) p:nth-child(3):hover > .back,
#contenido-flex .resumen .flex-res:nth-of-type(9) p:nth-child(2):hover > .back,
#contenido-flex .resumen .flex-res:nth-of-type(9) p:nth-child(3):hover > .back
{transition: .3s linear; margin-left: 5%;}

/* PAGINA DISPLAY GRID */

/* Estilos para la tabla resumen de propiedades del contenedor grid */

#contenido-grid img {max-width: 100%;}

#contenido-grid .resumen {
  width: 100%;
  max-width: 100%;
  border: 1px solid black;
  display: flex;
  flex-direction: column; 
}
#contenido-grid .resumen h3 {align-self: center;}
#contenido-grid .resumen hr {
  border: 0;
  height: 1px;
  width: 100%;
  box-shadow: 0 1px 5px 1px purple;
  background: rgba(0,0,0,.3);
}
#contenido-grid .resumen .flex-res {display: flex;}
#contenido-grid .resumen .flex-res p:nth-child(1),
#contenido-grid .resumen .flex-res p:nth-child(2) {
  white-space: nowrap; 
  flex-basis: 25%;
  border-right: 1px solid black;
}
#contenido-grid .resumen .flex-res p:nth-child(3) {
  transition: .3s linear;
  flex-basis: 50%;
  font-size: var(--font-size-base);
}
#contenido-grid .resumen .flex-res p:nth-child(2):hover,
#contenido-grid .resumen .flex-res p:nth-child(3):hover {
  transition: .3s linear;
  font-size: calc(var(--font-size-base) * 0.8);
  font-weight: bold;
  box-shadow: 2px 2px 7px rgba(0,0,0,.3);
}

#contenido-grid .resumen .flex-res p:nth-child(3):hover code {
  transition: .3s linear;
  font-size: calc(var(--font-size-base) * 0.8);
}

#contenido-grid .resumen .flex-res:nth-of-type(1) p:nth-child(2):hover > .back,
#contenido-grid .resumen .flex-res:nth-of-type(1) p:nth-child(3):hover > .back,
#contenido-grid .resumen .flex-res:nth-of-type(9) p:nth-child(2):hover > .back,
#contenido-grid .resumen .flex-res:nth-of-type(9) p:nth-child(3):hover > .back
{transition: .3s linear; margin-left: 5%;}

/* Estilo para los ejemplos, el código y los contenedores grid */

#contenido-grid .flex {
  display: flex; 
  flex-direction: column;
  justify-content: space-between;
  min-height: 120vh;
  overflow-y: scroll;   
}
#contenido-grid .flex1 {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 80vh;
} 
#contenido-grid .codigo, #contenido-grid .codigo1 {position: relative;}
#contenido-grid .codigo input, #contenido-grid .codigo1 input {display: none;}
#contenido-grid .codigo label, #contenido-grid .codigo1 label {
  display: inline-block;
  padding: 5px; 
  background: rgb(0,0,0);
  color: #fff;
  font-weight: bold;
  border-radius: 5px;
  margin-right: 10px;
  cursor: pointer;
}

#contenido-grid .codigo #codhtml:checked + label,
#contenido-grid .codigo #codcss:checked + label,
#contenido-grid .codigo1 #codhtml1:checked + label,
#contenido-grid .codigo1 #codcss1:checked + label {
  transition: .3s linear;
  background: #fff;
  color: green;
  border: 1px solid black;
}

#contenido-grid .grid-container {
  width: 100%;
  max-width: 90%;
  background: steelblue;
  margin: 0;
  border: 1px dashed red;
  display: grid;
  grid-template-columns: 1fr 10em 120px 0.5fr 10%;
  gap: 10px;
}

#contenido-grid .grid-container div {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
  font-size: 150%;
  display: grid;
  place-content: center;
}

#contenido-grid .grid-container1 {
  width: 100%;
  max-width: 90%;
  background: steelblue;
  margin: 0;
  border: 1px dashed red;
  display: grid;
  grid-template-columns: 100px repeat(3, 1fr 0.5fr) 5vw;
  grid-template-rows: repeat(3, 100px);
  gap: 10px;
}

#contenido-grid .grid-container1 div {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 10px;
  font-weight: bold;
  display: grid;
  place-content: center;
}

#contenido-grid .flex2 {display: flex; flex-wrap: wrap;}
#contenido-grid .flex2 input:checked + label {color: green;}
#contenido-grid .flex2 #auto-fill:checked ~ .grid-container2 {
  grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
}

#contenido-grid .grid-container2 {
  width: 100%;
  max-width: 90%;
  min-height: 200px;
  background: steelblue;
  margin: 0;
  border: 1px dashed red;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
  justify-content: space-evenly;
  gap: 10px;
}

#contenido-grid .grid-container2 div {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 10px;
  font-weight: bold;
  display: grid;
  place-content: center; 
}

/* PAGINA BOTONES SOCIALES */

#png {
  position: fixed;
  left: 85%;
  top: 0px;
  max-width: 200px;
  background-color: rgba(0,0,0,.1);
  display: flex;
  justify-content: center;
  align-items: flex-end;
  z-index: 1000;
}
#png a img {width: 30px; height: 30px;}
#png a {display: block;}
#png .facepng:hover {transition: 0.2s; background: blue; height: 40px; transform: scale(0.9) translateY(-5px);}
#png .twitpng:hover {transition: 0.2s; background: rgb(102, 204, 255); height: 40px; transform: scale(0.9) translateY(-5px);}
#png .linkpng:hover {transition: 0.2s; background: rgb(51, 153, 204); height: 40px; transform: scale(0.9) translateY(-5px);}
#png .whatpng:hover {transition: 0.2s; background: rgb(102, 255, 102); height: 40px; transform: scale(0.9) translateY(-5px);}
#png .pintpng:hover {transition: 0.2s; background: rgb(255, 0, 102); height: 40px; transform: scale(0.9) translateY(-5px);}

#contenido-botones a.ext {color: var(--primary-color);}  

/* CSS para el button aquamarine 

#contenido-botones {} */

#contenido-botones #redes-sociales {
    background-color: aquamarine;
    cursor: pointer;
    position: fixed;
    display: block;
    left: 0;
    top: 30%;
    border-radius: 10px;
    opacity: .7;
    transition: .3s ease-in;
}

#contenido-botones #redes-sociales:hover {
    transition: all .3s linear;
    background-color: darkmagenta;
    border-radius: 60px;
    padding: 10px;
    color: ghostwhite;
    opacity: 1;
}
#contenido-botones #redes-sociales p {margin: 0; padding: 0;font-weight: bold;}
#contenido-botones #redes-sociales:hover .prueba {
    position: absolute;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    transition: all 0.3s ease-in-out;
    width: auto;
    height: auto;
    visibility: visible;
    opacity: 0.8;
    transform: translate(-10px, -85px);
}
#contenido-botones .prueba {
    width: 0;
    height: 0;
    position: relative;
    overflow: hidden;
    visibility: hidden;
    opacity: 0;
    transform: none;
}
#contenido-botones .prueba span {display: inline-block;height: 50px;width: 45px;}
#contenido-botones .prueba a {
  display: inline-block;
  width: 45px;
  height: 50px;
  background: url(https://lh4.googleusercontent.com/-_r9d0QOmcOg/UfdK-ieKuuI/AAAAAAAABbw/0sqLdsD-hNo/s229/socialButtons.png);
}
#contenido-botones .prueba1 a {width: 45px;background-position: 0 0px;}
#contenido-botones .prueba2 a {width: 45px;background-position: -60px 0px;}
#contenido-botones .prueba3 a {width: 45px;background-position: -122px 0px;}
#contenido-botones .prueba4 a {width: 45px;background-position: -183px 0px;}
#contenido-botones .prueba1 a:hover {width: 45px;background-position: 0 -50px;}  
#contenido-botones .prueba2 a:hover {width: 45px;background-position: -60px -50px;}  
#contenido-botones .prueba3 a:hover {width: 45px;background-position: -122px -50px;}  
#contenido-botones .prueba4 a:hover {width: 45px;background-position: -183px -50px;}

/* Para arreglar los botones para resoluciones mayores a 800px 
   Hay que poner las media querys al final del archivo */

/* Css para los botones 3d, los iconos son de awesome */

#contenido-botones .botones3d {
    background: lightgreen;
    max-width: 80%;
    height: 200px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    position: relative;
    left: 10%;
    margin: 3% 0 3% 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
#contenido-botones .botones3d ul {position: absolute;display: flex;margin: 0;padding: 0;}
#contenido-botones .botones3d a {text-decoration: none; color: rgba(0 ,0 ,255 ,0.7);}
#contenido-botones .botones3d i {padding: 10px;}
#contenido-botones .botones3d ul li {list-style: none;margin: 10px;display: block;}
#contenido-botones .botones3d ul li a {
    width: 200px;
    height: 50px;
    background: orangered;
    display: flex;
    font-size: 20px;
    align-items: center;
    justify-content: center;
    transform: rotate(-30deg) skewX(25deg);
    box-shadow: -20px 20px 8px CurrentColor;
    color: rgba(0, 0, 255, 0.8);
}
#contenido-botones .botones3d ul li:hover a {transition: .3s; box-shadow: -24px 24px 4px CurrentColor;}
#contenido-botones .botones3d ul li a::before {
    content: '';
    position: absolute;
    top: 10px;
    left: -20px;
    background: orangered;
    height: 100%;
    width: 20px;
    transform: rotate(0deg) skewY(-45deg);
}
#contenido-botones .botones3d ul li a::after {
    content: '';
    position: absolute;
    bottom: -20px;
    left: -10px;
    background: orangered;
    height: 20px;
    width: 100%;
    transform: rotate(0deg) skewX(-45deg);
}
#contenido-botones .botones3d li a:hover {transform: rotate(-30deg) skew(25deg) translate(20px, -15px);}

/* 
  Nuevo menú para los iconos sociales que saltan
  iconos de awesome con css, displays y hover
*/

#contenido-botones .awesome {position: fixed;left: 30px;top: 35%;}
#contenido-botones .awesome a {
    display: block;
    text-decoration: none;
    background-color: transparent;
    width: 40px;
    height: 40px;
    margin-top: 10px;
    border: transparent;
    border-radius: 50%;
}
#contenido-botones .awesome a i {
    position: absolute;
    font-size: 26px;
    display: block;
    color: black;
    background-color: white;
    border: 2px solid black;
    padding: 5px;
    border-radius: 50%;
    margin-left: 10px;
    margin-top: 10px;
}
#contenido-botones .awesome a:hover>i {
    font-size: 36px;
    background-color: black;
    color: white;
    transition: all ease-in-out;
    transition-duration: 0.5s;
    transform-origin: 50%;
    transform: scale(1.2);
}
#contenido-botones .awesome1 {transform: scale(0);}
#contenido-botones .awesome:hover > a {
    transition: all 0.5s linear;
    background-color: turquoise;
    width: 50px;
    height: 60px;
}
#contenido-botones .awesome:hover > .awesome1 {
    transition: all 0.5s linear 0s;
    transform-origin: 50% -100%;
    transform: scale(1);
    opacity: 1;
}
#contenido-botones .awesome1:hover > a { 
    transition: all 0.5s linear;
    background-color: violet;
    width: 50px;
    height: 60px;
}

/* CSS para pie de página */

/* Estilo de iconos awesone en el centro del pie */

.socialfixed {
    position: relative;
    top: 130px;
    left: 50px;
    width: 30%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    z-index: 1000;
}
.socialfixed a {text-decoration: none;}
.socialfixed a i {font-size: 30px; color: black;}
.contacto {background-color: antiquewhite;border: 1px solid black;border-radius: 20%;}
.contacto1 {padding-left: 10px;}
.contacto:hover {
    width: 110px;
    height: 70px;
    transition: all 0.5s linear 0s;
    background-color: rgb(17, 61, 17);
    border: 3px solid black;
    border-radius: 100%;
}

.contacto:hover .textosocial1 {
    display: block;
    position: relative;
    transition: all 0.3s linear;
    width: auto;
    margin-left: 5px;
    padding-bottom: 5px;
    opacity: 1;
    visibility: visible;
    color: white;
    font-weight: bold;
    letter-spacing: 1.5px;
}
.contacto:hover .contacto1 i {
    transition: all .3s linear;
    color: white;
    font-size: 20px;
    padding-left: 30px;
    padding-top: 5px;
}
.contacto:hover .iconosfixed {
    display: block;
    position: relative;
    bottom: 50%;
    left: 106px;
    transition: all .3s linear 0s;
    visibility: visible;
    overflow: visible;
    opacity: 1;
    color: black;
}
.textosocial {
    width: 0 !important;
    height: 0;
    padding: 5px;
    padding-right: 10px; 
    display: inline-block;
    margin: 0;
    color: black;
    visibility: hidden;
    opacity: 0;
}
.textosocial1 {
    width: 0 !important;
    height: 0;
    padding: 5px;
    display: inline-block;
    margin: 0;
    font-size: var(--font-size-sm);
    color: black;
    visibility: hidden;
    opacity: 0;
}
.iconosfixed {
    display: flex;
    justify-content: flex-start;
    width: 0px;
    height: 0px;
    overflow: hidden;
    visibility: hidden;
    opacity: 0;
}
#iconos {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    max-width: 50%;
    height: 60px;
    background-color: rgb(243, 201, 147);
}

#iconos > div {transition: .3s linear;}

.icono1, .icono2, .icono3, .icono4 {display: flex; padding: 2px;}

#iconos > div:hover .textosocial{
    display: inline-block;
    transition: all 0.3s linear;
    width: auto !important;
    font-size: var(--font-size-sm);
    color: white;
    opacity: 1;
    visibility: visible;
}

.icono1:hover {
    transition: all 0.3s linear 0s;
    background-color: rgb(8, 8, 131);
    border: 2px solid white;
    border-radius: 10%;
}
.icono1:hover i {transition: all 0.3s linear 0s;font-size: 30px;color: white;}

.icono2:hover {
    transition: all 0.3s linear 0s;
    background-color: rgb(43, 109, 148);
    border: 2px solid white;
    border-radius: 10%;
}
.icono2:hover i {transition: all 0.3s linear 0s;font-size: 30px;color: white;}

.icono3:hover {
    transition: all 0.3s linear 0s;
    background-color: crimson;
    border: 2px solid white;
    border-radius: 10%;
}
.icono3:hover i {transition: all 0.3s linear 0s;font-size: 30px;color: white;}

.icono4:hover {
    transition: all 0.3s linear 0s;
    background-color: cornflowerblue;
    border: 2px solid white;
    border-radius: 10%;
}
.icono4:hover i {transition: all 0.3s linear 0s;font-size: 30px;color: white;}

/* iconos awesome a la derecha en el pie de página */

.pie-derecha {width: 30%;display: flex; justify-content: center;}

/* iconos del pie que tienen la animación de rotación */

#social {
  --icono: 4;
  --angulo: calc(360deg / var(--icono));
  display: flex;
  flex-direction: column;
  align-content: center;
  align-items: center;
  position: fixed;
  top: 80%;
  left: 550px;
  width: 0px;
  height: 0px;
  opacity: 0;
  overflow: hidden;
  visibility: hidden;
  z-index: 1000;
  transition: all .5s linear .1s;
  animation: girar 20s infinite linear;
}
@keyframes girar {
  0% {transform:rotate(0deg);}
  100% {transform:rotate(-360deg);}
}

#social i {margin-top: 7px; margin-left: 2px;}

#contenido:hover ~ #social {
  transition: all .5s linear .1s;
  width: 250px;
  height: 250px;
  overflow: visible;
  visibility: visible;
  opacity: 1;
  transform-origin: 50% 50%;
}
#social:hover span {transition: all .5s linear;}
#social:hover div:nth-child(1) {transition: all .5s linear; transform: translate(50px, 10px);}
#social:hover div:nth-child(2) {transition: all .5s linear; transform: translate(90px, 20px);}
#social:hover div:nth-child(3) {transition: all .5s linear; transform: translate(-20px, -20px);}
#social:hover div:nth-child(4) {transition: all .5s linear; transform: translate(50px, -10px);}
#social .face:hover {transition: all .5s linear; background: #000099; border: 2px solid white; border-radius: 20%;}
#social .twit:hover {transition: all .5s linear; background: #0066FF; border: 2px solid black; border-radius: 20%;}
#social .gmail:hover {transition: all .5s linear; background: #FF3300; border: 2px solid white; border-radius: 20%;}
#social .link:hover {transition: all .5s linear; background: #006666; border: 2px solid black; border-radius: 20%;}
#social a {display: block; width: auto; text-decoration: none;}
#social i {position: relative; display: inline-block; font-size: var(--font-size-sm); background: white; color: black; z-index: 10000;}
#social span {color: white; display: inline-block; margin-left: 10px; padding-bottom: 10px; font-weight: bold;}

/* PAGINA ANIMACIONES */

/* Estilo para el primer encabezado animado */

#contenido-animacion .elastico {
  width: 100%;
  max-width: 95%;
  margin: 0 auto;
  height: 140px;
  filter: contrast(15);
  background: #fff;
  overflow: hidden;
}
#contenido-animacion .elastico .titulo {
  /* font: 600 90px/150px arial, sans-serif; */
  padding: 0;
  margin: 0;
  color: #400;
  display: block;
  text-align: center;
  animation: elastico-abrir 8s infinite alternate;
}
@keyframes elastico-abrir {
   0% {font: 600 40px/150px arial, sans-serif; letter-spacing: -15px; filter: blur(10px); transform: scale(0.4);}
   30% {filter: blur(5px); transform: scale(1);}
   60% {text-shadow: 10px 10px 4px rgba(0, 0, 0, .5);}
   100% {font: 600 90px/150px arial, sans-serif; letter-spacing: 3px; filter: blur(2px) grayscale(100%); text-shadow: -10px -10px 4px rgba(0, 0, 0, .5);}
}

/* Estilo para el segundo encabezado animado */

#contenido-animacion .elastico1 {
  position: relative;
  width: 100%;
  max-width: 400px;
  height: 80px;
  margin: 0 auto;
  overflow: visible;
  cursor: pointer;
}

#contenido-animacion .elastico1 .titulo1 {
  position: relative;
  font-size: calc(var(--font-size-base) * 2);
  letter-spacing: -0.7em;
  word-spacing: 20px;
  line-height: 80px;
  text-align: center;
  white-space: nowrap;
}

#contenido-animacion .elastico1 .titulo1::after {
  content: attr(data-titulo);
  position: absolute;
  left: 0;
  top: 30px;
  display: inline-block; 
  width: 0%;
  height: 0%;
  font-size: calc(var(--font-size-sm) * 1.2);
  background: hsla(var(--hue), calc(var(--saturation) * 0.1), calc(var(--lightness) * 0.35), 0.3);
  overflow: hidden;
  transition-duration: 2s;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.39, 0.13, 0.55, 0.88);
  will-change: width, height, background-color;
  -webkit-text-fill-color: var(--secondary-color);
}
#contenido-animacion .elastico1 .titulo1:hover::after {width: 100%; height: 100%;}
#contenido-animacion .elastico1:hover .titulo1 {
  transition: all 3s ease 0.1s;
  letter-spacing: normal;
  word-spacing: normal;
  text-shadow: red 0 -5px;
  transform-origin: 50% 50%;
  transform: translate(10px, 10px) skewX(-10deg) skewY(-5deg) rotate(10deg);
  animation: flashes 1s ease 3.1s infinite;
}
@keyframes flashes {
  0% {opacity: 1; background: white; color: black;}
  50% {opacity: 0.6;}
  100% {opacity: 0.2; background: black; color: white; transform: scale(1.2);}
}

/* Estilos para el logotipo giratorio */

#contenido-animacion #todo {position: relative;}
#contenido-animacion #circulo-body {
/* variables */
--letra:26; /* numero de letras y espacios */
--angulo:calc(360deg / var(--letra)); /* para calcular el angulo de rotación */
  width:98%;
  max-width:200px;
  height:100%; 
  position:relative; 
  background: radial-gradient(/*#5f80ad #800080*/ #7B68EE 50%, #0000 50.25%);
  animation: rotar-body 60s infinite linear; 
  aspect-ratio:1/1;
  border-radius:100%; 
  overflow:hidden; 
  margin:50px auto;  
}
@keyframes rotar-body {
  0% {transform:rotate(0deg);}
  100% {transform:rotate(720deg);}
}
#contenido-animacion #circulo-body:hover {
  transition: all 1s linear 0s;
  background: radial-gradient(#999 50%, #7B68EE 50.25%);
}
#contenido-animacion #circulo-body:hover #letras-circ-body i {
  display: block;
  transition: all 1.5s linear 0s;
  background-color: white;
  color: var(--card-text-color);
  font-size: 1.4em;
  bottom: 7px;
  text-shadow: red 0 -5px;
}
#contenido-animacion #circulo-body i {
  display:block; 
  font:600 normal 1em/1.2em arial, sans-serif; 
  color:/*#585;*/var(--secondary-color); 
  width:10%; 
  height:50%; 
  position:absolute;
  top:0; 
  left:45%;
  text-align:center;
  transform-origin:50% 100%;
  transition: 1s linear .2s;
}

#contenido-animacion #circulo-body i:nth-child(2) {transform:rotate(var(--angulo));}
#contenido-animacion #circulo-body i:nth-child(3) {transform:rotate(calc(var(--angulo) * 2));}
#contenido-animacion #circulo-body i:nth-child(4) {transform:rotate(calc(var(--angulo) * 3));}
#contenido-animacion #circulo-body i:nth-child(5) {transform:rotate(calc(var(--angulo) * 4));}
#contenido-animacion #circulo-body i:nth-child(6) {transform:rotate(calc(var(--angulo) * 5));}
#contenido-animacion #circulo-body i:nth-child(7) {transform:rotate(calc(var(--angulo) * 6));}
#contenido-animacion #circulo-body i:nth-child(8) {transform:rotate(calc(var(--angulo) * 7));}
#contenido-animacion #circulo-body i:nth-child(9) {transform:rotate(calc(var(--angulo) * 8));}
#contenido-animacion #circulo-body i:nth-child(10) {transform:rotate(calc(var(--angulo) * 9));}
#contenido-animacion #circulo-body i:nth-child(11) {transform:rotate(calc(var(--angulo) * 10));}
#contenido-animacion #circulo-body i:nth-child(12) {transform:rotate(calc(var(--angulo) * 11));}
#contenido-animacion #circulo-body i:nth-child(13) {transform:rotate(calc(var(--angulo) * 12));}
#contenido-animacion #circulo-body i:nth-child(14) {transform:rotate(calc(var(--angulo) * 13));}
#contenido-animacion #circulo-body i:nth-child(15) {transform:rotate(calc(var(--angulo) * 14));}
#contenido-animacion #circulo-body i:nth-child(16) {transform:rotate(calc(var(--angulo) * 15));}
#contenido-animacion #circulo-body i:nth-child(17) {transform:rotate(calc(var(--angulo) * 16));}
#contenido-animacion #circulo-body i:nth-child(18) {transform:rotate(calc(var(--angulo) * 17));}
#contenido-animacion #circulo-body i:nth-child(19) {transform:rotate(calc(var(--angulo) * 18));}
#contenido-animacion #circulo-body i:nth-child(20) {transform:rotate(calc(var(--angulo) * 19));}
#contenido-animacion #circulo-body i:nth-child(21) {transform:rotate(calc(var(--angulo) * 20));}
#contenido-animacion #circulo-body i:nth-child(22) {transform:rotate(calc(var(--angulo) * 21));}
#contenido-animacion #circulo-body i:nth-child(23) {transform:rotate(calc(var(--angulo) * 22));}
#contenido-animacion #circulo-body i:nth-child(24) {transform:rotate(calc(var(--angulo) * 23));}
#contenido-animacion #circulo-body i:nth-child(25) {transform:rotate(calc(var(--angulo) * 24));}
#contenido-animacion #circulo-body i:nth-child(26) {transform:rotate(calc(var(--angulo) * 25));}
#contenido-animacion #circulo-body i:nth-child(27) {transform:rotate(calc(var(--angulo) * 26));} 

#contenido-animacion #social-body {
  --icono: 4; /* numero de iconos */
  --angulo: calc(360deg / var(--icono));
  display: flex;
  flex-direction: column;
  align-content: center;
  align-items: center;
  position: absolute;
  bottom: 8%;
  left: 45%;
  width: 0px;
  height: 0px;
  overflow: hidden;
  visibility: hidden;
  animation: girar-body 20s infinite linear;
}
@keyframes girar-body {
  0% {transform:rotate(0deg);}
  100% {transform:rotate(-360deg);}
}
#contenido-animacion #social-body i {
  margin-top: 7px;
  margin-left: 2px;
}
#contenido-animacion #todo:hover #social-body {
  transition: all 1s linear 1s;
  width: auto;
  height: auto;
  overflow: visible;
  visibility: visible;
  z-index: 1000;
  transform-origin: 50% 50%;
}
#contenido-animacion #social-body:hover span {
  transition: all 1s linear;
  transform: translateY(-5px);
}
#contenido-animacion #social-body:hover a:nth-child(1) {
  transition: all 1s linear;
  transform: translate(50px, 10px);
}
#contenido-animacion #social-body:hover a:nth-child(2) {
  transition: all 1s linear;
  transform: translate(90px, 20px);
}
#contenido-animacion #social-body:hover a:nth-child(3) {
  transition: all 1s linear;
  transform: translate(-20px, -20px);
}
#contenido-animacion #social-body:hover a:nth-child(4) {
  transition: all 1s linear;
  transform: translate(50px, -10px);
}
#contenido-animacion .face-body:hover {
  transition: all 1s linear;
  background: #000099;
  border: 2px solid white;
  border-radius: 20%;
}
#contenido-animacion .twit-body:hover {
  transition: all 1s linear;
  background: #0066FF;
  border: 2px solid black;
  border-radius: 20%;
}
#contenido-animacion .gmail-body:hover {
  transition: all 1s linear;
  background: #FF3300;
  border: 2px solid white;
  border-radius: 20%;
}
#contenido-animacion .link-body:hover {
  transition: all 1s linear;
  background: #006666;
  border: 2px solid black;
  border-radius: 20%;
}

#contenido-animacion #social-body a {
  display: block;
  width: auto;
  text-decoration: none;
}
#contenido-animacion #social-body i {
  position: relative;
  display: inline-block;
  font-size: 1.6em;
  background: white; 
  color: black;
  z-index: 10000;
}
#contenido-animacion #social-body span {
  color: white;
  display: inline-block;
  margin-left: 10px;
  padding-bottom: 10px;
  font-weight: bold;
}

@media only screen and (max-width: 500px) {
  #contenido-animacion #circulo-body i {font:600 normal 3.2vw/3.3vw arial, sans-serif;}
  #contenido-animacion .elastico1 {position: relative; left: 0; overflow: visible;}
}

/* Estilo para div que contiene etiquetas details */

#contenido-animacion .etiquetas {position: relative; width: 100%; max-width: 100%; transition: .7s .3s;}
#contenido-animacion .etiquetas details {display: block; position: relative;}
#contenido-animacion details.sin {margin-left: 30px;}
#contenido-animacion .etiquetas details summary {cursor: pointer; font-size: calc(var(--font-size-base) * 1.3); color: var(--secondary-color);}
#contenido-animacion .etiquetas .prueba {position: absolute; width: 100%; max-width: 1000px; background: var(--body-bg-pink); z-index: 150;}
#contenido-animacion .etiquetas .prueba img {display: block; height: 220px; margin: 60px 0 0 5px;}
#contenido-animacion .etiquetas .prueba .cuatro article img,
#contenido-animacion .etiquetas .prueba1 .cuatro1 article img {transform: scaleX(0.8);}
#contenido-animacion .etiquetas .prueba1 img {display: block; height: 0px; transition: .7s .7s;}
#contenido-animacion .etiquetas .prueba div article,
#contenido-animacion .etiquetas .prueba1 div article {display: flex; align-items: center;}
#contenido-animacion .etiquetas .prueba .cuatro article,
#contenido-animacion .etiquetas .prueba1 .cuatro1 article {transform: translateX(-30px);}
#contenido-animacion .etiquetas .prueba article p,
#contenido-animacion .etiquetas .prueba1 article p {font-size: var(--font-size-base); text-align: justify; max-width: 75%; margin-right: 10px;}
#contenido-animacion .etiquetas .con[open] > summary {position: relative;}
#contenido-animacion .etiquetas .con[open] ~ .info .prueba1 {transition: .7s .3s; font-size: var(--font-size-base); background: var(--body-bg-pink); z-index: 150;}
#contenido-animacion .etiquetas .con[open] ~ .info .prueba1 img {display: block; transition: .7s .3s; height: 220px; margin: 60px 0 0 5px;}
#contenido-animacion .etiquetas .flex {width: 100%; max-width: 100%;}

#contenido-animacion .mid {
  margin:50px auto 10px auto; 
  width:100%;
  max-width: 1000px;
  position:relative;
}
#contenido-animacion .mid .info {
  overflow:hidden; 
  position:relative;
}
#contenido-animacion .mid summary {
  cursor:pointer; 
  font:600 20px/24px 'Roboto', arial, sans-serif; 
  -webkit-tap-highlight-color: rgba(0,0,0,0); /* for iOS Safari */
}
#contenido-animacion .mid summary:focus {outline:none !important;} /* for iOS Safari */

#contenido-animacion .mid .prueba1 {
  display:block; 
  width:100%; 
  position: absolute; 
  bottom: 0; 
  z-index:1;
}
#contenido-animacion .mid .prueba1 p {
  font:300 16px/18px 'Roboto', arial, sans-serif !important; 
  text-align: justify;
}

#contenido-animacion .mid .info::after {
  width:100%; 
  transition:2s linear; 
  font:300 16px/0px 'Roboto', arial, sans-serif; 
  color:#0000; 
  white-space: pre-wrap; 
  position:relative; 
  display:block; 
  z-index:0; 
  content:"Cascading Style Sheet (CSS) is a style sheet language used for describing the presentation of a document written in a markup language such as HTML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.\a\a CSS is designed to enable the separation of presentation and content, including layout, colors, and fonts. This separation can improve content accessibility; provide more flexibility and control in the specification of presentation characteristics; enable multiple web pages to share formatting by specifying the relevant CSS in a separate .css file, which reduces complexity and repetition in the structural content; and enable the .css file to be cached to improve the page load speed between the pages that share the file and its formatting.\a\aSeparation of formatting and content also makes it feasible to present the same markup page in different styles for different rendering methods, such as on-screen, in print, by voice (via speech-based browser or screen reader), and on Braille-based tactile devices. CSS also has rules for alternate formatting if the content is accessed on a mobile device.\a\aThe name cascading comes from the specified priority scheme to determine which style rule applies if more than one rule matches a particular element. This cascading priority scheme is predictable.\a\aThe CSS specifications are maintained by the World Wide Web Consortium (W3C). Internet media type (MIME type) text/css is registered for use with CSS by RFC 2318 (March 1998). The W3C operates a free CSS validation service for CSS documents.\a\aIn addition to HTML, other markup languages support the use of CSS including XHTML, plain XML, SVG, and XUL.\a\aThis cascading priority scheme is predictable.\a\aThis cascading priority scheme is predictable.\a\aThis cascading priority scheme is predictable.\a\aThis cascading priority scheme is predictable.\a\aThis cascading priority scheme is predictable.\a\aThis cascading priority scheme is predictable.\a\aThis cascading priority scheme is predictable.\a\aThis cascading priority scheme is predictable.\a\aThis cascading priority scheme is predictable.\a\aThis cascading priority scheme is predictable.\a\aThis cascading priority scheme is predictable.\a\aThis cascading priority scheme is predictable.\a\aThis cascading priority scheme is predictable.\a\aThis cascading priority scheme is predictable.\a\aThis cascading priority scheme is predictable.\a\aThis cascading priority scheme is predictable.\a\aThis cascading priority scheme is predictable.\a\aThis cascading priority scheme is predictable.\a\aThis cascading priority scheme is predictable.\a\aThis cascading priority scheme is predictable.\a\aThis cascading priority scheme is predictable.\a\aThis cascading priority scheme is predictable."
;}

#contenido-animacion .mid details[open] + .info::after {line-height:18px;}

/* Estilo para la animación de los iconos que parecen ojos */

#contenido-animacion #social1 {
  position: relative;
  margin: 50px auto;
  width: 100%;
  max-width: 400px;
  height: 200px;
  transition: 1s linear .2s;
}
#contenido-animacion #social1 div {
  position: absolute;
  display: block;
  width: auto;
  max-height: 80px;
  border: 4px solid #69C2;
  box-shadow: inset 3px 3px 6px var(--card-shadow);
  background: #69C2;
  border-radius: 10%;
  overflow: hidden;
  transition: 1s linear .2s;
  animation: transp 1s infinite alternate;
}
@keyframes transp {
  0% {background: #69C2; opacity: 1;}
  100% {background: transparent; opacity: 0.5;}
}
#contenido-animacion #social1 div b {
  display: inline-block;
  position: absolute;
  width: 100%;
  height: 1px;
  background: linear-gradient(to left, white 2.5%, black 5%, white 7.5%, black 10%, white 12.5%, black 15%, white 17.5%, black 20%, white 22.5%, black 25%, white 27.5%, black 30%, white 32.5%, black 35%, white 37.5%, black 40%, white 42.5%, black 45%, white 47.5%, black 50%, white 52.5%, black 55%, white 57.5%, black 60%, white 62.5%, black 65%, white 67.5%, black 70%, white 72.5%, black 75%, white 77.5%, black 80%, white 82.5%, black 85%, white 87.5%, black 90%, white 92.5%, black 95%, white 97.5%);
  border-radius: 100%;
  opacity: 0;
  transition: .5s .3s;
}
#contenido-animacion #social1 div b.pestaña-sup {left: 0%; right: 0%; top: -8px; transform-origin: 50% 0%;}
#contenido-animacion #social1 div b.pestaña-inf {left: 0%; right: 0%; bottom: -8px; transform-origin: 50% 100%;}
#contenido-animacion #social1 div:hover b.pestaña-sup {transition: .5s .3s; height: 5px; transform: scaleY(2) skewY(-5deg); opacity: 1; z-index: 10000;}
#contenido-animacion #social1 div:hover b.pestaña-inf {transition: .5s .3s; height: 5px; transform: scaleY(2) skewY(-5deg); opacity: 1; z-index: 10001;}
#contenido-animacion #social1 div a {
  display: block;
  font-size: calc(var(--font-size-base) * 1.2);
  width: auto;
  height: 100%;
  padding-inline: 5px;
  position: relative;
  color: var(--secondary-color);
  text-align: center;
  border: 2px solid black;
  transition: 1s linear .2s;
}

#contenido-animacion #social1:hover div a {
  transition: all 0.6s linear 0.8s;
  text-decoration: none;
  display: flex;
  justify-content: flex-start;
  gap: 10px;
  border-radius: 20%;
  padding: 5px;
  overflow: hidden;
  z-index: 100;
}
#contenido-animacion #social1:hover a.face1 {color: white;background: #000099;}
#contenido-animacion #social1:hover a.twit1 {color: black;background: #3399FF;}
#contenido-animacion #social1:hover a.gmail1 {color: black;background: #CC3333;}
#contenido-animacion #social1:hover a.link1 {color: white;background: #006666;}
#contenido-animacion #social1 div:hover span {transition: all 0.2s ease 0.1s;transform: scale(0);}
#contenido-animacion #social1 .facebook {top: 0;left: 0; /*animation: cerrar1 1.5s linear 1s infinite alternate paused;*/}

#contenido-animacion #social1 .twitter {top: 0;right: 0;}
#contenido-animacion #social1 .gemail {bottom: 0;left: 0;}
#contenido-animacion #social1 .linkedin {bottom: 0;right: 0;}
#contenido-animacion #social1:hover .facebook {
  transition: all 0.8s linear;
  transform: translate(100px, 10px) scale(1.2) rotate(5deg);
  border-radius: 20%;
}
#contenido-animacion #social1 .facebook:hover {
  transition: all .3s;
  transform: translate(100px, 10px) scaleX(0.8);
  border-radius: 100%;
  animation-play-state: running;
}
#contenido-animacion #social1 .facebook:hover .face1 {
  transition: all 0.5s ease 0.3s;
  transform: translate(30px, 0px) rotate(-5deg);
  width: 50%;
  height: 2em;
  border-radius: 100%;
  background: white;
}
#contenido-animacion .face1:hover i {
  transition: all 0.6s ease 0.3s;
  transform: translate(20px, 10px) scale(1.4);
  color: #000099;
}
#contenido-animacion #social1:hover .twitter {
  transition: all 0.5s linear;
  transform: translate(0px, 80px) scale(1.2) rotate(-5deg);
  border-radius: 20%;
}
#contenido-animacion #social1 .twitter:hover {
  transition: all .3s;
  transform: translate(0px, 80px) scaleX(0.8);
  border-radius: 100%;
}
#contenido-animacion #social1 .twitter:hover .twit1 {
  transition: all 0.5s ease 0.3s;
  transform: translate(25px, 0px) rotate(5deg);
  width: 50%;
  height: 2em;
  border-radius: 100%;
  background: black;
}
#contenido-animacion .twit1:hover i {
  transition: all 0.6s ease 0.3s;
  transform: translate(15px, 10px) scale(1.4);
  color: #3399FF;
  background: white;
}
#contenido-animacion #social1:hover .gemail {
  transition: all 0.5s linear;
  transform: translate(-15px, -65px) scale(1.2) rotate(-5deg);
  border-radius: 20%;
}
#contenido-animacion #social1 .gemail:hover {
  transition: all .3s;
  transform: translate(-15px, -65px) scaleX(0.8);
  border-radius: 100%;
}
#contenido-animacion #social1 .gemail:hover .gmail1 {
  transition: all 0.5s ease 0.3s;
  transform: translate(25px, 0px) rotate(5deg);
  width: 50%;
  height: 2em;
  border-radius: 100%;
  background: black;
}
#contenido-animacion .gmail1:hover i {
  transition: all 0.6s ease 0.3s;
  transform: translate(12px, 10px) scale(1.4);
  color: #CC3333;
}
#contenido-animacion #social1:hover .linkedin {
  transition: all 0.8s linear;
  transform: translate(-140px, 0px) scale(1.2) rotate(5deg);
  border-radius: 20%;
}
#contenido-animacion #social1 .linkedin:hover {
  transition: all .3s;
  transform: translate(-140px, 0px) scaleX(0.8);
  border-radius: 100%;
}
#contenido-animacion #social1 .linkedin:hover .link1 {
  transition: all 0.5s ease 0.3s;
  transform: translate(30px, 0px) rotate(-5deg);
  width: 50%;
  height: 2em;
  border-radius: 100%;
  background: white;
}
#contenido-animacion .link1:hover i {
  transition: all 0.6s ease 0.3s;
  transform: translate(20px, 10px) scale(1.4);
  color: #006666;
}

/* CSS para el marco con texto deslizante a izquierda y derecha */

#contenido-animacion .marcos {
  width: 98%;
  max-width: 1000px;
  margin: 10px auto;
  border: 3px solid #888;
  box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.5);
  background: #69C2;
}
#contenido-animacion .marco {
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  overflow: hidden;
  --retardo: 2s;
  --estado: running;
}
#contenido-animacion .marco div {
  display: inline-block;
  text-align: center;
  position: relative;
  min-width: 100%;
  padding: 0.5px;
  white-space: nowrap;
}

#contenido-animacion .marco.uno div {
  animation: izquierda-marco var(--velocidad) infinite var(--estado) linear var(--retardo);
}

#contenido-animacion .marco.dos div {
  animation: derecha-marco var(--velocidad) infinite var(--estado) linear var(--retardo);
}

#contenido-animacion .marco.tres div {
  animation: izquierda1-marco var(--velocidad) infinite var(--estado) linear var(--retardo);
}
#contenido-animacion .marco div a {color: #CC0;}
#contenido-animacion .marco div a:hover {text-decoration: none;}
#contenido-animacion .marco:hover div {--estado: paused;}
#contenido-animacion .marco.uno {
  --velocidad: 20s; 
  color: #C60;
  font: 600 20px/30px arial, sans-serif;
}
#contenido-animacion .marco.dos {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-around; 
  --velocidad: 14s;
  color: #69C;
  font: 600 20px/30px impact;
}
#contenido-animacion .marco.tres {
  --velocidad: 18s;
  color: #3C3;
  font: 600 30px/40px arial, sans-serif;
}
@keyframes izquierda-marco {
  0% {transform: translateX(20%);}
  100% {transform: translateX(-200%);}
}
@keyframes derecha-marco {
  0% {transform: translateX(-100%);}
  100% {transform: translateX(120%);}
}
@keyframes izquierda1-marco {
  0% {transform: translateX(20%);}
  100% {transform: translateX(-250%);}
}

/* Pruebas con transform en div con distinta posicion */

#contenido-animacion #calendario {
  display: flex;
  flex-direction: column;
  gap: 200px;
  width: 100%;
  max-width: 90%;
  margin: 100px auto;
  padding-bottom: 150px;
  background: pink;
  transform-style: preserve-3d;
  perspective: 400px;
}

#contenido-animacion .pos-relative {
  position: relative;
  margin: 0 auto;
  width: 100%;
  max-width: 350px;
  height: 250px;
  background: lightblue;
  text-align: center;
  color: black;
  border: 1px solid black;
  border-radius: 10%;
  cursor: pointer;
  transform-origin: 0% 0%;
  transform: translate3d(100px, 0, 10px) rotate3d(1, 0, 1, 15deg) skewX(-10deg) skewY(2deg);
  transition: all 1.5s linear 0s;
}

#contenido-animacion .texto-pos span {
  width: 100%;
  max-width: 100%;
  display: grid; 
  grid-template-columns: repeat(7, 1fr);
  font-size: var(--font-size-base);
  font-family: Roboto, arial;
}
#contenido-animacion .texto-pos p {margin-left: 0 !important;}
#contenido-animacion .texto-pos p.febrero {position: absolute; top: 0%; left: 0%; z-index: -1; opacity: 0;}
#contenido-animacion .texto-pos span.febrero {position: absolute; top: 20%; z-index: -1; opacity: 0;}
#contenido-animacion .texto-pos span i {
  display: inline-block;
  font-size: var(--font-size-base);
  border: 2px solid var(--card-border-color);
  padding: 2px;
  transform: rotate3d(1, 1, 1, -15deg) skewY(-5deg);
}

#contenido-animacion .texto-pos {
  width: 100%;
  max-width: 90%;
  margin: 50px auto;
  position: relative;
  border: 1px solid black;
  background: white;
  transform: translate3d(0px, 0px, 10px) rotate(2deg) skewX(-5deg) skewY(-5deg);
/*  animation: pasarhoja 1.5s linear 1 forwards paused; */
}

#contenido-animacion .pos-relative:hover {
  transition: 1.5s;
  transform-origin: 50% 100%;
  transform: translate3d(160px, 0px, 40px) rotate3d(1, 1, 1, 350deg) skewX(-20deg) skewY(-20deg);
  /* animation-play-state: running; */
}

/*
  @keyframes pasarhoja {
    0% {transform-origin: 50% 100%; transform: translate3d(100px, 0, 20px) rotate3d(1, 1, 1, 20deg) skewX(-20deg) skewY(2deg);}
    100% {transform: translate3d(160px, 0px, 40px) rotate3d(1, 1, 1, 350deg) skewX(-20deg) skewY(-20deg);}
  }
*/

#contenido-animacion .pos-relative:hover .texto-pos {
  transition: all 2s linear 0.5s;
  transform: translate3d(0px, 0px, 10px);
}
#contenido-animacion .pos-relative:hover p.enero,
#contenido-animacion .pos-relative:hover span.enero {transition: .3s; opacity: 0;}
#contenido-animacion .pos-relative:hover p.febrero,
#contenido-animacion .pos-relative:hover span.febrero {position: absolute; transition: .3s; z-index: 100; opacity: 1;}
#contenido-animacion .pos-absolute:hover {
  transform: translate3d(-250px, 50px, 20px) rotate3d(1, 1, 1, 210deg);
}

#contenido-animacion .pos-absolute {
  margin: 50px auto;
  width: 150px;
  height: 200px;
  background: lightgreen;
  text-align: center;
  color: black;
  border: 1px solid black;
  cursor: pointer;
  transform-origin: 50% 0%;
  transform: translate3d(50px, 0px, 4px) rotate3d(1, 1, 1, 30deg) skewX(-20deg) skewY(-20deg);
  transition: all 2s ease 0s;
}

/* PAGINA PROPIEDAD TRANSITION */

#contenido-transition span {display: inline-block; font-weight: bold;}

#contenido-transition code:hover {
    transition: all 1s ease 0.1s;
    background-color: rgb(10, 10, 10);
    background-size: 100% 20%;
    line-height: 2em;
    color: white;
    text-decoration: none;
    left: 5px;
    bottom: 5px;
}

/* Estilo para la lista animada de propiedades */

#contenido-transition .texto1 {
    border-top: calc(var(--border-width) * 2) solid var(--card-border-color);
    border-bottom: calc(var(--border-width) * 2) solid var(--card-border-color);
    margin: 0 0 30px 20px;
    position: relative;
    display: flex; 
    flex-direction: column; 
    align-items: center;
    padding-bottom: 30px;
}
#contenido-transition .texto1 h3 {
    display: inline-block;
    position: relative;
    text-align: left;
    color: burlywood;
    opacity: 0.2;
}
#contenido-transition .texto1 ul {
    list-style: none;
    width: 100%;
    max-width: 75%;
    height: auto;
    display: flex;
    flex-flow: row wrap;
    align-items: flex-start;
    gap: 15px;
    opacity: 0.2;
}
#contenido-transition .texto1:hover > ul {opacity: 1;transition: opacity 1s linear 0.5s;}
#contenido-transition .texto1:hover > h3 {opacity: 1;}
#contenido-transition .texto1 ul li {display: inline-block; position: relative; font-size: calc(var(--font-size-base) * 1.1); /* border: calc(var(--border-width) * 2) solid var(--card-border-color); */}
.b-c {background-color: rgb(150, 73, 73); color: white;}
.b-c:hover{transition: background-color, color 1s linear 0s;background-color: chartreuse;color:black;}
.bor {border: none;}
.bor:hover {transition: border 1s linear 0s;border: calc(var(--border-width) * 3) solid var(--primary-color);}
.bor-ra {border: var(--border-width) solid var(--card-border-color); border-radius: 0%;}
.bor-ra:hover {transition: all 1s linear 0s;border-radius: 30%; border: calc(var(--border-width) * 3) solid var(--secondary-color);}
.col {color:darkorange;}
.col:hover {transition: color 1s linear 0s;color:deepskyblue;}
.top {top: 0;}
.top:hover {transition: top 1s linear 0s;top: -10px;}
.bot {bottom: 0;}
.bot:hover {transition: bottom 1s linear 0s;bottom: -10px;}
.left {left: 0;}
.left:hover {transition: left 1s linear 0s;left: -10px;}
.rig {right: 0;}
.rig:hover {transition: right 1s linear 0s;right: -10px;}
.box-sh {box-shadow: none;}
.box-sh:hover {transition: box-shadow 1s linear 0s;box-shadow: 0px 0px 3px black;}
.width {width: auto;}
.width:hover {transition: width 1s linear 1s;width: 80px;}
.height {height: auto;}
.height:hover {transition: height 1s linear 0s;height: 80px;}
.line-h {line-height: normal;}
.line-h:hover {transition: line-height 1s linear 0s;line-height: 40px;}
.margin {margin: 0px; border: 1px solid black;}
.margin:hover {transition: margin 1s linear 0s; margin: 10px;}
.opac {opacity: 1;}
.opac:hover {transition: opacity 1s linear 0s;opacity: 0.3;}
.letter-s {letter-spacing: normal;}
.letter-s:hover {transition: letter-spacing 1s linear 0s;letter-spacing: 2px;}
.word-s {word-spacing: normal;}
.word-s:hover {transition: word-spacing 1s linear 0s;word-spacing: 15px;}
.padding {padding: 0; border: 1px solid black;}
.padding:hover {transition: padding 1s linear 0s;padding: 10px;}
.text-s {text-shadow: none;}
.text-s:hover {transition: text-shadow 1s linear 0s;text-shadow: red 0 -2px;}
.v-align {vertical-align: top;}
.v-align:hover {transition: vertical-align 1s linear 0s;vertical-align: bottom;}
.vis {visibility: visible;}
.vis:hover {transition: visibility 1s linear 0s;visibility: hidden;}
.z-ind {z-index: -100;}
.z-ind:hover {transition: z-index 1s linear 0s;z-index: 10;}
.font-f {font-family: Arial;}
.font-f:hover {transition: font-family 1s linear 0s;font-family: Impact;}

#contenido-transition .lista, #contenido-transition .lista1 {width: 100%;}
#contenido-transition .timing, #contenido-transition .steps {list-style: none;}
#contenido-transition .timing li {margin: 25px 0px 25px -30px;padding: 2px;}
#contenido-transition #ease {font-size:1.1em; color: black;transition: 2s ease 0.5s;}
#contenido-transition #ease code {border: 1px solid black;}
#contenido-transition #ease:hover {
   transition: all 4s ease;
   color: maroon;
   line-height: 2em;
   letter-spacing: 2.6px;
   font-size: 20px;
   transform: translate(-10px, 0px);
}
#contenido-transition #linear {font-size: 1.1em; color: black;transition: 2s linear 0.5s;}
#contenido-transition #linear code {border: 1px solid black;}
#contenido-transition #linear:hover {
   transition: all 4s linear;
   color: blue;
   line-height: 2em;
   letter-spacing: 4px;
   font-size: 20px;
   transform: translate(-10px, 0px);
}
#contenido-transition #ease-in{font-size: 1.1em;color: black;transition: 2s ease-in 0.5s;}
#contenido-transition #ease-in code {border: 1px solid black;}
#contenido-transition #ease-in:hover {
   transition: all 4s ease-in;
   color: grey;
   line-height: 2em;
   letter-spacing: 2.6px;
   font-size: 20px;
   transform: translate(-30px, 0px);
}
#contenido-transition #ease-out {font-size: 1.1em;color: black;transition: 2s ease-out 0.5s;}
#contenido-transition #ease-out code {border: 1px solid black;}
#contenido-transition #ease-out:hover {
   transition: all 4s ease-out;
   color: purple;
   line-height: 2em;
   letter-spacing: 2.5px;
   font-size: 20px;
   transform: translate(-40px, 0px);
}
#contenido-transition #ease-in-out {font-size: 1.1em;color: black; transition: 2s ease-in-out 0.5s;}
#contenido-transition #ease-in-out code {border: 1px solid black;}
#contenido-transition #ease-in-out:hover {
   transition: all 4s ease-in-out;
   color: black;
   letter-spacing: 2.3px;
   line-height: 2em;
   font-size: 19px;
   transform: translate(-50px, 0px);
}
#contenido-transition #cubic-bezier {font-size: 1.2em;color: black;transition: 2s cubic-bezier(0.2, 0.4, 0.7, 0.8) 0.5s;}
#contenido-transition #cubic-bezier:hover {
   transition: all 4s cubic-bezier(0.2, 0.4, 0.7, 0.8);
   color: navy;
   letter-spacing: 4px;
   font-size: 24px;
   transform: translate(20px, 0px);
} 
#contenido-transition #cbezier {font-size: 1.2em;color: black;transition: 2s cubic-bezier(0.2, 0.4, 0.7, 0.8) 0.5s;}
#contenido-transition #cbezier:hover {
   transition: all 4s cubic-bezier(0, -1, 1, 2);
   color: navy;
   letter-spacing: 4px;
   font-size: 24px;
   transform: translate(20px, 0px);
}

#steps code, #steps1 code, #steps2 code, 
#steps3 code, #steps4 code, #steps5 code, 
#steps6 code, #steps7 code, #steps8 code {display: inline-block; position: relative; left:0;transition: all 1.5s;}

#contenido-transition .steps p {margin:0;}
#contenido-transition .lista1:hover #steps code {transition: left 2s steps(5, jump-start) 0s;left: 80%;}
#contenido-transition .lista1:hover #steps1 code {transition: left 2s steps(5, jump-end) 0s;left: 80%;}
#contenido-transition .lista1:hover #steps2 code {transition: left 2s steps(5, jump-none) 0s;left: 80%;}
#contenido-transition .lista1:hover #steps3 code {transition: left 2s steps(5, jump-both) 0s;left: 80%;}
#contenido-transition .lista1:hover #steps4 code {transition: left 2s steps(5) 0s;left: 80%;}
#contenido-transition .lista1:hover #steps5 code {transition: left 2s steps(5, start) 0s;left: 80%;}
#contenido-transition .lista1:hover #steps6 code {transition: left 2s steps(5, end) 0s;left: 80%;}
#contenido-transition .lista1:hover #steps7 code {transition: left 2s step-start 0s;left: 80%;}
#contenido-transition .lista1:hover #steps8 code {transition: left 2s step-end 0s;left: 80%;}

#contenido-transition .conclusion {position: relative;}

/* PAGINA PROPIEDAD ANIMATION */

#contenido-animation .saludo {transform-style: preserve-3d;}
#contenido-animation .saludo h1 {
  transition: 0.5s cubic-bezier(.58,3,0.5,0.5) 0s;
  animation-duration: 3s;
  animation-name: slidein;
}
@keyframes slidein {
  from {margin-left: 100%; width: 300%;}
  to {margin-left: 0%; width: 200%;}
}
#contenido-animation .saludo h1:nth-child(2) {
  display: block;
  padding: 50px;
  animation-delay: 0.5s;
  white-space: nowrap;
  perspective: 30px;
  transition: .3s linear;
}

#contenido-animation .saludo h1:nth-child(2):hover {animation: largo-saludo 2s cubic-bezier(.58,3,0.5,0.5) 3 0s alternate forwards;}

@keyframes largo-saludo {
  from {padding-bottom: 0; letter-spacing: normal; text-shadow: none; box-shadow: none; transform: none;}
    to {padding-bottom: 50px; letter-spacing: 10px; text-shadow: 5px 5px 10px currentColor;background: rgba(150, 150, 150, .3); box-shadow: inset 2px 5px 10px rgba(0,0,0,.2), 5px 5px 10px rgba(0,0,0,.2); transform: translateX(30px) rotateX(3deg) skewY(-10deg);}
}

#contenido-animation .saludo h1:nth-child(2) span {
  display: inline-block;
  font-size: 4rem;
  color: rgba(255, 255, 255, 0.5);
 -webkit-text-stroke: 1px #000000; 
}
#contenido-animation .saludo h1:nth-child(2):hover span:nth-child(1) {
  animation: spin-saludo 1.5s cubic-bezier(.58,3,0.5,0.5) 1 0s forwards;
}
@keyframes spin-saludo {
  from {font-size: 4rem; color: rgba(255, 255, 255, 0.5); transform: none;}
   to {font-size: 5rem; color: rgba(255, 0, 0, 0.5); transform: rotateY(360deg) rotateX(3deg) skewY(5deg) translateY(10px);}
}
#contenido-animation .saludo h1:nth-child(2):hover span:nth-child(2) {
  animation: spin1-saludo 0.8s cubic-bezier(.58,3,0.5,0.5) 1 1.5s forwards;
}
@keyframes spin1-saludo {
  from {font-size: 4rem; color: rgba(255, 255, 255, 0.5); transform: none;}
   to {font-size: 3rem; color: rgba(0, 255, 0, 0.5); transform: rotateY(360deg) rotateX(-3deg) skewY(-5deg);}
}
#contenido-animation .saludo h1:nth-child(2):hover span:nth-child(3), 
#contenido-animation .saludo h1:nth-child(2):hover span:nth-child(4) {
  animation: spin2-saludo 0.8s cubic-bezier(.58,3,0.5,0.5) 1 2.2s forwards;
}
@keyframes spin2-saludo {
  from {font-size: 4rem; color: rgba(255, 255, 255, 0.5); transform: none;}
   to {font-size: 3rem; color: rgba(0, 0, 255, 0.5); transform: rotateY(360deg) rotateX(3deg) skewY(5deg);}
}
#contenido-animation .saludo h1:nth-child(2):hover span:nth-child(5) {
  animation: spin3-saludo 0.8s cubic-bezier(.58,3,0.5,0.5) 1 3s forwards;
}
@keyframes spin3-saludo {
  from {font-size: 4rem; color: rgba(255, 255, 255, 0.5); transform: none;}
   to {font-size: 3rem; color: rgba(255, 255, 0,  0.5); transform: rotateY(360deg) rotateX(-3deg) skewY(-5deg);}
}
#contenido-animation .saludo h1:nth-child(2):hover span:nth-child(6) {
  animation: spin4-saludo 0.8s cubic-bezier(.58,3,0.5,0.5) 1 3.8s forwards;
}
@keyframes spin4-saludo {
  from {font-size: 4rem; color: rgba(255, 255, 255, 0.5); transform: none;}
   to {font-size: 5rem; color: rgba(100, 100, 100, 0.5); transform: rotate(350deg) skewY(-5deg) translate(-200px, 50px);}
}
#contenido-animation .saludo h1:nth-child(2):hover span:nth-child(7),
#contenido-animation .saludo h1:nth-child(2):hover span:nth-child(8) {
  animation: spin5-saludo 0.8s ease-out 1 4.6s forwards;
}
@keyframes spin5-saludo {
  from {font-size: 4rem; color: rgba(255, 255, 255, 0.5); transform: none; perspective: 12px;}
   to {font-size: 3rem; color: rgba(200, 0, 200, 0.5); transform: rotateX(-360deg) skewY(-20deg) translate(-200px, 20px); perspective: 3px;}
}
#contenido-animation .saludo h1:nth-child(2):hover span:nth-child(9),
#contenido-animation .saludo h1:nth-child(2):hover span:nth-child(10) {
  animation: spin6-saludo 0.8s ease-in 1 4.6s forwards;
}
@keyframes spin6-saludo {
  from {font-size: 4rem; color: rgba(255, 255, 255, 0.5); transform: none; perspective: 12px;}
   to {font-size: 3rem; color: rgba(100, 200, 100, 0.5); transform: rotateY(360deg) skewY(-20deg) translate(-200px, 20px); perspective: 3px;}
}

#contenido-animation .card_header {
  font-size: calc(var(--font-size-base) * 1.4);
  text-align:left;
  animation: moverfondo 1s linear 0s infinite alternate paused;
  text-wrap: nowrap; 
}

@keyframes moverfondo {
  0% {box-shadow: none; transform: none;}
  100% {box-shadow: -3px -3px 4px var(--card-shadow); transform: scaleY(1.2);}
}

#contenido-animation .card_header:hover {animation-play-state: running;}

#contenido-animation h1, #contenido-animation h2 {
  position: relative;
  color: var(--card-text-color); 
  display: inline-block; 
  margin-left: 30px;
}

#contenido-animation h1::after, 
#contenido-animation h2::after {
  /* background: var(--body-bg); */
  position: absolute;
  left: 0;
  display: inline-block;
  overflow: hidden;
  width: 0%;
  white-space: pre;
  word-break: normal;
  content: attr(data-text);
  transition-timing-function: cubic-bezier(0.39, 0.13, 0.55, 0.88);
  transition-duration: 0.7s;
  transition-property: width;
  will-change: width;
  -webkit-text-fill-color: var(--secondary-color);
  -webkit-text-stroke: unset;
}

#contenido-animation h1:hover::after, 
#contenido-animation h2:hover::after {width: 100%;}

/* Estilo del div que contiene las animaciones y los divs individuales */

#animations {display: flex; flex-direction: column; gap: 100px;}

#primer-animation, 
#segunda-animation, 
#tercera-animation, 
#cuarta-animation {
  width: 100%;
  max-width: 1200px;
  padding: 20px 0;
  display: flex;
  gap: 50px;
  justify-content: space-between;
  align-items: center;
  /*grid-template-columns: repeat(2, minmax(400px, 1fr)) 70px; 
  grid-template-rows: auto;*/
  transform-style: preserve-3d;
  perspective: 500px;
}

/* CSS para imagen y texto de globo terraqueo */

#primer-animation #web {
  position: relative;
  top: -25%;
  left: 5%;
  width: 100%;
  max-width: 450px;
  z-index: 10;
  transform-style: preserve-3d;
  perspective: 500px; 
  transform: translate3d(100px, 0px, 10px) rotate(-15deg) skewX(-15deg) skewY(-15deg);
}
#primer-animation #web #text-web {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
  background: black;
  text-align: center;
}
#primer-animation #web #img-web {
  width: 250px;
  overflow: hidden;
  transform: translate3d(-10px, 20px, 5px) skewX(-20deg) skewY(-20deg);
}
#primer-animation #web #img-web img {
  width: 250px;
  margin: 0;
  border: transparent;
  border-radius: 10%;
  box-shadow: none;
  overflow: hidden;
}
#primer-animation #text-web p {
  display: block;
  height: auto;
  color: white;
  font-size: 1em;
  padding-top: 0.5em;
}
#primer-animation #text-web span {
  display: block;
  height: 0;
  width: 0;
  color: white;
  padding-top: 0.5em;
  margin-top: 0.5em;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
}
#primer-animation #web:hover {
  transition: all .5s linear 0s;
  background: transparent;
  border: none;
  cursor: pointer;
}
#primer-animation #web:hover #img-web {
  transition: all 1s linear 0s;
  width: 250px;
  height: auto;
  margin: 0;
  background: lightgrey;
  border: transparent;
  border-radius: 40%;
  box-shadow: 2px 2px 10px rgba(65, 105, 225, 0.8);
}
#primer-animation #web:hover #img-web img {
  animation: transparencia 1s linear 0s infinite,
             bradio 1.5s linear 1s infinite,
             mov 2s ease 1s infinite alternate;
}
@keyframes transparencia {
   from {opacity: 1;}
    to {opacity: 0.2;}
}
@keyframes bradio {
   from {border-radius: 0;}
     to {border-radius: 40%;}
}
@keyframes mov {
   from {transform: translate3d(-10px, 0px, 5px) skewX(-20deg);}
    to {transform: scale(-1) rotateY(-4deg) skewX(20deg);}
}
#primer-animation #web #img-web:hover {
  transition: all 0.7s ease 1s;
  transform: translate3d(-30px, 80px, 5px) skewX(-20deg) skewY(-20deg);
}
#primer-animation #web:hover #text-web {
  display: block;
  transition: all 1s linear 0s;
  width: 60%;
  height: auto;
  overflow: visible;
  visibility: visible;
  opacity: 1;
  animation: bgcolor 4s linear 0s infinite,
             bradius 2s linear 1s infinite,
             fsize 3s linear 2s infinite;
  transform-origin: 0% 0%;
  transform: translate3d(-30px, 170px, 10px) scale(1.1) rotate3d(1, 1, 1, 10deg);
  z-index: 10;
}
@keyframes bgcolor {
   from {background: black;}
    to {background: grey;}
}
@keyframes bradius {
   from {border-radius: 0;}
     to {border-radius: 20%;}
}
@keyframes fsize {
   from {font-size: 1em;}
     to {font-size: 0.9em;}
}
#primer-animation #text-web:hover p {
  animation: color-text-web 0.5s linear 1.5s infinite;
}
@keyframes color-text-web {
   from {color: white;}
     to {color: gold;}
}
#primer-animation #text-web:hover span {
  transition: all 1s linear 0s;
  display: block;
  height: auto;
  width: auto;
  padding: 3px;
  background: lightgrey;
  opacity: 1;
  overflow: visible; 
  visibility: visible; 
  color: black;
  border-radius: 10%;
} 
#primer-animation #text-web span:hover {
  animation: bgcol 4s linear 0.5s infinite;
  transition: all 1s linear 0.2s;
  display: block; 
  transform-origin: 0% 0%;
  transform: translate3d(-120px, -50px, 8px) scale(1) rotate3d(1, 1, 1, -12deg) skewY(20deg);
}
@keyframes bgcol {
  from {background: lightgrey; color: black;}
  to {background: white; color: lightgrey; text-transform: uppercase; font-weight: bold;}
}

/* css para el reflejo, que quiero hacer solo con animaciones */

#primer-animation #web1 {
  position: relative;
  width: 100%; 
  max-width: 400px;
  padding-bottom: 70px;
  transform-style: preserve-3d;
  perspective: 500px;
  animation: izq-web1 4s infinite alternate paused;
}
@keyframes izq-web1 {
  from {transform: translate(0, 0);}
   to {transform: translate(100px, 0);}
}

#primer-animation #web1 #text-web1 {
  position: absolute;
  width: auto;
  height: auto;
  padding: 10px;
  overflow: hidden;
  opacity: 0;
  animation: ancho-web1 4s ease infinite paused;
}
@keyframes ancho-web1 {
  from{overflow: hidden; opacity: 0;}
    to{overflow: visible; opacity: 1;}
}
#primer-animation #web1 #text-web1 #parrafo {
  color: white;
  opacity: 1;
  font-size: 0px;
  line-height: 0px;
  font-weight: bold;
  text-align: center;
  letter-spacing: normal;
  text-transform: none;
  transform: translate3d(0, 0, 0) rotate3d(1, 0, 1, -12deg) scale(0.5);
  animation: p-estirao 4s ease infinite paused;
}
@keyframes p-estirao {
  from{color: white;font-size: 0px;line-height: 0px;letter-spacing: normal;transform: translate3d(0, 0, 0) rotate3d(1, 0, 1, -12deg) scale(0.5);}
   to{color: maroon;box-shadow: 2px 2px 10px rgba(65, 105, 225, 0.8);font-size: var(--font-size-md);line-height: var(--line-height-base);letter-spacing: 5px;transform: translate3d(0, 150px, 3px) rotate3d(1, 1, 1, -12deg) skewX(-6deg) scale(1);}
}
#primer-animation #web1 #text-web1 #span {
  display: block;
  width: 100%;
  max-width: 90%;
  opacity: 1;
  font-size: 0px;
  line-height: 0px;
  color: rgba(255,255,255,0.5);
  margin: 10px 0 10px 20px;
  padding: 10px;
  transform: translate3d(0, 0, 0) rotate3d(1, 1, 1, 12deg) scale(0.5);
  animation: arriba-span 8s cubic-bezier(.58,3,0.5,0.5) infinite paused;
}
@keyframes arriba-span {
   0% {font-size: 0px;line-height: 0px;transform: translate3d(0, 0, 0) rotate3d(1, 1, 1, 12deg) scale(0.5);}
   20% {font-size: var(--font-size-sm);line-height: var(--line-height-base);transform: translate3d(0, -40px, 5px) rotate3d(1, 1, 1, 12deg) scale(0.6);}
   40% {font-size: var(--font-size-base);line-height: calc(var(--line-height-base) * 1.1);transform: translate3d(0, -80px, 10px) rotate3d(1, 1, 1, 20deg) scale(0.8);}
   60%, 100% {font-family: var(--font-family-alt);font-size: var(--font-size-md);line-height: calc(var(--line-height-base) * 1.2);background: rgba(0, 0, 0, .6);z-index: 100;transform: translate3d(0, -100px, 15px) rotate3d(1, 0, 1, 20deg) scale(1);}
}
#primer-animation #web1 #img-web1 {
  position: absolute;
  border: 1px solid black;
  border-radius: 20%;
  overflow:hidden;
  box-shadow: 4px 4px 10px rgba(65, 105, 225, 0.8);
  transform: scale(-1) rotate(-10deg) skewX(-10deg) skewY(-10deg);
  animation: giro-web1 4s cubic-bezier(.58,3,0.5,0.5) infinite paused;
}
@keyframes giro-web1 {
  from{border-radius: 20%;transform: scale(-1) rotate(-10deg) skewX(-10deg) skewY(-10deg);}
    to{border-radius: 50%;z-index: -1;transform: scale(1) rotate(10deg) skewX(10deg) skewY(10deg);}
}
#primer-animation #web1 #img-web1 img{width: 100%; aspect-ratio: 4/3;}

/* Estilo para la imagen y texto html */

#segunda-animation #html {
  position: relative;
  margin-top: 100px;
  left: 3%;
  width: 100%;
  max-width: 300px;
  transform: translate3d(100px, -100px, 15px);
}
#segunda-animation #html {transform: scale(-1);}
#segunda-animation #html:hover {
  transform: translate3d(-30px, -30px, 10px) scale(1) rotate(-4deg) skewX(-25deg) skewY(-25deg);
  transition: all 1.5s linear 0.2s;
}
#segunda-animation #html img {display: block; margin-left: 20px;}
#segunda-animation #html p {
  display: block;
  height: 3.5em;
  margin-left: 30px;
  font-size: 0.7em;
  background: transparent;
  text-align: center;
  color: black;
  opacity: 0.5;
}
#segunda-animation #html:hover p {
  transition: all 2s linear 1s;
  animation: parpadeo-parrafo 0.6s linear 3.2s 5,
             cambiocolor 1s linear 3.2s infinite;
  font-family: impact;
  font-size: 1em;
  background: black;
  color: lightblue;
  letter-spacing: 1.2px;
  box-shadow: 2px 2px 10px rgba(65, 105, 225, 0.8);
  border-radius: 20px;
  opacity: 1;
  transform: translate3d(10px, 5px, 5px) scale3d(1.2, 1.2, 2) rotate3d(1, 1, 1, 6deg) skewX(40deg) skewY(25deg);
}
@keyframes parpadeo-parrafo {
  from {opacity: 1;}
    to {opacity: 0;}
}
@keyframes cambiocolor {
  from {color: lightblue;}
    to {color: orange;}
}
#segunda-animation #html:hover #img-html {
  transition: all 1.6s linear 0.2s;
  transform: translateY(30px) scale(0.9);
  box-shadow: 2px 2px 10px rgba(65, 105, 225, 0.8);
  background: white;
}

/* reflejo del html */

#segunda-animation #html1 {position: relative; margin-top: 100px;}
#segunda-animation #html1 #img-html1 {border: none; border-radius: 0%; box-shadow: none; transform: scale(-1); animation: revuelta 3s ease-in-out 0.2s infinite alternate paused;}
@keyframes revuelta {
  from {transform: translate(0, 0) rotateX(0);border: none; border-radius: 0%; box-shadow: none;}
    to {transform: translate(100px, 180px) rotateX(-360deg) skewX(-20deg); border: 2px solid black; border-radius: 20%; box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.8);}
}
#segunda-animation #html1 #text-html1 {width: 100%; font-size: 0px; background: transparent; color: black; overflow: hidden; transform: translate(0, 0); animation: fuente 3s ease 0s infinite alternate paused;}
@keyframes fuente {
  from {width: 100%; transform: translate(0, 0);font-size: 0px; background: transparent; color: black; padding: 0; overflow: hidden;}
    to {width: 60%; transform-origin: 50% 100%; transform: translate(100px, -160px) skewX(20deg); font-size: 22px; background: black; color: white; padding: 0 5px; text-align: center; overflow: visible;}
}
#segunda-animation #html1 #text-html1 p {margin:0; padding: 0;}

/* Estilos para imagen y texto css */

#tercera-animation #css {
  position: relative;
  left: 10%;
  margin-top: 50px;
  width: 100%;
  height: 100%;
  /*max-width: 400px;*/
  transform-style: preserve-3d;
  transform-origin: 0% 100%;
  transform: translate3d(-10px, 10px, 8px) rotate3d(1, 1, 1, -10deg) scale(0.9) skewX(30deg) skewY(10deg); 
}
#tercera-animation #css:hover {
  transition: all 1.5s linear 0.1s;
  transform: translate3d(0%, -30%, 10px) rotate3d(1, 0, 1, 360deg) skewX(-20deg) skewY(20deg);
  cursor: pointer;
}
#tercera-animation #css img {
  position: absolute;
  display: block;
  border: 1px solid blue;
  border-radius: 24%;
  box-shadow: 2px 2px 10px rgba(65, 105, 225, 0.8);
  overflow: hidden;
}
#tercera-animation #css:hover img {
  transition: all 0.5s linear 0s;
  border: transparent;
  border-radius: 40%;
  box-shadow: 2px 2px 12px grey;
  opacity: 0;
  transform: translate3d(0%, 0%, 15px) rotate3d(1, 1, 1, -20deg) scale(0.8) skewX(40deg) skewY(-40deg);
  animation: bs 2s linear 1.6s infinite,
             opac 2s linear 1.6s infinite;
}
@keyframes bs {
  from {box-shadow: 2px 2px 12px grey;}
    to {box-shadow: 3px 3px 14px black;}
}
@keyframes opac {
  from {opacity: 0;}
    to {opacity: 1;}
}
#tercera-animation #css #text-css {
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  visibility: hidden;
  overflow: hidden;
  opacity: 0;
  font-size: 1em;
  color: orange;
  font-family: arial, sans serif;
  font-weight: bold;
}
#tercera-animation #css:hover #text-css {
  display: inline-block;
  transition: all .3s linear 0.2s;
  width: 400px; 
  height: 2em;
  visibility: visible;
  overflow: visible; 
  opacity: 1;
  transform: translate3d(-100px, 100px, 0) rotate3d(1, 1, 1, -30deg) scale(1.2) skewX(10deg) skewY(-30deg);
  animation: ls 1s linear 1.8s infinite, c 0.5s linear 1.6s infinite;
}
@keyframes ls {
  from {letter-spacing: normal;}
    to {letter-spacing: 1.3px;}
}
@keyframes c {
  from {color: orange;}
    to {color: blue;}
}

/* estilo para reflejo de css */

#tercera-animation #css1 {width: 100%; max-width: 400px; margin-top: 50px;}
#tercera-animation #css1 #text-css1 {
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  white-space: pre;
  animation: anchurawidth 2s linear 0s infinite alternate paused;
}
@keyframes anchurawidth {
  0% {width: 100%; transform: none; background: transparent; color: black;}
  50% {width: 100%; transform: rotateX(360deg); background: black; color: white; text-align: center;}
 100% {width: 0;}
}
#tercera-animation #css1 #img-css1 {display: block; animation: vuelta1 2s linear 0s infinite alternate paused;}
@keyframes vuelta1 {
  from {transform: none; box-shadow: none;}
   to {transform: translate3d(0%, -30%, 25px) rotate3d(1, 1, 1, 360deg) skewX(-20deg) skewY(20deg); box-shadow: 2px 2px 7px rgba(0, 0, 0, 0.8);}
}

/* Estilos para imagen y texto de javascript */

#cuarta-animation #js {
  position: relative;
  left: 3%; 
  margin-top: 100px;
  width: 100%;
  max-width: 500px;
  transform-origin: 80% 0%;
  transform: translate3d(50px, -10px, 16px) rotate3d(0, 1, 1, 40deg) skewX(20deg) skewY(-30deg);
}
#cuarta-animation #js:hover {
  transition: all 1.2s ease 0.2s;
  transform: translate3d(0px, 0px, 10px) rotate3d(0, 1, 1, 360deg) skewX(-20deg) skewY(-10deg);
}
#cuarta-animation #js #img-js {
  display: block;
  position: relative;
  background: hsl(var(--hue), calc(var(--saturation) * 0), calc(var(--lightness) * 0.45));
  width: 200px;
  overflow: visible;
  transform: translate3d(-10px, 2px, 20px) rotate3d(1, 1, 1, -28deg);
  transition: all .3s linear 0s;
} 
#cuarta-animation #js:hover #img-js {
  transition: all .3s linear 0s;
  border: 1px solid black;
  box-shadow: 2px 2px 8px var(--card-shadow);
} 
#cuarta-animation #js #text-js {
  width: 100%;
  max-width: 400px;
  color: var(--card-text-color);
  font-size: var(--font-size-base);
  position: relative;
  transform-style: preserve-3d;
  perspective: 500px;
  transform: translate3d(-30px, -250px, 20px) rotate3d(1, 1, 1, 18deg) scale(0.9) skewX(10deg) skewY(10deg);
}
#cuarta-animation #js:hover #text-js {
  transition: all .7s ease 1s;
  transform: rotateX(-18deg) scale(1) skewX(10deg) skewY(2deg);
  background: var(--body-bg);
  color: var(--secondary-color);
  font-weight: bold;
  box-shadow: 2px 2px 8px var(--card-shadow);
}

/* estilo para reflejo de js */

#cuarta-animation #js1 {
  position: relative;
  transform-style: preserve-3d;
  perspective: 500px;
}
#cuarta-animation #js1 #text-js1 {
  width: 100%;
  max-width: 400px;
  font-size: var(--font-size-base);
  padding: 3px;
  animation: latido 2s ease-out infinite alternate paused;
}
@keyframes latido {
  0% {transform: none;}
  100% {transform: scaleX(0.8) scaleY(1.3) translate3d(-20px, -50px, 3px); background: rgba(255,0,0,.1); border-radius: 30%; font-size: calc(var(--font-size-base) * 0.8);}
}
#cuarta-animation #js1 #img-js1 {
  display: block;
  border: 3px solid transparent;
  box-shadow: 2px 2px 8px var(--card-shadow);
  transform-origin: 50% 50%;
  transform: translate3d(20px, 0px, 5px) rotate3d(1, 0, 1, 22deg);
  animation: rodeo 3s cubic-bezier(.58,3,0.5,0.5) 0s infinite paused; 
}
@keyframes rodeo {
  0% {transform-origin: 50% 50%;transform: translate3d(20px, 0px, 5px) rotate3d(1, 0, 1, 22deg);}
 100% {transform-origin: 50% 100%;transform: translate3d(20px, -100px, 3px) rotate3d(1, 0, 1, -360deg);}
}

/* Estilos para los botones play y pausa */

#animations .botones {display: flex;flex-direction: column;justify-content: space-between;width: auto;height: 120px;margin-top: 100px;}
#animations .botones1 {margin-top: 250px;}
#animations #accion, #animations #accion1, #animations #accion2,
#animations #accion3, #animations #accion4, #animations #accion5,
#animations #accion6, #animations #accion7 {
  display: inline-block;
  position: relative;
  padding: 10px;
  cursor: pointer;
  background: none;
  border: 1px solid black;
  border-radius: 50%;
  transition: 0.5s linear;
}
#animations #accion:hover, #animations #accion1:hover,
#animations #accion2:hover, #animations #accion3:hover,
#animations #accion4:hover, #animations #accion5:hover,
#animations #accion6:hover, #animations #accion7:hover {transition: all 0.5s linear; background: white; border: 3px solid grey;}

#animations #accion i, #animations #accion1 i, #animations #accion2 i,
#animations #accion3 i, #animations #accion4 i, #animations #accion5 i,
#animations #accion6 i, #animations #accion7 i {transition: 0.5s linear; font-size: 2em; color: black;}

#animations #accion.pausa:focus, #animations #accion2.pausa:focus,
#animations #accion4.pausa:focus, #animations #accion6.pausa:focus {transition: 0.5s linear; background: red;}

#animations #accion.pausa:focus i, #animations #accion2.pausa:focus i,
#animations #accion4.pausa:focus i, #animations #accion6.pausa:focus i {transition: 0.5s linear; color: white;}

#animations #accion1.play:focus, #animations #accion3.play:focus,
#animations #accion5.play:focus, #animations #accion7.play:focus {transition: 0.5s linear; background: green;}

#animations #accion1.play:focus i, #animations #accion3.play:focus i,
#animations #accion5.play:focus i, #animations #accion7.play:focus i {transition: 0.5s linear; color: white;}

/* ESTILO PARA LA PAGINA PROPIEDAD TRANSFORM */
/* Estilos para la cabecera animada */

#header_transform {
  position: relative;
  color: #fff;
  height: 70vh;
  margin: 0;
  overflow: hidden;
  text-align: center;
  transform-style: preserve-3d;
  perspective: 80px;
}
#header_transform img {width: 100px;height: 100px;}
#header_transform a {text-decoration: none;display: inline-block;}
#header_transform .texto, #header_transform .texto1, 
#header_transform .texto2, #header_transform .texto3 {
  width: 0;
  height: 0;
  overflow: hidden;
  opacity: 0;
}
#header_transform .texto {
  font-family: arial, sans serif;
  font-size: calc(var(--font-size-base) * 0.8);
  background: hsla(0, 10%, 0%, .7);
  margin-bottom: 10px;
  border-radius: 20%;
}
#header_transform .texto p {color: white;width: 100%;text-align: center;} 
#header_transform .texto span {display: block;color: yellow;margin-bottom: 10px;}
#header_transform .texto1 {font-family: impact;}
#header_transform .texto1 p {color: var(--card-text-color);}
#header_transform .texto1 span {display: block;color: maroon;}
#header_transform .texto2 {display: inline-block;font-family: arial;font-size: 0.8em;}
#header_transform .texto2 p {color: var(--primary-color);}
#header_transform .texto2 span {display: inline-block;font-family: New courier;color: var(--terciary-color);}
#header_transform .texto3 {display: inline-block;font-size: calc(var(--font-size-base) * 0.8);}
#header_transform .texto3 p {color: var(--card-text-color);text-decoration: underline;}
#header_transform .texto3 span {display: inline-block;color: grey;font-family: roboto;}
#header_transform .js {border: var(--border-width) solid var(--card-border-color);}
#header_transform .img {width: 150px;overflow: hidden;}
#header_transform .primero {
  position: absolute;
  left: -3%;
  top: 25%;
  color: orange;
  display: inline;
  font-family: impact;
  font-size: 2em;
  width: 0;
  height: 0;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
}
#header_transform .segundo {
  position: absolute;
  top: 90%;
  left: 20%;
  color: black;
  opacity: 0.5;
  visibility: visible;
}
#header_transform .suma {
  color: black;
  font-size: 3em;
  font-weight: bold;
  position: absolute;
  left: 28%;
  bottom: 18%;
  opacity: 0;
}
#header_transform .suma1 {
  color: red;
  font-size: 3em;
  font-weight: bold;
  position: absolute;
  left: 50%;
  bottom: 18%;
  opacity: 0;
}
#header_transform .igual {
  color: blue;
  font-size: 3em;
  font-weight: bold;
  position: absolute;
  left: 72%;
  bottom: 18%;
  opacity: 0;
}
#header_transform .img-animada {transition: all 2s linear 0s; position: relative;width: 160px;top: 10%;left: 50%; transform-style: preserve-3d; perspective: 50px;}
#header_transform .img-animada1 {transition: all 2s linear 0s; position: relative;width: 140px;top: 10%;left: 70%; transform-style: preserve-3d; perspective: 50px;}
#header_transform .img-animada2 {transition: all 2s linear 0s; position: relative;width: 140px;top: 5%;left: 20%; transform-style: preserve-3d; perspective: 50px;}
#header_transform .img-animada3 {transition: all 2s linear 0s; position: relative;width: 140px;top: -10%;left: 40%; transform-style: preserve-3d; perspective: 50px;}
#header_transform:hover .primero {
  transition: all 3s ease 1s;
  width: auto;
  height: auto;
  font-size: 2.5em;
  letter-spacing: 2px;
  opacity: 1;
  visibility: visible;
  transform-origin: 0% 0%;
  transform: translate3d(20%, 5%, 6px) scale(0.7) rotate3d(1, 1, 1, -361deg);
}
#header_transform:hover .segundo {
  transition: all 2s linear 0.2s;
  transform: translateY(-40%) scale(1.1);
  opacity: 1;
  letter-spacing: 2px;
  animation: ver 0.5s linear 0.6s 12 forwards;
}
@keyframes ver {
  from {opacity: 1;}
    to {opacity: 0;}
}
#header_transform:hover .suma {transition: all 2.3s linear 0s;opacity: 1;font-size: 4em;}
#header_transform:hover .suma1 {transition: all 2.4s linear 0s;opacity: 1;font-size: 4em;}
#header_transform:hover .igual {transition: all 2.5s linear 0s;opacity: 1;font-size: 4em;}

/* Css para el texto e imagen de página web o .img-animada */

#header_transform:hover .texto {
  transition: all 2s linear 0s;
  width: auto;
  height: auto;
  top: 10px;
  overflow: visible;
  opacity: 1;
}
#header_transform:hover .img-animada {
  transition: all 4s linear 0s;
  transform-origin: 0% 0%;
  transform: translate3d(230%, 50%, 10px) scale(1) rotate3d(1, 1, 1, -12deg);
  animation: rotar1 0.4s linear 0s 7; 
}
@keyframes rotar1 {
    from {transform: rotate3d(1, 1, 1, 12deg);}
      to {transform: rotate3d(1, 1, 1, -12deg);}
}
#header_transform .img-animada:hover img {
  transform: scale(1.5);
  transition: all 1.5s linear 0.2s;
  border-radius: 100%;
}
#header_transform .img-animada:hover .texto {
  transition: all 1.5s ease 0.2s;
  background: transparent;
  transform: translateY(210%);
}
#header_transform .img-animada:hover p {
  transition: all 1.5s ease 0.2s;
  font-size: var(--font-size-base);
  letter-spacing: 2px;
  color: var(--card-text-color);
  font-weight: bold;
}
#header_transform .img-animada:hover span {
  transition: all 1.5s ease 0.2s;
  font-size: calc(var(--font-size-base) * 0.9);
  letter-spacing: 1.5px;
  color: var(--card-text-color);
  font-weight: bold;
}

/* Css para texto e imagen html .img-animada1 */

#header_transform:hover .img-animada1 {
  transition: all 2s linear 0s;
  transform-origin: 0% 0%;
  transform: translate3d(-570%, 30%, 5px) scale(1) rotate3d(1, 1, 1, 10deg);
  animation: desplazar 0.5s ease 0s 3;
}
@keyframes desplazar {
    from {transform: translate3d(10%, 30%, 3px) rotate3d(1, 1, 1, 5deg);}
      to {transform: translate3d(20%, -10%, 7px) rotate3d(1, 1, 1, -5deg);}
}
#header_transform .img-animada1:hover .texto1 {
  transition: all 2s linear 0.3s;
  width: auto; 
  height: auto;
  font-family: impact;
  letter-spacing: 2px;
  opacity: 1;
  transform: translateY(10%);
}
#header_transform .img-animada1:hover .img1 {
  transform-origin: 0% 0%;
  transform: translate(-20%, -220%) scale(1.3);
  transition: all 2s linear 0.3s;
  opacity: 0.7;
}

/* CSS para imagen y texto css */

#header_transform:hover .img-animada2 {
  transition: all 2s linear 0s;
  transform-origin: 0% 0%;
  transform: translate3d(200%, -100%, 20px) scale(1) rotate3d(1, 0, 1, 10deg);
  animation: tamano 0.7s ease-in-out 0s 3;
}
@keyframes tamano {
    from {transform: rotate3d(1, 1, 1, 5deg) scale(1);}
      to {transform: rotate3d(1, 1, 1, 360deg) scale(1.5);}
}
#header_transform .img-animada2:hover .texto2 {
  transition: all 2s ease 0.3s;
  width: auto;
  height: auto;
  opacity: 1;
  font-size: 1em;
  letter-spacing: 2px;
  margin-left: 5px;
  animation: moverse 0.7s linear 2s 3 forwards;
}
@keyframes moverse {
  from {transform: translate3d(0%, 0%, 0px) rotate3d(1, 1, 1, 5deg);}
    to {transform: translate3d(20%, 80%, 4px) rotate3d(1, 1, 1, -5deg);}
}
#header_transform .img-animada2:hover .img2 {
  transform-origin: 0% 0%;
  transform: translate3d(-100%, 50%, 3px) scale(0.8) rotate3d(1, 0, 1, -17deg);
  transition: all 2s linear 0.3s;
  animation: zoom 0.7s linear 2.5s 3 reverse;
  background: black;
  border: 1px solid black;
  border-radius: 30%;
  z-index: 10;
}
@keyframes zoom {
  from {transform: translate(-115%, -10%) scale(1);}
    to {transform: translate(-116%, -11%) scale(1.3);}
}
#header_transform .img-animada2:hover span {
  transition: all 2s linear 2s;
  color: lightblue;
}
/* CSS para imagen y texto javascript */

#header_transform:hover .img-animada3 {
  transition: all 2s linear 0s;
  transform-origin: 0% 0%;
  transform: translate3d(120%, -100%, 10px) scale(1) rotate3d(1, 1, 1, -12deg);
  animation: desplazar1 0.5s linear 0s 5;
}
@keyframes desplazar1 {
    from {transform: translate3d(40%, -10%, 3px) rotate3d(1, 1, 1, 15deg);}
      to {transform: translate3d(60%, 10%, 6px) rotate3d(1, 1, 1, -15deg);}
}
#header_transform .img-animada3:hover .texto3 {
  transition: all 2s ease 0.2s;
  width: auto;
  height: auto;
  opacity: 1;
  font-size: 1em;
  letter-spacing: 2px;
  transform-origin: 0% 0%;
  transform: translate(30%, 150%) rotate(-10deg) skewX(-10deg);
}
#header_transform .img-animada3:hover .img3 {
  transform-origin: 100% 0%;
  transform: translate(0%, -60%) scale(1.1) rotateZ(-3deg);
  transition: all 2s linear 0.3s;
}
#header_transform .img-animada3:hover img {
  transform-origin: 100% 0%;
  transform: translate(20%, -20%) scale(1.2) rotateZ(-360deg);
  transition: all 2s linear 0.3s;
  border-radius: 50%;
  box-shadow: 2px 2px 10px rgba(65, 105, 225, 0.8);
}

/* Resto de estilos */

.flex_transform {width: 100%; max-width: 95%; margin-left: 30px; display: flex; flex-direction: column; gap: 20px; border: var(--border-width) solid var(--card-border-color);transition: 0.3s;}
.flex_transform:hover {transition: 0.3s; border-radius: 10px; box-shadow: 2px 2px 8px var(--card-shadow);}
.flex_transform .title {gap: 80px; border-bottom: 1px solid black;}
.flex_transform .title h4:nth-child(3) {margin-left: 150px;}
.flex_transform div {display: flex; align-items: center; gap: 30px; border-bottom: var(--border-width) solid var(--card-border-color);transition: 0.3s;}
.flex_transform div:hover {transition: 0.3s; border-radius: 10px; box-shadow: 2px 2px 8px var(--card-shadow);}
.flex_transform div code {font-size: calc(var(--font-size-code) * 1.3); color: var(--secondary-color);}
.flex_transform div section {width: 20%; padding-top: 10px; font-size: 1.1em; font-weight:bold; display: flex; flex-direction: column; gap: 10px;}
.flex_transform p {padding-top: 20px;}

/* Estilo para el contenedor flex de funciones 3d */

.flex_transform1 {width: 100%; max-width: 95%; margin-left: 30px; display: flex; flex-direction: column; align-items: stretch; gap: 20px; border: var(--border-width) solid var(--card-border-color);}
.flex_transform1:hover {transition: 0.3s; border-radius: 10px; box-shadow: 2px 2px 8px var(--card-shadow);}
.flex_transform1 .title1 {gap: 80px; border-bottom: 1px solid black;}
.flex_transform1 .title1 h4:nth-child(2) {margin-left: 150px;}
.flex_transform1 div {display: flex; align-items: center; gap: 30px; border-bottom: var(--border-width) solid var(--card-border-color);}
.flex_transform1 div:hover {transition: 0.3s; border-radius: 10px; box-shadow: 2px 2px 8px var(--card-shadow);} 
.flex_transform1 div code {font-size: calc(var(--font-size-code) * 1.3); color: var(--secondary-color);}
.flex_transform1 p {padding-top: 20px;}

/* Estilo para la aplicación */

.flex_transform2 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.flex_transform2 #parent p {margin: 0; padding-bottom: 0;}
.flex_transform2 #aplicacion {position: relative; width: 502px; transform-style: preserve-3d;}  
.flex_transform2 #skewed {
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  position: relative;
  top: -305px;
  left: 200px;
  background-color: gold;
  box-shadow: 0px 0px 5px 1px #888;
}
.flex_transform2 .grid {width: 501px;height: 501px;}
.flex_transform2 label {display: inline-block;max-width: 250px;font-weight: bold;font-size: 16px;}
.flex_transform2 input[type=range] {display: inline-block;width: 355px;position: relative; top: -0.5em;}
.flex_transform2 .origin {width: 200px;display: inline-block;}
.flex_transform2 .origin p {margin: 0; padding: 0;}
.flex_transform2 p label{width:45%; display:inline-block;}
.flex_transform2 p input{width:50%; display:inline-block;}
.flex_transform2 p input[type = 'radio']{width:50%}
.flex_transform2 .flex_transform3 {display: flex; flex-wrap: wrap; align-self: flex-start; max-width: 450px; transform: translate(50%,-50%);}
.flex_transform2 .flex_transform3 h2 {color: var(--secondary-color);}

/* Estilo para el contenedor con las tres imágenes que giran */

#contenido-transform #container1 {
  width: 200px;
  height: 200px;
  position: relative;
  left: 10%;
  top: -100px;
  cursor: pointer; 
  transform-style: preserve-3d;
  perspective: 200px;
}
#contenido-transform #container1:hover {animation: spin-transform 3s linear infinite alternate;}
#contenido-transform #container1:hover div {animation: br-transform 3s linear infinite alternate;}
#contenido-transform #container1:hover img {animation: spin1-transform 3s ease-in 3s infinite alternate;}
#contenido-transform #container1 div {display: inline-block; width: 200px; height: 150px;}
#contenido-transform #container1 div:nth-child(1) {background: gold; box-shadow: 4px 4px 6px rgba(0, 0, 0, .7); transform: translateX(50px) translateY(70px) translateZ(30px) rotateX(-62deg) rotateY(-1deg) rotateZ(-25deg) skewX(20deg) skewY(18deg);}
#contenido-transform #container1 div:nth-child(2) {background: green; box-shadow: 4px 4px 6px rgba(0, 0, 0, .7); transform: translateX(30%) translateY(-100px) translateZ(30px) rotateX(36deg) rotateZ(73deg) skewY(-25deg) skewX(19deg);}
#contenido-transform #container1 div:nth-child(3) {background: red; box-shadow: 4px 4px 6px rgba(0, 0, 0, .7);transform: translateX(40%) translateY(-200px) translateZ(30px) rotateX(-36deg) rotateZ(-100deg) skewY(-25deg) skewX(25deg);}
#contenido-transform #container1 img {width: 180px; height: 140px; display: block; position: absolute; margin: 4px 10px;}
#contenido-transform .imga, #contenido-transform .imgb,
#contenido-transform .imgc {backface-visibility: hidden;}
@keyframes spin-transform {
  0% {transform: rotateZ(0); perspective: 200px;}
  100% {transform: rotate3d(1, 1, 1, 360deg); perspective: 120px;}
}
@keyframes br-transform {
  0%{border-radius: 0; filter: none; opacity: 1;}
 100%{border-radius: 20%; filter: saturate(6); opacity: .5;}
}
@keyframes spin1-transform {
  0% {transform: rotateZ(0);}
 100% {transform: rotateZ(360deg);}
}

/* Estilo para cartel de gracias */

#contenido-transform #cartel-despedida:hover {transition: 2s cubic-bezier(0, -1, 1, 2); background: rgba(220, 220, 0, .5); max-width: 350px; border: none; box-shadow: 3px 3px 3px rgba(0, 0, 220, .7); animation: bg-gracias 1s cubic-bezier(0, -1, 1, 2) 4s 3 forwards;}
@keyframes bg-gracias {
  from {background: rgba(0, 0, 0, .5); color: #fff;}
    to {background: rgba(200, 200, 200, .5); color: #000;}}
#contenido-transform #cartel-despedida:hover div {transition: 2s cubic-bezier(0, -1, 1, 2); transform: rotate3d(1, 1, 1, -8deg) skewX(-14deg) skewY(-14deg) scale(1); box-shadow: 6px 6px 5px #fff; animation: estirar-gracias 1s cubic-bezier(0, -1, 1, 2) 4.2s 8 alternate forwards;}
@keyframes estirar-gracias {
 from {padding: 2px; transform: rotate3d(1, 1, 1, -8deg) skewX(-14deg) skewY(-14deg) scale(1);}
  to {padding: 4px; transform: translateX(10px) rotate3d(1, 1, 1, -320deg) skewX(-14deg) skewY(-14deg) scale(1);}
}
#contenido-transform #cartel-despedida:hover div span {animation: top-gracias 1s cubic-bezier(0, -1, 1, 2) 5s 8 alternate backwards;}
@keyframes top-gracias {
  from {color: white; transform-origin: 0% 0%; transform: translate(40%, 20%) rotateY(-20deg);}
    to {color: navy; transform-origin: 0% 0%; transform: translate(50%, -10%) rotateY(20deg);}
}
#contenido-transform #total-despedida {display: inline-block; position: relative; left: 50%;}
#contenido-transform #cartel-despedida {display: flex; flex-wrap: wrap; align-content: center; font-size: 30px; border: 1px solid black; max-width: 200px; height: 200px; transition: 2s cubic-bezier(0, -1, 1, 2); transform-style: preserve-3d; perspective: 50px; transform: rotate3d(1, 1, 1, 5deg);}
#contenido-transform #cartel-despedida div {display: inline-block; width: 40px; height: 40px; background: rgba(0, 0, 0, .5); color: #fff; padding: 2px; transform: rotate3d(1, 1, 1, 8deg) skewX(14deg) skewY(14deg); transform-style: preserve-3d; perspective: 30px; transition: 2s cubic-bezier(0, -1, 1, 2);}
#contenido-transform #cartel-despedida div span {display: inline-block; text-shadow: 2px 2px 3px rgba(255, 50, 50, .5); transform-origin: 0% 0%; transform: translate(40%, 20%) rotate3d(0, 1, 1, -20deg);}

#contenido-transform .i, 
#contenido-transform .i1,
#contenido-transform .i2 {padding-left: 14px;}

#contenido-transform #cartel-despedida div:nth-child(1) {order: 5;}
#contenido-transform #cartel-despedida:hover div:nth-child(1) {transition: 4s cubic-bezier(0, -1, 1, 2); order: 0; margin-left: 30px;}
#contenido-transform #cartel-despedida div:nth-child(2) {order: 2;}
#contenido-transform #cartel-despedida:hover div:nth-child(2) {transition: 4s cubic-bezier(0, -1, 1, 2); order: 0;}
#contenido-transform #cartel-despedida div:nth-child(3) {order: 3;}
#contenido-transform #cartel-despedida:hover div:nth-child(3) {transition: 4s cubic-bezier(0, -1, 1, 2); order: 0;}
#contenido-transform #cartel-despedida div:nth-child(4) {order: 6;}
#contenido-transform #cartel-despedida:hover div:nth-child(4) {transition: 4s cubic-bezier(0, -1, 1, 2); order: 0;}
#contenido-transform #cartel-despedida div:nth-child(7) {order: -3;}
#contenido-transform #cartel-despedida:hover div:nth-child(7) {transition: 4s cubic-bezier(0, -1, 1, 2); order: 0;}
#contenido-transform #cartel-despedida div:nth-child(8) {order: 4;}
#contenido-transform #cartel-despedida:hover div:nth-child(8) {transition: 4s cubic-bezier(0, -1, 1, 2); order: 0; margin-left: 50px;}
#contenido-transform #cartel-despedida div:nth-child(10) {order: 0;}
#contenido-transform #cartel-despedida:hover div:nth-child(10) {transition: 4s cubic-bezier(0, -1, 1, 2); margin-right: 30px;}
#contenido-transform #cartel-despedida div:nth-child(13) {order: -1;}
#contenido-transform #cartel-despedida:hover div:nth-child(13) {transition: 4s cubic-bezier(0, -1, 1, 2); order: 0; margin-left: 50px;}
#contenido-transform #cartel-despedida div:nth-child(14) {order: -2;}
#contenido-transform #cartel-despedida:hover div:nth-child(14) {transition: 4s cubic-bezier(0, -1, 1, 2); order: 0;}
#contenido-transform #posdata {display: inline-block; font-size: 16px; opacity: 0; transition: 3s cubic-bezier(0, -1, 1, 2);}
#contenido-transform #cartel-despedida:hover ~ #posdata {transition: 3s cubic-bezier(0, -1, 1, 2) 1s; opacity: 1; transform: translateX(250px); animation: fz-gracias 1.5s cubic-bezier(0, -1, 1, 2) 3s 5 alternate forwards;}
@keyframes fz-gracias {
  from {font-size: 16px; letter-spacing: normal; color: black;}
    to {font-size: 20px; letter-spacing: 2px; color: blue; box-shadow: 3px 2px 2px Currentcolor;}
} 

/* ESTILO PARA LA PAGINA PROPIEDAD FILTER */

#contenido-filter .imagenes-filtro {max-width: 95%; display: flex; flex-direction: column; justify-content: center;gap: 30px;transition: .5s;}
#contenido-filter .imagenes-filtro:hover {transition: .5s; border: 1px solid black; border-radius: 12px; box-shadow: 2px 2px 8px var(--card-shadow);}
#contenido-filter .imagenes-filtro:hover div {transition: .5s; border-bottom: 2px solid black; box-shadow: 2px 2px 8px var(--card-shadow);}
#contenido-filter .imagenes-filtro div {display: flex;justify-content: space-between;align-items: center;}
#contenido-filter .imagenes-filtro div.card_header {display:flex; justify-content: flex-start; gap: 70px;}
#contenido-filter .imagenes-filtro div.card_header h4:nth-child(4) {margin-left: 100px;}
#contenido-filter .imagenes-filtro div code.filtro {
  font-size: calc(var(--font-size-code) * 1.3);
  color: var(--secondary-color);
  transition: .5s;
}
#contenido-filter .imagenes-filtro div code.filtro:hover {box-shadow: 2px 2px 8px var(--card-shadow);}
#contenido-filter .imagenes-filtro div span.explicacion {max-width: 300px;}
#contenido-filter .imagenes-filtro img {position: relative; display: inline-block; width: 200px; height: 76px;}
#contenido-filter .imagenes-filtro img:hover {transition: .5s; filter: none; box-shadow: 2px 2px 8px var(--card-shadow); transform-origin: 50% 100%; transform: scaleY(150%);}
#contenido-filter .imagenes-filtro div div span {display: inline-block; position: relative; width: auto; height: auto; transition: .5s;}
#contenido-filter [data-img]::before {
  content: attr(data-img);
  display: block;
  position: absolute;
  top: 0%;
  max-width: 250px; 
  height: auto;
  padding: 10px 5px;
  border: 1px solid black;
  border-radius: 10px;
  font-weight: bold;
  background-color: var(--card-bg);
  backdrop-filter: opacity(0.5);
  font-size: calc(var(--font-size-base) * 1.1);
  color: var(--card-text-color);
  opacity: 0;
  z-index: 100; 
  transition: .5s;
}
#contenido-filter [data-img]:hover::before {transition: 0.5s; opacity: 1; transform: translate(0, -100px); box-shadow: 2px 2px 8px var(--card-shadow);}

#contenido-filter .blur {filter: blur(2px); transition: .5s;}
#contenido-filter .blur1 {filter: blur(10px); transition: .5s;}
#contenido-filter .brillo {filter: brightness(2); transition: .5s;}
#contenido-filter .brillo1 {filter: brightness(0%); transition: .5s;}
#contenido-filter .contraste {filter: contrast(60%); transition: .5s;}
#contenido-filter .contraste1 {filter: contrast(160%); transition: .5s;}
#contenido-filter .sombra {filter: drop-shadow(5px 5px red); transition: .5s;}
#contenido-filter .sombra1 {filter: drop-shadow(-3px -3px 5px yellow); transition: .5s;}
#contenido-filter .escala-gris {filter: grayscale(0.5); transition: .5s;}
#contenido-filter .escala-gris1 {filter: grayscale(100%); transition: .5s;}
#contenido-filter .hue-rotate {filter: hue-rotate(120deg); transition: .5s;}
#contenido-filter .hue-rotate1 {filter: hue-rotate(240deg); transition: .5s;}
#contenido-filter .negativo {filter: invert(0.5); transition: .5s;}
#contenido-filter .negativo1 {filter: invert(1); transition: .5s;}
#contenido-filter .opacidad {filter: opacity(0.5); transition: .5s;}
#contenido-filter .opacidad1 {filter: opacity(20%); transition: .5s;}
#contenido-filter .saturacion {filter: saturate(300%); transition: .5s;}
#contenido-filter .saturacion1 {filter: saturate(0.5); transition: .5s;}
#contenido-filter .sepia {filter: sepia(0.5); transition: .5s;}
#contenido-filter .sepia1 {filter: sepia(100%); transition: .5s;}

/* 1 */

#contenedor-imagen {position: relative; display:flex; flex-direction: column; margin: 50px auto; width:640px; font-family:"Quattrocento Sans", sans-serif;}
.rowDiv {display:flex; flex-direction: row; width:100%;}
#control-input {width:640px; padding-top:2em;}
#control-input label {display:inline-block; width:25%; height:2em;}
#control-input [type=range]:disabled{opacity:.4;}
.radioDiv{
   display: flex; 
   flex-direction: column;
   justify-content: space-between;
   margin-top: 2em;
   width: 100%;
}
.rowDiv input[type=radio] {margin:.25em 1em .25em 0;}
#contenedor-imagen h1{font-size:180%; width:100%; text-align:center; margin:1em 0;}
.inputDiv {width:640px; height:480px; position:relative; overflow:hidden;}
.inputDiv div {position:absolute; overflow:hidden} 
.inputDiv #typeRange {position:absolute; bottom:0px; z-index: 10;} 
#filterImg img {-webkit-filter:sepia(1); filter:sepia(1);}
#filterImg {border-right:10px solid rgba(0,0,0,.3); height: 100%;}
#typeRange {display:block; width:640px; height:480px; background-color:transparent}
#typeRange:focus {outline: none;}

/*
  #originalImg, 
  #filterImg {
      width: 100%;
      height: 100%;
  }

  #originalImg img, 
  #filterImg img {
      width: 100%;
      height: 100%;
      object-fit: cover;
  }
*/

/* 2 */

#typeRange, #typeRange::-webkit-slider-runnable-track, #typeRange::-webkit-slider-thumb {appearance: none;}
#typeRange, #typeRange::-moz-range-thumb, #typeRange::-moz-range-thumb {-moz-appearance: none; position:relative;}

/* 2.1 THUMB */

#typeRange::-webkit-slider-thumb {height:480px; width:15px; background-color:transparent; cursor: col-resize /* ew-resize */;}
#typeRange::-moz-range-thumb {height:480px; width:15px; background-color:transparent; cursor: col-resize; border:none;}
/*#typeRange::-ms-thumb {height:480px; width:15px; background-color:transparent; cursor: col-resize;}*/

/* 2.2 TRACK */

#typeRange::-webkit-slider-runnable-track {height:480px; background:transparent;}
#typeRange:focus::-webkit-slider-runnable-track {outline: none;}
#typeRange::-moz-range-track {outline:none; background:none;}
/*
  #typeRange::-ms-track{}
  #typeRange::-ms-fill-lower{}
  #typeRange::-ms-fill-upper{}
*/

input[type=range].plain { 
  position:relative; 
  top:1px; 
  width:60%; 
  margin:0 1em;
  align-self: flex-start; 
}

/* ESTILO PARA PAGINA CONTENIDO ANIMADO */

#contenedoranimaciones {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#contenedorsonrisa {
  margin: 0;
  width: 250px;
  height: 200px;
  display: flex;
  background-image: url("/imagenes/sonrisa-guiño.jpg");
  animation: sonrisa 2s steps(3) infinite paused;
  justify-content: center;
  align-items: flex-end;
  position: relative;
}

@keyframes sonrisa {
  from{background-position: 0px;}
    to{background-position: -690px;}
}

#contenedorbotones {
  width: 100%;
  max-width: 300px;
  display: flex;
  justify-content: space-between;
}

#accion8, #accion9 {cursor: pointer; margin: 20px;}
#accion8 i, #accion9 i {font-size: 2em; padding: 5px;}

/* El script de los botones pausa y play funciona para los dos contenedores */
/* Estilo contenedor animado de imágenes */

#contenedorimagenes {
  position: relative;
  display: flex;
  align-items: center;
  width: 200px;
  height: 300px;
  border: 5px transparent;
  transition: all .5s;
}
#contenedorimagenes .informacion {
  position: relative;
  width: 100%; 
  max-width: 80%;
  margin: 0 auto; 
  font-size: calc(var(--font-size-sm) * 1.2);
  font-family: arial, sans-serif;
  text-align: center;
  transform: translateY(30%);
  transition: all .5s;
}
#contenedorimagenes div {
  position: absolute;
  left: 20%;
  top: 40px;
  width: 0;
  height: 0;
  transition: all .5s;
}
#contenedorimagenes span {
  position: absolute;
  display: inline-block;
  font-size: 0px;
  color: black;
  transition: all .5s;
}
#contenedorimagenes .html {
  background-image: url("/imagenes/html.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  z-index: 100;
}
#contenedorimagenes .css {
  background-image: url("/imagenes/css.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  z-index: 50;
}
#contenedorimagenes .js {
  background-image: url("/imagenes/js.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  z-index: 10;
}
#contenedorimagenes:hover {
  transition: all 1s linear 3.5s;
  animation: colorbackg 2s infinite alternate 3.5s;
}
@keyframes colorbackg {
  0% {background: transparent; width: 200px; height: 300px; border: none;}
  50% {background: linear-gradient(-45deg, #0066ff 40%, #00ffff);}
  100% {background: linear-gradient(45deg, #0066ff 40%, #00ffff); border: 5px dashed pink; width: 800px; height: 400px; transform: translateX(-100px) rotate(20deg) skewX(3deg);}
}
#contenedorimagenes:hover .informacion {
  transition: all 0.5s linear 0s;
  transform: scale(0);
}
#contenedorimagenes:hover div {
  transition: all 0.5s linear;
  width: 200px;
  height: 230px;
  transform: scale(0.7);
}
#contenedorimagenes:hover .mas {
  transition: all 1s linear 3s;
  font-size: 5em;
  font-weight: bold;
  transform: translate(150px, 100px);
}
#contenedorimagenes:hover .mas1 {
  transition: all 1s linear 3s;
  font-size: 5em;
  font-weight: bold;
  transform: translate(300px, 100px);
}
#contenedorimagenes:hover .igual {
  transition: all 1s linear 3s;
  font-size: 5em;
  font-weight: bold;
  transform: translate(450px, 100px);
}
#contenedorimagenes:hover .pw {
  transition: all 1s linear 3.5s;
  border: 1px solid black;
  max-width: 350px;
  overflow-wrap: break-word;
  font-size: calc(var(--font-size-sm) * 1.2);
  font-family: arial, sans-serif;
  font-weight: 400;
  transform-origin: 0% 0%;
  transform: translate(550px, 60px);
}
#contenedorimagenes:hover .html {
  transition: transform 1s linear 3s;
  transform-origin: 50% 50%;
  transform: translate(-200px, 0px) scale(0.5) rotate(10deg) skewY(60deg);
}
#contenedorimagenes:hover .css {
  transition-property: z-index, transform;
  transition-duration: 0.7s, 1s;
  transition-timing-function: linear;
  transition-delay: 0.7s, 3s;
  z-index: 150;
  transform-origin: 50% 50%; 
  transform: scale(0.5) rotate(10deg) skewY(60deg);
}
#contenedorimagenes:hover .js {
  transition: z-index, transform;
  transition-duration: 0.7s, 1s;
  transition-timing-function: linear;
  transition-delay: 1.5s, 3s;
  z-index: 200;
  transform-origin: 50% 50%;
  transform: translate(200px, 0px) scale(0.5) rotate(10deg) skewY(60deg);
}
#contenedorimagenes .html:hover {
  transition: all 0.5s linear;
  border: 1px solid black;
  border-radius: 100%;
  transform: translate(-200px, 0px) rotate(-10deg);
}
#contenedorimagenes .css:hover {
  transition: all 0.5s linear;
  border: 1px solid black;
  border-radius: 100%;
  transform: rotate(-10deg);
}
#contenedorimagenes .js:hover {
  transition: all 0.5s linear;
  border: 1px solid black;
  border-radius: 100%;
  transform: translate(200px, 0px) rotate(-10deg);
}

/* Estilo para el primer contenedor de articulos */

#contenido-animado .contenedor-expand {
  position: relative;
  display: inline-block;
  width: 170px;
  height: 170px;
  margin: 100px 0px;
  background: lightgrey;
  border: 1px solid black;
  padding-bottom: 100px;
  transition: all .8s linear .2s;
}
#contenido-animado .contenedor-expand:hover {
  position: relative;
  transition: all 1s linear;
  width: 500px;
  height: 620px;
  background: grey;
  transform-origin: 100% 0%; 
  transform: translate(100px, 0px); 
}
#contenido-animado .contenedor-expand div span {display: inline-block; margin: 60px 50px; transition: 1s linear;}
#contenido-animado .contenedor-expand div span:nth-child(2) {display: none;}
#contenido-animado .contenedor-expand div:hover span {display: none;}
#contenido-animado .contenedor-expand div:hover span:nth-child(2) {display: inline-block; font-size: calc(var(--font-size-base) * 1.2); font-weight: bolder; transition: 1s linear; margin: 0px 60px;}
#contenido-animado .contenedor-expand div article {width: 0; height: 0; overflow: hidden; transition: 1s linear;}
#contenido-animado .contenedor-expand div article img {width: 0; height: 0; overflow: hidden; transition: 1s linear;}
#contenido-animado .contenedor-expand div article:hover img {display: block; float: left; width: 200px; height: 200px; padding: 20px;}
#contenido-animado .contenedor-expand div article img:hover {transition: all 0.5s linear; border-radius: 50%; box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.5); transform: translate(15px, 15px) scale(0.8) rotate(360deg);}
#contenido-animado .contenedor-expand div article p {width: 0; height: 0; overflow: hidden; transition: 1s linear;}
#contenido-animado .contenedor-expand div article:hover p {transition: 1s linear; width: auto; height: auto; overflow: visible; font-size: calc(var(--font-size-base) * 0.9); padding: 10px; color: white;}
#contenido-animado .contenedor-expand article p strong:hover {
  transition: all 0.3s linear;
  display: inline-block;
  width: auto;
  background: white;
  color: black;
}
#contenido-animado .contenedor-expand .uno {
  position: absolute;
  top: 0;
  left: 0;
  width: 150px;
  height: 150px;
  background: orange;
  background-image: linear-gradient(to left, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.4));
  border: 1px solid black;
  z-index: 20;
}
#contenido-animado .contenedor-expand:hover .uno {
  transition: all 1.5s ease;
  transform: translate(175px, 0px) rotate(-360deg);
}
#contenido-animado .contenedor-expand .uno:hover {
  transition: all 1.2s linear;
  left: -155px;
  width: 460px;
  height: 580px;
}
#contenido-animado .contenedor-expand .uno:hover article {
  transition: all 1s linear;
  background-image: linear-gradient(to left, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.2));
  width: 100%;
  height: auto;
}
#contenido-animado .contenedor-expand .dos {
  position: absolute;
  top: 0;
  left: 0;
  width: 150px;
  height: 150px;
  background: yellow;
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.4));
  border: 1px solid black;
  z-index: 15;
}
#contenido-animado .contenedor-expand:hover .dos {
  transition: all 1.5s ease;
  transform: translate(350px, 230px) rotate(-360deg);
}
#contenido-animado .contenedor-expand .dos:hover {
  transition: all 1.2s linear;
  left: -330px;
  top: -200px;
  width: 480px;
  height: 570px;
  z-index: 25;
}
#contenido-animado .contenedor-expand .dos:hover article {
  transition: all 1s linear;
  background-image: linear-gradient(to left, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.2));
  width: 100%;
  height: auto;
}
#contenido-animado .contenedor-expand .tres {
  position: absolute;
  top: 0;
  left: 0;
  width: 150px;
  height: 150px;
  background: green;
  background-image: linear-gradient(to top, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.4));
  border: 1px solid black;
  z-index: 10;
}
#contenido-animado .contenedor-expand:hover .tres {
  transition: all 1.5s ease;
  transform: translate(175px, 470px) rotate(-360deg);
}
#contenido-animado .contenedor-expand .tres:hover {
  transition: all 1.2s linear;
  left: -155px;
  top: -430px;
  width: 460px;
  height: 580px;
  z-index: 25;
}
#contenido-animado .contenedor-expand .tres:hover article {
  transition: all 1s linear;
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.2));
  width: 100%;
  height: auto;
}
#contenido-animado .contenedor-expand .cuatro {
  position: absolute;
  top: 0;
  left: 0;
  width: 150px;
  height: 150px;
  background: pink;
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.4));
  border: 1px solid black;
  z-index: 5;
}
#contenido-animado .contenedor-expand:hover .cuatro {
  transition: all 1.5s ease;
  transform: translate(0px, 230px) rotate(-360deg);
}
#contenido-animado .contenedor-expand .cuatro:hover {
  transition: all 1.2s linear;
  width: 480px; 
  height: 570px;
  top: -200px;
  z-index: 30;
}
#contenido-animado .contenedor-expand .cuatro:hover article {
  transition: all 1s linear;
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.2));
  width: 100%;
  height: auto;
}

/* Estilos del nuevo contenedor de articulos */

#contenido-animado .contenedor-expand1 {position: relative; width: 100%; max-width: 50px; height: 2em; margin-bottom: 200px; overflow: hidden; background: var(--body-bg); cursor: pointer; border: none; border-radius: 0px; transition: all .7s .3s;}
#contenido-animado .contenedor-expand1:hover {transition: all .7s .3s; max-width: 1100px; height: 420px; border: calc(var(--border-width) * 2) solid var(--card-border-color); border-radius: 10px;}
#contenido-animado .contenedor-expand1:hover div span:nth-child(1) {transition: .3s; width: 0; opacity: 0;}
#contenido-animado .contenedor-expand1:hover div span:nth-child(2) {position: absolute; transition: all .7s .3s; width: auto; opacity: 1; padding: 15px; color: white; background: var(--bg-color-pre);}
#contenido-animado .contenedor-expand1:hover .uno1 span {position: absolute; transition: .5s; top: -10px;}
#contenido-animado .contenedor-expand1:hover .dos1 span {position: absolute; transition: .5s; top: -10px; left: 25%;}
#contenido-animado .contenedor-expand1:hover .tres1 span {position: absolute; transition: .5s; top: -10px; left: 50%;}
#contenido-animado .contenedor-expand1:hover .cuatro1 span {position: absolute; transition: .5s; top: -10px; left: 80%;}
/* #contenido-animado .prueba1 div {} */
#contenido-animado .contenedor-expand1 .uno1 article {background: rgba(255, 0, 0, .3);}
#contenido-animado .contenedor-expand1 .dos1 article {background: rgba(0, 255, 0, .3);}
#contenido-animado .contenedor-expand1 .tres1 article {background: rgba(0, 0, 255, .3);}
#contenido-animado .contenedor-expand1 .cuatro1 article {background: rgba(100, 100, 100, .3);}
#contenido-animado .contenedor-expand1 div span {display: inline-block; font-weight: bolder; margin: 10px 0; transition: all .7s .3s;}
#contenido-animado .contenedor-expand1 div span:nth-child(1) {position: relative;}
#contenido-animado .contenedor-expand1 div span:nth-child(2) {position: relative; width: 0; opacity: 0;}
#contenido-animado .contenedor-expand1 div span:nth-child(2):hover ~ article {transition: all .7s .7s; height: 100%; width: 100%; max-width: 80%; overflow: visible;}
#contenido-animado .contenedor-expand1 div span:nth-child(2):hover ~ article img {transition: all .7s .7s; height: 220px; width: 220px; margin: 50px 0 0 10px;}
#contenido-animado .contenedor-expand1 .dos1 span:nth-child(2):hover ~ article {top: 50px; left: 10%;}
#contenido-animado .contenedor-expand1 .tres1 span:nth-child(2):hover ~ article {top: 50px; left: 15%;}
#contenido-animado .contenedor-expand1 .cuatro1 span:nth-child(2):hover ~ article {top: 50px; left: 20%;}
#contenido-animado .contenedor-expand1 div article {position: absolute; top: 50px; display: flex; height: 0; width: 0; overflow: hidden; transition: .5s .2s;}
#contenido-animado .contenedor-expand1 div article img {display: inline-block; width: 0px; height: 0px; transition: .5s .2s;}
#contenido-animado .contenedor-expand1 div article p {font-size: var(--font-size-base); max-width: 80%;}
#contenido-animado .contenedor-expand1 div article strong {display: inline-block;}

/* ESTILO PARA PAGINA TEXTO HOVER */

/* Estilo para la lista, con dos parrafos por li */

.flex_hover, .flex_hover1 {width: 100%; max-width: 1100px; margin: 40px auto; display: flex;align-items: center;}
.flex_hover .explicacion_hover, .flex_hover1 .explicacion_hover {width: 100%; max-width: 50%;}
.flex_hover .lista1 {
  position: relative;
  background-color: #000000;
  width:100%;
  max-width: 500px;
  height: 100%;
  margin: 50px 50px;
}

.flex_hover .lista1 .palabras1 {
  position: relative;
  padding: 50px 50px;
  letter-spacing: -2px;
  text-transform: uppercase;
  transform: translate3d(0, 0, 0);
  list-style: none;
}

.lineas-palabras1 {
  height: 32px;
  overflow: hidden;
  position: relative;
  text-align: center;
}
.lineas-palabras1:nth-child(odd) {transform: skew(60deg, -30deg) scaleY(0.66667);}
.lineas-palabras1:nth-child(even) {transform: skew(0deg, -30deg) scaleY(1.33333);}
.lineas-palabras1:nth-child(1) {left: 14px;width:100%; max-width:340px;}
.lineas-palabras1:nth-child(2) {left: 28px;width:100%; max-width:340px;}
.lineas-palabras1:nth-child(3) {left: 42px;width:100%; max-width:340px;}
.lineas-palabras1:nth-child(4) {left: 56px;width:100%; max-width:340px;}
.lineas-palabras1:nth-child(5) {left: 70px;width:100%; max-width:340px;}
.lineas-palabras1:nth-child(6) {left: 84px;width:100%; max-width:340px;}
.lineas-palabras1:nth-child(7) {left: 98px;width:100%; max-width:340px;}
.lineas-palabras1 p {
  width: 100%;
  max-width: 300px;
  height: 16px;
  line-height: 16px;
  font-family: "Source Sans Pro", Helvetica, Arial, sans-serif;
  font-size: calc(var(--font-size-lg) * 0.9) !important;
  font-weight: 900;
  margin-left: 0;
  padding: 0 10px;
  color: rgb(255,255,255);
  transition: all 0.4s ease-in-out;
  transform: translate3d(0, -68px, 0);
  vertical-align: top;
  white-space: nowrap;
}
.lista1 .palabras1:hover p {transition: all 0.4s ease-in-out; transform: translate3d(16px, -20px, 0);}

/* Estilo para secciones hover */

section a::after, section a::before {content: "";}

/* Estilo de la cabecera, con animation al hover del box-shadow */

.head1 {
  position: relative;
  top: 50px;
  width: auto;
  height: 190px;
  margin-bottom: 70px;
  background: hsla(0, 0%, 0%, .7);
  box-shadow: 0px 0px 50px 21px rgba(0, 0, 0, 0.75); 
}
.enlace-luminoso {
  display: block;
  position: relative;
  top: 10%;
  left: 40%;
  width: 100%;
  max-width: 250px;
  height: 160px;
  text-decoration: none;
  color: hsla(255, 100%, 100%, .9);
  font: normal 40px Varela Round, sans-serif;
  letter-spacing: 5px;
  text-align: center;
  text-transform: uppercase;
}
.head1:hover .enlace-luminoso {animation: move linear 2000ms infinite;}
@keyframes move {
  0% {
      text-shadow:
        4px -4px 0 hsla(0, 100%, 50%, 1), 
        3px -3px 0 hsla(0, 100%, 50%, 1), 
        2px -2px 0 hsla(0, 100%, 50%, 1), 
        1px -1px 0 hsla(0, 100%, 50%, 1),
        -4px 4px 0 hsla(180, 100%, 50%, 1), 
        -3px 3px 0 hsla(180, 100%, 50%, 1), 
        -2px 2px 0 hsla(180, 100%, 50%, 1), 
        -1px 1px 0 hsla(180, 100%, 50%, 1);
  }
  25% {
      text-shadow:
        -4px -4px 0 hsla(180, 100%, 50%, 1), 
        -3px -3px 0 hsla(180, 100%, 50%, 1), 
        -2px -2px 0 hsla(180, 100%, 50%, 1), 
        -1px -1px 0 hsla(180, 100%, 50%, 1),
        4px 4px 0 hsla(0, 100%, 50%, 1), 
        3px 3px 0 hsla(0, 100%, 50%, 1), 
        2px 2px 0 hsla(0, 100%, 50%, 1), 
        1px 1px 0 hsla(0, 100%, 50%, 1);
      }
  50% {
      text-shadow:
        -4px 4px 0 hsla(0, 100%, 50%, 1), 
        -3px 3px 0 hsla(0, 100%, 50%, 1), 
        -2px 2px 0 hsla(0, 100%, 50%, 1), 
        -1px 1px 0 hsla(0, 100%, 50%, 1),
        4px -4px 0 hsla(180, 100%, 50%, 1), 
        3px -3px 0 hsla(180, 100%, 50%, 1), 
        2px -2px 0 hsla(180, 100%, 50%, 1), 
        1px -1px 0 hsla(180, 100%, 50%, 1);
      }
  75% {
      text-shadow:
        4px 4px 0 hsla(180, 100%, 50%, 1), 
        3px 3px 0 hsla(180, 100%, 50%, 1), 
        2px 2px 0 hsla(180, 100%, 50%, 1), 
        1px 1px 0 hsla(180, 100%, 50%, 1),
        -4px -4px 0 hsla(0, 100%, 50%, 1), 
        -3px -3px 0 hsla(0, 100%, 50%, 1), 
        -2px -2px 0 hsla(0, 100%, 50%, 1), 
        -1px -1px 0 hsla(0, 100%, 50%, 1);
      }
  100% {
      text-shadow:
        4px -4px 0 hsla(0, 100%, 50%, 1), 
        3px -3px 0 hsla(0, 100%, 50%, 1), 
        2px -2px 0 hsla(0, 100%, 50%, 1), 
        1px -1px 0 hsla(0, 100%, 50%, 1),
        -4px 4px 0 hsla(180, 100%, 50%, 1), 
        -3px 3px 0 hsla(180, 100%, 50%, 1), 
        -2px 2px 0 hsla(180, 100%, 50%, 1), 
        -1px 1px 0 hsla(180, 100%, 50%, 1);
      }
}
.head1 a::before, section.head1 a::after {
  color: #fff;
  font-weight: 900;
  font-size: 20px;
  text-transform: none;
  display: block;
  transition: 0.5s ease;
  transform-origin: 0% 50%;
}
.head1 a::before {content: attr(data-bf); position: absolute; top: -20px; left: -100%;}
.head1 a::after {content: attr(data-af); position: absolute; left: 100%; top: 20px;}
.head1 a:hover {transition: transform 0.5s ease;transform: translate(0px, 20px) scale(1.1);}
.head1 a:hover::before {transition: transform 0.5s ease;transform: translate(250px, -5px);}
.head1 a:hover::after {transition: transform 0.5s ease;transform: translate(-170px, 70px);}

.camera1 {position: relative; width: 100%; max-width: 400px; height: 100px; margin:70px auto;}
.camera1 a{display: block;position: relative; top:25px; left:210px; width: 100%;max-width: 70px; height: 50px;line-height: 50px;margin-left: -75px;margin-top: -25px;}
.camera1 a i {font-size: 100px; color: #000;}
.camera1 a::before, .camera1 a::after {
  content: "";
  position: absolute;
  width: 30px;
  height: 30px;
  border-color: #FF0000;
  border-style: solid;
  border-width: 0;
  transition: all 0.5s cubic-bezier(1, 0.2, 0.26, 0.7);
  transform: translate(0px, 0px) scale(0.8);
  opacity: 0;
}
.camera1 a::before {left: 0; bottom: 0; border-bottom-width: 1px; border-left-width: 1px;}
.camera1 a::after {top: 0; right: 0; border-top-width: 1px; border-right-width: 1px;}
.camera1 a:hover::before, .camera1 a:hover::after {transition: all 2s cubic-bezier(0.14, 1.13, 0, 0.91); opacity: 1;}
.camera1 a:hover::before {transform: translate(-20px, 60px) scale(1); border-bottom-width: 12px; border-left-width: 12px;}
.camera1 a:hover::after {transform: translate(47px, -11px) scale(1); border-top-width: 12px; border-right-width: 12px;}

.carretera {position: relative; width: 100%; max-width: 400px; height: 100px; margin:70px auto;}
.carretera a {
  font-size: 3em;
  text-decoration: none;
  color: black;
  width: 314px;
  height: 78px;
  line-height: 78px;
  position: relative;
  top: 0;
  left: 0;
}
.carretera a::before, .carretera a::after {
  content: "";
  position: absolute;
  height: 7px;
  left: 0;
  right: 0;
  transform: translate(0, 30px);
  transition: 0.3s all;
  opacity: 0;
}
.carretera a::before {
  bottom: -6px;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAUoAAAAHBAMAAACcthkwAAAAD1BMVEUAAAD/vwD/vwD/vwD/vwBYa2Z+AAAABHRSTlMAwEAw9JyPcwAAAC1JREFUOMtjcMEETgwQwIJFTgEiRWdto64cdeWoK8l2pSAmEIZKMWKRMxgQbQCWVcU78Wj7hwAAAABJRU5ErkJggg==);
  animation: road 1.2s infinite linear;
}
@keyframes road {
  0% {background-position: 0px;}
  100% {background-position: -330px;}
}
.carretera a::after {bottom: 8px; background-color: #FFBF00;}
.carretera a:hover::before, 
.carretera a:hover::after{transform:translate(0, 0px); opacity: 1;}

.monte {position: relative; width: 100%; max-width: 450px; height: 250px; background:#000;margin:70px auto;}
.monte a {
  font-size: 3em;
  text-decoration: none; 
  color: #fff;
  padding-top: 100px;
  padding-left: 120px;
  font-weight: 200;
  width: 440px;
  height: 300px;
  line-height: 85px;
  position: absolute;
  top: 0;
  left: 0;
}
.monte a::before {
  content: attr(data-content);
  color: #465154;
  padding-left: 150px;
  transition: all 0.5s ease-in;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: #fff;
  padding-top: 100px;
  clip-path: polygon(0% 100%, 159px 188px, 171px 185px, 174px 185px, 184px 182px, 191px 183px, 199px 179px, 202px 176px, 219px 158px, 225px 175px, 230px 172px, 245px 179px, 283px 184px, 293px 187px, 311px 192px, 318px 191px, 357px 194px, 100% 100%);
  animation: montebajo 0.5s forwards linear;
}
.monte a:hover:before {animation: montealto 0.9s forwards linear;}
@keyframes montealto {
  0% {clip-path: polygon(0% 100%, 159px 188px, 171px 185px, 174px 185px, 184px 182px, 191px 183px, 199px 179px, 202px 176px, 219px 158px, 225px 175px, 230px 172px, 245px 179px, 283px 184px, 293px 187px, 311px 192px, 318px 191px, 357px 194px, 100% 100%);}
  25% {clip-path: polygon(0% 100%, 153px 176px, 165px 174px, 167px 173px, 187px 155px, 193px 161px, 200px 147px, 203px 149px, 220px 129px, 226px 143px, 231px 140px, 240px 154px, 246px 147px, 285px 171px, 295px 174px, 313px 178px, 329px 182px, 100% 100%);}
  50% {clip-path: polygon(0% 100%, 106px 149px, 145px 128px, 158px 119px, 178px 101px, 184px 107px, 190px 92px, 201px 87px, 217px 66px, 223px 81px, 228px 78px, 244px 94px, 251px 87px, 289px 113px, 302px 125px, 316px 140px, 346px 163px, 100% 100%);}
  75% {clip-path: polygon(0% 100%, 82px 132px, 117px 97px, 131px 93px, 172px 65px, 179px 76px, 185px 77px, 199px 68px, 217px 44px, 223px 58px, 228px 55px, 244px 60px, 253px 42px, 295px 79px, 314px 87px, 331px 88px, 376px 145px, 100% 100%);}
  100% {clip-path: polygon(0% 100%, 49px 99px, 100px 53px, 113px 68px, 147px 29px, 153px 40px, 160px 42px, 187px 63px, 209px 11px, 215px 25px, 219px 21px, 244px 61px, 264px 0px, 311px 60px, 330px 79px, 349px 65px, 398px 107px, 100% 100%);}
}
@keyframes montebajo {
  100% {clip-path: polygon(0% 100%, 159px 188px, 171px 185px, 174px 185px, 184px 182px, 191px 183px, 199px 179px, 202px 176px, 219px 158px, 225px 175px, 230px 172px, 245px 179px, 283px 184px, 293px 187px, 311px 192px, 318px 191px, 357px 194px, 100% 100%);}
  75% {clip-path: polygon(0% 100%, 153px 176px, 165px 174px, 167px 173px, 187px 155px, 193px 161px, 200px 147px, 203px 149px, 220px 129px, 226px 143px, 231px 140px, 240px 154px, 246px 147px, 285px 171px, 295px 174px, 313px 178px, 329px 182px, 100% 100%);}
  50% {clip-path: polygon(0% 100%, 106px 149px, 145px 128px, 158px 119px, 178px 101px, 184px 107px, 190px 92px, 201px 87px, 217px 66px, 223px 81px, 228px 78px, 244px 94px, 251px 87px, 289px 113px, 302px 125px, 316px 140px, 346px 163px, 100% 100%);}
  25% {clip-path: polygon(0% 100%, 82px 132px, 117px 97px, 131px 93px, 172px 65px, 179px 76px, 185px 77px, 199px 68px, 217px 44px, 223px 58px, 228px 55px, 244px 60px, 253px 42px, 295px 79px, 314px 87px, 331px 88px, 376px 145px, 100% 100%);}
  0% {clip-path: polygon(0% 100%, 49px 99px, 100px 53px, 113px 68px, 147px 29px, 153px 40px, 160px 42px, 187px 63px, 209px 11px, 215px 25px, 219px 21px, 244px 61px, 264px 0px, 311px 60px, 330px 79px, 349px 65px, 398px 107px, 100% 100%);}
}

.eclipse {position: relative; width: 100%; max-width: 370px; height: 170px; background:#000;margin:70px auto;}
.eclipse a {
  font-size: 3.6em;
  text-decoration: none;
  color: #fff;
  letter-spacing: 6px;
  width: 322px;
  height: 94px;
  line-height: 94px;
  position: absolute;
  top: 50%;
  left: 40%;
  margin-left: -150px;
  margin-top: -47px;
  z-index: 10;
}
.eclipse a::before, .eclipse a::after {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  position: absolute;
  display: block;
  top: -35%;
  right: -10%;
  transition: all 1s cubic-bezier(0.45, 0.76, 0.58, 0.94);
}
.eclipse a::before {background-color: #011925; z-index: -1;}
.eclipse a::after {background-color: #fff; z-index: -2; transform: scale(0.9);}
.eclipse a:hover::after {transform: scale(1) translate(10px);}

.madrid {position: relative; width: 100%; max-width: 370px; height: 170px; margin:70px auto;}
.madrid a {
  font-size: calc(var(--font-size-base) * 3.2);
  text-decoration: none;
  color: #000;
  width: 274px;
  height: 58px;
  line-height: 58px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -137px;
  margin-top: -29px;
  line-height: 1;
}
.madrid a .in, 
.madrid a .t1::before,
.madrid a .t1::after,
.madrid a .t2::before, 
.madrid a .t2::after {
  content: "";
  width: 0px;
  height: 19px;
  background-color: #000;
  position: absolute;
  transition: all 0.3s cubic-bezier(0.17, 0.67, 0.46, 1.45);
}
.madrid a .t1 {height: 60px;width: 48px;top: 0%;left: -55px;position: absolute;}
.madrid a .t1 *, 
.madrid a .t1::before, 
.madrid a .t1::after {clip-path: polygon(0 0, 100% 0, 100% 100%, 25% 100%);}
.madrid a .t1::before {right: 0;}
.madrid a .t1 .in {right: 0; top: 22px;}
.madrid a .t1::after {right: 0; top: 45px;}
.madrid a .t2 {height: 60px;width: 48px;top: 0%;right: -62px;position: absolute;}
.madrid a .t2 *, 
.madrid a .t2::before, 
.madrid a .t2::after {clip-path: polygon(0 0, 100% 0, 75% 100%, 0% 100%);}
.madrid a .t2::before {left: 0;}
.madrid a .t2 .in {left: 0; top: 22px;}
.madrid a .t2::after {left: 0; top: 45px;}
.madrid a .t1::before, 
.madrid a .t2::before {transition-delay: 0s;}
.madrid a .t1 .in, 
.madrid a .t2 .in {transition-delay: 0.1s;}
.madrid a .t1::after, 
.madrid a .t2::after {transition-delay: 0.2s;}
.madrid a:hover .in, 
.madrid a:hover .t1::before, 
.madrid a:hover .t1::after, 
.madrid a:hover .t2::before, 
.madrid a:hover .t2::after {width: 48px;}
.madrid a:hover .t1::before, 
.madrid a:hover .t2::before {transition-delay: 0.2s;}
.madrid a:hover .t1 .in, 
.madrid a:hover .t2 .in {transition-delay: 0.1s;}
.madrid a:hover .t1::after, 
.madrid a:hover .t2::after {transition-delay: 0s;}

.music-show {
  position: relative; 
  width: 100%; 
  max-width: 370px; 
  height: 170px; 
  background:#000;
  margin:70px auto;

}
.music-show a {
  font-size: 3em;
  text-decoration: none;
  color: #fff;
  width: 546px;
  height: 94px;
  position: absolute;
  top: 50%;
  left: 50%;
  padding-bottom: 50px;
  margin-left: -260px;
  margin-top: -47px;
  display: flex; 
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}
.music-show a::before {
  content: "";
  position: absolute;
  width: 334px;
  height: 326px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -167px;
  margin-top: -163px;
  background-size: contain;
  opacity: 0;
  animation: rayos 30s infinite linear;
  transition: all 1s cubic-bezier(0.17, 0.67, 0.48, 1.32);
  background-image: url("data:image/png;base64,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");
}
@keyframes rayos {
  from {transform: rotate(0);}
  to {transform: rotate(360deg);}
}
.music-show a:hover::before {opacity: 1;}

.alas {position: relative; width: 100%; max-width: 370px; height: 170px; background:#000;margin:70px auto;}
.alas a {
  font-size: 3.875em;
  text-decoration: none;
  color: #fff;
  text-align: left;
  width: 400px;
  height: 94px;
  line-height: 94px;
  position: absolute;
  top: 50%;
  left: 30%;
  margin-top: -47px;
}
.alas a::before, 
.alas a::after {
  content: "";
  position: absolute;
  background-color: rgba(255, 255, 255, 0.8);
  width: 46px;
  height: 65px;
  left: -46px;
  top: -12%;
}
.alas a::before {clip-path: polygon(0 35%, 100% 43%, 100% 100%);}
.alas a::after {clip-path: polygon(13% 0, 100% 43%, 100% 100%);}
.alas a:hover::before {animation: aleteo 0.1s infinite linear;}
.alas a:hover::after {animation: aleteo1 0.1s infinite linear;}
@keyframes aleteo {
  from {clip-path: polygon(0 35%, 100% 43%, 100% 100%);}
  to {clip-path: polygon(13% 0, 100% 43%, 100% 100%);}
}
@keyframes aleteo1 {
  from {clip-path: polygon(13% 0, 100% 43%, 100% 100%);}
  to {clip-path: polygon(0 45%, 100% 43%, 100% 100%);}
}

.margenes {
  font: normal 16px Varela Round, sans-serif;
  position: relative;
  width: 100%;
  max-width: 400px;
  height: 200px;
  background:#000;
  margin:70px auto;
}

.margenes a {
  font-size: 3.5em;
  text-decoration: none;
  color: #fff;
  width: 350px;
  height: 55px;
  line-height: 55px;
  position: absolute;
  top: 32%;
  left: 50%;
  margin-left: -165px;
  margin-top: -27.5px;
  font-weight: lighter;
}
.margenes a::before,
.margenes a::after {
  content: "";
  position: absolute;
  width: 13%;
  height: 13px;
  background-color: #000;
  transition: all 0.3s cubic-bezier(0.17, 0.67, 0.46, 0.97);
  opacity: 0;
}
.margenes a:hover::after {
  content: attr(data-af);
  position: absolute;
  width: 100%;
  height: 13px;
  transition: all 0.3s cubic-bezier(0.17, 0.67, 0.46, 0.97);
  opacity: 1;
}
.margenes a::before {top: -20px; right: 0;}
.margenes a::after {bottom: -35px; left: 0;}
.margenes a .s1 {
  position: absolute;
  background-color: #26C9FF;
  width: 0;
  height: 13px;
  top: -20px;
  box-shadow: 0px 0px 0px #26C9FF;
  right: 13%;
  border-radius: 20px 10px 10px 20px;
  transition: all 0.3s cubic-bezier(0.17, 0.67, 0.46, 0.97);
}
.margenes a .s1::before {
  content: "";
  position: absolute;
  left: 0;
  top: -1%;
  right: 0;
  bottom: -15%;
  box-shadow: 0px 0px 0px #26C9FF;
  border-radius: 20px 10px 10px 20px;
}
.margenes a .s1::after {
  content: "";
  position: absolute;
  right: 0;
  left: 0%;
  top: 0;
  bottom: 0;
  background-color: #FFFFFF;
  filter: blur(2px);
  box-shadow: inset 0px 0px 10px #26C9FF;
  border-radius: 20px 10px 10px 20px;
}
.margenes a .s2 {
  position: absolute;
  background-color: #FF0000;
  width: 0;
  height: 13px;
  bottom: -35px;
  box-shadow: 0px 0px 0px #FF0000;
  left: 13%;
  border-radius: 10px 20px 20px 10px;
  z-index: 1000;
  transition: all 0.3s cubic-bezier(0.17, 0.67, 0.46, 0.97);
}
.margenes a .s2::before {
  content: "";
  position: absolute;
  left: 0;
  top: -1%;
  right: 0;
  bottom: -15%;
  box-shadow: 0px 0px 0px #FF0000;
  border-radius: 10px 20px 20px 10px;
}
.margenes a .s2::after {
  content: "";
  position: absolute;
  right: 0;
  left: 0%;
  top: 0;
  bottom: 0;
  background-color: #FFFFFF;
  filter: blur(2px);
  box-shadow: inset 0px 0px 10px #FF0000;
  border-radius: 10px 20px 20px 10px;
}
.margenes a:hover::before {opacity: 1;}
.margenes a:hover::after {opacity: 1;}
.margenes a:hover .s1 {width: 87%; box-shadow: 0px 0px 30px #26C9FF; top: -20px;}
.margenes a:hover .s1::before {box-shadow: 0px 0px 70px #26C9FF;}
.margenes a:hover .s2 {width: 87%; box-shadow: 0px 0px 30px #FF0000; bottom: -90px;}
.margenes a:hover .s2::before {box-shadow: 0px 0px 70px #FF0000;}

.svg_hover {
  position: relative;
  width: 100%;
  max-width: 800px;
  height: 350px;
  margin: 0 auto;
  background: #082330;
  background-size: 0.12em 100%; 
  font: 12rem/1 Arial;
  opacity: 0.2;
  transition: .3s linear;
}
.svg_hover:hover {transition: .3s linear; opacity: 1;}
.svg_hover .text--line {font-size: 0.5em;}
.svg_hover .text--line1 {font-size: 1em;}
.svg_hover .text--line2 {font-size: 0.7em;}

.svg_hover svg {position: absolute; width: 100%; height: 100%;}

.text-copy {
  fill: none;
  stroke: white;
  stroke-dasharray: 7% 28%;
  stroke-width: 3px;
}
.text-copy:nth-child(1) {stroke: #360745; stroke-dashoffset: 7%;}
.text-copy:nth-child(2) {stroke: #D61C59; stroke-dashoffset: 14%;}
.text-copy:nth-child(3) {stroke: #E7D84B; stroke-dashoffset: 21%;}
.text-copy:nth-child(4) {stroke: #EFEAC5; stroke-dashoffset: 28%;}
.text-copy:nth-child(5) {stroke: #1B8798; stroke-dashoffset: 35%;}
.svg_hover:hover .text-copy {animation: stroke-offset 9s infinite linear;}
@keyframes stroke-offset {
  50% {
    stroke-dashoffset: 35%;
    stroke-dasharray: 0 87.5%;
  }
}

/* ESTILO PARA PAGINA ICONOS HOVER */

#contenido-iconos ul {list-style: none;}
#contenido-iconos a {color: inherit;text-decoration: none;}
#contenido-iconos hr {border-color: var(--hr-color);margin: 20px 0;}

/* Estilo para el div que contiene los span del cartel de cabecera con efecto relleno */

#contenido-iconos .nombre {
  width: 100%;
  max-width: 90%;
  margin: 0 auto;
  text-align: center;
  word-spacing: 20px;
  letter-spacing: 10px;
  background-color: var(--white);
}
#contenido-iconos .relleno {
  margin-top: 25px;
  display: inline-block;
  cursor: pointer;
  transition: all 0.5s;
}
#contenido-iconos .derecha, #contenido-iconos .izq,
#contenido-iconos .arriba, #contenido-iconos .abajo {display: inline-block; width:auto; height:100%;transition: all 0.5s;}
#contenido-iconos .relleno:hover .derecha {transition: all 0.5s; transform: scale(1.2);}
#contenido-iconos .relleno:hover .izq {transition: all 0.5s; transform: scale(0.8);}
#contenido-iconos .relleno:hover .abajo {transition: all 0.5s; transform: scale(0.8);}
#contenido-iconos .relleno:hover .arriba {transition: all 0.5s; transform: scale(1.2) rotateX(360deg); letter-spacing: 30px;}
#contenido-iconos .has-bg {display:inline-block;height: 50px;background: linear-gradient(45deg, #0066ff 40%, #00ffff);cursor:pointer;transition:all 0.6s ease .1s;}
#contenido-iconos .has-bg:hover {transition: all 0.6s ease .1s;background: linear-gradient(-45deg, #0066ff 40%, #00ffff);height: 70px;padding: 20px;}
#contenido-iconos .has-bg .medio {display: inline-block; width: 0; height: 0; transform: translate(0, -50px);overflow:hidden; transition: all 0.5s;}
#contenido-iconos .has-bg:hover .medio {transition: all 0.5s;width:auto;height:auto;font-size: 1.2em;color: white; overflow: visible;}
#contenido-iconos .nombre a {
  position: relative;
  display: inline-block;
  font-weight: bold;
  font-size: calc(var(--font-size-base) * 2.5);
  line-height: 1.4;
  overflow: hidden;
  color: var(--fill-color);
  -webkit-text-stroke: 2px var(--stroke-color);
  text-shadow: 4px 4px 3px var(--stroke-color); 
  /*
    1px -1px 0.5 var(--stroke-color), 
    -1px 1px 0.5 var(--stroke-color), 
     1px 1px 0.5 var(--stroke-color); 
  */
}
#contenido-iconos .has-bg a {color: var(--fill-color);-webkit-text-stroke: 2px var(--stroke-color);}
#contenido-iconos .nombre .outer {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  color: var(--secondary-color);
  transform: translateX(-100%);
}
#contenido-iconos .nombre .outer1 {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  color: var(--white);
  transform: translateX(-100%);
}

#contenido-iconos .nombre .inner {display: inline-block;transform: translateX(100%);}

#contenido-iconos .nombre a .outer, #contenido-iconos .nombre a .inner,
#contenido-iconos .nombre a .outer1 {transition: transform 0.5s cubic-bezier(0.29, 0.73, 0.74, 1.02);}

#contenido-iconos .nombre a:hover .outer, #contenido-iconos .nombre a:hover .outer1,
#contenido-iconos .nombre a:hover .inner {transform: none;}

/* Animación en diferentes direcciones */

[data-animation="izq"] .outer {transform: translateX(100%);}
[data-animation="izq"] .outer1 {transform: translateX(100%);}
[data-animation="izq"] .inner {transform: translateX(-100%);}
[data-animation="arriba"] .outer {transform: translateY(100%);}
[data-animation="arriba"] .inner {transform: translateY(-100%);}
[data-animation="abajo"] .outer {transform: translateY(-100%);}
[data-animation="abajo"] .inner {transform: translateY(100%);}

/*Estilos para el contenedor de listas*/

#contenido-iconos #caja-menus {
  font: 22px sans-serif;
  background: var(--body-bg-color);
  color: var(--text-color1);
  display: flex;
  flex-direction: column;
}

#caja-menus .menu, #caja-menus .menu1, #caja-menus .menu4, #caja-menus .menu5 {display: flex; justify-content: center;}

#caja-menus .menu li, #caja-menus .menu1 li, #caja-menus .menu2 li,
#caja-menus .menu3 li, #caja-menus .menu4 li, #caja-menus .menu5 li,
#caja-menus .menu6 li, #caja-menus .menu7 li {margin-right: 70px;}

#caja-menus .menu a {position:relative;display:block;overflow:hidden;}
#caja-menus .menu a span {transition: transform 0.2s ease-out;}
#caja-menus .menu a span:first-child {display: inline-block; padding:10px;}
#caja-menus .menu a span:last-child {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-100%);
}
#caja-menus .menu i {font-size: 30px;}
#caja-menus .menu a:hover span:first-child {transform: translateY(100%);}
#caja-menus .menu a:hover span:last-child,
#caja-menus .menu[data-animation] a:hover span:last-child {transform:none;}

/* Animaciones para las siguientes listas */

#caja-menus .menu[data-animation="to-top"] a span:last-child {transform: translateY(100%);}
#caja-menus .menu[data-animation="to-top"] a:hover span:first-child {transform: translateY(-100%);}
#caja-menus .menu[data-animation="to-right"] a span:last-child {transform: translateX(-100%);}
#caja-menus .menu[data-animation="to-right"] a:hover span:first-child {transform: translateX(100%);}
#caja-menus .menu[data-animation="to-left"] a span:last-child {transform: translateX(100%);}
#caja-menus .menu[data-animation="to-left"] a:hover span:first-child {transform: translateX(-100%);}

/* listas con efectos laterales */

#caja-menus .menu1 a {position: relative;display: block;padding: 10px;overflow: hidden;transition: color 0s 0.25s var(--timing-function);}
#caja-menus .menu1 a::before, #caja-menus .menu1 a::after {position: absolute; left: 0; width: 100%;}
#caja-menus .menu1 a::before {
  content: '';
  top: 50%;
  transform: translate(-101%, -50%);
  height: 50%;
  z-index: 1;
  background: var(--text-color);
  transition: transform 0.5s var(--timing-function);
}
#caja-menus .menu1 a::after {
  content: attr(data-icon);
  font-family: FontAwesome;
  font-size: 30px;
  font-weight:900;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--text-color1);
  opacity: 0;
  transition: opacity 0s 0.25s var(--timing-function);
}
#caja-menus .menu1 a:hover {color: transparent;}
#caja-menus .menu1 a:hover::before {transform: translate(101%, -50%);}
#caja-menus .menu1 a:hover::after {opacity: 1;}

/* ANIMATION hacia la izquierda */

#caja-menus .menu1[data-animation="to-left"] a::before {transform: translate(101%, -50%);}
#caja-menus .menu1[data-animation="to-left"] a:hover::before {transform: translate(-101%, -50%);}

/* Animacion hacia arriba */

#caja-menus .menu1[data-animation="to-top"] a::before {transform: translate(0, 101%);}
#caja-menus .menu1[data-animation="to-top"] a:hover::before {transform: translate(0, -201%);}

/* Animacion para abajo */

.menu1[data-animation="to-bottom"] a::before {transform: translate(0, -201%);}
.menu1[data-animation="to-bottom"] a:hover::before {transform: translate(0, 101%);}

/* Listas con efectos subrayado */

#caja-menus .menu2, #caja-menus .menu3, #caja-menus .menu6,
#caja-menus .menu7 {display: flex;justify-content: space-around;}

#caja-menus .menu2 a {position: relative; display: block ;padding: 5px;}

#caja-menus .menu2 a::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(to right, #b47dcd, #e878a2, #eb85ab);
  z-index: 1;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s ease-in-out;
}
#caja-menus .menu2 a:hover::before {transform: scaleX(1);}

/* ANIMATIONS */

#caja-menus .menu2[data-animation="to-left"] a::before {transform-origin: right;}
#caja-menus .menu2[data-animation="center"] a::before {transform-origin: center;}

/* Subrayado que aparece por un lado y desaparece por el otro */

#caja-menus .menu2[data-animation="right"] a::before {transform-origin: right;}
#caja-menus .menu2[data-animation="right"] a:hover::before {
  transform-origin: left;
  transform: scaleX(1);
  transition-timing-function: cubic-bezier(0.2, 1, 0.82, 0.94);
}

/* Listas con efecto borde rectangular */

#caja-menus .menu3 a, #caja-menus .menu4 a, #caja-menus .menu5 a,
#caja-menus .menu6 a, #caja-menus .menu7 a {position: relative;display: block;padding: 10px;}

#caja-menus .menu3 .border {
  position:absolute;
  left:0;
  background:currentColor;
  transition: transform var(--transition-duration) ease-in-out var(--transition-delay);
}
#caja-menus .menu3 .border-top, #caja-menus .menu3 .border-bottom {width:100%;height:1px;transform: scaleX(0);}
#caja-menus .menu3 .border-left, #caja-menus .menu3 .border-right {width:1px;height:100%;transform: scaleY(0);}
#caja-menus .menu3 .border-top, #caja-menus .menu3 .border-left, #caja-menus .menu3 .border-right {top:0;}
#caja-menus .menu3 .border-bottom {bottom:0;transform-origin:bottom right;}
#caja-menus .menu3 .border-top {transform-origin:top left;}
#caja-menus .menu3 .border-left {transform-origin:bottom left;}
#caja-menus .menu3 .border-right {left:auto;right:0;transform-origin:top right;}
#caja-menus .menu3 a:hover .border-top, #caja-menus .menu3 a:hover .border-bottom {transform:scaleX(0.8);}
#caja-menus .menu3 a:hover .border-left, #caja-menus .menu3 a:hover .border-right {transform:scaleY(0.6);}
#caja-menus .menu3 a:hover .border-top {transition-delay: var(--transition-delay);}
#caja-menus .menu3 a:hover .border-right {transition-delay: calc(var(--transition-delay)*2);}
#caja-menus .menu3 a:hover .border-bottom {transition-delay: calc(var(--transition-delay)*3);}
#caja-menus .menu3 a:hover .border-left {transition-delay: calc(var(--transition-delay)*4);}
#caja-menus .menu3 a:hover .border-top {animation: colorin var(--transition-duration) ease-in-out calc(var(--transition-delay) * 5) 1 forwards;}
@keyframes colorin {
  0% {background:currentColor; height: 1px; transform: scale(0.8);}
  100% {background: red; height: 3px; transform: scaleX(0.5);}
}
#caja-menus .menu3 a:hover .border-right {animation: colorin1 var(--transition-duration) ease-in-out calc(var(--transition-delay) * 6) 1 forwards;}
@keyframes colorin1 {
  0% {background: currentColor; width: 1px; transform: scale(0.6);}
  100% {background: yellow; width: 3px; transform: scaleY(0.9);}
}
#caja-menus .menu3 a:hover .border-bottom {animation: colorin2 var(--transition-duration) ease-in-out calc(var(--transition-delay) * 7) 1 forwards;}
@keyframes colorin2 {
   0% {background:currentColor; height: 1px; transform: scale(0.8);}
  100% {background: red; height: 3px; transform: scaleX(0.5);}
}
#caja-menus .menu3 a:hover .border-left {animation: colorin3 var(--transition-duration) ease-in-out calc(var(--transition-delay) * 8) 1 forwards;}
@keyframes colorin3 {
  0% {background: currentColor; width: 1px; transform: scale(0.6);}
  100% {background: yellow; width: 3px; transform: scaleY(0.9);}
}

/* Animación de borde rectangular que aparece desde los dos lados */

#caja-menus .menu3[data-animation="diagonal"] .border-left {transform-origin:top left;}
#caja-menus .menu3[data-animation="diagonal"] .border-right, .menu3[data-animation="diagonal"] .border-bottom {transform-origin:bottom right;}
#caja-menus .menu3[data-animation="diagonal"] a:hover [class^=border] {transition-delay:0s;}

/* Animación de elipse svg */

.menu4 a svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 120%;
  height: 120%;
}
.menu4 a svg path {
  fill: transparent;
  stroke-width: 5px;
  stroke: currentColor;
  stroke-dasharray: 1210.709716796875;
  stroke-dashoffset: -1210.709716796875;
  transition: all 0.5s cubic-bezier(0.29, 0.68, 0.74, 1.02);
}
.menu4 a:hover svg path {stroke-dashoffset: 0; fill: rgba(0, 0, 0, 0.3);}

/* Animación de estrella svg */

.menu5 a svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 140%;
  height: 140%;
}
.menu5 a svg path {
  fill: rgba(0, 0, 0, 0.3);
  stroke-width: 5px;
  stroke: white;
  stroke-dasharray: 626.7821655273438;
  stroke-dashoffset: -626.7821655273438;
  transition: stroke-dashoffset 0.5s cubic-bezier(0.29, 0.68, 0.74, 1.02);
}
.menu5 a:hover svg path {stroke-dashoffset: 0;}

/* Efecto subrayado con linea ondulada svg */

.menu6 a svg {position: absolute;left: 0;bottom: 0;width: 100%;}
.menu6 a svg path {
  fill: transparent;
  stroke-width: 10px;
  stroke: currentColor;
  stroke-dasharray: 547.4111328125;
  stroke-dashoffset: 547.4111328125;
  transition: stroke-dashoffset 0.5s cubic-bezier(0.29, 0.68, 0.74, 1.02);
}
.menu6 a:hover svg path {stroke-dashoffset: 0;}

/* Aparición de flecha SVG */

.menu7 a svg {position: absolute;bottom: -20px;left: 50%;transform: translateX(-50%) rotateX(180deg);}
.menu7 a svg path {
  fill: transparent;
  stroke-width: 4px;
  stroke: currentColor;
  stroke-dasharray: 89.7506103515625;
  stroke-dashoffset: -89.7506103515625;
  transition: stroke-dashoffset 0.5s cubic-bezier(0.29, 0.68, 0.74, 1.02);
}
.menu7 a:hover svg path {stroke-dashoffset: 0;}

/* ESTILO PARA PAGINA MODAL-TOOLTIP */

#contenido-globos #tooltip span {position: relative; text-decoration: underline; font-weight: bold;}

#contenido-globos .flex {display:flex; justify-content: flex-start; margin-left: 30px;}

.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
  z-index: 100;
}
.overlay:target {visibility: visible;opacity: 1;}
.overlay1 {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
  z-index: 100;
}
.overlay1:target {visibility: visible;opacity: 1;}
#popupBody {
  width: 46%;
  padding: 2%;
  border-radius: 15px;
  box-shadow: 0 0 5px #CCC;
  background: #FFF;
  position: relative;
  top: -20%;
  margin: 20% auto;
  transition: all 5s ease-in-out;
}
#popupBody1 {
  max-width: 800px;
  padding: 2%;
  border-radius: 15px;
  box-shadow: 0 0 5px #CCC;
  background: #FFF;
  position: relative;
  left: 20%;
  /* margin: 20% auto; */
  transition: all 5s ease-in-out;
}
#popupBody h2 {text-align: center;}
#popupBody #pop-formulario {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60vh;
  font-family: cursive;
}
#popupBody #pop-formulario a {text-decoration: none; color: #333;}
#popupBody input, #popupBody textarea {width: 100%;padding: 5px;outline: none;}
#popupBody label {line-height: 1.9rem;} /* equivalen a 30.4px */
#popupBody input[type="submit"] {
  transform: translate(2.2%);
  padding: 3px;
  margin-top: 0.6rem;
  font-family: cursive;
  font-weight: bold;
  cursor: pointer;
}
#popupBody fieldset {padding: 20px 40px;}
#cerrar {
  position: absolute;
  top: 20px;
  right: 30px;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #F00;
  transition: all 200ms;
}
#cerrar1 {
  position: absolute;
  top: 20px;
  right: 30px;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #F00;
  transition: all 200ms;
}
#galeria {
  padding: 0;
  margin: 40px auto 0 auto;
  list-style-type: none;
  height: 200px;
  width: 774px;
  border: 1px solid #888;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
#galeria li {width: 60px;height: 200px;border-left: 2px solid #000;}
#galeria li img {border: 0;}
#galeria li:hover {transition: 0.3s linear;background: #eee;width: 400px;}
#galeria li:hover img {width: 400px;}

/* Estilo para ventana modal con js */

.ventana {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transform: scale(1.1);
  transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
}
#cont-button {
  display: inline-block;
  margin-left: 30px;
  width: 250px;
  height: 100px;
  display: flex;
  font-family: "Inter", Arial;
  justify-content: center;
  align-items: center;
  background-color: #020112;
  overflow: hidden;
}
#cont-button::before {
  content: "";
  position: relative;
  inset: 40% -60% 0 -60%;
  background-image: radial-gradient(ellipse at bottom, #1D0559 0%, #020112 50%);
  opacity: 0.4;
}
.trigger {
  --button-background: #09041e;
  --button-color: #fff;
  --button-shadow: rgba(33, 4, 104, 0.2);
  --button-shine-left: rgba(120, 0, 245, 0.5);
  --button-shine-right: rgba(200, 148, 255, 0.65);
  --button-trigger-start: #B000E8;
  --button-trigger-end: #009FFD;
  appearance: none;
  outline: none;
  border: none;
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  border-radius: 11px;
  position: relative;
  line-height: 24px;
  cursor: pointer;
  color: var(--button-color);
  padding: 0;
  margin: 0;
  background: none;
  z-index: 1;
  box-shadow: 0 8px 20px var(--button-shadow);
}
.trigger .gradient {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  mask-image: radial-gradient(white, black);
  transform: scaleY(1.02) scaleX(1.005) rotate(-0.35deg);
}
.trigger .gradient::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  transform: scale(1.05) translateY(-44px) rotate(0deg) translateZ(0);
  padding-bottom: 100%;
  border-radius: 50%;
  background: linear-gradient(90deg, var(--button-shine-left), var(--button-shine-right));
  animation: rotate linear 2s infinite;
}
.trigger span {
  z-index: 1;
  position: relative;
  display: block;
  padding: 10px 0;
  width: 132px;
  border-radius: inherit;
  background-color: var(--button-background);
  overflow: hidden;
  mask-image: radial-gradient(white, black);
}
.trigger span::before {
  content: "";
  position: absolute;
  left: -16px;
  top: -16px;
  transform: translate(var(--pointer-x, 0px), var(--pointer-y, 0px)) translateZ(0);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: var(--button-trigger, transparent);
  opacity: var(--button-trigger-opacity, 0);
  transition: opacity var(--button-trigger-duration, 0.5s);
  filter: blur(20px);
}
.trigger:hover {
  --button-trigger-opacity: 1;
  --button-trigger-duration: .25s;
}

@keyframes rotate {
  to {transform: scale(1.05) translateY(-44px) rotate(360deg) translateZ(0);}
}
.contenido-ventana {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  padding: 1rem 1.5rem;
  width: 24rem;
  border-radius: 0.5rem;
}
.boton-cerrar {
  float: right;
  width: 1.5rem;
  line-height: 1.5rem;
  text-align: center;
  cursor: pointer;
  border-radius: 0.25rem;
  background-color: lightgrey;
}
.boton-cerrar:hover {background-color: darkgrey;}
.mostrar-ventana {
  opacity: 1;
  visibility: visible;
  z-index: 1000000;
  transform: scale(1.0);
  transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
}

/*
  Estilo para globos en hover del parrafo en div id="tooltip" 

  #tooltip {}
*/

[data-span] {
  position: relative; 
  cursor: pointer; 
  text-decoration: underline; 
  font-weight: bold; 
  color: var(--secondary-color);
}
[data-span]::before {
  content: attr(data-span);
  display: none; 
  position: absolute;
  background: rgba(51, 51, 0, .6);
  color: white;
  -webkit-font-smoothing: antialiased;
  width: 250px;
  font-size: 0.8em;
  padding: 8px;
  height: auto;
  border-radius: 10px;
  filter: drop-shadow(0px 0px 5px #333);
  bottom: 25px;
  left: calc(100% - 90%);
  pointer-events: none;
  z-index: 100;
}
[data-span]::after {
  content: "";
  height: 1px;
  width: 1px;
  border: 6px solid transparent;
  border-top-color: rgba(51, 51, 0, .6);
  position: absolute;
  bottom: 12px;
  left: 50%;
  display: none;
}
[data-span]:hover::before, [data-span]:hover::after {display: block;}

/* Estilo para el párrafo con class="mejorado" */

.nomejorado, .mejorado {border: 2px solid black; padding: 10px;}
.mejorado [data-span] {
  position: relative; 
  cursor: pointer; 
  text-decoration: underline; 
  font-weight: bold; 
  color: var(--secondary-color);
  transition: 0.6s linear;
}
.mejorado [data-span]::before {
  content: attr(data-span);
  display: block; 
  position: absolute;
  background: rgba(51, 51, 0, .6);
  color: white;
  -webkit-font-smoothing: antialiased;
  width: 250px;
  font-size: 0.8em;
  padding: 8px;
  height: auto;
  border-radius: 10px;
  filter: drop-shadow(0px 0px 5px #333);
  bottom: 25px;
  left: calc(100% - 90%);
  pointer-events: none;
  opacity: 0;
  z-index: 100;
  transition: 0.6s linear;
}
.mejorado [data-span]::after {
  content: "";
  height: 1px;
  width: 1px;
  border: 6px solid transparent;
  border-top-color: rgba(51, 51, 0, .6);
  position: absolute;
  bottom: 12px;
  left: 50%;
  display: block;
  opacity: 0;
  pointer-events: none;
  transition: 0.6s linear;
}
.mejorado [data-span]:hover::before, .mejorado [data-span]:hover::after {transition: 0.6s linear; opacity: 1;}

/* clase pico-- */

[class*="pico--"] {position: relative; display: inline-block;}
[class*="pico--"]::before, [class*="pico--"]::after {
  position: absolute;
  transform: translate3d(0, 0, 0);
  visibility: hidden;
  opacity: 0;
  z-index: 1000000;
  transition: 0.3s ease; 
  transition-delay: 0ms;
}
[class*="pico--"]:hover::before, [class*="pico--"]:hover::after {
  visibility: visible;
  opacity: 1;
  transition-delay: 100ms;
}
[class*="pico--"]::before {
  content: '';
  position: absolute;
  background: transparent;
  border: 6px solid transparent;
  z-index: 1000001;
}
[class*="pico--"]::after {
  background: #3796d1;
  color: #ddf8c6;
  border: 4px solid #a9c0cf;
  padding: 8px 10px;
  font-family: "Terminal Dosis", sans-serif;
  font-size: 14px;
  white-space: nowrap;
  line-height: 14px;
  border-radius: 4px;
  box-shadow: 2px 2px 10px rgba(65, 105, 225, 0.8);
}
[class*="pico--"][aria-label]::after {content: attr(aria-label);}
[class*="pico--"][data-pico]::after {content: attr(data-pico);}
[aria-label='']::before, [aria-label='']::after, [data-pico='']::before, [data-pico='']::after {display: none !important;}

/* 
  Voy a crear los modificadores de la clase pico para hacer que salgán por
  arriba, por abajo, derecha e izquierda 
*/

.pico--arriba::before {
  border-color: rgba(194, 225, 245, 0);
  border-bottom-color: #a9c0cf;
  border-width: 26px;
  margin-left: -26px;
}
.pico--arriba::before, .pico--arriba::after {bottom: 100%; left: 50%;}
.pico--arriba::after {transform: translateX(-50%);}
.pico--arriba:hover::before {transform-origin: 50% 50%; transform: translateY(40px) rotate(180deg);}
.pico--arriba:hover::after {
  transform: translateX(-50%) translateY(-10px);
  /* transition: all 0.3s ease 0s; */
}

/* subclases para width de clase pico */

.pico--small::after, .pico--medium::after, .pico--large::after {
  white-space: normal;
  line-height: 1.4em;
  word-break: break-word;
}
.pico--small::after {width: 80px;}
.pico--medium::after {width: 150px;}
.pico--large::after {width: 300px;}

/* Clase sombra_svg-- */

[class*="sombra_svg--"] {position: relative; display: inline-block;}
[class*="sombra_svg--"]::before, [class*="sombra_svg--"]::after {
  position: absolute;
  transform: translate3d(0, 0, 0);
  visibility: hidden;
  opacity: 0;
  z-index: 1000000;
  pointer-events: none;
  transition: 0.3s ease;
  transition-delay: 0ms;
}
[class*="sombra_svg--"]:hover::before, [class*="sombra_svg--"]:hover::after {
  visibility: visible;
  opacity: 1;
  transition-delay: 100ms;
}
[class*="sombra_svg--"]::before {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  background-color: #ff9;
  /* box-shadow: 0px 0px 5px #333; */
}
[class*="sombra_svg--"]::after {
  background: #ff9;
  filter: drop-shadow(0px 0px 5px #333);
  font-family: Georgia, "Times New Roman", Times, serif;
  padding: 10px 10px;
  font-size: 16px;
  line-height: 16px;
  white-space: nowrap;
}
[class*="sombra_svg--"][aria-label]::after {content: attr(aria-label);}
[class*="sombra_svg--"][data-sombra]::after {content: attr(data-sombra);}
[aria-label='']::before, [aria-label='']::after, [data-sombra='']::before, [data-sombra='']:after {display: none !important;}

/* estilo para que los globos aparezcan por arriba */

.sombra_svg--top::before {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  background-color: #ff9;
  box-shadow: 0px 0px 5px #333;
}
.sombra_svg--top::before, .sombra_svg--top::after {bottom: 100%;left: 50%;}
.sombra_svg--top::after {transform: translateX(-50%);}
.sombra_svg--top:hover::before {transform: translateY(6px) rotate(45deg);}
.sombra_svg--top:hover::after {transform: translateX(-50%) translateY(0px);}

/* Estilos para que aparezcan abajo */

.sombra_svg--bottom::before {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  background-color: #ff9;
  box-shadow: 0px 0px 5px #333;
}
.sombra_svg--bottom::before, .sombra_svg--bottom::after {top: 100%;left: 50%;}
.sombra_svg--bottom::after {transform: translateX(-50%);}
.sombra_svg--bottom:hover::before {transform: translateY(-6px) rotate(45deg);}
.sombra_svg--bottom:hover::after {transform: translateX(-50%) translateY(0px);}


/* subclases para el ancho de sombra_svg pequeño, mediano y largo. */

.sombra_svg--small::after, .sombra_svg--medium::after, .sombra_svg--large::after {
  white-space: normal;
  line-height: 1.4em;
  word-break: break-word;
}
.sombra_svg--small::after {
  width: 80px;
}
.sombra_svg--medium::after {
  width: 150px; 
}
.sombra_svg--large::after {
  width: 300px;
}

/* ESTILO DE LA PAGINA MODO CLARO OSCURO */

#contenido .card .card_header h2 {display: inline-block;}
#contenido .modo-oscuro-card {position: relative; z-index: 10;}
#contenido .card .card_header h2:hover {
 transition: .5s 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-modo-oscuro p.enlace {display: inline-block; padding: 3px; background: var(--body-bg);}

/* Estilos para toda la sección oscura con input */

.seccion-oscura {
  border: var(--card-border-width) solid var(--card-border-color);
  box-shadow: 2px 2px 8px var(--card-shadow);
  background: var(--card-bg);
}
.body {
  position: relative;
  width: 80vw;
  height: 45vh;
  background-color: #fff;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  transition: .6s linear;
}
.body p, .body1 p {display: inline-block; font-size: calc(var(--font-size-base) * 1.1); margin-left: 10px;}
.body .content {
  position: absolute;
  left: 80%;
  height: 21vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0px auto;
  text-align: center;
  z-index: 100;
  transition: .5s;
}
.body .content .circle {
  position: relative;
  border-radius: 100%;
  width: 3rem;
  height: 3rem;
  background: linear-gradient(40deg, #FF0080,#FF8C00 70%);
  margin: auto;
  transform: translate(-30px, -30px);
  transition: .3s;
}
.body .content .circle .crescent {
  position: absolute;
  border-radius: 100%;
  right: 0;
  width: 2.2rem;
  height: 2.2rem;
  background: white;
  transform: scale(0);
  transform-origin: top right;
  transition: transform .3s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.body .content span.heading {display: block; font-size: 140%; font-weight: bolder;}
.body .content label, .body .content label .toggle {height: 2.8rem; border-radius: 100px;}
.body .content label {
  width: 100%;
  background-color: rgba(0,0,0,.1);
  border-radius: 100px;
  position: relative;
  cursor: pointer;
  transform: translateY(-40px);
}
.body .content label .toggle {
  position: absolute;
  width: 50%;
  background-color: #fff;
  box-shadow: 0 2px 15px rgba(0,0,0,.15);
  transition: transform .3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.body .content label .names {
  font-size: 90%;
  font-weight: bolder;
  width: 80%;
  margin-left: 17.5%;
  margin-top: .5%;
  position: absolute;
  display: flex;
  justify-content: space-between;
  user-select: none;
}
.body .content label .names span.light {transform: translate(-10px, 10px);}
.body .content label .names span.dark {transform: translate(-5px, 10px);}
.texto {position: relative; width: 100%; max-width: 90%;}
.texto h2 {display: inline-block; margin-left: 10px;}
.texto a {display: inline-block; color: var(--secondary-color);}
.texto .explicacion {height: 0; opacity: 0; z-index: -1; position: relative;}

/* code-block */
.texto .code-oscuro {height: 0; opacity: 0;}
.body1 {
  position: sticky;
  margin: 0 auto;
  height: 60vh;
  background-color: #fff; /*rgba(200, 220, 225, .7);*/
  color: black;
  transition: 2s linear;
}
.body1 .flex {width: 100%; max-width: 80%; margin: 0 auto; display: flex; flex-wrap: nowrap; justify-content: space-evenly; transition: 1.5s; background-color: var(--bg-color-pre);}
.body1 .flex .flex1 {display: flex; flex-direction: column; align-items: center; background: transparent;}
.body1 .flex .flex1 .none {display: inline-block; height: 0; opacity: 0;}
.body1 img {display: flex; height: 180px; width: 130px; margin: 10px; border: 1px solid white; cursor: pointer; transition: 4s linear;}
.body1 img:hover {transition: .5s; transform-origin: 50% 100%; transform: scaleY(1.2); filter: saturate(200%);}
.body1 h2 {display: inline-block; color: var(--secondary-color); font-family: arial; margin-left: 60px;}

/* Estilos cuando clicas el input checkbox */

[type="checkbox"] {display: none;}
[type="checkbox"]:checked + .body {transition: .6s; background-color:  #26242E; color: white; height: 100%;}
[type="checkbox"]:checked + .body .content {transition: .5s; transform: translate(0px, 80px) scale(0.8);}
[type="checkbox"]:checked + .body .toggle {transform: translateX(100%); background-color: #34323D;}
[type="checkbox"]:checked + .body .dark {opacity: 1;}
[type="checkbox"]:checked + .body .light {opacity: .5;}
[type="checkbox"]:checked + .body .crescent{transform: scale(1); background: #26242E;}
[type="checkbox"]:checked + .body .circle{transition: .3s; background: linear-gradient(40deg, #8983F7, #A3DAFB 70%);transform: translate(30px, -30px);}
[type="checkbox"]:checked + .body .texto p {transition: .3s; padding: 5px; background: rgba(0, 200, 200, .3);}
[type="checkbox"]:checked + .body .texto .explicacion {transition: 1s; height: 100%; opacity: 1; z-index: 50;}
[type="checkbox"]:checked + .body .texto .code-oscuro{transition: 3s 2s; height: 100%; opacity: 1; z-index: 50;}
[type="checkbox"]:checked + .body .texto .cartel {position: absolute; display: inline-block; color: var(--button-color) !important; animation: cartel-oscuro 2s linear .2s infinite alternate;}
@keyframes cartel-oscuro {
  0% {transform: translateY(0px) scale(1); text-transform: none;}
  100% {transform: translateY(50px) scale(2); text-transform: uppercase; background: var(--body-bg-color); padding: 3px;}
}
[type="checkbox"]:checked + .body ~ .body1 {transition: 2s linear;height: 200%;/* width: 90vw; */background-color: var(--bg-color-pre);}
[type="checkbox"]:checked + .body ~ .body1 p {transition: .6s; padding: 5px; margin-left: 50px; background: rgba(0, 200, 200, .3); color: white}
[type="checkbox"]:checked + .body ~ .body1 .texto .explicacion {transition: 1s; height: 100%; opacity: 1; z-index: 100;}
[type="checkbox"]:checked + .body ~ .body1 h1 {transition: .6s; transform: translateX(10%); color: white; font-family: "Alfa Slab One"; font-weight: bolder; text-shadow: 4px 4px 5px #0005;}
[type="checkbox"]:checked + .body ~ .body1 .flex {transition: 1s; flex-wrap: wrap; align-items: center; margin: 0 auto;}
[type="checkbox"]:checked + .body ~ .body1 .flex img {transition: 1s linear; margin: 80px; filter: blur(3px);}
[type="checkbox"]:checked + .body ~ .body1 .flex img:hover {transition: .5s; transform: rotateY(360deg) skewX(10deg) skewY(10deg) scaleX(1.2) scaleY(0.8); filter: blur(1px) saturate(200%);}
[type="checkbox"]:checked + .body ~ .body1 .flex .flex1:nth-child(1) {transition: 3s; /*transform: rotateY(360deg) skewX(10deg) skewY(10deg);*/ order: 5; border-radius: 30px; box-shadow: 18px 8px 5px rgba(0, 0, 0, .5);}
[type="checkbox"]:checked + .body ~ .body1 .flex .flex1:nth-child(2) {transition: 3.2s; /*transform: rotateX(40deg) rotateY(360deg);*/ order: 4; box-shadow: 3px 18px 5px rgba(0, 0, 255, .3);}
[type="checkbox"]:checked + .body ~ .body1 .flex .flex1:nth-child(3) {transition: 3.4s; /*transform: rotateX(-360deg) skewX(-10deg) skewY(-10deg);*/ order:3; border-radius: 30px; box-shadow: -18px -8px 5px rgba(255, 255, 255, .5);}
[type="checkbox"]:checked + .body ~ .body1 .flex .flex1:nth-child(4) {transition: 3.6s; /*transform: rotateX(360deg) skewX(-10deg) skewY(-10deg);*/ order:2; border-radius: 30px; box-shadow: -18px -8px 5px rgba(255, 255, 255, .5);}
[type="checkbox"]:checked + .body ~ .body1 .flex .flex1:nth-child(5) {transition: 3.8s; /*transform: rotateX(40deg) rotateY(360deg);*/ order: 1; box-shadow: -3px 18px 5px rgba(0, 255, 0, .3);}
[type="checkbox"]:checked + .body ~ .body1 .flex .flex1:nth-child(6) {transition: 4s; /*transform: rotate(-360deg) skewX(10deg) skewY(10deg);*/ order: 0; border-radius: 30px; box-shadow: 18px 8px 5px rgba(0, 0, 0, .5);}
[type="checkbox"]:checked + .body ~ .body1 .flex .flex1 {transition: .6s; background: rgba(0, 0, 0, .2);}
[type="checkbox"]:checked + .body ~ .body1 .flex .flex1 .none {transition: 1s; height: 100%; opacity: 1; transform: translateY(50px) scale(1.2); color: white;}

/* MEDIA QUERYS */

@media screen and (max-width: 1320px) {
  .flex_transform2 {transition: .5s; transform: scale(0.8);}
}

@media screen and (min-width: 1200px) {
  /*
    #contenido{max-width: 90%;}
    #contenido p:not(.lineas-palabras1 p) {font-size: calc(var(--font-size-base) * 1.1);}
    #contenido code.enlace {font-size: calc(var(--font-size-base) * 1.1);} 
  */
  #contenido b {font-size: calc(var(--font-size-base) * 1.1);}
  /*
      #contenido-animacion .elastico {height: 100px;}
      #contenido-animacion .elastico .titulo {font:600 80px/100px arial, sans-serif; animation: elastico-abrir 8s infinite alternate;}
      @keyframes elastico-abrir {
        0% {letter-spacing: -88px; filter: blur(10px);}
        30% {filter: blur(5px);}
        100% {letter-spacing: 3px; filter: blur(2px) grayscale(100%);}
      }
  */
  #contenido-flex .flex-container6 .flex-item p {padding: 6px;}
  #contenido-flex .flex-container6 {height: 400px;}
  #contenido-animation #primer-animation, 
  #contenido-animation #segunda-animation, 
  #contenido-animation #tercera-animation, 
  #contenido-animation #cuarta-animation {transform: scale(0.8);}
  .madrid a {text-align: center;}
}

@media screen and (max-width: 1199px) {
  /*
    #contenido p:not(.lineas-palabras1 p) {font-size: var(--font-size-base);}
    #contenido code.enlace {font-size: var(--font-size-base);} 
  */
  #contenido b {font-size: var(--font-size-base);}
  #header_transform:hover .img-animada {transform-origin: 0% 0%; transform: translate(200%, 25%) scale(1.2) rotate(12deg);}
  #header_transform:hover .img-animada1 {transform-origin: 0% 0%; transform: translate(-500%, 30%) scale(1.2) rotate(-12deg);}
  #header_transform:hover .img-animada2 {transform-origin: 0% 0%; transform: translate(130%, -100%) scale(1.2) rotate(12deg);}
  #header_transform:hover .img-animada3 {transform-origin: 0% 0%; transform: translate(110%, -120%) scale(1.2) rotate(-12deg);}
}

@media screen and (max-width: 1120px) {
  #contenido-filter .imagenes-filtro div div {flex-direction: column;}
  #contenido-filter .imagenes-filtro img {width:150px; height: 50px;}
} 

@media screen and (max-width: 1100px) {
  #contenido-animation h1 {font-size: calc(var(--font-size-base) * 1.2);}
  #contenido-animation #primer-animation, 
  #contenido-animation #segunda-animation, 
  #contenido-animation #tercera-animation, 
  #contenido-animation #cuarta-animation {padding: 0;flex-direction: column; justify-content: flex-start; align-items: center;}
  #contenido-animation #primer-animation, #contenido-animation #tercera-animation {gap: 50px;}
  #animations .botones {flex-direction: row; height: 50px; margin-top: 20px; gap: 10px;}
}

@media screen and (max-width: 1040px) {
  /* 
    #contenido{max-width: 100%;}
    #contenido .card p:not(.lineas-palabras1 p) {font-size: calc(var(--font-size-base) * 0.9) !important;}
  */
  #contenido-animacion .elastico .titulo {font:600 60px/100px arial, sans-serif; animation: elastico-abrir 8s infinite alternate;}
  @keyframes elastico-abrir {
    0% {letter-spacing: -60px; filter: blur(10px);}
    30% {filter: blur(5px);}
    100% {letter-spacing: 3px; filter: blur(2px) grayscale(100%);}
  }
  #contenido-flex .flex-container1 .flex-item p,
  #contenido-flex .flex-container2 .flex-item p,
  #contenido-flex .flex-container4 .flex-item p,
  #contenido-flex .flex-container5 .flex-item p,
  #contenido-flex .flex-container7 .flex-item p {padding: 8px;}
  #contenido-flex .flex-container6 .flex-item p {padding: 4px;}
  #contenido-flex p.none {font-size: calc(var(--font-size-base) * 0.9);}
  #contenido-grid .resumen .flex-res p {margin-left: 0;}
  #contenido-botones .socialfixed {transition: .3s; transform: scale(0.7);}
  #contenido-transition .ejemplo {flex-direction: column; align-items: center;}
  #contenido-transition .ejemplo .derecha {max-width: 90%;}
  #contenido-filter .imagenes-filtro div.card_header h4:nth-child(4) {margin-left: 0px;} 
  .flex_transform .title h4:nth-child(3) {transition: .3s; margin-left: 10px;}
  .flex_hover, .flex_hover1 {flex-direction: column;}
  .flex_hover .explicacion_hover, .flex_hover1 .explicacion_hover {max-width: 100%;}
}

@media screen and (max-width: 920px) {
  #contenido-filter .imagenes-filtro div.card_header {gap: 14px;}
  #contenido-filter #contenedor-imagen {transition: .3s; transform: scale(0.8); margin: 0;}
}

@media screen and (max-width: 875px) {
  /* 
    #contenido {max-width: 100%; padding-left: 20px;}
    #contenido .card p:not(.lineas-palabras1 p) {transition: margin-left 0.2s; font-size: calc(var(--font-size-base) * 0.9) !important; margin-left: 0 !important;} 
  */
}

@media screen and (max-width: 850px) {
  #contenido-prop-css .flex {margin-left: 20px;}
  #contenido-prop-css .flex div {flex-direction: column; font-size: calc(var(--font-size-base) * 0.8) !important;}
  #contenido-prop-css .flex div code {display: inline-block; max-width: 70%; text-align: center;}
  #contenido-prop-css .flex .flex1 {width: 100%; max-width: 70%; align-items: center;}
  #contenido-prop-css .flex div span {padding-bottom: 20px;}
  #contenido-flex .item {width:50px;height:50px;}
  #contenido-flex .flex-container {width:100%; min-width:initial;}
  #contenido-flex .flex-container6 .flex-item p {padding: 3px;}
  #contenido-botones #png {left: 65%;}
  #contenido-botones .socialfixed {transition: .3s; transform: scale(0.6);}
  #contenido-animation h1 {font-size: calc(var(--font-size-base) * 1);}
  #contenido-animation .flex {flex-direction: column;}
  #animacion {width: 80%;}
  #contenido-filter #contenedor-imagen {transition: .3s; transform: scale(0.7);margin-left: -100px;}
  #popupBody {position: relative; top: -5%;}
  #popupBody1 {transition: 0.3s; transform: scale(0.8);}
}

@media screen and (max-width: 800px) {
  /* #contenido code.enlace {font-size: calc(var(--font-size-base) * 0.9);} */
  #contenido b {font-size: calc(var(--font-size-base) * 0.9);}
  #contenido-flex .flex-container3 {max-width: 230px;}
  #contenido-transition .ejemplo {flex-direction: column; align-items: center;}
  .flex_transform div {flex-direction: column;}
  .flex_transform1 .title1 h4:nth-child(2) {transition: 0.3s; margin-left: 50px;}
  #header_transform {height: 100vh;}
  #header_transform img {width: 70px;height: 70px;}
  #header_transform .img-animada {width: 100px;}
  #header_transform .igual {left: 50%;}
  #header_transform .suma {left: 50%; top: 25%;}
  #header_transform .suma1 {left: 10%;}
  #header_transform:hover .primero {transform-origin: 0% 0%; transform: translate(5%, -100%) scale(0.8) rotate(-10deg);}
  #header_transform:hover .img-animada {transform-origin: 0% 0%; transform: translate(50%, 170%) scale(1.2) rotate(12deg); animation: rotar1 0.4s linear 0s 7;}
  @keyframes rotar1 {
    from {transform: rotate(12deg);}
    to {transform: rotate(-5deg);}
  }
  #header_transform:hover .texto {transform: translateX(20%);}
  #header_transform .img-animada:hover .texto {transition: all 1.5s ease 0.2s; background: transparent; transform: translate(20%, 190%);}
  #header_transform .img-animada1 {width: 120px;}
  #header_transform:hover .img-animada1 {transform-origin: 0% 0%; transform: translate(-220%, 10%) scale(1.4) rotate(-12deg); animation: desplazar 0.5s ease 0s 3;}
  #header_transform .img-animada2 {width: 100px;}
  #header_transform:hover .img-animada2 {transform-origin: 0% 0%; transform: translate(200%, -90%) scale(1.2) rotate(12deg); animation: tamano 0.7s ease-in-out 0s 3;}
  #header_transform .img-animada2:hover .img2 {
    transform-origin: 0% 0%;
    transform: translate(0%, -100%) scale(1.1) rotate(-18deg);
    transition: all 2s linear 0.3s;
    animation: zoom 0.7s linear 2.5s 3 reverse;
    background: black;
    border: 1px solid black;
    border-radius: 30%;
    z-index: 10;
  }

  @keyframes zoom {
    from {transform: translate(0%, -150%) rotate(-18deg) scale(1.1);}
    to {transform: translate(0%, -150%) rotate(18deg) scale(1.3);}
  }
  #header_transform .img-animada2:hover .texto2 {animation: moversederecha 0.7s linear 2s 3 forwards;}
  @keyframes moversederecha {
    from {transform: translate(0%, 0%);}
    to {transform: translate(10%, 80%);}
  }
  #header_transform .img-animada3 {width: 100px;}
  #header_transform:hover .img-animada3 {transform-origin: 0% 0%; transform: translate(-100%, 180%) scale(1.2) rotate(-12deg);}
  #header_transform .img-animada3:hover .texto3 {
    display: block;
    transition: all 2s ease 0.2s;
    width: auto;
    height: auto;
    opacity: 1;
    font-size: 1em;
    letter-spacing: 1px;
    transform-origin: 0% 0%;
    transform: translate(0%, -200%);
  }
  #header_transform .img-animada3:hover .img3 {transform-origin: 0% 0%; transform: translate(0, -120%) scale(1.2) rotate(18deg); transition: all 2s linear 0.3s;}
  #header_transform .img-animada3:hover img {
    transform-origin: 0% 0%;
    transform: translate(0, -120%) scale(1.2) rotate(18deg);
    transition: all 2s linear 0.3s;
    border-radius: 30%;
    box-shadow: 2px 2px 10px rgba(65, 105, 225, 0.8);
  }
  .lineas-palabras1 p {height: 17px; line-height: 16px;}
}

@media screen and (max-width: 740px) {
  #contenido-flex .flex-container6 .flex-item p {padding: 2px;}
  #contenido-flex .flex-container1, #contenido-flex .flex-container2, 
  #contenido-flex .flex-container4, #contenido-flex .flex-container5, 
  #contenido-flex .flex-container6, #contenido-flex .flex-container7 {width: 100%; max-width: calc(var(--card-width) * 1.8); transform: translateX(-10px) scaleX(1) scaleY(0.8);}
  #contenido-flex .resumen .flex-res p {margin-left: 0;}
  #contenido-flex .resumen .flex-res p:nth-child(1) {white-space: wrap;}
  .lineas-palabras1 p {height: 18px; line-height: 16px;}
}

@media screen and (max-width: 715px) {
  #contenido-animacion .elastico .titulo {font:600 40px/100px arial, sans-serif; animation: elastico-abrir 8s infinite alternate;}
  @keyframes elastico-abrir {
    0% {letter-spacing: -60px; filter: blur(10px);}
    30% {filter: blur(5px);}
    100% {letter-spacing: 3px; filter: blur(2px) grayscale(100%);}
  }
}

@media screen and (max-width: 700px) {
  #contenido-grid .resumen .flex-res {display: flex; flex-direction: column; align-items: flex-end;}
}

@media screen and (max-width: 655px) {
  #contenido-flex .flex-container1 .flex-item p,
  #contenido-flex .flex-container4 .flex-item p,
  #contenido-flex .flex-container5 .flex-item p,
  #contenido-flex .flex-container7 .flex-item p {padding: 3px;}
  #popupBody {width: 55%;}
}

@media screen and (max-width: 600px) { 
  #contenido-filter #contenedor-imagen {transition: .3s; transform: scale(0.6); margin-left: -150px;}
  #contenido-filter .imagenes-filtro div {flex-direction: column;}
  #contenido-flex .resumen .flex-res {display: flex; flex-direction: column; justify-content: center;}
  #contenido-flex .resumen .flex-res p:nth-child(1),
  #contenido-flex .resumen .flex-res p:nth-child(2)
  {white-space: wrap; flex-basis: 100%; border-bottom: 1px solid black; border-right: none; text-align: center;}
  #contenido-flex .resumen .flex-res p:nth-child(3) 
  {transition: .3s linear; flex-basis: 100%; font-size: var(--font-size-base);}
  #contenido-flex .resumen .flex-res:nth-of-type(1) p:nth-child(3),
  #contenido-flex .resumen .flex-res:nth-of-type(9) p:nth-child(3) {text-align: center;}
}

@media screen and (max-width: 578px) {
  #contenido-flex .flex-container3 .flex-item p {padding: 8px;}
  #contenido-flex .flex-container2 .flex-item p,
  #contenido-flex .flex-container5 .flex-item p,
  #contenido-flex .flex-container6 .flex-item p,
  #contenido-flex .flex-container7 .flex-item p {padding: 1px;}
  #contenido-flex .item {width:50px;height:50px;}
  #contenido-flex .flex-container {width:100%; min-width:initial;}
}

@media screen and (max-width: 500px) {
  /*
    #contenido{max-width: 100%; padding-left: 0; margin: 0;}
    #contenido .card p:not(.lineas-palabras1 p) {font-size: calc(var(--font-size-base) * 0.8);}
    #contenido code.enlace {font-size: calc(var(--font-size-base) * 0.8);} 
  */
  #contenido b {font-size: calc(var(--font-size-base) * 0.8);}
  #contenido-flex p.none {font-size: calc(var(--font-size-base) * 0.8);}
  #contenido-animacion .elastico {max-width: 100%;}
  #contenido-prop-css .flex {margin-left: 0;}
  #contenido-prop-css .flex div code {display: inline-block; max-width: 80%; text-align: center;}
  #contenido-prop-css .flex .flex1 {width: 100%; max-width: 80%; align-items: center;}
  #contenido-botones .socialfixed {transition: .3s; left: -20px; transform: scale(0.5);}
  #popupBody1 {transition: 0.3s; transform: scale(0.6);}
}

@media screen and (max-height: 650px) {
  /* 
    #contenido {max-width: 100%; padding-left: 0; margin: 0;}
    #contenido p {font-size: calc(var(--font-size-base) * 0.8) !important;} 
  */
  #contenido-flex p.none {font-size: calc(var(--font-size-base) * 0.8);}
}

/* media querys para los botones 3d */

@media (max-width: 800px) {
  #contenido-botones .botones3d {position: relative;top: 20%;height: auto;}
  #contenido-botones .botones3d ul {
    max-width: 50%;
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }
  #contenido-botones .botones3d ul li {display: block;position: relative;margin-top: 25%;margin-bottom: 25%;} 
}