/* Cubic · cabecera y pie de la web (portada y secciones) */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* el celular no agranda letras por su cuenta (rompía el plano) */
.sitio-in { width: min(1280px, 100% - 64px); margin: 0 auto; }
@media (max-width: 900px) { .sitio-in { width: calc(100% - 32px); } }
.sitio-cab { position: sticky; top: 0; z-index: 60; background: rgba(0, 0, 0, .92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 1px 0 #1f1f1f; }
.sitio-cab .sitio-in { display: flex; align-items: center; gap: 24px; min-height: 66px; }
.sitio-logo { display: inline-flex; align-items: center; gap: 8px; color: var(--text); text-decoration: none; flex: none; }
.sitio-logo svg { display: block; }
.sitio-nav { display: flex; margin-left: auto; }
.sitio-nav a { display: inline-flex; align-items: center; min-height: 66px; padding: 0 15px; color: #d4d0ca; text-decoration: none; font: 700 17px/1 var(--f-display); font-stretch: 64%; text-transform: uppercase; letter-spacing: .06em; transition: color 160ms, box-shadow 200ms; }
.sitio-nav a:hover { color: #fff; box-shadow: inset 0 -3px 0 #444; }
.sitio-nav a[aria-current="page"] { color: #fff; box-shadow: inset 0 -3px 0 var(--primary); }
.sitio-mi { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; flex: none; background: var(--papel); color: var(--primary); text-decoration: none; font: 800 17px/1 var(--f-display); font-stretch: 62%; text-transform: uppercase; letter-spacing: .05em; transition: background 160ms, transform 120ms; }
.sitio-mi:hover { background: #fff; }
.sitio-mi:active { transform: scale(.97); }
.sitio-mi[aria-current="page"] { background: var(--primary); color: #fff; }
.sitio-mi b { min-width: 22px; height: 22px; display: grid; place-items: center; padding: 0 6px; background: var(--primary); color: #fff; font: 800 14px/1 var(--f-display); font-stretch: 70%; }
.sitio-mi[aria-current="page"] b { background: #000; }
.sitio-cab a:focus-visible, .sitio-pie a:focus-visible { outline: 3px solid var(--papel); outline-offset: -3px; }

/* En el celular: el logo y «Mi noche» arriba; las secciones en una fila debajo */
@media (max-width: 820px) {
  .sitio-cab .sitio-in { flex-wrap: wrap; gap: 0 12px; min-height: 0; padding-top: 9px; }
  .sitio-mi { margin-left: auto; min-height: 42px; }
  .sitio-nav { order: 3; width: calc(100% + 32px); margin: 9px -16px 0; overflow-x: auto; scrollbar-width: none; box-shadow: inset 0 1px 0 #1f1f1f; }
  .sitio-nav::-webkit-scrollbar { display: none; }
  .sitio-nav a { flex: 1 0 auto; justify-content: center; min-height: 48px; padding: 0 10px; font-size: 16px; }
}

.sitio-pie { margin-top: 56px; padding: 46px 0 calc(130px + env(safe-area-inset-bottom)); color: var(--muted); box-shadow: inset 0 1px 0 #1f1f1f; }
.sitio-pie .sitio-in { display: grid; grid-template-columns: 1.5fr 1fr; gap: 26px 40px; }
.sitio-pie p { margin: 14px 0 0; font-size: 15px; line-height: 1.6; }
.sitio-pie a { color: var(--text); }
.sitio-pie nav { display: grid; gap: 4px; align-content: start; justify-items: start; }
.sitio-pie nav a { padding: 6px 0; font: 700 23px/1 var(--f-display); font-stretch: 56%; text-transform: uppercase; text-decoration: none; transition: color 160ms; }
.sitio-pie nav a:hover { color: var(--primary); }
.sitio-pie .credito { grid-column: 1 / -1; margin: 0; font-size: 13px; }
.sitio-pie .credito b { color: var(--text); }
@media (max-width: 620px) { .sitio-pie .sitio-in { grid-template-columns: 1fr; } .sitio-pie nav { grid-template-columns: 1fr 1fr; width: 100%; } }