/* Paleta inspirada em pintura: azul profundo (fundo), canvas/bege (fundo claro),
   siena queimada (destaques), verde sápia e ouro suave para acentos */
:root{
  --bg-0: #0b2545;
  --bg-1: #0e2a50;
  --surface: #10151a;
  --canvas: #f4ede1;
  --text-0: #0f1115;
  --text-1: #e6e9ef;
  --text-2: #c7cbd4;
  --brand: #2d6cdf;          /* azul cobalto/ultramarino */
  --accent-1: #d4a373;       /* ouro suave */
  --accent-2: #8a3b12;       /* siena queimada */
  --success: #36b24d;
  --muted: #2a2f38;
  --border: rgba(230,233,239,.12);
  --shadow: 0 10px 30px rgba(0,0,0,.25);
  --radius: 14px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  color: var(--text-1);
  background: linear-gradient(180deg, var(--bg-0), var(--surface));
  line-height:1.55;
}
h1,h2,h3{
  font-family: "Playfair Display", Georgia, "Times New Roman", Times, serif;
  margin: 0 0 .6rem 0;
  line-height:1.2;
}
h1,h2{letter-spacing:-0.01em}
h3{letter-spacing:-0.02em}
p{margin:0 0 1rem 0}
a{color:inherit}
img{max-width:100%;display:block}

.hist-arte h1,
.hist-arte h2,
.hist-arte h3{
  font-family: "Playfair Display", Georgia, "Times New Roman", Times, serif;
  letter-spacing:.02em;
}
/* Citação do Mestre (usa canvas de fundo) */
.quote-master{
  background: rgba(255,255,255,.78);
  border-left: 6px solid var(--accent-1);
  border-radius: 10px;
  padding: 12px 14px;
  box-shadow: 0 6px 16px rgba(0,0,0,.06);
  font-family: "Playfair Display", Georgia, "Times New Roman", Times, serif;
  color:#4b4e57;
  font-style: italic;
}

/* Exposição histórica: tom sépia nas imagens desta página */
.hist-arte .gallery__img{filter: sepia(.2)}
/* Respiro entre marcos da Evolução do Olhar */
.hist-arte #evolucao-do-olhar .gallery__grid{gap:20px}
/* Hover pergaminho + leve tracking */
.hist-arte #evolucao-do-olhar .context-card:hover{background: rgba(244,237,225,.9)}
.hist-arte #evolucao-do-olhar .context-card:hover *{letter-spacing:.01em}

/* Realce de exposição: sombra e leve escala nos marcos históricos */
.hist-arte .context-card{transition: filter .25s ease, transform .25s ease, box-shadow .25s ease}
.hist-arte .context-card:hover{
  filter: sepia(.08) brightness(1.04);
  transform: translateY(-2px) scale(1.01);
  box-shadow: 0 14px 36px rgba(0,0,0,.18);
}

/* Ponte de Conhecimento (elo entre mestre e método) */
.hist-arte .knowledge-bridge{
  display:flex;align-items:center;gap:10px;justify-content:center;margin-top:12px;
}
.hist-arte .kb-node{
  display:flex;align-items:center;gap:8px;
  padding:8px 10px;border-radius:999px;
  background: rgba(255,255,255,.75);
  border:1px solid rgba(212,163,115,.45);
  color:#4b4e57;
}
.hist-arte .kb-line{
  flex:0 0 34px;height:2px;background: linear-gradient(90deg, rgba(212,163,115,.6), rgba(45,108,223,.45));
  border-radius:2px;
}
.hist-arte .kb-arrow{color:var(--accent-1)}

/* TOC sticky em telas grandes */
@media (min-width: 1100px){
  .hist-arte #mapa-de-leitura .toc{
    position: sticky;
    top: 90px;
    max-height: calc(100vh - 120px);
    overflow:auto;
  }
}

/* Botão com glow suave para CTA editorial */
.btn-glow{
  box-shadow: 0 0 0 0 rgba(212,163,115,.45);
  animation: glowPulse 4s ease-in-out infinite;
}
@keyframes glowPulse{
  0%{box-shadow: 0 0 0 0 rgba(212,163,115,.0)}
  40%{box-shadow: 0 0 22px 6px rgba(212,163,115,.25)}
  60%{box-shadow: 0 0 22px 6px rgba(212,163,115,.25)}
  100%{box-shadow: 0 0 0 0 rgba(212,163,115,.0)}
}

.container{
  width: min(1120px, 92%);
  margin: 0 auto;
}

.skip-link{
  position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;
}
.skip-link:focus{
  position:fixed;left:1rem;top:1rem;width:auto;height:auto;background:#fff;color:#000;padding:.5rem .75rem;border-radius:8px;z-index:9999;
}

/* Header / Hero */
.site-header{
  padding: 48px 0 16px;
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(212,163,115,.2), transparent 60%),
    radial-gradient(800px 500px at 110% 10%, rgba(45,108,223,.25), transparent 50%),
    linear-gradient(180deg, transparent, rgba(0,0,0,.25));
}
.hero{
  display:grid;grid-template-columns: 1fr;gap: 28px;align-items:center;
}
.hero .site-nav{grid-column: 1 / -1}
.hero__copy{min-width:0}
.hero__media{align-self:stretch;min-width:0}
.hero__media .video-frame{width:100%}
.hero__title{
  font-size: clamp(38px, 5vw, 56px);
  letter-spacing:.2px;
}
.highlight{color:var(--accent-1)}
.hero__subtitle{
  color: var(--text-2);
  font-size: 1.05rem;
}
.chip{
  display:inline-flex;align-items:center;gap:.5rem;
  border:1px solid var(--border);
  background: rgba(255,255,255,.04);
  padding:.35rem .65rem;border-radius:999px;
  color: var(--text-2);
  font-weight:600;
  font-size:.8rem;
}
.chip--accent{
  border-color: rgba(212,163,115,.45);
  background: linear-gradient(180deg, rgba(212,163,115,.18), rgba(212,163,115,.08));
  color:#ffe9cf;
}
.hero__bullets{
  list-style:none;padding:0;margin:16px 0 8px;display:grid;gap:.5rem;
}
.hero__bullets li{display:flex;gap:.6rem;align-items:flex-start;color:var(--text-2)}
.icon{display:inline-flex;color:var(--accent-1)}

.hero__meta{
  display:flex;flex-wrap:wrap;gap:14px;margin:16px 0 10px;
  align-items:center;
}
.price{display:flex;flex-direction:column}
.price__full{font-size:1.8rem;color:#fff}
.price__installments{color:var(--text-2)}
.asterisk{opacity:.7}
.rating{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.stars{display:inline-flex;gap:4px}
.star,
.star::before{
  width:18px;height:18px;display:inline-block;border-radius:3px;position:relative;
}
.star{background:rgba(255,255,255,.12);clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);}
.star--full{background: linear-gradient(180deg, #ffd76b, #f2b23a)}
.rating__text{color:#ffe9cf}
.badge{
  display:inline-flex;align-items:center;gap:.4rem;
  color:#d6e3ff;border:1px solid rgba(45,108,223,.35);
  background: linear-gradient(180deg, rgba(45,108,223,.15), rgba(45,108,223,.05));
  padding:.25rem .5rem;border-radius:999px;font-size:.78rem;
}

.hero__ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.9rem 1.2rem;border-radius:12px;border:1px solid transparent;
  text-decoration:none;font-weight:700;letter-spacing:.2px;transition:.2s ease;
}
.btn--primary{
  background: linear-gradient(180deg, var(--brand), #1d51b3);
  color:#fff;box-shadow: var(--shadow);
}
.btn--primary:hover{transform: translateY(-1px);filter:brightness(1.05)}
.btn--ghost{
  background: transparent;border-color: var(--border);color: var(--text-2)
}
.btn--ghost:hover{border-color: rgba(230,233,239,.3);color:#fff}
.btn--outline{
  background: transparent;border-color: rgba(212,163,115,.5);color:#ffe9cf;
}
.btn--outline:hover{background: rgba(212,163,115,.08)}
.note{display:block;color:var(--text-2);opacity:.8;margin-top:8px}

/* Sections */
.section{padding:56px 0;border-top:1px solid var(--border)}
.section:first-of-type{border-top:0}
.section__header{margin-bottom:20px}
.section__header p{color:var(--text-2)}

/* Seções de fundo claro (canvas) */
.section--canvas{
  background: var(--canvas);
  color: var(--text-0);
}
.section--canvas .section__header p{color:#4b4e57}
.section--canvas p{line-height:1.8}

.canvas{
  position: relative;
  isolation: isolate;
}
.canvas::before{
  /* textura premium de linho/algodão com ruído muito sutil (~2%) */
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.02;
  background:
    repeating-linear-gradient(0deg, #000 0 1px, transparent 2px 6px),
    repeating-linear-gradient(90deg, #000 0 1px, transparent 2px 6px);
  mix-blend-mode:multiply;
}
.canvas > *{position: relative; z-index: 1;}

.canvas-texture{
  /* textura sutil de tela com gradientes sobre o canvas */
  background-image:
    radial-gradient(1200px 600px at 10% -10%, rgba(212,163,115,.08), transparent 60%),
    radial-gradient(800px 500px at 110% 10%, rgba(45,108,223,.08), transparent 50%),
    linear-gradient(180deg, rgba(0,0,0,.03), rgba(0,0,0,0));
  position: relative;
}
.canvas-texture::after{
  /* leve ruído granulado sem imagens externas (padrão pontilhado discreto) */
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.04;
  background:
    radial-gradient(1px 1px at 10% 20%, #000 100%, transparent 100%),
    radial-gradient(1px 1px at 30% 80%, #000 100%, transparent 100%),
    radial-gradient(1px 1px at 50% 50%, #000 100%, transparent 100%),
    radial-gradient(1px 1px at 70% 30%, #000 100%, transparent 100%),
    radial-gradient(1px 1px at 90% 60%, #000 100%, transparent 100%);
  background-size: 280px 220px, 310px 260px, 260px 280px, 300px 300px, 270px 260px;
  mix-blend-mode:multiply;
  border-top: 1px solid rgba(0,0,0,.04);
  border-bottom: 1px solid rgba(0,0,0,.04);
}
/* Canvas frame: borda dupla sutil simulando chassi */
.canvas-frame{position:relative;border-radius:14px;box-shadow: inset 0 0 10px rgba(0,0,0,.05)}
.canvas-frame::before{
  content:"";position:absolute;inset:6px;border-radius:12px;
  border:1px solid rgba(212,163,115,.65); /* ouro suave (inset 1px) */
  pointer-events:none;
}
.canvas-frame::after{
  content:"";position:absolute;inset:0;border-radius:14px;
  box-shadow: inset 0 0 0 2px rgba(212,163,115,.25); /* outset 2px */
  pointer-events:none;
}

/* Canvas background subtle texture and depth */
.canvas-bg{
  position: relative;
  border: 1px solid rgba(0,0,0,.05);
  box-shadow: inset 0 0 15px rgba(0,0,0,.02);
}
.canvas-bg::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.02;
  background:
    radial-gradient(1px 1px at 15% 25%, #000 100%, transparent 100%),
    radial-gradient(1px 1px at 55% 75%, #000 100%, transparent 100%),
    radial-gradient(1px 1px at 85% 45%, #000 100%, transparent 100%);
  background-size: 300px 260px, 320px 280px, 280px 300px;
  mix-blend-mode:multiply;
  border-radius: inherit;
}

/* Footer link fade-in */
.site-footer a{opacity:.9;transition: opacity .2s ease, color .15s ease}
.site-footer a:hover{opacity:1}

/* Gallery study cards - premium hover */
#galeria-inspiracao .card{position:relative;box-shadow: 0 8px 22px rgba(0,0,0,.08)}
#galeria-inspiracao .card h3{color: var(--accent-1)}
#galeria-inspiracao .card .tech-badge{
  position:absolute;top:10px;right:10px;
  background: linear-gradient(180deg, rgba(212,163,115,.35), rgba(212,163,115,.15));
  border:1px solid rgba(212,163,115,.55);
  color:#5b3b15;
  border-radius:999px;
  font-size:.78rem;
  padding:.2rem .5rem;
  opacity:0;transform: translateY(-4px);
  transition: opacity .2s ease, transform .2s ease;
}
#galeria-inspiracao .card:hover .tech-badge{opacity:1;transform: translateY(0)}

/* Button focus elevation */
.btn--primary:focus{outline:none;box-shadow: 0 14px 30px rgba(0,0,0,.28), 0 0 0 2px rgba(255,255,255,.12)}

.section--learn .feature-list{
  list-style:none;padding:0;margin:0;display:grid;gap:12px;
}
.section--learn .feature-list li{
  display:flex;align-items:flex-start;gap:.6rem;color:var(--text-2);
}

.benefits{
  display:grid;grid-template-columns: repeat(2, 1fr);gap:16px;margin-top:8px;
}
.card{
  background: rgba(255,255,255,.03);
  border:1px solid var(--border);
  border-radius: var(--radius);
  padding:18px;
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
}
.card__icon{color:var(--accent-1);margin-bottom:8px}

/* História: hover editorial nos cards de marcos */
.hist-arte .context-card{transition: filter .25s ease, transform .25s ease, box-shadow .25s ease}
.hist-arte .context-card:hover{
  filter: sepia(.12) brightness(1.05);
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(0,0,0,.18);
}

/* Materiais Inclusos */
.materials{
  display:grid;grid-template-columns:1fr;gap:14px;
}
.material{
  background: rgba(255,255,255,.6);
  border:1px solid rgba(0,0,0,.06);
  border-radius: 14px;
  padding:16px;
  box-shadow: 0 6px 16px rgba(0,0,0,.06);
}
.section--canvas .material{background: rgba(255,255,255,.75)}
.material__icon{color:var(--accent-2);margin-bottom:6px}
.material h3{margin:0 0 .25rem 0}
.material p{margin:0;color:#4b4e57}

/* Galeria */
.gallery{margin-top:8px}
.gallery__grid{
  display:grid;grid-template-columns:1fr;gap:12px;
}
.gallery__item{position:relative}
.gallery__img{
  width:100%;height:auto;display:block;border-radius:12px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.gallery__img:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(0,0,0,.18);
}

/* Course Preview (Sneak Peek) */
.course-preview .preview__grid{
  display:grid;grid-template-columns:1fr;gap:12px;
}
.preview__item{position:relative}
.preview__img{
  width:100%;aspect-ratio:1/1;border-radius:12px;display:block;
  object-fit: cover;box-shadow: var(--shadow);
}
.preview__img.is-left{object-position: 25% 50%}
.preview__img.is-center{object-position: 50% 50%}
.preview__img.is-right{object-position: 75% 50%}

/* Accordion (Conteúdo) */
.accordion{display:grid;gap:10px}
.acc-item{
  border:1px solid var(--border);
  border-radius: 14px;
  background: rgba(255,255,255,.03);
  overflow:hidden;
  transition: box-shadow .25s ease, border-color .25s ease;
}
.acc-item > summary{
  list-style:none;
  cursor:pointer;
  display:flex;align-items:center;gap:10px;
  padding:16px 16px;
  font-weight:700;
  transition: background-color .2s ease;
}
.acc-item > summary::-webkit-details-marker{display:none}
.acc-item > summary:hover{
  background: rgba(212,163,115,.12);
}
.acc-item[open]{
  box-shadow: 0 16px 40px rgba(0,0,0,.28);
  border-color: rgba(212,163,115,.35);
}
.acc-num{
  min-width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:10px;background:linear-gradient(180deg, rgba(212,163,115,.18), rgba(212,163,115,.07));
  border:1px solid rgba(212,163,115,.4);color:#ffe9cf;
}
.acc-title{flex:1}
.acc-content{
  margin:0;padding:0 18px 16px 54px;
  color: var(--text-1); /* contraste adequado em fundo escuro */
  line-height:1.6;
}
.acc-content li{margin:8px 0}
.acc-item[open] .acc-content{
  animation: fadeIn .28s ease both;
}
/* Ajuste de contraste em seções claras (canvas) */
.section--canvas .acc-content{
  color: var(--text-0);
}
@keyframes fadeIn{
  from{opacity:0;transform: translateY(-3px)}
  to{opacity:1;transform: translateY(0)}
}

.section__actions{margin-top:18px}

/* Autor */
.author{display:grid;grid-template-columns: 1fr;gap:16px;align-items:center}
.author__media{order:-1}
.author__photo{
  height:220px;border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(212,163,115,.25), rgba(212,163,115,.05)),
    radial-gradient(600px 260px at 30% 0%, rgba(45,108,223,.25), transparent 60%),
    linear-gradient(135deg, #9b7f64, #5b4634 60%);
  background-blend-mode: overlay, normal, normal;
  display:flex;align-items:center;justify-content:center;
}
.frame{
  position:relative;
  box-shadow: 0 12px 28px rgba(0,0,0,.35);
}
.frame::before{
  content:"";position:absolute;inset:-10px;border-radius:14px;
  border:2px solid rgba(212,163,115,.55);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.25);
  pointer-events:none;
}
.frame--double::after{
  content:"";position:absolute;inset:-18px;border-radius:18px;
  border:1px solid rgba(255,255,255,.18);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.12);
  pointer-events:none;
}
/* Garantir que a moldura do vídeo não interfira no layout da hero */
.video-frame.frame::before{inset:0}
.video-frame.frame.frame--double::after{inset:0;border-radius:14px}
.video-frame iframe{position:relative;z-index:1}
.author__icon{color:var(--accent-1);opacity:.95;filter: drop-shadow(0 6px 14px rgba(0,0,0,.25));}
.author__name{font-weight:700;margin:0 0 .25rem 0}
.author__tag{
  display:inline-block;background:rgba(255,255,255,.04);border:1px solid var(--border);
  border-radius:999px;padding:.2rem .6rem;margin-bottom:10px;color:var(--text-2)
}

/* Footer */
.site-footer{
  border-top:1px solid var(--border);
  padding: 28px 0 18px;
  background: linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.35));
}
.footer__grid{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.footer__brand{display:flex;align-items:center;gap:.5rem;color:#e9e9f2}
.divider{opacity:.4}
.footer__fineprint{color:var(--text-2);opacity:.8;margin-top:8px;font-size:.9rem}

/* CRO — shimmer no botão principal */
.btn--primary{position:relative;overflow:hidden}
.btn--primary::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background: linear-gradient(120deg,
    transparent 0%,
    rgba(255,255,255,.15) 12%,
    rgba(212,163,115,.45) 28%,
    rgba(255,255,255,.7) 38%,
    rgba(45,108,223,.35) 48%,
    rgba(255,255,255,.15) 58%,
    transparent 70%);
  transform: translateX(-120%);
  filter: blur(.5px);
  opacity:.0;
  animation: shimmer 5s linear infinite;
  animation-delay: .8s;
}
@keyframes shimmer{
  0%{transform: translateX(-120%);opacity:0}
  6%{transform: translateX(120%);opacity:.8}
  7%{opacity:0}
  100%{transform: translateX(120%);opacity:0}
}

/* Animação de entrada por scroll (CSS-only, progressive) */
@keyframes fadeUp{
  from{opacity:0;transform: translateY(10px)}
  to{opacity:1;transform: translateY(0)}
}
@supports (animation-timeline: view()){
  .section{
    animation-name: fadeUp;
    animation-duration: .8s;
    animation-timing-function: ease;
    animation-fill-mode: both;
    animation-timeline: view();
    animation-range: entry 0% cover 30%;
  }
}
@media (prefers-reduced-motion: no-preference){
  @supports not (animation-timeline: view()){
    .section{animation: fadeUp .7s ease both}
  }
}

/* Selo de garantia próximo ao CTA */
.guarantee{
  display:inline-flex;align-items:center;gap:.5rem;
  margin-top:8px;
  color:#14376b;
  background: linear-gradient(180deg, rgba(45,108,223,.12), rgba(212,163,115,.12));
  border:1px solid rgba(45,108,223,.35);
  border-radius:999px;
  padding:.25rem .6rem;
}
.guarantee__icon{color:var(--accent-1)}

/* Responsive */
@media (min-width: 880px){
  .hero{grid-template-columns: 1.15fr 1fr; align-items:center}
  .hero__copy{grid-column:1}
  .hero__media{grid-column:2}
  .benefits{grid-template-columns: repeat(4, 1fr)}
  .materials{grid-template-columns: repeat(3, 1fr)}
  .author{grid-template-columns: .95fr 1.35fr}
  .author__photo{height:360px}
  .gallery__grid{grid-template-columns: repeat(3, 1fr)}
  .course-preview .preview__grid{grid-template-columns: repeat(3, 1fr)}
}

/* Sticky CTA (mobile) */
.sticky-cta,
.sticky-buy{
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  display:none;
  z-index: 999;
  pointer-events:none;
}
.sticky-cta .btn,
.sticky-buy .btn{
  width:100%;
  pointer-events:auto;
}
@media (max-width: 879px){
  .sticky-cta.is-visible,
  .sticky-buy.is-visible{display:block}
  .section{padding:40px 0}
}

/* Links internos elegantes (não botões) */
a:not(.btn):hover{
  color: var(--accent-2);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
  transition: color .15s ease;
}
/* Hero video */
.hero__media{align-self:stretch}
.video-frame{
  background:#000;border-radius:14px;overflow:hidden;
  box-shadow: var(--shadow);
  aspect-ratio: 16 / 9;
}
.video-frame iframe{
  width:100%;height:100%;display:block;border:0;
}