/* ============================================================
   GUÍA BENER — el logo del header se vuelve un personaje que baja
   con el scroll y salta de sección en sección (solo en el Inicio).
   Todo va con prefijo gb- y solo se activa si <html> tiene .gb-on
   (lo agrega el mini-script del <head>). Sin .gb-on: no cambia nada.
   Para apagarlo: sacar las 2 líneas del header (o abrir la web con ?guia=0).
   ============================================================ */

/* --- Espacios vacíos ("carriles") donde se para el personaje, para que
       NUNCA quede encima de algo que se lee. Solo existen con .gb-on. --- */
html.gb-on{ --gb-lane:150px; }
@media (max-width:768px){ html.gb-on{ --gb-lane:122px; } }

@media (max-width:960px){ html.gb-on .hv-hero-text{ margin-bottom:var(--gb-lane); } }   /* celu/tablet (1 columna): lugar entre el título y el buscador. En compu se para en el hueco de la derecha y no se toca nada */
html.gb-on .hv-services-grid{ padding-top:var(--gb-lane); }             /* sobre las 3 tarjetas de servicios */
html.gb-on .hv-stats{ padding-top:var(--gb-lane); }                     /* sobre los números */
html.gb-on .hv-team-teaser-photos{ padding-top:var(--gb-lane); }        /* sobre las fotos del equipo */
html.gb-on .hv-testimonios-marquee{ padding-top:var(--gb-lane); }       /* sobre el carrusel de reseñas */
html.gb-on .hv-cta .hv-btn-big{ margin-top:calc(var(--gb-lane) - 36px); }/* sobre el botón de tasación */
html.gb-on .bnr-footer{ padding-bottom:calc(var(--gb-lane) + 76px); }   /* junto al botón de WhatsApp */

/* --- Personaje (anclado a la página: al scrollear se mueve con el contenido) --- */
#gbChar,#gbBubble{
  --gb-line:#1a1a1a; --gb-fill:#fff; --gb-accent:#d1331d; --gb-glass:rgba(255,255,255,.55);
}
#gbChar{position:absolute;left:0;top:0;width:200px;height:300px;transform-origin:0 0;pointer-events:none;z-index:9000;will-change:transform}
#gbChar .gbIn{position:absolute;inset:0;transform-origin:100px 227px;will-change:transform}
#gbChar svg{width:100%;height:100%;overflow:visible;display:block}
#gbChar .ln{fill:none;stroke:var(--gb-line);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
#gbChar .seg{fill:none;stroke:var(--gb-line);stroke-width:3.4;stroke-linecap:round}
#gbChar .hl{fill:none;stroke:#fff;stroke-opacity:.34;stroke-width:1.1;stroke-linecap:round}
#gbChar .jt{fill:var(--gb-line)}
#gbChar .hand{stroke:var(--gb-line);stroke-width:2.4}
#gbChar .fing{fill:none;stroke:var(--gb-line);stroke-width:2.4;stroke-linecap:round}
#gbChar .shade{opacity:var(--t,1)}
#gbChar .rim{fill:none;stroke:#7a0017;stroke-opacity:.35;stroke-width:1.6}
#gbChar .gsh{fill:#000;fill-opacity:.22;opacity:var(--t,1)}
#gbChar .pup{transform:translate(var(--lx,0px),var(--ly,0px));transition:transform .09s linear}
#gbChar .feat{fill:none;stroke:#1a1a1a;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
#gbChar .eye{transform-box:fill-box;transform-origin:center;animation:gbBlink 4.8s infinite}
@keyframes gbBlink{0%,93%,100%{transform:scaleY(1)}96%{transform:scaleY(.06)}}
#gbChar .arms,#gbChar .legs{opacity:var(--g,1)}
#gbChar .grow{transform:scale(var(--g,1))}
#gbChar .face{opacity:var(--f,1)}
#gbChar .lg{transform:translate(calc((1 - var(--t,1))*var(--dx,0px)),calc((1 - var(--t,1))*var(--dy,0px))) scale(calc(1 + (1 - var(--t,1))*var(--s,0)))}
#gbChar .gl{transform:translate(0,calc(var(--f,1)*var(--gy,0px))) scale(calc(1 - var(--gs,0)*var(--f,1)))}
#gbChar .pose,#gbChar .fore,#gbChar .prop,#gbChar .lean{transition:transform .9s cubic-bezier(.3,1.2,.5,1)}
#gbChar .pp{opacity:0;transition:opacity .4s}
#gbChar .pp.on{opacity:1}

/* --- Globito estilo cómic (siempre al costado de la cabeza, nunca encima de un texto) --- */
#gbBubble{position:absolute;left:0;top:0;z-index:9001;will-change:transform;max-width:236px;background:#fff;color:#1a1a1a;
  border:3px solid #1a1a1a;border-radius:30px 34px 28px 36px / 26px 24px 30px 28px;padding:9px 16px 10px;text-align:center;
  font:800 12.5px/1.2 'DM Sans',system-ui,sans-serif;text-transform:uppercase;letter-spacing:.03em;
  box-shadow:3px 4px 0 #1a1a1a;opacity:0;transition:opacity .16s;pointer-events:none;rotate:-1.5deg}
#gbBubble.on{opacity:1}
#gbBubble.pop{animation:gbPop .42s cubic-bezier(.2,1.6,.4,1)}
@keyframes gbPop{0%{scale:.4;rotate:-8deg}60%{scale:1.1;rotate:1deg}100%{scale:1;rotate:-1.5deg}}
/* cola de cómic: triángulo con borde (negro atrás, blanco adelante, la base entra en el globo) */
#gbBubble::before,#gbBubble::after{content:"";position:absolute;top:calc(50% - 7px);width:0;height:0;border-style:solid}
#gbBubble.tl::before{left:-25px;border-width:9px 27px 9px 0;border-color:transparent #1a1a1a transparent transparent}
#gbBubble.tl::after{left:-17px;border-width:5px 22px 5px 0;border-color:transparent #fff transparent transparent;top:calc(50% - 5px)}
#gbBubble.tr::before{right:-25px;border-width:9px 0 9px 27px;border-color:transparent transparent transparent #1a1a1a}
#gbBubble.tr::after{right:-17px;border-width:5px 0 5px 22px;border-color:transparent transparent transparent #fff;top:calc(50% - 5px)}
@media (max-width:768px){ #gbBubble{box-sizing:border-box;max-width:180px;font-size:11px;letter-spacing:.015em;padding:9px 16px 10px;overflow-wrap:normal;word-break:normal} }

/* --- Efectos al tocar (no mueven el elemento: el personaje está parado encima) --- */
@keyframes gbGlow{0%{box-shadow:0 0 0 0 rgba(209,51,29,0)}35%{box-shadow:0 0 0 4px rgba(209,51,29,.55),0 14px 30px rgba(209,51,29,.22)}100%{box-shadow:0 0 0 2px rgba(209,51,29,.35),0 10px 24px rgba(209,51,29,.14)}}
@keyframes gbRipple{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.25,1.8);opacity:0}}
@keyframes gbPulse{0%,100%{transform:none}40%{transform:scale(1.18)}}
@keyframes gbNum{0%,100%{transform:none}45%{transform:scale(1.08)}}
html.gb-on .hv-service.gb-touched,html.gb-on .hv-testimonio-card.gb-touched{animation:gbGlow .9s ease-out forwards}
html.gb-on .hv-team-teaser-photos a.gb-touched{animation:gbGlow .9s ease-out forwards;border-radius:50%}
html.gb-on .hv-team-teaser-photos a.gb-touched::before{opacity:1;inset:-9px}
html.gb-on .hv-btn-primary.gb-touched,html.gb-on .hv-btn-big.gb-touched{animation:gbGlow .9s ease-out forwards;position:relative}
html.gb-on .hv-btn-primary.gb-touched::after,html.gb-on .hv-btn-big.gb-touched::after{content:"";position:absolute;inset:0;border-radius:inherit;border:2px solid #d1331d;animation:gbRipple .9s ease-out;pointer-events:none}
html.gb-on .hv-stat.gb-touched .hv-stat-n{display:inline-block;animation:gbNum .8s}
html.gb-on .wa_btn i.gb-touched{animation:gbPulse .8s 3}

@media (prefers-reduced-motion:reduce){ #gbChar,#gbBubble{display:none} }

/* lupa: aro y vidrio arriba de la cara; ojos que se agrandan / entrecierran */
#gbChar .lens{opacity:0;transition:opacity .2s}
#gbChar .lens.on{opacity:1;transition:none}
#gbChar .eM{transition:transform .35s cubic-bezier(.3,1.4,.5,1)}
#gbChar .ky{animation:gbKey 2.4s ease-in-out infinite}
@keyframes gbKey{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}
#gbBubble .gbT1,#gbBubble .gbT2{display:block}
#gbBubble .gbT1:not(:last-child){font-size:17px;line-height:1.1;letter-spacing:.04em;color:#d1331d;margin-bottom:3px}
#gbChar .lensP.hide{opacity:0}
/* signos de exclamación / interrogación con un puntito de aire respecto de la palabra */
#gbBubble .gbX{display:inline;white-space:nowrap}
#gbBubble .gbXo{margin-right:.2em}
#gbBubble .gbXc{margin-left:.2em}

/* celu: más aire entre las tarjetas apiladas para que Beni se pare en cada una sin tapar el texto de la de arriba */
@media (max-width:768px){
  html.gb-on .hv-services-grid{ row-gap:88px; }
  #gbBubble .gbT1:not(:last-child){ font-size:14px; }
}


/* silla de espera (solo en el saludo del inicio) */
#gbChar .chair{opacity:0;transform:translateX(30px) scale(.7);transition:transform .45s ease-in,opacity .45s ease}
#gbChar .chair.on{opacity:1;transform:none;transition:transform 1.2s cubic-bezier(.22,.85,.3,1),opacity .8s ease}

/* sentarse tarda ~5 s: las piernas se doblan junto con el cuerpo que baja */
#gbChar svg.sitslow [data-j="lL"],#gbChar svg.sitslow [data-j="lR"],#gbChar svg.sitslow [data-j="lLf"],#gbChar svg.sitslow [data-j="lRf"]{transition:transform 2.3s cubic-bezier(.45,.05,.4,1)}

/* Beni colgado del botón "Pedí tu tasación" del header (solo compu): el botón deja de "respirar" y late con un aro rojo mientras Beni lo señala */
@keyframes gbHangRing{0%{box-shadow:0 0 0 0 rgba(209,51,29,.6)}75%,100%{box-shadow:0 0 0 15px rgba(209,51,29,0)}}
html.gb-on .bnr-nav a.bnr-cta-header.gb-hang{animation:gbHangRing 1.15s ease-out infinite;transform:scale(1.05)}

/* globo arriba de la cabeza: cola hacia abajo */
#gbBubble.tn::before{top:auto;bottom:-25px;left:calc(50% - 10px);border-width:27px 10px 0 10px;border-color:#1a1a1a transparent transparent transparent}
#gbBubble.tn::after{top:auto;bottom:-17px;left:calc(50% - 6px);border-width:22px 6px 0 6px;border-color:#fff transparent transparent transparent}
#gbBubble.tn .gbT1:only-child{color:#d1331d;font-size:15px;letter-spacing:.04em}