/*
Theme Name: Desenrola
Theme URI: https://carretelfilmes.com/
Version: 1.0
*/


/*-------------------------------------------------------------
	RESET
---------------------------------------------------------------*/



.dropdown-menu[data-bs-popper] {    right: 0 !important; left:inherit !important}
.dropdown-menu .dropdown-item {    padding: 10px var(--bs-dropdown-item-padding-x) !important; font-family:inter}


p{margin-bottom:0px}
* {
  scrollbar-width: none !important;
}
html {
  width: 100%;
  height: auto;
  overflow-x: hidden;
}

body {
  width: 100%;
  min-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}


body {
    line-height: 1;
	background-color:#f5f5f7;
}


.mobile-video-topo {display:none}


ol, ul {
    list-style: none;
	    padding-left: 0rem;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

* {padding:0px; border:0px; margin:0px}

.clear {clear:both}


::-moz-selection { /* Code for Firefox */
    color: #FFF;
    background: var(--cor-vermelha);
}

::selection {
    color: #FFF; 
    background: var(--cor-vermelha);
}


textarea:focus, input:focus{
    outline: none;
}

:root {
  --cor-vermelha: #f5433d;
  --cor-blackout: #1C1C1C;
	--cor-papel: #F7EFDE;
	--neue-display:Inter;
	--neue-text: Work Sans;
	--x2-space:25px;
	--x-space:50px;
	--level-1:70px;
}


.port-item-single .video-embed iframe {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9; 
}






body {font-family: Inter, Work Sans, sans-serif;
     color:#757575;cursor: none;}



.section-fullscreen {
  height:auto; min-height: calc(var(--vh, 1vh) * 120); width: 100vw;
	background:#000;
	overflow: hidden;
	position: relative;
}


.short-version {
  height:auto; min-height: calc(var(--vh, 1vh) * 80);
	background:#000;
	overflow: hidden;
	position: relative;
}




.bg-video {

	position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
	
	
	
}

.red-bg {background-color:var(--cor-vermelha)}

#demoreel .video-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45); /* ajuste ou remova */
  z-index: 1;
}

#demoreel .bi-mouse {font-size: 50px;
    opacity: 0.5;}

.content {
  position: absolute;
  z-index: 3;
  min-height:100%;
	height:auto;
	text-align:center;
	width:100%;
	color:#FFF;
	--bs-gutter-x:0px
}

body.page-template .content, body.post-type-archive .content {    height: 100% !important;}



#demoreel .hero-text p {font-family: 'Inter';
    font-weight: 700;
    letter-spacing: -1px;}

.scroll-indicator {
  font-size: 24px;
  opacity: 0.7;
  cursor: pointer;
	margin-top:40px
}




.section-border-rounded {
width: 100%;
height: 65px;
	border-radius:60px 60px 0 0;
z-index: 1;
margin-bottom:1px;
margin-top:-65px;
position:absolute}

.section-border-gap {
	width:100%;
	height:100px;
	display:block
}

.spacing-border {margin-top:var(--x-space)}


section#leads, section#leads .section-border-rounded {background-color:#f5f5f7}

section#leads .input-with-icon input {background:transparent}

section#leads .desc-copy {line-height:1}
section#leads .desc-copy h3 {
    letter-spacing: -0.4px;
    font-family: var(--neue-display);
    font-weight: 600;}

section#leads .desc-copy h3 b {color:var(--cor-blackout)}

section#leads .desc-copy span {font-size: 18px;
    letter-spacing: -0.2px;
    font-family: var(--neue-display);
    font-weight: 400;}

section#leads .container {padding:50px 0}


section#leads .input-with-icon {

	border: 1px solid #d2d2d2;
    border-radius: 10px;
    padding: 5px 22px;
	margin-bottom:20px
}

section#leads .input-with-icon i {
  
  font-size: 1rem;
	margin-right:5px;
  pointer-events: none; /* ícone não atrapalha clique */
}

section#leads .input-with-icon input {
	padding:20px
}

section#leads .wpcf7-submit {background: var(--cor-vermelha);
    color: #FFF;
    font-weight: 700;
    width: 100%;
    padding: 25px;
    border-radius: 10px;}





section#servicos {margin-top:-15px}

section#servicos , section#servicos .section-border-rounded {background-color:var(--cor-vermelha);}
section#servicos h2 {text-align:center; color:#FFF; letter-spacing:-0.6px; font-family:var(--neue-display); font-weight:600; line-height:1.2 !important; margin:var(--x2-space) 0}

section#servicos .servico-bg:last-child {
  border:none
}







section#marcas, section#marcas .section-border-rounded {background-color:#FFF}
section#marcas h3 {text-align:center; color:#8C8C8C; letter-spacing:-0.4px; font-family:var(--neue-display); font-weight:600; line-height:1}
section#marcas h3 em {color:var(--cor-blackout)}

section#marcas h5 {text-align:center; color:#8C8C8C; letter-spacing:-0.2px; font-family:var(--neue-display); font-weight:300; margin-top:20px }

section#marcas .container {padding-bottom:var(--x-space); padding-top:var(--x2-space)}

section#portfolio, section#portfolio .section-border-rounded {background-color:var(--cor-blackout)}


#portfolio .section-header h3 {
	padding:0px 10%;
    text-align: center;
    color: #FFF;
    letter-spacing: -0.6px;
	line-height:1.1;
    font-family: var(--neue-display);
    font-weight: 600;}





section#sobre, section#sobre .section-border-rounded {background-color:#f5f5f7}



#footer, #footer .section-border-rounded {background-color:var(--cor-blackout)}

#footer .col-5 h4 {font-size: 35px;
    letter-spacing: -0.4px;
    font-family: var(--neue-display);
    font-weight: 600;
	line-height:40px;
    margin-bottom: 20px; color:#FFF}

#footer .col-5 p {
    letter-spacing: -0.4px;
	line-height:22px;
	max-width:80%;
    font-family: var(--neue-display);
    color:#FFF}

#footer .col-5 a {    display: inline-block;
    padding: 16px 27PX;
    border: 1px solid #FFF;
    color: #FFF;
    border-radius: 10px;
    color: #FFF;
    text-decoration: none;
    font-weight: 600;
    font-family: var(--neue-display);
    LETTER-SPACING: 0px;
    margin-top: 20px;}

#footer .col-3 .item {margin-bottom:15px;}

#footer .col-3 .item h3 {font-size: 22px;
    letter-spacing: -0.4px;
    font-family: var(--neue-display);
    font-weight: 600;
	line-height:28px;
    margin-bottom: 20px; color:#FFF}

#footer .col-3 .item a {color:#FFF;}

#footer h6 {text-transform:uppercase; opacity:0.5}




/* Menu flutuante */
#floatingMenu {
    padding-top: 1.5em !important;
  background: transparent;
  transition: all 0.3s ease;
  z-index: 100;
}

#floatingMenu .container {	border-radius:10px;
	padding:20px;}

/* ANTES DO SCROLL — menu flutuante */
#floatingMenu .logo-path {
  fill: #ffffff; /* deixa tudo branco */
  transition: fill .3s ease;
}

/* DEPOIS DO SCROLL — menu fixo com fundo branco */
#floatingMenu.scrolled .logo-path {
  fill: currentColor; /* usa a cor original do SVG */
}

/* Estado após rolagem */
#floatingMenu.scrolled .container {
  background: rgba(255, 255, 255, 0.95);
	transition:all 0.4s linear;
	
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

/* Botão menu */
.btn-menu {
  background: transparent;
  border: none;
	color:#FFF;
	    font-size: 30px;
    opacity: 0.6;
}

.navbar-brand .icon-logo,  .navbar-brand .medium-logo{    text-align: center;
    width: 100%;
    display: inline-block;
    overflow: hidden;
display:none}



#floatingMenu.scrolled .logo-svg {fill:#000}
#floatingMenu.scrolled .lang-btn {color:#000000; opacity:1 !important}
#floatingMenu.scrolled .btn-menu {color:#000}

#floatingMenu.scrolled .cls-2 {fill:var(--cor-vermelha)}
#floatingMenu.scrolled .cls-1 {fill:var(--cor-blackout)}

/* Idiomas */
.lang-btn {
	opacity:0.5;
	text-decoration:none; font-size:14px; color:#FFF;
	padding:3px;
	margin:8px
  
}
.lang-btn:hover {
	opacity:1
}


.navbar-brand .logo-svg 
{fill:#FFF}





/* MASONRY */
.masonry {
  column-count: 2;
  column-gap: 24px;
	grid-template-columns: repeat(3, 1fr);
}

.thirdgrid {
  column-count: 3 !important;
  column-gap: 24px;
}

.masonry-item {
  position: relative;
  display: block;
  margin-bottom: 24px;
  break-inside: avoid;
  overflow: hidden;
  border-radius: 15px;
	height:300px;
	background:#FFF
}

/* IMAGEM */
.masonry-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 12px;
	transform: scale(1.1);
  transition: transform .4s ease;
	z-index:2;
	border-radius: 15px;
}

/* OVERLAY */
.masonry-item .overlay {
  position: absolute;
  background: rgba(0,0,0,0.5);
display:block;
	left:0px; top:0px; right:0px; bottom:0px;
	width:100%;
  opacity: 0;
  transition: opacity .35s ease;
	font-family: var(--neue-display);
	z-index:3;
}

.masonry-item:hover .overlay, .masonry-item:hover .copy-desc {
  opacity: 1;
	
}

.masonry .masonry-item:nth-child(1) {height:624px}


.masonry-item:hover img {
  transform: scale(1.05);
	filter: blur(4px) brightness(0.4);
	
}

.masonry-item .copy-desc {z-index:5; position:absolute; bottom:30px; opacity:0; bottom:0; color:#FFF; padding:40px;transition: opacity .35s ease;}


/* ESTILOS DO TEXTO */
.masonry-item .ano{
  font-size: 10px;
  opacity: 0.8;
  letter-spacing: 1px;
	margin-top:10px
}

.masonry-item .cat {border:1px solid #FFF; padding:8px 15px; border-radius:100px; letter-spacing: 1px; margin-bottom:5px; display:inline-block; font-size:10px; width:auto }

.masonry-item h3 {
  margin: 6px 0 0;
  font-size: 32px;
  line-height: 35px;
	font-family:var(--neue-display);
	font-weight:600;
}

/* RESPONSIVO */
@media (max-width: 768px) {
  .masonry {
    column-count: 1;
  }
}





.servico-bg { border-bottom:1px solid #000; transition: all 0.3s cubic-bezier(0, 0.06, 0, 1.66); position: relative;
  z-index: 1;overflow:hidden; display:block}

.servico-bg .thumb {position: absolute;
  inset: 0;inset: 0;
	filter: grayscale(100%) brightness(0.4);
  background-size: cover;
  background-position: center;
  opacity: 0;  
  transition: opacity .4s ease;
  z-index: -1;  }


.servico-bg .thumb img {    object-fit: cover !important;
    width: 100%;}

.servico-bg:hover .thumb {opacity: 1;}

.item-ativo {transition:all 0.3s}

.item-ativo .thumb  {content: "";
	transition:all 0.3s;
	filter: blur(5px) grayscale(100%) brightness(0.4);
  position: absolute;
  inset: 0;
	transform: scale(1.2);
  background-size: cover;
  background-position: center;
opacity: 1;}




.accordion-header {padding:70px 0}


.services-accordion .desc-serv {font-size: 50px;
    text-align: left;
    color: #FFF;
    letter-spacing: -0.6px;
    font-family: var(--neue-display);
    font-weight: 600;}

.services-accordion .short-desc {
    text-align: left;
    color: #FFF;
    font-family: var(--neue-display);
    font-weight: 400;}

.services-accordion .accordion-body {    font-size: 40px;
    line-height: 50px;
    margin-bottom: 40px;
    text-align: left;
    color: #FFF;
    letter-spacing: -0.6px;
    font-family: var(--neue-display);
    font-weight: 300;}

.services-accordion .accordion-body span {display:block; margin:20px 0px; font-weight:600}


.servico-bg .icon-down {text-align:right; float:right;transition:all 0.2s;}
.servico-bg .icon-down i {transition: 0.3s ease; color:var(--cor-blackout); font-size:40px; display:inline-block}

.servico-bg:hover .icon-down i, .item-ativo .icon-down i {color:#FFF; transform: rotate(90deg) !important;}

.services-accordion .short-desc {transition: 0.3s;}
.services-accordion .short-desc p {max-width:70%; line-height:22px}


.services-accordion .accordion-body {padding:50px 0}







#footer .copyright {    text-align: center;
    color: #FFF;
    margin-top: 70px;
    font-family: var(--neue-display);
    border-top: 1px solid #000;
    padding: 40px 0 20px 0;
    font-size: 13px;}

#footer .copyright b {font-weight:600}
#footer .copyright a {color:#FFF; font-weight:600}

#footer .col-2 {color:#FFF; line-height:30px; font-size:14px}
#footer .col-2 a {color:#FFF;display:block; font-weight:600; font-size:20px}

#footer h6 {color:#FFF; line-height:30px; font-size:14px; margin-bottom:15px}



#footer .wpcf7 .input-with-icon {

	border: 1px solid #d2d2d2;
    border-radius: 10px;
    padding: 5px 22px;
	margin-bottom:20px;
	    max-width: 80%;
	margin-top:30px
}

#footer .wpcf7 .input-with-icon i {
  
  font-size: 1rem;
	margin-right:5px;
  pointer-events: none; /* ícone não atrapalha clique */
}

#footer .wpcf7 input {
	padding:10px;
	    width: calc(100% - 30px);
    color: #FFF;
    background: transparent;
}

#footer .wpcf7 .input-with-icon:hover i {color:green}

#footer .wpcf7 .input-with-icon:hover {background:#FFF;}

#footer .wpcf7 input:focus {background:#FFF; color:#1e1e1e;}





.contactform input {
	padding:15px;
	width:100%;
	border:1px solid #eee;
	border-radius:8px;
	background:#FFF;
	color:#1e1e1e;
	 margin-top:15px
}
.contactform p {margin-bottom:30px}
.contactform label {margin-bottom:10px; width:100%}
.contactform textarea {
	padding:15px;
	width:100%;
	border:1px solid #eee;
	border-radius:8px;
	background:#FFF;
	color:#1e1e1e;
	 margin-top:15px
}

.contactform .wpcf7-submit {background: var(--cor-vermelha);
    color: #FFF;
    font-weight: 700;
    width: 100%;
    padding: 25px;
    border-radius: 10px;}



body.single-portfolio #footer {margin-top:100px}






.port-item-single {padding:140px 0 60px; font-family:Inter; font-weight:500; color:var(--cor-blackout); }
.port-item-single .short-description {font-size:22px;line-height:32px;  padding:60px 0}
.port-item-single .short-description h3 {line-height:1.1;
    margin: 15px 0;
	color: var(--cor-vermelha);}
.port-item-single .details {font-size:16px;}
.port-item-single .details h5 {padding-bottom:20px; color:#999999 }
.port-item-single .details a {color:var(--cor-blackout)}
.port-item-single .item-tags {padding:60px 0}
.port-item-single .item-tags .tag {    display: inline-block;
    width: auto;
    background: #EEE;
    border-radius: 100px;
    padding: 25px 45px;
    margin-right: 15px;}




.carrossel-marcas {
    overflow: hidden;
    width: 100%;
	margin-bottom:var(--x-space)
}

.marquee {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding:40px 0;
	text-align:center
}




.track {
        display: inline-flex;
    width: max-content;
    animation: scroll-left 70s linear infinite;
}


.reverse {
	 display: inline-flex;
    width: max-content;
    animation: scroll-right 70s linear infinite;
}


.track:hover, .reverse:hover {animation-play-state: paused;}




@keyframes scroll-left {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-30%); }
}


@keyframes scroll-right {
    0%   { transform: translateX(-30%); }
    100% { transform: translateX(0); }
}



/* ITENS */
.marca-item {
    display: flex;
    align-items: center;
    padding: 0 30px;
}

.marca-item img {
    height: 60px;
    filter: grayscale(100%);
    opacity: 0.6;
    transition: 0.3s ease;
}

.marca-item img:hover {
    filter: grayscale(0%);
    opacity: 1;
}
















.overlay {
  height: 0%;
  width: 100%;
  position: fixed;
  z-index: 2000;
  top: 0;
  left: 0;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0, 0.9);
  overflow-y: hidden;
  transition: 0.5s;
}

.overlay-content {
  position: relative;
  top: 25%;
  width: 100%;
  text-align: center;
  margin-top: 30px;
}

.overlay-content ul li a {color:#FFF}

.overlay {display:block}
.overlay li {  padding: 20px;}
.overlay .overlay-content a{
text-decoration:none;
  display: inline-block;
  transition: 0.3s;
	color:#FFF;
	
    letter-spacing: -1px;
	cursor: pointer;
    position: relative;
    white-space: nowrap;
	font-weight:600;
}
.overlay .overlay-content a::before,
.overlay .overlay-content a::after {
    position: absolute;
    width: 100%;
    height: 4px;
    background:var(--cor-vermelha);
    top: 100%;
    left: 0;
    pointer-events: none;
}
.overlay .overlay-content a::before {
    content: '';
    /* show by default */
}


.overlay .overlay-content a::before {
    transform-origin: 100% 50%;
    transform: scale3d(0, 1, 1);
    transition: transform 0.3s;
}
.overlay .overlay-content a:hover::before {
    transform-origin: 0% 50%;
    transform: scale3d(1, 1, 1);
}
.overlay .overlay-content a:hover {color:#FFF}


.overlay .overlay-content li {list-style: none;
}

.overlay .overlay-content a:hover, .overlay .overlay-content a:focus {
  color: #f1f1f1;
}

.overlay .closebtn {
  position: absolute;
  top: 40px;
  right: 55px;
	transition: transform 0.3s;
}

.overlay .closebtn i {
	font-size: 80px;
  font-weight:100;
	color:#FFF;
	opacity:0.5
}
.overlay .closebtn:hover {transform: rotate(3.142rad);}
.overlay .closebtn:hover span {opacity:0.9; transform: rotate(3.142rad);}




.entrance-text {line-height:1}
.entrance-text span {
  opacity: 0;
  transform: translateY(20px);
  display: inline-block;
}






.circle {
  width: 40px;
  height: 40px;
  border: 2px solid #fff;
  border-radius: 50%;
	background-color:rgba(0,0,0,0.3);
	backdrop-filter: blur(5px);
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: width .25s ease, height .25s ease, background .25s ease;
	z-index:9999
}

.circle.show-text {
  width: 90px;
  height: 90px;
  background: rgba(0,0,0,.8);
  color: #fff;
}

.cursor-text {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity .2s ease;
}

.circle.show-text .cursor-text {
  opacity: 1;
}


.hovering-link {
  --circle-size: 80px;
	transition: all 0.1s ease; /* Transição suave da opacidade */
	background:transparent;
	border:3px solid #000;
}

.inactive {
  opacity: 0.3; /* Aplica apenas a opacidade quando inativo */
  transition: opacity 0.5s ease; /* Transição suave da opacidade */
}




.gradient-word {
  display: inline;    
  font: inherit;
  line-height: inherit;
  vertical-align: baseline;


  white-space: normal;

  background: linear-gradient(
    90deg,
	  #f5433d,
    #f57f65,
	  #af1932,
	  #f57d27,
	  #f5433d,
	  #9f0328,
	  #f5433d
	  
  );

  background-size: 300% 100%;
  background-position: 0% 50%;
  background-repeat: repeat;

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}





.form-carretel {
  max-width: 700px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 15px;
  font-family: "Inter", sans-serif;
}








.port-archive {padding:60px 0; font-family:Inter; font-weight:500; color:var(--cor-blackout); }






:is(
	body.single-portfolio,
	body.page-template-default
) {
  
	#floatingMenu .lang-btn {color:#000000; opacity:0.6 !important}
	#floatingMenu .backlink {text-decoration:none; color:#000; font-size:16px}
	#floatingMenu .cls-2 {fill:var(--cor-vermelha)}
	#floatingMenu .cls-1 {fill:var(--cor-blackout)}
	.btn-menu {
    color: #000;
    opacity: 0.6;
}
	
}



.port-archive {margin:120px 0}


.portfolio-filter-mobile {
    display: none;
}

.portfolio-filter {
  text-align: center;
  margin-bottom: 30px;
}

.filter-btn {
  background: none;
  border: 1px solid #ccc;
  padding: 8px 20px;
  margin: 0 5px 10px;
  cursor: pointer;
  border-radius: 6px;
  transition: .2s ease;
}

.filter-btn.active,
.filter-btn:hover {
  background: #000;
  color: #fff;
}

.portfolio-grid {
  column-count: 3;
  column-gap: 25px;
}

.portfolio-item {
  break-inside: avoid;
  margin-bottom: 25px;
  display: block;
}

.portfolio-item .thumb img {
  width: 100%;
  border-radius: 10px;
}

.title {
  margin: 10px 0 0;
  font-size: 18px;
  font-weight: 600;
}


.portfolio-archive {    padding-top: var(--x-space) !important;}












.story-area {
  padding: 80px 0;
  margin: 0 auto;
}



.story-area .hero-text {
	gap:20px;
	padding:0px !important
}



.hero-text {
  display: flex;
  flex-direction: column;
	padding: 0px 20%;

}

.hero-line {
  display: flex;
  align-items: center;
  width: 100%;
	gap:22px
}

.word {
  font-size: 72px;
  font-weight: 700;
  color: #888;
  white-space: nowrap;
}

.highlight {
  color: #e63939;
}

/* AQUI A MÁGICA: imagem expandindo */
.img-flex {
  flex: 1;                      /* ocupa o espaço restante */
  height: 130px;
  border-radius: 20px;
  background-size: cover;
  background-position: center;
	margin:5px;
  min-width: 120px;             /* evita que desapareça */
	overflow:hidden
}

/* Suas imagens */
.mi-1 { background-image: url('img1.jpg'); background:#eee }
.mi-2 { background-image: url('img2.jpg'); background:#eee }
.mi-3 { background-image: url('img3.jpg'); background:#eee }
.mi-4 { background-image: url('img3.jpg'); background:#eee }



#sobre .line1, #sobre .line2 {padding:60px 0}

#sobre .partedois h6 {padding-bottom: 20px;
    color: #999999;}

#sobre .partedois h2 { line-height:1.1;
    letter-spacing: -0.4px;
    font-family: var(--neue-display);
    font-weight: 600;
margin-bottom:20px}

#sobre .partedois p {
	font-size:18px;
	line-height:28px;
    color: #999999;}

#sobre .line2 a.botao {    display: inline-block;
    padding: 16px 27PX;
    border: 1px solid var(--cor-vermelha);
    color: var(--cor-vermelha);
    border-radius: 10px;
    text-decoration: none;
    font-weight: 600;
    font-family: var(--neue-display);
    LETTER-SPACING: 0px;
    margin-top: 20px;}

#sobre .line2 a.botao:hover {
	color:#FFF;
	background:var(--cor-vermelha)
}


#sobre .line2 {text-align: center;
    background-color: #eee;
    border-radius: 20px;
    padding: 110px 60px;
	color:#FFF;
	background-image:url('statics/short5.png');
}

#sobre .line2 h6 {color:#FFF}
#sobre .line2 h6 i {color:var(--cor-vermelha)}

#sobre .story-area .hero-line video {width: 100%;
    top: 50%;
    transform: translateY(-50%);
    position: relative}




section.full-page {padding:200px 0; font-family:Inter; font-weight:500; color:var(--cor-blackout); }




}

.video-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.4);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
  text-align: center;
}

.video-overlay button {
  margin-top: 16px;
  padding: 12px 24px;
  border: none;
  background: #fff;
  color: #000;
  font-weight: 600;
  cursor: pointer;
}

/* MODAL */
.video-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.8);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 999;
}

.video-modal.active {
  display: flex;
}

.video-modal-content {
  position: relative;
  max-width: 90%;
  max-height: 80%;
}

.video-modal video {
  width: 100%;
  height: auto;
	max-height: 70vh;
}

.close-modal {
  position: absolute;
  top: -40px;
  right: 0;
  background: none;
  border: none;
  color: #fff;
  font-size: 24px;
  cursor: pointer;
}



.video-modal-content .mobile-demoreel {display:none; visibility:hidden}





.video-hero {
  position: relative;
  width: 100%;
  height:60vh; 
	max-height: 60vh;
  overflow: hidden;
  cursor: pointer;
margin:var(--x-space) 0;
}



.video-hero:hover .video-overlay {background: rgba(0,0,0,0.9);}

.video-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.5);
	transition:all 0.3s linear;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
  text-align: center;
	height:100%;
  pointer-events: none; /* garante clique na seção inteira */
}


.video-overlay h3 {font-family: 'Inter';
	font-weight: 600;
margin-bottom:20px}

.video-overlay h6 {
	color:#FFF;
    padding: 15px 32px;
    border-radius: 100px;
	border:1px solid #FFF;
	font-weight:400;
display:inline-block}

.video-hero:hover h6 {background:var(--cor-vermelha);
	border:1px solid var(--cor-vermelha)
   }











.full-page .title-page h1 {
	line-height:1.2;
    letter-spacing: -0.4px;
    font-family: var(--neue-display);
	color:var(--cor-vermelha);
    font-weight: 700;}

.full-page .title-page .scroll-indicator {text-align:right}

.full-page .demoReeltake {width:100%; max-height:550px; overflow:hidden; border-radius:20px; margin:60px 0;     padding: 0px !important;}




.full-page .big-section {text-align:center; padding:35px 15%; }

.full-page .big-section h5 {line-height:1;
    letter-spacing: -0.4px;
    font-family: var(--neue-display);
    font-weight: 600; margin:40px 0;
color:var(--cor-vermelha);}

.full-page .big-section p {    font-weight: 300;
    font-size: 24px;
    line-height: 35px;
    color: #7d7d7d;}

.full-page .big-section span.tag {border: 1px solid #000;
    display: inline-block !important;
    padding: 18px 32px;
    width: auto;
    margin: auto;
    border-radius: 100px;
    opacity: 0.5;}

.full-page .about-section .col-6 p {font-size: 40px;
	line-height:50px;
    letter-spacing: -0.4px;
    font-family: var(--neue-display);
    font-weight: 600; }

.full-page .about-section .col-5 p {    font-weight: 300;
    font-size: 19px;
    line-height: 35px;
    color: #7d7d7d; display:block; margin-bottom:20px}

.full-page .about-section .col-6 h5 {line-height:1.2;
    letter-spacing: -0.4px;
    font-family: var(--neue-display);
    font-weight: 600; 
color:var(--cor-vermelha);}


.full-page .about-section .col-6 h6 {line-height:1.2;
    letter-spacing: -0.4px;
    font-family: var(--neue-display);
    font-weight: 600; margin:40px 0;
color:#575757}


.full-page .reelbg {position:relative;width:100%; height:600px; overflow:hidden; border-radius:20px; margin:60px 0;     padding: 0px !important;break-inside: avoid;}
.full-page .reelbg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
	z-index:2;
}
.full-page .reelbg .overreel {position: absolute;
	text-align:center;
  background: rgba(0,0,0,0.5);
display:block;
	left:0px; top:0px; right:0px; bottom:0px;
	padding:0 15%;
	width:100%;
  transition: opacity .35s ease;
	font-family: var(--neue-display);
	z-index:3;}

.full-page .reelbg .overreel h5 {line-height:1.1;
    letter-spacing: -0.4px;
    font-family: var(--neue-display);
    font-weight: 300; margin:40px 0;
color:#FFF;}

.full-page .reelbg .overreel h5 b {font-weight: 600;}

.full-page .pde-sobre {padding:0; --bs-gutter-x:0rem;}

.full-page .pde-sobre .col {margin-right: 30px; border-radius:20px; border:1px solid #eee; padding:60px 50px; text-align:center; box-shadow: 2px 4px 12px #00000014; background:#FFF; transition:all 0.3s linear}


.full-page .pde-sobre .col:last-child {
  margin-right: 0;
	
}

.full-page .pde-sobre .col i {font-size:60px; color:var(--cor-vermelha); margin-bottom:20px}
.full-page .pde-sobre .col h2 {font-size:13px; color:#575757; margin:20px 0 30px 0; text-transform:uppercase; letter-spacing:1px}
.full-page .pde-sobre .col p{    font-size: 34px;
    line-height: 38px;
    letter-spacing: -0.4px;
    font-family: var(--neue-display);
    font-weight: 600;}

.full-page .pde-sobre .col:hover {transform: scale(1.1);}


.full-services h2 {font-size: 40px !important;
    line-height: 60px !important;}




section#contact-services {background-color:var(--cor-blackout); text-align:center; border-radius: 60px 60px 0 0; overflow:hidden}
section#contact-services {background-image:url('https://carretelfilmes.com.br/wp-content/themes/desenrola/statics/short6.png');}

section#contact-services .container {margin: 140px auto 100px auto; padding:0px 10%}

section#contact-services h3 {
    
    line-height:1.1;
    color: #FFF;
    letter-spacing: -0.6px;
    font-family: var(--neue-display);
	font-weight: 600;
margin-bottom:40px}

section#contact-services p {
    font-size: 25px;
    color: #FFF;
	line-height:1.3;
    letter-spacing: -0.2px;
    font-family: var(--neue-display);
	font-weight: 300}

section#contact-services a {    background: var(--cor-vermelha);
    padding: 22px 38px;
	color:#FFF;
    border-radius: 6px;
    font-weight: 600;
    margin-top: 40px;
	font-size:20px;
    display: inline-block;}







.full-page .contact-section .col-6 h5 {
    letter-spacing: -0.4px;
	line-height:1.1;
    font-family: var(--neue-display);
    font-weight: 600; 
color:var(--cor-vermelha);}

.full-page .contact-section .col-6 p {
    letter-spacing: -0.2px;
	line-height:1.4;
    font-family: var(--neue-display);
    font-weight: 350; margin:20px 0;
color:#575757}

.full-page .contact-section .col-6 p b {font-weight:700}

.full-page .contact-details p {font-weight: 300;
    font-size: 19px;
    line-height: 30px;
    display: block;
    margin-bottom: 20px;}

.full-page .contact-details i {
    font-size: 35px;
    display: block;
    margin-bottom: 20px;
color:var(--cor-vermelha)}


.full-page .contact-details h4 {margin-bottom:20px}


.full-page .contact-details a {color: var(--cor-blackout);
    font-weight: 600;
    font-size: 24px;}



.errorpage .backlink {background: var(--cor-vermelha);
    padding: 22px 42px;
    border-radius: 6px;
    font-weight: 600;
	display:inline-block;
    margin-top: 30px;color:#FFF;    width: fit-content;}



.rel-posts .masonry-item {height:400px !important}







.portfolio-filter-list li {    display: inline-block;}

.portfolio-filter-list li a {text-decoration: none;
    font-size: 18px;
    background: transparent;
    border-radius: 100px;
    border: solid 2px #ccc;
    padding: 16px 27px;
    display: inline-block;
    color: #1e1e1e;
    margin: 5px;
transition:all 0.3s linear}

.portfolio-filter-list li a:hover {background:var(--cor-vermelha); border: solid 2px var(--cor-vermelha); color:#FFF}

.portfolio-filter-list li a.active {background:var(--cor-vermelha); border: solid 2px var(--cor-vermelha); color:#FFF}

.portfolio-filter-list li .count {     font-weight: 400;
    font-size: 12px;
    background: rgba(0, 0, 0, 0.1);
    padding: 4px 8px;
    border-radius: 100px;}




#load-more-portfolio {display: flex;
    margin: 20px auto !important;
    text-align: center;
    padding: 28px 100px;
    border-radius: 10px;
    background: var(--cor-vermelha);
    color: #FFF;
    font-size: 18px;}

.full-page #videoBg {    width: 100%;
    object-fit: cover; height:100%}


















.carousel {
  position: relative;
  width: 100%;
	height:500px;
	border-radius:15px;
	overflow:hidden
}

.carousel-inner {
  overflow: hidden;
}

.carousel-item {
  transition: transform 0.6s ease-in-out;height:500px;
}

.carousel-item img {
 width: 100%;
  height: 100%;
  object-fit: cover;      /* preenche tudo */
  object-position: center;/* corta a partir do centro */
  display: block;
}

.carousel-control-prev,
.carousel-control-next {
  width: 48px;
  height: 48px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 1;
	color:#FFF;
}

.carousel-control-prev {
  left: 10px;
}

.carousel-control-next {
  right: 10px;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
  width: 30px;
  height: 30px;
}

.carousel-control-next i, 
.carousel-control-prev i{
font-size:42px;
	text-shadow:
  1px 1px 2px black,
  0 0 1em black,
  0 0 0.2em black;
}




.carousel-caption {width: 100%;
    left: 0;
    right: 0;
    bottom: 0px;
    padding: 50px;background: linear-gradient(transparent, black);}

.info-servicos-head p {line-height: 1.4;}
.info-servicos-head {margin:calc(var(--x-space) * 2) 0px}
.info-servicos-head img {max-height:90px; width:auto}

section#servicos-full .section-border-rounded {background-color:#f5f5f7}

section#servicos-full .desc-col-servicos {padding-left:5%}
section#servicos-full .desc-col-servicos h6 {font-size:16px; opacity:0.8; line-height:1.2; font-weight:350}
section#servicos-full .desc-col-servicos h3 {font-weight:700; color:var(--cor-vermelha); margin-bottom: 0.5rem;}
section#servicos-full .desc-col-servicos p {line-height:1.4}
section#servicos-full .desc-col-servicos a {color:var(--cor-blackout); text-decoration:none; padding:15px 22px; display:inline-block; border-radius:4px; border:2px solid var(--cor-blackout); margin-top:20px; opacity:0.6}


section#servicos-full .item-servicos:nth-child(1) hr {display:none}
section#servicos-full .item-servicos:nth-child(even) .desc-col-servicos {order:1; padding-right:5%; padding-left:0px}
section#servicos-full .item-servicos:nth-child(even) .rel-col-servicos {order:2;}
section#servicos-full hr {margin:var(--x-space) 0}


section#servicos-full .carousel {background:#FFF}


section#instagram-area {    z-index: 2 !important;
position: relative;}

footer#footer {z-index: 4 !important;
    position: relative;}

.page-template-front-page footer#footer .section-border-rounded {border-radius:0px !important}



.more-button-port a {
    margin: 20px auto !important;
	text-decoration:none;
	display: inline-block;
    text-align: center;
    padding: 28px 100px;
    border-radius: 10px;
    background: transparent;
	border:2px solid var(--cor-vermelha);
	transition:all 0.1s linear;
    color: #FFF;
    font-size: 18px;}

.more-button-port a:hover {background: var(--cor-vermelha);}