:root{
  /* VARIÁVEIS DE COR - FREESURF */
  --bg:#000;
  --accent:#b1112a;
  --accent-dark: #2b2b2b; /* O RETÂNGULO: Cinza Chumbo (Conforme solicitado) */
  --muted:#ffffff;
  --white:#ffffff;
  --maxw:980px;
}

/* Reset */
*{box-sizing:border-box;font-family:Arial, Helvetica, sans-serif;color:var(--white)}
body{margin:0;background:var(--bg);-webkit-font-smoothing:antialiased}
.wrapper{max-width:var(--maxw);margin:0 auto;padding:18px}

/* HERO */
.hero{position:relative;overflow:hidden;margin-bottom:10px}
.slides{position:relative}
.slide{display:none;width:100%;height:auto}
.slide.active{display:block}
.overlay{position:absolute;left:50%;transform:translateX(-50%);bottom:30px;z-index:20;pointer-events:none}
.overlay img{width:430px; max-width: 80vw; height:auto; object-fit:contain} 

/* Arrows */
.arrow{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,0.95);color:#111;border-radius:6px;padding:6px 10px;border:0;cursor:pointer;z-index:40}
.arrow.prev{left:12px}
.arrow.next{right:12px}

/* SECTIONS */
.section{padding:18px 0}

/* DESTAQUES (HIGHLIGHTS) */
.highlights { display: flex; flex-direction: column; align-items: center; gap: 18px; margin: 40px 0; padding: 0 12px; }
.highlight { position: relative; display: block; width: auto; max-width: 92%; margin: 8px 0; text-align: center; overflow: visible; }
.highlight .inner { display: inline-block; position: relative; vertical-align: middle; box-sizing: border-box; max-width: 92%; }
.highlight .inner .icon { position: absolute; left: -44px; top: 50%; transform: translateY(-50%); z-index: 9999; pointer-events: none; width: 88px; height: auto; }
.highlight .inner .icon img { width: 100%; height: auto; display: block; transition: transform .28s cubic-bezier(.2,.9,.2,1); }
.highlight .rect { display: inline-block; vertical-align: middle; max-width: 720px; min-width: 280px; margin: 0 auto; padding: 20px 28px 20px 110px; background: #373838; border-radius: 26px; box-shadow: 0 10px 30px rgba(0,0,0,0.6); border: 3px solid rgba(0,155,219,0.08); box-sizing: border-box; text-align: left; color: var(--muted); line-height: 1.35; }
.highlight .rect strong { display:block; font-weight:800; margin-bottom:8px; color:var(--white); font-size:18px; line-height:1.12; text-transform:uppercase; }
.highlight .rect .small { color:var(--muted); font-size:15px; }
.highlight:hover .inner .icon img { transform: translateX(6px); }

/* GALLERY & CIRCLE */
.gallery{display:grid;grid-template-columns:repeat(2,267px);gap:18px;justify-content:center;margin:24px auto}
.gallery img{width:267px;height:309px;object-fit:cover;border-radius:6px;display:block;transition:transform .35s ease;box-shadow:0 8px 20px rgba(0,0,0,0.45)}
.gallery img:hover{transform:translateY(-8px) scale(1.03)}

.circle-wrap{display:flex;justify-content:center;margin:28px 0}
.circle{ width: 100%; max-width: 946px; aspect-ratio: 1/1; border-radius: 50%; overflow: hidden; border: 12px solid var(--accent); box-shadow: 0 18px 80px rgba(0,0,0,0.6); }
.circle img{width:100%;height:100%;object-fit:cover;display:block}

/* BOTTOM UNITS */
.bottom-units { text-align: center; margin: 40px 0; }
.bottom-unit { margin: 18px 0; overflow: visible; }
.bottom-inner { display: inline-block; position: relative; max-width: 92%; overflow: visible; }
.bottom-icon { position: absolute; left: -44px; top: 50%; transform: translateY(-50%); width: 88px; pointer-events: none; z-index: 20; }
.bottom-icon img { width: 100%; height: auto; display: block; transition: transform 0.25s ease-out; }
.bottom-rect { display: inline-block; background: #373838; border-radius: 20px; padding: 18px 28px 18px 110px; border: 3px solid rgba(0,155,219,0.08); box-shadow: 0 10px 25px rgba(0,0,0,0.5); color: var(--muted); text-align: left; max-width: 720px; min-width: 250px; box-sizing: border-box; line-height: 1.32; }
.bottom-rect strong { color: var(--white); font-size: 18px; font-weight: 800; display: block; margin-bottom: 6px; text-transform: uppercase; }
.bottom-inner:hover .bottom-icon img { transform: translateX(6px); }

/* CTA + LOGO */
.cta{text-align:center;margin:36px 0}
.cta h2{color:var(--accent);letter-spacing:2px;font-size:36px;margin:0 0 8px} 
.cta p{color:var(--muted);max-width:640px;margin:10px auto}
.logo{display:inline-block;transition:transform .36s cubic-bezier(.2,.9,.2,1),opacity .36s; will-change:transform,opacity}
.logo:hover{transform:translateX(10px);opacity:.96}

/* FOOTER */
.contacts-footer { display: flex; justify-content: center; align-items: center; gap: 22px; padding: 28px 12px; background: transparent; flex-wrap: wrap; }
.contact-block{display:flex;align-items:center;gap:12px;cursor:pointer;transition:transform .22s ease}
.contact-block:hover{transform:translateY(-6px)}
.contact-block img{width:116px;height:116px;border-radius:50%;object-fit:cover;border:6px solid var(--accent);box-shadow:0 6px 18px rgba(0,0,0,0.45)}
.contact-text{display:flex;flex-direction:column;text-align:left;color:var(--white)}
.contact-text small{color:var(--muted);font-size:13px}
.whats-center img{width:56px;height:56px;display:block;margin:0 14px}

/* === WHATS APP FIXO (Correção Definitiva) === */

/* Container Principal - Bloco Flutuante Unificado */
.whats-fixed-container {
  position: fixed !important; /* Força a posição fixa */
  right: 18px !important;     /* Cola na direita */
  bottom: 18px !important;    /* Cola no fundo */
  z-index: 99999 !important;  /* Garante que fique por cima de tudo */
  width: auto !important;     /* Evita que estique a largura */
  
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  
  /* Estilo do Bloco Unificado */
  background-color: var(--accent); /* Fundo Azul */
  border: 3px solid #ffffff;       /* Borda Branca */
  border-radius: 24px;             /* Arredondamento */
  padding: 12px 10px;              /* Espaço interno */
  box-shadow: 0 8px 30px rgba(0,0,0,0.5); /* Sombra forte */
  
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* O Texto de CTA (Sem fundo próprio, herda o do pai) */
.whats-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: transparent;
  border: none;
  padding: 0;
  
  color: var(--white);
  font-weight: 900;
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 0.5px;
  line-height: 1.1;
  text-align: center;
  
  pointer-events: none; /* Clique passa para o pai */
}

/* Ícone do WhatsApp */
.whats-icon-img {
  width: 54px; 
  height: 54px;
  object-fit: contain;
  display: block;
  /* Sombra leve no ícone para destacar sobre o azul */
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  pointer-events: none;
}

/* Animações Hover no Bloco Inteiro */
.whats-fixed-container:hover {
  transform: translateY(-6px); /* Sobe o bloco todo */
}
.whats-fixed-container:hover .whats-icon-img {
  transform: scale(1.1); /* Aumenta o ícone levemente */
}

/* Reveal Animation */
.fall-in{opacity:0; transform:translateY(-36px); transition:opacity .7s ease, transform .7s ease}
.fall-in.visible{opacity:1; transform:translateY(0)}

/* RESPONSIVO */
@media(max-width:900px){
  .circle{border-width:8px}
  .gallery{grid-template-columns:repeat(2,calc((100% - 18px)/2))}
  .contact-block img{width:100px;height:100px}
  .highlight .rect, .bottom-rect { padding-left: 86px; min-width: 200px; }
  .highlight .inner .icon, .bottom-icon { left: -36px; width:64px; }
  .overlay img { max-width: 70vw; }
}

@media(max-width:600px){
  .gallery{grid-template-columns:1fr}
  .gallery img{width:100%;height:auto;aspect-ratio:267/309}
  .circle-wrap { margin: 18px 0; }
  .overlay img { max-width: 80%; height: auto; }
  
  .contacts-footer { flex-direction: column; gap: 24px; padding: 24px 12px; }
  .whats-center { display: none; }
  .contact-block { justify-content: center; width: 100%; gap: 18px; }

  /* Ajuste Mobile do Botão Fixo */
  .whats-fixed-container { 
    right: 12px; 
    bottom: 12px; 
    padding: 10px 8px;
    border-radius: 20px;
  }
  .whats-cta { font-size: 10px; }
  .whats-icon-img { width: 44px; height: 44px; }
  
  .highlight .rect, .bottom-rect { padding-left: 64px; min-width: 140px; padding-right:18px; }
  .highlight .inner .icon, .bottom-icon { left: -32px; width: 56px; }
}