/* Gigo's Burger and More — página "Muy pronto" */
:root {
  --black: #000000;
  --ink: #0d0b09;
  --orange: #d07a1c;       /* naranja del logotipo */
  --orange-light: #e9a04a;
  --cream: #f4ebdd;
  --muted: #b9ab98;
}

*,
*::before,
*::after { box-sizing: border-box; }

html, body { margin: 0; height: 100%; }

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(ellipse 70% 55% at 50% 22%, rgba(208, 122, 28, .16), transparent 70%),
    var(--black);
  color: var(--cream);
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  flex: 1;
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
  padding: 48px 20px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.logo {
  width: min(300px, 70vw);
  height: auto;
  border-radius: 50%;
  animation: rise .9s ease-out both;
}

.kicker {
  margin: 28px 0 6px;
  font-family: "Bebas Neue", sans-serif;
  font-size: 1.25rem;
  letter-spacing: .38em;
  color: var(--orange);
  animation: rise .9s .15s ease-out both;
}

h1 {
  margin: 0;
  font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
  font-size: clamp(2.2rem, 6.4vw, 3.6rem);
  text-wrap: balance;
  line-height: 1.02;
  letter-spacing: .02em;
  color: var(--cream);
  animation: rise .9s .25s ease-out both;
}

.lead {
  max-width: 540px;
  margin: 18px auto 0;
  font-size: clamp(.98rem, 2.4vw, 1.08rem);
  line-height: 1.7;
  color: var(--muted);
  animation: rise .9s .35s ease-out both;
}

/* barra "en la parrilla" */
.grill {
  width: min(360px, 100%);
  margin: 34px auto 0;
  animation: rise .9s .45s ease-out both;
}

.grill__bar {
  height: 8px;
  border-radius: 99px;
  border: 1px solid rgba(208, 122, 28, .55);
  overflow: hidden;
  background: rgba(208, 122, 28, .08);
}

.grill__bar span {
  display: block;
  height: 100%;
  width: 40%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--orange), var(--orange-light));
  animation: cook 2.6s ease-in-out infinite;
}

.grill__label {
  margin: 10px 0 0;
  font-size: .82rem;
  letter-spacing: .06em;
  color: var(--orange);
}

.follow {
  margin: 40px 0 14px;
  font-size: .95rem;
  color: var(--cream);
}

.social {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 160px;
  justify-content: center;
  padding: 12px 22px;
  border: 1.5px solid var(--orange);
  border-radius: 99px;
  color: var(--orange);
  text-decoration: none;
  font-weight: 600;
  font-size: .95rem;
  transition: background-color .2s, color .2s, transform .2s;
}

.btn svg { width: 20px; height: 20px; fill: currentColor; }

.btn:hover,
.btn:focus-visible {
  background: var(--orange);
  color: var(--black);
  transform: translateY(-2px);
}

.btn:focus-visible { outline: 2px solid var(--cream); outline-offset: 3px; }

.foot {
  padding: 22px 16px 28px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  font-size: .8rem;
  color: #7d7266;
  border-top: 1px solid rgba(208, 122, 28, .18);
}

.foot .dot { color: var(--orange); }

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

@keyframes cook {
  0%   { transform: translateX(-100%); }
  50%  { transform: translateX(80%); }
  100% { transform: translateX(250%); }
}

@media (max-width: 560px) {
  .wrap { padding-top: 36px; }
  .btn { min-width: 0; flex: 1 1 140px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .grill__bar span { width: 65%; }
}