/* ============================================================
   Bristol — capa de navegación (v3)
   No modifica el diseño original (los SVG de Canva). Solo agrega:
   (1) una barra de navegación nueva arriba de cada página,
   (2) zonas clickeables invisibles sobre el propio diseño, y
   (3) la lógica de la pantalla de verificación de edad.
   ============================================================ */

:root{
  --black:#0a0a0a;
  --gold:#caa15a;
  --maroon:#7a1620;
  --white:#ffffff;
  --gray-bg:#f4f2ef;
  --gray-text:#3a3a3a;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:#fff;
}
a{ color:inherit; }

a:focus-visible, button:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:2px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; transition-duration:0.001ms !important; }
}

/* ---------------- Barra de navegación ---------------- */
.site-nav{
  position:sticky;
  top:0;
  z-index:1000;
  background:var(--black);
  border-bottom:2px solid var(--gold);
}
.nav-inner{
  max-width:1100px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:8px 20px;
}
.nav-logo{
  display:flex;
  align-items:center;
  text-decoration:none;
}
.nav-logo img{
  height:40px;
  width:auto;
  display:block;
}
.nav-toggle{
  display:none;
  background:none;
  border:1px solid var(--gold);
  border-radius:6px;
  color:var(--white);
  padding:6px 10px;
  font-size:1.1rem;
  cursor:pointer;
}
.nav-links{
  list-style:none;
  display:flex;
  align-items:center;
  gap:28px;
  margin:0;
  padding:0;
}
.nav-links > li{ position:relative; }
.nav-links a{
  text-decoration:none;
  color:var(--white);
  font-size:.78rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-weight:600;
  padding:8px 2px;
  display:inline-block;
  transition:color .15s ease;
}
.nav-links a:hover, .nav-links a.active{ color:var(--gold); }

.has-dropdown > .dropdown{
  position:absolute;
  top:100%;
  left:0;
  background:var(--black);
  border:1px solid rgba(202,161,90,.35);
  border-radius:8px;
  min-width:190px;
  padding:8px;
  display:none;
  flex-direction:column;
  gap:2px;
  box-shadow:0 12px 24px rgba(0,0,0,.35);
}
.has-dropdown:hover > .dropdown,
.has-dropdown:focus-within > .dropdown,
.has-dropdown.open > .dropdown{ display:flex; }
.dropdown a{ padding:8px 10px; border-radius:5px; }
.dropdown a:hover{ background:rgba(202,161,90,.12); }

@media (max-width:820px){
  .nav-toggle{ display:inline-block; }
  .nav-links{
    position:absolute;
    top:100%; left:0; right:0;
    background:var(--black);
    flex-direction:column;
    align-items:flex-start;
    gap:0;
    padding:6px 20px 14px;
    display:none;
    border-bottom:2px solid var(--gold);
  }
  .nav-links.open{ display:flex; }
  .nav-links > li{ width:100%; }
  .nav-links a{ width:100%; padding:10px 0; }
  .has-dropdown > .dropdown{
    position:static; display:none; border:none;
    padding-left:12px; box-shadow:none; background:transparent;
  }
  .has-dropdown.open > .dropdown{ display:flex; }
}

/* ---------------- Migas de pan ---------------- */
.crumb-bar{
  background:var(--gray-bg);
  border-bottom:1px solid #e3ddd3;
  padding:9px 20px;
  font-size:.8rem;
  color:var(--gray-text);
}
.crumb-bar .crumb-inner{
  max-width:1100px;
  margin:0 auto;
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  align-items:center;
}
.crumb-bar a{ text-decoration:none; color:var(--maroon); font-weight:600; }
.crumb-bar a:hover{ text-decoration:underline; }
.crumb-bar .sep{ color:#b6ada0; }
.crumb-bar .current{ color:#8a8378; }

/* ---------------- Lienzo del diseño original ---------------- */
.design-wrap{
  position:relative;
  width:100%;
  line-height:0;
  background:#000;
}
.design-wrap img{ display:block; width:100%; height:auto; }

.design-video{
  position:absolute;
  display:block;
  object-fit:cover;
  pointer-events:none; /* el video es puramente visual, no bloquea nada debajo */
}

.hotspot{
  position:absolute;
  display:block;
  border-radius:6px;
  text-indent:-9999px;
  overflow:hidden;
  transition:background-color .15s ease, box-shadow .15s ease;
}
.hotspot:hover, .hotspot:focus-visible{
  background-color:rgba(255,255,255,.14);
  box-shadow:inset 0 0 0 2px rgba(202,161,90,.85);
}

.site-footer-note{
  text-align:center;
  font-size:.72rem;
  color:#9a9a9a;
  padding:14px 20px 26px;
  background:#000;
}

/* ---------------- Pantalla de verificación de edad ---------------- */
.gate-body{ background:#000; }
.gate-body .site-footer-note{ display:none; }