@import url('https://fonts.googleapis.com/css2?family=Muli:wght@400;600&display=swap');

/* ===== Base ===== */
:root{
  /* Altura do carrossel responsiva: entre 180px e 280px, usando a altura da viewport no meio */
  --carousel-h: clamp(180px, 35vh, 280px);
  --btn-font: clamp(17px, 3.8vw, 20px);
  --emoji-font: clamp(22px, 6vw, 28px);
  --body-font: clamp(16px, 2.6vw, 18px);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  font-family: 'Muli', sans-serif;
  background: #000;
  color: #fff;
  text-align: center;
  -webkit-text-size-adjust: 100%; /* evita zoom estranho em iOS */
}

body > * { background-color: transparent; }

/* ===== Topo / Cabeçalho ===== */
.topo {
  background-color: #030304;
  color: #e52a18;
  padding: 0 0 20px 0;
  margin: 0 0 24px 0;
}

.topo p {
  font-size: var(--body-font);
  line-height: 1.35;
  margin: 4px 0;
}

.site-url { opacity: 0.95; }
.endereco  { opacity: 0.85; }
.endereco--bottom, .site-url--bottom { font-size: clamp(14px, 2.2vw, 16px); }

/* ===== Carrossel ===== */
.carousel,
.carousel-inner,
.carousel-item,
.carousel-img {
  height: var(--carousel-h);
  max-height: var(--carousel-h);
  overflow: hidden;
}

.carousel-inner { margin: 0 !important; padding: 0 !important; }
.carousel-item   { margin: 0 !important; padding: 0 !important; background: #000; }

.carousel-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;        /* recorta mantendo proporção */
  object-position: center;  /* foca no centro */
}

/* Efeito fade suave */
.carousel-fade .carousel-item {
  opacity: 0;
  transition: opacity 2.2s ease;
  position: absolute;
  inset: 0; /* top/right/bottom/left:0 */
}
.carousel-fade .carousel-item.active {
  opacity: 1;
  position: relative;
}

/* ===== Botões ===== */
.buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;                 /* espaço consistente entre botões */
  margin: 22px auto 26px;
  width: 100%;
  max-width: 640px;
  padding: 0 14px;
}

.buttons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;                 /* espaço entre emoji e label */
  width: 100%;
  min-height: 52px;          /* área de toque confortável (>=44px) */
  padding: 14px 16px;
  border-radius: 12px;
  background-color: #e52a18;
  color: #fff;
  text-decoration: none;
  font-size: var(--btn-font);
  line-height: 1.2;
  font-weight: 600;
  transition: transform .08s ease, opacity .2s ease, background-color .2s ease;
}

.buttons a:active { transform: scale(0.98); }
.buttons a:hover  { background-color: #f03b2a; }

.buttons .emoji { 
  font-size: var(--emoji-font);
  line-height: 1;
  display: inline-block;
}
.buttons .label {
  display: inline-block;
  white-space: nowrap;       /* evita quebra feia no meio do texto/emoji */
}

/* ===== Logomarca ===== */
.logo-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 26px 0 20px 0;
  padding: 0 14px;
}
.logo-img {
  width: min(220px, 60vw);
  height: auto;
  display: block;
}

/* ===== Mapa ===== */
.map {
  margin: 44px auto 120px;
  text-align: center;
  padding: 0 14px;
  max-width: 900px;
}

.map h2 {
  font-size: clamp(20px, 5.2vw, 28px);
  color: #e52a18;
  margin-bottom: 16px;
}

.map iframe {
  width: 100%;
  max-width: 700px;
  height: clamp(260px, 45vh, 400px);
  border: 4px solid #e52a18;
  border-radius: 12px;
  background: #000; /* previne flashes brancos */
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}

/* ===== Ajustes gerais e anti “faixa branca” ===== */
.carousel,
.carousel-inner,
.carousel-item,
.carousel-inner img {
  background-color: #000 !important;
}

/* ===== Mobile fino (até 380px) ===== */
@media (max-width: 380px) {
  :root {
    --carousel-h: clamp(170px, 38vh, 240px);
    --emoji-font: clamp(22px, 7vw, 28px);
  }
  .buttons { gap: 10px; }
  .buttons a { min-height: 50px; padding: 12px 14px; }
}

/* ===== Telas grandes (>= 992px) ===== */
@media (min-width: 992px) {
  :root {
    --carousel-h: clamp(220px, 35vh, 320px);
    --btn-font: clamp(18px, 1.8vw, 22px);
    --emoji-font: clamp(24px, 2.2vw, 30px);
  }
  .buttons { max-width: 720px; }
  .logo-img { width: min(260px, 28vw); }
}