:root{
  --bar-h: 92px;
  --text: #0f172a;
  --line:#e2e8f0;
  --soft:#e8f5e9;
  --primary:#00c853;
  --primary-600:#00b24a;
  --primary-700:#009624;

  /* Floating buttons */
  --fab-right: 18px;
  --fab-gap: 14px;
  --fab-size: 58px;
  --fab-pill: 220px;
}

/* ===== NAVBAR ===== */
.topbar{
  position: sticky; top:0; left:0; right:0;
  z-index: 9999;
  background: linear-gradient(135deg, #e8f5e9 0%, #f1faf4 100%);
  border-bottom: 1px solid rgba(0,0,0,0.05);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 4px 18px rgba(0,0,0,0.06);
}
.topbar__container{
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 28px;
  height: var(--bar-h);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: 28px;
}
.topbar__brand{ display:inline-flex; align-items:center; gap:12px; text-decoration:none; padding-left:4px; }
.topbar__logo{ height:56px; width:auto; display:block; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.08)); }

.topbar__nav{ display:flex; align-items:center; gap:22px; }
.topbar__menu{ list-style:none; display:flex; align-items:center; gap:18px; }
.topbar__menu > li > a{
  position:relative; display:inline-block; text-decoration:none; color:var(--text);
  font-weight:700; padding:14px 10px; border-radius:10px; transition: color .2s, background .2s;
}
.topbar__menu > li > a::after{
  content:""; position:absolute; left:10px; right:10px; bottom:8px; height:3px; border-radius:3px;
  background: var(--primary); transform: scaleX(0); transform-origin:left; transition: transform .24s ease;
}
.topbar__menu > li > a:hover{ color:#064e3b; background: var(--soft); }
.topbar__menu > li > a:hover::after, .topbar__menu > li > a.is-active::after{ transform: scaleX(1); }

.has-submenu{ position: relative; }
.has-submenu::after{ content:""; position:absolute; left:0; right:0; top:100%; height:12px; }
.has-submenu .submenu{
  position:absolute; top:100%; left:0; margin-top:8px; display:none; z-index:10000;
  background: linear-gradient(135deg, #e8f5e9 0%, #f1faf4 100%);
  border:1px solid rgba(255,255,255,0.12); border-radius:12px; box-shadow:0 16px 40px rgba(0,0,0,.18);
  padding:8px; min-width:230px;
}
.has-submenu:hover .submenu, .has-submenu:focus-within .submenu{ display:block; }
.submenu li{ list-style:none; }
.submenu a{ display:block; padding:10px 12px; border-radius:10px; color:#000; text-decoration:none; font-weight:600; white-space:nowrap; }
.submenu a:hover{ background: rgba(30,241,58,0.18); }

.topbar__actions{ display:flex; align-items:center; gap:12px; }
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  height:46px; padding:0 18px; border-radius:12px; font-weight:800; letter-spacing:.2px;
  text-decoration:none; border:1px solid transparent; transition: background .2s, border-color .2s, transform .04s, box-shadow .2s;
  box-shadow: 0 4px 14px rgba(0,200,83,.08);
}
.btn:active{ transform: translateY(1px); }
.btn--outline{ color: var(--primary); border-color: var(--primary); background:#fff; }
.btn--outline:hover{ background: rgba(0,200,83,.10); box-shadow: 0 6px 18px rgba(0,200,83,.14); }

/* Hamburguesa */
.topbar__hamburger{
  display:none; margin-left:auto; width:46px; height:46px; border:1px solid var(--line);
  border-radius:12px; background:#fff; align-items:center; justify-content:center; cursor:pointer;
}
.topbar__hamburger span{ display:block; width:22px; height:2px; background:#111; }
.topbar__hamburger span + span{ margin-top:6px; }

/* Saludo user */
.saludo-usuario{
  position: fixed; top: 10px; right: 10px;
  background-color: rgba(0, 200, 83, 0.9); color: white;
  padding: 6px 12px; border-radius: 20px; font-size: 14px; z-index: 9999;
}

/* Responsive navbar */
@media (max-width: 1100px){
  .topbar__container{ column-gap: 18px; }
  .topbar__logo{ height: 52px; }
}
@media (max-width: 980px){
  .topbar__hamburger{ display:flex; position: relative; z-index: 10001; }
  .topbar__nav{
    position: fixed; top: var(--bar-h); left:0; right:0; background:#fff; border-bottom:1px solid var(--line);
    flex-direction: column; align-items: stretch; gap:0; display:none; z-index:10000;
  }
  .topbar__nav.is-open{ display:flex; }
  .has-submenu .submenu{ position: static; margin-top:6px; background:transparent; border:none; box-shadow:none; display:none; padding:0; }
  .has-submenu.is-open .submenu{ display:block; }
  .topbar__menu{ flex-direction: column; gap:0; }
  .topbar__menu > li > a::after{ display:none; }
}

/* ===== BOTONES FLOTANTES ===== */

/* WhatsApp */
.wapp-float{
  position: fixed; right: var(--fab-right); bottom: 16px;
  width: var(--fab-size); height: var(--fab-size);
  border-radius: 50%; background:#25D366; color:#fff;
  display:inline-flex; align-items:center; justify-content:center;
  font-size: 28px; text-decoration:none; box-shadow: 0 10px 30px rgba(0,0,0,.20);
  z-index: 9998; overflow:hidden;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease, width .25s ease;
  animation: wappPulse 2.8s ease-out infinite;
}
.wapp-label{ max-width:0; opacity:0; white-space:nowrap; margin-left:0; font-size:14px; font-weight:700; transition: max-width .25s ease, opacity .18s ease, margin-left .18s ease; }
@media (hover:hover){
  .wapp-float:hover{
    width: var(--fab-pill); border-radius: 999px;
    transform: translateY(-2px); box-shadow: 0 14px 38px rgba(0,0,0,.24);
    justify-content:flex-start; padding-left:16px;
  }
  .wapp-float:hover .wapp-label{ max-width:160px; opacity:1; margin-left:10px; }
}
@keyframes wappPulse{0%{box-shadow:0 0 0 0 rgba(37,211,102,.35)}70%{box-shadow:0 0 0 16px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}

/* Instagram */
.insta-float{
  position: fixed; right: var(--fab-right);
  bottom: calc(16px + var(--fab-size) + var(--fab-gap));
  background:#E1306C; color:#fff; width: var(--fab-size); height: var(--fab-size);
  border-radius: 50%; display:inline-flex; align-items:center; justify-content:center;
  font-size: 26px; text-decoration:none; box-shadow: 0 6px 18px rgba(0,0,0,.25); z-index: 9998; overflow:hidden;
  transition: all .25s ease;
}
.insta-label{ overflow:hidden; max-width:0; opacity:0; white-space:nowrap; margin-left:0; font-size:13px; font-weight:700; transition: max-width .25s ease, opacity .18s ease, margin-left .18s ease; }
@media (hover:hover){
  .insta-float:hover{
    width: var(--fab-pill); border-radius:999px;
    justify-content:flex-start; padding-left:16px;
  }
  .insta-float:hover .insta-label{ max-width:160px; opacity:1; margin-left:10px; }
}

/* Facebook */
.fb-float{
  position: fixed; right: var(--fab-right);
  bottom: calc(16px + (var(--fab-size) + var(--fab-gap)) * 2);
  background:#1877f2; color:#fff; width: var(--fab-size); height: var(--fab-size);
  border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  font-size:24px; text-decoration:none; box-shadow:0 6px 16px rgba(0,0,0,.25);
  z-index: 9998; overflow:hidden;
  transition: transform .2s ease, box-shadow .2s ease, width .25s ease, background .25s ease;
}
.fb-float .fb-label{
  display: inline-block !important;
  overflow:hidden; max-width:0; opacity:0; white-space:nowrap;
  margin-left:0; font-size:14px; font-weight:700;
  transition: max-width .25s ease, opacity .18s ease, margin-left .18s ease;
}
@media (hover:hover){
  .fb-float:hover{
    width: var(--fab-pill); border-radius:999px;
    justify-content:flex-start; padding-left:16px;
    transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0,0,0,.3);
  }
  .fb-float:hover .fb-label{ max-width:160px; opacity:1; margin-left:10px; }
}

/* ===== MOBILE TUNING ===== */
@media (max-width: 768px){
  :root{ --fab-right: 14px; --fab-gap: 12px; --fab-size: 54px; --bar-h: 70px; }
  .topbar__container{ padding:0 16px; height: var(--bar-h); }
  .topbar__logo{ height: 44px; }
  .saludo-usuario{ display:none !important; }
  .wapp-float, .insta-float, .fb-float{ width:50px; height:50px; font-size:22px; right:12px; }
  /* Ocultar labels solo en móviles sin hover */
  .insta-label, .fb-label{ display:none !important; }
}