/* Applicant pages (landing + form, /gracias, /privacidad). Playful, warm, wholesome.
   Original code; mood inspired by candid creator brands. Admin keeps styles.css (Whisper brand system).
   Mobile first; breakpoints at 720px and 1024px. */
:root{
  --charcoal:#2b282b;--blush:#f8ecec;--blush2:#fae1e1;--mint:#e7f2f2;--mint2:#bddfde;
  --lilac:#e4cdf9;--lilac2:#deb1fd;--violet:#9973fc;--pink:#fd88fd;--pink2:#f9b5f6;
  --peach:#f3b483;--yellow:#fbe7a1;--white:#fff;
  --text:#2b282b;--text-2:#4a434a;--text-3:#5b545a;--text-on-dark:#f8ecec;--text-on-dark-2:#e6d8dc;
  --error:#a3201a;--error-bg:#ffe4e1;
  --display:"Public Sans","Arial Black",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --r-card:18px;--r-input:14px;--r-tile:16px;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:76px}
body{margin:0;background:var(--blush);color:var(--text);font:400 15.5px/1.65 var(--mono);-webkit-font-smoothing:antialiased}
h1,h2,h3,p,figure,ul,ol,dl,dd{margin:0}
ul[role=list],ol[role=list]{list-style:none;padding:0}
img,video{max-width:100%;display:block}
[hidden]{display:none!important}
::selection{background:var(--pink2);color:var(--charcoal)}
a{color:inherit;text-decoration:underline;text-decoration-color:var(--violet);text-decoration-thickness:2px;text-underline-offset:3px}
a:hover{text-decoration-color:var(--pink)}
:focus-visible{outline:3px solid var(--violet);outline-offset:3px;border-radius:6px}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:16px;top:-80px;z-index:50;background:var(--white);padding:10px 16px;border:2px solid var(--charcoal);border-radius:999px;font-weight:600}
.skip:focus{top:10px}

.wrap{max-width:1160px;margin:0 auto;padding:0 16px;position:relative}
.narrow{max-width:760px}
@media (min-width:720px){.wrap{padding:0 40px}}

.bg-dark{background:var(--charcoal);color:var(--text-on-dark)}
.bg-blush{background:var(--blush)}
.bg-mint{background:var(--mint)}
.grid-dark{background-image:linear-gradient(rgba(248,236,236,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(248,236,236,.07) 1px,transparent 1px);background-size:32px 32px}
.wave{display:block;width:100%;height:40px;margin:-1px 0}
@media (min-width:720px){.wave{height:72px}}

/* ---------- wordmark + top bar ---------- */
.wordmark{font:900 23px/1 var(--display);letter-spacing:-0.01em;word-spacing:.12em;color:var(--pink);white-space:nowrap;
  text-shadow:-1.5px -1.5px 0 var(--charcoal),1.5px -1.5px 0 var(--charcoal),-1.5px 1.5px 0 var(--charcoal),1.5px 1.5px 0 var(--charcoal),0 -1.5px 0 var(--charcoal),0 1.5px 0 var(--charcoal),-1.5px 0 0 var(--charcoal),1.5px 0 0 var(--charcoal),3.5px 3.5px 0 var(--charcoal)}
.wordmark--sm{font-size:21px;text-shadow:-1.5px -1.5px 0 var(--charcoal),1.5px -1.5px 0 var(--charcoal),-1.5px 1.5px 0 var(--charcoal),1.5px 1.5px 0 var(--charcoal),3.5px 3.5px 0 var(--violet)}
.topbar{position:absolute;top:0;left:0;right:0;z-index:30;height:62px;background:transparent;border:0}
.topbar__inner{height:100%;display:flex;align-items:center;justify-content:space-between;gap:12px}
.topbar__logo,.footer__logo{text-decoration:none;display:inline-flex;padding:4px 2px}
@media (min-width:720px){.wordmark{font-size:27px}}

/* ---------- type ---------- */
.display{font:900 40px/1.02 var(--display);letter-spacing:-0.035em;color:#fff7f7;text-shadow:3px 3px 0 var(--violet);max-width:15ch;text-wrap:balance;margin-top:18px}
.h1{font:900 31px/1.08 var(--display);letter-spacing:-0.03em;margin:16px 0 26px;text-wrap:balance;max-width:20ch}
.h2{font:800 21px/1.25 var(--display);letter-spacing:-0.02em;margin:30px 0 10px}
.h3{font:800 19px/1.25 var(--display);letter-spacing:-0.02em;margin-bottom:8px}
.lead{font-size:16px;line-height:1.7;color:var(--text-2);max-width:58ch}
.bg-dark .lead{color:var(--text-on-dark-2)}
.lead--dark,.bg-dark .card .lead{color:var(--text-2)}
.lead--narrow{margin-bottom:6px}
@media (min-width:720px){.display{font-size:58px;text-shadow:4px 4px 0 var(--violet)}.h1{font-size:42px}}
@media (min-width:1024px){.display{font-size:66px}}

/* ---------- pills, tags ---------- */
.pill{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 22px;border-radius:999px;border:2px solid var(--charcoal);font:800 15.5px/1.1 var(--display);letter-spacing:-0.01em;text-decoration:none;color:var(--charcoal);cursor:pointer;transition:transform .14s var(--ease),box-shadow .14s var(--ease),background-color .14s var(--ease);text-align:center}
.pill--sm{min-height:38px;padding:0 16px;font-size:14px}
.pill--lg{min-height:54px;padding:0 26px;font-size:16.5px}
.pill--block{display:flex;width:100%}
.pill--primary{background:var(--peach)}
.pill--secondary{background:var(--white)}
.pill--primary:hover,.pill--secondary:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--charcoal)}
.pill--primary:active,.pill--secondary:active{transform:none;box-shadow:none}
.pill--ghost-light{background:transparent;color:var(--text-on-dark);border-color:var(--text-on-dark)}
.pill--ghost-light:hover{background:rgba(248,236,236,.1)}
.pill[disabled]{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}
.tag{display:inline-flex;align-items:center;width:fit-content;padding:5px 14px;border-radius:999px;border:2px solid var(--charcoal);background:var(--lilac2);color:var(--charcoal);font:500 13px/1.3 var(--mono);letter-spacing:.01em}
.tag--mint{background:var(--mint2)}.tag--pink{background:var(--pink2)}.tag--peach{background:var(--peach)}.tag--lilac{background:var(--lilac2)}.tag--white{background:var(--white)}.tag--yellow{background:var(--yellow)}

/* ---------- cards ---------- */
.card{position:relative;background:var(--white);border:2px solid var(--charcoal);border-radius:var(--r-card);padding:22px}
.card--lilac{background:var(--lilac)}
.card--white{background:var(--white);color:var(--text)}
.shadow-pink{box-shadow:6px 6px 0 0 var(--pink2),6px 6px 0 2px var(--charcoal)}
.shadow-mint{box-shadow:6px 6px 0 0 var(--mint2),6px 6px 0 2px var(--charcoal)}
.shadow-mint2{box-shadow:6px 6px 0 0 var(--mint2),6px 6px 0 2px var(--charcoal)}
.shadow-violet{box-shadow:6px 6px 0 0 var(--violet),6px 6px 0 2px var(--charcoal)}
.shadow-peach{box-shadow:6px 6px 0 0 var(--peach),6px 6px 0 2px var(--charcoal)}
.bg-dark .shadow-pink{box-shadow:7px 7px 0 0 var(--pink)}
.tile{display:inline-flex;align-items:center;justify-content:center;width:58px;height:58px;border:2px solid var(--charcoal);border-radius:var(--r-tile);flex:0 0 auto}
.tile .sticker{width:46px;height:46px}
.tile--lilac{background:var(--lilac)}.tile--mint{background:var(--mint)}.tile--pink{background:var(--blush2)}.tile--peach{background:#fbe3cf}.tile--yellow{background:#fdf3cf}

/* ---------- stickers + ribbon ---------- */
.sticker{display:block;overflow:visible}
.st{position:absolute;z-index:2;pointer-events:none;filter:drop-shadow(2px 3px 0 rgba(43,40,43,.22))}
.ribbon{position:absolute;left:0;width:100%;pointer-events:none;z-index:0}
.ribbon--hero{bottom:0;height:230px}
.ribbon--soft{top:40px;height:200px;opacity:.9}
@media (min-width:720px){.ribbon--hero{height:330px}.ribbon--soft{height:280px}}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;padding:84px 0 150px}
.hero__inner{position:relative;z-index:1;display:grid;gap:30px}
.hero__copy .lead{margin-top:20px}
.hero__actions{display:flex;flex-direction:column;gap:12px;margin-top:28px}
.facts{display:flex;flex-wrap:wrap;gap:10px}
.st--h1{width:46px;top:20px;right:16px;transform:rotate(12deg)}
.st--h2{display:none}
.st--h3{display:none}
.pay{display:flex;flex-direction:column;gap:12px;padding:26px 22px 22px;color:var(--text)}
.st--pay{width:62px;top:-26px;right:-12px;transform:rotate(14deg)}
.pay__figure{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-top:6px}
.pay__value{font:900 76px/.95 var(--display);letter-spacing:-0.045em;font-variant-numeric:tabular-nums}
.pay__unit{font:600 15px/1 var(--mono)}
.pay__note{font-size:13.5px;color:var(--text-2)}
.qualifier{display:flex;gap:10px;padding:12px 14px;background:rgba(255,255,255,.75);border:2px solid var(--charcoal);border-radius:12px;font-size:13.5px;line-height:1.55;color:var(--text)}
.qualifier>span:first-child{font-weight:600;flex:0 0 auto}
.hero__image{grid-column:1 / -1}
.frame{padding:8px;background:var(--mint2);border:2px solid var(--charcoal);border-radius:24px;box-shadow:0 0 0 6px var(--lilac2),0 0 0 8px var(--charcoal);margin:8px}
.frame img{width:100%;height:auto;border:2px solid var(--charcoal);border-radius:16px}
@media (min-width:720px){
  .hero{padding:110px 0 190px}
  .hero__actions{flex-direction:row;flex-wrap:wrap}
  .st--h2{display:block;width:58px;top:44px;left:47%;transform:rotate(-14deg)}
}
@media (min-width:1024px){
  .hero__inner{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);column-gap:72px;align-items:center}
  .facts{grid-column:1 / -1}
  .pay{transform:rotate(1.5deg);padding:34px 30px 28px}
  .pay__value{font-size:96px}
  .st--h1{width:58px;top:470px;right:auto;left:51%}
  .st--h3{display:block;width:86px;top:70px;right:4%;transform:rotate(10deg)}
}

/* ---------- sections ---------- */
.section{position:relative;padding:48px 0 60px}
@media (min-width:720px){.section{padding:72px 0 88px}}
.two-col{display:grid;gap:8px}
@media (min-width:1024px){.two-col{grid-template-columns:minmax(0,1fr) minmax(0,1.45fr);gap:64px;align-items:start}}

.steps,.cells{display:grid;gap:24px}
.steps__item p,.cells__item p{color:var(--text-2);font-size:15px}
.steps__top{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.steps__n{font:900 30px/1 var(--display);color:var(--violet);letter-spacing:-0.03em}
.cells__item .tile{margin-bottom:14px}
@media (min-width:720px){.steps,.cells{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}}
@media (min-width:1024px){.steps{grid-template-columns:repeat(4,minmax(0,1fr))}.cells{grid-template-columns:repeat(3,minmax(0,1fr))}}
.st--o1{width:56px;top:22px;right:16px;transform:rotate(-12deg)}
@media (min-width:1024px){.st--o1{width:90px;top:50px;right:6%}}

.rows{display:flex;flex-direction:column;padding:8px 22px}
.rows li{display:flex;gap:12px;padding:14px 0;border-bottom:2px dashed rgba(43,40,43,.18)}
.rows li:last-child{border-bottom:0}
.rows__icon{width:22px;height:22px;flex:0 0 auto;margin-top:2px}
.st--r1,.st--f1{position:relative;display:none;width:110px;margin:8px 0 0 12px;transform:rotate(-8deg)}
@media (min-width:1024px){.st--r1,.st--f1{display:block}}

.faq{display:flex;flex-direction:column;gap:14px}
.faq__item{padding:0;transition:box-shadow .14s var(--ease)}
.faq__item summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:17px 18px 17px 20px;font:800 16.5px/1.35 var(--display);letter-spacing:-0.01em;border-radius:var(--r-card)}
.faq__item summary::-webkit-details-marker{display:none}
.faq__toggle{position:relative;width:32px;height:32px;flex:0 0 auto;border:2px solid var(--charcoal);border-radius:50%;background:var(--mint2);transition:transform .2s var(--ease),background-color .2s var(--ease)}
.faq__toggle::before,.faq__toggle::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;margin:-1px 0 0 -6px;background:var(--charcoal);border-radius:2px}
.faq__toggle::after{transform:rotate(90deg)}
.faq__item[open]{box-shadow:5px 5px 0 0 var(--pink2),5px 5px 0 2px var(--charcoal)}
.faq__item[open] .faq__toggle{transform:rotate(45deg);background:var(--pink2)}
.faq__item p{padding:0 20px 20px;color:var(--text-2)}

/* ---------- form ---------- */
.section--form{overflow:hidden}
.form-wrap{max-width:780px}
.form-card{padding:28px 18px 26px;z-index:1}
.st--fc1{width:54px;top:-26px;right:-6px;transform:rotate(14deg)}
.st--fc2{width:44px;bottom:-20px;left:-10px;transform:rotate(-14deg)}
@media (min-width:720px){.form-card{padding:44px 44px 36px}.st--fc1{width:72px;top:-34px;right:-26px}.st--fc2{width:58px;left:-26px}}
.apply{margin-top:26px}
.group{border:0;margin:0;padding:24px 0 4px;border-top:2px dashed rgba(43,40,43,.2);min-width:0}
.group__legend{float:left;margin-bottom:18px;padding:5px 14px}
.group__legend+*{clear:both}
.group__hint{margin:-6px 0 14px}
.field{display:flex;flex-direction:column;gap:8px;margin-bottom:22px}
.field__label{font:800 15.5px/1.35 var(--display);letter-spacing:-0.01em;color:var(--text)}
.field__optional{font:500 12.5px var(--mono);color:var(--text-3);margin-left:4px;padding:1px 8px;border-radius:999px;background:var(--mint);border:1.5px solid var(--charcoal)}
.field__hint{font-size:13.5px;line-height:1.55;color:var(--text-3)}
.field__error{font-size:14px;font-weight:500;line-height:1.45;color:var(--error)}
.form-error{font-size:14.5px;line-height:1.5;color:var(--error);background:var(--error-bg);border:2px solid var(--error);border-radius:12px;padding:12px 14px}
.input{width:100%;height:52px;padding:0 14px;background:var(--white);color:var(--text);border:2px solid var(--charcoal);border-radius:var(--r-input);font:400 16px/1.3 var(--mono);transition:box-shadow .14s var(--ease);appearance:none;-webkit-appearance:none}
.input::placeholder{color:#6f666e}
.input:focus{outline:none;box-shadow:0 0 0 4px var(--lilac2)}
.input[aria-invalid=true]{border-color:var(--error);box-shadow:0 0 0 4px var(--pink2)}
select.input{background-image:linear-gradient(45deg,transparent 50%,var(--charcoal) 50%),linear-gradient(135deg,var(--charcoal) 50%,transparent 50%);background-position:calc(100% - 19px) 50%,calc(100% - 13px) 50%;background-size:6px 6px;background-repeat:no-repeat;padding-right:36px}
input[type=date].input{min-height:52px;line-height:48px}
.textarea{height:auto;min-height:120px;padding:12px 14px;line-height:1.55;resize:vertical}
.phone{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:10px}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}

.choice-row{display:flex;flex-wrap:wrap;gap:10px}
.chip,.scale__opt{position:relative;cursor:pointer}
.chip input,.scale__opt input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.chip span{display:inline-flex;align-items:center;min-height:46px;padding:0 18px;border:2px solid var(--charcoal);border-radius:999px;background:var(--white);font:500 15px/1.2 var(--mono);transition:background-color .14s var(--ease),box-shadow .14s var(--ease)}
.chip:hover span,.scale__opt:hover span{background:var(--blush2)}
.chip input:checked+span,.scale__opt input:checked+span{background:var(--pink2);font-weight:600;box-shadow:3px 3px 0 var(--charcoal)}
.chip input:focus-visible+span,.scale__opt input:focus-visible+span{outline:3px solid var(--violet);outline-offset:3px}
.scale{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.scale__opt span{display:flex;align-items:center;justify-content:center;height:52px;border:2px solid var(--charcoal);border-radius:var(--r-input);background:var(--white);font:900 19px/1 var(--display);transition:background-color .14s var(--ease),box-shadow .14s var(--ease)}
.scale__opt input:checked+span{background:var(--peach)}
.scale__ends{display:flex;justify-content:space-between;font-size:13px;color:var(--text-3)}

.check{display:flex;gap:12px;align-items:flex-start;cursor:pointer;font-size:15px;line-height:1.55}
.check input{width:22px;height:22px;margin:1px 0 0;flex:0 0 auto;accent-color:var(--violet);cursor:pointer}

.file{position:relative;display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.file__input{position:absolute;top:0;left:0;width:100%;height:48px;opacity:0;cursor:pointer;z-index:1}
.file__btn{pointer-events:none}
.file:hover .file__btn{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--charcoal)}
.file:focus-within .file__btn{outline:3px solid var(--violet);outline-offset:3px}
.file__list{display:flex;flex-direction:column;gap:2px;padding:0;list-style:none;font-size:13px;color:var(--text-2)}
.file__list:empty{display:none}

.submit{display:flex;flex-direction:column;gap:14px;padding-top:26px;border-top:2px dashed rgba(43,40,43,.2)}
.progress{display:flex;flex-direction:column;gap:8px}
.progress__bar{height:16px;background:var(--white);border:2px solid var(--charcoal);border-radius:999px;overflow:hidden}
.progress__bar span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--lilac2),var(--pink2),var(--peach),var(--yellow));transition:width .2s var(--ease)}
.mono-note{font-size:13px;line-height:1.55;color:var(--text-3)}
#progress-text{color:var(--text)}

/* ---------- thanks, prose, footer ---------- */
.hero--short{padding:92px 0 200px;min-height:70vh}
.hero__inner--single{display:block}
.thanks{display:flex;flex-direction:column;align-items:flex-start;gap:18px;padding:30px 22px}
.thanks .h1{margin:0}
.st--thanks{width:64px;top:-30px;right:-8px;transform:rotate(12deg)}
.spacer{height:24px}
.prose{padding:30px 20px}
.prose p{color:var(--text-2);margin-bottom:14px;max-width:66ch}
.prose .tag{margin:-8px 0 18px}
.prose .lead{margin-bottom:8px}
.prose > p:last-child{margin-top:32px;margin-bottom:0}
.st--prose{width:58px;top:-28px;right:-8px;transform:rotate(-10deg)}
@media (min-width:720px){.thanks{padding:44px 44px}.prose{padding:48px 48px}}

.footer{background:var(--charcoal);color:var(--text-on-dark);padding:20px 0 52px}
.footer__inner{display:flex;flex-direction:column;gap:14px}
.footer__line{font-size:13.5px;color:var(--text-on-dark-2)}
.footer__links{display:flex;gap:22px;font-size:14.5px}
.footer a{color:var(--text-on-dark);text-decoration-color:var(--pink)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important}
  .pill:hover,.file:hover .file__btn{transform:none}
}
.hero--short .st--h1{display:none}
.prose .tag{border-radius:14px}

/* --- second design pass --- */
.heading{display:flex;align-items:center;gap:14px;margin:0 0 26px}
.heading .h1{margin:0}
.heading__st{width:44px;height:44px;flex:0 0 auto;transform:rotate(-10deg)}
@media (min-width:720px){.heading__st{width:58px;height:58px}}
.narrow{max-width:820px}
.panel{position:relative;background:var(--lilac2);border:2px solid var(--charcoal);border-radius:28px;padding:30px 22px 26px;box-shadow:8px 8px 0 var(--violet)}
@media (min-width:720px){.panel{padding:52px 56px 48px}}
.panel .st--o1{position:absolute;width:64px;top:-26px;right:18px;transform:rotate(-12deg)}
@media (min-width:1024px){.panel .st--o1{width:96px;top:-40px;right:44px}}
.perks{display:grid;gap:22px 40px}
@media (min-width:720px){.perks{grid-template-columns:repeat(2,minmax(0,1fr))}}
.perks__item{display:flex;gap:14px;align-items:flex-start}
.perks__icon{width:40px;height:40px;flex:0 0 auto;margin-top:2px}
.perks__item .h3{margin:0 0 4px}
.perks__item p{color:var(--text);font-size:15px;max-width:42ch}
.reqs{display:flex;flex-wrap:wrap;gap:12px}
.reqs__item{display:inline-flex;align-items:center;padding:12px 20px;border-radius:24px;border:2px solid var(--charcoal);font:500 15px/1.35 var(--mono);color:var(--charcoal);box-shadow:3px 3px 0 var(--charcoal)}
.reqs__item.tag--pink{background:var(--pink2)}.reqs__item.tag--peach{background:var(--peach)}.reqs__item.tag--mint{background:var(--mint2)}.reqs__item.tag--lilac{background:var(--lilac)}
.group__legend{float:none;display:block;font:900 21px/1.2 var(--display);letter-spacing:-0.02em;padding:0;margin:0 0 16px;color:var(--charcoal)}
@media (max-width:719px){
  .steps{gap:16px}
  .steps__item{display:grid;grid-template-columns:56px minmax(0,1fr);column-gap:16px;padding:18px 18px 18px 16px}
  .steps__top{grid-row:1 / span 2;flex-direction:column;align-items:center;justify-content:flex-start;gap:6px;margin:0}
  .steps__n{font-size:20px}
  .steps__item .h3{margin:2px 0 4px}
}
