/* =========================================================================
   OFT-Review Professores — design system OFT (gold + onyx, Orbitron H2, hexagons)
   Scoped to .op pra blindar contra WordPress/Elementor.
   ========================================================================= */

.op,.op *,.op *::before,.op *::after{box-sizing:border-box}

.op{
  --gold-200:#F8DB7D; --gold-300:#ECC575; --gold-400:#DBAD6B; --gold-500:#B58851; --gold-700:#6E5230;
  --onyx-1000:#060606; --onyx-900:#131210; --onyx-800:#1A1A1A; --onyx-700:#232220; --onyx-600:#2E2C29;
  --paper-50:#FAF8F5; --fg-on-dark:#F4F0EA; --fg-on-dark-2:#C6BFB1;
  --font-display:'Orbitron','Eurostile','Bank Gothic',system-ui,sans-serif;
  --font-body:'Exo 2','Inter',system-ui,-apple-system,sans-serif;
  --ease-out:cubic-bezier(.22,1,.36,1);

  position:relative;
  padding:clamp(64px,9vh,120px) 0 clamp(80px,11vh,140px);
  background:#111111;
  color:var(--fg-on-dark);
  font-family:var(--font-body);
  isolation:isolate;
  overflow:clip;
  -webkit-font-smoothing:antialiased;
}

/* Reset de heranças do WP */
.op a,.op a:hover,.op a:focus,.op a:visited{text-decoration:none!important;color:inherit!important}
.op button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
.op img{display:block;max-width:100%}

/* PERF + Override WP/Elementor — força cores corretas nos h2/h3 */
.op h2,.op h3,.op h2.op__title,.op h3.op__subtitle,.op h3.op__name{
  color:var(--fg-on-dark) !important;
  -webkit-text-fill-color:var(--fg-on-dark) !important;
  text-shadow:none !important;
  margin:0 !important;
}

/* ─── Hexagons floating BG (decorativo) ────────────────────────── */
.op__hex-bg{
  position:absolute; inset:0; pointer-events:none; overflow:hidden;
  z-index:0; opacity:.5;
}
.op__hex{
  position:absolute;
  font-size:42px;
  color:var(--gold-700);
  opacity:0;
  will-change:transform,opacity;
  animation:opHexFloat 18s ease-in-out infinite;
}
.op__hex:nth-child(1){left:5%;top:12%;animation-delay:0s;font-size:36px}
.op__hex:nth-child(2){left:22%;top:75%;animation-delay:3s;font-size:54px}
.op__hex:nth-child(3){left:78%;top:18%;animation-delay:6s;font-size:48px}
.op__hex:nth-child(4){left:88%;top:62%;animation-delay:9s;font-size:30px}
.op__hex:nth-child(5){left:48%;top:8%;animation-delay:12s;font-size:42px}
.op__hex:nth-child(6){left:35%;top:88%;animation-delay:15s;font-size:38px}
@keyframes opHexFloat{
  0%,100%{opacity:0;transform:translate3d(0,0,0) rotate(0deg)}
  20%{opacity:.35}
  80%{opacity:.35}
  50%{transform:translate3d(0,-30px,0) rotate(180deg)}
}

/* Mascote OFT — top-right peeking */
.op__mascot{
  position:absolute;
  top:24px; right:6%;
  width:80px; height:80px;
  z-index:2;
  filter:drop-shadow(0 8px 24px rgba(219,173,107,.35));
  animation:opMascotFloat 4s ease-in-out infinite;
  pointer-events:none;
}
.op__mascot img{width:100%;height:auto}
@keyframes opMascotFloat{
  0%,100%{transform:translate3d(0,0,0)}
  50%{transform:translate3d(0,-10px,0)}
}
@media (max-width:980px){.op__mascot{width:60px;height:60px;top:16px;right:16px}}

/* ─── HEADER ───────────────────────────────────────────────────── */
.op__container{position:relative;z-index:1;max-width:1280px;margin:0 auto;padding:0 24px}
.op__header{text-align:center;margin-bottom:48px}
.op h2.op__title{
  font-family:var(--font-display) !important;
  font-size:36px !important; font-weight:400 !important; line-height:1.18 !important;
  letter-spacing:0.02em !important;
  color:var(--fg-on-dark) !important;
  -webkit-text-fill-color:var(--fg-on-dark) !important;
  margin:0 auto 14px !important;
  max-width:32ch;
  text-wrap:balance;
}
.op__title-accent{color:var(--gold-400) !important;-webkit-text-fill-color:var(--gold-400) !important;font-weight:400 !important}
.op h3.op__subtitle{
  font-family:var(--font-body) !important;
  font-size:16px !important; font-weight:400 !important; line-height:1.55 !important;
  color:rgba(244,240,234,.72) !important;
  -webkit-text-fill-color:rgba(244,240,234,.72) !important;
  margin:0 auto !important;
  max-width:68ch;
  text-wrap:balance;
}

/* Swipe hint mobile-only — match oft-depoimentos pra unidade visual */
.op__swipe{
  display:none;
  align-items:center; justify-content:flex-start;
  gap:8px;
  margin:0 0 16px; padding:0 24px;
  font-family:var(--font-body);
  font-size:13px; font-weight:600;
  letter-spacing:.04em;
  color:var(--gold-300);
  opacity:.95;
}
.op__swipe svg{
  width:18px; height:18px;
  animation:opSwipeNudge 1.8s ease-in-out infinite;
}
@keyframes opSwipeNudge{
  0%,100%{transform:translateX(-4px);opacity:.6}
  50%{transform:translateX(4px);opacity:1}
}

/* ─── CAROUSEL ─────────────────────────────────────────────────── */
.op__carousel{
  position:relative;
  max-width:1320px;
  margin:0 auto;
  padding:0 56px;
}
.op__track{
  display:flex;
  gap:24px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  padding:8px 0 32px;
  scrollbar-width:none;
}
.op__track::-webkit-scrollbar{display:none}
.op__card{
  flex:0 0 calc((100% - 48px) / 3);
  scroll-snap-align:start;
  min-width:0;
}

/* Nav arrows — formato OLHO (oftalmologia) — proporção 1.7:1, gold gradient.
   Posicionado sobre o CENTRO DA FOTO (não do card) para não cobrir texto. */
section.op button.op__nav,
.op .op__nav{
  position:absolute !important;
  /* Photo é aspect 1:1 no topo do card. Foto ocupa ~card_width de altura.
     Body adiciona ~190-220px. Centro da foto fica ~30-34% do card-height total.
     Usamos top:32% como bom equilíbrio entre breakpoints. */
  top:32% !important; transform:translateY(-50%) !important;
  width:44px !important; height:28px !important;     /* eye shape, menor */
  padding:0 !important;
  margin:0 !important;
  border:none !important;
  border-radius:50% !important;                       /* perfeita elipse */
  background:linear-gradient(180deg,var(--gold-200),var(--gold-400)) !important;
  background-color:#F8DB7D !important;
  background-image:linear-gradient(180deg,#F8DB7D,#DBAD6B) !important;
  color:#060606 !important;
  -webkit-text-fill-color:#060606 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  z-index:5 !important;
  box-shadow:
    0 8px 20px rgba(0,0,0,.55),
    0 0 0 2px rgba(0,0,0,.5),
    inset 0 2px 3px rgba(255,255,255,.55),
    inset 0 -2px 3px rgba(110,82,48,.3) !important;
  transition:transform .25s var(--ease-out),box-shadow .25s,opacity .2s !important;
  cursor:pointer !important;
  text-shadow:none !important;
  font-family:inherit !important;
  appearance:none !important;
  -webkit-appearance:none !important;
  outline:none !important;
}
.op .op__nav:hover{
  transform:translateY(-50%) scale(1.08) !important;
  background:linear-gradient(180deg,#F8DB7D,#DBAD6B) !important;
  box-shadow:
    0 12px 28px rgba(219,173,107,.6),
    0 0 0 2px rgba(0,0,0,.5),
    inset 0 2px 3px rgba(255,255,255,.6),
    inset 0 -2px 3px rgba(110,82,48,.3) !important;
}
.op .op__nav:disabled{opacity:.35 !important;cursor:not-allowed !important;transform:translateY(-50%) scale(.95) !important}
.op .op__nav svg{
  width:14px !important; height:14px !important;
  display:block !important;
  color:#060606 !important;
  stroke:#060606 !important;
  fill:none !important;
}
.op .op__nav svg polyline{stroke:#060606 !important;fill:none !important}
.op .op__nav--prev{left:6px !important}
.op .op__nav--next{right:6px !important}

/* ─── CARD ─────────────────────────────────────────────────────── */
.op__card-inner{
  position:relative;
  background:linear-gradient(180deg,var(--onyx-800) 0%,var(--onyx-900) 100%);
  border:1px solid rgba(255,255,255,.06);
  border-radius:20px;
  overflow:hidden;
  height:100%;
  display:flex; flex-direction:column;
  transition:transform .32s var(--ease-out),border-color .32s,box-shadow .32s;
  box-shadow:0 20px 50px rgba(0,0,0,.45);
}
.op__card:hover .op__card-inner{
  transform:translateY(-4px);
  border-color:rgba(219,173,107,.4);
  box-shadow:0 28px 60px rgba(0,0,0,.55),0 0 0 1px rgba(219,173,107,.15);
}

/* Photo wrap — 1:1 with gold accent on hover */
.op__photo-wrap{
  position:relative;
  aspect-ratio:1/1;
  background:radial-gradient(circle at 30% 20%,rgba(219,173,107,.12),transparent 55%),linear-gradient(180deg,var(--onyx-700),var(--onyx-1000));
  overflow:hidden;
}
.op__photo{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  /* Crop topo já feito no source — object-position center mantém enquadramento */
  object-position:50% 30%;
  transition:transform .6s var(--ease-out),filter .4s ease;
  filter:saturate(.95);
}
.op__card:hover .op__photo{
  transform:scale(1.04);
  filter:saturate(1.08);
}
/* Subtle gold gradient bottom overlay */
.op__photo-wrap::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg,transparent 60%,rgba(19,18,16,.45) 100%);
  pointer-events:none;
}

/* Seal stack (university logos) — top right */
.op__seals{
  position:absolute;
  top:12px; right:12px;
  display:flex; flex-direction:column;
  gap:6px;
  z-index:2;
}
.op__seal{
  width:40px; height:40px;
  border-radius:50%;
  background:#fff;
  display:grid; place-items:center;
  box-shadow:
    0 6px 16px rgba(0,0,0,.45),
    0 0 0 2px var(--onyx-1000),
    inset 0 1px 0 rgba(255,255,255,.6);
  transition:transform .3s var(--ease-out),box-shadow .3s;
  overflow:hidden;
}
.op__card:hover .op__seal{
  transform:scale(1.08);
  box-shadow:
    0 8px 22px rgba(219,173,107,.4),
    0 0 0 2px var(--onyx-1000),
    inset 0 1px 0 rgba(255,255,255,.6);
}
.op__seal img{width:92%;height:92%;object-fit:contain}

/* Card body */
.op__body{
  padding:20px 22px 24px;
  display:flex; flex-direction:column;
  gap:10px;
  flex:1;
}
.op h3.op__name{
  font-family:var(--font-body) !important;
  font-size:15px !important; font-weight:700 !important;
  color:var(--fg-on-dark) !important;
  -webkit-text-fill-color:var(--fg-on-dark) !important;
  margin:0 !important;
  line-height:1.25 !important;
}
.op__bio{
  font-family:var(--font-body);
  font-size:13.5px; font-weight:400;
  line-height:1.55;
  color:rgba(244,240,234,.78);
  margin:0;
}

/* Chip "Especialista pelo CBO" */
.op__chips{
  display:flex; flex-wrap:wrap;
  gap:6px;
  margin-top:auto;
  padding-top:14px;
  border-top:1px dashed rgba(219,173,107,.22);
}
.op__chip{
  display:inline-flex; align-items:center;
  gap:5px;
  padding:5px 10px;
  border-radius:999px;
  background:linear-gradient(135deg,var(--gold-200),var(--gold-400));
  color:var(--onyx-1000);
  font-size:11px; font-weight:700;
  letter-spacing:.04em;
  box-shadow:0 4px 12px rgba(219,173,107,.32);
  white-space:nowrap;
}
.op__chip::before{
  content:"⬢";
  font-size:10px;
}
/* Variante PNO recorde — troféu SVG inline (sem hexágono) */
.op__chip--pno::before{display:none !important}
.op__chip--pno{
  /* mesmo gold, mas com leve destaque pra diferenciar (sombra mais quente) */
  background:linear-gradient(135deg,#FFE38A,#E5B568) !important;
  box-shadow:0 4px 14px rgba(229,181,104,.45),inset 0 1px 0 rgba(255,255,255,.55) !important;
}
.op__chip--pno svg{
  width:13px; height:13px;
  display:inline-block;
  flex-shrink:0;
  fill:currentColor;
}

/* ─── RESPONSIVE ───────────────────────────────────────────────── */
@media (max-width:1024px){
  .op__card{flex:0 0 calc((100% - 24px) / 2)}
  .op__nav--prev{left:0 !important}.op__nav--next{right:0 !important}
  /* Em tablet o card é mais largo (2 por linha) → foto é maior → centro da foto
     fica em percentual menor do card total */
  .op .op__nav{top:30% !important}
}
@media (max-width:720px){
  .op{padding:56px 0 72px}
  .op__container{padding:0 16px}
  .op h2.op__title{font-size:26px !important}
  .op h3.op__subtitle{font-size:14px !important}
  .op__header{margin-bottom:24px;padding:0 16px}
  .op__swipe{display:inline-flex}
  .op__carousel{padding:0}
  /* Card menor no mobile + peek maior pra revelar próximo */
  .op__track{gap:12px;padding:8px 20px 24px;scroll-padding-left:20px}
  .op__card{flex:0 0 calc(72% - 6px)}
  .op__nav{display:none}
  /* Body compactado */
  .op__body{padding:14px 14px 16px;gap:8px}
  .op h3.op__name{font-size:14px !important}
  .op__bio{font-size:12.5px;line-height:1.5}
  .op__chips{padding-top:10px}
  .op__chip{font-size:10.5px;padding:4px 8px}
  /* Seals menores no mobile */
  .op__seals{top:10px;right:10px;gap:5px}
  .op__seal{width:34px;height:34px}
  /* Foto enquadra similar no mobile */
  .op__photo{object-position:50% 28%}
}

@media (prefers-reduced-motion:reduce){
  .op *,.op *::before,.op *::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}