/* AFRIMA — afrimanda.com — estilos compartidos (v2, optimizado) */

:root{
  --forest-deep:#122619;
  --forest:#1B3227;
  --clay:#7A4429;
  --clay-dark:#5B3420;
  --gold:#C6A153;
  --gold-soft:#D9BE85;
  --paper:#F3ECDD;
  --paper-dim:#E7DAC0;
  --ink:#241A12;
  --line: rgba(122,68,41,0.25);
  --max: 1180px;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background: var(--forest-deep);
  color: var(--ink);
  font-family:'Work Sans', sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.display{
  font-family:'Fraunces', serif;
  font-weight:600;
  line-height:1.1;
  letter-spacing:-0.01em;
  color: var(--clay-dark);
}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
.wrap{max-width:var(--max); margin:0 auto; padding:0 32px;}

header.nav{
  position: sticky; top:0; z-index:80;
  background: var(--forest-deep);
  border-bottom: 1px solid rgba(198,161,83,0.3);
}
.nav-inner{
  max-width: var(--max); margin:0 auto;
  padding:18px 32px;
  display:flex; align-items:center; justify-content:space-between;
}
.wordmark{
  font-family:'Fraunces', serif; font-weight:600; font-size:21px;
  color: var(--paper);
}
.wordmark .dom{color: var(--gold-soft); font-weight:400;}
nav.links{display:flex; align-items:center; gap:30px; font-size:14.5px;}
nav.links a{
  color: var(--paper-dim);
  position:relative; padding-bottom:4px;
  transition:color .2s ease;
}
nav.links a.active{color: var(--paper); border-bottom:1px solid var(--gold);}
nav.links a:hover{color: var(--gold-soft);}
.whatsapp-btn{
  display:flex; align-items:center; gap:8px;
  background: #2FA86B;
  color:#fff !important;
  padding:10px 18px;
  border-radius: 999px;
  font-size:14px;
  font-weight:500;
}
.whatsapp-btn:hover{background:#279159;}
.menu-toggle{display:none;}

.page-bg{
  position:relative;
  min-height: 100vh;
  background-image:
    linear-gradient(180deg, rgba(18,38,25,0.55), rgba(18,38,25,0.86)),
    url('hero.jpg');
  background-size: cover;
  background-position: center 30%;
  background-attachment: fixed;
  padding: 70px 24px 90px;
  display:flex;
  align-items:flex-start;
  justify-content:center;
}
.page-bg.short{min-height:auto; padding-bottom:70px;}

.page-bg::before, .page-bg::after{
  content:"";
  position:absolute; top:0; bottom:0; width:56px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='56' height='56'><rect width='56' height='56' fill='%23F1EADA'/><path d='M28 4 L52 28 L28 52 L4 28 Z' fill='none' stroke='%237A4429' stroke-width='2'/><path d='M28 15 L41 28 L28 41 L15 28 Z' fill='%231B3227'/></svg>");
  background-repeat: repeat-y;
  opacity:0.9;
  display:none;
}
.page-bg::before{left:0;}
.page-bg::after{right:0;}
@media(min-width:1040px){
  .page-bg::before, .page-bg::after{display:block;}
}

.card{
  background: var(--paper);
  border-radius: 26px;
  padding: 48px 56px;
  max-width: 980px;
  width:100%;
  box-shadow: 0 30px 70px rgba(0,0,0,0.35);
}
.card.wide{max-width: 1080px;}
.card .eyebrow{
  font-size:13px; letter-spacing:0.1em; color: var(--forest);
  font-weight:600; margin-bottom:10px;
}
.card h1, .card h2{
  font-size: clamp(28px, 4vw, 42px);
}
.card .sub{
  margin-top:10px;
  color: var(--clay);
  font-size:15.5px;
}
.card .body-text{
  margin-top:22px;
  color:#3A2C20;
  font-size:16px;
  font-weight:400;
  max-width: 74ch;
}
.card .body-text + .body-text{margin-top:14px;}

.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 26px;
  font-size:14.5px;
  font-weight:500;
  border-radius: 999px;
  border:1px solid var(--clay);
  color: var(--clay-dark);
  background: transparent;
  cursor:pointer;
  transition: background .2s ease, color .2s ease;
}
.btn:hover{background: var(--clay); color:#fff;}
.btn-solid{background: var(--clay); color:#fff;}
.btn-solid:hover{background: var(--clay-dark);}
.btn-gold{border-color: var(--gold); color: var(--clay-dark);}
.btn-gold:hover{background: var(--gold); color: var(--ink);}
.pill{
  display:inline-flex; align-items:center; gap:8px;
  background: var(--forest);
  color: var(--paper);
  padding:10px 20px;
  border-radius:999px;
  font-size:13.5px;
  font-weight:600;
}

footer.site{
  background: var(--forest);
  color: var(--paper-dim);
  padding: 20px 0;
  text-align:center;
  font-size:13.5px;
  border-top: 1px solid rgba(198,161,83,0.25);
}

@media (max-width: 860px){
  nav.links{
    position:fixed; top:60px; left:0; right:0;
    background: var(--forest-deep);
    flex-direction:column; align-items:flex-start;
    padding:20px 32px; gap:18px;
    border-bottom:1px solid rgba(198,161,83,0.3);
    display:none;
  }
  nav.links.open{display:flex;}
  .menu-toggle{
    display:block; background:none; border:none; cursor:pointer;
    width:24px; height:16px; position:relative;
  }
  .menu-toggle span{position:absolute; left:0; right:0; height:1px; background:var(--paper);}
  .menu-toggle span:nth-child(1){top:0;}
  .menu-toggle span:nth-child(2){top:7px;}
  .menu-toggle span:nth-child(3){top:14px;}
  .nav-right{display:flex; align-items:center; gap:16px;}
  .card{padding:32px 24px;}
  .page-bg{
    background-attachment: scroll;
    background-position: center 20%;
  }
}