:root{
  --cmyk-cyan: #00e5ff;
  --cmyk-magenta: #ff2bd6;
  --cmyk-yellow: #ffe600;
  --cmyk-blue: #2b6cff;

  --dark: #000;
  --glass: rgba(10,10,10,0.86);
  --wsp-green: #25D366;
}

/* RESET */
*{margin:0;padding:0;box-sizing:border-box;}
body{
  font-family:'Poppins',sans-serif;
  color:#fff;
  overflow-x:hidden;
  background:#000;
  min-height:100vh;
  animation: fadeInBody 1.1s ease-in-out;
}
@keyframes fadeInBody{
  from{opacity:0;transform:scale(0.985);}
  to{opacity:1;transform:scale(1);}
}

/* CANVAS */
#bgCanvas{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  z-index:-2;
}

/* TARJETA */
.glass-card{
  background:var(--glass);
  border-radius:22px;
  padding:2rem;
  backdrop-filter: blur(10px);
  border:1px solid rgba(255,255,255,0.06);
  box-shadow: 0 0 24px rgba(0,0,0,0.6);
  max-width:520px;
  width:100%;
  opacity:0;
  transform:translateY(28px);
  animation: cardEntry 0.9s ease forwards 0.25s;
  position:relative;
  overflow:hidden;
}

/* Línea inferior estilo “impresión” */
.glass-card::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:4px;
  background: linear-gradient(90deg,
    var(--cmyk-cyan),
    var(--cmyk-magenta),
    var(--cmyk-yellow),
    var(--cmyk-blue)
  );
  opacity:0.95;
}

@keyframes cardEntry{
  to{opacity:1;transform:translateY(0);}
}
/*LOGO */
/* CONTENEDOR */
.logo-wrap{
  position: relative;
  display: inline-block;
}

/* HALO CMYK FLUIDO */
.logo-wrap::before{
  content: "";
  position: absolute;
  inset: -30px;

  background: conic-gradient(
    from 0deg,
    rgba(0,229,255,0.45),
    rgba(255,43,214,0.40),
    rgba(255,230,0,0.38),
    rgba(43,108,255,0.40),
    rgba(0,229,255,0.45)
  );

  filter: blur(22px);
  opacity: 0.85;
  z-index: 0;

  animation: cmykFlow 14s linear infinite;
}

/* LOGO */
.logo{
  position: relative;
  z-index: 1;
  width: 150px;
  transform: translateZ(0);
}

/* Animación de flujo continuo */
@keyframes cmykFlow{
  from{
    transform: rotate(0deg);
  }
  to{
    transform: rotate(360deg);
  }
}

/* Hover muy fino */
.logo-wrap:hover::before{
  opacity: 1;
}

/* Responsive */
@media (max-width:576px){
  .logo{
    width:130px;
  }
}


/* TITULOS */
.brand-title{
  font-weight:700;
  letter-spacing:1px;
  font-size:1.6rem;
  margin-top:.55rem;
  background: linear-gradient(90deg,
    var(--cmyk-cyan),
    var(--cmyk-magenta),
    var(--cmyk-yellow),
    var(--cmyk-blue)
  );
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow: 0 0 14px rgba(255,255,255,0.10);
  animation: fadeUp 0.9s ease forwards 0.45s;
  opacity:0;
}

.text-glow{
  color:#fff;
  opacity:0.92;
  text-shadow: 0 0 12px rgba(0,229,255,0.12);
  font-weight:500;
  animation: fadeUp 0.9s ease forwards 0.65s;
  opacity:0;
}

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

/* SECCIÓN SERVICIOS */
.services-wrap{
  text-align:left;
  background: rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.06);
  border-radius:16px;
  padding:1rem 1rem 0.85rem;
}
.section-title{
  font-size:1rem;
  margin-bottom:0.7rem;
  color:#fff;
  opacity:0.95;
}
.services-list{
  list-style:none;
  display:grid;
  gap:.45rem;
  padding-left:0;
  margin-bottom:0;
}
.services-list li{
  font-size:0.95rem;
  opacity:0.92;
  display:flex;
  align-items:flex-start;
  gap:.35rem;
}
.services-list li i{
  color: var(--cmyk-yellow);
  transform: translateY(2px);
}

/* BOTONES */
.links-container{
  display:grid;
  gap:1rem;
  animation: fadeUp 0.9s ease forwards 0.85s;
  opacity:0;
}
.btn-custom{
  border:none;
  border-radius:50px;
  padding:.92rem 1.4rem;
  font-weight:600;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.6rem;
  transition: transform .25s ease, filter .25s ease;
}
.btn-custom:hover{
  transform:translateY(-2px);
  filter:brightness(1.08);
}

.btn-wsp{ background: var(--wsp-green); }
.btn-ig{ background: linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); }
.btn-photos{
  background: linear-gradient(90deg,var(--cmyk-cyan),var(--cmyk-magenta),var(--cmyk-yellow));
  color:#111;
  font-weight:800;
}

/* MAPA */
.map-container{
  margin-top:1.4rem;
  background: rgba(255,255,255,0.04);
  border-radius:16px;
  padding:1rem;
  border:1px solid rgba(255,255,255,0.06);
  animation: fadeUp 0.9s ease forwards 1.05s;
  opacity:0;
}
.location-icon{
  color: var(--cmyk-yellow);
  font-size:1.25rem;
}

.btn-mini-map{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  width:100%;
  margin-top:0.9rem;
  padding:.7rem 1rem;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.35);
  color:#fff;
  text-decoration:none;
  transition: .25s;
}
.btn-mini-map:hover{
  filter:brightness(1.08);
  transform: translateY(-1px);
}

/* WHATSAPP FLOTANTE */
.whatsapp-btn{
  position:fixed;
  bottom:20px;
  right:20px;
  background-color:var(--wsp-green);
  color:#fff;
  font-size:28px;
  width:60px;
  height:60px;
  border-radius:50%;
  display:flex;
  justify-content:center;
  align-items:center;
  box-shadow:0 6px 18px rgba(0,0,0,.35);
  z-index:1000;
  animation: pulse 2s infinite;
  text-decoration:none;
}
@keyframes pulse{
  0%{transform:scale(1);}
  50%{transform:scale(1.08);}
  100%{transform:scale(1);}
}
.tooltip-whatsapp{
  position:fixed;
  bottom:92px;
  right:20px;
  background: rgba(0,0,0,0.82);
  color:#fff;
  padding:8px 12px;
  border-radius:12px;
  font-size:.9rem;
  opacity:0;
  transform: translateY(10px);
  transition: .2s;
  pointer-events:none;
}
.whatsapp-btn:hover .tooltip-whatsapp{
  opacity:1;
  transform: translateY(0);
}

/* MODAL / CARRUSEL */
.modal-content{
  border:1px solid rgba(255,255,255,0.1);
  backdrop-filter: blur(10px);
}
.carousel-item img{
  border-radius:12px;
  max-height:70vh;
  object-fit:cover;
}
.mini-note{
  font-size:0.9rem;
  opacity:0.75;
}

/* RESPONSIVE */
@media (max-width:576px){
  .glass-card{padding:1.4rem;margin:1rem;}
  .logo{width:130px;border-radius:16px;}
  .btn-custom{font-size:0.92rem;padding:0.82rem 1rem;}
  .brand-title{font-size:1.35rem;}
  .services-list li{font-size:0.92rem;}
}
/* CTA BOTÓN – COTIZA AHORA (WHATSAPP) */
.cta-btn{
  position: relative;
  width: 100%;
  padding: 1rem 1.3rem;
  border: none;
  border-radius: 50px;
  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;

  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  color: #111;

  background: linear-gradient(
    90deg,
    var(--cmyk-cyan),
    var(--cmyk-magenta),
    var(--cmyk-yellow)
  );

  box-shadow:
    0 10px 26px rgba(0,0,0,0.35),
    0 0 18px rgba(255,255,255,0.18);

  animation: ctaBuzz 3s infinite ease-in-out;
  transition: transform .25s ease, box-shadow .25s ease;
}

/* Bloque izquierdo (WhatsApp + texto) */
.cta-left{
  display: flex;
  align-items: center;
  gap: .6rem;
  padding-left: .4rem;
}

.cta-left i{
  font-size: 1.4rem;
  color: #111;
}

/* Texto */
.cta-text{
  white-space: nowrap;
}

/* Icono de acción derecha */
.cta-icon{
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: #111;
  animation: iconFloat 1.8s ease-in-out infinite;
}

/* Zumbido elegante */
@keyframes ctaBuzz{
  0%,100%{ transform: translateX(0); }
  45%{ transform: translateX(-2px); }
  55%{ transform: translateX(2px); }
}

/* Movimiento del icono */
@keyframes iconFloat{
  0%,100%{ transform: translateX(0); }
  50%{ transform: translateX(5px); }
}

/* Hover */
.cta-btn:hover{
  transform: translateY(-3px) scale(1.02);
  box-shadow:
    0 14px 32px rgba(0,0,0,0.45),
    0 0 26px rgba(255,255,255,0.25);
}

/* Responsive */
@media (max-width:576px){
  .cta-btn{
    font-size: 0.95rem;
    padding: .9rem 1.1rem;
  }
}