/* Nelcy Brito. Conceito: arquitetura da luz e do tecido. A página é medida por um trilho; o desenho técnico substitui ornamento. */
@font-face{font-family:"Bodoni Moda";src:url(../fonts/bodoni-moda-latin-opsz-normal.woff2) format("woff2");font-weight:400 900;font-display:swap}
@font-face{font-family:Jost;src:url(../fonts/jost-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Jost;src:url(../fonts/jost-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Bodoni Fallback";src:local("Georgia");size-adjust:92%;ascent-override:96%;descent-override:26%}
@font-face{font-family:"Jost Fallback";src:local("Arial");size-adjust:95%;ascent-override:102%;descent-override:30%}
:root{--marfim:#f6f3ef;--linho:#ece3d8;--areia:#d7c5b0;--taupe:#998675;--taupe-escuro:#7a6959;--cafe:#4a372f;--grafite:#252321;--linha:#d9ccbd;--apoio:#675849;--on-cafe:#f6f3ef;--on-cafe-2:#e4d9cc;--erro:#9b2c23;
--display:"Bodoni Moda","Bodoni Fallback",Georgia,serif;--sans:Jost,"Jost Fallback",Arial,sans-serif;--m:clamp(20px,4vw,56px);--bloco:clamp(84px,11vw,168px);color-scheme:light}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:96px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--marfim);color:var(--grafite);font:400 18px/1.55 var(--sans);-webkit-font-smoothing:antialiased;overflow-wrap:break-word}
h1,h2,h3,.regua b,.oficio b,.partes b,.rod .ass,.hist p:first-child,.perg summary{font-optical-sizing:none;font-variation-settings:"opsz" 30}
h1,h2,h3{font-family:var(--display);font-weight:400;margin:0;text-wrap:balance}
h1{font-size:clamp(50px,8.6vw,136px);line-height:.98;letter-spacing:-.018em}
h2{font-size:clamp(38px,5.4vw,84px);line-height:1.02;letter-spacing:-.012em}
h3{font-size:clamp(25px,2.4vw,34px);line-height:1.14}
p{margin:0}
img,svg{display:block;max-width:100%}
img{height:auto;background:var(--linho)}
a{color:inherit;text-underline-offset:.18em;text-decoration-thickness:1px}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid var(--cafe);outline-offset:3px}
.pular{position:absolute;left:12px;top:-60px;background:var(--cafe);color:var(--on-cafe);padding:10px 14px;z-index:30}
.pular:focus{top:8px}
.lede{font-size:clamp(20px,1.75vw,24px);line-height:1.42;max-width:31em}
.apoio{color:var(--apoio)}
.nota{font-size:15px;line-height:1.4;letter-spacing:.01em;color:var(--apoio)}
.rotulo{font-size:15px;font-weight:500;color:var(--apoio);letter-spacing:.02em}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:14px 28px;font:500 17px/1.1 var(--sans);text-decoration:none;text-align:center;border:1px solid var(--cafe);background:var(--cafe);color:var(--on-cafe);cursor:pointer;border-radius:0;transition:background .2s,color .2s}
.btn:hover{background:#5f4a40;border-color:#5f4a40}
.btn.sec{background:transparent;color:var(--cafe)}
.btn.sec:hover{background:var(--cafe);color:var(--on-cafe)}
.btns{display:flex;flex-wrap:wrap;gap:12px}
.link{font-weight:500;text-decoration:underline;text-underline-offset:.25em}

/* Trilho: a marca de medida que abre cada página */
header.topo{position:sticky;top:0;z-index:20;background:var(--marfim)}
.topo .in{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:15px var(--m) 13px}
.trilho{height:7px;margin-inline:var(--m);border-top:1px solid var(--cafe);background:url(regua.svg) repeat-x 0 0/48px 7px}
.marca{display:block;flex:none}
.marca img{width:auto;height:44px;background:none}
nav.princ ul{display:flex;align-items:center;gap:clamp(18px,2.4vw,36px);margin:0;padding:0;list-style:none}
nav.princ a{font-size:16px;text-decoration:none;padding-block:12px;display:block}
nav.princ a:not(.btn):hover,nav.princ a[aria-current]{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.35em}
nav.princ a.btn{min-height:44px;padding:10px 18px;color:var(--on-cafe)}
.menu{display:none}
.menu summary{cursor:pointer;list-style:none;font-size:16px;font-weight:500;padding:12px 2px}
.menu summary::-webkit-details-marker{display:none}
@media(max-width:940px){
 nav.princ{display:none}
 .menu{display:block}
 .menu nav{position:absolute;left:0;right:0;top:100%;background:var(--marfim);border-top:1px solid var(--linha);border-bottom:1px solid var(--cafe);padding:8px var(--m) 20px}
 .menu ul{margin:0;padding:0;list-style:none}
 .menu li a{display:block;padding:13px 0;font:400 28px/1.15 var(--display);text-decoration:none}
 .marca img{height:36px}
}

/* Abertura */
.abre{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(14px,2vw,28px);padding:clamp(26px,3.6vw,52px) var(--m) 0}
.abre h1{grid-column:1/-1;margin-bottom:clamp(24px,3vw,44px)}
.abre .tx{grid-column:1/5;display:grid;gap:26px;align-content:start;padding-bottom:40px}
.abre figure{grid-column:6/-1;margin:0 calc(var(--m)*-1) 0 0}
.abre figure img{width:100%;aspect-ratio:7/5;object-fit:cover}
.abre figcaption{padding:10px var(--m) 0 0}
@media(max-width:860px){.abre .tx{grid-column:1/-1}.abre figure{grid-column:1/-1;margin-inline:calc(var(--m)*-1) calc(var(--m)*-1)}.abre figure img{aspect-ratio:5/4}.abre figcaption{padding-inline:var(--m)}}

/* Régua de provas */
.regua{list-style:none;margin:clamp(70px,9vw,132px) var(--m) 0;padding:0;display:grid;grid-template-columns:.8fr 1fr 1.2fr;border-top:1px solid var(--cafe)}
.regua li{padding:18px clamp(14px,2vw,28px) 0 0;display:grid;gap:4px;align-content:start;min-width:0}
.regua li+li{border-left:1px solid var(--linha);padding-left:clamp(14px,2vw,28px)}
.regua b{font:400 clamp(44px,5.4vw,92px)/1 var(--display);letter-spacing:-.015em;color:var(--cafe)}
@media(max-width:640px){.regua{grid-template-columns:minmax(0,1fr)}.regua li{padding:16px 0 18px}.regua li+li{border-left:0;border-top:1px solid var(--linha);padding-left:0}}

.bloco{padding:var(--bloco) var(--m) 0}
.cab{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(14px,2vw,28px);row-gap:22px;margin-bottom:clamp(44px,6vw,84px)}
.cab .n{grid-column:1/3;padding-top:.6em}
.cab h2{grid-column:3/-1}
.cab .lede{grid-column:3/10}
@media(max-width:760px){.cab .n,.cab h2,.cab .lede{grid-column:1/-1}.cab .n{padding-top:0}}

/* Anatomia */
.anat{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,5vw,84px);align-items:start}
.anat svg{width:100%;height:auto;color:var(--cafe)}
.partes{list-style:none;margin:0;padding:0;counter-reset:p}
.partes li{counter-increment:p;display:grid;grid-template-columns:38px minmax(0,1fr);padding:18px 0;border-top:1px solid var(--linha)}
.partes li::before{content:counter(p);font:400 24px/1.2 var(--display);color:var(--taupe-escuro)}
.partes b{font:400 25px/1.2 var(--display);display:block;margin-bottom:3px}
.pregas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,3vw,44px);margin-top:clamp(56px,7vw,100px);border-top:1px solid var(--cafe);padding-top:22px}
.pregas svg{width:100%;height:auto;color:var(--cafe);margin-bottom:14px}
.pregas p{color:var(--apoio)}
@media(max-width:860px){.anat{grid-template-columns:minmax(0,1fr)}}
@media(max-width:560px){.pregas{grid-template-columns:minmax(0,1fr)}}

/* Luz nos tecidos */
.luz{background:var(--linho);margin-top:var(--bloco);padding:var(--bloco) var(--m)}
.luz .cab{margin-bottom:clamp(40px,5vw,72px)}
.tecidos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,48px)}
.tecidos article{display:grid;gap:12px;align-content:start;min-width:0}
.tecidos svg{width:100%;height:auto;background:var(--marfim);color:var(--cafe)}
.tecidos h3{font-size:clamp(34px,3.6vw,52px)}
.tecidos dl{margin:6px 0 0;border-top:1px solid #cdbcaa}
.tecidos dl>div{display:grid;grid-template-columns:96px minmax(0,1fr);gap:10px;padding:9px 0;border-bottom:1px solid #cdbcaa;font-size:17px;line-height:1.35}
.tecidos dt{color:var(--apoio)}.tecidos dd{margin:0}
.luz .nota{margin-top:30px}
@media(max-width:760px){.tecidos{grid-template-columns:minmax(0,1fr);gap:52px}}

/* Lavagem */
.lav{position:relative;overflow:hidden;background:var(--cafe);color:var(--on-cafe);padding:var(--bloco) var(--m)}
.lav .fundo{background:none;position:absolute;right:-5vw;top:-3vw;width:min(62vw,860px);height:auto;opacity:.16;pointer-events:none}
.lav .in{position:relative;display:grid;gap:clamp(30px,4vw,52px)}
.lav .rotulo{color:var(--on-cafe-2)}
.lav h2{font-size:clamp(48px,9.4vw,158px);line-height:.96;letter-spacing:-.02em;max-width:9.5em}
.lav .pe{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(14px,2vw,28px)}
.lav .pe>div{grid-column:6/12;display:grid;gap:26px;justify-items:start}
.lav .lede{color:var(--on-cafe-2)}
.lav .btn{background:var(--on-cafe);border-color:var(--on-cafe);color:var(--cafe)}
.lav .btn:hover{background:var(--linho);border-color:var(--linho)}
.lav .link{color:var(--on-cafe)}
.lav .btns{align-items:center;gap:22px}
@media(max-width:760px){.lav .pe>div{grid-column:1/-1}}

/* Feito à mão */
.mao{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(14px,2vw,28px);align-items:end}
.mao figure{grid-column:1/6;margin:0 0 0 calc(var(--m)*-1)}
.mao figure img{width:100%;aspect-ratio:4/5;object-fit:cover}
.mao figcaption{padding:10px 0 0 var(--m)}
.mao .tx{grid-column:7/-1;display:grid;gap:30px;padding-bottom:40px}
.oficio{list-style:none;margin:0;padding:0}
.oficio li{border-top:1px solid var(--linha);padding:16px 0 18px}
.oficio b{font:400 clamp(34px,4.2vw,64px)/1.05 var(--display);display:block}
@media(max-width:860px){.mao figure{grid-column:1/-1;margin-inline:calc(var(--m)*-1)}.mao figcaption{padding-inline:var(--m)}.mao .tx{grid-column:1/-1;padding-top:44px;padding-bottom:0}}

/* Faixa e caderno */
.faixa{margin:var(--bloco) 0 0}
.faixa img{width:100%;aspect-ratio:21/9;object-fit:cover}
.faixa figcaption{padding:10px var(--m) 0}
@media(max-width:700px){.faixa img{aspect-ratio:4/3}}
.duas{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(14px,2vw,28px);row-gap:28px}
.duas .a{grid-column:1/8;display:grid;gap:16px;align-content:start}.duas .b{grid-column:8/-1;padding-top:.6em;display:grid;gap:20px;justify-items:start}
.hist{display:grid;gap:22px;grid-column:3/10}
.cab .hist .lede{grid-column:auto}
.hist p:first-child{font:400 clamp(30px,3.7vw,54px)/1.14 var(--display);letter-spacing:-.008em}
@media(max-width:760px){.duas .a,.duas .b,.hist{grid-column:1/-1}}

/* Orçamento */
.orc{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:clamp(30px,5vw,80px);align-items:start}
.campos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.f{display:grid;gap:6px;min-width:0}.f.full{grid-column:1/-1}
.f label{font-size:16px;color:var(--apoio)}
.f input,.f select{font:400 18px/1.3 var(--sans);min-height:52px;padding:12px;border:1px solid var(--taupe-escuro);background:#fff;color:var(--grafite);border-radius:0;width:100%;min-width:0}
.f small{font-size:15px;color:var(--erro)}.f small:empty{display:none}
.res{background:var(--cafe);color:var(--on-cafe);padding:clamp(24px,3vw,40px);display:grid;gap:18px;min-width:0}
.res h3{font-size:clamp(30px,3vw,42px)}
.res p{color:var(--on-cafe-2);font-size:16px}
.res pre{font:400 16px/1.5 var(--sans);white-space:pre-wrap;overflow-wrap:anywhere;margin:0;padding:14px;border:1px solid rgba(246,243,239,.35)}
.res .btn{background:var(--on-cafe);border-color:var(--on-cafe);color:var(--cafe)}
.res .btn:hover{background:var(--linho);border-color:var(--linho)}
.res .btn.sec{background:transparent;color:var(--on-cafe);border-color:rgba(246,243,239,.65)}
.res .btn.sec:hover{background:rgba(246,243,239,.12)}
@media(max-width:860px){.orc{grid-template-columns:minmax(0,1fr)}}
@media(max-width:460px){.campos{grid-template-columns:minmax(0,1fr)}.res .btn{width:100%}}

/* Interiores das páginas */
.pag{padding:clamp(36px,5vw,76px) var(--m) 0;display:grid;gap:28px}
.pag h1{font-size:clamp(46px,7.6vw,118px);max-width:11em}
.medir{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(28px,5vw,80px);align-items:start}
.medir svg{width:100%;height:auto;color:var(--cafe)}
.passos{list-style:none;margin:0;padding:0;counter-reset:s}
.passos li{counter-increment:s;display:grid;grid-template-columns:54px minmax(0,1fr);border-top:1px solid var(--linha);padding:20px 0}
.passos li::before{content:counter(s);font:400 40px/1 var(--display);color:var(--taupe-escuro)}
.passos h2,.passos h3{font-size:clamp(27px,2.8vw,38px);line-height:1.12;margin-bottom:6px}
@media(max-width:860px){.medir{grid-template-columns:minmax(0,1fr)}}
.perg{border-top:1px solid var(--cafe)}
.perg details{border-bottom:1px solid var(--linha)}
.perg summary{cursor:pointer;padding:18px 34px 18px 0;font:400 clamp(24px,2.4vw,32px)/1.2 var(--display);list-style:none;position:relative}
.perg summary::-webkit-details-marker{display:none}
.perg summary::after{content:"+";position:absolute;right:4px;top:15px;font:400 28px/1.2 var(--sans)}
.perg details[open] summary::after{content:"\2212"}
.perg details p{padding:0 0 22px;max-width:38em}

/* Rodapé */
footer{background:var(--grafite);color:var(--on-cafe);margin-top:var(--bloco);padding:clamp(56px,7vw,96px) var(--m) 110px}
footer img{height:64px;width:auto;background:none}
.rod{display:grid;grid-template-columns:2fr 1fr 1fr 1.2fr;gap:36px}
.rod h2{font:500 15px/1.4 var(--sans);letter-spacing:.02em;color:var(--on-cafe-2);margin-bottom:8px}
.rod>div{min-width:0}
.rod .ass{font:400 clamp(26px,2.6vw,38px)/1.12 var(--display);margin-top:24px;max-width:12em}
.creditos{margin-top:44px;padding-top:16px;border-top:1px solid rgba(246,243,239,.25);font-size:15px;color:var(--on-cafe-2);display:grid;gap:6px;max-width:66em}
@media(max-width:820px){.rod{grid-template-columns:repeat(2,minmax(0,1fr))}.rod>div:first-child{grid-column:1/-1}}
@media(max-width:430px){.rod{grid-template-columns:minmax(0,1fr)}}
.wa{position:fixed;right:max(14px,env(safe-area-inset-right));bottom:max(14px,env(safe-area-inset-bottom));z-index:15;min-height:48px;display:inline-flex;align-items:center;padding:12px 18px;background:var(--cafe);color:var(--on-cafe);font:500 16px/1 var(--sans);text-decoration:none;border:1px solid var(--marfim)}
.wa:hover{background:#5f4a40}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn{transition:none}}
@media print{.topo,.wa{display:none}}

.nota.f{display:block}

.envie{margin-top:44px}.envie-btns{margin-top:20px}