/* REAL .TECH & CO | SEÇÃO 3 / FRENTES / RL_ST2_
   Fontes oficiais Google Fonts: LINE Seed JP tem pesos 100, 400, 700, 800.
   Não usar 500/600 como se fossem variantes reais. Fallback local incluído.
   CSP e headers devem ser configurados no servidor. Veja SEGURANCA.txt. */

/* APENAS para abrir o teste em arquivo isolado; NÃO copiar o body para o site. */


.RL_ST2_section {
  /* ▾ PALETA / PERSONALIZAÇÃO ▾ */
  --RL_ST2_bg:#081b32;
  --RL_ST2_gold:#bc965c;
  --RL_ST2_heading:#e2c28a;
  --RL_ST2_white:#f8fbff;
  --RL_ST2_muted:#c6d9e9;
  --RL_ST2_green:#102b22;
  --RL_ST2_greenStroke:#387661;
  --RL_ST2_yellow:#2b2315; /* REPORTA: âmbar profundo, mais escuro que o centro REAL (#30281b) */
  --RL_ST2_yellowStroke:#967c46; /* contorno amarelo-ouro contido, sem saturação */
  --RL_ST2_blue:#183c63;
  --RL_ST2_blueStroke:#719aba;
  --RL_ST2_center:#2b2929;
  --RL_ST2_gapOpacity:1;
  --RL_ST2_logoOpacity:.085; /* logotipo EXATO e discreto */
  --RL_ST2_logoSpin:115s;
  --RL_ST2_rentMarkOpacity:.105; /* imagem REAL da Rentabiliza, monocromática */
  --RL_ST2_reportaMarkOpacity:.105; /* MESMA opacidade dos logos RENTABILIZA e REALIZA */
  --RL_ST2_realizaMarkOpacity:.105;
  --RL_ST2_centerMarkOpacity:.20;

  position:relative; isolation:isolate; overflow:hidden;
  /* O conjunto cabe na altura da tela quando há espaço físico suficiente.
     Sem altura fixa e sem corte em telas curtas / zoom de acessibilidade. */
  min-height:100vh;
  min-height:100svh;
  display:flex;align-items:center;
  padding:clamp(34px,5vh,76px) clamp(22px,4.7vw,78px);
  background:radial-gradient(ellipse at 83% 18%,rgba(58,117,172,.18),transparent 52%),var(--RL_ST2_bg);
  color:var(--RL_ST2_white);
  font-family:'LINE Seed JP',Arial,Helvetica,sans-serif;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}
.RL_ST2_section, .RL_ST2_section *, .RL_ST2_section *::before, .RL_ST2_section *::after { box-sizing:border-box; }
.RL_ST2_layout {
  position:relative; z-index:1; width:min(100%,1380px); margin:0 auto;
  display:grid;grid-template-columns:minmax(320px,.77fr) minmax(430px,1.23fr);
  gap:clamp(30px,5vw,88px);align-items:center;
}
.RL_ST2_copy {max-width:490px;padding-left:clamp(0px,2.2vw,33px);}
.RL_ST2_title {
  margin:0 0 27px; color:var(--RL_ST2_heading);
  font-size:clamp(23px,2.1vw,30px);font-weight:400;
  letter-spacing:.09em;line-height:1.42;
}
.RL_ST2_intro {margin:0;max-width:432px;font-size:clamp(15px,1.05vw,17px);line-height:1.76;color:var(--RL_ST2_muted);}
.RL_ST2_kicker {margin:30px 0 0;font-size:15px;line-height:1.5;letter-spacing:.025em;font-weight:700;color:var(--RL_ST2_heading);}

/* Painel do triângulo e descrição mantidos juntos para se parecer com a referência. */
.RL_ST2_visual {min-width:0;width:100%;max-width:720px;margin-inline:auto;}
/* Em monitor baixo, a pirâmide não empurra o texto institucional para fora.
   Altura total inclui descrição (~140px); clamp respeita a largura disponível. */
@media (min-width:991px) and (max-height:850px) {
 .RL_ST2_visual {max-width:min(100%,calc((100svh - 180px)*.98));}
 .RL_ST2_section {padding-block:clamp(16px,2.7svh,36px);}
 .RL_ST2_detail {min-height:105px;}
 .RL_ST2_detailInner {padding-top:14px;}
}
.RL_ST2_pyramidFrame {position:relative;isolation:isolate;}
.RL_ST2_pyramid {display:block;width:100%;height:auto;overflow:visible;touch-action:pan-y;}
.RL_ST2_outerRing {fill:none;stroke:rgba(189,156,80,.43);stroke-width:1.25;vector-effect:non-scaling-stroke;pointer-events:none;}
.RL_ST2_outerRing--back {stroke:rgba(189,156,80,.17);stroke-width:1;}
.RL_ST2_brandLink, .RL_ST2_centerLink {cursor:pointer;outline:none;text-decoration:none;}
.RL_ST2_brand {cursor:inherit;outline:none;}
.RL_ST2_brandFace {stroke-width:1.35;vector-effect:non-scaling-stroke;transition:fill .38s ease,stroke .38s ease,opacity .38s ease,filter .38s ease,stroke-width .38s ease;}
.RL_ST2_brandGlow {opacity:0;filter:url(#RL_ST2_glow);transition:opacity .38s ease;}
.RL_ST2_brand--rentabiliza .RL_ST2_brandFace, .RL_ST2_brand--rentabiliza .RL_ST2_brandGlow {fill:var(--RL_ST2_green);stroke:var(--RL_ST2_greenStroke);}
.RL_ST2_brand--reporta .RL_ST2_brandFace, .RL_ST2_brand--reporta .RL_ST2_brandGlow {fill:var(--RL_ST2_yellow);stroke:var(--RL_ST2_yellowStroke);}
/* REPORTA usa a mesma tipografia clara das demais frentes. */
.RL_ST2_brand--realiza .RL_ST2_brandFace, .RL_ST2_brand--realiza .RL_ST2_brandGlow {fill:var(--RL_ST2_blue);stroke:var(--RL_ST2_blueStroke);}
.RL_ST2_brand:not(.RL_ST2_isActive) .RL_ST2_brandFace {opacity:.8;}
.RL_ST2_brand.RL_ST2_isActive .RL_ST2_brandFace {opacity:1;filter:brightness(1.19);stroke-width:2;}
.RL_ST2_brand.RL_ST2_isActive .RL_ST2_brandGlow {opacity:.35;}
/* :focus-visible pertence ao <a>, não ao antigo grupo com role=button. */
.RL_ST2_brandLink:focus-visible .RL_ST2_brandFace,
.RL_ST2_centerLink:focus-visible .RL_ST2_centerFace {stroke:#f4dfa9;stroke-width:3.7;}
.RL_ST2_brandLabel {fill:var(--RL_ST2_white);font:700 29px 'LINE Seed JP',Arial,sans-serif;letter-spacing:-.035em;pointer-events:none;dominant-baseline:middle;}
.RL_ST2_centerFace {fill:var(--RL_ST2_center);stroke:rgba(201,168,100,.72);stroke-width:1.35;vector-effect:non-scaling-stroke;}
.RL_ST2_centerLabel {paint-order:stroke;stroke:rgba(48,40,27,.3);stroke-width:1;fill:#f0e9db;font:400 28px 'LINE Seed JP',Arial,sans-serif;letter-spacing:-.03em;pointer-events:none;dominant-baseline:middle;}

/* MARCAS D'ÁGUA: arquivos locais derivam das logos anexadas.
   Apenas uma tonalidade por marca: não há fundo branco/negro nem gradiente.
   Cada imagem respeita clipPath de seu triângulo e não captura clicks. */
.RL_ST2_brandWatermark {pointer-events:none;transition:opacity .38s ease;}
.RL_ST2_rentWatermark {opacity:var(--RL_ST2_rentMarkOpacity);}
.RL_ST2_reportaWatermark {opacity:var(--RL_ST2_reportaMarkOpacity);}
.RL_ST2_realizaWatermark {opacity:var(--RL_ST2_realizaMarkOpacity);}
.RL_ST2_brand.RL_ST2_isActive .RL_ST2_brandWatermark {opacity:.155;}
/* Triângulo central permanece limpo: somente o texto REAL TECH & CO. */

/* Descrição: fica embaixo do triângulo SEM a antiga linha de tabs das marcas. */
.RL_ST2_detail {width:100%;min-height:139px;margin-top:5px;border-top:1px solid rgba(189,156,80,.28);position:relative;}
.RL_ST2_detailProgress {position:absolute;top:-1px;left:0;right:0;height:2px;overflow:hidden;}
.RL_ST2_detailProgress span {display:block;height:100%;width:100%;background:var(--RL_ST2_heading);transform:scaleX(0);transform-origin:left;}
.RL_ST2_detailInner {display:flex;gap:22px;align-items:center;justify-content:space-between;padding:23px 0 2px;}
.RL_ST2_detailText {min-width:0;max-width:565px;transition:opacity .22s ease,transform .22s ease;}
.RL_ST2_detailText.RL_ST2_fading {opacity:0;transform:translateY(5px);}
.RL_ST2_detailName {margin:0 0 7px;font-size:18px;font-weight:700;line-height:1.45;color:var(--RL_ST2_white);}
.RL_ST2_detailDescription {margin:0;max-width:500px;font-size:16px;line-height:1.62;color:var(--RL_ST2_muted);}
.RL_ST2_detailLink {display:grid;place-items:center;flex:0 0 48px;height:48px;border:1px solid rgba(189,156,80,.32);color:#f1e7d4;text-decoration:none;transition:background .25s ease,border-color .25s ease,transform .25s ease;}
.RL_ST2_detailLink svg {width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:square;stroke-linejoin:miter;}
.RL_ST2_detailLink:hover,.RL_ST2_detailLink:focus-visible {background:rgba(189,156,80,.1);border-color:var(--RL_ST2_heading);transform:translate(2px,-2px);outline-offset:3px;}

/* Logo REAL no fundo: os módulos são apenas contornos, enquanto as 6 bandas
   são sólidas. O logo ultrapassa a pirâmide em PC, tablet e celular; no celular
   aparece mais abaixo. Não interfere com clique/foco dos triângulos. */
.RL_ST2_watermark {position:absolute;z-index:0;top:52%;left:48%;width:clamp(900px,96vw,1600px);aspect-ratio:995/985;transform:translate(-50%,-50%);opacity:var(--RL_ST2_logoOpacity);pointer-events:none;will-change:transform;animation:RL_ST2_logoRotate var(--RL_ST2_logoSpin) linear infinite;}
.RL_ST2_logoOriginal {width:100%;height:100%;display:block;object-fit:contain;pointer-events:none;user-select:none;}
@keyframes RL_ST2_logoRotate {to {transform:translate(-50%,-50%) rotate(360deg);}}
.RL_ST2_srOnly {position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* Entrada apenas quando a seção recebe .RL_ST2_inView do IntersectionObserver. */
.RL_ST2_hasMotion .RL_ST2_copy,.RL_ST2_hasMotion .RL_ST2_visual {opacity:0;}
.RL_ST2_hasMotion.RL_ST2_inView .RL_ST2_copy {animation:RL_ST2_copyEnter .9s cubic-bezier(.2,.7,.2,1) both;}
.RL_ST2_hasMotion.RL_ST2_inView .RL_ST2_visual {animation:RL_ST2_visualEnter 1.08s .13s cubic-bezier(.2,.7,.2,1) both;}
@keyframes RL_ST2_copyEnter {from {opacity:0;transform:translate3d(-21px,11px,0);}to{opacity:1;transform:none;}}
@keyframes RL_ST2_visualEnter {from {opacity:0;transform:translate3d(16px,20px,0) scale(.97);}to{opacity:1;transform:none;}}

/* TABLET: compacto, mas sem crop e com largura de pirâmide proporcional à altura. */
@media (max-width:990px) {
 .RL_ST2_section {padding:clamp(23px,4svh,54px) clamp(17px,3.4vw,33px);min-height:100svh;}
 .RL_ST2_layout {max-width:690px;grid-template-columns:minmax(0,1fr);gap:clamp(12px,1.8svh,26px);}
 .RL_ST2_copy {max-width:none;padding-left:0;}
 .RL_ST2_title {margin-bottom:12px;font-size:clamp(21px,3vw,27px);line-height:1.31;}
 .RL_ST2_intro {font-size:clamp(13px,1.7vw,16px);line-height:1.55;max-width:670px;}
 .RL_ST2_kicker {margin-top:12px;font-size:clamp(12px,1.7vw,14px);}
 .RL_ST2_visual {max-width:min(100%,clamp(340px,51svh,590px));}
 .RL_ST2_detail {min-height:110px;}
 .RL_ST2_detailInner {padding-top:14px;}
 .RL_ST2_watermark {width:clamp(720px,117vw,1220px);left:50%;top:65%;}
}
/* CELULAR: todas as partes cabem juntas sempre que o tamanho físico permite;
   pirâmide dimensionada TAMBÉM pela altura (svh), não só pela largura. */
@media (max-width:520px) {
 .RL_ST2_section {
  padding:clamp(13px,2.8svh,27px) clamp(12px,4vw,19px);
  --RL_ST2_logoOpacity:.048; /* fundo menor e menos presente no celular */
 }
 .RL_ST2_layout {gap:clamp(7px,1.3svh,13px);}
 .RL_ST2_title {font-size:clamp(17px,4.5vw,22px);letter-spacing:.055em;line-height:1.3;margin-bottom:clamp(6px,1svh,11px);}
 .RL_ST2_intro {font-size:clamp(11.5px,3.04vw,13.7px);line-height:1.48;max-width:none;}
 .RL_ST2_kicker {font-size:clamp(11px,2.9vw,12px);margin-top:clamp(7px,1.1svh,12px);}
 .RL_ST2_visual {max-width:min(100%,clamp(232px,43svh,375px));}
 .RL_ST2_brandLabel {font-size:39px;}
 .RL_ST2_centerLabel {font-size:34px;}
 .RL_ST2_detail {min-height:99px;margin-top:0;}
 .RL_ST2_detailInner {gap:10px;padding-top:12px;}
 .RL_ST2_detailName {font-size:clamp(13px,3.8vw,16px);margin-bottom:4px;}
 .RL_ST2_detailDescription {font-size:clamp(11px,3.15vw,13px);line-height:1.44;}
 .RL_ST2_detailLink {flex-basis:39px;height:39px;}
 .RL_ST2_detailLink svg {width:17px;height:17px;}
 /* Centro do losango na borda direita: apenas metade visível, na altura central. */
 .RL_ST2_watermark {width:max(480px,140vw);left:100%;top:53%;}
}
/* Paisagem curta (celular/tablet): não empilhar se faltar altura. */
@media (min-width:600px) and (max-width:990px) and (max-height:680px) {
 .RL_ST2_layout {max-width:100%;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:clamp(14px,3vw,34px);}
 .RL_ST2_visual {max-width:min(100%,560px);}
 .RL_ST2_section {padding-block:18px;}
 .RL_ST2_visual {max-width:min(100%,calc((100svh - 115px)*1.05));}
 .RL_ST2_detail {min-height:95px;}
 .RL_ST2_detailInner {padding-top:10px;}
 .RL_ST2_title {font-size:clamp(17px,2.5vw,23px);}
 .RL_ST2_intro {font-size:clamp(12px,1.6vw,15px);}
 .RL_ST2_watermark {top:56%;width:clamp(720px,110vw,1150px);left:50%;}
}
/* Tela excepcionalmente baixa: nunca esconder informações/links para forçar o fit. */
@media (max-width:599px) and (max-height:560px) {
 .RL_ST2_section {padding-block:10px;}
 .RL_ST2_layout {gap:5px;}
 .RL_ST2_visual {max-width:min(100%,39svh);}
 .RL_ST2_title {font-size:16px;line-height:1.19;margin-bottom:4px;}
 .RL_ST2_intro {font-size:11px;line-height:1.32;}
 .RL_ST2_kicker {margin-top:5px;font-size:10px;}
 .RL_ST2_detail {min-height:86px;}
 .RL_ST2_detailInner {padding-top:8px;}
}
@media (prefers-reduced-motion:reduce) {
 .RL_ST2_section .RL_ST2_copy,.RL_ST2_section .RL_ST2_visual {opacity:1!important;}
 .RL_ST2_section *, .RL_ST2_section *::before, .RL_ST2_section *::after {animation:none!important;transition:none!important;}
 .RL_ST2_watermark {will-change:auto;}
}

/* Paisagem realmente BAIXA: reduz área visual, não os links nem o conteúdo.
   Mantém tudo na mesma tela a 844×390 / 667×375 sempre que a fonte padrão couber.
   Em zoom/acessibilidade ou 568×320, permite scroll em vez de cortar textos. */
@media (min-width:600px) and (max-width:990px) and (max-height:480px) {
 .RL_ST2_visual {max-width:min(100%,calc((100svh - 175px)*1.03));}
 .RL_ST2_section {padding-block:10px;}
 .RL_ST2_detail {min-height:80px;}
 .RL_ST2_detailInner {padding-top:8px;}
 .RL_ST2_detailName {font-size:14px;margin-bottom:3px;}
 .RL_ST2_detailDescription {font-size:12px;line-height:1.34;}
 .RL_ST2_detailLink {flex-basis:37px;height:37px;}
 .RL_ST2_title {font-size:clamp(16px,2vw,21px);line-height:1.24;}
 .RL_ST2_intro {font-size:12px;line-height:1.43;}
 .RL_ST2_kicker {font-size:11px;margin-top:10px;}
}

/* Celulares largos (521–599px): a mesma metade do losango surge à direita. */
@media (min-width:521px) and (max-width:599px) {
 .RL_ST2_watermark {width:max(600px,140vw);left:100%;top:53%;}
}
/* Paisagem em dispositivo tátil: aplicar o mesmo enquadramento do celular. */
@media (pointer:coarse) and (max-width:990px) and (max-height:480px) {
 .RL_ST2_watermark {width:max(650px,115vw);left:100%;top:53%;}
}
/* RL_ST2: respeita a barra fixa do site integrado. */
#frentes { scroll-margin-top:var(--RL_HD_header-offset,112px); }

/* REALIZA / Seção adicional com geometria EXATA original da REAL V10. */
.RL_ST2_title{font-size:clamp(33px,4.1vw,57px);letter-spacing:-.045em;text-transform:none;line-height:1.11;font-weight:500}
.RL_ST2_intro{max-width:490px}
.RL_ST2_section{scroll-margin-top:110px}
.RL_ST2_brand--realiza .RL_ST2_brandFace{fill:#183c63}
.RL_ST2_brand--reporta .RL_ST2_brandFace{fill:#2b2315}
.RL_ST2_brand--rentabiliza .RL_ST2_brandFace{fill:#102b22}
@media(max-width:990px){.RL_ST2_title{font-size:clamp(29px,5.4vw,45px);letter-spacing:-.04em}}
@media(max-width:520px){.RL_ST2_title{font-size:clamp(25px,6.5vw,32px);letter-spacing:-.035em}}

/* ======================================================================
   REALIZA V13 — FRENTES EM FUNDO BRANCO / TRIÂNGULO V10 INTACTO
   ====================================================================== */
.RL_ST2_section{
 --RL_ST2_bg:#ffffff;
 --RL_ST2_heading:#14264a;
 --RL_ST2_white:#14264a;
 --RL_ST2_muted:#455c73;
 --RL_ST2_logoOpacity:.055;
 background:#ffffff;color:#14264a;
}
/* As faces do triângulo e suas marcas d’água seguem o V10; textos DENTRO
   de cada face permanecem brancos, apesar do texto institucional escuro. */
.RL_ST2_brandLabel{fill:#f8fbff}
.RL_ST2_centerLabel{fill:#f0e9db}
.RL_ST2_layout{grid-template-columns:minmax(0,.87fr) minmax(0,1.13fr);gap:clamp(32px,5vw,82px)}
.RL_ST2_copy{max-width:610px}
.RL_ST2_title{color:#14264a;font-size:clamp(37px,4.15vw,61px);font-weight:500;letter-spacing:-.055em;line-height:1.08;margin-bottom:23px}
.RL_ST2_title em{font-style:normal;color:#a77c45}
.RL_ST2_intro{max-width:540px;font-size:clamp(16px,1.31vw,19px);line-height:1.72;color:#3d5670}
.RL_ST2_outerRing{stroke:rgba(20,38,74,.26)}
.RL_ST2_outerRing--back{stroke:rgba(20,38,74,.12)}
.RL_ST2_detail{border-top-color:rgba(20,38,74,.2)}
.RL_ST2_detailName{color:#14264a}
.RL_ST2_detailDescription{color:#465c73}
.RL_ST2_detailLink{color:#14264a;border-color:rgba(20,38,74,.25)}
.RL_ST2_detailLink:hover,.RL_ST2_detailLink:focus-visible{background:rgba(20,38,74,.08);border-color:#14264a}
.RL_ST2_detailProgress span{background:#bc965c}
@media(max-width:990px){
 .RL_ST2_layout{grid-template-columns:minmax(0,1fr);gap:clamp(14px,2.5svh,28px)}
 .RL_ST2_copy{max-width:690px}
 .RL_ST2_title{font-size:clamp(31px,5.5vw,49px);line-height:1.1}
}
@media(max-width:520px){
 .RL_ST2_title{font-size:clamp(29px,7vw,36px);line-height:1.09}
 .RL_ST2_intro{font-size:clamp(14px,3.7vw,16px);line-height:1.59}
 .RL_ST2_copy{padding-left:0}
}

/* V14: altura da tela para Frentes, sem cortar o triângulo ou a descrição. */
@media (min-width:1161px){
 .RL_ST2_section{min-height:100svh;}
 .RL_ST2_visual{max-width:min(100%,59svh,690px);}
 .RL_ST2_section{padding-top:clamp(108px,12svh,142px);padding-bottom:clamp(22px,3svh,40px);}
}
@media (min-width:1161px) and (max-height:820px){
 .RL_ST2_visual{max-width:min(100%,56svh,620px);}
 .RL_ST2_section{padding-top:clamp(108px,13svh,122px);padding-bottom:22px;}
 .RL_ST2_detail{min-height:95px;}
 .RL_ST2_detailInner{padding-top:11px;}
}

/* ============================================================================
   REALIZA V17 — TRIÂNGULO FIXO DURANTE O CICLO DE DESCRIÇÕES.
   A descrição ativa e os três textos de referência ocupam a MESMA célula de
   grid. Os textos de referência são invisíveis e reservam a altura máxima
   exigida pela largura real disponível (inclusive zoom e responsividade).
   Assim, mudar a frente NÃO altera a altura de .RL_ST2_visual, nem desloca
   a pirâmide que é centralizada verticalmente na seção de tela cheia.
   ============================================================================ */
.RL_ST2_detailText.RL_ST2_sizeLocked{
  flex:1 1 0%;
  width:100%;
  max-width:565px;
  min-width:0;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  align-items:start;
}
.RL_ST2_detailCurrent,
.RL_ST2_detailSizer{
  grid-area:1/1;
  min-width:0;
}
.RL_ST2_detailSizer{
  visibility:hidden;
  pointer-events:none;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  align-items:start;
}
.RL_ST2_detailSizerItem{
  grid-area:1/1;
  min-width:0;
}