@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
:root{
  --gsbot-primary: #111827;
  --gsbot-bg: #ffffff;
  --gsbot-text: #0f172a;
  --gsbot-muted: #64748b;
  --gsbot-border: rgba(15,23,42,.12);
  --gsbot-shadow: 0 16px 40px rgba(0,0,0,.18);
  --gsbot-radius: 16px;
  --gsbot-font: 'Montserrat', sans-serif;
}

#gsbot-root{ position: fixed; z-index: 2147483660; inset: auto; }

#gsbot-root.gsbot-right{ right: 20px; bottom: 10px; }
#gsbot-root.gsbot-left{ left: 18px; bottom: 10px; }

.gsbot-launcher{
  width: 56px; height: 56px;
  border-radius: 999px;
  border: 0;
  background: var(--gsbot-primary);
  color: #fff;
  box-shadow: var(--gsbot-shadow);
  cursor: pointer;
  display: grid;
  place-items: center;
  /*transition: transform .12s ease, filter .12s ease;*/
  -moz-transition: 1.5s all;
}
.gsbot-launcher:hover{ transform: translateY(-1px); filter: brightness(1.06); }
.gsbot-launcher:active{ transform: translateY(0px); }

.gsbot-panel{
  width: 360px;
  max-width: calc(100vw - 36px);
  height: 520px;
  max-height: calc(100vh - 110px);
  background: var(--gsbot-bg);
  border: 1px solid var(--gsbot-border);
  border-radius: var(--gsbot-radius);
  box-shadow: var(--gsbot-shadow);
  overflow: hidden;
  display: none;
  margin-bottom: 12px;
}

.gsbot-panel.open{ display: flex; flex-direction: column; }

.gsbot-header{
  padding: 14px 14px 10px;
  border-bottom: 1px solid var(--gsbot-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.gsbot-titlewrap{ display: flex; flex-direction: column; gap: 2px; }
.gsbot-title{
  font-family: var(--gsbot-font);
  font-size: 14px;
  font-weight: 700;
  color: var(--gsbot-text);
  line-height: 1.2;
}
.gsbot-subtitle{
  font-family: var(--gsbot-font);
  font-size: 12px;
  color: var(--gsbot-muted);
}
.gsbot-close{
  border: 0;
  background: transparent;
  cursor: pointer;
  width: 34px; height: 34px;
  border-radius: 10px;
}
.gsbot-close:hover{ background: rgba(15,23,42,.06); }

.gsbot-messages{
  flex: 1;
  padding: 14px;
  overflow: auto;
  background: linear-gradient(180deg, rgba(15,23,42,.02), transparent 60%);
}

.gsbot-row{
  display: flex;
  margin: 8px 0;
}
.gsbot-row.user{ justify-content: flex-end; }
.gsbot-row.bot{ justify-content: flex-start; }

.gsbot-bubble{
  max-width: 96.5%;
  padding: 10px 12px;
  border-radius: 14px;
  font-family: var(--gsbot-font);
  font-size: 13px;
  line-height: 1.35;
  border: 1px solid var(--gsbot-border);
  white-space: pre-wrap;
  word-wrap: break-word;
}
.gsbot-row.user .gsbot-bubble{
  background: var(--gsbot-primary);
  color: #fff;
  border-color: transparent;
  border-bottom-right-radius: 6px;
}
.gsbot-row.bot .gsbot-bubble{
  background: #fff;
  color: var(--gsbot-text);
  border-bottom-left-radius: 6px;
}

.gsbot-typing{
  font-family: var(--gsbot-font);
  font-size: 12px;
  color: var(--gsbot-muted);
  padding: 0 14px 10px;
  display: none;
}
.gsbot-typing.show{ display: block; }

.gsbot-inputbar{
  border-top: 1px solid var(--gsbot-border);
  padding: 10px;
  display: flex;
  gap: 8px;
  background: #fff;
}
.gsbot-input{
  flex: 1;
  border: 1px solid var(--gsbot-border);
  border-radius: 12px;
  padding: 10px 12px;
  font-family: var(--gsbot-font);
  font-size: 13px;
  outline: none;
}
.gsbot-input:focus{ border-color: rgba(17,24,39,.35); }

.gsbot-send{
  border: 0;
  background: var(--gsbot-primary);
  color: #fff;
  border-radius: 12px;
  padding: 0 14px;
  cursor: pointer;
  font-family: var(--gsbot-font);
  font-size: 13px;
}
.gsbot-send:hover {
  color: #c36;
  transition: 0.5all;
  -webkit-transition: 0.5all;
  -moz-transition: 0.5all;
  -o-transition: 0.5all;
  -ms-transition: 0.5all;
}
.gsbot-send:disabled{
  opacity: .55;
  cursor: not-allowed;
}

/* Cards */
.gsbot-cards{
  display: grid;
  gap: 10px;
}
.gsbot-card{
  border: 1px solid var(--gsbot-border);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  text-align: center;
}
.gsbot-card img{
  width: 100%;
  display: block;
  border-radius: 14px 14px 0 0;
  aspect-ratio: 16/9;
  object-fit: cover;
  background: rgba(15,23,42,.04);
}
.gsbot-card-body{
  padding: 10px 12px 12px;
  text-align: center;
}
.gsbot-card-title{
  font-family: var(--gsbot-font);
  font-weight: 800;
  font-size: 13px;
  color: var(--gsbot-text);
  margin: 0 0 4px;
  width: 100%;
}
.gsbot-card-desc{
  font-family: var(--gsbot-font);
  font-size: 12px;
  color: var(--gsbot-muted);
  margin: 0 0 10px;
  width: 100%;
}
.gsbot-card-actions{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}
.gsbot-card-actions a{
  display: inline-block;
  text-decoration: none;
  border: 1px solid var(--gsbot-border);
  border-radius: 12px;
  padding: 8px 10px;
  font-family: var(--gsbot-font);
  font-size: 12px;
  color: var(--gsbot-text);
}
.gsbot-card-actions a.primary{
  background: var(--gsbot-primary);
  color: #fff;
  border-color: transparent;
}
.gsbot-card-actions a.primary:hover{
  color: #c36;
  transition: 0.5all;
  -webkit-transition: 0.5all;
  -o-transition: 0.5all;
  -moz-transition: 0.5all;
  -ms-transition: 0.5all;
}
.gsbot-card-actions .gsbot-action-btn{
  border: 1px solid #ddd;
  background: #fff;
  padding: 8px 10px;
  border-radius: 10px;
  cursor: pointer;
  font: inherit;
}

/* WhatsApp */
.gsbot-wa-btn{
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.gsbot-wa-btn svg{ width: 14px; height: 14px; }

/* ===== Carousel (slide) ===== */
.gsbot-bubble-cards{
  background: #fff;
  padding: 10px;
}

.gsbot-carousel-wrap{
  display: flex;
  align-items: center;
  gap: 8px;
}

.gsbot-carousel-nav{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  cursor: pointer;
  color: var(--gsbot-text);
  font-size: 2.5em;
  font-weight: bolder;
  background-color: #FFF;
  border: none;
}

.gsbot-carousel{
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 4px 2px;
}

.gsbot-carousel::-webkit-scrollbar{ height: 8px; }
.gsbot-carousel::-webkit-scrollbar-thumb{ background: rgba(15,23,42,.18); border-radius: 999px; }

.gsbot-slide{
  flex: 0 0 260px;
  scroll-snap-align: center;
}

/* ===== Sugerencias (quick replies) ===== */
.gsbot-suggestions{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 8px;
}
.gsbot-suggestion-btn{
  border: 1px solid var(--gsbot-border);
  background: #000;
  border-radius: 999px;
  padding: 8px 10px;
  cursor: pointer;
  font-family: var(--gsbot-font);
  font-size: 1em;
  font-weight: 600;
  color: #FFF;
}
.gsbot-suggestion-btn:hover{
  border-color: rgba(15,23,42,.25);
}
.gsbot-suggestion-wa{
  border: 1px solid var(--gsbot-border);
  background: #25D366;
  border-radius: 999px;
  padding: 8px 10px;
  cursor: pointer;
  font-family: var(--gsbot-font);
  font-size: 12px;
  color: #FFF;
  text-decoration: none;
}
.gsbot-suggestion-wa:hover{
  text-decoration: none;
  color: #FFF;
}
.gsbot-suggestion-wa:focus{
  text-decoration: none;
  color: #FFF;
}
/* Botón "Ver más en..." como link a categoría del sitio */
.gsbot-suggestion-category {
  background: #000000;
  color: #ffffff;
  text-decoration: none;
}

.gsbot-suggestion-category:hover {
  opacity: 0.88;
  text-decoration: none;
  color: #c36;
}
.gsbot-action-btn{
  border: 1px solid #ddd;
  background: #fff;
  padding: 8px 10px;
  border-radius: 10px;
  cursor: pointer;
  font: inherit;
}
.gsbot-action-btn.primary{
  border-color: var(--gsbot-primary);
  background: var(--gsbot-primary);
  color: #fff;
}
.gsbot-brand{
  display:flex;
  gap:10px;
  align-items:center;
}

.gsbot-logo{
  width:34px;
  height:34px;
  object-fit:contain;
  border-radius:8px;
  background-color: #000;
  border-radius: 50%;
}

.gsbot-bubble-cards{
  padding:10px;
  background:#fff;
}


/* =========================================================
   AUTO-OPEN + TRANSICIONES SUAVES
   Agregado para apertura automática del widget y respuestas
========================================================= */

#gsbot-root{
  pointer-events: none;
}

#gsbot-root .gsbot-panel,
#gsbot-root .gsbot-launcher{
  pointer-events: auto;
}

.gsbot-launcher{
  transition: transform .24s ease, filter .24s ease, box-shadow .24s ease;
  animation: gsbotLauncherIn .38s ease both;
}

.gsbot-launcher:hover{
  transform: translateY(-2px) scale(1.03);
}

.gsbot-panel{
  display: flex !important;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(14px) scale(.975);
  transform-origin: bottom right;
  transition:
    opacity .34s ease,
    transform .34s cubic-bezier(.2,.8,.2,1),
    visibility .34s ease;
}

#gsbot-root.gsbot-left .gsbot-panel{
  transform-origin: bottom left;
}

.gsbot-panel.open{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

#gsbot-root.gsbot-auto-opened .gsbot-panel.open{
  animation: gsbotSoftOpenGlow 1.15s ease both;
}

#gsbot-root.gsbot-auto-opened .gsbot-launcher{
  animation: gsbotSoftPulse 1.2s ease both;
}

.gsbot-row{
  animation: gsbotMessageIn .28s ease both;
}

.gsbot-row.user{
  animation-name: gsbotMessageInRight;
}

.gsbot-row.bot{
  animation-name: gsbotMessageInLeft;
}

.gsbot-bubble{
  transition: transform .22s ease, box-shadow .22s ease, opacity .22s ease;
}

.gsbot-typing.show{
  animation: gsbotFadeIn .22s ease both;
}

.gsbot-card.gsbot-slide,
.gsbot-slide{
  animation: gsbotCardIn .34s ease both;
}

.gsbot-slide:nth-child(2){ animation-delay: .04s; }
.gsbot-slide:nth-child(3){ animation-delay: .08s; }
.gsbot-slide:nth-child(4){ animation-delay: .12s; }
.gsbot-slide:nth-child(5){ animation-delay: .16s; }

.gsbot-carousel{
  scroll-behavior: smooth;
}

@keyframes gsbotLauncherIn{
  from{ opacity: 0; transform: translateY(10px) scale(.92); }
  to{ opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes gsbotSoftPulse{
  0%{ transform: scale(1); box-shadow: var(--gsbot-shadow); }
  40%{ transform: scale(1.08); box-shadow: 0 18px 46px rgba(0,0,0,.24); }
  100%{ transform: scale(1); box-shadow: var(--gsbot-shadow); }
}

@keyframes gsbotSoftOpenGlow{
  0%{ filter: drop-shadow(0 0 0 rgba(37,211,102,0)); }
  45%{ filter: drop-shadow(0 0 14px rgba(37,211,102,.18)); }
  100%{ filter: drop-shadow(0 0 0 rgba(37,211,102,0)); }
}

@keyframes gsbotMessageInLeft{
  from{ opacity: 0; transform: translateX(-8px) translateY(6px); }
  to{ opacity: 1; transform: translateX(0) translateY(0); }
}

@keyframes gsbotMessageInRight{
  from{ opacity: 0; transform: translateX(8px) translateY(6px); }
  to{ opacity: 1; transform: translateX(0) translateY(0); }
}

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

@keyframes gsbotCardIn{
  from{ opacity: 0; transform: translateY(10px) scale(.98); }
  to{ opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce){
  .gsbot-launcher,
  .gsbot-panel,
  .gsbot-row,
  .gsbot-bubble,
  .gsbot-typing.show,
  .gsbot-card.gsbot-slide,
  .gsbot-slide{
    animation: none !important;
    transition: none !important;
  }
}
/* Ajuste botones de tarjetas del bot Amateur */
.gsbot-card-actions {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  width: 100% !important;
  margin-top: 12px !important;
}

.gsbot-card-actions a,
.gsbot-card-actions button,
.gsbot-action-btn,
.gsbot-card-actions .gsbot-action-btn {
  width: 100% !important;
  min-height: 42px !important;
  padding: 10px 14px !important;
  border-radius: 12px !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  text-align: center !important;
  text-decoration: none !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  border: 1px solid #111827 !important;
  cursor: pointer !important;
}

.gsbot-card-actions a.primary,
.gsbot-card-actions button.primary,
.gsbot-card-actions .primary {
  background: var(--gsbot-primary, #111827) !important;
  color: #ffffff !important;
  border-color: var(--gsbot-primary, #111827) !important;
}
.gsbot-card-actions a.primary,
.gsbot-card-actions .primary:hover{
  color: #c36;
  transition: 0.5all;
  -webkit-transition: 0.5all;
  -moz-transition: 0.5all;
  -o-transition: 0.5all;
  -ms-transition: 0.5all;
}
.gsbot-card-actions .gsbot-action-btn.wa {
  background: #25d366 !important;
  color: #ffffff !important;
  border-color: #25d366 !important;
  height: 42px;
}

.gsbot-card-actions .gsbot-action-btn.wa i {
  font-size: 19px !important;
  line-height: 1 !important;
}

.gsbot-card-actions .gsbot-action-btn.wa:hover {
  filter: brightness(0.96);
}