/* Franja fija de prueba social (barra de reseñas al fondo). Copiada
   tal cual de index.html — aparece 2s después de cargar, se pausa al
   pasar el mouse, y desaparece sola al llegar a la sección de
   reseñas o si se cierra a mano.

   Único cambio a pedido del dueño: el "adiós" ya no es solo un
   deslizarse hacia abajo (pasaba casi desapercibido) — ahora primero
   da un pequeño salto hacia arriba con un brillo verde de la marca,
   y AHÍ SÍ se desliza y se desvanece. Nada estridente, solo lo
   justo para notar que se fue porque ya llegaste a las reseñas. */
#franja{position:fixed;left:0;right:0;bottom:0;z-index:55;background:rgba(255,255,255,.88);-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);border-top:1.5px solid var(--borde);box-shadow:0 -10px 34px rgba(30,43,39,.09);display:flex;align-items:center;gap:16px;padding:0 14px 0 20px;height:122px;transform:translateY(110%);transition:transform .5s cubic-bezier(.2,.8,.25,1),opacity .4s;}
#franja.on{transform:none;}
#franja.off{animation:franja_despedida .6s cubic-bezier(.4,0,.2,1) forwards;transition:none;pointer-events:none;}
@keyframes franja_despedida{
  0%{transform:translateY(0) scale(1);opacity:1;box-shadow:0 -10px 34px rgba(30,43,39,.09);}
  35%{transform:translateY(-10px) scale(1.015);opacity:1;box-shadow:0 -20px 48px rgba(0,165,149,.3);}
  100%{transform:translateY(110%) scale(.97);opacity:0;box-shadow:0 -10px 34px rgba(30,43,39,.09);}
}
#franja .sello{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;flex-shrink:0;padding-right:20px;border-right:1.5px solid var(--borde);min-width:104px;}
#franja .sello .num{font-family:'Poppins';font-weight:800;font-size:34px;line-height:1;color:var(--tinta);letter-spacing:-1px;}
#franja .sello .det{line-height:1.2;text-align:center;}
#franja .sello .est{color:var(--cta);font-size:13px;letter-spacing:2px;}
#franja .sello .cant{font-size:11px;color:var(--tinta-suave);font-family:'Poppins';font-weight:600;text-align:center;}
#franja .rio{flex:1;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 3%,#000 95%,transparent);}
#franja .pista{display:flex;width:max-content;animation:franja_corre 86s linear infinite;}
#franja:hover .pista{animation-play-state:paused;}
@keyframes franja_corre{to{transform:translateX(-50%);}}
#franja .res{display:flex;align-items:center;gap:13px;padding:0 26px 0 13px;position:relative;}
#franja .res::after{content:"";position:absolute;right:0;top:50%;transform:translateY(-50%);width:1.5px;height:64px;background:var(--borde);}
#franja .res img{width:52px;height:52px;object-fit:contain;flex-shrink:0;}
#franja .res .cuerpo{display:flex;flex-direction:column;line-height:1.3;gap:3px;padding:0;}
#franja .res .arriba{display:flex;align-items:center;gap:8px;}
#franja .res b{font-family:'Poppins';font-weight:700;font-size:13px;}
#franja .res .mini-est{color:var(--cta);font-size:10.5px;letter-spacing:1px;}
#franja .res .verif{display:inline-flex;align-items:center;gap:3px;font-family:'Poppins';font-weight:700;font-size:9px;color:var(--resalte);background:rgba(0,165,149,.1);border-radius:999px;padding:2px 8px;}
#franja .res .verif .icn{stroke:var(--resalte);}
#franja .res .txt{font-size:12.5px;color:var(--tinta-suave);width:330px;white-space:normal;display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;line-height:1.4;}
#franja .res .lugar{font-family:'Poppins';font-weight:600;font-size:10.5px;color:var(--tinta-suave);opacity:.8;}
@media(max-width:820px){
  /* Altura moderada: la original (92px) dejaba demasiado aire arriba
     y abajo del contenido (que mide ~50px, el alto de la foto). Con
     76px queda con respiro real (13px por lado) sin apretar. */
  #franja{height:76px;padding:0 10px 0 13px;gap:12px;}
  #franja .sello{flex-direction:column;gap:2px;min-width:0;padding-right:12px;}
  #franja .sello .num{font-size:26px;}
  #franja .sello .cant{display:none;}
  #franja .sello .est{font-size:13px;letter-spacing:1px;}
  #franja .res{padding:0 16px 0 11px;gap:11px;}
  #franja .res::after{height:42px;}
  #franja .res img{width:50px;height:50px;}
  #franja .res .cuerpo{gap:3px;}
  #franja .res b{font-size:15px;}
  #franja .res .verif{display:none;}
  #franja .res .lugar{display:none;}
  #franja .res .txt{width:auto;max-width:54vw;font-size:14px;white-space:nowrap;display:block;-webkit-line-clamp:unset;line-clamp:unset;text-overflow:ellipsis;overflow:hidden;line-height:1.35;}
  body.tiene-franja{padding-bottom:calc(76px + var(--lc-barra-h));}
}

/* ================================================================
   ≤900px: la franja convive con la barra inferior de navegación
   (.lc-barra, en nav-movil.css) — mismo breakpoint que esa barra.
   Sube para no quedar tapada por ella: su "bottom" usa --lc-barra-h,
   que es el alto REAL de la barra medido por JS (nav-movil.js), no
   un número fijo adivinado — así libra la barra completa sin importar
   el celular.

   El WhatsApp flotante y la burbuja del -15% se coordinan aquí con
   la MISMA clase que prende y apaga la franja (body.tiene-franja):
   descansan justo encima de la barra, y cuando la franja aparece
   suben a quedar justo encima de ELLA en vez de la barra.
   ================================================================ */
@media(max-width:900px){
  #franja{
    bottom:var(--lc-barra-h);
  }
  body.tiene-franja{padding-bottom:calc(122px + var(--lc-barra-h));}

  .wa-flotante,
  .lc-burb15{
    bottom:calc(var(--lc-barra-h) + 12px);
  }
  body.tiene-franja .wa-flotante,
  body.tiene-franja .lc-burb15{
    bottom:calc(var(--lc-barra-h) + 76px + 12px);
  }
}

/* Escritorio: el WhatsApp flotante y el popup de registro suben para
   no encimarse con la franja, y el body gana un respiro abajo para
   que el footer no quede tapado. En móvil esto lo maneja el bloque
   de arriba (coordinado con la barra inferior en vez de esto). */
@media(min-width:901px){
  body.tiene-franja{padding-bottom:122px;}
  body.tiene-franja .wa-flotante{bottom:138px;}
  body.tiene-franja .mini-reg{bottom:138px;}
}