:root{
  --bg:#0a0a0a;
  --fg:#ffffff;
  --muted:rgba(255,255,255,.75);
  --gold:#d4af37;
  --gold2:#b99329;
  --card:rgba(255,255,255,.05);
  --border:rgba(255,255,255,.14);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--bg); color:var(--fg); line-height:1.55;
}

/* Topbar */
.topbar{
  position:sticky; top:0; z-index:20;
  background:linear-gradient(90deg, rgba(0,0,0,.9), rgba(20,20,20,.7));
  border-bottom:1px solid var(--border);
  backdrop-filter: blur(4px);
}
.topbar .wrap{
  max-width:1100px; margin:auto; padding:10px 16px;
  display:flex; align-items:center; gap:12px; justify-content:space-between;
}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:#fff; font-weight:800; letter-spacing:.2px}
.brand img{height:34px; width:auto; border-radius:8px}
.brand b{color:var(--gold)}

.topnav{display:flex; gap:10px; align-items:center}
.topnav a{
  color:#fff; text-decoration:none; padding:6px 10px; border-radius:999px;
  border:1px solid transparent;
}
.topnav a:hover{border-color:var(--gold); color:#fff}

.pill{
  background:rgba(255,255,255,.06); border:1px solid var(--border);
  padding:6px 10px; border-radius:999px; font-weight:800;
}

/* Layout */
.container{max-width:1100px; margin:auto; padding:22px 16px 80px}
.hero{
  background:var(--card); border:1px solid var(--border);
  border-radius:18px; padding:20px; margin-bottom:18px;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.hero h1{margin:0 0 6px; font-size:clamp(24px,3.5vw,36px)}
.hero-actions{margin-top:10px}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 16px; border-radius:12px; font-weight:800; border:1px solid transparent; cursor:pointer;
}
.btn.gold{background:linear-gradient(90deg,var(--gold),var(--gold2)); color:#000; border-color:var(--gold)}
.btn.gold:hover{filter:brightness(1.06)}

.grid{display:grid; grid-template-columns:260px 1fr; gap:18px}
@media (max-width:900px){ .grid{grid-template-columns:1fr} }

.toc{
  position:sticky; top:86px;
  background:var(--card); border:1px solid var(--border);
  border-radius:18px; padding:14px;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
  height:fit-content;
}
.toc h3{margin:0 0 8px}
.toc ol{margin:0 0 6px 16px; padding:0}
.toc a{color:#fff; text-decoration:none}
.toc a:hover{color:var(--gold)}
.toc .note{margin-top:8px; color:var(--muted); font-size:.9rem}

.content{display:grid; gap:18px}
.card{
  background:var(--card); border:1px solid var(--border);
  border-radius:18px; padding:16px;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.card-head{
  display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px;
}
.card-head h2{margin:0; font-size:1.2rem}
.hint{color:var(--muted); font-weight:600}

.subgrid{display:grid; grid-template-columns:1fr 1fr; gap:14px}
@media (max-width:700px){ .subgrid{grid-template-columns:1fr} }
h3{margin:6px 0 6px; font-size:1rem}

.menu-list{
  list-style:none; margin:0; padding:0; display:grid; gap:6px;
}
.menu-list li{
  padding:10px 12px; border:1px solid var(--border); border-radius:10px;
  background:rgba(255,255,255,.03);
}
.menu-list.columns{
  grid-template-columns:repeat(2, minmax(0,1fr)); gap:6px;
}
@media (max-width:560px){ .menu-list.columns{grid-template-columns:1fr} }

.muted{color:var(--muted)}

.foot{border-top:1px solid var(--border); padding:18px 0; background:#000}
.foot .wrap{max-width:1100px; margin:auto; padding:0 16px; color:var(--muted)}

/* Impresión */
@media print{
  .topbar, .foot, .hero-actions, .toc{display:none !important}
  body{background:#fff; color:#000}
  .card, .hero{background:#fff; border:1px solid #ccc; box-shadow:none}
  .menu-list li{border-color:#ddd}
}

/* ======= FIX MOVIL: TOC SIN STICKY, SIN SUBNIVELES, Y CHIPs ======= */
@media (max-width: 900px){
  /* 1) El índice deja de ser sticky y se separa del contenido */
  .toc{
    position: static !important;
    top: auto !important;
    margin-bottom: 12px;
  }

  /* 2) El índice sólo muestra el primer nivel (oculta subniveles) */
  .toc ol ol{ display: none !important; }

  /* 3) Estilo "chips" en 1 columna para que no invada */
  .toc ol{
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;  /* 1 columna en móvil */
    gap: 10px;
  }
  .toc li{ list-style: none; }
  .toc a{
    display: block;
    text-decoration: none;
    color: #fff;
    background: rgba(255,255,255,.06);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 10px 12px;
    font-weight: 800;
  }

  /* 4) Ajustes de tipografía y tarjetas en móvil */
  .card{ padding: 14px; border-radius: 14px; }
  .card-head h2{ font-size: 1.05rem; }
  h1,h2,h3{ line-height: 1.2; }
  .menu-list.columns{ grid-template-columns: 1fr; } /* listas en 1 columna */

  /* 5) Al saltar a una sección, que el título no quede bajo el header */
  [id]{ scroll-margin-top: 88px; }
}

/* Masonry en Platos principales para evitar huecos entre bloques */
@media (min-width: 700px){
  .subgrid{
    /* en lugar de grid, usamos columnas */
    display: block;
    columns: 2;
    column-gap: 14px;
  }
  .subgrid > section{
    display: block;          /* para que respete la columna */
    break-inside: avoid;     /* evita cortes feos */
    margin-bottom: 14px;
  }
}