/* As Grandes Águas · paleta do Estilo Budista (A pôr do sol, B hora azul, C jardim da manhã) */
:root {
  --creme: #f6e7c8;
  --papel: #efe0c2;
  --ambar: #e8a85a;
  --ouro: #c99a4b;
  --terracota: #b5573a;
  --ferrugem: #8e3f24;
  --coral: #d9786b;
  --oliva: #5d6b3a;
  --petroleo: #1f4a52;
  --anil: #26344f;
  --lilas: #9a8fb3;
  --noite: #1a1512;
  --marrom: #2a1d17;
  --tinta: #3a2a20;
  --serifa: "Cormorant Garamond", Georgia, serif;
  --sans: "Nunito", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--marrom);
  color: var(--creme);
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* granulação de papel antigo sobre tudo */
body::after {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 50;
  opacity: .13;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
a { color: inherit; }
img { display: block; max-width: 100%; }

/* ---------- cabeçalho com água em movimento ---------- */
.hero {
  position: relative;
  height: 100vh; height: 100svh;
  min-height: 560px;
  overflow: hidden;
  background: var(--noite);
}
.hero-img, .hero-gl, .hero-ondas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}
.hero-img { object-fit: cover; object-position: 50% 50%; transform: scale(1.04); animation: respiro 26s ease-in-out infinite alternate; }
.hero-gl { opacity: 0; transition: opacity 1.2s ease; }
.hero.gl-ativo .hero-gl { opacity: 1; }
.hero.gl-ativo .hero-img { visibility: hidden; }
.hero-ondas { pointer-events: none; }
.hero-veu {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 45% at 50% 32%, rgba(26,21,18,.42), transparent 70%),
    linear-gradient(to bottom, rgba(26,21,18,.35) 0%, transparent 30%, transparent 70%, var(--marrom) 100%);
}
.hero-texto {
  position: absolute;
  left: 0; right: 0; top: 17%;
  padding: 0 16px;
  text-align: center;
  animation: surgir 2.4s ease-out both .3s;
}
.hero h1 {
  margin: 0;
  font-family: var(--serifa);
  font-weight: 600;
  font-size: clamp(2.8rem, 9vw, 6.4rem);
  line-height: 1;
  letter-spacing: .01em;
  color: var(--creme);
  text-shadow: 0 2px 30px rgba(26,21,18,.6);
}
.oraculo {
  margin: 1.1rem auto 0;
  font-family: var(--serifa);
  font-size: clamp(1.15rem, 2.6vw, 1.6rem);
  color: var(--papel);
  text-shadow: 0 1px 16px rgba(26,21,18,.75);
}
.oraculo.pre { margin: 0 auto .5rem; }
.descer {
  position: absolute; left: 50%; bottom: 28px;
  width: 26px; height: 42px;
  margin-left: -13px;
  border: 1.5px solid rgba(246,231,200,.6);
  border-radius: 14px;
}
.descer span {
  position: absolute; left: 50%; top: 8px;
  width: 4px; height: 8px; margin-left: -2px;
  border-radius: 2px;
  background: var(--creme);
  animation: gota 2.2s ease-in-out infinite;
}

/* ---------- seções ---------- */
.sobretitulo {
  margin: 0 0 .6rem;
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--ambar);
}
h2 {
  margin: 0 0 1.6rem;
  font-family: var(--serifa);
  font-weight: 600;
  font-size: clamp(2rem, 5vw, 3.1rem);
  line-height: 1.1;
}
.proposta { padding: 72px 16px 64px; }
.miolo { max-width: 640px; margin: 0 auto; text-align: center; }
.miolo p { margin: 0 0 1.2rem; color: var(--papel); }
.ancora {
  margin-top: 2rem !important;
  font-family: var(--serifa);
  font-style: italic;
  font-size: 1.45rem;
  line-height: 1.45;
  color: var(--creme) !important;
}

.divisa { height: 60px; color: var(--petroleo); }
.divisa svg { width: 100%; height: 100%; display: block; }
.onda { fill: none; stroke-width: 1.6; }
.o1 { stroke: rgba(232,168,90,.55); }
.o2 { stroke: rgba(154,143,179,.4); }

.travessias {
  padding: 56px 16px 88px;
  background: linear-gradient(to bottom, var(--marrom), #1d2a30 60%, var(--noite));
}
.miolo-largo { max-width: 1120px; margin: 0 auto; }
.cabeca { text-align: center; margin-bottom: 2.6rem; }
.cartoes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.cartao {
  display: flex; flex-direction: column;
  text-decoration: none;
  background: rgba(246,231,200,.06);
  border: 1px solid rgba(232,168,90,.25);
  border-radius: 18px;
  overflow: hidden;
  transition: transform .5s ease, border-color .5s ease, background .5s ease;
}
.cartao:hover, .cartao:focus-visible { transform: translateY(-6px); border-color: rgba(232,168,90,.7); background: rgba(246,231,200,.1); }
.cartao:focus-visible { outline: 2px solid var(--ambar); outline-offset: 3px; }
.foto { aspect-ratio: 4 / 5; overflow: hidden; }
.foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s ease; }
.cartao:hover .foto img { transform: scale(1.05); }
.corpo { padding: 22px 22px 26px; display: flex; flex-direction: column; flex: 1; }
.corpo h3 {
  margin: 0 0 .6rem;
  font-family: var(--serifa);
  font-weight: 600;
  font-size: 1.65rem;
  line-height: 1.15;
  color: var(--creme);
}
.corpo p { margin: 0 0 1.4rem; font-size: 1rem; color: var(--papel); opacity: .9; flex: 1; }
/* botão com água: maré baixa correndo no pé do botão; no hover a maré sobe e um anel se abre do toque */
.cta {
  --onda: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M0 10 Q25 0 50 10 T100 10 T150 10 T200 10 V20 H0Z' fill='%238e3f24'/%3E%3C/svg%3E");
  --brilho: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M0 10 Q25 0 50 10 T100 10 T150 10 T200 10' fill='none' stroke='%23e8a85a' stroke-width='1.6' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  position: relative;
  isolation: isolate;
  overflow: hidden;
  align-self: flex-start;
  padding: .75rem 1.4rem;
  border-radius: 999px;
  background: var(--terracota);
  color: var(--creme);
  font-weight: 800;
  font-size: .9rem;
  letter-spacing: .04em;
  text-shadow: 0 1px 2px rgba(42,29,23,.45);
}
.cta::before, .cta::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 200%;
  z-index: -1;
  background-repeat: repeat-x;
  background-size: 50% 100%;
  animation: correnteza 6s linear infinite;
  transition: height .9s cubic-bezier(.3,.7,.2,1), bottom .9s cubic-bezier(.3,.7,.2,1);
}
.cta::before { height: 34%; background-image: var(--onda); opacity: .75; }
.cta::after { height: 34%; bottom: 0; background-image: var(--brilho); background-size: 50% 30%; background-position: 0 0; opacity: .55; animation-duration: 9s; animation-direction: reverse; }
.cartao:hover .cta::before, .cartao:focus-visible .cta::before { height: 130%; }
.cartao:hover .cta::after, .cartao:focus-visible .cta::after { bottom: 92%; opacity: .25; }
.gota-anel {
  position: absolute;
  z-index: -1;
  width: 12px; height: 12px;
  margin: -6px 0 0 -6px;
  border: 1.5px solid rgba(246,231,200,.38);
  border-radius: 50%;
  pointer-events: none;
  animation: anel 1.1s ease-out forwards;
}
@keyframes correnteza { to { transform: translateX(-50%); } }
@keyframes anel { to { transform: scale(16); opacity: 0; } }
.nota { margin: 2.4rem 0 0; text-align: center; font-size: .95rem; color: var(--papel); opacity: .75; }

.rodape { padding: 48px 16px 56px; text-align: center; background: var(--noite); }
.rodape p { margin: 0 0 .4rem; }
.rodape a { color: var(--ambar); text-decoration: none; font-weight: 600; }
.rodape a:hover { text-decoration: underline; }
.pequeno { font-size: .8rem; opacity: .55; }

/* ---------- movimento ---------- */
.revelar { opacity: 0; transform: translateY(28px); transition: opacity 1.1s ease, transform 1.1s ease; }
.revelar.visivel { opacity: 1; transform: none; }
.cartoes .revelar:nth-child(2) { transition-delay: .15s; }
.cartoes .revelar:nth-child(3) { transition-delay: .3s; }
@keyframes respiro { from { transform: scale(1.04); } to { transform: scale(1.1) translateY(-1%); } }
@keyframes surgir { from { opacity: 0; transform: translateY(18px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes gota { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(16px); } }

@media (max-width: 860px) {
  .cartoes { grid-template-columns: 1fr; max-width: 440px; margin: 0 auto; gap: 24px; }
  .hero-texto { top: 14%; }
  body { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-img, .hero-texto, .descer span, .cta::before, .cta::after { animation: none; }
  .revelar { opacity: 1; transform: none; transition: none; }
}