/* Asistente · panel lateral de vidrio (Pucón 360) */
:root { --pc-navy: #04203a; --pc-lime: #86d41a; --pc-sky: #0876c9; --pc-ink: #0b1f30; --pc-mute: #5b6d7d; }

/* Lanzador */
.p360c-btn { position: fixed; right: 20px; bottom: 20px; z-index: 160; display: none; align-items: center; gap: 12px; min-height: 58px; padding: 0 22px 0 8px; border: 0; border-radius: 999px; background: linear-gradient(135deg, #a9ef47, var(--pc-lime)); color: var(--pc-navy); font: 800 .95rem/1 "Inter", system-ui, sans-serif; cursor: pointer; overflow: hidden; box-shadow: 0 18px 44px rgba(134,212,26,.45), 0 6px 18px rgba(4,32,58,.25); transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s; }
.p360c-btn.is-on { display: inline-flex; }
.p360c-btn:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 26px 56px rgba(134,212,26,.55), 0 8px 22px rgba(4,32,58,.28); }
.p360c-btn::after { content: ""; position: absolute; top: 0; bottom: 0; left: -70%; width: 45%; background: linear-gradient(105deg, transparent, rgba(255,255,255,.6), transparent); transform: skewX(-20deg); animation: p360cShine 5.5s ease-in-out infinite; }
@keyframes p360cShine { 0%, 74% { left: -70%; } 94%, 100% { left: 140%; } }
.p360c-btn .ic { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--pc-navy); color: #a9ef47; }
.p360c-btn .ic svg { width: 21px; height: 21px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.p360c-btn .lbl { display: grid; line-height: 1.15; text-align: left; }
.p360c-btn .lbl small { font-size: .72rem; font-weight: 600; color: rgba(4,32,58,.72); }
.p360c-btn .dot { display: none; }
body.p360c-open .p360c-btn, body.p360c-open .wa-float, body.p360c-open .p360c-tease { display: none !important; }
body.p360c-avail .wa-float { display: none !important; } /* con el asistente activo, el flotante de WhatsApp sobra */

/* Burbuja de invitación (una vez por visita) */
.p360c-tease { position: fixed; right: 22px; bottom: 94px; z-index: 159; max-width: 320px; padding: 14px 40px 14px 16px; border-radius: 18px 18px 4px 18px; background: #fff; color: var(--pc-ink); font: 600 .92rem/1.45 "Inter", system-ui, sans-serif; box-shadow: 0 20px 54px rgba(4,32,58,.32); cursor: pointer; animation: p360cUp .45s cubic-bezier(.22,1,.36,1) both; }
.p360c-tease b { color: var(--pc-navy); }
.p360c-tease .tx { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border: 0; border-radius: 50%; background: transparent; color: var(--pc-mute); font-size: 1rem; line-height: 1; cursor: pointer; }
.p360c-tease .tx:hover { background: rgba(4,32,58,.08); }
@media (max-width: 640px) { .p360c-tease { left: 18px; right: 18px; bottom: 94px; max-width: none; border-radius: 18px 18px 18px 4px; } body.promo-bar-on .p360c-tease { bottom: 160px; } }
@media (prefers-reduced-motion: reduce) { .p360c-btn::after { animation: none; } }

/* Panel de vidrio */
.p360c { position: fixed; top: 0; right: 0; bottom: 0; z-index: 500; width: min(460px, 100vw); height: 100dvh; display: none; grid-template-rows: auto 1fr auto; color: var(--pc-ink); font: 15px/1.5 "Inter", system-ui, sans-serif; background: rgba(255,255,255,.62); backdrop-filter: blur(28px) saturate(1.5); -webkit-backdrop-filter: blur(28px) saturate(1.5); border-left: 1px solid rgba(255,255,255,.55); box-shadow: -24px 0 70px rgba(4,32,58,.28), inset 1px 0 0 rgba(255,255,255,.7); }
.p360c::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(165deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.12) 28%, rgba(255,255,255,0) 55%, rgba(255,255,255,.18) 100%); }
.p360c.is-open { display: grid; animation: p360cIn .45s cubic-bezier(.22,1,.36,1) both; }
@keyframes p360cIn { from { transform: translateX(50px); opacity: 0; } to { transform: none; opacity: 1; } }
@supports not (backdrop-filter: blur(1px)) { .p360c { background: rgba(246,249,253,.97); } }

/* Cabecera */
.p360c-h { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; padding: 16px 14px 14px 20px; border-bottom: 1px solid rgba(4,32,58,.1); }
.p360c-h .av { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; background: var(--pc-navy); display: grid; place-items: center; }
.p360c-h .av img { width: 36px; height: 36px; object-fit: contain; }
.p360c-h .who { min-width: 0; }
.p360c-h b { display: block; font-size: 1.02rem; font-family: "Sora", system-ui, sans-serif; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--pc-navy); }
.p360c-h small { display: flex; align-items: center; gap: 6px; font-size: .74rem; color: var(--pc-mute); white-space: nowrap; }
.p360c-h small::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--pc-lime); }
.p360c-h small .ai, .p360c-h small .x { display: none; }
.p360c-acts { margin-left: auto; display: flex; gap: 6px; }
.p360c-acts a, .p360c-acts button { width: 36px; height: 36px; border-radius: 50%; border: 0; background: transparent; color: var(--pc-navy); display: grid; place-items: center; cursor: pointer; text-decoration: none; transition: background .2s; }
.p360c-acts a:hover, .p360c-acts button:hover { background: rgba(4,32,58,.08); }
.p360c-acts svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.p360c-acts a svg { fill: currentColor; stroke: none; }

/* Mensajes */
.p360c-m { position: relative; z-index: 1; overflow-y: auto; padding: 18px 16px 14px; display: flex; flex-direction: column; gap: 10px; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(4,32,58,.2) transparent; }
.p360c-b { position: relative; max-width: 88%; padding: 11px 14px; border-radius: 14px; font-size: .94rem; line-height: 1.55; white-space: pre-wrap; word-wrap: break-word; animation: p360cUp .3s cubic-bezier(.22,1,.36,1) both; }
@keyframes p360cUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.p360c-b.u { align-self: flex-end; background: var(--pc-navy); color: #fff; border-bottom-right-radius: 4px; }
.p360c-b.a { align-self: flex-start; background: rgba(255,255,255,.78); border-bottom-left-radius: 4px; box-shadow: 0 1px 0 rgba(255,255,255,.8) inset, 0 4px 14px rgba(4,32,58,.06); }
.p360c-b a { color: var(--pc-sky); text-decoration: underline; text-underline-offset: 2px; word-break: break-all; }
.p360c-b.u a { color: #a4ec3a; }
.p360c-b.err { background: rgba(251,235,234,.9); color: #9c1a13; }
.p360c-b b { color: var(--pc-navy); }
.p360c-b.u b { color: #fff; }
.p360c-b .li { display: grid; grid-template-columns: 12px 1fr; gap: 6px; align-items: start; margin: 1px 0; }
.p360c-b .li::before { content: ""; width: 5px; height: 5px; margin-top: 9px; border-radius: 50%; background: var(--pc-navy); opacity: .7; }
.p360c-b .li.num { grid-template-columns: 20px 1fr; }
.p360c-b .li.num::before { content: attr(data-n); width: 18px; height: 18px; margin-top: 2px; border-radius: 50%; border: 1.5px solid rgba(4,32,58,.35); background: transparent; opacity: 1; color: var(--pc-navy); font: 700 .66rem/16px "Inter", sans-serif; text-align: center; }
.p360c-b .cta { display: inline-flex; align-items: center; gap: 8px; margin: 8px 4px 2px 0; padding: 10px 16px; border-radius: 999px; background: var(--pc-lime); color: var(--pc-navy) !important; font-weight: 800; text-decoration: none !important; font-size: .88rem; transition: transform .2s; }
.p360c-b .cta:hover { transform: translateY(-1px); }
.p360c-b .cta.wa { background: #25d366; color: #fff !important; }
.p360c-b .cta.sky { background: var(--pc-navy); color: #fff !important; }
.p360c-b .cta svg { width: 16px; height: 16px; fill: currentColor; }
.p360c-typing { align-self: flex-start; display: inline-flex; gap: 5px; padding: 13px 15px; background: rgba(255,255,255,.78); border-radius: 14px; border-bottom-left-radius: 4px; }
.p360c-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--pc-navy); opacity: .5; animation: p360cDot 1s infinite; }
.p360c-typing i:nth-child(2) { animation-delay: .15s; } .p360c-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes p360cDot { 0%, 60%, 100% { opacity: .25; transform: translateY(0); } 30% { opacity: .8; transform: translateY(-3px); } }

/* Accesos rápidos */
.p360c-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; animation: p360cUp .35s .08s cubic-bezier(.22,1,.36,1) both; }
.p360c-tiles button { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 12px; border: 1px solid rgba(4,32,58,.14); background: rgba(255,255,255,.55); color: var(--pc-navy); font: 700 .82rem/1.2 "Inter", system-ui, sans-serif; text-align: left; cursor: pointer; transition: background .2s, border-color .2s; }
.p360c-tiles button:hover { background: rgba(255,255,255,.9); border-color: rgba(4,32,58,.35); }
.p360c-tiles .tic { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--pc-navy); color: #fff; }
.p360c-tiles .tic.lime { background: var(--pc-lime); color: var(--pc-navy); }
.p360c-tiles .tic svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.p360c-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.p360c-chips button { padding: 8px 13px; border-radius: 999px; border: 1px solid rgba(4,32,58,.2); background: rgba(255,255,255,.6); color: var(--pc-navy); font: 600 .8rem "Inter", system-ui, sans-serif; cursor: pointer; }
.p360c-chips button:hover { background: #fff; }

/* Composer */
.p360c-f { position: relative; z-index: 1; padding: 12px 14px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(4,32,58,.1); }
.p360c-f .row { display: grid; grid-template-columns: auto 1fr auto; gap: 4px; align-items: end; padding: 5px; border-radius: 24px; border: 1px solid rgba(4,32,58,.16); background: rgba(255,255,255,.7); box-shadow: inset 0 1px 0 rgba(255,255,255,.9); transition: border-color .2s, background .2s; }
.p360c-f .row:focus-within { border-color: var(--pc-navy); background: #fff; }
.p360c-f textarea { resize: none; min-height: 38px; max-height: 120px; padding: 8px 6px; border: 0; background: transparent; font: inherit; font-size: .95rem; color: var(--pc-ink); }
.p360c-f textarea:focus { outline: none; }
.p360c-f textarea::placeholder { color: #7b8a97; }
.p360c-f button { width: 38px; height: 38px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center; transition: transform .2s, background .2s; }
.p360c-f button:disabled { opacity: .5; cursor: wait; }
.p360c-f button svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.p360c-send { background: var(--pc-navy); color: #fff; }
.p360c-send:hover { transform: scale(1.05); }
.p360c-mic { background: transparent; color: var(--pc-navy); position: relative; }
.p360c-mic:hover { background: rgba(4,32,58,.08); }
.p360c-mic[hidden] { display: none; }
.p360c-mic.is-rec { background: #e2231a; color: #fff; }
.p360c-mic.is-rec::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid rgba(226,35,26,.6); animation: p360cPulse 1.2s ease-out infinite; }
@keyframes p360cPulse { from { transform: scale(1); opacity: 1; } to { transform: scale(1.3); opacity: 0; } }
.p360c-rec { margin-top: 8px; font-size: .78rem; color: #9c1a13; font-weight: 700; text-align: center; }
.p360c-rec[hidden] { display: none; }

@media (max-width: 640px) {
  .p360c-btn { left: 16px; right: auto; bottom: 18px; }
  body.promo-bar-on .p360c-btn { bottom: 88px; }
  .p360c { width: 100vw; border-left: 0; background: rgba(255,255,255,.8); }
  body.p360c-open { overflow: hidden; }
  .p360c-b { max-width: 90%; }
  .p360c-h .av { width: 40px; height: 40px; } .p360c-h .av img { width: 32px; height: 32px; }
}
@media (prefers-reduced-transparency: reduce) { .p360c { background: rgba(246,249,253,.98); backdrop-filter: none; -webkit-backdrop-filter: none; } }
@media (prefers-reduced-motion: reduce) { .p360c.is-open, .p360c-b, .p360c-tiles { animation: none; } .p360c-typing i, .p360c-mic.is-rec::after { animation: none; } }

/* Modo dividido (escritorio ancho): el sitio se reacomoda al ancho restante y el panel queda fijo a la derecha, sin tapar nada.
   Los media queries del sitio miran el viewport: las reglas compactas del header se replican con clases según el ancho real (p360c-bw1340 / p360c-bw1100). */
:root { --p360c-w: 400px; }
@media (min-width: 1400px) {
  html.p360c-split { overflow-x: hidden; }
  body.p360c-split { width: calc(100% - var(--p360c-w)); transition: width .45s cubic-bezier(.22,1,.36,1); }
  body.p360c-split .header, body.p360c-split .progress, body.p360c-split .mobile-menu { right: var(--p360c-w); width: auto; }
  body.p360c-split .promo-bar { right: calc(var(--p360c-w) + 12px); }
  body.p360c-split .p360c { width: var(--p360c-w); background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; border-left: 1px solid rgba(4,32,58,.1); box-shadow: -12px 0 40px rgba(4,32,58,.08); }
  body.p360c-split .p360c::before { display: none; }
  body.p360c-split .p360c-b.a { background: #f3f7fb; box-shadow: none; }
  body.p360c-split .p360c-typing { background: #f3f7fb; }
  body.p360c-split .p360c-tiles button { background: #fff; }
  body.p360c-split .p360c-f .row { background: #f7fafd; }
  body.p360c-split .p360c-f .row:focus-within { background: #fff; }
  /* ancho restante ≤ 1340: botones del header solo con ícono */
  html.p360c-bw1340 .nav a { font-size: .8rem; padding: 10px 6px; }
  html.p360c-bw1340 .header-actions .lbl { display: none; }
  html.p360c-bw1340 .header-actions .btn-wa, html.p360c-bw1340 .header-actions .btn-ig { padding: 0 8px; gap: 0; }
  /* ancho restante ≤ 1100: menú hamburguesa */
  html.p360c-bw1100 .nav { display: none; }
  html.p360c-bw1100 .header-actions .btn { display: none; }
  html.p360c-bw1100 .header-actions .cart-btn { display: inline-flex; min-height: 42px; }
  html.p360c-bw1100 .header-actions { gap: 8px; }
  html.p360c-bw1100 .menu-btn { display: grid; }
  html.p360c-bw1100 .mobile-menu { display: grid; }
}