/******************************************************************
  Template Name: Dreams
  Description: Dreams wedding template
  Author: Colorib
  Author URI: https://colorlib.com/
  Version: 1.0
  Created: Colorib
******************************************************************/

/* Importación de la fuente Montserrat desde Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');

/*
  Definición de variables CSS para consistencia de colores en el tema oscuro.
  --color-acento: Color principal para elementos interactivos y destacados.
  --color-primario: Color de fondo principal para secciones oscuras.
  --color-secundario: Un tono ligeramente más claro que el primario, para elementos secundarios.
  --color-texto: Blanco puro para el texto principal y los títulos.
  --color-texto-secundario: Un blanco semi-transparente para texto secundario o menos prominente.
  --color-borde: Un color de borde sutil para elementos en el tema oscuro.
*/
:root {
  --color-acento: #00d0ff; /* Color de acento (azul brillante) */
  --color-primario: #05000e; /* Color de fondo principal (azul muy oscuro) */
  --color-secundario: #1a0b4f; /* Color de fondo secundario (azul oscuro purpúreo) */
  --color-texto: #FFFFFF; /* Color principal del texto (blanco) */
  --color-texto-secundario: rgba(255, 255, 255, 0.7); /* Color secundario del texto (blanco semi-transparente) */
  --color-borde: rgba(255, 255, 255, 0.1); /* Color de borde (blanco transparente) */
}

/*------------------------------------------------------------------
[Table of contents]

1.  Template default CSS
    1.1 Variables
    1.2 Mixins
    1.3 Flexbox
    1.4 Reset
2.  Helper Css
3.  Header Section
4.  Hero Section
5.  Services Section
6.  Counter Section
7.  Team Section
8.  Latest Section
9.  Contact
10. Footer Style
-------------------------------------------------------------------*/
/*----------------------------------------*/
/* Template default CSS
/*----------------------------------------*/
html,
body {
  height: 100%;
  font-family: 'Montserrat', sans-serif; /* Fuente actualizada a Montserrat */
  -webkit-font-smoothing: antialiased;
  position: relative;
  z-index: 1;
  background: transparent;
}

/* Ajuste de color para todos los encabezados */
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  color: var(--color-texto); /* Cambiado de #111111 a blanco */
  font-weight: 400;
  font-family: 'Montserrat', sans-serif;;
}

h1 {
  font-size: 68px;
}

h2 {
  font-size: 34px;
}

h3 {
  font-size: 28px;
}

h4 {
  font-size: 22px;
}

h5 {
  font-size: 16px;
}

h6 {
  font-size: 14px;
}

/* Ajuste de color para los párrafos */
p {
  font-size: 14px;
  font-family: 'Montserrat', sans-serif; /* Fuente actualizada a Montserrat */
  color: var(--color-texto);
  font-weight: 400;
  line-height: 26px;
  margin: 0 0 15px 0;
}

img {
  max-width: 100%;
}

input:focus,
select:focus,
button:focus,
textarea:focus {
  outline: none;
}

a:hover,
a:focus {
  text-decoration: none;
  outline: none;
  color: #fff;
}

ul,
ol {
  padding: 0;
  margin: 0;
}

/*---------------------
  Helper CSS
-----------------------*/
.section-title {
  margin-bottom: 50px;
}
.section-title.center-title {
  text-align: center;
}
.section-title.center-title h2:after {
  right: 0;
  margin: 0 auto;
}
.section-title span {
  color: var(--color-texto);
  display: block;
  font-size: 16px;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.section-title h2 {
  color: var(--color-texto);
  font-weight: 700;
  text-transform: uppercase;
  position: relative;
  padding-bottom: 25px;
}
.section-title h2:after {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 5px;
  width: 70px;
  background: var(--color-acento);
  content: "";
}

.set-bg {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top center;
}

.spad {
  padding-top: 80px;
  padding-bottom: 80px;
}

/* Asegura que todo el texto dentro de .text-white sea blanco */
.text-white h1,
.text-white h2,
.text-white h3,
.text-white h4,
.text-white h5,
.text-white h6,
.text-white p,
.text-white span,
.text-white li,
.text-white a {
  color: #fff;
}

/* buttons */
.primary-btn {
  display: inline-block;
  font-size: 13px;
  font-family: 'Montserrat', sans-serif;;
  font-weight: 700;
  padding: 14px 32px 12px;
  color: var(--color-texto);
  text-transform: uppercase;
  letter-spacing: 2px;
  position: relative;
  z-index: 1;
}
.primary-btn:hover:before {
  height: 100%;
  width: 100%;
}
.primary-btn:hover:after {
  height: 100%;
  width: 100%;
}
.primary-btn:before {
  position: absolute;
  left: 0;
  top: 0;
  height: 30px;
  width: 30px;
  border-left: 2px solid var(--color-acento);
  border-top: 2px solid var(--color-acento);
  content: "";
  z-index: -1;
  -webkit-transition: all, 0.7s;
  -o-transition: all, 0.7s;
  transition: all, 0.7s;
}
.primary-btn:after {
  position: absolute;
  right: 0;
  bottom: 0;
  height: 30px;
  width: 30px;
  border-right: 2px solid var(--color-acento);
  border-bottom: 2px solid var(--color-acento);
  content: "";
  z-index: -1;
  -webkit-transition: all, 0.7s;
  -o-transition: all, 0.7s;
  transition: all, 0.7s;
}

.site-btn {
  font-size: 13px;
  color: var(--color-texto);
  background: var(--color-acento);
  font-family: 'Montserrat', sans-serif;;
  font-weight: 700;
  border: none;
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 2px;
  padding: 14px 34px 12px;
  width: 100%;
}

/* Preloder */
#preloder {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 999999;
  background: #000;
}
div.codepen {
  display: block;
  position: relative;
  top: 50%;
  height: 16em;
  width: 16em;
  margin: -8em auto 0;
  border-radius: 8em;
  background-color: #121212;
  cursor: pointer;
  transition: color 0.8s linear, background 0.8s linear, box-shadow 0.1s linear, transform 0.1s linear;
}

div.codepen:hover {
  background-color: #DCDCDC;
}



div.codepen::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -4.5em 0 0 -0.4em;
  height: 0.8em;
  width: 0.8em;
  line-height: 0.8em;
  border-radius: 0.35em;
  outline: 1px solid transparent;
  color: #FFF;
  background: #FFF;
  overflow: visible;
  transform: rotate(42.5deg) skew(-15deg, -10deg);
  filter: blur(0);
  box-shadow: 0.3em 0 0, 0.6em 0 0, 0.9em 0 0, 1.2em 0 0, 1.5em 0 0, 1.8em 0 0, 2.1em 0 0, 2.4em 0 0, 2.7em 0 0, 3em 0 0, 3.3em 0 0, 3.6em 0 0, 3.9em 0 0, 4.2em 0 0, 4.5em 0 0, 4.6em 0 0, 4.95em 0 0, 4.95em 0.4em 0, 4.95em 0.6em 0, 4.95em 0.9em 0, 4.95em 1.2em 0, 4.95em 1.5em 0, 4.95em 1.8em 0, 4.95em 2.1em 0, 4.95em 2.4em 0, 4.95em 2.7em 0, 4.95em 3em 0, 4.95em 3.3em 0, 4.95em 3.6em 0, 4.95em 3.9em 0, 4.95em 4.2em 0, 4.95em 4.5em 0, 4.95em 4.8em 0, 0 0.3em 0, 0 0.6em 0, 0 0.9em 0, 0 1.2em 0, 0 1.5em 0, 0 1.8em 0, 0 2.1em 0, 0 2.4em 0, 0 2.7em 0, 0 3em 0, 0 3.3em 0, 0 3.6em 0, 0 3.9em 0, 0 4.2em 0, 0 4.5em 0, 0em 4.85em 0, 0.4em 4.9em 0, 0.6em 4.9em 0, 0.9em 4.9em 0, 1.2em 4.9em 0, 1.5em 4.9em 0, 1.8em 4.9em 0, 2.1em 4.9em 0, 2.4em 4.9em 0, 3em 4.9em 0, 3.3em 4.9em 0, 3.6em 4.9em 0, 3.9em 4.9em 0, 4.2em 4.9em 0, 4.5em 4.9em 0, 4.8em 4.9em 0, 4.9em 4.9em 0, 2.6em 2.5em 0, 2.9em 2.5em 0, 3.1em 2.5em 0, 3.4em 2.5em 0, 3.7em 2.5em 0, 4em 2.5em 0, 4.3em 2.5em 0, 4.6em 2.5em 0, 4.9em 2.5em 0, 5.1em 2.5em 0, 5.4em 2.5em 0, 5.7em 2.5em 0, 6em 2.5em 0, 6.3em 2.5em 0, 6.5em 2.5em 0, 6.8em 2.5em 0, 7.1em 2.56em 0, 7.2em 2.56em 0, 7.45em 2.5em 0, 7.45em 2.8em 0, 7.45em 2.9em 0, 7.45em 3.2em 0, 7.45em 3.5em 0, 7.45em 3.8em 0, 7.45em 4.1em 0, 7.45em 4.4em 0, 7.45em 4.7em 0, 7.45em 5em 0, 7.45em 5.3em 0, 7.45em 5.6em 0, 7.45em 5.9em 0, 7.45em 6.2em 0, 7.45em 6.5em 0, 7.45em 6.8em 0, 7.45em 7.1em 0, 2.6em 2.9em 0, 2.6em 3.2em 0, 2.6em 3.5em 0, 2.6em 3.8em 0, 2.6em 4.1em 0, 2.6em 4.4em 0, 2.6em 4.7em 0, 2.6em 5em 0, 2.6em 5.3em 0, 2.6em 5.6em 0, 2.6em 5.9em 0, 2.6em 6.2em 0, 2.6em 6.5em 0, 2.6em 6.8em 0, 2.6em 7em 0, 2.6em 7.35em 0, 2.9em 7.35em 0, 3.1em 7.35em 0, 3.4em 7.35em 0, 3.7em 7.35em 0, 4em 7.35em 0, 4.3em 7.35em 0, 4.6em 7.35em 0, 4.9em 7.35em 0, 5.2em 7.35em 0, 5.5em 7.35em 0, 5.8em 7.35em 0, 6.1em 7.35em 0, 6.4em 7.35em 0, 6.7em 7.35em 0, 7em 7.35em 0, 7.3em 7.35em 0, 7.45em 7.35em 0;
}

div.codepen::after {
  content: '';
  display: block;
  position: absolute;
  top: 3.8em;
  left: 50%;
  height: 3.15em;
  width: 0.8em;
  margin-left: -0.45em;
  border-radius: 0.4em;
  outline: 1px solid transparent;
  color: #e00000;
  background: #d80000;
  box-shadow: 4.45em 2.6em 0, -0.05em 5.4em 0, -4.4em 2.65em 0;
}

div.codepen:hover {
  box-shadow: 0 0 1em 0.1em rgba(0, 0, 0, 0.75);
  transform: scale(1.02);
}

div.codepen:hover::before,
div.codepen:hover::after {
  color: #000;
  background: #000;
}

/* .loader {
  width: 40px;
  height: 40px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -13px;
  margin-left: -13px;
  border-radius: 60px;
  animation: loader 0.8s linear infinite;
  -webkit-animation: loader 0.8s linear infinite;
} */

/* HTML: <div class="loader"></div> */
.loader {
  width: 80px;
  position: relative;
  top: 50%;
  left: 50%;
  margin-top: -13px;
    margin-left: -13px;
  aspect-ratio: 1;
  display: grid;
  border-radius: 50%;
  background: conic-gradient(#25b09b 25%, #f03355 0 50%, #514b82 0 75%, #ffa516 0);
  animation: l22 0.5s infinite linear;
}

.loader::before,
.loader::after {
  content: "";
  grid-area: 1/1;
  margin: 15%;
  border-radius: 50%;
  background: inherit;
  animation: inherit;
}

.loader::after {
  margin: 25%;
  animation-duration: 0.5s;
}

@keyframes l22 {
  100% {
    transform: rotate(1turn)
  }
}


@keyframes loader {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    border: 4px solid #f44336;
    border-left-color: transparent;
  }
  50% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    border: 4px solid #673ab7;
    border-left-color: transparent;
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
    border: 4px solid #f44336;
    border-left-color: transparent;
  }
}
@-webkit-keyframes loader {
  0% {
    -webkit-transform: rotate(0deg);
    border: 4px solid #f44336;
    border-left-color: transparent;
  }
  50% {
    -webkit-transform: rotate(180deg);
    border: 4px solid #673ab7;
    border-left-color: transparent;
  }
  100% {
    -webkit-transform: rotate(360deg);
    border: 4px solid #f44336;
    border-left-color: transparent;
  }
}
/*---------------------
  Header
-----------------------*/
.header {
    position: fixed;
    top: 15px;
    left: 1%;
    border-radius: 20px;
    width: 98%;
    background-color: transparent ;
    box-shadow: 0 0 20px #000000bb;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: top 0.3s ease; /* Transición suave */
    z-index: 1000;
}

.header__logo {
  padding: 30px 0;
}

@media (max-width: 767px) {
  .header__logo img {
    max-width: 80px; /* Tamaño más pequeño para móviles */
    height: auto; /* Mantener la proporción */
  }
}

.header__logo a {
  display: inline-block;
}

.header__nav__option {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
}


.header__nav__menu {
  display: inline-block;
  margin-right: 45px;
}
.header__nav__menu ul li {
  list-style: none;
  display: inline-block;
  margin-right: 45px;
  position: relative;
}
.header__nav__menu ul li.active a:after {
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);
}
.header__nav__menu ul li:hover a:after {
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);
}
.header__nav__menu ul li:hover .dropdown {
  top: 34px;
  opacity: 1;
  visibility: visible;
}
.header__nav__menu ul li:last-child {
  margin-right: 0;
}
.header__nav__menu ul li .dropdown {
  position: absolute;
  left: 0;
  top: 60px;
  width: 140px;
  background: var(--color-texto); /* El fondo del dropdown es blanco para contrastar */
  text-align: left;
  padding: 2px 0;
  z-index: 9;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all, 0.3s;
  -o-transition: all, 0.3s;
  transition: all, 0.3s;
}
.header__nav__menu ul li .dropdown li {
  display: block;
  margin-right: 0;
}
.header__nav__menu ul li .dropdown li a {
  font-size: 12px;
  color: #121212; /* Texto oscuro para el dropdown, ya que el fondo es blanco */
  padding: 8px 20px;
  text-transform: capitalize;
}
.header__nav__menu ul li .dropdown li a:after {
  display: none;
}
.header__nav__menu ul li a {
  font-size: 12px;
  font-family: 'Montserrat', sans-serif;;
  color: var(--color-texto);
  display: block;
  text-transform: uppercase;
  position: relative;
  padding: 6px 0;
  transition: all 0.3s ease;
}

.header__nav__menu ul li:hover > a {
  color: var(--color-acento);
}

.header__nav__menu ul li a:after {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: #00d0ff90;
  content: "";
  -webkit-transform: scale(0);
      -ms-transform: scale(0);
          transform: scale(0);
  -webkit-transition: all, 0.3s;
  -o-transition: all, 0.3s;
  transition: all, 0.3s;
}

.header__nav__social {
  display: inline-block;
  position: relative;
  padding-left: 50px;
}
.header__nav__social:before {
  position: absolute;
  left: 0;
  top: 4px;
  height: 13px;
  width: 1px;
  background: rgba(225, 225, 225, 0.2);
  content: "";
}
.header__nav__social a {
  color: var(--color-texto);
  font-size: 12px;
  margin-right: 18px;
}
.header__nav__social a:last-child {
  margin-right: 0;
}

.slicknav_menu {
  display: none;
}

/*---------------------
  Hero
-----------------------*/
.hero__slider.owl-carousel .owl-item.active .hero__text span {
  top: 0;
  opacity: 1;
}
.hero__slider.owl-carousel .owl-item.active .hero__text h2 {
  top: 0;
  opacity: 1;
}
.hero__slider.owl-carousel .owl-item.active .hero__text .primary-btn {
  top: 0;
  opacity: 1;
}
.hero__slider.owl-carousel .owl-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 45px;
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
}
.hero__slider.owl-carousel .owl-dots button {
  color: var(--color-texto-secundario);
  font-size: 16px;
  font-family: 'Montserrat', sans-serif;;
  margin-right: 16px;
  position: relative;
  display: inline-block;
}
.hero__slider.owl-carousel .owl-dots button.active {
  color: var(--color-texto);
}
.hero__slider.owl-carousel .owl-dots button.active:after {
  background: var(--color-texto);
  height: 2px;
}
.hero__slider.owl-carousel .owl-dots button:after {
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.3);
  content: "";
}
.hero__slider.owl-carousel .owl-dots button:last-child {
  margin-right: 0;
}

.hero__item {
  position: relative;
  overflow: hidden;
  height: 100vh;
  display: flex;
  align-items: center;
  background-position: center;
  background-size: cover;
}
.hero-video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
  object-fit: cover;
  z-index: -1;
}

.hero__item::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:linear-gradient(to bottom, rgba(10, 0, 22, 0.5) 50%, rgba(17, 1, 62, 0.5) 100%);
  z-index: -1;
}


.hero__text span {
  color: var(--color-texto);
  display: block;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 18px;
  position: relative;
  top: 100px;
  opacity: 0;
  -webkit-transition: all, 0.3s;
  -o-transition: all, 0.3s;
  transition: all, 0.3s;
}
.hero__text h2 {
  color: var(--color-texto);
  font-size: 58px;
  font-weight: 700;
  line-height: 70px;
  text-transform: uppercase;
  margin-bottom: 38px;
  position: relative;
  top: 100px;
  opacity: 0;
  -webkit-transition: all, 0.5s;
  -o-transition: all, 0.5s;
  transition: all, 0.5s;
}

.gallery-carousel .item img {
  border-radius: 12px;
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
  box-shadow: 0 6px 15px rgba(0,0,0,0.4);
}
.gallery-carousel .item img:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 20px rgba(0,0,0,0.6);
}
/* === Estilos del modal de galería === */
.taller-gallery-modal {
  display: none;
  position: fixed;
  z-index: 99999;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  backdrop-filter: blur(8px);
  background-color: rgba(0, 0, 0, 0.75);
  justify-content: center;
  align-items: center;
  display: flex; /* <<< IMPORTANTE: esto debe estar presente */
}

.taller-gallery-modal-content {
  max-width: 90%;
  max-height: 80vh;
  border-radius: 10px;
  box-shadow: 0 0 25px rgba(0,0,0,0.9);
  animation: zoom 0.3s ease;
}

@keyframes zoom {
  from { transform: scale(0.8); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.close-gallery-modal {
  position: absolute;
  top: 20px;
  right: 40px;
  color: white;
  font-size: 32px;
  font-weight: bold;
  cursor: pointer;
  z-index: 100000;
}



.hero__text .primary-btn {
  position: relative;
  top: 100px;
  opacity: 0;
  -webkit-transition: all, 0.7s;
  -o-transition: all, 0.7s;
  transition: all, 0.7s;
}

@media (max-width: 767px) {
  .hero__item {
    height: 600px; /* Reducir la altura */
    padding-top: 150px; /* Ajustar el padding */
  }

  .hero__text h2 {
    font-size: 28px; /* Reducir el tamaño del título */
    line-height: 35px;
  }

  .hero__text span {
    font-size: 12px; /* Reducir el tamaño del subtítulo */
  }

  .hero__text .primary-btn {
    font-size: 12px; /* Reducir el tamaño del botón */
    padding: 10px 20px;
  }
}
/*---------------------
  Work
-----------------------*/
.work {
  overflow: hidden;
  background: #05000e;
  padding: 25px;
}

.work__gallery {
  display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.work__item {
  height: 311px !important;
  width: calc(16.67% - 10px);
  margin-right: 10px;
  margin-bottom: 10px;
  float: left;
  position: relative;
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
          background-size: cover;
          background-position: center;
          border-radius: 8px;
          overflow: hidden;
}
.work__item:hover .work__item__hover {
  transform: translateY(0);
}
.work__item.large__item {
  height: 633px !important;
  width: calc(33.33% - 10px);
}
.work__item.wide__item {
  width: calc(33.33% - 10px);
  height: 311px !important;
}

.work__item .play-btn {
  display: inline-block;
  color: var(--color-texto);
  font-size: 18px;
  height: 50px;
  width: 50px;
  line-height: 50px;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 50%;
}

.grid-sizer {
  width: calc(16.67% - 10px);
}

.work__item__hover {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 10px;
  transform: translateY(100%);
  transition: transform 0.3s ease;
}
.work__item__hover h4 {
  font-size: 20px;
  color: var(--color-texto);
  font-weight: 700;
}
.work__item__hover ul li {
  color: var(--color-texto-secundario);
  list-style: none;
  font-size: 14px;
  margin-right: 23px;
  position: relative;
  display: inline-block;
}
.work__item__hover ul li:after {
  position: absolute;
  right: -18px;
  top: 1px;
  content: "/";
}
.work__item__hover ul li:last-child {
  margin-right: 0;
}
.work__item__hover ul li:last-child:after {
  display: none;
}

/*---------------------
  Counter
-----------------------*/
.counter {  
  background: var(--color-primario);
  height: auto;
  padding-top: 100px;
  overflow: hidden;
}

.counter__content {
  padding: 0px 50px;
}

.counter__item {
  background: var(--color-secundario);
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
      transform: rotate(45deg);
  height: 255px;
  width: 255px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-align: center;
  position: relative;
  z-index: 1;
}
.counter__item::before {
  position: absolute;
  left: -1px;
  bottom: -2px;
  height: 636px;
  width: 636px;
  border-left: 1px solid var(--color-borde);
  border-top: 1px solid var(--color-borde);
  content: "";
  z-index: -1;
}
.counter__item.second__item {
  margin-top: -185px;
}
.counter__item.second__item:before {
  left: -316px;
  bottom: -65px;
  border-right: 1px solid var(--color-borde);
  border-bottom: 1px solid var(--color-borde);
  border-left: none;
  border-top: none;
}
.counter__item.four__item {
  margin-top: -185px;
}
.counter__item.four__item:before {
  left: -380px;
  bottom: -380px;
  border-right: 1px solid var(--color-borde);
  border-bottom: 1px solid var(--color-borde);
  border-left: none;
  border-top: none;
}
.counter__item.third__item:before {
  left: -65px;
  bottom: -317px;
}

.counter__item__text {
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
      transform: rotate(-45deg);
}
.counter__item__text h2 {
  font-size: 58px;
  color: var(--color-texto);
  font-weight: 700;
  margin-bottom: 6px;
  margin-top: 18px;
}
.counter__item__text p {
  color: var(--color-texto);
  margin-bottom: 0;
}

/*---------------------
  Team
-----------------------*/
.team {
  padding-bottom: 90px;
  background: rgb(6, 0, 17);
}

.section-title.team__title {
  margin-bottom: 90px;
}

.team__item {
  height: 390px;
  margin: 10px 10px 5px;
  position: relative;
  overflow: hidden;
  border-radius: 10%;
  filter: drop-shadow(10px 10px 10px rgba(0, 0, 0, 0.685));
}
.team__item:hover .team__item__text {
  bottom: 0;
}
.team__item.team__item--second {
  margin-top: -60px;
}
.team__item.team__item--third {
  margin-top: -120px;
}
.team__item.team__item--four {
  margin-top: -180px;
}

.team__item__text {
  text-align: center;
  position: absolute;
  left: 0;
  bottom: -500px;
  width: 100%;
  padding: 50px 0 30px;
  z-index: 1;
  -webkit-transition: all, 0.5s;
  -o-transition: all, 0.5s;
  transition: all, 0.5s;
}
.team__item__skills {
  margin-top: 10px;
}
.team__item__skills span {
  display: inline-block;
  background-color: #f0f0f000;
  color: var(--color-texto);
  padding: 5px 10px;
  margin: 0 5px 5px 0;
  border: 2px solid var(--color-acento);
  border-radius: 20px;
  font-size: 13px;
}

.team__item__text:before {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.5);
  content: "";
  z-index: -1;
}
.team__item__text h4 {
  font-size: 20px;
  color: var(--color-texto);
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.team__item__text p {
  color: var(--color-texto);
  font-weight: 300px;
  margin-bottom: 12px;
}
.team__item__text .team__item__social a {
  color: var(--color-texto);
  display: inline-block;
  font-size: 13px;
  margin-right: 18px;
}
.team__item__text .team__item__social a:last-child {
  margin-right: 0;
}

.team__btn {
  position: absolute;
  right: 0;
  bottom: 0;
}

/*---------------------
  Latest
-----------------------*/
.latest {
  background: var(--color-primario);
  padding-bottom: 80px;
}

.blog__item.latest__item {
  margin-bottom: 0;
}
.blog__item.latest__item:hover {
  border: 1px solid #222222 !important;
  background: url(../img/blog/blog-1.jpg);
  background-size: cover;
}

.latest__slider.owl-carousel .owl-item .col-lg-4 {
  max-width: 100%;
}
.latest__slider.owl-carousel .owl-dots {
  text-align: center;
  padding-top: 35px;
}
.latest__slider.owl-carousel .owl-dots button {
  height: 8px;
  width: 8px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  margin-right: 10px;
}
.latest__slider.owl-carousel .owl-dots button.active {
  background: var(--color-acento);
}
.latest__slider.owl-carousel .owl-dots button:last-child {
  margin-right: 0;
}

/*---------------------
  Call To Active
-----------------------*/
.callto {
  padding-top: 130px;
}
.callto.sp__callto {
  padding-top: 0;
  background: var(--color-primario);
}

.callto__text h2 {
  color: var(--color-texto);
  font-size: 40px;
  font-weight: 700;
  line-height: 55px;
  margin-bottom: 22px;
}
.callto__text p {
  font-size: 13px;
  color: var(--color-texto);
  opacity: 0.7;
  text-transform: uppercase;
  margin-bottom: 55px;
}
.callto__text a {
  color: var(--color-texto);
  background: var(--color-acento);
  font-size: 13px;
  font-weight: 700;
  font-family: 'Montserrat', sans-serif;;
  letter-spacing: 2px;
  text-transform: uppercase;
  display: inline-block;
  padding: 14px 32px 12px;
}

/*---------------------
  Footer
-----------------------*/
.footer {
  background: var(--color-primario);
}

.footer__top {
  padding: 30px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer__top__logo {
  line-height: 40px;
}
.footer__top__logo a {
  display: inline-block;
}

.footer__top__social {
  text-align: right;
}
.footer__top__social a {
  display: inline-block;
  font-size: 13px;
  color: var(--color-texto);
  height: 40px;
  width: 40px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  line-height: 44px;
  text-align: center;
  margin-right: 6px;
}
.footer__top__social a:last-child {
  margin-right: 0;
}

.footer__option {
  padding-bottom: 35px;
  padding-top: 75px;
}

.footer__option__item {
  margin-bottom: 35px;
}
.footer__option__item h5 {
  color: var(--color-texto);
  font-weight: 700;
  margin-bottom: 35px;
}
.footer__option__item p {
  font-weight: 300;
  margin-bottom: 20px;
  color: var(--color-texto); /* Asegurado que sea blanco */
}
.footer__option__item .read__more {
  font-size: 13px;
  color: var(--color-texto);
}
.footer__option__item .read__more span {
  font-size: 14px;
  color: var(--color-texto);
  opacity: 0.5;
  position: relative;
  top: 4px;
  margin-left: 5px;
}
.footer__option__item ul li {
  list-style: none;
}
.footer__option__item ul li a {
  color: var(--color-texto-secundario);
  font-size: 14px;
  font-weight: 300;
  line-height: 32px;
}
.footer__option__item form {
  position: relative;
}
.footer__option__item form input {
  height: 50px;
  width: 100%;
  padding-left: 20px;
  border: 1px solid #544E5E;
  background: transparent;
  font-size: 14px;
  color: #00a5b8;
}
.footer__option__item form input::-webkit-input-placeholder {
  color: var(--color-texto-secundario);
}
.footer__option__item form input::-moz-placeholder {
  color: var(--color-texto-secundario);
}
.footer__option__item form input:-ms-input-placeholder {
  color: var(--color-texto-secundario);
}
.footer__option__item form input::-ms-input-placeholder {
  color: var(--color-texto-secundario);
}
.footer__option__item form input::placeholder {
  color: var(--color-texto-secundario);
}
.footer__option__item form button {
  font-size: 18px;
  color: var(--color-texto);
  border: none;
  height: 50px;
  width: 50px;
  background: var(--color-acento);
  line-height: 50px;
  text-align: center;
  position: absolute;
  right: 0;
  top: 0;
}

.footer__copyright {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 30px 0;
}

.footer__copyright__text {
  margin-bottom: 0;
  font-weight: 300;
}
.footer__copyright__text i {
  color: var(--color-acento);
}
.footer__copyright__text a {
  color: var(--color-acento);
}

/*---------------------
  Breadcrumb
-----------------------*/
.breadcrumb-option {
  padding-top: 300px;
  position: relative;
    overflow: hidden;
}
.video-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  
  z-index: -1;
  
}

.video-background video {
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  object-fit: cover;
  back: #000;
}

.breadcrumb__text {
  position: relative;
  z-index: 1;
}

.breadcrumb__text h2 {
  color: var(--color-texto);
  font-size: 48px;
  font-weight: 700;
  margin-bottom: 12px;
}

.breadcrumb__links a {
  font-size: 14px;
  color: var(--color-texto);
  font-weight: 300;
  display: inline-block;
  margin-right: 32px;
  position: relative;
}
.breadcrumb__links a:after {
  position: absolute;
  right: -22px;
  top: -3px;
  content: "/";
  color: var(--color-texto-secundario);
  font-size: 18px;
}
.breadcrumb__links span {
  font-size: 14px;
  color: var(--color-texto-secundario);
  font-weight: 300;
  display: inline-block;
}

/*---------------------
  About
-----------------------*/
.about {
  background: var(--color-primario);
  padding-bottom: 80px;
}

.about__pic__item {
  height: 235px;
  margin-right: -10px;
  margin-bottom: 20px;
}
.about__pic__item.about__pic__item--large {
  height: 490px;
}

.about__text {
  padding-left: 30px;
}
.about__text .services__item .services__item__icon:after {
  border-color: #281A3E;
}

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

/*---------------------
  Testimonial
-----------------------*/
.testimonial {
  background: rgb(6, 0, 17);
  padding-bottom: 50px;
}

.testimonial__slider.owl-carousel .owl-item .col-lg-4 {
  max-width: 100%;
}
.testimonial__slider.owl-carousel .owl-dots {
  text-align: center;
  padding-top: 35px;
}
.testimonial__slider.owl-carousel .owl-dots button {
  height: 8px;
  width: 8px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  margin-right: 10px;
}
.testimonial__slider.owl-carousel .owl-dots button.active {
  background: var(--color-acento);
}
.testimonial__slider.owl-carousel .owl-dots button:last-child {
  margin-right: 0;
}

.testimonial__text {
  padding: 30px 40px 25px 30px;
  border: 1px solid #3D3A64;
  margin-bottom: 25px;
  position: relative;
  z-index: 9;
}
.testimonial__text P {
  color: var(--color-texto); /* Cambiado de --color-texto a blanco */
  font-size: 16px;
  font-weight: 300;
  font-style: italic;
  line-height: 30px;
  margin-bottom: 0;
}

.testimonial__author {
  padding-left: 30px;
}

.testimonial__author__pic {
  float: left;
  margin-right: 20px;
}
.testimonial__author__pic img {
  height: 50px;
  width: 50px;
  border-radius: 50%;
}

.testimonial__author__text {
  overflow: hidden;
}
.testimonial__author__text h5 {
  color: var(--color-texto);
  font-weight: 700;
  margin-bottom: 8px;
}
.testimonial__author__text span {
  color: var(--color-texto);
  font-size: 12px;
  font-weight: 300px;
  display: inline-block;
}

/*---------------------
  Services
-----------------------*/
.services {
  background: var(--color-primario);
  padding-bottom: 60px;
  padding-top: 110px;
}
/* Overlay para el fondo difuminado */
.services-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  z-index: 999;
}

.services__title p {
  margin-bottom: 45px;
}

.services__item {
  margin-bottom: 45px;
}
.services__item:hover .services__item__icon:after {
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
      transform: rotate(45deg);
}
.services__item h4 {
  color: var(--color-texto);
  font-size: 20px;
  font-weight: 700;
  margin-top: 26px;
  margin-bottom: 18px;
}
.services__item p {
  margin-bottom: 0;
}

.services__item__icon {
  position: relative;
  height: 70px;
  width: 70px;
  line-height: 70px;
  text-align: center;
}
.services__item__icon:after {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border: 2px solid var(--color-acento);
  content: "";
  -webkit-transition: all, 0.5s;
  -o-transition: all, 0.5s;
  transition: all, 0.5s;
}

/*---------------------
  Services Page
-----------------------*/
.services-page {
  background: var(--color-primario);
  padding-bottom: 50px;
}

/*---------------------
  Logo
-----------------------*/
.logo {
  background: var(--color-primario);
  padding: 15px 20px;
}

.logo__carousel.owl-carousel .owl-item img {
  width: auto;
  display: inline-block;
}

/*---------------------
  Portfolio
-----------------------*/
.portfolio {
  background: var(--color-primario);
}

.portfolio__filter {
  text-align: center;
  margin-bottom: 40px;
}
.portfolio__filter li {
  list-style: none;
  font-size: 14px;
  color: var(--color-texto-secundario);
  margin-right: 5px;
  display: inline-block;
  cursor: pointer;
  padding: 6px 22px;
}
.portfolio__filter li.active {
  border: 1px solid var(--color-acento);
}
.portfolio__filter li:last-child {
  margin-right: 0;
}

.portfolio__item {
  margin-bottom: 35px;
}
.portfolio__item:hover .portfolio__item__text h4:after {
  opacity: 1;
}

.portfolio__item__image {
  position: relative;
  overflow: hidden;
  height: 100%;
  width: 100%;
  padding-top: 100%;
  /* This creates a 4:3 aspect ratio. Adjust as needed. */
}

.portfolio__item__image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 50%;
    object-fit: cover;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.portfolio__item__image img:hover {
    transform: scale(1.5);
}
.portfolio__item__video {
  height: 240px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-bottom: 28px;
}
.portfolio__item__video .play-btn {
  display: inline-block;
  color: var(--color-texto);
  font-size: 18px;
  height: 50px;
  width: 50px;
  line-height: 50px;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 50%;
}

.portfolio__item__text {
  text-align: center;
}
.portfolio__item__text h4 {
  color: var(--color-texto);
  display: inline-block;
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 8px;
  position: relative;
}
.portfolio__item__text h4:after {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 100%;
  background: #333;
  content: "";
  -webkit-transition: all, 0.3s;
  -o-transition: all, 0.3s;
  transition: all, 0.3s;
  opacity: 0;
}
.portfolio__item__text ul li {
  list-style: none;
  display: inline-block;
  font-size: 14px;
  font-weight: 300;
  margin-right: 24px;
  position: relative;
  color: var(--color-texto-secundario);
}
.portfolio__item__text ul li:after {
  position: absolute;
  right: -16px;
  top: 0;
  content: "/";
}
.portfolio__item__text ul li:last-child {
  margin-right: 0;
}
.portfolio__item__text ul li:last-child:after {
  display: none;
}
.portfolio__item__text span {
  font-size: 14px;
  font-weight: 300;
  color: var(--color-texto); /* Cambiado de --color-texto-secundario a blanco */
  display: block;
}

.pagination__option {
  text-align: center;
  padding-top: 20px;
}
.pagination__option.blog__pagi {
  padding-top: 5px;
}
.pagination__option .arrow__pagination {
  font-size: 13px;
  color: var(--color-texto);
  display: inline-block;
  text-transform: uppercase;
}
.pagination__option .arrow__pagination.left__arrow {
  margin-right: 26px;
}
.pagination__option .arrow__pagination.right__arrow {
  margin-left: 18px;
}
.pagination__option .arrow__pagination span {
  opacity: 0.5;
}
.pagination__option .number__pagination {
  font-size: 16px;
  color: var(--color-texto);
  height: 50px;
  width: 50px;
  background: rgba(242, 242, 242, 0.1);
  line-height: 50px;
  text-align: center;
  display: inline-block;
  margin-right: 6px;
}

.number__pagination.active {
  font-weight: bold;
  color: #ff5722;
}

/*---------------------
    Blog
-----------------------*/
.blog {
  background: var(--color-primario);
}

.blog__item {
  border: 1px solid #e90e0e;
  padding: 40px 48px 35px 30px;
  position: relative;
  z-index: 1;
  margin-bottom: 45px;
}
.blog__item:hover {
  border: 1px solid transparent !important;
  background: url(../img/blog/blog-2.jpg) no-repeat;
  background-size: cover;
}
.blog__item:hover ul li {
  color: var(--color-texto);
}
.blog__item:hover p {
  color: var(--color-texto);
}
.blog__item h4 {
  color: var(--color-texto);
  font-weight: 700;
  line-height: 31px;
  margin-bottom: 18px;
}
.blog__item ul {
  margin-bottom: 20px;
}
.blog__item ul li {
  color: var(--color-texto-secundario); /* Cambiado de #777777 a blanco semi-transparente */
  list-style: none;
  font-size: 12px;
  font-weight: 300;
  margin-right: 25px;
  position: relative;
  display: inline-block;
}
.blog__item ul li:after {
  position: absolute;
  right: -16px;
  top: 0px;
  content: "/";
}
.blog__item ul li:last-child {
  margin-right: 0;
}
.blog__item ul li:last-child:after {
  display: none;
}
.blog__item p {
  font-weight: 300;
  line-height: 29px;
  margin-bottom: 22px;
  color: var(--color-texto); /* Asegurado que sea blanco */
}
.blog__item a {
  font-size: 14px;
  color: var(--color-texto);
}
.blog__item a span {
  font-size: 14px;
  color: var(--color-texto);
  opacity: 0.5;
  position: relative;
  top: 4px;
  margin-left: 5px;
}

/*---------------------
  Blog Details Hero
-----------------------*/
.blog-hero {
  padding: 300px 0 230px;
}

.blog__hero__text {
  text-align: center;
}
.blog__hero__text h2 {
  color: var(--color-texto);
  font-weight: 700;
  line-height: 47px;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.blog__hero__text ul li {
  font-size: 12px;
  color: var(--color-texto);
  font-weight: 300;
  list-style: none;
  display: inline-block;
  margin-right: 25px;
  position: relative;
}
.blog__hero__text ul li:after {
  position: absolute;
  right: -18px;
  top: 0;
  content: "/";
}
.blog__hero__text ul li:last-child {
  margin-right: 0;
}
.blog__hero__text ul li:last-child:after {
  display: none;
}
.blog__hero__text ul li span {
  text-transform: uppercase;
}

/*---------------------
  Blog Details
-----------------------*/
.blog-details {
  background: var(--color-primario);
}

.blog__details__text {
  margin-bottom: 30px;
}
.blog__details__text p {
  font-size: 16px;
  line-height: 29px;
  font-weight: 300;
  margin-bottom: 20px;
  color: var(--color-texto); /* Asegurado que sea blanco */
}
.blog__details__text p:last-child {
  margin-bottom: 0;
}

.blog__details__quote {
  border: 1px solid rgba(225, 225, 225, 0.8);
  padding: 35px 90px 35px 40px;
  position: relative;
  margin-bottom: 35px;
}
.blog__details__quote p {
  font-size: 20px;
  font-weight: 300;
  line-height: 35px;
  font-style: italic;
  margin-bottom: 10px;
  color: var(--color-texto); /* Asegurado que sea blanco */
}
.blog__details__quote h6 {
  font-size: 13px;
  color: var(--color-texto); /* Cambiado de --color-texto-secundario a blanco */
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.blog__details__quote i {
  font-size: 34px;
  color: var(--color-acento);
  position: absolute;
  right: 30px;
  bottom: 25px;
}

.blog__details__desc {
  margin-bottom: 50px;
}
.blog__details__desc p {
  font-size: 16px;
  line-height: 29px;
  font-weight: 300;
  margin-bottom: 20px;
  color: var(--color-texto); /* Asegurado que sea blanco */
}
.blog__details__desc p:last-child {
  margin-bottom: 0;
}

.blog__details__tags {
  padding-bottom: 60px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 65px;
}
.blog__details__tags span {
  display: inline-block;
  font-size: 13px;
  color: var(--color-texto);
  font-weight: 300;
  margin-right: 25px;
}
.blog__details__tags a {
  font-size: 14px;
  font-weight: 300;
  color: var(--color-texto);
  display: inline-block;
  margin-right: 11px;
  padding: 8px 15px 7px;
  margin-bottom: 5px;
  background: rgba(255, 255, 255, 0.1);
}

.blog__details__option {
  margin-bottom: 40px;
}

.blog__details__option__item {
  margin-bottom: 30px;
  overflow: hidden;
  display: block;
}
.blog__details__option__item h5 {
  color: var(--color-texto);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 25px;
}
.blog__details__option__item h5 i {
  font-size: 16px;
  margin-right: 5px;
}
.blog__details__option__item.blog__details__option__item--right h5 {
  text-align: right;
}
.blog__details__option__item.blog__details__option__item--right h5 i {
  margin-right: 0;
  margin-left: 5px;
}
.blog__details__option__item.blog__details__option__item--right .blog__details__option__item__img {
  float: right;
  margin-right: 0;
  margin-left: 25px;
}
.blog__details__option__item.blog__details__option__item--right .blog__details__option__item__text {
  margin-right: 25px;
  text-align: right;
  float: none;
}

.blog__details__option__item__img {
  float: left;
  margin-right: 25px;
}

.blog__details__option__item__text {
  overflow: hidden;
}
.blog__details__option__item__text h6 {
  color: var(--color-texto);
  line-height: 21px;
  font-weight: 700;
  margin-bottom: 5px;
}
.blog__details__option__item__text span {
  font-size: 12px;
  color: var(--color-texto-secundario); /* Cambiado de #777777 a blanco semi-transparente */
  font-weight: 300;
}

.blog__details__recent {
  margin-bottom: 60px;
}
.blog__details__recent h4 {
  color: var(--color-texto);
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 35px;
  text-align: center;
}

.blog__details__recent__item {
  margin-bottom: 30px;
}
.blog__details__recent__item img {
  min-width: 100%;
  margin-bottom: 20px;
}
.blog__details__recent__item h5 {
  color: var(--color-texto);
  font-weight: 700;
  line-height: 23px;
  margin-bottom: 4px;
}
.blog__details__recent__item span {
  color: var(--color-texto-secundario); /* Cambiado de #777777 a blanco semi-transparente */
  font-size: 12px;
  font-weight: 300;
}

.blog__details__comment h4 {
  color: var(--color-texto);
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 35px;
  text-align: center;
}
.blog__details__comment form textarea {
  height: 120px;
  width: 100%;
  border: 1px solid rgba(225, 225, 225, 0.5);
  background: transparent;
  font-size: 14px;
  color: var(--color-texto); /* Cambiado de --color-texto-secundario a blanco */
  padding-top: 12px;
  padding-left: 20px;
  font-weight: 300;
  margin-bottom: 14px;
  resize: none;
}
.blog__details__comment form textarea:placeholder {
  color: var(--color-texto-secundario); /* Mantiene el placeholder un poco más tenue */
}

.input__list {
  margin-right: -20px;
  overflow: hidden;
}
.input__list input {
  height: 50px;
  width: calc(33.33% - 20px);
  float: left;
  border: 1px solid rgb(0, 170, 200);
  background: transparent;
  font-size: 14px;
  color: var(--color-texto); /* Cambiado de --color-texto-secundario a blanco */
  padding-left: 20px;
  font-weight: 300;
  margin-right: 20px;
  margin-bottom: 20px;
}
.input__list input:placeholder {
  color: var(--color-texto-secundario); /* Mantiene el placeholder un poco más tenue */
}

/*---------------------
  Contact Widget
-----------------------*/
.contact-widget {
  background: var(--color-primario);
  padding-bottom: 70px;
}

.contact__widget__item {
  margin-bottom: 30px;
}

.contact__widget__item__icon {
  height: 70px;
  width: 70px;
  border: 1px solid rgba(225, 225, 225, 0.5);
  line-height: 80px;
  text-align: center;
  border-radius: 50%;
  float: left;
  margin-right: 30px;
}
.contact__widget__item__icon i {
  font-size: 28px;
  color: var(--color-texto);
}

.contact__widget__item__text {
  overflow: hidden;
  padding-top: 7px;
}
.contact__widget__item__text h4 {
  font-size: 20px;
  color: var(--color-texto);
  font-weight: 700;
  margin-bottom: 10px;
}
.contact__widget__item__text p {
  margin-bottom: 0;
  color: var(--color-texto); /* Asegurado que sea blanco */
}

/*---------------------
  Contact
-----------------------*/
.contact {
  background: var(--color-primario);
  padding-top: 0;
  overflow: hidden;
}

.contact__map {
  height: 450px;
}
.contact__map iframe {
  width: 100%;
}

.contact__form h3 {
  color: var(--color-texto);
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 35px;
}
.contact__form form input {
  height: 50px;
  width: 100%;
  border: 1px solid rgba(225, 225, 225, 0.5);
  background: transparent;
  font-size: 14px;
  color: var(--color-texto); /* Cambiado de --color-texto-secundario a blanco */
  padding-left: 20px;
  font-weight: 300;
  margin-right: 20px;
  margin-bottom: 20px;
  -webkit-transition: all, 0.3s;
  -o-transition: all, 0.3s;
  transition: all, 0.3s;
}
.contact__form form input:placeholder {
  color: var(--color-texto-secundario); /* Mantiene el placeholder un poco más tenue */
}
.contact__form form input:focus {
  border-color: #e1e1e1;
}
.contact__form form textarea {
  height: 110px;
  width: 100%;
  border: 1px solid rgba(225, 225, 225, 0.5);
  background: transparent;
  font-size: 14px;
  color: var(--color-texto); /* Cambiado de --color-texto-secundario a blanco */
  padding-top: 12px;
  padding-left: 20px;
  font-weight: 300;
  margin-bottom: 14px;
  resize: none;
  -webkit-transition: all, 0.3s;
  -o-transition: all, 0.3s;
  transition: all, 0.3s;
}
.contact__form form textarea:placeholder {
  color: var(--color-texto-secundario); /* Mantiene el placeholder un poco más tenue */
}
.contact__form form textarea:focus {
  border-color: #e1e1e1;
}

/*--------------------------------- Responsive Media Quaries -----------------------------*/
@media only screen and (min-width: 1200px) {
  .container {
    max-width: 90%;
  }
}
/* Medium Device = 1200px */
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .header__nav__menu {
    margin-right: 25px;
  }

  .header__nav__menu ul li {
    margin-right: 25px;
  }

  .header__nav__social {
    padding-left: 25px;
  }

  .counter__item::before {
    display: none;
  }

  .counter__content {
    padding: 0px 145px 0 50px;
  }

  .counter__item.second__item {
    margin-top: -210px;
  }

  .counter__item.four__item {
    margin-top: -210px;
  }

  .hero__slider.owl-carousel .owl-dots {
    max-width: 9930px !important;
  }
}
/* Tablet Device = 768px */
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero__slider.owl-carousel .owl-dots {
    max-width: 900px !important;
  }

  .services__title {
    margin-bottom: 50px;
  }

  .counter__item {
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
        transform: rotate(0);
    margin-bottom: 30px;
    width: auto;
  }

  .counter__item::before {
    display: none;
  }

  .counter__content {
    padding: 0;
  }

  .counter__item.second__item {
    margin-top: 0;
  }

  .counter__item.four__item {
    margin-top: 0;
  }

  .counter__item__text {
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
        transform: rotate(0);
  }

  .counter {
    height: auto;
    padding-top: 100px;
    padding-bottom: 70px;
  }

  .team__item.team__item--second {
    margin-top: 0;
  }

  .team__item.team__item--third {
    margin-top: 0;
  }

  .team__item.team__item--four {
    margin-top: 0;
  }

  .team__btn {
    position: relative;
    padding-top: 50px;
  }

  .about__pic {
    margin-bottom: 50px;
  }

  .about__text {
    padding-left: 0;
  }

  .portfolio__filter li {
    padding: 6px 15px;
  }

  .slicknav_menu {
    background: transparent;
    padding: 0;
    display: block;
  }

  .slicknav_nav ul {
    margin: 0;
    padding: 10px 30px;
  }

  .slicknav_nav .slicknav_row,
.slicknav_nav a {
    padding: 7px 0;
    margin: 0;
    color: var(--color-texto);
    font-weight: 600;
  }

  .slicknav_nav .slicknav_row:hover {
    border-radius: 0;
    background: transparent;
    color: #111111;
  }

  .slicknav_nav a:hover {
    border-radius: 0;
    background: transparent;
    color: #08042a;
  }

  .slicknav_nav {
    background: #222222;
  }

  .slicknav_btn {
    position: absolute;
    right: 10px;
    top: 20px;
    background: #020c338c;
  }

  .header .container {
    position: relative;
  }

  .header__nav__option {
    display: none;
  }
}
/* Wide Mobile = 480px */
@media only screen and (max-width: 767px) {
  .services__title {
    margin-bottom: 50px;
  }

  .counter__item {
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
        transform: rotate(0);
    margin-bottom: 30px;
    width: auto;
  }

  .counter__item::before {
    display: none;
  }

  .counter__content {
    padding: 0;
  }

  .counter__item.second__item {
    margin-top: 0;
  }

  .counter__item.four__item {
    margin-top: 0;
  }

  .counter__item__text {
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
        transform: rotate(0);
  }

  .counter {
    height: auto;
    padding-top: 100px;
    padding-bottom: 70px;
  }

  .team__item.team__item--second {
    margin-top: 0;
  }

  .team__item.team__item--third {
    margin-top: 20px;
  }

  .team__item.team__item--four {
    margin-top: 20px;
  }

  .team__btn {
    position: relative;
    padding-top: 50px;
  }

  .about__pic {
    margin-bottom: 50px;
  }

  .about__text {
    padding-left: 0;
  }

  .hero__slider.owl-carousel .owl-dots {
    max-width: auto;
    padding: 0 15px;
  }

  .slicknav_menu {
    background: transparent;
    padding: 0;
    display: block;
  }

  .slicknav_nav ul {
    margin: 0;
    padding: 10px 30px;
  }

  .slicknav_nav .slicknav_row,
.slicknav_nav a {
    padding: 7px 0;
    margin: 0;
    color: var(--color-texto);
    font-weight: 600;
  }

  .slicknav_nav .slicknav_row:hover {
    border-radius: 0;
    background: transparent;
    color: #111111;
  }

  .slicknav_nav a:hover {
    border-radius: 0;
    background: transparent;
    color: #111111;
  }

  .slicknav_nav {
    background: #222222;
  }

  .slicknav_btn {
    position: absolute;
    right: 10px;
    top: 20px;
    background: #0a012aa1;
  }

  .header .container {
    position: relative;
  }

  .header__nav__option {
    display: none;
  }

  .hero__text h2 {
    font-size: 38px;
    line-height: 40px;
  }

  .grid-sizer {
    width: calc(50% - 10px);
  }

  .work__item.wide__item {
    width: calc(50% - 10px);
  }

  .work__item {
    width: calc(50% - 10px);
  }

  .work__item.large__item {
    width: calc(50% - 10px);
  }

  .footer__top__social {
    text-align: left;
    padding-top: 30px;
  }

  .portfolio__filter li {
    margin-bottom: 10px;
  }

  .input__list {
    margin-right: 0;
  }

  .input__list input {
    width: 100%;
    margin-right: 0;
  }

  .contact__map {
    margin-bottom: 40px;
  }

  .team__item {
    margin-bottom: 20px;
  }

  .team .p-0 {
    padding: 0 15px !important;
  }

  .about__pic__item {
    margin-right: 0;
  }

  .blog__details__quote {
    padding: 30px 45px 35px 35px;
  }
}
/* Small Device = 320px */
@media only screen and (max-width: 479px) {
  .hero__text h2 {
    font-size: 28px;
    line-height: 40px;
  }

  .grid-sizer {
    width: 100%;
  }

  .work__item.wide__item {
    width: 100%;
  }

  .work__item {
    width: 100% !important; /* Asegura que todos los ítems ocupen el 100% del ancho */
    margin-bottom: 10px; /* Espacio entre ítems */
  }

  .work__item.large__item {
    width: 100%;
  }

  .work__gallery {
    padding-top: 15px;
        padding-bottom: 15px;
  }

  .pagination__option .arrow__pagination.left__arrow {
    margin-right: 15px;
  }

  .pagination__option .arrow__pagination.right__arrow {
    margin-left: 10px;
  }

  .blog__details__quote {
    padding: 30px 40px 35px 35px;
  }
  .work__item.wide__item,
  .work__item.large__item,
  .work__item.small__item {
      width: 100% !important; /* Asegura que todos los ítems ocupen el 100% del ancho */
  }

  .work__item__hover {
      padding: 5px; /* Reduce el padding para ahorrar espacio */
  }

  .play-btn {
      font-size: 16px; /* Reduce el tamaño del ícono de play */
      padding: 8px;
  }
}


.whatsapp-button {
  position: fixed;
  bottom: 20px;
  right: 20px;
  border: none;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  font-size: 22px;
  cursor: pointer;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  z-index: 1000; /* Para que esté por encima de otros elementos */
}

.whatsapp-button:hover {
  background-color: var(--color-texto); /* Color al pasar el mouse */
}

/* Animación de pulso */
@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

.whatsapp-button {
  animation: pulse 2s infinite; /* Aplica la animación */
}

/* Estilos para el tooltip */
.tooltip {
  visibility: hidden;
  background-color: #009af3;
  color: #fff;
  text-align: center;
  border-radius: 5px;
  padding: 5px;
  position: absolute;
  top: 50%; /* Alinea verticalmente con el botón */
  right: 115%; /* Coloca el tooltip a la derecha del botón */
  transform: translateY(-50%); /* Centra verticalmente */
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.3s;
  margin-left: 10px; /* Espacio entre el botón y el tooltip */
}

.whatsapp-button:hover .tooltip,
.whatsapp-button:focus .tooltip {
  visibility: visible;
  opacity: 1;
}

/* Estilos para móviles */
@media (max-width: 767px) {
  .whatsapp-button {
    width: 40px; /* Tamaño más pequeño */
    height: 40px;
    font-size: 16px; /* Tamaño del icono más pequeño */
    bottom: 20px; /* Posición desde la parte inferior */
    right: 20px; /* Posición desde la derecha */
  }
}

    /* Estilos para el encabezado de la sección */
    .section-header {
        text-align: center; /* Centra el texto */
        margin-bottom: 40px; /* Espacio entre el encabezado y las tarjetas */
        width: 100%; /* Ocupa todo el ancho disponible */
    }

    .section-header h2 {
        font-size: 2rem; /* Tamaño del título */
        color: var(--color-texto); /* Cambiado de #333 a blanco */
        margin-bottom: 10px; /* Espacio entre el título y el subtítulo */
    }

    .section-header p {
        font-size: 1rem; /* Tamaño del subtítulo */
        color: var(--color-texto); /* Cambiado de #666 a blanco */
        max-width: 600px; /* Ancho máximo del subtítulo */
        margin: 0 auto; /* Centra el subtítulo */
    }

    /* Estilos generales para la sección de tarjetas */
    .cards-section {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        padding: 20px;
        background-color: #f9f9f900;
    }

    /* Estilos para cada tarjeta */
    .card {
        flex: 1 1 calc(16.66% - 20px);
        margin: 10px;
        padding: 20px;
        background-color: #0ca2ff00;
        border-radius: 5%;
        text-align: center;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .card:hover {
        transform: translateY(-10px);
        box-shadow: 0 8px 16px rgba(148, 148, 148, 0.2);
    }

    .card i {
        font-size: 2rem;
        color: #007bff;
        margin-bottom: 15px;
    }

    .card h3 {
        font-size: 1.25rem;
        margin-bottom: 10px;
        color: var(--color-texto); /* Cambiado de #333 a blanco */
    }

    .card p {
        font-size: 0.9rem;
        color: var(--color-texto-secundario); /* Cambiado de #666 a blanco semi-transparente */
    }

    /* Responsive Design */
    @media (max-width: 768px) {
        .card {
            flex: 1 1 calc(50% - 30px);
        }
    }
    @media (max-width: 768px) {
      .card {
        flex: 1 1 100%; /* Ocupar todo el ancho en móviles */
        margin: 5px 30px; /* Reducir el margen */
      }
    }

    @media (max-width: 480px) {
      .card {
        flex: 1 1 100%; /* Ocupar todo el ancho en móviles */
        margin: 5px 30px; /* Reducir el margen */
      }
    }
/* Estilos para la sección de servicios */
.services-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  background: #00001b;
}

.services-row {
  display: flex;
  justify-content: space-around;
  width: 100%;
  margin-bottom: 20px;
}

.service-title {
  font-size: 18px;
  margin: 10px 0;
  color: var(--color-texto);
  padding-top: 10px;
  font-weight: bold;
}

.service-title2 {
  font-size: 18px;
  margin: 10px 0;
  color: var(--color-primario);
  padding-top: 10px;
  font-weight: bold;
}

.service-card {
  width: 30%;
  background-color: rgba(26, 11, 79, 0.517);
  border-radius: 20px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  color: rgb(255, 255, 255);
  overflow: hidden;
  text-align: center;
  cursor: pointer;
  transition: transform 0.3s ease;
  position: relative;
  padding-top: 30px;
  padding-bottom: 25px;
}

.service-card img {
  width: 100%;
  height: auto;
}

.service-card p {
  padding: 10px;
  font-size: 14px;
  color: var(--color-texto); /* Asegurado que sea blanco */
}

.service-card button {
  margin: 10px;
  padding: 10px 20px;
  background-color: #007BFF;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

/* Contenido expandido (oculto por defecto) */
.expanded-content {
  display: none;
  padding: 20px;
  max-height: 80vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  color: var(--color-texto); /* Asegurado que sea blanco */
}

/* Estilos para la tarjeta expandida */
.service-card.expanded {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
  width: 90%;
  max-width: 600px;
  max-height: 90vh;
  background-color: rgb(6, 0, 17);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
  border-radius: 20px;
  overflow: hidden;
  padding: 20px;
}
/* Ajustes responsive */
@media (max-width: 768px) {
  .service-card.expanded {
    width: 95%;
    max-height: 85vh;
    transform: translate(-50%, -50%) scale(1);
    padding: 15px;
  }

  .expanded-content {
    padding: 15px;
    font-size: 12px;
  }
}

@media (max-width: 480px) {
  .service-card.expanded {
    width: 98%;
    max-height: 80vh;
    padding: 10px;
  }

  .expanded-content {
    padding: 10px;
  }
}
.service-card.expanded .img1,
.service-card.expanded .text1,
.service-card.expanded button {
  display: none;
}

.service-card.expanded .expanded-content {
  display: block;
}

.dark-mode {
  background-color: #121212;
  color: var(--color-texto);
}

.dark-mode a {
  color: var(--color-texto);
}

    #cliengo-chat-button {
      width: 1000px !important;
      /* Cambia el ancho del botón */
      height: 100px !important;
      /* Cambia la altura del botón */
    }


#openModal {
  background-color: #4CAF50;
  color: rgb(255, 255, 255);
  border: none;
  padding: 15px;
  cursor: pointer;
  border-radius: 100%;
}

.modal {
  display: none;
  position: fixed;
  /* Fija la ventana en la pantalla */
  z-index: 1000;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  /* Centra la ventana */
  width: 100%;
  /* Limita la altura máxima al 90% del viewport */
  overflow-y: auto;
  /* Permite el desplazamiento interno si el contenido es muy largo */
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.modal-content {
  position: relative;
}

/* Ajuste de color para el botón de cerrar modal */
.close {
  position: absolute;
  top: -10px;
  right: -10px;
  font-size: 22px;
  cursor: pointer;
  color: #fff; /* Cambiado de #333 a blanco */
}

.overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(1, 4, 23, 0.513);
  backdrop-filter: blur(8px);
  z-index: 999;
}

form {
  display: flex;
  flex-direction: column;
}

label {
  margin-bottom: 5px;
  color: var(--color-texto); /* Asegurado que sea blanco */
}

input {
  margin-bottom: 10px;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

button[type="submit"] {
  background-color: #4CAF50;
  color: white;
  border: none;
  padding: 10px;
  cursor: pointer;
  border-radius: 4px;
}

button[type="submit"]:hover {
  background-color: #45a049;
}




/* ===== LOGIN PAGE ===== */
.login-box {
  -webkit-box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.1);
  box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.1);
  border-radius: 10px;
}

@media (min-width: 992px) {
  .login-box {
    margin: 40px 0;
  }
}

.login-box .form-wrap {
  padding: 30px 25px;
  border-radius: 10px;
  -webkit-box-shadow: 0 10px 10px 10px rgba(0, 0, 0, 0.404);
  box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.276);
}

@media (min-width: 768px) {
  .login-box .form-wrap {
    padding: 45px;
    padding-top: 10px;
  }
}

@media (min-width: 992px) {
  .login-box .form-wrap {
    margin-top: -40px;
    margin-bottom: -40px;
    padding: 60px;
  }
}

.login-box .socials a {
  -webkit-box-shadow: 0 3px 2px 0 rgba(0, 0, 0, 0.12);
  box-shadow: 0 3px 2px 0 rgba(0, 0, 0, 0.12);
}

.login-section {
  position: relative;
  z-index: 0;
}

.login-section::after {
  position: absolute;
  content: '';
  right: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  opacity: 0.15;
  z-index: -1;

  background-size: cover;
  background-repeat: no-repeat;
  background-position: top right;
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-name: pulse;
  animation-name: pulse;
}

.login-section::before {
  position: absolute;
  content: '';
  opacity: 0.10;
  right: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: -1;

  background-size: cover;
  background-position: top right;
  -webkit-animation-duration: 6s;
  animation-duration: 6s;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-name: pulse;
  animation-name: pulse;
}

.login-section .content {
  padding: 45px;
}

.form-group .zmdi {
  position: absolute;
  z-index: 1;
  color: var(--color-texto); /* Cambiado de rgb(4, 47, 81) a blanco */
  background-color: #007bff00;
  border-radius: 5px;
  height: 100%;
  width: 45px;
  text-align: center;
  font-size: 18px;
  padding-top: 13px;
}

.form-group input[type='text'],
.form-group input[type='email'],
.form-group input[type='password'] {
  padding-left: 60px;
}

.form-control {
  border: 1px solid #e1e1e1;
  -webkit-box-shadow: none;
  box-shadow: none;
  border-radius: 5px;
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
  background-color: #eaeaea;
  color: var(--color-texto-secundario); /* Color de texto predeterminado para inputs */
  font-weight: 400;
  position: relative;
}

/* Color específico para el texto en los inputs cuando el modo oscuro está activo */
.dark-mode .form-control {
    color: var(--color-texto);
}


.login-box .socials a {
  -webkit-box-shadow: 0 3px 2px 0 rgba(0, 0, 0, 0.12);
  box-shadow: 0 3px 2px 0 rgba(0, 0, 0, 0.12);
}

.socials a {
  width: 35px;
  height: 35px;
  background-color: #6893e1;
  border-radius: 50%;
  -webkit-box-shadow: 0 3px 2px 0 #516cd9;
  box-shadow: 0 3px 2px 0 #516cd9;
  text-align: center;
  color: #fff;
  padding-top: 10px;
  font-size: 14px;
  margin-right: 10px;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.instagram-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  z-index: 999;
}


.instagram-feed {
  overflow: hidden;
  background: rgb(0, 0, 24);
  padding: 0 10px;
}

.instagram-post {
  width: 100%;
  aspect-ratio: 1;
  position: relative;
  overflow: hidden;
  background-color: var(--color-texto)a3;
  box-shadow: 0 4px 8px rgba(143, 143, 143, 0.78);
  cursor: pointer;
  transition: transform 0.3s ease;
  border-radius: 15px;
}

.instagram-post:hover {
  transform: scale(1.02);
  border-radius: 12px;
}

.instagram-modal {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
  width: 90%;
  max-width: 500px;
  background: transparent;
  height: auto;
  max-height: 90vh;
  overflow: hidden;
}

.close-modal-btn {
  position: absolute;
  top: -10px; /* Ajusta según sea necesario */
  right: -10px; /* Ajusta según sea necesario */
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 22px;
  color: #fff;
  cursor: pointer;
  z-index: 1001; /* Asegura que esté por encima del contenido del modal */
}

.close-modal-btn:hover {
  background: rgba(255, 255, 255, 0.3);
}

.instagram-modal iframe {
  width: 100% !important;
  min-width: 100% !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

@media (max-width: 768px) {
  .instagram-modal {
      width: 95%;
      max-height: 80vh;
  }
  
  .close-modal-btn {
      top: 10px;
      right: 10px;
      width: 35px;
      height: 35px;
      font-size: 18px;
  }
  .instagram-modal .modal-content {
    height: auto;
  }
}


.instagram-media {
  max-width: 100% !important;
  width: 100% !important;
  min-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Modal Styles */
#instagramModal .modal-content {
  background-color: transparent;
  border: none;
}

#instagramModal .modal-header {
  border: none;
  padding: 0.5rem;
  position: absolute;
  right: 0;
  z-index: 1;
}

#instagramModal .btn-close {
  background-color: #00d0ff;
  opacity: 0.8;
  border-radius: 50%;
  padding: 0.5rem;
}

#instagramModal .modal-dialog {
  max-width: 550px;
}

#instagramModal .modal-content {
  background: transparent;
}

#instagramModal .modal-body {
  padding: 0;
}

#instagramModal .instagram-media {
  min-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  background-color: white;
  border-radius: 8px;
}

.instagram-post {
  cursor: pointer;
}

.instagram-post:hover {
  opacity: 0.9;
}

#instagramModal .modal-dialog {
  max-width: 500px;
  margin: 1.75rem auto;
}

/* Responsive Styles */
@media (max-width: 991.98px) {
  .navbar-collapse {
      background-color: rgba(16, 5, 34, 0.95);
      padding: 1rem;
      border-radius: 8px;
      margin-top: 0.5rem;
  }
  
  .navbar.scrolled .navbar-collapse {
      background-color: #fff;
  }
}

.header-wrapper {
  flex-wrap: wrap;
  gap: 1rem;
}

.text-content {
  flex: 1;
  min-width: 300px;
}

.follow-button {
  display: flex;
  align-items: center;
}

@media (max-width: 768px) {
  .header-wrapper {
      text-align: center;
      flex-direction: column;
  }
  
  .follow-button {
      width: 100%;
      justify-content: center;
  }
}

@media (max-width: 768px) {
  .instagram-feed {
      padding: 60px 0 20px;
  }

  .instagram-post {
      margin-bottom: 10px;
  }

  .row.g-3 {
      --bs-gutter-x: 0.5rem;
      --bs-gutter-y: 0.5rem;
  }
}
.instagram-link {
  cursor: pointer;
  display: block;
  width: 100%;
  height: 100%;
}

.instagram-post .instagram-media {
  pointer-events: none;
  margin: 0 !important;
  min-width: unset !important;
  width: 100% !important;
}

#instagramModal .instagram-media {
  pointer-events: auto;
}
.instagram-feed .btn-outline-light:hover {
  background-color: var(--color-texto);
  border-color: #007bff;

}

.instagram-feed .display-4 {
  text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
}

.instagram-feed .lead {
  font-size: 1.25rem;
  font-weight: 300;
}
.instagram-carousel {
  margin: 0 -10px;
}

.instagram-feed .instagram-post {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  background-color: #000017;
  box-shadow: 0 4px 10px rgba(0, 191, 231, 0.15);
  transition: transform 0.3s ease;
}

.instagram-feed .instagram-post:hover {
  transform: scale(1.03);
}

.instagram-feed .instagram-post a {
  display: block;
  height: 100%;
  width: 100%;
  position: relative;
}

.instagram-feed .instagram-post .instagram-thumb {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  position: relative;
  border-radius: 12px;
}

.instagram-feed .instagram-post .overlay {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: rgba(0, 191, 231, 0.4);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  border-radius: 12px;
}

.instagram-feed .instagram-post:hover .overlay {
  opacity: 1;
}

.instagram-feed .instagram-post .overlay i {
  font-size: 2rem;
  color: white;
}


.instagram-carousel .owl-nav {
  position: absolute;
  top: 50%;
  width: 100%;
  transform: translateY(-50%);
  margin-top: 0;
}

.instagram-carousel .owl-nav button {
  position: absolute;
  width: 35px;
  height: 35px;
  background: rgba(255, 255, 255, 0.8) !important;
  border-radius: 50% !important;
  color: #000 !important;
  font-size: 18px !important;
  line-height: 1 !important;
  margin: 0 !important;
}

.instagram-carousel .owl-nav button:hover {
  background: rgba(255, 255, 255, 0.8) !important;
}

.instagram-carousel .owl-prev {
  left: 5px;
}

.instagram-carousel .owl-next {
  right: 5px;
}

.instagram-carousel .owl-dots {
  margin-top: 15px;
}

.instagram-carousel .owl-dot span {
  background: rgba(255, 255, 255, 0.5) !important;
}

.instagram-carousel .owl-dot.active span {
  background: #559cc8 !important;
}

@media (max-width: 767px) {
  .instagram-feed {
      padding: 0 5px;
  }
  
  .header-wrapper {
      flex-direction: column;
      text-align: center;
      gap: 10px;
  }
  
  .instagram-carousel .owl-nav button {
      width: 30px;
      height: 30px;
      font-size: 14px !important;
  }
}

/* Blog Header Styles */
.blog-header__categories {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.blog-header__categories .btn {
  border: 2px solid rgba(255, 255, 255, 0.2);
  padding: 8px 20px;
  border-radius: 25px;
  font-size: 0.9rem;
  font-weight: 500;
  transition: all 0.3s ease;
  cursor: pointer;
}

.blog-header__search {
  width: 100%;
}

.blog-header__search .input-group {
  width: 100%;
}

.blog-header__search .form-control {
  height: 45px;
  border-radius: 25px 0 0 25px;
  border: none;
  background: rgba(255, 255, 255, 0.1);
  color: var(--color-texto); /* Cambiado de #fff a blanco */
  padding: 0 20px;
}

.blog-header__search .btn {
  border-radius: 0 25px 25px 0;
  padding: 0 20px;
  background: var(--color-acento);
  border-color: var(--color-acento);
}

@media (max-width: 768px) {
  .blog-header__categories {
      margin-bottom: 20px;
      justify-content: center;
  }
  
  .blog-header__search {
      margin-top: 20px;
  }
}
.blog-post {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 15px;
    overflow: hidden;
    transition: transform 0.3s ease;
    animation: fadeIn 0.5s ease;
}

.blog-post:hover {
    transform: translateY(-10px);
}

.blog-post__image {
    position: relative;
    overflow: hidden;
}

.blog-post__image img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.blog-post:hover .blog-post__image img {
    transform: scale(1.1);
}

.blog-post__image .category {
    position: absolute;
    top: 20px;
    left: 20px;
    background: var(--color-acento);
    color: #fff;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.8rem;
    text-transform: uppercase;
}

.blog-post__content {
    padding: 25px;
    color: var(--color-texto); /* Cambiado de #fff a blanco */
}

.blog-post__content .date {
    color: var(--color-acento);
    font-size: 0.9rem;
    margin-bottom: 10px;
}

.blog-post__content h3 {
    font-size: 1.25rem;
    margin-bottom: 15px;
    color: var(--color-texto); /* Cambiado de #fff a blanco */
}

.blog-post__content p {
    color: var(--color-texto-secundario); /* Cambiado de rgba(255, 255, 255, 0.7) a blanco semi-transparente */
    margin-bottom: 20px;
    line-height: 1.6;
}

.blog-post .read-more {
    color: var(--color-acento);
    text-decoration: none;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: color 0.3s ease;
}

.blog-post .read-more:hover {
    color: var(--color-texto); /* Cambiado de #fff a blanco */
}

.blog-header__categories .btn.active {
  background: var(--color-acento);
  border-color: var(--color-acento);
  color: #fff;
  transform: translateY(-2px);
}

@media (max-width: 768px) {
    .blog-post__content {
        padding: 20px;
    }

    .blog-post__content h3 {
        font-size: 1.1rem;
    }
}

/* News Hero Styles */
.news-hero {
  padding: 60px 0;
  position: relative;
}

.featured-news {
  position: relative;
  margin-bottom: 40px;
  border-radius: 15px;
  overflow: hidden;
}

.featured-news__image {
  position: relative;
  height: 500px;
}

.featured-news__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.featured-news__content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 40px;
  background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
  color: var(--color-texto); /* Cambiado de #fff a blanco */
}

.news-tag {
  background: var(--color-acento);
  padding: 5px 15px;
  border-radius: 20px;
  font-size: 0.9rem;
  margin-bottom: 15px;
  display: inline-block;
}

.featured-news__content h2 {
  font-size: 2.5rem;
  margin-bottom: 15px;
  color: var(--color-texto); /* Cambiado de #fff a blanco */
}

.read-more-btn {
  display: inline-block;
  padding: 10px 25px;
  background: var(--color-acento);
  color: var(--color-texto); /* Cambiado de #fff a blanco */
  border-radius: 25px;
  margin-top: 20px;
  transition: all 0.3s ease;
}

/* News Slider */
.news-slider {
  margin-bottom: 40px;
}

.news-slide {
  position: relative;
  height: 250px;
  border-radius: 10px;
  overflow: hidden;
  margin: 0 10px;
}

.news-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.news-slide__content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px;
  background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
  color: var(--color-texto); /* Cambiado de #fff a blanco */
}

/* News Ticker */
.news-ticker {
  background: rgba(255,255,255,0.05);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  align-items: center;
  height: 50px;
}

.news-ticker__title {
  background: var(--color-acento);
  color: #fff;
  padding: 0 20px;
  height: 100%;
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.ticker-wrap {
  width: 100%;
  overflow: hidden;
  padding: 0 20px;
}

.ticker {
  display: inline-flex;
  white-space: nowrap;
  animation: ticker 30s linear infinite;
}

.ticker__item {
  padding: 0 30px;
  color: var(--color-texto); /* Cambiado de #fff a blanco */
}

@keyframes ticker {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

@media (max-width: 768px) {
  .featured-news__image {
      height: 300px;
  }

  .featured-news__content h2 {
      font-size: 1.8rem;
  }

  .news-slide {
      height: 200px;
  }
}

/* Dropdown Menu Styles */
.header__nav__menu .dropdown {
  position: relative;
}

.header__nav__menu .dropdown-menu {
  background: rgba(3, 5, 49, 0.95);
  border: none;
  border-radius: 4px;
  padding: 10px 0;
  min-width: 180px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.header__nav__menu .dropdown:hover .dropdown-menu {
  display: block;
}

.header__nav__menu .dropdown-menu li {
  margin: 0;
}

.header__nav__menu .dropdown-menu a {
  color: var(--color-texto);
  padding: 8px 20px;
  font-size: 14px;
}

.header__nav__menu .dropdown-menu a:hover {
  background: rgba(0, 191, 231, 0.1);
  color: var(--color-acento);
}

.header__nav__menu .dropdown > a .fa {
  margin-left: 5px;
  font-size: 11px;
}

/* Mobile Menu Adjustments */
@media (max-width: 991px) {
  .header__nav__menu .dropdown-menu {
      display: none;
      position: static;
      background: rgba(3, 5, 49, 0.95);
      padding-left: 15px;
      opacity: 1;
      visibility: visible;
      transform: none;
  }

  .header__nav__menu .dropdown.active .dropdown-menu {
      display: block;
  }

  .header__nav__menu .dropdown > a {
    position: relative;
    display: block;
    width: 100%;
}

.header__nav__menu .dropdown > a .fa {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
}
}


/* Auth Sections Styles */
#registro, #login {
  background: rgba(255, 255, 255, 0.543);
  padding: 60px 0;
  margin: 20px auto;
  max-width: 500px;
  border-radius: 15px;
  box-shadow: 0 0 20px rgba(0, 191, 231, 0.1);
}

.header__nav__menu {
    flex-grow: 1;
}

#registro h2, #login h2 {
  color: var(--color-texto); /* Cambiado de #c9c9c9 a blanco */
  text-align: center;
  font-size: 26px;
  margin-bottom: 30px;
  font-weight: 700;
  text-transform: uppercase;
}

#registro form, #login form {
  padding: 0 40px;
}

#registro label, #login label {
  display: block;
  color: var(--color-texto); /* Cambiado de #4b4b4b a blanco */
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 500;
}

#registro input, #login input {
  width: 100%;
  padding: 12px 15px;
  margin-bottom: 20px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(0, 191, 231, 0.3);
  border-radius: 8px;
  color: var(--color-texto); /* Cambiado de #9b9b9b a blanco */
  font-size: 13px;
  transition: all 0.3s ease;
}

#registro input:focus, #login input:focus {
  border-color: var(--color-acento);
  background: rgba(255, 255, 255, 0.1);
  outline: none;
}

#registro button, #login button {
  width: 100%;
  padding: 14px;
  background: var(--color-acento);
  color: var(--color-texto);
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 1px;
}

#registro button:hover, #login button:hover {
  background: #0095b4;
  transform: translateY(-2px);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  #registro, #login {
      margin: 20px;
      padding: 40px 0;
  }

  #registro form, #login form {
      padding: 0 20px;
  }

  #registro h2, #login h2 {
      font-size: 22px;
  }

  #registro input, #login input {
      padding: 10px 12px;
  }
}

/* Placeholder color */
#registro input::placeholder, 
#login input::placeholder {
  color: var(--color-texto-secundario); /* Mantiene el placeholder un poco más tenue */
}

/* Error states */
#registro input:invalid, 
#login input:invalid {
  border-color: #e3e3e3;
}

/* Success states */
#registro input:valid:not(:placeholder-shown), 
#login input:valid:not(:placeholder-shown) {
  border-color: #00e676;
}

.user-status {
  background: rgba(16, 0, 40, 0.95);
  padding: 15px 30px;
  margin-bottom: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.user-buttons {
  display: flex;
  gap: 20px;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 500px;
}

.btn-custom {
  display: inline-block;
  padding: 12px 30px;
  background: var(--color-acento);
  color: var(--color-texto);
  border-radius: 25px;
  text-decoration: none;
  transition: all 0.3s ease;
  border: none;
  cursor: pointer;
  font-weight: 500;
  text-align: center;
  min-width: 150px;
}

.btn-custom:hover {
  background: #0095b4;
  transform: translateY(-2px);
  color: var(--color-texto);
  box-shadow: 0 4px 15px rgba(0, 191, 231, 0.3);
}

.auth-link {
  text-align: center;
  margin-top: 20px;
  color: var(--color-texto);
}

.auth-link a {
  color: var(--color-acento);
  text-decoration: none;
  transition: color 0.3s ease;
}

.auth-link a:hover {
  color: #0095b4;
}

/* Estilos generales del perfil */
#perfil {
    display: flex;
    gap: 30px;
    padding: 40px;
    margin-top: 80px;
    background: rgba(16, 0, 40, 0.95);
    min-height: calc(100vh - 200px);
}

/* Menú lateral */
#menu-perfil {
    flex: 0 0 250px;
    background: rgba(0, 191, 231, 0.1);
    padding: 30px;
    border-radius: 15px;
    text-align: center;
}

#menu-perfil h2 {
    color: var(--color-texto);
    margin-bottom: 20px;
    font-size: 22px;
}

#menu-perfil img {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    margin: 20px auto;
    border: 3px solid var(--color-acento);
    object-fit: cover;
}

#menu-perfil ul {
    list-style: none;
    padding: 0;
    margin-top: 30px;
}

#menu-perfil ul li {
    margin-bottom: 15px;
}

#menu-perfil ul li a {
    color: var(--color-texto);
    text-decoration: none;
    padding: 10px 20px;
    display: block;
    border-radius: 25px;
    transition: all 0.3s ease;
}

#menu-perfil ul li a:hover {
    background: var(--color-acento);
    transform: translateX(5px);
}

/* Contenido principal */
#contenido-perfil {
    flex: 1;
    padding: 30px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 15px;
}

#contenido-perfil > div {
    margin-bottom: 40px;
}

#contenido-perfil h2 {
    color: var(--color-texto);
    margin-bottom: 25px;
    font-size: 26px;
    border-bottom: 2px solid var(--color-acento);
    padding-bottom: 10px;
}

/* Formularios */
#contenido-perfil form {
    max-width: 500px;
}

#contenido-perfil label {
    display: block;
    color: var(--color-texto);
    margin-bottom: 8px;
    font-size: 14px;
}

#contenido-perfil input {
    width: 100%;
    padding: 12px 15px;
    margin-bottom: 20px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(0, 191, 231, 0.3);
    border-radius: 8px;
    color: var(--color-texto);
    font-size: 13px;
}

#contenido-perfil input:focus {
    border-color: var(--color-acento);
    outline: none;
}

#contenido-perfil button {
    background: var(--color-acento);
    color: var(--color-texto);
    border: none;
    padding: 12px 30px;
    border-radius: 25px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.3s ease;
}

#contenido-perfil button:hover {
    background: #0095b4;
    transform: translateY(-2px);
}

/* Sección de productos */
#mis-productos {
    color: var(--color-texto);
}

#mis-productos h3 {
    color: var(--color-acento);
    margin: 20px 0;
}

#mis-productos p {
    margin: 10px 0;
    padding: 15px;
    background: rgba(0, 191, 231, 0.1);
    border-radius: 8px;
    color: var(--color-texto); /* Asegurado que sea blanco */
}

#mis-productos a {
    color: var(--color-acento);
    text-decoration: none;
}

#mis-productos a:hover {
    text-decoration: underline;
}

/* Responsive */
@media (max-width: 768px) {
    #perfil {
        flex-direction: column;
        padding: 20px;
    }

    #menu-perfil {
        flex: none;
        margin-bottom: 30px;
    }

    #contenido-perfil {
        padding: 20px;
    }

    #contenido-perfil form {
        max-width: 100%;
    }
}
/* Estilos generales del perfil */
#perfil {
    display: flex;
    gap: 30px;
    padding: 40px;
    margin-top: 80px;
    background: rgba(16, 0, 40, 0.95);
    min-height: calc(100vh - 200px);
}

/* Menú lateral */
#menu-perfil {
    flex: 0 0 250px;
    background: rgba(0, 191, 231, 0.1);
    padding: 30px;
    border-radius: 15px;
    text-align: center;
}

#menu-perfil h2 {
    color: var(--color-texto);
    margin-bottom: 20px;
    font-size: 22px;
}

#menu-perfil img {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    margin: 20px auto;
    border: 3px solid var(--color-acento);
    object-fit: cover;
}

#menu-perfil ul {
    list-style: none;
    padding: 0;
    margin-top: 30px;
}

#menu-perfil ul li {
    margin-bottom: 15px;
}

#menu-perfil ul li a {
    color: var(--color-texto);
    text-decoration: none;
    padding: 10px 20px;
    display: block;
    border-radius: 25px;
    transition: all 0.3s ease;
}

#menu-perfil ul li a:hover {
    background: var(--color-acento);
    transform: translateX(5px);
}

/* Contenido principal */
#contenido-perfil {
    flex: 1;
    padding: 30px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 15px;
}

#contenido-perfil > div {
    margin-bottom: 40px;
}

#contenido-perfil h2 {
    color: var(--color-texto);
    margin-bottom: 25px;
    font-size: 26px;
    border-bottom: 2px solid var(--color-acento);
    padding-bottom: 10px;
}

/* Formularios */
#contenido-perfil form {
    max-width: 500px;
}

#contenido-perfil label {
    display: block;
    color: var(--color-texto);
    margin-bottom: 8px;
    font-size: 14px;
}

#contenido-perfil input {
    width: 100%;
    padding: 12px 15px;
    margin-bottom: 20px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(0, 191, 231, 0.3);
    border-radius: 8px;
    color: var(--color-texto);
    font-size: 13px;
}

#contenido-perfil input:focus {
    border-color: var(--color-acento);
    outline: none;
}

#contenido-perfil button {
    background: var(--color-acento);
    color: var(--color-texto);
    border: none;
    padding: 12px 30px;
    border-radius: 25px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.3s ease;
}

#contenido-perfil button:hover {
    background: #0095b4;
    transform: translateY(-2px);
}

/* Sección de productos */
#mis-productos {
    color: var(--color-texto);
}

#mis-productos h3 {
    color: var(--color-acento);
    margin: 20px 0;
}

#mis-productos p {
    margin: 10px 0;
    padding: 15px;
    background: rgba(0, 191, 231, 0.1);
    border-radius: 8px;
    color: var(--color-texto); /* Asegurado que sea blanco */
}

#mis-productos a {
    color: var(--color-acento);
    text-decoration: none;
}

#mis-productos a:hover {
    text-decoration: underline;
}

/* Responsive */
@media (max-width: 768px) {
    #perfil {
        flex-direction: column;
        padding: 20px;
    }

    #menu-perfil {
        flex: none;
        margin-bottom: 30px;
    }

    #contenido-perfil {
        padding: 20px;
    }

    #contenido-perfil form {
        max-width: 100%;
    }
}

.alert-message {
    display: none;
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 15px 25px;
    border-radius: 5px;
    z-index: 1100;
    animation: slideIn 0.5s ease-out;
}

.alert-success {
    background-color: #4CAF50;
    color: white;
}

.alert-error {
    background-color: #f44336;
    color: white;
}

@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.parallax-video-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: -1;
  overflow: hidden;
}

.parallax-video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
  object-fit: cover;
}
/* Optional: Add overlay to make content more readable */
.parallax-video-container::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3); /* Adjust opacity as needed */
}


.video-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

/* Botón destacado en menú: Arquitectura */
.header__nav__menu ul li.highlighted a {
  background-color: #fff;
  color: #000;
  padding: 8px 18px;
  border-radius: 8px;
  font-weight: bold;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
}

.header__nav__menu ul li.highlighted a i {
  animation: pulse-icon 2.2s infinite;
  color: var(--color-acento);
}
@keyframes pulse-icon {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.8;
  }
}

.header__nav__menu ul li.highlighted a:hover {
  background-color: var(--color-acento);
  color: white;
}
.header__nav__menu ul li.highlighted a::after {
  display: none !important;
}
/* Cambiar color del ícono a blanco cuando se pasa el mouse sobre el botón Arquitectura */
.header__nav__menu ul li.highlighted a:hover i {
  color: white !important;
}
/* Espaciado entre ítems del menú principal */
.header__nav__menu ul li {
  margin-right: 18px; /* Ajustá este valor a gusto */
}

/* Eliminar el margen del último ítem para que no se pase del ancho */
.header__nav__menu ul li:last-child {
  margin-right: 0;
}

/* ============================== */
/* MODO CLARO - Página Arquitectura */
/* ============================== */

body.page-arquitectura {
  background-color: #f9f9fb;
  color: #2c2c2c;
}

body.page-arquitectura .header {
  background-color: #ffffff !important;
  border-bottom: 1px solid #ccc;
}

body.page-arquitectura .header__nav__menu ul li a {
  color: #2c2c2c;
}

body.page-arquitectura .header__nav__menu ul li.highlighted a {
  background-color: #559cc8;
  color: white;
  border-radius: 6px;
  padding: 8px 14px;
}

body.page-arquitectura .breadcrumb-option {
  background-color: #e6f0fa;
}

body.page-arquitectura .breadcrumb__text h2,
body.page-arquitectura .breadcrumb__links a,
body.page-arquitectura .breadcrumb__links span {
  color: #2c2c2c;
}

body.page-arquitectura .footer {
  background-color: #ffffff;
  color: #2c2c2c;
}

body.page-arquitectura .footer__option__item p,
body.page-arquitectura .footer__option__item a,
body.page-arquitectura .footer__copyright__text {
  color: #2c2c2c !important;
}

body.page-arquitectura .footer__top__logo img {
  filter: brightness(0) saturate(100%) invert(0%);
}

/* Cambiar botones, links, etc. si es necesario */
body.page-arquitectura .read__more {
  color: #559cc8;
}

/* ===================================================== */
/* ADAPTACIÓN VISUAL COMPLETA PARA LA PÁGINA DE ARQUITECTURA */
/* ===================================================== */

body.page-arquitectura {
  background-color: #f9f9fb;
  color: #2c2c2c;
}

body.page-arquitectura .header {
  background-color: #ffffff !important;
  border-bottom: 1px solid #ccc;
}

body.page-arquitectura .header__nav__menu ul li a {
  color: #2c2c2c;
}

body.page-arquitectura .header__nav__menu ul li a:hover {
  color: #559cc8;
}

body.page-arquitectura .header__nav__menu ul li.highlighted a {
  background-color: #559cc8;
  color: white !important;
  border-radius: 6px;
  padding: 8px 14px;
}

body.page-arquitectura .header__nav__social a {
  color: #2c2c2c;
}

body.page-arquitectura .header__nav__social a:hover {
  color: #559cc8;
}

body.page-arquitectura .breadcrumb-option {
  background-color: #e6f0fa !important;
  background-image: none !important;
}

body.page-arquitectura .breadcrumb__text h2,
body.page-arquitectura .breadcrumb__links a,
body.page-arquitectura .breadcrumb__links span {
  color: #2c2c2c !important;
}

body.page-arquitectura .footer {
  background-color: #ffffff;
  color: #2c2c2c;
}

body.page-arquitectura .footer h5,
body.page-arquitectura .footer__option__item p,
body.page-arquitectura .footer__option__item a,
body.page-arquitectura .footer__copyright__text {
  color: #2c2c2c !important;
}

body.page-arquitectura .footer__option__item h5 {
  font-weight: 600;
  color: #2c2c2c;
}

body.page-arquitectura .footer__top__logo img {
  filter: none;
}

body.page-arquitectura .footer__top__social a {
  color: #2c2c2c;
  transition: color 0.3s;
}

body.page-arquitectura .footer__top__social a:hover {
  color: #559cc8;
}

body.page-arquitectura .read__more {
  color: #559cc8 !important;
  font-weight: 500;
}

body.page-arquitectura .footer__option__item ul li a:hover {
  text-decoration: underline;
  color: #559cc8 !important;
}

body.page-arquitectura .footer__option__item i {
  color: #559cc8 !important;
}

.social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background-color: transparent;
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
    font-size: 16px;
}

.social-btn:hover {
    background-color: #559cc8;
    color: #fff;
    border-color: #559cc8;
    transform: scale(1.1);
    box-shadow: 0 0 10px rgba(85, 156, 200, 0.5);
}

.social-btn.instagram:hover {
    background-color: #E4405F;
    border-color: #E4405F;
}

.social-btn.whatsapp:hover {
    background-color: #25D366;
    border-color: #25D366;
}
/* Redes sociales - Modo claro */
.social-btn.light-mode {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background-color: #f0f0f0;
    color: #00001b;
    font-size: 16px;
    transition: all 0.3s ease;
    border: 1px solid #ccc;
}

.social-btn.light-mode:hover {
    background-color: #00001b;
    color: #ffffff;
    transform: scale(1.05);
}
.footer-link {
  color: #a71c1c;
  display: block;
  margin-bottom: 0.1px;
  text-decoration: none;
  transition: color 0.3s ease;
  font-size: 0.95rem;
}

.footer-link:hover {
  color: #03cdff;
}

.footer-social-link {
  font-size: 1.2rem;
  color: #bbbbbb;
  transition: color 0.3s ease;
}

.footer-social-link:hover {
  color: #ffffff;
}

.logo__item img {
  max-height: 100px;
  margin: 0 auto;
  object-fit: contain;
}

 .section-title h2 {
    font-size: 2rem;
    color: #0d0532;
    font-weight: 700;
    position: relative;
    display: inline-block;
    margin-bottom: 1rem;
  }

  .section-title h2::after {
    content: '';
    display: block;
    width: 60px;
    height: 4px;
    background-color: #1c1d1e;
    margin: 0.5rem auto 0;
    border-radius: 2px;
  }

  .subtitle {
    color: #120638;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0.5rem;
  }

  .team-block {
    margin-top: 1rem;
  }
  .hero-arquitectura-svg {
  position: relative;
  background-color: #f9f9f9;
}

.svg-background {
  position: absolute;
  top: 5%;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: hidden;
}

.svg-background img.svg-full {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1; /* Controla la visibilidad del SVG */
}

.hero-text-box {
  position: relative;
  z-index: 2;
  color: #111;
}

.titulo-hero {
  color: #0B518F;
  font-size: 56px;
  font-weight: 700;
  line-height: 1.2;
  margin-top: 15px;
}

.subtitulo {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #555;
}

.descripcion-hero {
  font-size: 16px;
  color: #444;
  max-width: 520px;
  margin-top: 20px;
}
.hero-arquitectura {
  padding-top: 120px;
  padding-bottom: 120px;
  position: relative;
  background-color: #f8f8f8;
}

.hero-arquitectura .hero__text h2 {
  font-weight: 700;
  font-size: 52px;
  line-height: 1.3;
  color: #111;
}

.hero-arquitectura .hero__text p {
  font-size: 16px;
  color: #444;
  line-height: 1.6;
}

.hero-arquitectura .primary-btn {
  border-color: #000;
  color: #000;
}

.hero-arquitectura .primary-btn:before,
.hero-arquitectura .primary-btn:after {
  border-color: #000;
}
.steps-wrapper {
  overflow-x: auto;
  padding-bottom: 20px;
  scroll-snap-type: x mandatory;
}

.steps-scroll {
  display: flex;
  gap: 24px;
  min-width: max-content;
  padding: 15px 0;
  padding-bottom: 3%;
  padding-left: 5%;
}

.step-card {
  flex: 0 0 auto;
  width: 280px;
  background: #f9f9f9;
  padding: 30px 24px;
  border-radius: 16px;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.06);
  scroll-snap-align: start;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  text-align: center;
}

.step-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
}

.step-card h4 {
  font-size: 20px;
  font-weight: 600;
  margin-top: 12px;
  color: #111;
}

.step-card p {
  font-size: 15px;
  color: #444;
  margin-top: 10px;
  line-height: 1.5;
}

.step-number {
  font-size: 18px;
  font-weight: bold;
  color: #999;
  margin-bottom: 6px;
}

.step-illustration img {
  width: 100%;
  max-height: 120px;
  object-fit: contain;
}

.servicio-card {
  background-color: #fff;
  padding: 32px 24px;
  border-radius: 16px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  height: 98%;
}

.servicio-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.08);
}

.servicio-card h5 {
  font-size: 16px;
  font-weight: 600;
  color: #111;
  margin-top: 12px;
  line-height: 1.4;
}

.servicio-icon {
  width: 64px;
  height: 64px;
  object-fit: contain;
  opacity: 0.9;
}
.portfolio-card {
  background-color: #f9f9f9;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.portfolio-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
}

.portfolio-img img {
  width: 100%;
  height: auto;
  display: block;
}

.portfolio-info {
  padding: 24px;
  color: #333;
}

.portfolio-info h4 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 10px;
}

.portfolio-info p {
  font-size: 15px;
  margin-bottom: 4px;
}

.portfolio-info blockquote {
  font-style: italic;
  font-size: 14px;
  margin-top: 10px;
  color: #666;
  border-left: 3px solid #ddd;
  padding-left: 12px;
}
.year-slider {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  padding: 10px 0;
  scroll-snap-type: x mandatory;
}

.year-dot {
  padding: 12px 16px;
  background: #eee;
  border-radius: 50px;
  cursor: pointer;
  font-weight: 500;
  scroll-snap-align: start;
  transition: all 0.3s ease;
}

.year-dot.active {
  background: #111;
  color: #fff;
}

.project-card {
  background: #f9f9f9;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0,0,0,0.05);
  cursor: pointer;
  transition: transform 0.3s ease;
}

.project-card:hover {
  transform: translateY(-4px);
}

.project-detail {
  background: #f3f3f3;
  padding: 30px;
  border-radius: 16px;
}
/* ===== Timeline Años ===== */
.year-slider {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  padding: 10px 0;
  scroll-snap-type: x mandatory;
  border-bottom: 1px solid #ddd;
  margin-bottom: 30px;
}

.year-dot {
  scroll-snap-align: start;
  flex-shrink: 0;
  padding: 10px 22px;
  border-radius: 50px;
  background: #e4e4e4;
  color: #333;
  font-weight: 600;
  font-size: 15px;
  transition: background 0.3s, color 0.3s, box-shadow 0.3s;
  cursor: pointer;
  user-select: none;
  border: 1px solid transparent;
}

.year-dot:hover {
  background: #d5d5d5;
}

.year-dot.active {
  background: #111;
  color: #fff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
  border: 1px solid #000;
}

/* ===== Tarjetas de Proyecto ===== */
.project-card {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  overflow: hidden;
  cursor: pointer;
  height: 100%;
  display: flex;
  flex-direction: column;
  border: 1px solid #eee;
}

.project-card img {
  width: 100%;
  object-fit: cover;
  border-radius: 8px;
  aspect-ratio: 16 / 9;
  transition: transform 0.3s ease;
}

.project-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
}

.project-card h5 {
  font-size: 18px;
  margin-top: 10px;
  color: #111;
}

.project-card p {
  font-size: 14px;
  color: #777;
}

/* ===== Detalle del Proyecto ===== */
.project-detail {
  background: #f5f5f5;
  padding: 40px;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
  transition: all 0.4s ease;
}

.project-detail h3 {
  font-size: 28px;
  font-weight: 700;
  color: #111;
  margin-bottom: 15px;
}

.project-detail p {
  font-size: 16px;
  color: #444;
  margin-bottom: 8px;
}

.project-detail h6 {
  font-weight: 600;
  margin-top: 20px;
  margin-bottom: 10px;
  color: #222;
}

.project-detail .gallery img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  object-fit: cover;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease;
}

.project-detail .gallery img:hover {
  transform: scale(1.02);
}

.project-detail table {
  margin-top: 15px;
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden;
}

.project-detail table thead {
  background-color: #ddd;
}

.project-detail table th,
.project-detail table td {
  font-size: 14px;
  padding: 10px;
  text-align: left;
}

.project-detail blockquote {
  font-style: italic;
  color: #666;
  border-left: 4px solid #ccc;
  padding-left: 15px;
  margin-top: 20px;
  font-size: 15px;
}

/* ===== Responsive Enhancements ===== */
@media (max-width: 768px) {
  .project-detail {
    padding: 20px;
  }

  .year-dot {
    font-size: 14px;
    padding: 8px 16px;
  }

  .project-detail h3 {
    font-size: 22px;
  }

  .project-detail p {
    font-size: 15px;
  }

  .project-card h5 {
    font-size: 16px;
  }
}
body.dark .project-card {
  background: #1e1e1e;
  border-color: #333;
}
body.dark .project-detail {
  background: #2a2a2a;
  color: #ddd;
}
body.dark .year-dot {
  background: #333;
  color: #ccc;
}
body.dark .year-dot.active {
  background: #fff;
  color: #000;
}

.progress-timeline {
  position: relative;
  width: 100%;
  padding: 30px 10px;
  margin-bottom: 40px;
}

.progress-track {
  position: relative;
  height: 4px;
  background: #ddd;
  border-radius: 4px;
}

.progress-line {
  position: absolute;
  height: 4px;
  background: #111;
  top: 0;
  left: 0;
  width: 0%;
  border-radius: 4px;
  transition: width 0.4s ease;
  z-index: 1;
}

.progress-year {
  position: absolute;
  top: -16px;
  transform: translateX(-50%);
  background: #f0f0f0;
  color: #333;
  padding: 6px 14px;
  border-radius: 20px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 2;
  white-space: nowrap;
  border: 2px solid transparent;
}

.progress-year:hover {
  background: #e0e0e0;
}

.progress-year.active {
  background: #111;
  color: #fff;
  border-color: #000;
}

/* Responsive ajustes */
@media (max-width: 768px) {
  .progress-year {
    font-size: 13px;
    padding: 5px 10px;
  }
}
.hero-llave {
  position: relative;
  height: 100vh;
  color: #111;
  background-color: #fff;
}

.svg-background-wrapper {
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

.svg-half img {
  object-fit: cover;
  height: 100%;
  width: 100%;
  opacity: 0.3; /* Ajustá esto según visibilidad */
}

.hero-text-box {
  padding-top: 4rem;
  z-index: 2;
  position: relative;
  text-shadow: 0 1px 3px rgba(255,255,255,0.6);
}

.titulo-hero {
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.descripcion-hero {
  font-size: 1.125rem;
  max-width: 600px;
}

.subtitulo {
  text-transform: uppercase;
  font-weight: 600;
  color: #666;
  letter-spacing: 1px;
  display: inline-block;
  margin-bottom: 0.5rem;
}

@media (max-width: 768px) {
  .svg-half {
    display: none;
  }

  .titulo-hero {
    font-size: 2rem;
  }
}
.svg-img-left{
  margin-top: 80%;
  max-height: 40%;
}
.svg-img-right {
  max-height: 90vh;
  width: auto;
}

.svg-img-left {
  margin-left: -20px; /* empuja al borde izquierdo */
  transform: translateX(-30px);
}

.svg-img-right {
  margin-right: -20px; /* empuja al borde derecho */
  transform: translateX(30px);
}

[data-aos] {
  opacity: 0;
  transition-property: opacity, transform;
}

/* AOS las animará automáticamente */

.svg-img-left {
  transform: translateX(-100px);
  opacity: 0;
  transition: all 1s ease-out;
}

.svg-img-right {
  transform: translateX(100px);
  opacity: 0;
  transition: all 1s ease-out;
}

[data-aos].aos-animate .svg-img-left {
  transform: translateX(0);
  opacity: 0.5;
}

[data-aos].aos-animate .svg-img-right {
  transform: translateX(0);
  opacity: 0.5;
}

.text-accent {
  color: #00bfff;
}

.fs-5 {
  font-size: 1.1rem;
}

.cv-gallery-item {
  padding: 5px;
}

.cv-gallery-item img {
  border-radius: 12px;
  height: 180px;
  object-fit: cover;
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
}

.cv-gallery-item img:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 20px rgba(0, 191, 255, 0.4);
}

.services-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px; /* o el valor que quieras */
}

.service-card {
  flex: 1 1 300px; /* ajustable según tu diseño */
  max-width: 350px;
}
.footer-link i,
.footer-social-link i {
  transition: transform 0.3s ease;
}
.footer-link:hover i,
.footer-social-link:hover i {
  transform: scale(1.15);
}

.load-more-btn {
  border-color: #00bfff;
  color: #00bfff;
  transition: all 0.3s ease;
  font-weight: 600;
  border-radius: 40px;
}

.load-more-btn:hover {
  background-color: #00bfff;
  color: #00001b;
  transform: scale(1.03);
}