@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,wght@0,500;0,600;0,700;1,500;1,600&family=Work+Sans:wght@400;500;600;700;800&display=swap');

:root{
  --bg:#000000;
  --bg-alt:#0C0C0C;
  --card:#141414;
  --card-2:#181818;
  --gold:#CE9F41;
  --gold-light:#E4C177;
  --white:#FFFFFF;
  --muted:#B7B4AC;
  --muted-2:#8C897F;
  --line:rgba(255,255,255,0.12);
  --line-soft:rgba(255,255,255,0.07);
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Work Sans', sans-serif;
  color:var(--white);
  background:var(--bg);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.display{
  font-family:'Fraunces', serif;
  font-weight:600;
  letter-spacing:-0.01em;
  color:var(--white);
}
.eyebrow{
  font-family:'Work Sans', sans-serif;
  font-weight:700;
  font-size:0.72rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--gold);
}
a{color:inherit;}
img{max-width:100%; display:block;}
.wrap{max-width:1180px; margin:0 auto; padding:0 28px;}
button{font-family:inherit; cursor:pointer;}

/* ---------- NAV ---------- */
header.nav{
  position:sticky; top:0; z-index:40;
  background:rgba(0,0,0,0.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line-soft);
}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 28px;
}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none;}
.brand img{height:46px; width:46px; border-radius:50%;}
.brand-text{
  font-family:'Fraunces', serif; font-weight:700; font-size:1.1rem; color:var(--white);
}
.brand-text span{color:var(--gold);}
.nav-cta{display:flex; align-items:center; gap:14px;}
.nav-phone{
  color:var(--white); font-weight:600; font-size:0.9rem; display:none; text-decoration:none;
}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 22px; border-radius:3px; border:1.5px solid transparent;
  font-weight:700; font-size:0.88rem; text-decoration:none;
  transition:transform .15s ease, background .2s ease, border-color .2s ease, color .2s ease;
}
.btn-primary{background:var(--gold); color:#000;}
.btn-primary:hover{background:var(--gold-light); transform:translateY(-1px);}
.btn-ghost{background:transparent; color:var(--white); border-color:var(--line);}
.btn-ghost:hover{border-color:var(--gold); color:var(--gold);}

/* ---------- HERO (home) ---------- */
.hero{
  background:
    radial-gradient(ellipse at 20% -10%, rgba(206,159,65,0.14), transparent 55%),
    var(--bg);
  padding:72px 0 60px;
  position:relative; overflow:hidden;
  border-bottom:1px solid var(--line-soft);
}
.hero::after{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse at 50% 0%, black, transparent 70%);
  pointer-events:none;
}
.hero-inner{position:relative; z-index:1; text-align:center;}
.hero .eyebrow{margin-bottom:16px;}
.hero h1{
  font-size:clamp(2.1rem, 4.6vw, 3.3rem); line-height:1.1;
  max-width:760px; margin:0 auto 18px;
}
.hero h1 em{color:var(--gold); font-style:italic;}
.hero p.sub{
  max-width:560px; margin:0 auto 44px; color:var(--muted); font-size:1.05rem;
}

/* ---------- DOORS (home) ---------- */
.doors{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; max-width:1040px; margin:0 auto;}
.door{
  position:relative; display:block; text-decoration:none;
  background:linear-gradient(180deg, rgba(206,159,65,0.06), rgba(255,255,255,0.015));
  border:1.5px solid var(--line);
  border-radius:6px 6px 3px 3px;
  padding:26px 18px 22px; text-align:left; overflow:hidden;
  transition:transform .3s cubic-bezier(.2,.8,.2,1), border-color .3s ease, background .3s ease;
  transform-origin:left center;
}
.door::before{
  content:""; position:absolute; top:14px; right:14px;
  width:7px; height:7px; border-radius:50%; background:var(--gold); opacity:0.75;
}
.door-icon{width:34px; height:34px; margin-bottom:18px; color:var(--gold);}
.door h3{font-size:1.1rem; line-height:1.28; margin-bottom:10px; color:var(--white);}
.door p{color:var(--muted); font-size:0.87rem; margin-bottom:18px; min-height:58px;}
.door .door-btn{font-size:0.78rem; font-weight:700; color:var(--gold); display:inline-flex; align-items:center; gap:6px;}
.door .door-btn svg{width:13px; height:13px; transition:transform .2s ease;}
.door:hover{transform:perspective(800px) rotateY(-8deg) translateY(-2px); border-color:var(--gold); background:linear-gradient(180deg, rgba(206,159,65,0.12), rgba(255,255,255,0.015));}
.door:hover .door-btn svg{transform:translateX(3px);}

/* ---------- TRUST STRIP ---------- */
.trust{background:var(--bg-alt); border-bottom:1px solid var(--line-soft); padding:30px 0;}
.trust-inner{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; text-align:center;}
.trust-inner .num{font-family:'Fraunces', serif; font-weight:700; font-size:1.7rem; color:var(--gold);}
.trust-inner .label{font-size:0.78rem; color:var(--muted); margin-top:2px;}

/* ---------- GENERIC SECTIONS ---------- */
section.block{padding:80px 0;}
.block-head{max-width:640px; margin:0 auto 48px; text-align:center;}
.block-head .eyebrow{margin-bottom:12px;}
.block-head h2{font-size:clamp(1.6rem, 3vw, 2.2rem); line-height:1.18;}
.block-head p{color:var(--muted); margin-top:14px; font-size:1rem;}

/* ---------- TOPIC LANDING HERO (2-col: pitch + form) ---------- */
.topic-hero{padding:56px 0 84px; border-bottom:1px solid var(--line-soft);}
.topic-grid{display:grid; grid-template-columns:1.1fr 0.9fr; gap:48px; align-items:start;}
.topic-copy .eyebrow{margin-bottom:14px;}
.topic-copy h1{font-size:clamp(2rem,4vw,2.7rem); line-height:1.14; margin-bottom:18px;}
.topic-copy h1 em{color:var(--gold); font-style:italic;}
.topic-copy p.lead{color:var(--muted); font-size:1.05rem; margin-bottom:28px;}
.topic-copy ul{list-style:none; margin-bottom:10px;}
.topic-copy ul li{font-size:0.94rem; color:var(--muted); padding-left:22px; position:relative; margin-bottom:12px;}
.topic-copy ul li::before{content:"—"; position:absolute; left:0; color:var(--gold);}
.topic-copy .fine{font-size:0.76rem; color:var(--muted-2); margin-top:20px; line-height:1.5;}

/* ---------- FORM CARD ---------- */
.form-card{
  background:var(--card); border:1px solid var(--line);
  border-radius:8px; padding:32px 28px; position:sticky; top:96px;
}
.form-card h3{font-size:1.2rem; margin-bottom:6px;}
.form-card p.form-sub{color:var(--muted); font-size:0.88rem; margin-bottom:22px;}
.field{margin-bottom:14px;}
.field label{display:block; font-size:0.78rem; font-weight:600; color:var(--white); margin-bottom:6px;}
.field input, .field select{
  width:100%; padding:11px 13px; border:1.5px solid var(--line); border-radius:4px;
  font-family:inherit; font-size:0.92rem; background:#0A0A0A; color:var(--white);
}
.field input::placeholder{color:var(--muted-2);}
.field input:focus, .field select:focus{outline:none; border-color:var(--gold); background:#000;}
.form-card .btn-primary{width:100%; margin-top:6px; padding:13px 22px;}
.form-card .fine{font-size:0.72rem; color:var(--muted-2); margin-top:14px; text-align:center;}
.thankyou{display:none; text-align:center; padding:20px 4px 6px;}
.thankyou.show{display:block;}
.thankyou svg{width:50px; height:50px; color:var(--gold); margin:0 auto 16px;}
.thankyou h3{margin-bottom:10px;}
.thankyou p{color:var(--muted); font-size:0.92rem;}
.form-body.hide{display:none;}
.form-error{display:none; background:rgba(191,91,62,0.12); border:1px solid #BF5B3E; color:#E8998A; font-size:0.82rem; padding:10px 12px; border-radius:4px; margin-bottom:14px;}
.form-error.show{display:block;}

/* ---------- PATH DETAIL CARDS (home) ---------- */
.paths-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px;}
.path-card{background:var(--card); border:1px solid var(--line); border-left:3px solid var(--gold); border-radius:4px; padding:30px 28px;}
.path-card .eyebrow{margin-bottom:10px;}
.path-card h3{font-size:1.22rem; margin-bottom:12px;}
.path-card p.copy{color:var(--muted); font-size:0.93rem;}

/* ---------- TESTIMONIOS ---------- */
.testi-wrap{background:var(--bg-alt); padding:80px 0; border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft);}
.testi-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.testi{background:var(--card); border:1px solid var(--line); border-radius:4px; padding:26px 24px;}
.testi p{color:var(--muted); font-size:0.92rem; margin-bottom:16px; font-style:italic;}
.testi .who{color:var(--gold); font-weight:700; font-size:0.82rem;}
.testi .where{color:var(--muted-2); font-size:0.78rem;}

/* ---------- FOOTER ---------- */
footer{background:#000; padding:60px 0 26px; border-top:1px solid var(--line-soft);}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; padding-bottom:36px; border-bottom:1px solid var(--line-soft);}
footer h4{font-weight:700; font-size:0.82rem; letter-spacing:0.04em; text-transform:uppercase; color:var(--gold); margin-bottom:16px;}
footer p, footer li{color:var(--muted); font-size:0.9rem;}
footer ul{list-style:none;}
footer li{margin-bottom:8px;}
footer a{text-decoration:none;}
footer a:hover{color:var(--gold);}
.foot-bottom{padding-top:20px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:0.76rem; color:var(--muted-2);}

/* ---------- WHATSAPP FLOAT ---------- */
.wa-float{
  position:fixed; right:22px; bottom:22px; z-index:50;
  width:56px; height:56px; border-radius:50%; background:#2FA84F;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 24px rgba(0,0,0,0.5); color:#fff; text-decoration:none;
  transition:transform .2s ease;
}
.wa-float:hover{transform:scale(1.06);}
.wa-float svg{width:28px; height:28px;}

/* ---------- RESPONSIVE ---------- */
@media (min-width:640px){ .nav-phone{display:inline;} }
@media (max-width:960px){
  .topic-grid{grid-template-columns:1fr;}
  .form-card{position:static;}
  .doors{grid-template-columns:1fr 1fr;}
  .paths-grid{grid-template-columns:1fr;}
  .testi-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;}
  .trust-inner{grid-template-columns:1fr 1fr;}
  .door:hover{transform:translateY(-3px);}
}
@media (max-width:560px){
  .doors{grid-template-columns:1fr;}
  .nav-inner{padding:12px 18px;}
  .wrap{padding:0 18px;}
}
@media (prefers-reduced-motion:reduce){ *{transition:none !important; scroll-behavior:auto !important;} }
:focus-visible{outline:2px solid var(--gold); outline-offset:2px;}
