:root{
  --brand:#9a0c15;       /* cor do tema */
  --text:#111827;        /* near-black elegante */
  --muted:#6b7280;       /* cinza leve */
  --ring:rgba(0,0,0,.08);
  --shadow:0 8px 26px rgba(0,0,0,.18);
}

*{ box-sizing:border-box }
html,body{ height:100%; margin:0 }

body{
  background:#fff;
  color:var(--text);
  font-family: "Manrope", system-ui, -apple-system, Segoe UI, Roboto, Arial;
}

/* Centraliza tudo na tela, respeitando notch/safe-areas */
.viewport{
  min-height:100svh;           /* usa viewport segura em mobile */
  display:grid;
  place-items:center;
  padding:max(20px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
}

/* Empilha imagem + texto com espaçamento fluido */
.stack{
  display:grid;
  justify-items:center;
  text-align:center;
  gap:clamp(16px, 3vw, 22px);
  width:min(92vw, 820px);
}

/* Imagem central responsiva — sem borda */
.hero{
  width:100%;
  max-width:240px;
  aspect-ratio: 1 / 1;
  margin:0;
  border-radius:22px;
  overflow:hidden;
  box-shadow: 0 10px 34px rgba(0,0,0,.15); /* sombra suave premium */
}

.hero img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
  transform:scale(1.01);
  animation: gentle-zoom 3.2s ease-in-out infinite alternate;
}

/* Texto "Carregando…" com reticências infinitas */
.loading-dots{
  margin:0;
  font-weight:800;
  letter-spacing:.3px;
  color:var(--brand);
  font-size: clamp(24px, 5.2vw, 44px);
  line-height:1.05;
}

/* CSS puro para animar as reticências */
.dots{
  display:inline-block;
  width:3ch;                  /* espaço máximo para '...' */
  white-space:nowrap;
  overflow:hidden;
  vertical-align:baseline;
  margin-left:4px;
  font-weight:800;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  animation: dotty 1.05s steps(3,end) infinite;
}
.dots::before{ content:"..." }

/* Acessibilidade: respeita usuários que preferem menos movimento */
@media (prefers-reduced-motion: reduce){
  .hero img{ animation:none }
  .dots{ animation:none; width:3ch }
}

/* Animação das reticências */
@keyframes dotty{
  0%   { width:0ch }
  100% { width:3ch }
}