/* Celular (dueño 2026-09-29: «optimiza TODO el sitio para celular»).
   Se carga al final; en pantallas grandes no cambia nada. Dos partes:
   1) Llamada en vivo como pantalla completa y fija (hasta 860 px): encabezado, conversación que baja sola y
      el botón de colgar / la frase a decir siempre a la vista, sin desplazar la página.
   2) Todo el sitio más chico en teléfono (hasta 560 px) para que cada pantalla se vea completa. */

.vivo-cabecera { display: none; }

@media (max-width: 860px) {
  /* ---- 1) Llamada en vivo: pantalla completa y fija ---- */
  html.llamada-abierta, html.llamada-abierta body { overflow: hidden; overscroll-behavior: none; }
  .en-vivo.en-llamada .envoltura {
    position: fixed; inset: 0; z-index: 400; width: 100%; margin: 0; background: var(--tinta);
    display: flex; flex-direction: column; overflow: hidden;
    padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
  }
  .en-vivo.en-llamada .eyebrow, .en-vivo.en-llamada h2, .en-vivo.en-llamada .intro,
  .en-vivo.en-llamada .pestanas, .en-vivo.en-llamada .aviso-demo { display: none; }
  .en-vivo.en-llamada .vivo-grilla, .en-vivo.en-llamada .vivo-panel { display: contents; }
  .en-vivo.en-llamada .vivo-cabecera {
    order: 0; display: flex; align-items: center; gap: 10px; flex: none; padding: 12px 16px;
    background: var(--tinta-2); border-bottom: 1px solid rgba(255, 255, 255, .08); color: var(--texto-claro); font-size: 15px;
  }
  .vivo-cabecera .punto { width: 10px; height: 10px; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 0 4px rgba(61, 220, 132, .2); }
  .vivo-cabecera b { font-weight: 700; }
  .vivo-cabecera .vivo-reloj { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--texto-claro-suave); font-size: 14px; }
  .en-vivo.en-llamada .vivo-conversacion {
    order: 1; flex: 1 1 auto; min-height: 0; max-height: none; height: auto; border: 0; border-radius: 0;
    padding: 14px 14px 10px; background: var(--tinta); overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  }
  .en-vivo.en-llamada .vivo-llamada {
    order: 2; flex: none; margin: 0; padding: 12px 14px 14px; border-radius: 22px 22px 0 0; gap: 8px; justify-items: stretch;
    background: var(--tinta-2); border: 0; border-top: 1px solid rgba(255, 255, 255, .1);
    box-shadow: 0 -12px 28px -12px rgba(0, 0, 0, .6);
  }
  .en-vivo.en-llamada .vivo-boton { width: 100%; justify-content: center; min-height: 50px; }
  .en-vivo.en-llamada .vivo-estado { font-size: 14px; min-height: 0; text-align: center; }
  .en-vivo.en-llamada .vivo-estado:empty { display: none; }
  .en-vivo.en-llamada .vivo-diga { padding: 10px 12px; }
  .en-vivo.en-llamada .vivo-diga b { font-size: 16px; line-height: 1.35; }
  .en-vivo.en-llamada .vivo-tiempo { display: none; }
  .en-vivo.en-llamada .vivo-conversacion .burbuja { font-size: 15px; }
  /* Antes y después de la llamada: la conversación vacía no ocupa lugar */
  .vivo-conversacion:empty { display: none; }
  .vivo-conversacion { min-height: 0; max-height: 46dvh; }
}
@media (max-width: 860px) and (max-height: 480px) {
  .en-vivo.en-llamada .vivo-cabecera { padding: 6px 14px; }
  .en-vivo.en-llamada .vivo-llamada { padding: 8px 12px; gap: 6px; }
  .en-vivo.en-llamada .vivo-boton { min-height: 42px; padding: 8px 18px; }
}

/* ---- 2) Todo más chico en teléfono ---- */
@media (max-width: 560px) {
  body { font-size: 15px; line-height: 1.5; }
  :root { --gutter: 16px; --radio-g: 22px; }
  h2 { font-size: clamp(26px, 8.2vw, 32px); line-height: 1.08; }
  h3 { font-size: 18px; }
  .bloque { padding: 44px 0; }
  .eyebrow { font-size: 11.5px; }
  .eyebrow::before { width: 16px; }
  .intro, .hero .intro { font-size: 15px; line-height: 1.5; margin-top: 10px; }
  .btn { min-height: 46px; padding: 0 20px; font-size: 15px; }
  .nav .envoltura { height: 56px; }
  .marca { font-size: 17px; }
  .marca svg { width: 28px; height: 28px; }
  .idioma button { font-size: 12px; padding: 5px 9px; min-width: 40px; min-height: 32px; }

  /* Portada */
  .hero { min-height: 0; }
  .hero .envoltura { padding-top: 72px; padding-bottom: 28px; gap: 6px; }
  .hero h1 { font-size: clamp(28px, 8.6vw, 34px); margin-top: 10px; line-height: 1.06; }
  .hero-escena { height: 200px; margin-top: 0; }
  .hero-acciones { margin-top: 16px; }
  .hero .nota-chica, .nota-chica { font-size: 12.5px; }
  .bajar { display: none; }

  /* Rubros, historia, escucha */
  .collage { gap: 16px 10px; }
  .foto figcaption { font-size: 13.5px; margin: 6px 0 0; }
  .foto .globo { font-size: 11px; padding: 5px 8px; margin-top: 4px; }
  .pasos { gap: 16vh; }
  .paso h3 { font-size: 17px; }
  .paso p { font-size: 14px; }
  .escenario { height: 46vh; min-height: 280px; }
  .reproductor { gap: 14px; }
  .transcripcion { height: 260px; padding: 14px; gap: 8px; }
  .burbuja { font-size: 14px; padding: 8px 12px; }
  .chat-cabeza { padding: 10px 12px; }
  .chat-mensajes { height: 260px; padding: 12px; }
  .chat-form { padding: 8px; }
  .chat-form input { min-height: 42px; }
  .chat-form button { width: 42px; height: 42px; }

  /* Llamada en vivo (antes de llamar) */
  .vivo-grilla { gap: 14px; margin-top: 18px; }
  .en-vivo .pestanas { gap: 6px; }
  .vivo-llamada { margin-top: 14px; padding: 14px; gap: 10px; border-radius: 18px; }
  .vivo-boton { padding: 10px 20px; min-height: 46px; }
  .en-vivo .aviso-demo { margin-top: 8px; font-size: 12px; }
  .vivo-conversacion { max-height: 42dvh; }

  /* Precios, preguntas, contacto, pie */
  .plan { padding: 18px; }
  .plan h3 { font-size: 20px; }
  .precio { font-size: 42px; margin-top: 8px; }
  .plan ul { margin: 12px 0 16px; gap: 6px; font-size: 14px; }
  .planes { gap: 14px; }
  .precios .incluye { font-size: 13.5px; margin-top: 14px; }
  .preguntas summary { padding: 14px 52px 14px 16px; font-size: 15px; min-height: 44px; }
  .preguntas details > *:not(summary) { font-size: 14px; }
  .contacto .btn, .contacto p { font-size: 15px; }
  .pie { padding: 24px 0 84px; font-size: 13px; }
  .wa-flotante { width: 52px; height: 52px; right: 12px; bottom: 12px; }
  .wa-flotante svg { width: 26px; height: 26px; }
}

/* Botón de colgar del encabezado (siempre a la vista, también cuando el botón grande dice «Hablar otra vez») */
@media (max-width: 860px) {
  .vivo-colgar-cab { margin-left: 10px; border: 0; border-radius: 999px; background: #e5484d; color: #fff; font-weight: 700; font-size: 13px; padding: 7px 14px; min-height: 34px; }
}

@media (max-width: 860px) {
  /* Con el botón grande en «Colgar» no hace falta el del encabezado (queda para «Hablar otra vez») */
  .en-vivo.en-llamada:has(#vivo-boton[data-modo="colgar"]) .vivo-colgar-cab { display: none; }
}
@media (max-width: 560px) {
  .pestanas { gap: 6px; }
  .pestanas button { font-size: 13.5px; padding: 8px 12px; min-height: 40px; gap: 6px; }
  .pestanas button .ico { width: 16px; height: 16px; }
  .vivo-llamada { justify-items: stretch; }
  .en-vivo:not(.en-llamada) .vivo-boton { width: 100%; justify-content: center; }
  .vivo-estado { font-size: 14px; min-height: 0; }
  .vivo-tiempo { font-size: 12px; }
}

@media (max-width: 560px) {
  /* Menos aire entre secciones y en los recuadros grandes */
  .collage { margin-top: 24px; }
  .foto .marco { aspect-ratio: 4 / 4.2; }
  .foto .globo small { font-size: 11px; }
  .mas-rubros { margin-top: 24px; gap: 8px; }
  .mas-rubros span { padding: 6px 12px; font-size: 13.5px; }
  .cinta { padding: 10px 0; }
  .cinta-pista { font-size: 18px; gap: 26px; }
  .historia-grilla { margin-top: 24px; gap: 14px; }
  .pasos { gap: 12vh; padding: 4vh 0 16vh; }
  .paso .num { font-size: 44px; }
  .paso h3 { margin: 4px 0 8px; }
  .reproductor { margin-top: 22px; }
  .visualizador-llamada { min-height: 64px; }
  #orbe { height: 64px; }
  .play { width: 52px; height: 52px; }
  .play svg { width: 22px; height: 22px; }
  .controles { margin-top: 10px; gap: 12px; }
  .contacto h2 { font-size: clamp(28px, 9vw, 36px); }
  .chat-grilla { gap: 20px; }
}

@media (max-width: 860px) {
  /* Sin desplazamiento suave: la conversación salta al último mensaje al instante y no se queda a mitad de camino */
  .vivo-conversacion { scroll-behavior: auto; }
}

/* ---- «Suena el teléfono. Usted sigue atendiendo su negocio» en celular (dueño 2026-09-30) ----
   El teléfono animado era diminuto (169 px), quedaba fijo mientras el texto pasaba por detrás y su contenido se
   cortaba (botones de contestar, mensajes, pedidos). En celular cada paso lleva su propia pantalla de teléfono,
   grande y completa, justo encima de su texto; se puede leer todo sin depender del movimiento. */
@media (max-width: 860px) {
  .historia-grilla { display: flex; flex-direction: column; gap: 0; margin-top: 20px; }
  .historia .escenario, .historia .escenario-movil, .historia .movil, .historia .movil-grande, .historia .movil-pantalla, .historia .pasos { display: contents; }
  .historia .ondas, .historia .movil-isla { display: none; }
  /* Orden: pantalla 1, paso 1, pantalla 2, paso 2, pantalla 3, paso 3 */
  .historia .escena-llamada { order: 1; } .historia .paso[data-escena="0"] { order: 2; }
  .historia .escena-chat { order: 3; } .historia .paso[data-escena="1"] { order: 4; }
  .historia .escena-pedidos { order: 5; } .historia .paso[data-escena="2"] { order: 6; }
  .historia .paso { opacity: 1 !important; padding: 16px 2px 34px; }
  .historia .paso .num { font-size: 40px; }
  .historia .paso h3 { font-size: 20px; margin: 4px 0 8px; }
  .historia .paso p { font-size: 15px; max-width: none; }
  /* La pantalla del teléfono */
  .historia .escena {
    position: relative; inset: auto; opacity: 1; transform: none !important; transition: none; animation: none;
    width: min(100%, 360px); align-self: center; margin-top: 22px; overflow: hidden;
    border: 9px solid #0e0b16; border-radius: 40px; padding: 56px 18px 24px; box-shadow: var(--sombra);
  }
  .historia .escena::before { content: ""; position: absolute; top: 12px; left: 50%; width: 96px; height: 24px; border-radius: 999px; background: #0e0b16; transform: translateX(-50%); }
  .historia .escena .burbuja, .historia .escena .ticket { animation: none !important; }
  /* 1. Llamada entrante */
  .historia .escena-llamada { display: flex; flex-direction: column; align-items: center; gap: 8px; min-height: 400px; }
  .historia .escena-llamada .movil-hora { font-size: 16px; }
  .historia .escena-llamada .movil-etiqueta { font-size: 16px; margin-top: 12px; }
  .historia .escena-llamada .movil-numero { font-size: clamp(22px, 7.2vw, 28px); white-space: nowrap; }
  .historia .escena-llamada .movil-sub { font-size: 15px; }
  .historia .escena-llamada .movil-chip { font-size: 14px; margin-top: 12px; padding: 9px 14px; }
  .historia .escena-llamada .movil-botones { margin-top: 34px; gap: 80px; }
  .historia .escena-llamada .movil-botones span { width: 68px; height: 68px; }
  .historia .escena-llamada .movil-botones .ico { width: 28px; height: 28px; }
  /* 2. Conversación del asistente */
  .historia .escena-chat { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; }
  .historia .escena-chat .movil-cab { font-size: 16px; padding-bottom: 10px; margin-bottom: 12px; }
  .historia .escena-chat .chat-escena { flex: none; overflow: visible; justify-content: flex-start; gap: 10px; width: 100%; }
  .historia .escena-chat .burbuja { font-size: 15px; line-height: 1.35; padding: 10px 14px; max-width: 90%; }
  /* 3. Pedidos en la pantalla del negocio */
  .historia .escena-pedidos { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; }
  .historia .escena-pedidos .pedidos header { font-size: 14px; margin-bottom: 8px; }
  .historia .escena-chat, .historia .escena-pedidos { text-align: left; }
  .historia .escena-pedidos .ticket { grid-template-columns: auto minmax(0, 1fr); font-size: 14px; padding: 12px; gap: 4px 12px; margin-top: 10px; }
  .historia .escena-pedidos .ticket b { font-size: 15px; line-height: 1.25; }
  .historia .escena-pedidos .ticket .ico { width: 20px; height: 20px; padding: 8px; }
  .historia .escena-pedidos .ticket .ico { grid-row: span 3; align-self: start; }
  .historia .escena-pedidos .estado { grid-column: 2; justify-self: start; font-size: 12px; padding: 4px 10px; white-space: nowrap; margin-top: 4px; }
}

/* Sin el recuadro translúcido al tocar (dueño, 2026-09-30) */
* { -webkit-tap-highlight-color: transparent; }
button:focus:not(:focus-visible), a:focus:not(:focus-visible), [role="button"]:focus:not(:focus-visible), summary:focus:not(:focus-visible) { outline: none; }

/* ---- «Suena el teléfono» (dueño 2026-09-30): las 3 pantallas del mismo tamaño y proporcionales al celular, la primera vibra rápido y corto, botón de contestar quieto ---- */
.movil-botones .atender { animation: none !important; }
/* Vibración corta y rápida (~28 veces por segundo, en ráfagas): imita un motor real sin mover mucho el teléfono */
@keyframes vibrar-pantalla {
  0%, 60%, 100% { translate: 0 0; rotate: 0deg; }
  2%, 6%, 10%, 14%, 18%, 22%, 26%, 30%, 34%, 38%, 42%, 46%, 50%, 54% { translate: -1px 0; rotate: -.25deg; }
  4%, 8%, 12%, 16%, 20%, 24%, 28%, 32%, 36%, 40%, 44%, 48%, 52%, 56% { translate: 1px 0; rotate: .25deg; }
}
@media (max-width: 860px) {
  /* El teléfono se ajusta a la pantalla: ancho y alto en proporción al celular, todo su contenido a la vista */
  .historia .escena { width: min(80vw, 300px); min-height: min(84svh, 660px); aspect-ratio: auto; padding-left: 14px; padding-right: 14px; }
  .historia .escena-llamada { justify-content: flex-start; padding-top: 64px; animation: vibrar-pantalla 1.15s linear infinite !important; transform-origin: 50% 60%; }
  .historia .escena-llamada .movil-botones { margin-top: auto; padding-bottom: 16px; gap: 64px; }
  .historia .escena-llamada .movil-botones span { width: 60px; height: 60px; }
  .historia .escena-llamada .movil-numero { font-size: clamp(20px, 6.4vw, 25px); }
  .historia .escena-chat .burbuja { font-size: 13px; line-height: 1.3; padding: 8px 11px; }
  .historia .escena-chat .chat-escena { gap: 7px; }
  .historia .escena-pedidos .ticket { font-size: 13px; padding: 10px; }
  .historia .escena-pedidos .ticket b { font-size: 14px; }
}
@media (max-width: 860px) and (prefers-reduced-motion: reduce) { .historia .escena-llamada { animation: none !important; } }

/* WhatsApp en el encabezado del celular (dueño 2026-10-01): el botón flotante verde quedaba pegado al botón de enviar del chat.
   En el celular se pasa arriba a la derecha (nunca tapa nada); en pantallas anchas sigue flotando. */
.wa-cab { display: none; }
@media (max-width: 720px) {
  .wa-flotante { display: none; }
  .nav .envoltura { gap: 8px; }
  .wa-cab { display: inline-grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 50%; background: var(--wa); color: #fff; box-shadow: 0 4px 12px -4px rgba(31, 168, 85, .8); }
  .wa-cab svg { width: 21px; height: 21px; }
  .tema-btn { width: 38px; height: 38px; margin-left: 0; flex: none; }
  .nav .idioma { margin-left: auto; }
  .marca { min-width: 0; }
  .pie { padding-bottom: 24px; }
}

/* Chat de prueba a pantalla completa mientras se escribe en el celular (js/chat-movil.js) */
.chat-cerrar { display: none; }
@media (max-width: 720px) {
  html.chat-abierto, html.chat-abierto body { overflow: hidden; overscroll-behavior: none; }
  html.chat-abierto .chat-caja { position: fixed; left: 0; right: 0; top: var(--vvt, 0px); height: var(--vvh, 100dvh); max-width: none; z-index: 95; border-radius: 0; border: 0; display: flex; flex-direction: column; }
  html.chat-abierto .chat-cabeza { padding: 8px 12px; flex: none; }
  html.chat-abierto .chat-mensajes { flex: 1; height: auto; min-height: 0; }
  html.chat-abierto .sugerencias { display: none; }
  html.chat-abierto .chat-form { flex: none; padding: 8px; }
  html.chat-abierto .chat-cerrar { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; font-size: 20px; line-height: 1; cursor: pointer; }
}