/* ============================================================
   IDENTIDADE — o único arquivo que muda de um negócio para outro.

   PET DA ODETE, banho e tosa, Mooca, São Paulo.
   Escrito em 25/09/2026, a partir de _negocio/direcao.md.
   Sensação declarada: CALMA. Por isso: claro, sem serifa, foto real.

   ⚠️ A COR AINDA É PROVISÓRIA. A Odete não disse a cor dela ainda.
   Quando ela disser (a placa, a fachada, o uniforme, a capa do
   Instagram), troque só os três valores do bloco 1 e o bloco 2.
   O site inteiro muda junto. Nenhum outro arquivo se toca.

   REGRA DE CONTRASTE: ao lado de toda cor que vira TEXTO está o
   contraste medido. Piso 4,5:1 em texto corrido, 3:1 em título
   grande. Tudo aqui foi calculado em 25/09/2026 e passa.
   ============================================================ */

:root{

  /* -------- 1. A COR DELA ------------------------------------
     PROVISÓRIA. Um verde de folha, nem o verde oliva do site
     inglês que ela mostrou, nem o verde que já vinha no modelo.
     Verde porque a direção pede calma, e porque a referência que
     ela escolheu é verde.
     Conferido contra as cores deste material (#1B1712, #F6F1E9,
     #C9441A): não é nenhuma delas nem chega perto.               */

  --marca:        #4A6B45;   /* a cor do negócio, sobre claro — 5,4:1 */
  --marca-forte:  #35502F;   /* a mesma, mais escura, texto sobre claro — 8,0:1 */
  --marca-clara:  #93B88A;   /* a mesma, mais clara, texto sobre escuro — 7,5:1 */
  --marca-fundo:  #3B5637;   /* a mesma, um degrau escuro, para o botão ao passar o mouse */

  /* -------- 2. CLARO OU ESCURO -------------------------------
     A direção diz CALMA, então claro. O escuro aqui é a própria
     --marca escurecida até virar fundo, e serve só para o rodapé
     e para um bloco de respiro no meio da página.                */

  --escuro:       #16211A;   /* a --marca escurecida até virar fundo */
  --escuro-2:     #203024;   /* um degrau acima, para alternar bloco  */
  --claro:        #F5F2EA;   /* o papel: creme quente, nunca branco puro */
  --claro-2:      #EAE6D8;   /* um degrau abaixo, para alternar bloco */

  /* -------- 3. O TEXTO --------------------------------------- */

  --tinta:        #1A2318;   /* texto sobre --claro   — 14,5:1 */
  --tinta-suave:  #4C5A48;   /* apoio sobre --claro   —  6,6:1 */
  --papel:        #F2EFE7;   /* texto sobre --escuro  — 14,4:1 */
  --papel-suave:  #A7B3A3;   /* apoio sobre --escuro  —  7,6:1 */
  --linha:        rgba(26,35,24,.14);   /* filete sobre claro  */
  --linha-clara:  rgba(242,239,231,.16);/* filete sobre escuro */

  /* -------- 4. A FONTE ---------------------------------------
     UMA família só, sem serifa, porque a sensação é calma e não
     tradição nem luxo.

     A referência usa a Campton, que é fonte paga e não se baixa.
     A pilha do sistema abaixo é da mesma família (geométrica sem
     serifa), não pesa nada, não pede internet e o site continua
     abrindo com dois cliques. Se a Odete quiser uma fonte própria
     depois, o arquivo .woff2 entra em site/fontes/ e o @font-face
     é declarado aqui, com caminho relativo.                      */

  --fonte: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
           Helvetica, Arial, sans-serif;

  /* -------- 5. O QUE A PRIMEIRA TELA MOSTRA ------------------
     A Odete ainda não mandou nenhuma foto. Enquanto não vier, fica
     em none e o estilos.css desenha a profundidade sozinho.
     [PERGUNTAR AO DONO: foto do espaço, foto de um cachorro
     tosado por você, e uma foto sua atendendo.]
     Quando as fotos chegarem, é o /fotos que preenche esta linha. */

  --heroi-foto: none;                       /* ou url("img/espaco.webp") */
  --heroi-foco: center 40%;                 /* onde a foto se ancora      */

  /* -------- 6. O QUE VEIO DA REFERÊNCIA ----------------------
     Medido em _estudo/upperhound/tokens.css. Da referência vem o
     RITMO, nunca a cor: raio grande, sombra quase invisível e uma
     curva de transição mansa. É o que faz a página parecer cara.  */

  --raio-foto:  42% 58% 46% 54% / 52% 44% 56% 48%;  /* a forma orgânica da foto */
  --raio-cartao: 28px;
  --raio-capsula: 999px;                     /* botão em cápsula */
  --sombra-leve: 0 8px 14px rgba(26,35,24,.05);
  --curva-ref: cubic-bezier(.23,1,.32,1);
}

/* ============================================================
   O QUE VEIO DO PLANO DA REFERÊNCIA
   _estudo/upperhound/plano.md, tabelas 3 e 4.

   Isto fica aqui embaixo, e não no estilos.css, porque estilos.css
   é o arquivo que não se toca. Como este arquivo é lido ANTES dele,
   cada regra precisa de um `body` na frente pra valer. É feio e é
   de propósito.
   ============================================================ */

/* 1. A PRIMEIRA TELA É CLARA.
   O modelo vem com ela escura. A direção diz calma, e calma é claro,
   e a referência que a Odete escolheu também é clara. A direção ganha. */

body .heroi{ background:var(--claro); color:var(--tinta) }
body .heroi-texto .abertura{ color:var(--tinta-suave) }
body .heroi .logo{ color:var(--tinta) }
body .heroi .menu-abre span{ background:var(--tinta) }
body .heroi .botao-vazado{ border-color:var(--marca); color:var(--marca-forte) }
body .heroi-grade{
  opacity:.5;
  background-image:
    linear-gradient(var(--linha) 1px,transparent 1px),
    linear-gradient(90deg,var(--linha) 1px,transparent 1px);
}

/* 2. A SEGUNDA LINHA DO TÍTULO MUDA DE COR.
   É a assinatura da referência e o que faz o olho ler o negócio em
   um segundo. O <em> aqui não é itálico, é a palavra colorida.      */

body h1 em, body h2 em{ font-style:normal; color:var(--marca-forte) }
body .bloco-escuro h2 em, body .bloco-escuro-2 h2 em{ color:var(--marca-clara) }

/* 3. O SITE É QUIETO E ACORDA NO DEDO.
   Medido em _estudo/upperhound/movimento.json: 0 animação sozinha,
   13 de 13 elementos reagindo ao mouse. Os tempos são os de lá.    */

body .botao{
  transition:background-color .2s var(--curva-ref),
             transform .25s var(--curva-ref);
}
body .botao:hover{ background:var(--marca-fundo) }

/* O vazado enche devagar, em 0.5s, e o cheio responde em 0.2s.
   A diferença é de propósito e está na referência.                 */
body .botao-vazado{
  transition:background-color .5s var(--curva-ref),
             border-color .5s var(--curva-ref),
             color .2s var(--curva-ref);
}
body .heroi .botao-vazado:hover{
  background:var(--marca); border-color:var(--marca); color:#fff;
}

body .menu a{ transition:color .2s var(--curva-ref) }
body .menu a:hover{ color:var(--marca-clara) }
body .logo{ transition:opacity .2s var(--curva-ref) }
body .logo:hover{ opacity:.6 }

/* 4. A FORMA ORGÂNICA DA FOTO.
   O recorte em gota é o que mais chama atenção na referência.
   Fica declarado aqui desde já; entra em uso quando as fotos da
   Odete chegarem pelo /fotos.                                      */

body .foto-organica{
  border-radius:var(--raio-foto);
  overflow:hidden;
  transition:border-radius 1.2s var(--curva-ref);
}
body .foto-organica:hover{
  border-radius:52% 48% 56% 44% / 44% 56% 44% 56%;
}

/* 5. A PRIMEIRA TELA EM DUAS COLUNAS, com a foto em gota.
   É o desenho da referência: texto à esquerda, foto recortada à
   direita. No celular a foto sobe pro alto, que é justamente onde
   sobrava vazio antes dela existir.                                */

body .heroi-corpo{
  margin-top:auto; width:100%; max-width:1180px;
  position:relative; z-index:2;
  display:grid; gap:var(--e4); align-items:center;
}
body .heroi-texto{ margin-top:0 }

body .heroi-figura{
  margin:0; order:-1;
  position:relative;              /* a foto se ancora aqui dentro */
  aspect-ratio:16/11;
  box-shadow:var(--sombra-leve);
}
/* A foto vai de canto a canto da moldura, presa nos quatro lados.
   Com `height:100%` sozinho o navegador deixava ela transbordar e o
   corte saía errado: aparecia o armário e o cachorro ficava de fora. */
body .heroi-figura img[width][height]{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover; display:block;
  /* no corte deitado do celular, a cara do cachorro fica embaixo do
     meio da foto. Sem esta linha a gota mostra o armario e corta o
     bicho ao meio.                                                  */
  object-position:center 58%;
}

@media (min-width:900px){
  body .heroi-corpo{
    grid-template-columns:1.05fr .82fr;
    gap:var(--e5); align-items:center;
    /* no computador o conjunto fica no meio da tela, não colado
       embaixo: senão sobra um vazio enorme em cima da foto.      */
    margin-block:auto;
  }
  body .heroi-figura{
    order:0; aspect-ratio:4/5; max-height:58svh;
    width:100%; justify-self:end;
  }
  body .heroi-figura img[width][height]{ object-position:center 55% }
}

/* 6. O CARTÃO DE SERVIÇOS COM AS ABAS EM PÉ
   Desenho copiado do plano: cartão branco bem arredondado, lista de
   serviços em pé à esquerda, conteúdo à direita com a foto em gota.

   A troca é feita com `input[type=radio]` e o seletor `~`, sem
   JavaScript. O rádio fica escondido mas continua recebendo foco,
   então quem anda de Tab pelo site consegue trocar de aba.          */

body .abas{
  position:relative;
  margin-top:var(--e4);
  background:#fff;
  border-radius:var(--raio-cartao);
  box-shadow:var(--sombra-leve);
  padding:var(--e3);
  display:grid; gap:var(--e3);
}

/* escondido para o olho, vivo para o teclado */
body .abas > input{
  position:absolute; width:1px; height:1px;
  margin:-1px; padding:0; border:0;
  clip-path:inset(50%); overflow:hidden; white-space:nowrap;
}

/* No celular os quatro ficam sempre à vista, em duas colunas.
   Antes era uma fileira que corria pro lado com a barra escondida:
   dois serviços ficavam fora da tela e ninguém sabia que existiam. */
body .abas-lista{
  display:grid; grid-template-columns:1fr 1fr; gap:.5rem;
}

body .abas-lista label{
  flex:0 0 auto;
  padding:.7rem 1.1rem;
  border-radius:var(--raio-capsula);
  border:1px solid var(--linha);
  font-size:.95rem; color:var(--tinta-suave);
  cursor:pointer; white-space:normal;
  text-align:center; line-height:1.3;
  display:flex; align-items:center; justify-content:center;
  min-height:48px;                 /* alvo que o dedo acerta */
  -webkit-tap-highlight-color:transparent;  /* sem o quadrado cinza ao tocar */
  transition:background-color .2s var(--curva-ref),
             color .2s var(--curva-ref),
             border-color .2s var(--curva-ref);
}
body .abas-lista label:hover{ border-color:var(--marca); color:var(--marca-forte) }

body .painel{ display:none }
body .painel-texto h3{ margin-top:0 }
body .painel .preco{
  color:var(--marca-forte); font-weight:500;
  margin:.4rem 0 var(--e2);
}
body .painel .botao{ margin-top:var(--e2) }
body .painel-foto{
  position:relative; margin:0;
  aspect-ratio:5/4;
  box-shadow:var(--sombra-leve);
}
body .painel-foto img[width][height]{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover; display:block;
}

/* quem está marcado acende a etiqueta e abre o painel dele */
body #aba-banho:checked     ~ .abas-lista label[for="aba-banho"],
body #aba-higienica:checked ~ .abas-lista label[for="aba-higienica"],
body #aba-tosa:checked      ~ .abas-lista label[for="aba-tosa"],
body #aba-leva:checked      ~ .abas-lista label[for="aba-leva"]{
  background:var(--marca); border-color:var(--marca); color:#fff;
}
body #aba-banho:checked     ~ .abas-paineis #painel-banho,
body #aba-higienica:checked ~ .abas-paineis #painel-higienica,
body #aba-tosa:checked      ~ .abas-paineis #painel-tosa,
body #aba-leva:checked      ~ .abas-paineis #painel-leva{
  display:grid; gap:var(--e3);
}

/* o contorno de quem chegou pelo teclado */
body .abas > input:focus-visible ~ .abas-lista label{ outline:2px solid var(--marca); outline-offset:3px }

@media (min-width:900px){
  body .abas{
    grid-template-columns:minmax(210px,.32fr) 1fr;
    gap:var(--e4); padding:var(--e4);
    align-items:start;
  }
  body .abas-lista{
    display:flex; flex-direction:column; overflow:visible;
    border-right:1px solid var(--linha);
    padding-right:var(--e3); margin-right:calc(var(--e3) * -1 + var(--e3));
  }
  /* no computador a etiqueta longa quebra em duas linhas em vez de
     estourar a coluna e sumir na borda do cartão.                  */
  body .abas-lista label{ text-align:left; justify-content:flex-start; line-height:1.35 }
  body #aba-banho:checked     ~ .abas-paineis #painel-banho,
  body #aba-higienica:checked ~ .abas-paineis #painel-higienica,
  body #aba-tosa:checked      ~ .abas-paineis #painel-tosa,
  body #aba-leva:checked      ~ .abas-paineis #painel-leva{
    grid-template-columns:1fr .88fr;
    gap:var(--e4); align-items:center;
  }
  /* A foto em pé, e não quadradinha: numa coluna alta de texto o
     quadrado fica pequeno do lado. Em pé ela ocupa a altura toda e
     é o formato que a referência usa nos serviços.                 */
  body .painel-foto{ aspect-ratio:4/5 }
}

/* 7. O BLOCO DE ONDE FICA, com o mapa do lado.
   No celular empilha: primeiro o endereço, depois o mapa.          */

body .onde-grade{
  display:grid; gap:var(--e4); margin-top:var(--e4);
  align-items:start;
}
body .mapa{
  position:relative; aspect-ratio:4/3;
  border-radius:var(--raio-cartao); overflow:hidden;
  box-shadow:var(--sombra-leve);
  background:var(--claro-2);
}
body .mapa iframe{
  position:absolute; inset:0;
  width:100%; height:100%; border:0; display:block;
}
@media (min-width:900px){
  body .onde-grade{ grid-template-columns:1fr 1.05fr; gap:var(--e5) }
  body .mapa{ aspect-ratio:1/1 }
}

/* 8. A FAIXA DE SELOS (nº 5 do plano).
   Faixa branca e arredondada com cinco selos curtos. Ela não é uma
   seção cheia: o respiro dela é pequeno, senão vira um buraco entre
   a primeira tela e os serviços.                                   */

body .faixa-selos{ padding-block:var(--e3) }
body .selos{
  list-style:none; margin:0; padding:var(--e3);
  background:#fff;
  border-radius:var(--raio-cartao);
  box-shadow:var(--sombra-leve);
  display:grid; grid-template-columns:1fr 1fr; gap:var(--e2) var(--e3);
}
body .selos li{
  display:flex; align-items:center; gap:.6rem;
  font-size:.92rem; color:var(--tinta);
  line-height:1.3;
}
body .selos svg{
  flex:0 0 auto; width:18px; height:18px; fill:var(--marca);
}
/* o quinto selo fica sozinho na última linha do celular: ocupa a
   largura toda pra não parecer que falta um.                       */
body .selos li:last-child{ grid-column:1 / -1 }

@media (min-width:900px){
  body .selos{
    display:flex; justify-content:space-between; flex-wrap:wrap;
    padding:var(--e3) var(--e4);
  }
  body .selos li:last-child{ grid-column:auto }
}

/* 9. A CHAMADA FINAL (nº 10 do plano).
   Texto e botão à esquerda, foto em gota à direita. No celular a
   foto vem depois do botão, e menor: o que importa ali é o botão.  */

body .chamada-final .dentro{
  display:grid; gap:var(--e4); align-items:center;
}
body .chamada-foto{
  position:relative; margin:0;
  width:min(100%,300px); justify-self:center;
  aspect-ratio:4/5;
  box-shadow:var(--sombra-leve);
}
body .chamada-foto img[width][height]{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover; display:block;
}
@media (min-width:900px){
  body .chamada-final .dentro{ grid-template-columns:1.15fr .85fr; gap:var(--e5) }
  body .chamada-foto{ width:min(100%,400px); justify-self:end }
}