/* ============================================
   LIKAN LAB — style.css (VERSÃO LIMPA E FINAL)
   Brutalista + efeitos leves + theme transition
   ============================================ */

/* Reset e Base */
*{ margin:0; padding:0; box-sizing:border-box; }

html{ scroll-behavior:smooth; }

:root{
  --accent:#B6002C;
  --accent-dark:#9B0025;
  --paper:#f4f2ee;
  --text:#000;
  --muted:#222;
  --header-offset:120px; /* se ficar escondendo conteúdo, suba para 140px */
}

body{
  font-family:'Montserrat',sans-serif;
  line-height:1.6;
  color:var(--text);
  background:#fff;
  overflow-x:hidden;

  /* transição de tema (JS aplica .theme-portfolio no body) */
  transition: background-color .22s ease, color .22s ease;
}

.container{
  max-width:1200px;
  margin:0 auto;
  padding:0 20px;
}

/* ============================================
   HEADER FIXO (Brutal)
   ============================================ */
.header-fixed{
  position:fixed;
  top:0; left:0; right:0;
  z-index:1000;

  background: rgba(244, 242, 238, 0.98);
  padding:14px 0;
  border-bottom:3px solid #000;
}

.header-fixed::before{
  content:"";
  position:absolute;
  top:0; left:0;
  width:100%;
  height:10px;
  background:#000;
}

.header-content{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:18px;
}

.brand{
  display:inline-flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color:#000;
}

.logo-img{
  height:38px;
  width:auto;
}

.brand-name{
  font-weight:900;
  letter-spacing:-0.02em;
  text-transform:uppercase;
  font-size:24px;
  line-height:1;
}

/* só aparece no desktop/tablet */
@media (max-width:767px){
  .brand-name{ display:none; }
}

/* Navegação */
.main-nav{
  display:flex;
  align-items:center;
  gap:20px;
}

.nav-links{
  list-style:none;
  display:flex;
  gap:25px;
  margin:0;
  padding:0;
}

.nav-links a{
  color:#000;
  font-weight:800;
  letter-spacing:.01em;
  text-decoration:none;
  border-bottom:2px solid transparent;
  padding-bottom:2px;
  transition:border-bottom-color .2s ease;
}

.nav-links a:hover{
  border-bottom-color:#000;
}

/* CTA do header */
.btn-cta-header{
  display:inline-flex;
  align-items:center;
  gap:10px;

  background: var(--accent);
  color:#fff !important;
  text-decoration:none !important;

  padding:12px 18px;
  border-radius:10px;
  font-weight:900;
  font-size:14px;

  border:2px solid #000;
  box-shadow:8px 8px 0 #000;

  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

.btn-cta-header:hover{
  background:var(--accent-dark);
  transform: translate(2px,2px);
  box-shadow:6px 6px 0 #000;
}

/* Toggle (mobile) */
.menu-toggle{
  display:none;
  cursor:pointer;
  border:2px solid #000;
  padding:8px;
  align-items:center;
  justify-content:center;
}

.menu-toggle svg{
  width:22px;
  height:22px;
  stroke:#000;
}

/* ============================================
   HERO (papel + brutal)
   ============================================ */
.hero{
  min-height:100vh;
  display:flex;
  align-items:center;
  padding: var(--header-offset) 0 70px;
  background: var(--paper);
  position:relative;
  overflow:hidden;
  isolation:isolate;
}

.hero::before{
  content:"";
  position:absolute;
  top:0; left:0;
  width:100%;
  height:14px;
  background:var(--accent);
  z-index:2;
}

.hero::after{
  content:"";
  position:absolute;
  inset:0;
  background-image:url("/assets/images/Paper-Texture.webp");
  background-repeat:repeat;
  background-size:700px;
  opacity:1;
  pointer-events:none;
  z-index:0;
}

.hero .container{
  position:relative;
  display:flex;
  align-items:flex-start;
  justify-content:flex-start;
  z-index:3;
}

.hero-content{
  text-align:left;
  max-width:1120px;
  width:100%;
  position:relative;
  z-index:3;
}

/* kicker */
.hero-kicker{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:18px;
  opacity:0;
  animation: fadeInUp 1s ease forwards;
}

.hero-kicker-line{
  width:64px;
  height:3px;
  background:var(--text);
  display:inline-block;
}

.hero-kicker-text{
  font-size:.95rem;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:var(--text);
  font-weight:800;
}

/* title */
.hero-title{
  font-family:"Arial Black","Helvetica Neue",Helvetica,Arial,system-ui,-apple-system,sans-serif;
  font-size: clamp(3rem, 5.3vw, 5rem);
  font-weight:900;
  margin-bottom:26px;
  line-height:1.10;
  letter-spacing:-0.02em;
  color:var(--text);

  opacity:0;
  animation: fadeInUp 1s ease .15s forwards;
}

.hero-accent{
  display:inline-block;
  background:var(--accent);
  color:#fff;
  padding:0.02em 0.18em 0.03em;
  border-radius:8px;
  transform: translateY(0.04em);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.hero-subtitle{
  max-width:66ch;
  font-size:1.2rem;
  font-weight:400;
  margin-bottom:25px;
  color:var(--muted);

  opacity:0;
  animation: fadeInUp 1s ease .35s forwards;
}

/* bullets */
.hero-bullets{
  display:flex;
  flex-wrap:wrap;
  gap:10px 14px;
  list-style:none;
  margin:0 0 26px 0;
  padding:0;

  opacity:0;
  animation: fadeInUp 1s ease .48s forwards;
}

.hero-bullets li{
  font-weight:800;
  font-size:.95rem;
  letter-spacing:.02em;
  color:var(--text);
  border:2px solid #000;
  border-radius:999px;
  padding:8px 12px;
  background:#fff;
}

/* actions */
.hero-actions{
  display:flex;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
}

.hero a.btn-cta-primary{
  display:inline-flex;
  align-items:center;
  gap:10px;

  background:var(--accent);
  color:#fff !important;
  text-decoration:none !important;

  padding:16px 26px;
  font-weight:800;
  font-size:1.05rem;
  line-height:1;

  border:2px solid #000;
  border-radius:10px;
  box-shadow:10px 10px 0 #000;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;

  opacity:0;
  animation: fadeInUp 1s ease .62s forwards;
  white-space:nowrap;
}

.hero a.btn-cta-primary:hover{
  background:var(--accent-dark);
  transform: translate(3px,3px);
  box-shadow:7px 7px 0 #000;
}

.hero a.btn-cta-primary svg{
  width:18px;
  height:18px;
  stroke:#fff !important;
}

/* secondary link */
.btn-cta-secondary{
  font-weight:900;
  letter-spacing:.02em;
  text-decoration:none;
  color:#000;
  border-bottom:3px solid #000;
  padding-bottom:3px;
  transition: transform .2s ease, opacity .2s ease;

  opacity:0;
  animation: fadeInUp 1s ease .70s forwards;
}

.btn-cta-secondary:hover{
  transform: translateY(-1px);
  opacity:.85;
}

/* stamp */
.hero-stamp{
  display:inline-flex;
  flex-direction:column;
  gap:4px;

  padding:10px 12px;
  border:2px solid #000;
  background:#fff;

  transform: rotate(-3deg);
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:.75rem;

  opacity:0;
  animation: fadeInUp 1s ease .80s forwards;
}

/* shapes */
.hero-visual{
  position:absolute;
  top:50%;
  right:-180px;
  transform: translateY(-50%);
  pointer-events:none;
  z-index:1;
}

.hero-shape{
  width:420px;
  height:420px;
  background:var(--accent);
  border-radius:24px;
  opacity:.08;
  animation: float 7s ease-in-out infinite;
  transform: rotate(8deg);
}

.hero-shape--2{
  position:absolute;
  top:70px;
  left:-70px;
  width:260px;
  height:260px;
  background:#000;
  border-radius:18px;
  opacity:.06;
  animation: float 9s ease-in-out infinite reverse;
}

/* HERO responsivo */
@media (max-width:900px){
  :root{ --header-offset:130px; }

  .hero{
    min-height:auto;
    padding: var(--header-offset) 0 55px;
  }

  .hero-visual{ display:none; }

  .hero-title{ font-size: clamp(2.6rem, 10vw, 3.3rem); }
  .hero-subtitle{ font-size:1.05rem; }

  .hero-bullets li{
    font-size:.9rem;
    padding:7px 11px;
  }

  .hero a.btn-cta-primary{
    width:100%;
    justify-content:center;
  }
}

/* ============================================
   SEÇÕES GERAIS
   ============================================ */
.servicos,
.processo,
.diferencial{
  padding:90px 0;
}

.section-header{
  text-align:left;
  margin-bottom:44px;
}

.section-header h2{
  font-size:2.6rem;
  font-weight:900;
  margin-bottom:10px;
  color:#000;
  letter-spacing:-0.02em;
}

.section-header p{
  font-size:1.05rem;
  color:#222;
  max-width:72ch;
  margin:0;
  line-height:1.6;
}

.section-header--brutal h2{
  display:inline-block;
  border-bottom:6px solid #000;
  padding-bottom:6px;
}

/* ============================================
   SERVIÇOS (Brutal)
   ============================================ */
.servicos--brutal{
  background:#fff;
}

.servicos-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:22px;
}

@media (min-width:900px){
  .servicos-grid--brutal{
    grid-template-columns: repeat(4, 1fr);
    gap:18px;
    align-items:stretch;
  }
}

.servico-card{
  background:#fff;
  padding:30px 22px 22px;
  border-radius:10px;
  text-align:left;
  border:3px solid #000;
  position:relative;
  overflow:hidden;
  transition: transform .15s ease, box-shadow .15s ease;
}

.servico-card--brutal{
  box-shadow:10px 10px 0 #000;
}

.servico-card--brutal:hover{
  transform: translate(3px,3px);
  box-shadow:7px 7px 0 #000;
}

.servico-icon{
  width:56px;
  height:56px;
  background:#fff;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 0 16px;
  border:3px solid #000;
  box-shadow:6px 6px 0 #000;
}

.servico-icon svg{
  width:26px;
  height:26px;
  stroke:var(--accent);
}

.servico-card h3{
  font-size:1.35rem;
  font-weight:900;
  margin-bottom:10px;
  color:#000;
  letter-spacing:-0.01em;
}

.servico-card p{
  font-size:1rem;
  color:#222;
  margin-bottom:16px;
  line-height:1.55;
  max-width:36ch;
}

.servico-card ul{
  list-style:none;
  padding:0;
  margin:0;
}

.servico-card ul li{
  padding:7px 0;
  color:#111;
  font-size:.95rem;
  position:relative;
  padding-left:26px;
  font-weight:700;
}

.servico-card ul li::before{
  content:"";
  width:12px;
  height:12px;
  background:var(--accent);
  border:2px solid #000;
  position:absolute;
  left:0;
  top:11px;
}

/* quebrinhas leves (opcional) */
@media (min-width:900px){
  .servico-card--brutal:nth-child(2){ transform: translateY(-10px); }
  .servico-card--brutal:nth-child(4){ transform: translateY(8px); }

  .servico-card--brutal:nth-child(2):hover,
  .servico-card--brutal:nth-child(4):hover{
    transform: translate(3px,3px);
  }
}

/* ============================================
   PORTFÓLIO (Brutal)
   IMPORTANTE: aqui o fundo é "transparente"
   para deixar o BODY pintar a transição.
   ============================================ */
.portfolio{
  padding:90px 0;
  background: transparent; /* <- chave para ver a transição */

  position:relative;
  overflow:hidden;
}

.portfolio::before{
  content:"";
  position:absolute;
  top:0; left:0;
  width:100%;
  height:14px;
  background:#000;
}

.portfolio .section-header h2{

  display:inline-block;
  border-bottom:6px solid #000;
  padding-bottom:6px;
}

.portfolio .section-header p{
  color: rgba(255,255,255,0.92);
}

.portfolio-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:18px;
}

@media (min-width:900px){
  .portfolio-grid{
    grid-template-columns: repeat(3, 1fr);
    gap:18px;
    align-items:stretch;
  }
}

.portfolio-item{
  text-decoration:none;
  color:#000;
  background:#fff;
  border:3px solid #000;
  border-radius:0;
  box-shadow:10px 10px 0 #000;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition: transform .15s ease, box-shadow .15s ease;
  position:relative;
}

.portfolio-item:hover{
  transform: translate(3px,3px);
  box-shadow:7px 7px 0 #000;
}

.portfolio-item img{
  width:100%;
  height:260px;
  object-fit:cover;
  display:block;
}

.portfolio-caption{
  padding:18px 16px;
  background:#fff;
  border-top:3px solid #000;
}

.portfolio-item h3{
  margin:0;
  font-size:1.45rem;
  font-weight:900;
  letter-spacing:-0.01em;
  color:#000;
}

.portfolio-meta{
  margin-top:6px;
  font-size:.95rem;
  font-weight:700;
  color:#222;
}

/* ============================================
   PROCESSO (Brutal + papel)
   ============================================ */
.processo{
  padding:90px 0;
  background:#F8F9FA;
  position:relative;
  overflow:hidden;
}

.processo::before{
  content:"";
  position:absolute;
  top:0; left:0;
  width:100%;
  height:14px;
  background:#000;
  z-index:3;
}

.processo::after{
  content:"";
  position:absolute;
  inset:0;
  background-image:url("/assets/images/Paper-Texture.webp");
  background-repeat:repeat;
  background-size:700px;
  opacity:1;
  pointer-events:none;
  z-index:0;
}

.processo .container{
  position:relative;
  z-index:2;
}

.processo .section-header h2{
  display:inline-block;
  border-bottom:6px solid #000;
  padding-bottom:6px;
  margin:0;
}

.processo-timeline{
  display:grid;
  grid-template-columns:1fr;
  gap:18px;
}

@media (min-width:900px){
  .processo-timeline{
    grid-template-columns: 1fr 1fr;
    gap:18px;
    align-items:stretch;
  }
}

.processo-step{
  display:flex;
  align-items:flex-start;
  gap:18px;
  padding:22px;
  background:#fff;
  border:3px solid #000;
  border-radius:0;
  box-shadow:10px 10px 0 #000;
  transition: transform .15s ease, box-shadow .15s ease;
  position:relative;
}

.processo-step:hover{
  transform: translate(3px,3px);
  box-shadow:7px 7px 0 #000;
}

.step-number{
  background:#fff;
  color:#000;
  width:60px;
  height:60px;
  border-radius:0;
  border:3px solid #000;
  box-shadow:6px 6px 0 #000;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.15rem;
  font-weight:900;
  flex-shrink:0;
  letter-spacing:0.06em;
}

.step-content h3{
  font-size:1.35rem;
  font-weight:900;
  margin:2px 0 10px;
  color:#000;
  letter-spacing:-0.01em;
}

.step-content p{
  font-size:1rem;
  color:#222;
  line-height:1.6;
  margin:0;
  max-width:60ch;
}

@media (min-width:900px){
  .processo-step:nth-child(2){ transform: translateY(-10px); }
  .processo-step:nth-child(4){ transform: translateY(8px); }

  .processo-step:nth-child(2):hover,
  .processo-step:nth-child(4):hover{
    transform: translate(3px,3px);
  }
}

/* ============================================
   MARQUEE OUTLINE (Drama leve)
   ============================================ */
.brutal-marquee{
  padding:22px 0;
  border-top:3px solid #000;
  border-bottom:3px solid #000;
  background: var(--paper);
  overflow:hidden;
}

.marquee-track{
  display:flex;
  gap:40px;
  white-space:nowrap;
  will-change: transform;

  /* velocidade: diminua o tempo para ficar mais rápido */
  animation: marquee 8s linear infinite;

  font-weight:900;
  font-size: clamp(1.8rem, 4.5vw, 3.2rem);
  letter-spacing:-0.02em;
  color:transparent;
  -webkit-text-stroke:2px #000;
  text-transform:uppercase;
}

@keyframes marquee{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

/* ============================================
   DIFERENCIAL (Brutal)
   ============================================ */
.diferencial{
  padding:90px 0;
  background:#fff;
  position:relative;
  overflow:hidden;
}

.diferencial::before{
  content:"";
  position:absolute;
  top:0; left:0;
  width:100%;
  height:14px;
  background:#000;
}

.diferencial .container{
  position:relative;
  z-index:2;
}

.diferenciais-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:18px;
}

@media (min-width:900px){
  .diferenciais-grid{
    grid-template-columns: repeat(4, 1fr);
    gap:18px;
    align-items:stretch;
  }
}

.diferencial-item{
  text-align:left;
  padding:26px 22px;
  background:#fff;
  border:3px solid #000;
  border-radius:0;
  box-shadow:10px 10px 0 #000;
  transition: transform .15s ease, box-shadow .15s ease;
  position:relative;
}

.diferencial-item:hover{
  transform: translate(3px,3px);
  box-shadow:7px 7px 0 #000;
}

.diferencial-icon{
  width:56px;
  height:56px;
  background:#fff;
  border-radius:10px;
  border:3px solid #000;
  box-shadow:6px 6px 0 #000;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 0 14px;
}

.diferencial-icon svg{
  width:26px;
  height:26px;
  stroke:var(--accent);
}

/* ============================================
   SOBRE (Papel)
   ============================================ */
.sobre{
  padding:90px 0 70px;
  position:relative;
  overflow:hidden;
  background: var(--paper);
  isolation:isolate;
}

.sobre::before{
  content:"";
  position:absolute;
  top:0; left:0;
  width:100%;
  height:14px;
  background:#000;
  z-index:3;
}

.sobre::after{
  content:"";
  position:absolute;
  inset:0;
  background-image:url("/assets/images/Paper-Texture.webp");
  background-repeat:repeat;
  background-size:700px;
  opacity:1;
  pointer-events:none;
  z-index:0;
}

.sobre .container,
.sobre .sobre-content{
  position:relative;
  z-index:2;
}

/* ============================================
   CONTATO (Pré-footer) — Brutal fix
   ============================================ */
#contato.contato-final{
  padding:90px 0;
  background: var(--accent);
  color:#fff;
  position:relative;
  overflow:hidden;
}

#contato.contato-final::before{
  content:"";
  position:absolute;
  top:0; left:0;
  width:100%;
  height:14px;
  background:#000;
}

#contato.contato-final .container{
  position:relative;
  z-index:2;
}

#contato.contato-final .contato-content{
  display:grid;
  grid-template-columns:1fr;
  gap:34px;
  align-items:start;
}

@media (min-width:900px){
  #contato.contato-final .contato-content{
    grid-template-columns: 1fr 1fr;
    gap:50px;
  }
}

.contato-info h2{
  font-size:2.2rem;
  font-weight:700;
  margin-bottom:20px;
  line-height:1.3;
}

.contato-info p{
  font-size:1.1rem;
  margin-bottom:30px;
  line-height:1.7;
}

.contato-detalhes{
  display:flex;
  flex-direction:column;
  gap:15px;
}

.contato-item{
  display:flex;
  align-items:center;
  gap:12px;
  font-size:1rem;
}

.contato-item svg{
  width:20px;
  height:20px;
  stroke:#fff;
}

/* Form (brutal, proporcional) */
#contato.contato-final .contato-form{
  background:#fff;
  color:#000;
  border:3px solid #000;
  border-radius:0;
  box-shadow:10px 10px 0 #000;
  padding:32px;
}

.form-group{ margin-bottom:25px; }

.form-group label{
  display:block;
  margin-bottom:8px;
  font-weight:600;
  color:#333;
  font-size:.95rem;
}

.form-group input,
.form-group textarea{
  width:100%;
  padding:15px;
  border:2px solid #E5E5E5;
  border-radius:8px;
  font-size:1rem;
  font-family:'Montserrat',sans-serif;
  transition: all .3s ease;
  background:#F8F9FA;
}

.form-group input:focus,
.form-group textarea:focus{
  outline:none;
  border-color: var(--accent);
  background:#fff;
  box-shadow: 0 0 0 3px rgba(182,0,44,0.3);
}

.btn-submit{
  width:100%;
  background: var(--accent);
  color:#fff;
  border:none;
  padding:18px;
  border-radius:8px;
  font-size:1.1rem;
  font-weight:700;
  cursor:pointer;
  transition: all .3s ease;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-family:'Montserrat',sans-serif;
}

.btn-submit:hover{
  background: var(--accent-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(182,0,44,0.3);
}

.form-message{
  margin-top:20px;
  padding:15px;
  border-radius:8px;
  text-align:center;
  font-weight:600;
  display:none;
}

.form-message.success{
  background:#D4EDDA;
  color:#155724;
  border:1px solid #C3E6CB;
}

.form-message.error{
  background:#F8D7DA;
  color:#721C24;
  border:1px solid #F5C6CB;
}

/* ============================================
   FOOTER (Brutal)
   ============================================ */
.footer{
  background:#000;
  color:#fff;
  padding:38px 0;
  text-align:left;
  border-top:14px solid var(--accent);
}

.footer-content{
  display:flex;
  flex-direction:column;
  gap:14px;
  align-items:flex-start;
  justify-content:space-between;
}

@media (min-width:768px){
  .footer-content{
    flex-direction:row;
    align-items:center;
  }
}

.footer .logo-img{
  height:35px;
  filter: brightness(0) invert(1);
}

.footer a{
  color:#fff;
  text-decoration:none;
  border-bottom:2px solid rgba(255,255,255,0.6);
  padding-bottom:2px;
  font-weight:700;
}

.footer a:hover{ border-bottom-color:#fff; }

/* ============================================
   WhatsApp Flutuante
   ============================================ */
.whatsapp-float{
  position:fixed;
  bottom:25px;
  right:25px;
  background:#25D366;
  color:#fff;
  width:60px;
  height:60px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  box-shadow:0 4px 20px rgba(37,211,102,0.4);
  z-index:1000;
  transition: transform .3s ease, box-shadow .3s ease;
  animation: pulse 2s infinite;
}

.whatsapp-float:hover{
  transform: scale(1.1);
  box-shadow:0 6px 25px rgba(37,211,102,0.6);
}

.whatsapp-float svg{
  width:30px;
  height:30px;
  stroke:#fff;
}

/* ============================================
   Scroll Reveal (JS usa .fade-in + .visible)
   ============================================ */
.fade-in{
  opacity:0;
  transform: translateY(30px);
  transition: all .6s ease;
}

.fade-in.visible{
  opacity:1;
  transform: translateY(0);
}

/* ============================================
   Mobile Menu (Brutal)
   ============================================ */
.mobile-menu-overlay{
  position:fixed;
  inset:0;
  background:#fff;
  z-index:2000;

  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  padding-top:90px;

  transform: translateX(100%);
  transition: transform .4s ease;
}

.mobile-menu-overlay::before{
  content:"";
  position:absolute;
  top:0; left:0;
  width:100%;
  height:14px;
  background:#000;
}

.mobile-menu-overlay.open{
  transform: translateX(0);
}

.mobile-menu-header{
  position:absolute;
  top:0; left:0;
  width:100%;
  padding:18px 20px;

  display:flex;
  justify-content:space-between;
  align-items:center;
}

.mobile-menu-header .logo-img{ height:38px; }

.close-menu{
  cursor:pointer;
  border:2px solid #000;
  padding:8px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.close-menu svg{
  width:22px;
  height:22px;
  stroke:#000;
}

.mobile-nav-container{
  width:100%;
  padding:0 30px;
}

.mobile-nav-links{
  list-style:none;
  padding:0;
  margin:0;
}

.mobile-nav-links li{ margin:22px 0; }

.mobile-nav-links a{
  text-decoration:none;
  font-size:2rem;
  font-weight:900;
  color:#000;
  letter-spacing:-0.02em;
  border-bottom:3px solid transparent;
  padding-bottom:6px;
  display:inline-block;
  transition: all .2s ease;
}

.mobile-nav-links a:hover{
  border-bottom-color:#000;
}

.btn-cta-mobile{
  margin-top:40px;

  display:inline-flex;
  align-items:center;
  gap:10px;

  background: var(--accent);
  color:#fff !important;
  text-decoration:none !important;

  padding:16px 24px;
  font-weight:900;
  font-size:1.1rem;

  border:2px solid #000;
  border-radius:8px;
  box-shadow:8px 8px 0 #000;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

.btn-cta-mobile:hover{
  background: var(--accent-dark);
  transform: translate(2px,2px);
  box-shadow:6px 6px 0 #000;
}

.btn-cta-mobile svg{ stroke:#fff; }

/* =========================================================
   THEME TRANSITION — versão final limpa
   ========================================================= */

/* Transição suave */
body{
  transition: background-color .22s ease, color .22s ease;
}

/* Base normal (SEM tema ativo) */
#portfolio{
  background:#fff;
  color:#000;
}

#portfolio .section-header h2{ color:#000; }
#portfolio .section-header p{ color:#222; }

/* Quando o tema liga */
body.theme-portfolio{
  background:#B6002C;
  color:#fff;
}

/* Portfólio herda o vermelho do body */
body.theme-portfolio #portfolio{
  background: transparent;
  color:#fff;
}

body.theme-portfolio #portfolio .section-header h2{
  color:#fff;
}

body.theme-portfolio #portfolio .section-header p{
  color: rgba(255,255,255,0.92);
}

/* Header continua neutro */
body.theme-portfolio .header-fixed{
  background: rgba(244, 242, 238, 0.98);
}

@media (max-width: 767px){
  .main-nav .nav-links,
  .main-nav .btn-cta-header{ display:none; }
  .menu-toggle{ display:flex; }
}
@media (min-width: 768px){
  .mobile-menu-overlay,
  .menu-toggle{ display:none; }
  .main-nav .nav-links{ display:flex; }
  .main-nav .btn-cta-header{ display:flex; }
}


/* ===== Hero animations (required) ===== */
@keyframes fadeInUp{
  from{ opacity: 0; transform: translateY(30px); }
  to{ opacity: 1; transform: translateY(0); }
}

/* (opcional, mas você usa no CSS) */
@keyframes float{
  0%, 100%{ transform: translateY(-50%) translateX(0) rotate(8deg); }
  50%{ transform: translateY(-50%) translateX(20px) rotate(8deg); }
}

@keyframes pulse{
  0%{ box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7); }
  70%{ box-shadow: 0 0 0 10px rgba(37, 211, 102, 0); }
  100%{ box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

/* =========================================================
   PATCH MOBILE: corrige textos brancos em seções claras
   (cole no FINAL do CSS)
   ========================================================= */

@media (max-width: 767px){

  /* 1) Pare de “pintar” todo o texto do site de branco no mobile */
  body{
    background:#B6002C;   /* mantém o fundo vermelho no mobile */
    color:#000;           /* IMPORTANTÍSSIMO: texto padrão volta a ser preto */
  }

  /* 2) Portfólio continua branco/legível no modo vermelho */
  #portfolio,
  .portfolio{
    background: transparent;
    color:#fff;
  }
  #portfolio .section-header h2{ color:#fff; }
  #portfolio .section-header p{ color: rgba(255,255,255,0.92); }

  /* 3) Seções que são CLARAS (papel/branco) precisam forçar texto preto */
  .hero,
  .servicos,
  .processo,
  .diferencial,
  .sobre,
  #contato.contato-final .contato-form{
    color:#000;
  }

  /* Headings e textos dentro dessas seções claras */
  .hero h1, .hero h2, .hero h3, .hero p, .hero li,
  .servicos h2, .servicos h3, .servicos p, .servicos li,
  .processo h2, .processo h3, .processo p,
  .diferencial h2, .diferencial h3, .diferencial p,
  .sobre h2, .sobre h3, .sobre p{
    color:#000;
  }

  /* 4) HERO stamp “Sem hype, sem enrolação” (a caixinha vazia) */
  .hero-stamp{
    background:#fff;
    color:#000;
    border-color:#000;
  }

  /* 5) Cards brancos do “Por que escolher a Likan Lab” */
  .diferencial-item,
  .processo-step,
  .servico-card,
  .portfolio-item,
  .portfolio-caption{
    background:#fff;
    color:#000;
  }
  .diferencial-item p,
  .processo-step p,
  .servico-card p,
  .portfolio-meta{
    color:#222;
  }

  /* 6) Header pode continuar neutro */
  .header-fixed{
    background: rgba(244, 242, 238, 0.98);
    color:#000;
  }
}