
.rd{
  --h:calc(100svh - var(--topo));
  --u:min(calc(100vw / 2000), calc(var(--h) / 1086));
  --fs:max(24px, calc(var(--u) * 57.5)); 
  --lh:.95;
  --fio:max(1px, calc(var(--u) * 1.5));
  --risca:rgb(255 255 255 / .34);
  --rd-d:#04080a; --rd-w:#fff; 
  position:relative;isolation:isolate;overflow:clip;min-height:var(--h);color:#fff;scroll-margin-top:var(--topo);
  background:var(--noite);
}
:where(.rd) *{margin:0}
.rd a:focus-visible,.rd button:focus-visible{outline:.2rem solid var(--ciano);outline-offset:.2rem}
.rd .sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.rd-fundo{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:url("../../assets/site-elements/backgrounds/01-bravura-bgs/bravura-bgs_01-concept_1920.webp") center/cover no-repeat}
.rd-blocos{display:none;position:absolute;inset:0;z-index:1;width:100%;height:100%;pointer-events:none}
.rd-leitura{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(rgb(1 5 8 / 0) 58%,rgb(1 5 8 / .5))}

.rd-quadro{position:relative;z-index:2}
.rd-linha{display:none}

.rd-selo{position:relative;pointer-events:none}
.rd-anel{position:absolute;inset:0;width:100%;height:100%;overflow:visible;will-change:transform}
.rd-anel text{font:600 25px var(--f-texto);fill:#fff;letter-spacing:.02em}
.rd-b{position:absolute;left:50%;top:50%;width:32%;height:auto;transform:translate(-50%,-50%);fill:var(--ciano);overflow:visible}
.rd-sombra{position:absolute;left:58%;top:56%;width:190%;height:auto;transform:translate(-50%,-50%);z-index:1;pointer-events:none}

.rd-area{position:relative;z-index:3;font-size:var(--fs);width:8.5em;height:calc(3 * var(--lh) * 1em + .16em)} 
.rd-caixa{--ar:max(5px, calc(var(--u) * 8));--tr:max(3px, calc(var(--u) * 4.5));position:absolute;top:0;left:calc(50% - 4.25em);width:8.5em;pointer-events:none;user-select:none}
.rd-caixa::before{content:"";position:absolute;inset:0;opacity:.88;background:
  repeating-linear-gradient(90deg,#fff 0 var(--tr),transparent var(--tr) calc(var(--tr) * 1.75)) top/100% 1px no-repeat,
  repeating-linear-gradient(90deg,#fff 0 var(--tr),transparent var(--tr) calc(var(--tr) * 1.75)) bottom/100% 1px no-repeat,
  repeating-linear-gradient(0deg,#fff 0 var(--tr),transparent var(--tr) calc(var(--tr) * 1.75)) left/1px 100% no-repeat,
  repeating-linear-gradient(0deg,#fff 0 var(--tr),transparent var(--tr) calc(var(--tr) * 1.75)) right/1px 100% no-repeat}
.rd-caixa i{position:absolute;width:var(--ar);height:var(--ar);margin:calc(var(--ar) / -2) 0 0 calc(var(--ar) / -2);background:#fff;box-shadow:0 0 0 1px rgb(1 5 8 / .72)}
.rd-caixa .nw{left:0;top:0}.rd-caixa .n{left:50%;top:0}.rd-caixa .ne{left:100%;top:0}.rd-caixa .e{left:100%;top:50%}
.rd-caixa .se{left:100%;top:100%}.rd-caixa .s{left:50%;top:100%}.rd-caixa .sw{left:0;top:100%}.rd-caixa .w{left:0;top:50%}
.rd-caixa.grab-d .e,.rd-caixa.grab-e .w{background:var(--ciano)} 
.rd-frase{padding:.05em .09em .07em;font:500 1em/var(--lh) var(--f-texto);letter-spacing:-.045em;text-transform:uppercase;text-align:justify;text-align-last:justify;hyphens:none;overflow-wrap:normal}
.rd-frase .pos{border-radius:0}
.rd-frase .pos.sel{background:var(--ciano);color:var(--noite)}
.rd-frase .pos.ed::after,.rd-frase .ovo.ed::after{content:"";display:inline-block;width:.055em;height:.8em;margin-left:.03em;vertical-align:-.06em;background:currentColor;opacity:var(--car,1)}
.rd-frase .pos.lk{color:var(--ciano);background:linear-gradient(currentColor,currentColor) 0 calc(100% - .02em) / calc(var(--ul,0) * 100%) .065em no-repeat}

.rd-sub{font:500 max(18px, calc(var(--u) * 41))/1.24 var(--f-texto);letter-spacing:-.035em;text-align:center}
.acoes{display:flex;gap:calc(var(--u) * 19)}
.rd-btn{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;min-height:max(44px, calc(var(--u) * 68));padding-inline:calc(var(--u) * 21);
  font:600 max(12.5px, calc(var(--u) * 20))/1 var(--f-texto);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;color:var(--noite);background:var(--ciano);white-space:nowrap}
.rd-btn::before{content:"";position:absolute;inset:0;z-index:-1;background:#fff;transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.rd-btn:hover::before,.rd-btn:focus-visible::before{transform:scaleX(1)}
.rd-btn:focus-visible{outline:2px solid var(--ciano);outline-offset:3px}

.rd-m{display:block;line-height:0}
.rd-m svg{display:block;width:100%;height:auto;fill:#fff}
.rd-div{background:var(--risca);width:1px}
.rd-redes{display:flex;gap:calc(var(--u) * 6)}
.rd-redes a{display:grid;place-items:center;width:max(30px, calc(var(--u) * 34));height:max(30px, calc(var(--u) * 34));border-radius:max(6px, calc(var(--u) * 8));background:rgb(255 255 255 / .22);color:#fff;transition:background-color .2s,color .2s}
.rd-redes a:hover,.rd-redes a:focus-visible{background:var(--ciano);color:var(--noite)}
.rd-redes svg{width:56%;height:56%;display:block}
.rd-nav{display:flex;flex-direction:column}
.rd-nav a,.rd-copy{font:600 max(12.5px, calc(var(--u) * 19))/1 var(--f-texto);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;color:#fff}
.rd-nav a{padding-block:max(8px, calc(var(--u) * 10));width:fit-content}
.rd-nav a:hover,.rd-nav a:focus-visible{text-decoration:underline;text-underline-offset:.35em}
.rd-copy{color:rgb(255 255 255 / .86)}
.rd a:focus-visible{outline:2px solid var(--ciano);outline-offset:3px}

.rd-cur{position:absolute;left:0;top:0;z-index:6;display:none;pointer-events:none;will-change:transform}
.rd-cur svg{position:absolute;left:0;top:0;display:none;width:calc(var(--sw) * var(--c, 2px));height:calc(var(--sh) * var(--c, 2px));shape-rendering:crispEdges;overflow:visible}
.rd-cur svg.on{display:block}
.rd-cur .d{fill:var(--rd-d)}
.rd-cur .w{fill:var(--rd-w)}
.rd[data-anim="on"] .rd-cur{display:block}

@media (min-width:1000px){
  .rd{display:grid;place-items:center}
  .rd-quadro{width:calc(2000 * var(--u));height:calc(1086 * var(--u))}
  .rd-quadro>*{position:absolute}
  .rd-selo{left:calc(571 * var(--u));top:calc(33 * var(--u));width:calc(270 * var(--u));height:calc(270 * var(--u))}
  .rd-area{left:calc(755.5 * var(--u));top:calc(218 * var(--u))} 
  .rd-sub{left:0;width:calc(2000 * var(--u));top:calc(426 * var(--u))}
  .acoes{left:calc(862.5 * var(--u));top:calc(566 * var(--u))} 
  .rd-btn{width:calc(275 * var(--u));min-width:max-content}
  .rd-linha{display:block;left:-50vw;right:-50vw;top:calc(708 * var(--u));height:var(--fio);background:var(--risca)} 
  .rd-m{left:calc(676 * var(--u));top:calc(752 * var(--u));width:calc(262 * var(--u))}
  .rd-div{left:calc(1002 * var(--u));top:calc(730 * var(--u));height:calc(208 * var(--u))}
  .rd-redes{left:calc(1117 * var(--u));top:calc(752 * var(--u))}
  .rd-nav{left:calc(1116 * var(--u));top:calc(811 * var(--u))}
  .rd-copy{left:0;width:calc(2004 * var(--u));top:calc(985 * var(--u));text-align:center}
}

@media (max-width:999px){
  .rd{--fs:clamp(22px, 8vw, 44px);--u:min(calc(100vw / 1000), calc(var(--h) / 1086));padding:clamp(2.5rem,9vw,4.5rem) var(--gut) 1.5rem;display:flex;flex-direction:column;align-items:center}
  .rd-quadro{display:flex;flex-direction:column;align-items:center;width:100%;gap:clamp(1.5rem,5vw,2.5rem)}
  .rd-selo{width:min(34vw,170px);height:min(34vw,170px)}
  .rd-area{width:100%;max-width:none}
  .rd-sub{font-size:clamp(20px,5.6vw,34px)}
  .acoes{flex-direction:column;align-items:stretch;width:100%;max-width:26rem;gap:.75rem}
  .rd-btn{min-height:56px;font-size:15px}
  .rd-linha{display:block;position:relative;order:5;align-self:stretch;height:1px;background:var(--risca);margin-top:.5rem}
  .rd-m{order:6;width:min(62vw,15rem)}
  .rd-div{order:7;width:100%;height:1px}
  .rd-redes{order:8}
  .rd-nav{order:9;flex-direction:row;gap:1.25rem;flex-wrap:wrap;justify-content:center}
  .rd-nav a,.rd-copy{font-size:13px}
  .rd-nav a{padding-block:.7rem}
  .rd-copy{order:10}
  .rd-redes a{width:44px;height:44px}
}
@media (prefers-reduced-motion:reduce){
  .rd-btn::before{transition:none}
}
