/* =========================================================================
   Med-Review Intensive R1 — Hero + Tétra (only)
   Design system: warm copper + deep violet. Wrapper escuro #111111.
   Scope: .mr-intensive (blindado contra WP/Elementor).
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800&family=Exo+2:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

.mr-intensive {
  --mr-copper-100: #FCEAE2;
  --mr-copper-200: #F4DCC9;
  --mr-copper-300: #E6C5A8;
  --mr-copper-400: #D5A881;
  --mr-copper-500: #B07764;
  --mr-copper-600: #8A4B40;
  --mr-copper-700: #64302C;

  --mr-violet-950: #050310;
  --mr-violet-900: #090413;
  --mr-violet-850: #0D0B1F;
  --mr-violet-800: #100F26;
  --mr-violet-700: #1A1733;
  --mr-violet-600: #2C2240;
  --mr-violet-500: #403350;
  --mr-violet-400: #554B72;
  --mr-violet-300: #7A6F95;
  --mr-violet-200: #A094BA;
  --mr-violet-100: #BFB8D0;

  --mr-gradient-copper: linear-gradient(135deg,#64302C 0%,#B07764 35%,#E6C5A8 65%,#FCEAE2 100%);
  --mr-gradient-hero: radial-gradient(120% 80% at 80% 0%, rgba(213,168,129,.18) 0%, rgba(64,51,80,0) 55%), linear-gradient(180deg,#100F26 0%,#090413 100%);

  --mr-fg: #F4EFE8;
  --mr-fg-muted: var(--mr-violet-100);
  --mr-fg-faint: var(--mr-violet-300);

  --mr-font-display: 'Orbitron','Eurostile','Bahnschrift',system-ui,sans-serif;
  --mr-font-body: 'Exo 2','Inter',system-ui,-apple-system,sans-serif;
  --mr-ease-out: cubic-bezier(0.22,1,0.36,1);

  position: relative;
  display: block;
  width: 100%;
  background: #111111;          /* base do wrapper — Tétra herda */
  color: var(--mr-fg);
  font-family: var(--mr-font-body);
  isolation: isolate;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
.mr-intensive *,.mr-intensive *::before,.mr-intensive *::after{box-sizing:border-box}
.mr-intensive a,.mr-intensive a:hover,.mr-intensive a:focus{color:inherit;text-decoration:none}
.mr-intensive img{display:block;max-width:100%}
.mr-intensive button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;padding:0}

/* ═════════════════════════════════════════════════════════════════
   FLOW WRAPPER — hero + tetra dividem o mesmo plano (z-index/posição)
   para o pontilhado spanning da área dos depoimentos até os ícones.
   ═════════════════════════════════════════════════════════════════ */
.mr-flow {
  position: relative;
}

/* Pontilhado SPAN — começa no topo dos depoimentos (hero) e termina
   nos centros dos 4 ícones (tetra). z-index: 2 fica ACIMA do bg/gradiente
   do hero mas ABAIXO do conteúdo (texto, fotos, troféu) que tem z >= 3. */
.mr-flow-ponti {
  position: absolute;
  z-index: 2;
  top: 440px;
  left: 50%;
  transform: translateX(-50%);
  width: min(950px, 70%);
  pointer-events: none;
  aspect-ratio: 1954 / 1137;
  background-image: url("./pontilhado-desktop.webp");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  filter: drop-shadow(0 0 6px rgba(122,103,229,.30));
  opacity: .9;
}

/* SVG do pontilhado mobile — escondido por default no desktop */
.mr-flow-ponti-mobile { display: none; }

/* ─────────────────────────────────────────────────────────────────
   HERO
   ───────────────────────────────────────────────────────────────── */
/* Hero NÃO cria stacking context (sem z-index explicito) — assim o
   pontilhado-overlay no flow consegue atravessar a área do hero. */
.mr-hero {
  position: relative;
  padding: 0 0 96px;
  background: var(--mr-gradient-hero);
  overflow: visible;
}
.mr-hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image: url("./bg-hero-desktop.webp");
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
  opacity: .55;
  z-index: 1;
  pointer-events: none;
}
/* Transição gradient pra #111111 no fim do hero */
.mr-hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 180px;
  background: linear-gradient(180deg, rgba(17,17,17,0) 0%, rgba(17,17,17,.55) 50%, #111111 100%);
  z-index: 1;
  pointer-events: none;
}
/* Todo conteúdo do hero (texto, fotos, CTA) acima do pontilhado-overlay */
.mr-hero > .mr-nav,
.mr-hero > .mr-hero-grid { position: relative; z-index: 3; }

/* Trofeu posicionado no ponto de convergência da linha — sobre o pontilhado */
.mr-hero-trofeu {
  position: absolute;
  z-index: 4;
  left: 50%;
  transform: translateX(-50%);
  bottom: 36px;
  width: 64px; height: auto;
  filter: drop-shadow(0 6px 16px rgba(213,168,129,.5));
  pointer-events: none;
}

/* Nav */
.mr-nav {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 32px;
  padding: 20px clamp(20px,4vw,64px);
  max-width: 1440px;
  margin: 0 auto;
}
.mr-nav-logo img {
  width: 110px; height: auto;
  filter: brightness(0) invert(1);
}
.mr-nav-links {
  display: flex; align-items: center;
  gap: clamp(16px,2.5vw,32px);
  justify-self: end;
}
.mr-nav-links a {
  font-size: 14px; font-weight: 500;
  color: var(--mr-violet-100);
  letter-spacing: 0.01em;
  transition: color .2s var(--mr-ease-out);
  position: relative;
}
.mr-nav-links a::after {
  content:""; position:absolute; bottom:-4px; left:0; right:0;
  height:1.5px; background: var(--mr-copper-400);
  transform: scaleX(0); transform-origin: center;
  transition: transform .25s var(--mr-ease-out);
}
.mr-nav-links a:hover{ color:#fff; }
.mr-nav-links a:hover::after{ transform: scaleX(1); }
.mr-nav-login {
  display: inline-flex; align-items: center;
  padding: 9px 20px;
  border: 1.5px solid rgba(213,168,129,.40);
  border-radius: 999px;
  font-family: var(--mr-font-body);
  font-size: 14px; font-weight: 600;
  color: var(--mr-fg);
  background: rgba(213,168,129,.06);
  transition: all .22s var(--mr-ease-out);
}
.mr-nav-login:hover{
  background: rgba(213,168,129,.18);
  border-color: var(--mr-copper-400);
}
.mr-nav-hamburger {
  display: none;
  flex-direction: column; gap: 5px;
  padding: 8px; cursor: pointer;
  background: none; border: none;
}
.mr-nav-hamburger span {
  width: 24px; height: 2px;
  background: var(--mr-fg);
  border-radius: 2px;
}

/* Hero grid */
.mr-hero-grid {
  display: grid;
  grid-template-columns: minmax(0,1.05fr) minmax(0,0.95fr);
  gap: clamp(32px,4vw,64px);
  max-width: 1320px;
  margin: 0 auto;
  padding: clamp(32px,5vw,72px) clamp(20px,4vw,64px) 0;
  align-items: start;
}

/* Hero LEFT */
.mr-hero-left { max-width: 640px; }
.mr-hero h1.mr-hero-eyebrow {
  font-family: var(--mr-font-body);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mr-copper-400);
  margin: 0 0 20px;
}
.mr-hero h2.mr-hero-h2 {
  font-family: var(--mr-font-display);
  font-size: clamp(34px, 4.6vw, 58px);
  font-weight: 400;          /* ← Orbitron 400 (era 500) */
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--mr-fg);
  margin: 0 0 24px;
  text-wrap: balance;
}
.mr-hero-h2-accent {
  background: var(--mr-gradient-copper);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  font-weight: 400;          /* ← Orbitron 400 */
}
.mr-hero p.mr-hero-sub {
  font-size: 17px;
  line-height: 1.55;
  font-weight: 400;
  color: var(--mr-violet-100);
  margin: 0 0 32px;
  max-width: 56ch;
}

/* Bônus card */
.mr-bonus-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 18px;
  padding: 16px 18px;
  background: rgba(26,23,51,.55);
  border: 1px solid rgba(213,168,129,.18);
  border-radius: 14px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  margin-bottom: 24px;
  transition: all .25s var(--mr-ease-out);
  max-width: 440px;
}
.mr-bonus-card:hover {
  background: rgba(26,23,51,.72);
  border-color: rgba(213,168,129,.40);
  transform: translateY(-2px);
}
.mr-bonus-thumb { width: 56px; height: 56px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.mr-bonus-thumb img { width: 100%; height: 100%; object-fit: contain; }
.mr-bonus-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mr-bonus-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--mr-copper-400); margin: 0;
}
.mr-bonus-title { font-size: 16px; font-weight: 700; color: var(--mr-fg); margin: 0; line-height: 1.2; }
.mr-bonus-sub { font-size: 13px; color: var(--mr-violet-100); margin: 0; }
.mr-bonus-arrow {
  width: 20px; height: 20px; color: var(--mr-copper-400); flex-shrink: 0;
  transition: transform .22s var(--mr-ease-out);
}
.mr-bonus-card:hover .mr-bonus-arrow { transform: translateX(4px); }

/* CTA */
.mr-cta {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 16px 32px;
  background: linear-gradient(135deg,#6B5BFF 0%,#9A66E3 50%,#7B5CC9 100%);
  color: #fff;
  font-family: var(--mr-font-body); font-size: 15px; font-weight: 700; letter-spacing: 0.04em;
  border-radius: 10px; border: none; cursor: pointer; position: relative; overflow: hidden;
  box-shadow: 0 10px 28px rgba(122,103,229,.32), 0 2px 6px rgba(5,3,16,.42);
  transition: all .25s var(--mr-ease-out);
}
.mr-cta::before {
  content:""; position:absolute; inset:0;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.4) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform .7s var(--mr-ease-out); pointer-events: none;
}
.mr-cta:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(122,103,229,.48); }
.mr-cta:hover::before { transform: translateX(120%); }

/* Hero RIGHT — agora é UMA imagem única (a original com 3 cards + minibios) */
.mr-hero-right {
  position: relative;
  width: 100%;
}
.mr-hero-right img {
  width: 100%;
  height: auto;
  display: block;
}

/* ─────────────────────────────────────────────────────────────────
   TÉTRA — second VP (bg #111111)
   ───────────────────────────────────────────────────────────────── */
.mr-tetra {
  position: relative;
  padding: 0 0 80px;
  background: #111111;
  overflow: hidden;
  z-index: 1;
}
.mr-tetra-inner {
  position: relative;
  z-index: 2;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 clamp(20px,4vw,64px);
}

.mr-tetra-flow {
  position: relative;
  padding-top: 200px;   /* espaço pro pontilhado aparecer entre o hero e os ícones */
}

/* 4 pilares */
.mr-pilares {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 3vw, 48px);
  position: relative;
  z-index: 2;
  padding: 0 16px;
}
.mr-pilar {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 16px;
}
.mr-pilar-icon { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; position: relative; }
.mr-pilar-icon img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 0 8px rgba(213,168,129,.18)); }
.mr-pilar h3 {
  font-family: var(--mr-font-body);
  font-size: 20px; font-weight: 700; letter-spacing: 0.03em;
  color: var(--mr-fg); margin: 0; text-transform: uppercase;
}
.mr-pilar p {
  font-family: var(--mr-font-body);
  font-size: 14px; line-height: 1.55; font-weight: 400;
  color: var(--mr-violet-100); margin: 0; max-width: 28ch;
}

/* Watermark + tagline */
.mr-tetra-trailer { position: relative; margin-top: clamp(48px,7vw,96px); text-align: center; padding: 0 16px; }
.mr-tetra-watermark {
  font-family: var(--mr-font-display);
  font-size: clamp(40px, 8vw, 96px);
  font-weight: 400;
  letter-spacing: 0.06em;
  line-height: 1;
  color: var(--mr-violet-500);
  opacity: .45;
  margin: 0;
  user-select: none;
  text-wrap: balance;
}
.mr-tetra-tagline {
  font-family: var(--mr-font-body);
  font-size: clamp(16px,1.6vw,20px);
  font-weight: 500;
  color: var(--mr-copper-400);
  margin: 16px auto 0;
  max-width: 60ch;
}

/* ─────────────────────────────────────────────────────────────────
   RESPONSIVE — Tablet (≤980px)
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 980px) {
  .mr-hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .mr-flow-ponti { display: none; }
}

/* ─────────────────────────────────────────────────────────────────
   Mobile (≤768px)
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .mr-hero::before {
    background-image: url("./bg-hero-mobile.webp");
    background-position: top center;
    opacity: .65;
  }

  .mr-nav { grid-template-columns: auto 1fr; padding: 16px 20px; }
  .mr-nav-links { display: none; }
  .mr-nav-login { display: none; }
  .mr-nav-hamburger { display: inline-flex; justify-self: end; }

  .mr-hero-grid { padding: 32px 20px 0; gap: 32px; text-align: center; }
  .mr-hero-left { max-width: 100%; margin: 0 auto; }
  .mr-hero h1.mr-hero-eyebrow { font-size: 12px; letter-spacing: 0.14em; }
  .mr-hero h2.mr-hero-h2 { font-size: 30px; line-height: 1.15; }
  .mr-hero p.mr-hero-sub { font-size: 15px; margin: 0 auto 24px; }
  .mr-bonus-card { margin: 0 auto 20px; max-width: 100%; }
  .mr-cta { width: 100%; max-width: 100%; justify-content: center; padding: 16px 24px; }

  /* Mobile NÃO tem troféu — usuário confirmou */
  .mr-hero-trofeu { display: none !important; }

  /* Desktop pontilhado-leque escondido (já estava, manter) */
  .mr-flow-ponti { display: none; }

  /* MOBILE PONTILHADO — SVG inline path único contínuo (spec do user).
     Substituiu completamente o webp background overlay (que tinha alinhamento
     ruim). O SVG escala com viewBox 0 0 390 760 e os bows em x=58 caem nos
     centros dos 4 ícones em y={180,320,460,600}. */
  .mr-flow { position: relative; }

  /* Webp overlay antigo: DESLIGADO no mobile */
  .mr-flow::before { display: none !important; }

  /* SVG mobile: ATIVADO e posicionado pra cobrir do topo (abaixo dos
     depoimentos) até o último ícone. */
  .mr-flow-ponti-mobile {
    display: block;
    position: absolute;
    z-index: 2;
    top: 540px;            /* logo abaixo dos depoimentos */
    left: 0;
    width: 100%;
    height: 720px;         /* cobre os 4 ícones empilhados */
    pointer-events: none;
    overflow: visible;
  }

  /* Tétra sem stacking context isolado */
  .mr-tetra {
    padding: 0 0 56px;
    z-index: auto;
    overflow: visible;
  }
  /* Coluna do trilho à esquerda: icon_left_edge ≈ 70px (per spec).
     padding-left + margin-left do ícone calibrados pra colocar icon center
     no x=94 em viewport 390 (= ~24% da viewport). */
  .mr-tetra-flow {
    padding-top: 56px;
    padding-left: 134px;       /* texts começam aqui */
    padding-right: 16px;
    position: relative;
  }
  /* Overlay antigo na tetra desligado */
  .mr-tetra-flow::before { display: none; }
  .mr-pilares {
    grid-template-columns: 1fr;
    gap: 36px;
    padding: 0;
    text-align: left;
  }
  .mr-pilar {
    flex-direction: row;
    align-items: flex-start;
    gap: 18px;
    text-align: left;
    position: relative;
    z-index: 3;            /* acima do fio */
  }
  .mr-pilar-icon {
    width: 48px; height: 48px;
    flex-shrink: 0;
    /* padding-left 134 + margin-left -87 = icon at 47 do content edge.
       Com tetra-inner padding 20 → icon left edge em viewport ~67px = spec. */
    margin-left: -87px;
    background: #111111;
    border-radius: 50%;
    box-shadow: 0 0 0 12px #111111;
  }
  .mr-pilar-icon img { width: 32px; height: 32px; }
  .mr-pilar-icon img { width: 32px; height: 32px; }
  .mr-pilar-content { flex: 1; padding-left: 4px; }
  .mr-pilar h3 { font-size: 18px; margin-bottom: 6px; }
  .mr-pilar p { font-size: 14px; max-width: 100%; }

  .mr-tetra-watermark { font-size: clamp(28px, 11vw, 56px); line-height: 1.1; }
  .mr-tetra-tagline { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .mr-intensive *,.mr-intensive *::before,.mr-intensive *::after{
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}