/* Home no design v2.
 *
 * Carrega depois de landing-v2.css e cobre so o que a home tem de diferente
 * das paginas de cidade:
 *
 *   - banner proprio no lugar do hero generico;
 *   - titulo do banner em <h2>, porque o <h1> da home fica no bloco "sobre",
 *     como sempre esteve, e nao faria sentido ter dois;
 *   - grade de oito diferenciais em vez de quatro;
 *   - portfolio com a carteira inteira, nao com seis casos;
 *   - blocos de blog e contato, que a pagina de cidade nao tem.
 *
 * Todas as regras entram antes das media queries. Fora dessa ordem elas
 * ficam mortas: mesma especificidade, e quem vem depois vence.
 */

/* ---- banner ----
   Altura, imagem de fundo e posicionamento vem do landing-v2.css, iguais aos
   das paginas de cidade. Aqui so o titulo: na home ele e <h2>, porque o <h1>
   fica no bloco "sobre". */
.home-v2 .v2-hero-copy h2 { max-width: 21ch; margin: 0 0 14px; color: #fff; font-family: var(--v2-sans); font-size: clamp(34px, 4.2vw, 58px); font-weight: 600; letter-spacing: -.035em; line-height: 1.06; text-transform: none; text-wrap: balance; }
.home-v2 .v2-hero-copy .v2-hero-sub { max-width: 30ch; margin: 0 0 20px; color: var(--v2-rose); font-size: clamp(17px, 1.7vw, 23px); font-weight: 500; line-height: 1.3; }

/* ---- "sobre": e onde vive o H1 da home ---- */
.home-v2 .v2-intro h1 { margin: 0 0 22px; padding: 0; color: var(--v2-graphite); font-family: var(--v2-sans); font-size: clamp(26px, 2.9vw, 38px); font-weight: 600; letter-spacing: -.03em; line-height: 1.18; text-transform: none; }
.home-v2 .v2-intro h1 span { color: var(--v2-wine); }

/* ---- diferenciais: oito itens pedem quatro colunas ---- */
.home-v2 .v2-differential-grid-home { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ---- portfolio: a home mostra a carteira inteira ---- */
.home-v2 .v2-portfolio-grid { grid-template-columns: repeat(auto-fit, 370px); }

/* ---- blog ----
   O cartao de post vem de blog/_post.html, que e compartilhado com o resto
   do site e desenha em cima das classes do layout.css (.sep, .thumb,
   .box_text, .bt_leia). Aqui elas sao redesenhadas no v2 em vez de mexer no
   parcial, que continua servindo as outras paginas. Sem isto o bloco sai
   sem cartao, com o icone de data em tamanho natural e os links em azul. */
.home-v2 .v2-blog .vitrine { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-bottom: 34px; }
.home-v2 .v2-blog .vitrine .sep { display: block; overflow: hidden; border: 1px solid var(--v2-line); border-radius: 18px; background: #fff; color: inherit; text-decoration: none; transition: transform .3s var(--v2-ease), box-shadow .3s var(--v2-ease); }
.home-v2 .v2-blog .vitrine .sep:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(25, 20, 25, .10); }
.home-v2 .v2-blog .thumb { position: relative; margin: 0; }
.home-v2 .v2-blog .thumb img { display: block; width: 100%; height: auto; }
.home-v2 .v2-blog .category { position: absolute; top: 14px; left: 14px; padding: 6px 13px; border-radius: 999px; background: var(--v2-wine); color: #fff; font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.home-v2 .v2-blog .box_text { padding: 22px 24px 26px; }
.home-v2 .v2-blog .data { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; color: var(--v2-muted); font-size: 13px; }
.home-v2 .v2-blog .data .icon { width: 15px; height: 15px; }
.home-v2 .v2-blog h3 { margin: 0 0 10px; color: var(--v2-graphite); font-family: var(--v2-sans); font-size: 18px; font-weight: 600; line-height: 1.32; text-transform: none; }
.home-v2 .v2-blog .box_text p { margin: 0 0 16px; color: var(--v2-muted); font-size: 14.5px; line-height: 1.65; }
.home-v2 .v2-blog .bt_leia { color: var(--v2-wine); font-size: 13.5px; font-weight: 600; }
/* O botao secundario do v2 e desenhado para o hero escuro: borda e texto
   brancos. Aqui o fundo e claro, entao ele vira a versao grafite. */
.home-v2 .v2-blog .v2-button-secondary { display: inline-flex; border-color: var(--v2-line); color: var(--v2-graphite); }
.home-v2 .v2-blog .v2-button-secondary:hover { border-color: var(--v2-graphite); background: var(--v2-graphite); color: #fff; }

/* ---- contato ----
   Bloco centralizado: com o texto so na esquerda a metade direita ficava
   vazia, e a secao nao tem segunda coluna. */
.home-v2 .v2-contato .v2-section-heading { margin: 0 auto; text-align: center; }
.home-v2 .v2-contato-dados { display: flex; flex-direction: column; align-items: center; font-style: normal; text-align: center; }
.home-v2 .v2-contato-dados p { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; color: var(--v2-ink); font-size: 15.5px; line-height: 1.6; text-align: left; }

/* Os SVG destes icones tem fill="#fff" gravado no arquivo, para o rodape
   escuro, e CSS nao alcanca o conteudo de um <img>. Usados como mascara, o
   arquivo vira so o recorte e a cor passa a vir daqui. */
.home-v2 .v2-contato-ico { flex: none; width: 19px; height: 19px; margin-top: 3px; background: var(--v2-wine); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; }
.home-v2 .ico-whats { -webkit-mask-image: url('../images/whatsapp_rod.svg'); mask-image: url('../images/whatsapp_rod.svg'); }
.home-v2 .ico-mail { -webkit-mask-image: url('../images/envelope.svg'); mask-image: url('../images/envelope.svg'); }
.home-v2 .ico-pin { -webkit-mask-image: url('../images/map-pin.svg'); mask-image: url('../images/map-pin.svg'); }
/* Os icones de rede sao SVG brancos, feitos para o rodape escuro. Nesta
   secao o fundo e claro e eles sumiriam sem um disco por tras.
   Quem desenha a caixa e .centralizador, e o modern.css a define com
   !important; mirar so o <a> nao adianta, o quadrado com gradiente dele
   continuava valendo. Mesmo circulo do rodape, para os dois combinarem. */
.home-v2 .v2-contato-dados .redes { display: flex !important; justify-content: center !important; gap: 14px !important; margin: 26px 0 0 !important; padding: 0 !important; }
.home-v2 .v2-contato-dados .redes a { margin: 0 !important; }
.home-v2 .v2-contato-dados .redes a .centralizador { width: 46px !important; height: 46px !important; border-radius: 50% !important; border: 1px solid transparent !important; background: var(--v2-graphite) !important; box-shadow: none !important; transition: background .25s var(--v2-ease); }
.home-v2 .v2-contato-dados .redes a:hover .centralizador { background: var(--v2-wine) !important; border-color: transparent !important; transform: translateY(-2px); }
.home-v2 .v2-contato-dados .redes a .centralizador .icon { max-width: 19px !important; }

@media (max-width: 1199px) {
  .home-v2 .v2-differential-grid-home { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .home-v2 .v2-portfolio-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
}

@media (max-width: 900px) {
  .home-v2 .v2-differential-grid-home { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-v2 .v2-blog .vitrine { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .home-v2 .v2-differential-grid-home { grid-template-columns: 1fr; }
  .home-v2 .v2-blog .vitrine { grid-template-columns: 1fr; }
}