/* DeckLearn Blog Brasil — reutiliza a identidade visual já existente nas páginas culturais BR */
:root{
  --bg:#05070d;
  --ink:#f3f7ff;
  --muted:#a8bbd0;
  --c:#5ce1ff;
  --c2:#6e79ff;
  --gold:#d7b56d;
  --stroke:rgba(255,255,255,.10);
  --shadow:0 24px 64px rgba(0,0,0,.45);
  --theme-a:#012169;
  --theme-b:#c8102e;
  --theme-gold:#d7b56d;
  --glow-a:1,33,105;
  --glow-b:200,16,46;
  --culture:url('/assets/product-previews/br/decklearn-brasil-colecao-premium-hero.svg');
  --product:url('/assets/product-previews/br/decklearn-brasil-colecao-premium-hero.svg');
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-height:100svh;
  color:var(--ink);
  font-family:Inter,Sora,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:
    radial-gradient(1200px 650px at 8% -10%,rgba(var(--glow-a),.28),transparent 58%),
    radial-gradient(900px 520px at 100% 0%,rgba(var(--glow-b),.16),transparent 56%),
    radial-gradient(760px 440px at 50% 26%,rgba(215,181,109,.06),transparent 64%),
    var(--bg);
  line-height:1.6;
}
a{color:var(--c);text-decoration:none}
a:hover{text-decoration:underline;opacity:.96}
img{max-width:100%;height:auto}

/* Paletas copiadas das páginas de produto/culturais atuais */
body:has(a[href='/br/idiomas/ingles/']){
  --bg:#05070d;--ink:#f3f7ff;--muted:#a8bbd0;--c:#5ce1ff;
  --theme-a:#012169;--theme-b:#c8102e;--theme-gold:#d7b56d;
  --glow-a:1,33,105;--glow-b:200,16,46;
  --culture:url('/assets/product-previews/br/decklearn-brasil-londres-ingles-cultural-hero.svg');
  --product:url('/assets/product-previews/br/decklearn-ingles-premium-box.webp');
}
body:has(a[href='/br/idiomas/espanhol/']){
  --bg:#080305;--ink:#fff7ee;--muted:#d9bea3;--c:#ffc400;
  --theme-a:#c60b1e;--theme-b:#8f0715;--theme-gold:#ffc400;
  --glow-a:198,11,30;--glow-b:255,196,0;
  --culture:url('/assets/product-previews/br/decklearn-brasil-espanha-espanhol-cultural-hero.svg');
  --product:url('/assets/product-previews/br/decklearn-espanhol-premium-box.webp');
}
body:has(a[href='/br/idiomas/alemao/']){
  --bg:#050505;--ink:#f5f1e8;--muted:#bdb3a0;--c:#ffce00;
  --theme-a:#141414;--theme-b:#dd0000;--theme-gold:#ffce00;
  --glow-a:255,206,0;--glow-b:221,0,0;
  --culture:url('/assets/product-previews/br/decklearn-brasil-berlim-alemao-cultural-hero.svg');
  --product:url('/assets/product-previews/br/decklearn-alemao-premium-box.webp');
}
body:has(a[href='/br/idiomas/japones/']){
  --bg:#070b11;--ink:#eef5ff;--muted:#a6bed1;--c:#ffd84d;
  --theme-a:#e60012;--theme-b:#00c8ff;--theme-gold:#ffd84d;
  --glow-a:230,0,18;--glow-b:0,200,255;
  --culture:url('/assets/product-previews/br/decklearn-brasil-japao-japones-cultural-hero.svg');
  --product:url('/assets/product-previews/br/decklearn-japones-premium-box.webp');
}
body:has(a[href='/br/idiomas/coreano/']){
  --bg:#050a16;--ink:#f7fbff;--muted:#b9c8dc;--c:#9fc1ff;
  --theme-a:#0047a0;--theme-b:#cd2e3a;--theme-gold:#9fc1ff;
  --glow-a:0,71,160;--glow-b:205,46,58;
  --culture:url('/assets/product-previews/br/decklearn-brasil-coreia-coreano-cultural-hero-v2-sharp.webp');
  --product:url('/assets/product-previews/br/decklearn-coreano-premium-box.svg');
}
body:has(a[href='/br/anki/']),body:has(a[href='/br/blog/anki/']){
  --bg:#070a13;--ink:#edf5ff;--muted:#9fb3d8;--c:#37d6ff;
  --theme-a:#37d6ff;--theme-b:#6e79ff;--theme-gold:#ffd84d;
  --glow-a:55,214,255;--glow-b:110,121,255;
}

#site-header{position:relative;z-index:10000;isolation:isolate;pointer-events:auto}
#site-header *{pointer-events:auto}

.wrap{max-width:1180px;margin:0 auto;padding:clamp(14px,3vw,24px)}
h1,h2,h3{font-family:Sora,Inter,sans-serif;line-height:1.14}
h1{
  font-size:clamp(30px,4.6vw,54px);
  margin:.22em 0;
  font-weight:900;
  letter-spacing:-.035em;
  text-shadow:0 0 12px rgba(var(--glow-a),.35),0 0 28px rgba(var(--glow-b),.16)
}
h2{font-weight:900;letter-spacing:-.02em}
h3{font-weight:800}
p,li,.muted{color:var(--muted);line-height:1.72}
strong{color:var(--ink)}

/* Hero: mesma lógica visual dos cultural heroes dos produtos */
.hero,.article,.card{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(var(--glow-a),.30);
  background:
    radial-gradient(760px 320px at 0 0,rgba(var(--glow-a),.22),transparent 62%),
    radial-gradient(620px 300px at 100% 100%,rgba(var(--glow-b),.12),transparent 64%),
    linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.01));
  box-shadow:var(--shadow);
}
.hero,.article{border-radius:26px}
.card{border-radius:20px}
.hero::after,.article::after,.card::after{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  pointer-events:none;
  box-shadow:0 0 42px rgba(var(--glow-a),.16),inset 0 0 70px rgba(var(--glow-b),.055)
}
.hero>* , .article>* , .card>*{position:relative;z-index:2}

.hero{
  padding:clamp(24px,4vw,44px);
  margin:18px 0 22px;
  min-height:clamp(260px,34vw,390px);
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  isolation:isolate
}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background-image:
    linear-gradient(90deg,rgba(5,7,13,.97) 0%,rgba(5,7,13,.91) 42%,rgba(5,7,13,.44) 72%,rgba(5,7,13,.18) 100%),
    linear-gradient(0deg,rgba(5,7,13,.74),transparent 55%),
    var(--culture);
  background-size:cover;
  background-position:center;
  opacity:.88;
  transform:scale(1.01)
}
.hero h1,.hero p,.hero .breadcrumbs,.hero .tag,.hero .pills{max-width:760px}

/* home: coleção cultural como grande pano de fundo */
body:not(:has(.article)):not(:has(.hero a[href^='/br/idiomas/'])) .hero::before{
  background-image:
    linear-gradient(90deg,rgba(5,7,13,.96) 0%,rgba(5,7,13,.84) 48%,rgba(5,7,13,.28) 78%),
    linear-gradient(0deg,rgba(5,7,13,.75),transparent 54%),
    url('/assets/product-previews/br/decklearn-brasil-colecao-premium-hero.svg');
  background-position:center 44%
}

.breadcrumbs{
  display:flex;gap:8px;flex-wrap:wrap;align-items:center;
  color:#c8d6ec;font-size:.92rem;margin-bottom:12px;font-weight:700
}
.breadcrumbs a{color:#e7efff}

.tag{
  display:inline-flex;
  align-items:center;
  width:max-content;
  max-width:100%;
  gap:.5rem;
  padding:.38rem .72rem;
  border-radius:999px;
  border:1px solid color-mix(in srgb,var(--theme-gold) 55%,transparent);
  background:rgba(0,0,0,.34);
  color:var(--theme-gold);
  font-size:.79rem;
  font-weight:900;
  letter-spacing:.045em;
  text-transform:uppercase;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.025),0 0 18px rgba(var(--glow-a),.08)
}

.pills{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 0}
.pill{
  display:inline-flex;align-items:center;justify-content:center;
  padding:10px 15px;border-radius:999px;
  border:1px solid color-mix(in srgb,var(--theme-gold) 52%,transparent);
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.018));
  color:#f1f6ff;font-weight:850;
  box-shadow:0 10px 24px rgba(0,0,0,.22);
  transition:transform .12s ease,border-color .12s ease,background .12s ease
}
.pill:hover{transform:translateY(-1px);text-decoration:none;border-color:var(--theme-gold);background:rgba(var(--glow-a),.13)}

.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.card{
  min-height:220px;
  padding:20px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  isolation:isolate;
  transition:transform .14s ease,border-color .14s ease,box-shadow .14s ease
}
.card:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--card-accent,var(--theme-gold)) 62%,transparent);box-shadow:0 28px 62px rgba(0,0,0,.48)}
.card::before{
  content:"";position:absolute;inset:0;z-index:0;
  background-image:
    linear-gradient(90deg,rgba(5,7,13,.98) 0%,rgba(5,7,13,.90) 50%,rgba(5,7,13,.52) 72%,rgba(5,7,13,.28) 100%),
    linear-gradient(0deg,rgba(5,7,13,.86),rgba(5,7,13,.12) 65%),
    var(--card-image,var(--culture));
  background-size:cover;
  background-position:center;
  opacity:.9
}
.card h2,.card h3{margin:10px 0 6px;color:#fff}
.card h2 a,.card h3 a{color:#fff}
.card h2 a:hover,.card h3 a:hover{color:var(--card-accent,var(--theme-gold));text-decoration:none}
.card p{margin:0;color:#c8d6e9}
.card .tag{color:var(--card-accent,var(--theme-gold));border-color:color-mix(in srgb,var(--card-accent,var(--theme-gold)) 55%,transparent)}

/* Cada card da home reaproveita a arte cultural do produto correspondente */
body:not(:has(.article)) .grid>.card:nth-child(1){--card-accent:#5ce1ff;--card-image:url('/assets/product-previews/br/decklearn-brasil-londres-ingles-cultural-hero.svg')}
body:not(:has(.article)) .grid>.card:nth-child(2){--card-accent:#ffc400;--card-image:url('/assets/product-previews/br/decklearn-brasil-espanha-espanhol-cultural-hero.svg')}
body:not(:has(.article)) .grid>.card:nth-child(3){--card-accent:#ffce00;--card-image:url('/assets/product-previews/br/decklearn-brasil-berlim-alemao-cultural-hero.svg')}
body:not(:has(.article)) .grid>.card:nth-child(4){--card-accent:#ff5060;--card-image:url('/assets/product-previews/br/decklearn-brasil-japao-japones-cultural-hero.svg')}
body:not(:has(.article)) .grid>.card:nth-child(5){--card-accent:#9fc1ff;--card-image:url('/assets/product-previews/br/decklearn-brasil-coreia-coreano-cultural-hero-v2-sharp.webp')}
body:not(:has(.article)) .grid>.card:nth-child(6){--card-accent:#37d6ff;--card-image:url('/assets/product-previews/br/decklearn-brasil-colecao-premium-hero.svg')}

/* Nas categorias, o único card herda a própria cultura */
body:has(.hero a[href^='/br/idiomas/']) .grid .card{--card-image:var(--culture);--card-accent:var(--theme-gold)}

.meta{font-size:.9rem;color:#b9c8dd;font-weight:650}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:13px 18px;border-radius:14px;
  font-weight:900;color:#fff;
  background:linear-gradient(90deg,var(--theme-a),var(--theme-b) 58%,var(--theme-gold));
  border:1px solid rgba(255,255,255,.15);
  box-shadow:0 14px 28px rgba(var(--glow-b),.20),inset 0 0 0 1px rgba(255,255,255,.10);
  text-decoration:none;transition:transform .1s ease,filter .15s ease
}
.btn:hover{transform:translateY(-1px);filter:brightness(1.06);text-decoration:none}
.btn.gold{background:linear-gradient(90deg,var(--theme-a),var(--theme-b) 58%,var(--theme-gold));color:#fff}

/* Artigos: capa cultural sem criar nova imagem */
.article{
  padding:clamp(22px,4vw,42px);
  margin:18px 0 26px;
  background:
    radial-gradient(760px 360px at 0 0,rgba(var(--glow-a),.18),transparent 64%),
    linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012));
}
.article::before{
  content:"";
  display:block;
  position:relative;
  z-index:1;
  height:clamp(210px,34vw,390px);
  margin:calc(clamp(22px,4vw,42px) * -1) calc(clamp(22px,4vw,42px) * -1) 28px;
  background-image:
    linear-gradient(0deg,rgba(5,7,13,.90),rgba(5,7,13,.08) 55%,rgba(5,7,13,.05)),
    var(--culture);
  background-size:cover;
  background-position:center;
  border-bottom:1px solid rgba(var(--glow-a),.28)
}
.article h1{max-width:920px}
.article h2{margin-top:30px;font-size:clamp(21px,2.4vw,29px)}
.article p,.article li{font-size:1.02rem}

.example,.note,.cta{
  position:relative;
  border-radius:16px;
  padding:16px 18px;
  margin:16px 0;
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.025));
  border:1px solid rgba(var(--glow-a),.22);
  box-shadow:0 14px 34px rgba(0,0,0,.22)
}
.example{border-left:4px solid var(--c)}
.note{border-left:4px solid var(--theme-gold);background:linear-gradient(90deg,rgba(var(--glow-b),.085),rgba(255,255,255,.02))}
.cta{
  padding:22px;
  border-color:color-mix(in srgb,var(--theme-gold) 40%,transparent);
  background:
    radial-gradient(480px 180px at 0 0,rgba(var(--glow-a),.20),transparent 68%),
    radial-gradient(420px 180px at 100% 100%,rgba(var(--glow-b),.13),transparent 68%),
    linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.02))
}
.cta h2{margin-top:0}

.list{display:grid;gap:12px;margin-top:24px}
.list a{
  display:block;padding:14px 16px;border-radius:14px;
  border:1px solid rgba(var(--glow-a),.22);
  background:rgba(255,255,255,.025);
  color:#e7efff;font-weight:800
}
.list a:hover{text-decoration:none;border-color:var(--theme-gold);background:rgba(var(--glow-a),.08)}
.footer{text-align:center;color:var(--theme-gold);font-weight:900;padding:32px 20px}

@media(max-width:900px){
  .grid{grid-template-columns:1fr 1fr}
  .hero{min-height:320px}
}
@media(max-width:620px){
  .wrap{padding:12px}
  .grid{grid-template-columns:1fr}
  .hero{padding:22px 18px;min-height:330px;border-radius:22px}
  .hero::before{background-image:linear-gradient(0deg,rgba(5,7,13,.94) 0%,rgba(5,7,13,.68) 58%,rgba(5,7,13,.28) 100%),var(--culture);background-position:center}
  body:not(:has(.article)):not(:has(.hero a[href^='/br/idiomas/'])) .hero::before{background-image:linear-gradient(0deg,rgba(5,7,13,.95),rgba(5,7,13,.36)),url('/assets/product-previews/br/decklearn-brasil-colecao-premium-hero.svg')}
  .card{min-height:210px;padding:18px}
  .card::before{background-image:linear-gradient(0deg,rgba(5,7,13,.96) 0%,rgba(5,7,13,.80) 56%,rgba(5,7,13,.34) 100%),var(--card-image,var(--culture))}
  .article{padding:18px;border-radius:20px}
  .article::before{margin:-18px -18px 22px;height:230px}
  .pills{gap:8px}.pill{padding:9px 12px;font-size:.92rem}
}