/* Keep initial text layout stable before the optional motion stylesheet loads. */
.home-hero__line, .home-product__title-line { display: block; }
.home-product__media, .home-product__enter { width: 100%; }

/* Legacy transition:all also animates font/layout changes during CSS loading. */
.core-content, .header, .header .attributes li { transition: none !important; }
.home a, .header a, .footer a { transition-property: transform, opacity !important; }

/* The home needs seven icons, not the full Font Awesome webfont. Reuse its
   licensed SVGs; shared header/footer markup and other pages stay compatible. */
.header .fa, .footer .fa { font-family: inherit; }
.header .fa::before, .footer .fa::before {
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  vertical-align: -.125em;
  -webkit-mask: var(--home-icon) center / contain no-repeat;
  mask: var(--home-icon) center / contain no-repeat;
}
.header .fa-bars { --home-icon: url('/guia/assets/font-awesome/svgs/solid/bars.svg'); }
.header .fa-remove { --home-icon: url('/guia/assets/font-awesome/svgs/solid/times.svg'); }
.footer .fa-facebook { --home-icon: url('/guia/assets/font-awesome/svgs/brands/facebook-f.svg'); }
.footer .fa-instagram { --home-icon: url('/guia/assets/font-awesome/svgs/brands/instagram.svg'); }
.footer .fa-twitter { --home-icon: url('/guia/assets/font-awesome/svgs/brands/twitter.svg'); }
.footer .fa-linkedin { --home-icon: url('/guia/assets/font-awesome/svgs/brands/linkedin-in.svg'); }
.footer .fa-youtube-play { --home-icon: url('/guia/assets/font-awesome/svgs/brands/youtube.svg'); }

/* Keep the fallback for this navigation when fonts arrive after first paint.
   Reuse the preloaded DM Sans files on fast/cached visits without a late swap. */
@font-face {
  font-family: HomeHeading;
  src: url('../fonts/dm_sans/DMSans-Bold.woff') format('woff');
  font-display: optional;
}
/* Match the local DM Sans vertical metrics while its font files load.
   DMSans hhea: ascent 992, descent 310, line gap 0, units per em 1000. */
@font-face {
  font-family: HomeDMFallback;
  src: local('Arial'), local('Liberation Sans');
  font-weight: 400;
  ascent-override: 99.2%;
  descent-override: 31%;
  line-gap-override: 0%;
}
@font-face {
  font-family: HomeDMBoldFallback;
  src: local('Arial Bold'), local('Liberation Sans Bold');
  font-weight: 400 700;
  ascent-override: 99.2%;
  descent-override: 31%;
  line-gap-override: 0%;
}
.home { font-family: HomeDM, HomeDMFallback, Arial, sans-serif; }
.home h1, .home h2, .home h3, .header .menu li a {
  font-family: HomeHeading, HomeDMBoldFallback, Arial, sans-serif;
}
.header nav[data-native-navigation] .nav-header { top: 0; }
.header nav[data-native-navigation] .nav-header .brand { margin-top: 15px!important; }
@media (max-width: 991px) {
  .header nav[data-native-navigation] .nav-header .brand { margin-top: 0!important; }
}

/* The legacy menu CSS uses both 991px and 992px. Keep its last mobile pixel
   usable too, including the close button and the full-width menu panel. */
@media (min-width: 991.01px) and (max-width: 992px) {
  .header nav[data-native-navigation] .header__mobile { display: block; }
  .core-responsive-slide nav[data-native-navigation] .wrap-core-nav-list {
    width: 100%;
    margin-left: -100%;
    padding-top: 75px;
    background: #fff;
    z-index: 1070;
  }
  .core-responsive-slide nav[data-native-navigation].open-responsive .wrap-core-nav-list { margin-left: 0; }
  .header nav[data-native-navigation] .header__mobile-toggle { font-size: 24px!important; }
  .header nav[data-native-navigation] .menu li { padding: 15px 20px!important; }
  .header nav[data-native-navigation] .menu li a { padding: 0!important; }
}

/* Hero presentation: preserve the full 16:9 video on every screen size. */
.home-hero {
  background: radial-gradient(circle at 72% 38%, rgb(123 76 190 / 7%), transparent 43%), #fbf9fd;
  padding: 100px 0 36px;
}
.home-hero::before { display: none; }
.home-hero .home-wrap { width: min(1440px, calc(100% - 64px)); }
.home-hero__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2.5vw, 48px); }
.home-hero__stage {
  position: relative;
  width: 100%;
  max-width: none;
  height: auto;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid #e8e2ef;
  border-radius: 20px;
  background: #171020;
  box-shadow: 0 24px 58px #321a5720;
}
.home-hero__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.home-hero__video { display: block; width: 100%; height: 100%; object-fit: contain; }
@media (max-width: 1100px) {
  .home-hero__grid { grid-template-columns: minmax(0, 1fr); }
  .home-hero__visual { width: min(100%, 680px); margin-inline: auto; }
}
@media (max-width: 767px) {
  .home-hero { padding: 88px 0 32px; }
  .home-hero .home-wrap { width: min(100% - 36px, 540px); }
  .home-hero__grid { display: flex; flex-direction: column; gap: 0; }
  .home-hero__copy { display: contents; }
  .home-hero__copy h1 { order: 1; }
  .home-hero__copy .home-lead { order: 2; }
  .home-actions { order: 3; }
  .home-hero__reassurance { order: 4; }
  .home-hero__visual { order: 5; width: 100%; margin: 8px 0 0; }
  .home-hero__facts { order: 6; }
  .home-hero__trust { order: 7; }
}
@media (max-width: 380px) {
  .home-hero .home-wrap { width: calc(100% - 28px); }
}