/* Casa do Tempo — ajustes deste modelo.

   Tudo aqui é prefixado com .theme-gastronomia de propósito: new-models.css
   é compartilhado com educação e manutenção, e nenhuma linha deste arquivo
   pode alcançar esses dois. */

.theme-gastronomia{
  --linha:#e0cfb6;      /* filete quente, no lugar do cinza #d7d8d4 */
  --carta:#fffdf7;      /* superfície de cartão sobre o papel creme */
}

/* ── cabeçalho do negócio ──────────────────────────────────────────────
   Um filete separa a navegação do herói. Sem ele o logotipo ficava
   solto no creme, sem começo nem fim. */
.theme-gastronomia .business-nav{
  border-bottom:1px solid var(--linha);
  padding-block:22px;
}
.theme-gastronomia .business-logo{ letter-spacing:.06em; }
.theme-gastronomia .business-logo small{
  margin-top:6px; color:var(--demo-muted); letter-spacing:.06em;
  text-transform:uppercase; font-family:var(--tofy-font);
}
.theme-gastronomia .business-nav nav a{
  padding:10px 0; border-bottom:1px solid transparent;
}
.theme-gastronomia .business-nav nav a:hover{ border-bottom-color:var(--demo-accent); }
.theme-gastronomia .business-jump{
  display:inline-flex; align-items:center; gap:7px;
  border-bottom-color:var(--demo-accent);
}
.theme-gastronomia .business-jump svg{ width:14px; height:14px; flex:none; }

/* ── herói ─────────────────────────────────────────────────────────────
   A legenda ficava 12px FORA da foto e do container, encostada na borda
   direita da tela, e repetia palavra por palavra o subtítulo do logotipo
   logo acima. Agora é uma placa dentro do arco, e diz outra coisa. */
.theme-gastronomia .hero{ padding:44px 0 84px; }
.theme-gastronomia .hero-photo{ height:560px; }
.theme-gastronomia .hero-photo img{
  border-radius:260px 260px 6px 6px;
  box-shadow:0 18px 44px rgba(71,35,30,.13);
}
.theme-gastronomia .hero-photo figcaption{
  position:absolute; left:24px; right:auto; bottom:24px;
  padding:11px 16px; border-radius:4px;
  background:rgba(52,25,20,.82);
  backdrop-filter:saturate(1.2) blur(2px);
  font:500 12px/1.4 var(--tofy-mono); letter-spacing:.06em;
  text-transform:uppercase;
}
.theme-gastronomia .demo-lead{ font-size:19px; }
.theme-gastronomia .hero-actions{ gap:14px; }
.theme-gastronomia .demo-outline{ border-color:var(--linha); background:var(--carta); }
.theme-gastronomia .demo-outline:hover{ border-color:var(--demo-ink); }

/* ── faixa ─────────────────────────────────────────────────────────────
   Era um bloco escuro com dois textos jogados nas pontas. Vira uma linha
   editorial, com o mesmo peso tipográfico dos rótulos da página. */
.theme-gastronomia .demo-ribbon{ padding:18px 0; }
.theme-gastronomia .demo-ribbon .container{
  font:500 12px/1.5 var(--tofy-mono); letter-spacing:.1em; text-transform:uppercase;
}
.theme-gastronomia .demo-ribbon span:first-child{ font-weight:500; }
.theme-gastronomia .demo-ribbon span:last-child{ color:#e3c9b4; }

/* ── cardápio ──────────────────────────────────────────────────────────
   Os quatro itens eram texto puro numa grade com gap:0 nas linhas: os
   cartões se encostavam, separados só por um fio. Cada item ganha a foto
   do prato e a linha volta a respirar. */
.theme-gastronomia .demo-section-head{ align-items:end; }
.theme-gastronomia .demo-services{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:48px 44px;
}
.theme-gastronomia .demo-service{
  padding:0; background:transparent; border:0;
}
.theme-gastronomia .service-photo{
  display:block; margin-bottom:22px; border-radius:6px;
  overflow:hidden; background:var(--demo-tint);
}
.theme-gastronomia .service-photo img{
  display:block; width:100%; height:270px; object-fit:cover;
  transition:transform .5s ease;
}
.theme-gastronomia .demo-service:hover .service-photo img{ transform:scale(1.035); }
.theme-gastronomia .service-category{ margin-bottom:8px; }
.theme-gastronomia .demo-service h3{ font-size:30px; margin:0 0 12px; }
.theme-gastronomia .demo-service p{ font-size:16px; margin-bottom:14px; }
.theme-gastronomia .demo-service a{
  display:inline-flex; align-items:center; gap:8px;
  color:var(--demo-accent);
  /* O sublinhado vem de text-decoration, e nao de border-bottom, porque
     acompanha o texto: assim o link pode ter os 44px de altura que o dedo
     precisa sem o filete descolar e ficar boiando embaixo. */
  text-decoration:underline; text-underline-offset:5px; text-decoration-thickness:1px;
  margin-top:auto; align-self:flex-start; min-height:44px; padding-top:8px;
}
.theme-gastronomia .demo-service a:hover{ text-decoration-thickness:2px; }
.theme-gastronomia .demo-service a svg{ width:15px; height:15px; }

.theme-gastronomia .menu-filters{ gap:10px; margin-bottom:34px; }
.theme-gastronomia .menu-filters button{
  border-color:var(--linha); font:500 13px var(--tofy-font); letter-spacing:.02em;
}
.theme-gastronomia .menu-filters button:hover{ border-color:var(--demo-ink); }

/* ── nossa proposta ────────────────────────────────────────────────────
   O quadro tinha uma borda vazia, o nome da casa repetido pela terceira
   vez na página e um "&" de 100px que não queria dizer nada. No lugar,
   a foto do salão — e o mesmo arco do herói, invertido. */
.theme-gastronomia .demo-story{ padding:84px 0; }
.theme-gastronomia .story-grid{ grid-template-columns:.9fr 1.1fr; gap:72px; }
.theme-gastronomia .story-label{
  border:0; padding:0; min-height:0; display:block;
  border-radius:6px 6px 180px 180px; overflow:hidden;
  background:var(--demo-tint);
  box-shadow:0 16px 40px rgba(71,35,30,.12);
}
.theme-gastronomia .story-label img{
  display:block; width:100%; height:460px; object-fit:cover;
}
.theme-gastronomia .story-note{ border-top-color:var(--linha); color:var(--demo-muted); }

/* ── etapas ────────────────────────────────────────────────────────────*/
.theme-gastronomia .demo-steps li{ border-top-width:1px; border-top-color:var(--demo-ink); }
.theme-gastronomia .demo-steps li > span{
  display:block; font-size:13px; letter-spacing:.14em; margin-bottom:10px;
}
.theme-gastronomia .demo-steps h3{ font-size:22px; margin:0 0 10px; }

/* ── dúvidas ───────────────────────────────────────────────────────────*/
.theme-gastronomia .demo-faq{ background:var(--carta); border-top-color:var(--linha); }
.theme-gastronomia .demo-faq details{ border-bottom-color:var(--linha); }
.theme-gastronomia .demo-faq summary{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  font-size:17px; list-style:none;
}
.theme-gastronomia .demo-faq summary::-webkit-details-marker{ display:none; }
.theme-gastronomia .demo-faq summary::after{
  content:""; flex:none; width:10px; height:10px; margin-right:4px;
  border-right:1.5px solid var(--demo-accent); border-bottom:1.5px solid var(--demo-accent);
  transform:rotate(45deg) translate(-2px,-2px); transition:transform .2s;
}
.theme-gastronomia .demo-faq details[open] summary::after{
  transform:rotate(-135deg) translate(-2px,-2px);
}

/* ── fecho e rodapé ────────────────────────────────────────────────────*/
.theme-gastronomia .demo-closing{ padding:92px 0; }
.theme-gastronomia .demo-closing .demo-eyebrow{ margin-bottom:18px; }
.theme-gastronomia .demo-closing .btn{
  background:var(--demo-ink); color:var(--demo-paper); padding:16px 30px;
}
.theme-gastronomia .demo-closing .btn:hover{ background:var(--demo-accent); }
.theme-gastronomia .demo-footer a{ border-bottom:1px solid rgba(255,255,255,.4); }

@media(prefers-reduced-motion:reduce){
  .theme-gastronomia .service-photo img{ transition:none; }
  .theme-gastronomia .demo-service:hover .service-photo img{ transform:none; }
}

/* ── telas menores ─────────────────────────────────────────────────────*/
@media(max-width:1000px){
  .theme-gastronomia .hero-photo{ height:480px; }
  .theme-gastronomia .story-grid{ grid-template-columns:1fr; gap:36px; }
  .theme-gastronomia .story-label img{ height:340px; }
  .theme-gastronomia .demo-services{ gap:40px 32px; }
  .theme-gastronomia .service-photo img{ height:230px; }
}

@media(max-width:760px){
  .theme-gastronomia .hero{ padding:24px 0 44px; }
  .theme-gastronomia .hero-photo{ height:400px; }
  .theme-gastronomia .hero-photo img{ border-radius:170px 170px 6px 6px; }
  .theme-gastronomia .hero-photo figcaption{ left:16px; right:auto; bottom:16px; font-size:11px; }
  .theme-gastronomia .hero-actions .btn{ width:100%; }
  /* new-models.css esconde este atalho no celular; a regra acima, mais
     especifica, o trazia de volta e ele quebrava em duas linhas. */
  .theme-gastronomia .business-jump{ display:none; }
  /* Uma coluna. A regra base deste arquivo carrega depois do new-models.css
     e, com a mesma especificidade, vencia por ordem de fonte — o cardapio
     ficava em duas colunas de 152px no celular. */
  .theme-gastronomia .demo-services{ grid-template-columns:minmax(0,1fr); gap:38px; }
  .theme-gastronomia .service-photo img{ height:210px; }
  .theme-gastronomia .demo-service h3{ font-size:26px; }
  .theme-gastronomia .story-label{ border-radius:6px 6px 120px 120px; }
  .theme-gastronomia .demo-story{ padding:52px 0; }
  .theme-gastronomia .demo-closing{ padding:56px 0; }
  /* O dedo precisa de 44px. A margem negativa devolve o espaço que o
     padding tomou, então o texto continua onde estava. */
  .theme-gastronomia .demo-footer a,
  .theme-gastronomia .business-nav nav a{
    display:inline-flex; align-items:center; min-height:44px;
    padding-block:11px; margin-block:-11px;
  }
}