/* Seção "Seu próximo criativo vencedor": fundo claro com elementos de criativo (stories, métricas),
   duas demonstrações do Creative Intelligence com texto ao lado, alternando o lado. */
.cri {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 120px 0;
  background:
    radial-gradient(1000px 520px at 50% 0%, rgba(195, 200, 232, 0.85) 0%, rgba(195, 200, 232, 0) 70%),
    radial-gradient(700px 520px at 85% 85%, rgba(255, 195, 15, 0.08) 0%, rgba(255, 195, 15, 0) 70%),
    #F5F6FA;
  color: #0F172A;
}
.cri-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.cri-dots {
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(15, 23, 42, 0.08) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 45%, #000 0%, transparent 100%);
  mask-image: radial-gradient(70% 60% at 50% 45%, #000 0%, transparent 100%);
}
/* stories soltos ao fundo */
.cri-sf {
  position: absolute;
  width: 96px; height: 170px;
  border-radius: 14px;
  border: 1.5px solid rgba(15, 23, 42, 0.1);
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.95), rgba(226, 230, 244, 0.7));
  box-shadow: 0 18px 40px -22px rgba(15, 23, 42, 0.35);
  overflow: hidden;
}
.cri-sf::before {
  content: "";
  position: absolute; left: 50%; top: 42%;
  width: 34px; height: 34px; margin: -17px 0 0 -17px;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.07);
}
.cri-sf::after {
  content: "";
  position: absolute; left: 50%; top: 42%;
  margin: -7px 0 0 -4px;
  border-left: 12px solid rgba(15, 23, 42, 0.25);
  border-top: 7px solid transparent; border-bottom: 7px solid transparent;
}
.cri-sf i { position: absolute; left: 12px; height: 5px; border-radius: 3px; background: rgba(15, 23, 42, 0.1); }
.cri-sf i:nth-child(1) { bottom: 26px; width: 62%; }
.cri-sf i:nth-child(2) { bottom: 15px; width: 40%; }
.cri-sf b { position: absolute; top: 9px; left: 9px; right: 9px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, #FFC30F 0 58%, rgba(15, 23, 42, 0.1) 58%); }
/* métricas soltas ao fundo */
.cri-chip {
  position: absolute;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 12px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.09);
  box-shadow: 0 10px 26px -14px rgba(15, 23, 42, 0.35);
  font: 600 12px 'Plus Jakarta Sans', sans-serif;
  color: #1A3050;
  white-space: nowrap;
}
.cri-chip em { font: 700 11px 'JetBrains Mono', monospace; font-style: normal; color: #0F172A; }
.cri-chip i { width: 7px; height: 7px; border-radius: 50%; background: var(--c, #58D417); }
/* faixa de filme no alto */
.cri-film {
  position: absolute;
  height: 44px;
  border-radius: 6px;
  background:
    repeating-linear-gradient(90deg, transparent 0 10px, rgba(15, 23, 42, 0.12) 10px 18px) top / 100% 7px no-repeat,
    repeating-linear-gradient(90deg, transparent 0 10px, rgba(15, 23, 42, 0.12) 10px 18px) bottom / 100% 7px no-repeat,
    repeating-linear-gradient(90deg, rgba(15, 23, 42, 0.05) 0 64px, transparent 64px 70px);
  border: 1px solid rgba(15, 23, 42, 0.08);
  opacity: 0.7;
}

.cri-in { max-width: 1320px; margin: 0 auto; padding: 0 32px; display: flex; flex-direction: column; gap: 80px; }
.cri-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; }
.cri-head h2 { margin: 0; max-width: 940px; font: 700 clamp(36px, 4.6vw, 60px)/1.04 'Funnel Display', sans-serif; letter-spacing: -0.03em; color: #0F172A; text-wrap: balance; }
.cri-head h2 span { color: #1275A6; }
.cri-head p { margin: 0; max-width: 700px; font: 400 18px/1.6 'Plus Jakarta Sans', sans-serif; color: #1A3050; text-wrap: pretty; }

.cri-row { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 64px; align-items: center; }
.cri-row--rev { grid-template-columns: minmax(0, 1fr) 400px; }
.cri-copy { display: flex; flex-direction: column; gap: 16px; }
.cri-topic, .cri-body { display: flex; flex-direction: column; gap: 16px; }
.cri-n { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: #FFC30F; color: #06101F; font: 800 15px 'Plus Jakarta Sans', sans-serif; box-shadow: 0 8px 22px -8px rgba(255, 195, 15, 0.7); }
.cri-copy h3 { margin: 0; font: 600 32px/1.12 'Funnel Display', sans-serif; letter-spacing: -0.015em; color: #0F172A; text-wrap: balance; }
.cri-copy p { margin: 0; font: 400 16px/1.6 'Plus Jakarta Sans', sans-serif; color: #1A3050; text-wrap: pretty; }
.cri-pts { display: flex; flex-direction: column; gap: 10px; margin-top: 2px; }
.cri-pts span { display: flex; align-items: flex-start; gap: 10px; font: 500 14.5px/1.45 'Plus Jakarta Sans', sans-serif; color: #0F172A; }
.cri-pts span::before { content: ""; flex: none; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; background: #0F172A url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFC30F' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 12px no-repeat; }
.cri-cta { align-self: flex-start; margin-top: 8px; background: #FFC30F; color: #06101F; border: 0; border-radius: 6px; padding: 14px 22px; font: 700 15px 'Plus Jakarta Sans', sans-serif; cursor: pointer; transition: background 0.2s ease; }
.cri-cta:hover { background: #CC9900; }

.cri-vis { position: relative; min-width: 0; }
.cri-vis--plan { justify-self: center; width: 100%; max-width: 500px; }
.cri-vis he-ci-demo, .cri-vis he-ci-analisar, .cri-vis he-ci-planejar { display: block; }

/* ---------- janela da gravação 1 ---------- */
.ci-win { border-radius: 14px; overflow: hidden; background: #0B0C12; border: 1px solid rgba(15, 23, 42, 0.14); box-shadow: 0 50px 90px -40px rgba(15, 23, 42, 0.55), 0 18px 36px -18px rgba(15, 23, 42, 0.35); }
.ci-bar { height: 38px; display: flex; align-items: center; gap: 7px; padding: 0 14px; background: #16171F; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.ci-bar i { width: 10px; height: 10px; border-radius: 50%; background: #FF5F57; }
.ci-bar i:nth-child(2) { background: #FEBC2E; }
.ci-bar i:nth-child(3) { background: #28C840; }
.ci-bar span { margin-left: 10px; font: 500 12px 'Plus Jakarta Sans', sans-serif; color: #9A9BA3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ci-vp { background: #0B0C12; }

/* ---------- planejador: modal recriado no tamanho real (772×928) ---------- */
.pl-fit { position: relative; overflow: hidden; border-radius: 18px; box-shadow: 0 50px 90px -40px rgba(15, 23, 42, 0.6), 0 18px 36px -18px rgba(15, 23, 42, 0.35); }
.pl-cv { width: 772px; height: 928px; background: #0D0D14; font-family: 'Plus Jakarta Sans', sans-serif; }
.pl-modal { position: absolute; left: 2px; top: 2px; width: 768px; height: 924px; border-radius: 20px; overflow: hidden; background: #12131F; border: 1px solid rgba(255, 255, 255, 0.07); }
.pl-modal::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; z-index: 2; background: linear-gradient(90deg, rgba(168, 156, 146, 0.2), #C1B3A5 35%, #A89C92 70%, rgba(168, 156, 146, 0.2)); }
.pl-top { position: absolute; left: 0; right: 0; top: 0; height: 145px; padding: 29px 33px 0; background: #171623; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.pl-top small { display: block; font: 700 13px/18px 'Plus Jakarta Sans', sans-serif; letter-spacing: 0.12em; color: #BBADA1; }
.pl-top b { display: block; margin-top: 6px; font: 800 23px/28px 'Plus Jakarta Sans', sans-serif; letter-spacing: -0.01em; color: #F1F1F3; }
.pl-top p { margin: 7px 0 0; font: 400 15px/23px 'Plus Jakarta Sans', sans-serif; color: #A3A4AC; }
.pl-x { position: absolute; left: 711px; top: 25px; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.08); font: 400 20px/1 'Plus Jakarta Sans', sans-serif; color: #C9CAD0; }
.pl-steps { position: absolute; left: 0; right: 0; top: 145px; height: 113px; background: #141420; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.pl-step { position: absolute; top: 19px; display: flex; flex-direction: column; align-items: center; transform: translateX(-50%); }
.pl-step span { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: #1A1A25; border: 1px solid rgba(255, 255, 255, 0.08); font: 700 15px 'Plus Jakarta Sans', sans-serif; color: #6B6C75; transition: all 0.3s ease; }
.pl-step span svg { width: 21px; height: 21px; fill: none; stroke: #D9C8B7; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pl-step em { margin-top: 11px; font: 500 14px/18px 'Plus Jakarta Sans', sans-serif; font-style: normal; color: #B4B5BC; white-space: nowrap; }
.pl-step.is-done span { background: #2C2B35; border-color: rgba(255, 255, 255, 0.13); }
.pl-step.is-cur span { background: #2C2B35; border: 1.5px solid rgba(233, 215, 196, 0.55); color: #E9D7C4; box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.04), 0 0 22px rgba(233, 215, 196, 0.12); }
.pl-step.is-cur em { color: #fff; font-weight: 700; }
.pl-dash { position: absolute; top: 41px; width: 30px; height: 2px; border-radius: 1px; background: #807874; }
.pl-body { position: absolute; left: 0; right: 0; top: 258px; height: 592px; }
.pl-pane { position: absolute; inset: 0; padding: 30px 33px 0; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity 0.35s ease, transform 0.35s ease, visibility 0s 0.35s; }
.pl-pane.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity 0.35s ease 0.1s, transform 0.35s ease 0.1s, visibility 0s; }
.pl-q b { display: block; font: 700 18px/24px 'Plus Jakarta Sans', sans-serif; color: #ECECEF; }
.pl-q span { display: block; margin-top: 5px; font: 400 13.5px/20px 'Plus Jakarta Sans', sans-serif; color: #8F9097; }
.pl-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 22px; }
.pl-opt { position: relative; padding: 18px 18px 17px; border-radius: 12px; background: #181926; border: 1px solid rgba(255, 255, 255, 0.07); transition: border-color 0.25s ease, background 0.25s ease; }
.pl-opt b { display: block; font: 700 15.5px/20px 'Plus Jakarta Sans', sans-serif; color: #E3E3E8; }
.pl-opt span { display: block; margin-top: 5px; font: 400 12.5px/18px 'Plus Jakarta Sans', sans-serif; color: #8F9097; }
.pl-opt i { position: absolute; top: 14px; right: 14px; width: 20px; height: 20px; opacity: 0; transition: opacity 0.25s ease; }
.pl-opt i svg { width: 100%; height: 100%; fill: none; stroke: #E9D7C4; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pl-opt.is-on { border-color: rgba(233, 215, 196, 0.8); background: rgba(217, 200, 183, 0.07); }
.pl-opt.is-on b { color: #fff; }
.pl-opt.is-on i { opacity: 1; }
.pl-sum { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: 22px; border-radius: 12px; overflow: hidden; background: rgba(255, 255, 255, 0.06); }
.pl-sum div { padding: 15px 18px; background: #171824; }
.pl-sum span, .pl-out span { display: block; font: 700 11px 'Plus Jakarta Sans', sans-serif; letter-spacing: 0.12em; text-transform: uppercase; color: #8F9097; }
.pl-sum b { display: block; margin-top: 7px; font: 700 16px 'Plus Jakarta Sans', sans-serif; color: #ECECEF; }
.pl-out { margin-top: 14px; padding: 15px 18px; border-radius: 12px; border: 1px dashed rgba(217, 200, 183, 0.35); background: rgba(217, 200, 183, 0.05); }
.pl-out span { color: #BBADA1; }
.pl-out b { display: block; margin-top: 7px; font: 600 14.5px/21px 'Plus Jakarta Sans', sans-serif; color: #E3E3E8; }
/* a roda do planejador */
.pl-pane--spin { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 40px 70px; text-align: center; }
.pl-pane--spin::before { content: ""; position: absolute; left: 50%; top: 40%; width: 380px; height: 380px; margin: -190px 0 0 -190px; border-radius: 50%; background: radial-gradient(closest-side, rgba(217, 200, 183, 0.07), rgba(217, 200, 183, 0)); }
.pl-orb { position: relative; width: 156px; height: 156px; flex: none; }
.pl-orb > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pl-orb circle { fill: none; }
.pl-orb .r1 { stroke: rgba(217, 200, 183, 0.14); stroke-width: 1.2; }
.pl-orb .r2 { stroke: rgba(255, 255, 255, 0.06); stroke-width: 1.2; }
.pl-orb .r3 { stroke: rgba(255, 255, 255, 0.07); stroke-width: 1.2; }
.pl-orb .pl-arc path { fill: none; stroke-width: 2.2; stroke-linecap: round; }
.pl-orb .pl-arc, .pl-orb .pl-dot { transform-origin: 100px 100px; }
.pl-pane--spin.is-on .pl-arc { animation: plSpin 1.6s linear infinite; }
.pl-pane--spin.is-on .pl-dot { animation: plSpin 2.8s linear infinite; }
.pl-orb .pl-dot circle { fill: #EAD8C8; filter: drop-shadow(0 0 5px rgba(234, 216, 200, 0.9)); }
@keyframes plSpin { to { transform: rotate(360deg); } }
.pl-core { position: absolute; left: 50%; top: 50%; width: 50px; height: 50px; margin: -25px 0 0 -25px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 40% 30%, #43414D, #26252F 60%, #1B1A23); box-shadow: 0 12px 26px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06); }
.pl-core svg { width: 24px; height: 24px; fill: none; stroke: #D9C8B7; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.pl-st { margin-top: 30px; font: 800 18px/26px 'Plus Jakarta Sans', sans-serif; letter-spacing: -0.01em; color: #F3F3F5; }
.pl-sub { margin-top: 9px; font: 400 15px/22px 'Plus Jakarta Sans', sans-serif; color: #A6A7AE; }
.pl-load { display: flex; gap: 6px; margin-top: 14px; }
.pl-load i { width: 8px; height: 4px; border-radius: 2px; background: rgba(217, 200, 183, 0.55); }
.pl-pane--spin.is-on .pl-load i { animation: plLoad 1.6s ease-in-out infinite; }
.pl-load i:nth-child(2) { animation-delay: 0.2s !important; }
.pl-load i:nth-child(3) { animation-delay: 0.4s !important; }
.pl-load i:nth-child(4) { animation-delay: 0.6s !important; }
@keyframes plLoad { 0%, 100% { width: 8px; background: rgba(217, 200, 183, 0.55); } 35% { width: 22px; background: #D9C8B7; } }
.pl-hint { margin-top: 34px; max-width: 420px; font: 400 11.5px/17px 'Plus Jakarta Sans', sans-serif; color: #7C7D86; }
.pl-foot { position: absolute; left: 0; right: 0; bottom: 0; height: 74px; padding: 0 33px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid rgba(255, 255, 255, 0.06); }
.pl-back { height: 40px; padding: 0 16px; display: inline-flex; align-items: center; border-radius: 9px; background: #0A0C14; border: 1px solid rgba(255, 255, 255, 0.12); font: 700 14px 'Plus Jakarta Sans', sans-serif; color: #fff; }
.pl-next { height: 40px; padding: 0 17px; display: inline-flex; align-items: center; border-radius: 10px; background: linear-gradient(180deg, #E4D2B8, #D2B98F); font: 700 14.5px 'Plus Jakarta Sans', sans-serif; color: #1B1A20; box-shadow: 0 6px 20px rgba(214, 190, 150, 0.25); }
/* gravação do resultado, destaque dos exportadores e cursor */

/* ---------- palco comum: escala, câmera e cursor ---------- */
.sc-fit { position: relative; overflow: hidden; }
.sc-cv { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; transition: transform 1s cubic-bezier(0.65, 0, 0.25, 1); }
.sc-cv.no-tr { transition: none; }
.sc-cv .ic { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sc-cur { position: absolute; left: 0; top: 0; z-index: 20; width: 28px; height: 28px; margin: -3px 0 0 -4px; opacity: 0; pointer-events: none; transition: transform 0.8s cubic-bezier(0.55, 0, 0.2, 1), opacity 0.3s ease; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.55)); }
.sc-cur svg { width: 100%; height: 100%; transition: transform 0.12s ease; }
.sc-cur path { fill: #fff; stroke: #111; stroke-width: 1.4; stroke-linejoin: round; }
.sc-cur.is-on { opacity: 1; }
.sc-cur.is-press svg { transform: scale(0.82); }
.sc-cur::after { content: ""; position: absolute; left: 4px; top: 3px; width: 32px; height: 32px; margin: -16px 0 0 -16px; border-radius: 50%; border: 2px solid rgba(233, 215, 196, 0.9); opacity: 0; }
.sc-cur.is-press::after { animation: plTap 0.5s ease-out; }
@keyframes plTap { 0% { opacity: 1; transform: scale(0.3); } 100% { opacity: 0; transform: scale(1.5); } }

/* miniaturas ilustrativas (gradiente + silhueta, sem rosto nem criativo real) */
.th { display: block; position: relative; overflow: hidden; }
.th-sil { position: absolute; left: 50%; bottom: 0; width: 80%; transform: translateX(-50%); fill: rgba(8, 8, 12, 0.5); }
.th-cap { position: absolute; left: 7%; right: 7%; top: 62%; text-align: center; font: 800 12px/1.2 'Plus Jakarta Sans', sans-serif; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85); }
.th-play { position: absolute; left: 50%; top: 40%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; background: rgba(255, 255, 255, 0.24); }
.th-play::after { content: ""; position: absolute; left: 50%; top: 50%; margin: -6px 0 0 -3px; border-left: 10px solid #fff; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.th-art { position: absolute; inset: 16% 10% 10%; display: flex; flex-direction: column; align-items: flex-start; gap: 7px; }
.th-art b { padding: 5px 8px; border-radius: 4px; background: #FFC30F; color: #1B1B1F; font: 900 12px 'Plus Jakarta Sans', sans-serif; transform: rotate(-3deg); }
.th-art i { display: block; width: 82%; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.35); }
.th-art i:nth-child(3) { width: 64%; }
.th-art i:nth-child(4) { width: 50%; }
.th--big .th-cap { font-size: 17px; }
.th--big .th-play { width: 48px; height: 48px; margin: -24px 0 0 -24px; }
.th--big .th-play::after { margin: -9px 0 0 -5px; border-left-width: 15px; border-top-width: 9px; border-bottom-width: 9px; }
.th--pr .th-cap { font-size: 8.5px; top: 58%; }
.th--pr .th-play { width: 22px; height: 22px; margin: -11px 0 0 -11px; }
.th--pr .th-play::after { margin: -4px 0 0 -2px; border-left-width: 7px; border-top-width: 4px; border-bottom-width: 4px; }
.th--pr .th-art b { font-size: 8px; padding: 3px 5px; }
.th--fk { width: 60px; height: 80px; border-radius: 7px; }
.th--pp { width: 56px; height: 76px; border-radius: 6px; }
.th--fk .th-cap, .th--pp .th-cap, .th--pp .th-play { display: none; }
.th--fk .th-play { width: 18px; height: 18px; margin: -9px 0 0 -9px; }
.th--fk .th-play::after { margin: -3px 0 0 -1px; border-left-width: 6px; border-top-width: 3.5px; border-bottom-width: 3.5px; }
.th--fk .th-art b, .th--pp .th-art b { font-size: 6px; padding: 2px 4px; }

/* ---------- cena 1 · laboratório (1120×700) ---------- */
.ca { width: 1120px; height: 700px; background: #0B0C12; font-family: 'Plus Jakarta Sans', sans-serif; color: #E9E9EE; }
.ca-page { position: absolute; inset: 0; padding: 24px 28px; }
.ca-hd { display: flex; align-items: center; justify-content: space-between; }
.ca-hd > b { font: 800 22px 'Plus Jakarta Sans', sans-serif; letter-spacing: -0.01em; color: #F1F1F3; }
.ca-live { display: inline-flex; align-items: center; gap: 7px; font: 600 11px 'Plus Jakarta Sans', sans-serif; color: #9A9BA3; }
.ca-live i { width: 7px; height: 7px; border-radius: 50%; background: #58D417; animation: hePulse 1.6s infinite; }
.ca-tabs { margin-top: 16px; display: inline-flex; gap: 4px; padding: 5px; border-radius: 12px; background: #12131C; border: 1px solid rgba(255, 255, 255, 0.06); }
.ca-tabs > div { display: flex; align-items: center; gap: 10px; min-width: 210px; padding: 7px 16px 7px 7px; border-radius: 9px; }
.ca-tabs > div.is-on { background: #1D1E29; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); }
.ca-tico { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: #262732; color: #D9C8B7; }
.ca-tico .ic { width: 15px; height: 15px; }
.ca-tabs b { display: block; font: 700 13px 'Plus Jakarta Sans', sans-serif; color: #ECECEF; }
.ca-tabs small { display: block; margin-top: 1px; font: 500 10.5px 'Plus Jakarta Sans', sans-serif; color: #8D8E97; }
.ca-tool { margin-top: 14px; display: flex; align-items: center; gap: 8px; }
.ca-sort { display: inline-flex; align-items: center; gap: 9px; padding: 6px 10px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.1); background: #14151F; color: #D9C8B7; }
.ca-sort b { display: block; font: 700 12.5px 'Plus Jakarta Sans', sans-serif; color: #ECECEF; }
.ca-sort small { display: block; font: 500 9.5px 'Plus Jakarta Sans', sans-serif; color: #8D8E97; }
.ca-tb { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 11px; border-radius: 9px; border: 1px solid transparent; font: 600 11.5px 'Plus Jakarta Sans', sans-serif; color: #A6A7AE; }
.ca-tb.is-on { background: #1A1B26; border-color: rgba(255, 255, 255, 0.08); color: #E3E3E8; }
.ca-tb i { font: 700 10px 'Plus Jakarta Sans', sans-serif; font-style: normal; padding: 1px 6px; border-radius: 5px; background: #2A2B36; }
.ca-tool em { margin-left: 6px; font: 500 11px 'Plus Jakarta Sans', sans-serif; font-style: normal; color: #8D8E97; }
.ca-tool em b { color: #D9C8B7; font-weight: 700; }
.ca-flt { margin-top: 12px; display: flex; gap: 8px; padding: 9px 10px; border-radius: 12px; background: #101119; border: 1px solid rgba(255, 255, 255, 0.05); }
.ca-f { min-width: 112px; padding: 5px 10px; border-radius: 8px; background: #161722; }
.ca-f small { display: block; font: 700 8.5px 'Plus Jakarta Sans', sans-serif; letter-spacing: 0.1em; color: #7D7E87; }
.ca-f span { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 2px; font: 600 11.5px 'Plus Jakarta Sans', sans-serif; color: #E3E3E8; }
.ca-f .ic { width: 12px; height: 12px; color: #8D8E97; }
.ca-f--d { display: flex; align-items: center; }
.ca-f--d span { margin: 0; gap: 7px; justify-content: flex-start; }
.ca-grid { position: relative; margin-top: 18px; height: 392px; }
.ca-card { position: absolute; top: 0; width: 200px; border-radius: 12px; overflow: hidden; background: #14151F; border: 1px solid rgba(255, 255, 255, 0.07); opacity: 0; transform: translateY(14px); transition: left 0.85s cubic-bezier(0.65, 0, 0.25, 1), opacity 0.5s ease var(--d, 0ms), transform 0.5s ease var(--d, 0ms), border-color 0.4s ease, box-shadow 0.4s ease; }
.ca-grid.is-in .ca-card { opacity: 1; transform: none; }
.ca-th { position: relative; height: 186px; overflow: hidden; }
.ca-th > .th { position: absolute; inset: 0; }
.ca-emb { position: absolute; left: 0; right: 0; top: 0; height: 20px; display: flex; align-items: center; gap: 5px; padding: 0 6px; background: rgba(255, 255, 255, 0.94); font: 700 8px 'Plus Jakarta Sans', sans-serif; color: #1B1B1F; }
.ca-emb i, .ca-eh i { width: 11px; height: 11px; border-radius: 50%; background: linear-gradient(135deg, #FFC30F, #E1306C); }
.ca-emb em, .ca-eh em { margin-left: auto; padding: 2px 5px; border-radius: 4px; background: #3B82F6; font: 700 7px 'Plus Jakarta Sans', sans-serif; font-style: normal; color: #fff; }
.ca-rel { position: absolute; right: 7px; top: 27px; padding: 4px 7px; border-radius: 7px; background: rgba(10, 10, 15, 0.8); text-align: right; }
.ca-rel small { display: block; font: 700 6.5px 'Plus Jakarta Sans', sans-serif; letter-spacing: 0.08em; color: #B9BAC2; }
.ca-rel b { display: block; font: 800 15px/1.1 'Plus Jakarta Sans', sans-serif; color: #fff; }
.ca-info { padding: 9px 11px 10px; }
.ca-tag { display: inline-block; padding: 2px 7px; border-radius: 999px; background: rgba(59, 160, 255, 0.14); border: 1px solid rgba(59, 160, 255, 0.3); font: 700 8.5px 'Plus Jakarta Sans', sans-serif; color: #8DC9FF; }
.ca-code { display: block; margin-top: 6px; font: 800 11.5px 'Plus Jakarta Sans', sans-serif; color: #F1F1F3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ca-meta, .ca-lb { display: block; font: 700 8px 'Plus Jakarta Sans', sans-serif; letter-spacing: 0.08em; color: #7D7E87; }
.ca-meta { margin-top: 1px; }
.ca-lb { margin-top: 8px; }
.ca-fat { display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.ca-fat b { font: 800 15.5px 'Plus Jakarta Sans', sans-serif; color: #F1F1F3; white-space: nowrap; }
.ca-fat em { padding: 1px 5px; border-radius: 5px; background: rgba(59, 160, 255, 0.12); border: 1px solid rgba(59, 160, 255, 0.28); font: 700 8.5px 'Plus Jakarta Sans', sans-serif; font-style: normal; color: #8DC9FF; white-space: nowrap; }
.ca-m { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-top: 8px; padding-top: 7px; border-top: 1px solid rgba(255, 255, 255, 0.06); }
.ca-m small, .ca-cr small { display: block; font: 500 8px 'Plus Jakarta Sans', sans-serif; color: #7D7E87; }
.ca-m b, .ca-cr b { display: block; margin-top: 1px; font: 700 10.5px 'Plus Jakarta Sans', sans-serif; color: #E3E3E8; white-space: nowrap; }
.ca-luc { margin: -2px -3px; padding: 2px 3px; border-radius: 5px; transition: background 0.4s ease; }
.ca-luc b { transition: color 0.4s ease; }
.ca-grid.by-luc .ca-luc { background: rgba(255, 195, 15, 0.13); }
.ca-grid.by-luc .ca-luc b { color: #FFC30F; }
.ca-grid.by-luc .ca-card[data-k="B"] { border-color: rgba(255, 195, 15, 0.6); box-shadow: 0 0 0 3px rgba(255, 195, 15, 0.1), 0 18px 40px rgba(0, 0, 0, 0.45); }
.ca-cr { margin-top: 5px; }
.ca-btn { margin-top: 8px; display: flex; align-items: center; justify-content: center; gap: 5px; height: 26px; border-radius: 7px; border: 1px solid rgba(255, 255, 255, 0.1); font: 700 10px 'Plus Jakarta Sans', sans-serif; color: #C9CAD0; }
.ca-btn .ic { width: 11px; height: 11px; color: #D9C8B7; }
.ca-menu { position: absolute; z-index: 6; width: 240px; padding: 8px; border-radius: 12px; background: #171823; border: 1px solid rgba(255, 255, 255, 0.09); box-shadow: 0 24px 50px rgba(0, 0, 0, 0.55); opacity: 0; transform: translateY(-6px) scale(0.98); transform-origin: top left; transition: opacity 0.25s ease, transform 0.25s ease; }
.ca-menu.is-on { opacity: 1; transform: none; }
.ca-menu > small { display: block; padding: 4px 8px 6px; font: 700 8.5px 'Plus Jakarta Sans', sans-serif; letter-spacing: 0.12em; color: #7D7E87; }
.ca-opt { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 8px; color: #A6A7AE; transition: background 0.2s ease; }
.ca-opt > .ic { width: 15px; height: 15px; }
.ca-opt b { display: block; font: 700 12px 'Plus Jakarta Sans', sans-serif; color: #E3E3E8; }
.ca-opt small { display: block; font: 500 9.5px 'Plus Jakarta Sans', sans-serif; color: #7D7E87; }
.ca-ok { margin-left: auto; opacity: 0; color: #D9C8B7; }
.ca-opt.is-on { background: #21222E; }
.ca-opt.is-on .ca-ok { opacity: 1; }
.ca-load { position: absolute; inset: 0; z-index: 8; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: radial-gradient(500px 300px at 50% 45%, #16171F, #0B0C12); opacity: 0; visibility: hidden; transition: opacity 0.5s ease, visibility 0s 0.5s; }
.ca-load.is-on { opacity: 1; visibility: visible; transition: opacity 0.3s ease; }
.ca-lic { width: 46px; height: 46px; margin-bottom: 6px; border-radius: 12px; display: grid; place-items: center; background: #1C1D27; border: 1px solid rgba(255, 255, 255, 0.08); color: #D9C8B7; }
.ca-lic .ic { width: 20px; height: 20px; }
.ca-load b { font: 700 15px 'Plus Jakarta Sans', sans-serif; color: #ECECEF; }
.ca-load small { font: 500 12px 'Plus Jakarta Sans', sans-serif; color: #8D8E97; }
.ca-dots { display: flex; gap: 5px; margin-top: 6px; }
.ca-dots i { width: 6px; height: 6px; border-radius: 50%; background: #D9C8B7; animation: caDot 1s ease-in-out infinite; }
.ca-dots i:nth-child(2) { animation-delay: 0.15s; }
.ca-dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes caDot { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }
.ca-dim { position: absolute; inset: 0; z-index: 9; background: rgba(5, 6, 10, 0.72); opacity: 0; transition: opacity 0.35s ease; pointer-events: none; }
.ca-dim.is-on { opacity: 1; }
.ca-modal { position: absolute; left: 60px; top: 34px; width: 1000px; height: 632px; z-index: 10; display: flex; flex-direction: column; overflow: hidden; border-radius: 18px; background: #12131C; border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 40px 90px rgba(0, 0, 0, 0.6); opacity: 0; transform: translateY(14px) scale(0.97); transition: opacity 0.35s ease, transform 0.35s ease; pointer-events: none; }
.ca-modal.is-on { opacity: 1; transform: none; }
.ca-modal::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, rgba(168, 156, 146, 0.2), #C1B3A5 35%, #A89C92 70%, rgba(168, 156, 146, 0.2)); }
.ca-mh { display: flex; justify-content: space-between; align-items: flex-start; padding: 18px 22px 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.ca-mh b { display: block; font: 800 17px 'Plus Jakarta Sans', sans-serif; color: #F1F1F3; }
.ca-mh small { display: block; margin-top: 3px; font: 500 11.5px 'Plus Jakarta Sans', sans-serif; color: #8D8E97; }
.ca-x { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.08); color: #C9CAD0; }
.ca-x .ic { width: 15px; height: 15px; }
.ca-mb { flex: 1; min-height: 0; display: grid; grid-template-columns: 320px minmax(0, 1fr); }
.ca-ml { padding: 16px 18px; border-right: 1px solid rgba(255, 255, 255, 0.06); }
.ca-emb2 { border-radius: 10px; overflow: hidden; background: #fff; }
.ca-eh { display: flex; align-items: center; gap: 7px; padding: 7px 9px; }
.ca-eh i { width: 22px; height: 22px; }
.ca-eh b { display: block; font: 700 10px 'Plus Jakarta Sans', sans-serif; color: #111; }
.ca-eh small { display: block; font: 500 8.5px 'Plus Jakarta Sans', sans-serif; color: #777; }
.ca-eh em { font-size: 8.5px; padding: 3px 7px; border-radius: 5px; }
.ca-ev { position: relative; height: 330px; }
.ca-ev > .th { position: absolute; inset: 0; }
.ca-rel--m { top: 10px; right: 10px; }
.ca-vtag { position: absolute; left: 10px; top: 10px; padding: 3px 8px; border-radius: 6px; background: rgba(10, 10, 15, 0.7); font: 700 9px 'Plus Jakarta Sans', sans-serif; letter-spacing: 0.08em; color: #fff; }
.ca-ef { display: flex; align-items: center; gap: 10px; padding: 8px 10px 2px; color: #222; }
.ca-ef .ic { width: 17px; height: 17px; }
.ca-bm { margin-left: auto; display: flex; }
.ca-likes { display: block; padding: 0 10px 9px; font: 700 9.5px 'Plus Jakarta Sans', sans-serif; color: #222; }
.ca-mr { min-width: 0; display: flex; flex-direction: column; gap: 14px; padding: 16px 20px; }
.ca-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 10px; background: #0F1018; border: 1px solid rgba(255, 255, 255, 0.06); }
.ca-seg span { display: flex; align-items: center; justify-content: center; gap: 7px; height: 36px; border-radius: 8px; font: 700 12.5px 'Plus Jakarta Sans', sans-serif; color: #8D8E97; transition: background 0.25s ease, color 0.25s ease; }
.ca-seg span.is-on { background: #1D1E29; color: #F1F1F3; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.ca-panes { position: relative; flex: 1; min-height: 0; }
.ca-pane { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0s 0.3s; }
.ca-pane.is-on { opacity: 1; visibility: visible; transition: opacity 0.3s ease 0.05s, visibility 0s; }
.ca-per { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ca-per > div { padding: 9px 12px; border-radius: 9px; background: #171824; border: 1px solid rgba(255, 255, 255, 0.05); }
.ca-per small, .ca-kg small { display: block; font: 700 8.5px 'Plus Jakarta Sans', sans-serif; letter-spacing: 0.1em; color: #7D7E87; }
.ca-per b { display: block; margin-top: 3px; font: 700 13px 'Plus Jakarta Sans', sans-serif; color: #E3E3E8; }
.ca-trail { margin-top: 14px; padding: 14px; border-radius: 12px; background: #151620; border: 1px solid rgba(255, 255, 255, 0.06); }
.ca-trail > b { display: block; font: 700 14px 'Plus Jakarta Sans', sans-serif; color: #ECECEF; }
.ca-trail > small { display: block; margin-top: 2px; font: 500 10.5px 'Plus Jakarta Sans', sans-serif; color: #7D7E87; }
.ca-kg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 12px; }
.ca-kg > div { padding: 11px 12px; border-radius: 9px; background: #1A1B26; border: 1px solid rgba(255, 255, 255, 0.05); }
.ca-kg b { display: block; margin-top: 5px; font: 800 17px 'Plus Jakarta Sans', sans-serif; color: #F1F1F3; white-space: nowrap; }
.ca-kg b.g { color: #6BDD2E; }
.ca-read { padding: 16px 18px; border-radius: 12px; background: #151620; border: 1px solid rgba(255, 255, 255, 0.06); }
.ca-read > small, .ca-3 small { display: block; font: 700 9px 'Plus Jakarta Sans', sans-serif; letter-spacing: 0.12em; color: #8D8E97; }
.ca-read p { margin: 10px 0 0; font: 700 15px/1.55 'Plus Jakarta Sans', sans-serif; color: #F1F1F3; }
.ca-read .w { display: inline-block; opacity: 0; }
.ca-an.is-on .w { animation: caW 0.45s ease both; animation-delay: var(--d); }
@keyframes caW { from { opacity: 0; transform: translateY(4px); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } }
.ca-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.ca-chips span { padding: 5px 10px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.1); background: #1B1C27; font: 600 10.5px 'Plus Jakarta Sans', sans-serif; color: #C9CAD0; opacity: 0; }
.ca-an.is-on .ca-chips span { animation: caPop 0.35s ease both; animation-delay: calc(var(--d) + 500ms); }
@keyframes caPop { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: none; } }
.ca-3 { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 8px; margin-top: 12px; }
.ca-3 > div { padding: 11px 12px; border-radius: 10px; background: #151620; border: 1px solid rgba(255, 255, 255, 0.06); }
.ca-3 b { display: block; margin-top: 5px; font: 600 11.5px/1.45 'Plus Jakarta Sans', sans-serif; color: #E3E3E8; }
.ca-mf { display: flex; align-items: center; justify-content: space-between; padding: 12px 22px; border-top: 1px solid rgba(255, 255, 255, 0.06); }
.ca-mf span { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: 9px; border: 1px solid rgba(255, 255, 255, 0.1); font: 700 12px 'Plus Jakarta Sans', sans-serif; color: #C9CAD0; }
.ca-mf small { font: 600 11px 'Plus Jakarta Sans', sans-serif; color: #7D7E87; }

/* ---------- cena 2 · resultado do planejador ---------- */
.pl-body { overflow: hidden; }
.pl-pane--res { padding: 0; }
.pr-in { position: relative; padding: 24px 33px 30px; transition: transform 1.1s cubic-bezier(0.65, 0, 0.25, 1); }
.pr-in.no-tr { transition: none; }
.pr-h b { display: block; font: 800 19px 'Plus Jakarta Sans', sans-serif; color: #F1F1F3; }
.pr-h span { display: block; margin-top: 4px; font: 500 11.5px 'Plus Jakarta Sans', sans-serif; color: #8F9097; }
.pr-lb { display: block; margin: 22px 0 10px; font: 700 11px 'Plus Jakarta Sans', sans-serif; letter-spacing: 0.14em; color: #BBADA1; }
.pr-top5 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pr-c { display: flex; gap: 12px; padding: 11px; border-radius: 12px; background: #151621; border: 1px solid rgba(255, 255, 255, 0.07); }
.pr-c--last { grid-column: 1 / -1; justify-self: center; width: calc(50% - 6px); }
.pr-tw { position: relative; flex: none; width: 92px; height: 124px; border-radius: 8px; overflow: hidden; }
.pr-tw > .th { position: absolute; inset: 0; }
.pr-n { position: absolute; left: 7px; bottom: 3px; font: 800 18px 'Plus Jakarta Sans', sans-serif; color: #fff; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6); }
.pr-ci { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pr-ch { display: flex; justify-content: space-between; gap: 8px; }
.pr-ch b { display: block; max-width: 150px; font: 800 12.5px 'Plus Jakarta Sans', sans-serif; color: #F1F1F3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pr-ch small { display: block; margin-top: 2px; font: 500 10.5px 'Plus Jakarta Sans', sans-serif; color: #8F9097; }
.pr-ring { width: 34px; height: 34px; flex: none; }
.pr-ring circle { fill: none; stroke: rgba(255, 255, 255, 0.1); stroke-width: 3; }
.pr-ring .v { stroke: #D9C8B7; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 18px 18px; }
.pr-ring text { fill: #F1F1F3; font: 800 10px 'Plus Jakarta Sans', sans-serif; text-anchor: middle; }
.pr-cm { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 8px; }
.pr-cm small { display: block; font: 700 8.5px 'Plus Jakarta Sans', sans-serif; letter-spacing: 0.1em; color: #8F9097; }
.pr-cm b { display: block; margin-top: 2px; font: 800 13px 'Plus Jakarta Sans', sans-serif; color: #F1F1F3; }
.pr-c p { margin: 8px 0 0; font: 400 10.5px/1.45 'Plus Jakarta Sans', sans-serif; color: #A3A4AC; }
.pr-common { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; counter-reset: c; }
.pr-common li { counter-increment: c; display: flex; gap: 10px; padding: 11px 14px; border-radius: 10px; background: #151621; border: 1px solid rgba(255, 255, 255, 0.06); font: 500 12.5px/1.45 'Plus Jakarta Sans', sans-serif; color: #D7D8DE; }
.pr-common li::before { content: counter(c); flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: #2C2B35; font: 700 10.5px 'Plus Jakarta Sans', sans-serif; color: #E9D7C4; }
.pr-ab { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pr-p { padding: 14px; border-radius: 12px; background: #151621; border: 1px solid rgba(255, 255, 255, 0.07); }
.pr-ph { display: flex; align-items: center; gap: 8px; }
.pr-ph i { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; background: #2C2B35; font: 800 11px 'Plus Jakarta Sans', sans-serif; font-style: normal; color: #E9D7C4; }
.pr-ph b { font: 700 13px 'Plus Jakarta Sans', sans-serif; color: #F1F1F3; }
.pr-p small { display: block; margin-top: 10px; font: 700 9px 'Plus Jakarta Sans', sans-serif; letter-spacing: 0.12em; color: #BBADA1; }
.pr-p p { margin: 3px 0 0; font: 400 11.5px/1.5 'Plus Jakarta Sans', sans-serif; color: #B4B5BC; }
.pr-p .pr-pt { margin: 10px 0 4px; font: 700 13px/1.45 'Plus Jakarta Sans', sans-serif; color: #F1F1F3; }
.pr-fk { margin-top: 22px; padding: 16px; border-radius: 14px; border: 1px solid rgba(233, 215, 196, 0.35); background: linear-gradient(180deg, rgba(217, 200, 183, 0.07), rgba(217, 200, 183, 0.02)); }
.pr-fkh { display: flex; align-items: center; gap: 9px; }
.pr-fkh i { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; background: linear-gradient(180deg, #E4D2B8, #D2B98F); font: 800 12px 'Plus Jakarta Sans', sans-serif; font-style: normal; color: #1B1A20; }
.pr-fkh b { font: 800 14px 'Plus Jakarta Sans', sans-serif; color: #F1F1F3; }
.pr-fkh span { margin-left: auto; font: 600 10.5px 'Plus Jakarta Sans', sans-serif; color: #BBADA1; }
.pr-fr { display: grid; grid-template-columns: 80px 60px minmax(0, 1fr); gap: 12px; align-items: start; margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.06); }
.pr-fn { padding-top: 4px; font: 800 12px 'Plus Jakarta Sans', sans-serif; color: #E9D7C4; }
.pr-fc small { display: block; font: 600 10px 'Plus Jakarta Sans', sans-serif; color: #8F9097; }
.pr-fc p { margin: 3px 0 0; font: 600 12.5px/1.45 'Plus Jakarta Sans', sans-serif; color: #E3E3E8; }
.pr-fm { display: inline-flex; gap: 18px; margin-top: 8px; }
.pr-fm small { display: block; font: 700 8.5px 'Plus Jakarta Sans', sans-serif; letter-spacing: 0.1em; color: #8F9097; }
.pr-fm b { font: 800 18px 'Plus Jakarta Sans', sans-serif; color: #F1F1F3; }
.pr-fm em { margin-left: 6px; font: 500 10.5px 'Plus Jakarta Sans', sans-serif; font-style: normal; color: #8F9097; }
.pr-fk .pr-fr:nth-child(2) .pr-fm b { color: #6BDD2E; }
.pr-sew { margin-top: 14px; padding: 13px 15px; border-radius: 11px; background: #12131F; border: 1px solid rgba(255, 255, 255, 0.06); }
.pr-sew small { display: block; font: 700 9.5px 'Plus Jakarta Sans', sans-serif; letter-spacing: 0.12em; color: #BBADA1; }
.pr-sew ul { margin: 8px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 5px; }
.pr-sew li { font: 600 11.5px/1.45 'Plus Jakarta Sans', sans-serif; color: #D7D8DE; }
.pr-exp { margin-top: 22px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, 0.06); }
.pr-eb { display: flex; flex-wrap: wrap; gap: 8px; }
.pr-eb span { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 13px; border-radius: 9px; border: 1px solid rgba(255, 255, 255, 0.12); background: #151621; font: 700 13px 'Plus Jakarta Sans', sans-serif; color: #F1F1F3; transition: background 0.2s ease, color 0.2s ease; }
.pr-eb .ic { width: 15px; height: 15px; }
.pr-eb .pr-pdf.is-hit { background: #E4D2B8; border-color: #E4D2B8; color: #1B1A20; }
.pr-ea { display: flex; gap: 18px; margin-top: 12px; }
.pr-ea span { display: inline-flex; align-items: center; gap: 7px; font: 600 12.5px 'Plus Jakarta Sans', sans-serif; color: #A6A7AE; }
/* o PDF exportado */
.pl-pdf { position: absolute; inset: 0; z-index: 6; display: flex; flex-direction: column; align-items: center; padding: 30px 56px; background: rgba(6, 6, 10, 0.8); opacity: 0; visibility: hidden; transition: opacity 0.35s ease, visibility 0s 0.35s; }
.pl-pdf.is-on { opacity: 1; visibility: visible; transition: opacity 0.35s ease, visibility 0s; }
.pl-pdf-bar { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-radius: 10px 10px 0 0; background: #2A2B33; font: 600 12px 'Plus Jakarta Sans', sans-serif; color: #E3E3E8; }
.pl-pdf-bar span { display: inline-flex; align-items: center; gap: 8px; }
.pl-pdf-bar small { font: 600 11px 'Plus Jakarta Sans', sans-serif; color: #9A9BA3; }
.pl-pdf-page { width: 100%; flex: 1; padding: 38px 40px; border-radius: 0 0 6px 6px; background: #fff; color: #111; opacity: 0; transform: translateY(40px); transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) 0.1s, opacity 0.4s ease 0.1s; }
.pl-pdf.is-on .pl-pdf-page { opacity: 1; transform: none; }
.pp-k { display: block; font: 700 10px 'Plus Jakarta Sans', sans-serif; letter-spacing: 0.16em; color: #8A7F72; }
.pp-t { display: block; margin-top: 6px; font: 800 28px 'Plus Jakarta Sans', sans-serif; letter-spacing: -0.02em; color: #111; }
.pp-s { display: block; margin-top: 4px; font: 500 12px 'Plus Jakarta Sans', sans-serif; color: #666; }
.pp-sec { margin: 24px 0 10px; padding-bottom: 6px; border-bottom: 2px solid #E4D2B8; font: 800 13px 'Plus Jakarta Sans', sans-serif; color: #111; }
.pp-tb > div { display: grid; grid-template-columns: 96px 1fr auto; gap: 10px; padding: 9px 0; border-bottom: 1px solid #EEE; font: 500 12px 'Plus Jakarta Sans', sans-serif; color: #333; }
.pp-tb b { font: 800 12px 'Plus Jakarta Sans', sans-serif; color: #111; }
.pp-tb em { font: 700 11.5px 'Plus Jakarta Sans', sans-serif; font-style: normal; color: #2E7D0F; }
.pp-th { display: flex; gap: 8px; }
.pp-lines { display: flex; flex-direction: column; gap: 9px; margin-top: 24px; }
.pp-lines i { display: block; height: 8px; border-radius: 4px; background: #EDEDED; }

@media (max-width: 1080px) {
  .cri-row, .cri-row--rev { display: flex; flex-direction: column; align-items: stretch; gap: 28px; }
  .cri-vis { width: 100%; }
  .cri-copy { display: contents; }
  .cri-topic { order: 1; }
  .cri-vis { order: 2; }
  .cri-body { order: 3; max-width: 640px; }
  .cri-sf, .cri-chip, .cri-film { display: none; }
}
@media (max-width: 640px) {
  .cri { padding: 88px 0; }
  .cri-in { padding: 0 20px; gap: 56px; }
  .cri-copy h3 { font-size: 26px; }
  .cri-cta { align-self: stretch; }
  .ci-bar span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pl-pane--spin.is-on .pl-arc, .pl-pane--spin.is-on .pl-dot, .pl-pane--spin.is-on .pl-load i, .ca-live i, .ca-dots i { animation: none; }
  .sc-cv, .pr-in, .ca-card { transition: none !important; }
  .ca-read .w, .ca-chips span { opacity: 1; }
}