/*V 1.0 Shared Chat Card - tarjeta que ocupa el hueco del formulario de HighLevel y abre el widget de chat. Se carga DESPUES del CSS de pagina, asi gana a los min-height del formulario sin editar cada hoja.*/

/* === 1. Contenedor: deja de medir lo que media el iframe, la tarjeta se ajusta a su contenido === */
.form-wrapper.chat-card {
  min-height:0; align-self:center;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  padding:clamp(28px, 5vw, 48px) clamp(20px, 4vw, 40px);
  text-align:center;
}

/* === 2. Textos === */
.chat-card-title {margin:0; font-size:clamp(22px, 3vw, 28px); line-height:1.2; text-transform:uppercase; color:var(--primary-black);}
.chat-card-title .highlight {color:var(--primary-green);}
.chat-card-text {margin:0 0 8px; max-width:380px; font-size:clamp(15px, 2vw, 17px); line-height:1.6; color:#333;}

/* === 3. Botones: el chat en verde solido, la llamada perfilada en negro === */
.chat-card-button,
.chat-card-phone {
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  width:100%; max-width:320px; padding:14px 20px; border-radius:30px;
  font-size:16px; font-weight:700; text-transform:uppercase; text-decoration:none;
  cursor:pointer; transition:all 0.3s ease;
}
.chat-card-button {background:var(--primary-green); border:2px solid var(--primary-green); color:var(--primary-black); font-family:inherit;}
.chat-card-button:hover {background:var(--primary-black); border-color:var(--primary-black); color:var(--primary-white);}
.chat-card-phone {background:transparent; border:2px solid var(--primary-black); color:var(--primary-black);}
.chat-card-phone:hover {background:var(--primary-black); color:var(--primary-white);}