/* ============================================================
   ARTE RIO — TOKENS & COMPONENTES COMPARTILHADOS
   branco papel · cinza-neblina · preto carvão · azul-guanabara · terracota
   Display: Fraunces · Corpo: Inter · Rótulos: Space Grotesk
   ============================================================ */
:root{
  --paper:#FAFAF7;
  --mist:#EFEDE7;
  --stone:#CFCCC2;
  --carvao:#1B1B18;
  --carvao-70: rgba(27,27,24,.7);
  --carvao-45: rgba(27,27,24,.45);
  --guanabara:#3F6E68;
  --guanabara-dim: rgba(63,110,104,.12);
  --terracota:#B8663F;
  --terracota-dim: rgba(184,102,63,.14);

  --display: 'Fraunces', serif;
  --body: 'Inter', sans-serif;
  --label: 'Space Grotesk', sans-serif;

  --ease: cubic-bezier(.16,.8,.24,1);
  --dur: .9s;
  --nav-h: 84px;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}
body{
  font-family:var(--body);
  color:var(--carvao);
  background:var(--paper);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
button{font-family:inherit; cursor:pointer; border:none; background:none;}
ul{list-style:none;}
section{position:relative;}
.wrap{max-width:1280px; margin:0 auto; padding:0 6vw;}
@media (min-width:1400px){ .wrap{padding:0 60px;} }
::selection{ background:var(--guanabara); color:var(--paper); }
h1,h2,h3{ font-family:var(--display); font-weight:400; letter-spacing:-.01em; }
:focus-visible{ outline:2px solid var(--guanabara); outline-offset:3px; }

.eyebrow{
  font-family:var(--label); text-transform:uppercase; font-size:.72rem; letter-spacing:.22em;
  color:var(--guanabara); display:inline-flex; align-items:center; gap:.6em;
}
.eyebrow::before{ content:""; width:22px; height:1px; background:var(--guanabara); display:inline-block; }

/* ---------- Scroll reveal ---------- */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.in{ opacity:1; transform:translateY(0); }
.reveal-stagger > * { transition-delay:calc(var(--i,0) * 90ms); }

/* ---------- Placeholder media ----------
   Blocos gerados em CSS representando cada obra — devem ser
   substituídos pelas fotografias/aquarelas reais do artista. */
.media{ position:relative; overflow:hidden; background:var(--mist); isolation:isolate; }
.media::after{
  content:attr(data-swap);
  position:absolute; left:14px; bottom:14px;
  font-family:var(--label); font-size:.62rem; letter-spacing:.08em;
  color:rgba(255,255,255,.75); background:rgba(27,27,24,.35);
  padding:5px 10px; border-radius:100px; backdrop-filter: blur(4px);
  text-transform:uppercase; pointer-events:none;
}
.media .wash{
  position:absolute; inset:0;
  background-image: radial-gradient(120% 90% at 15% 10%, var(--wash-a,#8FB3AC) 0%, transparent 55%),
                     radial-gradient(120% 100% at 85% 90%, var(--wash-b,#D9C6A8) 0%, transparent 60%),
                     linear-gradient(160deg, var(--wash-c,#3F6E68) 0%, var(--wash-d,#1B1B18) 100%);
  opacity:.92; transition: transform 1.4s var(--ease);
}
.media .grain{
  position:absolute; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%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)' opacity='.35'/%3E%3C/svg%3E");
  mix-blend-mode:overlay; opacity:.5;
}
a.media:hover .wash, .card:hover .media .wash{ transform:scale(1.06); }

/* ---------- Foto real (substitui o placeholder de cor) ---------- */
.media img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block; z-index:1;
  transition: transform 1.4s var(--ease);
}
.media.has-photo::after{ display:none; }
.media.has-photo .wash{ opacity:0; }
a.media:hover img, .card:hover .media img{ transform:scale(1.06); }

/* ============================================================
   NAV
   ============================================================ */
header.nav{
  position:fixed; top:0; left:0; right:0; z-index:100; height:var(--nav-h);
  display:flex; align-items:center;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), height .4s var(--ease), color var(--dur) var(--ease);
  border-bottom:1px solid transparent;
}
header.nav.solid{
  background:rgba(250,250,247,.86); backdrop-filter:blur(14px) saturate(140%);
  border-color: var(--stone); height:68px;
}

/* ---------- Nav sobre o banner (home): translúcida, texto claro ---------- */
header.nav.has-hero{
  background: linear-gradient(rgba(15,15,13,.4), rgba(15,15,13,0));
}
header.nav.has-hero .logo,
header.nav.has-hero nav.links a,
header.nav.has-hero .nav-drop-trigger{ color:var(--paper); }
header.nav.has-hero nav.links a::after,
header.nav.has-hero .nav-drop-trigger::after{ background:var(--paper); }
header.nav.has-hero .burger span{ background:var(--paper); }
header.nav.has-hero.solid{
  background:rgba(250,250,247,.86); backdrop-filter:blur(14px) saturate(140%);
}
header.nav.has-hero.solid .logo,
header.nav.has-hero.solid nav.links a,
header.nav.has-hero.solid .nav-drop-trigger{ color:var(--carvao); }
header.nav.has-hero.solid nav.links a::after,
header.nav.has-hero.solid .nav-drop-trigger::after{ background:var(--carvao); }
header.nav.has-hero.solid .burger span{ background:var(--carvao); }
header.nav .wrap{ display:flex; align-items:center; justify-content:space-between; width:100%; }
.logo{ font-family:var(--display); font-style:italic; font-size:1.35rem; letter-spacing:.01em; display:flex; align-items:center; gap:.5em; }
.logo .dot{ width:6px; height:6px; border-radius:50%; background:var(--terracota); display:inline-block; }
nav.links{ display:flex; gap:2.4rem; }
nav.links a{ font-family:var(--label); font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; position:relative; padding:6px 0; }
nav.links a::after{ content:""; position:absolute; left:0; bottom:0; width:0; height:1px; background:var(--carvao); transition:width .35s var(--ease); }
nav.links a:hover::after, nav.links a.active::after{ width:100%; }
.nav-cta{
  font-family:var(--label); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
  border:1px solid var(--carvao); padding:.65em 1.3em; border-radius:100px;
  transition:background .3s var(--ease), color .3s var(--ease);
}
.nav-cta:hover{ background:var(--carvao); color:var(--paper); }
.burger{ display:none; width:26px; height:18px; position:relative; }

/* ---------- Seletor de idioma ---------- */
.lang-switch{ display:flex; align-items:center; gap:.5em; font-family:var(--label); font-size:.7rem; letter-spacing:.04em; }
.lang-switch .lang-option{ color:var(--carvao-45); padding:2px 1px; }
.lang-switch .lang-option.active{ color:var(--carvao); font-weight:600; }
.lang-switch .lang-option:not(:last-child)::after{ content:"/"; margin-left:.5em; color:var(--stone); }
.mobile-menu .lang-switch{ font-size:1rem; gap:.9em; flex-wrap:wrap; }
.mobile-menu .lang-switch.lang-switch-top{ margin-top:0; padding-top:0; padding-bottom:1.2rem; border-top:0; border-bottom:1px solid var(--stone); }
.mobile-menu .lang-switch .lang-option{ font-family:var(--label); font-size:.85rem; font-style:normal; letter-spacing:.04em; text-transform:uppercase; }

/* ---------- Dropdown "Coleções" ---------- */
.nav-dropdown{ position:relative; }
.nav-drop-trigger{
  font-family:var(--label); font-size:.78rem; letter-spacing:.08em; text-transform:uppercase;
  background:none; border:none; color:var(--carvao); cursor:pointer;
  display:flex; align-items:center; gap:6px; position:relative; padding:6px 0;
}
.nav-drop-trigger::after{ content:""; position:absolute; left:0; bottom:0; width:0; height:1px; background:var(--carvao); transition:width .35s var(--ease); }
.nav-drop-trigger:hover::after, .nav-dropdown.open .nav-drop-trigger::after{ width:100%; }
.nav-drop-trigger svg{ transition:transform .3s var(--ease); }
.nav-dropdown.open .nav-drop-trigger svg{ transform:rotate(180deg); }
.nav-dropdown-menu{
  position:absolute; top:calc(100% + 18px); left:50%; transform:translate(-50%,8px);
  min-width:220px; background:var(--paper); border:1px solid var(--stone); border-radius:14px;
  padding:.5rem; box-shadow:0 18px 40px rgba(27,27,24,.12);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .28s var(--ease), transform .28s var(--ease), visibility .28s;
  z-index:120;
}
.nav-dropdown.open .nav-dropdown-menu{ opacity:1; visibility:visible; pointer-events:auto; transform:translate(-50%,0); }
.nav-dropdown-menu a{
  display:flex; flex-direction:column; gap:1px; padding:.65em .9em; border-radius:9px;
  font-family:var(--label); font-size:.82rem; letter-spacing:.02em; text-transform:none;
  color:var(--carvao); transition:background .2s var(--ease);
}
.nav-dropdown-menu a:hover{ background:var(--mist); }
.nav-dropdown-menu a span{ font-family:var(--body); font-size:.78rem; color:var(--carvao-45); text-transform:none; letter-spacing:0; }
.mobile-sub-label{ font-family:var(--label); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--carvao-45); margin-top:.4rem; }
.mobile-menu a + .mobile-sub-label{ margin-top:1.2rem; padding-top:1.2rem; border-top:1px solid var(--stone); }
.burger span{ position:absolute; left:0; right:0; height:1.5px; background:var(--carvao); transition:.3s; }
.burger span:nth-child(1){ top:0; } .burger span:nth-child(2){ top:8px; } .burger span:nth-child(3){ top:16px; }
.mobile-menu{
  position:fixed; inset:0; background:var(--paper); z-index:99; display:none; flex-direction:column;
  padding:calc(var(--nav-h) + 2rem) 8vw calc(3rem + env(safe-area-inset-bottom, 0px)); gap:1.6rem;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
}
.mobile-menu.open{ display:flex; }
.mobile-menu a{ font-family:var(--display); font-size:1.9rem; font-style:italic; }
.mobile-menu a.mobile-sub-link{ font-family:var(--label); font-size:1rem; font-style:normal; text-transform:uppercase; letter-spacing:.06em; color:var(--carvao-70); }

/* ============================================================
   BOTÕES
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--label); font-size:.76rem; letter-spacing:.1em; text-transform:uppercase;
  padding:1em 2.1em; border-radius:100px;
  transition: transform .35s var(--ease), background .35s var(--ease), color .35s var(--ease), box-shadow .35s var(--ease);
}
.btn-light{ background:var(--paper); color:var(--carvao); }
.btn-light:hover{ transform:translateY(-2px); box-shadow:0 14px 30px rgba(0,0,0,.18); }
.btn-dark{ background:var(--carvao); color:var(--paper); }
.btn-dark:hover{ transform:translateY(-2px); box-shadow:0 14px 30px rgba(0,0,0,.22); }
.btn-outline{ border:1px solid var(--carvao); color:var(--carvao); }
.btn-outline:hover{ background:var(--carvao); color:var(--paper); }
.btn-whats{ background:var(--terracota); color:var(--paper); }
.btn-whats:hover{ transform:translateY(-2px); box-shadow:0 14px 30px var(--terracota-dim); }
.btn small{ opacity:.65; font-size:.8em; }
.btn[disabled]{ opacity:.4; pointer-events:none; }

/* ---------- Section header (reused) ---------- */
.sec-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:2rem; margin-bottom:3.2rem; flex-wrap:wrap; }
.sec-head h2{ font-size:clamp(2rem,4vw,3.1rem); margin-top:.35em; max-width:16ch; }
.sec-head p{ color:var(--carvao-70); max-width:42ch; font-size:1rem; }

/* ============================================================
   FOOTER
   ============================================================ */
footer{ background:var(--paper); color:var(--carvao); padding:min(8vw,90px) 0 2rem; border-top:1px solid var(--stone); }
.foot-top{ display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:3rem; padding-bottom:min(6vw,64px); border-bottom:1px solid var(--stone); }
.foot-brand .logo{ color:var(--carvao); margin-bottom:1rem; }
.foot-brand p{ color:var(--carvao-70); font-size:.92rem; max-width:32ch; }
footer h6{ font-family:var(--label); text-transform:uppercase; letter-spacing:.14em; font-size:.72rem; color:var(--carvao-45); margin-bottom:1.2rem; }
footer li{ margin-bottom:.75rem; }
footer a{ color:var(--carvao-70); font-size:.94rem; transition:.25s; }
footer a:hover{ color:var(--carvao); }
.foot-bottom{ display:flex; justify-content:space-between; align-items:center; padding-top:2rem; flex-wrap:wrap; gap:1rem; }
.foot-bottom p{ color:var(--carvao-45); font-size:.8rem; }
.foot-social{ display:flex; gap:1.4rem; }
.foot-social a{ color:var(--carvao-70); }

/* ---------- Floating WhatsApp ---------- */
.float-whats{
  position:fixed; right:22px; bottom:22px; z-index:90; width:58px; height:58px; border-radius:50%;
  background:var(--terracota); color:var(--paper); display:flex; align-items:center; justify-content:center;
  box-shadow:0 14px 30px rgba(184,102,63,.4); transition:transform .3s var(--ease);
}
.float-whats:hover{ transform:scale(1.08); }
.float-whats svg{ width:26px; height:26px; }

/* ============================================================
   PAGE HEADER (páginas internas, ex. Galeria)
   ============================================================ */
.page-head{ padding:calc(var(--nav-h) + 8vw) 0 4vw; }
.page-head .eyebrow{ margin-bottom:1rem; }
.page-head h1{ font-size:clamp(2.6rem,6vw,4.6rem); line-height:1.02; max-width:16ch; }
.page-head h1 em{ font-style:italic; color:var(--guanabara); }
.page-head p{ color:var(--carvao-70); max-width:52ch; font-size:1.05rem; margin-top:1.1em; }

/* ============================================================
   RESPONSIVO — base
   ============================================================ */
@media (max-width:1080px){
  .foot-top{ grid-template-columns:1fr 1fr; row-gap:2.6rem; }
}
@media (max-width:860px){
  nav.links{ display:none; }
  .burger{ display:block; }
}
@media (max-width:620px){
  .foot-top{ grid-template-columns:1fr; }
}