*{ box-sizing:border-box; padding: 0; margin: 0;list-style-type: none;text-decoration: none;  font-family: "Work Sans", sans-serif;}
    
    :root{
      --bg: #f4f1ec;
      --ink: #1f1f1f;
      --muted: #6b6b6b;
      --accent: #b08b78;
      --green: #0f3d2e;
      --card: #e9f0ee;
      --radius: 16px;
      --shadow: 0 10px 30px rgba(0,0,0,.08);
      --max: 1224px;
      --serif: Georgia, "Times New Roman", Times, serif;
      --sans: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
    }


    body{
      margin:0;
      font-family: var(--sans);
    }

    /* HEADER */
    .topbar{
      background: rgba(255,255,255,.85);
      backdrop-filter: blur(8px);
      border-bottom: 1px solid rgba(0,0,0,.06);
      position: sticky;
      top: 0;
      z-index: 10;
      padding: 20px 0;
    }

    .headerSimple{
      max-width: var(--max);
      margin: 0 auto;
      padding: 14px 18px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 12px;
    }

    .logo{
      width: 100%;
      max-width: 290px;
      display:block;
    }

    .cta{
      background: var(--accent);
      color: #fff;
      padding: 10px 18px;
      border-radius: 10px;
      font-size: 14px;
      font-weight: 700;
      text-decoration:none;
      box-shadow: 0 8px 20px rgba(176,139,120,.35);
      transition: transform .2s ease, box-shadow .2s ease;
      white-space: nowrap;
    }

    .cta:hover{
      transform: translateY(-1px);
      box-shadow: 0 12px 26px rgba(176,139,120,.45);
    }

    /* HERO */
    .hero{
      background-image: url('./../images/hero-bg.png');
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      height: 70vh;
      display: flex;
      align-items: center;
    }

    .hero .wrap{
      max-width: var(--max);
      margin: 0 auto;
      overflow:hidden;
    }

    .heroGrid{
      display:grid;
      grid-template-columns: 1.1fr .9fr;
    }

    .heroLeft,
    .heroRight{
      padding: 36px;
    }

    .heroTitle{
      font-family: "Crimson Pro", serif;
      font-size: clamp(28px, 3.2vw, 44px);
      color: #8d7a6f;
      margin: 0 0 18px;
      font-weight: 500;
    }

    .heroText{

        font-family: 'Work Sans';
        font-style: normal;
        font-weight: 400;
        font-size: 20px;
        line-height: 30px;
        /* or 150% */
        text-align: justify;

        color: #454545;


    }

    .heroText strong{ font-weight: 700; }

    .divider{
      margin-top: 22px;
      height: 1px;
      background: rgba(0,0,0,.08);
    }

    /* CONTATO */
    .contactBox{
      border-left: 1px solid rgba(0,0,0,.06);
      display:flex;
      flex-direction:column;
      justify-content:center;
      gap: 16px;
    }

    .contactItem{
      display:flex;
      gap: 16px;
      align-items: center;
    }

    .contactItem p,
    .contactItem p a{
      font-family: 'Work Sans';
      font-style: normal;
      font-weight: 400;
      font-size: 20px;
      line-height: 23px;
      text-transform: capitalize;
      color: #454545;
      text-decoration: none;
    }

    .icon{
      width: 34px;
      height: 34px;
      border-radius: 50%;
      background: rgba(176,139,120,.18);
      display:grid;
      place-items:center;
      flex-shrink:0;
    }

    .icon svg{
      width: 16px;
      height: 16px;
      fill: #7f6a60;
    }

    .mail:hover{ text-decoration:underline; }

    /* EQUIPE */
    .section{
      padding: 128px 0;
      background: #fff;
    }

    .section .wrap{
      max-width: var(--max);
      margin: 0 auto;
    }

    .section h2{
      color: #8d7a6f;
      margin-bottom: 26px;
      font-family: "Crimson Pro", serif;
      font-style: normal;
      font-weight: 400;
      font-size: 42px;
      line-height: 56px;
      /* identical to box height, or 156% */
      text-align: center;


    }

    .cards{
      display:flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 14px;
    }

    .card{
      background: var(--card);
      border-radius: 14px;
      padding: 16px 4px;
      text-align:center;
      box-shadow: 0 6px 16px rgba(0,0,0,.05);
      width: 100%;
      max-width: 32%;
    }

    .card b{
      display:block;
      color: var(--green);
      margin-bottom: 6px;
      font-family: "Crimson Pro", serif;
      font-style: normal;
      font-weight: 600;
      font-size: 26px;
      line-height: 46px;
      /* or 177% */
      text-align: center;
      text-transform: capitalize;
    }

    .card .mail{
      font-family: 'Roboto';
      font-style: normal;
      font-weight: 500;
      font-size: 16px;
      line-height: 24px;
      letter-spacing: 0.15px;
      color: #002D1E;
      text-decoration: none;
      display: flex;
      align-items: center;
      gap: 8px;
      justify-content: center;
      
    }

    /* FOOTER */
    footer{
      background-image: url('./../images/footer-bg.png');
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      padding: 64px 0;
      color: rgba(255,255,255,.9);

    }

    footer .wrap{
      max-width: var(--max);
      margin: 0 auto;
      display:grid;
      grid-template-columns: 1fr 1.2fr;
      gap: 26px;
    }

    .footerLogo{
      width: 100%;
      max-width: 250px;
      filter: brightness(0) invert(1);
      display:block;
    }

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

    .footLine{
      display:flex;
      gap: 10px;
      font-size: 18px;
      line-height: 1.4;
      align-items: center;
    }

    .footLine svg{
      width: 28px;
      height: 28px;
      flex-shrink:0;
      fill: #fff;
    }

    .copyright{
      max-width: var(--max);
      margin: 44px auto 0;
      border-top: 1px solid rgba(255,255,255,.15);
      display:flex;
      justify-content:space-between;
      font-size: 12px;
      color: rgba(255,255,255,.75);
      flex-wrap: wrap;
      gap: 8px;
      padding: 44px 0 0;
    }

    .javali{
      display:flex;
      align-items:center;
      gap: 6px;
    }

    @media (max-width: 900px){
      .wrap{ padding: 0 18px; }
      .copyright{padding: 24px 18px;}
      .heroGrid{ grid-template-columns: 1fr; }
      .contactBox{ border-left: none; border-top: 1px solid rgba(0,0,0,.06); }
      .cards{ flex-direction: column; } .cards .card{ max-width: 100%; }
      footer .wrap{ grid-template-columns: 1fr; }
    }

    @media (max-width: 560px){
      .hero{ height: auto; padding: 64px 0; }
      .logo{
        max-width: 160px;
      }
      .section{
        padding: 32px 0;
      }
      .heroLeft, .heroRight{ padding: 26px 20px; }
      .cards{ grid-template-columns: 1fr; }

      /* overlay mais forte no mobile para não “sumir” o texto */
      .heroGrid{
        background-image:
          linear-gradient(
            rgba(255,255,255,0.90),
            rgba(255,255,255,0.90)
          ),
          url("https://d335luupugsy2.cloudfront.net/cms/files/318048/1770126962/$ya0ws2ilxn");
      }
    }