/* Propuesta F + H (dueño, 2026-09-26): más profesional, sin objetos de plastilina.
   Portada clara; un asistente conectado a seis tipos de negocio; teléfono realista; íconos de línea.
   Se carga DESPUÉS de estilo.css y solo pisa lo necesario: voces, demo, precios y textos no cambian. */

:root { --fondo-f: #f4f1ec; --linea-f: rgba(31, 26, 46, .12); }

/* Íconos de línea */
.ico { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* Cabecera oscura sobre la portada clara */
.nav { color: var(--texto); background: rgba(244, 241, 236, .88); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.nav-links a { border-color: var(--linea-f); }
.nav-links a:hover { background: rgba(31, 26, 46, .06); border-color: rgba(31, 26, 46, .24); }
.idioma { background: rgba(31, 26, 46, .06); box-shadow: inset 0 0 0 1px var(--linea-f); }

/* Portada clara */
.hero.hero-claro { background: var(--fondo-f); color: var(--texto); }
.hero.hero-claro::after { display: none; }
.hero-claro .eyebrow { color: var(--coral-osc); }
.hero-claro .rotador span { color: var(--coral-fondo); }
.hero-claro .intro { color: var(--texto-suave); }
.hero-claro .nota-chica { color: var(--texto-suave); }
.hero-claro .btn { background: var(--tinta); color: #fff; }
.hero-claro .bajar { color: var(--texto-suave); }

/* Red: el asistente al centro, seis tipos de negocio alrededor */
.red-negocios { aspect-ratio: 1; height: auto; width: min(100%, 540px); justify-self: center; }
.red-lineas { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.red-lineas line { stroke: var(--coral); stroke-width: .5; stroke-dasharray: 1.6 1.6; vector-effect: non-scaling-stroke; stroke-width: 1.6px; opacity: .55; animation: flujo 1.6s linear infinite; }
@keyframes flujo { to { stroke-dashoffset: -6.4; } }
.red-centro {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 34%; aspect-ratio: 1; border-radius: 50%;
  background: var(--tinta); color: #fff; display: grid; place-content: center; justify-items: center; gap: 6px; text-align: center;
  box-shadow: 0 24px 50px -24px rgba(20, 16, 31, .7);
}
.red-centro .ico { width: 40px; height: 40px; color: var(--mango); }
.red-centro b { font-size: 14px; font-weight: 700; }
.red-nodo {
  position: absolute; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 8px; width: 118px; text-align: center;
  font-size: 13px; font-weight: 700; color: var(--texto);
}
.red-nodo .ico {
  box-sizing: content-box; width: 26px; height: 26px; padding: 15px; border-radius: 18px; background: #fff; color: var(--texto);
  box-shadow: 0 1px 0 var(--linea-f), 0 14px 30px -18px rgba(31, 26, 46, .45); animation: turno 7.2s ease-in-out infinite;
}
/* Cada negocio se «enciende» por turno: el asistente atiende a todos */
@keyframes turno { 0%, 22%, 100% { background: #fff; color: var(--texto); } 6%, 16% { background: var(--coral); color: #fff; } }
.hero-claro .subtitulo-vivo { background: rgba(255, 255, 255, .92); color: var(--texto); border-color: var(--linea-f); box-shadow: 0 16px 40px -20px rgba(31, 26, 46, .5); bottom: -2%; }

/* Teléfono realista en «Suena el teléfono» */
.movil {
  position: relative; width: min(62%, 250px); aspect-ratio: 9 / 19; border-radius: 40px; background: #0d0b14; padding: 10px;
  box-shadow: 0 0 0 2px #3a3350, 0 40px 70px -30px rgba(0, 0, 0, .8); animation: vibrar-f 2.4s ease-in-out infinite;
}
@keyframes vibrar-f { 0%, 76%, 100% { transform: translateX(0); } 80% { transform: translateX(-3px); } 84% { transform: translateX(3px); } 88% { transform: translateX(-2px); } 92% { transform: translateX(2px); } }
.movil-isla { position: absolute; left: 50%; top: 18px; transform: translateX(-50%); width: 34%; height: 22px; border-radius: 999px; background: #000; z-index: 2; }
.movil-pantalla {
  height: 100%; border-radius: 31px; background: linear-gradient(180deg, #2b2442 0%, #14101f 100%); color: #fff;
  display: flex; flex-direction: column; align-items: center; padding: 52px 14px 26px; text-align: center; gap: 6px;
}
.movil-hora { font-size: 13px; opacity: .7; }
.movil-etiqueta { margin-top: 18px; font-size: 13px; color: var(--texto-claro-suave); }
.movil-numero { font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
.movil-sub { font-size: 12px; color: var(--texto-claro-suave); }
.movil-chip { margin-top: 14px; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; padding: 7px 11px; border-radius: 999px; background: rgba(255, 176, 46, .16); color: var(--mango); }
.movil-chip .ico { width: 16px; height: 16px; }
.movil-botones { margin-top: auto; display: flex; gap: 38px; }
.movil-botones span { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; color: #fff; }
.movil-botones .colgar { background: #e5484d; } .movil-botones .colgar .ico { transform: rotate(135deg); }
.movil-botones .atender { background: #1fa855; animation: latir-f 1.2s ease-in-out infinite; }
@keyframes latir-f { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(31, 168, 85, .55); } 50% { transform: scale(1.06); box-shadow: 0 0 0 10px rgba(31, 168, 85, 0); } }
.escena .telefono-sonando.movil { animation: vibrar-f 2.4s ease-in-out infinite; }

/* Íconos donde antes había objetos de plastilina */
.ticket .ico { width: 24px; height: 24px; padding: 8px; border-radius: 12px; background: var(--crema-2); color: var(--coral-osc); box-sizing: content-box; }
.pestanas button .ico { width: 20px; height: 20px; }
.chat-cabeza .ico { width: 30px; height: 30px; padding: 6px; border-radius: 50%; background: var(--tinta-3); color: var(--mango); box-sizing: content-box; }
.calcu .pestanas button .ico { width: 20px; height: 20px; }

/* Posiciones de la red (en CSS: la política de seguridad del sitio no deja estilos dentro del HTML) */
.red-nodo.n0 { left: 50.0%; top: 12.0%; } .red-nodo.n0 .ico { animation-delay: 0.0s; }
.red-nodo.n1 { left: 82.9%; top: 31.0%; } .red-nodo.n1 .ico { animation-delay: 1.2s; }
.red-nodo.n2 { left: 82.9%; top: 69.0%; } .red-nodo.n2 .ico { animation-delay: 2.4s; }
.red-nodo.n3 { left: 50.0%; top: 88.0%; } .red-nodo.n3 .ico { animation-delay: 3.6s; }
.red-nodo.n4 { left: 17.1%; top: 69.0%; } .red-nodo.n4 .ico { animation-delay: 4.8s; }
.red-nodo.n5 { left: 17.1%; top: 31.0%; } .red-nodo.n5 .ico { animation-delay: 6.0s; }
.sprite-iconos { position: absolute; }

@media (max-width: 860px) {
  .red-negocios { width: min(100%, 360px); height: auto; margin: 8px auto 40px; }
  .hero-claro .bajar { display: none; }
  .red-nodo { width: 90px; font-size: 11px; }
  .red-nodo .ico { width: 20px; height: 20px; padding: 11px; border-radius: 14px; }
  .red-centro .ico { width: 30px; height: 30px; }
  .red-centro b { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .red-lineas line, .red-nodo .ico, .movil, .movil-botones .atender { animation: none; }
}

/* ---- Menos colores (dueño, 2026-09-26: «tiene demasiados colores; más profesional, más serio») ----
   Tinta, blancos y grises; el coral queda como ÚNICO color, solo en los botones principales. */
:root {
  --mango: #e7e2da;          /* antes amarillo: ahora gris cálido claro (fondos de lo elegido) */
  --turquesa: #6b6478;       /* antes turquesa: gris */
  --turquesa-osc: #3a3350;
  --coral: #cf4329;          /* un solo tono de acento */
}
:focus-visible { outline-color: var(--tinta); }
.oscuro :focus-visible { outline-color: #fff; }
.cinta { background: var(--tinta); }
.cinta-pista span::after { color: #6b6478; }
.foto .marco { background: #e7e2da; }
.barra-progreso i { background: var(--coral-fondo); }
.estado { background: #efece7; color: #3a3350; }
.burbuja.asi { background: #fff; color: var(--tinta); }
input[type="range"]::-webkit-slider-thumb { background: var(--tinta); }
input[type="range"]::-moz-range-thumb { background: var(--tinta); }
.chat-form input:focus { border-color: var(--tinta); box-shadow: 0 0 0 4px rgba(20, 16, 31, .12); }
.red-nodo .ico { animation-name: turno-sobrio; }
@keyframes turno-sobrio { 0%, 22%, 100% { background: #fff; color: var(--texto); } 6%, 16% { background: var(--tinta); color: #fff; } }
.red-lineas line { stroke: #9a93a6; opacity: .6; }
.red-centro .ico { color: #fff; }
.movil-chip { background: rgba(255, 255, 255, .12); color: #fff; }

/* «Suena el teléfono»: fondo claro y teléfono más chico */
.escenario { background: #fff; color: var(--texto); box-shadow: 0 1px 0 var(--linea-f), 0 30px 60px -40px rgba(31, 26, 46, .45); border: 1px solid var(--linea-f); }
.escena .movil { width: min(44%, 190px); }
.ondas { border-color: #d8d2c8; }
.burbuja.cli { background: var(--tinta); color: #fff; }
.burbuja.asi { background: #efece7; color: var(--tinta); }
.tablet { border-color: #d8d2c8; box-shadow: 0 30px 60px -30px rgba(31, 26, 46, .35); }

/* ---- Ronda 3 (dueño, 2026-09-26) ---- */
/* El botón de idioma no se veía (gris claro sobre claro) */
.idioma button[aria-pressed="true"] { background: var(--tinta); color: #fff; }

/* Líneas de la portada como ondas de sonido: una onda quieta y una señal que viaja hacia cada negocio */
.red-lineas .onda-base { fill: none; stroke: #b9b2c4; stroke-width: 1.4px; vector-effect: non-scaling-stroke; opacity: .7; }
.red-lineas .onda-senal { fill: none; stroke: var(--tinta); stroke-width: 2.2px; vector-effect: non-scaling-stroke; stroke-linecap: round;
  stroke-dasharray: 10 140; animation: senal 2.4s linear infinite; }
.red-lineas .s1 { animation-delay: -.4s; } .red-lineas .s2 { animation-delay: -.8s; } .red-lineas .s3 { animation-delay: -1.2s; }
.red-lineas .s4 { animation-delay: -1.6s; } .red-lineas .s5 { animation-delay: -2s; }
@keyframes senal { from { stroke-dashoffset: 10; } to { stroke-dashoffset: -140; } }

/* Un solo teléfono: llamada → conversación → pedidos, al bajar */
.escenario.escenario-movil { background: none; border: 0; box-shadow: none; overflow: visible; display: grid; place-items: center; }
.movil.movil-grande { width: auto; height: min(100%, 640px); aspect-ratio: 9 / 19; animation: none; }
.movil-grande .movil-pantalla { position: relative; padding: 0; overflow: hidden; display: block; background: #14101f; }
.movil-grande .escena { padding: 56px 16px 24px; transform: translateY(14px); }
.movil-grande .escena.activa { transform: none; }
.escena-llamada { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; color: #fff; background: linear-gradient(180deg, #2b2442 0%, #14101f 100%); }
.escena-llamada .movil-numero { font-size: clamp(20px, 2vw, 24px); white-space: nowrap; }
.escena-chat, .escena-pedidos { background: #f7f5f1; color: var(--texto); display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; }
.movil-cab { display: flex; align-items: center; gap: 8px; font-size: 14px; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--linea-f); }
.movil-cab .ico { width: 20px; height: 20px; }
.escena-chat .chat-escena { width: 100%; gap: 8px; }
.escena-chat .burbuja { font-size: 13px; padding: 9px 12px; max-width: 90%; }
.pedidos header { display: flex; justify-content: space-between; font-size: 12px; color: var(--texto-suave); margin-bottom: 4px; }
.pedidos .ticket { grid-template-columns: auto 1fr; font-size: 12px; padding: 10px; gap: 10px; }
.pedidos .ticket b { font-size: 13px; }
.pedidos .ticket .estado { grid-column: 2; justify-self: start; font-size: 11px; padding: 3px 8px; }
.pedidos .ticket .ico { width: 18px; height: 18px; padding: 7px; }
@media (max-width: 860px) {
  .movil.movil-grande { height: 100%; }
  .movil-grande .escena { padding: 44px 12px 16px; }
}
.escena-chat .chat-escena { gap: 6px; }
.escena-chat .burbuja { font-size: 12.5px; padding: 8px 11px; line-height: 1.35; }
.red-lineas .onda-base { stroke: #a39bb0; }
.red-lineas .onda-senal { stroke-dasharray: 22 140; stroke-width: 2.6px; }
.movil-grande .escena.escena-chat, .movil-grande .escena.escena-pedidos { padding-top: 44px; }
.movil-cab { padding-bottom: 8px; margin-bottom: 8px; }

/* Onda de voz en lugar de la esfera 3D y de las barras de colores (dueño: opción 2) */
.visualizador-llamada { grid-template-columns: minmax(0, 1fr); }
#onda { display: none; }
#orbe { width: 100%; height: 110px; }
.barra-progreso i { background: #e7e2da; }
@media (max-width: 860px) { #orbe { width: 100%; height: 92px; } }

/* ---- Avatar que señala cada negocio (se activa cuando llegan las imágenes) ---- */
.red-centro .avatar { display: none; }
.red-centro.con-imagen { background: none; box-shadow: none; width: 44%; }
.red-centro.con-imagen > .ico, .red-centro.con-imagen > b { display: none; }
.red-centro.con-imagen .avatar { display: block; width: 100%; height: auto; transition: transform .45s var(--ease); }
.red-centro .avatar.espejo { transform: scaleX(-1); }
.red-globo {
  position: absolute; left: 50%; top: 20%; transform: translate(-50%, -100%) scale(.9); z-index: 3;
  background: #fff; color: var(--texto); border-radius: 16px; padding: 8px 14px; font-size: 14px; font-weight: 700; white-space: nowrap;
  box-shadow: 0 1px 0 var(--linea-f), 0 14px 30px -18px rgba(31, 26, 46, .5); opacity: 0; transition: opacity .3s, transform .3s var(--ease);
}
.red-globo.visible { opacity: 1; transform: translate(-50%, -100%) scale(1); }
.red-globo::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 12px; height: 12px; background: #fff; transform: translateX(-50%) rotate(45deg); }
.red-nodo .negocio-img { display: none; }
.red-nodo.con-imagen .negocio-img { display: block; width: 76px; height: 76px; object-fit: contain; border-radius: 18px; background: #fff; padding: 6px;
  box-shadow: 0 1px 0 var(--linea-f), 0 14px 30px -18px rgba(31, 26, 46, .45); transition: transform .35s var(--ease), box-shadow .35s; }
.red-nodo.con-imagen .ico { display: none; }
/* Con avatar, el negocio señalado se agranda (y ya no se encienden solos por CSS) */
.red-nodo .ico { animation: none; }
.red-nodo.activo .ico { background: var(--tinta); color: #fff; }
.red-nodo.activo .negocio-img { transform: scale(1.12); box-shadow: 0 0 0 1px rgba(207, 67, 41, .5), 0 6px 16px -8px rgba(207, 67, 41, .3); } /* naranja fino y tenue (dueño 2026-09-30) */
@media (max-width: 860px) { .red-nodo.con-imagen .negocio-img { width: 56px; height: 56px; } .red-globo { font-size: 12px; } }

/* Dueño: solo las ondas negras que viajan, sin la onda gris fija de fondo */
.red-lineas .onda-base { display: none; }
.red-negocios:not(:has(.red-centro.con-imagen)) .red-globo { display: none; }
/* El globo tapaba el negocio de arriba: va debajo del círculo, como un subtítulo del avatar */
.red-globo { top: auto; bottom: -9%; transform: translate(-50%, 0) scale(.9); }
.red-globo.visible { transform: translate(-50%, 0) scale(1); }
.red-globo::after { bottom: auto; top: -6px; }

/* ---- Ronda 4 (dueño) ---- */
/* Cinta de rubros recta (antes inclinada) */
.cinta { transform: none; margin: 0; }
/* Teléfono un poco más chico, con todo adentro; vuelven las ondas de fondo detrás */
.movil.movil-grande { height: min(92%, 510px); position: relative; z-index: 1; }
.escenario-movil .ondas { width: 70%; max-width: 440px; border-color: #cfc8bd; z-index: 0; }
.escena-chat .burbuja { font-size: 12px; padding: 7px 10px; }
.movil-grande .escena.escena-chat, .movil-grande .escena.escena-pedidos { padding-top: 40px; }

/* ---- Ronda 5 (dueño): ecualizador bajito (opción 3) solo hacia el negocio señalado; sin «lombrices» ---- */
.red-lineas { display: none; }
.eq { position: absolute; left: 50%; top: 50%; width: 32%; height: 24px; margin-top: -12px; transform-origin: 0 50%; box-sizing: border-box;
  padding-left: 19%; display: flex; align-items: center; justify-content: space-between; opacity: 0; transition: opacity .35s; pointer-events: none; }
.eq i { display: block; width: 3px; height: 100%; border-radius: 2px; background: var(--tinta); transform: scaleY(.3); }
.eq.activo { opacity: 1; }
.eq.activo i { animation: eq-barra .9s ease-in-out infinite; }
.eq i:nth-child(2n) { animation-delay: -.3s !important; } .eq i:nth-child(3n) { animation-delay: -.6s !important; } .eq i:nth-child(5n) { animation-delay: -.15s !important; }
@keyframes eq-barra { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }
.eq.q0 { transform: rotate(-90deg); } .eq.q1 { transform: rotate(-30deg); } .eq.q2 { transform: rotate(30deg); }
.eq.q3 { transform: rotate(90deg); } .eq.q4 { transform: rotate(150deg); } .eq.q5 { transform: rotate(210deg); }
/* El robot «mira» hacia el negocio: se inclina un poco hacia ese lado */
.red-centro.con-imagen .avatar { transition: transform .45s var(--ease); }
.red-centro .avatar.mira-izq { transform: rotate(-6deg); } .red-centro .avatar.mira-der { transform: rotate(6deg); }
.red-centro .avatar.espejo.mira-izq { transform: scaleX(-1) rotate(6deg); }
.red-nodo { cursor: pointer; }
@media (hover: hover) { .red-nodo:hover .negocio-img { transform: scale(1.12); } }

/* (c) dueño 2026-09-27: la palabra del título ya no se encima; primero sale la vieja y después entra la nueva */
.hero-claro .rotador span.sale { transition-duration: .22s, .22s; }
.hero-claro .rotador span.activo { transition-delay: .22s; }

/* (b) dueño 2026-09-27: en celular, el botón de WhatsApp no tapa los negocios; se esconde mientras la red está a la vista */
@media (max-width: 860px) {
  .wa-flotante { transition: opacity .3s, transform .3s var(--ease); }
  body.red-a-la-vista .wa-flotante { opacity: 0; transform: scale(.6); pointer-events: none; }
}

/* ---- Ronda 6 (dueño, 2026-09-27) ---- */
/* Cuatro negocios, uno por diagonal; el robot señala cada uno a 45° con su propia pose */
.red-nodo.n0 { left: 19%; top: 19%; } .red-nodo.n1 { left: 81%; top: 19%; }
.red-nodo.n2 { left: 81%; top: 79%; } .red-nodo.n3 { left: 19%; top: 79%; }
.red-centro .avatar.espejo, .red-centro .avatar.mira-izq, .red-centro .avatar.mira-der { transform: none; }
/* Ecualizador: nace al borde del robot y termina antes de la imagen del negocio (no la toca) */
.eq { width: 29%; padding-left: 17%; }
.eq.q0 { transform: rotate(-135deg); } .eq.q1 { transform: rotate(-45deg); }
.eq.q2 { transform: rotate(45deg); } .eq.q3 { transform: rotate(135deg); }
.red-nodo { z-index: 2; }
.red-nodo:focus-visible { outline: 2px solid var(--tinta); outline-offset: 6px; border-radius: 18px; }

/* Solo dos colores de fondo: el oscuro de la marca y el crema */
.nav { background: rgba(251, 244, 234, .9); }
.hero.hero-claro, .rubros, .historia, .chat-seccion, .precios, .faq { background: var(--crema); }
.calcu, .escucha, .contacto, .pie { background: var(--tinta); }

/* Cinta y botón «Pruebe 7 días gratis» con el naranja original del sitio */
.cinta { background: var(--coral-fondo); color: #fff; }
.cinta-pista span::after { color: rgba(255, 255, 255, .6); }
.hero-claro .btn { background: var(--coral-fondo); color: #fff; box-shadow: 0 14px 30px -14px rgba(207, 67, 41, .7); }
.hero-claro .btn:hover { filter: brightness(1.06); }

/* Calculadora: sin pestañas; queda el dato de contexto del 78 % */
.calcu-dato:empty { display: none; }

/* Planes: se inclinan apenas y, con el mouse encima, el contorno late en naranja muy suave */
.plan { --inclinacion: 1.2; }
@media (hover: hover) {
  .plan:hover { animation: contorno-vivo 2.6s ease-in-out infinite; }
}
@keyframes contorno-vivo {
  0%, 100% { box-shadow: 0 0 0 1px rgba(207, 67, 41, .28), 0 0 12px 0 rgba(207, 67, 41, .10), var(--sombra); }
  50% { box-shadow: 0 0 0 1.5px rgba(207, 67, 41, .62), 0 0 22px 2px rgba(207, 67, 41, .20), var(--sombra); }
}
@media (prefers-reduced-motion: reduce) { .plan:hover { animation: none; box-shadow: 0 0 0 1.5px rgba(207, 67, 41, .5), var(--sombra); } }
.letra-chica:not(:has(p)) { text-align: center; }

/* ---- Ronda 7 (dueño, 2026-09-27): el robot señala arriba y abajo al mismo nivel; el ecualizador no pisa al robot ----
   Posiciones calculadas desde la punta del dedo de cada pose (img/avatar-senala-*.webp): cada negocio queda a la
   misma distancia del dedo (≈21 % del ancho) y el ecualizador sale de la punta del dedo y termina antes de la imagen. */
.red-centro { transform: translate(-50%, -56.8%); }
.red-nodo.n0 { left: 15.5%; top: 24%; } .red-nodo.n1 { left: 84%; top: 24.5%; }
.red-nodo.n2 { left: 86%; top: 80%; }   .red-nodo.n3 { left: 15%; top: 80%; }
.eq { margin-top: -10px; height: 20px; padding-left: 0; z-index: 3; }
.eq.q0 { left: 28.8%; top: 34.7%; width: 9.1%; transform: rotate(-136deg); }
.eq.q1 { left: 71.8%; top: 36.8%; width: 9.5%; transform: rotate(-50deg); }
.eq.q2 { left: 72.1%; top: 64.1%; width: 10%; transform: rotate(45deg); }
.eq.q3 { left: 27.8%; top: 65.1%; width: 8.5%; transform: rotate(135deg); }
.eq i { width: 2.5px; }
/* Arriba, el nombre del negocio queda debajo de la imagen, en el camino del ecualizador: más corto */
.eq.q0 { width: 6.5%; } .eq.q1 { width: 6.5%; }
/* En los negocios de arriba el nombre va ENCIMA de la imagen: así el camino del dedo a la imagen queda libre */
.red-nodo.n0 span, .red-nodo.n1 span { order: -1; }
.red-nodo.n0 { top: 21%; } .red-nodo.n1 { top: 21.5%; }
.eq.q0 { width: 7.5%; } .eq.q1 { width: 7.5%; }

/* «Suena el teléfono»: la conversación sigue hasta la despedida (7 mensajes); entran de a uno y los primeros suben */
.escena-chat .chat-escena { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; gap: 6px; }
.escena-chat .burbuja { font-size: 11.5px; padding: 6px 10px; line-height: 1.32; }
.escena-chat .burbuja.cli { align-self: flex-start; } .escena-chat .burbuja.asi { align-self: flex-end; }
.escena.activa .burbuja:nth-child(5) { animation-delay: 2.1s; } .escena.activa .burbuja:nth-child(6) { animation-delay: 2.8s; }
.escena.activa .burbuja:nth-child(7) { animation-delay: 3.6s; }
/* Dueño 2026-09-27: el ecualizador todavía rozaba la esquina de las imágenes: más corto, con aire antes de la imagen */
.eq.q0 { width: 5.5%; } .eq.q1 { width: 5.5%; } .eq.q2 { width: 7%; } .eq.q3 { width: 5.5%; }
.eq.q0 { left: 29.7%; top: 35.5%; width: 4.5%; } .eq.q1 { left: 71%; top: 37.7%; width: 4.5%; }
.eq.q2 { left: 71.25%; top: 63.25%; width: 6%; } .eq.q3 { left: 28.65%; top: 64.25%; width: 4.5%; }

/* ---- Llamada en vivo (dueño, 2026-09-27): en el lugar de la calculadora ---- */
.en-vivo .intro { color: var(--texto-claro-suave); max-width: 720px; }
.vivo-grilla { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; margin-top: 40px; align-items: stretch; }
.en-vivo .pestanas button[aria-checked="true"] { background: #fff; color: var(--tinta); }
.vivo-llamada { margin-top: 26px; padding: 26px; border-radius: var(--radio-g); background: var(--tinta-2); border: 1px solid rgba(255, 255, 255, .08); display: grid; gap: 14px; justify-items: start; }
.vivo-boton { display: inline-flex; align-items: center; gap: 10px; border: 0; border-radius: 999px; padding: 14px 24px; min-height: 52px; font: inherit; font-weight: 700;
  background: var(--coral-fondo); color: #fff; cursor: pointer; box-shadow: 0 14px 30px -14px rgba(207, 67, 41, .8); transition: filter .2s, background .2s; }
.vivo-boton:hover { filter: brightness(1.08); }
.vivo-boton .ico { width: 20px; height: 20px; }
.vivo-boton[data-modo="colgar"] { background: #e5484d; }
.vivo-boton[data-modo="colgar"] .ico { transform: rotate(135deg); }
.vivo-estado { min-height: 1.4em; color: var(--texto-claro); font-size: 15px; }
.vivo-diga { display: grid; gap: 4px; padding: 14px 16px; border-radius: 16px; background: rgba(255, 255, 255, .06); width: 100%; box-sizing: border-box; }
.vivo-diga[hidden] { display: none; }
.vivo-diga small { color: var(--texto-claro-suave); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; }
.vivo-diga b { font-size: 17px; line-height: 1.4; color: #fff; }
.vivo-mic { display: none; gap: 4px; height: 18px; align-items: center; margin-top: 4px; }
.vivo-mic i { width: 4px; height: 100%; border-radius: 2px; background: var(--coral-fondo); animation: eq-barra .8s ease-in-out infinite; }
.vivo-mic i:nth-child(2) { animation-delay: -.3s; } .vivo-mic i:nth-child(3) { animation-delay: -.55s; }
.en-vivo.escuchando .vivo-mic { display: flex; }
.vivo-tiempo { margin: 0; font-size: 13px; color: var(--texto-claro-suave); }
.en-vivo .aviso-demo { margin-top: 14px; font-size: 13px; color: var(--texto-claro-suave); }
.vivo-conversacion { height: auto; min-height: 380px; max-height: 480px; }
.vivo-conversacion .burbuja { display: block; }
@media (max-width: 860px) {
  .vivo-grilla { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .vivo-conversacion { min-height: 260px; }
}
/* Dueño 2026-09-27 (3.ª revisión): la pose que señala a Barberías (abajo a la derecha) salió más chica en la imagen:
   se agranda para que el robot tenga el mismo tamaño en las 4 poses (cabeza arriba en el mismo lugar). */
.red-centro.con-imagen .avatar { transition: none; } /* sin animar el tamaño: el cambio de pose es instantáneo en las 4 (dueño 2026-09-27) */
.red-centro .avatar[data-pose="ab-der"] { transform: scale(1.12); transform-origin: 45% 37.6%; clip-path: inset(0 0 6.7% 0); }
.vivo-conversacion .burbuja.oyendo { opacity: .7; }
/* Charla libre (dueño 2026-09-27): lo que anotó el asistente real se lee en pantalla (la voz dice una frase grabada). */
.vivo-ficha { align-self: stretch; margin: 2px 0 6px; padding: 10px 14px; border-radius: 14px; border: 1px dashed rgba(255, 255, 255, .25); color: var(--texto-claro); font-size: 14px; line-height: 1.45; }
.vivo-ficha small { display: block; margin-bottom: 4px; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--coral-fondo); }
/* Dueño 2026-09-27: vibra el teléfono COMPLETO (no solo la pantalla), en ráfagas como uno de verdad, mientras
   entra la llamada. Con «menos movimiento», quieto. */
.movil-grande:has(.escena-llamada.activa) { animation: vibrar-movil 1.6s linear infinite; transform-origin: 50% 60%; }
@keyframes vibrar-movil {
  0%, 44%, 100% { transform: translate(0, 0) rotate(0); }
  3% { transform: translate(-2px, 0) rotate(-1.2deg); } 6% { transform: translate(2px, 0) rotate(1.2deg); }
  9% { transform: translate(-2px, 0) rotate(-1.2deg); } 12% { transform: translate(2px, 0) rotate(1.2deg); }
  15% { transform: translate(-2px, 0) rotate(-1deg); } 18% { transform: translate(2px, 0) rotate(1deg); }
  21% { transform: translate(0, 0) rotate(0); }
  24% { transform: translate(-2px, 0) rotate(-1.2deg); } 27% { transform: translate(2px, 0) rotate(1.2deg); }
  30% { transform: translate(-2px, 0) rotate(-1.2deg); } 33% { transform: translate(2px, 0) rotate(1.2deg); }
  36% { transform: translate(-2px, 0) rotate(-1deg); } 39% { transform: translate(2px, 0) rotate(1deg); }
}
@media (prefers-reduced-motion: reduce) { .movil-grande:has(.escena-llamada.activa) { animation: none; } }

/* ---- Celular (dueño 2026-09-28: «hay partes que se cortan, las letras, las imágenes») ---- */
@media (max-width: 560px) {
  /* Rubros: foto, nombre y debajo la conversación (los globos encima de la foto se pisaban y tapaban el nombre) */
  .foto:nth-child(n) { transform: none; }
  .foto { display: flex; flex-direction: column; }
  .foto .marco { order: 0; }
  .foto figcaption { order: 1; font-size: 15px; line-height: 1.25; margin: 10px 0 2px; }
  .foto .globo { order: 2; position: static; align-self: flex-start; max-width: 94%; margin: 6px 0 0; font-size: 11.5px; line-height: 1.3; padding: 6px 9px; }
  .foto .globo.resp, .foto-cocina .globo.resp { align-self: flex-end; }
  .foto .globo small { font-size: 10.5px; }
  /* Teléfono de «Cómo funciona»: el número entero y los pedidos sin partirse en tres renglones */
  .escena-llamada .movil-numero { font-size: clamp(15px, 4.6vw, 20px); }
  .movil-grande .escena { padding-left: 10px; padding-right: 10px; }
  .pedidos .ticket { font-size: 11px; padding: 8px; gap: 8px; }
  .pedidos .ticket b { font-size: 12px; line-height: 1.25; }
  .pedidos .ticket .ico { width: 16px; height: 16px; padding: 6px; }
  .escena-chat .burbuja { font-size: 11.5px; }
}

/* 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; }

/* En el celular el resalte del negocio es instantáneo (dueño 2026-09-30) */
@media (max-width: 860px) { .red-nodo.con-imagen .negocio-img { transition: none; } }

/* Rubros extra centrados y parejos (dueño 2026-09-30) */
.mas-rubros { justify-content: center; }
.mas-rubros span { text-align: center; }
@media (max-width: 600px) { .mas-rubros { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .mas-rubros span { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 10px; font-size: 14px; } }

/* Al recargar, las imágenes del robot y los negocios se esperan: no se ven los íconos de respaldo ni el círculo negro (dueño 2026-09-30) */
.red-negocios.cargando .red-centro, .red-negocios.cargando .red-nodo { opacity: 0; }
.red-negocios .red-centro, .red-negocios .red-nodo { transition: opacity .25s ease; }