/* Base para todos los botones flotantes */
.float-btn {
  position: fixed;
  right: 15px;            /* separa del borde derecho */
  width: 55px;
  height: 55px;
  border-radius: 50%;
  color: #fff;
  font-size: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 2px 2px 8px rgba(0,0,0,.25);
  z-index: 100;
  cursor: pointer;
  text-decoration: none;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
  animation: pulse 2s infinite; /* latido */
}
.float-btn, .float-btn:hover { text-decoration: none !important; }

/* Ubicaciones (apilados con 70px de separación) */
.float-whatsapp  { bottom: 230px; }
.float-instagram { bottom: 160px; }
.float-tiktok    { bottom: 300px; } /* arriba de WhatsApp */

/* Estilos de marca */
.float-whatsapp {
  background: #25D366;
}
.float-whatsapp:hover {
  color: #25D366;
  background: #fff;
  transform: scale(1.08) rotate(8deg);
  box-shadow: 4px 4px 12px rgba(0,0,0,.35);
}

/* Instagram: gradiente típico */
.float-instagram {
  background: radial-gradient(circle at 30% 107%, 
    #fdf497 0%, 
    #fdf497 5%, 
    #fd5949 45%, 
    #d6249f 60%, 
    #285AEB 90%);
}
.float-instagram:hover {
  filter: brightness(1.05);
  transform: scale(1.08);
  box-shadow: 4px 4px 12px rgba(0,0,0,.35);
}

/* TikTok con SVG oficial (blanco por defecto) */
.float-tiktok {
  background: #000;       /* fondo negro */
  border: 2px solid #111; /* borde sutil */
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.float-tiktok svg {
  width: 26px;
  height: 26px;
  fill: #fff;               /* logo blanco */
  transition: filter .25s ease, transform .25s ease;
}

/* Hover TikTok con colores originales (cian y fucsia) */
.float-tiktok:hover {
  transform: scale(1.08);
  box-shadow:
    0 0 10px rgba(0,242,234,.30),   /* glow cian suave */
    0 0 18px rgba(255,0,80,.25),    /* glow fucsia suave */
    4px 4px 12px rgba(0,0,0,.35);
}
/* Desfase bicolor estilo logo oficial */
.float-tiktok:hover svg {
  /* dos sombras con desplazamientos opuestos para simular el “doble trazo” */
  filter:
    drop-shadow(2px 0 0 rgba(0,242,234,0.95))  /* cian a la derecha */
    drop-shadow(-2px 0 0 rgba(255,0,80,0.95))  /* fucsia a la izquierda */
    drop-shadow(0 0 6px rgba(0,242,234,0.45))  /* glow extra cian */
    drop-shadow(0 0 6px rgba(255,0,80,0.40));  /* glow extra fucsia */
}

/* Animación latido compartida */
@keyframes pulse {
  0%   { transform: scale(1);   box-shadow: 0 0 0 0 rgba(0,0,0,0.15); }
  70%  { transform: scale(1.05); box-shadow: 0 0 0 15px rgba(0,0,0,0); }
  100% { transform: scale(1);   box-shadow: 0 0 0 0 rgba(0,0,0,0); }
}

/* Responsive: acerca un poco a los bordes y baja tamaño en móviles */
@media (max-width: 480px) {
  .float-btn {
    right: 12px;
    width: 50px;
    height: 50px;
    font-size: 24px;
  }
  .float-tiktok    { bottom: 250px; }
  .float-whatsapp  { bottom: 185px; }
  .float-instagram { bottom: 120px; }
}
/* Base (ya la tienes, pero aseguramos sin subrayado) */
.float-btn,
.float-btn:hover { text-decoration: none !important; }

/* Ubicación (apila junto a los otros) */
.float-facebook { bottom: 160px; }

/* Facebook: look pro con borde y cambio de color en hover */
.float-facebook {
  background: #1877F2;
  border: 2px solid #1877F2;
  color: #fff; /* por compatibilidad, aunque usamos SVG */
}
.float-facebook svg {
  width: 26px;
  height: 26px;
  fill: #fff;
  display: block;            /* evita artefactos de baseline */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.float-facebook:hover {
  background: #fff;
  color: #1877F2;            /* por consistencia */
  transform: scale(1.08);
  box-shadow: 4px 4px 12px rgba(0,0,0,.35);
}
.float-facebook:hover svg { fill: #1877F2; }

/* Accesibilidad: foco bonito en teclado */
.float-btn:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px rgba(24,119,242,.35),
    2px 2px 8px rgba(0,0,0,.25);
}

/* Móvil: posiciones */
@media (max-width: 480px) {
  .float-btn {
    right: 12px;
    width: 50px;
    height: 50px;
    font-size: 24px;
  }
  .float-facebook { bottom: 120px; }
}







/* Oculta flotantes grandes en pantallas pequeñas y cuando haya drawer */
@media (max-width: 1200px){
  .float-btn{ display:none !important; }
}
.has-social-drawer .float-btn{
  /* fallback por si alguna hoja carga después o hay cache */
  display:none !important;
}

/* ===== Drawer lateral (más delgado) ===== */
.social-drawer{
  --tab-width:   29px;   /* ancho pestaña */
  --panel-width: 60px;   /* ancho panel más delgado */
  position: fixed;
  right: 0; top: 45%;
  transform: translateY(-50%);
  z-index: 110;
  display: none;
}
@media (max-width: 991.98px){ .social-drawer{ display:block; } }

/* Pestaña vertical (texto vertical legible) */
.social-drawer__tab{
  position:absolute; right:0; top:-50px;
  width:var(--tab-width); height:185px;
  background:#0f172a; color:#e2e8f0;
  border:1px solid rgba(255,255,255,.12); border-right:none;
  border-radius:10px 0 0 10px;
  cursor:pointer; box-shadow:0 4px 12px rgba(0,0,0,.25);
  display:flex; align-items:center; justify-content:center; gap:6px;
  padding:8px 0; transition:background .2s ease, transform .2s ease;
  writing-mode: vertical-rl; text-orientation: mixed;
}
.social-drawer__tab .label{ transform:rotate(180deg); font-weight:600; letter-spacing:.08em; }
.social-drawer__tab i{ font-size:18px; }
.social-drawer__tab:hover{ transform:translateX(-2px); background:#111827; }

/* Panel: oculto por defecto (no se ve nada de iconos) */
.social-drawer__panel{
  position:absolute;
  right:var(--tab-width); top:-40px;
  width:var(--panel-width);
  padding:10px 8px;
  display:flex; flex-direction:column; gap:10px;
  background:rgba(15,23,42,.88);
  border:1px solid rgba(255,255,255,.08); border-right:none;
  border-radius:12px 0 0 12px;
  box-shadow:0 8px 20px rgba(0,0,0,.25);
  backdrop-filter: blur(6px);

  transform: translateX(200%);          /* 100% escondido */
  transition: transform .3s ease;
}
.social-drawer.open .social-drawer__panel{
  transform: translateX(0);              /* aparece completo, sin exagerar */
}

/* Botones mini (más compactos) */
.btn-social-mini{
  width:40px; height:40px;
  border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  color:#fff; border:2px solid transparent;
  box-shadow:2px 2px 8px rgba(0,0,0,.25);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn-social-mini:hover{ transform:scale(1.06); box-shadow:4px 4px 12px rgba(0,0,0,.32); text-decoration:none; }
.btn-social-mini.tiktok   { background:#000;    border-color:#111; }
.btn-social-mini.whatsapp { background:#25D366; }
.btn-social-mini.facebook { background:#1877F2; }
.btn-social-mini svg      { display:block; }
.btn-social-mini.whatsapp i{ font-size:18px; }

.social-drawer__tab:focus-visible, .btn-social-mini:focus-visible{
  outline:none; box-shadow:0 0 0 3px rgba(59,130,246,.45), 2px 2px 8px rgba(0,0,0,.25);
}