/* ═══ VisaBot flotante: circulito + hoja de consulta por WhatsApp ═══
   Fuente única: new-web/_visabot/ — se estampa en cada página con aplicar-visabot.py.
   Nació en la Home (index-v6, «sec:fab-visabot» + «sec:sheet-visabot», variante
   «D2 · Claro con borde») y el 2026-09-09 pasó a pieza compartida para TODAS las
   estáticas fuera de WordPress. Prefijo yvb- en todas las clases e ids para no chocar
   con el CSS de cada página (la Home y la Guía ya tienen .overlay/.sheet propios);
   cada variable de marca lleva fallback porque no todas las páginas las definen.
   Va como ARCHIVO (<link>), no inline: el portón no admite más CSS inline en Elegí
   destino (>50 KB). En producción: /_static/_visabot/visabot.css?v=<hash>; en la Guía,
   css/visabot.css (su build lo copia y versiona como styles.css). */

/* el circulito: robotito propio, NO ícono genérico de WhatsApp. En mobile se ancla a la
   columna de 440px (mismo cálculo que el «volver arriba» de la Guía); en desktop, a la esquina */
.yvb-fab{position:fixed;bottom:calc(env(safe-area-inset-bottom,0px) + 18px);right:max(16px, calc(50vw - 204px));z-index:80;width:58px;height:58px;border-radius:999px;border:none;margin:0;padding:0;cursor:pointer;background:#fff;box-shadow:0 8px 24px rgba(24,18,26,.28), 0 0 0 2.5px #25D366;display:flex;align-items:center;justify-content:center;transition:transform .12s;-webkit-tap-highlight-color:transparent;}
.yvb-fab:active{transform:scale(.94);}
.yvb-fab img{width:38px;height:38px;object-fit:contain;display:block;}
.yvb-dot{position:absolute;top:-1px;right:-1px;width:15px;height:15px;border-radius:50%;background:#25D366;border:2.5px solid #fff;}

/* la hoja: en mobile sube desde abajo; en desktop es una tarjeta abajo a la derecha */
.yvb-overlay{position:fixed;inset:0;background:rgba(20,12,22,.5);z-index:100;display:none;align-items:flex-end;justify-content:center;}
.yvb-overlay.open{display:flex;}
.yvb-sheet{box-sizing:border-box;width:100%;max-width:440px;background:#fff;color:var(--ink,#18121A);font-family:var(--font-body,'Plus Jakarta Sans',system-ui,sans-serif);font-size:15px;line-height:1.4;text-align:left;border:1px solid #D6D0DA;border-bottom:none;border-radius:24px 24px 0 0;box-shadow:0 -14px 48px rgba(24,18,26,.35);padding:10px 20px calc(env(safe-area-inset-bottom,0px) + 20px);max-height:calc(100% - 96px);overflow-y:auto;animation:yvbUp .26s cubic-bezier(.22,1,.36,1);}
.yvb-sheet *{box-sizing:border-box;}
@keyframes yvbUp{from{transform:translateY(100%);}to{transform:translateY(0);}}
.yvb-grip{width:42px;height:5px;border-radius:3px;background:var(--line,#E7E5EA);margin:6px auto 14px;}
.yvb-hd{display:flex;align-items:center;gap:14px;}
.yvb-av{width:52px;height:52px;border-radius:14px;background:#F3EEF5;overflow:hidden;flex:0 0 auto;}
.yvb-av img{width:100%;height:100%;object-fit:cover;display:block;}
.yvb-hd b{font-family:var(--font-head,'Outfit',sans-serif);font-weight:700;font-size:19px;display:block;line-height:1.1;color:var(--ink,#18121A);}
.yvb-hd small{display:block;font-size:13px;color:var(--muted,#7A6E7C);margin-top:3px;}
.yvb-x{margin-left:auto;background:none;border:none;color:var(--muted,#7A6E7C);font-family:inherit;font-size:26px;line-height:1;cursor:pointer;padding:4px 6px;}
.yvb-tit{font-family:var(--font-head,'Outfit',sans-serif);font-weight:800;font-size:26px;line-height:1.1;margin:22px 0 0;letter-spacing:-.01em;color:var(--ink,#18121A);}
.yvb-sub{color:var(--muted,#7A6E7C);font-size:15px;margin:10px 0 0;}
.yvb-opts{display:flex;flex-direction:column;gap:11px;margin-top:20px;}
.yvb-opt{position:relative;display:flex;align-items:center;gap:14px;margin:0;padding:17px 18px;border-radius:16px;border:1.5px solid var(--line,#E7E5EA);background:#fff;cursor:pointer;font-weight:600;font-size:15px;line-height:1.3;color:var(--ink,#18121A);transition:border-color .14s,background .14s;}
.yvb-opt input{position:absolute;opacity:0;width:0;height:0;margin:0;}
.yvb-rd{width:22px;height:22px;border-radius:50%;border:2px solid #CFC9D2;flex:0 0 auto;display:flex;align-items:center;justify-content:center;}
/* la opción elegida la marca el JS con .yvb-on (en la Home era :has(input:checked);
   con clase funciona en cualquier browser) */
.yvb-opt.yvb-on{border-color:var(--yma-magenta,#FF3366);background:hsl(345 100% 97%);}
.yvb-opt.yvb-on .yvb-rd{border-color:var(--yma-magenta,#FF3366);}
.yvb-opt.yvb-on .yvb-rd::after{content:'';width:12px;height:12px;border-radius:50%;background:var(--yma-magenta,#FF3366);}
.yvb-opt:has(input:focus-visible){outline:2px solid var(--ink,#18121A);outline-offset:2px;}
.yvb-cta{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:22px;padding:17px;border-radius:999px;background:var(--yma-magenta,#FF3366);color:#fff;text-decoration:none;font-family:var(--font-head,'Outfit',sans-serif);font-weight:700;font-size:17px;line-height:1.2;transition:transform .12s;}
.yvb-cta:hover,.yvb-cta:focus{color:#fff;text-decoration:none;}
.yvb-cta:active{transform:scale(.98);}
.yvb-cta svg{width:22px;height:22px;flex:0 0 auto;}
.yvb-fin{font-size:12.5px;color:var(--muted,#7A6E7C);text-align:center;margin:12px 0 0;}
@media (prefers-reduced-motion: reduce){.yvb-sheet{animation:none;}}

@media (min-width:1000px){
  /* en full-width se ancla a la esquina (el max() del base era para el frame de 440px) */
  .yvb-fab{right:24px;}
  /* la hoja en desktop es una tarjeta anclada abajo a la derecha, no una hoja centrada */
  .yvb-overlay{justify-content:flex-end;padding:0 24px calc(env(safe-area-inset-bottom,0px) + 24px);}
  .yvb-overlay .yvb-sheet{max-width:420px;border-radius:24px;border-bottom:1px solid #D6D0DA;box-shadow:0 18px 56px rgba(24,18,26,.32);padding-bottom:22px;animation:yvbIn .24s cubic-bezier(.22,1,.36,1);}
  @keyframes yvbIn{from{opacity:0;transform:translateY(16px) scale(.98);}to{opacity:1;transform:none;}}
  .yvb-overlay .yvb-grip{display:none;}
}