/* ============================================================
   VESTA — telas: Home, Capsules, Outfits, Model, My Style, Create
   ============================================================ */

/* ═══ HOME ═══ */
/* elástico do iOS no topo: estende o fundo escuro do hero para cima,
   então o "puxão" revela continuação do hero, não um vazio creme */
#screen-home { position: relative; }
#screen-home::before {
  content: ''; position: absolute; left: 0; right: 0;
  top: -600px; height: 600px;
  background: #3A2E24;
}

/* hero compacto (estilo Mosso): saudação no topo-esquerda, mulher à direita,
   painel de vidro no rodapé */
.home-hero {
  position: relative;
  margin: 0;                 /* borda a borda, como o Mosso — sem cartão flutuando */
  border-radius: 0;
  min-height: 276px;
  display: flex; flex-direction: column;
  overflow: hidden;
  background: #3A2E24;
}
.home-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 72% 10%; }
.home-hero-scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(100deg, rgba(20,14,8,.52), rgba(20,14,8,.18) 42%, rgba(20,14,8,0) 62%),
    linear-gradient(to top, rgba(20,14,8,.30), rgba(20,14,8,0) 45%);
}
.home-hero-top {
  position: relative; z-index: 2;
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--sp-4) var(--sp-4) 0;
}
.persona-pill {
  background: #F7C29B; color: #7C3A0E;
  font-size: var(--fs-12); font-weight: 600;
  padding: 7px 16px; border-radius: var(--r-pill);
  box-shadow: var(--shadow-1);
  animation: pop-in var(--t-slow) var(--ease-out) both .15s;
}
.home-avatar {
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(255,255,255,.92); color: var(--ink);
  display: grid; place-items: center;
  box-shadow: var(--shadow-1);
}
.home-avatar svg { width: 20px; height: 20px; }
.home-greeting {
  position: relative; z-index: 2; flex: 1;
  display: grid; gap: var(--sp-2); justify-items: start; align-content: start;
  padding: var(--sp-2) var(--sp-4) var(--sp-3);
  max-width: 72%;   /* o texto fica à esquerda, longe do rosto dela */
}
.home-hello {
  color: #fff; font-size: var(--fs-24); line-height: 1.18;
  text-shadow: 0 1px 10px rgba(0,0,0,.35);
  animation: rise-in var(--t-focal) var(--ease-out) both .1s;
}
.weather-pill {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(255,255,255,.3); color: #fff;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.35);
  border-radius: var(--r-pill); padding: 5px 12px;
  font-size: var(--fs-12); font-weight: 600;
  animation: pop-in var(--t-slow) var(--ease-out) both .3s;
}
.weather-pill svg { width: 14px; height: 14px; }
.hero-panel {
  position: relative; z-index: 2;
  margin: 0 var(--sp-3) var(--sp-3);
  background: rgba(52, 42, 33, .58);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
  display: grid; gap: var(--sp-3);
}
.hero-tags { color: #F3E8DC; font-size: var(--fs-14); font-weight: 500; }
.hero-btns { display: flex; gap: var(--sp-2); }
.hero-btns .btn { flex: 1; }
.hero-btns .btn-ghost { background: rgba(255,255,255,.9); color: var(--ink); border-color: transparent; }
.hero-btns .btn-ghost:hover { background: #fff; }

/* título da seção centrado (Daily Inspo, como no Mosso) */
.sec.sec-center { justify-content: center; }

/* rail na raiz da tela (sem margem negativa) + snap: cada gesto para
   exatamente no look seguinte/anterior, centrado */
.inspo-rail {
  padding-top: var(--sp-1); margin-inline: 0; padding-inline: var(--sp-5);
  scroll-snap-type: x mandatory;
}
.inspo-card {
  /* 100% do conteúdo do rail (tela − 2×20px): o card ativo alinha exatamente
     com o card do desafio abaixo; os vizinhos espiam pela borda */
  position: relative; width: 100%; max-width: 480px;
  scroll-snap-align: center; scroll-snap-stop: always;
  border-radius: var(--r-lg); overflow: hidden;
  background: var(--surface); box-shadow: var(--shadow-1);
}
.inspo-card.skeleton { height: 440px; }
.inspo-img { border-radius: 0; }
.inspo-fav { position: absolute; top: 8px; right: 8px; background: rgba(255,255,255,.92); border: 0; }

/* ── overlays de card (estilo Mosso) ── */
/* pill branca no topo-centro ("For The Queen", título do look) */
.card-tag {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
  max-width: 72%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  background: rgba(255,255,255,.92);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  border-radius: var(--r-pill); padding: 6px 14px;
  font-size: var(--fs-12); font-weight: 600; color: var(--ink);
  box-shadow: var(--shadow-1);
}
/* Try on rust flutuando no rodapé da imagem */
.card-tryon {
  position: absolute; left: 50%; bottom: var(--sp-3); transform: translateX(-50%);
  box-shadow: var(--shadow-2);
}
.card-tryon:active { transform: translateX(-50%) scale(.97); }
/* selo de match rust no canto (Outfits) */
.match-chip {
  position: absolute; top: 0; left: 0;
  display: grid; justify-items: center; line-height: 1.05;
  background: var(--rust); color: #fff;
  border-radius: 0 0 var(--r-md) 0;
  padding: 7px 10px 6px;
}
.match-chip b { font-size: var(--fs-14); font-weight: 600; }
.match-chip i { font-style: normal; font-size: var(--fs-11); font-weight: 500; opacity: .9; }

.challenge-card {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-5);
  background: var(--peach-grad);
  cursor: pointer;
}
/* em andamento (Mosso): coluna, pill "Today", botão contorno de largura cheia */
.challenge-card.andamento { flex-direction: column; align-items: stretch; }
.chal-continue {
  background: transparent; color: var(--ink);
  border: 1.5px solid rgba(37, 37, 45, .55);
}
.chal-continue:hover { border-color: var(--ink); }
.chal-continue svg { margin-left: 2px; }
.challenge-copy { flex: 1; display: grid; gap: 6px; justify-items: start; }
.challenge-copy .pill { background: rgba(255,255,255,.7); border-color: transparent; color: #8A4A1E; }
.challenge-copy h3 { font-size: var(--fs-20); font-weight: 600; }
.challenge-copy p { font-size: var(--fs-13); color: #6B5644; }

/* cards de features (Capsule Wardrobe · Outfit Check · Ask Stylist · Color Match) */
.feat-rail { margin-inline: 0; margin-top: var(--sp-2); }
.feat-card {
  position: relative; width: 148px; aspect-ratio: 3/4;
  border-radius: var(--r-lg); overflow: hidden;
  background: var(--surface-2); box-shadow: var(--shadow-1);
}
.feat-card img { width: 100%; height: 100%; object-fit: cover; }
.feat-card::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(20,14,8,.55), rgba(20,14,8,0) 45%);
}
.feat-card span {
  position: absolute; left: var(--sp-2); right: var(--sp-2); bottom: var(--sp-3);
  z-index: 1; text-align: center;
  color: #fff; font-size: var(--fs-14); font-weight: 600; line-height: 1.25;
  text-shadow: 0 1px 6px rgba(0,0,0,.35);
}

/* ═══ CAPSULES ═══ */
.cap-hero { display: flex; align-items: stretch; }
.cap-hero-art { width: 46%; min-height: 190px; }
.cap-hero-art .collage-grid { height: 100%; }
.cap-hero-info {
  flex: 1; display: grid; gap: 6px; align-content: center; justify-items: start;
  padding: var(--sp-4) var(--sp-5);
}
.cap-hero-info h3 { font-size: var(--fs-24); font-weight: 600; }
.cap-hero-info p { font-size: var(--fs-13); color: var(--ink-soft); }
.cap-actions { display: flex; gap: var(--sp-2); margin-top: var(--sp-3); }
.cap-saved { border-color: var(--rust) !important; color: var(--rust-deep); }

/* minmax(0,1fr) + overflow:hidden: sem isso, o min-content dos PNGs gigantes
   do CDN (2000px+) explode as colunas e a colagem estoura a tela */
.collage-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px;
  background: #F7F3ED; padding: var(--sp-2);
}
.collage-grid .cg-cell { aspect-ratio: 3/4; display: grid; place-items: center; overflow: hidden; min-width: 0; }
.collage-grid .cg-cell img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.cg-big { border-radius: var(--r-md); grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); padding: var(--sp-3); }

.cap-sub { font-size: var(--fs-12); color: var(--ink-faint); margin-top: 2px; }
.cap-card {
  width: 150px; display: grid; gap: 4px;
  text-align: left; padding-bottom: var(--sp-3);
}
.cap-card .collage-grid { grid-template-columns: repeat(3, 1fr); min-height: 92px; }
.cap-card-name { font-weight: 600; font-size: var(--fs-14); padding: 4px var(--sp-3) 0; }
.cap-card-n { font-size: var(--fs-12); color: var(--ink-faint); padding: 0 var(--sp-3); }
.cap-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.cap-grid2 .cap-card { width: auto; }
.cap-un { position: absolute; top: 8px; right: 8px; }

/* New Capsule: pílula fixa no centro, flutuando acima da nav */
.fab-pill {
  position: sticky; bottom: calc(var(--nav-h) + var(--safe-b) + var(--sp-4));
  display: flex; width: fit-content; margin: var(--sp-4) auto 0;
  z-index: 50; box-shadow: var(--shadow-3);
}

/* ═══ OUTFITS ═══ */
.out-hero { position: relative; height: 200px; border-radius: 0; }
.out-hero img { width: 100%; height: 100%; object-fit: cover; }
.out-hero-scrim { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(15,10,6,.1), rgba(15,10,6,.55)); }
.out-hero h1 {
  position: absolute; left: var(--sp-5); bottom: 76px;   /* respiro sobre o toggle */
  color: #fff; font-size: var(--fs-32); font-weight: 600;
  text-shadow: 0 1px 8px rgba(0,0,0,.4);
}
.out-toggle {
  position: absolute; left: var(--sp-5); right: var(--sp-5); bottom: var(--sp-4);
  display: flex; background: rgba(255,255,255,.2);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.35);
  border-radius: var(--r-pill); padding: 3px;
}
.out-tg {
  flex: 1; padding: 9px 0; border-radius: var(--r-pill);
  color: #fff; font-size: var(--fs-13); font-weight: 600;
  transition: background var(--t-base) var(--ease-out), color var(--t-base) var(--ease-out);
}
.out-tg.on { background: var(--rust); color: #fff; box-shadow: var(--shadow-1); }

.out-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); margin-top: var(--sp-4); }
.out-card { position: relative; border-radius: var(--r-lg); overflow: hidden; background: var(--surface); box-shadow: var(--shadow-1); }
.out-card.big { grid-column: 1 / -1; }
.out-sk { aspect-ratio: 3/4; }
.out-fav { position: absolute; top: 8px; right: 8px; background: rgba(255,255,255,.92); border: 0; }
.out-foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3) var(--sp-3);
}
.out-foot p { font-size: var(--fs-12); color: var(--ink-soft); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── detalhe de outfit / itens de cápsula ── */
.od-tags { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-3); }
.od-imgwrap { position: relative; border-radius: var(--r-lg); aspect-ratio: 3/4; }
.od-created { font-size: var(--fs-12); color: var(--rust-deep); font-weight: 600; margin-top: var(--sp-4); letter-spacing: .02em; }
.od-title { font-size: var(--fs-24); margin: 2px 0 var(--sp-2); }
.od-desc { font-size: var(--fs-14); color: var(--ink-soft); margin-bottom: var(--sp-4); }
.od-like { text-align: center; margin-top: var(--sp-5); }
.od-like p { font-size: var(--fs-13); color: var(--ink-soft); margin-bottom: var(--sp-2); }
.od-like-btns { display: flex; gap: var(--sp-2); justify-content: center; }
/* minmax(0,1fr): título nowrap não pode alargar a fileira além do sheet */
.od-items { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); }
.od-item {
  min-width: 0;
  display: flex; align-items: center; gap: var(--sp-3);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: var(--sp-2) var(--sp-3);
  transition: border-color var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
.od-item:active { transform: scale(.98); }
.od-item:hover { border-color: var(--line-strong); }
.od-thumb { width: 54px; height: 66px; border-radius: var(--r-sm); flex: none; background: #F7F3ED; }
.od-thumb img { object-fit: contain; mix-blend-mode: multiply; }
.od-item-info { flex: 1; min-width: 0; }
.od-item-title { font-size: var(--fs-13); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.od-item-meta { font-size: var(--fs-12); color: var(--ink-faint); }
.od-ext { width: 16px; height: 16px; color: var(--ink-faint); flex: none; }
.od-disclaimer { font-size: var(--fs-11); color: var(--ink-faint); margin: var(--sp-4) 0; line-height: 1.5; }

/* ── Match Analysis do look criado ── */
.od-ma { display: grid; gap: var(--sp-3); padding: var(--sp-4); }
.od-ma-row { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-14); }
.od-ma-row > span:first-child { flex: 1; }
.od-ma-bar {
  width: 96px; height: 8px; flex: none;
  border-radius: var(--r-pill); background: var(--surface-2); overflow: hidden;
}
.od-ma-bar i {
  display: block; height: 100%; border-radius: inherit;
  transform: scaleX(var(--p, 0)); transform-origin: 0 50%;
  transition: transform var(--t-focal) var(--ease-out);
}
.od-ma-row b { font-weight: 600; min-width: 42px; text-align: right; }
.od-ma-txt { font-size: var(--fs-13); color: var(--ink-soft); line-height: 1.5; margin-top: var(--sp-1); }

/* ═══ MODEL ═══ */
.model-hint { font-size: var(--fs-13); color: var(--ink-soft); margin-bottom: var(--sp-4); max-width: 34ch; }
.model-card { margin-bottom: var(--sp-4); }
.model-ph {
  display: grid; place-items: center; gap: var(--sp-2);
  aspect-ratio: 3/4; color: var(--ink-faint);
}
.model-ph svg { width: 56px; height: 56px; }
.model-ph p { font-size: var(--fs-13); }
.model-img { aspect-ratio: 3/4; }
.model-img img { object-fit: cover; }

/* ═══ MY STYLE ═══ */
.ms-hero { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-4); }
/* avatar opcional: nasce como convite (câmera), vira foto se ela quiser */
.ms-ava {
  width: 72px; height: 72px; border-radius: 50%; flex: none;
  display: grid; place-items: center; overflow: hidden;
  background: var(--surface-2); color: var(--ink-faint);
  border: 1.5px dashed var(--line-strong);
}
.ms-ava:has(img) { border-style: solid; border-color: var(--line); }
.ms-ava svg { width: 26px; height: 26px; }
.ms-ava img { width: 100%; height: 100%; object-fit: cover; }
.ms-id { min-width: 0; }
.ms-name-row { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.ms-name-row h2 { font-size: var(--fs-22); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-pencil {
  width: 32px; height: 32px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  color: var(--ink-faint);
  transition: color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out);
}
.ms-pencil:hover { color: var(--ink); background: var(--surface-2); }
.ms-arch { color: var(--rust-deep); font-size: var(--fs-13); font-weight: 600; }

/* desbloquear try-ons — moldura rust, como no original */
.ms-unlock {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-4); margin-top: var(--sp-3);
  border-color: var(--rust) !important; border-width: 1.5px !important;
}

/* situação do desafio */
.ms-chal {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  width: 100%; text-align: left;
  padding: var(--sp-4); margin-top: var(--sp-3);
  background: var(--peach-grad);
}
.ms-chal svg { flex: none; color: var(--ink-soft); }
.ms-chal-t { font-weight: 600; font-size: var(--fs-14); }
.ms-chal-s { font-size: var(--fs-12); color: var(--ink-soft); margin-top: 2px; }
.ms-progress { padding: var(--sp-3) var(--sp-4); margin-top: var(--sp-3); }
.ms-progress-head { display: flex; justify-content: space-between; font-size: var(--fs-13); color: var(--ink-soft); margin-bottom: var(--sp-2); }
.ms-bar { height: 6px; background: var(--surface-2); border-radius: var(--r-pill); overflow: hidden; }
.ms-bar span {
  display: block; height: 100%; width: 100%;
  background: var(--rust-ember); border-radius: var(--r-pill);
  transform: scaleX(var(--p, 0)); transform-origin: 0 50%;
  transition: transform var(--t-focal) var(--ease-out);
}
.ms-color { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-4); margin-top: var(--sp-3); }
.ms-color-name { font-size: var(--fs-20); }
.ms-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); margin-top: var(--sp-4); }
.ms-cell { display: grid; gap: 2px; padding: var(--sp-3) var(--sp-4); text-align: left; position: relative; }
.ms-cell-label { font-size: var(--fs-12); color: var(--ink-faint); }
.ms-cell-value { font-weight: 600; font-size: var(--fs-14); }
.ms-swatch { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line-strong); position: absolute; top: var(--sp-3); right: var(--sp-3); }
.ms-sair { margin-top: var(--sp-3); color: var(--danger); border-color: #EAD5D0; }
.ms-opts { display: grid; gap: var(--sp-2); }
.ms-opt {
  display: flex; align-items: center; gap: var(--sp-3);
  background: var(--surface); border: 1.5px solid var(--line);
  border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-14); font-weight: 500; text-align: left;
  transition: border-color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out);
}
.ms-opt .ms-swatch { position: static; flex: none; }
.ms-opt.on { border-color: var(--ink); }
.ms-opt svg { margin-left: auto; color: var(--success); }

/* ═══ CREATE (biblioteca) ═══ */
.co-modal {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(30, 26, 22, .45);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  display: none; align-items: flex-end; justify-content: center;
}
.co-modal.aberto { display: flex; animation: fade-in var(--t-base) var(--ease-out) both; }
.co-card {
  width: 100%; max-width: var(--app-max);
  height: 92dvh; overflow-y: auto; overflow-x: hidden;
  background: var(--bg-warm);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  padding: var(--sp-2) var(--sp-5) 0;
  animation: sheet-up var(--t-slow) var(--ease-out) both;
  display: flex; flex-direction: column;
}
/* sem isso o flex ESMAGA bandeja/abas/chips quando a grade cresce
   (chips viravam uma lasca de 6px atrás das abas) */
.co-card > * { flex: 0 0 auto; }
.co-head { display: flex; align-items: center; justify-content: space-between; }
.co-head h2 { font-size: var(--fs-24); }
.co-sub { font-size: var(--fs-13); color: var(--ink-soft); margin: 4px 0 var(--sp-3); }

/* fonte das peças: biblioteca × fotos próprias */
.co-fontes {
  display: flex; gap: var(--sp-2); margin-bottom: var(--sp-3);
}
.co-fonte {
  flex: 1; min-height: 40px; border-radius: var(--r-pill);
  background: var(--surface); border: 1px solid var(--line-strong);
  font-size: var(--fs-13); font-weight: 500; color: var(--ink-soft);
  transition: background var(--t-base) var(--ease-out), color var(--t-base) var(--ease-out),
              border-color var(--t-base) var(--ease-out);
}
.co-fonte.on { background: var(--chrome); color: var(--on-chrome); border-color: var(--chrome); }

/* tile de adicionar foto + apagar foto própria */
.co-add {
  display: grid; place-items: center; gap: var(--sp-2);
  aspect-ratio: 3/4; color: var(--ink-faint);
  border-style: dashed !important;
  font-size: var(--fs-12); font-weight: 500;
}
.co-add svg { width: 26px; height: 26px; }
.co-delfoto {
  position: absolute; top: 6px; left: 6px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--chrome); color: #fff;
  display: grid; place-items: center;
  font-size: 14px; line-height: 1;
}
.co-tray { display: flex; gap: var(--sp-2); overflow-x: auto; padding-bottom: var(--sp-3); scrollbar-width: none; }
.co-tray::-webkit-scrollbar { display: none; }
.co-tray-item {
  position: relative; flex: none; width: 56px; height: 68px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-sm); display: grid; place-items: center;
  animation: pop-in var(--t-base) var(--ease-spring) both;
}
.co-tray-item img { max-height: 90%; object-fit: contain; mix-blend-mode: multiply; }
.co-tray-item button {
  position: absolute; top: -6px; right: -6px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--chrome); color: #fff; font-size: 13px; line-height: 1;
}
.co-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); margin-top: var(--sp-3); }
.co-item {
  position: relative; border-radius: var(--r-md); overflow: hidden;
  background: var(--surface); border: 1.5px solid var(--line);
  padding: var(--sp-2);
  transition: border-color var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
.co-item:active { transform: scale(.95); }
.co-item.skeleton { aspect-ratio: 3/4; border: 0; }
.co-img { aspect-ratio: 3/4; background: #F7F3ED; border-radius: var(--r-sm); }  /* papel: peça branca não some no card branco */
.co-img::before { display: none; }
.co-img img { object-fit: contain; mix-blend-mode: multiply; }
.co-price { display: block; font-size: var(--fs-11); color: var(--ink-soft); text-align: center; padding-top: 4px; }
.co-check {
  position: absolute; top: 6px; right: 6px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--rust); color: #fff;
  display: grid; place-items: center;
  opacity: 0; transform: scale(.5);
  transition: opacity var(--t-fast) var(--ease-spring), transform var(--t-fast) var(--ease-spring);
}
.co-check svg { width: 13px; height: 13px; }
.co-item.sel { border-color: var(--rust); }
.co-item.sel .co-check { opacity: 1; transform: none; }
.co-sentinela { height: 1px; }
.co-footer {
  position: sticky; bottom: 0;
  background: linear-gradient(to top, var(--bg-warm) 70%, transparent);
  padding: var(--sp-4) 0 calc(var(--sp-5) + var(--safe-b));
  margin-top: auto;
}