.elementor-1664 .elementor-element.elementor-element-3846e1a{--display:flex;}.elementor-1664 .elementor-element.elementor-element-861c1af > .elementor-widget-container{margin:-194px -194px -194px -194px;}body.elementor-page-1664:not(.elementor-motion-effects-element-type-background), body.elementor-page-1664 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:transparent;background-image:linear-gradient(180deg, #A1FF6A 22%, var( --e-global-color-twbb_primary_inv ) 87%);}:root{--page-title-display:none;}/* Start custom CSS for html, class: .elementor-element-861c1af */.hero-text h1 {
  margin: 0 0 12px;
  font-size: 34px;
  line-height: 1.05;
  font-weight: 900;
  text-shadow: 1px 2px 6px rgba(0,0,0,0.25);
  color: #ffed00 !important;
}


.elementor-1664 .elementor-element.elementor-element-861c1af {
  background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
}
.page-title {
  color: #1B5E20 !important; /* substitua pelo verde que quiser */
}

/* ==========================
   FONTE DO FONT AWESOME
========================== */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css');

/* ==========================
   CARDS WRAPPER
========================== */
.cards-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(300px,1fr));
  gap: 28px;
  padding: 28px;
  max-width: 1200px;
  margin: 0 auto 40px;
}

/* ==========================
   CARD - FUNDO, BORDA E ANIMAÇÃO
========================== */
.card {
  background: linear-gradient(135deg, #FFF9C4, #FFFFFF) !important; /* degradê amarelo → branco */
  border-radius: 14px !important; /* bordas arredondadas */
  padding: 20px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  text-align: center;
  transition: all 0.3s;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp 0.5s forwards;
}

/* Delay sequencial para animação */
.card:nth-child(1) { animation-delay: 0.1s; }
.card:nth-child(2) { animation-delay: 0.2s; }
.card:nth-child(3) { animation-delay: 0.3s; }
.card:nth-child(4) { animation-delay: 0.4s; }
.card:nth-child(5) { animation-delay: 0.5s; }
.card:nth-child(6) { animation-delay: 0.6s; }
.card:nth-child(7) { animation-delay: 0.7s; }
.card:nth-child(8) { animation-delay: 0.8s; }
.card:nth-child(9) { animation-delay: 0.9s; }

/* Card hover */
.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.12);
}

/* ==========================
   IMAGEM DO CARD
========================== */
.card img {
  width: 100%;
  height: 260px;
  object-fit: contain;
  border-radius: 14px;
  margin-bottom: 14px;
  display: block;
  transition: transform 0.3s;
}
.card img:hover { transform: scale(1.05); }

/* ==========================
   TÍTULO E TEXTO
========================== */
.card h2 {
  font-size: 20px;
  color: #fff;
  margin: 8px 0;
}

.card .price {
  font-size: 18px;
  font-weight: 700;
  color: #FFB300; /* amarelo mais escuro */
  margin-bottom: 12px;
  background: rgba(255,255,255,0.8); /* barra de fundo leve */
  display: inline-block;
  padding: 2px 6px;
  border-radius: 6px;
}

.card p {
  font-size: 15px;
  color: #1B5E20;
  margin: 8px 0 18px;
  min-height: 46px;
}

/* ==========================
   BOTÕES DOS CARDS
========================== */
.card a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  margin: 8px auto 0;
  max-width: 220px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: all 0.3s;
}



/* Botão WhatsApp verde escuro */
.card a.cta-whatsapp {
  background: #004d1a !important;
  color: #fff !important;
}
.card a.cta-whatsapp:hover {
  background-color: #006622 !important;
  transform: scale(1.05);
}

/* ==========================
   ANIMAÇÃO FADE UP
========================== */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ==========================
   RESPONSIVO
========================== */
@media (max-width:480px){
  .card img { height: 200px; }
}

/* ==========================
   BOTÃO VOLTAR AO TOPO
========================== */
#backToTop {
  position: fixed;
  bottom: 30px;
  right: 30px;
  background: #1B5E20;
  color: #fff; 
  padding: 12px 16px;
  border-radius: 50%;
  font-size: 20px;
  cursor: pointer;
  display: none;
  z-index: 999;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  transition: all 0.3s;
}
#backToTop:hover {
  background: #339966;
  transform: scale(1.1);
}

/* Bordas dos cards */
.card {
  border-radius: 14px !important;
}

/* Cor do botão "Saiba mais" */
.card a.cta-saiba {
  background-color: #1B5E20 !important;
  color: #fff !important;
}

/* Cor do preço / texto destacado */
.card .price {
  color: #!important; !important;
}

/* --- HEADER FIXO --- */
header, .elementor-location-header {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 99999;
}

/* Evita que o conteúdo suba para baixo do header */
body {
    padding-top: 120px !important; /* Ajuste de acordo com a altura real do seu header */
}

/* --- CORREÇÃO DO SCROLL PARA ANCORAS --- */
.scroll-offset {
    scroll-margin-top: 140px; /* mesmo tamanho do header */
}

/* ==== CORES DOS BOTÕES RESTAURADAS ==== */

/* Fale Conosco (WhatsApp) */
.btn-whats {
  background: #003c00 !important; /* azul mais escuro */
  color: #fff !important;
  border: none !important;
}
.btn-whats:hover {
  background: #003F9E !important;
  color: #fff !important;
}

/* Saiba Mais */
.btn-saiba {
  background: #ffed00 !important;
  color: #003c00 !important;
  border: none !important;
}
.btn-saiba:hover {
  background: #003F9E !important;
  color: #fff !important;
}

/* Botão CTA principal (Conheça os Planos) */
.btn-cta {
  background: #003c00 !important;
  color: #fff !important;
}
.btn-cta:hover {
  background: #003F9E !important;
  color: #fff !important;
}

/* Botão Escolher Meu Plano nos detalhes */
.choose-plan {
  background: #E6B800 !important; /* dourado */
  color: #111 !important;
  font-weight: 700;
}
.choose-plan:hover {
  background: #C7A500 !important;
  color: #111 !important;
}

/* Se quiser manter outline no botão inferior */
.btn-cta.secondary {
  border: 2px solid #0056D2 !important;
  color: <!doctype html>
<html lang="pt-BR">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>Projetos & Carteirinhas — Balneário Família Lessa</title>

  <!-- Font Awesome para ícones (opcional) -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"/>

  <style>
    :root{
      --green-700:#1B5E20;
      --green-500:#339966;
      --dark-green:#004d1a;
      --accent:#E6B800;
      --card-border:#dfeee0;
      --muted:#666;
      --max-width:1200px;
      --header-height:78px; /* ajuste se seu header tiver altura diferente */
    }

    /* ---------- RESET BÁSICO ---------- */
    *{box-sizing:border-box}
    html,body{margin:0;padding:0;font-family:Inter, "Segoe UI", Roboto, "Helvetica Neue", Arial; color:#222;background:#f7f9f6;scroll-behavior:smooth}
    a{color:inherit}

    /* ---------- HEADER FIXO ---------- */
    header.site-header{
      position:fixed;
      top:0;
      left:0;
      width:100%;
      height:var(--header-height);
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding:12px 28px;
      background:linear-gradient(90deg,var(--green-700),var(--green-500));
      color:#fff;
      z-index:9999;
      box-shadow:0 6px 18px rgba(0,0,0,0.12);
      gap:20px;
    }
    header .brand{font-weight:800;font-size:18px}
    header nav{display:flex;gap:18px;align-items:center}
    header nav a{color:#fff;text-decoration:none;font-weight:700;padding:8px 10px;border-radius:8px;transition:all .18s}
    header nav a:hover{background:rgba(255,255,255,0.06);color:var(--accent)}

    /* Garantir que conteúdo não fique escondido atrás do header */
    main{padding-top:calc(var(--header-height) + 18px);}

    /* ---------- HERO LATERAL ---------- */
    .hero-lateral{
      max-width:var(--max-width);
      margin:20px auto;
      display:flex;
      gap:36px;
      align-items:center;
      justify-content:space-between;
      padding:44px;
      border-radius:18px;
      background:linear-gradient(135deg,#143a12 0%, #2b8b49 100%);
      color:#fff;
      box-shadow:0 16px 40px rgba(0,0,0,0.12);
    }

    .hero-lateral img{
      width:380px;
      max-width:42%;
      border-radius:14px;
      box-shadow:0 16px 40px rgba(0,0,0,0.2);
      flex-shrink:0;
      animation:heroImgBounce 3s ease-in-out infinite alternate;
    }

    @keyframes heroImgBounce{
      from{transform:translateY(0) scale(1)}
      to{transform:translateY(-12px) scale(1.02)}
    }

    .hero-text{max-width:58%}
    .hero-text h1{margin:0 0 12px;font-size:34px;line-height:1.05;font-weight:900;text-shadow:1px 2px 6px rgba(0,0,0,0.25)}
    .hero-text p{margin:10px 0;font-size:18px;line-height:1.7;color:#e6f4ea}

    .hero-buttons{display:flex;gap:14px;margin-top:16px}
    .hero-buttons a{padding:12px 20px;border-radius:12px;text-decoration:none;font-weight:800}
    .btn-cta{background:var(--dark-green);color:#fff;box-shadow:0 8px 22px rgba(0,0,0,0.18)}
    .btn-cta.secondary{background:transparent;border:2px solid rgba(255,255,255,0.15);color:#fff}

    /* ---------- CARDS ---------- */
    .container{max-width:var(--max-width);margin:36px auto;padding:0 20px}
    .page-title{font-size:28px;color:var(--green-700);font-weight:900;text-align:center;margin:6px 0 18px}
    .cards-wrapper{
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
      gap:22px;
      margin-top:10px;
    }

    .card{
      background:#fff;padding:20px;border-radius:14px;border:10px solid var(--card-border);
      box-shadow:0 8px 26px rgba(0,0,0,0.06); text-align:center; transition:transform .28s, box-shadow .28s;
      position:relative; overflow:hidden;
    }
    .card:hover{transform:translateY(-8px);box-shadow:0 18px 46px rgba(0,0,0,0.12)}
    .card img{width:100%;height:220px;object-fit:contain;border-radius:12px;margin-bottom:18px}
    .card h3{margin:8px 0;color:var(--green-700)}
    .card .price{font-weight:800;color:#003e00;margin:8px 0 14px}
    .card p{color:#444;margin:0 0 14px}
    .card .card-actions{display:flex;flex-direction:column;gap:12px;align-items:center;justify-content:center}
    .card .card-actions a{display:inline-flex;align-items:center;gap:10px;padding:10px 14px;border-radius:10px;text-decoration:none;font-weight:800}
    .btn-whats{background:#004506;color:#fff}
    .btn-saiba{background:#ffed00;color:#fff}

    /* ---------- DETALHES (PROJECT BLOCKS) ---------- */
   .project-block{
  display:flex;
  gap:22px;
  align-items:center;
  padding:20px;
  border-radius:14px;
  background:#fff;
  border:1px solid var(--card-border);
  box-shadow:0 8px 28px rgba(0,0,0,0.06);
  margin-bottom:34px;

  opacity:0;
  transform:translateY(20px);
  transition: opacity .15s ease-out, transform .15s ease-out;

  scroll-margin-top:calc(var(--header-height) + 16px);
}

    .project-block.visible{opacity:1;transform:translateY(0)}
    .project-block:nth-child(even){flex-direction:row-reverse}
    .project-block img{width:250px;height:auto;border-radius:12px;border:1px solid #cfe8d1}
    .project-block h2{margin:0;color:var(--green-700);font-size:24px}
    .project-block p{margin:6px 0 0;color:#333;line-height:1.6}

    .choose-plan{display:inline-block;margin-top:12px;padding:10px 18px;border-radius:10px;background:var(--accent);color:#111;font-weight:800;text-decoration:none}

    /* highlight animation (maior visibilidade) */
    .highlight {
      animation:highlightAnim 1.6s cubic-bezier(.2,.9,.3,1) both;
    }
    @keyframes highlightAnim{
      0%{transform:scale(1);box-shadow:0 0 0 rgba(230,184,0,0)}
      30%{transform:scale(1.07);box-shadow:0 0 28px rgba(230,184,0,0.9)}
      60%{transform:scale(1.05);box-shadow:0 0 18px rgba(230,184,0,0.6)}
      100%{transform:scale(1);box-shadow:0 0 0 rgba(230,184,0,0)}
    }

    /* ---------- BACK TO TOP ---------- */
    #backToTop{
      position:fixed;right:22px;bottom:28px;background:var(--green-700);color:#Projetos & Carteirinhas — Balneário Família Less;width:48px;height:48px;border-radius:50%;display:none;align-items:center;justify-content:center;z-index:9998;box-shadow:0 8px 26px rgba(0,0,0,0.2);cursor:pointer
    }
    #backToTop:hover{transform:scale(1.06);background:var(--green-500)}

    /* ---------- RESPONSIVO ---------- */
    @media(max-width:1024px){
      .hero-lateral{flex-direction:column;gap:18px;padding:28px}
      .hero-text{max-width:100%}
      .hero-lateral img{width:70%}
    }
    @media(max-width:600px){
      header nav{gap:10px;font-size:14px}
      .card img{height:180px}
      .hero-text h1{font-size:24px}
      .project-block{flex-direction:column}
      .project-block img{width:70%}
    }
  </style>
</head>
<body>

  <!-- HEADER FIXO -->
  <header class="site-header" role="banner">
    <div class="brand">Balneário Família Lessa</div>
    <nav role="navigation" aria-label="Menu principal">
      <a href="#hero" data-scroll>Início</a>
      <a href="#cards" data-scroll>Planos</a>
      <a href="#projects" data-scroll>Detalhes</a>
      <a href="#contact" data-scroll>Contato</a>
    </nav>
  </header>

  <main>
    <!-- HERO LATERAL -->
    <section id="hero" class="hero-lateral" aria-labelledby="hero-title">
      <img src="https://balneariolessa.com.br/wp-content/uploads/2025/12/IMG_8781-scaled.png" alt="Dr. Marcelo e Dra. Rosimeire" />

      <div class="hero-text">
        <h1 id="hero-title">Projetos & Carteirinhas – Balneário Família Lessa</h1>
        <p>
          Inspirados pelo desejo de compartilhar lazer, inclusão e valores cristãos, o Dr. Marcelo Lessa e a Dra. Rosimeire criaram uma série de projetos para beneficiar toda a comunidade. Cada plano foi pensado para atender diferentes públicos — famílias, crianças, idosos, estudantes, professores, servidores públicos, pessoas com deficiência e empresas — promovendo convivência, alegria e bem-estar em um espaço seguro e acolhedor.
        </p>
        <p>
          Estes projetos são mais do que acessos: são experiências que fortalecem vínculos, ensinam valores de fé e responsabilidade social, e convidam cada visitante a fazer parte de uma comunidade viva e solidária. Aqui, todos têm seu lugar, e cada história é celebrada.
        </p>

        <div class="hero-buttons" aria-hidden="false">
          <a class="btn-cta" href="#cards" data-scroll>Conheça os Planos</a>
          <a class="btn-cta secondary" href="https://wa.me/5569992626140" target="_blank" rel="noopener noreferrer"><i class="fab fa-whatsapp"></i> Fale Conosco</a>
        </div>
      </div>
    </section> !important;
}
.btn-cta.secondary:hover {
  background: #0056D2 !important;
  color: #fff !important;
}

.btn-cta.secondary {
  background: transparent;
  border: none !important;   /* REMOVE A BORDA */
  color: #fff !important;
}


.elementor-1664 .elementor-element.elementor-element-861c1af {
    /* Mobile Styles */
    @media (max-width: 768px) {
        .hero-lateral {
            flex-direction: column;
            padding: 20px;
            align-items: center;
        }

        .hero-lateral img {
            width: 100%;
            max-width: 100%;
            margin-bottom: 20px;
        }

        .hero-text {
            max-width: 100%;
            text-align: center;
        }

        .cards-wrapper {
            grid-template-columns: 1fr; /* Stack cards on mobile */
        }

        .card {
            padding: 15px;
        }

        header.site-header {
            flex-direction: column;
            align-items: flex-start;
            padding: 10px;
        }

        header nav {
            flex-direction: column;
            gap: 10px;
        }
    }
}

@media (max-width: 768px){

  /* Corrige espaço exagerado no topo */
  main{
    padding-top: calc(var(--header-height) + 6px);
  }

  /* Hero mais compacto */
  .hero-lateral{
    flex-direction: column;
    padding: 18px 16px;
    gap: 14px;
    border-radius: 14px;
  }

  /* Imagem menor e central */
  .hero-lateral img{
    width: 100%;
    max-width: 260px;
    animation: none; /* remove bounce no mobile */
  }

  /* Texto ajustado */
  .hero-text{
    max-width: 100%;
    text-align: center;
  }

  .hero-text h1{
    font-size: 22px;
    line-height: 1.2;
  }

  .hero-text p{
    font-size: 15px;
    line-height: 1.55;
    margin: 8px 0;
  }

  /* Botões empilhados */
  .hero-buttons{
    flex-direction: column;
    gap: 10px;
  }

}
/* ============== FIX MOBILE LAYOUT ==============
   Cole este bloco ao final de custom.css (substitui/override das regras móveis)
   Mantém animações e paleta; corrige overflow e enquadramentos.
   ================================================= */

@media (max-width: 768px) {
  /* header mais compacto */
  :root { --header-height: 64px; } /* reduz altura do header em telas menores */
  header.site-header{
    height:var(--header-height);
    padding:10px 14px;
    gap:10px;
    align-items:center;
    justify-content:space-between;
  }
  header .brand{font-size:16px}
  header nav{
    gap:10px;
    flex-wrap:wrap;
    justify-content:flex-end;
  }

  /* garante que o conteúdo respeite o header reduzido */
  main{padding-top:calc(var(--header-height) + 12px) !important;}

  /* evita overflow geral */
  html,body{overflow-x:hidden;}

  /* HERO: transforma em coluna e reduz paddings/margens */
  .hero-lateral{
    flex-direction:column;
    align-items:center;
    padding:20px;
    margin:16px;
    gap:14px;
    width:calc(100% - 32px);
    box-sizing:border-box;
    border-radius:14px;
  }
  .hero-lateral img{
    width:100%;
    max-width:320px;
    height:auto;
    animation:none; /* mantemos opção de remover bounce para performance */
  }
  .hero-text{max-width:100%;text-align:center}
  .hero-text h1{font-size:22px;line-height:1.18}

  /* cards: 1 coluna e espaçamento adequado */
  .container{padding:0 12px;margin:20px auto}
  .cards-wrapper{
    grid-template-columns:1fr !important;
    gap:16px;
    margin-top:8px;
  }
  .card{
    padding:16px;
    border-width:8px;
    border-radius:12px;
  }
  .card img{height:180px;object-fit:cover;border-radius:10px}

  /* project-blocks: coluna, centralizados */
  .project-block{
    flex-direction:column;
    align-items:center;
    text-align:center;
    padding:16px;
    margin-left:12px;
    margin-right:12px;
  }
  .project-block img{width:80%;max-width:320px;height:auto;margin-bottom:12px}

  /* botões empilhados */
  .hero-buttons{flex-direction:column;gap:10px;align-items:center}
  .card .card-actions{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:10px}

  /* backToTop menor */
  #backToTop{
    right:14px;
    bottom:18px;
    width:44px;
    height:44px;
  }
}

/* ajustes extra para telas muito pequenas */
@media (max-width: 420px) {
  :root { --header-height: 60px; }
  header.site-header{padding:8px 12px}
  .hero-lateral{padding:14px;margin:12px}
  .hero-text h1{font-size:20px}
  .card img{height:150px}
  .card .price{font-size:14px}
  .page-title{font-size:22px}
  .cta-final{padding:18px;margin:12px}
}

/* ======= MOBILE COMPACTO (override final) =======
   Cole este bloco ao final do custom.css
   Objetivo: reduzir escala geral no mobile (mais compacto)
   Mantém cores e animações; apenas diminui tamanhos/paddings
   ================================================ */

@media (max-width: 768px) {
  /* header e offset */
  :root { --header-height: 56px; }
  header.site-header {
    height: var(--header-height);
    padding: 8px 12px;
  }
  main { padding-top: calc(var(--header-height) + 8px) !important; }

  /* evitar overflow */
  html, body { overflow-x: hidden; }

  /* hero */
  .hero-lateral {
    padding: 12px;
    margin: 10px;
    gap: 12px;
    width: calc(100% - 20px);
    box-sizing: border-box;
    border-radius: 12px;
  }
  .hero-lateral img {
    width: 100%;
    max-width: 240px;
    height: auto;
    object-fit: cover;
    animation: none; /* opcional: desliga bounce para economia de CPU */
  }
  .hero-text { max-width: 100%; text-align: center; }
  .hero-text h1 { font-size: 20px; line-height: 1.12; }
  .hero-text p { font-size: 14px; line-height: 1.45; margin: 8px 0; }

  /* botões do hero */
  .hero-buttons { flex-direction: column; gap: 8px; align-items: center; }
  .hero-buttons a { padding: 8px 12px; font-size: 14px; border-radius: 10px; }

  /* cards: 1 coluna compacta */
  .container { padding: 0 10px; margin: 16px auto; }
  .cards-wrapper { grid-template-columns: 1fr !important; gap: 12px; }
  .card {
    padding: 12px;
    border-width: 6px;
    border-radius: 10px;
    box-shadow: 0 6px 14px rgba(0,0,0,0.06);
  }
  .card img { height: 140px; object-fit: cover; border-radius: 10px; margin-bottom: 12px; }
  .card h3 { font-size: 16px; }
  .card .price { font-size: 14px; }
  .card p { font-size: 13px; min-height: 36px; }

  /* ações do card em linha quando couber */
  .card .card-actions { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 8px; }

  /* project blocks compactos */
  .project-block {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 12px;
    gap: 12px;
    margin-left: 8px;
    margin-right: 8px;
  }
  .project-block img { width: 90%; max-width: 220px; height: auto; margin-bottom: 8px; }

  /* CTA final e rodapé */
  .cta-final { padding: 14px; margin: 12px; }
  .page-title { font-size: 22px; }

  /* back to top menor */
  #backToTop { right: 12px; bottom: 12px; width: 40px; height: 40px; }
}

/* ajustes extra para telas muito pequenas */
@media (max-width: 420px) {
  :root { --header-height: 52px; }
  header.site-header { padding: 6px 10px; }
  .hero-text h1 { font-size: 18px; }
  .hero-text p { font-size: 13px; }
  .card img { height: 120px; }
  .card h3 { font-size: 15px; }
  .page-title { font-size: 20px; }
  .cta-final { padding: 12px; margin: 10px; }
}/* End custom CSS */