@font-face{font-family:'Poppins';src:url('../fonts/Poppins-Black.ttf') format('truetype');font-weight:900;font-style:normal;font-display:swap}
  @font-face{font-family:'Poppins';src:url('../fonts/Poppins-ExtraBold.ttf') format('truetype');font-weight:800;font-style:normal;font-display:swap}
  @font-face{font-family:'Poppins';src:url('../fonts/Poppins-Bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}
  @font-face{font-family:'Poppins';src:url('../fonts/Poppins-SemiBold.ttf') format('truetype');font-weight:600;font-style:normal;font-display:swap}
  @font-face{font-family:'Poppins';src:url('../fonts/Poppins-Medium.ttf') format('truetype');font-weight:500;font-style:normal;font-display:swap}
  @font-face{font-family:'Poppins';src:url('../fonts/Poppins-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
  *,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{font-family:'Inter',sans-serif;background:#fff;color:#16242d;-webkit-font-smoothing:antialiased}
  #root{min-height:100vh}
  ::-webkit-scrollbar{width:6px}
  ::-webkit-scrollbar-track{background:#16242d}
  ::-webkit-scrollbar-thumb{background:#d6b886;border-radius:3px}
  ::selection{background:rgba(214,184,134,.3);color:#16242d}
  @keyframes fadeInUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}
  @keyframes pulseRing{0%,100%{transform:scale(1);opacity:.7}50%{transform:scale(1.5);opacity:0}}
  @keyframes gridMove{0%{background-position:0 0}100%{background-position:60px 60px}}
  @keyframes scanline{0%{top:-2px}100%{top:100%}}
  @keyframes particleDrift{0%{transform:translateY(0) translateX(0);opacity:0}10%{opacity:.5}90%{opacity:.2}100%{transform:translateY(-110px) translateX(20px);opacity:0}}
  @keyframes shimmerBar{0%{background-position:-400px 0}100%{background-position:400px 0}}
  @keyframes float3d{0%,100%{transform:translateY(0) rotateX(0)}50%{transform:translateY(-12px) rotateX(2deg)}}
  @keyframes glowPulse{0%,100%{box-shadow:0 0 0 rgba(214,184,134,.4),0 20px 60px rgba(0,0,0,.4)}50%{box-shadow:0 0 40px rgba(214,184,134,.25),0 30px 80px rgba(0,0,0,.5)}}
  @keyframes tiltIn{from{opacity:0;transform:perspective(1000px) rotateY(-12deg) translateZ(-50px)}to{opacity:1;transform:perspective(1000px) rotateY(0) translateZ(0)}}
  @keyframes orb{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(40px,-30px) scale(1.1)}66%{transform:translate(-30px,20px) scale(.95)}}
  .tilt-card{transform-style:preserve-3d;transition:transform 400ms cubic-bezier(.2,.8,.2,1)}
  .tilt-card:hover{transform:perspective(1200px) rotateX(4deg) rotateY(-6deg) translateZ(20px) scale(1.02)}
  .tilt-card .tilt-shine{position:absolute;inset:0;background:linear-gradient(135deg,transparent 40%,rgba(255,255,255,.08) 50%,transparent 60%);opacity:0;transition:opacity 400ms;pointer-events:none;border-radius:inherit}
  .tilt-card:hover .tilt-shine{opacity:1}
  .pr-img{transition:transform 600ms cubic-bezier(.2,.8,.2,1)}
  .tilt-card:hover .pr-img{transform:scale(1.08)}
  .pr-overlay-text{transform:translateY(8px);opacity:.85;transition:all 400ms}
  .tilt-card:hover .pr-overlay-text{transform:translateY(0);opacity:1}

  /* ───── RESPONSIVE LAYER (universal — works regardless of inline style strings) ───── */
  html,body{overflow-x:hidden;max-width:100vw}
  img{max-width:100%;height:auto}
  .mobile-only{display:none}
  .desktop-only{display:flex}

  /* TABLET ≤ 1024px ─────────────────────────────────────── */
  @media (max-width: 1024px){
    section, header > div, footer > div, main > div > div {padding-left:24px !important;padding-right:24px !important}
    /* Universal grid collapse — any grid-template-columns becomes single col */
    div[style*="grid-template-columns"]:not(form div):not([style*="repeat(3"]):not([style*="2fr 1.2fr"]){grid-template-columns:1fr !important;gap:40px !important}
    /* Services 3-col → 2-col */
    div[style*="repeat(3"]{grid-template-columns:repeat(2,1fr) !important;gap:18px !important}
    /* Footer 4-col → 2x2 */
    footer div[style*="2fr 1.2fr"]{grid-template-columns:1fr 1fr !important;gap:36px !important}
    /* Form rows stay 2-col on tablet */
    form div[style*="grid-template-columns"]{grid-template-columns:1fr 1fr !important;gap:12px !important}
    /* Hide right-side dark background panel on segmentos hero */
    div[style*="width: 45%"]{display:none !important}
    /* SceneCard fluid */
    div[style*="width: 360px"]{width:100% !important;max-width:420px !important;height:auto !important;min-height:360px !important}
    /* Header tighter */
    header > div{gap:20px !important;padding:0 24px !important;height:68px !important}
    header nav button{padding:8px 10px !important;font-size:13px !important}
  }

  /* SMALL TABLET ≤ 900px — hide desktop nav, show hamburger ─ */
  @media (max-width: 900px){
    .desktop-only{display:none !important}
    .mobile-only{display:flex !important}
  }

  /* MOBILE ≤ 768px ──────────────────────────────────────── */
  @media (max-width: 768px){
    /* Locação photo — shrink ratio so it doesn't tower over text */
    .locacao-photo{aspect-ratio:4/3 !important;max-height:360px}
    /* Sweep paddings: section + any padded wrapper */
    section, header > div, footer > div, main > div > div, div[style*="padding: 110px"], div[style*="padding:110px"]{
      padding-left:18px !important;padding-right:18px !important
    }
    section{padding-top:56px !important;padding-bottom:56px !important}
    /* Hero shells specifically */
    section[style*="min-height: 100vh"] > div[style*="max-width: 1280"], 
    section > div[style*="padding: 110px"]{padding-top:96px !important;padding-bottom:56px !important}

    /* Universal: ALL grids → single column */
    div[style*="grid-template-columns"]{grid-template-columns:1fr !important;gap:24px !important}
    /* Footer-specific (beats tablet 2-col rule's specificity) */
    footer div[style*="grid-template-columns"]{grid-template-columns:1fr !important;gap:28px !important}
    /* Form rows too */
    form div[style*="grid-template-columns"]{grid-template-columns:1fr !important;gap:14px !important}

    /* Hide decorative right panel on segmentos */
    div[style*="width: 45%"]{display:none !important}
    /* SceneCard fluid */
    div[style*="width: 360px"]{width:100% !important;max-width:100% !important;height:auto !important;min-height:340px !important}

    /* Header */
    header > div{padding:0 18px !important;height:64px !important;gap:12px !important}
    header img[alt="Sherlock BR"]{height:36px !important}
    main{padding-top:64px !important}

    /* Floating WhatsApp → circle icon */
    a[href*="wa.me"][style*="position: fixed"]{
      padding:0 !important;font-size:0 !important;gap:0 !important;
      bottom:20px !important;right:18px !important;
      border-radius:50% !important;width:56px !important;height:56px !important;
      justify-content:center !important;
    }
    a[href*="wa.me"][style*="position: fixed"] svg{width:26px !important;height:26px !important}

    /* CTA bars: stack flex rows */
    div[style*="border-radius: 14px"][style*="padding: 24px 30px"]{
      padding:18px 16px !important;flex-direction:column !important;align-items:stretch !important;gap:14px !important
    }
    div[style*="border-radius: 14px"][style*="padding: 24px 30px"] > div{justify-content:flex-start !important}
    div[style*="border-radius: 14px"][style*="padding: 24px 30px"] a{justify-content:center !important;width:100% !important;text-align:center !important}

    /* Buttons wrap */
    a[href*="wa.me"]:not([style*="position: fixed"]){white-space:normal !important;text-align:center !important}

    /* Headline letter-spacing */
    h1, h2{letter-spacing:-0.5px !important;word-break:break-word}

    /* Cards: shrink heavy paddings */
    div[style*="padding: 36px 32px"], div[style*="padding: 38px 34px"], div[style*="padding: 36px 36px"]{
      padding:24px 20px !important;min-height:auto !important
    }
    div[style*="padding: 26px 22px"], div[style*="padding: 26px 20px"]{padding:20px 16px !important}
    div[style*="padding: 28px 28px"]{padding:22px 18px !important}

    /* Testimonial big quote mark */
    div[style*="font-size: 72px"]{font-size:54px !important}

    /* Disable tilt hover on touch */
    .tilt-card:hover{transform:none !important}
    .tilt-card{aspect-ratio:auto !important;min-height:280px !important}

    /* Stat grids that must stay 2-col on mobile */
    div[style*="grid-template-columns: 1fr 1fr"][style*="gap: 14px"]{grid-template-columns:1fr 1fr !important;gap:10px !important}

    /* Timeline list buttons */
    div[style*="grid-template-columns: 1fr 2fr"] > div:first-child > button{padding:10px 12px !important}

    /* Footer bottom row stacks */
    footer div[style*="justify-content: space-between"][style*="flex-wrap: wrap"]{
      flex-direction:column !important;align-items:flex-start !important;gap:8px !important
    }

    /* Make sure no element causes overflow */
    *{max-width:100%}
    div, section, header, footer, main, nav, form{max-width:100% !important}

    /* CTA section big inner padding */
    section[style*="padding: 76px 32px"]{padding:56px 18px !important}
  }

  /* EXTRA SMALL ≤ 420px ─────────────────────────────────── */
  @media (max-width: 420px){
    section, main > div > div, header > div, footer > div{padding-left:14px !important;padding-right:14px !important}
    h1{font-size:28px !important;line-height:1.12 !important}
    h2{font-size:22px !important;line-height:1.18 !important}
    h3{font-size:18px !important}
    /* Stat grids → single col on very small */
    div[style*="grid-template-columns: 1fr 1fr"][style*="gap: 14px"]{grid-template-columns:1fr !important}
    /* Segment pills wrap nicely */
    div[style*="padding: 18px 16px"]{padding:14px 12px !important}
    div[style*="padding: 16px 20px"][style*="border-radius: 12px"]{padding:12px 14px !important;gap:12px !important}
    /* Reduce big clamp paddings */
    section[style*="padding: 76px 32px"]{padding:48px 14px !important}
  }

  /* Mobile menu styles */
  .hamburger{
    display:none;
    background:none;border:none;cursor:pointer;
    width:42px;height:42px;border-radius:8px;
    align-items:center;justify-content:center;
    color:#d6b886;
    flex-direction:column;gap:5px;padding:0;
    transition:background 200ms;
  }
  .hamburger:hover{background:rgba(214,184,134,0.10)}
  .hamburger span{display:block;width:22px;height:2px;background:#d6b886;border-radius:2px;transition:all 250ms}
  .hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .hamburger.open span:nth-child(2){opacity:0}
  .hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  @media (max-width: 900px){
    .hamburger{display:flex}
  }

  .mobile-menu-overlay{
    position:fixed;inset:0;background:rgba(1,12,18,0.92);backdrop-filter:blur(10px);
    z-index:998;opacity:0;pointer-events:none;transition:opacity 280ms ease;
  }
  .mobile-menu-overlay.open{opacity:1;pointer-events:auto}
  .mobile-menu-panel-fixed{
    position:fixed;top:64px;left:0;right:0;
    background:#0a1a22;border-bottom:1px solid rgba(214,184,134,0.20);
    z-index:999;padding:20px 18px 28px;
    transform:translateY(-12px);opacity:0;pointer-events:none;
    transition:all 280ms cubic-bezier(.2,.8,.2,1);
    max-height:calc(100vh - 64px);overflow-y:auto;
  }
  .mobile-menu-panel-fixed.open{transform:translateY(0);opacity:1;pointer-events:auto}
  .mobile-menu-panel-fixed .mlink{
    display:flex;align-items:center;justify-content:space-between;width:100%;
    background:none;border:none;cursor:pointer;
    padding:14px 14px;border-radius:10px;
    font-family:'Inter',sans-serif;font-size:15px;font-weight:600;
    color:rgba(255,255,255,0.88);text-align:left;text-decoration:none;
    transition:all 200ms;
  }
  .mobile-menu-panel-fixed .mlink:hover,
  .mobile-menu-panel-fixed .mlink:active,
  .mobile-menu-panel-fixed .mlink:focus,
  .mobile-menu-panel-fixed .mlink.active{
    background:rgba(214,184,134,0.10);color:#d6b886;
  }
  .mobile-menu-panel-fixed .mcta:hover,.mobile-menu-panel-fixed .mcta:active{color:#16242d}
  .mobile-menu-panel-fixed .mcta{
    display:flex;align-items:center;justify-content:center;gap:10px;
    margin-top:14px;padding:14px 18px;
    background:#d6b886;color:#16242d;
    font-family:'Inter',sans-serif;font-size:14px;font-weight:800;
    border-radius:8px;text-decoration:none;
  }

/* ── nav links (page anchors render as <a>) ── */
header nav a{text-decoration:none;display:inline-flex;align-items:center}
#home,#problemas,#services,#locacao,#implantacao,#aluguel,main > div > div[id]{scroll-margin-top:84px}
@media (max-width:1180px){header nav a,header nav button{padding:8px 11px !important;font-size:13px !important}header > div{gap:24px !important}}
a{color:#16242d}a:hover{color:#c4a673}

/* ── Blog / Article typography ── */
.art{font-family:'Inter',sans-serif;color:#41525c;font-size:16.5px;line-height:1.85}
.art > p{margin-bottom:22px;text-wrap:pretty}
.art h2{font-family:'Poppins',sans-serif;font-size:clamp(21px,2.4vw,29px);font-weight:800;color:#16242d;letter-spacing:-0.4px;line-height:1.22;margin:44px 0 16px}
.art h3{font-family:'Poppins',sans-serif;font-size:18px;font-weight:700;color:#16242d;margin:30px 0 12px}
.art strong{color:#16242d;font-weight:700}
.art ul,.art ol{margin:0 0 24px 0;padding-left:0;list-style:none;display:flex;flex-direction:column;gap:11px}
.art ul li{position:relative;padding-left:26px}
.art ul li::before{content:'';position:absolute;left:4px;top:11px;width:7px;height:7px;border-radius:50%;background:#d6b886}
.art ol{counter-reset:sb}
.art ol li{position:relative;padding-left:34px;counter-increment:sb}
.art ol li::before{content:counter(sb);position:absolute;left:0;top:1px;width:22px;height:22px;border-radius:6px;background:rgba(214,184,134,0.16);color:#a8874a;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center}
.art blockquote{margin:30px 0;padding:22px 26px;background:#f8f9fa;border-radius:12px;border:1px solid #e9ecef;font-family:'Poppins',sans-serif;font-size:17px;font-weight:600;color:#16242d;line-height:1.55}
.art .callout{margin:30px 0;padding:22px 24px;background:linear-gradient(135deg,#012d3a,#16242d);border-radius:14px;border:1px solid rgba(214,184,134,0.18);color:rgba(255,255,255,0.72);font-size:14.5px;line-height:1.7}
.art .callout b{color:#d6b886;display:block;font-family:'Poppins',sans-serif;font-size:13px;letter-spacing:1.4px;text-transform:uppercase;margin-bottom:8px}
.art a{color:#a8874a;font-weight:600;text-decoration:none;border-bottom:1px solid rgba(214,184,134,0.5)}
.art a:hover{color:#16242d;border-bottom-color:#16242d}
.postcard{display:flex;flex-direction:column;background:#fff;border:2px solid #e9ecef;border-radius:16px;overflow:hidden;text-decoration:none;transition:all 260ms cubic-bezier(.2,.8,.2,1)}
.postcard:hover{border-color:#d6b886;transform:translateY(-4px);box-shadow:0 18px 44px rgba(0,0,0,0.10)}
.postcard:hover .pc-title{color:#a8874a}
.postcard:hover .pc-img{transform:scale(1.05)}
@media (max-width:768px){.art{font-size:16px}.art h2{margin:34px 0 12px}}

@media (max-width:900px){.map-grid{grid-template-columns:1fr !important}}