/* ═══════════════════════════════════════
   CASARUMA — SHARED DESIGN SYSTEM
   ═══════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600&display=swap');

:root {
  --ink:     #181816;
  --ink2:    #242420;
  --warm:    #FAF8F4;
  --cream:   #F2EDE4;
  --cream2:  #E6DDD2;
  --gold:    #B8924A;
  --gold2:   #D4AC6A;
  --brown:   #7A5F4E;
  --muted:   #6A6460;
  --muted2:  #9A9490;
  --border:  rgba(122,95,78,.12);
  --border2: rgba(122,95,78,.24);
  --wa:      #25D366;
  --sh1:     0 2px 30px rgba(24,24,22,.07);
  --sh2:     0 8px 50px rgba(24,24,22,.13);
  --r:       4px;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; font-size:16px; }
body {
  font-family:'DM Sans',sans-serif;
  background:var(--warm);
  color:var(--ink);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img { max-width:100%; display:block; }
a { text-decoration:none; color:inherit; }
button { font-family:'DM Sans',sans-serif; cursor:pointer; border:none; }

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width:5px; }
::-webkit-scrollbar-track { background:var(--cream); }
::-webkit-scrollbar-thumb { background:var(--brown); border-radius:3px; }

/* ── TYPOGRAPHY ── */
h1,h2,h3,h4 { font-family:'Cormorant Garamond',serif; font-weight:400; line-height:1.12; }
h1 { font-size:clamp(2.8rem,5vw,5rem); }
h2 { font-size:clamp(2rem,3.5vw,3rem); }
h3 { font-size:clamp(1.3rem,2vw,1.7rem); }
h4 { font-size:1.2rem; }
em { font-style:italic; color:var(--brown); }
.label {
  display:flex; align-items:center; gap:.7rem;
  font-size:.63rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold); font-weight:500; margin-bottom:.8rem;
}
.label::before { content:''; width:2rem; height:1px; background:linear-gradient(to right,var(--gold),transparent); flex-shrink:0; }
p.lead { font-size:.98rem; color:var(--muted); line-height:1.82; font-weight:300; }

/* ── BUTTONS ── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:.9rem 2rem; border-radius:var(--r);
  font-size:.8rem; font-weight:500; letter-spacing:.06em; text-transform:uppercase;
  transition:all .25s; border:none; white-space:nowrap;
}
.btn svg { width:17px; height:17px; fill:currentColor; flex-shrink:0; }
.btn-dark  { background:var(--ink);   color:var(--warm); }
.btn-dark:hover  { background:var(--brown); transform:translateY(-2px); box-shadow:var(--sh2); }
.btn-gold  { background:var(--gold);  color:#fff; }
.btn-gold:hover  { background:var(--brown); transform:translateY(-2px); }
.btn-outline { background:transparent; color:var(--ink); border:1px solid var(--border2); }
.btn-outline:hover { border-color:var(--brown); color:var(--brown); }
.btn-wa    { background:var(--wa);    color:#fff; }
.btn-wa:hover    { background:#1fba58; transform:translateY(-2px); box-shadow:0 8px 25px rgba(37,211,102,.35); }
.btn-sm    { padding:.6rem 1.3rem; font-size:.73rem; }

/* ── WA FLOAT ── */
.wa-float {
  position:fixed; bottom:2rem; right:2rem; z-index:999;
  display:flex; align-items:center; gap:.65rem;
  background:var(--wa); color:#fff;
  padding:.85rem 1.5rem; border-radius:50px;
  font-size:.8rem; font-weight:500;
  box-shadow:0 6px 24px rgba(37,211,102,.45);
  transition:all .3s; animation:wap 2.5s infinite;
}
.wa-float:hover { transform:translateY(-3px); box-shadow:0 10px 32px rgba(37,211,102,.6); }
.wa-float svg { width:19px; height:19px; fill:#fff; flex-shrink:0; }
@keyframes wap {
  0%,100% { box-shadow:0 6px 24px rgba(37,211,102,.45); }
  50%      { box-shadow:0 6px 32px rgba(37,211,102,.7); }
}

/* ── NAV ── */
nav {
  position:fixed; top:0; width:100%; z-index:200;
  padding:1.2rem 4rem;
  display:flex; align-items:center; justify-content:space-between;
  transition:all .4s;
}
nav.solid {
  background:rgba(250,248,244,.97);
  backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
  padding:.85rem 4rem;
  box-shadow:0 2px 20px rgba(24,24,22,.06);
}
.nav-logo { font-family:'Cormorant Garamond',serif; font-size:1.8rem; font-weight:500; letter-spacing:.06em; color:var(--ink); }
.nav-logo span { color:var(--gold); }
.nav-logo.white { color:#fff; }
.nav-logo.white span { color:var(--gold2); }
.nav-links { display:flex; align-items:center; gap:1.8rem; list-style:none; }
.nav-links a { font-size:.73rem; font-weight:400; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); transition:color .25s; }
.nav-links a:hover, .nav-links a.active { color:var(--ink); }
.nav-links a.active { border-bottom:1px solid var(--gold); padding-bottom:.15rem; }
.nav-dark .nav-links a { color:rgba(255,255,255,.55); }
.nav-dark .nav-links a:hover { color:#fff; }
.nav-cta-btn { background:var(--ink)!important; color:var(--warm)!important; padding:.52rem 1.3rem; border-radius:var(--r); font-size:.72rem!important; }
.nav-cta-btn:hover { background:var(--brown)!important; }
.nav-wa-btn { background:var(--wa); color:#fff!important; padding:.5rem 1.1rem; border-radius:50px; font-size:.72rem!important; display:flex; align-items:center; gap:.4rem; }
.nav-wa-btn svg { width:12px; height:12px; fill:#fff; }
.ham { display:none; flex-direction:column; gap:5px; background:none; border:none; padding:5px; }
.ham span { display:block; width:22px; height:1.5px; background:var(--ink); transition:all .3s; }
.ham.white span { background:#fff; }

/* ── MOBILE OVERLAY MENU ── */
.mob-overlay {
  display:none; position:fixed; inset:0;
  background:var(--warm); z-index:300;
  flex-direction:column; align-items:center; justify-content:center; gap:2.2rem;
}
.mob-overlay.open { display:flex; }
.mob-overlay a { font-family:'Cormorant Garamond',serif; font-size:2.2rem; color:var(--ink); transition:color .2s; }
.mob-overlay a:hover { color:var(--brown); }
.mob-x { position:absolute; top:1.5rem; right:1.5rem; background:none; border:none; font-size:1.5rem; color:var(--muted); }

/* ── SECTION BASE ── */
.sec { padding:7rem 4rem; }
.sec-sm { padding:5rem 4rem; }
.sec-dark { background:var(--ink); }
.sec-cream { background:var(--cream); }
.sec-cream2 { background:var(--cream2); }
.sec-head { margin-bottom:3.5rem; }
.sec-head h2 { margin-bottom:1.2rem; }
.max-w { max-width:1200px; margin:0 auto; }

/* ── FORM ELEMENTS ── */
.field { margin-bottom:1.2rem; }
.field-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-bottom:1.2rem; }
.lbl { font-size:.63rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); display:block; margin-bottom:.45rem; font-weight:500; }
.inp {
  width:100%; padding:.88rem 1.1rem;
  border:1px solid var(--border); background:#fff;
  font-family:'DM Sans',sans-serif; font-size:.88rem; color:var(--ink);
  outline:none; border-radius:var(--r); transition:border-color .25s, box-shadow .25s;
}
.inp:focus { border-color:var(--brown); box-shadow:0 0 0 3px rgba(122,95,78,.08); }
.sel {
  width:100%; padding:.88rem 1.1rem;
  border:1px solid var(--border); background:#fff;
  font-family:'DM Sans',sans-serif; font-size:.88rem; color:var(--ink);
  outline:none; border-radius:var(--r); appearance:none; cursor:pointer;
  transition:border-color .25s;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236A6460' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 1rem center;
  padding-right:2.5rem;
}
.sel:focus { border-color:var(--brown); }
.upload-zone {
  border:2px dashed var(--cream2); padding:2rem; text-align:center;
  background:#fff; cursor:pointer; border-radius:var(--r);
  transition:all .3s; position:relative;
}
.upload-zone:hover { border-color:var(--brown); background:rgba(122,95,78,.02); }
.upload-zone input { position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; height:100%; }
.upload-icon { font-size:1.8rem; margin-bottom:.5rem; }
.upload-text { font-size:.82rem; color:var(--muted); }
.upload-hint { font-size:.68rem; color:var(--muted2); margin-top:.3rem; }
.file-names { margin-top:.4rem; font-size:.72rem; color:var(--brown); }
.btn-submit {
  width:100%; background:var(--ink); color:var(--warm);
  padding:1.05rem; border:none;
  font-family:'DM Sans',sans-serif; font-size:.8rem; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase;
  border-radius:var(--r); transition:background .3s; margin-top:.5rem;
}
.btn-submit:hover { background:var(--brown); }
.btn-submit:disabled { opacity:.6; cursor:not-allowed; }
.form-or {
  text-align:center; margin:.9rem 0; font-size:.7rem; color:var(--muted2);
  position:relative;
}
.form-or::before,.form-or::after {
  content:''; position:absolute; top:50%; width:43%; height:1px; background:var(--border);
}
.form-or::before { left:0; } .form-or::after { right:0; }
.form-note { font-size:.65rem; color:var(--muted2); text-align:center; margin-top:.8rem; }

/* ── TRUST BAR ── */
.trust-bar {
  background:var(--ink2); padding:.9rem 4rem;
  display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap;
}
.trust-lbl { font-size:.58rem; color:rgba(255,255,255,.3); letter-spacing:.2em; text-transform:uppercase; white-space:nowrap; }
.trust-list { display:flex; gap:2.2rem; align-items:center; flex-wrap:wrap; }
.trust-item { font-family:'Cormorant Garamond',serif; font-size:.92rem; color:rgba(255,255,255,.5); }
.trust-dot { color:var(--gold); opacity:.4; }

/* ── FOOTER SHARED ── */
.footer-main { background:var(--ink); padding:5rem 4rem 2.5rem; }
.footer-grid {
  display:grid; grid-template-columns:2.5fr 1fr 1fr 1fr; gap:3.5rem;
  padding-bottom:3rem; border-bottom:1px solid rgba(255,255,255,.07); margin-bottom:2.5rem;
}
.footer-logo { font-family:'Cormorant Garamond',serif; font-size:1.75rem; font-weight:500; letter-spacing:.06em; color:#fff; display:block; margin-bottom:.9rem; }
.footer-logo span { color:var(--gold); }
.footer-desc { font-size:.8rem; color:rgba(255,255,255,.3); line-height:1.75; font-weight:300; }
.footer-credit { margin-top:.7rem; font-size:.68rem; color:rgba(255,255,255,.18); }
.footer-wa { display:inline-flex; align-items:center; gap:.5rem; background:var(--wa); color:#fff; padding:.55rem 1.2rem; border-radius:50px; font-size:.72rem; margin-top:1.1rem; }
.footer-col-t { font-size:.6rem; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.3); margin-bottom:1.3rem; font-weight:500; }
.footer-links { list-style:none; display:flex; flex-direction:column; gap:.72rem; }
.footer-links a { font-size:.8rem; color:rgba(255,255,255,.35); transition:color .25s; font-weight:300; }
.footer-links a:hover { color:var(--gold); }
.footer-bottom { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; }
.footer-copy { font-size:.7rem; color:rgba(255,255,255,.2); }
.footer-copy span { color:var(--gold); }
.footer-soc { display:flex; gap:1.5rem; }
.footer-soc a { font-size:.7rem; color:rgba(255,255,255,.2); letter-spacing:.1em; text-transform:uppercase; transition:color .25s; }
.footer-soc a:hover { color:var(--gold); }

/* ── MODAL SUCCESS ── */
.modal-ov {
  position:fixed; inset:0; background:rgba(24,24,22,.78); z-index:1000;
  display:none; align-items:center; justify-content:center; backdrop-filter:blur(6px);
}
.modal-ov.show { display:flex; }
.modal-box {
  background:var(--warm); padding:3rem; max-width:460px; width:92%;
  border-radius:6px; text-align:center; position:relative;
  box-shadow:0 30px 80px rgba(24,24,22,.25);
  animation:modalIn .3s ease;
}
@keyframes modalIn { from{opacity:0;transform:scale(.95);}to{opacity:1;transform:scale(1);} }
.modal-x { position:absolute; top:1.2rem; right:1.4rem; background:none; border:none; font-size:1.5rem; color:var(--muted2); }
.modal-ico { font-size:3rem; margin-bottom:1rem; }
.modal-t { font-family:'Cormorant Garamond',serif; font-size:1.85rem; font-weight:500; color:var(--ink); margin-bottom:.8rem; }
.modal-d { font-size:.86rem; color:var(--muted); line-height:1.75; margin-bottom:2rem; font-weight:300; }

/* ── ANIMATIONS ── */
@keyframes fadeUp { from{opacity:0;transform:translateY(22px);}to{opacity:1;transform:translateY(0);} }
.fade-up { opacity:0; animation:fadeUp .8s ease forwards; }
.d1 { animation-delay:.1s; } .d2 { animation-delay:.2s; } .d3 { animation-delay:.3s; } .d4 { animation-delay:.45s; }

/* ── WA SVG PATH (reusable) ── */
.wa-svg { width:18px; height:18px; fill:currentColor; }

/* ══════════════════════════════════════
   MOBILE RESPONSIVE
   ══════════════════════════════════════ */
@media(max-width:900px) {
  nav { padding:1rem 1.5rem; }
  nav.solid { padding:.8rem 1.5rem; }
  .nav-links { display:none; }
  .ham { display:flex; }
  .sec { padding:4.5rem 1.5rem; }
  .sec-sm { padding:3.5rem 1.5rem; }
  .trust-bar { padding:.8rem 1.5rem; }
  .trust-list { gap:1.2rem; }
  .field-row { grid-template-columns:1fr; }
  .footer-main { padding:3.5rem 1.5rem 2rem; }
  .footer-grid { grid-template-columns:1fr 1fr; gap:2.5rem; }
  .wa-float span { display:none; }
  .wa-float { padding:.88rem; border-radius:50%; }
}