/* =========================================================
   ASTREA · Design System
   Canal Spiritual y Sanadora — clon fiel del PDF de Canva
   LIENZO ORIGINAL: 1366 x 4045 px (home). Todas las medidas
   salen medidas del PDF, no estimadas.
   Tipos reales: Impact (logo) · Bebas Neue Bold (menú) ·
   Anton (títulos) · Helvetica (cuerpo) · Brittany Signature
   (firma "What I'm good at") · DM Sans (email footer)
   ========================================================= */

/* fuentes extraídas del PDF de Canva (subset: solo los glifos usados) */
@font-face{
  font-family:'Brittany Signature';
  src:url('../fonts/BrittanySignatureRegular.woff2') format('woff2');
  font-weight:400;font-display:swap;
}
@font-face{
  font-family:'Impact LT';
  src:url('../fonts/ImpactLTStd.woff2') format('woff2');
  font-weight:400;font-display:swap;
}

:root{
  --black:#000;
  --black-2:#000;
  --magenta:#e50097;     /* EXACTO del PDF */
  --magenta-d:#c1007f;   /* hover/relleno fuerte */
  --pink:#ff4fb5;        /* rosa claro de acento */
  --pink-soft:#ff8fd0;
  --white:#ffffff;
  --grey:#d7d7d7;        /* texto secundario sobre negro */
  --ink:#000;            /* texto sobre blanco (el PDF usa negro puro) */
  --line:#e5e5e5;

  --maxw:1366px;                     /* ancho del lienzo de Canva */
  --measure:880px;                   /* SOLO para párrafos de texto suelto centrado */
  --pad:clamp(20px,6.8vw,93px);      /* margen lateral real del PDF */

  --f-logo:'Impact LT',Impact,'Anton',sans-serif;   /* logo A S T R E A */
  --f-nav:'Bebas Neue',sans-serif;                  /* menú y links del footer */
  --f-display:'Anton',sans-serif;                   /* títulos */
  --f-body:'Helvetica Neue',Helvetica,Arial,sans-serif;  /* cuerpo (HelveticaWorld en el PDF) */
  --f-alt:'DM Sans',sans-serif;                     /* email del footer */
  /* Brittany viene subseteada del PDF (solo los glifos de "What I'm good at"):
     Allura queda detrás como red por si otra página escribe otro texto en script */
  --f-script:'Brittany Signature','Allura',cursive;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--f-body);
  background:var(--white);
  color:var(--ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}

/* ---------- helpers ---------- */
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}
.measure{max-width:var(--measure);margin-inline:auto}
.section{padding-block:clamp(56px,7vw,96px)}
.bg-black{background:var(--black);color:var(--white)}
.bg-white{background:var(--white);color:var(--ink)}
.center{text-align:center}
.script{font-family:var(--f-script);color:var(--magenta);font-weight:400}

/* display headings — tamaños del PDF (máximo = medida real a 1366px) */
.display{
  font-family:var(--f-display);
  font-weight:400;
  line-height:1.05;
  letter-spacing:.01em;
  text-transform:uppercase;
}
.italic{font-style:italic}
h1.display{font-size:clamp(2rem,4.2vw,57px)}   /* hero: 43pt = 57px */
h2.display{font-size:clamp(1.8rem,3.5vw,48px)} /* intro / testimonios: 36pt = 48px */
h3.display{font-size:clamp(1.3rem,2.6vw,1.9rem)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.6em;
  font-family:var(--f-body);font-weight:700;text-transform:uppercase;
  font-size:clamp(.9rem,1.37vw,18.7px);letter-spacing:.04em;  /* 14pt = 18.7px */
  padding:.95em 2.4em;border-radius:999px;
  border:1.5px solid currentColor;background:transparent;
  cursor:pointer;transition:.25s ease;white-space:nowrap;
}
.btn .arrow{transition:transform .25s ease}
.btn:hover{background:var(--magenta);border-color:var(--magenta);color:#fff}
.btn:hover .arrow{transform:translateX(5px)}
.btn--solid{background:var(--magenta);border-color:var(--magenta);color:#fff}
.btn--solid:hover{background:#fff;border-color:#fff;color:var(--magenta)}
.btn--pink-out{color:var(--magenta)}
.btn--pink-out:hover{background:var(--magenta);color:#fff}

/* ===========================================================
   NAV
   =========================================================== */
.nav{
  position:absolute;top:0;left:0;right:0;z-index:40;
  max-width:var(--maxw);margin-inline:auto;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:1rem;padding:2.2rem var(--pad);
}
.nav.solid{position:sticky;background:var(--black);}
.nav__group{display:flex;gap:clamp(1rem,3.4vw,46px);align-items:center}
.nav__group--right{justify-content:flex-end}
.nav a.nav__link{
  font-family:var(--f-nav);font-weight:700;text-transform:uppercase;
  font-size:clamp(1rem,1.76vw,24px);   /* 18pt = 24px */
  letter-spacing:.06em;color:#fff;line-height:1;
  transition:color .2s;
}
.nav a.nav__link:hover,.nav a.nav__link.active{color:var(--magenta)}
.nav__logo{
  font-family:var(--f-logo);font-size:clamp(1.4rem,3.3vw,45px);  /* 34pt = 45px */
  letter-spacing:.35em;color:#fff;text-indent:.35em;line-height:1;
  justify-self:center;white-space:nowrap;
}
.nav__burger{display:none;background:none;border:0;cursor:pointer;flex-direction:column;gap:5px;z-index:60}
.nav__burger span{width:26px;height:2px;background:#fff;display:block}
/* panel móvil (oculto en desktop) */
.nav__mobile{
  position:fixed;inset:0 0 0 auto;width:min(80vw,330px);
  background:var(--black);flex-direction:column;justify-content:center;gap:1.6rem;
  padding:2rem;transform:translateX(110%);transition:transform .3s ease;z-index:50;display:none;
}
.nav__mobile.open{transform:none}
.nav__mobile a{font-family:var(--f-nav);font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#fff;font-size:1.5rem}
.nav__mobile a:hover{color:var(--magenta)}

@media(max-width:900px){
  .nav{grid-template-columns:1fr auto}
  .nav__group{display:none}
  .nav__burger{display:flex;justify-self:end}
  .nav__mobile{display:flex}
  .nav__logo{justify-self:start}
}

/* ===========================================================
   HERO — banda negra de 608px en el PDF
   =========================================================== */
.hero{
  position:relative;min-height:clamp(460px,44.5vw,608px);
  display:flex;align-items:center;justify-content:center;
  text-align:center;color:#fff;padding:8rem var(--pad) 4rem;
  background:#000 center/cover no-repeat;
}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.45),rgba(0,0,0,.25) 40%,rgba(0,0,0,.55));}
.hero__inner{position:relative;z-index:2;max-width:1000px}
.hero h1{margin-bottom:2rem;line-height:1.16;text-shadow:0 2px 30px rgba(0,0,0,.5)}
/* "ACTIVA TU POTENCIAL": Helvetica Bold 14pt = 18.7px, MAGENTA */
.hero .eyebrow{
  font-family:var(--f-body);font-weight:700;color:var(--magenta);
  letter-spacing:.06em;font-size:clamp(.9rem,1.37vw,18.7px);margin-bottom:1.2rem;
}
.dots{display:flex;gap:.9rem;justify-content:center;margin-top:1.4rem}
.dots span{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.45)}
.dots span.on{background:#fff}

/* ===========================================================
   INTRO band (blanca, 322px)
   =========================================================== */
.intro{text-align:center;max-width:800px;margin:0 auto}
.intro h2{margin-bottom:1.4rem}
/* cuerpo: Helvetica 20pt = 26.7px, negro */
.intro p{font-size:clamp(1.05rem,1.95vw,26.7px);line-height:1.45;color:var(--ink)}

/* ===========================================================
   SOY ASTREA — banda NEGRA con foto (NO magenta)
   =========================================================== */
.about-split{
  position:relative;color:#fff;overflow:hidden;
  background:#000 center/cover no-repeat;
}
.about-split::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.55),rgba(0,0,0,.25));}
.about-split__grid{
  position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,401px) 1fr;
  gap:clamp(2rem,8vw,113px);align-items:center;
}
.about-split__photo{border-radius:6px;box-shadow:0 30px 60px rgba(0,0,0,.35);width:100%;aspect-ratio:401/535;object-fit:cover}
/* "SOY ASTREA," Anton 52pt = 69px */
.about-split h2{font-size:clamp(2.2rem,5vw,69px);margin-bottom:.9rem}
/* "CANAL SPIRITUAL Y SANADORA" Anton 35pt = 47px */
.about-split .sub{font-family:var(--f-display);text-transform:uppercase;font-size:clamp(1.6rem,3.4vw,47px);line-height:1;margin-bottom:1.8rem}
/* cuerpo Helvetica 16pt = 21px */
.about-split p{color:#fff;font-size:clamp(1rem,1.56vw,21px);line-height:1.46;margin-bottom:1.4rem;max-width:52ch}
@media(max-width:760px){.about-split__grid{grid-template-columns:1fr}}

/* ===========================================================
   FORMAS DE TRABAJAR (blanca, 936px)
   =========================================================== */
.work__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,535px);gap:clamp(2rem,3vw,40px);align-items:center}
.work__head{position:relative;margin-bottom:3rem;padding-right:clamp(0px,18vw,240px)}
/* "FORMAS DE TRABAJAR CONMIGO:" Anton italic 40pt = 53px */
.work__head h2{font-size:clamp(1.8rem,3.9vw,53px)}
/* "What I'm good at" Brittany 41.6pt = 55px, magenta */
.work__head .script{font-size:clamp(2rem,4vw,55px);line-height:1;position:absolute;right:0;bottom:-.55em}
.work__item{border-top:1.5px solid #111;padding:1.6rem 0}
.work__item:last-child{border-bottom:1.5px solid #111}
/* MENTORÍA / SESIONES 1:1 / BIBLIOTECA: Anton italic 35pt = 47px */
.work__item h3{font-size:clamp(1.4rem,3.4vw,47px);margin-bottom:.5rem}
/* descripción Helvetica 15pt = 20px */
.work__item p{color:var(--ink);font-size:clamp(.95rem,1.46vw,20px);line-height:1.4}
/* la imagen del PDF es VERTICAL: 535 x 949 px */
.work__img{width:100%;aspect-ratio:535/949;object-fit:cover;border-radius:4px}
@media(max-width:760px){.work__grid{grid-template-columns:1fr}.work__head{padding-right:0}.work__head .script{position:static;display:block;margin-top:.6rem}}

/* ===========================================================
   TESTIMONIOS (carrusel) — banda negra 560px
   =========================================================== */
.testi{position:relative;max-width:800px;margin:0 auto;text-align:center;min-height:200px}
.testi__slide{display:none;animation:fade .6s ease}
.testi__slide.on{display:block}
/* Helvetica 14pt = 18.7px */
.testi__slide p{font-size:clamp(.95rem,1.37vw,18.7px);line-height:1.4;color:#fff;margin-bottom:1.2rem}
.testi__slide .who{color:#fff;font-weight:400}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ===========================================================
   CTA banner (imagen a sangre, 508px)
   =========================================================== */
.cta-banner{
  position:relative;min-height:clamp(400px,37vw,508px);
  display:flex;align-items:center;justify-content:center;
  text-align:center;color:#fff;padding:5rem var(--pad);
  background:#000 center/cover no-repeat;
}
.cta-banner::after{content:"";position:absolute;inset:0;background:rgba(20,0,15,.25)}
.cta-banner__inner{position:relative;z-index:2}
/* Anton 43pt = 57px, 2 líneas */
.cta-banner h2{font-size:clamp(1.9rem,4.2vw,57px);line-height:1.1;margin-bottom:2.2rem;max-width:16ch;margin-inline:auto}
/* el botón del PDF es BLANCO con la letra MAGENTA */
.cta-banner .btn--solid{background:#fff;border-color:#fff;color:var(--magenta)}
.cta-banner .btn--solid:hover{background:var(--magenta);border-color:var(--magenta);color:#fff}

/* ===========================================================
   FOOTER — en el PDF es BLANCO con todo el texto en MAGENTA
   =========================================================== */
.footer{background:#fff;color:var(--magenta);padding:clamp(40px,4.6vw,63px) 0}
.footer__grid{display:flex;justify-content:space-between;flex-wrap:wrap;gap:2.5rem;max-width:var(--maxw);margin:0 auto;padding-inline:clamp(20px,2.5vw,34px)}
/* logo Impact 34pt = 45px */
.footer__logo{font-family:var(--f-logo);color:var(--magenta);font-size:clamp(1.5rem,3.3vw,45px);letter-spacing:.35em;line-height:1;margin-bottom:1.4rem}
/* links Bebas Neue Bold 18pt = 24px */
.footer__links a{display:block;font-family:var(--f-nav);font-weight:700;text-transform:uppercase;font-size:clamp(1rem,1.76vw,24px);letter-spacing:.06em;line-height:1.55;color:var(--magenta)}
.footer__links a:hover{color:#000}
.footer__right{text-align:right}
/* "CONECTA CONMIGO" Anton 29pt = 38.7px */
.footer__right h4{font-family:var(--f-display);color:var(--magenta);text-transform:uppercase;letter-spacing:.02em;font-size:clamp(1.4rem,2.8vw,38.7px);line-height:1;margin-bottom:1.6rem;font-weight:400}
.footer__social{display:flex;gap:.9rem;justify-content:flex-end;margin-bottom:1.4rem}
.footer__social a{width:44px;height:44px;border:1.5px solid var(--magenta);border-radius:50%;display:grid;place-items:center;color:var(--magenta);transition:.2s}
.footer__social a:hover{background:var(--magenta);color:#fff}
/* email DM Sans 16pt = 21px */
.footer__right .mail{font-family:var(--f-alt);color:var(--magenta);font-size:clamp(1rem,1.56vw,21px)}
@media(max-width:600px){.footer__right{text-align:left}.footer__social{justify-content:flex-start}}

/* ===========================================================
   ACORDEÓN (FAQ)
   =========================================================== */
.acc{max-width:860px;margin:0 auto}
.acc__item{border-bottom:1px solid #cfcfcf}
.acc__head{
  width:100%;background:none;border:0;cursor:pointer;text-align:left;
  display:flex;justify-content:space-between;gap:1rem;align-items:center;
  padding:1.2rem .2rem;font-family:var(--f-display);text-transform:uppercase;
  letter-spacing:.04em;font-size:.98rem;color:#111;
}
.acc__head .pm{color:var(--magenta);font-size:1.4rem;transition:transform .25s}
.acc__item.open .pm{transform:rotate(45deg)}
.acc__body{max-height:0;overflow:hidden;transition:max-height .35s ease}
.acc__body p{padding:0 .2rem 1.2rem;color:#555}

/* ===========================================================
   TARJETAS DE SERVICIO / PRODUCTO
   =========================================================== */
.cards{display:grid;gap:1.6rem}
.cards--2{grid-template-columns:repeat(2,1fr)}
.cards--3{grid-template-columns:repeat(3,1fr)}
.scard{
  border:1px solid #111;border-radius:10px;overflow:hidden;display:flex;flex-direction:column;
  background:#fff;transition:.3s ease;
}
.scard__media{aspect-ratio:1/.86;background:#f1d6e6 center/cover no-repeat;position:relative}
.scard__body{padding:1.4rem;display:flex;flex-direction:column;gap:.7rem;flex:1}
.scard__kicker{font-family:var(--f-display);text-transform:uppercase;letter-spacing:.04em;font-size:.82rem}
.scard__title{font-family:var(--f-display);text-transform:uppercase;font-size:1.5rem;line-height:1;color:#fff;
  position:absolute;left:1.2rem;bottom:1rem;text-shadow:0 2px 12px rgba(0,0,0,.3)}
.scard p{color:#555;font-size:.96rem}
.scard__foot{margin-top:auto;padding-top:1rem}
.scard:hover{background:var(--magenta);color:#fff;border-color:var(--magenta)}
.scard:hover p,.scard:hover .scard__kicker{color:#fff}
.scard:hover .scard__media{filter:saturate(1.2)}
@media(max-width:860px){.cards--3{grid-template-columns:1fr}.cards--2{grid-template-columns:1fr}}

/* ===========================================================
   FORM
   =========================================================== */
.field{display:flex;flex-direction:column;gap:.4rem;margin-bottom:1rem}
.field label{font-size:.85rem;color:#777}
.input,textarea.input{
  width:100%;padding:.95rem 1.1rem;border:1.5px solid var(--magenta);border-radius:8px;
  font-family:var(--f-body);font-size:1rem;color:#111;background:#fff;
}
.input::placeholder{color:var(--magenta);opacity:.8}
.input:focus{outline:none;border-color:var(--magenta-d);box-shadow:0 0 0 3px rgba(230,0,126,.12)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media(max-width:600px){.form-row{grid-template-columns:1fr}}

/* utilidades varias */
.lead{font-size:1.12rem;color:#444}
.price-tag{font-family:var(--f-display);font-size:1.7rem;color:#111}
.divider{height:1px;background:var(--line);margin:0 auto}

/* ---------- cabecera de detalle de servicio/producto ---------- */
.svc-hero{display:grid;grid-template-columns:minmax(0,480px) 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.svc-hero__media{position:relative;border-radius:6px;overflow:hidden;aspect-ratio:1/1.4;background:#eee center/cover no-repeat}
.svc-hero__media .label{position:absolute;left:1.2rem;top:1.1rem;font-family:var(--f-display);text-transform:uppercase;color:#fff;font-size:1.5rem;line-height:1;text-shadow:0 2px 10px rgba(0,0,0,.35)}
.svc-hero h1,.svc-hero h2{margin-bottom:.2rem}
.svc-hero .kicker{font-family:var(--f-display);text-transform:uppercase;letter-spacing:.04em;margin-bottom:1.2rem}
.svc-hero p{color:#555;margin-bottom:.9rem}
.svc-actions{display:flex;gap:1rem;flex-wrap:wrap;margin-top:1.4rem;align-items:center}
@media(max-width:760px){.svc-hero{grid-template-columns:1fr}}

/* ---------- checklist ---------- */
.checklist{display:grid;gap:.7rem;margin-top:1rem}
.checklist li{position:relative;padding-left:1.6rem;color:#444}
.checklist li::before{content:"";position:absolute;left:0;top:.55em;width:8px;height:8px;border-radius:50%;background:var(--magenta)}
.bg-black .checklist li{color:var(--grey)}

/* ---------- precios por región ---------- */
.regions{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;align-items:start}
.reg{border:1.5px solid var(--magenta);border-radius:12px;padding:1.6rem 1.4rem;text-align:center}
.reg__price{font-family:var(--f-display);font-size:2rem;color:var(--magenta)}
.reg__sub{font-size:.85rem;color:#888;margin-bottom:1rem}
.reg__list{display:grid;gap:.35rem;color:#555;font-size:.95rem}
@media(max-width:760px){.regions{grid-template-columns:1fr}}

/* ---------- bloque legal / texto largo ---------- */
.legal{max-width:var(--measure);margin:0 auto;color:#555;font-size:.96rem}
.legal p{margin-bottom:.8rem}

/* ===== POPUP DE REGIÓN (bienvenida) ===== */
.geo-pop{position:fixed;inset:0;z-index:200;display:none;place-items:center;background:rgba(5,2,8,.72);backdrop-filter:blur(5px);padding:1.2rem}
.geo-pop.on{display:grid}
.geo-card{background:#140b12;border:1px solid rgba(255,79,181,.3);border-radius:20px;max-width:540px;width:100%;padding:2.4rem 2rem;text-align:center;color:#fff;animation:fade .4s ease}
.geo-card .nav__logo{justify-content:center;display:block;font-size:1.5rem;margin-bottom:.6rem}
.geo-card h3{font-family:'Bebas Neue',var(--f-display);text-transform:uppercase;font-size:1.7rem;letter-spacing:.1em;line-height:1.25;font-weight:400;margin-bottom:.6rem}
.geo-card p{color:#c9b3c2;margin-bottom:1.6rem;font-size:.95rem}
.geo-opts{display:grid;gap:.7rem;text-align:left}
.geo-opt{display:flex;justify-content:space-between;align-items:center;gap:1rem;border:1.5px solid rgba(255,255,255,.16);border-radius:12px;padding:.95rem 1.2rem;cursor:pointer;color:#fff;transition:.2s}
.geo-opt:hover{border-color:var(--magenta);background:rgba(255,79,181,.12)}
.geo-opt b{font-weight:700}
.geo-opt small{color:#b196aa;display:block;font-size:.8rem;margin-top:.1rem}
.geo-opt .ar{color:var(--pink)}
.geo-sel{margin-top:1.3rem;text-align:left}
.geo-sel label{font-size:.78rem;color:#9a8693;display:block;margin-bottom:.4rem}
.geo-sel select{width:100%;padding:.8rem 1rem;border-radius:10px;border:1.5px solid rgba(255,255,255,.2);background:#1d121a;color:#fff;font-family:var(--f-body);font-size:.95rem}

/* ===== WIDGET FLOTANTE (región + idioma) ===== */
.fab{position:fixed;right:18px;bottom:18px;z-index:120;display:flex;gap:.6rem;align-items:center;background:#140b12;border:1px solid rgba(255,79,181,.32);border-radius:99px;padding:.5rem .85rem;box-shadow:0 12px 30px rgba(0,0,0,.45)}
.fab__region{background:none;border:0;color:#fff;cursor:pointer;font-size:.82rem;display:flex;align-items:center;gap:.35rem;font-family:var(--f-body);white-space:nowrap}
.fab__region:hover{color:var(--pink)}
.fab__sep{width:1px;height:18px;background:rgba(255,255,255,.22)}
.fab__lang{display:flex;gap:.15rem}
.fab__lang button{background:none;border:0;color:#8a6c80;cursor:pointer;font-family:var(--f-display);font-size:.82rem;letter-spacing:.04em;padding:.15rem .45rem;border-radius:7px}
.fab__lang button.on{color:#fff;background:var(--magenta)}
@media(max-width:560px){.fab__region span.tag{display:none}}

/* ---------- precio destacado / inversión ---------- */
.invest{text-align:center;color:#fff}
.invest .big{font-family:var(--f-display);font-size:clamp(2.4rem,6vw,4rem);color:#fff;line-height:1}
.invest .small{color:var(--pink);font-size:1.1rem;margin:.4rem 0 1.6rem}

/* ---------- WIZARD (encuesta multipaso) ---------- */
.wizard{max-width:760px;margin:0 auto}
.wz-bar{height:6px;border-radius:99px;background:#f0d6e6;margin-bottom:2.2rem;overflow:hidden}
.wz-bar span{display:block;height:100%;background:var(--magenta);width:12%;transition:width .35s ease}
.wz-step{display:none;animation:fade .4s ease}
.wz-step.on{display:block}
.wz-step h3{font-family:var(--f-display);text-transform:uppercase;font-size:1.4rem;margin-bottom:1.2rem}
.wz-q{font-weight:600;margin:1.4rem 0 .7rem}
.wz-opt{display:flex;align-items:center;gap:.8rem;border:1.5px solid #e0c4d6;border-radius:10px;padding:.9rem 1.1rem;margin-bottom:.7rem;cursor:pointer;transition:.2s}
.wz-opt:hover{border-color:var(--magenta)}
.wz-opt input{accent-color:var(--magenta);width:18px;height:18px}
.wz-opt.sel{border-color:var(--magenta);background:#fff0f8}
.wz-note{background:#fff0f8;border-left:3px solid var(--magenta);padding:1rem 1.2rem;border-radius:6px;color:#7a2057;margin-top:1rem;font-size:.95rem;display:none}
.wz-note.on{display:block}
.wz-nav{display:flex;justify-content:space-between;gap:1rem;margin-top:2rem}
.wz-done{display:none;text-align:center}
.wz-done.on{display:block}