/* =============================================
   VARIÁVEIS GLOBAIS — paleta de cores
   ============================================= */
:root {
  --orange: #FF6B00;
  --orange-deep: #D45900;
  --orange-glow: #FF8C33;
  --black: #000000;
  --ink: #121212;
  --white: #FFFFFF;
  --cream: #F9F9F9;
  --paper: #F0F0F0;
  --star: #FFB800;
}

/* =============================================
   RESET GLOBAL — zera margens e box-sizing
   ============================================= */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

/* =============================================
   BASE — html e body
   ============================================= */
html,
body {
  overflow-x: hidden;
}

body {
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--black);
  color: var(--ink);
  min-height: 100vh;
  position: relative;
  padding: 28px 20px 40px;
  display: flex;
  justify-content: center;
  line-height: 1.5;
}

/* =============================================
   SPLASH SCREEN — tela de abertura
   ============================================= */
#splash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  pointer-events: none;
  animation: splashExit 1.8s cubic-bezier(0.7, 0, 1, 1) 1.2s forwards;
}

@keyframes splashExit {
  0% {
    clip-path: inset(0 0 0 0);
    opacity: 1;
  }

  60% {
    clip-path: inset(0 0 0 0);
    opacity: 1;
  }

  100% {
    clip-path: inset(0 100% 0 0);
    opacity: 0;
  }
}

/* --- Faixas coloridas no topo e rodapé do splash --- */
.splash-stripe {
  position: absolute;
  left: 0;
  right: 0;
  height: 12px;
  display: flex;
}

.splash-stripe.top {
  top: 0;
}

.splash-stripe.bot {
  bottom: 0;
}

.splash-stripe span {
  flex: 1;
}

.splash-stripe span:nth-child(odd) {
  background: var(--orange);
}

.splash-stripe span:nth-child(even) {
  background: var(--black);
}

/* --- Logo circular no splash --- */
.splash-logo-wrap {
  position: relative;
  width: 130px;
  height: 130px;
  display: grid;
  place-items: center;
  animation: splashLogoIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
}

@keyframes splashLogoIn {
  from {
    transform: scale(0.4) rotate(-15deg);
    opacity: 0;
  }

  to {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

/* --- Anéis decorativos ao redor do logo no splash --- */
.splash-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px solid var(--orange);
  animation: splashRingPulse 1s ease-out 0.55s both;
}

.splash-ring-2 {
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  border: 1.5px solid rgba(200, 16, 46, 0.35);
  animation: splashRingPulse2 1s ease-out 0.7s both;
}

@keyframes splashRingPulse {
  from {
    transform: scale(0.85);
    opacity: 0;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes splashRingPulse2 {
  from {
    transform: scale(0.7);
    opacity: 0;
  }

  to {
    transform: scale(1);
    opacity: 0.8;
  }
}

/* --- Círculo de fundo do logo no splash --- */
.splash-circle {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--orange);
  overflow: hidden;
  border: 3px solid rgba(255, 255, 255, 0.12);
  display: grid;
  place-items: center;
}

/* --- Efeito de flash/explosão ao aparecer --- */
.splash-flash {
  position: absolute;
  inset: -40px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 184, 0, 0.55) 0%, rgba(255, 107, 0, 0.18) 40%, transparent 70%);
  animation: splashFlash 0.6s ease-out 0.9s both;
}

@keyframes splashFlash {
  0% {
    transform: scale(0.5);
    opacity: 0;
  }

  40% {
    transform: scale(1.4);
    opacity: 1;
  }

  100% {
    transform: scale(2);
    opacity: 0;
  }
}

/* --- Nome da marca no splash --- */
.splash-brand {
  font-family: 'Anton', sans-serif;
  font-size: clamp(32px, 10vw, 44px);
  letter-spacing: 2px;
  color: var(--cream);
  text-transform: uppercase;
  margin-top: 22px;
  animation: splashTextIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.45s both;
  text-shadow: 0 0 40px rgba(255, 107, 0, 0.5);
}

/* --- Subtítulo no splash --- */
.splash-sub {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 13px;
  letter-spacing: 5px;
  color: rgba(251, 247, 240, 0.55);
  text-transform: uppercase;
  margin-top: 6px;
  animation: splashTextIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.6s both;
}

@keyframes splashTextIn {
  from {
    transform: translateY(14px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* --- Estrelas decorativas no splash --- */
.splash-stars {
  display: flex;
  gap: 8px;
  margin-top: 18px;
  animation: splashTextIn 0.5s ease-out 0.75s both;
}

.splash-stars svg {
  width: 14px;
  height: 14px;
  color: var(--star);
  filter: drop-shadow(0 0 6px rgba(255, 210, 63, 0.8));
}

/* =============================================
   CONTEÚDO DA PÁGINA — oculto até splash terminar
   ============================================= */
#page-content {
  opacity: 0;
  animation: pageReveal 1.5s ease-out 1.3s forwards;
  width: 100%;
  display: flex;
  justify-content: center;
}

@keyframes pageReveal {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =============================================
   FUNDO — camadas de gradiente e textura
   ============================================= */
.bg-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* Gradiente principal do fundo — azul para vermelho */
.bg-gradient {
  background:
    radial-gradient(ellipse 90% 50% at 50% 0%,   rgba(255, 107, 0, 0.15),  transparent 55%),
    radial-gradient(ellipse 80% 50% at 50% 100%,  rgba(18, 18, 18, 0.7),    transparent 60%),
    linear-gradient(170deg, #121212 0%, #000000 40%, #2a1505 72%, #4d2600 100%);
}

/* Linhas horizontais sutis sobre o fundo */
.bg-stripes {
  background-image: repeating-linear-gradient(180deg,
      transparent 0 80px,
      rgba(10, 36, 99, 0.035) 80px 81px);
}

/* Textura de ruído sobre o fundo */
.bg-noise {
  opacity: 0.35;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.05  0 0 0 0 0.08  0 0 0 0 0.15  0 0 0 0.12 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* Campo de estrelas animadas */
.bg-stars {
  overflow: hidden;
}

/* Camada de estrelas pequenas */
.bg-stars::before {
  content: '';
  position: absolute;
  inset: -50%;
  width: 200%;
  height: 200%;
  background-image:
    radial-gradient(1px 1px at 10% 15%, rgba(255,255,255,0.9) 0%, transparent 100%),
    radial-gradient(1px 1px at 22% 38%, rgba(255,255,255,0.7) 0%, transparent 100%),
    radial-gradient(1px 1px at 35% 8%,  rgba(255,255,255,0.85) 0%, transparent 100%),
    radial-gradient(1px 1px at 48% 55%, rgba(255,255,255,0.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 60% 20%, rgba(255,255,255,0.9) 0%, transparent 100%),
    radial-gradient(1px 1px at 72% 42%, rgba(255,255,255,0.75) 0%, transparent 100%),
    radial-gradient(1px 1px at 85% 10%, rgba(255,255,255,0.8) 0%, transparent 100%),
    radial-gradient(1px 1px at 5%  70%, rgba(255,255,255,0.65) 0%, transparent 100%),
    radial-gradient(1px 1px at 18% 82%, rgba(255,255,255,0.7) 0%, transparent 100%),
    radial-gradient(1px 1px at 30% 65%, rgba(255,255,255,0.85) 0%, transparent 100%),
    radial-gradient(1px 1px at 44% 90%, rgba(255,255,255,0.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 55% 75%, rgba(255,255,255,0.9) 0%, transparent 100%),
    radial-gradient(1px 1px at 68% 58%, rgba(255,255,255,0.7) 0%, transparent 100%),
    radial-gradient(1px 1px at 80% 85%, rgba(255,255,255,0.8) 0%, transparent 100%),
    radial-gradient(1px 1px at 92% 30%, rgba(255,255,255,0.65) 0%, transparent 100%),
    radial-gradient(1px 1px at 14% 48%, rgba(255,255,255,0.75) 0%, transparent 100%),
    radial-gradient(1px 1px at 26% 22%, rgba(255,255,255,0.85) 0%, transparent 100%),
    radial-gradient(1px 1px at 39% 78%, rgba(255,255,255,0.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 52% 35%, rgba(255,255,255,0.9) 0%, transparent 100%),
    radial-gradient(1px 1px at 65% 92%, rgba(255,255,255,0.7) 0%, transparent 100%),
    radial-gradient(1px 1px at 77% 68%, rgba(255,255,255,0.8) 0%, transparent 100%),
    radial-gradient(1px 1px at 90% 50%, rgba(255,255,255,0.65) 0%, transparent 100%),
    radial-gradient(1px 1px at 8%  28%, rgba(255,255,255,0.75) 0%, transparent 100%),
    radial-gradient(1px 1px at 96% 74%, rgba(255,255,255,0.85) 0%, transparent 100%);
  animation: starsDrift 60s linear infinite;
}

/* Camada de estrelas maiores com brilho dourado/vermelho */
.bg-stars::after {
  content: '';
  position: absolute;
  inset: -50%;
  width: 200%;
  height: 200%;
  background-image:
    radial-gradient(2px 2px at 15% 25%, rgba(255, 210, 63, 0.95) 0%, transparent 100%),
    radial-gradient(2px 2px at 40% 12%, rgba(255,255,255,0.9) 0%, transparent 100%),
    radial-gradient(2px 2px at 65% 45%, rgba(255, 210, 63, 0.85) 0%, transparent 100%),
    radial-gradient(2px 2px at 82% 18%, rgba(255,255,255,0.95) 0%, transparent 100%),
    radial-gradient(2px 2px at 25% 72%, rgba(255, 210, 63, 0.9) 0%, transparent 100%),
    radial-gradient(2px 2px at 50% 88%, rgba(255,255,255,0.85) 0%, transparent 100%),
    radial-gradient(2px 2px at 75% 62%, rgba(255, 210, 63, 0.95) 0%, transparent 100%),
    radial-gradient(2px 2px at 90% 80%, rgba(255,255,255,0.9) 0%, transparent 100%),
    radial-gradient(3px 3px at 33% 50%, rgba(255, 210, 63, 1.0) 0%, transparent 100%),
    radial-gradient(3px 3px at 58% 30%, rgba(255,255,255,1.0) 0%, transparent 100%),
    radial-gradient(3px 3px at 8%  90%, rgba(255, 210, 63, 0.9) 0%, transparent 100%),
    radial-gradient(3px 3px at 95% 10%, rgba(255,255,255,0.95) 0%, transparent 100%);
  animation: starsDrift 90s linear infinite reverse, starsTwinkle 3s ease-in-out infinite;
}

@keyframes starsDrift {
  from { transform: translateY(0); }
  to   { transform: translateY(50%); }
}

@keyframes starsTwinkle {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.5; }
}

/* =============================================
   CONTAINER PRINCIPAL — centraliza o conteúdo
   ============================================= */
.wrap {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 440px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* =============================================
   CARTÃO DO CABEÇALHO — topo da página
   ============================================= */
.header {
  position: relative;
  text-align: center;
  padding: 28px 20px 32px;
  background: var(--cream);
  border: 2px solid var(--ink);
  border-radius: 28px;
  box-shadow:
    6px 6px 0 var(--black),
    6px 6px 0 2px var(--ink);
  overflow: hidden;
}

/* --- Faixa de bandeira no topo do cabeçalho --- */
.flag-strip {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 10px;
  display: flex;
}

.flag-strip span {
  flex: 1;
}

.flag-strip span:nth-child(odd) {
  background: var(--orange);
}

.flag-strip span:nth-child(even) {
  background: var(--cream);
}

/* --- Estrelas nos cantos do cabeçalho --- */
.corner-star {
  position: absolute;
  font-family: 'Anton', sans-serif;
  color: var(--black);
  opacity: 0.9;
}

.corner-star.tl {
  top: 22px;
  left: 18px;
  transform: rotate(-14deg);
}

.corner-star.tr {
  top: 22px;
  right: 18px;
  transform: rotate(14deg);
}

.corner-star svg {
  width: 22px;
  height: 22px;
}

/* =============================================
   LOGO — círculo com imagem e animação orbital
   ============================================= */
.logo {
  position: relative;
  margin: 14px auto 14px;
  width: 116px;
  height: 116px;
  display: grid;
  place-items: center;
}

/* --- Trilha orbital ao redor do logo --- */
.orbit {
  position: absolute;
  inset: -14px;
  pointer-events: none;
  z-index: 2;
}

.orbit-star,
.orbit-trail {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform-origin: center center;
  animation: orbitSpin 3.6s linear infinite;
  margin: -50% 0 0 -50%;
}

.orbit .s2,
.orbit .t2 {
  animation-delay: -1.8s;
}

.orbit-star svg {
  position: absolute;
  top: -4px;
  left: 50%;
  width: 18px;
  height: 18px;
  margin-left: -9px;
  color: var(--star);
  filter: drop-shadow(0 0 4px rgba(255, 210, 63, 0.9)) drop-shadow(0 0 10px rgba(255, 210, 63, 0.55));
  animation: starTwinkle 1.2s ease-in-out infinite;
}

.orbit-trail i {
  position: absolute;
  top: -4px;
  left: 50%;
  width: 14px;
  height: 14px;
  margin-left: -7px;
  background: radial-gradient(circle, rgba(255, 210, 63, 0.95) 0%, rgba(255, 210, 63, 0.5) 45%, rgba(255, 210, 63, 0) 75%);
  border-radius: 50%;
  transform-origin: center 62px;
}

.orbit-trail i:nth-child(1) {
  transform: rotate(-6deg);
  opacity: 0.85;
}

.orbit-trail i:nth-child(2) {
  transform: rotate(-12deg);
  opacity: 0.72;
}

.orbit-trail i:nth-child(3) {
  transform: rotate(-20deg);
  opacity: 0.6;
}

.orbit-trail i:nth-child(4) {
  transform: rotate(-30deg);
  opacity: 0.48;
}

.orbit-trail i:nth-child(5) {
  transform: rotate(-42deg);
  opacity: 0.37;
}

.orbit-trail i:nth-child(6) {
  transform: rotate(-55deg);
  opacity: 0.28;
}

.orbit-trail i:nth-child(7) {
  transform: rotate(-70deg);
  opacity: 0.2;
}

.orbit-trail i:nth-child(8) {
  transform: rotate(-88deg);
  opacity: 0.13;
}

.orbit-trail i:nth-child(9) {
  transform: rotate(-110deg);
  opacity: 0.07;
}

.orbit-trail i:nth-child(10) {
  transform: rotate(-135deg);
  opacity: 0.03;
}

@keyframes orbitSpin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes starTwinkle {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.25);
  }
}

/* --- Placa circular vermelha do logo --- */
.logo-plate {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--orange);
  border: 3px solid var(--ink);
  overflow: hidden;
}

.logo-plate::before {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 2px dashed var(--black);
  opacity: 0.35;
  animation: spin 28s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* --- Imagem do logo --- */
.logo-img {
  position: relative;
  width: 86%;
  height: 86%;
  object-fit: cover;
  border-radius: 50%;
  z-index: 1;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}

/* =============================================
   TEXTOS DO CABEÇALHO — eyebrow, nome e tagline
   ============================================= */

/* Texto pequeno acima do nome da marca */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 13px;
  letter-spacing: 3px;
  color: var(--black);
  text-transform: uppercase;
}

.eyebrow .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.2);
}

/* Nome principal da marca */
.brand-name {
  font-family: 'Anton', sans-serif;
  font-size: clamp(34px, 9vw, 46px);
  line-height: 0.95;
  letter-spacing: 0.5px;
  margin-top: 10px;
  color: var(--ink);
  text-transform: uppercase;
  white-space: nowrap;
}

/* Frase descritiva abaixo do nome */
.tagline {
  margin-top: 14px;
  font-size: 14.5px;
  color: #3a3f55;
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
  text-wrap: pretty;
}

.tagline .flag-emoji {
  display: inline-block;
  vertical-align: -2px;
}

/* Avaliação em estrelas */
.stars {
  margin-top: 14px;
  display: flex;
  justify-content: center;
  gap: 4px;
  color: var(--star);
}

.stars svg {
  width: 14px;
  height: 14px;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.15));
}

.stars span {
  font-size: 12px;
  color: #6a6f85;
  margin-left: 6px;
  font-weight: 500;
  letter-spacing: 0.5px;
  align-self: center;
}

/* =============================================
   RÓTULOS DE SEÇÃO — divisores entre grupos de botões
   ============================================= */
.section-label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 28px 4px 14px;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 13px;
  letter-spacing: 3.5px;
  color: var(--cream);
  text-transform: uppercase;
  text-shadow: 0 0 12px rgba(255, 210, 63, 0.5);
}

.section-label::before,
.section-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: repeating-linear-gradient(90deg, rgba(251, 247, 240, 0.5) 0 4px, transparent 4px 8px);
  opacity: 0.7;
}

/* =============================================
   BOTÕES / LINKS — lista e estilos de cada variante
   ============================================= */

/* Wrapper da lista de botões */
.links {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Botão padrão — fundo glass translúcido */
.link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 18px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--cream);
  border: 2px solid rgba(255, 255, 255, 0.18);
  border-radius: 18px;
  text-decoration: none;
  font-weight: 600;
  font-size: 16px;
  transition: transform .18s ease, box-shadow .18s ease, background .2s ease;
  box-shadow: 4px 4px 0 var(--black);
  overflow: hidden;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}

/* Efeito de brilho deslizante ao passar o mouse */
.link::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 40%, rgba(255, 255, 255, 0.55) 50%, transparent 60%);
  transform: translateX(-120%);
  transition: transform .6s ease;
  pointer-events: none;
}

.link:hover::before {
  transform: translateX(120%);
}

/* Estado hover do botão */
.link:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--black);
  background: rgba(255, 255, 255, 0.13);
}

/* Estado clicado do botão */
.link:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--black);
  transition-duration: .06s;
}

/* Ícone quadrado dentro do botão */
.link .icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.13);
  border: 2px solid rgba(255, 255, 255, 0.22);
}

.link .icon svg {
  width: 22px;
  height: 22px;
}

/* Área de texto (título + subtítulo) */
.link .body {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  min-width: 0;
  flex: 1;
}

.link .title {
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 1.6px;
  font-size: 19px;
  text-transform: uppercase;
  color: var(--cream);
}

.link .sub {
  font-size: 12px;
  color: rgba(251, 247, 240, 0.6);
  font-weight: 500;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Seta chevron à direita */
.link .chev {
  flex-shrink: 0;
  color: var(--cream);
  opacity: 0.5;
  transition: transform .18s ease, opacity .18s ease;
}

.link:hover .chev {
  transform: translateX(3px);
  opacity: 1;
}

/* --- Variante laranja do botão --- */
.link.orange {
  background: var(--orange);
  color: var(--white);
  border-color: var(--black);
}

.link.orange .title {
  color: var(--white);
}

.link.orange .sub {
  color: rgba(255, 255, 255, 0.85);
}

.link.orange .icon {
  background: var(--white);
  color: var(--orange);
}

.link.orange .chev {
  color: var(--white);
}

/* --- Variante preta do botão --- */
.link.black {
  background: var(--black);
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.22);
}

.link.black .title {
  color: var(--white);
}

.link.black .sub {
  color: rgba(255, 255, 255, 0.8);
}

.link.black .icon {
  background: var(--white);
  color: var(--black);
}

.link.black .chev {
  color: var(--white);
}

/* --- Variante vermelha (iFood) --- */
.link.red {
  background: #ea1d2c;
  color: var(--white);
  border-color: var(--black);
}

.link.red .title {
  color: var(--white);
}

.link.red .sub {
  color: rgba(255, 255, 255, 0.85);
}

.link.red .icon {
  background: var(--white);
  color: #ea1d2c;
}

.link.red .chev {
  color: var(--white);
}

/* --- Botão primário vermelho (iFood) --- */
.link.primary-red {
  padding: 22px 20px;
  background: #ea1d2c;
  color: var(--white);
  border: 2px solid var(--black);
  border-radius: 22px;
  box-shadow: 4px 4px 0 var(--black), 0 0 0 4px rgba(234, 29, 44, 0.0);
  animation: rise 1.2s ease-out forwards, neonPulseRed 2.8s ease-in-out infinite;
}

@keyframes neonPulseRed {
  0%, 100% {
    box-shadow: 4px 4px 0 var(--black), 0 0 0 0 rgba(234, 29, 44, 0);
  }
  50% {
    box-shadow: 4px 4px 0 var(--black), 0 0 28px 2px rgba(234, 29, 44, 0.35);
  }
}

.link.primary-red .icon {
  width: 52px;
  height: 52px;
  background: var(--white);
  color: #ea1d2c;
  display: grid;
  place-items: center;
  border-radius: 12px;
}

.link.primary-red .icon svg {
  width: 26px;
  height: 26px;
}

.link.primary-red .title {
  font-size: 24px;
  letter-spacing: 2px;
  color: var(--white);
  text-shadow: 0 1px 0 #c8102e;
}

.link.primary-red .sub {
  color: rgba(255, 255, 255, 0.9);
  font-size: 13px;
}

.link.primary-red .chev {
  color: var(--cream);
  opacity: 0.9;
}

.link.primary-red::after {
  content: 'DELIVERY';
  position: absolute;
  top: 10px;
  right: -32px;
  background: var(--white);
  color: #ea1d2c;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 10px;
  letter-spacing: 2.5px;
  padding: 3px 30px;
  transform: rotate(34deg);
  border: 1px solid var(--ink);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.15);
}

/* --- Botão primário (destaque) — maior e com animação --- */
.link.primary {
  padding: 22px 20px;
  background: linear-gradient(180deg, #FF8C33 0%, var(--orange) 55%, var(--orange-deep) 100%);
  color: var(--white);
  border: 2px solid var(--black);
  border-radius: 22px;
  box-shadow: 4px 4px 0 var(--black), 0 0 0 4px rgba(255, 107, 0, 0.0);
  animation: rise 1.2s ease-out forwards, neonPulse 2.8s ease-in-out infinite;
}

/* Pulso de brilho no botão primário */
@keyframes neonPulse {

  0%,
  100% {
    box-shadow: 4px 4px 0 var(--black), 0 0 0 0 rgba(255, 107, 0, 0);
  }

  50% {
    box-shadow: 4px 4px 0 var(--black), 0 0 28px 2px rgba(255, 107, 0, 0.35);
  }
}

.link.primary .icon {
  width: 52px;
  height: 52px;
  background: var(--white);
  color: var(--orange);
}

.link.primary .icon svg {
  width: 26px;
  height: 26px;
}

.link.primary .title {
  font-size: 24px;
  letter-spacing: 2px;
  color: var(--white);
  text-shadow: 0 1px 0 var(--orange-deep);
}

.link.primary .sub {
  color: rgba(255, 255, 255, 0.9);
  font-size: 13px;
}

.link.primary .chev {
  color: var(--cream);
  opacity: 0.9;
}

/* Etiqueta dinâmica no canto do botão primário */
.link.primary::after {
  content: attr(data-badge);
  position: absolute;
  top: 10px;
  right: -28px;
  background: var(--star);
  color: var(--ink);
  font-family: 'Bebas Neue', sans-serif;
  font-size: 10px;
  letter-spacing: 2.5px;
  padding: 3px 30px;
  transform: rotate(34deg);
  border: 1px solid var(--ink);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
  display: none;
}
.link.primary[data-badge]::after {
  display: block;
}

/* =============================================
   FAIXA / RIBBON — banner informativo
   ============================================= */
.ribbon {
  position: relative;
  margin: 22px 0 4px;
  padding: 10px 16px;
  background: rgba(255, 255, 255, 0.12);
  color: var(--cream);
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 12px;
  text-align: center;
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 3px;
  font-size: 13px;
  box-shadow: 3px 3px 0 var(--black), 0 0 16px rgba(255, 107, 0, 0.15);
  overflow: hidden;
}

.ribbon::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(-45deg, transparent 0 10px, rgba(251, 247, 240, 0.07) 10px 20px);
  pointer-events: none;
}

.ribbon .star-ico {
  color: var(--star);
  margin: 0 6px;
  display: inline-block;
  vertical-align: -2px;
}

/* =============================================
   RODAPÉ — horários e informações finais
   ============================================= */
footer {
  margin-top: 28px;
  text-align: center;
  padding: 20px 16px;
  background: var(--cream);
  border: 2px solid var(--ink);
  border-radius: 22px;
  box-shadow: 4px 4px 0 var(--black);
  position: relative;
  overflow: hidden;
}

/* Faixa colorida no rodapé do card */
footer .bottom-strip {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 8px;
  display: flex;
}

footer .bottom-strip span {
  flex: 1;
}

footer .bottom-strip span:nth-child(odd) {
  background: var(--orange);
}

footer .bottom-strip span:nth-child(even) {
  background: var(--black);
}

/* --- Título da seção de horários --- */
.hours-title {
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 3px;
  font-size: 12px;
  color: var(--black);
}

/* --- Lista de horários --- */
.hours-list {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
}

/* Linha individual de dia + horário */
.hours-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.hours-row .days {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 13px;
  color: var(--ink);
  white-space: nowrap;
  letter-spacing: 0.3px;
}

.hours-row .dots {
  flex: 1;
  border-bottom: 1.5px dotted rgba(10, 36, 99, 0.35);
  transform: translateY(-4px);
}

.hours-row .time {
  font-family: 'Anton', sans-serif;
  font-size: 20px;
  color: var(--orange);
  letter-spacing: 1px;
  text-shadow: 0 0 10px rgba(255, 107, 0, 0.22);
  white-space: nowrap;
}

/* --- Pílula de status "aberto agora" --- */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 4px 10px;
  background: var(--ink);
  color: var(--cream);
  border-radius: 99px;
  font-size: 11px;
  letter-spacing: 1.5px;
  font-family: 'Bebas Neue', sans-serif;
}

/* Ponto verde pulsante de "ao vivo" */
.status-pill .live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #31d07a;
  box-shadow: 0 0 0 0 rgba(49, 208, 122, 0.8);
  animation: live 1.8s ease-out infinite;
}

@keyframes live {
  0% {
    box-shadow: 0 0 0 0 rgba(49, 208, 122, 0.7);
  }

  70% {
    box-shadow: 0 0 0 8px rgba(49, 208, 122, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(49, 208, 122, 0);
  }
}

/* --- Texto de copyright --- */
.copy {
  margin-top: 14px;
  font-size: 11px;
  color: #6a6f85;
  letter-spacing: 0.5px;
  padding-bottom: 6px;
}

.copy .sep {
  margin: 0 6px;
  opacity: 0.5;
}

/* =============================================
   ANIMAÇÕES DE ENTRADA — elementos sobem ao aparecer
   ============================================= */
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Filhos do .stagger entram em sequência com delay crescente */
.stagger>* {
  opacity: 0;
  animation: rise 1.2s ease-out forwards;
}

.stagger>*:nth-child(1) {
  animation-delay: 1.5s;
}

.stagger>*:nth-child(2) {
  animation-delay: 1.6s;
}

.stagger>*:nth-child(3) {
  animation-delay: 1.7s;
}

.stagger>*:nth-child(4) {
  animation-delay: 1.8s;
}

.stagger>*:nth-child(5) {
  animation-delay: 1.9s;
}

.stagger>*:nth-child(6) {
  animation-delay: 2.0s;
}

.stagger>*:nth-child(7) {
  animation-delay: 2.1s;
}

/* Cabeçalho e rodapé entram com delay próprio */
.header {
  opacity: 0;
  animation: rise 1.5s ease-out 1.4s forwards;
}

footer {
  opacity: 0;
  animation: rise 1.5s ease-out 2.2s forwards;
}

/* =============================================
   RESPONSIVO — ajustes para telas pequenas
   ============================================= */

/* Telas até 420px (celulares compactos) */
@media (max-width: 420px) {
  body {
    padding: 20px 14px 32px;
  }

  .header {
    padding: 24px 16px 28px;
    border-radius: 24px;
  }

  .logo {
    width: 100px;
    height: 100px;
    margin: 10px auto 12px;
  }

  .brand-name {
    font-size: 32px;
    letter-spacing: 0.3px;
  }

  .tagline {
    font-size: 13.5px;
  }

  .link {
    padding: 16px 14px;
    gap: 12px;
    border-radius: 16px;
  }

  .link .icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
  }

  .link .icon svg {
    width: 20px;
    height: 20px;
  }

  .link .title {
    font-size: 17px;
    letter-spacing: 1.4px;
  }

  .link .sub {
    font-size: 11.5px;
  }

  .link.primary {
    padding: 18px 16px;
    border-radius: 18px;
  }

  .link.primary .icon {
    width: 46px;
    height: 46px;
  }

  .link.primary .icon svg {
    width: 24px;
    height: 24px;
  }

  .link.primary .title {
    font-size: 21px;
    letter-spacing: 1.8px;
  }

  .link.primary::after {
    top: 8px;
    right: -30px;
    font-size: 9px;
    padding: 2px 30px;
  }

  .section-label {
    margin: 22px 4px 12px;
    font-size: 12px;
    letter-spacing: 3px;
  }

  .ribbon {
    font-size: 12px;
    letter-spacing: 2.2px;
    padding: 9px 12px;
  }

  footer {
    padding: 18px 14px;
    border-radius: 20px;
  }

  .hours-row .time {
    font-size: 18px;
  }

  .hours-row .days {
    font-size: 12.5px;
  }

  .copy {
    font-size: 10.5px;
  }
}

/* Telas muito pequenas até 340px */
@media (max-width: 340px) {
  .brand-name {
    font-size: 26px;
  }

  .link .sub {
    display: none;
  }

  .hours-row {
    flex-wrap: wrap;
  }

  .hours-row .dots {
    display: none;
  }
}

/* Telas maiores a partir de 600px (tablets/desktop) */
@media (min-width: 600px) {
  body {
    padding: 56px 20px 56px;
  }

  .wrap {
    max-width: 460px;
  }
}

/* =============================================
   ACESSIBILIDADE — sem animações (preferência do SO)
   ============================================= */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }

  #splash {
    display: none;
  }

  #page-content {
    opacity: 1 !important;
  }

  .header,
  footer,
  .stagger>* {
    opacity: 1 !important;
    animation: none !important;
  }
}