/*
========================================================
SUMÁRIO
========================================================
1.  FONT FACE
2.  UTILITIES & GLOBAL STYLES
3.  FLEXBOX
4.  HEADER
5.  FOOTER
6.  CARD WRAPPER
7.  CAROUSEL
8.  BLOG
9.  FORMS (ConvertKit & Comments)
10. TESTIMONIAL
11. OPTIMIZELEADS
========================================================
========================================================
PRINCIPAIS CLASSES PARA CLIENTE FINAL
========================================================
/* 
Principais classes utilitárias e componentes para uso em páginas:
  .max-width        - Limita a largura máxima do conteúdo e centraliza.
  .display-none     - Oculta o elemento.
  .ctaButton        - Estilização para botões de chamada para ação.
  .activewpp        - Ajuste de posição para botão/flutuante do WhatsApp.
  .link-red         - Deixa links com cor vermelha (usar em textos/blog).
  .blog-excerpt     - Limita o texto do resumo do blog a 2 linhas.
  .animated-button  - Botão animado com efeito de sombra pulsante.
*/


/* ========================================================
   1. FONT FACE
   ======================================================== */
@font-face {
  font-family: 'semplicitaproregular';
  src: url('https://alineram.com/fonts/semplicitapro-webfont.woff2')
      format('woff2'),
    url('https://alineram.com/fonts/semplicitapro-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'semplicitaprobold';
  src: url('https://alineram.com/fonts/semplicitapro-bold-webfont.woff2')
      format('woff2'),
    url('https://alineram.com/fonts/semplicitapro-bold-webfont.woff')
      format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'semplicitaprobolditalic';
  src: url('https://alineram.com/fonts/semplicitapro-bolditalic-webfont.woff2')
      format('woff2'),
    url('https://alineram.com/fonts/semplicitapro-bolditalic-webfont.woff')
      format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'semplicitaproitalic';
  src: url('https://alineram.com/fonts/semplicitapro-italic-webfont.woff2')
      format('woff2'),
    url('https://alineram.com/fonts/semplicitapro-italic-webfont.woff')
      format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'semplicitaprolight';
  src: url('https://alineram.com/fonts/semplicitapro-light-webfont.woff2')
      format('woff2'),
    url('https://alineram.com/fonts/semplicitapro-light-webfont.woff')
      format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'semplicitaproltit';
  src: url('https://alineram.com/fonts/semplicitapro-ltit-webfont.woff2')
      format('woff2'),
    url('https://alineram.com/fonts/semplicitapro-ltit-webfont.woff')
      format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'semplicitapromedit';
  src: url('https://alineram.com/fonts/semplicitapro-medit-webfont.woff2')
      format('woff2'),
    url('https://alineram.com/fonts/semplicitapro-medit-webfont.woff')
      format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'semplicitapromedium';
  src: url('https://alineram.com/fonts/semplicitapro-medium-webfont.woff2')
      format('woff2'),
    url('https://alineram.com/fonts/semplicitapro-medium-webfont.woff')
      format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'semplicitaprosemibdit';
  src: url('https://alineram.com/fonts/semplicitapro-semibdit-webfont.woff2')
      format('woff2'),
    url('https://alineram.com/fonts/semplicitapro-semibdit-webfont.woff')
      format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'semplicitaprosemibold';
  src: url('https://alineram.com/fonts/semplicitapro-semibold-webfont.woff2')
      format('woff2'),
    url('https://alineram.com/fonts/semplicitapro-semibold-webfont.woff')
      format('woff');
  font-weight: normal;
  font-style: normal;
}

/* ========================================================
   2. UTILITIES & GLOBAL STYLES
   ======================================================== */
html,
* {
  scroll-behavior: smooth !important;
}

html {
  scroll-behavior: smooth !important;
}

body.op-navbar-fixed .page-container {
  padding-top: 0 !important;
}

h1,
h2,
h3,
h4 {
  font-family: 'semplicitaprobold', 'Open Sans Bold', 'Arial Bold', sans-serif !important;
}

p,
main span {
  font-family: 'semplicitaproregular', 'Open Sans', Arial, sans-serif !important;
}

a div.op3-text-container {
  font-family: 'semplicitapromedium', 'Open Sans', Arial, sans-serif !important;
}

/* --- Overlays & Backgrounds --- */
[data-op3-background='overlay'] {
  mix-blend-mode: multiply;
}

.no-overlay [data-op3-background='overlay'] {
  mix-blend-mode: normal;
}

/* --- Helper Classes --- */
.max-width {
  max-width: 936px !important;
  margin: 0 auto;
  border-radius: 0;
}

.display-none {
  display: none !important;
}

.ctaButton {
  width: auto !important;
}

/* --- Component Specific Utilities --- */
.contact-section * {
  mix-blend-mode: normal !important;
}

.acorddeon-sdigital > div > div > div:first-child > *:nth-child(2) {
  display: block;
}

.aboutIMG img {
  border-radius: 0 64px 64px 0 !important;
}

.sections {
  max-height: 960px;
}

/* --- Third-Party Plugin Styles --- */
/* reCAPTCHA */
.grecaptcha-badge {
  display: none !important;
}

.activewpp {
  right: 20px !important;
}

/* Cookies */
.cli-style-v2 .cli-bar-btn_container .cli-plugin-button {
  border-radius: 8px;
}

/* --- Media Queries for Utilities --- */
@media (max-width: 767px) {
  .displaynone-mobile {
    display: none !important;
  }

  /* Overlay mobile gradient fix */
  .overlay-mobile-nogradient-white [data-op3-background='overlay']::before,
  .overlay-mobile-nogradient-white [data-op3-background='overlay']::after {
    content: '';
    background-image: none !important;
    background-color: rgba(255, 255, 255, 0.8) !important;
  }

  .aboutIMG img {
    border-radius: 24px !important;
  }
}

/* --- Global Section Adjustments --- */
@media (max-width: 1700px) {
  .op3-element[data-op3-element-type='section']
    [data-op3-background='separatorBottom'] {
    margin-left: 0%;
    margin-bottom: -2px;
    width: 302%;
    transform: translateX(-33%) !important;
  }
}

/* ========================================================
   3. FLEXBOX
   ======================================================== */
.flex {
  display: flex !important;
  flex-direction: row !important;
}

/* ========================================================
   4. HEADER
   ======================================================== */
.header-section [data-op3-background='overlay'] {
  mix-blend-mode: normal;
}

/* --- Nav Menu --- */
.op-navbar {
  height: 60px;
}

.op-navbar ul > li > a {
  transition: color ease-in-out 300ms !important;
}

.op-navbar ul > li > a:hover {
  transition: color ease-in-out 200ms !important;
  color: #7a33cc !important;
}

.navbar .navbar-brand img {
  height: 30px !important;
}

/* --- Nav Mobile --- */
.nav-close-wrap.text-right {
  background-color: #fff !important;
  color: #6b6b6b !important;
}

/* ========================================================
   5. FOOTER
   ======================================================== */
.op-footer {
  padding-top: 48px;
  padding-bottom: 48px;
}

.op-footer span > img {
  max-width: 120px;
  width: 100%;
}

.op-footer > div > div.row:first-child {
  max-width: 680px;
  margin: 0 auto 24px auto;
  text-align: center;
}

.op-footer a {
  font-size: 18px;
  font-family: 'semplicitaproregular', 'Open Sans', Arial, sans-serif !important;
}

.op-footer a:hover {
  color: #7a33cc !important;
}

/* ========================================================
   6. CARD WRAPPER
   ======================================================== */
/* --- Layout geral do container --- */
.cards-wrapper-4 > div > div > div.card-4 > div > div > div[data-op3-children] {
  display: flex !important;
  flex-direction: row !important;
}

/* --- Imagem dentro do card --- */
.cards-wrapper-4
  > div
  > div
  > div.card-4
  > div
  > div
  > div[data-op3-children]
  [data-op3-element-type='image'] {
  position: relative !important;
  min-width: 130px !important;
}

/* --- Gradiente sobre a imagem --- */
.cards-wrapper-4
  > div
  > div
  > div.card-4
  > div
  > div
  > div[data-op3-children]
  [data-op3-element-type='image']::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0.3) -20%,
    white 100%
  ) !important;
  pointer-events: none !important;
  z-index: 2 !important;
  opacity: 1 !important;
}

/* --- Reforço de Posição --- */
.cards-wrapper-4
  > div
  > div
  > div.card-4
  > div
  > div
  > div[data-op3-children]
  [data-op3-element-type='image'] {
  position: relative !important;
}

/* ========================================================
   7. CAROUSEL
   ======================================================== */
/* --- Carrossel NAV Header - Estilos Gerais --- */
.section-cards-padrao .op3-element-image__wrapper {
  width: 100%;
  height: 150px; /* altura fixa do card */
  overflow: hidden;
}

.section-cards-padrao .op3-element-image__container {
  height: 100% !important;
}

.section-cards-padrao .op3-element-image__wrapper img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block;
}

.section-cards-padrao .op3-element.carousel-nav-cards {
  cursor: pointer;
}

/* --- Carrossel NAV 2 --- */
.carousel-nav2 {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 4px !important;
  overflow-x: auto !important;
  scroll-snap-type: x mandatory !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
}

.carousel-nav2 * {
  flex-wrap: nowrap !important;
}

.carousel-nav2::-webkit-scrollbar {
  display: none !important;
}

.carousel-nav-cards {
  flex: 0 0 auto !important;
  max-width: 200px !important;
  min-width: 200px !important;
  scroll-snap-align: center !important;
}

.carousel-nav-cards:first-child {
  max-width: 232px !important;
  min-width: 232px !important;
}

.carousel-nav-cards:last-child {
  max-width: 232px !important;
  min-width: 232px !important;
}

.carousel-nav2 > div > div {
  display: flex !important;
  justify-content: center !important;
}

.carousel-nav2 > div > div > div:first-child {
  padding-left: 32px !important;
}

.carousel-nav2 > div > div > div:last-child {
  padding-right: 32px !important;
}

/* --- Media Queries for Carousel --- */
@media (max-width: 1024px) {
  .carousel-nav2 > div > div {
    display: flex !important;
    justify-content: flex-start !important;
  }
}

@media (max-width: 767px) {
  /* Healing sessions | Cards */
  .carousel-nav > div {
    gap: 32px;
  }

  .carousel-nav > div > div {
    display: flex !important;
    flex-wrap: nowrap !important;
    flex-direction: row !important;
    overflow: auto scroll !important;
    padding: 32px !important;
    gap: 24px;
  }

  .carousel-nav-cards {
    min-width: 80% !important;
    position: relative !important;
  }

  .carousel-nav-cards > div:last-child {
    /* margin-right: 32px !important; */
  }
}

/* ========================================================
   8. BLOG
   ======================================================== */
/* --- Blog Home --- */
.op-homepage-hero-title {
  color: #333333 !important;
  font-size: 3rem !important;
  line-height: 3.5rem !important;
}

.op-homepage-hero-subtitle {
  font-weight: regular !important;
  font-weight: 500 !important;
  font-family: 'semplicitapro' !important;
}

.op-hero-area .op-homepage-hero-area {
  border-radius: 4rem !important;
  margin-top: 2rem !important;
  margin: 0 auto !important;
  height: 44vh !important;
  width: calc(100% - 4rem) !important;
}

.op-homepage-hero .op-homepage-hero-left .op-homepage-hero-standard {
  border-radius: 4rem !important;
  margin-top: 2rem !important;
}

img.wp-post-image,
.op-content-list-placeholder-img {
  border-radius: 16px;
}

.op-homepage-hero-left .op-homepage-hero-title {
  margin: 0 0 0.5em;
  padding: 0 0 0.5em;
}

.op-homepage-hero-container {
  display: flex;
  justify-content: flex-end;
  border-radius: 4rem !important;
}

.op-hero-area.op-homepage-hero-area,
.op-homepage-hero {
  margin-top: 2rem !important;
  background: transparent;
}

.op-homepage-hero {
  margin: 0 auto;
  width: calc(100% - 4rem);
  border-radius: 4rem !important;
}

.op-archive-title {
  padding-top: 16px;
}

.op-list-author {
  display: none;
}

/* --- Blog Post --- */
.post-thumbnail-placeholder {
  min-height: 550px;
}

/* --- Card Recommendation --- */
.card-recommendation {
  gap: 0 !important;
  background: #ffffff 0% 0% no-repeat padding-box;
  box-shadow: 0px -4px 19px #00000012;
  border-radius: 24px;
}

.card-recommendation .wp-block-image {
  margin: 0;
}

.card-recommendation .wp-block-column:has(> h2) {
  padding: 32px;
}

.card-recommendation h2 {
  margin-top: 0;
}

.card-recommendation .wp-block-button {
  height: 46px;
  justify-content: left !important;
  font-family: 'semplicitaproBold';
  background-color: #ff4e4d;
  border-radius: 24px;
}

.card-recommendation .wp-block-button a {
  background-color: #ff4e4d !important;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #ffffff;
  height: 46px;
}

/* --- Media Queries for Blog --- */
@media (max-width: 767px) {
  .op-homepage-hero-content {
    margin-top: 100%;
  }

  /* Blog header */
  .op-homepage-hero-left .op-homepage-hero-content,
  .op-homepage-hero-right .op-homepage-hero-content {
    text-align: left;
  }

  .op-homepage-hero-left .op-homepage-hero-title:after,
  .op-homepage-hero-right .op-homepage-hero-title:after {
    margin: 0;
    left: 0;
    right: auto;
  }

  /* Blog Cards Carousel */
  .blog-card {
    min-width: 100% !important;
    width: 100% !important;
    margin: 0;
  }

  .blog-card:first-child {
    margin-left: 0px;
  }

  .blog-card > div {
    margin: 0px;
  }

  @supports not (gap: 32px) {
    .blog-card > div {
      margin: 16px;
    }
  }

  .blog-carousel > div > div {
    display: flex !important;
    flex-wrap: nowrap !important;
    flex-direction: row !important;
    overflow: scroll !important;
    padding: 0 32px !important;
    gap: 0;
  }

  .blog-card > div:last-child {
    margin-right: 32px !important;
  }
}

/* --- BLOG: Utilitários adicionais --- */
.link-red * {
  color: #ff4e4d !important;
}

.blog-excerpt * {
  display: -webkit-box !important;
  overflow: hidden !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  margin-bottom: -4px;
}

/* ========================================================
   9. FORMS (ConvertKit & Comments)
   ======================================================== */
/* --- ConvertKit Form --- */
form.seva-form {
  background: transparent;
  box-shadow: unset !important;
}

form.seva-form h2 {
  color: #333333 !important;
}

form.seva-form *:not(.formkit-fields .formkit-field) {
  margin: 0 !important;
}

form.seva-form *:not(button) {
  background: transparent !important;
}

form div .formkit-column {
  display: flex !important;
  flex-wrap: wrap;
  padding: 32px !important;
  align-content: center;
}

form.seva-form div .formkit-column .formkit-image {
  order: 1;
  border-radius: 32px;
  overflow: hidden;
  max-width: 200px;
  margin-bottom: 16px !important;
}

form.seva-form div .formkit-column .formkit-header {
  order: 2;
}

form.seva-form div .formkit-column .formkit-subheader {
  order: 3;
}

form.seva-form .formkit-fields {
  width: 100%;
  margin-bottom: 16px !important;
}

form.seva-form .formkit-fields .formkit-submit {
  color: white;
  background-color: #ff4e4d !important;
  border-radius: 16px !important;
}

/* --- Blog Post Comment Form --- */
.comment-form .form-control {
  border-radius: 16px !important;
}

.form-submit .btn-primary {
  height: 40px;
  border-radius: 8px;
}

/* --- Media Queries for Forms --- */
@media (max-width: 767px) {
  /* Convert Kit Form || MOBILE */
  form.seva-form {
    box-shadow: none !important;
  }

  form.seva-form div .formkit-column {
    padding: 0 !important;
  }

  form.seva-form div .formkit-column > * {
    margin: 16px 0 !important;
  }

  form.seva-form div .formkit-column .formkit-image {
    margin-bottom: 16px;
  }

  form.seva-form div .formkit-column .formkit-header {
    margin-bottom: 4px !important;
  }

  form.seva-form div .formkit-column .formkit-subheader {
    margin: 0 !important;
  }

  form.seva-form div .formkit-column .formkit-subheader:last-child {
    display: none !important;
  }

  form.seva-form .formkit-fields .formkit-field {
    border-radius: 16px !important;
    margin-bottom: 12px !important;
  }
}

/* ========================================================
   10. TESTIMONIAL
   ======================================================== */
.testimonial-card {
  height: fit-content !important;
  position: relative !important;
}

.quote-icon {
  position: absolute;
  top: -12px;
  left: -12px;
}

/* --- Media Queries for Testimonials --- */
@media (max-width: 767px) {
  .testimonial-card {
    width: 100% !important;
    /* margin: 0 12px; */
  }

  .testimonial-card:first-child {
    margin-left: 0px;
  }

  .testimonial-card > div {
    margin: 16px;
  }

  @supports not (gap: 32px) {
    .testimonial-card > div {
      margin: 16px;
    }
  }

  .testimonial-carousel > div > div {
    display: flex !important;
    flex-wrap: nowrap !important;
    flex-direction: row !important;
    overflow: scroll !important;
    padding: 0 32px !important;
    gap: 0;
  }

  .testimonial-card > div:last-child:not(:only-child) {
    margin-right: 32px !important;
  }
  /* Testimonial extra carousel (testi-carousel) */
  .testi-carousel > div > div {
    display: flex !important;
    flex-wrap: nowrap !important;
    flex-direction: row !important;
    overflow: scroll !important;
    padding: 32px 32px !important;
    gap: 16px !important;
  }
  .testi-card {
    min-width: 80vw !important;
  }
  .testimonial-card > div:last-child {
    margin-right: 32px !important;
  }
}

/* ========================================================
   MASTERCLASS
   ======================================================== */
.masterclass > div > div > div[data-op3-background='overlay'] {
  opacity: 0.85;
  mix-blend-mode: unset;
}

.op3-element [data-op3-background='video'] iframe {
  width: 92%;
  transform: scale(1.1);
}

.container-masterclass .op3-column-content {
  width: fit-content !important;
  margin: 0 auto !important;
}

div[data-op3-background='video'] {
  opacity: 0.5;
}

/* ========================================================
   ANIMAÇÕES
   ======================================================== */
@keyframes shadowAnimation {
  0% {
    box-shadow: 0px 2px 24px -10px rgb(251, 123, 123);
  }
  100% {
    box-shadow: 0px 2px 24px 0px rgb(251, 123, 123);
  }
}

.animated-button {
  border-radius: 8px;
  background: #ff4e4d;
  animation: shadowAnimation 2s infinite alternate;
}

/* ========================================================
   11. OPTIMIZELEADS
   ======================================================== */
.optimize-leads-content .box-field-type-list ul li span {
  padding-left: 0 !important;
}