/* SIVAR PRO · Oficina central V1 */
:root{
  --office-ink:#092447;
  --office-navy:#061b37;
  --office-blue:#0878ef;
  --office-blue-soft:#eaf4ff;
  --office-teal:#0ea897;
  --office-green:#169873;
  --office-line:#dfe8f2;
  --office-muted:#65788f;
  --office-bg:#f3f7fc;
}

.portalHeader{
  position:relative;
  z-index:2;
  height:74px;
  padding:0 max(22px,calc((100vw - 1240px)/2));
  border-bottom:1px solid #e6edf5;
  background:rgba(255,255,255,.94);
  box-shadow:0 5px 24px rgba(13,38,71,.05);
}
.portalBrand{letter-spacing:-.35px}
.portalAccess{
  min-height:42px;
  padding:0 17px;
  border:1px solid #d8e4f1;
  border-radius:12px;
  background:#fff;
  color:#153656;
  box-shadow:0 5px 16px rgba(9,36,71,.07);
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
}
.portalAccess:hover{transform:translateY(-2px);background:#f7fbff;box-shadow:0 10px 22px rgba(9,36,71,.12)}
.portalMain{max-width:1260px;padding:28px 22px 38px}

.officeHeroV1{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,.88fr) minmax(400px,1.12fr);
  gap:clamp(24px,4vw,58px);
  align-items:center;
  min-height:468px;
  padding:clamp(26px,4.8vw,58px);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  border-radius:30px;
  background:
    radial-gradient(ellipse at 100% 4%,rgba(50,158,255,.38),transparent 32%),
    radial-gradient(ellipse at 8% 100%,rgba(20,102,198,.26),transparent 42%),
    linear-gradient(126deg,#061a35 0%,#09264d 54%,#0b3b6a 100%);
  color:#fff;
  box-shadow:0 28px 70px rgba(8,34,67,.2);
}
.officeHeroV1:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.16;
  background-image:linear-gradient(rgba(255,255,255,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.12) 1px,transparent 1px);
  background-size:42px 42px;
  mask-image:linear-gradient(90deg,transparent 8%,#000 70%);
}
.officeHeroCopy{position:relative;z-index:1;max-width:510px}
.officeEyebrow{
  display:inline-flex;
  align-items:center;
  gap:9px;
  color:#91caff;
  font-size:10px;
  font-weight:900;
  letter-spacing:1.8px;
  text-transform:uppercase;
}
.officeEyebrow:before{content:"";width:23px;height:2px;border-radius:9px;background:#55b6ff}
.officeHeroCopy h1{
  margin:18px 0 14px;
  color:#fff;
  font-size:clamp(34px,4.3vw,57px);
  line-height:1.04;
  letter-spacing:-1.8px;
}
.officeHeroCopy h1 span{color:#8bcaff}
.officeHeroCopy p{max-width:440px;margin:0;color:#c4d5e8;font-size:15px;line-height:1.72}
.officeHeroPills{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 25px}
.officeHeroPills span{
  padding:8px 11px;
  border:1px solid rgba(194,222,255,.2);
  border-radius:999px;
  background:rgba(255,255,255,.07);
  color:#d9eaff;
  font-size:10px;
  font-weight:700;
}
.officeEnter{
  display:inline-flex;
  min-height:50px;
  align-items:center;
  justify-content:center;
  gap:18px;
  padding:0 20px;
  border:0;
  border-radius:14px;
  background:linear-gradient(135deg,#168cff,#0868d5);
  color:#fff;
  font-size:13px;
  font-weight:850;
  box-shadow:0 12px 26px rgba(0,100,213,.3);
  cursor:pointer;
  transition:transform .18s ease,box-shadow .18s ease;
}
.officeEnter:hover{transform:translateY(-2px);box-shadow:0 17px 32px rgba(0,100,213,.38)}
.officeEnter span{font-size:20px;line-height:1}
.officePrivacy{display:block;margin-top:12px;color:#9db4cf;font-size:10px}

.officePlan{
  position:relative;
  z-index:1;
  padding:17px;
  border:1px solid rgba(232,244,255,.72);
  border-radius:25px;
  background:linear-gradient(145deg,rgba(255,255,255,.97),rgba(242,249,255,.93));
  color:var(--office-ink);
  box-shadow:0 28px 55px rgba(1,16,35,.26);
  animation:officeLift 7s ease-in-out infinite;
}
.officePlanTop{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:3px 3px 15px}
.officePlanTitle{font-size:10px;font-weight:900;letter-spacing:1.1px;color:#56708d;text-transform:uppercase}
.officePlanIndicator{display:flex;align-items:center;gap:7px;color:#54708d;font-size:9px;font-weight:800}
.officeLiveDot{width:8px;height:8px;border-radius:50%;background:#17b889;box-shadow:0 0 0 5px rgba(23,184,137,.12);animation:officePulse 2.6s ease-in-out infinite}
.officeRoomGrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.officeRoom{
  position:relative;
  display:flex;
  min-height:112px;
  flex-direction:column;
  justify-content:space-between;
  padding:14px;
  overflow:hidden;
  border:1px solid #e0eaf4;
  border-radius:17px;
  background:linear-gradient(145deg,#fff,#f4f8fd);
  color:#122e50;
  text-align:left;
  cursor:pointer;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.officeRoom:hover{transform:translateY(-3px);border-color:#a9cff6;box-shadow:0 12px 22px rgba(31,74,122,.1)}
.officeRoom:focus-visible,.officeEnter:focus-visible,.officeQuickBtn:focus-visible{outline:3px solid #76bdff;outline-offset:3px}
.officeRoom:after{
  content:"";
  position:absolute;
  width:92px;height:92px;
  right:-35px;bottom:-42px;
  border-radius:50%;
  background:var(--room-halo,rgba(8,120,239,.09));
}
.officeRoomHead{display:flex;align-items:center;justify-content:space-between;gap:8px}
.officeRoomIcon{
  display:grid;
  width:34px;height:34px;
  place-items:center;
  border-radius:11px;
  background:var(--room-icon-bg,#e8f3ff);
  color:var(--room-color,#1477da);
  font-size:16px;
  font-weight:900;
}
.officeRoomArrow{color:#7e93aa;font-size:17px}
.officeRoomName{position:relative;z-index:1;margin-top:12px;font-size:13px;font-weight:850;letter-spacing:-.15px}
.officeRoomMeta{position:relative;z-index:1;margin-top:4px;color:#71839a;font-size:9px;line-height:1.45}
.officeRoom.supportRoom{--room-color:#0878ef;--room-icon-bg:#e6f2ff;--room-halo:rgba(8,120,239,.13);border-color:#a7cef7;background:linear-gradient(145deg,#fff,#eff7ff)}
.officeRoom.cleanRoom{--room-color:#138c6e;--room-icon-bg:#e4f7f0;--room-halo:rgba(19,140,110,.12)}
.officeRoom.deliveryRoom{--room-color:#b57916;--room-icon-bg:#fff2d8;--room-halo:rgba(181,121,22,.12)}
.officeRoom.travelRoom{--room-color:#684ec3;--room-icon-bg:#eeeaff;--room-halo:rgba(104,78,195,.12)}
.officePlanFoot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;padding:11px 12px;border-radius:12px;background:#edf5fc;color:#4e6784;font-size:9px}
.officePlanFoot strong{color:#1a436d;font-weight:850}
.officePublicStrip{display:flex;justify-content:center;flex-wrap:wrap;gap:9px;margin:16px 0 26px}
.officePublicStrip span{padding:8px 12px;border:1px solid #e1eaf3;border-radius:999px;background:#fff;color:#5e728b;font-size:10px;font-weight:800}
.officePublicStrip span:first-child{border-color:#b7dcff;background:#edf7ff;color:#1267b8}
.officePublicHeading{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin:26px 0 12px}
.officePublicHeading h2{margin:0;color:#112d4d;font-size:18px;letter-spacing:-.4px}
.officePublicHeading p{margin:5px 0 0;color:#74869b;font-size:11px}
.officePublicHeading .subtle{white-space:nowrap}
.portalCards{margin-top:0}

.officeV1{display:grid;gap:19px}
.officeWelcome{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  min-height:210px;
  padding:28px clamp(20px,3.2vw,38px);
  overflow:hidden;
  border-radius:23px;
  background:
    radial-gradient(ellipse at 95% 6%,rgba(48,150,255,.28),transparent 31%),
    linear-gradient(115deg,#071d3b,#0b315c 72%,#0d4977);
  color:#fff;
  box-shadow:0 17px 38px rgba(8,37,74,.15);
}
.officeWelcome:after{content:"";position:absolute;right:-82px;bottom:-220px;width:440px;height:440px;border:1px solid rgba(176,215,255,.11);border-radius:50%;box-shadow:0 0 0 34px rgba(176,215,255,.035),0 0 0 68px rgba(176,215,255,.025)}
.officeWelcomeText{position:relative;z-index:1;max-width:720px}
.officeWelcome .officeEyebrow{color:#9bcfff}
.officeWelcome h2{margin:14px 0 7px;color:#fff;font-size:clamp(25px,3vw,36px);line-height:1.1;letter-spacing:-.8px}
.officeWelcome p{max-width:650px;margin:0;color:#c4d7eb;font-size:13px;line-height:1.65}
.officeWelcomeBottom{display:flex;align-items:center;flex-wrap:wrap;gap:9px;margin-top:17px}
.officePhase,.officeWelcomeDate{display:inline-flex;align-items:center;gap:8px;padding:8px 11px;border:1px solid rgba(209,231,255,.18);border-radius:999px;background:rgba(255,255,255,.075);color:#e0efff;font-size:9px;font-weight:800}
.officeWelcomeDate{position:relative;z-index:1;white-space:nowrap}
.officeQuickLinks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px}
.officeQuickBtn{
  display:flex;
  min-height:57px;
  align-items:center;
  gap:11px;
  padding:10px 13px;
  border:1px solid #e0e9f2;
  border-radius:15px;
  background:#fff;
  color:#1b3858;
  text-align:left;
  cursor:pointer;
  box-shadow:0 6px 18px rgba(26,58,95,.045);
  transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease;
}
.officeQuickBtn:hover{transform:translateY(-2px);border-color:#b9d5f2;box-shadow:0 11px 22px rgba(26,58,95,.08)}
.officeQuickIcon{display:grid;width:34px;height:34px;place-items:center;flex:0 0 34px;border-radius:11px;background:#edf6ff;color:#0874df;font-size:16px}
.officeQuickBtn strong{display:block;font-size:11px}
.officeQuickBtn small{display:block;margin-top:3px;color:#8090a4;font-size:9px}
.officeSectionHeader{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin:7px 0 0}
.officeSectionHeader h3{margin:4px 0 0;color:#153454;font-size:21px;letter-spacing:-.5px}
.officeSectionEyebrow{color:#2479ca;font-size:9px;font-weight:900;letter-spacing:1.5px}
.officeSectionHint{color:#7b8da2;font-size:10px}
.officeWorkspaceGrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px}
.officeWorkspace{
  display:flex;
  min-height:220px;
  flex-direction:column;
  align-items:flex-start;
  padding:17px;
  border:1px solid #dfe8f1;
  border-radius:18px;
  background:linear-gradient(155deg,#fff,#fbfdff);
  box-shadow:0 7px 22px rgba(23,51,86,.045);
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.officeWorkspace:hover{transform:translateY(-3px);border-color:#c5d9ed;box-shadow:0 15px 30px rgba(23,51,86,.09)}
.officeWorkspaceTop{display:flex;width:100%;align-items:center;justify-content:space-between;gap:8px}
.officeWorkspaceIcon{display:grid;width:42px;height:42px;place-items:center;border-radius:13px;background:var(--workspace-icon-bg,#e8f3ff);color:var(--workspace-color,#0878ef);font-size:18px;font-weight:900}
.officeWorkspaceStatus{display:inline-flex;align-items:center;gap:5px;padding:6px 8px;border-radius:999px;background:var(--status-bg,#eef5fc);color:var(--status-color,#647b95);font-size:8px;font-weight:900;white-space:nowrap}
.officeWorkspaceStatus:before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.officeWorkspace h4{margin:14px 0 6px;color:#173554;font-size:14px;letter-spacing:-.2px}
.officeWorkspace p{flex:1;margin:0;color:#71839a;font-size:10px;line-height:1.6}
.officeWorkspace .officeLink{display:inline-flex;align-items:center;gap:7px;margin-top:15px;padding:0;border:0;background:none;color:#126fc8;font-size:10px;font-weight:900;cursor:pointer}
.officeWorkspace .officeLink:hover{color:#064b93}
.officeWorkspace.supportWorkspace{--workspace-icon-bg:#e6f2ff;--workspace-color:#0878ef;--status-bg:#e9f8f2;--status-color:#128261}
.officeWorkspace.cleanWorkspace{--workspace-icon-bg:#e5f7f1;--workspace-color:#138c6e}
.officeWorkspace.deliveryWorkspace{--workspace-icon-bg:#fff3dd;--workspace-color:#a96e0e}
.officeWorkspace.travelWorkspace{--workspace-icon-bg:#eeeaff;--workspace-color:#6652be}
.officeCurrentTools{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  gap:13px;
}
.officeToolsCard,.officeStageCard{
  padding:17px 19px;
  border:1px solid #e0e8f0;
  border-radius:17px;
  background:#fff;
  box-shadow:0 6px 19px rgba(20,48,80,.035);
}
.officeCardTitle{margin:0 0 3px;color:#193858;font-size:13px;font-weight:900}
.officeCardSub{margin:0;color:#7d8da1;font-size:9px}
.officeToolsList{display:flex;flex-wrap:wrap;gap:8px;margin-top:13px}
.officeToolLink{display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:0 11px;border:1px solid #e1eaf3;border-radius:11px;background:#f9fbfe;color:#36506d;font-size:9px;font-weight:850;cursor:pointer}
.officeToolLink:hover{border-color:#b8d5f2;background:#f1f8ff;color:#0969bf}
.officeStageRow{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}
.officeStage{padding:10px;border-radius:12px;background:#f4f8fc}
.officeStage b{display:block;color:#1d446a;font-size:9px}
.officeStage span{display:block;margin-top:5px;color:#7c8da1;font-size:8px;line-height:1.4}
.officeDetails{display:none;padding:20px;border:1px solid #c9ddf0;border-radius:19px;background:linear-gradient(135deg,#fff,#f4f9ff);box-shadow:0 12px 28px rgba(22,57,96,.07)}
.officeDetails.show{display:block;animation:officeEnter .24s ease both}
.officeDetailsHead{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.officeDetailsHead h3{margin:3px 0 6px;color:#153454;font-size:20px}
.officeDetailsHead p{margin:0;color:#6d8098;font-size:11px;line-height:1.6}
.officeDetailsClose{width:34px;height:34px;border:1px solid #dbe6f0;border-radius:10px;background:#fff;color:#42607f;font-size:18px;cursor:pointer}
.officeDetailsList{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:17px}
.officeDetailsItem{padding:12px;border:1px solid #e2ebf4;border-radius:12px;background:#fff;color:#405a78;font-size:10px;font-weight:750}
.officeDetailsNote{margin-top:13px;padding:11px 12px;border-radius:12px;background:#eaf4ff;color:#365f89;font-size:9px;line-height:1.55}

@keyframes officeLift{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes officePulse{0%,100%{box-shadow:0 0 0 4px rgba(23,184,137,.12)}50%{box-shadow:0 0 0 7px rgba(23,184,137,.04)}}
@keyframes officeEnter{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:1050px){
  .officeHeroV1{grid-template-columns:1fr;gap:25px}
  .officeHeroCopy{max-width:730px}
  .officePlan{max-width:760px;width:100%;margin:0 auto}
  .officeWorkspaceGrid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:680px){
  .portalHeader{height:64px;padding:0 14px}
  .portalMain{padding:14px 12px 28px}
  .officeHeroV1{min-height:0;gap:20px;padding:25px 18px 18px;border-radius:23px}
  .officeHeroCopy h1{margin-top:14px;font-size:36px;letter-spacing:-1.2px}
  .officeHeroCopy p{font-size:13px}
  .officeHeroPills{gap:6px;margin:16px 0 18px}
  .officeHeroPills span{font-size:9px}
  .officeEnter{width:100%;min-height:47px}
  .officePlan{padding:12px;border-radius:19px}
  .officeRoomGrid{gap:8px}
  .officeRoom{min-height:100px;padding:11px;border-radius:14px}
  .officeRoomIcon{width:30px;height:30px;font-size:14px}
  .officeRoomName{font-size:11px}
  .officeRoomMeta{font-size:8px}
  .officePlanFoot{align-items:flex-start;flex-direction:column;gap:4px}
  .officePublicStrip{justify-content:flex-start;margin:12px 0 21px}
  .officePublicHeading{align-items:flex-start;flex-direction:column;margin:22px 0 10px}
  .officePublicHeading .subtle{white-space:normal}
  .officeQuickLinks{grid-template-columns:1fr}
  .officeWelcome{align-items:flex-start;flex-direction:column;min-height:0;padding:23px 18px;border-radius:19px}
  .officeWelcome h2{font-size:27px}
  .officeWelcomeDate{align-self:flex-start}
  .officeWorkspaceGrid,.officeCurrentTools{grid-template-columns:1fr}
  .officeWorkspace{min-height:180px}
  .officeSectionHeader{align-items:flex-start;flex-direction:column}
  .officeDetails{padding:16px}
  .officeDetailsList{grid-template-columns:1fr}
  .officeStageRow{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  .officePlan,.officeLiveDot,.officeDetails.show{animation:none!important}
  .officeRoom,.officeEnter,.officeQuickBtn,.officeWorkspace,.portalAccess{transition:none!important}
}

/* Office scene illustration and accessible entry hotspots */
.officeHeroCopy p{color:#d4e4f5!important}
.officeScene{
  position:relative;
  width:100%;
  aspect-ratio:1.5/1;
  overflow:hidden;
  border:1px solid #d8e6f2;
  border-radius:18px;
  background:#e8f0f7;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.6);
}
.officeScene>img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.officeSceneShade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,27,55,.03),rgba(6,27,55,.08));pointer-events:none}
.officeHotspot{
  position:absolute;
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:31px;
  padding:5px 10px 5px 6px;
  border:1px solid rgba(255,255,255,.9);
  border-radius:999px;
  background:rgba(255,255,255,.96);
  color:#193b5b;
  font:800 9px/1.1 "Segoe UI",Arial,sans-serif;
  box-shadow:0 5px 15px rgba(7,33,63,.19);
  cursor:pointer;
  backdrop-filter:blur(8px);
  transition:transform .18s ease,box-shadow .18s ease;
}
.officeHotspot:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 9px 22px rgba(7,33,63,.23)}
.officeHotspot:focus-visible{outline:3px solid #4ea8ff;outline-offset:3px}
.officeHotspot i{display:grid;width:21px;height:21px;place-items:center;border-radius:50%;background:#e8f3ff;color:#0d70cf;font-style:normal;font-size:11px}
.hotspotClean{left:7%;top:22%}
.hotspotClean i{background:#e3f6ee;color:#13856a}
.hotspotDodo{left:43%;top:11%}
.hotspotDodo i{background:#fff2d8;color:#a46e13}
.hotspotTravel{right:5%;top:36%}
.hotspotTravel i{background:#eeebff;color:#6755b9}
.hotspotSupport{
  left:43%;
  bottom:12%;
  padding-right:13px;
  border-color:#b8dcff;
  color:#075daf;
}
.hotspotSupport i{background:#0878ef;color:#fff}
.hotspotSupport:after{content:"";position:absolute;inset:-4px;border:1px solid rgba(8,120,239,.35);border-radius:999px;animation:officePulse 2.7s ease-in-out infinite;pointer-events:none}
@media(max-width:680px){
  .officeScene{aspect-ratio:1.22/1}
  .officeHotspot{min-height:28px;gap:5px;padding:4px 7px 4px 4px;font-size:7px}
  .officeHotspot i{width:19px;height:19px;font-size:10px}
  .hotspotClean{left:4%;top:21%}
  .hotspotDodo{left:42%;top:7%}
  .hotspotTravel{right:3%;top:40%}
  .hotspotSupport{left:38%;bottom:9%}
}