/* ==========================================================================
   Mulheres na Engenharia Moçambique — Folha de Estilos Personalizada
   Usada em conjunto com Tailwind CSS (utilitários) para tokens de marca,
   tipografia, padrões de capulana e componentes que o Tailwind não cobre.
   ========================================================================== */

:root{
  --rust:        #C24B1E;
  --rust-dark:   #952F13;
  --rust-deep:   #6E2410;
  --cream:       #F6EFE1;
  --cream-soft:  #FBF6EC;
  --ink:         #241A12;
  --ink-soft:    #4A392C;
  --gold:        #D9A441;
  --gold-soft:   #E8C77E;
  --teal:        #1F5C52;
  --teal-dark:   #143F38;
  --line:        #E4D5B8;
}

/* -------------------------------------------------------------------- */
/* Tipografia                                                            */
/* -------------------------------------------------------------------- */
html{ scroll-behavior:smooth; }

body{
  background:var(--cream);
  color:var(--ink);
  font-family:'Work Sans', sans-serif;
}

.font-display{
  font-family:'Big Shoulders Display', sans-serif;
  font-weight:800;
  letter-spacing:0.01em;
  text-transform:uppercase;
}

.font-mono{
  font-family:'Space Mono', monospace;
}

/* -------------------------------------------------------------------- */
/* Padrão de capulana — elemento assinatura, inspirado no lenço do logótipo */
/* -------------------------------------------------------------------- */
.capulana-strip{
  height:14px;
  width:100%;
  background-image:
    repeating-linear-gradient(45deg, var(--gold) 0, var(--gold) 3px, transparent 3px, transparent 9px),
    repeating-linear-gradient(-45deg, var(--teal) 0, var(--teal) 2px, transparent 2px, transparent 9px);
  background-color:var(--rust-dark);
}

.capulana-strip.thin{ height:8px; }

.capulana-bg{
  background-color:var(--rust);
  background-image:
    repeating-linear-gradient(45deg, rgba(246,239,225,0.08) 0, rgba(246,239,225,0.08) 2px, transparent 2px, transparent 16px),
    repeating-linear-gradient(-45deg, rgba(246,239,225,0.06) 0, rgba(246,239,225,0.06) 2px, transparent 2px, transparent 16px);
}

.grain{
  position:relative;
}
.grain::after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  opacity:0.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* -------------------------------------------------------------------- */
/* Engrenagem decorativa (motivo do logótipo)                            */
/* -------------------------------------------------------------------- */
.gear-mark{
  display:inline-block;
  width:1em; height:1em;
}

/* Divisor com corte diagonal, como tecido dobrado */
.fold-top{
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 92%);
}
.fold-bottom{
  clip-path: polygon(0 8%, 100% 0, 100% 100%, 0 100%);
}

/* -------------------------------------------------------------------- */
/* Navegação                                                             */
/* -------------------------------------------------------------------- */
.nav-link{
  position:relative;
  font-family:'Big Shoulders Display', sans-serif;
  font-weight:700;
  letter-spacing:0.04em;
  text-transform:uppercase;
  font-size:0.95rem;
  color:var(--ink);
  padding-bottom:4px;
}
.nav-link::after{
  content:"";
  position:absolute; left:0; right:100%; bottom:0;
  height:2px;
  background:var(--rust);
  transition:right .25s ease;
}
.nav-link:hover::after, .nav-link.active::after{ right:0; }
.nav-link.active{ color:var(--rust-dark); }

/* -------------------------------------------------------------------- */
/* Botões                                                                */
/* -------------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; gap:0.5rem;
  font-family:'Big Shoulders Display', sans-serif;
  font-weight:700; letter-spacing:0.03em; text-transform:uppercase;
  padding:0.85rem 1.6rem;
  border:2px solid transparent;
  transition:transform .15s ease, background-color .2s ease, color .2s ease, border-color .2s ease;
}
.btn:hover{ transform:translateY(-2px); }
.btn-primary{ background:var(--cream); color:var(--rust-dark); }
.btn-primary:hover{ background:var(--ink); color:var(--cream); }
.btn-outline{ border-color:var(--cream); color:var(--cream); }
.btn-outline:hover{ background:var(--cream); color:var(--rust-dark); }
.btn-dark{ background:var(--ink); color:var(--cream); }
.btn-dark:hover{ background:var(--rust); color:var(--cream); }

/* -------------------------------------------------------------------- */
/* Cartões                                                               */
/* -------------------------------------------------------------------- */
.card{
  background:var(--cream-soft);
  border:1px solid var(--line);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover{
  transform:translateY(-4px);
  box-shadow: 8px 8px 0 var(--rust);
  border-color:var(--rust);
}

.eyebrow{
  font-family:'Space Mono', monospace;
  font-size:0.75rem;
  letter-spacing:0.15em;
  text-transform:uppercase;
  color:var(--rust-dark);
}

/* -------------------------------------------------------------------- */
/* Silhueta decorativa (perfil com lenço) usada como marca de água       */
/* -------------------------------------------------------------------- */
.profile-mark{ opacity:0.08; }

/* -------------------------------------------------------------------- */
/* Scrollbar discreta                                                    */
/* -------------------------------------------------------------------- */
::selection{ background:var(--gold); color:var(--ink); }

/* -------------------------------------------------------------------- */
/* Utilitários de animação (respeitando prefers-reduced-motion)          */
/* -------------------------------------------------------------------- */
.reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .6s ease, transform .6s ease;
}
.reveal.is-visible{
  opacity:1;
  transform:translateY(0);
}
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
}

/* -------------------------------------------------------------------- */
/* Formulários                                                           */
/* -------------------------------------------------------------------- */
.field{
  width:100%;
  background:var(--cream-soft);
  border:1.5px solid var(--line);
  padding:0.85rem 1rem;
  color:var(--ink);
  font-family:'Work Sans', sans-serif;
}
.field:focus{
  outline:none;
  border-color:var(--rust);
  background:#fff;
}
.field-label{
  font-family:'Space Mono', monospace;
  font-size:0.72rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--ink-soft);
  display:block;
  margin-bottom:0.4rem;
}

/* Foco visível para acessibilidade */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:3px solid var(--gold);
  outline-offset:2px;
}

/* Marcador em engrenagem para listas */
.gear-bullet{
  flex:none;
  width:1.4rem; height:1.4rem;
  color:var(--rust);
}

/* Rodapé */
footer a:hover{ color:var(--gold-soft); }

/* Logo circular no cabeçalho */
.logo-badge{
  width:52px; height:52px;
  border-radius:9999px;
  overflow:hidden;
  border:2px solid var(--ink);
  flex:none;
}
.logo-badge img{ width:100%; height:100%; object-fit:cover; transform:scale(1.35); }