/* ============================================================
   Komplex Logopédia — Campaign add-on (14-day challenge funnel)
   Extends site.css. Animations + landing/upsell components.
   ============================================================ */

/* ---------- Scroll reveal animations ----------
   Hidden state is gated behind html.js so the page degrades gracefully:
   if JS fails or is disabled, all content stays fully visible. */
@media (prefers-reduced-motion: no-preference) {
  html.js [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
  html.js [data-reveal="left"]  { transform: translateX(-30px); }
  html.js [data-reveal="right"] { transform: translateX(30px); }
  html.js [data-reveal="zoom"]  { transform: scale(.94); }
  html.js [data-reveal].in { opacity: 1; transform: none; }
}
@keyframes floaty { 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-12px) } }
@keyframes pulseRing { 0%{ box-shadow: 0 0 0 0 rgba(219,39,119,.45) } 70%{ box-shadow: 0 0 0 14px rgba(219,39,119,0) } 100%{ box-shadow: 0 0 0 0 rgba(219,39,119,0) } }
.pulse { animation: pulseRing 2.2s infinite; }

/* ---------- Urgency / countdown banner ---------- */
.ub { background: linear-gradient(90deg, var(--pink), var(--pink-600)); color:#fff; font-family: var(--font-head); }
.ub__row { display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; padding:11px 16px; text-align:center; font-weight:700; font-size:.95rem; }
.ub__timer { display:inline-flex; gap:6px; }
.ub__timer b { background: rgba(255,255,255,.18); border-radius:8px; padding:4px 8px; min-width:38px; text-align:center; font-variant-numeric: tabular-nums; }
.ub__timer span { font-size:.7rem; opacity:.8; align-self:center; }

/* ---------- Minimal landing header ---------- */
.lp-head { position: sticky; top:0; z-index:60; background: rgba(255,255,255,.94); backdrop-filter: blur(10px) saturate(180%); border-bottom:1px solid var(--line); }
.lp-head__row { display:flex; align-items:center; justify-content:space-between; height:68px; }
.lp-head img { height:38px; width:auto; }
.lp-head .badge-mini { display:none; }
@media (min-width:680px){ .lp-head .badge-mini { display:inline-flex; gap:8px; align-items:center; color:var(--muted); font-size:.86rem; font-weight:600; } }

/* ---------- Light hero ---------- */
.lp-hero { position: relative; overflow: hidden; padding: clamp(54px, 8vw, 96px) 0 clamp(40px,6vw,72px); background: radial-gradient(1200px 480px at 75% -10%, var(--blue-50), #fff 60%); }
.lp-hero::before, .lp-hero::after { content:""; position:absolute; border-radius:50%; filter: blur(8px); opacity:.5; z-index:0; }
.lp-hero::before { width:320px; height:320px; background: radial-gradient(circle, rgba(0,138,230,.20), transparent 70%); top:-60px; right:-60px; animation: floaty 9s ease-in-out infinite; }
.lp-hero::after  { width:260px; height:260px; background: radial-gradient(circle, rgba(219,39,119,.14), transparent 70%); bottom:-80px; left:-40px; animation: floaty 11s ease-in-out infinite reverse; }
.lp-hero__inner { position: relative; z-index:1; max-width: 880px; margin-inline:auto; text-align:center; }
.lp-hero h1 { margin: 14px 0 0; }
.lp-hero h1 .hl { color: var(--blue); }
.lp-hero h1 .hl-pink { color: var(--pink); }
.lp-hero__sub { font-size: clamp(1.05rem,2vw,1.25rem); color: var(--body); max-width: 720px; margin: 18px auto 0; }
.lp-hero__chips { display:flex; flex-wrap:wrap; gap:10px 18px; justify-content:center; margin-top:22px; }
.chip { display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:.92rem; color: var(--ink-2); }
.chip::before { content:"✓"; display:grid; place-items:center; width:22px; height:22px; border-radius:50%; background: var(--green-50); color:var(--green); font-size:.78rem; }
.lp-hero__cta { margin-top: 30px; display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
.lp-hero__note { margin-top:14px; font-size:.88rem; color: var(--muted); }
.lp-hero__media { width: 100%; margin: 34px auto 0; max-width: 720px; border-radius: var(--r-xl); box-shadow: var(--shadow-lg); }

/* gradient text utility */
.gtext { background: linear-gradient(100deg, var(--blue), var(--pink)); -webkit-background-clip:text; background-clip:text; color: transparent; }

/* ---------- Pain / benefit cards (reuse .feature, add tints) ---------- */
.pain { border-color: transparent; box-shadow: var(--shadow-sm); }
.pain .feature__icon { background: var(--pink-50); color: var(--pink); }
.dream .feature__icon { background: var(--blue-50); color: var(--blue); }

/* ---------- ICP persona chips grid ---------- */
.icp-grid { display:grid; grid-template-columns: repeat(3,1fr); gap:16px; }
.icp { background:#fff; border:1px solid var(--line); border-radius: var(--r-lg); padding:22px; box-shadow: var(--shadow-sm); transition: transform .2s, box-shadow .2s; }
.icp:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.icp__ic { font-size:1.6rem; }
.icp h4 { margin:8px 0 4px; color: var(--ink); }
.icp p { font-size:.93rem; }
@media (max-width:900px){ .icp-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width:560px){ .icp-grid { grid-template-columns: 1fr; } }

/* ---------- Day-in-the-life timeline ---------- */
.timeline { max-width: 820px; margin-inline:auto; display:grid; gap:0; position:relative; }
.timeline::before { content:""; position:absolute; left:27px; top:10px; bottom:10px; width:2px; background: linear-gradient(var(--blue), var(--blue-100)); }
.tl { display:flex; gap:20px; padding:14px 0; position:relative; }
.tl__dot { flex:0 0 auto; width:56px; height:56px; border-radius:50%; background:var(--blue); color:#fff; display:grid; place-items:center; font-family:var(--font-head); font-weight:900; font-size:1.3rem; z-index:1; box-shadow: var(--shadow-blue); }
.tl__body { background:#fff; border:1px solid var(--line); border-radius: var(--r-lg); padding:18px 22px; box-shadow: var(--shadow-sm); flex:1; }
.tl__body h4 { color: var(--ink); margin-bottom:4px; }
.tl__body p { font-size:.95rem; }

/* ---------- Value stack ---------- */
.vstack { max-width: 640px; margin: 0 auto; background:#fff; border:1px solid var(--line); border-radius: var(--r-xl); padding: 10px 26px; box-shadow: var(--shadow); }
.vstack__row { display:flex; justify-content:space-between; gap:16px; padding:15px 0; border-bottom:1px dashed var(--line); }
.vstack__row:last-child { border-bottom:none; }
.vstack__row span { color: var(--ink-2); font-weight:600; font-size:.98rem; }
.vstack__row b { color: var(--muted); white-space:nowrap; font-weight:700; }
.vstack__total { display:flex; justify-content:space-between; align-items:center; padding:18px 0 6px; }
.vstack__total span { font-family:var(--font-head); font-weight:800; color: var(--ink); font-size:1.1rem; }
.vstack__total b { font-family:var(--font-head); font-weight:900; color: var(--ink); font-size:1.5rem; text-decoration: line-through; text-decoration-color: var(--pink); }

/* ---------- Single centered pricing card ---------- */
.price-solo { max-width: 520px; margin: 28px auto 0; }
.price-solo .price-card { border:2px solid var(--blue); box-shadow: var(--shadow-lg); }
.price-card__old { color: var(--muted); text-decoration: line-through; font-size:1.1rem; font-weight:700; }
.price-card__big { font-family:var(--font-head); font-weight:900; font-size:3rem; color: var(--blue); line-height:1; margin:4px 0; }
.bump { background: var(--blue-50); border:1px dashed var(--blue); border-radius: var(--r); padding:14px 16px; margin-top:16px; font-size:.92rem; color: var(--ink-2); display:flex; gap:10px; align-items:flex-start; }
.bump input { margin-top:4px; }

/* ---------- Spots counter ---------- */
.spots { max-width:420px; margin:16px auto 0; }
.spots__bar { height:12px; border-radius:999px; background: var(--slate-2); overflow:hidden; }
.spots__fill { height:100%; background: linear-gradient(90deg, var(--pink), var(--pink-600)); border-radius:999px; width:70%; transition: width 1s ease; }
.spots__txt { font-size:.85rem; color: var(--muted); margin-top:8px; text-align:center; font-weight:600; }
.spots__txt b { color: var(--pink); }

/* ---------- Myth vs fact ---------- */
.myth { background:#fff; border:1px solid var(--line); border-radius: var(--r-lg); padding:22px; box-shadow: var(--shadow-sm); }
.myth__m { font-family:var(--font-head); font-weight:800; color: var(--ink); display:flex; gap:8px; align-items:flex-start; }
.myth__m::before { content:"✕"; color: var(--pink); font-weight:900; }
.myth__f { margin-top:10px; padding-top:10px; border-top:1px solid var(--line); font-size:.95rem; color: var(--body); display:flex; gap:8px; align-items:flex-start; }
.myth__f::before { content:"✓"; color: var(--green); font-weight:900; }

/* ---------- Author / bio ---------- */
.bio { display:grid; grid-template-columns: 220px 1fr; gap:34px; align-items:center; max-width: 920px; margin-inline:auto; }
.bio img { width:100%; border-radius: var(--r-xl); box-shadow: var(--shadow); }
.bio__name { font-family:var(--font-head); font-weight:900; color: var(--ink); font-size:1.5rem; }
.bio__role { color: var(--blue); font-weight:700; margin-bottom:12px; }
@media (max-width:680px){ .bio { grid-template-columns: 1fr; text-align:center; } .bio img { max-width:240px; margin-inline:auto; } }

/* ---------- Sticky mobile CTA ---------- */
.sticky-cta { position: fixed; left:0; right:0; bottom:0; z-index:120; background: rgba(255,255,255,.97); border-top:1px solid var(--line); box-shadow: 0 -8px 24px rgba(16,24,40,.10); padding:10px 14px; display:flex; gap:12px; align-items:center; justify-content:space-between; transform: translateY(120%); transition: transform .3s ease; }
.sticky-cta.show { transform: none; }
.sticky-cta__price { font-family:var(--font-head); font-weight:900; color: var(--ink); line-height:1; }
.sticky-cta__price small { display:block; font-size:.7rem; color: var(--muted); font-weight:600; }
@media (min-width:921px){ .sticky-cta { display:none; } }

/* ---------- eBook popup ---------- */
.pop { position: fixed; inset:0; z-index:200; display:none; align-items:center; justify-content:center; padding:18px; background: rgba(8,20,32,.62); backdrop-filter: blur(4px); }
.pop.open { display:flex; }
.pop__card { background:#fff; border-radius: var(--r-xl); max-width: 880px; width:100%; box-shadow: var(--shadow-lg); overflow:hidden; display:grid; grid-template-columns: 1fr 1fr; animation: popin .3s ease; }
@keyframes popin { from{ opacity:0; transform: translateY(16px) scale(.98) } to{ opacity:1; transform:none } }
.pop__media { background: linear-gradient(160deg, var(--blue), #2aa0ee); color:#fff; padding:36px; display:flex; flex-direction:column; justify-content:center; }
.pop__media h3 { color:#fff; font-size:1.5rem; }
.pop__media ul { list-style:none; padding:0; margin-top:16px; display:grid; gap:10px; }
.pop__media li { display:flex; gap:10px; align-items:flex-start; font-size:.95rem; }
.pop__media li::before { content:"✓"; font-weight:900; }
.pop__body { padding:36px; position:relative; }
.pop__close { position:absolute; top:12px; right:14px; background:none; border:none; font-size:1.6rem; color: var(--muted); }
@media (max-width:680px){ .pop__card { grid-template-columns: 1fr; } .pop__media { display:none; } }

/* ---------- Premium tier (upsell pages) ---------- */
.section--premium { background: linear-gradient(165deg, #0b2236 0%, #123a57 60%, #0e2c43 100%); color: #cfe3f2; position:relative; overflow:hidden; }
.section--premium h2, .section--premium h3, .section--premium h4 { color:#fff; }
.section--premium .eyebrow { color: var(--gold); }
.premium-hero { padding: clamp(64px,9vw,120px) 0; }
.premium-hero h1 { color:#fff; }
.premium-hero h1 .gold { color: var(--gold); }
.gold-rule { width:64px; height:4px; border-radius:4px; background: var(--gold); margin:0 auto 22px; }
.glass { background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius: var(--r-lg); padding:26px; backdrop-filter: blur(6px); }
.glass h3, .glass h4 { color:#fff; }
.glass p { color:#cfe3f2; }
.price-premium { display:grid; grid-template-columns: repeat(3,1fr); gap:22px; max-width: 1000px; margin: 0 auto; align-items:stretch; }
.ppo { background:#fff; border-radius: var(--r-xl); padding:30px 26px; box-shadow: var(--shadow-lg); display:flex; flex-direction:column; }
.ppo--feat { border:3px solid var(--gold); transform: translateY(-8px); position:relative; }
.ppo--feat::before { content:"AJÁNLOTT"; position:absolute; top:-13px; left:50%; transform:translateX(-50%); background: var(--gold); color:#1a1b1f; font-family:var(--font-head); font-weight:900; font-size:.72rem; letter-spacing:.06em; padding:5px 14px; border-radius:999px; }
.ppo h3 { color: var(--ink); }
.ppo__price { font-family:var(--font-head); font-weight:900; font-size:2.2rem; color: var(--ink); margin:6px 0; }
.ppo__price small { font-size:.95rem; color: var(--muted); font-weight:700; }
@media (max-width:900px){ .price-premium { grid-template-columns: 1fr; } .ppo--feat { transform:none; } }

/* horizontal-scroll wrapper for wide tables on small screens */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--r-lg); }
@media (max-width: 600px) {
  .compare { font-size: .82rem; }
  .compare th, .compare td { padding: 11px 10px; }
  .lp-hero__media { max-width: 100%; }
}

/* misc */
.kicker-num { font-family: var(--font-head); font-weight:900; font-size: clamp(2.4rem,6vw,3.4rem); color: var(--blue-100); line-height:1; }
.note-band { background: var(--blue-50); border-radius: var(--r-lg); padding:18px 22px; color: var(--ink-2); font-size:.96rem; }
.scroll-mt { scroll-margin-top: 84px; }