/* Micro animaciones suaves y elegantes */

.fw-extrabold{ font-weight: 950; }

@keyframes floaty {
  0% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
  100% { transform: translateY(0); }
}

@keyframes shimmer {
  0% { transform: translateX(-120%); opacity: .0; }
  20% { opacity: .35; }
  100% { transform: translateX(140%); opacity: .0; }
}

/* brillo dinámico en botones */
.btn-glow{
  position:relative;
  overflow:hidden;
}
.btn-glow::before{
  content:"";
  position:absolute;
  top:-40%;
  left:-60%;
  width: 60%;
  height: 180%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  transform: skewX(-18deg);
  animation: shimmer 2.6s infinite;
}

/* tarjetas con “flotación” sutil en desktop */
@media (min-width: 992px){
  .glass-card{ animation: floaty 6s ease-in-out infinite; }
}
/* Preloader */
.preloader{
  position:fixed; inset:0; z-index: 5000;
  background: radial-gradient(circle at 20% 20%, rgba(155,179,0,.10), rgba(12,59,60,.92));
  display:flex; align-items:center; justify-content:center;
  transition: opacity .35s ease, visibility .35s ease;
}
.preloader.hide{ opacity:0; visibility:hidden; }
.preloader-spin{
  width:54px; height:54px;
  border-radius: 0;
  border: 4px solid rgba(255,255,255,.18);
  border-top-color: rgba(155,179,0,1);
  animation: spin 1s linear infinite;
}
@keyframes spin{ to{ transform: rotate(360deg);} }

/* Botón subir */
.btn-top{
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 48px; height:48px;
  border-radius: 0;
  background: rgba(13,59,60,.92);
  border: 1px solid rgba(255,255,255,.16);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  text-decoration:none;
  transform: translateY(18px);
  opacity:0; pointer-events:none;
  transition: transform .2s ease, opacity .2s ease;
  z-index: 1200;
}
.btn-top.show{
  opacity:1; pointer-events:auto;
  transform: translateY(0);
}
.btn-top:hover{ transform: translateY(-3px); }

/* WhatsApp FAB */
.wa-fab{
  position: fixed;
  left: 18px;
  bottom: 18px;
  width: 54px; height:54px;
  border-radius: 0;
  background: #25D366;
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  text-decoration:none;
  box-shadow: 0 18px 45px rgba(0,0,0,.18);
  transition: transform .18s ease, box-shadow .18s ease;
  z-index: 1200;
}
.wa-fab:hover{
  transform: translateY(-4px);
  box-shadow: 0 26px 70px rgba(0,0,0,.22);
}

/* Topbar hide */
.topbar.topbar-hide{
  transform: translateY(-110%);
  transition: transform .22s ease;
}
.topbar{
  transition: transform .22s ease;
}
/* =========================
   RAIL COLOREADO (Monterrico)
   ========================= */

.rail.rail-colored{
  position: fixed;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1200;
  display: flex;
  flex-direction: column;
  gap: 0;                 /* pegados como bloques */
  width: 86px;            /* parecido a la imagen */
  border-radius: 0;
  overflow: hidden;
  box-shadow: 0 22px 60px rgba(0,0,0,.18);
  border: 1px solid rgba(0,0,0,.08);
}

/* Cada bloque */
.rail.rail-colored .rail-item{
  position: relative;
  height: 74px;
  width: 86px;
  border-radius: 0;       /* CUADRADO */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,.16);
  transition: transform .18s ease, filter .18s ease;
}

/* Hover: mueve de derecha a izquierda */
.rail.rail-colored .rail-item:hover{
  transform: translateX(-10px); /* igual que pediste */
  filter: brightness(1.05);
}

/* Icono y texto */
.rail-ico{
  font-size: 1.6rem;
  line-height: 1;
  margin-bottom: 6px;
  opacity: .95;
}

.rail-txt{
  font-weight: 800;
  font-size: .72rem;
  line-height: 1.05;
  text-align: center;
  letter-spacing: .2px;
  opacity: .95;
}

/* Badge DIGITAL */
.rail-badge{
  position: absolute;
  left: 50%;
  bottom: 6px;
  transform: translateX(-50%);
  background: rgba(255,255,255,.20);
  border: 1px solid rgba(255,255,255,.25);
  color: #fff;
  padding: 2px 7px;
  font-size: .62rem;
  font-weight: 900;
  border-radius: 10px;
}

/* EVA (bloque blanco con texto rojo) */
.rail-item.rail-white{
  background: #ffffff;
  color: #e10b0b;
  border-bottom: 1px solid rgba(0,0,0,.08);
}
.rail-item.rail-white .rail-txt{ opacity: 1; }
.eva-txt{
  font-size: 1.8rem;
  font-weight: 1000;
  letter-spacing: 1px;
}

/* Colores por bloque (ajusta si deseas) */
.rail-gray  { background:#5c5c5c; }
.rail-lime  { background:#8fb100; }
.rail-green { background:#0d7a5a; }
.rail-dark  { background:#073c4a; }
.rail-blue  { background:#1b63c7; }
.rail-cyan  { background:#0aa0d8; }
.rail-orange{ background:#d0712a; }
.rail-red   { background:#c81b2a; }

/* Tooltip (si ya tienes uno, esto no estorba; si no, te lo da) */
.rail.rail-colored .rail-item::after{
  content: attr(data-tip);
  position:absolute;
  right: 96px;
  white-space: nowrap;
  background: rgba(0,0,0,.75);
  color:#fff;
  padding: 8px 10px;
  border-radius: 10px;
  font-size: .82rem;
  opacity: 0;
  transform: translateX(6px);
  pointer-events:none;
  transition: opacity .16s ease, transform .16s ease;
}
.rail.rail-colored .rail-item:hover::after{
  opacity:1;
  transform: translateX(0);
}