/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

button,hr,input {
	overflow: visible
}

progress,sub,sup {
	vertical-align: baseline
}

[type=checkbox],[type=radio],legend {
	box-sizing: border-box;
	padding: 0
}

html {
	line-height: 1.15;
	-webkit-text-size-adjust: 100%
}

body {
	margin: 0
}

details,main {
	display: block
}

h1 {
	font-size: 2em;
	margin: .67em 0
}

hr {
	box-sizing: content-box;
	height: 0
}

code,kbd,pre,samp {
	font-family: monospace,monospace;
	font-size: 1em
}

a {
	background-color: transparent
}

abbr[title] {
	border-bottom: none;
	text-decoration: underline;
	text-decoration: underline dotted
}

b,strong {
	font-weight: bolder
}

small {
	font-size: 80%
}

sub,sup {
	font-size: 75%;
	line-height: 0;
	position: relative
}

sub {
	bottom: -.25em
}

sup {
	top: -.5em
}

img {
	border-style: none
}

button,input,optgroup,select,textarea {
	font-family: inherit;
	font-size: 100%;
	line-height: 1.15;
	margin: 0
}

button,select {
	text-transform: none
}

[type=button],[type=reset],[type=submit],button {
	-webkit-appearance: button
}

[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner {
	border-style: none;
	padding: 0
}

[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring {
	outline: ButtonText dotted 1px
}

fieldset {
	padding: .35em .75em .625em
}

legend {
	color: inherit;
	display: table;
	max-width: 100%;
	white-space: normal
}

textarea {
	overflow: auto
}

[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button {
	height: auto
}

[type=search] {
	-webkit-appearance: textfield;
	outline-offset: -2px
}

[type=search]::-webkit-search-decoration {
	-webkit-appearance: none
}

::-webkit-file-upload-button {
	-webkit-appearance: button;
	font: inherit
}

summary {
	display: list-item
}

[hidden],template {
	display: none
}


/* --- INÍCIO DO CÓDIGO DO SLIDER --- */

/* Centraliza o título da seção */
#convenios-css-section .description h2 {
  text-align: center;
  width: 100%;
}

/* Contêiner principal do slider CSS */
.css-logos-slider {
  height: 100px;
  width: 100%;
  position: relative;
  overflow: hidden;
  margin-bottom: 20px;
}

/* Efeito de fade nas laterais (sombras) alterado para branco */
.css-logos-slider::before, .css-logos-slider::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100px;
  z-index: 2;
}

.css-logos-slider::before {
  left: 0;
  /* FADE DE BRANCO PARA TRANSPARENTE */
  background: linear-gradient(to right, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
}

.css-logos-slider::after {
  right: 0;
  /* FADE DE BRANCO PARA TRANSPARENTE */
  background: linear-gradient(to left, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
}

/* A "pista" que se move com a animação */
.logos-track {
  display: flex;
  align-items: center;
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  animation: slide-infinite linear infinite;
}

/* Pausa a animação ao passar o mouse */
.logos-track:hover {
  animation-play-state: paused;
}

/* Animação Padrão (Direita para Esquerda) */
@keyframes slide-infinite {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* --- AQUI ESTÁ A CORREÇÃO DA ANIMAÇÃO REVERSA --- */
.logos-track.reverse {
  /* Não precisa mais de left/right, a animação controla tudo */
  animation-name: slide-infinite-reverse;
}

/* Animação Reversa CORRIGIDA (Esquerda para Direita) */
@keyframes slide-infinite-reverse {
  0% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(0%);
  }
}

/* Estilo dos logos */
.logos-track img {
  height: 70%;
  width: 200px;
  margin: 0 20px;
  object-fit: contain;
  opacity: 0.9;
  transition: all 0.3s ease;
  /* FILTRO CINZA REMOVIDO */
}

.logos-track img:hover {
  opacity: 1;
  transform: scale(1.1);
}

/* --- FIM DO CÓDIGO DO SLIDER --- */
/*!
  Theme Name: Cardio Prime
  Author: ValkyriaTech
  Author URI: https://valkyriatech.com.br
  Version: 1.3.0
*/

html body header .menu.fixed svg,html body header.no-homepage .menu svg {
	fill: var(--red-hover)!important
}

@font-face {
	font-family:ProximaNovaRegular;src:url(assets/fonts/ProximaNovaRegular.otf)
}

@font-face {
	font-family:ProximaNovaBold;src:url(assets/fonts/ProximaNovaBold.otf)
}

@font-face {
	font-family:ProximaNovaLight;src:url(assets/fonts/ProximaNovaLight.otf)
}

@font-face {
	font-family:GreatVibes;src:url(assets/fonts/GreatVibesRegular.ttf)
}

:root {
	--containerSize: 80%;
	--black: #161616;
	--white: #fefefe;
	--red: #73292a;
	--red-hover: #c32520;
	--grey: #e4e4e4
}

* {
	box-sizing: border-box
}

html {
	scroll-behavior: smooth
}

html body {
	background-color: var(--white);
	margin: 0;
	padding: 0;
	font-family: ProximaNovaRegular;
	color: var(--black)
}

html body a {
	text-decoration: none
}

html body .container {
	width: var(--containerSize);
	margin: 0 auto
}

html body .row {
	display: flex
}

html body .row .column {
	width: 100%
}

html body header {
	width: 100%;
	background-color: transparent
}

html body header .menu.fixed,html body header.no-homepage .menu {
	background-color: var(--white);
	box-shadow: 0 10px 30px rgba(0,0,0,.1)
}

html body header .menu {
	margin: 0;
	padding: 2rem 0;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8rem;
	position: fixed;
	top: 0;
	z-index: 2;
	transition: ease-in-out .3s
}

html body header .menu.fixed a {
	color: var(--red-hover)!important
}

html body header .menu .menu-item {
	list-style: none
}

html body header .menu .menu-item a {
	text-decoration: none;
	font-family: ProximaNovaBold;
	color: var(--white);
	transition: ease-in-out .3s
}

html body header .menu .menu-item a:hover {
	color: var(--red-hover)
}

html body header.no-homepage .menu a {
	color: var(--red-hover)!important
}

html body header #mobileBtn {
	display: none;
	outline: 0;
	border: none;
	background-color: #fff;
	position: fixed;
	top: 1.5rem;
	right: 1.5rem;
	z-index: 2;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: .25rem;
	justify-content: center;
	align-items: center
}

html body header #mobileBtn svg {
	width: 1.75rem;
	height: 1.75rem;
	fill: var(--red-hover)
}

html body #banner {
	background-image: url(./assets/img/banner.jpg);
	background-size: cover;
	width: 100%;
	height: 85vh;
	display: grid;
	place-items: center;
	position: relative;
	z-index: 0
}

html body #banner::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--black);
	opacity: .75;
	z-index: -1
}

html body #banner .content {
	width: 35%
}

html body #banner .content img {
	width: 100%;
	height: auto
}

html body #banner .content h2 {
	font-size: 95%;
	color: var(--white);
	text-align: center
}

html body #about .row {
	position: relative;
	top: -2rem;
	padding: 2rem 4rem;
	background-color: var(--white);
	border-radius: .5rem;
	box-shadow: 0 0 5px 1px #a6a6a6
}

html body #about .row .column {
	width: 50%
}

html body #about .row .column .title {
	position: relative;
	font-family: ProximaNovaBold
}

html body #about .row .column .title span {
	content: "66";
	font-family: GreatVibes;
	font-size: 500%;
	position: absolute;
	z-index: 0;
	top: -1rem;
	left: -2.5rem;
	color: var(--grey)
}

html body #about .row .column .title h2 {
	position: relative;
	z-index: 1;
	font-size: 200%;
	font-weight: 700
}

html body #blog .blog-content .blog-item .blog-text h3,html body #convenios .convenios-content .convenio-item .convenio-text h3,html body #exams .exam-content .exam-item .exam-text h3,html body #expertise .treatment-content .treatment-item .treatment-text h3 {
	font-size: 125%;
	font-weight: 700
}

html body #about .row .column .content p {
	line-height: 150%
}

html body #about .row .column .content .email {
	margin-top: 2rem;
	display: flex;
	justify-content: flex-start;
	align-items: center
}

html body #about .row .column .content .email svg {
	width: 1rem
}

html body #about .row .column .content .email a {
	padding-left: .75rem;
	color: var(--black)
}

html body #about .row .column .photos {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	position: relative
}

html body #about .row .column .photos .photo {
	width: 47%;
	height: 12.5rem;
	box-shadow: 0 0 5px 1px #a6a6a6;
	border-radius: 1rem;
	cursor: zoom-in
}

html body #about .row .column .photos .photo img {
	border-radius: 1rem;
	width: 100%;
	height: 100%;
	object-fit: cover
}

html body #about .row .column .photos .target {
	display: none;
	position: absolute;
	cursor: zoom-out;
	top: calc(50% - 10rem);
	right: calc(50% - 12.5rem);
	width: 25rem;
	height: 20rem;
	box-shadow: 0 0 5px 1px #a6a6a6;
	border-radius: 1rem
}

html body #about .row .column .photos .target img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 1rem
}

html body #about .row .column .photos .active {
	display: block
}

html body #expertise {
	padding: 2rem 0
}

html body #expertise .title {
	padding-left: 3rem
}

html body #expertise .content {
	padding-left: 3rem;
	margin-bottom: 3rem;
	line-height: 150%
}

html body #expertise .treatment-content {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 2rem
}

html body #expertise .treatment-content .treatment-item {
	border-radius: 1rem;
	border-left: solid .5rem var(--red);
	box-shadow: 0 0 5px 1px #a6a6a6;
	overflow: hidden;
	margin: 2rem 0;
	min-height: 25rem;
	white-space: normal;
	transition: ease-in-out .3s;
	cursor: pointer
}

html body #expertise .treatment-content .treatment-item.glide__slide--active {
	transform: scale(1.025)
}

html body #expertise .treatment-content .treatment-item figure img {
	width: 100%;
	height: 15rem;
	object-fit: cover;
	transition: ease-in-out .3s
}

html body #expertise .treatment-content .treatment-item figure img:hover {
	transform: scale(1.025)
}

html body #expertise .treatment-content .treatment-item .treatment-text {
	padding: 0 1rem
}

html body #expertise .treatment-content .treatment-item .treatment-text p {
	line-height: 150%
}

html body #expertise .treatment-content .treatment-item .post-content {
	display: none
}

html body #expertise .controls {
	margin: 1rem 0;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 4rem
}

html body #expertise .controls .arrow {
	background-color: transparent;
	border: none;
	outline: 0
}

html body #expertise .controls .arrow svg {
	width: 1.5rem;
	height: 1.5rem
}

html body #expertise .controls .glide__bullets {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: .5rem
}

html body #expertise .controls .glide__bullets .glide__bullet {
	width: 1rem;
	height: 1rem;
	border-radius: 50%;
	background-color: transparent;
	border: 1px solid var(--red);
	outline: 0
}

html body #exams,html body #expertise .controls .glide__bullets .glide__bullet.glide__bullet--active {
	background-color: var(--red)
}

html body #exams {
	color: var(--white);
	padding: 2rem 0
}

html body #exams .title {
	padding-left: 3rem
}

html body #exams .content {
	padding-left: 3rem;
	margin-bottom: 3rem;
	line-height: 150%
}

html body #exams .exam-content {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 2rem
}

html body #exams .exam-content .exam-item {
	background-color: var(--white);
	color: var(--black);
	border-radius: 1rem;
	border-left: solid .5rem var(--grey);
	box-shadow: 0 0 5px 1px #a6a6a6;
	overflow: hidden;
	margin: 2rem 0;
	min-height: 25rem;
	white-space: normal;
	transition: ease-in-out .3s;
	cursor: pointer
}

html body #exams .exam-content .exam-item.glide__slide--active {
	transform: scale(1.025)
}

html body #exams .exam-content .exam-item figure img {
	width: 100%;
	height: 15rem;
	object-fit: cover;
	transition: ease-in-out .3s
}

html body #exams .exam-content .exam-item figure img:hover {
	transform: scale(1.025)
}

html body #exams .exam-content .exam-item .exam-text {
	padding: 0 1rem
}

html body #exams .exam-content .exam-item .exam-text p {
	line-height: 150%
}

html body #exams .exam-content .exam-item .post-content {
	display: none
}

html body #exams .controls {
	margin: 1rem 0;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 4rem
}

html body #exams .controls .arrow {
	background-color: transparent;
	border: none;
	outline: 0
}

html body #exams .controls .arrow svg {
	width: 1.5rem;
	height: 1.5rem;
	fill: var(--white)
}

html body #exams .controls .glide__bullets {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: .5rem
}

html body #exams .controls .glide__bullets .glide__bullet {
	width: 1rem;
	height: 1rem;
	border-radius: 50%;
	background-color: transparent;
	border: 1px solid var(--white);
	outline: 0
}

html body #exams .controls .glide__bullets .glide__bullet.glide__bullet--active {
	background-color: var(--white)
}

html body #convenios {
	background-color: var(--red);
	color: var(--white);
	padding: 2rem 0
}

html body #convenios .description {
	text-align: center
}

html body #convenios .content {
	padding-left: 3rem;
	margin-bottom: 3rem;
	line-height: 150%
}

html body #convenios .convenios-content {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 2rem
}

html body #convenios .convenios-content .convenio-item {
	border-radius: 1rem;
	overflow: hidden;
	margin: 2rem 0;
	min-height: 25rem;
	white-space: normal;
	transition: ease-in-out .3s;
	cursor: pointer
}

html body #convenios .convenios-content .convenio-item.glide__slide--active {
	transform: scale(1.025)
}

html body #convenios .convenios-content .convenio-item figure img {
	width: 100%;
	height: auto;
	transition: ease-in-out .3s
}

html body #convenios .convenios-content .convenio-item .convenio-text {
	text-align: center;
	padding: 0 1rem
}

html body #convenios .convenios-content .convenio-item .convenio-text p {
	line-height: 150%
}

html body #convenios .convenios-content .convenio-item .post-content {
	display: none
}

html body #convenios .controls {
	margin: 1rem 0;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 4rem
}

html body #convenios .controls .arrow {
	background-color: transparent;
	border: none;
	outline: 0
}

html body #convenios .controls .arrow svg {
	width: 1.5rem;
	height: 1.5rem;
	fill: var(--white)
}

html body #convenios .controls .glide__bullets {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: .5rem
}

/* Define uma altura para a seção do slider */
#convenios-swiper-section .convenios-swiper {
  height: 150px;
  padding: 0 50px; /* Deixa espaço para as setas nas laterais */
}

/* Centraliza o conteúdo de cada slide */
#convenios-swiper-section .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* Estilo para as imagens dentro dos slides */
#convenios-swiper-section .swiper-slide img {
  max-height: 80px;
  width: auto;
  max-width: 100%;
  filter: grayscale(100%);
  opacity: 0.7;
  transition: all 0.4s ease;
}

#convenios-swiper-section .swiper-slide:hover img {
  filter: grayscale(0%);
  opacity: 1;
  transform: scale(1.05);
}

/* Customizando as cores das setas e da paginação com variáveis CSS do Swiper */
:root {
  --swiper-navigation-color: #A03C3B; /* Cor das setas */
  --swiper-pagination-color: #A03C3B;  /* Cor da bolinha ativa */
}

html body #convenios .controls .glide__bullets .glide__bullet {
	width: 1rem;
	height: 1rem;
	border-radius: 50%;
	background-color: transparent;
	border: 1px solid var(--white);
	outline: 0
}

html body #convenios .controls .glide__bullets .glide__bullet.glide__bullet--active {
	background-color: var(--white)
}


html body #blog {
	padding: 2rem 0 4rem
}

html body #blog .description {
	padding-left: 3rem;
	margin-bottom: 2rem
}

html body #blog .blog-content {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 2rem
}

html body #blog .blog-content .blog-item {
	display: flex;
	flex-direction: column;
	cursor: pointer;
	overflow: hidden;
	margin: 2rem 0;
	min-height: 25rem;
	white-space: normal;
	transition: ease-in-out .3s
}

html body #blog .blog-content .blog-item.glide__slide--active,html body #blog .blog-content .blog-item:hover img {
	transform: scale(1.025)
}

html body #blog .blog-content .blog-item figure {
	width: 100%;
	height: 15rem;
	border-radius: .5rem;
	border-left: solid .5rem var(--red);
	box-shadow: 0 0 5px 1px #a6a6a6;
	overflow: hidden
}

html body #blog .blog-content .blog-item figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: ease-in .3s
}

html body #blog .blog-content .blog-item .blog-text p {
	line-height: 150%
}

html body #blog .blog-content .blog-item .post-content {
	display: none
}

html body #blog .controls {
	margin: 1rem 0;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 4rem
}

html body #blog .controls .arrow {
	background-color: transparent;
	border: none;
	outline: 0
}

html body #blog .controls .arrow svg {
	width: 1.5rem;
	height: 1.5rem
}

html body #blog .controls .glide__bullets {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: .5rem
}

html body #blog .controls .glide__bullets .glide__bullet {
	width: 1rem;
	height: 1rem;
	border-radius: 50%;
	background-color: transparent;
	border: 1px solid var(--red);
	outline: 0
}

html body #blog .controls .glide__bullets .glide__bullet.glide__bullet--active {
	background-color: var(--red)
}

html body #postView {
	width: 100%;
	height: 100vh;
	position: fixed;
	top: 0;
	left: 0;
	background-color: rgba(0,0,0,.7);
	z-index: 998;
	display: none;
	place-items: center
}

html body #postView.show {
	display: grid
}

html body #postView .container {
	width: 70%;
	height: 80vh;
	background-color: #fff;
	border-radius: 1rem;
	padding: 2rem;
	color: var(--cor-texto-principal);
	text-align: left;
	overflow-y: auto
}

html body #faq .content p,html body #faq .title h2 {
	text-align: center;
	color: var(--white)
}

html body #postView .container img {
	width: 100%;
	height: 20rem;
	object-fit: cover;
	object-position: center;
	border-radius: 1rem
}

html body #postView .container #postContent {
	border-left: solid 5px var(--red);
	padding-left: 1rem
}

html body #postView .container #postContent p {
	margin-bottom: 1rem;
	line-height: 1.3
}

html body #contact {
	background-color: var(--red);
	padding: 4rem 0
}

html body #contact .content {
	background-color: var(--white);
	margin: 0 3rem;
	padding: 3rem;
	border-radius: 1rem
}

html body #contact .content .row {
	display: flex;
	gap: 3rem
}

html body #contact .content .row .column {
	width: 100%
}

html body #contact .content .row .column .title {
	font-family: ProximaNovaBold;
	display: flex
}

html body #contact .content .row .column .title h2 {
	font-size: 200%
}

html body #contact .content .row .column .title svg {
	width: 4rem;
	height: 4rem;
	fill: var(--grey)
}

html body #contact .content .row .column .contact-info {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: .5rem;
	margin: 2rem 0
}

html body #contact .content .row .column .contact-info svg {
	width: 1.25rem;
	height: 1.25rem
}

html body #contact .content .row .column .redes {
	display: flex;
	gap: 2rem
}

html body #contact .content .row .column .redes a span {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border-radius: 50%
}

html body #contact .content .row .column .redes a span svg {
	width: 1.5rem;
	height: 1.5rem;
	fill: var(--white)
}

html body #contact .content .row .column .redes a .whatsapp {
	background-color: #25D366
}

html body #contact .content .row .column .redes a .instagram {
	background: #f09433;
	background: -moz-linear-gradient(45deg,#f09433 0,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
	background: -webkit-linear-gradient(45deg,#f09433 0,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
	background: linear-gradient(45deg,#f09433 0,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#f09433", endColorstr="#bc1888", GradientType=1 )
}

html body #contact .content .row .column .redes a .facebook {
	background-color: #4267B2
}

html body #contact .content .row .column iframe {
	border-radius: .5rem;
	box-shadow: 0 0 5px 1px #a6a6a6;
	width: 100%;
	height: 100%
}

html body #faq {
	background-color: var(--red);
	padding: 2rem 0 4rem
}

html body #faq .title h2 {
	font-size: 200%
}

html body #faq .content {
	margin-bottom: 4rem
}

html body #faq .collapse {
	width: 100%;
	display: flex;
	flex-flow: wrap
}

html body #faq .collapse .link-collapse {
	font-weight: 700;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1rem 0;
	position: relative;
	cursor: pointer;
	color: var(--white);
	background-color: transparent;
	border: none;
	outline: 0
}

html body #faq .collapse .link-collapse p {
	width: 100%;
	margin: 0;
	text-align: start
}

html body #faq .collapse .link-collapse svg {
	width: 1rem;
	height: 1rem;
	fill: var(--white);
	transition: all ease-in .3s;
	margin-left: 1rem
}

html body #faq .collapse .link-collapse.active {
	color: var(--white)
}

html body #faq .collapse .link-collapse.active svg {
	fill: var(--grey);
	transform: rotate(90deg)
}

html body #faq .collapse .contents {
	width: 100%;
	height: 0;
	display: flex;
	flex-flow: wrap;
	justify-content: space-between;
	transition: all .4s ease-in-out;
	overflow: hidden;
	opacity: 0;
	color: var(--white);
	padding-bottom: .5rem
}

html body #faq .collapse .contents p {
	margin: 0
}

html body #faq .collapse span {
	width: 100%;
	height: max-content;
	border-bottom: 1px solid var(--white)
}

html body #faq .collapse span button p.active+.contents,html body #faq .collapse span button.active+.contents {
	height: 100%;
	opacity: 1
}

html body #page {
	padding: 5rem 0
}

html body footer {
	background-color: var(--black)
}

html body footer p {
	color: var(--white);
	padding: 1rem;
	margin: 0
}

html body footer p a {
	color: var(--white);
	transition: ease-in-out .3s;
	text-decoration: none
}

html body footer p a:hover {
	color: var(--red-hover)
}

@media screen and (min-width:1921px) and (max-width:2560px) {
	:root {
		--containerSize: 50%
	}

	html body #postView .container {
		width: 55%
	}
}

@media screen and (min-width:1601px) and (max-width:1920px) {
	:root {
		--containerSize: 60%
	}

	html body #postView .container {
		width: 60%
	}
}

@media screen and (min-width:1441px) and (max-width:1600px) {
	:root {
		--containerSize: 70%
	}

	html body #postView .container {
		width: 65%
	}
}

@media screen and (min-width:1367px) and (max-width:1440px) {
	:root {
		--containerSize: 80%
	}

	html body #postView .container {
		width: 70%
	}
}

@media screen and (max-width:1280px) {
	:root {
		--containerSize: 90%
	}

	html body #postView .container {
		width: 80%
	}
}

@media screen and (max-width:1023px) {
	:root {
		--containerSize: 90%
	}

	html body header .menu {
		width: 0;
		height: 100%;
		justify-content: flex-start;
		flex-direction: column;
		gap: 2rem;
		background-color: var(--white);
		left: -70%
	}

	html body header .menu a {
		color: var(--red-hover)!important
	}

	html body header .active {
		left: 0;
		width: 70%
	}

	html body header #mobileBtn {
		display: flex
	}

	html body header #mobileBtn .close {
		display: none
	}

	html body header .open-menu .close {
		display: block!important
	}

	html body header .open-menu .bars {
		display: none
	}

	html body #about .row {
		flex-direction: column;
		gap: 3rem
	}

	html body #about .row .column {
		width: 100%
	}

	html body #contact .content {
		margin: 0
	}

	html body #contact .content .row {
		flex-direction: column
	}

	html body #contact .content .row .map {
		height: 50vh
	}

	html body #postView .container {
		width: 90%
	}
}

@media screen and (max-width:600px) {
	html body #banner .content {
		width: 70%
	}

	html body #about .row .column .photos .photo {
		width: 100%;
		height: 18rem;
		cursor: default
	}
}

@media screen and (max-width:430px) {
	html body #about .row,html body #contact .content {
		padding: 2rem
	}

	html body #about .row .column .title span {
		top: -2rem;
		left: -.5rem
	}

	html body #contact .content .row .map {
		height: 30vh
	}
}

@media screen and (max-width:360px) {
	html body #postView .container {
		width: 95%
	}

	html body #about .row .column .photos .photo {
		height: 30vh
	}

	html body #expertise .content,html body #expertise .title {
		padding-left: 0
	}
}

/* --- INÍCIO DO CÓDIGO DO SLIDER --- */

/* Centraliza o título da seção */
#convenios-css-section .description h2 {
  text-align: center;
  width: 100%;
}

/* Contêiner principal do slider CSS */
#convenios-css-section .css-logos-slider {
  height: 100px;
  width: 100%;
  position: relative;
  overflow: hidden;
  margin-bottom: 20px;
}

/* Efeito de fade nas laterais (sombras) alterado para branco */
#convenios-css-section .css-logos-slider::before, .css-logos-slider::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100px;
  z-index: 2;
}

#convenios-css-section .css-logos-slider::before {
  left: 0;
  /* FADE DE BRANCO PARA TRANSPARENTE */
  background: linear-gradient(to right, #ffffff 0%, rgba(255, 255, 255, 0) 100%)!important;
}

#convenios-css-section .css-logos-slider::after {
  right: 0;
  /* FADE DE BRANCO PARA TRANSPARENTE */
  background: linear-gradient(to left, #ffffff 0%, rgba(255, 255, 255, 0) 100%)!important;
}

/* A "pista" que se move com a animação */
#convenios-css-section .logos-track {
  display: flex;
  align-items: center;
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  animation: slide-infinite linear infinite;
}

/* Pausa a animação ao passar o mouse */
#convenios-css-section .logos-track:hover {
  animation-play-state: paused;
}

/* Animação Padrão (Direita para Esquerda) */
@keyframes slide-infinite {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* --- AQUI ESTÁ A CORREÇÃO DA ANIMAÇÃO REVERSA --- */
#convenios-css-section .logos-track.reverse {
  /* Não precisa mais de left/right, a animação controla tudo */
  animation-name: slide-infinite-reverse;
}

/* Animação Reversa CORRIGIDA (Esquerda para Direita) */
@keyframes slide-infinite-reverse {
  0% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(0%);
  }
}

/* Estilo dos logos */
#convenios-css-section .logos-track img {
  height: 70%;
  width: 200px;
  margin: 0 20px;
  object-fit: contain;
  opacity: 0.9;
  transition: all 0.3s ease;
  /* FILTRO CINZA REMOVIDO */
}

#convenios-css-section .logos-track img:hover {
  opacity: 1;
  transform: scale(1.1);
}

/* --- FIM DO CÓDIGO DO SLIDER --- */