/* archivo: /css/style.css */
    body{
      background-image: url("../images/wallpaper.jpg");
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-size: cover;
    }
    .btn-violat, .gradient-violat { background: #0000005c !important; padding-top: 12px !important; }
    .navbar-divider{ height: 70px; margin: 0; background-color: rgba(0, 0, 0, 0.4) !important; }
    .margin-bottom-50{ margin-bottom: 50px; }
    .btn-danger{ background-image: linear-gradient(to right, black , #8b00ad); border-color: #ffad00; }
    .btn-danger:hover { color: #fff; background-color: #c9302c; border-color: #ffad00; }
    .logotipo{ width: 450px; }
    .p_texto{ text-align: justify; }
    .alejamiento{
      background-image: url("images/alejamiento.jpg");
      height: 580px;
      background-attachment: fixed;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
    }
    .envidia{
      background-image: url("images/envidia.png");
      height: 700px;
      background-attachment: fixed;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
    }
    .contacto{
      height: 700px;
      background-attachment: fixed;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
    }
    #servicios{ position: relative; }
    #introduction{ position: relative; }
    #slogan{
      background: url("images/banner_slogan.jpg") no-repeat center center;
      -webkit-background-size: 100%;
      -moz-background-size: 100%;
      -o-background-size: 100%;
      background-size: 100%;
    }
    .myVideo { position: relative; right: 0; bottom: 0; min-width: 100%; min-height: 100%; }
    .sombra{ position: absolute; background: rgba(0, 0, 0, 0.5); min-width: 100%; min-height: 100%; top: 0px; }
    .sin_sonbra{ position: absolute; min-width: 100%; min-height: 100%; top: 0px; }
    .informacion{
      background: linear-gradient(to right, rgb(119 0 148) 0%, rgb(57 0 67) 100%);
      color: #ffffff; width: 100%; padding-top: 20px; padding-bottom: 20px;
      border-bottom-width: 2px; border-bottom-style: solid; border-bottom-color: #ffcc00;
    }
    .nro_telefono{ color: #ffcc00; font-weight: bold; }
    .info_slogan{ font-weight: bold; }
    .navbar-center{
      position: absolute; width: 910px; margin-left: -455px; left: 50%; margin-right: -15px; margin-top: 15px;
    }
    .contenido_sombra{ margin-top: 135px; }
    .servicio_inicio{
      background-color: rgba(0,0,0,0.7); padding: 25px 20px;
      -webkit-box-shadow: 0px 0px 55px -14px rgba(255,242,0,1);
      -moz-box-shadow: 0px 0px 55px -14px rgba(255,242,0,1);
      box-shadow: 0px 0px 30px -14px rgba(255,242,0,1);
    }
    .bot_info{ width: 100%; margin-bottom: 50px; margin-top: 50px; }
    .sonbra_texto{ background-color: rgba(0,0,0,0.7); padding: 20px 30px 20px 30px; }
    .oferta{ color: #ffad00; font-size: 25px; font-weight: bold; }
    .oferta:hover{ color: #ffffff; }
    .img_servicios{ position: absolute; top: 0; height: 100%; left: 0; margin-left: -208px; opacity: 0.2; }
    .img_servicios_dos{ position: absolute; top: 0; height: 100%; right: 0; opacity: 0.2; z-index: -1; }
    .social_media{ font-size: 18px; color: #ffffff !important; padding-left: 10px; }
    .img_bienvenido{
      -webkit-box-shadow: 0px 0px 55px -14px rgba(255,242,0,1);
      -moz-box-shadow: 0px 0px 55px -14px rgba(255,242,0,1);
      box-shadow: 0px 0px 30px -14px rgba(255,242,0,1);
      width: 100%;
    }
    .card-text{ padding-top: 15px; }
      :root{
    --wpp-size: 60px;   /* fallback */
    --wpp-gap: 12px;
    --wpp-right: 20px;
    --wpp-bottom: 20px;
  }

  /* Botón de llamada, visualmente gemelo del de WhatsApp */
  .call-floating {
    position: fixed;
    right: var(--wpp-right);
    bottom: calc(var(--wpp-bottom) + var(--wpp-size) + var(--wpp-gap));
    width: var(--wpp-size);
    height: var(--wpp-size);
    border-radius: 50%;
    background: #ffcc00;          /* tu amarillo */
    color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: calc(var(--wpp-size) * 0.45);
    box-shadow: 0 6px 18px rgba(0,0,0,.25);
    z-index: 999999;
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
  }
  .call-floating:hover {
    transform: translateY(-1px) scale(1.04);
    box-shadow: 0 10px 24px rgba(0,0,0,.28);
    filter: brightness(1.03);
  }

  /* Pulso opcional (quita si no lo quieres) */
  .call-floating.pulse::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:50%;
    box-shadow: 0 0 0 0 rgba(255,204,0,.45);
    animation: callPulse 2s infinite;
    pointer-events:none;
  }
  @keyframes callPulse{
    0%   { box-shadow: 0 0 0 0 rgba(255,204,0,.45); }
    70%  { box-shadow: 0 0 0 18px rgba(255,204,0,0); }
    100% { box-shadow: 0 0 0 0 rgba(255,204,0,0); }
  }

  /* Tooltip chico, estilo del popup del plugin */
  .call-floating[data-title]:hover::before{
    content: attr(data-title);
    position: absolute;
    right: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%);
    background: #fff;
    color: #222;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 12px;
    white-space: nowrap;
    box-shadow: 0 6px 18px rgba(0,0,0,.18);
  }
  #stats .stat-number{
  font-size: 34px;
  font-weight: 700;
  letter-spacing: .3px;
  margin: 6px 0 4px;
  color: #ffcc00;           /* combina con tu paleta */
  text-shadow: 0 2px 8px rgba(0,0,0,.35);
}

#stats .sonbra_texto{
  background-color: rgba(0,0,0,0.6);
  padding: 18px 12px;
  box-shadow: 0 4px 18px rgba(0,0,0,.25);
  transition: transform .18s ease, box-shadow .18s ease;
}
#stats .sonbra_texto:hover{
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
}
/* Sección FAQ (paleta: fondo oscuro, rojo vino + dorado) */
.faq-section{
  background-color: rgba(0,0,0,0.75);
  color: #fff;
}
.faq-heading{
  margin-bottom: 30px;
  color: #ffcc00; /* dorado */
}

/* Reset visual de panel Bootstrap para un look limpio */
.faq-panel{
  background: transparent;
  border: 0;
  box-shadow: none;
  margin-bottom: 12px;
}

/* Botón de pregunta */
.faq-btn{
  display: block;
  padding: 15px 48px 15px 16px; /* espacio a la derecha para el ícono */
  font-weight: 700;
  color: #ffcc00;
  background-color: rgba(120,0,0,0.6); /* rojo vino translúcido */
  text-decoration: none;
  border-left: 4px solid #ffcc00;
  transition: background-color .25s ease, color .25s ease, transform .12s ease;
  position: relative;
}
.faq-btn:hover{
  background-color: rgba(160,0,0,0.9);
  color: #ffffff;
  transform: translateY(-1px);
}

/* Contenido */
.faq-body{
  padding: 15px;
  background-color: rgba(40,0,0,0.7);
  border-left: 4px solid #ffcc00;
  color: #fff;
}

/* Indicador (flecha) usando solo CSS */
.faq-btn::after{
  content: "\25BC"; /* ▼ */
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%) rotate(0deg);
  transition: transform .25s ease;
  font-size: 14px;
  color: #ffcc00;
}
.faq-btn:not(.collapsed)::after{
  transform: translateY(-50%) rotate(-180deg); /* ▲ al abrir */
}

/* Accesibilidad: foco visible al navegar con teclado */
.faq-btn:focus{
  outline: 2px dashed #ffcc00;
  outline-offset: 2px;
}

/* Responsive pequeños retoques */
@media (max-width: 576px){
  .faq-btn{ padding: 14px 44px 14px 14px; }
}