/* =========================================================
   Sin Jaula · Menú "La jaula se abre"
   Arriba: barra verde con barras de jaula y una pluma dorada.
   Al bajar: la jaula se abre, la pluma sale volando y el menú
   se convierte en una cápsula flotante. En celular: barra
   inferior tipo app con "Mi opción" al centro.
   ========================================================= */
.sjn,.sjn-tabbar{--sjn-verde:#004037;--sjn-verde-2:#062E27;--sjn-oro:#E8A33D;--sjn-oro-2:#F6C76E;--sjn-papel:#FAFAF8;--sjn-ease:cubic-bezier(.2,.8,.2,1)}
.sjn{position:sticky;top:0;z-index:70;padding:0;transition:padding .45s var(--sjn-ease)}
.sjn *{box-sizing:border-box}
.sjn-bar{position:relative;overflow:hidden;display:flex;align-items:center;gap:22px;height:72px;margin:0 auto;padding:0 32px;color:#fff;
  background:radial-gradient(120% 160% at 0% 0%,rgba(232,163,61,.16) 0%,rgba(232,163,61,0) 42%),linear-gradient(135deg,#00483E 0%,var(--sjn-verde) 48%,var(--sjn-verde-2) 100%);
  border-radius:0;max-width:100%;box-shadow:0 1px 0 rgba(232,163,61,.35);
  transition:max-width .5s var(--sjn-ease),height .45s var(--sjn-ease),border-radius .5s var(--sjn-ease),box-shadow .45s ease,padding .45s var(--sjn-ease)}
.sjn-bar::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;pointer-events:none;opacity:.6;transition:opacity .4s;
  background:linear-gradient(90deg,rgba(232,163,61,0) 0%,rgba(232,163,61,.9) 30%,rgba(232,163,61,.9) 70%,rgba(232,163,61,0) 100%)}

/* La jaula */
.sjn-jaula{position:absolute;right:0;top:0;transition:right .5s;height:100%;width:auto;aspect-ratio:240/72;pointer-events:none}
.sjn-jaula .barras path{stroke:rgba(255,255,255,.14);fill:none;stroke-width:1.4;stroke-linecap:round;transition:transform .7s var(--sjn-ease),opacity .6s ease}
.sjn-jaula .pluma{fill:rgba(232,163,61,.7);transform-box:fill-box;transform-origin:center;animation:sjn-vuelo 7s ease-in-out infinite;transition:transform .9s var(--sjn-ease),opacity .7s ease}
.sjn-jaula .pluma-eje{stroke:rgba(6,46,39,.55);stroke-width:1;fill:none}
.sjn-jaula .estela circle{fill:rgba(232,163,61,.5);transition:opacity .5s}
@keyframes sjn-vuelo{0%,100%{translate:0 0;rotate:0deg}50%{translate:4px -3px;rotate:-5deg}}

/* Marca */
.sjn-marca{position:relative;z-index:1;display:flex;align-items:center;gap:12px;color:#fff;text-decoration:none;flex-shrink:0}
.sjn-marca img{width:40px;height:40px;border-radius:50%;display:block;background:var(--sjn-verde-2);box-shadow:0 4px 14px rgba(0,0,0,.28),0 0 0 4px rgba(232,163,61,.12);transition:transform .45s var(--sjn-ease)}
.sjn-marca:hover img{transform:translateY(-3px) rotate(-12deg)}
.sjn-textos{display:flex;flex-direction:column;line-height:1}
.sjn-nombre{font-family:'Montserrat','Space Grotesk',sans-serif;font-weight:800;font-size:19px;letter-spacing:-.2px}
.sjn-sub{font-family:'Space Grotesk',sans-serif;font-size:10.5px;font-weight:500;letter-spacing:1.8px;text-transform:uppercase;color:var(--sjn-oro-2);margin-top:5px;transition:opacity .35s,max-height .35s;max-height:20px;overflow:hidden}

/* Píldora de navegación (PC) */
.sjn-links{position:relative;z-index:1;display:flex;gap:4px;margin:0 auto;padding:5px;border-radius:999px;background:rgba(0,0,0,.2);border:1px solid rgba(255,255,255,.1);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.sjn-links a{display:flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;color:rgba(255,255,255,.84);text-decoration:none;font-family:'Space Grotesk',sans-serif;font-size:14.5px;font-weight:500;white-space:nowrap;transition:background .2s,color .2s}
.sjn-links a:hover{background:rgba(255,255,255,.1);color:#fff}
.sjn-links a.activo{background:linear-gradient(135deg,var(--sjn-oro-2),var(--sjn-oro));color:var(--sjn-verde-2);font-weight:700;box-shadow:0 4px 14px rgba(232,163,61,.35)}
.sjn-links a.sjn-especial:not(.activo){color:var(--sjn-oro-2);box-shadow:inset 0 0 0 1px rgba(232,163,61,.45)}
.sjn-ico{width:18px;height:18px;display:block;flex-shrink:0}

/* WhatsApp */
.sjn-wa{position:relative;z-index:1;display:inline-flex;align-items:center;gap:8px;flex-shrink:0;padding:11px 18px 11px 15px;border-radius:999px;text-decoration:none;
  font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:14px;color:var(--sjn-verde-2);background:linear-gradient(135deg,var(--sjn-oro-2),var(--sjn-oro));
  box-shadow:0 6px 18px rgba(232,163,61,.35);transition:transform .2s,box-shadow .2s}
.sjn-wa:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(232,163,61,.45)}
.sjn-wa svg{width:17px;height:17px;flex-shrink:0}

/* Al bajar: la jaula se abre y el menú flota */
.sjn.sjn--flota{padding:10px 16px 0}
.sjn.sjn--flota .sjn-bar{max-width:1120px;height:62px;border-radius:999px;padding:0 10px 0 14px;box-shadow:0 14px 36px rgba(6,46,39,.28),0 2px 8px rgba(6,46,39,.12)}
.sjn.sjn--flota .sjn-bar::after{opacity:0}
.sjn.sjn--flota .sjn-sub{opacity:0;max-height:0;margin-top:0}
.sjn.sjn--flota .sjn-marca img{width:36px;height:36px}
.sjn.sjn--flota .barras .b-izq{transform:translateX(-26px);opacity:0}
.sjn.sjn--flota .barras .b-der{transform:translateX(26px);opacity:0}
.sjn.sjn--flota .barras .b-otra{opacity:0}
.sjn.sjn--flota .pluma{transform:translate(70px,-60px) rotate(-30deg);opacity:0;animation-play-state:paused}
.sjn.sjn--flota .estela circle{opacity:0}

/* Barra inferior tipo app (celular) */
.sjn-tabbar{display:none}
@media (max-width:1080px) and (min-width:901px){
  .sjn-links a span{display:none}.sjn-links a{padding:10px 13px}.sjn-links a.activo span,.sjn-links a.sjn-especial span{display:inline}
}
@media (max-width:900px){
  .sjn-bar{height:64px;padding:0 14px;gap:12px}
  .sjn.sjn--flota{padding:8px 10px 0}
  .sjn.sjn--flota .sjn-bar{height:56px;padding:0 8px 0 10px}
  .sjn-links{display:none}
  .sjn-marca{flex:1;min-width:0}
  .sjn-marca img{width:38px;height:38px}
  .sjn-nombre{font-size:18px}
  .sjn-wa{width:42px;height:42px;padding:0;justify-content:center}
  .sjn-wa span{display:none}
  .sjn-wa svg{width:20px;height:20px}
  .sjn-tabbar{position:fixed;z-index:75;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));display:grid;grid-template-columns:repeat(5,1fr);align-items:end;padding:6px;border-radius:24px;
    background:rgba(250,250,248,.88);-webkit-backdrop-filter:saturate(1.6) blur(14px);backdrop-filter:saturate(1.6) blur(14px);border:1px solid rgba(0,64,55,.08);box-shadow:0 12px 32px rgba(6,46,39,.2),0 2px 6px rgba(6,46,39,.08)}
  .sjn-tabbar a{display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 0 5px;border-radius:16px;text-decoration:none;color:#5f6e6a;font-family:'Space Grotesk',sans-serif;-webkit-tap-highlight-color:transparent}
  .sjn-tab-ico{width:44px;height:28px;display:grid;place-items:center;border-radius:999px;transition:background .25s,transform .25s}
  .sjn-tab-ico .sjn-ico{width:21px;height:21px}
  .sjn-tab-txt{font-size:10.5px;font-weight:500;white-space:nowrap}
  .sjn-tabbar a.activo{color:var(--sjn-verde)}
  .sjn-tabbar a.activo .sjn-tab-ico{background:linear-gradient(135deg,var(--sjn-oro-2),var(--sjn-oro));color:var(--sjn-verde-2);box-shadow:0 4px 10px rgba(232,163,61,.35)}
  .sjn-tabbar a.activo .sjn-tab-txt{font-weight:700}
  .sjn-tabbar a:active .sjn-tab-ico{transform:scale(.92)}
  /* "Mi opción": el botón protagonista, elevado al centro */
  .sjn-tabbar a.sjn-centro .sjn-tab-ico{width:54px;height:54px;margin-top:-26px;color:var(--sjn-verde-2);
    background:linear-gradient(135deg,var(--sjn-oro-2),var(--sjn-oro));border:4px solid var(--sjn-papel);box-shadow:0 8px 20px rgba(232,163,61,.45)}
  .sjn-tabbar a.sjn-centro .sjn-tab-ico .sjn-ico{width:24px;height:24px}
  .sjn-tabbar a.sjn-centro .sjn-tab-txt{color:var(--sjn-verde);font-weight:700}
  body:has(.sjn-tabbar) .wa-fab{display:none!important}
  body:has(.sjn-tabbar){padding-bottom:calc(84px + env(safe-area-inset-bottom))}
}
@media (max-width:360px){.sjn-tab-txt{font-size:9.5px}.sjn-sub{letter-spacing:1.2px}}
@media (prefers-reduced-motion:reduce){
  .sjn,.sjn-bar,.sjn-jaula .barras path,.sjn-jaula .pluma,.sjn-sub,.sjn-marca img{transition:none!important}
  .sjn-jaula .pluma{animation:none}
}
@media (min-width:901px){.sjn-jaula{right:200px}.sjn.sjn--flota .sjn-jaula{right:120px}}