@import url('/assets/css/pages/parceiros_page/summary.css');

:root {
  --recursos-hero-height: 62vh; /* ajuste */
  --recursos-hero-gradient-1: #b75f28;
  --recursos-hero-gradient-2: #f18b3e;
  --recursos-hero-gradient-3: #f4a040;
  --recursos-text-color: #fff;
  --recursos-max-width: 1140px;

  /* tuning mobile */
  --recursos-mobile-img-w: 120px;
  --recursos-mobile-gap: 1rem;
}

/* base */
html { font-size: 62.5%; }
body {
  background-color: #1a1a1a;
  color: white;
  margin: 0;
  font-size: 1.6rem;
  font-family: 'Inter', sans-serif;
  max-width: 100%;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* HERO recursos - container */
.recursos-hero {
  position: relative;
  color: var(--recursos-text-color);
  overflow: hidden;
  padding: 3.5rem 0;
  display: flex;
  align-items: center;
  height: 57rem;
  background-image: url('../../../images/images_pages/recursos_page/recursos/bg_desktop.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.recursos-hero .ngx-container {
  max-width: var(--recursos-max-width);
  margin: 0 auto;
  padding-left: 2rem;
  padding-right: 2rem;
}

/* -------- DESKTOP (a sua versão original) -------- */
.recursos-hero-desktop .recursos-hero-inner {
  display: flex;
  align-items: end;
  gap: 3.5rem;
  width: 100%;
  justify-content: space-between;
  box-sizing: border-box;
}

.recursos-hero-desktop .recursos-hero-media {
  flex: 0 0 36%;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
}

.recursos-hero-desktop .recursos-hero-img {
  width: min(420px, 40vw);
  height: auto;
  transform-origin: center;
  filter: drop-shadow(0 18px 30px rgba(0,0,0,0.35));
  animation: recursosFloat 4.5s ease-in-out infinite;
}

.recursos-hero-desktop .recursos-hero-content {
  flex: 1 1 56%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
}

.recursos-hero-desktop .recursos-title {
  font-size: 6.4rem;
  font-weight: 800;
  margin: 0 0 1rem 0;
  line-height: 1.05;
  color: #ffffff;
}

.recursos-hero-desktop .recursos-subtitle {
  font-size: 2.0rem;
  line-height: 1.6;
  margin: 0 0 2rem 0;
  color: rgba(255,255,255,0.92);
  max-width: 60rem;
}

/* CTA (herdado) */
.recursos-hero-desktop .recursos-cta-row { display: flex; gap: 1rem; align-items: center; }
.recursos-hero-desktop .btn-hero {
  background: #ffb25a;
  color: #000;
  text-decoration: none;
  padding: 1rem 2.4rem;
  border-radius: 1.2rem;
  font-weight: 700;
  font-size: 1.05rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.recursos-hero-desktop .btn-hero:hover { background: #f4a040; }

/* vinheta e animação (herdado) */
.recursos-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,0.08), transparent 30%);
}

@keyframes recursosFloat {
  0%,100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-14px) rotate(1deg); }
}

/* -------- MOBILE/ALTERNATE Blocks (por padrão hidden no desktop) -------- */
/* mobile version hidden por padrão; desktop version visível */
.recursos-hero-mobile { display: none; }
.recursos-hero-desktop { display: block; }

/* estilos específicos da versão mobile (quando ativada via media query abaixo) */
.recursos-mobile-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--recursos-mobile-gap);
  width: 100%;
  box-sizing: border-box;
}

.recursos-title-mobile {
  font-size: 4.2rem;
  font-weight: 800;
  margin: 0;
  line-height: 1.02;
  color: #fff;
  flex: 1 1 auto;
}

.recursos-mobile-media {
  flex: 0 0 var(--recursos-mobile-img-w);
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  pointer-events: none;
}

.recursos-mobile-img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 12px 22px rgba(0,0,0,0.35));
  display: block;

  /* AQUI: adiciona a animação float na imagem mobile */
  transform-origin: center;
  animation: recursosFloat 4.5s ease-in-out infinite;
}

.recursos-subtitle-mobile {
  margin-top: 0.8rem;
  font-size: 1.6rem;
  line-height: 1.5;
  color: rgba(255,255,255,0.95);
  max-width: 100%;
}

/* ================== RESPONSIVO ================== */

/* Tablet */
@media (max-width: 991px) {
  .recursos-hero-desktop .recursos-hero-inner { gap: 2rem; }
  .recursos-hero-desktop .recursos-hero-img { width: min(360px, 36vw); }
  .recursos-hero-desktop .recursos-title { font-size: 3.2rem; }
  .recursos-hero-desktop .recursos-subtitle { font-size: 1.45rem; max-width: 42rem; }
  .recursos-hero { padding: 3rem 0; height: auto; }
}

/* MOBILE: trocamos visibilidade das versões */
@media (max-width: 767px) {

  /* mostrar a versão mobile e esconder a desktop */
  .recursos-hero-desktop { display: none !important; }
  .recursos-hero-mobile { display: block !important; }

  /* ajustes gerais do hero em mobile */
  .recursos-hero {
    padding: 2.2rem 0;
    align-items: flex-start;
    height: auto;
    background: url('../../../images/images_pages/recursos_page/recursos/bg_mobile.png');
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
  }

  .recursos-hero .ngx-container {
    padding-left: 1.2rem;
    padding-right: 1.2rem;
    padding-top: 15rem;
    justify-content: center;
  }

  /* linha título + imagem lado a lado */
  .recursos-mobile-row {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: var(--recursos-mobile-gap);
    width: 100%;
  }

  .recursos-title-mobile {
    font-size: 4rem;
    line-height: 1.02;
    margin: 0;
    display: block;
    word-break: keep-all;
  }

  .recursos-mobile-media { flex: 0 0 var(--recursos-mobile-img-w); }
  .recursos-mobile-img { width: 100%; }

  /* subtítulo aparece abaixo ocupando largura total */
  .recursos-subtitle-mobile {
    margin-top: 1.6rem;
    font-size: 2rem;
    line-height: 1.5;
    max-width: 100%;
    color: rgba(255,255,255,0.95);
  }

  /* ajustes para telas muito estreitas */
  @media (max-width: 380px) {
    :root { --recursos-mobile-img-w: 100px; --recursos-mobile-gap: 0.6rem; }
    .recursos-title-mobile { font-size: 3.6rem; }
    .recursos-subtitle-mobile { font-size: 1.5rem; margin-top: 2rem; }
    .recursos-hero .ngx-container { padding-left: 0.8rem; padding-right: 0.8rem; }
    .accordion-button span{
      font-size: 1.5rem;
    }
  }
}