/* GUI - a Home do viajante.

   A composicao segue referencias humanas aprovadas. Nenhuma delas e servida: o
   que existe aqui e layout de verdade. As imagens sao FOTOGRAFIAS e ilustracoes
   do proprio acervo, sem um pixel de interface.

   PALETA. O acento e o #7B4FB0 dos mapas homologados no iPhone, nao o roxo mais
   saturado do mockup. Havia duas paletas no repositorio e a que passou por
   homologacao humana e a dos mapas - redesenhar o provado para casar com um
   comp novo seria trocar o certo pelo recente.

   ALTURA DO HERO. Nao ha px copiado do mockup. A referencia A tem hero de 786
   de 1672 - 47% da tela - e e isso que `min(58vh, 500px)` com aspecto preserva
   nos iPhones usuais: presenca ampla da viajante sem esconder a busca. */

.home { margin: 0 -16px; }

/* ---------------- hero: carrossel de tres fotografias (16.7) ----------------

   O TRILHO ROLA; O VEU, O TEXTO E OS PONTOS FICAM PARADOS.

   Se o texto viajasse junto com a foto, cada gesto arrastaria a headline para
   fora da tela e a primeira dobra piscaria a cada slide. O que muda de slide e
   a FOTOGRAFIA; a promessa do produto e uma so e fica onde esta.

   O trilho usa scroll-snap nativo - o arrasto tem a fisica do proprio iPhone, e
   nenhuma animacao escrita a mao chega perto disso. */
.h-hero {
  position: relative; isolation: isolate;
  min-height: min(58vh, 500px);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: calc(var(--seguro-t) + 14px) 20px 66px;
  background: #1a1222;
  overflow: hidden;
}
.h-hero-trilho {
  position: absolute; inset: 0; z-index: -2;
  display: flex; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.h-hero-trilho::-webkit-scrollbar { display: none; }
.h-hero-trilho:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
.h-slide {
  position: relative; flex: 0 0 100%; width: 100%; height: 100%;
  scroll-snap-align: center; scroll-snap-stop: always; overflow: hidden;
}
/* A FOTOGRAFIA MOSTRA PESSOA E AMBIENTE, E ASSIM DEVE FICAR.

   As tres fotos tem proporcoes diferentes: a dos torii e retrato 941x1672, a da
   muralha e 16:9 e a de Doha e 4:3. Um `cover` igual para todas viraria
   close-up na retrato e centralizaria as paisagens - cortando justamente o lado
   limpo onde o texto vive.

   Por isso cada slide traz o proprio enquadramento em variaveis, decididas por
   SLUG no JS: `--foto-larg` diz quanto a foto e mais larga que a caixa e
   `--foto-x/--foto-y` dizem para onde ela e ancorada. */
.h-slide-foto {
  position: absolute; top: 0; left: 0; height: 100%;
  width: var(--foto-larg, 100%); max-width: none;
  object-fit: cover; object-position: var(--foto-x, 62%) var(--foto-y, 50%);
}
/* O VEU E ESCURO E VEM DA ESQUERDA - decisao humana da 16.7.

   Ate a 16.6R ele era claro, com texto escuro por cima. A revisao pediu o
   oposto, e com razao: as tres fotografias sao de amanhecer e entardecer, com
   ceu claro exatamente onde o texto mora. Texto preto ali era ilegivel; branco
   sobre escurecimento e o que ja funcionava na foto dos torii.

   O escurecimento morre antes da metade: a direita a fotografia continua limpa,
   e a viajante, o cenario e a profundidade continuam legiveis. */
.h-hero-veu {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(100deg, rgba(10,6,16,.93) 0%, rgba(10,6,16,.86) 30%,
                    rgba(10,6,16,.62) 47%, rgba(10,6,16,.22) 66%,
                    rgba(10,6,16,0) 84%),
    linear-gradient(to bottom, rgba(10,6,16,.70) 0%, rgba(10,6,16,.10) 26%,
                    rgba(10,6,16,0) 52%, rgba(10,6,16,.42) 100%);
}
.h-hero-topo {
  position: absolute; top: calc(var(--seguro-t) + 14px); left: 20px; right: 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}

/* ---------------- marca ----------------
   Simbolo do humano num ladrilho claro, e "Gui" ao lado. O ladrilho existe
   porque a marca e roxa escura e o hero agora e escuro: tinta sobre tinta nao
   se le, e recolorir a marca de outra pessoa seria inventar branding. */
.h-logo {
  display: inline-flex; align-items: center; gap: 10px;
  color: #fff; font-weight: 700; font-size: 1.35rem; letter-spacing: -.015em;
  text-shadow: 0 1px 12px rgba(0,0,0,.45);
}
.h-logo-mk {
  width: 42px; height: 42px; border-radius: 13px; flex: none;
  display: grid; place-items: center; padding: 6px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 4px 16px rgba(10,6,16,.34);
}
.h-logo-mk img { width: 100%; height: 100%; object-fit: contain; display: block; }
.h-hero-acoes { display: flex; gap: 10px; }
.h-hero-acoes button {
  width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255,255,255,.94); color: var(--acento);
  display: grid; place-items: center; box-shadow: 0 4px 14px rgba(10,6,16,.3);
}
.h-hero-acoes button:active { transform: scale(.94); }

.h-hero-txt { position: relative; max-width: 20rem; }
.h-selo {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--acento); color: #fff; border-radius: 999px;
  padding: 8px 15px; font-size: .74rem; font-weight: 700; letter-spacing: .07em;
  box-shadow: 0 4px 16px rgba(10,6,16,.34);
}
.h-selo-onda { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.h-selo-onda i { width: 2px; background: #fff; border-radius: 1px; opacity: .95; }
.h-selo-onda i:nth-child(1) { height: 6px; }
.h-selo-onda i:nth-child(2) { height: 12px; }
.h-selo-onda i:nth-child(3) { height: 8px; }
.h-hero-txt h1 {
  margin: 14px 0 10px; color: #fff; font-size: clamp(1.8rem, 8vw, 2.35rem);
  line-height: 1.1; letter-spacing: -.028em; font-weight: 800;
  text-shadow: 0 2px 18px rgba(0,0,0,.42);
}
.h-hero-txt p {
  margin: 0; color: rgba(255,255,255,.9); font-size: .95rem; line-height: 1.45;
  text-shadow: 0 1px 12px rgba(0,0,0,.42);
}
/* O nome do Guia do slide da frente. E botao de verdade: leva ao guia daquela
   fotografia - o carrossel deixa de ser enfeite e vira porta. */
.h-hero-guia {
  margin-top: 14px; display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid rgba(255,255,255,.5); border-radius: 999px;
  /* Sem backdrop-filter: alem de caro no telefone, ele obriga o navegador a
     reler o fundo inteiro e trava a captura de pagina cheia nas evidencias. */
  background: rgba(255,255,255,.16);
  color: #fff; font: inherit; font-size: .84rem; font-weight: 600;
  padding: 9px 15px; min-height: 38px; cursor: pointer;
}
.h-hero-guia:active { transform: scale(.97); }

.h-hero-dots {
  position: absolute; left: 0; right: 0; bottom: 44px;
  display: flex; justify-content: center; gap: 6px; z-index: 1;
}
.h-dot {
  border: 0; background: none; cursor: pointer; padding: 10px 5px; margin: -10px 0;
  display: grid; place-items: center;
}
.h-dot i {
  display: block; width: 7px; height: 7px; border-radius: 999px;
  background: rgba(255,255,255,.45); transition: width .18s ease, background .18s ease;
}
.h-dot.on i { width: 20px; background: #fff; }

/* ---------------- painel branco que sobe sobre o hero ---------------- */
.h-painel {
  position: relative; z-index: 2; margin-top: -42px;
  border-radius: 30px 30px 0 0;
  background: var(--papel);
  box-shadow: 0 -12px 28px rgba(48,30,70,.18);
  padding: 20px 16px calc(var(--shell-h) + var(--seguro-b) + 26px);
}

/* ---------------- busca ---------------- */
.h-busca { position: relative; }
.h-busca-cx {
  display: flex; align-items: center; gap: 12px;
  background: var(--papel-2); border: 1px solid var(--linha);
  border-radius: 16px; padding: 0 16px; height: 56px;
  box-shadow: 0 2px 10px rgba(24,16,28,.05);
}
.h-busca-cx:focus-within { border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-claro); }
.h-lupa { color: var(--tinta-clara); display: flex; }
.h-busca-cx input {
  /* O campo ocupa a altura toda da caixa: um input de 25 px dentro de uma caixa
     de 56 deixa 31 px que parecem clicaveis e nao focam nada. */
  flex: 1 1 auto; border: 0; background: transparent; font: inherit;
  font-size: .98rem; color: var(--tinta); min-width: 0;
  align-self: stretch; min-height: 44px;
}
.h-busca-cx input:focus { outline: none; }
.h-busca-cx input::placeholder { color: var(--tinta-clara); }

.busca-res {
  margin-top: 8px; background: var(--papel-2); border: 1px solid var(--linha);
  border-radius: 14px; overflow: hidden; box-shadow: 0 8px 24px rgba(24,16,28,.1);
}
.busca-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 12px 14px; border: 0; background: none; font: inherit; text-align: left;
  color: var(--tinta); cursor: pointer;
}
.busca-item + .busca-item { border-top: 1px solid var(--linha); }
.busca-item:active { background: var(--acento-claro); }
.bi-tx { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.bi-tx strong { font-size: .95rem; font-weight: 600; }
.bi-onde { font-size: .78rem; color: var(--tinta-fraca); }
.bi-cta { flex: none; font-size: .82rem; font-weight: 600; color: var(--acento); }
.busca-vazio { margin: 0; padding: 14px; font-size: .88rem; color: var(--tinta-fraca); }

/* ---------------- tres atalhos ---------------- */
.h-atalhos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; }
.h-atalho {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  background: var(--papel-2); border: 1px solid var(--linha); border-radius: 16px;
  padding: 14px 12px; font: inherit; font-size: .84rem; line-height: 1.25;
  color: var(--tinta); text-align: left; cursor: pointer; min-height: 92px;
}
.h-atalho:active { transform: scale(.98); }
.h-atalho-ic { color: var(--acento); display: flex; }

/* ---------------- seções ---------------- */
.h-sec { margin-top: 30px; }
.h-sec > h2 { margin: 0 0 4px; font-size: 1.18rem; letter-spacing: -.02em; }
.h-sub { margin: 0 0 14px; font-size: .88rem; color: var(--tinta-fraca); }
.h-sec-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.h-sec-topo h2 { margin: 0 0 12px; font-size: 1.18rem; letter-spacing: -.02em; }
.h-vertodos {
  /* Alvo de toque de 20 px de altura e menor do que a ponta do dedo. O padding
     negativo na margem mantem o alinhamento visual da referencia. */
  border: 0; background: none; font: inherit; font-size: .88rem; font-weight: 600;
  color: var(--acento); cursor: pointer; flex: none;
  padding: 8px 4px; margin: -8px -4px; min-height: 36px;
  display: inline-flex; align-items: center; gap: 3px;
}

/* ---------------- cards dos guias ---------------- */
.h-guias { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.h-card {
  position: relative; display: block; padding: 0; border: 0; cursor: pointer;
  border-radius: 18px; overflow: hidden; background: #2a2230;
  aspect-ratio: 3 / 4; text-align: left; font: inherit; isolation: isolate;
}
.h-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.h-card-veu {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(12,8,16,.9) 4%, rgba(12,8,16,.45) 40%,
                              rgba(12,8,16,0) 68%);
}
.h-card-tx { position: absolute; left: 10px; right: 8px; bottom: 10px; color: #fff; }
.h-card-tx strong { display: block; font-size: .9rem; font-weight: 700; letter-spacing: -.015em; }
.h-card-tx span {
  /* .68rem dava 10.88 px - abaixo do que se le confortavelmente em movimento. */
  display: block; font-size: .72rem; line-height: 1.32; margin-top: 2px;
  color: rgba(255,255,255,.88);
}
.h-card:active { transform: scale(.985); }

/* ---------------- experimente o GUI ----------------

   A capa e a arte oficial do video, na proporcao em que foi desenhada. Ela nao
   e recortada: o titulo, a marca e a viajante fazem parte da composicao, e um
   `cover` que cortasse as bordas comeria justamente isso. */
.h-video {
  /* A CAIXA TEM A PROPORCAO DA ARTE, e a imagem preenche a caixa.
     Deixar a altura sair do tamanho intrinseco da imagem (`height:auto`) obriga
     o navegador a refazer o layout quando a imagem chega - e, numa pagina
     alta, essa e a diferenca entre rasterizar uma vez e rasterizar sempre.
     Declarando a proporcao, o espaco ja existe antes do byte chegar. */
  position: relative; display: block; width: 100%; padding: 0; border: 0;
  aspect-ratio: 1200 / 675;
  border-radius: 18px; overflow: hidden; background: #1c1430;
  box-shadow: 0 6px 22px rgba(28,18,38,.16); isolation: isolate;
}
.h-video-capa {
  position: absolute; inset: 0; display: block;
  width: 100%; height: 100%; object-fit: cover;
}
.h-video.pronto { cursor: pointer; }
.h-video.pronto:active { transform: scale(.99); }
.h-video-play {
  position: absolute; inset: 0; margin: auto;
  width: 62px; height: 62px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,255,255,.95); color: var(--acento);
  box-shadow: 0 8px 26px rgba(0,0,0,.4);
}
/* ESTADO DE PREPARO: a arte tem um play DESENHADO, e desenho nao e controle.
   Enquanto nao houver video, um veu apaga o convite ao toque e a tarja diz por
   que. Botao que nao leva a lugar nenhum e exatamente o que a decisao 16 proibe. */
/* O apagamento vem de um VEU, e nao de `filter` na imagem.
   Um filtro CSS sobre um bitmap grande obriga o navegador a rasterizar a
   imagem inteira numa camada propria; num telefone isso e caro, e na captura
   de pagina inteira das evidencias travava a rasterizacao por completo. Uma
   camada de cor por cima da o mesmo resultado visual de graca. */
.h-video-veu {
  position: absolute; inset: 0; background: rgba(12,8,20,.42);
}
.h-video-tarja {
  position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%);
  background: rgba(12,8,20,.82); color: #fff; border: 1px solid rgba(255,255,255,.24);
  border-radius: 999px; padding: 6px 14px; font-size: .76rem; font-weight: 600;
  white-space: nowrap;
}
.h-video-nota {
  margin: 10px 2px 0; font-size: .8rem; color: var(--tinta-fraca); line-height: 1.45;
}

/* ---------------- caminho dos 4 passos ----------------

   Quatro caixas de texto viraram quatro marcos com arte, numero, titulo curto e
   UMA linha de explicacao, num painel proprio e ligados por uma trilha. A
   trilha e o ::before da lista - um so elemento, sem SVG posicionado por cima
   que desalinha em outra largura. */
.h-passos {
  list-style: none; margin: 4px 0 0; padding: 18px 14px;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px 10px;
  position: relative;
  background: linear-gradient(160deg, var(--acento-claro), rgba(255,255,255,.6));
  border: 1px solid var(--linha); border-radius: 22px;
}
.h-passos::before {
  content: ""; position: absolute; left: 22%; right: 22%; top: 52px; height: 0;
  border-top: 2px dashed var(--acento); opacity: .28; pointer-events: none;
}
.h-passos li {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  text-align: center; position: relative;
}
.h-passo-arte {
  position: relative; width: 58px; height: 58px; border-radius: 19px;
  display: grid; place-items: center;
  background: var(--papel-2); border: 1px solid var(--linha);
  color: var(--acento); box-shadow: 0 3px 12px rgba(48,30,70,.1);
}
.h-passo-n {
  position: absolute; top: -7px; right: -7px;
  width: 23px; height: 23px; border-radius: 50%; display: grid; place-items: center;
  background: var(--acento); color: #fff; font-size: .72rem; font-weight: 700;
  border: 2px solid var(--acento-claro);
}
.h-passo-tx { display: flex; flex-direction: column; gap: 3px; max-width: 10.5rem; }
.h-passo-tx strong { font-size: .86rem; font-weight: 700; line-height: 1.25; }
.h-passo-tx span { font-size: .76rem; line-height: 1.35; color: var(--tinta-fraca); }

/* ---------------- tudo em um só lugar ----------------

   Icone, titulo e ESTADO REAL, e cada card LEVA a tela correspondente: um
   quadro que so informa e um quadro morto. O destaque abaixo carrega a imagem
   real da atividade - a ilustracao da regiao dela, unica midia do acervo. */
.h-mini { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.h-mini-cx {
  background: var(--papel-2); border: 1px solid var(--linha);
  border-radius: 16px; padding: 13px; font: inherit; text-align: left;
  color: var(--tinta); cursor: pointer;
  display: flex; flex-direction: column; gap: 3px; min-height: 104px;
}
.h-mini-cx:active { transform: scale(.985); }
.h-mini-ic {
  width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center;
  background: var(--acento-claro); color: var(--acento); font-size: .95rem; margin-bottom: 4px;
}
.h-mini-tit { font-size: .84rem; font-weight: 600; line-height: 1.3; }
.h-mini-val { font-size: .78rem; color: var(--tinta-fraca); line-height: 1.35; }

.h-destaque {
  /* A PROPORCAO E DA CAIXA, NAO DA ILUSTRACAO.
     As ilustracoes de regiao sao retratos 3:4; deixar a altura sair delas dava
     um card de quase uma tela inteira no meio da Home. A caixa manda, e o
     `cover` escolhe o pedaco. */
  position: relative; display: block; width: 100%; margin-top: 10px; padding: 0;
  border: 0; border-radius: 18px; overflow: hidden; cursor: pointer;
  background: #241c2e; aspect-ratio: 16 / 10; text-align: left; font: inherit;
  isolation: isolate;
}
.h-destaque img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 30%; display: block;
}
.h-destaque-sem { position: absolute; inset: 0; display: grid; place-items: center;
  color: rgba(255,255,255,.5); font-size: 2rem; }
.h-destaque-veu {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(12,8,16,.92) 6%, rgba(12,8,16,.5) 48%,
                              rgba(12,8,16,.1) 84%);
}
.h-destaque-tx { position: absolute; left: 14px; right: 14px; bottom: 12px; color: #fff; }
.h-destaque-rot {
  display: block; font-size: .68rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(255,255,255,.78); margin-bottom: 3px;
}
.h-destaque-tx strong { display: block; font-size: 1rem; line-height: 1.25; }
.h-destaque-tx span {
  display: block; font-size: .78rem; line-height: 1.4; margin-top: 3px;
  color: rgba(255,255,255,.86);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.h-destaque:active { transform: scale(.99); }

/* ---------------- benefícios, com imagem do acervo ---------------- */
.h-benef { display: grid; gap: 10px; margin-top: 12px; }
.h-benef-cx {
  background: var(--papel-2); border: 1px solid var(--linha);
  border-radius: 16px; padding: 10px 12px;
  display: flex; align-items: center; gap: 12px;
}
.h-benef-arte {
  flex: none; width: 68px; height: 68px; border-radius: 14px; overflow: hidden;
  background: var(--acento-claro); display: block;
}
.h-benef-arte img { width: 100%; height: 100%; object-fit: cover; display: block; }
.h-benef-tx { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.h-benef-tx strong { font-size: .92rem; }
.h-benef-tx span { font-size: .8rem; color: var(--tinta-fraca); line-height: 1.4; }

/* ---------------- CTA final ----------------

   A fotografia foi espelhada na 16.7: a mulher de chapeu ficou a DIREITA e
   olhando para o texto, os baloes seguem a esquerda, e a moldura branca da
   referencia saiu. O veu para na metade - contraste onde o texto vive, e
   fotografia limpa do outro lado. */
.h-cta {
  position: relative; isolation: isolate; margin-top: 30px;
  border-radius: 22px; overflow: hidden; min-height: 200px;
  display: flex; align-items: center; padding: 22px 20px;
  background: #241a2e;
}
.h-cta-foto {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 62% 42%; z-index: -2;
}
/* O VEU MORRE ANTES DA PESSOA, e essa e a regra que a 16.6R fixou.
   Um veu que atravessa o quadro inteiro escurece justamente a viajante e os
   baloes - some a fotografia e sobra um retangulo roxo com texto. Ele para em
   68%: contraste cheio onde a copy vive, fotografia limpa do outro lado. E nao
   ha segunda camada chapada por cima: ela reescureceria tudo pela porta dos
   fundos. */
.h-cta-veu {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(96deg, rgba(24,15,34,.95) 0%, rgba(24,15,34,.86) 30%,
                    rgba(24,15,34,.5) 48%, rgba(24,15,34,.14) 60%,
                    rgba(24,15,34,0) 68%);
}
.h-cta-tx { max-width: 16.5rem; color: #fff; }
.h-cta-tx h2 { margin: 0 0 6px; font-size: 1.2rem; line-height: 1.25; letter-spacing: -.02em; }
.h-cta-tx p { margin: 0 0 14px; font-size: .85rem; color: rgba(255,255,255,.88); line-height: 1.4; }
.h-cta-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--acento); color: #fff; border: 0; border-radius: 999px;
  padding: 12px 20px; font: inherit; font-size: .92rem; font-weight: 600; cursor: pointer;
}
.h-cta-btn:active { transform: scale(.97); }

/* ---------------- respiro em telas maiores ---------------- */
@media (min-width: 560px) {
  .h-mini { grid-template-columns: repeat(4, 1fr); }
  .h-benef { grid-template-columns: repeat(3, 1fr); }
  .h-benef-cx { flex-direction: column; align-items: flex-start; }
  .h-benef-arte { width: 100%; height: 96px; }
  .h-passos { grid-template-columns: repeat(4, 1fr); }
  .h-passos::before { left: 14%; right: 14%; }
}

@media (prefers-reduced-motion: reduce) {
  .h-card:active, .h-atalho:active, .h-cta-btn:active, .h-hero-acoes button:active,
  .h-mini-cx:active, .h-destaque:active, .h-video.pronto:active, .h-hero-guia:active {
    transform: none;
  }
  .h-dot i { transition: none; }
}

/* A HOME OCUPA A LARGURA TODA.
   O `.shell-corpo` tem padding lateral e teto de 720px para as telas de lista;
   a Home precisa sangrar ate a borda, e o hero comeca no topo absoluto. */
.shell-corpo.corpo-home { padding: 0; max-width: none; }
.shell-corpo.corpo-home .home { margin: 0; }