/* adren.ai: the rest of one industry page, after its hero (industries.css holds the hero and
   what the index shares). Linked in the body right after the hero, so the first paint never
   waits for it. Built pages: scripts/build_industries.py. */
/* ---- the owner's day. Without the script, or under reduced motion: a plain list after the full
   render. With it (.js-seq): a sticky stage, a camera over the render per step, a product card
   floating over it and a caption card with "01 / 05" and a thin progress bar. */
.seq{position:relative;background:var(--clay);padding:clamp(80px,10vw,140px) 0;box-shadow:inset 0 1px 0 var(--hairline)}
.seq__stage{display:flex;flex-direction:column}
.seq__top{order:-2;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 24px}
.seq__top .ip-eyebrow{margin-bottom:12px}
.seq__skip{display:inline-flex;align-items:center;gap:6px;min-height:44px;font:500 14px/1 var(--font-sans);color:var(--text-1);text-decoration:underline;text-decoration-color:rgb(35 42 47 / .3);text-underline-offset:4px}
.seq__skip:hover{text-decoration-color:currentColor}
.seq__view{order:-1;width:100%;max-width:1120px;margin:32px auto 0;overflow:hidden}
.seq__steps{list-style:none;width:100%;max-width:calc(var(--wrap) + 2 * var(--gutter));box-sizing:border-box;margin:24px auto 0;padding:0 var(--gutter)}
.seq__step{display:grid;gap:20px;padding:32px 0;box-shadow:inset 0 1px 0 var(--hairline-strong)}
.seq__n{display:flex;gap:14px;margin:0;font:600 12px/16px var(--font-sans);letter-spacing:.14em;color:var(--accent-ink);font-variant-numeric:tabular-nums}
.seq__h{color:var(--ink-soft)}
.seq__t{margin-top:10px;font:400 clamp(24px,1.1vw + 18px,32px)/1.15 var(--font-sans);letter-spacing:-.022em;color:var(--text-1)}
.seq__p{margin-top:10px;color:var(--ink-soft);max-width:46ch}
.seq__bar,.seq__marks{display:none}
.seq-end{scroll-margin-top:72px}
.js-seq .seq{padding:0}
.js-seq .seq__track{position:relative;height:420vh}
.js-seq .seq[data-n="5"] .seq__track{height:500vh}
.js-seq .seq__stage{position:sticky;top:0;display:block;height:100vh;height:100svh;overflow:hidden}
.js-seq .seq__top{position:absolute;z-index:3;top:84px;left:0;right:0;margin-inline:auto}
.js-seq .seq__title{font-size:clamp(24px,1.2vw + 16px,34px)}
.js-seq .seq__view{position:absolute;inset:0;z-index:1;display:grid;place-items:center;max-width:none;margin:0;padding:150px 0 230px}
.js-seq .seq__cam{width:100%;transition:transform 1.2s cubic-bezier(.65,0,.25,1)}
.js-seq .seq__steps{position:absolute;inset:0;z-index:2;max-width:none;margin:0;padding:0;pointer-events:none}
.js-seq .seq__step{position:absolute;inset:0;display:block;padding:0;box-shadow:none;opacity:0;transition:opacity .5s var(--ease)}
.js-seq .seq__step.is-on{opacity:1}
.js-seq .seq__cap{position:absolute;left:var(--gutter);right:var(--gutter);bottom:16px;padding:18px 20px 16px;border-radius:20px;background:#fff;
  box-shadow:0 1px 2px rgb(35 42 47 / .06),0 24px 60px -30px rgb(35 42 47 / .45);transform:translateY(14px);transition:transform .6s var(--ease)}
.js-seq .seq__t{margin-top:8px;font-size:22px}
.js-seq .seq__p{margin-top:6px;font-size:15px;line-height:1.5}
.js-seq .seq__card{position:absolute;right:var(--gutter);top:174px;width:min(300px,calc(100% - 2 * var(--gutter)));transform:translateY(22px) scale(.98);transition:transform .7s var(--ease) .08s}
.js-seq .seq__step.is-on .seq__cap,.js-seq .seq__step.is-on .seq__card{transform:none}
.js-seq .seq__bar{display:block;height:2px;margin-top:14px;border-radius:2px;background:var(--hairline-strong);overflow:hidden}
.seq__fill{display:block;height:100%;background:var(--accent);transform-origin:0 50%;transform:scaleX(0)}
.js-seq .seq__marks{position:absolute;top:50vh;bottom:50vh;left:0;width:1px;display:flex;flex-direction:column;pointer-events:none}
.seq__mark{flex:1}
/* the camera: five generic focal points over the render, one per step; each industry with an entry in
   data/site/industries/camaras.json gets its own stops in industries-themes.css, which win */
.seq__stage.cam-1 .seq__cam{transform:translate(18%,9%) scale(1.8)}
.seq__stage.cam-2 .seq__cam{transform:translate(-14%,30%) scale(1.8)}
.seq__stage.cam-3 .seq__cam{transform:scale(1.3)}
.seq__stage.cam-4 .seq__cam{transform:translate(9%,-34%) scale(1.8)}
.seq__stage.cam-5 .seq__cam{transform:translate(-32%,-11%) scale(1.8)}
.seq__stage.cam-1 .sc-cube[data-i="0"] .sc-hi,.seq__stage.cam-2 .sc-cube[data-i="1"] .sc-hi,
.seq__stage.cam-3 .sc-cube[data-i="3"] .sc-hi,.seq__stage.cam-4 .sc-cube[data-i="2"] .sc-hi{opacity:.22}

/* ---- product cards (mockups in HTML, from `escenas`) */
.mk{position:relative;z-index:1;box-sizing:border-box;width:100%;max-width:380px;padding:18px;border-radius:18px;background:#fff;
  box-shadow:0 1px 2px rgb(35 42 47 / .06),0 26px 56px -30px rgb(35 42 47 / .42);font:400 14px/1.45 var(--font-sans);color:var(--text-1);text-align:left}
.mk--sm{max-width:320px;padding:14px;font-size:13px}
.mk__label{display:flex;align-items:center;gap:8px;margin:0;font:600 11px/14px var(--font-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--accent-ink)}
.mk__dot{width:7px;height:7px;border-radius:50%;background:var(--accent)}
.mk__title{margin-top:10px;font-weight:600;font-size:16px;line-height:1.3}
.mk--sm .mk__title{font-size:14px}
.mk__text{margin-top:4px;color:var(--ink-soft)}
.mk__text:empty{display:none}
.mk__act{display:inline-flex;margin-top:12px;padding:6px 12px;border-radius:var(--r-pill);background:var(--tint);color:var(--accent-ink);font-weight:600;font-size:13px}
.mk__meta{margin-top:8px;font-size:12px;color:var(--ink-soft)}
.mk__btns{display:flex;gap:8px;margin-top:14px}
.mk__btn{flex:1;padding:9px 0;border-radius:10px;box-shadow:inset 0 0 0 1px var(--hairline-strong);font-weight:600;font-size:13px;text-align:center}
.mk__btn--yes{background:var(--accent);color:#fff;box-shadow:none}
.mk__bar{display:flex;align-items:center;gap:10px;margin:0}
.mk__av{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:50%;background:var(--tint);color:var(--accent)}
.mk__eye{width:18px;height:18px}
.mk__who{display:grid;font-weight:600;font-size:14px;line-height:1.25}
.mk__sub{font-weight:400;font-size:12px;color:var(--ink-soft)}
.mk--chat{max-width:300px;padding:7px;border-radius:30px;background:var(--granite)}
.mk--chat .mk__bar{padding:12px 14px;border-radius:24px 24px 0 0;background:#fff;box-shadow:inset 0 -1px 0 var(--hairline)}
.mk-chat{display:grid;gap:8px;padding:14px 12px 18px;border-radius:0 0 24px 24px;background:#F3F1EE}
.mk-chat__b{justify-self:start;max-width:84%;margin:0;padding:8px 12px;border-radius:14px 14px 14px 4px;background:#fff;box-shadow:0 1px 1px rgb(35 42 47 / .06)}
.mk-chat__b--me{justify-self:end;border-radius:14px 14px 4px 14px;background:var(--accent);color:#fff}
.mk-rows{display:grid;margin-top:8px}
.mk-row{display:flex;align-items:center;gap:10px;padding:10px 0;box-shadow:inset 0 -1px 0 var(--hairline)}
.mk-row:last-child{box-shadow:none;padding-bottom:0}
.mk-row__t{min-width:46px;font-weight:600;font-variant-numeric:tabular-nums}
.mk-row__x{flex:1;min-width:0}
.mk-row__s{flex:none;padding:3px 9px;border-radius:var(--r-pill);background:var(--tint);color:var(--accent-ink);font-size:12px;font-weight:600;white-space:nowrap}
.mk-row--ok .mk-row__s{background:var(--accent);color:#fff}

/* ---- ¿Te suena? and where the money leaks */
.bubbles{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.bubble{justify-self:start;max-width:min(520px,88%);padding:14px 18px;border-radius:20px 20px 20px 6px;background:#fff;
  box-shadow:inset 0 0 0 1px var(--hairline),0 14px 30px -24px rgb(35 42 47 / .5);font-size:17px;line-height:25px;color:var(--text-1)}
.bubble:nth-child(even){justify-self:end;border-radius:20px 20px 6px 20px;background:var(--accent);color:#fff;box-shadow:0 14px 30px -24px rgb(35 42 47 / .5)}
.js-rv .bubble.rv{transform:translateY(12px) scale(.96)}
.js-rv .bubble.rv.is-in{transform:none}
.ip-leaks{display:grid;box-shadow:inset 0 1px 0 var(--hairline-strong)}
.ip-leak{display:grid;grid-template-columns:44px 1fr;gap:18px;padding:26px 0;box-shadow:inset 0 -1px 0 var(--hairline-strong)}
.ip-leak p{margin-top:6px;color:var(--ink-soft)}
.ip-leak__ico{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--tint);color:var(--accent)}
.ip-leak__ico .ico{width:22px;height:22px}
.ip-leak__n{font:600 13px/24px var(--font-sans);letter-spacing:.1em;color:var(--accent-ink)}

/* ---- what Adren does: four pillars in a hairline row, then a row per item */
.ip-pillars{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:56px;box-shadow:inset 0 1px 0 var(--hairline-strong),inset 0 -1px 0 var(--hairline-strong)}
.ip-pillar a{display:flex;flex-direction:column;gap:16px;height:100%;box-sizing:border-box;padding:24px 16px 24px 0;color:var(--text-1)}
.ip-pillar:nth-child(even) a{padding-left:16px;box-shadow:inset 1px 0 0 var(--hairline-strong)}
.ip-pillar__ico{color:var(--accent)}
.ip-pillar__ico .ico{width:28px;height:28px;stroke-width:1.5}
.ip-pillar__t{font:400 18px/1.3 var(--font-sans);letter-spacing:-.012em;transition:color var(--t-fast) var(--ease)}
.ip-pillar a:hover .ip-pillar__t{color:var(--accent)}
.ip-rows{display:grid;gap:clamp(64px,9vw,128px);margin-top:clamp(64px,8vw,112px)}
.ip-row{display:grid;gap:28px;align-items:center;scroll-margin-top:96px}
.ip-row__t{font:400 clamp(26px,1.2vw + 20px,38px)/1.15 var(--font-sans);letter-spacing:-.022em}
.ip-panel{position:relative;display:grid;place-items:center;min-height:clamp(300px,32vw,460px);padding:clamp(28px,4vw,56px) clamp(16px,4vw,56px);border-radius:28px;background:var(--tint);overflow:hidden}
.ip-panel__g{position:absolute;right:-28px;bottom:-28px;width:200px;height:200px;color:var(--accent);opacity:.09}
.ip-panel__g .ico{width:100%;height:100%;stroke-width:1.1}
.copi{position:relative;z-index:1;display:grid;gap:14px;width:100%;max-width:420px}
.copi__q{justify-self:end;max-width:86%;margin:0;padding:12px 16px;border-radius:18px 18px 4px 18px;background:var(--granite);color:var(--snow);font-size:15px;line-height:1.45}
.copi__who{display:block;margin-bottom:2px;font:600 10px/14px var(--font-sans);letter-spacing:.12em;text-transform:uppercase;color:rgb(244 246 246 / .75)}
.copi__a{padding:16px 18px;border-radius:18px;background:#fff;box-shadow:0 1px 2px rgb(35 42 47 / .06),0 26px 56px -30px rgb(35 42 47 / .42);font-size:15px;line-height:1.5}
.copi__a p:last-child{margin-top:10px}

/* ---- our method: rows with large light numerals */
.ip-steps{margin-top:56px;box-shadow:inset 0 1px 0 var(--hairline-strong)}
.ip-step{display:grid;grid-template-columns:auto 1fr;gap:6px 24px;align-items:baseline;padding:28px 0;box-shadow:inset 0 -1px 0 var(--hairline-strong)}
.ip-step__n{grid-row:span 2}
.ip-step__n::before{content:attr(data-n);font:200 clamp(56px,6vw,112px)/.9 var(--font-sans);letter-spacing:-.022em;color:rgb(35 42 47 / .2);font-variant-numeric:tabular-nums}
.ip-step__t{display:flex;align-items:center;gap:12px;font:400 clamp(22px,.8vw + 18px,30px)/1.2 var(--font-sans);letter-spacing:-.02em;color:var(--text-1)}
.ip-step__t .ico{width:22px;height:22px;color:var(--accent)}
.ip-step .ip-p{margin:0}

/* ---- the tools already in use: a bento, light, dark and in the accent */
.bento{list-style:none;display:grid;gap:16px;margin-top:48px}
.bento__card{display:flex;flex-direction:column;justify-content:space-between;gap:36px;min-height:200px;padding:clamp(24px,3vw,40px);border-radius:24px}
.bento__card--light{background:#fff;box-shadow:inset 0 0 0 1px var(--hairline)}
.bento__card--dark{background:var(--granite);color:var(--snow)}
.bento__card--accent{background:var(--accent);color:#fff}
.bento__tools li{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--hairline-strong);font:350 clamp(22px,1.2vw + 16px,34px)/1.15 var(--font-sans);letter-spacing:-.022em}
.bento__tools li::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--accent)}
.bento__card--dark .bento__tools li,.bento__card--accent .bento__tools li{border-color:rgb(255 255 255 / .2)}
.bento__card--dark .bento__tools li::before,.bento__card--accent .bento__tools li::before{background:currentColor}
.bento__note{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--ink-soft)}
.bento__card--dark .bento__note{color:rgb(244 246 246 / .8)}
.bento__card--accent .bento__note{color:#fff}
.bento__eye{color:var(--accent)}

/* ---- made to measure, packages, what we measure, the form */
.ip-medida{display:grid;box-shadow:inset 0 1px 0 var(--hairline-strong)}
.ip-medida li{display:grid;grid-template-columns:44px 1fr;gap:12px;padding:20px 0;box-shadow:inset 0 -1px 0 var(--hairline-strong);color:var(--text-1)}
.ip-medida__n{padding-top:3px;font:600 12px/18px var(--font-sans);letter-spacing:.12em;color:var(--accent-ink)}
.tailor{margin:40px 0 0;display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center}
.tailor__card{display:grid;gap:8px;padding:18px;border-radius:var(--r-card);background:#fff;box-shadow:inset 0 0 0 1px var(--hairline)}
.tailor__card p{margin:0 0 4px;font-size:13px;color:var(--ink-soft)}
.tailor__card--tpl{background:transparent;box-shadow:inset 0 0 0 1px var(--hairline-strong)}
.tailor__bar{height:8px;border-radius:var(--r-pill);background:var(--mist);transform-origin:left}
.tailor__card--you .tailor__bar{background:var(--accent);transform:scaleX(.2);transition:transform .9s var(--ease)}
.tailor__card--you .tailor__bar:nth-child(2){--w:.9}
.tailor__card--you .tailor__bar:nth-child(3){--w:.55;background:var(--granite)}
.tailor__card--you .tailor__bar:nth-child(4){--w:.75}
.tailor__card--you .tailor__bar:nth-child(5){--w:.4;background:var(--granite)}
.tailor__card--you .tailor__bar:nth-child(6){--w:.65}
.tailor.is-in .tailor__card--you .tailor__bar{transform:scaleX(var(--w,1))}
.tailor.is-in .tailor__card--you .tailor__bar:nth-child(3){transition-delay:.12s}
.tailor.is-in .tailor__card--you .tailor__bar:nth-child(4){transition-delay:.24s}
.tailor.is-in .tailor__card--you .tailor__bar:nth-child(5){transition-delay:.36s}
.tailor.is-in .tailor__card--you .tailor__bar:nth-child(6){transition-delay:.48s}
.tailor__arrow{width:40px;height:20px;fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;animation:nudge 2.4s var(--ease) infinite}
@keyframes nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(6px)}}
.pk-grid{list-style:none;margin:48px 0 0;padding:0;display:grid;gap:16px;grid-template-columns:1fr}
.pk-card{display:flex;flex-direction:column;gap:10px;padding:32px 28px;border-radius:var(--r-card);background:#fff;box-shadow:inset 0 0 0 1px var(--hairline);transition:transform var(--t-fast) var(--ease)}
.pk-card:hover{transform:translateY(-3px)}
.pk-card p{margin:0;color:var(--ink-soft)}
.pk-card .ip-h3{font-size:24px;font-weight:450;letter-spacing:-.02em}
.pk-card__ico{width:36px;height:36px;color:var(--accent)}
.pk-card__size{font:600 12px/1 var(--font-sans);letter-spacing:.12em;text-transform:uppercase}
.pk-card__tags{display:flex;gap:8px;flex-wrap:wrap}
.pk-card__for{font-weight:500;color:var(--text-1)!important}
.pk-card--star{background:var(--accent);box-shadow:0 30px 60px -36px rgb(35 42 47 / .55)}
.pk-card--star .ip-h3,.pk-card--star .pk-card__for,.pk-card--star p,.pk-card--star .pk-card__ico{color:#fff!important}
.pk-card--star .chip{background:rgb(255 255 255 / .18);color:#fff}
.ip-kpi{font-size:clamp(24px,1.2vw + 18px,38px);line-height:1.25;max-width:30ch}
.kchart{margin:0;max-width:560px;width:100%}
.kchart svg{width:100%;height:auto;display:block}
.kchart__base{fill:none;stroke:var(--hairline-strong);stroke-width:1.5;stroke-dasharray:4 6}
.kchart__line{fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round;stroke-dasharray:400;stroke-dashoffset:0}
.kchart__dot{fill:var(--granite);transform-box:fill-box;transform-origin:center}
.kchart__labels{display:flex;justify-content:space-between;font-size:13px;color:var(--ink-soft)}
.js-rv .kchart .kchart__line{stroke-dashoffset:400;transition:stroke-dashoffset 1.6s var(--ease) .2s}
.js-rv .kchart.is-in .kchart__line{stroke-dashoffset:0}
.js-rv .kchart .kchart__dot{transform:scale(0);transition:transform .5s var(--ease)}
.js-rv .kchart.is-in .kchart__dot{transform:scale(1)}
.js-rv .kchart.is-in .kchart__dot--2{transition-delay:.9s}
.js-rv .kchart.is-in .kchart__dot--3{transition-delay:1.6s}
.ip .faq__q{font-weight:500}
.ip-start__kicker{margin-top:8px;font:350 clamp(26px,1.4vw + 18px,40px)/1.15 var(--font-sans);letter-spacing:-.022em;color:var(--text-1);max-width:16ch}
.ip-start .lead{padding:clamp(24px,3vw,40px);border-radius:24px;background:#fff;box-shadow:inset 0 0 0 1px var(--hairline)}
.ind-guion{display:grid;gap:8px;max-width:62ch;margin:20px 0 28px;font-size:18px;line-height:28px}
.ind-guion p{margin:0}
.ind-demo{padding:28px 24px;border-radius:var(--r-card);background:#fff;box-shadow:inset 0 0 0 1px var(--hairline)}
.ind-demo p{color:var(--ink-soft)}
.ind-demo__msg{margin:12px 0 20px;padding:16px;border-radius:var(--r-input);background:var(--tint);font-style:normal}

@media (min-width:640px){
  .bento{grid-template-columns:1.3fr 1fr}
  .bento__card--light{grid-row:span 2}
  .ip-pillar__t{font-size:20px}
}
@media (min-width:768px){
  .js-seq .seq__cap{left:var(--edge);right:auto;bottom:clamp(20px,5vh,48px);width:440px;padding:22px 24px 20px}
  .js-seq .seq__card{right:var(--edge);top:24%;width:340px}
  .js-seq .seq__view{padding:96px 0 40px}
}
@media (min-width:1024px){
  .ip-split{grid-template-columns:5fr 7fr;gap:88px;align-items:start}
  .ip-split>header{position:sticky;top:120px}
  .ip-suena .ip-split{align-items:center}
  .ip-pillars{grid-template-columns:repeat(4,minmax(0,1fr))}
  .ip-pillar a,.ip-pillar:nth-child(even) a{padding:28px 24px;box-shadow:none}
  .ip-pillar+.ip-pillar a{box-shadow:inset 1px 0 0 var(--hairline-strong)}
  .ip-pillar:first-child a{padding-left:0}
  .ip-row{grid-template-columns:5fr 7fr;gap:80px}
  .ip-row:nth-child(even) .ip-row__copy{order:2}
  .ip-step{grid-template-columns:200px minmax(0,320px) minmax(0,1fr);gap:24px;align-items:center}
  .ip-step__n{grid-row:auto}
  .pk-grid{grid-template-columns:repeat(3,1fr)}
  .js-seq .seq__top{top:96px}
}
@media (prefers-reduced-motion:reduce){
  .tailor__arrow{animation:none}
  .js-rv .rv{opacity:1;transform:none;transition:none}
}
/* the light bento card's picture: the Shadows' eye with three rings reading around it */
.bento__orbit{width:min(200px,60%);height:auto;margin:0 auto;overflow:visible}
.bento__orbit circle{fill:none;stroke:var(--accent);stroke-width:1;stroke-dasharray:2 6;opacity:.55;animation:flow 6s linear infinite}
.bento__orbit circle:nth-child(2){animation-direction:reverse;opacity:.4}
.bento__orbit circle:nth-child(3){opacity:.3}
.bento__iris path{fill:none;stroke:var(--accent);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
/* the stage's title stays legible over the render while the camera moves */
.js-seq .seq__stage::before{content:"";position:absolute;z-index:2;left:0;right:0;top:0;height:220px;pointer-events:none;
  background:linear-gradient(var(--clay) 40%,rgb(240 237 234 / 0))}
.ip .lead__h{font:400 clamp(28px,1.4vw + 20px,40px)/1.1 var(--font-sans);letter-spacing:-.022em}
@media (prefers-reduced-motion:reduce){.bento__orbit circle{animation:none}}
/* on a phone the render sits under the title and the product card floats above the caption */
@media (max-width:767px){
  .js-seq .seq__view{place-items:start center;padding:150px 0 0}
  .js-seq .seq__card{top:auto;bottom:214px;left:var(--gutter);right:var(--gutter);width:auto;display:flex;justify-content:center}
}
@media (min-width:1024px){
  .seq__step{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center}
  .seq__cap{order:-1}
}
