/* =====================================================
   NICHIMURA ELEMENTS — ESTILO ÚNICO (desktop + mobile)
   Mobile fica no @media(max-width:900px) no final.
   ===================================================== */

@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@400;500;600;700;800;900&display=swap');

/* ================= BASE ================= */

*{margin:0;padding:0;box-sizing:border-box;font-family:'Red Hat Display',Arial,sans-serif;-webkit-tap-highlight-color:transparent}

button,a,input,label{outline:none}

:root{
  --green:#4CAF50;
  --ink:#0f1511;
  --card:#ffffff;
  --muted:#5e6b63;
}

body{
  background:#f5f7f6;
  color:#111;
  overflow-x:hidden;
}

a{
  text-decoration:none;
  color:inherit;
}

img{display:block}

/* ================= HEADER ================= */

header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:8px 28px;
  background:rgba(5,32,20,0.92);
  backdrop-filter: blur(8px);
  z-index:1000;
}

.brand{
  margin-right:auto;
}

.brand img{
  height:72px;
  display:block;
}

/* hamburger escondido no desktop */
.hamburger{
  display:none;
}

nav{
  display:flex;
  align-items:center;
  gap:18px;
  margin-left:auto;
}

nav a{
  color:#fff;
  font-size:19px;
  opacity:.92;
}

nav a:hover{
  opacity:1;
}

/* ================= HERO ================= */

.hero{
  position:relative;
  min-height:100vh;
  padding:96px 18px 70px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:#fff;
  overflow:hidden;
}

.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.70), rgba(0,0,0,.72));
  z-index:1;
}

.hero-video{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:0;
}

.hero-inner{
  position:relative;
  z-index:2;
  max-width:920px;
}

.hero h1{
  font-size:52px;
  margin-bottom:14px;
}

.hero p{
  font-size:18px;
  max-width:680px;
  margin:0 auto 28px;
  opacity:.92;
}

.hero-actions{
  display:flex;
  gap:12px;
  justify-content:center;
  flex-wrap:wrap;
}

/* ================= BOTÕES ================= */

.btn{
  padding:14px 22px;
  border-radius:999px;
  font-weight:800;
  display:inline-block;
}

.btn-primary{
  background:var(--green);
  color:#fff;
}

.btn-ghost{
  border:1px solid rgba(255,255,255,.35);
  color:#fff;
  background:rgba(255,255,255,.06);
}

/* ================= SECÇÕES ================= */

.section{
  padding:70px 18px;
}

.container{
  max-width:1040px;
  margin:0 auto;
}

.kicker{
  color:var(--muted);
  font-weight:700;
  font-size:12px;
  margin-bottom:10px;
}

.h2{
  font-size:30px;
  margin-bottom:12px;
  color:var(--ink);
}

.lead{
  color:var(--muted);
  max-width:760px;
}

/* ============ SERVIÇOS: FUNDO + CARROSSEL ============ */

.services{
  position:relative;
  overflow:hidden;
  background:#06291a;               /* verde bem escuro de base */
}

/* imagem de fundo "artificial" com opacidade suave */
.services::before{
  content:"";
  position:absolute;
  inset:0;
  background:url("images/artificial.jpeg") center/cover no-repeat;
  opacity:.16;
  z-index:0;
}

.services .container{
  position:relative;
  z-index:1;
  max-width:1340px;
}

/* textos brancos e em negrito sobre o fundo */
.services .kicker{color:#bfe3cc}
.services .h2{color:#fff;font-size:36px}
.services .lead{color:#fff;font-weight:700;font-size:21px}

.carousel{
  position:relative;
  margin-top:34px;
  border-radius:20px;
  box-shadow:0 22px 55px rgba(0,0,0,.35);
}

.carousel-viewport{
  overflow:hidden;
  border-radius:20px;
}

.carousel-track{
  display:flex;
  transition:transform .5s ease;
}

.slide{
  min-width:100%;
}

.slide img{
  width:100%;
  height:440px;
  object-fit:cover;
  display:block;
}

/* setas de navegação */
.carousel-btn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:46px;
  height:46px;
  border:none;
  border-radius:50%;
  background:rgba(0,0,0,.45);
  color:#fff;
  font-size:28px;
  line-height:1;
  cursor:pointer;
  z-index:3;
  transition:background .2s ease;
}

.carousel-btn:hover{background:rgba(0,0,0,.72)}
.carousel-btn.prev{left:14px}
.carousel-btn.next{right:14px}

/* legenda (fora do carrossel, muda com a foto) */
.carousel-caption{
  text-align:center;
  margin-top:20px;
}

.carousel-caption h4{
  color:#fff;
  font-weight:800;
  font-size:20px;
  margin-bottom:6px;
}

.carousel-caption p{
  color:#fff;
  font-weight:700;
  font-size:16px;
  max-width:680px;
  margin:0 auto;
}

/* bolinhas indicadoras */
.carousel-dots{
  display:flex;
  gap:10px;
  justify-content:center;
  margin-top:16px;
}

.carousel-dots .dot{
  width:11px;
  height:11px;
  border-radius:50%;
  border:none;
  background:rgba(255,255,255,.45);
  cursor:pointer;
  padding:0;
  transition:background .2s ease, transform .2s ease;
}

.carousel-dots .dot.active{
  background:#fff;
  transform:scale(1.2);
}

/* ============ DESKTOP: ARCO DE SERVIÇOS ============ */

/* no desktop mostra o arco e esconde o carrossel */
.services-mobile{display:none}

.services-arc{
  position:relative;
  width:1300px;
  height:680px;
  margin:80px auto 0;
}

/* linhas tracejadas ligando o logo aos serviços */
.arc-lines{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:0;
  pointer-events:none;
}

.arc-lines line,
.arc-lines circle{
  stroke:#ffffff;
  stroke-width:2;
  stroke-dasharray:6 9;
  opacity:.55;
}

.arc-lines circle{
  fill:none;
}

/* logo no centro (passar o mouse abre todos) */
.arc-logo{
  position:absolute;
  left:50%;
  top:535px;
  transform:translate(-50%,-50%);
  z-index:4;
  cursor:pointer;
}

.arc-logo img{
  height:150px;
  display:block;
  position:relative;
  z-index:1;
  filter:drop-shadow(0 10px 22px rgba(0,0,0,.45));
}

/* cada serviço, posicionado no arco */
.arc-item{
  position:absolute;
  transform:translate(-50%,-50%);
  z-index:1;
}

/* círculo fechado */
.arc-card{
  width:270px;
  height:270px;
  border-radius:50%;
  overflow:hidden;
  background:#06291a;
  box-shadow:0 14px 34px rgba(0,0,0,.35);
  cursor:pointer;
  transition:width .35s ease, height .35s ease, border-radius .35s ease;
}

.arc-photo{
  height:270px;
  transition:height .35s ease;
}

.arc-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* faixa verde escura com texto branco */
.arc-band{
  background:#06291a;
  color:#fff;
  padding:12px 16px;
  text-align:center;
}

.arc-band h4{
  font-size:20px;
  font-weight:800;
  margin-bottom:7px;
}

.arc-band p{
  font-size:15px;
  font-weight:600;
  line-height:1.4;
}

/* ABERTO: hover no card OU hover no logo (abre todos) */
.arc-item:hover,
.arc-logo:hover ~ .arc-item{
  z-index:6;
}

.arc-item:hover .arc-card,
.arc-logo:hover ~ .arc-item .arc-card{
  width:300px;
  height:300px;
  border-radius:18px;
}

.arc-item:hover .arc-photo,
.arc-logo:hover ~ .arc-item .arc-photo{
  height:185px;
}

/* ================= SOBRE ================= */

#sobre{
  scroll-margin-top:100px;
  position:relative;
  background:linear-gradient(180deg, rgba(120,130,125,.18), rgba(120,130,125,.05));
}

/* imagem de fundo "rolorelva" bem transparente atrás do Sobre */
#sobre::before{
  content:"";
  position:absolute;
  inset:0;
  background:url("images/rolorelva.jpeg") center/cover no-repeat;
  opacity:.10;
  z-index:0;
}

#sobre .wrap{
  position:relative;
  z-index:1;
}

.wrap{
  max-width:1040px;
  margin:0 auto;
  padding:0 18px;
}

.card{
  display:flex;
  gap:0;
  align-items:stretch;
  background:var(--card);
  border-radius:24px;
  overflow:hidden;
  box-shadow:0 20px 50px rgba(0,0,0,.08);
  position:relative;
}

.card .photo{
  flex:0 0 42%;
  min-height:420px;
}

.card .photo img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.card .content{
  flex:1;
  padding:48px 44px;
}

.card .content h1{
  font-size:34px;
  color:var(--ink);
  margin:6px 0 18px;
}

.text{
  color:var(--muted);
  line-height:1.7;
  white-space:pre-line;   /* preserva os parágrafos do texto original */
  margin-bottom:28px;
}

.actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

/* ícones WhatsApp + Email dentro do card do Sobre */
.card-icons{
  position:absolute;
  bottom:16px;
  right:32px;
  display:flex;
  flex-direction:row;
  gap:10px;
  z-index:2;
}

.card-icon-btn{
  width:48px;
  height:48px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 4px 14px rgba(0,0,0,.22);
  transition:transform .15s ease, box-shadow .15s ease;
}

.card-icon-btn:hover{
  transform:scale(1.1);
  box-shadow:0 6px 18px rgba(0,0,0,.30);
}

.card-icon-btn.ci-wa{ background:#25D366; color:#fff; }
.card-icon-btn.ci-email{ background:#06291a; color:#fff; }
.card-icon-btn.ci-li{ background:#0A66C2; color:#fff; }
.card-icon-btn.ci-ig{ background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285AEB 90%); color:#fff; }
.card-icon-btn svg{ width:24px; height:24px; }

/* ================= FORMULÁRIO (ORÇAMENTO) ================= */

.form-section{
  padding:112px 18px 70px;   /* compensa o header fixo */
}

.form-section h1{
  font-size:34px;
  color:var(--ink);
  margin-bottom:6px;
}

.form-section .lead{
  margin-bottom:26px;
}

form{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.row{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}

.row > .field{
  flex:1;
  min-width:200px;
}

label{
  font-weight:600;
  color:var(--ink);
  font-size:14px;
  display:block;
  margin-bottom:6px;
}

input,
select,
textarea{
  width:100%;
  padding:13px 14px;
  border:1px solid #d7ded9;
  border-radius:12px;
  background:#fff;
  font-size:15px;
  color:#111;
}

input:focus,
select:focus,
textarea:focus{
  outline:none;
  border-color:var(--green);
  box-shadow:0 0 0 3px rgba(76,175,80,.15);
}

textarea{resize:vertical}

input[type=file]{
  padding:11px 14px;
  background:#fafdfb;
  cursor:pointer;
}

/* checkboxes de serviço */
.checks{
  display:flex;
  flex-wrap:wrap;
  gap:12px 18px;
}

.checks label{
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:500;
  color:var(--ink);
  margin:0;
  cursor:pointer;
}

.checks input{width:auto}

/* consentimento de privacidade */
.consent{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:14px;
  color:var(--muted);
}

.consent input{
  width:auto;
  margin-top:3px;
}

/* checkboxes personalizadas (sem o "pixelado" nativo) — desktop + mobile */
.checks input[type=checkbox],
.consent input[type=checkbox]{
  appearance:none;
  -webkit-appearance:none;
  width:20px;
  height:20px;
  flex:none;
  border:1.5px solid #cdd6d0;
  border-radius:6px;
  background:#fff;
  cursor:pointer;
  position:relative;
  transition:border-color .2s ease, background .2s ease;
}

.checks input[type=checkbox]:checked,
.consent input[type=checkbox]:checked{
  border-color:#06291a;
}

/* o "tick" verde escuro que aparece/desaparece suavemente */
.checks input[type=checkbox]::after,
.consent input[type=checkbox]::after{
  content:"";
  position:absolute;
  left:6px;
  top:2px;
  width:5px;
  height:10px;
  border:solid #06291a;
  border-width:0 2.5px 2.5px 0;
  transform:rotate(45deg) scale(0);
  opacity:0;
  transition:opacity .2s ease, transform .2s ease;
}

.checks input[type=checkbox]:checked::after,
.consent input[type=checkbox]:checked::after{
  opacity:1;
  transform:rotate(45deg) scale(1);
}

/* estados de erro */
.field.error input,
.field.error select,
.field.error textarea{
  border-color:#e23b3b;
  box-shadow:0 0 0 3px rgba(226,59,59,.12);
}

.error-msg{
  color:#e23b3b;
  font-size:13px;
  margin-top:5px;
  display:none;
}

.field.error .error-msg{display:block}

/* botão enviar */
form button[type=submit]{
  align-self:flex-start;
  padding:14px 26px;
  border:none;
  border-radius:999px;
  background:var(--green);
  color:#fff;
  font-weight:800;
  font-size:15px;
  cursor:pointer;
  transition:transform .15s ease, opacity .15s ease;
}

form button[type=submit]:hover{transform:translateY(-1px)}
form button[type=submit]:disabled{opacity:.6;cursor:default}

/* mensagem de feedback */
.form-msg{
  padding:14px 16px;
  border-radius:12px;
  font-weight:600;
  font-size:15px;
}

.form-msg.ok{background:#e6f5e7;color:#256a29}
.form-msg.err{background:#fdecec;color:#a12222}
.form-msg.sending{background:#eef2f0;color:#46544c}

/* bloco WhatsApp */
.whatsapp{
  margin-top:30px;
  padding-top:24px;
  border-top:1px solid #e4e9e6;
}

.whatsapp p{
  color:var(--muted);
  margin-bottom:8px;
}

.whatsapp a{
  display:inline-block;
  padding:12px 20px;
  border-radius:999px;
  background:#25D366;
  color:#fff;
  font-weight:700;
}

/* ================= PÁGINA LEGAL (PRIVACIDADE) ================= */

.legal{
  max-width:760px;
  margin-top:24px;
}

.legal .h2{
  margin-top:34px;
  font-size:22px;
}

.legal p{
  color:var(--muted);
  line-height:1.7;
  margin-bottom:14px;
}

.legal ul{
  color:var(--muted);
  line-height:1.7;
  margin:0 0 14px 20px;
}

.legal li{
  margin-bottom:6px;
}

.legal a{
  color:var(--green);
  font-weight:600;
}

.legal strong{
  color:var(--ink);
}

.legal .actions{
  margin-top:36px;
}

/* ================= DRAWER SOCIAL (base — escondido no desktop) ================= */

.social-drawer{ display:none; }

/* ================= FOOTER ================= */

footer{
  padding:40px 20px;
  text-align:center;
  color:var(--muted);
  border-top:1px solid #e4e9e6;
  margin-top:20px;
  background:linear-gradient(180deg, rgba(120,130,125,.06), rgba(120,130,125,.22));
}

footer a{
  color:var(--green);
  font-weight:600;
}

/* ================= ANIMAÇÃO AO DESLIZAR ================= */

html{
  scroll-behavior:smooth;   /* rolagem suave ao clicar nas âncoras */
}

/* estado inicial (escondido) — só quando o JS está ativo */
html.js .hero-inner,
html.js .kicker,
html.js .h2,
html.js .lead,
html.js .card,
html.js form,
html.js .whatsapp,
html.js .legal > p,
html.js .legal > ul,
html.js .legal .actions{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .7s ease, transform .7s ease;
  will-change:opacity, transform;
}

/* estado revelado (fica assim depois de aparecer) */
html.js .visible{
  opacity:1 !important;
  transform:none !important;
}

/* respeita quem prefere menos movimento */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  html.js .hero-inner,
  html.js .kicker,
  html.js .h2,
  html.js .lead,
  html.js .card,
  html.js form,
  html.js .whatsapp,
  html.js .legal > p,
  html.js .legal > ul,
  html.js .legal .actions{
    opacity:1;
    transform:none;
    transition:none;
  }
}

/* =====================================================
   ================= MOBILE (max 900px) ================
   ===================================================== */

@media(max-width:900px){

  /* HAMBURGER */
  .hamburger{
    display:flex;
    flex-direction:column;
    gap:5px;
    cursor:pointer;
    order:2;            /* hambúrguer à direita */
  }

  /* cabeçalho no mobile: logo colado à esquerda,
     hambúrguer afastado da borda direita */
  header{
    padding:8px 22px 8px 4px;
  }

  .brand{
    order:1;            /* logo à esquerda */
  }

  /* logo menor no mobile (equilibra com o hambúrguer) */
  .brand img{
    height:60px;
  }

  .hamburger span{
    height:3px;
    background:#fff;
    border-radius:3px;
    transition:transform .35s ease, opacity .2s ease, width .35s ease;
  }

  /* linhas assimétricas (fechado) */
  .hamburger span:nth-child(1){ width:26px; }
  .hamburger span:nth-child(2){ width:17px; }
  .hamburger span:nth-child(3){ width:22px; }

  /* aberto → vira um X (linhas igualam e cruzam) */
  .hamburger.open span{ width:26px; }
  .hamburger.open span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
  .hamburger.open span:nth-child(2){ opacity:0; }
  .hamburger.open span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }

  /* MENU */
  nav{
    position:fixed;
    top:70px;
    right:14px;
    left:auto;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    background:rgba(5,32,20,0.98);
    width:190px;
    height:auto;
    padding:22px 22px;
    gap:18px;
    border-radius:16px;
    box-shadow:0 20px 50px rgba(0,0,0,.45);
    transform-origin:top right;   /* nasce do canto do hambúrguer */
    transform:scale(0);
    opacity:0;
    pointer-events:none;
    transition:transform .35s cubic-bezier(.2,.85,.3,1.25), opacity .25s ease;
  }

  nav.active{
    transform:scale(1);
    opacity:1;
    pointer-events:auto;
  }

  nav a{
    font-size:20px;
    width:100%;
  }

  /* HERO */
  .hero{
    padding:104px 20px 60px;
    min-height:80vh;
  }

  .hero h1{font-size:32px}
  .hero p{font-size:16px}

  .hero-inner{
    max-width:90%;
  }

  /* BOTÕES */
  .hero-actions{
    display:flex;
    gap:12px;
    justify-content:center;
    flex-wrap:wrap;
  }

  /* SOBRE */
  .card{
    flex-direction:column;
  }

  .card .photo{
    flex:none;
    min-height:auto;
    height:290px;
  }

  /* texto do Sobre: caixa de scroll independente (~2 parágrafos visíveis) */
  .card .text{
    max-height:320px;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    scroll-behavior:smooth;
    overscroll-behavior-y:auto;
    padding-right:6px;
    margin-bottom:0;
  }
  .card .text::-webkit-scrollbar{width:3px}
  .card .text::-webkit-scrollbar-track{background:transparent}
  .card .text::-webkit-scrollbar-thumb{background:#ccc;border-radius:2px}

  .card .content{
    padding:32px 24px;
  }

  .card .content h1{font-size:28px}

  /* FORMULÁRIO */
  .row{
    flex-direction:column;
    gap:16px;
  }

  form button[type=submit]{
    align-self:stretch;
    text-align:center;
  }

  /* SERVIÇOS: no mobile esconde o arco e mostra o carrossel */
  .services-arc{display:none}
  .services-mobile{display:block}

  /* SOBRE: foto mostra a parte de cima */
  .card .photo img{ object-position:top; }

  /* SOBRE: esconde os ícones do card no mobile */
  .card-icons{ display:none; }

  /* DRAWER SOCIAL — meia-lua canto inferior direito */
  .social-drawer{
    display:block;
    position:fixed;
    bottom:100px;
    right:0;
    z-index:600;
  }

  .drawer-toggle{
    display:flex;
    align-items:center;
    justify-content:center;
    width:44px;
    height:72px;
    background:#111;
    border:1.5px solid rgba(255,255,255,.35);
    border-right:none;
    border-radius:36px 0 0 36px;
    color:#fff;
    cursor:pointer;
    position:relative;
    z-index:1;
    transition:background .2s;
  }
  .drawer-toggle:active{ background:#222; }

  .chevron-icon{
    width:20px;
    height:20px;
    transition:transform .35s ease;
  }
  .social-drawer.open .chevron-icon{
    transform:rotate(180deg);
  }

  .drawer-panel{
    position:absolute;
    bottom:4px;
    right:44px;
    background:#111;
    border-radius:14px;
    padding:12px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    transform-origin:bottom right;
    transform:scale(0);
    opacity:0;
    pointer-events:none;
    transition:transform .32s cubic-bezier(.2,.85,.3,1.25), opacity .22s ease;
  }
  .social-drawer.open .drawer-panel{
    transform:scale(1);
    opacity:1;
    pointer-events:auto;
  }

  .drawer-icon{
    width:50px;
    height:50px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    transition:transform .15s ease;
  }
  .drawer-icon:active{ transform:scale(.88); }
  .drawer-icon svg{ width:24px; height:24px; }
  .di-wa   { background:#25D366; }
  .di-email{ background:#06291a; }
  .di-li   { background:#0A66C2; }
  .di-ig   { background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285AEB 90%); }

  /* CARROSSEL */
  .slide img{height:260px}
  .carousel-btn{width:40px;height:40px;font-size:24px}
  .carousel-btn.prev{left:10px}
  .carousel-btn.next{right:10px}

  /* FOOTER */
  footer{
    padding:40px 20px;
    text-align:center;
  }

}