/* ==========================================================================
   Ortogyn — folha de estilo do site
   Reconstrucao do WordPress/Elementor em Bootstrap 5.3 + CSS proprio.
   Os valores (cores, tamanhos, espacamentos) vieram do kit do Elementor:
   post-8.css (global), post-73.css (header), post-66.css (rodape),
   post-23.css (home), post-329.css (produtos), post-302.css (produto),
   post-151.css (blog) e post-168.css (post).
   ========================================================================== */

:root {
  /* paleta do kit (--e-global-color-*) */
  --og-dark:        #00444A;  /* petroleo institucional */
  --og-green:       #85CB40;  /* verde da marca */
  --og-green-blog:  #98C453;  /* verde do modulo de blog, levemente diferente */
  --og-text:        #3d4459;
  --og-text-post:   #3E3E3E;
  --og-muted:       rgba(61, 68, 89, .5);

  --og-container:   1140px;
  --og-radius-pill: 50px;

  --og-font:        "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --og-font-blog:   "Varela Round", "Montserrat", sans-serif;

  /* Bootstrap */
  --bs-body-font-family: var(--og-font);
  --bs-body-color: var(--og-text);
  --bs-link-color: var(--og-dark);
  --bs-link-hover-color: var(--og-green);
}

/* ------------------------------------------------------------------ base -- */

body {
  font-family: var(--og-font);
  color: var(--og-text);
  overflow-x: hidden;
}

.container { max-width: var(--og-container); }

a { text-decoration: none; }

img { max-width: 100%; height: auto; }

.og-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1080;
  background: var(--og-dark);
  color: #fff;
  padding: .75rem 1.25rem;
}
.og-skip:focus { left: 0; color: #fff; }

/* Titulo de secao no padrao do site: 3rem/3.5rem, bold, Montserrat. */
.og-title {
  font-family: var(--og-font);
  font-size: 3rem;
  font-weight: 700;
  line-height: 3.5rem;
  color: var(--og-dark);
  margin: 0;
}
.og-title--green { color: var(--og-green); }

.og-lead {
  font-size: 1.3rem;
  font-weight: 400;
  text-align: justify;
  margin: 0;
}
.og-lead--center { text-align: center; }
.og-lead p:last-child { margin-bottom: 0; }

/* Botao pilula verde com texto petroleo — o CTA padrao do site. */
.btn-og {
  --bs-btn-bg: var(--og-green);
  --bs-btn-border-color: var(--og-green);
  --bs-btn-color: var(--og-dark);
  --bs-btn-hover-bg: #76b838;
  --bs-btn-hover-border-color: #76b838;
  --bs-btn-hover-color: var(--og-dark);
  --bs-btn-active-bg: #6aa832;
  --bs-btn-active-border-color: #6aa832;
  --bs-btn-active-color: var(--og-dark);
  border-radius: var(--og-radius-pill);
  font-weight: 700;
  padding: .75rem 2.5rem;
}

.btn-og-dark {
  --bs-btn-bg: var(--og-dark);
  --bs-btn-border-color: var(--og-dark);
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: #00363b;
  --bs-btn-hover-border-color: #00363b;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: #002e32;
  --bs-btn-active-border-color: #002e32;
  border-radius: var(--og-radius-pill);
  font-weight: 600;
}

/* ---------------------------------------------------------------- header -- */

.og-header {
  background: var(--og-dark);
}

.og-header .navbar { padding-top: .5rem; padding-bottom: .5rem; }

.og-header .navbar-brand img {
  width: 100%;
  max-width: 190px;
}

.og-marca { gap: 1.5rem; }

/* "Conforto para toda vida!" — 1.2rem, peso 300, branco. */
.og-tagline {
  font-family: var(--og-font);
  font-size: 1.2rem;
  font-weight: 300;
  color: #fff;
  margin: 0;
  line-height: 1.2;
}

.og-header .nav-link {
  font-family: var(--og-font);
  font-size: 1.1rem;
  font-weight: 600;
  color: #fff;
  padding-inline: .9rem;
}
.og-header .nav-link:hover,
.og-header .nav-link:focus,
.og-header .nav-link.active { color: var(--og-green); }

.og-header .navbar-toggler {
  border: 0;
  color: var(--og-green);
  font-size: 1.6rem;
  line-height: 1;
  padding: .25rem .5rem;
}
.og-header .navbar-toggler:focus { box-shadow: none; }

@media (max-width: 991.98px) {
  .og-header .navbar-collapse {
    background: var(--og-dark);
    padding-block: .5rem;
  }
  .og-header .nav-link { padding-block: .6rem; }
  .og-tagline { font-size: 1rem; }
}

/* ------------------------------------------------------------------ hero -- */

/* O carrossel original e uma faixa de imagens cheias sobre o fundo petroleo:
   uma arte para desktop e outra para mobile, por slide. */
.og-hero {
  background: var(--og-dark);
}
.og-hero .carousel-item img {
  width: 100%;
  display: block;
}
.og-hero .carousel-control-prev,
.og-hero .carousel-control-next { width: 6%; }
.og-hero .carousel-control-prev-icon,
.og-hero .carousel-control-next-icon {
  background-color: var(--og-green);
  border-radius: var(--og-radius-pill);
  padding: 1.15rem;
  background-size: 45%;
}
.og-hero .carousel-indicators [data-bs-target] {
  background-color: var(--og-green);
  border-radius: var(--og-radius-pill);
  width: 10px;
  height: 10px;
}

/* ----------------------------------------------------------------- sobre -- */

.og-sobre { padding-block: 5rem; }

.og-sobre .og-title { text-align: center; }

/* ---------------------------------------------------------- nossa atuacao -- */

/* Uma faixa verde so, com o mapa a esquerda e o texto a direita (container
   6e99d29 do Elementor: min-height 31vh, padding 5rem, flex row). O titulo e
   petroleo e o corpo e branco, ambos sobre o verde. */
.og-atuacao { background: var(--og-dark); }

.og-atuacao-faixa {
  background: var(--og-green);
  min-height: 31vh;
  padding-block: 5rem;
}
.og-atuacao-faixa img { max-width: 420px; }
.og-atuacao-faixa .og-title { color: var(--og-dark); }
.og-atuacao-faixa .og-lead { color: #fff; }

.og-atuacao-cta {
  background: var(--og-dark);
  padding-block: 3rem 5rem;
  text-align: center;
}
.og-atuacao-cta .btn-og { font-size: 2rem; }

@media (max-width: 767.98px) {
  .og-atuacao-cta .btn-og { font-size: 1.25rem; padding-inline: 1.75rem; }
}

/* ------------------------------------------------------------- parcerias -- */

.og-parcerias { padding-block: 12rem 5rem; }

.og-parcerias .og-title { text-align: center; color: var(--og-green); }

.og-parcerias-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 5rem;
  margin-top: 4rem;
}
.og-parcerias-grid img {
  max-height: 80px;
  max-width: 200px;
  width: auto;
  object-fit: contain;
}

@media (max-width: 767.98px) {
  .og-parcerias { padding-block: 5rem 3rem; }
  .og-parcerias-grid { gap: 2.5rem; }
  .og-parcerias-grid img { max-height: 48px; }
}

/* --------------------------------------------------------- profissionais -- */

/* Duas colunas: texto no petroleo a esquerda, foto sangrando a direita. */
.og-profissionais {
  background: var(--og-dark);
  min-height: 61vh;
}
.og-profissionais .og-prof-texto { padding: 5rem; }
.og-profissionais h2 {
  font-size: 2rem;
  font-weight: 700;
  line-height: 2.2rem;
  color: var(--og-green);
  max-width: 73.444%;
}
.og-profissionais .og-lead { color: #fff; max-width: 65%; }
.og-profissionais .og-prof-foto {
  background-image: url('/uploads/2024/04/Medico-ortopedista-2048x1365-2.png');
  background-size: cover;
  background-position: center;
  min-height: 61vh;
}

@media (max-width: 991.98px) {
  .og-profissionais .og-prof-texto { padding: 3rem 2rem; }
  .og-profissionais h2,
  .og-profissionais .og-lead { max-width: 100%; }
  .og-profissionais .og-prof-foto { min-height: 45vh; }
}

/* ----------------------------------------------------- ultimas novidades -- */

.og-novidades { padding-block: 5rem; }

/* "Blog - Ortogyn" vem numa pilula verde. */
.og-badge-blog {
  display: inline-block;
  background: var(--og-green);
  border-radius: var(--og-radius-pill);
  color: var(--og-dark);
  font-size: 25px;
  font-weight: 700;
  line-height: 3.5rem;
  padding: 0 1.75rem;
  text-align: center;
  min-width: 258px;
}

.og-card-post {
  height: 100%;
  border: 0;
  background: transparent;
}
.og-card-post img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 10px;
}
.og-card-post h3 {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--og-dark);
  margin-top: 1rem;
}
.og-card-post p {
  font-size: 1rem;
  color: var(--og-text);
}

/* Setas do carrossel de posts, no mesmo desenho do Elementor. */
.og-swiper-nav {
  --bs-btn-bg: var(--og-green);
  --bs-btn-border-color: var(--og-green);
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: var(--og-green);
  --bs-btn-hover-border-color: var(--og-green);
  --bs-btn-hover-color: #fff;
  border-radius: var(--og-radius-pill);
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

/* --------------------------------------------------------------- contato -- */

.og-contato { padding: 5rem; }
.og-contato .og-title { text-align: center; }
.og-contato .og-lead { text-align: center; max-width: 63%; margin-inline: auto; }

.og-form { max-width: 47.626%; margin-inline: auto; width: 100%; }

.og-form .form-control,
.og-form .form-select {
  border-radius: var(--og-radius-pill);
  background: #fff;
  color: var(--og-green);
  font-size: 1rem;
  padding: .75rem 1.5rem;
}
.og-form textarea.form-control { border-radius: 1.5rem; }
.og-form .form-control::placeholder { color: var(--og-green); opacity: .85; }
.og-form .form-control:focus,
.og-form .form-select:focus {
  border-color: var(--og-green);
  box-shadow: 0 0 0 .2rem rgba(133, 203, 64, .25);
}
.og-form label { color: var(--og-dark); font-size: 1rem; }
.og-form .form-check-label { font-size: .95rem; }
.og-form .btn[type="submit"] {
  font-size: 1.5rem;
  font-weight: 500;
  border-radius: var(--og-radius-pill);
  padding-inline: 3rem;
}
.og-form .btn[type="submit"]:hover { color: #fff; }

@media (max-width: 991.98px) {
  .og-contato { padding: 3rem 1.5rem; }
  .og-contato .og-lead,
  .og-form { max-width: 100%; }
}

/* --------------------------------------------------------------- rodape -- */

.og-footer {
  background: var(--og-dark);
  padding: 5rem;
  color: #fff;
}
.og-footer a { color: #fff; }
.og-footer a:hover { color: var(--og-green); }
.og-footer .og-footer-contatos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 38px;
  font-size: 1.3rem;
  font-weight: 400;
  list-style: none;
  padding: 0;
  margin: 0;
}
.og-footer .og-footer-contatos i {
  color: var(--og-green);
  font-size: 32px;
  vertical-align: middle;
  margin-right: .5rem;
}
.og-footer .og-footer-logo { max-width: 231px; }

@media (max-width: 767.98px) {
  .og-footer { padding: 5rem 2rem; text-align: center; }
  .og-footer .og-footer-contatos { font-size: 1rem; gap: 1.25rem; }
  .og-footer .og-footer-contatos i { font-size: 18px; }
}

/* -------------------------------------------------------------- produtos -- */

.og-produtos { padding-block: 5rem; }
.og-produtos .og-title { text-align: center; color: var(--og-green); }

.og-card-produto {
  display: block;
  height: 100%;
  text-align: center;
  color: var(--og-dark);
}
.og-card-produto img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: #fff;
  border-radius: 10px;
}
.og-card-produto span {
  display: block;
  margin-top: .75rem;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.35;
}
.og-card-produto:hover { color: var(--og-green); }

.og-paginacao .page-link {
  color: var(--og-dark);
  border-radius: var(--og-radius-pill);
  margin-inline: .2rem;
  border: 0;
}
.og-paginacao .active .page-link {
  background: var(--og-green);
  color: var(--og-dark);
}

/* ------------------------------------------------------- produto (single) -- */

.og-produto { padding: 5rem; }

.og-produto-foto img { border-radius: 10px; width: 100%; }

.og-produto-galeria {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .75rem;
  margin-top: 1rem;
}
.og-produto-galeria img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 10px;
  cursor: pointer;
}

.og-produto h1 {
  font-size: 2rem;
  font-weight: 700;
  line-height: 2rem;
  color: var(--og-green);
  text-align: center;
}
.og-produto-conteudo {
  text-align: justify;
  color: var(--og-dark);
  font-size: 1.3rem;
  font-weight: 400;
}

@media (max-width: 991.98px) {
  .og-produto { padding: 3rem 1.25rem; }
}

/* ----------------------------------------------------------- pagina base -- */

/* Cabecalho verde com textura, usado por blog, post e paginas internas. */
.og-hero-interno {
  background-color: var(--og-green);
  position: relative;
  padding: 6rem;
  text-align: center;
}
.og-hero-interno::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('/uploads/2024/04/Post-BG.png');
  background-size: cover;
  background-position: center;
  opacity: .5;
}
.og-hero-interno > * { position: relative; }
.og-hero-interno h1,
.og-hero-interno h2 {
  font-family: var(--og-font-blog);
  font-size: 45px;
  font-weight: 300;
  line-height: 1.2em;
  color: #fff;
  margin: 0;
}
.og-hero-interno .og-post-meta {
  font-family: var(--og-font);
  font-size: 16px;
  font-weight: 300;
  color: #fff;
  margin-top: 1rem;
}
.og-hero-interno .og-post-meta a { color: #fff; }

@media (max-width: 767.98px) {
  .og-hero-interno { padding: 3rem 1.5rem; }
  .og-hero-interno h1,
  .og-hero-interno h2 { font-size: 30px; }
}

/* Conteudo corrido das paginas institucionais (politica de privacidade). */
.og-conteudo {
  padding-block: 4rem;
  color: var(--og-text-post);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.6em;
  text-align: justify;
}
.og-conteudo h2,
.og-conteudo h3 {
  font-family: var(--og-font-blog);
  color: var(--og-green-blog);
  font-weight: 300;
  margin-top: 2rem;
}
.og-conteudo h2 { font-size: 26px; }
.og-conteudo h3 { font-size: 20px; }
.og-conteudo img { border-radius: 10px; }

/* ------------------------------------------------------------ newsletter -- */

.og-newsletter {
  background: var(--og-green);
  padding-block: 3rem;
}
.og-newsletter .og-title { color: var(--og-dark); text-align: center; }
.og-newsletter label,
.og-newsletter .form-check-label { color: #fff; }
.og-newsletter .form-control { border-radius: var(--og-radius-pill); }
.og-newsletter .btn[type="submit"] {
  background: var(--og-dark);
  border-color: var(--og-dark);
  color: #fff;
  border-radius: var(--og-radius-pill);
  font-weight: 600;
  padding-inline: 2.5rem;
}
.og-newsletter .btn[type="submit"]:hover { background: #00363b; color: #fff; }

/* --------------------------------------------------------------- alertas -- */

.og-alerta { border-radius: 1rem; }

/* --------------------------------------------------------------- whatsapp -- */

/* Botao flutuante. No site original o widget existia mas estava oculto em
   todos os breakpoints; aqui ele e controlado por OG_WHATSAPP em includes/dados.php. */
.og-whatsapp {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 1030;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .2);
}
.og-whatsapp:hover { color: #fff; background: #1ebe5b; }

/* ------------------------------------------------------------- honeypot -- */

/* Campo-isca dos formularios: invisivel para gente, preenchido por robo. */
.og-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}