@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; }
}

/* Aviso de medición: franja discreta, con materiales de la web. */
#exodo-privacy {
  box-sizing: border-box;
  position: fixed;
  z-index: 100050;
  left: 50%;
  bottom: max(16px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 20px;
  width: max-content;
  max-width: calc(100% - 48px);
  max-height: calc(100svh - 32px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 4px 20px;
  border: 1px solid rgba(243, 241, 236, .16);
  border-radius: 999px;
  background: rgba(10, 10, 11, .94);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: #f3f1ec;
  font-family: inherit;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.45;
  text-align: start;
  overflow-wrap: anywhere;
}
#exodo-privacy[hidden] { display: none; }
/* La sección conserva su nombre accesible sin un titular visual. */
#exodo-privacy strong { display: none; }
#exodo-privacy p { margin: 0; color: #c7c4bd; }
#exodo-privacy .exodo-privacy-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 16px;
  padding-left: 20px;
  border-left: 1px solid rgba(243, 241, 236, .16);
}
#exodo-privacy .exodo-privacy-actions button {
  min-width: 0;
  min-height: 44px;
  padding: 8px 2px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #f3f1ec;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0;
  text-align: start;
  text-decoration: underline;
  text-decoration-color: rgba(243, 241, 236, .35);
  text-underline-offset: 4px;
  overflow-wrap: anywhere;
  cursor: pointer;
  transition: text-decoration-color .2s;
}
#exodo-privacy .exodo-privacy-actions button:hover {
  text-decoration-color: #268db5;
}
#exodo-privacy > a {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  min-height: 44px;
  margin-top: 0;
  color: #c7c4bd;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  text-decoration: underline;
  text-decoration-color: rgba(243, 241, 236, .35);
  text-underline-offset: 4px;
  transition: color .2s, text-decoration-color .2s;
}
#exodo-privacy > a:hover { color: #fff; text-decoration-color: #268db5; }
/* Las preferencias siguen integradas a los enlaces legales del pie. */
#exodo-privacy-preferences {
  display: block;
  max-width: 100%;
  margin: 0 0 12px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--mut, #8a8782);
  font-family: inherit;
  font-size: 12px;
  font-weight: 300;
  line-height: 1.5;
  text-align: start;
  cursor: pointer;
  transition: color .3s;
}
#exodo-privacy-preferences:hover { color: var(--fg, #f3f1ec); }
#exodo-privacy button:focus-visible,
#exodo-privacy a:focus-visible {
  outline: 2px solid #72c1db;
  outline-offset: 2px;
}
#exodo-privacy-preferences:focus-visible {
  outline: 2px solid #1d6f91;
  outline-offset: 4px;
}
@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;
  }
}
@media (max-width: 700px) {
  #exodo-privacy {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0 16px;
    width: min(560px, calc(100% - 32px));
    max-width: calc(100% - 32px);
    padding: 10px 16px 2px;
    border-radius: 12px;
  }
  #exodo-privacy p { grid-column: 1 / -1; margin-bottom: 2px; }
  #exodo-privacy .exodo-privacy-actions {
    min-width: 0;
    padding-left: 0;
    border-left: 0;
  }
  #exodo-privacy > a { justify-self: end; }
}
@media (prefers-reduced-motion: reduce) {
  #exodo-privacy button, #exodo-privacy > a, #exodo-privacy-preferences { transition: none; }
}