:root{
      /* Paleta oficial */
      --green: #1F6B3A;
      --green-dark: #13472A;
      --green-light: #6FBF8E;
      --offwhite: #F4F8F5;
      --white: #FFFFFF;
      --text: #1f2937;
      --muted: #6b7280;
      --border: rgba(15, 23, 42, 0.10);
      --shadow: 0 10px 30px rgba(15, 23, 42, 0.10);
      --shadow-soft: 0 6px 18px rgba(15, 23, 42, 0.08);

      --radius: 16px;
      --radius-sm: 12px;
      --container: 1160px;

      --font-title: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      --font-body: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    }

    *{ box-sizing: border-box; }
    html{ scroll-behavior: smooth; }
    body{
      margin:0;
      font-family: var(--font-body);
      color: var(--text);
      background: var(--white);
      line-height: 1.5;
    }
    a{ color: inherit; text-decoration: none; }
    img{ max-width:100%; display:block; }

    .container{
      width: min(var(--container), calc(100% - 48px));
      margin: 0 auto;
    }

    /* Header */
    .header{
      position: sticky;
      top: 0;
      z-index: 50;
      background: rgba(255,255,255,0.85);
      backdrop-filter: blur(10px);
      border-bottom: 1px solid var(--border);
    }
    .nav{
      display:flex;
      align-items:center;
      justify-content: space-between;
      gap: 16px;
      padding: 14px 0;
    }
    .brand{
      display:flex;
      align-items:center;
      gap: 12px;
      min-width: 220px;
    }
    /* .brand .logo{
      width: 40px;
      height: 40px;
      border-radius: 12px;
      background: linear-gradient(135deg, var(--green), var(--green-dark));
      box-shadow: var(--shadow-soft);
      display:grid;
      place-items:center;
      color: #fff;
      font-family: var(--font-title);
      font-weight: 700;
      letter-spacing: .5px;
    } */
    .brand .name{
      display:flex;
      flex-direction: column;
      line-height: 1.2;
    }
    .brand .name strong{
      font-family: var(--font-title);
      font-weight: 700;
      font-size: 14px;
    }
    .brand .name span{
      font-size: 12px;
      color: var(--muted);
    }

    .logo {
      display: flex;
      align-items: center;
    }

    .logo-img {
      height: 42px;          /* desktop */
      width: auto;           /* mantém proporção */
      display: block;
    }

    @media (min-width: 1024px) {
      .logo-img {
        height: 46px;
      }
    }

    @media (max-width: 640px) {
      .logo-img {
        height: 36px;
      }

      .brand .name span {
        display: none;
      }
    }

    .menu{
      display:flex;
      align-items:center;
      gap: 18px;
    }
    .menu a{
      font-weight: 600;
      font-size: 14px;
      color: rgba(31, 41, 55, 0.85);
      padding: 10px 10px;
      border-radius: 10px;
    }
    .menu a:hover{ background: rgba(31,107,58,0.08); color: var(--green-dark); }

    /* link ativo no menu (desktop) */
    .menu a.active{
      background: #eaf3ee;      /* ou use sua var */
      border-radius: 999px;
      padding: 10px 14px;
      font-weight: 600;
    }

    /* link ativo no drawer (mobile) */
    .drawer-link.active{
      background: #eaf3ee;
      border-radius: 10px;
      font-weight: 600;
    }

    .nav-actions{ display:flex; align-items:center; gap: 10px; }

    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap: 8px;
      border-radius: 12px;
      padding: 11px 14px;
      font-weight: 700;
      font-size: 14px;
      border: 1px solid transparent;
      cursor: pointer;
      transition: transform .08s ease, background .15s ease, border-color .15s ease;
      user-select:none;
      white-space: nowrap;
    }
    .btn:active{ transform: scale(0.98); }
    .btn-primary{
      background: var(--green);
      color: #fff;
    }
    .btn-primary:hover{ background: var(--green-dark); }
    .btn-secondary{
      background: transparent;
      border-color: rgba(31,107,58,0.35);
      color: var(--green);
    }
    .btn-secondary:hover{
      background: rgba(111,191,142,0.18);
      border-color: rgba(31,107,58,0.55);
    }

    .hamburger{
      display:none;
      width: 42px; height: 42px;
      border-radius: 12px;
      border: 1px solid var(--border);
      background: #fff;
      cursor:pointer;
      align-items:center;
      justify-content:center;
      gap: 4px;
      flex-direction: column;
    }
    .hamburger span{
      width: 18px; height: 2px;
      background: rgba(31,41,55,0.75);
      border-radius: 999px;
    }

    /* Hero */
    .hero{
      position: relative;
      min-height: 88vh;
      display:flex;
      align-items: center;
      overflow:hidden;
    }

    .hero::before{
      content:"";
      position:absolute; inset:0;
      /* Substitua pela imagem/vídeo real */
      background:
        linear-gradient(180deg, rgba(19,71,42,0.65), rgba(19,71,42,0.55)),
        url("../img/hero/background.jpg");
      background-size: cover;
      background-position: center;
      transform: scale(1.02);
      filter: saturate(1.05);
    }
    .hero-inner{
      position: relative;
      padding: 86px 0 64px;
      display:grid;
      grid-template-columns: 1.1fr 0.9fr;
      gap: 40px;
      align-items: center;
    }
    .hero h1{
      margin: 0 0 14px;
      font-family: var(--font-title);
      font-size: clamp(30px, 4vw, 52px);
      line-height: 1.08;
      color: #fff;
      letter-spacing: -0.6px;
    }
    .hero p{
      margin: 0 0 24px;
      color: rgba(255,255,255,0.9);
      font-size: clamp(15px, 1.6vw, 18px);
      max-width: 56ch;
    }
    .hero-ctas{ display:flex; gap: 12px; flex-wrap: wrap; }

    .hero-card{
      background: rgba(255,255,255,0.10);
      border: 1px solid rgba(255,255,255,0.18);
      border-radius: var(--radius);
      padding: 18px;
      box-shadow: 0 20px 60px rgba(0,0,0,0.18);
      backdrop-filter: blur(10px);
      color: #fff;
    }
    .hero-card h3{
      margin: 0 0 10px;
      font-family: var(--font-title);
      font-size: 16px;
      letter-spacing: .2px;
    }
    .hero-badges{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      margin-top: 10px;
    }
    .badge{
      background: rgba(255,255,255,0.12);
      border: 1px solid rgba(255,255,255,0.18);
      border-radius: 14px;
      padding: 10px 12px;
      font-weight: 700;
      font-size: 13px;
      display:flex;
      gap: 8px;
      align-items:center;
    }
    .badge i{
      width: 26px; height: 26px;
      border-radius: 10px;
      background: rgba(111,191,142,0.24);
      display:grid;
      place-items:center;
      font-style: normal;
      font-weight: 900;
    }

    /* Sections */
    section{ padding: 72px 0; }
    .section-title{
      display:flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 16px;
      margin-bottom: 18px;
    }
    .section-title h2{
      margin:0;
      font-family: var(--font-title);
      font-size: clamp(22px, 2.2vw, 32px);
      letter-spacing: -0.3px;
    }
    .section-title p{
      margin:0;
      color: var(--muted);
      max-width: 62ch;
    }

    /* About */
    .about{
      display:grid;
      grid-template-columns: 1fr;
      gap: 18px;
    }
    .about .lead{
      color: var(--muted);
      font-size: 16px;
      max-width: 75ch;
      margin: 0;
    }
    .features{
      display:grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 14px;
      margin-top: 10px;
    }
    .feature{
      background: #fff;
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      padding: 16px;
      box-shadow: var(--shadow-soft);
      display:flex;
      gap: 12px;
      align-items:flex-start;
      min-height: 86px;
    }
    .feature .icon{
      width: 40px; height: 40px;
      border-radius: 14px;
      background: rgba(31,107,58,0.10);
      display:grid;
      place-items:center;
      color: var(--green-dark);
      font-weight: 900;
    }
    .feature strong{
      display:block;
      font-weight: 800;
      font-size: 14px;
      margin-bottom: 2px;
    }
    .feature span{ color: var(--muted); font-size: 13px; }

    /* Leisure */
    .bg-off{ background: var(--offwhite); }
    .grid-4{
      display:grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 14px;
    }
    .card{
      border-radius: var(--radius);
      overflow:hidden;
      border: 1px solid var(--border);
      background: #fff;
      box-shadow: var(--shadow-soft);
      transition: transform .15s ease;
    }
    .card:hover{ transform: translateY(-3px); }
    .card .media{
      aspect-ratio: 16/10;
      background-size: cover;
      background-position: center;
      position: relative;
    }
    .card .media::after{
      content:"";
      position:absolute; inset:0;
      background: linear-gradient(180deg, rgba(0,0,0,0.00), rgba(0,0,0,0.35));
    }
    .card .label{
      position:absolute;
      left: 14px;
      bottom: 12px;
      z-index: 1;
      color: #fff;
      font-family: var(--font-title);
      font-weight: 700;
      font-size: 14px;
      text-shadow: 0 10px 30px rgba(0,0,0,0.35);
    }
    .card .body{
      padding: 14px 14px 16px;
      color: var(--muted);
      font-size: 13px;
    }

    /* News + Events */
    .grid-3{
      display:grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
    }
    .post{
      border-radius: var(--radius);
      border: 1px solid var(--border);
      background: #fff;
      box-shadow: var(--shadow-soft);
      overflow:hidden;
      display:flex;
      flex-direction: column;
      min-height: 320px;
    }
    .post .thumb{
      aspect-ratio: 16/9;
      background-size: cover;
      background-position: center;
    }
    .post .content{
      padding: 14px 14px 16px;
      display:flex;
      flex-direction: column;
      gap: 10px;
      flex: 1;
    }
    .post .meta{
      display:flex;
      gap: 10px;
      align-items:center;
      color: var(--muted);
      font-size: 12px;
    }
    .pill{
      font-weight: 800;
      font-size: 11px;
      padding: 6px 10px;
      border-radius: 999px;
      background: rgba(31,107,58,0.10);
      color: var(--green-dark);
      border: 1px solid rgba(31,107,58,0.18);
    }
    .post h3{
      margin:0;
      font-family: var(--font-title);
      font-size: 16px;
      line-height: 1.2;
      letter-spacing: -0.2px;
    }
    .post p{
      margin:0;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.5;
    }
    .post .link{
      margin-top:auto;
      display:inline-flex;
      align-items:center;
      gap: 8px;
      font-weight: 800;
      color: var(--green);
      font-size: 13px;
    }
    .post .link:hover{ color: var(--green-dark); }

    /* Resident Access */
    .access{
      background: var(--green);
      color: #fff;
      padding: 72px 0;
    }
    .access .section-title h2{ color:#fff; }
    .access .section-title p{ color: rgba(255,255,255,0.88); }
    .access-grid{
      display:grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 14px;
      margin-top: 18px;
    }
    .access-btn{
      border-radius: var(--radius);
      border: 1px solid rgba(255,255,255,0.18);
      background: rgba(255,255,255,0.12);
      padding: 16px;
      display:flex;
      gap: 12px;
      align-items:center;
      color:#fff;
      box-shadow: 0 20px 60px rgba(0,0,0,0.10);
      transition: transform .12s ease, background .15s ease;
    }
    .access-btn:hover{
      transform: translateY(-3px);
      background: rgba(255,255,255,0.18);
    }
    .access-btn .aicon{
      width: 44px; height: 44px;
      border-radius: 16px;
      background: rgba(255,255,255,0.14);
      display:grid;
      place-items:center;
      font-weight: 900;
    }
    .access-btn strong{
      display:block;
      font-family: var(--font-title);
      font-weight: 700;
      font-size: 14px;
      margin-bottom: 2px;
    }
    .access-btn span{
      font-size: 12px;
      color: rgba(255,255,255,0.90);
    }

    /* Location */
    .split{
      display:grid;
      grid-template-columns: 1.2fr 0.8fr;
      gap: 16px;
      align-items: stretch;
      margin-top: 14px;
    }
    .panel{
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background: #fff;
      box-shadow: var(--shadow-soft);
      overflow:hidden;
    }
    .map{
      width:100%;
      height: 360px;
      border: 0;
      display:block;
    }
    .contact{
      padding: 18px;
      display:flex;
      flex-direction: column;
      gap: 10px;
    }
    .contact .row{
      display:flex;
      gap: 10px;
      align-items:flex-start;
    }
    .contact .row b{ min-width: 90px; }
    .contact .hint{ color: var(--muted); font-size: 13px; margin-top: 4px; }

    /* Footer */
    footer{
      background: var(--green-dark);
      color: rgba(255,255,255,0.92);
      padding: 26px 0;
      margin-top: auto;
      position: static; /* garante que não fica “flutuando” */
    }
    .footer-inner{
      display:flex;
      align-items:center;
      justify-content: center;
      text-align:center;
      gap: 10px;
      flex-direction: column;
      font-size: 13px;
    }
    .footer-inner strong{ font-weight: 800; }

    /* WhatsApp Floating */
    .whatsapp-fab{
      position: fixed;
      right: 18px;
      bottom: 18px;
      z-index: 60;
      display:flex;
      align-items:center;
      gap: 10px;
      padding: 12px 14px;
      border-radius: 999px;
      background: #25D366;
      color: #fff;
      font-weight: 900;
      box-shadow: 0 20px 60px rgba(0,0,0,0.22);
      border: 1px solid rgba(255,255,255,0.18);
    }
    .whatsapp-fab small{
      font-weight: 700;
      opacity: 0.95;
    }

    /* Mobile */
    @media (max-width: 980px){
      .hero-inner{ grid-template-columns: 1fr; }
      .hero-card{ order: 2; }
      .features{ grid-template-columns: 1fr 1fr; }
      .grid-4{ grid-template-columns: 1fr 1fr; }
      .grid-3{ grid-template-columns: 1fr; }
      .access-grid{ grid-template-columns: 1fr 1fr; }
      .split{ grid-template-columns: 1fr; }
      .menu{ display:none; }
      .hamburger{ display:flex; }
      .brand{ min-width: auto; }
    }

    /* Mobile drawer */
    .drawer{
      display:none;
      border-top: 1px solid var(--border);
      padding: 8px 0 14px;
    }
    .drawer.open{ display:block; }
    .drawer a{
      display:block;
      padding: 12px 10px;
      border-radius: 12px;
      font-weight: 800;
      color: rgba(31,41,55,0.88);
    }
    .drawer a:hover{ background: rgba(31,107,58,0.08); color: var(--green-dark); }

    /* Utilities */
    .muted{ color: var(--muted); }
    .spacer{ height: 10px; }

	 /* WhatsApp */
	.wa-ico{
	  display:inline-flex;
	  align-items:center;
	  justify-content:center;
	}

	.wa-text{
	  display:flex;
	  flex-direction:column;
	  line-height:1.05;
	}

	.wa-text small{
	  font-weight:700;
	  opacity:.95;
	}

	.wa-text span{
	  font-size:12px;
	  opacity:.95;
	  font-weight:800;
	}

	/* ===== Correção de contraste do botão secundário no HERO ===== */
	.hero .btn-secondary{
	  color: #ffffff;
	  border-color: rgba(255,255,255,0.85);
	  background: rgba(255,255,255,0.10);
	}

	.hero .btn-secondary:hover{
	  background: rgba(255,255,255,0.22);
	  border-color: #ffffff;
	}

  .page{
    padding: 44px 0 80px;
    background: #f7faf8;
    min-height: 60vh;
  }

  .page-head{
    background: #ffffff;
    border-radius: 18px;
    padding: 22px;
    box-shadow: 0 10px 30px rgba(0,0,0,.06);
  }

  .page-head h1{
    margin: 0 0 8px;
  }

  .section{
    padding: 60px 0;
  }

  .grid-2{
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 32px;
  }

  @media (max-width: 900px){
    .grid-2{
      grid-template-columns: 1fr;
    }
  }

  .lead{
    font-size: 1.05rem;
    margin: 12px 0 22px;
    opacity: .85;
  }

  .list-check{
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .list-check li{
    padding-left: 26px;
    margin-bottom: 10px;
    position: relative;
  }

  .list-check li::before{
    content: "✔";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--green);
    font-weight: 700;
  }

  .card-highlight{
    background: rgba(255,255,255,.92);
    border-radius: 18px;
    padding: 22px;
    box-shadow: 0 10px 30px rgba(0,0,0,.08);
  }

  /* ===== Header FIXO (garante que não some ao rolar) ===== */
  :root{
    --header-h: 76px; /* ajuste fino se quiser (72~84) */
  }

  body{
    padding-top: var(--header-h);
  }

  /* substitui o sticky por fixed */
  .header{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    background: rgba(255,255,255,0.90);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
  }

  /* garante a altura do miolo do header */
  .header .nav{
    min-height: var(--header-h);
    padding: 0; /* o padding já fica na altura */
    display:flex;
    align-items:center;
  }

  /* ===== Grid de cards (Lazer / páginas internas) ===== */
  .cards-grid{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap:18px;
  }

  @media (max-width: 980px){
    .cards-grid{ grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 620px){
    .cards-grid{ grid-template-columns: 1fr; }
  }

  .info-card{
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 18px;
    box-shadow: 0 10px 30px rgba(0,0,0,.06);
    transition: transform .15s ease;
  }

  .info-card:hover{
    transform: translateY(-2px);
  }

  .info-ico{
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display:flex;
    align-items:center;
    justify-content:center;
    background: rgba(30, 120, 68, .10); /* var(--green) com transparência */
    margin-bottom: 10px;
    font-size: 20px;
  }

  .info-card h3{
    margin: 0 0 6px;
    font-size: 1.05rem;
  }

  .info-card p{
    margin: 0;
    opacity: .85;
  }

  /* ===== Notícias ===== */
  .news-grid{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
  }

  @media (max-width: 980px){
    .news-grid{ grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 620px){
    .news-grid{ grid-template-columns: 1fr; }
  }

  .news-card{
    background:#fff;
    border: 1px solid var(--border);
    border-radius: 18px;
    overflow:hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,.06);
  }

  .news-cover{
    display:block;
    aspect-ratio: 16/9;
    background: #e9efe9;
    overflow:hidden;
  }

  .news-cover img{
    width:100%;
    height:100%;
    object-fit: cover;
    display:block;
  }

  .news-body{
    padding: 16px;
  }

  .news-meta{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
    margin-bottom: 10px;
    font-size: .85rem;
    opacity: .85;
  }

  .tag{
    display:inline-flex;
    align-items:center;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(30, 120, 68, .10);
    color: var(--green);
    font-weight: 600;
  }

  .news-body h3{
    margin: 0 0 8px;
    font-size: 1.05rem;
  }

  .news-body h3 a{
    color: inherit;
    text-decoration: none;
  }

  .news-body p{
    margin: 0 0 10px;
    opacity: .85;
  }

  .news-more{
    text-decoration:none;
    color: var(--green);
    font-weight: 700;
  }

  /* ===== Eventos ===== */
  .events-grid{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
  }

  @media (max-width: 980px){
    .events-grid{ grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 620px){
    .events-grid{ grid-template-columns: 1fr; }
  }

  .event-card{
    background:#fff;
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(0,0,0,.06);
    padding: 16px;
    display:flex;
    gap: 14px;
  }

  .event-date{
    min-width: 74px;
    border-radius: 16px;
    background: rgba(30, 120, 68, .10);
    color: var(--green);
    display:flex;
    flex-direction: column;
    align-items:center;
    justify-content:center;
    padding: 10px 8px;
    text-align:center;
  }

  .event-date .d{
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1;
  }

  .event-date .m{
    font-size: .85rem;
    font-weight: 800;
    letter-spacing: .8px;
    margin-top: 4px;
  }

  .event-date .y{
    font-size: .75rem;
    opacity: .85;
    margin-top: 2px;
  }

  .event-body h3{
    margin: 6px 0 8px;
    font-size: 1.05rem;
  }

  .event-body h3 a{
    color: inherit;
    text-decoration:none;
  }

  .event-meta{
    display:flex;
    justify-content:space-between;
    gap:10px;
    align-items:center;
    font-size: .85rem;
    opacity: .85;
  }

  .place{
    color: var(--muted);
    font-weight: 600;
  }

  .event-body p{
    margin: 0 0 10px;
    opacity: .85;
  }

  .event-more{
    text-decoration:none;
    color: var(--green);
    font-weight: 700;
  }

  /* ===== Aviso (Área do Morador) ===== */
  .notice{
    background: rgba(30, 120, 68, .08);
    border: 1px solid rgba(30, 120, 68, .18);
    border-radius: 18px;
    padding: 14px 16px;
    color: rgba(0,0,0,.75);
  }

  /* cards clicáveis */
  .link-card{
    display:block;
    text-decoration:none;
    color: inherit;
  }

  .link-card h3{ margin-top: 0; }

  /* ===== Contato ===== */
.contact-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

@media (max-width: 900px){
  .contact-grid{ grid-template-columns: 1fr; }
}

.contact-card{
  background:#fff;
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
}

.contact-card h3{
  margin-top:0;
  font-size:1.05rem;
}

.map-card{
  margin-top:18px;
  border-radius:18px;
  overflow:hidden;
  border:1px solid var(--border);
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
}

.map-card iframe{
  width:100%;
  height:360px;
  border:0;
}

/* Mobile: esconder botão Sair/Acesso do topo para ganhar espaço */
@media (max-width: 768px){
  .only-desktop {
    display: none !important; /* some com "Acesso" ou "Sair" */
  }
}

/* ===============================
   WhatsApp Floating Button
================================ */

.wa-float{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 9999;

  display: flex;
  align-items: center;
  gap: 10px;

  height: 56px;
  padding: 10px 14px;

  border-radius: 999px;
  background: #25D366;
  color: #fff;
  text-decoration: none;

  box-shadow: 0 14px 28px rgba(0,0,0,.22);
  overflow: hidden;

  width: 56px; /* começa só no círculo */
  transition: width .22s ease, transform .2s ease, box-shadow .2s ease;
}

.wa-icon{
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: 999px;
  background: rgba(255,255,255,.16);

  display: grid;
  place-items: center;
}

.wa-text{
  opacity: 0;
  transform: translateX(6px);
  transition: opacity .15s ease, transform .2s ease;
  white-space: nowrap;
}

/* Desktop hover */
@media (hover: hover) and (pointer: fine){
  .wa-float:hover{
    width: 260px;
    transform: translateY(-1px);
  }
  .wa-float:hover .wa-text{
    opacity: 1;
    transform: translateX(0);
  }
}

/* Mobile: expandir ao toque */
.wa-float.is-open{
  width: 240px;
}
.wa-float.is-open .wa-text{
  opacity: 1;
  transform: translateX(0);
}

@media (max-width: 520px){
  .wa-float{
    right: 14px;
    bottom: 14px;
  }
}

.cards-grid--spaced { margin-top: 16px; }

/* ===== Login / Auth ===== */
.auth-wrap{
  min-height: calc(100vh - 220px); /* ajusta com seu header/footer */
  display: grid;
  place-items: center;
}

.auth-card{
  width: min(520px, 100%);
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 18px;
  box-shadow: 0 14px 32px rgba(0,0,0,.08);
  padding: 26px;
}

.auth-head h1{
  margin: 0;
  font-size: 28px;
  letter-spacing: -0.2px;
}

.auth-head .lead{
  margin-top: 8px;
  color: rgba(0,0,0,.65);
}

.auth-form{
  margin-top: 18px;
}

.auth-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.field{
  display: grid;
  gap: 6px;
  margin-top: 12px;
}

.field label{
  font-size: 13px;
  color: rgba(0,0,0,.75);
}

.field input{
  height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.14);
  padding: 0 12px;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}

.field input:focus{
  border-color: rgba(19,71,42,.55);
  box-shadow: 0 0 0 4px rgba(19,71,42,.10);
}

.input-password{
  position: relative;
}

.input-password input{
  padding-right: 44px;
}

.pw-toggle{
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  height: 32px;
  width: 32px;
  border: none;
  background: rgba(0,0,0,.05);
  border-radius: 10px;
  cursor: pointer;
}

.auth-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
}

.check{
  display: inline-flex;
  gap: 8px;
  align-items: center;
  font-size: 13px;
  color: rgba(0,0,0,.75);
}

.auth-link{
  font-size: 13px;
  color: #13472a;
  text-decoration: none;
  font-weight: 600;
}

.auth-link:hover{
  text-decoration: underline;
}

.btn-block{
  width: 100%;
  margin-top: 14px;
  height: 44px;
  border-radius: 12px;
}

.auth-hint{
  margin-top: 12px;
  font-size: 12.5px;
  color: rgba(0,0,0,.6);
}

@media (max-width: 520px){
  .auth-card{ padding: 18px; border-radius: 16px; }
  .auth-grid{ grid-template-columns: 1fr; }
}

.auth-alert{
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 13px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(0,0,0,.03);
}
.auth-alert-ok{
  border-color: rgba(19,71,42,.20);
  background: rgba(19,71,42,.06);
}
.auth-alert-err{
  border-color: rgba(200,0,0,.18);
  background: rgba(200,0,0,.06);
}