/* Caja de Camila: elegir chat o llamada, chat con el agente y llamada de voz */
.cc{position:fixed;right:16px;bottom:calc(96px + env(safe-area-inset-bottom));z-index:120;width:min(380px,calc(100vw - 24px));height:min(580px,calc(100svh - 130px));display:flex;flex-direction:column;background:#fff;border-radius:24px;overflow:hidden;box-shadow:0 30px 70px -20px rgba(40,10,90,.55),0 0 0 1px rgba(123,47,247,.12);font-family:Inter,Montserrat,system-ui,sans-serif;color:#141820;opacity:0;transform:translateY(24px) scale(.94);transform-origin:bottom right;transition:opacity .26s ease,transform .32s cubic-bezier(.2,1.3,.4,1)}
.cc.abierta{opacity:1;transform:none}
.cc[hidden]{display:none}
.cc-cab{display:flex;align-items:center;gap:12px;padding:14px 14px 14px 16px;color:#fff;background:linear-gradient(120deg,#7B2FF7,#9D3BFF 55%,#6A11CB);position:relative}
.cc-cab::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,#E8343B,#F6A623,#C2187A,#1FB5C4,#E8343B);background-size:200% 100%;animation:cc-linea 4s linear infinite}
.cc-cab img{width:44px;height:44px;border-radius:50%;object-fit:cover;border:2px solid #fff;box-shadow:0 0 0 3px rgba(46,227,95,.55)}
.cc-cab div{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.2}
.cc-cab b{font:700 1.05rem Poppins,Inter,sans-serif}
.cc-cab span{font-size:.78rem;opacity:.92;display:flex;align-items:center;gap:6px}
.cc-punto{width:8px;height:8px;border-radius:50%;background:#2ee35f;box-shadow:0 0 0 0 rgba(46,227,95,.7);animation:cc-late 1.6s ease-out infinite}
.cc-wa,.cc-x{width:38px;height:38px;display:grid;place-items:center;border-radius:50%;border:0;color:#fff;background:rgba(255,255,255,.16);cursor:pointer;transition:background .2s,transform .2s}
.cc-wa:hover{background:#22D366;transform:scale(1.08)}
.cc-x:hover{background:rgba(255,255,255,.3);transform:rotate(90deg)}
/* elegir */
.cc-elige{flex:1;overflow:auto;padding:22px 18px;display:flex;flex-direction:column;gap:12px;background:radial-gradient(300px 200px at 100% 0,rgba(123,47,247,.10),transparent 70%),radial-gradient(260px 200px at 0 100%,rgba(232,52,59,.08),transparent 70%),#fbf9ff}
.cc-hola{margin:0 0 6px;font-size:1rem;line-height:1.45}
.cc-op{display:flex;align-items:center;gap:14px;width:100%;text-align:left;border:0;border-radius:18px;padding:16px;color:#fff;cursor:pointer;font:inherit;position:relative;overflow:hidden;box-shadow:0 12px 26px -14px rgba(0,0,0,.55);transition:transform .25s cubic-bezier(.3,1.6,.5,1),box-shadow .25s;animation:cc-entra .45s both}
.cc-op:nth-of-type(2){animation-delay:.08s}
.cc-op::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);transition:left .6s}
.cc-op:hover{transform:translateY(-3px) scale(1.02)}
.cc-op:hover::after{left:130%}
.cc-op b{display:block;font:700 1.02rem Poppins,Inter,sans-serif}
.cc-op small{display:block;font-size:.8rem;opacity:.9;margin-top:2px}
.cc-ic{flex:none;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.2)}
.cc-op-chat{background:linear-gradient(135deg,#7B2FF7,#C2187A)}
.cc-op-chat:hover{box-shadow:0 0 28px rgba(123,47,247,.6)}
.cc-op-voz{background:linear-gradient(135deg,#E8343B,#F6A623)}
.cc-op-voz:hover{box-shadow:0 0 28px rgba(232,52,59,.55)}
.cc-op-voz .cc-ic{animation:cc-timbre 2.4s ease-in-out infinite}
.cc-op-wa{display:inline-flex;align-items:center;justify-content:center;gap:8px;margin-top:4px;padding:10px;border-radius:12px;color:#0b7a37;font-weight:600;text-decoration:none;font-size:.9rem}
.cc-op-wa:hover{background:#e9fbef}
/* chat */
.cc-chat{flex:1;display:flex;flex-direction:column;min-height:0;background:#f7f5fc}
.cc-msgs{flex:1;overflow-y:auto;padding:16px 14px;display:flex;flex-direction:column;gap:8px;scroll-behavior:smooth}
.cc-m{max-width:84%;padding:10px 13px;border-radius:18px;font-size:.93rem;line-height:1.42;word-wrap:break-word;animation:cc-burbuja .3s cubic-bezier(.2,1.3,.4,1) both}
.cc-ella{align-self:flex-start;background:#fff;border-bottom-left-radius:5px;box-shadow:0 2px 8px -3px rgba(30,10,60,.18)}
.cc-yo{align-self:flex-end;color:#fff;background:linear-gradient(135deg,#7B2FF7,#9D3BFF);border-bottom-right-radius:5px}
.cc-m a{color:inherit;text-decoration:underline}
.cc-escribe{display:inline-flex;gap:4px;padding:4px 2px}
.cc-escribe i{width:7px;height:7px;border-radius:50%;background:#9D3BFF;animation:cc-salta 1s infinite}
.cc-escribe i:nth-child(2){animation-delay:.15s}.cc-escribe i:nth-child(3){animation-delay:.3s}
.cc-btn-wa{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:999px;background:#22D366;color:#062B14!important;text-decoration:none!important;font-weight:700}
.cc-sug{display:flex;gap:6px;overflow-x:auto;padding:0 14px 8px;scrollbar-width:none}
.cc-sug button{flex:none;border:1px solid rgba(123,47,247,.35);background:#fff;color:#5b1fc7;border-radius:999px;padding:7px 12px;font:600 .8rem Inter,sans-serif;cursor:pointer;transition:background .2s,color .2s}
.cc-sug button:hover{background:#7B2FF7;color:#fff}
.cc-form{display:flex;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid #ece8f5}
.cc-form input{flex:1;min-width:0;border:1.5px solid #e2dcef;border-radius:999px;padding:11px 16px;font:16px Inter,sans-serif;outline:0;transition:border-color .2s,box-shadow .2s}
.cc-form input:focus{border-color:#7B2FF7;box-shadow:0 0 0 4px rgba(123,47,247,.15)}
.cc-env,.cc-mini-voz{flex:none;width:44px;height:44px;border-radius:50%;border:0;display:grid;place-items:center;color:#fff;cursor:pointer;transition:transform .2s,box-shadow .2s}
.cc-env{background:linear-gradient(135deg,#7B2FF7,#C2187A)}
.cc-mini-voz{background:linear-gradient(135deg,#E8343B,#F6A623)}
.cc-env:hover,.cc-mini-voz:hover{transform:scale(1.1);box-shadow:0 0 18px rgba(123,47,247,.5)}
/* llamada */
.cc-voz{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:24px;color:#fff;background:radial-gradient(400px 300px at 50% 30%,#3a1680,#14082e 75%)}
.cc-voz-foto{position:relative;width:132px;height:132px;margin-bottom:10px}
.cc-voz-foto img{position:relative;z-index:2;width:100%;height:100%;border-radius:50%;object-fit:cover;border:4px solid #fff}
.cc-voz-foto i{position:absolute;inset:0;border-radius:50%;border:2px solid #9D3BFF;opacity:0}
.cc-voz.timbra .cc-voz-foto i,.cc-voz.habla .cc-voz-foto i{animation:cc-onda-anillo 1.8s ease-out infinite}
.cc-voz.habla .cc-voz-foto i{border-color:#2ee35f}
.cc-voz-foto i:nth-child(2){animation-delay:.6s!important}.cc-voz-foto i:nth-child(3){animation-delay:1.2s!important}
.cc-voz-est{font:700 1.1rem Poppins,Inter,sans-serif;text-align:center}
.cc-voz-t{font-variant-numeric:tabular-nums;opacity:.8}
.cc-onda{display:flex;align-items:center;gap:5px;height:34px}
.cc-onda i{width:5px;height:8px;border-radius:3px;background:linear-gradient(#F6A623,#E8343B)}
.cc-voz.habla .cc-onda i,.cc-voz.escucha .cc-onda i{animation:cc-barra .9s ease-in-out infinite}
.cc-voz.escucha .cc-onda i{animation-duration:1.6s;opacity:.6}
.cc-onda i:nth-child(2){animation-delay:.1s!important}.cc-onda i:nth-child(3){animation-delay:.2s!important}.cc-onda i:nth-child(4){animation-delay:.3s!important}.cc-onda i:nth-child(5){animation-delay:.2s!important}.cc-onda i:nth-child(6){animation-delay:.1s!important}
.cc-voz-bot{display:flex;gap:22px;margin-top:10px}
.cc-mudo,.cc-colgar{width:62px;height:62px;border-radius:50%;border:0;display:grid;place-items:center;color:#fff;cursor:pointer;transition:transform .2s,box-shadow .2s}
.cc-mudo{background:rgba(255,255,255,.16)}
.cc-mudo[aria-pressed="true"]{background:#fff;color:#3a1680}
.cc-colgar{background:#E8343B;box-shadow:0 10px 26px -8px rgba(232,52,59,.8)}
.cc-colgar:hover{transform:scale(1.08);box-shadow:0 0 26px rgba(232,52,59,.8)}
.cc-volver{margin-top:8px;border:0;background:none;color:rgba(255,255,255,.75);text-decoration:underline;cursor:pointer;font:inherit}
@keyframes cc-linea{to{background-position:-200% 0}}
@keyframes cc-late{to{box-shadow:0 0 0 8px rgba(46,227,95,0)}}
@keyframes cc-entra{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes cc-burbuja{from{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:none}}
@keyframes cc-salta{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-5px);opacity:1}}
@keyframes cc-timbre{0%,70%,100%{transform:rotate(0)}75%{transform:rotate(-12deg)}80%{transform:rotate(12deg)}85%{transform:rotate(-8deg)}90%{transform:rotate(8deg)}}
@keyframes cc-onda-anillo{0%{transform:scale(1);opacity:.9}100%{transform:scale(1.7);opacity:0}}
@keyframes cc-barra{0%,100%{height:8px}50%{height:32px}}
@media(max-width:600px){.cc{right:8px;left:8px;width:auto;bottom:calc(84px + env(safe-area-inset-bottom));height:min(560px,calc(100svh - 110px))}}
@media(prefers-reduced-motion:reduce){.cc,.cc *{animation:none!important;transition:none!important}}
.cc-legal{margin:auto 0 0;font-size:.72rem;line-height:1.4;color:#6b6478;text-align:center}.cc-legal a{color:#5b1fc7}
/* Tarjeta de Camila con globo de mensajes */
.camila-tarjeta{position:relative;margin-right:-26px;padding:12px 38px 12px 18px;background:#fff;border-radius:20px 0 0 20px;box-shadow:0 18px 40px -14px rgba(40,10,90,.45),0 0 0 1px rgba(46,227,95,.25);max-width:min(260px,calc(100vw - 110px));opacity:0;transform:translateX(18px) scale(.96);transition:opacity .3s,transform .4s cubic-bezier(.2,1.3,.4,1);cursor:pointer;font-family:Inter,system-ui,sans-serif}
.camila-tarjeta.ver{opacity:1;transform:none}
.camila-tarjeta[hidden]{display:none}
.ct-nom{margin:0 18px 8px 0;display:flex;flex-direction:column;line-height:1.15}
.ct-nom b{font:800 1.05rem Poppins,Inter,sans-serif;color:#141820;letter-spacing:.02em}
.ct-nom small{font-size:.68rem;color:#5d6270;letter-spacing:.04em}
.ct-linea{align-self:flex-start;margin-top:6px;display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;background:#e9fbef;color:#12873f;font:800 .66rem Inter,sans-serif;letter-spacing:.08em}
.ct-linea i{width:7px;height:7px;border-radius:50%;background:#2ee35f;animation:cc-late 1.4s ease-out infinite}
.ct-globo{position:absolute;right:30px;bottom:calc(100% + 12px);white-space:nowrap;max-width:calc(100vw - 40px);overflow:hidden;text-overflow:ellipsis;padding:10px 16px;border-radius:999px;background:#22D366;color:#062B14;font:700 .88rem Inter,sans-serif;box-shadow:0 10px 26px -8px rgba(34,211,102,.8),0 0 0 4px rgba(34,211,102,.18);animation:ct-flota 3s ease-in-out infinite}
.ct-globo::after{content:"";position:absolute;right:26px;bottom:-7px;width:14px;height:14px;background:#22D366;transform:rotate(45deg);border-radius:2px}
.ct-globo.cambia{animation:ct-cambia .45s cubic-bezier(.2,1.4,.4,1),ct-flota 3s ease-in-out .45s infinite}
.ct-x{position:absolute;top:8px;right:32px;width:24px;height:24px;border-radius:50%;border:1px solid #e3e5ea;background:#fff;color:#5d6270;font-size:1rem;line-height:1;cursor:pointer;display:grid;place-items:center}
.ct-x:hover{background:#141820;color:#fff}
.ct-bot{display:flex;gap:8px}
.ct-b{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:38px;padding:0 12px;border:0;border-radius:999px;font:700 .82rem Inter,sans-serif;color:#fff;cursor:pointer;position:relative;overflow:hidden;transition:transform .2s,box-shadow .2s}
.ct-chat{background:linear-gradient(135deg,#7B2FF7,#C2187A)}
.ct-llamar{background:linear-gradient(135deg,#16b455,#2ee35f);color:#062B14}
.ct-b:hover{transform:translateY(-2px);box-shadow:0 0 20px rgba(123,47,247,.5)}
.ct-llamar:hover{box-shadow:0 0 20px rgba(46,227,95,.7)}
.ct-llamar svg{animation:cc-timbre 2.4s ease-in-out infinite}
@keyframes ct-flota{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes ct-cambia{from{opacity:0;transform:translateY(8px) scale(.85)}to{opacity:1;transform:none}}
/* Radar más fuerte alrededor de la foto */
.camila-av .radar{border-width:3px!important;box-shadow:0 0 14px rgba(46,227,95,.55)}
.camila-av .r3{animation-delay:1s!important}
.camila-av::before{content:"";position:absolute;inset:-14px;border-radius:50%;background:radial-gradient(circle,rgba(46,227,95,.35),transparent 70%);animation:ct-pulso 2s ease-in-out infinite;pointer-events:none}
@keyframes ct-pulso{0%,100%{opacity:.4;transform:scale(.9)}50%{opacity:1;transform:scale(1.08)}}
@media(max-width:600px){.camila-tarjeta{padding:10px 32px 10px 14px}.ct-nom b{font-size:.95rem}.ct-b{min-height:36px;padding:0 10px;font-size:.78rem}.ct-globo{font-size:.8rem}}
@media(prefers-reduced-motion:reduce){.camila-tarjeta,.ct-globo,.camila-av::before{animation:none!important;transition:none!important}}
/* ── Verde primaveral con letra blanca y efectos (pedido de Diego) ── */
:root{--prim-1:#16C75A;--prim-2:#6EE33C}
.ct-globo{background:linear-gradient(120deg,var(--prim-1),var(--prim-2),var(--prim-1));background-size:200% 100%;color:#fff;text-shadow:0 1px 2px rgba(0,60,20,.45);box-shadow:0 10px 26px -8px rgba(46,200,80,.9),0 0 0 4px rgba(110,227,60,.22);animation:ct-flota 3s ease-in-out infinite,ct-fluye 4s linear infinite}
.ct-globo::after{background:var(--prim-1)}
.ct-globo.cambia{animation:ct-cambia .45s cubic-bezier(.2,1.4,.4,1),ct-flota 3s ease-in-out .45s infinite,ct-fluye 4s linear infinite}
.ct-globo::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);background-size:250% 100%;animation:ct-brillo 3.2s ease-in-out infinite;pointer-events:none}
.ct-linea{background:linear-gradient(120deg,var(--prim-1),var(--prim-2));color:#fff;text-shadow:0 1px 1px rgba(0,60,20,.35);box-shadow:0 0 12px rgba(110,227,60,.55)}
.ct-linea i{background:#fff;box-shadow:0 0 0 0 rgba(255,255,255,.8);animation:ct-late-b 1.4s ease-out infinite}
.ct-llamar{background:linear-gradient(120deg,var(--prim-1),var(--prim-2),var(--prim-1));background-size:200% 100%;color:#fff;text-shadow:0 1px 2px rgba(0,60,20,.4);animation:ct-fluye 4s linear infinite}
.ct-chat{background:linear-gradient(120deg,#7B2FF7,#C2187A,#7B2FF7);background-size:200% 100%;animation:ct-fluye 4s linear infinite}
/* brillo que cruza los botones y resplandor al pasar el cursor */
.ct-b::before{content:"";position:absolute;top:0;bottom:0;left:-70%;width:45%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.6),transparent);transform:skewX(-20deg);animation:ct-barre 3.4s ease-in-out infinite}
.ct-llamar::before{animation-delay:1.7s}
.ct-b:hover{transform:translateY(-3px) scale(1.05)}
.ct-chat:hover{box-shadow:0 0 0 3px rgba(194,24,122,.25),0 0 26px rgba(123,47,247,.75)}
.ct-llamar:hover{box-shadow:0 0 0 3px rgba(110,227,60,.3),0 0 26px rgba(46,220,90,.85)}
.ct-b:active{transform:scale(.96)}
.ct-b .onda-c{position:absolute;border-radius:50%;background:rgba(255,255,255,.55);transform:scale(0);animation:ct-onda .6s ease-out forwards;pointer-events:none}
.ct-llamar svg{animation:cc-timbre 2.4s ease-in-out infinite}
.ct-chat svg{animation:ct-salta 2.4s ease-in-out infinite}
/* tarjeta: borde de luz que gira y entrada con rebote */
.camila-tarjeta{border:0;isolation:isolate}
.camila-tarjeta::before{content:"";position:absolute;inset:-2px;border-radius:22px 0 0 22px;z-index:-1;background:conic-gradient(from var(--ang,0deg),var(--prim-1),var(--prim-2),#7B2FF7,#C2187A,var(--prim-1));animation:ct-gira 4s linear infinite}
.camila-tarjeta::after{content:"";position:absolute;inset:0;border-radius:20px 0 0 20px;z-index:-1;background:#fff}
.camila-tarjeta:hover{transform:translateY(-3px)}
.camila-tarjeta.ver .ct-nom b{animation:ct-letras .6s cubic-bezier(.2,1.4,.4,1) both}
@property --ang{syntax:"<angle>";inherits:false;initial-value:0deg}
/* radar verde primaveral */
.camila-av .radar{border-color:var(--prim-2)!important;box-shadow:0 0 16px rgba(110,227,60,.7)}
.camila-av .punto-vivo{background:var(--prim-2)}
.camila-av::before{background:radial-gradient(circle,rgba(110,227,60,.45),transparent 70%)}
/* botones de la caja de chat también con verde primaveral */
.cc-btn-wa{background:linear-gradient(120deg,var(--prim-1),var(--prim-2));color:#fff!important;text-shadow:0 1px 2px rgba(0,60,20,.4)}
.cc-punto{background:var(--prim-2)}
@keyframes ct-fluye{to{background-position:-200% 0}}
@keyframes ct-brillo{0%,100%{background-position:150% 0}50%{background-position:-50% 0}}
@keyframes ct-barre{0%,55%{left:-70%}85%,100%{left:130%}}
@keyframes ct-onda{to{transform:scale(4);opacity:0}}
@keyframes ct-salta{0%,70%,100%{transform:translateY(0)}80%{transform:translateY(-3px)}90%{transform:translateY(1px)}}
@keyframes ct-gira{to{--ang:360deg}}
@keyframes ct-letras{from{letter-spacing:.4em;opacity:0}to{letter-spacing:.02em;opacity:1}}
@keyframes ct-late-b{to{box-shadow:0 0 0 7px rgba(255,255,255,0)}}
@media(prefers-reduced-motion:reduce){.ct-globo,.ct-b,.ct-b::before,.camila-tarjeta::before,.ct-linea i{animation:none!important}}
/* Tarjeta más transparente (vidrio): el borde de luz queda solo en el contorno */
.camila-tarjeta::before{padding:2px;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.camila-tarjeta::after{display:none}
.camila-tarjeta{background:rgba(255,255,255,.55);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4)}
/* Foto de Camila 50 % más grande; la tarjeta y los botones quedan igual */
.camila .camila-av{width:90px;height:90px}
.con-barra .camila .camila-av{width:75px;height:75px}
.camila-av .punto-vivo{width:18px;height:18px;right:3px;bottom:5px}