/* ============================================================
   Ser y Sentir — navegacion
   - PC: barra "liquid glass" flotante (dock) estilo Apple
   - Movil: "magic radial menu" con indicador que viaja al activo
   - Colores de marca (melocoton / terracota / coral)
   - Sin dependencias externas (iconos SVG inline). Responsive.
   ============================================================ */

:root {
  --sn-peach: #ffead9;
  --sn-accent: #ca6b45;        /* terracota */
  --sn-accent-deep: #a8512c;
  --sn-coral: #ff4b4b;
  --sn-gold: #bf8200;
  --sn-ink: #5a3a2a;           /* texto calido oscuro */
  /* glass calido claro */
  --sn-glass-bg: rgba(255, 250, 245, 0.42);
  --sn-glass-border: rgba(255, 255, 255, 0.6);
  --sn-glass-shadow: rgba(120, 70, 45, 0.20);
  --sn-glass-hl: rgba(255, 255, 255, 0.85);
  --sn-reflect: rgba(255, 255, 255, 0.55);
  --sn-glare: rgba(255, 240, 228, 0.65);
  --sn-pill-bg: rgba(255, 255, 255, 0.82);
  --sn-pill-shadow: 0 6px 16px rgba(120, 70, 45, 0.14), 0 1px 2px rgba(120, 70, 45, 0.10), inset 0 1px 1px rgba(255, 255, 255, 0.9);
}

/* ocultar la navegacion original del tema (se conservan sus enlaces en el DOM para SEO) */
.navigation-root { display: none !important; }

/* ===================== PC: LIQUID GLASS DOCK (arriba, como la nav original) ===================== */
.sn-liquid {
  position: fixed;
  top: 22px;
  right: 40px;
  display: flex;
  align-items: center;
  gap: 0;
  padding: 8px;
  border-radius: 99px;
  background: var(--sn-glass-bg);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  backdrop-filter: blur(28px) saturate(180%);
  box-shadow:
    0 30px 60px -22px var(--sn-glass-shadow),
    0 8px 24px -10px var(--sn-glass-shadow),
    inset 0 2px 3px -1px var(--sn-glass-hl),
    inset 0 -2px 4px -1px rgba(255, 255, 255, 0.4),
    inset 0 0 0 1px var(--sn-glass-border);
  z-index: 9000;
  isolation: isolate;
}
/* reflejo "aqua" superior */
.sn-liquid::before {
  content: '';
  position: absolute;
  top: 1px; left: 1px; right: 1px;
  height: 46%;
  border-radius: 99px 99px 24px 24px / 99px 99px 12px 12px;
  background: linear-gradient(180deg, var(--sn-reflect) 0%, rgba(255, 255, 255, 0) 100%);
  pointer-events: none;
  z-index: 6;
}
.sn-glare-container {
  position: absolute; inset: 0;
  border-radius: 99px; overflow: hidden;
  pointer-events: none; z-index: 5;
}
.sn-glare {
  position: absolute; inset: 0; opacity: 0;
  transition: opacity .3s ease;
  background: radial-gradient(circle 90px at var(--x, 50%) var(--y, 50%), var(--sn-glare) 0%, transparent 100%);
  mix-blend-mode: overlay;
}
.sn-liquid:hover .sn-glare { opacity: 1; }

.sn-items { position: relative; display: flex; gap: 2px; z-index: 3; }
.sn-pill {
  position: absolute; top: 0; left: 0; height: 44px;
  background: var(--sn-pill-bg);
  border-radius: 99px;
  box-shadow: var(--sn-pill-shadow);
  opacity: 0;
  transition: transform .5s cubic-bezier(.34, 1.2, .64, 1),
              width .5s cubic-bezier(.34, 1.2, .64, 1),
              opacity .3s ease;
  z-index: 1;
}
.sn-pill.ready { opacity: 1; }
.sn-btn {
  position: relative; z-index: 2;
  display: inline-flex; align-items: center; gap: 8px;
  height: 44px; padding: 0 18px;
  border-radius: 99px;
  font-family: 'MavenPro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 15px; font-weight: 600; line-height: 1;
  letter-spacing: .1px;
  color: rgba(90, 58, 42, 0.62);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color .3s ease, transform .2s cubic-bezier(.32, .72, 0, 1);
}
.sn-btn .sn-ico { display: inline-flex; }
.sn-btn .sn-ico svg { width: 19px; height: 19px; display: block; }
.sn-btn:hover { color: var(--sn-accent); }
.sn-btn.active { color: var(--sn-accent-deep); }
.sn-btn:active { transform: scale(.93); }

/* labels: ocultas en pantallas medianas para que el dock quepa */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .sn-btn { padding: 0 14px; }
  .sn-btn .sn-label { display: none; }
}

/* ===================== MOVIL: MAGIC RADIAL MENU ===================== */
.sn-radial-backdrop {
  position: fixed; inset: 0;
  background: rgba(74, 47, 35, 0.28);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  opacity: 0; visibility: hidden;
  transition: opacity .35s ease, visibility .35s ease;
  z-index: 8998;
}
.sn-radial-backdrop.open { opacity: 1; visibility: visible; }

.sn-radial {
  position: fixed;
  top: 46px; right: 46px;
  width: 0; height: 0;
  z-index: 9000;
}
.sn-toggle {
  position: absolute; left: 0; top: 0;
  transform: translate(-50%, -50%);
  width: 60px; height: 60px;
  display: flex; align-items: center; justify-content: center;
  border: none; border-radius: 50%;
  background: #fffaf5;
  color: var(--sn-accent);
  box-shadow: 0 12px 28px -8px rgba(120, 70, 45, 0.45), inset 0 1px 2px rgba(255, 255, 255, 0.9), inset 0 0 0 1px rgba(202, 107, 69, 0.18);
  cursor: pointer; z-index: 3;
  -webkit-tap-highlight-color: transparent;
  transition: transform .5s cubic-bezier(.34, 1.2, .64, 1), background .4s ease, color .4s ease, box-shadow .4s ease;
}
.sn-toggle svg { width: 28px; height: 28px; transition: transform .5s cubic-bezier(.34, 1.2, .64, 1); }
.sn-radial.open .sn-toggle {
  background: var(--sn-accent);
  color: #fff;
  box-shadow: 0 16px 34px -8px rgba(120, 70, 45, 0.55), inset 0 1px 2px rgba(255, 255, 255, 0.35);
}
.sn-radial.open .sn-toggle svg { transform: rotate(135deg); }
.sn-toggle:active { transform: translate(-50%, -50%) scale(.9); }

.sn-radial-items { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.sn-ritem {
  position: absolute; left: 0; top: 0;
  width: 52px; height: 52px; margin: -26px 0 0 -26px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: #fffaf5;
  color: var(--sn-accent);
  text-decoration: none;
  box-shadow: 0 8px 20px -6px rgba(120, 70, 45, 0.4), inset 0 0 0 1px rgba(202, 107, 69, 0.14);
  transform: translate(0, 0) scale(0);
  opacity: 0; visibility: hidden;
  transition: transform .5s cubic-bezier(.34, 1.2, .64, 1), opacity .4s ease, visibility .4s ease, color .3s ease;
  z-index: 2;
}
.sn-ritem svg { width: 23px; height: 23px; }
.sn-radial.open .sn-ritem {
  opacity: 1; visibility: visible;
  transform: translate(var(--tx, 0), var(--ty, 0)) scale(1);
  transition-delay: calc(var(--i) * 45ms);
}
/* item activo: fondo coral + icono blanco (alto contraste, on-brand) */
.sn-ritem.active {
  color: #fff;
  background: var(--sn-coral);
  box-shadow: 0 0 0 5px rgba(255, 75, 75, 0.18), 0 10px 24px -4px rgba(255, 75, 75, 0.55);
}

/* indicador "magic" que viaja al item activo */
.sn-indicator {
  position: absolute; left: 0; top: 0;
  width: 52px; height: 52px; margin: -26px 0 0 -26px;
  border-radius: 50%;
  background: var(--sn-coral);
  box-shadow: 0 0 0 5px rgba(255, 75, 75, 0.18), 0 8px 22px -4px rgba(255, 75, 75, 0.6);
  transform: translate(0, 0) scale(0);
  opacity: 0;
  transition: transform .55s cubic-bezier(.34, 1.2, .64, 1), opacity .35s ease;
  z-index: 1;
}
.sn-radial.open .sn-indicator { opacity: 1; }

/* mostrar uno u otro segun dispositivo */
.sn-radial, .sn-radial-backdrop { display: block; }
.sn-liquid { display: flex; }
@media (min-width: 768px) { .sn-radial, .sn-radial-backdrop { display: none; } }
@media (max-width: 767.98px) { .sn-liquid { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .sn-pill, .sn-ritem, .sn-indicator, .sn-toggle, .sn-toggle svg, .sn-btn { transition-duration: .01ms !important; }
  .sn-ritem { transition-delay: 0ms !important; }
}