@charset "UTF-8";
.barranavegacionExito {
  display: flex;
  justify-content: center;
  align-items: center; }
  .barranavegacionExito .logo-barraExito {
    margin-top: 24px; }

.success {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1.75rem; }
  @media (max-width: 600px) {
    .success {
      width: 100%;
      padding: 16px 16px; } }
  .success .success-art {
    width: 24.3125rem; }
  .success .success-heading {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 2rem; }

.material-symbols-rounded {
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24; }

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  scroll-behavior: smooth; }

/* Estilo para todo el texto seleccionado en el sitio */
::selection {
  background-color: #6C5CE7;
  /* Color púrpura de fondo */
  color: white;
  /* Texto en color blanco */ }

/* Para navegadores más antiguos (Firefox) */
::-moz-selection {
  background-color: #6C5CE7;
  color: white; }

/* Si quieres aplicar el estilo solo a elementos específicos como los h1 */
h1::selection {
  background-color: #6C5CE7;
  color: white; }

h1::-moz-selection {
  background-color: #6C5CE7;
  color: white; }

/* También puedes aplicar diferentes estilos a diferentes elementos */
.special-text::selection {
  background-color: #6C5CE7;
  color: white;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
  /* Añade un poco de sombra al texto */ }

/* $xxs: 4px;
$xs: 8px;
$s: $m;
$m: 24px;
$l: 32px;
$xl: 48px;
$xxl: 64px;
$xxxl: 92px; */
Font
.material-symbols-rounded {
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24; }

.caption {
  color: #ffffff7a;
  font-size: 0.625rem;
  font-family: "Poppins", sans-serif;
  margin-top: 0.375rem;
  font-weight: 400;
  letter-spacing: 0.04rem; }

.label__input {
  color: #ffffff;
  font-size: 0.875rem;
  font-family: "Poppins", sans-serif; }

/* .display__mobile {
  display: none;

  @media (max-width: 600px) {
    display: block;
    font-size: 32px;
    text-align: center;
    line-height: 120%;
  }
} */
.display {
  width: 100vw;
  color: #FFFFEE;
  font-family: "Poppins", sans-serif;
  font-size: 4.5rem;
  text-align: center;
  line-height: 120%;
  /* ---------------------- */
  /* .typing {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    border-right: 2px solid white; // Cursor
    font-size: 37px;
    animation: typing 5s steps(30, end) infinite, blink-caret 0.75s step-end infinite;
    
    // Cambio de texto
    &::after {
      content: "tecnología"; // Primera palabra
      display: block;
      animation: changeText 15s steps(1, end) infinite;
    }
  }
  
  // Animación de escritura
  @keyframes typing {
    from {
      width: 0;
    }
    to {
      width: 100%; // Ajusta el ancho para el texto completo
    }
  }
  
  // Animación del parpadeo del cursor
  @keyframes blink-caret {
    from, to {
      border-color: transparent;
    }
    50% {
      border-color: white;
    }
  }
  
  // Animación de cambio de texto
  @keyframes changeText {
    0%, 33% {
      content: "tecnología";
    }
    34%, 66% {
      content: "Diseño";
    }
    67%, 100% {
      content: "Marketing";
    }
  } */
  /* --------------------------- */ }
  @media (max-width: 600px) {
    .display {
      font-size: 2.75rem; } }

.label__page {
  color: #ffffff;
  font-family: "Poppins", sans-serif;
  font-size: 0.875rem;
  color: #9f92ff;
  padding: 0.5rem 1rem;
  background-color: #7868f62a;
  border-radius: 0.5rem;
  width: fit-content; }
  .label__page--left {
    text-align: left; }
  .label__page--center {
    margin-left: auto;
    margin-right: auto; }
  .label__page--right {
    text-align: right; }

.h1__page {
  color: #FFFFEE;
  font-family: "Poppins", sans-serif;
  font-size: 3rem;
  text-align: center;
  line-height: 140%; }
  @media (max-width: 600px) {
    .h1__page {
      font-size: 2rem; } }
  .h1__page--section {
    margin-top: 1rem; }
  .h1__page--alignleft {
    text-align: left; }
  .h1__page--aligncenter {
    text-align: center; }
  .h1__page--mb-s {
    margin-bottom: 0.75rem; }
  .h1__page--mb-m {
    margin-bottom: 1rem; }

.h2__page {
  color: #ffffee;
  font-family: "Poppins", sans-serif;
  font-size: 48px;
  text-align: center;
  line-height: 140%; }
  @media (max-width: 600px) {
    .h2__page {
      font-size: 32px; } }
  .h2__page--section {
    margin-top: 1rem; }
  .h2__page--alignleft {
    text-align: left; }
  .h2__page--aligncenter {
    text-align: center; }
  .h2__page--mb-s {
    margin-bottom: 0.75rem; }
  .h2__page--mb-m {
    margin-bottom: 1rem; }
  .h2__page--mb-l {
    margin-bottom: 1.25rem; }
  .h2__page--mb-l {
    margin-bottom: 1.25rem; }
  .h2__page--mb-xxxxl {
    margin-bottom: 3rem; }
  .h2__page--mt-xxxxl {
    margin-top: 140px; }

.h3__page {
  color: #ffffee;
  font-family: "Poppins", sans-serif;
  font-size: 40px;
  text-align: center;
  line-height: 140%; }
  @media (max-width: 600px) {
    .h3__page {
      font-size: 32px; } }
  .h3__page--section {
    margin-top: 1rem; }
  .h3__page--alignleft {
    text-align: left; }
  .h3__page--light {
    color: #2B255C; }
  .h3__page--light-soft {
    color: #2d2d2d; }
  .h3__page--light-medium {
    color: #404040; }
  .h3__page--light-strong {
    color: #000000; }
  @media (prefers-color-scheme: light) {
    .h3__page--auto {
      color: #1a1a1a; } }
  .light-mode .h3__page--adaptive {
    color: #1a1a1a; }
  [data-theme="light"] .h3__page--themed {
    color: #1a1a1a; }
  .h3__page--light.h3__page--section, .h3__page--light-soft.h3__page--section, .h3__page--light-medium.h3__page--section, .h3__page--light-strong.h3__page--section {
    margin-top: 1rem; }
  .h3__page--light.h3__page--alignleft, .h3__page--light-soft.h3__page--alignleft, .h3__page--light-medium.h3__page--alignleft, .h3__page--light-strong.h3__page--alignleft {
    text-align: left; }
  .h3__page--smooth {
    transition: color 0.3s ease; }
    .h3__page--smooth.h3__page--light {
      color: #2B255C; }
  .h3__page--on-light-bg {
    color: #1a1a1a; }
  .h3__page--on-gray-bg {
    color: #2d2d2d; }
  .h3__page--on-colored-bg {
    color: #ffffff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); }
  .h3__page--light-interactive {
    color: #1a1a1a;
    cursor: pointer;
    transition: color 0.3s ease; }
    .h3__page--light-interactive:hover {
      color: #404040; }
    .h3__page--light-interactive:active {
      color: #000000; }
  .h3__page--light-link {
    color: #1a1a1a;
    text-decoration: none;
    transition: color 0.3s ease; }
    .h3__page--light-link:hover {
      color: #0066cc;
      text-decoration: underline; }
    .h3__page--light-link:visited {
      color: #663399; }

.paragraph {
  color: #ffffff;
  font-family: "Poppins", sans-serif;
  /* text-wrap: balance; */ }
  .paragraph__large {
    color: #ffffff;
    font-family: "Poppins", sans-serif;
    font-size: 1.5rem; }
    .paragraph__large--sectionLarge {
      margin-top: 3rem; }
    .paragraph__large--sectionMedium {
      margin-top: 2rem; }
    .paragraph__large--aligncenter {
      text-align: center; }
    .paragraph__large--alignleft {
      text-align: left; }
    @media (max-width: 600px) {
      .paragraph__large {
        font-size: 1.125rem;
        margin-top: 2rem; } }
  .paragraph__small {
    color: #ffffff;
    font-family: "Poppins", sans-serif;
    font-size: 1rem; }
    .paragraph__small--section {
      margin-top: 1rem; }
    .paragraph__small--aligncenter {
      text-align: center; }
    .paragraph__small--alignleft {
      text-align: left; }
    @media (max-width: 600px) {
      .paragraph__small {
        font-size: 0.875rem; } }
  .paragraph--light {
    color: #2d2d2d; }
  .paragraph--light-soft {
    color: #404040; }
  .paragraph--light-medium {
    color: #1a1a1a; }
  .paragraph--light-strong {
    color: #000000; }
  .paragraph__large.paragraph--light {
    color: #2d2d2d; }
  .paragraph__large.paragraph--light-soft {
    color: #404040; }
  .paragraph__large.paragraph--light-medium {
    color: #1a1a1a; }
  .paragraph__large.paragraph--light-strong {
    color: #000000; }
  .paragraph__large.paragraph--light.paragraph__large--sectionLarge {
    margin-top: 3rem; }
  .paragraph__large.paragraph--light.paragraph__large--sectionMedium {
    margin-top: 2rem; }
  .paragraph__large.paragraph--light.paragraph__large--aligncenter {
    text-align: center; }
  .paragraph__large.paragraph--light.paragraph__large--alignleft {
    text-align: left; }
  @media (max-width: 600px) {
    .paragraph__large.paragraph--light {
      font-size: 1.125rem;
      margin-top: 2rem; } }
  .paragraph__small.paragraph--light {
    color: #2d2d2d; }
  .paragraph__small.paragraph--light-soft {
    color: #404040; }
  .paragraph__small.paragraph--light-medium {
    color: #1a1a1a; }
  .paragraph__small.paragraph--light-strong {
    color: #000000; }
  .paragraph__small.paragraph--light.paragraph__small--section {
    margin-top: 1rem; }
  .paragraph__small.paragraph--light.paragraph__small--aligncenter {
    text-align: center; }
  .paragraph__small.paragraph--light.paragraph__small--alignleft {
    text-align: left; }
  @media (max-width: 600px) {
    .paragraph__small.paragraph--light {
      font-size: 0.875rem; } }
  @media (prefers-color-scheme: light) {
    .paragraph--auto {
      color: #2d2d2d; }
    .paragraph__large.paragraph--auto {
      color: #2d2d2d; }
    .paragraph__small.paragraph--auto {
      color: #2d2d2d; } }
  .light-mode .paragraph--adaptive {
    color: #2d2d2d; }
  .light-mode .paragraph__large.paragraph--adaptive {
    color: #2d2d2d; }
  .light-mode .paragraph__small.paragraph--adaptive {
    color: #2d2d2d; }
  [data-theme="light"] .paragraph--themed {
    color: #2d2d2d; }
  [data-theme="light"] .paragraph__large.paragraph--themed {
    color: #2d2d2d; }
  [data-theme="light"] .paragraph__small.paragraph--themed {
    color: #2d2d2d; }
  .paragraph--smooth {
    transition: color 0.3s ease; }
    .paragraph--smooth.paragraph--light {
      color: #2d2d2d; }
  .paragraph__large.paragraph--smooth {
    transition: color 0.3s ease; }
    .paragraph__large.paragraph--smooth.paragraph--light {
      color: #2d2d2d; }
  .paragraph__small.paragraph--smooth {
    transition: color 0.3s ease; }
    .paragraph__small.paragraph--smooth.paragraph--light {
      color: #2d2d2d; }
  .paragraph--on-light-bg, .paragraph__large.paragraph--on-light-bg, .paragraph__small.paragraph--on-light-bg {
    color: #2d2d2d; }
  .paragraph--on-gray-bg, .paragraph__large.paragraph--on-gray-bg, .paragraph__small.paragraph--on-gray-bg {
    color: #1a1a1a; }
  .paragraph--on-colored-bg, .paragraph__large.paragraph--on-colored-bg, .paragraph__small.paragraph--on-colored-bg {
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); }
  .paragraph--light-interactive, .paragraph__large.paragraph--light-interactive, .paragraph__small.paragraph--light-interactive {
    color: #2d2d2d;
    cursor: pointer;
    transition: color 0.3s ease; }
    .paragraph--light-interactive:hover, .paragraph__large.paragraph--light-interactive:hover, .paragraph__small.paragraph--light-interactive:hover {
      color: #1a1a1a; }
    .paragraph--light-interactive:active, .paragraph__large.paragraph--light-interactive:active, .paragraph__small.paragraph--light-interactive:active {
      color: #000000; }
  .paragraph--light-link, .paragraph__large.paragraph--light-link, .paragraph__small.paragraph--light-link {
    color: #2d2d2d;
    text-decoration: none;
    transition: color 0.3s ease; }
    .paragraph--light-link:hover, .paragraph__large.paragraph--light-link:hover, .paragraph__small.paragraph--light-link:hover {
      color: #0066cc;
      text-decoration: underline; }
    .paragraph--light-link:visited, .paragraph__large.paragraph--light-link:visited, .paragraph__small.paragraph--light-link:visited {
      color: #663399; }
  .paragraph--light-muted, .paragraph__large.paragraph--light-muted, .paragraph__small.paragraph--light-muted {
    color: #666666; }
  .paragraph--light-emphasis, .paragraph__large.paragraph--light-emphasis, .paragraph__small.paragraph--light-emphasis {
    color: #000000;
    font-weight: 500; }
  .paragraph--light-secondary, .paragraph__large.paragraph--light-secondary, .paragraph__small.paragraph--light-secondary {
    color: #757575; }
  .paragraph--light-high-contrast, .paragraph__large.paragraph--light-high-contrast, .paragraph__small.paragraph--light-high-contrast {
    color: #000000;
    font-weight: 400; }
  .paragraph--light-reading, .paragraph__large.paragraph--light-reading, .paragraph__small.paragraph--light-reading {
    color: #2d2d2d;
    line-height: 1.6;
    letter-spacing: 0.02em; }
  @media print {
    .paragraph--light, .paragraph__large.paragraph--light, .paragraph__small.paragraph--light {
      color: #000000 !important; } }

a {
  font-family: "Poppins", sans-serif; }

.options {
  height: 4.5rem;
  display: block;
  min-height: 8.2em; }

.select {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0rem 1rem;
  background: #0e0e25;
  border-radius: 0.5rem;
  height: 3rem;
  background-color: none;
  outline: none;
  margin: 0.5rem 0;
  border-style: solid;
  border-width: 0.0625rem;
  border-color: rgba(255, 255, 255, 0.2);
  font-size: 0.875rem;
  color: #ffffff;
  /* &--type {} */ }
  .select .button {
    color: #ffffff;
    height: 3rem;
    font-size: 1.125rem;
    font-weight: 700;
    padding: 0 2rem;
    justify-content: center;
    font-family: "Poppins", sans-serif;
    display: flex;
    align-items: center;
    border-style: none; }
    .select .button__primary {
      background-color: #f44857;
      box-sizing: border-box;
      text-decoration: none;
      border-radius: 2.5rem; }
      .select .button__primary--absolute {
        position: absolute;
        right: 0.375rem; }
      .select .button__primary--width100 {
        width: 100%; }
      .select .button__primary--widthfit {
        width: fit-content; }
    .select .button__secondary {
      /* box-sizing: border-box; */
      text-decoration: none;
      border-radius: 2.5rem;
      border-width: 0.125rem;
      /* Cambiado de border-style a border-width */
      border-style: solid;
      /* Agregado border-style */
      border-color: #ffffff;
      /* &--absolute {
        position: absolute;
        right: $xs;
      } */ }
      .select .button__secondary--width100 {
        width: 100%; }
      .select .button__secondary--widthfit {
        width: fit-content; }
      .select .button__secondary--space {
        display: flex;
        gap: 0.5rem; }
    .select .button .logo-search {
      padding-right: 0.5rem;
      display: inline-block; }
  .select:hover {
    border-style: solid;
    /* border-width: 1px; */
    border-color: #888c99; }
  .select:focus {
    /* border-style: solid;
    border-color: #07cdbd;
    
    border-width: 1px;
    outline-offset: 5px; */
    border: 0.0625rem solid #2997ff;
    outline: 0.25rem solid #2997ff27;
    /* outline-offset: 4px; */ }
  .select--margin-top {
    margin-top: 1.25rem; }
  .select--margin-botton {
    margin-bottom: 0.75rem; }

.input {
  /* border-right: $m solid transparent; */
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0rem 1rem;
  background: #240e4850;
  border-radius: 0.5rem;
  height: 3rem;
  /* background-color: none; */
  outline: none;
  margin: 0.5rem 0;
  border-style: solid;
  border-width: 0.0625rem;
  border-color: rgba(255, 255, 255, 0.2);
  font-size: 0.875rem;
  color: #ffffff;
  /* color-scheme: dark; */
  backdrop-filter: blur(16px) saturate(100%);
  /* &--type {} */ }
  .input:hover {
    border-style: solid;
    /* border-width: 1px; */
    border-color: #888c99; }
  .input:focus {
    /* border-style: solid;
    border-color: #07cdbd;
    
    border-width: 1px;
    outline-offset: 5px; */
    border: 0.0625rem solid #7975fd;
    outline: 0.4rem solid #5429ff38;
    /* outline-offset: 4px; */ }
  .input--margin-top {
    margin-top: 1.25rem; }
  .input--margin-botton {
    margin-bottom: 0.75rem; }

.padding_select {
  padding-right: 1rem solid #2997ff; }
  .padding_select:focus {
  /* border-style: solid;
border-color: #07cdbd;

border-width: 1px;
outline-offset: 5px; */
    border: 0.0625rem solid #2997ff;
    outline: 0.25rem solid #2997ff27;
    border-right: 1rem solid #2997ff;
    /* outline-offset: 4px; */ }
  .padding_select:active {
    border-right: 1rem solid transparent; }

.learn#experienciaGuiada {
  margin-top: 200px;
  margin-bottom: 160px;
  max-width: 100%; }
  .learn#experienciaGuiada .experiencia-content-wrapper {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    /* gap: 40px; */ }
    @media (max-width: 992px) {
      .learn#experienciaGuiada .experiencia-content-wrapper {
        flex-direction: column-reverse;
        align-items: flex-start; } }
  .learn#experienciaGuiada .heading__learn {
    flex: 1;
    max-width: 50%; }
    @media (max-width: 992px) {
      .learn#experienciaGuiada .heading__learn {
        max-width: 100%;
        margin-top: 40px; } }
    @media (max-width: 600px) {
      .learn#experienciaGuiada .heading__learn {
        max-width: 100%;
        margin-top: 40px; } }
  .learn#experienciaGuiada .sponsors-section {
    display: flex;
    justify-content: center;
    /* Centra horizontalmente */
    align-items: center;
    /* Centra verticalmente */
    position: relative;
    /* Necesario si .appsBack tiene position: absolute; */
    /* Otros estilos de tu contenedor padre */
    flex: 1;
    max-width: 45%; }
    .learn#experienciaGuiada .sponsors-section .appsBack {
      position: absolute;
      width: 180%;
      /* en lugar de usar scale */
      left: -40%;
      /* ajusta según el diseño */ }
      @media (max-width: 600px) {
        .learn#experienciaGuiada .sponsors-section .appsBack {
          width: 100%;
          left: 0; } }
    @media (max-width: 992px) {
      .learn#experienciaGuiada .sponsors-section {
        max-width: 100%;
        width: 100%;
        margin-top: 30px; } }
  .learn#experienciaGuiada .sponsors-container {
    display: flex;
    flex-direction: column;
    gap: 24px; }
  .learn#experienciaGuiada .sponsors-row {
    display: flex;
    justify-content: center;
    gap: 24px; }
  .learn#experienciaGuiada .logo-perspective {
    width: 72px;
    height: 72px;
    perspective: 1000px; }
  .learn#experienciaGuiada .logo-card {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s;
    transform-style: preserve-3d; }
    .learn#experienciaGuiada .logo-card.flipping {
      transform: rotateY(180deg); }
  .learn#experienciaGuiada .logo-front, .learn#experienciaGuiada .logo-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); }
    .learn#experienciaGuiada .logo-front img, .learn#experienciaGuiada .logo-back img {
      max-width: 70%;
      max-height: 70%;
      transition: transform 0.3s ease; }
  .learn#experienciaGuiada .logo-back {
    transform: rotateY(180deg); }
  .learn#experienciaGuiada .hidden-logos {
    display: none; }

@media (max-width: 1200px) {
  .learn#experienciaGuiada .logo-perspective {
    width: 64.8px;
    height: 64.8px; }
  .learn#experienciaGuiada .sponsors-container, .learn#experienciaGuiada .sponsors-row {
    gap: 19.2px; } }
@media (max-width: 768px) {
  .learn#experienciaGuiada .logo-perspective {
    width: 57.6px;
    height: 57.6px; }
  .learn#experienciaGuiada .sponsors-container, .learn#experienciaGuiada .sponsors-row {
    gap: 14.4px; } }
@media (max-width: 576px) {
  .learn#experienciaGuiada {
    gap: 40px; }
    .learn#experienciaGuiada .logo-perspective {
      width: 57.6px;
      height: 57.6px; }
    .learn#experienciaGuiada .sponsors-container, .learn#experienciaGuiada .sponsors-row {
      gap: 19.2px; } }
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; }

body {
  font-family: 'Poppins', sans-serif;
  line-height: 1.6;
  color: #333; }

.container {
  max-width: 1076px;
  margin: 0 auto;
  /* padding: 0 $padding-horizontal; */ }
  @media (max-width: 1120px) {
    .container {
      padding: 0 16px; } }

.full-width {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw; }

.content-centered {
  max-width: 1076px;
  margin: 0 auto;
  /* padding: 0 $padding-horizontal; */ }
  @media (max-width: 1120px) {
    .content-centered {
      padding: 0 16px; } }

main {
  padding-top: 72px;
  /* padding-top: $navbar-height + 40px; */
  /* padding-bottom: 40px; */ }
  @media (max-width: 768px) {
    main {
      padding-top: 72px; } }

section {
  /*   margin-bottom: 60px;
   */ }
  @media (max-width: 768px) {
    section {
      margin-bottom: 40px; } }
  section h1, section h2, section h3 {
    margin-bottom: 20px;
    font-weight: 600;
    line-height: 1.2; }
  section h1 {
    font-size: 3.5rem; }
    @media (max-width: 768px) {
      section h1 {
        font-size: 2.5rem; } }
    @media (max-width: 480px) {
      section h1 {
        font-size: 2rem; } }
  section h2 {
    font-size: 2.5rem;
    color: #e5204f; }
    @media (max-width: 768px) {
      section h2 {
        font-size: 2rem; } }
    @media (max-width: 480px) {
      section h2 {
        font-size: 1.5rem; } }
  section h3 {
    font-size: 1.5rem;
    color: #333; }
    @media (max-width: 768px) {
      section h3 {
        font-size: 1.3rem; } }
  section p {
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 16px; }
    @media (max-width: 768px) {
      section p {
        font-size: 1rem; } }

.tech-section {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center; }
  @media (max-width: 768px) {
    .tech-section {
      padding: 60px 24px; } }
  @media (max-width: 480px) {
    .tech-section {
      padding: 40px 16px; } }
  .tech-section .tech-container {
    position: relative;
    width: 100%;
    max-width: 1076px;
    height: 720px;
    border-radius: 36px;
    overflow: hidden;
    margin: 0 auto; }
    @media (max-width: 1120px) {
      .tech-section .tech-container {
        margin: 0 24px;
        max-width: calc(100% - 48px); } }
    @media (max-width: 768px) {
      .tech-section .tech-container {
        height: 500px;
        margin: 0;
        max-width: 100%; } }
    @media (max-width: 480px) {
      .tech-section .tech-container {
        height: 400px; } }
  .tech-section .tech-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 70% center;
    z-index: 1; }
    .tech-section .tech-image.position-top {
      object-position: center top; }
    .tech-section .tech-image.position-bottom {
      object-position: center bottom; }
    .tech-section .tech-image.position-left {
      object-position: left center; }
    .tech-section .tech-image.position-right {
      object-position: 100% center; }
    .tech-section .tech-image.contain {
      object-fit: contain; }
  .tech-section .tech-content {
    position: absolute;
    top: 50%;
    left: 60px;
    transform: translateY(-50%);
    z-index: 2;
    background: #7868f6;
    border-radius: 32px;
    padding: 60px 40px;
    width: 561px;
    max-width: calc(100% - 120px);
    box-shadow: 0 10px 30px rgba(139, 92, 246, 0.3); }
    @media (max-width: 1024px) {
      .tech-section .tech-content {
        width: 480px;
        padding: 50px 35px;
        left: 40px;
        max-width: calc(100% - 80px); } }
    @media (max-width: 768px) {
      .tech-section .tech-content {
        width: auto;
        left: 30px;
        right: 30px;
        padding: 40px 30px;
        max-width: none; } }
    @media (max-width: 480px) {
      .tech-section .tech-content {
        left: 20px;
        right: 20px;
        padding: 30px 25px; } }
    .tech-section .tech-content h2 {
      color: white;
      font-size: 64px;
      font-weight: 700;
      line-height: 1.2;
      margin: 0;
      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); }
      @media (max-width: 1024px) {
        .tech-section .tech-content h2 {
          font-size: 2.5rem; } }
      @media (max-width: 768px) {
        .tech-section .tech-content h2 {
          font-size: 2rem;
          text-align: center; } }
      @media (max-width: 480px) {
        .tech-section .tech-content h2 {
          font-size: 1.75rem; } }

.contenido-mision {
  padding: 40px 0; }
  .contenido-mision .fraseMision {
    font-size: 36px;
    font-family: "Fraunces", serif;
    font-style: oblique;
    color: #ffffee;
    font-weight: 400;
    margin-bottom: 20px;
    text-align: center;
    text-wrap: balance; }
  @media (max-width: 768px) {
    .contenido-mision {
      padding: 30px 0; } }

.mission-section {
  color: white;
  padding: 100px 0; }
  @media (max-width: 768px) {
    .mission-section {
      padding: 80px 0; } }
  .mission-section .mission-container {
    max-width: 1076px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1.8fr;
    gap: 80px;
    align-items: start; }
    @media (max-width: 1120px) {
      .mission-section .mission-container {
        padding: 0 24px;
        gap: 60px; } }
    @media (max-width: 768px) {
      .mission-section .mission-container {
        grid-template-columns: 1fr;
        gap: 40px;
        padding: 0 20px; } }
  .mission-section .mission-header .mission-accent {
    width: 80px;
    height: 4px;
    background: linear-gradient(90deg, #8B5CF6 0%, #A855F7 100%);
    margin-bottom: 24px;
    border-radius: 2px; }
    @media (max-width: 768px) {
      .mission-section .mission-header .mission-accent {
        width: 60px;
        margin-bottom: 20px; } }
  .mission-section .mission-header h1 {
    font-size: 4rem;
    font-weight: 700;
    line-height: 1.1;
    margin: 0;
    color: white; }
    @media (max-width: 1024px) {
      .mission-section .mission-header h1 {
        font-size: 3.5rem; } }
    @media (max-width: 768px) {
      .mission-section .mission-header h1 {
        font-size: 2.5rem; } }
    @media (max-width: 480px) {
      .mission-section .mission-header h1 {
        font-size: 2rem; } }
  .mission-section .mission-content h2 {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 32px;
    color: #ffffee; }
    @media (max-width: 768px) {
      .mission-section .mission-content h2 {
        font-size: 1.3rem;
        margin-bottom: 24px; } }
    @media (max-width: 480px) {
      .mission-section .mission-content h2 {
        font-size: 1.2rem; } }
  .mission-section .mission-content p {
    font-size: 1rem;
    line-height: 1.7;
    color: #94a3b8;
    margin-bottom: 24px; }
    .mission-section .mission-content p:last-child {
      margin-bottom: 0; }
    @media (max-width: 768px) {
      .mission-section .mission-content p {
        font-size: 0.95rem;
        line-height: 1.6; } }

.importance-section {
  color: white; }
  @media (max-width: 768px) {
    .importance-section {
      padding: 80px 0; } }
  @media (max-width: 480px) {
    .importance-section {
      padding: 60px 0; } }
  .importance-section .importance-container {
    max-width: 1076px;
    margin: 0 auto; }
    @media (max-width: 1120px) {
      .importance-section .importance-container {
        padding: 0 24px; } }
    @media (max-width: 768px) {
      .importance-section .importance-container {
        padding: 0 20px; } }
    @media (max-width: 480px) {
      .importance-section .importance-container {
        padding: 0 16px; } }
  .importance-section .main-title {
    font-size: 3.5rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 80px;
    color: white; }
    @media (max-width: 1024px) {
      .importance-section .main-title {
        font-size: 3rem;
        margin-bottom: 70px; } }
    @media (max-width: 768px) {
      .importance-section .main-title {
        font-size: 2.5rem;
        margin-bottom: 60px; } }
    @media (max-width: 480px) {
      .importance-section .main-title {
        font-size: 2rem;
        margin-bottom: 50px; } }
  .importance-section .content-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
    justify-content: center; }
    @media (max-width: 1024px) {
      .importance-section .content-wrapper {
        gap: 60px; } }
    @media (max-width: 768px) {
      .importance-section .content-wrapper {
        grid-template-columns: 1fr;
        gap: 50px; } }
    @media (max-width: 480px) {
      .importance-section .content-wrapper {
        gap: 40px; } }
  .importance-section .menu-left {
    display: flex;
    flex-direction: column;
    gap: 30px; }
    @media (max-width: 768px) {
      .importance-section .menu-left {
        gap: 20px; } }
  .importance-section .menu-item {
    display: flex;
    align-items: center;
    gap: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    opacity: 0.4;
    padding: 16px;
    border-radius: 8px;
    min-height: 48px;
    overflow: hidden; }
    @media (max-width: 768px) {
      .importance-section .menu-item {
        gap: 15px;
        min-height: 36px;
        padding: 6px 8px; } }
    @media (max-width: 480px) {
      .importance-section .menu-item {
        gap: 12px;
        min-height: 32px;
        padding: 4px 6px; } }
    .importance-section .menu-item.active {
      opacity: 1;
      background: rgba(168, 85, 247, 0.1);
      height: auto;
      align-items: flex-start;
      padding: 16px; }
      @media (max-width: 768px) {
        .importance-section .menu-item.active {
          padding: 8px; } }
      @media (max-width: 480px) {
        .importance-section .menu-item.active {
          padding: 6px; } }
      .importance-section .menu-item.active .menu-content h3 {
        color: #7868f6; }
      .importance-section .menu-item.active .progress-fill {
        animation: fillProgress 4s linear;
        animation-fill-mode: forwards; }
    .importance-section .menu-item:not(.active):hover {
      opacity: 0.6;
      background: rgba(255, 255, 255, 0.02); }
      .importance-section .menu-item:not(.active):hover .menu-content h3 {
        color: #94a3b8; }
    .importance-section .menu-item.active:hover {
      opacity: 1;
      background: rgba(168, 85, 247, 0.15); }
  .importance-section .progress-bar {
    width: 4px;
    min-height: 32px;
    height: 100%;
    background: rgba(255, 255, 255, 0.648);
    border-radius: 2px;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    opacity: 0.3;
    transition: all 0.3s ease;
    align-self: stretch;
    min-height: 100%;
    height: auto; }
    @media (max-width: 768px) {
      .importance-section .progress-bar {
        min-height: 20px; } }
    @media (max-width: 480px) {
      .importance-section .progress-bar {
        min-height: 16px;
        width: 3px; } }
  .importance-section .menu-item.active .progress-bar {
    background: rgba(255, 255, 255, 0.2);
    opacity: 1;
    min-height: 100%;
    height: auto; }
    @media (max-width: 768px) {
      .importance-section .menu-item.active .progress-bar {
        min-height: 60px; } }
    @media (max-width: 480px) {
      .importance-section .menu-item.active .progress-bar {
        min-height: 48px; } }
  .importance-section .progress-fill {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0%;
    background: linear-gradient(180deg, #A855F7 0%, #8B5CF6 100%);
    border-radius: 2px;
    transition: height 0.3s ease; }
  .importance-section .menu-content {
    flex: 1; }
    .importance-section .menu-content h3 {
      font-size: 40px;
      font-weight: 600;
      margin-bottom: 8px;
      color: #64748b;
      transition: color 0.3s ease;
      line-height: 1.1;
      margin: 0; }
      @media (max-width: 1024px) {
        .importance-section .menu-content h3 {
          font-size: 32px; } }
      @media (max-width: 768px) {
        .importance-section .menu-content h3 {
          font-size: 24px; } }
      @media (max-width: 480px) {
        .importance-section .menu-content h3 {
          font-size: 18px; } }
  .importance-section .menu-item.active .menu-content h3 {
    color: #7868f6;
    margin-bottom: 12px; }
    @media (max-width: 768px) {
      .importance-section .menu-item.active .menu-content h3 {
        margin-bottom: 8px; } }
  .importance-section .menu-item.active .menu-content p {
    opacity: 1;
    max-height: 100px; }
    @media (max-width: 768px) {
      .importance-section .menu-item.active .menu-content p {
        max-height: 80px; } }
  .importance-section .image-right .image-container {
    position: relative;
    width: 100%;
    height: 620px;
    border-radius: 20px;
    overflow: hidden; }
    @media (max-width: 1024px) {
      .importance-section .image-right .image-container {
        height: 350px; } }
    @media (max-width: 768px) {
      .importance-section .image-right .image-container {
        height: 300px; } }
    @media (max-width: 480px) {
      .importance-section .image-right .image-container {
        height: 250px;
        border-radius: 16px; } }
  .importance-section .image-right .tab-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.5s ease; }
    .importance-section .image-right .tab-image.active {
      opacity: 1;
      transform: translateY(0); }
  .importance-section .image-right .tab-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 20px; }
    @media (max-width: 480px) {
      .importance-section .image-right .tab-img {
        border-radius: 16px; } }
  .importance-section .image-right .image-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 2px dashed #475569;
    border-radius: 20px;
    font-size: 4rem; }
    @media (max-width: 768px) {
      .importance-section .image-right .image-placeholder {
        font-size: 3rem;
        border-radius: 16px; } }
    @media (max-width: 480px) {
      .importance-section .image-right .image-placeholder {
        font-size: 2rem; } }
    .importance-section .image-right .image-placeholder span {
      font-size: 1.2rem;
      color: #94a3b8;
      margin-top: 16px;
      font-weight: 500; }
      @media (max-width: 768px) {
        .importance-section .image-right .image-placeholder span {
          font-size: 1rem;
          margin-top: 12px; } }
      @media (max-width: 480px) {
        .importance-section .image-right .image-placeholder span {
          font-size: 0.9rem;
          margin-top: 8px; } }
@keyframes fillProgress {
  0% {
    height: 0%; }
  100% {
    height: 100%; } }
.statistics-section {
  /*   background: linear-gradient(135deg, #0a0e27 0%, #1a1f3a 100%);
   */
  position: relative;
  width: 100%; }
  .statistics-section .statistics-container {
    max-width: 1076px;
    margin: 0 auto;
    /* padding: 0 20px; */
    position: relative; }
  .statistics-section .statistics-header {
    margin-bottom: 50px; }
  .statistics-section .statistics-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 20px;
    background: linear-gradient(135deg, #fff 0%, #e0e7ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text; }
  .statistics-section .statistics-subtitle {
    font-size: 1.1rem;
    line-height: 1.6;
    color: #94a3b8;
    max-width: 600px; }
  .statistics-section .statistics-slider-container {
    position: relative;
    overflow: visible;
    width: 100%; }
  .statistics-section .statistics-slider-controls {
    display: flex;
    gap: 12px;
    margin-bottom: 40px;
    background: #39317A;
    border-radius: 44px;
    width: fit-content;
    padding: 6px; }
  .statistics-section .statistics-slider-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden; }
    .statistics-section .statistics-slider-btn::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      border-radius: 50%;
      transition: all 0.3s ease; }
    .statistics-section .statistics-slider-btn--prev, .statistics-section .statistics-slider-btn--next {
      background: #39317A; }
      .statistics-section .statistics-slider-btn--prev::before, .statistics-section .statistics-slider-btn--next::before {
        background: #39317A; }
    .statistics-section .statistics-slider-btn:hover::before {
      background: #7868f6; }
    .statistics-section .statistics-slider-btn:hover svg {
      transform: scale(1.1); }
    .statistics-section .statistics-slider-btn:active {
      background: #7868f6; }
      .statistics-section .statistics-slider-btn:active::before {
        background: #7868f6; }
    .statistics-section .statistics-slider-btn svg {
      width: 16px;
      height: 16px;
      fill: white;
      position: relative;
      z-index: 1;
      transition: transform 0.2s ease; }
    .statistics-section .statistics-slider-btn:disabled {
      background: #39317A;
      cursor: not-allowed; }
      .statistics-section .statistics-slider-btn:disabled:hover::before {
        background: #39317A; }
      .statistics-section .statistics-slider-btn:disabled:hover svg {
        transform: none; }
  .statistics-section .statistics-slider-track {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: auto;
    padding-bottom: 10px;
    scrollbar-width: none;
    -ms-overflow-style: none;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    width: 100vw;
    padding-left: calc(50vw - 538px);
    padding-right: calc(50vw - 538px);
    cursor: grab;
    will-change: scroll-position;
    transform: translate3d(0, 0, 0); }
    .statistics-section .statistics-slider-track:active {
      cursor: grabbing; }
    .statistics-section .statistics-slider-track::-webkit-scrollbar {
      display: none; }
    .statistics-section .statistics-slider-track.statistics-rubber-band {
      transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1); }
  .statistics-section .statistics-card {
    max-width: 520px;
    flex-shrink: 0;
    background: rgba(30, 41, 59, 0.6);
    border: 1px solid rgba(148, 163, 184, 0.1);
    border-radius: 16px;
    padding: 30px;
    position: relative;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 300px;
    /* &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, #7c3aed, #a855f7);
        border-radius: 16px 16px 0 0;
    } */ }
    .statistics-section .statistics-card:hover {
      transform: translateY(-8px);
      border-color: rgba(124, 58, 237, 0.3);
      box-shadow: 0 20px 40px rgba(124, 58, 237, 0.15); }
  .statistics-section .statistics-card-content {
    flex-grow: 1;
    margin-bottom: 25px; }
  .statistics-section .statistics-card-percentage {
    font-size: 3.5rem;
    font-weight: 800;
    margin-bottom: 18px;
    background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1; }
  .statistics-section .statistics-card-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 15px;
    color: #f1f5f9;
    line-height: 1.3; }
  .statistics-section .statistics-card-description {
    font-size: 1rem;
    line-height: 1.6;
    color: #94a3b8; }
  .statistics-section .statistics-card-image {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: auto; }
    .statistics-section .statistics-card-image img {
      width: 100%;
      height: 320px;
      border-radius: 12px;
      object-fit: cover;
      transition: transform 0.3s ease; }
    .statistics-section .statistics-card-image:hover img {
      transform: scale(1.05); }
@keyframes statistics-slideInUp {
  to {
    opacity: 1;
    transform: translateY(0); } }
  @media (max-width: 1120px) {
    .statistics-section .statistics-container {
      max-width: 100%;
      padding: 0 20px; }
    .statistics-section .statistics-slider-track {
      padding-left: 20px;
      padding-right: 20px; } }
  @media (max-width: 768px) {
    .statistics-section .statistics-title {
      font-size: 2rem; }
    .statistics-section .statistics-card {
      min-width: 400px;
      min-height: 280px;
      padding: 25px; }
    .statistics-section .statistics-container {
      padding: 0 15px; }
    .statistics-section .statistics-slider-track {
      padding-left: 15px;
      padding-right: 15px; }
    .statistics-section .statistics-card-percentage {
      font-size: 2.8rem; }
    .statistics-section .statistics-card-title {
      font-size: 1.3rem; }
    .statistics-section .statistics-card-description {
      font-size: 0.95rem; }
    .statistics-section .statistics-card-image img {
      width: 100px;
      height: 100px; } }
  @media (max-width: 480px) {
    .statistics-section .statistics-card {
      min-width: 320px;
      padding: 20px; }
    .statistics-section .statistics-card-percentage {
      font-size: 2.5rem; }
    .statistics-section .statistics-card-title {
      font-size: 1.2rem; }
    .statistics-section .statistics-card-image img {
      width: 90px;
      height: 90px; } }

.stacking-section {
  position: relative;
  width: 100%; }

.stacking-header {
  margin-bottom: -160px; }

.stacking-container {
  position: relative;
  height: 800vh; }
  @media (max-width: 768px) {
    .stacking-container {
      height: 450vh; } }

.cards-viewport {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden; }

.stacking-card {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: 1076px;
  height: 500px;
  border-radius: 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
  transition: none;
  will-change: transform;
  opacity: 1; }
  @media (max-width: 768px) {
    .stacking-card {
      grid-template-columns: 1fr;
      height: 600px;
      width: 95%; } }
  @media (max-width: 480px) {
    .stacking-card {
      height: 500px;
      border-radius: 16px; } }

.card-content {
  padding: 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index: 2; }
  @media (max-width: 768px) {
    .card-content {
      padding: 40px;
      text-align: center; } }
  @media (max-width: 480px) {
    .card-content {
      padding: 24px; } }

.card-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden; }
  @media (max-width: 768px) {
    .card-visual {
      order: -1;
      height: 200px; } }

.card-illustration {
  font-size: 8rem;
  opacity: 0.8;
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.3)); }
  @media (max-width: 768px) {
    .card-illustration {
      font-size: 4rem; } }
  @media (max-width: 480px) {
    .card-illustration {
      font-size: 3rem; } }

.card-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 20px;
  line-height: 1.2;
  color: white; }
  @media (max-width: 768px) {
    .card-title {
      font-size: 2rem; } }
  @media (max-width: 480px) {
    .card-title {
      font-size: 1.75rem;
      margin-bottom: 16px; } }

.card-description {
  font-size: 1.1rem;
  line-height: 1.6;
  opacity: 0.9;
  margin-bottom: 30px;
  color: white; }
  @media (max-width: 768px) {
    .card-description {
      font-size: 1rem;
      margin-bottom: 24px; } }
  @media (max-width: 480px) {
    .card-description {
      font-size: 0.9rem;
      margin-bottom: 20px; } }

.card-metric-invertir {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  border-radius: 8px; }
  .card-metric-invertir .metric-icon {
    display: flex;
    align-items: center;
    justify-content: center; }
    .card-metric-invertir .metric-icon .metric-icon-img {
      width: 60px;
      height: 60px;
      object-fit: contain; }
  .card-metric-invertir .metric-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2; }
    .card-metric-invertir .metric-text .metric-value {
      font-size: 2.5rem;
      font-weight: 600;
      color: #33205B; }
    .card-metric-invertir .metric-text .metric-description {
      font-size: 1.1rem;
      font-weight: 400;
      color: #33205B; }
  @media (max-width: 768px) {
    .card-metric-invertir {
      gap: 1rem; }
      .card-metric-invertir .metric-icon .metric-icon-img {
        width: 50px;
        height: 50px; }
      .card-metric-invertir .metric-text .metric-value {
        font-size: 2rem; }
      .card-metric-invertir .metric-text .metric-description {
        font-size: 1rem; } }
  @media (max-width: 480px) {
    .card-metric-invertir {
      flex-direction: column;
      text-align: center;
      gap: 0.5rem; }
      .card-metric-invertir .metric-icon .metric-icon-img {
        width: 40px;
        height: 40px; }
      .card-metric-invertir .metric-text .metric-value {
        font-size: 1.8rem; }
      .card-metric-invertir .metric-text .metric-description {
        font-size: 0.9rem; } }

.metric-icon {
  font-size: 1.5rem; }
  @media (max-width: 480px) {
    .metric-icon {
      font-size: 1.2rem; } }

.card-1 {
  background: linear-gradient(135deg, #6960B8 0%, #7868f6 100%); }
  .card-1 .card-visual {
    background: linear-gradient(135deg, #4c669f 0%, #3b5998 100%); }

.card-2 {
  background: linear-gradient(135deg, #ECEBFF 0%, #CFCCFF 100%); }
  .card-2 .card-visual {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }

.card-3 {
  background: linear-gradient(135deg, #6960B8 0%, #6960B8 100%); }
  .card-3 .card-visual {
    background: linear-gradient(135deg, #ECEBFF 0%, #ECEBFF 100%); }

.card-4 {
  background: linear-gradient(135deg, #ECEBFF 0%, #C1BDFF 100%); }
  .card-4 .card-visual {
    background: linear-gradient(135deg, #7868f6 0%, #ba90e4 100%); }

.progress-indicator {
  position: fixed;
  top: 50%;
  right: 30px;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 1000; }
  @media (max-width: 768px) {
    .progress-indicator {
      right: 20px;
      gap: 8px; } }
  @media (max-width: 480px) {
    .progress-indicator {
      right: 16px;
      gap: 6px; } }

.progress-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transition: all 0.3s ease;
  cursor: pointer; }
  @media (max-width: 480px) {
    .progress-dot {
      width: 6px;
      height: 6px; } }
  .progress-dot.active {
    background: #667eea;
    transform: scale(1.5); }
    @media (max-width: 480px) {
      .progress-dot.active {
        transform: scale(1.3); } }

.stacking-card {
  will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  .stacking-card,
  .progress-dot {
    transition: none; } }
/* footer {

  padding: 40px 0;
  text-align: center;
  margin-top: 60px;
  color: #666;
  
  @media (max-width: 768px) {
    padding: 30px 0;
    margin-top: 40px;
  }
  
  p {
    margin: 0;
    font-size: 0.9rem;
  }
} */
/* ========== TIMELINE STYLES ========== */
.events-timeline {
  max-width: 100%;
  /* margin: 4rem auto; */
  padding: 2rem;
  position: relative; }
  .events-timeline::before {
    content: '';
    position: absolute;
    width: 1400px;
    height: 1400px;
    top: 0%;
    right: -100%;
    background: radial-gradient(circle, rgba(142, 107, 255, 0.8) 0%, rgba(130, 102, 255, 0.6) 40%, transparent 80%);
    z-index: -1;
    filter: blur(420px); }
    @media (max-width: 600px) {
      .events-timeline::before {
        width: 400px;
        height: 400px;
        top: 50%;
        right: 0%; } }
  .events-timeline::after {
    content: '';
    position: absolute;
    width: 900px;
    height: 900px;
    top: 20%;
    right: -100%;
    background: radial-gradient(circle, #8e6bff 100%, #8266ff 100%, #785fff 100%);
    border-radius: 50%;
    z-index: -1; }

.timeline {
  position: relative;
  /* left: 30px;  */
  /* esto controla para que centre */
  padding: 2rem 0; }

/* Eliminamos la línea continua - ahora cada item tiene su segmento */
.timeline-item {
  position: relative;
  margin-bottom: 1.5rem;
  /* este es el la distancia que hay entre cards */
  margin-left: 120px;
  opacity: 0;
  transform: translateY(30px);
  animation: fadeInUp 0.6s ease forwards; }

.timeline-item:nth-child(1) {
  animation-delay: 0.1s; }

.timeline-item:nth-child(2) {
  animation-delay: 0.2s; }

.timeline-item:nth-child(3) {
  animation-delay: 0.3s; }

.timeline-item:nth-child(4) {
  animation-delay: 0.4s; }

.timeline-item:last-child {
  margin-bottom: 0; }

/* Segmento de línea individual para cada evento */
.timeline-segment {
  position: absolute;
  left: -60px;
  /* Posición exacta de la línea */
  top: 0;
  width: 2px;
  background: none;
  background-image: linear-gradient(to bottom, #865ffc46 50%, transparent 50%);
  background-size: 2px 12px;
  background-repeat: repeat-y;
  border-radius: 1px;
  z-index: 1; }

/* Círculo único por evento - PERFECTAMENTE CENTRADO */
.timeline-circle {
  position: absolute;
  left: -70px;
  /* -60px (línea) - 11px (radio + borde) = -71px */
  top: 0;
  width: 22px;
  height: 22px;
  background: #7868f6;
  /* Cambia a tu color deseado */
  border: 3px solid #c0bbff8f;
  border-radius: 50%;
  z-index: 2;
  transform: translateY(-50%); }

.event-date-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
  position: relative; }

.date-circle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #e2e8f0; }

.date-month {
  font-size: 0.875rem;
  color: #a0aec0;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.5px; }

.date-number {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1; }

.date-day {
  font-size: 0.875rem;
  color: #a0aec0;
  text-transform: capitalize; }

.event-content {
  width: 100%; }

.event-card {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 1rem;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  display: flex;
  gap: 1rem;
  /* align-items: flex-start; */
  align-items: stretch;
  /* <-- AGREGAR ESTA LÍNEA */ }

.event-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--event-color, #4a5568); }

.event-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  border-color: rgba(255, 255, 255, 0.2); }

.event-info {
  flex: 1;
  min-width: 0; }

.event-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px; }

.event-time {
  font-size: 1.125rem;
  font-weight: 600;
  color: #e2e8f0; }

.event-badge {
  padding: 0.2rem 1rem;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
  display: inline-block; }

.event-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #f7fafc;
  margin-bottom: 1rem;
  line-height: 1.3; }

.event-speaker {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.5rem; }

.speaker-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  /* background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center; */
  /* color: white;
  font-weight: 600;
  font-size: 0.875rem; */
  overflow: hidden;
  /* <-- AGREGAR ESTA LÍNEA */
  /* ELIMINAR: background, display, align-items, justify-content, color, font-weight, font-size */ }

.speaker-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  /* <-- AGREGAR ESTA LÍNEA */ }

.speaker-info {
  display: flex;
  flex-direction: column;
  align-content: center; }

.speaker-info h4 {
  color: #e2e8f0;
  font-size: 0.875rem;
  font-weight: 600; }

.speaker-info p {
  color: #a0aec0;
  font-size: 0.75rem;
  margin: 0%; }

.event-attendees {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #a0aec0;
  font-size: 0.875rem; }

.attendees-avatars {
  display: flex;
  margin-left: 0.5rem; }

.attendee-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  border: 2px solid #1a202c;
  margin-left: -8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.625rem;
  color: white;
  font-weight: 600; }

.attendee-avatar:first-child {
  margin-left: 0; }

.event-image {
  min-width: 200px;
  width: 420px;
  /* QUITAR: height: 100%; */
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  display: flex;
  /* VOLVER A FLEX */
  align-items: center;
  justify-content: center;
  color: #a0aec0;
  font-size: 0.875rem;
  position: relative;
  overflow: hidden;
  flex-shrink: 0; }

.event-image::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0.3; }

.event-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 8px;
  position: absolute;
  /* CAMBIAR A ABSOLUTE */
  top: 0;
  left: 0; }

/* ========== EVENT TYPES CONFIGURATION ========== */
.event-virtual {
  --event-color: #9f7aea; }

.event-virtual .event-badge {
  background: rgba(159, 122, 234, 0.2);
  color: #d6bcfa;
  border: 1px solid rgba(159, 122, 234, 0.3); }

.event-presencial {
  --event-color: #48bb78; }

.event-presencial .event-badge {
  background: rgba(72, 187, 120, 0.2);
  color: #9ae6b4;
  border: 1px solid rgba(72, 187, 120, 0.3); }

/* ========== RESPONSIVE ========== */
@media (max-width: 768px) {
  .events-timeline {
    padding: 1rem; }

  .timeline-item {
    margin-left: 60px; }

  .timeline-segment {
    left: -30px;
    /* Posición exacta móvil */ }

  .timeline-circle {
    left: -40px;
    /* -30px (línea) - 10px (radio + borde) = -40px */
    width: 18px;
    height: 18px;
    border-width: 1px; }

  .event-card {
    flex-direction: column;
    gap: 1rem;
    padding: 1rem; }

  .event-image {
    min-width: 100%;
    width: 100%;
    height: 120px; }

  .date-circle {
    flex-wrap: wrap;
    gap: 0.25rem; } }
/* ========== ANIMATIONS ========== */
@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0); } }
/* Demo body styling */
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  min-height: 100vh;
  margin: 0;
  padding: 2rem 0; }

.demo-title {
  text-align: center;
  color: #e2e8f0;
  font-size: 2rem;
  margin-bottom: 2rem; }

html, body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
  width: 100% !important;
  box-sizing: border-box !important; }

.sponsors {
  padding: 4rem 0;
  margin: 0 auto;
  width: 100%;
  max-width: 100vw;
  overflow: visible;
  box-sizing: border-box;
  position: relative; }
  .sponsors::before {
    content: '';
    position: absolute;
    width: 1000px;
    height: 1000px;
    top: -20%;
    left: -80%;
    background: radial-gradient(circle, rgba(142, 107, 255, 0.8) 0%, rgba(130, 102, 255, 0.6) 40%, transparent 80%);
    z-index: -1;
    filter: blur(200px); }
  .sponsors::after {
    content: '';
    position: absolute;
    width: 800px;
    height: 800px;
    top: -20%;
    left: -90%;
    background: radial-gradient(circle, #8e6bff 100%, #8266ff 100%, #785fff 100%);
    border-radius: 50%;
    z-index: -1; }
  .sponsors .sponsors-wrapper {
    max-width: min(1076px, calc(100vw - 2rem));
    margin: 0 auto;
    padding: 0 1rem;
    box-sizing: border-box; }
  @media (max-width: 768px) {
    .sponsors {
      padding: 3rem 0; }
      .sponsors .sponsors-wrapper {
        padding: 0 1rem;
        max-width: calc(100vw - 2rem); } }
  @media (max-width: 480px) {
    .sponsors {
      padding: 2rem 0; }
      .sponsors .sponsors-wrapper {
        padding: 0 0.5rem;
        max-width: calc(100vw - 1rem); } }
  .sponsors .h1__page {
    margin-bottom: 3rem;
    text-align: center;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box; }
    @media (max-width: 768px) {
      .sponsors .h1__page {
        margin-bottom: 2rem;
        font-size: 1.75rem; } }
    @media (max-width: 480px) {
      .sponsors .h1__page {
        margin-bottom: 1.5rem;
        font-size: 1.5rem; } }

.sponsors-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  justify-items: center;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  overflow: visible;
  padding: 20px 0; }
  @media (max-width: 1024px) {
    .sponsors-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 1.25rem;
      padding: 18px 0; } }
  @media (max-width: 768px) {
    .sponsors-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 1rem;
      padding: 15px 0; } }
  @media (max-width: 480px) {
    .sponsors-grid {
      grid-template-columns: 1fr 1fr;
      gap: 0.75rem;
      width: 100%;
      padding: 10px 0; } }
  @media (max-width: 320px) {
    .sponsors-grid {
      gap: 0.5rem;
      padding: 8px 0; } }
  .sponsors-grid.single-last .sponsor-item:last-child {
    grid-column: span 2;
    justify-self: center;
    max-width: 200px; }
  @media (max-width: 1024px) {
    .sponsors-grid.single-last .sponsor-item:last-child {
      grid-column: 2 / 3;
      max-width: 180px; } }
  @media (max-width: 768px) {
    .sponsors-grid.single-last .sponsor-item:last-child {
      grid-column: 1 / 3;
      max-width: 160px; } }
  @media (max-width: 480px) {
    .sponsors-grid.single-last .sponsor-item:last-child {
      grid-column: 1 / 3;
      max-width: 140px; } }

.sponsor-item {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  height: 120px;
  max-width: 200px;
  min-width: 0;
  overflow: visible;
  position: relative; }
  @media (max-width: 1024px) {
    .sponsor-item {
      max-width: 180px;
      height: 110px; } }
  @media (max-width: 768px) {
    .sponsor-item {
      max-width: 160px;
      height: 100px; } }
  @media (max-width: 480px) {
    .sponsor-item {
      width: 100%;
      max-width: none;
      height: 80px;
      min-width: 0; } }
  @media (max-width: 320px) {
    .sponsor-item {
      height: 70px; } }

.sponsor-link {
  display: flex;
  width: 100%;
  height: 100%;
  text-decoration: none;
  border-radius: 12px;
  padding: 1rem;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  overflow: visible;
  position: relative;
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1); }
  .sponsor-link:hover {
    transform: translateY(-2px) scale(1.01);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    background: rgba(255, 255, 255, 0.08);
    z-index: 10; }
    @media (max-width: 480px) {
      .sponsor-link:hover {
        transform: none;
        z-index: auto; } }
  .sponsor-link:focus-visible {
    outline: 2px solid rgba(146, 133, 255, 0.6);
    outline-offset: 2px;
    z-index: 10; }
  .sponsor-link:active {
    transform: translateY(-1px) scale(0.99); }
  @media (max-width: 768px) {
    .sponsor-link {
      padding: 0.75rem;
      border-radius: 8px; } }
  @media (max-width: 480px) {
    .sponsor-link {
      padding: 0.5rem;
      border-radius: 6px; } }
  @media (max-width: 320px) {
    .sponsor-link {
      padding: 0.375rem;
      border-radius: 4px; } }

.sponsor-logo {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden; }

.sponsor-img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 80%;
  max-height: 80%;
  width: auto;
  height: auto;
  object-fit: contain;
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out; }
  .sponsor-img--default {
    opacity: 1;
    z-index: 2; }
  .sponsor-img--hover {
    opacity: 0;
    z-index: 1;
    transform: translate(-50%, -50%) scale(0.95); }

.sponsor-link:hover .sponsor-img--default {
  opacity: 0;
  transform: translate(-50%, -50%) scale(1.02); }
.sponsor-link:hover .sponsor-img--hover {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1); }

.sponsor-item {
  animation: fadeInUp 0.6s ease-out forwards;
  opacity: 0;
  transform: translateY(20px); }
  .sponsor-item:nth-child(1) {
    animation-delay: 0.04s; }
  .sponsor-item:nth-child(2) {
    animation-delay: 0.08s; }
  .sponsor-item:nth-child(3) {
    animation-delay: 0.12s; }
  .sponsor-item:nth-child(4) {
    animation-delay: 0.16s; }
  .sponsor-item:nth-child(5) {
    animation-delay: 0.2s; }
  .sponsor-item:nth-child(6) {
    animation-delay: 0.24s; }
  .sponsor-item:nth-child(7) {
    animation-delay: 0.28s; }
  .sponsor-item:nth-child(8) {
    animation-delay: 0.32s; }
  .sponsor-item:nth-child(9) {
    animation-delay: 0.36s; }
  .sponsor-item:nth-child(10) {
    animation-delay: 0.4s; }
  .sponsor-item:nth-child(11) {
    animation-delay: 0.44s; }
  .sponsor-item:nth-child(12) {
    animation-delay: 0.48s; }
  .sponsor-item:nth-child(13) {
    animation-delay: 0.52s; }
  .sponsor-item:nth-child(14) {
    animation-delay: 0.56s; }
  .sponsor-item:nth-child(15) {
    animation-delay: 0.6s; }
  .sponsor-item:nth-child(16) {
    animation-delay: 0.64s; }
  .sponsor-item:nth-child(17) {
    animation-delay: 0.68s; }
  .sponsor-item:nth-child(18) {
    animation-delay: 0.72s; }
  .sponsor-item:nth-child(19) {
    animation-delay: 0.76s; }
  .sponsor-item:nth-child(20) {
    animation-delay: 0.8s; }

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0); } }
@media (prefers-color-scheme: dark) {
  .sponsor-link {
    background: rgba(0, 0, 0, 0.2);
    border-color: rgba(255, 255, 255, 0.05); }
    .sponsor-link:hover {
      background: rgba(0, 0, 0, 0.3); } }
.debug-sponsors-overflow html, .debug-sponsors-overflow body {
  overflow-x: hidden !important;
  max-width: 100vw !important; }
.debug-sponsors-overflow .sponsors-grid, .debug-sponsors-overflow .sponsors-wrapper, .debug-sponsors-overflow .sponsors {
  background: rgba(0, 255, 0, 0.05) !important;
  border: 1px dashed rgba(0, 255, 0, 0.5) !important; }
.debug-sponsors-overflow .sponsor-item {
  outline: 2px solid rgba(255, 0, 0, 0.7) !important; }

.section-py-xs {
  padding-top: 32px;
  padding-bottom: 32px; }

.section-py-sm {
  padding-top: 48px;
  padding-bottom: 48px; }

.section-py-md {
  padding-top: 64px;
  padding-bottom: 64px; }

.section-py-lg {
  padding-top: 96px;
  padding-bottom: 96px; }

.section-py-xl {
  padding-top: 128px;
  padding-bottom: 128px; }

.section-py-2xl {
  padding-top: 160px;
  padding-bottom: 160px; }

.section-py-3xl {
  padding-top: 192px;
  padding-bottom: 192px; }

.section-pt-xs {
  padding-top: 32px; }

.section-pt-sm {
  padding-top: 48px; }

.section-pt-md {
  padding-top: 64px; }

.section-pt-lg {
  padding-top: 96px; }

.section-pt-xl {
  padding-top: 128px; }

.section-pt-2xl {
  padding-top: 160px; }

.section-pt-3xl {
  padding-top: 192px; }

.section-pb-xs {
  padding-bottom: 32px; }

.section-pb-sm {
  padding-bottom: 48px; }

.section-pb-md {
  padding-bottom: 64px; }

.section-pb-lg {
  padding-bottom: 96px; }

.section-pb-xl {
  padding-bottom: 128px; }

.section-pb-2xl {
  padding-bottom: 160px; }

.footer {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin: 0 auto;
  gap: 2rem;
  margin-top: 11rem; }
  .footer .footerCopy {
    color: #C1BDFF;
    font-family: "Poppins", sans-serif;
    font-size: 14px;
    text-align: center;
    width: 100%; }
  @media (max-width: 600px) {
    .footer {
      max-width: 100vw;
      gap: 1.5rem;
      padding: 0 1rem; }
      .footer .footerCopy {
        font-size: 12px;
        padding: 0 1rem; } }
  .footer .logo-footer {
    display: block;
    margin: 0 auto;
    margin-bottom: 1rem; }
  .footer .footer-social-media {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    margin-bottom: 1rem;
    flex-wrap: wrap; }
    @media (max-width: 600px) {
      .footer .footer-social-media {
        gap: 1rem;
        width: 100%;
        padding: 0 1rem; } }
  .footer .social-container {
    position: relative;
    width: 36px;
    height: 36px;
    transition: transform 0.3s ease;
    flex-shrink: 0; }
    .footer .social-container:hover {
      transform: translateY(-2px); }
    .footer .social-container.focused {
      outline: 2px solid rgba(146, 133, 255, 0.6);
      outline-offset: 4px;
      border-radius: 4px; }
  .footer .glow-element {
    position: absolute;
    width: 150%;
    height: 150%;
    top: -25%;
    left: -25%;
    background-image: url("../image/social-media/glowToIcons.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0;
    transform: scale(1);
    transition: opacity 0.4s ease, transform 0.4s ease;
    z-index: 1; }
  .footer .social {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    background-size: 36px 36px;
    background-repeat: no-repeat;
    background-position: center;
    transform: scale(1);
    transition: transform 0.3s ease, filter 0.3s ease;
    z-index: 2;
    text-decoration: none; }
    .footer .social:focus {
      outline: none; }
    .footer .social:active {
      transform: scale(0.95); }
  .footer .social-container:hover .glow-element {
    opacity: 0.6;
    transform: scale(1.8); }
  .footer .social-container:hover .social {
    transform: translateY(-2px) scale(1);
    filter: drop-shadow(0 0 5px rgba(146, 133, 255, 0.7)); }
  .footer .social-container[data-platform="facebook"]:hover .social {
    filter: drop-shadow(0 0 5px rgba(24, 119, 242, 0.8)); }
  .footer .social-container[data-platform="twitter"]:hover .social,
  .footer .social-container[data-platform="x"]:hover .social {
    filter: drop-shadow(0 0 5px rgba(29, 161, 242, 0.8)); }
  .footer .social-container[data-platform="instagram"]:hover .social {
    filter: drop-shadow(0 0 5px rgba(225, 48, 108, 0.8)); }
  .footer .social-container[data-platform="linkedin"]:hover .social {
    filter: drop-shadow(0 0 5px rgba(0, 119, 181, 0.8)); }
  .footer .social-container[data-platform="youtube"]:hover .social {
    filter: drop-shadow(0 0 5px rgba(255, 0, 0, 0.8)); }
  .footer .social-container[data-platform="tiktok"]:hover .social {
    filter: drop-shadow(0 0 5px rgba(255, 0, 80, 0.8)); }
  .footer .social-container[data-platform="discord"]:hover .social {
    filter: drop-shadow(0 0 5px rgba(114, 137, 218, 0.8)); }
  .footer .social-container[data-platform="whatsapp"]:hover .social {
    filter: drop-shadow(0 0 5px rgba(37, 211, 102, 0.8)); }
  .footer .social-container[data-platform="telegram"]:hover .social {
    filter: drop-shadow(0 0 5px rgba(0, 136, 204, 0.8)); }
  .footer .social-container[data-platform="snapchat"]:hover .social {
    filter: drop-shadow(0 0 5px rgba(255, 252, 0, 0.8)); }
  .footer .social-container:not([data-platform="facebook"]):not([data-platform="twitter"]):not([data-platform="instagram"]):not([data-platform="linkedin"]):not([data-platform="youtube"]):not([data-platform="tiktok"]):not([data-platform="discord"]):not([data-platform="whatsapp"]):not([data-platform="telegram"]):not([data-platform="snapchat"]):hover .social {
    filter: drop-shadow(0 0 5px rgba(146, 133, 255, 0.8)); }
  @media (max-width: 768px) {
    .footer .social-container {
      width: 32px;
      height: 32px;
      min-width: 32px;
      min-height: 32px; }
    .footer .social {
      background-size: 32px 32px;
      min-width: 32px;
      min-height: 32px; } }
  @media (max-width: 480px) {
    .footer .social-container {
      width: 30px;
      height: 30px;
      min-width: 30px;
      min-height: 30px; }
    .footer .social {
      background-size: 30px 30px;
      min-width: 30px;
      min-height: 30px; }
    .footer .footer-social-media {
      gap: 1rem; } }
  @media (max-width: 430px) and (-webkit-device-pixel-ratio: 3) {
    .footer .social-container {
      width: 34px;
      height: 34px;
      min-width: 34px;
      min-height: 34px; }
    .footer .social {
      background-size: 34px 34px;
      display: block !important;
      visibility: visible !important; }
    .footer .footer-social-media {
      gap: 1.2rem;
      min-height: 50px; } }
  .footer .social-container {
    animation: fadeInUp 0.6s ease-out forwards;
    opacity: 0;
    transform: translateY(20px); }
    .footer .social-container:nth-child(1) {
      animation-delay: 0.1s; }
    .footer .social-container:nth-child(2) {
      animation-delay: 0.2s; }
    .footer .social-container:nth-child(3) {
      animation-delay: 0.3s; }
    .footer .social-container:nth-child(4) {
      animation-delay: 0.4s; }
    .footer .social-container:nth-child(5) {
      animation-delay: 0.5s; }
    .footer .social-container:nth-child(6) {
      animation-delay: 0.6s; }
    .footer .social-container:nth-child(7) {
      animation-delay: 0.7s; }
    .footer .social-container:nth-child(8) {
      animation-delay: 0.8s; }
    .footer .social-container:nth-child(9) {
      animation-delay: 0.9s; }
    .footer .social-container:nth-child(10) {
      animation-delay: 1.0s; }
@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0); } }
  .footer .social:focus-visible {
    transform: scale(1.1);
    filter: drop-shadow(0 0 8px rgba(146, 133, 255, 0.9)); }
  @media (prefers-reduced-motion: reduce) {
    .footer .social-container,
    .footer .social,
    .footer .glow-element {
      animation: none;
      transition: none; } }
  @media (prefers-color-scheme: dark) {
    .footer .glow-element {
      opacity: 0.4; }
    .footer .social-container:hover .glow-element {
      opacity: 0.7; } }
  @media print {
    .footer .footer-social-media {
      display: none; } }

.button {
  color: #ffffff;
  height: 3rem;
  font-size: 1.125rem;
  font-weight: 500;
  padding: 0 2rem;
  justify-content: center;
  font-family: "Poppins", sans-serif;
  cursor: pointer;
  display: flex;
  align-items: center;
  border-style: none; }
  .button__primary {
    background-color: #f44857;
    box-sizing: border-box;
    text-decoration: none;
    border-radius: 2.5rem; }
    .button__primary:hover {
      background-color: #E53F4C; }
    .button__primary:active {
      transform: scale(0.95); }
    .button__primary--absolute {
      position: absolute;
      right: 0.375rem; }
    .button__primary--width100 {
      width: 100%; }
    .button__primary--widthfit {
      width: fit-content; }
  .button__secondary {
    /* box-sizing: border-box; */
    text-decoration: none;
    border-radius: 2.5rem;
    border-width: 0.125rem;
    color: #ffffff;
    /* Cambiado de border-style a border-width */
    border-style: solid;
    /* Agregado border-style */
    border-color: #ffffff; }
    .button__secondary:hover {
      background-color: #ffffff19; }
    .button__secondary--width100 {
      width: 100%; }
    .button__secondary--widthfit {
      width: fit-content; }
    .button__secondary--space {
      display: flex;
      gap: 0.5rem; }
  .button__WhatsApp {
    /* box-sizing: border-box; */
    text-decoration: none;
    border-radius: 2.5rem;
    border-width: 0.125rem;
    color: #009e5f;
    /* Cambiado de border-style a border-width */
    /* Agregado border-style */
    background: #ffffff; }
    .button__WhatsApp:hover {
      background-color: #009e5f;
      color: #ffffff;
      border-style: none; }
    .button__WhatsApp:active {
      transform: scale(0.95); }
    .button__WhatsApp--width100 {
      width: 100%; }
    .button__WhatsApp--widthfit {
      width: fit-content; }
    .button__WhatsApp--space {
      display: flex;
      gap: 0.5rem; }
    .button__WhatsApp--paddingLeft {
      display: flex;
      gap: 0.5rem; }
    .button__WhatsApp--paddingTop {
      margin-top: 0.75rem; }
  .button .logo-search {
    padding-right: 0.5rem;
    display: inline-block; }

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #000019;
  width: 100%;
  /* overflow: hidden; */
  overflow-x: hidden;
  /* overflow: hidden; */
  /* find de barra navegacion */
  /* GAPS RESPONSIVOS ADICIONALES */ }
  @media (max-width: 600px) {
    body {
      width: 100vw; } }
  body .gradient-1 {
    width: 50rem;
    position: absolute;
    top: 18.75rem;
    left: -3.125rem;
    z-index: -1; }
    @media (max-width: 37.5rem) {
      body .gradient-1 {
        width: 100%;
        top: 37.5rem; } }
  body .background-image-desktop {
    width: 100%;
    position: absolute;
    top: 0px;
    display: block;
    z-index: -2; }
    @media (max-width: 37.5rem) {
      body .background-image-desktop {
        display: none; } }
  body::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(215deg, rgba(0, 0, 25, 0.4) -11.32%, rgba(229, 63, 76, 0.4) 8.1%, rgba(229, 63, 76, 0.4) 24.16%, rgba(120, 104, 246, 0.4) 25.48%, rgba(0, 0, 25, 0.4) 43.51%);
    filter: blur(105px);
    z-index: -1; }
  body .background-image-mobile {
    display: none; }
    @media (max-width: 37.5rem) {
      body .background-image-mobile {
        /* display: block; */
        display: none;
        width: 100vw;
        position: absolute;
        top: 0px;
        z-index: -2; } }
  body .barranavegacion {
    width: min(1076px, calc(100vw - 2rem));
    max-width: calc(100vw - 2rem);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    height: 64px;
    position: fixed;
    z-index: 4;
    padding: 0 8px 0 24px;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 56px;
    transition: background 0.3s ease, box-shadow 0.3s ease; }
    @media (max-width: 1024px) {
      body .barranavegacion {
        width: calc(100vw - 3rem);
        padding: 0 1.5rem 0 2rem;
        height: 60px; } }
    @media (max-width: 768px) {
      body .barranavegacion {
        width: calc(100vw - 2rem);
        padding: 0 1rem;
        height: 56px;
        top: 1rem; } }
    @media (max-width: 480px) {
      body .barranavegacion {
        width: calc(100vw - 1rem);
        padding: 0 0.75rem;
        height: 52px;
        top: 0.75rem;
        border-radius: 26px; } }
    @media (max-width: 360px) {
      body .barranavegacion {
        width: calc(100vw - 0.5rem);
        padding: 0 0.5rem;
        height: 48px;
        top: 0.5rem;
        border-radius: 24px; } }
    body .barranavegacion .logo-barra {
      width: auto;
      display: inline-block;
      height: 28px; }
      @media (max-width: 768px) {
        body .barranavegacion .logo-barra {
          height: 26px; } }
      @media (max-width: 480px) {
        body .barranavegacion .logo-barra {
          height: 24px; } }
      @media (max-width: 360px) {
        body .barranavegacion .logo-barra {
          height: 22px; } }
    body .barranavegacion .menu {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 32px; }
      @media (max-width: 1024px) {
        body .barranavegacion .menu {
          gap: 24px; } }
      @media (max-width: 768px) {
        body .barranavegacion .menu {
          display: none; } }
      body .barranavegacion .menu .linksNavegacion {
        color: white;
        text-decoration: none;
        font-size: 14px;
        font-weight: 400;
        position: relative;
        padding-bottom: 3px;
        transition: all 0.3s ease; }
        @media (max-width: 1024px) {
          body .barranavegacion .menu .linksNavegacion {
            font-size: 13px; } }
        body .barranavegacion .menu .linksNavegacion:after {
          content: '';
          position: absolute;
          width: 0;
          height: 2px;
          bottom: 0;
          left: 0;
          background: linear-gradient(270deg, #e5204f 37.13%, #fffacd 100%);
          transition: width 0.3s ease;
          border-radius: 2px; }
        body .barranavegacion .menu .linksNavegacion:hover {
          color: #fffacd; }
          body .barranavegacion .menu .linksNavegacion:hover:after {
            width: 100%; }
        body .barranavegacion .menu .linksNavegacion.active {
          color: #fffacd;
          font-weight: 500; }
          body .barranavegacion .menu .linksNavegacion.active:after {
            width: 100%;
            background: linear-gradient(270deg, #e5204f 37.13%, #fffacd 100%);
            height: 3px;
            animation: activeGlow 2s ease-in-out infinite alternate; }
          body .barranavegacion .menu .linksNavegacion.active:hover {
            color: #ffffff; }
            body .barranavegacion .menu .linksNavegacion.active:hover:after {
              height: 3px;
              background: linear-gradient(270deg, #fffacd 0%, #e5204f 100%); }
      body .barranavegacion .menu hr {
        border-style: none;
        height: 1.5rem;
        width: 1px;
        opacity: 50%;
        border-radius: 2px; }
        @media (max-width: 1024px) {
          body .barranavegacion .menu hr {
            height: 1.25rem; } }
      body .barranavegacion .menu .botones-usuario {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.75rem; }
        body .barranavegacion .menu .botones-usuario .boton-iniciarSesion {
          display: flex;
          align-items: center;
          justify-content: center;
          height: 48px;
          background-color: #f44857;
          color: #ffffff;
          border-radius: 28px;
          padding: 0 32px;
          font-size: 20px;
          text-decoration: none; }
          @media (max-width: 1024px) {
            body .barranavegacion .menu .botones-usuario .boton-iniciarSesion {
              height: 44px;
              padding: 0 24px;
              font-size: 18px;
              border-radius: 22px; } }
        body .barranavegacion .menu .botones-usuario .boton-registrarme {
          display: flex;
          align-items: center;
          justify-content: center;
          height: 3rem;
          background-color: #f44857;
          color: #ffffff;
          border-radius: 1.75rem;
          padding: 0 2rem;
          font-size: 1.25rem;
          font-family: "Poppins", sans-serif;
          text-decoration: none; }
          @media (max-width: 1024px) {
            body .barranavegacion .menu .botones-usuario .boton-registrarme {
              height: 2.75rem;
              padding: 0 1.5rem;
              font-size: 1.125rem;
              border-radius: 1.375rem; } }
  body .barranavegacion--mobile {
    justify-content: center !important;
    padding: 0 1rem !important; }
    body .barranavegacion--mobile .logo-container {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      text-decoration: none; }
    body .barranavegacion--mobile .logo-barra {
      height: 24px !important; }
      @media (max-width: 360px) {
        body .barranavegacion--mobile .logo-barra {
          height: 22px !important; } }
  body .barranavegacion--desktop {
    justify-content: space-between; }
    body .barranavegacion--desktop .logo-container {
      display: flex;
      align-items: center;
      text-decoration: none; }
    body .barranavegacion--desktop .menu {
      display: flex; }
      @media (max-width: 768px) {
        body .barranavegacion--desktop .menu {
          display: none !important; } }
  body .barranavegacion--mobile-menu {
    justify-content: space-between;
    padding: 0 1rem; }
    body .barranavegacion--mobile-menu .hamburger-btn {
      background: none;
      border: none;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      width: 24px;
      height: 24px; }
      body .barranavegacion--mobile-menu .hamburger-btn span {
        width: 100%;
        height: 2px;
        background: white;
        border-radius: 1px;
        transition: all 0.3s ease; }
      body .barranavegacion--mobile-menu .hamburger-btn:hover span {
        background: #fffacd; }
    body .barranavegacion--mobile-menu .mobile-menu {
      position: fixed;
      top: 80px;
      left: 50%;
      transform: translateX(-50%);
      width: calc(100vw - 2rem);
      max-width: 400px;
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(20px);
      border-radius: 12px;
      padding: 1rem;
      display: none;
      flex-direction: column;
      gap: 1rem;
      z-index: 5; }
      body .barranavegacion--mobile-menu .mobile-menu--open {
        display: flex; }
      body .barranavegacion--mobile-menu .mobile-menu .mobile-link {
        color: white;
        text-decoration: none;
        padding: 0.75rem 1rem;
        border-radius: 8px;
        transition: background 0.3s ease;
        text-align: center; }
        body .barranavegacion--mobile-menu .mobile-menu .mobile-link:hover {
          background: rgba(255, 255, 255, 0.1); }
        body .barranavegacion--mobile-menu .mobile-menu .mobile-link.active {
          background: rgba(229, 32, 79, 0.3);
          color: #fffacd; }
      body .barranavegacion--mobile-menu .mobile-menu .mobile-button {
        margin-top: 0.5rem;
        text-align: center;
        padding: 0.75rem 1rem;
        border-radius: 8px; }
  body #navbar-container {
    width: 100%;
    overflow-x: hidden;
    position: relative; }
  body .barranavegacion {
    z-index: 1000 !important; }
    body .barranavegacion--mobile {
      z-index: 1001 !important; }
@keyframes activeGlow {
  0% {
    box-shadow: 0 0 5px rgba(229, 32, 79, 0.3); }
  100% {
    box-shadow: 0 0 10px rgba(255, 250, 205, 0.4); } }
  body .logo-container {
    display: flex;
    align-items: center;
    text-decoration: none; }
    body .logo-container:hover {
      transform: scale(1.05);
      transition: transform 0.2s ease; }
  body .barranavegacion {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none; }
  body .linksNavegacion:focus,
  body .boton-iniciarSesion:focus,
  body .boton-registrarme:focus {
    outline: 2px solid rgba(255, 250, 205, 0.6);
    outline-offset: 2px; }
  body body {
    overflow-x: hidden; }
  body .main-container {
    max-width: 100vw;
    overflow-x: hidden; }
  @media (min-width: 1400px) {
    body .barranavegacion {
      width: 1076px; } }
  body main {
    display: flex;
    max-width: min(1076px, calc(100vw - 2rem));
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin: 0 auto;
    /* FIN DE CARDS tecnologias */
    /* .learn {
      margin-top: 144px;
      display: grid;
      max-width: 100%;
      grid-template-columns: 1fr 1fr;
      justify-items: start;
      align-items: center;
      @media (max-width: 600px) {
        width: 100vw;
        grid-template-columns: 1fr;
        grid-row: 1fr 1fr;
        justify-items: center;
        overflow-x: hidden;

        
      }


      .apps {
        max-width: 100%;
        height: auto;

        @media (max-width: 600px) {
          grid-row: 1;
          max-width: 100%;

          
        }
      }

      .heading__learn {
        max-width: 100%;
        display: grid;
        justify-items: start;
        @media (max-width: 600px) {
          grid-row: 2;
          margin-top: 32px;

          
        }
      }
    } */ }
    @media (max-width: 600px) {
      body main {
        max-width: 100vw;
        padding: 0 16px; } }
    body main .why {
      max-width: 100%;
      /* display: flex;
                flex-direction: column; */
      /* justify-content: center; */
      /* align-items: center; */
      display: grid;
      justify-items: center;
      align-items: stretch;
      padding: 4.5rem;
      margin-top: 9rem;
      background: rgba(255, 255, 255, 0.08);
      backdrop-filter: blur(8px);
      border-radius: 32px;
      box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1); }
      body main .why p {
        margin-top: 2rem; }
      @media (max-width: 600px) {
        body main .why {
          padding: 4.5rem 1rem;
          align-items: stretch;
          width: 100vw;
          /* width: 1076px; */ } }
      body main .why .informacionContainer {
        max-width: 100%;
        margin-top: 2rem;
        display: grid;
        grid-template-columns: 1fr 1px 1fr 1px 1fr;
        gap: 20px;
        justify-items: center;
        align-items: center; }
        @media (max-width: 600px) {
          body main .why .informacionContainer {
            width: 100%;
            grid-template-columns: 1fr;
            grid-template-rows: auto auto auto;
            gap: 12px; } }
        body main .why .informacionContainer div .gradient {
          background: linear-gradient(270deg, #e5204f 37.13%, #fffacd 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-clip: text;
          text-fill-color: transparent;
          font-size: 3rem;
          font-family: "Poppins", sans-serif;
          text-align: center;
          margin-bottom: 0.5rem; }
          @media (max-width: 600px) {
            body main .why .informacionContainer div .gradient {
              font-size: 2rem; } }
        body main .why .informacionContainer div {
          display: flex;
          flex-direction: column;
          align-items: center;
          width: 100%; }
        body main .why .informacionContainer div > label {
          text-align: center;
          color: #ffffff;
          font-family: "Poppins", sans-serif; }
        body main .why .informacionContainer .paragraph {
          margin: 0;
          text-align: center;
          width: 100%; }
        body main .why .informacionContainer .hr-info {
          border-style: none;
          height: 8.25rem;
          width: 1px;
          background-color: rgba(255, 255, 255, 0.16);
          border-radius: 2px;
          margin: 0; }
          @media (max-width: 600px) {
            body main .why .informacionContainer .hr-info {
              height: 1px;
              width: 80%;
              margin: 10px auto; } }
    body main .tech-container {
      max-width: min(1076px, calc(100vw - 2rem));
      width: 100%;
      margin: 120px auto;
      color: #ffffff;
      font-family: 'Arial', sans-serif; }
      body main .tech-container .tech-grid {
        margin-top: 44px;
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-gap: 24px;
        width: 100%; }
      body main .tech-container .tech-card {
        text-align: center;
        display: flex;
        align-items: center;
        height: 260px;
        border-radius: 44px;
        padding: 20px;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        background-size: cover;
        background-position: center;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
        transition: width 0.3s ease, transform 0.3s ease, opacity 0.3s ease;
        overflow: hidden;
        margin: 0 auto;
        will-change: width, transform, opacity; }
        body main .tech-container .tech-card .card-overlay {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: rgba(0, 0, 0, 0.5);
          z-index: 1;
          transition: background 0.3s ease; }
        body main .tech-container .tech-card .card-content {
          position: relative;
          z-index: 2;
          width: 100%;
          text-align: center;
          transform: translateY(0);
          transition: transform 0.3s ease; }
          body main .tech-container .tech-card .card-content h3 {
            color: #ffffff;
            font-weight: bold;
            font-size: 32px;
            font-weight: 500;
            margin: 0;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
            transition: font-size 0.3s ease; }
        body main .tech-container .tech-card:hover {
          transform: translateY(-5px);
          box-shadow: 0 8px 25px rgba(0, 0, 0, 0.7); }
          body main .tech-container .tech-card:hover .card-overlay {
            background: rgba(0, 0, 0, 0.4); }
          body main .tech-container .tech-card:hover .card-content {
            transform: translateY(-5px); }
        body main .tech-container .tech-card.card-innovation {
          grid-column: 1 / span 12;
          width: 30%;
          /* background: linear-gradient(to right, #ff416c, #ff4b2b); */
          background-image: url("./image/innovacion.png"); }
        body main .tech-container .tech-card.card-machine-learning {
          grid-column: 1 / span 3;
          width: 20%;
          /* background: linear-gradient(to right, #4e54c8, #8f94fb); */
          background-image: url("./image/machine.png"); }
        body main .tech-container .tech-card.card-ai {
          grid-column: 4 / span 9;
          width: 40%;
          /*  background: linear-gradient(to right, #232526, #414345); */
          background-image: url("./image/ciborg.png"); }
        body main .tech-container .tech-card.card-cybersecurity {
          grid-column: 1 / span 4;
          width: 10%;
          background-size: cover;
          background-position: center;
          background-image: url("./image/cyberseguridad.png"); }
        body main .tech-container .tech-card.card-cloud {
          grid-column: 5 / span 4;
          width: 10%;
          background-size: cover;
          background-position: center;
          /* background: linear-gradient(to right, #5614b0, #dbd65c); */
          background-image: url("./image/cloudComputing.png"); }
        body main .tech-container .tech-card.card-blockchain {
          grid-column: 9 / span 4;
          width: 10%;
          /* background: linear-gradient(to right, #c31432, #240b36); */
          background-image: url("./image/blockchain.png"); }
    @media (max-width: 1024px) {
      body main .tech-container {
        padding: 32px 16px 20px; }
        body main .tech-container .h1__page {
          font-size: 28px;
          margin-bottom: 16px; }
        body main .tech-container .tech-grid {
          grid-gap: 16px; }
        body main .tech-container .tech-card {
          height: 220px;
          padding: 16px;
          width: 85% !important; }
          body main .tech-container .tech-card .card-content h3 {
            font-size: 16px; }
          body main .tech-container .tech-card:hover, body main .tech-container .tech-card:active {
            transform: scale(1.05);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
            width: 95% !important; }
            body main .tech-container .tech-card:hover .card-overlay, body main .tech-container .tech-card:active .card-overlay {
              background: rgba(0, 0, 0, 0.3); }
            body main .tech-container .tech-card:hover .card-content h3, body main .tech-container .tech-card:active .card-content h3 {
              font-size: 18px; } }
    @media (max-width: 767px) {
      body main .tech-container .tech-grid {
        grid-template-columns: repeat(6, 1fr); }
        body main .tech-container .tech-grid .tech-card {
          opacity: 0.9;
          transform: translateY(10px); }
          body main .tech-container .tech-grid .tech-card.card-innovation {
            grid-column: 1 / span 6; }
          body main .tech-container .tech-grid .tech-card.card-machine-learning {
            grid-column: 1 / span 3;
            width: 85%; }
          body main .tech-container .tech-grid .tech-card.card-ai {
            grid-column: 4 / span 3;
            width: 85%; }
          body main .tech-container .tech-grid .tech-card.card-cybersecurity {
            grid-column: 1 / span 3; }
          body main .tech-container .tech-grid .tech-card.card-cloud {
            grid-column: 4 / span 3; }
          body main .tech-container .tech-grid .tech-card.card-blockchain {
            grid-column: 1 / span 6;
            margin-top: 16px; }
          body main .tech-container .tech-grid .tech-card:hover, body main .tech-container .tech-grid .tech-card:active {
            opacity: 1;
            transform: translateY(0);
            width: 95% !important; }
      body main .card-in-view {
        opacity: 1 !important;
        transform: translateY(0) !important; } }
    @media (max-width: 600px) {
      body main .tech-container {
        width: 100%;
        padding: 12px 12px; }
        body main .tech-container .h1__page {
          font-size: 24px;
          margin-bottom: 12px; }
        body main .tech-container .tech-grid {
          grid-template-columns: 1fr;
          grid-gap: 12px; }
          body main .tech-container .tech-grid .tech-card {
            width: 100% !important;
            height: 200px;
            padding: 12px;
            grid-column: 1 / span 1 !important;
            width: 75% !important;
            opacity: 1;
            transform: translateY(15px);
            transition: all 0.4s ease; }
            body main .tech-container .tech-grid .tech-card .card-content h3 {
              font-size: 16px; }
            body main .tech-container .tech-grid .tech-card.card-innovation, body main .tech-container .tech-grid .tech-card.card-machine-learning, body main .tech-container .tech-grid .tech-card.card-ai, body main .tech-container .tech-grid .tech-card.card-cybersecurity, body main .tech-container .tech-grid .tech-card.card-cloud, body main .tech-container .tech-grid .tech-card.card-blockchain {
              margin-top: 0; }
            body main .tech-container .tech-grid .tech-card:active {
              width: 100% !important;
              opacity: 1;
              transform: translateY(0); } }
    body main .data {
      margin-top: 144px;
      margin-bottom: 144px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      max-width: 1076px;
      align-self: center;
      align-items: center;
      height: fit-content;
      grid-auto-flow: dense;
      gap: 4rem;
      scroll-margin-top: 90px; }
      body main .data .data_button {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center; }
        body main .data .data_button .button-loading {
          display: none;
          opacity: 0;
          visibility: hidden;
          transition: opacity 0.2s ease; }
          body main .data .data_button .button-loading.show {
            display: inline-block;
            opacity: 1;
            visibility: visible; }
        body main .data .data_button .button-icon {
          display: inline-block;
          opacity: 1;
          visibility: visible;
          transition: opacity 0.2s ease; }
          body main .data .data_button .button-icon.hide {
            display: none;
            opacity: 0;
            visibility: hidden; }
        body main .data .data_button.loading .button-loading {
          display: inline-block;
          opacity: 1;
          visibility: visible; }
        body main .data .data_button.loading .button-icon {
          display: none;
          opacity: 0;
          visibility: hidden; }
        body main .data .data_button:disabled {
          cursor: not-allowed;
          opacity: 0.6; }
@keyframes spin {
  from {
    transform: rotate(0deg); }
  to {
    transform: rotate(360deg); } }
      @media (max-width: 600px) {
        body main .data {
          width: 100%;
          grid-template-columns: 1fr;
          grid-row: 1fr 1fr;
          gap: 2rem;
          /* width: 1076px; */ } }
      body main .data .degradadoAtrasMap {
        position: relative;
        display: inline-block;
        padding: 24px;
        background: rgba(255, 255, 255, 0.03);
        backdrop-filter: blur(10px);
        border-radius: 36px; }
        body main .data .degradadoAtrasMap::before {
          content: '';
          position: absolute;
          width: 900px;
          height: 900px;
          top: -20%;
          left: -30%;
          background: radial-gradient(circle, rgba(142, 107, 255, 0.8) 0%, rgba(130, 102, 255, 0.6) 40%, transparent 80%);
          z-index: -1;
          filter: blur(420px); }
        body main .data .degradadoAtrasMap .map-image {
          width: 100%;
          position: relative;
          z-index: 1;
          display: block;
          border-radius: 20px; }
      body main .data .father-right {
        display: grid;
        justify-items: start; }
        body main .data .father-right .tabs-container {
          width: 100%;
          margin-bottom: 8px; }
          body main .data .father-right .tabs-container .tabs-nav {
            display: flex;
            gap: 8px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 50px;
            padding: 4px;
            width: fit-content; }
            body main .data .father-right .tabs-container .tabs-nav .tab-button {
              background: transparent;
              border: none;
              padding: 16px 32px;
              border-radius: 50px;
              color: rgba(255, 255, 255, 0.7);
              font-weight: 500;
              font-size: 14px;
              cursor: pointer;
              transition: all 0.3s ease;
              white-space: nowrap;
              display: flex;
              align-items: center;
              justify-content: center;
              position: relative; }
              body main .data .father-right .tabs-container .tabs-nav .tab-button::before {
                content: '';
                position: absolute;
                top: -2px;
                left: -2px;
                right: -2px;
                bottom: -2px;
                cursor: pointer; }
              body main .data .father-right .tabs-container .tabs-nav .tab-button:hover {
                color: rgba(255, 255, 255, 0.9);
                background: rgba(255, 255, 255, 0.05); }
              body main .data .father-right .tabs-container .tabs-nav .tab-button.active {
                background: #ffffff;
                color: #1a1a2e;
                font-weight: 600; }
              body main .data .father-right .tabs-container .tabs-nav .tab-button span {
                pointer-events: none;
                user-select: none; }
        body main .data .father-right .tab-content {
          display: none;
          width: 100%;
          animation: fadeIn 0.2s ease; }
          body main .data .father-right .tab-content.active {
            display: block; }
        body main .data .father-right .verification-message {
          width: 100%;
          margin-bottom: 2px;
          padding: 6px 10px;
          border-radius: 8px;
          animation: slideDown 0.3s ease; }
          body main .data .father-right .verification-message.msg-success {
            background: rgba(34, 197, 94, 0.1);
            border: 1px solid rgba(34, 197, 94, 0.3); }
            body main .data .father-right .verification-message.msg-success .message-icon {
              color: #22c55e; }
              body main .data .father-right .verification-message.msg-success .message-icon::before {
                content: "\f00c";
                font-family: "Font Awesome 6 Free";
                font-weight: 900; }
            body main .data .father-right .verification-message.msg-success .message-text {
              color: #22c55e; }
          body main .data .father-right .verification-message.msg-error {
            background: rgba(239, 68, 68, 0.1);
            border: 1px solid rgba(239, 68, 68, 0.3); }
            body main .data .father-right .verification-message.msg-error .message-icon {
              color: #ef4444; }
              body main .data .father-right .verification-message.msg-error .message-icon::before {
                content: "\f00d";
                font-family: "Font Awesome 6 Free";
                font-weight: 900; }
            body main .data .father-right .verification-message.msg-error .message-text {
              color: #ef4444; }
          body main .data .father-right .verification-message.msg-info {
            background: rgba(59, 130, 246, 0.1);
            border: 1px solid rgba(59, 130, 246, 0.3); }
            body main .data .father-right .verification-message.msg-info .message-icon {
              color: #3b82f6; }
              body main .data .father-right .verification-message.msg-info .message-icon::before {
                content: "\f05a";
                font-family: "Font Awesome 6 Free";
                font-weight: 900; }
            body main .data .father-right .verification-message.msg-info .message-text {
              color: #3b82f6; }
          body main .data .father-right .verification-message .message-content {
            display: flex;
            align-items: center;
            gap: 6px;
            margin: 0;
            padding: 0; }
            body main .data .father-right .verification-message .message-content .message-icon {
              font-size: 14px;
              flex-shrink: 0; }
            body main .data .father-right .verification-message .message-content .message-text {
              font-weight: 500;
              font-size: 12px;
              line-height: 1.2;
              margin: 0;
              padding: 0; }
        body main .data .father-right .verification-input-full {
          grid-column: 1 / -1; }
        body main .data .father-right .container-input {
          display: flex;
          flex-direction: column;
          margin-top: 24px;
          width: 100%; }
          .tab-content.active body main .data .father-right .container-input {
            margin-top: 8px; }
          .verification-message:not([style*="block"]) + body main .data .father-right .container-input {
            margin-top: 16px; }
        body main .data .father-right .input__2 {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 1rem;
          margin-bottom: 0.5rem;
          /* .username-nombres {
            gap: 1rem;
          } */ }
          @media (max-width: 600px) {
            body main .data .father-right .input__2 {
              grid-template-columns: 1fr; } }
          body main .data .father-right .input__2:has(.verification-input-full) {
            grid-template-columns: 1fr; }
        body main .data .father-right #messageContainer {
          background: none; }
          body main .data .father-right #messageContainer #spinner {
            width: 200px;
            height: 60px;
            position: relative;
            z-index: 1; }
          body main .data .father-right #messageContainer .circle,
          body main .data .father-right #messageContainer .shadow {
            width: 20px;
            height: 20px;
            position: absolute;
            border-radius: 50%;
            transform-origin: 50%;
            animation: circle7124 0.5s alternate infinite ease; }
            body main .data .father-right #messageContainer .circle:nth-child(2),
            body main .data .father-right #messageContainer .shadow:nth-child(2) {
              left: 45%;
              animation-delay: 0.2s; }
            body main .data .father-right #messageContainer .circle:nth-child(3),
            body main .data .father-right #messageContainer .shadow:nth-child(3) {
              right: 15%;
              left: auto;
              animation-delay: 0.3s; }
          body main .data .father-right #messageContainer .circle {
            background-color: #fff;
            left: 15%; }
@keyframes circle7124 {
  0% {
    top: 60px;
    height: 5px;
    border-radius: 50px 50px 25px 25px;
    transform: scaleX(1.7); }
  40% {
    height: 20px;
    border-radius: 50%;
    transform: scaleX(1); }
  100% {
    top: 0%; } }
          body main .data .father-right #messageContainer .shadow {
            height: 4px;
            background-color: rgba(0, 0, 0, 0.9);
            top: 62px;
            z-index: -1;
            left: 15%;
            filter: blur(1px);
            animation: shadow046 0.5s alternate infinite ease; }
            body main .data .father-right #messageContainer .shadow:nth-child(4) {
              left: 45%;
              animation-delay: 0.2s; }
            body main .data .father-right #messageContainer .shadow:nth-child(5) {
              right: 15%;
              left: auto;
              animation-delay: 0.3s; }
@keyframes shadow046 {
  0% {
    transform: scaleX(1.5); }
  40% {
    transform: scaleX(1);
    opacity: 0.7; }
  100% {
    transform: scaleX(0.2);
    opacity: 0.4; } }
        body main .data .father-right .data_button {
          margin-top: 32px;
          background-color: #f44857;
          color: #ffffff;
          height: 3rem;
          border-radius: 2.5rem;
          box-sizing: border-box;
          text-decoration: none;
          max-width: fit-content;
          font-size: 1.125rem;
          font-weight: 700;
          padding: 0 2rem;
          justify-content: center;
          font-family: "Poppins", sans-serif;
          display: inline-flex;
          align-items: center;
          border-style: none;
          gap: 6px;
          cursor: pointer;
          transition: all 0.3s ease; }
          body main .data .father-right .data_button:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2); }
          body main .data .father-right .data_button:disabled {
            cursor: not-allowed;
            opacity: 0.6;
            transform: none; }
          body main .data .father-right .data_button .button-loading {
            display: none;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.2s ease;
            max-width: 20px;
            max-height: 20px;
            width: 20px;
            height: 20px;
            display: flex;
            align-items: center;
            justify-content: center; }
            body main .data .father-right .data_button .button-loading.show {
              display: flex;
              opacity: 1;
              visibility: visible; }
            body main .data .father-right .data_button .button-loading i {
              font-size: 14px;
              line-height: 1; }
          body main .data .father-right .data_button .button-icon {
            display: inline-flex;
            opacity: 1;
            visibility: visible;
            transition: opacity 0.2s ease;
            align-items: center; }
            body main .data .father-right .data_button .button-icon.hide {
              display: none;
              opacity: 0;
              visibility: hidden; }
          body main .data .father-right .data_button.loading .button-loading {
            display: flex;
            opacity: 1;
            visibility: visible; }
          body main .data .father-right .data_button.loading .button-icon {
            display: none;
            opacity: 0;
            visibility: hidden; }
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px); }
  to {
    opacity: 1;
    transform: translateY(0); } }
@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px); }
  to {
    opacity: 1;
    transform: translateY(0); } }
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px); }
  to {
    opacity: 1;
    transform: translateY(0); } }
@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px); }
  to {
    opacity: 1;
    transform: translateY(0); } }
      body main .data .father-right > .data_button {
        margin-top: 32px;
        /* right: $xs; */
        background-color: #f44857;
        color: #ffffff;
        height: 3rem;
        border-radius: 2.5rem;
        box-sizing: border-box;
        text-decoration: none;
        max-width: fit-content;
        font-size: 1.125rem;
        font-weight: 700;
        padding: 0 2rem;
        justify-content: center;
        font-family: "Poppins", sans-serif;
        display: flex;
        align-items: center;
        border-style: none; }
        body main .data .father-right > .data_button .logo-search {
          padding-right: 0.5rem;
          display: inline-block; }
    body main .hero_image {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      /* margin-top: 8rem; */
      gap: 0px;
      /* efecto en texto */
      /* fin efecto texto */ }
      body main .hero_image .botonesPrincipales {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 16px;
        /* margin-top: 32px; */ }
        body main .hero_image .botonesPrincipales .first-data-mobile {
          display: none; }
          @media (max-width: 600px) {
            body main .hero_image .botonesPrincipales .first-data-mobile {
              display: contents;
              display: flex;
              flex-direction: column;
              width: 100%; } }
        body main .hero_image .botonesPrincipales .registroYbotonesDesktop {
          display: flex;
          flex-direction: column;
          gap: 32px; }
          @media (max-width: 37.5rem) {
            body main .hero_image .botonesPrincipales .registroYbotonesDesktop {
              display: none; } }
          body main .hero_image .botonesPrincipales .registroYbotonesDesktop .first-data {
            position: relative;
            width: 38.75rem;
            display: flex;
            justify-content: center;
            align-items: center;
            padding-top: 2rem; }
            body main .hero_image .botonesPrincipales .registroYbotonesDesktop .first-data__placeholder {
              position: absolute;
              /* top: 0; */
              font-size: 1rem;
              /* padding-left: 16px; */
              padding-left: 1.5rem;
              border-style: solid;
              border-color: #ffffff80;
              border-width: 1px;
              outline: none;
              width: 100%;
              height: 4rem;
              color: #ffffff;
              outline: none;
              background-color: #ffffff17;
              border-radius: 2rem; }
              body main .hero_image .botonesPrincipales .registroYbotonesDesktop .first-data__placeholder:hover {
                border-style: solid;
                border-color: #d2e9ff;
                border-width: 1px; }
              body main .hero_image .botonesPrincipales .registroYbotonesDesktop .first-data__placeholder:focus {
                /* border-style: solid;
                border-color: #2997ff;
                border-width: 1px; */
                border: 0.0625rem solid #2997ff;
                outline: 0.25rem solid #2997ff27; }
      body main .hero_image .heroFechaUbication {
        margin-top: 24px;
        display: flex;
        height: 48px;
        padding: 6px 28px;
        align-items: center;
        gap: 16px;
        border-radius: 32px;
        border: 1px solid #FFF;
        background: rgba(255, 255, 255, 0.08);
        width: fit-content; }
        body main .hero_image .heroFechaUbication span {
          color: #FFF; }
      body main .hero_image .display.display__desktop.heroAncho {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        margin-top: 24px; }
      body main .hero_image .typing-container {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 1.2em;
        margin-top: 0px; }
      body main .hero_image #changing-word {
        color: linear-gradient(270deg, #e5204f 37.13%, #fffacd 100%);
        /* Ajusta según tu paleta de colores */
        font-weight: bold; }
      body main .hero_image .gradient-text {
        background: linear-gradient(270deg, #9285FF 20%, #fffacd 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        font-weight: bold; }
      body main .hero_image .cursor {
        display: inline-block;
        width: 3px;
        height: 1em;
        background-color: #9285FF;
        /* Mismo color que el texto */
        margin-left: 2px;
        animation: blink 1s infinite; }
@keyframes blink {
  0% {
    opacity: 1; }
  50% {
    opacity: 0; }
  100% {
    opacity: 1; } }
      body main .hero_image h1 .changing-word {
        display: inline-block;
        transition: opacity 0.5s ease; }
      body main .hero_image .heroAncho {
        max-width: 80%; }
      @media (max-width: 600px) {
        body main .hero_image {
          width: 100%;
          margin-top: 8rem; } }
      body main .hero_image .ubication {
        color: #ffffff;
        font-size: 24px;
        text-decoration: none;
        gap: 8px;
        display: flex;
        /* flex-direction: column; */
        justify-content: center;
        align-items: center;
        margin-bottom: 1rem; }
      body main .hero_image .card {
        width: 12.5rem;
        height: 16.875rem;
        border-radius: 0.625rem;
        overflow: hidden;
        box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
        text-align: center;
        font-family: Arial, sans-serif; }
  body .avatarImageCards {
    margin-top: 4.5rem;
    display: flex;
    gap: 2rem;
    overflow-x: hidden;
    overflow-y: hidden;
    position: relative;
    height: auto;
    white-space: nowrap;
    width: 100vw;
    cursor: grab; }
    @media (max-width: 37.5rem) {
      body .avatarImageCards {
        width: 100vw;
        gap: 1.25rem; } }
    body .avatarImageCards.grabbing {
      cursor: grabbing; }
    body .avatarImageCards .cardsWrapper {
      display: flex;
      animation: scroll 20s linear infinite;
      margin-left: -10px; }
    body .avatarImageCards .cardAvatarHero {
      min-width: 12.5rem;
      height: 16.875rem;
      border-radius: 1.5rem;
      overflow: hidden;
      text-align: center;
      font-family: Poppins, sans-serif;
      display: flex;
      flex-direction: column;
      position: relative;
      animation: slide 10s linear infinite; }
      @media (max-width: 600px) {
        body .avatarImageCards .cardAvatarHero {
          min-width: 10.1875rem;
          height: 13.75rem; } }
      body .avatarImageCards .cardAvatarHero .avatar-imgHero {
        width: 100%;
        height: 100%;
        object-fit: cover; }
      body .avatarImageCards .cardAvatarHero .infoCardHero {
        padding: 1rem;
        bottom: 0px;
        position: absolute;
        width: 100%;
        gap: 0px;
        height: fit-content;
        z-index: 1; }
        @media (max-width: 37.5rem) {
          body .avatarImageCards .cardAvatarHero .infoCardHero {
            bottom: 0px;
            padding: 12px; } }
        body .avatarImageCards .cardAvatarHero .infoCardHero .nameCardHero {
          text-align: left;
          font-size: 1.125rem;
          font-weight: 500;
          color: white;
          margin: 0px; }
          @media (max-width: 37.5rem) {
            body .avatarImageCards .cardAvatarHero .infoCardHero .nameCardHero {
              font-size: 0.875rem; } }
        body .avatarImageCards .cardAvatarHero .infoCardHero .job {
          text-align: left;
          font-size: 0.875rem;
          color: rgba(255, 255, 255, 0.7);
          height: fit-content;
          margin: 0px;
          line-height: 120%; }
          @media (max-width: 37.5rem) {
            body .avatarImageCards .cardAvatarHero .infoCardHero .job {
              font-size: 0.75rem; } }
        body .avatarImageCards .cardAvatarHero .infoCardHero::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75));
          z-index: -1; }
    body .avatarImageCards:hover .cardAvatar {
      animation-play-state: paused; }
    body .avatarImageCards .cardAvatar:hover {
      transform: scale(1.05); }
@keyframes slide {
  from {
    transform: translateX(100%); }
  to {
    transform: translateX(-100%); } }
  body .hrcontainer {
    width: min(1076px, calc(100vw - 2rem));
    margin: 0 auto; }
    @media (max-width: 37.5rem) {
      body .hrcontainer {
        width: 100%;
        font-size: 0.75rem; } }
    body .hrcontainer .hr-footer {
      display: flex;
      width: 100%;
      justify-content: center;
      align-items: center;
      border: none;
      border-top: 1px solid #ffffff20;
      /* Establece el grosor y el color de la línea */ }
      @media (max-width: 600px) {
        body .hrcontainer .hr-footer {
          max-width: 100%;
          padding: 16px 16px; } }
  @media (max-width: 768px) {
    body .footer {
      gap: 1.5rem; }
      body .footer .logo-footer {
        margin-bottom: 0.75rem; }
      body .footer .footer-social-media {
        gap: 1rem;
        margin-bottom: 0.75rem; } }
  @media (max-width: 480px) {
    body .footer {
      gap: 1rem; }
      body .footer .logo-footer {
        margin-bottom: 0.5rem; }
      body .footer .footer-social-media {
        gap: 0.75rem;
        margin-bottom: 0.5rem; } }

.background-footer-wrapper {
  width: 100%;
  height: auto;
  overflow: visible;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  position: relative;
  min-height: 300px; }
  .background-footer-wrapper::before {
    content: '';
    position: absolute;
    width: 1000px;
    height: 1000px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(142, 107, 255, 0.8) 0%, rgba(130, 102, 255, 0.6) 40%, transparent 80%);
    z-index: -1;
    filter: blur(500px);
    pointer-events: none; }
  .background-footer-wrapper img {
    width: 100%;
    max-width: 100vw;
    height: auto;
    object-fit: cover;
    display: block;
    box-sizing: border-box;
    position: relative;
    z-index: 1; }
    .background-footer-wrapper img .background-footer {
      position: absolute;
      bottom: 0%; }
    @media (max-width: 768px) {
      .background-footer-wrapper img {
        object-fit: cover;
        object-position: center; } }
    @media (max-width: 480px) {
      .background-footer-wrapper img {
        width: 100%;
        height: auto; } }
    @media (max-width: 320px) {
      .background-footer-wrapper img {
        max-width: 100vw; } }
  @media (max-width: 1024px) {
    .background-footer-wrapper {
      padding: 80px 0; } }
  @media (max-width: 768px) {
    .background-footer-wrapper {
      padding: 60px 0; } }
  @media (max-width: 480px) {
    .background-footer-wrapper {
      padding: 40px 0; } }
  @media (max-width: 1024px) {
    .background-footer-wrapper::before {
      width: 800px;
      height: 800px;
      filter: blur(400px); } }
  @media (max-width: 768px) {
    .background-footer-wrapper::before {
      width: 600px;
      height: 600px;
      filter: blur(300px); } }
  @media (max-width: 480px) {
    .background-footer-wrapper::before {
      width: 400px;
      height: 400px;
      filter: blur(200px); } }

/*
.background-footer-wrapper {
  &::before {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}
*/
/*
.background-footer-wrapper {
  &::before {
    bottom: -50%;
    right: -50%;
    transform: none;
  }
}
*/
/*
.background-footer-wrapper {
  &::before {
    top: -50%;
    left: -50%;
    transform: none;
  }
}
*/
/*
.background-footer-wrapper {
  &::before {
    bottom: -25%;
    left: 50%;
    transform: translateX(-50%);
  }
}
*/
/*
.background-footer-wrapper {
  min-height: 200px; // En lugar de padding
  overflow: visible;
  
  &::before {
    // El pseudo-elemento se posiciona fuera del contenedor
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}
*/

/*# sourceMappingURL=styles.css.map */