/* =========================
   Styles para Landing Page
   ========================= */

/* -------- Variáveis -------- */
:root{
  --bg-dark: #0b1a2b;
  --bg-soft-1: #0f2440;
  --primary: #ff6a3d;
  --primary-600:#ff5a28;
  --accent:#15d1ff;
  --glass-bg: rgba(255,255,255,.08);
  --glass-brd: rgba(255,255,255,.22);
  --text-75: rgba(255,255,255,.75);
}

/* -------- Base -------- */
body{
  background: radial-gradient(1200px 600px at 10% -10%, #1c4270 0%, transparent 60%),
              radial-gradient(1000px 500px at 100% 10%, #2c6b96 0%, transparent 55%),
              var(--bg-dark);
  color:#fff;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,h2,h3,h4,h5{letter-spacing:.2px}
.lead{color:var(--text-75)}
.text-white-75{color:var(--text-75) !important}

/* -------- Glassmorphism -------- */
.glass{
  background: var(--glass-bg);
  border:1px solid var(--glass-brd);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 8px 40px rgba(0,0,0,.35);
}
.glass-nav{
  background: linear-gradient(0deg, rgba(0,0,0,.25), rgba(0,0,0,.25));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

/* -------- Sombras & animações -------- */
.shadow-xxl{box-shadow:0 24px 80px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.04)}
.float-anim{animation:float 6s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* -------- Botões -------- */
.btn-primary-glass{
  --bs-btn-color:#fff;
  --bs-btn-bg: linear-gradient(90deg, var(--primary), var(--accent));
  --bs-btn-border-color: transparent;
  --bs-btn-hover-bg: linear-gradient(90deg, var(--primary-600), var(--accent));
  --bs-btn-hover-border-color: transparent;
  --bs-btn-shadow: 0 10px 25px rgba(21,209,255,.25);
  border:0;
  box-shadow: var(--bs-btn-shadow);
}
.btn-accent{
  background: var(--accent);
  color:#062335
}
.btn-accent:hover{filter:brightness(.95); color:#062335}

/* -------- Hero -------- */
.hero-section{
  padding-top: 6.75rem; /* compensar navbar fixa */
  padding-bottom: 3rem;
}
.hero-image{
  border:1px solid rgba(255,255,255,.15);
}
.text-gradient{
  background: linear-gradient(180deg, #ffffff, #b9e7ff 80%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* Gradiente de fundo suave para hero */
.gradient-spot{
  position:relative;
  isolation:isolate;
}
.gradient-spot::before{
  content:"";
  position:absolute; inset:-5% -10% auto -10%;
  /* height:70%; */
  background: radial-gradient(600px 400px at 20% 10%, rgba(21,209,255,.35), transparent 60%),
              radial-gradient(500px 350px at 90% 0%, rgba(255,106,61,.35), transparent 55%);
  filter: blur(20px);
  z-index:-1;
}

/* Onda separadora */
.wave-sep{margin-top:2rem}

/* -------- Seções -------- */
.section-pad{padding:5rem 0}
.bg-gradient-soft{
  background: linear-gradient(160deg, #2c6b96 0%, #582088 60%, #0b1a2b 100%);
}
.bg-gradient-dark{
  background: linear-gradient(180deg, var(--bg-soft-1), #081520 70%);
}

/* -------- Funcionalidades -------- */
.feature{
  transition: transform .25s ease, box-shadow .25s ease;
}
.feature:hover{
  transform: translateY(-6px);
  box-shadow:0 28px 80px rgba(0,0,0,.55);
}
.feature i{color:var(--accent); text-shadow:0 4px 18px rgba(21,209,255,.4)}

/* -------- Carrossel -------- */
.carousel .carousel-item{
  min-height: 280px;
}
.carousel-indicators [data-bs-target]{
  width:10px;height:10px;border-radius:50%;
}
.carousel-control-prev-icon,
.carousel-control-next-icon{
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.45));
}

/* -------- Form -------- */
.form-control, .form-select{
  background-color: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.25);
  color:#fff;
}
.form-control:focus{
  background-color: rgba(255,255,255,.06);
  border-color: var(--accent);
  box-shadow: 0 0 0 .2rem rgba(21,209,255,.25);
}
.form-label{color:#e9f6ff}

/* -------- Footer -------- */
footer .social{font-size:1.2rem; opacity:.9}
footer .social:hover{opacity:1; transform:translateY(-1px)}

/* -------- Helpers -------- */
.fw-extrabold{font-weight:800}

/* -------- Responsividade -------- */
@media (max-width: 991.98px){
  .section-pad{padding:3.75rem 0}
  .hero-section{padding-top:6rem}
}
@media (prefers-reduced-motion:no-preference){
  a, .btn, .feature{transition: all .25s ease}
}


/* Contraste para seções claras */
.section-contrast-light,
.section-contrast-light *:not(.btn):not(.text-success):not(.text-danger):not(.text-warning){
  color:#0b1a2b !important;
}

.section-contrast-light .text-dark-emphasis{ color:#24374f !important; }
.section-contrast-light .btn-primary{
  background-color:#2c6b96;
  border-color:#2c6b96;
}
.section-contrast-light .btn-primary:hover{
  filter:brightness(.95);
}

/* ===== Apresentação aprimorada para vídeos gravados em pé (portrait) ===== */
.video-portrait-wrap{
  position: relative;
  min-height: 40vh;
  max-height: 82vh;
  display: grid;
  place-items: center;
  padding: clamp(12px, 2vw, 20px);
  background:
    linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.55)) ,
    radial-gradient(1200px 400px at 50% 0%, rgba(255,255,255,.06), transparent 70%);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 18px 70px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06);
}

/* Mantém o vídeo em 9:16, centralizado e grande sem cortar */
.video-portrait{
  width: auto;
  height: min(78vh, 90dvh);
  max-height: 100%;
  max-width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: contain;         /* evita cortes; barras laterais controladas pelo wrap */
  background: #0b1a2b;         /* “letterbox” discreto atrás do vídeo */
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 10px 40px rgba(0,0,0,.45);
}

/* Em telas menores, reduz um pouco a altura máxima */
@media (max-width: 576px){
  .video-portrait{ height: 68vh; border-radius: 14px; }
}

/* ===== Contraste para seção de planos em fundo claro ===== */
.section-contrast-light,
.section-contrast-light *:not(.btn):not(.text-success):not(.text-danger):not(.text-warning){
  color:#0b1a2b !important;
}

.section-contrast-light .text-dark-emphasis{ color:#2b3c51 !important; }

/* Variação de glass mais clara para ler bem em bg-light */
.glass-light{
  background: rgba(255,255,255,.75);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(0,0,0,.06);
}

/* Indicadores e controles visíveis sobre fundo claro */
#carouselPlanos .carousel-indicators [data-bs-target]{
  background-color:#2b3c51;
}
#carouselPlanos .carousel-control-prev-icon,
#carouselPlanos .carousel-control-next-icon{
  filter:none;
  background-color: rgba(0,0,0,.35);
  border-radius:50%;
  padding:12px;
}

/* Espaço e hover suave */
#carouselPlanos .carousel-item{
  transition: transform .3s ease;
}
#carouselPlanos .carousel-item:hover{
  transform: translateY(-4px);
}

/* ===== Planos (grid sem carrossel) ===== */
.glass-light{
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(0,0,0,.06);
}
.plan-card{
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  border-radius: 1rem;
}
.plan-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 28px 90px rgba(0,0,0,.18);
  border-color: rgba(44,107,150,.25);
}
.plan-featured{
  outline: 2px solid rgba(21,209,255,.35);
  box-shadow: 0 30px 100px rgba(21,209,255,.15);
}
.plan-price{
  line-height: 1.1;
}


/* ===== Efeito no botão "Enviar pelo WhatsApp" ===== */
.btn-whats{
  position: relative;
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
  box-shadow: 0 10px 25px rgba(21,209,255,.18);
}

/* brilho verde + leve elevação */
.btn-whats:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(37,211,102,.35), inset 0 0 0 999px rgba(255,255,255,0); /* mantém gradiente original */
}

/* “shine” varrendo o botão */
.btn-whats::after{
  content:"";
  position:absolute;
  top:-25%;
  left:-30%;
  width:35%;
  height:150%;
  transform:skewX(-25deg) translateX(-120%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  transition: transform .6s ease;
  pointer-events:none;
}
.btn-whats:hover::after{
  transform:skewX(-25deg) translateX(420%);
}

/* animação sutil no ícone */
.btn-whats i{
  transition: transform .25s ease;
}
.btn-whats:hover i{
  transform: scale(1.15) rotate(-6deg);
}

/* foco visível para acessibilidade */
.btn-whats:focus-visible{
  outline: 3px solid rgba(37,211,102,.8);
  outline-offset: 2px;
}

/* ===== Placeholders claros em campos sobre fundo escuro ===== */
/* Escopo recomendado: seções escuras como #contratar ou .bg-gradient-dark */
#contratar .form-control::placeholder,
.bg-gradient-dark .form-control::placeholder,
#contratar textarea::placeholder,
.bg-gradient-dark textarea::placeholder{
  color: rgba(255,255,255,.75) !important; /* branco com leve transparência */
  opacity: 1; /* garante visibilidade em alguns browsers */
}

/* Em foco mantém contraste */
#contratar .form-control:focus::placeholder,
.bg-gradient-dark .form-control:focus::placeholder,
#contratar textarea:focus::placeholder,
.bg-gradient-dark textarea:focus::placeholder{
  color: rgba(255,255,255,.6) !important;
}

/* Cursor branco para combinar com fundo escuro */
#contratar .form-control,
.bg-gradient-dark .form-control,
#contratar textarea,
.bg-gradient-dark textarea{
  caret-color: #fff;
}

/* Compatibilidade adicional (Edge legado/IE) */
#contratar .form-control:-ms-input-placeholder,
.bg-gradient-dark .form-control:-ms-input-placeholder,
#contratar textarea:-ms-input-placeholder,
.bg-gradient-dark textarea:-ms-input-placeholder{
  color: rgba(255,255,255,.75) !important;
}
#contratar .form-control::-ms-input-placeholder,
.bg-gradient-dark .form-control::-ms-input-placeholder,
#contratar textarea::-ms-input-placeholder,
.bg-gradient-dark textarea::-ms-input-placeholder{
  color: rgba(255,255,255,.75) !important;
}

/* Opcional: classe utilitária para usar em qualquer container escuro */
.placeholder-light .form-control::placeholder,
.placeholder-light textarea::placeholder{
  color: rgba(255,255,255,.75) !important;
}
.placeholder-light .form-control:focus::placeholder,
.placeholder-light textarea:focus::placeholder{
  color: rgba(255,255,255,.6) !important;
}

/* ===== Texto dos inputs em branco em áreas escuras ===== */
#contratar .form-control,
.bg-gradient-dark .form-control,
#contratar .form-select,
.bg-gradient-dark .form-select,
#contratar textarea,
.bg-gradient-dark textarea {
  color: #fff !important;       /* texto digitado */
  caret-color: #fff;            /* cor do cursor */
}

/* Placeholders (mantém do ajuste anterior) */
#contratar .form-control::placeholder,
.bg-gradient-dark .form-control::placeholder,
#contratar textarea::placeholder,
.bg-gradient-dark textarea::placeholder {
  color: rgba(255,255,255,.75) !important;
  opacity: 1;
}
#contratar .form-control:focus::placeholder,
.bg-gradient-dark .form-control:focus::placeholder,
#contratar textarea:focus::placeholder,
.bg-gradient-dark textarea:focus::placeholder {
  color: rgba(255,255,255,.6) !important;
}

/* Corrige autofill do Chrome (evita texto amarelo/preto) */
#contratar input:-webkit-autofill,
#contratar textarea:-webkit-autofill,
#contratar select:-webkit-autofill,
.bg-gradient-dark input:-webkit-autofill,
.bg-gradient-dark textarea:-webkit-autofill,
.bg-gradient-dark select:-webkit-autofill {
  -webkit-text-fill-color: #fff;
  transition: background-color 9999s ease-out 0s; /* hack para manter o bg do tema */
  box-shadow: 0 0 0px 1000px rgba(255,255,255,0.06) inset; /* harmoniza com bg escuro translúcido */
}

/* Indicador do date/time picker visível em fundo escuro (opcional) */
#contratar input[type="date"]::-webkit-calendar-picker-indicator,
#contratar input[type="time"]::-webkit-calendar-picker-indicator,
.bg-gradient-dark input[type="date"]::-webkit-calendar-picker-indicator,
.bg-gradient-dark input[type="time"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
}


/* ===== Logo E-Treinare no rodapé ===== */
.footer-brand img{
  width:113px;           /* garante as dimensões pedidas */
  height:30px;
  object-fit:contain;
  display:block;
  opacity:.9;            /* integra melhor com o bg escuro */
  transition: opacity .2s ease, transform .2s ease, filter .2s ease;
}

/* Hover sutil no logo */
.footer-brand:hover img{
  opacity:1;
  transform: translateY(-1px);
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.35));
}

/* Caso seu logo seja escuro, você pode inverter para o footer escuro (opcional) */
/* .footer-brand img { filter: invert(1) brightness(1.1); } */

/* ===== Logo E-Treinare no rodapé ===== */
.footer-brand img{
  width:113px;
  height:30px;
  object-fit:contain;
  display:block;
  opacity:.9;
  transition: opacity .2s ease, transform .2s ease, filter .2s ease;
}
.footer-brand:hover img{
  opacity:1;
  transform: translateY(-1px);
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.35));
}

/* ===== Footer — alinhamento texto + logo na mesma linha ===== */
/* Força layout em linha no bloco direito do rodapé em telas médias+ */
@media (min-width: 768px){
  footer .col-md-6.text-md-end{
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    gap: .75rem;           /* espaço entre itens */
    flex-wrap: nowrap;     /* mantém na mesma linha */
  }
}

/* Em telas pequenas, mantém à esquerda e em linha também */
@media (max-width: 767.98px){
  footer .col-md-6.text-md-end{
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    gap: .5rem;
    flex-wrap: nowrap;
  }
}

/* Evita quebra entre as palavras "Uma solução da" */
footer .col-md-6.text-md-end > .small.text-white-75{
  white-space: nowrap;
  line-height: 1;          /* alinha verticalmente com o logo */
}

/* Link do logo como inline-flex para centralizar verticalmente a imagem */
footer .footer-brand{
  display: inline-flex;
  align-items: center;
  line-height: 0;          /* remove espaço extra abaixo da imagem */
  flex-shrink: 0;          /* impede o logo de encolher */
}

/* Dimensões do logo — 113x30px */
footer .footer-brand img{
  width: 113px;
  height: 30px;
  object-fit: contain;
  display: block;
  opacity: .9;
  transition: opacity .2s ease, transform .2s ease, filter .2s ease;
}

/* Hover sutil no logo */
footer .footer-brand:hover img{
  opacity: 1;
  transform: translateY(-1px);
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.35));
}

/* Grupo de ícones sociais mantém-se em linha e não encolhe */
footer .col-md-6.text-md-end > span.d-inline-flex{
  flex-shrink: 0;
}

/* Ícones sociais: leve hover */
footer .social{
  font-size: 1.2rem;
  opacity: .9;
  transition: opacity .2s ease, transform .2s ease;
}
footer .social:hover{
  opacity: 1;
  transform: translateY(-1px);
}

/* --- Limpeza de duplicatas do seu CSS atual (opcional, para evitar conflitos) --- */
/* Remova entradas repetidas de ".footer-brand img" no arquivo original e mantenha apenas a acima. */

/* Deixa o logo em preto e branco e transforma o preto em branco (ideal para fundo escuro) */
footer .footer-brand img{
  /* 1) remove cores  2) zera luminosidade (tudo preto)  3) inverte (vira tudo branco) */
  filter: grayscale(1) brightness(0) invert(1);
  /* ajustes finos para nitidez das bordas */
  image-rendering: -webkit-optimize-contrast;
  -webkit-font-smoothing: antialiased;
}

/* Opcional: no hover, reduza levemente o “branco total” para destacar */
footer .footer-brand:hover img{
  filter: grayscale(1) brightness(0.1) invert(1) contrast(1.05);
}


/* Garante ícones brancos dentro de botões primários (fallback) */
.btn.btn-primary .fa,
.btn.btn-primary .fa-solid,
.btn.btn-primary .fa-regular,
.btn.btn-primary .fa-brands,
i.fa-solid.fa-play.me-2.text-white{
  color: #fff !important;
}