/* Modelo 2 · Terra e Areia: terracota, areia e argila. Quente, orgânico, arcos. */
:root{
  --bg:#f7efe3;--bg2:#ecdcc3;--ink:#3a2417;--muted:#7c6249;--line:#dcc7a8;
  --accent:#b4573a;--accent-ink:#fff7ee;--radius:14px;--btn-radius:6px;
  --font-display:'Fraunces',Georgia,serif;--font-body:'DM Sans',system-ui,sans-serif;--display-weight:400;--display-track:-.01em
}
.alt{background:var(--bg2)}
.eyebrow{color:#a04a2e}
.hero{background:var(--bg);overflow:hidden}
.hero-in{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:end;min-height:min(78dvh,680px);padding:40px 0 0}
.hero-tx{padding-bottom:80px}
.hero h1{font-size:clamp(2.6rem,6vw,4.9rem);margin-bottom:22px}
.hero h1 em{color:var(--accent);font-style:italic}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
.arches{display:flex;gap:14px;align-items:flex-end;height:min(560px,95vw)}
.arches div{flex:1;background-size:cover;background-position:center;border-radius:999px 999px 0 0}
.arches div:nth-child(1){height:78%;filter:saturate(.9)}
.arches div:nth-child(2){height:100%;box-shadow:0 0 0 8px var(--bg),0 0 0 9.5px var(--accent)}
.arches div:nth-child(3){height:62%}
.nav{background:color-mix(in srgb,#f7efe3 90%,transparent)}
.col-card{background:#fbf5ea}
.item .im{border-radius:999px 999px 14px 14px}
.step{background:#f7efe3}
.swatch{border-radius:999px 999px 14px 14px;max-height:640px;margin-inline:auto;object-fit:cover;width:min(100%,420px)}
.contact{background:var(--accent);border-radius:999px 999px 20px 20px;padding-top:clamp(60px,9vw,110px)}
@media(max-width:820px){.hero-in{grid-template-columns:1fr;padding-top:36px}.hero-tx{padding-bottom:10px}.arches{height:84vw}.contact{border-radius:200px 200px 20px 20px}}

/* abertura: duas portas de terracota e areia se abrem */
.intro{background:transparent;--intro-ink:#fff7ee}
.intro .door{position:absolute;top:0;bottom:0;width:50.2%;transition:transform 1.3s cubic-bezier(.77,0,.18,1)}
.intro .door.l{left:0;background:linear-gradient(90deg,#9c4a30,#b4573a)}
.intro .door.r{right:0;background:linear-gradient(270deg,#dcc7a8,#ecdcc3)}
.intro .mark{color:#fff7ee;mix-blend-mode:normal;text-shadow:0 2px 20px rgba(60,25,10,.35)}
.intro .mark small{color:#fff7ee}
.intro.out .door.l{transform:translateX(-101%)}.intro.out .door.r{transform:translateX(101%)}
.intro.out{pointer-events:none}