:root{
    --bg:#0b0f14;
    --panel:#0f1620;
    --text:#e7edf5;
    --muted:#a8b3c3;
    --line:rgba(255,255,255,.10);
    --accent:#33ff99;
    --accent2:#58a6ff;
    --shadow: 0 18px 50px rgba(0,0,0,.35);
    --radius:18px;
    --max: 980px;
}
*{box-sizing:border-box}
body{
    margin:0;
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Helvetica Neue", Helvetica, sans-serif;
    color:var(--text);
    background: radial-gradient(1200px 700px at 70% -10%, rgba(51,255,153,.12), transparent 60%),
    radial-gradient(1000px 600px at 20% 0%, rgba(88,166,255,.14), transparent 55%),
    var(--bg);
    line-height:1.55;
}
a{color:inherit}
.wrap{max-width:var(--max); margin:0 auto; padding:24px;}
.nav{
    display:flex; justify-content:space-between; align-items:center;
    gap:16px; padding:14px 0 6px;
}
.brand{
    display:flex; align-items:center; gap:12px;
    font-weight:800; letter-spacing:.5px;
}
.dot{
    width:12px; height:12px; border-radius:999px;
    background: linear-gradient(135deg,var(--accent),var(--accent2));
    box-shadow: 0 0 24px rgba(51,255,153,.25);
}
.chip{
    border:1px solid var(--line);
    background: rgba(255,255,255,.03);
    padding:8px 12px;
    border-radius:999px;
    font-size:13px;
    color:var(--muted);
    white-space:nowrap;
}

.hero{
    margin-top:18px;
    border:1px solid var(--line);
    background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
    border-radius: var(--radius);
    padding:34px 26px;
    box-shadow: var(--shadow);
    position:relative;
    overflow:hidden;
}
.hero:before{
    content:"";
    position:absolute; inset:-2px;
    background: radial-gradient(600px 300px at 20% 0%, rgba(51,255,153,.10), transparent 55%),
    radial-gradient(520px 260px at 85% 30%, rgba(88,166,255,.12), transparent 60%);
    pointer-events:none;
}
.hero > *{position:relative}
h1{
    font-size: clamp(30px, 5vw, 46px);
    line-height:1.05;
    margin:0 0 10px;
    letter-spacing:.2px;
}
.subtitle{
    font-size: clamp(15px, 2vw, 18px);
    color: var(--muted);
    margin:0 0 18px;
    max-width: 62ch;
}
.grid{
    display:grid; gap:16px;
    grid-template-columns: 1.1fr .9fr;
    margin-top:20px;
}
@media (max-width: 880px){
    .grid{grid-template-columns:1fr}
}
.box{
    border:1px solid var(--line);
    background: rgba(15,22,32,.55);
    border-radius: var(--radius);
    padding:18px 18px;
}
.box h3{
    margin:0 0 10px;
    font-size:16px;
    letter-spacing:.3px;
}
.bullets{margin:0; padding-left:18px; color:var(--muted)}
.bullets li{margin:8px 0}
.ctaRow{
    display:flex; flex-wrap:wrap; gap:12px; align-items:center;
    margin-top:18px;
}
.btn{
    display:inline-flex; align-items:center; justify-content:center;
    gap:10px;
    padding:12px 16px;
    border-radius: 999px;
    border:1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.04);
    text-decoration:none;
    font-weight:700;
    transition: transform .12s ease, background .12s ease, border-color .12s ease;
    cursor:pointer;
}
.btn:hover{transform: translateY(-1px); background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.22)}
.btn.primary{
    border:0;
    background: linear-gradient(135deg, rgba(51,255,153,.95), rgba(88,166,255,.95));
    color:#061018;
    box-shadow: 0 16px 34px rgba(51,255,153,.14);
}
.btn.primary:hover{transform: translateY(-1px); filter:saturate(1.06)}
.btn small{opacity:.8; font-weight:800}
.note{font-size:13px; color:var(--muted); margin:0}

.section{margin-top:22px}
.section h2{
    margin:0 0 10px;
    font-size:22px;
    letter-spacing:.3px;
}
.books{
    display:grid; gap:14px;
    grid-template-columns: repeat(2, minmax(0,1fr));
    margin-top:10px;
}
@media (max-width: 760px){
    .books{grid-template-columns:1fr}
}
.book{
    border:1px solid var(--line);
    background: rgba(255,255,255,.03);
    border-radius: var(--radius);
    padding:16px 16px;
    position:relative;
    overflow:hidden;
}
.book:before{
    content:"";
    position:absolute; inset:-2px;
    background: radial-gradient(520px 220px at 0% 0%, rgba(51,255,153,.08), transparent 60%);
    pointer-events:none;
}
.book > *{position:relative}
.kicker{
    display:inline-flex; align-items:center; gap:8px;
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:1.2px;
    color: rgba(231,237,245,.78);
    margin-bottom:8px;
}
.kicker span{
    width:8px; height:8px; border-radius:999px;
    background: var(--accent);
    box-shadow:0 0 18px rgba(51,255,153,.22);
}
.book h3{margin:0 0 8px; font-size:18px}
.book p{margin:0; color:var(--muted)}
.divider{
    height:1px; background: var(--line);
    margin:18px 0;
}
.quote{
    margin:0;
    padding:14px 16px;
    border-left: 3px solid rgba(51,255,153,.55);
    background: rgba(255,255,255,.03);
    border-radius: 12px;
    color: rgba(231,237,245,.88);
}

footer{
    margin-top:26px;
    padding:18px 0 10px;
    color: var(--muted);
    font-size:13px;
}
.footerRow{
    display:flex; gap:12px; flex-wrap:wrap; align-items:center; justify-content:space-between;
}

.dp-section{
    padding: 56px 16px;
    background: linear-gradient(180deg, rgba(10,10,12,.92), rgba(10,10,12,1));
    color: #fff;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
.dp-wrap{ max-width: 1100px; margin: 0 auto; }
.dp-header{ margin-bottom: 18px; }
.dp-title{ font-size: 28px; margin: 0 0 8px; letter-spacing: .2px; }
.dp-subtitle{ margin: 0; opacity: .85; max-width: 70ch; line-height: 1.45; }


.carousel{
    position: relative;
    margin-top: 18px;
}

/* [AJUSTE] viewport é o único scroll container */
.carousel-viewport{
    overflow: hidden;
    overflow-x: auto;
    border-radius: 18px;
    outline: none;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;   /* snap aqui */
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.carousel-viewport::-webkit-scrollbar{ display:none; }

/* [AJUSTE] track NÃO rola (quem rola é o viewport) */
.carousel-track{
    display: flex;
    gap: 14px;
    padding: 14px;
    overflow: visible;
    flex-wrap: nowrap;              /* IMPORTANTÍSSIMO: não quebrar linha */
}

/* (recomendado) snap por card */
.dp-card{
    scroll-snap-align: start;
    /* ✅ CORREÇÃO ESSENCIAL: impedir o encolhimento e forçar overflow horizontal */
    flex: 0 0 calc((100% - (14px * 3)) / 4); /* 4 cards por "tela" no desktop */
}

@media (max-width: 980px){
    .dp-card{ flex: 0 0 calc((100% - 14px) / 2); } /* 2 por tela */
}
@media (max-width: 560px){
    .dp-card{ flex: 0 0 100%; } /* 1 por tela */
}

.carousel-btn{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    z-index: 999;      /* importante */
    pointer-events:auto;
}

.dp-card-inner{
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 210px;
    border-radius: 18px;
    transform-style: preserve-3d;
    transition: transform .55s ease;
}
/* [AJUSTE DP] Flip por clique (não por hover) */
.dp-card{ cursor: pointer; }

/* remove o flip no hover (se existir em outro lugar do css) */
.dp-card:hover .dp-card-inner{ transform: none; }

/* flip acontece quando o card ganha a classe .is-flipped */
.dp-card.is-flipped .dp-card-inner{
    transform: rotateY(180deg);
}

/* a imagem fica clicável para lightbox */
.dp-front .dp-avatar{
    cursor: zoom-in;
}
.dp-front, .dp-back{
    position: absolute;
    inset: 0;
    border-radius: 18px;
    padding: 16px 16px 14px;
    backface-visibility: hidden;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.dp-front{
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.dp-back{
    transform: rotateY(180deg);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
}

.dp-badge{
    align-self: flex-start;
    font-size: 12px;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.16);
    letter-spacing: .2px;
    opacity: .95;
}
.dp-name{ margin: 6px 0 0; font-size: 18px; }
.dp-role{ margin: 0; font-size: 13px; opacity: .85; }
.dp-blurb{ margin: 6px 0 0; font-size: 13px; line-height: 1.45; opacity: .9; }

.dp-back h4{
    margin: 0;
    font-size: 14px;
    letter-spacing: .2px;
    opacity: .95;
}
.dp-back p{ margin: 0; font-size: 13px; line-height: 1.5; opacity: .9; }

.carousel-btn{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(0,0,0,.40);
    color: #fff;
    cursor: pointer;
    display: grid;
    place-items: center;
    z-index: 5;
    transition: transform .15s ease, background .15s ease, opacity .15s ease;
    backdrop-filter: blur(6px);
    user-select: none;
}
.carousel-btn:hover{
    background: rgba(0,0,0,.58);
    transform: translateY(-50%) scale(1.04);
}
.carousel-btn span{ font-size: 26px; line-height: 1; }
.carousel-btn.prev{ left: -10px; }
.carousel-btn.next{ right: -10px; }

@media (max-width: 560px){
    .carousel-btn.prev{ left: 6px; }
    .carousel-btn.next{ right: 6px; }
}

.dp-cta{
    margin-top: 18px;
    padding: 16px;
    border-radius: 18px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.10);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.dp-cta-text{ margin: 0; opacity: .9; }
.dp-cta-btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 16px;
    border-radius: 14px;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.18);
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    transition: transform .15s ease, background .15s ease;
}
.dp-cta-btn:hover{
    transform: translateY(-1px);
    background: rgba(255,255,255,.20);
}

/* [AJUSTE LIGHTBOX DP] ===== Lightbox Dramatis Personae ===== */
.dp-front .dp-avatar{
    cursor: zoom-in;
}

/* overlay */
.dp-lightbox{
    position: fixed;
    inset: 0;
    display: none;
    place-items: center;
    background: rgba(0,0,0,.82);
    z-index: 99999;
    padding: 18px;
}

.dp-lightbox.open{
    display: grid;
}

.dp-lb-stage{
    max-width: min(980px, 96vw);
    max-height: 92vh;
    width: 100%;
    display: grid;
    place-items: center;
}

.dp-lightbox img{
    max-width: 100%;
    max-height: 92vh;
    height: auto;
    width: auto;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.18);
    box-shadow: 0 18px 60px rgba(0,0,0,.6);
    background: rgba(0,0,0,.2);
}

/* botão fechar */
.dp-lb-close{
    position: absolute;
    top: 14px;
    right: 14px;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.22);
    background: rgba(0,0,0,.45);
    color: #fff;
    cursor: pointer;
    display: grid;
    place-items: center;
    font-size: 28px;
    line-height: 1;
    backdrop-filter: blur(6px);
}
.dp-lb-close:hover{
    background: rgba(0,0,0,.62);
}

/* trava scroll quando aberto */
body.dp-lb-lock{
    overflow: hidden;
}

/* ====== CAPA / BANNER (slider-ready) ====== */
.cover-slider{
    margin-top: 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    background: rgba(255,255,255,.03);
    box-shadow: var(--shadow);
    position: relative;
}

.cover-viewport{
    overflow: hidden;
}

.cover-track{
    display: flex;
    transform: translateX(0);
    transition: transform .45s ease;
}

.cover-slide{
    min-width: 100%;
    position: relative;
    aspect-ratio: 16 / 7; /* desktop */
    background: #0a0d12;
}

@media (max-width: 880px){
    .cover-slide{ aspect-ratio: 16 / 9; }
}
@media (max-width: 560px){
    .cover-slide{ aspect-ratio: 4 / 5; } /* mobile mais “capa” */
}

.cover-slide img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: saturate(1.05) contrast(1.02);
}

/* overlay para legibilidade */
.cover-overlay{
    position:absolute;
    inset:0;
    background:
            linear-gradient(90deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.25) 55%, rgba(0,0,0,.05) 100%),
            radial-gradient(900px 420px at 20% 20%, rgba(51,255,153,.14), transparent 60%),
            radial-gradient(700px 320px at 75% 25%, rgba(88,166,255,.14), transparent 60%);
    pointer-events:none;
}

/* conteúdo na capa */
.cover-content{
    position:absolute;
    left: 18px;
    right: 18px;
    bottom: 18px;
    max-width: 720px;
}

.cover-kicker{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding: 7px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.16);
    background: rgba(0,0,0,.35);
    color: rgba(231,237,245,.92);
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.cover-kicker .kdot{
    width: 8px; height: 8px; border-radius: 999px;
    background: linear-gradient(135deg,var(--accent),var(--accent2));
    box-shadow: 0 0 18px rgba(51,255,153,.22);
}

.cover-title{
    margin: 0 0 8px;
    font-size: clamp(22px, 3.2vw, 38px);
    line-height: 1.06;
    letter-spacing: .2px;
    text-shadow: 0 18px 40px rgba(0,0,0,.55);
}

.cover-subtitle{
    margin: 0;
    color: rgba(231,237,245,.82);
    font-size: clamp(13px, 1.6vw, 16px);
    max-width: 62ch;
    text-shadow: 0 18px 40px rgba(0,0,0,.55);
}

/* botões do slider (aparecem só se tiver +1 slide) */
.cover-btn{
    position:absolute;
    top:50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(0,0,0,.42);
    color:#fff;
    display:grid;
    place-items:center;
    cursor:pointer;
    z-index: 5;
    backdrop-filter: blur(6px);
    user-select:none;
    transition: transform .15s ease, background .15s ease, opacity .15s ease;
    opacity: 0; /* default hidden */
    pointer-events: none; /* default hidden */
}
.cover-btn:hover{
    background: rgba(0,0,0,.60);
    transform: translateY(-50%) scale(1.04);
}
.cover-btn.prev{ left: 10px; }
.cover-btn.next{ right: 10px; }
.cover-btn span{ font-size: 26px; line-height: 1; }

.cover-slider.has-multiple .cover-btn{
    opacity: 1;
    pointer-events: auto;
}

/* “dots” opcionais (se tiver +1) */
.cover-dots{
    position:absolute;
    left: 18px;
    top: 16px;
    display:flex;
    gap: 8px;
    z-index: 6;
    opacity: 0;
    pointer-events: none;
}
.cover-slider.has-multiple .cover-dots{
    opacity: 1;
    pointer-events: auto;
}
.cover-dot{
    width: 9px; height: 9px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.22);
    background: rgba(255,255,255,.10);
    cursor:pointer;
}
.cover-dot.active{
    background: linear-gradient(135deg,var(--accent),var(--accent2));
    border-color: rgba(255,255,255,.10);
}
/* =========================
HERO (texto + mockup)
========================== */
header.hero{
    padding:0;
}
.hero-inner{
    max-width:var(--max);
    margin:0 auto;
    padding:3.2rem 1.2rem 2.4rem;
    display:grid;
    grid-template-columns: 1.25fr .9fr;
    gap:2rem;
    align-items:center;
}
.hero h1{
    margin:.8rem 0 .6rem;
    font-size:2.3rem;
    letter-spacing:.02em;
    line-height:1.12;
}
.subtitle{
    margin:0;
    color:var(--muted);
    max-width:70ch;
    font-size:1.05rem;
}
.hero-cta{
    display:flex;
    flex-wrap:wrap;
    gap:.75rem;
    margin-top:1.35rem;
}


.btn.ghost{opacity:.95}
.hero-note{
    margin-top:1rem;
    color:rgba(234,240,255,.80);
    font-size:.95rem;
}

.hero-mock{
    position:relative;
    width:min(420px, 100%);
    margin-left:auto;
    border-radius:18px;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.12);
    overflow:hidden;
    box-shadow: var(--shadow);
}
.hero-mock img{width:100%; display:block}
.mock-badge{
    position:absolute;
    left:14px;
    bottom:14px;
    padding:.45rem .7rem;
    border-radius:999px;
    font-size:.78rem;
    letter-spacing:.02em;
    color:rgba(255,255,255,.92);
    background:rgba(0,0,0,.45);
    border:1px solid rgba(255,255,255,.18);
    backdrop-filter: blur(10px);
}

@media (max-width: 900px){
    .hero-inner{grid-template-columns:1fr; padding:2.6rem 1.1rem 2rem;}
    .hero-mock{margin:1rem 0 0;}
    .hero h1{font-size:2rem}
    .cover-slide{height:40vh}
}

/* =========================
   SEÇÕES
========================== */
section{padding:0}
.section{
    padding:2.2rem 0;
}
.h2{
    font-size:1.55rem;
    margin: .9rem 0 .7rem;
    letter-spacing:.02em;
}
.lead{
    color:var(--muted);
    margin:0;
    max-width:82ch;
    font-size:1.03rem;
}

/* =========================
/* ====== ESTILOS DA SEÇÃO MULTIVERSO / PSYTRANCE ====== */
.mq-grid{
    display:grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 22px;
    align-items: stretch;
}
@media (max-width: 980px){
    .mq-grid{ grid-template-columns: 1fr; }
}

.mq-copy .badge{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding: 7px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.04);
    color: rgba(231,237,245,.88);
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.mq-copy .badge .dot{
    width: 8px; height: 8px; border-radius: 999px;
    background: linear-gradient(135deg,var(--accent),var(--accent2));
    box-shadow: 0 0 18px rgba(51,255,153,.22);
}

.mq-copy .title{
    margin: 0 0 10px;
    font-size: clamp(22px, 2.6vw, 34px);
    line-height: 1.08;
    letter-spacing: .2px;
}
.mq-copy .title .accent{
    background: linear-gradient(135deg,var(--accent),var(--accent2));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.mq-points{
    display:grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 14px;
}
.mq-point{
    display:flex;
    gap: 12px;
    padding: 12px 12px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.03);
}
.mq-ico{
    width: 34px; height: 34px;
    border-radius: 12px;
    display:grid;
    place-items:center;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(0,0,0,.25);
    color: rgba(231,237,245,.9);
    flex: 0 0 auto;
}
.mq-strong{
    font-weight: 800;
    letter-spacing: .3px;
}
.mq-small{
    color: rgba(231,237,245,.78);
    font-size: 13px;
    margin-top: 2px;
}

.mq-cta{
    display:flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 16px;
}
.mq-footnote{
    margin-top: 12px;
    color: rgba(231,237,245,.72);
    font-size: 12.5px;
}

/* Visual */
.mq-visual .mq-panel{
    height: 100%;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.12);
    background:
            radial-gradient(800px 420px at 20% 10%, rgba(51,255,153,.10), transparent 55%),
            radial-gradient(700px 360px at 80% 20%, rgba(88,166,255,.10), transparent 55%),
            rgba(0,0,0,.22);
    padding: 14px;
    position: relative;
    overflow: hidden;
}
.mq-panel-top{
    display:flex;
    align-items:center;
    gap: 8px;
    margin-bottom: 12px;
}
.mq-led{
    width: 10px; height: 10px; border-radius: 999px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.10);
}
.mq-label{
    margin-left: 6px;
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(231,237,245,.72);
}

.mq-eq{
    height: 120px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.03);
    display:flex;
    align-items:flex-end;
    gap: 6px;
    padding: 14px;
    overflow: hidden;
}
.mq-eq span{
    width: 8%;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(51,255,153,.95), rgba(88,166,255,.65));
    height: 30%;
    animation: mqBeat 1.25s infinite ease-in-out;
    opacity: .88;
}
.mq-eq span:nth-child(2){ animation-delay: .08s; }
.mq-eq span:nth-child(3){ animation-delay: .16s; }
.mq-eq span:nth-child(4){ animation-delay: .24s; }
.mq-eq span:nth-child(5){ animation-delay: .32s; }
.mq-eq span:nth-child(6){ animation-delay: .40s; }
.mq-eq span:nth-child(7){ animation-delay: .48s; }
.mq-eq span:nth-child(8){ animation-delay: .56s; }
.mq-eq span:nth-child(9){ animation-delay: .64s; }
.mq-eq span:nth-child(10){ animation-delay: .72s; }
.mq-eq span:nth-child(11){ animation-delay: .80s; }
.mq-eq span:nth-child(12){ animation-delay: .88s; }

@keyframes mqBeat{
    0%,100%{ height: 18%; }
    20%{ height: 80%; }
    40%{ height: 35%; }
    60%{ height: 92%; }
    80%{ height: 28%; }
}

.mq-quote{
    margin-top: 12px;
    padding: 14px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(0,0,0,.18);
}
.mq-quote p{
    margin: 0;
    color: rgba(231,237,245,.90);
    line-height: 1.35;
}
.mq-quote-sign{
    margin-top: 8px;
    font-size: 12px;
    color: rgba(231,237,245,.68);
}

.mq-tags{
    display:flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}
.tag{
    display:inline-flex;
    align-items:center;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.04);
    color: rgba(231,237,245,.78);
    font-size: 12px;
}


.pc-grid{
    display:inline;
    grid-template-columns: 1.1fr .9fr;
    gap: 22px;
    align-items: stretch;
}
@media (max-width: 980px){
    .pc-grid{ grid-template-columns: 1fr; }
}

.pc-meta{
    display:flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0 8px;
}
.pc-chip{
    display:inline-flex;
    align-items:center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.04);
    color: rgba(231,237,245,.80);
    font-size: 12px;
}
.pc-chip span{
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(231,237,245,.86);
}

.pc-actions{
    display:flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 14px;
}

.pc-platforms{
    display:flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}
.pc-platform{
    display:inline-flex;
    align-items:center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.03);
    color: rgba(231,237,245,.82);
    text-decoration: none;
    transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.pc-platform:hover{
    transform: translateY(-2px);
    border-color: rgba(255,255,255,.22);
    background: rgba(255,255,255,.05);
}
.pc-ico{
    width: 26px; height: 26px;
    border-radius: 10px;
    display:grid;
    place-items:center;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(0,0,0,.22);
}

/* Painel */
.pc-panel{
    height: 100%;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.12);
    background:
            radial-gradient(820px 460px at 15% 10%, rgba(51,255,153,.10), transparent 56%),
            radial-gradient(720px 380px at 85% 20%, rgba(88,166,255,.10), transparent 56%),
            rgba(0,0,0,.22);
    padding: 14px;
    position: relative;
    overflow: hidden;
}
.pc-top{
    display:flex;
    align-items:center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.pc-leds span{
    width: 10px; height: 10px; border-radius: 999px;
    display:inline-block;
    margin-right: 6px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.10);
}
.pc-label{
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(231,237,245,.72);
}

.pc-titleline{
    display:flex;
    align-items:flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}
.pc-ep-title{
    font-weight: 900;
    letter-spacing: .2px;
    color: rgba(231,237,245,.92);
}
.pc-ep-sub{
    margin-top: 4px;
    font-size: 12.5px;
    color: rgba(231,237,245,.70);
}
.pc-status{
    display:flex;
    align-items:center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.04);
    font-size: 12px;
    color: rgba(231,237,245,.82);
    white-space: nowrap;
}
.pc-pulse{
    width: 10px; height: 10px;
    border-radius: 999px;
    background: linear-gradient(135deg,var(--accent),var(--accent2));
    box-shadow: 0 0 16px rgba(51,255,153,.25);
    animation: pcPulse 1.2s infinite ease-in-out;
}
@keyframes pcPulse{
    0%,100%{ transform: scale(1); opacity: .75; }
    50%{ transform: scale(1.25); opacity: 1; }
}

/* Wave */
.pc-wave{
    height: 120px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.03);
    display:flex;
    align-items:flex-end;
    gap: 6px;
    padding: 14px;
    overflow: hidden;
}
.pc-wave span{
    width: 5%;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(51,255,153,.95), rgba(88,166,255,.65));
    height: 24%;
    opacity: .88;
}
.pc-wave.playing span{
    animation: pcBeat 1.15s infinite ease-in-out;
}
.pc-wave.playing span:nth-child(2){ animation-delay: .05s; }
.pc-wave.playing span:nth-child(3){ animation-delay: .10s; }
.pc-wave.playing span:nth-child(4){ animation-delay: .15s; }
.pc-wave.playing span:nth-child(5){ animation-delay: .20s; }
.pc-wave.playing span:nth-child(6){ animation-delay: .25s; }
.pc-wave.playing span:nth-child(7){ animation-delay: .30s; }
.pc-wave.playing span:nth-child(8){ animation-delay: .35s; }
.pc-wave.playing span:nth-child(9){ animation-delay: .40s; }
.pc-wave.playing span:nth-child(10){ animation-delay: .45s; }
.pc-wave.playing span:nth-child(11){ animation-delay: .50s; }
.pc-wave.playing span:nth-child(12){ animation-delay: .55s; }
.pc-wave.playing span:nth-child(13){ animation-delay: .60s; }
.pc-wave.playing span:nth-child(14){ animation-delay: .65s; }
.pc-wave.playing span:nth-child(15){ animation-delay: .70s; }
.pc-wave.playing span:nth-child(16){ animation-delay: .75s; }
.pc-wave.playing span:nth-child(17){ animation-delay: .80s; }
.pc-wave.playing span:nth-child(18){ animation-delay: .85s; }

@keyframes pcBeat{
    0%,100%{ height: 18%; }
    20%{ height: 86%; }
    45%{ height: 32%; }
    60%{ height: 94%; }
    80%{ height: 26%; }
}

/* Controles */
.pc-controls{
    display:flex;
    gap: 10px;
    justify-content: center;
    margin: 12px 0 10px;
    flex-wrap: wrap;
}
.pc-btn{
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.04);
    color: rgba(231,237,245,.86);
    border-radius: 14px;
    padding: 10px 12px;
    cursor: pointer;
    transition: transform .12s ease, background .12s ease, border-color .12s ease;
    text-decoration:none;
    display:inline-flex;
    align-items:center;
    justify-content:center;
}
.pc-btn:hover{
    transform: translateY(-1px);
    border-color: rgba(255,255,255,.22);
    background: rgba(255,255,255,.06);
}
.pc-btn-main{
    font-weight: 900;
    padding: 10px 16px;
    border-color: rgba(255,255,255,.18);
    background: rgba(0,0,0,.20);
}

/* YouTube embed */
.pc-yt{
    margin-top: 12px;
    display: none;
}
.pc-yt.open{
    display: block;
}
.pc-yt-inner{
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(0,0,0,.25);
    aspect-ratio: 16 / 9;
}
.pc-yt-inner iframe{
    width: 100%;
    height: 100%;
    display:block;
}

.pc-disclaimer{
    margin-top: 12px;
    font-size: 12px;
    color: rgba(231,237,245,.64);
    line-height: 1.35;
}


/* ====== AJUSTES PARA IMAGEM + FLIP ====== */

/* aumentei um pouco a altura mínima para acomodar a imagem */
.dp-card{
    min-height: 270px;
    outline: none;
}

/* mantém o flip no hover e adiciona flip ao focar (bom p/ teclado e tap) */
.dp-card:hover .dp-card-inner,
.dp-card:focus .dp-card-inner{
    transform: rotateY(180deg);
}

/* área da imagem (recorte consistente) */
.dp-media{
    width: 100%;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(0,0,0,.20);
    aspect-ratio: 16 / 10;
}

.dp-avatar{
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

/* um “hint” discreto */
.dp-hint{
    margin: 6px 0 0;
    font-size: 12px;
    opacity: .68;
}

/* realce visual quando o card estiver selecionado no teclado */
.dp-card:focus-visible .dp-front{
    border-color: rgba(51,255,153,.35);
    box-shadow: 0 0 0 3px rgba(51,255,153,.15), 0 10px 30px rgba(0,0,0,.35);
}

/* =========================================================
      DRAMATIS PERSONAE — carrossel 4 cards por vez (1 linha)
      ========================================================= */

.carousel{
    position: relative;
    margin-top: 18px;
}

/* viewport é o único scroll container */
.carousel-viewport{
    overflow: hidden;
    overflow-x: auto;
    border-radius: 18px;
    outline: none;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.carousel-viewport::-webkit-scrollbar{ display:none; }

/* track NÃO rola */
.carousel-track{
    display: flex;
    gap: 14px;
    padding: 14px;
    overflow: visible;
    flex-wrap: nowrap;
}

/* snap por card */
.dp-card{
    scroll-snap-align: start;
    flex: 0 0 calc((100% - (14px * 3)) / 4);
    cursor: default; /* não é mais "clicável" para virar */
    position: relative;
}

@media (max-width: 980px){
    .dp-card{ flex: 0 0 calc((100% - 14px) / 2); }
}
@media (max-width: 560px){
    .dp-card{ flex: 0 0 100%; }
}

.carousel-btn{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(0,0,0,.40);
    color: #fff;
    cursor: pointer;
    display: grid;
    place-items: center;
    z-index: 5;
    transition: transform .15s ease, background .15s ease, opacity .15s ease;
    backdrop-filter: blur(6px);
    user-select: none;
    pointer-events: auto;
}
.carousel-btn:hover{
    background: rgba(0,0,0,.58);
    transform: translateY(-50%) scale(1.04);
}
.carousel-btn span{ font-size: 26px; line-height: 1; }
.carousel-btn.prev{ left: -10px; }
.carousel-btn.next{ right: -10px; }

@media (max-width: 560px){
    .carousel-btn.prev{ left: 6px; }
    .carousel-btn.next{ right: 6px; }
}

/* ===== Flip: base ===== */
.dp-card-inner{
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 210px;
    border-radius: 18px;
    transform-style: preserve-3d;
    transition: transform .55s ease;
    transform: rotateY(0deg);
    -webkit-transform: rotateY(0deg);
}

.dp-front, .dp-back{
    position: absolute;
    inset: 0;
    border-radius: 18px;
    padding: 16px 16px 14px;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 10px 30px rgba(0,0,0,.35);
}

.dp-front{
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.dp-back{
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
}

/* ===== CRÍTICO: NÃO virar no hover do card (mas sem travar quando is-flipped) ===== */
#personagens .dp-card:hover:not(.is-flipped) .dp-card-inner{
    transform: rotateY(0deg) !important;
    -webkit-transform: rotateY(0deg) !important;
}

/* vira SOMENTE quando recebe .is-flipped (via botão Bio) */
#personagens .dp-card.is-flipped .dp-card-inner{
    transform: rotateY(180deg) !important;
    -webkit-transform: rotateY(180deg) !important;
}

/* ===== Conteúdo do card ===== */
.dp-badge{
    align-self: flex-start;
    font-size: 12px;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.16);
    letter-spacing: .2px;
    opacity: .95;
}
.dp-name{ margin: 6px 0 0; font-size: 18px; }
.dp-role{ margin: 0; font-size: 13px; opacity: .85; }
.dp-blurb{ margin: 6px 0 0; font-size: 13px; line-height: 1.45; opacity: .9; }

.dp-back h4{
    margin: 0;
    font-size: 14px;
    letter-spacing: .2px;
    opacity: .95;
}
.dp-back p{ margin: 0; font-size: 13px; line-height: 1.5; opacity: .9; }

/* ===== CTA DP ===== */
.dp-cta{
    margin-top: 18px;
    padding: 16px;
    border-radius: 18px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.10);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.dp-cta-text{ margin: 0; opacity: .9; }
.dp-cta-btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 16px;
    border-radius: 14px;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.18);
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    transition: transform .15s ease, background .15s ease;
}
.dp-cta-btn:hover{
    transform: translateY(-1px);
    background: rgba(255,255,255,.20);
}

/* ===== Botão flutuante Bio ↺ ===== */
#personagens .dp-bioBtn{
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 10;

    display: inline-flex;
    align-items: center;
    gap: 6px;

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

    border: 1px solid rgba(255,255,255,.18);
    background: rgba(0,0,0,.35);
    color: #fff;

    font-size: 12px;
    line-height: 1;
    cursor: pointer;

    backdrop-filter: blur(6px);
    user-select: none;

    /* evita "briga" durante 3D em alguns navegadores */
    transform: translateZ(2px);
}
#personagens .dp-bioBtn:hover{
    background: rgba(0,0,0,.55);
    transform: translateY(-1px) translateZ(2px);
}
#personagens .dp-bioBtn:focus-visible{
    outline: 2px solid rgba(255,255,255,.5);
    outline-offset: 2px;
}

/* imagem clicável para lightbox */
#personagens .dp-front .dp-avatar{
    cursor: zoom-in;
}

/* ===== Lightbox DP ===== */
.dp-lightbox{
    position: fixed;
    inset: 0;
    display: none;
    place-items: center;
    background: rgba(0,0,0,.82);
    z-index: 99999;
    padding: 18px;
}
.dp-lightbox.open{ display: grid; }

.dp-lb-stage{
    max-width: min(980px, 96vw);
    max-height: 92vh;
    width: 100%;
    display: grid;
    place-items: center;
}

.dp-lightbox img{
    max-width: 100%;
    max-height: 92vh;
    height: auto;
    width: auto;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.18);
    box-shadow: 0 18px 60px rgba(0,0,0,.6);
    background: rgba(0,0,0,.2);
}

.dp-lb-close{
    position: absolute;
    top: 14px;
    right: 14px;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.22);
    background: rgba(0,0,0,.45);
    color: #fff;
    cursor: pointer;
    display: grid;
    place-items: center;
    font-size: 28px;
    line-height: 1;
    backdrop-filter: blur(6px);
}
.dp-lb-close:hover{ background: rgba(0,0,0,.62); }

body.dp-lb-lock{ overflow: hidden; }

/* =========================
   FOOTER
========================== */
footer{
    padding:2.4rem 0 2.8rem;
    border-top:1px solid var(--line);
    color:rgba(234,240,255,.72);
    font-size:.95rem;
}

/* === FIX: Dramatis Personae flip (evita 'back' esticar na vertical) === */
#personagens .dp-card{height:420px;} /* garante altura consistente para o flip */
@media (max-width: 820px){#personagens .dp-card{height:440px;}}
@media (max-width: 520px){#personagens .dp-card{height:460px;}}
#personagens .dp-card-inner{height:100%;}
#personagens .dp-front,
#personagens .dp-back{
    position:absolute;
    inset:0;
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
    border-radius:18px;
    overflow:hidden;
}
#personagens .dp-front{transform:rotateY(0deg);}
#personagens .dp-back{
    transform:rotateY(180deg);
    overflow:auto; /* bios longas rolam dentro do card */
}
#personagens .dp-front,
#personagens .dp-back{
    background: rgba(255,255,255,0.06); /* corrigido (antes: 06) */
    border: 1px solid rgba(255,255,255,0.12);
}
/* deixa a rolagem mais discreta quando necessário */
#personagens .dp-back{scrollbar-width:thin;}
#personagens .dp-back::-webkit-scrollbar{height:8px;width:8px;}
#personagens .dp-back::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.18);border-radius:999px;}
#personagens .dp-back::-webkit-scrollbar-track{background:rgba(0,0,0,0.18);border-radius:999px;}



/* === [INSERÇÃO] Seção Público Alvo === */
.target-section{
    padding: 64px 0 0 0;
}
.target-section .container{
    width: min(1100px, 92vw);
    margin: 0 auto;
}
.target-section h2{
    font-size: clamp(1.6rem, 2.6vw, 2.2rem);
    margin: 0 0 14px;
    letter-spacing: .4px;
}
.target-section .lead{
    font-size: 1.05rem;
    line-height: 1.6;
    opacity: .92;
    margin: 0 0 26px;
}
.target-grid{
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}
.target-grid li{
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 16px;
    padding: 16px 16px 14px;
    backdrop-filter: blur(8px);
    background: rgba(255,255,255,.03);
    transition: transform .18s ease, background .18s ease, border-color .18s ease;
    min-height: 132px;
}
.target-grid li:hover{
    transform: translateY(-3px);
    background: rgba(255,255,255,.05);
    border-color: rgba(255,255,255,.18);
}
.target-grid h3{
    font-size: 1rem;
    margin: 0 0 8px;
    letter-spacing: .2px;
}
.target-grid p{
    margin: 0;
    font-size: .95rem;
    line-height: 1.45;
    opacity: .9;
}
.target-tagline{
    margin-top: 22px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 1rem;
    letter-spacing: .3px;
    opacity: .92;
}
.target-tagline span{
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 999px;
    padding: 10px 14px;
    background: rgba(255,255,255,.03);
}
@media (max-width: 980px){
    .target-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px){
    .target-grid{ grid-template-columns: 1fr; }
}



/* =======================
SOBRE O AUTOR (3:4)
======================= */
.about-author{
    padding: clamp(48px, 6vw, 84px) 0;
    position: relative;
}

.about-author__wrap{
    width:auto;
    margin: 0 auto;
}

.about-author__grid{
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: clamp(22px, 3vw, 44px);
    align-items: center;
}

.about-author__kicker{
    font-size: 0.9rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    opacity: .78;
    margin-bottom: 10px;
}

.about-author__title{
    font-size: clamp(1.6rem, 2.2vw, 2.2rem);
    line-height: 1.15;
    margin: 0 0 14px 0;
}

.about-author__lead{
    font-size: 1.05rem;
    line-height: 1.55;
    margin: 0 0 14px 0;
    opacity: .95;
}

.about-author__bio p{
    margin: 0 0 12px 0;
    line-height: 1.65;
    opacity: .92;
}

.about-author__photo{
    position: relative;
    margin: 0;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 18px 40px rgba(0,0,0,.22);
    background: rgba(255,255,255,.04);
    aspect-ratio: 3 / 4; /* mantém 3:4 mesmo sem imagem perfeita */
}

.about-author__photo img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(1.02);
}

.about-author__tag{
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 14px;
    padding: 10px 12px;
    border-radius: 14px;
    backdrop-filter: blur(10px);
    background: rgba(0,0,0,.35);
    border: 1px solid rgba(255,255,255,.18);
    font-size: .95rem;
}

.about-author__chips{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}

.chip{
    padding: 10px 12px;
    border-radius: 999px;
    font-size: .9rem;
    line-height: 1;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.06);
}

.about-author__cta{
    display: flex;
    gap: 12px;
    margin-top: 18px;
    flex-wrap: wrap;
}

/* Botões (se você já tem, pode remover estes estilos) */
.btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 16px;
    border-radius: 14px;
    text-decoration: none;
    border: 1px solid rgba(255,255,255,.14);
    transition: transform .12s ease, opacity .12s ease;
    font-weight: 600;
}
.btn:hover{ transform: translateY(-1px); }
.btn-primary{
    background: rgba(255,255,255,.14);
}
.btn-ghost{
    background: transparent;
    opacity: .9;
}

/* Responsivo */
@media (max-width: 860px){
    .about-author__grid{
        grid-template-columns: 1fr;
    }
    .about-author__photo{
        max-width: 520px;
        margin: 0 auto;
    }
}

/* [AJUSTE] PODCAST: player sempre visível e grande */
.pc-yt.pc-yt-open{
    display: block !important;
    margin-top: 14px;
}

.pc-yt.pc-yt-open .pc-yt-inner{
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 16px;
    overflow: hidden;
    background: rgba(0,0,0,.35);
    border: 1px solid rgba(255,255,255,.08);
}

.pc-yt.pc-yt-open iframe{
    width: 100%;
    height: 100%;
    display: block;
}
.ig-link{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}
.ig-ico{
    display: inline-block;
}