/* A HOME — a página do Rodrigo.

   Ela deixou de ser "a página de agendar com uma marca por cima" e passou a
   ser a página DELE: prova antes de pedir. A ordem é essa, e cada seção tem
   um trabalho:

     abertura  a ambiência e o nome, em imagem plena
     régua     a prova que atravessa em três segundos
     método    o que ninguém na categoria mostra: o corte em quatro tempos
     trabalho  as fotos reais, vindas do banco
     portas    as três coisas que ele faz
     onde      o espaço, o endereço, o mapa
     quem      o retrato e a primeira pessoa
     imprensa  onde ele já esteve

   TODO SLOT DE FOTO TEM FALLBACK: sem imagem, a peça vira tipografia ou
   desenho técnico sobre a pedra e continua digna. Foto que chegar entra sem
   refazer layout. */

/* — 1. a abertura — compor, nao recortar —
   O retrato que existe hoje e quadrado e de estudio: esticado para fundo de
   tela cheia, vira rosto ocupando o quadro inteiro. Entao a abertura e um
   CAMPO DE PEDRA com o nome, e a foto entra composta ao lado, sangrando na
   borda direita e cortada no angulo da casa.
   Quando houver a foto HORIZONTAL dele trabalhando, .h-abertura.plena volta a
   ser tela cheia: e so acrescentar a classe. */
.h-abertura {
  position: relative; background: var(--brand-950); color: var(--on-escuro);
  display: grid; grid-template-columns: 1.12fr .88fr; align-items: stretch;
  min-height: min(78svh, 660px); overflow: hidden;
}
.h-abertura-texto {
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--s7) var(--s5) var(--s7) max(var(--s4), calc((100vw - var(--larg)) / 2 + var(--s4)));
}
.h-abertura-eixo {
  font-family: var(--display); font-variation-settings: var(--wdth-media);
  font-weight: 600; font-size: .7rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--on-escuro-2); margin-bottom: var(--s3);
}
.h-abertura h1 {
  font-family: var(--display); font-variation-settings: var(--wdth-larga);
  font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
  font-size: clamp(1.5rem, 3.6vw, 2.9rem); line-height: 1;
}
.h-abertura .h-frase {
  font-size: clamp(1.05rem, 1.9vw, 1.4rem); max-width: 26ch;
  margin: var(--s3) 0 var(--s5);
}
.h-abertura .h-frase em { font-style: normal; border-bottom: 2px solid var(--on-escuro-2); }
.h-abertura .h-acoes { display: flex; gap: var(--s2); flex-wrap: wrap; }
/* na coluna da abertura os dois botoes precisam caber lado a lado */
.h-abertura .btn.grande, .h-programa-texto .btn.grande { padding: .95rem 1.5rem; font-size: .78rem; }
.h-abertura .btn { background: var(--on-escuro); color: var(--brand-900); }
.h-abertura .btn:hover { background: var(--white); }
.h-abertura .btn.secundario { background: transparent; color: var(--on-escuro); border: 1px solid var(--on-escuro-2); }
.h-abertura .btn.secundario:hover { background: var(--on-escuro); color: var(--brand-900); }

.h-abertura-figura { position: relative; margin: 0; min-height: 300px; }
.h-abertura-figura img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 18%;
  clip-path: polygon(64px 0, 100% 0, 100% 100%, 0 100%, 0 64px);
}
/* a pedra encosta na foto pela esquerda: emenda, nao colagem */
.h-abertura-figura::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to right,
    var(--pedra-950) 0%, color-mix(in srgb, var(--pedra-950) 55%, transparent) 22%, transparent 58%);
  pointer-events: none;
}

@media (max-width: 860px) {
  .h-abertura { grid-template-columns: 1fr; min-height: 0; }
  .h-abertura-figura { order: -1; aspect-ratio: 3 / 2; min-height: 0; }
  .h-abertura-figura img { clip-path: none; object-position: 50% 14%; }
  .h-abertura-figura::after {
    background: linear-gradient(to bottom, transparent 45%, var(--pedra-950) 100%);
  }
  .h-abertura-texto { padding: var(--s4) var(--s4) var(--s5); }
  /* Os dois botoes lado a lado, dividindo a largura: empilhados eles comiam
     115px de uma dobra que ja estava apertada. */
  .h-abertura .h-acoes { flex-wrap: nowrap; }
  .h-abertura .h-acoes .btn.grande {
    flex: 1 1 0; min-width: 0; text-align: center;
    padding: .85rem .6rem; font-size: .68rem; letter-spacing: .08em;
  }
  .h-abertura .h-frase { margin-bottom: var(--s4); }
}

/* quando existir foto horizontal: a abertura volta a ser plena */
.h-abertura.plena { display: block; }
.h-abertura.plena .h-abertura-figura { position: absolute; inset: 0; }
.h-abertura.plena .h-abertura-figura img { clip-path: none; }
.h-abertura.plena .h-abertura-figura::after {
  background: linear-gradient(to top, var(--pedra-950) 0%,
    color-mix(in srgb, var(--pedra-950) 70%, transparent) 45%, transparent 100%);
}
.h-abertura.plena .h-abertura-texto {
  position: relative; z-index: 1; max-width: var(--larg); margin: 0 auto;
  padding: var(--s7) var(--s4) var(--s5); justify-content: flex-end;
}

/* — 2. a régua de prova — */
.h-regua { background: var(--brand-900); color: var(--on-escuro-2); }
.h-regua ul {
  list-style: none; max-width: var(--larg); margin: 0 auto;
  padding: var(--s3) var(--s4);
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5);
  font-family: var(--display); font-variation-settings: var(--wdth-media);
  font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
}
.h-regua li { display: flex; align-items: baseline; gap: .5em; }
.h-regua b { color: var(--on-escuro); font-variant-numeric: tabular-nums; }

/* A barra fina fica por cima: sem isso o ancora (#metodo) para com o titulo
   escondido atras dela. */
.h-secao[id], .h-abertura { scroll-margin-top: 68px; }

/* — a seção padrão — */
.h-secao { max-width: var(--larg); margin: 0 auto; padding: var(--s7) var(--s4); }
.h-secao.escura { background: var(--brand-700); color: var(--on-escuro); max-width: none; }
.h-secao.escura .h-secao-dentro { max-width: var(--larg); margin: 0 auto; }
.h-eixo {
  font-family: var(--display); font-variation-settings: var(--wdth-media);
  font-weight: 600; font-size: .72rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--accent-600); display: block; margin-bottom: var(--s2);
}
.h-secao.escura .h-eixo { color: var(--on-escuro-2); }
.h-secao h2 {
  font-family: var(--display); font-variation-settings: var(--wdth-larga);
  font-weight: 600; font-size: clamp(1.5rem, 3.6vw, 2.3rem);
  line-height: 1.05; letter-spacing: -.015em; max-width: 20ch;
}
.h-secao .h-sub { color: var(--ink-2); max-width: 58ch; margin-top: var(--s3); }
.h-secao.escura .h-sub { color: var(--on-escuro-2); }

/* — 3. o Programa: a live e a inscricao — */
.h-programa { display: grid; grid-template-columns: 1fr 1.1fr; gap: var(--s6); align-items: center; }
@media (max-width: 900px) { .h-programa { grid-template-columns: 1fr; gap: var(--s5); } }
.h-programa-texto .h-acoes { display: flex; gap: var(--s2); flex-wrap: wrap; margin-top: var(--s4); }
.h-programa-texto .btn { background: var(--on-escuro); color: var(--brand-900); }
.h-programa-texto .btn:hover { background: var(--white); }
.h-programa-texto .btn.secundario { background: transparent; color: var(--on-escuro); border: 1px solid var(--on-escuro-2); }
.h-programa-texto .btn.secundario:hover { background: var(--on-escuro); color: var(--brand-900); }
.h-programa-texto .h-sub b { color: var(--on-escuro); }

/* a capa do video: o player do YouTube so carrega quando alguem pede */
.h-video-capa {
  position: relative; display: block; width: 100%; padding: 0;
  text-decoration: none; color: inherit;
  border: 1px solid var(--pedra-600); background: var(--pedra-950);
  aspect-ratio: 16 / 9; cursor: pointer; overflow: hidden;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 40px), calc(100% - 40px) 100%, 0 100%);
}
.h-video-capa img { width: 100%; height: 100%; object-fit: cover; opacity: .82; transition: opacity var(--rapido) var(--curva); }
.h-video-capa:hover img { opacity: 1; }
.h-video-play {
  position: absolute; inset: 0; margin: auto;
  width: 74px; height: 74px; display: grid; place-items: center;
  background: var(--on-escuro); color: var(--brand-900);
  font-size: 1.6rem; line-height: 1; padding-left: 5px;
}
.h-video-rot {
  position: absolute; left: 0; bottom: 0; padding: .5rem .8rem;
  background: var(--pedra-950); color: var(--on-escuro-2);
  font-family: var(--display); font-variation-settings: var(--wdth-media);
  font-size: .68rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
}
.h-programa-video iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; display: block; background: var(--pedra-950); }

/* — 4. o trabalho — */
.h-trabalho-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s3); margin-top: var(--s5); }
.h-trabalho-foto { aspect-ratio: 3 / 4; background: var(--paper-2); overflow: hidden; min-height: 0; }
.h-trabalho-foto img { width: 100%; height: 100%; object-fit: cover; }

/* — 5. as três portas — */
.h-portas { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); margin-top: var(--s5); }
@media (max-width: 860px) { .h-portas { grid-template-columns: 1fr; } }
.h-porta {
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
  border: 1px solid var(--line); background: var(--card);
  transition: border-color var(--rapido) var(--curva), transform var(--rapido) var(--curva);
}
.h-porta:hover { border-color: var(--accent-600); transform: translateY(-2px); }
.h-porta-figura { aspect-ratio: 16 / 10; background: var(--brand-700); display: grid; place-items: center; overflow: hidden; min-height: 0; }
.h-porta-figura img { width: 100%; height: 100%; object-fit: cover; }
.h-porta-figura .monograma { width: 3rem; height: 3rem; color: var(--on-escuro-2); opacity: .5; }
.h-porta-corpo { padding: var(--s4); display: flex; flex-direction: column; gap: 6px; flex: 1; }
.h-porta h3 {
  font-family: var(--display); font-variation-settings: var(--wdth-media);
  font-weight: 600; font-size: .95rem; letter-spacing: .12em; text-transform: uppercase;
}
.h-porta p { font-size: .92rem; color: var(--ink-2); }
.h-porta .h-ir {
  margin-top: auto; padding-top: var(--s3);
  font-family: var(--display); font-size: .72rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--accent-600);
}

/* — 6. onde eu atendo — */
.h-onde-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--s3); margin-top: var(--s5); }
.h-unidade { border: 1px solid var(--line); background: var(--card); display: flex; flex-direction: column; }
.h-unidade-figura { aspect-ratio: 3 / 2; background: var(--paper-2); overflow: hidden; min-height: 0; }
.h-unidade-figura img { width: 100%; height: 100%; object-fit: cover; }
.h-unidade-corpo { padding: var(--s4); display: flex; flex-direction: column; gap: 6px; flex: 1; }
.h-unidade h3 { font-family: var(--display); font-variation-settings: var(--wdth-media); font-weight: 600; font-size: 1rem; }
.h-unidade .end { color: var(--ink-2); font-size: .92rem; }
.h-unidade .maps {
  margin-top: auto; padding-top: var(--s3); text-decoration: none;
  font-family: var(--display); font-size: .72rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--accent-600);
}

/* — 7. quem sou eu — */
.h-quem { display: grid; grid-template-columns: .85fr 1.15fr; gap: var(--s6); align-items: center; }
@media (max-width: 860px) { .h-quem { grid-template-columns: 1fr; gap: var(--s5); } }
.h-quem-retrato { position: relative; }
.h-quem-retrato img {
  width: 100%; height: auto;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 48px), calc(100% - 48px) 100%, 0 100%);
}
.h-quem-retrato::before {
  content: ""; position: absolute; inset: 0; transform: translate(14px, 14px);
  background: var(--brand-700); z-index: -1;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 48px), calc(100% - 48px) 100%, 0 100%);
}
.h-quem-texto p { max-width: 54ch; margin-bottom: var(--s3); }
.h-credenciais { display: flex; flex-wrap: wrap; gap: var(--s1); margin-top: var(--s3); }
.h-credenciais span {
  font-size: .76rem; padding: .34rem .7rem;
  border: 1px solid var(--line); color: var(--ink-2);
}

/* — 8. imprensa — */
.h-imprensa ul {
  list-style: none; display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5);
  padding-top: var(--s4);
  font-family: var(--display); font-variation-settings: var(--wdth-media);
  font-size: .76rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-2);
}

/* — rodapé — */
.h-pe { border-top: 1px solid var(--line); background: var(--band); }
.h-pe-dentro {
  max-width: var(--larg); margin: 0 auto; padding: var(--s5) var(--s4);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap;
  color: var(--ink-2); font-size: .88rem;
}
.h-pe .monograma { width: 1.7rem; height: 1.7rem; opacity: .75; }
.h-pe-marca { display: flex; align-items: center; gap: var(--s2); }

/* — a barra de agendar no celular — */
.h-fixo {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  padding: var(--s2) var(--s4) calc(var(--s2) + env(safe-area-inset-bottom, 0px));
  background: var(--paper); border-top: 1px solid var(--line);
  display: none;
}
.h-fixo { display: none; gap: var(--s2); }
.h-fixo .btn { flex: 1 1 0; min-width: 0; text-align: center; padding: .9rem .6rem; font-size: .72rem; }
.h-fixo .btn.secundario { background: transparent; color: var(--ink); border: 1px solid var(--ink); }

@media (max-width: 720px) {
  .h-fixo { display: flex; }
  body { padding-bottom: 84px; }
  /* O heroi e o topo ficam sem botao: as duas acoes moram na barra fixa, que
     esta sempre na tela. Antes "Ver produtos" saia duas vezes seguidas. */
  .h-abertura .h-acoes { display: none; }
  .h-topo .btn { display: none; }
  .h-abertura .h-frase { margin-bottom: var(--s2); }
}