/* =========================================================
   mobile.css — Valea  (carregado depois do styles.css)
   ========================================================= */

/* ─── NOWRAP global ─── */
.nowrap-line,
.proof-item strong,
.proof-item span{
  white-space:nowrap !important;
  word-break:keep-all !important;
  overflow-wrap:normal !important;
  hyphens:none !important;
}

/* os contatos que não podem quebrar linha: mostrar com reticências se apertar */
.contact-methods .contact-link > span:last-child > strong,
.contact-methods strong.nowrap-line{
  white-space:nowrap !important;
  word-break:keep-all !important;
  overflow-wrap:normal !important;
  hyphens:none !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  max-width:100% !important;
}

/* =========================================================
   MOBILE PRINCIPAL  ≤ 1040 px
   ========================================================= */
@media (max-width:1040px){

  :root{
    --mobile-radius:18px;
    --mobile-pad:16px;
  }

  body{
    background:#f7f5f0;
  }

  .container{
    width:calc(100% - 24px) !important;
    max-width:560px !important;
    margin-inline:auto !important;
  }

  .section{
    padding:62px 0 !important;
  }

  .section-heading{
    max-width:100% !important;
    margin-bottom:26px !important;
  }

  h1,h2,h3,p,li,a,span,strong,button{
    min-width:0;
  }

  h1{
    font-size:clamp(2rem, 9.6vw, 3.15rem) !important;
    line-height:1.04 !important;
    letter-spacing:-.035em !important;
    max-width:100% !important;
    word-break:normal !important;
    overflow-wrap:normal !important;
  }

  h2{
    font-size:clamp(1.85rem, 8.4vw, 2.75rem) !important;
    line-height:1.05 !important;
    letter-spacing:-.03em !important;
    max-width:100% !important;
  }

  h3{ line-height:1.15 !important; }

  p,li{
    font-size:.98rem !important;
    line-height:1.56 !important;
  }

  .eyebrow,.section-kicker,.service-overline{
    font-size:.72rem !important;
    letter-spacing:.14em !important;
    line-height:1.35 !important;
  }

  /* ── HEADER ── */
  .site-header,
  .site-header.is-scrolled{
    position:fixed !important;
    top:10px !important;
    left:50% !important;
    right:auto !important;
    transform:translateX(-50%) !important;

    width:calc(100vw - 22px) !important;
    max-width:560px !important;
    min-height:64px !important;
    height:auto !important;

    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:10px !important;

    padding:9px 10px 9px 14px !important;
    border-radius:20px !important;

    /* fundo sólido branco — nunca transparente no mobile */
    background:#ffffff !important;
    background-color:#ffffff !important;
    border:1px solid rgba(18,25,54,.14) !important;
    box-shadow:0 16px 42px rgba(10,16,39,.22) !important;

    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    overflow:visible !important;
    z-index:9999 !important;
  }

  .brand{
    flex:1 1 auto !important;
    min-width:0 !important;
    max-width:210px !important;
  }

  .brand img{
    height:40px !important;
    width:auto !important;
    max-width:160px !important;
    object-fit:contain !important;
  }

  .header-cta{
    display:none !important;
  }

  /* botão hambúrguer — navy escuro com linhas brancas */
  .nav-toggle,
  .site-header .nav-toggle,
  .site-header.is-scrolled .nav-toggle{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap:5px !important;

    width:46px !important;
    height:46px !important;
    min-width:46px !important;
    padding:12px !important;

    border-radius:14px !important;
    border:1px solid rgba(18,25,54,.22) !important;
    background:#121936 !important;
    background-color:#121936 !important;
    box-shadow:0 12px 26px rgba(10,16,39,.25) !important;
    z-index:10001 !important;
  }

  .nav-toggle span,
  .site-header .nav-toggle span,
  .site-header.is-scrolled .nav-toggle span{
    display:block !important;
    width:100% !important;
    height:2px !important;
    border-radius:999px !important;
    background:#ffffff !important;
  }

  /* nav fechado: invisível */
  .main-nav{
    display:none !important;
  }

  /* nav aberto: dropdown branco com texto escuro */
  .main-nav.is-open,
  .site-header .main-nav.is-open{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:8px !important;

    /* fixed em vez de absolute: evita clipping por overflow-x:hidden no body */
    position:fixed !important;
    /* top é calculado via JS com base na altura real do header */
    top:84px !important;
    left:50% !important;
    right:auto !important;
    transform:translateX(-50%) !important;
    width:calc(100vw - 22px) !important;
    max-width:560px !important;

    padding:12px !important;
    border-radius:20px !important;

    /* fundo branco = texto #121936 é legível */
    background:#ffffff !important;
    background-color:#ffffff !important;
    border:1px solid rgba(18,25,54,.14) !important;
    box-shadow:0 24px 60px rgba(10,16,39,.28) !important;

    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    z-index:10000 !important;
  }

  .main-nav.is-open a,
  .site-header .main-nav.is-open a{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    min-height:44px !important;
    width:100% !important;
    padding:11px 10px !important;
    border-radius:13px !important;

    /* cinza claro com texto navy — totalmente legível */
    background:#f1f3f8 !important;
    background-color:#f1f3f8 !important;
    color:#121936 !important;
    border:1px solid #e0e4ec !important;

    font-size:.88rem !important;
    font-weight:850 !important;
    line-height:1.1 !important;
    text-align:center !important;
    white-space:nowrap !important;
  }

  .main-nav.is-open a:hover,
  .main-nav.is-open a.is-active,
  .site-header .main-nav.is-open a:hover,
  .site-header .main-nav.is-open a.is-active{
    background:#a9414a !important;
    color:#ffffff !important;
    border-color:#a9414a !important;
  }

  /* ── HERO ── */
  .hero{
    min-height:auto !important;
    padding:112px 0 54px !important;
    background:#0a1027 !important;
  }

  .hero:after,.scroll-cue{
    display:none !important;
  }

  .hero-overlay{
    background:
      linear-gradient(180deg,rgba(7,11,28,.94),rgba(12,18,43,.88) 48%,rgba(12,18,43,.76)),
      radial-gradient(circle at 25% 18%,rgba(164,65,74,.28),transparent 32%) !important;
  }

  .hero-grid{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:24px !important;
  }

  .hero-copy{ max-width:100% !important; }

  .hero-text{
    margin-top:18px !important;
    font-size:.98rem !important;
    line-height:1.58 !important;
    max-width:100% !important;
  }

  .hero-actions{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:10px !important;
    width:100% !important;
    margin-top:24px !important;
  }

  .btn,
  .hero-actions .btn,
  .service-whatsapp,
  .lead-box button{
    width:100% !important;
    min-height:48px !important;
    padding:13px 15px !important;
    border-radius:14px !important;
    font-size:.92rem !important;
    line-height:1.2 !important;
    text-align:center !important;
  }

  .trust-row{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:9px !important;
    width:100% !important;
    margin-top:22px !important;
  }

  .trust-row span{
    width:100% !important;
    min-height:44px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    padding:11px 12px !important;
    border-radius:14px !important;
  }

  .hero-panel{
    width:100% !important;
    max-width:100% !important;
    padding:18px !important;
    border-radius:20px !important;
    transform:none !important;
    background:#ffffff !important;
    color:#121936 !important;
    box-shadow:0 18px 42px rgba(0,0,0,.22) !important;
    overflow:hidden !important;
  }

  .hero-logo{
    height:96px !important;
    max-width:100% !important;
  }

  .hero-panel p{
    color:#3d455c !important;
    font-size:.94rem !important;
    line-height:1.45 !important;
  }

  .mini-card-list{ gap:8px !important; }

  .mini-card-list div{
    width:100% !important;
    min-height:42px !important;
    padding:10px 11px !important;
    border-radius:14px !important;
    font-size:.88rem !important;
    line-height:1.22 !important;
  }

  /* ── GRIDS GERAIS ── */
  .split-grid,.method-grid,.clients-grid,.contact-grid{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:28px !important;
  }

  .feature-grid{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:10px !important;
  }

  .feature-grid article{
    padding:15px 13px !important;
    border-radius:16px !important;
  }

  .feature-grid h3{ font-size:.94rem !important; }

  .feature-grid p{
    font-size:.84rem !important;
    line-height:1.4 !important;
  }

  .portrait-card,.portrait-frame{
    width:100% !important;
    border-radius:20px !important;
  }

  .portrait-frame img{ aspect-ratio:4/4.5 !important; }

  .portrait-caption{
    left:12px !important;
    right:12px !important;
    bottom:12px !important;
    padding:13px !important;
    border-radius:16px !important;
  }

  .portrait-caption h3{ font-size:1.06rem !important; }
  .portrait-caption p{  font-size:.78rem !important; }

  /* ── INDICADORES: linha única, sem quebra ── */
  .proof-band{
    background:#f7f5f0 !important;
    color:#121936 !important;
    padding:40px 0 !important;
  }

  .proof-grid{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:8px !important;
    width:100% !important;
  }

  .proof-item{
    width:100% !important;
    min-height:54px !important;
    padding:9px 10px !important;
    border-radius:15px !important;

    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:center !important;
    gap:8px !important;

    background:#ffffff !important;
    color:#121936 !important;
    border:1px solid #e5e8ef !important;
    box-shadow:0 10px 24px rgba(10,16,39,.08) !important;
    text-align:center !important;
    overflow:hidden !important;
  }

  /* "+1000" — nunca quebra */
  .proof-item strong,
  .proof-item strong.nowrap-line{
    display:inline-block !important;
    flex:0 0 auto !important;
    color:#121936 !important;
    font-family:Inter,system-ui,sans-serif !important;
    font-size:clamp(1.12rem, 5.1vw, 1.55rem) !important;
    font-weight:900 !important;
    line-height:1 !important;
    white-space:nowrap !important;
    word-break:keep-all !important;
    overflow-wrap:normal !important;
    hyphens:none !important;
  }

  /* "processos, laudos e consultorias" — nunca quebra */
  .proof-item span,
  .proof-item span.nowrap-line{
    display:inline-block !important;
    flex:0 1 auto !important;
    min-width:0 !important;
    max-width:100% !important;
    margin:0 !important;
    color:#4f5b73 !important;
    font-size:clamp(.58rem, 2.35vw, .78rem) !important;
    font-weight:850 !important;
    line-height:1 !important;
    letter-spacing:-.02em !important;
    white-space:nowrap !important;
    word-break:keep-all !important;
    overflow-wrap:normal !important;
    hyphens:none !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  /* ── SERVIÇOS ── */
  .services{ background:#ffffff !important; }

  .service-layout{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:18px !important;
  }

  .service-list{
    position:static !important;
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:9px !important;
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
    overflow:visible !important;
  }

  .service-tab{
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    min-height:52px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    padding:9px 7px !important;
    border-radius:14px !important;

    background:#f1f3f8 !important;
    color:#121936 !important;
    border:1px solid #e0e4ec !important;

    font-size:.8rem !important;
    font-weight:850 !important;
    line-height:1.12 !important;
    text-align:center !important;
    white-space:normal !important;
    overflow:hidden !important;
  }

  .service-tab:hover,
  .service-tab.is-active{
    transform:none !important;
    background:#121936 !important;
    color:#ffffff !important;
    border-color:#121936 !important;
    box-shadow:0 10px 24px rgba(18,25,54,.18) !important;
  }

  .service-detail{
    display:grid !important;
    grid-template-columns:1fr !important;
    width:100% !important;
    min-height:0 !important;
    border-radius:20px !important;
    overflow:hidden !important;
    background:#f7f5f0 !important;
    box-shadow:0 16px 36px rgba(10,16,39,.12) !important;
  }

  .service-image-wrap{
    width:100% !important;
    height:220px !important;
    min-height:220px !important;
    max-height:220px !important;
  }

  .service-content{
    display:block !important;
    padding:20px 16px 18px !important;
  }

  .service-content h3{
    font-size:clamp(1.38rem, 6.6vw, 1.95rem) !important;
    line-height:1.08 !important;
    margin-bottom:12px !important;
  }

  .service-content > p{
    font-size:.94rem !important;
    line-height:1.5 !important;
  }

  .service-columns{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:16px !important;
    margin:20px 0 !important;
  }

  .service-columns h4{ font-size:.95rem !important; }
  .service-columns ul{ padding-left:18px !important; }

  .service-columns li,
  .service-columns p{
    font-size:.9rem !important;
    line-height:1.45 !important;
  }

  /* ── METODOLOGIA ── */
  .timeline{ gap:10px !important; }

  .timeline article{
    grid-template-columns:40px 1fr !important;
    gap:11px !important;
    padding:13px !important;
    border-radius:16px !important;
  }

  .timeline span{
    width:36px !important;
    height:36px !important;
    border-radius:12px !important;
  }

  .timeline h3{ font-size:.98rem !important; }
  .timeline p{  font-size:.88rem !important; line-height:1.42 !important; }

  /* ── GALERIA ── */
  .gallery{
    background:#121936 !important;
    overflow:hidden !important;
  }

  .gallery-shell{
    width:100vw !important;
    margin-left:calc(50% - 50vw) !important;
    overflow:hidden !important;
    padding:16px 0 32px !important;
    -webkit-mask-image:linear-gradient(90deg,transparent 0%,black 10%,black 90%,transparent 100%) !important;
    mask-image:linear-gradient(90deg,transparent 0%,black 10%,black 90%,transparent 100%) !important;
  }

  .gallery-track{
    display:flex !important;
    gap:12px !important;
    width:max-content !important;
    transition:none !important;
    animation:galleryContinuous var(--gallery-speed,42s) linear infinite !important;
  }

  .gallery-card,
  .gallery-card.is-active{
    flex:0 0 76vw !important;
    max-width:330px !important;
    height:270px !important;
    min-height:270px !important;
    border-radius:18px !important;
    opacity:.95 !important;
    transform:scale(.98) !important;
  }

  .gallery-card img{
    width:100% !important;
    height:270px !important;
    object-fit:cover !important;
  }

  .gallery-card figcaption{
    left:14px !important;
    right:14px !important;
    bottom:14px !important;
    font-size:.92rem !important;
    line-height:1.15 !important;
  }

  .gallery-control{ display:none !important; }

  /* ── CLIENTES ── */
  .client-tags{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:10px !important;
    width:100% !important;
  }

  .client-tags span{
    width:100% !important;
    min-height:46px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    padding:10px 8px !important;
    border-radius:14px !important;
    background:#f1f3f8 !important;
    color:#121936 !important;
    border:1px solid #e0e4ec !important;
    font-size:.88rem !important;
    font-weight:850 !important;
    line-height:1.1 !important;
    text-align:center !important;
    white-space:nowrap !important;
  }

  .logo-cloud{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:10px !important;
    width:100% !important;
  }

  .logo-cloud img{
    height:86px !important;
    padding:14px !important;
    border-radius:16px !important;
    background:#f7f5f0 !important;
  }

  /* ── CONTATO ── */
  .contact{
    background:linear-gradient(180deg,#0c132d,#121936) !important;
  }

  .contact-card,
  .lead-box{
    width:100% !important;
    max-width:100% !important;
    padding:20px 16px !important;
    border-radius:20px !important;
    overflow:hidden !important;
    transform:none !important;
  }

  .contact-methods{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:10px !important;
    width:100% !important;
    margin-top:22px !important;
  }

  /* cada link de contato: ícone + textos lado a lado, sem quebrar */
  .contact-methods a.contact-link{
    width:100% !important;
    min-width:0 !important;

    display:grid !important;
    grid-template-columns:38px minmax(0,1fr) !important;
    align-items:center !important;
    gap:10px !important;

    padding:11px !important;
    border-radius:15px !important;

    background:rgba(255,255,255,.09) !important;
    border:1px solid rgba(255,255,255,.14) !important;
    overflow:hidden !important;
  }

  .contact-methods .contact-icon{
    width:38px !important;
    height:38px !important;
    min-width:38px !important;
    border-radius:12px !important;
  }

  .contact-methods .contact-link > span:last-child{
    display:block !important;
    min-width:0 !important;
    max-width:100% !important;
    overflow:hidden !important;
  }

  /* label (WhatsApp, E-mail…) */
  .contact-methods .contact-link > span:last-child > span{
    display:block !important;
    color:#ffb3b9 !important;
    font-size:.64rem !important;
    font-weight:900 !important;
    line-height:1 !important;
    letter-spacing:.11em !important;
    text-transform:uppercase !important;
    white-space:nowrap !important;
    word-break:keep-all !important;
    overflow-wrap:normal !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  /* valor (número, e-mail, handle, endereço) — nunca quebra linha */
  .contact-methods .contact-link > span:last-child > strong,
  .contact-methods strong.nowrap-line{
    display:block !important;
    color:#ffffff !important;
    font-size:clamp(.66rem, 2.65vw, .84rem) !important;
    font-weight:850 !important;
    line-height:1.1 !important;
    margin-top:5px !important;
    white-space:nowrap !important;
    word-break:keep-all !important;
    overflow-wrap:normal !important;
    hyphens:none !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    max-width:100% !important;
  }

  .lead-box{ gap:10px !important; }
  .lead-box h3{ font-size:1.25rem !important; }

  .lead-box input,
  .lead-box select,
  .lead-box textarea{
    min-height:46px !important;
    padding:12px !important;
    border-radius:14px !important;
    font-size:.94rem !important;
  }

  .lead-box textarea{ min-height:116px !important; }

  .footer-grid{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:12px !important;
    text-align:center !important;
    justify-items:center !important;
  }

  .footer img{ height:58px !important; }

  .floating-whatsapp{
    right:14px !important;
    bottom:14px !important;
    width:54px !important;
    height:54px !important;
  }

  .floating-whatsapp svg{
    width:30px !important;
    height:30px !important;
  }
}

/* =========================================================
   CELULARES MUITO ESTREITOS  ≤ 380 px
   ========================================================= */
@media (max-width:380px){

  .container{
    width:calc(100% - 20px) !important;
  }

  h1{ font-size:1.86rem !important; }
  h2{ font-size:1.68rem !important; }

  .main-nav.is-open,
  .site-header .main-nav.is-open{
    grid-template-columns:1fr !important;
  }

  .service-tab{
    font-size:.74rem !important;
    min-height:48px !important;
    padding:8px 6px !important;
  }

  .proof-item{
    gap:6px !important;
    padding-inline:7px !important;
  }

  .proof-item strong,
  .proof-item strong.nowrap-line{
    font-size:1.08rem !important;
  }

  .proof-item span,
  .proof-item span.nowrap-line{
    font-size:.55rem !important;
    letter-spacing:-.03em !important;
  }

  .contact-methods .contact-link > span:last-child > strong,
  .contact-methods strong.nowrap-line{
    font-size:.64rem !important;
  }

  .client-tags span{
    font-size:.78rem !important;
  }
}