/* ================================================================
   Botón "Sitios" de la barra superior y su panel con todas las
   páginas de gozecosistema.com (datos en sitios.js).
   Escritorio: cajón lateral derecho. Teléfono: hoja inferior.
   ================================================================ */

/* ---------- Botón de la barra ---------- */
.sitios-btn { display: inline-flex; align-items: center; gap: .45rem; height: 40px; padding: 0 .95rem 0 .75rem; border-radius: 999px; cursor: pointer; font: 700 .85rem/1 "Montserrat", "Montserrat Fallback", system-ui, sans-serif; letter-spacing: .01em; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .3); color: #fff; transition: background .25s, border-color .25s, color .25s, transform .3s cubic-bezier(.2, .8, .2, 1); }
.sitios-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; flex: none; transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.sitios-btn:hover { background: rgba(255, 255, 255, .22); }
.sitios-btn:hover svg { transform: rotate(45deg); }
.sitios-btn:focus-visible { outline: 3px solid #FAA210; outline-offset: 2px; }
.sitios-btn[aria-expanded="true"] svg { transform: rotate(45deg); }
.eco-bar.topbar.scrolled .sitios-btn { background: #fff; border-color: #DCE4EF; color: #0A1F4F; }
.eco-bar.topbar.scrolled .sitios-btn:hover { border-color: #093A89; }
[data-theme="dark"] .eco-bar.topbar.scrolled .sitios-btn { background: #0A1131; border-color: #1D2757; color: #fff; }
[data-theme="dark"] .eco-bar.topbar.scrolled .sitios-btn:hover { border-color: #FAA210; }

/* ---------- Panel (dialog) ---------- */
.sitios-panel { position: fixed; inset: 0 0 0 auto; width: min(440px, 100%); height: 100dvh; max-width: none; max-height: none; margin: 0 0 0 auto; padding: 0; border: 0; border-left: 1px solid var(--line); background: var(--surface); color: var(--text); box-shadow: -30px 0 80px -30px rgba(0, 0, 50, .5); overflow: hidden; }
.sitios-panel[open] { display: flex; animation: sitios-entra-lado .42s cubic-bezier(.2, .8, .2, 1); }
.sitios-panel.is-cerrando { animation: sitios-sale-lado .26s ease-in forwards; }
.sitios-panel::backdrop { background: rgba(0, 0, 40, .5); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); animation: sitios-fondo .3s ease; }
.sitios-panel.is-cerrando::backdrop { animation: sitios-fondo-sale .26s ease forwards; }
.sitios-in { display: flex; flex-direction: column; width: 100%; min-height: 0; }

.sitios-cab { position: relative; flex: none; padding: 1.5rem 1.4rem 1.2rem; color: #fff; background: radial-gradient(80% 120% at 100% 0%, rgba(0, 192, 199, .85), transparent 70%), radial-gradient(70% 120% at 0% 100%, rgba(250, 162, 16, .7), transparent 72%), linear-gradient(150deg, #000032 0%, #093A89 100%); }
.sitios-asa { display: none; }
.sitios-cab .sitios-eyebrow { margin: 0 0 .35rem; font-size: .7rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .78); }
.sitios-cab h2 { margin: 0; padding-right: 3rem; font: 800 1.45rem/1.15 "Montserrat", "Montserrat Fallback", system-ui, sans-serif; letter-spacing: -.01em; color: #fff; }
.sitios-cab h2 .serif { color: #FFC35C; }
.sitios-cuenta { margin: .45rem 0 0; font-size: .82rem; color: rgba(255, 255, 255, .8); }
.sitios-x { position: absolute; right: 14px; top: 14px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; border: 1px solid rgba(255, 255, 255, .35); background: rgba(0, 0, 40, .3); color: #fff; transition: background .2s, transform .3s cubic-bezier(.2, .8, .2, 1); }
.sitios-x:hover { background: rgba(0, 0, 40, .55); transform: rotate(90deg); }
.sitios-x:focus-visible { outline: 3px solid #FAA210; outline-offset: 2px; }
.sitios-x svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }

.sitios-cuerpo { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 1.1rem 1.1rem 1.6rem; }
.sitios-grupo + .sitios-grupo { margin-top: 1.2rem; }
.sitios-grupo-tit { display: flex; align-items: center; gap: .55rem; margin: 0 0 .55rem; padding: 0 .3rem; font: 700 .72rem/1.2 "Montserrat", "Montserrat Fallback", system-ui, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.sitios-grupo-tit svg { width: 26px; height: 26px; padding: 5px; border-radius: 8px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; color: #093A89; background: #E3ECF8; }
.sitios-grupo[data-grupo="1"] .sitios-grupo-tit svg { color: #00808A; background: #DCF4F6; }
.sitios-grupo[data-grupo="2"] .sitios-grupo-tit svg { color: #B26B00; background: #FFF1D6; }
.sitios-grupo[data-grupo="3"] .sitios-grupo-tit svg { color: #0A1F4F; background: #EAF1F8; }
[data-theme="dark"] .sitios-grupo-tit svg { color: #8FB4F2; background: #101A44; }
[data-theme="dark"] .sitios-grupo[data-grupo="1"] .sitios-grupo-tit svg { color: #1FC3CF; background: rgba(0, 170, 182, .14); }
[data-theme="dark"] .sitios-grupo[data-grupo="2"] .sitios-grupo-tit svg { color: #FAA210; background: rgba(250, 162, 16, .14); }
[data-theme="dark"] .sitios-grupo[data-grupo="3"] .sitios-grupo-tit svg { color: #EAF0FA; background: #101A44; }

.sitios-items { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.sitios-item { display: flex; align-items: center; gap: .8rem; padding: .8rem .85rem .8rem 1rem; border-radius: 16px; border: 1px solid var(--line); background: var(--bg-soft); color: inherit; text-decoration: none; transition: border-color .2s, background .2s, transform .25s cubic-bezier(.2, .8, .2, 1); }
.sitios-item:hover { border-color: #093A89; background: var(--surface); transform: translateX(-2px); }
[data-theme="dark"] .sitios-item:hover { border-color: #FAA210; }
.sitios-item:focus-visible { outline: 3px solid #FAA210; outline-offset: 2px; }
.sitios-item[aria-current="page"] { border-color: #00AAB6; box-shadow: inset 3px 0 0 #00AAB6; }
.sitios-txt { flex: 1; min-width: 0; display: grid; gap: .15rem; }
.sitios-nombre { font-weight: 700; font-size: .95rem; line-height: 1.25; color: var(--head); }
.sitios-desc { font-size: .82rem; line-height: 1.4; color: var(--muted); }
.sitios-ruta { justify-self: start; max-width: 100%; margin-top: .2rem; padding: .12rem .5rem; border-radius: 6px; font: 600 .74rem/1.4 ui-monospace, "SFMono-Regular", Consolas, monospace; color: #093A89; background: #E3ECF8; overflow-wrap: anywhere; }
[data-theme="dark"] .sitios-ruta { color: #FAA210; background: rgba(250, 162, 16, .1); }
.sitios-ir { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--muted); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s, stroke .25s; }
.sitios-item:hover .sitios-ir { stroke: var(--head); transform: translateX(2px); }
.sitios-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

@keyframes sitios-entra-lado { from { transform: translateX(100%); } }
@keyframes sitios-sale-lado { to { transform: translateX(100%); } }
@keyframes sitios-fondo { from { opacity: 0; } }
@keyframes sitios-fondo-sale { to { opacity: 0; } }

/* ---------- Teléfono: hoja inferior tipo app ---------- */
@media (max-width: 680px) {
  .sitios-btn { padding: 0 .8rem 0 .65rem; font-size: .8rem; }
  .sitios-panel { inset: auto 0 0 0; width: 100%; height: auto; max-height: 88dvh; margin: auto 0 0; border-left: 0; border-radius: 24px 24px 0 0; box-shadow: 0 -24px 70px -20px rgba(0, 0, 50, .55); }
  .sitios-panel[open] { animation-name: sitios-entra-abajo; }
  .sitios-panel.is-cerrando { animation-name: sitios-sale-abajo; }
  .sitios-cab { padding: 1.4rem 1.1rem 1rem; }
  .sitios-asa { display: block; position: absolute; left: 50%; top: 8px; width: 40px; height: 5px; margin-left: -20px; border-radius: 3px; background: rgba(255, 255, 255, .5); }
  .sitios-cab h2 { font-size: 1.25rem; }
  .sitios-x { right: 10px; top: 12px; }
  .sitios-cuerpo { padding: .9rem 14px calc(1.2rem + env(safe-area-inset-bottom, 0px)); }
  .sitios-item { padding: .75rem .75rem .75rem .9rem; }
  .sitios-item:hover { transform: none; }
}
@keyframes sitios-entra-abajo { from { transform: translateY(100%); } }
@keyframes sitios-sale-abajo { to { transform: translateY(100%); } }

@media (prefers-reduced-motion: reduce) {
  .sitios-panel[open], .sitios-panel.is-cerrando, .sitios-panel::backdrop, .sitios-panel.is-cerrando::backdrop { animation: none; }
  .sitios-btn, .sitios-btn svg, .sitios-x, .sitios-item, .sitios-ir { transition: none; }
}