/* ================================================================
   Real Ouro — Compra e Venda
   assets/css/main.css — source CSS (mobile-first)
   Phase 1: identidade visual, tokens, base/header/footer/botão flutuante
   Minificação adiada para a Phase 3.
   ================================================================ */

/* ── 1. Tokens de identidade visual ─────────────────────────── */
:root{
  --gold-light:#F4D77E;
  --gold:#D4AF37;
  --gold-dark:#9C6B1E;
  --black:#0B0B0B;
  --white:#FFFFFF;
  --space:1rem;
  --maxw:1140px;
  --font-head:"Playfair Display",Georgia,serif;
  --font-body:"Inter",system-ui,-apple-system,sans-serif;
}

/* ── 2. Reset + base ─────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;}

html{scroll-behavior:smooth;}

body{margin:0;background:var(--black);color:var(--white);
  font-family:var(--font-body);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;}

h1,h2,h3{font-family:var(--font-head);font-weight:700;line-height:1.2;margin:0 0 .5em;}

a{color:var(--gold);text-decoration:none;}

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

/* ── 3. Layout wrapper ───────────────────────────────────────── */
/* container controla só o eixo horizontal (padding-left/right em longhand);
   o eixo vertical fica por conta de `section` — evita que a maior
   especificidade de .container zere o padding vertical das seções. */
.container{width:100%;max-width:var(--maxw);margin:0 auto;
  padding-left:var(--space);padding-right:var(--space);}

section{padding-top:3rem;padding-bottom:3rem;}

/* ── 4. Gradiente dourado metálico — solid fallback primeiro ─── */
/* Fallback sólido para browsers sem suporte a background-clip:text */
.text-gold-gradient{
  color:var(--gold);
  background:linear-gradient(135deg,var(--gold-light),var(--gold-dark));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* ── 5. Header ───────────────────────────────────────────────── */
.site-header{position:sticky;top:0;z-index:50;display:flex;align-items:center;
  justify-content:space-between;gap:1rem;padding:.75rem var(--space);
  background:rgba(11,11,11,.92);backdrop-filter:blur(6px);}

.site-header .logo{height:42px;width:auto;}

/* ── 6. Navegação ────────────────────────────────────────────── */
.site-nav{display:flex;flex-wrap:wrap;gap:1rem;}

.site-nav a{color:var(--white);font-size:.95rem;}

.site-nav a:hover{color:var(--gold);}

/* ── 7. Botão WhatsApp CTA ───────────────────────────────────── */
.btn-whatsapp{display:inline-flex;align-items:center;gap:.5rem;min-height:48px;
  padding:.6rem 1rem;border-radius:999px;
  background:linear-gradient(135deg,var(--gold-light),var(--gold-dark));
  color:var(--black);font-weight:600;}

/* ── 8. Footer ───────────────────────────────────────────────── */
.site-footer{padding:2rem var(--space);border-top:1px solid rgba(212,175,55,.25);
  color:#cfcfcf;font-size:.9rem;}

.site-footer address{font-style:normal;line-height:1.7;}

/* ── 9. Botão flutuante WhatsApp ─────────────────────────────── */
/* PITFALLS #9: iOS Safari bottom bar — env(safe-area-inset-bottom)
   mantém o botão acima do indicador home em iPhones com notch.    */
.whatsapp-float{position:fixed;right:1rem;
  bottom:calc(1rem + env(safe-area-inset-bottom,0px));z-index:60;
  display:inline-flex;align-items:center;justify-content:center;
  width:56px;height:56px;border-radius:50%;background:#25D366;color:#fff;
  box-shadow:0 4px 14px rgba(0,0,0,.4);}

/* ── 19. Footer social slot — Instagram (sem link ativo) ──── */
.footer-social{margin-top:1rem;}
.social-slot{display:inline-flex;align-items:center;gap:.45rem;
  color:rgba(255,255,255,.35);font-size:.85rem;cursor:default;}
.social-slot svg{opacity:.4;}
.social-slot__tag{font-size:.72rem;color:rgba(212,175,55,.45);
  border:1px solid rgba(212,175,55,.22);border-radius:4px;padding:.05rem .35rem;}

/* ── 10. Breakpoints tablet+ ─────────────────────────────────── */
@media (min-width:768px){
  .site-header{padding:1rem var(--space);}
  .site-header .logo{height:48px;}
  section{padding-top:5rem;padding-bottom:5rem;}
}

/* ── 11. Section heading shared ──────────────────────────────── */
.section-title{text-align:center;font-size:clamp(1.5rem,4vw,2.25rem);margin-bottom:2.5rem;}
.section-title::after{content:'';display:block;width:60px;height:3px;
  background:linear-gradient(90deg,var(--gold-light),var(--gold-dark));
  margin:.5rem auto 0;border-radius:2px;}

/* ── 12. Hero ─────────────────────────────────────────────────── */
#hero{padding-top:5rem;padding-bottom:4rem;text-align:center;}
.hero-inner{max-width:720px;margin:0 auto;}
#hero h1{font-size:clamp(2rem,6vw,3.5rem);margin-bottom:1.25rem;}
.hero-sub{font-size:1.1rem;color:#cfcfcf;max-width:600px;margin:0 auto 2.25rem;line-height:1.75;}
.btn-whatsapp--lg{padding:.85rem 2rem;font-size:1.05rem;}
@media(min-width:768px){
  #hero{padding-top:7rem;padding-bottom:6rem;}
}

/* ── 13. Serviços — grid de cards ────────────────────────────── */
.cards-grid{display:grid;gap:1.5rem;}
.card{background:rgba(255,255,255,.04);border:1px solid rgba(212,175,55,.25);
  border-radius:12px;padding:2rem 1.5rem;text-align:center;
  transition:border-color .2s;}
.card:hover{border-color:var(--gold);}
.card-icon{color:var(--gold);margin-bottom:1.25rem;}
.card h3{font-family:var(--font-head);font-size:1.15rem;margin-bottom:.75rem;
  color:var(--gold-light);}
.card p{color:#cfcfcf;font-size:.95rem;line-height:1.65;margin:0;}
@media(min-width:768px){
  .cards-grid{grid-template-columns:repeat(3,1fr);}
}

/* ── 14. Diferenciais — strip de confiança ───────────────────── */
#diferenciais{background:rgba(212,175,55,.04);border-top:1px solid rgba(212,175,55,.15);
  border-bottom:1px solid rgba(212,175,55,.15);}
.strip-grid{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(2,1fr);gap:2rem;}
.strip-item{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.75rem;}
.strip-item svg{color:var(--gold);}
.strip-item span{font-family:var(--font-head);font-size:1rem;color:var(--gold-light);font-weight:600;}
@media(min-width:768px){
  .strip-grid{grid-template-columns:repeat(4,1fr);}
}

/* ── 15. Processo — 3 passos ─────────────────────────────── */
#processo{background:rgba(212,175,55,.04);border-top:1px solid rgba(212,175,55,.15);border-bottom:1px solid rgba(212,175,55,.15);}
.steps-list{list-style:none;margin:0;padding:0;display:grid;gap:2rem;}
.step{display:flex;align-items:flex-start;gap:1.5rem;}
.step-number{flex-shrink:0;width:48px;height:48px;border-radius:50%;
  background:linear-gradient(135deg,var(--gold-light),var(--gold-dark));
  color:var(--black);font-family:var(--font-head);font-size:1.25rem;font-weight:700;
  display:flex;align-items:center;justify-content:center;}
.step-body{flex:1;}
.step-title{font-family:var(--font-head);font-size:1.1rem;color:var(--gold-light);margin:0 0 .4em;}
.step-desc{color:#cfcfcf;font-size:.95rem;line-height:1.65;margin:0;}
.steps-cta{text-align:center;margin-top:2.5rem;}
@media(min-width:768px){
  .steps-list{grid-template-columns:repeat(3,1fr);}
  .step{flex-direction:column;align-items:center;text-align:center;}
}

/* ── 16. Depoimentos — cards de review ───────────────────── */
.reviews-grid{display:grid;gap:1.5rem;}
.review-card{background:rgba(255,255,255,.04);border:1px solid rgba(212,175,55,.25);
  border-radius:12px;padding:1.5rem;}
.review-header{display:flex;align-items:center;gap:1rem;margin-bottom:1rem;}
.review-avatar{flex-shrink:0;width:44px;height:44px;border-radius:50%;
  background:linear-gradient(135deg,var(--gold-light),var(--gold-dark));
  display:flex;align-items:center;justify-content:center;
  color:var(--black);font-family:var(--font-head);font-weight:700;font-size:1.15rem;}
.review-meta{display:flex;flex-direction:column;gap:.25rem;}
.review-name{font-weight:600;color:var(--gold-light);font-size:.95rem;}
.review-stars{color:var(--gold);font-size:1rem;letter-spacing:.05em;}
.review-text{color:#cfcfcf;font-size:.9rem;line-height:1.65;margin:0;font-style:italic;}
@media(min-width:768px){
  .reviews-grid{grid-template-columns:repeat(2,1fr);}
}

/* ── 18. FAQ — accordion nativo <details>/<summary> ─────── */
#faq{background:rgba(212,175,55,.04);border-top:1px solid rgba(212,175,55,.15);
  border-bottom:1px solid rgba(212,175,55,.15);}
.faq-list{display:flex;flex-direction:column;gap:.75rem;max-width:860px;margin:0 auto;}
.faq-item{border:1px solid rgba(212,175,55,.25);border-radius:10px;overflow:hidden;
  transition:border-color .2s;}
.faq-item[open]{border-color:var(--gold);}
.faq-item:hover{border-color:rgba(212,175,55,.55);}
.faq-question{cursor:pointer;list-style:none;display:flex;align-items:center;
  justify-content:space-between;gap:1rem;padding:1.1rem 1.25rem;
  font-family:var(--font-head);font-size:1rem;font-weight:600;color:var(--gold-light);
  user-select:none;}
.faq-question::-webkit-details-marker{display:none;}
.faq-question::after{content:'▾';color:var(--gold);font-size:1.1rem;flex-shrink:0;
  display:inline-block;transition:transform .25s;}
details[open] .faq-question::after{transform:rotate(-180deg);}
.faq-question:focus-visible{outline:2px solid var(--gold);outline-offset:-2px;border-radius:10px;}
.faq-answer{padding:.25rem 1.25rem 1.25rem;color:#cfcfcf;font-size:.95rem;line-height:1.65;}
.faq-answer p{margin:0;}
.faq-answer a{color:var(--gold);}

/* ── 17. Localização — endereço + mapa ───────────────────── */
.location-wrap{display:grid;gap:2rem;}
.location-info{display:flex;flex-direction:column;gap:1.5rem;}
.location-address{font-style:normal;line-height:1.8;color:#cfcfcf;}
.location-address strong{color:var(--gold-light);}
.location-hours strong{display:block;color:var(--gold-light);font-family:var(--font-head);font-size:1.05rem;margin-bottom:.5rem;}
.location-hours ul{list-style:none;margin:0;padding:0;max-width:360px;}
.location-hours li{display:flex;justify-content:space-between;gap:1rem;padding:.35rem 0;
  border-bottom:1px solid rgba(212,175,55,.12);color:#cfcfcf;font-size:.92rem;}
.location-hours li:last-child{border-bottom:none;}
.location-hours li span:last-child{color:var(--white);font-weight:600;}
.location-actions{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;}
.btn-maps{display:inline-flex;align-items:center;min-height:44px;padding:.55rem 1.25rem;
  border-radius:999px;border:1px solid var(--gold);color:var(--gold);font-weight:600;
  font-size:.9rem;transition:background .2s,color .2s;}
.btn-maps:hover{background:var(--gold);color:var(--black);}
.location-map{width:100%;aspect-ratio:4/3;background:rgba(255,255,255,.04);
  border:1px solid rgba(212,175,55,.25);border-radius:12px;overflow:hidden;}
@media(min-width:768px){
  .location-wrap{grid-template-columns:1fr 1.5fr;align-items:start;}
  .location-map{aspect-ratio:16/9;}
}

/* ── 20. Navegação mobile — hambúrguer ─────────────────────── */
/* Botão hambúrguer: visível apenas no mobile */
.nav-toggle{
  display:flex;align-items:center;justify-content:center;
  width:48px;height:48px;padding:0;
  background:none;border:none;cursor:pointer;
  color:var(--white);border-radius:6px;flex-shrink:0;
  -webkit-tap-highlight-color:transparent;
}
.nav-toggle:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}

/* Ícone de dois estados: hambúrguer ↔ X (controlado via aria-expanded + CSS) */
.icon-close{display:none;}
.nav-toggle[aria-expanded="true"] .icon-open{display:none;}
.nav-toggle[aria-expanded="true"] .icon-close{display:block;}

/* Mobile: esconder nav por padrão; exibir como painel vertical com .is-open */
.site-nav{
  display:none;position:absolute;top:100%;left:0;right:0;
  flex-direction:column;gap:0;
  background:rgba(11,11,11,.97);
  padding:.5rem var(--space) 1rem;
  border-bottom:1px solid rgba(212,175,55,.25);
}
.site-nav.is-open{display:flex;}
.site-nav a{padding:.65rem 0;border-bottom:1px solid rgba(255,255,255,.06);}
.site-nav a:last-child{border-bottom:none;}

/* Esconder CTA do header no mobile — botão flutuante cobre essa função */
.site-header .btn-whatsapp{display:none;}

/* Desktop (≥768px): esconder toggle, restaurar nav horizontal */
@media(min-width:768px){
  .nav-toggle{display:none;}
  .site-nav{
    display:flex!important;
    flex-direction:row;flex-wrap:wrap;
    position:static;background:none;
    padding:0;border-bottom:none;gap:1rem;
  }
  .site-nav a{padding:0;border-bottom:none;}
  .site-header .btn-whatsapp{display:inline-flex;}
}