:root{
    --teal:#177F8E;
    --gold:#ECA249;
    --text:#0f172a;
    --muted:#475569;
    --bg:#ffffff;
    --soft:#f6f8fb;
    --card:#ffffff;
    --border:rgba(15,23,42,.10);
    --shadow: 0 10px 25px rgba(15,23,42,.10);
    --radius: 18px;
    --max: 1120px;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    margin:0;
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Helvetica Neue", "Noto Sans", "Liberation Sans", sans-serif;
    color:var(--text);
    background:var(--bg);
    line-height:1.5;
  }
  a{color:inherit; text-decoration:none}
  .container{max-width:var(--max); margin:0 auto; padding:0 20px}
  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:10px;
    padding:12px 16px; border-radius:14px; border:1px solid transparent;
    font-weight:700; cursor:pointer; transition:.2s ease;
    white-space:nowrap;
  }
  .btn-primary{background:var(--teal); color:#fff}
  .btn-primary:hover{filter:brightness(.95)}
  .btn-outline{background:#fff; border-color:var(--border)}
  .btn-outline:hover{background:var(--soft)}
  .pill{
    display:inline-flex; gap:10px; align-items:center;
    padding:8px 12px; border-radius:999px; background:rgba(23,127,142,.08);
    color:var(--teal); font-weight:700; font-size:14px;
    border:1px solid rgba(23,127,142,.18);
  }
  
  /* Header */
  header{
    position:sticky; top:0; z-index:50;
    backdrop-filter:saturate(180%) blur(14px);
    background:rgba(255,255,255,.78);
    border-bottom:1px solid var(--border);
  }
  .nav{
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 0;
    gap:14px;
  }
  .brand{
    display:flex; align-items:center; gap:12px;
    min-width: 220px;
  }
  .brand img{width:44px; height:44px; object-fit:contain}
  .brand .t{display:flex; flex-direction:column; line-height:1.1}
  .brand .t strong{font-size:14px}
  .brand .t span{font-size:12px; color:var(--muted)}
  nav ul{
    list-style:none; margin:0; padding:0;
    display:flex; gap:18px; align-items:center;
  }
  nav a{
    font-weight:700; color:rgba(15,23,42,.80);
    padding:10px 10px; border-radius:12px;
  }
  nav a:hover{background:var(--soft)}
  .nav-cta{display:flex; gap:10px; align-items:center}
  
  /* Mobile nav */
  .menuBtn{display:none}
  @media (max-width: 920px){
    nav ul{display:none}
    .menuBtn{display:inline-flex}
  }
  
  /* Hero */
  .hero{
    padding:54px 0 26px;
    background:
      radial-gradient(900px 400px at 20% 0%, rgba(236,162,73,.20), transparent 60%),
      radial-gradient(900px 420px at 90% 10%, rgba(23,127,142,.22), transparent 60%),
      linear-gradient(180deg, #fff, #fff);
      position: top
  }
  .heroGrid{
    display:grid; grid-template-columns: 1.05fr .95fr; gap:26px;
    align-items:center;
  }
  .hero h1{font-size:42px; line-height:1.12; margin:12px 0 12px}
  .hero p{color:var(--muted); font-size:16px; margin:0 0 18px}
  .heroActions{display:flex; gap:12px; flex-wrap:wrap; margin-top:14px}
  .bullets{display:grid; grid-template-columns:1fr; gap:10px; margin-top:18px}
  .bullet{
    display:flex; gap:10px; align-items:flex-start;
    padding:12px 14px; background:rgba(255,255,255,.72);
    border:1px solid var(--border); border-radius:16px;
    box-shadow: 0 1px 0 rgba(15,23,42,.04);
  }
  .dot{
    width:10px; height:10px; border-radius:99px; margin-top:6px;
    background:var(--gold);
    box-shadow: 0 0 0 4px rgba(236,162,73,.18);
    flex:none;
  }
  .heroCard{
    background:var(--card);
    border:1px solid var(--border);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    overflow:hidden;
  }
  .heroMedia{
    position:relative;
    height: 360px;
    background: linear-gradient(135deg, rgba(23,127,142,.14), rgba(236,162,73,.14));
  }
  .heroMedia img{
    width:100%; height:100%; object-fit:cover; display:block;
    filter:saturate(1.02) contrast(1.02);
  }
  .heroBadge{
    position:absolute; left:16px; bottom:16px;
    background:rgba(255,255,255,.86);
    border:1px solid var(--border);
    padding:10px 12px;
    border-radius:14px;
    font-weight:800;
  }
  .heroMeta{
    padding:16px;
    display:grid; gap:10px;
  }
  .metaRow{
    display:flex; gap:10px; flex-wrap:wrap; align-items:center;
    color:var(--muted); font-weight:700; font-size:14px;
  }
  .tag{
    padding:7px 10px; border-radius:999px;
    border:1px solid rgba(23,127,142,.20);
    background:rgba(23,127,142,.08);
    color:var(--teal);
  }
  @media (max-width: 920px){
    .heroGrid{grid-template-columns:1fr}
    .hero h1{font-size:34px}
    .heroMedia{height:300px}
  }
  
  /* Sections */
  section{padding:56px 0}
  .sectionHead{
    display:flex; align-items:flex-end; justify-content:space-between; gap:16px;
    margin-bottom:18px;
  }
  h2{margin:0; font-size:28px}
  .lead{margin:0; color:var(--muted); max-width: 720px}
  .grid{display:grid; gap:14px}
  .grid-3{grid-template-columns: repeat(3, 1fr)}
  .grid-2{grid-template-columns: repeat(2, 1fr)}
  @media (max-width: 920px){
    .grid-3{grid-template-columns:1fr}
    .grid-2{grid-template-columns:1fr}
  }
  .card{
    background:var(--card);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:16px;
    box-shadow: 0 1px 0 rgba(15,23,42,.04);
  }
  .card h3{margin:0 0 8px; font-size:18px}
  .card p{margin:0; color:var(--muted)}
  
  /* Services icons */
  .icon{
    width:40px; height:40px; border-radius:14px;
    background:rgba(236,162,73,.16);
    border:1px solid rgba(236,162,73,.26);
    display:grid; place-items:center;
    font-weight:900; color:var(--gold);
    margin-bottom:10px;
  }
  
  /* Portfolio */
  .gallery{
    display:grid; grid-template-columns: repeat(3, 1fr);
    gap:12px;
  }
 .shot{
    border-radius:18px;
    overflow:hidden;
    border:1px solid var(--border);
    background:#fff;
    box-shadow: 0 6px 20px rgba(15,23,42,.08);
    cursor:pointer;


      }

  .shot img{ width:100%;
    height:220px;
    object-fit:cover;
    object-position: center 25%; /* sobe o enquadramento */
    display:block;}
  .shot .cap{
    padding:10px 12px;
    color:var(--muted); font-weight:700; font-size:13px;
  }
  @media (max-width: 920px){
    .gallery{grid-template-columns:1fr}
    .shot img{height:240px}
  }
  
  /* CTA band */
  .band{
    background:
      radial-gradient(600px 260px at 15% 50%, rgba(236,162,73,.20), transparent 60%),
      radial-gradient(600px 260px at 85% 50%, rgba(23,127,142,.22), transparent 60%),
      var(--soft);
    border-top:1px solid var(--border);
    border-bottom:1px solid var(--border);
  }
  .bandInner{
    display:flex; gap:16px; align-items:center; justify-content:space-between; flex-wrap:wrap;
    padding:22px 0;
  }
  .bandInner strong{font-size:18px}
  .bandInner span{color:var(--muted); font-weight:700}
  
  /* Contact */
  .contactBox{display:grid; grid-template-columns: 1fr 1fr; gap:14px}
  @media (max-width: 920px){ .contactBox{grid-template-columns:1fr} }
  .list{margin:0; padding-left:18px; color:var(--muted); font-weight:650}
  .mini{font-size:13px; color:var(--muted); font-weight:650}
  
  footer{
    padding:26px 0;
    border-top:1px solid var(--border);
    color:var(--muted);
  }
  
  /* WhatsApp floating */
  .wa-float{
    position:fixed; right:18px; bottom:18px; z-index:60;
    display:flex; align-items:center; gap:10px;
    padding:12px 14px;
    border-radius:999px;
    background:var(--teal);
    color:#fff;
    box-shadow: 0 16px 35px rgba(23,127,142,.25);
    font-weight:900;
  }
  .wa-float:hover{filter:brightness(.96)}
  .wa-dot{
    width:10px; height:10px; border-radius:99px;
    background:var(--gold);
    box-shadow: 0 0 0 4px rgba(236,162,73,.18);
  }
  
  /* Simple modal */
  dialog{
    width:min(960px, 92vw);
    border:none; padding:0; border-radius:18px;
    box-shadow: 0 30px 80px rgba(0,0,0,.35);
    overflow:hidden;
  }
  dialog::backdrop{background:rgba(2,6,23,.55)}
  .modalImg{width:100%; height:min(70vh, 560px); object-fit:contain; background:#0b1220}
  .modalBar{
    display:flex; justify-content:space-between; align-items:center;
    padding:10px 12px; background:#fff; border-top:1px solid var(--border)
  }
  .modalBar .mcap{color:var(--muted); font-weight:800; font-size:13px}
  .closeBtn{border:1px solid var(--border); background:#fff; border-radius:12px; padding:10px 12px; font-weight:900; cursor:pointer}
  .closeBtn:hover{background:var(--soft)}