/* Aromas do Vale · Links — direção de arte aprovada (marfim editorial + molduras botânicas)
   Tokens de marca (oficiais): --purple #512B5C, --green #57B35E.
   Demais tons são derivados (recomendação) para fidelidade à arte e contraste AA. */
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:300 700;font-display:swap;src:url(fonts/cormorant-garamond-latin.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:500;font-display:swap;src:url(fonts/cormorant-garamond-italic-latin.woff2) format("woff2")}
@font-face{font-family:Manrope;font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/manrope-latin.woff2) format("woff2")}

:root{
  --purple:#512b5c;
  --green:#57b35e;
  --ivory:#f4ece1;          /* derivado da arte: fundo marfim */
  --ink:#2f1839;            /* derivado do roxo: títulos */
  --ink-muted:#655468;      /* derivado: descrições (≈6:1 sobre o cartão) */
  --green-text:#3c6b35;     /* derivado do verde: texto sobre marfim (AA) */
  --line:#ab9e88;           /* ornamentos */
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:Manrope,"Segoe UI",system-ui,sans-serif;
  --ease:cubic-bezier(.22,.8,.28,1);
  font-synthesis:none;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--ivory)}
body{margin:0;min-height:100vh;min-height:100dvh;color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.5;overflow-x:hidden;-webkit-font-smoothing:antialiased}

/* ---------- Atmosfera ---------- */
.bg{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;
  background:radial-gradient(120% 70% at 50% 0%,#fbf6ee 0%,#f5eee3 45%,#efe6d9 100%)}
/* luz natural vinda do alto, respirando devagar */
.light{position:absolute;left:50%;top:-20vh;width:min(130vw,1000px);height:80vh;translate:-50% 0;
  background:radial-gradient(closest-side,rgba(255,252,246,.95),rgba(255,251,244,.5) 45%,rgba(255,250,242,0));
  animation:breathe 14s ease-in-out infinite alternate}
/* feixes de luz diagonais muito suaves */
.shafts{position:absolute;inset:-20%;opacity:.55;
  background:
    linear-gradient(115deg,transparent 30%,rgba(255,255,255,.55) 38%,transparent 46%),
    linear-gradient(115deg,transparent 50%,rgba(255,255,255,.4) 56%,transparent 62%);
  animation:shift 22s ease-in-out infinite alternate}
/* molduras botânicas: recortes da arte aprovada com bordas já esfumadas */
.decor{position:absolute;height:auto;max-width:none;user-select:none;will-change:transform}
.d-tl{left:0;top:0;width:min(40vw,330px);animation:sway 20s ease-in-out infinite alternate}
.d-tr{right:0;top:0;width:min(40.5vw,330px);animation:float 24s ease-in-out infinite alternate}
.d-bl{left:0;bottom:0;width:min(35vw,290px);animation:float 26s ease-in-out -8s infinite alternate}
.d-br{right:0;bottom:0;width:min(34vw,280px);animation:sway 21s ease-in-out -5s infinite alternate}
@media (min-width:900px){
  .d-tl{width:auto;height:min(78vh,720px)}
  .d-tr{width:auto;height:min(80vh,760px)}
  .d-bl{width:auto;height:min(92vh,980px)}
  .d-br{width:auto;height:min(90vh,940px)}
}

/* ---------- Layout ---------- */
main{width:min(100% - 36px,520px);margin:0 auto;padding:clamp(34px,6vh,64px) 0 32px}

/* ---------- Cabeçalho ---------- */
.brand{text-align:center;animation:appear .9s var(--ease) both}
.logo{display:block;width:clamp(150px,43vw,190px);height:auto;margin:0 auto}
.tagline{margin:18px auto 0;font-family:var(--serif);font-style:italic;font-weight:500;
  font-size:clamp(20px,5.7vw,28px);line-height:1.25;color:var(--ink)}
.tagline .accent{color:var(--green-text)}
.nw{white-space:nowrap}
.ornament{display:block;width:150px;height:15px;margin:18px auto 0;color:var(--line)}

/* ---------- Cartões ---------- */
.links{margin-top:22px}
.links ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}

.link{position:relative;isolation:isolate;display:flex;align-items:center;gap:12px;min-height:78px;padding:12px 14px 12px 10px;border-radius:18px;
  text-decoration:none;color:var(--ink);overflow:hidden;
  background:linear-gradient(180deg,rgba(253,250,245,.86),rgba(247,241,233,.78));
  border:1px solid rgba(255,255,255,.9);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 1px 2px rgba(74,56,40,.06),0 10px 26px -14px rgba(74,50,40,.35);
  backdrop-filter:blur(10px) saturate(115%);-webkit-backdrop-filter:blur(10px) saturate(115%);
  transition:transform .35s var(--ease),box-shadow .35s ease,background .35s ease;
  animation:appear .8s var(--ease) both;animation-delay:calc(var(--i)*80ms + 250ms);
  -webkit-tap-highlight-color:transparent}
a.link:active{transform:scale(.985);transition-duration:.12s}
@media (hover:hover){
  a.link:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 #fff,0 2px 4px rgba(74,56,40,.07),0 18px 34px -16px rgba(74,50,40,.42)}
  a.link:hover .arrow svg{transform:translateX(2px)}
}

.iconbox{width:54px;height:44px;display:grid;place-items:center;flex-shrink:0;color:var(--ink)}
.iconbox svg{width:32px;height:32px;fill:none;stroke:currentColor;stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round}

.copy{min-width:0;flex:1}
.name{display:block;font-family:var(--serif);font-weight:600;font-size:clamp(22px,6vw,25px);line-height:1.08;letter-spacing:.002em}
.desc{display:block;margin-top:3px;font-size:13.5px;line-height:1.4;font-weight:500;color:var(--ink-muted)}

.arrow{width:42px;height:42px;flex-shrink:0;display:grid;place-items:center;border-radius:50%;color:var(--ink);
  background:radial-gradient(circle at 35% 30%,#fdf6f4,#f3e3e3);
  border:1px solid rgba(255,255,255,.95);box-shadow:0 4px 12px -6px rgba(81,43,92,.35)}
.arrow svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s var(--ease)}

/* Destaques institucionais com textura de folhas */
.tone-purple,.tone-green{color:#f8f1e8;border-color:rgba(255,255,255,.35)}
.tone-purple:after,.tone-green:after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 120' preserveAspectRatio='xMaxYMid slice'%3E%3Cg fill='%23fff' fill-opacity='.07' stroke='%23fff' stroke-opacity='.16' stroke-width='.8'%3E%3Cpath d='M150 124C152 84 176 54 222 40c-3 42-28 72-72 84Z'/%3E%3Cpath d='M190 -4c10 34 38 50 74 50-6-28-34-48-74-50Z'/%3E%3Cpath d='M118 118c6-24 22-40 48-46-4 26-22 42-48 46Z'/%3E%3Cpath d='M214 124c4-22 18-36 46-42 0 22-18 38-46 42Z'/%3E%3C/g%3E%3Cg fill='none' stroke='%23fff' stroke-opacity='.18' stroke-width='.7'%3E%3Cpath d='M150 124 214 48M190 -4l66 46M118 118l44-42M214 124l40-38'/%3E%3C/g%3E%3C/svg%3E") right center/auto 100% no-repeat,
    radial-gradient(70% 120% at 85% 20%,rgba(255,255,255,.14),transparent 60%)}
.tone-purple{background:linear-gradient(100deg,#3c1c43 0%,#4a2450 40%,var(--purple) 70%,#6c3f72 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 2px 4px rgba(61,32,70,.14),0 14px 30px -14px rgba(61,32,70,.6)}
.tone-green{background:linear-gradient(100deg,#1e3d24 0%,#285030 40%,#2f6136 70%,#3f7a3f 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 2px 4px rgba(31,61,36,.14),0 14px 30px -14px rgba(31,61,36,.6)}
.tone-purple .iconbox,.tone-green .iconbox{color:#f8f1e8}
.tone-purple .desc,.tone-green .desc{color:rgba(250,244,236,.92)}
/* divisória vertical antes da seta, como na arte */
.tone-purple .copy,.tone-green .copy{align-self:stretch;display:flex;flex-direction:column;justify-content:center}
a.tone-purple .copy,a.tone-green .copy{border-right:1px solid rgba(255,255,255,.3);margin-right:4px;padding-right:10px}
.tone-purple .arrow,.tone-green .arrow{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);color:#f8f1e8;box-shadow:none}

/* Destino pendente: visível, nunca clicável */
.link.unavailable{cursor:default}
.soon{display:inline-flex;align-items:center;align-self:flex-start;gap:6px;margin-top:7px;padding:3px 10px;border-radius:999px;
  font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;line-height:1.4;
  background:rgba(81,43,92,.08);color:var(--purple)}
.soon:before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.7}
.tone-purple .soon,.tone-green .soon{background:rgba(0,0,0,.22);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);color:#fff}

/* ---------- Rodapé: Instagram ---------- */
.footer{text-align:center;margin-top:22px;animation:appear .9s var(--ease) both;animation-delay:850ms}
.footer .ornament{margin:0 auto 18px}
.ig{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:6px 6px 6px 18px;border-radius:999px;text-decoration:none;color:var(--ink);
  background:linear-gradient(180deg,rgba(253,250,245,.86),rgba(247,241,233,.78));border:1px solid rgba(255,255,255,.9);
  box-shadow:inset 0 1px 0 #fff,0 8px 22px -14px rgba(74,50,40,.4);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:transform .35s var(--ease),box-shadow .35s ease}
.ig-icon{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.4}
.ig-text{font-family:var(--serif);font-size:19px;font-weight:600;line-height:1.1}
.ig-handle{font-weight:600}
.ig-arrow{width:38px;height:38px;display:grid;place-items:center;border-left:1px solid rgba(47,24,57,.15);margin-left:4px}
.ig-arrow svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round}
@media (hover:hover){.ig:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 #fff,0 14px 28px -16px rgba(74,50,40,.5)}}

a:focus-visible{outline:2px solid var(--purple);outline-offset:4px}

@keyframes breathe{0%{opacity:.8;scale:.96}100%{opacity:1;scale:1.05}}
@keyframes shift{0%{transform:translate3d(-3%,0,0)}100%{transform:translate3d(3%,-2%,0)}}
@keyframes sway{0%{transform:translate3d(0,0,0) rotate(0)}100%{transform:translate3d(-6px,5px,0) rotate(-.8deg)}}
@keyframes float{0%{transform:translate3d(0,0,0)}100%{transform:translate3d(6px,-8px,0)}}
@keyframes appear{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

@media (min-width:700px){
  main{padding-top:56px}
  .links ul{gap:13px}
  .link{min-height:86px;padding:14px 16px 14px 12px}
  .iconbox{width:62px}
}
@media (max-width:370px){
  main{width:calc(100% - 24px)}
  .iconbox{width:44px}.iconbox svg{width:28px;height:28px}
  .arrow{width:38px;height:38px}
}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}