.area-gateway {
  position: fixed;
  z-index: 1000;
  inset: 0;
  padding: 24px;
  overflow-y: auto;
  display: grid;
  place-items: center;
  color: #07192f;
  background:
    radial-gradient(circle at 12% 12%, rgba(255, 211, 63, .2), transparent 30%),
    rgba(4, 16, 34, .88);
  backdrop-filter: blur(18px);
  animation: areaGatewayFade .28s ease both;
}

body.area-gateway-open { overflow: hidden; }

.area-gateway-panel {
  width: min(720px, 100%);
  padding: clamp(22px, 3vw, 32px);
  border: 1px solid rgba(255, 255, 255, .68);
  border-radius: 34px;
  background: #f7f8f5;
  box-shadow: 0 35px 100px rgba(0, 0, 0, .35);
  animation: areaGatewayRise .5s cubic-bezier(.2, .8, .2, 1) both;
}

.area-gateway-brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.area-gateway-brand img { width: 120px; height: auto; filter: brightness(0) saturate(100%) invert(12%) sepia(25%) saturate(1300%) hue-rotate(176deg) brightness(87%) contrast(102%); }
.area-gateway-brand > span { color: #687382; font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.area-gateway-heading { margin-top: clamp(20px, 3vw, 28px); }
.area-gateway-heading p { margin: 0 0 8px; color: #bd7b00; font-size: .72rem; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }
.area-gateway-heading h2 { margin: 0; font-family: "Sora", sans-serif; font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 520; line-height: 1.05; letter-spacing: -.055em; }
.area-gateway-heading > span { display: block; margin-top: 12px; color: #687382; font-size: .92rem; }

.area-choice-grid { margin-top: clamp(20px, 3vw, 28px); display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.area-choice {
  min-width: 0;
  min-height: 185px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  color: #07192f;
  border: 1px solid rgba(7, 25, 47, .13);
  border-radius: 24px;
  background: white;
  cursor: pointer;
  text-align: left;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.area-choice:hover,
.area-choice:focus-visible { transform: translateY(-4px); border-color: #e49a00; box-shadow: 0 20px 45px rgba(7, 25, 47, .12); outline: none; }
.area-choice-icon { width: 44px; height: 44px; display: grid; place-items: center; color: #07192f; border-radius: 50%; background: #ffd33f; font-size: 1.25rem; }
.area-choice small { margin-top: 22px; color: #a56b00; font-size: .65rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.area-choice strong { margin-top: 18px; font-family: "Sora", sans-serif; font-size: clamp(1.25rem, 2.2vw, 1.55rem); font-weight: 620; line-height: 1.08; letter-spacing: -.045em; }
.area-choice p { margin: 12px 0 22px; color: #687382; font-size: .8rem; line-height: 1.55; }
.area-choice i { margin-top: auto; display: flex; align-items: center; gap: 10px; color: #07192f; font-size: .72rem; font-style: normal; font-weight: 850; }
.area-choice i b { color: #d18700; font-size: 1rem; }
.area-choice-eletrica { background: linear-gradient(145deg, #fff7cf, #fff); }

.header-tools { justify-self: end; display: flex; align-items: center; gap: 8px; }
.site-switch {
  min-height: 40px;
  padding: 0 13px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: inherit;
  border: 1px solid rgba(255, 255, 255, .32);
  border-radius: 999px;
  background: rgba(6, 25, 52, .24);
  backdrop-filter: blur(10px);
  font-size: .67rem;
  font-weight: 800;
  white-space: nowrap;
  transition: transform .2s, border-color .2s, background .2s;
}
.site-switch::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #ffd33f; box-shadow: 0 0 0 4px rgba(255, 211, 63, .13); }
.site-switch i { color: #ffd33f; font-size: .85rem; font-style: normal; }
.site-switch:hover,
.site-switch:focus-visible { transform: translateY(-2px); border-color: #ffd33f; outline: none; }

@keyframes areaGatewayFade { from { opacity: 0; } }
@keyframes areaGatewayRise { from { opacity: 0; transform: translateY(18px) scale(.985); } }

@media (max-width: 1000px) {
  .site-header { grid-template-columns: 1fr auto auto; gap: 10px; }
  .header-tools { display: flex; }
  .header-tools .header-cta { display: none; }
}

@media (max-width: 560px) {
  .area-gateway { padding: 12px; align-items: start; }
  .area-gateway-panel { margin-block: 12px; padding: 18px 16px 16px; border-radius: 24px; }
  .area-gateway-brand img { width: 104px; }
  .area-gateway-brand > span { font-size: .58rem; }
  .area-gateway-heading { margin-top: 20px; }
  .area-gateway-heading > span { font-size: .8rem; }
  .area-choice-grid { grid-template-columns: 1fr; }
  .area-choice { min-height: 142px; padding: 16px; border-radius: 20px; }
  .area-choice-icon { width: 38px; height: 38px; }
  .area-choice strong { margin-top: 12px; }
  .area-choice p { margin: 8px 0 14px; }
  .site-switch { min-height: 36px; padding-inline: 10px; }
  .site-switch span { font-size: 0; }
  .site-switch span::after { content: "Solar"; font-size: .64rem; }
}

@media (max-width: 380px) {
  .site-header { gap: 6px; }
  .brand > span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .area-gateway,
  .area-gateway-panel { animation: none; }
  .area-choice,
  .site-switch { transition: none; }
}