/* 1. Solo en móviles */
@media only screen and (max-width: 767px) {

  /* 2. Estado oculto por defecto */
  #sticky-contact {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    transform: translateY(100%);
    transition: transform 0.3s ease-in-out;
    z-index: 9999;
  }

  /* 3. Cuando el body tenga la clase .scrolled, el nav aparece */
  body.scrolled #sticky-contact {
    transform: translateY(0);
  }
}
/* ========= Estilos Base para el nav ========== */
#sticky-contact {
  font-family: sans-serif;
  background: #fff;
  box-shadow: 0 -2px 8px rgba(0,0,0,0.1);
}

/* ====== Botones Chat / Llamar ====== */
#sticky-contact .contact-buttons {
  display: flex;
  width: 100%;
}
#sticky-contact .contact-buttons .btn {
  flex: 1;
  text-align: center;
  padding: 12px 0;
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
#sticky-contact .contact-buttons .btn span {
  margin-left: 6px;
}

/* Color y iconos */
#sticky-contact .contact-fake.email-btn {
  background: #b10b6b; /* magenta */
}
#sticky-contact .phone-number {
  background: #a00060;
  text-decoration: none;
}
/* Ajuste de etiquetas */
#sticky-contact .btn span { 
  display: inline-block;
  line-height: 1;
}

/* ====== Formulario ====== */
#scl-form-wrapper {
  background: #fff;
  padding: 16px;
  border-top: 1px solid #eee;
}
#scl-form textarea,
#scl-form input[type="email"],
#scl-form input[type="tel"],
#scl-form input[type="text"] {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 12px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
}

/* Dos columnas para teléfono y nombre */
#scl-form .half-items {
  display: flex;
  gap: 8px;
}
#scl-form .half-items input {
  flex: 1;
}

/* Checkbox de privacidad */
#scl-form label input[type="checkbox"] {
  margin-right: 8px;
  transform: scale(1.2);
  vertical-align: middle;
}
#scl-form label a {
  color: #b10b6b;
  text-decoration: underline;
}

/* Botón de enviar form */ 
#scl-form .submit-button {
  width: 100%;
  background: #b10b6b;
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  border: none;
  padding: 12px;
  border-radius: 4px;
  cursor: pointer;
  margin-top:1em;
}

/* ==== Mostrar chat abierto por defecto en escritorio ==== */
@media only screen and (min-width: 768px) {
  /* Forzamos que el wrapper del formulario (#scl-form-wrapper) se muestre */
  #scl-form-wrapper {
    display: block !important;
  }
}


/* Feedback éxito */
#scl-form .feedback.success {
  background: #e6f7ff;
  border: 1px solid #91d5ff;
  color: #0050b3;
  padding: 10px;
  margin-bottom: 12px;
  border-radius: 4px;
  display: none;
}

/* ==== Solo en móvil ==== */
@media only screen and (max-width: 767px) {
  #sticky-contact { transform: translateY(100%); transition: transform 0.3s;}
  body.scrolled #sticky-contact { transform: translateY(0); }
}

/* ==== Ocultar botones Chat/Llamar en escritorio ==== */
@media only screen and (min-width: 768px) {
  /* Dentro del nav sticky-contact */
  #sticky-contact .contact-buttons.two-buttons {
    display: none !important;
  }
}
/* ==== Estilos para iconos SVG de los botones ==== */
#sticky-contact .btn.action .icon {
  display: inline-block;
  vertical-align: middle;
  width: 1em;
  height: 1em;
  margin-right: 0.5em;
  stroke-width: 2;      /* si usas iconos outline */
  fill: currentColor;   /* si usas iconos rellenos */
}