/* ========= Tipografías ========= */
body{font-family: 'Open Sans', sans-serif;background-color: #ffffff;transition: background-color 0.3s ease;line-height: normal;}
/* Títulos principales */
h1, h2 {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
}

/* Títulos de secciones o subtítulos */
h3, h4, .titulo-seccion {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
}

/* Párrafos y texto general */
p {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  color: #444;
}

.label, button {
  font-family: 'Roboto Slab', serif;
}



/* Espaciado general entre secciones */
section {
  padding-top: 80px;   /* Espacio arriba */
  padding-bottom: 80px; /* Espacio abajo */
}

/* =======================
   Barra navegacion.
   ======================= */

.navbar.bg-gradient-green {
  background: rgba(32, 32, 32, 0.3); /* Gris oscuro translúcido */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  transition: background-color 0.4s ease;
}

.navbar .nav-link {
  color: #ffffff !important;
  font-weight: 600;
  margin-right: 10px;
  position: relative;
  text-shadow:
    0 0 2px rgba(0, 0, 0, 0.8),
    0 0 6px rgba(0, 0, 0, 0.4);
  transition: all 0.3s ease;
}

.navbar .navbar-brand {
  color: #ffffff;
  font-weight: 700;
  font-size: 1.5rem;
  text-shadow:
    0 0 2px rgba(0, 0, 0, 0.8),
    0 0 6px rgba(0, 0, 0, 0.4);
}

.navbar .nav-link::after {
  content: "";
  position: absolute;
  width: 0%;
  height: 2px;
  bottom: -2px;
  left: 0;
  background: #fff;
  transition: width 0.3s;
}

.navbar .nav-link:hover::after {
  width: 100%;
}

.navbar .nav-link:hover {
  color: #a5d6a7 !important;
  text-shadow: 0 0 8px rgba(165, 214, 167, 0.8);
}

.navbar .btn-outline-light {
  border: 2px solid #ffffffcc;
  color: #ffffff;
  backdrop-filter: blur(4px);
  font-weight: 600;
  text-shadow:
    0 0 2px rgba(0, 0, 0, 0.8),
    0 0 6px rgba(0, 0, 0, 0.4);
    transition: all 0.3s ease;
}
  

.navbar .btn-outline-light:hover {
  color: #3dbb80; /* verde */
  border-color: #198754;
  background-color: rgba(25, 135, 84, 0.1); /* fondo sutil */
  box-shadow: 0 0 10px rgba(25, 135, 84, 0.5); /* glow */
  text-shadow: 0 0 6px rgba(25, 135, 84, 0.8);
}

.navbar .btn-light.text-success {
  background: linear-gradient(to right, #bfffe0, #a0ffd3);
  border: none;
  color: #0a3d2c;
  font-weight: 600;
  box-shadow: 0 0 12px rgba(160, 255, 211, 0.5);
  transition: all 0.3s ease-in-out;
}

.navbar .btn-light.text-success:hover {
  transform: scale(1.05);
  box-shadow: 0 0 12px rgba(160, 255, 211, 0.5);
}

#toggle-darkmode {
  background-color: rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  padding: 6px 10px;
  transition: all 0.3s ease;
}

#toggle-darkmode:hover {
  background-color: rgba(255, 255, 255, 0.25);
  transform: rotate(10deg) scale(1.1);
}

.navbar {
  animation: fadeDown 1s ease-out;
}

@keyframes fadeDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.bg-glass {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
}

.navbar.bg-gradient-green {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}


#inicio {
  position: relative;
  z-index: 10;
}
 


/* =======================
   Seccion video y logo
   ======================= */


.background-video {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: 0;
  object-fit: cover;
  opacity: 0.7;
}

/* Asegurarse que las capas superpuestas estén por encima */
.contenido-inicio {
  position: relative;
  z-index: 1;
}


#vanta-background {
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: -1;
  top: 0;
  left: 0;
  pointer-events: none;
  display: none; /* Oculto por defecto */
}



.logo-wrapper {
  background-color: rgba(0, 0, 0, 0.15);
  padding: 20px;
  border-radius: 30px;
  display: inline-block;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(6px);
  animation: logoFadeIn 2s ease-out, logoGlow 4s ease-in-out infinite;
}

/* Animación de entrada */
@keyframes logoFadeIn {
  0% {
    opacity: 0;
    transform: scale(0.8);
    filter: drop-shadow(0 0 5px rgba(0,0,0,0.2)) brightness(0.5);
  }
  100% {
    opacity: 1;
    transform: scale(1);
    filter: drop-shadow(0 0 25px rgba(0,0,0,0.5)) brightness(1);
  }
}

@keyframes logoGlow {
  0%, 100% {
    filter: drop-shadow(0 0 20px rgba(0, 0, 0, 0.3));
  }
  50% {
    filter: drop-shadow(0 0 45px rgba(0, 0, 0, 0.6));
  }
}


.logo-container {
  display: inline-block;
  animation: logoFadeIn 2s ease-out;
}

.logo-sombra {
  width: 350px;
  filter: drop-shadow(0 0 25px rgba(0, 0, 0, 0.5));
  animation: logoGlow 4s ease-in-out infinite;
  
}

.logo-inicio {
  max-width: 350px;
  width: 100%;
  height: auto;
  display: block;
}

/* Animaciones */
@keyframes slideTop {
  from {
    opacity: 0;
    transform: translateY(-40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes zoomFade {
  from {
    opacity: 0;
    transform: scale(0.7);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes fadeInLate {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.logo-container img {
  transition: transform 0.4s ease;
  filter: drop-shadow(0 0 20px rgba(40, 167, 69, 0.5));
}

.logo-container img:hover {
  transform: scale(1.1);
  /* Eliminar animación conflictiva: */
  animation: bounceScale 0.5s ease;
  /* O si preferís el brillo suave, usar solo esto: */
  /* filter: drop-shadow(0 0 25px rgba(40, 167, 69, 0.6)); */
}

.logo-sombra {
  animation: glowLogo 4s ease-in-out infinite alternate;
  filter: drop-shadow(0 0 20px rgba(40, 167, 69, 0.5));
}

@keyframes glowLogo {
  0%   { filter: drop-shadow(0 0 15px #28a745); }
  50%  { filter: drop-shadow(0 0 25px #208a39); }
  100% { filter: drop-shadow(0 0 15px #19692c); }
}

@keyframes bounceScale {
  0% { transform: scale(1); }
  50% { transform: scale(1.15); }
  100% { transform: scale(1.1); }
}

/* Resplandor dinámico */
@keyframes glowPulse {
  0% {
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.3))
            drop-shadow(0 0 20px rgba(40, 167, 69, 0.5));
  }
  50% {
    filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.6))
            drop-shadow(0 0 35px rgba(40, 167, 69, 0.7));
  }
  100% {
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.3))
            drop-shadow(0 0 20px rgba(40, 167, 69, 0.5));
  }
}

.animate-slide-top {
  animation: slideTop 1.2s ease-out forwards;
}

.animate-zoom-fade {
  animation: zoomFade 1.5s ease-out forwards;
}

.animate-fade-in-late {
  animation: fadeInLate 2s ease-in forwards;
}

/* Mejora contraste si el fondo de video es muy claro */
#inicio .container {
  text-shadow: 1px 1px 6px rgba(0, 0, 0, 0.7);
}

.bienvenida {
  font-size: 3.2rem;
  font-weight: 700;
  margin-top: 10px;
  animation: fadeInUp 1.2s ease-out;

  /* Mejor visibilidad en cualquier fondo */
  color: #ffffff;
  text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.4);
}

.subtitle {
  font-size: 1.8rem;
  margin-top: 10px;
  animation: fadeInUp 1.5s ease-out;

  /* Visibilidad reforzada */
  color: #f8f8f8;
  font-weight: 400;
  text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3);
}


@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}



/* Contenedor que envuelve el video */
.video-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0;
}

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


/* =======================
   Seccion INICIO
   ======================= */

.seccion-inicio {
  background: linear-gradient(135deg, #a8e063, #56ab2f);
  color: white;
  position: relative;
  height: 100vh; /* O podés usar 80vh si querés que no ocupe toda la pantalla */
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  background-color: #000; /* Por si el video no carga */
  overflow: hidden;
}

.seccion-inicio .container {
  z-index: 2;
  position: relative;
  text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.6); /* Mejora la lectura del texto sobre el video */
  animation: fadeInUp 1.5s ease-out;
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.seccion-trabajos {
  background: linear-gradient(135deg, #96fbc4, #f9f586);
}


#vanta-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.contenido-inicio {
  position: relative;
  z-index: 2; /* Asegura que el contenido esté sobre el efecto */
}


.overlay-degrade {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background: linear-gradient(120deg, rgba(40, 167, 69, 0.3), rgba(0, 123, 255, 0.3));
  mix-blend-mode: screen;
  animation: gradienteColor 10s ease-in-out infinite alternate;
}
@keyframes gradienteColor {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}


.particles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  background: radial-gradient(circle, rgba(255,255,255,0.15) 2px, transparent 2px);
  background-size: 50px 50px;
  animation: particlesMove 8s linear infinite;
}

@keyframes particlesMove {
  from { background-position: 0 0; }
  to { background-position: 100px 100px; }
}

.logo-sombra {
  animation: glowLogo 4s ease-in-out infinite alternate;
}

@keyframes glowLogo {
  0% { filter: drop-shadow(0 0 15px #28a745); }
  50% { filter: drop-shadow(0 0 30px #007bff); }
  100% { filter: drop-shadow(0 0 15px #ffc300); }
}

.bienvenida {
  display: inline-block;
  border-right: 3px solid rgba(255,255,255,0.75);
  white-space: nowrap;
  overflow: hidden;
  animation: typing-title 2.5s steps(13, end), blink 0.75s step-end infinite;
}

@keyframes typing-title {
  from { width: 0ch; }
  to { width: 13ch; }
}


@keyframes typing {
  from { width: 0ch; }
  to { width: 13ch; } /* 13 caracteres exactos */
}

@keyframes blink { from, to { border-color: transparent } 50% { border-color: white } }



.scroll-down {
  position: absolute;
  bottom: 20px;
  left: 50%;
  width: 30px;
  height: 30px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translateX(-50%);
  animation: bounce 2s infinite;
}
@keyframes bounce {
  0%, 100% { transform: rotate(-45deg) translate(-50%, 0); }
  50% { transform: rotate(-45deg) translate(-50%, 10px); }
}

.typewriter-sub {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  border-right: 3px solid rgba(255,255,255,0.75);
  animation: typing-sub 5s steps(51, end), blink-sub 0.75s step-end infinite;
}

@keyframes typing-sub {
  from { width: 0ch; }
  to { width: 51ch; }
}



@keyframes blink-sub {
  0%, 100% { border-color: transparent; }
  50% { border-color: white; }
}



.subtitle.typewriter {
  animation: typing 6s steps(50, end) 1s forwards, blink 0.75s step-end infinite;
}


.bienvenida {
  --chars: 13;
  --speed: 0.12s; /* velocidad por carácter */
  animation: typing-title calc(var(--chars) * var(--speed)) steps(var(--chars), end),
             blink 0.75s step-end infinite;
}

.typewriter-sub {
  --chars: 51;
  --speed: 0.12s;
  animation: typing-sub calc(var(--chars) * var(--speed)) steps(var(--chars), end),
             blink-sub 0.75s step-end infinite;
}





/* =======================
   ESTILOS BASE DE ANIMACIONES
   ======================= */

.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.section-fade {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.section-fade.visible {
  opacity: 1; 
  transform: translateY(0);
}

/* === NUEVO ESTILO SECCION SERVICIOS === */
.seccion-servicios {
  position: relative;
  overflow: hidden;
  z-index: 1;
  padding-top: 150px;
  padding-bottom: 180px;
  background: var(--fondo-servicio, #ffffff);
  transition: background 0.5s ease;
}


.titulo-seccion, .seccion-servicios p {
  color: var(--texto-servicio, #222);
  text-align: center;
  text-shadow: 0 2px 5px rgba(0,0,0,0.15);
}



/* === CARTAS DE SERVICIO === */
.servicio-box {
  border-radius: 20px;
  background: radial-gradient(circle at top, #e0f8ea, #ffffff);
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.1), -4px -4px 10px rgba(255, 255, 255, 0.7);
  padding: 50px 30px;
  text-align: center;
  transition: all 0.4s ease;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 370px;
}

/* Hover con resplandor externo + brillo interno */
.servicio-box:hover {
  transform: translateY(-10px);
  background: rgba(0, 255, 180, 0.07);
  box-shadow: 0 0 25px rgba(0, 255, 180, 0.2), 0 0 45px rgba(0, 150, 255, 0.2);
}

/* Ícono en modo oscuro */
.servicio-icon {
  filter: drop-shadow(0 0 10px rgba(0, 255, 180, 0.5));
}


.servicio-icon {
  margin-bottom: 1rem;
  min-height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.img-servicio {
  max-width: 180px;
  max-height: 180px;
  object-fit: contain;
  transition: transform 0.3s ease;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}

.servicio-box:hover .img-servicio {
  transform: scale(1.1) rotate(3deg);
}

/* Título y texto */
.servicio-box h4 {
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: #198754;
  font-size: 1.3rem;
}

.servicio-box p {
  color: #555;
  font-size: 0.95rem;
  min-height: 60px;
}

body.dark-mode .servicio-box p {
  color: #ccc;
}

/* Botón "Ver más" */
.ver-mas {
  position: absolute;
  bottom: -50px;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  transition: all 0.3s ease-in-out;
}

.servicio-box:hover .ver-mas {
  bottom: -20px;
  opacity: 1;
}

.ver-mas .btn {
  padding: 10px 20px;
  border-radius: 50px;
  background-color: #198754;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  transition: background-color 0.3s, box-shadow 0.3s;
  box-shadow: 0 0 10px rgba(25,135,84,0.3);
}

.ver-mas .btn:hover {
  background-color: #1bf07b;
  box-shadow: 0 0 15px rgba(27,240,123,0.5);
}


/* =====================================
   CONTACTO - ESTILO MODERNO Y UNIFICADO
   ===================================== */

/* Sección contacto en modo claro */
.seccion-contacto {
  background-color: #f8f9fa;
  padding-top: 100px;
  padding-bottom: 100px;
  position: relative;
  z-index: 1;
}

/* Caja moderna glassmorph */
.contacto-box {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05),
              0 0 40px rgba(0, 150, 255, 0.06);
  transition: all 0.3s ease;
}

.contacto-box:hover {
  transform: translateY(-5px);
  box-shadow: 0 0 20px rgba(0, 255, 180, 0.2),
              0 0 30px rgba(0, 150, 255, 0.15);
}

/* Inputs modernos con mayor contraste */
.input-neon {
  border-radius: 10px;
  border: 1px solid #ccc;
  background-color: #ffffff;
  transition: all 0.3s ease;
  box-shadow: inset 2px 2px 6px rgba(0,0,0,0.05);
}

.input-neon:focus {
  outline: none;
  border-color: #00ffb4;
  box-shadow: 0 0 10px rgba(0, 255, 180, 0.5);
}

/* Botón contacto moderno */
.boton-contacto {
  font-weight: 600;
  padding: 10px 0;
  border-radius: 50px;
  background-color: #198754;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 0 10px rgba(25,135,84,0.3);
  transition: all 0.3s ease;
}

.boton-contacto:hover {
  background-color: #1bf07b;
  box-shadow: 0 0 15px rgba(27,240,123,0.5);
  transform: scale(1.05);
}

/* Botón publicaciones moderno */
.boton-publi {
  font-weight: 600;
  padding: 12px 30px;
  border-radius: 50px;
  background-color: #198754;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 0 10px rgba(25,135,84,0.3);
  transition: all 0.3s ease;
  max-width: 300px;
  text-align: center;
  
}


.boton-publi:hover {
  background-color: #1bf07b;
  box-shadow: 0 0 15px rgba(27,240,123,0.5);
  transform: scale(1.05);
}



/* === TITULOS PROFESIONALES === */
.titulo-seccion-unificado {
  font-size: 3rem;
  font-weight: 800;
  text-align: center;
  margin-bottom: 20px;
  position: relative;
  color: #f1f1f1;
  text-shadow: 0 3px 10px rgba(0, 255, 120, 0.4), 0 0 20px rgba(0, 255, 255, 0.2);
  animation: fadeInUp 1.2s ease-out;
}

.titulo-seccion-unificado::after {
  content: "";
  display: block;
  width: 80px;
  height: 4px;
  background: linear-gradient(to right, #1bf07b, #0ff);
  margin: 15px auto 0;
  border-radius: 3px;
  animation: fadeInUp 1.5s ease-out;
}

/* === SUBTITULOS PROFESIONALES === */
.subtitulo-seccion-unificado {
  font-size: 1.3rem;
  font-weight: 400;
  color: #e0e0e0;
  text-align: center;
  max-width: 900px;
  margin: 0 auto 40px;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  animation: fadeInUp 1.4s ease-out;
}

/* Animación */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* === TÍTULOS MODERNOS UNIFICADOS === */
.titulo-estilo {
  font-size: 2.8rem;
  font-weight: 800;
  text-align: center;
  margin-bottom: 10px;
  color: #0f0f0f;
  text-shadow: 0 0 12px rgba(0, 255, 200, 0.35);
  position: relative;
}

.titulo-estilo::after {
  content: "";
  display: block;
  width: 80px;
  height: 4px;
  background: linear-gradient(90deg, #00fff7, #ff00e6);
  margin: 8px auto 0;
  border-radius: 20px;
}

/* === SUBTÍTULOS UNIFICADOS === */
.subtitulo-estilo {
  font-size: 1.1rem;
  text-align: center;
  color: #333;
  font-weight: 400;
  margin-top: 8px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.4);
}


/* === GLOW PARA TÍTULOS EN MODO NORMAL (CLARO) === */
body:not(.dark-mode) .titulo-estilo {
  color: #222; /* Asegura contraste */
  text-shadow:
    0 0 6px rgba(0, 255, 204, 0.4),
    0 0 12px rgba(0, 255, 204, 0.2);
}


/* =======================
   whatsapp
   ======================= */
/* ===== WhatsApp Float (puntonexo style) ===== */
.wnx-whatsapp{
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 62px;
  height: 62px;
  border-radius: 18px;
  background: linear-gradient(160deg,#38ef7d,#11998e);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-shadow: 0 10px 25px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.08);
  z-index: 2147483647;
  transition: transform .15s ease, box-shadow .2s ease;
  will-change: transform;
}
.wnx-whatsapp:hover{ transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0,0,0,.30), inset 0 0 0 1px rgba(255,255,255,.1); }
.wnx-whatsapp:active{ transform: translateY(0); }

.wnx-icon{ display:flex; }
.wnx-icon svg{ display:block; color:#fff; }

/* Badge “Online” */
.wnx-badge{
  position: absolute;
  right: -8px;
  bottom: -6px;
  font-size: 12px;
  line-height: 1;
  padding: 6px 10px;
  border-radius: 999px;
  color: #ecf4ee;
  background: rgba(16, 22, 26, .9);
  border: 1px solid rgba(255,255,255,.08);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
}
.wnx-dot{
  width: 8px; height: 8px; border-radius: 50%;
  background: #35e26b; box-shadow: 0 0 0 2px rgba(53,226,107,.25);
}

/* Suave pulso */
.wnx-whatsapp::after{
  content:"";
  position:absolute; inset:0;
  border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(56,239,125,.35);
  animation: wnx-pulse 2s infinite;
  pointer-events: none;
}
@keyframes wnx-pulse{
  0%   { box-shadow: 0 0 0 0 rgba(56,239,125,.35); }
  70%  { box-shadow: 0 0 0 20px rgba(56,239,125,0); }
  100% { box-shadow: 0 0 0 0 rgba(56,239,125,0); }
}

/* Modo reducido: sin animación */
@media (prefers-reduced-motion: reduce){
  .wnx-whatsapp{ transition:none }
  .wnx-whatsapp::after{ animation:none }
}

/* Responsive: un poco más chico en mobile */
@media (max-width: 768px){
  .wnx-whatsapp{ width:56px; height:56px; right:14px; bottom:14px; border-radius:16px; }
  .wnx-badge{ font-size:11px; padding:6px 9px; right:-10px; bottom:-8px; }
}


/* === FOOTER NUEVO === */
.footer-nuevo {
  background: rgba(255, 255, 255, 0.04); /* Transparente */
  backdrop-filter: blur(8px);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  font-family: 'Open Sans', sans-serif;
  color: #ccc;
}

.footer-nuevo i {
  color: #10b981;
}

.icono-footer {
  font-size: 1.6rem;
  color: #10b981;
  transition: all 0.3s ease;
  display: inline-block;
}

.icono-footer:hover {
  color: #00e6a0;
  transform: scale(1.25) translateY(-3px);
  text-shadow: 0 0 10px rgba(0, 230, 160, 0.6);
}

/* Línea */
.footer-divider {
  border-color: rgba(255, 255, 255, 0.1);
}

/* Botón volver arriba */
.btn-volver-arriba {
  font-size: 0.9rem;
  padding: 6px 18px;
  border-radius: 50px;
  background-color: #198754;
  color: #fff;
  font-weight: 600;
  transition: all 0.3s ease;
}

.btn-volver-arriba:hover {
  background-color: #10b981;
  transform: scale(1.05);
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.4);
}



/* =======================
   publicaciones
   ======================= */

  .hero-slider {
    width: 100%;
    height: 650px;
    position: relative; /* Esto es crucial para los ::before y ::after */
    overflow: hidden;
    pointer-events: auto !important;
    z-index: 1; /* Asegura que no tape otras secciones */
    border-radius: 12px;
  }
 
  .hero-slider .swiper {
    width: 100%;
    height: 100%;
  }

  .hero-slider .swiper-slide {
    width: 100%;
    height: 100%;
    position: relative;
  }

  .hero-slider .swiper-slide a {
    pointer-events: auto !important;
  }

  .slider-img {
    width: 100%;
    height: 100%;
    object-position: center; /* Centra la imagen */
    object-fit: cover; /* En lugar de contain */
    background-color: #fff; /* Evita que se vea vacío si hay margen */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .hero-slider .swiper-button-next,
  .hero-slider .swiper-button-prev {
    color: #fff;
    background: rgba(0, 0, 0, 0.3);
    padding: 10px;
    border-radius: 50%;
    transition: 0.3s ease;
  }

  .hero-slider .swiper-button-next:hover,
  .hero-slider .swiper-button-prev:hover {
    background: rgba(0, 0, 0, 0.6);
  }

  .hero-slider .swiper-pagination-bullet-active {
    background: #28a745;
  }

  .swiper-slide {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
  }
  .swiper-slide img {
    position: relative;
    z-index: 2;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-radius: 12px;
  }


  .swiper-slide img:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
  }

  .swiper-slide::before {
    content: "";
    position: absolute;
    inset: 0;
    margin: 6px; /* crea separación entre borde e imagen */
    border-radius: 16px;
    z-index: 1;
    pointer-events: none;
    animation: animateBorder 6s linear infinite;
  }



@keyframes animateBorder {
  0% { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(360deg); }
}


.hero-slider .hero-texto h2 {
  font-size: 1.8rem;
  color: #222;
}

.hero-slider .hero-texto {
  position: absolute;
  bottom: 20px; /* O top: 50% para centrar */
  left: 50%;
  transform: translateX(-50%);
  z-index: 11;
  text-align: center;
  color: #fff;
  padding: 8px 20px;
  border-radius: 10px;
}


@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.swiper-slide {
  perspective: 1000px;
  transform-style: preserve-3d;
}

/* Animación 3D al hover */
.swiper-slide:hover .slide-overlay {
  opacity: 1;
  transform: translate(-50%, -40%) scale(1) translateY(-10px);
}




/* Contenedor interno de la imagen y el overlay */
.slide-content {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* Contenedor de título y descripción con brillo cruzado */
.slide-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -40%) scale(0.95);
  padding: 20px 30px;
  width: 80%;
  text-align: center;
  color: #fff;
  border-radius: 18px;

  /* Glassmorphism + degradado animado */
  background: linear-gradient(135deg, rgba(0,255,150,0.25), rgba(0,150,255,0.25));
  background-size: 300% 300%;
  animation: gradientMove 8s ease infinite;

  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);

  border: 2px solid rgba(0,255,200,0.2);
  box-shadow: inset 0 0 30px rgba(0,0,0,0.4), 0 4px 20px rgba(0,0,0,0.4);

  opacity: 0;
  filter: blur(10px);
  transition: all 0.6s ease;
  pointer-events: auto;
  overflow: hidden;
  z-index:10;
}

.slide-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: linear-gradient(45deg, #00ffcc, #0099ff, #ff66cc, #00ffcc);
  background-size: 300% 300%;
  animation: borderGlow 6s linear infinite;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
@keyframes borderGlow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}


/* Efecto brillo cruzado */
.slide-overlay::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 80%;
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.5) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-25deg);
  animation: shineEffect 5s infinite;
}

/* Hover para mostrar overlay */
.swiper-slide:hover .slide-overlay {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  filter: blur(0px);
}

/* Animación de brillo */
@keyframes shineEffect {
  0%, 90% { left: -100%; }
  100% { left: 120%; }
}

/* Animación degradado fondo */
@keyframes gradientMove {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Títulos con animación suave */
.slide-title {
  font-size: 1.6rem;
  font-weight: bold;
  margin-bottom: 10px;
  color: #fff;
  text-shadow: 0 0 8px rgba(0,255,200,0.5);
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.4s ease 0.2s;
  animation: pulseGlow 2s ease-in-out infinite;
}

@keyframes pulseGlow {
  0%, 100% { text-shadow: 0 0 8px rgba(0,255,200,0.6), 0 0 20px rgba(0,150,255,0.4); }
  50% { text-shadow: 0 0 15px rgba(0,255,200,1), 0 0 30px rgba(0,150,255,0.8); }
}

/* Descripción */
.slide-desc {
  font-size: 1rem;
  color: #e0e0e0;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.4s ease 0.4s;
}

/* Mostrar títulos y descripción */
.swiper-slide:hover .slide-title,
.swiper-slide:hover .slide-desc {
  opacity: 1;
  transform: translateY(0);
}


/* Título de la sección publicaciones */
.titulo-publicaciones h2 {
  font-size: 2.5rem;
  font-weight: bold;
  color: #222;
  position: relative;
  display: inline-block;
  padding-bottom: 10px;
}

.titulo-publicaciones h2::after {
  content: "";
  display: block;
  width: 60px;
  height: 4px;
  background: linear-gradient(90deg, #00ff99, #00ccff, #ff66cc);
  border-radius: 2px;
  margin: 8px auto 0 auto;
  animation: gradientLine 3s linear infinite;
}

.subtitulo-publicaciones {
  font-size: 1.1rem;
  color: #555;
  margin-top: 8px;
  margin-bottom: 30px;
  opacity: 0.9;
  text-align: center;
}

/* Animación línea */
@keyframes gradientLine {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}



/* Botón "Ingresar" iluminado */

.boton-ingresar:hover {
  border-color: #198754;
  color: #198754;
  box-shadow: 0 0 10px #198754;
  background-color: transparent;
  transition: 0.3s ease;
}

/* Iconos contacto */

.footer i,
.footer .icono-red {
  color: #198754 !important;
  filter: brightness(1.2);
}

.glightbox-container .gslide-media img {
  max-width: 80% !important;
  max-height: 80vh !important;
  margin: 0 auto;
}

.gslide-media img {
  animation: fadeInImage 0.6s ease-in-out;
}

@keyframes fadeInImage {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}


.grid-publicaciones {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 25px;
  padding: 40px 0;
  width: 100%;
}

.card-trabajo {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
}

.card-trabajo:hover {
  transform: translateY(-10px);
}

.img-trabajo {
  width: 100%;
  height: 240px;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

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


body:not(.dark-mode) .card-trabajo .titulo-card,
body:not(.dark-mode) .card-trabajo .descripcion-card {
  color: #222;
  text-shadow: none;
}

body:not(.dark-mode) .card-trabajo {
  background: linear-gradient(to bottom, #ffffff, #f0fdf4); /* leve verde suave */
}



.contenido-card {
  padding: 16px 20px;
}

/* === MODO CLARO === */
body:not(.dark-mode) .titulo-card {
  font-size: 1.3rem;
  font-weight: bold;
  color: #047857; /* Verde más oscuro y legible */
  margin-bottom: 6px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); /* sombra sutil */
}

body:not(.dark-mode) .descripcion-card {
  color: #333; /* Gris oscuro para buen contraste */
  font-size: 0.95rem;
  line-height: 1.5;
}


/* Estilo glow solo en modo claro */
body:not(.dark-mode) .titulo-estilo.glow {
  text-shadow: 0 0 6px rgba(16,185,129,0.5), 0 0 20px rgba(16,185,129,0.3);
}


.swiper {
  padding: 30px 10px;
  overflow: hidden;
}

.swiper-slide {
  width: 280px;
  flex-shrink: 0;
}



.ver-mas-container {
  margin-top: 40px;
  margin-bottom: 80px;
}

.boton-ver-mas {
  display: inline-block;
  padding: 12px 30px;
  font-size: 1rem;
  color: #fff;
  background: linear-gradient(135deg, #00ffe7, #007bff);
  border-radius: 30px;
  text-decoration: none;
  box-shadow: 0 0 10px rgba(0,255,231,0.5);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  font-weight: bold;
}

.boton-ver-mas:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 20px rgba(0,255,231,0.6);
}

.glow-boton {
  animation: glowPulse 2s infinite ease-in-out;
}

@keyframes glowPulse {
  0% { box-shadow: 0 0 10px rgba(0,255,231,0.5); }
  50% { box-shadow: 0 0 20px rgba(0,255,231,0.9); }
  100% { box-shadow: 0 0 10px rgba(0,255,231,0.5); }
}



/* === MODO OSCURO BESARES DISEÑO (UNIFICADO) === */

body.dark-mode {
  background: linear-gradient(180deg, #0f0f0f, #1a1a1a, #2c2c2c);
  background-size: 300% 300%;
  background-attachment: fixed;
  background-repeat: no-repeat;
  animation: fondoAnimado 20s ease infinite;
  color: #f1f1f1;
}

/* Animación de fondo degradado */
@keyframes fondoAnimado {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Colores de texto generales */
.dark-mode p,
.dark-mode .titulo-seccion,
.dark-mode .descripcion-servicios,
.dark-mode .titulo-seccion-contacto,
.dark-mode .footer,
.dark-mode .nav-link,
.dark-mode .navbar .navbar-brand {
  color: #ffffff !important;
}

/* === NAVBAR === */
.dark-mode .navbar.bg-gradient-green {
  background: linear-gradient(145deg, #1e1e1e, #2a2a2a);
  border-bottom: 1px solid #333;
  position: relative;
  overflow: hidden;
}

.dark-mode .navbar.bg-gradient-green::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background: linear-gradient(to bottom, rgba(18, 18, 18, 0.9), transparent);
  pointer-events: none;
  z-index: 1;
  animation: shiftGradient 12s ease infinite;
}

/* Forzar transparencia en modo oscuro para todas las secciones */
.dark-mode .seccion-inicio,
.dark-mode .seccion-servicios,
.dark-mode .seccion-contacto,
.dark-mode .footer,
.dark-mode .hero-slider {
  background-color: transparent !important;
  background: none !important;
}


/* === EFECTO DE BRILLO PULSANTE EN SECCIONES === */
@keyframes pulseGlow {
  0% { opacity: 0.4; transform: scale(1); filter: blur(8px); }
  50% { opacity: 0.8; transform: scale(1.05); filter: blur(12px); }
  100% { opacity: 0.4; transform: scale(1); filter: blur(8px); }
}

.dark-mode .seccion-inicio::after,
.dark-mode .seccion-servicios::after,
.dark-mode .seccion-contacto::after,
.dark-mode .footer::before,
.dark-mode .hero-slider::after {
  animation: pulseGlow 6s ease-in-out infinite;
}

/* Brillos neón */
.dark-mode .seccion-inicio::after {
  background: linear-gradient(to top, rgba(25, 135, 84, 0.15), transparent);
}
.dark-mode .seccion-servicios::after {
  background: linear-gradient(to top, rgba(0, 150, 255, 0.15), transparent);
}
.dark-mode .seccion-contacto::after {
  background: linear-gradient(to top, rgba(25, 135, 84, 0.15), transparent);
}
.dark-mode .footer::before {
  background: linear-gradient(to bottom, rgba(0, 150, 255, 0.15), transparent);
}
.dark-mode .hero-slider::after {
  background: linear-gradient(to top, rgba(0, 150, 255, 0.15), transparent);
}

/* === TÍTULOS NEÓN ANIMADOS === */
@keyframes neonGlow {
  0%, 100% {
    text-shadow: 0 0 5px rgba(0, 255, 180, 0.7), 0 0 10px rgba(0, 150, 255, 0.6),
                 0 0 20px rgba(0, 255, 180, 0.4), 0 0 30px rgba(0, 150, 255, 0.4);
  }
  50% {
    text-shadow: 0 0 8px rgba(0, 255, 180, 0.9), 0 0 18px rgba(0, 150, 255, 0.8),
                 0 0 30px rgba(0, 255, 180, 0.5), 0 0 40px rgba(0, 150, 255, 0.5);
  }
}

.dark-mode h2,
.dark-mode h3,
.dark-mode .titulo-seccion {
  color: #f1f1f1;
  animation: neonGlow 3s ease-in-out infinite alternate;
  position: relative;
}

.dark-mode .titulo-seccion::after {
  content: "";
  display: block;
  width: 80px;
  height: 4px;
  margin: 10px auto 0;
  border-radius: 2px;
  background: linear-gradient(90deg, #00ffb4, #0096ff, #ff66cc);
  background-size: 200% 200%;
  animation: shiftGradient 5s linear infinite;
  box-shadow: 0 0 10px rgba(0, 255, 180, 0.6),
              0 0 20px rgba(0, 150, 255, 0.4);
}

/* === ANIMACIÓN GRADIENT SHIFT === */
@keyframes shiftGradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

body.dark-mode #vanta-background {
  display: block;
}

body.dark-mode #inicio {
  position: relative;
  z-index: 1; /* Asegura que el video quede por encima del fondo */
}

.dark-mode .bienvenida {
  color: #e0f4ff;
  text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
}

.dark-mode .subtitle {
  color: #dcefff;
  text-shadow: 1px 1px 8px rgba(100, 200, 255, 0.3);
}

/* === MODO OSCURO: MEJORAS PARA SECCIÓN SERVICIOS === */
.dark-mode .seccion-servicios {
  background-color: transparent !important;
  padding-top: 150px;
  padding-bottom: 180px;
  position: relative;
  z-index: 1;
}

/* Fondo difuminado y brillo para las tarjetas */
.dark-mode .servicio-box {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 20px rgba(0, 255, 180, 0.05), 0 0 60px rgba(0, 150, 255, 0.06);
  color: #f0f0f0;
  transition: all 0.3s ease;
}

/* Hover con efecto neón leve */
.dark-mode .servicio-box:hover {
  background: rgba(0, 255, 180, 0.07);
  box-shadow: 0 0 25px rgba(0, 255, 180, 0.2), 0 0 45px rgba(0, 150, 255, 0.2);
  transform: translateY(-10px);
}

/* Ícono en modo oscuro */
.dark-mode .servicio-icon {
  filter: drop-shadow(0 0 10px rgba(0, 255, 180, 0.5));
}

/* Título de cada servicio */
.dark-mode .servicio-box h4 {
  color: #ffffff;
  text-shadow: 0 0 5px rgba(0, 255, 180, 0.3);
}

/* Descripción dentro de la tarjeta */
.dark-mode .servicio-box p {
  color: #d0eaff;
  text-shadow: 0 0 3px rgba(0, 255, 255, 0.1);
}

/* Botón "ver más" en modo oscuro */
.dark-mode .ver-mas .btn {
  background-color: #00ffb4;
  color: #000;
  box-shadow: 0 0 10px rgba(0, 255, 180, 0.4);
}

.dark-mode .ver-mas .btn:hover {
  background-color: #0096ff;
  color: white;
}

/* Botón contacto en modo oscuro */
.dark-mode .boton-contacto {
  background-color: #00ffb4;
  color: #000;
  box-shadow: 0 0 10px rgba(0, 255, 180, 0.4);
}

.dark-mode .boton-contacto:hover {
  background-color: #0096ff;
  color: white;
}


/* Botón contacto en modo oscuro */
.dark-mode .boton-publi {
  background-color: #00ffb4;
  color: #000;
  box-shadow: 0 0 10px rgba(0, 255, 180, 0.4);
}

.dark-mode .boton-publi:hover {
  background-color: #0096ff;
  color: white;
}



/* ===========================
   MODO OSCURO - SECCIÓN CONTACTO
   =========================== */

.dark-mode .seccion-contacto {
  background: transparent !important;
  position: relative;
  z-index: 1;
}

.dark-mode .contacto-box {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 20px rgba(0, 255, 180, 0.05), 0 0 60px rgba(0, 150, 255, 0.06);
  color: #f0f0f0;
}

.dark-mode .contacto-box:hover {
  background: rgba(0, 255, 180, 0.07);
  box-shadow: 0 0 25px rgba(0, 255, 180, 0.2), 0 0 45px rgba(0, 150, 255, 0.2);
  transform: translateY(-10px);
}

.dark-mode .titulo-seccion-contacto {
  color: #ffffff;
  animation: neonGlow 3s ease-in-out infinite alternate;
}

.dark-mode .input-neon {
  background-color: rgba(255, 255, 255, 0.08);
  color: #f0f0f0;
  border-color: rgba(255, 255, 255, 0.2);
}

.dark-mode .input-neon::placeholder {
  color: #bbbbbb;
}

.dark-mode .input-neon:focus {
  border-color: #00ffb4;
  box-shadow: 0 0 10px rgba(0, 255, 180, 0.5);
}



/* Animaciones de soporte ya definidas en tu CSS */
@keyframes neonGlow {
  0%, 100% {
    text-shadow: 0 0 5px rgba(0, 255, 180, 0.7), 0 0 10px rgba(0, 150, 255, 0.6),
                 0 0 20px rgba(0, 255, 180, 0.4), 0 0 30px rgba(0, 150, 255, 0.4);
  }
  50% {
    text-shadow: 0 0 8px rgba(0, 255, 180, 0.9), 0 0 18px rgba(0, 150, 255, 0.8),
                 0 0 30px rgba(0, 255, 180, 0.5), 0 0 40px rgba(0, 150, 255, 0.5);
  }
}

@keyframes shiftGradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* === MODO OSCURO === */
.dark-mode .titulo-card {
  font-size: 1.3rem;
  font-weight: bold;
  color: #ffffff;
  margin-bottom: 6px;
  text-shadow: 0 0 5px rgba(16, 185, 129, 0.5);
}

.dark-mode .descripcion-card {
  color: #ddd;
  font-size: 0.95rem;
  line-height: 1.5;
}



/* === INTENSIFICACIÓN LOCAL DEL SPOTLIGHT EN ELEMENTOS INTERACTIVOS === */

/* Elementos que activan el foco más brillante */
.spotlight-focus:hover ~ body::before,
.dark-mode .spotlight-focus:hover ~ body::before {
  opacity: 0.2 !important;
  filter: brightness(1.5) saturate(1.5) blur(2px);
}

/* Alternativa más robusta sin usar ~ (para todos los elementos con hover) */
.spotlight-focus:hover {
  --spotlight-intensity: 0.3;
}

body::before {
  opacity: var(--spotlight-intensity, 0.1);
}


/* === ANIMACIÓN ENTRADA DESDE ABAJO CON FADE === */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* === ENTRADA CON ZOOM (ESCALA) PARA EFECTO PREMIUM === */
.reveal-zoom {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.reveal-zoom.visible {
  opacity: 1;
  transform: scale(1);
}

/* === ENTRADA DESDE ARRIBA PARA TÍTULOS === */
.reveal-top {
  opacity: 0;
  transform: translateY(-30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.reveal-top.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Canvas global de niebla (detrás de todo el sitio) */
#fogCanvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: -2;             /* por detrás de todo */
  pointer-events: none;
  opacity: 0.28;           /* sutil por defecto */
  mix-blend-mode: screen;  /* queda suave sobre fondo oscuro */
}

/* En modo claro lo apagamos visualmente (por si queda montado) */
body:not(.dark-mode) #fogCanvas { opacity: 0; }


/* Modo oscuro */
body.dark-mode .seccion-servicios {
  --fondo-servicio: radial-gradient(circle at top left, #1a1a1a, #0d0d0d);
}


/* Modo oscuro - texto blanco con sombra */
body.dark-mode .seccion-servicios .titulo-seccion,
body.dark-mode .seccion-servicios p {
  --texto-servicio: #ffffff;
  text-shadow: 0 0 5px rgba(255,255,255,0.15);
}

body.dark-mode .servicio-box h4 {
  color: #72f7b4;
}




/* Modo oscuro */
body.dark-mode .footer-nuevo {
  background: rgba(0, 0, 0, 0.3);
  color: #ddd;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

body.dark-mode .icono-footer {
  color: #0df0b6;
}

body.dark-mode .icono-footer:hover {
  color: #ffffff;
  text-shadow: 0 0 14px #0df0b6;
}



/* Modo claro */
body:not(.dark-mode) .titulo-seccion-glow,
body:not(.dark-mode) .descripcion-servicios-glow {
  color: #222;
  text-shadow: none;
}

body:not(.dark-mode) .subrayado-pastel {
  background: linear-gradient(90deg, #00c18e, #635cff, #ff87d7);
  filter: none;
  animation: none;
}



/* ============================
   RESPONSIVE GENERAL - MOBILE
   ============================ */
@media (max-width: 768px) {
  /* Tipografía y títulos */
  .bienvenida {
    font-size: 2rem;
    text-align: center;
    white-space: normal;
    overflow: visible;
    border-right: none;
    animation: none; /* Evita problemas con el efecto máquina de escribir */
  }

  .subtitle,
  .typewriter-sub {
    font-size: 1.2rem;
    text-align: center;
    white-space: normal;
    overflow: visible;
    border-right: none;
    animation: none;
  }

  /* Logos */
  .logo-sombra,
  .logo-inicio {
    max-width: 220px;
    margin: 0 auto 20px auto;
  }

  .logo-container {
    text-align: center;
  }

  /* Sección inicio */
  .seccion-inicio {
    padding: 60px 20px;
    height: auto;
    text-align: center;
    flex-direction: column;
  }

  .seccion-inicio .container {
    padding: 20px 10px;
  }

  /* Slider */
  .hero-slider {
    height: 380px;
  }

  .swiper-slide {
    height: auto;
  }

  .slider-img {
    height: 100%;
    object-fit: cover;
  }

  .slide-overlay {
    width: 90%;
    padding: 10px;
    font-size: 0.9rem;
  }

  .slide-title {
    font-size: 1.2rem;
  }

  .slide-desc {
    font-size: 1rem;
  }

  /* Cards de trabajos */
  .img-trabajo {
    height: 180px;
  }

  .grid-publicaciones {
    grid-template-columns: 1fr;
    padding: 20px 10px;
  }

  /* Servicios */
  .servicio-box {
    padding: 25px 20px;
    min-height: auto;
  }

  /* Titulares */
  .titulo-seccion-unificado {
    font-size: 2rem;
  }

  .subtitulo-seccion-unificado {
    font-size: 1rem;
  }

  .titulo-estilo {
    font-size: 2rem;
  }

  .subtitulo-estilo {
    font-size: 1rem;
  }

  /* Botones */
  .boton-publi,
  .boton-contacto,
  .boton-ver-mas {
    width: 100%;
    padding: 12px;
    font-size: 1rem;
    max-width: 100%;
  }

  .navbar .btn-outline-light {
    font-size: 0.9rem;
    padding: 6px 12px;
  }

  /* Footer */
  .footer-nuevo {
    text-align: center;
    padding: 30px 10px;
  }

  /* WhatsApp */
  .whatsapp-button {
    width: 50px;
    height: 50px;
    bottom: 15px;
    right: 15px;
  }

  /* Mapa responsive */
  .mapa-embed iframe {
    width: 100% !important;
    height: 280px !important;
    border-radius: 10px;
  }

  /* Navbar responsive hamburguesa */
  .navbar-toggler {
    display: block;
  }

  .collapse.navbar-collapse {
    display: none;
  }

  .collapse.navbar-collapse.show {
    display: block;
  }

  /* Colapsar columnas tipo .col-md-4 */
  .col-md-4,
  .col-md-6 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .text-md-start,
  .text-md-end {
    text-align: center !important;
  }

  /* Scroll down oculto en mobile si ocupa lugar */
  .scroll-down {
    display: none;
  }
}


/* Previene scroll lateral */
html, body {
  max-width: 100vw;
  overflow-x: hidden !important;
}


/* Corregir posición del botón de WhatsApp en mobile */
@media (max-width: 768px) {
  .whatsapp-button {
    right: 10px;
    bottom: 10px;
    width: 50px;
    height: 50px;
    max-width: 100%;
    z-index: 1000;
  }
}


/* Hamburgesa bien visible en oscuro (soporta .dark-mode y .modo-oscuro) */
body.dark-mode .navbar-toggler,
.modo-oscuro .navbar-toggler {
  border-color: rgba(255,255,255,0.9) !important;
}

body.dark-mode .navbar-toggler-icon,
.modo-oscuro .navbar-toggler-icon {
  /* tres líneas blancas */
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255,1)' stroke-width='2' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") !important;
}

/* En modo claro, que quede oscuro */
body:not(.dark-mode) .navbar-toggler,
:not(.modo-oscuro) .navbar-toggler {
  border-color: rgba(34,34,34,0.9);
}
body:not(.dark-mode) .navbar-toggler-icon,
:not(.modo-oscuro) .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(34,34,34,0.9)' stroke-width='2' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}



img, iframe, video, .container, .row, .col, .col-*, .hero-slider {
  max-width: 100% !important;
  box-sizing: border-box;
}

/* Auth modal glass */
.auth-glass {
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 18px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.35);
}
body:not(.dark-mode) .auth-glass {
  background: rgba(255,255,255,0.9);
  border: 1px solid rgba(0,0,0,0.05);
}

/* Pills del modal */
#authTabs .nav-link {
  font-weight: 600;
}
#authTabs .nav-link.active {
  background: linear-gradient(135deg, #00ffb4, #0096ff);
  color: #000;
  border: 0;
}

/* --- FIX: tarjetas del slider con descripciones largas --- */
.card-trabajo{
  display:flex;
  flex-direction:column;
  height:100%;
}

.card-trabajo .contenido-card{
  flex:1 1 auto;              /* ocupa el alto disponible sin crecer infinito */
  display:flex;
  flex-direction:column;
  gap:.35rem;
}

/* Título: 1–2 líneas como máximo (ajustá el clamp si querés) */
.titulo-card{
  line-height:1.2;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp: 2;
  overflow:hidden;
}

/* Descripción: 3 líneas, cortar palabras muy largas si hace falta */
.descripcion-card{
  line-height:1.5;            /* ya la tenés en claro; repetimos para el calc */
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp: 3;      /* <- cambiá a 2/4 si preferís */
  overflow:hidden;
  max-height: calc(1.5em * 3);
  overflow-wrap:anywhere;     /* evita que una palabra larguísima desborde */
}

/* En mobile podemos recortar un poco más si querés */
@media (max-width: 576px){
  .titulo-card{ -webkit-line-clamp: 1; }
  .descripcion-card{
    -webkit-line-clamp: 2;
    max-height: calc(1.5em * 2);
  }
}


                     /* =========================================================
                            NUEVA AREA DE BIENVENIDA Y NAVBAR
   ========================================================= */



/* =========================================================
   NUEVA AREA DE BIENVENIDA Y NAVBAR (v2)
   ========================================================= */

/* =========================
   Variables base por tema
   ========================= */
:root{
  --accent: #17c3b2;
  --accent-2: #27d8ff;
  --accent-3: #b992ff;

  /* CHANGE: variables de glass/nav y hero para CLARO */
  --glass-bg: rgba(255,255,255,0.60);
  --glass-border: rgba(0,0,0,0.06);
  --nav-link-color: #1e293b;     /* slate-800 */
  --nav-link-hover: #0f172a;     /* slate-900 */
  --hero-overlay-color: rgba(255,255,255,0.10); /* overlay más sutil en claro */
  --hero-dots-opacity: 0.06;     /* puntos más sutiles en claro */
  --nav-blur: 10px;
}

/* CHANGE: override de variables cuando está activo el modo oscuro
   (soporte por clase .dark-mode y por atributo data-bs-theme) */
.dark-mode, [data-bs-theme="dark"]{
  --glass-bg: rgba(17,24,39,0.55);           /* slate-900 con transparencia */
  --glass-border: rgba(255,255,255,0.06);
  --nav-link-color: rgba(255,255,255,0.92);
  --nav-link-hover: #ffffff;
  --hero-overlay-color: rgba(0,0,0,0.45);    /* overlay más marcado en oscuro */
  --hero-dots-opacity: 0.08;                 /* puntos más visibles en oscuro */
}

/* =========================
   Marca con degradado
   ========================= */
.brand-gradient{
  background: linear-gradient(90deg, var(--accent), var(--accent-2) 60%, var(--accent-3));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.25));
}

/* =========================
   NAVBAR – glass + scroll
   ========================= */
.bg-glass{
  /* CHANGE: glass usa variables por tema */
  backdrop-filter: saturate(180%) blur(var(--nav-blur));
  -webkit-backdrop-filter: saturate(180%) blur(var(--nav-blur));
  background: var(--glass-bg);
  border-bottom: 1px solid var(--glass-border);
  transition: background .25s ease, box-shadow .25s ease, border-color .25s ease;
  z-index: 1100;
}

/* CHANGE: estado al hacer scroll (un poco más sólido + sombra) */
#mainNav.scrolled{
  --glass-bg: rgba(255,255,255,0.85);
  --glass-border: rgba(0,0,0,0.08);
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.dark-mode #mainNav.scrolled,
[data-bs-theme="dark"] #mainNav.scrolled{
  --glass-bg: rgba(17,24,39,0.80);
  --glass-border: rgba(255,255,255,0.08);
  box-shadow: 0 2px 14px rgba(0,0,0,0.35);
}

/* CHANGE: colores de links/brand según tema */
#mainNav .navbar-brand,
#mainNav .nav-link{
  color: var(--nav-link-color) !important;
  text-shadow: none; /* claro: limpio, sin glow */
}
.dark-mode #mainNav .nav-link,
[data-bs-theme="dark"] #mainNav .nav-link{
  /* oscuro: leve glow para legibilidad sobre video */
  text-shadow: 0 0 8px rgba(0,0,0,0.35);
}
#mainNav .nav-link:hover,
#mainNav .nav-link:focus{
  color: var(--nav-link-hover) !important;
}

/* Toggler visible en ambos modos (borde) */
#mainNav .navbar-toggler{ border-color: rgba(0,0,0,.2); }
.dark-mode #mainNav .navbar-toggler,
[data-bs-theme="dark"] #mainNav .navbar-toggler{ border-color: rgba(255,255,255,.25); }

/* =========================
   HERO
   ========================= */
.hero{
  min-height: 96vh;
  position: relative;
  overflow: hidden;
  display:flex;
  align-items:center;
}
.background-video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:0;
  filter: saturate(1.05) contrast(1.05);
}

/* CHANGE: overlay unificado por variables (menos “lavado” en claro) */
.hero-overlay{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(1200px 600px at 70% 20%, var(--hero-overlay-color) 0%, transparent 60%),
    linear-gradient(to bottom, var(--hero-overlay-color) 0, transparent 55%);
}

/* CHANGE: partículas con opacidad por tema */
.hero-particles{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background-image: radial-gradient(currentColor 1px, transparent 1px);
  background-size: 22px 22px;
  color: #000;                         /* base para claro */
  opacity: var(--hero-dots-opacity);   /* controlado por variables */
}
.dark-mode .hero-particles,
[data-bs-theme="dark"] .hero-particles{
  color: #fff;
}

/* Contenido */
.hero-content{
  position:relative; z-index:3;
  text-align:center;
  color:#0e1116;  /* modo claro */
  padding: 6vh 0 8vh;
}
.dark-mode .hero-content,
[data-bs-theme="dark"] .hero-content{ color:#f7f8fb; }

/* Logo con halo */
.logo-orb{
  display:inline-grid; place-items:center;
  margin-bottom: .75rem;
  filter: drop-shadow(0 0 40px rgba(23,195,178,.35)) drop-shadow(0 10px 30px rgba(0,0,0,.25));
  animation: floatY 6s ease-in-out infinite;
}
.hero-logo{
  width: clamp(220px, 32vw, 440px);
  border-radius: 50%;
}
@keyframes floatY{
  0%,100%{ transform: translateY(0) }
  50%{ transform: translateY(-10px) }
}

/* Título */
.hero-title{
  font-weight: 800;
  font-size: clamp(2rem, 4.2vw, 3.2rem);
  letter-spacing:.5px;
  margin-top: .25rem;
  text-shadow: 0 2px 18px rgba(0,0,0,.15);
}
.dark-mode .hero-title,
[data-bs-theme="dark"] .hero-title{ text-shadow: 0 6px 28px rgba(0,0,0,.5); }

.hero-title-accent{
  background: linear-gradient(90deg, var(--accent), var(--accent-2) 60%, var(--accent-3));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* Subtítulo con shimmer leve */
.hero-subtitle{
  max-width: 820px;
  margin: .6rem auto 1.2rem;
  opacity:.95;
}
.shimmer{
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.55) 50%, rgba(255,255,255,0) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer 4.8s linear infinite;
}
/* shimmer oscuro/CLARO tal cual tenías */
[data-bs-theme="light"] .shimmer{
  background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.35) 50%, rgba(0,0,0,0) 100%);
}
@keyframes shimmer{ 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* CTA */
.hero-cta .btn{
  border-radius: 999px;
  padding: .7rem 1.1rem;
  font-weight: 600;
  box-shadow: 0 10px 22px rgba(23,195,178,.22);
}
/* outline-light legible en claro (se mantiene) */
[data-bs-theme="light"] .btn-outline-light{
  --bs-btn-color:#0e1116;
  --bs-btn-border-color: rgba(0,0,0,.15);
  --bs-btn-hover-bg: rgba(0,0,0,.06);
  --bs-btn-hover-border-color: rgba(0,0,0,.23);
}

/* Indicador scroll (mouse + punto) */
.scroll-indicator{
  position:absolute; left:50%; bottom:26px; transform:translateX(-50%);
  width:28px; height:46px; border:2px solid currentColor; border-radius:20px;
  opacity:.75;
}
.scroll-indicator::after{
  content:""; position:absolute; left:50%; top:8px; transform:translateX(-50%);
  width:6px; height:6px; border-radius:50%; background: currentColor; opacity:.8;
  animation: wheel 1.6s ease-in-out infinite;
}
@keyframes wheel{
  0%{ transform:translate(-50%,0); opacity:.9 }
  60%{ transform:translate(-50%,16px); opacity:.2 }
  100%{ transform:translate(-50%,0); opacity:.9 }
}

/* Mejor legibilidad del texto en CLARO (se mantiene) */
[data-bs-theme="light"] .hero-title,
[data-bs-theme="light"] .hero-subtitle{
  text-shadow: 0 1px 0 rgba(255,255,255,.65), 0 10px 22px rgba(0,0,0,.08);
}
/* ===== Mejoras de legibilidad en modo CLARO (subtítulo + botón) ===== */

/* 1) Subtítulo: desactivar shimmer en claro y convertirlo en texto sólido */
[data-bs-theme="light"] .hero-subtitle.shimmer{
  /* sin shimmer */
  animation: none;
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  color: #1f2937;                 /* slate-800 */
  text-shadow: 0 1px 0 rgba(255,255,255,.85),
               0 1px 2px rgba(0,0,0,.12);  /* leve realce */
  opacity: .96;                   /* más “firme” que antes */
}

/* 2) Botón "Contactanos" (outline) con contraste real en claro */
[data-bs-theme="light"] .hero-cta .btn.btn-outline-light{
  color: #0f172a;                              /* slate-900 */
  background: rgba(255,255,255,0.88);          /* pastilla clara visible */
  border-color: rgba(15,23,42,0.22);
  box-shadow: 0 8px 18px rgba(0,0,0,.08),
              0 0 0 4px rgba(15,23,42,.06) inset;
  backdrop-filter: saturate(120%) blur(4px);
}
[data-bs-theme="light"] .hero-cta .btn.btn-outline-light:hover,
[data-bs-theme="light"] .hero-cta .btn.btn-outline-light:focus{
  background: #ffffff;
  border-color: #0f172a;
  box-shadow: 0 10px 22px rgba(0,0,0,.10);
  transform: translateY(-1px);
}

/* 3) Un toque de presencia al botón "Ver trabajos" en claro */
[data-bs-theme="light"] .hero-cta .btn.btn-success{
  box-shadow: 0 10px 22px rgba(23,195,178,.22),
              0 0 0 4px rgba(23,195,178,.10) inset;
}
[data-bs-theme="light"] .hero-cta .btn.btn-success:hover{
  transform: translateY(-1px);
}

/* (Opcional) Si aún ves el fondo del hero muy lavado en claro,
   bajá un poco el overlay sin tocar el oscuro: */
:root{
  --hero-overlay-color: rgba(255,255,255,0.08); /* antes 0.10 */
}

/* ===== HERO: visibilidad en modo claro ===== */

/* 1) Subtítulo: desactiva shimmer en claro y agrega chip con blur */
[data-bs-theme="light"] .hero-subtitle {
  color: #0f172a;                     /* texto oscuro legible */
  display: inline-block;
  padding: .55rem .95rem;
  border-radius: 999px;               /* pill */
  background: rgba(255,255,255,.85);  /* glass suave */
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(2,6,23,.06); /* delineado muy sutil */
  text-shadow: 0 1px 0 rgba(255,255,255,.6),
               0 10px 18px rgba(0,0,0,.06); /* mejor legibilidad */
}

/* Si tiene la clase .shimmer, en claro la anulamos para no “borrar” el texto */
[data-bs-theme="light"] .hero-subtitle.shimmer{
  animation: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: #0f172a;
}

/* 2) CTA “Contactanos” (outline-light) adaptado a claro */
[data-bs-theme="light"] .hero-cta .btn.btn-outline-light{
  color: #0f172a;                        /* texto oscuro */
  background: rgba(255,255,255,.92);     /* fondo visible sobre video claro */
  border-color: rgba(15,23,42,.25);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 6px 18px rgba(2,6,23,.12);
}
[data-bs-theme="light"] .hero-cta .btn.btn-outline-light:hover{
  background: #0f172a;                   /* hover sólido */
  color: #fff;
  border-color: #0f172a;
  box-shadow: 0 10px 24px rgba(2,6,23,.18);
}

/* (Opcional) Si querés un chip aún más marcado, podés añadir .chip: */
.hero-subtitle.chip{
  padding: .6rem 1rem;
  border-radius: 999px;
}
/* =========================================================
   MODO CLARO = html SIN data-bs-theme="dark"
   (arregla subtítulo y botón "Contactanos")
   ========================================================= */

/* 0) El overlay en el hero, menos “lavado” en claro */
html:not([data-bs-theme="dark"]) .hero .hero-overlay{
  background:
    radial-gradient(120% 70% at 50% 30%, rgba(255,255,255,.22) 0%, transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.35) 0%, rgba(255,255,255,.10) 40%, rgba(255,255,255,.35) 100%);
}

/* 1) Subtítulo: desactivar shimmer y darle un pill legible */
html:not([data-bs-theme="dark"]) .hero-subtitle{
  color:#0f172a;
  display:inline-block;
  padding:.55rem .95rem;
  border-radius:999px;
  background:rgba(255,255,255,.88);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  border:1px solid rgba(2,6,23,.08);
  text-shadow:0 1px 0 rgba(255,255,255,.7), 0 10px 18px rgba(0,0,0,.06);
  opacity:1 !important;
}
/* si quedó la clase shimmer, la anulamos en CLARO */
html:not([data-bs-theme="dark"]) .hero-subtitle.shimmer{
  animation:none !important;
  background:none !important;
  -webkit-background-clip:border-box !important;
  background-clip:border-box !important;
  color:#0f172a !important;
}

/* 2) Botón "Contactanos" (outline-light) adaptado a CLARO */
html:not([data-bs-theme="dark"]) .hero-cta .btn.btn-outline-light{
  color:#0f172a;
  background:rgba(255,255,255,.92);
  border-color:rgba(15,23,42,.25);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  box-shadow:0 6px 18px rgba(2,6,23,.14);
}
html:not([data-bs-theme="dark"]) .hero-cta .btn.btn-outline-light:hover{
  background:#0f172a;
  color:#fff;
  border-color:#0f172a;
  box-shadow:0 10px 24px rgba(2,6,23,.22);
}


                     /* =========================================================
                            NUEVA AREA DE SERVICIOS
   ========================================================= */
   

/* =========================
   SERVICIOS – Neo Glass v1
   ========================= */
:root{
  --s-accent: var(--accent, #17c3b2);
  --s-accent-2: var(--accent-2, #27d8ff);
  --s-card-bg: rgba(255,255,255,.72);
  --s-card-brd: rgba(0,0,0,.06);
  --s-dots: rgba(0,0,0,.08);
}
.dark-mode, [data-bs-theme="dark"]{
  --s-card-bg: rgba(255,255,255,.06);
  --s-card-brd: rgba(255,255,255,.12);
  --s-dots: rgba(255,255,255,.12);
}

/* fondo suave con “puntillado” y velos */
.services-neo{
  position: relative;
  overflow: hidden;
  padding-top: 88px;
  padding-bottom: 110px;
}
.services-neo::before{
  content:"";
  position:absolute; inset:0;
  background-image: radial-gradient(var(--s-dots) 1px, transparent 1px);
  background-size: 26px 26px;
  pointer-events:none;
  opacity:.28;
}
.services-neo::after{
  content:"";
  position:absolute; inset:-20% -10% auto -10%; height:60%;
  background: radial-gradient(60% 60% at 50% 40%,
              color-mix(in OKLCH, var(--s-accent) 40%, transparent) 0%,
              transparent 70%);
  filter: blur(40px);
  opacity:.25;
  pointer-events:none;
}

.services-head .services-title{
  font-weight: 800;
  font-size: clamp(1.9rem, 2.6vw, 2.4rem);
  margin-bottom: .25rem;
  color: var(--nav-link-hover, #0f172a);
  text-shadow: 0 0 14px color-mix(in oklab, var(--s-accent) 35%, transparent);
}
.dark-mode .services-head .services-title{ color:#fff; }

.services-head .services-title::after{
  content:"";
  display:block; width:86px; height:4px; margin:.6rem auto 0;
  border-radius:999px;
  background: linear-gradient(90deg, var(--s-accent), var(--s-accent-2));
}
.services-head .services-sub{
  max-width: 820px;
  margin: .35rem auto .75rem;
  color: color-mix(in srgb, #000 70%, #fff 30%);
  opacity:.85;
  text-wrap: balance;
}
.dark-mode .services-head .services-sub{ color:#e9eef6; opacity:.85; }

/* tarjeta */
.service-card{
  position: relative;
  height: 100%;
  border-radius: 22px;
  background: var(--s-card-bg);
  border: 1px solid var(--s-card-brd);
  box-shadow:
    0 10px 30px rgba(0,0,0,.1),
    inset 0 1px 0 rgba(255,255,255,.35);
  padding: 26px 22px 22px;
  display:flex; flex-direction:column; align-items:center; gap:.45rem;
  transform-style: preserve-3d;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.service-card:hover{
  transform: translateY(-6px);
  box-shadow:
    0 14px 38px rgba(0,0,0,.16),
    0 0 0 1px color-mix(in oklab, var(--s-accent) 25%, transparent),
    0 0 42px color-mix(in oklab, var(--s-accent-2) 20%, transparent);
}

/* ícono “burbuja” con halo */
.service-icon{
  position:relative; display:grid; place-items:center;
  width:108px; height:108px; border-radius:50%;
  background: radial-gradient(65% 65% at 50% 40%, #fff7, #fff0);
  box-shadow: inset 0 6px 18px rgba(0,0,0,.12);
  margin-top:-6px; margin-bottom:4px;
}
.dark-mode .service-icon{ background: radial-gradient(65% 65% at 50% 40%, #fff2, #0000); }
.service-icon img{
  width:74px; height:74px; object-fit:contain;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.18));
  animation: floatY 6s ease-in-out infinite;
}
.service-icon .ring{
  position:absolute; inset:-10px; border-radius:50%;
  background: conic-gradient(from 0turn, var(--s-accent), var(--s-accent-2), var(--s-accent));
  filter: blur(10px) opacity(.35);
  z-index:-1;
}

/* título + texto */
.service-title-card{
  font-weight: 700;
  font-size: 1.15rem;
  margin:.1rem 0 .2rem;
  text-align:center;
  color: color-mix(in srgb, #000 85%, #fff 15%);
}
.dark-mode .service-title-card{ color:#fff; }

.service-desc{
  text-align:center;
  color: color-mix(in srgb, #000 60%, #fff 40%);
  margin: 0 4px .2rem;
  line-height: 1.45;
  max-width: 36ch;
}
.dark-mode .service-desc{ color:#dbe7ff; }

/* CTA */
.btn-pill{ border-radius:999px; padding:.65rem 1.05rem; font-weight:600; }
.service-cta{ margin-top:auto; }

/* 3D tilt (suave, se desactiva si reduce motion) */
@media (prefers-reduced-motion: no-preference){
  .service-card[data-tilt]{ will-change: transform; }
}

/* responsive */
@media (max-width: 768px){
  .service-card{ padding:22px 18px; }
}

/* flotación del icono (reutiliza la animación que ya tenías) */
@keyframes floatY{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }





/* ===== Modal Index: detalles a la derecha ===== */
.modal-detalles{
  display: flex;
  flex-direction: column;
  gap: .75rem;
  max-height: 65vh;
}

.modal-precio{
  display:none;
  font-weight: 800;
  font-size: 1.25rem;
  color: #198754;
}
.modal-precio.show{ display:block; }
.modal-precio .monto{
  margin-left:.35rem;
  font-weight: 800;
}

.modal-desc{
  font-size: .98rem;
  line-height: 1.55;
  color: #444;
  white-space: pre-line;         /* respeta saltos de línea */
  overflow: auto;                /* scroll si es muy larga */
  max-height: clamp(180px, 40vh, 420px);
  padding-right: .35rem;
}
body.dark-mode .modal-desc{ color:#d0eaff; }

/* Scrollbar sutil */
.modal-desc::-webkit-scrollbar{ width: 8px; }
.modal-desc::-webkit-scrollbar-thumb{
  background: rgba(0,0,0,.2);
  border-radius: 8px;
}
body.dark-mode .modal-desc::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.2);
}

/* Botón WhatsApp (por si no estaba ya cargado) */
.btn-wsp{
  background:#25D366;
  color:#fff !important;
  border:0;
  border-radius:999px;
  padding:.6rem 1rem;
  font-weight:700;
  letter-spacing:.2px;
  box-shadow:0 6px 16px rgba(37,211,102,.35);
  transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.btn-wsp:hover{
  transform: translateY(-1px);
  box-shadow:0 8px 22px rgba(37,211,102,.45);
  filter:brightness(1.02);
}

/* === APAGAR EL PATRÓN DE PUNTITOS EN TODA LA PÁGINA === */

/* contenedores globales más comunes */
html, body,
main, .main,
.page, .page-wrap, .page-wrapper,
.site, .site-wrap, .site-wrapper,
.content, .content-wrap {
  background-image: none !important;
  background-repeat: no-repeat !important;
}

/* secciones típicas donde suele quedar el patrón */
section, .section,
#servicios, .servicios, #services, .services,
.container, .container-fluid,
.cards, .card {
  background-image: none !important;
}

/* por si el patrón estaba montado en pseudo-elementos */
html::before, html::after,
body::before, body::after,
main::before, main::after,
.page::before, .page::after,
.site::before, .site::after,
section::before, section::after {
  background-image: none !important;
  content: none !important; /* si estaba dibujado con pseudo */
}

/* modo oscuro / claro: color liso de base (ajustá a tu paleta) */
html[data-bs-theme="dark"] body { background-color: #0e1216; }
html[data-bs-theme="light"] body { background-color: #f7f9fc; }

/* si existía el div de partículas del hero, ocultarlo también */
.hero-particles,
#particles-js, .particles, .particles-js, #bg-canvas, #fogCanvas {
  display: none !important;
  pointer-events: none !important;
  background: none !important;
}

/* ===========================
   MODAL VIDEOS – VERSIÓN FINAL
   =========================== */

/* Bloqueo de scroll cuando el modal está abierto */
html.ag-video-scroll-lock,
body.ag-video-scroll-lock {
  overflow: hidden !important;
  height: 100%;
}

/* Overlay apagado */
.ag-video-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;

  /* 🔥 clave para centrar: usamos flex */
  display: none;
  align-items: center;
  justify-content: center;

  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease-out;
}

/* Overlay encendido */
.ag-video-modal.ag-video-open {
  display: flex !important; /* flex en lugar de block */
  opacity: 1;
  visibility: visible;
}

/* Fondo oscuro */
.ag-video-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.82);
  backdrop-filter: blur(4px);
}

/* Contenido centrado en pantalla */
.ag-video-modal-content {
  position: relative;
  max-width: 960px;
  width: 94%;
  background: #050505;
  border-radius: 14px;
  box-shadow: 0 20px 45px rgba(0,0,0,.75);
  z-index: 2;

  /* 💡 clave: que no supere el alto de la ventana */
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  padding: 52px 22px 18px;
  overflow: hidden;
}

/* Animación de aparición del contenido cuando el modal se abre */
.ag-video-modal.ag-video-open .ag-video-modal-content {
  animation: ag-video-pop 0.26s ease-out forwards;
}

@keyframes ag-video-pop {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}


/* Botón cerrar (X) fuera del video, arriba a la derecha */
.ag-video-close {
  position: absolute;
  top: 10px;
  right: 14px;
  background: rgba(15,15,15,0.9);
  border: 0;
  color: #fff;
  font-size: 26px;
  cursor: pointer;
  line-height: 1;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.12);
  transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
  z-index: 3;
}

.ag-video-close:hover {
  background: #16a34a;
  transform: scale(1.05);
  box-shadow: 0 0 16px rgba(22,163,74,0.6);
}

.ag-video-wrapper {
  position: relative;
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
  background: #000;
  flex: 0 0 auto;
}

/* Video con proporción 16:9 y limitado por la altura de pantalla */
.ag-video-wrapper iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 55vh;      /* 🔥 nunca ocupa más del 55% del alto */
  border-radius: 10px;
  display: block;
  border: 0;
}

@media (max-height: 720px) {
  .ag-video-wrapper iframe {
    max-height: 45vh;    /* en pantallas bajitas, se achica un poco más */
  }
}


/* Título y descripción */
#agVideoTitle {
  margin-top: 14px;
  margin-bottom: 4px;
  font-size: 1.15rem;
  font-weight: 600;
  color: #f9fafb;
}

#agVideoDesc {
  margin: 0;
  font-size: 0.9rem;
  color: #9ca3af;
}

/* Ajustes responsive */
@media (max-width: 768px) {
  .ag-video-modal-content {
    width: 94%;
    padding: 52px 14px 16px;
  }
  .ag-video-wrapper iframe {
    height: 260px;
  }
}

/* Miniatura del slider: solo preview, no clic en el iframe */
.bd-videos-section .video-embed {
  width: 100%;
  height: 100%;
  border: 0;
  pointer-events: none;
}

/* --- FLECHAS GLASS + NEÓN VERDE ----------------------------------- */
.ag-video-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 46px;
  height: 46px;

  display: flex;
  align-items: center;
  justify-content: center;

  background: rgba(20,20,20,0.55);
  backdrop-filter: blur(6px);
  border-radius: 50%;

  color: white;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 0 8px rgba(0,255,135,0.12);

  transition: all 0.20s ease;
}

.ag-video-nav i {
  font-size: 20px;
}

.ag-video-prev { left: 16px; }
.ag-video-next { right: 16px; }

.ag-video-nav:hover {
  background: rgba(30,255,140,0.9);
  color: black;
  transform: translateY(-50%) scale(1.12);
  box-shadow: 0 0 18px rgba(30,255,140,0.65);
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .ag-video-nav {
    width: 40px;
    height: 40px;
  }
  .ag-video-nav i {
    font-size: 18px;
  }
}

/* --- BOTÓN X GLASS + NEÓN ----------------------------------- */
.ag-video-close {
  position: absolute;
  top: 12px;
  right: 14px;

  width: 40px;
  height: 40px;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 26px;
  color: white;

  background: rgba(20,20,20,0.55);
  backdrop-filter: blur(6px);
  border-radius: 50%;

  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 0 8px rgba(0,255,135,0.12);

  cursor: pointer;
  transition: all 0.20s ease;
}

.ag-video-close:hover {
  background: rgba(30,255,140,0.9);
  color: black;
  transform: scale(1.12);
  box-shadow: 0 0 18px rgba(30,255,140,0.65);
}


/* Meta de abajo del video */
.ag-video-meta {
  flex: 0 0 auto;
  margin-top: 6px;
}

/* Subtítulo debajo del título */
.ag-video-subtitle {
  margin: 4px 0 2px;
  font-size: 0.95rem;
  color: #8bd1a9;
  opacity: 0.9;
  font-weight: 500;
  letter-spacing: 0.3px;
}

/* Contador tipo "Video 3 de 12" */
.ag-video-counter {
  margin: 0 0 6px;
  font-size: 0.85rem;
  color: #9ca3af;
}

/* Toggle autoplay */
.ag-video-autoplay {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  color: #e5e7eb;
  margin-bottom: 6px;
  cursor: pointer;
  user-select: none;
}

.ag-video-autoplay input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

/* Tira de miniaturas (botones de selección de video) */
.ag-video-meta {
  flex: 0 0 auto;
  margin-top: 6px;
}

.ag-video-thumbs {
  flex: 0 0 auto;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(148,163,184,0.35);
  display: flex;
  gap: 6px;
  overflow-x: auto;
  max-height: 120px;
}


.ag-video-thumb {
  border: 0;
  background: rgba(15,23,42,0.85);
  color: #e5e7eb;
  border-radius: 10px;
  padding: 6px 8px;
  min-width: 120px;
  max-width: 180px;

  display: flex;
  align-items: center;
  gap: 6px;

  font-size: 0.78rem;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;

  box-shadow: 0 0 0 1px rgba(148,163,184,0.35);
  transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.ag-video-thumb-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: rgba(34,197,94,0.12);
  color: #a7f3d0;
  font-size: 0.7rem;
  flex-shrink: 0;
}

.ag-video-thumb-title {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Activa / hover */
.ag-video-thumb:hover {
  background: rgba(22,163,74,0.18);
  box-shadow: 0 0 10px rgba(22,163,74,0.6);
  transform: translateY(-1px);
}

.ag-video-thumb.active {
  background: rgba(22,163,74,0.35);
  box-shadow: 0 0 14px rgba(22,163,74,0.9);
}

/* Responsive */
@media (max-width: 768px) {
  .ag-video-thumb {
    min-width: 110px;
    padding: 5px 7px;
  }
}



.ag-video-thumb {
  border: 0;
  background: rgba(15,23,42,0.85);
  color: #e5e7eb;
  border-radius: 10px;
  padding: 4px;
  min-width: 140px;
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(148,163,184,0.35);
  transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ag-video-thumb-img {
  width: 100%;
  height: 80px;
  object-fit: cover;
  border-radius: 6px;
}

.ag-video-thumb-title {
  font-size: 0.72rem;
  color: #cbd5e1;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.ag-video-thumb.active {
  background: rgba(22,163,74,0.28);
  box-shadow: 0 0 14px rgba(22,163,74,0.9);
}


/* Contenedor interno que puede scrollear si hace falta */
.ag-video-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  padding-top: 4px;
}


.ag-video-thumbs {
  flex: 0 0 auto;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(148,163,184,0.35);
  display: flex;
  gap: 6px;
  overflow-x: auto;
  max-height: 120px;
  scrollbar-width: thin;
}

/* Tarjeta de miniatura estilo “video pequeño” */
.ag-video-thumb {
  border: 0;
  background: rgba(15,23,42,0.85);
  color: #e5e7eb;
  border-radius: 10px;
  padding: 4px;
  min-width: 140px;
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(148,163,184,0.35);
  transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ag-video-thumb-img {
  width: 100%;
  height: 80px;
  object-fit: cover;
  border-radius: 6px;
}

/* Texto del título */
.ag-video-thumb-title {
  font-size: 0.72rem;
  color: #cbd5e1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Hover y activo */
.ag-video-thumb:hover {
  background: rgba(22,163,74,0.18);
  box-shadow: 0 0 10px rgba(22,163,74,0.6);
  transform: translateY(-1px);
}

.ag-video-thumb.active {
  background: rgba(22,163,74,0.28);
  box-shadow: 0 0 14px rgba(22,163,74,0.9);
}

/* 🔥 Efecto “marquee” para el título del video activo */
.ag-video-thumb.active .ag-video-thumb-title {
  animation: ag-thumb-marquee 7s linear infinite;
}

@keyframes ag-thumb-marquee {
  0%   { transform: translateX(0); }
  20%  { transform: translateX(0); }
  60%  { transform: translateX(-40%); }  /* cuánto se mueve a la izquierda */
  100% { transform: translateX(0); }
}


/* ============================
   Scrollbars estilo Besares
   (modal de video + miniaturas)
   ============================ */

/* MODAL: contenedor que scrollea (donde aparece el video + info) */
.ag-video-body {
  scrollbar-width: thin;                        /* Firefox */
  scrollbar-color: #00f0ff33 #05070b;          /* thumb / track */
}

/* WebKit (Chrome, Edge, Opera…) */
.ag-video-body::-webkit-scrollbar {
  width: 8px;
}

.ag-video-body::-webkit-scrollbar-track {
  background: #05070b;
  border-radius: 10px;
}

.ag-video-body::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #00f0ff, #ff007a);
  border-radius: 10px;
  box-shadow: 0 0 6px rgba(0, 240, 255, 0.4);
}

.ag-video-body::-webkit-scrollbar-thumb:hover {
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.7);
}

/* TIRA DE MINIATURAS (scroll horizontal) */
.ag-video-thumbs {
  scrollbar-width: thin;
  scrollbar-color: #00f0ff33 #05070b;
}

.ag-video-thumbs::-webkit-scrollbar {
  height: 6px;                /* horizontal */
}

.ag-video-thumbs::-webkit-scrollbar-track {
  background: #05070b;
  border-radius: 10px;
}

.ag-video-thumbs::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, #00f0ff, #ff007a);
  border-radius: 10px;
}

/* Opcional: también para el body general de la web */
body {
  scrollbar-width: thin;
  scrollbar-color: #00f0ff33 #05070b;
}

body::-webkit-scrollbar {
  width: 8px;
}

body::-webkit-scrollbar-track {
  background: #05070b;
}

body::-webkit-scrollbar-thumb {
  background: #00f0ff55;
  border-radius: 10px;
}


/* CONTENEDOR DE NIEVE */
.snow-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* NO molesta al usuario */
    overflow: hidden;
    z-index: 9999;
}

/* COPITOS */
.snowflake {
    position: absolute;
    top: -10px;
    width: 8px;
    height: 8px;
    background: white;
    border-radius: 50%;
    filter: blur(1px);
    opacity: 0.8;
    animation: snowfall linear infinite;
}

@keyframes snowfall {
    to {
        transform: translateY(110vh) translateX(-10vw);
    }
}

.snowflake {
    width: calc(4px + 6 * random());
    height: calc(4px + 6 * random());
}
.snowflake:nth-child(3n) {
    width: 12px;
    height: 12px;
    opacity: 0.45;
}
.snowflake:nth-child(5n) {
    width: 4px;
    height: 4px;
    opacity: 0.25;
}


/* HERO full pantalla */
.hero {
  position: relative;
  height: 100vh;
  width: 100%;
  overflow: hidden;
}

/* Capa fondo */
.hero-bg-fixed {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0;
}

/* VIDEO */
.hero-bg-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none; /* oculto por defecto, JS lo activa */
}

/* Contenido */
.hero-inner {
  position: relative;
  z-index: 10;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}


.perf-low .background-video { display: none !important; }
.perf-low .hero-particles   { display: none !important; }
.perf-low .snow-container   { display: none !important; }
.perf-low * { animation: none !important; transition: none !important; }



.perf-ultra .hero-logo {
    filter: drop-shadow(0 0 40px var(--accent));
    animation-duration: 4s !important;
}

.perf-ultra .hero-particles {
    opacity: 0.7 !important;
    background-size: 18px 18px !important;
}

.perf-ultra .glow {
    box-shadow: 0 0 35px var(--accent-2), 0 0 65px var(--accent) !important;
}

.perf-ultra .background-video {
    filter: saturate(1.4) contrast(1.2) brightness(1.1);
}

.perf-ultra .swiper-slide {
    transform: scale(1.02);
    transition: 0.5s ease;
}

/* 60 Hz → efectos suaves */
.hz-60 .hero-logo {
    animation-duration: 6s;
}

/* 90 Hz → un poco más fluido */
.hz-90 .hero-logo {
    animation-duration: 5s;
}

/* 120 Hz → animaciones más rápidas */
.hz-120 .hero-logo {
    animation-duration: 4s;
}

/* 144 Hz → modo gamer */
.hz-144 .hero-logo {
    animation-duration: 3.2s;
    filter: drop-shadow(0 0 35px var(--accent));
}

/* 165+ Hz → ultra */
.hz-165 .hero-logo {
    animation-duration: 2.5s;
    filter: drop-shadow(0 0 50px var(--accent));
    transform: scale(1.02);
}

/* ==========================
   Botón flotante de música
   ========================== */
/* ==========================
   Botón flotante de música
   ========================== */

.bd-music-float {
    position: fixed;
    bottom: 95px;       /* justo arriba del botón de WhatsApp */
    right: 20px;
    z-index: 999999;    /* por encima de casi todo */
}

.bd-music-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: none;
    background: #28a745; /* verde Besares */
    color: #ffffff;
    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 20px;
    box-shadow: 0 0 12px rgba(0,0,0,.35);
    transition: background .2s ease, transform .2s ease;
}

.bd-music-btn:hover {
    background: #1f8a3b;
    transform: scale(1.05);
}

.bd-music-btn:active {
    transform: scale(.95);
}