/*
 * Vivi en toda la web (2026-10-11): botón flotante + panel lateral derecho.
 * Prefijo .vp-. Plano: bordes sólidos de 2 px, sin desenfoques, sin sombras
 * difusas ni degradados. Colores con !important por la plantilla antigua.
 */
.vp{
  --n:#1A3151;--cta:#B75A44;--cta-h:#9B4532;--cream:#F8F2E8;--melo:#F2CDB9;--cielo:#C9D9EA;--salvia:#B5C9AE;
  --line:#E3DDD4;--t2:#455976;--t3:#5B6F8B;--ok:#3D6B3A;
  --disp:var(--vh-disp,"Bricolage Grotesque",Arial,sans-serif);
  font-family:var(--vh-body,inherit);letter-spacing:-.01em;color:var(--n)
}
.vp *,.vp *::before,.vp *::after{box-sizing:border-box}
.vp-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* Botón flotante */
/* 2026-10-12 (Juan: «destacar a Vivi, más grande y más flotante»): Vivi suelta,
   grande, flotando sobre una sombra plana (elipse sólida, sin desenfoque) y
   con la etiqueta a su izquierda. */
.vp-lanzar{position:fixed;right:14px;bottom:10px;z-index:9990;display:flex;align-items:center;gap:0;
  background:transparent;border:0;padding:0;cursor:pointer;color:var(--n)!important;
  font:inherit;font-size:1rem;line-height:1;transition:transform .25s cubic-bezier(.34,1.4,.64,1),opacity .2s}
.vp-lanzar:focus-visible{outline:3px solid var(--cta);outline-offset:3px;border-radius:24px}
.vp-lanzar__txt{background:#fff;border:2px solid var(--n);border-radius:999px;padding:11px 16px;margin-right:-24px;white-space:nowrap;
  transition:background-color .2s,transform .25s cubic-bezier(.34,1.4,.64,1)}
.vp-lanzar__txt b{font-weight:700}
.vp-lanzar:hover .vp-lanzar__txt{background:var(--cream);transform:translateX(-3px)}
.vp-lanzar__vivi{position:relative;flex:none;width:128px;height:124px}
.vp-lanzar__vivi::after{content:"";position:absolute;left:34%;right:34%;bottom:2px;height:9px;border-radius:50%;background:var(--n);opacity:.12;
  animation:vp-sombra 3.6s ease-in-out infinite}
.vp-lanzar__flota{position:absolute;left:0;right:0;top:0;height:110px;animation:vp-flota 3.6s ease-in-out infinite}
.vp-lanzar:hover .vp-lanzar__flota{animation-duration:1.8s}
.vp-lanzar.is-oculto{transform:scale(.6);opacity:0;pointer-events:none}
@keyframes vp-flota{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-12px) rotate(3deg)}}
@keyframes vp-sombra{0%,100%{transform:scaleX(1);opacity:.14}50%{transform:scaleX(.7);opacity:.07}}

/* Panel */
.vp-panel{position:fixed;top:0;right:0;bottom:0;z-index:9995;width:min(420px,100vw);height:100dvh;background:#fff;border-left:2px solid var(--line);
  display:flex;flex-direction:column;transform:translateX(100%);visibility:hidden;transition:transform .35s cubic-bezier(.2,.7,.2,1),visibility 0s .35s}
.vp-panel{padding:0!important;margin:0!important}
.vp.is-abierto .vp-panel{transform:none;visibility:visible;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.vp.sin-anim .vp-panel{transition:none}

.vp-cab{display:flex;align-items:center;gap:10px;padding:12px 12px 12px 18px;border-bottom:2px solid var(--line);background:var(--cream)}
.vp-cab div{flex:1;min-width:0}
.vp-cab h2{font-family:var(--disp)!important;font-size:1.25rem!important;font-weight:700;margin:0!important;color:var(--n)!important;line-height:1.1;letter-spacing:-.02em}
.vp-cab p{margin:2px 0 0!important;font-size:.82rem!important;color:var(--t2)!important;line-height:1.3}
.vp-ico{flex:none;width:38px;height:38px;border-radius:50%;border:2px solid transparent;background:transparent;color:var(--n);display:grid;place-items:center;cursor:pointer}
.vp-ico:hover,.vp-ico:focus-visible{border-color:var(--n);background:#fff}

.vp-msgs{position:relative;flex:1;overflow-y:auto;overscroll-behavior:contain;padding:16px 14px;display:flex;flex-direction:column;gap:10px}
.vp-msgs>*{flex-shrink:0}
.vp-m{max-width:88%;padding:11px 14px;border-radius:18px;font-size:.98rem;line-height:1.5;white-space:pre-line;color:var(--n)!important;animation:vp-in .3s cubic-bezier(.2,.7,.2,1) both}
.vp-m--vivi{background:var(--cream);border-top-left-radius:6px}
.vp-m--yo{background:var(--n);color:#fff!important;align-self:flex-end;border-top-right-radius:6px}
.vp-m--crisis{background:#FBE9E3;border:2px solid var(--cta)}

/* Vivi acompaña (2026-10-12): una sola Vivi junto a la última respuesta suya;
   vuela de una a otra (vivi-panel.js, volar()) y cambia de pose según lo que
   conteste. Los bocadillos de Vivi dejan sitio a la izquierda. */
.vp-m--vivi{margin-left:82px;max-width:calc(100% - 82px);min-height:58px}
.vp-acomp{position:absolute;left:4px;top:0;width:80px;height:70px;z-index:2;pointer-events:none;will-change:transform}
.vp-acomp__in{position:relative;width:100%;height:100%;animation:vp-flota 3.6s ease-in-out infinite}
.vp-acomp.is-pensando .vp-acomp__in{animation-duration:1.4s}
.vp-acomp__in>*{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0}
.vp-acomp__in>.is-on{opacity:1}
.vp-acomp.is-pensando .vp-vuelo{--vp-aleteo:.54s}

/* Aleteo (2026-10-12, Juan): cortes secos, sin fundido. Seis fotogramas de 1/6:
   01 alas juntas · 02 medias · 03 normal · 04 adelantadas · 05 normal con ojos
   cerrados · 02 medias, y vuelta a 01. El cuerpo va siempre encima. */
.vp-vuelo{position:absolute;inset:0;display:block;--vp-aleteo:.9s}
.vp-vuelo .vp-a{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;animation-duration:var(--vp-aleteo);animation-timing-function:step-end;animation-iteration-count:infinite}
.vp-vuelo .vp-a--cuerpo{opacity:1;animation:none}
.vp-a--juntas{animation-name:vp-f1}.vp-a--medias{animation-name:vp-f2}.vp-a--normal{animation-name:vp-f3}
.vp-a--adelantadas{animation-name:vp-f4}.vp-a--parpadeo{animation-name:vp-f5}
@keyframes vp-f1{0%{opacity:1}16.667%,100%{opacity:0}}
@keyframes vp-f2{0%{opacity:0}16.667%{opacity:1}33.333%{opacity:0}83.333%,100%{opacity:1}}
@keyframes vp-f3{0%{opacity:0}33.333%{opacity:1}50%{opacity:0}66.667%{opacity:1}83.333%,100%{opacity:0}}
@keyframes vp-f4{0%{opacity:0}50%{opacity:1}66.667%,100%{opacity:0}}
@keyframes vp-f5{0%{opacity:0}66.667%{opacity:1}83.333%,100%{opacity:0}}
.vp-tels{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.vp-tels a{background:var(--cta);color:#fff!important;text-decoration:none!important;font-weight:700;padding:8px 14px;border-radius:999px}
.vp-tels a span{font-weight:500}
@keyframes vp-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.vp-pensando{display:flex;gap:5px;align-items:center;padding:14px 16px;align-self:flex-start}
.vp-pensando i{width:7px;height:7px;border-radius:50%;background:var(--t3);animation:vp-dot 1.1s infinite ease-in-out}
.vp-pensando i:nth-child(2){animation-delay:.15s}.vp-pensando i:nth-child(3){animation-delay:.3s}
@keyframes vp-dot{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}

.vp-chips{display:flex;flex-wrap:wrap;gap:6px}
.vp-chips button{border:2px solid var(--line);background:#fff;color:var(--n);border-radius:999px;padding:7px 12px;font:inherit;font-size:.9rem;font-weight:500;cursor:pointer;text-align:left}
.vp-chips button:hover,.vp-chips button:focus-visible{border-color:var(--n);background:var(--cream)}

.vp-enl{display:flex;flex-direction:column;gap:6px}
.vp-enl a{display:flex;align-items:center;justify-content:space-between;gap:8px;border:2px solid var(--line);border-radius:14px;padding:9px 12px;
  color:var(--n)!important;text-decoration:none!important;font-size:.92rem;font-weight:600;line-height:1.3;background:#fff}
.vp-enl a::after{content:"→";flex:none;color:var(--cta)}
.vp-enl a:hover{border-color:var(--n)}

.vp-nav{display:block;font-size:.88rem;color:var(--t2)!important;padding:2px 4px}
.vp-nav a{color:var(--n)!important;font-weight:600}
.vp-nav i{display:inline-block;vertical-align:-2px;margin-right:8px;width:14px;height:14px;border-radius:50%;border:2px solid var(--line);border-top-color:var(--cta);animation:vp-gira .8s linear infinite;flex:none}
@keyframes vp-gira{to{transform:rotate(360deg)}}

/* Tarjetas de psicólogo */
.vp-cards{display:grid;gap:10px}
.vp-card{border:2px solid var(--line);border-radius:18px;padding:12px;background:#fff;animation:vp-in .4s cubic-bezier(.2,.7,.2,1) both}
.vp-card:nth-child(2){animation-delay:.1s}.vp-card:nth-child(3){animation-delay:.2s}
.vp-card__top{display:grid;grid-template-columns:52px minmax(0,1fr);gap:10px;align-items:center}
.vp-card img,.vp-foto{width:52px;height:52px;border-radius:50%;object-fit:cover;background:var(--cream)}
.vp-card h3{font-family:var(--disp)!important;font-size:1.05rem!important;font-weight:700;margin:0!important;color:var(--n)!important;line-height:1.2;letter-spacing:-.02em}
.vp-card h3 a{color:inherit!important;text-decoration:none!important}
.vp-card .vp-tit{font-size:.8rem;color:var(--t3)!important;margin:2px 0 0!important;line-height:1.3}
.vp-encaje{display:inline-block;font-size:.68rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;background:var(--salvia);color:var(--n);border-radius:999px;padding:2px 8px;margin-bottom:4px}
.vp-encaje--bueno{background:var(--melo)}.vp-encaje--parcial{background:var(--cream)}
.vp-motivo{margin:8px 0 0!important;font-size:.92rem;line-height:1.45;color:var(--n)!important}
.vp-meta{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:8px;font-size:.82rem;color:var(--t2)}
.vp-meta b{color:var(--n);font-weight:600}
.vp-prox{color:var(--ok)!important}
.vp-acts{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.vp-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border-radius:999px;padding:8px 14px;font:inherit;font-weight:600;font-size:.88rem;
  text-decoration:none!important;border:2px solid transparent;cursor:pointer;line-height:1.2}
.vp-btn--pri{background:var(--cta);color:#fff!important}
.vp-btn--pri:hover{background:var(--cta-h)}
.vp-btn--sec{border-color:var(--line);color:var(--n)!important;background:#fff}
.vp-btn--sec:hover{border-color:var(--n)}

/* Huecos libres */
.vp-huecos{border:2px solid var(--line);border-radius:18px;padding:12px;background:#fff}
.vp-huecos__cab{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.vp-huecos__cab b{font-family:var(--disp);font-size:1rem}
.vp-huecos__cab a{font-size:.82rem;color:var(--t2)!important}
.vp-dia{font-size:.78rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--t3);margin:10px 0 6px}
.vp-dia:first-of-type{margin-top:0}
.vp-horas{display:flex;flex-wrap:wrap;gap:6px}
.vp-horas a{flex:0 1 calc((100% - 12px) / 3);min-width:0;display:flex;flex-direction:column;border:2px solid var(--line);border-radius:12px;padding:6px 10px;text-decoration:none!important;color:var(--n)!important;background:var(--cream)}
.vp-horas a b{font-size:1rem}
.vp-horas a span{font-size:.72rem;color:var(--t2)!important;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:none!important}
.vp-horas a:hover,.vp-horas a:focus-visible{border-color:var(--cta);background:#fff}
.vp-tz{font-size:.75rem;color:var(--t3);margin:8px 0 0}

/* Comparación */
.vp-comp{border:2px solid var(--line);border-radius:18px;background:#fff;overflow-x:auto}
.vp-comp table{width:100%;border-collapse:collapse;font-size:.82rem;line-height:1.35}
.vp-comp th,.vp-comp td{padding:8px;border-bottom:2px solid var(--line);text-align:left;vertical-align:top;color:var(--n)!important}
.vp-comp tr:last-child td{border-bottom:0}
.vp-comp thead th{background:var(--cream);font-weight:700}
.vp-comp thead th a{color:var(--n)!important;text-decoration:none!important;display:flex;flex-direction:column;gap:4px}
.vp-comp thead img{width:40px;height:40px;border-radius:50%;object-fit:cover}
.vp-comp tbody th{font-weight:600;color:var(--t2)!important;width:76px;font-size:.75rem;text-transform:uppercase;letter-spacing:.04em}
.vp-comp .vp-btn{padding:6px 10px;font-size:.8rem}

/* Formulario */
.vp-form{display:flex;gap:6px;align-items:flex-end;margin:0 12px;border:2px solid var(--line);border-radius:22px;padding:4px 4px 4px 14px}
.vp-form:focus-within{border-color:var(--n)}
.vp-form textarea{flex:1;border:0;outline:0;resize:none;font:inherit;font-size:1rem;line-height:1.45;padding:9px 0;max-height:130px;color:var(--n);background:transparent;min-width:0}
.vp-send{flex:none;width:42px;height:42px;border-radius:50%;border:0;background:var(--cta);color:#fff;display:grid;place-items:center;cursor:pointer}
.vp-send:hover{background:var(--cta-h)}
.vp-send:disabled{background:var(--t3);cursor:default}
.vp-legal{font-size:.74rem!important;line-height:1.4;color:var(--t3)!important;margin:8px 14px 12px!important}
.vp-legal a{color:inherit!important;font-weight:600}

@media (max-width:600px){
  .vp-lanzar{right:6px;bottom:6px}
  .vp-lanzar__vivi{width:96px;height:94px}
  .vp-lanzar__flota{height:83px}
  .vp-lanzar__txt{font-size:.92rem;padding:9px 13px;margin-right:-18px}
  .vp-acomp{width:62px;height:54px}
  .vp-panel{width:100vw;border-left:0}
  .vp-m{max-width:94%}
  .vp-m--vivi{margin-left:66px;max-width:calc(100% - 66px);min-height:46px}
}
@media (prefers-reduced-motion:reduce){
  .vp-lanzar__flota,.vp-lanzar__vivi::after,.vp-m,.vp-card,.vp-pensando i,.vp-acomp__in,.vp-vuelo .vp-a{animation:none!important}
  .vp-vuelo .vp-a--normal{opacity:1}
  .vp-panel{transition:none}
}
@media print{.vp{display:none}}

/* 2026-10-12: en escritorio ancho el panel no tapa la página, la estrecha
   (clase vp-empuja en <html>, la pone vivi-panel.js al abrir). Por debajo de
   1100 px sigue por encima, que si no la página se queda en nada. */
@media (min-width:1100px){
  html body{transition:margin-right .35s cubic-bezier(.2,.7,.2,1)}
  html.vp-empuja body{margin-right:min(420px,100vw)!important}
  html.vp-sin-anim body{transition:none}
}
@media (prefers-reduced-motion:reduce){html body{transition:none!important}}
/* Home: las cifras usan vw y en cuatro columnas no caben con el panel abierto */
@media (min-width:1100px) and (max-width:1719px){html.vp-empuja .vh-facts__list{grid-template-columns:1fr 1fr}}
/* Cabecera: con el panel abierto el menú no cabe entero; «Para psicólogos» sigue en el pie */
@media (min-width:1100px) and (max-width:1519px){
  html.vp-empuja #navbar .vs-pro-link{display:none!important}
  html.vp-empuja #navbar .nav-link{white-space:nowrap}
}

/* 2026-10-12 (Juan: «dejarla solo parpadeando como antes sin movimiento de
   alas»): alas quietas en la posición normal y parpadeo cada 4 s. Para volver
   al aleteo 01-02-03-04-05-02, borrar este bloque. */
.vp-vuelo .vp-a--juntas,.vp-vuelo .vp-a--medias,.vp-vuelo .vp-a--adelantadas{animation:none!important;opacity:0!important}
.vp-vuelo .vp-a--normal{animation:none!important;opacity:1!important}
.vp-vuelo .vp-a--parpadeo{animation:vp-parpadea 4s linear infinite!important}
@keyframes vp-parpadea{0%,96%{opacity:0}96.1%,99.4%{opacity:1}99.5%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.vp-vuelo .vp-a--parpadeo{animation:none!important}}