/* Dryrobe: a página é o robe. Casca por fora, zíper de duas vias no centro, forro por dentro. Sem degradê. */
@font-face{font-family:'Archivo';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/archivo-400.woff2) format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/archivo-500.woff2) format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/archivo-700.woff2) format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:800;font-display:swap;src:url(fonts/archivo-800.woff2) format('woff2')}

@property --a{syntax:'<percentage>';inherits:true;initial-value:38%}
@property --b{syntax:'<percentage>';inherits:true;initial-value:0%}

:root{
  --shell:#0f0f0f;--shell-2:#1a1a1e;--graphite:#414141;--red:#de1400;--studio:#ebebeb;--off:#f9f9f9;--white:#ffffff;
  --teeth:#747676;--rule:#b1b3b3;
  --sans:'Archivo',Arial,Helvetica,sans-serif;
  --gutter:clamp(20px,4vw,48px);--rail:72px;
  --ease-out:cubic-bezier(0.23,1,0.32,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--shell);color:var(--shell);font-family:var(--sans);font-size:17px;line-height:1.55;font-variant-numeric:tabular-nums}
img{display:block;max-width:100%;height:auto}
h1,h2,h3,p,ul,ol,dl,dd,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit}
::selection{background:var(--red);color:var(--white)}
:focus-visible{outline:3px solid var(--red);outline-offset:3px}
.sec[style*="de1400"] :focus-visible,.hero :focus-visible{outline-color:var(--white)}

/* casca do pacote: faixa, menu e rodapé */
.pular{position:absolute;left:12px;top:-64px;z-index:20;background:var(--white);color:var(--shell);padding:10px 16px}
.pular:focus{top:12px}
.rascunho{background:var(--studio);color:var(--shell);text-align:center;font-size:14px;line-height:1.4;padding:7px 16px}
.pacote{background:var(--white);color:var(--shell);display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px var(--gutter);border-bottom:1px solid var(--rule)}
.pacote-abas{display:flex;flex-wrap:wrap;gap:4px}
.pacote-abas a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 14px;color:var(--shell);text-decoration:none;font-size:15px;line-height:1.2;border-radius:999px;transition:background-color .16s ease}
.pacote-abas a[aria-current="page"]{background:var(--shell);color:var(--white)}
.pacote-abas .curto{display:none}
.chat{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 20px;background:var(--red);color:var(--white);font-size:15px;font-weight:700;text-decoration:none;border-radius:999px;white-space:nowrap}
.rodape{background:var(--white);color:var(--shell);text-align:center;padding:40px var(--gutter) 48px;font-size:15px;line-height:1.5;border-top:1px solid var(--rule)}
.rodape p{max-width:68ch;margin:0 auto 12px}
.rodape-chat{display:inline-flex;align-items:center;min-height:44px;padding:0 22px;background:var(--shell);color:var(--white);font-weight:700;font-size:15px;text-decoration:none;border-radius:999px}
.rodape-fontes{color:#373330;font-size:14px}
@media (hover:hover) and (pointer:fine){.pacote-abas a:not([aria-current="page"]):hover{background:var(--studio)}.chat:hover{background:var(--shell)}.rodape-chat:hover{background:var(--red)}}

/* o trilho do zíper atravessa a página inteira */
main{position:relative;display:block}
main::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:14px;margin-left:-7px;z-index:1;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='10'%3E%3Crect x='0' y='1' width='8' height='3' rx='1' fill='%23747676'/%3E%3Crect x='6' y='6' width='8' height='3' rx='1' fill='%23747676'/%3E%3C/svg%3E");background-repeat:repeat-y}

/* seções: dois panos em torno do trilho */
.sec{background:var(--bg);color:var(--fg);padding:clamp(48px,5.5vw,76px) 0;overflow-x:clip}
.rails{display:grid;grid-template-columns:minmax(0,1fr) var(--rail) minmax(0,1fr);row-gap:clamp(24px,3vw,36px);align-items:start;max-width:1240px;margin:0 auto;padding:0 var(--gutter)}
.l{grid-column:1}
.r{grid-column:3}
.x{grid-column:1/-1;position:relative;z-index:2;background:var(--bg)}
.l>*+*,.r>*+*,.head>*+*{margin-top:16px}
h2{font-size:clamp(30px,3.5vw,46px);line-height:1.04;font-weight:800;letter-spacing:-.03em;text-wrap:balance;max-width:17ch}
.head h2{max-width:26ch}
h3{font-size:19px;line-height:1.2;font-weight:700}
p{max-width:62ch;text-wrap:pretty}
.head{padding:0 0 4px}
.head p{font-size:19px;line-height:1.45}
.note{font-size:15px;line-height:1.5;color:var(--soft)}
.say{font-size:clamp(22px,2.2vw,28px);line-height:1.2;font-weight:700;letter-spacing:-.015em}

.pic img{width:100%;height:100%;object-fit:cover}
.pic.tall{aspect-ratio:4/5;max-height:440px}
.pic.land{aspect-ratio:16/9}
.pic.wide{aspect-ratio:16/4.4}
.pic.wide img{object-position:50% 32%}
.duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}
.duo .pic{aspect-ratio:4/5;margin:0}
.duo>*+*{margin-top:0}

.strip{display:grid;gap:4px;padding:0}
.strip-5{grid-template-columns:repeat(5,minmax(0,1fr))}
.strip-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.strip-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.strip>*+*{margin-top:0}
.strip figure{background:var(--studio);color:var(--shell)}
.strip img{width:100%;aspect-ratio:5/6;object-fit:cover}
.strip-3 img{aspect-ratio:3/5}
.strip.faces img{aspect-ratio:1/1;object-position:50% 12%}
.strip figcaption{font-size:14px;line-height:1.3;font-weight:500;padding:8px 10px 10px}

/* etiqueta de especificação: termo e definição com fio */
.tag>div{display:grid;grid-template-columns:minmax(0,7.5em) minmax(0,1fr);column-gap:16px;padding:12px 0;border-top:1px solid color-mix(in srgb,var(--fg) 28%,transparent)}
.tag>div:last-child{border-bottom:1px solid color-mix(in srgb,var(--fg) 28%,transparent)}
.tag dt{font-weight:700}
.tag dd{font-size:16px;line-height:1.5}
.tag+.pic{margin-top:20px}

.steps{counter-reset:s}
.steps li{counter-increment:s;display:grid;grid-template-columns:36px minmax(0,1fr);column-gap:12px;padding:12px 0;border-top:1px solid color-mix(in srgb,var(--fg) 40%,transparent);max-width:56ch}
.steps li::before{content:counter(s);font-weight:800;font-size:22px;line-height:1.2}
.plain li{padding:10px 0 10px 22px;border-top:1px solid color-mix(in srgb,var(--fg) 24%,transparent);position:relative;max-width:58ch}
.plain li::before{content:"";position:absolute;left:0;top:20px;width:10px;height:3px;background:var(--red)}
.plain.never li{font-weight:700}

.ledger{width:100%;border-collapse:collapse;font-size:16px;line-height:1.4}
.ledger th,.ledger td{text-align:left;vertical-align:top;padding:12px 16px 12px 0;border-top:1px solid color-mix(in srgb,var(--fg) 28%,transparent)}
.ledger thead th{border-top:0;font-size:14px;font-weight:500;color:var(--soft);padding-top:0}
.ledger tbody th{font-weight:700;width:11.5em}
.ledger .num{text-align:right;white-space:nowrap;padding-right:0;padding-left:16px;font-weight:700}
.ledger.compact tbody th{width:auto}
.ledger s{font-weight:400;color:var(--soft)}

/* 1. abertura: casca fechada, zíper de duas vias, forro por baixo */
.hero{position:relative;height:clamp(540px,calc(100vh - 140px),720px);background:var(--red);color:var(--white);overflow:hidden;--a:38%;--b:0%}
.com-js .hero{--a:0%;transition:--a .6s var(--ease-out),--b .2s var(--ease-out)}
.com-js .hero.aberto{--a:38%}
.com-js .hero.tocado{transition:--a .2s var(--ease-out),--b .2s var(--ease-out)}
.com-js .hero.arrastando{transition:none}
.lining{position:absolute;inset:0;display:flex;justify-content:center;background:var(--red)}
.lining img{width:min(100%,864px);height:100%;object-fit:cover;object-position:50% 12%}
.shell{position:absolute;top:0;bottom:0;width:50%;background:var(--shell);display:flex;align-items:center}
.shell-left{left:0;justify-content:flex-end;clip-path:polygon(0 0,calc(100% - var(--a)*1.1) 0,100% var(--a),100% calc(100% - var(--b)),calc(100% - var(--b)*1.1) 100%,0 100%)}
.shell-right{right:0;clip-path:polygon(calc(var(--a)*1.1) 0,100% 0,100% 100%,calc(var(--b)*1.1) 100%,0 calc(100% - var(--b)),0 var(--a))}
.shell-copy{width:min(100%,560px);padding:0 calc(var(--rail)/2 + 44px) 0 var(--gutter)}
.shell-right .shell-copy{padding:0 var(--gutter) 0 calc(var(--rail)/2 + 44px)}
.shell-copy>*+*{margin-top:20px}
.wordmark{width:150px;filter:invert(1)}
h1{font-size:clamp(40px,5.2vw,72px);line-height:.98;font-weight:800;letter-spacing:-.035em;text-wrap:balance}
.lead{font-size:20px;line-height:1.4}
.hero-actions{display:flex;flex-wrap:wrap;gap:10px}
.zip-hint{font-size:15px;color:#b1b3b3;max-width:34ch}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 24px;border-radius:999px;font-weight:700;font-size:16px;text-decoration:none;transition:background-color .16s ease,color .16s ease,transform .12s var(--ease-out)}
.btn:active{transform:scale(.97)}
.btn-red{background:var(--red);color:var(--white)}
.btn-dark{background:var(--shell);color:var(--white)}
.btn-line{box-shadow:inset 0 0 0 2px currentColor}
@media (hover:hover) and (pointer:fine){.btn-red:hover{background:var(--white);color:var(--shell)}.btn-dark:hover{background:var(--white);color:var(--shell)}.btn-line:hover{background:var(--white);color:var(--shell)}}
.zip{position:absolute;top:0;bottom:0;left:50%;width:0;z-index:3}
.zip-closed{position:absolute;left:-7px;width:14px;top:var(--a);bottom:var(--b);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='10'%3E%3Crect x='0' y='1' width='8' height='3' rx='1' fill='%23b1b3b3'/%3E%3Crect x='6' y='6' width='8' height='3' rx='1' fill='%23b1b3b3'/%3E%3C/svg%3E");background-repeat:repeat-y;background-color:var(--shell)}
.pull{position:absolute;left:-28px;width:56px;height:72px;padding:0;border:0;border-radius:14px;background:var(--white);color:var(--shell);cursor:grab;touch-action:none;display:grid;place-items:center;box-shadow:0 6px 18px rgba(0,0,0,.45)}
.pull:active{cursor:grabbing}
.pull-top{top:var(--a);margin-top:-36px}
.pull-bottom{bottom:var(--b);margin-bottom:10px}
.sem-js .pull{cursor:default}

/* seções com ajuste próprio */
.founder p{font-size:19px;line-height:1.5;max-width:54ch}
.founder p+p{margin-top:12px}
.founder footer{margin-top:14px;font-weight:700}
#car-park .pic.tall{max-height:330px;aspect-ratio:16/11}
#car-park .pic.tall img{object-position:50% 12%}
.zipsec .rails{row-gap:24px}
.robe{display:block;width:min(100%,300px);height:auto;margin-top:20px;color:var(--shell)}
.robe text{font:800 22px var(--sans);fill:var(--red)}
.wall blockquote{padding:14px 0;border-top:1px solid color-mix(in srgb,var(--fg) 45%,transparent)}
.wall blockquote+blockquote{margin-top:0}
.wall p{font-size:19px;line-height:1.35;font-weight:500}
.wall .big p{font-size:clamp(24px,2.4vw,32px);line-height:1.15;font-weight:800;letter-spacing:-.02em}
.wall footer{margin-top:8px;font-size:15px}
.roster>div{display:grid;grid-template-columns:minmax(0,10.5em) minmax(0,1fr);column-gap:14px;padding:9px 0;border-top:1px solid color-mix(in srgb,var(--fg) 28%,transparent)}
.roster dt{font-weight:700}
.roster dd{font-size:15px;line-height:1.4;color:var(--soft)}
.roster>*+*{margin-top:0}
.timeline{background:transparent;z-index:2}
.timeline li{display:grid;grid-template-columns:minmax(0,1fr) var(--rail) minmax(0,1fr);align-items:center;padding:9px 0}
.timeline .yr{grid-column:1;justify-self:end;font-size:clamp(30px,3.4vw,44px);line-height:1;font-weight:800;letter-spacing:-.03em}
.timeline p{grid-column:3;font-size:16px;line-height:1.45;max-width:52ch}
.timeline li:nth-child(even) .yr{grid-column:3;grid-row:1;justify-self:start}
.timeline li:nth-child(even) p{grid-column:1;grid-row:1;justify-self:end;text-align:right}
.timeline li::after{content:"";grid-column:2;grid-row:1;justify-self:center;width:22px;height:22px;border-radius:50%;background:var(--red);box-shadow:0 0 0 5px var(--bg)}
.rows>div{display:grid;grid-template-columns:minmax(0,1fr) var(--rail) minmax(0,1fr);padding:14px 0;border-top:1px solid color-mix(in srgb,var(--fg) 28%,transparent)}
.rows dt{grid-column:1;font-size:clamp(22px,2.2vw,28px);line-height:1.1;font-weight:800;letter-spacing:-.02em}
.rows dd{grid-column:3;font-size:16px;line-height:1.5;max-width:56ch}
.rows{background:transparent}
#partners .pic.land img{object-position:50% 22%}
#lighter-footprint .pic.land,#pockets .pic.land{aspect-ratio:16/8}
#three-years .pic.land{aspect-ratio:16/7}
#three-years .pic.land img{object-position:50% 40%}
#rework .duo{margin-top:16px}
#rework .duo .pic{aspect-ratio:16/10;background:var(--studio)}
#custom .strip img{aspect-ratio:3/4}
#golden-hour .strip img{aspect-ratio:3/2;object-position:50% 22%}
#team-dryrobe .faces img{aspect-ratio:2/1}
#team-dryrobe .roster>div{padding:7px 0}
#partners .head h2{max-width:36ch}
#partners .rows>div{padding:10px 0}
#partners .pic.land{aspect-ratio:16/6}
#wash-less .pic.land{aspect-ratio:16/6;margin-top:18px}
#change-space .pic.land{aspect-ratio:16/6}
#change-space .pic.land img{object-position:50% 30%}
#zip-down .pic.land{aspect-ratio:16/7}
#zip-down .pic.land img{object-position:50% 30%}
.faq details{border-top:1px solid color-mix(in srgb,var(--fg) 28%,transparent)}
.faq details+details{margin-top:0}
.faq details:last-child{border-bottom:1px solid color-mix(in srgb,var(--fg) 28%,transparent)}
.faq summary{cursor:pointer;list-style:none;padding:14px 34px 14px 0;font-weight:700;position:relative;min-height:48px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:6px;top:22px;width:12px;height:3px;background:currentColor}
.faq summary::before{content:"";position:absolute;right:10.5px;top:17.5px;width:3px;height:12px;background:currentColor;transition:transform .2s var(--ease-out)}
.faq details[open] summary::before{transform:scaleY(0)}
.faq details p{padding:0 0 16px;font-size:16px}
.closing h2{max-width:14ch;font-size:clamp(34px,4.2vw,56px)}

/* um pano só: o trilho vai para a borda */
@media (max-width:860px){
  body{font-size:16px}
  main::before{left:14px;margin-left:0;width:10px;background-size:10px 8px}
  .rails{grid-template-columns:minmax(0,1fr);padding:0 20px 0 38px;row-gap:22px}
  .l,.r,.x{grid-column:1}
  h2{max-width:none}
  .strip-5{grid-template-columns:repeat(2,minmax(0,1fr))}
  .strip-5 figure:last-child{grid-column:1/-1}
  .strip-5 figure:last-child img{aspect-ratio:16/10}
  .strip-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pic.wide{aspect-ratio:16/9}
  .ledger,.ledger tbody,.ledger tr,.ledger th,.ledger td{display:block}
  .ledger thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .ledger tr{padding:12px 0;border-top:1px solid color-mix(in srgb,var(--fg) 28%,transparent)}
  .ledger th,.ledger td{border:0;padding:2px 0}
  .ledger tbody th{width:auto;font-size:18px}
  .ledger .num{text-align:left}
  .ledger.compact tr{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr);column-gap:10px}
  .ledger.compact tbody th{font-size:16px}
  .ledger.compact thead{position:static;width:auto;height:auto;clip-path:none;display:block}
  .ledger.compact thead th{font-size:13px}
  .timeline li,.timeline li:nth-child(even){grid-template-columns:minmax(0,1fr);padding:10px 0;border-top:1px solid color-mix(in srgb,var(--fg) 28%,transparent)}
  .timeline .yr,.timeline li:nth-child(even) .yr{grid-column:1;grid-row:auto;justify-self:start}
  .timeline p,.timeline li:nth-child(even) p{grid-column:1;grid-row:auto;justify-self:start;text-align:left;margin-top:6px}
  .timeline li::after{display:none}
  .rows>div{grid-template-columns:minmax(0,1fr)}
  .rows dt,.rows dd{grid-column:1}
  .rows dd{margin-top:6px}
  .roster>div{grid-template-columns:minmax(0,1fr)}
  .tag>div{grid-template-columns:minmax(0,1fr)}
  .hero{height:auto;min-height:680px;display:grid;grid-template-columns:minmax(0,1fr);background:var(--shell)}
  .lining{position:relative;inset:auto;height:360px;grid-row:1}
  .shell{position:relative;width:auto;clip-path:none;display:block;padding:24px 20px 0 38px}
  .shell-right{padding-bottom:32px}
  .shell-copy,.shell-right .shell-copy{padding:0;width:auto}
  .zip{top:0;bottom:auto;height:360px;left:50%}
  .zip-closed{display:block}
  .lining::before,.lining::after{content:"";position:absolute;top:0;bottom:0;width:50%;background:var(--shell);z-index:1}
  .lining::before{left:0;clip-path:polygon(0 0,calc(100% - var(--a)*1.6) 0,100% var(--a),100% calc(100% - var(--b)),calc(100% - var(--b)*1.6) 100%,0 100%)}
  .lining::after{right:0;clip-path:polygon(calc(var(--a)*1.6) 0,100% 0,100% 100%,calc(var(--b)*1.6) 100%,0 calc(100% - var(--b)),0 var(--a))}
  .hero{--a:62%}
  .com-js .hero.aberto{--a:62%}
  h1{font-size:clamp(36px,10vw,48px)}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .com-js .hero,.com-js .hero.tocado{transition:none;--a:38%}
  .btn,.faq summary::before,.pacote-abas a{transition:none}
}
@media (prefers-reduced-motion:reduce) and (max-width:860px){.com-js .hero{--a:62%}}

.hero{z-index:2}


/* ajuste 5 */
dl.l>*+*,dl.r>*+*{margin-top:0}
#golden-hour .strip figure:nth-child(3) img{object-fit:contain;background:var(--studio)}
#zip-down .pic.land{aspect-ratio:16/9}
#zip-down .pic.land img{object-position:50% 14%}
@media (max-width:860px){
  .strip-5 figure:last-child img{object-fit:contain;background:var(--studio)}
}
/* ajuste 6: fio vermelho de 1 px no pe da abertura (fundo da secao aparecia sob a casca) */
.hero{background:var(--shell)}
@media (max-width:860px){.hero{background:var(--shell)}}
/* ajuste 7: o forro vermelho aparecia como fio de 1 px sob a casca, no pe da abertura */
@media (min-width:861px){.lining{bottom:2px}}
/* criterio pc1 */
@media (min-width:861px){
  #change-space .r,#custom .r,#zip-down .r{position:sticky;top:24px}
  .pic.wide{max-width:1082px;margin-inline:auto}
}