/*
 * Acabamento visual compartilhado pelas LPs em HTML Original.
 * É entregue por Link HTTP para preservar exatamente os bytes do documento
 * fonte armazenado no bucket privado.
 */

@font-face {
  font-family: 'Gilroy Cláudia Raia';
  src: url('/assets/fonts/gilroy/Gilroy-Regular.ttf') format('truetype');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'Gilroy Cláudia Raia';
  src: url('/assets/fonts/gilroy/Gilroy-Medium.ttf') format('truetype');
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: 'Gilroy Cláudia Raia';
  src: url('/assets/fonts/gilroy/Gilroy-SemiBold.ttf') format('truetype');
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: 'Gilroy Cláudia Raia';
  src: url('/assets/fonts/gilroy/Gilroy-Bold.ttf') format('truetype');
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: 'Gilroy Cláudia Raia';
  src: url('/assets/fonts/gilroy/Gilroy-ExtraBold.ttf') format('truetype');
  font-style: normal;
  font-weight: 800;
  font-display: swap;
}

@font-face {
  font-family: 'Gilroy Cláudia Raia';
  src: url('/assets/fonts/gilroy/Gilroy-Black.ttf') format('truetype');
  font-style: normal;
  font-weight: 900;
  font-display: swap;
}

:root {
  --font-display: 'Gilroy Cláudia Raia', Gilroy, system-ui, sans-serif;
  --font-body: 'Gilroy Cláudia Raia', Gilroy, system-ui, sans-serif;
}

/* O mesmo símbolo Aceleraí herda a cor de cada contexto da LP. */
svg.seta {
  width: 18px;
  height: 16px;
  flex: 0 0 18px;
  background-color: currentColor;
  -webkit-mask: url('/assets/icone-acelerai.png') center / contain no-repeat;
  mask: url('/assets/icone-acelerai.png') center / contain no-repeat;
}

svg.seta > * {
  display: none !important;
}

/* Nos subtítulos, o ícone mantém as três faces da marca, incluindo a branca. */
.section-tag svg.seta {
  background-color: transparent;
  background-image: url('/assets/icone-acelerai.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  -webkit-mask: none;
  mask: none;
}

.media-slot--photo {
  background: transparent !important;
  border-color: transparent !important;
}

.media-slot--photo > .media-slot__grain,
.media-slot--photo > .media-slot__tint,
.media-slot--photo > .media-slot__dash,
.media-slot--photo > .media-slot__center {
  display: none !important;
}

/* Imagens transparentes da Cláudia para slots que vieram vazios no original. */
.hero__grid > .media-slot {
  background: transparent url('/assets/hero-foto-01.png') center bottom / contain no-repeat !important;
  border-color: transparent !important;
}

.grid-2 > .media-slot {
  background: transparent url('/assets/trajetoria-sucesso.png') center bottom / contain no-repeat !important;
  border-color: transparent !important;
}

/* A foto da seção de propaganda tem enquadramento próprio. */
.section--band.bg-section .grid-2 > .media-slot {
  background: transparent url('/assets/da-tela-da-tv.png') center bottom / contain no-repeat !important;
}

.hero__grid > .media-slot > *,
.grid-2 > .media-slot > * {
  display: none !important;
}

/* Dissolve o rodapé dos recortes no fundo original de cada seção. */
.hero__grid > .media-slot,
.section--band.bg-section .grid-2 > .media-slot,
.grid-marcas .media-slot--photo .media-slot__img,
.grid-segmentos .media-slot--photo .media-slot__img {
  -webkit-mask-image: linear-gradient(
    to bottom,
    #000 68%,
    rgba(0, 0, 0, 0.78) 80%,
    rgba(0, 0, 0, 0.24) 94%,
    transparent 100%
  );
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-image: linear-gradient(
    to bottom,
    #000 68%,
    rgba(0, 0, 0, 0.78) 80%,
    rgba(0, 0, 0, 0.24) 94%,
    transparent 100%
  );
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
}

/* A foto de marcas é mais vertical que o card: preservar a pessoa inteira. */
.grid-marcas .media-slot--photo .media-slot__img {
  object-fit: contain;
  object-position: center bottom;
}

/* Sem recorte: manter o rosto e a silhueta inteiros em afinidade. */
.grid-segmentos .media-slot--photo .media-slot__img {
  object-fit: contain;
  object-position: center bottom;
}

/* Logos oficiais das marcas do portfólio. */
.brand-cards .brand-card {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.brand-cards .brand-card:nth-child(1) {
  background-image: url('/assets/logo-drogasil.webp');
  background-size: 70% auto;
}

.brand-cards .brand-card:nth-child(2) {
  background-image: url('/assets/logo-uber-white.png');
  background-size: 49.6% auto;
}

.brand-cards .brand-card:nth-child(3) {
  background-color: #ff5100;
  background-image: url('/assets/logo_movida.jpeg');
  background-size: 64% auto;
}

.brand-cards .brand-card:nth-child(4) {
  background-image: url('/assets/logo-wella-clean.png');
  background-size: 46.4% auto;
}

.brand-cards .ph-brand {
  color: transparent;
  font-size: 0;
}

/* Vídeo fornecido para a faixa de apresentação da Cláudia Raia. */
.video__wrap {
  display: block !important;
  position: relative;
  aspect-ratio: 16 / 9;
  max-width: 960px;
  margin-inline: auto;
  overflow: hidden;
}

.video__wrap > .media-slot,
.video__wrap > .video__play {
  display: none !important;
}

.claudia-raia-video,
.claudia-raia-video iframe {
  display: block;
  width: 100%;
  height: 100%;
}

.claudia-raia-video {
  position: absolute;
  inset: 0;
}

.claudia-raia-video iframe {
  border: 0;
}

/* 95,8 × 24 px atuais × 1,2 = 115 × 28,8 px. */
.site-header .logo-img {
  width: auto;
  height: 28.8px;
}