@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap");

/* -------------------- RESET/BASE -------------------- */
    *,*::before,*::after{
      box-sizing:border-box;
    }

    html{
      scroll-behavior:smooth;
    }

    body{
      margin:0;
      font-family:Poppins, sans-serif;
      color:#1f2937;
      background:#f6f7f8;
    }

    img{
      max-width:100%;
      display:block;
    }

    a{
      color:inherit;
      text-decoration:none;
    }

    :root{
      --primary-color: #03302D;
      --primary-color-dark: #105a53;
      --text-dark: #0c0a09;
      --text-light: #C4AC76;
      --white: #ffffff;
      --ink:#111827;            
      --muted:#6b7280;          
      --line:#e5e7eb;           
      --card:#ffffff;           
      --radius:16px;            
      --shadow:0 10px 30px rgba(0,0,0,.06);
      --container:1200px;
    }
    .container{
      width:min(var(--container),92%);
      margin-inline:auto;
    }

    .btn_quarto{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:.5rem;
      font-weight:600;
      border:none;
      border-radius:0.3125rem;
      padding:.7rem 1.2rem;
      cursor:pointer;
      background:var(--primary-color);
      color: var(--white);
      transition:.2s;
    }

    .btn:hover{
      background:var(--primary-color-dark);
    }

    .btn.secondary{
      background:var(--white);
      color:#111;
      border:1px solid var(--line);
    }

    .muted{
      color:var(--muted);
    }

    .divider{
      height:1px;
      background:var(--line);
      margin:1rem 0;
    }

    /* -------------------- HEADER -------------------- */

    

    /* -------------------- HERO -------------------- */
    .hero{
      position:relative;
      margin-top: 10rem;
      border-radius:var(--radius);
      overflow:hidden;
      box-shadow:var(--shadow);
    }

    .hero__img{
      width:100%;
      height:62vh;
      min-height:360px;
      object-fit:cover;
      background:#e5e7eb;
    }

    .hero__badge{
      position:absolute;
      right:1rem;
      bottom:1rem;
      background:#fff;
      border-radius:999px;
      padding:.55rem .9rem;
      font-weight:700;
      box-shadow:var(--shadow);
    }

    /* -------------------- THUMB STRIP -------------------- */
    .thumbs{
      display:flex;
      gap:.75rem;
      overflow:auto;
      padding:.75rem;
      border:1px solid var(--line);
      border-radius:var(--radius);
      background:#fff;
      scroll-snap-type:x mandatory;
    }

    .thumb{
      flex:0 0 160px;
      border-radius:12px;
      overflow:hidden;
      cursor:pointer;
      scroll-snap-align:start;
      border:1px solid var(--line);
      position:relative;
    }

    .thumb img{
      height:100px;
      width:100%;
      object-fit:cover;
    }

    .thumb.active{
      outline:3px solid var(--primary-color);
      outline-offset:0;
    }

    /* -------------------- MAIN GRID -------------------- */
    .grid{
      display:grid;
      grid-template-columns:2fr 1fr;
      gap:1.25rem;
      margin:1.25rem 0;
    }

    /* -------------------- TABS -------------------- */
    .tabs{
      background:#fff;
      border:1px solid var(--line);
      border-radius:var(--radius);
      overflow:hidden;
    }

    .tablist{
      display:flex;
      gap:.25rem;
      border-bottom:1px solid var(--line);
      background:linear-gradient(#fff,#fafafa);
    }

    .tablist button{
      flex:1;
      padding:1rem;
      background:transparent;
      border:0;
      font-weight:700;
      color:#475569;
      cursor:pointer;
    }

    .tablist button[aria-selected="true"]{
      color:#111;
      background:#fff;
      border-bottom:3px solid var(--primary-color-dark);
    }

    .tabpanel{
      display:none;
      padding:1rem 1.2rem;
    }

    .tabpanel.active{
      display:block;
    }

    .features{
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:.6rem .8rem;
      margin-top:.75rem;
    }

    .pill{
      display:inline-flex;
      align-items:center;
      gap:.4rem;
      border:1px solid var(--line);
      border-radius:999px;
      padding:.35rem .6rem;
      font-size:.92rem;
      color:#374151;
    }

    /* -------------------- ASIDE (RESERVA) -------------------- */
    .aside{
      background:#fff;
      border:1px solid var(--line);
      border-radius:var(--radius);
      padding:1rem;
      position:sticky;
      top:140px;
      height:fit-content;
      box-shadow:var(--shadow);
    }

    .aside h4{
      margin:.25rem 0 .6rem;
    }

    /* -------------------- INSTALAÇÕES -------------------- */
    .section{
      margin:2.2rem 0;
    }

    .section h3{
      font-family: Poppins, sans-serif;
      font-size:1.6rem;
      margin:.25rem 0 1rem;
    }

    .cards{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:1rem;
    }

    .card{
      background:#fff;
      border:1px solid var(--line);
      border-radius:var(--radius);
      overflow:hidden;
    }

    .card img {
      width: 100%;           /* ocupa toda a largura do card */
      height: 15rem;         /* altura fixa do container */
      object-fit: cover;     /* mantém proporção e corta o excesso */
      display: block;
    }

    .card__body{
      padding:.9rem;
    }

    .card__title{
      font-weight:800;
    }

    /* -------------------- FOOTER -------------------- */

    
    /* config whatsapp */
.float{
	position:fixed;
	width:60px;
	height:60px;
	bottom:40px;
	right:60px;
	background-color:#25d366;
	color:#FFF;
	border-radius:50px;
	text-align:center;
  font-size:30px;
	box-shadow: 2px 2px 3px #999;
  z-index:100;
}

.my-float{
	margin-top:1rem;
}

    /* -------------------- MODAL -------------------- */
    .modal{
      position:fixed;
      inset:0;
      display:none;
      place-items:center;
      background:rgba(0,0,0,.5);
      z-index:50;
    }

    .modal__card{
      width:min(560px,92%);
      background:#fff;
      border-radius:20px;
      padding:1rem 1.2rem;
      box-shadow:var(--shadow);
    }

    .modal header{
      position:static;
      border-bottom:0;
    }

    .modal__row{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:.75rem;
    }

    .modal label{
      font-size:.9rem;
      color:#374151;
      font-weight:700;
    }

    .modal input,.modal select{
      width:100%;
      padding:.7rem;
      border:1px solid var(--line);
      border-radius:10px;
    }

    .modal .actions{
      display:flex;
      gap:.5rem;
      justify-content:flex-end;
      margin-top:1rem;
    }

    /* -------------------- UTILITIES -------------------- */
    .reveal{
      opacity:0;
      transform:translateY(12px);
      transition:all .6s ease;
    }

    .reveal.in{
      opacity:1;
      transform:none;
    }

    .to-top{
      position:fixed;
      right:16px;
      bottom:16px;
      width:44px;
      height:44px;
      border-radius:50%;
      display:grid;
      place-items:center;
      background: var(--primary-color);
      color:#fff;
      cursor:pointer;
      box-shadow:var(--shadow);
      opacity:0;
      pointer-events:none;
      transition:.3s;
    }

    .to-top.show{
      opacity:1;
      pointer-events:auto;
    }

    /* -------------------- BREAKPOINTS -------------------- */
    @media (max-width: 992px){
      .grid{
        grid-template-columns:1fr;
      }
      .aside{
        position:relative;top:0;
      }
      .cards{
        grid-template-columns:1fr 1fr;
      }
      .modal__row{
        grid-template-columns:1fr;
      }

    }
    @media (max-width: 700px){
      nav.primary{
        display:none;
        position:absolute;
        inset:60px 0 auto 0;
        background:#fff;
        border-bottom:1px solid var(--line);
        padding:1rem .9rem;
        flex-direction:column;
      }
      nav.primary.open{
        display:flex;
      }
      .burger{
        display:flex;
      }
      .hero__img{
        height:48vh;
      }
      .cards{
        grid-template-columns:1fr;
      }
    }

/* Container das miniaturas */
.thumbs {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto; /* permite rolagem horizontal se tiver muitas */
  padding-bottom: 0.5rem;
  scroll-behavior: smooth;
}

/* Cada miniatura */
.thumbs__item {
  flex: 0 0 auto;       /* não cresce nem encolhe */
  width: 200px;          /* largura fixa da miniatura */
  height: 150px;          /* altura fixa da miniatura */
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  background: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.thumbs__item.active {
  border-color: #007bff; /* destaque da miniatura selecionada */
}

/* Imagem dentro da miniatura */
.thumbs__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;    /* mantém proporção e preenche a miniatura */
  display: block;
}