/* ============================================
   ER CREATIVE TEAM — SHARED CSS v3
   ============================================ */

/* ── CURSOR (mouse devices only) ── */
@media (pointer: fine) {
  body { cursor: none; }
  .cursor, .cursor-f { display: block; }
}
@media (pointer: coarse) {
  body { cursor: auto; }
  .cursor, .cursor-f { display: none !important; }
}

.cursor {
  width: 10px; height: 10px;
  background: var(--er-red, #E8292A);
  border-radius: 50%;
  position: fixed; top: 0; left: 0;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition: width .25s, height .25s;
}
.cursor-f {
  width: 34px; height: 34px;
  border: 1px solid rgba(232,41,42,.4);
  border-radius: 50%;
  position: fixed; top: 0; left: 0;
  pointer-events: none;
  z-index: 9998;
  transform: translate(-50%, -50%);
  transition: transform .4s cubic-bezier(.23,1,.32,1), width .3s, height .3s;
}

/* ── NAV ── */
nav#mainNav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 100;
  background: rgba(0,0,0,.88);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(255,255,255,.06);
  transition: background .3s;
}
.nav-inner {
  max-width: 1200px; margin: 0 auto;
  padding: 0 24px; height: 52px;
  display: flex; align-items: center; justify-content: space-between;
}
.nav-logo {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 22px; letter-spacing: 3px;
  color: #f5f5f7; text-decoration: none;
  flex-shrink: 0;
}
.nav-logo span { color: #E8292A; }

.nav-links {
  display: flex; gap: 24px; list-style: none; align-items: center;
}
.nav-links a {
  color: #aeaeb2; text-decoration: none;
  font-size: 13px; transition: color .2s;
  white-space: nowrap;
}
.nav-links a:hover,
.nav-links a.active { color: #f5f5f7; }
.nav-links .nav-cta {
  background: #E8292A !important; color: #fff !important;
  padding: 7px 18px; border-radius: 980px;
  font-size: 13px !important; font-weight: 500 !important;
  transition: background .2s, transform .2s !important;
}
.nav-links .nav-cta:hover {
  background: #c41e20 !important; transform: scale(1.04) !important;
}

/* ── HAMBURGER BUTTON ── */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px; height: 44px;
  background: none; border: none;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  /* critical for mobile tap */
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  position: relative;
  z-index: 200;
}
.nav-hamburger span {
  display: block;
  width: 22px; height: 2px;
  background: #f5f5f7;
  border-radius: 2px;
  transition: transform .35s ease, opacity .35s ease;
  pointer-events: none;
}
.nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── MOBILE DRAWER ── */
.nav-drawer {
  /* sits below nav bar, covers full screen */
  position: fixed;
  top: 52px; left: 0; right: 0; bottom: 0;
  z-index: 99;           /* below nav(100) hamburger(200) but above page */
  background: rgba(0,0,0,.97);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  display: flex;
  flex-direction: column;
  padding: 32px 32px 48px;
  gap: 4px;
  overflow-y: auto;
  /* hidden off-screen to the right by default */
  transform: translateX(100%);
  transition: transform .38s cubic-bezier(.23,1,.32,1);
  /* allow touch scrolling inside */
  -webkit-overflow-scrolling: touch;
}
.nav-drawer.open {
  transform: translateX(0);
}
.nav-drawer a {
  display: block;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 42px;
  letter-spacing: 2px;
  color: #6e6e73;
  text-decoration: none;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
  transition: color .2s;
  /* large touch target */
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.nav-drawer a:last-child { border-bottom: none; }
.nav-drawer a:hover,
.nav-drawer a.active { color: #f5f5f7; }
.nav-drawer .drawer-cta {
  margin-top: 24px;
  background: #25D366 !important;
  color: #fff !important;
  padding: 16px 24px;
  border-radius: 14px;
  text-align: center;
  font-size: 20px !important;
  border-bottom: none !important;
  letter-spacing: 1px;
}
.nav-drawer .drawer-cta:hover {
  background: #1da851 !important;
}

/* show hamburger only on narrow screens */
@media (max-width: 900px) {
  .nav-links  { display: none; }
  .nav-hamburger { display: flex; }
}

/* ── REVEAL ANIMATIONS ── */
.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity .8s cubic-bezier(.23,1,.32,1),
              transform .8s cubic-bezier(.23,1,.32,1);
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.rd1 { transition-delay: .1s; }
.rd2 { transition-delay: .2s; }
.rd3 { transition-delay: .3s; }
.rd4 { transition-delay: .4s; }

/* ── FLOAT WHATSAPP ── */
.float-wa {
  position: fixed; bottom: 32px; right: 32px;
  z-index: 98;
  background: #25D366;
  width: 54px; height: 54px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 24px rgba(37,211,102,.4);
  text-decoration: none;
  transition: transform .3s;
  animation: pulseGreen 3s infinite;
  -webkit-tap-highlight-color: transparent;
}
.float-wa:hover { transform: scale(1.1); animation: none; }
.float-wa svg { width: 26px; height: 26px; fill: #fff; }

/* ── KEYFRAMES ── */
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes floatOrb { 0%,100%{transform:translate(0,0) scale(1)} 33%{transform:translate(25px,-15px) scale(1.04)} 66%{transform:translate(-15px,25px) scale(.97)} }
@keyframes pulseGreen { 0%,100%{box-shadow:0 0 0 0 rgba(37,211,102,.4)} 50%{box-shadow:0 0 0 14px rgba(37,211,102,0)} }
@keyframes pulsePop { 0%,100%{box-shadow:0 0 0 0 rgba(232,41,42,.4)} 50%{box-shadow:0 0 0 8px rgba(232,41,42,0)} }
@keyframes scrollPulse { 0%,100%{opacity:1} 50%{opacity:.2} }
@keyframes spinRing { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
@keyframes fadeUp { to{opacity:1;transform:translateY(0)} }
@keyframes fadeIn { to{opacity:1} }