:root{color-scheme:light;--ink:#193047;--gold:#a77816;--muted:#496078}
*{box-sizing:border-box}
body{margin:0;background:#f8f9fd;color:var(--ink);font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}
main{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:40px 24px 22px}
.hero{position:relative;isolation:isolate;overflow:hidden;width:100%;max-width:1540px;margin:auto;border:1px solid #dfe5f2;border-radius:24px;background:#f2f6f5;min-height:590px;display:flex;align-items:center}
.photo{position:absolute;inset:0;z-index:-2;background:url('praia.png') right center/auto 100% no-repeat}
.photo:after{content:"";position:absolute;inset:0;background:url('praia-costas.png') right 75%/auto 135% no-repeat;opacity:0;transition:opacity 1.5s ease-in-out;pointer-events:none}
.photo.alternate-photo:after{opacity:1}
.hero:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#f2f6f5 0%,#f2f6f5 30%,rgba(242,246,245,.94) 38%,rgba(242,246,245,.25) 59%,transparent 72%)}
.content{width:57%;padding:44px clamp(28px,3.6vw,62px)}
.logo{width:210px;height:auto;display:block;margin:0 0 24px}
.eyebrow{text-transform:uppercase;font-size:11px;letter-spacing:2px;font-weight:700;color:#566bc0;margin:0 0 12px}
h1{font-size:clamp(34px,3.25vw,52px);font-weight:600;line-height:1.15;letter-spacing:-1.8px;margin:0 0 20px}
.intro{font-size:15px;line-height:1.7;color:var(--muted);margin:0}
.notice{margin-top:32px;border-top:1px solid #d6dfe1;padding-top:24px;max-width:440px}
.badge{display:inline-flex;align-items:center;gap:8px;border:1px solid #e2d3ae;background:#faf5e9;border-radius:100px;padding:7px 12px;color:#78580f;font-size:11px;letter-spacing:1.4px;text-transform:uppercase;font-weight:700}
.badge span{width:6px;height:6px;border-radius:50%;background:var(--gold)}
h2{font-size:20px;line-height:1.4;margin:15px 0 9px;font-weight:600;letter-spacing:-.4px}
.notice p{font-size:14px;line-height:1.8;color:var(--muted);margin:0}
footer{text-align:center;font-size:11px;color:#657586;letter-spacing:1px;padding-top:24px}
footer span{padding:0 8px;color:var(--gold)}
.developer-logo{display:block;width:140px;max-width:100%;height:auto;margin:0 auto}
footer a{display:inline-block;border-radius:6px;transition:opacity .2s}
footer a:hover{opacity:.75}
footer a:focus-visible{outline:2px solid #566bc0;outline-offset:5px}
@media(min-width:1800px){.photo{background-size:cover}}
@media(max-width:900px){main{padding:20px 16px}.hero{min-height:560px}.content{width:65%;padding:30px}.hero:after{background:linear-gradient(90deg,#f2f6f5 0%,rgba(242,246,245,.98) 40%,rgba(242,246,245,.5) 66%,transparent 85%)}h1{font-size:38px}.logo{width:185px}}
@media(max-width:600px){main{padding:12px;justify-content:flex-start}.hero{display:flex;flex-direction:column;min-height:0;border-radius:18px}.photo{position:relative;inset:auto;z-index:0;width:100%;height:auto;aspect-ratio:1.65;background-size:auto 100%;background-position:right center;order:0}.hero:after{display:none}.content{order:1;width:100%;padding:25px 24px 30px}.logo{width:175px;margin-bottom:18px}.eyebrow{font-size:9px;letter-spacing:1.6px}h1{font-size:34px;letter-spacing:-1.3px;margin-bottom:14px}.intro{font-size:13px}.notice{margin-top:23px;padding-top:20px}h2{font-size:18px}.notice p{font-size:13px}.desktop-break{display:none}footer{padding:20px 4px 8px;font-size:10px}}
.photo-logo{display:none}
@media(max-width:600px){
  main{min-height:100svh;padding:calc(24px + env(safe-area-inset-top,0px)) 16px 16px}
  .photo-logo{display:block;position:absolute;top:16px;left:14px;width:143px;height:auto;z-index:1}
  .hero{margin:0 auto;border-radius:18px;background:#edf2f2;flex:1}
  .photo{aspect-ratio:1.08;background-size:auto 100%;background-position:85% center}
  .photo:after{content:"";position:absolute;inset:0;background-image:url('praia-costas.png');background-repeat:no-repeat;background-size:auto 135%;background-position:74% 75%;opacity:0;transition:opacity 1.5s ease-in-out;pointer-events:none}
  .photo.alternate-photo:after{opacity:1}
  .content{text-align:left;padding:24px 23px 29px;container-type:inline-size;flex:1}
  .content .logo{display:none}
  .eyebrow{font-size:10px;letter-spacing:1.5px;margin-bottom:0;line-height:1.6}
  h1{font-size:clamp(27px,11cqw,48px);line-height:1.2;letter-spacing:-1.1px;margin-bottom:0;width:100%}
  .intro{font-size:clamp(12px,4.6cqw,18px);line-height:1.8;text-align:justify;width:100%}
  .notice{margin-top:0;padding-top:17px;border-top:0}
  h2{font-size:clamp(14px,6cqw,24px);letter-spacing:-.4px;width:100%;margin-top:17px}
  .notice p{font-size:clamp(12px,4.6cqw,18px);text-align:justify;width:100%}
  .badge{display:flex;width:100%;justify-content:center;padding:10px 14px}
  footer{display:none}
}
.mobile-menu{display:none}
@media(max-width:600px){
  main{padding-bottom:calc(70px + env(safe-area-inset-bottom,0px))}
  .mobile-menu{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:10;align-items:center;justify-content:space-around;background:#fff;border-top:1px solid #e3e8ef;padding:7px 8px calc(7px + env(safe-area-inset-bottom,0px));box-shadow:0 -3px 16px rgba(25,48,71,.04)}
  .menu-item{appearance:none;border:0;background:transparent;color:#7c879e;font:inherit;font-size:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-width:44px;min-height:48px;width:20%;padding:4px;border-radius:10px;cursor:pointer;transition:color .18s,background-color .18s,transform .18s;-webkit-tap-highlight-color:transparent}
  .menu-item svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  .menu-item.selected{color:#c59625}
  .menu-item:hover{background:#faf5e9;color:#b8871e}
  .menu-item:active{transform:scale(.92);background:#f4ead2}
  .menu-item:focus-visible{outline:2px solid #c59625;outline-offset:-2px}
  .menu-icon{position:relative;display:flex}
  .menu-count{position:absolute;top:-5px;right:-6px;background:#c59625;color:white;border-radius:50%;font-size:9px;line-height:15px;width:15px;text-align:center}
}
@media(prefers-reduced-motion:reduce){.menu-item,.photo:after{transition:none}}