/* BRAXION HOME CINEMATIC — v201
   Desktop mais amplo + fundo tech + menos caixas duras.
   Mobile preservado. */

body.home-page{
  position:relative;
  background:
    radial-gradient(1200px 720px at 78% 5%,rgba(0,138,255,.20),transparent 58%),
    radial-gradient(900px 620px at 8% 28%,rgba(0,196,255,.10),transparent 60%),
    radial-gradient(980px 700px at 92% 58%,rgba(29,79,255,.10),transparent 64%),
    radial-gradient(820px 620px at 20% 78%,rgba(0,141,255,.08),transparent 64%),
    linear-gradient(180deg,#03101d 0%,#031522 22%,#02101c 51%,#020b14 100%)!important;
  background-attachment:fixed;
}

body.home-page #homeView{
  position:relative;
  isolation:isolate;
}
body.home-page #homeView::before{
  content:"";
  position:absolute;
  z-index:-3;
  pointer-events:none;
  top:-120px;
  bottom:-160px;
  left:50%;
  width:100vw;
  transform:translateX(-50%);
  opacity:.75;
  background-image:
    radial-gradient(circle at 8% 12%,rgba(93,211,255,.52) 0 1px,transparent 1.6px),
    radial-gradient(circle at 24% 35%,rgba(54,154,255,.34) 0 1px,transparent 1.5px),
    radial-gradient(circle at 73% 18%,rgba(94,210,255,.45) 0 1px,transparent 1.6px),
    radial-gradient(circle at 86% 46%,rgba(59,137,255,.30) 0 1px,transparent 1.5px),
    radial-gradient(circle at 47% 62%,rgba(69,174,255,.22) 0 1px,transparent 1.5px),
    linear-gradient(112deg,transparent 0 27%,rgba(52,161,255,.035) 27.1%,transparent 27.3%),
    linear-gradient(69deg,transparent 0 64%,rgba(36,134,255,.035) 64.1%,transparent 64.3%);
  background-size:
    190px 170px,
    270px 240px,
    225px 205px,
    320px 270px,
    250px 220px,
    100% 100%,
    100% 100%;
  mask-image:linear-gradient(180deg,transparent 0,#000 8%,#000 92%,transparent 100%);
}

/* Desktop: abandonar o corredor central de 1220px. */
@media(min-width:1101px){
  body.home-page #app.shell,
  body.home-page .site-header-v3.shell,
  body.home-page .marquee-shell.shell{
    width:min(1660px,calc(100vw - 44px))!important;
    max-width:none!important;
  }

  body.home-page #top.hero{
    width:min(1660px,calc(100vw - 44px))!important;
    grid-template-columns:minmax(500px,.80fr) minmax(760px,1.20fr);
    gap:48px;
    padding-top:54px;
    padding-bottom:68px;
  }

  /* A cena deixa de parecer uma foto retangular jogada no site. */
  body.home-page #homeView .eco196-stage{
    min-height:670px!important;
    background:
      radial-gradient(ellipse at 50% 46%,rgba(4,32,60,.78) 0%,rgba(3,25,48,.56) 35%,rgba(3,19,37,.23) 58%,transparent 78%),
      radial-gradient(circle at var(--mouse-x) var(--mouse-y),rgba(13,157,255,.28),transparent 29%),
      radial-gradient(circle at 50% 46%,rgba(0,213,255,.12),transparent 21%),
      radial-gradient(ellipse at 52% 104%,rgba(0,105,255,.32),transparent 48%)!important;
    filter:drop-shadow(0 24px 70px rgba(0,0,0,.18));
  }
  body.home-page #homeView .eco196-vignette{
    background:
      radial-gradient(ellipse at center,transparent 48%,rgba(1,8,17,.20) 76%,transparent 100%),
      linear-gradient(180deg,transparent 0 76%,rgba(1,7,15,.18));
  }

  /* Sections full-presence: use screen real estate without stretching copy. */
  body.home-page #section-experience,
  body.home-page #section-catalogo,
  body.home-page #section-solutions,
  body.home-page #section-radar,
  body.home-page #section-geek,
  body.home-page .discovery-section{
    width:100%;
    max-width:none;
  }

  body.home-page .section-title{
    max-width:none;
    padding-inline:8px;
  }
}

/* Hero ganha uma atmosfera contínua, não uma caixa isolada. */
body.home-page #top.hero::after{
  content:"";
  position:absolute;
  z-index:-3;
  pointer-events:none;
  left:50%;
  top:2%;
  width:100vw;
  height:94%;
  transform:translateX(-50%);
  background:
    radial-gradient(ellipse at 72% 42%,rgba(0,145,255,.15),transparent 38%),
    radial-gradient(ellipse at 82% 68%,rgba(0,70,255,.08),transparent 30%),
    linear-gradient(90deg,transparent 0%,rgba(0,148,255,.025) 52%,transparent 100%);
}

/* Grandes superfícies: menos “quadrado/card”, mais cenário. */
body.home-page .experience-portal-v5,
body.home-page .vnext-solutions,
body.home-page .vnext-radar-teaser,
body.home-page .geek-quiz-compact{
  position:relative;
  overflow:hidden;
  border-color:rgba(77,174,255,.16)!important;
  box-shadow:
    0 30px 85px rgba(0,0,0,.22),
    inset 0 1px rgba(255,255,255,.025),
    0 0 54px rgba(0,108,255,.035);
}

body.home-page .experience-portal-v5{
  border-radius:46px 24px 46px 24px!important;
  background:
    radial-gradient(circle at 84% 15%,rgba(0,148,255,.16),transparent 28%),
    radial-gradient(circle at 11% 76%,rgba(0,203,255,.055),transparent 28%),
    linear-gradient(145deg,rgba(4,19,35,.93),rgba(2,10,20,.96))!important;
}

body.home-page .vnext-solutions{
  border-radius:28px 54px 28px 54px!important;
  border-color:rgba(39,212,167,.13)!important;
  background:
    radial-gradient(circle at 8% 16%,rgba(0,153,255,.11),transparent 30%),
    radial-gradient(circle at 88% 72%,rgba(0,224,178,.07),transparent 28%),
    linear-gradient(145deg,rgba(4,22,31,.94),rgba(2,11,20,.97))!important;
}

body.home-page .vnext-radar-teaser{
  border-radius:50px 24px 50px 24px!important;
  background:
    radial-gradient(circle at 74% 35%,rgba(0,155,255,.18),transparent 29%),
    linear-gradient(145deg,rgba(4,22,39,.95),rgba(2,10,19,.97))!important;
}

body.home-page .geek-quiz-compact{
  border-radius:26px 58px 26px 58px!important;
  background:
    radial-gradient(circle at 78% 20%,rgba(0,140,255,.12),transparent 32%),
    linear-gradient(145deg,#04111e,#020913)!important;
}

/* Linhas de energia sutis nas grandes superfícies. */
body.home-page .experience-portal-v5::before,
body.home-page .vnext-solutions::before,
body.home-page .vnext-radar-teaser::before,
body.home-page .geek-quiz-compact::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.48;
  background-image:
    linear-gradient(112deg,transparent 0 18%,rgba(60,183,255,.05) 18.1%,transparent 18.3%),
    linear-gradient(72deg,transparent 0 78%,rgba(43,158,255,.045) 78.1%,transparent 78.3%),
    radial-gradient(circle at 92% 14%,rgba(89,207,255,.5) 0 1px,transparent 1.6px),
    radial-gradient(circle at 8% 72%,rgba(46,151,255,.36) 0 1px,transparent 1.5px);
  background-size:100% 100%,100% 100%,140px 120px,180px 150px;
}
body.home-page .experience-portal-v5>*,
body.home-page .vnext-solutions>*,
body.home-page .vnext-radar-teaser>*,
body.home-page .geek-quiz-compact>*{
  position:relative;
  z-index:1;
}

/* Cards fotográficos: menos “azulejo quadrado”, mais peça editorial. */
body.home-page .vnext-category-card-photo{
  border-radius:30px 18px 30px 18px!important;
  border-color:rgba(76,173,255,.23)!important;
  box-shadow:0 20px 48px rgba(0,0,0,.20),0 0 28px rgba(0,119,255,.035)!important;
}
body.home-page .vnext-solutions-grid-photo .vnext-solution-card-photo{
  border-radius:18px 30px 18px 30px!important;
  border-color:rgba(69,194,255,.18)!important;
  box-shadow:0 18px 44px rgba(0,0,0,.20),0 0 26px rgba(0,137,255,.03)!important;
}
body.home-page .vnext-category-card-photo:hover,
body.home-page .vnext-solutions-grid-photo .vnext-solution-card-photo:hover{
  transform:translateY(-6px) scale(1.012);
  border-color:rgba(82,199,255,.48)!important;
  box-shadow:0 27px 60px rgba(0,0,0,.29),0 0 38px rgba(0,146,255,.09)!important;
}

/* Dentro da hero: arredondamento mais orgânico nos painéis. */
body.home-page .eco196-panel{
  border-radius:20px 12px 20px 12px;
  border-color:rgba(74,187,255,.34);
  background:
    linear-gradient(145deg,rgba(7,34,61,.90),rgba(2,14,28,.89));
  box-shadow:
    inset 0 1px rgba(255,255,255,.075),
    0 16px 38px rgba(0,0,0,.28),
    0 0 25px rgba(0,139,255,.10);
}
body.home-page .eco196-entertainment,
body.home-page .eco196-sites{border-radius:24px 13px 24px 13px}
body.home-page .eco196-ai,
body.home-page .eco196-portal{border-radius:13px 24px 13px 24px}

body.home-page .eco196-base{
  border-radius:28px 16px 28px 16px;
  background:linear-gradient(180deg,rgba(5,34,61,.92),rgba(2,14,28,.94));
  border-color:rgba(63,187,255,.34);
  box-shadow:0 0 38px rgba(0,135,255,.13),inset 0 1px rgba(255,255,255,.055);
}
body.home-page .eco196-base a,
body.home-page .eco196-base strong{
  border-radius:14px 8px 14px 8px;
}

/* Header também acompanha a largura do desktop e fica menos “ilha”. */
@media(min-width:1101px){
  body.home-page .site-header-v3{
    border-radius:0 0 26px 26px;
    padding-inline:18px;
    background:
      linear-gradient(180deg,rgba(2,15,28,.95),rgba(2,16,29,.84));
    box-shadow:0 18px 58px rgba(0,0,0,.17),0 1px rgba(70,177,255,.07);
  }
  body.home-page .marquee-shell{
    border-radius:0 0 18px 18px;
  }

  body.home-page .vnext-category-grid-photo{gap:16px}
  body.home-page .vnext-solutions-grid-photo{gap:14px}
}

/* Tablet/mobile: preservar a composição validada e reduzir custo de fundo. */
@media(max-width:1100px){
  body.home-page{background-attachment:scroll}
  body.home-page #homeView::before{opacity:.42}
}
@media(max-width:760px){
  body.home-page #homeView::before{
    background-image:
      radial-gradient(circle at 12% 18%,rgba(92,205,255,.30) 0 1px,transparent 1.6px),
      radial-gradient(circle at 84% 42%,rgba(52,147,255,.24) 0 1px,transparent 1.5px);
    background-size:180px 170px,220px 210px;
  }
  body.home-page .experience-portal-v5,
  body.home-page .vnext-solutions,
  body.home-page .vnext-radar-teaser,
  body.home-page .geek-quiz-compact{
    border-radius:24px!important;
  }
  body.home-page .vnext-category-card-photo,
  body.home-page .vnext-solutions-grid-photo .vnext-solution-card-photo{
    border-radius:20px!important;
  }
}
@media(prefers-reduced-motion:reduce){
  body.home-page{background-attachment:scroll}
}

/* INDICAÇÃO DA SEMANA — editorial com vídeo */
body.home-page .weekly-pick{
  position:relative;
  isolation:isolate;
  display:grid;
  grid-template-columns:minmax(320px,.72fr) minmax(560px,1.28fr);
  gap:34px;
  align-items:center;
  margin:4px 0 38px;
  padding:28px 30px 28px 36px;
  overflow:hidden;
  border:1px solid rgba(77,176,255,.18);
  border-radius:34px 72px 34px 72px;
  background:
    radial-gradient(circle at 78% 46%,rgba(0,145,255,.14),transparent 31%),
    radial-gradient(circle at 7% 82%,rgba(255,116,21,.065),transparent 24%),
    linear-gradient(145deg,rgba(4,18,33,.95),rgba(2,9,18,.98));
  box-shadow:0 30px 82px rgba(0,0,0,.22),0 0 48px rgba(0,116,255,.035),inset 0 1px rgba(255,255,255,.025);
}
body.home-page .weekly-pick::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:.56;
  background-image:
    linear-gradient(112deg,transparent 0 24%,rgba(62,181,255,.05) 24.1%,transparent 24.35%),
    linear-gradient(70deg,transparent 0 79%,rgba(49,153,255,.045) 79.1%,transparent 79.35%),
    radial-gradient(circle at 89% 12%,rgba(87,208,255,.54) 0 1px,transparent 1.6px),
    radial-gradient(circle at 16% 75%,rgba(52,155,255,.34) 0 1px,transparent 1.5px);
  background-size:100% 100%,100% 100%,150px 130px,190px 170px;
}
.weekly-pick-copy{position:relative;z-index:2;padding:10px 0 12px}
.weekly-pick-eyebrow{display:flex;align-items:center;gap:8px}
.weekly-pick-eyebrow small{color:#76caff;font-size:7px;font-weight:950;letter-spacing:.17em}
.weekly-pick-pulse{
  width:7px;height:7px;border-radius:50%;
  background:#34baff;
  box-shadow:0 0 0 5px rgba(52,186,255,.08),0 0 18px rgba(52,186,255,.72);
}
.weekly-pick-brand{display:flex;align-items:center;gap:8px;margin-top:20px;color:#cbdff1;font-size:9px;font-weight:850}
.weekly-pick-brand img{width:22px;height:22px;object-fit:contain}
.weekly-pick h2{
  margin:12px 0 13px;
  max-width:540px;
  font-family:var(--display);
  font-size:clamp(38px,4vw,62px);
  line-height:.94;
  letter-spacing:-.062em;
}
.weekly-pick h2 em{display:block;color:#7fd2ff;font-style:normal}
.weekly-pick p{max-width:520px;margin:0;color:#90a8bc;font-size:11px;line-height:1.65}
.weekly-pick-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:22px}
.weekly-pick-actions a{
  min-height:43px;
  display:flex;align-items:center;justify-content:center;
  padding:0 14px;
  border:1px solid rgba(76,173,255,.22);
  border-radius:14px 8px 14px 8px;
  background:rgba(6,27,47,.74);
  color:#dceeff;
  font-size:8px;
  font-weight:900;
  transition:transform .2s ease,border-color .2s ease,background .2s ease,box-shadow .2s ease;
}
.weekly-pick-actions a:first-child{
  background:linear-gradient(180deg,#118ed8,#0765a6);
  border-color:rgba(89,199,255,.38);
}
.weekly-pick-actions a:hover,.weekly-pick-actions a:focus-visible{
  transform:translateY(-2px);
  border-color:rgba(88,201,255,.52);
  box-shadow:0 14px 30px rgba(0,119,210,.12);
}
.weekly-pick-video{position:relative;z-index:2;min-width:0}
.weekly-pick-video-frame{
  position:relative;
  aspect-ratio:16/9;
  overflow:hidden;
  border:1px solid rgba(84,190,255,.26);
  border-radius:24px 54px 24px 54px;
  background:#020811;
  box-shadow:0 24px 58px rgba(0,0,0,.34),0 0 38px rgba(0,137,255,.08);
}
.weekly-pick-video-frame::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.02),inset 0 -24px 48px rgba(0,8,20,.08);
}
.weekly-pick-video-frame iframe{display:block;width:100%;height:100%;border:0}
.weekly-pick-video-meta{
  display:flex;justify-content:space-between;gap:16px;align-items:center;
  padding:10px 10px 0;
}
.weekly-pick-video-meta span{color:#eef8ff;font-size:8px;font-weight:950;letter-spacing:.12em}
.weekly-pick-video-meta small{color:#58758d;font-size:6px;font-weight:900;letter-spacing:.12em}

@media(max-width:980px){
  body.home-page .weekly-pick{grid-template-columns:1fr;gap:20px;padding:24px;border-radius:30px}
  .weekly-pick h2{max-width:720px}
}
@media(max-width:760px){
  body.home-page .weekly-pick{
    margin:2px 0 24px;
    padding:18px 16px 16px;
    gap:16px;
    border-radius:24px;
  }
  .weekly-pick-copy{padding:2px 0}
  .weekly-pick-brand{margin-top:13px}
  .weekly-pick h2{font-size:36px;margin:9px 0 10px}
  .weekly-pick p{font-size:9.5px}
  .weekly-pick-actions{margin-top:15px}
  .weekly-pick-actions a{min-height:42px;flex:1 1 145px}
  .weekly-pick-video-frame{border-radius:18px}
  .weekly-pick-video-meta{padding:8px 2px 0}
}