:root{
  --bg:#FAF6EF; --ink:#423E3B;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{
  height:100%;
  background:var(--bg);
  color:var(--ink);
  font:16px/1.6 'Exo',system-ui,-apple-system,Segoe UI,Roboto;
  overscroll-behavior:none;
  overflow:hidden;            /* sem rolagem */
  touch-action:manipulation;
}

/* LAYOUT GERAL */
.wrap{
  height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start; /* ancora no topo */
  gap:16px;
  padding:12px 16px 48px;     /* espaço para o rodapé */
  text-align:center;
}

/* LOGO */
.logo{
  height:300px;               /* desktop */
  width:auto;
  margin-top:6px;
  filter:drop-shadow(0 6px 16px rgba(0,0,0,.12));
}

/* BANDEIRAS (DESKTOP POR PADRÃO = HORIZONTAL) */
.grid{
  display:flex;
  flex-direction:row;         /* desktop: lado a lado */
  align-items:center;
  justify-content:center;
  gap:100px;
}
.flag-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-decoration:none;
  color:var(--ink);
}
.flag{
  width:170px;                /* desktop */
  height:auto;
  display:block;
  border-radius:12px;
  box-shadow:0 6px 18px rgba(0,0,0,.12);
}
.lang{
  margin-top:8px;
  font-weight:900;
}

/* RODAPÉ */
.footer{
  position:absolute;
  bottom:10px; left:0; right:0;
  text-align:center;
  font-size:.9rem;
  opacity:.95;
}

/* ===== MOBILE ===== */
@media (max-width:720px){
  .wrap > .logo{
    height:240px;
    transform: translateY(-30px); /* sobe 30px */
    will-change: transform;
  }

  /* Bandeiras em coluna e MAIS para cima */
  .grid{
    flex-direction:column;    /* mobile: vertical */
    align-items:center;
    gap:14px;
    margin-top:-6vh;          /* sobe o bloco de bandeiras/legendas */
  }

  .flag{ width:120px; }       /* mobile menor */
  .lang{ font-size:14px; }

  /* Rodapé visível no mobile */
  .footer{
    bottom:8px;
    font-size:.85rem;
  }
}