/* roupa.org — "Anil e Algodão"
   Paleta: algodão #F4F5F1 · tinta #1A222B · anil #2038C8 · linha #C93A22
   Sem webfonts, sem imagens externas: performance 100/100. */

:root{
  --algodao:#F4F5F1;
  --papel:#FFFFFF;
  --tinta:#1A222B;
  --tinta-suave:#4A545E;
  --anil:#2038C8;
  --anil-escuro:#16289A;
  --anil-claro:#E8EBFA;
  --linha:#C93A22;
  --costura:#C9CCC2;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,sans-serif;
  --mono:ui-monospace,"SF Mono","Cascadia Mono",Menlo,Consolas,monospace;
  --max:72rem;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}
body{
  margin:0;
  background:var(--algodao);
  color:var(--tinta);
  font-family:var(--sans);
  font-size:1.0625rem;
  line-height:1.65;
  -webkit-text-size-adjust:100%;
}
img,svg{max-width:100%;height:auto;vertical-align:middle}
a{color:var(--anil)}
a:hover{color:var(--anil-escuro)}
:focus-visible{outline:3px solid var(--anil);outline-offset:2px;border-radius:2px}

.wrap{max-width:var(--max);margin:0 auto;padding:0 1.25rem}
.skip{position:absolute;left:-9999px;top:0;background:var(--tinta);color:#fff;padding:.6rem 1rem;z-index:99}
.skip:focus{left:0}

/* ---------- Tipografia ---------- */
h1,h2,h3{font-family:var(--serif);line-height:1.15;letter-spacing:-.01em;font-weight:600}
h1{font-size:clamp(2rem,5.5vw,3.4rem);margin:.2em 0 .4em}
h2{font-size:clamp(1.45rem,3.2vw,2.1rem);margin:2.2em 0 .6em}
h3{font-size:1.2rem;margin:1.6em 0 .4em}
p{margin:.75em 0}
.lede{font-size:clamp(1.1rem,2.2vw,1.3rem);color:var(--tinta-suave);max-width:46em}

/* Etiqueta: rótulo monoespaçado, como etiqueta de roupa */
.tag{
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--anil);
}

/* Régua de costura: divisória pontilhada com nó vermelho */
.stitch{
  border:0;
  border-top:2px dashed var(--costura);
  margin:3rem 0;
  position:relative;
}
.stitch::after{
  content:"";
  position:absolute;top:-4px;left:0;
  width:1.6rem;height:2px;
  border-top:2px dashed var(--linha);
}

/* ---------- Cabeçalho ---------- */
.site-head{
  background:var(--papel);
  border-bottom:2px dashed var(--costura);
}
.site-head .wrap{
  display:flex;align-items:center;gap:1rem;
  min-height:4rem;flex-wrap:wrap;padding-top:.5rem;padding-bottom:.5rem;
}
.logo{
  font-family:var(--serif);font-weight:700;font-size:1.45rem;
  color:var(--tinta);text-decoration:none;letter-spacing:-.02em;
}
.logo b{color:var(--anil);font-weight:700}
.nav{margin-left:auto}
.nav ul{display:flex;gap:.25rem;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.nav a{
  display:block;padding:.5rem .75rem;
  text-decoration:none;color:var(--tinta);
  font-size:.95rem;border-radius:4px;
}
.nav a:hover{background:var(--anil-claro);color:var(--anil-escuro)}
.nav a[aria-current="page"]{
  color:var(--anil-escuro);
  border-bottom:2px solid var(--anil);
  border-radius:4px 4px 0 0;
}
.nav-toggle{display:none}

@media (max-width:47rem){
  .nav-toggle{
    display:block;margin-left:auto;
    background:none;border:2px solid var(--costura);border-radius:6px;
    font:inherit;font-size:.9rem;padding:.4rem .8rem;cursor:pointer;color:var(--tinta);
  }
  .nav{display:none;width:100%;margin-left:0}
  .nav.open{display:block}
  .nav ul{flex-direction:column;padding:.5rem 0}
}

/* ---------- Herói / Varal ---------- */
.hero{padding:3.5rem 0 1rem}
.hero .tag{display:block;margin-bottom:.75rem}

/* O varal: linha costurada de onde penduram as etiquetas */
.varal{
  list-style:none;margin:2.5rem 0 0;padding:0;
  display:grid;gap:1.5rem 1rem;
  grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));
}
@media (min-width:64rem){.varal{grid-template-columns:repeat(3,1fr)}}
.varal>li{
  position:relative;
  border-top:3px dashed var(--anil);
  padding-top:1.4rem;
}
/* pregador */
.varal>li::before{
  content:"";
  position:absolute;top:.15rem;left:1.4rem;
  width:.5rem;height:1.05rem;
  background:var(--tinta);
  border-radius:2px;
  z-index:1;
}
.etiqueta{
  display:block;height:100%;
  background:var(--papel);
  border:1.5px solid var(--tinta);
  border-radius:2px 10px 2px 2px;
  padding:1rem 1.1rem 1.1rem;
  text-decoration:none;color:var(--tinta);
  clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,0 100%);
  transition:transform .15s ease,box-shadow .15s ease;
}
.etiqueta:hover{
  transform:translateY(2px) rotate(.4deg);
  box-shadow:0 4px 0 var(--anil);
  color:var(--tinta);
}
.etiqueta .ico{color:var(--anil);display:block;margin-bottom:.5rem}
.etiqueta strong{font-family:var(--serif);font-size:1.1rem;display:block;margin-bottom:.2rem}
.etiqueta span{font-size:.88rem;color:var(--tinta-suave)}

/* ---------- Seções e grades ---------- */
.section{padding:1rem 0 2rem}
.section-head{display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap}
.section-head .more{margin-left:auto;font-size:.95rem;white-space:nowrap}

.cards{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));margin:1.25rem 0}
.card{
  background:var(--papel);
  border:1.5px solid var(--costura);
  border-radius:6px;
  padding:1.1rem 1.2rem;
}
.card h3{margin-top:0}
.card h3 a{text-decoration:none;color:var(--tinta)}
.card h3 a:hover{color:var(--anil)}
.card p{font-size:.95rem;color:var(--tinta-suave);margin-bottom:0}

/* Lista de links interna (mostruário) */
.linklist{
  columns:2;column-gap:2.5rem;
  list-style:none;margin:1rem 0;padding:0;
}
@media (min-width:60rem){.linklist{columns:3}}
@media (max-width:34rem){.linklist{columns:1}}
.linklist li{
  break-inside:avoid;
  border-bottom:1px dashed var(--costura);
  padding:.45rem 0;
}
.linklist a{text-decoration:none}
.linklist a:hover{text-decoration:underline}

/* ---------- Conteúdo de artigo ---------- */
.article{
  background:var(--papel);
  border:1.5px solid var(--costura);
  border-radius:8px;
  padding:clamp(1.25rem,4vw,3rem);
  margin:2rem 0;
}
.article header{margin-bottom:1.5rem}
.breadcrumb{font-size:.85rem;color:var(--tinta-suave);margin:1.5rem 0 0}
.breadcrumb ol{list-style:none;display:flex;gap:.5rem;flex-wrap:wrap;margin:0;padding:0}
.breadcrumb li+li::before{content:"›";margin-right:.5rem;color:var(--costura)}
.breadcrumb a{color:var(--tinta-suave)}

table{width:100%;border-collapse:collapse;margin:1.25rem 0;font-size:.95rem}
caption{caption-side:top;text-align:left;font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--tinta-suave);padding-bottom:.5rem}
th,td{border:1px solid var(--costura);padding:.6rem .75rem;text-align:left;vertical-align:top}
th{background:var(--anil-claro);font-family:var(--sans);font-size:.85rem}
tbody tr:nth-child(even){background:var(--algodao)}
@media (max-width:40rem){.table-scroll{overflow-x:auto}}

ul.check{list-style:none;padding-left:0}
ul.check li{padding-left:1.6rem;position:relative;margin:.4rem 0}
ul.check li::before{content:"✓";position:absolute;left:0;color:var(--anil);font-weight:700}

/* FAQ */
.faq details{
  border:1.5px solid var(--costura);
  border-radius:6px;background:var(--papel);
  margin:.6rem 0;padding:0 1.1rem;
}
.faq summary{
  cursor:pointer;font-weight:600;
  font-family:var(--serif);font-size:1.05rem;
  padding:.85rem 0;list-style:none;position:relative;padding-right:2rem;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:.2rem;top:.65rem;color:var(--anil);font-size:1.3rem}
.faq details[open] summary::after{content:"–"}
.faq details p{margin-top:0;color:var(--tinta-suave)}

/* Aviso / nota */
.nota{
  border-left:4px solid var(--anil);
  background:var(--anil-claro);
  padding:.9rem 1.1rem;border-radius:0 6px 6px 0;
  font-size:.95rem;margin:1.25rem 0;
}

/* ---------- Rodapé ---------- */
.site-foot{
  margin-top:3rem;
  background:var(--tinta);color:#C6CBD1;
  border-top:3px dashed var(--anil);
  font-size:.92rem;
}
.site-foot .wrap{padding-top:2.5rem;padding-bottom:2.5rem}
.foot-grid{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr))}
.site-foot h2{font-size:.78rem;font-family:var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#fff;margin:0 0 .8rem}
.site-foot ul{list-style:none;margin:0;padding:0}
.site-foot li{margin:.35rem 0}
.site-foot a{color:#C6CBD1;text-decoration:none}
.site-foot a:hover{color:#fff;text-decoration:underline}
.foot-base{margin-top:2rem;padding-top:1.25rem;border-top:1px dashed #3A4450;display:flex;gap:1rem;flex-wrap:wrap;justify-content:space-between}
.foot-base .logo{color:#fff;font-size:1.1rem}