/* ══════════════════════════════════════════════
   BARRO® — estúdio de cerâmica · clay 3D
   Sistema visual: creme, molduras de contorno
   preto fino arredondadas, display preto gigante,
   objetos clay rosa/verde flutuantes, fills doces
   ══════════════════════════════════════════════ */

:root {
  --cream:  #FAF4E8;
  --paper:  #FFFBF2;
  --ink:    #141412;
  --dimc:   #6E6A61;
  --pink:   #F6C6C2;
  --pink-soft: #F9E3D9;
  --lilac:  #DCCDF2;
  --green:  #A8BF8F;
  --terra:  #D98D5F;
  --yellow: #F2D24B;

  --font-disp: 'Archivo Black', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;

  --line: 2px solid var(--ink);
  --r-frame: 28px;
  --r-card: 20px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { overflow-x: hidden; scroll-behavior: smooth; }

body {
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
.dim { color: var(--dimc); }

.section { position: relative; overflow: hidden; }

body:not(.no-js) .rv { opacity: 0; transform: translateY(24px); }

/* ══════════ LOADER ══════════ */
.loader {
  position: fixed; inset: 0; z-index: 90;
  background: var(--cream);
  display: grid; place-items: center;
  transition: opacity .5s ease, visibility .5s ease;
}
.loader.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
.loader__word { font-family: var(--font-disp); font-size: 2.2rem; letter-spacing: .02em; }
.loader__star {
  position: absolute; margin-top: 5.5rem;
  font-size: 1.6rem; color: var(--terra);
  animation: spin 2.4s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ══════════ NAV ══════════ */
.nav {
  position: relative; z-index: 20;
  display: flex; align-items: center; gap: 1.6rem;
  padding: 1.1rem clamp(1.2rem, 4vw, 3rem);
}
.nav__logo { font-family: var(--font-disp); font-size: 1.4rem; letter-spacing: .01em; }
.nav__logo span { font-family: var(--font-body); font-weight: 600; font-size: .8em; vertical-align: super; }
.nav__links { display: flex; gap: 1.6rem; margin-left: auto; }
.nav__links a {
  font-size: .88rem; font-weight: 600;
  border-bottom: 2px solid transparent; padding-bottom: 2px;
  transition: border-color .25s ease;
}
.nav__links a:hover { border-color: var(--ink); }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ink); color: var(--cream);
  font-weight: 600; font-size: .88rem;
  padding: .75em 1.7em; border-radius: 999px;
  border: var(--line);
  transition: background .25s ease, color .25s ease, rotate .25s ease;
}
.btn:hover { background: var(--pink); color: var(--ink); rotate: -1.5deg; }
.btn--big { font-size: 1.05rem; padding: .9em 2.2em; }

.burger {
  display: none; flex-direction: column; gap: 6px;
  background: none; border: none; cursor: pointer; padding: 8px;
}
.burger span { width: 26px; height: 3px; border-radius: 3px; background: var(--ink); }

.menu {
  position: fixed; inset: 0; z-index: 80;
  background: var(--pink-soft);
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .35s ease, visibility .35s ease;
}
.menu.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
.menu nav { display: flex; flex-direction: column; align-items: center; gap: 1.2rem; }
.menu a { font-family: var(--font-disp); font-size: 2.2rem; }
.menu__foot { position: absolute; bottom: 2rem; font-size: .85rem; color: var(--dimc); }

/* ══════════ MOLDURA ══════════ */
.frame {
  position: relative;
  margin: 0 clamp(.8rem, 2.5vw, 2.4rem) clamp(.8rem, 2.5vw, 2.4rem);
  border: var(--line); border-radius: var(--r-frame);
  background: var(--paper);
  padding: clamp(3.2rem, 7vw, 5rem) clamp(1.2rem, 4vw, 4rem);
  overflow: hidden;
}
.frame__corner {
  position: absolute; z-index: 6;
  font-size: .78rem; font-weight: 600; letter-spacing: .01em;
}
.frame__corner--tl { top: 1.1rem; left: 1.4rem; }
.frame__corner--tr { top: 1.1rem; right: 1.4rem; }
.frame__corner--bl { bottom: 1.1rem; left: 1.4rem; }
.frame__corner--br { bottom: 1.1rem; right: 1.4rem; }

/* ══════════ HERO ══════════ */
.hero .frame {
  min-height: 88vh;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
}
.hero__title {
  position: relative; z-index: 2;
  font-family: var(--font-disp); font-weight: 400;
  font-size: clamp(4rem, 16.5vw, 14.5rem);
  line-height: .95; letter-spacing: -.015em;
}
.clay { position: absolute; z-index: 3; filter: drop-shadow(0 18px 30px rgba(20, 20, 18, .18)); }
.clay img { width: 100%; height: auto; }
.clay--mug   { width: clamp(210px, 30vw, 430px); top: 24%; left: 50%; transform: translateX(-52%); z-index: 4; }
.clay--vase  { width: clamp(120px, 15vw, 220px); top: 30%; left: 6%; transform: rotate(-6deg); }
.clay--bowl  { width: clamp(110px, 14vw, 210px); top: 58%; right: 7%; transform: rotate(8deg); }
.clay--plate { width: clamp(130px, 16vw, 240px); bottom: 9%; left: 13%; transform: rotate(-10deg); }

.hero__sub {
  position: relative; z-index: 5;
  max-width: 44ch; margin-top: auto; padding-top: clamp(15rem, 32vw, 24rem);
  font-weight: 500; color: var(--dimc);
}
.hero__scroll {
  position: relative; z-index: 5;
  margin-top: 1.4rem;
  width: 52px; height: 52px; border-radius: 50%;
  border: var(--line);
  display: grid; place-items: center;
  font-size: 1.2rem; font-weight: 600;
  animation: bob 1.8s ease-in-out infinite;
}
@keyframes bob { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(4px); } }

/* ══════════ SEÇÕES ══════════ */
.sec-head { max-width: 1240px; margin: 0 auto clamp(2rem, 5vw, 3rem); }
.sec-label {
  font-size: .78rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--dimc);
  margin-bottom: .8rem;
}
.sec-title {
  font-family: var(--font-disp); font-weight: 400;
  font-size: clamp(2.2rem, 6.4vw, 5rem);
  line-height: .98; letter-spacing: -.01em;
}

/* processo */
.processo { padding: clamp(3.5rem, 9vh, 6.5rem) clamp(1.2rem, 4vw, 3rem); }
.steps {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: clamp(.7rem, 1.4vw, 1.2rem);
  max-width: 1240px; margin-inline: auto;
}
.step {
  border: var(--line); border-radius: var(--r-card);
  background: var(--paper);
  padding: 1.4rem 1.2rem 1.6rem;
  min-height: 210px;
  display: flex; flex-direction: column;
  transition: translate .25s ease, rotate .25s ease;
}
.step:hover { translate: 0 -6px; rotate: -1deg; }
.step--fill-pink { background: var(--pink-soft); }
.step--fill-lilac { background: var(--lilac); }
.step h3 { font-weight: 600; font-size: 1.15rem; letter-spacing: -.01em; }
.step h3 i { font-style: normal; margin-right: .4em; }
.step p { margin-top: auto; font-size: .85rem; line-height: 1.65; color: var(--dimc); }
.step--fill-pink p, .step--fill-lilac p { color: var(--ink); opacity: .75; }

/* peças */
.pecas { padding: clamp(3.5rem, 9vh, 6.5rem) clamp(1.2rem, 4vw, 3rem); }
.pecas__grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(.8rem, 1.6vw, 1.4rem);
  max-width: 1240px; margin-inline: auto;
}
.peca {
  border: var(--line); border-radius: var(--r-card);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: translate .3s ease, rotate .3s ease, box-shadow .3s ease;
}
.peca:hover { translate: 0 -6px; rotate: 1deg; box-shadow: 0 14px 0 rgba(20, 20, 18, .9); }
.peca--pink { background: var(--pink-soft); }
.peca--cream { background: var(--paper); }
.peca--lilac { background: var(--lilac); }
.peca__ph {
  aspect-ratio: 1 / .92;
  display: grid; place-items: center;
  padding: 1.4rem;
}
.peca__ph img { width: 78%; height: 100%; object-fit: contain; }
.peca__bar {
  margin-top: auto;
  border-top: var(--line);
  background: var(--paper);
  padding: .9rem 1.1rem;
  display: flex; justify-content: space-between; align-items: center; gap: .6rem;
  min-height: 4.4rem;
}
.peca__bar h3 { font-weight: 600; font-size: .98rem; letter-spacing: -.01em; }
.peca__bar p { font-size: .76rem; color: var(--dimc); }
.peca__price { font-family: var(--font-disp); font-size: 1.05rem; white-space: nowrap; }
.pecas__note {
  max-width: 1240px; margin: 1.6rem auto 0;
  font-size: .88rem; font-weight: 600; color: var(--dimc);
}

/* estúdio / colagem */
.estudio { padding: clamp(3.5rem, 9vh, 6.5rem) clamp(1.2rem, 4vw, 3rem); }
.estudio__band {
  position: relative;
  border: var(--line); border-radius: var(--r-frame);
  background: var(--pink-soft);
  min-height: clamp(380px, 52vw, 560px);
  max-width: 1240px; margin-inline: auto;
  display: grid; place-items: center;
  overflow: hidden;
  padding: 2rem;
}
.clay--b1 { width: clamp(130px, 17vw, 250px); top: 8%; left: 6%; transform: rotate(-8deg); }
.clay--b2 { width: clamp(100px, 13vw, 190px); bottom: 10%; right: 8%; transform: rotate(7deg); }
.clay--b3 { width: clamp(100px, 13vw, 190px); top: 12%; right: 16%; transform: rotate(-5deg); }
.clay--b4 { width: clamp(110px, 14vw, 200px); bottom: 8%; left: 16%; transform: rotate(9deg); }
.estudio__quote { position: relative; z-index: 5; text-align: center; max-width: 34ch; }
.estudio__quote p {
  font-family: var(--font-disp); font-weight: 400;
  font-size: clamp(1.3rem, 3vw, 2.2rem);
  line-height: 1.2; letter-spacing: -.01em;
}
.estudio__quote footer { margin-top: 1.2rem; font-size: .9rem; font-weight: 600; color: var(--dimc); }
.estudio__info {
  max-width: 1240px; margin: 1.6rem auto 0;
  border: var(--line); border-radius: var(--r-card);
  background: var(--paper);
  padding: 1.4rem 1.6rem;
  font-size: .95rem;
}

/* ══════════ FOOTER ══════════ */
.footer { padding-top: 1rem; }
.frame--foot {
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  background: var(--lilac);
}
.footer__cta { display: flex; flex-direction: column; align-items: center; gap: 1.1rem; max-width: 560px; }
.footer__links { font-size: .88rem; font-weight: 600; }
.footer__links a { border-bottom: 2px solid var(--ink); }
.footer__mark {
  font-family: var(--font-disp); font-weight: 400;
  font-size: clamp(4rem, 17.5vw, 15.5rem);
  line-height: .95; letter-spacing: -.015em;
  margin-top: clamp(2rem, 5vh, 3.4rem);
}

/* ══════════ RESPONSIVO ══════════ */
@media (max-width: 1100px) {
  .steps { grid-template-columns: repeat(3, 1fr); }
  .step { min-height: 180px; }
  .pecas__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .nav__links, .nav__cta { display: none; }
  .burger { display: flex; margin-left: auto; }
}

@media (max-width: 640px) {
  .steps { grid-template-columns: 1fr 1fr; }
  .step { min-height: 0; gap: .9rem; }
  .step p { margin-top: 0; }
  .pecas__grid { grid-template-columns: 1fr; max-width: 420px; }
  .hero .frame { min-height: 0; }
  .hero__sub { padding-top: clamp(12rem, 56vw, 16rem); }
  .clay--mug { width: min(58vw, 260px); top: 20%; }
  .clay--vase { width: 24vw; top: 34%; left: 2%; }
  .clay--bowl { width: 22vw; top: 56%; right: 3%; }
  .clay--plate { width: 26vw; bottom: 22%; left: 4%; }
  .frame__corner { font-size: .64rem; }
  .frame__corner--bl { display: none; }
  .estudio__band { min-height: 420px; }
  .clay--b3 { display: none; }
  .footer__mark { margin-top: 1.6rem; }
}

/* ══════════ MOVIMENTO REDUZIDO ══════════ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .loader__star, .hero__scroll { animation: none; }
  body:not(.no-js) .rv { opacity: 1; transform: none; }
}