/* IDY — MOBILE FINAL baseado no gabarito aprovado. Desktop permanece intacto. */
@media (max-width:620px){
  html,body{overflow-x:hidden!important}
  .topbar{display:none!important}

  .nav{position:relative!important;z-index:100!important;background:#fff!important}
  .nav .container{
    height:86px!important;min-height:86px!important;padding:8px 13px!important;
    display:flex!important;align-items:center!important;gap:8px!important
  }
  .logo{width:105px!important;flex:0 0 105px!important}
  .logo img{width:105px!important;height:auto!important;display:block!important}
  .navlinks{display:none!important}
  .cta.cta-ai{
    margin-left:auto!important;width:184px!important;height:54px!important;padding:7px 10px!important;
    border-radius:16px!important;gap:8px!important;background:linear-gradient(180deg,#21362d,#101a16)!important;
    border:1px solid rgba(75,239,113,.45)!important
  }
  .cta-ai-icon{width:31px!important;height:31px!important;flex:0 0 31px!important}
  .cta-ai-icon svg{width:17px!important;height:17px!important}
  .cta-ai-copy strong{font-size:10.7px!important;line-height:1!important;white-space:nowrap!important}
  .cta-ai-copy small{font-size:7.2px!important;line-height:1.1!important;margin-top:3px!important}
  .cta-ai-arrow{font-size:0!important;width:10px!important}
  .cta-ai-arrow:before{
    content:""!important;display:block!important;width:10px!important;height:10px!important;border-radius:50%!important;
    background:#21ef51!important;box-shadow:0 0 0 3px rgba(33,239,81,.16),0 0 10px #21ef51!important
  }
  .mobile-menu-toggle{
    display:flex!important;width:31px!important;height:36px!important;flex:0 0 31px!important;padding:0!important;
    border:0!important;background:transparent!important;flex-direction:column!important;justify-content:center!important;gap:5px!important
  }
  .mobile-menu-toggle span{width:27px!important;height:3px!important;background:#111!important;border-radius:9px!important}
  .navlinks.open{
    display:flex!important;position:absolute!important;top:86px!important;left:12px!important;right:12px!important;
    flex-direction:column!important;gap:12px!important;padding:16px!important;background:#fff!important;
    border-radius:14px!important;box-shadow:0 12px 28px rgba(0,0,0,.18)!important
  }

  /* Primeira composição */
  .hero{
    position:relative!important;height:1115px!important;min-height:1115px!important;overflow:hidden!important;
    background:#001c14!important
  }
  .hero-media{position:absolute!important;inset:0!important}
  .hero-media img{
    width:100%!important;height:100%!important;object-fit:cover!important;object-position:68% 50%!important
  }
  .hero-media:after{
    content:""!important;position:absolute!important;inset:0!important;
    background:
      linear-gradient(90deg,rgba(0,28,20,.96) 0%,rgba(0,28,20,.90) 39%,rgba(0,28,20,.42) 70%,rgba(0,20,14,.15) 100%),
      linear-gradient(180deg,rgba(0,26,19,.58),rgba(0,21,15,.16) 72%,rgba(0,18,13,.43))!important
  }
  .hero .container{
    position:absolute!important;inset:0!important;z-index:5!important;width:100%!important;max-width:none!important;
    padding:0!important;margin:0!important
  }
  .hero-copy{max-width:none!important}
  /* Posicionamento e padding do banner inicial não devem cortar os banners internos. */
  .hero .hero-copy{position:absolute!important;inset:0!important;padding:0!important;max-width:none!important}

  .eyebrow{
    position:absolute!important;top:38px!important;left:28px!important;width:88%!important;
    margin:0!important;color:#94e83e!important;font-size:10px!important;line-height:1.25!important;
    letter-spacing:.105em!important;font-weight:900!important;white-space:nowrap!important
  }
  .hero h1{
    position:absolute!important;top:77px!important;left:28px!important;width:66%!important;max-width:none!important;
    margin:0!important;color:#fff!important;font-size:42px!important;line-height:.95!important;
    letter-spacing:-.045em!important;font-weight:950!important
  }
  .hero h1 span{display:block!important;color:#0875f5!important}
  .hero p{
    position:absolute!important;top:304px!important;left:28px!important;width:49%!important;max-width:none!important;
    margin:0!important;color:#f5f7f6!important;font-size:12.1px!important;line-height:1.48!important;font-weight:500!important
  }

  .badges{
    position:absolute!important;top:515px!important;left:22px!important;width:48%!important;max-width:none!important;
    display:flex!important;flex-direction:column!important;gap:10px!important;margin:0!important;z-index:12!important
  }
  .badge{
    position:relative!important;display:flex!important;align-items:center!important;height:51px!important;min-height:51px!important;
    padding:0 10px 0 48px!important;border-radius:999px!important;background:rgba(0,18,12,.48)!important;
    border:1.2px solid rgba(116,246,96,.75)!important;color:#fff!important;font-size:11.2px!important;
    line-height:1.12!important;font-weight:850!important;white-space:normal!important
  }
  .badge:before{
    content:"✦"!important;position:absolute!important;left:17px!important;top:50%!important;transform:translateY(-50%)!important;
    color:#63ff77!important;font-size:22px!important;line-height:1!important
  }
  .badge:nth-child(3):before{content:"⚙"!important;font-size:21px!important}
  .badge:nth-child(4):before{content:"◉"!important;font-size:20px!important}

  .hero-actions{
    position:absolute!important;left:28px!important;top:752px!important;width:63%!important;max-width:none!important;
    margin:0!important;z-index:15!important
  }
  .hero-actions .ghost{display:none!important}
  .hero-actions .primary{
    display:flex!important;width:100%!important;height:62px!important;align-items:center!important;justify-content:center!important;
    padding:0 15px!important;border:0!important;border-radius:24px!important;
    background:linear-gradient(135deg,#42ee53,#82ff3e)!important;color:#071209!important;
    box-shadow:0 12px 28px rgba(48,225,80,.24)!important;font-size:0!important
  }
  .hero-actions .primary:before{
    content:"▣"!important;margin-right:15px!important;font-size:25px!important;font-weight:900!important
  }
  .hero-actions .primary:after{
    content:"Peça seu orçamento  →"!important;font-size:14px!important;font-weight:950!important;white-space:nowrap!important
  }

  /* Mascote exatamente dentro da primeira composição */
  .hero-mascot-glow{
    display:block!important;position:absolute!important;z-index:6!important;right:-48px!important;top:344px!important;
    width:370px!important;height:650px!important;border-radius:50%!important;
    background:radial-gradient(ellipse at 50% 45%,rgba(116,255,77,.93) 0%,rgba(72,243,79,.58) 25%,rgba(36,203,70,.31) 45%,rgba(0,0,0,0) 70%)!important;
    filter:blur(17px)!important;opacity:1!important
  }
  .hero-mascot{
    position:absolute!important;z-index:10!important;right:-80px!important;top:335px!important;bottom:auto!important;left:auto!important;
    width:405px!important;max-width:none!important;height:auto!important;transform:none!important;
    filter:drop-shadow(0 0 12px rgba(111,255,80,.55)) drop-shadow(0 18px 14px rgba(0,0,0,.30))!important
  }

  .whats-note{display:none!important}
  .whats-widget{position:absolute!important;right:16px!important;top:990px!important;bottom:auto!important;z-index:30!important}
  .whats-widget .whats.whats-pro.whats-new{
    width:76px!important;height:76px!important;min-width:76px!important;padding:0!important;border-radius:50%!important;
    display:flex!important;align-items:center!important;justify-content:center!important;background:#20d957!important;
    border:5px solid #fff!important;box-shadow:0 10px 20px rgba(0,0,0,.28),0 0 0 4px rgba(62,235,92,.18)!important
  }
  .whats-widget .whats.whats-pro.whats-new:after{
    content:""!important;position:absolute!important;right:3px!important;top:3px!important;width:13px!important;height:13px!important;
    border-radius:50%!important;background:#ff4b4b!important;border:2px solid #fff!important
  }
  .whats-widget .whats-icon-clean{width:39px!important;height:39px!important;flex:0 0 39px!important;background:#fff!important}
  .whats-widget .whats-icon-clean svg{width:26px!important;height:26px!important;color:#18c45a!important}
  .whats-widget .whats-copy,.whats-widget .whats-arrow{display:none!important}

  .hero + .section{padding-top:42px!important}
}

/* aparelhos estreitos como o print real */
@media (max-width:390px){
  .nav .container{padding-left:10px!important;padding-right:10px!important;gap:6px!important}
  .logo,.logo img{width:98px!important}.logo{flex-basis:98px!important}
  .cta.cta-ai{width:174px!important;height:52px!important}
  .mobile-menu-toggle{width:29px!important;flex-basis:29px!important}
  .mobile-menu-toggle span{width:25px!important}

  .hero{height:1090px!important;min-height:1090px!important}
  .eyebrow{left:24px!important;top:35px!important;font-size:9.4px!important}
  .hero h1{left:24px!important;top:72px!important;width:68%!important;font-size:39px!important}
  .hero p{left:24px!important;top:287px!important;width:50%!important;font-size:11.5px!important}
  .badges{left:18px!important;top:497px!important;width:49%!important}
  .badge{height:49px!important;min-height:49px!important;font-size:10.6px!important;padding-left:44px!important}
  .badge:before{left:15px!important}
  .hero-actions{left:24px!important;top:728px!important;width:65%!important}
  .hero-actions .primary{height:59px!important}
  .hero-actions .primary:after{font-size:13px!important}
  .hero-mascot{width:390px!important;right:-88px!important;top:323px!important}
  .hero-mascot-glow{right:-58px!important;top:334px!important;width:350px!important;height:630px!important}
  .whats-widget{top:966px!important;right:12px!important}
}


/* AJUSTE FINAL DE ENQUADRAMENTO — mantém mascote no mesmo tamanho */
@media (max-width:620px){
  /* fundo: menos recorte lateral */
  .hero-media img{
    object-fit:cover!important;
    object-position:61% 50%!important;
    transform:scale(.94)!important;
    transform-origin:center center!important;
    width:106.4%!important;
    height:106.4%!important;
    margin-left:-3.2%!important;
    margin-top:-3.2%!important;
  }

  /* compacta somente textos e blocos, sem reduzir mascote */
  .eyebrow{
    left:24px!important;
    width:90%!important;
    font-size:9.5px!important;
    letter-spacing:.09em!important;
  }
  .hero h1{
    left:24px!important;
    width:62%!important;
    font-size:39px!important;
    line-height:.94!important;
  }
  .hero p{
    left:24px!important;
    top:286px!important;
    width:47%!important;
    font-size:11.5px!important;
    line-height:1.46!important;
  }

  .badges{
    left:18px!important;
    top:492px!important;
    width:46%!important;
    gap:9px!important;
  }
  .badge{
    height:48px!important;
    min-height:48px!important;
    padding-left:43px!important;
    font-size:10.4px!important;
  }
  .badge:before{left:14px!important}

  .hero-actions{
    left:22px!important;
    top:716px!important;
    width:60%!important;
  }
  .hero-actions .primary{
    height:58px!important;
    min-height:58px!important;
  }
  .hero-actions .primary:after{
    font-size:12.8px!important;
  }

  /* Mascote permanece grande como na versão aprovada */
  .hero-mascot{
    width:405px!important;
    right:-80px!important;
    top:335px!important;
  }
  .hero-mascot-glow{
    right:-48px!important;
    top:344px!important;
    width:370px!important;
    height:650px!important;
  }

  /* WhatsApp mais alto */
  .whats-widget{
    top:885px!important;
    right:16px!important;
    bottom:auto!important;
  }
}

@media (max-width:390px){
  .hero-media img{
    object-position:59% 50%!important;
  }
  .eyebrow{left:20px!important;font-size:9px!important}
  .hero h1{
    left:20px!important;
    top:70px!important;
    width:64%!important;
    font-size:36px!important;
  }
  .hero p{
    left:20px!important;
    top:270px!important;
    width:48%!important;
    font-size:10.8px!important;
  }
  .badges{
    left:16px!important;
    top:474px!important;
    width:47%!important;
  }
  .badge{
    height:46px!important;
    min-height:46px!important;
    font-size:9.8px!important;
    padding-left:40px!important;
  }
  .hero-actions{
    left:20px!important;
    top:688px!important;
    width:62%!important;
  }
  .hero-actions .primary{
    height:56px!important;
    min-height:56px!important;
  }

  /* não reduzir mascote em telas estreitas */
  .hero-mascot{
    width:405px!important;
    right:-92px!important;
    top:318px!important;
  }
  .hero-mascot-glow{
    width:370px!important;
    height:650px!important;
    right:-58px!important;
    top:330px!important;
  }

  .whats-widget{
    top:855px!important;
    right:12px!important;
  }
}


/* WhatsApp acima da cabeça do mascote — somente celular */
@media (max-width:620px){
  .whats-widget{
    top:270px!important;
    right:18px!important;
    bottom:auto!important;
    z-index:40!important;
  }
}
@media (max-width:390px){
  .whats-widget{
    top:255px!important;
    right:12px!important;
  }
}


/* Responsividade da página inicial: o conteúdo determina a altura dos blocos. */
@media (max-width:620px){
  body{display:flex;flex-direction:column}
  .nav{order:-3}
  .hero{
    order:-2;display:flex!important;flex-direction:column!important;
    height:auto!important;min-height:0!important;padding-bottom:24px!important;
    overflow:hidden!important
  }
  .hero .container{
    position:relative!important;inset:auto!important;
    width:100%!important;padding:36px 24px 0!important;
    display:block!important
  }
  .hero .hero-copy{
    position:relative!important;inset:auto!important;
    width:100%!important;max-width:none!important;padding:0!important
  }
  .eyebrow{
    position:static!important;width:auto!important;
    margin:0 0 16px!important;white-space:normal!important;
    font-size:12px!important;line-height:1.5!important
  }
  .hero h1{
    position:static!important;width:100%!important;max-width:none!important;
    margin:0 0 24px!important;font-size:clamp(36px,9.5vw,48px)!important;
    line-height:1.08!important;overflow-wrap:break-word
  }
  .hero p{
    position:static!important;width:100%!important;max-width:none!important;
    margin:0 0 24px!important;font-size:16px!important;line-height:1.6!important
  }
  .hero .badges{
    position:static!important;width:100%!important;max-width:none!important;
    display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;margin:0 0 24px!important
  }
  .hero .badge{
    height:auto!important;min-height:54px!important;
    padding:12px 12px 12px 38px!important;font-size:12px!important;line-height:1.4!important
  }
  .hero .badge:before{left:12px!important;font-size:18px!important}
  .hero .hero-actions{
    position:static!important;width:100%!important;max-width:none!important;
    margin:0!important
  }
  .hero .hero-actions .primary{
    height:auto!important;min-height:58px!important;padding:16px!important;
    font-size:15px!important;line-height:1.4!important
  }
  .hero .hero-actions .primary:before{margin-right:10px!important}
  .hero .hero-actions .primary:after{content:none!important}
  /* 405 px é o tamanho mobile existente: apenas o posicionamento muda. */
  .hero .hero-mascot{
    position:relative!important;inset:auto!important;
    width:405px!important;max-width:none!important;height:auto!important;
    flex:0 0 auto!important;align-self:center!important;
    margin:32px 0 0!important;transform:none!important
  }
  .hero .hero-mascot-glow{
    z-index:1!important;
    top:auto!important;bottom:24px!important;left:50%!important;right:auto!important;
    width:370px!important;height:650px!important;transform:translateX(-50%)!important;
    pointer-events:none
  }
  /* Área própria entre a apresentação e os serviços, sem cobrir texto. */
  .whats-widget{
    order:-1;position:relative!important;inset:auto!important;
    width:100%!important;padding:8px 18px 24px!important;margin:0!important;
    background:#001c14;display:flex!important;align-items:center!important;
    flex-direction:row!important;justify-content:flex-end!important;gap:0!important
  }
  .section{height:auto!important}
  .whats-widget .whats.whats-pro.whats-new{position:relative!important}
  .section-head{flex-direction:column;align-items:stretch;gap:16px}
  .section-head>div,.section-head>p,.copy{min-width:0}
  .section-head p{margin:0;max-width:none}
  .section h2{line-height:1.15;overflow-wrap:break-word}
  .section .eyebrow{margin-bottom:12px!important}
  .footer a,.footer span{overflow-wrap:anywhere}
  .cta-ai-copy strong{font-size:12px!important;line-height:1.2!important}
  .cta.cta-ai{width:190px!important;min-width:0!important;flex-shrink:0!important}
  .cta-ai-copy small{font-size:9px!important;line-height:1.3!important}
}
@media (max-width:350px){
  .nav .container{
    display:grid!important;grid-template-columns:1fr 31px!important;
    height:auto!important;min-height:86px!important;padding:12px!important;gap:12px!important
  }
  .mobile-menu-toggle{grid-column:2;grid-row:1}
  .cta.cta-ai{
    grid-column:1 / -1;grid-row:2;
    width:100%!important;max-width:none!important;height:58px!important;margin:0!important
  }
  .navlinks.open{top:100%!important}
  .hero .container{padding-left:20px!important;padding-right:20px!important}
  .hero .badges{grid-template-columns:1fr!important}
}


/* A mesma imagem é reutilizada no mobile; a composição desktop original permanece. */
.hero .hero-copy > .hero-mascot{display:none}
/* Mascote original integrado ao texto, sem reduzir os 405 px do mobile. */
@media (max-width:620px){
  .hero{
    display:flow-root!important;padding:28px 24px 24px!important;
  }
  .hero .container,.hero .hero-copy{display:contents!important}
  .hero > .hero-mascot{display:none!important}
  .hero .hero-copy > .hero-mascot{display:block!important}
  .hero .hero-mascot{
    float:right!important;margin:0 calc(62vw - 405px) 16px 12px!important;
    shape-outside:url("mascote-idy.png");shape-image-threshold:.1;shape-margin:12px;
  }
  .hero .eyebrow,.hero h1,.hero p{
    position:relative!important;inset:auto!important;z-index:20!important;
  }
  .hero .eyebrow{font-size:11px!important;line-height:1.5!important;margin-bottom:16px!important}
  .hero h1{
    font-size:clamp(24px,6.8vw,30px)!important;line-height:1.1!important;
    overflow-wrap:normal
  }
  .hero h1 span{color:#35ee48!important}
  .hero p{font-size:15px!important;line-height:1.6!important}
  .hero .badges{clear:both!important;position:relative!important;inset:auto!important;z-index:20!important}
  .hero .hero-actions{position:relative!important;inset:auto!important;z-index:20!important}
  .hero .hero-mascot-glow{
    top:32px!important;bottom:auto!important;left:auto!important;right:-52px!important;
    transform:none!important
  }
}
@media (max-width:350px){
  .hero{padding-left:20px!important;padding-right:20px!important}
  .hero{display:flex!important;flex-direction:column!important}
  .hero .hero-mascot{
    float:none!important;order:3;align-self:center!important;
    margin:12px 0 24px!important
  }
  .hero .eyebrow{order:1}
  .hero h1{order:2;font-size:24px!important}
  .hero p{order:4}
  .hero .badges{order:5}
  .hero .hero-actions{order:6}
  .hero .hero-mascot-glow{display:none!important}
}

/* WhatsApp sobre o tênis direito; durante a rolagem, fica no canto inferior. */
@media (max-width:620px){
  html,body{overflow-x:clip!important}
  .whats-widget{
    position:fixed!important;inset:auto!important;
    --idy-whats-safe-bottom:env(safe-area-inset-bottom,0px);
    top:var(--idy-whats-top,calc(100dvh - 84px))!important;
    right:max(16px,env(safe-area-inset-right,0px))!important;
    align-self:flex-end!important;width:64px!important;height:64px!important;
    padding:0!important;margin:0!important;
    visibility:hidden!important;pointer-events:none!important;
    background:transparent!important;z-index:90!important
  }
}

@media (max-width:620px){
  .whats-widget.whats-ready{visibility:visible!important;pointer-events:auto!important}
}

/* Acabamento do atalho mobile: símbolo branco, verde WhatsApp e foco visível. */
@media (max-width:620px){
  .whats-widget .whats.whats-pro.whats-new{
    width:64px!important;height:64px!important;min-width:64px!important;
    border-radius:20px!important;border:1px solid rgba(210,255,224,.65)!important;
    background:#25d366!important;
    box-shadow:0 10px 24px rgba(0,0,0,.3),0 3px 10px rgba(18,190,90,.22),inset 0 1px 0 rgba(255,255,255,.25)!important;
    transition:transform .18s ease,box-shadow .18s ease!important
  }
  .whats-widget .whats.whats-pro.whats-new:after{content:none!important}
  .whats-widget .whats-icon-clean{
    width:38px!important;height:38px!important;flex:0 0 38px!important;
    background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important
  }
  .whats-widget .whats-icon-clean svg{width:38px!important;height:38px!important;color:#fff!important}
  .whats-widget .whats.whats-pro.whats-new:focus-visible{outline:3px solid #fff!important;outline-offset:4px}
  .whats-widget .whats.whats-pro.whats-new:hover{
    background:#25d366!important;filter:brightness(1.05)!important;
    box-shadow:0 12px 26px rgba(0,0,0,.32),0 4px 12px rgba(18,190,90,.28)!important
  }
  .whats-widget .whats.whats-pro.whats-new:active{transform:scale(.96)!important}
}
@media (max-width:620px) and (prefers-reduced-motion:reduce){
  .whats-widget .whats.whats-pro.whats-new{transition:none!important}
}

/* Cor do fundo do botão Orçamento com IA. */
.nav .cta.cta-ai{background:#1559C9!important}

/* Revisão visual: foto da máquina sem interface gravada e contraste da fachada.
   Somente os dois banners mobile; arquivos originais e desktop preservados. */
@media (max-width:620px){
  .service-hero-cortes{
    background:#002a1f url("cortes-especiais-maquina-card.png") center/cover no-repeat;
  }
  .service-hero-cortes > img{display:none}
  .service-hero-cortes:after{
    background:linear-gradient(90deg,rgba(0,42,31,.94),rgba(0,42,31,.82));
  }
  .service-hero.facade:after{
    background:linear-gradient(90deg,rgba(0,42,31,.96),rgba(0,42,31,.86));
  }
}