:root{
  --marfim:#F8F4EE;--areia:#EFE7DC;--nude:#EAD8CA;--champagne:#C9B089;--caramelo:#9E6A44;
  --salvia:#8D9A85;--cafe:#3A2A21;--grafite:#2A2724;--preto:#141210;--tinta-suave:#6E625A;
  --linha:rgba(58,42,33,.14);--erro:#A23B2A;--ok:#4F6B47;
  --display:"Bodoni Moda",Georgia,serif;--texto:"Jost",system-ui,sans-serif;--raio:2px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--marfim);color:var(--grafite);font-family:var(--texto);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%;display:block}
a{color:var(--caramelo)}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.1;margin:0;color:var(--cafe);text-wrap:balance}
.wrap{width:min(1120px,100% - 32px);margin-inline:auto}
.eyebrow{font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--caramelo);font-weight:500}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--caramelo);outline-offset:3px}

/* topo */
.topo{background:var(--preto);color:var(--marfim)}
.topo .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px}
.marca{color:var(--marfim);text-decoration:none;font-size:.9rem;letter-spacing:.32em;font-weight:500}
.marca small{display:block;font-family:var(--display);font-style:italic;letter-spacing:0;font-size:.82rem;color:var(--champagne);font-weight:400}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font:500 .78rem var(--texto);letter-spacing:.18em;text-transform:uppercase;padding:15px 24px;border-radius:var(--raio);border:1px solid transparent;cursor:pointer;text-decoration:none;transition:background .2s,color .2s,opacity .2s}
.btn-champ{background:var(--champagne);color:var(--preto)}
.btn-champ:hover{background:#d8c29f}
.btn-cafe{background:var(--cafe);color:var(--marfim)}
.btn-cafe:hover{background:var(--preto)}
.btn-linha{border-color:var(--cafe);color:var(--cafe);background:transparent}
.btn[disabled]{opacity:.55;cursor:wait}
.topo .btn{padding:11px 16px;font-size:.7rem}

.abertura{background:var(--preto);color:#E6DCCD;padding:28px 0 40px}
.abertura h1{color:var(--marfim);font-size:clamp(2.1rem,5.5vw,3.6rem);margin:10px 0 12px}
.abertura h1 em{color:var(--champagne)}
.abertura p{max-width:56ch;margin:0}
.demo{background:#5b3d22;color:#F3E6D2;font-size:.85rem;text-align:center;padding:8px 16px}

/* configurador */
.config{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:48px;padding:44px 0 64px;align-items:start}
.previa{position:sticky;top:16px;background:var(--areia);padding:24px;border:1px solid var(--linha)}
.previa .tela{max-width:420px;margin:0 auto}
.previa .resumo{display:flex;flex-wrap:wrap;gap:6px 18px;justify-content:center;font-size:.86rem;color:var(--tinta-suave);margin-top:10px;text-align:center}
.previa .resumo b{color:var(--cafe);font-weight:500}
.previa .aviso{font-size:.76rem;color:var(--tinta-suave);text-align:center;margin:10px 0 0}

.etapa{border:0;margin:0 0 34px;padding:0}
.etapa legend,.etapa .tit{display:flex;align-items:baseline;gap:12px;font-family:var(--display);font-size:1.45rem;color:var(--cafe);padding:0;margin-bottom:14px}
.etapa legend .n,.etapa .tit .n{font-style:italic;color:var(--champagne);font-size:1.6rem}
.dica{font-size:.88rem;color:var(--tinta-suave);margin:-6px 0 14px}

.grade-est{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:12px}
.opc{position:relative}
.opc input{position:absolute;opacity:0;pointer-events:none}
.opc label{display:block;cursor:pointer;border:1px solid var(--linha);background:#fff;padding:10px;border-radius:var(--raio);transition:border-color .15s,box-shadow .15s;height:100%}
.opc input:checked+label{border-color:var(--cafe);box-shadow:inset 0 0 0 1px var(--cafe)}
.opc input:focus-visible+label{outline:2px solid var(--caramelo);outline-offset:2px}
.opc input:disabled+label{opacity:.4;cursor:not-allowed}
.opc .mini{aspect-ratio:1;background:var(--marfim);display:grid;place-items:center;padding:12px;color:var(--grafite)}
.grade-est .grupo-est{grid-column:1/-1;margin:10px 0 0;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--tinta-suave)}
.grade-est .grupo-est:first-child{margin-top:0}
.opc .mini img{max-width:100%;max-height:100%;object-fit:contain}
.opc .mini.escuro{background:#1F1D1B}
.opc .nome{display:block;font-size:.92rem;margin-top:8px;color:var(--cafe)}
.grade-est .esg{display:inline-block;margin-top:4px;font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;color:var(--caramelo)}
.opc .det{display:block;font-size:.75rem;color:var(--tinta-suave)}

.grade-mod{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px}
.grade-mod .mini{padding:6px}
.grade-cor label .esg{display:block;font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;color:var(--caramelo)}
.grade-cor{display:flex;flex-wrap:wrap;gap:12px}
.grade-cor label{display:flex;flex-direction:column;align-items:center;gap:6px;width:76px;padding:8px 4px;text-align:center;font-size:.76rem;line-height:1.2}
.grade-cor .bola{width:38px;height:38px;border-radius:50%;border:1px solid rgba(0,0,0,.18)}

.grade-tam{display:flex;flex-wrap:wrap;gap:10px}
.grade-tam label{min-width:64px;text-align:center;padding:10px 12px}
.grade-tam .t{display:block;font-weight:500;color:var(--cafe)}
.grade-tam .s{display:block;font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ok)}
.grade-tam .s.enc{color:var(--caramelo)}

.grade-pos{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
.grade-pos .nome{margin-top:0}

.campo{margin-bottom:18px}
.campo label{display:block;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--tinta-suave);margin-bottom:4px}
.campo input,.campo textarea,.campo select{width:100%;font:inherit;font-size:1rem;color:var(--grafite);background:transparent;border:0;border-bottom:1px solid rgba(58,42,33,.32);padding:10px 2px;border-radius:0}
.campo textarea{resize:vertical;min-height:70px}
.campo input:focus,.campo textarea:focus{outline:none;border-bottom-color:var(--caramelo)}
.campo .erro{display:none;color:var(--erro);font-size:.82rem;margin-top:4px}
.campo.invalido input{border-bottom-color:var(--erro)}
.campo.invalido .erro{display:block}
.duas{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.check{display:flex;gap:12px;align-items:flex-start;font-size:.9rem;margin-bottom:12px;cursor:pointer}
.check input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--cafe);flex:none}
.check.invalido{color:var(--erro)}

.entrega{display:grid;gap:10px}
.entrega label{display:block}
.entrega b{font-weight:500;color:var(--cafe)}
.entrega small{display:block;color:var(--tinta-suave);font-size:.82rem}
.nota-enc{background:#F3E8DA;border-left:3px solid var(--caramelo);padding:12px 14px;font-size:.88rem;margin:0 0 14px;display:none}
.nota-enc.on{display:block}

.alerta{display:none;background:#F6E2DC;color:var(--erro);border:1px solid #e3b8ad;padding:12px 14px;font-size:.9rem;margin:0 0 16px}
.alerta.on{display:block}
.enviar{width:100%;padding:18px}
.spinner{width:16px;height:16px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:gira .7s linear infinite;display:none}
.carregando .spinner{display:inline-block}
@keyframes gira{to{transform:rotate(360deg)}}

/* obrigado */
.obrigado{display:none;padding:56px 0 64px}
.obrigado.on{display:block}
.obrigado .caixa{max-width:640px;margin:0 auto;text-align:center}
.obrigado .codigo{display:inline-block;font-family:var(--display);font-size:2.2rem;color:var(--cafe);border:1px solid var(--champagne);padding:8px 26px;margin:16px 0}
.obrigado .previa-ok{max-width:260px;margin:12px auto}
.obrigado .acoes{display:flex;flex-direction:column;gap:12px;align-items:center;margin-top:20px}

/* sobre / experiência */
/* Jornada */
.grade-pub{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.grade-pub .nome{margin-top:0;font-size:1rem}
.esg.ok,.grade-cor label .esg.ok{color:#2E7D4F}
.grade-est .esg.ok{color:#2E7D4F}
.grade-mod .esg{display:block;font-size:.6rem;letter-spacing:.06em;text-transform:uppercase;color:var(--caramelo);margin-top:2px}
.grade-mod .esg.ok{color:#2E7D4F}
.situacao{border:1px solid var(--linha);border-left:4px solid var(--caramelo);background:#fff;padding:16px 18px;margin:0 0 22px;border-radius:var(--raio)}
.situacao.pronta{border-left-color:#2E7D4F;background:#EEF4EF}
.situacao h3{margin:0 0 6px;font-family:var(--display);font-weight:400;font-size:1.35rem;color:var(--cafe)}
.situacao.pronta h3{color:#2E7D4F}
.situacao p{margin:0 0 8px;font-size:.92rem}
.alt-bloco{margin-top:10px}
.alt-botoes{display:flex;flex-wrap:wrap;gap:8px}
.alt-botoes .btn{padding:8px 12px;font-size:.72rem;letter-spacing:.06em}
.vistas{display:flex;gap:6px;justify-content:center;margin-bottom:6px}
.vistas button{border:1px solid var(--linha);background:#fff;padding:5px 14px;font:inherit;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;border-radius:30px;color:var(--cafe)}
.vistas button[aria-pressed="true"]{background:var(--cafe);color:var(--marfim);border-color:var(--cafe)}
.sua-frase-nota{background:#EEF4EF;border-left:3px solid #2E7D4F;padding:10px 14px;margin:0 0 14px;font-size:.9rem}
.sua-frase-nota b{color:#2E7D4F;font-weight:500}
/* Vitrine */
.vitrine{padding:44px 0 36px}
.vitrine h2{color:var(--cafe);font-size:clamp(1.8rem,4.5vw,2.6rem);margin:8px 0 6px}
.vitrine p{margin:0 0 16px}
.vit-lista{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(210px,240px);gap:14px;overflow-x:auto;padding-bottom:10px;scroll-snap-type:x mandatory}
.vit-card{background:#fff;border:1px solid var(--linha);border-radius:var(--raio);padding:12px;display:flex;flex-direction:column;gap:6px;scroll-snap-align:start}
.vit-card .vit-img{background:var(--areia);aspect-ratio:1/1.05;display:grid;place-items:center}
.vit-card .vit-img svg,.vit-card .vit-img .foto-previa{width:100%;height:auto}
.vit-card b{font-weight:500;color:var(--cafe);font-size:.92rem;line-height:1.3}
.vit-card span{font-size:.78rem;color:var(--tinta-suave)}
.vit-card .btn{margin-top:auto;padding:9px 10px;font-size:.72rem}
/* Prévia com foto */
.foto-previa{position:relative;display:block;width:100%;aspect-ratio:3/4;overflow:hidden}
.foto-previa img,.foto-previa span{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.foto-previa .fp-cor,.foto-previa .fp-tecido{-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.foto-previa{isolation:isolate}
.foto-previa .fp-estampa{inset:auto;height:auto;object-fit:contain}

/* Destaque de modelo (Algodão Pima) */
.destaque-mod{background:#EEF4EF;border-left:3px solid #2E7D4F;padding:12px 14px;margin:0 0 14px;font-size:.88rem}
.destaque-mod b{display:block;color:#2E7D4F;font-weight:500;margin-bottom:4px}
.destaque-mod ul{margin:0;padding-left:18px}
.destaque-mod li{margin:2px 0}
.opc .selo{display:inline-block;margin-top:4px;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:#2E7D4F;padding:2px 6px;border-radius:2px}

/* Coleção Tal pai, tal filho */
.colecao{background:var(--areia);padding:44px 0 48px}
.colecao h2{color:var(--cafe);font-size:clamp(1.8rem,4.5vw,2.6rem);margin:8px 0 8px}
.colecao h2 em{color:#2E7D4F}
.colecao p{max-width:60ch;margin:0 0 16px}
.col-cor{display:flex;gap:8px;margin-bottom:18px}
.col-cor .btn{padding:8px 16px}
.col-cor .btn[aria-pressed="true"]{background:var(--cafe);color:var(--marfim)}
.col-pares{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,420px),1fr));gap:16px}
.par{background:#fff;border:1px solid var(--linha);border-radius:var(--raio);padding:14px}
.par .par-titulo{margin:0 0 8px;font-family:var(--display);font-weight:400;font-size:1.15rem;color:var(--cafe)}
.par .duas-cam{display:grid;grid-template-columns:1.25fr 1fr;align-items:end;gap:4px}
.par .duas-cam svg{width:100%;height:auto;display:block}
.par .rot{display:grid;grid-template-columns:1.25fr 1fr;gap:4px;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--tinta-suave);text-align:center;margin:4px 0 10px}
.par .acoes-par{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.par .acoes-par .btn{padding:9px 8px;font-size:.72rem}

.sobre{background:var(--cafe);color:#E6DCCD;padding:64px 0}
.sobre .wrap{display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:center}
.sobre h2{color:var(--marfim);font-size:clamp(1.8rem,4vw,2.6rem);margin:10px 0 16px}
.sobre ul{list-style:none;padding:0;margin:20px 0 28px;display:grid;gap:12px}
.sobre li{border-left:2px solid var(--champagne);padding-left:14px}
.sobre li b{display:block;font-family:var(--display);font-weight:400;color:var(--marfim);font-size:1.1rem}
.sobre figure{margin:0}
.sobre figure img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}

.rodape{background:var(--preto);color:#B9AC9C;font-size:.86rem;padding:36px 0 96px}
.rodape .wrap{display:flex;flex-wrap:wrap;gap:16px 40px;justify-content:space-between}
.rodape a{color:#E6DCCD}

.whats-fixo{position:fixed;right:16px;bottom:16px;z-index:20;display:none;align-items:center;gap:8px;background:#25D366;color:#fff;text-decoration:none;border-radius:40px;padding:12px 18px;font-weight:500;font-size:.9rem;box-shadow:0 6px 18px rgba(0,0,0,.2)}
.whats-fixo svg{width:20px;height:20px}

@media (max-width:860px){
  .config{grid-template-columns:1fr;gap:28px;padding-top:24px}
  .previa{position:sticky;top:0;z-index:5;padding:10px 12px;margin-inline:-16px;border-left:0;border-right:0}
  .previa .tela{max-width:190px}
  .previa .aviso{display:none}
  .sobre .wrap{grid-template-columns:1fr}
  .duas{grid-template-columns:1fr}
  .whats-fixo{display:inline-flex}
}