/* ─────────────────────────────────────────────
   Empório Alecrim — Design System
   Tokens e regras: ver CONTEXTO_MARCA.md §6
   ───────────────────────────────────────────── */
:root{
  /* Cor — Manual de Marca §6.1 (nenhum valor fora desta lista) */
  --c-brunswick:#273B3A;
  --c-deep-green:#324F4D;
  --c-old-rose:#BB6765;
  --c-deep-berry:#A55264;
  --c-alabaster:#F5EEE4;
  --c-white:#FFFFFF;
  --c-gold-base:#D19E52;
  --c-gold-light:#F8E9B6;

  /* Semânticos */
  --bg:var(--c-alabaster);
  --surface:var(--c-white);
  --text:var(--c-brunswick);
  --primary:var(--c-deep-green);
  --on-primary:var(--c-alabaster);
  --accent:var(--c-old-rose);
  --border:rgba(39,59,58,.30);
  --chevron:rgba(39,59,58,.56);

  /* Tipografia — §6.2 */
  --font-display:"Romans Example","Cormorant Garamond",Georgia,"Times New Roman",serif;
  --font-ui:"Hanken Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --font-descriptor:"Mulish","Hanken Grotesk",-apple-system,sans-serif;

  /* Ritmo 4/8 */
  --s-1:.25rem; --s-2:.5rem;  --s-3:.75rem; --s-4:1rem;
  --s-6:1.5rem; --s-8:2rem;   --s-10:2.5rem; --s-12:3rem; --s-16:4rem;

  --radius:4px;
  --radius-lg:8px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --dur:220ms;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}

body{
  font-family:var(--font-ui);
  font-size:16px;
  line-height:1.5;              /* §6.2 */
  color:var(--text);
  background-color:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  min-height:100vh;             /* fallback */
  min-height:100dvh;
  padding:
    calc(var(--s-10) + env(safe-area-inset-top))
    calc(var(--s-4)  + env(safe-area-inset-right))
    calc(var(--s-12) + env(safe-area-inset-bottom))
    calc(var(--s-4)  + env(safe-area-inset-left));
}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.page{
  width:100%;
  max-width:30rem;              /* 480px — medida de leitura confortável */
  margin-inline:auto;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.page > *{ width:100%; min-width:0 }   /* impede que o conteúdo estoure a coluna */

/* ── Abertura ────────────────────────────── */
.brand{ text-align:center }

.brand__logo{
  display:block;
  width:min(15rem,72vw);
  height:auto;
  margin:0 auto;
}

.brand__tagline{                /* Display §6.2 */
  font-family:var(--font-display);
  font-size:clamp(1.75rem,7vw,2.25rem);
  font-style:italic;
  font-weight:400;
  line-height:1.2;
  color:var(--c-deep-green);
  margin-top:var(--s-8);
  text-wrap:balance;
}

.brand__intro{
  font-size:1rem;
  line-height:1.5;
  color:var(--text);
  max-width:26rem;
  margin:var(--s-4) auto 0;
  text-wrap:balance;
}

/* ── Divisor com o ramo de alecrim ───────── */
.rule{
  display:flex; align-items:center; gap:var(--s-3);
  width:100%; margin:var(--s-10) 0 var(--s-8);
  color:var(--c-deep-green);    /* o ouro é reservado a foil/selos §6.1 */
}
.rule::before,.rule::after{
  content:""; flex:1; height:1px;
  background:linear-gradient(90deg,transparent,var(--border),transparent);
}
.rule svg{ display:block; width:1.5rem; height:1.5rem; flex:none }

/* ── Lista de links ──────────────────────── */
.links{
  list-style:none; width:100%;
  display:flex; flex-direction:column; gap:var(--s-4);
}

.link{
  display:flex; align-items:center; gap:var(--s-4);
  min-height:4rem;              /* alvo de toque bem acima de 44px */
  padding:var(--s-4);
  border-radius:var(--radius);  /* §6.3 */
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--text);
  text-decoration:none;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  box-shadow:0 1px 3px rgba(39,59,58,.09);
  transition:border-color var(--dur) var(--ease),
             background-color var(--dur) var(--ease),
             color var(--dur) var(--ease),
             box-shadow var(--dur) var(--ease),
             transform var(--dur) var(--ease);
}
.link__icon{ flex:none; display:grid; place-items:center; width:1.5rem; height:1.5rem; color:var(--c-deep-green); transition:color var(--dur) var(--ease) }
.link__icon svg{ width:100%; height:100% }
.link__text{ flex:1; min-width:0 }
.link__title{ display:block; font-weight:600; font-size:1rem; line-height:1.35 }
.link__note{ display:block; font-size:.9375rem; line-height:1.4; margin-top:2px; opacity:.72; transition:opacity var(--dur) var(--ease) }
.link__chevron{ flex:none; width:1rem; height:1rem; color:var(--chevron); transition:transform var(--dur) var(--ease),color var(--dur) var(--ease) }

/* Ação primária — Botão Primário §6.3 */
.link--primary{
  background:var(--primary);
  border-color:var(--primary);
  color:var(--on-primary);
}
.link--primary .link__icon,
.link--primary .link__chevron{ color:var(--on-primary) }
.link--primary .link__note{ opacity:.82 }

@media (hover:hover){
  .link:hover{ border-color:var(--accent); box-shadow:0 6px 20px rgba(39,59,58,.08) }
  .link:hover .link__icon{ color:var(--accent) }
  .link:hover .link__chevron{ color:var(--accent); transform:translateX(3px) }
  .link--primary:hover{ background:var(--c-brunswick); border-color:var(--accent) }
  .link--primary:hover .link__icon{ color:var(--on-primary) }
  .link--primary:hover .link__chevron{ color:var(--accent); transform:translateX(3px) }
}

/* Toque: único feedback no mobile — precisa ser perceptível */
.link:active{ background:rgba(187,103,101,.12); transform:scale(.985) }
.link--primary:active{ background:var(--c-brunswick); transform:scale(.985) }

:where(a,button):focus-visible{
  outline:2px solid var(--c-deep-berry);
  outline-offset:3px;
  border-radius:var(--radius);
}

/* ── Onde nos encontrar ──────────────────── */
.visit{ width:100%; margin-top:var(--s-10); text-align:center }

.visit__label{
  font-family:var(--font-descriptor);
  font-size:.75rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--text); opacity:.78;
}

.visit__address{
  font-family:var(--font-display);
  font-size:1.375rem; line-height:1.35;
  color:var(--c-deep-green);
  margin-top:var(--s-2);
  text-wrap:balance;
}

.map{ width:100%; margin-top:var(--s-6) }
.map.is-loaded{
  aspect-ratio:4/3;
  border-radius:var(--radius-lg);
  overflow:hidden;
  border:1px solid var(--border);
  background:rgba(39,59,58,.04);
}
.map iframe{ display:block; width:100%; height:100%; border:0 }

.map__load{
  display:inline-flex; align-items:center; gap:var(--s-2);
  min-height:44px; padding:var(--s-2) var(--s-4);
  font-family:var(--font-ui); font-size:.9375rem; font-weight:500;
  color:var(--c-deep-green);
  background:transparent;
  border:1px solid var(--border);        /* Botão Secundário §6.3 */
  border-radius:var(--radius);
  cursor:pointer; touch-action:manipulation;
  transition:border-color var(--dur) var(--ease),background-color var(--dur) var(--ease);
}
.map__load svg{ width:1.125rem; height:1.125rem }
.map__load:hover{ border-color:var(--accent); background:rgba(187,103,101,.06) }

/* ── Fechamento ──────────────────────────── */
.footer{ margin-top:var(--s-12); text-align:center }
.footer__phrase{
  font-family:var(--font-display); font-style:italic;
  font-size:1.125rem; color:var(--c-deep-green);
}
.footer__invite{ font-size:.9375rem; margin-top:var(--s-2); opacity:.72 }

/* ── Entrada suave e escalonada ──────────── */
@keyframes reveal{ from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none} }
@media (prefers-reduced-motion:no-preference){
  /* `both` garante que o elemento nunca fique preso em opacity:0 */
  .reveal{ animation:reveal .55s var(--ease) both }
  .reveal:nth-child(1){animation-delay:.02s}
  .reveal:nth-child(2){animation-delay:.08s}
  .reveal:nth-child(3){animation-delay:.14s}
  .reveal:nth-child(4){animation-delay:.20s}
  .reveal:nth-child(5){animation-delay:.26s}
}

/* ── Paisagem em telas baixas ────────────── */
@media (orientation:landscape) and (max-height:500px){
  body{ padding-top:var(--s-6); padding-bottom:var(--s-8) }
  .brand__logo{ width:min(11rem,40vw) }
  .brand__tagline{ font-size:1.375rem; margin-top:var(--s-4) }
  .rule{ margin:var(--s-6) 0 var(--s-4) }
}

/* ── Telas maiores: respiro, não expansão ── */
@media (min-width:768px){
  body{ padding-top:var(--s-16); padding-bottom:var(--s-16) }
  .page{ max-width:34rem }
  .brand__logo{ width:17rem }
  .brand__tagline{ font-size:3rem }   /* Display 48px §6.2 */
}