/*
Theme Name:   Kadence Child — Manuel da Cruz
Theme URI:    https://manueldacruz.com
Description:  Tema-filho do Kadence para o ecossistema manueldacruz.com. Design system da marca (terracota, azul-noite, creme), estilos de alta conversão e componentes reutilizáveis para páginas de venda e captura.
Author:       Manuel da Cruz
Author URI:   https://manueldacruz.com
Template:     kadence
Version:      1.0.0
Text Domain:  kadence-child-manueldacruz
*/

/* =========================================================
   1. DESIGN SYSTEM — variáveis da marca
   Alterar aqui muda o site inteiro de uma vez.
   ========================================================= */
:root {
  /* Cores da marca */
  --mdc-terracota: #C84A1F;
  --mdc-terracota-escuro: #A03A16;
  --mdc-azul-noite: #1A2A40;
  --mdc-azul-noite-claro: #2C4160;
  --mdc-creme: #F5F1EC;
  --mdc-branco: #FFFFFF;
  --mdc-texto: #22252A;
  --mdc-texto-suave: #5A5F66;

  /* Espaçamentos consistentes */
  --mdc-espaco-xs: 0.5rem;
  --mdc-espaco-sm: 1rem;
  --mdc-espaco-md: 2rem;
  --mdc-espaco-lg: 4rem;
  --mdc-espaco-xl: 6rem;

  /* Raio dos cantos */
  --mdc-raio: 10px;
  --mdc-raio-botao: 8px;

  /* Sombra suave para cartões */
  --mdc-sombra: 0 6px 24px rgba(26, 42, 64, 0.10);
}

/* =========================================================
   2. BOTÕES DE CONVERSÃO (CTA)
   Usar a classe .mdc-cta em qualquer botão do Kadence
   (Bloco > Avançado > Classes CSS adicionais: mdc-cta)
   ========================================================= */
.mdc-cta,
.mdc-cta .kt-button,
a.button.mdc-cta {
  background-color: var(--mdc-terracota) !important;
  color: var(--mdc-branco) !important;
  border-radius: var(--mdc-raio-botao);
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 0.9em 2em;
  transition: background-color 0.2s ease, transform 0.15s ease;
}

.mdc-cta:hover,
.mdc-cta .kt-button:hover,
a.button.mdc-cta:hover {
  background-color: var(--mdc-terracota-escuro) !important;
  transform: translateY(-2px);
}

/* =========================================================
   3. HERO COM VÍDEO DE FUNDO
   Estrutura pronta: uma secção com a classe .mdc-hero-video
   recebe um <video> de fundo e o conteúdo fica por cima.
   ========================================================= */
.mdc-hero-video {
  position: relative;
  overflow: hidden;
  color: var(--mdc-branco);
}

.mdc-hero-video .mdc-video-fundo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* Véu escuro por cima do vídeo para o texto ler bem */
.mdc-hero-video::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(26,42,64,0.55) 0%, rgba(26,42,64,0.75) 100%);
  z-index: 1;
}

.mdc-hero-video > *:not(.mdc-video-fundo) {
  position: relative;
  z-index: 2;
}

/* Em telemóveis, esconder o vídeo e usar cor de fundo
   (poupa dados aos visitantes com internet móvel) */
@media (max-width: 767px) {
  .mdc-hero-video .mdc-video-fundo {
    display: none;
  }
  .mdc-hero-video {
    background-color: var(--mdc-azul-noite);
  }
}

/* =========================================================
   4. SECÇÕES E CARTÕES REUTILIZÁVEIS
   ========================================================= */

/* Secção em creme (fundo alternado) */
.mdc-seccao-creme {
  background-color: var(--mdc-creme);
}

/* Secção em azul-noite (contraste forte, ideal para oferta/garantia) */
.mdc-seccao-noite {
  background-color: var(--mdc-azul-noite);
  color: var(--mdc-branco);
}

.mdc-seccao-noite h1,
.mdc-seccao-noite h2,
.mdc-seccao-noite h3 {
  color: var(--mdc-branco);
}

/* Cartão de destaque (benefícios, testemunhos, módulos) */
.mdc-cartao {
  background-color: var(--mdc-branco);
  border-radius: var(--mdc-raio);
  box-shadow: var(--mdc-sombra);
  padding: var(--mdc-espaco-md);
}

/* Destaque de texto no estilo da marca */
.mdc-destaque {
  color: var(--mdc-terracota);
  font-weight: 700;
}

/* =========================================================
   5. RESPEITO POR PREFERÊNCIAS DE ACESSIBILIDADE
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .mdc-cta,
  .mdc-cta .kt-button {
    transition: none;
  }
  .mdc-cta:hover {
    transform: none;
  }
}