/* OCÉANO CASINOS — Header
   Barra fija sobre papel. Al bajar gana fondo sólido y una línea de un
   píxel; nunca cambia de altura de golpe para que el contenido no salte. */

.oc-nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  padding-block: var(--space-5);
  padding-inline: env(safe-area-inset-left) env(safe-area-inset-right);
  transition: padding-block var(--dur) var(--ease-out),
              background-color var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out);
}

.oc-nav.is-stuck {
  padding-block: var(--space-3);
  background: rgba(13, 17, 48, 0.90);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--oc-navy-line);
}

.oc-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
}

/* ── Marca ────────────────────────────────────────────── */
/* Va el archivo del cliente tal cual. El logotipo tiene la palabra en blanco,
   así que la barra es oscura en todo el sitio: es la única forma de usarlo sin
   tocarlo. Cuando llegue una versión para fondo claro, se puede revisar. */
.oc-nav__brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  flex: none;
}
.oc-nav__logo {
  width: 142px;   /* en la home el hero ya lleva el logotipo grande */
  height: auto;
  transition: transform var(--dur-slow) var(--ease-out);
}
.oc-nav__brand:hover .oc-nav__logo { transform: scale(1.04); }

/* ── Enlaces ───────────────────────────────────────────── */
.oc-nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}
.oc-nav__links a {
  font-size: var(--text-sm);
  font-weight: 400;
  text-decoration: none;
  color: var(--oc-on-navy-2);
  transition: color var(--dur) var(--ease-out);
  position: relative;
}
.oc-nav__links a:not(.oc-nav__cta)::after {
  content: "";
  position: absolute;
  left: 0; right: 100%; bottom: -7px;
  height: 1px;
  background: var(--oc-gold);
  transition: right var(--dur) var(--ease-out);
}
.oc-nav__links a:not(.oc-nav__cta):hover { color: var(--oc-on-navy); }
.oc-nav__links a:not(.oc-nav__cta):hover::after { right: 0; }

.oc-nav__links a.oc-nav__cta {
  min-height: 44px;
  padding-inline: var(--space-5);
  font-size: var(--text-sm);
  font-weight: 500;
  background: var(--oc-gold);
  color: var(--oc-ink);
}
.oc-nav__links a.oc-nav__cta:hover { background: var(--oc-gold-hi); color: var(--oc-ink); }

/* ── Botón móvil ───────────────────────────────────────── */
.oc-nav__toggle {
  display: none;
  width: 48px; height: 48px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--oc-navy-line);
  border-radius: var(--radius-pill);
  cursor: pointer;
  touch-action: manipulation;
}
.oc-nav__bars { display: block; width: 20px; }
.oc-nav__bars i {
  display: block;
  height: 1.5px;
  background: var(--oc-on-navy);
  transition: transform var(--dur) var(--ease-out);
}
.oc-nav__bars i:first-child { margin-bottom: 6px; }
[aria-expanded="true"] .oc-nav__bars i:first-child { transform: translateY(3.75px) rotate(45deg); }
[aria-expanded="true"] .oc-nav__bars i:last-child  { transform: translateY(-3.75px) rotate(-45deg); }

@media (max-width: 980px) {
  .oc-nav__toggle { display: inline-flex; }
  .oc-nav__logo { width: 128px; }

  .oc-nav__links {
    position: fixed;
    inset: 0 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 6.5rem var(--container-px) var(--space-7);
    background: var(--oc-navy-deep);
    border-bottom: 1px solid var(--oc-navy-line);
    transform: translateY(-102%);
    /* `visibility` además del transform: si solo se desplaza, el menú cerrado
       sigue recibiendo foco con el tabulador aunque no se vea. */
    visibility: hidden;
    transition: transform var(--dur-slow) var(--ease-out),
                visibility 0s linear var(--dur-slow);
    box-shadow: var(--shadow-lift);
  }
  .oc-nav__links.is-open {
    transform: none;
    visibility: visible;
    transition: transform var(--dur-slow) var(--ease-out), visibility 0s;
  }

  .oc-nav__links a:not(.oc-nav__cta) {
    padding-block: var(--space-4);
    font-size: var(--text-lg);
    border-bottom: 1px solid var(--oc-navy-line);
  }
  .oc-nav__links a:not(.oc-nav__cta)::after { display: none; }
  .oc-nav__links a.oc-nav__cta { margin-top: var(--space-6); }
}