/* ═══════════════ botón flotante de contacto ═══════════════ */
/* Es la acción principal del sitio y tiene que estar siempre a un dedo. */
.flotante{position:fixed;right:16px;bottom:16px;z-index:30;display:flex;
          align-items:center;gap:9px;text-decoration:none}
.burbuja{position:relative;display:grid;place-items:center;width:58px;height:58px;
         border-radius:50%;flex:0 0 auto;
         box-shadow:0 6px 22px rgba(0,0,0,.55);transition:transform .18s ease}
.burbuja img{width:100%;height:100%;border-radius:50%;display:block}
@media(hover:hover){ .flotante:hover .burbuja{transform:scale(1.06)} }
/* Punto de "estamos aquí". Antes había una insignia de WhatsApp, pero el
   botón ya no lleva a WhatsApp: abre el chat del sitio. */
.burbuja .punto{position:absolute;right:1px;bottom:1px;width:13px;height:13px;
                border-radius:50%;background:#35d07f;box-shadow:0 0 0 2px var(--fondo)}
/* Late despacio para que se note sin marear. */
@keyframes latido{0%,88%,100%{box-shadow:0 6px 22px rgba(0,0,0,.55),0 0 0 0 rgba(196,242,117,.55)}
                  94%{box-shadow:0 6px 22px rgba(0,0,0,.55),0 0 0 13px rgba(196,242,117,0)}}
.burbuja{animation:latido 4.5s ease-out infinite}

.nube{position:relative;background:var(--sup);border:1px solid var(--borde);
      color:var(--texto);font-size:13.5px;line-height:1.35;padding:11px 30px 11px 14px;
      border-radius:14px 14px 2px 14px;max-width:215px;
      box-shadow:0 6px 22px rgba(0,0,0,.5);animation:asomar .4s ease both}
.nube b{color:var(--verde)}
/* La colita apunta a la burbuja, como un globo de pensamiento. */
.nube::after{content:"";position:absolute;right:-6px;bottom:9px;width:11px;height:11px;
             background:var(--sup);border-right:1px solid var(--borde);
             border-bottom:1px solid var(--borde);transform:rotate(-45deg)}
@keyframes asomar{from{opacity:0;transform:translateX(10px) scale(.94)}to{opacity:1;transform:none}}
.cerrar-nube{position:absolute;top:4px;right:5px;background:none;border:0;
             color:var(--tenue);font-size:17px;line-height:1;cursor:pointer;padding:3px 5px}
@media(hover:hover){ .cerrar-nube:hover{color:var(--texto)} }

@media(max-width:760px){
  .flotante{right:13px;bottom:13px}
  .burbuja{width:54px;height:54px}
  .nube{font-size:12.5px;max-width:170px;padding:10px 26px 10px 12px}
}
@media(prefers-reduced-motion:reduce){
  .burbuja,.nube{animation:none}
}


/* El atributo `hidden` es display:none del navegador, y CUALQUIER regla
   nuestra con display propio le gana. El panel lleva display:flex, asi que
   escondido seguia ocupando la pantalla entera: invisible por la opacidad,
   pero tragandose todos los toques del sitio. Ya paso en el panel del negocio.
   Si escondes algo con `hidden`, compruebalo con el estilo calculado. */
[hidden]{display:none !important}

/* Todos los :hover de aqui van detras de (hover:hover). En pantalla tactil el
   :hover se queda PEGADO despues de tocar: una fila del catalogo se quedaba
   verde sin que nadie estuviera encima. Ya paso con el personaje que camina. */

/* ═══════════════ panel flotante: chat + redes ═══════════════
   Va en las seis páginas. Usa las variables del sitio (estilo.css) para no
   tener una segunda paleta que mantener al día.

   En el teléfono ocupa casi toda la pantalla, porque un chat de 300 px en un
   móvil no se puede usar; en escritorio es una tarjeta anclada sobre el botón. */

.sc-panel{position:fixed;z-index:40;display:flex;flex-direction:column;
          background:var(--fondo);border:1px solid var(--borde);
          box-shadow:0 18px 60px rgba(0,0,0,.6);
          overflow:hidden;
          /* Arranca escondido y sube al abrirse. La clase la pone el JS
             DESPUÉS de mostrarlo: si la transición corriera sobre algo con
             display:none, al aparecer ya iría por la mitad. */
          opacity:0;transform:translateY(14px) scale(.98);
          transition:opacity .18s ease,transform .18s ease}
.sc-panel.sc-abierto{opacity:1;transform:none}

/* Escritorio: tarjeta sobre el botón. */
@media(min-width:761px){
  .sc-panel{right:16px;bottom:88px;width:378px;height:min(600px,calc(100vh - 120px));
            border-radius:18px}
}
/* Teléfono: pantalla completa. Se usa dvh y no vh porque la barra del navegador
   aparece y desaparece, y con vh el campo de escribir queda tapado. */
@media(max-width:760px){
  .sc-panel{inset:0;width:100%;height:100dvh;border:0;border-radius:0}
}

/* ── cabecera ── */
.sc-top{display:flex;align-items:center;gap:10px;padding:11px 13px;
        background:var(--sup);border-bottom:1px solid var(--borde);flex:0 0 auto}
.sc-top img{border-radius:50%;flex:0 0 auto}
.sc-quien{display:flex;flex-direction:column;line-height:1.25;min-width:0;flex:1}
.sc-quien b{font-size:14.5px;color:var(--texto)}
.sc-quien small{font-size:11.5px;color:var(--verde)}
.sc-x{background:none;border:0;color:var(--tenue);font-size:26px;line-height:1;
      cursor:pointer;padding:2px 8px;border-radius:8px}
@media(hover:hover){ .sc-x:hover{color:var(--texto);background:rgba(255,255,255,.06)} }

/* ── pestañas ── */
.sc-pestanas{display:flex;gap:2px;padding:6px 8px 0;background:var(--sup);flex:0 0 auto}
.sc-pestanas button{flex:1;background:none;border:0;cursor:pointer;
                    color:var(--tenue);font:inherit;font-size:13px;
                    padding:8px 4px 9px;border-bottom:2px solid transparent}
.sc-pestanas button.on{color:var(--texto);border-bottom-color:var(--verde)}

/* ── hilo de mensajes ── */
.sc-hilo{flex:1;overflow-y:auto;overscroll-behavior:contain;
         padding:14px 12px;display:flex;flex-direction:column;gap:9px}
.sc-m{display:flex;flex-direction:column;max-width:86%}
.sc-m.el{align-self:flex-start}
.sc-m.yo{align-self:flex-end;align-items:flex-end}
.sc-b{padding:9px 12px;border-radius:15px;font-size:14px;line-height:1.45;
      word-wrap:break-word;overflow-wrap:anywhere}
.sc-m.el .sc-b{background:var(--sup);border:1px solid var(--borde);
               color:var(--texto);border-bottom-left-radius:5px}
.sc-m.yo .sc-b{background:var(--verde);color:#0a1500;border-bottom-right-radius:5px}
.sc-b b{font-weight:700}
.sc-foto{display:block;width:100%;border-radius:10px;margin-bottom:6px}
.sc-pieb,.sc-firma{display:block;margin-top:5px;font-size:11px;color:var(--tenue)}
.sc-mapa{color:var(--verde);text-decoration:none;font-size:13.5px}
@media(hover:hover){ .sc-mapa:hover{text-decoration:underline} }
.sc-error{align-self:center;font-size:12.5px;color:#e06055;text-align:center;
          background:rgba(224,96,85,.1);border-radius:10px;padding:8px 11px;margin:0}

/* ── opciones que manda el bot ── */
.sc-ops{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px}
.sc-ops.lista{flex-direction:column}
.sc-op{background:var(--sup);border:1px solid var(--verde);color:var(--verde);
       font:inherit;font-size:13px;padding:8px 13px;border-radius:11px;
       cursor:pointer;text-align:left;min-height:38px}
@media(hover:hover){ .sc-op:hover:not(:disabled){background:var(--verde);color:#0a1500} }
.sc-op:disabled{border-color:var(--borde);color:var(--tenue);cursor:default;opacity:.65}
.sc-op.fila{width:100%;display:flex;flex-direction:column;gap:1px}
.sc-op.fila small{font-size:11.5px;opacity:.75;font-weight:400}

/* ── "está escribiendo" ── */
.sc-pensando .sc-b{display:flex;gap:4px;padding:13px 14px}
.sc-pensando i{width:6px;height:6px;border-radius:50%;background:var(--tenue);
               animation:sc-punto 1.1s ease-in-out infinite}
.sc-pensando i:nth-child(2){animation-delay:.15s}
.sc-pensando i:nth-child(3){animation-delay:.3s}
@keyframes sc-punto{0%,60%,100%{opacity:.3;transform:translateY(0)}
                    30%{opacity:1;transform:translateY(-3px)}}

/* ── pestaña de redes ── */
.sc-redes{flex:1;overflow-y:auto;padding:14px 13px;display:flex;flex-direction:column;gap:9px}
.sc-nota{margin:0;font-size:12.5px;color:var(--tenue);line-height:1.45}
.sc-pie{margin-top:auto;padding-top:10px;text-align:center;font-size:11.5px}
.sc-red{display:flex;align-items:center;gap:11px;padding:11px 12px;
        background:var(--sup);border:1px solid var(--borde);border-radius:13px;
        text-decoration:none;color:var(--texto);min-height:56px}
@media(hover:hover){ .sc-red:hover{border-color:var(--verde)} }
.sc-ico{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;flex:0 0 auto}
.sc-red-tx{display:flex;flex-direction:column;line-height:1.3;min-width:0;flex:1}
.sc-red-tx b{font-size:13.5px}
.sc-red-tx small{font-size:12px;color:var(--tenue);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sc-flecha{color:var(--tenue);font-size:20px;line-height:1}

/* ── caja de escribir ── */
.sc-escribir{display:flex;gap:8px;padding:10px 11px;background:var(--sup);
             border-top:1px solid var(--borde);flex:0 0 auto;
             /* En iPhone, el área del gesto de inicio se come el borde. */
             padding-bottom:calc(10px + env(safe-area-inset-bottom))}
.sc-escribir input{flex:1;min-width:0;background:var(--fondo);color:var(--texto);
                   border:1px solid var(--borde);border-radius:22px;
                   padding:11px 15px;font:inherit;
                   /* 16px o iOS hace zoom al enfocar y descuadra la página. */
                   font-size:16px}
.sc-escribir input:focus{outline:none;border-color:var(--verde)}
.sc-escribir button{flex:0 0 auto;width:44px;height:44px;border:0;border-radius:50%;
                    background:var(--verde);color:#0a1500;cursor:pointer;
                    display:grid;place-items:center}
@media(hover:hover){ .sc-escribir button:hover{filter:brightness(1.08)} }

/* Con el panel abierto, el botón flotante se convierte en su cerrar. */
.flotante.sc-activo .nube{display:none}
@media(max-width:760px){ .flotante.sc-activo{display:none} }

@media(prefers-reduced-motion:reduce){
  .sc-panel{transition:none}
  .sc-pensando i{animation:none}
}