/* ==========================================================================
   Ponte de compatibilidade Elementor
   --------------------------------------------------------------------------
   As páginas agora são montadas 100% com Containers nativos do Elementor
   (flexbox), então praticamente todo o layout já é resolvido pela própria
   aba de Estilo do Elementor (direção, espaçamento, cores, tipografia).
   Este arquivo só cobre pequenos detalhes visuais que não têm um controle
   nativo equivalente no Elementor gratuito.
   ========================================================================== */

/* Botões (widget nativo "Button") herdam a tipografia/maiúsculas da marca */
.elementor-widget-button .elementor-button {
  text-transform: uppercase;
  transition: background .4s cubic-bezier(.2,.7,.1,1), color .4s cubic-bezier(.2,.7,.1,1),
              border-color .4s cubic-bezier(.2,.7,.1,1);
}
.elementor-widget-button .elementor-button:hover { opacity: .92; }

/* Botão flutuante do WhatsApp e cabeçalho/rodapé do tema continuam fora do
   Elementor (chrome fixo do site) e usam o sprite de ícones original —
   nada aqui interfere com o conteúdo editável das páginas. */

/* ==========================================================================
   Containers do Elementor x grids do protótipo original
   --------------------------------------------------------------------------
   Todo Container do Elementor é renderizado internamente como flexbox
   (classe própria .e-con / regra com ID do elemento). As classes originais
   abaixo exigem display:grid com colunas/áreas específicas — usamos
   !important apenas nestes seletores estruturais para garantir que o grid
   do protótipo prevaleça sobre o flex padrão do Container, mantendo o
   Container 100% editável (cores, texto, espaçamento) pela aba de Estilo.
   ========================================================================== */
.hero__grid, .creds__grid, .split, .sec-head, .esp-grid, .mosaico,
.mosaico-ed, .insta-grid, .footer__grid, .page-hero__grid, .bio,
.valores, .faixa-fotos, .canais, .form-grid, .form, .mapa-bloco,
.sobre-ed__grid, .sobre-ed__stats, .linhas-esp, .linha-esp {
  display: grid !important;
}
.timeline > .elementor-element { display: grid !important; }

/* Itens do mosaico (home clássica) — o <figure> original é o próprio item
   de grid; aqui o item de grid é o Container filho direto que recebe a
   classe m1..m6. */
.mosaico > .m1, .mosaico > .m2, .mosaico > .m3,
.mosaico > .m4, .mosaico > .m5, .mosaico > .m6,
.mosaico .m1, .mosaico .m2, .mosaico .m3,
.mosaico .m4, .mosaico .m5, .mosaico .m6 {
  margin: 0; overflow: hidden; position: relative; grid-column: unset; grid-row: unset;
}
.m1 { grid-column: 1 / 5 !important; grid-row: span 5 !important; }
.m2 { grid-column: 5 / 9 !important; grid-row: span 3 !important; }
.m3 { grid-column: 9 / 13 !important; grid-row: span 4 !important; }
.m4 { grid-column: 5 / 9 !important; grid-row: span 5 !important; }
.m5 { grid-column: 1 / 5 !important; grid-row: span 3 !important; }
.m6 { grid-column: 9 / 13 !important; grid-row: span 4 !important; }
.mosaico [class*="m"] img, .mosaico [class*="m"] .elementor-widget-image img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.2s cubic-bezier(.2,.7,.1,1), filter 1.2s cubic-bezier(.2,.7,.1,1);
}
.mosaico [class*="m"]:hover img { transform: scale(1.04); }

/* Itens do mosaico editorial (e1..e8) + legenda (figcaption original) */
.mosaico-ed > .e1, .mosaico-ed > .e2, .mosaico-ed > .e3, .mosaico-ed > .e4,
.mosaico-ed > .e5, .mosaico-ed > .e6, .mosaico-ed > .e7, .mosaico-ed > .e8,
.mosaico-ed .e1, .mosaico-ed .e2, .mosaico-ed .e3, .mosaico-ed .e4,
.mosaico-ed .e5, .mosaico-ed .e6, .mosaico-ed .e7, .mosaico-ed .e8 {
  margin: 0; overflow: hidden; position: relative;
}
.e1 { grid-column: 1 / 8 !important; grid-row: span 5 !important; }
.e2 { grid-column: 8 / 11 !important; grid-row: span 3 !important; }
.e3 { grid-column: 11 / 13 !important; grid-row: span 4 !important; }
.e4 { grid-column: 8 / 11 !important; grid-row: span 4 !important; }
.e5 { grid-column: 11 / 13 !important; grid-row: span 3 !important; }
.e6 { grid-column: 1 / 4 !important; grid-row: span 4 !important; }
.e7 { grid-column: 4 / 8 !important; grid-row: span 4 !important; }
.e8 { grid-column: 8 / 13 !important; grid-row: span 2 !important; }
.mosaico-ed [class*="e"] img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2,.7,.1,1); }
.mosaico-ed [class*="e"]:hover img { transform: scale(1.05); }
.mosaico-ed [class*="e"]::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(35,34,33,.6), transparent 50%);
  opacity: 0; transition: opacity .5s; pointer-events: none;
}
.mosaico-ed [class*="e"]:hover::after { opacity: 1; }
.mosaico-ed .mosaico-cap {
  position: absolute; left: 18px; bottom: 16px; font-size: 10px; letter-spacing: .3em;
  text-transform: uppercase; color: var(--creme); z-index: 1; opacity: 0;
  transform: translateY(8px); transition: .5s cubic-bezier(.2,.7,.1,1);
}
.mosaico-ed [class*="e"]:hover .mosaico-cap { opacity: 1; transform: none; }

/* Grade do Instagram — hover com overlay + ícone (equivalente ao <a> original) */
.insta-grid > .insta-item { position: relative; aspect-ratio: 1; overflow: hidden; }
.insta-grid .insta-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s cubic-bezier(.2,.7,.1,1); }
.insta-grid .insta-item::after {
  content: ""; position: absolute; inset: 0; background: rgba(35,34,33,.55);
  opacity: 0; transition: opacity .5s cubic-bezier(.2,.7,.1,1); pointer-events: none;
}
.insta-grid .insta-item .elementor-widget-icon { position: absolute; z-index: 1; left: 50%; top: 50%; transform: translate(-50%,-40%); opacity: 0; transition: opacity .5s, transform .5s cubic-bezier(.2,.7,.1,1); }
.insta-grid .insta-item:hover::after, .insta-grid .insta-item:hover .elementor-widget-icon { opacity: 1; }
.insta-grid .insta-item:hover .elementor-widget-icon { transform: translate(-50%,-50%); }
.insta-grid .insta-item:hover img { transform: scale(1.06); }

/* Faixa de fotos (página Sobre) */
.faixa-fotos > .elementor-element { margin: 0; aspect-ratio: 4/5; overflow: hidden; }
.faixa-fotos img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s cubic-bezier(.2,.7,.1,1); }
.faixa-fotos > .elementor-element:hover img { transform: scale(1.04); }

/* Linha do tempo (Sobre > Formação) — hover de respiro lateral */
.timeline > .elementor-element:hover { padding-left: 16px; }

/* Linha-esp (editorial > especialidades) — hover de zoom na imagem */
.linha-esp:hover .linha-esp__img img { transform: scale(1.04); }
.linha-esp__img img { transition: transform 1.4s cubic-bezier(.2,.7,.1,1); }

/* Faixa "marquee" (home editorial) — bolinha separadora entre os itens,
   reproduzindo a regra original ".marquee span::after" sobre o wrapper
   próprio de cada widget de texto dentro da faixa. */
.marquee .marquee__item { display: inline-flex; align-items: center; gap: 56px; }
.marquee .marquee__item::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--preto); flex: none; }

/* ==========================================================================
   Número gigante "01" (home editorial > Sobre) — o Elementor não tem um
   controle nativo para "contorno de texto" (text-stroke), então a cor fica
   transparente via title_color (widget "Título") e o traço é completado
   aqui, reproduzindo a regra original ".sobre-ed__num".
   ========================================================================== */
.sobre-ed__num .elementor-heading-title {
  -webkit-text-stroke: 1px rgba(144, 137, 129, .35);
  position: absolute; top: clamp(20px, 4vw, 60px); left: -2vw;
  line-height: .8; pointer-events: none; user-select: none;
}

/* ==========================================================================
   Nota técnica: todo widget "Título" nativo deste projeto já recebe sua cor
   de marca diretamente na configuração do widget (aba Estilo > Título >
   Cor), e não por herança de CSS — porque o Elementor gera, para cada
   título, uma regra própria (#elementor-element-<id> .elementor-heading-title)
   com mais especificidade do que as classes deste arquivo ou do
   style-original.css. Se um novo título for adicionado no Elementor sem
   definir essa cor manualmente, ele usará a cor padrão do Elementor (não a
   da marca) — defina a cor na aba Estilo do próprio título ao criá-lo.
   ========================================================================== */