/* ============================================================
   TecnoTip — Página de detalhe de produto
   Depende de landing.css (tokens --tt-*) e é carregado depois dele.
   ============================================================ */

.pd { --pd-acc: #ff6b00; --pd-acc-2: #ff9142; }
.pd.is-free { --pd-acc: #22c55e; --pd-acc-2: #6ee7a8; }

/* ---------- Breadcrumb ---------- */
.pd-crumbs {
    position: relative; z-index: 3;
    display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
    font-size: .82rem; color: var(--tt-muted); margin-bottom: 1.4rem;
}
.pd-crumbs a { color: var(--tt-muted); text-decoration: none; transition: color .2s; }
.pd-crumbs a:hover { color: var(--pd-acc); }
.pd-crumbs .sep { opacity: .45; }
.pd-crumbs [aria-current] { color: var(--tt-text); }

/* ============================================================
   HERO + NUVEM DE PALAVRAS-CHAVE
   A nuvem é decorativa (aria-hidden) e fica atrás de uma máscara
   radial, para que o H1 nunca perca contraste.
   ============================================================ */
.pd-hero {
    position: relative; overflow: hidden;
    padding: clamp(120px, 15vw, 168px) 0 clamp(58px, 8vw, 92px);
    background:
        radial-gradient(62% 62% at 78% 8%, rgba(255,107,0,0.17), transparent 62%),
        radial-gradient(55% 55% at 12% 92%, rgba(255,107,0,0.10), transparent 60%),
        linear-gradient(180deg, #05050a, #0b0c15 88%);
}
.pd.is-free .pd-hero {
    background:
        radial-gradient(62% 62% at 78% 8%, rgba(34,197,94,0.16), transparent 62%),
        radial-gradient(55% 55% at 12% 92%, rgba(34,197,94,0.09), transparent 60%),
        linear-gradient(180deg, #05050a, #0b0c15 88%);
}
.pd-hero > .container { position: relative; z-index: 3; }

.pd-cloud {
    position: absolute; inset: 0; overflow: hidden;
    pointer-events: none; user-select: none;
    /* Máscara radial: atenua a nuvem só onde o texto passa (centro-esquerda),
       deixando as bordas com a palavra em força total. É o que permite subir
       muito a opacidade das palavras sem comprometer a leitura do H1. */
    -webkit-mask-image: radial-gradient(112% 78% at 31% 52%, rgba(0,0,0,.24) 0%, rgba(0,0,0,.58) 38%, #000 76%);
    mask-image: radial-gradient(112% 78% at 31% 52%, rgba(0,0,0,.24) 0%, rgba(0,0,0,.58) 38%, #000 76%);
}
.pd-cloud::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(5,5,10,.42), transparent 38%, rgba(11,12,21,.72));
}
.pd-cloud span {
    position: absolute;
    font-family: 'Space Grotesk', 'Poppins', sans-serif;
    font-weight: 700; white-space: nowrap; letter-spacing: -0.01em;
    line-height: 1;
    opacity: var(--o);
    /* Duas animações independentes e de duração diferente: a deriva move a
       palavra, a pulsação faz a nuvem respirar. Como os períodos não são
       múltiplos, a combinação nunca se repete de forma óbvia. */
    animation:
        pd-drift var(--dur) ease-in-out infinite alternate,
        pd-pulse calc(var(--dur) * 0.62) ease-in-out infinite alternate;
    animation-delay: var(--delay), calc(var(--delay) * 0.7);
    will-change: transform, opacity;
}
/* Quatro camadas de profundidade: tamanho, cor, desfoque e opacidade juntos. */
.pd-cloud .w-1 { --o: .13; color: #fff; filter: blur(1.5px); }
.pd-cloud .w-2 { --o: .22; color: #fff; filter: blur(.6px); }
.pd-cloud .w-3 { --o: .55; color: var(--pd-acc); text-shadow: 0 0 26px color-mix(in srgb, var(--pd-acc) 45%, transparent); }
.pd-cloud .w-4 { --o: .72; color: var(--pd-acc-2); text-shadow: 0 0 30px color-mix(in srgb, var(--pd-acc-2) 50%, transparent); }

@keyframes pd-drift {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(var(--dx), var(--dy), 0) scale(var(--sc)); }
}
@keyframes pd-pulse {
    from { opacity: calc(var(--o) * 0.35); }
    to   { opacity: var(--o); }
}
@media (prefers-reduced-motion: reduce) {
    .pd-cloud span { animation: none; opacity: calc(var(--o) * 0.8); }
}

/* Em telas estreitas o hero encolhe mas a nuvem não: 24 palavras grandes
   passavam por trás do H1 e do lead. Metade das palavras, mais discretas e
   com o corpo limitado (o !important vence o font-size inline, que é onde a
   escala de cada palavra é calculada). */
@media (max-width: 768px) {
    .pd-cloud span:nth-child(2n) { display: none; }
    .pd-cloud span { font-size: min(1.35rem, var(--fs, 1.35rem)) !important; }
    .pd-cloud .w-1 { --o: .11; }
    .pd-cloud .w-2 { --o: .18; }
    .pd-cloud .w-3 { --o: .46; }
    .pd-cloud .w-4 { --o: .6; }
}

.pd-hero .tt-kicker { justify-content: flex-start; }
.pd-hero h1 { font-size: clamp(2rem, 4.8vw, 3.5rem); font-weight: 700; margin-bottom: 1rem; max-width: 17ch; }
.pd-lead { color: var(--tt-muted); font-size: clamp(1.02rem, 1.7vw, 1.22rem); max-width: 62ch; margin-bottom: 1.6rem; }

.pd-hero-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.9rem; }
.pd-hero-tags span {
    font-size: .78rem; padding: .34rem .78rem; border-radius: 999px;
    border: 1px solid var(--tt-border); background: rgba(255,255,255,.04); color: var(--tt-muted);
}
.pd-actions { display: flex; flex-wrap: wrap; gap: .8rem; }

/* ---------- Seções ---------- */
.pd-section { padding: clamp(58px, 8vw, 104px) 0; position: relative; }
.pd-section + .pd-section { border-top: 1px solid var(--tt-border); }
.pd-section h2 { font-size: clamp(1.6rem, 3.2vw, 2.4rem); font-weight: 700; margin-bottom: 1.2rem; }
.pd-prose p { color: var(--tt-muted); font-size: 1.05rem; line-height: 1.75; max-width: 68ch; }
.pd-prose p + p { margin-top: 1rem; }

/* ---------- Cards de funcionalidade ---------- */
.pd-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: clamp(1rem, 2vw, 1.4rem); }
.pd-feature {
    padding: 1.5rem; border-radius: 18px;
    border: 1px solid var(--tt-border); background: var(--tt-card);
    transition: border-color .25s, transform .25s;
}
.pd-feature:hover { border-color: color-mix(in srgb, var(--pd-acc) 45%, transparent); transform: translateY(-3px); }
.pd-feature i { color: var(--pd-acc); font-size: 1.15rem; margin-bottom: .8rem; display: block; }
.pd-feature h3 { font-size: 1.08rem; font-weight: 600; margin-bottom: .55rem; }
.pd-feature p { color: var(--tt-muted); font-size: .94rem; line-height: 1.62; margin: 0; }

/* ---------- Passos ---------- */
.pd-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: clamp(1rem, 2vw, 1.6rem); counter-reset: pd-step; }
.pd-step { position: relative; padding-top: 3.2rem; }
.pd-step::before {
    counter-increment: pd-step; content: counter(pd-step);
    position: absolute; top: 0; left: 0;
    width: 2.4rem; height: 2.4rem; border-radius: 50%;
    display: grid; place-items: center;
    font-family: 'Space Grotesk', sans-serif; font-weight: 700;
    color: var(--tp-acc-ink, #100a04);
    background: linear-gradient(135deg, var(--pd-acc), var(--pd-acc-2));
}
.pd-step h3 { font-size: 1.05rem; font-weight: 600; margin-bottom: .45rem; }
.pd-step p { color: var(--tt-muted); font-size: .94rem; line-height: 1.6; margin: 0; }

/* ---------- Público + preço ---------- */
.pd-split { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(1.4rem, 3vw, 2.6rem); align-items: start; }
@media (max-width: 860px) { .pd-split { grid-template-columns: 1fr; } }
.pd-audience { list-style: none; padding: 0; margin: 0; }
.pd-audience li { display: flex; gap: .7rem; align-items: flex-start; color: var(--tt-muted); padding: .55rem 0; border-bottom: 1px solid var(--tt-border); }
.pd-audience li:last-child { border-bottom: 0; }
.pd-audience i { color: var(--pd-acc); margin-top: .28rem; }

.pd-price {
    padding: 1.7rem; border-radius: 20px;
    border: 1px solid color-mix(in srgb, var(--pd-acc) 35%, var(--tt-border));
    background: linear-gradient(160deg, color-mix(in srgb, var(--pd-acc) 9%, transparent), transparent 70%), var(--tt-card);
}
.pd-price .pd-price-label { font-family: 'Space Grotesk', sans-serif; font-size: 1.35rem; font-weight: 700; color: var(--tt-text); display: block; margin-bottom: .5rem; }
.pd-price p { color: var(--tt-muted); font-size: .92rem; line-height: 1.6; margin-bottom: 1.2rem; }

/* ---------- FAQ ---------- */
.pd-faq { max-width: 820px; }
.pd-faq details {
    border: 1px solid var(--tt-border); border-radius: 14px;
    background: var(--tt-card); margin-bottom: .7rem; overflow: hidden;
}
.pd-faq details[open] { border-color: color-mix(in srgb, var(--pd-acc) 40%, transparent); }
.pd-faq summary {
    cursor: pointer; list-style: none; padding: 1.05rem 1.3rem;
    font-weight: 600; color: var(--tt-text); font-size: 1rem;
    display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.pd-faq summary::-webkit-details-marker { display: none; }
.pd-faq summary::after { content: "\f078"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: .78rem; color: var(--pd-acc); transition: transform .25s; }
.pd-faq details[open] summary::after { transform: rotate(180deg); }
.pd-faq .pd-answer { padding: 0 1.3rem 1.2rem; color: var(--tt-muted); line-height: 1.7; font-size: .96rem; }

/* ---------- Relacionados ---------- */
.pd-related { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.1rem; }
.pd-rel {
    display: block; text-decoration: none; padding: 1.35rem;
    border-radius: 18px; border: 1px solid var(--tt-border); background: var(--tt-card);
    transition: border-color .25s, transform .25s;
}
.pd-rel:hover { border-color: color-mix(in srgb, var(--pd-acc) 45%, transparent); transform: translateY(-3px); }
.pd-rel i { color: var(--pd-acc); font-size: 1.2rem; margin-bottom: .7rem; display: block; }
.pd-rel strong { display: block; color: var(--tt-text); font-family: 'Space Grotesk', sans-serif; margin-bottom: .35rem; }
.pd-rel span { color: var(--tt-muted); font-size: .9rem; line-height: 1.55; }

/* A cor do módulo (laranja para produtos, verde para projetos grátis) precisa
   valer também para os elementos herdados de landing.css. */
.pd .tt-kicker { color: var(--pd-acc); }
.pd .tt-kicker::before { background: var(--pd-acc); }
.pd .tt-btn-primary { background: linear-gradient(100deg, var(--pd-acc), var(--pd-acc-2)); }
.pd.is-free .tt-btn-primary { color: #04140a; }
.pd .tt-gradient-text { background-image: linear-gradient(100deg, var(--pd-acc) 10%, var(--pd-acc-2) 60%, #ffd7b0 100%); }