/* Doçura da Maia: landing page.
   Cores do logótipo (bordô e rosa velho) sobre creme quente, com um dourado de massa cozida.
   Títulos em Fraunces, texto em Inter, ambas guardadas no próprio site.
   Pensado primeiro para telemóvel; modo escuro em tons de chocolate. */

@font-face { font-family: "Fraunces"; src: url("/fontes/fraunces.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("/fontes/fraunces-italic.woff2") format("woff2"); font-weight: 300 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/fontes/inter.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  --fundo: #FBF5EE;
  --fundo-2: #F4E9DD;
  --papel: #FFFCF8;
  --texto: #3B2427;
  --suave: #7A5E61;
  --linha: rgba(110, 42, 53, 0.14);
  --bordo: #6E2A35;
  --bordo-forte: #55202A;
  --bordo-texto: #7D2F3C;
  --rosa: #D9A7AE;
  --rosa-claro: #F2DCDE;
  --dourado: #C8873A;
  --sombra: 0 18px 50px -24px rgba(85, 32, 42, 0.45);

  --letra-titulo: "Fraunces", Georgia, "Times New Roman", serif;
  --letra: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --curva: cubic-bezier(0.2, 0.7, 0.2, 1);
  --margem: clamp(16px, 5vw, 56px);
  --largura: 1180px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fundo: #1B1214;
    --fundo-2: #23181A;
    --papel: #2A1D1F;
    --texto: #F6ECE6;
    --suave: #CDB6B2;
    --linha: rgba(242, 220, 222, 0.14);
    --bordo-texto: #EBAAB4;
    --rosa-claro: #3A2629;
    --sombra: 0 18px 50px -24px rgba(0, 0, 0, 0.8);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fundo); color: var(--texto); font: 400 17px/1.6 var(--letra); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--letra-titulo); font-weight: 420; line-height: 1.08; letter-spacing: -0.012em; margin: 0; text-wrap: balance; }
h1 em, h2 em { font-style: italic; font-weight: 340; color: var(--bordo-texto); }
p { margin: 0 0 14px; }
:focus-visible { outline: 3px solid var(--dourado); outline-offset: 3px; border-radius: 6px; }

.saltar { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--bordo); color: #fff; padding: 10px 16px; border-radius: 999px; text-decoration: none; }
.saltar:focus { top: 12px; }

.sobretitulo { font-size: 12px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--bordo-texto); margin-bottom: 14px; }

/* Botões */
.botoes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.botao { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 24px; border-radius: 999px; background: var(--bordo); color: #FFF7F2; font-weight: 600; font-size: 16px; text-decoration: none; border: 1.5px solid var(--bordo); transition: transform 0.3s var(--curva), box-shadow 0.3s var(--curva), background 0.3s; }
.botao:hover { transform: translateY(-2px); box-shadow: 0 12px 26px -12px rgba(110, 42, 53, 0.7); background: var(--bordo-forte); }
.botao--linha { background: transparent; color: var(--bordo-texto); border-color: currentColor; }
.botao--linha:hover { background: var(--rosa-claro); }
.botao--pequeno { min-height: 40px; padding: 0 18px; font-size: 14px; }
.ligacao { display: inline-block; margin-top: 8px; font-weight: 600; color: var(--bordo-texto); text-decoration: none; border-bottom: 1.5px solid currentColor; padding-bottom: 2px; }
.ligacao::after { content: " →"; transition: margin 0.3s var(--curva); }
.ligacao:hover::after { margin-left: 6px; }

/* Barra do topo: aparece depois de passar o logótipo grande */
.barra { position: fixed; inset: 0 0 auto; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px var(--margem); padding-top: max(10px, env(safe-area-inset-top)); background: color-mix(in srgb, var(--fundo) 88%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--linha); transform: translateY(-110%); transition: transform 0.45s var(--curva); }
.barra.visivel { transform: none; }
.barra__marca { display: flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--letra-titulo); font-size: 19px; font-style: italic; color: var(--bordo-texto); }
.barra__marca img { width: 44px; height: auto; background: #FBF5EE; border-radius: 10px; padding: 3px; }

/* Topo */
.topo { display: grid; gap: 34px; max-width: var(--largura); margin: 0 auto; padding: calc(28px + env(safe-area-inset-top)) var(--margem) 64px; align-items: center; }
.selo { width: min(260px, 64vw); margin-bottom: 26px; }
.selo img { width: 100%; filter: drop-shadow(0 10px 22px rgba(110, 42, 53, 0.18)); }
@media (prefers-color-scheme: dark) {
  .selo { background: #FBF5EE; padding: 14px 18px; border-radius: 28px; box-shadow: var(--sombra); }
  .selo img { filter: none; }
}
.topo h1 { font-size: clamp(2.6rem, 9.5vw, 5rem); }
.lead { font-size: clamp(1.05rem, 2.4vw, 1.2rem); color: var(--suave); max-width: 34em; margin-top: 20px; }
.topo__foto { margin: 0; position: relative; border-radius: 28px; overflow: hidden; box-shadow: var(--sombra); aspect-ratio: 4 / 3; }
.topo__foto img { width: 100%; height: 100%; object-fit: cover; animation: respirar 18s ease-in-out infinite alternate; }
.topo__foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(85, 32, 42, 0.25)); }
@keyframes respirar { from { transform: scale(1.02); } to { transform: scale(1.1) translate(-1.5%, -1%); } }

/* Vapor por cima de "quentinho" */
.quente { position: relative; display: inline-block; }
.vapor { position: absolute; left: 50%; bottom: 82%; width: 1.4em; height: 0.9em; transform: translateX(-50%); pointer-events: none; }
.vapor i { position: absolute; bottom: 0; width: 0.09em; height: 0.75em; border-radius: 999px; background: linear-gradient(180deg, transparent, var(--rosa) 60%, transparent); opacity: 0; filter: blur(1.5px); animation: subir 3.6s ease-in-out infinite; }
.vapor i:nth-child(1) { left: 22%; }
.vapor i:nth-child(2) { left: 48%; animation-delay: 1.2s; }
.vapor i:nth-child(3) { left: 74%; animation-delay: 2.4s; }
@keyframes subir {
  0% { opacity: 0; transform: translateY(0.35em) scaleY(0.6) skewX(0); }
  30% { opacity: 0.85; }
  100% { opacity: 0; transform: translateY(-0.45em) scaleY(1.1) skewX(-12deg); }
}

/* Aberto ou fechado */
.estado { display: inline-flex; align-items: center; gap: 10px; margin: 22px 0 0; padding: 8px 16px 8px 12px; border-radius: 999px; background: var(--papel); border: 1px solid var(--linha); font-size: 15px; }
.estado__ponto { width: 10px; height: 10px; border-radius: 50%; background: var(--suave); flex: none; }
.estado.aberto .estado__ponto { background: #3E9A61; box-shadow: 0 0 0 0 rgba(62, 154, 97, 0.5); animation: pulsar 2.4s infinite; }
.estado.fechado .estado__ponto { background: #B4545F; }
.estado strong { font-weight: 650; }
@keyframes pulsar { 70% { box-shadow: 0 0 0 9px rgba(62, 154, 97, 0); } 100% { box-shadow: 0 0 0 0 rgba(62, 154, 97, 0); } }

/* Secções */
.secao { max-width: var(--largura); margin: 0 auto; padding: 72px var(--margem); }
.secao__cabeca { max-width: 40em; margin-bottom: 40px; }
.secao__cabeca h2, .cartao h2, .historia h2, .visita h2 { font-size: clamp(2rem, 6vw, 3.2rem); }
.secao__cabeca p:not(.sobretitulo) { color: var(--suave); margin-top: 18px; }

/* O dia do forno */
.forno { position: relative; }
.dia { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; counter-reset: hora; }
.dia__hora { position: relative; background: var(--papel); border: 1px solid var(--linha); border-radius: 22px; padding: 26px 24px 22px; }
.dia__quando { display: block; font-family: var(--letra-titulo); font-style: italic; font-size: 1.9rem; color: var(--dourado); line-height: 1; margin-bottom: 14px; }
.dia__hora h3 { font-size: 1.35rem; margin-bottom: 8px; }
.dia__hora p { color: var(--suave); margin: 0; }

/* Montra */
.galeria { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.galeria figure { margin: 0; border-radius: 18px; overflow: hidden; background: var(--fundo-2); }
.galeria img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--curva); }
.galeria figure:hover img { transform: scale(1.06); }
.galeria__grande { grid-column: 1 / -1; aspect-ratio: 2 / 1; }
.galeria figure:not(.galeria__grande) { aspect-ratio: 4 / 3; }

/* Almoço e encomendas */
.cartoes { display: grid; gap: 14px; }
.cartao { background: var(--papel); border: 1px solid var(--linha); border-radius: 28px; padding: clamp(28px, 5vw, 48px); }
.cartao p:not(.sobretitulo) { color: var(--suave); margin-top: 18px; }
.cartao--bordo { background: var(--bordo); border-color: var(--bordo); color: #FFF4EE; }
.cartao--bordo .sobretitulo, .cartao--bordo h2 em, .cartao--bordo .ligacao { color: var(--rosa); }
.cartao--bordo p:not(.sobretitulo) { color: #F1D9D9; }

/* História */
.historia { display: grid; gap: 10px; align-items: center; }
.historia__ano { font-family: var(--letra-titulo); font-style: italic; font-weight: 300; font-size: clamp(6rem, 26vw, 14rem); line-height: 0.85; color: var(--rosa); opacity: 0.55; letter-spacing: -0.04em; }
.historia__texto p:not(.sobretitulo) { color: var(--suave); }
.historia__texto h2 { margin-bottom: 18px; }
.nota-google { display: inline-flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-top: 12px; padding: 14px 20px; border-radius: 18px; background: var(--papel); border: 1px solid var(--linha); text-decoration: none; transition: transform 0.3s var(--curva); }
.nota-google:hover { transform: translateY(-2px); }
.nota-google__numero { font-family: var(--letra-titulo); font-size: 2rem; color: var(--bordo-texto); line-height: 1; }
.nota-google__estrelas { color: var(--dourado); letter-spacing: 2px; }
.nota-google__texto { color: var(--suave); font-size: 15px; }

/* Visite-nos */
.visita { display: grid; gap: 36px; align-items: start; }
.visita__foto { margin: 0; }
.visita__foto img { border-radius: 26px; box-shadow: var(--sombra); aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }
.visita__foto figcaption { margin-top: 12px; font-size: 15px; color: var(--suave); font-style: italic; font-family: var(--letra-titulo); }
.morada { color: var(--suave); margin-top: 10px; }
.horario { width: 100%; border-collapse: collapse; margin: 22px 0 8px; font-variant-numeric: tabular-nums; }
.horario caption { text-align: left; font-weight: 650; margin-bottom: 8px; }
.horario th, .horario td { padding: 9px 12px; border-bottom: 1px solid var(--linha); text-align: left; font-weight: 400; }
.horario td { text-align: right; }
.horario tr.hoje { background: var(--rosa-claro); }
.horario tr.hoje th { font-weight: 650; }
.horario tr.hoje th::after { content: " · hoje"; color: var(--bordo-texto); font-size: 14px; }
.nota { font-size: 14px; color: var(--suave); }

/* Rodapé */
.rodape { text-align: center; padding: 56px var(--margem) calc(40px + env(safe-area-inset-bottom)); border-top: 1px solid var(--linha); background: var(--fundo-2); font-size: 14px; color: var(--suave); }
.rodape p { max-width: 46em; margin: 0 auto 10px; }
.rodape strong { color: var(--texto); font-weight: 600; }
.rodape a { color: var(--bordo-texto); }
.rodape__logo { width: 120px; margin: 0 auto 22px; background: #FBF5EE; border-radius: 20px; padding: 8px; }
.rodape__autor { margin-top: 18px; font-size: 13px; }

/* Entrada do topo, só com CSS, para não piscar enquanto o JavaScript carrega */
.entrar { animation: entrar 1s var(--curva) both; }
.e1 { animation-delay: 0.05s; } .e2 { animation-delay: 0.15s; } .e3 { animation-delay: 0.25s; }
.e4 { animation-delay: 0.38s; } .e5 { animation-delay: 0.5s; } .e6 { animation-delay: 0.6s; }
@keyframes entrar { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

/* Entradas suaves ao descer a página (só com JavaScript ativo) */
.js .revelar { opacity: 0; transform: translateY(26px); transition: opacity 0.9s var(--curva), transform 0.9s var(--curva); }
.js .revelar.visto { opacity: 1; transform: none; }

/* Computador */
@media (min-width: 760px) {
  .dia { grid-template-columns: repeat(3, 1fr); }
  .cartoes { grid-template-columns: 1fr 1fr; }
  .galeria { grid-template-columns: repeat(4, 1fr); }
  .galeria__grande { grid-column: 1 / -1; aspect-ratio: 21 / 9; }
}
@media (min-width: 960px) {
  .topo { grid-template-columns: 1fr 1.05fr; gap: 56px; min-height: min(100svh, 860px); padding-top: 48px; }
  .topo__foto { aspect-ratio: 4 / 5; }
  .secao { padding: 104px var(--margem); }
  .historia { grid-template-columns: 0.9fr 1.1fr; gap: 40px; }
  .visita { grid-template-columns: 1.1fr 0.9fr; gap: 64px; }
  .galeria { grid-template-columns: repeat(4, 1fr); grid-template-rows: auto auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .revelar, .entrar { opacity: 1; transform: none; }
  .vapor { display: none; }
}