@charset "UTF-8";
* { margin: 0; padding: 0; }
body, html { overflow-x: hidden; }
.clearfix:after, .clearfix:before { content: " "; display: table; }
.clearfix:after { clear: both; }
*, :after, :before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

#tudo { overflow: hidden; max-width: 1653px; margin: 0 auto; background-color: #fff; }

/* ===== BANNER COM VÍDEO ===== */
.aparador-banner-video {
  overflow: hidden;
  position: relative;
  min-height: 600px;
  /* Fallback: imagem enquanto o vídeo carrega */
  background-image: url('images/video-especialista-em-fertilizacao-sp-clinica-de-reproducao-humana-fertilidade-ginecologista-obstetra-sao-paulo.webp');
  background-size: cover;
  background-position: center;
}

/* Remove o fundo quando o vídeo estiver pronto */
.aparador-banner-video.video-loaded {
  background-image: none;
}

/* Vídeo ocupa 100% do banner em cover — em TODAS as telas */
#hero-video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  object-fit: cover;
  z-index: 0;
  opacity: 0;
  transition: opacity 0.5s;
}

/* Conteúdo do banner fica acima do vídeo */
#video-bg {
  position: relative;
  z-index: 1;
}

/* ===== ESTRUTURA GERAL ===== */
.aparador1 { padding: 0 14px; max-width: 1256px; margin: 0 auto; }
header .aparador1 { padding: 0 14px; }
.aparador2 { padding: 0 5%; }

#principal {
  background-position: top center;
  background-repeat: repeat-y;
  background-size: 100% auto;
  position: relative;
  padding: .01%;
}

.clear { clear: both !important; height: 0 !important; margin: 0 !important; padding: 0 !important; width: auto !important; border: none !important; }

#banner { position: relative; padding: 0; margin: 0; line-height: 0; height: 600px; }

.aparador-banner { padding: 14% 5.700325732899% 0; }
#banner .esq { float: left; width: 45%; }
#banner .dir { float: right; width: 11.580882352941%; margin-left: 3.676470588235%; }

.home #conteudo { margin-top: 70px; }
#conteudo { margin-top: 40px; }

/* ===== VÍDEOS ===== */
#videos { margin-top: 5px; border-top: solid 1px #9dd6dc; padding: 3.5% 0 0; }
.home #videos { margin-bottom: 1%; }
#videos h2 { color: #26b4c3; margin-bottom: 3.664495114007%; }
#videos #video { float: left; width: 52.117263843648%; }
#videos #video embed, #videos #video object, #videos #video video { max-width: 100%; }
#videos #descricao { float: right; width: 43.159609120521%; padding-right: 1.954397394137%; }
#videos #descricao p { font-family: yantramanavlight, Verdana, Geneva, sans-serif; font-size: 1.7em; color: #7e7e7e; line-height: 1.8em; text-align: left; margin-bottom: 1.5em; letter-spacing: .01em; }
#videos .linha { padding-bottom: 3.257328990228%; border-bottom: solid 1px #efebe5; margin-bottom: 3.257328990228%; }
#videos .seta-dir, #videos .seta-esq { width: 5.048859934853%; padding-top: 5.048859934853%; }
#videos .seta-dir:hover, #videos .seta-esq:hover { opacity: .6; }
#videos .seta-esq { float: left; text-align: left; }
#videos .seta-dir { float: right; text-align: right; }

.video-miniaturas { width: 89.902280130293%; overflow: hidden; float: left; }
.video-miniaturas img { padding: 0; margin: 0; display: block; width: 100%; }
.video-miniaturas img:hover { opacity: .6; }
#videos .col { width: 25%; float: left; padding: 0 2.198697068404%; }
.video-miniaturas a.tit-video { color: #fff; font-family: 'Work Sans', Verdana, Geneva, sans-serif; font-size: 1.5em; line-height: 1.3em; letter-spacing: -.03em; text-transform: none; padding: 10px; background-color: #26a4b2; display: block; margin-bottom: 20px; cursor: pointer; }
.video-miniaturas a.tit-video:hover { background-color: #34aebc; text-decoration: none; }
.video-miniaturas p { color: #7e7e7e; font-family: yantramanavlight, Verdana, Geneva, sans-serif; font-size: 1.5em; line-height: 1.7em; text-align: left; margin-bottom: 1.5em; padding-left: 2.5%; }

.col-esq { width: 33%; float: left; margin-top: 2%; }
.col-dir { width: 63%; float: right; margin-top: 2%; }

/* ===== RESPONSIVO ===== */
@media all and (min-width: 1500px) {
  #banner { height: 600px; }
  .aparador-banner { padding: 12% 5.700325732899% 0; }
  #video-bg .slide-content h1, .home-slider .slide-content h1 { font-size: 46px; }
  #video-bg .slide-content p, .home-slider .slide-content p { font-size: 22px; }
}

@media all and (max-width: 1024px) {
  #banner { height: 630px !important; }
  .aparador-banner { padding: 14% 5.70033% 0; }
}

@media all and (max-width: 810px) {
  #banner .esq { float: none; width: 100%; }
  #banner { height: 600px !important; }
  .aparador-banner { padding: 18% 5.70033% 0; }
  #videos { padding: 4.07166% 0 0; }
  #videos #video { float: none; width: 96%; margin: 0 auto; margin-bottom: 6%; }
  #videos #descricao { float: none; padding-right: 0; width: 96%; margin: 0 auto; }
}

@media all and (max-width: 710px) {
  #banner { height: 600px !important; text-align: center; }
  .aparador-banner { padding: 25% 3% 0; }
}

@media all and (max-width: 414px) {
  .aparador-banner { padding: 35% 2% 0; }
  #banner .dir { display: none; }
  #videos { padding: 7% 0 0; }
  #videos h2 { margin-bottom: 2em; }
  #videos #descricao p { font-size: 1.6em; font-family: yantramanavregular, Verdana, Geneva, sans-serif; }
  #videos .linha { display: none; }
  #videos .seta-dir, #videos .seta-esq { display: none; }
  .video-miniaturas { display: none; }
}

@media all and (max-width: 360px) {
  #banner { height: 440px !important; }
}