/* LOCAÇÕES — composição visual aprovada / referência panorâmica */
:root{
  --loca-ref-navy:#05263b;
  --loca-ref-navy-deep:#031b2a;
  --loca-ref-blue:#0c4566;
  --loca-ref-linen:#f5efe5;
  --loca-ref-linen-2:#e9dfd1;
  --loca-ref-gold:#c99750;
  --loca-ref-ink:#0b2d48;
}

html.loca-approved body{background:#eee7dc!important}
html.loca-approved .app:not(.hubview){background:linear-gradient(145deg,#f5efe6 0%,#ebe2d6 55%,#f8f4ed 100%)!important}
html.loca-approved .main{background:transparent!important}
html.loca-approved #content{padding:0 16px 30px!important;background:transparent!important}

/* Sidebar no mesmo vocabulário da referência: azul profundo + relevo + dourado */
html.loca-approved #sidebar[data-system="loca"],
html.loca-approved #sidebar[data-system="repact"]{
  background:
    linear-gradient(180deg,rgba(2,27,43,.08) 0 54%,rgba(2,24,38,.72) 79%,rgba(1,18,29,.96) 100%),
    radial-gradient(110% 58% at 22% 15%,rgba(54,139,184,.24),transparent 58%),
    linear-gradient(180deg,#0a3a56 0%,#052b43 46%,#031d2f 100%)!important;
  border-right:1px solid rgba(216,178,115,.48)!important;
  box-shadow:18px 0 46px -34px rgba(0,19,31,.92),inset -1px 0 rgba(255,255,255,.04)!important;
}
html.loca-approved #sidebar[data-system="loca"]:before,
html.loca-approved #sidebar[data-system="repact"]:before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.9;
  background:
    linear-gradient(180deg,transparent 0 57%,rgba(2,24,38,.25) 66%,rgba(2,20,32,.78) 100%),
    url('assets/cards-emp/centro-executivo-carl-hoepcke.jpg') center bottom/100% auto no-repeat,
    repeating-radial-gradient(ellipse at -25% 90%,transparent 0 34px,rgba(103,169,203,.07) 35px 36px);
  mix-blend-mode:normal;
}
html.loca-approved #sidebar .brand,
html.loca-approved #sidebar .navwrap,
html.loca-approved #sidebar .navfoot{position:relative;z-index:2}
html.loca-approved #sidebar .navitem{
  margin:6px 10px!important;min-height:48px!important;border-radius:12px!important;
  border:1px solid rgba(198,220,231,.13)!important;
  background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(0,16,27,.11))!important;
  box-shadow:inset 0 1px rgba(255,255,255,.04),0 8px 18px -18px rgba(0,0,0,.8)!important;
}
html.loca-approved #sidebar .navitem:hover{
  transform:translateX(2px);border-color:rgba(222,188,130,.34)!important;
  background:linear-gradient(145deg,rgba(32,93,128,.42),rgba(4,36,57,.5))!important;
}
html.loca-approved #sidebar .navitem.active{
  border-color:rgba(235,199,137,.88)!important;
  background:
    radial-gradient(135% 170% at 100% 46%,rgba(58,137,216,.40),transparent 45%),
    linear-gradient(135deg,rgba(21,78,111,.96),rgba(4,39,61,.98))!important;
  box-shadow:0 14px 30px -22px rgba(33,114,194,.72),inset 0 1px rgba(255,255,255,.14),0 0 0 1px rgba(213,173,105,.06)!important;
}
html.loca-approved #sidebar .navitem.active:after{
  content:"";position:absolute;left:-11px;top:11px;bottom:11px;width:3px;border-radius:4px;
  background:linear-gradient(#f1d29e,#b9772f);box-shadow:0 0 12px rgba(229,181,100,.68);
}

/* Topbar flutuante sobre a fotografia, sem faixa rígida */
html.loca-approved #topbar{
  position:absolute!important;left:0;right:0;top:0;z-index:50;height:70px!important;
  padding:10px 28px 8px 34px!important;
  background:linear-gradient(90deg,rgba(249,246,240,.86) 0%,rgba(249,246,240,.62) 31%,rgba(247,243,235,.22) 52%,rgba(5,34,53,.04) 100%)!important;
  border:0!important;box-shadow:none!important;
  backdrop-filter:blur(7px) saturate(1.04)!important;-webkit-backdrop-filter:blur(7px) saturate(1.04)!important;
}
html.loca-approved #topbar:after{
  content:"";position:absolute;left:28px;right:28px;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(204,158,91,.28) 30%,rgba(255,255,255,.44) 58%,rgba(94,151,179,.15) 82%,transparent);
}
html.loca-approved #topbar .gsearch{width:min(470px,39vw);max-width:470px;position:relative;z-index:2}
html.loca-approved #topbar .gsearch:before{
  content:"";position:absolute;inset:-5px -8px;border-radius:17px;z-index:-1;
  background:linear-gradient(145deg,rgba(255,255,255,.30),rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.34);box-shadow:0 12px 26px -24px rgba(0,30,48,.52);
}
html.loca-approved #topbar input{
  height:40px!important;border-radius:12px!important;background:rgba(255,255,255,.72)!important;
  border:1px solid rgba(59,87,104,.13)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.95),0 8px 24px -23px rgba(0,30,48,.58)!important;
}
html.loca-approved #topbar .iconbtn{
  background:rgba(247,243,236,.34)!important;border:1px solid rgba(188,148,88,.24)!important;
  backdrop-filter:blur(9px);box-shadow:inset 0 1px rgba(255,255,255,.26),0 10px 24px -23px rgba(0,26,43,.5)!important;
}
html.loca-approved #topbar .avatar{border:1px solid rgba(211,172,108,.38)!important;box-shadow:0 9px 24px -20px rgba(0,25,42,.68)!important}

/* HERO: foto real de Florianópolis é o plano de fundo principal */
html.loca-approved .la-hero{
  min-height:272px!important;border-radius:0 0 30px 30px!important;border:0!important;overflow:hidden!important;
  background:
    linear-gradient(90deg,rgba(249,245,238,.96) 0%,rgba(249,245,238,.88) 24%,rgba(246,240,230,.54) 36%,rgba(242,234,220,.16) 47%,rgba(6,40,61,.03) 63%,rgba(2,25,40,.13) 100%),
    linear-gradient(180deg,rgba(255,255,255,.10),rgba(2,25,40,.10)),
    url('https://upload.wikimedia.org/wikipedia/commons/0/02/Ponte_Herc%C3%ADlio_Luz_-_Florian%C3%B3polis_-_20220911165825.jpg') center 49%/cover no-repeat!important;
  box-shadow:0 34px 76px -48px rgba(0,28,46,.58),inset 0 -1px rgba(255,255,255,.52)!important;
}
/* primeira onda de linho */
html.loca-approved .la-hero:before{
  content:""!important;position:absolute!important;z-index:1!important;
  left:-11%!important;top:-185px!important;width:70%!important;height:366px!important;
  transform:rotate(-4.1deg)!important;
  border-radius:0 0 78% 13% / 0 0 72% 16%!important;
  background:
    radial-gradient(ellipse at 79% 96%,rgba(255,255,255,.72),transparent 43%),
    radial-gradient(ellipse at 16% 14%,rgba(255,255,255,.88),transparent 52%),
    linear-gradient(138deg,#faf7f1 0%,#f0e7dc 62%,#e5d6c4 100%)!important;
  box-shadow:28px 25px 68px -55px rgba(2,37,59,.62),inset -1px -1px rgba(190,151,96,.12)!important;
  opacity:.97!important;
}
/* segunda onda/transparência e linhas arquitetônicas */
html.loca-approved .la-hero:after{
  content:""!important;position:absolute!important;inset:0!important;z-index:2!important;pointer-events:none!important;
  background:
    radial-gradient(113% 92% at 8% -44%,transparent 0 55.3%,rgba(198,153,87,.24) 55.65%,transparent 56.1%),
    radial-gradient(103% 80% at 17% -33%,transparent 0 60.4%,rgba(255,255,255,.62) 60.8%,transparent 61.4%),
    radial-gradient(93% 69% at 28% -29%,transparent 0 63.5%,rgba(84,145,175,.13) 63.9%,transparent 64.3%),
    linear-gradient(100deg,transparent 0 42%,rgba(255,255,255,.04) 54%,rgba(5,39,60,.04) 72%,rgba(1,18,30,.16) 100%)!important;
}
html.loca-approved .la-hero-copy{
  left:42px!important;top:91px!important;z-index:6!important;max-width:480px!important;padding-left:0!important;
}
html.loca-approved .la-hero-copy:before{
  content:"";position:absolute;z-index:-1;left:-78px;top:-52px;width:595px;height:205px;
  border-radius:0 0 72% 13% / 0 0 76% 18%;transform:rotate(1.2deg);
  background:linear-gradient(123deg,rgba(251,248,242,.72) 0%,rgba(248,244,236,.42) 66%,rgba(248,244,236,0) 100%);
  box-shadow:inset 0 -1px rgba(190,145,79,.09);
}
html.loca-approved .la-hero-copy:after{
  content:"";position:absolute;left:-92px;top:137px;width:655px;height:1px;transform:rotate(-6.4deg);transform-origin:left center;
  background:linear-gradient(90deg,transparent 0%,rgba(193,146,79,.35) 28%,rgba(80,143,173,.16) 73%,transparent 100%);
}
html.loca-approved .la-kicker{color:#315f77!important;font-size:9px!important;letter-spacing:.29em!important}
html.loca-approved .la-hero h1{
  margin:9px 0 6px!important;color:#0a2b45!important;font:500 clamp(34px,3.3vw,48px)/1.01 Georgia,'Times New Roman',serif!important;
  letter-spacing:-.035em!important;text-shadow:0 1px rgba(255,255,255,.65)!important;
}
html.loca-approved .la-hero p{color:#547080!important;font-size:12px!important}
html.loca-approved .la-hero-loc{
  z-index:6!important;right:32px!important;top:91px!important;bottom:auto!important;color:#eef6f8!important;
  font-size:8px!important;letter-spacing:.18em!important;text-shadow:0 2px 14px rgba(0,21,35,.82)!important;
}
html.loca-approved .la-hero-note{
  position:absolute;z-index:6;right:34px;top:119px;width:145px;text-align:right;
  color:rgba(255,255,255,.91);font:italic 11px/1.35 Georgia,'Times New Roman',serif;
  text-shadow:0 2px 13px rgba(0,20,33,.82);
}
html.loca-approved .la-hero-note:before{content:"";display:block;width:27px;height:1px;margin:0 0 9px auto;background:linear-gradient(90deg,transparent,#d8aa66)}
html.loca-approved .la-hero-credit{position:absolute;right:14px;bottom:7px;z-index:6;font-size:6.5px;color:rgba(255,255,255,.52);text-shadow:0 1px 3px rgba(0,0,0,.55)}

/* KPIs sobrepostos ao rodapé do hero, como na referência */
html.loca-approved .la-kpis{margin-top:-43px!important;padding:0 28px!important;z-index:9!important;gap:13px!important}
html.loca-approved .la-kpi{
  min-height:114px!important;border-radius:15px!important;
  background:linear-gradient(150deg,rgba(255,253,250,.97),rgba(238,229,216,.95))!important;
  border:1px solid rgba(55,77,91,.10)!important;border-top-color:rgba(255,255,255,.92)!important;
  box-shadow:0 22px 44px -32px rgba(0,31,51,.58),inset 0 1px rgba(255,255,255,.98)!important;
}
html.loca-approved .la-kpi-icon{background:linear-gradient(145deg,#fbf5ec,#ead7bd)!important;color:#bd7c32!important}

/* restante da página mantém linho claro e profundidade */
html.loca-approved .la-card{
  background:linear-gradient(145deg,rgba(255,253,249,.96),rgba(239,230,218,.92))!important;
  border-color:rgba(43,72,90,.10)!important;
  box-shadow:0 23px 50px -38px rgba(0,28,46,.58),inset 0 1px rgba(255,255,255,.96)!important;
}
html.loca-approved .la-feature{
  background:linear-gradient(0deg,rgba(2,24,39,.84),rgba(3,28,45,.03) 70%),url('assets/cards-emp/centro-executivo-carl-hoepcke.jpg') center/cover no-repeat!important;
}

/* Telas internas: mesma linguagem de imagem + ondas */
html.loca-approved .loca-shell>.loca-hero:first-child{
  position:relative!important;min-height:232px!important;padding:92px 34px 30px!important;border-radius:0 0 28px 28px!important;border-top:0!important;overflow:hidden!important;
  background:
    linear-gradient(90deg,rgba(249,245,238,.96) 0%,rgba(249,245,238,.86) 25%,rgba(246,240,230,.54) 37%,rgba(240,231,217,.14) 49%,rgba(4,35,55,.03) 65%,rgba(2,24,39,.15) 100%),
    url('https://upload.wikimedia.org/wikipedia/commons/0/02/Ponte_Herc%C3%ADlio_Luz_-_Florian%C3%B3polis_-_20220911165825.jpg') center 49%/cover no-repeat!important;
}
html.loca-approved .loca-shell>.loca-hero:first-child:before{
  content:""!important;position:absolute!important;left:-12%!important;top:-170px!important;width:69%!important;height:350px!important;
  border-radius:0 0 78% 13% / 0 0 72% 16%!important;transform:rotate(-4deg)!important;
  background:linear-gradient(136deg,#faf7f1,#eee4d7 66%,#e3d2be)!important;opacity:.96!important;
  box-shadow:26px 24px 62px -53px rgba(2,36,58,.62)!important;
}
html.loca-approved .loca-shell>.loca-hero:first-child:after{
  content:""!important;position:absolute!important;inset:0!important;pointer-events:none!important;
  background:radial-gradient(110% 86% at 11% -40%,transparent 0 56%,rgba(194,148,82,.21) 56.4%,transparent 56.9%),radial-gradient(98% 75% at 20% -32%,transparent 0 61%,rgba(255,255,255,.52) 61.3%,transparent 61.8%),linear-gradient(101deg,transparent 42%,rgba(255,255,255,.03) 56%,rgba(3,28,45,.12) 100%)!important;
}
html.loca-approved .loca-shell>.loca-hero:first-child .loca-hero-row{position:relative;z-index:4}

@media(max-width:900px){
  html.loca-approved #topbar{position:relative!important;padding:9px 14px!important;background:rgba(247,242,234,.92)!important}
  html.loca-approved #content{padding:12px!important}
  html.loca-approved .la-hero{min-height:225px!important;border-radius:24px!important;background:linear-gradient(90deg,rgba(249,245,238,.91) 0%,rgba(249,245,238,.63) 50%,rgba(3,29,47,.12) 100%),url('https://upload.wikimedia.org/wikipedia/commons/0/02/Ponte_Herc%C3%ADlio_Luz_-_Florian%C3%B3polis_-_20220911165825.jpg') center/cover no-repeat!important}
  html.loca-approved .la-hero-copy{top:72px!important;left:20px!important}
  html.loca-approved .la-hero:before{width:108%!important;left:-42%!important}
  html.loca-approved .la-hero-note{display:none}
  html.loca-approved .loca-shell>.loca-hero:first-child{padding-top:30px!important;border-radius:24px!important}
}