/* ============================================================
   Mariachis de Melipilla · San Antonio
   Versión conversación — estilos del asistente y de los enganches.
   Se carga DESPUÉS de ../styles.css y solo agrega cosas nuevas.
   ============================================================ */

/* ---------- el asistente ---------- */
.asis{
  margin:0 0 18px;padding:0;
  background:linear-gradient(180deg,var(--white),var(--cream));
  border:1px solid rgba(212,162,60,.55);
  border-radius:22px;
  box-shadow:0 30px 60px -24px rgba(0,0,0,.72), 0 0 0 6px rgba(212,162,60,.10);
  overflow:hidden;
  text-align:left;
  color:var(--ink);
  max-width:560px;
}

.asis-head{
  display:flex;align-items:center;gap:11px;
  padding:11px 15px;
  background:linear-gradient(135deg,var(--brown-dark),var(--brown-darkest));
  border-bottom:1px solid rgba(212,162,60,.35);
}
.asis-ava{
  flex:0 0 auto;width:40px;height:40px;border-radius:50%;
  display:grid;place-items:center;overflow:hidden;
  background:var(--cream);border:2px solid var(--gold);
}
.asis-ava img{width:100%;height:100%;object-fit:contain;display:block}
.asis-who{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.asis-who strong{
  font-family:var(--sans);font-size:.87rem;font-weight:800;color:var(--cream);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.asis-on{
  font-family:var(--sans);font-size:.72rem;font-weight:600;
  color:rgba(244,236,221,.75);display:flex;align-items:center;gap:6px;
}
.asis-on i{
  width:7px;height:7px;border-radius:50%;background:var(--wa);flex:0 0 auto;
  box-shadow:0 0 0 3px rgba(37,211,102,.22);
}

/* ---------- el hilo de mensajes ---------- */
.asis-log{
  padding:15px 15px 4px;
  max-height:min(46vh,320px);
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:rgba(107,66,32,.35) transparent;
}
.asis-log::-webkit-scrollbar{width:6px}
.asis-log::-webkit-scrollbar-thumb{background:rgba(107,66,32,.3);border-radius:99px}

.asis-msg{
  display:block;max-width:88%;margin:0 0 10px;
  font-family:var(--sans);font-size:.92rem;line-height:1.45;
  padding:.62em .95em;border-radius:16px;
  animation:asisIn .28s ease both;
}
@keyframes asisIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.asis-msg{animation:none}}

.asis-bot{
  background:var(--cream-2);color:var(--ink);
  border:1px solid rgba(107,66,32,.14);
  border-bottom-left-radius:5px;
}
.asis-bot strong{color:var(--brown-dark)}
.asis-me{
  margin-left:auto;
  background:linear-gradient(135deg,var(--gold-bright),var(--gold));
  color:var(--brown-darkest);font-weight:700;
  border-bottom-right-radius:5px;
  box-shadow:0 8px 18px -10px rgba(212,162,60,.8);
}

/* puntitos de "está escribiendo" */
.asis-typing{display:flex;gap:4px;align-items:center;padding:.75em .95em;width:auto}
.asis-typing span{
  width:6px;height:6px;border-radius:50%;background:rgba(107,66,32,.5);
  animation:asisDot 1.1s infinite ease-in-out;
}
.asis-typing span:nth-child(2){animation-delay:.16s}
.asis-typing span:nth-child(3){animation-delay:.32s}
@keyframes asisDot{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
@media (prefers-reduced-motion:reduce){.asis-typing span{animation:none;opacity:.6}}

/* video sugerido dentro de la conversación */
.asis-vid{
  display:flex;align-items:center;gap:11px;width:88%;
  margin:0 0 10px;padding:8px;border-radius:16px;
  background:var(--cream-2);border:1px solid rgba(107,66,32,.14);
  border-bottom-left-radius:5px;
  font:inherit;color:var(--ink);text-align:left;cursor:pointer;
  transition:border-color .18s,transform .18s;
  animation:asisIn .28s ease both;
}
.asis-vid:hover{border-color:var(--gold);transform:translateY(-1px)}
.asis-vid img{width:82px;height:60px;object-fit:cover;border-radius:10px;display:block;flex:0 0 auto}
.asis-vid-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.asis-vid-txt b{font-family:var(--sans);font-size:.85rem;font-weight:800;line-height:1.25}
.asis-vid-txt span{font-family:var(--sans);font-size:.76rem;color:var(--muted);font-weight:600}

/* ---------- opciones ---------- */
.asis-opts{padding:4px 15px 12px;display:flex;flex-wrap:wrap;gap:8px}
.asis-opts:empty{display:none}

.asis-op{
  font-family:var(--sans);font-size:.86rem;font-weight:700;
  color:var(--brown-dark);background:var(--white);
  border:1.5px solid rgba(107,66,32,.28);
  padding:.55em 1em;border-radius:999px;cursor:pointer;
  transition:background .16s,border-color .16s,color .16s,transform .16s;
}
.asis-op:hover{border-color:var(--gold);background:var(--cream-2);transform:translateY(-1px)}
.asis-op.is-on{
  background:linear-gradient(135deg,var(--gold-bright),var(--gold));
  border-color:var(--gold-dark);color:var(--brown-darkest);
}
.asis-op-soft{background:transparent;border-style:dashed;color:var(--muted);font-weight:600}

/* campos de texto / fecha dentro de la conversación */
.asis-field{display:flex;gap:8px;width:100%;flex-wrap:wrap}
.asis-field input{
  flex:1 1 170px;min-width:0;
  font-family:var(--sans);font-size:.92rem;color:var(--ink);
  background:var(--white);border:1.5px solid rgba(107,66,32,.28);
  border-radius:12px;padding:.6em .85em;
}
.asis-field input:focus{outline:2px solid var(--gold);outline-offset:1px;border-color:var(--gold)}
.asis-go{
  font-family:var(--sans);font-weight:800;font-size:.86rem;
  background:linear-gradient(135deg,var(--gold-bright),var(--gold-dark));
  color:var(--brown-darkest);border:0;border-radius:12px;padding:.6em 1.1em;cursor:pointer;
}
.asis-go:hover{filter:brightness(1.06)}

/* ---------- resumen final ---------- */
.asis-sum{
  width:100%;margin:0 0 10px;padding:12px 14px;
  background:var(--white);border:1.5px dashed var(--gold-dark);border-radius:16px;
  animation:asisIn .28s ease both;
}
.asis-sum dl{margin:0;display:grid;grid-template-columns:auto 1fr auto;gap:7px 10px;align-items:baseline}
.asis-sum dt{
  font-family:var(--sans);font-size:.74rem;font-weight:800;text-transform:uppercase;
  letter-spacing:.06em;color:var(--muted);white-space:nowrap;
}
.asis-sum dd{margin:0;font-family:var(--sans);font-size:.88rem;font-weight:700;color:var(--ink)}
.asis-edit{
  background:none;border:0;padding:0;cursor:pointer;
  font-family:var(--sans);font-size:.76rem;font-weight:700;color:var(--rust);
  text-decoration:underline;text-underline-offset:2px;
}
.asis-edit:hover{color:var(--brown-dark)}

.asis-send{
  display:flex;align-items:center;justify-content:center;gap:9px;width:100%;
  font-family:var(--sans);font-size:1rem;font-weight:800;
  background:var(--wa);color:#08331a;border:0;border-radius:14px;
  padding:.85em 1.1em;cursor:pointer;text-decoration:none;
  box-shadow:0 14px 30px -12px rgba(37,211,102,.85);
  transition:filter .16s,transform .16s;
}
.asis-send:hover{filter:brightness(1.05);transform:translateY(-1px);color:#08331a}
.asis-send svg{width:22px;height:22px;fill:currentColor;flex:0 0 auto}

/* ---------- pie del asistente ---------- */
.asis-foot{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:9px 15px 11px;border-top:1px solid rgba(107,66,32,.12);
  background:rgba(107,66,32,.04);
}
.asis-dots{display:flex;gap:5px;margin:0;padding:0;list-style:none}
.asis-dots li{width:18px;height:4px;border-radius:99px;background:rgba(107,66,32,.2);transition:background .2s}
.asis-dots li.is-on{background:var(--gold-dark)}
.asis-foot-links{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:flex-end}
.asis-skip{
  font-family:var(--sans);font-size:.78rem;font-weight:700;color:var(--muted);
  text-decoration:underline;text-underline-offset:2px;white-space:nowrap;
}
.asis-skip:hover{color:var(--brown-dark)}
.asis-duda{
  font-family:var(--sans);font-size:.78rem;font-weight:700;color:var(--brown-dark);
  background:none;border:0;padding:0;cursor:pointer;white-space:nowrap;
  text-decoration:underline;text-underline-offset:2px;
}
.asis-duda:hover{color:var(--rust)}

/* consentimiento y letra chica del paso de contacto */
.asis-consent{
  display:flex;align-items:flex-start;gap:8px;width:100%;
  font-family:var(--sans);font-size:.8rem;font-weight:600;color:var(--brown-dark);
  cursor:pointer;line-height:1.35;
}
.asis-consent input{
  flex:0 0 auto;width:16px;height:16px;margin:2px 0 0;accent-color:var(--gold-dark);cursor:pointer;
}
.asis-nota{
  width:100%;margin:0;font-family:var(--sans);font-size:.74rem;
  color:var(--muted);line-height:1.4;
}

/* ---------- enganches en el resto del sitio ---------- */

/* ocasiones: los mismos chips, pero ahora se tocan.
   Tamaño, color y forma los sigue poniendo .occ de ../styles.css. */
.occasions-grid .occ{font-family:inherit;line-height:inherit;cursor:pointer;text-align:center}
.occasions-grid .occ.is-on{
  background:linear-gradient(135deg,var(--gold-bright),var(--gold));
  color:var(--brown-darkest);border-color:var(--gold-dark);
}

/* repertorio: cada canción se agrega.
   El relleno pasa del <li> al <button> para que toda la tarjeta sea tocable. */
.songs li{padding:0}
.songs .song{
  display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;
  padding:8px 11px 8px 30px;
  font:inherit;color:inherit;background:none;border:0;cursor:pointer;text-align:left;
}
.songs .song-add{
  flex:0 0 auto;width:22px;height:22px;border-radius:50%;
  display:grid;place-items:center;line-height:1;
  font-family:var(--sans);font-size:1rem;font-weight:800;
  background:rgba(212,162,60,.22);color:var(--brown-dark);
  transition:background .16s,color .16s,transform .16s;
}
.songs li:hover .song-add{background:var(--gold);color:var(--brown-darkest)}
.songs li.is-on{border-color:var(--gold-dark);background:rgba(212,162,60,.16)}
.songs li.is-on .song-add{background:var(--gold-dark);color:var(--white);transform:rotate(45deg)}

/* zonas */
.zone-pick{
  font-family:var(--sans);font-size:.78rem;font-weight:800;
  background:none;border:1.5px solid rgba(212,162,60,.6);color:var(--gold-dark);
  border-radius:999px;padding:.35em .9em;margin:0 0 8px;cursor:pointer;
  transition:background .16s,color .16s;
}
.zone-pick:hover{background:var(--gold);color:var(--brown-darkest);border-color:var(--gold-dark)}

/* botón que parece enlace (pies de sección) */
.linkish{
  font:inherit;background:none;border:0;padding:0;cursor:pointer;
  color:var(--rust);font-weight:700;text-decoration:underline;text-underline-offset:2px;
}
.linkish:hover{color:var(--brown-dark)}

/* aviso flotante cuando se agrega algo desde abajo */
.asis-toast{
  position:fixed;left:50%;bottom:86px;transform:translate(-50%,14px);
  z-index:60;max-width:min(92vw,420px);
  display:flex;align-items:center;gap:12px;
  padding:.7em 1em;border-radius:14px;
  background:var(--brown-darkest);color:var(--cream);
  font-family:var(--sans);font-size:.86rem;font-weight:700;
  box-shadow:0 20px 40px -16px rgba(0,0,0,.8);
  opacity:0;pointer-events:none;transition:opacity .22s,transform .22s;
}
.asis-toast.is-on{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.asis-toast button{
  font-family:var(--sans);font-size:.8rem;font-weight:800;white-space:nowrap;
  background:var(--gold);color:var(--brown-darkest);border:0;border-radius:999px;
  padding:.4em .9em;cursor:pointer;
}

/* ---------- móvil ---------- */
@media (max-width:900px){
  /* el asistente va primero; la galería de fotos queda justo debajo */
  .hero-content{order:1}
  .hero-visual{order:2}
  .asis{margin-left:auto;margin-right:auto}
  .asis-log{max-height:min(42vh,270px)}
  .hero-tag{max-width:none}
}
@media (max-width:520px){
  .asis-msg{font-size:.88rem;max-width:92%}
  .asis-op{font-size:.82rem;padding:.5em .9em}
  .asis-sum dl{grid-template-columns:1fr auto}
  .asis-sum dt{grid-column:1/-1;margin-top:2px}
  .asis-toast{bottom:78px}
}

/* ============================================================
   ESCRIBIR LIBRE · el campo donde el visitante teclea
   ============================================================ */
.asis-ask{
  display:flex;gap:8px;align-items:center;
  padding:10px 15px 12px;
  border-top:1px solid rgba(107,66,32,.12);
}
.asis-ask input{
  flex:1 1 auto;min-width:0;
  font-family:var(--sans);font-size:.9rem;color:var(--ink);
  background:var(--white);border:1.5px solid rgba(107,66,32,.22);
  border-radius:999px;padding:.62em 1em;
}
.asis-ask input::placeholder{color:var(--muted)}
.asis-ask input:focus{outline:2px solid var(--gold);outline-offset:1px;border-color:var(--gold)}
.asis-ask button{
  flex:0 0 auto;width:38px;height:38px;border-radius:50%;cursor:pointer;border:0;
  display:grid;place-items:center;
  background:linear-gradient(135deg,var(--gold-bright),var(--gold-dark));
  transition:filter .16s,transform .16s;
}
.asis-ask button:hover{filter:brightness(1.06);transform:translateY(-1px)}
.asis-ask svg{width:18px;height:18px;fill:var(--brown-darkest)}

/* ============================================================
   GLOBITO FLOTANTE Y VENTANA DEL CHAT
   ============================================================ */
.chat-fab{
  position:fixed;right:18px;bottom:18px;z-index:70;
  display:none;align-items:center;gap:9px;cursor:pointer;
  padding:.7em 1.2em .7em .8em;border-radius:999px;border:1px solid rgba(212,162,60,.5);
  background:linear-gradient(135deg,var(--brown-dark),var(--brown-darkest));
  color:var(--cream);font-family:var(--sans);font-size:.88rem;font-weight:800;
  box-shadow:0 18px 38px -14px rgba(36,20,7,.85);
  transition:transform .18s,filter .18s;
}
.chat-fab.is-lejos{display:flex}
.chat-fab.is-off{display:none}
.chat-fab:hover{transform:translateY(-2px);filter:brightness(1.08)}
.chat-fab-ico{
  width:30px;height:30px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;
  background:linear-gradient(135deg,var(--gold-bright),var(--gold));
}
.chat-fab-ico svg{width:18px;height:18px;fill:var(--brown-darkest)}
.chat-fab-punto{
  position:absolute;top:6px;right:8px;width:9px;height:9px;border-radius:50%;
  background:var(--wa);box-shadow:0 0 0 3px rgba(37,211,102,.3);
}

/* el de WhatsApp se corre para arriba y le deja el rincón al chat */
.chat-fab.is-lejos ~ .fab-wa{bottom:88px}

.chat-dock{
  /* Más angosta y más baja que antes (390x442): así tapa bastante menos del
     mosaico del hero, que es lo que molestaba. Una ventana flotante siempre
     va a cubrir la esquina inferior derecha; esto reduce el daño. */
  position:fixed;right:16px;bottom:14px;z-index:75;
  width:min(330px,calc(100vw - 32px));
  border-radius:22px;overflow:hidden;
  background:var(--cream);
  border:1px solid rgba(212,162,60,.5);
  box-shadow:0 30px 70px -20px rgba(36,20,7,.85);
  opacity:0;transform:translateY(14px) scale(.98);
  transition:opacity .2s ease,transform .2s ease;
}
.chat-dock.is-on{opacity:1;transform:none}
.chat-dock-bar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 8px 10px 16px;
  background:linear-gradient(135deg,var(--brown-dark),var(--brown-darkest));
}
.chat-dock-bar strong{
  font-family:var(--sans);font-size:.85rem;font-weight:800;color:var(--cream);
  letter-spacing:.04em;
}
.chat-dock-close{
  width:32px;height:32px;border-radius:50%;cursor:pointer;border:0;
  background:rgba(244,236,221,.12);color:var(--cream);font-size:1.3rem;line-height:1;
  display:grid;place-items:center;transition:background .16s;
}
.chat-dock-close:hover{background:rgba(212,162,60,.35)}
/* El que cede es el área de mensajes, no lo de abajo: recortar por altura
   dejaba el campo de texto y el pie fuera de la ventana, sin forma de
   llegar a ellos. */
.chat-dock-body{max-height:min(50vh,440px);overflow:hidden;display:flex}
.chat-dock .asis-log{flex:1 1 auto;min-height:0;overflow-y:auto}
.chat-dock .asis-opts,
.chat-dock .asis-ask,
.chat-dock .asis-foot{flex:0 0 auto}
/* el pie en una sola línea: a 330px de ancho se partía en dos y robaba 35px */
.chat-dock .asis-foot{padding-top:6px;padding-bottom:8px;font-size:.72rem}
.chat-dock .asis-dots{display:none}
/* Los siete botones de ocasión se partían en cuatro filas a 330px y eran el
   trozo más alto de la ventana. Compactados entran en tres. */
.chat-dock .asis-op{padding:7px 11px;font-size:.78rem}
.chat-dock .asis-opts{gap:6px}

/* dentro de la ventana el chat pierde marco propio */
.chat-dock .asis{
  margin:0;max-width:none;width:100%;
  border:0;border-radius:0;box-shadow:none;
  /* columna flexible: sin esto el flex:1 del área de mensajes no hace nada
     y el tope de altura corta el campo de texto en pantallas bajas */
  display:flex;flex-direction:column;min-height:0;
}
.chat-dock .asis-head{display:none}
.chat-dock .asis-log{max-height:none}

/* hueco que queda arriba mientras se conversa abajo */

@media (max-width:900px){
  .chat-fab{right:14px;bottom:66px;font-size:.84rem}
  .chat-fab.is-lejos ~ .fab-wa{display:none}
  .chat-dock{
    right:10px;left:10px;bottom:10px;width:auto;
    border-radius:18px;
  }
  .chat-dock-body{max-height:min(76vh,560px)}
  .chat-dock .asis-log{max-height:min(44vh,330px)}
  }