/* ==========================================================
   TEMPLATE "CHISPA" — UGC creator portfolio + link in bio
   To restyle: change the colours and font in :root below.
   ========================================================== */
@font-face{font-family:"Bricolage";src:url("/assets/fonts/demos/bricolage-grotesque-latin-wght-normal.woff2") format("woff2");font-weight:200 800;font-display:swap}

:root{
  --bg:#FFD9EC;      /* page background (pink) */
  --blue:#2540FF;    /* main colour */
  --lime:#D6F54A;    /* accent */
  --ink:#151515;     /* body text */
  --white:#FFFFFF;
  --peach:#FFB48A;
  --sky:#A9C4FF;
  --radius:30px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Bricolage",system-ui,sans-serif;font-size:18px;line-height:1.5;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,p{margin:0}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:8px}
.wrap{width:min(1180px,100% - 40px);margin-inline:auto}

/* demo bar (delete this block + .demobar css in the final client site) */
.demobar{background:var(--ink);color:#fff;font-size:.78rem;text-align:center;padding:9px 14px;line-height:1.35}
.demobar a{color:var(--lime);text-underline-offset:3px}
.demobar .dim{opacity:.7}

/* language switch */
.langsw{border:2.5px solid var(--ink);border-radius:99px;background:var(--white);padding:2px;font-weight:700;font-size:.78rem;margin-left:auto}
.top nav{margin-left:auto}.top nav+.langsw{margin-left:0}
.langsw button{padding:.45em .8em;border-radius:99px;opacity:1;color:var(--ink)}
html[lang="en"] .langsw [data-set="en"],html[lang="es"] .langsw [data-set="es"]{background:var(--lime);text-decoration:none}
.langsw button{opacity:.55}html[lang="en"] .langsw [data-set="en"],html[lang="es"] .langsw [data-set="es"]{opacity:1}

/* buttons + chips */
.btn{display:inline-flex;align-items:center;gap:.5em;font:700 1rem/1 "Bricolage",sans-serif;text-decoration:none;padding:1.05em 1.6em;border-radius:99px;border:2.5px solid var(--ink);background:var(--white);color:var(--ink);transition:transform .25s cubic-bezier(.3,1.6,.5,1),box-shadow .25s;box-shadow:0 0 0 var(--ink)}
.btn:hover{transform:translate(-3px,-3px);box-shadow:5px 5px 0 var(--ink)}
.btn--lime{background:var(--lime)}
.btn--blue{background:var(--blue);color:#fff}
.btn--pink{background:var(--bg)}
.chip{display:inline-block;font-weight:700;font-size:.82rem;letter-spacing:.02em;padding:.55em 1em;border-radius:99px;border:2px solid var(--ink);background:var(--white);color:var(--ink)}
.chip--lime{background:var(--lime)}
.chip--blue{background:var(--blue);color:#fff;border-color:var(--blue)}

/* header */
.top{position:sticky;top:0;z-index:20;background:rgba(255,217,236,.92);backdrop-filter:blur(10px);border-bottom:2.5px solid var(--ink)}
.top__in{display:flex;align-items:center;gap:18px;padding-block:14px}
.logo{font-weight:800;font-size:1.5rem;letter-spacing:-.03em;text-decoration:none;color:var(--blue)}
.logo i{font-style:normal;background:var(--blue);color:var(--bg);padding:.05em .38em;border-radius:99px;margin-left:.15em}
.top nav{margin-left:auto;display:flex;gap:26px;font-weight:600}
.top nav a{text-decoration:none}.top nav a:hover{color:var(--blue);text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:5px}
.top .btn{padding:.8em 1.3em;font-size:.92rem}
@media (max-width:760px){.top nav{display:none}.langsw{margin-left:auto}}

/* hero */
.hero{position:relative;padding-block:clamp(40px,7vw,90px) clamp(56px,8vw,110px);overflow:hidden}
.hero__in{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center}
.hero h1{font-size:clamp(3rem,8.4vw,7.2rem);line-height:.92;letter-spacing:-.045em;font-weight:800;color:var(--blue);margin-block:22px}
.hl{background:var(--lime);color:var(--ink);padding:0 .12em;border-radius:.14em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.lead{font-size:clamp(1.05rem,1.6vw,1.3rem);max-width:30em}
.cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.hero__art{position:relative;height:clamp(360px,44vw,540px)}
.phone{position:absolute;width:44%;aspect-ratio:9/16;border:3px solid var(--ink);border-radius:26px;display:grid;place-items:center;box-shadow:8px 9px 0 var(--ink);overflow:hidden;transition:transform .4s cubic-bezier(.3,1.5,.5,1)}
.phone::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.55),transparent 45%)}
.phone .play{position:relative;width:34%;aspect-ratio:1;border-radius:50%;background:var(--white);border:3px solid var(--ink);display:grid;place-items:center}
.play svg{width:42%;margin-left:8%}
.phone--1{left:0;top:8%;background:var(--blue);transform:rotate(-8deg)}
.phone--2{left:29%;top:0;background:var(--lime);transform:rotate(3deg);z-index:2}
.phone--3{right:0;top:22%;background:var(--peach);transform:rotate(9deg)}
.phone:hover{transform:rotate(0) scale(1.04);z-index:5}
.spin{position:absolute;left:-2%;bottom:-2%;width:clamp(110px,15vw,170px);z-index:6;animation:spin 16s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (max-width:860px){.hero__in{grid-template-columns:1fr}.hero__art{height:clamp(320px,84vw,470px);max-width:520px;width:100%;margin-inline:auto}}

/* marquee */
.marquee{background:var(--lime);border-block:2.5px solid var(--ink);overflow:hidden;white-space:nowrap}
.marquee__t{display:inline-flex;gap:2.2rem;padding-block:16px;font-weight:800;font-size:clamp(1.2rem,2.6vw,1.9rem);letter-spacing:-.02em;animation:mq 26s linear infinite}
.marquee__t span::after{content:"✦";margin-left:2.2rem;color:var(--blue)}
@keyframes mq{to{transform:translateX(-50%)}}

/* sections */
section{padding-block:clamp(60px,9vw,120px)}
.eyebrow{margin-bottom:14px}
h2{font-size:clamp(2.4rem,6vw,5rem);line-height:.95;letter-spacing:-.04em;font-weight:800;color:var(--blue)}
.sec-head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:20px;margin-bottom:clamp(30px,4vw,54px)}
.sec-head p{max-width:24em}

/* work */
.reels{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.reel{position:relative;border:3px solid var(--ink);border-radius:var(--radius);aspect-ratio:4/5;background:var(--c,var(--sky));padding:20px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;box-shadow:7px 8px 0 var(--ink);transition:transform .3s cubic-bezier(.3,1.5,.5,1)}
.reel:nth-child(even){transform:rotate(.8deg)}.reel:nth-child(odd){transform:rotate(-.8deg)}
.reel:hover{transform:rotate(0) translateY(-6px)}
.reel__meta{display:flex;flex-wrap:wrap;gap:8px}
.reel .play{align-self:center;width:72px;height:72px;border-radius:50%;background:var(--white);border:3px solid var(--ink);display:grid;place-items:center}
.reel .play svg{width:30px;margin-left:5px}
.reel h3{font-size:1.45rem;line-height:1.05;letter-spacing:-.03em;font-weight:800}
.reel small{display:block;font-weight:600;opacity:.75;margin-top:4px}
@media (max-width:900px){.reels{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.reels{grid-template-columns:1fr}.reel{aspect-ratio:auto;min-height:320px}}
.note{margin-top:26px;font-size:.9rem;opacity:.75}

/* numbers */
.numbers{background:var(--blue);color:#fff;border-block:3px solid var(--ink)}
.numbers__g{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.numbers b{display:block;font-size:clamp(2.6rem,6vw,5rem);line-height:1;letter-spacing:-.05em;color:var(--lime)}
.numbers span{font-weight:600}
@media (max-width:760px){.numbers__g{grid-template-columns:repeat(2,1fr)}}

/* rates */
.rates{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch}
.rate{border:3px solid var(--ink);border-radius:var(--radius);background:var(--white);padding:30px 26px;display:flex;flex-direction:column;gap:14px;box-shadow:7px 8px 0 var(--ink)}
.rate--hot{background:var(--lime);transform:translateY(-10px)}
.rate h3{font-size:1.5rem;font-weight:800;letter-spacing:-.03em}
.rate .price{font-size:3.2rem;line-height:1;letter-spacing:-.05em;font-weight:800;color:var(--blue)}
.rate .price small{font-size:1rem;letter-spacing:0;color:var(--ink);font-weight:600}
.rate ul{list-style:none;margin:6px 0 10px;padding:0;display:grid;gap:8px}
.rate li{padding-left:1.6em;position:relative}
.rate li::before{content:"✦";position:absolute;left:0;color:var(--blue)}
.rate .btn{margin-top:auto;justify-content:center}
@media (max-width:900px){.rates{grid-template-columns:1fr}.rate--hot{transform:none}}

/* about */
.about{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(30px,6vw,90px);align-items:center}
.blob{position:relative;aspect-ratio:1;background:var(--sky);border:3px solid var(--ink);border-radius:46% 54% 42% 58% / 52% 44% 56% 48%;box-shadow:10px 11px 0 var(--ink);display:grid;place-items:center;font-size:clamp(5rem,14vw,10rem);font-weight:800;letter-spacing:-.06em;color:var(--blue)}
.blob i{position:absolute;right:6%;top:6%;font-style:normal;font-size:1rem;transform:rotate(10deg)}
.about p+p{margin-top:16px}
.about .chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
@media (max-width:820px){.about{grid-template-columns:1fr}.blob{max-width:340px}}

/* brands */
.brands{border-block:2.5px solid var(--ink);background:var(--white)}
.brands__g{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px 34px;align-items:center}
.brands b{font-size:clamp(1.2rem,2.4vw,1.8rem);letter-spacing:-.03em;font-weight:800;opacity:.85}
.brands p{width:100%;font-weight:600;margin-bottom:6px}

/* contact */
.contact__box{background:var(--blue);color:#fff;border:3px solid var(--ink);border-radius:calc(var(--radius) + 10px);padding:clamp(34px,6vw,84px);box-shadow:10px 12px 0 var(--ink);text-align:center;display:grid;gap:26px;justify-items:center}
.contact h2{color:#fff;max-width:12em}
.contact p{max-width:34em}
.foot{padding-block:34px 44px;font-weight:600;display:flex;flex-wrap:wrap;gap:14px 30px;justify-content:space-between;align-items:center}
.foot nav{display:flex;gap:20px}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}

/* ---------- link in bio ---------- */
.lk{width:min(520px,100% - 32px);margin-inline:auto;padding-block:38px 56px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px}
.lk__av{width:132px;height:132px;border-radius:46% 54% 42% 58% / 52% 44% 56% 48%;background:var(--sky);border:3px solid var(--ink);box-shadow:6px 7px 0 var(--ink);display:grid;place-items:center;font-size:3.6rem;font-weight:800;letter-spacing:-.06em;color:var(--blue);transform:rotate(-4deg)}
.lk h1{font-size:clamp(2.4rem,9vw,3.4rem);line-height:.95;letter-spacing:-.045em;font-weight:800;color:var(--blue);margin-top:8px}
.lk__bio{font-weight:600;max-width:26em}
.lk__soc{display:flex;gap:12px;margin-block:6px 10px}
.lk__soc a{width:46px;height:46px;border-radius:50%;border:2.5px solid var(--ink);background:var(--white);display:grid;place-items:center;transition:transform .25s cubic-bezier(.3,1.6,.5,1)}
.lk__soc a:hover{transform:translateY(-4px) rotate(-6deg);background:var(--lime)}
.lk__soc svg{width:20px;height:20px}
.lk__list{width:100%;display:grid;gap:14px}
.lk__btn{display:flex;align-items:center;justify-content:space-between;gap:14px;text-decoration:none;text-align:left;font-weight:800;font-size:1.15rem;letter-spacing:-.02em;padding:18px 22px;border-radius:99px;border:3px solid var(--ink);background:var(--white);box-shadow:5px 6px 0 var(--ink);transition:transform .25s cubic-bezier(.3,1.6,.5,1),box-shadow .25s}
.lk__btn:hover{transform:translate(-3px,-3px);box-shadow:8px 9px 0 var(--ink)}
.lk__btn small{display:block;font-weight:500;font-size:.85rem;letter-spacing:0;opacity:.75}
.lk__btn--lime{background:var(--lime)}.lk__btn--blue{background:var(--blue);color:#fff}.lk__btn--sky{background:var(--sky)}
.lk__btn svg{width:22px;height:22px;flex:none}
.lk__foot{margin-top:18px;font-size:.85rem;font-weight:600;opacity:.8}

.lk__lang{align-self:flex-end;margin-bottom:6px}