*{box-sizing:border-box;margin:0;padding:0}
:root{
  --panel-bg:#0b5ea8;
  --white:#fff;
  --max-width:1200px;
}
html,body{height:100%;width:100%;overflow:hidden;font-family:Arial,Helvetica,sans-serif}
.wrap{display:flex;height:100vh;max-width:100vw;}

/* Left panel */
.panel {
  z-index: 99;
  background: var(--panel-bg);
  color: var(--white);
  width: 40%;
  min-width: 320px;
  padding: 40px;

  display: flex;
  flex-direction: column;
  align-items: center;       /* Centraliza na horizontal */
  justify-content: center;   /* Centraliza na vertical */

  height: 100vh;             /* Garante que ocupe toda a altura da tela */
  box-shadow: 10px 0 20px rgb(from var(--panel-bg) r g b / 0.35);
}

.brand {
  width: 100%;
  text-align: center;        /* Centraliza o texto do título dentro da brand */
}

.logo {
  width: 100%;
  max-width: 100%;
}

.brand h1 {
  font-weight: 600;
  margin-top: 12px;
  font-size: 20px;
  text-transform:uppercase;
}

.info {
  margin-top: 40px;
  text-align: center;        /* Centraliza o texto dentro dessa seção */
}
.info {
  text-align: center;
  color: #fff;
  font-family: Arial, sans-serif;
}

.info .icon {
  width: 20px;
  height: 20px;
  vertical-align: middle;
  margin-right: 6px;
}

.info .contact a {
  text-decoration: none;
}
.info .contact a:hover {
  text-decoration: underline;
}

.masc {
  width: 80%;
  display: block;
  margin: 20px auto;         /* Centraliza a imagem horizontalmente */
}

.status {
  font-weight: 700;
  margin-bottom: 10px;
  text-align: center;
}

.contact {
  opacity: 0.95;
  font-size: 14px;
  line-height: 1.6;
  text-align: center;
}

/* Main area */
.main-area{width:60%;height:100vh;position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;background:#000}

/* slider right */
.slider-wrap{flex:1;position:relative;height:65vh;display:flex;align-items:center;justify-content:center;overflow:hidden}
.slider{position:relative;width:100%;height:100%}
.slide{position:absolute;top:0;right:0;bottom:0;left:0;background-size:cover;background-position:center;filter:blur(0px);opacity:0;transform:scale(1.02);transition:opacity 1s ease, filter 1s ease, transform 1s ease}
.slide.visible{opacity:1;filter:blur(0px);transform:scale(1)}

/* carousel */
.carousel-wrap{position:fixed;bottom:20px;height:20vh;display:flex;align-items:center;justify-content:center;padding:12px;background:#fff;}
.carousel{display:flex;gap:16px;align-items:center;transform:translateX(0);will-change:transform;overflow:visible;padding:8px}
.carousel img{width:12.5vw;min-width:80px;max-width:160px;height:auto;border-radius:6px;object-fit:cover;box-shadow:0 2px 6px rgba(0,0,0,.2)}

/* responsive behavior */
@media (max-width:900px){
  .wrap{flex-direction:column}
  .panel{width:100%;height:28vh;display:flex;flex-direction:row;align-items:center;gap:20px;padding:18px}
  .main-area{width:100%;height:72vh}
  .slider-wrap{height:44vh}
  .carousel-wrap{height:17vh}
  .logo{width:240px}
  .carousel img{width:22vw;min-width:60px;max-width:120px}
  .masc {
    width: 130px;
    margin: 10px auto;}
}

@media (max-width:480px){
  .panel{height:25vh;padding:12px}
  .brand h1{font-size:16px}
  .carousel img{width:28vw}
  .masc {
        width: 130px;
		margin: 10px auto;
    }
}

/* ensure no scrollbar */
html,body,.wrap,.panel,.main-area{overflow:hidden}
.info {
	width:500px;
	margin-top: 0px;
	}