/*

0. Variables
1. webflow-icons FONT
2. General
3. Main navigation
4. General effects
5. Buttons
6. Miscellany

*/

/* ========================================================================== */
/*   0. Variables  */
/* ========================================================================== */
:root {
  --primary-color: #193237;
  --secondary-color: #2e98ea;
  --tertiary-color: #ff8a3d;
  --fourth-color: #ff5e7e;
  --fifth-color: #9d4dd1;
  --section-background-color1: #11202e;
  --section-padding-value: clamp(40px, calc(40px + (90 - 40) * ((100vw - 460px) / (1800 - 460))), 90px);
  --section-header-padding-bottom-value: clamp(90px, calc(90px + (140 - 90) * ((100vw - 460px) / (1800 - 460))), 140px);
  --section-header-padding-top-value: clamp(120px, calc(120px + (170 - 120) * ((100vw - 460px) / (1800 - 460))), 170px);
}

/* ========================================================================== */
/*   1. webflow-icons FONT  */
/* ========================================================================== */

@font-face {
  font-family: "webflow-icons";
  src: url("data:application/x-font-ttf;charset=utf-8;base64,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") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ========================================================================== */
/*   2. General  */
/* ========================================================================== */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  color: white;
}

*:not(i) {
  font-family: Outfit, sans-serif !important;
}

h1 {
  color: #fff;
  font-size: clamp(40px, calc(40px + (65 - 40) * ((100vw - 460px) / (1800 - 460))), 65px);
  line-height: 120%;
  font-weight: 600;
}
h2 {
  color: #fff;
  font-size: clamp(30px, calc(30px + (50 - 30) * ((100vw - 460px) / (1800 - 460))), 50px);
  line-height: 120%;
  font-weight: 600;
}
h3 {
  color: #fff;
  font-size: clamp(25px, calc(25px + (40 - 25) * ((100vw - 460px) / (1800 - 460))), 40px);
  line-height: 120%;
}
h4 {
  color: #fff;
  font-size: clamp(22px, calc(22px + (25 - 22) * ((100vw - 460px) / (1800 - 460))), 25px);
  line-height: 120%;
}

p {
  color: white;
  font-size: clamp(18px, calc(18px + (20 - 18) * ((100vw - 460px) / (1800 - 460))), 20px);
  line-height: 120%;
  font-weight: 200;
}

html {
  box-sizing: border-box;
}
body {
  background-color: #24222d;
  background-color: #000;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
body.is-preload *,
body.is-preload *:before,
body.is-preload *:after {
  -moz-animation: none !important;
  -webkit-animation: none !important;
  -ms-animation: none !important;
  animation: none !important;
  -moz-transition: none !important;
  -webkit-transition: none !important;
  -ms-transition: none !important;
  transition: none !important;
}
a {
  -moz-transition: color 0.2s ease-in-out;
  -webkit-transition: color 0.2s ease-in-out;
  -ms-transition: color 0.2s ease-in-out;
  transition: color 0.2s ease-in-out;
  text-decoration: none;
  color: white;
}
a:visited {
  color: white;
}
a:hover {
  color: var(--secondary-color) !important;
}
p > a {
  font-weight: 600;
}
/* Container */
.container {
  margin: 0 auto;
  max-width: calc(100% - 50px);
  width: 1200px;
}
.container.small {
  width: 900px;
}
.container.large {
  width: 1400px;
}
@media screen and (max-width: 1680px) {
  .container {
    width: 1200px;
  }
  .container.small {
    width: 900px;
  }
  .container.large {
    width: 1400px;
  }
}
@media screen and (max-width: 1280px) {
  .container {
    width: 960px;
  }
  .container.small {
    width: 720px;
  }
  .container.large {
    width: 1080px;
  }
}
@media screen and (max-width: 980px) {
  .container {
    width: 100%;
  }
  .container.small {
    width: 75%;
  }
  .container.large {
    width: 100%;
  }
}

@media screen and (max-width: 736px) {
  .container {
    width: 100%;
    max-width: calc(100% - 30px);
  }
  .container.small {
    width: 100%;
  }
  .container.large {
    width: 100%;
  }
}

/* Footer */
#footer {
  text-align: center;
  padding: 10px 0;
}
#footer p {
  font-size: clamp(18px, calc(16px + (17 - 16) * ((100vw - 460px) / (1800 - 460))), 17px);
}
#footer .paragraph {
  background-color: black;
  padding: 20px;
  display: none;
}
#footer .copyright {
  background-color: black;
  padding: 20px;
}
#footer .paragraph > p {
  max-width: 900px;
  margin: 0 auto;
}
#footer .footer-line {
  height: 1px;
  background: linear-gradient(45deg, transparent 40%, #434343, #434343, transparent 60%) border-box;
  width: 80%;
  margin: 0 auto;
}

.linear-gradient {
  background: linear-gradient(90deg, var(--secondary-color) 0%, #fff 80%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.linear-gradient-2 {
  background: linear-gradient(90deg, var(--fourth-color) 0%, var(--fifth-color) 80%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.linear-gradient-3 {
  background: linear-gradient(90deg, var(--fourth-color) 0%, var(--tertiary-color) 80%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Categories box */
.categories-box {
  display: flex;
  align-items: stretch;
  justify-content: center;
  flex-wrap: wrap;
}
.categories-box > div {
  border: 1px solid white;
  border-radius: 8px;
  padding: 20px;
  margin: 10px;
  cursor: pointer;
}
.categories-box > div h3 {
  margin: 0;
}

/* glightbox */
#glightbox-slider .description-right .gslide-desc,
#glightbox-slider .description-right .gslide-desc a,
#glightbox-slider h4.gslide-title,
#glightbox-slider .gslide-desc p {
  color: #1c1f26;
}
#glightbox-slider .gslide-description.description-right {
  background-color: #90d8d4;
  background-color: #ccc;
}
.glightbox-clean #glightbox-slider .gslide-title {
  margin-bottom: 10px;
}

/* ========================================================================== */
/*   3. MAIN NAVIGATION  */
/* ========================================================================== */
/* --- menu conainer --- */
.w-nav {
  position: relative;
  background: #dddddd;
  z-index: 1000;
}
.w-nav:before,
.w-nav:after {
  content: " ";
  display: table;
  grid-column-start: 1;
  grid-row-start: 1;
  grid-column-end: 2;
  grid-row-end: 2;
}
.w-nav:after {
  clear: both;
}
.nav-bar {
  position: fixed;
  left: 0px;
  top: 0px;
  right: 0px;
  z-index: 100;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  background-color: rgba(0, 0, 0, 0.4);
  box-shadow: 1px 1px 15px 0 rgba(25, 50, 55, 1);
  transition: background-color 0.2s ease-out;
}
.nav-bar.nav-solid-black {
  background-color: #000;
}

/* --- main menu --- */
[class^="w-icon-"],
[class*=" w-icon-"] {
  font-family: "webflow-icons" !important;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.w-icon-nav-menu:before {
  content: "\e602";
  color: var(--secondary-color);
}
.w-nav-brand {
  position: relative;
  float: left;
  text-decoration: none;
  color: #fff;
}
a.w-nav-brand:hover {
  color: #fff !important;  
}
.nav-bar.nav-solid-black a.w-nav-brand:hover {
  color: #dbdbdb !important;
}
.w-nav-brand .main-text {
  font-weight: 600;
  font-size: clamp(25px, calc(25px + (38 - 25) * ((100vw - 460px) / (1800 - 460))), 38px);
  line-height: 110%;
}
.w-nav-brand .secondary-text {
  font-weight: 200;
  font-size: clamp(9px, calc(9px + (13 - 9) * ((100vw - 460px) / (1800 - 460))), 13px);
  top: clamp(-4px, calc(-4px + (-6 + 4) * ((100vw - 460px) / (1800 - 460))), -6px);
  position: relative;
  left: clamp(75px, calc(75px + (110 - 75) * ((100vw - 460px) / (1800 - 460))), 110px);
  line-height: 100%;
  display: table;
}
.w-nav-brand span.first {
  color: var(--secondary-color);
}
.w-nav-brand span.second {
  color: var(--fifth-color);
}
.nav-bar.nav-solid-black .w-nav-brand {
  color: #dbdbdb;
}
.w-nav-link {
  position: relative;
  display: inline-block;
  vertical-align: top;
  text-decoration: none;
  color: #222222;
  padding: 20px;
  text-align: left;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}
.w-nav-link-button {
  color: var(--secondary-color) !important;
  font-weight: 600;
  line-height: 120%;
  background-color: transparent;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  border-radius: 30px;
  width: auto;
  height: auto;
  padding: 6px 18px;
  transition: background-color 0.2s ease-out;
  margin-left: 10px;
  border: 2px solid var(--secondary-color);
}
.w-nav-link-button:hover {
  color: #0f0f0f !important;
  background-color: var(--secondary-color);
}
.w-nav-menu {
  position: relative;
  float: right;
}
[data-nav-menu-open] {
  display: block !important;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #c8c8c8;
  text-align: left;
  overflow: visible;
  min-width: 200px;
}
[data-nav-menu-open] .w-nav-link-button {
  display: inline-block !important;
  margin: 20px 10px;
}
.w--nav-link-open {
  display: block;
  position: relative;
}
.w-nav-overlay {
  position: absolute;
  overflow: hidden;
  display: none;
  /*display: block;
    visibility: hidden;*/
  top: 100%;
  left: 0;
  right: 0;
  width: 100%;
  /*-webkit-transition: color 300ms ease, background-color 300ms ease, box-shadow 300ms ease;
    transition: color 300ms ease, background-color 300ms ease, box-shadow 300ms ease;*/
}
.w-nav-overlay [data-nav-menu-open] {
  top: 0;
}
.w-nav-button {
  position: relative;
  float: right;
  padding: 18px;
  font-size: 24px;
  display: none;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.w-nav-button:focus {
  outline: 0;
}
.wrapper.nav-bar-wrapper {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  height: 72px;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: stretch;
  -webkit-align-items: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
}
.nav-link {
  padding: 12px 18px;
  border-radius: 16px;
  -webkit-transition: color 300ms ease, background-color 300ms ease, box-shadow 300ms ease;
  transition: color 300ms ease, background-color 300ms ease, box-shadow 300ms ease;
  color: #fff;
  font-weight: 500;
  font-size: 16px;
}
.nav-bar.nav-solid-black .nav-link:not(.active) {
  color: #ababab;
}
.nav-link:hover,
.nav-link.active {
  text-decoration: none;
  color: var(--secondary-color);
}

.brand {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding-right: 15px;
  padding-left: 15px;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  font-family: "Varela Round", sans-serif;
  font-size: 22px;
  line-height: 32px;
  font-weight: 400;
}
.nav-menu {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding-right: 24px;
  padding-left: 24px;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}
.navigation {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: flex-end;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
.nav-main {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  height: 72px;
  padding-right: 24px;
  padding-left: 24px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

/* --- media screen --- */
@media screen and (max-width: 767px) {
  .w-nav-brand {
    padding-left: 10px;
  }
  .nav-link {
    padding-top: 12px;
    padding-bottom: 12px;
  }
  /* incluir nav-top-social - top menu*/
  .nav-top-social {
    padding-right: 0px;
    padding-left: 0px;
  }
}
@media screen and (max-width: 991px) {
  .w-nav[data-collapse="medium"] .w-nav-menu {
    display: none;
  }
  .w-nav[data-collapse="medium"] .w-nav-button {
    display: block;
  }
  .wrapper.nav-bar-wrapper {
    height: auto;
  }
  .nav-link {
    padding: 16px 24px;
    border-bottom: 1px solid #353535;
    border-radius: 0px;
  }
  .brand {
    padding-right: 8px;
    padding-left: 8px;
    font-size: 20px;
    line-height: 28px;
  }
  .nav-menu {
    padding-right: 0px;
    padding-left: 0px;
    border-top: 1px solid #353535;
    background-color: rgba(0, 0, 0, 0.8);
  }
  .nav-bar.nav-solid-black .nav-menu {
    background-color: #000;
    border-left: 1px solid #353535;
  }
  /*incluir page-wrapper - strutcture menu*/
  .page-wrapper {
    margin-top: 96px;
  }
  .navigation {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -webkit-flex-direction: row-reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
  }
  /*incluir nav-top - top menu*/
  .nav-top {
    padding-right: 8px;
    padding-left: 8px;
  }
  .nav-main {
    height: 64px;
    padding-right: 0px;
    padding-left: 0px;
    background-color: rgba(0, 0, 0, 0.8);
  }
  /*incluir nav-top-info - top nav*/
  .nav-top-info {
    padding-right: 8px;
    padding-left: 8px;
  }
  /*incluir nav-top-social - top menu*/
  .nav-top-social {
    padding-right: 8px;
    padding-left: 8px;
  }
  .menu-button {
    height: 100%;
    padding: 20px;
    border-left: 1px solid #35353544;
  }
  .nav-bar.nav-bar.nav-solid-black .menu-button {
    border-left: 1px solid #353535;
  }
  .menu-button.w--open {
    background-color: transparent;
    color: #111;
  }
}

/* --- Mobile nav menu --- */
.w-nav-overlay #mobile_nav_menu_items {
  box-shadow: 1px 1px 15px 0 rgba(0, 0, 0, 0.12);
  user-select: none;
  -webkit-user-select: none; /* Chrome, Safari, Opera */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Edge, Internet Explorer */
}

@keyframes underline-transition {
  from {
    width: 0;
  }
  to {
    width: calc(100% - 36px);
  }
}
@keyframes underline-transition-reverse {
  from {
    width: 0;
  }
  to {
    width: calc(100% - 36px);
  }
}

.full-width {
  position: relative !important;
  width: calc(100vw - 15px) !important; /* 15px = ancho tipico del scrollbar */
  left: 50%;
  right: 50%;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
}

/* ========================================================================== */
/*   4. GENERAL EFFECTS  */
/* ========================================================================== */

.fade-in {
  opacity: 0;
  transform: translateY(60px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

.fade-in.show {
  opacity: 1;
  transform: translateY(0);
}

.img-appear {
  opacity: 0;
  animation: fadeIn 0.6s ease forwards;
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

.fade {
  opacity: 0;
  transform: translateY(0);
  animation: fadeIn 0.5s ease-out forwards;
  animation-delay: 0.3s;
}
@keyframes fade {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ========================================================================== */
/*   5. Buttons  */
/* ========================================================================== */

a.download-image-button {
  text-decoration: none;
  color: #fff;
  font-weight: 600;
  background-image: linear-gradient(to right, #000 0%, #1b4b48 51%, #000 100%);
  background-size: 200% auto;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  border-radius: 30px;
  width: auto;
  height: auto;
  padding: 10px 16px;
  height: 80px;
  display: inline-block;
  transition: background-position 0.2s ease-out;
}
a.download-image-button:hover {
  background-position: right center;
  color: #fff !important;
  box-shadow: 1px 1px 15px 0 rgba(0, 0, 0, 0.25);
}

button.action-button,
a.action-button {
  color: var(--secondary-color);
  font-weight: 600;
  text-decoration: none;
  background: transparent;
  border: 2px solid var(--secondary-color);
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  border-radius: 30px;
  width: auto;
  height: auto;
  padding: 10px 16px;
  display: inline-block;
  transition: background-color 0.2s ease-out;
}
button.action-button:hover,
a.action-button:hover {
  background: var(--secondary-color);
  color: #0f0f0f !important;
}

a.small-solid-button {
  text-decoration: none;
  color: #fff;
  font-weight: 400;
  background-image: linear-gradient(to right, #3c9d9b 0%, #0a3d62 51%, #3c9d9b 100%);
  background-size: 200% auto;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  border-radius: 30px;
  width: auto;
  height: auto;
  padding: 15px 16px;
  display: inline-block;
  transition: background-position 0.2s ease-out;
}
a.small-solid-button:hover {
  background-position: right center;
  color: #fff !important;
  box-shadow: 1px 1px 15px 0 rgba(0, 0, 0, 0.25);
}

/* ========================================================================== */
/*   6. Miscellany  */
/* ========================================================================== */

/* ----- Image Gallery ------ */
div.gallery {
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 6px 0;
}
div.gallery > figure.thumb {
  width: calc(25% - (6px * 3) / 4);
  aspect-ratio: 100 / 70;
  overflow: hidden;
  border-radius: 6px;
  flex-shrink: 0;
  flex-grow: 0;
  margin: 0;
  padding: 0;
  position: relative;
}
@media screen and (max-width: 1024px) {
  div.gallery > figure.thumb {
    width: calc(33.3% - (6px * 3) / 4);
  }
}
@media screen and (max-width: 480px) {
  div.gallery > figure.thumb {
    width: calc(50% - (6px * 3) / 4);
  }
}
div.gallery > figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.2s ease-in-out, filter 0.2s ease-in-out;
  transform-origin: center;
  will-change: transform;
}
div.gallery > figure.thumb:hover img {
  transform: scale(1.05);
  filter: brightness(1.1);

  transform: scale(1.06);
  filter: brightness(1.1) saturate(1.05);
}

.line {
  height: 1px;
  background: var(--secondary-color);
  background: linear-gradient(45deg, transparent 0%, var(--fourth-color), var(--fifth-color), transparent 100%) border-box;
  width: 80%;
  margin: 0 auto;
}

.fa-gradient {
  background: linear-gradient(90deg, var(--secondary-color), #fff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.circular-gradient-top-left {
  background-repeat: no-repeat;
  background-size: cover;
  background-image: radial-gradient(circle at top left, rgb(from var(--secondary-color) r g b / 0.5), transparent 30%);
}
.circular-gradient-bottom-left {
  background-repeat: no-repeat;
  background-size: cover;
  background-image: radial-gradient(circle at bottom left, rgb(from var(--secondary-color) r g b / 0.5), transparent 30%);
}
.circular-gradient-top-right {
  background-repeat: no-repeat;
  background-size: cover;
  background-image: radial-gradient(circle at top right, rgb(from var(--secondary-color) r g b / 0.5), transparent 30%);
}
.circular-gradient-bottom-right {
  background-repeat: no-repeat;
  background-size: cover;
  background-image: radial-gradient(circle at bottom right, rgb(from var(--secondary-color) r g b / 0.5), transparent 30%);
}

.linear-gradient-top-bottom {
  background: linear-gradient(to bottom, rgb(from var(--primary-color) r g b / 0.7) 0%, transparent 100%);
}
.linear-gradient-bottom-top {
  background: linear-gradient(to top, rgb(from var(--primary-color) r g b / 0.7) 0%, transparent 100%);
}

/* section custom padding */
.section-custom-padd {
  padding-top: var(--section-padding-value);
  padding-bottom: var(--section-padding-value);
}
.section-custom-header-padd {
    padding-top: var(--section-header-padding-top-value);
    padding-bottom: var(--section-header-padding-bottom-value);
}

/* section custom background */
.section-custom-background {
  background-color: #11202e;
}
.section-custom-background-circle {
  background: radial-gradient(circle at 50% 50%, rgb(from var(--primary-color) r g b / 0.9), transparent 60%), linear-gradient(180deg, #0a0d14 0%, #07111a 100%);
}

/* Image tools bar */
.image_tools {
  width: 100%;
  height: 45px;
  background: rgb(255, 255, 255, 0.01);
  color: #efefef;
  padding: 10px;
}
.image_tools i {
  font-size: 22px;
  line-height: 120%;
  text-shadow: 0px 0px 6px #000;
}
.image_tools > div {
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: space-between;
}
.image_tools > div > div:nth-child(2) {
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: flex-end;
}
.image_tools > div > div i {
  color: rgb(255, 255, 255, 0.7);
  margin: 0 8px;
  cursor: pointer;
}
.image_tools > div > div i:hover {
  color: rgb(255, 255, 255, 1);
  border-color: rgb(255, 255, 255, 0.7);
}
/* copy icon */
.image_tools > div > div:nth-child(2) i.copy-prompt.copied {
  color: var(--secondary-color);
  transform: scale(1.3);
  transition: 0.2s ease;
}
/* hidden tool */
.image_tools.hidden {
  position: absolute;
  left: 0;
  bottom: 0;
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  box-sizing: border-box;
  transform: translateY(45px);
  transition: all 0.5s ease;
}
.swiper-slide:hover .image_tools.hidden,
figure:hover .image_tools.hidden,
.ai-image:hover .image_tools.hidden {
  transform: translateY(0px);
}

/* blur */
.blur-behind {
  position: relative;
  padding: 10px;
  background: rgba(0, 0, 0, 0.4); /* leve oscurecimiento para legibilidad */
  backdrop-filter: blur(4px); /* difumina solo lo de atrás */
  -webkit-backdrop-filter: blur(4px);
  border-radius: 12px;
}

.fa-check-list {
  list-style: none;
  padding-left: 0;
}
.fa-check-list li {
  position: relative;
  padding-left: 28px;
  line-height: 1.6;
}
.fa-check-list li::before {
  content: "\f00c"; /* unicode del fa-check */
  font-family: "Font Awesome 6 Free";
  font-weight: 900; /* solid */
  position: absolute;
  left: 0;
  top: 0.2em;
  color: var(--fifth-color);
}