/*=== MEDIA QUERY ===*/

/**
 * SITIO WEB: https://undergames.net
 * EDITOR: Arhictect
 * VERSIÓN: UDG 2025
 * PARA: Zorak
 */

@import url("https://fonts.googleapis.com/css?family=Catamaran:400,500,600,700,700|Source+Sans+Pro:400,600");
body {
  line-height: 1.4;
  font-family: "Source Sans Pro", sans-serif;
  -webkit-font-smoothing: antialiased;
  
}

/* Agregar al inicio de style.css */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Normalizar comportamiento de imágenes */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Normalizar fuentes */
html {
  scroll-behavior: smooth; /* Comportamiento base suave */
  --scroll-duration: 1.5s; /* Variable para la duración del scroll */
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

:root {
  /* Variables globales */
  --primary-color: #28ABE3;
  --transition-default: 0.3s ease;
}

/* Ejemplo de propiedad con todos los prefijos */
.elemento {
  -webkit-transform: translateZ(0);
     -moz-transform: translateZ(0);
      -ms-transform: translateZ(0);
       -o-transform: translateZ(0);
          transform: translateZ(0);
  
  -webkit-transition: var(--transition-default);
     -moz-transition: var(--transition-default);
      -ms-transition: var(--transition-default);
       -o-transition: var(--transition-default);
          transition: var(--transition-default);
}

/* modern-normalize o reset-css */
@import 'modern-normalize/modern-normalize.css';

.slider-wrapper {
  position: relative;
  max-width: 90rem;
  min-width: 480px;
  background: #fff;
  margin: 0 auto;
  overflow: hidden;
  box-shadow: 0 0 35px 20px #DDE5EE;
}

.slider-wrapper .slider {
  position: relative;
  height: 65rem;
  padding: 5rem 0;
}

.slider-wrapper .slide-wrapper {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}

.slider-wrapper .slide-navigation__squares,
.slider-wrapper .slide-navigation__txt {
  width: 10%;
  position: relative;
  float: left;
  overflow: hidden;
}

.slider-wrapper .slide-navigation__txt {
  display: block;
  height: 100%;
}

.slider-wrapper .slide-navigation__txt ul {
  margin: 0;
  list-style: none;
  padding: 0;
  position: absolute;
  display: table-cell;
  width: 30rem;
  transform: rotate(90deg);
  transform-origin: 0;
  margin-left: calc(50% - 0.14rem);
}

.slider-wrapper .slide-navigation__txt li {
  text-transform: uppercase;
  letter-spacing: 0.2rem;
  margin: 0 1.2rem;
  position: relative;
  float: left;
  font-size: 1.2rem;
  font-weight: 600;
  color: #A1A5B8;
}

.slider-wrapper .slide-navigation__txt li span {
  cursor: pointer;
  transition: all 0.5s ease;
  display: block;
}

.slider-wrapper .slide-navigation__txt li span.active {
  transform: scale(1.1, 1.1);
  color: #E34D67;
}

.slider-wrapper .slide-navigation__squares {
  display: block;
  height: 100%;
}

.slider-wrapper .squares-wrapper {
  position: absolute;
  margin-left: calc(50% - 0.4rem);
  bottom: 5rem;
  height: 4.6rem;
  overflow: hidden;
}

.slider-wrapper .squares-slider {
  position: relative;
  display: block;
  margin-top: -2.5rem;
  transform: translateY(-2.5rem);
}

.slider-wrapper .square {
  width: 0.6rem;
  height: 0.6rem;
  display: block;
  margin: 1.3rem 0;
  background: #A1A5B8;
}

.slider-wrapper .square.red {
  background: #E34D67;
}

.slider-wrapper .slides-container {
  position: relative;
  width: 80%;
  float: left;
  height: 100%;
}

.slider-wrapper .slide {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  z-index: 1;
}

.slider-wrapper .slide img {
  max-width: 100%;
  display: block;
  height: 100%;
  object-fit: cover;
}

.slider-wrapper .slide-content {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  padding: 5rem 5.8rem;
  overflow: hidden;
}

.slider-wrapper .slide-content h1 {
  text-transform: uppercase;
  color: white;
  font-weight: 900;
  font-size: 10rem;
  text-align: center;
  margin: 0;
  opacity: 0.6;
  position: relative;
}

.slider-wrapper .slide-content h2 {
  color: #E34D67;
  font-size: 4.8rem;
  max-width: 80%;
  margin: 0;
  margin-top: -6rem;
  font-weight: 900;
  line-height: 1;
  position: relative;
}

.slider-wrapper .slide-txt {
  position: relative;
  display: block;
  margin-top: 6rem;
}

.slider-wrapper .slide-txt p {
  margin: 0;
  max-width: 55%;
  color: #666666;
  font-size: 1.2rem;
  line-height: 1.4;
  float: left;
}

.slider-wrapper .slide-txt button {
  display: block;
  float: right;
  width: 18rem;
  text-align: center;
  background: transparent;
  border: 0.28rem solid #E34D67;
  text-transform: uppercase;
  padding: 0.8rem 0.5rem;
  font-size: 1.5rem;
  color: #E34D67;
  font-weight: 600;
  letter-spacing: 0.2rem;
  outline: none;
}



/* Modo oscuro */
body.dark-mode {
  background-color: #000; /* Fondo negro */
  color: #fff; /* Texto blanco */
}

body.dark-mode a {
  color: #1e90ff; /* Azul claro */
}

body.dark-mode a:hover {
  color: #00bfff; /* Azul más claro */
}

body.dark-mode .btn-main {
  background: #1e90ff; /* Azul claro */
  border: 1px solid #1e90ff;
  color: #fff;
}

body.dark-mode .btn-main:hover {
  background: #00bfff; /* Azul más claro */
  border-color: #00bfff;
}

body.dark-mode .section, 
body.dark-mode .section-sm, 
body.dark-mode .section-xs {
  background-color: #111; /* Gris oscuro */
}

body.dark-mode h1, 
body.dark-mode h2, 
body.dark-mode h3, 
body.dark-mode h4, 
body.dark-mode h5, 
body.dark-mode h6 {
  color: #fff; /* Blanco */
}

body.dark-mode input, 
body.dark-mode textarea, 
body.dark-mode select {
  background-color: #222; /* Gris oscuro */
  color: #fff;
  border: 1px solid #444; /* Gris intermedio */
}

body.dark-mode input:focus, 
body.dark-mode textarea:focus, 
body.dark-mode select:focus {
  border-color: #1e90ff; /* Azul claro */
}

/* Estilos del interruptor de modo oscuro */
.theme-switch-wrapper {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
  padding: 20px 15px;
}

.theme-switch {
  display: inline-block;
  align-items: center;
  gap: 10px;
  position: relative;
  width: 34px;
  height: 20px;
  margin-left: 15px; /* Espaciado opcional a la izquierda */
  align-items: center; /* Centra el toggle dentro de su propio contenedor */
  transform: translateY(4px);
}

/* Estilos para el texto */
.theme-label {
  margin: 0;
  font-size: 14px;
  white-space: nowrap;
  color: #fff;
  transition: color 0.3s ease;
}

/* Color del texto en la navegación normal (top) */
.navigation .theme-label {
  color: #fff;
}

/* Color del texto cuando la barra está sticky */
.sticky-header .theme-label {
  color: #000;
}

/* Mantener el color negro en sticky header incluso en modo oscuro */
body.dark-mode .sticky-header .theme-label {
  color: #000;
}

.theme-icons {
  display: flex;
  align-items: center;
  margin-left: 10px;
}

.theme-icons i {
  font-size: 35px;
  transition: all 0.3s ease;
  display: none; /* Ocultar todos los iconos por defecto */
}

/* Estado inicial (modo claro) */
.navigation .theme-icons .dark-icon-outline {
  display: block;
  color: #fff;
}

.navigation .theme-icons .light-icon-outline,
.navigation .theme-icons .light-icon,
.navigation .theme-icons .dark-icon {
  display: none;
}

/* Cuando la barra está sticky (modo claro) */
.sticky-header .theme-icons .dark-icon {
  display: block;
  color: #000;
}

.sticky-header .theme-icons .dark-icon-outline {
  display: none;
}

/* Modo oscuro */
body.dark-mode .theme-icons .light-icon-outline {
  display: block;
  color: #fff;
}

body.dark-mode .theme-icons .dark-icon,
body.dark-mode .theme-icons .dark-icon-outline {
  display: none;
}

/* Modo oscuro + sticky header */
body.dark-mode .sticky-header .theme-icons .light-icon {
  display: block;
  color: #000;
}

body.dark-mode .sticky-header .theme-icons .light-icon-outline {
  display: none;
}

.theme-switch input {
  opacity: 0;
  width: 0;
  margin: 0;
  padding: 0;
}

.theme-switch .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: 0.4s;
  border-radius: 34px;
  vertical-align: middle; /* Asegura que el slider esté centrado */
}

.theme-switch .slider:before {
  position: absolute;
  content: "";
  height: 14px;
  width: 14px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.4s;
  border-radius: 50%;
}

.theme-switch input:checked + .slider {
  background-color: #28ABE3;
}

.theme-switch input:checked + .slider:before {
  transform: translateX(14px);
}

/* SELECTOR DE IDIOMAS! */
/* Estilos para el selector de idiomas */
.language-selector-container {
  position: absolute;
  top: 50%;
  right: 30px; /* Ajusta según necesites */
  transform: translateY(-50%);
  z-index: 1000;
}

.language-selector {
  display: flex;
  align-items: center;
  gap: 0;
  filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.7)); /* Agregar sombra al selector */
}


.lang-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px; /* Reducir el ancho */
  height: 50px; /* Reducir la altura */
  transition: all 0.3s ease;
  margin: 0;
  padding: 0;
}

.lang-icon {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: all 0.3s ease;
  pointer-events: none;
}

/* Eliminar cualquier margen entre los links */
.lang-link:first-child {
  margin-right: 0;
}

.lang-link:last-child {
  margin-left: -33px;
}

/* Estado activo con glow */
.lang-link.active .es-color,
.lang-link.active .en-color {
  opacity: 1;
  filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.7));
}

/* Estado por defecto: todas las imágenes en blanco y negro con opacidad reducida */
.lang-link .es-color,
.lang-link .en-color {
  opacity: 0;
}

.lang-link .es-bw,
.lang-link .en-bw {
  opacity: 0.5; /* Reducir opacidad para banderas inactivas */
  transition: all 0.3s ease;
}

/* Estado activo: mostrar imagen a color con opacidad completa */
.lang-link.active .es-color,
.lang-link.active .en-color {
  opacity: 1;
}

.lang-link.active .es-bw,
.lang-link.active .en-bw {
  opacity: 0;
}

/* Efectos hover */
.lang-link:hover .es-color,
.lang-link:hover .en-color {
  opacity: 1;
}

.lang-link:hover .es-bw,
.lang-link:hover .en-bw {
  opacity: 0;
}

/* Opcional: añadir un efecto de escala para la bandera activa */
.lang-link.active {
  transform: scale(1.01);
  z-index: -1;
}

/* Ocultar selector de idiomas en iPhone 12 Pro */
@media only screen 
and (min-width: 390px) 
and (max-width: 390px)
and (min-height: 844px)
and (max-height: 844px) {
  .language-selector-container {
    display: none; /* Ocultar completamente el selector */
  }
}

/* Para asegurar que también funcione en modo landscape */
@media only screen 
and (min-width: 844px) 
and (max-width: 844px)
and (min-height: 390px)
and (max-height: 390px) {
  .language-selector-container {
    display: none;
  }
}


/*=== ABOUT CARDS ====*/

.card {
  position: relative;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.3s ease;
}

.card:hover {
  transform: scale(1.05);
}

.card-header {
  position: relative;
  text-align: center;
  background-color: #f4f4f4;
  padding: 15px;
}

.card-header img {
  width: 100%;
  height: auto;
  border-bottom: 1px solid #ddd;
}

.card-header h3 {
  margin-top: 10px;
  font-size: 1.2rem;
  color: #333;
}

.card-body {
  padding: 15px;
  background-color: #fff;
  text-align: center;
}

.card-body .hover-content {
  display: none;
  background-color: #e9ecef;
  padding: 10px;
  border-radius: 5px;
  margin-top: 10px;
}

.card:hover .hover-content {
  display: block;
}

/*=== VARIABLES DE ENTORNO RESPONSIVO ====*/

/* Variables CSS */
:root {
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --primary-color: #28ABE3;
  --white-color: #fff;
  --gray-color: #848484;
  --secondary-color: #848484;
  --black-color: #000;
  --gray-light: #f9f9f9;
  --dark-bg: #111;
  --dark-text: #fff;
  --dark-secondary-text: #ccc;
  --dark-highlight: #1e90ff;
  --dark-bg-alt: #1a1a1a; /* Fondo alterno oscuro */
  --arrow-horizontal-offset: 0px;
  scroll-behavior: smooth; /* Agrega scroll suave nativo */
  --scroll-duration: 1.5s; /* Duración del scroll suave */
}


body.dark-mode {
  --arrow-horizontal-offset: 0px; /* Ajusta la posición en modo oscuro */
}

img, video {
  max-width: 100%;
  height: auto;
}

/* Ejemplo de media queries */
  .hero-area .block h1 {
    font-size: 28px;
    line-height: 36px;
  }

  .hero-area .block p {
    font-size: 14px;
    width: 90%;
  }

  .btn-main {
    padding: 10px 20px;
    font-size: 12px;
  }


@media (max-width: var(--breakpoint-sm)) {
  .hero-area {
    padding: 50px 20px;
    text-align: center;
  }

  .hero-area .block h1 {
    font-size: 24px;
    line-height: 30px;
  }

  .hero-area .block p {
    font-size: 12px;
    width: 100%;
  }
}

.container {
  width: 100%;
  max-width: 1200px;
  padding: 0 var(--spacing-md);
  margin: 0 auto;
}

.navigation .navbar-collapse {
  flex-direction: column;
  align-items: center;
}

@media (max-width: var(--breakpoint-md)) {
  .navigation .navbar-nav {
    text-align: center;
  }

  .navigation .nav-link {
    padding: var(--spacing-sm) 0;
  }
}

.navbar-nav .nav-link {
  white-space: nowrap; /* Evita el salto de línea */
  display: inline-block; /* Mantiene el texto en una sola línea */
}

/* Si necesitas ajustar el espacio */
.navbar-nav .nav-item {
  padding: 0 2px; /* Ajusta el espaciado horizontal según necesites */
}

html {
  font-size: 16px;
}

@media (max-width: var(--breakpoint-lg)) {
  html {
    font-size: 15px;
  }
}

@media (max-width: var(--breakpoint-md)) {
  html {
    font-size: 14px;
  }
}

@media (max-width: var(--breakpoint-sm)) {
  html {
    font-size: 13px;
  }
}

.section {
  padding: var(--spacing-lg) 0;
}

.section-sm {
  padding: var(--spacing-md) 0;
}

.section-xs {
  padding: var(--spacing-sm) 0;
}

body.dark-mode .section {
  background-color: var(--dark-bg); /* Fondo principal oscuro */
  color: var(--dark-text); /* Texto blanco */
  border-bottom: 1px solid var(--dark-secondary-text); /* Línea de separación */
}

body.dark-mode .section:nth-child(even) {
  background-color: var(--dark-bg-alt); /* Fondo alterno oscuro */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); /* Sombra para secciones alternas */
}

/*===== FIN DEL CÓDIGO INSERTADO =====*/

p {
  font-family: "Source Sans Pro", sans-serif;
  color: #848484;
  font-size: 16px;
  line-height: 1.65;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Catamaran", sans-serif;
  font-weight: 600;
}

.no-padding {
  padding: 0 !important;
}

.inline-block {
  display: inline-block;
}

/*=== IMPORT DE LA OTRA WEB ===*/

.nk-footer-logos a {
    display: inline-block;
    margin: 25px;
}

.nk-footer-logos {
    margin-right: -25px;
    margin-left: -25px;
}

.nk-footer-logos img {
    height: auto;
}

.nk-img {
    max-width: 100%;
    height: auto;
}

/*=== FIN DEL IMPORT ===*/

ol, ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

figure {
  margin: 0;
}

a {
  transition: all 0.3s ease-in 0s;
}

iframe {
  border: 0;
}

a, a:focus, a:hover {
  text-decoration: none;
  outline: 0;
}

a:focus, a:hover {
  color: #28ABE3;
}

.btn {
  display: inline-block;
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-radius: 40px;
  padding: 12px 40px;
  transition: all 0.3s ease;
}

.btn-main {
  background: var(--primary-color);
  border: 1px solid var(--primary-color);
  color: var(--white-color);
}

.btn-main:hover {
  color: var(--white-color);
}

.btn-transparent {
  color: var(--white-color);
  border: 1px solid var(--white-color);
}

.btn-transparent:hover {
  color: var(--white-color);
}

.mt-10 {
  margin-top: 10px;
}

.mt-20 {
  margin-top: 20px;
}

.mt-30 {
  margin-top: 30px;
}

.mt-40 {
  margin-top: 40px;
}

.mt-50 {
  margin-top: 50px;
}

.section {
  padding: 100px 0;
}

.btn:focus {
  color: #ddd;
}

#home {
  position: relative;
}

.section {
  padding: 100px 0;
}

.section-sm {
  padding: 70px 0;
}

.section-xs {
  padding: 40px 0;
}

#preloader {
  background: #000;
  height: 100%;
  left: 0;
  opacity: 1;
  filter: alpha(opacity=100);
  position: fixed;
  text-align: center;
  top: 0;
  width: 100%;
  z-index: 999999999;
}

.btn.active:focus, .btn:active:focus, .btn:focus {
  outline: 0;
}

.parallax-section {
  background-attachment: fixed;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.preloader {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  position: absolute;
}

.preloader span {
  position: absolute;
  display: block;
  bottom: 0;
  width: 9px;
  height: 5px;
  border-radius: 5px;
  background: #fff;
  -webkit-animation: preloader 2s infinite ease-in-out;
  animation: preloader 2s infinite ease-in-out;
}

.preloader span:nth-child(2) {
  left: 11px;
  -webkit-animation-delay: 200ms;
  animation-delay: 200ms;
}

.preloader span:nth-child(3) {
  left: 22px;
  -webkit-animation-delay: 400ms;
  animation-delay: 400ms;
}

.preloader span:nth-child(4) {
  left: 33px;
  -webkit-animation-delay: 600ms;
  animation-delay: 600ms;
}

.preloader span:nth-child(5) {
  left: 44px;
  -webkit-animation-delay: 800ms;
  animation-delay: 800ms;
}

.preloader span:nth-child(6) {
  left: 55px;
  -webkit-animation-delay: 1000ms;
  animation-delay: 1000ms;
}

@-webkit-keyframes preloader {
  0% {
    height: 5px;
    transform: translateY(0);
    background: rgba(0, 0, 0, 0.1);
  }
  25% {
    height: 30px;
    transform: translateY(15px);
    background: #28ABE3;
  }
  50%, 100% {
    height: 5px;
    transform: translateY(0);
    background: rgba(0, 0, 0, 0.1);
  }
}
@keyframes preloader {
  0% {
    height: 5px;
    transform: translateY(0);
    background: #fff;
  }
  25% {
    height: 30px;
    transform: translateY(15px);
    background: #3498db;
  }
  50%, 100% {
    height: 5px;
    transform: translateY(0);
    background: #fff;
  }
}

.title {
  padding-bottom: 50px;
  overflow: hidden;
}

.title h2 {
  font-weight: 600;
  font-size: 35px;
  color: #232323;
}

.title p {
  color: #848484;
  margin: 0 auto;
}

.title.title-white h2 {
  color: #fff;
}

.border {
  height: 2px;
  margin: 20px auto 20px;
  position: relative;
  width: 80px;
  background: #28ABE3;
}

.border2 {
  position: relative;
  width: 100%;
  height: 15px;
  margin: 0 auto;
  text-align: center;
  background-image: url('../images/separador.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Modificamos las líneas para que estén más cercanas al centro */
2::before,
.border2::after {
  content: '';
  position: absolute;
  width: 200px; /* Reducimos el ancho de las líneas */
  height: 2px;
  background: #ffffff;
  top: 50%;
  transform: translateY(-50%);
}

.border2::before {
  left: calc(50% - 220px); /* 200px del ancho + 20px de espacio al círculo */
}

.border2::after {
  right: calc(50% - 220px); /* 200px del ancho + 20px de espacio al círculo */
}

/* Círculo central */
.border2 .circle {
  width: 5px;
  height: 5px;
  background: #ffffff;
  border-radius: 50%;
  position: relative;
  z-index: 1;
}

/* Media queries para responsividad */
@media (max-width: 768px) {
  .border2::before,
  .border2::after {
    width: 100px; /* Líneas más cortas en pantallas pequeñas */
  }
  
  .border2::before {
    left: calc(50% - 120px);
  }
  
  .border2::after {
    right: calc(50% - 120px);
  }
}

@media (max-width: 480px) {
  .border2::before,
  .border2::after {
    width: 50px; /* Líneas aún más cortas en pantallas muy pequeñas */
  }
  
  .border2::before {
    left: calc(50% - 70px);
  }
  
  .border2::after {
    right: calc(50% - 70px);
  }
}

.bg-gray {
  background: #f9f9f9;
}

.header-bradcrumb {
  background: transparent;
}
.header-bradcrumb a, .header-bradcrumb .active {
  color: #cfcfcf;
  font-weight: 200;
  font-family: "Source Sans Pro", sans-serif;
}
.header-bradcrumb a:hover {
  color: #28ABE3;
}

.colors-switcher {
  width: 100px;
  padding: 20px 18px 14px 20px;
  position: fixed;
  z-index: 1993;
  top: 90px;
  right: 0;
  background-color: #fff;
  border-radius: 2px 0 0 2px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  transition: all 0.4s ease-in-out;
}
.colors-switcher #show-panel {
  position: absolute;
  left: -38px;
  top: 15px;
  width: 38px;
  height: 38px;
  z-index: 1992;
  display: block;
  background-color: #fff;
  border-radius: 2px 0 0 2px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-right: none;
  cursor: pointer;
}
.colors-switcher #show-panel i {
  color: #3D3D3D;
  font-size: 20px;
  line-height: 38px;
  margin-left: 10px;
}

.colors-list {
  margin: 0;
  padding: 0;
}
.colors-list li {
  display: inline-block;
  margin-bottom: 2px;
  margin-right: 4px;
}
.colors-list li a {
  text-align: center;
  display: inline-block;
  width: 24px;
  height: 24px;
  border-radius: 2px;
  transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -webkit-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  cursor: pointer;
}

.colors-switcher .colors-list a.light-red {
  background-color: #FF432E;
}

.colors-switcher .colors-list li a:hover {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.4);
}

.colors-switcher .colors-list a.light-red {
  background-color: #FF432E;
}

.colors-switcher .colors-list a.blue {
  background-color: #28ABE3;
}

.colors-switcher .colors-list a.light-blue {
  background-color: #69D2E7;
}

.colors-switcher .colors-list a.green {
  background-color: #5BB12F;
}

.colors-switcher .colors-list a.light-green {
  background-color: #BCCF02;
}

.colors-switcher .colors-list a.yellow {
  background-color: #FED136;
}

.logo {
  display: inline-block;
}

.single-page-header {
  background-image: url("../images/about/about-header.webp");
  background-size: cover;
  padding: 140px 0 70px;
  text-align: center;
  color: #fff;
  position: relative;
}
.single-page-header:before {
  background: rgba(0, 0, 0, 0.8);
  position: absolute;
  content: "";
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
}

/*=================================================================
  Navigation
==================================================================*/
.navigation {
  transition: 0.3s all;
}
.navigation .logo-default {
  display: none;
}
.navigation .dropdown-toggle::before, .navigation .dropdown-toggle::after {
  display: none;
}
.navigation .dropdown-toggle i {
  font-size: 10px;
  margin-left: 2px;
  vertical-align: 2px;
}
.navigation .navbar-light .navbar-nav .nav-item .nav-link {
  color: #fff;
  font-size: 14px;
  line-height: 26px;
  padding: 20px 15px;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: 0.2s ease-in-out 0s;
}
.navigation .navbar-light .navbar-nav .nav-item .nav-link:hover, .navigation .navbar-light .navbar-nav .nav-item .nav-link:active, .navigation .navbar-light .navbar-nav .nav-item .nav-link:focus {
  background: none;
  color: #28ABE3;
}
.navigation .navbar-light .navbar-nav .nav-item.active .nav-link {
  color: #28ABE3;
}
@media (max-width: 991px) {
  .navigation .nav-link {
    padding: 6px !important;
  }
  .navigation .dropdown-menu {
    display: none;
  }
}
.navigation .dropdown-submenu .dropdown-menu {
  margin: 0;
  background-color: #131313;
}
@media (min-width: 992px) {
  .navigation .dropdown-submenu .dropdown-menu {
    left: 100%;
    top: -5px;
  }
  .navigation .dropleft .dropdown-menu {
    left: auto;
    right: 100%;
    margin: 0;
    top: -5px;
  }
  .navigation .dropdown-submenu .dropdown-menu {
    background-color: #000;
  }
}
.navigation .dropdown:hover > .dropdown-menu {
  visibility: visible;
  opacity: 1;
}
.navigation .dropdown-menu {
  border: 0;
  border-radius: 0;
  top: 80%;
  left: 5px;
  display: block;
  visibility: hidden;
  opacity: 0;
  padding: 0;
  background: #000;
  transition: 0.3s ease;
}
.navigation .dropdown-menu li:first-child {
  margin-top: 12px;
}
.navigation .dropdown-menu li:last-child {
  margin-bottom: 12px;
}
@media (max-width: 991px) {
  .navigation .dropdown-menu {
    display: none;
    opacity: 1;
    visibility: visible;
    text-align: center;
    transition: 0s;
  }
}
@media (max-width: 991px) {
  .navigation .dropdown-menu.show {
    display: block;
  }
  .navigation .dropdown-menu {
    float: left;
    width: 100%;
  }
}
.navigation .dropdown-item {
  color: rgba(255, 255, 255, 0.8);
  transition: 0.2s ease;
  padding: 8px 22px;
}
.navigation .dropdown-item:focus, .navigation .dropdown-item:hover {
  color: #fff;
  background: transparent;
}

@media (max-width: 991px) {
  .navigation {
    box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.06);
    background: #fff;
  }
  .navigation .navbar-light .navbar-nav .nav-item .nav-link {
    color: #000;
  }
  .navigation .logo-white {
    display: none;
  }
  .navigation .logo-default {
    display: block;
  }
  .navigation .navbar-light .navbar-toggler {
    color: rgba(0, 0, 0, 5);
    border-color: rgba(0, 0, 0, 0.1);
  }
}
.sticky-header {
  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.06);
  background: #fff;
}
.sticky-header .navbar-light .navbar-nav .nav-item .nav-link {
  color: #000;
}
.sticky-header .logo-white {
  display: none;
}
.sticky-header .logo-default {
  display: block;
}

.navbar-brand {
  height: auto;
  padding: 8px 0;
}

.navbar-brand h1 {
  margin: 0;
}

@media (max-width: 991px) {
  .hero-area .block h1,
  .hero-area-video .block h1,
  .slider-item h1 {
    font-size: 36px;
    line-height: 42px;
  }

  .hero-area .block p,
  .hero-area-video .block p {
    width: 80%;
    font-size: 14px;
  }
}

@media (max-width: 767px) {
  .hero-area,
  .hero-area-video {
    height: auto;
    padding: 100px 20px;
    text-align: center;
  }

  .hero-area .block h1,
  .hero-area-video .block h1,
  .slider-item h1 {
    font-size: 28px;
    line-height: 36px;
  }

  .hero-area .block p,
  .hero-area-video .block p {
    width: 100%;
    font-size: 12px;
  }

  .slider-item .container {
    position: relative;
    top: auto;
    transform: none;
    padding: 100px 20px;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .hero-area .block .btn-main,
  .hero-area-video .block .btn-main {
    display: block;
    width: 100%;
    margin: 10px 0;
  }
}

.page-404 {
	position: relative;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
}

.video-404 {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -2;
}

.overlay-404 {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.6); /* Oscurece un poco el video */
	z-index: -1;
}

.page-404 h1, 
.page-404 h2, 
.page-404 p, 
.page-404 a {
	color: #fff;
	position: relative;
	z-index: 1;
}

.hero-area {
  background-image: url("../images/slider/slider-bg-1.webp");
  background-size: cover;
  height: 100vh;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.hero-area:before {
  content: "";
  background: rgba(0, 0, 0, 0.63);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.hero-area .block {
  color: #fff;
}
.hero-area .block h1 {
  font-size: 60px;
  font-weight: 700;
  margin-bottom: 20px;
  text-transform: uppercase;
}
.hero-area .block p {
  color: #fff;
  width: 50%;
  margin-bottom: 20px;
}
.hero-area .block .btn-main {
  margin-right: 8px;
}
.hero-area .block .btn-main:hover {
  opacity: 0.8;
}

.hero-area-video {
  height: 100vh;
  position: inherit !important;
  display: flex;
  justify-content: center;
  align-items: center;
}
.hero-area-video .block {
  color: #fff;
  text-align: center;
}
.hero-area-video .block h1 {
  font-size: 60px;
  font-weight: 700;
  margin-bottom: 20px;
}
.hero-area-video .block p {
  color: #fff;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 3px;
  margin-bottom: 20px;
}
.hero-area-video .block .btn-main {
  margin-top: 20px;
}

.dark-bg {
  background: rgba(0, 0, 0, 0.7);
  height: 100%;
  width: 100%;
  position: absolute;
  z-index: -1;
}

.slider-item {
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  position: relative;
  width: 100%;
  height: 100vh;
}

.slider-item::before {
  position: absolute;
  content: "";
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.3); /* Reducir la opacidad del overlay */
  left: 0;
  top: 0;
}

.slider-item::before {
  position: absolute;
  content: "";
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.3); /* Reducir la opacidad del overlay */
  left: 0;
  top: 0;
}
.slider-item .container {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
.slider-item h1 {
  color: #fff;
  font-size: 60px;
  line-height: 70px;
  letter-spacing: 2px;
  font-weight: 700;
  margin-bottom: 20px;
  margin-top: 50px;
}
@media (max-width: 768px) {
  .slider-item h1 {
    font-size: 48px;
    line-height: 52px;
  }
}
@media (max-width: 480px) {
  .slider-item h1 {
    font-size: 38px;
    line-height: 46px;
  }
}
.slider-item p {
  color: #fff;
  margin-bottom: 20px;
}

.hero-slider .prevArrow {
  left: -100px;
}
.hero-slider .nextArrow {
  right: -100px;
}
@media (max-width: 768px) {
  .hero-slider .prevArrow,
.hero-slider .nextArrow {
    display: none !important;
  }
}
.hero-slider:hover .prevArrow {
  left: 20px;
}
.hero-slider:hover .nextArrow {
  right: 20px;
}

/* slick style */
.slick-slide {
  outline: 0;
}

.slick-slide img {
  display: unset;
}

/* slick arrows */
.slick-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 9;
  height: 70px;
  width: 70px;
  background: rgba(40, 171, 227, 0.5);
  color: #fff;
  border: 0;
  line-height: 70px;
  font-size: 35px;
  transition: 0.2s ease;
  border-radius: 50%;
  cursor: pointer;
}
.slick-arrow::before {
  position: absolute;
  content: "";
  height: 10px;
  width: 10px;
  background: transparent;
  top: 50%;
  transform: translateY(-50%) rotate(-45deg);
  transition: 0.2s ease;
}
.slick-arrow::after {
  position: absolute;
  content: "";
  height: 2px;
  width: 25px;
  top: 50%;
  transform: translateY(-50%);
  background: #fff;
  transition: 0.2s ease;
}
.slick-arrow:focus {
  outline: 0;
}
.slick-arrow:hover {
  background: #28ABE3;
}

.prevArrow {
  left: 0px;
}
.prevArrow::before {
  border-left: 2px solid #fff;
  border-top: 2px solid #fff;
  right: 35px;
}
.prevArrow::after {
  right: 20px;
}

.nextArrow {
  right: 0px;
}
.nextArrow::before {
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  left: 35px;
}
.nextArrow::after {
  left: 20px;
}

/* /slick arrows */
/* Ocultar las flechas de navegación del slider */
.slick-prev,
.slick-next {
  display: none !important; /* Oculta completamente las flechas */
}

/*=================================================================
  About us section
==================================================================*/


.about {
  padding: 100px 0;
  background: #fff;
}
.about .btn-about {
  background: #28ABE3;
}
.about h4 {
  margin-top: 30px;
}
.about .feature-list {
  margin-top: 10px;
}
.about .feature-list li {
  width: 48%;
  display: inline-block;
  color: #666;
  font-size: 13px;
  font-family: "Catamaran", sans-serif;
  margin-bottom: 5px;
  font-weight: 600;
}
@media (max-width: 768px) {
  .about .feature-list li {
    width: auto;
    margin-right: 20px;
  }
}
.about .feature-list li i {
  color: #28ABE3;
  margin-right: 8px;
}

body.dark-mode .about {
  background-color: var(--dark-bg); /* Fondo principal oscuro */
  color: var(--dark-text);
}

body.dark-mode .about:nth-child(even) {
  background-color: var(--dark-bg-alt); /* Fondo alterno oscuro */
}

/* Estilos específicos para la sección "about" */
.about-section {
  padding: 60px 0;
  background-color: #fff;
}

.about-card {
  /* Fijar tamaño */
  width: 500px;
  min-width: 500px;
  max-width: 500px;
  
  /* Eliminar flex-basis variable */
  flex: 0 0 500px;
  
  /* Resto de estilos */
  height: 100%;
  min-height: 400px;
  max-height: 720px;
  background-color: #fff;
  color: #000;
  border-radius: 8px;
  overflow: hidden;
  margin: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border: 2px solid #000;
  transition: transform 0.3s ease;
  display: flex;
  flex-direction: column;
}

/* Ajustar el contenedor del slider */
.slider-container {
  max-width: 1920px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Media query para pantallas grandes */
@media (min-width: 1921px) {
  .about-section .container-fluid,
  .slider-container {
    width: 1920px;
  }

  .about-slider {
    margin: 0 auto;
  }
}

/* Eliminar los media queries que modifican el ancho */
@media (max-width: 1440px) {
  .about-card {
    /* Mantener el mismo ancho */
    width: 500px;
    min-width: 500px;
    max-width: 500px;
    margin: 10px;
  }
}

/* Ajustes específicos para tablets */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  /* Contenedor del slider */
  .slider-container {
    padding: 0 20px;
    max-width: 100%;
    overflow-x: hidden;
  }

  /* Ajustes de las cards */
  .about-card {
    width: 400px; /* Reducir el ancho para tablets */
    min-width: 400px;
    max-width: 400px;
    flex: 0 0 400px;
    margin: 10px 5px; /* Reducir el margen horizontal */
    height: auto;
    min-height: 600px; /* Aumentar altura mínima para acomodar el contenido */
  }

  /* Ajustar el slider */
  .about-slider {
    display: flex;
    margin: 0;
    gap: 10px;
  }

  /* Asegurar que las slides mantienen su formato */
  .slick-track {
    display: flex !important;
    gap: 0;
    margin-left: 0;
  }

  .slick-slide {
    height: auto;
  }
}

/* Ajustes específicos para tablets/iPad */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .about-card {
    width: 350px !important; /* Reducir el ancho para iPad */
    min-width: 295px !important;
    max-width: 295px !important;
    flex: 0 0 100px !important;
    margin: 10px;
    height: auto;
    min-height: 600px;
  }

  .slider-container {
    padding: 0 20px;
    max-width: 100%;
    overflow: hidden;
  }

  /* Asegurar que el contenedor tenga el ancho correcto */
  .about-slider {
    margin: 0 auto;
    width: calc(100% - 40px);
  }
}

/* Ajustes específicos para iPad en orientación vertical */
@media only screen 
and (min-device-width: 768px) 
and (max-device-width: 1024px) 
and (orientation: portrait) {
  .about-card {
    width: 320px !important;
    min-width: 320px !important;
    max-width: 320px !important;
    flex: 0 0 320px !important;
  }
}

/* Ajustes específicos para iPhone 12 Pro */
@media only screen and (min-width: 390px) and (max-width: 400px) {
  .about-card {
    width: 350px !important;
    min-width: 240px !important;
    max-width: 240px !important;
    flex: 0 0 350px !important;
    margin: 5px 5px !important; /* Aumentar el margen horizontal */
  }

  .slick-slide {
    margin-right: 30px; /* Espacio adicional entre slides */
  }

  .slider-container {
    padding: 0 15px;
    max-width: 100%;
    overflow-x: hidden;
  }

  /* Ajustar el contenedor del slider */
  .about-slider {
    margin: 0;
    width: 100%;
    display: flex;
    gap: 30px; /* Espacio entre cards */
  }

  /* Asegurar que el track del slider respete los espacios */
  .slick-track {
    display: flex !important;
    gap: 30px !important;
    margin-left: 0;
  }
}

/* Selector de Puntos */
.slider-dots {
  text-align: center;
  margin: 20px 0;
  padding: 10px;
}

.slider-dots .dot {
  cursor: pointer;
  width: 12px;
  height: 12px;
  margin: 0 5px;
  background: #ccc;
  border-radius: 50%;
  display: inline-block;
  transition: all 0.3s ease;
  /* Añadir outline */
  outline: 0.5px solid #000; /* Outline negro para modo claro */
  outline-offset: 1px; /* Espacio entre el círculo y el outline */
}

.slider-dots .dot:hover {
  background: #28ABE3;
  transform: scale(1.2);
}

.slider-dots .dot.active {
  background: #28ABE3;
  transform: scale(1.2);
  /* Mantener el outline en estado activo */
  outline: 0.5px solid #000;
}

/* Modo oscuro */
body.dark-mode .slider-dots .dot {
  background-color: rgba(255, 255, 255, 0.2);
  outline: 0.5px solid #fff; /* Outline blanco para modo oscuro */
}

body.dark-mode .slider-dots .dot.active {
  background-color: #1e90ff;
  outline: 0.5px solid #fff; /* Mantener outline blanco en estado activo */
}

/* FIN DEL SELECTOR DE PUNTOS */

/* Ajustes específicos para fullscreen */
:fullscreen .about-section .slider-container,
:-webkit-full-screen .about-section .slider-container {
  max-width: 1920px;
  margin: 0 auto;
}

/* About Card REPETIDO VIEJO */
/*.about-card {
  display: flex;
  flex-direction: column;
  justify-content: center; /* Centra el contenido dentro de cada viñeta */
/*  align-items: center; /* Asegura que el contenido esté alineado al centro */
/*  height: 100%; /* Asegura que las viñetas ocupen todo el espacio disponible */
/*  background: #ffffff00;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(43, 41, 41, 0);
  padding: 0px; /* Espaciado interno */
/*  margin: 5px; /* Espaciado entre las viñetas */
/*  margin-top: 10px; /* Asegura que las viñetas estén alineadas al centro */
/*  text-align: center;
  transition: transform 0.3s ease;
  height: 650px; /* Mantener el tamaño fijo */
/*  display: flex;
  flex-direction: row;
  justify-content: space-between;
}*/

/* Borde de las tarjetas en modo oscuro */
body.dark-mode .about-card {
  border: 1px solid #fff; /* Borde blanco en modo oscuro */
}

.about-card:hover {
  transform: scale(1.05);
}

.card-image {
  width: 100%;
  height: auto;
  border-radius: 0px;
  margin-bottom: 15px;
}

.about-card .card-image {
  width: 100%;
  max-width: 100%; /* Asegura que no exceda el ancho del contenedor */
  height: auto;
  overflow: hidden;
  border-radius: 8px;
  margin-bottom: 5px;
  display: flex; /* Ayuda con el centrado */
  justify-content: center;
  align-items: center;
}

.about-card .card-image img {
  max-width: 100%;
  height: auto;
  display: block; /* Elimina espacios extra */
}

.about-card .card-title {
  position: static; /* Restablece la posición al flujo normal */
  transform: none; /* Elimina cualquier transformación */
  background-color: transparent; /* Elimina el fondo negro */
  color:rgb(179, 176, 176); /* Texto oscuro */
  padding: 0; /* Elimina el espaciado interno */
  font-size: 1.5rem; /* Tamaño de fuente ajustado */
  text-align: center; /* Centra el texto horizontalmente */
  margin-top: 10px; /* Añade un margen superior para separación */
}

.about-card .card-content {
  padding: 15px;
  background-color: rgba(0,0,0,0); /* Fondo claro fijo */
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* Alinea el contenido al inicio */
  align-items: flex-start; /* Asegura que el contenido esté alineado a la izquierda */
  min-height: 500px; /* Mantén el tamaño fijo */
}

.about-card .card-content p {
  font-weight: bold;
  margin-bottom: 10px;
}

.about-card .card-content ul {
  list-style-type: none;
  padding: 0;
}

.about-card .card-content ul li {
  margin-bottom: 5px;
  padding-left: 20px;
  position: relative;
}

.about-card .card-content ul li::before {
  content: "•";
  color: #4a4a4a;
  position: absolute;
  left: 0;
}

/* Asegurar que el texto dentro de hero-slider no cambie con el modo oscuro */
.hero-slider h1,
.hero-slider h2,
.hero-slider h3,
.hero-slider h4,
.hero-slider p,
.hero-slider a {
  color: white !important; /* Fuerza el color blanco */
}

/* Estilos para promo-video2 */
.promo-video2 {
  padding: 50px 0; /* Ajusta el espaciado superior e inferior */
}

.promo-video2 .text-center {
  text-align: center;
}

.promo-video2 h2 {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 20px;
}

.promo-video2 p {
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 20px;
  color: #848484;
}

.promo-video2 .border {
  height: 2px;
  width: 80px;
  background-color: #28ABE3;
  margin: 20px auto 0;
}

.promo-video2 .row {
  display: flex;
  align-items: center; /* Centra verticalmente el contenido */
}

.promo-video2 .col-md-6 {
  padding: 15px;
}

.promo-video2 iframe {
  width: 100%; /* Ocupa todo el ancho del contenedor */
  height: 100%; /* Ocupa todo el alto del contenedor */
  border: none; /* Elimina el borde del iframe */
}

/* Asegurar que el texto de la sección de fases sea siempre blanco */
#fases h1, #fases h2, #fases h4, #fases p, #fases ul li {
  color: white !important; /* Fuerza el color blanco */
}

/* Asegura que todas las tarjetas tengan el mismo tamaño */
.row {
  display: flex;
  flex-wrap: wrap;
}

.row > .col-md-3 {
  display: flex;
  flex-direction: column;
}

/* Modo oscuro: solo afecta el fondo de la sección */
body.dark-mode .about-section {
  background-color: var(--dark-bg-alt); /* Fondo oscuro */
}

/* Estilos para promo-video2 */
.promo-video2 {
  padding: 80px 0; /* Aumenta el espaciado superior e inferior */
}

.promo-video2 .row {
  display: flex;
  align-items: center; /* Centra verticalmente el contenido */
  min-height: 500px; /* Aumenta la altura mínima de la sección */
}

.promo-video2 .col-md-6 {
  padding: 15px;
}

.promo-video2 iframe {
  width: 100%; /* Ocupa todo el ancho del contenedor */
  height: 100%; /* Ocupa todo el alto del contenedor */
  min-height: 315px; /* Asegura que el video tenga una altura mínima */
  border: none; /* Elimina el borde del iframe */
}

/* Estilos para la barra de progreso de fases */
.phase-progress-bar {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  max-width: 800px;
  z-index: 10;
  padding: 20px;
  background: transparent;
}

.progress-container {
  position: relative;
  padding: 20px 0;
}

@media (max-width: 3840px) {
  .progress-container {
    transform: translateY(120%);
  }
}

@media (max-width: 3440px) {
  .progress-container {
    transform: translateY(50%);
  }
}

@media (max-width: 2560px) {
  .progress-container {
    transform: translateY(50%);
  }
}

@media (max-width: 1920px) {
  .progress-container {
    transform: translateY(0%);
  }
}

@media (max-width: 768px) {
  .progress-container {
    transform: translateY(300%);
  }
}

.progress-line {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  background: rgba(255, 255, 255, 0.3);
  transform: translateY(-50%);
}

.progress-line::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0;
  background: #28ABE3;
  transition: width 0.5s ease;
}

.progress-points {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.point {
  position: relative;
  width: 40px;
  height: 40px;
  cursor: pointer;
  z-index: 1;
}

.point-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.2);
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  color: white;
  font-weight: bold;
  transition: all 0.3s ease;
}

.point.active .point-number {
  background: #28ABE3;
  border-color: #28ABE3;
}

.point-label {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 8px;
  white-space: nowrap;
  color: white;
  font-size: 12px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.point:hover .point-label {
  opacity: 1;
}

/* Modo oscuro */
body.dark-mode .progress-line {
  background: rgba(255, 255, 255, 0.2);
}

body.dark-mode .point-number {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.3);
}

body.dark-mode .point.active .point-number {
  background: #1e90ff;
  border-color: #1e90ff;
}

/* Ajustar el color del texto en la sección features para modo oscuro */
body.dark-mode #features .checklist li {
  color: #d1d1d1; /* Color más claro para mejor legibilidad */
}

/* Si necesitas ajustar también los títulos */
body.dark-mode #features h2,
body.dark-mode #features .title p {
  color: #ffffff; /* Blanco puro para títulos */
}

/* Estilos base para la barra de progreso */
.phase-progress-bar {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  max-width: 800px;
  z-index: 10;
  padding: 20px;
  background: transparent; /* Elimina el fondo */
  backdrop-filter: none; /* Elimina el efecto blur */
}

.progress-container {
  position: relative;
  padding: 15px 0;
}

.progress-line {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 3px;
  background: rgba(255, 255, 255, 0.3); /* Línea más sutil */
  transform: translateY(-50%);
}

.progress-line::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: var(--progress, 0%);
  background: #28ABE3;
  transition: width 0.5s ease;
}

/* Ajusta los estilos de los puntos */
.point-number {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.3); /* Fondo más sutil para los números */
  border: 2px solid rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  color: #fff;
  font-weight: bold;
  transition: all 0.3s ease;
}

/* El resto del CSS permanece igual */

/* Ajustes para el contenedor principal en modo claro */
#fases {
  position: relative;
  background: transparent;
}

body.dark-mode #fases {
  background: #000; /* Fondo oscuro en modo oscuro */
}

/* Hover effects */
.point:hover .point-number {
  transform: scale(1.1);
  border-color: #28ABE3;
}

/* Mejora de visibilidad para modo claro */
.progress-points {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
}

/* Background del contenedor en modo claro */
.phase-progress-bar {
  background: rgba(255, 255, 255, 0.0); /* Fondo más claro y opaco */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.0); /* Sombra suave */
}

body.dark-mode .phase-progress-bar {
  background: rgba(0, 0, 0, 0.0);
}

/* Eliminar la línea de progreso anterior */
.progress-line {
  display: none;
}

/* Crear líneas individuales entre los puntos */
.point {
  position: relative;
  width: 40px;
  height: 40px;
  cursor: pointer;
  z-index: 1;
}

/* Líneas conectoras base (todas apagadas por defecto) */
.point:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 40px;
  width: calc(100% + 90px);
  height: 3px;
  background: rgba(255, 255, 255, 0.3);
  transform: translateY(-50%);
  z-index: -1;
  transition: background-color 0.3s ease;
}

/* Eliminar el estado activo anterior */
.point.active:not(:last-child)::after {
  background: rgba(255, 255, 255, 0.3); /* Mantener apagado cuando el punto está activo */
}

/* Nueva regla: la línea se enciende cuando el siguiente punto está activo */
.point:not(:last-child):has(+ .point.active)::after {
  background: #28ABE3;
}

/* Fallback para navegadores que no soportan :has */
.point.next-active:not(:last-child)::after {
  background: #28ABE3;
}

/* Modificar el estilo de las líneas conectoras */
.point:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 40px;
  width: calc(100% + 90px);
  height: 3px;
  background: rgba(255, 255, 255, 0.3);
  transform: translateY(-50%);
  z-index: -1;
  transition: background-color 0.3s ease;
}

/* Modificar la activación de la línea */
.point.next-active:not(:last-child)::after {
  background: #28ABE3;
}

/* Asegurarse que los puntos están espaciados correctamente */
.progress-points {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  width: 100%;
  gap: 40px; /* Añadir espacio consistente entre puntos */
}

/* Ajustar el contenedor para mantener el espaciado */
.progress-container {
  position: relative;
  padding: 15px 0;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

/* Resto de estilos se mantienen igual */
.point-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.2);
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  color: white;
  font-weight: bold;
  transition: all 0.3s ease;
}

/*=================================================================
  About us 2 section #F7F7F7
==================================================================*/
.about-2 {
  position: relative;
  background: url("../images/features-bg.webp");
  background-size: cover;
  min-height: 80vh;
  padding: 60px 0;
}
.about-2 .checklist {
  padding-left: 30px;
}

/* Estilos para las listas de características */
.about-2 .checklist li {
  color: #e0e0e0 !important; /* Color claro para el texto */
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 15px;
}

/* Títulos y subtítulos */
.about-2 .title h2,
.about-2 .title p {
  color: #ffffff !important; /* Color blanco para títulos */
}

/* Asegurar que el color se mantiene en ambos modos */
body.light-mode .about-2 .checklist li,
body.dark-mode .about-2 .checklist li {
  color: #e0e0e0 !important;
}

body.light-mode .about-2 .title h2,
body.light-mode .about-2 .title p,
body.dark-mode .about-2 .title h2,
body.dark-mode .about-2 .title p {
  color: #ffffff !important;
}

/* Ajuste para los bordes y otros elementos */
.about-2 .border {
  background: #28ABE3; /* Mantener el color del borde decorativo */
}

/* Consulta del usuario */
.about-2 h2,
.about-2 p {
  color: #ffffff !important; /* Asegurar que todo el texto sea claro */
}

.about-2 .checklist li:before {
  position: absolute;
  margin-right: 12px;
  margin-left: -45px;
  content: "\f375";
  font-family: "themefisher-font";
  opacity: 1;
  border-radius: 50%;
  padding: 2px 8px;
  font-size: 20px;
}

/*=================================================================
 Call To Action 1
==================================================================*/
.call-to-action {
  padding: 100px 0;
  background-size: cover;
  color: #fff;
}
.call-to-action h2 {
  line-height: 1.5;
}
.call-to-action p {
  color: #fff;
}
.call-to-action .btn-main {
  margin-top: 20px;
}

body.dark-mode .call-to-action {
  background-color: var(--dark-bg-alt); /* Fondo alterno oscuro */
  color: var(--dark-text);
}

/*=================================================================
 Call To Action 2
==================================================================*/
.call-to-action-2 {
  padding: 100px 0;
  background-image: url("../images/call-to-action/call-to-action-bg.webp");
  background-size: cover;
  color: #fff;
}
.call-to-action-2 h2 {
  line-height: 1.5;
}
.call-to-action-2 p {
  color: #fff;
}
.call-to-action-2 .btn-main {
  margin-top: 20px;
}

/*=================================================================
  Contact
  ==================================================================*/
.contact-us {
  padding: 100px 0 50px 0;
}

.contact-form {
  margin-bottom: 40px;
}
.contact-form .form-control {
  background-color: transparent;
  border: 1px solid #dedede;
  box-shadow: none;
  height: 45px !important;
  color: #0c0c0c;
  height: 38px;
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  border-radius: 0;
}
.contact-form input:hover,
.contact-form textarea:hover,
.contact-form #contact-submit:hover {
  border-color: #28ABE3;
}
.contact-form #contact-submit {
  border: none;
  padding: 15px 0;
  width: 100%;
  margin: 0;
  background: #28ABE3;
  color: #fff;
  border-radius: 0;
}
.contact-form textarea.form-control {
  padding: 10px;
  height: 120px !important;
  outline: none;
}

.contact-details .contact-short-info {
  margin-top: 15px;
}
.contact-details .contact-short-info li {
  margin-bottom: 6px;
}

.social-icon {
  margin-top: 20px;
}
.social-icon ul li {
  display: inline-block;
  margin-right: 10px;
}
.social-icon ul li a {
  display: block;
  height: 50px;
  width: 50px;
  border-radius: 50%;
  border: 1px solid #dedede;
  text-align: center;
}
.social-icon ul li a:hover {
  background: #28ABE3;
  color: #fff;
  border: 1px solid #28ABE3;
}
.social-icon ul li a:hover i {
  color: #fff;
}
.social-icon ul li a i {
  color: #55606a;
  display: inline-block;
  font-size: 20px;
  line-height: 50px;
  margin: 0;
}

.google-map {
  position: relative;
}
.google-map .map_canvas {
  height: 400px;
  color: white;
}

/*=================================================================
  Item counter section
==================================================================*/
.counters-item {
  padding-bottom: 30px;
  color: #444;
  position: relative;
}
.counters-item.kill-border:before {
  background: none;
}
.counters-item:before {
  background: #e5e5e5;
  content: "";
  margin-top: -27.5px;
  height: 55px;
  width: 1px;
  position: absolute;
  right: -15px;
  top: 50%;
}
.counters-item > div {
  margin: 6px 0;
}
.counters-item span {
  display: inline;
  font-size: 35px;
  font-weight: 700;
  line-height: 50px;
}
.counters-item i {
  font-size: 40px;
  display: inline-block;
  color: #28ABE3;
}
.counters-item h3 {
  font-size: 18px;
  margin: 0;
  color: #666;
}

/*=================================================================
  Pricing section
==================================================================*/
.pricing-table {
  padding: 100px 0;
  padding-bottom: 70px;
  background: url("../images/pricing-bg.webp");
  background-size: cover;
  background-position: center;
  position: relative;
}
.pricing-table .title p {
  color: #fff;
}
.pricing-table:before {
  background: rgba(0, 0, 0, 0.62);
  position: absolute;
  z-index: 999;
  content: "";
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.pricing-table .container {
  position: relative;
  z-index: 999;
}
.pricing-table .pricing-item {
  padding: 40px 55px 65px;
  background: #fff;
  margin-bottom: 30px;
}
.pricing-table .pricing-item a.btn-main {
  text-transform: uppercase;
  margin-top: 20px;
}
.pricing-table .pricing-item li {
  font-weight: 400;
  padding: 10px 0;
  color: #666;
}
.pricing-table .pricing-item li i {
  margin-right: 6px;
}
.pricing-table .price-title {
  padding: 30px 0 20px;
}
.pricing-table .price-title > h3 {
  font-weight: 700;
  margin: 0 0 5px;
  font-size: 15px;
  text-transform: uppercase;
}
.pricing-table .price-title > p {
  font-size: 14px;
  font-weight: 400;
  line-height: 18px;
  margin-top: 5px;
}
.pricing-table .price-title .value {
  color: #28ABE3;
  font-size: 50px;
  padding: 10px 0;
}

/*=================================================================
  Portfolio section
==================================================================*/
.portfolio-filter {
  margin-bottom: 40px;
  text-align: center;
}
.portfolio-filter button {
  cursor: pointer;
  display: inline-block;
  font-size: 14px;
  padding: 8px 20px;
  text-transform: uppercase;
  background: #28ABE3;
  border: none;
  color: #fff;
  outline: none;
  margin: 6px 4px;
}
.portfolio-filter button.active {
  background: #28ABE3;
  color: #fff;
  border-radius: 50px;
}

.portfolio-block {
  position: relative;
  margin-bottom: 30px;
}
.portfolio-block:before {
  transition: all 0.3s ease-in-out;
  background: rgba(0, 0, 0, 0.55);
  opacity: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  position: absolute;
  content: "";
}
.portfolio-block:hover:before {
  opacity: 1;
}
.portfolio-block:hover .caption h4 {
  top: 45%;
}
.portfolio-block:hover .caption {
  opacity: 1;
  top: 55%;
}
.portfolio-block .caption {
  position: absolute;
  top: 50%;
  left: 50%;
  opacity: 0;
  transform: translate(-50%, -50%);
  z-index: 9;
  transition: all 0.3s ease-in-out;
  text-align: center;
}
.portfolio-block .caption h4 {
  font-size: 16px;
}
.portfolio-block .caption h4 a {
  color: #fff;
}
.portfolio-block .caption .search-icon {
  background: #28ABE3;
  color: #fff;
  display: inline-block;
  height: 45px;
  width: 45px;
  font-size: 17px;
  border-radius: 30px;
  margin-bottom: 20px;
  text-align: center;
  line-height: 47px;
}

/*=================================================================
  Services section
==================================================================*/

/* Estilos para la sección de servicios #1a1a1a;*/
.servicios-section {
  position: relative;
  background: url("../images/cliente-bg3.webp") no-repeat center center;
  background-size: cover;
  min-height: 80vh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 60px 0;
}

/* Ajustar el espaciado del título del servicio */
.servicios-section .title {
  margin-bottom: 20px; /* Añadido para controlar específicamente el espacio después del título */
}

/* Estilos para la sección de servicios */
.servicios-section .title h2 {
  color: #ffffff !important; /* Forzar color blanco siempre */
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* Opcional: añadir sombra para mejor legibilidad */
}

/* Asegurar que el color blanco se mantiene en modo claro */
body.light-mode .servicios-section .title h2 {
  color: #ffffff !important;
}

/* Asegurar que el color blanco se mantiene en modo oscuro */
body.dark-mode .servicios-section .title h2 {
  color: #ffffff !important;
}

.video-circles-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.video-circle {
  width: 230px; /* Tamaño base reducido un 25% */
  height: 230px;
  position: relative;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid rgba(255, 255, 255, 0.2);
  transition: transform 0.3s ease;
}

.video-circle video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-circle:hover {
  transform: scale(1.05);
  border-color: rgba(255, 255, 255, 0.5);
}

.circle-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px;
  background: rgba(0, 0, 0, 0.3);
  color: white;
  text-align: center;
  transform: translateY(100%);
  transition: transform 0.3s ease;
}

.video-circle:hover .circle-content {
  transform: translateY(0);
}

.circle-content h3 {
  font-size: 18px;
  margin-bottom: 10px;
  color: #fff;
}

.circle-content p {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
}

/* Responsive */
@media (max-width: 1200px) {
  .video-circle {
    width: 250px;
    height: 250px;
  }
}

@media (max-width: 768px) {
  .video-circle {
    width: 220px;
    height: 220px;
  }
  
  .video-circles-container {
    gap: 20px;
  }
}

@media (max-width: 480px) {
  .video-circle {
    width: 180px;
    height: 180px;
  }
  
  .video-circles-container {
    gap: 15px;
  }
  
  .circle-content {
    padding: 15px;
  }
  
  .circle-content h3 {
    font-size: 16px;
  }
  
  .circle-content p {
    font-size: 12px;
  }
}


/* Ajuste del contenedor de videos para el nuevo layout */
.video-circles-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .circle-content-bottom {
    max-width: 100%;
    padding: 10px;
  }
}

/* ...existing code... */

.video-circle-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0px;
}

.circle-content-bottom {
  text-align: center;
  margin-top: 20px;
  padding: 15px;
  width: 100%;
  max-width: 300px;
}

.circle-content-bottom h3 {
  font-size: 25px;
  margin-bottom: 10px;
  color: #fff;
}

.circle-content-bottom p {
  font-size: 19px;
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
}

/* Ajuste del contenedor de videos para el nuevo layout */
.video-circles-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  padding: 20px;
  max-width: 1600px;
  margin: 0 auto;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .circle-content-bottom {
    max-width: 100%;
    padding: 10px;
  }
}

.services {
  padding: 100px 0 130px;
}
.services .service-block.color-bg {
  background: #28ABE3;
  color: #fff;
}
.services .service-block.color-bg i, .services .service-block.color-bg h3, .services .service-block.color-bg p {
  color: #fff;
}
.services .service-block .service-icon {
  margin-bottom: 30px;
}
.services .service-block i {
  font-size: 75px;
  color: #28ABE3;
}
.services .service-block h3 {
  color: #333;
  font-size: 18px;
  text-transform: uppercase;
  font-weight: bold;
}
.services .service-block p {
  font-size: 14px;
  color: #666;
}

body.dark-mode .services {
  background-color: var(--dark-bg); /* Fondo principal oscuro */
  color: var(--dark-text);
}

body.dark-mode .services:nth-child(even) {
  background-color: var(--dark-bg-alt); /* Fondo alterno oscuro */
}

/* Estilos para los enlaces de servicio */
.service-link {
  text-decoration: none;
  color: inherit;
  display: block;
  transition: all 0.3s ease;
}

.service-link:hover {
  transform: translateY(-5px);
}


/*=================================================================
  Services section 2
==================================================================*/
.service-2 .service-item {
  border: 1px solid #eee;
  margin-bottom: 30px;
  padding: 50px 20px;
  transition: all 0.3s ease 0s;
}
.service-2 .service-item:hover {
  box-shadow: 0 5px 65px 0 rgba(0, 0, 0, 0.15);
  -webkit-box-shadow: 0 5px 65px 0 rgba(0, 0, 0, 0.15);
}
.service-2 .service-item:hover i {
  background: #fff;
  color: #28ABE3;
}
.service-2 .service-item i {
  font-size: 30px;
  display: inline-block;
  background: #28ABE3 none repeat scroll 0 0;
  border-radius: 30px;
  box-shadow: 0 5px 6px 0 rgba(0, 0, 0, 0.1);
  color: #fff;
  height: 55px;
  line-height: 55px;
  margin-bottom: 20px;
  width: 55px;
  transition: all 0.3s ease 0s;
}

/*=================================================================
  Our skills
==================================================================*/
.team-skills .progress-block {
  margin-top: 40px;
}
.team-skills .progress-block span {
  display: inline-block;
  margin-bottom: 5px;
  font-size: 14px;
}
.team-skills .progress-block .progress {
  box-shadow: none;
  border-radius: 0;
  height: 10px;
}
.team-skills .progress-block .progress .progress-bar {
  background: #28ABE3;
  box-shadow: none;
}

.clients-logo-slider {
  margin-top: 50px;
}

/*=================================================================
  Step section
==================================================================*/
.development-steps .step {
  padding: 80px 20px;
}
.development-steps .step h4 {
  font-size: 20px;
  font-weight: 600;
}
.development-steps .step h4 i {
  font-size: 72px;
  font-weight: 500;
  margin-right: 10px;
}
.development-steps .step p {
  color: #cccccc;
  font-size: 14px;
  line-height: 22px;
}
.development-steps .step-1 {
  background-color: #f2f6f8;
}
.development-steps .step-1 h4 {
  color: #212121;
}
.development-steps .step-1 p {
  color: #838383;
}
.development-steps .step-2 {
  background-color: #28ABE3;
}
.development-steps .step-2 h4, .development-steps .step-2 p {
  color: #fff;
}
.development-steps .step-3 {
  background: #198dbf;
}
.development-steps .step-3 h4, .development-steps .step-3 p {
  color: #fff;
}
.development-steps .step-4 {
  background: #167da9;
}
.development-steps .step-4 h4, .development-steps .step-4 p {
  color: #fff;
}

/*=================================================================
  Our Team
==================================================================*/
.team {
  padding: 100px 0;
  padding-bottom: 70px;
  background: #F6F6F6;
}
.team .team-member {
  background: #fff;
  margin-bottom: 30px;
}
.team .team-member .member-content {
  padding: 25px 0;
}
.team .team-member .member-content h3 {
  font-size: 20px;
  margin: 0 0 5px;
  color: #333;
}
.team .team-member .member-content span {
  font-size: 14px;
  color: #555;
}
.team .team-member .member-content p {
  color: #777;
  margin-top: 10px;
  padding: 0 15px;
}
.team .member-photo {
  overflow: hidden;
  position: relative;
}
.team .member-photo:hover img {
  transform: scale(1.1);
}
.team .member-photo img {
  transition: all 0.6s ease 0s;
}
.team .member-photo .mask {
  background: rgba(40, 171, 227, 0.7);
  position: absolute;
  width: 100%;
  bottom: 0;
  top: auto;
  opacity: 0;
  filter: alpha(opacity=0);
  left: 0;
  right: 0;
  cursor: pointer;
  padding: 0;
  height: 80px;
  transform: translateY(100%);
  transition: all 0.3s ease;
}
.team .member-photo .mask ul {
  text-align: center;
  position: relative;
  margin-top: 22px;
}
.team .member-photo .mask ul li {
  display: inline-block;
  margin-right: 7px;
}
.team .member-photo .mask ul li a {
  border: 1px solid #ddd;
  border-radius: 4px;
  color: #fff;
  display: block;
  font-size: 20px;
  height: 35px;
  line-height: 35px;
  text-align: center;
  width: 35px;
}
.team .member-photo .mask ul li a::hover {
  background-color: #6cb670;
  border: 1px solid transparent;
}
.team .member-photo:hover .mask {
  opacity: 1;
  filter: alpha(opacity=100);
  transform: translateY(0%);
}

/*=================================================================
  Testimonial section
==================================================================*/
.testimonial {
  padding: 100px 0;
  background: #fff;
}

.testimonial-slider {
  padding: 0 20px;
}

.testimonial .item {
  padding: 20px;
}

.testimonial .row.align-items-center {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.testimonial .client-thumb {
    width: 150px;
    height: 150px;
    margin: 0;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid #28ABE3;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.testimonial .client-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Esto hace que la imagen cubra todo el espacio sin distorsionarse */
  display: block; /* Elimina espacios extra */
}

/* Opcional: Añadir efectos hover */
.testimonial .client-thumb:hover {
  transform: scale(1.05);
  transition: transform 0.3s ease;
  border-color: #1e90ff;
}

/* Modo oscuro */
body.dark-mode .testimonial .client-thumb {
  border-color: #1e90ff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.testimonial .client-details {
    padding: 20px;
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
}

.testimonial .client-details p {
  font-size: 18px;
  line-height: 1.6;
  color: #333;
  margin-bottom: 20px;
}

.testimonial .client-meta {
    margin-top: 15px;
    text-align: center;
}

/* Ajustes de las columnas */
.testimonial .col-md-4 {
    flex: 0 0 auto;
    width: auto;
    padding-right: 20px;
}

.testimonial .col-md-8 {
    flex: 1;
    display: flex;
    justify-content: center;
}

.testimonial .client-meta h3 {
  font-size: 20px;
  margin-bottom: 5px;
  color: #28ABE3;
}

.testimonial .client-meta span {
  font-size: 14px;
  color: #666;
}

/* Modo oscuro */
body.dark-mode .testimonial {
  background: #1a1a1a;
}

body.dark-mode .testimonial .client-details p {
  color: #fff;
}

body.dark-mode .testimonial .client-meta span {
  color: #ccc;
}

/*=================================================================
  Latest Posts
==================================================================*/
.blog {
  padding-bottom: 60px;
  padding-top: 80px;
  background: #F6F6F6;
}

body.dark-mode .blog {
  background: var(--dark-bg); /* Fondo oscuro */
  color: var(--dark-text); /* Texto blanco */
}

.posts {
  padding-bottom: 40px;
}

.post-item {
  background: #fff;
  margin-bottom: 30px;
}

body.dark-mode .post-item {
  background: var(--dark-bg); /* Fondo oscuro para los posts */
  color: var(--dark-text); /* Texto blanco */
}

.post-item .content {
  padding: 20px;
}
.post-item .content h3 a {
  color: #000;
}

body.dark-mode .post-item .content h3 a {
  color: var(--dark-highlight); /* Azul claro */
}

.post-item .content p {
  color: #757575;
  margin: 10px 0;
}

body.dark-mode .post-item .content p {
  color: var(--dark-secondary-text); /* Gris claro */
}

.post-item .content .btn-main {
  padding: 12px 25px;
  margin: 15px 0;
}

body.dark-mode .post-item .content .btn-main {
  background: #1e90ff; /* Azul claro */
  color: #fff; /* Texto blanco */
}

/* 8.2.1 Blog Details */
.blog-details h3 {
  font-size: 30px;
  color: #000;
  margin-bottom: 10px;
}

/* 8.2.2 Post Content */
.post-content ul {
  margin-bottom: 20px;
}
.post-content ul li {
  color: #aaa;
}
.post-content ul li a {
  color: #aaa;
}
.post-content p {
  margin-bottom: 30px;
}
.post-content blockquote {
  border-left: 2px solid #28ABE3;
  padding: 40px 35px;
  margin-bottom: 30px;
  background: rgb(238, 238, 238);
}
.post-content-share {
  margin-bottom: 100px;
}
.post-content-share li a {
  height: 45px;
  width: 45px;
  line-height: 45px;
  border: 1px solid #ddd;
  text-align: center;
  background: #fff;
  transition: 0.3s ease;
  margin-right: 10px;
  color: #000;
  display: inline-block;
}
.post-content-share li a:hover {
  background: #28ABE3;
  border-color: #28ABE3;
  color: #fff;
}

/* 8.2.3 Comment List */
.comment-list {
  padding-left: 0;
  margin-bottom: 70px;
}
.comment-list-item {
  padding: 25px 0;
  position: relative;
  display: flex;
  border-bottom: 1px solid #ddd;
}
.comment-list-item:last-child {
  border: 0;
}
.comment-list-item-image {
  margin-right: 20px;
}
.comment-list-item-content h5 {
  color: #000;
  margin-bottom: 5px;
}
.comment-list-item-content h6 {
  color: #000;
  margin-bottom: 10px;
}
.comment-list-item-content p {
  margin-bottom: 5px;
}
.comment-list-item .comment-btn {
  position: absolute;
  top: 25px;
  right: 0;
  background: #fff;
  padding: 10px 30px;
  border: 1px solid #ddd;
  text-transform: capitalize;
  color: #000;
  font-size: 15px;
}
@media (max-width: 575px) {
  .comment-list-item .comment-btn {
    position: unset;
    margin-top: 15px;
    display: inline-block;
  }
}
.comment-list-item .comment-btn:hover {
  background: #28ABE3;
  color: #fff;
}

/* 8.2.4 Comment Form */
.comment-form {
  margin-top: 40px;
}
.comment-form .form-control {
  background-color: transparent;
  border: 1px solid #dedede;
  box-shadow: none;
  height: 45px !important;
  color: #0c0c0c;
  height: 38px;
  font-size: 14px;
  border-radius: 0;
  margin-bottom: 20px;
}
.comment-form textarea.form-control {
  height: 200px !important;
}
.comment-form .btn-primary {
  background: #28ABE3;
  border-radius: 0;
  padding: 10px 20px;
  border: 0;
}

/* 8.2.5 Widget Style */
.widget {
  margin-bottom: 30px;
}
.widget h2 {
  font-size: 24px;
  margin-bottom: 20px;
}
.widget-search {
  position: relative;
}
.widget-search .form-control {
  border: 1px solid #dedede;
  border-radius: 0;
  height: 50px;
}
.widget-search-btn {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 50px;
  background: #28ABE3;
  border: 0;
}
.widget-search-btn i {
  color: #fff;
}
.widget-categories-list {
  padding-left: 0px;
}
.widget-categories-list li {
  border-bottom: 1px solid #ddd;
}
.widget-categories-list li:last-child {
  border: 0;
}
.widget-categories-list li a {
  display: block;
  padding: 15px 0;
  color: #000;
  font-size: 15px;
  transition: 0.3s ease;
}
.widget-categories-list li a i {
  font-size: 10px;
  margin-right: 10px;
}
.widget-categories-list li a:hover {
  background: #28ABE3;
  color: #fff;
  padding-left: 20px;
}
.widget-post-list {
  padding-left: 0;
}
.widget-post-list-item {
  padding: 15px 0;
  display: flex;
}
.widget-post-image {
  margin-right: 10px;
  height: 90px;
  width: 130px;
  overflow: hidden;
}
.widget-post-image img {
  height: 90px;
  width: auto;
}
.widget-post-content h5 {
  font-size: 18px;
  margin-bottom: 10px;
  transition: 0.3s ease;
  color: #000;
}
.widget-post-content h5:hover {
  color: #28ABE3;
}

/*=================================================================
  Single Blog Page
==================================================================*/
#blog-banner {
  padding-bottom: 100px;
  padding-top: 150px;
}

#blog-page {
  margin: 0 0 40px;
}

.post-meta {
  font-size: 13px;
  margin: 20px 0 0;
  padding: 0 20px 10px;
}
.post-meta a {
  color: #28ABE3;
}
.post-meta > span {
  color: #666;
  border-right: 1px solid #dedede;
  display: inline-block;
  font-size: 13px;
  margin: 10px 10px 0 0;
  padding-right: 10px;
}
.post-meta > span:last-child {
  border-right: 0;
}
.post-meta > span i {
  margin-right: 5px;
}

.post-excerpt {
  padding: 0 20px;
  margin-bottom: 60px;
}
.post-excerpt h3 a {
  color: #000;
}
.post-excerpt blockquote {
  line-height: 22px;
  margin: 20px 0;
  font-size: 16px;
}

.single-blog {
  background-color: #fff;
  margin-bottom: 50px;
  padding: 20px;
}

.blog-subtitle {
  font-size: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #dedede;
  margin-bottom: 25px;
  text-transform: uppercase;
}

.next-prev {
  border-bottom: 1px solid #dedede;
  border-top: 1px solid #dedede;
  margin: 20px 0;
  padding: 25px 0;
}
.next-prev a {
  color: #000;
}
.next-prev a:hover {
  color: #28ABE3;
}
.next-prev .prev-post i {
  margin-right: 10px;
}
.next-prev .next-post i {
  margin-left: 10px;
}

.social-profile ul li {
  margin: 0 10px 0 0;
  display: inline-block;
}
.social-profile ul li a {
  color: #4e595f;
  display: block;
  font-size: 16px;
}
.social-profile ul li a i:hover {
  color: #28ABE3;
}

.comments-section {
  margin-top: 35px;
}

.author-about {
  margin-top: 40px;
}

.post-author {
  margin-right: 20px;
}

.post-author > img {
  border: 1px solid #dedede;
  max-width: 120px;
  padding: 5px;
  width: 100%;
}

.comment-list ul {
  margin-top: 20px;
}
.comment-list ul li {
  margin-bottom: 20px;
}

.comment-wrap {
  border: 1px solid #dedede;
  border-radius: 1px;
  margin-left: 20px;
  padding: 10px;
  position: relative;
}
.comment-wrap .author-avatar {
  margin-right: 10px;
}
.comment-wrap .media .media-heading {
  font-size: 14px;
  margin-bottom: 8px;
}
.comment-wrap .media .media-heading a {
  color: #28ABE3;
  font-size: 13px;
}
.comment-wrap .media .comment-meta {
  font-size: 12px;
  color: #888;
}
.comment-wrap .media p {
  margin-top: 15px;
}

.comment-reply-form {
  margin-top: 80px;
}
.comment-reply-form input, .comment-reply-form textarea {
  height: 35px;
  border-radius: 0;
  box-shadow: none;
}
.comment-reply-form input:focus, .comment-reply-form textarea:focus {
  box-shadow: none;
  border: 1px solid #28ABE3;
}
.comment-reply-form textarea, .comment-reply-form .btn-main {
  height: auto;
}

/*=================================================================
  Footer section
==================================================================*/
.top-footer {
  background-color: #000000;
  border-top: 1px solid #404040;
  padding: 100px 0 80px;
}
.top-footer h3 {
  font-size: 16px;
  line-height: 1.5;
  color: #fff;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 20px;
}
.top-footer p {
  font-size: 13px;
  line-height: 25px;
  color: #bdbdbd;
  font-weight: 300;
  letter-spacing: 1px;
  padding-right: 20px;
}
.top-footer li a {
  font-size: 13px;
  line-height: 30px;
  color: #bdbdbd;
  font-weight: 300;
  letter-spacing: 1px;
  text-transform: capitalize;
  transition: color 0.3s;
  font-family: "Source Sans Pro", sans-serif;
  display: block;
}
.top-footer li a:hover {
  color: #28ABE3;
}

.footer-bottom {
  text-align: center;
  background-color: #1b1b1b;
  border-top: 1px solid #2c2c2c;
  padding: 30px 0;
}
.footer-bottom h5 {
  font-size: 12px;
  line-height: 1;
  color: #888888;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-top: 7px;
  margin-bottom: 3px;
}
.footer-bottom h6 {
  font-size: 11px;
  line-height: 15px;
  color: #888888;
  font-weight: 400;
  text-transform: capitalize;
  letter-spacing: 2px;
  margin-bottom: 0;
}
.footer-bottom a {
  color: #28ABE3;
}

.page-404 {
  display: flex;
  align-items: center;
  height: 100vh;
}
.page-404 h1 {
  font-size: 200px;
}

/*============================================================
	For Small Desktop
==============================================================*/
@media (min-width: 700px) and (max-width: 1090px) {
  .counters-item:before {
    display: none;
  }
}
@media (min-width: 980px) and (max-width: 1150px) {
  /* parallax section */
  .parallax-section {
    background-position: center top !important;
  }
  /* about us */
  .feature-desc h3 {
    margin-top: 0;
  }
  /* our team */
  .team-mate {
    margin-bottom: 30px;
  }
  .mask ul {
    top: 85px;
  }
  .mask ul li {
    margin: 0 5px;
  }
  .team-mate > h4 {
    margin-bottom: 10px;
  }
  .team-mate img {
    margin: 0 auto;
  }
  .member-info ul li {
    margin-right: 10px;
  }
  /* testimonial */
  .client-info {
    width: 55%;
  }
  /* blog page */
  .tab-post-nav li a {
    padding: 15px 8px;
  }
  /* single blog page */
  .author-bio h5 {
    margin-left: 70px;
  }
}
/*============================================================
	Tablet (Portrait) Design for a width of 768px
==============================================================*/
@media (min-width: 768px) and (max-width: 979px) {
  .counters-item:before {
    display: none;
  }
  /* parallax section */
  .parallax-section {
    background-position: center top !important;
  }
  /* navigation */
  .navbar-inverse .navbar-nav li a {
    padding: 20px 10px;
  }
  /* about us */
  .wrap-about {
    margin: 0 0 75px;
  }
  .about-content {
    margin: 0 auto;
    width: 60%;
  }
  /* fun facts */
  #counter {
    padding-bottom: 50px;
  }
  .counters-item {
    margin-bottom: 30px;
  }
  /* our team */
  .team-mate {
    margin: 0 auto 30px;
    width: 280px;
  }
  /* our skills */
  .skill-chart {
    margin: 0 auto 40px;
    width: 300px;
  }
  .skill-chart {
    margin: 0 auto 40px;
    width: 90%;
  }
  .skill-chart > h3 {
    margin: 15px 0;
  }
  /* pricing table */
  .pricing {
    margin: 0 auto 30px;
    width: 300px;
  }
  /* testimonial */
  .client-info {
    width: 75%;
  }
  /* latest posts */
  .note {
    margin-bottom: 30px;
  }
  /* blog page */
  .tab-post-nav li a {
    padding: 10px;
  }
  /* singla blog page */
  .author-social {
    margin-left: 0;
  }
}
/*============================================================
	Mobile (Portrait) Design for a width of 320px
==============================================================*/
@media only screen and (max-width: 767px) {
  .counters-item:before {
    display: none;
  }
  .clients-logo-slider {
    text-align: center;
  }
  /* parallax section */
  .parallax-section {
    background-position: center top !important;
  }
  /* h1 font size home slider */
  h1 {
    font-size: 30px;
  }
  .wrap-about {
    margin: 0 auto 80px;
    width: 85%;
  }
  .feature-desc a {
    margin: 5px 5px 5px 0;
  }
  /* fun facts */
  /* services */
  #services .title {
    padding-bottom: 60px;
  }
  /* our skills */
  .skill-chart {
    margin: 0 auto 40px;
    width: 280px;
  }
  /* our team */
  .team-mate {
    margin: 0 auto 31px;
    width: 280px;
  }
  .team-mate img {
    margin: 0 auto;
  }
  .member-info ul {
    text-align: center;
    margin-bottom: 10px;
  }
  /* pricing table */
  .pricing {
    margin: 0 auto 20px;
    width: 280px;
  }
  /* portfolio */
  .portfolio-filter ul li a {
    margin: 0 10px 10px 0;
    padding: 5px 10px;
  }
  /* testimonials */
  .sub-title h3 {
    font-size: 18px;
  }
  .client-info {
    width: 100%;
  }
  /* latest posts */
  .note {
    margin-bottom: 30px;
  }
  .note .excerpt {
    padding: 0 20px 20px;
  }
  .all-post {
    margin: 20px 0 30px;
  }
  /* contact */
  .contact-info {
    margin: 0 0 30px;
  }
  #map-canvas {
    height: 250px;
  }
  /* footer */
  .social-icon ul li,
.social-icon ul li:first-child {
    margin: 15px;
  }
  .social-icon ul li a {
    width: 50px;
    height: 50px;
  }
  .social-icon ul li a i {
    font-size: 24px;
    line-height: 50px;
  }
  .blog-title h1 {
    font-size: 28px;
  }
  /* blog page */
  #blog-page {
    margin: 0;
  }
  #blog-posts {
    margin: 0 0 40px;
  }
  .post-excerpt h3 {
    font-size: 20px;
  }
  .post-pagination ul li {
    margin: 0 10px 10px 0;
  }
  .tab-post-nav li a {
    padding: 8px 5px;
  }
  /* single blog page */
  .author-social {
    margin-left: 0;
  }
  .author-avatar {
    margin-right: 10px;
  }
}
/*============================================================
	Mobile (Landscape) Design for a width of 480px
==============================================================*/
@media only screen and (min-width: 480px) and (max-width: 767px) {
  .title h2 {
    font-size: 32px;
  }
  .counter .counter-title h2 {
    font-size: 35px;
  }
  /* about us */
  .wrap-about {
    margin: 0 auto 75px;
    width: 70%;
  }
  /* our team */
  .team-mate {
    margin: 0 auto 30px;
    width: 280px;
  }
  .team-mate img {
    margin: 0 auto;
  }
  /* portfolio */
  .og-grid li {
    width: 245px;
  }
  /* skills */
  .skill-chart {
    margin: 0 auto 40px;
    width: 300px;
  }
  /* pricing table */
  .pricing {
    margin: 0 auto 30px;
    width: 350px;
  }
  /* testimonials */
  .client-info {
    width: 74%;
  }
  /* latest posts */
  .note {
    margin: 0 auto 30px;
    width: 75%;
  }
  /* contact */
  .contact-info {
    width: 100%;
  }
  /* blog page */
  .tab-post-nav li a {
    padding: 10px 15px;
  }
}
/* Centrar verticalmente los elementos del menú */
.navbar-nav {
  display: flex;
  align-items: center; /* Centra verticalmente todos los elementos */
}


/* Modo claro bla bla sombreado
.slider-container::before {
  left: 0;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0)); /* Sombreado oscuro a transparente */
/*}

.slider-container::after {
  right: 0;
  background: linear-gradient(to left, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0)); /* Sombreado oscuro a transparente */
/*}*/

/* Contenedor del slider */
.about-section .slider-container {
  max-width: 100%;
  overflow: hidden;
  border: none; /* Elimina el recuadro */
  padding: 0 40px; /* Ajusta el padding si es necesario */
}

/* Ajustes del slider */
/* Asegurar que el slider mantiene su estructura */
.about-slider {
  display: flex;
  margin: 0 -10px;
}

.about-slider.slick-initialized {
  visibility: visible; /* Mostrar cuando esté listo */
}

/* Ajustes de las cards */
.about-card {
  width: 400px;
  min-width: 300px;
  margin: 10px;
  display: inline-block;
  vertical-align: top;
}


/* Mejorar la visibilidad de las flechas de navegación */
.slick-prev,
.slick-next {
  width: 40px;
  height: 40px;
  z-index: 10;
  background: rgba(40, 171, 227, 0.8);
}

.slick-prev {
  left: -5px;
}

.slick-next {
  right: -5px;
}

/* Asegurar que el contenedor tenga scroll horizontal en móviles */
@media (max-width: 480px) {
  .about-section .slider-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}


.about-card:hover {
  transform: scale(1);
}

/* O si prefieres mover solo la primera card */
.about-card:first-child {
  margin-left: 2rem; /* Ajusta este valor según necesites */
}

/* También puedes usar padding en lugar de margin */
.about-card:first-child {
  padding-left: 0rem; /* Alternativa usando padding */
}

.card-image {
  width: 100%;
  height: auto;
  border-radius: 8px;
  margin-bottom: 15px;
}

.card-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}


/* Texto de la descripción de las Cartas | TEXTO DE LAS CARTAS | */
/* Modo claro */
.card-content {
  font-size: 14px;
  color: #000; /* Texto negro en modo claro */
  text-align: left;
}

/* Modo oscuro */
body.dark-mode .card-content {
  color: #c4c1c1; /* Texto gris claro en modo oscuro */
}

/* Flechas de navegación */
.slick-prev,
.slick-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: #28ABE3; /* Color del botón */
  border: none;
  width: 40px;
  height: 40px;
  z-index: 10;
  cursor: pointer;
  clip-path: polygon(100% 0, 0 50%, 100% 100%); /* Forma triangular */
}

.slick-prev {
  left: var(--arrow-horizontal-offset); /* Usa la variable para ajustar la posición */
  clip-path: polygon(100% 0, 0 50%, 100% 100%); /* Flecha hacia la izquierda */
}

.slick-next {
  right: var(--arrow-horizontal-offset); /* Usa la variable para ajustar la posición */
  clip-path: polygon(0 0, 100% 50%, 0 100%); /* Flecha hacia la derecha */
}

/* Hover en las flechas */
.slick-prev:hover,
.slick-next:hover {
  background: #1e90ff; /* Cambiar el color al pasar el mouse */
}

/* Efecto de transparencia en los costados del slider */
.slider-container::before,
.slider-container::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 200px; /* Ancho del área de transparencia */
  pointer-events: none; /* Permite interactuar con los elementos debajo */
  z-index: 1;
}

/* Modo claro bla bla sombreado
.slider-container::before {
  left: 0;
  background: linear-gradient(to right, rgba(31, 31, 31, 0.5), rgba(39, 39, 39, 0)); 
}

.slider-container::after {
  right: 0;
  background: linear-gradient(to left, rgba(34, 34, 34, 0.5), rgba(0, 0, 0, 0)); 
}
*/

/* Modo oscuro */
body.dark-mode .about-card {
  background: #1a1a1a;
  color: #fff;
  border: 1px solid #333;
}

/*
body.dark-mode .slider-container::before {
  background: linear-gradient(to right, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
}

body.dark-mode .slider-container::after {
  background: linear-gradient(to left, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
}*/

body.dark-mode .slick-prev,
body.dark-mode .slick-next {
  background: #1e90ff;
}


/* Asegurar que el slider ocupe todo el ancho */
.about-section .about-slider {
  width: 100%; /* Ocupa todo el ancho */
  margin: 0 auto; /* Centra el contenido */
}

/* Opcional: Ajustar el diseño de las tarjetas si es necesario */
.about-card {
  margin: 0 15px; /* Ajusta el margen entre tarjetas */
}


/* Modo claro bla bla sombreado
slider-container::before {
  left: 0;
  background: linear-gradient(to right, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
  filter: blur(10px);
}

.slider-container::after {
  right: 0;
  background: linear-gradient(to left, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
  filter: blur(10px);
}*/

.hero-slider {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background-color: var(--background-color); /* Variable para modo claro/oscuro */
  overflow-x: hidden;
  background: transparent; /* Eliminar el fondo negro del slider */
}

.hero-slider .video-bg {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translate(-50%, -50%);
  z-index: -1;
}

/* Ajustes específicos para iPhone 12 Pro */
@media only screen and (max-width: 390px) and (max-height: 844px) {
  .hero-slider {
    height: 100vh;
    width: 124%;
    overflow: hidden;
    margin-left: -30px;
    margin-right: 30px;
  }

  .hero-slider .video-bg {
    width: 100%;
    height: 100vh;
    object-fit: none;
    object-position: center;
    position: absolute;
    top: 0;
    left: 0;
    transform: none;
  }

  .slider-item {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .slider-item .container {
    padding: 0 0px;
    margin-top: 0px; /* Ajustar según necesites */
  }
}

body.light-mode .hero-slider {
  --background-color: #ffffff; /* Fondo claro */
}

body.dark-mode .hero-slider {
  --background-color: #000000; /* Fondo oscuro */
}

/* Ajustes específicos para iPad y tablets */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .hero-slider {
    height: auto !important; /* Eliminar altura fija */
    min-height: 100vh; /* Asegurar altura mínima */
  }

  .slider-item {
    height: auto !important; /* Eliminar altura fija */
    min-height: 100vh; /* Altura mínima */
    padding: 60px 0; /* Añadir padding vertical */
  }

  .slider-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5); /* Overlay más oscuro para mejor legibilidad */
  }

  .slider-text {
    width: 90%; /* Ajustar ancho del contenedor de texto */
    margin: 0 auto;
    padding: 20px;
  }

  /* Ajustar la barra de progreso */
  .phase-progress-bar {
    width: 90%;
    top: 20%; /* Mover más arriba */
    padding: 10px;
  }

  .progress-points {
    flex-wrap: wrap; /* Permitir que los puntos se envuelvan si es necesario */
    gap: 20px; /* Espacio entre puntos */
  }

  /* Ajustar el contenedor principal */
  #fases .container {
    padding-top: 120px; /* Espacio para la barra de progreso */
  }

  /* Ajustar el texto del encabezado */
  #fases h1 {
    font-size: 28px; /* Reducir tamaño de fuente */
    margin-bottom: 15px;
  }

  #fases h4 {
    font-size: 16px; /* Reducir tamaño de fuente */
    margin-bottom: 100px; /* Ajustar espacio */
  }

  /* Mejorar la legibilidad del texto */
  .slider-text p {
    font-size: 14px;
    line-height: 1.5;
  }

  /* Ajustar el fondo */
  .slider-item {
    background-position: center center;
    background-size: cover;
  }
}

/* Específicamente para iPad en orientación vertical */
@media only screen 
and (min-device-width: 768px) 
and (max-device-width: 1024px) 
and (orientation: portrait) {
  .slider-item {
    min-height: 120vh; /* Aumentar altura mínima */
  }

  .phase-progress-bar {
    top: 15%; /* Ajustar posición */
  }

  #fases .container {
    padding-top: 150px; /* Más espacio superior */
  }
}

/* Ajustes específicos para iPhone 12 Pro (390x844) */
@media only screen and (max-width: 390px) {
  .phase-progress-bar {
    top: 25%; /* Mover más arriba */
    width: 95%; /* Aumentar el ancho */
    padding: 10px;
    transform: translateX(-50%) scale(0.8); /* Reducir ligeramente el tamaño */
  }

  .progress-points {
    flex-wrap: wrap; /* Permitir que los puntos se envuelvan */
    gap: 15px 40px; /* Espacio entre puntos (vertical horizontal) */
    justify-content: center;
  }

  .point {
    transform: scale(0.9); /* Hacer los puntos ligeramente más pequeños */
  }

  .point-label {
    font-size: 10px; /* Reducir tamaño de fuente de las etiquetas */
    white-space: normal; /* Permitir saltos de línea */
    text-align: center;
    width: 80px; /* Ancho fijo para mejor control */
  }

  .slider-text {
    margin-top: 100px; /* Ajustar el espacio superior */
    width: 95%; /* Aumentar el ancho del texto */
    padding: 15px; /* Reducir el padding */
  }

  .slider-text h1 {
    font-size: 24px; /* Reducir tamaño del título */
    margin-bottom: 10px;
  }

  .slider-text h2 {
    font-size: 20px;
  }

  .slider-text p {
    font-size: 14px;
    line-height: 1.4;
  }

  .progress-container {
    transform: translateY(0); /* Resetear la transformación */
  }

  /* Ajustar el contenido del slider */
  .hero-slider .slider-item {
    height: 100vh;
    padding-top: 60px; /* Añadir espacio superior */
  }
}


.highlight {
  color: #28ABE3; /* Color celeste */
  font-weight: bold; /* Opcional: para mayor énfasis */
}

.highlight2 {
  color: #FFFFFF; /* Color celeste */
  background: #1e90ff;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-color: #fff;
  border-radius: 8px;
  font-weight: bold; /* Opcional: para mayor énfasis */
  padding: 2px 15px; /* Añadido padding horizontal para dar más espacio */
  margin: 0 -5px; /* Margen negativo para compensar el padding */
  display: inline-block; /* Asegura que el fondo se ajuste al contenido */
}

.highlight3 {
  color: #fff;                    /* Color de texto blanco */
  background: rgba(0, 0, 0, 0.7); /* Fondo negro semi transparente */
  border-radius: 15px;           /* Bordes más redondeados */
  font-weight: normal;           /* Peso de fuente normal */
  padding: 15px 30px;           /* Más padding para mejor espaciado */
  display: inline-block;         /* Permite que el fondo se ajuste al contenido */
  margin: 10px 0;               /* Margen vertical */
  backdrop-filter: blur(2px);    /* Efecto de desenfoque detrás del texto */
  width: 80%;                    /* Ancho del contenedor */
  max-width: 1200px;            /* Ancho máximo */
  text-align: center;           /* Centrar el texto */
}

.promo-video2 .border {
  margin: 10px 0 0 auto; /* Alinea la línea a la derecha */
  width: 20%; /* Ajusta el ancho según sea necesario */
  border-top: 2px solid #28ABE3; /* Color y estilo de la línea */
}

.service-link {
  text-decoration: none; /* Elimina el subrayado del enlace */
  color: inherit; /* Mantiene el color original del texto */
}

.slider-text {
  background: rgba(0, 0, 0, 0.6); /* Fondo negro semitransparente */
  padding: 20px; /* Espaciado interno */
  border-radius: 8px; /* Bordes redondeados */
  color: white; /* Asegura que el texto sea blanco */
  display: inline-block; /* Ajusta el tamaño al contenido */
  max-width: 80%; /* Limita el ancho máximo */
  margin: 0 auto; /* Centra el recuadro */
}

/* Estilos para la sección del cliente */
.cliente-section {
  position: relative;
  background: url('../images/cliente2_bg.webp') no-repeat center center;
  background-size: cover;
  min-height: 100vh;
  padding: 4rem 0; /* Cambiado el padding */
  color: #fff;
  overflow: hidden;
  /* Añadir estas propiedades */
  max-width: 1920px; /* O el ancho máximo que prefieras */
  margin: 0 auto;
  box-sizing: border-box;
}


.cliente-header {
  text-align: center;
  margin-bottom: 4rem;
}

.cliente-header h1 {
  font-size: 3.5rem;
  margin-bottom: 1rem;
  color: #fff;
}

.cliente-header p {
  font-size: 1.25rem; /* Aumentado de 1.2rem */
  color: #fff;
  opacity: 0.9;
}

/* Modificar el contenedor principal */
.cliente-content {
  max-width: 1350px;
  width: 100%;
  margin: 0 auto;
  padding: 0 100px; /* Padding fijo */
  box-sizing: border-box;
  position: relative;
}

.content-wrapper {
  display: none;
  opacity: 0;
  transition: opacity 0.3s;
}

.content-wrapper.active {
  display: block;
  opacity: 1;
  text-align: left; /* Alinear texto a la izquierda */
}

.content-wrapper h2 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  text-transform: uppercase;
  color: #fff;
}

.content-wrapper p {
  font-size: 1.15rem; /* Aumentado de 1.1rem */
  line-height: 1.6;
  margin-bottom: 2rem;
  color: #fff;
  min-height: 75px; /* Ajusta este valor según necesites */
  display: flex;
  flex-direction: column;
}


/* Estilo base del cliente-nav */


/* Ajustar la navegación */
.cliente-nav {
  position: absolute;
  left: 46%; /* Centrar horizontalmente */
  transform: translateX(-650px) translateY(-18%); /* Ajustar según necesites */
  top: 55%;
  display: flex;
  flex-direction: column;
  gap: 40px;
  z-index: 100;
}

/* Añadir media queries para manejar pantallas más pequeñas */
/* Media query para 1920x1080 */
@media (max-width: 1920px) and (max-height: 1080px) {
  .cliente-section {
    margin: 0 auto;
  }
  
  .cliente-nav {
    transform: translateX(-500px) translateY(-20%);
    top: 60%;
  }
}

/* Media query específico para 1920x1200 */
@media (max-width: 1920px) and (min-height: 1081px) and (max-height: 1200px) {
  .cliente-section {
    margin: 0 auto;
  }
  
  .cliente-nav {
    transform: translateX(-500px) translateY(-150%); /* Valor más extremo */
    position: absolute;
    top: 50%; /* Ajustar posición base */
  }
}

/* Media query específico para 1920x1200 */
@media (max-width: 2560px) and (min-height: 1081px) and (max-height: 1600px) {
  .cliente-section {
    margin: 0 auto;
  }
  
  .cliente-nav {
    transform: translateX(-500px) translateY(-150%); /* Valor más extremo */
    position: absolute;
    top: 50%; /* Ajustar posición base */
  }
}

/* Media query específico para 1920x1200 */
@media (max-width: 2560px) and (min-height: 1080px) and (max-height: 1080px) {
  .cliente-section {
    margin: 0 auto;
  }
  
  .cliente-nav {
    transform: translateX(-500px) translateY(-150%); /* Valor más extremo */
    position: absolute;
    top: 73%; /* Ajustar posición base */
  }
}

/* Media query específico para 1920x1200 */
@media (max-width: 1920px) and (min-height: 1081px) and (max-height: 1080px) {
  .cliente-section {
    margin: 0 auto;
  }
  
  .cliente-nav {
    transform: translateX(-500px) translateY(-150%); /* Valor más extremo */
    position: absolute;
    top: 50%; /* Ajustar posición base */
  }
}

@media (max-width: 3840px) {
  .cliente-nav {
    transform: translateX(-500px) translateY(-170%);
  }
}

@media (max-width: 3440px) {
  .cliente-nav {
    transform: translateX(-500px) translateY(-90%);
  }
}

@media (max-width: 2880px) {
  .cliente-nav {
    transform: translateX(-500px) translateY(-35%);
  }
}

@media (max-width: 2560px) {
  .cliente-nav {
    transform: translateX(-500px) translateY(-85%);
  }
}

@media (max-width: 2048px) {
  .cliente-nav {
    transform: translateX(-500px) translateY(-98%);
  }
}

@media (max-width: 1921px) {
  .cliente-nav {
    transform: translateX(-500px) translateY(-42%);
  }
}



@media (max-width: 1440px) {
  .cliente-nav {
    transform: translateX(-500px) translateY(-20%);
    top: 50%
  }
}

@media (max-width: 1200px) {
  .media-container {
    min-width: auto;
  }
  
  .cliente-nav {
    transform: translateX(-450px) translateY(-18%);
  }
}



/* Ajustar el contenedor del video */
.media-container {
  position: relative;
  display: flex;
  margin: 2rem auto;
  width: 100%;
  max-width: 1000px; /* Ancho máximo fijo */
  min-width: 800px; /* Ancho mínimo fijo */
  padding: 0 80px;
  z-index: 0;
  box-sizing: border-box;
}

/* Ajuste del video */
.content-video {
  width: 100%;
  height: 500px;
  object-fit: cover;
  border-radius: 8px;
  border: 2px solid #4a90e2;
}

.content-video:hover {
  border-color: #93c5fd; /* Color celeste más claro al hover */
  box-shadow: 
    0 0 15px rgba(74, 144, 226, 0.7),     /* Glow interno azul más intenso */
    0 0 25px rgba(147, 112, 219, 0.5),     /* Glow medio violeta más intenso */
    0 0 35px rgba(255, 255, 255, 0.4);     /* Glow externo blanco */
  transition: all 0.3s ease;
}

/* Ajuste para la imagen a la derecha */
.content-image {
  width: 80%; /* Ajusta este valor según necesites */
  /* o */
  max-width: 450px; /* O define un tamaño máximo específico */
  height: auto;
  object-fit: contain;
  border-radius: 8px;
  transform: translateX(-70px) translateY(20px); /* Ajusta estos valores según necesites */
  z-index: 100;
}


.nav-btn {
  width: 60px;
  height: 60px;
  background: transparent;
  border: 2px solid transparent;
  border-radius: 4px;
  padding: 0;
  cursor: pointer;
  transition: all 0.3s ease;
}

.nav-btn img {
  width: 100%;
  height: 100%;
  align-items: center;
  object-fit: contain;
}

.nav-btn.active {
    border-color: #28ABE3;
    box-shadow: 
        0 0 10px rgba(40, 171, 227, 0.8),    /* Glow cercano más intenso */
        0 0 20px rgba(40, 171, 227, 0.6),    /* Glow medio más intenso */
        0 0 30px rgba(40, 171, 227, 0.4),    /* Glow lejano más intenso */
        0 0 50px rgba(40, 171, 227, 0.2);    /* Glow extra para más profundidad */
    filter: brightness(1.4);                  /* Aumentado el brillo */
    border-width: 3px;                        /* Borde más grueso */
}

/* Efecto hover suave */
.nav-btn:hover {
    border-color: rgba(40, 171, 227, 0.8);
    box-shadow: 
        0 0 15px rgba(40, 171, 227, 0.4),
        0 0 25px rgba(40, 171, 227, 0.3);
}

.nav-text {
  color: #fff;
  font-size: 0.80rem;
  white-space: nowrap;
  text-transform: uppercase;
  display: block;
  width: 100px; /* Ancho fijo para el contenedor del texto */
  text-align: center; /* Centra el texto horizontalmente */
  font-weight: bold;
  margin-top: 5px;
  position: absolute; /* Posicionamiento absoluto */
  left: 50%; /* Centrar horizontalmente */
  transform: translateX(-50%); /* Ajuste fino del centrado */
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  position: relative; /* Para el posicionamiento del texto */
  width: 100%; /* Asegura que el contenedor ocupe todo el ancho disponible */
}

/* Botón de Aprende Más */
.learn-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: transparent;
  color: #fff;
  border: 2px solid #28ABE3;
  padding: 0.8rem 2rem;
  border-radius: 4px;
  font-size: 1.15rem; /* Aumentado de 1.1rem */
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.learn-more-btn:hover {
  background: #28ABE3;
  color: #fff;
}

/* Eliminar variaciones de modo oscuro/claro */
body.dark-mode .cliente-section,
body.light-mode .cliente-section {
  color: #fff;
}

body.dark-mode .cliente-header h1,
body-dark-mode .cliente-header p,
body-dark-mode .content-wrapper h2,
body-dark-mode .content-wrapper p,
body-light-mode .cliente-header h1,
body-light-mode .cliente-header p,
body-light-mode .content-wrapper h2,
body-light-mode .content-wrapper p {
  color: #fff;
}

.btn2 {
  display: inline-block;
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
  transform: translateY(-120%);
  border-radius: 40px;
  padding: 12px 40px;
  transition: all 0.3s ease;
}

.btn2-main {
  background: transparent;
  border: 2px solid #28ABE3;
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.btn2-main:hover {
  background: #28ABE3;
  color: #fff;
}

/* Modo oscuro */
body.dark-mode .btn2-main {
  background: transparent;
  border: 2px solid #28ABE3;
  color: #fff;
}

body.dark-mode .btn2-main:hover {
  background: #28ABE3;
  color: #fff;
}

/* BOTONES DEL SLIDER - 4 BOTONES EN CUADRO 2x2 */

.button-triangle {
  display: grid;
  grid-template-columns: repeat(2, auto); /* dos columnas */
  grid-template-rows: repeat(2, auto);    /* dos filas   */
  justify-content: center;                /* centra el grid */
  align-items: center;
  gap: 20px 60px;                          /* espacio vertical y horizontal */
  position: relative;
  padding: 10px 0;
}

.button-triangle a {
  display: inline-block;
  text-align: center;
  padding: 10px 20px;
  font-size: 16px;
  color: white;
  text-decoration: none;
  transition: all 0.3s ease;
  border-radius: 40px;
  min-width: 140px;
}

.button-triangle a:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* Botón FACEBOOK */
.button-triangle a:nth-child(1) {
  background-color: #007bff;
  border: 1px solid #007bff;
}
.button-triangle a:nth-child(1):hover {
  background-color: #0056b3;
  border-color: #0056b3;
}

/* Botón DISCORD */
.button-triangle a:nth-child(2) {
  background-color: #7289da;
  border: 1px solid #7289da;
}
.button-triangle a:nth-child(2):hover {
  background-color: #5b73c4;
  border-color: #5b73c4;
}

/* Botón MÁS INFO */
.button-triangle a:nth-child(3) {
  background: var(--btn3-color);
  border: 1px solid var(--btn3-color);
}
.button-triangle a:nth-child(3):hover {
  background: var(--btn3-hover);
  border-color: var(--btn3-hover);
}

/* Botón WIKI OFICIAL */
.button-triangle a:nth-child(4) {
  background: var(--btn3-color);
  border: 1px solid var(--btn3-color);
}
.button-triangle a:nth-child(4):hover {
  background: var(--btn3-hover);
  border-color: var(--btn3-hover);
}

/* Responsivo: en móviles se apilan en 1 columna */
@media (max-width: 768px) {
  .button-triangle {
    grid-template-columns: 1fr; /* una sola columna */
    gap: 10px;
  }
  
  .button-triangle a {
    width: 200px;
  }
}

/* Colores naranjas globales */
:root {
  --btn3-color: #ff6b00;
  --btn3-hover: #ff8533;
}

/* Estilo base botón naranja */
.btn3 {
  display: inline-block;
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-radius: 40px;
  padding: 12px 40px;
  transition: all 0.3s ease;
}

.btn3-main {
  background: var(--btn3-color) !important;
  border: 1px solid var(--btn3-color) !important;
  color: #fff !important;
}

.btn3-main:hover {
  background: var(--btn3-hover) !important;
  border-color: var(--btn3-hover) !important;
  color: #fff !important;
}

/* Modo oscuro, mantener naranja */
body.dark-mode .btn3-main,
.dark-mode .btn3-main,
[data-theme="dark"] .btn3-main {
  background: var(--btn3-color) !important;
  border: 1px solid var(--btn3-color) !important;
  color: #fff !important;
}

body.dark-mode .btn3-main:hover,
.dark-mode .btn3-main:hover,
[data-theme="dark"] .btn3-main:hover {
  background: var(--btn3-hover) !important;
  border-color: var(--btn3-hover) !important;
  color: #fff !important;
}


/* Estilos necesarios */
.mnt-80 {
  margin-top: -80px;
}

.rev_slider_wrapper {
  position: relative;
  z-index: 0;
  width: 100%;
}

/* Estilos para el panel flotante */
.floating-panel {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
}

.floating-panel img {
  max-width: 15%; /* Reducido de 25% a 15% */
  height: auto;
  object-fit: contain;
  margin: 0 auto;
}

/* Plain Video */
.nk-plain-video {
  position: relative;
  display: block;
  width: 100%;
  padding-top: 56.25%;
  overflow: hidden;
  cursor: pointer;
  background-position: 50% 50%;
  background-size: cover;
}

.nk-plain-video > iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.nk-plain-video > .nk-video-plain-toggle {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  z-index: 0;
}


/* Ajustes responsivos */
@media (max-width: 991px) {
  .floating-panel img {
    max-width: 35%; /* Reducido de 90% a 35% */
  }
}

@media (max-width: 767px) {
  .floating-panel img {
    max-width: 45%; /* Reducido de 95% a 45% */
  }
}

/* Video Blocks CSS */
.video-overlay-container {
  position: relative;
  min-height: 500px; /* Ajusta según necesites */
  width: 100%;
  overflow: hidden;
}

.bg-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.content-overlay {
  position: relative;
  z-index: 2;
  padding: 80px 0;
  color: white;
}

.op-3 {
  opacity: 0.3;
}

.bg-dark-1 {
  background-color: rgba(0, 0, 0, 0.7);
}

.nk-box {
  position: relative;
  overflow: hidden;
}

.nk-title {
  position: relative;
  margin-bottom: 30px;
}

/* Responsive adjustments */
@media (max-width: 991px) {
  .bg-video {
      min-height: 300px;
  }
}

@media (max-width: 767px) {
  .bg-video {
      min-height: 200px;
  }
}

.nk-gap,
.nk-gap-1,
.nk-gap-2,
.nk-gap-3,
.nk-gap-4,
.nk-gap-5,
.nk-gap-6 {
    display: block;
    height: 20px;
}

.nk-gap::after, 
.nk-gap::before,
.nk-gap-1::after,
.nk-gap-1::before,
.nk-gap-2::after,
.nk-gap-2::before,
.nk-gap-3::after,
.nk-gap-3::before,
.nk-gap-4::after,
.nk-gap-4::before,
.nk-gap-5::after,
.nk-gap-5::before,
.nk-gap-6::after,
.nk-gap-6::before {
    content: "";
    display: table;
    clear: both;
}

.nk-gap-1 {
    height: 30px;
}

.nk-gap-2 {
    height: 40px;
}

.nk-gap-3 {
    height: 60px;
}

.nk-gap-4 {
    height: 80px;
}

.nk-gap-5 {
    height: 100px;
}

.nk-gap-6 {
    height: 120px;
}


.three-d-container{
margin:30px auto;
width:300px;
height:300px;
border-radius: 3px;
position:relative;
-webkit-perspective:1000px;
   -moz-perspective:1000px;
    -ms-perspective:1000px;
     -o-perspective:1000px;
        perspective:1000px;
-webkit-box-shadow:0 20px 60px rgba(0,0,0,0.2),			  			  0 0 40px rgba(0,0,0,0.2) inset;
   -moz-box-shadow:0 20px 60px rgba(0,0,0,0.2),			  			  0 0 40px rgba(0,0,0,0.2) inset;
        box-shadow:0 20px 60px rgba(0,0,0,0.2),			  			  0 0 40px rgba(0,0,0,0.2) inset;
}
.three-d-cube{
width:100%;
height:100%;
position:absolute;
-webkit-transition:-webkit-transform 1s;
   -moz-transition:   -moz-transform 1s;
     -o-transition:     -o-transform 1s;
        transition:        transform 1s;
-webkit-transform-style:preserve-3d;
   -moz-transform-style:preserve-3d;
    -ms-transform-style:preserve-3d;
     -o-transform-style:preserve-3d;
        transform-style:preserve-3d;
-webkit-transform:translateZ( -150px );
   -moz-transform:translateZ( -150px );
    -ms-transform:translateZ( -150px );
     -o-transform:translateZ( -150px );
        transform:translateZ( -150px );
}
.three-d-cube .three-d-item{
width:100%;
height:100%;
display:block;
margin:0;
position:absolute;
}
.three-d-cube .three-d-item img{
width:100%;
height:100%;
display:block;
margin:0;
}
.three-d-item:nth-child(1){
-webkit-transform:rotateY(   0deg ) translateZ( 150px );
   -moz-transform:rotateY(   0deg ) translateZ( 150px );
    -ms-transform:rotateY(   0deg ) translateZ( 150px );
     -o-transform:rotateY(   0deg ) translateZ( 150px );
        transform:rotateY(   0deg ) translateZ( 150px );
}
.three-d-item:nth-child(2){
-webkit-transform:rotateX( 180deg ) translateZ( 150px );
   -moz-transform:rotateX( 180deg ) translateZ( 150px );
    -ms-transform:rotateX( 180deg ) translateZ( 150px );
     -o-transform:rotateX( 180deg ) translateZ( 150px );
        transform:rotateX( 180deg ) translateZ( 150px );
}
.three-d-item:nth-child(3){
-webkit-transform:rotateY(  90deg ) translateZ( 150px );
   -moz-transform:rotateY(  90deg ) translateZ( 150px );
    -ms-transform:rotateY(  90deg ) translateZ( 150px );
     -o-transform:rotateY(  90deg ) translateZ( 150px );
        transform:rotateY(  90deg ) translateZ( 150px );
}
.three-d-item:nth-child(4){
-webkit-transform:rotateY( -90deg ) translateZ( 150px );
   -moz-transform:rotateY( -90deg ) translateZ( 150px );
    -ms-transform:rotateY( -90deg ) translateZ( 150px );
     -o-transform:rotateY( -90deg ) translateZ( 150px );
        transform:rotateY( -90deg ) translateZ( 150px );
}
.three-d-item:nth-child(5){
-webkit-transform:rotateX(  90deg ) translateZ( 150px );
   -moz-transform:rotateX(  90deg ) translateZ( 150px );
    -ms-transform:rotateX(  90deg ) translateZ( 150px );
     -o-transform:rotateX(  90deg ) translateZ( 150px );
        transform:rotateX(  90deg ) translateZ( 150px );
}
.three-d-item:nth-child(6){
-webkit-transform:rotateX( -90deg ) translateZ( 150px );
   -moz-transform:rotateX( -90deg ) translateZ( 150px );
    -ms-transform:rotateX( -90deg ) translateZ( 150px );
     -o-transform:rotateX( -90deg ) translateZ( 150px );
        transform:rotateX( -90deg ) translateZ( 150px );
}
.a:checked ~ .three-d-cube{
-webkit-transform:translateZ( -150px ) rotateY(    0deg );
   -moz-transform:translateZ( -150px ) rotateY(    0deg );
    -ms-transform:translateZ( -150px ) rotateY(    0deg );
     -o-transform:translateZ( -150px ) rotateY(    0deg );
        transform:translateZ( -150px ) rotateY(    0deg );
}
.b:checked ~ .three-d-cube{
-webkit-transform:translateZ( -150px ) rotateX( -180deg );
   -moz-transform:translateZ( -150px ) rotateX( -180deg );
    -ms-transform:translateZ( -150px ) rotateX( -180deg );
     -o-transform:translateZ( -150px ) rotateX( -180deg );
        transform:translateZ( -150px ) rotateX( -180deg );
}
.c:checked ~ .three-d-cube{
-webkit-transform:translateZ( -150px ) rotateY(  -90deg );
   -moz-transform:translateZ( -150px ) rotateY(  -90deg );
    -ms-transform:translateZ( -150px ) rotateY(  -90deg );
     -o-transform:translateZ( -150px ) rotateY(  -90deg );
        transform:translateZ( -150px ) rotateY(  -90deg );
}
.d:checked ~ .three-d-cube{
-webkit-transform:translateZ( -150px ) rotateY(   90deg );
   -moz-transform:translateZ( -150px ) rotateY(   90deg );
    -ms-transform:translateZ( -150px ) rotateY(   90deg );
     -o-transform:translateZ( -150px ) rotateY(   90deg );
        transform:translateZ( -150px ) rotateY(   90deg );
}
.e:checked ~ .three-d-cube{
-webkit-transform:translateZ( -150px ) rotateX(  -90deg );
   -moz-transform:translateZ( -150px ) rotateX(  -90deg );
    -ms-transform:translateZ( -150px ) rotateX(  -90deg );
     -o-transform:translateZ( -150px ) rotateX(  -90deg );
        transform:translateZ( -150px ) rotateX(  -90deg );
}
.f:checked ~ .three-d-cube{
-webkit-transform:translateZ( -150px ) rotateX(   90deg );
   -moz-transform:translateZ( -150px ) rotateX(   90deg );
    -ms-transform:translateZ( -150px ) rotateX(   90deg );
     -o-transform:translateZ( -150px ) rotateX(   90deg );
        transform:translateZ( -150px ) rotateX(   90deg );
}
.three-d-bullet{
margin:350px 10px 0 0;
float:left;
}
.three-d-bullet:first-child{
margin:350px 10px 0 88px;
}


/* ACTUALIZACIÓN JULIO 2025 POP-UP */

/* Popup flotante abajo a la izquierda */
.floating-popup {
  position: fixed;
  left: 30px;
  bottom: 30px;
  z-index: 99999;
  background: transparent;
  border: none;
  padding: 0;
  animation: popup-in 0.7s cubic-bezier(0.23, 1, 0.32, 1);
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.popup-close {
  background: #232323;
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  right: -35px;
  top: 10px;
  z-index: 2;
  transition: background 0.2s;
  opacity: 0.95;
  text-decoration: none;
}
.popup-close:hover {
  background: #e34d67;
}


/* Imagen con animación de rebote */
.popup-img {
  display: block;
  cursor: pointer;
  border-radius: 12px;
  max-width: 360px; /* Doble del valor anterior (antes 180px) */
  height: auto;
  transition: transform 0.2s;
  animation: popup-bounce-rotate var(--popup-bounce-speed, 2.2s) var(--popup-bounce-ease, cubic-bezier(.68,-0.55,.27,1.55)) infinite;
}

@keyframes popup-bounce-rotate {
  0% {
    transform: translateY(0) rotate(0deg);
  }
  10% {
    transform: translateY(-18px) rotate(0deg); /* Se eleva */
  }
  20% {
    transform: translateY(-18px) rotate(-15deg); /* Sacude izquierda */
  }
  30% {
    transform: translateY(-18px) rotate(15deg); /* Sacude derecha */
  }
  40% {
    transform: translateY(-18px) rotate(0deg); /* Centra */
  }
  60% {
    transform: translateY(0) rotate(0deg); /* Baja suavemente */
  }
  100% {
    transform: translateY(0) rotate(0deg); /* Vuelve al centro */
  }
}

@keyframes popup-out {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(60px) scale(0.8);
    pointer-events: none;
  }
}

.floating-popup.hide {
  animation: popup-out 0.5s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

/* Permite ajustar velocidad y rebote con variables CSS */
.floating-popup {
  --popup-bounce-speed: 2.2s; /* Cambia la velocidad aquí */
  --popup-bounce-ease: cubic-bezier(.68,-0.55,.27,1.55); /* Cambia el rebote aquí */
}

.cosmetico-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
}
.cosmetico-card {
  width: 120px;
  margin-bottom: 24px;
  text-align: center;
}
.cosmetico-card img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  transition: transform 0.2s;
}
.cosmetico-card img:hover {
  transform: scale(1.08);
}
.cosmetico-title {
  font-size: 0.95em;
  margin-top: 6px;
}
.cosmetico-search {
  margin: 16px auto 24px auto;
  padding: 8px 16px;
  width: 240px;
  border-radius: 8px;
  border: 1px solid #ccc;
}
.cosmetico-filters {
  margin-bottom: 16px;
}
.filter-btn {
  margin: 0 4px;
  padding: 6px 16px;
  border-radius: 6px;
  border: none;
  background: #eee;
  cursor: pointer;
}
.filter-btn.active {
  background: #e34d67;
  color: #fff;
}

/* Puedes ajustar según tu diseño */
.pagination-circles button {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: none;
  margin: 2px;
  width: 40px;
  height: 40px;
  background: #eee;
  color: #333;
  font-weight: bold;
  font-size: 1.1em;
  cursor: pointer;
  transition: background 0.2s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  padding: 0;
}
.pagination-circles button.active {
  background: #ffb300;
  color: #222;
  font-weight: bold;
  border: 2px solid #ffb300;
}
.pagination-circles button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.pagination-circles button:hover:not(.active):not(:disabled) {
  background: #444;
  color: #ffb300;
}

/* PAGINACIÓN COSMÉTICOS */
#cosmetico-pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin: 24px 0 12px 0;
}
#cosmetico-pagination button {
  background: #222;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 6px 14px;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
#cosmetico-pagination button.active {
  background: #ffb300;
  color: #222;
  font-weight: bold;
  border: 2px solid #ffb300;
}
#cosmetico-pagination button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
#cosmetico-pagination button:hover:not(.active):not(:disabled) {
  background: #444;
  color: #ffb300;
}
@media (max-width: 600px) {
  #cosmetico-pagination button {
    padding: 4px 8px;
    font-size: 0.95rem;
  }
}

.cosmetico-gallery {
  transition: opacity 0.35s cubic-bezier(.4,0,.2,1);
  will-change: opacity;
}
.cosmetico-gallery.fade-out {
  opacity: 0.2;
  pointer-events: none;
}
.cosmetico-gallery.fade-in {
  opacity: 1;
  pointer-events: auto;
}



/* Estilos para los botones del TOP */
.top-navigation .nav-link {
    min-width: 120px; /* Ancho fijo más corto */
    padding: 10px 20px;
    margin: 0 5px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
}

.top-navigation .nav-link:hover,
.top-navigation .nav-link.active {
    background-color: #28ABE3;
    border-color: #28ABE3;
    color: #fff;
    transform: translateY(-2px);
}

.top-navigation .d-flex.gap-3 {
    gap: 1rem !important;
}

/* Modo oscuro */
body.dark-mode .top-navigation .nav-link {
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
}

body.dark-mode .top-navigation .nav-link:hover,
body.dark-mode .top-navigation .nav-link.active {
    background-color: #1e90ff;
    border-color: #1e90ff;
}

.ranking-table {
    background: rgba(0, 0, 0, 0.5);
    border-radius: 8px;
    padding: 20px;
}

.ranking-table table {
    margin-bottom: 0;
}

.ranking-table th {
    color: #e84c3d;
    border-bottom: 2px solid #e84c3d;
}

.ranking-table td {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.1);
}

.top-navigation .nav-link.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
}

/* Ranking Table Styles */
.ranking-table {
    background: rgba(255,255,255,0.05);
    border-radius: 15px;
    padding: 20px;
    margin-top: 30px;
}

.ranking-table table {
    width: 100%;
    color: #fff;
}

.ranking-table th {
    color: #gold;
    font-size: 16px;
    font-weight: 600;
    padding: 15px;
    border-bottom: 2px solid rgba(40, 171, 227, 0.3);
}

.ranking-table td {
    padding: 15px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    vertical-align: middle;
}

.ranking-table tr:hover {
    background: rgba(40, 171, 227, 0.1);
}

/* Status Badge Styles */
.status-badge {
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
}

.status-badge.online {
    background: #28a745;
    color: #fff;
}

.status-badge.offline {
    background: #dc3545;
    color: #fff;
}

/* Dark Mode Styles */
body.dark-mode .top-section {
    background: var(--dark-bg);
}

body.dark-mode .ranking-table {
    background: rgba(0,0,0,0.3);
}

body.dark-mode .ranking-table td {
    border-color: rgba(255,255,255,0.05);
}

/* Responsive Styles */
@media (max-width: 768px) {
    .top-navigation .nav-link {
        font-size: 16px;
        padding: 10px 20px;
    }

    .ranking-table {
        overflow-x: auto;
    }

    .ranking-table table {
        min-width: 600px;
    }
}

.ranking-table {
    background: rgba(0, 0, 0, 0.5);
    border-radius: 8px;
    padding: 20px;
    margin-top: 20px;
}

.ranking-table table {
    width: 100%;
    color: #fff;
}

.ranking-table th {
    color: #gold;
    border-bottom: 2px solid #gold;
    text-transform: uppercase;
}

.ranking-table td {
    padding: 12px 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.status-badge {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: bold;
}

.status-badge.online {
    background: #28a745;
    color: white;
}

.status-badge.offline {
    background: #dc3545;
    color: white;
}

.tab-pane {
    display: none;
}

.tab-pane.show.active {
    display: block;
}

.nav-link {
    cursor: pointer;
}

.top-navigation .nav-link {
    padding: 10px 20px;
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    margin: 0 5px;
    border-radius: 5px;
    transition: all 0.3s ease;
}

.top-navigation .nav-link:hover,
.top-navigation .nav-link.active {
    background: #1e90ff;
    color: #fff;
}

.d-flex.gap-3 {
    display: flex;
    gap: 1rem;
}/* Estilos para los botones del TOP */
.top-navigation .nav-link {
    min-width: 120px; /* Ancho fijo más corto */
    padding: 10px 20px;
    margin: 0 5px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
}

.top-navigation .nav-link:hover,
.top-navigation .nav-link.active {
    background-color: #28ABE3;
    border-color: #28ABE3;
    color: #fff;
    transform: translateY(-2px);
}

.top-navigation .d-flex.gap-3 {
    gap: 1rem !important;
}

/* Modo oscuro */
body.dark-mode .top-navigation .nav-link {
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
}

body.dark-mode .top-navigation .nav-link:hover,
body.dark-mode .top-navigation .nav-link.active {
    background-color: #1e90ff;
    border-color: #1e90ff;
}

.ranking-table {
    background: rgba(0, 0, 0, 0.5);
    border-radius: 8px;
    padding: 20px;
}

.ranking-table table {
    margin-bottom: 0;
}

.ranking-table th {
    color: #e84c3d;
    border-bottom: 2px solid #e84c3d;
}

.ranking-table td {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.1);
}

.top-navigation .nav-link.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
}

/* Ranking Table Styles */
.ranking-table {
    background: rgba(255,255,255,0.05);
    border-radius: 15px;
    padding: 20px;
    margin-top: 30px;
}

.ranking-table table {
    width: 100%;
    color: #fff;
}

.ranking-table th {
    color: #gold;
    font-size: 16px;
    font-weight: 600;
    padding: 15px;
    border-bottom: 2px solid rgba(40, 171, 227, 0.3);
}

.ranking-table td {
    padding: 15px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    vertical-align: middle;
}

.ranking-table tr:hover {
    background: rgba(40, 171, 227, 0.1);
}

/* Status Badge Styles */
.status-badge {
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
}

.status-badge.online {
    background: #28a745;
    color: #fff;
}

.status-badge.offline {
    background: #dc3545;
    color: #fff;
}

/* Dark Mode Styles */
body.dark-mode .top-section {
    background: var(--dark-bg);
}

body.dark-mode .ranking-table {
    background: rgba(0,0,0,0.3);
}

body.dark-mode .ranking-table td {
    border-color: rgba(255,255,255,0.05);
}

/* Responsive Styles */
@media (max-width: 768px) {
    .top-navigation .nav-link {
        font-size: 16px;
        padding: 10px 20px;
    }

    .ranking-table {
        overflow-x: auto;
    }

    .ranking-table table {
        min-width: 600px;
    }
}

.ranking-table {
    background: rgba(0, 0, 0, 0.5);
    border-radius: 8px;
    padding: 20px;
    margin-top: 20px;
}

.ranking-table table {
    width: 100%;
    color: #fff;
}

.ranking-table th {
    color: #gold;
    border-bottom: 2px solid #gold;
    text-transform: uppercase;
}

.ranking-table td {
    padding: 12px 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.status-badge {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: bold;
}

.status-badge.online {
    background: #28a745;
    color: white;
}

.status-badge.offline {
    background: #dc3545;
    color: white;
}

.tab-pane {
    display: none;
}

.tab-pane.show.active {
    display: block;
}

.nav-link {
    cursor: pointer;
}

.top-navigation .nav-link {
    padding: 10px 20px;
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    margin: 0 5px;
    border-radius: 5px;
    transition: all 0.3s ease;
}

.top-navigation .nav-link:hover,
.top-navigation .nav-link.active {
    background: #1e90ff;
    color: #fff;
}

.d-flex.gap-3 {
    display: flex;
    gap: 1rem;
}


.ranking-table .table th, .ranking-table .table td {
    text-align: left;
    vertical-align: middle;
}
.nk-title {
    text-align: center;
    margin-bottom: 10px;
}

/* Colores del ranking en la web */

.ranking-position {
  color: #FFD700;
}

.ranking-name {
  color: #ffffff;
}

.ranking-clan {
  color: #00BFFF;
}

.ranking-number {
  color: #00ff00;
}



/* Downloads Section */
.downloads-section {
  padding: 80px 0;
}

.download-card {
  background: var(--bg-dark);
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
  display: flex;
  align-items: flex-start;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.download-card:hover {
  transform: translateY(-5px);
}

.download-icon {
  font-size: 2rem;
  margin-right: 15px;
  color: var(--primary-color);
}

.download-content h3 {
  margin-top: 0;
  color: var(--text-light);
}

.download-content p {
  color: var(--text-muted);
  margin-bottom: 15px;
}

.download-buttons .btn {
  margin-right: 10px;
  margin-bottom: 10px;
}

/* Tutorial Steps */
.tutorial-steps {
  background: var(--bg-dark);
  border-radius: 8px;
  padding: 30px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

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

.step {
  display: flex;
  width: 48%;
  margin-bottom: 30px;
  align-items: flex-start;
}

.step-number {
  background: var(--primary-color);
  color: white;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 1.2rem;
  margin-right: 15px;
  flex-shrink: 0;
}

.step-content h4 {
  margin-top: 0;
  color: var(--text-light);
}

.step-content p {
  color: var(--text-muted);
  margin-bottom: 0;
}

/* Video Tutorial */
.video-tutorial {
  background: var(--bg-dark);
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  height: 100%;
}

.video-tutorial h3 {
  color: var(--text-light);
  margin-bottom: 20px;
}

/* Responsive */
@media (max-width: 992px) {
  .step {
    width: 100%;
  }
}

@media (max-width: 768px) {
  .download-card {
    flex-direction: column;
    text-align: center;
  }
  
  .download-icon {
    margin-right: 0;
    margin-bottom: 15px;
  }
}


/* Estilos para la sección de tutorial con fondo negro */
.bg-dark {
  background-color: #000 !important;
  color: #fff;
}

.tutorial-steps.bg-dark {
  background-color: #000 !important;
  border: 1px solid #333;
}

.tutorial-steps.bg-dark .step-content h4 {
  color: #fff;
}

.tutorial-steps.bg-dark .step-content p {
  color: #ccc;
}

/* Espaciado adicional entre secciones */
.mt-5.mb-5 {
  margin-top: 5rem !important;
  margin-bottom: 5rem !important;
}

/* Estilos para el botón de descargas */
.btn-lg {
  padding: 15px 30px;
  font-size: 18px;
  font-weight: bold;
}

/* Ajustes responsivos */
@media (max-width: 768px) {
  .steps-container {
    flex-direction: column;
  }
  
  .step {
    width: 100% !important;
    margin-bottom: 20px;
  }
  
  .btn-lg {
    padding: 12px 24px;
    font-size: 16px;
  }
}

/* Estilos para botón rojo con efecto metálico */
.btn-gold {
  display: inline-block;
  font-size: 24px;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-radius: 40px;
  padding: 12px 40px;
  transition: all 0.3s ease;
  background: linear-gradient(145deg, #e32828, #c91e1e, #e32828);
  border: 2px solid #e32828;
  color: #fff !important;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  box-shadow: 0 4px 15px rgba(227, 40, 40, 0.4),
              inset 0 1px 0 rgba(255, 255, 255, 0.4),
              inset 0 -1px 0 rgba(0, 0, 0, 0.2);
  position: relative;
  overflow: hidden;
}

.btn-gold:before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transition: all 0.5s ease;
}

.btn-gold:hover {
  background: linear-gradient(145deg, #c91e1e, #e32828, #c91e1e);
  border-color: #f74f4f;
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(227, 40, 40, 0.6),
              inset 0 1px 0 rgba(255, 255, 255, 0.4),
              inset 0 -1px 0 rgba(0, 0, 0, 0.2);
}

.btn-gold:hover:before {
  left: 100%;
}

.btn-gold:active {
  transform: translateY(0);
  box-shadow: 0 4px 15px rgba(227, 40, 40, 0.4),
              inset 0 1px 0 rgba(255, 255, 255, 0.4),
              inset 0 -1px 0 rgba(0, 0, 0, 0.2);
}

/* Ajustes para modo oscuro si es necesario */
body.dark-mode .btn-gold {
  color: #fff !important;
}

body.dark-mode .btn-gold:hover {
  color: #fff !important;
}


/* Contenedor de la cuadrícula de pasos */
/* SOLUCIÓN PARA TEXTO EN CELDAS - Agregar al final de style.css */

/* Contenedor principal mejorado */
.steps-grid-container {
  display: flex;
  flex-direction: column;
  gap: 40px;
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
}

/* Filas con mejor manejo de espacio */
.steps-row {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  justify-content: center;
  width: 100%;
}

/* Columnas con mejor ajuste de texto */
.step-column {
  flex: 1 1 45%;
  min-width: 450px;
  max-width: 45%;
  display: flex;
  flex-direction: column;
}

/* Paso individual con mejor flujo de texto */
.step {
  display: flex;
  align-items: flex-start;
  margin-bottom: 20px;
  min-height: 120px;
  width: 100%;
}

/* Contenedor de contenido con ajuste de texto */
.step-content {
  flex: 1;
  min-width: 0; /* IMPORTANTE: Permite que el texto se ajuste */
  width: 100%;
}

/* Títulos con mejor manejo de texto */
.step-content h4 {
  margin-top: 0;
  color: var(--text-light);
  font-size: 1.5rem;
  line-height: 1.3;
  margin-bottom: 10px;
  word-break: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
  width: 100%;
}

/* Párrafos con mejor ajuste */
.step-content p {
  color: var(--text-muted);
  margin-bottom: 0;
  font-size: 1.1rem;
  line-height: 1.5;
  word-break: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
  width: 100%;
}

/* Imágenes centradas correctamente */
.step-image {
  text-align: center;
  margin: 15px 0;
  width: 100%;
}

.step-image img {
  max-width: 75%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

/* Responsive */
@media (max-width: 1200px) {
  .step-column {
    min-width: 400px;
  }
}

@media (max-width: 992px) {
  .step-column {
    min-width: 350px;
    max-width: 100%;
  }
  
  .step-content h4 {
    font-size: 1.4rem;
  }
}

@media (max-width: 768px) {
  .steps-row {
    flex-direction: column;
    gap: 20px;
  }
  
  .step-column {
    max-width: 100%;
    min-width: auto;
  }
  
  .step {
    flex-direction: row;
    text-align: left;
    min-height: auto;
  }
  
  .step-number {
    margin-right: 15px;
    margin-bottom: 0;
  }
  
  .steps-grid-container {
    gap: 30px;
  }
}

@media (max-width: 480px) {
  .step {
    flex-direction: column;
    text-align: center;
  }
  
  .step-number {
    margin-right: 0;
    margin-bottom: 10px;
    align-self: center;
  }
  
  .step-content h4 {
    font-size: 1.3rem;
  }
  
  .step-content p {
    font-size: 1rem;
  }
  
  .step-image img {
    max-width: 100%;
  }
}



/* Estilos del popup flotante integrado */
#floating-countdown {
    position: fixed;
    left: 20px;
    top: 20px;
    z-index: 9998; /* Un z-index menor que la navegación (que tiene 9999) */
    background: rgba(0, 0, 0, 0.85);
    border: 2px solid #28ABE3;
    border-radius: 10px;
    padding: 12px 15px;
    box-shadow: 0 0 15px rgba(40, 171, 227, 0.7);
    color: #fff;
    font-family: 'Catamaran', 'Source Sans Pro', sans-serif;
    text-align: center;
    min-width: 180px;
    backdrop-filter: blur(5px);
    transition: all 0.4s ease;
    transform: translateY(0);
}

/* Cuando la navegación se hace sticky, movemos el popup hacia abajo */
.sticky-header ~ #floating-countdown {
    transform: translateY(90px); /* Ajusta según la altura de tu barra */
}

#floating-countdown .countdown-title {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
    color: #28ABE3;
    font-weight: 600;
}

#floating-countdown .countdown-timer {
    display: flex;
    justify-content: space-between;
    gap: 6px;
}

#floating-countdown .time-unit {
    flex: 1;
}

#floating-countdown .time-value {
    font-size: 16px;
    font-weight: 700;
    background: rgba(40, 171, 227, 0.2);
    border-radius: 4px;
    padding: 4px;
    margin-bottom: 3px;
}

#floating-countdown .time-label {
    font-size: 9px;
    text-transform: uppercase;
    opacity: 0.8;
}

#floating-countdown .close-btn {
    position: absolute;
    top: 3px;
    right: 5px;
    background: none;
    border: none;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.3s;
    line-height: 1;
    padding: 2px;
}

#floating-countdown .close-btn:hover {
    opacity: 1;
    color: #28ABE3;
}

/* Responsive */
@media (max-width: 991px) {
    #floating-countdown {
        left: 10px;
        top: 10px;
        min-width: 160px;
        padding: 10px;
    }
    
    .sticky-header ~ #floating-countdown {
        transform: translateY(60px);
    }
    
    #floating-countdown .countdown-title {
        font-size: 10px;
    }
    
    #floating-countdown .time-value {
        font-size: 14px;
    }
    
    #floating-countdown .time-label {
        font-size: 8px;
    }
}

@media (max-width: 768px) {
    #floating-countdown {
        left: 50%;
        transform: translateX(-50%);
        top: auto;
        bottom: 20px;
        width: 90%;
        max-width: 300px;
    }
    
    .sticky-header ~ #floating-countdown {
        transform: translateX(-50%) translateY(0);
    }
}

/* Estilos para Términos y Condiciones */
.tos-container {
  padding: 100px 0;
  max-width: 900px;
  margin: 0 auto;
}

.tos-header {
  text-align: center;
  margin-bottom: 50px;
}

.tos-header h1 {
  font-size: 32px;
  color: #28ABE3;
  margin-bottom: 15px;
  font-weight: 700;
}

.tos-header p {
  font-size: 18px;
  color: #848484;
}

.tos-section {
  margin-bottom: 40px;
}

.tos-section h2 {
  color: #28ABE3;
  margin-bottom: 20px;
  font-size: 24px;
  font-weight: 600;
  border-bottom: 2px solid rgba(40, 171, 227, 0.3);
  padding-bottom: 10px;
}

.tos-content {
  background: rgba(255, 255, 255, 0.05);
  padding: 30px;
  border-radius: 8px;
  border-left: 4px solid #28ABE3;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.tos-content p {
  color: #848484;
  line-height: 1.6;
  margin-bottom: 20px;
  font-size: 16px;
}

.tos-list {
  padding-left: 20px;
  margin-bottom: 20px;
}

.tos-list li {
  margin-bottom: 15px;
  line-height: 1.6;
  color: #848484;
  position: relative;
  padding-left: 10px;
}

.tos-list li:before {
  content: "•";
  color: #28ABE3;
  font-weight: bold;
  position: absolute;
  left: -15px;
}

.highlight-term {
  color: #28ABE3;
  font-weight: 600;
}

/* Modo oscuro */
body.dark-mode .tos-content {
  background: rgba(0, 0, 0, 0.3);
}

body.dark-mode .tos-content p,
body.dark-mode .tos-list li {
  color: #d1d1d1;
}

/* Responsive */
@media (max-width: 768px) {
  .tos-container {
    padding: 80px 20px;
  }
  
  .tos-header h1 {
    font-size: 28px;
  }
  
  .tos-header p {
    font-size: 16px;
  }
  
  .tos-content {
    padding: 20px;
  }
  
  .tos-section h2 {
    font-size: 22px;
  }
  
  .tos-content p {
    font-size: 15px;
  }
}

@media (max-width: 480px) {
  .tos-header h1 {
    font-size: 24px;
  }
  
  .tos-section h2 {
    font-size: 20px;
  }
  
  .tos-list {
    padding-left: 15px;
  }
  
  .tos-list li {
    padding-left: 5px;
  }
  
  .tos-list li:before {
    left: -12px;
  }
}

/* Estilos para la nueva sección de guía de cuentas */
#account-guide {
  background: #111;
  color: #fff;
}

#account-guide .title h2 {
  color: #fff;
}

#account-guide .title p {
  color: #ccc;
}

#account-guide .step-content a {
  color: #28ABE3;
  text-decoration: none;
  font-weight: bold;
}

#account-guide .step-content a:hover {
  text-decoration: underline;
}

/* Estilos para el modal de clave */
.modal-content {
  background: #1a1a1a;
  color: #fff;
  border: 1px solid #28ABE3;
}

.modal-header {
  border-bottom: 1px solid #333;
}

.modal-header .close {
  color: #fff;
  opacity: 0.8;
}

.modal-header .close:hover {
  opacity: 1;
}

.modal-footer {
  border-top: 1px solid #333;
}

/* Ajustes responsivos para la nueva sección */
@media (max-width: 768px) {
  #account-guide .step-column {
    min-width: 100%;
    max-width: 100%;
  }
}