/* ===========================================================================
   Encontro Mutual Coop — Nordeste Alagoas
   Site temporário de inscrição · tema petróleo/teal · dark
   =========================================================================== */
:root{
  --petrol-900:#06231f;
  --petrol-800:#093735;
  --petrol-700:#0e4e49;
  --petrol-600:#136860;
  --teal-500:#14b8a6;
  --teal-400:#2dd4bf;
  --teal-300:#5eead4;
  --green-500:#0aa46a;
  --ink:#06120f;
  --line-d:rgba(255,255,255,.08);
  --line-d-2:rgba(255,255,255,.16);

  --accent:var(--teal-400);
  --accent-strong:var(--teal-500);
  --bg:var(--petrol-900);
  --fg:#f5f6f4;
  --muted:rgba(245,246,244,.74);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:"Manrope",ui-sans-serif,system-ui,-apple-system,sans-serif;
  background:var(--bg); color:var(--fg);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
::selection{background:var(--accent);color:var(--ink)}
.mono{font-family:"JetBrains Mono",ui-monospace,monospace;letter-spacing:.04em}

.wrap{width:100%;max-width:1320px;margin:0 auto;padding:0 28px}
@media (max-width:720px){ .wrap{padding:0 18px} }

/* ─── Header ──────────────────────────────────────────────────────────── */
header.site{
  position:fixed; inset:0 0 auto 0; z-index:50; padding:16px 0;
  transition:background .25s ease, border-color .25s ease, padding .25s ease;
  border-bottom:1px solid transparent;
}
header.site.scrolled{
  background:color-mix(in srgb, var(--bg) 80%, transparent);
  -webkit-backdrop-filter:blur(14px) saturate(140%); backdrop-filter:blur(14px) saturate(140%);
  border-bottom-color:var(--line-d); padding:10px 0;
}
header.site .row{ display:flex; align-items:center; justify-content:space-between; gap:24px }
.brand{ display:flex; align-items:center; gap:14px; text-decoration:none; color:inherit }
.brand img{ height:52px; width:auto; display:block; transition:height .25s ease }
header.site.scrolled .brand img{ height:44px }
.brand .sep{ width:1px; height:26px; background:currentColor; opacity:.16 }
.brand small{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; opacity:.6; font-weight:600 }
@media (max-width:720px){ .brand small, .brand .sep{ display:none } .brand img{ height:50px } }
@media (max-width:720px){ header.site.scrolled .brand img{ height:44px } }

.nav-cta{ display:flex; align-items:center; gap:14px }
.nav-eyebrow{ font-size:12px; color:var(--muted); letter-spacing:.04em }
@media (max-width:860px){ .nav-eyebrow{display:none} }

/* ─── Buttons ─────────────────────────────────────────────────────────── */
.btn{
  appearance:none; border:0; cursor:pointer; font:inherit;
  display:inline-flex; align-items:center; gap:10px; white-space:nowrap;
  padding:14px 22px; border-radius:999px; font-weight:600; font-size:14.5px;
  text-decoration:none; isolation:isolate;
  transition:transform .15s ease, background .2s ease, color .2s ease, box-shadow .25s ease, opacity .2s ease;
}
.btn:hover{ transform:translateY(-1px) }
.btn:active{ transform:translateY(0) }
.btn .arr{ transition:transform .25s ease; display:inline-block }
.btn:hover .arr{ transform:translateX(3px) }
.btn-primary{ background:var(--accent); color:#06231f; box-shadow:0 1px 0 rgba(255,255,255,.4) inset, 0 10px 30px -10px color-mix(in srgb, var(--accent) 70%, transparent) }
.btn-primary:hover{ background:var(--accent-strong); box-shadow:0 1px 0 rgba(255,255,255,.4) inset, 0 14px 36px -10px color-mix(in srgb, var(--accent) 80%, transparent) }
.btn-primary[disabled]{ opacity:.6; cursor:not-allowed; transform:none }
.btn-ghost{ background:transparent; color:var(--fg); border:1px solid var(--line-d-2) }
.btn-ghost:hover{ background:color-mix(in srgb, var(--fg) 8%, transparent) }
.btn-sm{ padding:10px 16px; font-size:13px }

/* ─── HERO ────────────────────────────────────────────────────────────── */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:center;
  padding:130px 0 72px; overflow:hidden;
  background:
    radial-gradient(120% 80% at 88% 20%, color-mix(in srgb, var(--petrol-600) 34%, transparent), transparent 60%),
    radial-gradient(80% 60% at 0% 80%, color-mix(in srgb, var(--petrol-700) 26%, transparent), transparent 60%),
    linear-gradient(180deg, var(--petrol-900), #04201d);
}
.hero-media{ position:absolute; right:0; top:0; bottom:0; width:62%; z-index:0;
  background:url("assets/hero-dark.png") no-repeat center right; background-size:cover;
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 26%);
  mask-image:linear-gradient(90deg, transparent 0%, #000 26%); }
.hero-overlay{ position:absolute; inset:0; z-index:1; pointer-events:none; background:
  linear-gradient(90deg, var(--petrol-900) 0%, color-mix(in srgb, var(--petrol-900) 80%, transparent) 32%, transparent 52%),
  linear-gradient(0deg, rgba(4,32,29,.45), transparent 36%); }
.hero-inner{ position:relative; z-index:3 }
.hero-stack{ max-width:560px; display:flex; flex-direction:column }

.hero-content{ max-width:560px; position:relative; z-index:4 }
.eyebrow{
  display:inline-flex; align-items:center; gap:10px; padding:7px 13px 7px 11px; border-radius:999px;
  background:color-mix(in srgb, var(--fg) 7%, transparent); border:1px solid var(--line-d-2);
  font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--fg); font-weight:600;
}
.eyebrow .dot{ width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 30%, transparent) }

h1.hero-title{ font-size:clamp(38px, 6vw, 80px); line-height:.96; letter-spacing:-.04em; font-weight:800; margin:20px 0 0 }
h1.hero-title .kicker{ display:block; font-size:clamp(13px, 1.3vw, 17px); font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--accent); margin-bottom:12px }
h1.hero-title em{ font-style:normal; background:linear-gradient(180deg, var(--accent), var(--teal-500)); -webkit-background-clip:text; background-clip:text; color:transparent }
.hero-lead{ margin:20px 0 0; max-width:500px; color:var(--muted); font-size:16.5px; line-height:1.55 }
.hero-lead strong{ color:var(--fg); font-weight:600 }

/* Countdown */
.countdown{ margin-top:28px }
.cd-label{ display:flex; align-items:center; gap:9px; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); font-weight:700; margin-bottom:11px }
.cd-pulse{ width:8px; height:8px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 0 color-mix(in srgb, var(--accent) 60%, transparent); animation:cd-pulse 1.8s ease-out infinite }
@keyframes cd-pulse{ 0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 55%,transparent)} 70%{box-shadow:0 0 0 9px transparent} 100%{box-shadow:0 0 0 0 transparent} }
.cd-units{ display:flex; gap:8px }
.cd-unit{ flex:1; max-width:84px; text-align:center; padding:12px 6px; border-radius:13px;
  background:color-mix(in srgb, var(--fg) 5%, transparent); border:1px solid var(--line-d) }
.cd-unit b{ display:block; font-family:"JetBrains Mono",monospace; font-size:26px; font-weight:500; letter-spacing:-.01em; line-height:1 }
.cd-unit span{ display:block; margin-top:6px; font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); font-weight:600 }
.cd-deadline{ margin-top:12px; font-size:11.5px; color:var(--muted) }
.countdown.ended .cd-units{ display:none }
.countdown.ended .cd-label{ color:var(--accent) }

.info-row{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px; margin-top:30px; max-width:560px }
.info-card{ padding:14px 16px; border-radius:14px; background:color-mix(in srgb, var(--fg) 5%, transparent); border:1px solid var(--line-d) }
.info-card .lbl{ font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); font-weight:600 }
.info-card .val{ margin-top:4px; font-size:15px; font-weight:600; letter-spacing:-.01em }
.info-card .val small{ display:block; font-weight:400; opacity:.7; font-size:12px; margin-top:2px }
@media (max-width:520px){ .info-row{ grid-template-columns:1fr } }

.hero-meta{
  position:absolute; right:28px; bottom:24px; z-index:4; display:flex; align-items:center; gap:14px;
  font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); font-weight:600;
}
.hero-meta .vline{ width:18px; height:1px; background:currentColor; opacity:.4 }
@media (max-width:980px){ .hero-meta{ display:none } }

/* ─── Form card ───────────────────────────────────────────────────────── */
.form-col{ position:relative; z-index:4; margin-top:30px }
@media (max-width:980px){
  .hero{ flex-direction:column; align-items:stretch; min-height:auto; padding-top:96px }
  .hero-media{ position:relative; inset:auto; right:auto; top:auto; width:100%; height:42svh; min-height:280px; order:-1; margin-bottom:10px;
    background-position:center 16%;
    -webkit-mask-image:linear-gradient(180deg,#000 58%,transparent); mask-image:linear-gradient(180deg,#000 58%,transparent) }
  .hero-overlay{ display:none }
  .hero-stack{ max-width:none }
}
.form-card{
  position:relative; background:color-mix(in srgb, var(--fg) 5%, transparent); border:1px solid var(--line-d-2);
  border-radius:24px; padding:34px; box-shadow:0 30px 80px -40px rgba(0,0,0,.7);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
}
.form-card::before{ content:""; position:absolute; top:0; left:0; right:0; height:4px; border-radius:24px 24px 0 0;
  background:linear-gradient(90deg, var(--accent), var(--teal-500)) }
@media (max-width:520px){ .form-card{ padding:24px; border-radius:18px } }

.fc-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin-bottom:22px }
.fc-head h3{ margin:0; font-size:22px; font-weight:700; letter-spacing:-.02em }
.fc-head p{ margin:4px 0 0; font-size:13px; color:var(--muted) }
.fc-tag{ font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; font-weight:700; color:var(--accent);
  padding:6px 10px; border-radius:999px; background:color-mix(in srgb, var(--accent) 14%, transparent);
  border:1px solid color-mix(in srgb, var(--accent) 30%, transparent); white-space:nowrap }

.field{ display:flex; flex-direction:column; gap:7px; margin-bottom:14px }
.field label{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); font-weight:600 }
.field input, .field select{
  appearance:none; width:100%; padding:14px 16px; border-radius:12px;
  background:color-mix(in srgb, var(--fg) 5%, transparent); border:1px solid var(--line-d);
  color:var(--fg); font:inherit; font-size:15px; outline:none;
  transition:border-color .15s ease, background .2s ease, box-shadow .2s ease;
}
.field input::placeholder{ color:color-mix(in srgb, var(--fg) 35%, transparent) }
.field input:focus, .field select:focus{
  border-color:color-mix(in srgb, var(--accent) 80%, transparent);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent);
}
.field.err input, .field.err select{ border-color:#e87171; box-shadow:0 0 0 4px rgba(232,113,113,.16) }
.field .errmsg{ font-size:12px; color:#ef8585; min-height:0 }
.field:not(.err) .errmsg{ display:none }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px }
@media (max-width:480px){ .field-row{ grid-template-columns:1fr } }
.field select{
  padding-right:42px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2399a4a1' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat; background-position:right 14px center; background-size:18px;
}
.field select option{ background:var(--petrol-800); color:var(--fg) }

.submit{ width:100%; justify-content:center; padding:16px 22px; margin-top:8px; font-size:15px }
.spinner{ width:16px; height:16px; border-radius:50%; border:2px solid rgba(6,35,31,.25); border-top-color:#06231f; animation:spin .7s linear infinite }
@keyframes spin{ to{ transform:rotate(360deg) } }
.fine{ margin-top:14px; font-size:11.5px; color:var(--muted); line-height:1.5; text-align:center }

/* Closed state (after deadline) */
.form-closed{ text-align:center; padding:10px 4px }
.form-closed .ic{ width:54px; height:54px; margin:0 auto 14px; border-radius:50%; display:grid; place-items:center;
  background:color-mix(in srgb, var(--accent) 14%, transparent); color:var(--accent) }
.form-closed h3{ margin:0 0 6px; font-size:20px; font-weight:700 }
.form-closed p{ margin:0; color:var(--muted); font-size:14px }

/* ─── Ticket / Success ────────────────────────────────────────────────── */
.ticket{ position:relative; padding:30px 30px 26px;
  background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 14%, var(--bg)), var(--bg));
  border:1px solid color-mix(in srgb, var(--accent) 40%, transparent); border-radius:20px;
  animation:tk-in .5s cubic-bezier(.2,.7,.2,1) both }
@keyframes tk-in{ from{ opacity:0; transform:translateY(8px) } to{ opacity:1 } }
.tk-head{ display:flex; align-items:center; gap:10px; margin-bottom:4px }
.tk-check{ width:30px; height:30px; border-radius:50%; background:var(--accent); color:#06231f; display:grid; place-items:center;
  box-shadow:0 0 0 6px color-mix(in srgb, var(--accent) 22%, transparent) }
.tk-head .lb{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; font-weight:700; color:var(--accent) }
.tk-title{ font-size:21px; font-weight:700; letter-spacing:-.02em; margin:8px 0 4px }
.tk-sub{ font-size:13px; color:var(--muted) }
.tk-body{ display:grid; grid-template-columns:auto 1fr; gap:24px; margin-top:22px; padding-top:22px;
  border-top:1px dashed color-mix(in srgb, var(--fg) 18%, transparent); position:relative }
.tk-body::before, .tk-body::after{ content:""; position:absolute; top:-9px; width:18px; height:18px; border-radius:50%;
  background:var(--bg); border:1px solid color-mix(in srgb, var(--accent) 40%, transparent) }
.tk-body::before{ left:-39px } .tk-body::after{ right:-39px }
@media (max-width:520px){ .tk-body{ grid-template-columns:1fr; gap:18px } .tk-body::before,.tk-body::after{ display:none } }
.tk-qr{ width:150px; height:150px; padding:11px; border-radius:14px; background:#fff; display:grid; place-items:center;
  box-shadow:0 6px 28px -6px rgba(0,0,0,.25) }
.tk-qr canvas{ width:100%; height:100%; display:block }
.tk-info{ display:grid; grid-template-columns:1fr 1fr; gap:14px 22px; align-self:center }
.tk-info .lbl{ font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); font-weight:700 }
.tk-info .val{ margin-top:3px; font-size:14px; font-weight:600; letter-spacing:-.005em; overflow-wrap:anywhere }
.tk-code{ grid-column:span 2 }
.tk-code .val{ font-family:"JetBrains Mono",monospace; font-size:14px; letter-spacing:.06em; color:var(--accent) }
.tk-foot{ display:flex; gap:10px; margin-top:22px; flex-wrap:wrap }
.tk-foot .btn{ flex:1; justify-content:center; min-width:140px }

/* ─── Faixa de informações do evento ─────────────────────────────────── */
.event-info{ padding:34px 0; border-bottom:1px solid var(--line-d); background:color-mix(in srgb, var(--fg) 2.5%, transparent) }
.event-info__inner{ display:grid; grid-template-columns:minmax(0,auto) minmax(0,1fr); gap:40px; align-items:center }
@media (max-width:980px){ .event-info__inner{ grid-template-columns:1fr; gap:26px } }
.event-info .countdown{ margin-top:0 }
.event-info .cd-units{ max-width:360px }
.ei-grid{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px }
@media (max-width:980px){ .ei-grid{ grid-template-columns:repeat(4, minmax(0,1fr)) } }
@media (max-width:760px){ .ei-grid{ grid-template-columns:repeat(2, 1fr) } }
@media (max-width:420px){ .ei-grid{ grid-template-columns:1fr } }
.val-accent{ color:var(--accent) }

/* ─── Strip ───────────────────────────────────────────────────────────── */
.strip{ border-top:1px solid var(--line-d); border-bottom:1px solid var(--line-d);
  background:color-mix(in srgb, var(--fg) 3%, transparent); padding:22px 0 }
.strip-grid{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:24px; align-items:flex-start }
@media (max-width:820px){ .strip-grid{ grid-template-columns:repeat(2,1fr); gap:18px } }
.strip-item{ display:flex; gap:14px; align-items:flex-start }
.strip-item .ico{ flex:0 0 auto; width:38px; height:38px; border-radius:10px; display:grid; place-items:center;
  background:color-mix(in srgb, var(--accent) 18%, transparent); color:var(--accent);
  border:1px solid color-mix(in srgb, var(--accent) 30%, transparent) }
.strip-item h4{ margin:0 0 2px; font-size:14px; font-weight:600 }
.strip-item p{ margin:0; font-size:12.5px; color:var(--muted); line-height:1.4 }

/* ─── Section head ────────────────────────────────────────────────────── */
.sect-head{ max-width:760px; margin-bottom:46px }
.sect-head h2{ font-size:clamp(32px,4.4vw,60px); line-height:1; letter-spacing:-.035em; font-weight:700; margin:18px 0 0 }
.sect-head h2 em{ font-style:normal; color:var(--accent) }
.sect-head .lead{ margin-top:18px; color:var(--muted); font-size:16px; line-height:1.55; max-width:560px }
@media (max-width:720px){ .sect-head{ margin-bottom:32px } }

/* ─── Speakers (todos com foto) ──────────────────────────────────────── */
section.speakers-section{ padding:110px 0 32px; position:relative }
@media (max-width:720px){ section.speakers-section{ padding:72px 0 24px } }
.sp-grid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:18px }
@media (max-width:920px){ .sp-grid{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:520px){ .sp-grid{ grid-template-columns:1fr 1fr; gap:12px } }

.sp-card{ position:relative; aspect-ratio:4/5; border-radius:18px; overflow:hidden; isolation:isolate;
  background:linear-gradient(165deg, var(--petrol-700), var(--petrol-900) 70%); border:1px solid var(--line-d);
  transition:transform .4s cubic-bezier(.2,.7,.2,1), border-color .3s ease, box-shadow .4s ease }
.sp-card:hover{ transform:translateY(-5px); border-color:color-mix(in srgb, var(--accent) 45%, transparent);
  box-shadow:0 26px 52px -26px rgba(0,0,0,.6) }
/* luz suave no topo (vinheta) — unidade entre as fotos */
.sp-card::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.6;
  background:radial-gradient(70% 55% at 50% 6%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 60%) }
/* número grande marca-d'água */
.sp-card .num-bg{ position:absolute; top:4px; right:14px; z-index:0; pointer-events:none;
  font-family:"JetBrains Mono",monospace; font-weight:500; font-size:60px; line-height:1; letter-spacing:-.03em;
  color:rgba(255,255,255,.055) }
/* retrato — normalizado por palestrante via --ps (escala) e --py (deslocamento) */
.sp-portrait{ position:absolute; left:0; right:0; bottom:0; height:88%; width:100%; z-index:1;
  object-fit:contain; object-position:center bottom; transform-origin:bottom center;
  transform:translateY(var(--py,0)) scale(var(--ps,1));
  transition:transform .5s cubic-bezier(.2,.7,.2,1), filter .4s ease;
  filter:drop-shadow(0 18px 28px rgba(0,0,0,.5)) }
/* hover dá zoom suave (folga garante que não corta a cabeça) + realce */
.sp-card:hover .sp-portrait{ transform:translateY(var(--py,0)) scale(calc(var(--ps,1) * 1.045));
  filter:drop-shadow(0 24px 32px rgba(0,0,0,.58)) brightness(1.05) }
/* scrim de legibilidade na base */
.sp-card .grade{ position:absolute; left:0; right:0; bottom:0; height:62%; z-index:2; pointer-events:none;
  background:linear-gradient(180deg, transparent, rgba(4,18,14,.5) 46%, rgba(4,18,14,.92)) }
/* duotone verde sutil (unidade tonal entre as fotos) */
.sp-card .tone{ position:absolute; left:0; right:0; bottom:0; height:60%; z-index:2; pointer-events:none;
  background:linear-gradient(180deg, transparent, color-mix(in srgb, var(--teal-500) 22%, transparent));
  mix-blend-mode:soft-light }
/* meta editorial (sem caixa) */
.sp-card .meta{ position:absolute; left:18px; right:18px; bottom:17px; z-index:3;
  transition:transform .45s cubic-bezier(.2,.7,.2,1) }
.sp-card:hover .meta{ transform:translateY(-3px) }
.sp-card .meta .rule{ display:block; width:24px; height:2px; border-radius:2px; background:var(--accent); margin-bottom:9px;
  transition:width .45s cubic-bezier(.2,.7,.2,1) }
.sp-card:hover .meta .rule{ width:42px }
.sp-card .meta .nm{ font-size:17px; font-weight:700; letter-spacing:-.02em; line-height:1.12; color:#fff;
  text-shadow:0 1px 14px rgba(0,0,0,.45) }
.sp-card .meta .rl{ margin-top:5px; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(255,255,255,.74); font-weight:600 }

/* ─── Venue ───────────────────────────────────────────────────────────── */
section.venue-section{ padding:80px 0 48px }
@media (max-width:720px){ section.venue-section{ padding:56px 0 36px } }
.venue-card{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:0;
  border:1px solid var(--line-d); border-radius:24px; overflow:hidden; background:color-mix(in srgb, var(--fg) 4%, transparent) }
@media (max-width:880px){ .venue-card{ grid-template-columns:1fr } }
.venue-preview{ position:relative; min-height:380px; overflow:hidden; cursor:pointer; isolation:isolate;
  background:radial-gradient(120% 80% at 50% 60%, color-mix(in srgb, var(--petrol-700) 55%, transparent), var(--petrol-900) 75%);
  transition:filter .25s ease }
.venue-preview:hover{ filter:brightness(1.05) }
.venue-preview .map-svg{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none }
.venue-preview .overlay-cta{ position:absolute; left:18px; bottom:18px; z-index:3; display:inline-flex; align-items:center; gap:8px;
  padding:10px 14px; border-radius:999px; background:rgba(6,18,15,.6); color:#fff; border:1px solid rgba(255,255,255,.16);
  font-size:12px; font-weight:600; letter-spacing:.04em; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px) }
.venue-preview .pin-stack{ position:absolute; left:50%; top:48%; transform:translate(-50%,-50%); z-index:2; pointer-events:none }
.venue-preview .pin-pill{ position:absolute; left:50%; top:-58px; transform:translateX(-50%); background:#fff; color:#06231f;
  padding:8px 14px; border-radius:999px; font-size:11px; font-weight:700; letter-spacing:.06em; white-space:nowrap;
  box-shadow:0 10px 28px -10px rgba(0,0,0,.4) }
.venue-preview .pin-pill::after{ content:""; position:absolute; left:50%; bottom:-4px; transform:translateX(-50%) rotate(45deg); width:8px; height:8px; background:#fff }
.venue-preview .pin-svg{ width:40px; height:50px; display:block; filter:drop-shadow(0 8px 18px rgba(0,0,0,.35)); color:var(--accent) }
.venue-preview .pin-pulse{ position:absolute; left:50%; top:100%; transform:translate(-50%,-8px); width:18px; height:18px; border-radius:50%; background:var(--accent); opacity:.5; animation:vp-pulse 2.2s ease-out infinite }
@keyframes vp-pulse{ 0%{ transform:translate(-50%,-8px) scale(.6); opacity:.55 } 70%{ transform:translate(-50%,-8px) scale(2.6); opacity:0 } 100%{ transform:translate(-50%,-8px) scale(2.6); opacity:0 } }
.venue-body{ padding:40px; display:flex; flex-direction:column; border-left:1px solid var(--line-d) }
@media (max-width:880px){ .venue-body{ border-left:0; border-top:1px solid var(--line-d); padding:28px } .venue-preview{ min-height:280px } }
.venue-body .eyebrow{ align-self:flex-start }
.venue-body h3{ margin:18px 0 0; font-size:clamp(22px, 2.8vw, 30px); font-weight:700; letter-spacing:-.022em; line-height:1.05 }
.venue-body .city{ margin-top:8px; font-size:15px; color:var(--muted); font-weight:500 }
.venue-meta{ display:grid; grid-template-columns:1fr 1fr; gap:18px 24px; margin-top:28px; padding-top:24px; border-top:1px solid var(--line-d) }
.venue-meta .lbl{ font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); font-weight:700 }
.venue-meta .val{ margin-top:6px; font-size:14.5px; font-weight:600; letter-spacing:-.005em }
.venue-meta .val .sub{ font-weight:400; color:var(--muted); font-size:12.5px }
.venue-cta{ display:flex; gap:10px; margin-top:28px; flex-wrap:wrap }

/* ─── Modal ───────────────────────────────────────────────────────────── */
.modal{ position:fixed; inset:0; z-index:1000; display:none; align-items:center; justify-content:center; padding:24px }
.modal.open{ display:flex }
.modal-back{ position:absolute; inset:0; background:rgba(3,16,14,.65); -webkit-backdrop-filter:blur(14px) saturate(140%); backdrop-filter:blur(14px) saturate(140%); animation:m-fade .25s ease both }
@keyframes m-fade{ from{opacity:0} to{opacity:1} }
.modal-card{ position:relative; z-index:2; width:100%; max-width:900px; max-height:calc(100svh - 48px);
  background:var(--bg); border:1px solid var(--line-d-2); border-radius:22px; overflow:hidden; display:flex; flex-direction:column;
  box-shadow:0 40px 120px -20px rgba(0,0,0,.6); animation:m-pop .3s cubic-bezier(.2,.7,.2,1) both }
@keyframes m-pop{ from{ opacity:0; transform:translateY(10px) } to{ opacity:1 } }
.modal-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:18px; padding:22px 24px 20px; border-bottom:1px solid var(--line-d) }
.modal-head .lb{ font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--accent); font-weight:700 }
.modal-head h3{ margin:6px 0 4px; font-size:22px; font-weight:700; letter-spacing:-.02em }
.modal-head p{ margin:0; font-size:13px; color:var(--muted) }
.modal-x{ appearance:none; border:1px solid var(--line-d-2); background:transparent; color:var(--fg); width:36px; height:36px; border-radius:50%; cursor:pointer; display:grid; place-items:center; flex:0 0 auto; transition:background .15s ease }
.modal-x:hover{ background:color-mix(in srgb, var(--fg) 10%, transparent) }
.modal-map{ position:relative; aspect-ratio:16/10; max-height:55svh; min-height:280px; background:var(--petrol-800) }
.modal-map iframe{ position:absolute; inset:0; width:100%; height:100%; border:0 }
.modal-foot{ padding:18px 24px; display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; border-top:1px solid var(--line-d); align-items:center }
.modal-foot .meta{ font-size:12.5px; color:var(--muted) }
.modal-foot .actions{ display:flex; gap:10px; flex-wrap:wrap }
body.modal-open{ overflow:hidden }

/* ─── Footer ──────────────────────────────────────────────────────────── */
footer.site{ border-top:1px solid var(--line-d); padding:34px 0 40px; margin-top:32px; font-size:13px }
footer.site .row{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap }
footer.site .brand img{ height:42px }
footer .meta{ color:var(--muted) }

/* ─── Reveal-on-scroll ────────────────────────────────────────────────── */
.reveal{ opacity:0; transform:translateY(14px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1) }
.reveal.in{ opacity:1; transform:translateY(0) }
.reveal[data-d="1"]{ transition-delay:.06s }
.reveal[data-d="2"]{ transition-delay:.12s }
.reveal[data-d="3"]{ transition-delay:.18s }
.reveal[data-d="4"]{ transition-delay:.24s }
.par{ will-change:transform }

/* Sem JS: garante que nada fique invisível */
.no-js .reveal{ opacity:1; transform:none }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important }
  .reveal{ opacity:1 !important; transform:none !important }
  .par{ transform:none !important }
}

/* =========================================================================
   HERO (imagem dos palestrantes) + SEÇÃO DE INSCRIÇÃO separada
   ========================================================================= */
.hero{ position:relative; min-height:100svh; display:flex; align-items:center; padding:132px 0 72px; overflow:hidden;
  background:linear-gradient(180deg, var(--petrol-900), #04201d) }
.hero-photo{ position:absolute; inset:0; z-index:0;
  background:url("assets/hero-dark.png") no-repeat right center; background-size:cover }
.hero-overlay{ position:absolute; inset:0; z-index:1; pointer-events:none; background:
  linear-gradient(95deg, var(--petrol-900) 0%, color-mix(in srgb, var(--petrol-900) 92%, transparent) 33%, color-mix(in srgb, var(--petrol-900) 45%, transparent) 57%, transparent 80%),
  linear-gradient(0deg, rgba(4,32,29,.5), transparent 36%) }
.hero-inner{ position:relative; z-index:2 }
.hero-content{ max-width:600px }
.hero .hero-title{ margin-top:18px }
.hero .hero-lead{ margin-top:16px }
.cta-row{ display:flex; gap:12px; margin-top:30px; flex-wrap:wrap }
.btn-lg{ padding:16px 26px; font-size:15px }

.hero-facts{ display:flex; flex-wrap:wrap; gap:8px; margin:18px 0 0; padding:0; list-style:none }
.hero-facts li{ display:inline-flex; align-items:center; gap:8px; padding:8px 13px; border-radius:999px;
  background:color-mix(in srgb, var(--fg) 7%, transparent); border:1px solid var(--line-d-2); font-size:13px; font-weight:600 }
.hero-facts svg{ width:16px; height:16px; color:var(--accent); fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round }
.hero .countdown{ margin-top:24px }
.hero .cd-units{ max-width:380px }

.hero-meta{ position:absolute; right:28px; bottom:24px; z-index:2; display:flex; align-items:center; gap:14px;
  font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); font-weight:600 }
.hero-meta .vline{ width:18px; height:1px; background:currentColor; opacity:.4 }
@media (max-width:980px){ .hero-meta{ display:none } }

/* Seção de inscrição (dedicada) */
.register{ position:relative; padding:90px 0; overflow:hidden;
  background:radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--petrol-700) 14%, transparent), transparent 60%) }
.reg-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,520px); gap:56px; align-items:start; position:relative; z-index:1 }
@media (max-width:980px){ .reg-grid{ grid-template-columns:1fr; gap:34px } }
.reg-intro h2{ font-size:clamp(30px,4vw,52px); line-height:1.02; letter-spacing:-.03em; font-weight:700; margin:16px 0 0 }
.reg-intro h2 em{ font-style:normal; color:var(--accent) }
.reg-intro .lead{ margin-top:16px; color:var(--muted); font-size:16px; line-height:1.55; max-width:460px }
.perks{ list-style:none; padding:0; margin:26px 0 0; display:grid; gap:12px }
.perks li{ display:flex; align-items:center; gap:11px; font-weight:500; font-size:15px }
.perks svg{ width:20px; height:20px; color:var(--accent); flex:0 0 auto }
.tri-deco{ position:absolute; right:7%; top:60px; width:0; height:0; z-index:0; pointer-events:none;
  border-style:solid; border-width:0 64px 110px 64px; border-color:transparent transparent color-mix(in srgb, var(--accent) 9%, transparent) transparent }
@media (max-width:980px){ .tri-deco{ display:none } }

/* CTA fixo (mobile) */
.mobile-cta{ position:fixed; left:14px; right:14px; bottom:14px; z-index:60; display:none;
  align-items:center; justify-content:center; gap:8px; padding:15px 20px; border-radius:999px;
  background:var(--accent); color:#06231f; font-family:inherit; font-weight:700; font-size:15px; text-decoration:none;
  box-shadow:0 14px 32px -8px color-mix(in srgb, var(--accent) 70%, transparent) }
.mobile-cta:active{ transform:translateY(1px) }
body.modal-open .mobile-cta{ display:none !important }

/* Modal de credencial / sucesso */
.cred-card{ max-width:560px; overflow-y:auto }
.cred{ padding:30px 30px 26px }
.cred-top{ display:flex; align-items:center; gap:10px; margin-bottom:4px }
.cred .lb{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; font-weight:700; color:var(--accent) }
.cred-title{ font-size:21px; font-weight:700; letter-spacing:-.02em; margin:10px 0 4px }
.cred-sub{ font-size:13px; color:var(--muted) }
.cred-body{ display:grid; grid-template-columns:auto 1fr; gap:24px; margin:20px 0; padding-top:20px;
  border-top:1px dashed color-mix(in srgb, var(--fg) 18%, transparent) }
.cred-qr{ width:152px; height:152px; padding:11px; border-radius:14px; background:#fff; display:grid; place-items:center;
  box-shadow:0 6px 28px -6px rgba(0,0,0,.25) }
.cred-qr canvas{ width:100%; height:100%; display:block }
.cred-info{ display:grid; grid-template-columns:1fr 1fr; gap:13px 20px; align-self:center; min-width:0 }
.cred-info .lbl{ font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); font-weight:700 }
.cred-info .val{ margin-top:3px; font-size:13.5px; font-weight:600; overflow-wrap:anywhere }
.cred-code{ grid-column:span 2 }
.cred-code .val{ font-family:"JetBrains Mono",monospace; color:var(--accent); letter-spacing:.06em }
.cred-foot{ display:flex; gap:10px; flex-wrap:wrap; margin-top:18px }
.cred-foot .btn{ flex:1; justify-content:center; min-width:150px }
@media (max-width:520px){
  .cred-body{ grid-template-columns:1fr; justify-items:center; text-align:center; gap:18px }
  .cred-info{ width:100%; text-align:left }
}

/* Hero responsivo: imagem vira banner no topo, conteúdo abaixo */
@media (max-width:980px){
  .hero{ display:block; min-height:auto; padding:0 }
  /* mostra o grupo inteiro: proporção da arte (sem corte lateral) */
  .hero-photo{ position:relative; inset:auto; height:auto; aspect-ratio:1659/933; max-height:62svh;
    background-position:center; background-size:cover;
    -webkit-mask-image:linear-gradient(180deg,#000 82%,transparent); mask-image:linear-gradient(180deg,#000 82%,transparent) }
  .hero-overlay{ display:none }
  .hero-inner{ padding-top:14px; padding-bottom:46px }
  .hero-content{ max-width:none }
  .cta-row{ flex-direction:column }
  .cta-row .btn{ width:100%; justify-content:center }
}
@media (max-width:760px){
  .mobile-cta{ display:flex }
  main{ padding-bottom:78px }
}

/* =========================================================================
   SEÇÕES CLARAS (ritmo institucional) — Inscrição e Local
   ========================================================================= */
.section-light{
  --l-ink:#0c2a22; --l-muted:#39615440; /* placeholder, redefinido abaixo */
  --l-muted:#376053; --l-line:rgba(10,70,59,.10); --l-line2:rgba(10,70,59,.16);
  --petrol-soft:#0e5a48; --green-on-light:#0a7d52;
  color:var(--l-ink);
}
/* off-white levemente esverdeado + transição (fade do escuro p/ o claro no topo) + geometria sutil */
.register.section-light{ position:relative;
  background:
    linear-gradient(180deg, rgba(6,24,20,.55) 0, rgba(6,24,20,0) 110px),
    #eef5f1; }
.register.section-light::before{ content:""; position:absolute; right:-70px; top:90px; width:0; height:0; z-index:0; pointer-events:none;
  border-style:solid; border-width:0 140px 230px 140px; border-color:transparent transparent rgba(31,143,127,.05) transparent; transform:rotate(6deg) }
.register.section-light::after{ content:""; position:absolute; left:-50px; bottom:-40px; width:0; height:0; z-index:0; pointer-events:none;
  border-style:solid; border-width:0 95px 160px 95px; border-color:transparent transparent rgba(13,107,58,.045) transparent }
.register .reg-grid{ position:relative; z-index:1 }

.section-light .eyebrow{ background:rgba(10,70,59,.05); border-color:var(--l-line2); color:var(--petrol-soft) }
.section-light h2{ color:var(--l-ink) }
.section-light h2 em, .section-light .reg-intro h2 em{ color:var(--green-on-light) }
.section-light .lead{ color:var(--l-muted) }
.section-light .perks li{ color:var(--l-ink) }
.section-light .perks svg{ color:var(--green-on-light) }

/* Form card claro — borda e sombra mais suaves */
.section-light .form-card{ background:#fff; border-color:rgba(10,70,59,.07);
  box-shadow:0 18px 50px -30px rgba(10,70,59,.18), 0 2px 8px rgba(10,70,59,.04) }
.section-light .form-card::before{ background:linear-gradient(90deg, var(--green-on-light), var(--teal-500)) }
.section-light .fc-head h3{ color:var(--green-on-light) }
.section-light .fc-head p{ color:var(--l-muted) }
.section-light .fc-tag{ color:var(--green-on-light);
  background:color-mix(in srgb, var(--green-on-light) 12%, transparent);
  border-color:color-mix(in srgb, var(--green-on-light) 30%, transparent) }
.section-light .field label{ color:var(--l-muted) }
.section-light .field input{ background:#fafbf9; border-color:var(--l-line); color:var(--l-ink) }
.section-light .field input::placeholder{ color:#9aa8a0 }
.section-light .field input:focus{ background:#fff; border-color:var(--green-on-light);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--green-on-light) 16%, transparent) }
.section-light .field.err input{ border-color:#d0584b; box-shadow:0 0 0 4px rgba(208,88,75,.14) }
.section-light .field .errmsg{ color:#b23b2e }
.section-light .field.ok input{ border-color:color-mix(in srgb, var(--green-on-light) 60%, transparent) }
.section-light .fine{ color:var(--l-muted) }

/* Botão fantasma no claro */
.section-light .btn-ghost{ border-color:rgba(6,18,15,.18); color:var(--l-ink) }
.section-light .btn-ghost:hover{ background:rgba(6,18,15,.06) }

/* Venue claro */
.section-light .venue-card{ background:#fff; border-color:var(--l-line);
  box-shadow:0 30px 70px -45px rgba(6,40,31,.2) }
.section-light .venue-preview{ --accent:#1f8f7f;
  background:radial-gradient(120% 80% at 50% 60%, #e7eee8, #d6e0d8 80%) }
.section-light .venue-preview .overlay-cta{ background:rgba(255,255,255,.92); color:var(--l-ink); border-color:rgba(6,18,15,.1) }
.section-light .venue-body{ border-left-color:var(--l-line) }
.section-light .venue-body h3{ color:var(--l-ink) }
.section-light .venue-body .city{ color:var(--l-muted) }
.section-light .venue-meta{ border-top-color:var(--l-line) }
.section-light .venue-meta .lbl{ color:var(--l-muted) }
.section-light .venue-meta .val{ color:var(--l-ink) }
.section-light .venue-meta .val .sub{ color:var(--l-muted) }
.section-light .tri-deco{ border-bottom-color:color-mix(in srgb, var(--green-on-light) 12%, transparent) }
@media (max-width:880px){ .section-light .venue-body{ border-top-color:var(--l-line) } }

/* Local HÍBRIDO: seção escura + card claro (alternância dark→claro→dark→híbrido) */
.venue-section.hybrid{ background:linear-gradient(180deg, #04201d 0%, var(--petrol-900) 100%) }
.venue-section.hybrid .sect-head{ } /* cabeçalho fica claro sobre o escuro */
.venue-section.hybrid .sect-head .eyebrow{ background:color-mix(in srgb, var(--fg) 7%, transparent); border-color:var(--line-d-2); color:var(--fg) }
.venue-section.hybrid .sect-head h2{ color:#fff }
.venue-section.hybrid .sect-head h2 em{ color:var(--accent) }
.venue-section.hybrid .sect-head .lead{ color:var(--muted) }

/* =========================================================================
   Refinamentos mobile + interação
   ========================================================================= */
/* CTA fixo: some suavemente quando inscrição/local entram em cena */
.mobile-cta{ transition:transform .3s ease, opacity .3s ease }
body.cta-hidden .mobile-cta{ transform:translateY(170%); opacity:0; pointer-events:none }

/* Header mobile: só a logo (o CTA fixo já cobre a ação) */
@media (max-width:760px){ #header .nav-cta{ display:none } }

/* Palestrantes no mobile: carrossel horizontal com snap (fotos maiores) */
@media (max-width:640px){
  .sp-grid{ display:flex; grid-template-columns:none; overflow-x:auto; gap:14px;
    scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
    padding:4px 18px 16px; margin:0 -18px; scrollbar-width:none }
  .sp-grid::-webkit-scrollbar{ display:none }
  .sp-card{ flex:0 0 auto; min-width:74%; scroll-snap-align:center }
}
.sp-hint{ display:none }
@media (max-width:640px){
  .sp-hint{ display:flex; align-items:center; justify-content:center; gap:8px; margin-top:10px;
    font-size:12px; letter-spacing:.05em; color:var(--muted); font-weight:600 }
  .sp-hint svg{ width:15px; height:15px; color:var(--accent); animation:hint-nudge 1.8s ease-in-out infinite }
  .sp-hint svg:last-child{ animation-delay:.9s }
}
@keyframes hint-nudge{ 0%,100%{ transform:translateX(0); opacity:.6 } 50%{ transform:translateX(3px); opacity:1 } }

/* Mini pré-visualização da credencial (desktop) — preenche o vazio à esquerda */
.cred-preview{ display:none }
@media (min-width:981px){
  .cred-preview{ display:flex; align-items:center; gap:15px; margin-top:32px; max-width:360px;
    padding:14px 16px; border-radius:16px; background:#fff; border:1px dashed rgba(10,70,59,.22);
    box-shadow:0 16px 40px -28px rgba(10,70,59,.28) }
}
.cp-qr{ width:64px; height:64px; flex:0 0 auto; border-radius:10px; overflow:hidden; background:#fff }
.cp-qr canvas{ width:100%; height:100%; display:block }
.cp-info{ display:flex; flex-direction:column; gap:3px; min-width:0 }
.cp-tag{ font-family:"JetBrains Mono",monospace; font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--green-on-light); font-weight:700 }
.cp-info strong{ font-size:14.5px; color:var(--l-ink); letter-spacing:-.01em }
.cp-sub{ font-size:11.5px; color:var(--l-muted) }

/* =========================================================================
   Acessibilidade + Motion
   ========================================================================= */
/* Foco visível por teclado */
a:focus-visible, button:focus-visible, input:focus-visible, [tabindex]:focus-visible{
  outline:2px solid var(--accent); outline-offset:2px }
.btn:focus-visible{ outline:2px solid var(--accent); outline-offset:3px }
.section-light a:focus-visible, .section-light button:focus-visible, .section-light input:focus-visible{ outline-color:var(--green-on-light) }

/* Campo válido (micro-interação) */
.field.ok input{ border-color:color-mix(in srgb, var(--accent) 55%, transparent) }
.field.ok label{ color:var(--accent) }
.section-light .field.ok label{ color:var(--green-on-light) }

/* Check do modal de sucesso "desenhando" */
#success-modal .tk-check svg path{ stroke-dasharray:30; stroke-dashoffset:30 }
#success-modal.open .tk-check svg path{ animation:draw-check .55s .18s ease forwards }
@keyframes draw-check{ to{ stroke-dashoffset:0 } }

/* Ken Burns sutil no hero (desktop) */
@media (min-width:981px){ .hero-photo{ animation:kenburns 22s ease-in-out infinite alternate } }
@keyframes kenburns{ from{ transform:scale(1.001) } to{ transform:scale(1.06) } }

/* Lenis */
html.lenis, html.lenis body{ height:auto }
.lenis.lenis-smooth{ scroll-behavior:auto !important }
.lenis.lenis-stopped{ overflow:hidden }