/* =====================================================================
   Página "Preparatórios para exames" (pr-). Usa os tokens de desco-site.css e os cards de /css/lang-cards.css.
   Explorador em tema escuro: cards de exame preenchidos com as cores de cada idioma (--c1, --c2, --ac definidos por JS).
   ===================================================================== */

.pr-kicker{ display:inline-block; font-size:12.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--blue); margin-bottom:12px; }
.pr-sec{ padding:78px 0; }
.pr-head{ max-width:780px; margin:0 auto 40px; text-align:center; }
.pr-head h2{ font-family:"Poppins", Arial, sans-serif; font-size:32px; line-height:1.2; font-weight:800; color:var(--navy); margin:0; }
.pr-head p{ margin:14px auto 0; font-size:17px; line-height:1.65; color:var(--text-soft); max-width:60ch; }
.pi{ display:grid; place-items:center; }
.pi svg{ width:100%; height:100%; }

/* ---------- hero ---------- */
.pr-hero{ background:linear-gradient(120deg,#0E1F4A 0%,#203D83 60%,#2F58C2 100%); color:#fff; padding:0; }
.pr-hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; padding-top:70px; padding-bottom:70px; }
.pr-hero .pr-kicker{ color:#AFC9FF; }
.pr-hero h1{ font-family:"Poppins", Arial, sans-serif; font-size:42px; line-height:1.15; font-weight:800; max-width:20ch; margin:0; }
.pr-hero h1 em{ font-style:normal; color:var(--green-light); }
.pr-lead{ font-size:18px; line-height:1.6; color:#D2DFFA; max-width:50ch; margin:18px 0 28px; }
.pr-cta{ display:flex; gap:12px; flex-wrap:wrap; }
.pr-hero .btn-ghost, .pr-final .btn-ghost{ background:transparent; color:#fff; border-color:rgba(255,255,255,.55); }
.pr-hero .btn-ghost:hover, .pr-final .btn-ghost:hover{ background:rgba(255,255,255,.12); }
.pr-hero-photo{ border-radius:20px; overflow:hidden; aspect-ratio:5/4; box-shadow:0 30px 60px -32px rgba(0,0,0,.7); }
.pr-hero-photo img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ---------- como funcionam (visual, pouco texto) ---------- */
.pr-how{ background:#F4F6FB; padding:64px 0; }
.pr-mini{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:18px; }
.pr-mcard{ border-radius:20px; padding:26px 24px; color:#fff; background:linear-gradient(155deg,#203D83,#0E1F4A); position:relative; overflow:hidden; }
.pr-mcard:nth-child(2){ background:linear-gradient(155deg,#2F6FED,#1B3D9A); }
.pr-mcard:nth-child(3){ background:linear-gradient(155deg,#3F8F49,#1B4A26); }
.pr-mcard .big{ display:flex; gap:6px; margin-bottom:16px; font:800 30px/1 "Poppins", Arial, sans-serif; letter-spacing:-.01em; }
.pr-mcard .big span{ opacity:.9; }
.pr-mcard .big span + span::before{ content:"›"; margin-right:6px; opacity:.5; }
.pr-mcard .ico4{ display:flex; gap:8px; margin-bottom:16px; }
.pr-mcard .ico4 i{ width:40px; height:40px; border-radius:12px; background:rgba(255,255,255,.16); display:grid; place-items:center; }
.pr-mcard .ico4 svg{ width:21px; height:21px; }
.pr-mcard h3{ font-family:"Poppins", Arial, sans-serif; font-size:19px; font-weight:800; margin:0 0 4px; }
.pr-mcard p{ margin:0; font-size:14.5px; opacity:.86; }

/* ---------- explorador (escuro) ---------- */
.pr-dark{ background:radial-gradient(70% 50% at 50% 0%, rgba(47,111,237,.22), transparent 70%), linear-gradient(180deg,#0A1330,#060B1B); color:#fff; }
.pr-dark .pr-head h2{ color:#fff; }
.pr-dark .pr-head p{ color:#AEBBDC; }
.pr-dark .pr-kicker{ color:var(--green-light); }
.pr-langhost{ margin-bottom:10px; }
.pr-exams{ display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:18px; margin-top:6px; }
.pr-exam{
  appearance:none; font:inherit; text-align:left; cursor:pointer; position:relative; overflow:hidden; min-height:232px; padding:22px; color:#fff;
  border-radius:22px; border:1px solid rgba(255,255,255,.16); display:flex; flex-direction:column; gap:8px;
  background:radial-gradient(120% 90% at 100% 0%, rgba(255,255,255,.17), transparent 55%), linear-gradient(155deg, var(--c1), var(--c2));
  animation:pr-in .5s ease both; animation-delay:calc(var(--i, 0) * 70ms);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
@keyframes pr-in{ from{ opacity:0; transform:translateY(16px); } }
.pr-exam:hover{ transform:translateY(-5px); border-color:var(--ac); box-shadow:0 30px 50px -30px var(--ac); }
.pr-exam:focus-visible, .pr-lv:focus-visible, .pr-sk:focus-visible, .pr-d-close:focus-visible{ outline:3px solid #fff; outline-offset:2px; }
.pr-exam.is-open{ border-color:var(--ac); box-shadow:0 0 0 2px var(--ac), 0 30px 60px -30px var(--ac); }
.pr-exam-wm{ position:absolute; right:-6px; bottom:-14px; font:800 92px/1 "Poppins", Arial, sans-serif; letter-spacing:-.03em; color:rgba(255,255,255,.09); pointer-events:none; white-space:nowrap; }
.pr-exam-top{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.pr-exam-lv{ font-size:11.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:5px 11px; border-radius:999px; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.28); }
.pr-exam-plus{ width:30px; height:30px; border-radius:50%; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.3); position:relative; flex:none; }
.pr-exam-plus::before, .pr-exam-plus::after{ content:""; position:absolute; left:50%; top:50%; width:12px; height:2px; background:#fff; transform:translate(-50%,-50%); transition:transform .25s ease; }
.pr-exam-plus::after{ transform:translate(-50%,-50%) rotate(90deg); }
.pr-exam.is-open .pr-exam-plus{ background:var(--ac); border-color:var(--ac); }
.pr-exam.is-open .pr-exam-plus::after{ transform:translate(-50%,-50%) rotate(0); }
.pr-exam strong{ display:block; margin-top:14px; font-family:"Poppins", Arial, sans-serif; font-size:27px; font-weight:800; line-height:1.1; }
.pr-exam-sub{ font-size:14px; line-height:1.4; color:rgba(255,255,255,.78); max-width:26ch; }
.pr-exam-ico{ display:flex; gap:8px; margin-top:auto; padding-top:16px; position:relative; z-index:1; }
.pr-exam-ico i{ width:36px; height:36px; border-radius:11px; background:rgba(255,255,255,.13); display:grid; place-items:center; }
.pr-exam-ico svg{ width:19px; height:19px; }
.pr-note{ text-align:center; margin:24px auto 0; max-width:70ch; font-size:13px; line-height:1.55; color:#8FA0C9; }

/* ---------- detalhes do exame ---------- */
.pr-detail{
  margin-top:22px; border-radius:26px; padding:32px; color:#fff; scroll-margin-top:90px; border:1.5px solid var(--ac);
  background:radial-gradient(90% 80% at 0% 0%, rgba(255,255,255,.12), transparent 60%), linear-gradient(155deg, var(--c1), var(--c2));
  box-shadow:0 40px 80px -46px var(--ac); animation:pr-in .4s ease both;
}
.pr-detail[hidden]{ display:none; }
.pr-d-head{ display:flex; gap:20px; justify-content:space-between; align-items:flex-start; margin-bottom:24px; }
.pr-d-org{ display:block; font-size:12.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.7); margin-bottom:6px; }
.pr-d-head h3{ font-family:"Poppins", Arial, sans-serif; font-size:34px; font-weight:800; margin:0 0 12px; line-height:1.1; }
.pr-d-lv{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.pr-d-lv b{ padding:5px 12px; border-radius:9px; background:rgba(255,255,255,.16); font-size:13px; font-weight:800; }
.pr-d-lv em{ font-style:normal; font-size:13px; color:rgba(255,255,255,.75); }
.pr-d-close{ appearance:none; font:inherit; cursor:pointer; flex:none; background:rgba(255,255,255,.1); border:1.5px solid rgba(255,255,255,.35); color:#fff; font-weight:700; font-size:13.5px; padding:8px 18px; border-radius:999px; }
.pr-d-close:hover{ background:rgba(255,255,255,.2); }
.pr-d-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:34px; }
.pr-d-col h4{ font-family:"Poppins", Arial, sans-serif; font-size:15px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:rgba(255,255,255,.7); margin:0 0 12px; }
.pr-parts{ display:grid; grid-template-columns:repeat(auto-fit, minmax(96px, 1fr)); gap:10px; margin-bottom:12px; }
.pr-part{ background:rgba(0,0,0,.28); border:1px solid rgba(255,255,255,.14); border-radius:16px; padding:14px 8px 12px; text-align:center; display:grid; gap:6px; justify-items:center; }
.pr-part .pi{ width:40px; height:40px; border-radius:12px; background:var(--ac); color:#0B1024; padding:9px; }
.pr-part b{ font-size:14px; font-weight:800; }
.pr-part small{ font-size:12px; color:rgba(255,255,255,.72); line-height:1.3; }
.pr-stats{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:12px; }
.pr-stat{ background:rgba(0,0,0,.28); border:1px solid rgba(255,255,255,.14); border-radius:16px; padding:14px; display:grid; grid-template-columns:34px 1fr; column-gap:12px; align-items:center; }
.pr-stat .pi{ grid-row:1 / 3; width:34px; height:34px; border-radius:10px; background:rgba(255,255,255,.14); padding:8px; }
.pr-stat small{ font-size:11.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:rgba(255,255,255,.65); }
.pr-stat b{ font-size:14.5px; line-height:1.25; }
.pr-uso{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.pr-uso .pi{ width:34px; height:34px; border-radius:10px; background:rgba(255,255,255,.14); padding:8px; }
.pr-uso i{ font-style:normal; font-size:13.5px; font-weight:700; padding:7px 13px; border-radius:999px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.22); }
.pr-lvs{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.pr-lv{ appearance:none; font:inherit; cursor:pointer; min-width:54px; padding:10px 12px; border-radius:12px; background:rgba(0,0,0,.28); border:1.5px solid rgba(255,255,255,.2); color:rgba(255,255,255,.75); font-weight:800; font-size:15px; }
.pr-lv.is-cov{ border-color:rgba(255,255,255,.55); color:#fff; }
.pr-lv:hover{ border-color:#fff; }
.pr-lv.is-on{ background:#fff; border-color:#fff; color:#0B1024; }
.pr-sks{ display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:8px; margin-bottom:14px; }
.pr-sk{ appearance:none; font:inherit; cursor:pointer; display:grid; gap:6px; justify-items:center; padding:12px 4px 10px; border-radius:14px; background:rgba(0,0,0,.28); border:1.5px solid rgba(255,255,255,.14); color:rgba(255,255,255,.8); }
.pr-sk span{ width:26px; height:26px; }
.pr-sk span svg{ width:100%; height:100%; }
.pr-sk em{ font-style:normal; font-size:11px; font-weight:700; line-height:1.15; text-align:center; }
.pr-sk:hover{ border-color:rgba(255,255,255,.5); }
.pr-sk.is-on{ background:var(--ac); border-color:var(--ac); color:#0B1024; }
.pr-say{ border-radius:16px; padding:16px 18px; background:rgba(0,0,0,.34); border:1px solid rgba(255,255,255,.14); min-height:92px; }
.pr-say b{ display:block; font-size:13px; letter-spacing:.05em; text-transform:uppercase; color:var(--ac); margin-bottom:6px; }
.pr-say span{ font-size:16px; line-height:1.5; }
.pr-d-foot{ margin-top:26px; padding-top:22px; border-top:1px solid rgba(255,255,255,.18); display:flex; gap:20px; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.pr-d-foot > span{ font-size:15px; color:rgba(255,255,255,.85); }
.pr-d-foot > div{ display:flex; gap:16px; align-items:center; flex-wrap:wrap; }
.pr-site{ font-size:14px; font-weight:700; color:#fff; text-decoration:underline; opacity:.85; }
.pr-site:hover{ opacity:1; }

/* ---------- nosso papel ---------- */
.pr-role{ background:#F4F6FB; }
.pr-steps{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:16px; margin-bottom:34px; }
.pr-step{ position:relative; overflow:hidden; border-radius:20px; padding:24px 20px; color:#fff; background:linear-gradient(160deg,#152A5C,#0B1830); border:1px solid rgba(255,255,255,.08); }
.pr-step::before{ content:""; position:absolute; left:0; top:0; right:0; height:5px; background:var(--st); }
.pr-step .pi{ width:46px; height:46px; border-radius:14px; background:var(--st); color:#0B1830; padding:11px; margin-bottom:14px; }
.pr-step small{ display:block; font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.65); margin-bottom:4px; }
.pr-step h3{ font-family:"Poppins", Arial, sans-serif; font-size:18px; font-weight:800; margin:0; }
.pr-step p{ margin:8px 0 0; font-size:14px; line-height:1.5; color:rgba(255,255,255,.8); }
.pr-mt-note{ text-align:center; margin:0 0 16px; font-size:15px; color:var(--text-soft); }
.pr-mt-note b{ color:var(--navy); }
[data-pr-mt][hidden]{ display:none; }

/* ---------- chamada final ---------- */
.pr-final{ background:linear-gradient(120deg,#0E1F4A 0%,#203D83 100%); color:#fff; padding:64px 0; text-align:center; }
.pr-final h2{ font-family:"Poppins", Arial, sans-serif; font-size:30px; font-weight:800; margin:0 auto 12px; max-width:24ch; line-height:1.2; }
.pr-final p{ margin:0 auto 26px; max-width:56ch; font-size:17px; line-height:1.6; color:#D2DFFA; }
.pr-final .pr-cta{ justify-content:center; }

@media (prefers-reduced-motion: reduce){
  .pr-exam, .pr-detail{ animation:none; }
}
@media (max-width:960px){
  .pr-sec{ padding:56px 0; }
  .pr-head h2{ font-size:26px; }
  .pr-hero-grid{ grid-template-columns:1fr; gap:30px; padding-top:40px; padding-bottom:46px; }
  .pr-hero h1{ font-size:31px; max-width:none; }
  .pr-lead{ font-size:16.5px; }
  .pr-hero-photo{ order:-1; aspect-ratio:16/10; }
  .pr-mini{ grid-template-columns:1fr; }
  .pr-steps{ grid-template-columns:1fr 1fr; }
  .pr-d-grid{ grid-template-columns:1fr; gap:26px; }
  .pr-detail{ padding:22px 18px; }
  .pr-d-head{ flex-direction:column; gap:12px; }
  .pr-d-head h3{ font-size:27px; }
  .pr-exams{ grid-template-columns:1fr; }
  .pr-exam{ min-height:200px; }
  .pr-final h2{ font-size:24px; }
}
@media (max-width:560px){
  .pr-steps{ grid-template-columns:1fr; }
  .pr-stats{ grid-template-columns:1fr; }
  .pr-sks{ grid-template-columns:repeat(5, minmax(0,1fr)); gap:6px; }
  .pr-sk em{ font-size:10px; }
}