/*!
Theme Name: lew'lara\TBWA
Theme URI: https://lewlaratbwa.com.br/
Author: Dujudini
Author URI: https://dujudini.com.br/
Description: Layout 2026 - lew'lara\TBWA
Version: 1.0.1
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: httpslewlaratbwa-com-br
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready


*/
@font-face {
    font-family: 'Bebas Neue';
    src: url('fonts/BebasNeue-Thin.woff2') format('woff2'),
        url('fonts/BebasNeue-Thin.woff') format('woff');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Bebas Neue';
    src: url('fonts/BebasNeue-Light.woff2') format('woff2'),
        url('fonts/BebasNeue-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Bebas Neue';
    src: url('fonts/BebasNeue-Bold.woff2') format('woff2'),
        url('fonts/BebasNeue-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Bebas Neue';
    src: url('fonts/BebasNeue-Regular.woff2') format('woff2'),
        url('fonts/BebasNeue-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Bebas Neue';
    src: url('fonts/BebasNeue-Book.woff2') format('woff2'),
        url('fonts/BebasNeue-Book.woff') format('woff');
    font-weight: bolder;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Decima+';
    src: url('fonts/Decima-Regular.woff2') format('woff2'),
        url('fonts/Decima-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Decima+';
    src: url('fonts/Decima-Bold.woff2') format('woff2'),
        url('fonts/Decima-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Decima+';
    src: url('fonts/Decima-Light.woff2') format('woff2'),
        url('fonts/Decima-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}


b, strong {
    font-weight: bold !important;
	
}
body{
	font-family: 'Decima+', sans-serif;
	font-weight: normal;
}
.back-header{
	background-image: url('/wp-content/uploads/2025/08/header-gr.png');
	background-position: center top;
    background-size: auto 150px;
	background-repeat: no-repeat;
	position:absolute;
	top:0;
	left:0;
	right:0;
	width:100%;
	height:150px;
	z-index:1;
}
.back-header-dis {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 150px;
  z-index: 1;
  background-color: #000;
  -webkit-mask-image: url('/wp-content/uploads/2025/08/header-gr.png');
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center top;
  -webkit-mask-size: auto 150px;
  mask-image: url('/wp-content/uploads/2025/08/header-gr.png');
  mask-repeat: no-repeat;
  mask-position: center top;
  mask-size: auto 150px;
  transition: background-color var(--anim-time) var(--anim-basic) var(--anim-delay);
}
.back-header2{
	background-color:#FBF90C;	
	color:#000;
	background-image: url('/wp-content/uploads/2025/09/raio-topof.png');
	background-position: center top;
    background-size: auto 282px;
	background-repeat: repeat-x;
	position:absolute;
	top:0;
	left:0;
	right:0;
	width:100%;
	height:282px;
	z-index:1;
}
@media (max-width: 991.98px){
	.back-header,.back-header-dis {
		height: 90px;
	}
}

.locksc{
	overflow:hidden;
}
:root{
	--sf-yellow:#FBF900;
	--sf-fg:#0a0a0a;
	--sf-fg-dim:#444;
	--sf-gap: clamp(16px, 3vw, 32px);
	--nav-animation-duration: 1s;
	--nav-ease: cubic-bezier(0.56, 0, 0.06, 1);
	--swiper-navigation-sides-offset: -15px;
	--z-logo:   1200; 
	--z-overlay:2200; 
	--z-off:    2300; 
	--z-burger: 2600; 
	--card-bg: #FBF90C;
	--card-fg: #000;
	--btn-accent: #FBF900;    
	--ctttxt: #000000;
	--anim-time: 2s;
	--anim-basic: ease-in-out;
	--anim-delay: 2s;
	--bs-body-bg: #000;
	--topmob: 120px;
}


.sf-brand-fixed{
  position: absolute; top: 14px; left: 20px; z-index: var(--z-logo);
}

.sf-logo{ height: 28px; width:auto; display:block; transition: filter var(--anim-time) var(--anim-basic) var(--anim-delay); }


.sf-burger-fixed{
  position: absolute; top: 14px; right: 20px; z-index: var(--z-burger);
}
.sf-burger{
  width:44px; height:44px; border:0; background:transparent; cursor:pointer;
}
.sf-burger-bar{
  position:absolute; left:8px; right:8px; height:2px; background:var(--sf-yellow);
}
.dischange .sf-burger-bar{
  transition:
    transform var(--nav-animation-duration) var(--nav-ease),
    opacity   var(--nav-animation-duration) var(--nav-ease),
    top       var(--nav-animation-duration) var(--nav-ease),
	background-color var(--anim-time) var(--anim-basic) var(--anim-delay); 
}

.sf-burger-bar:nth-child(1){ top:14px; }
.sf-burger-bar:nth-child(2){ top:21px; }
.sf-burger-bar:nth-child(3){ top:28px; }
.sf-burger.is-active .sf-burger-bar{background:var(--sf-fg);}
.sf-burger.is-active .sf-burger-bar:nth-child(1){ top:21px; transform: rotate(45deg); }
.sf-burger.is-active .sf-burger-bar:nth-child(2){ opacity:0; }
.sf-burger.is-active .sf-burger-bar:nth-child(3){ top:21px; transform: rotate(-45deg); }

.sf-overlay{
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background: rgba(0,0,0,0.65);   
  opacity: 0;
  visibility: hidden;
  pointer-events: none; 

  transition:
    opacity   var(--nav-animation-duration) var(--nav-ease),
    visibility 0s linear var(--nav-animation-duration);
}

/* Visível quando o menu abre */
.sf-overlay.is-open{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;          
  transition:
    opacity   var(--nav-animation-duration) var(--nav-ease),
    visibility 0s;            
}

.sf-offcanvas{
  position: fixed; inset: 0; z-index: var(--z-off);
  background: var(--sf-yellow); color: var(--sf-fg);
  overflow: auto;
	border-left:8px solid #000;
  /* mobile (default): fechado para cima */
  transform: translateY(-100%);
  opacity: 0; visibility: hidden;

  will-change: transform, opacity;
  transition:
    transform var(--nav-animation-duration) var(--nav-ease),
    opacity   var(--nav-animation-duration) var(--nav-ease),
    visibility 0s linear var(--nav-animation-duration);
}
.sf-offcanvas.is-open{
  transform: translateY(0);
  opacity: 1; visibility: visible;
  transition:
    transform var(--nav-animation-duration) var(--nav-ease),
    opacity   var(--nav-animation-duration) var(--nav-ease),
    visibility 0s;
}


@media (min-width: 992px){
  .sf-offcanvas{
    width: min(900px, 80vw);
    left: auto; right: 0; top: 0; bottom: 0;
    transform: translateX(100%);
    box-shadow: -24px 0 60px rgba(0,0,0,.15);

    transition:
      transform var(--nav-animation-duration) var(--nav-ease),
      opacity   var(--nav-animation-duration) var(--nav-ease),
      visibility 0s linear var(--nav-animation-duration);
  }
  .sf-offcanvas.is-open{
    transform: translateX(0);
    transition:
      transform var(--nav-animation-duration) var(--nav-ease),
      opacity   var(--nav-animation-duration) var(--nav-ease),
      visibility 0s;
  }
  
  
}

.sf-offcanvas-inner{
  min-height: 100%;
  padding: var(--sf-gap);
  display: flex; flex-direction: column; gap: var(--sf-gap);
}

.sf-menu-grid{ display: grid; gap: var(--sf-gap); grid-template-columns: 1fr; }
@media (min-width: 992px){
  .sf-menu-grid{ grid-template-columns: 1.2fr .8fr; align-items: start; }
}

/* Menus */
.sf-menu{ list-style: none; margin: 0; padding: 0; }
.sf-menu li{ margin: 0; }
.sf-menu a{
  display:flex; align-items:center; justify-content:start;
  padding:10px 0;
  text-decoration:none; color: var(--sf-fg);
}
.sf-menu a:hover{ opacity:.85; }

/* Tipos */
.sf-menu-primary > li > a{ font-size: clamp(18px, 1.4vw, 28px); font-weight: 600;  gap: 8px; }
.sf-menu-secondary > li > a{ font-size: clamp(14px, .95vw, 18px); color: var(--sf-fg-dim); }

/* Dropdown 1 nível (só esquerda) */
.sf-menu-primary li.menu-item-has-children > a{ position:relative; }
.sf-subtoggle{
   margin-left: 0;            /* antes era auto (empurrava p/ direita) */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;           /* ↑ aumenta a seta */
  line-height: 1;
  width: 1em;                /* alvo mínimo */
  height: 1em;
  padding: 2px;              /* melhora o alvo de toque */
  border: 0;
  background: transparent;
  cursor: pointer;
}
.sf-subtoggle::after{ 
	content: "▸";
  display: inline-block;
  transition: transform .25s ease;
  transform-origin: 100% 100%; 
 }
.sf-subtoggle[aria-expanded="true"]::after{ transform: rotate(90deg); }
.sf-menu-primary ul.sub-menu{ list-style:none; margin:0; padding:0 0 0 14px; display:none; }
.sf-menu-primary ul.sub-menu a{
  font-size: clamp(14px, .9vw, 16px); font-weight:500;
  border-bottom: 1px dashed rgba(0,0,0,.08);
  text-transform:uppercase;
}


.sf-menu-bottom{
  margin-top: auto;
  display: flex; flex-direction: column;
  gap: clamp(14px, 2.5vw, 24px);
}
.sf-bottom-row{ display:flex; align-items:flex-start; }


.sf-addresses{ justify-content: space-between; gap: clamp(12px, 3vw, 32px); }
.sf-address{ font-style: normal; line-height: 1.4;font-size:1.1rem}
.sf-address-left{text-align:left;} .sf-address-right{text-align:right;}


.sf-socials-row{ justify-content: center; }
.sf-socials{ display:flex; gap:16px 20px; flex-wrap:wrap; justify-content:center; }
.sf-socials a{ color: var(--sf-fg); text-decoration:none; font-size:18px; }
.sf-socials a:hover{ opacity:.8; }


.sf-menu-logo{ display:flex; justify-content:center; }
.sf-menu-logo img{ height:28px; width:auto; object-fit:contain; filter: grayscale(1) brightness(0) contrast(1000%); }


@media (max-width: 991.98px){
  .sf-addresses{ flex-direction: column; align-items:center; text-align:center; gap:10px; }
  .sf-address-right{ text-align:center; }
  .sf-address-left{ text-align:center; }
  .sf-burger-fixed {
		position: absolute;
		top: 10px;
		right: 20px;
		z-index: var(--z-burger);
	}
	.sf-logo {
		height: 16px;
		margin-top:12px
		
	}
	.locksc{
		overflow-y:auto
	}
}


body.sf-menu-open{ overflow:hidden; }


@media (prefers-reduced-motion: reduce){
  .sf-offcanvas,
  .sf-offcanvas.is-open,
  .sf-burger .sf-burger-bar{ transition: none !important; }
}

/* FOOTER */

footer{
	width:100%;
	font-size:.8rem;
	color:#FBF854;
	background-color:#000
}
@media (max-width: 991.98px){
	footer{
		
		font-size:.6rem;
	}
}

/* HOME */
.homeheader{
	position:absolute;
	top:0;
	right:0;
	left:0;
	bottom:0;
	z-index:0;
	width:100%;
	height:100%
}
.video-background {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
.video-background video{
  position: absolute;
  top: 50%; left: 50%;
  min-width: 100%; min-height: 100%;
  transform: translate(-50%, -50%);
  object-fit: cover;
  z-index: -1; /* fica atrás do preloader */
}

/* ==== PRELOADER COM FUNDO AMARELO SÓLIDO E FURO DO LOGO ==== */
.preloader{
  position: fixed;
  inset: 0;
  z-index: 3001;
  display: grid;
  place-items: center;

  /* Nada de blend para não alterar o fundo/vídeo */
  background: transparent;        /* o “pano” amarelo fica no ::before */
  isolation: isolate;
}
.preloader.is-fading{
  opacity: 0;
  transition: opacity 800ms ease;   /* ajuste a duração se quiser */
  pointer-events: none;              /* libera cliques pro conteúdo */
  mix-blend-mode: normal;            /* evita artefatos durante o fade */
}

.preloader::before{
  content: "";
  position: absolute;
  inset: 0;
  background: #FBF854;            /* amarelo sólido */

  /* ---- Chrome / Safari / Edge ---- */
  /* Duas camadas: [base cheia] e [logo]. XOR “cava” o logo na base. */
  -webkit-mask-image:
    linear-gradient(#fff 0 0),
    url("/wp-content/uploads/2025/08/logo-teste.png");
  -webkit-mask-repeat: no-repeat, no-repeat;
  -webkit-mask-position: 0 0, center;
  -webkit-mask-size: 100% 100%, 0 auto; /* começa fechado */
  -webkit-mask-composite: source-over, xor;

  /* ---- Firefox (padrão) ---- */
  mask-image:
    url("/wp-content/uploads/2025/08/logo-teste.png"),
    linear-gradient(#fff 0 0);
  mask-repeat: no-repeat, no-repeat;
  mask-position: center, 0 0;
  mask-size: 0 auto, 100% 100%;   /* começa fechado */
  mask-composite: exclude, add;

  animation: revealMask 2s ease-in-out forwards;
}

/* Anima o “reveal” do logo (0 -> 70vw) */
@keyframes revealMask{
  0%{
    -webkit-mask-size: 100% 100%, 0   auto;
            mask-size: 0   auto, 100% 100%;
  }
  100%{
    -webkit-mask-size: 100% 100%, 70vw auto;
            mask-size: 70vw auto, 100% 100%;
  }
}

.logo-container{ visibility: hidden; }
.home footer{
	position:absolute;
	bottom:0;
	right:0;
	left:0;
	text-align:center;
	font-size:.8rem;
	color:#FBF854;
	background-color:transparent
}


/* DISRUPTION */


.disruption{
	padding-top:200px;
	padding-bottom:9rem;
	color:#000;
	background-color: #FBF900;
	background-image:url('/wp-content/uploads/2025/10/d.png');
	background-position:center right;
	background-repeat:no-repeat;
	transition: background-color var(--anim-time) var(--anim-basic) var(--anim-delay);
}

.disruption h1 {
    font-size: 6rem;
    font-family: "Bebas Neue", sans-serif;
    font-weight: bolder;
	transition: color var(--anim-time) var(--anim-basic) var(--anim-delay);
	color:#FBF900;
	padding-bottom: 3rem;
}
.disruption .texto{
	font-size:1.2rem;
	color:#FBF900;
}
.disruption .texto p{
	text-align:justify
}
.distext{
	color:#000;
	transition: color var(--anim-time) var(--anim-basic) 4s;
}
.tools{
	padding-top:9rem;
	padding-bottom:2rem;
	background-color:#FBF900;
	color:#FBF900;
	background-image:url('/wp-content/uploads/2025/10/grafismo.png');
	background-position: calc(100% + 100px) center;
	background-repeat:no-repeat;
	transition: background-color var(--anim-time) var(--anim-basic) var(--anim-delay);
}

.tools h2{
	font-size:6rem;
	font-family: "Bebas Neue", sans-serif;
	font-weight:bolder;
}
.tools .toolrow{
	padding-bottom:4rem;
}
.tools .texto{
	font-size:1.25rem;
}
.tools .texto p{
	margin-bottom:0;
	padding-bottom:0
}
.septira{
	background-color:#FBF900;
	transition: background-color var(--anim-time) var(--anim-basic) var(--anim-delay);
}
.septira img{
	opacity:0;
	transition: opacity var(--anim-time) var(--anim-basic) var(--anim-delay);
}

.dischange .back-header-dis {
	background-color: #FBF900;
}

.dischange .sf-logo{ 
	filter: brightness(0) saturate(100%); 
}
.dischange .sf-burger-bar{
	background-color:#000
}

.dischange .disruption{
	background-color: #000;
}
.dischange .disruption h1{
	color:#FBF900;
}
.dischange .disruption .texto{
	color:#FBF900;
}
.dischange .disruption .distext{
	color:#FBF900;
}
.dischange .tools{
	background-color:#000;
}
.dischange .swiper {
	opacity:1;
}
.dischange .septira {
	background-color:#000;
}
.dischange .septira img {
	opacity:1;
}




.spanswipe{
	position:relative; padding:16px; text-align:center; display:block; color:#fff;
}
.swiper-button-prev, .swiper-button-next{
	background:#FBF900; 
	color:#000; 
	padding:10px; 
	border-radius:999px; 
	z-index:5;
}
.swiper-button-prev svg, .swiper-button-next svg{

	fill: #000 !important; 
}
.swiper-button-prev svg path, .swiper-button-next svg path{
	stroke: #000 !important; 
}
.tool-caption h4{
	font-size: 2rem;
	font-weight:bolder;
	padding-bottom:2rem;
}
.tool-caption__text{
    font-size: 1.25rem;
	padding-bottom:2rem;
}

@media (max-width: 991.98px) {
	.disruption{
		padding-top:120px;
		padding-bottom:4.5rem;
	}
	.dischange .disruption{
		background-image:unset;
	}
	.disruption h1{
		font-size:2rem;
	}

	.disruption .texto{
		font-size:1rem;
	}
	.dischange .tools{
		background-image:unset;
	}
	.tools{
		padding-top:4.5rem;
	}
	.tools h2{
		font-size:2rem;
	}
	.tools .texto{
		font-size:1rem;
	}
	.tool-caption h4{
		font-size: 1.5rem;
		font-weight:bolder;
		padding-bottom:1.5rem;
	}
	.tool-caption__text{
		font-size: 1rem;
		padding-bottom:2rem;
	}
		
}

/* UNIDADES DE NEGÓCIO */
.unidades{
	
	padding:200px 5vw 50px;
	background-color:#FBF90C;	
	color:#000;
	min-height:calc(100vh - 51px);
}



.unidados{
}
.unidades h1{
	font-size:3rem;
	font-family: "Bebas Neue", sans-serif;
	font-weight:300;
}

.unidades .texto{
	font-size:1.2rem;
}
.unidades .texto p{
	text-align:justify
}
.unidades .texto ul{
}
.unidades .texto li{
	margin-bottom:.8rem;
}
.single-unidade-de-negocio .ft-hd{
	width: 100%;
	aspect-ratio: 1920 / 463;
	background-size: cover;
	background-position: bottom;
	background-color:#FBF90C;
}
@media (max-width: 991.98px) {
	
	
}
/* LIDERANÇA */
.equipegrid{
	position:relative;
	padding:200px 5vw 60px;
	background-image: url('/wp-content/uploads/2025/09/raios.png');
	background-position: right center;
    background-size: 50% 50%;
	background-repeat: no-repeat;
}

.equipefull{
	position:relative;
	width:100%;
	height:100%;
	z-index:3;
	transition: transform 1s ease-in-out;
}
.equipefull.slidelid{
	transform: translate3d(-100vw, 0, 0px);
}
.equipesinglegrid{
	position:absolute;
	inset: 0;
	top:200px;
	left:0;
	right:0;
	bottom:60px;
	z-index:2;
	padding:0 5vw;
	overflow:hidden;
	transition: opacity .5s ease-in-out, visibility 0s 0.5s;
}

.equipesinglegrid.hid{
	opacity: 0;
    visibility: hidden;
    
}
.es100{
	height:100%;
}
.img-coverlid{
  width: 100%;
  aspect-ratio: 3 / 4;   /* 9:16 */
  object-fit: cover;       /* mantém proporção e corta sobra */
  object-position: center top; /* ajuste o enquadramento se quiser */
  display: block;
  filter: grayscale(100%) contrast(1.05) brightness(0.9);
  transition: filter 0.5s ease-in-out;
  cursor:pointer;
  border-radius:10px;
}
.img-coverlid:hover{
  filter: none!important;
}
.nomelid,.biolid,.rolelid{
 display: none;
}

.nomelid.ativo,.biolid.ativo,.rolelid.ativo {
  display: block;            /* troque para flex/grid se precisar */
  animation: fadeIn 1s ease both;
}
.col-bio{
	
    
    color: #FBF90C;
	z-index:2;
}
.bioscroll{
	overflow-x: hidden;
    overflow-y: hidden;
	background-color: #000;
	border-radius: 10px;
	padding: 1.5rem;
}
.biolid{
	overflow-y:scroll;
	height:100%;
	padding-right: 2.5rem;
    width: calc(100% + 3.5rem);
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(80px); }
  to   { opacity: 1; transform: none; }
}
.photobox{
	position:relative;
	height:100%;
	width:100%;
}
.photolid {
	position:absolute;
	inset:0;
	top:0;
	bottom:0;
	left:0;
	right:0;
	transition: transform 1s ease-in-out;
	filter: none;
	z-index:1;
	border-radius:10px
}
.photolid.cima {
    transform: translate3d(-100vw, -100vh, 0px);
}
.photolid.baixo {
    transform: translate3d(100vw, 100vh, 0px);
}


.nome h2{
	font-family: 'Bebas Neue', sans-serif;
	font-weight:bolder;
	font-size: clamp(3rem, 8vw, 6rem);
	margin-bottom: 0
}
.equipegrid h1{
	font-weight:bolder;
	font-size: clamp(3rem, 2.5vw, 5rem);
	text-transform:uppercase;
}
.backlid,.backlid:hover,.backlid:visited{
	color:#000;
	text-decoration:none;
}
.role h3{
	
	font-weight:bolder;
	font-size: clamp(1rem, 1.3vw, 3rem);
	margin-bottom: 0
}

@media (max-width: 991.98px) {
	.equipegrid {
		padding: 120px 0 30px;
		
	}
	.equipesinglegrid{
		
		top:120px;
		bottom:30px;
		z-index:2;
		overflow:scroll;
		padding-left:0;
		padding-right:0;
		
	}
	.es100{
		height:auto;
	}
	.photobox{
		aspect-ratio:16/9;
	}
	.photolid {
		max-width:100%;
	}
	.col-nome, .col-photo{
		margin-bottom:1.5rem
	}
	.biolid{
		overflow-y:auto;
		width: 100%;
		height:auto;
	}
	#fp-nav ul li a span, .fp-slidesNav ul li a span {
		background-color:#FBF90C !important;
		z-index:100;
	}
	.equipesingle{
		overflow-y:auto;
	}
	.nomerole{
		background-color:#FBF90C !important;
		z-index:1;
	}
	.equipe h2{
		margin-bottom:2rem;
	}
	
}

/* AGENCIA */
.agencia{
	padding:200px 5vw 50px;
	background-color:#FBF90C;	
	color:#000;
}
.agencia h1 {
    font-size: 6rem;
    font-family: "Bebas Neue", sans-serif;
    font-weight: bolder;
}
.agencia .texto{
	font-size:1.2rem;
}
.agencia .texto p{
	text-align:justify
}
@media (max-width: 991.98px) {
	.agencia{
		padding-top:var(--topmob);
	}
	.agencia h1 {
		font-size: 2.5rem;
	}
	
}


/* PREMIOS */
.premios{
	position:relative;
	padding:200px 5vw 60px;
	background-color: #FBF90C;
}
.premios .container-fluid{ 
	position:relative;
	z-index:1
	
}
.premios h2{
	font-weight:bolder;
	font-size: clamp(3rem, 2.5vw, 5rem);
	text-transform:uppercase;
}
.cardpremio{
	background-color:#000;
	border-radius:15px;
	aspect-ratio: 7 / 8;
	-webkit-box-shadow: 3px 3px 15px 0px #000000; 
	box-shadow: 3px 3px 15px 0px #000000;
	cursor:pointer;
}
.img-prizef{
	
	width:50%;
	max-width:50%;
	filter:
    brightness(0) saturate(100%)    /* zera a cor base */
    invert(86%)                      /* aproxima do amarelo */
    sepia(72%)
    saturate(1200%)
    hue-rotate(2deg)
    brightness(103%)
    contrast(102%);
}
.img-prizeb{
	
	width:30%;
	max-width:30%;
	filter:
    brightness(0) saturate(100%)    /* zera a cor base */
    invert(86%)                      /* aproxima do amarelo */
    sepia(72%)
    saturate(1200%)
    hue-rotate(2deg)
    brightness(103%)
    contrast(102%);
}
.cardpremio h4{
	color:#FBF90C;
}
.listnumb{
	color:#FBF90C;
	font-size: clamp(1rem, 1.3vw, 2rem);
}
.flipcard{
  position: relative;
  perspective: 1000px; 
cursor:pointer;/* dá profundidade */
}

/* As duas faces ocupam a mesma área */
.flipcard .cardpremio,
.flipcard .cardlista{
  border-radius: 15px;
  transform-style: preserve-3d;
  transition: transform .6s cubic-bezier(.2,.7,.2,1);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.flipcard .cardpremio{
  position: relative;
  overflow: hidden;           
}


.flipcard .cardlista{
  position: absolute;
  inset: 0;
  transform: rotateY(180deg);
  background: #0b0b0b;        
  box-shadow: 3px 3px 15px 0px #000000; 
  display: flex;              
  flex-direction: column;
  justify-content: space-between;
  border-radius: 15px;
}

@media (hover:hover) and (pointer:fine){
  .flipcard:hover .cardpremio{ transform: rotateY(180deg); }
  .flipcard:hover .cardlista{  transform: rotateY(0deg); }
}

/* Acessível no teclado: se algo dentro ganhar foco, também vira */
.flipcard:focus-within .cardpremio{ transform: rotateY(180deg); }
.flipcard:focus-within .cardlista{  transform: rotateY(0deg); }

/* (Opcional) melhora a fluidez */
.flipcard .cardpremio,
.flipcard .cardlista{ will-change: transform; }
@media (max-width: 991.98px) {
	.premios {
		padding-top:120px;
	}
	.cardpremio{
		aspect-ratio: 5 / 7;
	}
	.premios h2{
		margin-bottom:2rem;
	}
	
}

/* TRABALHOS */
.trabalhos{

	padding:200px 5vw 30px;
	background-color:#ede8c8;
}
.trabalhos h2{
	font-weight:bolder;
	font-size: clamp(3rem, 2.5vw, 5rem);
	text-transform:uppercase;
}
.writis{
	background-position: right top;
	background-size: contain;
	background-repeat: no-repeat;
	background-color:#000;
	color:#FBF900;
	height: 100%;
}
.mid{
	background-image: url('/wp-content/uploads/2025/10/modal.png');
	background-position: left bottom;
	background-size:contain;
	background-repeat: no-repeat;
	background-color:#FBF900;
	height: 100%;
}
.graf{
	background-image: url('/wp-content/uploads/2025/09/skull.png');
	background-position: right bottom;
	background-repeat: no-repeat;
	background-color:#FBF900;
	background-size: 40%;
	color:#000;
	height: 100%;
}
.internalpad-l,.internalpad-r{
	padding: 4rem 3rem 4rem;
}
.wm-text h1 {
	margin-bottom:3rem;
}
/* Container 16:9 robusto (suporta browsers modernos) */
.media-16x9 {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;           /* Mantém 16:9 para imagem e vídeo */
  background: #000;
  overflow: hidden;
  border-radius: 12px;            /* opcional */
}

/* Fallback (se algum navegador antigo não suportar aspect-ratio) */
.media-16x9::before {
  content: "";
  display: block;
  padding-top: 56.25%;
}

.work-tile {
  display: block;
  text-decoration: none;
  color: #000;
}

.tile-img,
.tile-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;              /* Preenche sem distorcer */
  transition: opacity .25s ease;
}

/* Imagem PB por padrão */
.tile-img {
  filter: grayscale(100%);
  opacity: 1;
}

/* Vídeo invisível até o hover */
.tile-video {
  opacity: 0;
  pointer-events: none;           /* clique vai para o <a> */
}

/* Somente em dispositivos com hover real */
@media (hover: hover) and (pointer: fine) {
  .work-tile:hover .tile-img,
  .work-tile:focus-visible .tile-img {
    opacity: 0;
  }
  .work-tile:hover .tile-video,
  .work-tile:focus-visible .tile-video {
    opacity: 1;
  }
}

/* Título opcional */
.tile-title {
  font-weight: 700;
  line-height: 1.2;
}
.tile-client {
  font-weight: 500;
  font-size: 1rem;
}

/* Modal raiz */
.workmodal {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 3080;
  transform: translate3d(100vw, 100vh, 0px);
  transition: transform 1s ease-in-out;
  will-change: transform;
}

/* Mostra quando ativo */
.workmodal.active{ transform: translate3d(0vw, 0vh, 0px); }

/* Painel ocupa toda a tela */
.workmodal__panel {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  color: #111;
  overflow: auto;
  
}


body.modal-open { overflow: hidden; }

/* Botão fechar */
.workmodal__close {
  position: fixed;
  top: 14px;
  right: 14px;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: #000;
  color: #fff;
  border: 0;
  cursor: pointer;
  z-index: 10000;
}
.workmodal__close:hover { opacity: .9; }

/* Dark mode opcional */
@media (prefers-color-scheme: dark) {
  .workmodal__panel { background: #121212; color: #e6e6e6; }
}

@media (max-width: 991.98px){
	.trabalhos{
		padding-top:var(--topmob);
	}
	.workmodal {
		height: auto;
		overflow: auto;
	}
	.writis{
		height: auto;
	}
	.mid {
		background-image: url(/wp-content/uploads/2025/10/modal-mob.png);
		background-position: left top;
		background-size: contain;
		background-repeat: no-repeat;
		background-color: #FBF900;
		aspect-ratio:1920/249;
		height:auto;
		width: 100%
	}
	.graf{
		height: auto;
	}
}


/* CONTATO */
.contato{
	padding:200px 5vw 0;
	background-color:#ede8c8;
}
.back-foot{
	background-color:#ede8c8;
}
.contato h2{
	font-weight:bolder;
	font-size: clamp(3rem, 2.5vw, 5rem);
	text-transform:uppercase;
}
.ventriloquo{ position:relative; display:inline-block; }
.ventriloquo{
  position: relative; display:inline-block;
  /* controle fino por CSS vars */
  --dur: .7s;     /* duração da fala + rotação (sincroniza tudo) */
  --rot: 1.2deg;  /* amplitude da rotação (leve) */
  --amp: 2%;      /* amplitude vertical da boca (responsivo) */

  /* rotação leve sincronizada */
  animation: nod var(--dur) infinite ease-in-out;
  transform-origin: 50% 68%; /* pivô um pouco abaixo do centro (perto do pescoço) */
  will-change: transform;
}

.head, .mouth{
  width:100%; height:auto; display:block;
}
.mouth{
  position:absolute; inset:0; pointer-events:none;
  animation: talk var(--dur) infinite steps(1,end);
  will-change: transform;
}

/* rotação “balançando” em volta do 0° */
@keyframes nod{
  0%   { transform: rotate(0deg); }
  25%  { transform: rotate(var(--rot)); }
  50%  { transform: rotate(0deg); }
  75%  { transform: rotate(calc(var(--rot) * -1)); }
  100% { transform: rotate(0deg); }
}

/* use o seu keyframe de fala “turbinado”; exemplo com % (responsivo) */
@keyframes talk{
  0%   { transform: translateY(0); }
  5%   { transform: translateY(calc(var(--amp)*1.5)); }
  10%  { transform: translateY(calc(var(--amp)*3.5)); }
  15%  { transform: translateY(0); }
  20%  { transform: translateY(calc(var(--amp)*2.2)); }
  25%  { transform: translateY(calc(var(--amp)*0.9)); }
  30%  { transform: translateY(calc(var(--amp)*5)); }
  35%  { transform: translateY(0); }
  40%  { transform: translateY(calc(var(--amp)*3)); }
  45%  { transform: translateY(calc(var(--amp)*0.4)); }
  50%  { transform: translateY(calc(var(--amp)*4)); }
  55%  { transform: translateY(0); }
  60%  { transform: translateY(calc(var(--amp)*1.6)); }
  65%  { transform: translateY(calc(var(--amp)*4.5)); }
  70%  { transform: translateY(0); }
  75%  { transform: translateY(calc(var(--amp)*0.9)); }
  80%  { transform: translateY(calc(var(--amp)*5)); }
  85%  { transform: translateY(calc(var(--amp)*2.2)); }
  90%  { transform: translateY(0); }
  95%  { transform: translateY(calc(var(--amp)*3.4)); }
  100% { transform: translateY(0); }
}

/* acessibilidade: reduz movimentos */
@media (prefers-reduced-motion: reduce){
  .ventriloquo, .mouth { animation: none; }
}
.address{
	background-color:#000;
	color:#FBF90C;
}




    .contact-form .form-label { color: var(--ctttxt); }

    .contact-form .form-control,
    .contact-form .form-select,
    .contact-form textarea {
      background: transparent !important;
      color: var(--ctttxt);
      border: none;
      border-bottom: 2px solid #000;
      border-radius: 0;
      padding-left: 0;
      padding-right: 0;
      box-shadow: none;
    }

    .contact-form .form-control::placeholder { color: rgba(0,0,0,.5); }

    .contact-form .form-control:focus,
    .contact-form textarea:focus {
      border-color: #000;
      box-shadow: none;
    }

    .contact-form .btn-send {
      background: #000;
      color: var(--btn-accent);
      border: none;
      padding: .75rem 1.25rem;
      font-weight: 700;
      letter-spacing: .02em;
      border-radius: .5rem;
    }

    .contact-form .btn-send:hover,
    .contact-form .btn-send:focus {
      filter: brightness(1.1);
      color: var(--btn-accent);
    }

    /* Mensagens de validação do Bootstrap ficam coerentes com o layout */
    .contact-form .was-validated .form-control:invalid,
    .contact-form .form-control.is-invalid {
      border-bottom-color: #dc3545;
    }
    .contact-form .was-validated .form-control:valid,
    .contact-form .form-control.is-valid {
      border-bottom-color: #198754;
    }
@media (max-width: 991.98px){
	.contato{
		padding-top:120px;
		padding-bottom:30px
	}
}
/* CLIENTES */
.clientes{
	padding:200px 5vw 50px;
	background-color: #FBF900;
	color:#000;
	
}
.clientes .container-fluid{ 
	position:relative;
	z-index:1
	
}
.clientes h2{
	font-weight:bolder;
	font-size: clamp(3rem, 2.5vw, 5rem);
	text-transform:uppercase;
	color:#000;
}
.depoimentos{
	padding:150px 5vw;
	background-color: #ede8c8;
	background-image:url('/wp-content/uploads/2025/10/topo-cliente.png'),url('/wp-content/uploads/2025/10/lew-vert.png');
	background-position:top right, bottom left;
	background-repeat:no-repeat;
}
.depoimentos h2{
	font-weight:bolder;
	font-size: clamp(3rem, 2.5vw, 5rem);
	text-transform:uppercase;
	text-align:center;
	padding: 1rem 0 3rem;
}

  
  .depos-swiper .swiper-slide{
    background:var(--card-bg);
    color:var(--card-fg);
    border-radius:24px;
    box-shadow:0 10px 30px rgba(0,0,0,.15);
    overflow:hidden;
    display:grid;
	height:100%;
    grid-template-rows:auto auto auto 1fr; /* foto / nome / cargo / depoimento */
  }
  .depos-wrap {
	  padding-inline: 40px;              /* ajuste o “gutter” aqui */
	  position: relative;
	}
  .depos-photo{
    width:100%;
    aspect-ratio:4/4;     /* padroniza área da foto (mude para 1/1 se quiser quadrada) */
    background:#eaeaea;
    overflow:hidden;
  }
  
  .depos-photo img{
    width:100%; height:100%;
    object-fit:cover;
    display:block;
    filter:grayscale(100%);
  }
  .depos-nome{
    font-weight:800;
    font-size:clamp(1.05rem, 1.2vw + .6rem, 1.5rem);
    line-height:1.2;
    padding:16px 18px 2px;
  }
  .depos-cargo{
    font-weight:500;
    opacity:.85;
    padding:0 18px 8px;
    font-size:clamp(.9rem, .8vw + .55rem, 1.05rem);
  }
  .depos-quote{
    padding:0 18px 20px;
    font-size:clamp(1rem, .9vw + .55rem, 1.1rem);
    line-height:1.45;
  }