/* ═══ Elite Floor Covering ═══ */

:root{
  color-scheme: dark;

  --bg:        oklch(0.145 0.004 70);
  --bg-2:      oklch(0.185 0.006 68);
  --surface:   oklch(0.215 0.008 66);
  --line:      oklch(0.315 0.012 66);
  --line-soft: oklch(0.255 0.010 66);

  --ink:       oklch(0.985 0.003 85);
  --ink-2:     oklch(0.985 0.003 85);
  --ink-3:     oklch(0.985 0.003 85);
  --ink-hint:  oklch(0.660 0.014 78);   /* so placeholders nao se confundem com texto digitado */

  --gold:      oklch(0.790 0.118 83);
  --gold-hi:   oklch(0.895 0.075 90);
  --gold-deep: oklch(0.600 0.105 70);
  --walnut:    oklch(0.430 0.055 55);

  --paper:        #ffffff;              /* faixa clara */
  --ink-on-light: oklch(0.145 0.004 70);
  --gold-on-light: oklch(0.550 0.115 70);  /* dourado escurecido: 4.98:1 sobre branco */

  --r-sm: 4px;
  --r:    10px;
  --r-lg: 14px;

  --ease: cubic-bezier(.16,1,.3,1);

  --z-sticky: 100;
  --z-callbar: 200;
  --z-modal: 300;

  --pad: clamp(1.15rem, 4vw, 2rem);
  --gap: clamp(2.75rem, 7vw, 6.5rem);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink-2);
  font-family:"Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size:clamp(1rem, .96rem + .2vw, 1.075rem);
  line-height:1.62;
  overflow-x:hidden;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }

h1,h2,h3{
  font-family:"Cinzel", Georgia, "Times New Roman", serif;
  color:var(--ink);
  font-weight:700;
  line-height:1.14;
  letter-spacing:.005em;
  margin:0;
  text-wrap:balance;
}
p{ margin:0; text-wrap:pretty; }

.wrap{ width:min(1180px, 100% - (var(--pad) * 2)); margin-inline:auto; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:400;
  background:var(--gold); color:#141210; padding:.7rem 1.1rem; font-weight:600;
}
.skip:focus{ left:0; }

:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:2px; }

/* ── Buttons ── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:inherit; font-size:.95rem; font-weight:600; letter-spacing:.01em;
  padding:.72rem 1.25rem; border-radius:var(--r-sm);
  text-decoration:none; cursor:pointer; border:1px solid transparent;
  transition:background-color .25s var(--ease), color .25s var(--ease),
             border-color .25s var(--ease), transform .25s var(--ease);
}
.btn svg{ width:1.05em; height:1.05em; fill:currentColor; }
.btn-gold{ background:var(--gold); color:#17130C; }
.btn-gold:hover{ background:var(--gold-hi); transform:translateY(-1px); }
.btn-ghost{ border-color:var(--line); color:var(--ink); background:transparent; }
.btn-ghost:hover{ border-color:var(--gold); color:var(--gold); }
.btn-lg{ padding:.95rem 1.7rem; font-size:1.02rem; }
.btn-block{ width:100%; }
@media (prefers-reduced-motion: reduce){ .btn:hover{ transform:none; } }

/* ── Header ── */
.site-head{
  position:sticky; top:0; z-index:var(--z-sticky);
  background:color-mix(in oklab, var(--bg) 88%, transparent);
  border-bottom:1px solid var(--line-soft);
  backdrop-filter:blur(14px);
}
.head-in{ display:flex; align-items:center; gap:1.5rem; min-height:144px; }
.brand{ display:flex; align-items:center; margin-right:auto; line-height:0; }
.brand img{ height:clamp(84px, 8.4vw, 124px); width:auto; }
.nav{ display:flex; gap:1.65rem; }
.nav a{
  text-decoration:none; font-size:.925rem; font-weight:500; color:var(--ink-2);
  padding-block:.35rem; position:relative; transition:color .22s var(--ease);
}
.nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--gold); transform:scaleX(0); transform-origin:left;
  transition:transform .3s var(--ease);
}
.nav a:hover{ color:var(--ink); }
.nav a:hover::after{ transform:scaleX(1); }
@media (max-width: 1040px){ .nav{ display:none; } }
.head-cta{ white-space:nowrap; }
@media (max-width: 620px){
  .head-in{ min-height:104px; gap:.7rem; }
  .head-cta{ font-size:.8rem; padding:.55rem .75rem; gap:.35rem; }
  .brand img{ height:84px; }
}

/* ── Hero ── */
.hero{
  padding-block:clamp(3rem, 7vw, 6rem) clamp(3rem, 7vw, 5.5rem);
  background:
    radial-gradient(120% 90% at 82% 8%, color-mix(in oklab, var(--gold) 9%, transparent), transparent 62%),
    linear-gradient(180deg, var(--bg-2), var(--bg) 70%);
  border-bottom:1px solid var(--line-soft);
}
.hero-in{
  display:grid; grid-template-columns:1.08fr .92fr;
  gap:clamp(2rem, 5vw, 4.5rem); align-items:center;
}
.hero h1{ font-size:clamp(2.25rem, 4.6vw, 3.9rem); }
.lede{
  margin-top:1.35rem; font-size:clamp(1.03rem, 1.5vw, 1.16rem);
  color:var(--ink-2); max-width:56ch;
}
.hero-cta{ display:flex; flex-wrap:wrap; gap:.85rem; margin-top:2.1rem; }
@media (max-width: 620px){
  .hero-cta{ flex-wrap:nowrap; gap:.6rem; }
  .hero-cta .btn{
    flex:1 1 0; min-width:0; white-space:nowrap;
    padding:.9rem .55rem; font-size:.875rem; letter-spacing:0;
  }
}
@media (max-width: 360px){
  .hero-cta .btn{ font-size:.8rem; padding:.85rem .4rem; }
}
.chips{
  display:flex; flex-wrap:wrap; gap:.5rem .55rem;
  list-style:none; padding:0; margin:2.1rem 0 0;
}
.chips li{
  font-size:.79rem; letter-spacing:.055em; text-transform:uppercase; font-weight:600;
  color:var(--ink-3); border:1px solid var(--line-soft);
  padding:.42rem .78rem; border-radius:999px;
}

.hero-fig{ margin:0; position:relative; }
.hero-fig > img{
  width:100%; border-radius:var(--r-lg);
  border:1px solid color-mix(in oklab, var(--gold) 34%, var(--line));
  aspect-ratio:4/5; object-fit:cover; object-position:center 62%;
}
.hero-badge{
  position:absolute; left:-1rem; bottom:1.6rem;
  background:var(--bg-2); border:1px solid var(--line);
  border-radius:var(--r); padding:.85rem 1.15rem;
  display:flex; flex-direction:column; line-height:1.3;
}
.hero-badge .stars{ color:var(--gold); font-size:.92rem; letter-spacing:.08em; }
.hero-badge strong{ color:var(--ink); font-size:1.02rem; font-weight:600; margin-top:.15rem; }
.hero-badge span:last-child{ color:var(--ink-3); font-size:.79rem; }

@media (max-width: 880px){
  .hero-in{ grid-template-columns:1fr; }
  .hero-fig{ order:-1; }
  .hero-fig > img{ aspect-ratio:3/2; object-position:center 60%; }
  .hero-badge{ left:auto; right:.9rem; bottom:.9rem; }
}

/* ── Materials strip ── */
.strip{ background:var(--paper); }
.strip-in{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:clamp(1.25rem, 3vw, 2.75rem);
  padding-block:clamp(1.7rem, 3.2vw, 2.6rem);
}
.gg-badge{ flex:0 0 auto; }
.gg-badge svg{ height:clamp(58px, 6vw, 84px); width:auto; display:block; }
.strip-sent{
  flex:1 1 22rem;
  font-size:clamp(1.02rem, 1.75vw, 1.35rem);
  line-height:1.6; color:var(--ink-on-light); max-width:60ch;
}
.strip-sent em{
  font-family:"Cinzel", serif; font-style:normal; font-weight:700;
  color:var(--gold-on-light); letter-spacing:.015em;
}
@media (max-width: 620px){
  .strip-in{ flex-direction:column; align-items:center; text-align:center; }
  .strip-sent{ flex:0 1 auto; margin-inline:auto; text-wrap:balance; }
}

/* ── Section furniture ── */
.sec-h{ font-size:clamp(1.7rem, 3.1vw, 2.55rem); }
.sec-sub{ margin-top:.85rem; color:var(--ink-3); max-width:62ch; }

.services, .craft, .process, .work, .reviews, .areas, .estimate{
  padding-block:var(--gap);
}
.craft, .work, .estimate{ background:var(--bg-2); border-block:1px solid var(--line-soft); }

/* ── Service pillars ── */
.pillar{
  display:grid; grid-template-columns:minmax(0, .82fr) minmax(0, 1.18fr);
  gap:clamp(1.5rem, 4vw, 3.4rem); align-items:center;
  margin-top:clamp(2.5rem, 5vw, 4rem);
}
.pillar-flip{ grid-template-columns:minmax(0, 1.18fr) minmax(0, .82fr); }
.pillar-flip .pillar-fig{ order:2; }
.pillar-fig{ margin:0; }
.pillar-fig img{
  width:100%; aspect-ratio:4/5; object-fit:cover;
  border-radius:var(--r); border:1px solid var(--line-soft);
}
.pillar-body h3{
  font-size:clamp(1.3rem, 2.2vw, 1.72rem); color:var(--gold);
  letter-spacing:.03em;
}
.pillar-body p{ margin-top:.95rem; max-width:62ch; }
.ticks{ list-style:none; padding:0; margin:1.5rem 0 0; display:grid; gap:.55rem; }
.ticks li{ position:relative; padding-left:1.5rem; color:var(--ink-2); font-size:.965rem; }
.ticks li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:.6rem; height:1px; background:var(--gold);
}
@media (max-width: 800px){
  .pillar{ grid-template-columns:1fr; }
  .pillar-flip .pillar-fig{ order:0; }
  .pillar-fig img{ aspect-ratio:3/2; }
}

/* ── Craft grid ── */
.craft-grid{
  margin-top:clamp(2rem, 4vw, 3.2rem);
  display:grid; grid-template-columns:repeat(auto-fit, minmax(272px, 1fr));
  gap:clamp(1.1rem, 2.4vw, 1.8rem);
}
.craft-item{ margin:0; }
.craft-item img{
  width:100%; aspect-ratio:1; object-fit:cover;
  border-radius:var(--r); border:1px solid var(--line-soft);
}
.craft-item figcaption{
  margin-top:1rem; font-size:.94rem; color:var(--ink-3); line-height:1.55;
}
.craft-item figcaption strong{
  display:block; color:var(--ink); font-weight:600;
  font-size:1.01rem; margin-bottom:.28rem; letter-spacing:.005em;
}

/* ── Process ── */
.steps{
  list-style:none; margin:clamp(2rem, 4vw, 3rem) 0 0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(258px, 1fr));
  gap:clamp(1.6rem, 3.5vw, 3rem);
}
.steps li{ position:relative; padding-top:1.4rem; border-top:1px solid var(--line-soft); }
.step-n{
  font-family:"Cinzel", serif; font-size:2.6rem; font-weight:900;
  color:var(--gold-deep); line-height:1; display:block; margin-bottom:.7rem;
}
.steps h3{ font-size:1.22rem; color:var(--ink); letter-spacing:.025em; }
.steps p{ margin-top:.7rem; color:var(--ink-3); font-size:.965rem; }

/* ── Gallery ── */
.filters{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.8rem; }
.filter{
  font-family:inherit; font-size:.86rem; font-weight:600; letter-spacing:.03em;
  color:var(--ink-3); background:transparent; border:1px solid var(--line-soft);
  padding:.48rem .95rem; border-radius:999px; cursor:pointer;
  transition:color .22s var(--ease), border-color .22s var(--ease), background-color .22s var(--ease);
}
.filter:hover{ color:var(--ink); border-color:var(--line); }
.filter.is-on{ color:#17130C; background:var(--gold); border-color:var(--gold); }

.grid{
  margin-top:1.8rem;
  columns:4 232px; column-gap:clamp(.75rem, 1.4vw, 1.1rem);
}
@media (max-width: 620px){
  .grid{ columns:2; column-gap:.55rem; }
  .shot{ margin-bottom:.55rem; }
}
.shot{ margin:0 0 clamp(.75rem, 1.4vw, 1.1rem); break-inside:avoid; }
.shot img{
  width:100%; border-radius:var(--r-sm); border:1px solid var(--line-soft);
  cursor:zoom-in; transition:border-color .3s var(--ease), opacity .3s var(--ease);
}
.shot img:hover{ border-color:var(--gold); }
.shot[hidden]{ display:none; }

/* ── Reviews ── */
.quotes{
  margin-top:clamp(2rem, 4vw, 3rem);
  display:grid; grid-template-columns:repeat(auto-fit, minmax(290px, 1fr));
  gap:clamp(1.3rem, 2.8vw, 2.2rem);
}
.quotes blockquote{
  margin:0; padding-top:1.5rem; border-top:1px solid var(--line);
}
.quotes blockquote::before{
  content:"★★★★★"; display:block; color:var(--gold);
  font-size:.92rem; letter-spacing:.1em; margin-bottom:.9rem;
}
.quotes p{ font-size:.985rem; color:var(--ink-2); }
.quotes cite{
  display:flex; flex-direction:column; margin-top:1.15rem; font-style:normal;
  font-weight:600; color:var(--ink);
}
.quotes cite span{ font-weight:400; font-size:.82rem; color:var(--ink-3); margin-top:.15rem; }
.reviews-foot{ margin-top:2.2rem; }
.ulink{ color:var(--gold); text-underline-offset:4px; text-decoration-thickness:1px; }
.ulink:hover{ color:var(--gold-hi); }

/* ── Areas ── */
.areas-in{
  display:grid; grid-template-columns:1.35fr .65fr;
  gap:clamp(2rem, 5vw, 4rem); align-items:start;
}
.cities{
  list-style:none; padding:0; margin:1.8rem 0 0;
  display:flex; flex-wrap:wrap; gap:.5rem .55rem;
}
.cities li{
  border:1px solid var(--line-soft); border-radius:var(--r-sm);
  padding:.45rem .85rem; font-size:.92rem; color:var(--ink-2);
}
.cities .more{ border-style:dashed; color:var(--ink-3); }
.hours-card{
  background:var(--bg-2); border:1px solid var(--line);
  border-radius:var(--r); padding:clamp(1.4rem, 3vw, 2rem);
}
.hours-card h3{ font-size:1.12rem; color:var(--gold); letter-spacing:.04em; }
.big-tel{ margin-top:1rem; }
.big-tel a{
  font-family:"Cinzel", serif; font-weight:700; font-size:clamp(1.35rem, 2.6vw, 1.75rem);
  color:var(--ink); text-decoration:none; letter-spacing:.01em;
}
.big-tel a:hover{ color:var(--gold); }
.hours{ margin-top:.55rem; color:var(--ink-3); font-size:.92rem; }
.mail{ margin-top:1rem; font-size:.92rem; word-break:break-all; }
.mail a{ color:var(--gold); text-underline-offset:3px; }
@media (max-width: 800px){ .areas-in{ grid-template-columns:1fr; } }

/* ── Estimate ── */
.est-in{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(2rem, 5vw, 4.5rem); align-items:start;
}
.est-copy p{ margin-top:1.1rem; max-width:52ch; }
.est-alt{ color:var(--ink-3); font-size:.95rem; }
.est-alt a{ color:var(--gold); }

.est-form{
  display:grid; grid-template-columns:1fr 1fr; gap:1rem 1.1rem;
  background:var(--bg); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:clamp(1.3rem, 3vw, 2rem);
}
.field{ display:flex; flex-direction:column; gap:.4rem; }
.field-wide, .est-form .btn, .form-note, .sent, .hp{ grid-column:1 / -1; }
.field label{
  font-size:.82rem; font-weight:600; letter-spacing:.045em;
  text-transform:uppercase; color:var(--ink-3);
}
.opt{ text-transform:none; letter-spacing:0; font-weight:400; }
.field input, .field select, .field textarea{
  font-family:inherit; font-size:.98rem; color:var(--ink);
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-sm); padding:.7rem .85rem; width:100%;
  transition:border-color .22s var(--ease);
}
.field textarea{ resize:vertical; }
.field input::placeholder, .field textarea::placeholder{ color:var(--ink-hint); }
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--gold); }
.field.bad input{ border-color:oklch(0.65 0.17 27); }
.err{ font-size:.79rem; color:oklch(0.74 0.15 27); min-height:0; }
.form-note{ font-size:.82rem; color:var(--ink-3); text-align:center; }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.sent{
  background:color-mix(in oklab, var(--gold) 11%, var(--bg-2));
  border:1px solid var(--gold-deep); border-radius:var(--r);
  padding:1.1rem 1.25rem;
}
.sent-bad{
  background:color-mix(in oklab, oklch(0.65 0.17 27) 13%, var(--bg-2));
  border-color:oklch(0.55 0.15 27);
}
.sent strong{ color:var(--gold-hi); font-size:1.05rem; }
.sent-bad strong{ color:oklch(0.82 0.11 27); }
.sent p{ margin-top:.4rem; font-size:.94rem; }
.sent a{ color:var(--gold); }
@media (max-width: 860px){
  .est-in{ grid-template-columns:1fr; }
  .est-form{ grid-template-columns:1fr; }
}

/* ── Footer ── */
.site-foot{ border-top:1px solid var(--line-soft); padding-top:clamp(2.5rem, 5vw, 4rem); }
.foot-in{
  display:grid; grid-template-columns:auto 1fr;
  gap:clamp(2rem, 5vw, 4rem); align-items:start;
}
.foot-logo{ width:min(300px, 40vw); height:auto; }
.foot-cols{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));
  gap:2rem;
}
.foot-cols h4{
  font-size:.79rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold); margin:0 0 .95rem; font-weight:700;
}
.foot-cols a, .foot-cols span{
  display:block; font-size:.92rem; color:var(--ink-3);
  text-decoration:none; padding-block:.28rem; overflow-wrap:anywhere;
}
.foot-cols a:hover{ color:var(--gold); }
.foot-legal{
  margin-top:clamp(2rem, 4vw, 3rem); padding-block:1.5rem 1.5rem;
  border-top:1px solid var(--line-soft);
}
.foot-legal p{ font-size:.84rem; color:var(--ink-3); }
@media (max-width: 760px){ .foot-in{ grid-template-columns:1fr; } }

/* ── Mobile: composicao centrada ── */
/* Uma coluna estreita nao tem margem lateral para ancorar o olho, entao o eixo
   central vira o alinhamento de toda a pagina. Campos de formulario ficam de fora
   de proposito: rotulo centralizado sobre input de largura cheia atrapalha a leitura. */
@media (max-width: 620px){
  .hero h1{ text-align:center; }
  .lede{ text-align:center; margin-inline:auto; }
  .hero-cta{ justify-content:center; }
  .chips{ justify-content:center; }

  .sec-h{ text-align:center; }
  .sec-sub{ text-align:center; margin-inline:auto; }

  .pillar-body{ text-align:center; }
  .pillar-body p{ margin-inline:auto; }
  .ticks li{ padding-left:0; }
  .ticks li::before{
    position:static; display:inline-block;
    width:.6rem; margin-right:.55rem; vertical-align:middle;
  }

  .craft-item figcaption{ text-align:center; }

  .steps li{ text-align:center; }

  .filters{ justify-content:center; }

  .quotes blockquote{ text-align:center; }
  .quotes cite{ align-items:center; }
  .reviews-foot{ text-align:center; }

  .cities{ justify-content:center; }
  .hours-card{ text-align:center; }

  .est-copy{ text-align:center; }
  .est-copy p{ margin-inline:auto; }
  .sent{ text-align:center; }

  .foot-in{ justify-items:center; }
  .foot-logo{ margin-inline:auto; }
  .foot-cols{ text-align:center; }
  .foot-legal{ text-align:center; }
}

/* ── Sticky call bar (mobile) ── */
.callbar{
  position:fixed; inset:auto 0 0 0; z-index:var(--z-callbar);
  display:none; gap:.6rem; padding:.7rem var(--pad) calc(.7rem + env(safe-area-inset-bottom));
  background:color-mix(in oklab, var(--bg) 93%, transparent);
  border-top:1px solid var(--line); backdrop-filter:blur(14px);
}
.callbar .btn{ flex:1; }
@media (max-width: 720px){
  .callbar{ display:flex; }
  .site-foot{ padding-bottom:5.5rem; }
}

/* ── Lightbox ── */
.lb{
  border:none; padding:0; background:transparent; max-width:94vw; max-height:94vh;
}
.lb::backdrop{ background:oklch(0.10 0 0 / .88); }
.lb img{ max-width:94vw; max-height:88vh; border-radius:var(--r); object-fit:contain; }
.lb-x{
  position:absolute; top:-2.4rem; right:0; background:none; border:none;
  color:var(--ink); font-size:2rem; line-height:1; cursor:pointer; padding:.2rem .5rem;
}
.lb-x:hover{ color:var(--gold); }

/* ── Reveal (progressive: visible by default) ── */
.reveal-init{ opacity:0; transform:translateY(18px); }
.reveal-init.in{
  opacity:1; transform:none;
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
@media (prefers-reduced-motion: reduce){
  .reveal-init{ opacity:1; transform:none; }
  .reveal-init.in{ transition:none; }
}