/* ============================================================
   MUNDO DE CORES — Identidade Visual
   Fundo claro · Faixas coloridas · Aberto ao público
   ============================================================ */

@property --beam-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
@keyframes border-beam-spin {
  from { --beam-angle: 0deg; }
  to   { --beam-angle: 360deg; }
}


.mdc-page {
  --mdc-bg:      #FEFCF8;
  --mdc-bg2:     #F5F0E8;
  --mdc-text:    #1C1810;
  --mdc-dim:     rgba(28,24,16,0.52);
  --mdc-accent:  #D98C0A;
  --mdc-green:   #3A7E28;
  --mdc-blue:    #1A58A0;
  --mdc-red:     #B82020;
  --mdc-border:  rgba(28,24,16,0.1);

  background: var(--mdc-bg);
  color: var(--mdc-text);
}

/* Navbar adaptada ao fundo claro */
.mdc-page .navbar {
  background: rgba(254,252,248,0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--mdc-border);
}
.mdc-page .navbar.scrolled { background: rgba(254,252,248,0.98); }
/* iOS Safari containing-block bug (see style.css): this page's navbar
   keeps backdrop-filter on at all times (not just .scrolled), so it must
   be stripped explicitly while the mobile menu is open, or the fullscreen
   overlay pins itself to the navbar bar instead of the viewport. */
.mdc-page .navbar.menu-open { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }

/* Mobile menu overlay (from style.css) has a dark background on every
   page, but this page's .nav-link is set dark (var(--mdc-text)) to read
   against the light navbar. Force light text only inside the fullscreen
   mobile overlay so it's readable against its dark background. */
@media (max-width: 768px) {
  .mdc-page .nav-links .nav-link { color: #F5F0E8; }
  .mdc-page .nav-links .nav-link:hover,
  .mdc-page .nav-links .nav-link.active { color: var(--mdc-accent); }

  /* The X icon and PT/EN/ES switcher float above the dark overlay
     (z-index 1001, per style.css) once the menu opens, but were still
     styled dark for the light navbar bar underneath — invisible against
     the dark overlay. Lighten them only while the menu is open. */
  .mdc-page .navbar.menu-open .nav-toggle span { background: #F5F0E8; }
  .mdc-page .navbar.menu-open .lang-btn { color: rgba(245,240,235,0.75); }
  .mdc-page .navbar.menu-open .lang-btn.active,
  .mdc-page .navbar.menu-open .lang-btn:hover { color: var(--mdc-accent); }
}
.mdc-page .nav-link,
.mdc-page .navbar .nav-logo span { color: var(--mdc-text); }
.mdc-page .nav-link:hover { color: var(--mdc-accent); }
.mdc-page .nav-cta { background: var(--mdc-accent); color: #fff; border-color: var(--mdc-accent); }
.mdc-page .nav-cta:hover { background: #C07808; border-color: #C07808; }
.mdc-page .lang-btn { color: var(--mdc-text); }
.mdc-page .lang-btn.active { color: var(--mdc-accent); }
.mdc-page .nav-toggle span { background: var(--mdc-text); }
.mdc-page .wa-float { color: #fff !important; }

/* ── Faixa colorida signature ─────────────────────────────── */
.mdc-stripe {
  height: 6px;
  background: linear-gradient(to right,
    #B82020 0%, #E04C18 18%, #D98C0A 34%,
    #C8C010 48%, #38881E 66%, #1A58A0 100%
  );
}
.mdc-stripe--thin { height: 4px; }

/* ── Botões MDC ───────────────────────────────────────────── */
.mdc-btn {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 14px 32px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.mdc-btn--primary  { background: var(--mdc-accent); color: #fff; border-color: var(--mdc-accent); }
.mdc-btn--primary:hover { background: #C07808; border-color: #C07808; }
.mdc-btn--outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,0.55); }
.mdc-btn--outline-light:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.85); }
.mdc-btn--outline-dark  { background: transparent; color: var(--mdc-text); border-color: var(--mdc-border); }
.mdc-btn--outline-dark:hover  { border-color: var(--mdc-accent); color: var(--mdc-accent); }
.mdc-btn--dark { background: var(--mdc-text); color: #fff; border-color: var(--mdc-text); }
.mdc-btn--dark:hover { background: #3A2E22; border-color: #3A2E22; }
.mdc-btn--rainbow {
  background: transparent;
  color: var(--mdc-text);
  border: none;
  position: relative;
  z-index: 0;
}
.mdc-btn--rainbow::after {
  content: '';
  position: absolute;
  inset: 0;
  padding: 1px;
  background: linear-gradient(
    var(--beam-angle),
    rgba(28,24,16,0.1) 0%,
    rgba(28,24,16,0.1) 25%,
    #B82020 38%,
    #D98C0A 50%,
    #1A58A0 62%,
    rgba(28,24,16,0.1) 75%,
    rgba(28,24,16,0.1) 100%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: border-beam-spin 4s linear infinite;
  z-index: -1;
}
.mdc-btn--rainbow:hover { color: var(--mdc-text); }
.mdc-btn--rainbow:hover::after { animation-duration: 2s; }

/* ── Hero ─────────────────────────────────────────────────── */
.mdc-hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.mdc-hero-photo {
  position: absolute;
  inset: 0;
}
.mdc-hero-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 25%;
}
.mdc-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(10,8,4,0.15) 0%,
    rgba(10,8,4,0.25) 40%,
    rgba(10,8,4,0.78) 100%
  );
}
.mdc-hero--no-photo {
  background: radial-gradient(
    ellipse at 60% 40%,
    #1C1408 0%,
    #0E0C06 55%,
    #080604 100%
  );
}
/* Mobile only: the logo video underneath has a plain black (0,0,0)
   background baked in (no real alpha channel), and mix-blend-mode
   doesn't apply to <video> on iOS Safari (its own compositing layer
   bypasses CSS blend modes). On mobile the hero content is vertically
   centered (see @media below), landing the video over a lighter part
   of the gradient, where the black rectangle showed. Desktop was never
   affected (video sits low, already over the gradient's darkest zone),
   so this override is scoped to mobile only. */
@media (max-width: 768px) {
  .mdc-hero--no-photo {
    background: radial-gradient(
      ellipse at 60% 40%,
      #0A0805 0%,
      #060503 55%,
      #000000 100%
    );
  }
}
.mdc-hero--no-photo .mdc-hero-photo { display: none; }
.mdc-hero-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  flex: 1;
  text-align: center;
  padding: 100px 24px clamp(64px, 11vw, 110px);
}
.mdc-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.75);
  margin-bottom: 24px;
}
.mdc-hero-eyebrow::before,
.mdc-hero-eyebrow::after {
  content: '';
  display: block;
  width: 28px;
  height: 1px;
  background: rgba(255,255,255,0.4);
}
.mdc-hero-logo {
  width: clamp(200px, 42vw, 380px);
  height: auto;
  margin-bottom: 12px;
  filter: drop-shadow(0 2px 16px rgba(0,0,0,0.3));
}
.mdc-hero h1 {
  font-family: var(--font-serif);
  font-size: clamp(3rem, 9vw, 7rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #fff;
  margin-bottom: 12px;
}
.mdc-hero h1 em {
  font-style: italic;
  color: #F2B84B;
}
.mdc-hero-names {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin-bottom: 28px;
}
.mdc-hero-desc {
  font-family: var(--font-sans);
  font-size: clamp(0.92rem, 1.8vw, 1.05rem);
  color: rgba(255,255,255,0.72);
  max-width: 500px;
  line-height: 1.75;
  margin-bottom: 40px;
}
.mdc-hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

/* ── Sobre ────────────────────────────────────────────────── */
.mdc-about {
  padding: clamp(80px, 12vw, 120px) 0;
  background: var(--mdc-bg);
}
.mdc-about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(48px, 8vw, 100px);
  align-items: center;
}
.mdc-label {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mdc-accent);
  display: block;
  margin-bottom: 16px;
}
.mdc-about h2 {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 300;
  line-height: 1.1;
  color: var(--mdc-text);
  margin-bottom: 20px;
}
.mdc-about p {
  font-family: var(--font-sans);
  font-size: 0.93rem;
  line-height: 1.85;
  color: var(--mdc-dim);
  margin-bottom: 14px;
}
.mdc-insta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 0.82rem;
  color: var(--mdc-accent);
  text-decoration: none;
  margin-top: 12px;
  transition: opacity 0.2s;
}
.mdc-insta:hover { opacity: 0.7; }
.mdc-about-imgs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.mdc-about-img {
  aspect-ratio: 3/4;
  overflow: hidden;
  background: var(--mdc-bg2);
}
.mdc-about-img:first-child { margin-top: 40px; }
.mdc-about-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.55s ease;
}
.mdc-about-img:hover img { transform: scale(1.04); }

/* ── Pacotes ──────────────────────────────────────────────── */
.mdc-packages {
  padding: clamp(80px, 12vw, 120px) 0;
  background: var(--mdc-bg2);
}
.mdc-section-head {
  text-align: center;
  margin-bottom: clamp(48px, 7vw, 72px);
}
.mdc-section-head h2 {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 300;
  color: var(--mdc-text);
  margin-bottom: 12px;
  line-height: 1.1;
}
.mdc-section-head p {
  font-family: var(--font-sans);
  font-size: 0.92rem;
  color: var(--mdc-dim);
  max-width: 480px;
  margin: 0 auto;
  line-height: 1.75;
}
.mdc-packages-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 32px;
}
.mdc-package {
  background: var(--mdc-bg);
  border: 1px solid var(--mdc-border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform 0.25s, box-shadow 0.25s;
}
.mdc-package:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(28,24,16,0.1);
}
.mdc-package--featured {
  border-color: var(--mdc-accent);
  box-shadow: 0 8px 32px rgba(217,140,10,0.15);
}
.mdc-package--featured:hover {
  box-shadow: 0 20px 56px rgba(217,140,10,0.2);
}
.mdc-package-top {
  height: 5px;
}
.mdc-package--prata   .mdc-package-top { background: #9BAAB4; }
.mdc-package--ouro    .mdc-package-top { background: var(--mdc-accent); }
.mdc-package--diamante .mdc-package-top { background: #6278C0; }
.mdc-package-header {
  padding: 28px 28px 20px;
  border-bottom: 1px solid var(--mdc-border);
}
.mdc-package-tier {
  font-family: var(--font-sans);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mdc-dim);
  display: block;
  margin-bottom: 6px;
}
.mdc-package-name {
  font-family: var(--font-serif);
  font-size: 1.7rem;
  font-weight: 400;
  color: var(--mdc-text);
}
.mdc-package-body {
  padding: 24px 28px;
  flex: 1;
}
.mdc-package-features {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.mdc-package-features li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-family: var(--font-sans);
  font-size: 0.84rem;
  color: var(--mdc-dim);
  line-height: 1.45;
}
.mdc-package-features li svg {
  flex-shrink: 0;
  margin-top: 1px;
  stroke: var(--mdc-accent);
}
.mdc-package-footer {
  padding: 20px 28px 28px;
  border-top: 1px solid var(--mdc-border);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}
.mdc-package-price-wrap {}
.mdc-package-price {
  font-family: var(--font-serif);
  font-size: 2.4rem;
  font-weight: 400;
  color: var(--mdc-text);
  line-height: 1;
}
.mdc-package-price-note {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  color: var(--mdc-dim);
  margin-top: 3px;
}
.mdc-package--featured .mdc-pkg-btn {
  background: var(--mdc-accent);
  border-color: var(--mdc-accent);
  color: #fff;
}
.mdc-package--featured .mdc-pkg-btn:hover {
  background: #C07808; border-color: #C07808;
}

/* Pagamento + termos */
.mdc-terms-bar {
  background: var(--mdc-bg);
  border: 1px solid var(--mdc-border);
  padding: 24px 32px;
  display: flex;
  gap: 48px;
  flex-wrap: wrap;
  align-items: flex-start;
}
.mdc-terms-group h4 {
  font-family: var(--font-sans);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mdc-accent);
  margin-bottom: 8px;
}
.mdc-terms-group ul {
  list-style: none; padding: 0; margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mdc-terms-group li {
  font-family: var(--font-sans);
  font-size: 0.82rem;
  color: var(--mdc-dim);
  display: flex;
  gap: 8px;
}
.mdc-terms-group li::before {
  content: '·';
  color: var(--mdc-accent);
  font-weight: bold;
}

/* ── Filtros da loja ──────────────────────────────────────── */
.mdc-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 36px;
}
.mdc-filter {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 8px 18px;
  border: 1px solid var(--mdc-border);
  background: transparent;
  color: var(--mdc-dim);
  cursor: pointer;
  transition: color 0.18s, border-color 0.18s, background 0.18s;
}
.mdc-filter:hover {
  border-color: var(--mdc-accent);
  color: var(--mdc-accent);
}
.mdc-filter.active {
  background: var(--mdc-text);
  border-color: var(--mdc-text);
  color: #fff;
}
.mdc-product {
  transition: transform 0.25s, box-shadow 0.25s, opacity 0.25s;
}
.mdc-product.hidden {
  display: none;
}

/* ── Produtos digitais ────────────────────────────────────── */
.mdc-shop {
  padding: clamp(80px, 12vw, 120px) 0;
  background: var(--mdc-bg);
}
.mdc-products-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.mdc-product {
  background: var(--mdc-bg);
  border: 1px solid var(--mdc-border);
  display: flex;
  flex-direction: column;
  min-width: 0;
  transition: transform 0.25s, box-shadow 0.25s;
}
.mdc-product:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 36px rgba(28,24,16,0.09);
}
.mdc-product-img {
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
  background: var(--mdc-bg2);
  display: flex;
  align-items: center;
  justify-content: center;
}
.mdc-product-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.mdc-product:hover .mdc-product-img img { transform: scale(1.04); }
.mdc-product-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--mdc-dim);
  opacity: 0.35;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  height: 100%;
}
.mdc-product-badges {
  position: absolute;
  top: 12px; left: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mdc-product-badge {
  position: relative;
  top: auto; left: auto;
  font-family: var(--font-sans);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 10px;
  color: #fff;
}
.mdc-badge--ebook  { background: var(--mdc-accent); }
.mdc-badge--preset { background: #B8A000; }
.mdc-badge--print  { background: var(--mdc-blue); }
.mdc-badge--livro  { background: var(--mdc-red); }
.mdc-badge--poses  { background: #8A5CB0; }
.mdc-ribbon {
  position: absolute;
  top: 22px;
  right: -32px;
  width: 130px;
  background: var(--mdc-green);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  padding: 6px 0;
  transform: rotate(45deg);
  z-index: 3;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}
.mdc-product-body {
  padding: 18px 20px 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.mdc-product-body h3 {
  font-family: var(--font-serif);
  font-size: 1.12rem;
  font-weight: 400;
  color: var(--mdc-text);
  margin-bottom: 6px;
}
.mdc-product-body p {
  font-family: var(--font-sans);
  font-size: 0.8rem;
  color: var(--mdc-dim);
  line-height: 1.6;
  flex: 1;
  margin-bottom: 16px;
}
.mdc-product-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--mdc-border);
}
/* The generic .mdc-btn padding (14px 32px) is too wide for the "Comprar"
   button to fit next to the price inside a narrow product card, which
   was forcing this row (and the whole page) to overflow horizontally
   on mobile. Give it its own compact sizing. */
.mdc-product-footer .mdc-btn {
  padding: 10px 18px;
  font-size: 0.72rem;
  flex-shrink: 0;
}
.mdc-product-footer .mdc-price {
  min-width: 0;
}
.mdc-price {
  font-family: var(--font-serif);
  font-size: 1.35rem;
  color: var(--mdc-text);
}
.mdc-price-soon {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  color: var(--mdc-dim);
  letter-spacing: 0.06em;
}

/* ── CTA final ────────────────────────────────────────────── */
.mdc-cta {
  padding: clamp(80px, 12vw, 120px) 0;
  background: var(--mdc-text);
  text-align: center;
}
.mdc-cta h2 {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 300;
  color: #fff;
  margin-bottom: 16px;
}
.mdc-cta p {
  font-family: var(--font-sans);
  font-size: 0.92rem;
  color: rgba(255,255,255,0.58);
  max-width: 420px;
  margin: 0 auto 36px;
  line-height: 1.8;
}
.mdc-cta-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ── Modal Quadros ────────────────────────────────────────── */
.mdc-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0,0,0,0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  backdrop-filter: blur(4px);
}
.mdc-modal[hidden] { display: none; }
.mdc-modal-inner {
  position: relative;
  width: 100%;
  max-width: 1100px;
  height: 85vh;
  background: #fff;
  border-radius: 4px;
  overflow: hidden;
}
.mdc-modal-close {
  position: absolute;
  top: 12px;
  right: 14px;
  z-index: 10;
  background: rgba(0,0,0,0.55);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
.mdc-modal-close:hover { background: rgba(0,0,0,0.85); }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 960px) {
  .mdc-about-grid { grid-template-columns: 1fr; }
  .mdc-about-img:first-child { margin-top: 0; }
  .mdc-packages-grid { grid-template-columns: 1fr; max-width: 400px; margin-inline: auto; }
  .mdc-products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .mdc-about-imgs { grid-template-columns: 1fr 1fr; }
  .mdc-products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mdc-terms-bar { flex-direction: column; gap: 24px; }
  .mdc-hero-content {
    justify-content: center;
    padding-top: 80px;
    padding-bottom: 80px;
  }
}