/* =====================================================================
   LexTime · Webinar Jornada Laboral 2027  (/lextime/webinar)
   ===================================================================== */
:root{
  --navy:#0B163B;
  --navy-2:#101D49;
  --blue:#3667F6;
  --cyan:#4EC8E8;
  --violet:#755CFF;
  --ink:#111827;
  --muted:#667085;
  --line:#E6EAF2;
  --surface:#F6F8FC;
  --white:#FFFFFF;
  --success:#0F9D73;
  --shadow:0 24px 70px rgba(18,31,68,.14);
  --shadow-soft:0 12px 35px rgba(18,31,68,.08);
  --radius-xl:28px;
  --radius-lg:20px;
  --radius-md:14px;
  --topbar-h:74px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color:var(--ink);
  background:var(--white);
  line-height:1.55;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%}
a{text-decoration:none;color:inherit}
button,input,select{font:inherit}
:focus-visible{outline:3px solid rgba(54,103,246,.55);outline-offset:2px}
.container{width:min(1180px, calc(100% - 40px)); margin:0 auto;}

/* ---------- topbar ---------- */
.topbar{
  background:rgba(255,255,255,.92);
  border-bottom:1px solid rgba(230,234,242,.9);
  position:sticky; top:0; z-index:100;
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
}
.nav{min-height:var(--topbar-h); display:flex; align-items:center; justify-content:space-between; gap:24px;}
.brand{display:flex; align-items:center; flex:none; border-radius:10px;}
/* El PNG del logo trae aire arriba/abajo (igual que en /lextime) */
.brand img{display:block; height:58px; width:auto; max-width:none; margin:-10px 0 -10px -10px;}
.nav-cta{display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:0 18px; border-radius:12px; background:var(--navy); color:white; font-size:.92rem; font-weight:750; transition:.2s ease;}
.nav-cta:hover{transform:translateY(-1px); background:var(--blue)}

/* ---------- hero ---------- */
.hero{
  position:relative; overflow:hidden;
  background:
    radial-gradient(circle at 12% 16%, rgba(117,92,255,.15), transparent 32%),
    radial-gradient(circle at 90% 10%, rgba(78,200,232,.14), transparent 29%),
    linear-gradient(180deg,#F8FAFF 0%,#FFFFFF 88%);
  padding:70px 0 82px;
}
.hero::before{content:""; position:absolute; width:520px; height:520px; border:1px solid rgba(54,103,246,.12); border-radius:50%; right:-280px; top:80px;}
.hero-grid{display:grid; grid-template-columns:minmax(0,1.04fr) minmax(360px,.76fr); gap:46px; align-items:start;}
.hero-main{min-width:0}

.badge{display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; background:#EEF2FF; color:#3446B4; font-weight:800; font-size:.79rem; letter-spacing:.055em; text-transform:uppercase; border:1px solid #DFE5FF;}
.badge-dot{width:7px; height:7px; border-radius:50%; background:var(--violet); box-shadow:0 0 0 5px rgba(117,92,255,.11); flex:none;}

h1{margin:18px 0 16px; font-size:clamp(2.35rem,4.3vw,4.2rem); line-height:.98; letter-spacing:-.055em; color:var(--navy); max-width:690px; overflow-wrap:break-word;}
.headline-accent{background:linear-gradient(90deg,var(--blue),var(--violet)); -webkit-background-clip:text; background-clip:text; color:transparent;}
.hero-copy{margin:0; font-size:1.05rem; color:#475467; max-width:690px;}

.hero-visual-inline{
  margin-top:22px;
  background:rgba(255,255,255,.78);
  border:1px solid rgba(222,228,241,.95);
  border-radius:24px;
  overflow:hidden;
  box-shadow:0 20px 50px rgba(18,31,68,.08);
  max-width:100%;
}
.hero-visual-inline img{width:100%; height:270px; display:block; object-fit:cover; object-position:center 46%;}

.event-info{margin-top:18px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; max-width:700px;}
.event-pill{display:flex; gap:12px; align-items:flex-start; background:white; border:1px solid var(--line); border-radius:15px; padding:12px 14px; box-shadow:0 8px 25px rgba(18,31,68,.04); min-height:76px;}
.event-icon{width:34px; height:34px; border-radius:10px; background:#EEF3FF; display:grid; place-items:center; color:var(--blue); flex:0 0 34px; font-size:1rem; font-weight:900;}
.event-pill strong{display:block; color:var(--navy); font-size:.93rem; line-height:1.2;}
.event-pill span{display:block; color:var(--muted); font-size:.82rem; margin-top:2px; line-height:1.35;}

.trust{margin-top:24px; display:flex; flex-wrap:wrap; gap:14px 22px; color:#546076; font-size:.88rem; font-weight:650;}
.trust span::before{content:"✓"; color:var(--success); font-weight:900; margin-right:7px;}

/* ---------- formulario ---------- */
.form-card{background:white; border:1px solid rgba(222,228,241,.95); border-radius:var(--radius-xl); padding:27px; box-shadow:var(--shadow); position:relative; z-index:2; min-width:0; scroll-margin-top:calc(var(--topbar-h) + 16px);}
.form-card::before{content:""; position:absolute; inset:-1px; border-radius:var(--radius-xl); padding:1px; background:linear-gradient(135deg,rgba(117,92,255,.32),rgba(78,200,232,.12),transparent 60%); -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none;}
.form-kicker{color:var(--blue); font-size:.75rem; font-weight:850; letter-spacing:.08em; text-transform:uppercase;}
.form-card h2{margin:5px 0 8px; font-size:1.68rem; line-height:1.14; letter-spacing:-.035em; color:var(--navy);}
.form-intro{margin:0 0 20px; color:var(--muted); font-size:.91rem;}
.form-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px;}
.field{min-width:0}
.field.full{grid-column:1/-1}
fieldset.field{margin:0; padding:0; border:0;}
label,legend{display:block; margin-bottom:6px; font-size:.76rem; font-weight:750; color:#344054;}
legend{padding:0}
input,select{width:100%; min-height:45px; padding:10px 12px; border-radius:11px; border:1px solid #D9DFEA; background:#FBFCFE; color:#1D2939; outline:none; transition:.18s ease;}
input:focus,select:focus{border-color:var(--blue); box-shadow:0 0 0 4px rgba(54,103,246,.09); background:white;}
input:focus-visible,select:focus-visible{outline:none}
.radio-card-wrap{display:grid; gap:8px; margin-top:5px;}
.radio-card{display:flex; gap:10px; align-items:center; min-height:46px; margin:0; border:1px solid #D9DFEA; background:#FBFCFE; border-radius:11px; padding:10px 11px; cursor:pointer; font-size:.9rem; font-weight:500; color:#1D2939; transition:.18s ease;}
.radio-card:has(input:checked){border-color:var(--blue); background:#F3F6FF;}
.radio-card:has(input:focus-visible){box-shadow:0 0 0 4px rgba(54,103,246,.16);}
.radio-card input{width:auto; min-height:auto; margin:0; flex:none; accent-color:var(--blue);}
/* Con disponibilidad (2 líneas) el círculo se alinea con la fecha, no con el centro del bloque */
.radio-card:has(.radio-badge){align-items:flex-start;}
.radio-card:has(.radio-badge) input{margin-top:.28em;}
.radio-card.is-unavailable{cursor:not-allowed; opacity:.62; background:#F4F5F8;}
/* Texto de la opción: fecha, etiqueta de modalidad y disponibilidad; se acomoda en varias líneas en móvil */
.radio-text{display:flex; flex-wrap:wrap; align-items:center; gap:5px 8px; flex:1; min-width:0;}
/* Salto de línea antes de la disponibilidad: el cupo va siempre abajo, alineado a la izquierda */
.radio-text::after{content:""; order:1; flex-basis:100%; height:0; margin-top:-5px;}
.radio-time{white-space:nowrap;}
.radio-tag{display:inline-flex; align-items:center; padding:2px 8px; border-radius:999px; background:#EEF2FF; border:1px solid #DFE5FF; color:#3446B4; font-size:.72rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; white-space:nowrap;}
.radio-badge{order:2; margin:0; padding:3px 8px; border-radius:999px; background:#FDECEC; color:#B42318; font-size:.72rem; font-style:normal; font-weight:800; white-space:nowrap;}
.radio-badge.is-info{background:#FFF4E8; color:#B65B00;}
.checkbox{display:flex; align-items:flex-start; gap:9px; margin-top:15px; color:#667085; font-size:.73rem; font-weight:500; line-height:1.45; cursor:pointer;}
.checkbox input{width:auto; min-height:auto; margin-top:3px; flex:none; accent-color:var(--blue);}
.checkbox a{color:var(--blue); text-decoration:underline; text-underline-offset:2px;}
.primary-btn{width:100%; margin-top:18px; min-height:52px; border:0; border-radius:13px; background:linear-gradient(100deg,var(--blue),var(--violet)); color:white; font-weight:850; letter-spacing:.01em; cursor:pointer; box-shadow:0 12px 24px rgba(70,88,230,.24); transition:.2s ease;}
.primary-btn:hover{transform:translateY(-2px); box-shadow:0 16px 30px rgba(70,88,230,.3)}
.primary-btn:disabled{opacity:.6; cursor:not-allowed; transform:none; box-shadow:none;}
.form-note{text-align:center; margin:10px 0 0; color:#7A8499; font-size:.72rem;}
/* Resultado del registro: informativo (azul), confirmado (verde) o error (rojo) */
.form-status{margin-top:14px; padding:12px 14px; border-radius:12px; background:#EEF3FF; border:1px solid #DAE3FF; color:#2B3F96; font-size:.86rem; font-weight:700;}
.form-status.is-success{background:#EAF8F3; border-color:#BFE8D7; color:#087352;}
.form-status.is-error{background:#FEF3F2; border-color:#FECDCA; color:#B42318;}
.form-status[hidden]{display:none}
.field-error{margin:6px 0 0; color:#B42318; font-size:.78rem; font-weight:650;}
[aria-invalid="true"]{border-color:#F04438 !important; background:#FFFBFA;}
/* Campo trampa: fuera de la vista y del orden de tabulación */
.hp-field{position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden;}

/* ---------- secciones ---------- */
section{padding:84px 0}
.section-label{color:var(--blue); text-transform:uppercase; font-size:.78rem; letter-spacing:.095em; font-weight:850; margin-bottom:9px;}
.section-label--lg{font-size:1.02rem; letter-spacing:.12em;}
.section-title{margin:0; font-size:clamp(2rem,4vw,3.45rem); line-height:1.04; letter-spacing:-.047em; color:var(--navy);}
.section-lead{color:var(--muted); max-width:760px; font-size:1.02rem; margin:16px 0 0;}

.learn{background:var(--white);}
.temario-layout{display:grid; grid-template-columns:minmax(240px,.30fr) minmax(0,.70fr); gap:34px; align-items:stretch; margin-top:34px;}
.temario-speaker{
  position:relative;
  min-height:690px;
  border-radius:28px;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 22%, rgba(78,200,232,.16), transparent 34%),
    linear-gradient(180deg,#F5F8FF 0%,#EEF2FB 100%);
  border:1px solid var(--line);
  box-shadow:var(--shadow-soft);
  display:flex;
  align-items:flex-end;
  justify-content:center;
}
.temario-speaker::before{content:""; position:absolute; width:310px; height:310px; border-radius:50%; border:1px solid rgba(54,103,246,.11); top:58px; left:50%; transform:translateX(-50%);}
.temario-speaker img{width:112%; max-width:none; height:auto; display:block; position:relative; z-index:1; margin-bottom:-4px; object-fit:contain; filter:drop-shadow(0 26px 34px rgba(15,31,72,.13));}
.temario-speaker-badge{position:absolute; left:18px; top:18px; z-index:2; display:inline-flex; align-items:center; gap:7px; padding:8px 11px; border-radius:999px; background:rgba(255,255,255,.9); border:1px solid rgba(218,226,246,.95); color:var(--blue); font-size:.72rem; font-weight:850; letter-spacing:.045em; text-transform:uppercase; backdrop-filter:blur(10px);}

.cards{display:grid; grid-template-columns:minmax(0,1fr); gap:11px; margin:0; align-content:start; min-width:0;}
.topic{
  border:1px solid var(--line);
  border-radius:18px;
  padding:13px 16px;
  background:linear-gradient(180deg,#FFFFFF 0%,#FBFCFF 100%);
  box-shadow:0 9px 24px rgba(18,31,68,.055);
  transition:.2s ease;
  position:relative;
  overflow:hidden;
  min-height:101px;
  display:grid;
  grid-template-columns:112px minmax(0,1fr) 72px;
  grid-template-areas:
    "top title visual"
    "top desc visual";
  column-gap:15px;
  row-gap:4px;
  align-items:center;
}
.topic::before{content:""; position:absolute; width:145px; height:145px; border-radius:50%; right:-62px; top:50%; transform:translateY(-50%); background:radial-gradient(circle,rgba(54,103,246,.07),rgba(117,92,255,.025) 58%,transparent 72%); pointer-events:none;}
.topic:hover{transform:translateX(3px); border-color:#C9D4F4; box-shadow:0 13px 30px rgba(18,31,68,.085);}
.topic-top{grid-area:top; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:7px; position:relative; z-index:2;}
.topic-number{width:36px; height:36px; border-radius:11px; display:grid; place-items:center; background:#EEF3FF; color:var(--blue); font-size:.78rem; font-weight:900; margin:0;}
.topic-tag{padding:5px 8px; border-radius:999px; background:#F5F7FF; border:1px solid #E3E9FF; color:#5970C9; font-size:.61rem; letter-spacing:.055em; text-transform:uppercase; font-weight:850; white-space:nowrap;}
.topic-visual{grid-area:visual; height:72px; display:flex; align-items:center; justify-content:center; margin:0; position:relative; z-index:1;}
.topic-visual img{max-width:66px; max-height:66px; width:auto; height:auto; filter:drop-shadow(0 9px 18px rgba(54,103,246,.11));}
.topic h3{grid-area:title; margin:0; color:var(--navy); font-size:1.02rem; line-height:1.16; position:relative; z-index:1; letter-spacing:-.015em;}
.topic p{grid-area:desc; margin:0; color:var(--muted); font-size:.84rem; line-height:1.4; position:relative; z-index:1; max-width:760px;}

.section-cta{display:flex; justify-content:center; margin-top:34px;}
.outline-btn{display:inline-flex; align-items:center; justify-content:center; text-align:center; min-height:48px; padding:0 22px; border-radius:12px; color:var(--blue); background:#F3F6FF; border:1px solid #DAE3FF; font-weight:800; transition:.2s ease;}
.outline-btn:hover{background:#E8EEFF; border-color:#C5D3FF;}

.problem{background:var(--surface);}
.problem-head{display:grid; grid-template-columns:minmax(0,1fr) minmax(320px,.92fr); gap:28px; align-items:end; margin-bottom:12px;}
.problem-copy{max-width:760px; min-width:0;}
.problem-copy .section-title{max-width:760px;}
.problem-copy .section-lead{max-width:690px;}
.problem-art{
  min-height:310px;
  border-radius:28px;
  position:relative;
  overflow:hidden;
  border:1px solid rgba(221,228,241,.95);
  background:
    radial-gradient(circle at 70% 22%, rgba(54,103,246,.12), transparent 28%),
    radial-gradient(circle at 18% 80%, rgba(117,92,255,.08), transparent 30%),
    linear-gradient(180deg,#FFFFFF 0%, #F5F8FF 100%);
  box-shadow:var(--shadow-soft);
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding:18px 18px 0;
}
.problem-art::before{content:""; position:absolute; width:240px; height:240px; border-radius:50%; right:-76px; top:-62px; border:1px solid rgba(54,103,246,.12);}
.problem-art img{width:min(100%, 520px); height:auto; display:block; object-fit:contain; position:relative; z-index:1; filter:drop-shadow(0 18px 28px rgba(12,28,68,.12));}
.problem-grid{margin-top:20px; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:22px; align-items:stretch;}
.question-card{background:var(--navy); color:white; border-radius:24px; padding:34px; position:relative; overflow:hidden;}
.question-card::after{content:""; width:240px; height:240px; border-radius:50%; background:radial-gradient(circle,rgba(78,200,232,.22),transparent 67%); position:absolute; right:-70px; bottom:-70px;}
.question-card h3{font-size:clamp(1.8rem,3.5vw,2.8rem); line-height:1.06; letter-spacing:-.045em; margin:0 0 18px; max-width:600px;}
.question-card p{color:#C7D2F0; max-width:610px; margin:0;}
.question-highlight{color:white; margin-top:28px; padding:17px 18px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.07); border-radius:15px; font-weight:700; position:relative; z-index:1;}
.checklist-card{background:white; border:1px solid var(--line); border-radius:24px; padding:30px;}
.checklist-card h3{margin:0 0 16px; color:var(--navy); font-size:1.25rem;}
.check-item{display:flex; gap:11px; padding:11px 0; border-bottom:1px solid #EEF1F6; font-size:.9rem; color:#475467;}
.check-item:last-child{border-bottom:0}
.check-icon{width:24px; height:24px; border-radius:8px; display:grid; place-items:center; background:#EAF8F3; color:var(--success); font-size:.77rem; font-weight:900; flex:0 0 24px;}

.bonus{background:linear-gradient(135deg,rgba(54,103,246,.98),rgba(117,92,255,.98)),var(--navy); color:white; position:relative; overflow:hidden;}
.bonus::before{content:""; width:520px; height:520px; position:absolute; left:-240px; top:-250px; border:1px solid rgba(255,255,255,.18); border-radius:50%;}
.bonus-grid{display:grid; grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr); gap:48px; align-items:center; position:relative; z-index:1;}
.guide-mockup{max-width:390px; margin:auto; transform:rotate(-3deg); position:relative;}
.guide-mockup img{width:100%; height:auto; display:block; border-radius:16px; box-shadow:0 28px 60px rgba(0,0,0,.24);}
.bonus .section-label{color:#D8E7FF}
.bonus .section-title{color:white}
.bonus .section-lead{color:#E2E9FB}
.bonus-list{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 18px; margin:27px 0;}
.bonus-list div{display:flex; gap:9px; color:#F1F4FF; font-size:.89rem;}
.bonus-list div::before{content:"✓"; font-weight:900; color:#9EF2DC;}
.white-btn{display:inline-flex; align-items:center; justify-content:center; text-align:center; min-height:50px; padding:0 24px; border-radius:12px; background:white; color:var(--navy); font-weight:850; box-shadow:0 10px 30px rgba(8,22,58,.18);}

/* ---------- footer ---------- */
.wb-footer{background:#07112F; color:#AEBBDA; padding:28px 0;}
.footer-wrap{display:flex; justify-content:space-between; align-items:center; gap:20px; font-size:.79rem;}
.footer-lead{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.footer-brand{display:inline-flex; border-radius:8px;}
.footer-brand img{display:block; height:44px; width:auto; max-width:none; margin:-8px -6px -8px -8px;}
.sticky-mobile{display:none}

/* ---------- laptop / tablet ---------- */
@media (max-width:1100px){
  .hero-grid{grid-template-columns:minmax(0,1fr) minmax(340px,.8fr); gap:32px}
}

@media (max-width:960px){
  .temario-layout{grid-template-columns:minmax(210px,.34fr) minmax(0,.66fr); gap:22px}
  .temario-speaker{min-height:650px}

  .hero-grid{grid-template-columns:minmax(0,1fr); gap:34px}
  .form-card{max-width:680px; width:100%}
  .problem-grid{grid-template-columns:minmax(0,1fr)}
  .bonus-grid{grid-template-columns:minmax(0,1fr)}
  .guide-mockup{margin:0}
  .hero-visual-inline img{height:285px; object-position:center 46%}
}

/* Tablet vertical: el orador pasa arriba del temario y las tarjetas van en 2 columnas */
@media (max-width:820px){
  .temario-layout{grid-template-columns:minmax(0,1fr)}
  .temario-speaker{min-height:440px}
  .temario-speaker img{width:min(70%,380px)}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .topic{grid-template-columns:minmax(0,1fr) 64px; grid-template-areas:"top visual" "title title" "desc desc"; row-gap:8px; align-items:start}
  .topic-top{flex-direction:row; align-items:center; justify-content:flex-start}
  .topic-visual{height:64px; justify-content:flex-end}
  .topic-visual img{max-width:58px; max-height:58px}
  .problem-head{grid-template-columns:minmax(0,1fr); gap:20px}
  .problem-art{max-width:640px}
}

/* ---------- mobile ---------- */
@media (max-width:640px){
  :root{--topbar-h:64px}
  .container{width:min(100% - 32px,1180px)}
  .nav-cta{display:none}
  .brand img{height:52px; margin:-9px 0 -9px -9px}
  .hero{padding:40px 0 56px}
  .hero-grid{gap:28px}
  h1{font-size:clamp(2.1rem,10.2vw,2.72rem); line-height:1.02; letter-spacing:-.05em}
  .hero-copy{font-size:1rem}
  .hero-visual-inline{border-radius:20px}
  .hero-visual-inline img{height:225px; object-position:center 45%}
  .event-info{grid-template-columns:minmax(0,1fr)}
  .event-pill{min-height:0}
  .form-card{padding:20px; border-radius:20px}
  .form-card::before{border-radius:20px}
  .form-card h2{font-size:1.5rem}
  .form-grid{grid-template-columns:minmax(0,1fr)}
  .field.full{grid-column:auto}
  label,legend{font-size:.8rem}
  .checkbox{font-size:.78rem}
  section{padding:60px 0}
  .section-label--lg{font-size:.9rem}
  .temario-speaker{min-height:400px}
  .temario-speaker img{width:min(84%,360px)}
  .cards{grid-template-columns:minmax(0,1fr)}
  .topic{min-height:auto; padding:14px}
  .topic-tag{font-size:.7rem}
  .problem-art{min-height:220px; padding:16px 12px 0}
  .problem-art img{width:min(100%, 360px)}
  .question-card,.checklist-card{padding:24px}
  .bonus-list{grid-template-columns:minmax(0,1fr)}
  .guide-mockup{max-width:260px; margin:0 auto}
  .white-btn{width:100%; padding:0 18px}
  .footer-wrap{flex-direction:column; align-items:flex-start}
  .sticky-mobile{display:block; position:fixed; left:12px; right:12px; bottom:calc(12px + env(safe-area-inset-bottom)); z-index:200; transition:transform .25s ease, opacity .25s ease;}
  .sticky-mobile.is-hidden{transform:translateY(140%); opacity:0; pointer-events:none}
  .sticky-mobile a{display:flex; justify-content:center; align-items:center; min-height:50px; border-radius:13px; background:linear-gradient(100deg,var(--blue),var(--violet)); color:white; font-weight:850; box-shadow:0 12px 28px rgba(37,55,145,.3);}
  .wb-footer{padding-bottom:96px}
}

/* small mobile (320–374) */
@media (max-width:374px){
  .container{width:calc(100% - 28px)}
  .badge{font-size:.7rem; letter-spacing:.04em; padding:7px 10px}
  h1{font-size:2.05rem}
  .hero-visual-inline img{height:190px}
  .form-card{padding:18px 16px}
  .section-title{font-size:1.85rem}
  .question-card h3{font-size:1.6rem}
  .outline-btn{padding:0 16px}
}

/* ---------- pop-up de cupo ---------- */
.scarcity-overlay{
  position:fixed;
  inset:0;
  background:rgba(7,17,47,.48);
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  z-index:999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  overflow-y:auto;
}
.scarcity-overlay[hidden]{display:none}
.scarcity-modal{
  width:min(520px,100%);
  max-height:calc(100dvh - 40px);
  overflow-y:auto;
  margin:auto;
  background:#fff;
  border-radius:24px;
  box-shadow:0 30px 90px rgba(5,18,52,.28);
  border:1px solid rgba(224,230,242,.95);
  padding:28px;
  position:relative;
  animation:scarcityIn .28s ease-out;
}
@keyframes scarcityIn{
  from{opacity:0; transform:translateY(14px) scale(.985);}
  to{opacity:1; transform:translateY(0) scale(1);}
}
.scarcity-close{position:absolute; top:14px; right:14px; width:40px; height:40px; border:0; border-radius:10px; background:#F3F6FB; color:#4B5872; font-size:1.3rem; line-height:1; cursor:pointer; display:grid; place-items:center;}
.scarcity-close:hover{background:#E7ECF5}
.scarcity-kicker{display:inline-flex; align-items:center; gap:8px; padding:7px 11px; border-radius:999px; background:#FFF4E8; color:#B65B00; font-size:.74rem; font-weight:850; letter-spacing:.05em; text-transform:uppercase; margin-bottom:14px;}
.scarcity-dot{width:8px; height:8px; border-radius:50%; background:#FF8A00; box-shadow:0 0 0 5px rgba(255,138,0,.12);}
.scarcity-modal h3{margin:0; padding-right:36px; color:var(--navy); font-size:clamp(1.55rem,4vw,2.25rem); line-height:1.05; letter-spacing:-.045em;}
.scarcity-modal p{margin:12px 0 0; color:var(--muted); font-size:.96rem;}
.scarcity-status{margin-top:18px; padding:14px 16px; border-radius:14px; background:#F7F9FE; border:1px solid #E4EAF7;}
.scarcity-status strong{display:block; color:var(--navy); font-size:.92rem; margin-bottom:7px;}
.scarcity-meta{display:flex; justify-content:space-between; gap:12px; margin-top:7px; font-size:.76rem; color:#7A8499;}
.scarcity-actions{display:flex; gap:10px; margin-top:20px;}
.scarcity-primary{flex:1; min-height:50px; border:0; border-radius:13px; background:linear-gradient(100deg,var(--blue),var(--violet)); color:#fff; font-weight:850; cursor:pointer; box-shadow:0 12px 24px rgba(70,88,230,.2);}
.scarcity-secondary{min-height:50px; padding:0 16px; border-radius:13px; border:1px solid #DEE5F1; background:white; color:#536078; font-weight:750; cursor:pointer;}

@media (max-width:640px){
  .scarcity-overlay{padding:14px}
  .scarcity-modal{padding:24px 18px; max-height:calc(100dvh - 28px)}
  .scarcity-close{top:10px; right:10px; width:44px; height:44px}
  .scarcity-actions{flex-direction:column;}
  .scarcity-secondary{width:100%;}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .scarcity-modal{animation:none}
  .topic,.primary-btn,.nav-cta,.sticky-mobile{transition:none}
}