/* Impede scroll horizontal global */
html,
body {
  overflow-x: hidden;
}

/* Corrige iframes de vídeo */
.ratio iframe {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Corrige imagens forçando responsividade */
img {
  max-width: 100%;
  height: auto;
}
/* Estilos básicos para o UGC Creator */
section[id] {
  scroll-margin-top: 35px; /* Ajuste este valor se sua barra for mais alta */
}
.hero-section {
  background:
    linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.6)),
    url("/static/assets/images/erika-1920.jpg") no-repeat center center;
  background-size: cover; /* apenas cover já resolve */
  min-height: 100vh; /* ocupa sempre a tela inteira */
  color: white;
  display: flex;
  align-items: flex-end;

  min-height: 100vh;
  min-height: 100svh;
}
.btn-contato:hover {
  color: white;
}
.portfolio-item {
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.section-heading {
  border-bottom: 3px solid #ff4500; /* Cor de destaque */
  display: inline-block;
  padding-bottom: 5px;
}
.ugc-name {
  font-family: "Prata", serif;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0em;
  text-transform: uppercase;
  font-size: clamp(3.2rem, 5.5vw, 5.77rem);
}
.ugc-home-subtitle {
  font-size: 2.1rem;
}
h1,
h2,
h3 {
  font-family: "Playfair Display", serif;
}
h4,
h5,
h6,
.btn,
nav {
  font-family: "Poppins", sans-serif;
}
body,
p {
  font-family: "Inter", sans-serif;
}
.logo-darken {
  /* Inverte as cores (branco vira preto) */
  filter: invert(100%);
  /* Remove qualquer cor residual para tons de cinza */
  filter: invert(100%) grayscale(100%);
  /* Diminui o brilho para que não fique um preto muito forte (opcional) */
  filter: invert(100%) grayscale(100%) brightness(80%);

  /* Garante que o fundo da logo (se for transparente) não cause artefatos */
  mix-blend-mode: multiply;
}

/* Estilo para simular a moldura do celular */
.phone-mockup {
  position: relative;
  /* Proporção vertical de um celular moderno (9:16) */
  padding-top: 177.78%;
  background-color: #000;
  border-radius: 16px; /* Bordas arredondadas do celular */
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
  overflow: hidden; /* Garante que a imagem caiba perfeitamente */
}

.phone-mockup img,
.phone-mockup .play-button {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Garante que a imagem preencha o espaço sem distorcer */
}

.phone-mockup .play-button {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  font-size: 3rem;
  color: white;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
  transition: background 0.3s;
}

.phone-mockup .play-button:hover {
  background: rgba(0, 0, 0, 0.1);
}

.img-fluid:hover {
  opacity: 1 !important;
}

.ugc-photo-wrapper {
  position: relative;
  width: 100%;
  padding-top: 100%; /* cria quadrado usando aspect-ratio */
  overflow: hidden;
  border-radius: 8px; /* opcional */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* opcional */
}

.ugc-photo-wrapper img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* mantém proporção sem distorcer */
}