/* Portal de gestão — Encostas do Vade
   Tinta neutra na moldura; cada aplicação traz a sua cor. */

:root {
  --tinta: #33262A;
  --papel: #F4F1EC;
  --branco: #FFFFFF;
  --linha: #DED5D2;
  --suave: #6E6165;
  --verde: #2E5E43;
  --verde-claro: #E7EEE8;
  --bordo: #5A1A2A;
  --bordo-claro: #F2E4E8;
  --r: 12px;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--tinta);
  background: var(--papel);
  background-image: radial-gradient(circle at 1px 1px, rgba(51, 38, 42, .06) 1px, transparent 0);
  background-size: 22px 22px;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 28px max(18px, env(safe-area-inset-left)) calc(28px + env(safe-area-inset-bottom));
  -webkit-tap-highlight-color: transparent;
}

.portal { width: min(560px, 100%); }

.cabeca { text-align: center; margin-bottom: 30px; }
.assinatura { display: block; width: min(200px, 56%); height: auto; margin: 0 auto 10px; }
.legenda {
  margin: 0;
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .24em;
  color: var(--suave);
  font-weight: 600;
}

.cartoes { display: grid; gap: 12px; }

.cartao-app {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 20px;
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--r);
  text-decoration: none;
  color: inherit;
  box-shadow: 0 1px 2px rgba(51, 38, 42, .05), 0 10px 28px -20px rgba(51, 38, 42, .5);
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.cartao-app:hover, .cartao-app:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(51, 38, 42, .06), 0 16px 34px -20px rgba(51, 38, 42, .55);
  outline: none;
}
.cartao-app:active { transform: translateY(0); }

.selo {
  display: grid;
  place-items: center;
  width: 56px; height: 56px;
  border-radius: 10px;
  flex: none;
}
.texto { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.nome { font-size: 1.15rem; font-weight: 650; letter-spacing: -.015em; }
.desc { font-size: .82rem; color: var(--suave); line-height: 1.35; }
.seta { font-size: 1.2rem; color: var(--linha); transition: transform .14s ease, color .14s ease; }
.cartao-app:hover .seta { transform: translateX(3px); }

.entregas .selo { background: var(--verde-claro); color: var(--verde); }
.entregas:hover { border-color: var(--verde); }
.entregas:hover .nome, .entregas:hover .seta { color: var(--verde); }

.vinho .selo { background: var(--bordo-claro); color: var(--bordo); }
.vinho:hover { border-color: var(--bordo); }
.vinho:hover .nome, .vinho:hover .seta { color: var(--bordo); }

.rodape { margin-top: 26px; text-align: center; }
.rodape p { margin: 0; font-size: .72rem; color: var(--suave); }

@media (max-width: 480px) {
  .cartao-app { padding: 16px; gap: 13px; }
  .selo { width: 48px; height: 48px; }
  .nome { font-size: 1.05rem; }
  .desc { font-size: .78rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}