* { box-sizing: border-box; }
html { background: #201006; }
body { margin: 0; color: #fff; }
.coming-soon { position: relative; width: 100%; min-height: 56.28vw; overflow: hidden; isolation: isolate; }
.food { position: absolute; inset: 0; z-index: -2; margin: 0; }
.food img { display: block; width: 100%; height: 100%; object-fit: cover; }
.coming-soon::before { content: ""; position: absolute; inset: 25% 57% 0 0; z-index: -1; background: radial-gradient(ellipse, #10060080, transparent 75%); pointer-events: none; }
.brand { position: absolute; left: 11.15%; top: -.6vw; width: 18.2%; }
.brand img { display: block; width: 100%; height: auto; }
.message { position: relative; padding-top: 18.2vw; margin-left: 3.2%; width: 35.65%; }
h1 { font-family: "Times New Roman", Times, serif; font-weight: 700; margin: 0; line-height: .85; }
h1 span { display: block; white-space: nowrap; transform-origin: left center; }
.something { font-size: 7.5vw; font-variant: small-caps; letter-spacing: -.26vw; }
.delicious { font-size: 6.4vw; text-transform: uppercase; letter-spacing: -.28vw; color: #ffc045; background: linear-gradient(#ffd25a 15%, #f3a528 85%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.on-its-way { font-size: 4.85vw; text-transform: uppercase; letter-spacing: -.2vw; line-height: 1; }
.swoosh { display: block; width: 100%; height: auto; margin: .1vw 0 .95vw; }
.notice { margin: 0; font-family: Arial, Helvetica, sans-serif; font-size: 1.92vw; line-height: 1.23; text-transform: uppercase; }
.notice span, .notice strong { display: block; }
.notice strong { color: #ffc044; font-size: 1.98vw; }
.contact { position: relative; margin: 1.3vw 0 4.8vw 3.2%; width: 35.65%; border-top: 2px solid #eab636; padding-top: .9vw; }
.contact p { margin: 0; color: #ffc044; font: 700 2.25vw/1.2 "Times New Roman", Times, serif; }
.contact a { display: block; min-height: 44px; padding-block: 4px; max-width: 100%; color: #fff; text-decoration: none; font: 2.25vw/1.2 Arial, Helvetica, sans-serif; overflow-wrap: anywhere; }
.contact a:hover { text-decoration: underline; text-underline-offset: 5px; }
.contact a:focus-visible { outline: 3px solid #ffd15b; outline-offset: 5px; border-radius: 2px; }

@media (max-width: 899px) {
  .coming-soon { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; min-height: 100vh; background: #241107; overflow: hidden; }
  .coming-soon::before { inset: 0 0 auto; height: 650px; background: linear-gradient(#1b0a0280, #241107), url("assets/fondo-reconstruido.png") left top / auto 720px no-repeat; }
  .brand { position: relative; width: 190px; top: auto; left: auto; margin: 12px auto 22px; }
  .message { width: min(78%, 550px); margin: 0 auto; padding: 0; }
  h1 { line-height: .88; }
  .something { font-size: min(16.4vw, 115px); letter-spacing: -.55vw; }
  .delicious { font-size: min(14vw, 98px); letter-spacing: -.6vw; }
  .on-its-way { font-size: min(10.6vw, 74px); letter-spacing: -.4vw; }
  .swoosh { margin: 4px 0 16px; }
  .notice { font-size: min(3.99vw, 28px); line-height: 1.35; }
  .notice strong { font-size: min(4.1vw, 28.8px); }
  .food { position: relative; inset: auto; z-index: auto; width: 100%; height: 72vw; max-height: 550px; margin: 20px 0 0; overflow: hidden; }
  .food::after { content: ""; position: absolute; inset: 0; background: linear-gradient(#241107, transparent 14%, transparent 90%, #241107); }
  .food img { width: 140%; max-width: none; height: 100%; object-fit: cover; object-position: right bottom; margin-left: -40%; }
  .contact { margin: 8px auto 30px; width: min(78%, 550px); padding-top: 16px; }
  .contact p { font-size: 28px; }
  .contact a { font-size: 27px; }
}
@media (max-width: 520px) {
  .brand { width: 156px; margin: 10px auto 24px; }
  .message, .contact { width: 89%; }
  .something { font-size: 18.7vw; letter-spacing: -.7vw; }
  .delicious { font-size: 16vw; letter-spacing: -.7vw; }
  .on-its-way { font-size: 12.15vw; letter-spacing: -.5vw; }
  .swoosh { margin-bottom: 15px; }
  .notice { font-size: 4.54vw; }
  .notice strong { font-size: 4.66vw; }
  .food { height: 95vw; margin-top: 18px; }
  .food img { width: 175%; margin-left: -75%; }
  .contact { margin-top: 8px; margin-bottom: 25px; padding-top: 15px; }
  .contact p { font-size: 6vw; }
  .contact a { font-size: 5.6vw; }
}