@media (min-width: 668px) {
  /* ── el globo ──
     Es el propio panel de Chatwoot. Ancho, alto, posición y redondeo los fija
     el script con prioridad; acá va lo que no cambia entre estados. */
  div.woot-widget-holder,
  .woot-widget-holder.woot-elements--right,
  .woot-widget-holder.woot-widget--without-bubble {
    overflow: hidden !important;
    /* Transparente: adentro se pintan el globo (hueso) y la burbuja de
       entrada (negra), y entre los dos se ve el fondo del sitio.
       La sombra va con drop-shadow y no con box-shadow porque tiene que
       seguir las formas pintadas y no el rectángulo del panel — si no,
       sombrearía también el hueco vacío. */
    background: transparent !important;
    box-shadow: none !important;
    filter: none !important;
    /* Chatwoot le pone min-height: 250px. Con ese piso el globo no puede
       arrancar del tamaño de la invitación y la expansión empieza por la
       mitad. */
    min-height: 0 !important;
    min-width: 0 !important;
    transform: none !important;
  }
  div.woot-widget-holder > iframe,
  div.woot-widget-holder iframe {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    border-radius: 0 !important;
  }

  /* ── la punta ──
     Sale de la boca de éXo y ahí se queda, tanto con el globo chico como con
     el grande. Es un elemento aparte y no un ::after del globo porque tiene
     que sobrevivir a que el globo cambie de tamaño y de elemento. */
  #exo-punta {
    position: fixed;
    z-index: 2147483001;
    width: 11px;
    height: 11px;
    background: #f3f1ec;
    transform: rotate(45deg);
    border-radius: 0 0 3px 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity .2s ease;
  }
  #exo-punta.exo-visible { opacity: 1; }

  /* ── la invitación ──
     El globo chico. Una sola línea: con dos, el globo grande arrancaba de
     algo ya voluminoso y la expansión perdía fuerza. */
  #exo-invito {
    position: fixed;
    z-index: 2147483000;
    display: flex;
    align-items: center;
    padding: 0 14px;
    height: 34px;
    background: #f3f1ec;
    color: #0a0a0b;
    border-radius: 14px 14px 4px 14px;
    box-shadow: 0 20px 56px rgba(0, 0, 0, .45), 0 2px 10px rgba(0, 0, 0, .22);
    font-family: 'Outfit', system-ui, sans-serif;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: -.01em;
    white-space: nowrap;
    cursor: pointer;
    opacity: 0;
    transition: opacity .2s ease;
  }
  #exo-invito.exo-visible { opacity: 1; }

  /* El globo original del sitio se apaga: lo reemplazan #exo-invito y la
     punta, que sí pueden colgarse de la boca. El markup vive repetido en las
     41 páginas, así que se neutraliza por CSS en vez de editarlas.

     La clase exo-listo la pone armar() DESPUES de crear el reemplazo. Antes
     esta regla se aplicaba siempre, y el dia que armar() no llego a correr
     —el evento chatwoot:ready dejo de dispararse— el sitio quedo sin un solo
     elemento para abrir el chat: el globo propio apagado por esta regla, la
     burbuja de Chatwoot apagada por hideMessageBubble, y el reemplazo sin
     crear. Nada visual puede apagarse antes de que exista lo que lo reemplaza. */
  html.exo-listo .chatw .exo-bubble { display: none !important; }

  /* Chatwoot muestra por su cuenta un aviso de "mensajes sin leer": una
     tarjeta blanca con botón de cerrar, dibujada DENTRO del iframe. No
     alcanzaba con ocultar la clase has-unread-view del panel, porque el
     aviso se arma adentro.

     La regla es más simple y más firme: el panel se ve únicamente si lo
     abrimos nosotros. Todo lo demás que Chatwoot quiera mostrar por su
     cuenta —avisos, reaperturas— queda invisible. Para invitar ya está la
     burbuja de éXo. */
  div.woot-widget-holder:not(.exo-abierto) {
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* ── la cáscara ──
     Lo que se ve durante la apertura no es el panel: es esto. El panel salta
     a su tamaño final de una (total, es transparente y no se ve), y la
     cáscara dibuja encima LA FORMA DEL GLOBO creciendo desde la burbujita
     hasta su lugar — nunca un bloque que tape todo. La barra negra aparece
     debajo cuando el globo está llegando.

     Cuando la forma termina de crecer queda como esqueleto —el diseño final
     sin contenido— y espera el "exo:listo" del interior. Recién ahí se
     desvanece, y abajo está lo mismo que estaba dibujado, ahora real.
     Mientras tanto el iframe va oculto por clase en el holder (la clase
     sobrevive a que Chatwoot rehaga el iframe; un estilo inline no). */
  .exo-cascaron {
    position: absolute;
    inset: 0;
    z-index: 3;
    background: transparent;
    pointer-events: none;
    transition: opacity .38s ease;
  }
  .exo-cascaron .exo-forma-globo {
    position: absolute;
    background: #f3f1ec;
    box-shadow: 0 5px 12px rgba(0, 0, 0, .22), 0 2px 5px rgba(0, 0, 0, .13);
    /* left/top/ancho/alto/radio los pone el script: arranca en la burbujita
       y viaja a su lugar final con esta transición. */
    transition: left 780ms cubic-bezier(.16,1,.3,1),
                top 780ms cubic-bezier(.16,1,.3,1),
                width 780ms cubic-bezier(.16,1,.3,1),
                height 780ms cubic-bezier(.16,1,.3,1),
                border-radius 780ms cubic-bezier(.16,1,.3,1);
  }
  .exo-cascaron .exo-forma-barra {
    position: absolute;
    left: 26px;
    right: 26px;
    bottom: 26px;
    height: 42px;
    background: #0a0a0b;
    border-radius: 14px 14px 14px 5px;   /* el mismo de la barra en chat-skin.css */
    box-shadow: 0 4px 10px rgba(0, 0, 0, .28);
    opacity: 0;
    transform: translateY(8px);
    /* Aparece cuando el globo ya está llegando: el delay es parte del ritmo. */
    transition: opacity .3s ease 429ms,
                transform .4s cubic-bezier(.16,1,.3,1) 429ms;
  }
  .exo-cascaron.exo-crecido .exo-forma-barra {
    opacity: 1;
    transform: none;
  }
  .exo-cascaron.exo-revelar { opacity: 0; }

  /* Mientras la forma crece, el interior de Chatwoot no existe para el ojo:
     si ya estaba cargado aparecería de golpe en su posición final, pisándose
     con la forma en movimiento. La clase va en el holder porque el iframe se
     rehace al abrir y un estilo inline se perdería. */
  div.woot-widget-holder.exo-morfeando iframe {
    opacity: 0 !important;
  }

  /* El puntito del sitio va POR ENCIMA del chat. Su z-index es 13000 y el
     panel anda por los 2.147 millones, así que al pasar por el chat el
     cursor quedaba tapado además de congelado. Se sube acá y no en las
     hojas de cada página porque este bloque se inyecta en todas. */
  #cursor {
    z-index: 2147483010 !important;
  }

  /* Al abrirse la conversación la carita se incorpora, para hacerle lugar a
     la burbuja de entrada que va debajo del globo. Además se lee como que se
     endereza para hablar. */
  .chatw {
    transition: bottom .7s cubic-bezier(.16,1,.3,1) !important;
  }
  .chatw.exo-arriba { bottom: 86px !important; }

  /* Mientras habla, el pulso de la boca se acelera. */
  .chatw.exo-hablando .exo-pulse { animation-duration: .9s !important; }

  /* La carita y sus globos flotan con la misma fase, en el compositor.
     No hace falta medir y reescribir su posición 60 veces por segundo. */
  @keyframes exo-seguir-bob {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -4px; }
  }
}
#exo-mobile-close { display: none; }
@media (max-width: 667px), (max-width: 1100px) and (max-height: 600px) {
  #exo-invito, #exo-punta { display: none !important; }
  div.woot-widget-holder.exo-mobile-holder {
    position: fixed !important;
    min-height: 0 !important;
    min-width: 0 !important;
    max-height: none !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 0 !important;
    background: #0a0a0b !important;
    transform: none !important;
    translate: none !important;
    animation: none !important;
    box-shadow: none !important;
  }
  div.woot-widget-holder.exo-mobile-holder iframe {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    border: 0 !important;
    border-radius: 0 !important;
  }
  #exo-mobile-close.exo-visible {
    display: grid;
    place-items: center;
    position: fixed;
    z-index: 2147483006;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid rgba(243,241,236,.22);
    border-radius: 50%;
    background: #f3f1ec;
    color: #0a0a0b;
    cursor: pointer;
    touch-action: manipulation;
  }
  #exo-mobile-close:focus-visible { outline: 3px solid #ffb900; outline-offset: 3px; }
}
@media (prefers-reduced-motion: reduce) {
  .chatw { transition: none !important; }
}

#exodo-privacy{position:fixed;z-index:100050;left:20px;bottom:20px;width:min(410px,calc(100vw - 40px));padding:22px;background:#faf9f7;color:#151515;border:1px solid #ccc;border-radius:12px;box-shadow:0 8px 36px #0003;font:14px/1.5 Arial,sans-serif}
#exodo-privacy[hidden]{display:none}#exodo-privacy strong{font-size:17px}#exodo-privacy p{margin:10px 0 16px}#exodo-privacy a{display:inline-block;color:#225c75;margin-top:12px;text-decoration:underline}
.exodo-privacy-actions{display:flex;flex-wrap:wrap;gap:8px}.exodo-privacy-actions button{flex:1;min-height:44px;padding:10px;border:1px solid #484848;border-radius:6px;color:#151515;background:#fff;font:inherit;cursor:pointer}
/* Misma apariencia que los enlaces legales; conserva semántica de acción. */
#exodo-privacy-preferences{display:block;max-width:100%;font:300 12px/1.5 'Outfit',sans-serif;background:none;color:var(--mut,#8a8782);padding:0;border:0;border-radius:0;margin:0 0 12px;text-align:start;cursor:pointer;transition:color .3s}
#exodo-privacy-preferences:hover{color:var(--fg,#f3f1ec)}
@media(max-width:768px){#exodo-privacy-preferences{display:flex;align-items:center;min-height:44px;margin:0;padding:8px 0;font-size:13px;line-height:1.55}}
#exodo-privacy button:focus-visible,#exodo-privacy-preferences:focus-visible{outline:3px solid #268db5;outline-offset:3px}