/*
 Theme Name:   Hello Elementor Child
 Theme URI:    https://ocontraturno.com.br
 Description:  Tema filho do Hello Elementor para O Contraturno
 Author:       O Contraturno
 Template:     hello-elementor
 Version:      1.2.5
 License:      GNU General Public License v3 or later
 Text Domain:  hello-elementor-child
*/

/* ── Fundo global do site — intencional.
   Antes vinha de um body{background:#f0ecff} que VAZAVA do snippet da
   Lousa Matemática (removido no saneamento C1). Mantido aqui de propósito. */
body {
  /* !important: o kit do Elementor (body.elementor-kit-7) define branco com
     especificidade maior; o vazamento antigo vencia por ordem no documento */
  background-color: #f0ecff !important;
}

/* =====================================================
   CORRECOES CSS - O Contraturno Landing
   Aplicado: 2026-06-30
   ===================================================== */

/* [1] Remover text-align: justify do texto corrido (landing page)
   Elementos: 43c18b51, 36c67d13, 7c15a31f          */
.elementor-element-43c18b51,
.elementor-element-36c67d13,
.elementor-element-7c15a31f {
  text-align: left !important;
}

/* [4] Normalizar border-radius de badges (10/11px -> 12px)
   Elementos: 1da61c3c, 16fe813f, 64515c52           */
.elementor-element-1da61c3c,
.elementor-element-16fe813f,
.elementor-element-64515c52 {
  border-radius: 12px !important;
}

/* [5] Aumentar icone de fechar video (10px -> 14px) */
.mfp-close.ekit-video-popup-close {
  font-size: 14px !important;
}
.mfp-close.ekit-video-popup-close svg {
  width: 14px !important;
  height: 14px !important;
}

/* [6] Corrigir cor #361869 -> #331869 (secundaria do sistema)
   Elemento: 58a92e1 (icon box)                     */
.elementor-element-58a92e1.elementor-view-stacked .elementor-icon {
  background-color: #331869 !important;
  fill: #FFFFFF !important;
  color: #FFFFFF !important;
}
.elementor-element-58a92e1.elementor-view-framed .elementor-icon,
.elementor-element-58a92e1.elementor-view-default .elementor-icon {
  fill: #331869 !important;
  color: #331869 !important;
  border-color: #331869 !important;
}

/* [7] Hero H1: ancorar na variavel display do kit (61px)
   Elemento: 6345f3d3                               */
.elementor-element-6345f3d3 .elementor-heading-title {
  font-size: var(--e-global-typography-a435f28-font-size, 61px) !important;
  letter-spacing: var(--e-global-typography-a435f28-letter-spacing, -1px) !important;
  line-height: var(--e-global-typography-a435f28-line-height, 1.2em) !important;
}

/* =====================================================
   CORRECOES CSS - Sobre Nos (post-29)
   Aplicado: 2026-07-01
   ===================================================== */

/* [S1] Hero Sobre Nos: reduzir padding excessivo (7em -> 3em)
   Elemento: 2fe2b722                               */
.elementor-29 .elementor-element.elementor-element-2fe2b722 {
  --padding-top: 3em !important;
  --padding-bottom: 3em !important;
  padding-top: 3em !important;
  padding-bottom: 3em !important;
}

/* [S2] Corrigir text-align justify em "Conheca nosso projeto"
   Elemento: 1f12983d (regra no proprio elemento, nao no filho) */
.elementor-element-1f12983d {
  text-align: left !important;
}

/* [S4] Reduzir gap interno da secao "Conheca nosso projeto" (7em -> 4em)
   Elemento: 29ef3804                               */
.elementor-29 .elementor-element.elementor-element-29ef3804 {
  --padding-top: 4em !important;
  --padding-bottom: 4em !important;
  padding-top: 4em !important;
  padding-bottom: 4em !important;
}

/* =====================================================
   CORRECOES CSS - Fale Conosco (post-82)
   Aplicado: 2026-07-01
   ===================================================== */

/* [F1] Hero Fale Conosco: reduzir padding excessivo (7em -> 3em)
   Elemento: cc0a00e                                */
.elementor-82 .elementor-element.elementor-element-cc0a00e {
  --padding-top: 3em !important;
  --padding-bottom: 3em !important;
  padding-top: 3em !important;
  padding-bottom: 3em !important;
}

/* [F2] Corrigir text-align justify em Fale Conosco
   Elemento: 1d08c253 (regra no proprio elemento)   */
.elementor-element-1d08c253 {
  text-align: left !important;
}

/* =====================================================
   TAREFA 3 - MELHORIAS CSS (2026-07-01)
   ===================================================== */

/* [3a] Fileira de Δ decorativa entre secoes — posicionada absolutamente, sem afetar layout
   Cada secao tem cor propria (branco na roxa, roxo na clara).
   Fade horizontal via mask-image. */
.elementor-element-59c554f8 > .e-con-inner,
.elementor-element-429384d4 > .e-con-inner {
  position: relative;
}
.elementor-element-59c554f8 > .e-con-inner::before,
.elementor-element-429384d4 > .e-con-inner::before {
  content: '\394  \394  \394  \394  \394  \394  \394  \394  \394  \394  \394';
  position: absolute;
  top: 10px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 11px;
  letter-spacing: 22px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  pointer-events: none;
  user-select: none;
  /* Fade nas bordas via mask */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 20%, black 80%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, black 20%, black 80%, transparent 100%);
}
/* Secao roxa (gradiente lavanda→roxo) — Δ em branco */
.elementor-element-59c554f8 > .e-con-inner::before {
  color: rgba(255, 255, 255, 0.35);
}
/* Secao clara — Δ em roxo */
.elementor-element-429384d4 > .e-con-inner::before {
  color: rgba(108, 53, 222, 0.28);
}

/* [3b] Revertido — tipografia de enfase removida a pedido do usuario */

/* [3c] Caderninho - borda superior + fundo diferenciado */
.elementor-element-7596ba3c {
  border-top: 3px solid rgba(121, 88, 215, 0.2) !important;
  background-color: var(--e-global-color-7fbea4f, #F1F0F5) !important;
}

/* [3c] Badge "Experimente agora" removido — renderizava dentro do h2, visual ruim */

/* [3d] Textura matematica na landing page - bg2.png da Sobre Nos
   Aplicada na secao "Material exclusivo" (7766870e) como overlay decorativo */
.elementor-element-7766870e {
  position: relative;
  overflow: hidden;
}
.elementor-element-7766870e::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background-image: url('/wp-content/uploads/2025/02/bg2.png');
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 300px auto;
  opacity: 0.2;
  pointer-events: none;
  z-index: 0;
}

/* [3e] Hierarquia visual dos cards de pacote (Basico / Premium / Completo) */
.elementor-element-0cd405b {
  opacity: 0.82;
  transition: opacity 0.25s ease;
}
.elementor-element-0cd405b:hover {
  opacity: 1;
}
.elementor-element-b321df1 {
  box-shadow: 0 12px 40px rgba(121, 88, 215, 0.22) !important;
  transform: translateY(-6px);
  position: relative;
  z-index: 1;
}
.elementor-element-8672ac4 {
  border: 2px solid rgba(255, 124, 62, 0.45) !important;
}

/* [3f] Responsividade mobile (<= 480px) - 3 correcoes prioritarias */
@media (max-width: 480px) {
  /* [3f-1] Hero H1: tamanho adequado para 375px */
  .elementor-element-6345f3d3 .elementor-heading-title {
    font-size: 36px !important;
    letter-spacing: -0.5px !important;
    text-decoration: none !important;
  }
  /* [3f-2] Card Premium: cancelar elevacao em mobile */
  .elementor-element-b321df1 {
    transform: none !important;
    margin-bottom: 1em;
  }
  /* [3f-3] Delta decorativo: ajustar para mobile */
  .elementor-element-59c554f8 > .e-con-inner::before,
  .elementor-element-429384d4 > .e-con-inner::before {
    font-size: 9px;
    letter-spacing: 12px;
  }
}

/* =====================================================
   ACOES CSS - 2026-07-01 (sessao 4 tarefas)
   ===================================================== */

/* [Acao 2] Fileira de delta no OCONTRTURNO: acompanhamento matematico
   Elemento: a12fea4 — fundo claro, delta em roxo.
   NOTA: sem position:relative no .e-con-inner de propósito — ele virava o
   containing block da decoração ocmathdec e prendia fórmulas+grid aos
   1280px do conteúdo; o ::before abaixo ancora no a12fea4 (full-bleed). */
.elementor-element-a12fea4 > .e-con-inner::before {
  content: 'Δ  Δ  Δ  Δ  Δ  Δ  Δ  Δ  Δ  Δ  Δ';
  position: absolute;
  top: 10px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 11px;
  letter-spacing: 22px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  color: rgba(108, 53, 222, 0.28);
  pointer-events: none;
  user-select: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 20%, black 80%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, black 20%, black 80%, transparent 100%);
}

/* [Acao 3] Brilho na borda laranja do pacote Completo (8672ac4)
   Reforca o border + adiciona box-shadow glow laranja */
.elementor-element-8672ac4 {
  border: 2px solid rgba(255, 124, 62, 0.75) !important;
  box-shadow: 0 0 0 1px rgba(255, 124, 62, 0.18), 0 0 22px rgba(255, 124, 62, 0.20), 0 8px 32px rgba(255, 124, 62, 0.10) !important;
}

/* Mobile: remover glow em telas pequenas para nao poluir */
@media (max-width: 480px) {
  .elementor-element-8672ac4 {
    box-shadow: 0 0 12px rgba(255, 124, 62, 0.18) !important;
  }
  .elementor-element-a12fea4 > .e-con-inner::before {
    font-size: 9px;
    letter-spacing: 12px;
  }
}
/* (bloco '::before Δ row' removido — nunca renderizou; a fileira do topo
   vem do .e-con-inner::before da [Acao 2] acima) */

/* Orange glow — Completo (pacotes page) */
.elementor-element-1d325c3 {
  border: 2px solid rgba(255, 124, 62, 0.75) !important;
  box-shadow: 0 0 0 1px rgba(255,124,62,.18), 0 0 22px rgba(255,124,62,.20), 0 8px 32px rgba(255,124,62,.10) !important;
}

/* Mobile: carrossel centrado na coluna (a antiga tentativa de full-bleed
   com margin-left:calc(50% - 50vw) só deslocava o bloco à esquerda) */
@media (max-width: 767px) {
  .elementor-element-5aced8f {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* Carousel: fix column margin and stretch */
.elementor-element-5aced8f {
  align-self: stretch !important;
  width: 100% !important;
}
.elementor-element-5aced8f .elementor-widget-container {
  width: 100% !important;
  overflow: visible;
}
.elementor-element-76721862,
.elementor-element-7596ba3c {
  overflow: visible !important;
}
/* On tablet+mobile: remove column offset margin so carousel fills width */
@media (max-width: 1024px) {
  .elementor-element-76721862 {
    margin-left: 0 !important;
    width: 100% !important;
  }
}

/* Force carousel buttons transparent — override theme button styles */
.elementor-element-5aced8f button,
.elementor-element-5aced8f .oc-btn {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
  color: #6c35de !important;
  border: 1.5px solid rgba(108,53,222,.28) !important;
  border-radius: 50% !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 36px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  line-height: 0 !important;
  font-size: 0 !important;
}
.elementor-element-5aced8f .oc-btn:hover {
  background: rgba(108,53,222,.09) !important;
  border-color: rgba(108,53,222,.55) !important;
}
.elementor-element-5aced8f .oc-btn svg {
  display: block !important;
  flex-shrink: 0 !important;
  overflow: visible !important;
}

/* === HERO VIDEO SECTION REDESIGN v2 === */

/* Excalifont — self-hosted Virgil (Excalidraw handwriting) */
@font-face {
  font-family: 'Excalifont';
  src: url('/wp-content/themes/hello-elementor-child/fonts/excalifont.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ── Background: light lavender + dot grid ── */
/* Target both the container element and inner wrapper to guarantee coverage */
.elementor-element-a12fea4.e-con,
.elementor-element-a12fea4 {
  /* verificado no navegador: só a cor sólida renderizava; o grid de
     bolinhas era anulado por regra do Elementor e nunca apareceu */
  background: #ede9ff !important;
}

/* Kill Elementor's generated purple overlay */
.elementor-element-a12fea4 > .elementor-background-overlay {
  display: none !important;
  opacity: 0 !important;
}

/* Estado renderizado real: hero com overflow hidden (glow contido) */
.elementor-element-a12fea4 {
  overflow: hidden !important;
  position: relative !important;
  /* Separador visual (P2): antes a seção "no que podemos ajudar" (fundo roxo
     escuro) criava contraste natural antes do vídeo. Agora que ela não fica
     mais imediatamente antes, a sombra garante a mesma sensação de divisão,
     não importa o que precede este bloco. */
  box-shadow: inset 0 10px 18px -14px rgba(20, 8, 45, .35);
}
.elementor-element-48e1f0e {
  overflow: visible !important;
}

/* ── Headings: force Excalifont ── */
.elementor-element-d4d90e3 .elementor-heading-title {
  font-family: 'Excalifont', 'Virgil', cursive !important;
  color: #321863 !important;
}
.elementor-element-843939a .elementor-heading-title {
  font-family: 'Excalifont', 'Virgil', cursive !important;
  font-weight: 700 !important;
  color: #f97316 !important;
  font-size: 20px !important;
}

/* ── Video card: white card + grey border + orange ring + purple glow ── */
.elementor-element-982a263 > .elementor-widget-container,
.elementor-element-982a263 .elementor-widget-container {
  background: #fff !important;
  border-radius: 20px !important;
  border: 1px solid #e6e4e0 !important;
  overflow: hidden !important;
  box-shadow:
    0 24px 64px -8px rgba(30,20,50,0.32),
    0 8px 24px rgba(30,20,50,0.16),
    0 0 0 3px #f97316,
    0 0 50px 15px rgba(108,53,222,0.22) !important;
}

/* Delta row at bottom of hero video section */
.elementor-element-a12fea4{position:relative}
.elementor-element-a12fea4::after{
  content:'Δ  Δ  Δ  Δ  Δ  Δ  Δ  Δ  Δ  Δ  Δ';
  display:block;
  position:absolute;
  bottom:10px;
  left:0;right:0;
  text-align:center;
  font-size:11px;
  letter-spacing:22px;
  font-family:'Plus Jakarta Sans',sans-serif;
  color:rgba(108,53,222,0.55);
  pointer-events:none;
  z-index:5;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,black 12%,black 88%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0%,black 12%,black 88%,transparent 100%);
}


/* =====================================================
   MIGRADO DO functions.php (blocos wp_head inline) — C3
   Valores = o que de fato renderizava (functions vencia a cascata)
   ===================================================== */

/* H1 "breathing" — respeita prefers-reduced-motion (V4) */
@media (prefers-reduced-motion: no-preference) {
  @keyframes oc-breathe {
    0%, 100% { transform: scale(1); letter-spacing: -1px; }
    50%      { transform: scale(1.018); letter-spacing: -0.4px; }
  }
  .elementor-element-d4d90e3 .elementor-heading-title {
    animation: oc-breathe 5s ease-in-out infinite;
    display: inline-block;
    transform-origin: center center;
  }
}

/* Grid de bolinhas: pintado no ocmathdec (elemento real, renderização
   garantida). No container a12fea4 o Elementor anulava o background-image,
   por isso o grid "sumia". Cobre 100% da largura junto com as fórmulas. */
.elementor-element-ocmathdec > .elementor-widget-container::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(108, 53, 222, 0.13) 1.5px, transparent 1.5px);
  background-size: 24px 24px;
  pointer-events: none;
  z-index: -1; /* atrás das fórmulas, dentro do stacking do widget */
}

/* 48e1f0e estático → decoração ocmathdec ancora no hero inteiro */
.elementor-element-48e1f0e {
  position: static !important;
}
.elementor-element-ocmathdec,
.elementor-element-ocmathdec > .elementor-widget-container {
  position: absolute !important;
  inset: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: none !important;
  z-index: 0 !important;
  overflow: hidden !important;
}

/* Conteúdo do hero acima da decoração */
.elementor-element-d4d90e3,
.elementor-element-843939a,
.elementor-element-982a263,
.elementor-element-9ac08d9 {
  position: relative !important;
  z-index: 2 !important;
}


/* ── Mobile: decoração do hero em dose leve ──────────────────────────
   Em telas estreitas as 30 fórmulas + 13 formas se comprimem atrás do
   título e do vídeo e viram poluição (feedback do dono, 2026-07-11).
   Mantém ~1/3 das fórmulas e metade das formas, tudo mais transparente. */
@media (max-width: 767px) {
  .elementor-element-ocmathdec span.f:nth-of-type(3n),
  .elementor-element-ocmathdec span.f:nth-of-type(3n+1) {
    display: none;
  }
  .elementor-element-ocmathdec span.f {
    filter: opacity(0.45);
  }
  .elementor-element-ocmathdec svg:nth-of-type(even) {
    display: none;
  }
  .elementor-element-ocmathdec svg {
    opacity: 0.35;
  }
  .elementor-element-ocmathdec > .elementor-widget-container::after {
    background-image: radial-gradient(rgba(108, 53, 222, 0.09) 1.5px, transparent 1.5px);
  }
}


/* ── Mobile: seção da Lousa — título, caderninho e depoimentos centrados ──
   A coluna 91c6b8c mantinha largura parcial de desktop (~65%) e ficava
   encostada à esquerda; feedback com screenshot do dono (2026-07-11). */
@media (max-width: 767px) {
  /* 425cd6c1 é o container com --width:71% do desktop que estreitava tudo */
  .elementor-element-425cd6c1 {
    --width: 100%;
    width: 100% !important;
    max-width: 100% !important;
  }
  .elementor-element-91c6b8c {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: center !important;
    align-items: center !important;
  }
  .elementor-element-91c6b8c h1,
  .elementor-element-91c6b8c h2,
  .elementor-element-91c6b8c h3,
  .elementor-element-91c6b8c .elementor-heading-title {
    text-align: center !important;
  }
  /* coluna do carrossel sem deslocamentos herdados do layout desktop */
  .elementor-element-76721862 {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}


/* ── Mobile: trava de deslize horizontal ─────────────────────────────
   Nenhum elemento deve alargar a página em telas estreitas (regressão
   relatada pelo dono em 2026-07-11: dava para deslizar para a direita
   e o botão de WhatsApp saía da área visível). overflow-x:clip corta
   sem criar contexto de rolagem (não quebra position:sticky). */
@media (max-width: 767px) {
  html, body {
    overflow-x: clip !important;
  }
}