/* =====================================================================
   XXV Ayuntamiento de Tijuana · Plataforma de Avances
   Sistema de diseño: vino institucional + oro
   ===================================================================== */
:root {
  --v950: #1c0309; --v900: #2a0510; --v850: #340712; --v800: #3f0916; --v700: #520c1d; --v600: #6b0f24;
  --v500: #8a1538; --v400: #a3324f; --v300: #c25d76; --v100: #f6e3e8;
  --o700: #8c6a37; --o600: #a17c45; --o500: #b8935a; --o400: #c9a66d; --o300: #dcc08f; --o200: #ead6b0; --o100: #f6ecd9;
  --crema: #faf6ef; --ink: #22161a; --muted: #7b6a6f; --line: #eadfd3;
  --ok: #3f9c6d; --warn: #e0a546; --info: #3b82c4;
  --gold-grad: linear-gradient(135deg, #f3dfb1 0%, #c9a66d 35%, #a17c45 60%, #e6cc95 100%);
  --vino-grad: radial-gradient(120% 90% at 20% 10%, #8a1538 0%, #520c1d 45%, #2a0510 100%);
  --r: 18px; --r-sm: 12px; --r-lg: 26px;
  --sh: 0 10px 30px -12px rgba(42, 5, 16, .35);
  --sh-lg: 0 30px 70px -25px rgba(28, 3, 9, .6);
  --ease: cubic-bezier(.22, 1, .36, 1);
  --font: 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --display: 'Cinzel', Georgia, serif;
  --safe-b: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; height: 100%; }
body { font-family: var(--font); color: var(--ink); background: var(--v900); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
button { font-family: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
input, select, textarea { font-family: inherit; font-size: 16px; }
a { color: inherit; }
img { max-width: 100%; display: block; }
::selection { background: var(--o300); color: var(--v900); }
.gold-text { background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hidden { display: none !important; }
.screen { min-height: 100vh; min-height: 100dvh; }
.fade-in { animation: fadeIn .6s var(--ease) both; }
.rise { animation: rise .7s var(--ease) both; }
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
@keyframes rise { from { opacity: 0; transform: translateY(24px) } to { opacity: 1; transform: none } }
@keyframes pop { 0% { transform: scale(.85); opacity: 0 } 60% { transform: scale(1.03); opacity: 1 } 100% { transform: scale(1) } }
@keyframes spin { to { transform: rotate(360deg) } }
@keyframes shimmer { 0% { background-position: -400px 0 } 100% { background-position: 400px 0 } }
@keyframes pulseRing { 0% { transform: scale(.6); opacity: .9 } 100% { transform: scale(2.6); opacity: 0 } }

/* ------------------------------------------------------------------ INTRO */
#intro { position: fixed; inset: 0; z-index: 100; background: var(--vino-grad); overflow: hidden; display: grid; place-items: center; }
#intro canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
#intro .frame { position: absolute; inset: 4vmin; pointer-events: none; }
#intro .frame .ln { position: absolute; background: linear-gradient(90deg, transparent, var(--o300), transparent); height: 1px; }
#intro .frame .ln.t { top: 0; left: 8%; right: 8%; transform: scaleX(0); animation: lnx 1.6s .3s var(--ease) forwards; }
#intro .frame .ln.b { bottom: 0; left: 8%; right: 8%; transform: scaleX(0); animation: lnx 1.6s .5s var(--ease) forwards; }
#intro .frame .ln.l, #intro .frame .ln.r { width: 1px; height: auto; top: 12%; bottom: 12%; background: linear-gradient(180deg, transparent, var(--o300), transparent); transform: scaleY(0); animation: lny 1.6s .7s var(--ease) forwards; }
#intro .frame .ln.l { left: 0 } #intro .frame .ln.r { right: 0 }
@keyframes lnx { to { transform: scaleX(1) } } @keyframes lny { to { transform: scaleY(1) } }
#intro .corner { position: absolute; width: 9vmin; height: 9vmin; border: 0 solid var(--o500); opacity: 0; animation: cornerIn 1s var(--ease) forwards; }
#intro .corner.tl { top: 2.4vmin; left: 2.4vmin; border-top-width: 7px; border-left-width: 7px; animation-delay: .2s }
#intro .corner.br { bottom: 2.4vmin; right: 2.4vmin; border-bottom-width: 7px; border-right-width: 7px; animation-delay: .4s }
#intro .corner.tr { top: 2.4vmin; right: 2.4vmin; width: 14px; height: 14px; background: var(--o500); animation-delay: .9s }
#intro .corner.bl { bottom: 2.4vmin; left: 2.4vmin; width: 14px; height: 14px; background: var(--o500); animation-delay: 1s }
@keyframes cornerIn { from { opacity: 0; transform: scale(.4) } to { opacity: 1; transform: none } }
#intro .glyph { position: absolute; right: -6vmin; top: 50%; width: 62vmin; transform: translateY(-50%); opacity: 0; animation: glyphIn 2.4s 1s var(--ease) forwards; }
#intro .glyph-2 { position: absolute; left: -4vmin; bottom: -6vmin; width: 40vmin; opacity: 0; animation: glyphIn 2.4s 1.4s var(--ease) forwards; }
@keyframes glyphIn { from { opacity: 0; transform: translateY(-50%) scale(1.1) } to { opacity: .55; transform: translateY(-50%) scale(1) } }
#intro .glyph-2 { animation-name: glyphIn2 } @keyframes glyphIn2 { from { opacity: 0; transform: translateY(30px) } to { opacity: .35; transform: none } }
#intro .core { position: relative; z-index: 3; text-align: center; color: #fff; padding: 20px; }
#intro .emblem-wrap { position: relative; width: min(30vmin, 210px); margin: 0 auto 2.2vmin; opacity: 0; animation: emblemIn 1.6s 1.2s var(--ease) forwards; }
#intro .emblem-wrap img { width: 100%; filter: drop-shadow(0 12px 30px rgba(0, 0, 0, .45)); }
#intro .emblem-wrap::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255, 245, 220, .75) 48%, transparent 62%); background-size: 250% 100%; background-position: 150% 0; -webkit-mask: url(/static/img/emblem.png) center/contain no-repeat; mask: url(/static/img/emblem.png) center/contain no-repeat; animation: sweep 2.2s 2.6s ease-in-out forwards; }
@keyframes sweep { to { background-position: -60% 0 } }
@keyframes emblemIn { 0% { opacity: 0; transform: scale(.6) rotate(-6deg); filter: blur(10px) } 100% { opacity: 1; transform: none; filter: none } }
#intro .word { font-weight: 900; font-size: clamp(54px, 13vmin, 150px); letter-spacing: .02em; line-height: .95; display: flex; justify-content: center; gap: .01em; text-shadow: 0 10px 40px rgba(0, 0, 0, .4); }
#intro .word span { display: inline-block; opacity: 0; transform: translateY(60%) rotateX(-80deg); animation: letterIn .9s var(--ease) forwards; }
@keyframes letterIn { to { opacity: 1; transform: none } }
#intro .sub { margin-top: 1.4vmin; font-weight: 700; font-size: clamp(16px, 3.6vmin, 34px); letter-spacing: .08em; opacity: 0; animation: rise 1s 3.2s var(--ease) forwards; }
#intro .years { font-weight: 600; letter-spacing: .5em; font-size: clamp(12px, 2.2vmin, 20px); margin-top: .6vmin; opacity: 0; animation: rise 1s 3.5s var(--ease) forwards; }
#intro .lema { margin-top: 3vmin; font-weight: 700; letter-spacing: .14em; font-size: clamp(11px, 1.9vmin, 17px); opacity: 0; animation: rise 1s 3.8s var(--ease) forwards; }
#intro .enter { margin-top: 5vmin; opacity: 0; animation: pop .9s 4.5s var(--ease) forwards; }
.btn-welcome { position: relative; padding: 18px 54px; border-radius: 999px; font-weight: 800; letter-spacing: .25em; text-transform: uppercase; font-size: 15px; color: var(--v900); background: var(--gold-grad); box-shadow: 0 18px 40px -12px rgba(201, 166, 109, .6), inset 0 1px 0 rgba(255, 255, 255, .6); overflow: hidden; transition: transform .3s var(--ease); }
.btn-welcome:hover { transform: translateY(-3px) scale(1.03); }
.btn-welcome::before { content: ''; position: absolute; inset: -2px; border-radius: inherit; border: 1px solid rgba(255, 240, 210, .8); animation: halo 2.2s ease-out infinite; }
@keyframes halo { 0% { transform: scale(1); opacity: .9 } 100% { transform: scale(1.35, 1.8); opacity: 0 } }
.btn-welcome::after { content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .7), transparent); transform: skewX(-20deg); animation: shine 3s 5.4s infinite; }
@keyframes shine { 0% { left: -60% } 30%, 100% { left: 130% } }
#intro .skip { position: absolute; bottom: 5vmin; right: 6vmin; z-index: 4; color: var(--o200); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; opacity: .7; }
#intro.leave { animation: introOut 1.1s var(--ease) forwards; }
@keyframes introOut { to { clip-path: circle(0% at 50% 50%); opacity: 0 } }
.curtain { position: fixed; inset: 0; z-index: 120; pointer-events: none; display: grid; grid-template-columns: repeat(6, 1fr); }
.curtain i { background: var(--gold-grad); transform: scaleY(0); transform-origin: top; animation: curtainIn .55s var(--ease) forwards, curtainOut .6s var(--ease) forwards; }
@keyframes curtainIn { to { transform: scaleY(1) } }
@keyframes curtainOut { from { transform: scaleY(1); transform-origin: bottom } to { transform: scaleY(0); transform-origin: bottom } }

/* ------------------------------------------------------------------ HOME */
#home { position: relative; min-height: 100dvh; color: #fff; display: flex; flex-direction: column; overflow: hidden; background: var(--v900); }
#home .bg { position: absolute; inset: 0; background: url(/static/img/banner.jpg) center/cover; filter: saturate(1.1); transform: scale(1.08); animation: kenburns 30s ease-in-out infinite alternate; }
#home .bg::after { content: ''; position: absolute; inset: 0; background: radial-gradient(70% 60% at 50% 40%, rgba(42, 5, 16, .55), rgba(28, 3, 9, .93)); }
@keyframes kenburns { to { transform: scale(1.18) translate(-2%, -1%) } }
#home header, #home main, #home footer { position: relative; z-index: 2; }
#home header { display: flex; justify-content: center; padding: 34px 20px 0; }
#home header img { height: 74px; filter: drop-shadow(0 8px 20px rgba(0, 0, 0, .5)); }
#home main { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 30px 20px 40px; text-align: center; }
#home .kicker { color: var(--o300); font-weight: 600; letter-spacing: .4em; font-size: 12px; text-transform: uppercase; }
#home h1 { font-family: var(--display); font-size: clamp(44px, 8vw, 92px); margin: 8px 0 6px; font-weight: 900; letter-spacing: .04em; }
#home .lead { max-width: 640px; color: rgba(255, 255, 255, .78); font-size: 16px; line-height: 1.6; margin: 0 auto 38px; }
.choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; width: min(1080px, 100%); }
.choice { position: relative; text-align: left; padding: 30px 28px 26px; border-radius: var(--r-lg); background: linear-gradient(160deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .03)); border: 1px solid rgba(220, 192, 143, .28); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); color: #fff; overflow: hidden; transition: transform .45s var(--ease), border-color .3s, box-shadow .45s; box-shadow: var(--sh-lg); }
.choice::before { content: ''; position: absolute; inset: 0; background: radial-gradient(400px 200px at var(--mx, 50%) var(--my, 0%), rgba(220, 192, 143, .22), transparent 60%); opacity: 0; transition: opacity .3s; }
.choice:hover { transform: translateY(-8px); border-color: rgba(234, 214, 176, .7); }
.choice:hover::before { opacity: 1; }
.choice .ic { width: 62px; height: 62px; border-radius: 18px; display: grid; place-items: center; font-size: 26px; color: var(--v900); background: var(--gold-grad); box-shadow: 0 12px 26px -10px rgba(201, 166, 109, .8); margin-bottom: 22px; }
.choice h3 { margin: 0 0 8px; font-size: 22px; font-weight: 800; letter-spacing: .01em; }
.choice p { margin: 0; color: rgba(255, 255, 255, .7); font-size: 14px; line-height: 1.55; }
.choice .go { margin-top: 22px; display: inline-flex; align-items: center; gap: 10px; color: var(--o300); font-weight: 700; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; }
.choice .go i { transition: transform .3s var(--ease); }
.choice:hover .go i { transform: translateX(6px); }
.choice.primary { background: linear-gradient(160deg, rgba(201, 166, 109, .28), rgba(138, 21, 56, .25)); border-color: rgba(234, 214, 176, .55); }
.choice .tag { position: absolute; top: 18px; right: 18px; font-size: 10px; letter-spacing: .2em; font-weight: 700; padding: 6px 10px; border-radius: 999px; background: rgba(255, 255, 255, .12); color: var(--o200); }
#home footer { text-align: center; padding: 18px; font-size: 12px; color: rgba(255, 255, 255, .5); letter-spacing: .15em; text-transform: uppercase; }

/* ------------------------------------------------------------------ KEYPAD / AUTH */
.auth { min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px; background: var(--vino-grad); position: relative; overflow: hidden; }
.auth::before { content: ''; position: absolute; inset: 0; background: url(/static/img/banner.jpg) center/cover; opacity: .12; mix-blend-mode: screen; }
.auth-card { position: relative; width: min(420px, 100%); border-radius: 30px; padding: 28px 24px 24px; background: linear-gradient(170deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .04)); border: 1px solid rgba(220, 192, 143, .3); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); color: #fff; box-shadow: var(--sh-lg); animation: pop .7s var(--ease) both; }
.auth-card.wide { width: min(760px, 100%); }
.auth-card .back { position: absolute; top: 18px; left: 18px; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, .1); color: var(--o200); }
.auth-card .logo { height: 54px; margin: 4px auto 14px; }
.auth-card h2 { text-align: center; margin: 0; font-size: 22px; font-weight: 800; }
.auth-card .hint { text-align: center; color: rgba(255, 255, 255, .65); font-size: 13px; margin: 6px 0 18px; line-height: 1.5; }
.pin-display { display: flex; justify-content: center; gap: 14px; margin: 16px 0 6px; min-height: 22px; }
.pin-display i { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--o300); transition: all .2s var(--ease); }
.pin-display i.on { background: var(--o300); transform: scale(1.15); box-shadow: 0 0 14px rgba(234, 214, 176, .8); }
.pin-display.shake { animation: shake .45s; }
.pin-display.ok i { background: #7ee2a8; border-color: #7ee2a8; box-shadow: 0 0 14px rgba(126, 226, 168, .8); }
@keyframes shake { 20%, 60% { transform: translateX(-10px) } 40%, 80% { transform: translateX(10px) } }
.num-display { text-align: center; font-size: 30px; font-weight: 700; letter-spacing: .12em; min-height: 44px; color: #fff; margin: 8px 0; font-variant-numeric: tabular-nums; }
.num-display .ph { color: rgba(255, 255, 255, .3); font-weight: 500; letter-spacing: .05em; font-size: 22px; }
.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 18px auto 6px; max-width: 300px; }
.key { aspect-ratio: 1; border-radius: 50%; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 28px; font-weight: 500; transition: background .15s, transform .12s; user-select: none; }
.key small { font-size: 9px; letter-spacing: .25em; color: rgba(255, 255, 255, .5); font-weight: 600; margin-top: -2px; }
.key:active, .key.press { background: rgba(220, 192, 143, .45); transform: scale(.92); }
.key.fn { background: transparent; border-color: transparent; font-size: 22px; color: var(--o200); }
.key.ok { background: var(--gold-grad); color: var(--v900); border: 0; font-size: 24px; }
.key.ok:disabled { opacity: .35; }
.auth .err { text-align: center; color: #ffb3c1; font-size: 13px; min-height: 18px; font-weight: 600; }
.auth .auth-switch { text-align: center; margin-top: 12px; font-size: 13px; color: rgba(255, 255, 255, .7); }
.auth .auth-switch button { color: var(--o300); font-weight: 700; text-decoration: underline; }
.field-dark { width: 100%; padding: 15px 16px; border-radius: 14px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .18); color: #fff; outline: none; transition: border .2s, background .2s; }
.field-dark:focus { border-color: var(--o300); background: rgba(255, 255, 255, .12); }
.field-dark::placeholder { color: rgba(255, 255, 255, .4); }
.lbl-dark { display: block; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--o200); font-weight: 700; margin: 14px 0 8px; }
.dep-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.dep-opt { padding: 14px 8px; border-radius: 14px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); color: #fff; font-size: 11.5px; font-weight: 600; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; transition: all .2s var(--ease); line-height: 1.2; }
.dep-opt i { font-size: 20px; color: var(--o300); }
.dep-opt.on { background: var(--gold-grad); color: var(--v900); border-color: transparent; transform: translateY(-2px); }
.dep-opt.on i { color: var(--v900); }
.btn-gold { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 15px 24px; border-radius: 14px; background: var(--gold-grad); color: var(--v900); font-weight: 800; letter-spacing: .06em; box-shadow: 0 14px 30px -14px rgba(201, 166, 109, .9); transition: transform .2s var(--ease), opacity .2s; }
.btn-gold:hover { transform: translateY(-2px); }
.btn-gold:disabled { opacity: .5; transform: none; }
.btn-gold.block { width: 100%; }

/* ------------------------------------------------------------------ PANEL DE AVANCES (dark-luxe) */
.pv { --bg: #1f040b; min-height: 100dvh; background: radial-gradient(1200px 600px at 80% -10%, rgba(138, 21, 56, .45), transparent 60%), radial-gradient(900px 500px at -10% 110%, rgba(184, 147, 90, .12), transparent 60%), var(--bg); color: #f6eee6; display: grid; grid-template-columns: 250px 1fr; }
.pv-side { position: sticky; top: 0; height: 100dvh; padding: 22px 16px; border-right: 1px solid rgba(220, 192, 143, .14); background: linear-gradient(180deg, rgba(82, 12, 29, .55), rgba(28, 3, 9, .6)); display: flex; flex-direction: column; gap: 6px; z-index: 30; }
.pv-side .brand { display: flex; align-items: center; justify-content: center; padding: 6px 4px 18px; border-bottom: 1px solid rgba(220, 192, 143, .14); margin-bottom: 12px; cursor: pointer; }
.pv-side .brand img { height: 50px; }
.pv-nav { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border-radius: 14px; color: rgba(246, 238, 230, .72); font-weight: 600; font-size: 14px; transition: all .25s var(--ease); position: relative; text-align: left; }
.pv-nav i { width: 22px; text-align: center; color: var(--o400); font-size: 16px; }
.pv-nav:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.pv-nav.on { background: linear-gradient(90deg, rgba(201, 166, 109, .25), rgba(201, 166, 109, .04)); color: #fff; }
.pv-nav.on::before { content: ''; position: absolute; left: -16px; top: 10px; bottom: 10px; width: 4px; border-radius: 0 4px 4px 0; background: var(--gold-grad); }
.pv-side .spacer { flex: 1; }
.pv-side .mini { font-size: 11px; color: rgba(246, 238, 230, .45); line-height: 1.5; padding: 10px; border-top: 1px solid rgba(220, 192, 143, .12); }
.pv-main { min-width: 0; position: relative; }
.pv-top { position: sticky; top: 0; z-index: 25; display: flex; align-items: center; gap: 16px; padding: 16px 28px; background: rgba(31, 4, 11, .72); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid rgba(220, 192, 143, .1); }
.pv-top h1 { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: .01em; }
.pv-top .sub { font-size: 12px; color: var(--o300); letter-spacing: .2em; text-transform: uppercase; font-weight: 600; }
.pv-top .grow { flex: 1; }
.seg { display: inline-flex; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(220, 192, 143, .18); gap: 2px; }
.seg button { padding: 8px 16px; border-radius: 999px; font-size: 13px; font-weight: 700; color: rgba(246, 238, 230, .7); transition: all .25s var(--ease); white-space: nowrap; }
.seg button.on { background: var(--gold-grad); color: var(--v900); box-shadow: 0 6px 16px -8px rgba(201, 166, 109, .9); }
.pv-body { padding: 26px 28px 60px; }
.pv-mobile-nav { display: none; }
.sec-title { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin: 34px 0 16px; }
.sec-title h2 { margin: 0; font-size: 22px; font-weight: 800; }
.sec-title h2 small { display: block; font-size: 11px; letter-spacing: .25em; color: var(--o400); text-transform: uppercase; margin-bottom: 6px; font-weight: 700; }
.sec-title:first-child { margin-top: 0; }
.glass { background: linear-gradient(160deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .025)); border: 1px solid rgba(220, 192, 143, .16); border-radius: var(--r); box-shadow: 0 20px 50px -30px rgba(0, 0, 0, .8); }
.hero { position: relative; overflow: hidden; border-radius: var(--r-lg); padding: 34px 34px 30px; background: linear-gradient(120deg, rgba(107, 15, 36, .95), rgba(42, 5, 16, .85)), url(/static/img/banner.jpg) center/cover; border: 1px solid rgba(220, 192, 143, .25); display: grid; grid-template-columns: 1.15fr 1fr; gap: 26px; align-items: center; }
.hero::after { content: ''; position: absolute; right: -40px; top: -40px; width: 300px; height: 300px; border: 1px solid rgba(220, 192, 143, .2); border-radius: 50%; }
.hero .k { font-size: 11px; letter-spacing: .3em; color: var(--o300); font-weight: 700; text-transform: uppercase; }
.hero h2 { font-size: clamp(28px, 3.4vw, 44px); margin: 10px 0 10px; line-height: 1.05; font-weight: 900; }
.hero p { color: rgba(246, 238, 230, .75); line-height: 1.6; margin: 0; font-size: 14.5px; max-width: 520px; }
.hero .big { font-size: clamp(64px, 8vw, 112px); font-weight: 900; line-height: .9; letter-spacing: -.02em; }
.hero .big-l { font-size: 12px; letter-spacing: .25em; text-transform: uppercase; color: var(--o200); font-weight: 700; margin-top: 8px; }
.hero .months { display: flex; gap: 12px; margin-top: 18px; flex-wrap: wrap; }
.hero .m { flex: 1; min-width: 92px; padding: 12px 14px; border-radius: 14px; background: rgba(0, 0, 0, .22); border: 1px solid rgba(220, 192, 143, .2); }
.hero .m b { display: block; font-size: 26px; font-weight: 800; }
.hero .m span { font-size: 11px; letter-spacing: .15em; text-transform: uppercase; color: var(--o300); font-weight: 700; }
.kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; margin-top: 18px; }
.kpi { padding: 18px 18px 16px; position: relative; overflow: hidden; }
.kpi .ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: rgba(201, 166, 109, .15); color: var(--o300); font-size: 17px; margin-bottom: 14px; }
.kpi b { display: block; font-size: 26px; font-weight: 800; letter-spacing: -.01em; }
.kpi span { font-size: 12px; color: rgba(246, 238, 230, .6); font-weight: 600; }
.kpi::after { content: ''; position: absolute; right: -20px; bottom: -20px; width: 90px; height: 90px; border-radius: 50%; background: radial-gradient(circle, rgba(201, 166, 109, .18), transparent 70%); }
.grid-2 { display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.card-pad { padding: 20px; }
.card-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.card-h h3 { margin: 0; font-size: 15px; font-weight: 800; }
.card-h span { font-size: 12px; color: var(--o300); font-weight: 600; }
.chart-box { position: relative; height: 290px; }
.sector-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.sector-card { position: relative; padding: 16px 16px 14px; border-radius: 16px; text-align: left; overflow: hidden; transition: transform .35s var(--ease), border-color .3s; color: inherit; }
.sector-card:hover { transform: translateY(-4px); border-color: rgba(220, 192, 143, .45); }
.sector-card .row { display: flex; align-items: center; gap: 12px; }
.sector-card .si { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-size: 17px; color: #fff; flex: none; }
.sector-card .nm { font-weight: 700; font-size: 13.5px; line-height: 1.2; }
.sector-card .ct { margin-left: auto; font-size: 28px; font-weight: 900; }
.sector-card .bar { height: 5px; border-radius: 4px; background: rgba(255, 255, 255, .08); margin-top: 14px; overflow: hidden; }
.sector-card .bar i { display: block; height: 100%; border-radius: 4px; background: var(--gold-grad); width: 0; transition: width 1.2s var(--ease); }
.sector-card .mm { display: flex; justify-content: space-between; margin-top: 10px; font-size: 11px; color: rgba(246, 238, 230, .55); font-weight: 600; }
.sector-card.zero { opacity: .55; }
.acc { border-radius: 16px; overflow: hidden; margin-bottom: 10px; }
.acc-h { width: 100%; display: flex; align-items: center; gap: 14px; padding: 16px 18px; text-align: left; }
.acc-h .si { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; color: #fff; flex: none; }
.acc-h b { font-size: 15px; }
.acc-h .pill { margin-left: auto; }
.acc-h .chev { transition: transform .35s var(--ease); color: var(--o300); }
.acc.open .acc-h .chev { transform: rotate(180deg); }
.acc-b { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease); }
.acc.open .acc-b { grid-template-rows: 1fr; }
.acc-b > div { overflow: hidden; }
.acc-in { padding: 0 18px 18px; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; font-size: 11.5px; font-weight: 700; background: rgba(201, 166, 109, .16); color: var(--o200); white-space: nowrap; }
.pill.ok { background: rgba(63, 156, 109, .2); color: #8fe0b5; }
.pill.warn { background: rgba(224, 165, 70, .2); color: #f5cd8a; }
.pill.plan { background: rgba(59, 130, 196, .2); color: #9cc7ef; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { padding: 8px 13px; border-radius: 999px; font-size: 12.5px; font-weight: 600; background: rgba(255, 255, 255, .06); border: 1px solid rgba(220, 192, 143, .18); color: rgba(246, 238, 230, .8); display: inline-flex; align-items: center; gap: 7px; transition: all .2s var(--ease); }
.chip.on { background: var(--gold-grad); color: var(--v900); border-color: transparent; }
.chip i { font-size: 12px; }
.ev-list { display: flex; flex-direction: column; gap: 8px; }
.ev { display: flex; gap: 14px; padding: 12px 14px; border-radius: 12px; background: rgba(0, 0, 0, .18); border: 1px solid rgba(255, 255, 255, .05); align-items: center; }
.ev .d { text-align: center; min-width: 48px; }
.ev .d b { display: block; font-size: 20px; font-weight: 800; line-height: 1; }
.ev .d span { font-size: 10px; letter-spacing: .15em; text-transform: uppercase; color: var(--o300); font-weight: 700; }
.ev .t { font-weight: 700; font-size: 13.5px; }
.ev .s { font-size: 12px; color: rgba(246, 238, 230, .55); margin-top: 3px; }
.ticker { display: flex; flex-direction: column; gap: 0; max-height: 360px; overflow: auto; }
.tk { display: flex; gap: 12px; padding: 12px 4px; border-bottom: 1px solid rgba(255, 255, 255, .06); cursor: pointer; }
.tk:hover { background: rgba(255, 255, 255, .03); }
.tk .dot { width: 34px; height: 34px; border-radius: 10px; flex: none; display: grid; place-items: center; color: #fff; font-size: 13px; }
.tk .t { font-size: 13px; font-weight: 700; line-height: 1.3; }
.tk .s { font-size: 11.5px; color: rgba(246, 238, 230, .55); margin-top: 3px; }

/* Mapa */
.map-wrap { position: relative; height: calc(100dvh - 77px); }
.map-wrap.embed { height: 520px; border-radius: var(--r-lg); overflow: hidden; border: 1px solid rgba(220, 192, 143, .2); }
#pv-map, .map-el { position: absolute; inset: 0; background: #1a0308; }
.leaflet-container { font-family: var(--font); }
.tiles-warm .leaflet-tile-pane { filter: sepia(.18) saturate(1.05) hue-rotate(-8deg) brightness(.98); }
.map-filters { position: absolute; z-index: 500; top: 16px; left: 16px; width: 340px; max-height: calc(100% - 32px); display: flex; flex-direction: column; border-radius: 20px; background: rgba(31, 4, 11, .86); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(220, 192, 143, .22); box-shadow: var(--sh-lg); color: #f6eee6; transition: transform .5s var(--ease), opacity .4s; }
.map-filters.collapsed { transform: translateX(calc(-100% - 30px)); opacity: 0; pointer-events: none; }
.map-filters .mf-h { padding: 16px 18px 12px; border-bottom: 1px solid rgba(220, 192, 143, .12); }
.map-filters .mf-h b { font-size: 15px; }
.search { position: relative; margin-top: 12px; }
.search input { width: 100%; padding: 12px 14px 12px 40px; border-radius: 12px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12); color: #fff; outline: none; font-size: 14px; }
.search i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--o300); }
.mf-scroll { overflow: auto; padding: 12px 18px 18px; }
.mf-scroll .lab { font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--o400); font-weight: 700; margin: 14px 0 9px; }
.mf-scroll .lab:first-child { margin-top: 2px; }
.mf-scroll .chip { padding: 6px 10px; font-size: 11.5px; }
.res-list { display: flex; flex-direction: column; gap: 8px; }
.res { display: flex; gap: 10px; align-items: center; padding: 8px; border-radius: 12px; background: rgba(255, 255, 255, .04); border: 1px solid transparent; cursor: pointer; text-align: left; transition: all .2s; }
.res:hover { border-color: rgba(220, 192, 143, .35); background: rgba(255, 255, 255, .07); }
.res img { width: 52px; height: 52px; border-radius: 10px; object-fit: cover; flex: none; background: #3a0a16; }
.res .t { font-size: 12.5px; font-weight: 700; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.res .s { font-size: 11px; color: rgba(246, 238, 230, .55); margin-top: 3px; }
.map-tools { position: absolute; z-index: 500; top: 16px; right: 16px; display: flex; flex-direction: column; gap: 10px; }
.mt-btn { width: 46px; height: 46px; border-radius: 14px; background: rgba(31, 4, 11, .86); border: 1px solid rgba(220, 192, 143, .25); color: var(--o200); display: grid; place-items: center; font-size: 16px; backdrop-filter: blur(10px); box-shadow: var(--sh); transition: all .2s; }
.mt-btn:hover, .mt-btn.on { background: var(--gold-grad); color: var(--v900); }
.map-legend { position: absolute; z-index: 500; bottom: 22px; right: 16px; padding: 12px 14px; border-radius: 16px; background: rgba(31, 4, 11, .86); border: 1px solid rgba(220, 192, 143, .22); color: #f6eee6; font-size: 11.5px; backdrop-filter: blur(10px); max-width: 230px; }
.map-legend b { display: block; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--o300); margin-bottom: 8px; }
.map-legend .lg { display: flex; align-items: center; gap: 8px; margin: 4px 0; }
.map-legend .lg i { width: 12px; height: 12px; border-radius: 50%; }
.map-count { position: absolute; z-index: 500; bottom: 22px; left: 50%; transform: translateX(-50%); padding: 10px 18px; border-radius: 999px; background: rgba(31, 4, 11, .9); border: 1px solid rgba(220, 192, 143, .3); color: #fff; font-size: 13px; font-weight: 600; white-space: nowrap; }
.map-count b { color: var(--o300); }
/* Marcadores */
.pin { position: relative; width: 40px; height: 40px; }
.pin .b { position: absolute; inset: 0; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--c, #8a1538); border: 2.5px solid #fff; box-shadow: 0 8px 18px -4px rgba(0, 0, 0, .55); transition: transform .3s var(--ease); }
.pin i { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 15px; transform: translateY(-1px); }
.pin .ring { position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; border: 2px solid var(--c); animation: pulseRing 2s ease-out infinite; }
.pin:hover .b { transform: rotate(-45deg) scale(1.15); }
.pin.sel .b { transform: rotate(-45deg) scale(1.3); border-color: var(--o300); }
.marker-cluster-x { width: 46px !important; height: 46px !important; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle, rgba(201, 166, 109, .95) 0 52%, rgba(201, 166, 109, .25) 53% 100%); color: var(--v900); font-weight: 900; font-size: 14px; box-shadow: 0 10px 22px -6px rgba(0, 0, 0, .6); }
.deleg-label { background: none; border: 0; box-shadow: none; color: rgba(255, 255, 255, .92); font-weight: 800; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; text-shadow: 0 2px 8px rgba(0, 0, 0, .9), 0 0 2px rgba(0, 0, 0, .9); white-space: nowrap; }
.leaflet-tooltip.deleg-label::before { display: none; }
.leaflet-popup-content-wrapper { border-radius: 18px; padding: 0; overflow: hidden; background: #2a0510; color: #f6eee6; box-shadow: var(--sh-lg); border: 1px solid rgba(220, 192, 143, .3); }
.leaflet-popup-content { margin: 0; width: 270px !important; }
.leaflet-popup-tip { background: #2a0510; }
.leaflet-container a.leaflet-popup-close-button { color: #fff; top: 8px; right: 8px; width: 26px; height: 26px; border-radius: 50%; background: rgba(0, 0, 0, .45); font-size: 18px; line-height: 24px; text-align: center; padding: 0; z-index: 3; }
.pop img { width: 100%; height: 130px; object-fit: cover; }
.pop .in { padding: 12px 14px 14px; }
.pop .ty { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--o300); font-weight: 700; }
.pop h4 { margin: 5px 0 6px; font-size: 14px; line-height: 1.3; }
.pop .loc { font-size: 11.5px; color: rgba(246, 238, 230, .6); }
.pop .btn-gold { width: 100%; padding: 11px; margin-top: 12px; font-size: 12.5px; }
/* Hoja de lugar (nivel 2) */
.place { position: absolute; z-index: 600; top: 16px; right: 76px; bottom: 16px; width: 400px; border-radius: 24px; overflow: hidden; background: rgba(31, 4, 11, .94); border: 1px solid rgba(220, 192, 143, .28); backdrop-filter: blur(16px); color: #f6eee6; box-shadow: var(--sh-lg); display: flex; flex-direction: column; transform: translateX(120%); opacity: 0; transition: transform .7s var(--ease), opacity .5s; }
.place.show { transform: none; opacity: 1; }
.place .ph { position: relative; height: 230px; flex: none; overflow: hidden; }
.place .ph img { width: 100%; height: 100%; object-fit: cover; transition: opacity .5s, transform 6s ease-out; }
.place.show .ph img { transform: scale(1.08); }
.place .ph::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .1) 30%, rgba(31, 4, 11, .98)); }
.place .ph .cap { position: absolute; z-index: 2; left: 20px; right: 20px; bottom: 16px; }
.place .ph .cap .col { font-size: 11px; letter-spacing: .25em; text-transform: uppercase; color: var(--o300); font-weight: 700; }
.place .ph .cap h3 { margin: 6px 0 0; font-size: 19px; line-height: 1.25; }
.place .x { position: absolute; z-index: 3; top: 14px; right: 14px; width: 36px; height: 36px; border-radius: 50%; background: rgba(0, 0, 0, .45); color: #fff; }
.place .thumbs { display: flex; gap: 8px; padding: 12px 20px 0; overflow-x: auto; }
.place .thumbs img { width: 64px; height: 50px; border-radius: 10px; object-fit: cover; opacity: .6; cursor: pointer; border: 2px solid transparent; flex: none; transition: all .2s; }
.place .thumbs img.on { opacity: 1; border-color: var(--o300); }
.place .pb { padding: 14px 20px 20px; overflow: auto; flex: 1; }
.place .meta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0; }
.place .meta div { padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, .05); }
.place .meta span { display: block; font-size: 10px; letter-spacing: .15em; text-transform: uppercase; color: var(--o400); font-weight: 700; }
.place .meta b { font-size: 14px; }
.progress { height: 10px; border-radius: 6px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.progress i { display: block; height: 100%; background: var(--gold-grad); border-radius: 6px; width: 0; transition: width 1.4s var(--ease); }
.place .desc { font-size: 13.5px; line-height: 1.6; color: rgba(246, 238, 230, .8); }
/* Detalle completo (nivel 3) */
.overlay { position: fixed; inset: 0; z-index: 900; background: rgba(15, 2, 5, .72); backdrop-filter: blur(6px); display: flex; align-items: flex-start; justify-content: center; overflow: auto; padding: 30px 16px; animation: fadeIn .35s both; }
.overlay.light { background: rgba(42, 5, 16, .45); }
.detail { width: min(1080px, 100%); border-radius: 28px; overflow: hidden; background: #210409; color: #f6eee6; border: 1px solid rgba(220, 192, 143, .25); box-shadow: var(--sh-lg); animation: detailIn .7s var(--ease) both; }
@keyframes detailIn { from { opacity: 0; transform: translateY(40px) scale(.97) } to { opacity: 1; transform: none } }
.detail .dh { position: relative; height: 360px; overflow: hidden; }
.detail .dh img { width: 100%; height: 100%; object-fit: cover; }
.detail .dh::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .15), rgba(33, 4, 9, .2) 40%, #210409); }
.detail .dh .cap { position: absolute; z-index: 2; left: 34px; right: 34px; bottom: 24px; }
.detail .dh h2 { font-size: clamp(22px, 3vw, 34px); margin: 10px 0 6px; line-height: 1.15; }
.detail .dh .loc { color: rgba(246, 238, 230, .8); font-size: 14px; }
.detail .x { position: absolute; z-index: 3; top: 18px; right: 18px; width: 44px; height: 44px; border-radius: 50%; background: rgba(0, 0, 0, .5); color: #fff; font-size: 18px; }
.detail .db { padding: 10px 34px 34px; display: grid; grid-template-columns: 1.6fr 1fr; gap: 26px; }
.detail h4 { font-size: 11px; letter-spacing: .25em; text-transform: uppercase; color: var(--o300); margin: 24px 0 12px; }
.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.stat { padding: 14px; border-radius: 14px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(220, 192, 143, .12); }
.stat span { display: block; font-size: 10px; letter-spacing: .15em; text-transform: uppercase; color: var(--o400); font-weight: 700; margin-bottom: 6px; }
.stat b { font-size: 17px; }
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.gallery .g { position: relative; aspect-ratio: 4/3; border-radius: 12px; overflow: hidden; cursor: zoom-in; background: #3a0a16; }
.gallery .g img, .gallery .g video { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.gallery .g:hover img { transform: scale(1.08); }
.gallery .g .play { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 28px; background: rgba(0, 0, 0, .25); }
.timeline { position: relative; padding-left: 26px; }
.timeline::before { content: ''; position: absolute; left: 8px; top: 6px; bottom: 6px; width: 2px; background: linear-gradient(180deg, var(--o400), rgba(201, 166, 109, .1)); }
.tl { position: relative; padding: 0 0 20px; }
.tl::before { content: ''; position: absolute; left: -24px; top: 4px; width: 14px; height: 14px; border-radius: 50%; background: var(--v900); border: 3px solid var(--o400); }
.tl .when { font-size: 11.5px; color: var(--o300); font-weight: 700; letter-spacing: .05em; }
.tl .tt { font-weight: 700; margin: 4px 0; font-size: 14px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.tl .nn { font-size: 13px; color: rgba(246, 238, 230, .72); line-height: 1.55; }
.tl .by { font-size: 11.5px; color: rgba(246, 238, 230, .45); margin-top: 4px; }
.tl .med { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.tl .med img, .tl .med video { width: 84px; height: 62px; object-fit: cover; border-radius: 9px; cursor: zoom-in; }
.contact { padding: 18px; border-radius: 18px; background: linear-gradient(160deg, rgba(201, 166, 109, .14), rgba(255, 255, 255, .03)); border: 1px solid rgba(220, 192, 143, .25); }
.contact .who { display: flex; gap: 14px; align-items: center; }
.contact .av { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: var(--gold-grad); color: var(--v900); font-weight: 900; font-size: 19px; flex: none; }
.contact .nm { font-weight: 800; font-size: 15px; }
.contact .rl { font-size: 12px; color: rgba(246, 238, 230, .6); }
.cbtn { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding: 12px 14px; border-radius: 14px; background: rgba(0, 0, 0, .25); text-decoration: none; font-size: 13.5px; font-weight: 600; transition: background .2s; }
.cbtn:hover { background: rgba(0, 0, 0, .45); }
.cbtn i { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: rgba(201, 166, 109, .2); color: var(--o200); }
.cbtn.call i { background: #3f9c6d; color: #fff; }
.cbtn.wa i { background: #25d366; color: #fff; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; font-size: 13px; }
.kv span { color: var(--o400); font-weight: 600; }
.mini-map { height: 220px; border-radius: 16px; overflow: hidden; position: relative; border: 1px solid rgba(220, 192, 143, .2); }
/* Lightbox */
.lightbox { position: fixed; inset: 0; z-index: 1000; background: rgba(8, 1, 3, .94); display: grid; place-items: center; animation: fadeIn .3s; }
.lightbox img, .lightbox video { max-width: 92vw; max-height: 84vh; border-radius: 12px; box-shadow: var(--sh-lg); animation: pop .5s var(--ease); }
.lightbox .x, .lightbox .nv { position: absolute; width: 50px; height: 50px; border-radius: 50%; background: rgba(255, 255, 255, .1); color: #fff; font-size: 20px; }
.lightbox .x { top: 20px; right: 20px; }
.lightbox .nv.p { left: 20px; top: 50%; } .lightbox .nv.n { right: 20px; top: 50%; }
.lightbox .cap { position: absolute; bottom: 20px; left: 0; right: 0; text-align: center; color: rgba(255, 255, 255, .7); font-size: 13px; }
/* Obras grid */
.works { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }
.work { border-radius: 20px; overflow: hidden; cursor: pointer; transition: transform .4s var(--ease), border-color .3s; text-align: left; color: inherit; padding: 0; }
.work:hover { transform: translateY(-6px); border-color: rgba(220, 192, 143, .45); }
.work .im { position: relative; height: 180px; overflow: hidden; }
.work .im img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.work:hover .im img { transform: scale(1.08); }
.work .im .st { position: absolute; top: 12px; left: 12px; }
.work .im .ty { position: absolute; bottom: 12px; left: 12px; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; color: #fff; border: 2px solid rgba(255, 255, 255, .8); }
.work .wb { padding: 14px 16px 16px; }
.work h4 { margin: 0 0 6px; font-size: 14.5px; line-height: 1.3; }
.work .loc { font-size: 12px; color: rgba(246, 238, 230, .6); margin-bottom: 12px; }
.work .pr { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; }
.work .pr .progress { flex: 1; height: 7px; }
.toolbar { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 18px; }
.select-dark { padding: 11px 14px; border-radius: 12px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(220, 192, 143, .2); color: #fff; outline: none; font-size: 13.5px; }
.select-dark option { color: #222; }
/* Calendario */
.cal { padding: 18px; }
.cal-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.cal-h b { font-size: 18px; text-transform: capitalize; }
.cal-h button { width: 38px; height: 38px; border-radius: 12px; background: rgba(255, 255, 255, .07); color: var(--o200); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-grid .dw { text-align: center; font-size: 10.5px; letter-spacing: .15em; color: var(--o400); font-weight: 700; padding: 6px 0; }
.cal-d { min-height: 82px; border-radius: 12px; padding: 7px; background: rgba(255, 255, 255, .035); border: 1px solid transparent; text-align: left; display: flex; flex-direction: column; gap: 4px; color: inherit; transition: all .2s; }
.cal-d:hover { border-color: rgba(220, 192, 143, .35); }
.cal-d.out { opacity: .25; }
.cal-d.sel { border-color: var(--o300); background: rgba(201, 166, 109, .14); }
.cal-d.today .n { background: var(--gold-grad); color: var(--v900); }
.cal-d .n { font-size: 12px; font-weight: 800; width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; }
.cal-d .dots { display: flex; flex-wrap: wrap; gap: 3px; }
.cal-d .dots i { width: 7px; height: 7px; border-radius: 50%; }
.cal-d .cnt { margin-top: auto; font-size: 10.5px; color: rgba(246, 238, 230, .6); font-weight: 700; }
/* Comunes */
.empty { text-align: center; padding: 40px 20px; color: rgba(246, 238, 230, .5); }
.empty i { font-size: 34px; color: var(--o500); margin-bottom: 12px; display: block; }
.loader { display: grid; place-items: center; min-height: 60vh; }
.loader .sp { width: 54px; height: 54px; border-radius: 50%; border: 3px solid rgba(201, 166, 109, .2); border-top-color: var(--o300); animation: spin 1s linear infinite; }
.skel { background: linear-gradient(90deg, rgba(255, 255, 255, .04) 25%, rgba(255, 255, 255, .1) 37%, rgba(255, 255, 255, .04) 63%); background-size: 800px 100%; animation: shimmer 1.4s infinite; border-radius: 12px; }
#toast-zone { position: fixed; z-index: 2000; left: 50%; bottom: calc(24px + var(--safe-b)); transform: translateX(-50%); display: flex; flex-direction: column; gap: 10px; align-items: center; pointer-events: none; }
.toast { pointer-events: auto; padding: 13px 20px; border-radius: 14px; background: #2a0510; color: #fff; border: 1px solid rgba(220, 192, 143, .4); box-shadow: var(--sh-lg); font-weight: 600; font-size: 14px; display: flex; gap: 10px; align-items: center; animation: rise .4s var(--ease); }
.toast.ok i { color: #7ee2a8; } .toast.err i { color: #ff9fb2; }

/* ------------------------------------------------------------------ CUENTA DEPENDENCIA (light, mobile-first) */
.ua { min-height: 100dvh; background: var(--crema); color: var(--ink); padding-bottom: calc(90px + var(--safe-b)); }
.ua-top { position: sticky; top: 0; z-index: 40; background: var(--vino-grad); color: #fff; padding: 16px 18px 18px; border-radius: 0 0 26px 26px; box-shadow: 0 14px 30px -18px rgba(42, 5, 16, .9); }
.ua-top .r1 { display: flex; align-items: center; gap: 12px; max-width: 1100px; margin: 0 auto; }
.ua-top .si { width: 46px; height: 46px; border-radius: 14px; background: var(--gold-grad); color: var(--v900); display: grid; place-items: center; font-size: 19px; flex: none; }
.ua-top .nm { font-weight: 800; font-size: 16px; line-height: 1.15; }
.ua-top .dp { font-size: 12px; color: var(--o200); }
.ua-top .grow { flex: 1; min-width: 0; }
.ua-top .ib { width: 42px; height: 42px; border-radius: 13px; background: rgba(255, 255, 255, .12); color: #fff; }
.ua-body { max-width: 1100px; margin: 0 auto; padding: 18px 16px; }
.ua-nav { position: fixed; z-index: 50; left: 0; right: 0; bottom: 0; background: #fff; border-top: 1px solid var(--line); display: flex; justify-content: space-around; padding: 8px 6px calc(8px + var(--safe-b)); box-shadow: 0 -10px 30px -18px rgba(42, 5, 16, .4); }
.ua-nav button { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; color: var(--muted); padding: 6px 0; }
.ua-nav button i { font-size: 19px; }
.ua-nav button.on { color: var(--v500); }
.ua-nav .fab { flex: none; width: 62px; height: 62px; margin-top: -30px; border-radius: 50%; background: var(--gold-grad); color: var(--v900); font-size: 24px; box-shadow: 0 12px 26px -8px rgba(161, 124, 69, .9); border: 4px solid #fff; justify-content: center; }
.card { background: #fff; border-radius: var(--r); border: 1px solid var(--line); box-shadow: 0 10px 30px -24px rgba(42, 5, 16, .5); }
.ua .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.ua .st { padding: 14px; }
.ua .st b { display: block; font-size: 24px; font-weight: 800; color: var(--v600); }
.ua .st span { font-size: 12px; color: var(--muted); font-weight: 600; }
.ua h3.t { font-size: 16px; font-weight: 800; margin: 22px 0 12px; display: flex; align-items: center; justify-content: space-between; }
.u-item { display: flex; gap: 12px; padding: 12px; align-items: center; cursor: pointer; transition: transform .2s; margin-bottom: 10px; text-align: left; width: 100%; }
.u-item:active { transform: scale(.98); }
.u-item img { width: 64px; height: 64px; border-radius: 14px; object-fit: cover; flex: none; background: var(--o100); }
.u-item .ph0 { width: 64px; height: 64px; border-radius: 14px; flex: none; display: grid; place-items: center; font-size: 22px; color: #fff; }
.u-item .tt { font-weight: 700; font-size: 14px; line-height: 1.3; }
.u-item .ss { font-size: 12px; color: var(--muted); margin-top: 3px; }
.u-item .pr { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 11.5px; font-weight: 700; color: var(--v600); }
.u-item .pr .bar { flex: 1; height: 6px; border-radius: 4px; background: var(--o100); overflow: hidden; }
.u-item .pr .bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--v500), var(--o500)); }
.lpill { display: inline-flex; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; background: var(--o100); color: var(--o700); }
.lpill.ok { background: #e3f4ea; color: #2c7a52; } .lpill.warn { background: #fdf0d9; color: #a06a12; } .lpill.plan { background: #e2eefa; color: #2e6aa4; } .lpill.off { background: #f3e1e5; color: var(--v500); }
.fld { margin-bottom: 14px; }
.fld label { display: block; font-size: 12px; font-weight: 700; color: var(--v700); margin-bottom: 7px; letter-spacing: .02em; }
.inp { width: 100%; padding: 13px 14px; border-radius: 13px; border: 1.5px solid var(--line); background: #fff; color: var(--ink); outline: none; transition: border .2s, box-shadow .2s; }
.inp:focus { border-color: var(--o500); box-shadow: 0 0 0 4px rgba(201, 166, 109, .18); }
textarea.inp { min-height: 110px; resize: vertical; line-height: 1.5; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.row3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 13px 18px; border-radius: 13px; font-weight: 700; font-size: 14px; transition: all .2s; }
.btn-v { background: var(--v600); color: #fff; box-shadow: 0 10px 20px -12px rgba(107, 15, 36, .9); }
.btn-v:hover { background: var(--v500); }
.btn-l { background: #fff; color: var(--v600); border: 1.5px solid var(--line); }
.btn-l:hover { border-color: var(--o400); }
.btn-d { background: #fbe9ec; color: #b42340; }
.btn-sm { padding: 8px 12px; font-size: 12.5px; border-radius: 10px; }
.btn.block { width: 100%; }
.btn:disabled { opacity: .55; }
.type-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.type-opt { padding: 14px 6px; border-radius: 14px; background: #fff; border: 1.5px solid var(--line); display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 700; text-align: center; line-height: 1.2; color: var(--ink); transition: all .2s var(--ease); }
.type-opt i { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: #fff; font-size: 16px; }
.type-opt.on { border-color: var(--v500); background: var(--v100); transform: translateY(-2px); box-shadow: 0 10px 20px -14px rgba(107, 15, 36, .8); }
.steps { display: flex; gap: 6px; margin-bottom: 18px; }
.steps i { flex: 1; height: 5px; border-radius: 4px; background: var(--line); transition: background .4s; }
.steps i.on { background: linear-gradient(90deg, var(--v500), var(--o500)); }
.step-h { font-size: 20px; font-weight: 800; margin: 0 0 4px; }
.step-s { font-size: 13px; color: var(--muted); margin: 0 0 18px; }
.pick-map { height: 52vh; min-height: 300px; border-radius: 18px; overflow: hidden; position: relative; border: 1.5px solid var(--line); }
.pick-map .center-pin { position: absolute; z-index: 500; left: 50%; top: 50%; transform: translate(-50%, -100%); pointer-events: none; font-size: 40px; color: var(--v500); filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .35)); transition: transform .2s; }
.pick-map.moving .center-pin { transform: translate(-50%, -125%); }
.pick-map .gps { position: absolute; z-index: 500; right: 12px; bottom: 12px; }
.loc-info { margin-top: 12px; padding: 12px 14px; border-radius: 14px; background: var(--o100); font-size: 13px; display: flex; gap: 10px; align-items: center; }
.loc-info i { color: var(--v500); font-size: 18px; }
.media-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.media-add { aspect-ratio: 1; border-radius: 14px; border: 2px dashed var(--o400); background: var(--o100); color: var(--o700); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; font-size: 12px; font-weight: 700; }
.media-add i { font-size: 24px; }
.media-it { position: relative; aspect-ratio: 1; border-radius: 14px; overflow: hidden; background: #eee; }
.media-it img, .media-it video { width: 100%; height: 100%; object-fit: cover; }
.media-it .rm { position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; border-radius: 50%; background: rgba(0, 0, 0, .6); color: #fff; font-size: 12px; }
.media-it .up { position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: rgba(0, 0, 0, .3); }
.media-it .up i { display: block; height: 100%; background: var(--o400); transition: width .2s; }
.media-it .vbad { position: absolute; left: 6px; bottom: 10px; font-size: 11px; color: #fff; background: rgba(0, 0, 0, .55); padding: 3px 7px; border-radius: 6px; }
.range { width: 100%; accent-color: var(--v500); height: 30px; }
.big-pct { font-size: 40px; font-weight: 900; color: var(--v600); text-align: center; }
.sheet-bg { position: fixed; inset: 0; z-index: 900; background: rgba(42, 5, 16, .5); backdrop-filter: blur(3px); animation: fadeIn .3s; display: flex; align-items: flex-end; justify-content: center; }
.sheet { width: min(720px, 100%); max-height: 94dvh; overflow: auto; background: var(--crema); border-radius: 26px 26px 0 0; padding: 10px 18px calc(24px + var(--safe-b)); animation: sheetUp .5s var(--ease); color: var(--ink); }
.sheet::before { content: ''; display: block; width: 44px; height: 5px; border-radius: 3px; background: #d8cbbd; margin: 0 auto 14px; }
.sheet .sh-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.sheet .sh-h h3 { margin: 0; font-size: 18px; }
.sheet .sh-h button { width: 36px; height: 36px; border-radius: 50%; background: #fff; border: 1px solid var(--line); }
@keyframes sheetUp { from { transform: translateY(100%) } to { transform: none } }
.voice { position: absolute; right: 10px; bottom: 10px; width: 40px; height: 40px; border-radius: 50%; background: var(--v600); color: #fff; }
.voice.rec { background: #d6455d; animation: halo2 1s infinite; }
@keyframes halo2 { 50% { box-shadow: 0 0 0 10px rgba(214, 69, 93, .2) } }
.u-tl { position: relative; padding-left: 24px; }
.u-tl::before { content: ''; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 2px; background: var(--o300); }
.u-tl .it { position: relative; padding-bottom: 16px; }
.u-tl .it::before { content: ''; position: absolute; left: -22px; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 3px solid var(--v500); }
.u-tl .w { font-size: 11.5px; color: var(--o700); font-weight: 700; }
.u-tl .n { font-size: 13.5px; margin-top: 3px; line-height: 1.5; }
.u-tl .m { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.u-tl .m img, .u-tl .m video { width: 70px; height: 54px; border-radius: 8px; object-fit: cover; }
.light-cal .cal-d { background: #fff; border: 1px solid var(--line); min-height: 64px; }
.light-cal .cal-d.sel { border-color: var(--v500); background: var(--v100); }
.light-cal .cal-grid .dw { color: var(--o700); }
.light-cal .cal-h button { background: var(--o100); color: var(--v600); }
.light-cal .cal-d .cnt { color: var(--muted); }

/* ------------------------------------------------------------------ SÚPER ADMIN */
.ad { min-height: 100dvh; display: grid; grid-template-columns: 260px 1fr; background: #f6f1ea; color: var(--ink); }
.ad-side { position: sticky; top: 0; height: 100dvh; overflow: auto; background: var(--vino-grad); color: #fff; padding: 20px 14px; display: flex; flex-direction: column; gap: 3px; }
.ad-side .brand { display: flex; flex-direction: column; align-items: center; gap: 8px; padding-bottom: 16px; margin-bottom: 10px; border-bottom: 1px solid rgba(220, 192, 143, .2); }
.ad-side .brand img { height: 46px; }
.ad-side .brand span { font-size: 10px; letter-spacing: .3em; color: var(--o300); font-weight: 700; }
.ad-nav { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 12px; font-size: 13.5px; font-weight: 600; color: rgba(255, 255, 255, .75); text-align: left; transition: all .2s; }
.ad-nav i { width: 20px; text-align: center; color: var(--o300); }
.ad-nav:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.ad-nav.on { background: var(--gold-grad); color: var(--v900); }
.ad-nav.on i { color: var(--v900); }
.ad-side .grp { font-size: 10px; letter-spacing: .25em; text-transform: uppercase; color: rgba(234, 214, 176, .55); font-weight: 700; margin: 14px 14px 6px; }
.ad-main { min-width: 0; }
.ad-top { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 14px; padding: 16px 26px; background: rgba(246, 241, 234, .9); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.ad-top h1 { margin: 0; font-size: 20px; font-weight: 800; color: var(--v700); }
.ad-top .grow { flex: 1; }
.ad-body { padding: 22px 26px 60px; }
.ad-menu-btn { display: none; }
.tbl-wrap { overflow: auto; border-radius: 16px; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 13px; background: #fff; }
.tbl th { text-align: left; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--o700); padding: 13px 14px; background: #fbf7f1; border-bottom: 1px solid var(--line); white-space: nowrap; position: sticky; top: 0; }
.tbl td { padding: 11px 14px; border-bottom: 1px solid #f2ebe2; vertical-align: middle; }
.tbl tr:hover td { background: #fdfaf6; }
.tbl .thumb { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; }
.tbl .acts { display: flex; gap: 6px; justify-content: flex-end; }
.ibtn { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: #f6efe6; color: var(--v600); transition: all .2s; }
.ibtn:hover { background: var(--v600); color: #fff; }
.ibtn.del:hover { background: #c0394f; }
.switch { position: relative; width: 46px; height: 26px; border-radius: 999px; background: #d9ccd0; transition: background .25s; flex: none; display: inline-block; }
.switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .25s var(--ease); box-shadow: 0 2px 6px rgba(0, 0, 0, .2); }
.switch.on { background: linear-gradient(90deg, var(--v500), var(--o500)); }
.switch.on::after { transform: translateX(20px); }
.mod-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.mod { padding: 18px; display: flex; gap: 14px; align-items: center; }
.mod .mi { width: 46px; height: 46px; border-radius: 13px; background: var(--v100); color: var(--v600); display: grid; place-items: center; font-size: 18px; flex: none; }
.mod b { font-size: 14px; } .mod p { margin: 3px 0 0; font-size: 12px; color: var(--muted); }
.modal { width: min(860px, 100%); background: #fff; border-radius: 24px; box-shadow: var(--sh-lg); animation: detailIn .5s var(--ease); color: var(--ink); overflow: hidden; }
.modal .mh { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--line); background: #fbf7f1; }
.modal .mh h3 { margin: 0; font-size: 17px; color: var(--v700); }
.modal .mb { padding: 20px 22px; max-height: 70vh; overflow: auto; }
.modal .mf { display: flex; gap: 10px; justify-content: flex-end; padding: 14px 22px; border-top: 1px solid var(--line); background: #fbf7f1; }
.fgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 16px; }
.fgrid .full { grid-column: 1 / -1; }
.pres-tbl input { width: 70px; padding: 8px; border-radius: 9px; border: 1.5px solid var(--line); text-align: center; font-weight: 700; font-size: 15px; }
.pres-tbl td, .pres-tbl th { text-align: center; }
.pres-tbl td:first-child, .pres-tbl th:first-child { text-align: left; }
.pres-tbl tfoot td { font-weight: 800; color: var(--v600); background: #fbf7f1; font-size: 15px; }
.ad .kpis { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.ad .kpi { background: #fff; border: 1px solid var(--line); border-radius: 18px; }
.ad .kpi .ic { background: var(--v100); color: var(--v600); }
.ad .kpi span { color: var(--muted); }
.ad .kpi::after { background: radial-gradient(circle, rgba(201, 166, 109, .25), transparent 70%); }
.ad .chart-box { height: 260px; }
.gal-edit { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.gal-edit .media-it { aspect-ratio: 1; }
.gal-edit .media-it .cv { position: absolute; left: 6px; top: 6px; font-size: 10px; background: var(--o500); color: #fff; padding: 2px 6px; border-radius: 5px; font-weight: 700; }

/* ------------------------------------------------------------------ RESPONSIVE */
@media (max-width: 1200px) {
  .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sector-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .choices { grid-template-columns: 1fr; max-width: 520px; }
  .choice { padding: 22px; display: grid; grid-template-columns: auto 1fr; gap: 0 18px; align-items: center; }
  .choice .ic { margin: 0; grid-row: span 2; width: 56px; height: 56px; }
  .choice .go { display: none; }
  .choice h3 { font-size: 19px; margin-bottom: 4px; }
  .choice p { font-size: 13px; }
  .pv { grid-template-columns: 1fr; }
  .pv-side { display: none; }
  .pv-mobile-nav { display: flex; position: fixed; z-index: 800; left: 10px; right: 10px; bottom: calc(10px + var(--safe-b)); border-radius: 20px; background: rgba(31, 4, 11, .94); border: 1px solid rgba(220, 192, 143, .25); backdrop-filter: blur(14px); padding: 6px; justify-content: space-around; box-shadow: var(--sh-lg); }
  .pv-mobile-nav button { flex: 1; display: flex; flex-direction: column; gap: 4px; align-items: center; font-size: 10px; font-weight: 700; color: rgba(246, 238, 230, .6); padding: 8px 0; border-radius: 14px; }
  .pv-mobile-nav button i { font-size: 17px; }
  .pv-mobile-nav button.on { color: var(--v900); background: var(--gold-grad); }
  .pv-top { padding: 12px 16px; flex-wrap: wrap; }
  .pv-top .brand-m { display: block !important; height: 34px; }
  .pv-top h1 { font-size: 16px; }
  .pv-top .seg { order: 3; width: 100%; overflow-x: auto; }
  .pv-top .seg button { flex: 1; padding: 8px 10px; }
  .pv-body { padding: 18px 14px 110px; }
  .hero { grid-template-columns: 1fr; padding: 24px; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .kpis .kpi:last-child { grid-column: span 2; }
  .sector-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .map-wrap { height: calc(100dvh - 118px); }
  .map-filters { left: 10px; right: 10px; top: 10px; width: auto; max-height: 58%; }
  .map-tools { top: auto; bottom: 100px; right: 10px; }
  .map-legend { display: none; }
  .map-count { bottom: 96px; }
  .place { left: 0; right: 0; top: auto; bottom: 0; width: auto; max-height: 82%; border-radius: 26px 26px 0 0; transform: translateY(110%); }
  .place .ph { height: 190px; }
  .detail { border-radius: 22px; }
  .overlay { padding: 0; }
  .overlay .detail { border-radius: 0; min-height: 100dvh; }
  .detail .dh { height: 260px; }
  .detail .dh .cap { left: 20px; right: 20px; }
  .detail .db { grid-template-columns: 1fr; padding: 4px 18px 120px; gap: 0; }
  .stat-row { grid-template-columns: repeat(2, 1fr); }
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .cal-d { min-height: 54px; padding: 5px; }
  .cal-d .cnt { display: none; }
  .ad { grid-template-columns: 1fr; }
  .ad-side { position: fixed; z-index: 950; left: 0; top: 0; bottom: 0; width: 270px; transform: translateX(-100%); transition: transform .4s var(--ease); }
  .ad-side.open { transform: none; box-shadow: var(--sh-lg); }
  .ad-menu-btn { display: grid; }
  .ad-top { padding: 12px 14px; }
  .ad-body { padding: 16px 12px 60px; }
  .ad .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fgrid { grid-template-columns: 1fr; }
  .modal { border-radius: 0; min-height: 100dvh; }
  .modal .mb { max-height: none; }
}
@media (max-width: 560px) {
  #home header img { height: 56px; }
  #home .lead { font-size: 14px; margin-bottom: 26px; }
  .dep-grid { grid-template-columns: repeat(3, 1fr); }
  .type-grid { grid-template-columns: repeat(3, 1fr); }
  .ua .stats { grid-template-columns: repeat(2, 1fr); }
  .row3 { grid-template-columns: 1fr 1fr; }
  .keypad { gap: 12px; max-width: 270px; }
  .key { font-size: 26px; }
  .sector-card .ct { font-size: 22px; }
  .sector-card .nm { font-size: 12px; }
  .sector-card .si { width: 36px; height: 36px; font-size: 15px; }
  .hero .m b { font-size: 22px; }
}
.tiles-dark .leaflet-tile-pane { filter: sepia(.45) hue-rotate(-28deg) saturate(1.8) brightness(.62) contrast(1.1); }
.tiles-dark .leaflet-shadow-pane { filter: sepia(.6) saturate(1.4) brightness(1.15); }