/* =========================================================
   MAGNUS LASER — Base visual (Astra Child)
   Arquivo principal de estilos do site.
   ========================================================= */

:root{
  /* Paleta Magnus Laser */
  --ml-gold: #D4AF37;
  --ml-gold-alt: #F2D675;

  --ml-title: #FFFFFF;
  --ml-text: #D6D6D6;
  --ml-muted: #A9A9A9;

  --ml-bg: #050608;
  --ml-bg-2: #0B0D12;

  --ml-border: rgba(212,175,55,0.35);
  --ml-divider: rgba(255,255,255,0.08);

  /* Tipografia (se você quiser evoluir depois) */
  --ml-radius: 18px;
  --ml-radius-sm: 12px;
  --ml-shadow: 0 18px 50px rgba(0,0,0,0.45);

  --ml-container: 1200px;
}

/* Fundo global (segura o “preto premium”) */
body{
  background: var(--ml-bg);
  color: var(--ml-text);
}

/* Títulos sempre com presença */
h1, h2, h3, h4, h5, h6{
  color: var(--ml-title);
  letter-spacing: 0.2px;
}

/* Links */
a{
  color: var(--ml-gold);
  text-decoration: none;
}
a:hover{
  color: var(--ml-gold-alt);
}

/* Separadores delicados */
hr{
  border: 0;
  border-top: 1px solid var(--ml-divider);
}

/* =========================================================
   BOTÕES — padrão Magnus (para hero e CTAs)
   Use no HTML: class="ml-btn ml-btn-primary" etc.
   ========================================================= */

.ml-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  padding: 14px 22px;
  border-radius: 999px;

  font-weight: 600;
  font-size: 15px;
  line-height: 1;

  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

/* Primário: dourado preenchido, premium, sem exagero */
.ml-btn-primary{
  background: var(--ml-gold);
  color: #0A0A0A;
  border: 1px solid rgba(0,0,0,0.18);
  box-shadow: 0 14px 30px rgba(212,175,55,0.16);
}
.ml-btn-primary:hover{
  background: var(--ml-gold-alt);
  transform: translateY(-1px);
  box-shadow: 0 18px 45px rgba(212,175,55,0.22);
}

/* Secundário: transparente com borda dourada */
.ml-btn-outline{
  background: transparent;
  color: var(--ml-gold);
  border: 1px solid var(--ml-border);
}
.ml-btn-outline:hover{
  border-color: rgba(242,214,117,0.55);
  color: var(--ml-gold-alt);
  transform: translateY(-1px);
}

/* =========================================================
   SEÇÕES (para seus blocos HTML no Gutenberg)
   ========================================================= */

.ml-section{
  width: 100%;
  padding: 64px 20px;
}

.ml-wrap{
  max-width: var(--ml-container);
  margin: 0 auto;
}

.ml-card{
  background: var(--ml-bg-2);
  border: 1px solid var(--ml-divider);
  border-radius: var(--ml-radius);
  box-shadow: var(--ml-shadow);
  padding: 28px;
}

/* Pequenas notas / microcopy */
.ml-muted{
  color: var(--ml-muted);
}

/* Responsividade básica */
@media (max-width: 860px){
  .ml-section{ padding: 44px 16px; }
  .ml-card{ padding: 22px; }
}
/* =========================================================
   MAGNUS LASER — Tipografia + Containers (ml-core.css)
   H1: Cinzel | H2–H6: Playfair Display | Texto: Montserrat
   ========================================================= */

/* Fontes (rápido de implementar). 
   Se quiser performance máxima, depois trocamos para enqueue no functions.php. */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700&family=Playfair+Display:wght@400;500;600;700&family=Montserrat:wght@300;400;500;600&display=swap');

:root{
  /* Font stacks */
  --ml-font-body: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --ml-font-h1: "Cinzel", "Times New Roman", serif;
  --ml-font-head: "Playfair Display", "Times New Roman", serif;

  /* Container widths */
  --ml-container: 1200px;      /* largura padrão (institucional) */
  --ml-container-narrow: 840px;/* largura estreita (texto/manifesto) */
  --ml-container-wide: 1320px; /* opcional (hero/galeria) */

  /* Espaçamentos laterais responsivos */
  --ml-gutter: clamp(16px, 3vw, 28px);

  /* Escala tipográfica (responsiva, premium) */
  --ml-h1: clamp(34px, 4vw, 54px);
  --ml-h2: clamp(26px, 2.6vw, 38px);
  --ml-h3: clamp(20px, 2vw, 28px);
  --ml-h4: clamp(18px, 1.6vw, 22px);
  --ml-h5: clamp(16px, 1.3vw, 18px);
  --ml-h6: 15px;

  --ml-body: 16px;
  --ml-body-lg: 18px;
  --ml-small: 14px;
}

/* Base */
html{ -webkit-text-size-adjust: 100%; }
body{
  font-family: var(--ml-font-body);
  font-size: var(--ml-body);
  line-height: 1.75;
  letter-spacing: 0.15px;
  background: var(--ml-bg);
  color: var(--ml-text);
}

/* H1 Cinzel (somente H1) */
h1{
  font-family: var(--ml-font-h1);
  font-size: var(--ml-h1);
  line-height: 1.12;
  letter-spacing: 0.6px;
  text-transform: none;
  margin: 0 0 14px;
  color: var(--ml-title);
}

/* H2–H6 Playfair Display */
h2, h3, h4, h5, h6{
  font-family: var(--ml-font-head);
  color: var(--ml-title);
  letter-spacing: 0.2px;
  margin: 0 0 12px;
}

h2{ font-size: var(--ml-h2); line-height: 1.18; }
h3{ font-size: var(--ml-h3); line-height: 1.22; }
h4{ font-size: var(--ml-h4); line-height: 1.25; }
h5{ font-size: var(--ml-h5); line-height: 1.28; }
h6{ font-size: var(--ml-h6); line-height: 1.3; }

p{ margin: 0 0 14px; color: var(--ml-text); }
small, .ml-small{ font-size: var(--ml-small); color: var(--ml-muted); }
.ml-lead{ font-size: var(--ml-body-lg); line-height: 1.8; color: var(--ml-text); }

/* Links */
a{ color: var(--ml-gold); text-decoration: none; }
a:hover{ color: var(--ml-gold-alt); }

/* =========================================================
   CONTAINERS — Sistema Magnus (4)
   ========================================================= */

.ml-section{
  width: 100%;
  padding: clamp(44px, 6vw, 80px) 0;
}

/* Container padrão */
.ml-wrap{
  width: 100%;
  max-width: var(--ml-container);
  margin: 0 auto;
  padding-left: var(--ml-gutter);
  padding-right: var(--ml-gutter);
}

/* Texto/manifesto (estreito) */
.ml-wrap--narrow{
  max-width: var(--ml-container-narrow);
}

/* Hero/galeria (mais amplo) */
.ml-wrap--wide{
  max-width: var(--ml-container-wide);
}

/* Seção com fundo secundário (para alternância elegante) */
.ml-section--surface{
  background: var(--ml-bg-2);
  border-top: 1px solid var(--ml-divider);
  border-bottom: 1px solid var(--ml-divider);
}

/* Cards base */
.ml-card{
  background: var(--ml-bg-2);
  border: 1px solid var(--ml-divider);
  border-radius: var(--ml-radius);
  box-shadow: var(--ml-shadow);
  padding: clamp(18px, 2.2vw, 28px);
}

/* Grid Magnus (simples e escalável) */
.ml-grid{
  display: grid;
  gap: clamp(14px, 2vw, 18px);
}
.ml-grid--2{ grid-template-columns: repeat(2, 1fr); }
.ml-grid--3{ grid-template-columns: repeat(3, 1fr); }

@media (max-width: 980px){
  .ml-grid--2, .ml-grid--3{ grid-template-columns: 1fr; }
}
/* === HOME PREMIUM: HERO + CARDS + MICROINTERACOES (ADD NO FINAL) === */

.ml-hero__header { max-width: 920px; margin-bottom: 22px; }
.ml-hero__actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 18px; }
.ml-hero__note { margin-top: 10px; }

.ml-hero__grid { margin-top: 18px; }

.ml-card { border-radius: 18px; overflow: hidden; }
.ml-hero__media img { width: 100%; height: auto; display: block; aspect-ratio: 4 / 3; object-fit: cover; }

.ml-hero__media,
.ml-protocol,
.ml-cta__box,
.ml-split__media {
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
  transform: translateY(0);
  transition: transform .25s ease, box-shadow .25s ease;
}

.ml-hero__media:hover,
.ml-protocol:hover,
.ml-split__media:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 80px rgba(0,0,0,.45);
}

.ml-split {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 26px;
  align-items: center;
}

.ml-split__media img { width: 100%; height: auto; display: block; aspect-ratio: 4 / 3; object-fit: cover; }

.ml-split__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 16px; }

.ml-section__header { max-width: 920px; margin-bottom: 22px; }

/* Protocol cards (imagem + corpo) */
.ml-protocol__media img { width: 100%; height: auto; display: block; aspect-ratio: 4 / 3; object-fit: cover; }
.ml-protocol__body { padding: 16px 16px 18px; display: grid; gap: 10px; }
.ml-protocol__body .ml-btn { width: fit-content; }

/* CTA final */
.ml-cta__box { padding: 22px; }
.ml-cta__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 14px; }

/* Responsivo */
@media (max-width: 980px) {
  .ml-split { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .ml-hero__actions, .ml-split__actions, .ml-cta__actions { flex-direction: column; align-items: stretch; }
}
/* === ML Scroll Reveal (ADD NO FINAL) === */
.ml-anim {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .55s ease, transform .55s ease;
  transition-delay: var(--ml-delay, 0ms);
  will-change: opacity, transform;
}

.ml-inview {
  opacity: 1;
  transform: translateY(0);
}
/* === MAGNUS LUXO CONTIDO – APENAS CARDS COM IMAGEM === */

/* Hero e Protocolos (cards com mídia) */
.ml-hero__media,
.ml-protocol {
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(2, 6, 23, 0.35);
  backdrop-filter: blur(6px);
}

/* Filete superior dourado minimalista */
.ml-hero__media::before,
.ml-protocol::before {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  top: 10px;
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(218, 165, 32, 0),
    rgba(218, 165, 32, 0.55),
    rgba(218, 165, 32, 0)
  );
  opacity: 0.55;
  pointer-events: none;
}

/* Micro brilho dourado no hover */
.ml-hero__media::after,
.ml-protocol::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    1200px 220px at 50% 0%,
    rgba(218, 165, 32, 0.18),
    rgba(218, 165, 32, 0) 55%
  );
  opacity: 0;
  transform: translateY(2px);
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
}

.ml-hero__media:hover,
.ml-protocol:hover {
  border-color: rgba(218, 165, 32, 0.22);
}

.ml-hero__media:hover::after,
.ml-protocol:hover::after {
  opacity: 1;
  transform: translateY(0);
}

.ml-hero__media:hover::before,
.ml-protocol:hover::before {
  opacity: 0.75;
}

/* Zoom sutil da imagem */
.ml-hero__media img,
.ml-protocol__media img {
  transition: transform .35s ease;
}

.ml-hero__media:hover img,
.ml-protocol:hover .ml-protocol__media img {
  transform: scale(1.01);
}

/* Respeita reduce motion */
@media (prefers-reduced-motion: reduce) {
  .ml-hero__media img,
  .ml-protocol__media img {
    transition: none !important;
    transform: none !important;
  }
}
/* === FIX BOTÕES: remover dourado sólido + centralização vertical perfeita === */

/* Base: todos os botões Magnus */
a.ml-btn,
button.ml-btn,
.wp-block-button__link.ml-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  line-height: 1 !important;
  min-height: 52px;                /* ajuste fino: mantém consistência */
  padding: 0 22px !important;      /* padding horizontal */
  border-radius: 999px;            /* premium */
  text-decoration: none;

  /* trava legibilidade */
  color: rgba(218, 165, 32, 0.95) !important;
}

/* Remove qualquer "fundo dourado sólido" que esteja vazando do tema/bloco */
a.ml-btn-primary,
button.ml-btn-primary,
.wp-block-button__link.ml-btn-primary {
  background: transparent !important;
  border: 1px solid rgba(218, 165, 32, 0.55) !important;
  box-shadow: none !important;
}

/* Outline (já era o estilo desejado) */
a.ml-btn-outline,
button.ml-btn-outline,
.wp-block-button__link.ml-btn-outline {
  background: transparent !important;
  border: 1px solid rgba(218, 165, 32, 0.40) !important;
}

/* Hover/Focus: nunca perder cor do texto */
a.ml-btn:hover,
a.ml-btn:focus-visible,
button.ml-btn:hover,
button.ml-btn:focus-visible,
.wp-block-button__link.ml-btn:hover,
.wp-block-button__link.ml-btn:focus-visible {
  color: rgba(218, 165, 32, 1) !important;
  background: rgba(218, 165, 32, 0.08) !important; /* brilho sutil, não sólido */
  border-color: rgba(218, 165, 32, 0.70) !important;
  text-decoration: none !important;
  outline: none;
}

/* Se algum botão estiver vindo com background por inline style, isso neutraliza */
a.ml-btn[style*="background"],
.wp-block-button__link.ml-btn[style*="background"] {
  background: transparent !important;
}

/* Correção extra: evita "texto descendo" por font-render/tema */
a.ml-btn,
button.ml-btn,
.wp-block-button__link.ml-btn {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Mobile: botões ocuparem largura sem quebrar alinhamento */
@media (max-width: 720px) {
  .ml-hero__actions a.ml-btn,
  .ml-split__actions a.ml-btn,
  .ml-cta__actions a.ml-btn {
    width: 100%;
  }
}
/* === ML | Bullets como botões (chips) === */
.ml-bullets-buttons{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin: 14px 0 0;
}

.ml-bullet-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  padding: 10px 14px;
  border-radius: 999px;

  font-family: var(--ml-font-body, Montserrat, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .2px;

  color: rgba(235, 235, 235, .92);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);

  box-shadow: 0 10px 26px rgba(0,0,0,.22);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  user-select: none;
  cursor: default;

  transition:
    transform .18s ease,
    border-color .18s ease,
    box-shadow .18s ease;
}

/* bolinha dourada discreta (selo) */
.ml-bullet-btn::before{
  content:"";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(218,165,32,.95);
  box-shadow: 0 0 0 4px rgba(218,165,32,.12);
}

/* luxo contido: filete dourado no hover */
.ml-bullet-btn:hover{
  transform: translateY(-1px);
  border-color: rgba(218,165,32,.35);
  box-shadow: 0 14px 32px rgba(0,0,0,.28);
}

/* mobile: centraliza e deixa mais confortável */
@media (max-width: 720px){
  .ml-bullets-buttons{
    justify-content: center;
  }
  .ml-bullet-btn{
    padding: 10px 13px;
    font-size: 12.5px;
  }
}
/* === Magnus Select | Google Forms Embed === */

.ml-select-form-section{
  padding: 80px 20px;
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}

.ml-select-form-header{
  margin-bottom: 40px;
}

.ml-select-form-title{
  font-family: var(--ml-font-head);
  font-size: clamp(28px, 3vw, 42px);
  margin-bottom: 12px;
  color: rgba(255,255,255,.92);
}

.ml-select-form-sub{
  font-family: var(--ml-font-body);
  font-size: 16px;
  color: rgba(255,255,255,.65);
}

.ml-select-form-wrapper{
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 30px 60px rgba(0,0,0,.45);
  background: rgba(255,255,255,.02);
}

/* Responsivo real */
.ml-select-form-wrapper iframe{
  width: 100%;
  min-height: 1200px;
  border: 0;
  display: block;
}

/* Mobile */
@media (max-width: 720px){
  .ml-select-form-section{
    padding: 60px 16px;
  }

  .ml-select-form-wrapper iframe{
    min-height: 1400px;
  }
}
/* =========================================================
   MAGNUS LASER — FAQ (Página) | /faq/
   Escopo: #faq-magnus-laser
   Objetivo: animação, acabamento premium, acessibilidade
   Cole ao FINAL do ml-core.css
========================================================= */

/* Container do bloco FAQ */
#faq-magnus-laser details.ml-card{
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

/* Hover sutil no card */
#faq-magnus-laser details.ml-card:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}

/* Remove marcador padrão do summary */
#faq-magnus-laser summary{
  list-style: none;
}
#faq-magnus-laser summary::-webkit-details-marker{
  display: none;
}

/* Summary clicável (linha principal) */
#faq-magnus-laser summary{
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 18px;
  user-select: none;
  outline: none;
}

/* Tipografia do texto da pergunta */
#faq-magnus-laser summary strong{
  display: inline-block;
  line-height: 1.25;
  letter-spacing: .2px;
}

/* Indicador (seta) — sem ícone externo (puro CSS) */
#faq-magnus-laser summary::after{
  content: "▾";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(218,165,32,.55);
  color: rgba(218,165,32,.95);
  flex: 0 0 auto;
  transition: transform .25s ease, background-color .25s ease, border-color .25s ease;
  background: rgba(218,165,32,.06);
}

/* Estado aberto: seta gira */
#faq-magnus-laser details[open] summary::after{
  transform: rotate(180deg);
  background: rgba(218,165,32,.10);
  border-color: rgba(218,165,32,.75);
}

/* Linha divisória interna quando aberto */
#faq-magnus-laser details[open] summary{
  padding-bottom: 14px;
}
#faq-magnus-laser details[open] summary + *{
  border-top: 1px solid rgba(255,255,255,.08);
}

/* Conteúdo (resposta) com animação suave (height via grid) */
#faq-magnus-laser details > *:not(summary){
  padding: 14px 18px 18px 18px;
}

/* Animação sem JS: usando grid para transição de altura */
#faq-magnus-laser details{
  display: grid;
}
#faq-magnus-laser details > summary{
  grid-row: 1;
}
#faq-magnus-laser details > *:not(summary){
  grid-row: 2;
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .30s ease, opacity .25s ease;
  opacity: 0;
  padding-top: 0;
}

/* Wrapper interno para manter a animação fluida */
#faq-magnus-laser details > *:not(summary) > *{
  overflow: hidden;
}

/* Quando abrir: expande */
#faq-magnus-laser details[open] > *:not(summary){
  grid-template-rows: 1fr;
  opacity: 1;
  padding-top: 14px;
}

/* Ajuste: parágrafos da resposta */
#faq-magnus-laser details p.ml-muted{
  margin: 0;
}

/* Foco acessível: quando navega por teclado */
#faq-magnus-laser summary:focus-visible{
  box-shadow: 0 0 0 3px rgba(218,165,32,.25);
  border-radius: 14px;
}

/* Estado aberto: leve destaque no card */
#faq-magnus-laser details[open].ml-card{
  border-color: rgba(218,165,32,.55);
  box-shadow: 0 14px 40px rgba(0,0,0,.28);
}

/* Espaçamento do bloco FAQ geral */
#faq-magnus-laser .ml-wrap > div[style*="display:grid"]{
  margin-top: 26px;
}

/* CTA final: alinhamento e respiro premium */
#faq-magnus-laser .ml-card h2{
  margin-top: 0;
}
#faq-magnus-laser .ml-card .ml-hero__actions{
  margin-top: 14px;
}

/* Mobile: melhora do toque e quebra da pergunta */
@media (max-width: 520px){
  #faq-magnus-laser summary{
    padding: 16px 14px;
  }
  #faq-magnus-laser details > *:not(summary){
    padding-left: 14px;
    padding-right: 14px;
    padding-bottom: 16px;
  }
  #faq-magnus-laser summary::after{
    width: 32px;
    height: 32px;
  }
}
.ml-anim{ opacity:0; transform: translateY(10px); transition: opacity .45s ease, transform .45s ease; transition-delay: var(--ml-delay, 0ms); }
.ml-inview{ opacity:1; transform: translateY(0); }